/* =========================================================
   Radix Bench — Design tokens
   Concept: bench instrument / PCB readout panel
   ========================================================= */
:root{
  --bg: #0E1512;
  --bg-alt: #0B100D;
  --panel: #16211C;
  --panel-raised: #1C2A23;
  --panel-border: #253830;
  --text: #EDEAE2;
  --text-muted: #8FA396;
  --text-faint: #5E7268;

  --copper: #C97C4B;
  --amber: #FFB020;
  --amber-dim: #B27E20;
  --teal: #4FD1C5;
  --error: #FF6B6B;
  --success: #7FD858;

  --nibble-1: #23352C;
  --nibble-2: #1B2925;

  --font-body: 'IBM Plex Sans KR', 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow-panel: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px -12px rgba(0,0,0,0.6);
  color-scheme: dark;
}

html.light{
  --bg: #F1EFE7;
  --bg-alt: #E9E6DA;
  --panel: #FBFAF5;
  --panel-raised: #FFFFFF;
  --panel-border: #DCD7C6;
  --text: #1B231D;
  --text-muted: #57624F;
  --text-faint: #8A927E;

  --copper: #A8602F;
  --amber: #C97F0A;
  --amber-dim: #A8681F;
  --teal: #10897B;
  --error: #C7362B;
  --success: #2F8F45;

  --nibble-1: #ECE8D8;
  --nibble-2: #F5F2E7;
  color-scheme: light;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(255,176,32,0.06), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition: background-color .25s ease, color .25s ease;
}
.wrap{max-width:960px; margin:0 auto; padding:0 24px;}
h1,h2,h3{font-family:var(--font-body); font-weight:700; letter-spacing:-0.01em; margin:0 0 .5em;}
a{color:var(--amber);}
.skip-link{position:absolute; left:-999px; top:0; background:var(--panel); color:var(--text); padding:10px 16px; z-index:100;}
.skip-link:focus{left:8px; top:8px;}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--panel-border);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 24px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.02em;}
.brand-mark{
  font-family:var(--font-mono); background:var(--panel-raised); color:var(--amber);
  border:1px solid var(--panel-border); border-radius:6px; padding:2px 7px; font-size:.85rem;
}
.site-nav{display:flex; gap:22px;}
.site-nav a{color:var(--text-muted); text-decoration:none; font-size:.92rem;}
.site-nav a:hover{color:var(--amber);}
.theme-toggle{
  background:var(--panel-raised); border:1px solid var(--panel-border); color:var(--text);
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
}
.theme-toggle .icon-sun{display:none;}
html.light .theme-toggle .icon-moon{display:none;}
html.light .theme-toggle .icon-sun{display:block; color:var(--amber-dim);}
.theme-toggle:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible{
  outline:2px solid var(--amber); outline-offset:2px;
}

@media (max-width:640px){ .site-nav{display:none;} }

@media (max-width:480px){
  .readout-row{grid-template-columns:1fr;}
  .readout-label{flex-direction:row; align-items:baseline; gap:8px; padding-left:2px;}
  .wrap{padding:0 16px;}
}

/* ---------- Sections ---------- */
.panel-section{padding:56px 0;}
.hero-section{padding-top:48px; padding-bottom:40px;}
.eyebrow{
  font-family:var(--font-mono); color:var(--copper); text-transform:uppercase; letter-spacing:.14em;
  font-size:.78rem; margin:0 0 10px;
}
h1{font-size:clamp(1.6rem, 3.4vw, 2.35rem); line-height:1.25;}
.lede{color:var(--text-muted); max-width:640px; margin:14px 0 32px;}

/* ---------- Readout panel (signature element) ---------- */
.readout-panel{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  padding:8px;
  box-shadow:var(--shadow-panel);
}
.readout-row{
  display:grid; grid-template-columns:96px minmax(0,1fr); align-items:center; gap:14px;
  padding:12px 10px; border-bottom:1px solid var(--panel-border);
  position:relative;
}
.readout-row:last-child{border-bottom:none;}
.readout-row.is-primary{background:color-mix(in srgb, var(--amber) 5%, transparent); border-radius:6px;}
.readout-label{display:flex; flex-direction:column; padding-left:6px;}
.label-name{font-family:var(--font-mono); font-weight:700; letter-spacing:.06em; color:var(--amber); font-size:.95rem;}
.label-sub{font-size:.72rem; color:var(--text-faint);}
.readout-field{
  position:relative; display:flex; align-items:center; gap:8px; min-width:0;
  background:var(--panel-raised); border:1px solid var(--panel-border); border-radius:var(--radius-sm);
  padding:0 6px 0 14px;
}
.readout-input{
  flex:1; min-width:0; width:100%; background:transparent; border:0; outline:none;
  font-family:var(--font-mono); font-size:1.15rem; letter-spacing:.06em;
  color:var(--amber); padding:12px 4px; font-weight:600;
}
html.light .readout-input{color:#8A5A12;}
.readout-input::placeholder{color:var(--text-faint);}
.readout-row[data-base="16"] .readout-input{color:var(--teal);}
.readout-row.flash .readout-field{animation:flash .5s ease;}
@keyframes flash{ 0%{box-shadow:0 0 0 2px color-mix(in srgb, var(--amber) 55%, transparent);} 100%{box-shadow:none;} }

.copy-btn{
  background:transparent; border:0; color:var(--text-faint); cursor:pointer;
  width:32px; height:32px; border-radius:6px; display:grid; place-items:center; flex-shrink:0;
}
.copy-btn:hover{color:var(--amber); background:color-mix(in srgb, var(--amber) 10%, transparent);}
.copy-btn.copied{color:var(--success);}

.field-error{
  min-height:0; margin:6px 0 0 6px; color:var(--error); font-size:.8rem; font-family:var(--font-mono);
}
.field-error:empty{display:none;}
.readout-row.has-error .readout-field{border-color:var(--error);}

/* ---------- Toolbar ---------- */
.toolbar{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:18px;}
.ghost-btn{
  background:transparent; border:1px solid var(--panel-border); color:var(--text-muted);
  padding:9px 14px; border-radius:var(--radius-sm); cursor:pointer; font-size:.85rem; font-family:var(--font-body);
}
.ghost-btn:hover{color:var(--text); border-color:var(--copper);}
.negtoggle{display:flex; align-items:center; gap:8px; font-size:.88rem; color:var(--text-muted); cursor:pointer;}
.negtoggle input{accent-color:var(--amber); width:16px; height:16px;}

/* ---------- Negative / bitwidth options ---------- */
.neg-options{
  margin-top:18px; padding:16px; background:var(--panel); border:1px solid var(--panel-border);
  border-radius:var(--radius); display:flex; flex-wrap:wrap; gap:22px; align-items:flex-start;
}
.neg-options[hidden]{display:none;}
.option-group{display:flex; flex-direction:column; gap:8px;}
.option-title{font-size:.78rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.08em; font-family:var(--font-mono);}
.pill-group{display:flex; gap:6px; flex-wrap:wrap;}
.pill{
  background:var(--panel-raised); border:1px solid var(--panel-border); color:var(--text-muted);
  padding:8px 12px; border-radius:999px; cursor:pointer; font-size:.82rem; font-family:var(--font-mono);
}
.pill.sm{padding:6px 10px; font-size:.78rem;}
.pill[aria-pressed="true"]{background:color-mix(in srgb, var(--amber) 16%, var(--panel-raised)); color:var(--amber); border-color:var(--amber-dim);}

/* ---------- Bit visualization ---------- */
.bitviz{margin-top:28px;}
.bitviz-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px;}
.bitviz-caption{font-size:.78rem; color:var(--text-faint);}
.bit-grid{display:flex; flex-wrap:wrap; gap:10px;}
.bit-nibble{display:flex; gap:3px; padding:8px 7px; border-radius:8px; border:1px solid var(--panel-border);}
.bit-cell{
  width:22px; height:28px; display:grid; place-items:center;
  font-family:var(--font-mono); font-weight:700; font-size:.85rem; border-radius:4px;
  color:var(--text-faint); background:transparent;
}
.bit-cell.on{color:var(--bg); background:var(--amber);}
.bit-nibble .bit-index{font-size:.6rem; color:var(--text-faint); align-self:flex-end;}

/* ---------- Ad slots ---------- */
.ad-slot{margin:0 auto; padding:20px 24px;}
.ad-placeholder{
  border:1px dashed var(--panel-border); border-radius:var(--radius);
  min-height:90px; display:grid; place-items:center; color:var(--text-faint); font-size:.8rem;
  background:color-mix(in srgb, var(--panel) 60%, transparent);
}

/* ---------- Two-column tool section ---------- */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:800px){ .two-col{grid-template-columns:1fr;} }
.tool-card{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow-panel);
}
.tool-card h2{font-size:1.1rem;}
.card-sub{color:var(--text-muted); font-size:.85rem; margin:0 0 16px;}
.op-row{display:flex; gap:10px; margin-bottom:12px; flex-wrap:wrap;}
.op-field{display:flex; flex-direction:column; gap:6px; flex:1; min-width:110px;}
.op-field span{font-size:.72rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; font-family:var(--font-mono);}
.op-field input, .op-field select{
  background:var(--panel-raised); border:1px solid var(--panel-border); border-radius:var(--radius-sm);
  color:var(--text); font-family:var(--font-mono); padding:10px 12px; font-size:.95rem;
}
.op-select select{cursor:pointer;}
.op-bitwidth{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap;}
.op-bitwidth span{font-size:.78rem; color:var(--text-faint); font-family:var(--font-mono);}

.result-block{
  background:var(--panel-raised); border:1px solid var(--panel-border); border-radius:var(--radius-sm);
  padding:12px 14px; display:flex; flex-direction:column; gap:6px;
}
.result-line{display:flex; align-items:center; gap:10px;}
.result-tag{font-family:var(--font-mono); font-size:.7rem; color:var(--copper); width:32px;}
.result-line output{font-family:var(--font-mono); font-size:1rem; color:var(--amber); word-break:break-all;}

/* ---------- History ---------- */
.history-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.history-list{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:6px;}
.history-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius-sm);
  padding:10px 14px; font-family:var(--font-mono); font-size:.85rem; cursor:pointer;
}
.history-item:hover{border-color:var(--copper);}
.history-item .hi-values{color:var(--text); display:flex; gap:14px; flex-wrap:wrap;}
.history-item .hi-values b{color:var(--amber); font-weight:600;}
.history-item .hi-time{color:var(--text-faint); font-size:.75rem; flex-shrink:0;}
.history-empty{color:var(--text-faint); font-size:.85rem; margin-top:14px;}
.history-empty.hidden{display:none;}

/* ---------- Guide / SEO content ---------- */
.guide-section{background:var(--bg-alt); border-top:1px solid var(--panel-border); border-bottom:1px solid var(--panel-border);}
.prose h2{margin-top:2em; font-size:1.3rem;}
.prose p{color:var(--text-muted);}
.guide-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:18px;}
@media (max-width:640px){ .guide-grid{grid-template-columns:1fr;} }
.guide-card{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius);
  padding:16px 18px;
}
.guide-card h3{font-size:.98rem; color:var(--amber); margin-bottom:6px; font-family:var(--font-mono);}
.guide-card p{margin:0; font-size:.88rem;}
.guide-steps{color:var(--text-muted);}
.guide-steps li{margin-bottom:8px;}
.faq details{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius-sm);
  padding:12px 16px; margin-bottom:8px;
}
.faq summary{cursor:pointer; font-weight:600; color:var(--text);}
.faq p{margin:10px 0 0;}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--panel-border); padding:28px 0 60px;}
.footer-inner{display:flex; flex-direction:column; gap:6px; color:var(--text-faint); font-size:.82rem;}
.footer-inner a{color:var(--text-muted);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .readout-row.flash .readout-field{animation:none;}
}