/* Catalog UI — ZAG PIM Studio surface (light only).
   Tokens: the :root blocks below are copied verbatim from zag-design-system
   brand/colors.css and surfaces/pim-studio/tokens.css (names kept). Fonts are
   linked from each HTML page. Component rules follow the tokens. */

/* ---- brand/colors.css :root (verbatim) ---- */
:root {
  /* ===========================================
     THE ZAG BLUE — the brand color, and the primary action color on
     every surface. Settled 2026-08-30, DECISIONS.md S-2.

     Measured from brand/logo/zag-logo.png — 34,243 of 34,358 opaque
     pixels are exactly this value. The corporate color is what the mark
     actually is; the marketing site already treats it that way.

     This supersedes the legacy #2C4BEF, which is retired.
     =========================================== */
  --zag-blue:        #0014DF;
  --zag-blue-ink:    #0010AE;  /* hover / pressed — from site.css --accent-ink */
  --zag-blue-tint:   #E5E7FC;
  --zag-blue-wash:   rgba(0, 20, 223, 0.055);

  /* ===========================================
     THE AI SIGNAL — purple to blue.
     Settled 2026-08-30, DECISIONS.md S-2.

     This gradient is NOT "PIM Studio's color". It means one thing on
     every surface: **a machine did this.** Use it for agent affordances,
     AI-generated values, the agent avatar, suggestion cards, and the
     single primary action a screen is steering toward. Anywhere it
     appears, the user should be able to read it as "this came from the
     model, not from me."

     Do not use it as decoration, as a section divider, or as a second
     brand color. If a surface needs an accent that is not about the
     agent, that accent is --zag-blue.
     =========================================== */
  --ai-purple:       #7A5CFF;
  --ai-purple-600:   #5B3FD1;  /* hover / active text */
  --ai-blue:         #3D7BFF;  /* gradient endpoint */
  --ai-tint:         #F1ECFF;  /* selected bg, chip, cite chip */
  --ai-tint-soft:    #FBF9FF;  /* hover bg on suggestion buttons */
  --ai-border:       #CFC2FF;  /* dashed upload border */

  --ai-gradient:     linear-gradient(135deg, #7A5CFF 0%, #3D7BFF 100%); /* @kind color */
  --ai-gradient-h:   linear-gradient(90deg, #7A5CFF, #3D7BFF); /* @kind color */
  --ai-gradient-hdr: linear-gradient(180deg, #FBF9FF, #ffffff); /* @kind color */

  /* ===========================================
     NEUTRALS — zero saturation.
     --gray-900 is the body-text near-black. Never pure #000.
     =========================================== */
  --gray-50:   #FAFAFA;
  --gray-100:  #F4F4F5;
  --gray-200:  #E7E7EA;
  --gray-300:  #D1D5DB;
  --gray-400:  #9CA3AF;
  --gray-500:  #6B7280;
  --gray-600:  #4B5563;
  --gray-700:  #374151;
  --gray-800:  #1F2937;
  --gray-900:  #0D0D0D;
  --white:     #FFFFFF;

  /* KNOWN DRIFT — project-zag@main/frontend/src/index.css ships four mid-greys
     one step off this ramp: gray-100 #F1F3F5, gray-200 #E2E4EC, gray-500
     #737373, gray-600 #525252. Not yet reconciled; see DECISIONS.md D-3.
     Do not "fix" either side unilaterally. */

  --border:        #E2E4EC;  /* default 1px rule, all surfaces */
  --border-strong: #D1D5DB;  /* table-header underline */

  /* ===========================================
     SEMANTIC — functional, never decorative.
     Identical in project-zag@main and in this system.
     =========================================== */
  --success:      #107C41;   /* Excel green — ingested, confidence >= 0.9 */
  --success-tint: #E6F4EC;
  --warning:      #F59E0B;   /* needs review */
  --warning-tint: #FFF6E5;
  --danger:       #D93025;   /* failed, missing source */
  --danger-tint:  #FCEAE8;
  --info:         #2B5BDF;
  --pim:          #0E8A7A;   /* owner 2026-10-15: PIM fills must not look like web fills (purple was too close to blue) */
  --info-tint:    #EBF0FE;

  /* ===========================================
     FILE-TYPE COLORS
     Taken from each format's real vendor identity, so a spreadsheet
     reads as a spreadsheet before anyone reads the label.
     =========================================== */
  --brand-excel: #107C41;
  --fk-pdf: #C8102E; --fk-xls: #1D6F42; --fk-csv: #0E8A7A; --fk-img: #5B3FD1; --fk-other: #6B7280;   /* file-kind glyphs (white label) */
  --brand-pptx:  #D24726;
  --brand-docx:  #2B5BDF;
  --brand-pdf:   #D93025;
  --brand-teal:  #14B28A;   /* json / xml */
  --brand-zip:   #6B5B2A;
}

/* ---- surfaces/pim-studio/tokens.css :root (verbatim) ---- */
:root {
  /* ===========================================
     ACCENT — aliases onto the brand AI signal.

     The purple->blue gradient is a BRAND-level token now: it means
     "a machine did this" on every ZAG surface, not just this one
     (DECISIONS.md S-2). These --accent-* names are kept because every
     component, preview card and the built bundle references them; they
     are aliases, not a second definition. Change the value in
     ../../brand/colors.css.

     The corporate brand color is --zag-blue #0014DF, also in the brand
     layer. This surface uses it for brand-equity moments (the wordmark,
     watermarks), not for chrome.
     =========================================== */
  --accent-purple:       var(--ai-purple);
  --accent-purple-600:   var(--ai-purple-600);
  --accent-blue:         var(--ai-blue);
  --accent-tint:         var(--ai-tint);
  --accent-tint-soft:    var(--ai-tint-soft);
  --accent-border:       var(--ai-border);

  --accent-gradient:     var(--ai-gradient); /* @kind color */
  --accent-gradient-h:   var(--ai-gradient-h); /* @kind color */
  --accent-gradient-hdr: var(--ai-gradient-hdr); /* @kind color */

  /* ===========================================
     SURFACES
     =========================================== */
  --bg-canvas:       #FFFFFF;
  --surface-sunken:  #F8F9FA;  /* tab body, chat scroll, input bg */
  --surface-hover:   #F4F6FA;  /* row / nav hover */
  /* LIVE: project-zag@main paints `body { background-color: #F2F3F7 }` and
     uses #F8F9FA for row hover. This file keeps the documented values;
     DECISIONS.md D-3 tracks the reconciliation. */

  /* ===========================================
     FILL SOURCE-KIND CELL TINTS
     Deliberately very desaturated — the fill grid is dense and these are
     cell BACKGROUNDS, read at a glance to show where a value came from.
     =========================================== */
  --src-exact:      #FFFFFF;
  --src-alias:      #F0F5FF;
  --src-ai:         #FFF8EE;
  --src-transform:  #FFFBE8;
  --src-constant:   #F7F7F2;
  --src-missing:    #FEF1EE;

  /* ===========================================
     TYPOGRAPHY
     Inter is the workhorse; Manrope handles display sizes (page titles,
     stat values); JetBrains Mono carries every "machine value" — SKUs,
     UPCs, raw column headers, file sizes, cost numbers, token counts.

     LIVE DELTA: project-zag@main sets `body { font-family: "Manrope",
     "Inter", ... }` — Manrope first, at every size — and a 15px root with
     0.9375rem body (~14px), 0.8125rem for p/li (~13px). This file keeps
     the Inter-first / 13.5px system the design docs specify. One of the
     two has to give; DECISIONS.md D-3.

     JAPANESE: the app runs bilingual (en/ja). Elements carrying JP text
     get lang="ja", which switches to Noto Sans JP and enables
     font-feature-settings: "palt". That rule lives in the live build and
     is reproduced at the bottom of this file. */
  --font-sans:    "Inter", "Manrope", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --font-display: "Manrope", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* Type scale (matches §2 of P6 design system) */
  --fs-display-l:  26px;       /* big stat value */
  --fs-display-m:  22px;       /* page title (h1) */
  --fs-display-s:  20px;       /* strip stat value */
  --fs-h2:         14px;       /* card title */
  --fs-body:       13.5px;     /* body */
  --fs-body-s:     12.5px;     /* table cell */
  --fs-label:      10.5px;     /* uppercase eyebrow */
  --fs-meta:       11.5px;     /* meta / caption */
  --fs-mono:       12px;       /* inline mono (sku / upc) */
  --fs-mono-micro: 10px;       /* raw column header */

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-label:   0.06em;

  /* ===========================================
     SPACING
     4px base; primary scale is 4/8/12/16/24/32/48.
     =========================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ===========================================
     RADII
     ZAG leans on soft-but-not-pillowy radii:
     - 4–6px for chips and inline elements
     - 8–10px for inputs, file icons, small cards
     - 12px for stat tiles & main cards
     - 16px for hero containers
     - 999px for pills, badges, segment controls
     =========================================== */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  10px;
  --radius-xl:  12px;
  --radius-2xl: 16px;
  --radius-pill: 999px;

  /* ===========================================
     SHADOWS / ELEVATION
     Cards are flat-with-border by default;
     elevation appears only on hover / overlays.
     =========================================== */
  --shadow-xs: 0 1px 0 rgba(15, 17, 23, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 17, 23, 0.06), 0 1px 0 rgba(15, 17, 23, 0.03);
  --shadow-md: 0 4px 12px rgba(15, 17, 23, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 17, 23, 0.12);
  --shadow-focus-purple: 0 0 0 4px rgba(122, 92, 255, 0.10);
  --shadow-focus-purple-strong: 0 0 0 4px rgba(122, 92, 255, 0.18);
  --shadow-glow-purple: 0 0 0 6px rgba(122, 92, 255, 0.18);

  /* ===========================================
     MOTION
     Quick and confident. No bouncy easing —
     this is enterprise software for operators.
     =========================================== */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1); /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur-base:    200ms; /* @kind other */
  --dur-slow:    320ms; /* @kind other */
}

/* ---- app-local tokens (not in the DS; derived from it) ---- */
:root {
  --warning-ink: #92400E;     /* readable text on --warning-tint */
  --appbar-h: 52px;
}

/* =================================================================
   BASE — semantic rules from tokens.css, trimmed to what this app uses
   ================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); color: var(--gray-900);
  background: var(--bg-canvas); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body { min-width: 1280px; }
[lang="ja"] { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", "Inter", "Manrope", system-ui, sans-serif; font-feature-settings: "palt"; }
[lang="ja"] .mono, .mono, code { font-family: "JetBrains Mono", "Noto Sans JP", "Hiragino Sans", monospace; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; color: var(--gray-900); }
h1 { font-size: var(--fs-display-m); letter-spacing: var(--tracking-display); line-height: 1.2; }
h2 { font-size: var(--fs-h2); letter-spacing: var(--tracking-tight); line-height: 1.3; }
h3 { font-size: 13px; letter-spacing: var(--tracking-tight); color: var(--gray-800); }
a { color: var(--zag-blue); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--zag-blue-ink); }
.mono { font-size: var(--fs-mono); font-weight: 500; color: var(--gray-800); }
.muted { color: var(--gray-500); }
.eyebrow { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gray-500); }
.icon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
[hidden] { display: none !important; }

/* focus: 4px purple ring, :focus-visible only */
:focus-visible { outline: none; box-shadow: var(--shadow-focus-purple-strong); }

/* buttons & inputs */
.btn {
  appearance: none; display: inline-flex; align-items: center; gap: var(--space-2); font: inherit; font-weight: 700;
  font-size: 13px; padding: 7px 14px; border-radius: var(--radius-md); border: 1px solid var(--zag-blue);
  background: var(--zag-blue); color: var(--white); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.btn:hover { background: var(--zag-blue-ink); border-color: var(--zag-blue-ink); color: var(--white); }
.btn:active { opacity: .85; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.secondary { background: var(--white); color: var(--gray-800); border-color: var(--border); font-weight: 600; }
.btn.secondary:hover { background: var(--zag-blue-wash); border-color: var(--zag-blue); color: var(--zag-blue); }
.btn.small { padding: 4px 10px; font-size: 12px; }
.input, .select {
  font: inherit; font-size: 13px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--white); color: var(--gray-900); transition: border-color var(--dur-fast) var(--ease-standard);
}
.input:hover, .select:hover { border-color: var(--border-strong); }

/* pills (status badges, 999px) */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; white-space: nowrap; }
.pill.ok { background: var(--success-tint); color: var(--success); }
.pill.warn { background: var(--warning-tint); color: var(--warning-ink); }
.pill.bad { background: var(--danger-tint); color: var(--danger); }
.pill.info { background: var(--zag-blue-tint); color: var(--zag-blue); }
.pill.neutral { background: var(--gray-100); color: var(--gray-600); }
.pill.ai { background: var(--ai-tint); color: var(--ai-purple-600); }
.chip { display: inline-block; padding: 0 6px; border-radius: var(--radius-xs); background: var(--gray-100); color: var(--gray-700); font-family: var(--font-mono); font-size: 11px; }

/* =================================================================
   APP BAR — zag wordmark (image) · rule · client logo (or name) · file · series
   ================================================================= */
.appbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--space-4);
  height: var(--appbar-h); padding: 0 28px; background: var(--bg-canvas); border-bottom: 1px solid var(--border);
}
.appbar .wordmark { height: 22px; width: auto; display: block; }
.appbar .rule { width: 1px; height: 20px; background: var(--border-strong); }
.appbar .client { height: 13px; width: auto; display: block; }
.appbar .client-name { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: var(--tracking-tight); color: var(--gray-900); white-space: nowrap; }   /* CAT_CLIENT_LOGO empty: the client's name in the logo's place */
.appbar .spacer { flex: 1; }
.appbar .crumb { color: var(--gray-500); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.appbar .crumb:hover { color: var(--zag-blue); }
.appbar .crumb-sep { color: var(--gray-300); margin: 0 -8px; }
/* job page: the catalog's title over its file name, two lines inside the 52 px bar */
.jobtitle { display: flex; flex-direction: column; justify-content: center; min-width: 0; max-width: 560px; line-height: 1.25; }
.jobtitle .series { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: var(--tracking-tight); color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jobtitle .file { font-family: var(--font-mono); font-size: 11px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jobtitle .series:empty { display: none; }
.jobtitle .series:empty + .file { font-size: var(--fs-mono); color: var(--gray-800); }
/* owner 2026-11-02: the job id as a copyable chip beside the title (the API's `id`; the UI never showed it before) */
.appbar .jobid { font-family: var(--font-mono); font-size: 11px; color: var(--gray-600); background: var(--gray-100); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 1px 6px; cursor: pointer; white-space: nowrap; line-height: 1.4; }
.appbar .jobid:hover { color: var(--gray-900); border-color: var(--border-strong); }
.appbar .jobid.copied { color: var(--zag-blue); border-color: var(--zag-blue); }
/* owner 2026-10-16: the input-files line under the title (every file, kind icon each) */
.jobtitle .infiles { display: inline; }
.jobtitle .infiles .inlbl { font-family: var(--font-sans); color: var(--gray-500); }
.jobtitle .infiles .inf { white-space: nowrap; }
.jobtitle .infiles .inf .fk { margin: 0 5px 2px 2px; vertical-align: middle; }
.jobtitle .infiles .fcnt { color: var(--zag-blue); font-weight: 600; }
/* owner 2026-10-16: the signed-in user, right side next to the language switch */
.whoami { display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 280px; min-width: 0; font-size: 12.5px; color: var(--gray-500); white-space: nowrap; }
.whoami[hidden] { display: none; }
.whoami .nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.whoami .chip.admin { flex: none; background: var(--zag-blue-tint); color: var(--zag-blue); font-weight: 600; }
/* CAT_API_KEYS (owner 2026-10-31): the appbar's API button and its key dialog */
.apikeybtn { appearance: none; display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 3px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); color: var(--gray-600); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.apikeybtn:hover, .apikeybtn:focus-visible { border-color: var(--zag-blue); color: var(--zag-blue); background: var(--zag-blue-wash); }
.apikeybtn .icon { width: 14px; height: 14px; }
.overlay .obox.apikey { max-width: 560px; gap: 12px; }
.apikey .akhead { display: flex; align-items: center; gap: 10px; }
.apikey .akhead h2 { flex: 1; font-size: 16px; margin: 0; }
.apikey .akmark { width: 28px; height: 28px; border-radius: var(--radius-md); background: var(--zag-blue-tint); color: var(--zag-blue); display: grid; place-items: center; flex: none; }
.apikey .akmark .icon { width: 16px; height: 16px; }
.apikey .akkey { display: block; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--gray-50); font-size: 13px; overflow-wrap: anywhere; user-select: all; }
.apikey .akbtns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.apikey .akbtns .spacer { flex: 1; }
.overlay .obox.apikey .btn { justify-self: auto; }
.apikey .akask { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--danger); border-radius: var(--radius-sm); background: var(--danger-tint); }
.apikey .aksub { font-size: 12.5px; color: var(--gray-600); }
.apikey .aknote { font-size: 12.5px; color: var(--success); }
.apikey .akerr { color: var(--danger); }
.apikey .akex { display: grid; gap: 4px; font-size: 12px; }
.apikey .akex code { display: block; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--gray-100); overflow-wrap: anywhere; }
.srclangs { display: inline-flex; gap: 4px; align-items: center; }
.srclangs .chip.lang { margin: 0; background: var(--zag-blue-tint); color: var(--zag-blue); font-weight: 600; }

/* job page: totals strip (tiles + one composition bar) and the download split button */
.jobhead { display: flex; align-items: flex-start; gap: var(--space-6); margin-bottom: var(--space-3); }
.jobhead:has(.stats:empty) { display: none; }
.jobhead .stats { flex: 1; min-width: 0; }
.statrow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; }
.stat { display: flex; flex-direction: column; justify-content: flex-start; gap: 1px; padding: 2px var(--space-5) 2px 0; margin-right: var(--space-5); border-right: 1px solid var(--border); min-width: 0; }
.stat:last-of-type { border-right: 0; }
.stat .lb { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--gray-500); white-space: nowrap; }
.stat b { font-family: var(--font-display); font-size: var(--fs-display-s); font-weight: 700; letter-spacing: var(--tracking-display); line-height: 1.15; color: var(--gray-900); font-variant-numeric: tabular-nums; }
.stat b .pct { font-size: 13px; font-weight: 600; color: var(--gray-500); margin-left: 1px; }
.stat small { font-size: 11px; color: var(--gray-500); white-space: nowrap; }
.statrow > .pill.fail { align-self: center; }
.sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex: none; }
.sw.read, .mix .read { background: var(--success); }
.sw.edited, .mix .edited { background: var(--zag-blue); }
.sw.unc, .mix .unc { background: var(--warning); }
.sw.web, .mix .web { background: var(--info); opacity: .55; }
.sw.blank, .mix .blank { background: var(--gray-300); }
.mix { display: flex; gap: 2px; height: 6px; margin-top: var(--space-3); border-radius: var(--radius-pill); overflow: hidden; background: var(--gray-100); }
.mix i { display: block; min-width: 3px; flex-basis: 0; }
.split { position: relative; display: inline-flex; flex: none; }
.split .main { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.split .caret { border-radius: 0 var(--radius-md) var(--radius-md) 0; border-left-color: rgba(255, 255, 255, .35); padding-left: 7px; padding-right: 7px; }
.split .caret .icon { transition: transform var(--dur-fast) var(--ease-standard); }
.split.open .caret .icon { transform: rotate(180deg); }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 300px; padding: 4px; display: grid; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.menu a { display: grid; gap: 1px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--gray-900); }
.menu a:hover, .menu a:focus-visible { background: var(--surface-hover); color: var(--gray-900); box-shadow: none; }
.menu a .mi { font-weight: 600; font-size: 13px; }
.menu a small { color: var(--gray-500); font-size: 11.5px; }
@media (prefers-reduced-motion: reduce) { .split .caret .icon { transition: none; } }
/* JA | EN switch: two segments, the active one filled with the brand blue */
.lang { display: inline-flex; flex: none; border: 1px solid var(--border); border-radius: var(--radius-xs); overflow: hidden; }
.lang button { font: 600 var(--fs-meta)/1 var(--font-mono); letter-spacing: .04em; padding: var(--space-2) var(--space-3); background: var(--white); color: var(--gray-600); border: 0; cursor: pointer; }
.lang button + button { border-left: 1px solid var(--border); }
.lang button:hover { background: var(--zag-blue-wash); color: var(--zag-blue); }
.lang button[aria-pressed="true"] { background: var(--zag-blue); color: var(--white); }
.lang button:focus-visible { outline: 2px solid var(--zag-blue); outline-offset: -2px; }
html[lang="en"] .stage .en { display: none; }   /* the English stage name is already the label */

.page { padding: 18px 28px 28px; }

/* =================================================================
   STAGE STRIP — seven stages; the running one animated
   ================================================================= */
.stages { border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 14px 16px; background: var(--white); }
.stages .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: var(--space-2); }
.stage { position: relative; padding: 8px 10px 10px; border-radius: var(--radius-md); background: var(--surface-sunken); min-width: 0; }
.stage .nm { display: flex; align-items: flex-start; line-height: 1.35; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--gray-500); }
.stage .en { font-family: var(--font-mono); font-size: var(--fs-mono-micro); color: var(--gray-400); }
.stage .pr { font-family: var(--font-mono); font-size: 11px; color: var(--gray-600); margin-top: 2px; min-height: 16px; }
.stage .bar { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--gray-200); overflow: hidden; }
.stage .bar i { display: block; height: 100%; width: 0; background: var(--zag-blue); transition: width var(--dur-base) var(--ease-standard); }
.stage .dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--gray-300); flex: none; }
.stage.done .nm { color: var(--gray-800); }
.stage.done .dot { background: var(--success); }
.stage.done .bar i { width: 100%; background: var(--success); }
.stage.run { background: var(--zag-blue-wash); }
.stage.run .nm { color: var(--zag-blue); }
.stage.run .dot { background: var(--zag-blue); animation: pulse 1.6s var(--ease-standard) infinite; }
.stage.run .bar.indet i { width: 30%; animation: slide 1.4s var(--ease-standard) infinite; }
.stage.err { background: var(--danger-tint); }
.stage.err .nm { color: var(--danger); }
.stage.err .dot { background: var(--danger); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .stage.run .dot, .stage.run .bar.indet i { animation: none; } }
.stages .msg { margin-top: 10px; font-size: 12.5px; color: var(--gray-700); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.stages .msg.err { color: var(--danger); }
.stages .msg .mono { color: inherit; }

/* page thumbnails with kind badges */
.thumbs { display: flex; gap: var(--space-2); overflow-x: auto; padding: 12px 0 2px; }
.thumb { flex: none; width: 72px; cursor: pointer; border: 0; padding: 0; background: none; font: inherit; text-align: left; border-radius: var(--radius-sm); }
.thumb .im { display: block; width: 72px; height: 100px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-sunken); overflow: hidden; transition: border-color var(--dur-fast) var(--ease-standard); }
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.thumb:hover .im { border-color: var(--zag-blue); }
.thumb.spec .im { border-color: var(--zag-blue); }
.thumb .lb { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin-top: 3px; width: 72px; overflow: hidden; }
.thumb .n { font-family: var(--font-mono); font-size: 10px; color: var(--gray-500); }
.thumb .k { max-width: 100%; box-sizing: border-box; font-size: 9.5px; padding: 0 5px; border-radius: var(--radius-xs); background: var(--gray-100); color: var(--gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb.spec .k { background: var(--zag-blue-tint); color: var(--zag-blue); }

/* =================================================================
   TABS
   ================================================================= */
.tabs { display: flex; gap: 2px; margin-top: 18px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab {
  appearance: none; border: 0; background: none; font: inherit; font-weight: 500; color: var(--gray-600);
  padding: 8px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: background var(--dur-fast) var(--ease-standard);
}
.tab:hover { background: var(--surface-hover); }
.tab[aria-selected="true"] { color: var(--zag-blue); border-bottom-color: var(--zag-blue); font-weight: 600; }
.tab .n { margin-left: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--gray-400); }

/* =================================================================
   LAYOUT — content | source panel
   ================================================================= */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-4); padding-top: var(--space-4); align-items: start; }
.content { min-width: 0; }
.card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; }
.card + .card { margin-top: var(--space-4); }
.card-hdr { display: flex; align-items: baseline; gap: var(--space-3); padding: 14px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.card-hdr .sub { color: var(--gray-500); font-size: var(--fs-meta); }
.card-hdr .tlang { margin-left: auto; align-self: center; }   /* the table card's JA / EN, top right */
/* owner 2026-10-20: the spec table's own JA / EN at the right end of its toolbar row; while the table follows the page the
   pressed button is a wash (the page's language), an override for the table only is solid */
.xbar .tlang { margin-left: auto; align-self: center; }
.tlang:not(.own) button[aria-pressed="true"] { background: var(--zag-blue-wash); color: var(--zag-blue); }
.empty { padding: 32px 16px; color: var(--gray-500); text-align: center; font-size: 12.5px; }

/* filter toolbar */
.toolbar { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface-sunken); font-size: 12px; }
.toolbar label { display: flex; align-items: center; gap: 6px; color: var(--gray-600); white-space: nowrap; }
.toolbar input, .toolbar select { font: inherit; font-size: 12px; padding: 4px 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); color: var(--gray-900); }
.toolbar input[type="number"] { width: 6.5em; font-family: var(--font-mono); }
.toolbar input[type="search"] { width: 10em; font-family: var(--font-mono); }
.toolbar .hit { margin-left: auto; color: var(--gray-600); white-space: nowrap; }
.toolbar .hit b { font-family: var(--font-mono); font-weight: 600; color: var(--gray-900); }

/* spec table: grouped header rows, sticky 型式 column and header rows */
.scroll { overflow: auto; max-height: calc(100vh - 250px); }
table.spec { border-collapse: separate; border-spacing: 0; font-size: var(--fs-body-s); min-width: 100%; }
table.spec th, table.spec td { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 5px 9px; white-space: nowrap; vertical-align: middle; }
table.spec thead th { position: sticky; top: 0; background: var(--surface-sunken); font-weight: 500; color: var(--gray-700); text-align: center; z-index: 2; }
/* owner 2026-10-16 (multi-level headers): the printed group headings above the leaf row, muted, no band colours; a level-1
   group slightly darker than levels 2/3; an empty group cell has no rule inside, so a leaf without groups reads as before */
table.spec thead th.grp { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; background: var(--gray-50); color: var(--gray-600); border-bottom: 1px solid var(--border); }
table.spec thead th.grp.lv1 { color: var(--gray-800); }
table.spec thead th.grp.empty { background: var(--surface-sunken); border-bottom-color: var(--surface-sunken); padding-top: 0; padding-bottom: 0; }
table.spec thead th.leaf { border-bottom: 1px solid var(--border-strong); vertical-align: bottom; }
table.spec thead th .u { display: block; font-family: var(--font-mono); font-size: var(--fs-mono-micro); color: var(--gray-500); font-weight: 400; }
table.spec thead th .cond { display: block; font-size: var(--fs-meta); color: var(--gray-600); font-weight: 400; }
/* owner 2026-10-15 round 2: the attribute id as the last header line, muted monospace */
table.spec thead th .aid { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: var(--fs-mono-micro); color: var(--gray-400); font-weight: 400; }
/* owner 2026-10-15: several columns of one attribute (one per condition) — the condition leads, bold; the run of
   header cells is bracketed by a thin left border on the first and a thin right border on the last */
table.spec thead th .ckey { display: block; font-weight: 600; color: var(--gray-900); }
/* owner 2026-10-20: a condition reads as a condition, never as the unit: a small muted chip with a dashed edge, led by its
   axis when the schema names one (測定範囲 0.1～0.3 m); the unit badge (.u) stays the plain monospace line below */
table.spec thead th .cnd { display: inline; padding: 0 5px; border: 1px dashed var(--gray-300); border-radius: var(--radius-xs); background: var(--gray-50); color: var(--gray-700); font-size: var(--fs-meta); line-height: 1.6; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
table.spec thead th .cnd .cax { color: var(--gray-500); font-weight: 400; margin-right: 4px; }
/* owner 2026-10-20: in EN a group cell over one attribute's columns carries its English label; chips sit beside it */
table.spec thead th.grp.ga .chip { margin-left: 4px; }
table.spec thead th.cg-first { border-left: 1px solid var(--border-strong); }
table.spec thead th.cg-last { border-right: 1px solid var(--border-strong); }
/* owner 2026-10-15 ("still?"): a header's condition line and label line are clamped to 2 lines with an ellipsis inside a
   20em-wide header; the full text stays in the tooltip and shows unclamped while the column is selected */
table.spec thead th.leaf { max-width: 20em; }
table.spec thead th .ckey, table.spec thead th .cond { max-width: 20em; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
table.spec thead th.leaf.sel .ckey, table.spec thead th.leaf.sel .cond { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
table.spec th.model, table.spec td.model { position: sticky; left: 0; z-index: 3; background: var(--white); text-align: left; font-family: var(--font-mono); font-weight: 500; border-right: 1px solid var(--border-strong); }
table.spec thead th.model { z-index: 4; background: var(--surface-sunken); font-family: var(--font-sans); font-weight: 600; color: var(--gray-900); vertical-align: bottom; border-bottom: 1px solid var(--border-strong); }
table.spec td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.spec td.txt { text-align: left; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
table.spec td.blank { color: var(--gray-400); text-align: center; }
table.spec td.unc { text-align: center; font-family: var(--font-mono); color: var(--warning-ink); background: var(--warning-tint); }
table.spec tr.sec td { background: var(--zag-blue-wash); color: var(--zag-blue-ink); font-weight: 600; padding: 4px 9px; border-right: 0; }
table.spec tr.sec td span { position: sticky; left: 9px; display: inline-block; }
table.spec tbody tr:not(.sec):not(.secrow):hover td { background: var(--surface-hover); }
table.spec tbody tr:not(.sec):hover td.unc { background: var(--warning-tint); }
/* owner 2026-10-15: a muted one-line separator row above each section's run of models (one table, not a header); a cell
   not printed for the model's group is hatched -- 45deg 1px lines, very low contrast, no dash */
table.spec tr.secrow td { background: var(--surface-sunken); color: var(--gray-500); font-size: 11px; font-weight: 500; font-variant: small-caps; letter-spacing: .04em; padding: 3px 9px; border-right: 0; border-top: 1px solid var(--border); }
table.spec tr.secrow td > span { position: sticky; left: 9px; display: inline-block; }
/* owner 2026-10-15: the separator row sticks right under the sticky header (--thead-h, measured in stickHeaders) while
   its run scrolls inside the table card; the next run's row (same offset, later in the table) slides over it. Above the
   sticky 型式 cells of the rows scrolling beneath it, below nothing: it never reaches the header's band. */
table.spec tbody tr.secrow td { position: sticky; top: var(--thead-h, 0px); z-index: 4; }
table.spec tr.secrow .sn { margin-left: 8px; color: var(--gray-400); font-variant: normal; font-family: var(--font-mono); font-size: 10.5px; }
table.spec td.na { background: repeating-linear-gradient(45deg, transparent 0 5px, var(--gray-200) 5px 6px); }
table.spec tbody tr:not(.secrow):hover td.na { background: repeating-linear-gradient(45deg, var(--surface-hover) 0 5px, var(--gray-200) 5px 6px); }
table.spec .vt { color: var(--gray-500); font-size: 10.5px; margin-left: 4px; font-family: var(--font-sans); }
/* CAT_UI_REVIEW_CANDIDATES: a review cell with a candidate reads as filled but unconfirmed -- the candidate muted (grey,
   italic) in the cell's own alignment, the amber 要確認 chip carrying the status; reads and edits keep their styling */
table.spec td.unc.cand { font-family: inherit; color: var(--gray-500); background: transparent; }
table.spec td.unc.cand.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.spec td.unc.cand.txt { text-align: left; }
table.spec tbody tr:not(.sec):hover td.unc.cand { background: var(--surface-hover); }
.cell.cand .cv { font-style: italic; color: var(--gray-500); }
.chip.rv { margin-left: 4px; font-family: var(--font-sans); font-style: normal; font-size: 10px; font-weight: 600; background: var(--warning-tint); color: var(--warning-ink); white-space: nowrap; vertical-align: 1px; }
.sheet dd.unc.cand { color: var(--gray-500); }
.cell { cursor: pointer; position: relative; transition: background var(--dur-fast) var(--ease-standard); }
.cell.on { box-shadow: inset 0 0 0 2px var(--zag-blue); }
.cell:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-purple); }
.cell .mk { position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--warning); }
.cell .mk.sh { background: var(--gray-400); }
table.spec td.cell.web { background: var(--info-tint); }
.cell .mk.web { background: var(--info); }
.cell .mk.pim { background: var(--pim); }      /* PIM spec §6: filled from the PIM */
.cell .vt.pimv { color: var(--pim); }
.chip.gone { background: var(--gray-200); color: var(--gray-700); margin-left: 4px; }
.chip.prop { background: var(--warning-tint); color: var(--warning-ink); }
.chip.pend { margin-left: 6px; font-family: var(--font-sans); font-style: normal; font-size: 10px; font-weight: 600; background: var(--warning-tint); color: var(--warning-ink); opacity: .75; white-space: nowrap; vertical-align: 2px; }   /* CAT_SERVE_PENDING: the 分類待ち bucket, muted amber beside 要確認 */
.pimcounts { padding: var(--space-2) var(--space-3); font-size: 12.5px; color: var(--gray-600); }
.filelist li.failed { color: var(--danger); }
.filelist .fstat { flex: none; font-size: 11.5px; }
.cell .mk ~ .mk.pim { right: 11px; }                      /* the PIM mark beside another mark */
.cell .mk.pim.both { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pim); }   /* in the PDF and the PIM */
table.pimbind td .id { display: block; font-family: var(--font-mono); font-size: var(--fs-mono-micro); color: var(--pim); }
.ronotice.err { color: var(--danger); }
.sheet dd.web { color: var(--info); }
ol.locs { margin: 0; padding-left: 18px; }
ol.locs li { margin: 2px 0; }
ol.locs button.loc { border: 0; background: none; padding: 0; color: var(--zag-blue); cursor: pointer; font: inherit; text-align: left; }
ol.locs button.loc.on { font-weight: 600; text-decoration: underline; }
ol.locs button.loc:disabled { color: var(--gray-600); cursor: default; }
/* AI gradient edge: value reconciled by the machine (row band, or a second read) */
.cell.mx::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ai-gradient); }
.legend { display: flex; gap: 18px; flex-wrap: wrap; padding: 9px 16px; border-top: 1px solid var(--border); font-size: var(--fs-meta); color: var(--gray-600); }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.legend i.pim { background: var(--pim); }
.legend i.pim.both { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pim); }
.legend i.na { width: 12px; height: 10px; border-radius: 2px; vertical-align: -1px; background: repeating-linear-gradient(45deg, transparent 0 2px, var(--gray-300) 2px 3px); box-shadow: inset 0 0 0 1px var(--gray-200); }
.legend i.edge { width: 3px; height: 12px; border-radius: 0; background: var(--ai-gradient); vertical-align: -2px; }

/* overview */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); padding: 16px; }
.tile { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--white); }
.tile h3 { margin-bottom: 6px; }
.tile .big { font-family: var(--font-display); font-size: var(--fs-display-l); font-weight: 700; letter-spacing: var(--tracking-display); }
.tile .big small { font-family: var(--font-sans); font-size: 12px; color: var(--gray-500); font-weight: 400; margin-left: 4px; letter-spacing: 0; }
.tile .row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 12px; color: var(--gray-600); padding: 2px 0; }
.tile .row b { font-family: var(--font-mono); font-weight: 500; color: var(--gray-900); text-align: right; }
.tree { padding: 8px 16px 16px; font-size: 12.5px; }
.tree ul { list-style: none; margin: 0; padding-left: 18px; border-left: 1px solid var(--border); }
.tree > ul { padding-left: 0; border: 0; }
.tree li { padding: 3px 0; }
.tree .n { color: var(--gray-500); font-size: 11px; margin-left: 8px; }
.tree .ms { color: var(--gray-600); font-family: var(--font-mono); font-size: 11.5px; }

/* schema + plain tables */
table.plain { border-collapse: collapse; width: 100%; font-size: var(--fs-body-s); }
table.plain th, table.plain td { text-align: left; padding: 7px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.plain th { background: var(--surface-sunken); color: var(--gray-600); font-weight: 600; font-size: 11.5px; border-bottom-color: var(--border-strong); }
table.plain td.mono { font-family: var(--font-mono); font-size: 11.5px; }
table.plain td.id { color: var(--ai-purple-600); }
table.plain .path { color: var(--gray-500); font-size: 11px; margin-top: 2px; }
table.plain tbody tr:hover td { background: var(--surface-hover); }
.cov { display: inline-block; width: 64px; height: 6px; background: var(--gray-100); border-radius: var(--radius-pill); vertical-align: middle; margin-right: 6px; overflow: hidden; }
.cov i { display: block; height: 100%; background: var(--success); border-radius: var(--radius-pill); }

/* product sheet */
.sheet { padding: 16px; }
.sheet .pick { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); flex-wrap: wrap; }
.sheet h4 { margin: 18px 0 6px; font-size: var(--fs-label); color: var(--gray-500); font-weight: 700; letter-spacing: var(--tracking-label); }
.sheet dl { display: grid; grid-template-columns: minmax(180px, 32%) 1fr; margin: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.sheet dt, .sheet dd { margin: 0; padding: 6px 12px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.sheet dt { background: var(--surface-sunken); color: var(--gray-700); }
.sheet dd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sheet dd:hover { background: var(--surface-hover); }
.sheet dd .u, .sheet dd .c { color: var(--gray-500); font-size: 11px; margin-left: 4px; }
.sheet dd .id { color: var(--ai-purple-600); font-size: 10.5px; margin-left: 8px; }
.sheet dd.blank { color: var(--gray-400); }
.sheet dd.unc { color: var(--warning-ink); }
.sheet .modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.sheet .modes .cell { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 6px 8px; text-align: center; overflow: hidden; }
.sheet .modes .cell:hover { background: var(--surface-hover); }
.sheet .modes small { display: block; color: var(--gray-500); font-size: 10.5px; font-family: var(--font-mono); }
.sheet .modes b { font-family: var(--font-mono); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* =================================================================
   SOURCE PANEL — page image, box overlay, readings
   ================================================================= */
.panel { position: sticky; top: calc(var(--appbar-h) + 12px); min-width: 0; max-height: calc(100vh - var(--appbar-h) - 24px); overflow-y: auto; }
.panel .ph { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.panel .ph .m { font-family: var(--font-mono); font-weight: 600; font-size: 14px; }
.panel .ph .a { color: var(--gray-600); font-size: 12px; margin-top: 2px; }
.panel .ph .a b { color: var(--ai-purple-600); font-family: var(--font-mono); font-weight: 500; }
.crop { position: relative; background: var(--surface-sunken); border-bottom: 1px solid var(--border); }
.crop .win { position: relative; height: 0; overflow: hidden; }
.crop .sheetimg { position: absolute; left: 0; width: 100%; }
.crop img { display: block; width: 100%; height: auto; }
.crop .box { position: absolute; border: 2px solid var(--zag-blue); background: rgba(0, 20, 223, 0.08); border-radius: 2px; }
.crop .band { position: absolute; left: 0; right: 0; background: rgba(0, 20, 223, 0.045); border-top: 1px dashed var(--zag-blue); border-bottom: 1px dashed var(--zag-blue); }
.crop .box.faint { border-style: dashed; opacity: 0.45; background: transparent; }
.crop .pg { position: absolute; right: 8px; top: 8px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1px 8px; font-size: 11px; font-family: var(--font-mono); }
.crop .tog { position: absolute; left: 8px; top: 8px; }
.panel .kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; padding: 12px 16px; font-size: 12px; border-bottom: 1px solid var(--border); margin: 0; }
.panel .kv dt { color: var(--gray-500); margin: 0; white-space: nowrap; }
.panel .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.panel .kv dd.mono { font-family: var(--font-mono); font-size: 12px; }
.panel .reads { margin: 0; padding-left: 18px; }
.panel .foot { padding: 9px 16px; font-size: var(--fs-meta); color: var(--gray-500); }

/* =================================================================
   INDEX — login, job list, upload
   ================================================================= */
.narrow { margin: 0 auto; padding: 28px; }
.narrow > h1 { margin-bottom: var(--space-4); }
.login { max-width: 380px; margin: 12vh auto 0; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-xl); }
.login form { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.login .input { flex: 1; font-family: var(--font-mono); }
.err { color: var(--danger); font-size: 12.5px; margin-top: var(--space-2); min-height: 18px; }
.drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: 28px 16px;
  border: 1.5px dashed var(--ai-border); border-radius: var(--radius-2xl); cursor: pointer; text-align: center; color: var(--gray-700);
  background: radial-gradient(circle at 0% 0%, rgba(122, 92, 255, 0.06), transparent 55%), radial-gradient(circle at 100% 100%, rgba(61, 123, 255, 0.06), transparent 55%), #FDFCFF;
  transition: border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.drop:hover, .drop.over { border-color: var(--accent-purple); }
.drop .icon { width: 22px; height: 22px; color: var(--zag-blue); }
.drop small { color: var(--gray-500); }
.filelist { list-style: none; margin: var(--space-2) 0 0; padding: 0; width: 100%; display: grid; gap: 4px; text-align: left; }
.filelist li { display: flex; gap: var(--space-2); align-items: center; font-size: 12.5px; }
.filelist li.sent { color: var(--gray-500); }
.filelist .fname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filelist .kind { flex: none; }
.newjob { display: grid; grid-template-columns: 1fr; gap: var(--space-3); padding: 16px; }
.newjob .row { display: flex; gap: var(--space-2); align-items: center; }
.newjob .row .input { flex: 1; }
.upbar { height: 4px; border-radius: var(--radius-pill); background: var(--gray-100); overflow: hidden; }
.upbar i { display: block; height: 100%; width: 0; background: var(--zag-blue); transition: width var(--dur-base) var(--ease-standard); }
.upmsg { font-size: 12.5px; color: var(--gray-700); min-height: 18px; }
.upmsg.err { color: var(--danger); }

/* charts and drawings (spec §6): series and dimension tables in the source panel */
.panel table.series { width: 100%; border-collapse: collapse; font-size: 12px; margin: 0; }
.panel table.series th, .panel table.series td { padding: 4px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.panel table.series th { color: var(--gray-500); font-weight: 500; }
.panel table.series td.num { text-align: right; }
.panel table.series td.mono { font-family: var(--font-mono); }
.panel .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; border: 1px solid var(--border-strong); }

/* per-page guard (wt/guard): pages that failed to process */
.pill.fail { background: var(--danger-tint); color: var(--danger); }
.thumb.fail .im { border-color: var(--danger); }
.thumb { position: relative; }
.thumb .bad { position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--danger); color: var(--white); font: 700 10px/14px var(--font-sans, inherit); text-align: center; font-style: normal; }
.failnote { padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 12px; }
.failnote ul { margin: 6px 0 0; padding-left: 18px; }

/* job board: one compact line per job; the table scrolls sideways under the card when the window is narrow */
.narrow { max-width: 1320px; }
.board-hdr { align-items: center; row-gap: var(--space-2); }
.board-hdr .spacer { flex: 1; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--white); }
.seg button { appearance: none; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 500; color: var(--gray-600); padding: 5px 10px; cursor: pointer; display: inline-flex; gap: 6px; align-items: baseline; }
.seg button + button { border-left: 1px solid var(--border); }
.seg button b { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--gray-400); }
.seg button:hover { background: var(--surface-hover); }
.seg button[aria-pressed="true"] { background: var(--zag-blue-wash); color: var(--zag-blue); font-weight: 600; }
.seg button[aria-pressed="true"] b { color: var(--zag-blue); }
.search { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; height: 30px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); color: var(--gray-400); transition: border-color var(--dur-fast) var(--ease-standard); }
.search:focus-within { border-color: var(--accent-purple); box-shadow: var(--shadow-focus-purple); }
.search input { border: 0; outline: 0; font: inherit; font-size: 12.5px; width: 240px; background: none; color: var(--gray-900); }
.search input:focus-visible { box-shadow: none; }
.jobs-wrap { overflow-x: hidden; }
table.jobs { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-body-s); }
table.jobs th { position: sticky; top: 0; z-index: 1; text-align: left; font-size: 11.5px; font-weight: 600; color: var(--gray-500); background: var(--surface-sunken); padding: 0 8px; height: 32px; border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
table.jobs td { padding: 0 8px; height: 40px; border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: middle; }
table.jobs tbody tr:hover td { background: var(--surface-hover); }
table.jobs th.n, table.jobs td.n { text-align: right; }
table.jobs td.n { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--gray-800); }
table.jobs td.n.warn { color: var(--warning-ink); font-weight: 600; }
table.jobs .nil, table.jobs td.nil { color: var(--gray-300); }
table.jobs th .sort { appearance: none; border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; }
table.jobs th .sort:hover, table.jobs th .sort.on { color: var(--gray-900); }
table.jobs th .sort .dir { width: 13px; height: 13px; opacity: 0; transition: transform var(--dur-fast) var(--ease-standard); }
table.jobs th .sort:hover .dir { opacity: .4; }
table.jobs th[aria-sort="ascending"] .dir { opacity: 1; transform: rotate(180deg); }
table.jobs th[aria-sort="descending"] .dir { opacity: 1; }
.jobs .c-name { overflow: hidden; text-overflow: ellipsis; padding-top: 4px; padding-bottom: 4px; }
.jobs .c-name a { font-weight: 600; color: var(--gray-900); }
.jobs .c-name .nm { display: flex; align-items: center; min-width: 0; }
.jobs .c-name .nm a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* the categories: one muted line under the name (projects · first two categories, +n), the pending chip at its end */
.kcline { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 2px; font-size: 11.5px; color: var(--gray-500); }
.kcline .kct { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.kcline .chip.pend { flex: none; margin: 0; }
table.jobs col.c-file { width: 190px; } table.jobs col.c-status { width: 168px; } table.jobs col.n { width: 64px; }
table.jobs col.c-lang { width: 76px; } table.jobs col.c-when { width: 128px; } table.jobs col.c-act { width: 40px; }
.jobs .c-file .pg { display: block; margin-top: 1px; font-family: var(--font-mono); font-size: 11px; color: var(--gray-500); }
.jobs td.c-file, .jobs td.c-when { padding-top: 4px; padding-bottom: 4px; }
.jobs .c-file .files { max-width: 100%; }
.jobs .c-status .stwrap { flex-wrap: wrap; white-space: normal; }
.jobs .c-when { color: var(--gray-500); overflow: hidden; }
.jobs .c-when .who { display: block; font-size: 11.5px; color: var(--gray-600); overflow: hidden; text-overflow: ellipsis; }
/* login audit (owner 2026-10-19): admin only, under the board; same table look as the board, two compact tables */
.audit-body { padding-bottom: 8px; }
.audit-h { margin: 0; padding: 12px 16px 6px; font-size: 12px; font-weight: 600; color: var(--gray-600); }
table.audit-codes col.c-idx { width: 44px; } table.audit-codes col.c-cnt { width: 104px; } table.audit-codes col.c-at { width: 260px; }
table.audit-logins col.c-at { width: 150px; } table.audit-logins col.c-ip { width: 150px; } table.audit-logins col.c-ua { width: 180px; }
.audit .c-user, .audit .c-ua { overflow: hidden; text-overflow: ellipsis; }
.audit .c-at .mono, .audit td.c-at.mono, .audit td.c-ip.mono { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--gray-800); }
.audit .ip { font-family: var(--font-mono); font-size: 11px; color: var(--gray-500); margin-left: 6px; }
.audit .sub { color: var(--gray-500); font-size: 11.5px; }
.audit .chip.admin { margin-left: 6px; background: var(--zag-blue-tint); color: var(--zag-blue); font-weight: 600; }
.audit-lbl { appearance: none; border: 0; background: none; padding: 2px 4px; margin: 0 -4px; font: inherit; color: var(--gray-900); cursor: text; border-radius: var(--radius-md); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.audit-lbl:hover { background: var(--zag-blue-wash); color: var(--zag-blue); }
.audit-in { height: 28px; width: 100%; max-width: 320px; font-size: 12.5px; }
.audit .err { display: block; color: var(--danger); font-size: 11.5px; }
@media (max-width: 1279px) { table.jobs td, table.jobs th { white-space: normal; } table.jobs td { height: auto; padding-top: 6px; padding-bottom: 6px; } }
.jobs .c-name a:hover { color: var(--zag-blue); text-decoration: underline; text-underline-offset: 2px; }
.jobs .c-file { max-width: 220px; }
.files { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; }
.fchip { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 176px; padding: 1px 7px 1px 6px; border-radius: var(--radius-xs); background: var(--gray-100); font-family: var(--font-mono); font-size: 11px; color: var(--gray-700); }
.fchip .fn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* owner 2026-10-16: the file-kind glyph -- a 16px rounded square, the kind's colour, its label in white 9px semibold */
.fk { display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; min-width: 16px; height: 16px; padding: 0 2px;
  border-radius: 3px; background: var(--fk-other); color: #fff; font: 600 9px/1 var(--font-sans); font-style: normal; letter-spacing: -.02em; }
.fk.pdf { background: var(--fk-pdf); } .fk.xlsx { background: var(--fk-xls); } .fk.csv { background: var(--fk-csv); } .fk.img { background: var(--fk-img); }
.fk.other { font-size: 7.5px; }
.files .fk { min-width: 14px; height: 14px; font-size: 8px; border-radius: 2.5px; }      /* reduced on the board */
.files .fk.other { font-size: 6.5px; }
.fmore { flex: none; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--gray-600); padding: 1px 5px; border-radius: var(--radius-xs); border: 1px solid var(--border); }
.pill.run { gap: 6px; }
/* owner 2026-10-16: a multi-file job lists every file under a count badge (board) */
.files.multi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.files.multi .fchip { max-width: 100%; }
.fcount { flex: none; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--zag-blue); background: var(--zag-blue-tint); padding: 0 6px; border-radius: var(--radius-xs); line-height: 16px; }
.pill .pulse { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.6s var(--ease-standard) infinite; }
@media (prefers-reduced-motion: reduce) { .pill .pulse { animation: none; } }
.lchip { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--zag-blue); background: var(--zag-blue-tint); border-radius: var(--radius-xs); padding: 0 5px; margin-right: 3px; }
.jobs .c-when .t { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--gray-500); }
@media (max-width: 1439px) { .search input { width: 180px; } }
.jobs .c-act { width: 40px; text-align: right; padding-right: 8px; }
.iconbtn { appearance: none; border: 0; background: none; width: 28px; height: 28px; border-radius: var(--radius-sm); color: var(--gray-400); cursor: pointer; display: inline-grid; place-items: center; opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); }
.jobs tr:hover .iconbtn, .iconbtn:focus-visible, .jobs tr.asking .iconbtn { opacity: 1; }
.iconbtn:hover { background: var(--danger-tint); color: var(--danger); }
.jobs tr.delrow td { height: auto; padding: 8px 10px; background: var(--danger-tint); }
.jobs tr.asking td { background: var(--danger-tint); border-bottom-color: transparent; }
.jobs .delask { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn.danger { background: var(--danger); border-color: var(--danger); }
.namebox label { font-weight: 600; }

/* edits: chip on the cell, edit block above the original evidence, candidate / web / manual box */
table.spec td.cell.edited { background: var(--success-tint); }
.chip.edited { display: block; margin-top: 2px; font-size: 10px; background: var(--success-tint); color: var(--success); white-space: nowrap; }
.panel .origh, .panel .candh { padding: 8px 16px 0; font-size: 11.5px; font-weight: 600; color: var(--gray-600); }
.panel .editbox { padding: 4px 0 10px; border-bottom: 1px solid var(--border); display: grid; gap: 6px; }
.panel .editbox .row, .panel .editbox .cands, .panel .editbox .webres, .panel .editbox .muted, .panel .editbox .err { margin: 0 16px; }
.panel .cands { list-style: none; padding: 0; display: grid; gap: 4px; font-size: 12px; }
.panel .cands li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.panel .webres { display: grid; gap: 4px; font-size: 12px; justify-items: start; }
.panel .quote { color: var(--gray-600); overflow-wrap: anywhere; }
.panel .editbox .manual { display: flex; gap: 6px; }
.panel .editbox .manual .input { flex: 1; min-width: 0; }

/* column transforms */
table.spec th.leaf[data-col] { cursor: pointer; }
table.spec th.leaf.sel { background: var(--zag-blue-tint); box-shadow: inset 0 -2px 0 var(--zag-blue); }
.chip.ai { margin-left: 4px; background: linear-gradient(90deg, rgba(122, 92, 255, .18), rgba(61, 123, 255, .18)); color: var(--ai-purple-600); font-weight: 700; }
table.spec td.cell.derived { background: #FBFAFF; }
table.spec td.cell.derived.edited { background: var(--success-tint); }      /* owner 2026-10-16: a corrected AI cell */
.xbar { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--border); }
.xbar .xbox { flex-basis: 100%; display: grid; gap: 6px; max-width: 520px; padding: 8px 0; }
.xbar .xbox label { display: grid; gap: 2px; font-size: 12px; color: var(--gray-600); }
.xbar .xbox textarea { resize: vertical; font-family: inherit; }
.fulltext-h { padding: 8px 16px 0; font-size: 11.5px; font-weight: 600; color: var(--gray-600); }
.fulltext { margin: 4px 16px 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-sunken); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto; }
.plainlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

/* operator notice, annotation tag */
.overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 20, 40, .45); }
.overlay .obox { max-width: 460px; width: 100%; display: grid; gap: 16px; padding: 22px; border-radius: var(--radius-2xl); background: var(--white); box-shadow: 0 12px 40px rgba(0, 0, 0, .25); font-size: 14px; line-height: 1.6; }
.overlay .obox p { margin: 0; }
.overlay.block { background: rgba(250, 250, 252, .97); backdrop-filter: blur(6px); }
.overlay.block .obox { text-align: center; justify-items: center; }
.overlay .obox .btn { justify-self: end; }
.chip.fixing { background: var(--warning-tint, #FFF3D6); color: var(--warning, #B26A00); font-family: inherit; font-weight: 600; }

.chip.orig { margin-left: 4px; font-family: inherit; font-size: 9.5px; background: var(--gray-100); color: var(--gray-600); }
.chip.lang { text-transform: uppercase; margin-left: 2px; }

.panel .nameask { display: grid; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--warning-tint, #FFF3D6); font-size: 12.5px; }
.panel .nameask .row { display: flex; gap: 6px; }
.panel .nameask .input { flex: 1; min-width: 0; }

/* chart-derived values, review-only sheets, source chips */
table.spec td.cell.est { background: #F4F8FF; }
.chip.derived { display: block; margin-top: 2px; font-family: inherit; font-size: 10px; background: var(--info-tint); color: var(--info); white-space: nowrap; }
.ronotice { margin: 8px 16px 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--warning-tint, #FFF3D6); color: var(--gray-800); font-size: 12.5px; }
.chip.ro, .chip.sk { margin-left: 4px; font-family: inherit; font-size: 10px; }
.chip.ro { background: var(--warning-tint, #FFF3D6); color: var(--warning, #B26A00); }

.crop .ring { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid var(--danger); border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); pointer-events: none; }
.panel .cov { padding: 8px 16px 12px; }
.panel .cov h4 { margin: 0 0 6px; font-size: 12.5px; color: var(--gray-600); }
.panel .cov ul { list-style: none; margin: 0; padding: 0; }
.panel .cov li { padding: 3px 6px; border-left: 3px solid transparent; font-size: 12px; cursor: default; border-radius: 2px; }
.panel .cov li.ok { border-left-color: var(--success); }
.panel .cov li.miss { border-left-color: var(--gray-300, #ccc); color: var(--gray-600); }
.panel .cov li:hover, .panel .cov li:focus { background: var(--gray-100); outline: none; }
.panel .figcap { padding: 4px 16px 8px; font-size: 11.5px; color: var(--gray-600); }

/* main page: Jobs | Schema tabs beside the page title */
.homehead { display: flex; align-items: flex-end; gap: var(--space-8); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.narrow .homehead h1 { margin: 0 0 10px; }
.hometabs { margin: 0; border-bottom: 0; }
.hometabs .tab { padding: 8px 14px 10px; }

/* schema browser: the category list at the left, the chosen category's attributes at the right */
.reggrid { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.reggrid .card + .card { margin-top: 0; }
.famlist { position: sticky; top: calc(var(--appbar-h) + 12px); max-height: calc(100vh - var(--appbar-h) - 24px); display: flex; flex-direction: column; }
.famfilter { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.famfilter .search { width: 100%; } .famfilter .search input { width: 100%; }
.fams { overflow-y: auto; padding: 6px; display: grid; gap: 2px; }
.fam { appearance: none; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; display: grid; gap: 3px; padding: 9px 10px 10px; border-radius: var(--radius-md); border-left: 2px solid transparent; }
.fam:hover { background: var(--surface-hover); }
.fam.on { background: var(--zag-blue-wash); border-left-color: var(--zag-blue); }
.fam .r1 { display: flex; align-items: baseline; gap: 8px; }
.fam .fnm { flex: 1; min-width: 0; font-weight: 600; color: var(--gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fam.on .fnm { color: var(--zag-blue-ink); }
.fam .ver { font-family: var(--font-mono); font-size: 11px; color: var(--gray-500); }
.fam .r2 { display: flex; gap: 10px; font-size: 11px; color: var(--gray-500); }
.fam .fid { font-family: var(--font-mono); color: var(--gray-500); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fam .cnt { white-space: nowrap; }
.rbar { display: flex; height: 4px; gap: 1px; margin-top: 3px; border-radius: var(--radius-pill); overflow: hidden; }
.rbar i, .lg { display: block; min-width: 2px; flex-basis: 0; }
.rbar .ap, .lg.ap { background: var(--success); }
.rbar .pp, .lg.pp { background: var(--warning); opacity: .4; }
.famlist .legend i.lg { display: inline-block; width: 14px; height: 6px; border-radius: 2px; margin-right: 6px; vertical-align: 1px; }
.reghead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: 16px 16px 12px; flex-wrap: wrap; }
.reghead .rt { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.reghead h2 { font-size: var(--fs-display-s); letter-spacing: var(--tracking-display); }
.reghead .sub { color: var(--gray-500); font-size: 12.5px; }
.reghead .fid { font-family: var(--font-mono); font-size: 11.5px; color: var(--ai-purple-600); }
.reghead .rmeta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; flex-wrap: wrap; }
.vbadge { display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: var(--radius-xs); background: var(--zag-blue-tint); color: var(--zag-blue); white-space: nowrap; }
.vbadge.bind { background: var(--gray-100); color: var(--gray-700); }
.vbadge.old { background: var(--gray-100); color: var(--gray-500); }
.select.small { font-size: 12px; padding: 3px 6px; font-family: var(--font-mono); }
.regstats { padding: 0 16px 14px; border-bottom: 1px solid var(--border); }
.regtools { gap: 10px; }
.regtools .search { height: 28px; } .regtools .search input { width: 260px; }
.regscroll { max-height: calc(100vh - 330px); }
/* owner 2026-10-15: the Schema page keyed by Keyence's project list -- 大分類 › カテゴリ › 中分類 group headers, the
   "N of 582" line, the four-level chain, and the admin-only line of underlying class versions */
.famfilter { display: grid; gap: 8px; }
.famfilter .select { width: 100%; font-family: inherit; }
.regof { font-size: 11.5px; color: var(--gray-500); line-height: 1.45; }
/* owner 2026-10-16: the project list is a nested, collapsible tree -- a level row per 大分類 / カテゴリ / 中分類 with a
   chevron, its level tag and a project count; a thin indent guide per depth (12 px per level) */
.fams .ktree { display: grid; gap: 2px; min-width: 0; }
.fams > .ktree + .ktree { border-top: 1px solid var(--border); padding-top: 4px; margin-top: 2px; }
.kgrp { appearance: none; border: 0; background: none; font: inherit; cursor: pointer; width: 100%; min-width: 0; display: flex; align-items: center; gap: 6px; text-align: left;
  padding: 6px 8px 6px 4px; border-radius: var(--radius-sm, 6px); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--gray-600); }
.kgrp:hover { background: var(--surface-hover); color: var(--gray-800); }
.kgrp:focus-visible { outline: 2px solid var(--zag-blue); outline-offset: -2px; }
.kgrp.kg0 { color: var(--gray-800); }
.kgrp .chev { width: 12px; height: 12px; flex: none; color: var(--gray-400); transition: transform .15s var(--ease-standard, ease); }
.kgrp[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.kgrp .kgl { flex: none; font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--gray-400); }
.kgrp .kgn { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.kgrp .kgc { flex: none; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--gray-500); background: var(--gray-100); border-radius: var(--radius-xs); padding: 0 5px; line-height: 16px; }
.kkids { display: grid; gap: 2px; min-width: 0; margin-left: 9px; padding-left: 3px; border-left: 1px solid var(--border); }
.kkids[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .kgrp .chev { transition: none; } }
.reghead .kchain { color: var(--gray-700); font-size: 12px; overflow-wrap: anywhere; }
.reghead .kchain .sep { color: var(--gray-400); }
.regadmin { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 16px 12px; font-size: 11.5px; }
.regadmin .lb { color: var(--gray-500); margin-right: 2px; }
table.regtable th { position: sticky; top: 0; z-index: 1; white-space: nowrap; }
table.regtable td { vertical-align: top; }
table.regtable td.aid { font-family: var(--font-mono); font-size: 11.5px; color: var(--ai-purple-600); min-width: 11em; max-width: 220px; }
table.regtable .nil, table.regtable td.nil { color: var(--gray-300); }
table.regtable .cv { margin-top: 2px; font-size: 11px; color: var(--gray-500); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.regtable td.paths { font-family: var(--font-mono); font-size: 11px; color: var(--gray-600); }
table.regtable td.paths div { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.regtable td.lj { min-width: 7em; } table.regtable td.le { min-width: 9em; }
table.regtable td.nw { white-space: nowrap; }
table.regtable td.paths .more { color: var(--gray-400); font-family: var(--font-sans); }
.regmore { border-top: 1px solid var(--border); }
.regmore summary { padding: 10px 16px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--gray-700); }
.regmore summary:hover { background: var(--surface-hover); }
.pinlist { list-style: none; margin: 0; padding: 4px 16px 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; font-size: 12.5px; }
.pinlist li { display: flex; gap: 8px; align-items: center; min-width: 0; }
.pinlist a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1439px) {
  table.regtable td.paths div { max-width: 124px; }
  table.regtable th, table.regtable td { padding-left: 9px; padding-right: 9px; }
  table.regtable .cv { max-width: 130px; }
}
.toolbar.regtools .search input[type="search"] { width: 260px; font-family: var(--font-sans); font-size: 12.5px; border: 0; padding: 0; background: none; }

/* AI columns: the toolbar button and the dialog. The purple-to-blue gradient is the AI signal ("a machine does this"),
   so it marks only the open and apply actions and the dialog's mark. */
.btn.ai { background: var(--ai-gradient); border-color: transparent; color: var(--white); }
.btn.ai:hover { background: var(--ai-gradient); filter: brightness(.94); border-color: transparent; }
.btn.ai:disabled { filter: grayscale(.6); }
.xbar { gap: 10px; }
.pill.ai.xrun { gap: 6px; }
.overlay.xfov { align-items: flex-start; padding: 6vh 16px 16px; overflow-y: auto; }
.dlg { width: 100%; max-width: 1040px; background: var(--white); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; max-height: 88vh; }
.dhead { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--ai-gradient-hdr); border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }
.dhead > div { flex: 1; display: flex; align-items: baseline; gap: 10px; }
.dhead h2 { font-size: 16px; }
.dhead .sub { color: var(--gray-500); font-size: 12.5px; }
.aimark { width: 30px; height: 30px; border-radius: var(--radius-md); background: var(--ai-gradient); color: var(--white); display: grid; place-items: center; flex: none; }
.iconbtn.show { opacity: 1; }
.iconbtn.show:hover { background: var(--surface-hover); color: var(--gray-800); }
.dbody { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); min-height: 0; overflow: hidden; flex: 1; }
.dleft { border: 0; margin: 0; padding: 4px 20px 16px; min-width: 0; overflow-y: auto; border-right: 1px solid var(--border); }
.dleft:disabled { opacity: .6; }
.step { padding-top: 14px; }
.step h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.step h3 small { margin-left: auto; font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--gray-500); }
.step .no { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font: 700 10.5px/1 var(--font-mono); color: var(--ai-purple-600); background: var(--ai-tint); }
.xops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.xop { position: relative; display: grid; gap: 2px; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); }
.xop input { position: absolute; opacity: 0; pointer-events: none; }
.xop b { font-size: 13px; }
.xop small { font-size: 11px; color: var(--gray-500); line-height: 1.35; }
.xop:hover { border-color: var(--ai-border); }
.xop.on { border-color: var(--accent-purple); background: var(--ai-tint-soft); box-shadow: inset 0 0 0 1px var(--accent-purple); }
.xop:has(input:focus-visible) { box-shadow: var(--shadow-focus-purple-strong); }
.xchips { display: flex; flex-wrap: wrap; gap: 4px; min-height: 24px; margin-bottom: 8px; font-size: 12px; }
.xchip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 2px 1px 8px; border-radius: var(--radius-pill); background: var(--ai-tint); color: var(--ai-purple-600); font-weight: 600; }
.xchip button { appearance: none; border: 0; background: none; color: inherit; cursor: pointer; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; padding: 0; }
.xchip button .icon { width: 12px; height: 12px; }
.xchip button:hover { background: rgba(122, 92, 255, .15); }
.step .search { width: 100%; } .step .search input { width: 100%; }
.xsrcs { margin-top: 6px; max-height: 210px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.xsrc { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 12.5px; cursor: pointer; }
.xsrc:last-child { border-bottom: 0; }
.xsrc:hover { background: var(--surface-hover); }
.xsrc.on { background: var(--ai-tint-soft); }
.xsrc input { accent-color: var(--accent-purple); align-self: center; }
.xsrc .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xsrc .u, .xsrc .cd { font-family: var(--font-mono); font-size: 10.5px; color: var(--gray-500); white-space: nowrap; }
.xsrc .id { font-family: var(--font-mono); font-size: 10.5px; color: var(--ai-purple-600); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fld { display: grid; gap: 3px; font-size: 12px; color: var(--gray-600); margin-bottom: 8px; }
.fld textarea { resize: vertical; font-family: inherit; min-height: 64px; }
.xex { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; }
.xexb { appearance: none; border: 1px dashed var(--ai-border); background: var(--ai-tint-soft); color: var(--ai-purple-600); border-radius: var(--radius-sm); padding: 2px 8px; font: inherit; font-size: 11.5px; cursor: pointer; text-align: left; }
.xexb:hover { border-style: solid; }
.dright { padding: 18px 20px 16px; min-width: 0; overflow: auto; background: var(--surface-sunken); }
.dright h3 { font-size: 13px; }
.dright > p { margin: 2px 0 10px; font-size: 12px; }
.xcount { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--gray-800); }
.xprevscroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); }
table.xprev { border-collapse: collapse; font-size: 12px; width: 100%; }
table.xprev th, table.xprev td { padding: 6px 9px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
table.xprev th { background: var(--surface-sunken); font-weight: 600; color: var(--gray-600); font-size: 11.5px; }
table.xprev th .u { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 400; color: var(--gray-500); }
table.xprev td.model { font-family: var(--font-mono); font-weight: 500; }
table.xprev td.nil { color: var(--gray-400); }
table.xprev tr.skip td { background: var(--gray-50); color: var(--gray-500); }
table.xprev td.st { text-align: right; }
.dfoot { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); }
.dfoot .xmsg, .dfoot .xprog { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; font-size: 12.5px; flex-wrap: wrap; }
.dfoot .xmsg .err { margin: 0; min-height: 0; }
.dfoot .xprog .upbar { width: 220px; height: 6px; }
.dfoot .xprog .upbar i { background: var(--ai-gradient-h); }
.dfoot .xprog.done .ok { display: inline-flex; align-items: center; gap: 6px; color: var(--success); font-weight: 600; }
.dfoot .xprog.done .ok svg { width: 16px; height: 16px; }
.xname { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.xname .input { width: 160px; padding: 4px 8px; }
table.spec th.leaf.derived.fresh { animation: fresh 2.4s var(--ease-standard) 1; }
@keyframes fresh { 0%, 30% { background: var(--ai-tint); box-shadow: inset 0 -2px 0 var(--accent-purple); } 100% { background: var(--surface-sunken); } }
@media (prefers-reduced-motion: reduce) { table.spec th.leaf.derived.fresh { animation: none; background: var(--ai-tint); } }
@media (max-width: 1100px) { .dbody { grid-template-columns: 1fr; overflow-y: auto; } .dleft { border-right: 0; overflow: visible; } }

/* a model cell that shows the series-common value (no series row in the grid) */
table.spec td.cell.inh { background: #FAFBFD; }

/* class table: the filter panel (bar + collapsible rows) and the AI-column bar below it share one visual language */
.fpanel { border-bottom: 1px solid var(--border); background: var(--white); }
.fbar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; flex-wrap: wrap; min-height: 48px; }
.ftoggle { appearance: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--gray-800); cursor: pointer; }
.ftoggle:hover { border-color: var(--zag-blue); color: var(--zag-blue); }
.ftoggle[aria-expanded="true"] { background: var(--zag-blue-wash); border-color: var(--zag-blue); color: var(--zag-blue); }
.ftoggle .chev { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-standard); }
.ftoggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.fbadge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--zag-blue); color: var(--white); font: 600 11px/18px var(--font-mono); text-align: center; }
.fbar .search.fq { height: 30px; } .fbar .search.fq input { width: 180px; font-family: var(--font-mono); font-size: 12.5px; }
.fchips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.fchipx { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 2px 0 9px; border-radius: var(--radius-pill); background: var(--zag-blue-tint); color: var(--zag-blue-ink); font-size: 12px; font-weight: 500; white-space: nowrap; }
.fchipx button { appearance: none; border: 0; background: none; color: inherit; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0; }
.fchipx button .icon { width: 12px; height: 12px; }
.fchipx button:hover { background: rgba(0, 20, 223, .12); }
.linkbtn { appearance: none; border: 0; background: none; font: inherit; font-size: 12px; color: var(--zag-blue); cursor: pointer; padding: 4px 6px; border-radius: var(--radius-sm); }
.linkbtn:hover { background: var(--zag-blue-wash); }
.fcount { margin-left: auto; display: inline-flex; align-items: baseline; gap: 2px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--gray-100); font-size: 12px; color: var(--gray-600); white-space: nowrap; }
.fcount b { font-family: var(--font-mono); font-weight: 600; color: var(--gray-900); }
.fbody { padding: 4px 16px 14px; border-top: 1px dashed var(--border); background: var(--surface-sunken); }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 24px; }
.frow { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.frow .fl { flex: 1; min-width: 0; font-size: 12.5px; color: var(--gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcond, .fsel { font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); color: var(--gray-900); max-width: 150px; }
.fsel { max-width: 180px; }
.fop { appearance: none; width: 28px; height: 26px; flex: none; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); font: 700 13px/1 var(--font-mono); color: var(--zag-blue); cursor: pointer; }
.fop:hover { border-color: var(--zag-blue); background: var(--zag-blue-wash); }
.fin { display: inline-flex; align-items: center; flex: none; width: 120px; height: 26px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); overflow: hidden; }
.fin:focus-within { border-color: var(--accent-purple); box-shadow: var(--shadow-focus-purple); }
.fin input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 6px; font: 500 12px var(--font-mono); background: none; color: var(--gray-900); text-align: right; }
.fin input:focus-visible { box-shadow: none; }
.fin input::-webkit-inner-spin-button { display: none; }
.fu { flex: none; padding: 0 7px; height: 100%; display: grid; place-items: center; background: var(--gray-50); border-left: 1px solid var(--border); font: 11px var(--font-mono); color: var(--gray-500); }
.xbar { padding: 8px 16px; min-height: 44px; background: var(--white); }
.xbar [data-xcount] { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .ftoggle .chev { transition: none; } }
/* product-category list: never scrolls sideways; the name wraps, the id and the counts line clip with an ellipsis */
.famlist, .fams { min-width: 0; overflow-x: hidden; }
.fam { min-width: 0; width: 100%; }
.fam .r1 { min-width: 0; align-items: flex-start; }
.fam .fnm { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
.fam .r2 { min-width: 0; overflow: hidden; }
.fam .fid { flex: 0 1 auto; max-width: 50%; }
.fam .cnt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.autolbl { text-decoration: underline dotted var(--gray-400); text-underline-offset: 3px; cursor: help; }

/* ruling 98 live fix: board chip and the job page banner (fixing amber); a reviewed / corrected job gets the ZAG badge */
.chip.livefix { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; font-family: var(--font-sans); font-weight: 600; font-size: 11px; padding: 1px 8px; border-radius: var(--radius-pill); }
.chip.livefix { background: var(--warning-tint); color: var(--warning-ink); }
.chip.livefix .pulse, .livefix.fixing .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--warning); animation: pulse 1.6s var(--ease-standard) infinite; display: inline-block; }
.livefix { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-3); padding: 9px 14px; border-radius: var(--radius-lg); font-size: 12.5px; }
.livefix.fixing { background: var(--warning-tint); color: var(--warning-ink); border: 1px solid #F6D58E; }
.livefix.corrected { background: var(--zag-blue-wash); color: var(--zag-blue-ink); border: 1px solid var(--zag-blue-tint); }
.livefix .when { font-family: var(--font-mono); font-size: 11.5px; opacity: .85; }
.livefix .tx { color: var(--gray-700); }
@media (prefers-reduced-motion: reduce) { .chip.livefix .pulse, .livefix.fixing .pulse { animation: none; } }
.stwrap { display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap; white-space: nowrap; }
.stwrap .chip { margin-left: 0; }
.panel .ph .psec { margin-top: 4px; font-size: 11.5px; color: var(--gray-500); overflow-wrap: anywhere; }
/* valueless models (no value in any column of the class): hidden, one muted line with a toggle */
.emptyline { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--gray-500); }
.sheet .emptyline { border-top: 0; padding: 0 0 10px; }
.emptyline.cols { border-top: 0; border-bottom: 1px solid var(--border); }
.emptyline.cols > span + .linkbtn + span, .emptyline.cols > span + span { margin-left: 8px; }
.dens { display: inline-block; margin-right: 6px; padding: 0 4px; border-radius: 3px; background: var(--gray-100); color: var(--gray-600); font: 400 var(--fs-mono-micro)/1.6 var(--font-mono); vertical-align: 1px; }
table.spec tr.valueless td { color: var(--gray-400); background: var(--gray-50); }

/* Import by URL (dark, CAT_URL_IMPORT) */
.urlimport { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.urlimport label { font-size: 13px; font-weight: 600; }
.urlimport textarea { width: 100%; min-height: 64px; resize: vertical; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px; }
.urlimport .row { display: flex; gap: var(--space-2); align-items: center; }
.urlimport .spacer { flex: 1; }
/* column operations (owner 2026-10-14): header selection, the action bar, the recommendation note and the AI outputs */
table.spec th.leaf[data-col] { cursor: pointer; user-select: none; }
.xbar.on { background: var(--zag-blue-wash); }
.xbar .xsel { margin-right: 4px; color: var(--gray-800); }
.xbar .btn .icon { width: 14px; height: 14px; }
.xnote { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.xnote .xexb { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.xnote .xexb .icon { width: 12px; height: 12px; }
.xnote .xexb:disabled { opacity: .5; cursor: default; }
.xrec { display: inline-flex; align-items: center; gap: 6px; color: var(--gray-600); line-height: 1.45; }
.xrec.ok { color: var(--ai-purple-600); }
.xrec.fail { color: var(--warning-ink); }
.xparts { display: grid; gap: 6px; }
.xpart { display: flex; align-items: center; gap: 6px; }
.xpart .no { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font: 700 10.5px/1 var(--font-mono); color: var(--ai-purple-600); background: var(--ai-tint); }
.xpart .input { flex: 1; min-width: 0; }
.xpart.xpids .no { visibility: hidden; }
.xids { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.xids[hidden], .xpart[hidden] { display: none; }
@media (max-width: 560px) { .xids { grid-template-columns: 1fr; } }
.fld .linkbtn { justify-self: start; margin-top: 4px; }
table.xprev th.out, table.xprev td.out { background: var(--ai-tint-soft); }
table.xprev th.out.first, table.xprev td.out.first { border-left: 2px solid var(--ai-border); }
table.xprev th.out .chip.ai { margin-left: 6px; }
/* CAT_UI_FACTS_PANEL (owner 2026-10-14, scoreboard lever 2): the class's facts below its table, one line per model,
   each fact a "label: value" chip; a chip is a .cell (click: evidence), tinted by its status like a table cell */
.factsp { margin: 12px 0 4px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); }
.factsp h4 { margin: 0; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--gray-900); background: var(--surface-sunken); border-bottom: 1px solid var(--border); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.factsp h4 .sub { margin-left: 8px; font-weight: 400; color: var(--gray-500); font-size: 12px; }
.factsp .fscroll { max-height: 520px; overflow: auto; }
.factsp table.factst { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.factsp .factst tbody + tbody .fgh th { border-top: 1px solid var(--border-strong); }
.factsp .factst .fgh th { padding: 8px 12px 4px; text-align: left; font-size: 12px; font-weight: 600; color: var(--gray-900); background: var(--surface-sunken); }
.factsp .factst th.fl { width: 180px; padding: 5px 12px; text-align: left; vertical-align: top; font-weight: 500; color: var(--gray-600); border-top: 1px solid var(--border); }
.factsp .factst th.fl .cond { display: block; font-weight: 400; color: var(--gray-500); font-size: 11px; }
.factsp .factst td.fct { padding: 5px 12px; color: var(--gray-900); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; border-top: 1px solid var(--border); cursor: pointer; }
.factsp .factst td.fct:hover { background: var(--surface-hover); }
.factsp .fct.unc { background: var(--warning-tint); color: var(--warning-ink); }
.factsp .fct.edited { background: var(--success-tint); }
.factsp .fct.web { background: var(--info-tint); }
.factsp .fct.on { box-shadow: inset 0 0 0 2px var(--zag-blue); }
@media (max-width: 640px) { .factsp .factst th.fl { width: 96px; } }
/* R2-213: split per column (a part-count stepper + names + instruction per selected column), add with no selection */
.xblock { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px 12px; margin-bottom: 10px; background: var(--white); }
.xbhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.xstep { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.xstep .iconbtn { width: 24px; height: 24px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: 600 13px/1 var(--font-mono); }
.xstep .iconbtn:disabled { opacity: .4; cursor: default; }
.xstep output { min-width: 18px; text-align: center; font: 600 12.5px var(--font-mono); color: var(--gray-900); }
.xblock .xparts { margin-bottom: 8px; }
.xpblock + .xpblock { margin-top: 14px; }
.xpblock h4 { font-size: 12.5px; margin: 0 0 6px; color: var(--gray-800); }
.xwhole { font-size: 12px; margin: 0 0 6px; }
.xbar .btn + .muted { margin-left: 4px; }
.dfoot .xprog b { font-size: 12px; color: var(--ai-purple-600); }
/* R2-214 (owner 2026-10-14): long cells clamped to two lines; the popover with the full text, its close and edit buttons;
   the edit icon bottom-right of the hovered / selected cell */
table.spec td.long { min-width: 160px; max-width: 280px; vertical-align: top; }
.cell.long .clamp { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; overflow-wrap: anywhere; }
.sheet dd.long .clamp { max-width: 100%; }
.cell .ced { position: absolute; right: 2px; bottom: 2px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); background: var(--white); color: var(--gray-600); cursor: pointer; opacity: .9; }
.cell .ced:hover { color: var(--zag-blue); border-color: var(--zag-blue); opacity: 1; }
.cell .ced .icon { width: 12px; height: 12px; }
.cpop { position: absolute; z-index: 60; width: min(420px, calc(100vw - 32px)); background: var(--white); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: 13px; }
.cpop:focus { outline: none; box-shadow: var(--shadow-lg), 0 0 0 2px var(--zag-blue); }
.cpop .cph { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-bottom: 1px solid var(--border); background: var(--surface-sunken); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.cpop .cpt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--gray-900); font-size: 12px; }
.cpop .cpx, .cpop .cpe { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--gray-600); cursor: pointer; }
.cpop .cpx:hover, .cpop .cpe:hover { background: var(--surface-hover); color: var(--gray-900); }
.cpop .cpx .icon, .cpop .cpe .icon { width: 15px; height: 15px; }
.cpop .cpb { max-height: 40vh; overflow: auto; padding: 10px 12px 34px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--gray-900); line-height: 1.55; }
.cpop .cpm { padding: 8px 12px 0; font-size: 11px; color: var(--success); }
.cpop .cpe { position: absolute; right: 6px; bottom: 6px; border: 1px solid var(--border-strong); background: var(--white); }
.cpop .cpf { padding: 10px 12px; }
.cpop .cpf textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 72px; max-height: 40vh; font: inherit; }
.cpop .cpr { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.cpop .err { color: var(--danger); font-size: 12px; margin-top: 4px; }
@media (prefers-reduced-motion: no-preference) { .cpop { animation: cpop-in var(--dur-fast, 120ms) var(--ease-standard, ease-out); } }
@keyframes cpop-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }

/* CAT_KEYENCE_CATEGORY (owner 2026-10-15): the class's Keyence category chip under its title, and the job's set above the stages. */
.kcchip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 16px 8px; padding: 2px 8px; width: fit-content; max-width: calc(100% - 32px);
  border-radius: var(--radius-xs); background: var(--zag-blue-tint); color: var(--zag-blue); font-size: var(--fs-meta); font-weight: 600; line-height: 1.5; }
.tile .kcchip { margin: 0 0 8px; max-width: 100%; }
.kcchip .kce { padding: 0 5px; border-radius: var(--radius-xs); background: var(--warning-tint); color: var(--warning-ink); font-size: 10px; font-weight: 600; }
.kcchip .kcs { flex-basis: 100%; color: var(--gray-700); font-weight: 400; }
.kcchip.none { background: var(--gray-100); color: var(--gray-500); font-weight: 400; }
.kcchip.sm { margin: 0; padding: 0 8px; }
.kcats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.kcats .kcl { color: var(--gray-500); font-size: var(--fs-meta); margin-right: 4px; }

/* CAT_KEYENCE_ONLY (ruling 226): projects grouped by major > middle category on the overview and the tab strip, the awaiting-category table (admins) last,
   the board's middle-category chips and project count. */
.kgroup .kgmid { padding: 0 16px 12px; }
.kgroup h3 { margin: 12px 0 6px; font-size: var(--fs-base); }
.kgroup .tiles { padding: 0; }
.kgroup.unm { border-color: var(--warning); }
.kgroup.unm .card-hdr { background: var(--warning-tint); }
.tile.slim { cursor: pointer; }
.tile.slim:focus-visible, .tile.slim:hover { outline: 2px solid var(--zag-blue); }
.tabgrp { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; margin-left: 8px; border-left: 2px solid var(--zag-blue-tint); color: var(--gray-500); font-size: 10px; font-weight: 600; white-space: nowrap; }
.tabgrp.unm { color: var(--warning-ink); border-left-color: var(--warning); }
.kcn { color: var(--gray-700); font-size: var(--fs-meta); font-weight: 600; }
.kcboard { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.kv dd.note { white-space: pre-wrap; overflow-wrap: anywhere; }

/* owner 2026-10-15: the footer link to the terms & AI-use page (both pages, login included), and that page itself */
.sitefoot { padding: 14px 28px 22px; text-align: center; font-size: var(--fs-meta); }
.sitefoot a { color: var(--gray-500); text-decoration: none; }
.sitefoot a:hover { color: var(--gray-700); text-decoration: underline; }
body.terms { min-width: 0; background: var(--white); }
.terms main { max-width: 760px; margin: 0 auto; padding: 32px 24px 48px; color: var(--gray-800); line-height: 1.75; }
.terms h1 { font-size: 22px; margin: 0 0 6px; }
.terms h2 { font-size: 16px; margin: 28px 0 8px; }
.terms .top { font-size: var(--fs-meta); color: var(--gray-600); margin: 0 0 22px; }
.terms dl { margin: 0; }
.terms dt { font-weight: 600; margin-top: 14px; }
.terms dd { margin: 2px 0 0; }
.terms hr { border: 0; border-top: 1px solid var(--border); margin: 40px 0 8px; }

/* =================================================================
   OWNER 2026-10-16 — the AI dialog looks alive while the AI works;
   loading states with the pulsing ZAG wordmark
   ================================================================= */
.dlg.thinking { animation: xthink 1.6s ease-in-out infinite; }
@keyframes xthink {
  0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 2px rgba(0, 20, 223, 0), 0 0 28px 2px rgba(0, 20, 223, 0); }
  50%      { box-shadow: var(--shadow-lg), 0 0 0 2px rgba(0, 20, 223, .35), 0 0 28px 2px rgba(0, 20, 223, .35); }
}
.xthink { display: none; align-items: center; gap: 8px; padding: 8px 20px; border-bottom: 1px solid var(--border); background: var(--ai-tint-soft); color: var(--zag-blue); font-size: 12.5px; font-weight: 600; }
.dlg.thinking .xthink { display: flex; }
.xthink .zmark { height: 18px; width: auto; display: block; animation: zfade 1.6s ease-in-out infinite; }
/* owner 2026-10-16 ("AI is drafting ." showed one dot): the three dots keep a fixed 3ch box and are revealed by a clip,
   0 -> 1 -> 2 -> 3 dots, each step held equally (jump-none), so no width rounding can stop it at one dot */
.xthink .ell::after { content: '...'; display: inline-block; width: 3ch; white-space: pre; text-align: left; font-family: var(--font-mono); clip-path: inset(0 100% 0 0); animation: ell 1.6s steps(4, jump-none) infinite; }
@keyframes zfade { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes ell { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.zload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--gray-500); font-size: 12.5px; text-align: center; }
.zload[hidden] { display: none; }
.zload .zl-logo { height: 44px; width: auto; display: block; animation: zload 1.4s ease-in-out infinite; }
.zload .zl-name { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--gray-800); max-width: 80vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zload .zl-name:empty { display: none; }
.zload.page { position: fixed; inset: var(--appbar-h) 0 0 0; z-index: 15; background: var(--bg-canvas); }
.zload.small { min-height: 180px; padding: 32px 16px; }
.zload.small .zl-logo { height: 28px; }
@keyframes zload { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.06); opacity: 1; } }

/* owner 2026-10-16 ("the empty fields look as if the user has to type something"): a field ZAG is filling is disabled and
   shimmers with "ZAG is proposing…"; after a failed proposal the warning line is amber and the fields ask for input */
.xfov .input.skel, .xfov .input[data-skel] { cursor: progress; color: transparent; border-color: var(--border);
  background: linear-gradient(90deg, var(--gray-100) 0%, var(--ai-tint-soft) 40%, var(--gray-100) 80%) 0 0 / 300% 100%;
  animation: xskel 1.4s ease-in-out infinite; }
.xfov .input.skel::placeholder { color: var(--zag-blue); opacity: .75; font-style: italic; }
@keyframes xskel { from { background-position: 100% 0; } to { background-position: 0 0; } }
.xrec.warn { color: var(--warning-ink); font-size: 12px; }
.xprog .warn { color: var(--warning-ink); font-size: 12px; margin-left: 10px; }
.xprog .err { display: block; color: var(--danger); font-size: 12px; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .dlg.thinking { animation: none; box-shadow: var(--shadow-lg), 0 0 0 2px rgba(0, 20, 223, .35); }
  .xthink .zmark, .zload .zl-logo { animation: none; opacity: 1; transform: none; }
  .xthink .ell::after { animation: none; width: auto; clip-path: none; content: '…'; }
  .xfov .input.skel, .xfov .input[data-skel] { animation: none; background: var(--gray-100); }       /* static placeholder */
}

/* owner 2026-10-20: "Reviewed by ZAG" -- a compact verified badge, not a status pill: ZAG blue outline on the blue tint,
   a check in a filled circle, 11px sans 600. Board: the right end of the Name cell's project line; job page: next to the
   title (#annot); the corrected banner leads with it. */
.zagok { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 1px 7px 1px 3px; border: 1px solid var(--zag-blue);
  border-radius: var(--radius-sm); background: var(--zag-blue-tint); color: var(--zag-blue); font-family: var(--font-sans);
  font-size: 11px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.zagok .icon { width: 12px; height: 12px; padding: 2px; border-radius: 50%; background: var(--zag-blue); stroke: var(--white); stroke-width: 3; vertical-align: 0; box-sizing: border-box; }
.kcline .zagok { margin-left: auto; }
#annot:empty { display: none; }
/* owner 2026-10-20: a split's shape (condition columns by default; "Create as new attributes" opts in) and the value pool line */
.xshape { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 6px 0 2px; font-size: 12px; }
.xshape .xasnew { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--gray-700); }
.xshape .xasnew input { margin: 0; accent-color: var(--ai-purple-600); }
.xcount.xpool, .xcount.xsingle { margin: 2px 0; }