/* Formwork — shared tokens & components */

:root{
  --bg:#F6F7F5;
  --surface:#FFFFFF;
  --surface-raised:#FFFFFF;
  --ink:#15181D;
  --muted:#5B6470;
  --line:#D8DCE1;
  --accent:#2451C4;
  --accent-ink:#FFFFFF;
  --warn:#B4700A;
  --warn-bg:#FBF0DC;
  --ok:#1E7A46;
  --ok-bg:#E4F5EA;
  --err:#B3261E;
  --err-bg:#FCE8E6;
  --code-bg:#0E1116;
  --code-ink:#D8DEE9;
  --radius:3px;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --display:'Space Grotesk', var(--mono);
  --body:'IBM Plex Sans', system-ui, sans-serif;
  color-scheme: light;
}

[data-theme="dark"]{
  --bg:#0E1116;
  --surface:#161B22;
  --surface-raised:#1B212B;
  --ink:#E6E8EB;
  --muted:#8A93A0;
  --line:#2A3038;
  --accent:#5B8DEF;
  --accent-ink:#0E1116;
  --warn:#F0B429;
  --warn-bg:#2B2210;
  --ok:#4FCF8A;
  --ok-bg:#0F2419;
  --err:#F27D74;
  --err-bg:#2B1412;
  --code-bg:#0A0C10;
  --code-ink:#D8DEE9;
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--display); font-weight:600; letter-spacing:-0.01em; margin:0 0 .4em; }
a{ color:var(--accent); }
small, .muted{ color:var(--muted); }
.mono{ font-family:var(--mono); }

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; border-bottom:1px solid var(--line);
  background:var(--surface);
  position:sticky; top:0; z-index:20;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brand-mark{
  width:22px; height:22px; border:2px solid var(--accent); position:relative; flex:none;
}
.brand-mark::before{ content:""; position:absolute; inset:4px; background:var(--accent); }
.brand-name{ font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.02em; }
.brand-tag{ font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.top-actions{ display:flex; align-items:center; gap:10px; }
.back-link{ font-family:var(--mono); font-size:12.5px; text-decoration:none; color:var(--muted); border:1px solid var(--line); padding:6px 10px; border-radius:var(--radius); }
.back-link:hover{ color:var(--ink); border-color:var(--ink); }

.theme-toggle{
  font-family:var(--mono); font-size:12px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink); padding:6px 10px; border-radius:var(--radius); cursor:pointer; display:flex; gap:6px; align-items:center;
}
.theme-toggle:hover{ border-color:var(--accent); }

/* ---------- page shell ---------- */
.page{ max-width:1180px; margin:0 auto; padding:28px 22px 60px; }
.page-head{ margin-bottom:22px; }
.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; display:block; }
.page-head p{ color:var(--muted); max-width:640px; }

/* ---------- hub grid (index) ---------- */
.hub-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:16px; margin-top:26px; }
.tool-card{
  position:relative; display:block; text-decoration:none; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 18px; transition:transform .12s ease, border-color .12s ease;
}
.tool-card:hover{ border-color:var(--accent); transform:translateY(-2px); }
.tool-index{ font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.08em; }
.tool-card h3{ margin:8px 0 6px; font-size:17px; }
.tool-card p{ margin:0; color:var(--muted); font-size:13.5px; }

/* corner-frame signature: two opposing registration marks */
.frame{ position:relative; }
.frame::before,.frame::after{ content:""; position:absolute; width:14px; height:14px; border:2px solid var(--accent); pointer-events:none; }
.frame::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.frame::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

/* ---------- workspace (panels) ---------- */
.toolbar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:16px;
}
.toolbar label{ font-family:var(--mono); font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-right:4px; }
.field-group{ display:flex; align-items:center; gap:6px; }
.spacer{ flex:1; }

select, input[type="number"], input[type="text"]{
  font-family:var(--mono); font-size:13px; background:var(--bg); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius); padding:6px 8px;
}
select:focus, input:focus, textarea:focus, button:focus-visible{
  outline:2px solid var(--accent); outline-offset:1px;
}

.btn{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.02em; cursor:pointer;
  border-radius:var(--radius); padding:7px 13px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink);
}
.btn:hover{ border-color:var(--ink); }
.btn-primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.btn-primary:hover{ filter:brightness(1.06); }
.btn-ghost{ background:transparent; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

.workspace{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.workspace.stack{ grid-template-columns:1fr; }
@media (max-width:820px){ .workspace{ grid-template-columns:1fr; } }

.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 12px; border-bottom:1px solid var(--line); background:var(--surface-raised);
}
.panel-label{ font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); display:flex; gap:8px; align-items:center; }
.panel-index{ color:var(--accent); }
.panel-actions{ display:flex; gap:6px; }
.panel-actions .btn{ padding:4px 8px; font-size:11px; }

textarea, .code-out{
  width:100%; border:0; resize:vertical; padding:14px; font-family:var(--mono); font-size:13px;
  background:var(--code-bg); color:var(--code-ink); min-height:320px; display:block; line-height:1.55;
}
textarea{ tab-size:2; }
.code-out{ white-space:pre-wrap; word-break:break-word; overflow:auto; margin:0; }
.code-out.wrap-off{ white-space:pre; }

iframe.preview{ width:100%; height:100%; min-height:320px; border:0; background:#fff; display:block; }

.status-row{ display:flex; gap:14px; padding:8px 12px; border-top:1px solid var(--line); font-family:var(--mono); font-size:11.5px; color:var(--muted); flex-wrap:wrap; }
.status-row b{ color:var(--ink); }

.banner{ padding:10px 12px; border-radius:var(--radius); font-family:var(--mono); font-size:12.5px; margin-bottom:14px; display:none; }
.banner.show{ display:block; }
.banner.err{ background:var(--err-bg); color:var(--err); border:1px solid var(--err); }
.banner.ok{ background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok); }
.banner.warn{ background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn); }

table.data-tbl{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12.5px; }
table.data-tbl th, table.data-tbl td{ border:1px solid var(--line); padding:6px 8px; text-align:left; }
table.data-tbl th{ background:var(--surface-raised); }

.footer-note{ margin-top:30px; color:var(--muted); font-family:var(--mono); font-size:11.5px; }

/* diff-specific */
.diff-line{ display:flex; }
.diff-gutter{ width:44px; flex:none; text-align:right; padding-right:10px; color:var(--muted); user-select:none; }
.diff-add{ background:var(--ok-bg); color:var(--ok); }
.diff-del{ background:var(--err-bg); color:var(--err); }
.diff-eq{ color:var(--code-ink); }
.diff-content{ white-space:pre-wrap; word-break:break-word; flex:1; }

/* mock-data field rows */
.field-row{ display:grid; grid-template-columns:1.2fr 1fr 1fr auto; gap:8px; align-items:center; margin-bottom:8px; }
@media (max-width:700px){ .field-row{ grid-template-columns:1fr 1fr; } }