/* English Gardens planning hub — Pistonbroke
   Brand colors below are placeholders pulled toward the current EG site.
   DESIGN SLOT: swap --accent* tokens when the new design doc is shared. */

:root {
  --bg: #fbfbf8;
  --bg-elev: #ffffff;
  --bg-sunk: #f2f3ee;
  --fg: #1c211c;
  --fg-muted: #5b635a;
  --border: #e2e5dc;
  --accent: #2f6b3a;
  --accent-fg: #ffffff;
  --accent-soft: #e6efe3;
  --warn: #9a5b00;
  --warn-soft: #fdf1dc;
  --danger: #a83232;
  --danger-soft: #fbe5e3;
  --ok: #2f6b3a;
  --ok-soft: #e6efe3;
  --info: #2c5d8f;
  --info-soft: #e3edf7;
  --radius: 10px;
  --sidebar-w: 260px;
  --topbar-h: 56px;
  --maxw: 1360px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111412; --bg-elev: #181c19; --bg-sunk: #0c0e0d; --fg: #e6e9e3; --fg-muted: #9aa397;
    --border: #2a302b; --accent: #7cc28a; --accent-fg: #0f1a11; --accent-soft: #1d2b20;
    --warn: #f0b458; --warn-soft: #2e2415; --danger: #f08a8a; --danger-soft: #331b1b;
    --ok: #7cc28a; --ok-soft: #1d2b20; --info: #8ab8e8; --info-soft: #172433;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111412; --bg-elev: #181c19; --bg-sunk: #0c0e0d; --fg: #e6e9e3; --fg-muted: #9aa397;
  --border: #2a302b; --accent: #7cc28a; --accent-fg: #0f1a11; --accent-soft: #1d2b20;
  --warn: #f0b458; --warn-soft: #2e2415; --danger: #f08a8a; --danger-soft: #331b1b;
  --ok: #7cc28a; --ok-soft: #1d2b20; --info: #8ab8e8; --info-soft: #172433;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--topbar-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 15px/1.6 var(--font); font-feature-settings: "cv11", "ss01";
}
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
code, kbd { font-family: var(--mono); font-size: .88em; background: var(--bg-sunk); border: 1px solid var(--border); border-radius: 5px; padding: 0 .3em; }
img { max-width: 100%; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20; height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); min-width: 0; }
.brand-mark { width: 28px; height: 28px; border-radius: 7px; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-text strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text span { font-size: 11px; color: var(--fg-muted); letter-spacing: .04em; text-transform: uppercase; }
.topbar .spacer { flex: 1; }
.icon-btn {
  appearance: none; border: 1px solid var(--border); background: var(--bg-elev); color: var(--fg);
  height: 34px; min-width: 34px; padding: 0 10px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px;
}
.icon-btn:hover { border-color: var(--accent); }
.menu-btn { display: none; }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: calc(100vh - var(--topbar-h)); }
.sidenav {
  position: sticky; top: var(--topbar-h); align-self: start; height: calc(100vh - var(--topbar-h));
  overflow-y: auto; padding: 20px 12px 40px; border-right: 1px solid var(--border);
}
.sidenav ol { list-style: none; margin: 0; padding: 0; counter-reset: sec; }
.sidenav li { margin: 1px 0; }
.sidenav a {
  display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: 8px;
  color: var(--fg-muted); text-decoration: none; font-size: 14px;
}
.sidenav a .n { font-family: var(--mono); font-size: 11px; color: var(--fg-muted); opacity: .7; min-width: 1.2em; }
.sidenav a:hover { background: var(--bg-sunk); color: var(--fg); }
.sidenav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sidenav a[aria-current="page"] .n { color: var(--accent); opacity: 1; }
.sidenav .sub { margin: 2px 0 8px 30px; border-left: 1px solid var(--border); }
.sidenav .sub a { font-size: 13px; padding: 4px 10px; border-radius: 0 6px 6px 0; }
.sidenav .sub a.active { color: var(--accent); }
.sidenav .foot { margin-top: 24px; padding: 12px 10px 0; border-top: 1px solid var(--border); font-size: 12px; color: var(--fg-muted); }

main { padding: 36px 40px 80px; min-width: 0; }
.content { max-width: var(--maxw); margin: 0 auto; }

/* ---------- type ---------- */
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 6px; }
h1 { font-size: clamp(28px, 4vw, 36px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 10px; }
.lede { font-size: 17px; color: var(--fg-muted); margin: 0 0 28px; max-width: 70ch; }
h2 { font-size: 22px; letter-spacing: -.01em; margin: 48px 0 12px; padding-top: 8px; border-top: 1px solid var(--border); padding-top: 28px; }
h3 { font-size: 16px; margin: 28px 0 8px; }
p, li { max-width: 75ch; }
.muted { color: var(--fg-muted); }
.small { font-size: 13px; }

/* ---------- components ---------- */
.card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-2 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.stat { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.stat .label { font-size: 12px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .05em; }
.stat .value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: 2px 0; font-variant-numeric: tabular-nums; }
.stat .src { font-size: 11.5px; color: var(--fg-muted); }

.callout { border: 1px solid var(--border); border-left: 4px solid var(--accent); background: var(--bg-elev); border-radius: 8px; padding: 12px 16px; margin: 16px 0; }
.callout.warn { border-left-color: var(--warn); background: var(--warn-soft); }
.callout.info { border-left-color: var(--info); background: var(--info-soft); }
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }

.tbd {
  display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 500;
  color: var(--warn); background: var(--warn-soft); border: 1px dashed color-mix(in srgb, var(--warn) 50%, transparent);
  border-radius: 6px; padding: 1px 7px; white-space: normal;
}
.slot {
  border: 2px dashed var(--border); border-radius: var(--radius); padding: 20px; color: var(--fg-muted);
  text-align: center; font-size: 14px; background: repeating-linear-gradient(45deg, transparent 0 10px, var(--bg-sunk) 10px 20px);
}
.slot strong { display: block; color: var(--fg); margin-bottom: 4px; }

.pill { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--bg-sunk); color: var(--fg-muted); border: 1px solid var(--border); white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.pill.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.pill.danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.pill.info { background: var(--info-soft); color: var(--info); border-color: transparent; }


/* ---------- data tables ---------- */
.dt { margin: 14px 0 6px; }
.dt-tools { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.dt-tools input {
  font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-elev); color: var(--fg); min-width: 200px; flex: 1; max-width: 320px;
}
.dt-tools .count { font-size: 12px; color: var(--fg-muted); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: 12px; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .04em; background: var(--bg-sunk); position: sticky; top: 0; white-space: nowrap; cursor: pointer; user-select: none; }
th[aria-sort="ascending"]::after { content: " ↑"; }
th[aria-sort="descending"]::after { content: " ↓"; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--bg-sunk) 60%, transparent); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.dt-source { font-size: 12px; color: var(--fg-muted); margin-top: 6px; }
.dt-empty td { text-align: center; padding: 22px; }

/* ---------- IA tree ---------- */
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { margin-left: 14px; padding-left: 18px; border-left: 1px solid var(--border); }
.tree li { position: relative; padding: 4px 0; max-width: none; }
.tree ul > li::before { content: ""; position: absolute; left: -18px; top: 17px; width: 14px; border-top: 1px solid var(--border); }
.tree .node { display: inline-flex; gap: 8px; align-items: center; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; font-size: 14px; }
.tree > li > .node { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }
.tree .node code { background: none; border: 0; padding: 0; color: var(--fg-muted); font-size: 12px; }

/* ---------- footer ---------- */
.page-foot { margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.page-foot a { text-decoration: none; }
.page-foot .next { margin-left: auto; text-align: right; }
.page-foot small { display: block; color: var(--fg-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .menu-btn { display: inline-flex; }
  .sidenav {
    position: fixed; top: var(--topbar-h); left: 0; bottom: 0; width: min(300px, 85vw); height: auto; z-index: 30;
    background: var(--bg); transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.15);
  }
  body.nav-open .sidenav { transform: none; }
  main { padding: 24px 16px 60px; }
  .brand-text span { display: none; }
}

/* ---------- print ---------- */
@media print {
  :root { --bg: #fff; --bg-elev: #fff; --bg-sunk: #f4f4f4; --fg: #000; --fg-muted: #444; --border: #ccc; }
  .topbar, .sidenav, .dt-tools, .page-foot, .icon-btn { display: none !important; }
  .layout { display: block; }
  main { padding: 0; }
  h2 { break-after: avoid; }
  .card, .stat, .callout, tr, .wf-sec { break-inside: avoid; }
  .table-wrap { overflow: visible; border: 0; }
  th { position: static; }
  a { color: inherit; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; word-break: break-all; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- edit mode ---------- */
.icon-btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.icon-btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.icon-btn.sm { height: 26px; padding: 0 8px; font-size: 12px; }
a.icon-btn { text-decoration: none; }
.pill.editing { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
dialog.editor {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); color: var(--fg); padding: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
dialog.editor::backdrop { background: rgba(0,0,0,.4); }
dialog.editor h3 { margin: 0 0 12px; }
dialog.editor label { display: block; font-size: 12px; font-weight: 600; color: var(--fg-muted); margin: 10px 0 4px; text-transform: uppercase; letter-spacing: .04em; }
dialog.editor input, dialog.editor textarea {
  width: 100%; font: inherit; font-size: 14px; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--fg);
}
dialog.editor input:focus, dialog.editor textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.form-actions { display: flex; gap: 8px; margin-top: 18px; align-items: center; }
.form-actions .spacer { flex: 1; }
.form-error { color: var(--danger); font-size: 13px; min-height: 1em; margin: 10px 0 0; }
@media (max-width: 900px) { .pill.editing { display: none; } }
@media print { .edit-hint, .dt-link { display: none; } }

/* ---------- checklists, totals, column editor ---------- */
td.check { width: 1%; text-align: center; }
td.check input, .check-label input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }
td.check input:disabled { cursor: default; opacity: 1; }
tr.is-done td:not(.check) { color: var(--fg-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--fg-muted) 60%, transparent); }
tr.is-out td:not(.check) { color: var(--fg-muted); opacity: .55; }
tfoot td { font-weight: 700; background: var(--bg-sunk); border-top: 2px solid var(--border); border-bottom: 0; }
.progress { display: flex; align-items: center; gap: 10px; }
.progress .bar { width: 160px; height: 8px; border-radius: 99px; background: var(--bg-sunk); border: 1px solid var(--border); overflow: hidden; }
.progress .bar span { display: block; height: 100%; background: var(--accent); }
dialog.editor label.check-label { display: inline-flex; gap: 6px; align-items: center; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--fg); font-weight: 500; margin: 10px 14px 0 0; }
dialog.editor select { font: inherit; font-size: 14px; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); }
.col-list { display: grid; gap: 8px; margin: 12px 0; }
.col-row { display: grid; grid-template-columns: 1fr 120px auto auto; gap: 6px; align-items: center; }
.col-of { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; padding: 2px 0 6px 4px; }
.col-of .check-label { margin-top: 0 !important; }
th.num { text-align: right; }
a.stat.link { display: block; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
a.stat.link:hover { border-color: var(--accent); transform: translateY(-1px); }
a.stat.link .src { color: var(--accent); }
td .tbd { font-family: var(--font); font-size: 11.5px; padding: 0 6px; }
.grid.tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
h1 + h2, h1 + p + h2 { border-top: 0; padding-top: 0; margin-top: 24px; }

/* ---------- quiet edit affordances ---------- */
tr.editable { cursor: pointer; }
tr.editable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
tr.editable > td:last-child { position: relative; padding-right: 28px; }
.edit-hint { position: absolute; right: 9px; top: 9px; color: var(--fg-muted); opacity: 0; transition: opacity .12s; font-size: 13px; }
tr.editable:hover .edit-hint, tr.editable:focus-visible .edit-hint { opacity: .8; }
.dt-source { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.dt-link { appearance: none; background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--accent); cursor: pointer; opacity: .55; transition: opacity .12s; }
.dt:hover .dt-link, .dt-link:focus-visible { opacity: 1; }
.dt-link:hover { text-decoration: underline; }
@media (hover: none) { .dt-link { opacity: 1; } .edit-hint { opacity: .5; } }
.dt-group { font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--fg); }

/* ---------- wireframes: shared controls ---------- */
.icon-btn:disabled { opacity: .45; cursor: default; }
.icon-btn.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-elev); }
.seg > button { appearance: none; border: 0; background: none; color: var(--fg-muted); font: inherit; font-size: 12.5px; padding: 6px 11px; cursor: pointer; border-right: 1px solid var(--border); min-height: 32px; }
.seg > button:last-child { border-right: 0; }
.seg > button:hover:not(:disabled) { color: var(--fg); background: var(--bg-sunk); }
.seg > button.on { background: var(--accent); color: var(--accent-fg); font-weight: 600; }
.seg > button:disabled { opacity: .45; cursor: default; }
.seg.wide { display: flex; width: 100%; } .seg.wide > button { flex: 1; padding: 6px 4px; }
.wf-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100; background: var(--fg); color: var(--bg); padding: 9px 16px; border-radius: 10px; font-size: 13px; box-shadow: 0 8px 30px rgba(0,0,0,.2); transition: opacity .3s, transform .3s; }
.wf-toast.bad { background: var(--danger); color: #fff; } .wf-toast.out { opacity: 0; transform: translate(-50%, 8px); }
.wf-pop { position: fixed; z-index: 60; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 50px rgba(0,0,0,.18); padding: 14px; max-height: min(70vh, 560px); overflow: auto; }
.wf-pop.wide { width: min(640px, calc(100vw - 16px)) !important; }
.wf-pop h4, .wfe-left h4, .wf-group h4 { margin: 12px 0 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-muted); }
.wf-pop h4:first-child, .wf-group h4:first-child { margin-top: 0; }
.wf-pop-form { display: grid; gap: 10px; }
.wf-pop-form input, .wf-pop-form select, .wf-json { font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); width: 100%; }
.wf-json { font-family: var(--mono); font-size: 12px; min-height: 320px; margin-bottom: 8px; }

/* ---------- wireframes: list ---------- */
.wf-tabs-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 8px 0 16px; }
.wf-tabs-nav a { padding: 9px 14px; text-decoration: none; color: var(--fg-muted); font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.wf-tabs-nav a:hover { color: var(--fg); } .wf-tabs-nav a.on { color: var(--accent); border-color: var(--accent); }
.wf-tabs-nav .count { font-weight: 500; color: var(--fg-muted); font-size: 12px; }
.wf-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin-top: 12px; }
.wf-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); text-decoration: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.wf-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.wf-card .pill { align-self: flex-start; }
.wf-card.is-lib { border-left: 3px solid var(--info); }
.wf-new { align-items: center; justify-content: center; border-style: dashed; min-height: 200px; color: var(--accent); }
.wf-new-plus { font-size: 34px; line-height: 1; font-weight: 300; }
.wf-thumb { display: flex; flex-direction: column; gap: 3px; height: 116px; padding: 6px; background: var(--bg-sunk); border-radius: 6px; overflow: hidden; }
.wf-thumb-sec { flex: 1; border-radius: 3px; background: var(--bg-elev); border: 1px solid var(--border); min-height: 6px; }
.wf-thumb-sec.bg-dark { background: var(--fg-muted); } .wf-thumb-sec.bg-accent { background: var(--accent-soft); } .wf-thumb-sec.bg-light { background: var(--bg); } .wf-thumb-sec.bg-image { background: repeating-linear-gradient(135deg, var(--bg-sunk) 0 4px, var(--bg-elev) 4px 8px); }
.wf-thumb-sec.is-ref { border: 1px dashed var(--info); }

/* ---------- wireframes: focus mode + editor shell ---------- */
body.wf-focus .sidenav, body.wf-focus .page-foot, body.wf-focus main h1 { display: none; }
body.wf-focus .layout { grid-template-columns: 1fr; }
body.wf-focus main { padding: 0 16px 24px; }
body.wf-focus .content { max-width: none; }
.wfe-bar { position: sticky; top: var(--topbar-h); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; background: var(--bg); border-bottom: 1px solid var(--border); }
.wfe-bar .spacer { flex: 1; }
.wfe-title { display: grid; line-height: 1.2; margin-left: 6px; } .wfe-title strong { font-size: 15px; }
.wfe-kicker { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); font-weight: 700; }
.wfe.is-lib .wfe-kicker { color: var(--info); }
.wfe-state { font-size: 12px; color: var(--fg-muted); padding: 0 4px; } .wfe-state.dirty { color: var(--warn); font-weight: 600; }
.wfe-banner:empty { display: none; }
.wfe-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 0; padding: 9px 14px; border-radius: 10px; font-size: 13px; }
.wfe-banner.lib { background: var(--info-soft); color: var(--info); border: 1px solid color-mix(in srgb, var(--info) 35%, transparent); }
.wfe-banner.warn { background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.wfe-body { display: grid; grid-template-columns: 236px minmax(0, 1fr) 300px; gap: 14px; align-items: start; margin-top: 12px; }
.wfe-left, .wfe-right { position: sticky; top: calc(var(--topbar-h) + 64px); max-height: calc(100vh - var(--topbar-h) - 80px); overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); padding: 12px; font-size: 13px; }
.wfe.is-lib .wf-canvas { box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 45%, transparent); }
.wfe-hint { font-size: 12px; color: var(--fg-muted); background: var(--bg-sunk); border-radius: 8px; padding: 7px 9px; margin: 10px 0 4px; max-width: none; }
.wfe-blocks, .wfe-reuse { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.wfe-reuse { grid-template-columns: 1fr; }
.wfe-item { appearance: none; display: flex; align-items: center; gap: 7px; text-align: left; font: inherit; font-size: 12px; color: var(--fg); background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 6px 8px; cursor: pointer; min-height: 32px; line-height: 1.2; }
.wfe-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.wfe-item .ic { width: 18px; flex: none; text-align: center; color: var(--accent); font-weight: 700; }
.wfe-item.reuse .ic { color: var(--info); } .wfe-item.reuse:hover { border-color: var(--info); background: var(--info-soft); }
.wfe-layers { list-style: none; margin: 10px 0 0; padding: 0; }
.wfe-layers li { max-width: none; } .wfe-layers button { appearance: none; display: block; width: 100%; text-align: left; font: inherit; font-size: 12.5px; color: var(--fg-muted); background: none; border: 0; border-radius: 6px; padding: 4px 8px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wfe-layers button:hover { background: var(--bg-sunk); color: var(--fg); }
.wfe-layers li.on > button { background: var(--info-soft); color: var(--info); font-weight: 600; }
.wfe-layers li.d0 > button { color: var(--fg); font-weight: 600; margin-top: 6px; } .wfe-layers li.d1 > button { padding-left: 18px; } .wfe-layers li.d2 > button { padding-left: 30px; } .wfe-layers li.d3 > button { padding-left: 42px; }
.wfe-layers li.ref > button { color: var(--info); }

/* right panel */
.wf-panel-head { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 10px; }
.wf-path { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font-size: 12px; color: var(--fg-muted); }
.wf-path button { appearance: none; border: 0; background: none; font: inherit; color: var(--accent); cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.wf-path button:hover { background: var(--bg-sunk); } .wf-path button.on { color: var(--fg); font-weight: 700; }
.wf-x { appearance: none; border: 1px solid var(--border); background: var(--bg); color: var(--fg-muted); border-radius: 6px; width: 26px; height: 26px; cursor: pointer; flex: none; }
.wf-group { padding: 12px 0; border-top: 1px solid var(--border); } .wf-group:first-child { border-top: 0; padding-top: 0; }
.wf-field { display: grid; gap: 5px; margin: 0 0 10px; } .wf-field > label { font-size: 12px; color: var(--fg-muted); font-weight: 500; }
.wf-field.check { grid-template-columns: auto 1fr; align-items: center; } .wf-field.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.wf-field input[type=text], .wf-field select, .wf-field textarea { font: inherit; font-size: 13px; padding: 7px 9px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); width: 100%; }
.wf-field input:focus, .wf-field select:focus, .wf-field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.wf-stepper { display: flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; width: 140px; background: var(--bg); }
.wf-stepper button { appearance: none; border: 0; background: var(--bg-sunk); color: var(--fg); width: 34px; font-size: 15px; cursor: pointer; } .wf-stepper button:hover:not(:disabled) { background: var(--accent-soft); }
.wf-stepper input { width: 100%; border: 0; text-align: center; font: inherit; font-size: 13px; background: transparent; color: var(--fg); -moz-appearance: textfield; } .wf-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.wf-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.wf-block-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 15px; } .wf-block-head .ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.wf-ref-card { border: 1px solid color-mix(in srgb, var(--info) 35%, transparent); background: var(--info-soft); color: var(--info); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; } .wf-ref-card p { margin: 6px 0 0; color: var(--fg); }
.wf-layouts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.wf-layout { display: flex; gap: 2px; height: 26px; padding: 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); cursor: pointer; }
.wf-layout span { background: var(--fg-muted); opacity: .4; border-radius: 2px; } .wf-layout:hover { border-color: var(--accent); } .wf-layout:hover span { background: var(--accent); opacity: .8; }
.wf-spanbar { display: flex; gap: 3px; margin-bottom: 8px; } .wf-spanbar button { appearance: none; min-width: 0; border: 1px solid var(--border); background: var(--bg-sunk); border-radius: 5px; font: inherit; font-size: 11px; padding: 5px 0; cursor: pointer; color: var(--fg); } .wf-spanbar button:hover { border-color: var(--accent); }
.wf-warn { color: var(--warn); }
.wf-complist { margin: 0; padding-left: 16px; font-size: 12.5px; } .wf-complist li.ref { color: var(--info); }
.wf-keys { margin-top: 12px; line-height: 1.7; max-width: none; }

/* ---------- wireframes: canvas ---------- */
.wf-canvas { position: relative; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); font-size: 13px; color: var(--fg-muted); transition: width .2s; }
.wf-canvas.mobile { width: 390px; max-width: 100%; margin: 0 auto; }
.wf-blank { display: grid; gap: 4px; place-items: center; padding: 80px 20px; text-align: center; }
.wf-sec { position: relative; }
.wf-sec.pad-none { padding: 6px 0; } .wf-sec.pad-sm { padding: 16px 0; } .wf-sec.pad-md { padding: 32px 0; } .wf-sec.pad-lg { padding: 56px 0; }
.wf-sec.minh-sm { min-height: 240px; } .wf-sec.minh-md { min-height: 400px; } .wf-sec.minh-lg { min-height: 560px; }
.wf-sec[class*="minh-"]:not(.minh-auto) { display: flex; flex-direction: column; justify-content: center; }
.wf-sec.bg-light { background: var(--bg-sunk); } .wf-sec.bg-accent { background: var(--accent-soft); }
.wf-sec.bg-dark { background: color-mix(in srgb, var(--fg) 84%, var(--bg)); color: color-mix(in srgb, var(--bg) 75%, transparent); }
.wf-sec.bg-image { background: linear-gradient(to top right, transparent calc(50% - 1px), var(--border) 50%, transparent calc(50% + 1px)), linear-gradient(to bottom right, transparent calc(50% - 1px), var(--border) 50%, transparent calc(50% + 1px)), var(--bg-sunk); }
.wf-canvas.editing .wf-sec.is-ref { box-shadow: inset 4px 0 0 var(--info); }
.wf-canvas.editing .wf-sec.is-ref:hover { box-shadow: inset 4px 0 0 var(--info), inset 0 0 0 1px var(--info); cursor: pointer; }
.wf-canvas.editing .wf-sec + .wf-sec, .wf-canvas.editing .wf-between + .wf-sec { border-top: 1px dashed color-mix(in srgb, var(--border) 70%, transparent); }
.wf-container { max-width: 1140px; margin: 0 auto; padding: 0 28px; width: 100%; } .wf-full { padding: 0 18px; width: 100%; }
.wf-row { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-bottom: 18px; }
.wf-row:last-child { margin-bottom: 0; }
.wf-row.gap-sm { gap: 8px; } .wf-row.gap-md { gap: 18px; } .wf-row.gap-lg { gap: 32px; }
.wf-row.va-top { align-items: start; } .wf-row.va-center { align-items: center; } .wf-row.va-bottom { align-items: end; }
.wf-canvas.mobile .wf-row { gap: 12px; } .wf-canvas.mobile .wf-col { grid-column: span var(--m, 12) !important; } .wf-canvas.mobile .wf-container { padding: 0 16px; }
.wf-col { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 40px; min-width: 0; }
.wf-col.st-card { border: 1px solid var(--border); border-radius: 10px; padding: 16px; background: var(--bg-elev); }
.wf-col.st-tint { border-radius: 10px; padding: 16px; background: var(--bg-sunk); }
.wf-canvas.editing .wf-col { outline: 1px dashed color-mix(in srgb, var(--fg-muted) 22%, transparent); outline-offset: 4px; }
.wf-canvas.editing .wf-col:hover { outline-color: color-mix(in srgb, var(--info) 60%, transparent); }
.wf-b { position: relative; min-width: 0; }
.wf-canvas.editing .wf-b { cursor: pointer; border-radius: 4px; }
.wf-canvas.editing .wf-b:hover { outline: 1.5px solid color-mix(in srgb, var(--info) 70%, transparent); outline-offset: 3px; }
.is-sel { outline: 2px solid var(--info) !important; outline-offset: 3px; z-index: 2; }
.wf-sec.is-sel { outline-offset: -2px; }
/* dim only the other device's blocks, and only while editing */
.wf-canvas.editing:not(.mobile) .wf-b.only-mobile, .wf-canvas.editing.mobile .wf-b.only-desktop { opacity: .55; }
.wf-canvas.mobile .wf-b.only-desktop { display: none; } .wf-canvas:not(.mobile) .wf-b.only-mobile { display: none; }
.wf-canvas.editing:not(.mobile) .wf-b.only-mobile, .wf-canvas.editing.mobile .wf-b.only-desktop { display: block; background: repeating-linear-gradient(135deg, transparent 0 6px, var(--bg-sunk) 6px 12px); }
.ta-center { text-align: center; } .ta-right { text-align: right; }
.ta-center .wf-btns, .ta-center .wf-banner { justify-content: center; } .ta-right .wf-btns { justify-content: flex-end; }
.ta-center :is(.wf-nav, .wf-social, .wf-pages, .wf-tabbar, .wf-chips) { justify-content: center; } .ta-right :is(.wf-nav, .wf-social, .wf-pages, .wf-tabbar, .wf-chips) { justify-content: flex-end; }
/* labels */
.wf-tag { display: none; position: absolute; top: 0; left: 0; z-index: 3; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; background: var(--bg-elev); color: var(--info); border: 1px solid color-mix(in srgb, var(--info) 30%, transparent); white-space: nowrap; max-width: 96%; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; }
.wf-canvas.labels .wf-tag { display: block; } .wf-canvas.labels .wf-b { padding-top: 21px; }
.wf-tag.sec { top: 6px; left: auto; right: 8px; background: var(--bg); }
.wf-canvas.editing .wf-sec.is-ref > .wf-tag.sec { display: block; background: var(--info); color: #fff; border-color: transparent; }
/* selection toolbar */
.wf-seltools { position: absolute; top: -34px; right: 0; z-index: 10; display: flex; gap: 2px; padding: 3px; background: var(--fg); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.wf-sec > .wf-seltools { top: 6px; right: auto; left: 8px; }
.wf-seltools button { appearance: none; border: 0; background: none; color: var(--bg); font: inherit; font-size: 13px; min-width: 28px; height: 26px; border-radius: 5px; cursor: pointer; padding: 0 6px; }
.wf-seltools button:hover { background: color-mix(in srgb, var(--bg) 20%, transparent); } .wf-seltools button.danger:hover { background: var(--danger); color: #fff; } .wf-seltools button.txt { font-size: 12px; font-weight: 600; }
/* inline adders */
.wf-between { position: relative; height: 0; z-index: 8; }
.wf-plus { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--accent); background: var(--bg-elev); color: var(--accent); font-size: 17px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.wf-canvas.editing:hover .wf-plus { opacity: .35; } .wf-between:hover .wf-plus, .wf-plus:focus-visible { opacity: 1; }
.wf-between:hover::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; border-top: 2px solid var(--accent); }
.wf-add-block { appearance: none; display: block; width: 100%; padding: 14px; border: 1.5px dashed color-mix(in srgb, var(--fg-muted) 40%, transparent); border-radius: 8px; background: none; color: var(--fg-muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.wf-add-block:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* block visuals */
.wf-h { color: var(--fg); font-weight: 750; line-height: 1.15; letter-spacing: -.01em; } .wf-h.h1 { font-size: 34px; } .wf-h.h2 { font-size: 24px; } .wf-h.h3 { font-size: 18px; } .wf-h.h4 { font-size: 14.5px; }
.wf-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.wf-p { margin: 0 0 8px; max-width: none; line-height: 1.6; } .wf-p:last-child { margin-bottom: 0; } .wf-p.lead { font-size: 16.5px; } .wf-p.small { font-size: 11.5px; }
.wf-sec.bg-dark .wf-h, .wf-sec.bg-dark .wf-logo, .wf-sec.bg-dark .wf-t { color: var(--bg); } .wf-sec.bg-dark .wf-p { color: color-mix(in srgb, var(--bg) 78%, transparent); }
.wf-img { position: relative; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: linear-gradient(to top right, transparent calc(50% - .5px), var(--border) 50%, transparent calc(50% + .5px)), linear-gradient(to bottom right, transparent calc(50% - .5px), var(--border) 50%, transparent calc(50% + .5px)), var(--bg-sunk); font-size: 11px; overflow: hidden; }
.wf-img > span { background: var(--bg-elev); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); }
.wf-caption, .wf-cite { margin-top: 6px; font-style: italic; }
.wf-map.h-sm { height: 150px; } .wf-map.h-md { height: 260px; } .wf-map.h-lg { height: 400px; }
.wf-carousel { position: relative; } .wf-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-elev); border: 1px solid var(--border); color: var(--fg); z-index: 1; }
.wf-arrow.l { left: -10px; } .wf-arrow.r { right: -10px; }
.wf-dots { display: flex; justify-content: center; gap: 5px; margin-top: 8px; } .wf-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--border); } .wf-dots span.on { background: var(--fg-muted); }
.wf-btns { display: flex; flex-wrap: wrap; gap: 8px; } .wf-btns.full { display: grid; }
.wf-btn { display: inline-block; padding: 9px 16px; border-radius: 8px; background: var(--fg-muted); color: var(--bg-elev); font-size: 12.5px; font-weight: 650; text-align: center; }
.wf-btn.sz-sm { padding: 5px 11px; font-size: 11.5px; } .wf-btn.sz-lg { padding: 13px 22px; font-size: 14px; }
.wf-btn.secondary { background: transparent; color: var(--fg); border: 1.5px solid var(--fg-muted); } .wf-btn.link { background: none; color: var(--fg); text-decoration: underline; padding-left: 2px; padding-right: 2px; }
.wf-btn.sm { padding: 5px 10px; font-size: 11px; align-self: flex-start; }
.wf-sec.bg-dark .wf-btn.secondary, .wf-sec.bg-dark .wf-btn.link { color: var(--bg); border-color: var(--bg); }
.wf-grid { display: grid; grid-template-columns: repeat(var(--pr, 4), minmax(0, 1fr)); gap: 14px; }
.wf-grid.carousel { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--pr, 4) - 1) * 14px) / var(--pr, 4)); overflow: hidden; }
.wf-canvas.mobile .wf-grid { grid-template-columns: repeat(var(--prm, 2), minmax(0, 1fr)); } .wf-canvas.mobile .wf-grid.carousel { grid-template-columns: none; grid-auto-columns: 70%; }
.wf-card-mini { display: flex; flex-direction: column; gap: 7px; padding: 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); min-width: 0; }
.wf-t { font-weight: 650; color: var(--fg); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-price { font-weight: 750; font-size: 13px; color: var(--fg); } .wf-date { font-weight: 700; font-size: 10.5px; letter-spacing: .04em; color: var(--accent); }
.wf-open { color: var(--ok); font-weight: 600; } .wf-offer { font-size: 22px; font-weight: 800; color: var(--fg); letter-spacing: -.02em; }
.wf-rating { color: var(--fg-muted); } .wf-rating .stars, .wf-rating.small { color: #c9a227; letter-spacing: 1px; }
.wf-line { display: block; height: 7px; border-radius: 4px; background: var(--bg-sunk); } .wf-line:last-child { width: 70%; }
.wf-check { position: relative; margin: 4px 0 4px 20px; font-size: 12px; } .wf-check::before { content: ""; position: absolute; left: -20px; top: 3px; width: 11px; height: 11px; border: 1.5px solid var(--fg-muted); border-radius: 3px; }
.wf-list { margin: 0; padding-left: 20px; line-height: 1.7; } .wf-list.links li { text-decoration: underline; } .wf-list.checks { list-style: none; padding-left: 0; } .wf-list.checks li::before { content: "✓  "; color: var(--ok); font-weight: 700; }
.wf-table { width: 100%; border-collapse: collapse; font-size: 12px; } .wf-table th, .wf-table td { border: 1px solid var(--border); padding: 6px 8px; text-align: left; } .wf-table th { background: var(--bg-sunk); color: var(--fg); position: static; cursor: default; text-transform: none; letter-spacing: 0; }
.wf-banner { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 6px; font-size: 12.5px; font-weight: 600; }
.wf-banner.promo { background: var(--fg); color: var(--bg); } .wf-banner.info { background: var(--info-soft); color: var(--info); } .wf-banner.warn { background: var(--warn-soft); color: var(--warn); }
.wf-banner-link { text-decoration: underline; font-weight: 700; }
.wf-form { display: grid; gap: 8px; } .wf-input { padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 12.5px; }
.wf-search { display: flex; gap: 8px; } .wf-search .wf-input { flex: 1; }
.wf-pages, .wf-nav, .wf-tabbar, .wf-social { display: flex; flex-wrap: wrap; gap: 6px; }
.wf-pages span { min-width: 28px; text-align: center; padding: 4px 7px; border: 1px solid var(--border); border-radius: 6px; } .wf-pages span.on { background: var(--fg-muted); color: var(--bg-elev); }
.wf-nav { margin: 0 -9px; } /* link padding sits outside the column so text lines up flush */
.wf-nav span { padding: 4px 9px; font-weight: 650; color: var(--fg); } .wf-sec.bg-dark .wf-nav span { color: var(--bg); }
.wf-tabbar { border-bottom: 1px solid var(--border); margin-bottom: 8px; } .wf-tabbar span { padding: 7px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; } .wf-tabbar span.on { border-color: var(--fg); color: var(--fg); font-weight: 650; }
.wf-acc { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); color: var(--fg); }
.wf-social span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1px solid currentColor; font-size: 11px; font-weight: 700; }
.wf-icons { display: grid; grid-template-columns: repeat(var(--pr, 4), minmax(0, 1fr)); gap: 12px; } .wf-canvas.mobile .wf-icons { grid-template-columns: repeat(var(--prm, 3), minmax(0, 1fr)); }
.wf-icon-item { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 12px; font-weight: 600; color: var(--fg); }
.wf-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 16px; }
.wf-logo { font-weight: 800; letter-spacing: .1em; font-size: 14px; color: var(--fg); padding: 6px 0; }
.wf-crumbs { letter-spacing: .02em; }
.wf-hours { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dotted var(--border); font-size: 12px; }
.wf-stat { display: grid; gap: 2px; text-align: center; padding: 8px; } .wf-stat strong { font-size: 24px; color: var(--fg); letter-spacing: -.02em; }
.wf-quote { margin: 0; font-style: italic; font-size: 16px; color: var(--fg); border-left: 3px solid var(--accent); padding-left: 14px; }
.ta-center .wf-quote { border-left: 0; padding-left: 0; }
.wf-embed, .wf-box { display: grid; place-items: center; border: 1.5px dashed var(--fg-muted); border-radius: 8px; padding: 18px; font-size: 12px; text-align: center; }
.wf-box.h-sm { min-height: 54px; } .wf-box.h-md { min-height: 120px; } .wf-box.h-lg { min-height: 220px; } .wf-box.h-xl { min-height: 340px; }
.wf-spacer.s-sm { height: 8px; } .wf-spacer.s-md { height: 24px; } .wf-spacer.s-lg { height: 56px; }
.wf-note { background: #fff4b8; color: #5b4a00; border-radius: 6px; padding: 9px 11px; font-size: 12px; line-height: 1.5; box-shadow: 0 1px 2px rgba(0,0,0,.12); text-align: left; }
@media (max-width: 1200px) { .wfe-body { grid-template-columns: 200px minmax(0, 1fr) 270px; } }
@media (max-width: 980px) { .wfe-body { grid-template-columns: 1fr; } .wfe-left, .wfe-right { position: static; max-height: none; } .wfe-left { order: 2; } .wfe-right { order: 3; } }
@media print { .wfe-bar, .wfe-left, .wfe-right, .wfe-banner, .wf-between, .wf-seltools, .wf-add-block { display: none !important; } .wfe-body { display: block; } }
/* view mode: clean full-width canvas, no builder chrome */
.wfe.is-view .wfe-body { grid-template-columns: 1fr; }
.wfe.is-view .wf-canvas:not(.mobile) { max-width: 1280px; margin: 0 auto; }
.wfe-left[hidden], .wfe-right[hidden] { display: none; }
.seg.mode > button.on { background: var(--info); }
/* review mode: notes as numbered pins + side list */
.wfe.is-review .wfe-body { grid-template-columns: minmax(0, 1fr) 320px; }
.wfe.is-review .wf-canvas:not(.mobile) { max-width: 1280px; }
.wf-pin { appearance: none; align-self: flex-start; display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px 12px 12px 3px; border: 2px solid var(--bg-elev); background: #e8b400; color: #3d2f00; font: 700 12px/1 var(--font); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .12s; }
.wf-pin:hover, .wf-pin.on { transform: scale(1.18); background: var(--info); color: #fff; }
.wf-pin.sm { min-width: 22px; height: 22px; font-size: 11px; box-shadow: none; flex: none; }
.wf-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wf-notes li { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; max-width: none; }
.wf-notes li:hover { border-color: var(--info); } .wf-notes li.on { border-color: var(--info); background: var(--info-soft); }
.wf-notes li.on .wf-pin { background: var(--info); color: #fff; }
.wf-notes p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; max-width: none; }
.wf-note-where { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-muted); }
.wf-d { font-size: 12px; line-height: 1.45; color: var(--fg-muted); }
.wf-chips { display: flex; flex-wrap: wrap; gap: 6px; } .wf-chips span { border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; font-size: 12px; color: var(--fg); } .wf-chips span.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.wf-hours.on { font-weight: 700; color: var(--fg); }
.wf-scroll { overflow-x: auto; }
.wf-row.va-stretch { align-items: stretch; }
.wf-card-mini.k-option { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; }
.wf-card-mini.k-option.on { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.wf-card-mini.k-option.off { opacity: .5; }
.wf-radio { flex: none; width: 14px; height: 14px; border: 1.5px solid var(--fg-muted); border-radius: 50%; }
.k-option.on .wf-radio { border: 4px solid var(--fg); }
.wf-opt { flex: 1; min-width: 0; display: grid; gap: 2px; } .wf-opt-val { font-size: 12px; font-weight: 700; color: var(--fg); white-space: nowrap; }
.wf-list.links { list-style: none; padding-left: 0; }
.wf-input { color: var(--fg-muted); }
.wf-form:has(> .wf-input:only-of-type) { display: flex; } .wf-form:has(> .wf-input:only-of-type) .wf-input { flex: 1; }

/* overlays opened from a button (View/Review) */
.wf-canvas:not(.editing) .wf-opens { cursor: pointer; }
.wf-canvas:not(.editing) .wf-opens .wf-btn { position: relative; }
.wf-canvas:not(.editing) .wf-opens:hover .wf-btn, .wf-opens.is-open .wf-btn { outline: 2px dashed var(--accent); outline-offset: 3px; }
.wf-ov-back { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; background: color-mix(in srgb, #000 28%, transparent); border-radius: 0 0 var(--radius) var(--radius); }
.wf-overlay { position: absolute; z-index: 21; background: var(--bg-elev); box-shadow: 0 18px 40px -12px rgb(0 0 0 / .35); border: 1px solid var(--border); animation: wf-ov-in .14s ease-out; }
.wf-overlay.as-menu { left: 0; right: 0; border-radius: 0 0 12px 12px; }
.wf-overlay.as-popover { width: 380px; max-width: calc(100% - 16px); border-radius: 12px; }
.wf-overlay.as-drawer { left: 0; width: min(360px, 88%); bottom: 0; border-radius: 0; overflow: auto; }
.wf-overlay > .wf-sec { border: 0; }
.wf-ov-x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-elev); color: var(--fg); cursor: pointer; }
@keyframes wf-ov-in { from { opacity: 0; transform: translateY(-4px); } }
.wf-ov-back.as-popover { background: transparent; }
.wf-list[style*="columns"] { column-gap: 24px; } .wf-list[style*="columns"] li { break-inside: avoid; }
.wf-overlay.as-drawer .wf-list.links { font-size: 14px; line-height: 2.5; } /* thumb-sized rows */
.dt-more { display: flex; align-items: center; gap: 14px; padding: 8px 2px 0; } .dt-more:empty { display: none; } .dt-more .dt-link { color: var(--fg); font-weight: 600; opacity: 1; }

/* share chart: sessions share vs revenue share per row */
.share-chart { margin: 8px 0 18px; font-size: 13px; }
.sc-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 10px; font-size: 12px; color: var(--fg-muted); }
.sc-key .muted { margin-left: 4px; }
.sc-sw { width: 10px; height: 10px; border-radius: 2px; } .sc-sw.a, .sc-bar.a { background: color-mix(in srgb, var(--fg-muted) 45%, transparent); } .sc-sw.b, .sc-bar.b { background: var(--accent); }
.sc-row { display: grid; grid-template-columns: 130px 1fr 44px; gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--border); }
.sc-name { color: var(--fg); font-weight: 600; }
.sc-bars { display: grid; gap: 3px; padding-right: 48px; }
.sc-bar { position: relative; height: 12px; min-width: 2px; border-radius: 0 3px 3px 0; }
.sc-bar span { position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); font-size: 11px; white-space: nowrap; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.sc-bar.b span { color: var(--fg); font-weight: 600; }
.sc-ratio { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg-muted); }
.sc-ratio.up { color: var(--ok); } .sc-ratio.down { color: var(--danger); }
@media (max-width: 560px) { .sc-row { grid-template-columns: 90px 1fr 38px; } }
/* dark sections (footer): links and small print at readable contrast */
.wf-sec.bg-dark .wf-list li { color: color-mix(in srgb, var(--bg) 92%, transparent); }
.wf-sec.bg-dark .wf-list.links li { text-decoration-color: color-mix(in srgb, var(--bg) 40%, transparent); text-underline-offset: 3px; }
.wf-sec.bg-dark .wf-p.small { color: color-mix(in srgb, var(--bg) 85%, transparent); }