/* BulkGauge operator console — Polaris surface.
   Deliberately NOT the marketing brand: this is the same visual language as the extension,
   so an operator moving between the two never has to re-learn anything.
   Tokens come from /styles.css (Polaris v13.10.1). */

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--p-color-bg);color:var(--p-color-text);font-family:var(--p-font-family-sans);font-size:13px;line-height:20px;font-weight:450;font-feature-settings:"calt" 0;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-0.2px}
h1{font-size:20px;line-height:24px}
h2{font-size:16px;line-height:24px}
h3{font-size:14px;line-height:20px;font-weight:650;letter-spacing:0}
p{margin:0}
a{color:var(--p-color-text-link);text-decoration:none}
a:hover{color:var(--p-color-text-link-hover);text-decoration:underline}
button{font-family:inherit}
:focus-visible{outline:2px solid rgba(0,91,211,1);outline-offset:1px}
.tnum{font-variant-numeric:tabular-nums lining-nums}

/* ---- shell ---- */
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.side{background:var(--p-color-bg-surface-secondary);border-right:1px solid var(--p-color-border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side-head{padding:14px 16px;border-bottom:1px solid var(--p-color-border);display:flex;align-items:center;gap:8px}
.side-head strong{font-size:14px;font-weight:650;letter-spacing:-0.2px}
.side-head .env{margin-left:auto;font-size:11px;font-weight:550;padding:2px 6px;border-radius:var(--p-border-radius-100);background:var(--p-color-bg-surface-caution);color:var(--p-color-text-caution)}
.side-nav{padding:8px;display:flex;flex-direction:column;gap:1px;overflow-y:auto;flex:1}
.side-nav .grp{font-size:11px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--p-color-text-secondary);padding:14px 8px 5px}
.side-nav a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 8px;border-radius:var(--p-border-radius-200);color:var(--p-color-text);font-weight:550;font-size:13px}
.side-nav a:hover{background:var(--p-color-bg-surface-secondary-hover);text-decoration:none}
.side-nav a[aria-current="page"]{background:var(--p-color-bg-fill-transparent-secondary);color:var(--p-color-text)}
.side-nav .count{font-size:11.5px;font-weight:550;color:var(--p-color-text-secondary);font-variant-numeric:tabular-nums}
.side-foot{border-top:1px solid var(--p-color-border);padding:10px 12px;display:flex;align-items:center;gap:8px}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--p-color-bg-fill-brand);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:650;flex:none}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:var(--p-color-bg);border-bottom:1px solid var(--p-color-border);padding:12px 24px;display:flex;align-items:center;gap:12px}
/* Hidden until the sidebar goes off-canvas. */
.nav-toggle{display:none;align-items:center;justify-content:center;width:28px;height:28px;flex:none;margin-left:-4px;border:0;background:transparent;border-radius:var(--p-border-radius-200);color:var(--p-color-icon);cursor:pointer}
.nav-toggle:hover{background:var(--p-color-bg-fill-transparent-secondary)}
/* Out of the render tree until the sidebar goes off-canvas. The media query below must restore
   `display` as well as position — opacity and pointer-events do nothing on a display:none element,
   which would make tap-outside-to-close silently unreachable. */
.nav-scrim{display:none}
.page{padding:20px 24px 64px;max-width:1400px;width:100%}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
/* The text column is the only thing allowed to shrink; the actions keep their intrinsic width. Without
   min-width:0 the heading sizes to max-content and crushes the buttons beside it. */
.page-head>div:first-child{flex:1 1 auto;min-width:0}
.page-head>.row{flex:0 0 auto}
.page-head p{color:var(--p-color-text-secondary);margin-top:2px}

/* ---- primitives ---- */
.card{background:var(--p-color-bg-surface);border-radius:var(--p-border-radius-300);box-shadow:var(--p-shadow-100),var(--p-shadow-bevel-100);padding:16px}
.card.pad0{padding:0;overflow:hidden}
.card.pad0>.t-scroll{border-radius:inherit}
.card-head{padding:12px 16px;border-bottom:1px solid var(--p-color-border-secondary);display:flex;align-items:center;justify-content:space-between;gap:12px}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center;flex-wrap:wrap}
.g4{gap:4px}.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g20{gap:20px}.g24{gap:24px}
.grid{display:grid;gap:16px}
.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.sub{color:var(--p-color-text-secondary)}
.help{font-size:12px;line-height:16px;color:var(--p-color-text-secondary)}
.mono{font-family:var(--p-font-family-mono);font-size:12px}
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}.mt24{margin-top:24px}
.right{margin-left:auto}
.divider{height:1px;background:var(--p-color-border-secondary);border:0;margin:12px 0}

/* ---- buttons: bevel, never a flat border ---- */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:550;line-height:20px;padding:6px 12px;border:0;border-radius:var(--p-border-radius-200);background:var(--p-color-bg-fill);color:var(--p-color-text);box-shadow:var(--p-shadow-button);cursor:pointer;transition:background 100ms ease-in}
.btn:hover{background:var(--p-color-bg-fill-hover)}
.btn:active{box-shadow:var(--p-shadow-button-inset)}
.btn:active>*{transform:translate3d(0,1px,0)}
.btn[disabled]{background:rgba(0,0,0,0.05);color:var(--p-color-text-disabled);box-shadow:none;cursor:default}
.btn-primary{background:var(--p-color-bg-fill-brand);color:#fff;box-shadow:none}
.btn-primary:hover{background:var(--p-color-bg-fill-brand-hover)}
.btn-critical{background:rgba(199,10,36,1);color:#fff;box-shadow:none}
.btn-critical:hover{background:rgba(142,11,33,1)}
.btn-plain{background:transparent;box-shadow:none;color:var(--p-color-text-link);padding:6px 4px}
.btn-plain:hover{background:transparent;text-decoration:underline}
.btn-sm{padding:3px 8px;font-size:12px}

/* ---- inputs: inset, not beveled ---- */
.field{display:flex;flex-direction:column;gap:4px}
.field>label{font-size:13px;font-weight:450}
.input,select.input,textarea.input{font:450 13px/20px var(--p-font-family-sans);padding:6px 12px;border-radius:var(--p-border-radius-200);border:1px solid rgba(138,138,138,1);background:var(--p-color-bg-surface);box-shadow:var(--p-shadow-inset-100);color:var(--p-color-text);width:100%}
.input:focus{outline:2px solid rgba(0,91,211,1);outline-offset:1px}
select.input{appearance:none;padding-right:28px;background-image:linear-gradient(45deg,transparent 50%,rgba(74,74,74,1) 50%),linear-gradient(135deg,rgba(74,74,74,1) 50%,transparent 50%);background-position:calc(100% - 15px) 12px,calc(100% - 10px) 12px;background-size:5px 5px;background-repeat:no-repeat}
.search{position:relative;flex:1;min-width:180px}

/* ---- badges ---- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;line-height:16px;font-weight:550;padding:2px 8px;border-radius:var(--p-border-radius-100);background:var(--p-color-bg-fill-secondary);color:var(--p-color-text)}
.badge.success{background:var(--p-color-bg-surface-success);color:var(--p-color-text-success)}
.badge.warning{background:var(--p-color-bg-surface-warning);color:var(--p-color-text-warning)}
.badge.critical{background:var(--p-color-bg-surface-critical);color:var(--p-color-text-critical)}
.badge.info{background:var(--p-color-bg-surface-info);color:var(--p-color-text-info)}
.badge.attention{background:var(--p-color-bg-surface-caution);color:var(--p-color-text-caution)}
.pip{width:8px;height:8px;border-radius:999px;flex:none;background:var(--p-color-bg-fill-secondary)}
.pip.success{background:rgba(4,123,93,1)}.pip.warning{background:rgba(255,184,0,1)}.pip.critical{background:rgba(199,10,36,1)}.pip.info{background:rgba(0,91,211,1)}

/* ---- tables ---- */
table.data{width:100%;border-collapse:collapse}
table.data th,table.data td{padding:6px 12px;text-align:left;border-bottom:1px solid var(--p-color-border-secondary);vertical-align:middle}
table.data thead th{font-size:12px;font-weight:650;color:var(--p-color-text-secondary);background:var(--p-color-bg-surface-secondary);position:sticky;top:0;z-index:1;white-space:nowrap}
table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums lining-nums}
table.data tbody tr{cursor:pointer}
table.data tbody tr:hover{background:var(--p-color-bg-surface-hover)}
table.data tbody tr[aria-selected="true"]{background:var(--p-color-bg-surface-selected)}
table.data tbody tr:last-child td{border-bottom:0}
.cell-strong{font-weight:550}

/* ---- metrics ---- */
.metric{padding:14px 16px}
.metric .label{font-size:12px;font-weight:550;color:var(--p-color-text-secondary)}
.metric .value{font-size:26px;line-height:32px;font-weight:650;letter-spacing:-0.54px;font-variant-numeric:tabular-nums lining-nums;margin-top:2px}
.delta{font-size:12px;font-weight:550;display:inline-flex;gap:4px;align-items:center}
.delta.up{color:var(--p-color-text-success)}
.delta.down{color:var(--p-color-text-critical)}

/* ---- bars & charts (CSS only) ---- */
.bar{height:8px;border-radius:999px;background:var(--p-color-bg-fill-secondary);overflow:hidden}
.bar>span{display:block;height:100%;background:var(--p-color-bg-fill-brand)}
.legend-row{display:grid;grid-template-columns:14px 1fr auto auto;gap:10px;align-items:center;padding:6px 0}
.swatch{width:10px;height:10px;border-radius:3px}
.spark{display:flex;align-items:flex-end;gap:3px;height:56px}
.spark i{flex:1;background:var(--p-color-bg-fill-tertiary);border-radius:2px 2px 0 0;min-height:2px}
.spark i.hi{background:var(--p-color-bg-fill-brand)}

/* ---- toggle switch ---- */
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.track{width:34px;height:20px;border-radius:999px;background:var(--p-color-bg-fill-tertiary);position:relative;transition:background 100ms ease-in;flex:none;box-shadow:var(--p-shadow-inset-100)}
.track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--p-shadow-100);transition:transform 100ms ease-in}
.switch input:checked+.track{background:var(--p-color-bg-fill-success)}
.switch input:checked+.track::after{transform:translateX(14px)}
.switch input:focus-visible+.track{outline:2px solid rgba(0,91,211,1);outline-offset:1px}
.switch input:disabled+.track{background:rgba(0,0,0,0.05);box-shadow:none}

/* ---- slide-over ---- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,0.71);z-index:50;opacity:0;pointer-events:none;transition:opacity 200ms ease-out}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:96vw;background:var(--p-color-bg-surface);box-shadow:var(--p-shadow-500);z-index:60;display:flex;flex-direction:column;transform:translateX(100%);transition:transform 300ms ease-out}
.drawer.open{transform:translateX(0)}
.drawer-head{padding:12px 16px;border-bottom:1px solid var(--p-color-border);display:flex;align-items:flex-start;gap:12px;flex:none}
.drawer-body{flex:1;overflow-y:auto;padding:16px;background:var(--p-color-bg)}
.drawer-foot{flex:none;padding:12px 16px;border-top:1px solid var(--p-color-border);display:flex;gap:8px;align-items:center;background:var(--p-color-bg-surface)}
.iconbtn{border:0;background:transparent;padding:4px 6px;border-radius:var(--p-border-radius-100);cursor:pointer;color:var(--p-color-icon);font-size:16px;line-height:1}
.iconbtn:hover{background:var(--p-color-bg-fill-transparent-secondary)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--p-color-border);padding:0 16px;background:var(--p-color-bg-surface);flex:none}
/* The ticket thread has no tabs. Emptying the strip left it in flow as a bordered 1px element under the
   header's own border — two hairlines with nothing between them. */
.drawer.no-tabs .tabs{display:none}
.tabs button{border:0;background:transparent;padding:10px 10px 8px;font-size:13px;font-weight:550;color:var(--p-color-text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--p-color-text);border-bottom-color:var(--p-color-bg-fill-brand)}

/* ---- banner ---- */
.banner{border-radius:var(--p-border-radius-300);padding:12px 16px;display:flex;gap:10px;align-items:flex-start}
.banner.info{background:var(--p-color-bg-surface-info)}
.banner.warning{background:var(--p-color-bg-surface-warning)}
.banner.critical{background:var(--p-color-bg-surface-critical)}
.banner.success{background:var(--p-color-bg-surface-success)}
.banner strong{font-weight:650}

/* ---- empty ---- */
.empty{padding:56px 24px;text-align:center;color:var(--p-color-text-secondary)}
.empty h3{color:var(--p-color-text);margin-bottom:4px}

/* ---- toast ---- */
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:rgba(48,48,48,1);color:#fff;font-size:13px;font-weight:550;padding:10px 16px;border-radius:var(--p-border-radius-200);box-shadow:var(--p-shadow-400)}

/* ---- login ---- */
.auth{min-height:100vh;display:grid;place-items:center;background:var(--p-color-bg);padding:24px}
.auth-card{width:400px;max-width:100%;background:var(--p-color-bg-surface);border-radius:var(--p-border-radius-400);box-shadow:var(--p-shadow-300);padding:28px}
.code-inputs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.code-inputs input{text-align:center;font:650 20px/28px var(--p-font-family-sans);font-variant-numeric:tabular-nums;padding:8px 0}

/* Data tables restack as one card per row when their own container runs out of width.
   Keyed to the card, not the viewport: a seven-column table inside a half-width dashboard card
   is cramped at any window size. Each cell carries its column name (set in app.js), so nothing
   is lost and nothing scrolls sideways. The more columns a table has, the sooner it gives up. */
.card,.drawer-body{container-type:inline-size}

@container (max-width:860px){
  table.data:has(thead th:nth-child(7)),table.data:has(thead th:nth-child(7)) tbody,table.data:has(thead th:nth-child(7)) tr,table.data:has(thead th:nth-child(7)) td{display:block;width:auto}
  table.data:has(thead th:nth-child(7)) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table.data:has(thead th:nth-child(7)) tbody tr{padding:12px 14px;border-bottom:1px solid var(--p-color-border-secondary)}
  table.data:has(thead th:nth-child(7)) tbody tr:last-child{border-bottom:0}
  table.data:has(thead th:nth-child(7)) td{padding:3px 0;border:0;display:grid;grid-template-columns:minmax(84px,34%) 1fr;gap:12px;align-items:baseline;justify-items:start;text-align:left;white-space:normal}
  table.data:has(thead th:nth-child(7)) td::before{content:attr(data-label);font-size:12px;font-weight:650;color:var(--p-color-text-secondary);line-height:18px}
  table.data:has(thead th:nth-child(7)) td:not([data-label])::before{content:none}
  table.data:has(thead th:nth-child(7)) td.num{font-variant-numeric:tabular-nums lining-nums}
  table.data:has(thead th:nth-child(7)) tbody tr>td:first-child{display:block;padding:0 0 8px;margin-bottom:8px;border-bottom:1px dashed var(--p-color-border-secondary)}
  table.data:has(thead th:nth-child(7)) tbody tr>td:first-child::before{content:none}
  table.data:has(thead th:nth-child(7)) td>.bar{max-width:100%}
}
@container (max-width:760px){
  table.data:has(thead th:nth-child(6)),table.data:has(thead th:nth-child(6)) tbody,table.data:has(thead th:nth-child(6)) tr,table.data:has(thead th:nth-child(6)) td{display:block;width:auto}
  table.data:has(thead th:nth-child(6)) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table.data:has(thead th:nth-child(6)) tbody tr{padding:12px 14px;border-bottom:1px solid var(--p-color-border-secondary)}
  table.data:has(thead th:nth-child(6)) tbody tr:last-child{border-bottom:0}
  table.data:has(thead th:nth-child(6)) td{padding:3px 0;border:0;display:grid;grid-template-columns:minmax(84px,34%) 1fr;gap:12px;align-items:baseline;justify-items:start;text-align:left;white-space:normal}
  table.data:has(thead th:nth-child(6)) td::before{content:attr(data-label);font-size:12px;font-weight:650;color:var(--p-color-text-secondary);line-height:18px}
  table.data:has(thead th:nth-child(6)) td:not([data-label])::before{content:none}
  table.data:has(thead th:nth-child(6)) td.num{font-variant-numeric:tabular-nums lining-nums}
  table.data:has(thead th:nth-child(6)) tbody tr>td:first-child{display:block;padding:0 0 8px;margin-bottom:8px;border-bottom:1px dashed var(--p-color-border-secondary)}
  table.data:has(thead th:nth-child(6)) tbody tr>td:first-child::before{content:none}
  table.data:has(thead th:nth-child(6)) td>.bar{max-width:100%}
}
@container (max-width:620px){
  table.data:has(thead th:nth-child(5)),table.data:has(thead th:nth-child(5)) tbody,table.data:has(thead th:nth-child(5)) tr,table.data:has(thead th:nth-child(5)) td{display:block;width:auto}
  table.data:has(thead th:nth-child(5)) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table.data:has(thead th:nth-child(5)) tbody tr{padding:12px 14px;border-bottom:1px solid var(--p-color-border-secondary)}
  table.data:has(thead th:nth-child(5)) tbody tr:last-child{border-bottom:0}
  table.data:has(thead th:nth-child(5)) td{padding:3px 0;border:0;display:grid;grid-template-columns:minmax(84px,34%) 1fr;gap:12px;align-items:baseline;justify-items:start;text-align:left;white-space:normal}
  table.data:has(thead th:nth-child(5)) td::before{content:attr(data-label);font-size:12px;font-weight:650;color:var(--p-color-text-secondary);line-height:18px}
  table.data:has(thead th:nth-child(5)) td:not([data-label])::before{content:none}
  table.data:has(thead th:nth-child(5)) td.num{font-variant-numeric:tabular-nums lining-nums}
  table.data:has(thead th:nth-child(5)) tbody tr>td:first-child{display:block;padding:0 0 8px;margin-bottom:8px;border-bottom:1px dashed var(--p-color-border-secondary)}
  table.data:has(thead th:nth-child(5)) tbody tr>td:first-child::before{content:none}
  table.data:has(thead th:nth-child(5)) td>.bar{max-width:100%}
}
@container (max-width:430px){
  table.data:has(thead),table.data:has(thead) tbody,table.data:has(thead) tr,table.data:has(thead) td{display:block;width:auto}
  table.data:has(thead) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table.data:has(thead) tbody tr{padding:12px 14px;border-bottom:1px solid var(--p-color-border-secondary)}
  table.data:has(thead) tbody tr:last-child{border-bottom:0}
  table.data:has(thead) td{padding:3px 0;border:0;display:grid;grid-template-columns:minmax(84px,34%) 1fr;gap:12px;align-items:baseline;justify-items:start;text-align:left;white-space:normal}
  table.data:has(thead) td::before{content:attr(data-label);font-size:12px;font-weight:650;color:var(--p-color-text-secondary);line-height:18px}
  table.data:has(thead) td:not([data-label])::before{content:none}
  table.data:has(thead) td.num{font-variant-numeric:tabular-nums lining-nums}
  table.data:has(thead) tbody tr>td:first-child{display:block;padding:0 0 8px;margin-bottom:8px;border-bottom:1px dashed var(--p-color-border-secondary)}
  table.data:has(thead) tbody tr>td:first-child::before{content:none}
  table.data:has(thead) td>.bar{max-width:100%}
}
/* Headerless summary tables have no column names to show, so they simply wrap. */
@container (max-width:360px){
  table.data:not(:has(thead)) td{white-space:normal}
}

@media(max-width:1080px){.c4,.c5{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- narrow: the sidebar becomes an off-canvas drawer ----
   It used to become a horizontally-scrolling strip of links. That was wrong twice over: items past
   the fold were invisible with nothing to say so, and the group headings had to be hidden — which is
   what makes fifteen destinations findable in the first place.

   An icon-only rail was the other option and is worse here. Four of the fifteen are money concepts
   (Revenue, Charges, Credits, Tax detail) with no distinct glyph between them in the vendored set, the
   three groups carry meaning a rail cannot show, and four items carry counts that matter operationally
   ("Credits 1", "Support 3") and read poorly as dots. The drawer keeps labels, groups and counts
   exactly as they are on a wide screen — nothing has to be re-learned. */
@media(max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;top:0;left:0;bottom:0;width:264px;max-width:86vw;height:100vh;z-index:64;
    transform:translateX(-100%);transition:transform 240ms ease-out;box-shadow:var(--p-shadow-500)}
  .side.open{transform:translateX(0)}
  .nav-toggle{display:inline-flex}
  /* Stacking order, deliberate and explicit: subscriber scrim 50 < subscriber drawer 60 <
     nav scrim 62 < nav 64 < modal scrim 70 < modal 80. The nav sits ABOVE the subscriber drawer
     because it is the more recent intent; equal z-index between the two would resolve by DOM order,
     which is not a decision anyone made.
     `display` is set here, not toggled on .open — only opacity and pointer-events animate. */
  .nav-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,0.71);z-index:62;opacity:0;pointer-events:none;transition:opacity 200ms ease-out}
  .nav-scrim.open{opacity:1;pointer-events:auto}
  .c2,.c3,.c4,.c5{grid-template-columns:minmax(0,1fr)}
  .topbar{padding:10px 14px}
  .page{padding:16px 14px 56px}
  .page-head{flex-direction:column;align-items:stretch}
  .metric .value{font-size:22px;line-height:28px}
}
/* Below the drawer breakpoint a four-column table still lays out as a table, and nowrap headers
   are the one thing that can push a card wider than the viewport. Let them wrap instead. */
@container (max-width:520px){table.data thead th{white-space:normal}}
@media print{.side,.topbar{display:none}}

/* ---- modal (operator dialogs) ----
   Same surface treatment as .card: shadow, never a border. Narrower than the drawer because
   every one of these is a single decision, not a record to browse. */
.mscrim{position:fixed;inset:0;background:rgba(0,0,0,0.71);z-index:70;opacity:0;pointer-events:none;transition:opacity 160ms ease-out}
.mscrim.open{opacity:1;pointer-events:auto}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-48%);width:520px;max-width:94vw;max-height:88vh;background:var(--p-color-bg-surface);border-radius:var(--p-border-radius-400);box-shadow:var(--p-shadow-600,var(--p-shadow-500));z-index:80;display:none;flex-direction:column;overflow:hidden}
.modal.open{display:flex;animation:mz 140ms ease-out}
@keyframes mz{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-48%)}}
.modal-head{flex:none;padding:14px 16px;border-bottom:1px solid var(--p-color-border);display:flex;align-items:flex-start;gap:12px}
.modal-head h2{font-size:14px;font-weight:650;line-height:20px}
.modal-body{flex:1;overflow-y:auto;padding:16px;background:var(--p-color-bg)}
.modal-foot{flex:none;padding:12px 16px;border-top:1px solid var(--p-color-border);display:flex;gap:8px;align-items:center;background:var(--p-color-bg-surface)}
.field{display:block;margin-bottom:12px}
.field>span{display:block;font-size:12px;line-height:16px;margin-bottom:4px}
.field .input{width:100%}

/* ---- chips: a bounded set of choices, styled as a row of toggles rather than a select. Used by the
   storage hold dialog, where the whole point is that the options are fixed. ---- */
.chip{display:inline-flex;align-items:center;font:450 13px/20px var(--p-font-family-sans);padding:5px 12px;border-radius:var(--p-border-radius-full);border:1px solid var(--p-color-border);background:var(--p-color-bg-surface);cursor:pointer;user-select:none}
.chip:hover{background:var(--p-color-bg-surface-hover)}
.chip.on{border-color:rgba(48,48,48,1);background:var(--p-color-bg-surface-secondary);font-weight:550}
.chip input{accent-color:rgba(48,48,48,1)}

/* ---- operators ---- */
.op-row-owner td{background:var(--p-color-bg-surface-caution)}
.role-opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:var(--p-border-radius-200);background:var(--p-color-bg-surface);box-shadow:var(--p-shadow-100),var(--p-shadow-bevel-100);cursor:pointer;margin-bottom:8px}
.role-opt input{margin-top:2px;flex:none}
.role-opt>span{flex:1;min-width:0}
.role-opt[aria-disabled="true"]{cursor:not-allowed;background:var(--p-color-bg-fill-secondary);box-shadow:var(--p-shadow-inset-100)}
.role-opt[aria-disabled="true"] input{opacity:.45}
.guard{font-size:12px;line-height:16px;color:var(--p-color-text-caution);margin-top:4px;text-wrap:pretty}
table.data .guard{min-width:170px;max-width:280px}
@container (max-width:760px){
  table.data td .row[style*="flex-end"]{justify-content:flex-start!important}
  .guard{margin-left:0!important;max-width:100%}
}
.qr{width:148px;height:148px;flex:none;border-radius:var(--p-border-radius-200);background:var(--p-color-bg-fill-secondary);box-shadow:var(--p-shadow-inset-100);display:grid;place-items:center;text-align:center;padding:10px;font-family:var(--p-font-family-mono);font-size:10.5px;line-height:14px;color:var(--p-color-text-secondary)}
.codes{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 16px;font-family:var(--p-font-family-mono);font-size:13px;letter-spacing:.03em;margin-top:10px}
.codes span{padding:3px 0}
.code-big{font-family:var(--p-font-family-mono);font-size:15px;letter-spacing:.08em;line-height:24px;padding:8px 12px;border-radius:var(--p-border-radius-200);background:var(--p-color-bg-fill-secondary);box-shadow:var(--p-shadow-inset-100);display:block;word-break:normal;overflow-wrap:normal;white-space:normal}
.digits{font-family:var(--p-font-family-mono);font-size:20px;letter-spacing:.5em;text-align:center;padding:10px 12px}
.ack{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:17px;margin-top:12px}
.ack input{margin-top:2px;flex:none}

table.data td>*{grid-column:2}

/* ---- backups ----
   The error box shows the provider's own string verbatim. It is monospace and selectable because
   the operator's next move is to paste it into a search or a ticket. */
.errbox{font-family:var(--p-font-family-mono);font-size:11.5px;line-height:17px;color:var(--p-color-text-critical);background:var(--p-color-bg-surface-critical);border-radius:var(--p-border-radius-200);box-shadow:var(--p-shadow-inset-100);padding:8px 10px;white-space:pre-wrap;word-break:normal;overflow-wrap:break-word;max-width:420px;user-select:text}
ol.steps{padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:12px;line-height:17px;color:var(--p-color-text-secondary)}
ol.steps>li::marker{font-variant-numeric:tabular-nums;color:var(--p-color-text-secondary)}
ol.steps .mono{font-size:11.5px}
.cronline{font-family:var(--p-font-family-mono);font-size:11px;line-height:17px;padding:8px 10px;border-radius:var(--p-border-radius-200);background:var(--p-color-bg-fill-secondary);box-shadow:var(--p-shadow-inset-100);white-space:pre-wrap;overflow-wrap:break-word;user-select:text}
.dropzone{padding:18px;border-radius:var(--p-border-radius-200);background:var(--p-color-bg-surface);box-shadow:var(--p-shadow-inset-100);text-align:left}
.modal.wide{width:720px}