/* Theme: Dial Tone — calibrated modern instrument. Direction 03, issue #18. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --bg: #E7EBF2;            /* field */
  --surface: #F5F7FB;       /* whisper */
  --ink: #10162B;           /* ink navy */
  --hairline: #C7CDDA;
  --copper: #C15A2C;        /* wire copper */
  --error: #B42239;         /* signal red */
  --font-display: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-label: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --nav-rule: 1px solid var(--hairline);
  --brand-tracking: -.02em;
}

label, th, legend {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: .8rem;
  color: var(--ink);
}

/* Calibrated boxes: hairline border on whisper surface. */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: .5rem .6rem;
}
input:not([type="checkbox"]):not([type="radio"]), select { height: 40px; }

textarea.code, textarea[name="knowledge_json"] { font-family: var(--font-mono); font-size: .88rem; line-height: 1.45; }

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 1px;
}

input:disabled, select:disabled, textarea:disabled {
  background: var(--bg);
  color: rgba(16, 22, 43, .4);
  border-style: dashed;
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--copper); width: 1rem; height: 1rem; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2310162B' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  padding-right: 1.6rem;
}

button {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .88rem;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: .55rem 1.05rem;
}
button.secondary, form.inline button {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--hairline);
  padding: .4rem .8rem;
}
button.danger { background: var(--error); border-color: var(--error); }

th { border-bottom: 1px solid var(--ink); }
td { border-bottom: 1px solid var(--hairline); }
tr:hover td { background: var(--surface); }

small { font-size: .78rem; color: rgba(16, 22, 43, .65); }
.error { font-size: .8rem; }

h1, h2 { font-weight: 700; letter-spacing: -.02em; }