/* mls-digest — honed-marble theme.
   A single continuous quarried surface: a procedural honed-Carrara field painted behind everything
   (#stonefield, drawn in app.js), with signal cards cut as polished, raised panes of the SAME stone —
   the veins run straight through them. Slate ink, one warm spice accent held for act-on.
   Wide-tracked geometric display type. */
:root{
  --bg:#D6D9DD;                                   /* honed-marble base — matches the canvas ground */
  --panel:rgba(250,251,253,.34); --panel-2:rgba(244,247,250,.30);
  --line:#B9C0C8; --line-soft:rgba(120,132,146,.24);
  --ink:#171C24; --ink-dim:#4C5560; --ink-faint:#818B96;
  --spice:#AF5F1B; --spice-bright:#C56E22; --spice-wash:rgba(175,95,27,.12);
  --slate:#2B323B;
  --warn:#AF5F1B; --done:#6C7A66; --danger:#9C5342;
  /* polished-pane surface: a glossed, translucent cut of the field, lifted by bevel + shadow */
  --pane:linear-gradient(158deg, rgba(255,255,255,.46), rgba(255,255,255,.12) 46%, rgba(36,44,54,.05)), rgba(250,251,253,.20);
  --pane-border:1px solid rgba(255,255,255,.6);
  --pane-bevel:inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(40,50,62,.10);
  --pane-shadow:0 14px 34px rgba(31,38,48,.16);
  --pane-shadow-hi:0 22px 48px rgba(31,38,48,.24);
  --disp:"Futura","Century Gothic","Avenir Next",system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box;}
html,body{margin:0; height:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  min-height:100%;
}
/* the honed-marble ground — procedurally painted in app.js, viewport-locked behind everything */
#stonefield{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:block;}
/* film grain — a faint matte tooth over the exposed stone (cards sit above it) */
body:before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  opacity:.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* cold overcast wash at the top — daylight raking across the quarry */
body:after{
  content:""; position:fixed; left:50%; top:-32vh; transform:translateX(-50%);
  width:130vw; height:64vh; z-index:1; pointer-events:none;
  background:radial-gradient(50% 60% at 50% 50%, rgba(248,250,253,.55), transparent 72%);
}
.mono{font-family:var(--mono);}
.wrap{position:relative; z-index:2; max-width:820px; margin:0 auto; padding:44px 28px 110px;}
[hidden]{display:none !important;}

/* ── masthead ─────────────────────────────── */
.top{display:flex; align-items:flex-start; gap:20px; padding-bottom:24px;}
.mark{display:flex; align-items:center; gap:18px;}
.mark-ship{flex:none; display:block; animation:shipHover 6.5s ease-in-out infinite; will-change:transform;}
/* the craft holds a barely-there hover — a whisper of vertical drift */
@keyframes shipHover{0%,100%{transform:translateY(0);}50%{transform:translateY(-2.5px);}}
.ttl{font-family:var(--disp); font-size:22px; font-weight:600; letter-spacing:.32em; text-transform:uppercase; line-height:1;}
.ttl b{color:var(--ink);} .ttl span{color:var(--ink-faint);}
.sub{font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-faint); margin-top:11px;}
.clock{margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:5px;
  font-family:var(--mono); color:var(--ink-dim); font-size:12px;}
.clock .ci{display:none;}
.clock #clock{font-size:15px; color:var(--ink); letter-spacing:.04em; font-variant-numeric:tabular-nums;}
.clock .tz{font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-faint);}

/* ── view switcher ─────────────────────────────── */
.viewnav{display:flex; align-items:center; gap:26px; border-top:1px solid var(--line); padding:20px 2px 0;}
.vtab{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); cursor:pointer;
  user-select:none; padding-bottom:7px; border-bottom:1.5px solid transparent; transition:.16s;}
.vtab:hover{color:var(--ink-dim);}
.vtab.on{color:var(--ink); border-bottom-color:var(--spice);}
.vtab b{color:var(--ink); font-weight:600; margin-left:5px;}

/* ── HUD ─────────────────────────────── */
.hud{display:flex; align-items:baseline; gap:36px; padding:26px 2px 8px; flex-wrap:wrap;}
.today{display:inline-flex; align-items:center; gap:9px; color:var(--ink-dim); font-size:12px;
  letter-spacing:.04em; align-self:center;}
.today .dot{width:7px; height:7px; border-radius:50%; background:var(--ink-faint);}
.today .yr{color:var(--ink-faint);}
.stat{display:flex; flex-direction:column; gap:6px;}
.stat .n{font-family:var(--mono); font-size:25px; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums;}
.stat .n.t{color:var(--ink);}
.stat .n.a{color:var(--spice);}
.stat .l{font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint);}
.synced{margin-left:auto; align-self:flex-end; font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--ink-faint);}
.synced b{color:var(--ink-dim); font-weight:400;}

/* ── filter bar ─────────────────────────────── */
.bar{display:flex; align-items:center; gap:26px; padding:20px 2px 30px;}
.chip{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); cursor:pointer;
  user-select:none; padding-bottom:6px; border-bottom:1.5px solid transparent; background:none; transition:.16s;}
.chip:hover{color:var(--ink-dim);}
.chip.on{color:var(--ink); border-bottom-color:var(--spice);}
.sort{margin-left:auto; display:flex; align-items:center; gap:12px;}
.sort .lab{font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint);}
.seg{display:flex; gap:2px;}
.seg .s{font-size:10.5px; letter-spacing:.08em; padding:5px 10px; color:var(--ink-faint); cursor:pointer;
  user-select:none; border-bottom:1.5px solid transparent; transition:.15s;}
.seg .s.on{color:var(--ink); border-bottom-color:var(--spice);}

/* ── MLS group — open, hairline-separated, no box ───── */
.group{border-top:1px solid var(--line-soft); padding:32px 0;}
.group:first-of-type{border-top:0; padding-top:8px;}
.gtop{margin-bottom:20px;}
.ghead{display:flex; align-items:baseline; gap:16px;}
.gname{font-family:var(--disp); font-size:16px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink);}
.gcount{font-family:var(--mono); font-size:11px; color:var(--ink-faint); letter-spacing:.04em;}
.gfresh{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-faint); white-space:nowrap; letter-spacing:.04em;}
.gsynth{display:flex; align-items:flex-start; gap:9px; margin-top:11px; font-size:12.5px; line-height:1.55; color:var(--ink-dim);}
.gsynth .dia{flex:none; margin-top:2px; font-size:9px; color:var(--spice);}
.glanes{display:flex; align-items:center; gap:9px; margin-top:12px; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); flex-wrap:wrap;}
.glanes .sep{color:var(--line);}
.glanes b{color:var(--ink-dim); font-weight:600;}

/* ── signal cards — polished panes cut from the marble field ─────────── */
.rows{display:flex; flex-direction:column; gap:16px;}
.row{position:relative; padding:18px 20px 60px; border-radius:6px; overflow:hidden;
  background:var(--pane); border:var(--pane-border); box-shadow:var(--pane-bevel), var(--pane-shadow);
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;}
/* the raised lip that marks an act-on cut — the only spice on the pane */
.row.act{border-top:2px solid var(--spice);}
.row:hover{transform:translateY(-3px); box-shadow:var(--pane-bevel), var(--pane-shadow-hi); z-index:2;}
.row.act:hover{box-shadow:var(--pane-bevel), 0 22px 48px rgba(175,95,27,.20);}
.meta{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.lane{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); white-space:nowrap;}
.lane.news{display:none;}   /* spine is news-only — the redundant "News" tag is hidden until other lanes land */
.lane.dm{color:var(--ink-dim);} .lane.linkedin{color:var(--ink-dim);}
.tag{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); white-space:nowrap;}
.new{font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); font-weight:600;}
.repost{font-size:10px; letter-spacing:.08em; color:var(--ink-faint); white-space:nowrap;}
.age{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-faint); white-space:nowrap; font-variant-numeric:tabular-nums;}
.head{font-size:15.5px; color:var(--ink); margin:10px 0 8px; line-height:1.45; font-weight:450; max-width:60ch;}
.head a{color:inherit; text-decoration:none;}
.head a:hover{text-decoration:underline; text-decoration-color:var(--line);}
.why{font-size:13px; line-height:1.55; color:var(--ink-dim); max-width:64ch;}
.src{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; color:var(--ink-faint); margin-top:12px; letter-spacing:.03em;}
.src:before{content:""; width:5px; height:5px; border:1px solid var(--ink-faint); border-radius:50%;}
.src svg{display:none;}

/* engage / draft (LinkedIn lane, when it lands) */
.engage{margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft);}
.ea{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--ink-dim);}
.draft{margin-top:8px; padding:10px 13px; border-left:2px solid var(--line); background:var(--panel);
  font-size:12px; line-height:1.55; color:var(--ink-dim);}

/* ── worth-acting-on: the only spice on a card ─────────── */
.actb{font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:var(--spice);
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;}
.actb:before{content:""; width:4px; height:4px; border-radius:50%; background:var(--spice);}
.row.act .head{color:#141922; font-weight:500;}
.opener{margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft);}
.opener .ol{display:inline-flex; align-items:center; gap:7px; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600; color:var(--spice);}
.otext{margin-top:9px; padding:11px 13px; border-left:2px solid var(--spice); background:var(--spice-wash);
  font-size:12.5px; line-height:1.55; color:var(--ink);}
.oto{margin-top:9px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-left:13px;}
.otoname{font-size:11.5px; font-weight:600; color:var(--ink);}
.otomail{font-family:var(--mono); font-size:11.5px; color:var(--spice-bright); text-decoration:none;}
.otomail:hover{text-decoration:underline;}

.empty{color:var(--ink-faint); font-size:13px; padding:40px 4px; text-align:center; letter-spacing:.02em;}

/* ── previous-feed banner ─────────────────────────────── */
.prevbanner{display:flex; align-items:center; justify-content:space-between; gap:12px 22px; flex-wrap:wrap;
  padding:20px 0 8px; border-bottom:1px solid var(--line-soft); margin-bottom:8px;}
.prevbanner .pbhead{display:flex; flex-direction:column; gap:5px;}
.prevbanner .pbttl{font-family:var(--disp); font-size:14px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);}
.prevbanner .pbsub{font-size:11.5px; color:var(--ink-dim);}
.prevbanner .pbstamp{display:flex; flex-direction:column; align-items:flex-end; gap:6px; text-align:right; margin-left:auto;}
.prevbanner .pblabel{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);}
.prevbanner .pbselect{font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--ink);
  background:var(--panel); border:1px solid var(--line); border-radius:0; padding:8px 30px 8px 12px; cursor:pointer;
  appearance:none; -webkit-appearance:none; transition:.15s;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23AF5F1B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center;}
.prevbanner .pbselect:hover{border-color:var(--ink-faint);}
.prevbanner .pbselect:focus{outline:none; border-color:var(--spice);}
.prevbanner .pbselect option{background:var(--bg); color:var(--ink); font-weight:500;}

/* ── remind-me button ─────────────────────────────── */
.rrow{margin-top:14px; text-align:right;}
.remindb{display:inline-flex; align-items:center; gap:7px; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-dim); padding:8px 14px; cursor:pointer; border:1px solid var(--line);
  background:transparent; transition:.15s;}
.remindb:hover{border-color:var(--ink-faint); color:var(--ink);}
.remindb svg{opacity:.7;}
.remindb.done{color:var(--spice); border-color:var(--spice); background:var(--spice-wash); cursor:default;}

/* ── confirm popup ─────────────────────────────── */
.modal-bg{position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:rgba(26,32,40,.42); backdrop-filter:blur(2px); padding:18px;}
.modal{width:360px; max-width:100%; padding:24px; border:1px solid var(--line); background:var(--bg);
  box-shadow:0 24px 60px rgba(26,32,40,.22);}
.modal-title{font-family:var(--disp); font-size:15px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink);}
.modal-ctx{margin-top:14px; padding:12px 14px; border-left:2px solid var(--line); background:var(--panel);
  display:flex; flex-direction:column; gap:5px;}
.modal-ctx .rmfirm{font-family:var(--disp); font-size:13px; font-weight:600; letter-spacing:.08em; color:var(--ink);}
.modal-ctx .rmhead{font-size:12px; color:var(--ink-dim); line-height:1.45;}
.modal-actions{display:flex; gap:10px; margin-top:20px;}
.mbtn{flex:1; font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:11px 14px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--ink-dim); transition:.15s;}
.mbtn:hover{border-color:var(--ink-faint); color:var(--ink);}
.mbtn.primary{background:var(--spice); border-color:var(--spice); color:#F4ECE1; font-weight:600;}
.mbtn.primary:hover{background:var(--spice-bright);}

/* ── reminders list ─────────────────────────────── */
.rwrap{display:flex; flex-direction:column; gap:16px; margin-top:20px;}
.rcard{position:relative; padding:20px 22px 20px 26px; border-radius:6px; overflow:hidden;
  background:var(--pane); border:var(--pane-border); box-shadow:var(--pane-bevel), var(--pane-shadow);
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;}
.rcard:hover{transform:translateY(-3px); box-shadow:var(--pane-bevel), var(--pane-shadow-hi);}
/* status lip runs down the cut edge */
.rcard:before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--line);}
.rcard.status-awaiting:before{background:var(--warn);}
.rcard.status-completed{opacity:.55;}
.rcard.status-completed:before{background:var(--done);}
.rmeta{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.rfirm{font-family:var(--disp); font-size:15px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);}
.rwhen{margin-left:auto; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-faint); white-space:nowrap;}
.rhead{font-size:14px; color:var(--ink); margin:10px 0 6px; line-height:1.4; font-weight:450;}
.rhead a{color:inherit; text-decoration:none;} .rhead a:hover{text-decoration:underline; text-decoration-color:var(--line);}
.rwhy{font-size:12.5px; line-height:1.55; color:var(--ink-dim);}
.rnote{margin-top:11px; padding:10px 13px; border-left:2px solid var(--line); background:var(--panel);
  font-size:12.5px; line-height:1.5; color:var(--ink-dim);}
.ropener{margin-top:11px;}
.ropener .otext{padding:10px 13px; border-left:2px solid var(--spice); background:var(--spice-wash);
  font-size:12px; line-height:1.5; color:var(--ink);}
.ropener .oto{margin-top:8px; padding-left:13px;}
.ropener .otoname{font-size:11.5px; font-weight:600; color:var(--ink);}
.ractions{display:flex; align-items:center; gap:9px; margin-top:15px; flex-wrap:wrap;}
.rbtn{display:inline-flex; align-items:center; gap:6px; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:8px 13px; cursor:pointer; user-select:none; border:1px solid var(--line); background:transparent;
  color:var(--ink-dim); transition:.15s;}
.rbtn:hover{border-color:var(--ink-faint); color:var(--ink);}
.rbtn svg{opacity:.7;}
.rbtn.primary{background:var(--spice); border-color:var(--spice); color:#F4ECE1; font-weight:600;}
.rbtn.primary:hover{background:var(--spice-bright);}
.noteedit{margin-top:14px;}
.noteta{width:100%; min-height:62px; resize:vertical; padding:10px 12px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); font-size:12.5px; font-family:var(--body); line-height:1.5; outline:none;}
.noteta:focus{border-color:var(--spice);}
.noteacts{display:flex; gap:9px; margin-top:10px;}
.rbtn.await.on{background:var(--warn); border-color:var(--warn); color:#F4ECE1; font-weight:600;}
.rbtn.done.on{background:var(--done); border-color:var(--done); color:#F1F3EE; font-weight:600;}
.rbtn.del{margin-left:auto; color:var(--danger); border-color:rgba(156,83,66,.35);}
.rbtn.del:hover{border-color:var(--danger); color:var(--danger);}
.rbtn.del.on{background:var(--danger); border-color:var(--danger); color:#F4ECE1; font-weight:600;}
.rconfirm{font-size:11.5px; color:var(--danger); margin-right:auto; letter-spacing:.04em;}

.foot-link{margin-top:34px; padding-top:24px; border-top:1px solid var(--line); text-align:center;}
.foot-link a{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); text-decoration:none;
  display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border:1px solid var(--line); transition:.16s;}
.foot-link a:hover{border-color:var(--ink-faint); color:var(--ink);}
.foot-link span{color:var(--spice);}

/* ── access gate ─────────────────────────────── */
.gate-screen{position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:transparent;}   /* the marble field shows straight through the gate */
.gate-card{position:relative; text-align:center; width:320px; padding:24px;}
.gate-card .mark-ship{margin:0 auto 22px;}
.gate-title{font-family:var(--disp); font-size:21px; font-weight:600; letter-spacing:.32em; text-transform:uppercase;}
.gate-title b{color:var(--ink);} .gate-title span{color:var(--ink-faint);}
.gate-sub{font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-faint); margin-top:12px;}
.gate-key{position:relative; margin:30px 0 8px; height:32px;}
.gate-bubbles{display:flex; justify-content:center; align-items:center; gap:14px; height:100%;}
.bubble{width:13px; height:13px; border:1.5px solid var(--ink-faint); background:transparent; transition:.18s;}
.bubble.on{background:var(--spice); border-color:var(--spice); transform:scale(1.05);}
.gate-input{position:absolute; inset:0; width:100%; height:100%; background:transparent; border:0; outline:none;
  color:transparent; caret-color:transparent; text-align:center; font-size:16px; cursor:text;}
.gate-err{min-height:16px; font-size:12px; color:var(--danger); margin-top:12px; letter-spacing:.02em;}
.gate-screen.shake .gate-bubbles{animation:shake .42s ease;}
@keyframes shake{0%,100%{transform:translateX(0);}20%,60%{transform:translateX(-7px);}40%,80%{transform:translateX(7px);}}

/* ── MLS directory (dossiers, grouped by CDL access tier) ─────────── */
#dossiers{padding-top:8px;}
.dhead{padding:22px 2px 4px;}
.dhead .dttl{font-family:var(--disp); font-size:15px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);}
.dhead .dsub{font-size:11.5px; color:var(--ink-dim); margin-top:6px; line-height:1.5; max-width:60ch;}
.dsearch{margin-top:16px; width:100%; max-width:340px; padding:11px 14px; font-family:var(--body); font-size:13px;
  color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:0; outline:none; transition:.15s;}
.dsearch:focus{border-color:var(--spice);}
.dsearch::placeholder{color:var(--ink-faint); letter-spacing:.02em;}
.dcard + .dcard{margin-top:0;}
.dtier{border-top:1px solid var(--line-soft); padding:30px 0 4px;}
.dthead{display:flex; align-items:baseline; gap:14px;}
.dtname{font-family:var(--disp); font-size:14px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim);}
.dtier.open .dtname{color:var(--spice);}          /* open lanes carry the one spice accent */
.dtcount{font-family:var(--mono); font-size:11px; color:var(--ink-faint); letter-spacing:.04em;}
.dtnote{display:flex; align-items:flex-start; gap:9px; margin:11px 0 20px; font-size:12.5px; line-height:1.55; color:var(--ink-dim);}
.dtnote .dia{flex:none; margin-top:2px; font-size:9px; color:var(--ink-faint);}
.dtier.open .dtnote .dia{color:var(--spice);}

.dcard{position:relative; padding:17px 20px 18px; border-radius:6px; overflow:hidden;
  background:var(--pane); border:var(--pane-border); box-shadow:var(--pane-bevel), var(--pane-shadow);
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;}
.dcard:hover{transform:translateY(-3px); box-shadow:var(--pane-bevel), var(--pane-shadow-hi); z-index:2;}
.dtier.open .dcard{border-top:2px solid var(--spice);}
.dmeta{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.dname{font-family:var(--disp); font-size:15px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);}
.dsubs{font-family:var(--mono); font-size:12px; color:var(--ink); letter-spacing:.02em; font-variant-numeric:tabular-nums;}
.dtier.open .dsubs{color:var(--spice-bright);}
.dregion{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);}
.dplay{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--spice);
  display:inline-flex; align-items:center; gap:6px;}
.dplay:before{content:""; width:4px; height:4px; border-radius:50%; background:var(--spice);}
.drail{margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); letter-spacing:.03em; white-space:nowrap;}
.dstack{font-size:12.5px; line-height:1.55; color:var(--ink-dim); margin-top:11px;}
.dstack b{color:var(--ink); font-weight:600;}
.dstack .inf{color:var(--ink-faint); font-style:italic;}
.dwho{margin-top:13px; padding-top:12px; border-top:1px solid var(--line-soft); display:flex; flex-direction:column; gap:7px;}
.dwrow{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; font-size:12px;}
.dwrole{flex:none; width:74px; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);}
.dwbody{flex:1 1 0; min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 11px;}
.dwname{font-weight:600; color:var(--ink);}
.dwtitle{color:var(--ink-dim);}
.dwmail{font-family:var(--mono); font-size:11px; color:var(--spice-bright); text-decoration:none;}
.dwmail:hover{text-decoration:underline;}
.dwnone{font-size:11.5px; color:var(--ink-faint); font-style:italic;}
.dwli{margin-left:2px; font-family:var(--mono); font-size:10px; font-weight:600; text-transform:lowercase;
  color:var(--ink-faint); text-decoration:none; border:1px solid var(--line); border-radius:2px; padding:0 4px; line-height:1.5;}
.dwli:hover{color:var(--spice); border-color:var(--spice);}

@media (max-width:560px){ .dwrole{width:100%;} }
@media (prefers-reduced-motion:reduce){*{animation:none !important;} .row:hover,.dcard:hover{transform:none;}}
@media (max-width:560px){
  .wrap{padding:32px 18px 70px;}
  .hud{gap:24px;}
  .top{padding-bottom:18px;}
}