/* ICNC precedent search — tool page.
 *
 * A separate stylesheet rather than Tailwind classes: the compiled sheet in
 * static/base.css is frozen (see base.html) and only contains the utilities
 * it happened to ship with, so anything new renders unstyled. Tokens
 * below are copied from that sheet so this page matches the rest of the site
 * exactly.
 */

.icnc {
  --navy: #1b2a4a;
  --navy-800: #243b53;
  --navy-700: #334e68;
  --navy-600: #486581;
  --navy-100: #d9e2ec;
  --navy-50: #f0f4f8;

  --paper: #fffbf5;
  --paper-100: #faf7f2;
  --paper-200: #f0ede8;
  --line: #e3dfd9;
  --muted: #a39e96;
  --muted-600: #7d7870;
  --ink-700: #5c5850;
  --ink-800: #3d3a35;
  --ink: #1f1d1a;

  --pos-bg: #e8efe9; --pos-fg: #2f5d3a;
  --cau-bg: #f6edda; --cau-fg: #7a5610;
  --neg-bg: #f7e3e1; --neg-fg: #8a2b21;
  --neu-bg: #ece7dd; --neu-fg: #5b5346;

  --radius: 10px;
  --shadow: 0 1px 2px rgb(31 29 26 / 0.06);
  --header-h: 132px;   /* toolbar + filter row, used to size the sticky panes */
  --card-w: 46rem;     /* widest a result card may be before its prose overruns */

  color: var(--ink-700);
  background: var(--paper-100);
  min-height: 100vh;
}

.icnc *, .icnc *::before, .icnc *::after { box-sizing: border-box; }

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

/* ---------- toolbar ---------------------------------------------------- */

/* Sticks below the site header, not under it. Both are sticky at the top of the
   page and the site header wins on z-index, so at top:0 this bar's first 65px
   -- the search field -- slid underneath it as soon as the page scrolled.
   --site-header-h and --bar-h are measured and set by the page script: the
   header's height differs between breakpoints and this bar's changes as the
   filter row appears, so neither can be a constant here. */
.icnc-bar {
  position: sticky; top: var(--site-header-h, 0px); z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
/* Anything scrolled to stops below the sticky stack rather than behind it. */
.icnc-hit { scroll-margin-top: calc(var(--site-header-h, 0px) + var(--bar-h, 0px) + 0.5rem); }
/* One container for the whole page: the site header, this toolbar and the split
   below all use it, so the logo's left edge is the first card's left edge and
   the nav's right edge is the judgment's. Applied to the header via the
   header_container block in precedents.html.

   The padding steps match the header's Tailwind scale (px-4 / sm:px-6 / lg:px-8)
   because a shared max-width alone still leaves the edges 12px apart. */
.icnc-bar-inner,
.icnc-filters,
.icnc-legend,
.icnc-hint,
.icnc-split {
  max-width: 1600px; margin-left: auto; margin-right: auto;
  padding-left: 1rem; padding-right: 1rem;
}
@media (min-width: 640px) {
  .icnc-bar-inner, .icnc-filters, .icnc-legend, .icnc-hint, .icnc-split {
    padding-left: 1.5rem; padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .icnc-bar-inner, .icnc-filters, .icnc-legend, .icnc-hint, .icnc-split {
    padding-left: 2rem; padding-right: 2rem;
  }
}

.icnc-bar-inner {
  padding-top: 0.875rem; padding-bottom: 0.875rem;
  display: flex; align-items: center; gap: 1rem;
}
.icnc-brand { display: flex; align-items: baseline; gap: 0.5rem; flex: 0 0 auto; }
.icnc-brand b {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.0625rem; color: var(--navy); font-weight: 700; letter-spacing: -0.01em;
}
.icnc-brand span {
  font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted-600);
}

.icnc-matters {
  flex: 0 0 auto; font-size: 0.8125rem; color: var(--navy-700);
  text-decoration: none; white-space: nowrap;
}
.icnc-matters:hover { text-decoration: underline; }

/* The Wellknown connect action. Weighted a touch heavier than Matters beside it
   (full navy, medium weight) and — unlike Matters — kept visible on phones,
   because it was the entry point that was missing entirely: a signed-in user had
   no way to reach the connect page at all. */
.icnc-connect {
  flex: 0 0 auto; font-size: 0.8125rem; font-weight: 500;
  color: var(--navy); text-decoration: none; white-space: nowrap;
}
.icnc-connect:hover { text-decoration: underline; }

@media (max-width: 640px) {
  /* The bar stacks on phones; the Save popover's "All matters" link keeps
     the index reachable without spending a row on it. */
  .icnc-matters { display: none; }
}

/* Stands where the search box would, so the page reads as the tool it is
   rather than as a barrier in front of one. */
.icnc-empty-cta { margin-top: 1.25rem; font-size: 0.9375rem; }
/* The one call to action on the signed-out page reads as a button, not a
   link in running prose; the reassurance sits under it as a caption. */
.icnc-empty-cta a.icnc-cta {
  display: inline-block; padding: 0.625rem 1.375rem;
  border-radius: var(--radius); background: var(--navy); color: #fff;
  text-decoration: none; font-size: 0.9375rem; font-weight: 600;
}
.icnc-empty-cta a.icnc-cta:hover { background: var(--navy-800); }
.icnc-cta-note { display: block; margin-top: 0.625rem; font-size: 0.8125rem; color: var(--muted-600); }
.icnc-locked-q { margin-top: 1.25rem; font-size: 0.9375rem; color: var(--ink-800); }
.icnc-empty-cta a { color: var(--navy); font-weight: 600; }

.icnc-search { flex: 1 1 auto; display: flex; gap: 0.5rem; min-width: 0; }
.icnc-input {
  flex: 1 1 auto; min-width: 0;
  padding: 0.625rem 0.875rem;
  font: inherit; font-size: 0.9375rem; color: var(--ink-800);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.icnc-input::placeholder { color: var(--muted); }
.icnc-input:focus {
  outline: none; border-color: var(--navy-600);
  box-shadow: 0 0 0 3px rgb(72 101 129 / 0.15);
}
.icnc-go {
  flex: 0 0 auto; padding: 0.625rem 1.25rem;
  font: inherit; font-size: 0.9375rem; font-weight: 500;
  color: #fff; background: var(--navy); border: 0; border-radius: var(--radius);
  cursor: pointer; transition: background 0.15s;
}
.icnc-go:hover { background: var(--navy-800); }
.icnc-go:disabled { opacity: 0.55; cursor: default; }

/* ---------- filter row -------------------------------------------------- */

.icnc-filters {
  padding-bottom: 0.75rem;
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
}
.icnc-count { font-size: 0.8125rem; color: var(--muted-600); margin-right: auto; }
.icnc-count b { color: var(--ink-800); font-weight: 600; }

.icnc-chip {
  padding: 0.25rem 0.6875rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 500;
  background: #fff; color: var(--ink-700);
  border: 1px solid var(--line); cursor: pointer;
}
.icnc-chip:hover { border-color: var(--navy-600); }
.icnc-chip[aria-pressed="true"] {
  background: var(--navy); color: #fff; border-color: var(--navy);
}
.icnc-sort {
  font: inherit; font-size: 0.75rem; padding: 0.25rem 0.5rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink-700); cursor: pointer;
}

/* ---------- legend ------------------------------------------------------ */

.icnc-legend {
  padding-bottom: 0.875rem;
  font-size: 0.8125rem;
}
.icnc-legend > summary {
  cursor: pointer; color: var(--navy-700); font-size: 0.75rem;
  display: inline-block; padding: 0.125rem 0;
}
.icnc-legend > summary:hover { text-decoration: underline; }
.icnc-legend-body {
  margin-top: 0.625rem; padding: 0.875rem 1rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.icnc-legend-row {
  display: flex; gap: 0.75rem; align-items: baseline; margin-bottom: 0.5rem;
}
.icnc-legend-row > span { flex: 0 0 9.5rem; justify-content: center; }
.icnc-legend-row > p { margin: 0; line-height: 1.5; color: var(--ink-700); }
.icnc-legend-row b { color: var(--ink); font-weight: 600; }
.icnc-legend-foot {
  margin: 0.75rem 0 0; padding-top: 0.625rem; border-top: 1px solid var(--line);
  font-size: 0.75rem; color: var(--muted-600); line-height: 1.5;
}
@media (max-width: 640px) {
  .icnc-legend-row { flex-direction: column; gap: 0.25rem; }
  .icnc-legend-row > span { flex: 0 0 auto; }
}

/* ---------- split layout ------------------------------------------------ */

.icnc-split {
  padding-top: 1.25rem; padding-bottom: 1.25rem;
  display: grid; gap: 1.25rem;
/* The results column is sized to the card, not to a share of the window.
     A card cannot use more than --card-w without its prose running past a
     readable measure, so a proportional column just grew a margin on the right
     of the list -- 230px of nothing at 1512px, and worse the wider the display.
     Everything left over goes to the judgment, which is the one pane that gets
     genuinely better with width. The results track can shrink below --card-w
     when the window is too narrow to seat both at full size; the reader's floor
     is what gives first. Chrome's own PDF chrome (thumbnail rail, toolbar) is
     asked away via the #navpanes=0 fragment on the iframe, so the width the
     reader gets is all page. */
  grid-template-columns: minmax(0, var(--card-w)) minmax(420px, 1fr);
  align-items: start;
}
/* Before a search there is nothing to put beside the list, so the two-column
   grid would strand the empty state in a narrow gutter next to dead space. */
.icnc-split[data-state="idle"] {
  grid-template-columns: 1fr; max-width: 900px;
  min-height: calc(100vh - 340px); align-content: center;
}
/* The idle column is centred, which suits the signed-in empty state -- two
   short lines and a row of chips, symmetric enough that centring reads as
   composition. The signed-out intro is a different animal: a heading, a lede,
   three points and a call to action, sitting directly under a toolbar that is
   flush to the container edge. Centred, it floats 270px inside the toolbar's
   left edge and the two stop looking like one page. Only the wrapper moves --
   the 900px measure is still doing its job. */
/* ...but 900px was the wrong cap for this one. Left-aligning a 900px column in
   a 1600px container fixed the alignment and bought a second problem: 700px of
   nothing down the right side, which reads as a page that failed to load. The
   signed-out intro is a hero, not a column, so it gets the container width and
   composes inside it. */
/* Back to the container, not to no constraint at all. `max-width: none` here
   cancelled the 1600px the split shares with the toolbar and the nav, so above
   a 1600px window the intro spanned the whole viewport while everything else
   stayed centred -- invisible at exactly 1600, which is where it was first
   checked. Only the 900px idle cap should be lifted; the container stays. */
.icnc-split--intro[data-state="idle"] { max-width: 1600px; margin-inline: auto; }

.icnc-results { min-width: 0; }
/* Widest a result card may be. Past this its prose runs beyond a readable
   measure and the metadata rail drifts away from the text it belongs to, so the
   card stops here and the grid gives the remaining width to the judgment. */
.icnc-results ol { list-style: none; margin: 0; padding: 0; max-width: var(--card-w); }
.icnc-results li + li { margin-top: 0.625rem; }

.icnc-hit {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-left: 3px solid transparent;
  border-radius: var(--radius); padding: 0.875rem 1rem;
  box-shadow: var(--shadow); transition: border-color 0.12s, box-shadow 0.12s;
  /* Text left, metadata in a right-hand rail. Filling the full card width with
     prose gave ~150 characters a line, roughly double the 45-75 that reading
     research puts as comfortable — past that the eye loses the start of the
     next line. The width is better spent on scannable metadata than on longer
     lines. */
  display: grid; grid-template-columns: minmax(0, 34rem) auto;
  gap: 0.5rem 1.5rem; align-items: start; justify-content: space-between;
}
.icnc-hit-main { min-width: 0; }
.icnc-hit:hover { border-color: var(--navy-600); }
.icnc-hit[aria-selected="true"] {
  border-left-color: var(--navy); background: var(--navy-50);
}
.icnc-hit:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.icnc-hit-rank {
  font-size: 0.6875rem; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.icnc-hit-title {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--ink);
  margin: 0.125rem 0 0.375rem;
  max-width: 46ch;              /* headings read shorter than body text */
}
/* The rail: citation, weight and treatments, stacked so the eye can compare
   them straight down the column across results. */
.icnc-hit-meta {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 0.3125rem; grid-row: span 2;
}
.icnc-hit-snip {
  margin: 0.5rem 0 0; font-size: 0.8125rem; line-height: 1.6; color: var(--muted-600);
  /* 52ch, not 66ch: the ch unit is the width of "0", which is wider than
     average lowercase, so 68ch measured out at ~90 real characters. This
     lands around 70 — inside the 45-75 band. */
  max-width: 48ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- badges ------------------------------------------------------ */

.icnc-pill {
  display: inline-flex; align-items: center; border-radius: 999px;
  padding: 0.0625rem 0.5rem; font-size: 0.6875rem; font-weight: 500; white-space: nowrap;
}
.icnc-pos { background: var(--pos-bg); color: var(--pos-fg); }
.icnc-cau { background: var(--cau-bg); color: var(--cau-fg); }
.icnc-neg { background: var(--neg-bg); color: var(--neg-fg); }
.icnc-neu { background: var(--neu-bg); color: var(--neu-fg); }
.icnc-auth {
  display: inline-flex; align-items: center; border-radius: 999px;
  background: var(--navy); color: #fff; padding: 0.0625rem 0.5rem;
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}
.icnc-cite { font-size: 0.6875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* The neutral citation sits above the SCR one and reads darker: it is the
   court-issued canonical identifier, and the SCR citation is the reporter's.
   Tabular figures so the numbers line up down the rail across results. */
.icnc-neutral {
  font-size: 0.6875rem; font-weight: 600; color: var(--ink-800);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em; white-space: nowrap;
}
/* Copy affordance in the reader header only. Styled as text until hovered so it
   does not compete with the Open PDF link beside it. */
.icnc-copy {
  border: 1px solid transparent; border-radius: 999px;
  background: none; padding: 0.125rem 0.4375rem; margin-left: -0.4375rem;
  cursor: pointer; font-family: inherit;
}
.icnc-copy:hover { border-color: var(--line); background: var(--paper); }
.icnc-copy:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.icnc-copy.is-copied { color: var(--pos-fg); border-color: transparent; background: var(--pos-bg); }

/* Pinpoint. Set apart from the passage so it reads as a reference rather than
   as part of the quotation, and quiet enough not to compete with the prose. */
.icnc-para {
  display: inline-block; white-space: nowrap;
  font-size: 0.6875rem; font-variant-numeric: tabular-nums;
  color: var(--muted-600); background: var(--paper-200);
  padding: 0.0625rem 0.375rem; border-radius: 3px;
  vertical-align: 0.05em;
}

/* Copy control in the reader header, styled like the neutral-citation one so
   the two read as a pair rather than as competing buttons. */
.icnc-cite-copy {
  border: 1px solid var(--line); border-radius: 999px;
  background: none; padding: 0.125rem 0.5rem;
  font: inherit; font-size: 0.6875rem; color: var(--navy-700);
  cursor: pointer; white-space: nowrap;
}
.icnc-cite-copy:hover { background: var(--paper); }
.icnc-cite-copy:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.icnc-cite-copy.is-copied { color: var(--pos-fg); background: var(--pos-bg); border-color: transparent; }

/* ---------- good-law flag ----------------------------------------------- */

/* Deliberately not a treatment pill. The pills are a tally of what benches said;
   this is a judgement about whether the case can still be relied on, and it has
   to survive being scanned past. Left rule and a mark rather than a filled
   block, so a red card does not shout down the six sound results beside it. */
.icnc-flag {
  display: flex; gap: 0.5rem; align-items: baseline;
  margin: 0 0 0.5rem;
  padding: 0.4375rem 0.625rem;
  border-left: 3px solid currentColor;
  border-radius: 0 4px 4px 0;
  font-size: 0.75rem; line-height: 1.45;
}
.icnc-flag-mark {
  font-weight: 700; font-size: 0.8125rem; line-height: 1.2;
  flex: 0 0 auto; width: 0.75rem; text-align: center;
}
.icnc-flag-body { display: flex; flex-direction: column; min-width: 0; }
.icnc-flag-body b { font-weight: 600; }
.icnc-flag-body span { color: var(--ink-700); opacity: 0.85; }

.icnc-flag--doubted { color: #9a2f22; background: #fbecea; }
.icnc-flag--limited { color: #8a5a12; background: #f7efdf; }

/* Available, not advertised: someone disagreeing with the status will look for
   it, and nobody else should have to read past it. */
.icnc-flag-report {
  margin-left: auto; align-self: center; flex: 0 0 auto;
  font: inherit; font-size: 0.6875rem; font-weight: 500;
  background: none; border: 0; padding: 0.125rem 0.25rem;
  color: currentColor; opacity: 0.55; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.icnc-flag-report:hover { opacity: 1; }
.icnc-flag-report:disabled { text-decoration: none; cursor: default; opacity: 0.8; }
.icnc-flag-report:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

/* On a result card it competes with the title, so it drops to one line. */
.icnc-flag--card { margin-bottom: 0.375rem; padding: 0.3125rem 0.5rem; }
.icnc-flag--card .icnc-flag-body span { display: none; }

/* In the reader and the evidence pane it has room to give the advice too. */
.icnc-reader-head .icnc-flag { margin: 0 0 0.75rem; }
.icnc-why > .icnc-flag { margin-bottom: 1rem; }

/* ---------- reader ------------------------------------------------------ */

.icnc-reader {
  /* Pin below the MEASURED sticky stack (site header + toolbar), not the
     132px guess: pinned short, the pane slides under the bar as the list
     scrolls and its header becomes unreachable. */
  position: sticky;
  top: calc(var(--site-header-h, 0px) + var(--bar-h, 0px) + 0.5rem);
  height: calc(100vh - var(--site-header-h, 0px) - var(--bar-h, 0px) - 1rem);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden;
}
.icnc-reader-head { padding: 1rem 1.25rem 0; border-bottom: 1px solid var(--line); }
.icnc-reader-title {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.125rem; font-weight: 700; line-height: 1.3; color: var(--ink); margin: 0;
}
.icnc-reader-sub {
  margin: 0.25rem 0 0.75rem; font-size: 0.75rem; color: var(--muted-600);
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
}
.icnc-tabs { display: flex; gap: 0.25rem; }
.icnc-tab {
  font: inherit; font-size: 0.8125rem; font-weight: 500;
  padding: 0.5rem 0.75rem; border: 0; background: none; cursor: pointer;
  color: var(--muted-600); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.icnc-tab[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--navy); }
.icnc-tab:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }

.icnc-panel { flex: 1 1 auto; min-height: 0; overflow: auto; }
.icnc-panel[hidden] { display: none; }
.icnc-pdf { width: 100%; height: 100%; border: 0; display: block; background: var(--paper-200); }

/* "Why it ranks" */
.icnc-why { padding: 1.25rem; }
.icnc-why-lead { margin: 0 0 1rem; font-size: 0.875rem; line-height: 1.6; color: var(--ink-700); }
.icnc-why-lead b { color: var(--ink); }
.icnc-cited { list-style: none; margin: 0; padding: 0; }
.icnc-cited li {
  padding: 0.625rem 0; border-top: 1px solid var(--line);
  display: flex; gap: 0.75rem; align-items: baseline;
}
.icnc-cited-date {
  flex: 0 0 5.5rem; font-size: 0.6875rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.icnc-cited-title { flex: 1 1 auto; font-size: 0.8125rem; line-height: 1.45; color: var(--ink-800); }

/* ---------- states ------------------------------------------------------ */

.icnc-empty { padding: 4rem 1.5rem; text-align: center; color: var(--muted-600); }
.icnc-empty h2 + p { margin-top: 0.5rem; }
.icnc-empty h2 {
  font-family: "Source Serif 4", Georgia, serif; font-size: 1.5rem;
  color: var(--ink); margin: 0 0 0.625rem; font-weight: 700;
  text-wrap: balance;
}
.icnc-empty p { margin: 0 auto 1.25rem; max-width: 34rem; font-size: 0.9375rem; line-height: 1.6; }
.icnc-examples { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.icnc-example {
  font: inherit; font-size: 0.8125rem; padding: 0.4375rem 0.75rem; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 999px; color: var(--navy-700);
}
.icnc-example:hover { border-color: var(--navy-600); background: var(--navy-50); }

/* The signed-out introduction is the only block on this page that gets read
   rather than glanced at, so it opts out of the centring the rest of the empty
   state uses. Centred prose starts every line at a different x, so the eye has
   to hunt for the left edge on each return sweep; at four lines that is a real
   cost, and it falls hardest on readers with dyslexia. Everything else in the
   empty state is one or two lines and stays centred, where the symmetry reads
   as composition rather than as an obstacle. */
/* Left, not centred-as-a-block. The toolbar above starts at the container edge,
   and a centred column under an edge-aligned toolbar reads as two pages stacked
   rather than one. Same rule the nav follows: one vertical line down the left
   of the tool. */
/* padding-inline, not padding-left. .icnc-empty centres itself with padding on
   both sides; zeroing only the left one left 24px on the right, which is what
   kept the second column from ever reaching the container edge the sign-in
   button sits on. The symmetry of the base rule is the whole reason a one-sided
   override reads as correct and is not. */
.icnc-empty--intro { text-align: left; max-width: none; margin-inline: 0; padding-inline: 0; }
/* No measure cap on the heading: the column it sits in is already the measure,
   and capping it in ch broke "Ratio — 38,096 Supreme Court precedents, weighed"
   across three ragged lines. balance settles it into two. */
.icnc-empty--intro h2 { text-wrap: balance; }

/* The proof band: real screenshots, framed like the product windows they
   are. Full-width under the intro's two columns. */
/* minmax(0,1fr), not auto: the rotating "members are reading" chips are
   nowrap with max-width:100%, and a percentage max-width resolves as auto in
   grid TRACK sizing — so one long case name set the track to the chip's full
   unwrapped width (~1200px in a 544px column), shoving the demo video out of
   the viewport until the next rotation snapped it back. A zero-min track is
   always the container's width; the chip's own ellipsis then truncates. */
.icnc-shots { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem; margin-top: 3rem; }
.icnc-shot { margin: 0; }
.icnc-shot figcaption {
  font-size: 0.9375rem; line-height: 1.6; color: var(--ink-700);
  max-width: 60ch; margin-bottom: 0.75rem;
}
.icnc-shot figcaption b { color: var(--ink); }
.icnc-shot img, .icnc-shot video {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(27, 42, 74, 0.10);
}
.icnc-cta-again { margin-top: 2.5rem; }
/* One door on a phone. Stacked, the first CTA and the closing one sit a
   single flick apart — the video is only ~220px tall at 390px wide — and
   the pair reads as a mistake. The closing door earns its place only at
   widths where the evidence puts real distance between them. */
@media (max-width: 1023px) { .icnc-cta-again { display: none; } }

/* Two columns once there is width for them: the whole pitch -- claims and the
   sign-in door -- reads down the left, and the demo sits on the right, its top
   level with the headline, so the video and the call to action are both above
   the fold instead of the video sitting full-width below it. The right track is
   capped near the video's own width: full-bleed at 1600px was the "too big"
   complaint, and a bounded track keeps it a demo beside the pitch, not a banner
   under it. The left track takes the rest, so the prose still gets its measure. */
@media (min-width: 1024px) {
  .icnc-empty--intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
  /* The pitch stacks down the left in reading order -- the same order it stacks
     in on a phone -- with the sign-in CTA closing it, above the fold. */
  .icnc-empty--intro > h2              { grid-column: 1; grid-row: 1; }
  .icnc-empty--intro > .icnc-lede      { grid-column: 1; grid-row: 2; }
  .icnc-empty--intro > .icnc-points    { grid-column: 1; grid-row: 3; }
  .icnc-empty--intro > .icnc-try       { grid-column: 1; grid-row: 4; }
  .icnc-empty--intro > .icnc-examples  { grid-column: 1; grid-row: 5; }
  .icnc-empty--intro > .icnc-empty-cta { grid-column: 1; grid-row: 6; }
  /* The demo: right column, spanning the pitch, top-aligned with the headline.
     align-self:start keeps it its own height (never stretched down the column),
     and the capped track keeps that height below the pitch's, so the left rows
     never get pushed apart to make room for it. */
  .icnc-empty--intro > .icnc-shots     { grid-column: 2; grid-row: 1 / span 6;
                                         margin-top: 0; align-self: start; }
  /* Keep the demo at the top of its column, level with the headline and above
     the fold. The "members are reading" strip is source-ordered before it (so it
     leads on a phone, where the video is the tail); here that would push the
     video down the column, so the video takes the lead and the strip follows. */
  .icnc-empty--intro > .icnc-shots > .icnc-shot--video { order: -1; }
  /* The closing door earned its place only when the full-width video sat BELOW
     the pitch and put real distance between the two CTAs. With the demo now
     beside the pitch, the two doors would stack a flick apart and read as a
     duplicate -- so drop it here, exactly as the phone layout already does. The
     single left-column CTA is above the fold, which is the whole point. */
  .icnc-empty--intro > .icnc-cta-again { display: none; }
  .icnc-shot--video { display: block; }
  .icnc-shot--video figcaption { margin-bottom: 0.875rem; max-width: 60ch; }
  /* The "members are reading" strip shares the demo column beside the pitch, and
     it rotates. With chips wrapping horizontally, a set of short names was one
     row and a set of long ones was three -- and that height change resized the
     shared grid rows, so the pitch (and its sign-in CTA) jumped as the strip
     cycled. Stack the chips one per line: N chips is always N lines, so height
     depends on the COUNT, not on how the names happen to wrap. Each chip is held
     to a single line (truncated if absurdly long), and the box reserves the
     three-chip height so a sparse feed of one or two items doesn't shrink it
     either. Net: the chips change, the layout never does. Desktop only -- on a
     phone the strip is full-width below the video and wrapping is fine there. */
  .icnc-examples--reading { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; }
  .icnc-examples--reading > a.icnc-reading-chip {
    white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  }
  .icnc-empty--intro > .icnc-shots > .icnc-reading { min-height: 9.5rem; }
}
/* Undo the centring margins inherited from .icnc-empty p. The measure is in ch
   rather than rem so it tracks the font rather than the viewport: this is the
   width the line-length rule is actually about. */
.icnc-empty--intro p { margin-inline: 0; max-width: 60ch; }
.icnc-lede { text-wrap: pretty; }

.icnc-points {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  display: grid; gap: 0.6875rem; max-width: 60ch;
}
.icnc-points li {
  position: relative; padding-left: 1.375rem;
  font-size: 0.9375rem; line-height: 1.55; text-wrap: pretty;
}
/* A drawn marker rather than a list bullet: it sits on the cap height of the
   first line instead of the glyph baseline, so it lines up with the bold label
   it belongs to. */
.icnc-points li::before {
  content: ""; position: absolute; left: 0.25rem; top: 0.6em;
  width: 0.375rem; height: 0.375rem; border-radius: 50%;
  background: var(--navy-600);
}
.icnc-points b { color: var(--ink); font-weight: 700; }

/* Outranks `.icnc-empty p`'s margins on specificity; both empty states
   use the same label treatment. */
.icnc-empty .icnc-try {
  font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted-600); margin-bottom: 0.75rem; margin-top: 1.75rem;
}
.icnc-empty--intro .icnc-try { margin-top: 0; margin-bottom: 0.5rem; }
.icnc-examples--intro { justify-content: flex-start; }
a.icnc-example { text-decoration: none; }
/* The chips are an alternative way in, so the sign-in line needs air above it
   rather than sitting on them as if it were their caption. */
.icnc-empty--intro .icnc-empty-cta { margin-top: 1.75rem; }

.icnc-skeleton { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.875rem 1rem; }
.icnc-skeleton + .icnc-skeleton { margin-top: 0.625rem; }
.icnc-sk-line { height: 0.625rem; border-radius: 3px; background: var(--paper-200); margin-bottom: 0.5rem; animation: icnc-pulse 1.2s ease-in-out infinite; }
.icnc-sk-line:last-child { margin-bottom: 0; }
@keyframes icnc-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.45 } }

@media (prefers-reduced-motion: reduce) {
  .icnc *, .icnc *::before, .icnc *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

.icnc-note { padding: 1.5rem; text-align: center; font-size: 0.875rem; color: var(--muted-600); }
.icnc-privacy {
  max-width: 1600px; margin-left: auto; margin-right: auto;
  padding-left: 1rem; padding-right: 1rem;
  font-size: 0.6875rem; color: var(--muted); margin-bottom: 0.25rem;
}
.icnc-privacy a { color: var(--muted-600); }
@media (min-width: 640px) { .icnc-privacy { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .icnc-privacy { padding-left: 2rem; padding-right: 2rem; } }

.icnc-hint {
  padding-bottom: 1.25rem;
  font-size: 0.75rem; color: var(--muted);
}
.icnc-split[data-state="idle"] ~ .icnc-privacy,
.icnc-split[data-state="idle"] ~ .icnc-hint { text-align: center; }
.icnc-hint kbd {
  font: inherit; font-size: 0.6875rem; padding: 0.0625rem 0.3125rem;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px;
  background: #fff; color: var(--ink-700);
}

/* ---------- responsive -------------------------------------------------- */

/* Narrow cards cannot afford a rail; metadata goes back inline under the text. */
@media (max-width: 900px) {
  .icnc-hit { grid-template-columns: 1fr; }
  .icnc-hit-meta {
    flex-direction: row; flex-wrap: wrap; align-items: center;
    justify-content: flex-start; grid-row: auto;
  }
}

/* The keyboard hint is for keyboards. */
@media (hover: none), (max-width: 767px) {
  .icnc-hint { display: none; }
}

/* Touch targets. 28px chips and 38px tabs are below the 44px that fingers
   actually hit reliably; padding grows only where there is no hover. */
@media (hover: none) {
  .icnc-chip { padding: 0.75rem 0.875rem; }   /* 36px was still short of 44 */
  .icnc-tab { padding: 0.75rem 0.875rem; }
  .icnc-back { padding: 0.75rem 0.5rem; }
  .icnc-example { padding: 0.625rem 0.875rem; }
}

@media (max-width: 767px) {
  /* The toolbar was 290px on a 844px screen -- a third of the viewport before
     a single result. Trim the chrome that is not doing work at this size. */
  /* Vertical only -- the horizontal padding is the shared container's, and
     overriding it here would step the toolbar out of line with the header. */
  .icnc-bar-inner { padding-top: 0.625rem; padding-bottom: 0.625rem; gap: 0.5rem; }
  .icnc-brand span { display: none; }          /* the expansion of "ICNC" */
  .icnc-brand b { font-size: 0.9375rem; }
  .icnc-filters { padding-bottom: 0.5rem; gap: 0.5rem; }
  .icnc-legend { padding-bottom: 0.625rem; }
  .icnc-split { padding-top: 0.875rem; padding-bottom: 0.875rem; }
  .icnc-hit { padding: 0.75rem 0.875rem; }

  /* Filters scroll sideways instead of stacking into rows that push the
     results off screen. */
  .icnc-filters #icnc-chips {
    display: flex; gap: 0.375rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; max-width: 100%;
  }
  .icnc-filters #icnc-chips::-webkit-scrollbar { display: none; }
  .icnc-chip { flex: 0 0 auto; }
}

/* Desktop discovers the preview because the pane is always on the right;
   a phone card must say so itself. Hidden at desktop widths. */
.icnc-hit-open { display: none; }

@media (max-width: 1023px) {
  .icnc { --header-h: 118px; }
  .icnc-hit-open {
    display: inline-block; margin-top: 0.5rem;
    font-size: 0.8125rem; font-weight: 600; color: var(--navy-700);
  }
  .icnc-split { grid-template-columns: 1fr; }
  .icnc-bar-inner { flex-wrap: wrap; }
  .icnc-brand { width: 100%; }

  /* On one column the preview expands under the result you tapped instead of
     covering the list. A sheet hid the ranking and the neighbouring cases --
     the two things that tell you whether this is the judgment you want -- and
     every comparison cost a dismiss and a re-tap. Expanded in place, the next
     result is a scroll away and the list keeps its position. */
  /* The whole screen, not a 58vh dock. The dock split the viewport with the
     list and left the judgment a strip too short to read — reported from a
     real phone. Reading a scan needs every pixel, so the open reader is a
     full-viewport sheet over everything (including the site header) and the
     back button is the way home. */
  .icnc-reader {
    /* top: 0 as an explicit value, or the desktop rule's top wins the
       over-constrained tie. */
    position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 70;
    height: 100vh; height: 100dvh; margin: 0;
    border: 0; border-radius: 0;
    box-shadow: none;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .icnc-reader[hidden] { display: none; }
  .icnc-reader-head { padding: 0 0.875rem; cursor: pointer; }

  /* The dock is detached from the card that opened it -- the user may have
     scrolled that card away entirely -- so unlike the inline version it must
     say which judgment it is showing. One clamped line. */
  .icnc-reader-title {
    display: block; font-size: 0.9375rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .icnc-reader-sub > span { display: none; }
  .icnc-reader-sub { margin-top: 0.25rem; }

  /* The open card is marked, not merged: with the reader docked at the bottom
     there is no shared edge to join, so the card keeps its shape and gets a
     ring instead. */
  .icnc-hit[aria-selected="true"] {
    border-color: var(--navy-600);
    box-shadow: 0 0 0 1px var(--navy-600);
  }

  /* Full screen means nothing behind the reader needs padding, and the list
     keeps its scroll position for the return trip. */

  /* One scroller, not two. The panel fills the dock (flex:1 from the base
     rule) and scrolls; the PDF pages flow inside it at natural height. The
     nested pane-inside-pane scrolling was the mechanism of the original bug:
     two scrollables hand off to each other and then to the page. contain
     stops the final handoff at the dock's edge. */
  .icnc-panel {
    max-height: none; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* A full-width bar, not a link: it is the visible half of "tap the preview to
     put it away", and it has to look like something you can hit. */
  .icnc-back {
    display: block; width: 100%; text-align: left;
    font: inherit; font-size: 0.8125rem; font-weight: 600;
    background: none; border: 0; border-bottom: 1px solid var(--line);
    color: var(--navy-700); cursor: pointer;
    padding: 0.75rem 0; margin: 0 0 0.625rem;
  }
  .icnc-back:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
}
@media (min-width: 1024px) { .icnc-back { display: none; } }

/* ---------- the judgment on a phone, drawn rather than framed ------------- */
/* Not a scroller. It used to cap itself at 62vh and scroll internally, which
   put a scrollable inside the scrollable panel inside the scrollable page --
   and the handoffs between the three are how the viewer slid off screen while
   the user was reading. The reader is a fixed dock now and .icnc-panel is the
   one scroller inside it; pages flow here at natural height. */
.icnc-pdfdoc {
  background: var(--paper-200); border-radius: var(--radius);
}
.icnc-pdfslot {
  display: block; width: 100%; background: #fff;
  border-bottom: 1px solid var(--line);
  /* Only until the canvas lands -- once a page is drawn its own height governs,
     and a stale aspect-ratio would letterbox a page that is not A4. */
}
.icnc-pdfslot:has(canvas) { aspect-ratio: auto !important; }
.icnc-pdfpage { display: block; width: 100%; height: auto; }

/* ---------- the search field ---------------------------------------------
   A textarea rather than an input, so the placeholder can wrap. The example
   question is the clearest statement of what this tool takes, and on a phone a
   one-line field cut it off mid-sentence. */
.icnc-field { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.icnc-field .icnc-input {
  width: 100%; resize: none; line-height: 1.4; overflow-y: auto;
  font-family: inherit;
  /* Room for the magnifier on the left and the balance on the right. */
  padding-left: 2.5rem;
  padding-right: 4.25rem;
}

/* A leading magnifier so the field unmistakably reads as a search box rather
   than a chat composer -- readers were confusing it for one and typing it a
   message. Anchored to the first text line (not vertically centred) so it holds
   whether the field is one line on desktop or the taller wrapped field on a
   phone. */
.icnc-field::before {
  content: ""; position: absolute; left: 0.85rem; top: 0.8rem; z-index: 2;
  width: 1rem; height: 1rem; pointer-events: none; opacity: 0.75;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%238b8378'%20stroke-width='1.6'%20stroke-linecap='round'%3E%3Ccircle%20cx='6.75'%20cy='6.75'%20r='4.25'/%3E%3Cpath%20d='M10%2010l4%204'/%3E%3C/svg%3E");
}

/* The balance, overlaid on the field rather than taking width beside it. The
   bar has no width to spare at a phone size, and the number belongs to the box
   it is spent from. */
.icnc-credits {
  position: absolute; z-index: 2;
  right: 0.75rem; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: 0.75rem; color: var(--muted-600);
  /* Taps fall through to the field: a badge that swallowed them would put the
     caret nowhere on the one control the page exists for. */
  pointer-events: none;
}
.icnc-credits b {
  color: var(--ink-800); font-weight: 600;
  font-variant-numeric: tabular-nums;   /* the number changes on every search */
}

@media (max-width: 640px) {
  /* Field over the full width with the button beneath it, rather than the two
     side by side: side by side, a three-line placeholder had about 60% of a
     390px screen to render in and still truncated. */
  .icnc-search { flex-direction: column; align-items: stretch; }
  .icnc-field .icnc-input { min-height: 5.25rem; }
  /* Bottom right on a tall field -- vertically centred, it floats in the middle
     of the placeholder text it is not part of. */
  .icnc-credits { top: auto; bottom: 0.5rem; transform: none; }
}

/* ---------- paging -------------------------------------------------------- */
/* The sentinel is invisible while it works; it only becomes something to read
   when the list has genuinely ended. */
.icnc-more { min-height: 2rem; max-width: var(--card-w); }
.icnc-endmark {
  padding: 1rem 0 0.5rem; text-align: center;
  font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted-600);
}

/* ---------- reasoning axes ------------------------------------------------ */
/* Why the row is here, named. One badge per card; "emerging" is the loud one
   because it is the only axis the rest of the card does not already imply. */
.icnc-axis {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.125rem 0.5rem; border-radius: 999px;
  background: var(--navy-50); color: var(--navy-700);
  border: 1px solid var(--navy-100);
}
.icnc-axis-emerging { background: var(--pos-bg); color: var(--pos-fg); border-color: transparent; }

/* Axis filters look like what they are: the same chip control, tinted to say
   "kind of answer" rather than "treatment". */
.icnc-chip-axis { border-style: dashed; color: var(--navy-700); }
.icnc-chip-axis[aria-pressed="true"] {
  background: var(--navy-700); color: #fff; border-color: var(--navy-700); border-style: solid;
}

/* ---------- case description --------------------------------------------- */
/* The reporter's subject line: statute, topic, issue. It answers "what is
   this case", so it leads and reads as body text; the matched passage keeps
   its slot below as the quote it is. */
.icnc-hit-desc {
  margin: 0.5rem 0 0; font-size: 0.8125rem; line-height: 1.55;
  color: var(--ink-700); max-width: 52ch;
}
/* When a description is present the snippet is demoted to evidence: smaller,
   quieter, visibly a quotation from the judgment rather than about it. */
.icnc-hit-snip--quote {
  font-size: 0.75rem; font-style: italic;
  border-left: 2px solid var(--line); padding-left: 0.625rem;
  /* Three full sentences now -- the span is quotable context, not a teaser.
     Clamped at six lines against pathological sentence lengths. */
  -webkit-line-clamp: 6;
}

/* The S.C.R. parallel citation: visible but quiet — the neutral cite leads. */
.icnc-scr { font-size: 0.75rem; color: var(--muted-600);
  font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The statute-and-section lead is what a lawyer's eye scans for. */
.icnc-hit-desc-lead { color: var(--ink); font-weight: 600; }
.icnc-reader-desc {
  margin: 0.375rem 0 0; font-size: 0.8125rem; line-height: 1.55;
  color: var(--ink-700);
  /* Three lines, then the record. Unclamped, a long reporter subject pushed
     the judgment below half the phone screen — the full text lives one tap
     away on the case page. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- the quotable passage ------------------------------------------ */
.icnc-quote { padding: 1rem 1.25rem; }
.icnc-quote-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.icnc-quote-text {
  margin: 0; padding: 0.25rem 0 0.25rem 0.875rem;
  border-left: 3px solid var(--navy-100);
  font-size: 0.875rem; line-height: 1.7; color: var(--ink-800);
  max-width: 62ch;
}

/* Pinpoints as controls: a page chip turns the record pane, never a new tab. */
button.icnc-para--go { cursor: pointer; border: 1px solid #e3dfd9;
  background: transparent; font: inherit; }
button.icnc-para--go:hover { text-decoration: underline; color: #1b2a4a; }

/* The ratio on the card: collapsed by default, holdings verbatim. */
.icnc-held { margin-top: .4rem; }
.icnc-held-toggle { cursor: pointer; border: 0; background: transparent;
  font: inherit; font-size: .8rem; font-weight: 600; color: #1b2a4a; padding: 0; }
.icnc-held-toggle:hover { text-decoration: underline; }
.icnc-held-body { margin-top: .35rem; }
.icnc-held-block { margin: 0 0 .5rem; font-size: .85rem; }


/* "p. 12 / 90" -- the reader's bearing inside a volume scan. A zero-height
   sticky holder at the pane top carries the chip absolutely at top-right:
   no layout space taken, nothing shifted, ever. */
.icnc-pagepos-hold { position: sticky; top: 0; height: 0; z-index: 3; }
.icnc-pagepos {
  position: absolute; top: 0.75rem; right: 0.75rem; pointer-events: none;
  font-size: 0.75rem; font-variant-numeric: tabular-nums;
  color: #3d3a35; background: rgba(255,255,255,0.92);
  border: 1px solid #e3dfd9; border-radius: 999px;
  padding: 0.2rem 0.65rem; box-shadow: 0 1px 4px rgba(27,42,74,0.08);
}

/* Source labels inside Held: the Court's voice vs the reporter's. */
.icnc-held-src {
  margin: 0.6rem 0 0.25rem; font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: #7d7870;
}
.icnc-held-src:first-child { margin-top: 0.25rem; }

/* The reader's subject line earns its place only on the phone dock, where
   the card's truncated subject has no hover to reveal the full text. On
   desktop the card sits beside the pane and the line is pure duplication. */
@media (min-width: 1024px) { #icnc-reader-desc { display: none; } }

/* Share leads the header actions: the forwardable link is the growth loop. */
.icnc-share { background: var(--navy-700, #1b2a4a); color: #fff;
  border-color: var(--navy-700, #1b2a4a); }
.icnc-share:hover { opacity: 0.92; }

/* Citing-case titles as links: quiet until hovered, like the rest. */
a.icnc-cited-title { color: inherit; text-decoration: none; }
a.icnc-cited-title:hover { color: #1b2a4a; text-decoration: underline; }

/* The quote, visible on the record: soft marker over the rendered page. */
.icnc-hl { position: absolute; background: rgba(255, 213, 79, 0.42);
  mix-blend-mode: multiply; border-radius: 2px; pointer-events: none; }

/* The activity bubble on the signed-out landing: bottom-left, quiet, and a
   real event every time. Bottom-left so it never fights the FAB. */
.icnc-pulse {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 24;
  max-width: 24rem; display: flex; align-items: flex-start; gap: 0.375rem;
  background: #fff; border: 1px solid var(--line);
  border-left: 4px solid var(--navy); border-radius: 12px;
  box-shadow: 0 16px 48px rgba(27, 42, 74, 0.28);
  padding: 0.875rem 1rem;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.4s, transform 0.4s;
}
.icnc-pulse.is-in { opacity: 1; transform: none; }
.icnc-pulse-a { font-size: 0.8125rem; line-height: 1.5; color: var(--ink-700);
  text-decoration: none; display: grid; gap: 0.125rem; }
.icnc-pulse-lead { font-size: 0.6875rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted-600); }
.icnc-pulse-a b { color: var(--navy); font-family: "Source Serif 4", Georgia, serif;
  font-size: 1rem; line-height: 1.35; }
.icnc-pulse-a:hover b { text-decoration: underline; }
.icnc-pulse-when { color: var(--muted-600); font-size: 0.75rem;
  font-variant-numeric: tabular-nums; }
.icnc-pulse-x { font: inherit; border: 0; background: none; cursor: pointer;
  color: var(--muted-600); padding: 0 0.25rem; line-height: 1; font-size: 1rem; }
@media (max-width: 640px) { .icnc-pulse { right: 1rem; max-width: none; } }
@media (prefers-reduced-motion: reduce) {
  .icnc-pulse { transition: none; transform: none; }
}
/* Desktop: the card belongs to the demo, so it sits on the right rather than
   bottom-left. Its right edge tracks the content container's right edge (max
   1600px wide, 2rem gutter) -- the same edge the video's right side sits on --
   so the two line up instead of the card floating off in the far corner. */
@media (min-width: 1024px) {
  .icnc-pulse { left: auto; right: max(2rem, calc((100vw - 1600px) / 2 + 2rem)); }
}

/* The reading strip leads the evidence band; chips align with the band. */
.icnc-reading { margin-bottom: 0.75rem; }
.icnc-examples--reading { justify-content: flex-start; }
a.icnc-reading-chip { text-decoration: none; }

/* On a phone the capture is the pitch, so it comes second and the door comes
   third — in source order it sat two screens down and was never seen. Flex
   with explicit order below the desktop grid breakpoint; the desktop grid
   places children explicitly and ignores source order anyway. */
@media (max-width: 1023px) {
  .icnc-empty--intro { display: flex; flex-direction: column; }
  .icnc-empty--intro > h2               { order: 1; }
  .icnc-empty--intro > .icnc-lede       { order: 2; }
  .icnc-empty--intro > .icnc-shots      { order: 3; margin-top: 1rem; }
  /* Inside the band, the capture leads on a phone; the reading strip
     follows it rather than pushing it toward the fold. */
  .icnc-shots { display: flex; flex-direction: column; }
  .icnc-shots > .icnc-reading { order: 2; margin: 0.875rem 0 0; }
  .icnc-empty--intro > .icnc-empty-cta  { order: 4; margin-top: 1.25rem; }
  .icnc-empty--intro > .icnc-points     { order: 5; margin-top: 1.75rem; }
  .icnc-empty--intro > .icnc-try        { order: 6; }
  .icnc-empty--intro > .icnc-examples   { order: 7; }
}

/* "Nothing on point" — shown above weak-topline results so nearest-neighbour
   cases cannot be mistaken for an answer the Court never gave. */
.icnc-note--nopoint {
  text-align: left; background: #fdf6e7; border: 1px solid #ecd9a8;
  border-radius: 10px; color: #6a5a1e; padding: 0.75rem 1rem;
  margin-bottom: 0.75rem; font-size: 0.8125rem; line-height: 1.55;
}

/* --- the court selector (KHC dark launch, web/khc_search.py) ---------------
   A segmented control under the search bar, rendered only where a second
   court exists to choose. The Supreme Court stays selected by default, so
   every reader who has always searched the SC keeps doing exactly that
   without touching it. "Both" is a real answer to a real question -- a
   Karnataka litigator wants the High Court's own view AND what binds it. */
.icnc-courts {
  display: flex; align-items: center; gap: 0.375rem;
  margin: 0.625rem 0 0; flex-wrap: wrap;
}
.icnc-court {
  font: inherit; font-size: 0.8125rem; color: var(--ink-700);
  background: var(--paper-100); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.25rem 0.75rem; cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.icnc-court:hover { border-color: var(--navy-700); color: var(--navy-900); }
.icnc-court.is-on {
  background: var(--navy-900); border-color: var(--navy-900); color: #fff;
}
.icnc-court-beta {
  font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 700; color: #9a5b08; background: #f6ebd6;
  border-radius: 6px; padding: 0.1rem 0.4rem;
}
/* The court a result comes from, on the card. Only ever rendered for results
   that are NOT the Supreme Court: in a corpus that is overwhelmingly SC, a
   badge on every SC card is noise, while its absence reads correctly as
   "the Supreme Court, as always". */
.icnc-court-tag {
  font-size: 0.625rem; letter-spacing: 0.04em; text-transform: uppercase;
  font-weight: 700; color: #2f5d3a; background: #e8efe9;
  border: 1px solid #d3e2d6; border-radius: 6px; padding: 0.05rem 0.4rem;
  white-space: nowrap;
}
/* Judgments folded into a card because they answer with the same passage
   (web/khc_search.py). Muted: it is context, not a claim about authority. */
.icnc-similar {
  font-size: 0.6875rem; color: var(--muted-600);
  border: 1px dashed var(--line); border-radius: 6px; padding: 0.05rem 0.4rem;
  white-space: nowrap; cursor: help;
}