/* Annotation-sources block. Kept in its own file so the figure's stylesheet and this
   one are never edited together. Tokens only, so both themes follow the site. */

.src-table td { vertical-align: top; }
.src-acc { color: var(--ink-3); font-size: 10.5px; }

.src-badge { display: inline-block; font: 600 11px var(--sans); padding: 3px 9px;
  border-radius: 999px; white-space: nowrap; border: 1px solid var(--rule-2); }
.src-badge.cur { background: var(--paper-2); color: var(--ink-2); }
.src-badge.up { background: var(--lime-2); color: var(--ink); border-color: var(--lime); }

.src-details { margin: 14px 0 0; border-top: 1px solid var(--rule); }
.src-details > summary { font: 600 13.5px var(--sans); color: var(--ink); cursor: pointer;
  padding: 11px 0; list-style: none; display: flex; align-items: baseline; gap: 8px; }
.src-details > summary::-webkit-details-marker { display: none; }
.src-details > summary::before { content: '+'; font-family: var(--mono); color: var(--ink-3);
  font-weight: 400; width: 1ch; }
.src-details[open] > summary::before { content: '\2212'; }
.src-details > summary:hover { color: var(--accent); }
.src-details > ul { margin: 0 0 14px; padding-left: 22px; }
.src-details > ul > li { margin-bottom: 8px; max-width: var(--measure); }

.src-block { margin: 0 0 16px; padding-left: 12px; border-left: 2px solid var(--rule); }
.src-block .label { margin: 0 0 5px; text-transform: none; letter-spacing: 0.04em;
  font-size: 12px; color: var(--ink); }
.src-block p.small { margin: 0 0 6px; max-width: var(--measure); }

@media (max-width: 640px) {
  .src-details > summary { padding: 13px 0; }
  .src-badge { font-size: 10.5px; padding: 2px 7px; }
}

/* An absent value is named rather than left blank, so a reader can tell "no value
   published" from "we forgot to fill this in". */
.na { color: var(--ink-3); font-family: var(--sans); font-size: 12px; font-style: italic; }
td.n .na { font-size: 11px; }

/* A lane chosen because it matches a category best in this window, as against a
   feature the report names: the softer third line says which. */
#feat-plot text.lane-fit { fill: var(--ink-3); font-family: var(--mono); font-size: 9.5px; font-style: italic; }

/* ---- the usage register ------------------------------------------------------
   Under the browser: what registers independent of the annotation found at the
   site a feature marked. It is deliberately a quieter register than the plot —
   nothing here is a measurement of the model — and the three verdicts are
   distinguished by weight rather than by hue, so `untested` can never read as a
   weaker `used`. Tokens only, so both themes follow the site. */

/* Nested in the case island, so it carries a rule off the island's top edge
   rather than a box of its own. */
.feat-case .usage-check {
  margin: 11px 0 0; padding: 11px 0 0; border-top: 1px solid var(--rule);
}

.uc-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin: 0 0 6px; }
.uc-verdict {
  font: 600 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--rule-2); background: var(--card); color: var(--ink-2);
}
.uc-verdict[data-verdict="used"] {
  background: var(--lime-2); border-color: var(--lime); color: var(--ink);
}
.uc-verdict[data-verdict="untested"] {
  background: none; border-style: dashed; color: var(--ink-3);
}
.uc-headline { font: 600 13px var(--sans); color: var(--ink); }
.uc-summary { margin: 0 0 9px; font: 13.5px/1.55 var(--serif); color: var(--ink-2); max-width: 74ch; }

.uc-registers { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: 5px; overflow: hidden; }
/* Register, what it answers and what it said on one line; the detail beneath on
   its own. A four-column grid squeezes the detail to a ribbon at this width. */
.uc-registers > li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px;
  background: var(--card); padding: 8px 11px;
}
.ur-detail { flex: 1 0 100%; }
.ur-name { font: 600 11.5px var(--sans); color: var(--ink); }
.ur-role { font: 10px var(--mono); color: var(--ink-3); letter-spacing: 0.02em; }
.ur-result {
  font: 600 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
.ur-result[data-result="used"] { color: var(--accent-ink); }
.ur-result[data-result="not consulted"] { font-style: italic; font-weight: 400; }
.ur-detail { font: 11.5px/1.45 var(--sans); color: var(--ink-2); }

.uc-foot { margin: 8px 0 0; font: 11px var(--sans); color: var(--ink-3); }

/* The picker chip. It repeats the verdict so the choice between windows is made
   with it in view, not after loading one. */
.win-card .wv {
  justify-self: start; font: 600 8.5px var(--mono); letter-spacing: 0.12em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 999px;
  border: 1px solid var(--rule-2); color: var(--ink-3); background: var(--paper-2);
}
.win-card .wv[data-verdict="used"] {
  background: var(--lime-2); border-color: var(--lime); color: var(--ink);
}
.win-card .wv[data-verdict="untested"] { background: none; border-style: dashed; }

/* The verdict key beside the register table. */
.usage-key { display: grid; grid-template-columns: max-content 1fr; gap: 5px 12px;
  margin: 0 0 14px; max-width: var(--measure); }
.usage-key dt {
  font: 600 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; justify-self: start; white-space: nowrap;
  border: 1px solid var(--rule-2); background: var(--card); color: var(--ink-2);
}
.usage-key dt[data-verdict="used"] { background: var(--lime-2); border-color: var(--lime); color: var(--ink); }
.usage-key dt[data-verdict="untested"] { background: none; border-style: dashed; color: var(--ink-3); }
.usage-key dd { margin: 0; font: 12.5px/1.5 var(--sans); color: var(--ink-2); align-self: center; }

@media (max-width: 640px) {
  .uc-registers > li { padding: 9px 10px; }
  .usage-key { grid-template-columns: 1fr; gap: 2px 0; }
  .usage-key dd { margin-bottom: 8px; }
}

/* ---- the case island --------------------------------------------------------
   What this window is, inside the figure, where the interaction help used to
   sit: the kind, the headline, the reason the window was chosen, and — where a
   feature marks a site the annotation does not carry — the usage verdict. The
   interaction help now lives behind the (?) beside the lane toggle. */

.feat-case {
  margin: 0; padding: 13px 24px 14px;
  border-top: 1px solid var(--rule); background: var(--paper-2);
}
.fc-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin: 0 0 5px; }
.fc-kind {
  font: 600 9px var(--mono); letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--rule-2); border-radius: 999px;
  padding: 3px 8px; white-space: nowrap;
}
.fc-kind[data-flag="1"] { color: var(--ink-2); border-color: var(--sel-flag); }
.fc-headline { font: 600 13.5px var(--sans); color: var(--ink); }
.fc-why {
  margin: 0; max-width: 82ch;
  font: 13.5px/1.55 var(--serif); color: var(--ink-2);
}

/* ---- the (?) help disclosure ---------------------------------------------- */

/* The panel hangs off the tools group, so it needs the positioning context here
   rather than in the figure's own stylesheet. .feat-browser clips its overflow,
   which is what keeps the panel inside the figure. */
.feat-tools { position: relative; }
.feat-tools button.help {
  min-width: 34px; padding: 3px 9px; font: 600 14px var(--sans); border-radius: 999px;
}
#feat-help-toggle[aria-expanded="true"] {
  background: var(--sel-bg); color: var(--sel-fg); border-color: var(--sel-bg);
}
.feat-help-panel {
  position: absolute; z-index: 6; right: 0; top: calc(100% + 9px);
  /* .feat-browser is a container-query container, so the panel is sized against
     the figure it must stay inside rather than against the viewport; the
     subtrahend is the heading's own left+right padding. */
  width: min(46ch, calc(100cqw - 48px));
  padding: 13px 15px 14px;
  background: var(--card); color: var(--ink-2);
  border: 1px solid var(--rule-2); border-radius: 8px;
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.14);
  font: 12px/1.5 var(--sans);
}
.feat-help-panel .fh-title {
  margin: 0 0 7px; font: 600 12px var(--sans); color: var(--ink);
}
.feat-help-panel p { margin: 0 0 8px; max-width: none; }
.feat-help-panel p:last-child { margin-bottom: 0; }
.feat-help-panel .fh-lanes {
  padding-top: 8px; border-top: 1px solid var(--rule); color: var(--ink-3); font-size: 11.5px;
}
.feat-help-panel em { font-style: italic; color: var(--ink-2); }

@media (max-width: 640px) {
  .feat-case { padding: 12px 18px 13px; }
  .feat-help-panel { right: 0; width: min(46ch, calc(100cqw - 36px)); }
  .feat-tools button.help { min-width: 40px; }
}