/* Statuss un kļūdas (#page-status, portal/status-page.js): the report form is the page, one column under the heading;
   the button in the heading opens the known issues and the company's own reports in a panel (a <dialog>: a drawer on
   the right, a sheet from the bottom on a phone). Widths inside the form and the panel are measured on them (container
   queries). Surfaces are raised by the same shadow ring as Settings (shared/settings.css), and only the colour tokens
   every theme defines are used. Rules are scoped to #page-status: this sheet loads before login.html's own <style>,
   whose .btn / .field / dialog rules would otherwise win the ties. */
#page-status{
  --status-radius:12px;--status-control:40px;
  --status-surface:0 0 0 1px oklch(0 0 0 / .08),0 1px 2px -1px oklch(0 0 0 / .06),0 2px 4px 0 oklch(0 0 0 / .03);
  --status-divider:color-mix(in srgb,var(--line) 70%,var(--panel));
  --status-ease:cubic-bezier(.16,1,.3,1);
  /* "Confirmed": information, blue. The other tones come from the theme's success / warning tokens. */
  --status-info-text:#1d4fbf;
}
:root:not([data-theme="light"]) #page-status{
  --status-surface:0 0 0 1px oklch(1 0 0 / .12);
  --status-info-text:#a8c1ff;
}
#page-status [hidden]{display:none!important}
#page-status .status-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── The page: the heading with the status button, then the form, in one column in the middle ── */
#page-status .status-main{max-width:720px;margin-inline:auto}
/* main stops at 1180px on the left (login.html); this page takes the whole width beside the sidebar, so the column is
   in the middle of what is there to see. */
main:has(> #page-status.on){max-width:none}
#page-status .status-head{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin:0 0 24px}
#page-status .status-head h2{min-width:0;font-size:26px;font-weight:600;line-height:1.2;letter-spacing:-.025em;text-wrap:balance}
#page-status .btn{width:auto;min-height:var(--status-control);padding:0 16px;border-radius:8px;font-size:14px;line-height:1.2;transition:background-color .18s,transform .18s var(--status-ease)}
#page-status .btn:active:not(:disabled){transform:scale(.98)}
#page-status .btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ── The panel ── */
#page-status .status-panel{container:status-panel / inline-size;position:fixed;inset:12px 12px 12px auto;width:min(560px,calc(100vw - 24px));height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:16px;background:var(--bg);color:var(--text);box-shadow:0 0 0 1px oklch(0 0 0 / .06),0 24px 64px -16px oklch(0 0 0 / .3);overflow:hidden}
:root:not([data-theme="light"]) #page-status .status-panel{box-shadow:0 0 0 1px oklch(1 0 0 / .1),0 24px 64px -16px oklch(0 0 0 / .6)}
#page-status .status-panel[open]{display:flex;flex-direction:column;animation:status-panel-in .36s var(--status-ease)}
#page-status .status-panel::backdrop{background:oklch(.2 0 0 / .32)}
#page-status .status-panel[open]::backdrop{animation:backdrop-in .24s ease-out}
/* closeDialog() (shared/motion.js) plays this, then closes. */
#page-status .status-panel[open][data-closing]{animation:status-panel-out .16s cubic-bezier(.4,0,1,1) both}
@keyframes status-panel-in{from{opacity:0;transform:translateX(32px)}}
@keyframes status-panel-out{to{opacity:0;transform:translateX(24px)}}
/* The page behind stays where it is while the panel is open. */
:root:has(#status-panel[open]){overflow:hidden}
#page-status .status-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:10px 12px 10px 24px;border-bottom:1px solid var(--status-divider)}
#page-status .status-panel-head h2{font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
#page-status .status-panel-close{position:relative;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;transition:background-color .15s,color .15s}
#page-status .status-panel-close svg{width:16px;height:16px}
#page-status .status-panel-close::after{content:"";position:absolute;inset:-4px}
#page-status .status-panel-close:hover{background:var(--panel-2);color:var(--text)}
#page-status .status-panel-close:focus-visible{outline:2px solid var(--focus);outline-offset:0;box-shadow:none}
#page-status .status-body{flex:1;display:grid;gap:36px;min-width:0;min-height:0;align-content:start;padding:24px 24px 32px;overflow:auto;overscroll-behavior:contain}

/* ── Summary: are there known problems right now. No surface of its own: it is the heading of the list under it. ── */
#page-status .status-summary{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:start;gap:4px 12px}
#page-status .status-summary-dot{position:relative;width:8px;height:8px;margin-top:9px;border-radius:50%;color:var(--success-text);background:currentColor;box-shadow:0 0 0 4px var(--success-bg)}
#page-status .status-summary[data-tone="issues"] .status-summary-dot{color:var(--warning-text);box-shadow:0 0 0 4px var(--warning-bg)}
#page-status .status-summary-copy{min-width:0}
#page-status .status-summary-title{font-size:19px;font-weight:600;line-height:1.35;letter-spacing:-.02em;text-wrap:balance}
#page-status .status-summary-text{margin-top:2px;font-size:14px;line-height:1.5;color:var(--muted);text-wrap:pretty}
#page-status .status-summary-side{display:flex;align-items:center;gap:6px;margin-top:-3px;color:var(--dim);font-size:13px;white-space:nowrap}
#page-status .status-summary-checked{font-variant-numeric:tabular-nums}
#page-status .status-summary + .status-known{margin-top:-16px}
#page-status .status-refresh{position:relative;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;transition:background-color .15s,color .15s,transform .18s var(--status-ease)}
/* A 40px target around the 32px button. */
#page-status .status-refresh::after{content:"";position:absolute;inset:-4px}
#page-status .status-refresh svg{width:16px;height:16px}
#page-status .status-refresh:hover:not(:disabled){background:var(--panel-2);color:var(--text)}
#page-status .status-refresh:active{transform:scale(.94)}
#page-status .status-refresh:focus-visible{outline:2px solid var(--focus);outline-offset:0}
#page-status .status-refresh:disabled{cursor:progress;opacity:.6}
#page-status[aria-busy] .status-refresh svg{animation:status-spin .9s linear infinite}
@keyframes status-spin{to{transform:rotate(360deg)}}

/* ── Sections and lists ── */
#page-status .status-section{min-width:0}
#page-status .status-section-head{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
#page-status .status-section-title{font-size:16px;font-weight:600;line-height:1.4}
#page-status .status-section-count{color:var(--dim);font-size:14px;font-variant-numeric:tabular-nums}
#page-status .status-subhead{margin:28px 0 12px;color:var(--muted);font-size:14px;font-weight:600}
#page-status .status-empty{color:var(--muted);font-size:14px;line-height:1.5}
#page-status .status-list{list-style:none;margin:0;padding:0;border-radius:var(--status-radius);background:var(--panel);box-shadow:var(--status-surface)}
#page-status .status-item{min-width:0;padding:18px 20px}
#page-status .status-item + .status-item{border-top:1px solid var(--status-divider)}
/* A row: the title and its facts, the status on the right, Kreative's note under both. */
#page-status .status-known .status-item{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main state" "note note";column-gap:24px;align-items:start}
#page-status .status-item-main{grid-area:main;display:block;min-width:0}
#page-status .status-item-title{display:block;font-size:15px;font-weight:600;line-height:1.4;letter-spacing:-.005em;overflow-wrap:anywhere}
#page-status .status-item-meta{display:block;margin-top:4px;color:var(--dim);font-size:13px;line-height:1.45}
#page-status .status-tag{color:var(--muted);font-weight:600}

/* A status: a meter of the four steps (Received, Confirmed, Being fixed, Fixed), the reached ones filled in its tone,
   then the word. Readable without the colour: the word says it, the meter says how far. */
#page-status .status-badge{grid-area:state;display:inline-flex;align-items:center;gap:8px;min-height:21px;color:var(--muted);font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap}
#page-status .status-meter{display:inline-grid;grid-template-columns:repeat(4,8px);gap:2px}
#page-status .status-meter i{height:4px;border-radius:2px;background:var(--line)}
#page-status .status-meter i.is-on{background:currentColor}
#page-status .status-badge[data-status="confirmed"]{color:var(--status-info-text)}
#page-status .status-badge[data-status="in_progress"]{color:var(--warning-text)}
#page-status .status-badge[data-status="fixed"]{color:var(--success-text)}
#page-status .status-badge[data-status="closed"]{color:var(--dim)}

/* Kreative's note: set in by a hairline, never mistaken for the client's own words, never louder than the title. */
#page-status .status-note{grid-area:note;margin-top:14px;padding:1px 0 1px 14px;border-left:2px solid var(--line)}
#page-status .status-note-from{display:block;color:var(--dim);font-size:12px;font-weight:600;line-height:1.4}
#page-status .status-note-text{margin-top:2px;font-size:14px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere;text-wrap:pretty}

/* The company's own reports open in place. */
#page-status .status-own-item{padding:0}
#page-status .status-details-summary{display:grid;grid-template-columns:minmax(0,1fr) auto 16px;grid-template-areas:"main state chev";align-items:start;column-gap:16px;padding:18px 20px;list-style:none;cursor:pointer;border-radius:inherit;transition:background-color .15s}
#page-status .status-details-summary::-webkit-details-marker{display:none}
#page-status .status-own-item:first-child .status-details-summary{border-radius:var(--status-radius) var(--status-radius) 0 0}
#page-status .status-own-item:last-child .status-details:not([open]) .status-details-summary{border-radius:0 0 var(--status-radius) var(--status-radius)}
#page-status .status-own-item:only-child .status-details:not([open]) .status-details-summary{border-radius:var(--status-radius)}
@media(hover:hover){#page-status .status-details-summary:hover{background:color-mix(in srgb,var(--text) 3%,transparent)}}
#page-status .status-details-summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
#page-status .status-chevron{grid-area:chev;width:16px;height:16px;margin-top:3px;color:var(--dim);transition:transform .25s var(--status-ease)}
#page-status .status-details[open] .status-chevron{transform:rotate(180deg)}
#page-status .status-details-body{display:grid;gap:18px;padding:2px 20px 22px}
#page-status .status-details[open] .status-details-body{animation:status-open .25s var(--status-ease)}
@keyframes status-open{from{opacity:0;transform:translateY(-4px)}}
#page-status .status-details-body .status-note{margin-top:0}
#page-status .status-label{display:block;color:var(--muted);font-size:12px;font-weight:600}
#page-status .status-description-text{margin-top:4px;font-size:14px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
#page-status .status-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 24px;margin:0;padding-top:16px;border-top:1px solid var(--status-divider)}
#page-status .status-facts dt{color:var(--muted);font-size:12px;font-weight:600}
#page-status .status-facts dd{margin:2px 0 0;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
#page-status .status-public-hint,#page-status .status-closed{color:var(--muted);font-size:13px;line-height:1.5}
#page-status .status-own-item.is-fresh{animation:status-fresh 2.4s ease-out}
@keyframes status-fresh{0%,40%{background:color-mix(in srgb,var(--success-bg) 70%,transparent)}100%{background:transparent}}

/* Received → Confirmed → Being fixed → Fixed: dots on a line, the steps behind it filled. */
#page-status .status-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none}
#page-status .status-step{position:relative;display:grid;justify-items:start;gap:8px;min-width:0;color:var(--dim);font-size:12px;font-weight:600;line-height:1.3}
#page-status .status-step::before{content:"";position:absolute;top:5px;left:12px;right:0;height:2px;background:var(--line)}
#page-status .status-step:last-child::before{display:none}
#page-status .status-step[data-state="done"]::before{background:var(--success-text)}
#page-status .status-step-dot{position:relative;width:12px;height:12px;border:2px solid var(--line);border-radius:50%;background:var(--panel)}
#page-status .status-step[data-state="done"] .status-step-dot{border-color:var(--success-text);background:var(--success-text)}
#page-status .status-step[data-state="current"]{color:var(--text)}
#page-status .status-step[data-state="current"] .status-step-dot{border-color:var(--text);background:var(--text);box-shadow:0 0 0 4px color-mix(in srgb,var(--text) 14%,transparent)}
#page-status .status-step-label{padding-right:8px;overflow-wrap:anywhere}

/* ── While loading, and when it fails ── */
#page-status .status-skeleton{display:grid;gap:12px}
#page-status .status-skeleton span{display:block;height:76px;border-radius:var(--status-radius);background:var(--panel-2);animation:status-pulse 1.4s ease-in-out infinite}
/* The summary line, then the rows. */
#page-status .status-skeleton .status-skeleton-wide{width:min(62%,380px);height:26px;margin-bottom:4px;border-radius:8px}
#page-status .status-skeleton span:nth-child(3){animation-delay:.15s}
#page-status .status-skeleton span:nth-child(4){animation-delay:.3s}
@keyframes status-pulse{50%{opacity:.5}}
#page-status .status-load-error{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px 20px;border:1px solid var(--error-border);border-radius:var(--status-radius);background:var(--error-bg);color:var(--error-text);font-size:14px;font-weight:600}
#page-status .status-load-error p{flex:1 1 240px}
#page-status .status-own-empty{display:grid;justify-items:start;gap:12px;padding:20px;border-radius:var(--status-radius);background:var(--panel);box-shadow:var(--status-surface)}

/* ── Motion: the panel's blocks come in top to bottom as it opens (status-page.js sets --enter) and the summary's dot
   breathes while something is broken. Neither runs for those who asked for less motion. ── */
@media(prefers-reduced-motion:no-preference){
  #page-status .is-entering :is(.status-summary,.status-subhead,.status-section-head,.status-list,.status-own-empty){animation:status-enter .55s var(--status-ease) both;animation-delay:calc(80ms + var(--enter,0) * 55ms)}
  #page-status .status-summary[data-tone="issues"] .status-summary-dot::after{content:"";position:absolute;inset:0;border:1.5px solid currentColor;border-radius:50%;animation:status-breathe 2.6s var(--status-ease) infinite}
}
@keyframes status-enter{from{opacity:0;transform:translateY(8px)}}
@keyframes status-breathe{0%{opacity:.6;transform:scale(1)}75%,100%{opacity:0;transform:scale(3.2)}}
@keyframes status-sheet-in{from{opacity:0;transform:translateY(48px)}}
@keyframes status-sheet-out{to{opacity:0;transform:translateY(32px)}}

/* ── The report form ── */
#page-status .status-report{container:status-report / inline-size;padding:28px 28px 28px;border-radius:var(--status-radius);background:var(--panel);box-shadow:var(--status-surface);scroll-margin-top:24px}
#page-status .status-report h3{font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.015em}
#page-status form{display:grid;gap:20px;margin-top:24px}
#page-status form[aria-busy="true"]{cursor:progress}
#page-status .status-field{display:grid;gap:8px;min-width:0}
#page-status .status-field label{color:var(--muted);font-size:13px;font-weight:600;line-height:1.3}
#page-status .status-field input:not([type="range"]),#page-status .status-field textarea{width:100%;min-height:var(--status-control);padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font:inherit;font-size:15px;line-height:1.5;transition:border-color .15s,box-shadow .15s}
#page-status .status-field textarea{min-height:132px;resize:vertical}
#page-status .status-field :is(input:not([type="range"]),textarea)::placeholder{color:var(--dim)}
@media(hover:hover){#page-status .status-field :is(input:not([type="range"]),textarea):hover:not(:focus){border-color:color-mix(in srgb,var(--line),var(--text) 20%)}}
#page-status .status-field :is(input:not([type="range"]),textarea):focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-soft)}
#page-status .status-field :is(input:not([type="range"]),textarea)[aria-invalid="true"]{border-color:var(--error-border);box-shadow:0 0 0 3px color-mix(in srgb,var(--error-border) 40%,transparent)}
#page-status .status-field .v-control{width:100%;min-height:var(--status-control)}
#page-status .status-field-hint{color:var(--dim);font-size:13px;line-height:1.45}
#page-status .status-counter{font-variant-numeric:tabular-nums;white-space:nowrap}
/* The description's hint line only carries the counter, shown near the limit; until then it takes no room. */
#page-status #status-description-hint:has(> .status-counter[hidden]){display:none}

/* Impact: a slider of three stops. Colour by impact: green when work goes on, amber when part of it is blocked, red when it
   has stopped (brighter than the theme's status tones on purpose). The track fills up to the thumb in that colour. */
@property --impact-tone{syntax:"<color>";inherits:true;initial-value:#f59e0b}
#page-status{--impact-minor:#16a34a;--impact-major:#f59e0b;--impact-blocking:#e5383b}
:root:not([data-theme="light"]) #page-status{--impact-minor:#34d474;--impact-major:#fbbf24;--impact-blocking:#ff5c5f}
#page-status .status-impact{--impact-tone:var(--impact-major);--thumb:40px;--thumb-h:26px;--rail:6px;--rail-off:color-mix(in srgb,var(--text) 10%,transparent);transition:--impact-tone .2s}
#page-status .status-impact[data-severity="minor"]{--impact-tone:var(--impact-minor)}
#page-status .status-impact[data-severity="blocking"]{--impact-tone:var(--impact-blocking)}
/* The slider itself is shared/stop-slider.css (and shared/stop-slider.js): here only its size and its colour. The page's
   focus rule rings the whole input (box-shadow); there only the thumb is. */
#page-status .status-impact .stop-slider{--tone:var(--impact-tone)}
#page-status .status-slider input:focus{outline:none;box-shadow:none}
/* The names: the first under the left end, the middle centred, the last under the right end; the chosen one in full. */
#page-status .status-stops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#page-status .status-stops button{min-height:28px;padding:0;border:0;background:none;color:var(--muted);font:inherit;font-size:14px;font-weight:500;line-height:1.3;cursor:pointer;transition:color .15s}
#page-status .status-stops button:nth-child(1){text-align:left}
#page-status .status-stops button:nth-child(3){text-align:right}
@media(hover:hover){#page-status .status-stops button:hover{color:var(--text)}}
#page-status .status-stops button.is-on{color:var(--text);font-weight:600}

#page-status .status-check{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;cursor:pointer}
#page-status .status-check input{flex:none;width:16px;height:16px;margin:0;accent-color:var(--text);cursor:pointer}
#page-status .status-check input:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
#page-status .status-check-hint{margin-top:-14px;padding-left:26px}
/* "See what's sent": a quiet link under the hint that opens the details as they would go now. */
#page-status .status-sent{margin-top:-12px;padding-left:26px}
#page-status .status-sent summary{display:inline-flex;align-items:center;gap:4px;padding:2px 0;border-radius:4px;color:var(--muted);font-size:13px;font-weight:600;line-height:1.4;list-style:none;cursor:pointer;transition:color .15s}
#page-status .status-sent summary::-webkit-details-marker{display:none}
#page-status .status-sent summary svg{width:14px;height:14px;transition:transform .25s var(--status-ease)}
#page-status .status-sent[open] summary svg{transform:rotate(180deg)}
@media(hover:hover){#page-status .status-sent summary:hover{color:var(--text)}}
#page-status .status-sent summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
#page-status .status-sent-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin:8px 0 0;padding:14px 16px;border:1px solid var(--status-divider);border-radius:8px;background:var(--panel-2);font-size:13px;line-height:1.45}
#page-status .status-sent-list dt{color:var(--dim);font-size:12px}
#page-status .status-sent-list dd{margin:2px 0 0;color:var(--text);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
#page-status .status-sent-list .is-wide{grid-column:1 / -1}
#page-status .status-sent-list ul{display:grid;gap:4px;margin:0;padding:0;list-style:none}
@container status-report (max-width:420px){#page-status .status-sent-list{grid-template-columns:minmax(0,1fr)}}
#page-status .status-form-error{display:flex;align-items:flex-start;gap:8px;padding:12px;border:1px solid var(--error-border);border-left:3px solid var(--error-text);border-radius:8px;background:var(--error-bg);color:var(--error-text);font-size:14px;font-weight:600;line-height:1.45}
#page-status .status-submit{width:100%;min-height:44px;margin-top:4px;font-size:15px}
#page-status .status-submit:disabled{cursor:progress}

/* A narrow panel: the status goes above the title, so a long title keeps the whole width. */
@container status-panel (max-width:480px){
  #page-status .status-known .status-item{grid-template-columns:minmax(0,1fr);grid-template-areas:"state" "main" "note";row-gap:8px}
  #page-status .status-details-summary{grid-template-columns:minmax(0,1fr) 16px;grid-template-areas:"state chev" "main chev";row-gap:8px}
}
@media(max-width:640px){
  #page-status .status-head{margin-bottom:20px}
  #page-status .status-head h2{font-size:24px}
  /* A sheet from the bottom, the page's top edge still showing above it. */
  #page-status .status-panel{inset:max(12px,env(safe-area-inset-top)) 0 0 0;width:100%;border-radius:16px 16px 0 0}
  #page-status .status-panel[open]{animation-name:status-sheet-in}
  #page-status .status-panel[open][data-closing]{animation-name:status-sheet-out}
  #page-status .status-panel-head{padding-left:16px}
  #page-status .status-body{padding:20px 16px max(24px,env(safe-area-inset-bottom))}
  #page-status .status-summary{grid-template-columns:8px minmax(0,1fr)}
  #page-status .status-summary-title{font-size:17px}
  #page-status .status-summary-side{grid-column:2;margin-top:4px}
  #page-status .status-known .status-item,#page-status .status-details-summary{padding:16px}
  #page-status .status-details-body{padding:0 16px 16px}
  #page-status .status-report{padding:22px 16px 16px}
  #page-status .status-field input,#page-status .status-field textarea{font-size:16px}
  #page-status .status-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}
  #page-status .status-step:nth-child(2)::before{display:none}
}

/* The Beta notice in the sidebar links here. */
.sidebar-beta-notice .sidebar-beta-link{display:inline-block;margin-top:6px;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.sidebar-beta-notice .sidebar-beta-link:hover{text-decoration-thickness:2px}
.sidebar-beta-notice .sidebar-beta-link:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}