@font-face { font-family: 'Host Grotesk'; src: url('/fonts/HostGrotesk-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Host Grotesk'; src: url('/fonts/HostGrotesk-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  --navy: #002A38;
  --navy-2: #01445A;
  --cyan: #0195C6;
  --lime: #DCE24B;
  --bg: #F2F5F6;
  --card: #FFFFFF;
  --text: #0E2530;
  --muted: #5B6B73;
  --border: #DFE6E9;
  --radius: 12px;

  --planned: #7C8B93;  --planned-bg: #EDF1F3;
  --draft: #0179A1;    --draft-bg: #DDF1F9;
  --today: #6F7400;    --today-bg: #F3F6C2;  --today-line: #C9CF2F;
  --late: #C23434;     --late-bg: #FBE4E4;
  --posted: #1A8048;   --posted-bg: #DDF3E6;
  --unscheduled: #6A4FD8; --unscheduled-bg: #EEE9FD;
  --warn: #B86B00;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Host Grotesk', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cyan); }
h1, h2, h3, h4, h5 { line-height: 1.2; margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.pad { padding: 16px; }
.boot { padding: 40px; color: var(--muted); }

/* ---------- buttons & inputs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent; border-radius: 8px; padding: 8px 14px;
  font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn.block { width: 100%; }
.btn.primary { background: var(--navy); color: #fff; }
.btn.primary:hover { background: var(--navy-2); }
.btn.success { background: var(--posted); color: #fff; }
.btn.success:hover { background: #146B3B; }
.btn.ghost { background: #fff; color: var(--text); border-color: var(--border); }
.btn.ghost:hover { border-color: var(--cyan); }
.btn.disabled { opacity: .4; pointer-events: none; }
.btn.danger-ghost { background: #fff; color: var(--late); border-color: #F0C4C4; }
.link-btn { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 4px 6px; opacity: .85; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { opacity: 1; }
.icon-btn { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); }

input, select, textarea {
  font: inherit; color: var(--text); background: #fff;
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; width: 100%;
}
input:focus, select:focus, textarea:focus, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
textarea { resize: vertical; line-height: 1.55; }
textarea.tall { min-height: 260px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
textarea.tall.xl { min-height: 480px; }
.select { width: auto; min-width: 140px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.field > input, .field > select, .field > textarea { font-weight: 400; font-size: 15px; color: var(--text); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.row4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.row2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.check-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.check-row input { width: auto; margin-top: 3px; }
.check-row > span { display: flex; flex-direction: column; }
.link-btn.danger { color: var(--late); }
.pre { white-space: pre-wrap; }
.actions { display: flex; gap: 8px; align-items: center; }
.spacer { flex: 1; }
.form-error { color: var(--late); margin: 0; min-height: 1em; font-size: 14px; }

/* ---------- auth ---------- */
.auth {
  min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(1200px 600px at 20% 0%, #01506A 0%, var(--navy) 60%);
}
.auth-card {
  width: 100%; max-width: 380px; background: #fff; border-radius: 16px; padding: 28px;
  display: flex; flex-direction: column; gap: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.auth-card h1 { font-size: 24px; }
.auth-card p { margin: 0; }
.auth-logo { width: 130px; height: auto; background: var(--navy); border-radius: 10px; padding: 10px 14px; }

/* ---------- shell ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 20px; padding: 0 24px; height: 60px;
  background: var(--navy); color: #fff;
}
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; }
.brand img { height: 28px; width: auto; }
.brand span { opacity: .8; font-size: 14px; border-left: 1px solid rgba(255, 255, 255, .25); padding-left: 10px; }
.tabs { display: flex; gap: 4px; height: 100%; }
.tab {
  display: flex; align-items: center; padding: 0 16px; color: rgba(255, 255, 255, .75); text-decoration: none; font-weight: 700;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: #fff; }
.tab.active { color: #fff; border-bottom-color: var(--lime); }
.user-menu { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.user-name { font-weight: 700; margin-right: 6px; }
.main { max-width: 1320px; margin: 0 auto; padding: 24px 24px 96px; } /* bottom room for the Assistant button */

.avatar {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  color: #fff; font-size: 12px; font-weight: 700; flex: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .6);
}
.avatar.small { width: 22px; height: 22px; font-size: 10px; box-shadow: none; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(0, 42, 56, .04); }
.box-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.box-head h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--navy); }
.box-tools { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.box-body { padding: 18px; }
.box-foot { padding: 14px 18px; border-top: 1px solid var(--border); background: #FAFCFC; border-radius: 0 0 var(--radius) var(--radius); }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.range-label { margin-left: 6px; font-size: 16px; }

.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #E3F0F5; color: var(--navy); font-size: 12px; font-weight: 700; }
.pill.outline { background: transparent; border: 1px solid var(--border); color: var(--muted); }

/* status colours */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.s-planned { background: var(--planned-bg); color: var(--planned); }
.s-draft { background: var(--draft-bg); color: var(--draft); }
.s-today { background: var(--today-bg); color: var(--today); }
.s-late { background: var(--late-bg); color: var(--late); }
.s-posted { background: var(--posted-bg); color: var(--posted); }
.s-unscheduled { background: var(--unscheduled-bg); color: var(--unscheduled); }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 4px; flex: none; }
.swatch.s-planned { background: var(--planned); }
.swatch.s-draft { background: var(--cyan); }
.swatch.s-today { background: var(--lime); box-shadow: inset 0 0 0 1px var(--today-line); }
.swatch.s-late { background: var(--late); }
.swatch.s-posted { background: var(--posted); }

/* ---------- post tab ---------- */
.post-head { margin-bottom: 16px; }
.post-head h1 { font-size: 26px; margin-bottom: 8px; }
.meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.meta strong { color: var(--text); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.box { display: flex; flex-direction: column; min-height: 520px; }
.box > .box-body { flex: 1; }
.prose { font-size: 15px; }
.prose p { margin: 0 0 12px; }
.prose ul, .prose ol { margin: 0 0 12px; padding-left: 20px; }
.prose li { margin-bottom: 4px; }
.prose h2 { font-size: 18px; margin: 18px 0 8px; color: var(--navy); }
.prose h3 { font-size: 15px; margin: 16px 0 6px; color: var(--navy); text-transform: uppercase; letter-spacing: .03em; }
.prose h4 { font-size: 14px; margin: 14px 0 6px; color: var(--cyan); }
.prose h2:first-child, .prose h3:first-child, .prose h4:first-child { margin-top: 0; }
.prose strong { color: var(--navy); }
.prose table { border-collapse: collapse; width: 100%; margin-bottom: 12px; font-size: 14px; }
.prose th, .prose td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.prose th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.table-wrap { overflow-x: auto; }
.draft-body { display: flex; flex-direction: column; gap: 6px; }
.draft { flex: 1; min-height: 380px; border: 1px solid var(--border); font-size: 15px; padding: 12px 14px; }
.draft[readonly] { background: #F8FAFB; }
.draft-foot { display: flex; justify-content: flex-end; font-size: 12px; }
.counter.over { color: var(--late); font-weight: 700; }
.mark-form { display: flex; gap: 10px; }
.mark-form input { flex: 1; }
.posted-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--posted-bg); color: var(--posted); border-radius: 8px; padding: 10px 14px; }
.posted-box strong { color: var(--posted); }
.posted-actions { display: flex; align-items: center; gap: 8px; }
.late-tag, .ontime-tag { margin-left: 8px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.late-tag { background: #FFF1DB; color: var(--warn); }
.ontime-tag { background: #fff; color: var(--posted); }

.comments-card { margin-top: 20px; }
.comments { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.comment { display: flex; gap: 10px; }
.comment-meta { display: flex; gap: 8px; font-size: 13px; align-items: baseline; }
.comment-body { white-space: pre-wrap; }
.comment-form { display: flex; gap: 10px; align-items: flex-end; }

/* ---------- schedule ---------- */
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; }
.seg button { border: 0; background: none; font: inherit; font-weight: 700; font-size: 14px; padding: 7px 14px; cursor: pointer; color: var(--muted); }
.seg button.on { background: var(--navy); color: #fff; }

.tt-wrap { overflow-x: auto; }
.tt { display: grid; grid-template-columns: 56px repeat(5, minmax(150px, 1fr)) repeat(2, minmax(90px, .55fr)); min-width: 980px; }
.tt-corner, .tt-day { position: sticky; top: 0; background: #fff; border-bottom: 1px solid var(--border); }
.tt-day { padding: 10px; display: flex; gap: 6px; align-items: baseline; font-size: 13px; color: var(--muted); border-left: 1px solid var(--border); }
.tt-day strong { font-size: 18px; color: var(--text); }
.tt-day.today strong { background: var(--lime); color: var(--navy); border-radius: 6px; padding: 0 6px; }
.tt-hour { font-size: 11px; color: var(--muted); padding: 4px 8px 0 0; text-align: right; border-bottom: 1px solid #EEF2F4; }
.tt-cell { min-height: 44px; padding: 4px; border-left: 1px solid var(--border); border-bottom: 1px solid #EEF2F4; display: flex; flex-direction: column; gap: 4px; }
.tt-cell.today, .month-cell.today { background: #FBFCEB; }
.weekend { background: #FAFBFC; }

.chip {
  display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 8px; text-decoration: none;
  border: 1px solid transparent; font-size: 12px; line-height: 1.3; cursor: pointer; transition: transform .1s, box-shadow .1s;
}
.chip:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0, 42, 56, .12); }
.chip.s-planned { border-color: #D6DEE2; }
.chip.s-draft { border-color: #A9DCEF; }
.chip.s-today { border-color: var(--today-line); }
.chip.s-late { border-color: #F0B4B4; }
.chip.s-posted { border-color: #A8DDBF; }
.chip.posted-late { box-shadow: inset 4px 0 0 #F2A93B; }
.chip-top { display: flex; align-items: center; gap: 5px; }
.chip-time { font-weight: 700; }
.chip-who { font-weight: 700; color: var(--text); }
.chip-msg {
  margin-left: auto; min-width: 18px; height: 16px; padding: 0 5px; border-radius: 8px 8px 8px 2px;
  background: var(--navy); color: #fff; font-size: 10px; font-weight: 700; display: inline-grid; place-items: center;
}
.chip-title { color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chip.compact { padding: 3px 6px; }
.chip.compact .chip-title { -webkit-line-clamp: 1; }

.month-wrap { overflow-x: auto; }
.month { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)) repeat(2, minmax(80px, .6fr)); min-width: 860px; }
.month-head { padding: 8px 10px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; border-bottom: 1px solid var(--border); }
.month-cell { min-height: 110px; padding: 6px; border-right: 1px solid #EEF2F4; border-bottom: 1px solid #EEF2F4; display: flex; flex-direction: column; gap: 4px; }
.month-cell.other { opacity: .45; }
.month-date { font-size: 12px; font-weight: 700; color: var(--muted); }
.month-cell.today .month-date { color: var(--navy); background: var(--lime); border-radius: 4px; padding: 0 5px; align-self: flex-start; }

.agenda { padding: 4px 0; }
.agenda-day { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; border-bottom: 1px solid #EEF2F4; }
.agenda-day:last-child { border-bottom: 0; }
.agenda-day.today { background: #FBFCEB; }
.agenda-date { font-weight: 700; font-size: 14px; }
.agenda-day.today .agenda-date::after { content: 'Today'; margin-left: 8px; background: var(--lime); color: var(--navy); font-size: 11px; padding: 1px 6px; border-radius: 4px; }

.scoreboard { margin-top: 20px; }
.scoreboard table.board { min-width: 680px; }
table.board { width: 100%; border-collapse: collapse; font-size: 14px; }
table.board th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--border); }
table.board td { padding: 10px 14px; border-bottom: 1px solid #EEF2F4; vertical-align: middle; }
table.board tr:last-child td { border-bottom: 0; }
.who { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.num { font-weight: 700; color: var(--muted); }
.num.ok { color: var(--posted); }
.num.warn { color: var(--warn); }
.num.bad { color: #fff; background: var(--late); border-radius: 999px; padding: 1px 9px; }
.next-link { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }
.next-link:hover { color: var(--cyan); }

/* ---------- plan ---------- */
.plan-title { display: flex; align-items: center; gap: 14px; }
.plan-title .avatar { width: 46px; height: 46px; font-size: 16px; box-shadow: none; }
.plan-title h1 { font-size: 24px; }
.plan-title p { margin: 2px 0 0; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.stat { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; }
.stat strong { font-size: 32px; line-height: 1.1; color: var(--navy); }
.stat span { color: var(--muted); font-size: 13px; }
.stat.ok strong { color: var(--posted); }
.stat.warn strong { color: var(--warn); }
.stat.bad { background: var(--late-bg); border-color: #F0C4C4; }
.stat.bad strong { color: var(--late); }
.plan-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; align-items: start; }
.plan-grid.single { grid-template-columns: 1fr; }
.plan-grid.voice-row { grid-template-columns: 1.2fr 1fr; }
.voice-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 8px; border-radius: 999px; background: #EEE9FD; color: #5236BD; font-size: 12px; font-weight: 700; }
.voice-pill .ico { width: 14px; height: 14px; }
.voice-empty { display: flex; flex-direction: column; gap: 18px; }
.voice-hero { display: flex; gap: 14px; align-items: flex-start; }
.voice-mark { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(140deg, #6A4FD8, #0195C6); color: #fff; }
.voice-mark .ico { width: 24px; height: 24px; }
.voice-hero h3 { font-size: 17px; color: var(--navy); }
.voice-hero p { margin: 6px 0 0; color: #33505C; font-size: 14.5px; }
.voice-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; counter-reset: vs; }
.voice-steps li { counter-increment: vs; display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: var(--bg); font-size: 13px; color: var(--muted); }
.voice-steps li::before { content: counter(vs); display: grid; place-items: center; width: 24px; height: 24px; margin-bottom: 6px; border-radius: 50%; background: #fff; border: 1px solid var(--border); color: var(--muted); font-weight: 700; font-size: 12px; }
.voice-steps li strong { color: var(--text); font-size: 13.5px; }
.voice-steps li.now { background: #F6F4FE; box-shadow: inset 0 0 0 1px #D7CEF9; }
.voice-steps li.now::before { background: #6A4FD8; border-color: #6A4FD8; color: #fff; }
.voice-steps li.done::before { content: '✓'; background: var(--posted); border-color: var(--posted); color: #fff; }
.voice-ghost { display: flex; flex-direction: column; gap: 9px; padding: 14px 16px; border-radius: 12px; border: 1px dashed #D7CEF9; background: repeating-linear-gradient(135deg, #FBFAFF, #FBFAFF 10px, #F7F5FE 10px, #F7F5FE 20px); }
.ghost-row { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #8E7BE6; }
.ghost-row b { flex: none; width: 130px; }
.ghost-line { height: 8px; border-radius: 99px; background: #E4DDFB; }
.ghost-line.w1 { width: 62%; } .ghost-line.w2 { width: 45%; } .ghost-line.w3 { width: 72%; }
.voice-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.voice-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.voice-text p { margin: 0 0 8px; }
.voice-rules { padding: 12px 14px; border-radius: 12px; background: var(--bg); }
.voice-rules ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
.voice-building { display: flex; align-items: center; gap: 14px; }
.voice-building > div { display: flex; flex-direction: column; }
.voice-building .mv-spinner { width: 24px; height: 24px; border-width: 3px; border-color: rgba(106, 79, 216, .2); border-top-color: #6A4FD8; }
@media (max-width: 720px) { .voice-steps { grid-template-columns: 1fr; } .ghost-row b { width: 110px; } }

/* ---------- modal & toast ---------- */
.overlay { position: fixed; inset: 0; background: rgba(0, 20, 28, .55); display: grid; place-items: center; padding: 16px; z-index: 50; }
.modal { background: #fff; border-radius: 14px; width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow: auto; padding: 0 22px 22px; }
.modal.wide { max-width: 860px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 0 12px; position: sticky; top: 0; background: #fff; }
.modal-head h2 { font-size: 18px; }
.modal h3 { font-size: 15px; margin-top: 8px; }
.secret { display: block; font-size: 20px; padding: 14px; background: var(--bg); border-radius: 8px; text-align: center; letter-spacing: .03em; user-select: all; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 10px; font-weight: 700; font-size: 14px;
  transition: opacity .2s, transform .2s; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.ok { background: var(--posted); }
.toast.error { background: var(--late); }

.empty { text-align: center; padding: 60px 16px; }
.empty p { color: var(--muted); }

/* ---------- AI ---------- */
.btn.ai { background: linear-gradient(135deg, var(--navy) 0%, #01506A 100%); color: #fff; }
.btn.ai:hover { background: var(--navy-2); }
.btn.ai::first-letter { color: var(--lime); }
.ai-panel { padding: 16px 18px; border-bottom: 1px solid var(--border); background: #F6FAFB; }
.settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; }
.settings-grid .span-all { grid-column: 1 / -1; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.check input { width: auto; }
.ai-pill { background: #EDE9FB; color: #5B3FC4; }
.card-hint { margin: 0; padding: 10px 18px 0; }
.page-title { font-size: 24px; }

.stats-form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.stats-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.stats-inputs { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.stat-input { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); width: 110px; }
.stat-input input { padding: 6px 8px; }

/* ---------- brief ---------- */
.brief-status { color: var(--muted); font-size: 14px; margin: 0 0 6px; }
.brief-status.running { color: var(--draft); font-weight: 700; }
.stories { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.story { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.story h3 { font-size: 18px; line-height: 1.35; }
.story .meta { margin: 0; color: var(--muted); font-size: 13px; }
.story-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rank { font-weight: 700; color: var(--muted); font-size: 13px; }
.score { background: var(--navy); color: var(--lime); font-weight: 700; border-radius: 8px; padding: 2px 9px; font-size: 14px; }
.score.small { font-size: 12px; padding: 1px 7px; }
.fit { display: flex; align-items: flex-start; gap: 8px; background: #F3F8FA; border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.story-more summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--navy); padding: 2px 0; }
.story-more .prose { margin-top: 6px; font-size: 14px; }
.draft-preview { white-space: pre-wrap; font-size: 14px; background: #FAFCFC; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-top: 6px; }
.story-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.story-add { border-top: 1px solid var(--border); padding-top: 12px; }
.clickable { cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.story.clickable:hover { border-color: #B9D9E6; box-shadow: 0 6px 20px rgba(0, 42, 56, .08); }
.archive-row.clickable:hover { background: #F6FAFB; }
.story-link { color: inherit; text-decoration: none; }
.story-link:hover { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.story-snippet { margin: 0; color: var(--text); font-size: 14px; }

.story-detail-head h1 { margin: 10px 0 8px; line-height: 1.3; }
.source-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: #F3F8FA; border: 1px solid #DCEBF1; border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.source-card strong { display: block; color: var(--navy); }
.source-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.story-view .prose h3 { font-size: 13px; margin: 18px 0 6px; }
.story-view .prose .fit { margin-top: 16px; }
.story-draft { margin-top: 0; font-size: 15px; line-height: 1.6; max-height: 560px; overflow-y: auto; background: #fff; }
.scheduled-list { display: flex; flex-direction: column; gap: 6px; }
.archive { margin-top: 12px; }
.archive-row { display: grid; grid-template-columns: 34px 46px 1fr auto; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid #EEF2F4; font-size: 14px; }
.archive-row:last-child { border-bottom: 0; }

/* ---------- stats ---------- */
.stats-view { display: flex; flex-direction: column; gap: 20px; }
.stats-view .toolbar { margin-bottom: 0; }
.stats-table tr.selected td { background: #F6F9DD; }
.li-link {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: #0A66C2; color: #fff;
  font-size: 11px; font-weight: 700; text-decoration: none; flex: none;
}
.li-line { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; max-width: 640px; }
.num.bad-text { color: var(--late); }
.followers-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.inline-form { display: inline-flex; gap: 8px; align-items: center; margin-left: auto; }
.inline-form input { width: auto; }
.inline-form input[type=number] { width: 150px; }
.ext { text-decoration: none; }

/* ---------- assistant ---------- */
.assistant-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 8px;
  background: var(--navy); color: #fff; border: 0; border-radius: 999px; padding: 12px 18px; font: inherit; font-weight: 700;
  cursor: pointer; box-shadow: 0 10px 30px rgba(0, 42, 56, .35);
}
.assistant-fab:hover { background: var(--navy-2); }
.assistant-fab .star { color: var(--lime); font-size: 18px; }
.as-panel {
  position: fixed; right: 16px; bottom: 16px; z-index: 45; width: 420px; max-width: calc(100vw - 32px);
  height: min(720px, calc(100vh - 92px)); background: #fff; border-radius: 16px; border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0, 20, 28, .3); display: flex; flex-direction: column; overflow: hidden;
}
.as-panel[hidden], .assistant-root[hidden], .assistant-fab[hidden] { display: none; }
.as-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--navy); color: #fff; }
.as-head strong { white-space: nowrap; }
.as-head .icon-btn { color: #fff; }
.as-chats { flex: 1; min-width: 0; padding: 5px 8px; font-size: 13px; }
.as-ctx { padding: 6px 14px; border-bottom: 1px solid var(--border); background: #F6FAFB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.as-msg { max-width: 92%; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.as-msg.user { align-self: flex-end; background: var(--navy); color: #fff; white-space: pre-wrap; border-bottom-right-radius: 4px; }
.as-msg.bot { align-self: flex-start; background: #F1F5F7; border-bottom-left-radius: 4px; }
.as-msg.bot p:last-child { margin-bottom: 0; }
.as-msg.error { align-self: flex-start; background: var(--late-bg); color: var(--late); }
.as-action { align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--posted); background: var(--posted-bg); border-radius: 8px; padding: 6px 10px; text-decoration: none; }
a.as-action:hover { text-decoration: underline; }
.as-typing { align-self: flex-start; }
.as-empty p { margin: 0 0 10px; font-size: 14px; }
.as-suggest { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pill-btn { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.pill-btn:hover { border-color: var(--cyan); }
.as-settings { border-top: 1px solid var(--border); padding: 8px 14px; font-size: 13px; }
.as-settings summary { cursor: pointer; font-weight: 700; color: var(--navy); }
.as-settings .settings-grid { grid-template-columns: 1fr 1fr; margin-top: 8px; }
.as-composer { display: flex; gap: 8px; padding: 10px 14px 14px; border-top: 1px solid var(--border); align-items: flex-end; }
.as-composer textarea { resize: none; max-height: 140px; }

/* ---------- material ---------- */
.ico { display: inline-flex; width: 18px; height: 18px; flex: none; }
.ico svg { width: 100%; height: 100%; display: block; }
.ico.gold { color: #E0A800; }
.ico.gold svg path, .mat-pin svg path, .mat-lstar svg path { fill: currentColor; }
.btn.lime { background: var(--lime); color: var(--navy); }
.btn.lime:hover { background: #E7EC6E; }
.btn.big { padding: 11px 20px; font-size: 15px; border-radius: 10px; }

/* collection colours: --c1/--c2 gradient, --ci text on it */
.c-ink { --c1: #0B2733; --c2: #01506A; --ci: #fff; }
.c-navy { --c1: #002A38; --c2: #02607F; --ci: #fff; }
.c-cyan { --c1: #0181AD; --c2: #2EB6E3; --ci: #fff; }
.c-lime { --c1: #C2C82A; --c2: #E3E76A; --ci: #002A38; }
.c-violet { --c1: #5236BD; --c2: #8B70EA; --ci: #fff; }
.c-coral { --c1: #CF4136; --c2: #F2866C; --ci: #fff; }
.c-teal { --c1: #0B766C; --c2: #27B09F; --ci: #fff; }
.c-amber { --c1: #D18708; --c2: #F4C04E; --ci: #2B1D00; }
.c-slate { --c1: #4F5F67; --c2: #8798A0; --ci: #fff; }
/* file type colours */
.k-deck { --kc: #D04423; } .k-pdf { --kc: #D7262B; } .k-doc { --kc: #2B66C5; } .k-sheet { --kc: #1C7C45; }
.k-image { --kc: #7A4ED5; } .k-video { --kc: #D2336B; } .k-other { --kc: #5B6B73; }

.material { display: flex; flex-direction: column; gap: 22px; }
.mat-hero {
  border-radius: 20px; padding: 28px 30px 22px; color: #fff;
  background:
    radial-gradient(520px 240px at 92% -30%, rgba(220, 226, 75, .30), transparent 70%),
    radial-gradient(560px 300px at -5% 130%, rgba(1, 149, 198, .55), transparent 70%),
    linear-gradient(135deg, #00222E 0%, #01455C 100%);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 28px; align-items: center;
  box-shadow: 0 18px 40px -24px rgba(0, 42, 56, .8);
}
.mat-hero h1 { font-size: 34px; letter-spacing: -.01em; }
.mat-hero p { margin: 6px 0 0; color: rgba(255, 255, 255, .78); max-width: 560px; }
.mat-hero-tools { display: flex; gap: 10px; align-items: center; }
.mat-search {
  display: flex; align-items: center; gap: 8px; flex: 1 1 240px; max-width: 420px; padding: 0 12px; border-radius: 10px;
  background: #fff; border: 1px solid var(--border); color: var(--muted); transition: border-color .15s, box-shadow .15s;
}
.mat-search:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(1, 149, 198, .15); }
.mat-search input { border: 0; background: transparent; padding: 9px 0; color: var(--text); }
.mat-search input:focus { outline: none; }
.mat-hero-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.mat-hero-stats > span { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 3px 12px; font-size: 13px; color: rgba(255, 255, 255, .85); }
.mat-hero-stats strong { color: var(--lime); }
.mat-hero-stats .mat-hint { background: none; color: rgba(255, 255, 255, .6); }
.mat-hint .ico { width: 15px; height: 15px; }

/* collection tiles */
.mat-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }
.mat-col-wrap { position: relative; }
.mat-col {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 136px; padding: 14px 16px;
  border-radius: 18px; color: var(--ci); text-decoration: none; overflow: hidden; isolation: isolate;
  background: linear-gradient(140deg, var(--c1) 0%, var(--c2) 100%);
  box-shadow: 0 1px 2px rgba(0, 42, 56, .08), 0 10px 22px -14px var(--c1);
  transition: transform .15s, box-shadow .15s;
}
.mat-col::after { /* soft shine */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(180px 120px at 100% 0%, rgba(255, 255, 255, .22), transparent 70%);
}
a.mat-col:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -16px var(--c1); }
.mat-col.active { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--c1), 0 18px 30px -16px var(--c1); }
.mat-col.drop, body.mat-moving .mat-col.drop { transform: scale(1.04); box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--lime), 0 20px 34px -14px var(--c1); }
body.mat-moving .mat-col[data-col]:not([data-col="all"]) { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px rgba(1, 149, 198, .45); }
.mat-col-top { display: flex; justify-content: space-between; align-items: flex-start; }
.mat-col-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .18); }
.c-lime .mat-col-icon, .c-amber .mat-col-icon { background: rgba(0, 42, 56, .1); }
.mat-col-icon .ico { width: 22px; height: 22px; }
.mat-col-foot { display: flex; flex-direction: column; position: relative; z-index: 4; }
.mat-col-name { font-size: 16px; line-height: 1.2; }
.mat-col-meta { font-size: 13px; opacity: .8; }
.mat-col-covers { position: absolute; top: 12px; right: 10px; width: 96px; height: 66px; pointer-events: none; }
.mat-col-covers img {
  position: absolute; top: 0; right: 0; width: 66px; height: 40px; object-fit: cover; object-position: top;
  border-radius: 5px; border: 2px solid #fff; background: #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, .28); transition: transform .2s;
}
.mat-col-covers .cv0 { z-index: 3; transform: translate(-6px, 16px) rotate(-3deg); }
.mat-col-covers .cv1 { z-index: 2; transform: translate(-22px, 6px) rotate(-11deg); }
.mat-col-covers .cv2 { z-index: 1; transform: translate(4px, 0) rotate(7deg); }
a.mat-col:hover .cv1 { transform: translate(-32px, 4px) rotate(-16deg); }
a.mat-col:hover .cv2 { transform: translate(8px, -4px) rotate(12deg); }
.mat-col-edit {
  position: absolute; right: 10px; bottom: 10px; z-index: 5; width: 30px; height: 30px; border-radius: 9px; border: 0;
  background: rgba(255, 255, 255, .22); color: var(--ci); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .15s;
}
.mat-col-edit .ico { width: 16px; height: 16px; }
.mat-col-wrap:hover .mat-col-edit, .mat-col-edit:focus-visible { opacity: 1; }
.mat-col.new {
  width: 100%; background: transparent; border: 2px dashed #B6C6CD; color: var(--muted); box-shadow: none;
  align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 700; cursor: pointer;
}
.mat-col.new::after { display: none; }
.mat-col.new:hover { border-color: var(--cyan); color: var(--cyan); }
.mat-col.new .ico { width: 26px; height: 26px; }

/* results */
.mat-results { display: flex; flex-direction: column; gap: 26px; }
.mat-section { display: flex; flex-direction: column; gap: 14px; }
.mat-section-head { display: flex; align-items: baseline; gap: 12px; }
.mat-section-head h2 { display: inline-flex; align-items: center; gap: 8px; font-size: 19px; color: var(--navy); }
.mat-bar { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.mat-bar-title { min-width: 0; }
.mat-bar-title { display: flex; align-items: center; gap: 12px; }
.mat-bar-title h2 { font-size: 22px; color: var(--navy); }
.mat-col-badge { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: var(--ci); background: linear-gradient(140deg, var(--c1), var(--c2)); flex: none; }
.mat-col-badge .ico { width: 23px; height: 23px; }
.mat-bar-tools { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.mat-sort { min-width: 0; }
.mat-view button { display: inline-flex; align-items: center; gap: 6px; }
.mat-view .ico { width: 16px; height: 16px; }
.mat-kinds { display: flex; gap: 8px; flex-wrap: wrap; }
.mat-kind {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; font: inherit; font-size: 14px; font-weight: 700; color: var(--text); cursor: pointer;
}
.mat-kind span { min-width: 22px; text-align: center; background: var(--bg); color: var(--muted); border-radius: 999px; padding: 0 7px; font-size: 12px; }
.mat-kind:hover { border-color: var(--cyan); }
.mat-kind.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.mat-kind.on span { background: rgba(255, 255, 255, .18); color: #fff; }

/* cards */
.mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 20px; }
.mat-grid.featured { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.mat-card {
  --kc: #5B6B73; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.mat-card:hover, .mat-card:focus-visible { transform: translateY(-3px); border-color: #C6DAE2; box-shadow: 0 18px 36px -18px rgba(0, 42, 56, .45); outline: none; }
.mat-card.big { border-radius: 18px; }
.mat-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(160deg, #EEF3F5, #E1E9ED); }
.mat-visual { position: absolute; inset: 0; display: grid; place-items: center; }
.mat-visual > * { grid-area: 1 / 1; }
.mat-visual img, .mat-visual video { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .35s ease; }
.mat-card:hover .mat-visual img { transform: scale(1.035); }
.mat-visual.portrait { place-items: start center; padding-top: 16px; }
.mat-visual.portrait img { width: 58%; height: auto; border-radius: 4px; box-shadow: 0 10px 26px rgba(0, 42, 56, .28); }
.mat-card:hover .mat-visual.portrait img { transform: translateY(-4px); }
.mat-visual.empty { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--kc) 13%, #fff), color-mix(in srgb, var(--kc) 7%, #EEF3F5)); }
.mat-visual.pending::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  background-size: 220% 100%; animation: mat-shimmer 1.4s infinite linear;
}
@keyframes mat-shimmer { from { background-position: 160% 0; } to { background-position: -60% 0; } }
.mat-visual.pending { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.mat-pending { font-size: 12px; font-weight: 700; color: var(--muted); }
.mat-play { width: 54px; height: 54px; border-radius: 50%; background: rgba(0, 26, 36, .62); color: #fff; display: grid; place-items: center; backdrop-filter: blur(4px); }
.mat-play .ico { width: 22px; height: 22px; margin-left: 3px; }
.mat-type, .mat-typechip { background: var(--kc); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: 3px 8px; border-radius: 6px; }
.mat-badges { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; align-items: center; }
.mat-type { box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.mat-internal {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 6px;
  background: #FFF4D6; color: #8A5A00; font-size: 11px; font-weight: 700; letter-spacing: .02em; box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.mat-internal .ico { width: 13px; height: 13px; }
.mat-internal.small { box-shadow: none; padding: 1px 7px 1px 5px; }
.internal-note, .locked-note {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px;
  background: #FFF6DF; border: 1px solid #F3DB9E; color: #6E4A00; font-size: 13.5px;
}
.internal-note > div, .locked-note > div { display: flex; flex-direction: column; flex: 1; }
.internal-note .ico, .locked-note .ico { width: 22px; height: 22px; color: #B7791F; margin-top: 1px; }
.internal-note.big { font-size: 15px; }
.internal-note.big .ico { width: 30px; height: 30px; }
.internal-text { margin: 0; }
.locked-note { background: #EEF2F4; border-color: #D5DEE2; color: var(--text); }
.locked-note .ico { color: var(--navy); }
.locked-pill {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; vertical-align: middle; padding: 2px 10px 2px 8px;
  border-radius: 999px; background: #EEF2F4; color: var(--navy); font-size: 12px; font-weight: 700; letter-spacing: 0;
}
.locked-pill .ico { width: 14px; height: 14px; }
.mat-col-lock { display: grid; place-items: center; width: 26px; height: 26px; margin: 7px auto 0 8px; border-radius: 50%; background: rgba(0, 0, 0, .22); }
.c-lime .mat-col-lock, .c-amber .mat-col-lock { background: rgba(0, 42, 56, .14); }
.mat-col-lock .ico { width: 14px; height: 14px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.mat-pin { position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; border-radius: 50%; background: var(--lime); color: var(--navy); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.mat-pin .ico { width: 15px; height: 15px; }
.mat-pages { position: absolute; left: 10px; bottom: 10px; background: rgba(0, 26, 36, .74); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; backdrop-filter: blur(4px); }
.mat-quick { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s; }
.mat-card:hover .mat-quick, .mat-card:focus-within .mat-quick { opacity: 1; transform: none; }
.mat-qbtn {
  width: 36px; height: 36px; border-radius: 10px; border: 0; background: #fff; color: var(--navy); cursor: pointer;
  display: grid; place-items: center; text-decoration: none; box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}
.mat-qbtn:hover { background: var(--lime); }
.mat-card-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; }
.mat-card-title { font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mat-card.big .mat-card-title { font-size: 18px; }
.mat-card-desc { margin: 0; font-size: 13px; color: var(--muted); }
.mat-card-meta { margin-top: auto; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); min-width: 0; }
.mat-card-meta .sep { opacity: .5; }
.mat-meta-col { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mat-card-meta .when { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mat-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; background: linear-gradient(140deg, var(--c1), var(--c2)); }

/* big file icon when there is no picture */
.ficon-sheet {
  position: relative; width: 76px; height: 96px; border-radius: 7px 22px 7px 7px; background: #fff; color: var(--kc);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  box-shadow: 0 10px 24px -8px rgba(0, 42, 56, .35);
}
.ficon-sheet::before {
  content: ''; position: absolute; right: 0; top: 0; width: 22px; height: 22px; border-radius: 0 0 0 7px;
  background: linear-gradient(225deg, transparent 50%, color-mix(in srgb, var(--kc) 22%, #fff) 50%);
}
.ficon-glyph { width: 34px; height: 34px; }
.ficon-ext { background: var(--kc); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: 2px 7px; border-radius: 4px; }

/* list view */
.mat-list { overflow-x: auto; }
.mat-table { min-width: 820px; }
.mat-table td { padding: 8px 14px; }
.mat-table tbody tr { cursor: pointer; }
.mat-table tbody tr:hover td { background: #F5F9FA; }
.mat-table .c0 { width: 96px; }
.mat-table .c7 { width: 100px; }
.mat-lthumb {
  width: 76px; height: 44px; border-radius: 7px; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--kc) 12%, #fff); color: var(--kc); font-size: 11px; font-weight: 700;
}
.mat-lthumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mat-lname { display: flex; align-items: center; gap: 6px; }
.mat-lstar { width: 15px; height: 15px; color: #E0A800; }
.mat-colchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--bg); color: var(--text); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
a.mat-colchip:hover { background: #E3EDF1; }
.mat-lactions { display: flex; gap: 6px; justify-content: flex-end; }
.mat-lactions .mat-qbtn { width: 34px; height: 34px; box-shadow: none; border: 1px solid var(--border); }

.mat-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 52px 20px; text-align: center;
  border: 2px dashed #C3D2D8; border-radius: 20px; background: #fff;
}
.mat-empty h3 { font-size: 19px; color: var(--navy); }
.mat-empty p { margin: 0; max-width: 460px; }
.mat-empty .ico.big { width: 46px; height: 46px; color: var(--cyan); }

/* drag files in */
.mat-dropzone {
  position: fixed; inset: 10px; z-index: 49; pointer-events: none; border: 3px dashed var(--lime); border-radius: 24px;
  background: rgba(0, 42, 56, .14); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 36px;
}
.mat-dropzone[hidden] { display: none; }
.mat-drop-msg { display: flex; align-items: center; gap: 12px; background: var(--navy); color: #fff; font-size: 17px; font-weight: 700; padding: 14px 22px; border-radius: 999px; box-shadow: 0 16px 40px rgba(0, 20, 28, .45); }
.mat-drop-msg .ico { width: 26px; height: 26px; color: var(--lime); }

/* upload queue */
.up-panel { position: fixed; left: 20px; bottom: 20px; z-index: 47; width: 360px; max-width: calc(100vw - 40px); background: #fff; border-radius: 14px; border: 1px solid var(--border); box-shadow: 0 20px 50px rgba(0, 20, 28, .3); overflow: hidden; }
.up-panel[hidden] { display: none; }
.up-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 14px; background: var(--navy); color: #fff; }
.up-head .ico { color: var(--lime); }
.up-head .icon-btn { color: #fff; font-size: 22px; }
.up-list { max-height: 280px; overflow-y: auto; padding: 6px 0; }
.up-row { display: flex; flex-direction: column; gap: 6px; padding: 8px 14px; }
.up-name { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; }
.up-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-status { flex: none; font-weight: 400; color: var(--muted); max-width: 55%; text-align: right; }
.up-track { height: 5px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.up-bar { display: block; width: 0; height: 100%; background: var(--cyan); transition: width .2s; }
.up-row.ok .up-bar { background: var(--posted); }
.up-row.ok .up-status { color: var(--posted); }
.up-row.bad .up-bar { background: var(--late); }
.up-row.bad .up-status { color: var(--late); }

/* viewer */
body.mv-open { overflow: hidden; }
.mv-overlay { position: fixed; inset: 0; z-index: 46; display: flex; padding: 18px; background: rgba(0, 16, 22, .9); backdrop-filter: blur(10px); }
.mv { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; min-height: 0; }
.mv-stage { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.mv-top { display: flex; align-items: center; gap: 12px; color: #fff; }
.mv-title { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-count { font-weight: 700; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mv-close { width: 42px; height: 42px; flex: none; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #fff; display: grid; place-items: center; cursor: pointer; }
.mv-close:hover { background: rgba(255, 255, 255, .2); }
.mv-close .ico { width: 22px; height: 22px; }
.mv-canvas { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; }
.mv-canvas > .mv-img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; border-radius: 8px; background: #fff; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
.mv-canvas > video.mv-img { background: #000; width: 100%; height: 100%; }
.mv-nav {
  position: absolute; top: 50%; z-index: 2; width: 50px; height: 50px; margin-top: -25px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: var(--navy); display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
}
.mv-nav:hover { background: var(--lime); }
.mv-nav.prev { left: 12px; } .mv-nav.next { right: 12px; }
.mv-nav:disabled { opacity: 0; pointer-events: none; }
.mv-nav .ico { width: 24px; height: 24px; }
.mv-strip { flex: none; display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
.mv-tn {
  position: relative; flex: none; width: 108px; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; border-radius: 8px; background: #1F323A; opacity: .55; transition: opacity .15s, border-color .15s;
}
.mv-tn img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mv-tn span { position: absolute; left: 4px; bottom: 3px; padding: 0 5px; border-radius: 4px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 10px; font-weight: 700; }
.mv-tn:hover { opacity: .9; }
.mv-tn.on { opacity: 1; border-color: var(--lime); }
.mv-nopreview { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 400px; color: rgba(255, 255, 255, .82); text-align: center; }
.mv-nopreview p { margin: 0; }
.mv-nopreview .ficon-sheet { width: 124px; height: 156px; }
.mv-nopreview .ficon-glyph { width: 54px; height: 54px; }
.mv-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .2); border-top-color: var(--lime); animation: mv-spin 1s linear infinite; }
@keyframes mv-spin { to { transform: rotate(360deg); } }
.mv-side { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 18px; background: #fff; overflow-y: auto; }
.mv-side .mat-colchip { align-self: flex-start; }
.mv-name { font-size: 22px; line-height: 1.25; color: var(--navy); }
.mv-desc { margin: 0; font-size: 14px; white-space: pre-wrap; }
.mv-add { align-self: flex-start; padding: 0; color: var(--cyan); font-size: 14px; text-align: left; }
.mv-tag { font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.mv-tag:hover { border-color: var(--cyan); color: var(--cyan); }
.mv-actions { display: flex; flex-direction: column; gap: 8px; }
.mv-actions .btn.block { justify-content: flex-start; padding: 12px 14px; }
.mv-size { margin-left: auto; font-weight: 400; font-size: 13px; opacity: .75; }
.mv-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.mv-facts { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 0; padding: 14px 0; font-size: 13.5px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.mv-facts dt { color: var(--muted); }
.mv-facts dd { margin: 0; font-weight: 700; word-break: break-word; }
.mv-manage { display: flex; flex-direction: column; gap: 8px; }
.mv-manage-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.mv-manage-btns .ico, .mv-row .ico { width: 16px; height: 16px; }

/* collection editor */
.col-form { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 20px; align-items: start; }
.col-sample { position: sticky; top: 60px; }
.swatches, .icon-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch-btn { width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer; background: linear-gradient(140deg, var(--c1), var(--c2)); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--border); }
.swatch-btn.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy); }
.icon-pick { width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--navy); cursor: pointer; display: grid; place-items: center; }
.icon-pick:hover { border-color: var(--cyan); }
.icon-pick.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.icon-pick .ico { width: 20px; height: 20px; }

/* ---------- upload box ---------- */
.ub-zone {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px 20px; text-align: center; cursor: pointer;
  border: 2px dashed #B9CBD2; border-radius: 16px; background: #F7FAFB; color: var(--text); transition: border-color .15s, background .15s;
}
.ub-zone:hover, .ub-zone:focus-visible { border-color: var(--cyan); background: #F0F8FB; outline: none; }
.ub-zone.over { border-color: var(--lime); background: #FBFCE9; }
.ub-zone .ub-icon { width: 40px; height: 40px; color: var(--cyan); margin-bottom: 4px; }
.ub-zone strong { font-size: 17px; color: var(--navy); }
.ub-zone.compact { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
.ub-zone.compact .ub-icon { width: 22px; height: 22px; margin: 0; }
.ub-zone.compact strong { font-size: 14px; }
.ub-list { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.ub-list:empty { display: none; }
.ub-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.ub-row .mat-typechip { margin-top: 9px; flex: none; }
.ub-row.bad { background: var(--late-bg); border-color: #F0C4C4; }
.ub-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ub-fields input { font-weight: 700; }
.ub-hint { overflow-wrap: anywhere; }
.ub-problem { color: var(--late); font-size: 13px; font-weight: 700; }
.ub-options { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: end; }
.stack.tight { gap: 4px; }
.modal.nudge { animation: nudge .35s ease; }
@keyframes nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

/* ---------- the ✦ bubble in the draft box ---------- */
.draft-wrap { position: relative; flex: 1; display: flex; flex-direction: column; }
.draft-wrap .draft { flex: 1; padding-bottom: 62px; }
.ai-bubble { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.bubble-pill { display: inline-flex; overflow: hidden; border-radius: 999px; background: var(--navy); box-shadow: 0 10px 24px -8px rgba(0, 42, 56, .55); transition: background .2s; }
.ai-bubble[data-mode="selection"] .bubble-pill { background: var(--cyan); }
.bubble-main, .bubble-more { border: 0; background: none; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.bubble-main { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px 8px 14px; font-size: 13.5px; }
.bubble-main .star { color: var(--lime); font-size: 15px; }
.bubble-more { padding: 0 11px; font-size: 12px; border-left: 1px solid rgba(255, 255, 255, .2); }
.bubble-main:hover, .bubble-more:hover { background: rgba(255, 255, 255, .12); }
.ai-bubble.busy .bubble-main, .ai-bubble.busy .bubble-more { cursor: progress; }
.ai-bubble.busy .star { display: inline-block; animation: pulse-star 1s ease-in-out infinite; }
.bubble-menu {
  display: flex; flex-direction: column; gap: 8px; width: min(320px, calc(100vw - 80px)); padding: 10px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(0, 20, 28, .4);
}
.bubble-menu[hidden] { display: none; }
.bubble-tweaks { display: flex; flex-wrap: wrap; gap: 6px; }
.bubble-tweaks:empty { display: none; }
.bubble-custom { display: flex; gap: 6px; }
.bubble-custom input { padding: 6px 9px; font-size: 13px; }

/* ---------- post tab: rail, composer, scheduling ---------- */

.composer .post-head p { margin: 4px 0 0; max-width: 760px; }
.prompt-field > span { font-size: 15px; color: var(--navy); }
.prompt-input { min-height: 150px; font-size: 16px; line-height: 1.5; }
.starters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.format-row { max-width: 240px; }
.compose-more { border: 1px solid var(--border); border-radius: 10px; background: #FAFCFC; }
.compose-more > summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 14px; cursor: pointer; font-weight: 700; color: var(--navy); }
.compose-more[open] > summary { border-bottom: 1px solid var(--border); }
.compose-more > .stack, .compose-more > .settings-grid { padding: 14px; }
.kb-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed #C9D6DC; border-radius: 10px; background: #fff; cursor: default; }
.kb-row input { width: auto; }
.kb-row > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; }
.kb-row.off strong { color: var(--muted); }
.soon { flex: none; padding: 2px 9px; border-radius: 999px; background: #F3F6C2; color: var(--today); font-size: 11px; font-weight: 700; }
.prompt-actions { margin-top: 16px; }
.draft-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 380px;
  padding: 30px 24px; text-align: center; color: var(--muted); border: 2px dashed var(--border); border-radius: 12px;
}
.draft-empty strong { color: var(--navy); font-size: 17px; }
.draft-empty span:last-child { max-width: 340px; }
.big-star { font-size: 42px; line-height: 1; color: var(--cyan); }
.draft-empty.writing { border-color: #A9DCEF; background: #F4FAFD; }
.draft-empty.writing .big-star { animation: pulse-star 1.2s ease-in-out infinite; }
@keyframes pulse-star { 0%, 100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.25); opacity: 1; } }
.draft.is-writing { opacity: .5; }
.schedule-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; background: var(--unscheduled-bg); }
.schedule-row input { width: auto; }
.schedule-label { font-weight: 700; color: var(--unscheduled); margin-right: 4px; }
.schedule-row strong { color: var(--navy); }
.rename-form { display: flex; gap: 8px; margin-bottom: 8px; }
.rename-form input { font-size: 20px; font-weight: 700; }
.suggest-ai { display: flex; align-items: flex-end; gap: 10px; }
.suggest-ai .field { flex: 1; }
.team-table td { vertical-align: middle; }
.team-table th, .team-table td { padding-left: 8px; padding-right: 8px; }
.team-table .who > span:not(.avatar) { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.team-table .pill.invited { margin-left: 0; font-size: 11px; padding: 1px 8px; }
.team-actions { display: flex; gap: 6px; justify-content: flex-end; }
.team-table tr.editing td { background: #F6FAFB; }
.team-edit-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.no-email { color: var(--warn); font-weight: 700; }
.mail-status { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--posted-bg); border: 1px solid #B8E3C9; }
.mail-status > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mail-status strong { color: var(--posted); }
.mail-status.off { background: #EEF2F4; border-color: var(--border); }
.mail-status.off strong { color: var(--text); }

/* ---------- post states: one colour each ---------- */
.st-creation { --sc: #66767E; --sb: #EEF2F4; }
.st-drafting { --sc: #0179A1; --sb: #DDF1F9; }
.st-scoring { --sc: #6A4FD8; --sb: #EEE9FD; }
.st-review { --sc: #B86B00; --sb: #FFF1DB; }
.st-scheduled { --sc: #0B766C; --sb: #DBF3EF; }
.st-posted { --sc: #1A8048; --sb: #DDF3E6; }
.stage-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--sb); color: var(--sc); font-size: 12px; font-weight: 700; white-space: nowrap; }
.stage-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sc); }

/* ---------- post tab: list | post | state ---------- */
.post-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.post-main { min-width: 0; }
.post-main .post-view { display: flex; flex-direction: column; gap: 16px; }
.post-main .post-head { margin-bottom: 0; }
.post-main .toolbar { margin-bottom: 0; }
.post-rail, .post-panel { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; }
.post-rail { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.post-rail > summary { display: none; }
.rail-body { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.rail-person { width: 100%; }
.rail-section { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; }
.rail-head { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; border-radius: 8px; background: var(--sb); }
.rail-stage { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sc); }
.rail-section.none .rail-head { background: transparent; }
.rail-section.none .rail-stage { color: var(--muted); opacity: .7; }
.rail-count { min-width: 22px; text-align: center; padding: 0 7px; border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--muted); font-size: 12px; font-weight: 700; }
.rail-item { display: flex; align-items: flex-start; gap: 9px; padding: 7px 8px; border-radius: 8px; color: var(--text); text-decoration: none; }
.rail-item:hover { background: #F3F7F9; }
.rail-item.on { background: #E9F4F8; box-shadow: inset 3px 0 0 var(--cyan); }
.rail-item .avatar { margin-top: 1px; }
.rail-dot { flex: none; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--sc); }
.rail-stage .rail-dot { margin-top: 0; }
.rail-text { display: flex; flex-direction: column; min-width: 0; }
.rail-title { font-size: 14px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rail-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.rail-late { color: #fff; background: var(--late); border-radius: 4px; padding: 0 5px; font-weight: 700; font-size: 11px; }
.rail-score { border-radius: 4px; padding: 0 5px; font-weight: 700; font-size: 11px; color: #fff; }
.rail-score.good { background: var(--posted); } .rail-score.ok { background: var(--warn); } .rail-score.low { background: var(--late); }
.rail-more { padding: 4px 8px; font-size: 13px; font-weight: 700; text-decoration: none; }

.brief-card > summary { display: flex; align-items: baseline; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.brief-card > summary::-webkit-details-marker { display: none; }
.brief-card > summary::before { content: '▸'; color: var(--muted); font-size: 12px; transition: transform .15s; }
.brief-card[open] > summary::before { transform: rotate(90deg); }
.brief-card > summary h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--navy); }
.brief-card[open] > summary { border-bottom: 1px solid var(--border); }
.brief-card[open] .brief-peek { display: none; }
.brief-peek { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.brief-tools { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.draft-card { min-height: 0; }
.draft-card .draft { min-height: 420px; }

.post-panel { display: flex; flex-direction: column; }
.stage-panel { display: flex; flex-direction: column; gap: 14px; padding: 16px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.panel-head h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--navy); }
.stepper { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.step { position: relative; display: flex; gap: 10px; padding-bottom: 12px; }
.step:last-child { padding-bottom: 0; }
.step:not(:last-child)::after { content: ''; position: absolute; left: 11px; top: 24px; bottom: 2px; width: 2px; background: var(--border); }
.step.done:not(:last-child)::after { background: var(--sc); opacity: .45; }
.step-dot {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; z-index: 1;
  background: #fff; border: 2px solid var(--border); color: var(--muted); font-size: 11px; font-weight: 700;
}
.step.done .step-dot { background: var(--sb); border-color: var(--sc); color: var(--sc); }
.step.current .step-dot { background: var(--sc); border-color: var(--sc); color: #fff; box-shadow: 0 0 0 4px var(--sb); }
.step-text { display: flex; flex-direction: column; padding-top: 2px; }
.step-text strong { font-size: 14px; color: var(--muted); }
.step.done .step-text strong { color: var(--text); font-weight: 400; }
.step.current .step-text strong { color: var(--sc); }
.step-text span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.stage-act { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: var(--sb); border: 1px solid color-mix(in srgb, var(--sc) 25%, #fff); }
.stage-act > p { margin: 0; font-size: 14px; }
.slot-big { font-size: 18px; font-weight: 700; color: var(--sc); }
.act-row { display: flex; flex-wrap: wrap; gap: 6px; }
.slot-row { display: flex; gap: 6px; }
.stage-panel .slot-row { flex-direction: column; }
.slot-row input { min-width: 0; }
.approve-form { padding-bottom: 10px; border-bottom: 1px dashed color-mix(in srgb, var(--sc) 35%, #fff); }
.post-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }
.post-facts dt { color: var(--muted); }
.post-facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.admin-box { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }

/* the AI editor's score */
.score-card { --tone: var(--warn); display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid var(--border); }
.score-card.good { --tone: var(--posted); } .score-card.low { --tone: var(--late); }
.score-card.no-score p { margin: 0; font-size: 14px; }
.score-top { display: flex; align-items: center; gap: 12px; }
.score-num { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 4px solid var(--tone); color: var(--tone); font-size: 19px; font-weight: 700; }
.score-top > div { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.stale { color: var(--warn); font-size: 12px; font-weight: 700; }
.score-bars { display: flex; flex-direction: column; gap: 5px; }
.score-bar { display: grid; grid-template-columns: 104px 1fr 18px; align-items: center; gap: 8px; font-size: 12.5px; }
.bar-name { color: var(--muted); }
.bar { height: 6px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.bar .fill { display: block; height: 100%; border-radius: 999px; background: var(--warn); }
.bar .fill.good { background: var(--posted); } .bar .fill.low { background: var(--late); }
.score-bar b { text-align: right; }
.score-more > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--navy); }
.tells, .fixes { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.tells li { display: flex; flex-direction: column; gap: 2px; }
.tells q { font-style: italic; }
.tell-pattern { align-self: flex-start; padding: 0 7px; border-radius: 4px; background: var(--sb); color: var(--sc); font-size: 11px; font-weight: 700; }
.tell-fix { color: var(--posted); }
.score-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pill-btn.human { border-color: #CFC4F5; color: #5236BD; font-weight: 700; }

/* schedule: states as filters, chips in their state colour, the side drawer */
.state-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.state-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 7px 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; opacity: .65; }
.state-chip .chip-dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--sc); }
.state-chip.on { background: var(--sb); border-color: color-mix(in srgb, var(--sc) 35%, #fff); color: var(--sc); opacity: 1; }
.state-chip.on .chip-dot { background: var(--sc); }
.state-chip .chip-count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .8); color: var(--muted); font-size: 11.5px; text-align: center; }
.legend-note { margin-left: auto; }
.chip[class*="st-"] { background: var(--sb); border-color: color-mix(in srgb, var(--sc) 30%, #fff); }
.chip[class*="st-"] .chip-time { color: var(--sc); }
.chip.tentative { border-style: dashed; border-color: color-mix(in srgb, var(--sc) 55%, #fff); background: color-mix(in srgb, var(--sb) 55%, #fff); }
.chip.late { box-shadow: inset 4px 0 0 var(--late); }
.chip.selected { outline: 2px solid var(--sc); outline-offset: 1px; }
.chip-stage { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--sc); }
.sched-drawer {
  position: fixed; top: 60px; right: 0; bottom: 0; z-index: 30; width: 400px; max-width: 100vw; overflow-y: auto;
  background: #fff; border-left: 1px solid var(--border); box-shadow: -18px 0 40px -20px rgba(0, 20, 28, .35); animation: drawer-in .18s ease;
}
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-inner { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 90px; }
.drawer-head { display: flex; align-items: center; gap: 8px; }
.drawer-title { font-size: 20px; line-height: 1.3; color: var(--navy); }
.mini-steps { display: flex; gap: 4px; }
.mini-step { flex: 1; height: 6px; border-radius: 999px; background: var(--bg); }
.mini-step.done { background: color-mix(in srgb, var(--sc) 45%, #fff); }
.mini-step.current { background: var(--sc); }
.drawer-section { display: flex; flex-direction: column; gap: 6px; }
.drawer-section h3 { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.small-prose { font-size: 13.5px; }
.small-prose p, .small-prose ul { margin-bottom: 6px; }
.drawer-draft { white-space: pre-wrap; font-size: 13.5px; padding: 10px 12px; border-radius: 8px; background: #FAFCFC; border: 1px solid var(--border); }
.drawer-score { display: flex; align-items: center; gap: 12px; font-size: 13.5px; --tone: var(--warn); }
.drawer-score.good { --tone: var(--posted); } .drawer-score.low { --tone: var(--late); }

/* ---------- small screens ---------- */
@media (max-width: 1240px) and (min-width: 961px) {
  .post-layout { grid-template-columns: minmax(0, 1fr) 290px; }
  .post-rail { grid-column: 1 / -1; position: static; max-height: none; }
  .post-rail > summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; cursor: pointer; font-weight: 700; color: var(--navy); }
  .post-rail[open] > summary { border-bottom: 1px solid var(--border); }
  .post-rail .rail-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .post-rail .rail-body > .select, .post-rail .rail-body > .btn { grid-column: span 1; }
}
@media (max-width: 960px) {
  .two-col, .plan-grid, .plan-grid.voice-row { grid-template-columns: 1fr; }
  .box { min-height: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .row4 { grid-template-columns: repeat(2, 1fr); }
  .mat-hero { grid-template-columns: 1fr; }
  .sched-drawer { width: 100vw; }
  .post-layout { grid-template-columns: 1fr; gap: 14px; }
  .post-rail, .post-panel { position: static; max-height: none; }
  .post-rail > summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; cursor: pointer; font-weight: 700; color: var(--navy); }
  .post-rail[open] > summary { border-bottom: 1px solid var(--border); }
  .mat-hero-tools { width: 100%; }
  .mat-search { flex: 1; width: auto; }
  .mv { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 720px) {
  .topbar { height: auto; flex-wrap: wrap; padding: 10px 16px; gap: 8px 14px; }
  .tabs { order: 3; width: 100%; height: 40px; overflow-x: auto; scrollbar-width: none; }
  .settings-grid { grid-template-columns: 1fr 1fr; }
  .as-panel { right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 100%; border-radius: 0; }
  .assistant-fab { right: 14px; bottom: 14px; padding: 0; width: 52px; height: 52px; justify-content: center; }
  .assistant-fab span:not(.star) { display: none; }
  .box-head { flex-wrap: wrap; }
  .save-state { white-space: nowrap; font-size: 12px; }
  .inline-form { margin-left: 0; }
  .archive-row { grid-template-columns: 30px 40px 1fr; }
  .archive-row > :last-child { grid-column: 3; }
  .tab { padding: 0 12px; }
  .brand span { display: none; }
  .user-name { display: none; }
  .main { padding: 16px 16px 88px; }
  .row3 { grid-template-columns: 1fr; }
  .mark-form, .comment-form { flex-direction: column; align-items: stretch; }
  .post-head h1 { font-size: 21px; }
  .mat-hero { padding: 20px 18px 16px; border-radius: 16px; }
  .mat-hero h1 { font-size: 26px; }
  .mat-hero .btn.big { padding: 10px 14px; }
  .mat-hero-stats .mat-hint { display: none; }
  .mat-cols { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 8px; margin: -6px -2px 0; scrollbar-width: none; }
  .mat-col-wrap { flex: 0 0 150px; scroll-snap-align: start; }
  .mat-col { height: 120px; padding: 12px 14px; }
  .mat-col.new { width: 150px; flex: none; }
  .mat-col-covers { transform: scale(.85); transform-origin: top right; }
  .mat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .mat-grid.featured { grid-template-columns: 1fr; }
  .mat-card-title { font-size: 14px; }
  .mat-card-meta .when, .mat-card-meta .sep { display: none; }
  .mat-grid:not(.featured) .mat-pages, .mat-grid:not(.featured) .mat-pending { display: none; }
  .mat-grid:not(.featured) .ficon-sheet { width: 46px; height: 58px; gap: 4px; border-radius: 5px 14px 5px 5px; }
  .mat-grid:not(.featured) .ficon-sheet::before { width: 14px; height: 14px; }
  .mat-grid:not(.featured) .ficon-glyph { width: 20px; height: 20px; }
  .mat-grid:not(.featured) .ficon-ext { font-size: 9px; padding: 1px 5px; }
  .mat-quick { opacity: 1; transform: none; }
  .mat-qbtn { width: 32px; height: 32px; }
  .mat-bar-title h2 { font-size: 19px; }
  .mat-table { min-width: 0; }
  .mat-table .c2, .mat-table .c3, .mat-table .c4, .mat-table .c5, .mat-table .c6 { display: none; }
  .mat-table .c0 { width: 84px; }
  .up-panel { left: 10px; right: 10px; bottom: 76px; width: auto; max-width: none; }
  .mv-overlay { padding: 10px; overflow-y: auto; display: block; }
  .mv { display: flex; flex-direction: column; gap: 12px; }
  .mv-stage { height: 64vh; flex: none; }
  .mv-tn { width: 84px; }
  .mv-nav { width: 42px; height: 42px; margin-top: -21px; }
  .col-form { grid-template-columns: 1fr; }
  .row2, .ub-options { grid-template-columns: 1fr; }
  .mat-search { max-width: none; order: 3; flex-basis: 100%; }
  .suggest-ai { flex-direction: column; align-items: stretch; }
  .draft-empty { min-height: 200px; }
  .team-actions { flex-direction: column; align-items: stretch; }
  .col-sample { position: static; max-width: 210px; }
}
@media (hover: none) { .mat-quick { opacity: 1; transform: none; } .mat-col-edit { opacity: 1; } }

/* ---------- Knowledge ---------- */
.knowledge { display: flex; flex-direction: column; gap: 22px; }
.kb-hero { background:
    radial-gradient(520px 240px at 92% -30%, rgba(220, 226, 75, .26), transparent 70%),
    radial-gradient(560px 300px at -5% 130%, rgba(106, 79, 216, .45), transparent 70%),
    linear-gradient(135deg, #00222E 0%, #02405A 100%); }
.kb-stat-btn { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .1); border: 0; border-radius: 999px; padding: 3px 12px; font: inherit; font-size: 13px; color: rgba(255, 255, 255, .85); cursor: pointer; }
.kb-stat-btn:hover { background: rgba(255, 255, 255, .18); }
.kb-stat-btn strong { color: var(--lime); }
.mat-hero-stats .kb-busy { background: none; color: rgba(255, 255, 255, .8); }
.kb-busy .mv-spinner { width: 14px; height: 14px; border-width: 2px; }
.kb-tabs { display: inline-flex; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .1); }
.kb-tab { padding: 7px 16px; border-radius: 9px; color: rgba(255, 255, 255, .8); font-weight: 700; font-size: 14px; text-decoration: none; }
.kb-tab:hover { color: #fff; }
.kb-tab.on { background: var(--lime); color: var(--navy); }
.kb-search { max-width: 560px; }
.kb-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #EEE9FD; color: #3F2A99; font-weight: 700; }
.kb-banner .ico { width: 18px; height: 18px; }
.kb-banner .link-btn { margin-left: auto; }
.kb-empty .ico { width: 40px; height: 40px; color: #8E7BE6; }
.kb-empty h2 { margin-top: 8px; }
.kb-empty p { max-width: 520px; margin: 8px auto 0; }

/* what is not in yet */
.kb-todo { padding: 0; overflow: hidden; }
.kb-todo > summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.kb-todo > summary::-webkit-details-marker { display: none; }
.kb-todo-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kb-todo-title .ico { width: 20px; height: 20px; color: #6A4FD8; }
.kb-todo .form-error { margin: 0 18px 12px; }
.kb-todo-list { list-style: none; margin: 0; padding: 0 8px 8px; max-height: 340px; overflow: auto; border-top: 1px solid var(--border); }
.kb-todo-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-bottom: 1px solid #EEF2F4; }
.kb-todo-row:last-child { border-bottom: 0; }
.kb-todo-row > .ico { width: 18px; height: 18px; color: var(--muted); flex: none; }
.kb-todo-row.off { opacity: .6; }
.kb-todo-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kb-todo-text a { font-weight: 700; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-todo-text a:hover { color: var(--cyan); }
.btn.kb-btn { background: #6A4FD8; color: #fff; }
.btn.kb-btn:hover { background: #5236BD; }
.btn.kb-btn .ico { width: 16px; height: 16px; }

/* entries */
.kb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.kb-list > .empty { grid-column: 1 / -1; }
.kb-entry { --kc: #66767E; --kb: #EEF2F4; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--kc); border-radius: 14px; }
.kb-entry.flagged { border-color: #F3DB9E; border-left-color: var(--warn); box-shadow: 0 0 0 3px #FFF6DF; }
.kb-entry.retired { opacity: .62; }
.kt-fact { --kc: #0179A1; --kb: #DDF1F9; }
.kt-capability { --kc: #0B766C; --kb: #DDF3EF; }
.kt-case { --kc: #6A4FD8; --kb: #EEE9FD; }
.kt-message { --kc: #1A8048; --kb: #DDF3E6; }
.kt-objection { --kc: #B86B00; --kb: #FFF1D9; }
.kt-term { --kc: #4C5C64; --kb: #EEF2F4; }
.kt-competitor { --kc: #C2410C; --kb: #FDE8DD; }
.kb-entry-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kb-type { padding: 2px 9px; border-radius: 6px; background: var(--kb); color: var(--kc); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.kb-topic { cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.kb-topic:hover { border-color: var(--cyan); color: var(--cyan); }
.kb-retired { padding: 1px 8px; border-radius: 6px; background: #EEF2F4; color: var(--muted); font-size: 11px; font-weight: 700; }
.kb-entry-head { display: flex; align-items: flex-start; gap: 12px; }
.kb-entry-head h3 { font-size: 16.5px; color: var(--navy); flex: 1; }
.kb-value { flex: none; padding: 2px 10px; border-radius: 8px; background: var(--navy); color: var(--lime); font-weight: 700; font-size: 15px; white-space: nowrap; }
.kb-value.small { font-size: 12px; padding: 1px 7px; margin-left: 6px; }
.kb-body { margin: 0; color: #24414D; font-size: 14.5px; }
.kb-conflict { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: #FFF6DF; color: #6E4A00; font-size: 13.5px; }
.kb-other { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border-radius: 8px; background: #fff; color: var(--text); }
.kb-other .kb-value.small { margin-left: 0; }
.kb-conflict .act-row { display: flex; gap: 6px; flex-wrap: wrap; }
.kb-sources { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 6px; border-top: 1px dashed var(--border); }
.kb-src { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 8px; border-radius: 6px; background: var(--bg); color: var(--navy); font-size: 12.5px; font-weight: 700; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-src:hover { background: #E3F0F5; }
.kb-src .ico { width: 13px; height: 13px; flex: none; }
.kb-src.internal { background: #FFF4D6; color: #8A5A00; }
.kb-use { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 5px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.kb-use .ico { width: 13px; height: 13px; }
.kb-use.anon { background: #EEE9FD; color: #5236BD; }
.kb-use.never { background: var(--late-bg); color: var(--late); }
.kb-use.wait { background: #EEF2F4; color: var(--muted); padding: 1px 7px; }
.kb-inposts { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border-radius: 10px; background: #F6F4FE; border: 1px solid #E4DDFB; }
.kb-inposts p { margin: 0; font-size: 14px; color: #2B1F6B; }
.kb-edit-posts { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: var(--bg); }
.kb-edit-posts [hidden] { display: none; }
.kb-guard { padding: 0; overflow: hidden; }
.kb-guard > summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.kb-guard > summary::-webkit-details-marker { display: none; }
.kb-guard .kb-todo-title .ico { color: var(--late); }
.kb-guard-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px 16px; border-top: 1px solid var(--border); }
.kb-guard-name { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border-radius: 999px; background: var(--late-bg); color: #8F2424; font-size: 13px; font-weight: 700; }
.kb-guard-name button { border: 0; background: transparent; color: inherit; font: inherit; font-size: 15px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 50%; }
.kb-guard-name button:hover { background: rgba(194, 52, 52, .15); }
.kb-guard-add { display: flex; gap: 8px; max-width: 460px; }
.kb-guard-body .link-btn { font-size: inherit; }
.guard-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--late-bg); border: 1px solid #F0C4C4; color: #7A1F1F; font-size: 13.5px; }
.guard-note[hidden] { display: none; }
.guard-note > div { display: flex; flex-direction: column; gap: 2px; }
.guard-note .ico { width: 20px; height: 20px; color: var(--late); flex: none; margin-top: 1px; }
.kb-src.removed { background: transparent; border: 1px dashed var(--border); color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.kb-retired-why { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--bg); color: var(--muted); font-size: 13px; }
.kb-gone { color: var(--muted); text-decoration: line-through; }
.ks-removed { background: #EEF2F4; color: var(--muted); }
.kb-entry-foot { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.kb-history { margin: 0; padding: 8px 12px 8px 30px; border-radius: 10px; background: var(--bg); font-size: 13px; display: flex; flex-direction: column; gap: 8px; }
.kb-history li > span:first-child { display: block; }

/* sources */
.kb-sources-list { padding: 0; overflow-x: auto; }
.kb-sources-list table { min-width: 720px; }
.kb-src-name { display: flex; align-items: center; gap: 6px; font-weight: 700; flex-wrap: wrap; }
.kb-src-name .ico { width: 16px; height: 16px; color: var(--muted); }
.kb-src-name a { color: var(--text); text-decoration: none; }
.kb-src-name a:hover { color: var(--cyan); }
.kb-summary { margin-top: 3px; max-width: 640px; }
.nowrap { white-space: nowrap; }
.kb-state { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #EEF2F4; color: var(--muted); }
.ks-added { background: var(--posted-bg); color: var(--posted); }
.ks-reading, .ks-queued { background: #EEE9FD; color: #5236BD; }
.ks-failed { background: var(--late-bg); color: var(--late); }

/* the button on a file or a posted post */
.kb-control:empty { display: none; }
.kb-control { display: flex; flex-direction: column; gap: 6px; }
.kb-hint { margin: 0; }
.kb-error { margin: 0; font-size: 13px; }
.kb-added, .kb-reading, .kb-off { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; }
.kb-added > div, .kb-reading > div { display: flex; flex-direction: column; align-items: flex-start; }
.kb-added { background: #EEE9FD; border: 1px solid #D7CEF9; color: #3F2A99; }
.kb-added .ico { width: 22px; height: 22px; color: #6A4FD8; }
.kb-reading { background: #F6F4FE; border: 1px dashed #CFC4F5; color: #3F2A99; }
.kb-reading .mv-spinner { width: 20px; height: 20px; border-width: 2px; border-color: rgba(106, 79, 216, .2); border-top-color: #6A4FD8; flex: none; }
.kb-off { background: var(--bg); color: var(--muted); }
.kb-off .ico { width: 18px; height: 18px; }
.mat-kb { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #6A4FD8; color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.mat-kb .ico { width: 14px; height: 14px; }
a.soon { text-decoration: none; }

@media (max-width: 720px) {
  .kb-list { grid-template-columns: minmax(0, 1fr); }
  .kb-tabs { width: 100%; }
  .kb-tab { flex: 1; text-align: center; }
  .kb-todo > summary { flex-wrap: wrap; }
}

/* ---------- post attachments ---------- */
.attach-slot:empty { display: none; }
.attach-slot { margin-top: 12px; }
.attach-box { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px dashed #C9D6DC; background: #FBFCFD; }
.attach-box.has { border-style: solid; background: #fff; }
.attach-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.attach-head .ico { width: 17px; height: 17px; color: var(--cyan); }
.attach-file { display: flex; align-items: center; gap: 12px; }
.attach-thumb { flex: none; width: 64px; height: 46px; border-radius: 8px; object-fit: cover; background: var(--bg); border: 1px solid var(--border); }
.attach-thumb.ext { --kc: #5B6B73; display: grid; place-items: center; background: var(--kc); color: #fff; border: 0; font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.attach-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.attach-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.attach-actions .link-btn { margin-left: auto; }
.attach-none { margin: 0; }
.composer .attach-slot, .stack > .attach-slot { margin-top: 0; }

/* choosing from Material */
.pick-list { display: flex; flex-direction: column; gap: 6px; max-height: min(460px, 60vh); overflow: auto; }
.pick-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.pick-row:hover { border-color: var(--cyan); background: #F6FBFD; }
.pick-row.off { opacity: .5; cursor: not-allowed; }
.pick-text { display: flex; flex-direction: column; min-width: 0; }
.pick-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-empty { padding: 30px 10px; }

/* Material: my own files */
.mat-mine { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 6px; background: #EEE9FD; color: #5236BD; font-size: 11px; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.mat-mine .ico { width: 13px; height: 13px; }
.mine-note { background: #F6F4FE; border-color: #D7CEF9; }
.mine-note .ico { color: #6A4FD8; }
.mine-note .btn { align-self: center; }

/* rewrite a selection: the button sits right above the selected text */
.sel-pop { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sel-pop[hidden] { display: none; }
.sel-pop .sel-pill { background: var(--cyan); }
.sel-pop .bubble-main { padding: 6px 10px 6px 12px; font-size: 13px; }
.sel-pop.busy .bubble-main { cursor: progress; }
.sel-pop.busy .star { display: inline-block; animation: pulse-star 1s ease-in-out infinite; }
.sel-menu { position: absolute; top: calc(100% + 6px); left: 0; }
.sel-pop.below .sel-menu { top: calc(100% + 6px); }
.ta-mirror { position: absolute; top: 0; left: -10000px; visibility: hidden; box-sizing: border-box; border: 0; white-space: pre-wrap; overflow-wrap: break-word; word-wrap: break-word; }

/* ---------- joining, password links, first-run welcome ---------- */
.join-card { max-width: 420px; }
.join-facts { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--bg); font-size: 13.5px; color: var(--muted); }
.join-facts strong { color: var(--text); }
.pw-meter { display: block; height: 4px; margin-top: 6px; border-radius: 99px; background: var(--bg); overflow: hidden; }
.pw-meter > span { display: block; height: 100%; width: 0; background: var(--late); transition: width .2s, background .2s; }
.pw-meter[data-score="1"] > span { width: 25%; }
.pw-meter[data-score="2"] > span { width: 50%; background: var(--warn); }
.pw-meter[data-score="3"] > span { width: 75%; background: var(--cyan); }
.pw-meter[data-score="4"] > span { width: 100%; background: var(--posted); }
.forgot-link { align-self: center; font-size: 13px; }
.forgot-box { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.forgot-box > strong { font-size: 14px; }
.forgot .field > span { font-size: 13px; }
.pill.invited { margin-left: 6px; background: #FFF1D9; color: var(--warn); }
.link-secret { font-size: 13px; text-align: left; word-break: break-all; letter-spacing: 0; }

.onboard .onboard-card { max-width: 600px; padding: 30px 32px; gap: 16px; }
.onboard-card h1 { font-size: 26px; color: var(--navy); }
.onboard-card > p { color: #33505C; font-size: 15px; }
.onboard-top { display: flex; align-items: center; justify-content: space-between; }
.onboard-dots { display: flex; gap: 6px; }
.onboard-dots span { width: 26px; height: 6px; border-radius: 99px; background: var(--border); }
.onboard-dots span.done { background: var(--cyan); }
.onboard-dots span.on { background: var(--navy); }
.onboard-asks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.onboard-asks > div { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: #F3F8FA; font-size: 13px; color: var(--muted); }
.onboard-asks strong { font-size: 18px; color: var(--navy); }
.onboard-states { display: flex; flex-wrap: wrap; gap: 6px; }
.onboard-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; color: #33505C; }
.onboard-card .settings-grid, .onboard-card .settings { margin: 0; }
@media (max-width: 560px) { .onboard-asks { grid-template-columns: 1fr; } .onboard .onboard-card { padding: 22px 18px; } }