/* ZAG PIM Studio surface — Nexus 商品登録
   Tokens and patterns copied inline (no cross-repo links) from zag-design-system:
     brand/colors.css                   — brand layer, verified 2026-08-30
     surfaces/pim-studio/tokens.css     — type, spacing, radii, shadows, motion
     surfaces/pim-studio/ui_kit/kit.css — page header, card, status badge, stat tile,
                                          summary strip, progress bar, fill grid,
                                          run log, mono inline, segmented filter
   Token names are kept identical to the design system so the two stay diffable.
   #0014DF is ZAG and carries every primary action; the #7A5CFF→#3D7BFF gradient
   means exactly one thing — a machine did this (run progress, AI-generated
   columns, agent cards). It is never decoration. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root{
 /* --- the ZAG blue: brand + primary action (DECISIONS.md S-2) --- */
 --zag-blue:#0014DF;--zag-blue-ink:#0010AE;--zag-blue-tint:#E5E7FC;--zag-blue-wash:rgba(0,20,223,.055);
 /* --- the AI signal: a machine did this --- */
 --ai-purple:#7A5CFF;--ai-purple-600:#5B3FD1;--ai-blue:#3D7BFF;--ai-tint:#F1ECFF;--ai-tint-soft:#FBF9FF;--ai-border:#CFC2FF;
 --ai-gradient:linear-gradient(135deg,#7A5CFF 0%,#3D7BFF 100%);
 --ai-gradient-h:linear-gradient(90deg,#7A5CFF,#3D7BFF);
 --ai-gradient-hdr:linear-gradient(180deg,#FBF9FF,#ffffff);
 /* --- neutrals: zero saturation, --gray-900 is the body near-black --- */
 --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;
 --border:#E2E4EC;--border-strong:#D1D5DB;
 /* --- semantic: functional, never decorative --- */
 --success:#107C41;--success-tint:#E6F4EC;--warning:#F59E0B;--warning-tint:#FFF6E5;
 --danger:#D93025;--danger-tint:#FCEAE8;--info:#2B5BDF;--info-tint:#EBF0FE;
 /* --- file-type colors --- */
 --brand-excel:#107C41;--brand-pdf:#D93025;--brand-docx:#2B5BDF;--brand-teal:#14B28A;--brand-zip:#6B5B2A;
 /* --- surfaces --- */
 --bg-canvas:#FFFFFF;--surface-sunken:#F8F9FA;--surface-hover:#F4F6FA;
 /* --- fill source-kind cell tints --- */
 --src-exact:#FFFFFF;--src-alias:#F0F5FF;--src-ai:#FFF8EE;--src-transform:#FFFBE8;--src-constant:#F7F7F2;--src-missing:#FEF1EE;
 /* --- type --- */
 --font-sans:"Inter","Manrope","Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
 --font-display:"Manrope","Inter","Noto Sans JP","Hiragino Sans",system-ui,sans-serif;
 --font-mono:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace;
 --fs-display-l:26px;--fs-display-m:22px;--fs-display-s:20px;--fs-h2:14px;--fs-body:13.5px;
 --fs-body-s:12.5px;--fs-label:10.5px;--fs-meta:11.5px;--fs-mono:12px;--fs-mono-micro:10px;
 --tracking-display:-.02em;--tracking-tight:-.01em;--tracking-label:.06em;
 /* --- spacing / radii / shadows --- */
 --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;
 --radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:10px;--radius-xl:12px;--radius-2xl:16px;--radius-pill:999px;
 --shadow-xs:0 1px 0 rgba(15,17,23,.04);
 --shadow-sm:0 1px 2px rgba(15,17,23,.06),0 1px 0 rgba(15,17,23,.03);
 --shadow-md:0 4px 12px rgba(15,17,23,.08);
 --shadow-lg:0 12px 32px rgba(15,17,23,.12);
 --shadow-focus-blue:0 0 0 4px rgba(0,20,223,.12);
 --shadow-focus-purple:0 0 0 4px rgba(122,92,255,.10);
 /* --- motion: sharp, finishes quickly. no bounce, no spring --- */
 --ease-standard:cubic-bezier(.2,0,0,1);--dur-fast:120ms;--dur-base:200ms;--dur-slow:320ms;
}

/* =========================================================== base */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{color-scheme:light}
body{margin:0;min-width:1100px;background:var(--surface-sunken);color:var(--gray-900);
 font-family:var(--font-sans);font-size:var(--fs-body);line-height:1.55;
 -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
[lang="ja"],.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,[lang="ja"] code{font-family:"JetBrains Mono","Noto Sans JP","Hiragino Sans",monospace}
h1{font-family:var(--font-display);font-size:var(--fs-display-m);font-weight:700;letter-spacing:var(--tracking-display);line-height:1.2;margin:0}
h2{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:700;letter-spacing:var(--tracking-tight);margin:0}
h3{font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:var(--tracking-tight);color:var(--gray-800);margin:0}
.mono{font-family:var(--font-mono);font-size:var(--fs-mono);font-weight:500;color:var(--gray-800)}
.mono-micro{font-family:var(--font-mono);font-size:var(--fs-mono-micro);font-weight:400;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)}
.note{font-size:var(--fs-meta);color:var(--gray-500)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
svg{flex-shrink:0}
::selection{background:var(--zag-blue-tint)}

/* =========================================================== app bar + wordmark lockup */
.appbar{display:flex;align-items:center;gap:var(--space-3);padding:10px 28px;background:var(--bg-canvas);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40}
.lockup{display:flex;align-items:center;gap:10px}
.lockup img{height:22px;width:auto;display:block}
.lockup .rule{width:1px;height:18px;background:var(--border-strong)}
.lockup .suffix{font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:var(--tracking-tight);color:var(--gray-500)}

/* --- JA | EN. Only the interface switches; the workbook's own words never do. --- */
.langsw{display:inline-flex;align-items:center;gap:2px;flex:none}
.langsw .bar{color:var(--gray-300);font-size:var(--fs-mono-micro)}
.lang{padding:3px 9px;border:none;border-radius:var(--radius-sm,6px);background:none;cursor:pointer;
 font:inherit;font-size:var(--fs-mono-micro);font-weight:700;letter-spacing:var(--tracking-label);
 color:var(--gray-500);transition:all var(--dur-base) var(--ease-standard)}
.lang:hover{color:var(--gray-900)}
.lang.on{background:var(--zag-blue);color:#fff}
.lang:focus-visible{outline:2px solid var(--zag-blue);outline-offset:2px}
.login-card .langsw{margin-top:14px;justify-content:center;width:100%}

/* --- per-row delete: tertiary, quiet until the row is under the cursor --- */
.delbtn{padding:3px 10px;border:1px solid transparent;border-radius:var(--radius-sm,6px);background:none;
 cursor:pointer;font:inherit;font-size:var(--fs-body-s);color:var(--gray-500);opacity:0;
 transition:all var(--dur-base) var(--ease-standard)}
tr:hover .delbtn,.delbtn:focus-visible{opacity:1}
.delbtn:hover{border-color:var(--danger);background:var(--danger-tint);color:var(--danger)}
.delbtn:focus-visible{outline:2px solid var(--zag-blue);outline-offset:1px}
.delbtn[disabled]{cursor:not-allowed;color:var(--gray-300);border-color:transparent;background:none}
tr:hover .delbtn[disabled]{opacity:1}
.listmsg{display:block;padding:0 16px 14px;color:var(--danger)}

/* --- operator notices: written by the on-call engineer, read by whoever is waiting --- */
#notices:not(:empty){margin:0 0 14px}
.noticebar{display:flex;align-items:center;gap:8px;padding:10px 14px;margin:0 0 8px;
 border:1px solid var(--border);border-radius:var(--radius-md);font-size:var(--fs-body-s);line-height:1.5}
.noticebar:last-child{margin-bottom:0}
.noticebar.warn{background:var(--warning-tint);border-color:transparent;color:#B45309}
.noticebar.info{background:var(--gray-50);color:var(--gray-700)}

/* --- the one confirmation the app asks for: destructive, and it names the action --- */
.cdlg{border:1px solid var(--border);border-radius:var(--radius-xl);padding:0;max-width:420px;
 background:#fff;color:var(--gray-900);box-shadow:0 12px 40px rgba(13,13,13,.18)}
.cd-box{padding:20px 22px}
.cdlg::backdrop{background:rgba(13,13,13,.32)}
.cd-msg{font-size:var(--fs-body);line-height:1.6;margin-bottom:18px}
.cd-btns{display:flex;justify-content:flex-end;gap:8px}

/* --- EN only: says why the log lines and column headers above stayed Japanese --- */
.i18nnote{margin:8px 16px 0;font-size:var(--fs-mono-micro);color:var(--gray-400)}
.appbar .back{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-meta);color:var(--gray-600);text-decoration:none;padding:5px 9px 5px 6px;border-radius:var(--radius-md);transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.appbar .back:hover{background:var(--surface-hover);color:var(--gray-900)}
.appbar .spacer{flex:1}

/* =========================================================== page shell */
main{padding:0 28px 32px;max-width:1520px;margin:0 auto}
.page-hdr{display:flex;align-items:flex-end;gap:var(--space-4);padding:22px 0 14px;border-bottom:1px solid var(--border);margin-bottom:18px}
.page-hdr .ttl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.page-hdr .sub{font-size:var(--fs-meta);color:var(--gray-500);margin-top:5px}
.page-hdr .actions{margin-left:auto;display:flex;gap:var(--space-2);flex-shrink:0}

/* =========================================================== card */
.card{background:var(--bg-canvas);border:1px solid var(--border);border-radius:var(--radius-xl);margin-bottom:16px}
.card-hdr{padding:12px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border)}
.card-hdr h2{white-space:nowrap}
.card-hdr .right{margin-left:auto;display:flex;align-items:center;gap:var(--space-2)}
.card-body{padding:14px 16px}
.card-body.tight{padding:0}

/* =========================================================== buttons */
.btn{font-family:var(--font-sans);font-size:13px;font-weight:600;border-radius:var(--radius-md);padding:8px 14px;
 cursor:pointer;border:1px solid transparent;line-height:1;white-space:nowrap;text-decoration:none;
 display:inline-flex;align-items:center;gap:6px;
 transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.btn-primary{background:var(--zag-blue);color:#fff}
.btn-primary:hover{background:var(--zag-blue-ink)}
.btn-secondary{background:#fff;color:var(--gray-800);border-color:var(--border)}
.btn-secondary:hover{background:var(--zag-blue-wash);border-color:var(--zag-blue);color:var(--zag-blue)}
.btn-ghost{background:transparent;color:var(--gray-700)}
.btn-ghost:hover{background:var(--surface-hover);color:var(--gray-900)}
.btn-danger{background:#fff;color:var(--danger);border-color:var(--border)}
.btn-danger:hover{background:var(--danger-tint);border-color:var(--danger)}
.btn-sm{padding:5px 10px;font-size:12px;border-radius:var(--radius-sm)}
.btn:active{opacity:.85}
.btn:disabled{cursor:not-allowed;opacity:.6}
.btn-primary:disabled{background:var(--gray-200);color:var(--gray-500);opacity:1}
.btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-blue)}
.iconbtn{width:26px;height:26px;padding:0;justify-content:center;background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--gray-500);cursor:pointer;display:inline-flex;align-items:center;transition:all var(--dur-fast) var(--ease-standard)}
.iconbtn:hover{background:var(--danger-tint);color:var(--danger)}
.iconbtn:focus-visible{outline:none;box-shadow:var(--shadow-focus-blue)}

/* =========================================================== inputs */
input[type=password],input[type=text]{font-family:var(--font-sans);font-size:var(--fs-body);color:var(--gray-900);
 padding:9px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:#fff;
 transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
input[type=password]:focus,input[type=text]:focus{outline:none;border-color:var(--zag-blue);box-shadow:var(--shadow-focus-blue)}
input::placeholder{color:var(--gray-400)}

/* =========================================================== status badge */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 7px;border-radius:var(--radius-pill);
 font-size:var(--fs-label);font-weight:700;line-height:1.3;white-space:nowrap}
.badge .dot{width:6px;height:6px;border-radius:var(--radius-pill);flex-shrink:0}
.badge.success{background:var(--success-tint);color:var(--success)}.badge.success .dot{background:var(--success)}
.badge.warning{background:var(--warning-tint);color:#B45309}.badge.warning .dot{background:var(--warning)}
.badge.danger{background:var(--danger-tint);color:#A1170F}.badge.danger .dot{background:var(--danger)}
.badge.info{background:var(--info-tint);color:var(--info)}.badge.info .dot{background:var(--info)}
.badge.accent{background:var(--ai-tint);color:var(--ai-purple-600)}.badge.accent .dot{background:var(--ai-purple)}
.badge.neutral{background:var(--gray-100);color:var(--gray-600)}.badge.neutral .dot{background:var(--gray-400)}
.badge.brand{background:var(--zag-blue-tint);color:var(--zag-blue)}.badge.brand .dot{background:var(--zag-blue)}
.badge .dot.pulse{animation:dotpulse 2s var(--ease-standard) infinite}
@keyframes dotpulse{0%{box-shadow:0 0 0 0 rgba(122,92,255,.45)}70%{box-shadow:0 0 0 6px rgba(122,92,255,0)}100%{box-shadow:0 0 0 0 rgba(122,92,255,0)}}

/* type chip (file kind) */
.tchip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 6px;border-radius:var(--radius-pill);
 border:1px solid var(--border);background:#fff;font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--gray-700)}
.tchip .sq{width:8px;height:8px;border-radius:2px;background:var(--gray-400)}
.tchip.xlsx .sq{background:var(--brand-excel)}
.tchip.pdf .sq{background:var(--brand-pdf)}
.tchip.image .sq{background:var(--brand-docx)}
.tchip.zip .sq{background:var(--brand-zip)}

/* AI-generated marker — the gradient means "a machine did this" */
.aipill{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:var(--radius-xs);
 background:var(--ai-gradient);color:#fff;font-family:var(--font-sans);font-size:9.5px;font-weight:700;letter-spacing:.03em;line-height:1.3}
.mpill{display:inline-flex;align-items:center;padding:2px 6px;border-radius:var(--radius-xs);font-size:9.5px;font-weight:700;letter-spacing:.03em;line-height:1.3}
.mpill.copied{background:var(--info-tint);color:var(--info)}
.mpill.fixed{background:var(--gray-100);color:var(--gray-600)}
.mpill.rule{background:var(--warning-tint);color:#B45309}
.mpill.blank{background:var(--gray-100);color:var(--gray-400)}

/* =========================================================== tables */
table{border-collapse:collapse;width:100%;font-size:var(--fs-body-s)}
table.list th{text-align:left;font-weight:700;font-size:var(--fs-label);letter-spacing:var(--tracking-label);
 text-transform:uppercase;color:var(--gray-500);padding:8px 14px;background:var(--surface-sunken);border-bottom:1px solid var(--border-strong)}
table.list td{padding:11px 14px;border-bottom:1px solid var(--border);color:var(--gray-800);vertical-align:middle}
table.list tr:last-child td{border-bottom:none}
table.list tbody tr.click{cursor:pointer;transition:background var(--dur-fast) var(--ease-standard)}
table.list tbody tr.click:hover td{background:var(--surface-hover)}
table.list th:not(:first-child),table.list td:not(:first-child){width:1%;white-space:nowrap}
table.list td.right{text-align:right}
table.list td.empty{color:var(--gray-500);font-size:var(--fs-meta);text-align:center;padding:26px 14px}

/* =========================================================== login */
body.page-list main{max-width:1120px}
body.page-login{background:var(--surface-sunken);display:flex;align-items:center;justify-content:center;min-height:100vh;min-width:0}
.login-card{width:340px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-2xl);padding:28px 26px 22px;box-shadow:var(--shadow-sm);margin:0 16px}
.login-card .lockup{margin-bottom:18px}
.login-card h1{font-size:18px;margin-bottom:4px}
.login-card .sub{font-size:var(--fs-meta);color:var(--gray-500);margin-bottom:18px}
.login-card .field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.login-card .field label{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--gray-500)}
.login-card input{width:100%}
.login-card .btn{width:100%;justify-content:center;padding:10px 14px}
.errline{display:none;align-items:center;gap:6px;margin-top:12px;font-size:var(--fs-meta);color:var(--danger)}
.errline.on{display:flex}

/* =========================================================== inline new-job form */
.inlineform{display:none;gap:var(--space-2);align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface-sunken)}
.inlineform.on{display:flex}
.inlineform input{flex:1;max-width:340px}
.inlineform .btn{padding:9px 14px}

/* =========================================================== upload */
.drop{border:1.5px dashed var(--border-strong);border-radius:var(--radius-2xl);padding:22px;text-align:center;
 background:var(--gray-50);transition:border-color var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard)}
.drop.over{border-color:var(--zag-blue);background:var(--zag-blue-wash)}
.drop .dt{font-size:var(--fs-body);color:var(--gray-700);font-weight:500}
.drop .dh{font-size:var(--fs-meta);color:var(--gray-500);margin-top:4px}
.drop .dbtns{display:flex;gap:var(--space-2);justify-content:center;margin-top:14px}
.drop input[type=file]{display:none}
.filewrap{margin-top:14px;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.filewrap table.list th:first-child,.filewrap table.list td:first-child{padding-left:14px}
.uploadbar{display:flex;align-items:center;gap:10px;margin-top:14px}
.uploadbar .note{margin-left:auto}

/* =========================================================== stepper */
.runbar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}
.runbar .prog{flex:1;height:6px;background:var(--gray-100);border-radius:var(--radius-pill);overflow:hidden}
.runbar .prog>i{display:block;height:100%;width:0;background:var(--ai-gradient-h);border-radius:var(--radius-pill);transition:width var(--dur-slow) var(--ease-standard)}
.runbar .pct{font-family:var(--font-mono);font-size:var(--fs-mono);font-weight:600;color:var(--gray-600);min-width:44px;text-align:right}
.stepper{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;padding:16px 16px 40px}
.stp{position:relative;padding:0 8px;min-width:0}
.stp::after{content:"";position:absolute;top:8px;left:30px;right:-8px;height:2px;background:var(--gray-200)}
.stp:last-child::after{display:none}
.stp.done::after{background:var(--zag-blue)}
.stp .mark{width:18px;height:18px;border-radius:var(--radius-pill);border:2px solid var(--gray-300);background:#fff;
 display:flex;align-items:center;justify-content:center;color:#fff;position:relative;z-index:1}
.stp .nm{font-size:var(--fs-meta);font-weight:600;color:var(--gray-500);margin-top:8px;line-height:1.35}
.stp .sec{font-family:var(--font-mono);font-size:var(--fs-mono-micro);color:var(--gray-400);margin-top:2px}
.stp .note{display:none;position:absolute;top:100%;left:8px;margin-top:4px;width:max-content;
 max-width:520px;font-size:var(--fs-meta);color:var(--gray-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stp.done .mark{border-color:var(--zag-blue);background:var(--zag-blue)}
.stp.done .nm{color:var(--gray-800)}
.stp.running .mark{border-color:transparent;background:var(--ai-gradient);animation:markpulse 1.6s var(--ease-standard) infinite}
.stp.running .nm{color:var(--ai-purple-600);font-weight:700}
.stp.running .note{display:block}
.stp.error .mark{border-color:var(--danger);background:var(--danger)}
.stp.error .nm{color:var(--danger)}
@keyframes markpulse{0%{box-shadow:0 0 0 0 rgba(122,92,255,.4)}70%{box-shadow:0 0 0 7px rgba(122,92,255,0)}100%{box-shadow:0 0 0 0 rgba(122,92,255,0)}}
@media(prefers-reduced-motion:reduce){.stp.running .mark,.badge .dot.pulse,.agent.live{animation:none}}

/* =========================================================== run log */
.logwrap{position:relative;margin:0 16px 16px}
.runlog{background:var(--gray-900);border-radius:var(--radius-xl);padding:12px 14px;height:210px;overflow-y:auto;
 font-family:var(--font-mono);font-size:11.5px;line-height:1.6}
.runlog .ln{display:grid;grid-template-columns:62px 68px 1fr;gap:10px;padding:1px 0;color:#B8C0D0}
.runlog .t{color:#6B7280}
.runlog .tag{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.runlog .tag.info{color:#82A2FF}
.runlog .tag.ok{color:#57D58B}
.runlog .tag.ai{color:#B8A4FF}
.runlog .tag.warn{color:#FBBF24}
.runlog .tag.err{color:#FF6B5B}
.runlog .m{color:#D7DCE6;word-break:break-word}
.runlog .d{color:#7C8494}
.runlog .empty{color:#6B7280}
.logjump{position:absolute;right:14px;bottom:12px;display:none;background:rgba(13,13,13,.86);color:#D7DCE6;
 border:1px solid #333;border-radius:var(--radius-pill);padding:3px 10px;font-size:11px;font-family:var(--font-sans);cursor:pointer}
.logjump.on{display:block}
.logjump:hover{color:#fff;border-color:#555}

/* =========================================================== agent cards */
.agents{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;padding:0 16px 16px}
.agent{border:1px solid var(--border);border-radius:var(--radius-lg);padding:9px 11px;background:var(--surface-sunken);
 display:flex;align-items:center;gap:8px;font-size:var(--fs-body-s);transition:all var(--dur-base) var(--ease-standard)}
.agent .id{font-family:var(--font-mono);font-size:11px;color:var(--gray-700);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agent .sec{font-family:var(--font-mono);font-size:var(--fs-mono-micro);color:var(--gray-400)}
.agent.live{border-color:var(--ai-border);background:var(--ai-tint-soft);animation:agentpulse 1.6s var(--ease-standard) infinite}
@keyframes agentpulse{0%{box-shadow:0 0 0 0 rgba(122,92,255,.30)}70%{box-shadow:0 0 0 6px rgba(122,92,255,0)}100%{box-shadow:0 0 0 0 rgba(122,92,255,0)}}

/* =========================================================== summary strip */
.strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;background:#fff;margin:0 0 14px}
.strip-cell{padding:12px 16px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:3px}
.strip-cell:last-child{border-right:none}
.strip-cell .l{font-size:var(--fs-mono-micro);font-weight:700;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--gray-500)}
.strip-cell .v{font-family:var(--font-display);font-weight:700;font-size:var(--fs-display-s);letter-spacing:var(--tracking-tight);color:var(--gray-900);line-height:1.1}
.strip-cell .s{font-size:var(--fs-mono-micro);color:var(--gray-500)}
.strip-cell .v.brand{color:var(--zag-blue)}
.strip-cell .v.success{color:var(--success)}
.strip-cell .v.danger{color:var(--danger)}

/* --- which category block the grid is showing, above the strip --- */
.catline{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:var(--fs-mono-micro);color:var(--gray-500)}
.catline .l{font-weight:700;letter-spacing:var(--tracking-label);text-transform:uppercase}
.catline .mono{font-size:var(--fs-mono-micro)}
.catline .p{color:var(--gray-900)}

/* --- reads the page check disputed: in no output cell, so this list is the only place they show --- */
.uncert{border:1px solid var(--border);border-radius:var(--radius-xl);background:#fff;margin:0 0 14px;overflow:hidden}
.uncert .uhdr{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--border);
 background:var(--warning-tint);color:#B45309;font-weight:700;font-size:var(--fs-body-s)}
.urow{display:grid;grid-template-columns:minmax(120px,1fr) minmax(80px,1fr) 2fr;gap:10px;align-items:baseline;width:100%;
 text-align:left;padding:8px 16px;border:none;border-top:1px solid var(--border);background:#fff;cursor:pointer;
 font:inherit;font-size:var(--fs-body-s);transition:background var(--dur-base) var(--ease-standard)}
.urow:first-of-type{border-top:none}
.urow:hover{background:var(--gray-50)}
.urow:focus-visible{outline:2px solid var(--zag-blue);outline-offset:-2px}
.urow .mono{font-family:var(--font-mono);font-size:var(--fs-mono-micro);color:var(--gray-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.urow .ul{font-weight:700;color:var(--gray-900)}
.urow .uv{color:var(--gray-500)}

/* --- rows the run says to go and look at; counted in the strip, listed here --- */
.review{border:1px solid var(--border);border-radius:var(--radius-xl);background:#fff;margin:0 0 14px;overflow:hidden}
.review .rhdr{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--border);
 background:var(--warning-tint);color:#B45309;font-weight:700;font-size:var(--fs-body-s)}
.rrow{display:grid;grid-template-columns:minmax(120px,1fr) minmax(100px,1fr) 2fr;gap:10px;align-items:baseline;width:100%;
 text-align:left;padding:8px 16px;border:none;border-top:1px solid var(--border);background:#fff;cursor:pointer;
 font:inherit;font-size:var(--fs-body-s);transition:background var(--dur-base) var(--ease-standard)}
.rrow:first-of-type{border-top:none}
.rrow:hover{background:var(--gray-50)}
.rrow:focus-visible{outline:2px solid var(--zag-blue);outline-offset:-2px}
.rrow .mono{font-family:var(--font-mono);font-size:var(--fs-mono-micro);color:var(--gray-800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrow .rc{font-weight:700;color:var(--gray-900);display:flex;align-items:baseline;gap:6px;min-width:0}
.rrow .rs{flex:none;padding:0 5px;border-radius:4px;background:var(--gray-100);color:var(--gray-500);
 font-family:var(--font-mono);font-size:var(--fs-mono-micro);font-weight:500}
.rrow .rr{color:var(--gray-500)}

/* --- one run-log line's own technical detail, folded away (an error line only) --- */
.lndetail{display:inline-block;vertical-align:top;margin-left:6px}
.lndetail>summary{display:inline;cursor:pointer;color:var(--gray-400);font-size:var(--fs-mono-micro)}
.lndetail>summary:focus-visible{outline:2px solid var(--zag-blue);outline-offset:2px}
.lndetail>span{display:block;margin-top:4px;color:var(--gray-500);white-space:pre-wrap;word-break:break-word}

/* =========================================================== segmented sheet filter */
.seg{display:inline-flex;gap:2px;padding:3px;background:var(--surface-sunken);border-radius:var(--radius-lg);border:1px solid var(--border)}
.seg button{font-family:var(--font-sans);font-size:var(--fs-body-s);font-weight:600;background:transparent;color:var(--gray-600);
 border:none;padding:4px 12px;border-radius:7px;cursor:pointer;transition:all var(--dur-fast) var(--ease-standard)}
.seg button.on{background:#fff;color:var(--gray-900);box-shadow:0 1px 2px rgba(15,17,23,.08)}
.seg button:focus-visible{outline:none;box-shadow:var(--shadow-focus-blue)}

/* =========================================================== result layout */
.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,33%);gap:16px;padding:0 16px 16px;align-items:start}
.legend{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:0 16px 10px}
.legend .item{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-meta);color:var(--gray-600)}
.legend .swatch{width:14px;height:14px;border-radius:3px;border:1px solid var(--border)}

/* fill grid */
.fillgrid{background:#fff;border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;min-width:0}
.fillgrid .scrollwrap{overflow:auto;max-height:64vh}
.fillgrid table{border-collapse:separate;border-spacing:0;width:auto;min-width:100%}
.fillgrid th{position:sticky;top:0;z-index:2;background:var(--surface-sunken);padding:6px 10px;text-align:left;
 border-bottom:1px solid var(--border-strong);border-right:1px solid var(--border);white-space:nowrap;cursor:help;vertical-align:top}
.fillgrid th .hn{font-family:var(--font-mono);font-size:var(--fs-mono-micro);font-weight:600;color:var(--gray-700);display:block}
.fillgrid th .hm{display:block;margin-top:3px}
.fillgrid td{position:relative;padding:5px 10px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);
 font-family:var(--font-mono);font-size:11.5px;color:var(--gray-800);max-width:280px;overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.fillgrid tbody tr:hover td{background:var(--surface-hover)}
.fillgrid tr.rep td{background:var(--zag-blue-wash)}
.fillgrid tr.rep:hover td{background:var(--zag-blue-tint)}
.fillgrid tr.rep td:first-child{box-shadow:inset 3px 0 0 var(--zag-blue)}
.fillgrid td.blank{background:var(--gray-50);color:var(--gray-300)}
.fillgrid tr.rep td.blank{background:var(--gray-50)}
.fillgrid td[data-has="1"]::after{content:"";position:absolute;top:0;right:0;width:0;height:0;
 border-width:0 5px 5px 0;border-style:solid;border-color:transparent var(--zag-blue) transparent transparent;opacity:.45}
.fillgrid td.sel{outline:2px solid var(--zag-blue);outline-offset:-2px;background:var(--zag-blue-tint)}
.fillgrid td:focus-visible{outline:2px solid var(--zag-blue);outline-offset:-2px}

/* provenance pane */
.panel{position:sticky;top:64px;max-height:calc(100vh - 88px);overflow:auto;background:#fff;
 border:1px solid var(--border);border-radius:var(--radius-xl);min-width:0}
.panel .phdr{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.panel .pbody{padding:14px 16px}
.panel .empty{padding:28px 16px;text-align:center;color:var(--gray-500);font-size:var(--fs-meta)}
.panel .value{font-family:var(--font-mono);font-size:13px;font-weight:500;color:var(--gray-900);background:var(--surface-sunken);
 border:1px solid var(--border);border-radius:var(--radius-md);padding:9px 11px;white-space:pre-wrap;word-break:break-word;margin-bottom:10px}
.panel .meta-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.src{border-top:1px solid var(--border);margin-top:14px;padding-top:12px}
.src .shdr{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.src .sn{font-family:var(--font-mono);font-size:var(--fs-mono-micro);font-weight:700;color:#fff;background:var(--gray-600);
 border-radius:var(--radius-xs);padding:1px 5px}
.src .fn{font-family:var(--font-mono);font-size:11px;color:var(--gray-700);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.src .raw{font-family:var(--font-mono);font-size:11px;color:var(--gray-600);background:var(--surface-sunken);
 border-radius:var(--radius-sm);padding:6px 8px;margin-bottom:8px;word-break:break-word}
.miniwrap{overflow-x:auto;margin-bottom:8px;border-radius:var(--radius-sm)}
table.mini{border-collapse:collapse;font-family:var(--font-mono);font-size:10.5px;width:auto}
table.mini td{border:1px solid var(--border);padding:2px 6px;max-width:150px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--gray-600)}
table.mini td.hit{background:var(--warning-tint);outline:2px solid #E6A100;font-weight:700;color:var(--gray-900)}
canvas.zoom{width:100%;display:block;border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:8px}
.page{position:relative;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;margin-bottom:8px}
.page img{width:100%;display:block}
.box{position:absolute;border:3px solid #E6A100;background:rgba(255,215,0,.22)}
.box.col{border-style:dashed;background:rgba(0,20,223,.06);border-color:var(--zag-blue)}

/* =========================================================== degraded bar (GET /api/health) */
.degradedbar{margin:0 0 12px;padding:8px 12px;border-radius:var(--radius-md);background:var(--warning-tint);
 color:#B45309;font-size:var(--fs-body-s);display:flex;align-items:center;gap:8px}

/* =========================================================== error line on the run card */
.runerr{margin:0 16px 16px;padding:10px 12px;border-radius:var(--radius-md);background:var(--danger-tint);
 color:#A1170F;font-size:var(--fs-body-s);display:flex;align-items:center;gap:8px}

/* --- たの分類 beside the status badge, known long before the result card opens --- */
.cathdr{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1px solid var(--border);
 border-radius:999px;background:var(--gray-50);font-size:var(--fs-mono-micro);color:var(--gray-500);vertical-align:middle}
.cathdr .l{font-weight:700;letter-spacing:var(--tracking-label);text-transform:uppercase}
.cathdr .mono{font-family:var(--font-mono);font-size:var(--fs-mono-micro);color:var(--gray-800)}
.cathdr .p{color:var(--gray-900)}
.cathdr .prov{padding:0 6px;border-radius:999px;background:var(--warning-tint);color:#B45309;font-weight:700}

/* --- the failure's technical detail: present, but folded away under the run log --- */
.errdetail{margin:10px 16px 0;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--gray-50)}
.errdetail>summary{padding:8px 12px;cursor:pointer;font-size:var(--fs-body-s);color:var(--gray-600)}
.errdetail>summary:focus-visible{outline:2px solid var(--zag-blue);outline-offset:-2px}
.errtext{margin:0;padding:0 12px 12px;font-family:var(--font-mono);font-size:var(--fs-mono-micro);
 color:var(--gray-700);white-space:pre-wrap;word-break:break-word}

@media(max-width:1280px){.layout{grid-template-columns:1fr}.panel{position:static;max-height:none}}