/* Dashboard + auth — editorial-craft, matches homepage.css tokens (dispatch 040). */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/cormorant-garamond-300-latin.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/cormorant-garamond-500-latin.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/cormorant-garamond-400i-latin.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/jetbrains-mono-400-latin.woff2') format('woff2'); }

:root {
  /* Live tokens — DO NOT RENAME (auth pages + existing surfaces depend on these). */
  --paper:#FFFFFF; --ink:#000000; --body:#1A1A1A; --mute:#6B7280;
  --sky:#D3E3FD; --sky-deep:#BBD0F8; --ivory:#FBFAF6; --taupe:#EDE7DD;
  --rule:rgba(0,0,0,0.14); --rule-strong:rgba(0,0,0,0.32);
  --ok:#1F7A4D; --warn:#9A6B00; --err:#A12A2A;

  /* ---------- 045e Phase 1 ----------
     Token reconciliation with the v7 dashboard handoff. The handoff CSS
     uses --accent / --paper-cream / --paper-stone names; we alias them to
     the live tokens so handoff snippets paste cleanly without rewriting,
     and the live token names keep working everywhere else. */
  --accent: var(--sky);
  --accent-deep: var(--sky-deep);
  --accent-ink: #2A4F8E;
  --paper-cream: var(--ivory);
  --paper-stone: var(--taupe);
  --paper-2: #F6F8FC;
  --mute-2: #9BA1AC;

  /* Status palettes (the handoff's pill-shaped status pills). */
  --status-draft-bg: #FFF5E6;
  --status-draft-text: #6F4A0F;
  --status-draft-border: #E6A85B;
  --status-published-bg: var(--accent);
  --status-published-text: var(--accent-ink);

  /* The 5 platform color-dots (16x16 round). */
  --plat-amazon-bg:#FFF6E6;    --plat-amazon-border:#E0B66F;    --plat-amazon-text:#6F4A0F;
  --plat-etsy-bg:#FFE9D9;      --plat-etsy-border:#E08D5F;      --plat-etsy-text:#5C2E10;
  --plat-shopify-bg:#DEF0E2;   --plat-shopify-border:#6FA683;   --plat-shopify-text:#1F4A2C;
  --plat-pinterest-bg:#FFE3E3; --plat-pinterest-border:#D26A6A; --plat-pinterest-text:#5C1E1E;
  --plat-instagram-bg:#FCE7F1; --plat-instagram-border:#C56FA0; --plat-instagram-text:#5C1E45;

  /* Radii: sharp cards (intentional — paper aesthetic), pill chips, soft buttons. */
  --r-card: 0;
  --r-pill: 999px;
  --r-button: 4px;

  /* Shell dimensions — spacious default (the handoff's compact-density tweak
     is intentionally NOT ported — see dispatch §Phase 1 "strip Tweaks"). */
  --sidebar-w: 248px;
  --topbar-h: 64px;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; background:var(--ivory); color:var(--body); }
body {
  font-family:'DM Sans', system-ui, sans-serif; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
/* paper grain — same recipe as the homepage */
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch' seed='4'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
a { color:inherit; }
.display { font-family:'Cormorant Garamond', serif; font-weight:300; letter-spacing:-0.02em; line-height:1.05; color:var(--ink); margin:0; }
.ital { font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:400; }
.mono { font-family:'JetBrains Mono', ui-monospace, monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); }
.u-sky { background:linear-gradient(transparent 62%, var(--sky) 62%, var(--sky) 92%, transparent 92%); }

/* ---------- auth pages ---------- */
.auth-wrap { min-height:100vh; display:grid; grid-template-columns:1fr; }
@media (min-width:900px){ .auth-wrap.two { grid-template-columns:1.05fr .95fr; } }
.auth-form-col { display:flex; align-items:center; justify-content:center; padding:48px 28px; }
.auth-aside { display:none; background:var(--taupe); padding:56px 44px; }
@media (min-width:900px){ .auth-aside { display:flex; flex-direction:column; justify-content:center; } }
.auth-card { width:100%; max-width:420px; }
.auth-card h1 { font-family:'Cormorant Garamond', serif; font-weight:300; font-size:44px; margin:0 0 6px; }
.auth-card .sub { color:var(--mute); margin:0 0 28px; }
label { display:block; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--mute); margin:18px 0 6px; }
input, select, textarea {
  width:100%; padding:13px 14px; font:inherit; color:var(--ink); background:var(--paper);
  border:1px solid var(--rule-strong); border-radius:0; outline:none;
}
input:focus, select:focus, textarea:focus { border-color:var(--ink); box-shadow:0 0 0 3px var(--sky); }
textarea { min-height:84px; resize:vertical; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  font:inherit; font-weight:500; padding:14px 22px; border:1px solid var(--ink);
  background:var(--ink); color:var(--paper); text-decoration:none; border-radius:0;
  transition:background .18s, color .18s, transform .12s;
}
.btn:hover { background:var(--paper); color:var(--ink); }
.btn:disabled { opacity:.5; cursor:progress; }
.btn.block { width:100%; }
.btn.ghost { background:transparent; color:var(--ink); }
.btn.ghost:hover { background:var(--ink); color:var(--paper); }
.btn.sky { background:var(--sky); border-color:var(--sky); color:var(--ink); }
.btn.sky:hover { background:var(--sky-deep); border-color:var(--sky-deep); }
.muted { color:var(--mute); }
.tiny { font-size:13px; }
.note { padding:12px 14px; border:1px solid var(--rule); background:var(--paper); margin:14px 0; font-size:14px; }
.note.err { border-color:var(--err); color:var(--err); }
.note.ok { border-color:var(--ok); color:var(--ok); }
.plan-pick { display:grid; gap:10px; margin-top:8px; }
.plan-opt { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:14px; border:1px solid var(--rule-strong); cursor:pointer; }
.plan-opt[aria-selected="true"] { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); background:var(--paper); }
.plan-opt .pr { font-family:'Cormorant Garamond', serif; font-size:28px; }

/* ============================================================
   045e Phase 1 — dashboard shell (v7 handoff)
   Layout: .app (height:100vh; overflow:hidden) → .sidebar | .main
   .main is the scroll context. Topbar is position:sticky inside it.
   The screen padding/max-width lives on .screen (the wrapper inside #content).
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  overflow: hidden;
}
@media (max-width: 840px) {
  .app { grid-template-columns: 1fr; height: auto; overflow: visible; }
}

/* SIDEBAR — cream column, full height, brand at top, profile pinned bottom */
.sidebar {
  background: var(--paper-cream);
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column;
  overflow: hidden;
}
@media (max-width: 840px) {
  .sidebar { border-right: none; border-bottom: 1px solid var(--rule); }
}
.sb-brand {
  padding: 22px 24px 18px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--rule);
}
.sb-brand-logo { height: 56px; width: auto; margin: -14px 0; display: block; }

.sb-section { padding: 16px 12px 4px; }
.sb-section h5 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mute);
  margin: 0 12px 8px;
}
.sb-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-button);
  color: var(--body); text-decoration: none;
  font-size: 14.5px; font-weight: 500; letter-spacing: -0.003em;
  cursor: pointer;
  transition: background .15s ease;
}
.sb-link:hover { background: rgba(0,0,0,0.04); }
.sb-link.active { background: var(--ink); color: var(--paper); }
.sb-link.active .sb-link-count { color: rgba(255,255,255,0.55); }
.sb-link.disabled {
  cursor: not-allowed; opacity: 0.5;
  /* Reserved for dispatch 043 — Brand voice / Pro Memory tab. */
}
.sb-link.disabled:hover { background: transparent; }
.sb-link-icon {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; opacity: 0.85;
}
.sb-link-icon svg { width: 16px; height: 16px; }
.sb-link.active .sb-link-icon { opacity: 1; }
.sb-link-count {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em;
  color: var(--mute);
}
.sb-link-soon {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mute-2);
}

.sb-spacer { flex: 1; }

.sb-quota {
  padding: 12px 16px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mute);
}
.sb-quota .bar {
  height: 6px; background: var(--paper-2); margin-top: 8px;
  border-radius: var(--r-pill); overflow: hidden;
}
.sb-quota .bar > i { display: block; height: 100%; background: var(--accent-deep); }

.sb-profile {
  padding: 14px 16px;
  border-top: 1px solid var(--rule);
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px;
}
.sb-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 18px; font-weight: 500;
  flex-shrink: 0;
}
.sb-profile-text { min-width: 0; flex: 1; }
.sb-profile-name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 17px;
  color: var(--ink); line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-profile-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mute);
  margin-top: 2px;
}
.sb-signout {
  margin: 0 16px 16px;
  background: transparent; border: 1px solid var(--rule-strong);
  color: var(--ink);
  padding: 8px 12px; cursor: pointer;
  font: inherit; font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: var(--r-button);
}
.sb-signout:hover { background: var(--ink); color: var(--paper); }

/* MAIN CONTENT — scroll context for the sticky topbar */
.main {
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
@media (max-width: 840px) { .main { overflow-y: visible; } }

/* TOPBAR — sticky, breadcrumb / spacer / [search] / bell / +New CTA */
.topbar {
  height: var(--topbar-h);
  padding: 0 32px;
  display: flex; align-items: center; gap: 20px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky; top: 0; z-index: 5;
}
.topbar .breadcrumb {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.005em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar .breadcrumb a { color: var(--mute); text-decoration: none; }
.topbar .breadcrumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.topbar .breadcrumb .sep { color: var(--mute-2); margin: 0 8px; font-style: normal; }
.topbar .spacer { flex: 1; }
.topbar .search {
  display: flex; align-items: center; gap: 8px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 8px 14px;
  min-width: 260px;
  border-radius: var(--r-button);
  color: var(--mute); font-size: 13px;
}
.topbar .search svg { width: 14px; height: 14px; opacity: 0.55; }
.topbar .search input {
  border: none; outline: none; background: transparent;
  flex: 1; font: inherit; color: var(--ink);
}
.topbar .search input::placeholder { color: var(--mute); }
.topbar .icon-btn {
  width: 36px; height: 36px;
  border-radius: var(--r-button);
  background: transparent; border: 1px solid transparent;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); cursor: pointer;
}
.topbar .icon-btn:hover { background: rgba(0,0,0,0.04); }
.topbar .icon-btn svg { width: 16px; height: 16px; }
.topbar .topbar-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid var(--accent);
  padding: 8px 16px; border-radius: var(--r-button);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.topbar .topbar-cta:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--ink); }

/* SCREEN — the padded content wrapper inside .main (sibling to .topbar). */
.screen {
  padding: 36px 40px 64px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
@media (max-width: 840px) { .screen { padding: 24px 18px 64px; } }

/* Topbar search visibility — only on Home + Library per Phase 1 spec.
   The active-route class controls it. */
.app:not([data-active="/dashboard"]):not([data-active="/dashboard/library"]) .topbar .search { display: none; }

@media (max-width: 720px) {
  .topbar { padding: 0 16px; gap: 10px; }
  .topbar .search { display: none; }
  .topbar .breadcrumb { font-size: 18px; }
  .topbar .topbar-cta { padding: 8px 12px; font-size: 12px; }
}

/* Legacy classes still used by existing dashboard pages — keep them so the
   inner page HTML keeps rendering inside the new shell unchanged. */
.badge { font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:5px 9px; background:var(--sky); color:var(--ink); }
.badge.warn { background:#F6E7C8; }
.h-title { font-family:'Cormorant Garamond', serif; font-weight:300; font-size:40px; margin:0 0 4px; }
.cards { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.card { border:1px solid var(--rule); background:var(--paper); padding:18px; display:flex; flex-direction:column; gap:8px; }
.card h3 { margin:0; font-family:'Cormorant Garamond', serif; font-weight:400; font-size:21px; }
.card .meta { font-size:13px; color:var(--mute); display:flex; gap:8px; flex-wrap:wrap; }
.cta-row { display:flex; gap:12px; flex-wrap:wrap; margin:22px 0; }
.stat { border:1px solid var(--rule); background:var(--paper); padding:18px 20px; }
.bar { height:8px; background:var(--taupe); margin-top:8px; }
.bar > i { display:block; height:100%; background:var(--sky-deep); }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--rule); margin:8px 0 22px; }
.tabs button { background:none; border:none; border-bottom:2px solid transparent; padding:10px 14px; cursor:pointer; font:inherit; color:var(--mute); }
.tabs button.active { color:var(--ink); border-bottom-color:var(--ink); font-weight:500; }
.folder { border:1px solid var(--rule); background:var(--paper); margin-bottom:10px; }
.folder > summary { padding:14px 16px; cursor:pointer; font-weight:500; list-style:none; }
.folder > summary::-webkit-details-marker { display:none; }
.kebab { position:relative; }
.kebab > button { background:none; border:1px solid var(--rule); padding:4px 10px; cursor:pointer; }
.kebab .menu { position:absolute; right:0; top:110%; background:var(--paper); border:1px solid var(--rule-strong); min-width:150px; z-index:5; display:none; }
.kebab.open .menu { display:block; }
.kebab .menu button { display:block; width:100%; text-align:left; background:none; border:none; padding:10px 14px; cursor:pointer; font:inherit; }
.kebab .menu button:hover { background:var(--ivory); }
.empty { border:1px dashed var(--rule-strong); padding:48px; text-align:center; color:var(--mute); }
.field-block { border-top:1px solid var(--rule); padding:18px 0; }
.field-block .lbl { font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-bottom:8px; }
.kw { display:inline-block; background:var(--sky); padding:4px 9px; margin:3px 4px 0 0; font-family:'JetBrains Mono', monospace; font-size:11px; }
.drop { border:1.5px dashed var(--rule-strong); padding:26px; text-align:center; cursor:pointer; background:var(--paper); }
.drop.has { border-style:solid; border-color:var(--ink); }
.spin { display:inline-block; width:14px; height:14px; border:2px solid var(--rule-strong); border-top-color:var(--ink); border-radius:50%; animation:sp 0.8s linear infinite; }
@keyframes sp { to { transform:rotate(360deg); } }
.hidden { display:none !important; }