/* Color tokens (light / dark / high-contrast) live in tokens.css, loaded
   before this file -- see that file's header comment for the full contrast
   numbers and the future-toggle contract. This file only consumes the
   custom properties it defines. */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1rem 3rem;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

h1, h2, h3 { line-height: 1.25; }
h1 { font-size: 1.6rem; margin: 0 0 .3rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: 0 0 .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

a { color: var(--accent); }

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* banners */
.banners { max-width: 1400px; margin: 0 auto; }
.banner {
  margin: 1rem 0 0;
  padding: .75rem 1rem;
  border-radius: var(--radius);
  border-left: 5px solid;
  font-weight: 600;
}
.banner-warn { background: var(--warn-bg); border-color: var(--warn-border); }
.banner-error { background: var(--error-bg); border-color: var(--error-border); }

/* header */
.site-header {
  max-width: 1400px;
  margin: 1.25rem auto .75rem;
}

/* Brand lockup: the logo mark (static/logo.svg) sits beside the page's own
   <h1> text rather than baking any wordmark into the SVG -- the visible
   heading stays real, screen-reader-friendly text, and the mark is decorative
   (alt=""). Keeps the mark reusable across pages whose <h1> text differs. */
.brand-lockup { display: flex; align-items: center; gap: .6rem; }
.brand-mark { flex: 0 0 auto; display: block; width: 2.5rem; height: 2.5rem; }
.brand-lockup h1 { font-weight: 700; letter-spacing: -.01em; }

.subtitle { margin: 0 0 .25rem; color: var(--muted); }
.header-links { margin: .5rem 0 .5rem; font-size: .9rem; }
.snapshot { margin: 0; color: var(--muted); font-size: .9rem; }

.notice {
  max-width: 1400px;
  margin: 0 auto 1.25rem;
  padding: .75rem 1rem;
  background: var(--note-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: .9rem;
}
.notice strong { color: var(--text); }

/* layout: two columns (filters | results). The pick list is deliberately NOT a
   third column -- it lives in a slide-in drawer (see "pick list drawer" below)
   so the results get the width. */
.layout {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
}

/* A sticky panel TALLER than the viewport can never be scrolled to the bottom: it
   pins at top:1rem and everything past the fold stays unreachable. The filters panel
   is ~840px and the Search button sits at its foot, so without the cap-and-scroll
   below, Search is simply unclickable on a short window. */
.filters {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

.results { display: grid; gap: 1rem; }

/* Keep the document a sane length. 500 rendered rows made the page ~30,000px tall,
   which stranded the filters thousands of pixels above the results - and in
   single-column mode there is no sticky column to fall back on. Scrolling the rows
   inside their own box keeps Search and the pick list a short scroll away. */
.rows {
  max-height: 65vh;
  overflow-y: auto;
  /* room for the focus ring on the last Add button */
  padding-right: .25rem;
}

/* form */
.fs-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .5rem .75rem .75rem;
  margin: 0 0 1rem;
}
legend { padding: 0 .3rem; font-weight: 600; font-size: .9rem; }
.radio { display: block; padding: .2rem 0; cursor: pointer; }
.radio.ineligible { opacity: .4; cursor: not-allowed; }

.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
.field small { display: block; color: var(--muted); font-size: .78rem; margin-top: .2rem; }
.field label.check { display: flex; align-items: center; gap: .45rem; margin-bottom: 0; cursor: pointer; }
.field label.check input { flex: 0 0 auto; margin: 0; accent-color: var(--accent); }

input[type="text"], input[type="number"], select, textarea {
  width: 100%;
  padding: .45rem .55rem;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
input[type="text"] { text-transform: uppercase; letter-spacing: .08em; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
output { font-variant-numeric: tabular-nums; }

button {
  font: inherit;
  cursor: pointer;
  padding: .5rem .8rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .5; cursor: not-allowed; }

button.primary {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
  font-weight: 600;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

/* Pin Search to the bottom of the screen while any part of the filters is in view.
   The filter list is taller than a short window, so the button used to sit below the
   fold with nothing indicating it was there. Sticky-bottom works whether the panel
   scrolls internally (wide layout) or the page scrolls past it (single column).
   The inset shadow keeps inputs from appearing to slide under a floating button. */
#searchBtn {
  position: sticky;
  bottom: .75rem;
  z-index: 2;
  box-shadow: 0 -.75rem .75rem -.5rem var(--surface), 0 2px 8px rgb(0 0 0 / .25);
}
button.danger { color: var(--danger); }
button.copied { background: var(--ok); border-color: var(--ok); }

.spinner {
  width: 1em; height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
}

.counts { margin: .6rem 0 0; font-size: .85rem; color: var(--muted); }

/* results */
.tally { margin: -.45rem 0 .75rem; font-size: .85rem; color: var(--muted); }

.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.row {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .6rem .75rem;
  background: var(--bg);
}
.row-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.row .call { font-size: 1.5rem; font-weight: 700; letter-spacing: .06em; }
.row .add { flex: 0 0 auto; margin-left: auto; }

.spells { display: flex; flex-wrap: wrap; gap: .3rem; min-width: 0; }
.spell {
  padding: .14rem .5rem;
  background: var(--spell-bg);
  border: 1px solid var(--spell-border);
  border-radius: 999px;
  color: var(--spell-text);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.row .spoken { margin: .1rem 0 .45rem; color: var(--muted); font-size: .85rem; }
.row .cw { margin: -.25rem 0 .45rem; color: var(--muted); font-size: .8rem; }
.row .cw-pattern { letter-spacing: .12em; word-break: break-all; }
.row .cw-units { white-space: nowrap; font-variant-numeric: tabular-nums; }

.score-wrap { display: flex; align-items: center; gap: .6rem; }
.score-num { font-size: .8rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar { flex: 1; height: 8px; background: var(--bar); border-radius: 4px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--bar-fill); border-radius: 4px; }

.avail { margin: .5rem 0 0; font-size: .85rem; font-weight: 600; }

.why { margin-top: .4rem; font-size: .85rem; }
.why summary { cursor: pointer; color: var(--muted); }
.why ul { margin: .35rem 0 0; padding-left: 1.2rem; color: var(--muted); }

.pending-apps { margin-top: .4rem; font-size: .85rem; }
.pending-apps summary { cursor: pointer; color: var(--muted); }
.pending-apps .pending-status { margin: .35rem 0 0; color: var(--muted); }

.empty { color: var(--muted); font-style: italic; margin: 0; padding: .5rem 0; list-style: none; }

/* pick list drawer. Closed = translated off the right edge AND visibility:hidden
   (delayed until the slide finishes) so its buttons are unreachable by Tab while
   closed; open = slid in over the page. The floating toggle hides while the drawer
   is open -- the drawer occupies the corner the toggle lives in. */
.picks {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(22rem, 92vw);
  z-index: 20;
  overflow-y: auto;
  border-radius: 0;
  border-width: 0 0 0 1px;
  box-shadow: -8px 0 24px rgb(0 0 0 / .18);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
}
.picks.open {
  transform: none;
  visibility: visible;
  transition: transform .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .picks, .picks.open { transition: none; }
}

.picks-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.drawer-close { padding: .1rem .55rem; font-size: 1.15rem; line-height: 1.3; }

button.drawer-toggle {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 19;
  width: auto;
  box-shadow: 0 4px 14px rgb(0 0 0 / .3);
}
/* button.primary sets display:inline-flex, which silently overrides the UA
   stylesheet's [hidden] { display: none } -- restate it or the toggle never hides. */
button.drawer-toggle[hidden] { display: none; }

.picks-meta { margin: 0 0 .5rem; font-size: .85rem; color: var(--muted); }
.pick-full {
  margin: 0 0 .5rem;
  padding: .4rem .6rem;
  background: var(--warn-bg);
  border-left: 4px solid var(--warn-border);
  border-radius: 4px;
  font-size: .85rem;
}

.pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.pick {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  cursor: grab;
}
.pick.dragging { opacity: .45; }
.pick.drop-target { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pick-num { color: var(--muted); font-size: .8rem; min-width: 1.8rem; text-align: right; }
.pick-call { flex: 1; font-weight: 700; letter-spacing: .05em; }
.pick-btns { display: flex; gap: .15rem; }
.pick-btns button { padding: .15rem .4rem; font-size: .8rem; line-height: 1.2; }

.pick-actions { display: grid; gap: .4rem; margin: .75rem 0; }
.pick-actions .danger { width: 100%; }

.copy-label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .25rem; }
#copyText { font-size: .78rem; resize: vertical; min-height: 8rem; }

.site-footer {
  max-width: 1400px;
  margin: 1.5rem auto 0;
  color: var(--muted);
  font-size: .8rem;
}

/* responsive */
@media (max-width: 1100px) {
  .layout { grid-template-columns: 18rem minmax(0, 1fr); }
}

@media (max-width: 760px) {
  body { padding: 0 .75rem 2rem; }
  .layout { grid-template-columns: 1fr; }
  .filters { position: static; max-height: none; overflow-y: visible; }
  .row .call { font-size: 1.3rem; }
  /* Single column: the rows cap matters most here, since there is no sticky
     column to get back to. Tighter so the filters stay a short scroll away. */
  .rows { max-height: 60vh; }
}

/* glossary */
.glossary {
  max-width: 1400px;
  margin: 0 auto;
}

.glossary-section {
  margin-bottom: 2rem;
}

.glossary-section > h2 {
  margin-top: 1.5rem;
}

.glossary-section > p {
  margin: 0.75rem 0;
}

.glossary-group {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.glossary-group h3 {
  margin-top: 0;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
}

.glossary-group p {
  margin: 0.5rem 0 0;
}

.glossary-group p:last-child {
  margin-bottom: 0;
}