/* ==========================================================================
   KR Consulting portal — Off-site backup status.
   Owner: BACKUP.  Consumes ONLY the tokens from tokens.css.

   Colour rules obeyed here:
     · --accent is a FILL, never text. Nothing in this file colours text amber;
       the "overdue" tone uses --warn, which is AA-safe as text in both themes.
     · Tone is never the only signal — every tone pairs with a glyph AND the
       words, so the panel still reads for a colour-blind user and on paper.
     · Headline and body text stay --text / --text-dim for maximum contrast;
       the tone lives in the glyph, the pill and the hairline.

   SPACING CONTRACT — read this before adding a padding.
     THERE IS NO PAGE GUTTER IN THIS FILE, and that is deliberate.

     app.js mounts this route inside its own `<div class="view-pad">`, which is
     where the gutter lives for every padded view (app.css, "PAGE PADDING
     CONTRACT"):

         padding-top:    var(--view-pad-t);
         padding-right:  max(var(--gutter), env(safe-area-inset-right));
         padding-bottom: 0;
         padding-left:   max(var(--gutter), env(safe-area-inset-left));

     That single rule is what makes the content's left edge identical on
     Backup, How-this-works and — via --fb-gutter-l/r, the same expression —
     the file browser. The bottom is 0 there because #view already carries
     `padding-bottom: calc(var(--sp-8) + env(safe-area-inset-bottom))`; this
     panel used to add a second one and double-counted the iPhone
     home-indicator inset on top of it.

     So: nothing below sets padding on .bk-view. If this panel ever needs to
     own its whole frame, set `pad: false` on the route in app.js — that is the
     supported opt-out, and it is what the file browser uses.
   ========================================================================== */

/* --------------------------------------------------------------------------
   View root. Layout only — the wrapper around it owns the gutter.
   -------------------------------------------------------------------------- */
.bk-view {
  min-width: 0;
}

.bk {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  width: 100%;
  /* Caps the measure on a 2560px monitor: past ~62rem the fact grid stops
     being a row of cards and becomes a stripe of far-apart numbers. */
  max-width: 62rem;
  min-width: 0;
  color: var(--text);
  font-family: var(--font-sans);
}

.bk *, .bk *::before, .bk *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.bk__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.bk__headtext { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.bk__title    { color: var(--text); }
.bk__subtitle { color: var(--text-mute); max-width: 52ch; }

.bk__refresh { flex: 0 0 auto; }
.bk__refresh.is-busy .bk__rico {
  animation: spin 700ms linear infinite;
  transform-origin: 50% 50%;
}

/* --------------------------------------------------------------------------
   Body.
   THIS RULE IS THE INTERNAL RHYTHM. paint() writes the verdict, the fact grid,
   the failure panel, the "what protects these files" block and the footer meta
   into this one element as sibling blocks. tokens.css zeroes the UA margin on
   every one of those tags (h2/h3/p/dl/pre), so without a gap here they stacked
   edge to edge — the verdict card touching the first fact card touching the
   explanation. The flex column is what separates them, and it is the only
   place that separation is stated.
   -------------------------------------------------------------------------- */
.bk__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Tones. One custom property carries the semantic colour through the block.
   -------------------------------------------------------------------------- */
.bk--ok   { --bk-tone: var(--ok);        --bk-tone-soft: var(--ok-soft); }
.bk--warn { --bk-tone: var(--warn);      --bk-tone-soft: var(--warn-soft); }
.bk--bad  { --bk-tone: var(--danger);    --bk-tone-soft: var(--danger-soft); }
.bk--na,
.bk--load { --bk-tone: var(--text-mute); --bk-tone-soft: var(--surface-2); }

/* --------------------------------------------------------------------------
   The verdict — the one-glance answer.
   -------------------------------------------------------------------------- */
.bk__verdict {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid color-mix(in srgb, var(--bk-tone) 38%, transparent);
  border-inline-start-width: 4px;
  border-radius: var(--radius-lg);
  background: var(--bk-tone-soft);
  box-shadow: var(--shadow-1);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.bk__glyph {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--bk-tone) 32%, transparent);
  color: var(--bk-tone);
}
.bk__glyph .ico { stroke-width: 1.7; }

.bk__vtext { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }

.bk__headline {
  font-size: clamp(18px, 1.1rem + .8vw, 23px);
  font-weight: 650;
  line-height: 1.22;
  letter-spacing: -.015em;
  color: var(--text);
  text-wrap: balance;
}

.bk__sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 62ch;
}

.bk__pill {
  flex: 0 0 auto;
  align-self: start;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--bk-tone) 45%, transparent);
  color: var(--bk-tone);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* --------------------------------------------------------------------------
   Facts. Each fact is its own bordered cell, NOT a hairline-gap grid: the
   number of facts varies with the state, and an incomplete final row of a
   hairline grid leaves a bare slab of container colour hanging in the layout.

   The gap matches .bk__protect below (--sp-3) so the two card grids on the
   page read as one rhythm rather than two.
   -------------------------------------------------------------------------- */
.bk__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: var(--sp-3);
  margin: 0;
}

.bk__fact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--hairline);
}

/* "Stored in" is a long, unbreakable string of proper nouns — give it room
   rather than letting it stack four lines deep in one narrow column. */
.bk__fact--wide { grid-column: span 2; }

.bk__flabel { display: block; }

.bk__fvalue {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.bk__fhint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Failure detail
   -------------------------------------------------------------------------- */
.bk__panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.bk__panel--bad { border-color: color-mix(in srgb, var(--danger) 40%, transparent); }

.bk__fh { display: block; }

/* "Reason" → log text → "What to do" → the sentence. The second heading needs
   more air above it than the flex gap gives, or it reads as a caption belonging
   to the log block above rather than as a new section. */
.bk__pre + .bk__fh { margin-top: var(--sp-3); }

.bk__pre {
  margin: 0;
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: auto;
  max-height: 14rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.bk__todo {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 66ch;
}

/* Honest note for the "cannot be read" case. */
.bk__note {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   "What protects these files"
   -------------------------------------------------------------------------- */
.bk__block { display: flex; flex-direction: column; gap: var(--sp-3); }
.bk__blockh { display: block; }

.bk__protect {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--sp-3);
}

.bk__card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 0 1px 0 var(--hairline);
}

.bk__cico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
}

.bk__ctext { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1-5); }

.bk__ch {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--text);
}

.bk__chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.bk__cp {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 58ch;
}

/* --------------------------------------------------------------------------
   Footer meta + actions
   The meta line is engine/task trivia, not part of the answer — a hairline and
   real space set it apart instead of leaving it hanging one flex gap below the
   last card, where it read as an orphaned caption.
   -------------------------------------------------------------------------- */
.bk__meta {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  color: var(--text-mute);
  overflow-wrap: anywhere;
}

.bk__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Skeleton (first load only)
   -------------------------------------------------------------------------- */
.bk__glyph--sk { border-color: var(--border); background: var(--surface-2); }

.bk__sk { display: block; height: 11px; border-radius: var(--radius-pill); }
.bk__sk--headline { height: 18px; width: min(20rem, 72%); }
.bk__sk--sub      { height: 11px; width: min(30rem, 94%); }
.bk__sk--label    { height: 9px;  width: 4.5rem; }
.bk__sk--value    { height: 13px; width: 7.5rem; }

/* --------------------------------------------------------------------------
   Compact badge — topbar / anywhere always-visible.
   -------------------------------------------------------------------------- */
.bk-badge {
  --bk-tone: var(--text-mute);
  --bk-tone-soft: var(--surface-2);

  display: inline-flex;
  align-items: center;
  gap: var(--sp-1-5);
  height: 28px;
  padding: 0 var(--sp-2-5);
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--bk-tone) 42%, transparent);
  background: var(--bk-tone-soft);
  color: var(--bk-tone);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  max-width: 100%;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.bk-badge--ok   { --bk-tone: var(--ok);        --bk-tone-soft: var(--ok-soft); }
.bk-badge--warn { --bk-tone: var(--warn);      --bk-tone-soft: var(--warn-soft); }
.bk-badge--bad  { --bk-tone: var(--danger);    --bk-tone-soft: var(--danger-soft); }
.bk-badge--na,
.bk-badge--load { --bk-tone: var(--text-mute); --bk-tone-soft: var(--surface-2); }

.bk-badge__label { overflow: hidden; text-overflow: ellipsis; }

button.bk-badge, a.bk-badge { cursor: pointer; transition: background var(--dur-fast) var(--ease); }
button.bk-badge:hover, a.bk-badge:hover {
  background: color-mix(in srgb, var(--bk-tone) 16%, var(--surface));
}

/* --------------------------------------------------------------------------
   Small screens (iPhone)
   NOTE: the page gutter is NOT touched here. It steps 24px → 16px at 640px,
   once, in tokens/app.css (`--gutter`), for every view at the same instant —
   this file adding its own breakpoint is exactly how Files and Backup used to
   disagree about where the left edge was.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .bk { gap: var(--sp-4); }
  .bk__body { gap: var(--sp-4); }
  .bk__head { align-items: center; }
  .bk__refresh { margin-inline-start: auto; }
}

@media (max-width: 560px) {
  .bk__verdict {
    grid-template-columns: auto 1fr;
    gap: var(--sp-3);
    padding: var(--sp-4);
  }
  .bk__glyph { width: 40px; height: 40px; }
  .bk__pill { grid-column: 1 / -1; justify-self: start; }
  .bk__facts { grid-template-columns: 1fr; }
  /* One column — a 2-column span would conjure an implicit second track. */
  .bk__fact--wide { grid-column: auto; }
  .bk__card { padding: var(--sp-3); }
  .bk__meta { padding-top: var(--sp-3); }
}

/* Below ~400px (iPhone SE portrait, 320px CSS px in the worst case) the card
   paddings are a real share of the line length. Trim the boxes, never the
   gutter — the gutter is what keeps the panel aligned with the other views. */
@media (max-width: 400px) {
  .bk__verdict { padding: var(--sp-3); gap: var(--sp-2-5); }
  .bk__glyph { width: 36px; height: 36px; }
  .bk__fact { padding: var(--sp-2-5) var(--sp-3); }
  .bk__panel { padding: var(--sp-3); }
  .bk__note { padding: var(--sp-2-5) var(--sp-3); }
  .bk__headline { font-size: 17px; }
  .bk__cico { width: 30px; height: 30px; }
}

/* Very narrow chrome: keep the badge to its glyph, keep the accessible name. */
@media (max-width: 420px) {
  .bk-badge { padding: 0 var(--sp-1-5); gap: 0; }
  .bk-badge__label { display: none; }
}

/* --------------------------------------------------------------------------
   Motion / contrast / print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bk__refresh.is-busy .bk__rico { animation: none; }
  .bk__sk, .bk__glyph--sk { animation: none; background-image: none; }
}

@media (forced-colors: active) {
  .bk__verdict, .bk__facts, .bk__fact, .bk__card, .bk__panel,
  .bk__note, .bk__pre, .bk__pill, .bk__chip, .bk-badge {
    border: 1px solid CanvasText;
  }
  .bk__facts { gap: var(--sp-2); }
  .bk__glyph { border: 1px solid CanvasText; }
}

@media print {
  /* The gutter belongs to .view-pad, so that is what has to collapse — a rule
     on .bk-view would print an unchanged 24px screen margin inside the paper
     margin. Scoped with :has() so this file never reaches another view's
     wrapper; where :has() is missing the selector is simply dropped and the
     page prints with the screen gutter, which is untidy but not broken.
     Backup is the one screen that actually gets printed — "show them this". */
  .view-pad:has(> .bk-view) { padding: 0; }
  .bk { max-width: none; gap: 12pt; }
  .bk__body { gap: 12pt; }
  .bk__refresh, .bk__actions { display: none !important; }
  .bk__verdict, .bk__card, .bk__fact, .bk__panel, .bk__note, .bk__pre {
    box-shadow: none;
    break-inside: avoid;
  }
  .bk__pre { max-height: none; overflow: visible; }
  .bk__protect { grid-template-columns: 1fr 1fr; }
}