/* ═══════════════════════════════════════════════════════════════════════════
   LAWS — only what is genuinely its own.

   ⛔ The frame, the tiles, the rows, the refusal and empty blocks all come from
   os-app.css and work-clay.css. What lives here is the material nothing else
   in the platform has: the suggestion list under the one field, the citation
   block, the article text column, and the strata.
   ⛔ ONE DESIGN. No prefers-color-scheme block, no second palette — the clay
   tokens are the only styling.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the suggestion list under the one field ─────────────────────────────── */
.osLawSug{
  margin:2px 0 0; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); overflow:hidden;
}
.osLawSugHead{
  font:600 10.5px/1 var(--osMono,ui-monospace,monospace); letter-spacing:.09em;
  color:var(--muted); padding:9px 12px 5px; border-top:1px solid var(--line);
}
.osLawSugHead:first-child{ border-top:0; }
.osLawSugRow{
  display:flex; align-items:center; gap:10px; width:100%;
  /* ⛔ 44 px — a suggestion is a target, and the whole point of the row is
     that a thumb can hit it. */
  min-height:44px; padding:8px 12px; border:0; border-top:1px solid var(--line2);
  background:none; text-align:left; cursor:pointer; font:inherit; color:var(--ink);
}
.osLawSugRow:first-child{ border-top:0; }
.osLawSugRow:hover,.osLawSugRow:focus-visible{ background:var(--hover); }
.osLawSugMain{ flex:1 1 auto; min-width:0; font-size:13.5px; }
.osLawSugDoc{
  display:block; font-style:normal; font-size:11.5px; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.osLawSugSide{ flex:0 0 auto; font-size:11.5px; color:var(--muted); }
.osLawAsk .osLawSugMain{ font-weight:600; }
.osLawSugNone{ padding:12px; font-size:13px; color:var(--muted); }

/* ── the lens chips ──────────────────────────────────────────────────────── */
.osLawLens{ display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 12px; }
.osLawLens button{
  min-height:34px; padding:6px 13px; border:1px solid var(--line);
  border-radius:999px; background:var(--surface); color:var(--ink);
  font:500 12.5px/1.2 inherit; cursor:pointer; transition:.16s;
}
.osLawLens button:hover{ transform:translateY(-1px); }
.osLawLens button.on{ background:var(--violet,#5b4bd6); border-color:transparent; color:#fff; }
@media (prefers-reduced-motion:reduce){ .osLawLens button{ transition:none; } .osLawLens button:hover{ transform:none; } }

/* ── a citation, in an answer ────────────────────────────────────────────── */
.osLawCite{
  border:1px solid var(--line); border-radius:12px; background:var(--surface);
  padding:12px 14px; margin:0 0 10px;
}
.osLawCiteHead{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; width:100%;
  min-height:44px; border:0; background:none; padding:0; cursor:pointer;
  text-align:left; font:inherit; color:var(--ink);
}
.osLawCiteRef{ font-weight:650; font-size:14px; }
.osLawCiteDoc{ font-style:normal; font-size:12px; color:var(--muted); }
/* ⛔ Status is a WORD, and the colour is the second signal — never the only
   one. A repealed article that differs from a live one by hue alone is
   invisible to a third of readers and to every printout. */
.osLawCiteSt{ margin-left:auto; font-size:11.5px; color:var(--muted); }
.osLawCiteSt.warn{ color:var(--amber,#a86400); font-weight:600; }
.osLawQuote{
  margin:8px 0 0; padding:0 0 0 11px; border-left:2px solid var(--line2);
  font-size:13.5px; line-height:1.62; color:var(--ink);
}
.osLawCiteFoot{ margin-top:8px; font-size:11.5px; color:var(--muted); }
/* Which lane found it — "your words" against "about the same thing". ⛔ The
   second is a claim we are making on the reader's behalf and it is labelled. */
.osLawFound{
  display:inline-block; padding:1px 7px; border-radius:999px;
  background:var(--hover); font-size:11px;
}
.osLawLane{ margin:0 0 12px; font-size:12.5px; color:var(--muted); }

/* ── the article ─────────────────────────────────────────────────────────── */
.osLawText{ max-width:74ch; margin:16px 0 0; }
.osLawText p{ margin:0 0 .9em; font-size:14.5px; line-height:1.72; }
.osLawRead section{ margin:0 0 22px; }
.osLawRead h4{ margin:0 0 6px; font-size:13.5px; font-weight:650; }
.osLawRead p{ max-width:74ch; font-size:14px; line-height:1.7; white-space:pre-wrap; }
.osLawWarn{
  margin:0 0 14px; padding:10px 13px; border-radius:10px;
  background:var(--peach,#fdf0e4); border:1px solid var(--line);
  font-size:13px; color:var(--ink);
}
.osLawExt{ margin:18px 0 0; font-size:12.5px; }
.osLawNote{ margin:12px 0 0; font-size:12px; line-height:1.55; color:var(--muted); max-width:70ch; }

/* ── browse by area ──────────────────────────────────────────────────────── */
.osLawCats{ display:flex; flex-wrap:wrap; gap:6px; }
.osLawCat{
  min-height:34px; padding:6px 12px; border:1px solid var(--line);
  border-radius:999px; background:var(--surface); color:var(--ink);
  font:500 12.5px/1.2 inherit; cursor:pointer; transition:.16s;
}
.osLawCat:hover{ transform:translateY(-1px); }
@media (prefers-reduced-motion:reduce){ .osLawCat{ transition:none; } .osLawCat:hover{ transform:none; } }

/* ── THE STRATA ──────────────────────────────────────────────────────────────
   ⛔ Scrolls rather than shrinks. A dated axis squeezed under 560 px stops
   being readable and starts being decoration, and a decoration that looks like
   evidence is the failure this drawing exists to avoid. */
.osLawStrataWrap{ overflow-x:auto; margin:14px 0 0; }
.osLawStrata{ display:block; width:100%; min-width:560px; height:auto; }
.osLawYr{ stroke:var(--line); stroke-width:.5; stroke-dasharray:2 3; }
.osLawYr.on{ stroke:var(--line2); stroke-width:.7; stroke-dasharray:none; }
.osLawYrT{ fill:var(--muted); font:9.5px var(--osMono,ui-monospace,monospace); text-anchor:middle; }
.osLawRowT{ fill:var(--muted); font:10px var(--osMono,ui-monospace,monospace); }
.osLawRowT.dim{ opacity:.55; }
.osLawSpan{ fill:var(--clay-mint,#bcd9c4); }
/* ⛔ A repealed span is HATCHED, not merely tinted — a repealed article is an
   absence of law from that date, and the hatch is the platform's word for
   absence. Colour alone would make it a variation on "in force". */
.osLawSpan.gone{ fill:url(#osLawHatch); stroke:var(--line2); stroke-width:.4; }
.osLawTick{ stroke:var(--violet,#5b4bd6); stroke-width:1.4; }
.osLawToday{ stroke:var(--ink); stroke-width:1; }
.osLawSince{ stroke:var(--amber,#a86400); stroke-width:1.2; }
.osLawUndated{ margin:6px 0 0; font:11px var(--osMono,ui-monospace,monospace); color:var(--muted); }
.osLawStrataNone{ margin:14px 0 0; font-size:13px; color:var(--muted); }

/* ── the chat widget ─────────────────────────────────────────────────────── */
.osLawMark{
  border:1px solid var(--line); border-radius:14px; background:var(--surface);
  padding:12px 14px; margin:0 0 10px; cursor:pointer; transition:.16s;
}
.osLawMark:hover{ transform:translateY(-1px); }
.osLawMark:focus-visible{ outline:2px solid var(--violet,#5b4bd6); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ .osLawMark{ transition:none; } .osLawMark:hover{ transform:none; } }
.osLawMarkHead{ display:flex; align-items:baseline; gap:10px; }
.osLawMarkRef{ font-weight:650; font-size:13.5px; }
.osLawMarkSt{ margin-left:auto; font-size:11.5px; color:var(--muted); white-space:nowrap; }
.osLawMarkSt.warn{ color:var(--amber,#a86400); font-weight:600; }
.osLawMarkDoc{ font-size:12px; color:var(--muted); margin-top:2px; }
.osLawMarkQuote{
  margin:8px 0 0; padding:0 0 0 11px; border-left:2px solid var(--line2);
  font-size:13px; line-height:1.6;
  /* Two lines, then an ellipsis — the widget quotes, it does not reprint. */
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.osLawMarkTrust{ margin-top:8px; font-size:11.5px; color:var(--muted); }
.osLawMarkDates{ margin-top:2px; font:11px var(--osMono,ui-monospace,monospace); color:var(--muted); }
.osLawMarkFoot{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-top:10px; padding-top:9px; border-top:1px solid var(--line2); font-size:12px;
}
.osLawMarkOpen{ color:var(--violet,#5b4bd6); font-weight:600; }

@media (max-width:560px){
  .osLawCiteSt{ margin-left:0; }
  .osLawMarkSt{ margin-left:0; }
}

/* ── the research bundle card (2026-09-10) ──────────────────────────────────
   One card for a whole legal question. It sits in the answer like the single
   citation card does, and every row opens the article in the Laws app. */
.osLawRs{border:1px solid var(--line,#e3e3ea);border-radius:14px;padding:14px 15px;margin:10px 0;
  background:var(--panel,#fff)}
.osLawRsTop{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}
.osLawRsKicker{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc,#2a7ab0);font-weight:600}
.osLawRsQ{font-size:13.5px;color:var(--muted,#5b5b66)}
.osLawRsCovs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.osLawRsCov{font-size:11px;color:var(--muted,#5b5b66);border:1px solid var(--line,#e3e3ea);
  border-radius:999px;padding:3px 10px}
.osLawRsRow{border-top:1px solid var(--line,#e3e3ea);padding:11px 0;cursor:pointer}
.osLawRsRow:hover{background:hsl(205 80% 55% / .05)}
.osLawRsHid{display:none}
.osLawRsHid.osLawRsShown{display:block}
.osLawRsHead{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.osLawRsRef{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--acc,#2a7ab0);white-space:nowrap}
.osLawRsTitle{font-size:14px;font-weight:600;flex:1;min-width:0}
.osLawRsTag{font-size:10.5px;color:var(--faint,#9a9aa6);border:1px solid var(--line,#e3e3ea);
  border-radius:999px;padding:2px 8px;white-space:nowrap}
.osLawRsAct{font-size:11.5px;color:var(--muted,#5b5b66);margin-top:2px}
.osLawRsQuote{margin:7px 0 0;padding-left:11px;border-left:2px solid var(--line,#e3e3ea);
  font-size:13px;line-height:1.62;color:var(--fg,#17171c)}
.osLawRsFoot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;
  font-family:ui-monospace,Menlo,monospace;font-size:11px}
.osLawRsFoot a{color:var(--acc,#2a7ab0);text-decoration:none}
.osLawRsOpen{color:var(--muted,#5b5b66)}
.osLawRsMore{margin-top:10px;border:1px solid var(--line,#e3e3ea);background:none;color:var(--muted,#5b5b66);
  border-radius:999px;padding:7px 15px;font:600 12px/1 inherit;cursor:pointer}
.osLawRsMore:hover{color:var(--acc,#2a7ab0);border-color:var(--acc,#2a7ab0)}
.osLawRsNote{margin-top:11px;font-size:11px;color:var(--faint,#9a9aa6);line-height:1.6}
.osLawRsPartial{font-size:11.5px;color:hsl(32 85% 42%);background:hsl(38 90% 55% / .12);
  border-radius:9px;padding:7px 11px;margin-bottom:10px}
/* ⛔ VERIFIED AND FLAGGED, NEVER REMOVED. Same amber family as the partial
   warning above on purpose: both say "read this with one eye open", and a
   second colour would invent a severity the check cannot support — an
   unsupported claim is not a false one. */
.osLawRsClaims{font-size:11.5px;color:hsl(32 85% 42%);background:hsl(38 90% 55% / .10);
  border-radius:9px;padding:8px 11px;margin:10px 0 2px}
.osLawRsClaimsHead{font-weight:600;letter-spacing:.01em;margin-bottom:5px}
.osLawRsClaim{display:flex;gap:8px;align-items:baseline;padding:2px 0;line-height:1.5}
.osLawRsClaimV{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:600;
  white-space:nowrap}
.osLawRsClaimS{color:var(--faint,#9a9aa6);overflow-wrap:anywhere}