/* ═══════════════════════════════════════════════════════════════
   VITRUVIUS DESIGN SYSTEM — v1.0  (the "architect's drawing sheet")
   Generated from Design/vitruvius-tokens.json. Pair with vitruvius-ds.js.
   Language: ink on warm paper · hand-sketch that resolves to a straight
   rapidograph line on hover/focus · single clay (Claude-orange) accent.
   This is the PRODUCT design system — NOT the old diagram CSS.
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;700&family=Heebo:wght@300;400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --vit-paper:#F2EEE4; --vit-paper-2:#ECE7DA; --vit-paper-3:#E6E0D2; --vit-surface-deep:#E4DECF;
  --vit-ink:#1C1B18; --vit-ink-2:#46443E; --vit-ink-3:#6B6862; --vit-ink-4:#8A867C;
  --vit-sheet-border:#D8D2C4;
  --vit-clay:#D97757; --vit-clay-ink:#C15F3C; --vit-clay-text:#BC5234; --vit-clay-strong:#C8552E; --vit-on-clay:#2A1712;
  --vit-line:rgba(28,27,24,.18); --vit-line-strong:rgba(28,27,24,.30); --vit-line-faint:rgba(28,27,24,.10); --vit-line-ghost:rgba(28,27,24,.06);
  --vit-f-display:'Anton',sans-serif; --vit-f-heb:'Heebo',sans-serif; --vit-f-sans:'Archivo',sans-serif; --vit-f-mono:'IBM Plex Mono',monospace;
  --vit-r-sm:2px; --vit-r-md:3px;
  --vit-cross:opacity .12s linear; --vit-fill:width .42s cubic-bezier(.2,0,0,1);
}

*{box-sizing:border-box}
body.vit{margin:0;background:var(--vit-surface-deep);color:var(--vit-ink);font-family:var(--vit-f-heb);font-size:15px;-webkit-font-smoothing:antialiased}

/* ── type ── */
.vit-display{font-family:var(--vit-f-display);font-size:34px;line-height:1;letter-spacing:.01em}
.vit-h1{font-weight:700;font-size:21px;letter-spacing:-.01em}
.vit-h2{font-weight:700;font-size:17px}
.vit-body{font-weight:400;font-size:15px;line-height:1.6}
.vit-label{font-weight:500;font-size:12.5px}
.vit-meta{font-size:11.5px;color:var(--vit-ink-3)}
.vit-code{font-family:var(--vit-f-mono);direction:ltr;font-size:11px;color:var(--vit-ink-4);letter-spacing:.04em}
.vit-name{font-family:var(--vit-f-sans);font-weight:700}

/* ── sheet + drawing-sheet furniture ── */
.vit-sheet{background:var(--vit-paper);border:1px solid var(--vit-sheet-border);border-radius:var(--vit-r-md);position:relative}
.vit-seal{display:inline-block;width:9px;height:9px;background:var(--vit-clay)}
.vit-cut{display:flex;align-items:center}
.vit-cut .tab{width:32px;height:2.5px;background:var(--vit-clay)}
.vit-cut .ln{flex:1;height:2.5px;background:var(--vit-ink)}
.vit-cmk{position:absolute;width:10px;height:10px;pointer-events:none}
.vit-cmk.tr{top:8px;right:8px;border-top:1px solid var(--vit-ink);border-right:1px solid var(--vit-ink)}
.vit-cmk.tl{top:8px;left:8px;border-top:1px solid var(--vit-ink);border-left:1px solid var(--vit-ink)}
.vit-cmk.br{bottom:8px;right:8px;border-bottom:1px solid var(--vit-ink);border-right:1px solid var(--vit-ink)}
.vit-cmk.bl{bottom:8px;left:8px;border-bottom:1px solid var(--vit-ink);border-left:1px solid var(--vit-ink)}

/* ── the sketch→rapidograph mechanic (base for interactive components) ── */
.vit-ink{position:relative;background:var(--vit-paper) !important;cursor:pointer;overflow:visible;color:var(--vit-ink);font-family:var(--vit-f-heb)}
.vit-ink:hover,.vit-ink:focus-within{background:var(--vit-paper) !important;outline:none}
.vit-ink>.vit-sk{position:absolute;inset:0;overflow:visible;pointer-events:none;z-index:1;opacity:1;transition:var(--vit-cross)}
.vit-ink>.vit-pr{position:absolute;inset:0;overflow:visible;pointer-events:none;z-index:2;opacity:0;transition:var(--vit-cross)}
.vit-ink:hover>.vit-sk,.vit-ink:focus-within>.vit-sk{opacity:0}
.vit-ink:hover>.vit-pr,.vit-ink:focus-within>.vit-pr{opacity:1}
.vit-ink>.vit-ct{position:relative;z-index:4}
.vit-edge{stroke:var(--vit-ink);fill:none;stroke-linecap:round;stroke-width:1.4}
.vit-edge.heavy{stroke-width:1.7}.vit-edge.light{stroke-width:1.3}

/* ── field (text input: filled + underline) ── */
.vit-field{height:44px;width:100%}
.vit-field .fillbg{position:absolute;inset:0;background:var(--vit-line-ghost);border-radius:var(--vit-r-sm);z-index:0}
.vit-field .uc{position:absolute;right:0;left:0;bottom:0;height:2.5px;background:var(--vit-clay);z-index:3;opacity:0;transition:opacity .16s}
.vit-field:hover .uc,.vit-field:focus-within .uc{opacity:1}
.vit-field .vit-ct{padding:11px 12px;font-size:14px}
.vit-field-label{display:block;text-align:right;font-family:var(--vit-f-mono);font-size:10.5px;color:var(--vit-ink-3);margin-bottom:5px}

/* ── chip (outline pill) ── */
.vit-chip{height:28px;padding:0 14px;display:inline-block}
.vit-chip .vit-ct{line-height:28px;font-size:12px;font-weight:500;text-align:center;transition:color .16s}
.vit-chip:hover .vit-ct{color:var(--vit-clay-ink)}
.vit-chip--active{background:var(--vit-clay) !important}
.vit-chip--active .vit-ct{color:var(--vit-on-clay)}
.vit-chip--active>.vit-sk,.vit-chip--active>.vit-pr{display:none}

/* ── list row (numbered index) ── */
.vit-row{width:100%;height:46px}
.vit-row .vit-ct{display:flex;align-items:baseline;gap:12px;padding:12px 8px}
.vit-row .num{font-family:var(--vit-f-mono);font-size:12px;color:var(--vit-ink);min-width:20px;transition:color .16s}
.vit-row:hover .num{color:var(--vit-clay-ink)}
.vit-row .leader{flex:1;border-bottom:1px dotted var(--vit-line-strong);transform:translateY(-4px)}

/* ── card ("drafts itself": frame draws in on hover) ── */
.vit-card{width:100%}
.vit-card .vit-edge{stroke-dasharray:560;stroke-dashoffset:560;transition:stroke-dashoffset .6s ease}
.vit-card:hover .vit-edge{stroke-dashoffset:0}
.vit-card .vit-ct{padding:12px 14px;height:100%;display:flex;flex-direction:column}
.vit-card .keyline{position:absolute;top:0;right:0;bottom:0;width:3px;background:var(--vit-clay);z-index:3} /* on open/urgent only */
.vit-card .uline{height:2.5px;background:var(--vit-clay);width:0;margin-top:6px;transition:var(--vit-fill)}
.vit-card:hover .uline{width:100px}
.vit-card--done .vit-edge{stroke-dasharray:none;stroke-dashoffset:0;stroke-width:1.3 !important;opacity:.7}
.vit-card--done .vit-ttl{color:var(--vit-ink-3);font-weight:500}

/* status pills */
.vit-status{font-size:10.5px;font-weight:500;border-radius:10px;padding:2px 10px}
.vit-status--open{color:#fff;background:var(--vit-clay-strong)}
.vit-status--done{color:var(--vit-ink-3);border:1px solid var(--vit-line-strong)}

/* ── primary FAB (elevated, sketch-plus) ── */
.vit-fab{height:54px;background:var(--vit-clay) !important;border-radius:var(--vit-r-md);display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;font-weight:700;font-size:16px;color:var(--vit-on-clay);position:relative;overflow:visible;box-shadow:0 7px 20px rgba(193,85,46,.34);transition:box-shadow .15s,background .15s}
.vit-fab:hover{background:var(--vit-clay-strong) !important;box-shadow:0 10px 28px rgba(193,85,46,.46)}
.vit-fab .plus{width:24px;height:24px;position:relative;flex-shrink:0}
.vit-fab .plus>svg{position:absolute;inset:0;overflow:visible}
.vit-fab .plus .vit-sk{opacity:1;transition:var(--vit-cross)}.vit-fab .plus .vit-pr{opacity:0;transition:var(--vit-cross)}
.vit-fab:hover .plus .vit-sk{opacity:0}.vit-fab:hover .plus .vit-pr{opacity:1}
.vit-pedge{stroke:var(--vit-on-clay);fill:none;stroke-linecap:round;stroke-width:2.4}

/* ── secondary button (quiet outline) ── */
.vit-btn{position:relative;background:var(--vit-paper) !important;cursor:pointer;overflow:visible;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:14px;color:var(--vit-ink);height:54px}
.vit-btn:hover{background:var(--vit-paper) !important}
.vit-btn>.vit-sk{position:absolute;inset:0;overflow:visible;pointer-events:none;z-index:1;opacity:1;transition:var(--vit-cross)}
.vit-btn>.vit-pr{position:absolute;inset:0;overflow:visible;pointer-events:none;z-index:2;opacity:0;transition:var(--vit-cross)}
.vit-btn:hover>.vit-sk{opacity:0}.vit-btn:hover>.vit-pr{opacity:1}
.vit-btn .lbl{position:relative;z-index:3}

.vit-sronly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}