/* The maintenance page. The same horizon as the file manager, holding one sentence: is anything failing?
   Under it four tabs. Colour is for exceptions: a quiet dot when a thing is fine, a shape and a word and a wash
   when it is not. Built on files.css (buttons, dialogs, states, toast) and base.css. */

.ops { --gutter: clamp(1rem, 1.7vw, 2.75rem); }
.ops .top { padding-inline: var(--gutter); z-index: 4; }
.r { text-align: right; }
.dim { color: var(--ink-3); }

/* ---- The band: the verdict ------------------------------------------------------------------- */

.op-band { position: relative; isolation: isolate; display: flex; flex-direction: column; background: var(--atmo-top); }
.op-band .atmo { z-index: 0; }

.op-head { position: relative; z-index: 3; padding: 0.3rem var(--gutter) clamp(0.9rem, 2vh, 1.6rem); }
.op-verdict { min-width: 0; }
.verdict {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.6rem, 1vw, 1.1rem);
  font-size: clamp(1.9rem, 0.8rem + 2.6vw, 3.2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.verdict .mk { flex: none; width: 0.3em; height: 0.3em; margin-top: 0.34em; --mk: var(--state); filter: drop-shadow(0 0 0.2em color-mix(in srgb, var(--mk) 75%, transparent)); }
.verdict { min-height: 1.1em; } /* the sentence's line is kept before the sentence arrives, so what is under it never moves */
.verdict-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 0.9rem; margin-top: 0.7rem; min-height: 2.3rem; }
.verdict-sub { flex: 0 1 auto; min-width: 0; color: var(--ink); font-size: 1.1rem; line-height: 1.4; }
.issues { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; min-width: 0; }
.issues:empty { display: none; }
.issues li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0.85rem 0.25rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--chip) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ground) 62%, var(--chip) 14%);
  font-size: 0.9375rem;
  font-weight: 500;
  --chip: var(--ember);
}
.issues li[data-s="warn"] { --chip: var(--amber); }
.chip-btn { padding: 0; background: none; border: 0; color: inherit; font: inherit; font-weight: inherit; text-align: left; cursor: pointer; }
.chip-btn:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* ---- Tabs --------------------------------------------------------------------------------------- */

.op-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 var(--gutter); border-bottom: 1px solid var(--line-3); }
.op-tabs { display: flex; gap: 0.3rem; overflow-x: auto; scrollbar-width: none; padding-block: 0.55rem; }
.op-tabs::-webkit-scrollbar { display: none; }
.op-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1.1rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  touch-action: manipulation;
  transition: transform 120ms var(--ease);
}
.op-tabs button:active { transform: scale(0.97); }
.op-tabs button:hover { color: var(--ink); border-color: var(--line-2); }
.op-tabs button[aria-selected="true"] { background: var(--blue); border-color: var(--blue); color: var(--on-blue); box-shadow: 0 6px 18px rgba(59, 100, 232, 0.3); }
.op-tabs .ico { margin-left: -0.2rem; }
.op-tabs .sm { display: none; }
.op-fresh { color: var(--ink-3); font-size: 0.8125rem; }
.op-fresh[data-s="warn"] { color: var(--amber); font-weight: 650; }
.op-fresh[data-s="warn"]::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.5em; background: currentColor; clip-path: polygon(50% 4%, 98% 94%, 2% 94%); }

.op-main { padding: 1.4rem var(--gutter) 3rem; }
.op-main:focus { outline: none; }
.op-panel { max-width: 104rem; }
.op-panel[hidden] { display: none; }

/* ---- Blocks and tables ------------------------------------------------------------------------- */

.op-block { margin-bottom: 1.4rem; padding: 1.2rem 1.3rem 1.3rem; background: var(--card-bg), var(--card-solid); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.op-block[hidden] { display: none; }
.op-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; margin-bottom: 0.6rem; }
.op-h h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; }
.op-sub { color: var(--ink-2); font-size: 0.9rem; }
.op-sub2 { color: var(--ink-3); font-size: 0.8125rem; font-weight: 400; }
.op-empty { color: var(--ink-2); padding: 1rem 0; }
.op-lead { max-width: 52rem; margin: 0.4rem 0 1rem; color: var(--ink-2); text-wrap: pretty; }
.op-tbl-wrap { overflow-x: auto; scrollbar-width: thin; margin-inline: -0.4rem; }
.op-tbl-wrap:has(> table > tbody:empty) { visibility: hidden; } /* a table's columns take their widths from its rows: its header is drawn with them, never before */
.op-table th {
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--line-3);
  color: var(--ink-3);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}
.op-table td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 0.9375rem; }
.op-table td:first-child, .op-table th:first-child { padding-left: 0.85rem; }
.op-table .c-state { width: 13rem; }
.op-table .c-site { width: 14rem; }
.op-table .c-rev { width: 14rem; }
.op-table .c-when { width: 13rem; }
.op-table .c-act { width: 1%; white-space: nowrap; }
.op-table .c-act .btn { margin-left: 0.3rem; min-height: 2.2rem; padding: 0 0.85rem; font-size: 0.875rem; }
.op-table .c-act .btn:first-child { margin-left: 0; }
.op-table.no-site .c-site { display: none; }
.op-row[data-s="bad"] td { background: var(--ember-wash); }
.op-row[data-s="warn"] td { background: var(--amber-wash); }
.op-row[data-s="bad"] td:first-child { box-shadow: inset 3px 0 0 var(--ember); }
.op-row[data-s="warn"] td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.op-row[data-s="bad"] .op-st, .op-row[data-s="bad"] b { color: var(--ember); }
.op-row[data-s="off"] td { color: var(--ink-3); }
.op-row[data-s="bad"] .op-sub2, .op-row[data-s="warn"] .op-sub2, .op-detail[data-s="bad"] .op-sub2 { color: var(--ink-2); }
.op-row[data-s="bad"] .op-sub2.op-bad { color: var(--ember); }
.op-detail td { padding: 0.9rem 1.2rem 1.3rem; background: var(--sheet-2); border-bottom: 1px solid var(--line-3); }
.op-detail[data-s="bad"] td { box-shadow: inset 3px 0 0 var(--ember); }
.op-group th { padding: 1.4rem 0.85rem 0.4rem; border-bottom: 1px solid var(--line-3); color: var(--ink); font-size: 1rem; font-weight: 600; text-align: left; }

.op-st { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.op-st .mk { width: 0.62em; height: 0.62em; }
.op-st-bad { color: var(--ember); font-weight: 700; }
.op-st-warn { color: var(--amber); font-weight: 650; }
.op-st-busy { color: var(--ink); font-weight: 600; }
.op-bad { color: var(--ember); }
.op-strong { font-weight: 650; }
code { font-family: var(--mono); font-size: 0.875em; }
.op-line { display: inline; }
.op-tag { display: inline-block; padding: 0 0.5em; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-2); font-size: 0.78rem; font-weight: 500; white-space: nowrap; }
.op-tag-bad { border-color: var(--ember); color: var(--ember); font-weight: 650; }
.op-row[data-s="bad"] .op-tag-bad { color: var(--ink); } /* ember on its own wash is 3.2:1 on a phone; the tag keeps its ember border */

.op-name {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.1rem 0;
  background: none;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: left;
}
.op-name::before {
  content: "";
  flex: none;
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: translateY(-0.1em) rotate(-45deg);
  transition: transform 0.12s ease;
}
.op-name[aria-expanded="true"]::before { transform: translateY(-0.2em) rotate(45deg); }
.op-name:hover span { text-decoration: underline; text-underline-offset: 0.25em; }
.op-more .ico { margin-left: -0.3rem; }
.op-more[aria-expanded="true"] { background: var(--sheet-hi); }
.c-what { min-width: 14rem; }
.c-what .op-sub2 { display: block; }

.op-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.35rem 1.4rem; margin-bottom: 0.9rem; font-size: 0.875rem; }
.op-facts dt { color: var(--ink-3); }
.op-facts dd { overflow-wrap: anywhere; }
.op-facts dd .op-tag { max-width: 100%; white-space: normal; } /* a long pay pill wraps inside a phone's 288 px pane */
.op-h3 { margin: 0.9rem 0 0.4rem; color: var(--ink-3); font-size: 0.8125rem; }
.op-lines {
  max-height: 18rem;
  overflow: auto;
  padding: 0.6rem 0.8rem;
  background: var(--sheet-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  font: 0.8125rem/1.55 var(--mono);
  color: var(--ink);
}
.op-lines div { white-space: pre-wrap; overflow-wrap: anywhere; }
.op-lines:focus-visible, .op-out:focus-visible, .op-log:focus-visible { outline-offset: 2px; }
.op-slot:empty { display: none; }
.op-slot { margin-bottom: 1rem; }

/* ---- A queued action ----------------------------------------------------------------------------- */

.op-act { padding: 0.8rem 1rem 1rem; background: var(--sheet-2); border: 1px solid var(--line-2); border-radius: 14px; }
.op-act[data-s="failed"] { border-color: color-mix(in srgb, var(--ember) 60%, transparent); background: color-mix(in srgb, var(--ground) 88%, var(--ember) 12%); }
.op-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.7rem; }
.op-steps li { display: flex; flex-direction: column; gap: 0.35rem; color: var(--ink-3); font-size: 0.8125rem; font-weight: 500; }
.op-steps i { display: block; height: 5px; border-radius: 3px; background: var(--track); }
.op-steps li[data-on="1"] { color: var(--ink); }
.op-steps li[data-on="1"] i { background: var(--blue-lit); }
.op-act[data-s="done"] .op-steps li[data-k="end"] i { background: var(--ink); }
.op-act[data-s="failed"] .op-steps li[data-k="end"] { color: var(--ember); font-weight: 700; }
.op-act[data-s="failed"] .op-steps li[data-k="end"] i { background: var(--ember); }
.op-act[data-s="failed"] .op-steps li[data-k="end"] span::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.45em; background: currentColor; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.op-act[data-s="running"] .op-steps li[data-k="running"] i { background: linear-gradient(90deg, var(--blue-lit) 55%, var(--track) 55%); }
.op-act-line { font-weight: 550; }
.op-act-conn { margin-top: 0.4rem; color: var(--amber); font-size: 0.875rem; font-weight: 600; }
.op-act-conn::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.5em; background: currentColor; clip-path: polygon(50% 4%, 98% 94%, 2% 94%); }
.op-out {
  max-height: 14rem;
  margin-top: 0.6rem;
  padding: 0.6rem 0.8rem;
  overflow: auto;
  background: var(--sheet-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  font: 0.8125rem/1.55 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---- Sites row, log bar ------------------------------------------------------------------------- */

.op-sites { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.op-sites[hidden] { display: none; }
.op-chip { min-height: 2.75rem; padding: 0 0.95rem; background: transparent; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink); font-size: 0.9375rem; font-weight: 400; touch-action: manipulation; }
.op-chip:hover { background: var(--sheet-hi); border-color: var(--blue-lit); }
.op-chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--on-blue); font-weight: 600; }
/* the only site: chosen already, nothing to press - blue ring on the raised sheet, a dot for "this one", no hover */
.op-chip.op-chip--fixed { display: inline-flex; align-items: center; gap: 0.55rem; background: var(--sheet-hi); border-color: var(--blue-lit); font-weight: 600; cursor: default; }
.op-chip--fixed::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--blue-lit); }

.op-logbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-bottom: 0.6rem; }
.op-sel { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink-2); font-size: 0.9rem; }
.op-sel select { min-height: 2.75rem; padding: 0 0.8rem; background: var(--sheet-2); border: 1px solid var(--line-2); border-radius: 14px; color: var(--ink); font: inherit; }
.op-find { flex: 0 1 15rem; min-width: 9rem; }
.op-find input { width: 100%; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--sheet-2); color: var(--ink); }
.op-find input::placeholder { color: var(--ink-3); }
.op-check { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ink-2); font-size: 0.9rem; cursor: pointer; }
.op-check input { accent-color: var(--blue); width: 1.1rem; height: 1.1rem; }
.op-meta { min-height: 1.4em; margin-bottom: 0.5rem; color: var(--ink-2); font-size: 0.875rem; }
.op-log {
  max-height: max(18rem, calc(100dvh - 24rem));
  overflow: auto;
  background: var(--sheet-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.5rem 0;
  font: 0.8125rem/1.6 var(--mono);
}
.op-log[hidden] { display: none; }
.op-ll { display: grid; grid-template-columns: 3.2rem 1.4rem minmax(0, 1fr); padding-right: 0.8rem; }
.op-ll .ln { padding-right: 0.7rem; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; user-select: none; }
.op-ll .mk { width: 0.62em; height: 0.62em; align-self: center; }
.op-ll .tx { white-space: pre-wrap; overflow-wrap: anywhere; }
.op-ll .rep { margin-left: 0.8em; padding: 0.05em 0.6em; border-radius: 999px; background: var(--sheet-hi); border: 1px solid var(--line-2); color: var(--ink); font: 600 0.8125rem/1.3 var(--font); white-space: nowrap; }
.op-log.nowrap .tx { white-space: pre; overflow-wrap: normal; }
.op-log.nowrap .op-ll { grid-template-columns: 3.2rem 1.4rem max-content; }
.op-ll[data-sev="fatal"] { background: var(--ember-wash); box-shadow: inset 3px 0 0 var(--ember); }
.op-nomatch { padding: 1rem 1.2rem; color: var(--ink-2); font: 0.9375rem var(--font); }
.op-state { padding: 1.5rem 0; }
.op-state[hidden] { display: none; }

/* ---- Databases ------------------------------------------------------------------------------------ */

.op-prog { margin-top: 0.4rem; font-size: 0.8125rem; color: var(--ink-2); white-space: normal; }
.op-prog[data-s="failed"] { color: var(--ember); font-weight: 600; }
.op-prog[data-s="failed"]::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.45em; background: currentColor; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.op-prog[data-s="handed"] { color: var(--ink); }
.op-prog[hidden] { display: none; }
.op-pbar { display: block; height: 5px; margin-top: 0.3rem; border-radius: 3px; background: var(--track); overflow: hidden; }
.op-pbar[hidden] { display: none; }
.op-pbar i { display: block; height: 100%; width: var(--p, 0%); background: var(--blue-lit); border-radius: 3px; transition: width 0.15s linear; }

/* ---- Services ----------------------------------------------------------------------------------------- */

.op-svcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1.4rem; margin-bottom: 1.4rem; }
.op-svc { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.3rem 1.4rem; background: var(--card-bg), var(--card-solid); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.op-svc[data-s="busy"] { border-color: var(--blue-lit); }
.op-svc[data-s="bad"] { border-color: color-mix(in srgb, var(--ember) 55%, transparent); }
.op-svc-h { display: flex; align-items: center; gap: 0.7rem; }
.op-svc-h h2 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; }
.op-svc-what { color: var(--ink-2); font-size: 0.9375rem; text-wrap: pretty; flex: 1; }
.op-svc-last { color: var(--ink-3); font-size: 0.8125rem; }
.op-svc-last .op-st { font-size: 0.8125rem; }
.op-svc-acts { display: flex; }

.cv { min-width: 0; }
.dlg-points { margin: 0.9rem 0 0; padding-left: 1.2rem; list-style: disc; color: var(--ink-2); font-size: 0.9375rem; }
.dlg-points li + li { margin-top: 0.3rem; }
.dlg-points[hidden] { display: none; }

/* ---- A phone: tables become cards ---------------------------------------------------------------------- */

@media (max-width: 899px) {
  .op-bar { flex-wrap: wrap; }
  .op-fresh { order: 2; padding: 0 0 0.6rem; flex-basis: 100%; }
}
@media (max-width: 760px) {
  .op-table, .op-table tbody, .op-table tr, .op-table td { display: block; }
  .op-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .op-table tr.op-row { padding: 0.8rem 0.2rem 0.6rem; border-bottom: 1px solid var(--line); }
  .op-table td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.5rem; padding: 0.15rem 0.6rem; border: 0; }
  .op-table td::before { content: attr(data-l); color: var(--ink-3); font-size: 0.8125rem; }
  .op-table td.r { text-align: left; }
  .op-table td.c-state { grid-template-columns: 1fr; padding-bottom: 0.3rem; }
  .op-table td.c-state::before, .op-table td.c-act::before { content: none; }
  .op-table td.c-act { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-top: 0.5rem; }
  /* two actions of one weight: both outlined and equally wide; an open log is shown by a stronger edge, not a fill that makes it the heavier one */
  .op-table .c-act .btn { margin: 0; flex: 1 1 0; justify-content: center; border-color: var(--line-2); color: var(--ink); }
  .op-table .c-act .btn:disabled { color: var(--ink-3); }
  .op-table .c-act .op-more[aria-expanded="true"] { background: none; border-color: var(--ink-2); }
  .op-table .c-site, .op-table .c-state, .op-table .c-rev, .op-table .c-when, .op-table .c-act { width: auto; }
  .op-table td:first-child { padding-left: 0.6rem; }
  .op-row[data-s="bad"] td, .op-row[data-s="warn"] td { background: none; }
  .op-row[data-s="bad"], .op-row[data-s="warn"] { border-radius: 0.6rem; }
  .op-row[data-s="bad"] { background: var(--ember-wash); box-shadow: inset 3px 0 0 var(--ember); }
  .op-row[data-s="warn"] { background: var(--amber-wash); box-shadow: inset 3px 0 0 var(--amber); }
  .op-row[data-s="bad"] td:first-child, .op-row[data-s="warn"] td:first-child { box-shadow: none; }
  .op-detail td { display: block; padding: 0.7rem 0.8rem 1rem; }
  .op-detail td::before { content: none; }
  .op-detail { display: block; }
  .op-group { display: block; }
  .op-group th { display: block; }
  .op-facts { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .op-facts dd { margin-bottom: 0.4rem; }
  .op-svcs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .verdict { font-size: 1.9rem; }
  .verdict-sub { font-size: 1rem; }
  .op-block { padding: 1rem 0.5rem 1.1rem; }
  .op-h { padding-inline: 0.5rem; }
  .op-head { padding-bottom: 0.9rem; }
  .op-bar { padding: 0; align-items: stretch; flex-wrap: wrap; }
  .op-tabs { flex: 1 1 100%; gap: 0; overflow: visible; padding-inline: 0.2rem; }
  .op-tabs button { position: relative; flex: 1 1 0; flex-direction: column; justify-content: center; gap: 0.2rem; min-width: 0; padding: 0.4rem 0.1rem; min-height: 3.6rem; border-radius: 16px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0; line-height: 1.15; }
  .op-tabs button[hidden] { display: none; }
  .op-tabs .ico { margin-left: 0; display: inline-block; }
  .op-tabs .lg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .op-tabs .sm { display: inline; }
  .op-fresh { padding: 0.5rem var(--gutter) 0.6rem; }
  .op-main { padding-top: 1rem; }
  .op-logbar { gap: 0.5rem; }
  .op-find { flex: 1 1 100%; max-width: none; }
}
@media (forced-colors: active) {
  .op-tabs button[aria-selected="true"] { outline: 2px solid Highlight; }
  .op-chip--fixed { outline: 2px solid Highlight; }
  .op-chip--fixed::before { background: Highlight; }
  .op-row[data-s="bad"] td:first-child, .op-ll[data-sev="fatal"] { outline: 2px solid Highlight; }
}

@media (max-width: 899px) {
  .chip-btn { position: relative; }
  .chip-btn::after { content: ""; position: absolute; inset: -0.7rem -0.5rem; }
  .op-name { min-height: 2.75rem; align-items: center; }
}