/* Hallmark · shape: app screen · genre: editorial · theme: Ink restyled by request (white base, navy ink, one vermilion, Noto Sans JP) · job: hire · draw: none
 * hero: none · nav: top bar · footer: colophon · imagery: the product built · signature: the map of investment themes across industry groups · ink: paper
 * axes: light/grotesk-sans/chromatic-vermilion · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · the server withholds locked values; the blurred sheet from a fixed line down is presentation only, drawn from a blurred copy of the screen */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: E, three entrances that all end at one company and its plan */
@import url("./tokens.css");
@import url("./base.css");
@import url("./components.css");

/* The app moves to a section at once. Readers scan long pages, and a glide on every jump adds up. */
html { scroll-behavior: auto; }

:root {
  --blur-soft: 7px;
  --veil-top: 30rem;
  --main-top: var(--space-xl);
  --main-pad: var(--space-lg);
  --bar-base: 60px;
  --bar: var(--bar-base);
  --mini: 2.25rem;
  --shell: 1920px;
  --scrim: oklch(23% 0.05 258 / 0.4);
  --color-tint-full: oklch(90% 0.022 258);
  --color-series-2: oklch(72% 0.11 248);

}

h1, h2 { color: var(--color-ink); font-weight: 700; font-feature-settings: "palt"; max-width: none; }
h1 { font-size: var(--text-2xl); line-height: 1.3; }
h2 { font-size: var(--text-lg); line-height: 1.35; }
h3 { max-width: none; color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.main:focus, h1:focus { outline: none; }

/* the app is built for a PC width; a phone gets a note instead of a cramped screen */
.narrow { display: none; }
@media (max-width: 47.99rem) {
  .narrow { display: grid; align-content: center; justify-items: start; gap: var(--space-md); min-height: 100dvh; padding: var(--space-xl) var(--space-lg); }
  .narrow__logo { width: 11rem; height: auto; margin-bottom: var(--space-sm); }
  .narrow__title { margin: 0; font-size: var(--text-xl); font-weight: 700; color: var(--color-ink); }
  .narrow p { margin: 0; line-height: 1.8; }
  .ws { display: none !important; }
}
.ws { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; min-height: 100dvh; }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .ws { view-transition-name: app-surface; }
}

/* top bar */
.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-ink); color: var(--color-on-ink-2); }
.bar__inner { display: flex; align-items: center; gap: var(--space-xl); max-width: var(--shell); min-height: var(--bar-base); margin-inline: auto; padding-inline: var(--space-lg); }
.bar__nav { display: flex; align-self: stretch; gap: var(--space-2xs); min-width: 0; margin-inline-end: auto; overflow-x: auto; scrollbar-width: none; }
.bar__nav a { display: flex; align-items: center; padding-inline: var(--space-sm); border-block-end: 3px solid transparent; border-block-start: 3px solid transparent; font-size: var(--text-sm); color: var(--color-on-ink-2); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out); }
.bar__nav svg { flex: none; width: 15px; height: 15px; margin-inline-end: 0.5em; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linejoin: miter; opacity: 0.55; }
.bar__nav a[aria-current="page"] svg { opacity: 1; }
.bar__nav a:hover { background: var(--color-on-ink-hover); }
.bar__nav a[aria-current="page"] { border-block-end-color: var(--color-accent); color: var(--color-on-ink); font-weight: 600; }
.bar__nav a.bar__nav-sub { align-self: center; margin-inline-start: var(--space-2xs); padding-inline: var(--space-xs); border: 0; box-shadow: inset 1px 0 0 var(--color-on-ink-rule); font-size: var(--text-xs); font-weight: 400; opacity: 0.65; }
.bar__nav a.bar__nav-sub:hover { background: none; opacity: 1; }
.bar__nav a.bar__nav-sub[aria-current="page"] { border: 0; opacity: 1; font-weight: 600; }
.bar__side { display: flex; align-items: center; gap: var(--space-md); }
.bar__link { font-size: var(--text-sm); color: var(--color-on-ink); white-space: nowrap; text-underline-offset: 0.2em; }
.bar :focus-visible { outline-color: var(--color-on-ink); }
/* Once the page head scrolls away, its title stays as a thin strip under the bar; absolute so the layout never shifts. */
.bar__mini { position: absolute; inset-inline: 0; top: 100%; background: var(--color-paper); border-block-end: var(--rule-hair) solid var(--color-rule); opacity: 0; transform: translateY(-6px); visibility: hidden; transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out), visibility 0s var(--dur-short); }
/* Other sticky parts (table toolbars, side panels) move down under the strip. */
:root.is-mini { --bar: calc(var(--bar-base) + var(--mini)); }
.is-mini .bar__mini { opacity: 1; transform: none; visibility: visible; transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.bar__mini-title { max-width: var(--shell); height: var(--mini); margin: 0 auto; padding-inline: var(--main-pad); line-height: var(--mini); overflow: hidden; font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); white-space: nowrap; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .bar__mini, .is-mini .bar__mini { transition: none; } }

/* controls */
/* Shape and colour come from components.css; the screen keeps the tighter cut. */
.btn { min-height: 40px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.btn:active { background: var(--color-rule); }
.btn--small { min-height: 34px; }
.tag { padding: var(--space-3xs) var(--space-xs); }
.bar .tag { box-shadow: inset 0 0 0 var(--rule-hair) var(--color-on-ink-rule); color: var(--color-on-ink); }
.bar .tag.is-in, .tag--in { background: var(--color-accent-soft); box-shadow: none; color: var(--color-accent-soft-ink); }
.tag--gap { box-shadow: none; border: var(--rule-hair) dashed var(--color-rule); color: var(--color-muted); font-weight: 500; }
.tag--line { box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); color: var(--color-muted); }
.link, .row-link { font-weight: 600; color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-micro) var(--ease-out); }
.link:hover, .row-link:hover { text-decoration-color: var(--color-accent); }
/* A source in a table is a reference, not the reading: small, quiet, one line. */
.table .src { font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); white-space: nowrap; }
.table .src:hover { color: var(--color-ink-2); }
button.link { padding: 0; border: 0; background: none; cursor: pointer; justify-self: start; }
.field { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.field input, .field select, .code-form input { width: 100%; min-height: 40px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); }
.field input:focus-visible, .field select:focus-visible, .code-form input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -1px; }
.field input:disabled { background: var(--color-paper-2); border-color: var(--color-rule); color: var(--color-muted); cursor: not-allowed; }
.field input::placeholder { color: var(--color-muted); }

/* the lock: one sheet from a fixed line down, plus the paid figures that never unlock */
.main { position: relative; }
.main:has(.veil) { min-height: calc(var(--veil-top) + 26rem); overflow: clip; }
.main:has(.veil) > .page:not(.page--blur) { -webkit-mask-image: linear-gradient(to bottom, var(--color-ink) calc(var(--veil-top) - var(--main-top) - 6rem), transparent calc(var(--veil-top) - var(--main-top))); mask-image: linear-gradient(to bottom, var(--color-ink) calc(var(--veil-top) - var(--main-top) - 6rem), transparent calc(var(--veil-top) - var(--main-top))); }
.page--blur { position: absolute; inset: var(--main-top) var(--main-pad) auto; filter: blur(var(--blur-soft)); pointer-events: none; user-select: none; -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--veil-top) - var(--main-top) - 6rem), var(--color-ink) calc(var(--veil-top) - var(--main-top))); mask-image: linear-gradient(to bottom, transparent calc(var(--veil-top) - var(--main-top) - 6rem), var(--color-ink) calc(var(--veil-top) - var(--main-top))); }
.veil { position: absolute; inset: var(--veil-top) 0 0; z-index: var(--z-raised); }
.veil__gate { position: sticky; top: calc(var(--bar) + 40vh); display: grid; justify-items: center; gap: var(--space-md); width: min(26rem, 100% - var(--space-xl)); margin: var(--space-3xl) auto 0; padding: var(--space-xl); background: var(--color-paper); border-radius: var(--radius-card); box-shadow: var(--shadow-card); text-align: center; color: var(--color-ink); font-weight: 600; }
/* a value the server withheld: an empty bar, no text behind it */
.sealed { display: inline-block; height: 0.9em; vertical-align: middle; border-radius: var(--radius-control); background: var(--color-paper-3); }
.sealed--0 { width: 62%; min-width: 4rem; }
.sealed--1 { width: 84%; min-width: 5rem; }
.sealed--2 { width: 45%; min-width: 3rem; }
.paid .sealed { width: 4rem; min-width: 0; background: var(--color-on-ink-rule); }
.skeleton { display: grid; gap: var(--space-md); }
.skeleton span, .ghost__bar { display: block; height: 1.25rem; border-radius: var(--radius-control); background: linear-gradient(90deg, var(--color-paper-3) 0 40%, var(--color-paper-2) 50%, var(--color-paper-3) 60% 100%) 100% 0 / 300% 100%; animation: sweep 1.4s var(--ease-in-out) infinite; }
.skeleton span:nth-child(1) { width: 30%; height: 2rem; }
.skeleton span:nth-child(2) { width: 62%; }
.skeleton span:nth-child(3) { width: 100%; height: 12rem; }
/* the page's chapters and headings drawn before its data arrives; held back 300ms so a fast answer shows no frame at all */
.ghost { display: grid; gap: var(--space-xl); animation: appear 0s 300ms both; }
.ghost__item { display: grid; gap: var(--space-xs); }
.ghost__item h2 { color: var(--color-muted); }
.ghost__bar { height: 0.875rem; width: 92%; }
.ghost__bar + .ghost__bar { width: 58%; }
.is-arrived { animation: rise var(--dur-long) var(--ease-out) both; }
@keyframes sweep { to { background-position: 0 0; } }
@keyframes appear { from { visibility: hidden; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .skeleton span, .ghost__bar, .is-arrived { animation: none; } }

/* page frame */
.main { width: 100%; max-width: var(--shell); margin-inline: auto; padding: var(--main-top) var(--main-pad) var(--space-lg); }
.page { display: grid; gap: var(--space-2xl); }
.page__head { display: grid; gap: var(--space-xs); }
/* The lead sits right on top of the body; the page's wide gap is for the sections after it. */
.page > .page__head { margin-block-end: calc(var(--space-md) - var(--space-2xl)); }
.page__line { font-size: var(--text-md); }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-muted); }
.crumbs li + li::before { content: "/"; margin-inline-end: var(--space-xs); }
.crumbs a { color: var(--color-ink-2); text-underline-offset: 0.2em; }
.block { display: grid; gap: var(--space-md); }
.block__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xs) var(--space-md); }
.plain-list.sources { font-size: var(--text-sm); color: var(--color-muted); }
.sources .row-link { font-weight: 400; color: inherit; }

/* tables */
/* A table longer than ten rows keeps ten in view and scrolls the rest inside its frame. */
.table-scroll--window { overflow-y: auto; overscroll-behavior: contain; }
.table-scroll--window thead th { position: sticky; inset-block-start: 0; z-index: 1; background: var(--color-paper); box-shadow: inset 0 calc(-1 * var(--rule-hair)) 0 var(--color-rule); }
.table { width: 100%; border-collapse: collapse; border-block-start: var(--rule-hair) solid var(--color-ink); font-size: var(--text-sm); }
.table th, .table td { padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-block-end: var(--rule-hair) solid var(--color-rule); text-align: start; vertical-align: top; }
.table thead th { font-weight: 400; color: var(--color-muted); white-space: nowrap; }
.table tbody th { font-weight: 600; color: var(--color-ink); white-space: nowrap; }
.table tbody tr:hover > * { background: var(--color-paper-2); }
.table tbody tr:has(> th[scope="row"] a.row-link) { cursor: pointer; }
/* A 大区分 heading: the chevron folds its industries, the name opens the 大区分 page. */
.table tbody tr.grp { cursor: pointer; }
.table tbody tr.grp > th { border-block-end: var(--rule-hair) solid var(--color-ink); font-weight: 600; color: var(--color-ink); }
.grp__toggle { display: inline-grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; margin-inline-end: var(--space-2xs); padding: 0; border: 0; background: none; color: var(--color-muted); cursor: pointer; vertical-align: middle; }
.grp__toggle:hover { color: var(--color-ink); }
.grp__toggle svg { inline-size: 12px; block-size: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: rotate var(--dur-micro) var(--ease-out); }
.grp__toggle[aria-expanded="false"] svg { rotate: -90deg; }
.grp__n { margin-inline-start: var(--space-xs); font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); }
tbody.is-collapsed > tr:not(.grp) { display: none; }
.table .dt__pad > td { padding: 0; border: 0; }
.table tbody tr.dt__pad:hover > * { background: none; }
.table .num { white-space: nowrap; }

/* home */
.search { position: relative; display: grid; gap: var(--space-2xs); max-width: 40rem; }
.home-top { display: grid; justify-items: center; gap: var(--space-md); padding-block: var(--space-2xl) var(--space-xl); text-align: center; }
.page > .home-top { margin-block-end: 0; }
/* The five doors keep a readable card width on a wide screen. */
.page > .home-top, .page > .doors { width: 100%; max-width: 72rem; margin-inline: auto; }
.search--home { width: 100%; max-width: 40rem; }
.search--home input { width: 100%; height: 3.25rem; padding: 0 var(--space-lg) 0 3rem; border: var(--rule-hair) solid var(--color-rule-2); border-radius: 999px; background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); box-shadow: 0 1px 6px rgb(0 0 0 / 0.08); }
.search--home input:hover, .search--home input:focus { box-shadow: 0 2px 10px rgb(0 0 0 / 0.14); outline: none; }
.search--home input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.search__icon { position: absolute; inset-inline-start: 1.1rem; top: 1.625rem; width: 20px; height: 20px; transform: translateY(-50%); fill: none; stroke: var(--color-muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.search--home .sugg { text-align: start; border-radius: 16px; }
/* the same search in the top bar, held at the right edge */
.search--bar { flex: none; max-width: none; }
.search--bar input { width: 15rem; height: 34px; padding: 0 2.75rem 0 2rem; border: var(--rule-hair) solid var(--color-on-ink-rule); border-radius: var(--radius-control); background: oklch(99.8% 0.002 258 / 0.08); color: var(--color-on-ink); font-size: var(--text-sm); }
.search--bar input::placeholder { color: var(--color-on-ink-2); opacity: 0.8; }
.search--bar input:hover { background: oklch(99.8% 0.002 258 / 0.14); }
.search--bar input:focus { background: var(--color-paper); color: var(--color-ink); }
.search--bar input:focus::placeholder { color: var(--color-muted); }
.search--bar input:focus-visible { outline: 2px solid var(--color-on-ink); outline-offset: 2px; }
.search--bar .search__icon { inset-inline-start: 10px; top: 50%; width: 16px; height: 16px; stroke: var(--color-on-ink-2); }
.search--bar:focus-within .search__icon { stroke: var(--color-muted); }
.search--bar .search__hint { position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); color: var(--color-on-ink-2); font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.02em; opacity: 0.75; pointer-events: none; }
.search--bar:focus-within .search__hint, .search--bar input:not(:placeholder-shown) ~ .search__hint { opacity: 0; }
.search--bar .sugg { inset-inline: auto 0; width: min(22rem, calc(100vw - 2 * var(--space-md))); text-align: start; }
.sugg { position: absolute; inset-inline: 0; top: 100%; z-index: 20; margin: 2px 0 0; padding: var(--space-2xs) 0; list-style: none; background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-2); border-radius: 6px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.08); }
.sugg a { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs) var(--space-md); color: var(--color-ink); text-decoration: none; }
.sugg a:hover, .sugg [aria-selected="true"] a { background: var(--color-paper-2); }
.sugg__child a { position: relative; padding-inline-start: calc(var(--space-md) + 18px); }
.sugg__child a::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: calc(var(--space-md) + 5px); border-inline-start: var(--rule-hair) solid var(--color-rule); }
.sugg__child a::after { content: ""; position: absolute; inset-inline-start: calc(var(--space-md) + 5px); top: 50%; width: 9px; border-block-start: var(--rule-hair) solid var(--color-rule); }
.sugg__kind { flex: none; font-size: var(--text-xs); color: var(--color-muted); }
.entrance { display: grid; align-content: start; gap: var(--space-xs); height: 100%; padding: var(--space-lg); color: var(--color-ink-2); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out); }
.entrance:hover { background: var(--color-paper-2); }
.entrance:focus-visible { outline-offset: -2px; }
.entrance strong { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--color-ink); }
.entrance span { font-size: var(--text-sm); }
.doors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-block: var(--rule-hair) solid var(--color-ink); }
.doors > li + li { border-inline-start: var(--rule-hair) solid var(--color-rule); }
.door { position: relative; display: flex; flex-direction: column; gap: var(--space-xs); height: 100%; padding: var(--space-lg) var(--space-md); transition: background-color var(--dur-micro) var(--ease-out); }
.door:hover { background: var(--color-paper-2); }
.door__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.door__no { font-variant-numeric: tabular-nums; font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--color-muted); transition: color var(--dur-micro) var(--ease-out); }
.door__art { width: 100%; height: auto; margin-block: var(--space-2xs) 0; overflow: visible; }
.door__art text { font-family: var(--font-body); font-size: 9px; fill: var(--color-muted); font-variant-numeric: tabular-nums; }
.door__art .a-label { font-size: 9px; fill: var(--color-ink-2); }
.door__art .a-num { font-size: 8px; fill: var(--color-muted); }
.door__art .a-rule { fill: none; stroke: var(--color-rule); stroke-width: 1; }
.door__art .a-rule-strong { fill: none; stroke: var(--color-muted); stroke-width: 1; opacity: 0.35; }
.door__art .a-now { stroke: var(--color-accent); stroke-width: 1; opacity: 0.35; }
.door__art .a-tick { stroke: var(--color-accent); stroke-width: 1.6; }
.door__art .a-ink { fill: var(--color-ink); }
.door__art .a-accent { fill: var(--color-accent); }
.door__art .a-dot { fill: var(--color-ink); fill-opacity: 0.5; }
.door__art .a-box { fill: var(--color-paper-2); stroke: var(--color-rule); stroke-width: 1; }
.door__art .a-box--full { fill: var(--color-accent-soft); }
.door__cap { margin: 0; font-size: 0.75rem; color: var(--color-muted); }
.door__go { width: 16px; height: 16px; fill: none; stroke: var(--color-muted); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--dur-micro) var(--ease-out), translate var(--dur-micro) var(--ease-out); }
.door:hover .door__go { stroke: var(--color-accent); translate: 3px 0; }
.door__name { font-size: var(--text-xl); line-height: 1.2; }
.door__name a { color: var(--color-ink); }
.door__name a::after { content: ""; position: absolute; inset: 0; }
.door__name a:focus-visible { outline: none; }
.door__name a:focus-visible::after { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.door__ask { margin: var(--space-2xs) 0 0; color: var(--color-muted); }
.door__items { margin: 0; padding-inline-start: 1.2em; font-size: var(--text-sm); }
.door__to { margin-block-start: auto; padding-block-start: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
/* Home: the search and the five doors make one block. On a tall screen the block sits in the middle of
   the page, so the paper under the doors does not open a band before the footer. */
.main:has(.home-top) { display: grid; align-content: safe center; }
.main:has(.home-top) > .page { width: 100%; }
.main:has(.home-top) .home-top { padding-block: 0; }

/* industries */
.groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); }
.group h2 { padding-block-end: var(--space-xs); border-block-end: var(--rule-hair) solid var(--color-ink); }
.group__list { margin: 0; padding: 0; list-style: none; }
.group__list a { display: grid; gap: var(--space-3xs); padding-block: var(--space-sm); border-block-end: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out); }
.group__list a:hover { background: var(--color-paper-2); }
.group__list strong { font-weight: 600; color: var(--color-ink); }
.group__list span { font-size: var(--text-sm); }

/* the map: investment themes across industry groups */

/* stage tracker and curve */
.curve { margin: 0; }
.chart { width: 100%; height: auto; max-height: 20rem; }
.chart__label { font-size: 13px; fill: var(--color-muted); font-family: var(--font-body); stroke: var(--color-paper); stroke-width: 4px; paint-order: stroke; }
.chart__label.is-on { font-weight: 700; fill: var(--color-ink); }

/* two columns: report and plan */
.facts { margin: 0; border-block-start: var(--rule-hair) solid var(--color-ink); }
/* Label above its text: a sentence gets the full width, and a long label never breaks into two lines. */
.facts > div { display: grid; gap: var(--space-3xs); padding-block: var(--space-sm); border-block-end: var(--rule-hair) solid var(--color-rule); }
.facts dd { margin: 0; color: var(--color-ink); }
.figure { font-variant-numeric: tabular-nums; }
.plan { display: grid; gap: var(--space-md); padding: var(--space-lg); background: var(--color-paper-2); border-block-start: 2px solid var(--color-accent); }
.plan ol { display: grid; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.plan li { display: grid; gap: var(--space-3xs); color: var(--color-ink); font-weight: 600; }
.plan li > span:first-child { font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); }
.paid { display: grid; gap: var(--space-md); padding: var(--space-lg); background: var(--color-ink); color: var(--color-on-ink-2); }
.paid h2 { color: var(--color-on-ink); }
.paid p { font-size: var(--text-sm); }
.paid dl { display: grid; gap: var(--space-xs); margin: 0; }
.paid dl > div { display: flex; justify-content: space-between; gap: var(--space-md); padding-block-end: var(--space-xs); border-block-end: var(--rule-hair) solid var(--color-on-ink-rule); color: var(--color-on-ink); font-size: var(--text-sm); }
.paid dd { margin: 0; white-space: nowrap; }
/* The dark panel keeps its text on ink, so a link here takes the panel's colour, not the page's ink. */
.paid .link { color: var(--color-on-ink); text-decoration-color: var(--color-on-ink-rule); }
.paid :focus-visible { outline-color: var(--color-on-ink); }

/* a company in depth */
.sect { scroll-margin-top: calc(var(--bar) + var(--space-md)); }
.sect:focus { outline: none; }
h4 { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.figures { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; border-block: var(--rule-hair) solid var(--color-ink); }
.figures > div { display: grid; align-content: start; gap: var(--space-3xs); padding: var(--space-md) var(--space-sm); }
.figures > div:first-child { padding-inline-start: 0; }
.figures > div + div { border-inline-start: var(--rule-hair) solid var(--color-rule); }
.figures dt { font-size: var(--text-sm); color: var(--color-muted); }
.figures dd { margin: 0; font-variant-numeric: tabular-nums; font-size: var(--text-xl); font-weight: 700; line-height: 1.25; color: var(--color-ink); }
/* market forecasts: a list of published sources, so the spread reads without a table */
.forecast__title { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.forecast { display: grid; gap: var(--space-sm); container-type: inline-size; }
.forecast__lead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-sm); margin: 0; }
.forecast__span { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; font-size: var(--text-2xl); font-weight: 700; line-height: 1.2; color: var(--color-ink); }
.forecast__cap { font-size: var(--text-sm); color: var(--color-muted); }
.forecast__list { margin: 0; padding: 0; list-style: none; border-block-start: var(--rule-hair) solid var(--color-ink); }
.forecast__item { display: grid; gap: var(--space-2xs); padding-block: var(--space-md); border-block-end: var(--rule-hair) solid var(--color-rule); }
.forecast__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); }
.forecast__firm { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.forecast__cagr { flex: none; font-family: var(--font-outlier); font-variant-numeric: tabular-nums; font-size: var(--text-xl); font-weight: 700; line-height: 1.1; color: var(--color-ink); }
.forecast__scope { margin: 0; color: var(--color-ink); }
.forecast__facts { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin: 0; font-size: var(--text-sm); }
.forecast__facts > div { display: flex; gap: var(--space-2xs); }
.forecast__facts dt { color: var(--color-muted); }
.forecast__facts dt::after { content: "："; }
.forecast__facts dd { margin: 0; color: var(--color-ink-2); }
.forecast__src { margin: 0; font-size: var(--text-xs); line-height: 1.6; color: var(--color-muted); }
.forecast__label { margin-inline-end: var(--space-2xs); }
.forecast__src .src { font-size: inherit; font-weight: 400; color: var(--color-muted); }
.forecast__src .src:hover { color: var(--color-ink-2); }
.forecast__src .tag { margin-inline-start: var(--space-2xs); }
/* A page wide enough gives each source its own column; the map's panel keeps them stacked. */
@container (min-width: 72rem) {
  .forecast__list { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 0 var(--space-lg); border-block-start: 0; border-block-end: var(--rule-hair) solid var(--color-rule); }
  .forecast__item { border-block-end: 0; border-block-start: var(--rule-hair) solid var(--color-ink); padding-block: var(--space-sm) var(--space-md); }
}
.table tr.is-self > * { background: var(--color-accent-soft); color: var(--color-accent-soft-ink); }
.table--bench { min-width: 96rem; }
.table--bench th, .table--bench td { white-space: nowrap; }
.chart--peers { max-height: 24rem; }
.chart__grid { stroke: var(--color-rule-2); stroke-width: 1; }
.chart__tick { font-size: 13px; fill: var(--color-muted); font-family: var(--font-body); }
.peer .chart__label { font-size: 12px; }
.peer.is-self .chart__label { font-size: 14px; }
.peer circle { fill: var(--color-muted); fill-opacity: 0.55; stroke: var(--color-paper); stroke-width: 2; }
.peer.is-self circle { fill: var(--color-accent); fill-opacity: 1; }
.peer:hover circle { fill-opacity: 1; }
.chart-sealed { display: grid; place-items: center; min-height: 16rem; background: var(--color-paper-2); }
.strengths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-lg); margin: 0; padding: 0; list-style: none; border-block-start: var(--rule-hair) solid var(--color-ink); }
.strengths li { display: grid; gap: var(--space-3xs); padding-block: var(--space-sm); border-block-end: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.strengths strong { font-size: var(--text-md); font-weight: 600; color: var(--color-ink); }
.org { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); border-block-start: var(--rule-hair) solid var(--color-ink); padding-block-start: var(--space-sm); }
.org__col { display: grid; align-content: start; gap: var(--space-xs); }
.org ul { margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.org li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2xs); padding-block: var(--space-2xs); border-block-end: var(--rule-hair) solid var(--color-rule); color: var(--color-ink); }
.keyman { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); font-size: var(--text-sm); }
.keyman > div { display: grid; align-content: start; gap: var(--space-xs); }
.keyman ol, .keyman ul { display: grid; gap: var(--space-2xs); margin: 0; padding-inline-start: 1.2em; color: var(--color-ink); }
.invest__amount { min-inline-size: 7rem; }
.invest__amount small { font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); }
.invest__bar { display: block; inline-size: 100%; block-size: 6px; margin-block-start: var(--space-3xs); }
.invest__bar rect { fill: var(--color-ink); }
.is-self .invest__bar rect { fill: var(--color-accent); }
.invest__bar--net rect { fill: var(--color-rule); }
.amap { display: grid; position: relative; gap: var(--space-xl); }
/* The two frames read as separate areas: a heavy rule and heading on each, and the industry side in its own tint. */
.amap__frame { display: grid; gap: var(--space-xs); min-width: 0; padding-block-start: var(--space-xs); border-block-start: 2px solid var(--color-ink); }
.amap__frame-title { margin: 0; font-size: var(--text-lg); }
.amap__frame--v .amap__group { background: var(--color-accent-soft); }
.amap__frame--v .amap__group--industry > h3 { display: none; }
.amap__frame--v .amap__group--industry { grid-auto-flow: column; grid-auto-columns: minmax(5rem, 1fr); align-items: start; overflow-x: auto; }
.amap__frame--v .amap__boxes { grid-template-columns: minmax(0, 1fr); }
.amap--single { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: none; }
.amap--single .amap__group { grid-area: auto; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-md); }
.amap--single .amap__group h3 { grid-column: 1 / -1; }
.amap__group { display: grid; align-content: start; gap: var(--space-2xs); padding: var(--space-xs); background: var(--color-paper-2); min-width: 0; }
.amap__group h3 { margin: 0; font-size: var(--text-sm); }
.amap__group h4 { margin: 0 0 var(--space-3xs); font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); }
.amap__layer { display: grid; gap: var(--space-3xs); }
.amap__layer-title { margin: var(--space-xs) 0 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.amap__body { display: contents; }
/* Every business row shares the same 12 tracks, so boxes line up from row to row; a section spans as many tracks as it has boxes. */
.amap__layer--app .amap__group { grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-sm); }
.amap__layer--app .amap__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xs) var(--space-3xs); }
.amap__layer--app .amap__section { grid-column: span var(--n); display: grid; grid-template-columns: subgrid; align-content: start; }
.amap__layer--app .amap__section > h4, .amap__layer--app .amap__boxes { grid-column: 1 / -1; }
.amap__layer--app .amap__boxes { grid-template-columns: subgrid; }
/* The foundation runs as full bands under the layers it carries; security runs down the side of all of them. */
.amap__layer--it { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr); grid-template-areas: "title title title title" "newit newit newit sec" "data dev ops sec" "infra infra infra sec"; }
.amap__layer--it .amap__layer-title { grid-area: title; }
.amap__layer--it .amap__group--newit { grid-area: newit; }
.amap__layer--it .amap__group--data { grid-area: data; }
.amap__layer--it .amap__group--dev { grid-area: dev; }
.amap__layer--it .amap__group--ops { grid-area: ops; }
.amap__layer--it .amap__group--infra { grid-area: infra; }
.amap__layer--it .amap__group--sec { grid-area: sec; }
.amap__layer--it .amap__boxes { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }
.amap__boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: var(--space-3xs); }
.amap__box { display: grid; place-items: center; min-height: 1.75rem; padding: 1px var(--space-2xs); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-xs); line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.amap__box.is-dim { opacity: 0.15; }
.amap__box:hover { background: var(--color-tint-full); }
.amap__box:active { background: var(--color-rule); }
.amap__box[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-on-ink); }
.bar { view-transition-name: bar; }
::view-transition-group(bar) { z-index: 1; }
::view-transition-group(*) { animation-duration: var(--dur-long); animation-timing-function: var(--ease-out); }
.is-amap-morph::view-transition-old(app-surface), .is-amap-morph::view-transition-old(root) { display: none; }
.is-amap-morph::view-transition-new(app-surface), .is-amap-morph::view-transition-new(root) { animation: none; }
.amap-wrap { scroll-margin-block-start: calc(var(--bar) + var(--space-md)); }
.amap__panel { display: grid; align-content: start; gap: var(--space-sm); }
.amap-wrap:not(.is-open) .amap__panel { display: none; }
.amap__back { justify-self: start; padding: 0; border: 0; background: none; font: inherit; font-size: var(--text-sm); cursor: pointer; }
.amap-wrap.is-open { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.is-open .amap { position: sticky; gap: var(--space-md); top: calc(var(--bar) + var(--space-md)); max-height: calc(100dvh - var(--bar) - var(--space-xl)); overflow-y: auto; overscroll-behavior: contain; }
.is-open .amap__layer--it { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
.is-open .amap__layer--it > * { grid-area: auto; }
.is-open .amap .amap__body { display: contents; }
.is-open .amap .amap__section { grid-column: auto; display: block; }
.is-open .amap .amap__group { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; }
.is-open .amap .amap__boxes { display: grid; grid-template-columns: minmax(0, 1fr); }
.is-open .amap__box { place-items: center start; text-align: start; }
.curve-scroll { overflow-x: auto; }
.curve { min-width: 40rem; max-height: 24rem; }
.chart__axis { fill: none; stroke: var(--color-rule); stroke-width: 1; }
.invest__bar--key rect { fill: var(--color-accent); }
.pattern-legend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-ink-2); }
.pattern-legend li { display: flex; align-items: center; gap: var(--space-3xs); }
.pattern-swatch { inline-size: 0.75rem; block-size: 0.75rem; }
.pattern-swatch--fresh { background: var(--color-series-1); }
.pattern-swatch--rebuild { background: var(--color-series-2); }
.pattern-swatch--move { background: var(--color-accent); }
.pattern rect { stroke: var(--color-paper); stroke-width: 2; }
.pattern text { font-size: 12px; font-weight: 700; font-family: var(--font-body); }
.pattern--fresh rect { fill: var(--color-series-1); }
.pattern--rebuild rect { fill: var(--color-series-2); }
.pattern--move rect { fill: var(--color-accent); }
.pattern--fresh text, .pattern--move text { fill: var(--color-on-ink); }
.pattern--rebuild text { fill: var(--color-ink); }
.plain-list { display: grid; gap: var(--space-xs); margin: 0; padding-inline-start: 1.2em; color: var(--color-ink); }
.paid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-lg); }

/* service map: organisation by domain */
.smap { min-width: 72rem; table-layout: fixed; }
.smap th, .smap td { padding: var(--space-xs); border-inline-end: var(--rule-hair) solid var(--color-rule-2); }
.smap thead th { white-space: normal; }
.smap tbody th { white-space: normal; background: var(--color-paper); }
.smap--narrow { min-width: 0; max-width: 40rem; }
.smap__group { width: 6rem; border-inline-end: var(--rule-hair) solid var(--color-rule); }
.smap tbody tr:hover > * { background: transparent; }
.smap__entry { display: grid; gap: var(--space-3xs); padding: var(--space-2xs) var(--space-xs); background: var(--color-tint-full); color: var(--color-ink); font-size: var(--text-xs); line-height: 1.4; text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out); }
.smap__entry + .smap__entry { margin-block-start: var(--space-3xs); }
.smap__entry:hover { background: var(--color-rule); }
.smap__entry strong { font-weight: 600; }
/* vendor map: categories stacked by layer */
.table--vendors { table-layout: fixed; min-width: 48rem; }
.table--vendors tbody th { white-space: normal; overflow-wrap: anywhere; }
.growth { display: block; }
.growth + .growth { margin-block-start: var(--space-3xs); }
.amap__kind { margin: var(--space-sm) 0 0; padding-block-end: var(--space-2xs); border-block-end: var(--rule-hair) solid var(--color-ink); font-size: var(--text-md); }
.vendor-co { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); }
.vendor-co a { color: inherit; font-weight: inherit; }
:is(th, td):has(> .vendor-co) { font-size: var(--text-md); }
.amap__search { position: absolute; top: 0; right: 0; z-index: 1; width: min(20rem, 50%); }
.amap__search input { min-height: 32px; font-size: var(--text-sm); }
.is-open .amap__search { position: sticky; width: auto; background: var(--color-paper); }
@media (max-width: 40rem) { .amap__search { position: static; width: auto; } }
.amap [hidden] { display: none !important; }
.is-open .amap__boxes { gap: 0; }
.is-open .amap__box { min-height: 0; padding-block: 2px; }
.is-open .amap__box + .amap__box { border-block-start: 0; }

/* filters */
.filters { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); align-items: end; }
.empty { display: grid; gap: var(--space-xs); justify-items: start; padding: var(--space-xl); background: var(--color-paper-2); }

/* footer and dialog */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-xl); width: 100%; max-width: var(--shell); margin-inline: auto; padding: var(--space-sm) var(--space-lg); border-block-start: var(--rule-hair) solid var(--color-rule); font-size: var(--text-xs); color: var(--color-muted); position: sticky; inset-block-end: 0; z-index: 5; background: var(--color-paper); }
.foot__note { flex: 1 1 24rem; margin: 0; }
.code-dialog { width: min(32rem, 100% - var(--space-xl)); padding: var(--space-xl); border: 0; border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink-2); box-shadow: var(--shadow-card); }
.code-dialog::backdrop { background: var(--scrim); }
.code-dialog__title { margin-block-end: var(--space-md); }
.code-form { display: grid; gap: var(--space-xs); }
.code-form label { font-size: var(--text-sm); }
.code-form__row { display: flex; gap: var(--space-xs); }
.code-form input { flex: 1; min-width: 0; font-family: var(--font-outlier); }
.code-form input[aria-invalid] { border-color: var(--color-error); }
.code-form__help { min-height: 1lh; font-size: var(--text-sm); }
.code-form textarea { width: 100%; padding: var(--space-xs) var(--space-sm); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); resize: vertical; }
.code-form textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -1px; }

@media (max-width: 82rem) {
  .bar__inner { flex-wrap: wrap; gap: 0 var(--space-md); padding-inline: var(--gutter); }
  .bar__side { margin-inline-start: auto; padding-block: var(--space-sm); }
  .bar__nav { order: 3; flex-basis: 100%; overflow-x: auto; margin-inline: calc(-1 * var(--space-sm)); min-height: 44px; }
}
@media (max-width: 60rem) {
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search--bar input { width: 12rem; }
  :root { --main-top: var(--space-lg); --main-pad: var(--gutter); }
  .foot { padding-inline: var(--gutter); }
  .groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .table--wide { min-width: 52rem; }
  .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .figures > div:nth-child(4) { padding-inline-start: 0; border-inline-start: 0; }
  .figures > div:nth-child(n + 4) { border-block-start: var(--rule-hair) solid var(--color-rule); }
}
@media (max-width: 40rem) {
  .amap-wrap.is-open { grid-template-columns: minmax(0, 1fr); }
  .amap__layer--it { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .amap__layer--it > * { grid-area: auto; }
  .amap__layer--app .amap__group { grid-template-columns: minmax(0, 1fr); }
  .amap__layer--app .amap__body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .amap__layer--app .amap__section { grid-column: 1 / -1; }
  .is-open .amap { display: none; }
  .bar__link { display: none; }
  .search--bar input { width: 9rem; padding-inline-end: var(--space-sm); }
  .search--bar .search__hint { display: none; }
  .groups, .filters { grid-template-columns: minmax(0, 1fr); }
  .doors { grid-template-columns: minmax(0, 1fr); }
  .doors > li + li { border-inline-start: 0; border-block-start: var(--rule-hair) solid var(--color-rule); }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures > div:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
  .figures > div:nth-child(n + 3) { border-block-start: var(--rule-hair) solid var(--color-rule); }
  .strengths, .org, .keyman, .paid__grid { grid-template-columns: minmax(0, 1fr); }
  .code-form__row { flex-wrap: wrap; }
  .code-form__row .btn { flex: 1 1 100%; }
}

/* cross-industry agendas and the migration timeline */
.table--wrap tbody th { white-space: normal; min-width: 9rem; }
.agenda__deep { display: block; margin-block-start: var(--space-3xs); font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); }
.agenda__cat th { padding-block-start: var(--space-md); background: var(--color-paper-2); font-weight: 600; }
.agenda__cat .agenda__deep { display: inline; margin-inline-start: var(--space-sm); }
/* Items sit one step in from their category row. */
.agenda__cat ~ tr > th[scope="row"] { padding-inline-start: var(--space-lg); }
.agenda__link { display: grid; gap: var(--space-3xs); }
.cell-sub { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); }
.muted { color: var(--color-muted); }
.tight-list { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; min-width: 11rem; }

.gantt-scroll { border: 1px solid var(--color-rule); background: var(--color-paper); }
.gantt { --gantt-name: 9rem; position: relative; isolation: isolate; min-width: calc(var(--gantt-name) + 52rem); font-size: var(--text-sm); }
.gantt__row { display: grid; grid-template-columns: var(--gantt-name) minmax(0, 1fr); }
.gantt__name { position: sticky; inset-inline-start: 0; z-index: 3; box-sizing: border-box; padding: var(--space-xs) var(--space-sm); background: var(--color-rule-2); border-inline-end: 1px solid var(--color-rule); line-height: 1.35; overflow-wrap: anywhere; }
.gantt__name small { display: block; margin-block-start: var(--space-3xs); font-size: var(--text-xs); color: var(--color-muted); }
.gantt__plot { position: relative; height: var(--gantt-h, auto); overflow: hidden; background: var(--color-paper); }
.gantt__row--alt .gantt__plot { background: var(--color-paper-2); }
.gantt__row--head .gantt__plot { border-block-end: 1px solid var(--color-rule); }
.gantt__row--group .gantt__name, .gantt__row--group .gantt__plot { border-block-start: 1px solid var(--color-rule); }
.gantt__row--group .gantt__name { padding-block: var(--space-2xs); font-size: var(--text-xs); font-weight: 700; color: var(--color-muted); }
.gantt__row--group .gantt__plot { min-height: 1.6rem; }
.gantt__over { position: absolute; inset-block: 0; inset-inline: var(--gantt-name) 0; z-index: 1; pointer-events: none; }
.gantt__over > * { position: absolute; inset-block: 0; }
.gantt__grid { width: 1px; background: var(--color-rule-2); }
.gantt__peak { background: var(--color-accent-soft); opacity: 0.6; }
.gantt__nowline { width: 2px; margin-inline-start: -1px; background: var(--color-accent); }
.gantt__x { position: absolute; z-index: 2; white-space: nowrap; }
.gantt__era { top: 4px; height: 22px; box-sizing: border-box; padding-inline: var(--space-xs); border-inline-start: 2px solid var(--color-ink); background: var(--color-tint-full); color: var(--color-ink); font-size: 12px; line-height: 22px; overflow: hidden; text-overflow: ellipsis; }
.gantt__year { top: 30px; font-size: var(--text-xs); line-height: 18px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.gantt__pill { top: 52px; padding-inline: 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; line-height: 20px; }
.gantt__pill--peak { background: var(--color-accent-soft); color: var(--color-accent-soft-ink); }
.gantt__pill--now { background: var(--color-accent); color: var(--color-paper); }
.gantt__brk { top: 78px; height: 6px; box-sizing: border-box; border: 1px solid var(--color-ink-2); border-block-start: 0; }
.gantt__brkn { top: 84px; font-size: 12px; line-height: 14px; color: var(--color-ink-2); }
.gantt__bar { top: 14px; height: 18px; box-sizing: border-box; display: flex; justify-content: space-between; gap: var(--space-xs); padding-inline: var(--space-xs); border-radius: 3px; background: var(--color-series-1); color: var(--color-paper); font-size: 11px; line-height: 18px; overflow: hidden; }
.gantt__dot { top: 19px; width: 8px; height: 8px; box-sizing: border-box; border: 2px solid var(--color-series-1); border-radius: 50%; background: var(--color-paper); }
.gantt__line { top: 23px; height: 0; }
.gantt__line--solid { border-block-start: 1px solid var(--color-ink); }
.gantt__line--dash { border-block-start: 1px dashed var(--color-ink-2); }
.gantt__line--dot { top: 22px; border-block-start: 2px dotted var(--color-ink-2); }
.gantt__lb { font-size: 12px; line-height: 14px; color: var(--color-ink-2); }
.gantt__tri { top: 35px; width: 0; height: 0; border-inline: 4px solid transparent; border-block-end: 6px solid var(--color-accent); }
.gantt__trl { top: 33px; font-size: 11px; line-height: 14px; color: var(--color-accent-soft-ink); }
.gantt__chip { top: 3px; height: 24px; box-sizing: border-box; display: flex; align-items: center; gap: 6px; padding-inline: 6px var(--space-xs); border: 1px solid var(--color-rule); border-radius: 3px; background: var(--color-paper); color: var(--color-ink); font-size: 12px; }
.gantt__chip i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--color-series-1); }
.gantt__chip--dot { top: 9px; width: 12px; height: 12px; padding: 0; justify-content: center; }
@media (max-width: 30rem) { .gantt { --gantt-name: 6.5rem; } }

.radar { display: block; }
.radar__ring { fill: none; stroke: var(--color-rule); stroke-width: 1; }
.radar__shape { fill: var(--color-series-2); fill-opacity: 0.45; stroke: var(--color-series-1); stroke-width: 1.5; }
.radar__label { font-size: 12px; fill: var(--color-muted); font-family: var(--font-body); }

.table--scores { min-width: 52rem; }
.table--scores .score { width: 3.25rem; padding-inline: 0; text-align: center; }
td.score { font-weight: 600; box-shadow: inset 0 0 0 1px var(--color-paper); }
td.score[data-score="1"] { background: var(--color-paper-2); }
td.score[data-score="2"] { background: var(--color-tint-full); }
td.score[data-score="3"] { background: var(--color-ink); color: var(--color-on-ink); }
.table tbody tr:hover > td.score[data-score="3"] { background: var(--color-ink); }

.ptypes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.ptype { display: grid; align-content: start; gap: var(--space-xs); padding-block-start: var(--space-sm); border-block-start: 2px solid var(--color-ink); }
.ptype h3 { margin: 0; font-size: var(--text-base, 1rem); }
.ptype__line { margin: 0; font-size: var(--text-sm); color: var(--color-muted); }
.ptype__facts { display: grid; gap: var(--space-xs); margin: 0; font-size: var(--text-sm); }
.ptype__facts dt { font-size: var(--text-xs); color: var(--color-muted); }
.ptype__facts dd { margin: 0; }

/* the middle layer: compare companies, read one company's own sentences */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-3xs); min-width: 9rem; }
.chips .tag { text-decoration: none; }
.chips .tag:hover { box-shadow: inset 0 0 0 var(--rule-hair) var(--color-ink); color: var(--color-ink); }
.page__stack { display: grid; gap: var(--space-2xl); }

.table--systems td:last-child { min-width: 16rem; }

/* industry financials */
.verdict { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); white-space: nowrap; }
.verdict::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: var(--radius-pill); background: var(--color-muted); }
.verdict--up::before { background: oklch(50% 0.13 252); }
.verdict--down::before { background: var(--color-error); }
.spark { display: block; inline-size: 96px; block-size: 28px; }
.spark polyline { fill: none; stroke: var(--color-ink-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark circle { fill: var(--color-ink); stroke: var(--color-paper); stroke-width: 2; }
.fin__measure { display: block; font-size: var(--text-xs); color: var(--color-muted); }
.fin__cap { caption-side: top; text-align: start; padding-block-end: var(--space-xs); font-weight: 600; color: var(--color-ink); }
.fin__ranks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.icards { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.icards__order { margin: 0; font-size: var(--text-sm); color: var(--color-muted); }
.icard { display: flex; flex-direction: column; gap: var(--space-2xs); block-size: 100%; padding: var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); color: var(--color-ink-2); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.icard:hover { background: var(--color-paper-2); border-color: var(--color-muted); }
.icard:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.icard__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2xs); }
.icard__group { font-size: var(--text-xs); color: var(--color-muted); }
.icard__top .verdict { font-size: var(--text-xs); }
.icard__name { font-size: var(--text-md); font-weight: 700; line-height: 1.3; color: var(--color-ink); }
.icard__n { margin-inline-start: var(--space-2xs); font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); }
.icard__figure { display: grid; gap: var(--space-3xs); font-size: var(--text-xl); font-weight: 700; line-height: 1.1; color: var(--color-ink); }
.icard__cap { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); }
.icard__sub { font-size: var(--text-xs); }
.icard__spark { margin-block-start: auto; padding-block-start: var(--space-2xs); }
.icard__spark .spark { inline-size: 100%; }
/* The 大区分 page: names and the company count only. */
.icards--index { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.icards--index .icard { min-block-size: 6rem; padding: var(--space-lg); }
.icards--index .icard__name { font-size: var(--text-lg); }
.icards--index .icard__n { margin-block-start: auto; margin-inline-start: 0; font-size: var(--text-sm); }
@media (max-width: 60rem) { .fin__ranks { grid-template-columns: minmax(0, 1fr); } }

/* table tools */
.dt { --dt-bar: calc(36px + 2 * var(--space-xs)); display: grid; gap: var(--space-xs); }
.dt__count { margin: 0; font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.dt__bar { position: sticky; top: var(--bar); z-index: 2; display: flex; gap: var(--space-xs); padding-block: var(--space-xs); background: var(--color-paper); }
.dt__search { position: relative; flex: 1; }
.dt__search svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.dt__search svg { position: absolute; inset-block: 0; inset-inline-start: var(--space-sm); margin-block: auto; color: var(--color-muted); pointer-events: none; }
.dt__search input { width: 100%; min-height: 36px; padding: 0 var(--space-sm) 0 calc(var(--space-sm) + 24px); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); }
.dt__search input:focus-visible, .dt__opt:focus-visible, .dt__sort:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -1px; }
/* The panel slides open from zero width and fades in, as in the reference. */
/* The panel sticks below the search bar; 6rem leaves room for the sticky .foot (about 4.6rem at desktop width). */
.dt__body { display: grid; grid-template-columns: 0 minmax(0, 1fr); column-gap: 0; transition: grid-template-columns 200ms var(--ease-out), column-gap 200ms var(--ease-out); }
.dt--open .dt__body { grid-template-columns: 17.5rem minmax(0, 1fr); column-gap: var(--space-lg); }
.dt__panel { position: sticky; top: calc(var(--bar) + var(--dt-bar) + var(--space-xs)); align-self: start; display: grid; align-content: start; gap: 10px; min-width: 0; max-height: calc(100dvh - var(--bar) - var(--dt-bar) - var(--space-xs) - 6rem); overflow: hidden scroll; overscroll-behavior: contain; scrollbar-color: auto; opacity: 0; border-inline-end: var(--rule-hair) solid var(--color-rule); transition: opacity 200ms var(--ease-out) 50ms; }
.dt--open .dt__panel { opacity: 1; padding-inline-end: var(--space-md); }
/* macOS hides overlay scrollbars until you scroll; styling the webkit bar keeps it drawn. scrollbar-color: auto above lets these rules apply in Chrome. */
.dt__panel::-webkit-scrollbar { width: 8px; }
.dt__panel::-webkit-scrollbar-track { background: var(--color-paper-2); border-radius: 4px; }
.dt__panel::-webkit-scrollbar-thumb { background: var(--color-muted); border-radius: 4px; }
.dt__body:not(:has(.dt__panel)) > * { grid-column: 1 / -1; }
.dt__panel-head { position: sticky; inset-block-start: 0; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; background: var(--color-paper); padding-block: var(--space-2xs); }
.dt__group { display: grid; gap: 1px; margin: 0; padding: 0; border: 0; }
.dt__group legend { margin-block-end: 2px; font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); }
.dt__opt { display: flex; justify-content: space-between; gap: var(--space-xs); padding: 3px var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-muted); font-size: var(--text-sm); text-align: start; cursor: pointer; transition: transform 150ms var(--ease-out), border-color 150ms var(--ease-out), background-color 150ms var(--ease-out); }
.dt__opt:hover { transform: translateX(2px); border-color: var(--color-accent); background: var(--color-paper-2); }
.dt__opt[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent-soft-ink); }
/* A 大区分 in the filter: its industries stack indented under the name, one per row. */
.dt__kids { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin-block: 1px 3px; margin-inline-start: 2px; padding-inline-start: var(--space-xs); border-inline-start: var(--rule-hair) solid var(--color-rule); }
.dt__opt--kid { min-height: 0; padding: 1px var(--space-2xs); border-color: var(--color-rule-2); border-radius: var(--radius-control); background: var(--color-paper); font-size: 0.75rem; line-height: 1.4; }
.dt__opt--kid:hover { transform: none; border-color: var(--color-accent); background: var(--color-paper-2); }
.dt__opt--kid[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); }
.dt__n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt__sort { display: inline-flex; align-items: center; gap: var(--space-3xs); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
.dt__sort::after { content: "↕"; opacity: 0; font-size: 0.85em; }
.dt__sort:hover::after { opacity: 0.4; }
th[aria-sort="ascending"] > .dt__sort::after { content: "↑"; opacity: 1; }
th[aria-sort="descending"] > .dt__sort::after { content: "↓"; opacity: 1; }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--color-ink); }
@keyframes dt-in { from { opacity: 0; transform: translateY(-6px); } }
.dt--enter tbody tr:not([hidden]) { animation: dt-in 200ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .dt__body, .dt__panel, .dt__opt { transition: none; } .dt--enter tbody tr { animation: none; } .dt__opt:hover { transform: none; } }
@media (max-width: 40rem) {
  .dt__body, .dt--open .dt__body { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .dt__panel { display: none; }
  .dt--open .dt__panel { position: static; display: grid; max-height: 40vh; padding-inline-end: 0; border-inline-end: 0; }
}
.favicon { display: inline-block; width: 16px; height: 16px; margin-inline-end: var(--space-xs); vertical-align: -3px; border-radius: 3px; background: var(--color-paper-3); }
img.favicon { background: none; }

/* company financial charts */
.fin-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 1.5rem 2rem; margin-bottom: 1.5rem; }
.fin-chart { margin: 0; }
.fin-chart__head { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; justify-content: space-between; margin-bottom: 0.25rem; }
.fin-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.8125rem; color: var(--color-muted); }
.fin-key { display: inline-block; width: 0.75rem; height: 0.75rem; margin-right: 0.3rem; vertical-align: -0.1rem; }
.fin-key--line { height: 2px; vertical-align: 0.2rem; background: var(--color-accent); }
.fin-bar--1 { fill: var(--color-series-1); background: var(--color-series-1); }
.fin-bar--2 { fill: var(--color-series-2); background: var(--color-series-2); }
.fin-line { fill: none; stroke: var(--color-accent); stroke-width: 2.5; }
.fin-dot { fill: var(--color-accent); stroke: var(--color-paper); stroke-width: 2; }
.fin-chart .chart { max-height: 18rem; }
.grow polyline { fill: none; stroke: var(--color-muted); stroke-width: 1.5; stroke-opacity: 0.6; }
.grow.is-self polyline { stroke: var(--color-accent); stroke-width: 3; stroke-opacity: 1; }
.fin-bar__in { font-size: 12px; fill: var(--color-on-ink); font-family: var(--font-body); }

/* competition structure: a colour band on the box and tag for 寡占, 分散, 新興 and 空白 */
[data-structure="寡占"] { --struct: var(--color-ink); }
[data-structure="分散"] { --struct: var(--color-accent); }
[data-structure="新興"] { --struct: var(--color-success); }
[data-structure="空白"] { --struct: var(--color-muted); --struct-style: dashed; }
.amap__box[data-structure] { border-inline-start-width: 4px; border-inline-start-color: var(--struct); border-inline-start-style: var(--struct-style, solid); }
.tag--struct { border-inline-start: 4px var(--struct-style, solid) var(--struct); }
.amap__legend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: 0; font-size: var(--text-xs); color: var(--color-muted); }
.amap__legend > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-xs); }
.amap__legend dd { margin: 0; }
/* leave room for the search box that floats over the top right */
.amap__legend { padding-inline-end: calc(min(20rem, 50%) + var(--space-md)); }
.is-open .amap__legend { padding-inline-end: 0; }
@media (max-width: 40rem) { .amap__legend { padding-inline-end: 0; } }
.amap__key { padding: 2px var(--space-xs); border: 0; border-inline-start: 4px var(--struct-style, solid) var(--struct); background: none; color: var(--color-ink); font: inherit; font-weight: 700; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.amap__key:hover { background: var(--color-tint-full); }
.amap__key[aria-pressed="true"] { background: var(--color-ink); color: var(--color-on-ink); }
.tag--fade { background: var(--color-error); color: var(--color-paper); box-shadow: none; }
.table--matrix td { min-width: 6rem; }
/* theme maturity map: stage by share, tinted by the verdict of the cell */
.theme-map th .cell-sub { font-weight: 400; }
.theme-map td { min-width: 10rem; padding-inline-start: var(--space-sm); font-size: var(--text-sm); }
.theme-map__cell--now { background: var(--color-accent-soft); }
.theme-map__cell--wait { background: var(--color-paper-2); }
.theme-map__cell--keep { background: var(--color-paper-3); }
.theme-map__cell--skip { color: var(--color-muted); }
.board__list { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.board__no { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-inline-end: var(--space-2xs); border-radius: 50%; background: var(--color-ink); color: var(--color-on-ink); font-size: 11px; font-weight: 700; vertical-align: 1px; }

.stack__legend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin: 0 0 var(--space-sm); padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-muted); }
.stack__legend li { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.stack__key { width: 12px; height: 12px; border-radius: 2px; }
.stack { display: grid; gap: var(--space-xs); }
.stack__row { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 2rem; align-items: center; gap: var(--space-sm); }
.stack__name { font-size: var(--text-sm); color: var(--color-ink); }
.stack__bar { display: flex; height: 28px; gap: 1px; }
.stack__seg { display: flex; align-items: center; justify-content: center; min-width: 0; font-size: var(--text-xs); font-weight: 600; }
.stack__total { font-size: var(--text-sm); color: var(--color-muted); text-align: end; }
.stack__seg--cont { background: var(--color-series-1); color: var(--color-on-ink); }
.stack__seg--moving { background: var(--color-series-2); color: var(--color-ink); }
.stack__seg--done { background: var(--color-ink-2); color: var(--color-on-ink); }
.stack__seg--open { background: var(--color-accent-soft); color: var(--color-accent-soft-ink); }
.stack__seg--undecided { background: var(--color-accent); color: var(--color-on-ink); }
.stack__seg--unknown { background: var(--color-rule); color: var(--color-ink-2); }
@media (max-width: 30rem) { .stack__row { grid-template-columns: 5rem minmax(0, 1fr) 1.5rem; gap: var(--space-xs); } }

/* reading pages: the band, the chapters and the contents list */
.reader { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.reader__body { display: grid; gap: var(--space-3xl); min-width: 0; }
.reader__body .block, .reader__body .sect { scroll-margin-top: calc(var(--bar) + var(--space-md)); }
.chapter { display: grid; gap: var(--space-2xl); min-width: 0; }
.chapter__title { margin: 0 0 calc(var(--space-lg) - var(--space-2xl)); padding-block-end: var(--space-xs); border-block-end: 2px solid var(--color-ink); font-size: var(--text-xl); font-weight: 700; line-height: 1.3; color: var(--color-ink); }
.chapter__gaps { display: grid; gap: var(--space-xs); padding-block-start: var(--space-sm); border-block-start: var(--rule-hair) solid var(--color-rule); }
.chapter__gaps p { margin: 0; font-size: var(--text-xs); color: var(--color-muted); }
.chapter__gaps ul { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.chapter__gaps li { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.chapter__gaps li + li::before { content: ""; width: 1px; height: 1em; margin-inline-end: var(--space-2xs); background: var(--color-rule); }
/* The answer opens the page: the proposal outline and the view, or the item the frame marks as lead. */
.band { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: var(--space-lg) var(--space-xl); padding: var(--space-lg); background: var(--color-paper-2); border-block-start: 2px solid var(--color-accent); }
.band > section { min-width: 0; }
.band > .block { grid-column: 1 / -1; }
.band .plan { padding: 0; background: none; border: 0; }
.band__view { display: grid; align-content: start; gap: var(--space-md); }
.band__view p { margin: 0; color: var(--color-ink); }
.toc__toggle { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 40px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.toc__toggle::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; rotate: 45deg; translate: 0 -2px; transition: rotate var(--dur-micro) var(--ease-out); }
.toc__toggle[aria-expanded="true"]::after { rotate: -135deg; translate: 0 2px; }
.toc__list { display: none; margin-block-start: var(--space-xs); }
.toc.is-open .toc__list { display: grid; }
.toc__prog { display: block; height: 3px; margin-block-end: var(--space-sm); border-radius: 2px; background: var(--color-paper-3); overflow: hidden; }
.toc__prog i { display: block; width: 0; height: 100%; background: var(--color-accent); }
.toc__chapter { margin: var(--space-md) 0 var(--space-2xs); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; color: var(--color-muted); }
.toc__chapter:first-of-type { margin-block-start: 0; }
.toc__item { display: block; width: 100%; padding: var(--space-2xs) 0 var(--space-2xs) var(--space-sm); border: 0; border-inline-start: 2px solid var(--color-rule); background: none; color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.5; text-align: start; cursor: pointer; transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.toc__item:hover { color: var(--color-ink); border-inline-start-color: var(--color-muted); }
.toc__item[aria-current] { border-inline-start-color: var(--color-accent); color: var(--color-ink); font-weight: 700; }
.toc__gap { display: block; height: var(--space-md); }
.toc__item--gap { color: var(--color-muted); cursor: default; }
.toc__item--gap:hover { color: var(--color-muted); border-inline-start-color: var(--color-rule); }
.toc__item--gap::after { content: "未調査"; margin-inline-start: var(--space-xs); padding: 0 var(--space-2xs); border: var(--rule-hair) dashed var(--color-rule); border-radius: var(--radius-pill); font-size: 0.6875rem; }
@media (min-width: 75rem) {
  .reader { grid-template-columns: 12.5rem minmax(0, 1fr); gap: var(--space-2xl); }
  .reader--bare { grid-template-columns: minmax(0, 1fr); }
  .reader > .toc { position: sticky; top: calc(var(--bar) + var(--space-lg)); max-height: calc(100dvh - var(--bar) - 7rem); overflow-y: auto; scrollbar-width: thin; }
  .toc__toggle { display: none; }
  .toc__list { display: grid; margin: 0; }
}

/* the points of a reading, before its table */
.points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 0 var(--space-lg); margin: 0; padding: 0; list-style: none; border-block-start: var(--rule-hair) solid var(--color-ink); counter-reset: point; }
.points li { display: grid; align-content: start; gap: var(--space-2xs); padding-block: var(--space-sm); border-block-end: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); counter-increment: point; }
.points strong { color: var(--color-ink); font-size: var(--text-md); font-weight: 700; line-height: 1.5; }
.points strong::before { content: counter(point) "　"; color: var(--color-accent); font-variant-numeric: tabular-nums; }

/* plan against actual */
.res { display: inline-flex; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.res--ok { background: oklch(94% 0.04 150); color: oklch(36% 0.1 150); }
.res--ng { background: oklch(94.5% 0.03 27); color: oklch(42% 0.15 27); }
.res--mid { background: oklch(95% 0.045 85); color: oklch(40% 0.09 70); }
.res--chg { background: var(--color-paper-3); color: var(--color-ink-2); }
.gauge { position: relative; display: block; min-width: 7rem; height: 6px; margin-block-start: var(--space-2xs); border-radius: 2px; background: var(--color-paper-3); }
.gauge i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 2px; background: var(--color-ink-2); }
.gauge--ok i { background: var(--color-success); }
.gauge--ng i { background: var(--color-error); }
.gauge--mid i { background: oklch(62% 0.12 75); }
.gauge b { position: absolute; inset-block: -3px; width: 0; border-inline-start: 2px solid var(--color-ink); }
.gauge b.is-rev { border-inline-start-style: dotted; border-inline-start-color: var(--color-muted); }
.gauge-key { margin: 0; font-size: var(--text-xs); color: var(--color-muted); }

/* strands: one row reads left to right */
.flow { display: grid; gap: var(--space-xs); }
.flow__head, .flow__row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--space-lg); }
.flow__head { padding-inline: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.flow__row { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-2); font-size: var(--text-sm); color: var(--color-ink); }
.flow__row > div { position: relative; min-width: 0; }
.flow__row > div + div::before { content: "→"; position: absolute; inset-inline-start: calc(-1 * var(--space-lg) + 0.3em); color: var(--color-muted); }
.flow__row > [role="rowheader"] { font-weight: 700; }
@media (max-width: 40rem) {
  .flow__head { display: none; }
  .flow__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .flow__row > div + div { padding-inline-start: var(--space-sm); border-inline-start: 2px solid var(--color-rule); }
  .flow__row > div + div::before { content: none; }
}

/* short values side by side */
.meta { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); margin: 0; border-block: var(--rule-hair) solid var(--color-ink); }
.meta + .facts { border-block-start: 0; }
.meta > div { display: grid; align-content: start; gap: var(--space-3xs); min-width: 0; padding: var(--space-sm) var(--space-md); }
.meta > div:first-child { padding-inline-start: 0; }
.meta > div + div { border-inline-start: var(--rule-hair) solid var(--color-rule); }
.meta dt { font-size: var(--text-sm); color: var(--color-muted); }
.meta dd { margin: 0; font-weight: 700; color: var(--color-ink); }
@media (max-width: 40rem) {
  .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meta > div:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
  .meta > div:nth-child(n + 3) { border-block-start: var(--rule-hair) solid var(--color-rule); }
}

/* years: bars to choose a year, one card open */
.tl { display: grid; gap: var(--space-sm); }
.tl__cap { margin: 0; font-size: var(--text-xs); color: var(--color-muted); }
.tl__tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2xs); border-block-end: var(--rule-hair) solid var(--color-ink); }
.tl__tab { display: grid; grid-template-rows: 4.5rem auto; gap: var(--space-2xs); padding: 0 0 var(--space-2xs); border: 0; background: none; cursor: pointer; }
.tl__bar { position: relative; align-self: end; height: var(--h); min-height: 2px; border-radius: 2px 2px 0 0; background: var(--color-rule); transition: background-color var(--dur-micro) var(--ease-out); }
.tl__bar span { position: absolute; inset-block-end: 100%; inset-inline: 0; font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.tl__label { padding-block: var(--space-3xs); border-radius: var(--radius-control); font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.tl__tab:hover .tl__bar { background: var(--color-muted); }
.tl__tab[aria-selected="true"] .tl__bar { background: var(--color-accent); }
.tl__tab[aria-selected="true"] .tl__label { background: var(--color-ink); color: var(--color-on-ink); font-weight: 700; }
.tl__card { display: grid; gap: var(--space-xs); padding-block-start: var(--space-xs); }
.tl__card[hidden] { display: none; }
.tl__year { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs); }
.tl__year span { font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); }
.tl__facts { display: grid; gap: var(--space-xs); margin: 0; }
.tl__facts > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-md); }
.tl__facts dt { font-size: var(--text-sm); color: var(--color-muted); }
.tl__facts dd { margin: 0; color: var(--color-ink); }
.tl__facts .is-read dd { font-weight: 700; }
.tl.is-all .tl__card + .tl__card { padding-block-start: var(--space-md); border-block-start: var(--rule-hair) solid var(--color-rule); }
.tl__all { font-size: var(--text-sm); }
.tl__table summary { font-size: var(--text-sm); color: var(--color-ink-2); cursor: pointer; }
.tl__table[open] summary { margin-block-end: var(--space-sm); }
@media (max-width: 40rem) { .tl__facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); } }

/* caveats behind an "i" at the top-right of their section or page */
.has-info { position: relative; }
.has-info > :is(h1, h2, .block__head) { padding-inline-end: 2.25rem; }
.info { position: absolute; inset-block-start: 0; inset-inline-end: 0; z-index: var(--z-dropdown); }
.info__i { display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border: var(--rule-hair) solid var(--color-muted); border-radius: 50%; color: var(--color-muted); font: italic 700 var(--text-xs)/1 Georgia, serif; cursor: help; }
.info:hover .info__i, .info:focus-visible .info__i { border-color: var(--color-ink); color: var(--color-ink); }
.info:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 50%; }
.info__body { display: none; position: absolute; inset-block-start: 100%; inset-inline-end: 0; width: min(28rem, calc(100vw - 2rem)); max-height: min(70vh, 32rem); overflow: auto; overscroll-behavior: contain; padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: 8px; background: var(--color-paper); box-shadow: var(--shadow-card); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 400; line-height: 1.7; }
.info:hover .info__body, .info:focus-within .info__body { display: grid; gap: var(--space-xs); }

/* 案件の規模感: the period and amount columns need room; the table scrolls inside its region. */
.deals-table { min-width: 52rem; table-layout: fixed; }
.deals-table th:nth-child(3), .deals-table td:nth-child(3) { min-width: 7rem; }
.deals-table tbody td { overflow-wrap: anywhere; word-break: break-word; }
.deals-table .src { white-space: normal; overflow-wrap: anywhere; }

/* 重なる競合: the overlap columns carry lists; keep the row height readable and let them wrap. */
.competition-table td { overflow-wrap: anywhere; }