/* ==========================================================================
   Bakkerij FUNK — Studio (owner workspace)
   Shared stylesheet for /studio/*
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Space+Mono:wght@400;700&display=swap');

:root {
  --paper: #dedede;
  --paper-2: #c8c8c8;
  --paper-3: #f4efe6;
  --ink: #111111;
  --blue: #0B3D91;
  --red: #8b0000;
  --green: #006400;
  --acid: #3ed660;
  --apricot: #ee9441;
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --rule: 1px solid rgba(17, 17, 17, .35);
  --f-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --f-body: 'Archivo', 'Inter', system-ui, -apple-system, sans-serif;
  --f-mono: 'Space Mono', 'Courier New', monospace;

  /* studio surface tokens */
  --st-bg: #f6f2ea;
  --st-card: #fdfbf7;
  --st-line: rgba(17, 17, 17, .14);
  --st-line-soft: rgba(17, 17, 17, .08);
  --st-mute: #6c655d;
  --st-rail: #f1ece2;
  --st-active: #8b0000;
  --st-active-ink: #fdfbf7;
  --shadow-sm: 0 1px 2px rgba(17, 17, 17, .05), 0 1px 1px rgba(17, 17, 17, .03);
  --shadow-md: 0 8px 24px -14px rgba(17, 17, 17, .28), 0 2px 4px rgba(17, 17, 17, .04);
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--st-bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--st-active);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  font-weight: 600;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   Layout shell
   ========================================================================== */

.studio-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100vh;
  align-items: start;
}

/* ---------- Rail ---------- */

.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 14px 18px;
  background: var(--st-rail);
  border-right: 1px solid var(--st-line);
  overflow-y: auto;
  scrollbar-width: thin;
}

.rail__brand {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 2px 6px 10px;
}

.rail__brand svg { flex: none; }

.rail__mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 30px;
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--blue);
}
.rail__mark em {
  display: block;
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--st-mute);
  margin-top: 5px;
}

.rail__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rail__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: #2a2622;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.rail__link .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--ink);
  opacity: .85;
  transition: background .18s ease;
}
.rail__link:hover {
  background: rgba(17, 17, 17, .07);
}
.rail__link[aria-current="page"],
.rail__link.is-active {
  background: var(--st-active);
  color: var(--st-active-ink);
  box-shadow: 0 2px 10px -6px rgba(139, 0, 0, .9);
}
.rail__link[aria-current="page"] .dot,
.rail__link.is-active .dot { background: var(--apricot); opacity: 1; }

.rail__link--ghost {
  margin-top: 10px;
  color: var(--st-mute);
  font-weight: 500;
  align-items: flex-start;
  cursor: default;
}
.rail__link--ghost .dot { background: var(--st-mute); margin-top: 6px; }

/* ghost items wrap their long label instead of forcing the rail wider */
.rail__link--ghost {
  flex-wrap: wrap;
  row-gap: 4px;
  font-size: 12.5px;
  line-height: 1.3;
}

/* "coming soon" marker shared by every rail item */
.rail__link .soon,
.rail__link .pill {
  margin-left: auto;
  flex: none;
  font-family: var(--f-mono);
  font-size: 8.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8c4c0c;
  background: rgba(238, 148, 65, .2);
  border: 1px solid rgba(238, 148, 65, .4);
  border-radius: 999px;
  padding: 2px 7px;
  align-self: flex-start;
  margin-top: 1px;
}

.rail__foot {
  margin-top: auto;
  padding: 10px 12px 0;
  border-top: 1px solid var(--st-line-soft);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--st-mute);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rail__foot a {
  color: var(--st-active);
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
  padding-bottom: 1px;
}

/* ---------- Main ---------- */

.main {
  min-width: 0;
  padding: clamp(18px, 2.4vw, 34px) clamp(16px, 2.6vw, 40px) 56px;
}

/* Mobile top bar */
.topbar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(246, 242, 234, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--st-line);
}
.topbar__brand {
  font-family: Georgia, serif;
  font-size: 20px;
  color: var(--blue);
  margin-right: auto;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--st-line);
  background: var(--st-card);
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.icon-btn:hover { background: #fff; border-color: rgba(17,17,17,.3); }
.icon-btn:active { transform: scale(.97); }

/* ==========================================================================
   Page head
   ========================================================================== */

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 22px;
  padding-bottom: 18px;
}
.page-head__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 45px);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0;
  max-width: 26ch;
  text-wrap: balance;
}
.page-head__title span { color: var(--st-active); }
.page-head__sub {
  font-size: clamp(14px, 1.2vw, 17px);
  color: #3a3530;
  margin: 0;
}

/* greeting row */
.greet-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.greet-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--st-active);
  color: #fff;
  border: 0;
  border-radius: var(--r-sm);
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px -12px rgba(139, 0, 0, .9);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.greet-btn:hover { background: #a01111; transform: translateY(-1px); }
.greet-btn:active { transform: translateY(0); }

.chip-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--st-line);
  background: var(--st-card);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: 12.5px;
  font-family: var(--f-mono);
  color: #4a443d;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.chip-select:hover { border-color: rgba(17,17,17,.32); background: #fff; }

.stars { display: inline-flex; gap: 3px; }
.stars svg { width: 12px; height: 12px; }

/* ==========================================================================
   Hero KPI strip
   ========================================================================== */

.kpi-strip {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(180px, 1.1fr) auto;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  padding: 6px 0 4px;
}

.kpi {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.kpi__icon {
  font-size: 21px;
  line-height: 1;
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(238, 148, 65, .16);
}
.kpi__num {
  font-family: Georgia, serif;
  font-size: clamp(30px, 3.1vw, 42px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kpi__num small {
  font-size: .5em;
  letter-spacing: 0;
}
.kpi__label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--st-mute);
  margin-top: 6px;
}
.kpi__label b { color: var(--green); letter-spacing: .04em; }

.kpi__meter {
  min-width: 0;
}
.meter {
  display: flex;
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  background: #e6dfd3;
  box-shadow: inset 0 0 0 1px rgba(17,17,17,.05);
}
.meter span { display: block; height: 100%; }
.meter .m1 { width: 34%; background: #1f7a3a; }
.meter .m2 { width: 18%; background: #4fae63; }
.meter .m3 { width: 16%; background: #9fd39c; }
.meter .m4 { width: 16%; background: #f3d6cc; }
.meter .m5 { width: 16%; background: #b8342a; }
.kpi__meter-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--st-mute);
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.kpi__meter-label b { color: var(--ink); }

.kpi__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.round-btn {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--st-line);
  background: var(--st-card);
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.round-btn:hover { background: #fff; transform: translateX(1px); }

.search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--st-line);
  background: var(--st-card);
  border-radius: 999px;
  padding: 0 12px;
  height: 38px;
  min-width: 190px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.search:focus-within {
  border-color: rgba(139,0,0,.5);
  box-shadow: 0 0 0 3px rgba(139,0,0,.1);
}
.search input {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  width: 100%;
  min-width: 0;
  outline: none;
  color: var(--ink);
}
.search input::placeholder { color: #948c82; }

/* ==========================================================================
   Sections & cards
   ========================================================================== */

.board {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  margin-top: 22px;
  --col-w: minmax(0, 1fr);
}

/* 4-column board: left rail-modules + main column + two right columns */
.board__grid {
  display: grid;
  grid-template-columns: 172px minmax(0, 1.35fr) minmax(0, .92fr) minmax(0, .96fr);
  gap: clamp(14px, 1.4vw, 18px);
  align-items: start;
}

.col { display: grid; gap: clamp(12px, 1.3vw, 16px); align-content: start; }

.card {
  position: relative;
  background: var(--st-card);
  border: 1px solid var(--st-line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 14px 15px;
  transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}
.card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(17,17,17,.16);
}
.card--pad-sm { padding: 12px 13px; }
.card--tint { background: linear-gradient(180deg, #fdfbf7, #faf6ee); }

.card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.card__title {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #3c3731;
  margin: 0;
  font-weight: 700;
}
.card__head .chev {
  margin-left: auto;
  color: #a29a90;
  flex: none;
  transition: transform .2s ease, color .2s ease;
}
.card:hover .card__head .chev { transform: translateX(2px); color: var(--ink); }

/* ---------- Left mini modules ---------- */

.mini-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mini-list li { border-bottom: 1px solid var(--st-line-soft); }
.mini-list li:last-child { border-bottom: 0; }
.mini-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 2px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: #3c3731;
  transition: color .16s ease, background .16s ease;
  border-radius: 4px;
}
.mini-list a:hover { color: var(--st-active); background: rgba(139,0,0,.045); }
.mini-list .val { color: var(--green); font-size: 10.5px; letter-spacing: .02em; }
.mini-list .val--blue { color: var(--blue); }
.mini-list .val--red { color: #a01111; }

.type-stack {
  font-size: 12px;
  line-height: 1.32;
  color: #3c3731;
}
.type-stack span { display: block; }
.type-stack .mono { font-family: var(--f-mono); font-size: 11px; color: var(--st-mute); }

.receipt {
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--st-mute);
  border-top: 1px dashed rgba(17,17,17,.2);
  padding-top: 8px;
  margin-top: 4px;
}
.receipt .sku { text-decoration: line-through; text-decoration-color: rgba(139,0,0,.5); }
.receipt .total {
  display: block;
  font-size: 14px;
  color: var(--st-active);
  margin-top: 4px;
  font-weight: 700;
}

/* ---------- Editor card ---------- */

.editor {
  font-family: var(--f-body);
}
.editor h3 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 16.5px;
  letter-spacing: -.01em;
  margin: 0 0 6px;
}
.editor__sub {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--st-mute);
  margin: 0 0 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.editor__sub i { font-style: normal; color: #b3a99c; }

.editor__body {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.editor__thumb {
  width: 96px;
  aspect-ratio: 1 / 1.12;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #e6dfd3;
  box-shadow: 0 4px 12px -8px rgba(17,17,17,.6);
}
.editor__thumb img { width: 100%; height: 100%; object-fit: cover; }

.editor__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
}
.editor__menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  color: #221f1c;
  transition: background .16s ease, color .16s ease, padding-left .16s ease;
}
.editor__menu a::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #cdc4b7;
  flex: none;
  transition: background .16s ease;
}
.editor__menu a:hover {
  background: rgba(139,0,0,.06);
  color: var(--st-active);
  padding-left: 10px;
}
.editor__menu a:hover::before { background: var(--st-active); }
.editor__menu li:last-child a { font-weight: 700; }

/* ---------- Sessions table card ---------- */

.tbl { width: 100%; border-collapse: collapse; font-family: var(--f-mono); font-size: 11.5px; }
.tbl th {
  text-align: left;
  font-weight: 400;
  color: var(--st-mute);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 0 0 8px;
}
.tbl td {
  padding: 7px 0;
  border-top: 1px solid var(--st-line-soft);
  color: #2b2723;
  vertical-align: middle;
}
.tbl td:last-child, .tbl th:last-child { text-align: right; }
.tbl .bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(0,100,0,.1);
  color: var(--green);
  font-weight: 700;
  font-size: 10.5px;
}
.tbl .bar--warm { background: rgba(238,148,65,.16); color: #a4560f; }
.tbl .bar--low { background: rgba(139,0,0,.09); color: #a01111; }
.tbl tfoot td { border-top: 1px solid var(--st-line); padding-top: 9px; }

/* ---------- Media / agenda card ---------- */

.media-card { padding: 0; overflow: hidden; }
.media-card__img {
  width: 100%;
  aspect-ratio: 16 / 10.5;
  object-fit: cover;
  background: #ddd4c6;
}
.media-card__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--st-mute);
  border-top: 1px solid var(--st-line-soft);
}
.media-card__foot .tag {
  margin-left: auto;
  color: var(--st-active);
  border: 1px solid rgba(139,0,0,.3);
  border-radius: 999px;
  padding: 1px 8px;
  letter-spacing: .04em;
}

/* ---------- Right column: inbox / type ---------- */

.type-panel {
  display: grid;
  gap: 10px;
  padding-bottom: 6px;
}
.script {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 20px;
  color: var(--apricot);
  line-height: 1;
}
.type-spec {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--st-mute);
}
.tone-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tone {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 8px;
  border: 1px solid var(--st-line);
  color: #544d45;
}
.tone--dark { background: var(--blue); border-color: var(--blue); color: #fff; }
.tone--acid { background: var(--acid); border-color: #2fb84d; color: #0b2a12; }
.tone--red { background: var(--red); border-color: var(--red); color: #fff; }

.palette { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.palette a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 6px;
  border-radius: 5px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: #2b2723;
  transition: background .16s ease;
}
.palette a:hover { background: rgba(17,17,17,.045); }
.palette .sw {
  width: 11px; height: 11px;
  border-radius: 2px;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(17,17,17,.18);
}
.palette code { margin-left: auto; color: var(--st-mute); font-size: 10px; letter-spacing: .06em; }

/* ---------- Right column: recency ---------- */

.recency { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.recency li { border-top: 1px solid var(--st-line-soft); }
.recency li:first-child { border-top: 0; }
.recency a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 4px;
  font-size: 12.5px;
  line-height: 1.35;
  color: #2b2723;
  border-radius: 6px;
  transition: background .16s ease, color .16s ease;
}
.recency a:hover { background: rgba(17,17,17,.045); color: var(--ink); }
.recency .ico { flex: none; margin-top: 1px; color: var(--st-mute); }
.recency .ico--hi { color: var(--st-active); }
.recency .pill {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  border-radius: 4px;
  padding: 1px 6px;
  background: rgba(62,214,96,.18);
  color: #0b5c1f;
  white-space: nowrap;
}
.recency .chev { margin-left: auto; color: #b3a99c; flex: none; }

/* ---------- Signature strip ---------- */

.signature {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 34px);
  padding: 18px 22px;
  background: linear-gradient(105deg, #fdfbf7 0%, #f8f2e6 60%, #f4ece0 100%);
  border: 1px solid var(--st-line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.signature__script {
  font-family: Georgia, 'Segoe UI Symbol', serif;
  font-style: italic;
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.15;
  color: #2b2723;
  transform: rotate(-2.2deg);
  max-width: 15ch;
}
.signature__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: #5b544c;
}
.signature__meta .divider { width: 1px; height: 14px; background: rgba(17,17,17,.24); }
.signature__meta .live { display: inline-flex; align-items: center; gap: 6px; }
.signature__meta .live .pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--st-active);
  box-shadow: 0 0 0 3px rgba(139,0,0,.14);
}
.signature__chev { margin-left: auto; color: #a29a90; }

/* ==========================================================================
   Footer
   ========================================================================== */

.studio-foot {
  margin-top: clamp(28px, 3vw, 44px);
  padding-top: 18px;
  border-top: 1px solid var(--st-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--st-mute);
}
.studio-foot nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.studio-foot a { border-bottom: 1px solid transparent; padding-bottom: 1px; transition: color .16s ease, border-color .16s ease; }
.studio-foot a:hover { color: var(--st-active); border-color: currentColor; }
.studio-foot__right { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.studio-foot__right .badge {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--st-line);
  border-radius: 999px;
  padding: 3px 9px;
  color: #3d3831;
}

/* ==========================================================================
   Motion
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

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

@media (max-width: 1180px) {
  .board__grid {
    grid-template-columns: 170px minmax(0, 1.3fr) minmax(0, 1fr);
  }
  .board__grid > .col--right2 { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  .board__grid > .col--right2 > .col { display: contents; }
  .board__grid > .col--right2 .card { grid-row: auto; }
}

@media (max-width: 1000px) {
  .studio-shell { grid-template-columns: 1fr; }
  .rail {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(84vw, 300px);
    z-index: 120;
    transform: translateX(-102%);
    transition: transform .32s cubic-bezier(.3,.7,.25,1);
    box-shadow: 30px 0 60px -30px rgba(17,17,17,.5);
    height: 100%;
  }
  .rail.is-open { transform: none; }
  body.nav-open { overflow: hidden; }
  .topbar { display: flex; }
  .rail__brand { padding-top: 0; }
  .nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(17, 17, 17, .38);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
  }
  .nav-scrim.is-on { opacity: 1; pointer-events: auto; }
  .board__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .board__grid > .col--left { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
  .board__grid > .col--left > .card { height: 100%; }
  .board__grid > .col--main { grid-column: 1 / -1; }
  .kpi-strip { grid-template-columns: 1fr 1fr; gap: 16px 20px; }
  .kpi__actions { justify-content: flex-end; }
}

@media (min-width: 1001px) {
  .nav-scrim { display: none; }
}

@media (max-width: 760px) {
  .page-head { padding-bottom: 12px; }
  .page-head__title { font-size: clamp(24px, 7vw, 32px); max-width: none; }
  .kpi-strip { grid-template-columns: 1fr 1fr; }
  .kpi__meter { grid-column: 1 / -1; }
  .kpi__actions { grid-column: 1 / -1; }
  .search { min-width: 0; flex: 1; }
  .board__grid { grid-template-columns: minmax(0, 1fr); }
  .board__grid > .col--left,
  .board__grid > .col--right2 { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
  .board__grid > .col--right2 { display: grid; }
  .editor__body { grid-template-columns: 84px minmax(0, 1fr); }
  .editor__thumb { width: 84px; }
  .signature { flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px 16px; }
  .signature__chev { display: none; }
  .studio-foot { font-size: 10px; }
  .studio-foot__right { margin-left: 0; width: 100%; }
  .greet-row { gap: 10px; }
  .greet-btn { font-size: 14px; padding: 10px 16px; }
}

@media (max-width: 420px) {
  .kpi-strip { grid-template-columns: 1fr; }
  .kpi__num { font-size: 30px; }
}
/* studio-chrome:canonical */
/* -------- Dashboard: page-only styles -------- */

  .dash-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, .8fr);
    gap: clamp(16px, 2vw, 30px);
    align-items: center;
    background: linear-gradient(105deg, #fdfbf7 0%, #f8f2e6 62%, #f4ece0 100%);
    border: 1px solid var(--st-line-soft);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    padding: clamp(16px, 2vw, 24px) clamp(16px, 2.2vw, 26px);
    margin-top: 18px;
  }
  .dash-hero__kicker {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--st-mute);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
  }
  .dash-hero__kicker .pulse {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--st-active);
    box-shadow: 0 0 0 3px rgba(139,0,0,.14);
    flex: none;
  }
  .dash-hero__greet {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 400;
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.04;
    letter-spacing: -.02em;
    margin: 0 0 8px;
    color: var(--ink);
  }
  .dash-hero__greet em { font-style: italic; color: var(--st-active); }
  .dash-hero__status {
    margin: 0;
    font-size: clamp(14px, 1.15vw, 16px);
    color: #3a3530;
    max-width: 46ch;
  }
  .dash-hero__meta {
    border-left: 1px solid rgba(17,17,17,.14);
    padding-left: clamp(14px, 1.8vw, 24px);
    display: grid;
    gap: 10px;
  }
  .dash-hero__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--st-mute);
    border-bottom: 1px solid var(--st-line-soft);
    padding-bottom: 8px;
  }
  .dash-hero__row:last-child { border-bottom: 0; padding-bottom: 0; }
  .dash-hero__row b {
    font-family: var(--f-body);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    font-weight: 700;
    text-align: right;
    word-break: break-word;
  }
  .dash-hero__row b.url { font-family: var(--f-mono); font-size: 11.5px; color: var(--blue); font-weight: 400; }

  .dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: clamp(14px, 1.6vw, 20px);
    margin-top: clamp(16px, 1.8vw, 22px);
    align-items: start;
  }
  .dash-col { display: grid; gap: clamp(14px, 1.6vw, 20px); align-content: start; }

  /* completeness */
  .comp-top {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .comp-num {
    font-family: var(--f-display);
    font-size: clamp(46px, 6vw, 78px);
    line-height: .82;
    letter-spacing: -.01em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .comp-num span { font-size: .42em; margin-left: 2px; color: var(--st-mute); }
  .comp-note {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--st-mute);
    margin: 0 0 6px;
    line-height: 1.6;
  }
  .comp-note b { color: #a01111; letter-spacing: .04em; }
  .comp-bar {
    display: flex;
    height: 10px;
    border-radius: 999px;
    background: #e6dfd3;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(17,17,17,.06);
  }
  .comp-bar i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #8b0000, #a01111);
    transition: width .6s cubic-bezier(.22,.61,.36,1);
  }
  .comp-scale {
    display: flex;
    justify-content: space-between;
    font-family: var(--f-mono);
    font-size: 9.5px;
    letter-spacing: .14em;
    color: var(--st-mute);
    margin-top: 7px;
  }

  .sec-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 1px; }
  .sec-list a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 9px 6px;
    border-top: 1px solid var(--st-line-soft);
    font-size: 13.5px;
    font-weight: 600;
    color: #2b2723;
    border-radius: 6px;
    transition: background .16s ease, color .16s ease;
  }
  .sec-list a:hover { background: rgba(139,0,0,.05); color: var(--st-active); }
  .sec-list .sec-count {
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    color: var(--st-mute);
    white-space: nowrap;
  }
  .sec-list .chev { color: #b3a99c; flex: none; }

  /* quick edit */
  .qe-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
  .qe-item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 11px 4px;
    border-top: 1px solid var(--st-line-soft);
  }
  .qe-item:first-child { border-top: 0; }
  .qe-thumb {
    width: 92px;
    aspect-ratio: 1 / .72;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: #e6dfd3;
    box-shadow: inset 0 0 0 1px rgba(17,17,17,.08);
  }
  .qe-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .qe-label {
    font-family: var(--f-mono);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--st-mute);
    margin: 0 0 4px;
  }
  .qe-value {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.3;
    color: var(--ink);
    font-weight: 600;
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .qe-value.is-empty { color: var(--st-mute); font-weight: 500; font-style: italic; }
  .qe-item .tag {
    font-family: var(--f-mono);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 2px 7px;
    border: 1px solid rgba(139,0,0,.32);
    color: #a01111;
    background: rgba(139,0,0,.05);
    margin-right: 8px;
  }
  .qe-link {
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--st-active);
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    white-space: nowrap;
    align-self: center;
  }
  .qe-link:hover { color: #a01111; }

  /* week preview */
  .week-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 4px;
  }
  .week-cell {
    border: 1px solid var(--st-line-soft);
    border-radius: var(--r-sm);
    padding: 10px 11px;
    background: #faf6ee;
  }
  .week-cell__day {
    font-family: var(--f-mono);
    font-size: 9.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--st-mute);
  }
  .week-cell__val {
    font-family: Georgia, serif;
    font-size: 24px;
    line-height: 1.1;
    margin-top: 4px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .week-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    color: var(--st-mute);
  }
  .week-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--st-active);
    color: #fff;
    border-radius: var(--r-sm);
    padding: 8px 14px;
    font-family: var(--f-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    transition: background .18s ease, transform .18s ease;
  }
  .week-link:hover { background: #a01111; transform: translateY(-1px); }

  /* business status */
  .biz-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
  .biz-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 9px 4px;
    border-top: 1px solid var(--st-line-soft);
    font-size: 13px;
  }
  .biz-list li:first-child { border-top: 0; }
  .biz-list .ico { flex: none; color: var(--st-mute); }
  .biz-list .ico.is-ok { color: var(--green); }
  .biz-list .ico.is-todo { color: #a01111; }
  .biz-list b { font-weight: 600; }
  .biz-list small {
    display: block;
    font-family: var(--f-mono);
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--st-mute);
    margin-top: 3px;
  }
  .state {
    font-family: var(--f-mono);
    font-size: 9.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
    border: 1px solid var(--st-line);
    color: #544d45;
  }
  .state--ok { border-color: rgba(0,100,0,.35); color: var(--green); background: rgba(0,100,0,.06); }
  .state--todo { border-color: rgba(139,0,0,.32); color: #a01111; background: rgba(139,0,0,.05); }
  .biz-foot {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(17,17,17,.2);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .biz-foot a {
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--st-active);
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
  }
  .biz-foot a:hover { color: #a01111; }

  /* states */
  .is-loading .skel {
    background: linear-gradient(90deg, #eee8dd, #f6f2ea, #eee8dd);
    background-size: 220% 100%;
    animation: dashSkel 1.3s ease-in-out infinite;
    border-radius: 4px;
    color: transparent;
  }
  @keyframes dashSkel {
    0% { background-position: 120% 0; }
    100% { background-position: -20% 0; }
  }
  .dash-msg {
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--st-mute);
    padding: 10px 2px;
  }
  .dash-msg.is-error { color: #a01111; }

  @media (max-width: 1000px) {
    .dash-grid { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 760px) {
    .dash-hero { grid-template-columns: minmax(0, 1fr); }
    .dash-hero__meta { border-left: 0; border-top: 1px solid rgba(17,17,17,.14); padding: 14px 0 0; }
    .qe-item { grid-template-columns: 72px minmax(0, 1fr); }
    .qe-thumb { width: 72px; }
    .qe-item .qe-act { grid-column: 2 / -1; }
    .week-strip { grid-template-columns: minmax(0, 1fr); }
    .week-link { margin-left: 0; }
  }

/*studio-kit*/
:root{--st-bg:#faf7f2;--st-surface:#fff;--st-text:#1c1917;--st-muted:#6b7280;--st-border:rgba(0,0,0,.12);--st-accent:#b45309;--st-radius:12px;--st-font:inherit;--st-mono:ui-monospace,SFMono-Regular,Menlo,monospace;}
[data-studio-app],[data-studio-gate]{font-family:var(--st-font);color:var(--st-text);}
/* Every primitive sets its OWN colour explicitly (not inherited), so a page's colour on the region
   container can never bleed in and make the module unreadable (#studio-kit contrast). */
[data-studio],[data-studio] *{color:var(--st-text);}
.st-state{padding:22px;border:1px dashed var(--st-border);border-radius:var(--st-radius);color:var(--st-muted);text-align:center;font-size:14px;}
.st-summary{display:flex;gap:14px;flex-wrap:wrap;}
.st-metric{flex:1;min-width:140px;background:var(--st-surface);border:1px solid var(--st-border);border-radius:var(--st-radius);padding:16px 18px;color:var(--st-text);}
.st-metric__n{font-size:26px;font-weight:700;letter-spacing:-.01em;color:var(--st-text);}
.st-metric__l{margin-top:2px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--st-muted);}
.st-group{margin-top:16px;}
.st-group__h{display:flex;justify-content:space-between;font-weight:600;font-size:14px;padding:6px 0;border-bottom:1px solid var(--st-border);color:var(--st-text);}
.st-count{color:var(--st-muted);font-family:var(--st-mono);font-size:12px;}
.st-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--st-border);color:var(--st-text);}
.st-row__l{flex:0 0 38%;font-size:13px;color:var(--st-muted);}
.st-input{flex:1;font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--st-border);border-radius:9px;background:var(--st-surface);color:var(--st-text);}
.st-input[data-ph]{border-style:dashed;}
.st-btn{font:inherit;font-weight:600;font-size:14px;padding:10px 18px;border-radius:999px;border:1px solid var(--st-border);background:var(--st-surface);color:var(--st-text);cursor:pointer;}
.st-btn--primary{margin-top:16px;background:var(--st-accent);border-color:var(--st-accent);color:#fff;}
.st-btn:disabled{opacity:.6;cursor:default;}
.st-list{margin-top:6px;color:var(--st-text);}
.st-msg{padding:12px 0;border-bottom:1px solid var(--st-border);color:var(--st-text);}
.st-msg.is-new{border-left:3px solid var(--st-accent);padding-left:12px;}
.st-msg__h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px;color:var(--st-text);}
.st-msg__h strong{color:var(--st-text);}
.st-when{font-size:12px;color:var(--st-muted);}
.st-kv{font-size:13px;margin:2px 0;color:var(--st-text);}
.st-kv span{color:var(--st-muted);}