:root {
  --page: #23211f;      /* graphite */
  --surface: #2c2a27;
  --line: #45413b;
  --text: #e9e3d6;      /* bone */
  --muted: #9c9d97;     /* pewter */
  --accent: #8e2a2a;    /* oxblood */
  --on-accent: #e9e3d6;
  --grid: rgba(233, 227, 214, 0.035);
  --focus: #e9e3d6;
  --display: 'Fraunces', Georgia, serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --page: #d6d7d1;
    --surface: #e4e4df;
    --line: #a9aaa3;
    --text: #23211f;
    --muted: #4f504b;
    --accent: #8e2a2a;
    --on-accent: #f3efe6;
    --grid: rgba(35, 33, 31, 0.05);
    --focus: #23211f;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--page);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--text);
  font: 400 15px/1.5 var(--body);
  padding: 0 16px 48px;
}

.masthead, .tabs, main, .colophon { max-width: 1120px; margin-inline: auto; }

.masthead { padding: 40px 0 20px; max-width: 1120px; }
.masthead h1 {
  font: 700 clamp(30px, 5vw, 44px)/1.05 var(--display);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.lede { margin: 0; color: var(--muted); max-width: 52ch; }

/* Tabs: a hard underline, not pills */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.tabs [role="tab"] {
  font: 600 15px var(--body);
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 12px 18px 9px;
  min-height: 44px;
  cursor: pointer;
}
.tabs [role="tab"][aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* 60/40 split; stacks on narrow screens */
.split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px; align-items: start; }
.split-results { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
@media (max-width: 720px) { .split, .split-results { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
[hidden] { display: none !important; }

/* Phones: the totals sit below five slots, so keep a summary pinned to the bottom */
.mobile-summary { display: none; }
@media (max-width: 720px) {
  .mobile-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
    margin: 0 -16px;
    padding: 0 16px;
    min-height: 52px;
    background: var(--surface);
    border-top: 2px solid var(--accent);
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
  }
  .mobile-summary .go { color: var(--muted); font-weight: 500; text-decoration: underline; }
}

.col-title {
  font: 600 13px var(--body);
  color: var(--muted);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.col-side .col-title { margin-top: 28px; }

/* Slot rows */
.slot { display: grid; grid-template-columns: 64px minmax(0, 1fr) 44px; gap: 4px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.slot label { font-weight: 600; }
.slot .piece-info { grid-column: 2 / 4; color: var(--muted); font-size: 13px; margin: 0; }
.slot .piece-info:empty { display: none; }
.slot .piece-info .series { font-family: var(--display); color: var(--text); font-size: 14px; }

input, select {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  height: 44px;
  padding: 0 10px;
  width: 100%;
}
input::placeholder { color: var(--muted); opacity: 1; }
input[aria-invalid="true"] { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }

.btn {
  font: 600 14px var(--body);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  cursor: pointer;
}
.btn:hover { border-color: var(--muted); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); margin-top: 16px; }
.btn-primary:hover { filter: brightness(1.15); border-color: var(--accent); }
.btn-icon { padding: 0; font-size: 20px; line-height: 1; color: var(--muted); }

/* Totals panel with corner brackets */
.totals { position: relative; padding: 18px 20px; background: var(--surface); }
.bracketed::before, .bracketed::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid var(--text);
}
.bracketed::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.bracketed::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.defense { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.defense-label { color: var(--muted); font-weight: 600; }
.defense-num { font: 700 56px/1 var(--display); font-variant-numeric: tabular-nums; }

/* Skills */
.skill-list, .set-list, .target-list, .result-list { list-style: none; margin: 0; padding: 0; }
.skill { padding: 8px 0; border-bottom: 1px solid var(--line); }
.skill-head { display: flex; align-items: center; gap: 10px; }
.skill-name { font-weight: 600; flex: 1; min-width: 0; }
.skill-level { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; white-space: nowrap; }
.pips { display: inline-flex; gap: 3px; }
.pip { width: 10px; height: 10px; border: 1.5px solid var(--muted); }
.pip.on { background: var(--text); border-color: var(--text); }
.skill-effect { color: var(--muted); font-size: 13px; margin: 2px 0 0; }
.note { color: var(--muted); font-size: 13px; }

/* Set bonuses */
.set { padding: 8px 0 8px 12px; border-bottom: 1px solid var(--line); border-left: 4px solid var(--line); }
.set.on { border-left-color: var(--accent); }
.set-name { font: 500 15px var(--display); }
.set-state { color: var(--muted); font-size: 13px; }
.set.on .set-state { color: var(--text); }

.empty { color: var(--muted); padding: 8px 0; margin: 0; }

/* Search */
.add-skill label { display: block; font-weight: 600; margin-bottom: 6px; }
.field-row { display: flex; gap: 8px; }
.field-error { color: var(--text); margin: 6px 0 0; padding-left: 10px; border-left: 4px solid var(--accent); font-size: 13px; }
.target { display: grid; grid-template-columns: minmax(0, 1fr) 96px 44px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.target-list { margin-top: 16px; }
.target .skill-name { font-weight: 600; }

.status { margin: 0 0 12px; padding: 12px 14px; background: var(--surface); border-left: 4px solid var(--line); }
.status.bad { border-left-color: var(--accent); }

.result { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.result-def { font: 700 28px/1 var(--display); font-variant-numeric: tabular-nums; grid-row: span 3; }
.result-def small { display: block; font: 500 12px var(--body); color: var(--muted); margin-top: 4px; }
.result-pieces { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.result-pieces span { color: var(--muted); display: inline-block; width: 52px; }
.result-hits { margin: 4px 0 0; font-weight: 600; }
.result-extra { color: var(--muted); font-size: 13px; margin: 0; }
.result > :not(.result-def) { grid-column: 2; }
.result .btn { justify-self: start; margin-top: 6px; }

.colophon { margin-top: 48px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}