/* Product layout built with the supplied micro-interactions stylesheet and its
   quiet surfaces, mono labels, traced input, row reveal, and motion language. */
:root { --good:#26884a; --good-soft:#e9f7ed; --warn:#b97912; --warn-soft:#fff5df; --muted-soft:#f2f2f3; }
[hidden] { display:none !important; }
.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; }
button, input, select { font:inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.app-topbar { height:64px; padding:0 max(24px, calc((100vw - 1180px)/2)); gap:24px; }
.brand-mark { font-size:17px; letter-spacing:-.045em; }
.brand-link { text-decoration:none; white-space:nowrap; }
.brand-link:hover { color:var(--ink); }
.brand-accent,.accent-period { color:var(--accent); }
.topbar-count { border-left:1px solid var(--border-strong); padding-left:12px; font-size:10px; letter-spacing:.08em; }
.primary-nav { height:100%; display:flex; align-items:center; gap:3px; margin:auto; }
.nav-link { border:0; background:transparent; color:var(--ink-secondary); font-size:13px; font-weight:500; height:100%; padding:0 19px; position:relative; cursor:pointer; transition:color .18s ease; display:inline-flex; align-items:center; text-decoration:none; white-space:nowrap; }
.nav-link:hover,.nav-link.active { color:var(--ink); }
.nav-link.active::after { content:""; position:absolute; bottom:0; left:14px; right:14px; height:2px; background:var(--accent); border-radius:2px 2px 0 0; }
.topbar-right { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; color:var(--ink-tertiary); white-space:nowrap; }
.local-dot { width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 0 3px var(--good-soft); }
.app-shell { max-width:1180px; margin:0 auto; padding:136px 28px 100px; }
.launcher-shell { max-width:1060px; }
.launcher-heading { margin-bottom:38px; }
.launcher-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.launcher-card { min-height:204px; padding:27px 29px 23px; display:flex; flex-direction:column; color:var(--ink); text-decoration:none; position:relative; overflow:hidden; transition:transform .2s var(--ease-out),box-shadow .2s ease,border-color .2s ease; }
.launcher-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent); transform:scaleY(0); transform-origin:bottom; transition:transform .2s var(--ease-out); }
.launcher-card:hover,.launcher-card:focus-visible { transform:translateY(-3px); border-color:var(--border-strong); box-shadow:0 12px 28px -17px rgba(10,10,10,.3); }
.launcher-card:hover::before,.launcher-card:focus-visible::before { transform:scaleY(1); }
.launcher-card-ready { border-color:var(--border-strong); box-shadow:0 5px 18px -12px rgba(10,10,10,.18); }
.launcher-card-wide { grid-column:1/-1; min-height:170px; }
.launcher-top,.launcher-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.launcher-index,.launcher-state,.launcher-bottom { font-family:var(--mono); font-size:11px; letter-spacing:.045em; }
.launcher-index { color:var(--accent); }
.launcher-state { color:var(--ink-tertiary); display:inline-flex; align-items:center; gap:8px; }
.launcher-state.ready { color:var(--good); }
.launcher-state .local-dot { width:6px; height:6px; }
.launcher-title { display:block; margin:auto 0; font-size:clamp(24px,2.8vw,34px); line-height:1.12; letter-spacing:-.05em; font-weight:650; }
.launcher-bottom { color:var(--ink-tertiary); padding-top:17px; border-top:1px solid var(--border); }
.launcher-bottom span:last-child { font-size:21px; line-height:1; transition:transform .2s var(--ease-out); }
.launcher-card:hover .launcher-bottom span:last-child,.launcher-card:focus-visible .launcher-bottom span:last-child { transform:translate(3px,-3px); color:var(--accent); }
.module-shell { max-width:1000px; }
.back-link { display:inline-block; color:var(--ink-secondary); font-family:var(--mono); font-size:12px; text-decoration:none; margin-bottom:42px; }
.back-link:hover { color:var(--accent); }
.module-placeholder { max-width:700px; padding:28px 30px; }
.module-placeholder p { color:var(--ink-secondary); font-size:14px; line-height:1.6; margin:13px 0 0; }
.page-view { animation:page-in .22s var(--ease-out); }
@keyframes page-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
.page-heading { max-width:760px; margin-bottom:42px; }
.eyebrow,.mini-label,.section-index,.section-aside,.checks-hint,.history-table-head,.history-footer { font-family:var(--mono); font-size:11px; letter-spacing:.065em; }
.eyebrow { color:var(--accent); display:inline-flex; align-items:center; gap:10px; font-weight:500; }
.eyebrow-line { width:17px; height:1px; background:var(--accent); }
.page-heading h1 { font-size:clamp(36px,5vw,60px); line-height:1.08; letter-spacing:-.065em; margin:20px 0 15px; font-weight:700; }
.page-heading p { color:var(--ink-secondary); line-height:1.65; font-size:15px; max-width:600px; margin:0; }
.verify-card { padding:30px; border-color:var(--border-strong); box-shadow:0 8px 32px -18px rgba(10,10,10,.16); }
.verify-form label,.tool-body label { font-family:var(--mono); font-size:11px; letter-spacing:.06em; font-weight:500; color:var(--ink-secondary); display:block; margin-bottom:10px; }
.verify-input-row { display:flex; gap:12px; }
.app-trace-wrap { flex:1; min-width:0; }
.app-input { height:54px; font-size:16px; border-color:var(--border-strong); background:var(--bg); }
.app-input:focus { outline:0; border-color:var(--accent); }
.app-trace-wrap .trace-svg rect { stroke-dasharray:1320; stroke-dashoffset:1320; }
.app-trace-wrap .trace-input:focus ~ .trace-svg rect { stroke-dashoffset:0; }
.primary-button,.secondary-button { border:1px solid var(--ink); background:var(--ink); color:#fff; border-radius:9px; font-size:14px; font-weight:600; padding:0 20px; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease; }
.primary-button { min-width:170px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.primary-button:hover,.secondary-button:hover { transform:translateY(-2px); box-shadow:0 6px 14px -8px rgba(10,10,10,.45); }
.primary-button:disabled,.secondary-button:disabled { opacity:.56; cursor:wait; transform:none; }
.secondary-button { min-height:42px; padding:0 16px; }
.form-note { margin:11px 0 0; color:var(--ink-tertiary); font-size:12px; line-height:1.5; }
.working-track { height:2px; background:var(--surface); overflow:hidden; margin-top:23px; }
.working-track>span:first-child { display:block; height:100%; width:32%; background:var(--accent); animation:working 1.4s ease-in-out infinite; }
@keyframes working { from { transform:translateX(-120%); } to { transform:translateX(370%); } }
.result-area,.tools-area { margin-top:60px; }
.result-area { scroll-margin-top:96px; }
.section-heading { display:flex; align-items:baseline; gap:12px; margin-bottom:17px; }
.section-index { color:var(--accent); }
.section-heading h2 { font-size:18px; letter-spacing:-.035em; margin:0; }
.section-aside { color:var(--ink-tertiary); margin-left:auto; letter-spacing:0; }
.result-card { overflow:hidden; }
.result-topline { padding:28px 30px 24px; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.mini-label { color:var(--ink-tertiary); font-weight:500; display:block; }
.result-topline h3 { font-size:clamp(20px,3vw,30px); letter-spacing:-.045em; margin:7px 0 0; overflow-wrap:anywhere; }
.result-right { text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:9px; flex-shrink:0; }
.status-pill,.small-pill { display:inline-flex; align-items:center; gap:6px; border-radius:999px; font-family:var(--mono); font-size:11px; font-weight:500; padding:7px 11px; background:var(--muted-soft); color:var(--ink-secondary); white-space:nowrap; }
.status-pill::before,.small-pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.tone-good { color:var(--good) !important; background:var(--good-soft) !important; }
.tone-bad { color:var(--danger) !important; background:var(--danger-soft) !important; }
.tone-warn { color:var(--warn) !important; background:var(--warn-soft) !important; }
.tone-neutral { color:var(--ink-secondary) !important; background:var(--muted-soft) !important; }
.confidence-label { color:var(--ink-tertiary); font-family:var(--mono); font-size:11px; }
.result-summary { margin:0 30px 28px; color:var(--ink-secondary); line-height:1.6; font-size:14px; max-width:740px; }
.checks-heading { border-top:1px solid var(--border); padding:21px 30px 13px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.checks-hint { color:var(--ink-tertiary); letter-spacing:0; font-size:10px; }
.mobile-hint { display:none; }
.check-rail { padding:0 30px 28px; display:flex; gap:6px; overflow-x:auto; scrollbar-width:thin; }
.check-node { min-width:112px; flex:1 0 112px; border:1px solid var(--border); border-radius:8px; padding:13px 12px; background:#fff; }
.check-node .check-top { display:flex; align-items:center; gap:8px; font-family:var(--mono); color:var(--ink-tertiary); font-size:10px; }
.check-light { width:9px; height:9px; border-radius:50%; background:var(--border-strong); box-shadow:0 0 0 3px var(--surface); flex-shrink:0; }
.check-light.good { background:var(--good); box-shadow:0 0 0 3px var(--good-soft); }
.check-light.bad { background:var(--danger); box-shadow:0 0 0 3px var(--danger-soft); }
.check-light.warn { background:var(--warn); box-shadow:0 0 0 3px var(--warn-soft); }
.check-node strong { display:block; font-size:12px; font-weight:600; margin:12px 0 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.check-node small { display:block; color:var(--ink-tertiary); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.technical-details { border-top:1px solid var(--border); }
.technical-details summary { cursor:pointer; padding:18px 30px; color:var(--ink-secondary); font-size:13px; font-weight:500; display:flex; justify-content:space-between; list-style:none; }
.technical-details summary::-webkit-details-marker { display:none; }
.technical-details[open] summary span { transform:rotate(180deg); }
.evidence-content { border-top:1px solid var(--border); padding:24px 30px 30px; }
.evidence-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.evidence-block { min-width:0; }
.evidence-block h4,.detail-section h3 { font-family:var(--mono); color:var(--ink-tertiary); font-size:11px; letter-spacing:.06em; margin:0 0 11px; font-weight:500; }
.evidence-block p,.evidence-block li { color:var(--ink-secondary); font-size:13px; line-height:1.55; margin:0 0 7px; overflow-wrap:anywhere; }
.evidence-block ul { padding-left:17px; margin:0; }
.mono-value { font-family:var(--mono); color:var(--ink) !important; font-size:11px !important; }
.tool-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.tool-card { min-width:0; }
.tool-card:last-child { grid-column:1/-1; }
.tool-card>summary { padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; list-style:none; }
.tool-card>summary::-webkit-details-marker { display:none; }
.tool-card>summary strong { display:block; margin:8px 0 4px; font-size:16px; letter-spacing:-.025em; }
.tool-card>summary small { color:var(--ink-tertiary); font-size:12px; }
.tool-arrow { color:var(--ink-tertiary); font-size:20px; transition:transform .2s ease; }
.tool-card[open] .tool-arrow { transform:rotate(90deg); }
.tool-body { border-top:1px solid var(--border); padding:23px 24px 26px; }
.tool-body input[type=file] { display:block; max-width:100%; font-size:12px; }
.inline-actions { display:flex; gap:10px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.inline-actions .app-input { flex:1; min-width:180px; height:42px; font-size:13px; }
.filter-select { min-height:42px; border:1px solid var(--border-strong); border-radius:7px; background:#fff; color:var(--ink-secondary); padding:0 10px; font-size:12px; }
.text-link { border:0; padding:0; background:none; color:var(--accent); text-decoration:none; font-family:var(--mono); font-size:11px; cursor:pointer; }
.text-link:hover { text-decoration:underline; }
.tool-message { color:var(--ink-secondary); font-size:12px; line-height:1.5; min-height:1em; }
.table-scroll { overflow:auto; }
.data-table { width:100%; border-collapse:collapse; font-size:12px; }
.data-table th,.data-table td { border-bottom:1px solid var(--border); text-align:left; padding:10px 8px; white-space:nowrap; }
.data-table th { color:var(--ink-tertiary); font-family:var(--mono); font-size:10px; font-weight:500; }
.data-table tbody tr { cursor:pointer; }
.data-table tbody tr:hover { background:var(--surface); }
.domain-result { margin-top:16px; font-size:13px; color:var(--ink-secondary); }
.domain-result p { margin:5px 0; }
.settings-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.settings-field label { margin:0 0 6px; text-transform:none; letter-spacing:0; }
.settings-field input,.settings-field select { width:100%; min-width:0; height:37px; border:1px solid var(--border-strong); border-radius:7px; padding:0 10px; font-family:var(--mono); font-size:11px; background:#fff; }
.settings-grid>button { align-self:end; min-height:37px; }
.history-stats { display:flex; align-items:stretch; gap:0; margin-bottom:24px; }
.history-stats>div:not(.history-note) { width:180px; padding:0 32px 0 0; margin-right:32px; border-right:1px solid var(--border); }
.history-stats strong { display:block; font-size:32px; letter-spacing:-.05em; margin-top:8px; }
.history-note { margin:auto 0; color:var(--ink-tertiary); font-size:12px; line-height:1.5; max-width:260px; }
.history-card { overflow:hidden; }
.history-toolbar { padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.segmented { display:inline-flex; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:3px; }
.segmented button { border:0; background:transparent; color:var(--ink-secondary); border-radius:6px; padding:8px 12px; font-size:12px; cursor:pointer; }
.segmented button.selected { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.search-wrap { display:flex; align-items:center; border:1px solid var(--border-strong); border-radius:7px; height:36px; padding:0 10px; max-width:260px; width:100%; color:var(--ink-tertiary); }
.search-wrap input { border:0; outline:0; width:100%; min-width:0; font-size:12px; }
.history-table-head,.history-row { display:grid; grid-template-columns:minmax(180px,2.3fr) minmax(120px,1fr) 75px 130px 22px; align-items:center; gap:14px; }
.history-table-head { padding:13px 24px; background:var(--surface); color:var(--ink-tertiary); font-size:10px; }
.history-row { width:100%; text-align:left; border:0; border-bottom:1px solid var(--border); background:#fff; padding:17px 24px; color:var(--ink); cursor:pointer; transition:background .18s ease; }
.history-row:hover,.history-row:focus-visible { background:var(--surface); }
.history-row .row-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:600; }
.history-row .row-name small { display:block; color:var(--ink-tertiary); margin-top:3px; font-weight:400; font-size:11px; }
.history-row .row-count,.history-row .row-date { color:var(--ink-secondary); font-family:var(--mono); font-size:11px; }
.history-row .row-arrow { color:var(--ink-tertiary); opacity:0; transform:translateX(-5px); transition:opacity .2s ease,transform .2s ease; }
.history-row:hover .row-arrow,.history-row:focus-visible .row-arrow { opacity:1; transform:none; }
.run-sublist { background:var(--surface); padding:9px 24px 15px 48px; border-bottom:1px solid var(--border); }
.run-sublist .history-row { padding:12px 14px; margin:4px 0; border:1px solid var(--border); border-radius:7px; }
.history-footer { padding:17px 24px; color:var(--ink-tertiary); display:flex; justify-content:space-between; gap:16px; }
.empty-state { color:var(--ink-tertiary); font-size:13px; padding:36px 24px; text-align:center; }
.detail-overlay { position:fixed; inset:0; z-index:100; }
.detail-backdrop { position:absolute; inset:0; background:rgba(10,10,10,.24); }
.detail-panel { position:absolute; right:0; top:0; bottom:0; width:min(560px,100%); background:#fff; overflow-y:auto; padding:30px; box-shadow:-12px 0 36px rgba(10,10,10,.08); animation:detail-in .22s var(--ease-out); }
@keyframes detail-in { from { transform:translateX(18px); opacity:.6; } to { transform:translateX(0); opacity:1; } }
.detail-top { display:flex; align-items:center; justify-content:space-between; }
.icon-button { border:1px solid var(--border); background:#fff; border-radius:7px; width:31px; height:31px; cursor:pointer; font-size:20px; line-height:1; color:var(--ink-secondary); }
.detail-panel h2 { font-size:25px; letter-spacing:-.04em; margin:25px 0 20px; overflow-wrap:anywhere; }
.detail-meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:27px; }
.detail-section { border-top:1px solid var(--border); padding:23px 0; }
.detail-section p,.detail-section li { font-size:13px; line-height:1.6; color:var(--ink-secondary); margin:0 0 8px; overflow-wrap:anywhere; }
.detail-section ul { margin:0; padding-left:18px; }
.detail-kv { display:grid; grid-template-columns:130px minmax(0,1fr); gap:9px 12px; font-size:12px; }
.detail-kv dt { color:var(--ink-tertiary); }
.detail-kv dd { margin:0; color:var(--ink); overflow-wrap:anywhere; }
.app-toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%,12px); padding:11px 16px; border-radius:8px; background:var(--ink); color:#fff; box-shadow:0 8px 22px rgba(0,0,0,.18); opacity:0; pointer-events:none; transition:opacity .2s ease,transform .2s ease; z-index:120; font-size:12px; max-width:min(500px,90vw); }
.app-toast.visible { opacity:1; transform:translate(-50%,0); }
@media (max-width:760px) { .app-topbar { padding:0 16px; gap:8px; } .topbar-count,.topbar-right { display:none; } .primary-nav { margin-left:auto; margin-right:0; } .nav-link { padding:0 12px; } .app-shell { padding:112px 16px 70px; } .verify-card { padding:22px; } .verify-input-row { flex-direction:column; } .primary-button { height:48px; } .result-topline { flex-direction:column; padding:23px 20px; } .result-right { align-items:flex-start; text-align:left; } .result-summary { margin:0 20px 23px; } .checks-heading { padding:19px 20px 12px; flex-direction:column; align-items:flex-start; gap:5px; } .checks-hint { font-size:10px; } .mobile-hint { display:inline; } .check-rail { padding:0 20px 22px; } .evidence-content { padding:20px; } .evidence-grid { grid-template-columns:1fr; } .tool-grid { grid-template-columns:1fr; } .tool-card:last-child { grid-column:auto; } .settings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .history-toolbar { flex-direction:column; align-items:stretch; } .search-wrap { max-width:none; } .history-table-head { display:none; } .history-row { grid-template-columns:minmax(0,1fr) auto 15px; } .history-row .row-count,.history-row .row-date { display:none; } .run-sublist { padding-left:14px; padding-right:14px; } .history-stats>div:not(.history-note) { width:120px; padding-right:14px; margin-right:14px; } .history-note { display:none; } }
@media (max-width:760px) { .launcher-grid { grid-template-columns:1fr; } .launcher-card,.launcher-card-wide { grid-column:auto; min-height:165px; padding:22px; } .launcher-title { font-size:27px; } .module-placeholder { padding:23px; } }
@media (max-width:480px) { .settings-grid { grid-template-columns:1fr; } .page-heading h1 { font-size:38px; } }
@media (max-width:390px) { .brand-mark { font-size:14px; } .nav-link { padding:0 8px; font-size:12px; } }
@media (prefers-reduced-motion:reduce) { .page-view,.detail-panel,.working-track>span:first-child { animation:none; } }