/* status.restapi.wtf — site-specific styles.
   Base styles (colors, header, mode/theme toggles, .detail-section, .copy-btn,
   utilities) live in /shared/styles-base.css. This file overlays.
   ============================================================ */

/* ---------- Picker view ---------- */

.picker-intro {
  color: var(--fg-muted);
  margin: 0 0 24px;
}

.question {
  margin-bottom: 24px;
}

.question h2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.question h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 16px;
  line-height: 1.35;
}

.choices {
  display: grid;
  gap: 8px;
}

.choice {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg-elev);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  font: inherit;
  cursor: pointer;
  min-height: 52px;
  transition: border-color 80ms, background 80ms;
}
.choice:hover { border-color: var(--border-strong); }
.choice:active { background: var(--border); }

.choice-title {
  font-weight: 500;
}
.choice-hint {
  display: block;
  margin-top: 4px;
  color: var(--fg-muted);
  font-size: 13px;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--fg-muted);
}
.crumbs button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  font: inherit;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.crumbs button:hover { background: var(--bg-elev); color: var(--fg); }
.crumbs .sep { color: var(--fg-subtle); }

.actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------- Leaf result (picker outcome) ---------- */

.leaf {
  margin-top: 8px;
}

.leaf-codes {
  display: grid;
  gap: 12px;
}

.leaf-card {
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  background: var(--bg);
}
.leaf-card.contested {
  border-color: var(--warn-border);
  background: var(--warn-bg);
}
.leaf-card.contested .contested-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warn);
  margin-bottom: 6px;
}

.leaf-card h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  font-family: var(--mono);
}
.leaf-card h3 a { color: inherit; }
.leaf-card p { margin: 0 0 12px; color: var(--fg-muted); }
.leaf-card .leaf-cta { font-size: 14px; }

.distinguisher {
  margin-top: 12px;
  padding: 12px;
  background: var(--bg-elev);
  border-radius: var(--r);
  font-size: 14px;
}
.distinguisher strong { color: var(--fg); }

/* ---------- Lookup view ---------- */

.lookup-controls {
  position: sticky;
  top: 60px;
  background: var(--bg);
  padding: 8px 0 16px;
  z-index: 5;
}
.lookup-search {
  width: 100%;
  font: inherit;
  font-family: var(--mono);
  font-size: 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--fg);
  padding: 12px 14px;
  min-height: 48px;
}
.lookup-search:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.lookup-section { margin: 24px 0; }
.lookup-section h2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 12px;
}

.lookup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.lookup-row {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
  min-height: 48px;
}
.lookup-row:hover { border-color: var(--border-strong); background: var(--bg-elev); text-decoration: none; }
.lookup-row .code-num {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 15px;
}
.lookup-row .code-reason {
  display: block;
  font-size: 13px;
  color: var(--fg-muted);
  margin-top: 2px;
}

.lookup-empty {
  color: var(--fg-muted);
  padding: 24px 0;
  text-align: center;
}

/* ---------- Detail view ---------- */

.detail-back {
  font-size: 14px;
  margin-bottom: 16px;
}

.detail-head {
  margin-bottom: 20px;
}
.detail-head h1 {
  margin: 0;
  font-family: var(--mono);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.detail-head .reason {
  color: var(--fg-muted);
  font-weight: 500;
  font-size: 24px;
}
.detail-head .copy-row {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}
/* .copy-btn, .detail-summary, base .detail-section h2 live in shared/styles-base.css.
   Below are the status-specific additions (list rows inside .detail-section, etc.). */

.detail-section ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.detail-section li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.detail-section li:last-child { border-bottom: 0; }

.dont-list .dont-case {
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}
.dont-list .dont-case .case {
  flex: 1 1 60%;
  min-width: 0;
}
.dont-list .dont-case .use {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg-muted);
  white-space: nowrap;
}
.dont-list .dont-case .use a { color: var(--fg-muted); }
.dont-list .dont-case .use a:hover { color: var(--accent); }

pre.example {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px;
  overflow-x: auto;
  white-space: pre;
}
pre.example .ex-label {
  display: block;
  color: var(--fg-subtle);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.example-note {
  color: var(--fg-muted);
  font-size: 14px;
  margin-top: 10px;
}

.confused-grid {
  display: grid;
  gap: 10px;
}
.confused-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--r);
  padding: 12px 14px;
  background: var(--bg);
}
.confused-card .pair {
  font-family: var(--mono);
  font-weight: 600;
  margin-bottom: 4px;
}
.confused-card .pair a { color: inherit; }
.confused-card .rule { color: var(--fg-muted); font-size: 14px; }
.confused-card .topic-link {
  display: block;
  margin-top: 6px;
  font-size: 13px;
}

.rfc-box {
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
  background: var(--bg-elev);
}
.rfc-box .rfc-ref {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg-muted);
  margin-bottom: 6px;
}
.rfc-box blockquote {
  margin: 0 0 8px;
  padding-left: 12px;
  border-left: 2px solid var(--border-strong);
  color: var(--fg);
  font-style: normal;
}
.rfc-box .rfc-rw { color: var(--fg-muted); font-size: 14px; }

.flags {
  display: inline-flex;
  gap: 6px;
  margin-left: 8px;
  vertical-align: middle;
}
.flag {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--fg-muted);
  background: var(--bg-elev);
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.flag.niche { color: var(--warn); border-color: var(--warn-border); background: var(--warn-bg); }
.flag.easter { color: var(--accent); }

/* ---------- Topic view ---------- */

.topic-head h1 {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
}
.topic-head .involves {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--fg-muted);
  margin-bottom: 20px;
}
.topic-head .involves a { color: var(--fg-muted); text-decoration: underline; }

.view-card {
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--bg);
}
.view-card .who {
  font-weight: 600;
  margin-bottom: 6px;
}
.view-card .stance { color: var(--fg-muted); }

.topic-guidance {
  margin-top: 24px;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: var(--bg-elev);
  border-radius: 0 var(--r) var(--r) 0;
}
.topic-guidance h2 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ---------- Compare mode (chooser on /) ---------- */

.compare-mode-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.compare-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.compare-side-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 8px;
}

.compare-selection {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background: var(--bg-elev);
  margin-bottom: 10px;
  min-height: 48px;
}
.compare-selection-empty {
  border-style: dashed;
  border-color: var(--border);
  background: var(--bg);
  color: var(--fg-subtle);
}
.compare-selection-num {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 16px;
}
.compare-selection-reason {
  color: var(--fg-muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compare-selection-clear {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
  line-height: 1;
}
.compare-selection-clear:hover { color: var(--fg); }

.compare-search {
  margin-bottom: 8px;
}

.compare-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 50vh;
  overflow-y: auto;
  padding-right: 4px;
}

.code-pick {
  appearance: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 8px 12px;
  min-height: 40px;
}
.code-pick:hover { border-color: var(--border-strong); background: var(--bg-elev); }
.code-pick.selected {
  border-color: var(--accent);
  background: var(--bg-elev);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.code-pick .code-num { font-size: 14px; font-weight: 600; }
.code-pick .code-reason { color: var(--fg-muted); font-size: 13px; }

.compare-mode-footer {
  position: sticky;
  bottom: 0;
  margin-top: 20px;
  padding: 12px 0;
  background: linear-gradient(to bottom, transparent, var(--bg) 30%);
}
.compare-go {
  appearance: none;
  display: block;
  width: 100%;
  font: inherit;
  font-weight: 500;
  background: var(--accent);
  color: var(--accent-fg);
  border: 0;
  border-radius: var(--r);
  padding: 14px 16px;
  min-height: 52px;
  cursor: pointer;
  font-size: 15px;
}
.compare-go:hover { filter: brightness(1.05); }
.compare-go[disabled] {
  background: var(--bg-elev);
  color: var(--fg-subtle);
  border: 1px dashed var(--border);
  cursor: not-allowed;
}

/* ---------- Compare view ---------- */

.compare-head { margin-bottom: 16px; }
.compare-title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 600;
}

.compare-cols {
  margin-bottom: 8px;
}

.compare-col-label {
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px 12px;
  background: var(--bg-elev);
}
.compare-col-label a {
  color: var(--fg);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.compare-col-label .col-num {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 20px;
}
.compare-col-label .col-reason {
  color: var(--fg-muted);
  font-size: 15px;
}

.compare-distinguisher {
  margin-bottom: 16px;
}

.compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.compare-cell {
  min-width: 0; /* let pre/code inside shrink */
}
.compare-cell-text { margin: 0; color: var(--fg-muted); }
.compare-cell ul { margin: 0; padding: 0; list-style: none; }
.compare-cell li {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.compare-cell li:last-child { border-bottom: 0; }
.compare-cell pre.example { font-size: 12px; }

.compare-footer .compare-row a {
  display: block;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px 12px;
  background: var(--bg-elev);
  font-size: 14px;
}
.compare-footer .compare-row a:hover {
  border-color: var(--border-strong);
  text-decoration: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 700px) {
  .compare-mode-sides { grid-template-columns: 1fr; }
  .compare-list { max-height: 38vh; }
  .compare-row { grid-template-columns: 1fr; gap: 4px; }
  .compare-cell { padding: 10px 0 4px; border-top: 1px dashed var(--border); }
  .compare-cell:first-child { border-top: 0; }
  .compare-cell::before {
    content: attr(data-label);
    display: block;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--fg-subtle);
    margin-bottom: 6px;
  }
  /* The column-label header strip is redundant on mobile — each cell labels itself. */
  .compare-cols { display: none; }
}

/* shared/styles-base.css handles the universal mobile breakpoint;
   status-specific tweaks below. */
@media (max-width: 540px) {
  .detail-head h1 { font-size: 30px; gap: 10px; }
  .detail-head .reason { font-size: 20px; }
  .lookup-controls { top: 56px; }
}