/* Compare page: omnibox dropdown + state pills for this pass. Card layout
   is a follow-up piece, see the note on #cards below. */

/* Result row: code | name (+ alt name below) | level | pills.
   Mirrors .searchbox .results from controls.css but with an extra pills
   column instead of a single amount, and no fixed row height since pills
   can wrap. */
#csearch .results .r{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  column-gap:10px;row-gap:2px;align-items:baseline;width:100%;
  background:none;border:0;padding:7px 8px;cursor:pointer;
  text-align:left;font-size:13.5px;
}
#csearch .results .r:hover,#csearch .results .r.hot{background:var(--accent-soft)}
#csearch .results .r .code{grid-row:1;grid-column:1;
  font-family:ui-monospace,Menlo,monospace;font-size:12px;font-weight:700;
  color:var(--accent)}
#csearch .results .r .nm{grid-row:1;grid-column:2;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
#csearch .results .r .alt{grid-row:2;grid-column:2;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--muted)}
#csearch .results .r .lv{grid-row:1;grid-column:3;font-size:11px;
  color:var(--muted);white-space:nowrap}
#csearch .results .r .pills{grid-row:1/3;grid-column:4;
  display:flex;flex-direction:column;align-items:flex-end;gap:3px}
#csearch .results .note{font-size:12px;color:var(--muted);padding:6px 8px}

/* state pills, used in the omnibox now, and on cards once the next agent
   builds them */
.stpill{display:inline-block;padding:1px 8px;
  font-size:11px;font-weight:650;white-space:nowrap;
  font-variant-numeric:tabular-nums;border:1px solid var(--axis);
  color:var(--ink-2)}
.stpill.on{background:var(--accent-soft);border-color:var(--accent);
  color:var(--ink)}
.stpill.off{opacity:.55;border-style:dashed}

/* #cards: NOTE, the template's card grid div is id="cards" class="cards",
   and .cards already has a definition in map.css for the landing page's
   own grid. Style compare's card layout only through #cards (never bare
   .cards) so the two pages don't collide. */
#cards{margin:8px 0 30px;display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:1440px){#cards{grid-template-columns:1fr 1fr}}
#cards #cempty{margin:6px 0;padding:28px 12px;text-align:center;
  grid-column:1/-1}

/* ---------------------------------------------------------------- card */
.ccard{background:var(--surface);border:1px solid var(--edge);
  padding:22px 24px 22px;display:flex;
  flex-direction:column;gap:8px;min-width:0}
.ccard .chead{display:flex;flex-wrap:wrap;align-items:center;gap:7px 10px}
.ccard .chead .code{font-family:ui-monospace,Menlo,monospace;font-size:12px;
  font-weight:700;color:var(--accent)}
.ccard .chead .ttl{font-size:20px;font-weight:700;color:var(--ink)}
.ccard .chead .alt{flex-basis:100%;font-size:13px;color:var(--muted)}
.ccard .chead .sp{flex:1 1 auto}
.ccard .pills{display:flex;gap:6px;flex-wrap:wrap}
.ccard .spill{display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px 3px 7px;border:1px solid var(--hair);
  background:var(--ground-2);font-size:12.5px;font-weight:650;cursor:pointer;
  color:var(--ink-2)}
.ccard .spill .sw{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.ccard .spill[aria-pressed="true"]{background:var(--ground);
  border-color:var(--ink-2);color:var(--ink)}
.ccard .spill[aria-pressed="false"]:not([disabled]){opacity:.5}
.ccard .spill[disabled]{opacity:.4;border-style:dashed;cursor:default}
.ccard .xrm{border:0;background:none;color:var(--muted);font-size:15px;
  line-height:1;cursor:pointer;padding:2px 4px}
.ccard .xrm:hover{color:var(--bad);background:var(--bad-bg)}
.ccard .cchart{min-height:80px}
.ccard .cchart .fig{margin:0}

/* mini table below the chart */
.ccard .ctable{margin-top:2px}
.ccard .ctable .cnote{font-size:12px;color:var(--muted);margin:0 0 6px}
.ccard .ctable table{width:100%;font-size:15.5px}
.ccard .ctable .srow{display:inline-flex;align-items:center;gap:6px}
.ccard .ctable .srow .sw{width:8px;height:8px;border-radius:50%;
  flex:0 0 auto}
.ccard .ctable .ctone-ok{color:var(--ok)}
.ccard .ctable .ctone-warn{color:var(--warn)}
.ccard .ctable .ctone-bad{color:var(--bad)}

/* The head search is the page's main entry point: give it and its
   dropdown enough width to show head names, not just codes. */
.field.searchwrap{flex:1 1 100%;max-width:560px}
#csearch{display:block;width:100%;max-width:none}
#csearch input{max-width:none}
/* Free-scales toggle: checkbox inline with its label, aligned to the
   bottom of the neighbouring controls. */
.field.ckfree{flex-direction:row;align-items:center;gap:6px;align-self:flex-end;padding-bottom:6px}
.field.ckfree[hidden]{display:none}