/* t42:tamil-cinema — the atlas house style.
 *
 * Tokens, masthead and the shared furniture, taken from t42:music-atlas
 * (music-graph-explorer/app/static/app.css, brand@2.0.0) so the two read as one
 * family. The light scope only: this atlas does not carry a dark theme, so the
 * dark block is deliberately absent rather than left dead in the file.
 *
 * The one rule that governs everything below: #1DB954 is 2.35:1 on this ground,
 * so the green is a FILL and never a letterform. Anything green that has to be
 * read takes --accent-ink at 6.10:1. Thirai used to run amber for text and
 * maroon for selection; both collapse onto the single accent here, and the
 * distinction they carried is remade as dark green for notable, bright green
 * for chosen.
 */

@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/fonts/newsreader-var.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/hanken-grotesk-var.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/geist-mono-var.woff2) format('woff2')}

:root{
  --bg:#F4F4F4; --panel:#FFFFFF; --card:#FFFFFF; --bg2:#E8E8E8;
  --line:rgba(11,11,13,.13); --line2:rgba(11,11,13,.22);
  --ink:#0B0B0D; --ink2:#40403F; --ink3:#6E6A60; --ink4:#797469; --ink5:#9A9488;
  --brand:#1DB954; --brand-ink:#0B0B0D;
  --accent:#1DB954; --accent-h:#189945; --accent-ink:#106A32;
  --proven:#106A32; --caution:#8A6510; --leak:#B33C18;
  --wash:rgba(29,185,84,.12);
  --scrim:rgba(255,255,255,.92);
  --tipbg:rgba(255,255,255,.96);
  /* Canvas and SVG cannot read custom properties at draw time, so the map and
     the force graph read these through a helper rather than from literals. */
  --graph-bg:#F4F4F4; --graph-ink:#0B0B0D; --graph-node:#E4E4E4; --graph-edge:#9A9A9A;
  --graph-halo:#F4F4F4; --graph-unknown:#8D97A2;
  --graph-land:#E0E0DC; --graph-coast:#9A9A96; --graph-water:#FFFFFF;
  --graph-land2:#EDEDEA; --graph-coast2:#C6C6C2;
  /* The masthead is a brand band, black the way a label's site carries it. */
  --top:#000000; --top-ink:#FFFFFF; --top-ink2:#B3B3B3; --top-line:#242424;

  --serif:'Newsreader','Noto Serif',Georgia,serif;
  --sans:'Hanken Grotesk','Noto Sans','Noto Sans Tamil','Tamil Sangam MN',
    -apple-system,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font:14px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
::selection{background:var(--wash)}

/* ── Masthead ───────────────────────────────────────────────────────────────
   Fixed brand furniture. Anything that changes as you walk (the trail, the
   filters) sits in the bar below it, because a brand band that reshuffles is
   not a brand band. */
header{display:flex;align-items:stretch;gap:16px;padding:0 0 0 18px;height:68px;
  background:var(--top);position:relative;z-index:30}
.mark{width:34px;height:34px;border-radius:50%;flex:none;border:0;cursor:pointer;
  align-self:center;display:grid;place-items:center;background:var(--brand);
  font:600 10px/1 var(--mono);letter-spacing:.02em;color:var(--brand-ink)}
/* Thirai is the name; t42:tamil-cinema is where it sits in the family, so the
   name takes the size and the platform line runs quietly underneath it. */
.brand{background:none;border:0;padding:0;text-align:left;cursor:pointer;align-self:center;
  font:600 25px/1 var(--serif);letter-spacing:.005em;white-space:nowrap;color:var(--top-ink)}
.brand .ta{font-family:'Noto Sans Tamil','Tamil Sangam MN',var(--sans);
  font-size:17px;font-weight:400;margin-left:9px;color:var(--top-ink2)}
.brand .sub{display:block;color:var(--top-ink2);font:400 10px/1 var(--mono);
  letter-spacing:.07em;margin-top:7px}

/* ── The nav row ───────────────────────────────────────────────────────────
   Icon over label. The active item wears a white tab that runs into the bottom
   edge of the band, with the two shoulders curving outward the way a tab meets
   a tab bar. Those shoulders are two small white squares flanking the tab with
   a quarter circle masked out of the inner top corner: there is no border
   radius that curves away from its own box, so it has to be drawn. */
.navwrap{flex:1;min-width:0;position:relative;display:flex;align-items:stretch}
nav{display:flex;align-items:stretch;gap:2px;overflow-x:auto;scrollbar-width:none;
  scroll-behavior:smooth}
nav::-webkit-scrollbar{display:none}
.nvi{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:8px;padding:13px 6px 0;background:none;border:0;cursor:pointer;flex:none;
  color:var(--top-ink2);position:relative;white-space:nowrap;transition:color .14s}
.nvi svg{width:21px;height:21px;fill:currentColor;flex:none}
.nvi .lbl{font:500 13.5px/1 var(--sans);padding:8px 13px 10px;border-radius:12px 12px 0 0;
  position:relative}
.nvi:hover{color:var(--top-ink)}
.nvi.on{color:var(--top-ink)}
.nvi.on .lbl{background:#fff;color:#0B0B0D;font-weight:700}
.nvi.on .lbl::before,.nvi.on .lbl::after{content:"";position:absolute;bottom:0;
  width:12px;height:12px;background:#fff;pointer-events:none}
.nvi.on .lbl::before{left:-12px;
  -webkit-mask:radial-gradient(circle at 0 0,transparent 12px,#000 12.5px);
          mask:radial-gradient(circle at 0 0,transparent 12px,#000 12.5px)}
.nvi.on .lbl::after{right:-12px;
  -webkit-mask:radial-gradient(circle at 100% 0,transparent 12px,#000 12.5px);
          mask:radial-gradient(circle at 100% 0,transparent 12px,#000 12.5px)}

/* Overflow. The fade and the chevron only exist while there is something past
   the edge, so neither reads as permanent furniture. */
.navwrap::before,.navwrap::after{content:"";position:absolute;top:0;bottom:0;width:56px;
  pointer-events:none;opacity:0;transition:opacity .16s;z-index:2}
.navwrap::before{left:0;background:linear-gradient(90deg,var(--top),transparent)}
.navwrap::after{right:0;background:linear-gradient(270deg,var(--top),transparent)}
.navwrap.hasless::before{opacity:1}
.navwrap.hasmore::after{opacity:1}
.navmore{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:3;
  width:26px;height:26px;border:0;border-radius:50%;cursor:pointer;display:none;
  place-items:center;background:#1c1c1c;color:var(--top-ink);font-size:17px;line-height:1}
.navwrap.hasmore .navmore{display:grid}
.navmore:hover{background:#2b2b2b}

.hdr-right{display:flex;align-items:center;gap:10px;align-self:center;padding-right:18px;
  flex:none}
/* A plain control on the band, for the things one page needs and the others do
   not: the movieverse's connect toggle is the only one so far. */
.hdrbtn{background:none;border:1px solid var(--top-line);border-radius:999px;
  color:var(--top-ink2);padding:8px 15px;cursor:pointer;flex:none;
  font:400 12.5px/1 var(--sans);transition:.14s;white-space:nowrap}
.hdrbtn:hover{color:var(--top-ink);border-color:#3A3A3A}
.hdrbtn.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);
  font-weight:600}
.keysbtn{width:38px;height:38px;flex:none;border:0;border-radius:11px;cursor:pointer;
  display:grid;place-items:center;background:#fff;color:#0B0B0D;transition:.14s}
.keysbtn svg{width:20px;height:20px;fill:currentColor}
.keysbtn:hover{background:var(--bg2)}

.searchbox{position:relative}
#q{width:250px;background:var(--bg);border:1px solid var(--line);color:var(--ink);
  padding:8px 14px;border-radius:999px;font:400 13px var(--sans)}
#q:focus{outline:none;border-color:var(--brand)}
#q::placeholder{color:var(--ink3)}
.results{position:absolute;top:42px;right:0;width:380px;max-height:60vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:5px;
  box-shadow:0 18px 50px rgba(11,11,13,.18);z-index:40}
.results .r{padding:7px 10px;border-radius:5px;cursor:pointer;display:flex;gap:10px;
  align-items:baseline}
.results .r:hover,.results .r.sel{background:var(--bg2)}
.results .rh{color:var(--ink3);font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  padding:8px 10px 4px}

/* ── Shared furniture ───────────────────────────────────────────────────── */
.eyebrow{font:400 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink)}
.note{color:var(--ink3);font-size:12.5px;line-height:1.65;max-width:62ch}
.overlay{position:absolute;background:var(--tipbg);border:1px solid var(--line);
  border-radius:8px;padding:10px 12px;backdrop-filter:blur(6px);max-width:340px}
.overlay.tl{top:14px;left:14px}.overlay.tr{top:14px;right:14px}
.overlay.bl{bottom:14px;left:14px}
.ov-title{font-weight:600;font-size:13px;margin-bottom:4px}
.ov-body{color:var(--ink2);font-size:12px;line-height:1.5}
.hidden{display:none !important}

/* The nav row is the point of the masthead, so everything else yields to it
   first: the search field narrows, then the Tamil second reading goes, then
   the wordmark, leaving the T42 mark, the nav and the two controls. The nav
   itself never collapses; it scrolls, and the chevron says so. */
@media(max-width:1280px){#q{width:190px}}
@media(max-width:1140px){.brand .sub{display:none}.brand{font-size:23px}}
@media(max-width:1040px){.brand .ta{display:none}}
@media(max-width:920px){.brand{display:none}#q{width:160px}}
@media(max-width:760px){#q{width:130px}header{gap:10px;padding-left:12px}
  .hdr-right{gap:7px;padding-right:12px}}

/* ── Account ────────────────────────────────────────────────────────────────
   The chip sits on the black band with the rest of the furniture, so it takes
   the band's inks and not the page's. The menu drops onto the page below it
   and takes the page's, which is why the two halves read differently here. */
.acct{position:relative;flex:none}
.acct .signin{color:var(--top-ink2);font:400 12.5px/1 var(--sans);text-decoration:none;
  border:1px solid var(--top-line);border-radius:999px;padding:9px 16px;white-space:nowrap;
  display:inline-block;transition:.14s}
.acct .signin:hover{color:var(--top-ink);border-color:#3A3A3A}
.acct .chip{width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;flex:none;
  display:grid;place-items:center;overflow:hidden;padding:0;background:var(--brand);
  font:600 13px/1 var(--sans);color:var(--brand-ink)}
.acct .chip img{width:100%;height:100%;object-fit:cover;display:block}
.acctmenu{position:absolute;right:0;top:46px;min-width:230px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:8px;z-index:60;
  box-shadow:0 18px 44px rgba(11,11,13,.18)}
.acctmenu .who{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.acctmenu .who strong{display:block;font:500 14px/1.3 var(--sans);color:var(--ink)}
.acctmenu .who span{display:block;margin-top:3px;font-size:12px;color:var(--ink3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acctmenu .quota{padding:7px 12px;font:400 12px/1.4 var(--mono);color:var(--accent-ink)}
.acctmenu a,.acctmenu button{display:block;width:100%;text-align:left;background:none;
  border:0;cursor:pointer;padding:9px 12px;border-radius:8px;color:var(--ink2);
  font:400 13.5px/1 var(--sans);text-decoration:none}
.acctmenu a:hover,.acctmenu button:hover{background:var(--bg2);color:var(--ink)}

/* ── Sign-in and the pages that have to exist beside it ─────────────────────
   Meta will not take an app live without a privacy policy, terms and a
   deletion route, so those are real pages in the house style rather than a
   link to nothing. */
.sheet{max-width:560px;margin:0 auto;padding:64px 24px 80px}
.sheet.wide{max-width:760px}
.sheet h1{font:300 32px/1.2 var(--serif);margin:0 0 10px;letter-spacing:-.01em}
.sheet .lede{font-size:15px;line-height:1.65;color:var(--ink3);margin:0 0 34px}
.sheet h2{font:500 15px/1.3 var(--sans);margin:34px 0 10px;color:var(--ink)}
.sheet p,.sheet li{font-size:14px;line-height:1.72;color:var(--ink2)}
.sheet a{color:var(--accent-ink)}
.prov{display:grid;gap:10px;margin:0 0 22px}
.prov button,.prov a{display:flex;align-items:center;gap:12px;width:100%;cursor:pointer;
  background:var(--panel);border:1px solid var(--line2);border-radius:12px;
  padding:14px 18px;font:450 14.5px/1 var(--sans);color:var(--ink);text-decoration:none;
  transition:.14s}
.prov button:hover,.prov a:hover{border-color:var(--ink);background:var(--bg2)}
.prov svg{width:20px;height:20px;flex:none}
.prov .off{opacity:.5;cursor:not-allowed;pointer-events:none}
.prov .tag{margin-left:auto;font:400 11px/1 var(--mono);color:var(--ink4);
  letter-spacing:.02em}
.caveat{background:var(--panel);border-left:2px solid var(--caution);
  border-radius:0 8px 8px 0;padding:13px 16px;margin:0 0 26px;font-size:13px;
  line-height:1.6;color:var(--ink3)}
.caveat b{color:var(--ink);font-weight:500}
.fineprint{margin-top:26px;font-size:12px;line-height:1.6;color:var(--ink4)}
.danger{background:none;border:1px solid var(--leak);color:var(--leak);
  border-radius:10px;padding:11px 18px;font:450 13.5px/1 var(--sans);cursor:pointer}
.danger:hover{background:var(--leak);color:#fff}
.kv{display:grid;grid-template-columns:150px 1fr;gap:10px 18px;margin:0 0 30px;
  font-size:13.5px}
.kv dt{color:var(--ink4)}
.kv dd{margin:0;color:var(--ink)}