/* dash.css — per-screen styles collected from the kit's screen-local <style> blocks
   (01 login, 02 overview, 03 queue, 04 detail, 06/07 inbox, 08 analytics).
   System-wide classes live in base.css; tokens in tokens.css. */

/* ---- login (01) ---- */
.login-field { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-6);
  background:
    radial-gradient(1100px 600px at 50% -10%, color-mix(in oklab, var(--amber) 8%, transparent), transparent 60%),
    var(--navy); }
.login-card { width: 100%; max-width: 400px; }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-8); }
.login-mark { width: 56px; height: 56px; border-radius: 15px; background: var(--amber); color: var(--text-onaccent); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-weight: 600; font-size: 27px; box-shadow: var(--sh-2); }
.login-word { font-family: var(--font-serif); font-size: 30px; color: var(--text-primary); font-weight: 500; letter-spacing: -0.01em; }
.login-word .sub { display:block; text-align:center; font-family: var(--font-sans); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); margin-top: 6px; font-weight: 600; }
.alert { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-small); margin-bottom: var(--sp-4); }
.alert-error { background: var(--danger-dim); color: color-mix(in oklab, var(--danger) 80%, white); }
.alert-error .icon { color: var(--danger); }
.alert-warn { background: var(--warning-dim); color: color-mix(in oklab, var(--warning) 82%, white); }
.alert-warn .icon { color: var(--warning); }
.alert-ok { background: var(--success-dim); color: color-mix(in oklab, var(--success) 82%, white); }
.alert-ok .icon { color: var(--success); }
.footnote { text-align: center; margin-top: var(--sp-6); font-size: var(--fs-small); color: var(--text-muted); }
.footnote .mono { font-family: var(--font-mono); }

/* ---- overview (02) ---- */
.ov-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-5); align-items: start; }
.col-8 { grid-column: span 8; } .col-6 { grid-column: span 6; } .col-4 { grid-column: span 4; } .col-12 { grid-column: span 12; }
.growth-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat .n { font-family: var(--font-serif); font-size: 40px; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.stat .n.sm { font-size: 30px; }
.row-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--navy-border); }
.row-item:last-child { border-bottom: none; }
.thumb { width: 46px; height: 46px; border-radius: 9px; flex: none; object-fit: cover; }
.spark { width: 100%; height: 44px; }
.health-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--navy-border); font-size: var(--fs-small); }
.health-row:last-child { border-bottom: none; }
.health-row .k { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-secondary); }
.progress-line { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-small); margin-bottom: 6px; }
@media (max-width: 900px){ .col-8,.col-6,.col-4,.col-12{ grid-column: span 12; } .growth-cards{ grid-template-columns: 1fr 1fr; } }

/* ---- queue list (03) ---- */
.q-thumb { width: 52px; height: 52px; border-radius: 9px; flex: none; object-fit: cover; }
.q-cap { font-weight: 500; color: var(--text-primary); }
.stamp { font-size: 11px; color: var(--text-muted); display:flex; align-items:center; gap:5px; }
.stamp .icon { color: var(--success); }
.q-cards { display: none; flex-direction: column; gap: var(--sp-3); }
.q-card { padding: var(--sp-4); }
.q-card .top { display: flex; gap: var(--sp-3); }
@media (max-width: 900px){ .q-table-wrap { display: none; } .q-cards { display: flex; } }

/* ---- queue detail (04) ---- */
.detail-grid { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: var(--sp-6); align-items: start; }
@media (max-width: 1000px){ .detail-grid { grid-template-columns: 1fr; } }
.post { max-width: 440px; margin: 0 auto; background: var(--navy-card); border: 1px solid var(--navy-border); border-radius: var(--r-card); overflow: hidden; }
.post-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.post-head .avatar { width: 36px; height: 36px; background: linear-gradient(135deg,var(--ig),var(--amber)); color:#fff; }
.post-media { width: 100%; display: block; }
.post-caption { padding: var(--sp-3) var(--sp-4) var(--sp-4); font-size: var(--fs-small); line-height: 1.6; color: var(--text-secondary); white-space: pre-line; }
.post-caption b { color: var(--text-primary); font-weight: 600; }
.glover-q { display: block; margin-top: 10px; font-family: var(--font-serif); font-style: italic; color: var(--amber-light); font-size: 15px; }
.first-comment { border-top: 1px solid var(--navy-border); padding: var(--sp-3) var(--sp-4); display: flex; gap: var(--sp-2); }
.first-comment .avatar { width: 26px; height: 26px; font-size: 10px; }
.rail { position: sticky; top: 88px; display: flex; flex-direction: column; gap: var(--sp-4); }
.meta-row { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 8px 0; border-bottom: 1px solid var(--navy-border); font-size: var(--fs-small); }
.meta-row:last-child { border-bottom: none; }
.meta-row .v { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); text-align: right; word-break: break-all; }
.err-well { font-family: var(--font-mono); font-size: 12px; color: var(--danger); white-space: pre-wrap; word-break: break-word; }
@media (max-width:900px){ .rail { position: static; } }

/* ---- inbox (06/07) ---- */
.thread-row { display:flex; gap:var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--navy-border); align-items:flex-start; color: inherit; text-decoration: none; transition: background var(--dur-fast) var(--ease); }
.thread-row:hover { background: var(--navy-hover); }
.thread-row.unread { background: color-mix(in oklab, var(--amber) 4%, transparent); }
.thread-row .name { font-weight:600; color: var(--text-secondary); }
.thread-row.unread .name { color: var(--text-primary); }
.unread-dot { width:8px; height:8px; border-radius:999px; background: var(--amber); flex:none; margin-top:6px; }
.thread-grid { display:grid; grid-template-columns: minmax(0,1fr) 360px; gap: var(--sp-6); align-items:start; }
@media (max-width: 1000px){ .thread-grid { grid-template-columns: 1fr; } }
.bubbles { display:flex; flex-direction:column; gap: var(--sp-3); padding: var(--sp-2) 0; }
.bubble { max-width: 78%; padding: 10px 14px; border-radius: 16px; font-size: var(--fs-small); line-height: 1.5; }
.bubble.in { align-self:flex-start; background: var(--navy-card); border: 1px solid var(--navy-border); border-bottom-left-radius: 5px; color: var(--text-secondary); }
.bubble.out { align-self:flex-end; background: var(--amber); color: var(--text-onaccent); border-bottom-right-radius: 5px; }
.bmeta { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.bmeta.out { text-align:right; }
.sug { border: 1px solid var(--navy-border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); background: var(--navy-inset); }
.sug .lbl { display:flex; align-items:center; gap:6px; margin-bottom: 6px; }
.sug label { display: block; cursor: pointer; }

/* ---- analytics (08) ---- */
.a-grid { display:grid; grid-template-columns: repeat(12,1fr); gap: var(--sp-5); align-items:start; }
.c8 { grid-column: span 8; } .c4 { grid-column: span 4; } .c6 { grid-column: span 6; } .c12 { grid-column: span 12; }
@media (max-width:900px){ .c8,.c4,.c6,.c12 { grid-column: span 12; } }
.chart { width: 100%; height: 200px; }
.bars { display:flex; align-items:flex-end; gap: var(--sp-3); height: 180px; padding-top: var(--sp-3); }
.bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; }
.bar { width: 60%; max-width: 34px; border-radius: 5px 5px 0 0; background: var(--navy-hover); }
.bar.hit { background: var(--amber); }
.bar-x { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); }
.legend { display:flex; gap:var(--sp-4); font-size:12px; color: var(--text-muted); }
.legend i { width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:5px; vertical-align:middle; }

/* ---- calendar (05, S4.6) ---- */
.cal { display: grid; grid-template-columns: 90px repeat(7, 1fr); border: 1px solid var(--navy-border); border-radius: var(--r-card); overflow: hidden; background: var(--navy-card); }
.cal-h { padding: var(--sp-3); border-bottom: 1px solid var(--navy-border); border-right: 1px solid var(--navy-border); background: var(--navy-light); }
.cal-h:last-child { border-right: none; }
.cal-h .dow { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.cal-h .dnum { font-family: var(--font-serif); font-size: 18px; color: var(--text-secondary); }
.cal-h.today .dnum { color: var(--amber); }
.cal-h.today { background: var(--amber-dim); }
.cal-time { padding: var(--sp-3); border-right: 1px solid var(--navy-border); border-bottom: 1px solid var(--navy-border); font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); display:flex; align-items:flex-start; }
.cal-cell { border-right: 1px solid var(--navy-border); border-bottom: 1px solid var(--navy-border); padding: 6px; min-height: 78px; display:flex; flex-direction:column; gap:6px; }
.cal-cell:nth-child(8n) { border-right: none; }
.evt { display:block; border-radius: 8px; padding: 6px 8px; font-size: 11px; line-height: 1.3; border: 1px solid transparent; text-decoration: none; transition: filter var(--dur-fast) var(--ease); }
.evt:hover { filter: brightness(1.15); }
.evt .t { font-weight: 600; display: flex; align-items: center; gap: 5px; }
.evt .c { color: var(--text-secondary); margin-top: 2px; }
.evt.ig { background: var(--ig-dim); border-color: color-mix(in oklab,var(--ig) 30%,transparent); }
.evt.ig .t { color: var(--ig); }
.evt.fb { background: var(--fb-dim); border-color: color-mix(in oklab,var(--fb) 30%,transparent); }
.evt.fb .t { color: var(--fb); }
.evt.done { opacity: .62; }
.evt.done .t::after { content:"\2713"; margin-left:auto; color: var(--success); }
.evt.evt-failed { border-color: color-mix(in oklab,var(--danger) 50%,transparent); }
.evt.evt-failed .t::after { content:"!"; margin-left:auto; color: var(--danger); font-weight:700; }
.add-slot { display:flex; align-items:center; justify-content:center; gap:6px; height:100%; min-height:60px; color: var(--text-muted); font-size:11px; }
.tray-draft { display:flex; gap:var(--sp-3); padding: var(--sp-3); border:1px dashed var(--navy-border); border-radius:var(--r-md); align-items:center; text-decoration:none; transition: border-color var(--dur-fast) var(--ease); }
.tray-draft:hover { border-color: var(--amber); }
.agenda { display: none; flex-direction: column; gap: var(--sp-4); }
.agenda-day .dh { display:flex; align-items:baseline; gap:var(--sp-2); margin-bottom: var(--sp-2); }
@media (max-width: 900px){ .cal-wrap, .tray { display:none; } .agenda { display:flex; } }

/* ---- settings (10, S4.8) ---- */
.set-row { display:flex; align-items:center; gap:var(--sp-3); padding: var(--sp-4); border-bottom:1px solid var(--navy-border); }
.set-row:last-child { border-bottom:none; }
.kv { display:flex; justify-content:space-between; gap:var(--sp-3); padding: 11px 0; border-bottom:1px solid var(--navy-border); font-size: var(--fs-small); }
.kv:last-child { border-bottom:none; }
.kv .v { font-family: var(--font-mono); font-size:12px; color: var(--text-secondary); text-align:right; word-break:break-all; }
.runs { display:flex; gap:5px; align-items:flex-end; }
.run { width: 16px; height: 30px; border-radius:4px; background: var(--navy-hover); }
.run.ok { background: var(--success); opacity:.85; }
.run.fail { background: var(--danger); }
.pane { display:none; } .pane.active { display:block; }
.set-tabs { position: sticky; top: 0; z-index: 10; background: var(--navy); }

/* ---- caption edit (S4.7) ---- */
.edit-card summary { list-style: none; }
.edit-card summary::-webkit-details-marker { display: none; }
.edit-card[open] summary { border-bottom: 1px solid var(--navy-border); }
.edit-card textarea.input { resize: vertical; font-family: var(--font-sans); line-height: 1.5; }

/* ---- advisor (09, S5) ---- */
.adv-grid { display:grid; grid-template-columns: minmax(0,1fr) 260px; gap: var(--sp-6); align-items:start; }
@media (max-width:900px){ .adv-grid { grid-template-columns:1fr; } }
.report { padding: var(--sp-6); }
.report .lede { font-family: var(--font-serif); font-size: 19px; line-height: 1.5; color: var(--text-primary); }
.worked { list-style:none; padding:0; margin: var(--sp-4) 0 0; }
.worked li { display:flex; gap: var(--sp-3); padding: 8px 0; font-size: var(--fs-small); color: var(--text-secondary); }
.worked li .icon { color: var(--success); margin-top:1px; flex:none; }
.rec { border: 1px solid var(--navy-border); border-radius: var(--r-md); padding: var(--sp-4); background: var(--navy-inset); }
.rec + .rec { margin-top: var(--sp-3); }
.archive-item { display:flex; align-items:center; gap:var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); text-decoration:none; }
.archive-item:hover { background: var(--navy-card); }
.archive-item.active { background: var(--amber-dim); }