/* ==========================================================================
   HMME OPERATING LAYER: design tokens and components
   Light mode only. No dark-mode tokens exist, by decision.

   THE BRAND-RED / ALERT-RED RESOLUTION, stated once:
   Brand red and alert red are separated by ROLE and by CHROMA, not by hue:
   you cannot signal an error in green, so the hue is fixed and the brand
   withdraws instead.
     · --brand-red #E60012: the corporate red, measured across Hino's own 2025
       integrated report, where it carries 6.2% of the ink and 1,459 characters
       of heading text. Legal in exactly six places, all of them either page
       furniture or emphasis over a set: the block above the active tab, the
       rule beside an opening paragraph, a static sub-heading, the mark
       itself, the header of the column being read, and the bar of the period
       being read. The last two are their own convention, and they mark WHICH
       ONE MATTERS, never that something is wrong. Never a control, never a
       chip, never a row tint, never on a number, never a link, never a focus
       ring, never a state.
     · --c-alert #A4262C: MEANING ONLY. 38 points of chroma separation, so
       it reads as a different family at a glance.
   There is deliberately no --c-primary equal to brand red: THE PRIMARY
   ACTION IS INK. That is the move that frees red entirely for alarm, a red
   Save button makes every save look like a delete and destroys the signal.

   COLOUR CEILING (JIS Z 8522 7.5.5, white + black + max 6 hues): we use 5.
   The sixth is left unallocated. Do not spend it on decoration.
   COLOUR IS NEVER THE SOLE CHANNEL (JIS Z 8522 7.5.1): every state carries
   an icon AND a word AND a colour. Acceptance test: render the screen in
   greyscale, it must remain fully readable.
   ========================================================================== */

:root{
  color-scheme: light;

  /* 1 · brand, measured, not sampled.
     Every value below was extracted from Hino's own 2025 integrated report:
     the fill colours weighted by the area they cover across pages 3 to 12,
     and the text colours weighted by the characters they set. The red was
     previously #E00004, sampled from a logo PNG; the corporate red Hino
     actually prints is #E60012, and it carries 1,459 characters of heading
     text in that document as well as 6.2% of the ink. */
  --brand-red:#E60012;          /* 4.80:1 on white */
  --brand-red-deep:#B60005;
  --brand-ink:#1A1A1A;          /* their body text is pure black; softened one
                                   step for screen reading at length */

  /* 2 · neutral ramp, taken from the report.
     This was a WARM ramp, on the reasoning that cool greys read as dirty
     beside warm ink. Hino's greys are neutral and their text is black, so
     the warm ink was the thing that had to move: a warm ink against their
     cool panel greys is the clash, not the greys themselves. */
  --n-0:#FFFFFF; --n-25:#F7F7F7;
  --n-50:#EFEFEF;               /* their dominant panel ground, 34% of all fill */
  --n-100:#E6E6E6;              /* their secondary panel */
  --n-200:#DCDCDC;
  --n-300:#C9CACA;              /* their rule, and their inactive tab block */
  --n-400:#7F7F7F;              /* the 3:1 anchor (WCAG 1.4.11), verified on the
                                   darkest surface a control can land on */
  --n-500:#898989;              /* their muted label colour */
  --n-600:#6C6C6C;              /* the 4.5:1 anchor. #6E6E6E measured 4.44:1 on the
                                   panel ground, and secondary text sits there in
                                   every search bar, so it went one step darker. */
  --n-700:#4D4D4D; --n-800:#333333; --n-900:#1A1A1A;

  /* 3 · two devices borrowed wholesale from their data pages.
     The section bar: in print it is #9FA0A0 carrying white text, which on a
     screen is 2.64:1 and cannot ship. Darkened to the ramp's 4.5:1 anchor,
     which keeps the device (solid grey bar, white bold label) and makes it
     legible. The emphasis tint is the cream they use to mark the column that
     matters in a financial table. */
  --hino-bar:#727171;           /* their own panel-bar grey, taken from the DATA
                                   pages rather than the introduction. It carries
                                   white at 4.81:1, so unlike the #9FA0A0 used on
                                   the opening spreads it ships as measured. */
  --hino-emphasis:#FCE3D6;      /* the cream marking the column that matters in
                                   the ten-year summary */

  /* 3b · their chart palette. History is grey, the current period is red, and a
     second series sits one step lighter in each. Nothing else appears in a
     Hino chart: no axis box, no ticks, no vertical grid. */
  --chart-grey:#B5B6B6;
  --chart-grey-2:#DCDDDD;
  --chart-focal:var(--brand-red);
  --chart-focal-2:#F29B76;
  --chart-grid:#E6E6E6;

  /* A six-step ramp for a share chart with more than three parts, every value
     measured from their own pages: the two accents first so the largest share
     reads immediately, then the greys descending. Used as FILL only, never as
     text, and always beside a legend that carries the name and the number, so
     two adjacent greys never have to be told apart on colour alone. */
  --seg-1:#E60012; --seg-2:#F29B76; --seg-3:#727171;
  --seg-4:#9FA0A0; --seg-5:#C9CACA; --seg-6:#DCDDDD;

  --c-ground:var(--n-0); --c-surface:var(--n-50); --c-surface-alt:var(--n-25);
  --c-divider:var(--n-200); --c-rule:var(--n-300);
  --c-border:var(--n-400); --c-border-strong:var(--n-600);
  --c-text:var(--n-900); --c-text-secondary:var(--n-600); --c-text-disabled:var(--n-500);

  /* 3 · andon state, shop-floor semantics, exactly four plus info
     ok        proceeding, nobody is needed
     attention A PERSON IS WAITING: not "slightly bad"
     alert     FLOW HAS STOPPED: not "an error occurred"
     idle      not started                                              */
  --c-ok:#0F7A3D;        --c-ok-tint:#E8F3EC;
  --c-attention:#8A5A00; --c-attention-tint:#FBF2E3;
  --c-alert:#A4262C;     --c-alert-tint:#FBECEC;
  --c-idle:#6C6C6C;      --c-idle-tint:#EFEFEF;
  --c-info:#1B5E8C;      --c-info-tint:#E9F0F6;
  --c-link:var(--c-info); --c-focus:var(--c-info);

  /* 4 · type. Latin family FIRST, Japanese second, always.
     A JP font carries its own Latin at ~115% to match kanji optically; if it
     wins the cascade, part numbers silently render larger in a different
     design than everywhere else. "Yu Gothic Medium" must precede "Yu Gothic"
     or the whole JA interface renders thin on Windows.

     Frutiger LT Pro is Hino's corporate face, set throughout the integrated
     report: Light for body, Bold for headings, and Bold again for the data
     figures on the sales map. It is a licensed Linotype family we cannot
     ship, so it is named first and used where a machine already has it.
     Segoe UI follows deliberately rather than by accident: it is Steve
     Matteson's humanist face, and Linotype formally objected to how closely
     it resembles Frutiger. On the Windows machines HMME actually uses, it is
     the closest thing to their corporate type available by default.
     DIN Next appears in the report only as decoration, about 140 characters
     across twenty pages, on page numbers and donut percentages. Their DATA
     is Frutiger, so this interface does not borrow a second face. */
  --font-ui: "Frutiger LT Pro", "Frutiger Next", Frutiger,
             "Segoe UI", system-ui, -apple-system,
             "Source Sans 3", "Open Sans", Roboto, Arial,
             "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium",
             "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
  --font-code: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas,
               "Liberation Mono", "Noto Sans Mono", monospace;

  --fs-micro:.75rem; --fs-compact:.8125rem; --fs-body:.875rem;
  --fs-section:1rem; --fs-title:1.25rem; --fs-figure:1.75rem;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* language-switched metrics, overridden in the [lang="ja"] block */
  --lh-dense:1.30; --lh-prose:1.50; --lh-title:1.25;
  --ls-dense:0; --ls-prose:0; --ls-caps:.06em; --fs-display-scale:1;

  /* 5 · space */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px;

  /* 6 · component metrics */
  --h-topbar:48px; --h-field:32px; --h-btn:32px; --minw-btn:88px;
  --h-row:32px; --h-thead:36px; --cell-pad-y:6px; --cell-pad-x:12px;

  /* 7 · line, radius, elevation, there is no elevation system.
     Surfaces separate by a 1px border plus a flat tint step. */
  --bw-hair:1px; --bw-rule:2px; --bw-flag:3px;
  --r-sm:2px; --r-md:4px;
  --shadow-overlay:0 2px 8px rgba(32,24,20,.12);   /* the ONLY shadow */

  --focus-w:2px; --focus-offset:2px;
  --dur-fast:120ms; --ease:cubic-bezier(.2,0,.2,1);

  font-family:var(--font-ui);
  font-size:16px;                 /* rem anchor only */
  font-synthesis-weight:none;     /* synthetic bold smears kanji at 14px */
  font-synthesis-style:none;
  text-autospace:normal;          /* the browser supplies the ideograph/Latin gap */
  -webkit-font-smoothing:antialiased;
}

/* Sizes are IDENTICAL in both languages. "Shrink Japanese 10%" is editorial
   advice and is harmful here: 艦 needs ~15x15px where Latin A needs 7x7, so
   shrinking pushes complex kanji below the resolution floor. */
[lang="ja"]{
  --lh-dense:1.45; --lh-prose:1.75; --lh-title:1.40;
  --ls-dense:0;          /* the DADS Dense tier is 0 in BOTH languages */
  --ls-prose:.02em;      /* the DADS Standard tier */
  --ls-caps:0;           /* Japanese has no case; caps-tracking shreds kana */
  --fs-display-scale:.95;
}

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

html,body{ height:100%; }
body{
  margin:0; background:var(--c-ground); color:var(--c-text);
  font-family:var(--font-ui); font-size:var(--fs-body);
  line-height:var(--lh-dense); letter-spacing:var(--ls-dense);
  display:flex; flex-direction:column;
}

/* Japanese line breaking, formal kinsoku. NEVER overflow-wrap:anywhere on
   Japanese: it has no spaces and will break mid-word at arbitrary points. */
:where([lang="ja"]){ line-break:strict; overflow-wrap:normal; }
:lang(ja) em,:lang(ja) i{ font-style:normal; font-weight:var(--fw-semibold); }

/* ============================== HEADER ==============================
   Two rows, following the report: the mark and the entity on top, the
   section tabs beneath. The red no longer sits as a hairline across the
   whole bar; it sits where Hino puts it, on the block above the section
   you are in. */

.app-header{
  display:flex; flex-direction:column; flex:0 0 auto;
  background:var(--c-ground);
  border-bottom:var(--bw-hair) solid var(--c-divider);
}

.header-top{
  display:flex; align-items:center; gap:var(--sp-6);
  min-height:var(--h-topbar); padding:0 var(--sp-6);
}

/* The mark itself.
   The supplied artwork is a STACKED lockup (emblem above wordmark); at a 48px
   header the wordmark would fall to ~9px and become unreadable, so the emblem
   is used alone and the entity is typeset beside it. The asset is trimmed to
   the emblem's own bounding box, so clear space is a CSS decision and stays
   correct at every size, never baked into the file.
   Clear space is >= half the emblem's height on every side, held by the gap
   and the header padding. The emblem is never tinted, rotated, outlined,
   placed on a tint, or allowed to fall below 20px. */
.brand{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) 0; }
.brand-emblem{
  height:28px; width:auto; display:block; flex:0 0 auto;
  image-rendering:auto;      /* it is a raster mark: let the browser resample cleanly */
}
.brand-rule{ width:1px; align-self:stretch; margin:var(--sp-1) 0;
             background:var(--c-divider); flex:0 0 auto; }
.brand-name{
  font-size:var(--fs-body); font-weight:var(--fw-semibold);
  letter-spacing:.01em; color:var(--c-text); white-space:nowrap;
}
/* The product sits quieter than the company that owns it. */
.brand-product{
  font-size:var(--fs-body); color:var(--c-text-secondary); white-space:nowrap;
}

/* ---- the tab strip -------------------------------------------------
   Hino's device, measured off the running head of the report: a solid
   block, then the label under it. Active block brand red, inactive
   #C9CACA; active label black and bold, inactive #898989.

   The block is the hit target's top edge, not a separate element to aim
   at, so the whole tab stays clickable. */
.modules{
  display:flex; align-items:stretch; gap:var(--sp-3);
  padding:0 var(--sp-6) var(--sp-2);
}
.module{
  appearance:none; border:0; background:none; cursor:pointer; font:inherit;
  display:flex; flex-direction:column; gap:var(--sp-2);
  padding:0; min-width:96px; text-align:left;
}
.module-flag{
  display:block; height:6px; background:var(--n-300);
  transition:background var(--dur-fast) var(--ease);
}
.module-label{
  /* Hino's inactive label is #898989, which is 3.50:1 on white. In print that
     is fine; on a screen a tab label is functional text and owes 4.5:1, so it
     takes the ramp's anchor instead. The hierarchy is carried by weight and by
     the block above it, not by making the inactive item hard to read. */
  font-size:var(--fs-compact); color:var(--c-text-secondary); white-space:nowrap;
  transition:color var(--dur-fast) var(--ease);
}
.module:hover .module-flag{ background:var(--n-400); }
.module:hover .module-label{ color:var(--c-text); }
.module.is-active .module-flag{ background:var(--brand-red); }
.module.is-active .module-label{ color:var(--c-text); font-weight:var(--fw-semibold); }
.module:focus-visible{ outline:var(--focus-w) solid var(--c-focus); outline-offset:2px; }

.header-right{ margin-left:auto; display:flex; align-items:center; gap:var(--sp-4); }

.lang{ display:flex; border:var(--bw-hair) solid var(--c-border); border-radius:var(--r-sm); }
.lang-opt{
  appearance:none; border:0; background:var(--c-ground); cursor:pointer; font:inherit;
  font-size:var(--fs-micro); color:var(--c-text-secondary); padding:var(--sp-1) var(--sp-3);
}
.lang-opt + .lang-opt{ border-left:var(--bw-hair) solid var(--c-border); }
.lang-opt.is-active{ background:var(--n-100); color:var(--c-text); font-weight:var(--fw-semibold); }
.lang-opt:focus-visible{ outline:var(--focus-w) solid var(--c-focus); outline-offset:var(--focus-offset); }

/* who is signed in. A name and a way out, nothing more: the header is not a profile
   page, and the one thing an operator needs from it is the ability to stop being
   whoever the browser currently thinks they are. */
/* The product name steps back from Hino in two stages. Contrast-checked against
   the header surface, not guessed. */
.wm-dealer{ color:#4A4A4A; }
.wm-os{ color:#757575; }

.whoami{ display:flex; align-items:baseline; gap:var(--sp-2); }
.whoami[hidden]{ display:none; }
.whoami-name{ font-size:var(--fs-micro); color:var(--c-text-secondary); }
.whoami-out{
  appearance:none; border:0; background:none; padding:0; font:inherit;
  font-size:var(--fs-micro); color:var(--c-link); cursor:pointer;
  text-decoration:underline; text-underline-offset:2px;
}
.whoami-out:focus-visible{ outline:var(--focus-w) solid var(--c-focus);
                           outline-offset:var(--focus-offset); }

.conn{ display:flex; align-items:center; gap:var(--sp-2);
       font-size:var(--fs-micro); color:var(--c-text-secondary); }
.dot{ width:6px; height:6px; border-radius:50%; background:var(--c-idle); flex:0 0 auto; }
.dot.is-ok{ background:var(--c-ok); }
.dot.is-bad{ background:var(--c-alert); }

/* =============================== MAIN =============================== */

.app-main{ flex:1 1 auto; padding:var(--sp-6); max-width:1560px; width:100%; }
.view{ display:none; }
.view.is-active{ display:block; }

.view-head{ margin-bottom:var(--sp-6); }
h1{ font-size:calc(var(--fs-title)*var(--fs-display-scale)); font-weight:var(--fw-bold);
    line-height:var(--lh-title); margin:0 0 var(--sp-2); }
.lede{
  /* Their intro device: a thick red rule at the left, the text set in from
     it. Used on the opening paragraph of almost every page of the report. */
  border-left:var(--bw-flag) solid var(--brand-red);
  padding-left:var(--sp-3);
  margin:0; color:var(--c-text-secondary); line-height:var(--lh-prose);
  letter-spacing:var(--ls-prose); max-inline-size:68ch;
}

/* ============================ SEARCH BAR ============================ */

/* The controls form a compact cluster on the left; they do NOT stretch.
   A part number is 10-15 characters, so a field that grows to fill 1,258px
   of a 1,440px window is a proportion error, it also throws the submit
   button to the far edge and makes the eye travel the whole width to act.
   Measured before the fix: input 1,258px wide, button at x=1,311. */
.searchbar{
  display:flex; gap:var(--sp-3); align-items:flex-end; flex-wrap:wrap;
  padding:var(--sp-4); background:var(--c-surface);
  border:var(--bw-hair) solid var(--c-border); border-radius:var(--r-md);
  margin-bottom:var(--sp-6);
}
.field{ display:flex; flex-direction:column; gap:var(--sp-1); }
.field--code{ flex:0 0 auto; inline-size:22ch; }   /* the measure of a part number */
.field--grow{ flex:0 1 260px; max-inline-size:280px; }
.label{ font-size:var(--fs-body); font-weight:var(--fw-medium); color:var(--c-text-secondary); }

/* The hint sits on its own row BELOW the controls rather than inside the
   field. Inside, it made the field taller than the button, and align-items:
   flex-end then aligned the button to the hint instead of to the input,
   measured 19.6px out. Now every control in the bar is label+control of the
   same height, so flex-end aligns them exactly. */
.searchbar-hint{
  flex:1 0 100%; font-size:var(--fs-micro); color:var(--c-text-secondary);
  margin-top:calc(var(--sp-1) * -1);
}

input[type=text],select{
  font:inherit; font-size:var(--fs-body); height:var(--h-field);
  padding:0 var(--sp-3); background:var(--c-ground); color:var(--c-text);
  border:var(--bw-hair) solid var(--c-border); border-radius:var(--r-sm); width:100%;
}
/* identifiers are monospace, always: 04005082E0 versus O4OO5O82EO is a wrong
   part shipped, and Helvetica-class faces are the worst case for 0/O and 1/l */
input[type=text]{ font-family:var(--font-code); letter-spacing:.03em;
                  font-variant-numeric:slashed-zero lining-nums; }
input:focus-visible,select:focus-visible{
  outline:var(--focus-w) solid var(--c-focus); outline-offset:var(--focus-offset);
  border-color:var(--c-border-strong);
}

/* ============================== BUTTONS =============================
   The primary action is INK, never brand red. A red Save looks like a
   Delete, and it would put brand red in a semantic position. */

.btn{
  appearance:none; font:inherit; font-size:var(--fs-body); font-weight:var(--fw-semibold);
  cursor:pointer; height:var(--h-btn); min-inline-size:var(--minw-btn);
  padding:0 var(--sp-4); white-space:nowrap;
  border:var(--bw-hair) solid var(--c-border); border-radius:var(--r-sm);
  background:var(--c-ground); color:var(--c-text);
}
.btn:hover:not(:disabled){ background:var(--n-50); border-color:var(--c-border-strong); }
.btn:disabled{ color:var(--c-text-disabled); border-color:var(--n-200);
               background:var(--n-25); cursor:not-allowed; }
.btn--primary{ background:var(--brand-ink); border-color:var(--brand-ink); color:var(--n-0); }
.btn--primary:hover:not(:disabled){ background:var(--n-800); border-color:var(--n-800); }
/* Destructive confirmation only, the semantic red, never the brand red.
   White on #A4262C is 7.26:1. */
.btn--danger{ background:var(--c-alert); border-color:var(--c-alert); color:var(--n-0); }
.btn--danger:hover:not(:disabled){ background:#8B1F24; border-color:#8B1F24; }
.btn:focus-visible{ outline:var(--focus-w) solid var(--c-focus); outline-offset:var(--focus-offset); }

.linklike{
  appearance:none; border:0; background:none; padding:0; cursor:pointer; font:inherit;
  font-variant-numeric:tabular-nums lining-nums; letter-spacing:.02em;
  color:var(--c-link);
  text-decoration:underline; text-underline-offset:2px;
}
.linklike:focus-visible{ outline:var(--focus-w) solid var(--c-focus); outline-offset:var(--focus-offset); }

/* =============================== TABLES ==============================
   Rebuilt to the tables on Hino's data pages. Their construction, in order
   of what you notice:

     a solid grey header carrying white bold labels
     the row-label column tinted, so the eye can find its line
     alternating row tints, quiet enough to read through
     the column that matters headed in red and tinted cream beneath
     no outer frame, no vertical rules, square corners

   The heavy hairline grid we had is not how they draw a table, and on a
   dense screen it competes with the numbers it is supposed to carry. */

.tbl-wrap{ border:0; border-radius:0; overflow-x:auto; background:var(--c-ground); }
table{ width:100%; border-collapse:collapse; font-size:var(--fs-compact); }

thead th{
  background:var(--hino-bar); color:var(--n-0);
  font-weight:var(--fw-semibold); text-align:left;
  padding:var(--sp-2) var(--sp-3); white-space:nowrap;
  position:sticky; top:0; z-index:1;
  border-right:2px solid var(--c-ground);      /* their white cell gutter */
}
thead th:last-child{ border-right:0; }
thead th.num{ text-align:right; }
/* the column being acted on */
thead th.is-emphasis{ background:var(--brand-red); }

tbody td{
  padding:var(--sp-2) var(--sp-3); vertical-align:top;
  border-right:2px solid var(--c-ground);
}
tbody td:last-child{ border-right:0; }
tbody tr{ background:var(--c-ground); }
tbody tr:nth-child(even){ background:var(--n-25); }
tbody tr:hover{ background:var(--n-100); }

/* the label column, tinted so a long row keeps its line */
tbody td:first-child{ background:var(--n-50); }
tbody tr:nth-child(even) td:first-child{ background:var(--n-100); }
tbody tr:hover td:first-child{ background:var(--n-200); }

td.is-emphasis{ background:var(--hino-emphasis); font-weight:var(--fw-semibold); }
tbody tr:hover td.is-emphasis{ background:var(--hino-emphasis); }

/* numbers align on their digits, always */
.num{ text-align:right; font-variant-numeric:tabular-nums lining-nums; }
.dim{ color:var(--c-text-secondary); }

/* Identifiers are strings, not quantities: left-aligned and never truncated.
   They WERE set in the code face, on the reasoning that a monospace stops a
   zero reading as an O. Hino set their part numbers and their figures in
   Frutiger, and beside everything else on the page a monospace read as a
   different design. Tabular figures give the alignment a monospace was there
   for; the face stays theirs. */
.mono{ font-family:inherit; font-size:var(--fs-compact);
       font-variant-numeric:tabular-nums lining-nums;
       letter-spacing:.02em; white-space:nowrap; }
.desc{ color:var(--c-text-secondary); max-width:26ch;
       overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ============================== OVERVIEW ============================
   Two chart forms, both to scale and both labelled in the same row, so
   the colour is a second channel and never the only one. */

/* the demand ladder, width is a grade's share of total demand */
.dbar-cell{ width:300px; min-width:240px; white-space:nowrap; }
.dbar-cell .dbar{ display:inline-flex; vertical-align:middle; }
.dbar{ display:flex; height:14px; min-width:3px;
       border:var(--bw-hair) solid var(--c-divider); border-radius:2px; overflow:hidden; }
.dbar-short{ flex:1; background:var(--chart-focal); }
.dbar-pct{ display:inline-block; min-width:44px; font-size:var(--fs-micro);
           color:var(--c-text-secondary); text-align:right; padding-right:var(--sp-2);
           font-variant-numeric:tabular-nums lining-nums; }

.legend{ display:flex; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-3);
         font-size:var(--fs-micro); color:var(--c-text-secondary); }
.legend-key{ display:inline-block; width:12px; height:12px; border-radius:2px;
             border:var(--bw-hair) solid var(--c-divider); margin-left:var(--sp-3); }
.legend-key:first-child{ margin-left:0; }

/* the grade is a label, not a quantity, set it apart without shouting */
td.grade{ font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums lining-nums; }
.tbl-ladder td .sub{ display:block; font-size:var(--fs-micro);
                     color:var(--c-text-secondary); font-weight:var(--fw-regular); }

/* capital, one bar, three states, sized by value.
   Idle capital takes the alarm colour because that is what it is: money
   that is not working and that nobody has decided about. */
.cbar{ display:flex; height:38px; border-radius:var(--r-md); overflow:hidden;
       border:var(--bw-hair) solid var(--c-border); }
.cbar{ height:24px; }
.cbar-seg{ min-width:2px; }
/* n-300 measures 1.98:1 on white, a legend swatch is a meaningful graphical
   object and owes 3:1 under WCAG 1.4.11. n-400 is the lightest neutral that
   clears it on every surface a swatch can land on. */
.cbar-seg--working,.legend-key--working{ background:var(--chart-grey); }
.cbar-seg--over,.legend-key--over{ background:var(--chart-focal-2); }
.cbar-seg--idle,.legend-key--idle{ background:var(--chart-focal); }

/* the labels the bar cannot hold */
.cbar-keys{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-6); margin-top:var(--sp-3); }
.cbar-key{ display:flex; align-items:baseline; gap:var(--sp-2); font-size:var(--fs-compact); }
.cbar-key .legend-key{ margin:0; align-self:center; }
.cbar-key-name{ color:var(--c-text-secondary); }
.cbar-key-val{ font-weight:var(--fw-semibold);
               font-variant-numeric:tabular-nums lining-nums; }
.cbar-key-pct{ color:var(--c-text-secondary);
               font-variant-numeric:tabular-nums lining-nums; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); align-items:start; }
@media (max-width:1100px){ .split{ grid-template-columns:1fr; } }
/* Hino sets sub-headings in the corporate red throughout the report
   ("Trucks and buses", "Vehicle parts"). Permitted here for STATIC heading
   text only. It never sets a control, a value, or a state: those stay ink
   and andon, so a red word is never mistaken for a red alarm. */
.t-sub{ font-size:var(--fs-body); font-weight:var(--fw-semibold);
        color:var(--brand-red); margin:0; }


/* =============================== TARGETS ============================
   A twelve-month demand chart small enough to sit above the arithmetic
   it explains, and a numbered derivation that shows its working. */

.mchart{ display:flex; align-items:flex-end; gap:var(--sp-1);
         padding:var(--sp-3) 0 0; border-bottom:var(--bw-hair) solid var(--c-divider); }
.mc-col{ flex:1; display:flex; flex-direction:column; align-items:center;
         justify-content:flex-end; gap:2px; min-width:0; }
.mc-val{ font-size:var(--fs-micro); color:var(--c-text-secondary);
         font-variant-numeric:tabular-nums lining-nums; }
.mc-bar{ width:100%; max-width:38px; background:var(--n-300); border-radius:1px 1px 0 0; }
/* the six months the target is actually built from */
.mc-col.is-recent .mc-bar{ background:var(--c-text-secondary); }
.mc-col.is-recent .mc-lab{ font-weight:var(--fw-semibold); color:var(--c-text); }
.mc-lab{ font-size:var(--fs-micro); color:var(--c-text-secondary); padding-top:var(--sp-1);
         font-variant-numeric:tabular-nums lining-nums; }
.mc-sub{ font-size:var(--fs-micro); color:var(--c-text-disabled);
         font-variant-numeric:tabular-nums lining-nums; }
.mc-note{ font-size:var(--fs-micro); color:var(--c-text-secondary); margin:var(--sp-2) 0 0; }
.mchart--hist .mc-bar{ background:var(--c-text-secondary); }

.panel--part{ margin-bottom:var(--sp-6); }
.part-head{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-3);
            padding-bottom:var(--sp-3); border-bottom:var(--bw-hair) solid var(--c-divider); }
.part-id{ font-size:var(--fs-section); font-weight:var(--fw-semibold); }
.part-name{ color:var(--c-text-secondary); }

/* the derivation. Every step shows what it produced AND what it was
   produced from -- on a model whose last operation is a rounding, the
   input is the half of the story that earns trust. */
.steps{ list-style:none; margin:var(--sp-3) 0 0; padding:0; }
.step{ display:flex; align-items:baseline; gap:var(--sp-3);
       padding:var(--sp-3) 0; border-bottom:var(--bw-hair) solid var(--c-divider); }
.step:last-child{ border-bottom:0; }
.step-n{ flex:0 0 20px; height:20px; line-height:20px; text-align:center;
         border-radius:50%; background:var(--n-100); color:var(--c-text-secondary);
         font-size:var(--fs-micro); font-weight:var(--fw-semibold); }
.step-body{ flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; }
.step-label{ font-weight:var(--fw-medium); }
.step-calc{ font-size:var(--fs-compact); color:var(--c-text-secondary);
            font-variant-numeric:tabular-nums lining-nums; }
.step-extra{ font-size:var(--fs-micro); color:var(--c-text-disabled); }
.step-value{ font-size:var(--fs-section); font-weight:var(--fw-semibold);
             font-variant-numeric:tabular-nums lining-nums; text-align:right;
             flex:0 0 auto; }


/* ---- the section bar ------------------------------------------------
   Hino heads every panel on their data pages with a solid grey bar
   carrying a white bold label: "Net sales / Operating profit to net
   sales", "Units of vehicle production", "Global Sales Status". It is the
   single most recognisable device on those pages, so the section headings
   here become it.

   In print the bar is #9FA0A0. White on that measures 2.64:1 on a screen
   and cannot ship, so it is set to the ramp's 4.5:1 anchor instead. The
   device survives; the illegibility does not. */
.lines-head{
  background:var(--hino-bar); color:var(--n-0);
  padding:var(--sp-2) var(--sp-3); border-radius:0;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--sp-4); margin-bottom:var(--sp-3);
}
.lines-head .t-section,
.lines-head h2,
.lines-head h3{ color:var(--n-0); font-size:var(--fs-body);
                font-weight:var(--fw-semibold); margin:0; }
.lines-head .result-meta,
.lines-head .order-summary{ color:var(--n-0); opacity:.85; }

/* A sub-heading inside a panel is red text, not a second bar. Hino heads the
   PANEL with the grey bar and then sets the headings within it in the
   corporate red. A bar inside a bar's section is our invention. */
.sub-head{ display:flex; align-items:baseline; justify-content:space-between;
           gap:var(--sp-4); margin-bottom:var(--sp-3); }

/* The cream Hino uses to mark the column that matters in a financial
   table. Background only, never a text colour. */
.is-emphasis{ background:var(--hino-emphasis); }


/* ============================= BAR CHARTS ============================
   Their chart, reduced to what it actually is: faint horizontal rules, a
   baseline, grey bars for history and one red bar for the period being
   read, the value written above each bar and the focal one set bold. No
   axis box, no ticks, no vertical grid, no legend unless a second series
   makes one necessary. */

/* Full width of its column, with the bar capped so the ratio of bar to pitch
   lands where theirs does: six bars in 740px gives a 123px pitch and a 44px
   bar, about 36%. Capping the CHART instead left it stranded in white space. */
.chart{ position:relative; padding:var(--sp-4) 0 0; }
.chart-note{ font-size:var(--fs-micro); color:var(--c-text-secondary);
             margin:0 0 var(--sp-2); }
.chart-plot{ position:relative; display:flex; align-items:flex-end;
             gap:var(--sp-2); height:var(--chart-h,150px);
             border-bottom:var(--bw-hair) solid var(--c-border); }
.chart-grid{ position:absolute; inset:0; pointer-events:none; }
.chart-grid span{ position:absolute; left:0; right:0;
                  border-top:var(--bw-hair) solid var(--chart-grid); }
.chart-col{ position:relative; flex:1 1 0; min-width:0;
            display:flex; flex-direction:column; justify-content:flex-end;
            align-items:center; height:100%; }
.chart-val{ font-size:var(--fs-micro); color:var(--c-text);
            font-variant-numeric:tabular-nums lining-nums;
            margin-bottom:2px; white-space:nowrap; }
.chart-bar{ width:100%; max-width:44px; background:var(--chart-grey); }
.chart-col.is-focal .chart-bar{ background:var(--chart-focal); }
.chart-col.is-focal .chart-val{ font-weight:var(--fw-bold); }
.chart-x{ display:flex; gap:var(--sp-2); padding-top:var(--sp-2); }
.chart-x span{ flex:1 1 0; min-width:0; text-align:center;
               font-size:var(--fs-micro); color:var(--c-text-secondary);
               font-variant-numeric:tabular-nums lining-nums;
               overflow:hidden; text-overflow:ellipsis; }
.chart-x span.is-focal{ color:var(--c-text); font-weight:var(--fw-semibold); }

/* the disclosure that keeps the numbers available without printing them all
   on arrival */
.more{ margin-top:var(--sp-3); }
.more > summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center;
  gap:var(--sp-2); font-size:var(--fs-compact); color:var(--c-link);
  padding:var(--sp-1) 0;
}
.more > summary::-webkit-details-marker{ display:none; }
.more > summary::before{ content:"\25B8"; font-size:.9em; }
.more[open] > summary::before{ content:"\25BE"; }
.more > summary:focus-visible{ outline:var(--focus-w) solid var(--c-focus);
                               outline-offset:2px; }
.more-body{ margin-top:var(--sp-3); }


/* ---------------------------- the network map ------------------------
   Hino's banner as they made it, full width, logo and all. Nothing is drawn
   on top: the banner IS a field of dots, so a mark the same size as the map
   cannot be told from the map. The locations are named underneath instead,
   where a list is read rather than decoded. */
/* FULL BLEED, at whatever height that gives. It was held to 1,090px for a
   while to bring it down to about 500 tall, and it read worse: their banner is
   composed to run edge to edge, and a centred one is a picture of a banner
   rather than a banner. It costs the first screen, and that is the right
   trade for the piece that says whose system this is. */
.panel--map{ margin-bottom:var(--sp-6); }
.netmap{ position:relative; width:100%; line-height:0; }
.netmap img{ display:block; width:100%; height:auto; }

.netlegend{ padding:var(--sp-4); }
.netlegend-head{ margin:0 0 var(--sp-3); font-size:var(--fs-compact);
                 font-weight:var(--fw-semibold); }
.netgroups{ display:grid; gap:var(--sp-3) var(--sp-6);
            grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
/* A neutral rule, not the brand one. Their red rule marks ONE opening
   passage; eight of them in a row is a pattern, and a pattern is not an
   accent. */
.netgroup{ display:flex; flex-direction:column; gap:2px;
           border-left:var(--bw-flag) solid var(--c-rule);
           padding-left:var(--sp-3); }
.netgroup-head{ font-size:var(--fs-compact); font-weight:var(--fw-semibold); }
.netgroup-head b{ font-variant-numeric:tabular-nums lining-nums; }
.netgroup-list{ font-size:var(--fs-micro); color:var(--c-text-secondary);
                line-height:var(--lh-prose); }

/* the headline count, set on the banner rather than above it */
.netcount{
  position:absolute; left:var(--sp-4); top:var(--sp-3);
  color:var(--n-0); font-size:var(--fs-compact); line-height:1.3;
}
@media (max-width:820px){
  .netlabel{ display:none; }
  .netdot{ width:7px; height:7px; }
}


/* ------------------------------- donuts ------------------------------
   Their share chart: a thick ring on a grey track, the figure set large in
   the middle with the unit small beside it, segments in the chart palette.

   Drawn as an SVG arc rather than a conic-gradient. A conic with hard stops
   would paint the same picture, but it would also put the word "gradient"
   into the stylesheet and walk past a house rule on a technicality. A
   stroked arc is what a chart actually is. */
.donut-row{ display:flex; align-items:center; gap:var(--sp-6); flex-wrap:wrap; }
.donut-pair{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8);
             align-items:start; }
@media (max-width:1100px){ .donut-pair{ grid-template-columns:1fr; } }
.donut-title{ font-size:var(--fs-compact); color:var(--c-text-secondary);
              margin:0 0 var(--sp-3); }
.donut-wrap{ position:relative; flex:0 0 auto; }
.donut{ display:block; transform:rotate(-90deg); }
.donut circle{ fill:none; }
.donut .track{ stroke:var(--n-100); }
.donut-centre{ position:absolute; inset:0;
               display:flex; flex-direction:column; align-items:center;
               justify-content:center; text-align:center; pointer-events:none; }
/* The ring has a fixed hole, so the figure inside it has a fixed budget.
   A full currency string overflowed the arc once; this keeps any future one
   inside its own diameter rather than over the chart. */
.donut-figure{ font-size:clamp(.95rem, 1.5rem, 1.5rem); font-weight:var(--fw-bold);
               line-height:1; font-variant-numeric:tabular-nums lining-nums;
               max-inline-size:9ch; overflow-wrap:anywhere; }
.donut-unit{ font-size:var(--fs-micro); font-weight:var(--fw-regular);
             color:var(--c-text-secondary); }
.donut-caption{ font-size:var(--fs-micro); color:var(--c-text-secondary);
                margin-top:var(--sp-2); text-align:center; }
.donut-keys{ display:flex; flex-direction:column; gap:var(--sp-2); }
.donut-key{ display:flex; align-items:baseline; gap:var(--sp-2);
            font-size:var(--fs-compact); }
.donut-key .legend-key{ margin:0; align-self:center; }
.donut-key-name{ color:var(--c-text-secondary); }
.donut-key-val{ font-weight:var(--fw-semibold);
                font-variant-numeric:tabular-nums lining-nums; }

/* A demand curve small enough to live in a table cell. Data, not state, so it
   takes the neutral ink and never a status colour and never the brand red. */
.spark{ display:block; }
.spark rect{ fill:var(--n-500); }
tr:hover .spark rect{ fill:var(--c-text-secondary); }

/* ============================== PANELS ============================== */

.panels{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
         gap:var(--sp-4); margin-bottom:var(--sp-6); }
.panel{ border:var(--bw-hair) solid var(--c-divider); border-radius:0;
        background:var(--c-ground); }
/* Hino do not distinguish between a panel head and a table head: both are the
   solid grey bar with a white bold label. Making these the same object is what
   turns a page of cards into one of their data pages. */
.panel-head{ padding:var(--sp-2) var(--sp-3);
             font-size:var(--fs-compact); font-weight:var(--fw-semibold);
             color:var(--n-0); background:var(--hino-bar); }
.panel-body{ padding:var(--sp-3); }

/* Label and value must stay associated. Right-aligning a TEXT value across a
   450px panel leaves a dot-leader of empty space and the eye loses the pair,
   so only NUMBERS right-align (where column alignment is the point), and the
   label column is sized to its content rather than stretching. */
.kv{ display:grid; grid-template-columns:minmax(84px,max-content) 1fr;
     gap:var(--sp-2) var(--sp-4); margin:0; align-items:baseline; }
.kv dt{ color:var(--c-text-secondary); }
.kv dd{ margin:0; text-align:left; }
.kv dd.num{ text-align:right; font-variant-numeric:tabular-nums lining-nums; }

.stat{ font-size:calc(var(--fs-figure)*var(--fs-display-scale));
       font-weight:var(--fw-semibold); line-height:1.1;
       font-variant-numeric:tabular-nums lining-nums; }
.stat-unit{ font-size:var(--fs-micro); color:var(--c-text-secondary);
            font-weight:var(--fw-regular); margin-left:var(--sp-1); }

/* ============================== STATUS ==============================
   Every state is icon + word + colour. Never colour alone. */

.tag{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-micro); font-weight:var(--fw-semibold);
  padding:0; border:0; background:none; white-space:nowrap;
  color:var(--c-text);
}
/* the solid square of their chart legends, carrying the colour so the word
   never has to */
.tag::before{ content:""; width:9px; height:9px; flex:0 0 auto;
              background:currentColor; }
.tag--ok{ color:var(--c-ok); }
.tag--warn{ color:var(--c-attention); }
.tag--bad{ color:var(--c-alert); }
.tag--mute{ color:var(--c-idle); }
.tag--info{ color:var(--c-info); }

/* the resolution notice, the interface teaching itself */
/* Their device for setting a passage apart: a thick rule at the left, the text
   set in from it, no fill and no rounding. The pale tinted box we had is a web
   convention rather than anything in their material, and at four different
   tints it was also four different coloured rectangles competing for attention.
   The rule carries the state; the ground stays the page. */
.notice{
  display:flex; gap:var(--sp-3); align-items:flex-start;
  padding:var(--sp-1) 0 var(--sp-1) var(--sp-3);
  border:0; border-left:var(--bw-flag) solid var(--c-info);
  background:none; border-radius:0; margin-bottom:var(--sp-4);
}
.notice--warn{ border-left-color:var(--c-attention); }
.notice--bad{ border-left-color:var(--c-alert); }
.notice-title{ font-weight:var(--fw-semibold); margin:0 0 2px; }
.notice p{ margin:0; line-height:var(--lh-prose); }
.chain{ margin-top:var(--sp-2); font-family:var(--font-code);
        font-variant-numeric:slashed-zero lining-nums; color:var(--c-text-secondary); }
.chain-arrow{ color:var(--c-text-disabled); margin:0 var(--sp-2); }


/* ============================== DIALOG ==============================
   Built on the native <dialog>, which gives focus trapping, Escape-to-close
   and the right accessibility semantics without us reimplementing them.

   It replaces window.confirm and window.prompt, which were wrong here for
   reasons beyond appearance: their buttons render in the BROWSER's language,
   not ours, so a Japanese screen still said OK/Cancel in English; prompt is a
   single-line box and the paste target is a multi-line order file; and after
   repeated dialogs Chrome offers to suppress them, after which confirm returns
   false and prompt returns null for ever and orders silently stop staging.

   This is also the only place in the product with a shadow. */
dialog{
  padding:0; border:var(--bw-hair) solid var(--c-border); border-radius:var(--r-md);
  background:var(--c-ground); color:var(--c-text);
  box-shadow:var(--shadow-overlay);
  max-inline-size:min(680px, calc(100vw - 48px));
  inline-size:100%;
  font-family:var(--font-ui); font-size:var(--fs-body); line-height:var(--lh-dense);
}
dialog::backdrop{ background:rgba(32,24,20,.35); }
dialog[open]{ animation:dlg var(--dur-fast) var(--ease); }
@keyframes dlg{ from{ opacity:0 } to{ opacity:1 } }
@media (prefers-reduced-motion:reduce){ dialog[open]{ animation:none } }

.dlg-head{
  padding:var(--sp-4); border-bottom:var(--bw-hair) solid var(--c-border);
  background:var(--c-surface);
}
.dlg-title{ font-size:var(--fs-section); font-weight:var(--fw-semibold); margin:0; }
.dlg-sub{ margin:var(--sp-1) 0 0; color:var(--c-text-secondary); line-height:var(--lh-prose); }
.dlg-body{ padding:var(--sp-4); max-block-size:60vh; overflow:auto; }
.dlg-foot{
  padding:var(--sp-3) var(--sp-4); border-top:var(--bw-hair) solid var(--c-border);
  background:var(--c-surface); display:flex; justify-content:flex-end; gap:var(--sp-2);
}
.dlg-body textarea{
  inline-size:100%; min-block-size:200px; resize:vertical;
  font-family:var(--font-code); font-size:var(--fs-body);
  font-variant-numeric:slashed-zero lining-nums;
  padding:var(--sp-2) var(--sp-3); color:var(--c-text); background:var(--c-ground);
  border:var(--bw-hair) solid var(--c-border); border-radius:var(--r-sm);
}
.dlg-body textarea:focus-visible, .dlg-body input:focus-visible{
  outline:var(--focus-w) solid var(--c-focus); outline-offset:var(--focus-offset);
}
.dlg-count{ margin-top:var(--sp-2); font-size:var(--fs-micro); color:var(--c-text-secondary); }
.dlg-what{ margin:0 0 var(--sp-3); }
.dlg-what li{ margin-bottom:var(--sp-1); }

/* ========================= EMPTY / LOADING ========================== */

/* ============================ ORDER ENTRY ===========================
   Required fields are marked with the WORD, not an asterisk: an asterisk is
   only a two-channel code if the reader already knows the convention, and
   the word needs no key. */
.req{
  display:inline-block; margin-left:var(--sp-2); padding:0 var(--sp-1);
  font-size:var(--fs-micro); font-weight:var(--fw-semibold);
  color:var(--c-alert); border:var(--bw-hair) solid #EFD3D1;
  background:var(--c-alert-tint); border-radius:var(--r-sm);
}
/* .lines-head is the Hino section bar, defined above. */
.lines-actions{ display:flex; gap:var(--sp-2); margin:calc(-1 * var(--sp-1)) 0 var(--sp-3); }

#order-table td{ padding:var(--sp-1) var(--cell-pad-x); }
#order-table input{
  height:26px; padding:0 var(--sp-2); width:100%;
  border:var(--bw-hair) solid var(--c-border); border-radius:var(--r-sm);
  font-family:var(--font-code); font-size:var(--fs-body);
  font-variant-numeric:slashed-zero lining-nums;
}
#order-table input.qty{ text-align:right; font-variant-numeric:tabular-nums lining-nums; }
.rowdrop{
  appearance:none; border:0; background:none; cursor:pointer; padding:0 var(--sp-1);
  color:var(--c-text-secondary); font-size:var(--fs-section); line-height:1;
}
.rowdrop:hover{ color:var(--c-alert); }

/* A state is a flag on the row plus a word, never a colour alone, and never
   a full row tint, which would be unreadable at 20 rows. */
tr.state-split td:first-child{ box-shadow:inset var(--bw-flag) 0 0 0 var(--c-attention); }
tr.state-held  td:first-child{ box-shadow:inset var(--bw-flag) 0 0 0 var(--c-attention); }
tr.state-blocked td:first-child{ box-shadow:inset var(--bw-flag) 0 0 0 var(--c-alert); }
tr.state-accepted td:first-child{ box-shadow:inset var(--bw-flag) 0 0 0 var(--c-ok); }

.order-actions{ display:flex; align-items:center; gap:var(--sp-3);
                margin-top:var(--sp-4); flex-wrap:wrap; }
.order-summary{ color:var(--c-text-secondary); }
.order-summary strong{ color:var(--c-text); font-variant-numeric:tabular-nums lining-nums; }

/* A dashed rectangle with a centred invitation is the house style of every
   template on the internet. Theirs would simply be a quiet block of the panel
   grey, so that is what this is: no dashes, no centring, no rounding. */
.empty,.placeholder{
  border:0; border-radius:0;
  padding:var(--sp-6); text-align:left;
  color:var(--c-text-secondary); background:var(--c-surface);
}
.empty p{ margin:0 0 var(--sp-2); }
.empty-eg{ font-size:var(--fs-body); }
.eg + .eg{ margin-left:var(--sp-3); }

.loading{ display:flex; align-items:center; gap:var(--sp-3);
          color:var(--c-text-secondary); padding:var(--sp-6); }
.spinner{ width:13px; height:13px; border:2px solid var(--n-200);
          border-top-color:var(--c-text-secondary); border-radius:50%;
          animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .spinner{ animation-duration:2s; } }

/* ============================== FOOTER ============================== */

.app-footer{
  flex:0 0 auto; border-top:var(--bw-hair) solid var(--c-border);
  padding:var(--sp-2) var(--sp-6); display:flex; justify-content:space-between;
  gap:var(--sp-4); font-size:var(--fs-micro); color:var(--c-text-secondary);
  background:var(--c-surface);
}

.as-at{ font-size:var(--fs-micro); color:var(--c-text-secondary);
        margin-top:var(--sp-2); max-inline-size:96ch;
        line-height:var(--lh-prose); }
.result-head{ display:flex; justify-content:space-between; align-items:baseline;
              gap:var(--sp-4); margin-bottom:var(--sp-3); flex-wrap:wrap; }
.result-title{ font-size:var(--fs-section); font-weight:var(--fw-semibold); margin:0; }
/* Two classes the stylesheet check found rendered with no rule at all:
   .result is the container the enquiry and pricing panels paint into, and
   .t-meta is the description line under an order line. Neither was styled,
   so both simply inherited whatever surrounded them. */
.result{ display:block; }
.result[hidden]{ display:none; }
.t-meta{ font-size:var(--fs-micro); color:var(--c-text-secondary);
         margin-top:2px; }
.result-meta{ font-size:var(--fs-micro); color:var(--c-text-secondary); }

/* The identity line. Previously space-between threw the description ~1,400px
   from the part number it describes, and clipped it. A part number, its name
   and its state are ONE fact and must read as one group, left-aligned. */
.identity{ display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap;
           margin-bottom:var(--sp-4); padding-bottom:var(--sp-3);
           border-bottom:var(--bw-hair) solid var(--c-rule); }
.identity-code{ font-family:var(--font-code); font-variant-numeric:slashed-zero lining-nums;
                font-size:var(--fs-title); font-weight:var(--fw-semibold); margin:0;
                letter-spacing:.01em; }
.identity-desc{ font-size:var(--fs-section); color:var(--c-text-secondary); }

/* one headline figure per panel, with its unit beneath rather than beside */
.figure{ display:flex; flex-direction:column; gap:2px; margin-bottom:var(--sp-3); }
.figure-value{ font-size:calc(var(--fs-figure)*var(--fs-display-scale));
               font-weight:var(--fw-semibold); line-height:1.05;
               font-variant-numeric:tabular-nums lining-nums; }
.figure-label{ font-size:var(--fs-micro); color:var(--c-text-secondary); }
.panel-note{ font-size:var(--fs-micro); color:var(--c-text-secondary);
             margin:var(--sp-3) 0 0; line-height:var(--lh-prose); }

@media (max-width:900px){
  .app-header{ flex-wrap:wrap; gap:var(--sp-3); }
  .modules{ order:3; width:100%; }
  .app-main{ padding:var(--sp-4) var(--sp-3); }
}

/* ==========================================================================
   Set your password.

   Deliberately restrained. The primary action is INK, not brand red: red here
   describes a state that needs a person to act, and "save the thing you came
   to save" is not that. Red would also read as a delete.

   Only the forced variant carries any alarm colour, and it carries it on the
   explanatory line rather than on a control.
   ========================================================================== */
.pw-scrim{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-4);
  background:rgba(26,26,26,.55);
}
.pw-scrim[hidden]{ display:none; }

.pw-card{
  width:100%; max-width:26rem;
  background:var(--c-ground);
  border:1px solid var(--c-rule);
  border-radius:4px;
  padding:var(--sp-6) var(--sp-6) var(--sp-4);
  box-shadow:0 10px 40px rgba(0,0,0,.25);
}

.pw-title{
  margin:0 0 var(--sp-2);
  font-size:var(--fs-section); font-weight:700; color:var(--c-text);
}
.pw-lead{
  margin:0 0 var(--sp-4);
  font-size:var(--fs-compact); color:var(--c-text-secondary); line-height:1.5;
}

.pw-label{
  display:block; margin:0 0 var(--sp-1);
  font-size:var(--fs-micro); font-weight:600; color:var(--c-text-secondary);
}
.pw-input{
  width:100%; box-sizing:border-box;
  margin:0 0 var(--sp-3);
  padding:var(--sp-2) var(--sp-3);
  font:inherit; font-size:var(--fs-body);
  color:var(--c-text); background:var(--c-ground);
  border:1px solid var(--c-border);
  border-radius:3px;
}
.pw-input:focus-visible{
  outline:var(--focus-w) solid var(--c-focus); outline-offset:var(--focus-offset);
  border-color:var(--c-border-strong);
}

.pw-hint{ margin:0 0 var(--sp-2); font-size:var(--fs-micro); color:var(--c-text-secondary); }

/* Empty until something is said, so it never reserves a blank line. */
.pw-msg{ margin:0; min-height:1.2em; font-size:var(--fs-micro); color:var(--c-alert); }
.pw-msg:empty{ min-height:0; }

.pw-actions{
  display:flex; justify-content:flex-end; align-items:center; gap:var(--sp-3);
  margin-top:var(--sp-4);
}
.pw-cancel{
  appearance:none; border:0; background:none; padding:0; font:inherit;
  font-size:var(--fs-compact); color:var(--c-link); cursor:pointer;
  text-decoration:underline; text-underline-offset:2px;
}
.pw-cancel[hidden]{ display:none; }
.pw-save{
  appearance:none; cursor:pointer; font:inherit; font-size:var(--fs-compact); font-weight:600;
  padding:var(--sp-2) var(--sp-4);
  color:var(--n-0); background:var(--brand-ink);
  border:1px solid var(--brand-ink); border-radius:3px;
}
.pw-save:hover{ background:var(--n-800); border-color:var(--n-800); }
.pw-save:disabled{ background:var(--n-500); border-color:var(--n-500); cursor:default; }
.pw-cancel:focus-visible, .pw-save:focus-visible{
  outline:var(--focus-w) solid var(--c-focus); outline-offset:var(--focus-offset);
}