/* =============================================================
   portal.css — Barone Marketing client portal interface
   Shares tokens with styles.css; loaded standalone.
   ============================================================= */

:root {
  --bg:        #0d0c0a;
  --bg-elev:   #161410;
  --bg-card:   #18150f;
  --bg-hover:  #1f1c16;
  --fg:        #f3ede0;
  --fg-soft:   #d8d1c1;
  --fg-mute:   #8a8475;
  --fg-faint:  #5d574b;
  --hair:      rgba(243, 237, 224, 0.10);
  --hair-strong: rgba(243, 237, 224, 0.22);
  --accent:    #d4a358;
  --accent-ink:#1a1306;
  --good:      #6fb88a;
  --bad:       #b56b5e;
  --warn:      #d4a358;

  --serif: "Instrument Serif", "EB Garamond", Georgia, serif;
  --sans:  "Geist", "Söhne", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, "Roboto Mono", monospace;
}

*,*::before,*::after { box-sizing:border-box; }
html, body { margin:0; padding:0; height:100%; background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }

button { font-family:inherit; cursor:pointer; }
input, textarea { font-family:inherit; }
a { color:inherit; text-decoration:none; }

/* ──────────── LAYOUT ──────────── */
.app {
  display:grid;
  grid-template-columns: 240px 1fr;
  height:100vh;
}

/* ──────────── SIDEBAR ──────────── */
.sb {
  background:var(--bg-elev);
  border-right:0.5px solid var(--hair);
  display:flex; flex-direction:column;
  padding:20px 0;
}
.sb-brand { padding:0 22px 24px; display:flex; align-items:center; gap:12px; border-bottom:0.5px solid var(--hair); }
.sb-brand .mark {
  width:28px; height:28px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--accent) 0%, var(--accent) 28%, transparent 60%);
  border:0.5px solid var(--hair-strong); position:relative;
}
.sb-brand .mark::after{ content:""; position:absolute; inset:5px; border-radius:50%; border:0.5px solid rgba(255,255,255,0.15); }
.sb-brand .wm { display:flex; flex-direction:column; line-height:1; }
.sb-brand .wm .name { font-family:var(--serif); font-size:20px; }
.sb-brand .wm .div  { font-family:var(--mono); font-size:9px; letter-spacing:0.25em; color:var(--fg-mute); text-transform:uppercase; margin-top:3px; }

.sb-client {
  margin:18px 14px 6px;
  padding:14px 14px;
  background:var(--bg-card);
  border:0.5px solid var(--hair);
  border-radius:8px;
  display:flex; align-items:center; gap:12px;
}
.sb-client .av {
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg, color-mix(in oklab, var(--accent) 60%, transparent), color-mix(in oklab, var(--accent) 20%, transparent));
  border:0.5px solid var(--hair-strong);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:15px; color:var(--accent-ink); font-weight:500;
}
.sb-client .info { flex:1; min-width:0; }
.sb-client .nm { font-family:var(--serif); font-size:16px; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-client .pl { font-family:var(--mono); font-size:10px; letter-spacing:0.12em; color:var(--fg-mute); text-transform:uppercase; margin-top:2px; }
.sb-client .cog { color:var(--fg-mute); font-size:14px; padding:4px; border-radius:4px; background:transparent; border:none; }
.sb-client .cog:hover { color:var(--fg); background:var(--bg-hover); }

.sb-nav { display:flex; flex-direction:column; padding:12px 10px; gap:1px; }
.sb-nav-h { font-family:var(--mono); font-size:9.5px; letter-spacing:0.22em; color:var(--fg-faint); text-transform:uppercase; padding:14px 12px 6px; }
.sb-nav .item {
  display:flex; align-items:center; gap:12px;
  padding:9px 12px; border-radius:6px;
  font-size:13px; color:var(--fg-soft);
  border:none; background:transparent;
  width:100%; text-align:left;
  transition:background 0.15s ease, color 0.15s ease;
}
.sb-nav .item:hover { background:var(--bg-hover); color:var(--fg); }
.sb-nav .item.active { background:var(--bg-hover); color:var(--fg); }
.sb-nav .item.active::before {
  content:""; width:3px; height:14px; background:var(--accent); border-radius:2px;
  margin-left:-12px; margin-right:9px;
}
.sb-nav .item .ic { width:16px; display:inline-flex; justify-content:center; color:var(--fg-mute); }
.sb-nav .item.active .ic { color:var(--accent); }
.sb-nav .item .badge { margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--accent); }

.sb-foot {
  margin-top:auto;
  padding:16px 22px 4px;
  border-top:0.5px solid var(--hair);
  display:flex; flex-direction:column; gap:6px;
}
.sb-foot .status { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; color:var(--fg-mute); text-transform:uppercase; }
.sb-foot .status .dot { width:6px; height:6px; border-radius:50%; background:var(--good); box-shadow:0 0 0 0 rgba(111,184,138,0.5); animation:pulse 2s infinite; }
@keyframes pulse {
  0%, 100% { box-shadow:0 0 0 0 rgba(111,184,138,0.4); }
  50%      { box-shadow:0 0 0 5px rgba(111,184,138,0); }
}
.sb-foot .row { font-family:var(--mono); font-size:10px; letter-spacing:0.1em; color:var(--fg-faint); text-transform:uppercase; }

/* ──────────── MAIN ──────────── */
.main { display:flex; flex-direction:column; min-height:0; overflow:hidden; }

/* topbar */
.tb {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px;
  border-bottom:0.5px solid var(--hair);
  background:var(--bg);
}
.tb .crumb { display:flex; align-items:baseline; gap:14px; }
.tb .crumb .where { font-family:var(--mono); font-size:10.5px; letter-spacing:0.2em; color:var(--fg-mute); text-transform:uppercase; }
.tb .crumb .title { font-family:var(--serif); font-size:28px; line-height:1; }
.tb .right { display:flex; align-items:center; gap:10px; }

.search {
  display:flex; align-items:center; gap:9px;
  padding:7px 12px; background:var(--bg-elev); border:0.5px solid var(--hair); border-radius:8px;
  width:240px;
}
.search input { background:transparent; border:none; outline:none; color:var(--fg); font-size:12.5px; flex:1; min-width:0; }
.search input::placeholder { color:var(--fg-mute); }
.search .key { font-family:var(--mono); font-size:9.5px; color:var(--fg-faint); border:0.5px solid var(--hair); border-radius:3px; padding:1px 5px; }

.iconbtn {
  width:34px; height:34px; border-radius:8px;
  border:0.5px solid var(--hair); background:var(--bg-elev);
  color:var(--fg-soft); display:inline-flex; align-items:center; justify-content:center;
  position:relative;
}
.iconbtn:hover { background:var(--bg-hover); color:var(--fg); }
.iconbtn .nbadge { position:absolute; top:6px; right:6px; width:6px; height:6px; border-radius:50%; background:var(--accent); }

.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase;
  border-radius:8px; border:0.5px solid var(--accent); background:var(--accent); color:var(--accent-ink);
  transition:transform 0.18s ease, background 0.18s ease;
}
.btn:hover { transform:translateY(-1px); }
.btn.ghost { background:transparent; color:var(--fg); border-color:var(--hair-strong); }
.btn.ghost:hover { border-color:var(--fg); background:var(--bg-hover); }
.btn.danger { background:transparent; color:var(--bad); border-color:color-mix(in oklab, var(--bad) 40%, transparent); }
.btn.sm { padding:6px 11px; font-size:9.5px; }

/* content scroll */
.content { flex:1; overflow:auto; padding:28px 28px 60px; }
.content::-webkit-scrollbar { width:10px; }
.content::-webkit-scrollbar-track { background:transparent; }
.content::-webkit-scrollbar-thumb { background:var(--hair); border-radius:4px; border:2px solid var(--bg); background-clip:content-box; }

/* ──────────── PAGE: OVERVIEW ──────────── */
.banner {
  border:0.5px solid var(--hair-strong);
  background:linear-gradient(135deg, var(--bg-elev), var(--bg-card));
  border-radius:14px;
  padding:32px 36px;
  display:grid; grid-template-columns: 1fr auto; gap:24px; align-items:end;
  margin-bottom:24px;
  position:relative; overflow:hidden;
}
.banner::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 80% at 100% 0%, color-mix(in oklab, var(--accent) 18%, transparent) 0%, transparent 60%);
  pointer-events:none;
}
.banner .lbl { font-family:var(--mono); font-size:10.5px; letter-spacing:0.22em; color:var(--accent); text-transform:uppercase; }
.banner h1 { font-family:var(--serif); font-size:44px; line-height:1.05; margin:10px 0 0; max-width:24ch; font-weight:400; letter-spacing:-0.01em; }
.banner h1 em { font-style:italic; color:var(--accent); }
.banner .sub { color:var(--fg-soft); margin-top:14px; max-width:54ch; font-size:14.5px; }
.banner .right { display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.banner .right .wk { font-family:var(--mono); font-size:10px; letter-spacing:0.18em; color:var(--fg-mute); text-transform:uppercase; }
.banner .right .wkbig { font-family:var(--serif); font-size:42px; line-height:1; color:var(--fg); }

.kpis { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:24px; }
.kpi {
  background:var(--bg-elev); border:0.5px solid var(--hair); border-radius:10px;
  padding:18px 20px; display:flex; flex-direction:column; gap:6px;
  position:relative; overflow:hidden;
}
.kpi .lbl { font-family:var(--mono); font-size:9.5px; letter-spacing:0.22em; color:var(--fg-mute); text-transform:uppercase; }
.kpi .num { font-family:var(--serif); font-size:34px; line-height:1; color:var(--fg); margin-top:6px; }
.kpi .meta { font-family:var(--mono); font-size:10.5px; letter-spacing:0.05em; color:var(--good); margin-top:4px; }
.kpi .meta.neg { color:var(--fg-mute); }
.kpi .spark {
  position:absolute; bottom:10px; right:14px; width:64px; height:24px; opacity:0.6;
}
.kpi .spark path { stroke:var(--accent); fill:none; stroke-width:1.5; }

.section-title {
  display:flex; justify-content:space-between; align-items:baseline;
  margin:8px 0 14px;
}
.section-title .t { font-family:var(--mono); font-size:10.5px; letter-spacing:0.22em; color:var(--fg-mute); text-transform:uppercase; }
.section-title .a { font-family:var(--mono); font-size:10.5px; letter-spacing:0.18em; color:var(--accent); text-transform:uppercase; background:none; border:none; }
.section-title .a:hover { color:var(--fg); }

.overview-grid { display:grid; grid-template-columns: 1.6fr 1fr; gap:18px; }

.calendar {
  background:var(--bg-elev); border:0.5px solid var(--hair); border-radius:10px;
  padding:18px;
}
.cal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.cal-head .t { font-family:var(--serif); font-size:18px; }
.cal-head .nav { display:flex; gap:6px; }
.cal-head .nav button {
  width:26px; height:26px; border-radius:6px; border:0.5px solid var(--hair); background:transparent;
  color:var(--fg-soft); font-size:12px;
}
.cal-head .nav button:hover { background:var(--bg-hover); }

.cal-week { display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; }
.cal-day {
  border:0.5px solid var(--hair); border-radius:8px; padding:10px 10px 14px;
  background:var(--bg-card); min-height:138px; display:flex; flex-direction:column; gap:6px;
}
.cal-day.today { border-color:var(--accent); }
.cal-day .dh { display:flex; justify-content:space-between; align-items:baseline; }
.cal-day .dh .dn { font-family:var(--mono); font-size:9.5px; letter-spacing:0.18em; color:var(--fg-mute); text-transform:uppercase; }
.cal-day .dh .dd { font-family:var(--serif); font-size:16px; color:var(--fg); }
.cal-day.today .dh .dd { color:var(--accent); }
.cal-day .ev {
  font-size:10.5px; padding:5px 7px; border-radius:4px; border:0.5px solid var(--hair);
  color:var(--fg-soft); line-height:1.3;
  background:rgba(255,255,255,0.02);
}
.cal-day .ev.scheduled { border-color:color-mix(in oklab, var(--accent) 35%, transparent); color:var(--accent); background:color-mix(in oklab, var(--accent) 8%, transparent); }
.cal-day .ev.posted { color:var(--good); border-color:color-mix(in oklab, var(--good) 30%, transparent); background:color-mix(in oklab, var(--good) 6%, transparent); }
.cal-day .ev .pl { font-family:var(--mono); font-size:8.5px; letter-spacing:0.14em; opacity:0.8; text-transform:uppercase; margin-top:2px; }

.inbox {
  background:var(--bg-elev); border:0.5px solid var(--hair); border-radius:10px;
  padding:18px; display:flex; flex-direction:column;
}
.inbox-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.inbox-h .t { font-family:var(--serif); font-size:18px; }
.inbox-h .ct { font-family:var(--mono); font-size:10.5px; color:var(--fg-mute); letter-spacing:0.12em; }
.inbox-item {
  display:grid; grid-template-columns: 28px 1fr auto; gap:12px; align-items:center;
  padding:12px 0; border-top:0.5px solid var(--hair);
}
.inbox-item:first-of-type { border-top:none; padding-top:4px; }
.inbox-item .ic {
  width:28px; height:28px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-card); border:0.5px solid var(--hair);
  font-size:13px;
}
.inbox-item.urgent .ic { background:color-mix(in oklab, var(--accent) 14%, transparent); border-color:color-mix(in oklab, var(--accent) 40%, transparent); color:var(--accent); }
.inbox-item .body .t { font-size:13.5px; color:var(--fg); line-height:1.3; }
.inbox-item .body .s { font-family:var(--mono); font-size:10px; letter-spacing:0.1em; color:var(--fg-mute); margin-top:3px; text-transform:uppercase; }
.inbox-item .act {
  font-family:var(--mono); font-size:10px; padding:5px 10px;
  border-radius:5px; border:0.5px solid var(--hair); background:transparent;
  color:var(--fg-soft); letter-spacing:0.14em; text-transform:uppercase;
}
.inbox-item .act:hover { border-color:var(--accent); color:var(--accent); }
.inbox-item .act.primary { border-color:var(--accent); color:var(--accent-ink); background:var(--accent); }

/* ──────────── PAGE: UPLOAD ──────────── */
.drop {
  border:0.5px dashed var(--hair-strong);
  border-radius:14px;
  background:var(--bg-elev);
  padding:80px 40px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  transition:border-color 0.2s ease, background 0.2s ease;
  cursor:pointer;
  position:relative; overflow:hidden;
}
.drop:hover, .drop.over { border-color:var(--accent); background:color-mix(in oklab, var(--accent) 4%, var(--bg-elev)); }
.drop .glyph {
  width:64px; height:64px; border-radius:50%;
  border:0.5px solid var(--hair-strong);
  display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--accent);
  background:var(--bg-card);
}
.drop h2 { font-family:var(--serif); font-size:32px; margin:0; }
.drop p { color:var(--fg-mute); font-size:13.5px; margin:0; max-width:42ch; }
.drop .formats { font-family:var(--mono); font-size:10px; letter-spacing:0.2em; color:var(--fg-faint); margin-top:8px; text-transform:uppercase; }

.shoot-card {
  background:var(--bg-elev); border:0.5px solid var(--hair); border-radius:10px;
  padding:22px 24px; margin-top:18px;
}
.shoot-card .h { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.shoot-card .h .t { font-family:var(--serif); font-size:20px; }
.shoot-card .h .from { font-family:var(--mono); font-size:10px; letter-spacing:0.18em; color:var(--accent); text-transform:uppercase; }
.shoot-card .list { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.shoot-card .shot {
  border:0.5px solid var(--hair); border-radius:8px;
  padding:14px 16px; background:var(--bg-card);
  display:flex; flex-direction:column; gap:6px;
}
.shoot-card .shot .n { font-family:var(--mono); font-size:9.5px; color:var(--fg-mute); letter-spacing:0.18em; text-transform:uppercase; }
.shoot-card .shot .d { font-family:var(--serif); font-size:17px; color:var(--fg); line-height:1.25; }
.shoot-card .shot .meta { font-family:var(--mono); font-size:10px; color:var(--fg-mute); margin-top:auto; letter-spacing:0.08em; }

.recent-drops {
  margin-top:24px;
  background:var(--bg-elev); border:0.5px solid var(--hair); border-radius:10px; overflow:hidden;
}
.rd-h { display:flex; justify-content:space-between; align-items:center; padding:16px 22px; border-bottom:0.5px solid var(--hair); }
.rd-h .t { font-family:var(--serif); font-size:18px; }
.rd-table { display:flex; flex-direction:column; }
.rd-row {
  display:grid; grid-template-columns: 38px 1.4fr 1fr 1fr auto;
  gap:18px; align-items:center;
  padding:14px 22px; border-top:0.5px solid var(--hair);
}
.rd-row:first-of-type { border-top:none; }
.rd-row .thumb {
  width:38px; height:50px; background:var(--bg-card); border:0.5px solid var(--hair); border-radius:4px;
  position:relative; overflow:hidden;
}
.rd-row .thumb::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg, transparent 0 4px, rgba(255,255,255,0.04) 4px 5px); }
.rd-row .nm { font-size:13.5px; color:var(--fg); }
.rd-row .nm .s { font-family:var(--mono); font-size:10px; color:var(--fg-mute); letter-spacing:0.08em; margin-top:3px; }
.rd-row .sz, .rd-row .dt { font-family:var(--mono); font-size:11px; color:var(--fg-mute); letter-spacing:0.05em; }
.rd-row .st {
  font-family:var(--mono); font-size:9.5px; padding:4px 9px; border-radius:4px; letter-spacing:0.16em; text-transform:uppercase;
  border:0.5px solid; display:inline-block;
}
.rd-row .st.processed { color:var(--good); border-color:color-mix(in oklab, var(--good) 40%, transparent); background:color-mix(in oklab, var(--good) 8%, transparent); }
.rd-row .st.editing  { color:var(--accent); border-color:color-mix(in oklab, var(--accent) 40%, transparent); background:color-mix(in oklab, var(--accent) 8%, transparent); }

/* ──────────── PAGE: EDITS IN REVIEW ──────────── */
.filterbar { display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap; align-items:center; }
.chip {
  font-family:var(--mono); font-size:10.5px; padding:7px 14px;
  background:var(--bg-elev); border:0.5px solid var(--hair); border-radius:999px;
  color:var(--fg-soft); letter-spacing:0.14em; text-transform:uppercase;
}
.chip:hover { background:var(--bg-hover); color:var(--fg); }
.chip.active { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.chip .ct { color:var(--fg-mute); margin-left:6px; }
.chip.active .ct { color:var(--fg-faint); }

.edits-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.edit-card {
  background:var(--bg-elev); border:0.5px solid var(--hair); border-radius:10px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color 0.2s ease;
}
.edit-card.approved { border-color:color-mix(in oklab, var(--good) 50%, transparent); }
.edit-card.declined { opacity:0.55; }
.edit-card .frame {
  position:relative; aspect-ratio:9/16; background:var(--bg-card);
  border-bottom:0.5px solid var(--hair);
}
.edit-card .frame .strip { position:absolute; inset:0; background:repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,0.04) 14px 15px); }
.edit-card .frame .stamp {
  position:absolute; top:12px; left:12px;
  font-family:var(--mono); font-size:9.5px; padding:4px 8px; border-radius:3px;
  background:rgba(0,0,0,0.5); border:0.5px solid var(--hair); color:var(--fg-soft);
  letter-spacing:0.16em; text-transform:uppercase;
}
.edit-card .frame .ptag {
  position:absolute; top:12px; right:12px;
  font-family:var(--mono); font-size:9.5px; padding:4px 8px; border-radius:3px;
  background:var(--accent); color:var(--accent-ink); letter-spacing:0.16em; text-transform:uppercase;
}
.edit-card .frame .play {
  position:absolute; inset:0; margin:auto; width:46px; height:46px; border-radius:50%;
  background:rgba(0,0,0,0.45); border:0.5px solid var(--hair-strong);
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px);
}
.edit-card .frame .play::after {
  content:""; width:0; height:0; border-left:8px solid var(--fg);
  border-top:6px solid transparent; border-bottom:6px solid transparent; margin-left:2px;
}
.edit-card .frame .len {
  position:absolute; bottom:12px; right:12px;
  font-family:var(--mono); font-size:9.5px; padding:3px 7px; border-radius:3px;
  background:rgba(0,0,0,0.55); color:var(--fg-soft); letter-spacing:0.1em;
}

.edit-card .info { padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; }
.edit-card .info .hook { font-family:var(--serif); font-size:17px; line-height:1.3; color:var(--fg); }
.edit-card .info .meta { font-family:var(--mono); font-size:10px; color:var(--fg-mute); letter-spacing:0.08em; }
.edit-card .actions { display:flex; gap:6px; padding:12px 16px 16px; border-top:0.5px solid var(--hair); }
.edit-card .actions button { flex:1; }
.edit-card .actions .approve { background:var(--good); color:var(--bg); border-color:var(--good); }
.edit-card .actions .approve:hover { background:color-mix(in oklab, var(--good) 85%, white); }
.edit-card .actions .comment { background:transparent; color:var(--fg-soft); border-color:var(--hair-strong); }
.edit-card .actions .comment:hover { color:var(--fg); border-color:var(--fg); }
.edit-card .actions .decline { background:transparent; color:var(--bad); border-color:color-mix(in oklab, var(--bad) 40%, transparent); }
.edit-card.approved .actions .approve { background:transparent; color:var(--good); cursor:default; }
.edit-card.approved .actions .approve::before { content:"✓ "; }
.edit-card.declined .actions .decline { background:var(--bad); color:var(--bg); }

/* ──────────── PAGE: BRIEF ──────────── */
.brief-grid { display:grid; grid-template-columns: 1.4fr 1fr; gap:18px; }
.brief-card { background:var(--bg-elev); border:0.5px solid var(--hair); border-radius:10px; padding:24px 26px; }
.brief-stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:0; margin-bottom:14px; }
.brief-stat { padding:16px 20px; border-right:0.5px solid var(--hair); display:flex; flex-direction:column; gap:6px; }
.brief-stat:last-child { border-right:none; }
.brief-stat .lbl { font-family:var(--mono); font-size:9.5px; color:var(--fg-mute); letter-spacing:0.2em; text-transform:uppercase; }
.brief-stat .num { font-family:var(--serif); font-size:32px; line-height:1; color:var(--fg); }
.brief-stat .delta { font-family:var(--mono); font-size:10.5px; color:var(--good); letter-spacing:0.05em; }
.brief-stat .delta.neg { color:var(--fg-mute); }
.brief-stat .delta.bad { color:var(--bad); }

.brief-card .chartwrap svg { width:100%; height:200px; }
.brief-card h3 { font-family:var(--serif); font-size:20px; margin:0 0 14px; font-weight:400; }
.brief-card .narrative p { color:var(--fg-soft); margin:0 0 10px; }
.brief-card .narrative p em { color:var(--accent); font-style:normal; }

.brief-recs { display:flex; flex-direction:column; gap:14px; }
.rec {
  display:grid; grid-template-columns: 32px 1fr; gap:14px;
  padding:14px 0; border-top:0.5px solid var(--hair);
}
.rec:first-of-type { border-top:none; padding-top:0; }
.rec .n { font-family:var(--serif); font-size:24px; color:var(--accent); line-height:1; }
.rec .body .t { font-family:var(--serif); font-size:17px; line-height:1.25; color:var(--fg); }
.rec .body .s { font-size:13px; color:var(--fg-soft); margin-top:6px; line-height:1.45; }

.top-posts .item {
  display:grid; grid-template-columns: 42px 1fr auto; gap:12px;
  padding:12px 0; border-top:0.5px solid var(--hair); align-items:center;
}
.top-posts .item:first-of-type { border-top:none; }
.top-posts .item .thumb {
  width:42px; height:56px; border-radius:4px; border:0.5px solid var(--hair); background:var(--bg-card);
  position:relative; overflow:hidden;
}
.top-posts .item .thumb::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg, transparent 0 4px, rgba(255,255,255,0.04) 4px 5px); }
.top-posts .item .body .t { font-family:var(--serif); font-size:14.5px; line-height:1.25; color:var(--fg); }
.top-posts .item .body .s { font-family:var(--mono); font-size:10px; letter-spacing:0.1em; color:var(--fg-mute); margin-top:3px; text-transform:uppercase; }
.top-posts .item .val { font-family:var(--mono); font-size:13px; color:var(--accent); letter-spacing:0.05em; }

/* ──────────── PAGE: TRENDS ──────────── */
.trend-tabs { display:flex; gap:6px; margin-bottom:18px; }
.trend-tabs .chip.active { background:var(--fg); color:var(--bg); border-color:var(--fg); }

.trend-rows { background:var(--bg-elev); border:0.5px solid var(--hair); border-radius:10px; overflow:hidden; }
.trend-rowx {
  display:grid; grid-template-columns: 36px 1fr 120px 90px 80px;
  gap:18px; align-items:center;
  padding:14px 20px; border-top:0.5px solid var(--hair);
}
.trend-rowx:first-of-type { border-top:none; }
.trend-rowx .rank { font-family:var(--mono); font-size:11px; color:var(--fg-mute); letter-spacing:0.08em; }
.trend-rowx .name { font-family:var(--serif); font-size:17px; color:var(--fg); line-height:1.3; }
.trend-rowx .pls { font-family:var(--mono); font-size:10px; color:var(--fg-soft); letter-spacing:0.1em; }
.trend-rowx .dur { font-family:var(--mono); font-size:10px; color:var(--fg-mute); letter-spacing:0.1em; }
.trend-rowx .delta { font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:0.04em; text-align:right; }
.trend-rowx .delta.dn { color:var(--fg-mute); }
.trend-rowx:hover { background:var(--bg-hover); }

.memo {
  margin-top:18px;
  border:0.5px solid var(--hair); background:var(--bg-elev); border-radius:10px;
  padding:24px 26px;
}
.memo h3 { font-family:var(--serif); font-size:22px; margin:0 0 12px; font-weight:400; }
.memo .from { font-family:var(--mono); font-size:10px; letter-spacing:0.2em; color:var(--accent); text-transform:uppercase; margin-bottom:8px; }
.memo .bullets { display:flex; flex-direction:column; gap:10px; }
.memo .bullets .bullet { display:grid; grid-template-columns: 14px 1fr; gap:12px; align-items:flex-start; }
.memo .bullets .bullet .d { width:5px; height:5px; border-radius:50%; background:var(--accent); margin-top:9px; }
.memo .bullets .bullet p { margin:0; color:var(--fg-soft); font-size:13.5px; line-height:1.5; }

/* ──────────── TOAST ──────────── */
#toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(60px);
  z-index:100; padding:12px 22px;
  background:var(--bg-elev); border:0.5px solid var(--accent);
  border-radius:999px; color:var(--fg);
  font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
  opacity:0; transition:opacity 0.25s ease, transform 0.4s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
  box-shadow:0 16px 40px rgba(0,0,0,0.4);
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
#toast .dot { width:6px; height:6px; border-radius:50%; background:var(--accent); }

/* ──────────── RESPONSIVE ──────────── */
@media (max-width: 1100px) {
  .overview-grid, .brief-grid { grid-template-columns:1fr; }
  .edits-grid { grid-template-columns:repeat(2, 1fr); }
  .kpis { grid-template-columns:repeat(2, 1fr); }
  .shoot-card .list { grid-template-columns:1fr; }
}
@media (max-width: 720px) {
  .app { grid-template-columns:1fr; }
  .sb { display:none; }
  .edits-grid { grid-template-columns:1fr; }
  .cal-week { grid-template-columns:repeat(2, 1fr); }
}

/* ──────────── SAMPLE / DEMO BADGES ──────────── */
.sample {
  display:inline-block;
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:0.22em;
  padding:2px 6px;
  border-radius:3px;
  background:color-mix(in oklab, var(--accent) 16%, transparent);
  color:var(--accent);
  border:0.5px solid color-mix(in oklab, var(--accent) 40%, transparent);
  text-transform:uppercase;
  vertical-align:middle;
  margin-left:8px;
  position:relative; top:-1px;
  white-space:nowrap;
  font-weight:500;
}
.sample.sm { font-size:7.5px; padding:1px 5px; letter-spacing:0.18em; }

#demo-bar {
  position:sticky; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:8px 16px;
  background:color-mix(in oklab, var(--accent) 22%, var(--bg));
  border-bottom:0.5px solid color-mix(in oklab, var(--accent) 50%, transparent);
  font-family:var(--mono); font-size:10px; letter-spacing:0.2em;
  color:var(--fg-soft); text-transform:uppercase;
  height:34px;
}
#demo-bar b { color:var(--accent-ink); background:var(--accent); padding:2px 7px; border-radius:3px; font-weight:500; letter-spacing:0.22em; }
#demo-bar span.thin { color:var(--fg-mute); letter-spacing:0.16em; }
body.with-demo .app { height: calc(100vh - 34px); }