/* ========================================================================== Immigration updates — section stylesheet (web_code, vanilla) Ticket: tkt_20260813_022702_22e4c9d3 Binding spec: design-spec.md (legal intelligence briefing). Scope: the six /immigration-updates pages ONLY. Loaded on no other page, so element-level base rules (body, a, table) are intentionally global here. Theme mechanism (set by an inline pre-paint script, owned by the JS agent): , absent attribute = follow system. Class naming: flat kebab-case, `iu-` prefix. Type scale (the ONLY font-size literals allowed): 11 / 12 / 13 / 14 / 16 / 18 / 20 / 24 / 30 / 38 / 48 Line heights: 14 / 16 / 18 / 20 / 24 / 26 / 28 / 32 / 38 / 44 / 54 Space scale: 2 / 4 / 6 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 56 / 72 Radius: 4 / 6 / 999. Hairline 1px. Kind dash 16x2px. HTML agents: preload the sans + mono woff2 files (rel="preload" as="font" type="font/woff2" crossorigin). ========================================================================== */ /* ========================================================================== 01 · FONT FACES (self-hosted, no external font hosts) ========================================================================== */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; /* variable font, single file */ font-display: swap; src: url('./fonts/ibm-plex-sans-latin-wght-normal.woff2') format('woff2') tech('variations'), url('./fonts/ibm-plex-sans-latin-wght-normal.woff2') format('woff2-variations'); } @font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/ibm-plex-serif-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); } /* ========================================================================== 02 · TOKENS — theme-independent (faces, motion) ========================================================================== */ :root { --iu-font-ui: 'IBM Plex Sans', system-ui, sans-serif; --iu-font-doc: 'IBM Plex Serif', Georgia, serif; --iu-font-num: 'IBM Plex Mono', ui-monospace, monospace; /* R2.1: the ONE content container — 74% of the viewport, capped at 1440. Below 1024px the container falls back to full width + the gutter ladder (see section 07). The old 720/1080 reading bands are retired. */ --iu-container: min(74%, 1440px); --iu-ease: cubic-bezier(0.16, 1, 0.3, 1); --iu-dur-1: 120ms; --iu-dur-2: 180ms; --iu-dur-3: 240ms; } /* ========================================================================== 03 · TOKENS — light (default) Contrast pairs (computed, from spec): --iu-fg #0a1628 on #ffffff = 18.13:1 --iu-fg-secondary #3d4b60 on #fff = 8.85:1 --iu-fg-muted #5a6a80 on #ffffff = 5.51:1 --iu-link #17358b on #ffffff = 10.95:1 --iu-kind-news #174a80 on #ffffff = 9.02:1 --iu-kind-leg #7a6230 on #ffffff = 5.81:1 (brass) --iu-kind-case #155c35 on #ffffff = 8.03:1 ========================================================================== */ :root { color-scheme: light dark; --iu-bg-page: #f7f8fb; --iu-bg-surface: #ffffff; --iu-bg-inset: #eef1f7; --iu-bg-hover: #f7f8fb; --iu-hairline: #dde2ec; /* decorative rules only, never on controls */ --iu-border: #c2cad9; --iu-border-strong:#98a3b8; --iu-border-control:#6f7c93; --iu-fg: #0a1628; /* 18.13:1 on white */ --iu-fg-secondary: #3d4b60; /* 8.85:1 */ --iu-fg-muted: #5a6a80; /* 5.51:1 */ --iu-link: #17358b; /* 10.95:1 */ --iu-link-hover: #112663; --iu-kind-news: #174a80; /* 9.02:1 */ --iu-kind-leg: #7a6230; /* 5.81:1 (brass) */ --iu-kind-case: #155c35; /* 8.03:1 */ --iu-ok-bg:#e9f4ec; --iu-ok-fg:#155c35; --iu-ok-border:#a8d6b8; --iu-warn-bg:#fdf4e4;--iu-warn-fg:#6d4700;--iu-warn-border:#f3d096; --iu-err-bg:#fcedec; --iu-err-fg:#8b1c19; --iu-err-border:#f0b7b3; --iu-info-bg:#eaf2fb;--iu-info-fg:#174a80;--iu-info-border:#a6c8ec; --iu-viz-line: #1f45b4; --iu-viz-up: #1e7a46; --iu-viz-down: #b22622; --iu-viz-grid: #dde2ec; --iu-viz-news: #1f45b4; --iu-viz-leg: #7a6230; --iu-viz-case: #1e7a46; /* R2.4 masthead brand hues — the SAME values in both themes (the logo block is self-coloured brand ground, not a themed surface). */ --iu-brand-block: #1d2a66; --iu-brand-accent: #2563eb; --iu-focus-inner: #0a1628; --iu-focus-outer: #ffc400; /* amber = focus signature, used for NOTHING else */ } :root[data-iu-theme="light"] { color-scheme: light; /* pin form-control rendering when forced light */ } /* ========================================================================== 04 · TOKENS — dark (system preference, unless forced light) Contrast pairs (computed, from spec): --iu-fg #eef1f7 on #0a1628 (surface) = 16.02:1 --iu-fg-muted #98a3b8 on #0a1628 = 7.14:1 --iu-link #85a6f9 on #0a1628 = 7.61:1 ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-iu-theme="light"]) { color-scheme: dark; --iu-bg-page: #060d18; /* not #000 */ --iu-bg-surface: #0a1628; --iu-bg-inset: #122036; --iu-bg-hover: #122036; --iu-hairline: #1a2942; --iu-border: #26374f; --iu-border-strong:#3a4c66; --iu-border-control:#6b7d97; --iu-fg: #eef1f7; /* 16.02:1 on surface */ --iu-fg-secondary: #c2cad9; --iu-fg-muted: #98a3b8; /* 7.14:1 */ --iu-link: #85a6f9; /* 7.61:1 */ --iu-link-hover: #b3c9fb; --iu-kind-news: #6fa5dc; --iu-kind-leg: #d4af7a; /* brand gold */ --iu-kind-case: #7fbf97; --iu-ok-bg:#0d2b1e; --iu-ok-fg:#7fbf97; --iu-ok-border:#2a5c40; --iu-warn-bg:#2b2007;--iu-warn-fg:#e0ae55;--iu-warn-border:#6d4700; --iu-err-bg:#2b0f0e; --iu-err-fg:#e0867f; --iu-err-border:#67221f; --iu-info-bg:#10233c;--iu-info-fg:#6fa5dc;--iu-info-border:#1d3d78; --iu-viz-line: #4f7bf7; --iu-viz-up: #7fbf97; --iu-viz-down: #e0867f; --iu-viz-grid: #1a2942; --iu-viz-news: #4f7bf7; --iu-viz-leg: #d4af7a; --iu-viz-case: #7fbf97; /* R2.4 brand hues stay IDENTICAL in dark (self-coloured brand ground); the dark theme only adds a 1px --iu-border stroke on the logo block (section 22) so it reads against the page. */ --iu-brand-block: #1d2a66; --iu-brand-accent: #2563eb; --iu-focus-inner: #ffc400; --iu-focus-outer: #060d18; } } /* Forced dark (toggle) — must win over the bare :root light block */ :root[data-iu-theme="dark"] { color-scheme: dark; --iu-bg-page: #060d18; /* not #000 */ --iu-bg-surface: #0a1628; --iu-bg-inset: #122036; --iu-bg-hover: #122036; --iu-hairline: #1a2942; --iu-border: #26374f; --iu-border-strong:#3a4c66; --iu-border-control:#6b7d97; --iu-fg: #eef1f7; /* 16.02:1 on surface */ --iu-fg-secondary: #c2cad9; --iu-fg-muted: #98a3b8; /* 7.14:1 */ --iu-link: #85a6f9; /* 7.61:1 */ --iu-link-hover: #b3c9fb; --iu-kind-news: #6fa5dc; --iu-kind-leg: #d4af7a; /* brand gold */ --iu-kind-case: #7fbf97; --iu-ok-bg:#0d2b1e; --iu-ok-fg:#7fbf97; --iu-ok-border:#2a5c40; --iu-warn-bg:#2b2007;--iu-warn-fg:#e0ae55;--iu-warn-border:#6d4700; --iu-err-bg:#2b0f0e; --iu-err-fg:#e0867f; --iu-err-border:#67221f; --iu-info-bg:#10233c;--iu-info-fg:#6fa5dc;--iu-info-border:#1d3d78; --iu-viz-line: #4f7bf7; --iu-viz-up: #7fbf97; --iu-viz-down: #e0867f; --iu-viz-grid: #1a2942; --iu-viz-news: #4f7bf7; --iu-viz-leg: #d4af7a; --iu-viz-case: #7fbf97; /* R2.4 brand hues — identical values in both themes (see section 22 for the dark-only 1px border on the logo block). */ --iu-brand-block: #1d2a66; --iu-brand-accent: #2563eb; --iu-focus-inner: #ffc400; --iu-focus-outer: #060d18; } /* ========================================================================== 05 · BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--iu-bg-page); color: var(--iu-fg); font: 400 14px/20px var(--iu-font-ui); font-variant-numeric: tabular-nums; /* ALL numerals tabular, everywhere */ } h1, h2, h3, p, ul, ol, figure { margin: 0; } a { color: var(--iu-link); text-decoration: underline; text-underline-offset: 2px; transition: color var(--iu-dur-1) var(--iu-ease); } a:hover { color: var(--iu-link-hover); } svg { display: block; } /* Focus signature — every interactive element, one recipe. The 4px amber halo is the ONLY sanctioned box-shadow in this section. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--iu-focus-inner); outline-offset: 2px; box-shadow: 0 0 0 4px var(--iu-focus-outer); border-radius: 2px; } /* Honeypot + a11y text: rendered box stays 1px, never display:none (bots skip display:none fields; screen readers must still skip via the aria-hidden wrapper + tabindex=-1 set in the HTML). */ .iu-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* The honeypot wrapper holds a REAL text control (bots must see a live field) and a real text control keeps the 16px floor like every other input — visually hidden is not exempt from being measured (UX-TYP-08). */ .iu-visually-hidden input { font-size: 16px; line-height: 20px; } /* ========================================================================== 06 · SHARED TYPE DEVICES ========================================================================== */ /* 11px is uppercase-only, always letter-spaced */ .iu-microlabel { font: 600 11px/16px var(--iu-font-ui); text-transform: uppercase; letter-spacing: 0.04em; color: var(--iu-fg-muted); } .iu-microlabel--mono { font: 400 11px/16px var(--iu-font-num); text-transform: uppercase; letter-spacing: 0.04em; } .iu-mono { font-family: var(--iu-font-num); } /* Kind device: 16x2px dash + uppercase word, colour and word travel together. The ONLY chrome that carries kind hue. */ .iu-kind-row { display: flex; align-items: center; gap: 8px; } .iu-kind-dash { flex: none; width: 16px; height: 2px; background: currentColor; } .iu-kind-label { font: 600 11px/16px var(--iu-font-ui); text-transform: uppercase; letter-spacing: 0.04em; color: currentColor; } .iu-kind-news { color: var(--iu-kind-news); } .iu-kind-leg { color: var(--iu-kind-leg); } .iu-kind-case { color: var(--iu-kind-case); } /* Horizontal rules: hairline (decorative) vs strong (section boundary) */ .iu-rule { border: 0; border-top: 1px solid var(--iu-hairline); margin: 0; } .iu-rule-strong { border: 0; border-top: 1px solid var(--iu-border); margin: 0; } /* ========================================================================== 07 · LAYOUT — the one container, the split grid, the side rail (R2.1-R2.3) One container for header rows / dateline / masthead / content / footer: min(74%, 1440px) centred at >=1024px; below that, full width behind the existing gutter ladder (16 <640 · 24 >=640 · 32 >=900, section 24). The old 720px reading band and 1080px wide band are RETIRED — summaries keep their own 68ch measure inside columns. ========================================================================== */ .iu-container { margin-inline: auto; padding-inline: 16px; } @media (min-width: 1024px) { .iu-container { width: var(--iu-container); padding-inline: 0; } } .iu-main { padding-block: 32px 72px; } /* R2.2 — two-column split (news / legislation / cases / law / hub; NOT trends). Source order: main first, aside second. ~960/440 at 1400px. */ .iu-split { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr); column-gap: 32px; } .iu-split-main { min-width: 0; } .iu-split-aside { min-width: 0; border-inline-start: 1px solid var(--iu-hairline); padding-inline-start: 32px; } /* Rail is enhancement-only: with no JS (or every block silently skipped) the aside stays empty — its rule drops so nothing paints. The column stays RESERVED by default (a stable layout beats a reflow on every rail fill); the controllers add .iu-split--railless only when the rail load finishes with nothing to show, which is the rare case. */ .iu-split-aside:empty { border: 0; padding: 0; } .iu-split--railless { grid-template-columns: minmax(0, 1fr); } @media (max-width: 899px) { .iu-split { grid-template-columns: minmax(0, 1fr); } /* Aside stacks BELOW main: side border goes, a strong top rule arrives. */ .iu-split-aside { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--iu-border); padding-block-start: 24px; margin-block-start: 32px; } .iu-split-aside:empty { border: 0; padding: 0; margin: 0; } } /* R2.2 — lead item: page 1, rank 01 only. Headline steps up to 20/28, summary clamp loosens to 6 lines (both in section 11), and a strong rule closes the row. Rank numbering is unchanged. Double class: .iu-item's own hairline (section 11) is later in the file and would win a specificity tie. */ .iu-item.iu-item--lead { border-bottom-color: var(--iu-border); } /* -------------------------------------------------------------------------- R2.3 — side rail blocks (quiet, enhancement-only; NEVER an error panel) -------------------------------------------------------------------------- */ .iu-rail-block { margin-bottom: 32px; } .iu-rail-block > .iu-kind-row { padding-block: 8px; border-bottom: 1px solid var(--iu-hairline); } /* Neutral (non-kind) dashes+labels always render muted — same weight as the subscribe band's device, never heavier than the kind-hued ones. */ .iu-kind-row--neutral { color: var(--iu-fg-muted); } /* Trending row: rank · keyword · sparkline 64x20 · count (mono, right). */ .iu-rail-trend-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 64px auto; align-items: center; gap: 8px; padding-block: 4px; border-bottom: 1px solid var(--iu-hairline); } .iu-rail-rank { font: 400 12px/16px var(--iu-font-num); color: var(--iu-fg-muted); } .iu-rail-keyword { font: 500 13px/18px var(--iu-font-ui); color: var(--iu-link); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* >=24px target (WCAG 2.2 2.5.8): 18px line + 2x4px padding = 26px */ padding-block: 4px; } .iu-rail-keyword:hover { color: var(--iu-link-hover); text-decoration: underline; text-underline-offset: 3px; } .iu-rail-spark { width: 64px; height: 20px; } .iu-rail-count { font: 400 13px/18px var(--iu-font-num); color: var(--iu-fg-secondary); text-align: right; white-space: nowrap; } /* Cross-kind item row: headline 14/20 semibold 2-line clamp + 12px meta. NO summaries in the rail -> structurally no disclaimer needed. */ .iu-rail-item { padding-block: 12px; border-bottom: 1px solid var(--iu-hairline); } .iu-rail-headline { font: 600 14px/20px var(--iu-font-ui); color: var(--iu-fg); } .iu-rail-headline a { color: inherit; text-decoration: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .iu-rail-headline a:hover { text-decoration: underline; text-underline-offset: 3px; } .iu-rail-meta { font: 400 12px/16px var(--iu-font-ui); color: var(--iu-fg-muted); margin-top: 2px; } /* Block footer link ("All trends" / "All legislation (2)") reuses the .iu-group-more voice via a shared class in the markup. */ /* Email-briefing mini block (hub rail): one line + an anchor to #subscribe. */ .iu-rail-line { font: 400 13px/18px var(--iu-font-ui); color: var(--iu-fg-secondary); margin-top: 12px; } /* ========================================================================== 08 · HEADER (every page, NOT sticky) ========================================================================== */ /* Row 1 — R3.1 masthead band (R4 amendment), ALL six pages: navy logo block (links home, replaces the old text wordmark) · verbatim definition line · controls. Grid: logo auto / definition 1fr / controls auto, vertically centred — with the R4 sizes the definition sits mid-height beside the logo. padding-block 32 top / 24 bottom (the generous head margin), hairline below (row 2 keeps its stronger rule). */ .iu-header-top { border-bottom: 1px solid var(--iu-hairline); } .iu-header-top .iu-container { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 24px; padding-block: 32px 24px; } .iu-logo-link { display: inline-block; } .iu-logo { /* R4: the brand raster (assets/logo-masthead.png — a 720x240 web derivative of assets/icon/logo.png, centre-cropped 3:1 so the wordmark fills the plate). 270x90 gives the logo the agentist-style dominance over the 16px definition beside it; the type-scale rule does not apply to a raster. Sharp corners — the masthead logo is a plate, not a chip (R4 taste, matches the reference). */ display: block; width: 270px; height: 90px; } /* Definition line beside the logo: the doc voice, serif 16/28 (matches the prose measure), strong = ink 600, phonetics muted, verbatim copy. */ .iu-header-def { font: 400 16px/28px var(--iu-font-doc); color: var(--iu-fg-secondary); max-width: 68ch; } .iu-header-def strong { font-weight: 600; color: var(--iu-fg); } .iu-header-phonetics { color: var(--iu-fg-muted); } /* <900 (R4 moved this off the old off-ladder 768): with the full-size logo the side-by-side seat gets cramped below 900, so the definition wraps BELOW the logo (both remain visible); controls stay top-right beside the logo row. Mirrors web_app's publicShell breakpoint. */ @media (max-width: 899px) { .iu-header-top .iu-container { grid-template-columns: minmax(0, 1fr) auto; row-gap: 12px; } .iu-logo-link { grid-row: 1; grid-column: 1; justify-self: start; } .iu-header-actions { grid-row: 1; grid-column: 2; } .iu-header-def { grid-row: 2; grid-column: 1 / -1; } } /* <480: logo steps down to the 24px type step; the definition stays. 188.57x61.71 = a UNIFORM 0.8 scale of the native 235.71x77.14 box, so preserveAspectRatio never letterboxes the plate inside the box and the wordmark computes exactly 24px. */ @media (max-width: 479px) { .iu-logo { width: 168px; height: 56px; } } .iu-header-actions { display: flex; align-items: center; gap: 16px; } .iu-subscribe-anchor { font: 500 13px/18px var(--iu-font-ui); color: var(--iu-link); text-decoration: none; /* >=24px target (WCAG 2.2 2.5.8): 18px line + 2x4px padding = 26px. Flex item of .iu-header-actions, so padding-block takes effect. */ padding-block: 4px; } .iu-subscribe-anchor:hover { color: var(--iu-link-hover); text-decoration: underline; text-underline-offset: 3px; } /* Theme toggle — shows the current mode word, cycles Auto - Light - Dark */ .iu-theme-toggle { min-width: 56px; height: 28px; padding: 0 8px; border: 1px solid var(--iu-border-control); border-radius: 4px; background: transparent; color: var(--iu-fg-secondary); font: 500 12px/16px var(--iu-font-ui); cursor: pointer; transition: background-color var(--iu-dur-1) var(--iu-ease), color var(--iu-dur-1) var(--iu-ease); } .iu-theme-toggle:hover { background: var(--iu-bg-hover); color: var(--iu-fg); } /* Row 2 — masthead: section title / nav */ .iu-header-main { border-bottom: 1px solid var(--iu-border); } .iu-header-main .iu-container { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; } .iu-section-title { font: 600 20px/28px var(--iu-font-ui); color: var(--iu-fg); } .iu-section-title a { color: inherit; text-decoration: none; } .iu-nav { display: flex; align-items: center; gap: 20px; } .iu-nav-link { font: 500 14px/20px var(--iu-font-ui); color: var(--iu-fg-muted); text-decoration: none; padding-block: 4px; white-space: nowrap; transition: color var(--iu-dur-1) var(--iu-ease); } .iu-nav-link:hover { color: var(--iu-fg); } .iu-nav-link[aria-current="page"], .iu-nav-link.is-current { color: var(--iu-fg); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } /* Row 3 — dateline: BRIEFING · WEDNESDAY 13 AUGUST 2026 · 2:40 PM AEST display:block so the padding-block actually occupies the row (the dateline is authored as a span). */ .iu-dateline { display: block; font: 400 11px/16px var(--iu-font-num); text-transform: uppercase; letter-spacing: 0.04em; color: var(--iu-fg-muted); padding-block: 12px; } /* ========================================================================== 09 · FOOTER ========================================================================== */ .iu-footer { border-top: 1px solid var(--iu-hairline); margin-top: 56px; padding-block: 32px 40px; } .iu-footer-nav { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; } .iu-footer-nav a { font: 500 12px/16px var(--iu-font-ui); color: var(--iu-fg-muted); text-decoration: none; /* >=24px target (WCAG 2.2 2.5.8): 16px line + 2x4px padding = 24px. Flex item of .iu-footer-nav, so padding-block takes effect. */ padding-block: 4px; } .iu-footer-nav a:hover { color: var(--iu-fg); text-decoration: underline; text-underline-offset: 3px; } .iu-footer-legal { font: 400 12px/18px var(--iu-font-doc); color: var(--iu-fg-muted); max-width: 68ch; margin-bottom: 12px; } .iu-footer-copy { font: 400 12px/16px var(--iu-font-ui); color: var(--iu-fg-muted); } .iu-footer-copy a { color: var(--iu-fg-muted); } .iu-footer-copy a:hover { color: var(--iu-fg); } /* ========================================================================== 10 · PAGE FURNITURE — titles, descriptions, count line, attribution ========================================================================== */ .iu-page-title { font: 600 24px/32px var(--iu-font-ui); color: var(--iu-fg); margin-bottom: 8px; } .iu-page-desc { font: 400 16px/28px var(--iu-font-doc); color: var(--iu-fg-muted); max-width: 68ch; margin-bottom: 16px; } /* Static intro prose on the listing pages (readable without JS) — the serif voice at body size, on-scale 16/28. Muted, NOT secondary: supporting prose must never out-ink the page description above it or compete with item summaries (critique: hierarchy inversion). */ .iu-prose { font: 400 16px/28px var(--iu-font-doc); color: var(--iu-fg-muted); max-width: 68ch; margin-bottom: 16px; } /* Hub intro line (serif 18/28) */ .iu-intro { font: 400 18px/28px var(--iu-font-doc); color: var(--iu-fg); max-width: 68ch; margin-bottom: 32px; } /* Reconciled count, a designed element: "7 items · past 7 days · updated 13 Aug 2026, 5:51 pm" */ .iu-count-line { font: 400 12px/16px var(--iu-font-num); color: var(--iu-fg-muted); margin-bottom: 16px; } /* Attribution — legislation envelope (once per surface, under count line) and per-item case attribution share one quiet voice. */ .iu-attribution { font: 400 12px/18px var(--iu-font-doc); color: var(--iu-fg-muted); max-width: 68ch; } /* ========================================================================== 11 · ITEM ROWS (full-width rows + hairline separators — NOT cards) 48px rank gutter + content column. ========================================================================== */ .iu-list { list-style: none; margin: 0; padding: 0; } .iu-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); padding-block: 24px; border-bottom: 1px solid var(--iu-hairline); transition: background-color var(--iu-dur-1) var(--iu-ease); } .iu-item:hover { background: var(--iu-bg-hover); } /* Compact rows: hub top-3 groups and drilldown items (headline + meta only) */ .iu-item--compact { padding-block: 16px; } /* Rank numeral — rank order IS the score made visible */ .iu-item-rank { font: 400 24px/32px var(--iu-font-num); color: var(--iu-fg-muted); transition: color var(--iu-dur-1) var(--iu-ease); } .iu-item:hover .iu-item-rank { color: var(--iu-fg-secondary); } .iu-item-body { min-width: 0; } .iu-item-body > .iu-kind-row { margin-bottom: 8px; } /* Headline: whole headline is the outbound link. Clamp 3 lines (title attribute on the anchor holds the full text). */ .iu-item-headline { font: 600 16px/24px var(--iu-font-ui); color: var(--iu-fg); } .iu-item-headline a { color: inherit; text-decoration: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } .iu-item:hover .iu-item-headline a, .iu-item-headline a:hover { text-decoration: underline; text-underline-offset: 3px; } /* Lead item (R2.2): headline steps up one notch; others stay 16/24. */ .iu-item--lead .iu-item-headline { font: 600 20px/28px var(--iu-font-ui); } .iu-item--lead .iu-summary { -webkit-line-clamp: 6; line-clamp: 6; } /* NE-arrow external icon, inline SVG, stroke currentColor 1.5px */ .iu-ext-icon { display: inline-block; width: 12px; height: 12px; vertical-align: baseline; margin-left: 4px; color: var(--iu-fg-muted); transition: color var(--iu-dur-1) var(--iu-ease); } .iu-item:hover .iu-ext-icon { color: var(--iu-link); } /* Metadata row: 13px muted, dot-separated */ .iu-meta { font: 400 13px/18px var(--iu-font-ui); color: var(--iu-fg-muted); margin-top: 4px; } /* Register IDs and neutral citations are ALWAYS mono */ .iu-meta-id { font-family: var(--iu-font-num); } /* Court code: 11px uppercase inside the meta row */ .iu-meta-court { font: 600 11px/16px var(--iu-font-ui); text-transform: uppercase; letter-spacing: 0.04em; } /* Judge line (cases, when present) */ .iu-judge { font: 400 13px/18px var(--iu-font-ui); color: var(--iu-fg-muted); margin-top: 4px; } /* Quiet links row (legislation): As made · Latest version */ .iu-meta-links { font: 400 13px/18px var(--iu-font-ui); margin-top: 4px; } .iu-meta-links a { color: var(--iu-link); text-decoration: underline; text-underline-offset: 2px; } .iu-meta-links a:hover { color: var(--iu-link-hover); } /* Summary: the serif voice. Clamp 4 lines. */ .iu-summary { font: 400 16px/28px var(--iu-font-doc); color: var(--iu-fg-secondary); max-width: 68ch; margin-top: 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; } /* Case commentary disclaimer — VERBATIM copy, immediately after the summary / dot-points block, tight to it, no spacer element between. */ .iu-disclaimer { font: 400 12px/16px var(--iu-font-ui); color: var(--iu-fg-muted); margin-top: 4px; } /* dot_points: up to 5, 6px square bullet in border-strong */ .iu-dot-points { list-style: none; margin: 8px 0 0; padding: 0; } .iu-dot-points li { position: relative; padding-left: 16px; font: 400 14px/20px var(--iu-font-ui); color: var(--iu-fg-secondary); max-width: 68ch; } .iu-dot-points li + li { margin-top: 4px; } .iu-dot-points li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; background: var(--iu-border-strong); } /* Catchwords: collapsed 2-line clamp, serif italic; never truncated once expanded (substantive court text). */ .iu-catchwords { font: italic 400 13px/18px var(--iu-font-doc); color: var(--iu-fg-muted); max-width: 68ch; margin-top: 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .iu-catchwords.is-expanded { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } .iu-catchwords-toggle { margin-top: 4px; /* >=24px target (WCAG 2.2 2.5.8): 16px line + 2x4px padding = 24px */ padding: 4px 0; border: 0; background: transparent; font: 500 12px/16px var(--iu-font-ui); color: var(--iu-link); cursor: pointer; } .iu-catchwords-toggle:hover { color: var(--iu-link-hover); text-decoration: underline; text-underline-offset: 2px; } /* Keyword tags: quiet, bordered, never kind-hued fills */ .iu-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .iu-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; background: var(--iu-bg-inset); border: 1px solid var(--iu-border); border-radius: 4px; font: 500 12px/16px var(--iu-font-ui); color: var(--iu-fg-secondary); text-decoration: none; max-width: 18ch; transition: color var(--iu-dur-1) var(--iu-ease), border-color var(--iu-dur-1) var(--iu-ease); } .iu-tag-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .iu-tag:hover { color: var(--iu-fg); border-color: var(--iu-border-strong); } /* Coarse-pointer viewports: neighbouring tags must clear a thumb (UX-LAY-07; 44px guidance). Taller targets + wider gaps, visual weight unchanged. AFTER the base rules so the same-specificity override wins in-media. */ @media (max-width: 479px) { .iu-tags { gap: 16px; margin-top: 20px; /* clears the metadata line above (44px guidance) */ } .iu-tag { min-height: 32px; padding-top: 6px; padding-bottom: 6px; } } /* importance_score surfaces ONLY as this outlined chip — numbers never print */ .iu-chip-priority { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid var(--iu-border-strong); border-radius: 999px; background: transparent; font: 600 11px/16px var(--iu-font-ui); text-transform: uppercase; letter-spacing: 0.04em; color: var(--iu-fg-secondary); } /* ========================================================================== 12 · HUB — groups, group windows, count links, mini trend table One continuous ruled document: no hero, no cards, no icon rows. ========================================================================== */ .iu-group { margin-bottom: 32px; } /* align-items: center, NOT baseline — the h2's first flex item is the empty 16x2 dash span, whose synthesized bottom-edge baseline would ride the window label ~3px high. Both sides are 16px-line microlabels, so centring is baseline-equivalent (and matches .iu-dd-group-header). */ .iu-group-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 8px; border-bottom: 1px solid var(--iu-hairline); } /* PAST 7 DAYS — right-aligned window microlabel */ .iu-group-window { font: 400 11px/16px var(--iu-font-num); text-transform: uppercase; letter-spacing: 0.04em; color: var(--iu-fg-muted); white-space: nowrap; } /* Envelope attribution under a group header (law page: legislation group) */ .iu-group > .iu-attribution { margin-top: 8px; } /* "All news (7)" — group footer count link */ .iu-group-more { display: inline-block; margin-top: 12px; font: 500 13px/18px var(--iu-font-ui); color: var(--iu-link); text-decoration: none; /* >=24px target (WCAG 2.2 2.5.8): 18px line + 2x4px padding = 26px */ padding-block: 4px; } .iu-group-more:hover { color: var(--iu-link-hover); text-decoration: underline; text-underline-offset: 3px; } /* ========================================================================== 13 · PAGINATION (only when total > 20) Previous ghost / "Page 2 of 4 · 37 items" mono centred / Next ghost. Rank numerals continue across pages — page 2 starts at 21. ========================================================================== */ .iu-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 24px; } .iu-pagination-status { font: 400 13px/18px var(--iu-font-num); color: var(--iu-fg-muted); text-align: center; } /* Prev/Next are real links dressed as ghost buttons — kill the base underline; a placeholder (aria-disabled) step keeps the layout. */ .iu-pagination a.iu-btn { text-decoration: none; } .iu-pagination-center { display: flex; flex-direction: column; align-items: center; gap: 4px; } /* Windowed page-number links (mono, quiet; current = ink + underline) */ .iu-pagination-pages { display: flex; align-items: center; gap: 8px; } .iu-page-link { font: 400 13px/18px var(--iu-font-num); color: var(--iu-fg-muted); text-decoration: none; /* >=24x24px target (WCAG 2.2 2.5.8): 18px line + 2x4px padding = 26px tall; min-width covers single-digit links. Flex item of .iu-pagination-pages, so min-width applies directly. */ padding: 4px; min-width: 24px; text-align: center; } .iu-page-link:hover { color: var(--iu-fg); } .iu-page-link[aria-current="page"] { color: var(--iu-fg); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } .iu-page-gap { font: 400 13px/18px var(--iu-font-num); color: var(--iu-fg-muted); } /* ========================================================================== 14 · BUTTONS + INPUTS ========================================================================== */ .iu-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 4px; font: 500 14px/20px var(--iu-font-ui); cursor: pointer; transition: background-color var(--iu-dur-1) var(--iu-ease), color var(--iu-dur-1) var(--iu-ease), border-color var(--iu-dur-1) var(--iu-ease); } .iu-btn[disabled], .iu-btn[aria-disabled="true"] { opacity: 0.6; cursor: default; pointer-events: none; } .iu-btn-ghost { background: transparent; border: 1px solid var(--iu-border-control); color: var(--iu-fg); } .iu-btn-ghost:hover:not([disabled]) { background: var(--iu-bg-hover); } /* Filled CTA: --iu-link bg + white text in light; #1f45b4 bg in dark (dark override lives in section 22 — component rules cannot sit inside the :root token blocks). White on #17358b and on #1f45b4 both clear 7:1. */ .iu-btn-primary { background: var(--iu-link); border: 1px solid transparent; color: #ffffff; font-size: 16px; } .iu-btn-primary:hover:not([disabled]) { background: var(--iu-link-hover); } .iu-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .iu-label { font: 500 13px/18px var(--iu-font-ui); color: var(--iu-fg-secondary); } /* Inputs are >=16px (never smaller) and 40px tall */ .iu-input { height: 40px; padding: 0 12px; border: 1px solid var(--iu-border-control); border-radius: 4px; background: var(--iu-bg-surface); color: var(--iu-fg); font: 400 16px/24px var(--iu-font-ui); transition: border-color var(--iu-dur-1) var(--iu-ease); } .iu-input::placeholder { color: var(--iu-fg-muted); } .iu-input[aria-invalid="true"] { border-color: var(--iu-err-fg); } .iu-field-error { font: 400 13px/18px var(--iu-font-ui); color: var(--iu-err-fg); } /* ========================================================================== 15 · TREND TABLE (/trends, 1080px column) Columns: # · KEYWORD · ACTIVITY (7D) · MENTIONS · SHARE · CHANGE (PTS) Numeric columns mono, right-aligned. SHARE drops below 560px (section 24). ========================================================================== */ .iu-kind-tabs { display: flex; align-items: center; gap: 20px; border-bottom: 1px solid var(--iu-border); margin-bottom: 24px; } .iu-kind-tab { font: 500 14px/20px var(--iu-font-ui); color: var(--iu-fg-muted); text-decoration: none; padding-block: 8px; white-space: nowrap; transition: color var(--iu-dur-1) var(--iu-ease); } .iu-kind-tab:hover { color: var(--iu-fg); } .iu-kind-tab[aria-current="true"], .iu-kind-tab.is-current { color: var(--iu-fg); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; } .iu-trend-table { width: 100%; border-collapse: collapse; } /* R2.5 alignment law: th and td of a column share IDENTICAL inline padding (12px both sides here, 8px <480 — always as a pair), so a right-aligned header's right edge sits exactly over its digits. Block padding may differ (8 vs 12); inline padding may not. */ .iu-trend-table th { font: 600 11px/16px var(--iu-font-ui); text-transform: uppercase; letter-spacing: 0.04em; color: var(--iu-fg-muted); text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--iu-border); } .iu-trend-table td { padding: 12px; border-bottom: 1px solid var(--iu-hairline); font: 400 14px/20px var(--iu-font-ui); vertical-align: middle; } /* NO row hover wash: only the keyword cell is interactive, and a row-level hover would promise a click the other five cells don't honour (the same dataset's other renderings make no such promise either). The keyword link's own hover state carries the affordance. */ /* Numeric columns: mono, right-aligned (th + td share the class) */ .iu-td-num { font-family: var(--iu-font-num); font-size: 13px; line-height: 18px; text-align: right; white-space: nowrap; } th.iu-td-num { font-family: var(--iu-font-ui); font-size: 11px; line-height: 16px; } /* Headers of numeric columns right-align WITH their digits — this must out-rank the generic `.iu-trend-table th { text-align: left }` above (which used to win on specificity and left the # header floating left of its numerals). */ .iu-trend-table th.iu-td-num { text-align: right; } /* Rank column fixed at 48px (th + td). */ .iu-trend-table .iu-col-rank { width: 48px; } .iu-trend-rank { color: var(--iu-fg-muted); } .iu-trend-keyword a { font-weight: 500; color: var(--iu-link); text-decoration: none; } .iu-trend-keyword a:hover { color: var(--iu-link-hover); text-decoration: underline; text-underline-offset: 3px; } /* ========================================================================== 16 · SPARKLINE + DELTA 96x28 (80 <640, 64 <480). Zero days plot at baseline. No area fill. ========================================================================== */ .iu-spark { width: 96px; height: 28px; } .iu-spark-line { fill: none; stroke: var(--iu-viz-line); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; } .iu-spark-dot { fill: var(--iu-viz-line); stroke: none; } /* All-zero series: flat 1px line at baseline in --iu-border */ .iu-spark-flat { fill: none; stroke: var(--iu-border); stroke-width: 1; } /* Delta cell: mono 13 tabular; the trend mark is an 8x7 inline SVG triangle in currentColor (LEX-35: SVG elements only, no text dingbats) riding the delta's own up/down ink. */ .iu-delta { font: 400 13px/18px var(--iu-font-num); white-space: nowrap; } .iu-delta--up { color: var(--iu-viz-up); } .iu-delta--down { color: var(--iu-viz-down); } .iu-delta--zero { color: var(--iu-fg-muted); } /* no mark, just 0.0 */ .iu-delta-glyph { width: 8px; height: 7px; } /* ========================================================================== 17 · DRILLDOWN PANEL (/trends?keyword=…) The page's ONLY bordered panel. ========================================================================== */ .iu-drilldown { border: 1px solid var(--iu-border); border-radius: 6px; padding: 24px; margin-block: 24px; background: var(--iu-bg-surface); } .iu-drilldown-title { font: 600 20px/28px var(--iu-font-ui); color: var(--iu-fg); margin-bottom: 4px; } /* "14 items across 3 kinds — matches the trend count of 14." */ .iu-reconciliation { font: 400 13px/18px var(--iu-font-num); color: var(--iu-fg-muted); margin-bottom: 16px; } .iu-dd-group { margin-top: 20px; } .iu-dd-group-header { display: flex; align-items: center; gap: 8px; padding-block: 6px; border-bottom: 1px solid var(--iu-hairline); } .iu-dd-group-count { font: 400 13px/18px var(--iu-font-num); color: var(--iu-fg-muted); } /* Source sub-header: The Guardian (6) — count is the FULL reconciliation count from the contract, never the page-slice length. */ .iu-dd-source { font: 600 13px/18px var(--iu-font-ui); color: var(--iu-fg-secondary); margin-top: 12px; } .iu-dd-source .iu-dd-group-count { font-weight: 400; } .iu-dd-footer { display: flex; align-items: center; gap: 16px; margin-top: 24px; } .iu-dd-back { font: 500 13px/18px var(--iu-font-ui); /* >=24px target (WCAG 2.2 2.5.8): 18px line + 2x4px padding = 26px. Flex item of .iu-dd-footer, so padding-block takes effect. */ padding-block: 4px; } /* ========================================================================== 18 · INSIGHTS (trends page) — the /insights REDESIGN (contract §5) A single-column flow of bands, most-decision-relevant first: hero (cross-axis families) · three axis columns · case-law strip · emerging band · secondary grid (volume tiles + profiles + co-occurrence). Every panel branches on panel_states — a quiet panel keeps its place with an honest caption (.iu-panel-caption); only co-occurrence may hide. The small panels keep the bordered .iu-insight anatomy (1px, radius 6, 20px inset); the hero deliberately has NO box, so the contrast between the lead story and the supporting blocks reads. ========================================================================== */ .iu-insights { margin-top: 40px; } .iu-insights-title { font: 600 20px/28px var(--iu-font-ui); color: var(--iu-fg); margin-bottom: 16px; } /* The flow: one band per row; each band manages its own internal grid. align-items: start keeps a short band from stretching (R3.2.1 carries over from the retired uniform grid). 32px band rhythm — the broadsheet register, matching web_app's flow gap. */ .iu-insights-flow { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; } .iu-insight { border: 1px solid var(--iu-border); border-radius: 6px; padding: 20px; min-width: 0; } /* R3.2.2 — list cap + disclosure: entries past the 7th sit in a hidden wrapper behind a quiet ghost toggle ("Show all N" / "Show fewer", aria-expanded). Opening rises over 180ms per the house motion; section 23's reduced-motion kill makes it instant. Counts elsewhere keep FULL semantics — the cap is presentation only (model.capList owns the split). The axis rankings are exempt by design: server-capped at 10, rendered in full (a ranking behind a fold is a ranking you can't read). */ .iu-insight-more { display: none; } .iu-insight-more.is-open { display: block; animation: iu-rise var(--iu-dur-2) var(--iu-ease); } /* Facet tables hide their overflow rows in a second tbody (a div cannot wrap s); same class, table-correct display when open. */ tbody.iu-insight-more.is-open { display: table-row-group; } @keyframes iu-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .iu-insight-toggle { margin-top: 12px; height: 28px; padding: 0 12px; border: 1px solid var(--iu-border-control); border-radius: 4px; background: transparent; color: var(--iu-fg-secondary); font: 500 12px/16px var(--iu-font-ui); cursor: pointer; transition: background-color var(--iu-dur-1) var(--iu-ease), color var(--iu-dur-1) var(--iu-ease); } .iu-insight-toggle:hover { background: var(--iu-bg-hover); color: var(--iu-fg); } .iu-insight-title { font: 600 11px/16px var(--iu-font-ui); text-transform: uppercase; letter-spacing: 0.04em; color: var(--iu-fg-muted); margin-bottom: 12px; } /* The honest caption a quiet/empty/too_few panel renders IN PLACE of rows (contract §5: never hide panels 1-4, never fabricate). */ .iu-panel-caption { font: 400 13px/18px var(--iu-font-ui); color: var(--iu-fg-muted); } /* Generic row inside a block: label left, mono figure right */ .iu-insight-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block: 6px; border-bottom: 1px solid var(--iu-hairline); font: 400 14px/20px var(--iu-font-ui); } .iu-insight-row:last-child { border-bottom: 0; } /* ONE keyword-link grammar for every insights panel (hero topics, axis rows, the case-law strip, emerging, co-occurrence): 14px/500 link ink, no resting underline, underline on hover. The same click must never wear two dresses in adjacent panels. */ /* min-width: 0 + overflow-wrap: anywhere — a long keyword WRAPS on a narrow column instead of collapsing to an unreadable ellipsis stub (a briefing reads; it never truncates — matching web_app's .rowLabel). */ .iu-insight-keyword { font: 500 14px/20px var(--iu-font-ui); color: var(--iu-link); text-decoration: none; min-width: 0; overflow-wrap: anywhere; } .iu-insight-keyword:hover { color: var(--iu-link-hover); text-decoration: underline; text-underline-offset: 3px; } .iu-insight-count { font: 400 13px/18px var(--iu-font-num); color: var(--iu-fg-secondary); white-space: nowrap; } /* Shared 8px square swatch for the axis-row per-kind counts. inline-block so it renders inside the counts line, which is plain inline text. */ .iu-swatch { display: inline-block; flex: none; width: 8px; height: 8px; } .iu-swatch--news { background: var(--iu-viz-news); } .iu-swatch--leg { background: var(--iu-viz-leg); } .iu-swatch--case { background: var(--iu-viz-case); } /* --- 1 · HERO — cross-axis families ------------------------------------- The lead story: the band's strong top rule + a real h3 title (18px, NOT a microlabel) + a muted caption; cards carry no box — scale and the rule do the hierarchy work that borders do on the small panels. */ .iu-hero-band { border-top: 1px solid var(--iu-border); padding-top: 20px; } .iu-hero-title { font: 600 18px/26px var(--iu-font-ui); color: var(--iu-fg); } .iu-hero-caption { font: 400 12px/16px var(--iu-font-ui); color: var(--iu-fg-muted); margin-top: 4px; } /* min(100%, 300px): the track floor collapses to the container below 300px, so a 320px viewport (16px gutters -> ~288px column) never overflows the band. Row/column rhythm 24/32 mirrors web_app. */ .iu-hero-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 24px 32px; align-items: start; margin-top: 16px; } .iu-hero-card { min-width: 0; } .iu-hero-family { margin: 0; font: 600 16px/24px var(--iu-font-ui); color: var(--iu-fg); } /* Kind-count line: KindMark (dash + word) + mono count, dot-separated. The words carry the kinds; the hue only ever rides the dash device. */ .iu-hero-kinds { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; font: 400 13px/18px var(--iu-font-ui); color: var(--iu-fg-secondary); } .iu-hero-kind { display: inline-flex; align-items: center; gap: 6px; } .iu-hero-topics { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; } /* --- 2 · AXIS COLUMNS — programs / doctrines / policy instruments ------- Newspaper columns >=900 (hairline rules between, the .splitAside device); a single stack below. */ .iu-axis-band { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; } .iu-axis-col { min-width: 0; } @media (min-width: 900px) { .iu-axis-band { grid-template-columns: repeat(3, 1fr); gap: 0 24px; } .iu-axis-col + .iu-axis-col { border-inline-start: 1px solid var(--iu-hairline); padding-inline-start: 24px; } } /* Ranked row, two-line anatomy (R3.2.3 proven): line 1 = label link + badge + right-aligned per-kind counts; line 2 = the segmented bar. Bar LENGTH = row count / column max (8% floor — model.axisBarGeometry owns the math); the raw count is a denominator only, never displayed. */ .iu-axis-row { padding-block: 8px; border-bottom: 1px solid var(--iu-hairline); } .iu-axis-row:last-of-type { border-bottom: 0; } .iu-axis-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .iu-axis-headline { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; } /* Trend badge: uppercase text word in info ink, emerging/new only — 11px is uppercase-only (LEX-16 carries over), no glyphs. */ .iu-axis-badge { font: 600 11px/16px var(--iu-font-ui); text-transform: uppercase; letter-spacing: 0.04em; color: var(--iu-info-fg); white-space: nowrap; } /* Right side of line 1: swatch + "Legislation 3 · Case law 2" — mono 12. No nowrap: on a narrow column the cluster wraps rather than crushing the min-width:0 headline beside it. */ .iu-axis-counts { font: 400 12px/16px var(--iu-font-num); color: var(--iu-fg-secondary); } .iu-axis-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; margin-top: 6px; } .iu-axis-seg--news { background: var(--iu-viz-news); } .iu-axis-seg--leg { background: var(--iu-viz-leg); } .iu-axis-seg--case { background: var(--iu-viz-case); } /* Column tail: the count==1 singletons as QUIET links after a microlabel lead-in — deliberately not the ranked-row dress (one mention is never a trend, contract §5). */ .iu-also-once { margin-top: 12px; font: 400 13px/18px var(--iu-font-ui); color: var(--iu-fg-secondary); } .iu-also-once-lead { display: block; font: 600 11px/16px var(--iu-font-ui); text-transform: uppercase; letter-spacing: 0.04em; color: var(--iu-fg-muted); margin-bottom: 4px; } .iu-also-once-link { color: var(--iu-fg-secondary); text-decoration: underline; text-underline-offset: 3px; } .iu-also-once-link:hover { color: var(--iu-link-hover); } /* --- 3 · CASE-LAW STRIP — two bordered blocks, side by side >=900 ------ */ .iu-strip-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; } .iu-strip-lead { min-width: 0; } /* Courts after the ground: mono, muted, "(HCA · FCA)". */ .iu-strip-courts { font: 400 12px/16px var(--iu-font-num); color: var(--iu-fg-muted); white-space: nowrap; } /* --- 4 · EMERGING — the slim "newly surfacing" band -------------------- */ .iu-emerging-band { border-top: 1px solid var(--iu-hairline); padding-top: 16px; } .iu-emerging-row { padding-block: 6px; border-bottom: 1px solid var(--iu-hairline); } .iu-emerging-row:last-of-type { border-bottom: 0; } .iu-emerging-line { display: flex; align-items: baseline; gap: 8px; } /* The window-vs-baseline note: mono, muted — numbers in words, no deltas. */ .iu-emerging-note { font: 400 12px/16px var(--iu-font-num); color: var(--iu-fg-muted); margin-top: 2px; } /* --- 5 · SECONDARY GRID — volume + profiles + co-occurrence ------------ */ .iu-secondary-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; } /* Volume spans the full row; its three tiles cover DIFFERENT windows and are never summed into one number (hard rule 5). */ .iu-insight--volume { grid-column: 1 / -1; } .iu-volume-tiles { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; } .iu-volume-tile { min-width: 0; } /* The tile's window caption: mono 12, muted — "past 30 days". */ .iu-volume-window { font: 400 12px/16px var(--iu-font-num); color: var(--iu-fg-muted); margin-top: 4px; } /* The headline number: mono at the 24px step, tabular like everything. */ .iu-volume-total { font: 400 24px/32px var(--iu-font-num); color: var(--iu-fg); margin-top: 2px; } /* Rolling-7 sparkline per tile: the shared .iu-spark machinery, stroke and dot re-inked per kind by descendant token — colour never rides alone (the tile's KindMark word + totals carry the meaning; the unlabelled sparkline is aria-hidden decoration). */ .iu-volume-tile .iu-spark { display: block; margin-top: 8px; width: 120px; height: 28px; } .iu-volume-tile--news .iu-spark-line { stroke: var(--iu-viz-news); } .iu-volume-tile--news .iu-spark-dot { fill: var(--iu-viz-news); } .iu-volume-tile--leg .iu-spark-line { stroke: var(--iu-viz-leg); } .iu-volume-tile--leg .iu-spark-dot { fill: var(--iu-viz-leg); } .iu-volume-tile--case .iu-spark-line { stroke: var(--iu-viz-case); } .iu-volume-tile--case .iu-spark-dot { fill: var(--iu-viz-case); } /* An all-zero tile keeps the flat baseline treatment — the kind stroke must not win over the flat restyle. */ .iu-volume-tile .iu-spark-line.iu-spark-flat { stroke: var(--iu-border); } /* Profile facets: instrument type / sub-domain / court / grounds mini tables (value left, mono count right). */ .iu-facet-table { width: 100%; border-collapse: collapse; } .iu-facet-table td { padding: 4px 0; border-bottom: 1px solid var(--iu-hairline); font: 400 13px/18px var(--iu-font-ui); color: var(--iu-fg-secondary); } /* Only the table's FINAL row drops its rule — with the R3.2 cap the table may carry a second (hidden) tbody of overflow rows, and the collapsed state keeps the visible tbody's last hairline like every other capped list does. */ .iu-facet-table tbody:last-of-type tr:last-child td { border-bottom: 0; } .iu-facet-table .iu-td-num { color: var(--iu-fg-secondary); } .iu-facet-label { font: 600 11px/16px var(--iu-font-ui); text-transform: uppercase; letter-spacing: 0.04em; color: var(--iu-fg-muted); margin-top: 12px; margin-bottom: 4px; } .iu-facet-label:first-child { margin-top: 0; } /* >=640: the three volume tiles sit abreast. */ @media (min-width: 640px) { .iu-volume-tiles { grid-template-columns: repeat(3, 1fr); } } /* >=900: the case-law strip and the secondary grid pair up. */ @media (min-width: 900px) { .iu-strip-grid, .iu-secondary-grid { grid-template-columns: repeat(2, 1fr); } } /* ========================================================================== 19 · SUBSCRIBE BAND (all pages, above footer) R2.2: full container width, below the split — the strong rule spans the whole container. Inner content keeps its own measures (68ch copy, the form capped at 720px so the inputs stay a sane length). ========================================================================== */ .iu-subscribe { border-top: 1px solid var(--iu-border); /* the strong rule */ margin-top: 56px; padding-top: 32px; } .iu-subscribe .iu-kind-row { color: var(--iu-fg-muted); /* — EMAIL BRIEFING is a neutral microlabel */ margin-bottom: 12px; } .iu-subscribe-title { font: 600 18px/26px var(--iu-font-ui); color: var(--iu-fg); margin-bottom: 8px; } .iu-subscribe-desc { font: 400 16px/28px var(--iu-font-doc); color: var(--iu-fg-secondary); max-width: 68ch; margin-bottom: 20px; } .iu-subscribe-form { display: flex; align-items: flex-end; gap: 12px; max-width: 720px; } .iu-subscribe-form .iu-field { flex: 1 1 0; } .iu-subscribe-form .iu-btn-primary { flex: none; } .iu-subscribe-microcopy { font: 400 12px/16px var(--iu-font-ui); color: var(--iu-fg-muted); margin-top: 12px; max-width: 68ch; } /* Status region (role="status" aria-live="polite"): swaps in a state triplet — success replaces the form; 429/503 leave the form in place. */ .iu-subscribe-status { margin-top: 16px; } .iu-subscribe-status:empty { display: none; } /* ========================================================================== 20 · STATE PANELS — ok / warn / err / info triplets Used by: 503 (info), 429 (warn), subscribe success (ok), noscript (info). ========================================================================== */ .iu-state { border: 1px solid; border-radius: 6px; padding: 16px 20px; font: 400 14px/20px var(--iu-font-ui); max-width: 68ch; } .iu-state--ok { background: var(--iu-ok-bg); color: var(--iu-ok-fg); border-color: var(--iu-ok-border); } .iu-state--warn { background: var(--iu-warn-bg); color: var(--iu-warn-fg); border-color: var(--iu-warn-border); } .iu-state--err { background: var(--iu-err-bg); color: var(--iu-err-fg); border-color: var(--iu-err-border); } .iu-state--info { background: var(--iu-info-bg); color: var(--iu-info-fg); border-color: var(--iu-info-border); } .iu-state .iu-btn-ghost { margin-top: 12px; color: inherit; border-color: currentColor; } /* Empty state: quiet copy under the count line, no illustration */ .iu-empty { font: 400 16px/28px var(--iu-font-doc); color: var(--iu-fg-muted); max-width: 68ch; padding-block: 24px; } /* ========================================================================== 21 · LOADING SKELETONS Shown ONLY under html.js (no-JS visitors get the noscript panel instead). html.js is set by each page module's boot() — NOT by the pre-paint bootstrap — so a failed module load shows the static content, never an eternal shimmer. Shimmer is an opacity pulse — the no-gradient law applies to skeletons too. ========================================================================== */ .iu-skeleton { display: none; } html.js .iu-skeleton { display: grid; grid-template-columns: 48px minmax(0, 1fr); padding-block: 24px; border-bottom: 1px solid var(--iu-hairline); } .iu-skel { background: var(--iu-bg-inset); border-radius: 4px; animation: iu-pulse 1.2s var(--iu-ease) infinite; } .iu-skel-rank { width: 32px; height: 24px; } .iu-skel-headline { width: 60%; height: 16px; } .iu-skel-meta { width: 40%; height: 12px; margin-top: 8px; } .iu-skel-summary { width: 90%; height: 12px; margin-top: 12px; } /* Skeletons must match the anatomy they stand in for (spec §6). Two extra variants for the trends page, so the swap-in is not a layout jump: - table skeleton: header sliver + rows of rank / keyword bar / sparkline box / three numeric slivers (mirrors the 6-column trend table); - block skeleton: bordered box (radius 6) with a microlabel bar + two row slivers (mirrors an insights block). Both stay behind the same html.js gate as the base skeleton. */ .iu-skeleton--table, .iu-skeleton--block { display: none; } html.js .iu-skeleton--table { display: block; } .iu-skel-table-head { width: 40%; height: 11px; margin-block: 12px; } .iu-skel-table-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 96px 56px 56px 56px; gap: 12px; align-items: center; padding-block: 12px; border-bottom: 1px solid var(--iu-hairline); } .iu-skel-cell-rank { width: 24px; height: 13px; } .iu-skel-cell-keyword { width: 60%; height: 14px; } .iu-skel-cell-spark { width: 96px; height: 28px; } .iu-skel-cell-num { height: 13px; justify-self: stretch; } html.js .iu-skeleton--block { display: block; border: 1px solid var(--iu-border); border-radius: 6px; padding: 20px; } .iu-skel-microlabel { width: 35%; height: 11px; margin-bottom: 12px; } .iu-skel-block-row { width: 100%; height: 13px; } .iu-skel-block-row + .iu-skel-block-row { margin-top: 8px; } /* Insights-flow bones (trends page): a hero bone (title sliver + two card slivers under the band's strong rule) and three axis columns of row slivers — matching the redesigned flow's geometry, so the swap-in is not a layout jump. Same html.js gate as every skeleton. */ .iu-skel-hero, .iu-skel-axes { display: none; } html.js .iu-skel-hero { display: block; border-top: 1px solid var(--iu-border); padding-top: 20px; } .iu-skel-hero-title { width: 25%; height: 18px; } /* Mirrors .iu-hero-grid exactly (min(100%, …) floor + 24/32 gap) — a skeleton that overflows where the real grid doesn't IS a layout jump. */ .iu-skel-hero-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 24px 32px; margin-top: 16px; } .iu-skel-hero-card { height: 72px; } html.js .iu-skel-axes { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 900px) { html.js .iu-skel-axes { grid-template-columns: repeat(3, 1fr); } } .iu-skel-axis-col { min-width: 0; } @keyframes iu-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* ========================================================================== 22 · DARK-THEME COMPONENT OVERRIDES Only for values that cannot live in the token blocks. The filled CTA uses #1f45b4 in dark (spec §6); hover deepens to #17358b — white text stays >=7:1 on both. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-iu-theme="light"]) .iu-btn-primary { background: #1f45b4; } :root:not([data-iu-theme="light"]) .iu-btn-primary:hover:not([disabled]) { background: #17358b; } /* R2.4/R4: in dark the navy logo plate gains a 1px --iu-border so it reads against the near-navy page; in light it needs no outline. */ :root:not([data-iu-theme="light"]) .iu-logo { outline: 1px solid var(--iu-border); outline-offset: -1px; } } :root[data-iu-theme="dark"] .iu-btn-primary { background: #1f45b4; } :root[data-iu-theme="dark"] .iu-btn-primary:hover:not([disabled]) { background: #17358b; } :root[data-iu-theme="dark"] .iu-logo { outline: 1px solid var(--iu-border); outline-offset: -1px; } /* ========================================================================== 23 · REDUCED MOTION — kills every transition and the skeleton shimmer ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .iu-skel { animation: none !important; } } /* ========================================================================== 24 · RESPONSIVE Gutters: 16 <640 · 24 >=640 · 32 >=900 — capped at 1023px, because from 1024px the container switches to min(74%, 1440px) with no inline padding (section 07) and an uncapped gutter rule here would win the cascade. ========================================================================== */ @media (min-width: 640px) and (max-width: 1023px) { .iu-container { padding-inline: 24px; } } @media (min-width: 900px) and (max-width: 1023px) { .iu-container { padding-inline: 32px; } } /* (The insights section's own responsive rules live with it in section 18: the flow is one column of bands at every width; the axis columns, the strip, the secondary grid and the volume tiles split internally.) */ /* <640: sparkline narrows to 80px. height:auto lets the box track the 'meet'-scaled viewBox (80x23.3) instead of letterboxing the drawing in a fixed 28px box — the baseline stays on the visual bottom. */ @media (max-width: 639px) { .iu-spark { width: 80px; height: auto; } .iu-header-main .iu-container { height: auto; flex-direction: column; align-items: flex-start; gap: 4px; padding-block: 12px; } } /* <560: SHARE column drops from the trend table (returns at >=560) */ @media (max-width: 559px) { .iu-col-share { display: none; } } /* <480: single column, nav scrolls horizontally, rank 18px, sparkline 64px */ @media (max-width: 479px) { /* The nav becomes its own scroll container, which would clip the focus signature (2px outline + 2px offset + 4px halo ~ 6px past the links' 4px block padding). Negative margins + matching padding give the halo breathing room on every side without moving the nav in the layout. */ .iu-nav { align-self: stretch; /* full row, without fighting the negative margins */ overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; padding-block: 8px; margin-block: -8px; padding-inline: 8px; margin-inline: -8px; scroll-padding-inline: 8px; } .iu-item, html.js .iu-skeleton { grid-template-columns: 32px minmax(0, 1fr); } .iu-item-rank { font-size: 18px; line-height: 26px; } .iu-spark { width: 64px; height: auto; /* keep the drawing's own aspect — no letterboxing */ } .iu-trend-table th, .iu-trend-table td { padding-inline: 8px; } .iu-subscribe-form { flex-direction: column; align-items: stretch; } .iu-pagination { flex-wrap: wrap; } } /* ========================================================================== 25 · PRINT Force light tokens, hide chrome + interactive-only elements, expand clamps, print external hrefs after headline links. ========================================================================== */ @media print { /* Force the light palette regardless of toggle or system preference — selectors match the specificity of both dark blocks and, being later in the file, win the tie. */ :root, :root:not([data-iu-theme="light"]), :root[data-iu-theme="dark"] { color-scheme: light; --iu-bg-page: #ffffff; --iu-bg-surface: #ffffff; --iu-bg-inset: #eef1f7; --iu-bg-hover: #ffffff; --iu-hairline: #dde2ec; --iu-border: #c2cad9; --iu-border-strong:#98a3b8; --iu-border-control:#6f7c93; --iu-fg: #0a1628; --iu-fg-secondary: #3d4b60; --iu-fg-muted: #5a6a80; --iu-link: #17358b; --iu-link-hover: #112663; --iu-kind-news: #174a80; --iu-kind-leg: #7a6230; --iu-kind-case: #155c35; --iu-ok-bg:#e9f4ec; --iu-ok-fg:#155c35; --iu-ok-border:#a8d6b8; --iu-warn-bg:#fdf4e4;--iu-warn-fg:#6d4700;--iu-warn-border:#f3d096; --iu-err-bg:#fcedec; --iu-err-fg:#8b1c19; --iu-err-border:#f0b7b3; --iu-info-bg:#eaf2fb;--iu-info-fg:#174a80;--iu-info-border:#a6c8ec; --iu-viz-line: #1f45b4; --iu-viz-up: #1e7a46; --iu-viz-down: #b22622; --iu-viz-grid: #dde2ec; --iu-viz-news: #1f45b4; --iu-viz-leg: #7a6230; --iu-viz-case: #1e7a46; --iu-brand-block: #1d2a66; --iu-brand-accent: #2563eb; --iu-focus-inner: #0a1628; --iu-focus-outer: #ffc400; } /* Chrome and interactive-only elements have no meaning on paper. The side rail is cross-navigation (it duplicates other surfaces), so it goes too — and the split collapses to one column. */ .iu-nav, .iu-footer-nav, .iu-header-actions, .iu-theme-toggle, .iu-subscribe, .iu-pagination, .iu-skeleton, .iu-skeleton--table, .iu-skeleton--block, .iu-catchwords-toggle, .iu-dd-footer, .iu-kind-tabs, .iu-split-aside { display: none !important; } .iu-split { display: block; } /* Expand every clamp — print shows the full text */ .iu-item-headline a, .iu-summary, .iu-catchwords { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } /* Print the destination of outbound links */ .iu-item-headline a[href^="http"]::after, .iu-meta-links a[href^="http"]::after { content: " (" attr(href) ")"; font: 400 11px/16px var(--iu-font-num); color: var(--iu-fg-muted); word-break: break-all; } .iu-item { break-inside: avoid; } .iu-drilldown, .iu-insight { break-inside: avoid; border-color: var(--iu-border); } }