/* The reusable controls: buttons, segmented push-toggles, form fields, selects, links, inline code. Not a
   surface — the pieces every surface is assembled from, which is what a thumb-target or focus-ring pass has
   to touch and nothing else.

   EVERY CONTROL HERE IS SIZED BY A TOKEN, never by padding alone, and that is what makes the touch minimum a
   fact rather than an intention: `min-height:var(--control-h)` holds whatever the label, the font size or the
   breakpoint does to the box, where padding is a number a shorter label quietly undoes. The tokens and their
   sources are in tokens.css; the short version is 44px (Apple HIG) for the launch button and the view tabs,
   40px on a phone for everything else, and 32px from 1024px up where the input is a pointer. */
button.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-height:var(--control-h);
  border:1px solid var(--line); background:var(--panel); color:var(--fg);
  border-radius:var(--radius-sm); padding:0 var(--s-4); font-size:var(--t-ui); cursor:pointer;
  font-family:inherit; font-weight:550; white-space:nowrap;
  transition:border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease),
             transform var(--dur-1) var(--ease);
}
button.btn:hover { border-color:var(--faint); }
button.btn:disabled { opacity:.42; cursor:not-allowed; }
/* The press. A control that yields under the finger is the whole of the tactile feedback here — there is
   nothing else between the tap and the network — and 2% is small enough to read as pressure rather than as an
   animation. Disabled controls do not yield: a button that moves and does nothing is a lie. */
button.btn:not(:disabled):active { transform:scale(.98); }
/* The one click that spends the subscription, and the only filled control on the page. It keeps the full 44px
   hit target at every width, because its consequence does not get smaller on a desktop. */
button.btn.primary {
  background:var(--accent); border-color:transparent; color:#fff;
  min-height:var(--tap); padding:0 var(--s-5); font-weight:600;
}
button.btn.primary:hover { background:color-mix(in srgb,var(--accent) 88%,#000); border-color:transparent; }
button.btn.danger { color:var(--block); border-color:color-mix(in srgb,var(--block) 45%,var(--line)); }

.field { display:flex; flex-direction:column; gap:var(--s-1); margin-bottom:var(--s-3); min-width:0; }
.field label { font-size:var(--t-micro); color:var(--muted); font-weight:600; letter-spacing:.04em;
               text-transform:uppercase; }
.field input, .field select {
  min-height:var(--control-h); width:100%;
  font:var(--t-ui)/1.4 inherit; padding:0 var(--s-3); border:1px solid var(--line);
  border-radius:var(--radius-xs); background:var(--bg); color:var(--fg);
  transition:border-color var(--dur-1) var(--ease);
}
.field input:hover, .field select:hover { border-color:var(--faint); }

/* Per-account quota-ceiling box. Same skin as `.field input` — and expressed through the same tokens rather
   than through a copy of its literals, so a change to the control height or the input radius reaches this one
   too — narrowed to the width a percentage actually needs, with tabular figures like every other number on
   the page so a column of ceilings down the account list lines up on the decimal point.

   `--tap` and not `--control-h` for the minimum height: this box sits inline in a row an operator taps on a
   phone, next to a Save that spends nothing but is still a commitment, and 44px is Apple's HIG floor for a
   touch target. The width is fixed rather than fluid because the content is bounded — at most `100` plus four
   decimals — and a percentage box that stretched to the row would read as a text field. */
.ceilbox {
  min-height:var(--tap); width:5.5rem; flex:none;
  font:var(--t-ui)/1.4 inherit; padding:0 var(--s-3); border:1px solid var(--line);
  border-radius:var(--radius-xs); background:var(--bg); color:var(--fg);
  font-variant-numeric:tabular-nums;
  transition:border-color var(--dur-1) var(--ease);
}
.ceilbox:hover { border-color:var(--faint); }

/* A HARD-ceiling box wears the same danger colour as the Delete button, and its row label wears it in text.
   Soft and hard are the same control shape carrying the same unit on the same two windows, and only one of
   them destroys work that is already running: a row where the two are visually interchangeable is a row where
   the operator types the killing number into the harmless box, or the reverse, and nothing on screen argues.
   The colour is a hint, not the safeguard — the label text next to it says which is which in words. */
.ceilbox.hard { border-color:color-mix(in srgb,var(--block) 45%,var(--line)); }
.ceilrole { font-size:var(--t-meta); font-weight:650; color:var(--muted); }
.ceilrole.hard { color:var(--block); }

/* The spend-budget box: same skin, DELIBERATELY not .ceilbox. It holds an absolute amount in US dollars while
   every .ceilbox on the row holds a percentage, so it is wider (a budget has more digits than a percent) and
   carries its own class — a control that looked identical to its neighbours would invite "80" typed into it
   meaning 80%, which here is eighty dollars. The "$" is printed next to it in the row for the same reason. */
.budgetbox {
  min-height:var(--tap); width:7.5rem; flex:none;
  font:var(--t-ui)/1.4 inherit; padding:0 var(--s-3); border:1px solid var(--line);
  border-radius:var(--radius-xs); background:var(--bg); color:var(--fg);
  font-variant-numeric:tabular-nums;
  transition:border-color var(--dur-1) var(--ease);
}
.budgetbox:hover { border-color:var(--faint); }

.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); gap:var(--s-3); }
.formrow { display:flex; gap:var(--s-3); align-items:center; margin-top:var(--s-2); flex-wrap:wrap; }
.hint { color:var(--faint); font-size:var(--t-meta); }

/* The board's tick box. `--check` is 24px on a touch surface, which is exactly WCAG 2.2 SC 2.5.8's minimum
   target size — a floor rather than a preference, because an <input> is a replaced element whose hit area
   cannot be grown by padding without wrapping it in markup the harness pins by name. */
input[type=checkbox] { width:var(--check); height:var(--check); flex:none; margin:0;
                       accent-color:var(--accent); cursor:pointer; }
input[type=checkbox]:disabled { cursor:not-allowed; opacity:.4; }

a { color:inherit; text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }

/* The segmented toggle — a group of push buttons carrying `aria-pressed`, and NOT the tablist, which is a
   different control with a different contract (see shell.css). Its halves share one track: each is `flex:1`,
   so the pair fills whatever column the footer's grid hands it. At 390px that is the full width of the bar,
   which is what lets the labels stay at their reading size instead of being abbreviated to fit. */
.seg { display:inline-flex; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden;
       background:var(--panel); min-height:var(--control-h); }
.seg-btn { flex:1 1 0; min-width:0; border:none; background:transparent; color:var(--muted);
           padding:0 var(--s-3); font:550 var(--t-ui)/1.2 inherit; font-family:inherit; cursor:pointer;
           white-space:nowrap;
           transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.seg-btn + .seg-btn { border-left:1px solid var(--line); }
.seg-btn[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent); font-weight:600; }
.seg-btn:not([aria-pressed="true"]):hover { color:var(--fg); }
.foot-select { min-height:var(--control-h); font:var(--t-ui)/1.4 inherit; padding:0 var(--s-3);
               border:1px solid var(--line); border-radius:var(--radius-xs); background:var(--panel);
               color:var(--fg); cursor:pointer; max-width:100%;
               transition:border-color var(--dur-1) var(--ease); }
.foot-select:hover { border-color:var(--faint); }
code { background:var(--line-soft); padding:2px var(--s-2); border-radius:var(--radius-xs);
       font:12px/1 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--fg); }

/* The one thing in this file that MOVES, disarmed — and the position of this block is the rule rather than
   tidiness. `@media` adds no specificity, so a disarm declared above the rule it has to beat loses the
   cascade: it reads correct and disarms nothing. This project has paid for that once already (badges.css
   carries the same note over the same defect), so the block goes after every transform on the page's
   controls, and a moving control added below it has to move it down again. */
@media (prefers-reduced-motion: reduce) {
  button.btn { transition:border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
  button.btn:not(:disabled):active { transform:none; }
}


/* ---- runner credentials -------------------------------------------------------------------------------
   A rotation surface, and the sheet obeys the same rule the module does: there is no style here for a value,
   because no value ever reaches the DOM. What is styled is the answer to "is it set", "which source wins",
   and "will my rotation take effect before the next restart". */
.secret {
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  padding: var(--s-2);
  margin: var(--s-2) 0;
}
.secret-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.secret-head b { margin-right: var(--s-1); color: var(--fg); }
.secret-facts {
  margin: var(--s-1) 0 0;
  font-size: var(--t-meta);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.secret .formrow { margin-top: var(--s-2); gap: var(--s-2); }
.secret input { flex: 1 1 16ch; min-width: 0; }

/* The one-time reveal. Bordered and loud on purpose: it is the only moment a credential is on screen, and the
   operator has exactly one chance to copy it. */
.secret-reveal {
  margin-top: var(--s-2);
  padding: var(--s-2);
  border: 1px solid var(--limbo);
  border-radius: var(--radius-xs);
  background: var(--limbo-soft);
  display: grid;
  gap: var(--s-2);
}
.secret-reveal input {
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  width: 100%;
  user-select: all;
}