/* Additions for screens the design set did not include (auth, account, settings forms). Uses design tokens. */
@import url("components.css");
.inline-form{display:inline}
.link-button{background:none;border:0;padding:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
.dev-ribbon{background:#3e315d;color:#fff;text-align:center;font-size:var(--text-xs);font-weight:800;letter-spacing:.08em;padding:.2rem}
.user-menu{position:relative}
.user-menu summary{cursor:pointer;list-style:none;font-weight:700}
.user-menu summary::-webkit-details-marker{display:none}
.user-menu__panel{position:absolute;right:0;top:calc(100% + .4rem);z-index:20;min-width:12rem;padding:var(--space-3);background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);display:grid;gap:var(--space-2)}
.action-menu{display:block}
.action-menu summary{cursor:pointer;font-weight:800}
.action-menu__panel{margin-top:var(--space-2);min-width:15rem;padding:var(--space-3);background:var(--surface-alt);border:1px solid var(--line);border-radius:var(--radius-sm);display:grid;gap:var(--space-2)}
.action-menu__panel form{display:flex;gap:var(--space-2);align-items:center}
.action-menu__panel select,.action-menu__panel input{min-width:0;flex:1}
.link-box{display:flex;gap:var(--space-2);align-items:stretch;margin:var(--space-4) 0}
.link-box input{flex:1;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:var(--text-sm)}
.chip-muted{display:inline-block;border-radius:99rem;padding:.15rem .5rem;font-size:var(--text-xs);font-weight:800;background:var(--surface-alt);color:var(--muted)}
.muted{color:var(--muted)}
.stack{display:grid;gap:var(--space-4)}
.inline-fields{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:flex-end}
.inline-fields .field{flex:1 1 10rem}
pre.payload{white-space:pre-wrap;word-break:break-word;font-size:var(--text-xs);margin:0;max-height:16rem;overflow:auto}
.incident-card__update{margin:var(--space-4) 0 0;padding-top:var(--space-3);border-top:1px solid var(--line);font-size:var(--text-sm);overflow-wrap:anywhere}
.incident-card__update strong{display:block;font-size:var(--text-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.timeline__update{font-weight:800}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Confirmation dialogs: a real modal over the page (JS) or a plain card page (no-JS fallback). */
.confirm{width:min(calc(100% - 2rem),32rem);padding:0;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);color:var(--text);box-shadow:var(--shadow-md)}
.confirm::backdrop{background:rgb(33 29 30/.45)}
.confirm-page{width:min(100%,32rem);margin:var(--space-6) auto}
.confirm__body{padding:var(--space-5);display:grid;gap:var(--space-4)}
.confirm__title{margin:0;font-size:var(--text-lg);font-weight:800;line-height:1.2}
.confirm__body p{margin:0}
.confirm__body textarea{min-height:5rem}
.confirm__actions{display:flex;gap:var(--space-3);justify-content:flex-end;flex-wrap:wrap}
.confirm__actions .button{flex:0 0 auto}

/* Admin header: the logo artwork has a dark wordmark, so give it a light plate on the dark bar. */
.admin-header .brand{background:#fff;border-radius:var(--radius-sm);padding:.3rem .55rem;margin:0}
.admin-header .status-indicator{padding:.3rem .65rem;border-radius:99rem;color:#211d1e;text-decoration:none;font-weight:800}
.admin-header .status-indicator--operational{background:#def4e7}
.admin-header .status-indicator--operational .status-dot{color:#146c43}
.admin-header .status-indicator--degraded{background:#fff0b8}
.admin-header .status-indicator--degraded .status-dot{color:#805b00}
.admin-header .status-indicator--major{background:#fde3e2}
.admin-header .status-indicator--major .status-dot{color:#ad2025}

/* Phone header: the nav takes its own full-width row (the design's intent), links spread across it. */
@media(max-width:45rem){
.admin-header__inner{flex-wrap:wrap}
.admin-nav{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:auto;justify-content:space-between}
.admin-nav a{white-space:nowrap}
}
.integration-actions{margin-top:var(--space-4)}.panel__title .status-chip,.panel__title .chip-muted{margin-left:.4rem;vertical-align:middle}
/* ---- Mobile-first staff pages (Report outage, Quick update, cards). Plain radios/checkboxes underneath. ---- */
.admin-page-head--compact{margin-bottom:var(--space-4);align-items:center}
.page-title--compact{font-size:clamp(1.6rem,6vw,2.3rem)}
.section-heading{display:flex;align-items:center;gap:.5rem;margin:0 0 var(--space-3);font-size:var(--text-md);font-weight:850}
.choice-group{margin:0 0 var(--space-5);padding:0;border:0;min-width:0}
.choice-group__legend{padding:0;margin-bottom:var(--space-2);font-size:var(--text-base);font-weight:850}
.choice-group__hint{margin:.1rem 0 var(--space-2);color:var(--muted);font-size:var(--text-sm)}
.choice-group--error .choice__label{border-color:var(--major)}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.choice-grid--phrases{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr))}
@media(min-width:50rem){.choice-grid{grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}.choice-grid--two{grid-template-columns:repeat(2,minmax(0,16rem))}}
.choice,.chip,.segmented__item,.check-row{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.choice input,.chip input,.segmented__item input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.choice__label{display:flex;flex-direction:column;justify-content:center;min-height:3.25rem;height:100%;padding:.55rem .8rem;border:2px solid var(--line);border-radius:var(--radius-md);background:var(--surface);font-weight:800;line-height:1.2}
.choice--compact .choice__label{min-height:2.9rem;font-weight:700;font-size:var(--text-sm)}
.choice--none .choice__label{color:var(--muted);border-style:dashed}
.choice__label small{display:block;margin-top:.15rem;font-size:var(--text-xs);font-weight:600;color:var(--muted)}
.choice input:checked+.choice__label{background:var(--text);color:var(--surface);border-color:var(--text)}
.choice input:checked+.choice__label small{color:inherit;opacity:.85}
.choice__label{position:relative;padding-right:1.9rem}.choice input:checked+.choice__label::after{content:"✓";position:absolute;top:.45rem;right:.6rem;font-weight:900}.chip input:checked+span::after{content:" ✓";font-weight:900}
.choice--wide input:checked+.choice__label{background:var(--major);border-color:var(--major);color:#fff}
.choice--localized input:checked+.choice__label{background:var(--degraded-bg);border-color:var(--brand-gold);color:var(--text)}
.choice:has(input:focus-visible) .choice__label,.chip:has(input:focus-visible) span,.segmented__item:has(input:focus-visible) span{outline:3px solid var(--focus);outline-offset:2px}
.wide-warning{display:none;margin:var(--space-3) 0 0;padding:var(--space-3) var(--space-4);color:#5a1014;background:var(--major-bg);border:2px solid var(--major);border-radius:var(--radius-sm)}
.scope-group:has(input[value=wide_area]:checked) .wide-warning{display:block}
@media(prefers-color-scheme:dark){.wide-warning{color:var(--text)}}
.chip-set{display:flex;flex-wrap:wrap;gap:.5rem}
.chip span{display:inline-flex;align-items:center;min-height:2.75rem;padding:.4rem .95rem;border:2px solid var(--line);border-radius:99rem;background:var(--surface);font-weight:750}
.chip-set--small .chip span{min-height:2.5rem;padding:.3rem .8rem;font-size:var(--text-sm)}
.chip input:checked+span{background:var(--text);color:var(--surface);border-color:var(--text)}
.chip-static{display:inline-flex;align-items:center;min-height:2.2rem;padding:.25rem .75rem;border-radius:99rem;font-weight:750;font-size:var(--text-sm);border:1px solid var(--line);background:var(--surface-alt);color:var(--text)}
.chip-static--tbd{color:var(--muted);border-style:dashed}
.chip-static--area{background:var(--text);color:var(--surface);border-color:var(--text);cursor:pointer}
.area-picker__selected{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:var(--space-2)}
.area-picker__search{width:100%;min-height:2.9rem;padding:.55rem .75rem;border:1px solid #a89f9f;border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:max(1rem,16px)}
.area-picker__group{margin:var(--space-3) 0 var(--space-2);font-size:var(--text-xs);font-weight:850;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.area-picker__all{margin-top:var(--space-3)}
.area-picker__all>summary,.timeline-more>summary,.more-details__summary{list-style:none;cursor:pointer}.area-picker__all>summary,.timeline-more>summary{min-height:2.75rem;display:flex;align-items:center;font-weight:800}.area-picker__all>summary::-webkit-details-marker,.timeline-more>summary::-webkit-details-marker,.more-details__summary::-webkit-details-marker{display:none}.area-picker__all>summary::before,.timeline-more>summary::before,.more-details__summary::before{content:"▸";display:inline-block;width:1.1rem;transition:transform .15s}details[open]>summary::before{transform:rotate(90deg)}
.check-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.4rem}
.check-row{display:flex;align-items:center;gap:.6rem;min-height:2.9rem;padding:.35rem .7rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);font-weight:650}
.check-row input{width:1.3rem;height:1.3rem;flex:0 0 auto;accent-color:var(--brand-red)}
.check-row:has(input:checked){border:2px solid var(--text);font-weight:850}
.eta-custom{display:none;margin-top:var(--space-3);gap:var(--space-3);padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-alt)}
#eta_choice:has(input[value=custom]:checked) .eta-custom{display:grid}
.eta-custom__date{display:none}
.eta-custom:has(input[value=date]:checked) .eta-custom__date{display:block}
.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:2px solid var(--text);border-radius:var(--radius-md);overflow:hidden}
.segmented__item span{display:flex;align-items:center;justify-content:center;min-height:2.9rem;padding:.3rem .4rem;font-weight:800;font-size:var(--text-sm);text-align:center;background:var(--surface)}
.segmented__item+.segmented__item span{border-left:1px solid var(--line)}
.segmented__item input:checked+span{background:var(--text);color:var(--surface)}
.public-note{margin:var(--space-2) 0 var(--space-5)}
.switch-row{display:flex;align-items:center;gap:.55rem;min-height:2.75rem;font-size:var(--text-sm);color:var(--muted);font-weight:650}
.switch-row input{width:1.2rem;height:1.2rem;accent-color:var(--operational)}
.public-note__preview{display:none;margin:.25rem 0 0;padding:var(--space-3);border:2px solid var(--operational);border-radius:var(--radius-sm);background:var(--operational-bg);font-size:var(--text-sm)}
.public-note:has(input:checked) .public-note__preview{display:block}
.public-note:has(input:checked) .switch-row{color:var(--text)}
.field input,.field select,.field textarea{font-size:max(1rem,16px)}
.more-details{margin:0 0 var(--space-5);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.more-details__summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .6rem;min-height:3rem;padding:.75rem var(--space-4);font-weight:850;cursor:pointer}
.more-details__summary .optional{font-size:var(--text-sm)}
.more-details__body{display:grid;gap:var(--space-4);padding:0 var(--space-4) var(--space-4)}
.more-details__body .choice-group{margin-bottom:0}
.update-block__title{margin:0 0 var(--space-2);font-weight:850}
.report-layout{display:grid;gap:var(--space-5)}
.report-layout>*{min-width:0}
.report-side{display:none}
@media(min-width:62rem){.report-layout{grid-template-columns:minmax(0,1fr) 22rem}.report-side{display:grid;gap:var(--space-4);align-content:start;position:sticky;top:var(--space-4)}}
.action-bar{position:sticky;bottom:0;z-index:5;display:grid;gap:.4rem;margin:0 calc(var(--space-4)*-1);padding:.6rem var(--space-4) calc(.6rem + env(safe-area-inset-bottom,0px));background:var(--canvas);border-top:2px solid var(--line);box-shadow:0 -6px 18px rgb(33 29 30/.08)}
.action-bar__summary{margin:0;font-size:var(--text-sm);font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.action-bar__buttons{display:flex;gap:.5rem}
.action-bar__buttons .button{min-height:3rem;flex:0 0 auto}
.action-bar__buttons .action-bar__primary{flex:1 1 auto}
body.is-typing .action-bar{position:static;box-shadow:none}
@media(min-width:62rem){.action-bar{margin:0;border:1px solid var(--line);border-radius:var(--radius-md);grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.outage-summary{margin-bottom:var(--space-5);padding:var(--space-4);border:1px solid var(--line);border-left:.4rem solid var(--muted);border-radius:var(--radius-md);background:var(--surface)}
.outage-summary--major{border-left-color:var(--major)}
.outage-summary--degraded{border-left-color:var(--brand-gold)}
.outage-summary__chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:var(--space-3)}
.outage-summary__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin:0}
.outage-summary__facts dt{font-size:var(--text-xs);font-weight:850;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.outage-summary__facts dd{margin:.1rem 0 0;font-weight:650}
.outage-summary__wide,.outage-summary__internal{grid-column:1/-1}
.outage-summary__internal{padding:var(--space-2) var(--space-3);background:var(--surface-alt);border-radius:var(--radius-sm)}
.outage-summary__note{margin:var(--space-3) 0 0;font-size:var(--text-sm)}
@media(min-width:50rem){.outage-summary__facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.quick-update{margin-bottom:var(--space-5);padding:var(--space-4) var(--space-4) 0;border:2px solid var(--text);border-radius:var(--radius-md);background:var(--surface)}
.quick-update .action-bar{margin:0 calc(var(--space-4)*-1);border-radius:0 0 var(--radius-md) var(--radius-md)}
@media(min-width:62rem){.quick-update .action-bar{margin:0 0 var(--space-4);border-radius:var(--radius-md)}}
.timeline-panel{padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-alt)}
.timeline-more .timeline{margin-top:var(--space-3)}
.visibility{display:inline-flex;align-items:center;gap:.2rem;padding:.1rem .5rem;border-radius:99rem;font-size:var(--text-xs);font-weight:850;border:1.5px solid}
.visibility--internal{color:var(--text);border-color:var(--muted);background:var(--surface)}
.visibility--public{color:var(--operational);border-color:var(--operational);background:var(--operational-bg)}
.status-strip{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--line)}
.status-strip p{margin:0}
.status-strip__icon{display:grid;place-items:center;flex:0 0 auto;width:2rem;height:2rem;border-radius:50%;font-weight:900;color:#fff}
.status-strip--operational{background:var(--operational-bg)}.status-strip--operational .status-strip__icon{background:var(--operational)}
.status-strip--degraded{background:var(--degraded-bg)}.status-strip--degraded .status-strip__icon{background:var(--brand-gold);color:#281c00}
.status-strip--major{background:var(--major-bg)}.status-strip--major .status-strip__icon{background:var(--major)}
.dash-section{margin-bottom:var(--space-6)}
.dash-empty{margin:0}
.outage-cards{display:grid;gap:var(--space-3);margin:0;padding:0;list-style:none}
@media(min-width:50rem){.outage-cards{grid-template-columns:repeat(auto-fill,minmax(22rem,1fr))}}
.outage-card{display:grid;border:1px solid var(--line);border-left:.4rem solid var(--muted);border-radius:var(--radius-md);background:var(--surface);overflow:hidden}
.outage-card--major{border-left-color:var(--major)}.outage-card--degraded{border-left-color:var(--brand-gold)}.outage-card--draft{border-left-color:var(--info)}
.outage-card__main{display:grid;gap:.2rem;padding:var(--space-4);color:inherit;text-decoration:none}
.outage-card__severity{font-size:var(--text-xs);font-weight:850;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.outage-card--major .outage-card__severity{color:var(--major)}
.outage-card__title{font-size:var(--text-md)}
.outage-card__areas{font-weight:650}
.outage-card__facts{display:flex;flex-wrap:wrap;gap:.15rem .9rem;font-size:var(--text-sm);color:var(--muted)}
.outage-card__note{font-size:var(--text-xs)}
.outage-card__actions{display:flex;gap:.5rem;padding:0 var(--space-4) var(--space-4)}
.outage-card__actions .button{min-height:2.9rem;flex:1}
.outage-card__actions .button--primary{flex:2}
.report-button{min-height:3rem}
.filter-pills{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:var(--space-4)}
.filter-pill{display:inline-flex;align-items:center;min-height:2.6rem;padding:.3rem .9rem;border:1.5px solid var(--line);border-radius:99rem;color:var(--text);text-decoration:none;font-weight:750;font-size:var(--text-sm)}
.filter-pill[aria-current=page]{background:var(--text);color:var(--surface);border-color:var(--text)}
.incident-rows{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.incident-row{display:grid;gap:.15rem;padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-left:.35rem solid var(--line);border-radius:var(--radius-md);background:var(--surface);color:inherit;text-decoration:none}
.incident-row--active{border-left-color:var(--brand-gold)}.incident-row--major{border-left-color:var(--major)}.incident-row--draft{border-left-color:var(--info)}
.incident-row__top{display:flex;justify-content:space-between;gap:var(--space-3);align-items:baseline}
.incident-row__areas{font-weight:650}
.incident-row__meta{font-size:var(--text-sm);color:var(--muted)}
@media(max-width:45rem){
  .dev-ribbon{padding-block:.1rem;font-size:.65rem}
  .admin-header__inner{min-height:0;padding-block:.4rem;row-gap:.25rem}
  .admin-header .brand__mark{width:5.6rem;height:1.5rem}
  .admin-header__identity{font-size:var(--text-sm)}
  .admin-nav{padding-top:.3rem}
  .admin-nav a{padding:.4rem .2rem;font-size:.78rem}
  .admin-layout{padding-block:var(--space-3)}
  .admin-page-head--compact{flex-direction:row;align-items:center;justify-content:space-between}
  .admin-page-head--compact .button--primary{width:auto}
  .eyebrow{font-size:.7rem}
  .action-bar{margin-inline:-.75rem;padding-inline:.75rem}
  .confirm__actions{flex-direction:column-reverse;align-items:stretch}
  .outage-card__main{padding:var(--space-3) var(--space-4)}
  .outage-card__actions{padding:0 var(--space-4) var(--space-3)}
}
/* ---- Faster sign-in: passkeys, texted codes, My account ---- */
.login-options{display:grid;gap:.4rem;margin-bottom:var(--space-4);padding-bottom:var(--space-4);border-bottom:1px solid var(--line)}
.login-options__passkey{min-height:3rem;width:100%}
.login-options__hint{margin:0;font-size:var(--text-sm)}
.otp-input{font-size:max(1.5rem,16px)!important;letter-spacing:.35em;font-variant-numeric:tabular-nums;max-width:12rem}
.passkey-list{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.passkey-list__item{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm)}
.tight-list{margin:0;padding-left:1.1rem;display:grid;gap:.35rem}
.login-remember{margin-bottom:var(--space-3)}
/* Nothing scrolls inside a box: tabs wrap, and an open row menu fits its column on phones. */
.management-tabs{flex-wrap:wrap;overflow:visible}
.action-menu__panel form{flex-wrap:wrap}
@media(max-width:45rem){.management-tabs .button{min-height:2.5rem;padding-inline:.75rem;font-size:var(--text-xs)}.action-menu__panel{min-width:0}.action-menu__panel form .button{flex:1 1 auto}}
@media(max-width:45rem){.action-menu__panel form input,.action-menu__panel form select{flex:1 1 100%;min-height:2.6rem;font-size:max(1rem,16px)}}
/* ---- Install banner (phones; install.js) ---- */
.install-banner{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2) var(--space-3);align-items:start;margin-bottom:var(--space-4);padding:var(--space-3);border:2px solid var(--text);border-radius:var(--radius-md);background:var(--surface)}
.install-banner__icon{width:2.75rem;height:2.75rem;border-radius:.6rem;border:1px solid var(--line)}
.install-banner__text{display:grid;gap:.15rem;font-size:var(--text-sm)}
.install-banner__text>strong:first-child{font-size:var(--text-base)}
.install-banner__steps{margin:.35rem 0 0;padding-left:1.15rem;display:grid;gap:.25rem}
.install-banner__actions{grid-column:1/-1;display:flex;gap:.5rem}
.install-banner__actions .button{min-height:2.75rem}
.install-banner__actions .button--primary{flex:1}