/*! TÄHTI — profile dashboard (single actor / single title).
    Loaded after tahti.css and tables.css, and only on those two templates.

    Scope: ONLY the split-dashboard layout — the sticky identity panel, the tab
    workspace, the completeness meter and the four-column fact grid. Site chrome,
    .ph artwork, .wrap, .kicker, .meta, the type scale, tables, .t-pill, .rows,
    .card, .grid4, .facts and the footer all come from tahti.css / tables.css and
    are deliberately absent here.

    Class names are the design's own. The ones that collided with rules already
    in tahti.css / tables.css — .stats/.stat, .chips/.chip, .tabs/.tab, .acts,
    .season and its children, .bar, .cast, .sub-h, .svc — carry a pf- prefix
    here instead; everything else is left exactly as the design named it.
    Custom properties are prefixed too, so --rail keeps driving .cols. */

/* ==========================================================================
   1. TOKENS  (prefixed — the theme's own tokens are never redefined)
   ========================================================================== */
:root{
  --pf-rail:380px;
  --pf-stick:62px;
  --pf-duo:linear-gradient(90deg,var(--brand),var(--c-julkkis));
  --pf-dark:linear-gradient(100deg,#15151F 0%,#3A0F2A 55%,#6B0F35 100%);
}

/* the one ratio utility tahti.css does not ship */
.r23{aspect-ratio:2/3}

/* ==========================================================================
   2. DASHBOARD SHELL — two standing columns
   ========================================================================== */
.dash{
  display:grid;grid-template-columns:var(--pf-rail) minmax(0,1fr);
  gap:30px;align-items:start;padding:14px 0 0;
}

/* ==========================================================================
   3. IDENTITY PANEL — left column, follows the reader
   ========================================================================== */
.idp{
  position:sticky;top:var(--pf-stick);
  max-height:calc(100vh - var(--pf-stick) - 18px);
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  border:1px solid var(--line);border-radius:20px;background:var(--card);
  box-shadow:var(--sh);padding:16px 16px 18px;
}
.idp::-webkit-scrollbar{width:8px}
.idp::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:2px solid var(--card)}

/* An inner scroll that just clips a row mid-letter reads as a broken card.
   The fade names the situation — there is more below — and steps aside when
   the reader reaches the end, or when nothing overflows at all. */
.idp::after{
  content:"";position:sticky;bottom:-18px;display:block;height:38px;
  margin:0 -16px -18px;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--card));
  opacity:1;transition:opacity .2s ease;
}
.idp.idp-end::after{opacity:0}

.idp-photo{position:relative;padding:4px;border-radius:22px;background:var(--pf-duo);margin-bottom:14px}
.idp-photo .ph{border-radius:18px}
.idp-photo .rib{
  position:absolute;left:12px;top:12px;z-index:5;
  background:rgba(14,14,18,.8);color:#fff;
  font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;backdrop-filter:blur(6px);
}

.idp h1{font-size:31px;font-weight:900;letter-spacing:-.035em;line-height:1.02;margin-bottom:5px}
.idp .role{font-size:13.5px;font-weight:800;color:var(--muted);letter-spacing:.01em;margin-bottom:0}
.idp .role b{color:var(--c-julkkis)}

.pf-chips{display:flex;flex-wrap:wrap;gap:7px;margin:11px 0 16px}
.pf-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:800;padding:5px 11px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--ink-2);
}
.pf-chip.ok{color:#0A7C46;border-color:rgba(0,164,106,.3);background:rgba(0,164,106,.08)}
.pf-chip.ok svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:3}
.pf-chip.cat{color:var(--c-julkkis);border-color:rgba(var(--c-julkkis-rgb),.28);background:rgba(var(--c-julkkis-rgb),.07)}

.pf-stats{display:grid;gap:8px;margin-bottom:14px}
.pf-stat{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:10px 14px 10px 16px;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(150deg,#FFF,#FBF8FD);overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s;
}
.pf-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--pf-duo)}
.pf-stat:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.pf-stat b{
  font-size:24px;font-weight:900;letter-spacing:-.04em;line-height:1;
  min-width:66px;font-variant-numeric:tabular-nums;
}
.pf-stat span{font-size:12px;font-weight:700;color:var(--muted);line-height:1.3}
.pf-stat.gold::before{background:linear-gradient(180deg,var(--hot),#F26522)}
.pf-stat.blue::before{background:linear-gradient(180deg,#0B6FE8,#00A46A)}
.pf-stat.duo b{background:var(--pf-duo);-webkit-background-clip:text;background-clip:text;color:transparent}

/* The follow button is gone on purpose: it stored a local preference and
   nothing else, and a control that promises more than it does erodes the
   page around it. The share button keeps the row. */
.pf-acts{display:flex;gap:8px;margin-bottom:12px}
.btn-ico{
  width:46px;border:1px solid var(--line);background:var(--card);border-radius:999px;cursor:pointer;
  display:grid;place-items:center;
  transition:border-color .18s,background .18s,transform .2s var(--ease);
}
.btn-ico svg{width:17px;height:17px;fill:none;stroke:var(--ink);stroke-width:2}
.btn-ico:hover{border-color:var(--brand);background:rgba(var(--brand-rgb),.06);transform:translateY(-1px)}

.toast{font-size:12px;font-weight:800;color:var(--c-musiikki);margin:-4px 0 10px;line-height:1.35}
.toast:empty{display:none}

/* the theme's social row, squeezed into a 380px column */
.idp .tahti-social{margin:0 0 16px;gap:7px}
.idp .tahti-social .share-lbl{width:100%;margin-bottom:1px}
.idp .tahti-social a{font-size:12px;padding:6px 12px}

.glance{border-top:1px solid var(--line-soft);padding-top:12px}
.glance h2{
  font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);margin-bottom:8px;
}
.glance li{
  display:flex;align-items:center;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--line-soft);font-size:13.5px;
}
.glance li:last-child{border-bottom:0}
.glance .k{
  font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}
.glance .v{margin-left:auto;font-weight:800;letter-spacing:-.01em;text-align:right}

/* ==========================================================================
   4. WORKSPACE — heading row, tab strip, panels
   ========================================================================== */
.ws{min-width:0}
.ws-head{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.ws-head h2{font-size:21px;font-weight:900;letter-spacing:-.025em;display:flex;align-items:center;gap:9px}
.ws-head .upd{
  margin-left:auto;font-size:12px;font-weight:700;color:var(--muted);
  display:inline-flex;align-items:center;gap:7px;
}
.ws-head .upd i{width:7px;height:7px;border-radius:50%;background:var(--c-musiikki);display:block}

.pf-tabs{
  position:sticky;top:var(--pf-stick);z-index:30;
  display:flex;gap:6px;padding:6px;margin-bottom:16px;
  border:1px solid var(--line);border-radius:999px;
  background:var(--glass);backdrop-filter:saturate(180%) blur(12px);
  box-shadow:var(--sh);
  overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;
}
.pf-tabs::-webkit-scrollbar{display:none}
.pf-tab{
  position:relative;flex:1 1 auto;white-space:nowrap;scroll-snap-align:start;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;background:none;cursor:pointer;padding:11px 16px;border-radius:999px;
  font-size:13.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink-2);
  transition:background .2s,color .2s;
}
.pf-tab:hover{background:rgba(var(--brand-rgb),.07);color:var(--brand)}
.pf-tab .n{
  font-style:normal;font-size:10.5px;font-weight:900;letter-spacing:.02em;
  padding:2px 7px;border-radius:999px;background:var(--band);color:var(--muted);
}
.pf-tab[aria-selected="true"]{background:var(--pf-dark);color:#fff;box-shadow:0 6px 18px rgba(14,14,18,.22)}
.pf-tab[aria-selected="true"] .n{background:rgba(255,255,255,.18);color:#fff}
.pf-tab[aria-selected="true"]:hover{color:#fff}

.panel{
  border:1px solid var(--line);border-radius:18px;background:var(--card);
  box-shadow:var(--sh);overflow:hidden;animation:pf-fade .32s var(--ease);
}
.panel[hidden]{display:none}
@keyframes pf-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.p-head{display:flex;align-items:center;gap:11px;padding:15px 20px;color:#fff;background:var(--pf-dark)}
.p-head h3{font-size:15.5px;font-weight:900;letter-spacing:-.015em}
.p-head .sub{margin-left:auto;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.7)}
.p-body{padding:18px 20px 22px}

/* ==========================================================================
   5. QUICK FACTS — completeness meter + four-column definition grid
   ========================================================================== */
.meter{padding:16px 20px 15px;background:linear-gradient(180deg,#FBFAFD,#FFF);border-bottom:1px solid var(--line-soft)}
.meter-top{display:flex;align-items:baseline;gap:10px;margin-bottom:9px}
.meter-top .lbl{font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.meter-top b{
  margin-left:auto;font-size:19px;font-weight:900;letter-spacing:-.03em;
  background:var(--pf-duo);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.m-track{height:8px;border-radius:999px;background:#EDEDF3;overflow:hidden}
.m-track i{
  display:block;height:100%;width:0;border-radius:999px;background:var(--pf-duo);
  box-shadow:0 0 12px rgba(var(--brand-rgb),.4);transition:width 1s var(--ease);
}
.m-note{margin-top:9px;font-size:12px;font-weight:700;color:var(--muted)}
.m-note b{color:var(--ink-2)}

.dgrid{display:grid;grid-template-columns:190px minmax(0,1fr) 190px minmax(0,1fr);margin:0}
.dgrid dt,.dgrid dd{margin:0;padding:14px 18px;border-bottom:1px solid var(--line-soft);min-width:0}
.dgrid dt{
  display:flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);line-height:1.25;
  background:linear-gradient(90deg,#FBFAFD,#FDFCFE);
}
.dgrid dt .fx{font-size:15px}
.dgrid dd{font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.dgrid dd a{color:var(--link);font-weight:800}
.dgrid dd a:hover{text-decoration:underline}
.dgrid dd+dt{border-left:1px solid var(--line-soft)}
.dgrid dd.wide{grid-column:span 3}
.dgrid dd.money{
  font-size:17.5px;font-weight:900;
  background:var(--pf-duo);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.dgrid dd.big{font-weight:900}
.dgrid:last-of-type>:nth-last-child(-n+2){border-bottom:0}

.dsec{
  padding:16px 18px 8px;
  font-size:10.5px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;
  color:var(--brand);background:var(--card);border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;gap:10px;
}
.dsec i{flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(var(--brand-rgb),.35),transparent)}
.dsec .fx{font-size:13px}

.tagline-row{display:flex;flex-wrap:wrap;gap:7px}
.tg{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;
  padding:4px 10px;border-radius:999px;background:var(--band);color:var(--ink-2);
}

.note{
  display:flex;align-items:flex-start;gap:10px;margin:16px 20px 18px;padding:13px 15px;
  border-radius:14px;background:rgba(11,62,217,.05);border:1px solid rgba(11,62,217,.14);
  font-size:12.5px;font-weight:600;color:var(--ink-2);line-height:1.5;
}
.note b{font-weight:900}
.p-body .note{margin:16px 0 0}
.p-body > .note:first-child{margin-top:0}

/* ==========================================================================
   6. FILMOGRAPHY — the rich table inside a panel
   ========================================================================== */
/* auto-fit, because a tile with no number behind it is simply not printed */
.sumbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:16px}
.sumbar div{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:linear-gradient(150deg,#FFF,#FBF8FD)}
.sumbar b{display:block;font-size:22px;font-weight:900;letter-spacing:-.04em}
.sumbar span{font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}

/* tables.css styles table.dtable already; these are the panel-specific bits */
.panel table.dtable{min-width:620px}
.panel table.dtable thead th,.panel table.dtable tbody td{padding:13px 18px}
.panel table.dtable tbody td:first-child{
  font-weight:900;color:var(--brand);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.panel .tw-hint{margin:0;padding:10px 20px 0}

.prod{display:flex;align-items:center;gap:12px;min-width:0}
.prod .ph{width:44px;flex:none;border-radius:7px}
.prod .t{display:block;font-weight:900;letter-spacing:-.02em;font-size:15.5px;transition:color .18s}
.prod .s{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-top:2px}
.prod:hover .t{color:var(--brand)}
.prod.person .ph{width:38px;border-radius:50%}
.pf-svc{font-size:13px;font-weight:800;color:var(--ink-2)}

.pf-subh{display:flex;align-items:center;gap:11px;margin:22px 0 12px}
.pf-subh h4{font-size:14px;font-weight:900;letter-spacing:-.015em;display:flex;align-items:center;gap:8px}
.pf-subh i{flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--line),transparent)}

/* small bars: service split */
.ybars{display:grid;gap:9px;margin-top:12px}
.yrow{display:grid;grid-template-columns:112px minmax(0,1fr) 74px;gap:12px;align-items:center;font-size:13px;font-weight:800}
.yrow .tr{height:12px;border-radius:999px;background:#EDEDF3;overflow:hidden}
.yrow .tr i{display:block;height:100%;width:0;border-radius:999px;background:var(--pf-duo);transition:width 1s var(--ease)}
.yrow .tr i.alt{background:linear-gradient(90deg,#0B6FE8,#00A46A)}
.yrow .vv{font-size:12px;font-weight:800;color:var(--muted);text-align:right}

/* ==========================================================================
   7. SEASONS — progress bars
   ========================================================================== */
.minis{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:9px;margin-bottom:12px}
.mini{border:1px solid var(--line);border-radius:12px;padding:9px 12px;background:var(--card);min-width:0}
.mini b{display:block;font-size:15px;font-weight:900;letter-spacing:-.025em}
.mini span{font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

.pf-season{
  border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:14px;
  background:linear-gradient(150deg,#FFF,#FBF9FD);
}
.pf-season:last-child{margin-bottom:0}
.pf-season-lay{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;align-items:start}
.pf-season-lay>.ph{border-radius:12px}
.pf-season-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.pf-season-top h4{font-size:17px;font-weight:900;letter-spacing:-.025em}
.pf-season-top .s{font-size:12.5px;font-weight:700;color:var(--muted);margin-top:2px}
.pf-season-top .pct{
  margin-left:auto;font-size:20px;font-weight:900;letter-spacing:-.03em;
  background:var(--pf-duo);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.pf-bar{height:9px;border-radius:999px;background:#EDEDF3;overflow:hidden;margin-bottom:10px}
.pf-bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--pf-duo);transition:width 1s var(--ease)}
.pf-season-meta{display:flex;flex-wrap:wrap;gap:8px}

.empty-row{
  display:flex;align-items:center;gap:11px;padding:14px 16px;border-radius:14px;
  border:1px dashed var(--line);background:var(--card-2);
  font-size:13px;font-weight:700;color:var(--muted);
}

/* ==========================================================================
   8. AWARDS — honest totals, not an invented table
   ========================================================================== */
.aw-sum{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.aw-sum div{flex:1 1 150px;border-radius:14px;padding:13px 16px;color:#fff;background:var(--pf-dark)}
.aw-sum div.alt{background:linear-gradient(100deg,var(--c-julkkis),var(--brand))}
.aw-sum b{display:block;font-size:24px;font-weight:900;letter-spacing:-.04em;line-height:1.1}
.aw-sum span{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.75)}

/* ==========================================================================
   9. CO-STARS — the strip under both columns
   ========================================================================== */
.pf-cast{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.pf-cast a{
  display:inline-flex;align-items:center;gap:9px;padding:5px 14px 5px 5px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);font-size:13.5px;font-weight:800;
  transition:border-color .18s,background .18s,transform .2s var(--ease);
}
.pf-cast a:hover{border-color:var(--brand);background:rgba(var(--brand-rgb),.05);transform:translateY(-2px)}
.pf-cast .ph{width:30px;height:30px;border-radius:50%;flex:none}
.pf-foot{margin-top:34px}

/* ==========================================================================
   10. RESPONSIVE — below 900px the panel un-sticks and stacks above,
       the tab strip becomes a horizontal scroller
   ========================================================================== */
@media(max-width:1120px){
  :root{--pf-rail:330px}
  .idp h1{font-size:27px}
}
@media(max-width:900px){
  .dash{grid-template-columns:minmax(0,1fr);gap:22px}
  .idp{position:static;max-height:none;overflow:visible}
  .idp-inner{display:grid;grid-template-columns:236px minmax(0,1fr);gap:22px;align-items:start}
  .idp-photo{margin-bottom:0}
  .pf-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .glance ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
  .glance li:nth-last-child(2){border-bottom:0}
  .pf-tab{flex:0 0 auto}
  .dgrid{grid-template-columns:180px minmax(0,1fr)}
  .dgrid dd+dt{border-left:0}
  .dgrid dd.wide{grid-column:span 1}
  .panel .tw-hint{display:block}
}
@media(max-width:760px){
  .sumbar{gap:8px}
  .sumbar b{font-size:19px}
}
@media(max-width:620px){
  .idp-inner{grid-template-columns:minmax(0,1fr);gap:16px}
  .idp-photo{margin-bottom:2px}
  .idp h1{font-size:26px}
  .glance ul{grid-template-columns:minmax(0,1fr)}
  .glance li:nth-last-child(2){border-bottom:1px solid var(--line-soft)}
  .pf-stats{grid-template-columns:minmax(0,1fr)}
  .dgrid{grid-template-columns:minmax(0,1fr)}
  .dgrid dt{border-bottom:0;padding:12px 16px 3px;background:var(--card)}
  .dgrid dd{padding:0 16px 13px}
  .dgrid>:nth-last-child(-n+2){border-bottom:0}
  .p-body{padding:16px 16px 20px}
  .meter,.p-head,.note{padding-left:16px;padding-right:16px}
  .note{margin-left:16px;margin-right:16px}
  .pf-season-lay{grid-template-columns:minmax(0,1fr);gap:14px}
  .pf-season-lay>.ph{width:104px}
  .minis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .yrow{grid-template-columns:78px minmax(0,1fr) 66px;gap:9px;font-size:12px}
  .aw-sum div{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  .panel,.m-track i,.pf-bar i,.yrow .tr i,.pf-stat,.pf-cast a,.btn-ico{
    transition:none!important;animation:none!important;
  }
  .pf-stat,.pf-cast a,.btn-ico{transform:none!important}
}

/* ==========================================================================
   ROLE CHIPS
   What a person actually does, printed under the name. The roles come from
   inc/showbiz.php, which reads them off the data rather than asking anyone to
   tick a box — a filled pageant title makes a missi, an agency makes a malli.
   One person can carry several, which is the whole point of not having built
   a separate post type for showbiz.
   ========================================================================== */
.pf-roles{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 0}
.pf-roles .tag-role{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);
  text-decoration:none;transition:border-color .16s,color .16s,background .16s}
a.tag-role:hover{border-color:currentColor}
.pf-roles .tag-nayttelija{color:var(--c-sarjat);border-color:rgba(11,111,232,.32);background:rgba(11,111,232,.07)}
.pf-roles .tag-artisti{color:var(--c-musiikki);border-color:rgba(0,164,106,.32);background:rgba(0,164,106,.08)}
.pf-roles .tag-malli{color:var(--c-julkkis);border-color:rgba(var(--c-julkkis-rgb),.30);background:rgba(var(--c-julkkis-rgb),.07)}
.pf-roles .tag-missi{color:var(--brand);border-color:rgba(var(--brand-rgb),.30);background:rgba(var(--brand-rgb),.07)}
.pf-roles .tag-juontaja{color:var(--c-elokuvat);border-color:rgba(242,101,34,.32);background:rgba(242,101,34,.08)}
.pf-roles .tag-vaikuttaja{color:var(--ink);border-color:var(--line);background:var(--band)}

/* ===== BEGIN generated: profile dark ===== */
/* Written by mkdark.py — edit the generator, not this block.
   Same discipline as the main sheet: every rule under BOTH selectors. */

[data-theme="dark"] .idp::after{background:linear-gradient(180deg,transparent,var(--card))}
/* Every raised tile on the profile was mixed for paper — white into a
/* pink-tinged white. On the dark card that read as sheets of paper on a
/* night desk. Raised in dark means lighter than the card, so the tiles step
/* up from #17151F the way they stepped up from white. */
[data-theme="dark"] .pf-stat,
[data-theme="dark"] .sumbar div{background:linear-gradient(150deg,#1D1B27,#241E2F)}

/* Same standing as the stat tiles. */
[data-theme="dark"] .pf-season{background:linear-gradient(150deg,#1D1B27,#231E2D)}

/* The label cells of the fact grid were the loudest thing on the dark page —
/* near-white boxes checkering a dark panel. A label is furniture: half a
/* step above the panel, never a lamp. */
[data-theme="dark"] .dgrid dt{background:linear-gradient(90deg,#1B1925,#1D1B27)}

/* The completeness strip follows the panel it sits on. */
[data-theme="dark"] .meter{background:linear-gradient(180deg,#1B1925,#17151F)}

/* Progress tracks were paper grey. On dark they become the raised band, so
/* the duo-gradient fill still reads as the full part. */
[data-theme="dark"] .m-track,
[data-theme="dark"] .yrow .tr,
[data-theme="dark"] .pf-bar,
[data-theme="dark"] .trk-bar{background:#2C2839}

/* The verified chip wore ink-dark green on a near-black card. The accent
/* table already lifts every accent at night; the chip borrows the lifted
/* green, and its tint thickens — a 8% wash over near-black dries to mud. */
[data-theme="dark"] .pf-chip.ok{color:var(--c-musiikki);border-color:rgba(0,164,106,.45);background:rgba(0,164,106,.14)}

/* The category chip keeps its lifted accent text; only the frame thickens to
/* stay visible. */
[data-theme="dark"] .pf-chip.cat{border-color:rgba(var(--c-julkkis-rgb),.45);background:rgba(var(--c-julkkis-rgb),.14)}

/* The advisory box was a five-percent blue over white; over near-black that
/* mix disappears entirely. Rebuilt from the dark link blue at honest
/* strengths. */
[data-theme="dark"] .note{background:rgba(143,178,255,.09);border-color:rgba(143,178,255,.24)}

/* Role chips: the text already rides the lifted accents from the dark table;
/* the frames and washes thicken so the chips survive the dark card instead
/* of drying to mud. */
[data-theme="dark"] .pf-roles .tag-nayttelija{border-color:rgba(11,111,232,.5);background:rgba(11,111,232,.16)}
[data-theme="dark"] .pf-roles .tag-artisti{border-color:rgba(0,164,106,.5);background:rgba(0,164,106,.16)}
[data-theme="dark"] .pf-roles .tag-malli{border-color:rgba(var(--c-julkkis-rgb),.5);background:rgba(var(--c-julkkis-rgb),.16)}
[data-theme="dark"] .pf-roles .tag-missi{border-color:rgba(var(--brand-rgb),.5);background:rgba(var(--brand-rgb),.16)}
[data-theme="dark"] .pf-roles .tag-juontaja{border-color:rgba(242,101,34,.5);background:rgba(242,101,34,.16)}

@media (prefers-color-scheme:dark){
  html:not([data-theme]) .idp::after{background:linear-gradient(180deg,transparent,var(--card))}
  /* Every raised tile on the profile was mixed for paper — white into a
  /* pink-tinged white. On the dark card that read as sheets of paper on a
  /* night desk. Raised in dark means lighter than the card, so the tiles step
  /* up from #17151F the way they stepped up from white. */
  html:not([data-theme]) .pf-stat,
  html:not([data-theme]) .sumbar div{background:linear-gradient(150deg,#1D1B27,#241E2F)}

  /* Same standing as the stat tiles. */
  html:not([data-theme]) .pf-season{background:linear-gradient(150deg,#1D1B27,#231E2D)}

  /* The label cells of the fact grid were the loudest thing on the dark page —
  /* near-white boxes checkering a dark panel. A label is furniture: half a
  /* step above the panel, never a lamp. */
  html:not([data-theme]) .dgrid dt{background:linear-gradient(90deg,#1B1925,#1D1B27)}

  /* The completeness strip follows the panel it sits on. */
  html:not([data-theme]) .meter{background:linear-gradient(180deg,#1B1925,#17151F)}

  /* Progress tracks were paper grey. On dark they become the raised band, so
  /* the duo-gradient fill still reads as the full part. */
  html:not([data-theme]) .m-track,
  html:not([data-theme]) .yrow .tr,
  html:not([data-theme]) .pf-bar,
  html:not([data-theme]) .trk-bar{background:#2C2839}

  /* The verified chip wore ink-dark green on a near-black card. The accent
  /* table already lifts every accent at night; the chip borrows the lifted
  /* green, and its tint thickens — a 8% wash over near-black dries to mud. */
  html:not([data-theme]) .pf-chip.ok{color:var(--c-musiikki);border-color:rgba(0,164,106,.45);background:rgba(0,164,106,.14)}

  /* The category chip keeps its lifted accent text; only the frame thickens to
  /* stay visible. */
  html:not([data-theme]) .pf-chip.cat{border-color:rgba(var(--c-julkkis-rgb),.45);background:rgba(var(--c-julkkis-rgb),.14)}

  /* The advisory box was a five-percent blue over white; over near-black that
  /* mix disappears entirely. Rebuilt from the dark link blue at honest
  /* strengths. */
  html:not([data-theme]) .note{background:rgba(143,178,255,.09);border-color:rgba(143,178,255,.24)}

  /* Role chips: the text already rides the lifted accents from the dark table;
  /* the frames and washes thicken so the chips survive the dark card instead
  /* of drying to mud. */
  html:not([data-theme]) .pf-roles .tag-nayttelija{border-color:rgba(11,111,232,.5);background:rgba(11,111,232,.16)}
  html:not([data-theme]) .pf-roles .tag-artisti{border-color:rgba(0,164,106,.5);background:rgba(0,164,106,.16)}
  html:not([data-theme]) .pf-roles .tag-malli{border-color:rgba(var(--c-julkkis-rgb),.5);background:rgba(var(--c-julkkis-rgb),.16)}
  html:not([data-theme]) .pf-roles .tag-missi{border-color:rgba(var(--brand-rgb),.5);background:rgba(var(--brand-rgb),.16)}
  html:not([data-theme]) .pf-roles .tag-juontaja{border-color:rgba(242,101,34,.5);background:rgba(242,101,34,.16)}
}
/* ===== END generated: profile dark ===== */