arc-web-cli 0.8.2

:root {
  --canvas: #e8e1d4; --panel: #f7f2e8; --raised: #fffaf0; --ink: #171714;
  --ink-muted: #625e55; --border: #26251f; --border-subtle: #b9b09f;
  --primary: #e9a51a; --primary-hover: #f2b83c; --danger: #b53824;
  --success: #286747; --warning: #9a6412; --error: #a52c20;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem;
  --body: Inter, ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --shadow-hard: 5px 5px 0 var(--border);
}
* { box-sizing: border-box; }
html { background: var(--canvas); color: var(--ink); font-family: var(--body); }
body { margin: 0; min-height: 100vh; }
a { color: inherit; text-underline-offset: .2em; }
button, input { font: inherit; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 20; background: var(--ink); color: white; padding: .75rem; }
.skip-link:focus { top: 1rem; }
.mono, .eyebrow, .badge, .build-mark, .error-code { font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.eyebrow { margin: 0 0 .7rem; color: var(--ink-muted); font-size: .72rem; font-weight: 800; }
h1, h2, p { margin-top: 0; } h1 { font-size: clamp(2.2rem, 6vw, 4.4rem); line-height: .95; letter-spacing: -.055em; } h2 { font-size: 1rem; }
.lede { max-width: 42ch; color: var(--ink-muted); font-size: 1.05rem; line-height: 1.6; }
.focused-shell { width: min(38rem, calc(100% - 2rem)); margin: 0 auto; padding: clamp(2rem, 8vh, 6rem) 0; }
.focused-panel { border: 2px solid var(--border); background: var(--panel); padding: clamp(1.5rem, 6vw, 3.5rem); box-shadow: var(--shadow-hard); }
.brand { display: inline-flex; align-items: center; gap: .65rem; margin-bottom: 1rem; font: 800 .8rem var(--mono); text-decoration: none; text-transform: uppercase; }
.brand__mark { display: grid; place-items: center; width: 2rem; aspect-ratio: 1; border: 2px solid var(--border); background: var(--primary); }
.build-mark { margin: 1.5rem 0 0; color: var(--ink-muted); font-size: .62rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.button { display: inline-flex; justify-content: center; border: 2px solid var(--border); background: var(--raised); color: var(--ink); padding: .72rem 1rem; font: 800 .75rem var(--mono); text-decoration: none; text-transform: uppercase; cursor: pointer; }
.button:hover { background: white; } .button--primary { background: var(--primary); box-shadow: 3px 3px 0 var(--border); } .button--primary:hover { background: var(--primary-hover); } .button--wide { width: 100%; }
.field { margin: 1.2rem 0; } .field label { display: block; margin-bottom: .45rem; font: 700 .72rem var(--mono); text-transform: uppercase; }
.field input { width: 100%; border: 2px solid var(--border); border-radius: 0; background: var(--raised); padding: .8rem; color: var(--ink); }
.field input:disabled { background: var(--canvas); color: var(--ink-muted); cursor: not-allowed; }
.field--invalid input { border-color: var(--error); } .field__error { margin: .4rem 0 0; color: var(--error); font-size: .8rem; }
.alert { border: 2px solid var(--border); padding: .8rem; margin: 1rem 0; } .alert--error { border-color: var(--error); background: #f4d4ca; } .alert--warning { border-color: var(--warning); background: #f5e4bc; }
.text-links { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; font-size: .85rem; }
.error-code { color: var(--error); font-weight: 900; }
.workbench { display: grid; grid-template: 3.5rem 1fr / 15rem minmax(0, 1fr); min-height: 100vh; }
.rail { grid-row: 1 / -1; border-right: 2px solid var(--border); background: var(--ink); color: var(--panel); padding: 1.2rem; }
.brand--rail { color: white; margin-bottom: 2rem; }.rail nav { display: grid; gap: .25rem; }.rail nav a { padding: .7rem; border: 1px solid transparent; font: 700 .72rem var(--mono); text-decoration: none; text-transform: uppercase; }.rail nav a:hover { border-color: var(--primary); color: var(--primary); }
.rail__signout { margin-top: 2rem; border: 0; background: none; color: var(--panel); font: 700 .72rem var(--mono); text-decoration: underline; cursor: pointer; }
.topbar { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; border-bottom: 2px solid var(--border); background: var(--panel); padding: 0 1.5rem; font-size: .68rem; }.status-dot { font: 800 .68rem var(--mono); color: var(--success); }.status-dot::before { content: ""; display: inline-block; width: .55rem; aspect-ratio: 1; margin-right: .45rem; background: var(--success); }.rail-toggle { display: none; }
.workspace { min-width: 0; padding: clamp(1rem, 4vw, 2.5rem); }.page-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }.page-head h1 { margin-bottom: 0; font-size: clamp(2rem, 4vw, 3.5rem); }
.badge { display: inline-block; border: 1px solid var(--border); padding: .35rem .45rem; background: var(--raised); font-size: .62rem; font-weight: 800; }.badge--success { color: var(--success); border-color: var(--success); }.badge--warning { color: var(--warning); border-color: var(--warning); }.badge--error { color: var(--error); border-color: var(--error); }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 2px solid var(--border); margin-bottom: 1.5rem; }.metric-grid article { min-width: 0; padding: 1rem; background: var(--panel); border-right: 1px solid var(--border); }.metric-grid article:last-child { border: 0; }.metric-grid span,.metric-grid small { display: block; color: var(--ink-muted); font-size: .7rem; }.metric-grid strong { display: block; margin: .5rem 0; font: 800 1rem var(--mono); }
.panel { border: 2px solid var(--border); background: var(--panel); margin-bottom: 1.5rem; }.panel__body { padding: clamp(1rem, 3vw, 1.5rem); }.panel__head,.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); padding: 1rem; }.panel__head h2,.setting-row h2 { margin: 0; }.setting-row:last-child { border-bottom: 0; }.setting-row p { margin: .3rem 0 0; color: var(--ink-muted); }
.filter-bar { display:flex; align-items:end; justify-content:flex-start; gap:.75rem; padding:1rem; margin-bottom:1rem; border:2px solid var(--border); background:var(--panel); }.filter-bar label { align-self:center; }.filter-bar input,.filter-bar .button { height:2.7rem; }.filter-bar input { width:min(24rem,100%); border:2px solid var(--border); border-radius:0; background:var(--raised); padding:0 .75rem; color:var(--ink); }
@media (max-width: 40rem) { .filter-bar { align-items:stretch; flex-direction:column; }.filter-bar input,.filter-bar .button { width:100%; } }
.empty { padding: 3rem 1rem; text-align: center; }.empty__index { display: block; color: var(--border-subtle); font: 800 3rem var(--mono); }.empty p,.muted { color: var(--ink-muted); }
.data-wrap { overflow-x: auto; }.data-table { width: 100%; border-collapse: collapse; }.data-table th,.data-table td { border-bottom: 1px solid var(--border-subtle); padding: .75rem; text-align: left; }.data-table th { font: 800 .68rem var(--mono); text-transform: uppercase; }
@media (max-width: 850px) { .workbench { display: block; }.rail { border: 0; border-bottom: 2px solid var(--border); }.rail nav { grid-template-columns: repeat(2, 1fr); }.topbar { height: 3.5rem; }.metric-grid { grid-template-columns: repeat(2, 1fr); }.metric-grid article:nth-child(2) { border-right: 0; } }
@media (max-width: 520px) { .focused-panel { box-shadow: 3px 3px 0 var(--border); }.metric-grid { grid-template-columns: 1fr; }.metric-grid article { border-right: 0; border-bottom: 1px solid var(--border); }.page-head { display: block; }.text-links { display: grid; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition: none !important; } }