/* Evolve Media Collective — Client Portal design system.
   Tokens and components lifted from the booking funnel (emcbk) and the
   landing pages so the portal reads as the same product as the funnel. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;1,9..144,300;1,9..144,400&family=Hanken+Grotesk:wght@300;400;500;600;700;800&display=swap');

:root{
  --ink:#0c0c0e; --ink-2:#141417; --card:#16161a;
  --line:rgba(200,164,92,.22); --line-soft:rgba(244,241,234,.08);
  --paper:#f4f1ea; --muted:#a09a8e; --muted-2:#6f6a60;
  --gold:#c8a45c; --gold-bright:#dcc089;
  --ok:#7da87b; --warn:#c8a45c; --err:#b06a5f;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--paper);min-height:100vh;
  font-family:"Hanken Grotesk",sans-serif;font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}

h1,h2,h3{font-family:"Fraunces",serif;font-weight:300;letter-spacing:-.01em;line-height:1.1}
h1 em,h2 em{font-style:italic;color:var(--gold-bright)}
.eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:700}

a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-bright)}

/* ── Impersonation banner (staff "Login as" a client) ───────────────────── */
.impersonate-strip{background:var(--gold);color:#1a1407;font-size:12.5px;font-weight:600;
  letter-spacing:.03em;text-align:center;padding:10px 16px}
.impersonate-strip b{font-weight:800}
.impersonate-strip button{margin-left:10px;background:rgba(26,20,7,.15);
  border:1px solid rgba(26,20,7,.35);border-radius:3px;color:#1a1407;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:5px 12px;
  cursor:pointer;font-family:inherit;transition:background .2s}
.impersonate-strip button:hover{background:rgba(26,20,7,.28)}

/* ── Failed-payment banner (subscription renewal declined, P3b dunning) ─── */
.payment-failed-strip{background:var(--err);color:#fff;font-size:12.5px;font-weight:600;
  letter-spacing:.02em;text-align:center;padding:10px 16px}
.payment-failed-strip button{margin-left:10px;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.4);border-radius:3px;color:#fff;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:5px 12px;
  cursor:pointer;font-family:inherit;transition:background .2s}
.payment-failed-strip button:hover{background:rgba(255,255,255,.3)}
.payment-failed-strip button:disabled{opacity:.6;cursor:default}

/* ── Top bar ─────────────────────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:100;backdrop-filter:blur(12px);
  background:rgba(12,12,14,.82);border-bottom:1px solid var(--line-soft)}
.bar-in{max-width:1040px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.bar-logo img{height:44px;width:auto;display:block}
.bar-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bar-nav a{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--muted);padding:9px 13px;border-radius:3px;border:1px solid transparent;transition:all .25s}
.bar-nav a:hover{color:var(--paper)}
.bar-nav a.active{color:var(--gold-bright);border-color:var(--line)}

/* User menu — the client's name, top right, opening Account settings /
   Branding files / Sign out. Same shape as the workflow app's own menu. */
.user-menu{position:relative}
.user-menu-toggle{
  background:none;border:1px solid var(--line-soft);color:var(--paper);border-radius:3px;
  font-family:inherit;font-size:11px;letter-spacing:.04em;font-weight:500;
  padding:8px 12px;cursor:pointer;transition:all .25s;
  display:flex;align-items:center;gap:8px;white-space:nowrap}
.user-menu-toggle:hover,.user-menu-toggle.open{border-color:var(--gold);color:var(--gold-bright)}
.user-menu-toggle .chev{display:flex;color:var(--muted-2);transition:transform .2s}
.user-menu-toggle.open .chev{transform:rotate(180deg)}
.user-menu-panel{position:absolute;top:calc(100% + 8px);right:0;min-width:190px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:6px;
  box-shadow:0 10px 28px rgba(0,0,0,.45);z-index:150;padding:6px;
  display:none;flex-direction:column;gap:2px}
.user-menu-panel.open{display:flex}
.user-menu-item{display:block;width:100%;text-align:left;background:none;border:none;
  color:var(--paper);font-family:inherit;font-size:12.5px;letter-spacing:.01em;
  padding:9px 12px;border-radius:4px;cursor:pointer;transition:background .2s,color .2s}
.user-menu-item:hover{background:rgba(200,164,92,.12);color:var(--gold-bright)}
.user-menu-item.danger:hover{background:rgba(176,106,95,.15);color:#e2b3ab}

/* Text size slider — some clients want everything a bit larger. Scales the
   page content (not the nav bar itself), defaults to 100%, remembered
   across pages and visits via localStorage. */
.bar-textsize{display:flex;align-items:center;gap:8px}
.bar-textsize .ts-a{color:var(--muted-2);font-family:"Fraunces",serif;line-height:1;user-select:none}
.bar-textsize .ts-a.sm{font-size:11px}
.bar-textsize .ts-a.lg{font-size:17px;color:var(--muted)}
.bar-textsize input[type=range]{-webkit-appearance:none;appearance:none;width:74px;height:3px;
  background:var(--line-soft);border-radius:2px;outline:none;cursor:pointer}
.bar-textsize input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:13px;height:13px;border-radius:50%;background:var(--gold);border:2px solid var(--ink);cursor:pointer}
.bar-textsize input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;
  background:var(--gold);border:2px solid var(--ink);cursor:pointer;border-width:2px;border-style:solid}

@media(max-width:680px){
  .bar-in{flex-wrap:wrap;justify-content:center;row-gap:10px;padding:12px 16px}
  .bar-logo{flex-basis:100%;display:flex;justify-content:center}
  .bar-logo img{height:36px}
  .bar-nav{justify-content:center}
  .bar-nav a{padding:7px 10px;font-size:10px}
  .bar-textsize{display:none}
  /* The menu toggle stays visible here — unlike the old plain Sign-out
     button, it's now the only way to reach Account/Branding/Sign out, so
     it can't be hidden at this width. */
  .user-menu-panel{right:50%;transform:translateX(50%)}
}

/* ── Page scaffold ───────────────────────────────────────────────────── */
:root{--sf-text-zoom:1}
.page,.footer,.modal-overlay{zoom:var(--sf-text-zoom,1)}
.page{padding:44px 0 90px}
.page-head{margin-bottom:34px}
.page-head h1{font-size:clamp(30px,4.6vw,44px);margin-top:8px}
.page-head .sub{color:var(--muted);font-size:15.5px;margin-top:12px;max-width:620px;font-weight:300}

/* ── Cards ───────────────────────────────────────────────────────────── */
.card{border:1px solid var(--line-soft);border-radius:6px;background:rgba(20,20,23,.6);
  padding:26px 28px;transition:border-color .3s}
.card.gold{border-color:var(--line);background:rgba(200,164,92,.04)}
.card h3{font-size:20px;margin-bottom:6px}
.card .k{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:14px}
/* Larger variant for a card's actual section title (vs. the tiny eyebrow
   labels .k is normally used for elsewhere) — admin pages' "Logins",
   "Credits", "Needs your review", etc. */
.card .k.lg{font-size:17px;letter-spacing:.06em;margin-bottom:16px}
.grid{display:grid;gap:18px}
.grid.two{grid-template-columns:1fr 1fr}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
@media(max-width:760px){.grid.two{grid-template-columns:1fr}}
/* A 1fr track is minmax(auto,1fr): its floor is the item's min-content
   width, so a card holding a native audio player (300px intrinsic) pushed
   the track — and the page — wider than a phone at the larger text sizes.
   min-width:0 drops that floor; the card shrinks and its contents wrap. */
.grid.two>*{min-width:0}
/* Dashboard listing columns: cap at roughly 3 cards tall, a scrollbar picks
   up the rest instead of the column (and the page) growing without limit. */
.grid.listings-scroll{max-height:482px;overflow-y:auto;overflow-x:hidden;padding:2px;
  scrollbar-width:thin;scrollbar-color:var(--gold) rgba(255,255,255,.05)}
.grid.listings-scroll::-webkit-scrollbar{width:8px}
.grid.listings-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:4px}
.grid.listings-scroll::-webkit-scrollbar-thumb{background:var(--gold);border-radius:4px}
.grid.listings-scroll::-webkit-scrollbar-thumb:hover{background:var(--gold-bright)}

/* ── Listing cards ───────────────────────────────────────────────────── */
.listing-card{display:block;border:1px solid var(--line-soft);border-radius:6px;
  background:rgba(20,20,23,.6);padding:22px 24px;
  transition:border-color .3s,transform .3s,box-shadow .3s;color:var(--paper)}
.listing-card:hover{border-color:var(--line);transform:translateY(-2px);color:var(--paper)}
.listing-card.needs-review{border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold),0 0 26px rgba(200,164,92,.22)}
.listing-card.needs-review:hover{border-color:var(--gold-bright);
  box-shadow:0 0 0 1px var(--gold-bright),0 0 30px rgba(200,164,92,.3)}
.listing-card .t{font-family:"Fraunces",serif;font-weight:300;font-size:22px;line-height:1.15}
.listing-card .product-line{margin-top:8px}
.listing-card .product-line .mini-tag{margin-left:0;vertical-align:baseline}
.listing-card .row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px}
.listing-card .m{font-size:12.5px;color:var(--muted-2);letter-spacing:.03em}

/* ── Status badge ────────────────────────────────────────────────────── */
.badge{display:inline-block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;padding:6px 12px;border-radius:3px;white-space:nowrap}
.badge.booked        {background:transparent;color:var(--muted);border:1px solid var(--line-soft)}
.badge.in_production {background:rgba(200,164,92,.12);color:var(--gold-bright);border:1px solid var(--line)}
.badge.outline_review{background:var(--gold);color:#1a1407;border:1px solid var(--gold)}
.badge.outline_production,.badge.outline_feedback{background:rgba(200,164,92,.12);color:var(--gold-bright);border:1px solid var(--line)}
.badge.video_review  {background:var(--gold);color:#1a1407;border:1px solid var(--gold)}
.badge.voiceover_awaiting{background:var(--gold);color:#1a1407;border:1px solid var(--gold)}
.badge.voiceover_review{background:rgba(200,164,92,.12);color:var(--gold-bright);border:1px solid var(--line)}
.badge.in_revision   {background:rgba(200,164,92,.12);color:var(--gold-bright);border:1px solid var(--line)}
.badge.complete      {background:transparent;color:var(--ok);border:1px solid rgba(125,168,123,.4)}
/* Membership tier — a standing fact about the account, not a call to
   action, so it reads quieter than the solid-gold video_review badge. */
.badge.tier          {background:rgba(200,164,92,.10);color:var(--gold-bright);
                      border:1px solid rgba(200,164,92,.42)}
.badge.tier-none     {background:transparent;color:var(--muted);border:1px solid var(--line-soft)}

/* ── Step trail (diamonds, from the booking funnel) ──────────────────── */
.trail{list-style:none;display:flex;margin:6px 0 4px}
.step{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.step:not(:last-child)::before{content:"";position:absolute;top:19px;left:50%;width:100%;height:1px;background:var(--line-soft);z-index:1}
.step .dia{position:relative;z-index:2;width:38px;height:38px;flex-shrink:0;
  border:1px solid var(--line-soft);background:var(--ink);transform:rotate(45deg);
  display:flex;align-items:center;justify-content:center;transition:border-color .4s,box-shadow .4s}
.step .dia i{transform:rotate(-45deg);font-family:"Fraunces",serif;font-style:normal;font-weight:400;
  font-size:15px;line-height:1;color:var(--muted-2)}
.step .lab{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);font-weight:600;line-height:1.4}
.step.done .dia{border-color:rgba(200,164,92,.45)}
.step.done .dia i{color:var(--gold);font-size:13px}
.step.done .lab{color:var(--muted)}
.step.active .dia{border-color:var(--gold);box-shadow:0 0 22px rgba(200,164,92,.22)}
.step.active .dia i{color:var(--gold-bright)}
.step.active .lab{color:var(--paper);font-weight:700}
/* Phones: eight steps across can't fit, so the trail becomes a vertical
   checklist — diamond on the left, label beside it, one step per row, the
   connector running top to bottom instead of left to right. */
@media(max-width:560px){
  .trail{flex-direction:column;margin:0}
  .step{flex-direction:row;align-items:center;gap:16px;text-align:left;padding:8px 0}
  .step:not(:last-child)::before{top:50%;left:14px;width:1px;height:100%}
  .step .dia{width:28px;height:28px}
  .step .dia i{font-size:12px}
  .step.done .dia i{font-size:11px}
  .step .lab{font-size:10px;letter-spacing:.14em;line-height:1.45}
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn{display:inline-block;text-decoration:none;text-align:center;cursor:pointer;
  padding:14px 30px;border-radius:3px;font-family:inherit;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;transition:all .3s}
.btn.solid{background-color:var(--gold);color:#1a1407;border:1px solid var(--gold)}
.btn.solid:hover{background:var(--gold-bright);border-color:var(--gold-bright);transform:translateY(-1px)}
.btn.solid:disabled{opacity:.5;cursor:default;transform:none}
.btn.ghost{background:transparent;color:var(--paper);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold-bright)}
.btn.dark{background:var(--ink);color:var(--paper);border:1px solid var(--line)}
.btn.dark:hover{border-color:var(--gold);color:var(--gold-bright);transform:translateY(-1px)}
.btn.danger{background:transparent;color:#c98d83;border:1px solid rgba(176,106,95,.4)}
.btn.danger:hover{background:rgba(176,106,95,.15);border-color:#c98d83;color:#e2b3ab}

/* Small inline product tag (e.g. "Bundle" on listing cards) */
.mini-tag{display:inline-block;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--gold-bright);border:1px solid var(--line);border-radius:3px;
  padding:3px 8px;margin-left:10px;vertical-align:4px;background:rgba(200,164,92,.08)}

/* ── Dashboard section headings ───────────────────────────────────────── */
.section-head{font-size:clamp(21px,2.6vw,26px);margin:0 0 14px}

/* ── Dashboard: membership/region row under the greeting ─────────────── */
.tier-row{display:flex;gap:36px;flex-wrap:wrap}

/* ── Dashboard credits cards ───────────────────────────────────────────
   Story Films and Story Bundles are separate cards side by side (via
   .grid.two, same as the Listings section below), not two stats sharing
   one card — each is its own half-width credit count with its booking
   button right underneath. */
.credit-card{display:flex;flex-direction:column;align-items:flex-start}
.credit-card .num{font-family:"Fraunces",serif;font-weight:300;font-size:54px;
  line-height:1;color:var(--paper);margin-bottom:4px}
.credit-card .btn{display:inline-block;margin-top:16px}
.credit-card .book-note{min-height:15px;font-size:11.5px;color:var(--muted-2);margin:8px 0 0}
/* The "buy more" row sits at the bottom of the card regardless of how
   much (or how little) text is above it — since .grid.two stretches both
   Story Films and Story Bundles cards to equal height, pinning each row
   to its own card's bottom keeps them level with each other, whatever the
   note text underneath the primary button happens to wrap to. */
.credit-card .buy-more-row{margin-top:auto}
@media(max-width:560px){
  .credit-card .btn{width:100%}
  .tier-row{gap:24px}
}
.btn.sm{padding:9px 16px;font-size:10.5px}
.btn.block{width:100%}

/* Booking-button eligibility note (each booking button gets one) */
.book-note{min-height:15px;font-size:11.5px;color:var(--muted-2);margin:0}

/* ── Forms ───────────────────────────────────────────────────────────── */
label{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin:18px 0 8px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=tel]{
  width:100%;background:rgba(12,12,14,.6);border:1px solid var(--line-soft);border-radius:4px;
  color:var(--paper);font-family:inherit;font-size:15px;padding:13px 15px;outline:none;transition:border-color .25s}
input:focus{border-color:var(--gold)}
textarea{width:100%;background:rgba(12,12,14,.6);border:1px solid var(--line-soft);border-radius:4px;
  color:var(--paper);font-family:inherit;font-size:15px;padding:13px 15px;outline:none;
  transition:border-color .25s;resize:vertical}
textarea:focus{border-color:var(--gold)}
textarea::placeholder{color:var(--muted-2)}
/* A native date input ignores `color` on its own text and renders the
   calendar icon in dark-on-transparent — both invisible against this dark
   theme without an explicit color-scheme + an inverted icon filter. */
input[type=date]{color-scheme:dark}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.7);cursor:pointer}
.field-note{font-size:12px;color:var(--muted-2);margin-top:8px;line-height:1.5}
.input-with-action{position:relative}
.input-with-action input{padding-right:44px}
.input-edit-btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;border-radius:4px;color:var(--muted-2);cursor:pointer;
  padding:0;transition:color .2s,background .2s}
.input-edit-btn svg{width:15px;height:15px}
.input-edit-btn:hover{color:var(--gold-bright);background:rgba(200,164,92,.1)}
.form-msg{margin-top:16px;font-size:13.5px;line-height:1.5;display:none;padding:12px 15px;border-radius:4px}
.form-msg.err{display:block;color:#e0b1a8;background:rgba(176,106,95,.12);border:1px solid rgba(176,106,95,.35)}
.form-msg.ok{display:block;color:#b9d4b7;background:rgba(125,168,123,.1);border:1px solid rgba(125,168,123,.3)}

/* ── Auth pages (login / signup / reset) ─────────────────────────────── */
.auth-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:0 20px}
.auth-logo{margin:52px 0 10px}
.auth-logo img{height:56px;width:auto;display:block}
.auth-eyebrow{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:800;margin-bottom:34px}
.auth-card{width:100%;max-width:430px;border:1px solid var(--line);border-radius:6px;
  background:rgba(200,164,92,.04);padding:36px 34px 32px}
.auth-card h1{font-size:clamp(26px,4vw,32px);text-align:center;margin-bottom:4px}
.auth-card .sub{text-align:center;color:var(--muted);font-size:14px;font-weight:300;margin-top:8px}
.auth-card .btn{margin-top:26px}
.auth-foot{margin-top:22px;font-size:13px;color:var(--muted-2);text-align:center;line-height:1.7}
@media(max-width:520px){.auth-card{padding:28px 22px}}

/* ── File table ──────────────────────────────────────────────────────── */
.files{border:1px solid var(--line-soft);border-radius:6px;overflow:hidden}
.file-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 20px;border-bottom:1px solid var(--line-soft);background:rgba(20,20,23,.5)}
.file-row:last-child{border-bottom:0}
.file-row .n{font-size:14.5px;color:var(--paper);overflow-wrap:anywhere;line-height:1.4}
.file-row .meta{font-size:11.5px;color:var(--muted-2);margin-top:3px;letter-spacing:.03em}
.file-row .tag{display:inline-block;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--muted-2);border:1px solid var(--line-soft);border-radius:3px;padding:3px 7px;margin-left:8px;vertical-align:2px}
.file-row .acts{display:flex;gap:8px;flex-shrink:0}
/* Phones: the name/meta take the full row width and the buttons drop
   underneath it, side by side — the two-column row otherwise squeezes the
   filename into a few characters per line next to the buttons. */
@media(max-width:560px){
  .file-row{flex-direction:column;align-items:stretch;gap:12px}
  .file-row .acts{flex-wrap:wrap}
  .file-row .acts .btn{flex:1 1 auto}
}

/* ── Upload dropzone ─────────────────────────────────────────────────── */
.drop{border:1px dashed var(--line);border-radius:6px;background:rgba(200,164,92,.03);
  padding:44px 24px;text-align:center;cursor:pointer;transition:all .25s}
.drop:hover,.drop.over{border-color:var(--gold);background:rgba(200,164,92,.07)}
.drop .big{font-family:"Fraunces",serif;font-weight:300;font-size:21px}
.drop .small{font-size:12.5px;color:var(--muted-2);margin-top:8px;line-height:1.6}

/* ── Misc ────────────────────────────────────────────────────────────── */
.diamond-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.diamond-list li{position:relative;padding-left:24px;color:#cfcabf;font-size:14.5px;line-height:1.6}
.diamond-list li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
.diamond-list li b{color:var(--paper);font-weight:600}
.empty{border:1px dashed var(--line-soft);border-radius:6px;padding:44px 24px;text-align:center;color:var(--muted-2);font-size:14px}
.footer{border-top:1px solid var(--line-soft);padding:26px 0 56px;text-align:center;margin-top:70px}
.footer .fb{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:600}
.footer .fn{font-size:11.5px;color:var(--muted-2);margin-top:8px;letter-spacing:.03em}
.footer .fl{font-size:11px;color:var(--muted-2);margin-top:10px}
.footer .fl a{color:var(--muted-2);text-decoration:underline;text-underline-offset:2px}
.footer .fl a:hover{color:var(--gold)}
.footer .fl span{margin:0 8px;color:var(--line-soft)}
.reveal{opacity:0;transform:translateY(14px);animation:pin .7s ease forwards}
.reveal:nth-child(2){animation-delay:.07s}.reveal:nth-child(3){animation-delay:.14s}
.reveal:nth-child(4){animation-delay:.21s}.reveal:nth-child(5){animation-delay:.28s}
@keyframes pin{to{opacity:1;transform:none}}
.vbadge{position:fixed;left:12px;bottom:10px;z-index:150;font-size:11px;font-family:monospace;
  letter-spacing:.02em;color:var(--muted-2);background:rgba(20,20,23,.7);
  border:1px solid var(--line-soft);border-radius:5px;padding:3px 8px;
  pointer-events:none;user-select:none}

/* ── Admin (staff) — shared table/form/pill styles ────────────────────── */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
   font-weight:600;text-align:left;padding:9px 10px;border-bottom:1px solid var(--line-soft)}
td{padding:10px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tr:last-child td{border-bottom:0}
.pill{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  padding:3px 9px;border-radius:3px;display:inline-block;border:1px solid var(--line-soft);color:var(--muted)}
.pill.owner{color:var(--gold-bright);border-color:var(--line);background:rgba(200,164,92,.08)}
.pill.disabled{color:#e0b1a8;border-color:rgba(176,106,95,.4)}
.pill.action{color:var(--gold-bright);border-color:var(--line);background:rgba(200,164,92,.16)}
.sect{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  font-weight:700;margin:20px 0 10px}
.row-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.inline-form{display:grid;gap:10px;align-items:end;margin-top:10px}
.inline-form.cols2{grid-template-columns:1.2fr auto}
.inline-form.cols3{grid-template-columns:1.2fr 1.2fr auto}
.inline-form.cols4{grid-template-columns:1.2fr 1.2fr 1fr auto}
@media(max-width:760px){.inline-form.cols2,.inline-form.cols3,.inline-form.cols4{grid-template-columns:1fr}}
.inline-form label{margin-top:0}
select{width:100%;background:rgba(12,12,14,.6);border:1px solid var(--line-soft);border-radius:4px;
  color:var(--paper);font-family:inherit;font-size:14px;padding:12px 13px;outline:none}
select:focus{border-color:var(--gold)}
select.status-sel{width:auto;padding:6px 10px;font-size:12px}
input[type=number]{width:80px;background:rgba(12,12,14,.6);border:1px solid var(--line-soft);
  border-radius:4px;color:var(--paper);font-family:inherit;font-size:14px;padding:12px 13px;outline:none}
.url-box{display:flex;gap:8px;align-items:center;margin-top:8px}
.url-box input{font-family:monospace;font-size:11.5px;color:var(--gold-bright)}
.small-note{font-size:11.5px;color:var(--muted-2);margin-top:6px;line-height:1.55}
.mini-tag.path-broken{color:var(--err);border-color:rgba(176,106,95,.5);
  background:rgba(176,106,95,.1);cursor:help}
.small-note.path-broken-note{color:var(--err)}

/* Admin client-search dashboard */
.admin-search{width:100%;background:rgba(12,12,14,.6);border:1px solid var(--line-soft);
  border-radius:6px;color:var(--paper);font-family:inherit;font-size:16px;padding:14px 18px;
  outline:none;margin-bottom:26px;transition:border-color .25s}
.admin-search:focus{border-color:var(--gold)}
.client-card{display:block;border:1px solid var(--line-soft);border-radius:6px;
  background:rgba(20,20,23,.6);padding:20px 22px;transition:border-color .3s,transform .3s;color:var(--paper)}
.client-card:hover{border-color:var(--line);transform:translateY(-2px);color:var(--paper)}
.client-card .t{font-family:"Fraunces",serif;font-weight:300;font-size:20px;line-height:1.2;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.client-card .m{font-size:12px;color:var(--muted-2);letter-spacing:.03em;margin-top:10px}
.client-card .pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}

/* Collapsible sections on the client-file page — native <details>, no JS
   needed for the expand/collapse itself. */
.acc-card{border:1px solid var(--line-soft);border-radius:6px;background:rgba(20,20,23,.6);
  margin-bottom:16px;overflow:hidden}
.acc-card summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;
  align-items:center;justify-content:space-between;gap:12px;
  font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);font-weight:700}
.acc-card summary::-webkit-details-marker{display:none}
.acc-card summary:hover{background:rgba(200,164,92,.04)}
.acc-card summary .chev{color:var(--muted-2);transition:transform .2s;font-size:12px;flex-shrink:0}
.acc-card[open] summary .chev{transform:rotate(180deg)}
/* A logins/listings table is wider than a phone screen — the body's own
   overflow-x:hidden (see above) clips it with no way to reach whatever
   scrolled past the edge, silently swallowing the last column's buttons
   (e.g. "Login as"). Scoping the scroll to just this section keeps the
   rest of the page from shifting while still reaching every column. */
.acc-card .acc-body{padding:0 22px 22px;overflow-x:auto}

/* Full-screen viewer for a drawn-on review screenshot (P.lightbox in
   portal.js) — shared across review.html, qc.html, collab.html. */
.lightbox-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.9);
  z-index:5000;align-items:center;justify-content:center;padding:40px;cursor:zoom-out}
.lightbox-overlay.open{display:flex}
.lightbox-overlay img{max-width:100%;max-height:100%;border-radius:4px;cursor:default;
  box-shadow:0 10px 60px rgba(0,0,0,.6)}
.lightbox-close{position:fixed;top:20px;right:24px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line-soft);background:rgba(20,20,23,.85);color:var(--paper);
  font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lightbox-close:hover{border-color:var(--gold);color:var(--gold-bright)}

/* Generic confirm dialog (P.confirmDialog in portal.js) and the base look
   any page's own .modal-overlay/.modal-box uses — review.html/outline.html
   define their own copy of this locally (their rules win there since they
   load after this file), this is the fallback for every other page. */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);
  z-index:6000;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal-box{max-width:440px;width:100%;background:var(--ink-2);border:1px solid var(--line);
  border-radius:8px;padding:28px}
.modal-box p{color:var(--paper);font-size:14.5px;line-height:1.7;margin:0}
.modal-actions{display:flex;gap:12px;margin-top:26px}
.modal-actions .btn{flex:1}
.modal-actions.stack{flex-direction:column;gap:9px}
.modal-actions.stack .btn{flex:none}
.modal-box .big{font-family:"Fraunces",serif;font-weight:300;font-size:22px;margin-bottom:10px}
.modal-box .choices{margin:14px 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--muted);line-height:1.6}
.modal-box .choices li{margin:0 0 6px}
.modal-box .choices b{color:var(--paper);font-weight:600}
.modal-box.wide{max-width:700px}
.resend-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.resend-item b{color:var(--paper);font-size:13.5px;font-weight:600}
.act-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.act-list{max-height:62vh;overflow:auto;border-top:1px solid var(--line);scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.act-item{display:grid;grid-template-columns:118px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.act-when{font-size:11.5px;color:var(--muted-2);line-height:1.5}
.act-text{font-size:13px;color:var(--paper);line-height:1.5}
.act-who{display:inline-block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-bright);margin-right:8px}
.act-who.portal{color:var(--muted-2)}
.listing-actions td{padding-top:0;border-top:0}
.listing-actions .row-actions{justify-content:flex-start;padding:2px 0 10px}

/* Spinner for a button mid-submit (P.setBusy in portal.js) — border color
   inherits from the button text via currentColor, so it reads correctly
   on both solid and ghost buttons with no extra classing. */
.btn-spinner{display:inline-block;width:12px;height:12px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  vertical-align:-2px;margin-right:7px;animation:btnspin .7s linear infinite}
@keyframes btnspin{to{transform:rotate(360deg)}}

/* The "Draw on this frame" row sitting right under the video, above the
   note composer — shared layout across review.html (client), qc.html
   (staff), and collab.html (collaborator link); each page still defines
   its own .draw-btn/.draw-hint locally alongside the rest of its composer
   styling, matching the .note-shot precedent. */
.draw-tools-row{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.draw-tools-row .lab{font-size:11px;color:var(--muted-2);margin-right:4px}

/* "New" badge on a feature clients tend to miss (2026-09-29, first on the
   Share with someone else button). P.newBadge adds it; it goes once the
   client has used the feature in that browser. */
/* The badge straddles the button's bottom border: centred left to right,
   with the border line running through its middle. The button keeps a
   little room below for the half that hangs out. */
.has-new-badge{position:relative;margin-bottom:16px}
.btn.sm.has-new-badge{padding-top:12px;padding-bottom:13px}   /* clear air between the label and the badge */
.new-badge{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);
  padding:2px 7px 1px;border-radius:10px;white-space:nowrap;pointer-events:none;
  background:var(--gold);color:#1a1407;font-size:9px;font-weight:700;letter-spacing:.12em;
  line-height:1.5;text-transform:uppercase;animation:newBadgePulse 2.4s ease-in-out infinite}
@keyframes newBadgePulse{0%,100%{box-shadow:0 0 0 0 rgba(200,164,92,.55)}50%{box-shadow:0 0 0 5px rgba(200,164,92,0)}}
@media (prefers-reduced-motion:reduce){.new-badge{animation:none}}

/* Per-kind reminder switches (P.reminderSwitches): label left, an On/Off
   pill switch right. */
.rem-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;
  border-top:1px solid var(--line-soft);font-size:13.5px;color:var(--paper)}
.rem-row b{font-weight:600}
.rem-switch{position:relative;display:inline-flex;align-items:center;flex-shrink:0;width:70px;height:28px;
  border-radius:14px;border:1px solid var(--line);background:rgba(244,241,234,.06);cursor:pointer;
  font-family:inherit;padding:0;transition:background .2s,border-color .2s}
.rem-switch .knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:var(--muted-2);transition:left .2s,background .2s}
.rem-switch .txt{width:100%;padding:0 10px 0 28px;text-align:center;font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rem-switch.on{background:rgba(200,164,92,.2);border-color:var(--gold)}
.rem-switch.on .knob{left:45px;background:var(--gold)}
.rem-switch.on .txt{padding:0 28px 0 10px;color:var(--gold-bright)}
.rem-switch:disabled{opacity:.5;cursor:default}
.rem-status{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.55}
.rem-sched{display:flex;justify-content:space-between;gap:12px;max-width:340px;padding:2px 0;color:var(--paper)}
.rem-sched.done{color:var(--muted-2)}
.rem-sched.next{color:var(--gold-bright);font-weight:600}

/* How-to panel (P.howto): a wide lightbox, the gold title, a short
   description, the video full width, then the skip box and Continue to review. */
.howto-overlay{z-index:2000}
.modal-box.howto-box{max-width:860px;padding:26px}
.howto-title{font-family:"Fraunces",serif;font-size:22px;color:var(--gold);margin-bottom:14px}
.howto-video{position:relative;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden;
  border:1px solid var(--line)}
.howto-video video{position:absolute;inset:0;width:100%;height:100%;background:#000;pointer-events:none;
  transform:scale(1.25)}   /* recordings carry black side bars; zoom in to fill the frame */
.modal-box.howto-box p.howto-text{font-size:14.5px;color:var(--paper);line-height:1.7;margin:0 0 24px}
.howto-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:20px}
.howto-skip{display:flex;align-items:center;gap:8px;margin:0;cursor:pointer;font-size:13px;color:var(--paper);
  text-transform:none;letter-spacing:0;font-weight:400}
.howto-skip input{-webkit-appearance:none;appearance:none;flex:none;width:16px;height:16px;margin:0;
  border:1px solid var(--gold);border-radius:3px;background:transparent;cursor:pointer;display:grid;place-content:center;
  transition:background-color .15s,border-color .15s}
.howto-skip input::before{content:"";width:9px;height:5px;margin-top:-2px;border:solid var(--ink);
  border-width:0 0 2px 2px;transform:rotate(-45deg) scale(0);transition:transform .12s}
.howto-skip input:checked{background:var(--gold)}
.howto-skip input:checked::before{transform:rotate(-45deg) scale(1)}
.howto-skip:hover input{border-color:var(--gold-bright)}
.howto-skip input:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}
.howto-link{background:none;border:none;padding:0;font:inherit;font-size:12px;letter-spacing:.08em;
  color:var(--gold-bright);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media(max-width:640px){.modal-box.howto-box{padding:18px}.howto-foot .btn{width:100%}}

/* Emoji picker for note fields (Screening Room + QC): wrap the textarea in
   .ta-wrap and add a .emo-btn with data-emoji-for="<textarea id>";
   portal.js wires it up. */
.ta-wrap{position:relative}
.ta-wrap textarea{padding-right:46px}
.emo-btn{position:absolute;right:8px;bottom:10px;width:30px;height:30px;border-radius:50%;border:none;background:none;
  font-size:19px;line-height:30px;cursor:pointer;opacity:.6;filter:grayscale(1);transition:opacity .15s,filter .15s,transform .15s;padding:0}
.emo-btn:hover,.emo-btn.on{opacity:1;filter:none;transform:scale(1.1)}
#emojiPop{position:absolute;z-index:200;display:none;width:304px;background:#1a1a1e;border:1px solid var(--line);
  border-radius:10px;padding:8px;box-shadow:0 12px 40px rgba(0,0,0,.55)}
#emojiPop.open{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
#emojiPop button{background:none;border:none;border-radius:6px;font-size:21px;line-height:34px;height:34px;cursor:pointer;padding:0}
#emojiPop button:hover{background:rgba(255,255,255,.08)}

/* ── Additional users panel (P.additionalUsers) ─────────────────────── */
.au-row{padding:14px 0;border-bottom:1px solid var(--line-soft);display:grid;
  grid-template-columns:1fr;gap:10px 16px;align-items:center}
.au-row .row-actions{justify-content:flex-start}
.au-row:last-child{border-bottom:0}
.au-who{font-size:15px;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.au-email{color:var(--muted);font-size:13.5px}
.au-sub{color:var(--muted-2);font-size:12.5px;margin-top:4px}
.au-edit{grid-column:1 / -1}
.au-empty{color:var(--muted-2);font-size:13.5px;margin:6px 0}
.au-perms{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;margin-top:6px}
@media (max-width:640px){.au-perms{grid-template-columns:1fr}}
label.au-perm{display:flex;gap:9px;align-items:flex-start;margin:6px 0;text-transform:none;letter-spacing:0;
  font-size:14px;font-weight:400;color:var(--paper);cursor:pointer}
label.au-perm input{accent-color:var(--gold);width:16px;height:16px;flex:none;align-self:flex-start;margin-top:3px}
.au-hint{display:block;color:var(--muted-2);font-size:12px;line-height:1.45;margin-top:2px}
.au-choose{margin-top:6px}
.au-add-fields{display:grid;grid-template-columns:1fr 1.3fr auto;gap:10px;align-items:center;margin-top:10px}
.au-add-fields input{margin:0}
.au-details{margin-top:12px;font-size:13.5px;color:var(--muted)}
.au-head{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-top:22px}
.au-details summary,.acc-card .au-details summary{cursor:pointer;color:var(--gold-bright);display:list-item;
  list-style:revert;padding:0;font-family:inherit;font-size:13.5px;letter-spacing:0;text-transform:none;
  font-weight:400;background:none}
.acc-card .au-details summary:hover{background:none}
.au-details summary span{color:var(--muted-2)}
@media (max-width:640px){
  .au-add-fields{grid-template-columns:1fr}
}
#pConfirmMsg{white-space:pre-line}
#pConfirmHtml .au-sum-head{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:16px 0 6px}
#pConfirmHtml ul.au-sum{margin:0;padding-left:20px;font-size:14.5px;line-height:1.6;color:var(--paper)}
#pConfirmHtml ul.au-sum li{margin:2px 0}

/* ── Google Ads dashboard (2026-10-20, ads.js) ───────────────────────────── */
.ads-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ads-seg{display:inline-flex;border:1px solid var(--line-soft);border-radius:4px;overflow:hidden}
.ads-seg button{background:none;border:0;border-right:1px solid var(--line-soft);color:var(--muted);
  font-family:inherit;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:8px 13px;cursor:pointer;transition:background .15s,color .15s}
.ads-seg button:last-child{border-right:0}
.ads-seg button:hover{color:var(--paper)}
.ads-seg button.on{background:rgba(200,164,92,.16);color:var(--gold-bright)}
.ads-updated{font-size:11.5px;color:var(--muted-2);letter-spacing:.03em;white-space:nowrap}
.ads-metric{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:600;
  display:inline-flex;align-items:center;gap:8px}
.ads-metric select{background:var(--ink-2);color:var(--paper);border:1px solid var(--line-soft);border-radius:4px;
  padding:6px 10px;font-family:inherit;font-size:12.5px;letter-spacing:0;text-transform:none;font-weight:400}
.ads-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:18px}
.ads-tile{border:1px solid var(--line-soft);border-radius:6px;padding:14px 16px;background:rgba(20,20,23,.5);min-width:0}
.ads-tile .l{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);font-weight:700}
.ads-tile .v{font-size:26px;font-weight:600;color:var(--paper);margin-top:6px;line-height:1.1;letter-spacing:-.01em;
  overflow-wrap:anywhere}
.ads-tile .n{font-size:11px;color:var(--muted-2);margin-top:5px;line-height:1.4}
.ads-tile .l{display:flex;align-items:center;gap:6px}
.ads-info{position:relative;display:inline-flex}
.ads-info button{width:15px;height:15px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--gold);
  font:italic 600 10px/1 "Fraunces",serif;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;
  letter-spacing:0;text-transform:none;transition:background .15s,color .15s}
.ads-info button:hover,.ads-info.open button,.ads-info button:focus-visible{background:var(--gold);color:#1a1407;outline:none}
.ads-info-tip{display:none;position:absolute;left:0;top:22px;z-index:6;width:250px;background:var(--ink-2);border:1px solid var(--line);
  border-radius:6px;padding:10px 12px;font-size:12px;line-height:1.5;color:var(--muted);font-weight:400;letter-spacing:0;
  text-transform:none;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.ads-info:hover .ads-info-tip,.ads-info.open .ads-info-tip,.ads-info button:focus-visible+.ads-info-tip{display:block}
.ads-chart-wrap{margin-top:22px;position:relative}
.ads-chart-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.ads-chart-host{position:relative;width:100%}
.ads-chart{display:block;width:100%;overflow:visible;outline:none}
.ads-chart:focus-visible{outline:1px solid var(--line);outline-offset:4px;border-radius:4px}
.ads-chart .grid{stroke:rgba(244,241,234,.09);stroke-width:1}
.ads-chart .tick{fill:var(--muted-2);font-size:10.5px;font-family:"Hanken Grotesk",sans-serif;
  font-variant-numeric:tabular-nums}
.ads-chart .line{fill:none;stroke:var(--gold);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ads-chart .area{fill:rgba(200,164,92,.10);stroke:none}
.ads-chart .cross{stroke:rgba(244,241,234,.35);stroke-width:1}
.ads-chart .mark{stroke:var(--gold-bright);stroke-width:1;stroke-dasharray:3 3;opacity:.8}
.ads-chart .mark-dot path{fill:var(--gold);stroke:var(--ink);stroke-width:1.5}
.ads-chart .mark-dot text{fill:#1a1407;font-size:8px;font-weight:800;font-family:"Hanken Grotesk",sans-serif}
.ads-tip .nt{margin-top:6px;padding-top:6px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--paper);max-width:240px;white-space:normal;line-height:1.45}
.ads-tip .nt b{display:inline-block;min-width:15px;height:15px;border-radius:50%;background:var(--gold);color:#1a1407;font-size:9px;text-align:center;line-height:15px;margin-right:4px;font-weight:800}
.ads-notes{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.ads-notes li{display:flex;align-items:baseline;gap:8px;font-size:12.5px;color:var(--muted);line-height:1.5}
.ads-notes li b{flex-shrink:0;width:16px;height:16px;border-radius:50%;background:var(--gold);color:#1a1407;font-size:9px;text-align:center;line-height:16px;font-weight:800;position:relative;top:-1px}
.ads-notes li .d{flex-shrink:0;color:var(--muted-2);font-size:11px;letter-spacing:.04em;min-width:110px}
.ads-chart .dot{fill:var(--gold);stroke:var(--ink);stroke-width:2}
.ads-tip{position:absolute;pointer-events:none;background:var(--ink-2);border:1px solid var(--line);
  border-radius:6px;padding:9px 12px;min-width:150px;z-index:5;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.ads-tip .d{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);font-weight:700;
  margin-bottom:6px;white-space:nowrap}
.ads-tip .r{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;color:var(--muted);line-height:1.6}
.ads-tip .r b{color:var(--paper);font-weight:600;font-variant-numeric:tabular-nums}
.ads-tip .r.on b{color:var(--gold-bright)}
.ads-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;position:relative;z-index:30}
.ads-head .ads-dl{margin-top:28px;position:relative}
.ads-dl summary{list-style:none;white-space:nowrap;cursor:pointer}
.ads-dl summary::-webkit-details-marker{display:none}
.ads-dl-list{position:absolute;right:0;top:calc(100% + 6px);min-width:170px;background:var(--ink-2);border:1px solid var(--line);
  border-radius:6px;padding:6px;z-index:20;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.ads-dl-list a{display:block;padding:8px 12px;border-radius:4px;font-size:13px;color:var(--paper)}
.ads-dl-list a:hover{background:rgba(200,164,92,.12);color:var(--gold-bright)}
.ads-tiles+.ads-tiles{margin-top:10px}
.ads-depth{margin-top:18px;border:1px solid var(--line-soft);border-radius:6px;padding:14px 16px;background:rgba(20,20,23,.5)}
.ads-depth-row{display:grid;grid-template-columns:150px repeat(4,1fr);gap:10px;align-items:end;padding:10px 0;
  border-top:1px solid var(--line-soft)}
.ads-depth-row:first-of-type{border-top:0;padding-top:0}
.ads-depth-label{font-size:12px;color:var(--muted);line-height:1.4;padding-bottom:12px}
.ads-depth-cell .l{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);font-weight:700}
.ads-depth-cell .v{font-size:22px;font-weight:600;color:var(--paper);margin-top:4px;line-height:1.1}
.ads-depth-cell .qt{height:5px;border-radius:3px;background:rgba(200,164,92,.14);overflow:hidden;margin-top:8px}
.ads-depth-cell .qt i{display:block;height:100%;background:var(--gold);border-radius:3px}
.ads-aud-wrap{margin-top:24px}
.ads-aud-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.ads-aud{border:1px solid var(--line-soft);border-radius:6px;padding:12px 14px;background:rgba(20,20,23,.5);min-width:0}
.ads-aud .l{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);font-weight:700;margin-bottom:8px}
.ads-aud .ab{display:grid;grid-template-columns:minmax(64px,auto) 1fr 36px;align-items:center;gap:8px;padding:3px 0;font-size:12px}
.ads-aud .ab .n{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ads-aud .ab .t{height:5px;border-radius:3px;background:rgba(200,164,92,.14);overflow:hidden}
.ads-aud .ab .t i{display:block;height:100%;background:var(--gold);border-radius:3px}
.ads-aud .ab b{color:var(--paper);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.ads-aud .small-note{margin-top:6px}
.ads-table-wrap{margin-top:22px;overflow-x:auto}
.ads-table{min-width:640px}
.ads-table th.r,.ads-table td.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ads-table td .cn{font-size:13.5px;color:var(--paper);margin-bottom:4px}
.ads-table td .pill{font-size:8.5px}
.ads-foot{margin-top:14px}
.ads-loading{opacity:.55;transition:opacity .2s}
@media(max-width:560px){
  .ads-tile .v{font-size:22px}
  .ads-depth-row{grid-template-columns:1fr 1fr}
  .ads-depth-label{grid-column:1 / -1;padding-bottom:4px}
  .ads-depth-cell .v{font-size:19px}
}