/* Shared style system for the /messages reference pages. Mirrors integration.html
   (ice/amber/sage semaphore, Bricolage/Inter/JetBrains, paper light/dark). */

@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('/fonts/bricolage-grotesque-latin.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/inter-latin.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2'); }

:root, .light {
  --bg-base:#f2ece0; --bg-soft:#fbf7ee; --bg-sunken:#eae2d3; --line:#ddd3bf; --line-strong:#cabfa6;
  --text-body:#241f17; --text-muted:#5c5443; --text-faded:#837a66; --text-dim:#a89e88;
  --ice:#0288d1; --amber:#c96f0c; --ember:#bf4327; color-scheme:light;
}
.dark {
  --bg-base:#16130e; --bg-soft:#201c15; --bg-sunken:#100d08; --line:#2e2820; --line-strong:#3d3527;
  --text-body:#ece4d3; --text-muted:#b3a892; --text-faded:#8a8069; --text-dim:#625a48;
  --ice:#4fc3f7; --amber:#f59e0b; --ember:#e0533a; color-scheme:dark;
}

* { box-sizing: border-box; }
html { background:var(--bg-base); }
body {
  margin:0; background:var(--bg-base); color:var(--text-body);
  font-family:'Inter', ui-sans-serif, system-ui, sans-serif; font-feature-settings:'ss01','cv11';
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
a { color:var(--ice); text-decoration:underline; text-underline-offset:2px; }
code, pre { font-family:'JetBrains Mono', ui-monospace, monospace; }

header {
  border-bottom:1px solid var(--line); padding:1rem 1.5rem; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; position:sticky; top:0; background:var(--bg-base); z-index:5;
}
.brand { color:var(--text-body); text-decoration:none; font-weight:600; font-size:.95rem; display:inline-flex; align-items:center; gap:.5rem; }
.brand svg { flex-shrink:0; }
.brand svg .s { stroke:var(--ice); fill:none; }
.brand svg .c { fill:var(--amber); }
.brand .ice { color:var(--ice); }
.brand .sep { color:var(--text-dim); margin:0 .35rem; }
.brand .mono { font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); }
.nav { display:flex; align-items:center; gap:1.1rem; font-size:.8rem; }
.nav a { color:var(--text-muted); text-decoration:none; }
.nav a:hover { color:var(--ice); }
#themebtn { background:none; border:1px solid var(--line-strong); color:var(--text-muted); border-radius:6px; padding:.25rem .5rem; cursor:pointer; font-size:.75rem; }

main { max-width:52rem; margin:0 auto; padding:2.5rem 1.5rem 4rem; }
.crumb { font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.06em; color:var(--text-faded); margin:0 0 1rem; }
.crumb a { color:var(--text-faded); }
.eyebrow { font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin:0 0 .5rem; }
h1 { font-family:'Bricolage Grotesque', sans-serif; font-weight:600; font-size:2.2rem; line-height:1.14; margin:.2rem 0 .6rem; letter-spacing:-.01em; }
.lead { font-size:1.1rem; color:var(--text-muted); max-width:40rem; margin:0 0 2rem; }
h2 { font-family:'Bricolage Grotesque', sans-serif; font-weight:600; font-size:1.35rem; margin:2.4rem 0 .7rem; }
h3 { font-size:1rem; margin:1.5rem 0 .35rem; color:var(--text-body); }
p { color:var(--text-muted); }

.panel { background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:1.2rem 1.3rem; }
.kv { display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; font-size:.9rem; margin:.2rem 0; }
.kv div { color:var(--text-muted); }
.kv b { color:var(--text-body); font-weight:600; }

table { width:100%; border-collapse:collapse; margin:.6rem 0 .2rem; font-size:.9rem; }
th, td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--text-faded); font-weight:500; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }
td code, p code, li code { color:var(--ice); background:var(--bg-sunken); padding:.05rem .35rem; border-radius:4px; font-size:.86em; }

.codehead { display:flex; align-items:center; justify-content:space-between; background:var(--bg-sunken); border:1px solid var(--line); border-bottom:none; border-radius:10px 10px 0 0; padding:.4rem .8rem; }
.codehead .lang { font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faded); }
figure { margin:0 0 1rem; }
pre { margin:0; background:var(--bg-sunken); border:1px solid var(--line); border-radius:0 0 10px 10px; padding:1rem; overflow-x:auto; font-size:.8rem; line-height:1.55; }
pre code { color:var(--text-body); }
.tok-key { color:var(--ice); } .tok-str { color:var(--amber); } .tok-num { color:var(--text-body); } .tok-note { color:var(--text-dim); }

.cta { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.4rem; }
.btn { text-decoration:none; border-radius:9px; padding:.6rem 1.1rem; font-size:.9rem; font-weight:600; }
.btn-primary { background:var(--amber); color:#fff; }
.btn-ghost { border:1px solid var(--line-strong); color:var(--text-body); }
.link-arrow { color:var(--ice); text-decoration:none; font-weight:500; }
.link-arrow:hover { text-decoration:underline; }

.msgtable td:first-child { font-family:'JetBrains Mono',monospace; }
.msgtable a { font-weight:600; }
.soon { color:var(--text-dim); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; }

/* ── Hub layout (/messages only) ────────────────────────────────── */
main.hub { max-width:84rem; }
.hub-grid { display:grid; grid-template-columns:minmax(0,1fr) 19rem; gap:2rem; align-items:start; margin-top:1.4rem; }
.hub-grid > * { min-width:0; }
@media (max-width:860px){ .hub-grid { grid-template-columns:1fr; } }

.tablewrap { border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.tablescroll { overflow-x:auto; }
.msgtable { margin:0; font-size:.9rem; }
.msgtable th { background:var(--bg-sunken); padding:.7rem .9rem; white-space:nowrap; }
.msgtable td { padding:.7rem .9rem; border-bottom:1px solid var(--line); vertical-align:middle; }
.msgtable tbody tr:last-child td { border-bottom:none; }
.msgtable tbody tr:hover { background:color-mix(in srgb, var(--ice) 5%, transparent); }

.type-chip { display:inline-flex; align-items:center; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:.72rem; letter-spacing:.04em; padding:.18rem .55rem; border-radius:999px; text-decoration:none; color:var(--ice); background:color-mix(in srgb, var(--ice) 12%, var(--bg-soft)); border:1px solid color-mix(in srgb, var(--ice) 30%, transparent); }
a.type-chip:hover { text-decoration:underline; }

.sender-badge { display:inline-block; font-family:'JetBrains Mono',monospace; font-size:.66rem; padding:.12rem .42rem; border-radius:6px; border:1px solid var(--line-strong); color:var(--text-muted); background:var(--bg-sunken); white-space:nowrap; }
.sender-badge + .sender-badge { margin-left:.25rem; }
.sender-note { border-bottom:1px dotted var(--text-dim); cursor:help; }

.id-badge { display:inline-flex; align-items:center; justify-content:center; min-width:1.8rem; height:1.8rem; padding:0 .4rem; font-family:'JetBrains Mono',monospace; font-size:.82rem; font-weight:600; font-variant-numeric:tabular-nums; color:var(--text-body); background:var(--bg-sunken); border:1px solid var(--line); border-radius:8px; }
.cat { font-family:'JetBrains Mono',monospace; font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faded); white-space:nowrap; }

.std-link { font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--ice); text-decoration:none; white-space:nowrap; }
.std-link:hover { text-decoration:underline; }
.std-sep { color:var(--text-dim); margin:0 .35rem; }

.rail { display:flex; flex-direction:column; gap:1rem; position:sticky; top:5rem; }
.sidecard { background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.2rem; }
.sidecard h3 { font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faded); margin:0 0 .7rem; }
.stat { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.32rem 0; border-bottom:1px solid var(--line); }
.stat:last-child { border-bottom:none; }
.stat .n { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:1.05rem; color:var(--text-body); font-variant-numeric:tabular-nums; }
.stat .l { font-size:.8rem; color:var(--text-muted); text-align:right; }
.sidecard p { font-size:.82rem; margin:0 0 .8rem; }
.sidecard .btn-primary { display:block; text-align:center; }

footer { border-top:1px solid var(--line); margin-top:3rem; padding:1.6rem 1.5rem; text-align:center; font-size:.8rem; color:var(--text-faded); }
footer a { color:var(--text-muted); }