/* ==========================================================================
   GST by TaxByKK — design system
   Brand tokens (--brand-*, --ink, --muted, --line) are taken from
   ai.taxbykk.com so the two products read as siblings. The violet is from
   the approved homepage mockup. Gradient is punctuation, never decoration.
   ========================================================================== */

/* The browser's own [hidden] rule is display:none at user-agent level, which
   any author `display` declaration silently beats — .person { display: flex }
   left every filtered card on screen while the counter read "0 results".
   Author-level and !important so el.hidden works wherever it is used. */
[hidden] { display: none !important; }

:root {
  /* brand */
  --brand-blue:       #075dff;
  --brand-blue-deep:  #003fea;
  --brand-blue-light: #259ff8;
  --brand-violet:     #8053cb;
  --brand-gradient:   linear-gradient(100deg, var(--brand-blue-light), var(--brand-violet));

  /* surface + text */
  --page:    #fbfdff;
  --surface: #ffffff;
  --tint:    #eef0fb;
  --ink:     #071631;
  --ink-2:   #1e2b47;
  /* Body prose that must read as prose, not as metadata: one step lighter
     than --ink-2, well clear of --muted. Used by the member roster. */
  --ink-3:   #3d4a63;
  --muted:   #52627b;
  --line:    #d8e3f3;
  --line-2:  #eaf0fa;

  /* category accents — never the only signal, always paired with a word */
  --c-judgment:      #075dff;
  --c-notification:  #b4530b;
  --c-article:       #6d3bbf;
  --c-rules:         #0f766e;
  --c-video:         #a3175f;
  --c-record:        #475569;

  /* type */
  --serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* scale */
  --step--1: 0.8125rem;
  --step-0:  0.9375rem;
  --step-1:  1.0625rem;
  --step-2:  clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --step-3:  clamp(1.6rem, 1.35rem + 1.1vw, 2.1rem);
  --step-4:  clamp(2.1rem, 1.6rem + 2.2vw, 3.1rem);

  --wrap: 1240px;
  --radius: 14px;
  --radius-sm: 8px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* The header is sticky, so anything jumped to by #id would land underneath it. */
/* An anchor has to clear the sticky header, and the header is not one height:
   122px at desktop, 128px on a phone, 132px at tablet, because the search row
   wraps differently. It was 96px, so every jump on the site — the bench nav,
   the judgment and network counts on the home cards, the glossary — put its
   heading up to 36px UNDERNEATH the header, where the search box covered it.
   One number, set to clear the tallest with room to breathe. */
:root { --sticky-h: 132px; }
:target, [id] { scroll-margin-top: calc(var(--sticky-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
  border-radius: 3px;
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
@media (max-width: 640px) { .wrap { padding-inline: 16px; } }

/* Visually hidden but available to assistive technology. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface); padding: 12px 20px; border-radius: 0 0 var(--radius-sm) 0;
  box-shadow: 0 2px 12px rgba(7,22,49,.18);
}
.skip-link:focus { left: 0; }

/* Inline icons inherit type size and colour; never a bare oversized SVG. */
.ico {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  vertical-align: -0.125em;
}
.section-more .ico { width: .9em; height: .9em; }

/* ------------------------------------------------------------------ header */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
/* The Connector banner under the main menu, on every page.

   Outside .site-header rather than in it. The header is sticky at 68px, and
   a band stuck under it would freeze 112px of chrome - a third of a 375px
   phone - for one line that is worth reading once. So it scrolls away with
   the page.

   Full-bleed tint with the row held to .wrap, so the band spans the window
   while its contents line up with the header above and the page below. */
.tx-bar { background: var(--tint); border-bottom: 1px solid var(--line); }
.tx-bar-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding-block: 8px;
}
.tx-bar > .wrap > .ico { font-size: 1.05rem; color: var(--brand-blue); }
.tx-bar-t {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-size: .88rem; line-height: 1.4; color: var(--ink-2);
}
.tx-bar-cta { flex: none; }

/* Narrow: the sentence keeps the icon company and the button drops to its
   own full-width line, rather than the sentence being squeezed to two words
   a line beside a button that will not shrink (white-space: nowrap). */
@media (max-width: 640px) {
  .tx-bar-row { flex-wrap: wrap; row-gap: 10px; padding-block: 10px; }
  /* basis 0 rather than auto: at auto the sentence measures its own content,
     cannot fit beside the icon and wraps to the next line, leaving the icon
     stranded alone on the first. At 0 it shrinks to whatever is left. */
  .tx-bar-t { flex: 1 1 0; }
  .tx-bar-cta { flex: 1 0 100%; display: flex; justify-content: center; }
}

@media print { .tx-bar { display: none; } }

.header-row {
  display: flex; align-items: center; gap: 28px;
  min-height: 68px; padding-block: 10px;
  min-width: 0;
}
.header-row > * { min-width: 0; }
.header-row > .nav-toggle { flex: none; }

/* The mark, then the two lines of type beside it. .brand was the column; it is
   now the row, and .brand-text is the column inside it. */
.brand { display: flex; flex-direction: row; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* Sized by height so it matches the two lines of type, whatever the file is.
   The width comes from the intrinsic ratio, so a redrawn mark of another shape
   needs no CSS change. */
.brand-logo { height: 40px; width: auto; display: block; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
/* The site name on top and the parent brand beneath - the reverse of what this
   was until 18 September, when the big word was TaxByKK and the small one a
   category label. GSTAT is what this subdomain is; TaxByKK is who publishes it.

   The tracking is no longer negative: -0.02em was drawn for a mixed-case
   wordmark and closes an all-caps acronym up until the letters touch. */
.wordmark {
  font-family: var(--sans);
  font-size: 1.45rem; font-weight: 800; letter-spacing: .005em;
  color: var(--ink); line-height: 1.05;
}
/* The only place the brand gradient is allowed to carry type. It moved from the
   big word to the small one along with the names: GSTAT is set in plain ink, so
   without this the header would carry no brand colour at all. Scoped to .brand
   rather than .wordmark so it works on whichever line holds the name. */
.brand .grad {
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
@supports not (background-clip: text) { .brand .grad { color: var(--brand-blue); } }
/* Words now, not a label. The uppercase and the .17em tracking that suited
   "LITIGATION NETWORK" make "by TaxByKK" unreadable as somebody's name. */
.brand-sub {
  font-size: .72rem; letter-spacing: 0; text-transform: none;
  color: var(--muted); font-weight: 600;
}
.brand-sub .grad { font-weight: 800; }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 26px; list-style: none; }
.site-nav a {
  display: block; padding: 6px 0; font-size: .875rem; font-weight: 500;
  color: var(--ink-2); position: relative;
}
.site-nav a:hover { color: var(--brand-blue); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--brand-blue); font-weight: 600; }
.site-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 2px;
  background: var(--brand-gradient); border-radius: 2px;
}

/* The search box shares the header row with the brand and the nav, and drops
   to a row of its own at narrow widths. */
.header-row > .search { flex: 0 1 300px; }

/* Inline search: a real input, results anchored beneath it. No modal — a control
   that looks like a text field must let you type in it. */
.search { position: relative; display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 10px 7px 12px; min-width: 280px; }
.search:focus-within { border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(7,93,255,.12); }
.search .ico { width: 15px; height: 15px; stroke: var(--muted); }
.search input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent;
  font: inherit; font-size: .84rem; color: var(--ink); padding: 0;
  /* The pill is 36px but only the input takes the tap; give it its own 24px. */
  min-height: 24px;
}
/* The wrapper carried a 3px rgba(...,.12) glow and the input suppressed its
   own outline, which left the one control people use most with the faintest
   focus state on the site. It now takes the same 2px marker as everything
   else, drawn on the wrapper so it frames the whole field. */
.search input:focus { outline: none; }
.search:focus-within {
  outline: 2px solid var(--brand-blue); outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(7,93,255,.16);
}
.search input::placeholder { color: var(--muted); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search .kbd {
  font-size: .68rem; border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 6px; color: var(--muted); background: var(--page); font-family: inherit;
}
.search:focus-within .kbd { display: none; }

.search-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: min(460px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 18px 48px rgba(7,22,49,.18);
  max-height: min(62vh, 460px); overflow-y: auto; overscroll-behavior: contain;
}

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: .85rem; font-weight: 600;
  padding: 9px 17px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.btn-primary { background: var(--brand-gradient); color: #fff; }
.btn-primary:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(7,93,255,.26); }


.btn-quiet { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
.btn-quiet:hover { text-decoration: none; border-color: var(--brand-blue); color: var(--brand-blue); }

.nav-toggle { display: none; }

@media (max-width: 1400px) {
  .search .kbd { display: none; }
  .site-nav ul { gap: 18px; }
}

/* Below this the nav and the search field collide, so the search takes its own
   full-width row rather than being squeezed or reduced to a bare icon. */
/* Below this the nav and search collide on one line. Switch to an explicit
   two-row grid: wrapping flex with auto margins is not deterministic here. */
/* Raised from 1100px on 26 September 2026, when the bar went from five
   items to six and three of them grew a word: Home, GSTAT Benches, GSTAT
   Judgments, Court Judgments, Network, GSTAT Procedure. They need about
   700px between them, and with the brand and the search field on the same
   row the collision now starts around 1240. */
@media (max-width: 1360px) {
  .header-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand nav nav" "search search search";
    align-items: center; gap: 10px 20px; padding-bottom: 12px;
  }
  .brand          { grid-area: brand; }
  .site-nav       { grid-area: nav; margin-left: 0; justify-self: end; }
  .search         { grid-area: search; min-width: 0; padding-block: 10px; }
  .search-panel   { width: 100%; left: 0; right: auto; }
}
@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); cursor: pointer; margin-left: auto;
  }
  /* The drawer is its own full-width grid row, not an absolutely positioned
     overlay. Absolute positioning resolved against the nav's grid area (131px
     wide), and a hard-coded top offset broke once the header grew to two rows.
     A real row is deterministic: closed, it collapses to nothing. */
  .header-row {
    grid-template-areas: "brand nav nav" "search search search" "drawer drawer drawer";
  }
  .site-nav {
    grid-area: drawer; position: static; margin: 0;
    justify-self: stretch;
    border-top: 1px solid var(--line-2);
    padding: 4px 0 8px; display: none;
  }
  .site-nav[data-open="true"] { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { padding: 13px 0; border-bottom: 1px solid var(--line-2); font-size: 1rem; }
  .site-nav a[aria-current="page"]::after { display: none; }
  .brand { max-width: 52vw; gap: 8px; }
  /* The header is tight here: the mark gives back six pixels of height so the
     two lines of type and the menu button still fit on one row. */
  .brand-logo { height: 34px; }
}

/* -------------------------------------------------------------- type bits */

.label {
  display: inline-block;
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-judgment);
}
.label--notification  { color: var(--c-notification); }
.label--article       { color: var(--c-article); }
.label--rules         { color: var(--c-rules); }
.label--record        { color: var(--c-record); }

.chip {
  display: inline-block;
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 5px;
  background: rgba(7,93,255,.08);
  /* --brand-blue on this tint reaches only 4.1:1 where the chip sits on the
     tinted network band. The deep token clears AA on every ground it is used. */
  color: var(--brand-blue-deep);
}

.meta { font-size: var(--step--1); color: var(--muted); }
.meta > * + *::before { content: "·"; margin: 0 8px; color: var(--line); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; color: var(--ink); }

/* Titles come from document filenames and can contain very long unbroken
   tokens. Without this a single token overflows the page on narrow screens. */
h1, h2, h3, h4, .rt, .row p, .factbox dd { overflow-wrap: anywhere; }

.section { padding-block: 56px; }
.section-head { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 26px; }
.section-head h2 { font-size: var(--step-3); }
.section-head p { color: var(--muted); margin-top: 5px; font-size: var(--step-0); }
.section-more { margin-left: auto; font-size: .85rem; font-weight: 600; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px; min-height: 24px; }

/* ---------------------------------------------------------------- hero */

.hero { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #f6f9ff, var(--page) 70%); }
.hero-inner {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px;
  align-items: center; padding-block: 56px 60px;
}
/* The heading takes the size the retired eyebrow rule used to have. That rule
   set a paragraph larger than the h1 below it, which is how the page ended up
   with its heading in the smaller type; there is one element now, so the
   question does not arise. No text-transform: the line is a sentence with full
   stops in it, and uppercase would give "FIND GSTAT JUDGMENTS." */
.hero h1 {
  /* Capped at 2.2rem, not the 2.6rem the eyebrow used. The copy column tops out
     at 541px once .wrap stops growing, and "Research Faster. Draft Better."
     measures 623px at 2.6rem - so the heading broke as "Research Faster. Draft"
     / "Better.", splitting the phrase and leaving one word on a line of its own. */
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.2rem);
  line-height: 1.12; margin-bottom: 16px; font-weight: 700;
  /* And for the widths in between, where it still has to wrap: break the two
     lines evenly rather than filling the first and orphaning a word. Ignored by
     browsers that do not have it, which simply wrap as before. */
  text-wrap: balance;
}
/* Block, so the second sentence starts its own line without a <br>; the serif
   and the weight come from the h1 it sits inside. */
.hero-lead { display: block; color: var(--brand-blue); }
.hero-sub {
  font-size: var(--step-1); color: var(--muted); line-height: 1.55;
  max-width: 34ch; margin-bottom: 28px;
}
/* Two ways in, weighted. Judgments are what the heading promises and what most
   readers arrive for, so that is the button; the bench finder was the single
   primary CTA until 18 September and stays beside it as a plain link. */
.hero-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 4px; }
.hero-cta-alt {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .9rem; font-weight: 600; color: var(--brand-blue);
}
.hero-cta-alt:hover { text-decoration: underline; }

/* The poster sits in a navy and gold frame, the same as the Pricing page and the offer strip (owner, 22 Oct 2026),
   so its cream and brown no longer fight the blue-white page. */
.hero-figure { padding: 14px; border-radius: 22px; background: linear-gradient(135deg, #0a1430, #142a63);
  box-shadow: 0 0 0 1px rgba(217, 180, 91, .6), 0 24px 40px -28px rgba(10, 20, 48, .8); }
.hero-figure img { height: auto; display: block; border-radius: 12px; }
.hero-figure .fig-note { right: 24px; bottom: 24px; }

/* The first section sits directly under the hero, so it needs less top space. */


@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 28px; padding-block: 34px 36px; }
  /* Text leads on mobile; a hero should open with the words. */
  .hero-copy { order: 1; }
  .hero-figure { order: 2; padding: 10px; border-radius: 18px; }
  .hero-sub { max-width: none; }

}

/* ---------------------------------------------------------------- lead */

.lead { display: grid; grid-template-columns: 1.55fr 1fr; gap: 48px; padding-block: 44px 8px; }
/* With a hero image the lead becomes text | image | side rail. */
.lead:has(.lead-figure) { grid-template-columns: 1fr 1fr; }
.lead:has(.lead-figure) .lead-side { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); padding: 26px 0 0; }
.lead:has(.lead-figure) .lead-side ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lead:has(.lead-figure) .lead-side li + li { border-top: 0; margin-top: 0; padding-top: 0; border-left: 1px solid var(--line-2); padding-left: 24px; }
.lead-main h3 { font-size: var(--step-3); margin: 12px 0 14px; line-height: 1.12; }
.lead-main h3 a { color: inherit; }
.lead-main h3 a:hover { color: var(--brand-blue); text-decoration: none; }
.lead-main .meta { margin: 18px 0 22px; }

.lead-side { border-left: 1px solid var(--line); padding-left: 28px; }
.lead-side ol { list-style: none; }
.lead-side li + li { border-top: 1px solid var(--line-2); margin-top: 16px; padding-top: 16px; }
.lead-side h3 { font-size: 1.02rem; line-height: 1.3; margin: 5px 0 6px; }
.lead-side a:hover h3 { color: var(--brand-blue); }
.lead-side a { color: inherit; }
.lead-side a:hover { text-decoration: none; }

@media (max-width: 900px) {
  .lead, .lead:has(.lead-figure) { grid-template-columns: 1fr; gap: 32px; }
  .lead-side { border-left: 0; border-top: 1px solid var(--line); padding: 26px 0 0; }
  .lead:has(.lead-figure) .lead-side ol { grid-template-columns: 1fr; gap: 0; }
  .lead:has(.lead-figure) .lead-side li + li {
    border-left: 0; padding-left: 0; border-top: 1px solid var(--line-2);
    margin-top: 16px; padding-top: 16px;
  }
}

/* --------------------------------------------------------------- figures */

.fig { margin: 0; position: relative; }
.fig img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius); background: var(--tint);
}
/* Respect the image's own proportions rather than cropping it to fill a tall
   column — the composition runs left to right and loses its subject if cropped. */

/* A synthetic image is always labelled, so it cannot read as documentary. */
.fig-note {
  position: absolute; right: 10px; bottom: 10px;
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: rgba(7,22,49,.62);
  padding: 3px 8px; border-radius: 4px; backdrop-filter: blur(3px);
}

@media (max-width: 900px) {
}

/* --------------------------------------------------------------- cards */


@media (max-width: 1000px) { }
@media (max-width: 700px)  { }
@media (max-width: 460px)  { }

/* category tiles */


/* bench cards — typographic, no photography (decision C1) */


/* --------------------------------------------------------------- feed */


@media (max-width: 700px) {


}

/* --------------------------------------------------------------- bands */


.stats { display: flex; gap: 40px; }
@media (max-width: 860px) { }

/* ----------------------------------------------------------------- ads */

.ad { margin-block: 40px; }
.ad-label {
  font-size: .62rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px; text-align: center;
}
/* Dimensions are reserved before load so no layout shift occurs. */
.ad-slot {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-sm);
  color: var(--muted); font-size: .78rem;
  min-height: 90px;
}
.ad-leaderboard .ad-slot { height: 90px; max-width: 728px; margin-inline: auto; }
.ad-rail .ad-slot { height: 250px; }
@media (max-width: 760px) { .ad-leaderboard .ad-slot { height: 100px; max-width: 320px; } }

/* Text is never dimmed with `opacity`. It multiplies the colour toward the
   background and silently drops contrast: .55 took a count to 4.0:1, .65 a
   label to 2.7:1, .72 a heading to 3.3:1, .75 an arrow to 3.4:1. Where text
   should read quieter, give it a colour that says so and still passes.
   build/audit.mjs fails the build if an opacity declaration reappears here. */

/* Share and print, written by script only where the browser can honour them. */
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.action-note { font-size: .82rem; color: var(--ink-3); }
/* A postal address is lines, not a paragraph. */
/* The office address, shown on a member page only with Approval 2 - dormant
   while nobody has it. */
.addr { font-style: normal; line-height: 1.45; }

/* The judgments table, grouped the way the Tribunal's own repository groups it.
   Column widths are set here rather than left to the browser: with ten equal
   auto columns every cell wrapped to three lines and the row stopped reading
   across. The subject and the case get the room; the date and the number never
   wrap at all. */
.jtable { width: 100%; border-collapse: collapse; font-size: .84rem; min-width: 980px; }
.jtable th, .jtable td { border: 1px solid var(--line); padding: 12px 14px; vertical-align: top; text-align: left; }
.jtable thead th { background: var(--tint); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.jtable tbody tr:nth-child(even) { background: #fbfcff; }
.t-no      { width: 46px; color: var(--muted); text-align: right; white-space: nowrap; }
.t-subject { width: 30%; }
.t-date    { width: 108px; white-space: nowrap; }
.t-bench   { width: 130px; }
.t-case    { width: 27%; }
.t-action  { width: 118px; white-space: nowrap; }
.t-subject a { font-weight: 600; line-height: 1.35; display: inline-block; }
.tchips { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 5px; }
.tchip {
  display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 4px;
  background: var(--tint); color: var(--brand-blue-deep);
}
.tprov  { margin-top: 6px; font-size: .74rem; color: var(--muted); }
.tparty { line-height: 1.4; }
.tappeal { margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; color: var(--ink-2); }
.tcoram { margin-top: 4px; font-size: .76rem; color: var(--muted); }
.t-action .btn { display: block; width: 100%; text-align: center; }
.t-action .btn + .btn { margin-top: 6px; }
.btn-sm { padding: 5px 9px; font-size: .76rem; min-height: 30px; }

/* A scrolling region that has become keyboard-focusable says so. */
[data-scroller][tabindex]:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
/* Close matches are a fallback, and are marked as one. */
.search-group--near h4 { color: var(--brand-violet); }
.search-group--near a .rt { font-weight: 400; }

/* -------------------------------------------------------------- footer */

.site-footer { background: linear-gradient(105deg, #0b1734, #2a1f5e); color: #c9d4ee; margin-top: 64px; }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; padding-block: 52px 40px; }
.footer-top h2 { color: #fff; font-size: 1.35rem; margin-bottom: 10px; }
.footer-top p { font-size: .875rem; max-width: 40ch; }
.footer-col h3 { font-family: var(--sans); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #8fa3cd; margin-bottom: 12px; }
.footer-col ul { list-style: none; display: grid; gap: 2px; }
.footer-col a { color: #c9d4ee; font-size: .875rem; display: inline-flex; align-items: center; min-height: 24px; }
.footer-col a:hover { color: #fff; }
/* The arrow warns the eye that the link leaves the site, the way the
   screen-reader note warns the ear. Quiet, and never bigger than the text. */
.ext-mark { font-size: .72em; margin-left: .3em; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.13); padding-block: 22px 34px; font-size: .78rem; color: #92a3c6; }
.footer-bottom p + p { margin-top: 8px; }
@media (max-width: 1080px) { .footer-top { grid-template-columns: 1fr 1fr 1fr; gap: 32px; } }
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }

/* Very small screens: the CTA keeps its meaning but loses the long label. */
@media (max-width: 480px) {
  .header-row { gap: 10px; }
  .wordmark { font-size: 1.15rem; }
}

/* ------------------------------------------------------- article pages */

.page-head { padding-block: 40px 8px; border-bottom: 1px solid var(--line); }
/* Section heads with an image: text beside it, same rhythm as the homepage lead. */
/* A companion to the heading, not the hero. The image column was half the width
   at 3:2, which made it 381px tall and pushed the first item of these pages
   most of a screen down; the homepage keeps the full-height treatment. */
/* 340px, matching the article rail, and 2:1 — the ratio the source images are
   now cropped to, so object-fit removes nothing the crop did not already
   decide. The old box was 2.86:1 against sources of 0.72 to 2.33. */
.page-head--figure {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px;
  /* Pinned to the top, not centred: a page whose standfirst runs past the
     reserve would otherwise slide the image down (districts sat 12px low). */
  align-items: start; padding-block: 24px 20px;
}
/* A call to action in a section head. Only /benches/ has one, so it is opt-in
   through sectionHead rather than part of the block: the reserve above it
   (.page-head--section h1 and .sub have min-heights, so every section page puts
   its first row at the same height) is measured on the title and standfirst,
   and a button that appeared on some pages and not others would break that
   alignment silently. Here it is deliberate and on one page. */
.page-head-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }

.head-figure { aspect-ratio: 2 / 1; width: 100%; }
.head-figure img { height: 100%; width: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .page-head--figure { grid-template-columns: 1fr; gap: 18px; padding-block: 22px 18px; }
  /* Same 2:1 stacked — one crop serves every width, so nothing is lost at any
     size and there is no second derivative to keep in step. */
  .head-figure { max-width: 420px; }
}
.page-head h1 { font-size: var(--step-4); margin: 10px 0 12px; max-width: 22ch; }
/* Every page in a nav section puts its strip, and its first row, in the same
   place: the head reserves two lines of title and two of standfirst whether or
   not this particular page's wording needs them. Line-height and reserve are
   declared together so they cannot drift apart. */
.page-head--section h1 { line-height: 1.25; min-height: 2.5em; }
.page-head--section .sub { line-height: 1.5; min-height: 3em; }
/* Stacked, the column is narrower and the longest standfirst takes three lines,
   so the reserve grows with it. Declared AFTER the base rule, not inside the
   earlier media block, where the later base rule silently won. The audit caps
   the wording at 130 characters to keep three lines enough. */
@media (max-width: 900px) {
  .page-head--section .sub { min-height: 4.5em; }
}
.page-head .sub { color: var(--muted); max-width: 60ch; }

.breadcrumb { font-size: .78rem; color: var(--muted); padding-top: 22px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; }
.breadcrumb li + li::before { content: "/"; margin-right: 7px; color: var(--line); }

.article { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; padding-block: 40px; align-items: start; }
.article-body { font-size: 1.02rem; line-height: 1.72; }
.article-body > * + * { margin-top: 20px; }
.article-body h2 { font-size: var(--step-2); margin-top: 34px; }
@media (max-width: 1060px) { .article { grid-template-columns: 1fr; gap: 36px; } }

.factbox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.factbox h3 { font-family: var(--sans); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.factbox dl { display: grid; grid-template-columns: 1fr; gap: 0; font-size: .88rem; }
.factbox dt {
  color: var(--muted); font-size: .7rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; margin-top: 14px;
}
.factbox dt:first-of-type { margin-top: 0; }
.factbox dd { font-weight: 600; margin: 3px 0 0; line-height: 1.4; }
.factbox dd a { overflow-wrap: anywhere; }

/* A small count beside a heading. Named for the provision lists it was written
   for; those are gone, but gstat-in-numbers and /data/ still use it. */
.prov-n { font-size: .72rem; font-weight: 500; color: var(--muted); letter-spacing: .04em; white-space: nowrap; }

.factnote {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2);
  font-size: .74rem; line-height: 1.5; color: var(--muted);
}
.factnote a { color: var(--brand-blue); }

.docbox { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; background: var(--surface); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.docbox .dn { font-weight: 600; font-size: .92rem; }
.docbox .dm { font-size: .78rem; color: var(--muted); }
.docbox .actions { margin-left: auto; display: flex; gap: 10px; }

/* --------------------------------------------------------------- lists */

/* Two rows by design, not by wrapping: five controls and four labelled actions
   need more than the 1192px a row has, and squeezing them would mean cramped
   padding or clipped option text. Row one narrows the set, row two acts on it
   and says what it holds. */
.filters { display: grid; gap: 12px; padding-block: 22px; border-bottom: 1px solid var(--line); }
.tb-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Secondary to the filters above them: same height, less padding, quieter. */


/* Undoing, not a tool: a text action beside the count rather than a fifth button. */
.clear-link {
  background: none; border: 0; padding: 4px 6px; font: inherit; font-size: .8rem;
  color: var(--brand-blue-deep); text-decoration: underline; cursor: pointer; min-height: 24px;
}
.clear-link:hover { color: var(--ink); }
/* Controls standing in one row are one size. They were styled as a pair —
   same padding, same border, same font — and rendered 40px and 36px, because
   an <input> takes the body's 1.55 line-height and a <select> uses the
   browser's `normal`. Nothing pinned either, so the pair matched by accident
   and didn't. --control-h pins both; build/audit.mjs checks they still share
   it. */
:root { --control-h: 40px; }
.filters select, .filters input {
  font: inherit; font-size: .85rem; line-height: 1.3; padding: 0 11px;
  height: var(--control-h);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
}
/* A search box does not need every pixel that happens to be spare. It ran to
   1114px on the district page — for typing "Agra" — because it was flex:1 with
   no ceiling, and it was a different width on all four pages that have one. */
/* The search is the flexible one: it takes the row's remainder, with a floor
   that keeps its placeholder readable (that text needs 182px). */
.filters input { flex: 1 1 200px; min-width: 200px; }
/* Sized to their own longest option, not to each other. Forcing them equal
   made the sort control — which holds "Newest first" — as wide as one holding
   "Department succeeded", wasting 107px, and that waste is what pushed the row
   over the width in the first place. */
.filters select { flex: 0 0 auto; min-width: 120px; }
/* Beside the controls it reports on, not pinned to the far edge of the page.
   margin-left:auto put it 650px from the input on /judgments/, 1000px on the
   district page, and hard against the container edge with no room after it. */
.filters .count { margin-left: 8px; font-size: .8rem; color: var(--muted); white-space: nowrap; }
/* Stacked, a 200px control in a 343px column leaves a ragged right edge, so
   each takes the full width. */
@media (max-width: 620px) {
  .filters input, .filters select { flex: 1 1 100%; max-width: none; }

}

.rows { list-style: none; }
.rows > li { border-bottom: 1px solid var(--line-2); }
.row { display: block; padding: 20px 0; color: inherit; }
.row:hover { text-decoration: none; }
.row:hover h3, .row:hover h4 { color: var(--brand-blue); }
.row h3, .row h4 { font-size: 1.15rem; line-height: 1.32; margin: 6px 0 8px; }
.row p { color: var(--muted); font-size: .9rem; max-width: 78ch; }
.row .meta { margin-top: 10px; }

/* Not a link, but not disabled either. It was dimmed to .72, which took its
   heading to 3.3:1 — below AA — to say something the absence of a hover state
   already says. */
.row--inert { color: var(--ink-3); }
.row--inert h3 { color: var(--muted); }

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

/* A holding is a sentence, not a name, so it needs a tighter measure and less
   display weight than a page title that is two or three words. */
.page-head h1 { text-wrap: balance; }
/* The longest holding runs to 197 characters. At full display size that is six
   lines of heading; stepped down it reads as the sentence it is. */
.page-head h1.h1-long { font-size: clamp(1.2rem, 0.9rem + 1.2vw, 1.85rem); line-height: 1.28; max-width: 30ch; }

.glossary dt { font-weight: 700; margin-top: 18px; scroll-margin-top: calc(var(--sticky-h) + 16px); }
.glossary dd { margin: 4px 0 0; max-width: 76ch; color: var(--ink); }
.gsee { color: var(--muted); font-size: .84rem; }

/* The digest jump index is longer than the month one; let it breathe. */

/* Ways in: the three things this site has that nothing else does, which were
   previously reachable only from the footer. */

@media (min-width: 760px) { }


/* The person's own page shows their photo, as the listing card does. */
.member-head { display: flex; gap: 18px; align-items: flex-start; }
.member-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  background: var(--tint); display: grid; place-items: center; font-weight: 700;
  color: var(--brand-violet); font-size: 1.5rem; }

@media (max-width: 900px) {
  /* In the drawer this CTA sits directly under the Network nav item, so it is
     two adjacent links to the same page. The nav item is the one that belongs. */
  /* .header-cta went with the button on 25 September 2026; the rule is kept
     because the narrow-screen block it sits in hides several header parts
     together and an empty selector here would read as an oversight. */
}

@media (max-width: 760px) {
  /* A 1,100px table does not become usable by being scrollable on a phone. The
     card list is the mobile view; the export stays, because a spreadsheet is
     just as useful downloaded from a phone. */
  [data-view-toggle] { display: none; }
}

/* The Tribunal's scale, in the hero, where the site previously led with the
   size of its own network. */
.hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; margin-top: 30px; max-width: 30rem; }
@media (min-width: 1100px) { .hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; } }
.hero-stats div { min-width: 92px; }
.hero-stats dt { font-family: var(--font-display, inherit); font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.hero-stats dd { margin: 6px 0 0; font-size: .8rem; color: var(--muted); }
@media (max-width: 640px) { .hero-stats { gap: 18px 24px; } .hero-stats dt { font-size: 1.6rem; } }


/* How a provision's rulings have gone, at a glance. */

/* Without an aside the article is a single column, not a column and a hole. */
.article:not(:has(aside)) { grid-template-columns: minmax(0, 820px); }



.districts { margin: 10px 0 6px; }
.districts .chip { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .8rem; }
.count-note { font-size: .74rem; font-weight: 500; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-left: 8px; }
.dd-note { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; }

/* ---------------------------------------------------------- statistics */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 20px 0 8px; }
/* Six boxes into an auto-fit of four leaves a ragged gap; three columns divides
   evenly and gives each figure more room. */
@media (min-width: 900px) { .article-body .stats { grid-template-columns: repeat(3, 1fr); } }
.statbox { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--surface); }
.statn { display: block; font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.statl { display: block; font-size: .88rem; margin-top: 6px; }
.statnote { display: block; font-size: .76rem; color: var(--muted); margin-top: 4px; }

/* ------------------------------------------------- editorial standards */

.keypoints { padding-left: 20px; }
.keypoints li { margin-bottom: 8px; max-width: 74ch; }
.tiers { padding-left: 20px; }
.tiers li { margin-bottom: 6px; max-width: 74ch; }
.article-body h2 { margin-top: 30px; }
.article-body h2 + p, .article-body h2 + ul, .article-body h2 + ol { margin-top: 10px; }
.article-body p + p { margin-top: 12px; }



/* The month index is the navigation this page never had: eleven links replacing
   ten thousand pixels of scrolling. */


/* ------------------------------------------------------------- shelves */

.shelf { padding-top: 26px; }
.shelf > h2 { font-size: 1.05rem; display: flex; align-items: baseline; gap: 10px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); }
.shelf .row h3 { margin-top: 8px; }
.stand-note { color: var(--muted); font-size: .88rem; max-width: 76ch; }

/* An expired date is struck through so it reads as expired at a glance, but the
   date itself stays legible — it is still the fact the reader needs. */
.stand { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; margin-left: 6px; }
.stand--live   { background: rgba(16,122,66,.10); color: #0d6b3c; }
.stand--lapsed { background: rgba(120,110,90,.14); color: #6a5f45; }
.factnote--warn { border-left: 3px solid #b0361c; background: rgba(176,54,28,.05); padding: 12px 14px; border-radius: 0 6px 6px 0; color: var(--ink); }

/* ------------------------------------------------------------- outcome

   Colour carries who came out ahead, but never alone: the chip always spells out
   the appellant and the disposal, so the fact survives for a reader who cannot
   distinguish the hues. */

/* Below the view strip, not inside the head: a line only one view carries
   must never move the control that switches views. */

@media (prefers-contrast: more) {
}

/* ---------------------------------------------------------- bench lookup

   A question with one answer gets a field, not a filter: it is the first thing
   on the page and the directory is the fallback beneath it. */

.lookup { background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 4px 0 32px; }
.lookup label { display: block; margin-bottom: 10px; }
.lookup label strong { display: block; font-size: 1.02rem; }
.lookup label span { font-size: .85rem; color: var(--muted); }
.lookup input[type="search"] { width: 100%; font-size: 1rem; padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: inherit; }
.lookup input[type="search"]:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 1px; }
.lookup-help { font-size: .82rem; margin-top: 8px; }
.lookup-help a { color: var(--brand-blue); }

.lookup-result { margin-top: 12px; display: grid; gap: 8px; }
.lookup-hit { display: block; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; color: inherit; }
.lookup-hit:hover, .lookup-hit.is-active { border-color: var(--brand-blue); text-decoration: none; }
.lookup-hit.is-active { box-shadow: 0 0 0 2px rgba(7,93,255,.18); }
.lh-q { display: block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lh-q em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--muted); }
.lh-b { display: block; font-weight: 700; font-size: 1.05rem; margin-top: 2px; }
.lh-r, .lh-a { display: block; font-size: .82rem; color: var(--muted); }
.lh-a { margin-top: 4px; }
.lookup-none { font-size: .9rem; color: var(--muted); }
.lookup-none a { color: var(--brand-blue); }
/* Five boxes instead of one. The old .lookup label rules styled a block label
   above a full-width field; these are small labels over narrow fields laid out
   in a row that wraps, so they are scoped to the multi form and the single-box
   rules are left alone for anything still using them. */
.lookup-lede { margin: 0 0 14px; }
.lookup-lede strong { display: block; font-size: 1.02rem; }
.lookup-lede span { font-size: .85rem; color: var(--muted); }

.lookup-fields { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: start; }

/* The result list belongs to its own box, so it is positioned against the box
   rather than pushing the other four down the page when it opens. */
.lookup-field { position: relative; min-width: 0; }
.lookup-field label { display: block; margin-bottom: 5px; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.lookup-field input[type="search"] { font-size: .92rem; padding: 9px 11px; }

.lookup--multi .lookup-result {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px);
  margin-top: 0; max-height: 340px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px; box-shadow: 0 10px 28px rgba(7, 22, 49, .12);
}
.lookup--multi .lh-b { font-size: .96rem; }

/* Stacked, the dropdown has the whole width and no reason to float. */
@media (max-width: 599px) {
  .lookup-fields { grid-template-columns: 1fr; }
}

/* Directory beneath the lookup: grouped by jurisdiction, because a reader knows
   their state even when the district escapes them. */

/* The wrapper must be allowed to be narrower than what it holds, or it simply
   grows to the table's width and the whole page scrolls sideways instead. A
   grid or flex child also needs min-width:0 to be allowed to shrink. */
.table-wrap { overflow-x: auto; max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; }
.table-wrap > table { min-width: 34rem; }

.dtable { width: 100%; border-collapse: collapse; font-size: .88rem; }
.dtable th, .dtable td { text-align: left; padding: 9px 14px 9px 0; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.dtable thead th { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dtable tbody th { font-weight: 600; }
.dtable .qual { font-weight: 400; color: var(--muted); font-size: .8rem; }

/* ------------------------------------------------------- by section

   The digest is read by scanning propositions, so the holding is the loudest
   thing on the row and the parties are demoted to a footnote — the reverse of
   the chronological list, on purpose. */



.rows.tight > li { border-bottom: none; }
.rows.tight .row { padding: 8px 0; }
.rows.tight .row h3 { font-size: .92rem; line-height: 1.4; margin: 0 0 3px; font-weight: 500; }

.row.holding h3 { font-weight: 600; }
.row .parties { font-size: .8rem; color: var(--muted); margin-top: 6px; }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
.chips .chip { text-transform: none; letter-spacing: 0; font-size: .78rem; font-weight: 600; padding: 5px 11px; }
.chips a.chip:hover { background: rgba(7,93,255,.16); text-decoration: none; }
.chips .chip span { margin-left: 4px; font-weight: 500; }
.chip-flat { background: var(--tint); color: var(--muted); }

/* -------------------------------------------------------------- people */

.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; align-items: start; }
.person { display: flex; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; color: inherit; }
/* Only a card that is genuinely a link may light up under the cursor. The
   tribunal-member and registry cards are <div>s: they used to take the blue
   border and lead nowhere. */
a.person:hover { text-decoration: none; border-color: var(--brand-blue); }
.person img, .person .ph {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  background: var(--tint); display: grid; place-items: center;
  font-weight: 700; color: var(--brand-violet); font-size: 1rem;
}
.person .nm { display: block; font-weight: 600; font-size: .95rem; line-height: 1.25; }
.person .rl { display: block; font-size: .8rem; color: var(--muted); margin-top: 2px; }
.person .lc { display: block; font-size: .78rem; color: var(--muted); margin-top: 6px; }
/* Provenance under a block of content, not a byline for it. */

/* ------------------------------------------------------- member roster

   A two-up card grid could not hold this data honestly: biographies run from
   8 to 807 characters, 34 of 43 benches have some members with one and some
   without, and most benches have only two or three members. Equalising a row
   meant either clamping the long biography or padding a void beside the short
   one. A single column removes the problem instead of managing it — a row is
   as tall as the member's own record, and nothing sits beside it to be ragged
   against. Within the row, three columns keep names on one axis so the roster
   still scans. */
.roster { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line-2); }
.rr {
  display: grid; align-items: start;
  grid-template-columns: 56px 300px minmax(0, 1fr);
  gap: 0 18px; padding: 18px 0 18px 14px;
  border-bottom: 1px solid var(--line-2);
  /* Every row reserves the accent's width, so the presiding row is marked
     without being shoved 17px off the axis the others share. Marking the most
     important row by misaligning it defeated the whole point of the columns. */
  border-left: 3px solid transparent;
}
/* A member with no biography gets the full width for their name and role.
   A fixed third column left 480px of white beside them — under a rule drawn
   the whole way across, so the row read as a table with a cell missing — while
   16 names wrapped to two lines inside a 250px column. Centred, because with
   nothing to the right the 56px badge overhung the 47px text block by 9px. */
.rr-solo { grid-template-columns: 56px minmax(0, 1fr); align-items: center; }
/* The head of the bench is marked once, on the row, and not by taking his
   membership away from him in the label. */
.rr-presides { border-left-color: var(--brand-violet); }
.rr-badge {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  background: var(--tint); display: grid; place-items: center;
  font-weight: 700; color: var(--brand-violet); font-size: .95rem; letter-spacing: .01em;
}
.rr-id { min-width: 0; }
.rr-id .nm { display: block; font-weight: 650; font-size: 1.05rem; line-height: 1.25; color: var(--ink); }
.rr-id .rl { display: block; font-size: .85rem; font-weight: 600; color: var(--ink-2); margin-top: 3px; }
.rr-id .rl strong { font-weight: 700; color: var(--brand-violet); }
/* Date of birth and bench allotment are metadata, not prose: smaller, quieter,
   tight under the role. Absent ones render nothing at all, so a sparse row
   simply ends — there is no reserved space to look empty. */
.rr-id .mt { display: block; font-size: .74rem; color: var(--muted); margin-top: 5px; letter-spacing: .01em; }
.rr-id .mt + .mt { margin-top: 2px; }
/* Aligned to the name's BASELINE across the gutter, not to its box top:
   16.8px/1.25 and 13.4px/1.6 start level and read a line apart. */
.rr-bio { font-size: .84rem; line-height: 1.6; color: var(--ink-3); margin-top: -1.3px; }
.rr-bio p + p { margin-top: 8px; }
/* The list opened with a rule and closed with nothing, so it appeared to stop
   mid-way and the provenance line below it floated free. */

@media (max-width: 719px) {
  /* Stacked: badge and identity side by side, the biography beneath both. */
  .rr, .rr-solo { grid-template-columns: 44px minmax(0, 1fr); gap: 0 14px; align-items: start; }
  .rr-badge { width: 44px; height: 44px; font-size: .82rem; }
  .rr-bio { grid-column: 1 / -1; margin-top: 12px; }
  .rr-id .nm { font-size: 1rem; }
}

/* -------------------------------------------------------------- search */

.search-group { padding: 8px 0; }
.search-group + .search-group { border-top: 1px solid var(--line-2); }
.search-group h4 {
  font-family: var(--sans); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); padding: 6px 16px 6px;
}
.search-panel a { display: block; padding: 8px 16px; color: inherit; }
.search-panel a:hover, .search-panel a.is-active { background: #f2f7ff; text-decoration: none; }
.search-panel .rt { display: block; font-size: .9rem; font-weight: 500; line-height: 1.3; }
.search-panel .rm { display: block; font-size: .74rem; color: var(--muted); margin-top: 1px; }
.search-empty { padding: 18px 16px; font-size: .85rem; color: var(--muted); }

/* Printing a judgment is the "Summary PDF" the live table offered, produced by
   the page itself rather than by a second rendering that could disagree with
   it. Everything that is navigation goes; everything that is the ruling stays,
   and the citation a printed page needs is added back. */
@media print {
  .site-header, .site-footer, .ad, .filters, .search-panel, .page-actions,
  .skip-link, .lookup,
  body { background: #fff; color: #000; font-size: 11pt; }
  .wrap { max-width: none; padding: 0; }
  .article { display: block; }
  .article aside { margin-top: 18pt; }
  .factbox { border: 1pt solid #999; break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  .rows > li, .rr, .docbox { break-inside: avoid; }
  a { color: #000; text-decoration: underline; }
  /* On paper a link is a dead end unless it says where it goes. */
  .article-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .article-body a[href^="/"]::after { content: " (gstat.taxbykk.com" attr(href) ")"; font-size: 9pt; }
  .page-head::after {
    content: "Printed from gstat.taxbykk.com — check the page for corrections before relying on it.";
    display: block; margin-top: 10pt; padding-top: 6pt; border-top: 1pt solid #999;
    font-size: 8.5pt; color: #333;
  }

  /* The table view used to be hidden here. That rule was written for a judgment
     page, where the table is an irrelevant leftover; then Print became a list
     toolbar action and the rule stayed, so pressing Print while the table was
     open produced a cover sheet and nothing else — the list hidden by the
     script, the table hidden by this stylesheet. The dense grid is the thing a
     practitioner most wants on paper. */
  .table-wrap { overflow: visible !important; }
  .jtable { min-width: 0; font-size: 8pt; }
  /* Repeat the column headings on every sheet: 24 rows do not fit on one. */
  .jtable thead { display: table-header-group; }
  .jtable tr { break-inside: avoid; }
  .jtable th, .jtable td { border: .5pt solid #999; padding: 4pt 5pt; }
  .jtable thead th { background: #eef0fb; }
  .jtable tbody tr:nth-child(even) { background: #f6f8fd; }
  /* Buttons on paper are decoration. */
  .jtable .t-action { display: none; }
  .jtable .t-subject a { color: #000; text-decoration: none; font-weight: 700; }
  .jtable .tchip { border: .5pt solid #999; background: none !important; color: #000 !important; }
}

/* ---------------------------------------------------------------------------
   Benches under the hero.

   A state is the card; its benches are the chips inside it. The facts line is
   pushed to the bottom with margin-top:auto so the grid keeps a rhythm whether
   or not a state has judgments yet — eight of twenty-two do not, and a ragged
   baseline reads as broken rather than as sparse.
   --------------------------------------------------------------------------- */

.sb-section { padding-top: 8px; }

.sb-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-left: 4px solid var(--brand-blue);
  background: var(--tint);
  padding: 10px 14px;
  margin: 26px 0 14px;
  border-radius: 0 8px 8px 0;
}
.sb-bar h2 {
  margin: 0; font-size: 15px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink);
}
.sb-bar--state { border-left-color: var(--c-notification); }

.sb-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.sb-grid--pb {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin-bottom: 4px;
}

.sb-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--c-notification);
  border-radius: 8px;
  padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.sb-card--pb { border-left-color: var(--brand-blue); background: var(--page); }
.sb-card h4 { margin: 0; font-size: 16px; line-height: 1.25; color: var(--ink); }
.sb-n { margin: 0; font-size: 12.5px; color: var(--muted); }
.sb-n a { color: inherit; text-decoration: none; }
.sb-n a:hover, .sb-n a:focus-visible { color: var(--ink-2); text-decoration: underline; }

.sb-chips { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sb-chip {
  display: inline-block; font-size: 12px; padding: 3px 9px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--page); color: var(--ink-2); text-decoration: none;
}
.sb-chip:hover, .sb-chip:focus-visible { border-color: var(--brand-blue); color: var(--brand-blue); }

.sb-facts {
  margin-top: auto; padding-top: 9px;
  border-top: 1px solid var(--line-2);
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12.5px;
}
/* Every fact on a state card is a link. They are kept looking like facts —
   underlined only on hover — so the card reads as information rather than as
   a stack of three calls to action. */
.sb-vp, .sb-j, .sb-m { text-decoration: none; }
.sb-vp:hover, .sb-j:hover, .sb-m:hover,
.sb-vp:focus-visible, .sb-j:focus-visible, .sb-m:focus-visible { text-decoration: underline; }
.sb-vp { color: var(--muted); }
.sb-vp:hover { color: var(--ink-2); }
.sb-j { color: var(--c-judgment); font-weight: 600; }
.sb-m { color: var(--c-rules); font-weight: 600; }

.sb-chip--flat { color: var(--muted); background: transparent; border-style: dashed; }

/* The bench head: who and where on the left, the locator map on the right.
   Same two-column shape as .page-head--figure, which the section heads with an
   image already use, so the bench pages do not invent a second layout.

   The address sits here rather than in a tinted block below, because it is the
   first thing a reader checks and it reads straight on from the state line. It
   took the place of the Copy link and Print buttons: the browser does both, and
   neither earned the two most prominent controls on the page. */
.bench-head {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px; align-items: start; padding-block: 40px 22px;
}
.bench-head-id { min-width: 0; }

/* The bench nav borrows .tx-src for its shape — the same Back … Next row the
   full-text pages use, so the two read as one pattern. Only the spacing
   differs: it sits inside the head rather than between a document and its
   text, so it does not need the 26px that separates those. */
.bench-nav { margin: 18px 0 0; }

/* The all-benches map, in the figure slot of the /benches/ head where a stock
   photograph used to sit. It fills that column rather than the 300px the
   single-bench map takes, and its pins are smaller because there are
   forty-seven of them at the width of a picture. */
.bench-map--all { margin: 0; }
.bench-map--all .im-wrap { max-width: 100%; }
.bench-map--all .im-cap { max-width: 100%; }
.bench-map--all .im-dot { stroke-width: 2.5; }
.im-pin-all .im-dot { transition: r .12s ease; }
.im-pin-all .im-dot:hover { r: 16; }

.bench-address { margin: 14px 0 0; line-height: 1.55; color: var(--ink-2); max-width: 56ch; }
.ba-phone { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }

@media (max-width: 899px) {
  .bench-head { grid-template-columns: 1fr; gap: 20px; padding-block: 28px 18px; }
}
/* ---- the bench locator map -------------------------------------------------

   India, the bench's state, the city. It sits between the address and the
   roster because that is where a reader is still asking "where is this?", and
   it answers in one look rather than in a line of small type.

   Hidden until india-map.js has drawn into it: an empty figure with a reserved
   aspect ratio is a grey rectangle for anyone without JavaScript, and the
   address above already says in words everything the map says.

   The palette is the site's own — one accent on the state, one pin on the
   city, every other state in the line colours the tables and cards use. That
   restraint is what keeps it from reading like a travel site. */
.bench-map { display: none; margin: 0; }
.bench-map.is-ready { display: block; }

.im-wrap { position: relative; max-width: 340px; }

.im-svg {
  display: block; width: 100%; height: auto;
  background: var(--page);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px;
}

/* Every other state: quiet, but drawn, so the country reads as a country and
   not as one state floating in space. */
.im-st { fill: #e9eef7; stroke: #fdfdff; stroke-width: 1.4; stroke-linejoin: round; transition: fill .12s ease; }
.im-st:hover { fill: #dbe5f4; }

/* The bench's state. A pale fill so the full-strength border can carry the
   emphasis without the shape shouting over the pin. */
.im-on { fill: #c5d8ff; stroke: var(--brand-blue); stroke-width: 2.2; }
.im-on:hover { fill: #b4ccff; }
.im-top { pointer-events: none; }

.im-halo { fill: var(--brand-blue); opacity: .16; /* not-text */ }
.im-dot  { fill: var(--brand-blue); stroke: #fff; stroke-width: 3.5; }

/* HTML, not SVG text: the same size whatever the map is scaled to. */
.im-tag {
  position: absolute; transform: translate(12px, -50%);
  white-space: nowrap; pointer-events: none;
  font-size: .74rem; font-weight: 600; line-height: 1;
  color: var(--ink); background: rgba(255, 255, 255, .93);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 9px;
}
.im-tag-left { transform: translate(calc(-100% - 12px), -50%); }

.im-cap {
  margin-top: 8px; max-width: 340px;
  font-size: .76rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted);
}


@media (max-width: 899px) {
  .im-wrap, .im-cap { max-width: 300px; margin-left: auto; margin-right: auto; }
  .im-cap { text-align: center; }
}


.reg-contact { margin: 0 0 14px; }
.reg-contact strong {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}

/* One card per row: the sidebar is far narrower than the network directory. */
.fb-people { display: flex; flex-direction: column; gap: 8px; }
.fb-people .person { width: 100%; }

/* ------------------------------------------- the network, on the home page

   Twenty practitioner cards under the benches, in place of the dark band that
   held two rows of chips and a button. Only the name and the profile line are
   links: a card that is one big link reads out as name-role-address-bench run
   together, and puts the address out of reach of a mouse that wants to copy it. */

.sb-bar--net { border-left-color: var(--ink-3); }
.sb-count { font-size: .8rem; color: var(--muted); }
/* The count and the join button, at the right of the network band. They wrap
   onto their own line on a narrow screen rather than squeezing the heading. */
.sb-act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

.np-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); }

/* The member card, in the site's own colours (1 October 2026). It had four of
   its own - a violet edge, a green chip, an orange link and a lilac avatar -
   and sat on the page as a different site. Now: the bench card's hairline and
   radius, ink for the name, the one blue for the one link. */
.np {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.np:hover { border-color: #c4d3ec; box-shadow: 0 10px 24px -18px rgba(7,22,49,.35); }
.np-top { display: flex; gap: 10px; align-items: center; }
.np-face { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.np-face--ph {
  display: grid; place-items: center; background: var(--line-2);
  color: var(--ink-3); font-weight: 700; font-size: .78rem; letter-spacing: .02em;
}
.np-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.np-nm { font-weight: 700; color: var(--ink); line-height: 1.25; text-decoration: none; }
.np-nm:hover, .np-nm:focus-visible { color: var(--brand-blue); text-decoration: underline; }
.np-rl { font-size: .78rem; color: var(--muted); }

.np-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
/* Plain lines, no pictograms: the emoji rendered in colour on some systems
   and were the band's fifth colour. */
.np-facts li { font-size: .78rem; line-height: 1.4; color: var(--ink-3); }
.np-facts { border-top: 1px solid var(--line-2); padding-top: 8px; }
/* The years, as the network row sets them: the number carries the weight. */
.np-bench { color: var(--ink-2); }
.np-exp b { color: var(--ink); font-weight: 700; }

.np-more {
  margin-top: auto; padding-top: 4px; font-size: .78rem; font-weight: 600;
  color: var(--brand-blue); text-decoration: none; align-self: flex-start;
}
.np-more .ico { width: .85em; height: .85em; }
.np-more:hover, .np-more:focus-visible { text-decoration: underline; }

/* ------------------------------------------------------ the judgments table

   Eight columns with the filter for each in that column's own header. */

.jt-head { display: flex; align-items: center; gap: 12px; padding: 6px 0 10px; }
.jt-count { font-size: .82rem; color: var(--muted); }

/* The connector mark: a single letter under the serial number, saying the
   judgment can be researched inside Claude through the TaxByKK Connector.
   Deliberately quiet - it is a note about the judgment, not part of its
   number - and set below the serial rather than beside it, so the column
   keeps the width it was given and the serials stay in one clean line. */
/* The serial and its mark as one box, no wider than the pill: that is what
   lets the letter centre on the serial itself. Without it the letter is a
   block the width of the cell and centres on the column instead. */
.jt-serial { display: inline-block; }
.jt-u {
  display: block; margin-top: 3px; font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; color: var(--muted); cursor: help;
  text-align: center;
}
/* N: a judgment parked, not to be uploaded to the Connector for now (owner, 23 Oct 2026). The same small mark as the U, lighter, and
   with no legend or tooltip: it is a note for the owner's own reading of the table, not something to explain to a reader. */
.jt-n {
  display: block; margin-top: 3px; font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; color: var(--muted); opacity: .55; text-align: center;
}
/* Dormant while nothing is marked, like .jt-none above: the legend is only
   emitted when at least one judgment carries the U, so the audit reports this
   rule as matching nothing until the first one is marked in the admin. */
.jt-legend { font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.jt-legend .jt-u { display: inline; margin: 0; cursor: default; }
.jt-clear {
  font: inherit; font-size: .8rem; background: none; border: 0; padding: 0;
  color: var(--brand-blue); cursor: pointer; text-decoration: underline;
}

.jt { font-size: .85rem; table-layout: fixed; }
.jt thead th { position: sticky; top: 0; background: var(--bg); z-index: 2; }
.jt tbody tr:hover { background: var(--tint); }
.jt td, .jt th { padding: 8px 12px 8px 0; overflow-wrap: anywhere; }
.table-wrap > table.jt { min-width: 62rem; }

.jt-sort {
  font: inherit; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap;
}
.jt-sort:hover { color: var(--ink); }
.jt-dir { display: inline-block; width: .8em; }

/* A search input bound to a datalist: a dropdown when you click the arrow, a
   search when you type. A plain <select> would be useless on Topic, Parties and
   Appeal no., where every one of the 28 values is unique. */
.jt-filters th { padding-bottom: 10px; border-bottom: 2px solid var(--line); }
.jt-f {
  width: 100%; min-width: 0; font: inherit; font-size: .78rem;
  padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px;
  background: var(--surface); color: var(--ink);
}
.jt-f:focus { outline: 2px solid var(--brand-blue); outline-offset: -1px; border-color: var(--brand-blue); }

.jt-pill {
/* The em dash in a table cell with nothing in it. Dormant, not dead: every
   judgment currently has a serial, a category and a full-text page, so the
   audit reports this as matching nothing. judgmentsTable still emits the class
   in four places, and the next scanned order uploaded — or a record saved
   without a serial — brings it back. Deleting it would leave that dash
   unstyled, which is how it looked before the rule was written. */
.jt-none { color: var(--muted); }
  display: inline-block; font-variant-numeric: tabular-nums; font-weight: 700; font-size: .78rem;
  padding: 2px 7px; border-radius: 4px; background: var(--tint); color: var(--brand-violet);
}
.jt-pill--q { font-weight: 600; color: var(--ink-2); background: var(--line-2); white-space: normal; overflow-wrap: anywhere; }
/* The court's neutral citation, beneath the case number in the same cell -
   a second line rather than a column of its own, because most judgments
   before 2023 have none and a mostly empty column would cost every row width. */
.jt-nc { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; letter-spacing: .01em;
  color: var(--brand-blue-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The reference number a document is cited by. Tabular figures so the slashed
   numbers line up down the column, and it never wraps mid-number. */
/* The reference number a document is cited by. Tabular figures so the slashed
   numbers line up down the column. It must NOT be nowrap: GSTAT/Pr.Bench/Portal/125/25-26
   is longer than any column width that leaves room for the rest, and held on one
   line it ran straight over the title beside it. Broken anywhere instead, which
   for a slashed reference reads perfectly well over two lines. */
.jt-ref { font-variant-numeric: tabular-nums; font-size: .82rem; overflow-wrap: anywhere; }
.jt-topic a { font-weight: 600; color: var(--ink); }
.jt-topic a:hover { color: var(--brand-blue); }
.jt-parties { color: var(--ink-3); font-size: .8rem; }
/* PDF and TEXT on the first line, SAVE beneath them. The row is already two
   to five lines tall from the Topic and Parties columns, so the second line is
   free: it costs no height, and the column stays at 6% instead of taking width
   from Topic to fit a third link beside the other two. */
/* 4px between PDF and TEXT, not 10. The column is 6% — 60px of content once the
   cell padding is taken — and the two words measure 54.3px including the trailing
   letter-spacing. At the old 10px gap they came to 64.3 and TEXT dropped onto its
   own line, giving three lines where the whole point was two; at 6px they still
   came to 60.3, over by a third of a pixel. */
.jt-docs { display: flex; flex-wrap: wrap; gap: 3px 4px; align-items: baseline; min-width: 72px; }
/* 72px, the width the column has at 1280 and the width the two words need once
   the cell padding is taken off. The floor matters because this table lives in a
   horizontal scroller: below about 1280px the column is squeezed and TEXT drops
   to a line of its own, giving three lines instead of two. The table already
   scrolls at those widths, so holding one column at its natural size costs
   nothing that was not already being paid. */
/* Centred under the pair above it, and in the SAME blue as PDF — not decoration
   but a rule: PDF and SAVE point at the same file, TEXT points somewhere else.
   The cell reads as two things rather than three, the order and its full text.
   It was --ink-2 before, which is the body colour and so did not read as
   clickable at all. */
.jt-save {
  flex: 0 0 100%; text-align: center;
  font-weight: 600; font-size: .78rem; letter-spacing: .04em;
  color: var(--brand-blue);
}
.jt-save:hover { text-decoration: underline; }
.jt-pdf, .jt-text { font-weight: 600; font-size: .78rem; letter-spacing: .04em; color: var(--brand-blue); }
.jt-text { color: var(--brand-violet); }
.jt-empty td { text-align: center; color: var(--muted); padding: 28px 0; }

/* --------------------------------------------------- the full text of an order

   A judgment is set with its paragraph numbers hanging in the margin, and it is
   read by finding paragraph 33 — so the number stays reachable rather than
   buried at the head of a wrapped line. */

.tx-wrap { max-width: 46rem; }
.tx-meta {
  display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .82rem; color: var(--muted);
  padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 18px;
}
.tx-meta b { font-weight: 600; color: var(--ink-2); }
/* Left-aligned, like every other block on the page: the heading, the party line,
   the meta row, the promotion, the note, the standfirst and the order text all
   start at the same edge. Centred, the row was the only thing indented and read
   as an orphan rather than a flourish. */
.tx-src { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 26px; }

/* Back sits first in the row, so it reads as the way out rather than another
   document to open, and its arrow slides the way it is about to travel. The
   margin-right separates leaving the page from downloading it: without it the
   two buttons are a pair of equals 10px apart, and the reader has to read both
   labels to find the one that goes back. */
.tx-back { margin-right: 6px; }

/* Next sits beside the documents rather than at the right edge. Flushed right it
   read as the other half of a prev/next pager with Back, and Back is not
   "previous" — it returns to the list. The arrow leans the way it travels,
   mirroring .tx-back. */
.tx-next { margin-left: 6px; }
.tx-next .ico { transition: transform .16s ease; }
.tx-next:hover .ico { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) { .tx-next:hover .ico { transform: none; } }

/* The one block on the page that is ours and not the Tribunal's, so it is
   bordered and tinted to read as an aside rather than as part of the order. It
   sits after the text: the reader it addresses is the one who has finished. */
.tx-promo {
  /* No max-width: it spans the text column, like the note and the standfirst
     blockquote it sits between. Capped narrower it read as a floating card in a
     wider page rather than as one band in a stack of them. */
  margin: 34px 0 26px; padding: 22px 24px;
  background: var(--tint); border: 1px solid var(--line);
  border-left: 4px solid var(--brand-blue); border-radius: 0 10px 10px 0;
}
.tx-promo-q { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ink); line-height: 1.4; }
.tx-promo-a { margin: 6px 0 16px; font-size: .92rem; color: var(--ink-2); line-height: 1.5; }
.tx-promo-cta { text-decoration: none; }
@media print { .tx-promo { display: none; } }

/* The recording that discusses an order, under the buttons. 16:9 is the shape
   YouTube serves and the shape the player wants, so the box is that shape and
   the iframe fills it — set here rather than on the iframe, because the element
   in the box starts as a link and becomes an iframe on click, and the layout
   must not move when it does.

   max-width holds it to the width of the text column: a player stretched across
   a 1200px page beside 70-character lines of an order looks like the page's
   subject, and it is not — the order is. */
.tx-video { margin: 0 0 26px; max-width: 640px; }
.tx-video > * { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-sm); }
.tx-video-facade {
  position: relative; display: flex; align-items: flex-end; gap: 12px;
  padding: 16px; background: linear-gradient(160deg, #1d2430, #0d1117);
  color: #fff; text-decoration: none; overflow: hidden;
  transition: box-shadow .16s ease;
}
.tx-video-facade:hover { text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.24); }
/* A triangle in CSS rather than an SVG or an image: it is one shape, and a
   thumbnail from ytimg would be the third-party request this avoids. */
.tx-video-play {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: #ff0033; position: relative;
  transition: transform .16s ease;
}
.tx-video-play::after {
  content: ''; position: absolute; top: 50%; left: 52%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff;
}
.tx-video-facade:hover .tx-video-play { transform: scale(1.06); }
.tx-video-label { font-size: .9rem; font-weight: 600; line-height: 1.3; }
.tx-video-sub { display: block; font-size: .76rem; font-weight: 400; color: #b6bfcc; margin-top: 3px; }
@media (prefers-reduced-motion: reduce) { .tx-video-facade:hover .tx-video-play { transform: none; } }
/* Printed, a video is a blank rectangle. */
@media print { .tx-video { display: none; } }
.tx-back .ico { transition: transform .16s ease; }
.tx-back:hover .ico { transform: translateX(-2px); }
@media (prefers-reduced-motion: reduce) { .tx-back:hover .ico { transform: none; } }
.tx-note {
.tx-note--read { border-left: 3px solid var(--warn); padding-left: 12px; }
  font-size: .8rem; color: var(--muted); line-height: 1.5; background: var(--tint);
  border-left: 3px solid var(--line); padding: 10px 14px; border-radius: 0 6px 6px 0;
}
.tx-held {
  margin: 0 0 24px; padding: 14px 18px; background: var(--tint);
  border-left: 4px solid var(--brand-violet); border-radius: 0 8px 8px 0;
}

/* The standfirst carries numbered holdings now, not a quoted paragraph: the list
   is the structure, so it loses the marker indent a prose list wants and sits
   flush with the rest of the block. Counters rather than list-style so the
   number can be given the accent colour the quote is bordered with — it is what
   a reader scans down when the order decides four separate things. */
.tx-held--brief ol { margin: 0; padding: 0; list-style: none; counter-reset: held; }
.tx-held--brief li { counter-increment: held; position: relative; padding-left: 26px; }
.tx-held--brief li + li { margin-top: 10px; }
.tx-held--brief li::before {
  content: counter(held) '.'; position: absolute; left: 0; top: 0;
  font-weight: 700; color: var(--brand-violet);
}
.tx-held--brief li { font-size: .95rem; line-height: 1.6; color: var(--ink-2); }
.tx-held--brief strong { font-weight: 700; }
.tx-held--brief em { font-style: italic; }
.tx-held p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink-2); }
.tx-h {
  font-size: 1.05rem; letter-spacing: .01em; margin: 34px 0 14px;
  padding-bottom: 8px; border-bottom: 2px solid var(--ink);
}
.tx-p {
  position: relative; padding-left: 3.1rem; margin: 0 0 15px;
  font-size: .95rem; line-height: 1.75; color: var(--ink-2);
}
.tx-n {
  position: absolute; left: 0; width: 2.6rem; text-align: right;
  font-weight: 700; font-variant-numeric: tabular-nums; color: var(--brand-violet);
}
.tx-page {
  display: flex; align-items: center; gap: 12px; margin: 26px 0;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.tx-page::before, .tx-page::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }

@media (max-width: 640px) {
  /* The hanging number costs half the line on a phone. */
  .tx-p { padding-left: 0; }
  .tx-n { position: static; width: auto; text-align: left; margin-right: .5em; }
}
@media print { .tx-page, .tx-src, .tx-note { display: none; } }

/* Columns whose value must not be broken across lines — a serial, an appeal
   number, a date, a bench name. Used by the judgments table and the admin. */
.nowrap { white-space: nowrap; }

/* The index-as-a-document button sits at the far end of the table's own bar,
   away from the count and the clear link, because it acts on the whole set
   rather than on the filtering. */
.jt-doc { margin-left: auto; }
.jt-doc .ico { width: 15px; height: 15px; }

/* The order chooser sits with the button, not with the filters: it changes what
   comes out of the document, never what is on the page. */
.jt-order { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: .78rem; color: var(--muted); }
.jt-order select {
  font: inherit; font-size: .78rem; padding: 4px 6px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink);
}
.jt-order + .jt-doc { margin-left: 0; }
@media (max-width: 640px) {
  .jt-head { flex-wrap: wrap; }
  .jt-order { margin-left: 0; }
}

/* The two print buttons above the bench lookup. */
.bd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; }
.bd-lbl { font-size: .78rem; color: var(--muted); margin-right: 2px; }
.bd-bar .ico { width: 15px; height: 15px; }
/* Three statements, read one after another: what the listing is worth, what
   this page is, and how to carry it away. They shared a single row on a 10px
   gap, which is why the label and the button read as one chipped-together
   strip with the disclaimer stuck to them. Stacked, each gets its own line
   and the room to be read as its own thing.

   Scoped to this bar. The bench directory's is genuinely one line - a label
   and the button that answers it - and is left as it is. */
.bd-bar--stack { display: block; margin: 18px 0 26px; }
.bd-bar--stack .bd-lbl { display: block; margin: 0 0 20px; }
/* The disclaimer is the first of the three and sets the rhythm: a line-height
   that lets it wrap without crowding, and air under it before the next. */
.factnote:has(+ .bd-bar--stack) { line-height: 1.65; padding-bottom: 2px; }

/* ===================================================== the litigation network

   A directory row, not a card: the seven things a reader scans across, with
   the brief and the contact details under them and out of the way until
   asked for. On a phone the columns stack and each one says what it is —
   seven columns on a 375px screen is a spreadsheet nobody can read. */
.prows { border-top: 1px solid var(--line); }
.prow { border-bottom: 1px solid var(--line); }
/* One definition of the directory's columns. It was written out twice - here
   and again in .prows-head - and the controls above the table were on neither,
   which is how they came to be aligned to nothing in particular. The heading,
   the filter row and the cell now read the same three values, so a track that
   changes moves all three or moves none. */
:root {
  --prow-cols: 76px minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) 104px;
  --prow-gap: 24px;
  --prow-max: 820px;
}
.prow-main {
  display: grid;
  grid-template-columns: var(--prow-cols);
  gap: var(--prow-gap); align-items: start; padding: 20px 0;
  /* Six columns hold about 800px of content. Stretched across 1190 the slack
     had to land somewhere, and wherever it landed it read as a void: first
     behind the name, then between every pair. Capped, the columns sit at the
     width their content asks for and the air goes to the margin, where air
     belongs. The brief below still runs the full width. */
  max-width: var(--prow-max);
}
.prow-ph img, .prow-ph .ph {
  display: block; width: 76px; height: 76px; border-radius: 6px; object-fit: cover;
  background: var(--tint);
}
.prow-ph .ph {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); color: var(--muted); font-weight: 700; font-size: 1.1rem;
}
.prow-nm .nm {
  display: block; font-size: 1.05rem; font-weight: 600; line-height: 1.25;
  color: var(--ink); text-decoration: none;
}
.prow-nm .nm:hover { text-decoration: underline; }
/* Everything from here to the end of the detail panel is dormant while no
   member has Approval 2: the panel, its control and the blocks inside it are
   emitted only for a member whose brief profile and contact details are
   approved, and today none are. The audit reports these as rules matching
   nothing, as it does .jt-none - they are needed again the moment one is
   approved, and deleting them would leave that panel unstyled. */
.prow-more {
  margin-top: 8px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 600; color: var(--brand-violet);
}
.prow-more:hover { text-decoration: underline; }
.prow-f { font-size: .875rem; color: var(--ink-3); min-width: 0; overflow-wrap: break-word; }
.prow-ex b { font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.prow-be { font-weight: 600; color: var(--brand-violet); }
.prow-team { margin: 6px 0 0; font-size: .78rem; font-weight: 600; color: var(--brand-violet); }
/* Stands where "Contact & profile" stands on the rows that have it, so the
   two kinds of row line up and neither ends in a blank. Grey and not a
   control: there is nothing to click. */
.prow-nocontact { margin: 6px 0 0; font-size: .78rem; color: var(--muted); }
/* "Ranchi · travels all India": a qualification of the bench, set quieter
   than the bench itself so the bench is still what the eye lands on. */
.prow-tv { color: var(--muted); font-weight: 400; }
/* Three bands, not two columns: the brief runs the width of the row, then a
   rule, then the address and the contacts beside each other. A 2,000-character
   brief in a two-thirds column left a short address under a tall empty one. */
.prow-detail { padding: 4px 0 22px 92px; }
/* As many columns as there are blocks to fill them, up to three, and one
   on a narrow screen. auto-fit does what three :has() rules were doing. */
.prow-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px; }
.prow-about + .prow-band {
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line);
}
.prow-detail h3 {
  margin: 0 0 8px; font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.prow-about p { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--ink-3); }
.prow-contact dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.prow-contact dt { font-size: .8rem; color: var(--muted); }
.prow-contact dd { margin: 0; font-size: .875rem; }

@media (max-width: 860px) {
  .prow-main { grid-template-columns: 64px minmax(0, 1fr); gap: 8px 14px; }
  .prow-ph { grid-row: span 4; }
  .prow-ph img, .prow-ph .ph { width: 64px; height: 64px; }
  /* Each value names itself once the heading row is gone. */
  .prow-f::before {
    content: attr(data-h) ' '; font-size: .68rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  }
  .prow-detail { padding-left: 0; }
  .prow-band { grid-template-columns: 1fr; gap: 18px; }
}

.prows-head {
  display: grid;
  grid-template-columns: var(--prow-cols);
  gap: var(--prow-gap); padding: 0 0 8px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  max-width: var(--prow-max);
  font-size: .64rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
@media (max-width: 860px) { .prows-head { display: none; } }

/* The five controls on the table's own grid: same tracks, same gap, same cap,
   so each one starts where its column starts. The leading cell is the
   photograph's 76px - no heading over it and nothing to filter. */
.prows-filters {
  display: grid;
  grid-template-columns: var(--prow-cols);
  gap: var(--prow-gap);
  max-width: var(--prow-max);
  align-items: center;
}
/* A control is as wide as its column and no wider. Without this the search box
   keeps the 200px floor it needs when it sits in a flex bar, and every track
   after it is pushed out of line. */
.prows-filters select, .prows-filters input { width: 100%; min-width: 0; }
.prows-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; max-width: var(--prow-max);
}
/* The rule under the controls is the one .prows already draws. */
.filters--cols { padding-bottom: 14px; border-bottom: 0; }

@media (max-width: 860px) {
  /* Nothing to align to: the heading row is gone and the rows have stacked. */
  .prows-filters { grid-template-columns: 1fr; gap: 10px; }
  .prows-filters > span[aria-hidden] { display: none; }
  /* With the heading row hidden, "Any" and "Any" name nothing. Each control
     carries its column the same way a stacked value does. */
  .prows-filters .pf { display: grid; gap: 4px; }
  .prows-filters .pf::before {
    content: attr(data-h); font-size: .68rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  }
}


.prow-more .caret { display: inline-block; font-size: .9em; }

/* No professional has supplied contact details yet, so the band would set an
   address beside an empty half and look like something failed to load. One
   column until there is a second thing to put in it. */
.prow-col dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.prow-col dt { font-size: .8rem; color: var(--muted); }
.prow-col dd { margin: 0; font-size: .875rem; color: var(--ink-3); }

/* ==================================================== the Join Network form

   Grouped the way the record is grouped, two columns where there is room and
   one where there is not. It borrows the site's control height and radius
   rather than inventing its own, so it looks like the rest of the site and
   moves with it. */
.joinform { max-width: var(--prow-max); margin: 26px 0 0; }
.jgroup { border: 0; border-top: 1px solid var(--line); margin: 0 0 6px; padding: 20px 0 6px; }
.jgroup:first-of-type { border-top: 0; padding-top: 0; }
.jgroup legend {
  padding: 0 8px 0 0; font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.jgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px 24px; }
.jf { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.jf--full { grid-column: 1 / -1; }
.jf label { font-size: .8rem; font-weight: 600; color: var(--ink); }
.jf input, .jf select, .jf textarea {
  font: inherit; font-size: .875rem; line-height: 1.4; padding: 0 11px;
  height: var(--control-h); width: 100%; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
}
.jf textarea { height: auto; padding: 10px 11px; resize: vertical; line-height: 1.6; }
.jf input[type="file"] { height: auto; padding: 9px 11px; }
.jf input:focus, .jf select:focus, .jf textarea:focus { outline: 2px solid var(--brand-blue); outline-offset: 1px; }
.jf-hint { font-size: .74rem; line-height: 1.45; color: var(--muted); }

/* The PIN and the button that answers it, on one line. */
.jpin { display: flex; gap: 8px; align-items: center; }
.jpin input { flex: 1 1 auto; }
.jpin .btn { flex: 0 0 auto; }

.jphoto { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.jphoto img { width: 76px; height: 76px; border-radius: 6px; object-fit: cover; background: var(--tint); }

/* What the post office said, and what was done with it. */
.pinout {
  font-size: .8rem; line-height: 1.55; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--tint); border: 1px solid var(--line); color: var(--ink-3);
}
.pinout--bad  { border-color: #b0361c; background: rgba(176,54,28,.05); }
.pinout--warn { border-color: #b07a1c; background: rgba(176,122,28,.06); }
.pinout--ok   { border-color: var(--line); }
.pinpick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* Off-screen rather than display:none — a field that is not rendered at all is
   a field a bot can see is not meant to be filled. */
.jhp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.jsubmit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 22px 0 8px; }
.jnote { margin: 0; font-size: .82rem; color: var(--muted); }
/* What the second half of the form costs, set apart from the fields so it is
   read before they are filled in rather than after. */
.joffer { margin: 2px 0 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--tint); }
.joffer p { margin: 0 0 8px; font-size: .88rem; line-height: 1.55; }
.joffer p:last-child { margin-bottom: 0; }
.joffer-price { font-size: .95rem !important; }
.joffer-price b { color: var(--brand-violet); }
.joffer-small { color: var(--muted); font-size: .82rem !important; }
/* What each half of the join form is for, under its heading. */
.jgroup .jnote { margin: -2px 0 10px; }
.jnote--bad { color: #b0361c; }

.joindone { padding: 22px 0 6px; }
.joindone h2 { margin: 0 0 8px; font-size: 1.15rem; }
.joindone p { margin: 0; color: var(--ink-3); }
.joindone:focus { outline: none; }

@media (max-width: 560px) {
  .jgrid { grid-template-columns: 1fr; }
}



/* --------------------------------------------------------- the courts, home

   The Supreme Court and every High Court, laid out as the benches above it
   are: the same bar, the same card, a coloured edge for the group. Ink for the
   Supreme Court, the record slate for the High Courts - neither the Tribunal's
   blue nor its bench brown, so the two kinds of court are told apart from the
   Tribunal at a glance. A court with no judgments yet is shown, quieter. */
.sb-bar-h {
  margin: 0; font-size: 15px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink); font-family: var(--serif); font-weight: 700;
}
.sb-bar--sc { border-left-color: var(--ink); }
.sb-bar--hc { border-left-color: var(--c-record); }
a.sb-count { text-decoration: none; }
a.sb-count:hover, a.sb-count:focus-visible { color: var(--brand-blue); text-decoration: underline; }

.cc-card { text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
a.cc-card:hover, a.cc-card:focus-visible {
  text-decoration: none; border-color: #c4d3ec;
  box-shadow: 0 10px 24px -18px rgba(7,22,49,.35); transform: translateY(-1px);
}
.cc-card--sc { border-left-color: var(--ink); }
.cc-card--hc { border-left-color: var(--c-record); }
.cc-card h4 { font-family: var(--serif); }
.cc-kind { color: var(--muted); font-weight: 400; }
.cc-n { color: var(--c-judgment); font-size: 12.5px; }
.cc-n b { font-weight: 700; }
.cc-latest { color: var(--muted); font-size: 12.5px; }
.cc-none { color: var(--muted); font-size: 12.5px; font-style: italic; }
.cc-card--none { background: var(--page); border-left-color: var(--line); }
.cc-card--none h4 { color: var(--ink-3); }
a.cc-card .sb-facts { margin-top: auto; }

/* --------------------------------------------------- latest judgments, home

   An editorial front rather than a list: two columns, the Tribunal and the
   courts, each with one judgment set at length and the next four as an index.

   The titles are headnotes - long, exact, full of section numbers - so they
   are set barely above body size with generous leading, and the holding
   beneath them carries the page. Colour is spent once per column, on a single
   dot: blue for the Tribunal, violet for the courts, the two ends of the
   brand gradient. The rest is ink, hairline and space. */
.lx-section { padding-top: 64px; }
.lx-head { align-items: flex-end; }
.lx-eyebrow {
  margin: 0 0 7px; font-size: .68rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}

.lx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; }
.lx--one { grid-template-columns: minmax(0, 1fr); }
.lx-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.lx-col-head {
  display: flex; align-items: baseline; gap: 12px; padding-bottom: 11px;
  border-bottom: 1px solid var(--ink); border-bottom-width: 1.5px;
}
.lx-col-head h3 {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--serif); font-size: 1.04rem; font-weight: 700;
  letter-spacing: .01em; color: var(--ink);
}
.lx-col-head a {
  margin-left: auto; font-size: .76rem; font-weight: 600; white-space: nowrap;
  letter-spacing: .01em; color: var(--muted);
}
.lx-col-head a:hover { color: var(--brand-blue); }
.lx-col-head .ico { width: .85em; height: .85em; }

.lx-lead {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 30px 32px 24px;
  box-shadow: 0 1px 1px rgba(7,22,49,.03), 0 18px 40px -30px rgba(7,22,49,.3);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.lx-lead:hover { border-color: #ccd9ef; box-shadow: 0 1px 1px rgba(7,22,49,.03), 0 26px 52px -32px rgba(7,22,49,.36); }
/* The site's signature, once: the gradient as a hairline across the top. */
.lx-lead::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--brand-gradient);
}

.lx-src {
  display: flex; align-items: baseline; gap: 9px; margin: 0; flex-wrap: wrap;
  font-size: .66rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3);
}
.lx-date {
  margin-left: auto; font-weight: 500; letter-spacing: .02em; color: var(--muted);
  text-transform: none; font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lx-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; align-self: center; }
.lx-dot--gstat { background: var(--brand-blue); }
.lx-dot--court { background: var(--brand-violet); }

/* Just above body size. At 1.6rem a forty-word headnote ran six lines deep
   and became the whole card. Four lines at most, so the two columns keep
   step; the sentence in full is on the judgment itself. */
.lx-lead h4 {
  font-family: var(--serif); font-size: clamp(1.02rem, .96rem + .22vw, 1.17rem);
  font-weight: 700; line-height: 1.42; letter-spacing: 0; margin: 13px 0 0; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.lx-lead h4 a { color: inherit; }
.lx-lead h4 a:hover { color: var(--brand-blue); text-decoration: none; }

.lx-held { margin: 18px 0 0; padding: 1px 0 1px 15px; border-left: 2px solid var(--line-2); }
.lx-held-k {
  display: block; font-size: .62rem; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.lx-held p { margin: 0; font-size: .93rem; line-height: 1.65; color: var(--ink-2); }
.lx-held strong { color: var(--ink); font-weight: 600; }
.lx-held em { font-style: italic; }

.lx-foot {
  display: flex; align-items: baseline; gap: 16px; margin-top: 22px; padding-top: 15px;
  border-top: 1px solid var(--line-2);
}
.lx-case { font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.lx-read { margin-left: auto; font-size: .82rem; font-weight: 700; white-space: nowrap; letter-spacing: .01em; }
.lx-read .ico { width: .85em; height: .85em; }

.lx-list { list-style: none; margin: 0; padding: 0; }
.lx-list li + li { border-top: 1px solid var(--line-2); }
.lx-list a { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px; padding: 15px 2px; color: inherit; }
.lx-list li:first-child a { padding-top: 2px; }
.lx-list a:hover { text-decoration: none; }
.lx-i {
  font-family: var(--serif); font-size: .9rem; font-weight: 400; line-height: 1.5; color: var(--line);
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: .04em; transition: color .15s ease;
}
.lx-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lx-list .lx-src { font-size: .61rem; letter-spacing: .13em; color: var(--muted); }
.lx-t {
  font-family: var(--serif); font-weight: 700; font-size: .95rem; line-height: 1.45; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .15s ease;
}
.lx-m { font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.lx-list a:hover .lx-t, .lx-list a:focus-visible .lx-t { color: var(--brand-blue); }
.lx-list a:hover .lx-i { color: var(--brand-violet); }

@media (max-width: 900px) {
  .lx { grid-template-columns: 1fr; gap: 32px; }
  .lx-lead { padding: 24px 20px 19px; }
  .lx-head { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .lx-section { padding-top: 44px; }
  .lx-lead h4 { -webkit-line-clamp: 5; }
  .lx-date { margin-left: 0; width: 100%; }
}

/* On a phone, two courts to a row and no "latest" line: twenty-five boxes in
   one column ran to six screens before Latest Judgments. */
@media (max-width: 640px) {
  .cc-section .sb-grid:not(.sb-grid--pb) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cc-section .sb-grid:not(.sb-grid--pb) .cc-card { padding: 11px 11px 10px; gap: 4px; }
  .cc-section .sb-grid:not(.sb-grid--pb) .cc-card h4 { font-size: 14.5px; }
  .cc-section .sb-grid:not(.sb-grid--pb) .cc-kind { display: block; font-size: 12.5px; }
  .cc-section .sb-grid:not(.sb-grid--pb) .cc-latest { display: none; }
  .cc-section .sb-grid:not(.sb-grid--pb) .sb-facts { padding-top: 6px; }
}

/* The two leads, the same height, so the numbered lists beneath them start on
   the same line. The holdings differ in length by a line or two and the
   columns drifted out of step. Subgrid puts the head, the lead and the list of
   both columns on the same three rows; the card stretches to its row and the
   foot is pushed to the bottom of it. Only above the stacking breakpoint —
   stacked, there is nothing to align to. */
@media (min-width: 901px) {
  @supports (grid-template-rows: subgrid) {
    .lx { grid-template-rows: auto auto auto; align-items: stretch; }
    .lx-col { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
    .lx-lead { display: flex; flex-direction: column; }
    .lx-foot { margin-top: auto; }
    .lx-lead:not(:has(.lx-held)) h4 { margin-bottom: 22px; }
  }
}

/* The branded copy, beside the original. Marked with the brand gradient on its
   edge rather than filled, so it reads as the alternative it is: the original
   is what you file, this is what you circulate. */
.btn-brand { border-color: #c9b6f0; color: var(--brand-violet); }
.btn-brand:hover, .btn-brand:focus-visible { border-color: var(--brand-violet); background: #f6f2fe; color: var(--brand-violet); }


/* ------------------------------------------------------------ GST Library

   The menu: GST Library opens a list of its parts. Hover or focus on a wide
   screen; on a phone the list is simply there, indented under its parent, in
   the drawer - a tap to open a tap-to-open would cost a second tap for nothing. */
.site-nav li.has-sub { position: relative; }
.site-nav .nav-sub {
  display: none; position: absolute; top: 100%; left: -14px; z-index: 70;
  flex-direction: column; gap: 0; min-width: 190px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 14px 36px rgba(7,22,49,.16);
}
.site-nav li.has-sub:hover > .nav-sub,
.site-nav li.has-sub:focus-within > .nav-sub { display: flex; }
.site-nav .nav-sub a { padding: 9px 12px; border-radius: 6px; white-space: nowrap; }
.site-nav .nav-sub a:hover { background: var(--tint); }
.site-nav .nav-sub a[aria-current="page"]::after { display: none; }
.site-nav a.is-section { color: var(--brand-blue); font-weight: 600; }
/* A small chevron says "this opens". It also replaces the gradient underline a
   current link carries, which is why the parent shows its place in colour. */
.site-nav li.has-sub > a::after {
  content: ""; display: inline-block; margin-left: 6px; width: 5px; height: 5px;
  border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg);
  position: static; background: none; border-radius: 0;
}
@media (max-width: 900px) {
  .site-nav .nav-sub {
    display: flex; position: static; min-width: 0; padding: 0 0 0 16px;
    border: 0; box-shadow: none; background: transparent;
  }
  .site-nav .nav-sub a { padding: 11px 0; border-radius: 0; font-size: .95rem; }
  .site-nav li.has-sub > a::after { display: none; }
}

/* The library's front door: one card a part. */
.gc-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; margin: 26px 0 40px; }
.gc-section {
  display: block; padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--ink);
}
.gc-section:hover { text-decoration: none; border-color: var(--brand-blue); box-shadow: 0 8px 24px rgba(7,93,255,.10); }
.gc-section h2 { margin: 0 0 6px; font-size: 1.2rem; }
.gc-section p { margin: 0 0 14px; color: var(--muted); font-size: .92rem; }
.gc-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .85rem; color: var(--brand-blue); }

/* ------------------------------------------------------------ GST Council

   The list: number, meeting, date, place; the meeting's name is the link. On
   a phone each row is a card with no sideways scrolling.

   A meeting: every meeting as numbered buttons on the left (a fold-out under
   the title on a phone), the meeting's documents as tabs with Videos last, and
   the PDF open in the tab (assets/js/council-viewer.js). */
.gc-head { margin: 6px 0 18px; }
.gc-head h1 { margin: 0 0 6px; font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.gc-head .sub { margin: 0; color: var(--muted); max-width: 70ch; }
.table-wrap.gc-list > table.jt { min-width: 34rem; }
.gc-name a { color: var(--ink); }
.gc-name a:hover { color: var(--brand-blue); text-decoration: none; }
.gc-name a b { color: var(--brand-blue); }
.gc-sub { color: var(--muted); margin: 0 0 14px; max-width: 70ch; }
.gc-empty { margin-top: 22px; }
.gc-vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 18px; }
.gc-vid { margin: 0; }
.gc-vid .tx-video { margin: 0; }
.gc-vid iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; display: block; }
.gc-also { margin: 6px 2px 0; color: var(--muted); font-size: .85rem; }
.gc-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; margin: 6px 0 16px; color: var(--muted); }
.gc-facts b { color: var(--ink); font-weight: 600; }
.gc-note { margin: 26px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; max-width: 80ch; }
.gc-btns { display: flex; flex-wrap: wrap; gap: 10px; }

.gm { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 28px; align-items: start; }
.gm-side {
  position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; margin-top: 14px;
  padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
}
.gm-side-h { margin: 0 0 4px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.gm-side-h a { color: var(--muted); }
.gm-yr { font-size: .74rem; font-weight: 700; color: var(--muted); margin: 12px 0 6px; }
.gm-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.gm-chip {
  position: relative; display: flex; align-items: center; justify-content: center; height: 34px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--page);
  font-weight: 600; font-size: .85rem; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.gm-chip:hover { text-decoration: none; border-color: var(--brand-blue); color: var(--brand-blue); }
.gm-chip.is-on { background: var(--brand-gradient); color: #fff; border-color: transparent; }
/* has a video: a small triangle in the corner */
.gm-v { position: absolute; top: 3px; right: 3px; width: 0; height: 0; border-style: solid; border-width: 3px 0 3px 5px; border-color: transparent transparent transparent var(--brand-violet); }
.gm-chip.is-on .gm-v { border-left-color: #fff; }
.gm-h1 { margin: 0; font-size: clamp(1.45rem, 3vw, 2.1rem); line-height: 1.2; }
.gm-vlink { font-weight: 600; color: var(--brand-violet); }
.gm-strip { display: none; }

.gm-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 2px solid var(--line); }
.gm-tab {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 16px; margin-bottom: -2px;
  border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0;
  font-weight: 600; font-size: .92rem; color: var(--ink-2);
}
.gm-tab span { font-weight: 400; font-size: .78rem; color: var(--muted); }
.gm-tab:hover { text-decoration: none; color: var(--brand-blue); }
.gm-tab.is-on { background: var(--surface); border-color: var(--line); box-shadow: 0 2px 0 var(--surface); color: var(--brand-blue); }
.gm-tab--v { margin-left: auto; color: var(--brand-violet); }
.gm-panel { padding-top: 14px; }
.gm-panel[hidden] { display: none; }
.gm-panel--v { padding-top: 16px; }
.gm-panel.has-viewer { padding-top: 0; }
.gm-panel.has-viewer .gm-doc-fallback { display: none; }
.gm-doc-fallback p { margin: 0 0 10px; }

/* the viewer */
.pv { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; overflow: hidden; background: #e7ebf1; }
.pv-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
  padding: 8px 10px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.pv-nav, .pv-tools, .pv-jump { display: flex; align-items: center; gap: 4px; }
.pv-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none;
  border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer;
}
.pv-btn svg, .pv-dl svg, .pv-find-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pv-btn:hover { background: var(--tint); color: var(--brand-blue); }
.pv-no { width: 4.4em; padding: 6px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: .9rem; text-align: center; color: var(--ink); background: var(--surface); }
.pv-of { font-size: .86rem; color: var(--muted); margin: 0 2px; white-space: nowrap; }
.pv-find {
  display: flex; align-items: center; gap: 2px; flex: 1 1 280px; max-width: 460px;
  padding: 0 4px 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
}
.pv-find:focus-within { border-color: var(--brand-blue); outline: 2px solid var(--brand-blue); outline-offset: 1px; }
.pv-find-ic { display: inline-flex; color: var(--muted); }
.pv-q { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; font-size: .9rem; padding: 8px 6px; color: var(--ink); }
.pv-q:focus { outline: none; }
.pv-count { font-size: .78rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pv-find .pv-btn { width: 30px; height: 30px; }
.pv-zl { font-size: .78rem; color: var(--muted); min-width: 3.2em; text-align: center; font-variant-numeric: tabular-nums; }
.pv-dl {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 7px 14px; border-radius: 8px;
  background: var(--brand-gradient); color: #fff; font-weight: 600; font-size: .85rem;
}
.pv-dl:hover { text-decoration: none; color: #fff; box-shadow: 0 6px 18px rgba(7,93,255,.24); }
.pv-scroll { position: relative; height: calc(100vh - 150px); min-height: 480px; overflow: auto; outline: none; }
.pv-status { position: absolute; left: 0; right: 0; top: 40%; margin: 0; text-align: center; color: var(--muted); }
.pv-status a { font-weight: 600; }
.pv-pages { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 0 22px; }
.pv-page { position: relative; flex: none; background: #fff; box-shadow: 0 2px 10px rgba(7,22,49,.16); --scale-round-x: 1px; --scale-round-y: 1px; --user-unit: 1; }
.pv-page canvas { display: block; }
.pv-pn { position: absolute; left: 50%; top: 50%; translate: -50% -50%; color: #c4ccd8; font-size: 1.4rem; font-weight: 600; }
.pv-page canvas ~ .pv-pn, .pv-page:has(canvas) .pv-pn { display: none; }
.pv.is-full { background: #e7ebf1; }
.pv.is-full .pv-scroll { height: calc(100vh - 56px); }

/* pdf.js's text layer: transparent text over the drawing, so it can be
   selected and copied. The rules pdf.js's own viewer uses. */
.textLayer {
  position: absolute; inset: 0; overflow: clip; opacity: 1; line-height: 1; text-align: initial;
  -webkit-text-size-adjust: none; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; z-index: 0;
  --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
  --min-font-size-inv: calc(1 / var(--min-font-size));
}
.textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) {
  z-index: 1; --font-height: 0; font-size: calc(var(--text-scale-factor) * var(--font-height));
  --scale-x: 1; --rotate: 0deg; transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}
.textLayer .markedContent { display: contents; }
.textLayer span.markedContent { top: 0; height: 0; }
.textLayer ::selection { background: rgba(0, 92, 255, .28); }
.textLayer br::selection { background: transparent; }
.textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default; user-select: none; }
.textLayer.selecting .endOfContent { top: 0; }
/* Search hits: only the words searched (a <mark> inside the text layer's span, 18 Oct 2026).
   The text layer's letters are transparent over the drawn page; the mark keeps them so. */
.textLayer .pv-hit { background: rgba(255, 196, 0, .45); color: transparent; border-radius: 2px; padding: 0; margin: 0; }
.textLayer .pv-hit.is-on { background: rgba(255, 120, 0, .55); outline: 2px solid rgba(255, 120, 0, .8); }

@media (max-width: 900px) {
  .gm { grid-template-columns: 1fr; }
  .gm-side { display: none; }
  .gm-strip { display: block; margin: 0 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
  .gm-strip summary { cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: .9rem; color: var(--ink-2); }
  .gm-strip-now { color: var(--brand-blue); }
  .gm-strip-grid { padding: 0 14px 14px; }
  .gm-strip .gm-chips { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
}
@media (max-width: 760px) {
  .table-wrap.gc-list { overflow: visible; }
  .table-wrap.gc-list > table.jt { min-width: 0; display: block; }
  .gc-list colgroup, .gc-list thead tr:first-child { display: none; }
  .gc-list thead, .gc-list tbody { display: block; }
  .gc-list .jt-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .gc-list .jt-filters th { display: block; padding: 0; border: 0; }
  .gc-list .jt-filters .jt-f { font-size: .9rem; padding: 9px 10px; }
  .gc-list .jt-filters th:nth-child(1), .gc-list .jt-filters th:nth-child(4) { display: none; }
  .gc-list tbody tr:not(.jt-empty) {
    display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center;
    padding: 12px 4px; border-bottom: 1px solid var(--line-2);
  }
  .gc-list tbody tr[hidden] { display: none; }
  .gc-list tbody td { display: block; padding: 0; border: 0; }
  .gc-list tbody td:nth-child(1) { grid-row: 1 / span 2; grid-column: 1; }
  .gc-list tbody td:nth-child(2) { grid-row: 1; grid-column: 2; font-size: 1.02rem; }
  .gc-list tbody td:nth-child(3) { grid-row: 2; grid-column: 2; color: var(--muted); font-size: .85rem; }
  .gc-list tbody td:nth-child(4) { display: none; }
  .gc-list tbody td:nth-child(3)::after { content: attr(data-place); }
  .gc-list .jt-empty td { display: block; }
  .gc-list .jt-empty[hidden] { display: none; }

  .gm-tab { padding: 9px 11px; font-size: .88rem; }
  .gm-tab span { display: none; }
  .pv-bar { padding: 6px; gap: 6px; }
  .pv-find { order: -1; flex-basis: 100%; max-width: none; }
  .pv-zl { display: none; }
  .pv-dl span { display: none; }
  .pv-dl { padding: 7px 10px; }
  .pv-scroll { height: calc(100vh - 170px); min-height: 380px; }
}

/* ----------------------------------------------------- a judgment, viewed

   /judgments/<slug>/view/: every GSTAT judgment in a side list (Benches,
   Categories, Years, search) and the order in the viewer, with the
   highlighter and the pencil (assets/js/pdf-viewer.js, judgment-view.js). */
.jt-view {
  font-weight: 700; font-size: .74rem; letter-spacing: .04em; color: #fff;
  background: var(--brand-gradient); padding: 3px 8px; border-radius: 5px;
}
.jt-view:hover { text-decoration: none; color: #fff; filter: brightness(1.08); }
.jt-docs:has(.jt-view) { flex-wrap: nowrap; gap: 10px; align-items: center; }

/* ------------------------------------------------------------- GST Law
   The GST Library's law pages (15 Oct 2026): a section's documents as tabs and
   the viewer under them, with the sections of its group beside it. */
.lw { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.lw-side { position: sticky; top: 16px; margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); max-height: calc(100vh - 40px); overflow: auto; }
.lw-side h2 { margin: 0 0 4px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lw-grp { margin: 10px 0 4px; font-size: .8rem; font-weight: 700; color: var(--ink-2); display: flex; justify-content: space-between; }
.lw-grp span { font-weight: 400; color: var(--muted); }
.lw-link { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; margin: 0 0 2px; border-radius: 8px; color: var(--ink); font-size: .88rem; }
.lw-link:hover { background: var(--tint); text-decoration: none; }
.lw-link span { font-size: .75rem; color: var(--muted); }
.lw-link.is-on { background: var(--brand-gradient); color: #fff; }
.lw-link.is-on span { color: rgba(255,255,255,.85); }
.lw-link.is-soon { color: var(--muted); }
.lw-link.is-soon span { font-style: italic; }
.lw-h1 { margin: 0; font-size: clamp(1.45rem, 3vw, 2.1rem); }
.lw-sub { color: var(--muted); margin: 6px 0 16px; max-width: 75ch; }
.lw-n { font-size: .78rem; color: var(--muted); margin-left: 4px; }
.lw-panel { min-height: 320px; }
@media (max-width: 900px) {
  .lw { grid-template-columns: minmax(0, 1fr); }
  .lw-side { position: static; max-height: none; margin-top: 0; }
}

/* Outcome (15 Oct 2026): how a judgment ended, TaxByKK's reading. The word is
   always shown; the colour is a second cue only. */
.oc {
  display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: .72rem; line-height: 1.35; white-space: nowrap;
}
.oc-taxpayer { background: #e3f1e8; color: #17613a; border-color: #b8dcc6; }
.oc-revenue  { background: #fbe7e7; color: #9b1c1c; border-color: #f0bcbc; }
.oc-partly   { background: #fdf1d9; color: #7a4a00; border-color: #efd49a; }
.oc-remanded { background: #e8e9f8; color: #3b3f9e; border-color: #c7caee; }
.oc-other    { background: #eef1f5; color: #4a5568; border-color: #d3d9e2; }
.oc-big { font-size: .85rem; padding: 3px 11px; }
.oc-note { margin-left: 6px; color: var(--muted); font-weight: 500; }

.jw { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; max-width: 1500px; }
.jl-side {
  position: sticky; top: 16px; margin-top: 14px; padding: 14px 8px 10px 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
}
.jl-lists { position: relative; max-height: calc(100vh - 190px); overflow: auto; padding-right: 6px; margin-right: -2px; }
.jl-toggle { display: none; }
.jl-side .gm-side-h span { color: var(--muted); font-weight: 600; }
.jl-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; margin-top: 8px; border-radius: 10px; background: var(--page); border: 1px solid var(--line); }
.jl-seg button { border: 0; background: transparent; border-radius: 7px; padding: 8px 4px; font: inherit; font-size: .8rem; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.jl-seg button.is-on { background: var(--brand-gradient); color: #fff; }
.jl-find { width: 100%; margin: 8px 0 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: .85rem; background: var(--surface); color: var(--ink); }
.jl-grp { border-top: 1px solid var(--line-2); }
.jl-grp summary { cursor: pointer; padding: 9px 2px; font-size: .84rem; font-weight: 600; color: var(--ink-2); }
.jl-grp summary b { color: var(--brand-violet); margin-right: 3px; }
.jl-grp summary span { float: right; color: var(--muted); font-weight: 400; font-size: .78rem; }
.jl-row { display: flex; gap: 10px; align-items: flex-start; padding: 7px 8px; margin: 0 0 2px; border-radius: 8px; color: var(--ink); font-size: .84rem; line-height: 1.3; }
.jl-row:hover { background: var(--tint); text-decoration: none; }
.jl-row.is-on { background: var(--brand-gradient); color: #fff; }
.jl-row.is-on small, .jl-row.is-on .jl-n { color: #fff; background: rgba(255,255,255,.18); }
.jl-n { flex: none; min-width: 3em; text-align: center; font-weight: 700; font-size: .76rem; padding: 2px 4px; border-radius: 4px; background: var(--tint); color: var(--brand-violet); font-variant-numeric: tabular-nums; }
.jl-t small { display: block; color: var(--muted); font-size: .74rem; margin-top: 2px; }
.jl-row[hidden], .jl-grp[hidden] { display: none; }
.jl-none { color: var(--muted); font-size: .85rem; margin: 10px 2px; }
.jv { min-width: 0; }
.jv-h1 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); margin: 4px 0 6px; line-height: 1.25; }
.jv-topic { margin: 0 0 10px; color: var(--ink-2); max-width: 85ch; }
.jv-ways { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; }
.jv-sp { flex: 1 1 auto; }
.jv-doc .pv { border-top: 1px solid var(--line); border-radius: 14px; }
.jv-doc.has-viewer .jv-fallback { display: none; }
.jv-video { margin: 22px 0 0; }
.jv .tx-promo { margin-top: 22px; }

/* the marking tools */
.pv-markbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 10px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.pv-toolset { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 9px; background: var(--page); }
.pv-t.is-on { background: var(--brand-gradient); color: #fff; }
.pv-t.is-on:hover { color: #fff; }
.pv-swatches { display: flex; gap: 6px; }
.pv-swatches[hidden] { display: none; }
.pv-sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--surface); background: var(--sw); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.pv-sw.is-on { box-shadow: 0 0 0 2px var(--brand-blue); }
.pv-markacts { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.pv-mcount { font-size: .78rem; color: var(--muted); margin: 0 6px; white-space: nowrap; }
.pv-dlmine {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--brand-violet); background: var(--surface); color: var(--brand-violet); font: inherit; font-weight: 600; font-size: .82rem;
}
.pv-dlmine svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pv-dlmine:disabled { color: var(--muted); border-color: var(--line); cursor: default; }
.pv-mnote { flex-basis: 100%; margin: 0; font-size: .74rem; color: var(--muted); }
.pv-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.pv-ink .pv-hlr { mix-blend-mode: multiply; opacity: .45; } /* not-text */
.pv-pad { position: absolute; inset: 0; z-index: 3; display: none; touch-action: none; }
.pv[data-tool="pen"] .pv-pad { display: block; cursor: crosshair; }
.pv[data-tool="erase"] .pv-pad { display: block; cursor: cell; }
.pv[data-tool="hl"] .textLayer { cursor: text; }
.pv[data-tool="hl"] .textLayer ::selection { background: rgba(255, 212, 0, .45); }

/* the header menu: a label never breaks over two lines (it did at about
   1,500px, "GSTAT / Benches") */
.site-nav a { white-space: nowrap; }

@media (max-width: 900px) {
  .jw { grid-template-columns: 1fr; gap: 12px; }
  .jl-side { position: static; margin-top: 8px; padding: 0; }
  .jl-toggle {
    display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 14px;
    border: 0; background: transparent; font: inherit; font-weight: 700; font-size: .92rem; color: var(--ink); cursor: pointer;
  }
  .jl-toggle span { color: var(--muted); font-weight: 600; }
  .jl-body { display: none; padding: 0 12px 12px; }
  .jl-lists { max-height: 60vh; }
  .jl-side.is-open .jl-body { display: block; }
  .jl-side .gm-side-h { display: none; }
  .jv-ways .btn { padding: 8px 11px; }
}
@media (max-width: 760px) {
  .pv-markbar { gap: 6px; }
  .pv-dlmine span { display: none; }
  .pv-mnote { display: none; }
}
.jl-view[hidden] { display: none; }
.jv-vlink { white-space: nowrap; }
/* the page box: no spinner arrows - the buttons beside it do that, and the
   arrows only changed the number without turning the page */
.pv-no { -moz-appearance: textfield; appearance: textfield; }
.pv-no::-webkit-outer-spin-button, .pv-no::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Order | Summary on a judgment's View page */
.jv-tabs { margin-top: 2px; }
.jv-tabs + .jv-doc .pv, .jv-tabs ~ .jv-doc .pv { border-top: 0; border-radius: 0 0 14px 14px; }
.jv-doc[hidden] { display: none; }
/* the High Courts, each a group inside the court list */
.jl-grp .jl-grp { border-top: 0; margin-left: 12px; }
.jl-grp .jl-grp summary { font-weight: 500; }
/* The latest-judgments strip and the home page's section headings (16 Oct 2026). */
.tk { display: flex; align-items: stretch; background: #0f1d3d; color: #e8edf7; border-bottom: 1px solid #1d2f5c; font-size: .86rem; overflow: hidden; }
.tk-k { flex: none; display: flex; align-items: center; padding: 0 16px; background: var(--brand-gradient, linear-gradient(90deg, #2a8cff, #7a4bd8)); color: #fff; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; }
.tk-view { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.tk-track { display: inline-flex; white-space: nowrap; animation: tk 320s linear infinite; padding: 9px 0; }
.tk-dup { display: inline-flex; }
.tk-view:hover .tk-track, .tk-view:focus-within .tk-track { animation-play-state: paused; }
.tk-track a { color: #e8edf7; padding: 0 26px; position: relative; text-decoration: none; }
.tk-track a::after { content: ""; position: absolute; right: 0; top: 50%; width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: #5b7bd1; }
.tk-track a b { color: #8fb8ff; font-weight: 700; margin-right: 6px; }
.tk-track a:hover, .tk-track a:focus-visible { text-decoration: underline; }
@keyframes tk { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tk-view { overflow-x: auto; } .tk-track { animation: none; } .tk-dup { display: none; } }
.hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 56px 0 14px; padding-bottom: 12px; border-bottom: 2px solid var(--line, #dfe5f0); }
.hd h2 { font-size: var(--step-3, 1.9rem); margin: 0; }
.hd-e { margin: 0 0 4px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-violet, #6a45d0); }
.hd-s { margin: 6px 0 0; color: var(--muted, #5b6578); max-width: 60ch; }
.hd-a { font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) { .hd { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 40px; } }
/* The video of a judgment as a tab, and the play mark in the side list (16 Oct 2026). */
.jl-n { position: relative; }
.jl-n .gm-v { top: 2px; right: 2px; }
.jl-row.is-on .gm-v { border-left-color: #fff; }
.jv-doc--v { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; padding: 16px 18px 20px; background: var(--surface, #fff); }
.jv-doc--v .gc-sub { margin: 0 0 12px; }
.jv-doc--v .jv-video { margin: 0; }
/* A circular with its videos, in the Videos tab of a GST Law page (16 Oct 2026). */
.lw .gm-panel--v { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; padding: 18px; background: var(--surface, #fff); }
.cv-item { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 0 0 14px; }
.cv-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.cv-no { margin: 0; font-weight: 700; font-size: 1.05rem; }
.cv-sub { margin: 6px 0 12px; color: var(--muted); }

/* GST Forms (17 Oct 2026): the list's category chips; a category page's tabs - named up to five forms,
   numbered beyond - the line naming the open form; on a phone a category select and a form picker. */
.fm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.fm-chip { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: .84rem; color: var(--ink); background: var(--surface); }
.fm-chip b { color: var(--brand-blue); }
.fm-chip span { color: var(--muted); font-size: .76rem; }
.fm-chip:hover { border-color: var(--brand-blue); text-decoration: none; }
.lw-side h2 a { color: inherit; }
.fm-h1n { font-family: var(--sans); font-weight: 500; font-size: 1rem; letter-spacing: 0; color: var(--muted); white-space: nowrap; }
.gm-tabs.fm-num { gap: 6px; border-bottom: 0; padding: 2px 0 10px; }
.gm-tabs.fm-num .gm-tab { min-width: 44px; justify-content: center; padding: 7px 10px; margin: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: .86rem; box-shadow: none; }
.gm-tabs.fm-num .gm-tab.is-on { background: var(--tint); border-color: var(--brand-blue); color: var(--brand-blue); }
.fm-line { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: .92rem; color: var(--ink-2); }
.fm-line span { color: var(--muted); }
.fm-cat, .fm-pick { display: none; }
.fm-pick { gap: 8px; align-items: center; margin: 4px 0 12px; }
.fm-pick select, .fm-cat select { min-width: 0; flex: 1; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: .95rem; background: var(--surface); color: var(--ink); }
.fm-pick button { flex: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.fm-pick button:disabled { opacity: .4; cursor: default; }
.fm-cat { margin: 0 0 12px; }
@media (max-width: 900px) {
  .lw.fm .lw-side { display: none; }
  .fm-cat { display: block; }
  .gm-tabs.fm-num { display: none; }
  .fm-pick { display: flex; }
}

/* The five-column lists on a phone (GST Instructions, GST Forms; 17 Oct 2026): the Council's card
   is laid out for four columns, and squeezed the topic and the authority into one-letter columns.
   Here a row is the number, the subject beside it, and a small line of the rest under it. */
@media (max-width: 760px) {
  .gc-list--5 tbody tr:not(.jt-empty) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0; row-gap: 4px; }
  .gc-list--5 tbody td:nth-child(n) { grid-row: auto; grid-column: auto; display: block; font-size: .82rem; color: var(--muted); }
  .gc-list--5 tbody td:nth-child(1) { order: 0; flex: 0 0 40px; }
  .gc-list--5 tbody td:nth-child(5) { order: 1; flex: 1 1 calc(100% - 40px); font-size: .95rem; color: var(--ink); }
  .gc-list--5 tbody td:nth-child(2), .gc-list--5 tbody td:nth-child(3), .gc-list--5 tbody td:nth-child(4) { order: 2; }
  .gc-list--5 tbody td:nth-child(2) { margin-left: 40px; }
  .gc-list--5 tbody td:nth-child(3)::before, .gc-list--5 tbody td:nth-child(4)::before { content: "\00b7"; margin: 0 6px; }
  .gc-list--5 tbody td:nth-child(3)::after { content: none; }
  .gc-list--5 .jt-none { display: none; }
  .gc-list--forms tbody td:nth-child(3) { order: 1; flex: 1 1 calc(100% - 40px); font-size: .95rem; }
  .gc-list--forms tbody td:nth-child(3)::before { content: none; }
  .gc-list--forms tbody td:nth-child(5) { order: 2; flex: 1 1 calc(100% - 40px); margin-left: 40px; font-size: .88rem; color: var(--ink-2); }
  .gc-list--forms tbody td:nth-child(2) { order: 3; }
  .gc-list--forms tbody td:nth-child(2) { margin-left: 40px; }
  .gc-list--forms tbody td:nth-child(4) { order: 4; }
}

/* A detail the owner has not given yet, in a draft legal page (17 Oct 2026). */
mark.legal-gap { background: #fff3bf; color: #7c4a00; padding: 0 4px; border-radius: 4px; }

/* ============================================================ GST News (18 Oct 2026)
   ni-: the GST News page; nw-: a story, in the layout of the ai.taxbykk.com insights. */
.ni { max-width: 900px; margin: 0 auto; }
.ni-hero h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 6px 0; }
.ni-hero .tg { font-size: 1.15rem; font-weight: 700; color: var(--brand-violet); margin: 0 0 8px; }
.ni-hero p { color: var(--muted); max-width: 68ch; margin: 0 0 18px; }
.ni-secs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 6px; padding: 0 0 14px; border-bottom: 2px solid var(--line); }
.ni-secs span.l { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.ni-sec { font-weight: 700; font-size: .92rem; border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; background: var(--surface); color: var(--ink); text-decoration: none; }
.ni-sec.on { background: var(--brand-gradient); color: #fff; border-color: transparent; }
.ni-h2 { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 0 10px; }
.ni-h2 h2 { margin: 0; font-size: 1.2rem; }
.ni-grp { display: flex; align-items: baseline; justify-content: space-between; margin: 28px 0 10px; border-bottom: 2px solid var(--line); padding-bottom: 6px; }
.ni-grp h2 { margin: 0; font-size: 1.2rem; }
.ni-card { display: block; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin: 0 0 12px; background: var(--surface); color: inherit; text-decoration: none; }
.ni-card:hover { border-color: var(--brand-blue); }
.ni-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; }
.ni-tag { font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; border-radius: 99px; padding: 2px 10px; background: var(--tint); color: var(--brand-blue); }
.ni-st { font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border-radius: 99px; padding: 2px 10px; background: #fff3d6; color: #9a6200; }
.ni-st.ev { background: #e3f6ec; color: #0f7a4d; }
.ni-st.pr { background: #e4eefc; color: #1f5fbf; }
.ni-date { margin-left: auto; font-size: .82rem; color: var(--muted); }
.ni-card h3 { margin: 0 0 6px; font-size: 1.12rem; line-height: 1.3; color: var(--ink); }
.ni-card p { margin: 0 0 10px; color: var(--ink-2); font-size: .93rem; line-height: 1.5; }
.ni-go { font-size: .86rem; font-weight: 700; color: var(--brand-blue); }
.ni-go span { color: var(--muted); font-weight: 500; margin-right: 10px; }
.ni-note { font-size: .84rem; color: var(--muted); margin: 26px 0; }

.nw-wrap { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 34px; align-items: start; max-width: 1080px; margin: 0 auto; }
.nw-toc { position: sticky; top: 16px; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--surface); font-size: .88rem; margin-top: 8px; }
.nw-toc h2 { margin: 0 0 8px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nw-toc ol { margin: 0; padding-left: 18px; }
.nw-toc li { margin: 5px 0; line-height: 1.3; }
.nw-toc a { color: var(--ink-2); }
.nw-toc a:hover { color: var(--brand-blue); }
.nw-kick { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.nw-tag { font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; border-radius: 99px; padding: 3px 11px; background: var(--tint); color: var(--brand-blue); }
.nw-tag--dark { background: #0f1d3d; color: #fff; }
.nw-tag.red { background: #fdeaea; color: #b4232a; }
.nw-tag.amber { background: #fff3d6; color: #9a6200; }
.nw-tag.blue { background: #e4eefc; color: #1f5fbf; }
.nw h1 { font-size: clamp(1.55rem, 3.2vw, 2.2rem); line-height: 1.18; margin: 0 0 8px; }
.nw-meta { color: var(--muted); font-size: .9rem; margin: 0 0 14px; }
.nw-meta2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 0 0 16px; background: var(--surface); }
.nw-meta2 div { padding: 10px 14px; border-right: 1px solid var(--line); font-size: .86rem; }
.nw-meta2 div:last-child { border-right: 0; }
.nw-meta2 b { display: block; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.nw-short { font-size: 1.05rem; line-height: 1.55; margin: 0 0 18px; }
.nw-short b { color: var(--brand-violet); }
.nw-key { border: 1px solid #c9d7f5; background: #f1f6ff; border-radius: 14px; padding: 16px 20px; margin: 0 0 8px; }
.nw-key h2 { margin: 0 0 8px !important; font-size: 1.1rem; }
.nw-key ul { margin: 0; padding-left: 20px; }
.nw-key li { margin: 5px 0; }
.nw h2 { margin: 26px 0 8px; font-size: 1.25rem; scroll-margin-top: 16px; }
.nw p, .nw li { line-height: 1.55; }
.nw-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 12px 0; counter-reset: s; }
.nw-step { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--surface); font-size: .88rem; }
.nw-step::before { counter-increment: s; content: counter(s); display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-gradient); color: #fff; font-weight: 800; font-size: .78rem; align-items: center; justify-content: center; margin-bottom: 6px; }
.nw-law, .nw-tbl { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 8px 0; }
.nw-law td, .nw-law th { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.nw-tbl th { background: var(--tint); text-align: left; padding: 9px 12px; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
.nw-tbl td { border-bottom: 1px solid var(--line); padding: 9px 12px; vertical-align: top; }
.nw-rel { display: grid; gap: 8px; }
.nw-rel a { display: block; border: 1px solid var(--line); border-left: 3px solid var(--brand-violet); border-radius: 10px; padding: 10px 14px; color: inherit; text-decoration: none; background: var(--surface); }
.nw-rel a:hover { border-color: var(--brand-blue); }
.nw-rel small { color: var(--muted); display: block; }
.nw-rel b { color: var(--brand-violet); margin-right: 6px; }
.nw-tl { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--line); }
.nw-tl li { padding: 0 0 14px 16px; position: relative; }
.nw-tl li::before { content: ""; position: absolute; left: -6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-blue); }
.nw-tl .pending::before { background: #cbd5e1; }
.nw-faq details { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 0 0 8px; background: var(--surface); }
.nw-faq summary { cursor: pointer; font-weight: 700; }
.nw-src li { margin: 4px 0; overflow-wrap: anywhere; }
.nw-note { font-size: .85rem; color: var(--muted); margin-top: 10px; }
.nw-small { font-size: .85rem; color: var(--muted); font-style: italic; }
.nw-edit { border-left: 4px solid var(--brand-violet); background: var(--tint); padding: 12px 16px; border-radius: 0 10px 10px 0; font-size: .9rem; margin: 24px 0; }
@media (max-width: 900px) {
  .nw-wrap { display: block; }
  .nw-toc { position: static; margin: 0 0 16px; }
  .nw-tbl, .nw-law { display: block; overflow-x: auto; }
}

/* The home page's band for CS K K Agrawal and the TaxByKK Litigation Consultant Network (18 Oct 2026). */
.ow { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px 28px; }
.ow-top { display: grid; grid-template-columns: 132px 1fr; gap: 26px; align-items: center; }
.ow-face { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; }
.ow-kick { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-violet); }
.ow-nm { font-family: var(--serif); font-size: 1.9rem; margin: 4px 0 2px; }
.ow-ti { margin: 0; font-weight: 700; color: var(--ink); }
.ow-ti span { font-weight: 500; color: var(--muted); }
.ow-line { font-family: var(--serif); font-size: 1.15rem; margin: 12px 0 4px; color: var(--ink); }
.ow-about { margin: 0; color: var(--ink-2); line-height: 1.55; max-width: 70ch; }
.ow-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0 0; }
.ow-team div { border-radius: 12px; padding: 14px 8px; text-align: center; background: var(--tint); border: 1px solid var(--line); }
.ow-team b { display: block; font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--brand-violet); }
.ow-team span { display: block; margin-top: 6px; font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.ow-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: .9rem; }
.ow-sites small { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; }
@media (max-width: 700px) {
  .ow { padding: 20px 16px; }
  .ow-top { grid-template-columns: 1fr; gap: 14px; }
  .ow-face { width: 96px; height: 96px; }
  .ow-team { grid-template-columns: repeat(2, 1fr); }
}

.nw-dl { margin: 0 0 12px; }
.nw-dl .btn { display: inline-flex; align-items: center; gap: 6px; }

/* The GST News table on a phone (18 Oct 2026): a card per story - the headline first, then the
   date, the update and the category on one line, then VIEW and TEXT. Filters: category and
   headline; the two date boxes are left to the wide screen. */
@media (max-width: 760px) {
  .gc-list--news .jt-filters th:nth-child(1), .gc-list--news .jt-filters th:nth-child(2),
  .gc-list--news .jt-filters th:nth-child(5), .gc-list--news .jt-filters th:nth-child(6) { display: none; }
  .gc-list--news .jt-filters th:nth-child(3), .gc-list--news .jt-filters th:nth-child(4) { display: block; }
  .gc-list--news tbody tr:not(.jt-empty) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; padding: 14px 2px; }
  .gc-list--news tbody td:nth-child(n) { grid-row: auto; grid-column: auto; display: block; font-size: .82rem; color: var(--muted); }
  .gc-list--news tbody td:nth-child(4) { order: 0; flex: 1 1 100%; font-size: .98rem; color: var(--ink); line-height: 1.35; }
  .gc-list--news tbody td:nth-child(1) { order: 1; }
  .gc-list--news tbody td:nth-child(2) { order: 2; }
  .gc-list--news tbody td:nth-child(2)::before { content: "\00b7"; margin: 0 6px; }
  .gc-list--news tbody td:nth-child(2) time::before { content: "Updated "; }
  .gc-list--news tbody td:nth-child(3) { order: 3; }
  .gc-list--news tbody td:nth-child(3)::before { content: "\00b7"; margin: 0 6px; }
  .gc-list--news tbody td:nth-child(3)::after { content: none; }
  .gc-list--news tbody td:nth-child(5) { order: 4; flex: 0 0 auto; margin: 6px 8px 0 0; }
  .gc-list--news tbody td:nth-child(6) { order: 5; flex: 0 0 auto; margin-top: 6px; }
}
.gc-list--news .nw-hl { color: inherit; font-weight: 600; }
.gc-list--news .nw-hl:hover { color: var(--brand-blue); }

/* The GST News page's header (owner, 18 Oct 2026: "News · Interpretation · Impact"). */
.nh .nh-k { margin: 6px 0 10px; font-size: .85rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-violet); }
.nh .nh-t { margin: 0 0 6px; font-family: var(--serif); font-size: 1.35rem; line-height: 1.3; color: var(--ink); }
.nh .sub { margin-bottom: 8px; }
.nh .nh-f { margin: 0; font-size: .82rem; color: var(--muted); }

/* ===================================================== Home rail and Connector card (18 Oct 2026)
   pr-: the strip under the menu on the home page - the latest judgments and GST News, tagged;
   cx-: the TaxByKK Connector card under the hero, with the Claude mark. */
:root { --pr-ink: #0a1226; --pr-ink-2: #121c38; --pr-gold: #d9b45b; --pr-gold-2: #f3dfa6; --pr-line: rgba(217,180,91,.35); }
.pr { position: relative; background: linear-gradient(180deg, var(--pr-ink-2), var(--pr-ink)); color: #e9edf7;
      border-top: 1px solid var(--pr-line); border-bottom: 1px solid var(--pr-line); box-shadow: 0 10px 30px -18px rgba(10,18,38,.9); }
.pr::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(1200px 60px at 15% 0%, rgba(217,180,91,.10), transparent 60%); }
.pr-row { display: flex; align-items: center; height: 52px; }
.pr-lab { flex: none; display: flex; align-items: center; gap: 12px; padding-right: 18px; margin-right: 6px; height: 100%; border-right: 1px solid rgba(255,255,255,.10); text-decoration: none; }
.pr-live { width: 7px; height: 7px; border-radius: 50%; background: #ff5a5f; box-shadow: 0 0 0 0 rgba(255,90,95,.6); animation: pr-pulse 2s infinite; }
@keyframes pr-pulse { 70% { box-shadow: 0 0 0 8px rgba(255,90,95,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,95,0); } }
.pr-name { font: 800 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--pr-ink); padding: 7px 12px; border-radius: 999px; white-space: nowrap;
      background: linear-gradient(180deg, var(--pr-gold-2), var(--pr-gold)); box-shadow: 0 2px 10px -2px rgba(217,180,91,.55); }
.pr-win { position: relative; flex: 1; height: 100%; overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.pr-track { position: absolute; top: 0; bottom: 0; left: 0; display: flex; align-items: center; white-space: nowrap; will-change: transform; animation: pr-run 280s linear infinite; }
.pr-dup { display: contents; }
.pr:hover .pr-track, .pr:focus-within .pr-track { animation-play-state: paused; }
@keyframes pr-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pr-i { display: inline-flex; align-items: baseline; gap: 10px; padding: 0 20px; color: #e9edf7; text-decoration: none; font-family: var(--serif); font-size: 1rem; }
.pr-i time { font: 700 .66rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--pr-gold); }
.pr-i:hover span { color: #fff; text-decoration: underline; text-decoration-color: var(--pr-gold); text-underline-offset: 4px; }
.pr-tag { font: 800 .6rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 4px 7px; border-radius: 5px; align-self: center; }
.pr-tag--n { color: var(--pr-ink); background: var(--pr-gold); }
.pr-tag--j { color: var(--pr-gold-2); border: 1px solid rgba(217,180,91,.5); }
.pr-sep { color: var(--pr-gold); opacity: .55; font-size: .55rem; font-style: normal; }
.pr-all { flex: none; display: flex; align-items: center; gap: 8px; padding-left: 18px; margin-left: 6px; height: 100%; border-left: 1px solid rgba(255,255,255,.10);
      font: 700 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--pr-gold-2); text-decoration: none; white-space: nowrap; }
.pr-all:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .pr-track { animation: none; position: static; overflow-x: auto; } .pr-win { overflow-x: auto; } }
@media (max-width: 760px) { .pr-row { height: 48px; } .pr-all { display: none; } .pr-i { font-size: .92rem; } .pr-name { letter-spacing: .12em; padding: 6px 9px; } }

.cx { margin: 8px auto 36px; }
.cx-card { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: 22px 26px; border-radius: 18px; color: #fff;
      background: linear-gradient(120deg, #0a1226 0%, #1a2a5e 55%, #3b2a7a 100%); border: 1px solid rgba(217,180,91,.30); box-shadow: 0 18px 40px -24px rgba(10,18,38,.8); }
.cx-card::after { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(217,180,91,.22), transparent 70%); pointer-events: none; }
.cx-ic { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: #f5f0e6; border: 1px solid rgba(217,119,87,.35); }
.cx-ic img { width: 34px; height: 34px; display: block; }
.cx-k { font: 700 .66rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--pr-gold); margin: 0 0 6px; }
.cx-t { font-family: var(--serif); font-size: 1.3rem; line-height: 1.25; margin: 0; color: #fff; }
.cx-s { margin: 4px 0 0; color: rgba(233,237,247,.75); font-size: .9rem; }
.cx-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 12px; text-decoration: none; white-space: nowrap;
      font-weight: 800; color: var(--pr-ink); background: linear-gradient(180deg, var(--pr-gold-2), var(--pr-gold)); box-shadow: 0 6px 18px -6px rgba(217,180,91,.7); }
.cx-btn:hover { filter: brightness(1.05); color: var(--pr-ink); }
@media (max-width: 760px) { .cx-card { grid-template-columns: 1fr; gap: 14px; padding: 20px; } .cx-ic { display: none; } }

/* ============================================================== Account page (19 Oct 2026) */
.ac { max-width: 1000px; margin: 0 auto; }
.ac-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: start; }
.ac-card { border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; background: var(--surface); }
.ac-card h2 { margin: 0 0 8px; font-size: 1.3rem; }
.ac-card h3 { margin: 0 0 10px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ac-signin { max-width: 520px; }
.ac-small { font-size: .84rem; color: var(--muted); line-height: 1.5; margin: 8px 0 0; }
.ac-note { margin: 0 0 14px; padding: 11px 14px; border-radius: 10px; background: var(--tint); font-size: .92rem; }
.ac-note--bad { background: #fdeaea; color: #8f1d22; }
.ac-g { display: inline-flex; align-items: center; gap: 10px; border: 1px solid #dadce0; background: #fff; border-radius: 10px; padding: 11px 18px; margin: 6px 0 4px; font: 600 .95rem system-ui, sans-serif; color: #1f1f1f; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ac-g:hover { box-shadow: 0 2px 8px rgba(0,0,0,.14); color: #1f1f1f; }
.ac-g svg { width: 20px; height: 20px; }
.ac-who { display: flex; gap: 14px; align-items: center; margin: 0 0 6px; }
.ac-who img, .ac-av { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.ac-av { background: var(--brand-gradient); color: #fff; display: grid; place-items: center; font-weight: 800; }
.ac-kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 12px; font-size: .92rem; margin: 14px 0 0; }
.ac-kv dt { color: var(--muted); } .ac-kv dd { margin: 0; font-weight: 600; }
.ac-cancel { border: 1px solid #e3b4b4; color: #b4232a; border-radius: 10px; padding: 9px 16px; font-weight: 700; background: #fff; cursor: pointer; }
.ac-cancel:disabled, .ac-body .btn:disabled { opacity: .6; cursor: default; }
.ac-out { border: 0; background: none; color: var(--brand-blue); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.ac-rcp { width: 100%; font-size: .88rem; border-collapse: collapse; }
.ac-rcp td { padding: 7px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 800px) { .ac-grid { grid-template-columns: 1fr; } .ac-kv { grid-template-columns: 120px 1fr; } }

/* ============================================ The full-width search row and the header tools (19 Oct 2026)
   The search left the header for a row of its own under it (above the Connector band; under the Latest
   Judgment strip on the home page). The header keeps a magnifier that brings the row back and focuses it, and,
   when SIGNIN_IN_MENU is on, Sign in or the reader's initial. These rules come last and replace the old
   "search shares the header" grid at every width. */
.hd-tools { display: flex; align-items: center; gap: 6px; margin-left: 18px; flex: none; }
.hd-ico { all: unset; cursor: pointer; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--ink-2); }
.hd-ico .ico { width: 18px; height: 18px; stroke: currentColor; }
.hd-ico:hover { background: var(--tint); color: var(--brand-blue); }
.hd-ico:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.hd-signin { font-weight: 700; font-size: .9rem; padding: 7px 17px; border-radius: 999px; border: 1.5px solid var(--brand-blue); color: var(--brand-blue); white-space: nowrap; }
.hd-signin:hover { background: var(--brand-blue); color: #fff; text-decoration: none; }
.hd-acct { position: relative; }
.hd-av { all: unset; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 800 .85rem var(--sans); color: #fff; background: var(--brand-gradient); }
.hd-av--sub { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #d9b45b; }
.hd-av:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 4px; }
.hd-menu { position: absolute; right: 0; top: 46px; z-index: 70; width: 270px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 8px; box-shadow: 0 18px 40px -16px rgba(10,18,38,.45); }
.hd-menu[hidden] { display: none; }
.hd-menu a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--ink); font-size: .92rem; }
.hd-menu a:hover { background: var(--tint); text-decoration: none; }
.hd-menu a.hd-menu-sub { font-weight: 800; color: #7c4a00; background: #fff8e6; }
.hd-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.hd-menu-id { padding: 8px 12px 10px; display: grid; gap: 1px; }
.hd-menu-id span { color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }
.hd-chip { font-style: normal; justify-self: start; margin-top: 6px; font: 800 .62rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 99px; background: var(--tint); color: var(--brand-blue); }
.hd-chip--sub { background: #fff3d6; color: #7c4a00; }

.fs-row { background: linear-gradient(180deg, #eef3fc, #f6f9fe); border-bottom: 1px solid var(--line); padding: 14px 0; }
.search.fs-box { min-width: 0; width: 100%; box-sizing: border-box; gap: 14px; padding: 13px 20px; border: 1.5px solid #cdd8ee; border-radius: 14px; background: var(--surface); box-shadow: 0 10px 26px -20px rgba(10,18,38,.7); }
.search.fs-box .ico { width: 21px; height: 21px; stroke: var(--brand-blue); flex: none; }
.search.fs-box input { font-size: 1.02rem; min-height: 28px; }
.search.fs-box .kbd { display: inline-block; font-size: .76rem; padding: 2px 8px; border-radius: 6px; }
.search.fs-box:focus-within .kbd { display: none; }
.fs-box .search-panel { left: 0; right: 0; width: auto; }

@media (max-width: 1360px) {
  .header-row { grid-template-areas: "brand nav tools"; padding-bottom: 0; }
  .hd-tools { grid-area: tools; margin-left: 12px; }
}
@media (max-width: 900px) {
  .header-row { grid-template-columns: 1fr auto auto; grid-template-areas: "brand tools toggle" "drawer drawer drawer"; }
  .nav-toggle { grid-area: toggle; margin-left: 0; }
  .hd-tools { margin-left: 0; gap: 4px; }
  .fs-row { padding: 10px 0; }
  .search.fs-box { padding: 11px 16px; }
  .search.fs-box .kbd { display: none; }
  .hd-signin { padding: 6px 12px; font-size: .85rem; }
}

/* ------------------------------------------------------------------ the download lock (owner, 19 Oct 2026) */
.hd-signin[hidden] { display: none !important; }
.rc-note { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 10px; padding: 9px 14px; border: 1px solid #c9d7f5; background: #f1f6ff; border-radius: 12px; font-size: .88rem; line-height: 1.45; color: var(--ink-2); }
.rc-note > span:last-child { flex: 1 1 280px; }
.rc-tag { font: 800 .64rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--brand-blue); border-radius: 99px; padding: 5px 9px; }
.pv--locked .pv-dl::before, .pv--locked .pv-dlmine::before { content: "\1F512"; font-size: .78em; margin-right: 2px; }
.lk-back { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(10, 18, 38, .38); }
.lk-pop { position: relative; width: 100%; max-width: 440px; box-sizing: border-box; border: 1px solid #e8d6a0; background: #fffdf5; border-radius: 16px; padding: 20px 22px 18px; box-shadow: 0 24px 50px -22px rgba(10, 18, 38, .6); font-size: .93rem; color: var(--ink-2); }
.lk-tag { display: inline-block; font: 800 .64rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #7c4a00; background: #fbe9b8; border-radius: 99px; padding: 5px 9px; margin-bottom: 8px; }
.lk-t { display: block; font-size: 1.05rem; color: var(--ink); padding-right: 26px; }
.lk-pop p { margin: 6px 0 14px; line-height: 1.5; }
.lk-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lk-g { display: inline-flex; align-items: center; gap: 9px; border: 1px solid #dadce0; background: #fff; border-radius: 10px; padding: 9px 16px; font: 600 .92rem system-ui, sans-serif; color: #1f1f1f; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); text-decoration: none; }
.lk-gold { display: inline-block; font-weight: 800; padding: 9px 20px; border-radius: 10px; color: #0a1226; background: linear-gradient(180deg, #f3dfa6, #d9b45b); box-shadow: 0 6px 16px -8px rgba(217, 180, 91, .9); text-decoration: none; }
.lk-link { font-size: .88rem; font-weight: 700; color: var(--brand-blue); text-decoration: underline; }
.lk-soon { font-weight: 700; color: #7c4a00; }
.lk-x { all: unset; position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-size: 1.3rem; color: var(--muted); cursor: pointer; }
.lk-x:hover, .lk-x:focus-visible { background: rgba(0, 0, 0, .06); }

/* ------------------------------------------------------------------ the Pricing page, premium (owner, 19 Oct 2026) */
.pz-hero { position: relative; overflow: hidden; color: #e8eefc; background: radial-gradient(1200px 420px at 85% -10%, rgba(217, 180, 91, .22), transparent 60%), radial-gradient(900px 500px at 0% 120%, rgba(37, 159, 248, .25), transparent 60%), linear-gradient(160deg, #0a1430 0%, #0f1f4a 55%, #142a63 100%); padding: 26px 0 54px; }
.pz-hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(180deg, #000, transparent 85%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); pointer-events: none; }
.pz-hero-in { position: relative; z-index: 1; }
.pz-crumb ol, .pz-crumb a, .pz-crumb span { color: #a9b7d8; }
.pz-eyebrow { margin: 26px 0 10px; font: 800 .72rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #e9cf86; }
.pz-h1 { margin: 0; max-width: 820px; font: 800 clamp(2rem, 4.6vw, 3.4rem)/1.08 var(--sans); letter-spacing: -.02em; color: #fff; }
.pz-h1 span { background: linear-gradient(100deg, #f6e3a8, #d9b45b 60%, #f3dfa6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pz-lead { max-width: 680px; margin: 16px 0 26px; font-size: 1.08rem; line-height: 1.6; color: #c8d3ee; }
.pz-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: 12px; font-weight: 800; font-size: .98rem; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.pz-btn:hover { text-decoration: none; transform: translateY(-1px); }
.pz-btn--gold { color: #0a1226; background: linear-gradient(180deg, #f6e3a8, #d9b45b); box-shadow: 0 10px 26px -10px rgba(217, 180, 91, .85), inset 0 1px 0 rgba(255, 255, 255, .6); }
.pz-btn--gold:hover { box-shadow: 0 14px 30px -10px rgba(217, 180, 91, .95), inset 0 1px 0 rgba(255, 255, 255, .6); }
.pz-btn--ghost { color: #fff; border: 1.5px solid rgba(255, 255, 255, .35); }
.pz-btn--ghost:hover { background: rgba(255, 255, 255, .08); }
.pz-btn--wide { width: 100%; box-sizing: border-box; margin-top: 18px; }
.pz-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; padding: 0; list-style: none; font-size: .88rem; color: #b4c1e0; }
.pz-trust li::before { content: "\2713"; margin-right: 7px; color: #e9cf86; font-weight: 800; }

.pz-wrap { padding-bottom: 40px; }
.pz-plans { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 980px; margin: -34px auto 0; }
.pz-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 28px 28px 22px; box-shadow: 0 24px 50px -34px rgba(10, 20, 48, .55); }
.pz-card--sub { border: 0; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(140deg, #f6e3a8, #d9b45b 40%, #8053cb) border-box; border: 2px solid transparent; box-shadow: 0 30px 60px -30px rgba(124, 90, 20, .55); }
.pz-ribbon { position: absolute; top: -13px; right: 22px; font: 800 .66rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #0a1226; background: linear-gradient(180deg, #f6e3a8, #d9b45b); border-radius: 99px; padding: 7px 12px; box-shadow: 0 8px 18px -8px rgba(217, 180, 91, .9); }
.pz-name { margin: 0; font: 800 .82rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pz-card--sub .pz-name { color: #8a6418; }
.pz-price { margin: 12px 0 2px; font: 800 2.6rem/1 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.pz-price span { font-size: .95rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.pz-for { margin: 6px 0 16px; color: var(--muted); font-size: .93rem; }
.pz-list { flex: 1; margin: 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--line); }
.pz-list li { position: relative; padding: 7px 0 7px 28px; line-height: 1.5; font-size: .95rem; color: var(--ink-2, var(--ink)); }
.pz-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 17px; height: 17px; border-radius: 50%; background: #e6efff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23075dff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.pz-list--gold li::before { background-color: #fbefc9; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6418' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.pz-card-foot { margin: 14px 0 0; font-size: .84rem; color: var(--muted); line-height: 1.5; }

.pz-sec { max-width: 980px; margin: 56px auto 0; }
.pz-h2 { margin: 0 0 18px; font: 800 clamp(1.4rem, 2.6vw, 1.9rem)/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.pz-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.pz-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.pz-table th, .pz-table td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; }
.pz-table tbody tr:last-child th, .pz-table tbody tr:last-child td { border-bottom: 0; }
.pz-table thead th { font: 800 .72rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--tint); }
.pz-table thead .pz-th-sub { color: #8a6418; background: #fbf3dc; }
.pz-table tbody th { font-weight: 600; color: var(--ink); }
.pz-table td { width: 22%; font-weight: 700; }
.pz-y { color: #0f7a4d; } .pz-n { color: #9aa6ba; }
.pz-table td:last-child { background: #fffcf3; }
.pz-note { margin: 14px 2px 0; font-size: .9rem; line-height: 1.6; color: var(--muted); }

.pz-steps { counter-reset: pz; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.pz-steps li { counter-increment: pz; position: relative; padding: 22px 20px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.pz-steps li::before { content: counter(pz); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 50%; font-weight: 800; color: #fff; background: linear-gradient(140deg, #0f1f4a, #075dff); }
.pz-steps b { display: block; font-size: 1.02rem; color: var(--ink); }
.pz-steps span { display: block; margin-top: 6px; font-size: .9rem; line-height: 1.55; color: var(--muted); }

.pz-faq { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.pz-faq details { border-bottom: 1px solid var(--line); }
.pz-faq details:last-child { border-bottom: 0; }
.pz-faq summary { cursor: pointer; list-style: none; position: relative; padding: 17px 52px 17px 20px; font-weight: 700; color: var(--ink); }
.pz-faq summary::-webkit-details-marker { display: none; }
.pz-faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.35rem; font-weight: 500; color: var(--brand-blue); }
.pz-faq details[open] summary::after { content: "\2212"; }
.pz-faq details p { margin: 0; padding: 0 20px 18px; line-height: 1.6; color: var(--muted); }

.pz-end { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: space-between; max-width: 980px; box-sizing: border-box; margin: 56px auto 0; padding: 30px 32px; border-radius: 20px; color: #e8eefc; background: radial-gradient(600px 260px at 100% 0%, rgba(217, 180, 91, .25), transparent 60%), linear-gradient(150deg, #0a1430, #142a63); }
.pz-end h2 { margin: 0; font: 800 1.45rem/1.25 var(--sans); color: #fff; }
.pz-end p { margin: 6px 0 0; color: #b4c1e0; }
.pz-legal { max-width: 980px; margin: 22px auto 0; font-size: .82rem; color: var(--muted); text-align: center; line-height: 1.7; }

@media (max-width: 760px) {
  .pz-hero { padding: 18px 0 46px; }
  .pz-plans { grid-template-columns: 1fr; margin-top: -26px; }
  .pz-card { padding: 24px 20px 20px; }
  .pz-steps { grid-template-columns: 1fr; }
  .pz-table th, .pz-table td { padding: 12px 12px; font-size: .88rem; }
  .pz-end { padding: 24px 20px; }
  .pz-end .pz-btn { width: 100%; }
}

/* the courts map on /court-judgments/ (owner, 19 Oct 2026): dots sized by judgments; the Supreme Court in gold */
.im-pin-courts .im-dot { fill: var(--brand-blue); fill-opacity: .82; stroke: #fff; stroke-width: 2.5; transition: fill-opacity .12s ease; }
.im-pin-courts .im-dot:hover { fill-opacity: 1; }
.im-pin-courts .im-dot-sc { fill: #d9b45b; fill-opacity: .9; stroke: #8a6418; stroke-width: 3; }

/* the price ladder on the Pricing page (owner, 22 Oct 2026) */
.pz-price [data-price] { font-size: inherit; font-weight: inherit; color: inherit; letter-spacing: inherit; }
.pt-badge { margin: 8px 0 0; font-size: .82rem; color: #8a6418; } .pt-badge b { color: #0f7a4d; }
.pt-badge [hidden] { display: none; }
.pt-ladder { max-width: 980px; margin: 44px auto 0; }
.pt-lead { margin: -6px 0 16px; color: var(--muted); }
.pt-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pt-steps li { position: relative; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 6px; opacity: .72; }
.pt-steps li.now { opacity: 1; border: 2px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(140deg, #f6e3a8, #d9b45b 45%, #8053cb) border-box; box-shadow: 0 22px 44px -30px rgba(124, 90, 20, .6); }
.pt-steps li.done { opacity: .5; } .pt-steps li.done b { text-decoration: line-through; }
.pt-tag { font: 800 .66rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pt-steps li.now .pt-tag { color: #8a6418; }
.pt-steps b { font: 800 1.9rem/1.1 var(--sans); color: var(--ink); } .pt-steps b small { font-size: .9rem; font-weight: 600; color: var(--muted); }
.pt-who { font-size: .9rem; color: var(--ink-2, var(--ink)); }
.pt-state { align-self: flex-start; font: 800 .68rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; border-radius: 99px; padding: 6px 10px; background: var(--tint); color: var(--muted); }
.pt-steps li.now .pt-state { background: #e7f6ee; color: #0f7a4d; }
.pt-steps li.done .pt-state { background: #f1f1f1; color: #888; }
.pt-bar { height: 8px; border-radius: 99px; background: var(--tint); overflow: hidden; margin-top: 4px; } .pt-bar[hidden] { display: none; }
.pt-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #d9b45b, #8053cb); }
.pt-count { font-size: .8rem; color: var(--muted); }
@media (max-width: 760px) { .pt-steps { grid-template-columns: 1fr; } }

/* the founding-offer strip on the home page, and the Pricing item in the menu (owner, 22 Oct 2026) */
.of-wrap { margin: 14px auto 0; }
.of-strip { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 11px 18px; border-radius: 14px; text-decoration: none; color: #e8eefc; background: radial-gradient(500px 120px at 100% 0%, rgba(217, 180, 91, .28), transparent 60%), linear-gradient(120deg, #0a1430, #142a63); box-shadow: 0 14px 30px -22px rgba(10, 20, 48, .8); }
.of-strip[hidden] { display: none; }
.of-strip:hover { text-decoration: none; filter: brightness(1.08); }
.of-k { font: 800 .64rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #0a1226; background: linear-gradient(180deg, #f6e3a8, #d9b45b); border-radius: 99px; padding: 6px 11px; white-space: nowrap; }
.of-t { flex: 1 1 280px; font-size: .95rem; color: #d3dcf3; } .of-t b { color: #f6e3a8; font-size: 1.05rem; } .of-dot { color: #7f8db3; margin: 0 4px; }
.of-go { font-weight: 800; font-size: .9rem; color: #f6e3a8; white-space: nowrap; }
@media (max-width: 720px) { .of-strip { padding: 12px 14px; } .of-go { width: 100%; } }