/* ═══════════════════════════════════════════════════════════════════════════
 * hodo.css — the ONE clean exportable stylesheet of the HodoPraxis board
 * ═══════════════════════════════════════════════════════════════════════════
 * Pixel-perfect port of the StartupDeepDive "pixel-perfect-responsive-crud-page"
 * (INTEGRATED HOME BUILDING · RQ1–RQ4), extended per the Master Commandments:
 *   · quarter metric strips (Talent / Gunpowder / Sales / Reach Breakthrough)
 *   · the spinning CloudBerry publish orb (Fondamenthe .cloudberry-sync pattern)
 *   · language flags always visible (W14) · version pill lower-left (W7)
 *   · toolbar + toasts · period badge (12/13/14-month indexing)
 * Self-contained: the blueprint is an inline SVG data-URI, system fonts only —
 * zero external fetches (Performance: inline-first, TTFB/TTLB under 1s).
 * The Google-Fonts import of the source was dropped (write-in improvement).
 *
 * Attribution: written by GLM (Z.ai) · producer Joseph de Castelnau · 2026-09-26.
 * ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --green:#00b050; --green-dark:#00a049; --green-soft:rgba(0,176,80,.3);
  --ink:#595959; --ink-2:#7a7a7a; --mut:#9a9a9a; --rule:#bfbfbf; --rule-2:#d9d9d9;
  --paper:#f7f7f7; --card:rgba(255,255,255,.72);
  --amber:#c07b00; --red:#c0392b; --mint:#19a879;
  --font:"Segoe UI","Open Sans",system-ui,-apple-system,Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--ink);background:var(--paper);margin:0}

/* ── Board shell + blueprint background ──────────────────────────────────── */
.board{position:relative;min-height:100dvh;overflow:hidden;padding:clamp(20px,3vw,40px) clamp(16px,2.5vw,40px) 90px}
.bg{position:absolute;inset:0;pointer-events:none;
  background:url("../assets/architecture-background.png") center/cover no-repeat;
  opacity:.42}
.bg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(247,247,247,.55),rgba(247,247,247,.28) 40%,rgba(247,247,247,.6)),
  radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.5),rgba(255,255,255,.1))}

/* ── Header + toolbar ────────────────────────────────────────────────────── */
.head{position:relative;text-align:right}
.head h1{margin:0;font-weight:300;color:var(--green);font-size:clamp(28px,4.2vw,64px);letter-spacing:.01em;line-height:1.05}
.sub{margin:.3em 0 0;font-size:clamp(14px,1.4vw,20px);letter-spacing:.2em;text-transform:uppercase;color:#8a8a8a}
.toolbar{position:relative;display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:10px;margin-top:18px;max-width:1200px;margin-left:auto}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);background:var(--card);border:1px solid var(--rule-2);border-radius:999px;padding:5px 13px;line-height:1.3}
.chip b{color:var(--ink);font-weight:600}
.chip.green{border-color:var(--green);color:var(--green);font-weight:600}
.chip.green b{color:var(--green)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--rule)}
.chip .dot.on{background:var(--green);box-shadow:0 0 6px var(--green-soft)}
.chip .dot.off{background:#d0d0d0}
.chip .dot.err{background:var(--red)}
.ro-badge{font-weight:600;color:var(--mut)}
select.startup{font:inherit;font-size:12px;color:var(--ink);background:var(--card);border:1px solid var(--rule-2);border-radius:8px;padding:6px 10px;cursor:pointer;letter-spacing:.04em}
select.startup:focus-visible{outline:2px solid var(--green-soft)}
.startup-add{display:inline-flex}
.startup-add input{font:inherit;font-size:11.5px;padding:6px 9px;border:1px solid var(--rule-2);border-right:0;border-radius:8px 0 0 8px;background:#fff;color:var(--ink);width:150px}
.startup-add input:focus{outline:none;border-color:var(--green)}
.startup-add button{font:inherit;font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--green);color:var(--green);background:#fff;border-radius:0 8px 8px 0;padding:6px 10px;cursor:pointer}
.startup-add button:hover{background:var(--green);color:#fff}

/* ── Language flags — always visible (W14) ───────────────────────────────── */
.flags{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap}
.flags .fl{font-size:10.5px;letter-spacing:.1em;color:var(--mut);background:transparent;border:1px solid var(--rule-2);border-radius:6px;padding:4px 8px;cursor:pointer;font-family:inherit;transition:all .15s}
.flags .fl:hover{color:var(--ink);border-color:var(--rule)}
.flags .fl.on{color:#fff;background:var(--green);border-color:var(--green)}
.flags .fl:disabled{opacity:.45;cursor:default}

/* ── Steps (the four RQ columns, staggered) ──────────────────────────────── */
.steps{position:relative;list-style:none;margin:clamp(24px,4vw,60px) auto 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);max-width:1200px;gap:0 1px}
.step{padding:0 4px}
@media(min-width:1024px){.step{margin-top:calc(var(--i)*48px)}}
.quarter{display:flex;align-items:center;gap:14px;font-size:clamp(24px,2.4vw,34px);margin:0 0 10px;justify-content:center;color:#6d6d6d}
.rule{flex:1;height:1px;background:var(--rule);max-width:80px}
.mrange{display:block;text-align:center;font-size:10.5px;letter-spacing:.22em;color:var(--mut);margin:-4px 0 8px}

/* ── Quarter metric strips — THE 4 TYPES ALIGNED above RQ2 → RQ4 ────────────
 * One under the other, BIG (producer, 2026-09-26): each quarter lists its
 * metrics stacked vertically — Talent, Gunpowder, Sales, then Reach
 * Breakthrough (RQ4 only). Fixed order so the metrics read the same way
 * across RQ2–RQ4. Plain type — no pills. RQ1 stays empty (the shift). */
.qmetrics{display:flex;flex-direction:column;gap:12px;margin:0 0 14px;padding:0 2px}
.qm{display:flex;flex-direction:column;gap:2px;min-width:0;font-family:inherit}
.qm .top{display:inline-flex;align-items:center;gap:8px;font-size:clamp(15px,1.5vw,20px);line-height:1.2}
.qm .top b{color:var(--ink);font-weight:600;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.qm .top svg{width:19px;height:19px;flex:none;color:var(--ink-2)}
.qm .lab{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.qm.talent .top svg{color:#8a6d3b}
.qm.gunpowder .top svg{color:#555}
.qm.sales .top svg{color:var(--green)}
.qm.zero .top b{color:var(--mut);font-weight:500}
.qm.breakthrough .top b{color:var(--mut)}
.qm.breakthrough .top svg{color:var(--rule)}
.qm.breakthrough.reached .top b{color:var(--green)}
.qm.breakthrough.reached .lab{color:var(--green)}
.qm.breakthrough.reached .top svg{color:var(--green)}
.qm .cdrt{border-bottom:1px dotted var(--rule);cursor:help}

/* ── Phase tag (the green label) ─────────────────────────────────────────── */
.tag{display:block;width:100%;text-align:left;background:var(--green);color:#fff;border:0;border-radius:3px;padding:3px 32px;font-weight:600;font-size:clamp(16px,1.6vw,21px);line-height:1.4;font-family:inherit;letter-spacing:.2em;cursor:text;transition:transform .2s,box-shadow .2s,background .2s}
.tag:hover{background:var(--green-dark);transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,176,80,.3)}
.tag-input{outline:2px solid #fff;box-shadow:0 0 0 4px var(--green)}
.tag[readonly]{cursor:default}
.tag[readonly]:hover{transform:none;box-shadow:none;background:var(--green)}

/* ── Items ───────────────────────────────────────────────────────────────── */
.items{list-style:none;padding:0 0 0 30px;margin:16px 0 8px}
.item{border-radius:4px;transition:background .15s;padding:2px 0}
.item:hover{background:rgba(255,255,255,.7)}
.item-main{display:flex;align-items:center;gap:6px}
.item-text{flex:1;text-align:left;background:none;border:0;padding:1px 4px;font:inherit;font-size:clamp(15px,1.3vw,19px);color:var(--ink);cursor:text;line-height:1.45}
.item-text[readonly]{cursor:default}
.item-input{flex:1;font:inherit;font-size:clamp(15px,1.3vw,19px);padding:1px 4px;border:1px solid var(--green);border-radius:3px;background:#fff;color:var(--ink)}

.item-eur{opacity:0;border:0;background:none;color:var(--green);font-size:15px;font-weight:600;cursor:pointer;width:22px;transition:opacity .15s}
.item:hover .item-eur,.item-eur:focus{opacity:1}
@media(hover:none){.item-eur{opacity:.6}}
.amt-edit{display:inline-flex;align-items:center;gap:3px;color:var(--mut)}
.amt-edit svg{width:11px;height:11px}
.amt-input{width:74px;font:inherit;font-size:11px;padding:2px 6px;border:1px solid var(--green);border-radius:6px;color:var(--ink);background:#fff}
.amt-input:focus{outline:none;box-shadow:0 0 0 3px var(--green-soft)}
.item-amts.open{display:flex;flex-wrap:wrap;gap:6px;padding:3px 4px 3px 5px;align-items:center}
.del{opacity:0;border:0;background:none;color:#9a9a9a;cursor:pointer;width:22px;height:22px;padding:0;line-height:0;transition:opacity .15s,color .15s}
.del svg{width:13px;height:13px;display:block;margin:0 auto}
.item:hover .del{opacity:.85}
.del:hover{color:var(--red);opacity:1}
.item:hover .del,.del:focus{opacity:1}
@media(hover:none){.del{opacity:.6}}
.add{display:flex;gap:6px;padding-left:30px}
.add input{flex:1;min-width:0;background:transparent;border:0;border-bottom:1px dashed var(--rule);padding:4px;font:inherit;color:var(--ink)}
.add input:focus{outline:none;border-bottom-color:var(--green)}
.add button{border:1px solid var(--green);color:var(--green);background:rgba(255,255,255,.7);border-radius:3px;padding:2px 10px;cursor:pointer;transition:all .15s;font-family:inherit}
.add button:hover{background:var(--green);color:#fff}
.admin-only{display:none}
body.is-admin .admin-only{display:flex}
body.is-admin .tag[readonly]{cursor:text}
body.is-admin .item-text[readonly]{cursor:text}

/* ── THE CLOUDBERRY — publish orb (Fondamenthe .cloudberry-sync pattern) ────
 * Fixed top-right, 52px, three states: idle / spinning-while-publishing /
 * synced-or-error. rotate() keyframes only. Presence of the orb = admin. */
.cloudberry{position:fixed;top:18px;right:18px;z-index:50;width:52px;height:52px;border-radius:16px;
  background:rgba(255,255,255,.85);border:1px solid var(--rule-2);box-shadow:0 8px 24px rgba(0,0,0,.12);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .3s cubic-bezier(.16,1,.3,1)}
.cloudberry img{width:34px;height:34px;display:block}
.cloudberry:hover{border-color:var(--mint);box-shadow:0 0 24px rgba(25,168,121,.35),0 8px 24px rgba(0,0,0,.12);transform:translateY(-2px)}
.cloudberry.syncing{animation:cloudberry-spin 1.6s linear infinite}
.cloudberry.synced{border-color:var(--mint);box-shadow:0 0 20px rgba(25,168,121,.55)}
.cloudberry.err{border-color:var(--red);box-shadow:0 0 20px rgba(192,57,43,.4)}
@keyframes cloudberry-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.cloudberry-tag{position:fixed;top:74px;right:18px;z-index:50;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);background:rgba(255,255,255,.85);border:1px solid var(--rule-2);border-radius:999px;padding:3px 9px;pointer-events:none}

/* ── Toasts ──────────────────────────────────────────────────────────────── */
.toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{font-size:12.5px;letter-spacing:.04em;color:#fff;background:#3a3a3a;border-radius:8px;padding:9px 16px;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;transform:translateY(8px);transition:all .25s;max-width:82vw;text-align:center}
.toast.show{opacity:1;transform:none}
.toast.ok{background:var(--green)}
.toast.err{background:var(--red)}

/* ── Version pill (W7) + gate note ───────────────────────────────────────── */
.version-pill{position:fixed;left:14px;bottom:12px;z-index:40;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:9px;letter-spacing:.12em;color:var(--mut);background:rgba(255,255,255,.7);border:1px solid var(--rule-2);border-radius:999px;padding:3px 9px;text-decoration:none}
.version-pill:hover{color:var(--ink)}
.gate-note{position:fixed;left:14px;bottom:40px;z-index:40;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}

/* ── Reveal animation (source-faithful) ──────────────────────────────────── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;transition-delay:calc(var(--i)*120ms)}
.reveal.in{opacity:1;transform:none}

/* ── Responsive: 4 → 2 → 1 columns (1080p + 3 phone tiers) ───────────────── */
@media(max-width:1023px){.steps{grid-template-columns:repeat(2,1fr);gap:40px 24px}.head,.toolbar{text-align:left;justify-content:flex-start;margin-left:0}}
@media(max-width:600px){.steps{grid-template-columns:1fr}.head{text-align:left}.toolbar{justify-content:flex-start}.cloudberry{top:12px;right:12px;width:46px;height:46px}.cloudberry img{width:30px;height:30px}.cloudberry-tag{top:64px;right:12px}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.cloudberry.syncing{animation:none}}
:focus-visible{outline:2px solid var(--green-soft);outline-offset:1px}

/* ── embed (v0.7.4, the deep-dive iframe): the page owns the chrome ── */
body.embed .toolbar{display:none!important}
body.embed{padding-top:6px}

/* v0.7.11 — embedded: the board shows no pill (the PAGE carries the version) */
body.embed .version-pill{display:none!important}