/* ============================================================
   HSG • Editorial Gymnasium design system
   ============================================================ */

:root {
  /* paper & ink */
  --paper: #f5efe1;
  --paper-2: #efe7d3;
  --surface: #fbf6e8;
  --surface-2: #f9f2df;
  --panel: #ffffff;
  --ink: #1a1814;
  --ink-2: #3a3630;
  --ink-soft: #6b6558;
  --ink-mute: #8f8979;
  --ink-faint: #b3ad9d;

  /* hairlines */
  --rule: #e3dac6;
  --rule-2: #d4c8a9;
  --rule-3: #c9bb98;

  /* status — muted, editorial */
  --oxblood: #7a2a2e;
  --oxblood-bg: #f0dfd9;
  --forest: #3f5a3a;
  --forest-bg: #dfe6d6;
  --gold:   #8a6a25;
  --gold-bg: #efe2c1;
  --navy:   #2a3f5f;
  --navy-bg: #d8dee8;
  --plum:   #5a3a55;
  --plum-bg: #e4d8e0;

  /* typography */
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --sans:  "IBM Plex Sans", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  /* density */
  --row-h: 44px;
  --pad: 16px;
  --pad-lg: 24px;

  --shadow-card: 0 1px 0 0 var(--rule);
  --shadow-pop:  0 12px 32px -16px rgba(20,16,8,0.18), 0 2px 4px rgba(20,16,8,0.06);
}

[data-density="compact"] {
  --row-h: 36px;
  --pad: 12px;
  --pad-lg: 18px;
}

[data-theme="dark"] {
  --paper: #15140f;
  --paper-2: #1d1b15;
  --surface: #1a1813;
  --surface-2: #221f18;
  --panel: #25221b;
  --ink: #f1ebd9;
  --ink-2: #d8d1bd;
  --ink-soft: #a39d8a;
  --ink-mute: #7a7466;
  --ink-faint: #4a463c;
  --rule: #2e2a21;
  --rule-2: #3a352a;
  --rule-3: #4a4332;
  --oxblood-bg: #3a201f;
  --forest-bg: #1f2d1c;
  --gold-bg: #322816;
  --navy-bg: #1c2433;
  --plum-bg: #2c2028;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#root, .app-root { min-height: 100vh; }

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

/* ===== Typography ===== */
.serif { font-family: var(--serif); font-weight: 400; }
.mono  { font-family: var(--mono);  font-weight: 400; }

.h-display {
  font-family: var(--serif);
  font-weight: 380;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.h-page {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.h-section {
  font-family: var(--serif);
  font-weight: 420;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.eyebrow {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}
.kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.metric {
  font-family: var(--serif);
  font-feature-settings: "tnum", "lnum";
  font-weight: 380;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.metric-sm {
  font-family: var(--serif);
  font-feature-settings: "tnum", "lnum";
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
}
.tnum { font-feature-settings: "tnum", "lnum"; }

/* ===== Editorial double-rule ===== */
.rule-double {
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
  height: 4px;
}
.rule-thin { border-top: 1px solid var(--rule); }
.rule-bold { border-top: 1px solid var(--ink); }

/* ===== Layout ===== */
.app-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  background: var(--paper);
}
[data-sidebar="rail"] .app-shell { grid-template-columns: 64px 1fr; }

.sidebar {
  background: var(--paper-2);
  border-right: 1px solid var(--rule);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topbar {
  height: 56px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 5;
}

.page {
  padding: 32px 40px 80px;
  max-width: 1480px;
}
[data-density="compact"] .page { padding: 22px 28px 60px; }

/* ===== Cards ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.card-flush {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.card-pad { padding: var(--pad-lg); }
.card-pad-sm { padding: var(--pad); }
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 3px;
  border: 1px solid var(--rule-2);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  transition: background 120ms, border-color 120ms;
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-faint); }
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--rule); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-lg { padding: 12px 20px; font-size: 14px; }

/* ===== Inputs ===== */
.input, .select, .textarea {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: border-color 120ms;
}
[data-theme="dark"] .input, [data-theme="dark"] .select, [data-theme="dark"] .textarea {
  background: var(--paper-2);
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--ink);
}
.input::placeholder { color: var(--ink-faint); }
.label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  margin-bottom: 6px;
  font-weight: 600;
}

/* ===== Badges / pills ===== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill .dot {
  width: 6px; height: 6px; border-radius: 999px; background: currentColor;
}
.pill-oxblood { background: var(--oxblood-bg); color: var(--oxblood); }
.pill-forest  { background: var(--forest-bg);  color: var(--forest); }
.pill-gold    { background: var(--gold-bg);    color: var(--gold); }
.pill-navy    { background: var(--navy-bg);    color: var(--navy); }
.pill-plum    { background: var(--plum-bg);    color: var(--plum); }
.pill-ink     { background: var(--surface-2);  color: var(--ink); border-color: var(--rule); }

/* ===== Avatar ===== */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--rule);
  flex-shrink: 0;
}
.avatar-lg { width: 56px; height: 56px; font-size: 20px; }
.avatar-sm { width: 24px; height: 24px; font-size: 11px; }

/* ===== Sidebar nav ===== */
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  margin: 1px 12px;
  border-radius: 3px;
  color: var(--ink-soft);
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms, color 120ms;
  position: relative;
}
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.active {
  background: var(--ink);
  color: var(--paper);
}
.nav-item.active .nav-meta { color: var(--paper); opacity: 0.7; }
.nav-item .nav-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; }
.nav-item .nav-meta { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--ink-mute); }

.nav-section {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 18px 28px 6px;
}

/* ===== Tables ===== */
.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.tbl th {
  text-align: left;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
  position: sticky;
  top: 0;
}
.tbl td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  vertical-align: middle;
}
.tbl tr:hover td { background: var(--surface-2); }
.tbl tr:last-child td { border-bottom: none; }

/* ===== Misc helpers ===== */
.hflow { display: flex; align-items: center; gap: 12px; }
.vflow { display: flex; flex-direction: column; gap: 12px; }
.between { display: flex; align-items: center; justify-content: space-between; }
.muted { color: var(--ink-mute); }
.soft  { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.tac { text-align: center; }
.tar { text-align: right; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }

.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

/* ===== Dot-leader (yearbook detail) ===== */
.leader {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.leader .leader-fill {
  flex: 1;
  border-bottom: 1px dotted var(--rule-3);
  transform: translateY(-4px);
}

/* ===== Progress / bar ===== */
.bar {
  height: 6px;
  background: var(--paper-2);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.bar > span {
  display: block;
  height: 100%;
  background: var(--ink);
}

/* ===== Step indicator ===== */
.steps { display: flex; align-items: center; gap: 4px; }
.step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 3px;
  font-size: 12px;
  color: var(--ink-mute);
}
.step.done { color: var(--ink); }
.step.active { background: var(--ink); color: var(--paper); }
.step .num {
  font-family: var(--serif);
  font-size: 13px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid currentColor;
  border-radius: 999px;
}
.step.active .num { border-color: var(--paper); }

/* ===== Kanban ===== */
.kanban {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.kanban-col {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  min-height: 600px;
}
.kanban-col-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kanban-col-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow-y: auto;
}
.kanban-card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 12px;
  cursor: grab;
  transition: border-color 120ms, box-shadow 120ms;
}
[data-theme="dark"] .kanban-card { background: var(--paper-2); }
.kanban-card:hover { border-color: var(--ink-faint); box-shadow: 0 4px 12px -8px rgba(20,16,8,0.2); }

/* ===== Funnel chart ===== */
.funnel { display: flex; flex-direction: column; gap: 6px; }
.funnel-row {
  display: grid;
  grid-template-columns: 110px 1fr 64px;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}
.funnel-bar {
  height: 28px;
  background: var(--ink);
  border-radius: 2px;
  position: relative;
}
.funnel-bar.ghost { background: var(--paper-2); border: 1px solid var(--rule); }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 999px; border: 2px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

/* ===== Wizard / public ===== */
.public-shell {
  background: var(--paper);
  min-height: 100vh;
  padding: 24px;
}
.public-card {
  max-width: 920px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
}

/* ===== Mobile preview frame ===== */
.phone {
  width: 360px;
  height: 740px;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 60px -30px rgba(20,16,8,0.3), 0 0 0 8px var(--paper-2);
}

/* ===== Animation primitives ===== */
@keyframes fadeUp { from { opacity:0; transform: translateY(6px);} to {opacity:1; transform: none;} }
.fade-up { animation: fadeUp 240ms ease-out both; }

/* ===== Tweaks panel override (cream) ===== */
.tweaks-panel {
  background: var(--surface) !important;
  border: 1px solid var(--rule-2) !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
}

/* ============================================================
   Responsive
   ============================================================ */

.topbar-menu { display: none; }
.topbar-search-icon { display: none; }
.sidebar-scrim { display: none; }

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
  .page { padding: 24px 24px 60px; }
  .grid-12 { grid-template-columns: repeat(6, 1fr); }
  .col-8 { grid-column: span 6; }
  .col-6 { grid-column: span 6; }
  .col-4 { grid-column: span 3; }
  .col-3 { grid-column: span 3; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .kanban { grid-template-columns: repeat(5, 280px); overflow-x: auto; padding-bottom: 12px; }
  .topbar-search .input { width: 200px; }
  .h-display { font-size: 36px; }
}

/* Phone (≤ 720px) */
@media (max-width: 720px) {
  body { font-size: 14px; }

  /* Sidebar becomes off-canvas drawer */
  .app-shell { grid-template-columns: 1fr !important; }
  [data-sidebar="rail"] .app-shell { grid-template-columns: 1fr !important; }
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 280px;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 220ms ease;
    z-index: 60;
    box-shadow: 0 0 32px rgba(20,16,8,0.18);
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-scrim {
    display: block;
    position: fixed; inset: 0;
    background: rgba(20,16,8,0.4);
    z-index: 55;
    animation: fadeUp 200ms ease both;
  }

  /* Topbar */
  .topbar {
    height: 52px;
    padding: 0 12px;
    gap: 8px;
  }
  .topbar-menu { display: inline-flex; }
  .topbar-kicker, .topbar-chev { display: none; }
  .topbar-title { font-size: 14px !important; }
  .topbar-search { display: none; }
  .topbar-search-icon { display: inline-flex; }
  .topbar-cta { padding: 6px 10px; font-size: 12px; }
  .topbar-cta-label { display: none; }

  /* Page padding */
  .page { padding: 18px 16px 80px !important; max-width: 100%; }

  /* Type scale */
  .h-display { font-size: 30px; }
  .h-page { font-size: 22px; }
  .h-section { font-size: 16px; }
  .metric { font-size: 30px; }

  /* Grids stack */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; gap: 12px; }
  .grid-12 { grid-template-columns: 1fr !important; gap: 12px; }
  .col-3, .col-4, .col-6, .col-8, .col-9, .col-12 { grid-column: 1 / -1 !important; }

  /* Kanban: horizontal scroll */
  .kanban {
    grid-template-columns: repeat(5, 86vw);
    gap: 10px;
    overflow-x: auto;
    padding: 0 16px 12px;
    margin: 0 -16px;
    scroll-snap-type: x mandatory;
  }
  .kanban-col { scroll-snap-align: start; min-height: 480px; }

  /* Tables → horizontal scroll wrapper */
  .card .tbl, .card-flush .tbl { display: block; overflow-x: auto; white-space: nowrap; }
  .tbl th, .tbl td { padding: 10px 10px; }

  /* Cards more breathing room */
  .card-pad { padding: 16px; }
  .card-pad-sm { padding: 12px; }
  .card-head { padding: 12px 14px; }

  /* Funnel */
  .funnel-row { grid-template-columns: 90px 1fr 44px; gap: 8px; font-size: 11px; }

  /* Buttons full width sometimes */
  .btn-lg { padding: 10px 16px; font-size: 13px; }
  .btn { padding: 7px 12px; }
  .btn-sm { padding: 5px 9px; }

  /* Inputs */
  .input, .select, .textarea { padding: 10px 12px; font-size: 14px; }

  /* Stepper compresses */
  .step span:not(.num) { display: none; }
  .step { padding: 4px 6px; }

  /* Public landing tweaks */
  .public-shell { padding: 0 !important; }

  /* Phone preview frame: scale to fit */
  .phone {
    width: 320px;
    height: 640px;
  }

  /* Tweaks panel: bottom sheet */
  .tweaks-panel {
    width: calc(100vw - 24px) !important;
    max-width: 360px !important;
    right: 12px !important;
    bottom: 12px !important;
  }
}

/* Very small (≤ 420px) */
@media (max-width: 420px) {
  .h-display { font-size: 26px; }
  .kanban { grid-template-columns: repeat(5, 90vw); }
  .phone { width: 290px; height: 580px; }
}

/* Wizard / public pages — collapse inline grids on phone */
@media (max-width: 720px) {
  .public-shell { padding: 0 !important; }
  .public-card { margin: 0 12px !important; border-radius: 0 !important; }
  .public-card > div[style*="32px"] { padding: 20px 18px !important; }
  .public-card > div > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Calendar grid keep 7-col, slots keep 3-col */
  .public-card div[style*="repeat(7"] { grid-template-columns: repeat(7, 1fr) !important; }
  .public-card div[style*="repeat(3"] { grid-template-columns: repeat(3, 1fr) !important; }
  .public-card div[style*="repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
  /* Step ribbon */
  .public-card div[style*="repeat(8"], .public-card div[style*="repeat(${"] {
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 2px !important;
  }
  /* Public landing */
  .public-shell header > div { padding: 12px 16px !important; flex-wrap: wrap; gap: 8px; }
  .public-shell header nav { display: none !important; }
  .public-shell section[style*="72px"] { padding: 40px 18px !important; }
  .public-shell section[style*="56px"] { padding: 32px 18px !important; }
  .public-shell section h1 { font-size: 36px !important; }
  .public-shell section h2 { font-size: 26px !important; }
  .public-shell section[style*="repeat(5"] > div { grid-template-columns: repeat(2, 1fr) !important; gap: 18px !important; }
  .public-shell section > div[style*="grid-template-columns: 1.4fr"] {
    grid-template-columns: 1fr !important;
    padding: 32px 22px !important;
  }
}