/* clean_room() UI: light theme in the style of Azure portal (Fluent). */
@font-face{font-family:"Roboto Mono";src:url("/assets/fonts/roboto-mono.ttf") format("truetype");font-style:normal;font-weight:100 700;font-display:swap}

:root{
  color-scheme:light;
  --canvas:#faf9f8;--surface:#fff;--subtle:#f3f2f1;--hover:#edebe9;
  --border:#e1dfdd;--divider:#edebe9;--input:#8a8886;
  --text:#323130;--muted:#605e5c;--disabled:#a19f9d;
  --blue:#0078d4;--blue-hover:#106ebe;--blue-pressed:#005a9e;--blue-tint:#deecf9;--blue-select:#eff6fc;
  --top:#1b1a19;
  --good:#107c10;--good-bg:#dff6dd;
  --bad:#a4262c;--bad-mark:#d13438;--bad-bg:#fde7e9;
  --warn:#8a5300;--warn-mark:#e8a317;--warn-bg:#fff4ce;
  --shadow:0 1.6px 3.6px rgba(0,0,0,.08),0 .3px .9px rgba(0,0,0,.06);
  --side:216px;--top-height:48px;
  --type-page:24px;--type-section:16px;--type-body:14px;--type-meta:12px;
  --font:"Segoe UI","Segoe UI Web (West European)",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Roboto Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html{overflow-y:scroll}
@supports(scrollbar-gutter:stable){html{overflow-y:auto;scrollbar-gutter:stable}}
body{margin:0;background:var(--canvas);color:var(--text);font:var(--type-body)/1.43 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-hover);text-decoration:underline}
h1{font-size:var(--type-page);font-weight:600;line-height:1.3;margin:0 0 4px}
h2{font-size:var(--type-section);font-weight:600;margin:0 0 8px}
h3{font-size:var(--type-body);font-weight:600;margin:0 0 8px}
p{margin:6px 0 14px}
code,pre,.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.type-meta{font-size:var(--type-meta)}
.type-label{font-size:var(--type-meta);font-weight:600;color:var(--muted)}
.warning{color:var(--warn)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.icon{width:16px;height:16px;flex:none;fill:currentColor}
:focus-visible{outline:2px solid var(--text);outline-offset:1px}

/* Shell: top bar, side navigation, content. */
.top{position:sticky;top:0;z-index:10;height:var(--top-height);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 16px;background:var(--top);color:#fff}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:600;font-size:15px}
.brand:hover{color:#fff;text-decoration:none}
.mark{display:grid;place-items:center;width:26px;height:26px;border-radius:4px;background:var(--blue);color:#fff;font-weight:700;font-size:14px}
.top-actions{display:flex;align-items:center;gap:14px;min-width:0}
.top-identity{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;min-width:0}
.top-user{font-size:13px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.top-org{font-size:11px;color:#c8c6c4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.top-actions form{margin:0}
.top-button{background:transparent;color:#fff;border:1px solid #605e5c;border-radius:2px;padding:4px 12px;font:inherit;font-size:13px;cursor:pointer}
.top-button:hover{background:#3b3a39}
.top-button:focus-visible{outline-color:#fff}
.side{position:fixed;top:var(--top-height);bottom:0;left:0;width:var(--side);padding:8px 0;background:var(--surface);border-right:1px solid var(--border);overflow-y:auto}
.side a{display:flex;align-items:center;gap:12px;height:40px;padding:0 16px;color:var(--text);border-left:3px solid transparent}
.side a:hover{background:var(--subtle);color:var(--text);text-decoration:none}
.side a[aria-current=page]{background:var(--blue-select);border-left-color:var(--blue);font-weight:600}
.side .icon{color:var(--blue)}
main{min-height:calc(100vh - var(--top-height));padding:20px 32px 0;max-width:1440px}
.shell main{margin-left:var(--side)}
body:not(.shell) main{margin:0 auto}
footer{display:flex;justify-content:space-between;gap:16px;margin-top:40px;padding:16px 0 24px;border-top:1px solid var(--divider);color:var(--muted)}

/* Page header: breadcrumb, title, command bar. */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-bottom:10px}
.breadcrumb>span:last-child{color:var(--text)}
.heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px}
.heading p{margin:2px 0 0}
.object-title{overflow-wrap:anywhere}
.command-bar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:4px 0;margin:0 0 20px;border-bottom:1px solid var(--divider)}
.command{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:2px;color:var(--text)}
.command:hover{background:var(--subtle);color:var(--text);text-decoration:none}
.command .icon{color:var(--blue)}
.command-bar .period-switch{margin-left:auto}

/* Cards and controls. */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:4px;box-shadow:var(--shadow)}
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:32px;padding:0 16px;border:1px solid var(--blue);border-radius:2px;background:var(--blue);color:#fff;font:inherit;font-weight:600;cursor:pointer}
button:hover,.button:hover{background:var(--blue-hover);border-color:var(--blue-hover);color:#fff;text-decoration:none}
button:active{background:var(--blue-pressed)}
button:disabled{background:var(--subtle);border-color:var(--subtle);color:var(--disabled);cursor:default}
.quiet{background:var(--surface);color:var(--text);border-color:var(--input);font-weight:600}
.quiet:hover{background:var(--subtle);border-color:var(--input);color:var(--text)}
input:not([type=checkbox]):not([type=hidden]):not([type=file]),select,textarea{display:block;width:100%;min-height:32px;padding:5px 8px;border:1px solid var(--input);border-radius:2px;background:var(--surface);color:var(--text);font:inherit}
input:hover,select:hover,textarea:hover{border-color:var(--text)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
textarea{font-family:var(--mono);font-size:13px;min-height:110px}
label{display:block;margin-bottom:6px;font-weight:600}
input[type=checkbox]{margin:0 8px 0 0;width:16px;height:16px;accent-color:var(--blue);vertical-align:-3px}
.period-switch{display:inline-flex;border:1px solid var(--input);border-radius:2px;overflow:hidden}
.period-switch a{padding:5px 14px;color:var(--text);font-size:13px;border-left:1px solid var(--border)}
.period-switch a:first-child{border-left:0}
.period-switch a:hover{background:var(--subtle);text-decoration:none;color:var(--text)}
.period-switch a[aria-current=page]{background:var(--blue);color:#fff;font-weight:600}

/* Status badges: icon dot + label, never color alone. */
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:2px;font-size:var(--type-meta);font-weight:600;background:var(--subtle);color:var(--text);white-space:nowrap}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted)}
.badge.completed,.badge.succeeded{background:var(--good-bg);color:var(--good)}
.badge.completed::before,.badge.succeeded::before{background:var(--good)}
.badge.running,.badge.leased{background:var(--blue-tint);color:var(--blue-pressed)}
.badge.running::before,.badge.leased::before{background:var(--blue)}
.badge.failed,.badge.timed_out{background:var(--bad-bg);color:var(--bad)}
.badge.failed::before,.badge.timed_out::before{background:var(--bad-mark)}
.badge.large{font-size:13px;padding:4px 12px}
.verdict-badge{display:inline-block;padding:2px 8px;border-radius:2px;font-size:var(--type-meta);font-weight:600;background:var(--subtle);color:var(--muted);white-space:nowrap}
.verdict-badge.malicious{background:var(--bad-mark);color:#fff}
.verdict-badge.suspicious{background:var(--warn-bg);color:var(--warn)}
.verdict-badge.none{background:var(--subtle);color:var(--text)}
.verdict-badge.pending{background:var(--blue-tint);color:var(--blue-pressed)}

/* Verdict message bar. */
.verdict{display:flex;gap:14px;align-items:flex-start;padding:14px 18px;margin-bottom:16px;border-radius:4px;background:var(--subtle);border:1px solid var(--border)}
.verdict h2{font-size:20px;margin:2px 0 2px;overflow-wrap:anywhere}
.verdict p{margin:0;color:var(--text)}
.verdict-icon{width:24px;height:24px;flex:none;margin-top:2px;fill:var(--muted)}
.verdict-icon .glyph{fill:#fff}
.verdict.malicious{background:var(--bad-bg);border-color:#f1bbbc}
.verdict.malicious h2{color:var(--bad)}
.verdict.malicious .verdict-icon{fill:var(--bad-mark)}
.verdict.suspicious{background:var(--warn-bg);border-color:#f3dd96}
.verdict.suspicious .verdict-icon{fill:var(--warn-mark)}
.verdict.suspicious .verdict-icon .glyph{fill:var(--text)}
/* No detections stays neutral: it is never a safe verdict. */
.verdict.none .verdict-icon{fill:var(--muted)}
.verdict.pending .verdict-icon{fill:var(--blue)}

/* Tables (Azure grid). */
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}
th{font-weight:600;color:var(--text);background:var(--surface)}
td,th{padding:10px 12px;border-bottom:1px solid var(--divider)}
td{vertical-align:top}
thead th{border-bottom:1px solid var(--border);white-space:nowrap}
tbody tr:hover{background:var(--subtle)}
.file-link{font-weight:600;overflow-wrap:anywhere}
.nowrap{white-space:nowrap}
td>.file-link{white-space:nowrap}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid var(--divider)}
.filter{display:flex;align-items:center;gap:8px;margin:0}
.filter label{margin:0;font-weight:400;color:var(--muted);font-size:13px}
.filter select{width:auto;min-width:150px}
.pagination{display:flex;justify-content:center;align-items:center;gap:24px;padding:12px 16px}
.empty{text-align:center;padding:48px 24px}

/* Task page. */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
.stats .panel{padding:16px 18px}
.stats strong{display:block;font-size:20px;font-weight:600;margin-top:4px}
.meta{padding:14px 18px;margin-bottom:16px}
.meta div{display:flex;gap:24px;margin:4px 0}
.meta .muted{min-width:90px}
.meta code{overflow-wrap:anywhere}
.live-note{display:flex;gap:8px;align-items:center;padding:10px 14px;border-radius:2px;background:var(--blue-tint);color:var(--blue-pressed);margin:0 0 16px}
.poll-error{color:var(--bad);display:block}
.service-result{padding:20px 22px;margin-bottom:16px}
.service-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:10px}
.service-heading h2{font-size:18px;margin:0}
.result-meta{display:flex;flex-wrap:wrap;gap:20px;margin:16px 0 6px}
details{padding:0}
summary{cursor:pointer;font-weight:600;color:var(--text)}
summary::marker{color:var(--muted)}
details[open]>summary{margin-bottom:10px}
pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--canvas);border:1px solid var(--divider);border-radius:2px;padding:14px;font-size:var(--type-meta);max-height:450px;overflow:auto}
.request-panel{padding:14px 18px;margin-top:16px}
.screenshots{margin:16px 0 20px}
.screenshot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.screenshot-grid a{display:flex;flex-direction:column;gap:6px}
.screenshot-grid img{display:block;width:100%;aspect-ratio:16/10;object-fit:contain;background:var(--subtle);border:1px solid var(--border);border-radius:2px}
.timing,.observations{margin:6px 0 18px}
.phase-table{width:100%;border-collapse:collapse;font-size:var(--type-meta)}
.phase-table th,.phase-table td{padding:5px 10px 5px 0;border-bottom:1px solid var(--divider);vertical-align:middle}
.phase-table thead th{color:var(--muted)}
.phase-table tbody th{font-weight:400;overflow-wrap:anywhere}
.phase-table .num,.metric-table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.phase-bar-cell{width:38%;padding-left:10px}
.phase-bar{display:block}
.phase-bar rect{fill:var(--blue)}
.observation-filter{display:flex;align-items:center;gap:12px;margin:0 0 10px;max-width:520px;font-weight:400}
.observation-filter[hidden]{display:none}
.observation-filter span{white-space:nowrap}
.observation-category{border-top:1px solid var(--divider)}
.observation-category:last-child{border-bottom:1px solid var(--divider)}
.observation-category>summary{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-weight:400}
.observation-category>summary span:first-child{flex:1}
.observation-category[data-empty]>summary{color:var(--muted)}
.observation-category ul{list-style:none;margin:0 0 10px;padding:8px 12px;max-height:320px;overflow:auto;background:var(--canvas);border:1px solid var(--divider);border-radius:2px;font-family:var(--mono)}
.observation-category li{padding:2px 0;overflow-wrap:anywhere}
.observation-category li[hidden]{display:none}

/* Upload, settings, login. */
.upload-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(240px,1fr);gap:16px}
.form-panel,.aside{padding:22px 24px}
.field,fieldset{margin:0 0 22px}
fieldset{border:0;padding:0}
legend{font-weight:600;margin-bottom:8px}
fieldset label{font-weight:400}
.file-box{border:1px dashed var(--input);border-radius:2px;padding:18px;background:var(--canvas)}
.file-box p{margin:10px 0 0}
input[type=file]{font:inherit}
input[type=file]::file-selector-button{background:var(--surface);color:var(--text);border:1px solid var(--input);border-radius:2px;padding:5px 12px;margin-right:12px;font:inherit;font-weight:600;cursor:pointer}
.form-panel button{margin-top:18px}
.service-ids{margin-top:12px;overflow-wrap:anywhere}
.service-ids code{display:block}
.aside ol{padding-left:20px;margin:16px 0}
.aside li{margin-bottom:14px}
.aside p{color:var(--muted);margin:2px 0 0}
.notice{padding:12px 14px;border-radius:2px;background:var(--blue-tint);color:var(--blue-pressed)}
.errorlist{list-style:none;padding:10px 12px;margin:0 0 14px;border-radius:2px;background:var(--bad-bg);color:var(--bad)}
.settings-section{padding:20px 24px;margin-bottom:16px}
.settings-fields{margin:12px 0 0}
.settings-fields>div{display:grid;grid-template-columns:160px minmax(0,1fr);gap:20px;padding:10px 0;border-top:1px solid var(--divider)}
.settings-fields dt{color:var(--muted)}
.settings-fields dd{margin:0;overflow-wrap:anywhere}
.adaptor-row{display:grid;grid-template-columns:minmax(0,1fr) 100px minmax(180px,1fr);gap:20px;align-items:center;padding:12px 0;border-top:1px solid var(--divider)}
.adaptor-identity{min-width:0}
.adaptor-name,.adaptor-description{display:block;overflow-wrap:anywhere}
.adaptor-description{margin-top:2px}
.adaptor-status{display:inline-flex;gap:8px;align-items:center;font-weight:600}
.status-dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex-shrink:0}
.adaptor-status.online{color:var(--good)}
.adaptor-status.offline{color:var(--bad)}
.adaptor-connection:empty{display:none}
.login{max-width:440px;padding:40px 44px;margin:64px auto}
.login-brand{display:flex;align-items:center;gap:10px;font-weight:600;margin-bottom:20px}
.login h1{margin-bottom:4px}
.login form p{margin:18px 0}
.login button{width:100%;margin-top:6px}
.login .type-meta{margin:20px 0 0}

/* Dashboard. */
.dashboard-stats{grid-template-columns:repeat(5,minmax(0,1fr))}
.dashboard-stats .panel{display:flex;flex-direction:column;gap:2px}
.dashboard-stats strong{font-size:24px}
.dashboard-stats .panel.alert{border-top:3px solid var(--bad-mark)}
.dashboard-stats .panel.alert strong{color:var(--bad)}
.dashboard-section{padding:18px 22px;margin-bottom:16px}
.dashboard-section>h2{margin-bottom:2px}
.dashboard-section h3{margin:20px 0 6px}
.dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.dashboard-grid .dashboard-section{margin-bottom:0;min-width:0}
.metric-table{font-size:13px}
.metric-table th,.metric-table td{padding:7px 12px 7px 0}
.metric-table tbody th{font-weight:400;overflow-wrap:anywhere;min-width:12ch}
.metric-table tbody th.family{color:var(--bad);font-weight:600}
.metric-table caption{text-align:left}
.submitters{list-style:none;margin:0;padding:0;font-size:13px}
.submitters li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-top:1px solid var(--divider)}
.volume-legend{display:flex;flex-wrap:wrap;gap:16px;margin:4px 0 10px}
.volume-legend .key::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.volume-legend .key.completed::before{background:var(--good)}
.volume-legend .key.failed::before{background:var(--bad-mark)}
.volume-legend .key.timed_out::before{background:var(--warn-mark)}
.volume-legend .key.active::before{background:var(--blue)}
.volume-chart{display:block;border-bottom:1px solid var(--border)}
.volume-chart rect{stroke:var(--surface);stroke-width:2px;vector-effect:non-scaling-stroke}
.volume-chart .completed{fill:var(--good)}
.volume-chart .failed{fill:var(--bad-mark)}
.volume-chart .timed_out{fill:var(--warn-mark)}
.volume-chart .active{fill:var(--blue)}
.volume-chart .hit{fill:transparent;stroke:none}
.volume-chart g:hover .hit{fill:var(--subtle)}
.volume-axis{display:grid;margin-top:6px;white-space:nowrap}
.volume-axis.n24{grid-template-columns:repeat(24,minmax(0,1fr))}
.volume-axis.n7{grid-template-columns:repeat(7,minmax(0,1fr))}
.volume-axis.n30{grid-template-columns:repeat(30,minmax(0,1fr))}
.data-table{margin-top:12px}
.data-table>summary{font-weight:400;color:var(--blue);font-size:13px}

@media(max-width:1100px){.dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid{grid-template-columns:1fr}}
@media(max-width:760px){
  .side{position:static;width:auto;display:flex;overflow-x:auto;padding:0;border-right:0;border-bottom:1px solid var(--border)}
  .side a{flex:none;height:44px;padding:0 12px;border-left:0;border-bottom:3px solid transparent}
  .side a[aria-current=page]{border-bottom-color:var(--blue)}
  .shell main{margin-left:0}
  main{padding:16px 16px 0}
  .top-identity{display:none}
  .heading{flex-wrap:wrap}
  h1{font-size:21px}
  .stats,.dashboard-stats{grid-template-columns:1fr;gap:10px}
  .upload-layout{grid-template-columns:1fr}
  .toolbar{flex-wrap:wrap}
  .meta div{flex-direction:column;gap:2px}
  .settings-fields>div{grid-template-columns:1fr;gap:4px}
  .adaptor-row{grid-template-columns:minmax(0,1fr) 100px;gap:8px}
  .heartbeat-info{grid-column:1/-1}
  .phase-group,.phase-share{display:none}
  .phase-bar-cell{width:30%}
  .login{padding:28px 24px;margin:32px auto}
  .volume-axis span:nth-child(even){visibility:hidden}
  footer{flex-direction:column;gap:4px}
}
@media(forced-colors:active){.phase-bar rect,.volume-chart rect:not(.hit){fill:CanvasText}.verdict{border-left:4px solid CanvasText}}

/* Sign-in: only the centered box, no top bar or footer. */
.bare main{display:grid;place-items:center;min-height:100vh;max-width:none;margin:0;padding:24px 16px}
.bare .login{width:100%;margin:0}
html:has(body.bare){overflow-y:auto;scrollbar-gutter:auto}
