/* =========================================================================
   Housecarl Chrome — base + chrome (masthead, topnav, footer, buttons,
   utility-bar, code blocks, tags, tables, focus states).
   Pairs with tokens.css + palettes.css. Drop into any page that wants the
   Housecarl/UDR surface without the marketing/console specifics.
   ========================================================================= */

* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--copper-orange); color: var(--off-white); }

a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }

kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 1px 5px 2px;
  background: var(--paper-tint);
  border: 1px solid var(--iron-200);
  border-bottom-width: 2px;
  border-radius: 2px;
  color: var(--iron-900);
  letter-spacing: .02em;
}

/* --- Theme variants ---------------------------------------------------- */
body[data-theme="paper"]    { --bg: var(--paper); }
body[data-theme="terminal"] {
  --bg: #181817;
  --bg-card: #201F1D;
  --bg-paper: #1D1C1A;
  --fg1: #E8E6DF;
  --fg2: #B9B5A9;
  --fg3: #7F7B72;
  --ink: #E8E6DF;
  --rule: #2E2C28;
  --rule-strong: #4A4741;
  --paper-tint: #232220;
  --iron-50: #23221F;
  --iron-100: #2A2824;
  --iron-200: #3A3834;
  --link: #E8E6DF;
  --link-hover: var(--copper-orange);
}

/* --- Density ----------------------------------------------------------- */
body[data-density="compact"]  { --row: 24px; --cell-y: 4px; --cell-x: 8px;  }
body[data-density="standard"] { --row: 30px; --cell-y: 6px; --cell-x: 10px; }

/* --- Global utilities -------------------------------------------------- */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--font-mono); letter-spacing: .02em; }
.sc   { font-variant-caps: small-caps; letter-spacing: .08em; }
.hairline { border: 0; border-top: 1px solid var(--rule); }
.rule-strong { border: 0; border-top: 1px solid var(--rule-strong); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--copper-orange);
  font-weight: 700;
}
.eyebrow--iron { color: var(--iron-700); }
.eyebrow--gold { color: var(--muted-gold); }

h1,h2,h3,h4 { font-family: var(--font-serif); color: var(--ink); margin: 0; }
p { margin: 0 0 12px; }

/* --- Utility bar (optional, hidden by default in shell) ---------------- */
.utility-bar {
  background: var(--iron-900);
  color: #CFCCC4;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  padding: 5px 0;
  text-transform: uppercase;
  border-bottom: 1px solid #000;
}
.utility-bar .wrap { display: flex; justify-content: space-between; gap: 24px; }
.utility-bar .dot { color: var(--copper-orange); }

/* --- Masthead + wordmark ----------------------------------------------- */
.masthead {
  background: var(--bg-paper);
  border-bottom: 3px double var(--iron-900);
}
body[data-theme="terminal"] .masthead { border-bottom-color: #000; }
.masthead .wrap { padding: 22px 24px 18px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.wordmark { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--ink); }
.wordmark .m1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -.01em;
  line-height: 1;
}
.wordmark .m1 em { font-style: normal; color: var(--copper-orange); }
.wordmark .m2 { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: var(--fg2); }
.masthead .meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; color: var(--fg2); text-transform: uppercase; }

/* --- Top nav ----------------------------------------------------------- */
.topnav {
  border-top: 1px solid var(--iron-900);
  background: var(--iron-900);
}
body[data-theme="terminal"] .topnav { background: #0E0D0C; border-top-color: #000; }
.topnav .wrap { display: flex; align-items: stretch; padding: 0 24px; }
.topnav a {
  flex: 0 0 auto;
  padding: 11px 22px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #D8D8D8;
  text-decoration: none;
  border-right: 1px solid rgba(255,255,255,.12);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast);
}
.topnav a:hover { color: var(--off-white); background: rgba(255,255,255,.04); }
.topnav a.active { color: var(--copper-orange); background: #000; }
.topnav .spacer { flex: 1 1 auto; border-right: 1px solid rgba(255,255,255,.12); }
.topnav .cli {
  padding: 11px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .02em;
  color: #CFCCC4;
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
}
.topnav .cli:hover { color: var(--off-white); }
.topnav .cli .kbd {
  font-family: var(--font-mono); font-size: 10px;
  border: 1px solid #4A4741; padding: 1px 5px; border-radius: 2px; color: #B9B5A9;
}
.topnav .cta {
  padding: 11px 22px;
  background: var(--copper-orange);
  color: var(--off-white);
  font-weight: 700;
  letter-spacing: .14em;
  border-right: 0;
}
.topnav .cta:hover { background: var(--accent-hover); color: var(--off-white); }

/* --- Section slug (chapter marker) ------------------------------------- */
.slug {
  display: grid;
  grid-template-columns: 140px 1fr 280px;
  gap: 40px;
  align-items: flex-start;
  padding: 48px 0 32px;
  border-bottom: 1px solid var(--rule);
}
.slug .num { border-top: 2px solid var(--ink); padding-top: 10px; }
.slug .num .roman { font-family: var(--font-serif); font-weight: 700; font-style: italic; font-size: 44px; line-height: 1; color: var(--ink); }
.slug .num .label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg2); margin-top: 8px; display: block; }
.slug h2 { font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; max-width: 22ch; }
.slug .aside { border-left: 1px solid var(--iron-900); padding-left: 20px; font-family: var(--font-serif); font-size: 13px; line-height: 1.6; color: var(--fg2); }
body[data-theme="terminal"] .slug .aside { border-left-color: var(--rule-strong); }

/* --- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-serif);
  font-size: 13px; font-weight: 600;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  background: var(--bg-card);
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-standard);
}
.btn:hover { background: var(--paper-tint); }
.btn--primary { background: var(--copper-orange); border-color: var(--copper-orange); color: var(--off-white); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--off-white); }
.btn--ghost { background: transparent; }
.btn--sm { font-size: 11px; padding: 5px 10px; }

/* --- Footer ------------------------------------------------------------ */
.footer { background: var(--iron-900); color: #D8D8D8; border-top: 3px double var(--copper-orange); margin-top: 64px; }
.footer .wrap { padding: 36px 24px 18px; display: grid; grid-template-columns: 140px 1fr 1fr 1fr 1fr; gap: 32px; }
.footer h5 { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-gold); margin: 0 0 10px; font-weight: 700; }
.footer a { color: #D8D8D8; text-decoration: none; display: block; font-size: 13px; padding: 3px 0; }
.footer a:hover { color: var(--copper-orange); }
.footer .colophon {
  border-top: 1px solid rgba(255,255,255,.14); max-width: 1280px; margin: 0 auto;
  padding: 14px 24px; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 10px; color: #B5B2AA; letter-spacing: .14em; text-transform: uppercase;
}
.footer .colophon .tagline { font-family: var(--font-serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 13px; color: #E8E6DF; }

/* --- Code blocks ------------------------------------------------------- */
pre.code {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  background: #0E0D0C;
  color: #E8E6DF;
  padding: 14px 18px;
  border-left: 3px solid var(--copper-orange);
  overflow-x: auto;
  margin: 0 0 16px;
}
pre.code .c { color: #8A8579; font-style: italic; }
pre.code .k { color: var(--muted-gold); }
pre.code .s { color: #C8A16A; }
pre.code .p { color: var(--copper-orange); }
pre.code .o { color: #A7A395; }
pre.code .t { color: #85B89B; }

/* --- Tables ------------------------------------------------------------ */
table.data { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; }
table.data th {
  text-align: left; padding: 8px 12px;
  font-family: var(--font-serif); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg2); border-bottom: 1.5px solid var(--rule-strong); background: var(--bg-paper); font-weight: 700;
}
table.data td { padding: var(--cell-y, 6px) var(--cell-x, 10px); border-bottom: 1px solid var(--rule); color: var(--fg1); vertical-align: top; }
table.data tr:hover td { background: var(--paper-tint); }
table.data td.num { text-align: right; color: var(--fg2); }
table.data td.mono { font-family: var(--font-mono); }

/* --- Tag pills --------------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  padding: 2px 7px; border-radius: 2px; text-transform: uppercase; font-weight: 700;
  border: 1px solid var(--rule-strong); color: var(--fg2); background: transparent;
}
.tag--copper { color: var(--copper-orange); border-color: var(--copper-orange); }
.tag--gold   { color: var(--muted-gold); border-color: var(--muted-gold); }
.tag--rust   { color: var(--rust); border-color: var(--rust); }
.tag--ok     { color: var(--success); border-color: var(--success); }
.tag--ink    { color: var(--ink); border-color: var(--ink); background: var(--muted-gold); }

/* --- Focus states ------------------------------------------------------ */
:focus-visible { outline: 2px solid var(--copper-orange); outline-offset: 1px; }
button, input, select, textarea { font-family: inherit; }

input.hc-input, select.hc-input, textarea.hc-input {
  background: var(--bg-card); color: var(--fg1);
  border: 1px solid var(--rule-strong);
  padding: 6px 10px;
  font-family: var(--font-mono); font-size: 12px;
  border-radius: 2px; outline: none;
}
input.hc-input:focus { border-color: var(--copper-orange); }

/* --- Section helpers --------------------------------------------------- */
.section { padding: 36px 0; border-bottom: 1px solid var(--rule); }
.section--paper { background: var(--bg-paper); }
.section--dark  { background: var(--iron-900); color: var(--off-white); border-bottom-color: #000; }