/* Forge — the J&M Artsteel hub design system (phase 1, 2026-10-10).
 *
 * Tokens as custom properties + generic .fg-* components. The command centre (/command/) is the
 * first page built on it; phase 2 (the hub page) reuses it, so nothing here is named after a page.
 *
 * Fonts: IBM Plex Sans / IBM Plex Mono when the page has loaded them (a <link> its script adds), else
 * the system stack below — every size and weight here reads fine in either.
 *
 * Contrast: every text/background pair these tokens are used for is >= 4.5:1 (WCAG AA), worst
 * case the bad-tone chip text on its own tint, 5.7:1 (checked with the WCAG formula over every pair).
 * Targets: anything you can press is at least 44 px tall (--fg-target).
 */

:root {
  color-scheme: dark;

  /* ground → surface → raised: the three layers */
  --fg-ground: #10151D;
  --fg-surface: #171E29;
  --fg-raised: #1E2734;
  --fg-head: #1B2330;            /* table header band */
  --fg-line: #263041;
  --fg-line-soft: #222B39;       /* row separators inside a card */
  --fg-line-strong: #33405A;     /* button outlines (text buttons: the text carries the contrast) */
  --fg-line-input: #6B7A94;      /* text-field outlines: 3.86:1 on surface, 4.2:1 on ground (WCAG 1.4.11 wants 3:1) */

  /* text */
  --fg-text: #E8EDF4;
  --fg-text-2: #C3CCD8;          /* body copy inside alerts */
  --fg-muted: #9AA6B8;

  /* brand */
  --fg-accent: #F0A04B;
  --fg-accent-hover: #FFC27D;
  --fg-on-accent: #1A1206;

  /* status tones: foreground, tinted background, border */
  --fg-ok: #3DD68C;   --fg-ok-bg: rgba(61, 214, 140, 0.10);   --fg-ok-bd: rgba(61, 214, 140, 0.32);
  --fg-warn: #F5C451; --fg-warn-bg: rgba(245, 196, 81, 0.10); --fg-warn-bd: rgba(245, 196, 81, 0.38);
  --fg-bad: #FF7A7A;  --fg-bad-bg: rgba(255, 122, 122, 0.10); --fg-bad-bd: rgba(255, 122, 122, 0.40);
  --fg-idle: #9AA6B8; --fg-idle-bg: rgba(154, 166, 184, 0.08); --fg-idle-bd: rgba(154, 166, 184, 0.28);

  /* type */
  --fg-font-sans: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --fg-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
                  "Liberation Mono", monospace;

  /* shape + rhythm */
  --fg-r-sm: 8px;
  --fg-r-md: 10px;
  --fg-r-lg: 12px;
  --fg-r-pill: 999px;
  --fg-target: 44px;
  --fg-gap: 20px;
}

/* ── base ─────────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* text-size-adjust and [hidden] reach only Forge pages / islands: the hub page links this file, and its agent
   panels must render exactly as they did without it (review R2, 2026-10-11) */
html:has(> body.fg-page) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.fg-page {
  margin: 0;
  min-height: 100vh;
  background: var(--fg-ground);
  color: var(--fg-text);
  font-family: var(--fg-font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* element defaults sit under :where() (no specificity) so any .fg-* class overrides them */
:where(.fg-page, .fg-scope) a { color: var(--fg-accent); }
:where(.fg-page, .fg-scope) a:hover { color: var(--fg-accent-hover); }
:where(.fg-page, .fg-scope) :is(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.fg-page, .fg-scope) :focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }
:where(.fg-page, .fg-scope) [hidden], [hidden]:where(.fg-page, .fg-scope) { display: none !important; }

.fg-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 56px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── small utilities ─────────────────────────────────────────────────────────────────────────── */
.fg-mono { font-family: var(--fg-font-mono); }
.fg-muted { color: var(--fg-muted); }
.fg-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.fg-icon { flex-shrink: 0; display: block; }
.fg-tone-ok { color: var(--fg-ok); }
.fg-tone-warn { color: var(--fg-warn); }
.fg-tone-bad { color: var(--fg-bad); }
.fg-tone-idle { color: var(--fg-idle); }

/* ── header + brand ──────────────────────────────────────────────────────────────────────────── */
.fg-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.fg-header__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.fg-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.fg-brand__mark {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--fg-r-md);
  background: var(--fg-accent);
  color: var(--fg-on-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fg-font-mono); font-weight: 600; font-size: 13px;
}
.fg-brand__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fg-brand__title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.fg-brand__sub { font-size: 13px; color: var(--fg-muted); }

/* ── section label ("Needs you · 2") ─────────────────────────────────────────────────────────── */
.fg-section { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fg-eyebrow {
  margin: 0;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-muted);
}

/* ── card ────────────────────────────────────────────────────────────────────────────────────── */
.fg-card {
  display: flex; flex-direction: column; gap: 16px;
  min-width: 0;
  padding: 20px;
  border-radius: var(--fg-r-lg);
  background: var(--fg-surface);
  border: 1px solid var(--fg-line);
}
.fg-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.fg-card__lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fg-card__title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.fg-card__sub { font-size: 13px; color: var(--fg-muted); }
.fg-icon-badge {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--fg-r-md);
  background: var(--fg-raised);
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-accent);
}

/* two columns that fold to one: main column wide, side column ~340 px */
.fg-split { display: flex; flex-wrap: wrap; gap: var(--fg-gap); align-items: flex-start; }
.fg-split__main { flex: 999 1 560px; min-width: 0; }
.fg-split__side { flex: 1 1 340px; min-width: 0; }

/* ── buttons + button-like links ─────────────────────────────────────────────────────────────── */
.fg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--fg-target);
  padding: 0 16px;
  border-radius: var(--fg-r-md);
  border: 1px solid var(--fg-line-strong);
  background: transparent;
  color: var(--fg-text);
  font-size: 14px; font-weight: 500; line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.fg-btn:hover { background: var(--fg-raised); border-color: var(--fg-muted); color: var(--fg-text); }
.fg-btn:disabled, .fg-btn[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.fg-btn:disabled:hover { background: transparent; border-color: var(--fg-line-strong); }
.fg-btn--raised { background: var(--fg-raised); }
.fg-btn--raised:hover { background: #26303F; }
.fg-btn--primary {
  background: var(--fg-accent); border-color: var(--fg-accent);
  color: var(--fg-on-accent); font-weight: 600;
}
.fg-btn--primary:hover { background: var(--fg-accent-hover); border-color: var(--fg-accent-hover); color: var(--fg-on-accent); }
.fg-btn--quiet { border-color: var(--fg-line); }
.fg-btn--icon { width: var(--fg-target); padding: 0; flex-shrink: 0; }
.fg-btn--block { display: flex; width: 100%; }
.fg-btn--row { display: flex; width: 100%; justify-content: space-between; min-height: 48px; font-size: 15px; text-align: left; }
.fg-btn__note { font-size: 12.5px; font-weight: 400; color: var(--fg-muted); }

/* a plain text link that is still a 44 px target */
.fg-link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--fg-target);
  font-size: 14px; font-weight: 500;
  text-decoration: none;
}
.fg-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── chips (status pills) + facts (key/value pills) ──────────────────────────────────────────── */
.fg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: var(--fg-r-pill);
  font-size: 12.5px; font-weight: 500; line-height: 1.4;
  white-space: nowrap;
  border: 1px solid var(--fg-idle-bd);
  background: var(--fg-idle-bg);
  color: var(--fg-idle);
}
.fg-chip--ok { color: var(--fg-ok); background: var(--fg-ok-bg); border-color: var(--fg-ok-bd); }
.fg-chip--warn { color: var(--fg-warn); background: var(--fg-warn-bg); border-color: var(--fg-warn-bd); }
.fg-chip--bad { color: var(--fg-bad); background: var(--fg-bad-bg); border-color: var(--fg-bad-bd); }
.fg-chip--idle { color: var(--fg-idle); background: var(--fg-idle-bg); border-color: var(--fg-idle-bd); }

.fg-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.fg-fact {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: var(--fg-r-sm);
  background: var(--fg-raised);
  border: 1px solid var(--fg-line);
  font-size: 13px;
  color: var(--fg-muted);
}
.fg-fact__k { color: var(--fg-muted); white-space: nowrap; }
.fg-fact__v { font-family: var(--fg-font-mono); color: var(--fg-text); overflow-wrap: anywhere; }
.fg-fact--ok .fg-fact__v { color: var(--fg-ok); }
.fg-fact--warn { border-color: var(--fg-warn-bd); }
.fg-fact--warn .fg-fact__v { color: var(--fg-warn); }
.fg-fact--bad { border-color: var(--fg-bad-bd); }
.fg-fact--bad .fg-fact__v { color: var(--fg-bad); }

/* ── alerts / banners ────────────────────────────────────────────────────────────────────────── */
.fg-alerts { display: flex; flex-wrap: wrap; gap: 12px; }
.fg-alert {
  flex: 1 1 380px; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px;
  padding: 16px 18px;
  border-radius: var(--fg-r-lg);
  border: 1px solid var(--fg-idle-bd);
  background: var(--fg-idle-bg);
}
.fg-alert--bad { background: var(--fg-bad-bg); border-color: var(--fg-bad-bd); }
.fg-alert--warn { background: var(--fg-warn-bg); border-color: var(--fg-warn-bd); }
.fg-alert--ok { background: rgba(61, 214, 140, 0.08); border-color: rgba(61, 214, 140, 0.30); align-items: center; }
.fg-alert__icon { margin-top: 1px; }
.fg-alert__body { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fg-alert__title { font-size: 15px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.fg-alert__text { font-size: 13.5px; line-height: 1.5; color: var(--fg-text-2); overflow-wrap: anywhere; }
.fg-alert__action { white-space: nowrap; }

/* ── vital-sign tiles ────────────────────────────────────────────────────────────────────────── */
.fg-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.fg-tile {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
  padding: 16px;
  border-radius: var(--fg-r-lg);
  background: var(--fg-surface);
  border: 1px solid var(--fg-line);
}
.fg-tile__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fg-tile__label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); }
.fg-tile__value {
  font-family: var(--fg-font-mono); font-size: 24px; font-weight: 500; letter-spacing: -0.01em;
  line-height: 1.25; color: var(--fg-text); overflow-wrap: anywhere;
}
.fg-tile--warn .fg-tile__value { color: var(--fg-warn); }
.fg-tile--bad .fg-tile__value { color: var(--fg-bad); }
.fg-tile__sub { font-size: 13px; line-height: 1.4; color: var(--fg-muted); overflow-wrap: anywhere; }

/* ── lists of rows (services, schedules) ─────────────────────────────────────────────────────── */
.fg-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.fg-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  min-height: var(--fg-target);
  padding: 4px 0;
  border-top: 1px solid var(--fg-line-soft);
}
.fg-row--tall { min-height: 52px; }
.fg-row__main { flex: 1 1 180px; min-width: 0; }
.fg-row__title { font-size: 14px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.fg-row__sub { font-size: 12.5px; line-height: 1.35; color: var(--fg-muted); overflow-wrap: anywhere; }
.fg-row__meta { font-family: var(--fg-font-mono); font-size: 12.5px; color: var(--fg-muted); }
.fg-row__when { font-family: var(--fg-font-mono); font-size: 13px; color: var(--fg-text-2); }
.fg-row__note { min-width: 72px; text-align: right; font-size: 13px; }

/* ── table ───────────────────────────────────────────────────────────────────────────────────── */
.fg-table-wrap { overflow-x: auto; border: 1px solid var(--fg-line); border-radius: var(--fg-r-md); }
.fg-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fg-table th {
  text-align: left; padding: 10px 14px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-muted); background: var(--fg-head);
}
.fg-table td { padding: 12px 14px; border-top: 1px solid var(--fg-line); vertical-align: top; }
.fg-table__strong { font-weight: 500; }
.fg-table__sub { font-size: 12.5px; color: var(--fg-muted); line-height: 1.45; }
.fg-table__mono { font-family: var(--fg-font-mono); font-size: 13px; color: var(--fg-text-2); white-space: nowrap; }

/* ── forms ───────────────────────────────────────────────────────────────────────────────────── */
.fg-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fg-label { font-size: 14px; font-weight: 500; }
.fg-input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border-radius: var(--fg-r-md);
  border: 1px solid var(--fg-line-input);
  background: var(--fg-ground);
  color: var(--fg-text);
  font-size: 16px;                    /* 16 px: iPhone Safari zooms the page on anything smaller */
}
.fg-input:focus { border-color: var(--fg-accent); outline: none; box-shadow: 0 0 0 3px rgba(240, 160, 75, 0.35); }

/* status line under a form or a button row; empty = takes no room */
.fg-msg { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--fg-text-2); overflow-wrap: anywhere; }
.fg-msg:empty { display: none; }
.fg-msg--ok { color: var(--fg-ok); }
.fg-msg--warn { color: var(--fg-warn); }
.fg-msg--bad { color: var(--fg-bad); }

.fg-hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--fg-muted); }
.fg-hint b, .fg-hint strong { color: var(--fg-text); font-weight: 600; }

/* ── disclosure (collapsible card) ───────────────────────────────────────────────────────────── */
.fg-details > summary { list-style: none; cursor: pointer; }
.fg-details > summary::-webkit-details-marker { display: none; }
.fg-details__chev { transition: transform 0.15s; }
.fg-details[open] .fg-details__chev { transform: rotate(180deg); }

/* ── sign-in ─────────────────────────────────────────────────────────────────────────────────── */
.fg-signin { display: flex; justify-content: center; padding: 6vh 0 0; }
.fg-signin__card { width: 100%; max-width: 420px; gap: 18px; }
.fg-signin__lead { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-muted); }

/* ── footer ──────────────────────────────────────────────────────────────────────────────────── */
.fg-footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px;
  padding-top: 8px;
  border-top: 1px solid var(--fg-line-soft);
  font-family: var(--fg-font-mono); font-size: 12px; color: var(--fg-muted);
}
/* underlined: in the footer a link is the same grey as the text around it, so the line is what marks it */
.fg-footer a { color: var(--fg-muted); text-decoration: underline; text-underline-offset: 3px; }
.fg-footer a:hover { color: var(--fg-accent-hover); }

/* ── motion ──────────────────────────────────────────────────────────────────────────────────── */
@keyframes fg-spin { to { transform: rotate(360deg); } }
.fg-spin { animation: fg-spin 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .fg-page *, .fg-page *::before, .fg-page *::after,
  .fg-scope *, .fg-scope *::before, .fg-scope *::after { transition: none !important; animation: none !important; }
}

/* ── phone (≤ 600 px) ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .fg-wrap { padding: 20px 16px 40px; gap: 20px; }
  .fg-brand { gap: 12px; }
  .fg-brand__mark { width: 40px; height: 40px; font-size: 12px; }
  .fg-brand__title { font-size: 19px; }
  .fg-section { gap: 10px; }
  .fg-card { padding: 16px; gap: 12px; }
  .fg-card__title { font-size: 17px; }
  .fg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fg-tile { padding: 14px; gap: 6px; }
  .fg-tile__label { font-size: 11.5px; }
  .fg-tile__value { font-size: 20px; }
  .fg-tile__sub { font-size: 12.5px; }
  .fg-alert { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; padding: 16px; }
  .fg-alert--ok { align-items: center; }
  .fg-alert__action { grid-column: 1 / -1; width: 100%; font-size: 15px; }
  .fg-alert__text { font-size: 14px; }
  .fg-footer { gap: 4px 14px; font-size: 11.5px; }
  .fg-header { flex-wrap: nowrap; gap: 12px; }
  .fg-header__tools { flex-wrap: nowrap; gap: 8px; flex-shrink: 0; }
  .fg-brand { flex: 1 1 auto; }
  .fg-facts { gap: 6px; }
  .fg-fact { font-size: 12px; padding: 5px 9px; gap: 6px; }
  .fg-fact .fg-icon { display: none; }
}

/* ══ phase 2 (2026-10-11): Forge inside a page that is not all Forge ══════════════════════════════
 * The hub page keeps its own styles for the agent panels; its header and dashboard are Forge.
 * .fg-scope marks such an island: the dark control scheme, Plex, the text colour, and the element
 * defaults .fg-page gives a whole page (the :where() rules above). Nothing here names a page.
 *
 * Contrast (WCAG formula, alpha tints composited over what they sit on; computed 2026-10-11, worst
 * first): bad on its tint over the bar 6.0:1, muted on raised 6.1:1, muted on the warn tint 6.1:1,
 * bad on the hover surface 6.3:1, muted on the hover surface 6.4:1, bad on surface 6.6:1, muted on
 * surface 6.8:1, muted on the bar 7.2:1; every other text pair is higher. Non-text: the search
 * outline 3.9:1, accent icons on raised 7.1:1 (3:1 needed).
 */
:root { --fg-bar: #131922; --fg-hover: #1B2330; }
.fg-scope {
  color-scheme: dark;
  font-family: var(--fg-font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-text);
  -webkit-font-smoothing: antialiased;
}
/* :has(> .fg-appbar): the ground only while the Forge header is on the page. When signed out the hub's
   password screen replaces the whole body (SteelAuth.showPendingScreen), the class stays behind, and
   the ground would frame that screen's gradient with a dark 20 px border (integrate 2026-10-11). */
body.fg-ground:has(> .fg-appbar) { background: var(--fg-ground); }
/* a container the page draws as a panel that should not look like one here; 6 px of room each side
   so a focus ring is never clipped by an overflow guard on it */
.fg-plain {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  max-width: none; margin: 0 -6px 24px; padding: 0 6px;
}

/* ── app bar: brand, search, status + settings; tool tabs (wide) and a tool strip (phone) ───────── */
/* --fg-bleed-x / --fg-bleed-top: the page's own body padding, set by the page, so the bar runs edge
   to edge; the top inset keeps it clear of a phone's status bar in an installed app */
.fg-appbar {
  margin: calc(-1 * var(--fg-bleed-top, 0px)) calc(-1 * var(--fg-bleed-x, 0px)) 24px;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--fg-bar);
  border-bottom: 1px solid var(--fg-line-soft);
}
.fg-appbar__inner {
  max-width: 1200px; margin: 0 auto; padding: 14px 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
}
.fg-appbar__brand {
  display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0;
  min-height: var(--fg-target); min-width: var(--fg-target);
  border-radius: var(--fg-r-md);
  color: var(--fg-text); text-decoration: none;
}
.fg-appbar__brand:hover { color: var(--fg-text); }
.fg-appbar__mark {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 9px;
  background: var(--fg-accent); color: var(--fg-on-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fg-font-mono); font-weight: 600; font-size: 11px; line-height: 1;
}
.fg-appbar__title { font-size: 17px; font-weight: 700; letter-spacing: -0.005em; white-space: nowrap; }
.fg-appbar__tools { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }

.fg-search {
  flex: 1 1 280px; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  min-height: var(--fg-target); margin: 0; padding: 0 8px 0 14px;
  border-radius: var(--fg-r-md);
  background: var(--fg-surface);
  border: 1px solid var(--fg-line-input);
}
.fg-search:focus-within { border-color: var(--fg-accent); box-shadow: 0 0 0 3px rgba(240, 160, 75, 0.35); }
.fg-search__icon { color: var(--fg-muted); }
.fg-search__input {
  flex: 1 1 auto; min-width: 0; height: var(--fg-target);
  margin: 0; padding: 0; border: 0; outline: none;
  background: transparent; color: var(--fg-text);
  font: inherit; font-size: 16px;               /* 16 px: iPhone Safari zooms the page on anything smaller */
  -webkit-appearance: none; appearance: none;
}
.fg-search__input::placeholder { color: var(--fg-muted); opacity: 1; }
.fg-search__input:focus-visible { outline: none; }     /* the field's own ring is on .fg-search */
.fg-kbd {
  flex-shrink: 0;
  padding: 1px 7px; border-radius: 6px; border: 1px solid var(--fg-line-strong);
  font-family: var(--fg-font-mono); font-size: 12px; line-height: 1.4; color: var(--fg-muted);
}

/* a slot that dresses whatever status element the page drops into it as a pill; the element keeps
   its own `online` / `offline` class (the page's script rewrites className) */
.fg-status-slot { display: flex; align-items: center; min-width: 0; }
.fg-status-slot > * {
  position: static; display: inline-flex; align-items: center; gap: 7px;
  min-height: 32px; padding: 4px 12px;
  border-radius: var(--fg-r-pill);
  border: 1px solid var(--fg-idle-bd); background: var(--fg-idle-bg); color: var(--fg-idle);
  font-size: 13px; font-weight: 500; line-height: 1.3; white-space: nowrap;
}
.fg-status-slot > .online { color: var(--fg-ok); background: var(--fg-ok-bg); border-color: var(--fg-ok-bd); }
.fg-status-slot > .offline { color: var(--fg-bad); background: var(--fg-bad-bg); border-color: var(--fg-bad-bd); }

/* the tabs wrap to a second row when the window is too narrow for one: a scroller with no visible bar
   hid the last tabs from a mouse between 769 and 1004 px (review V1, 2026-10-11) */
.fg-tabs {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 2px;
}
.fg-tab {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  min-height: var(--fg-target); padding: 0 12px;
  border-bottom: 2px solid transparent;
  color: var(--fg-muted); font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none;
}
.fg-tab:hover { color: var(--fg-text); }
.fg-tab.is-active { color: var(--fg-text); border-bottom-color: var(--fg-accent); }
.fg-tabs__sep { flex-shrink: 0; align-self: center; width: 1px; height: 18px; margin: 0 6px; background: var(--fg-line); }
.fg-mnav { display: none; }
.fg-mnav__btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--fg-target); padding: 0 14px;
  border-radius: var(--fg-r-pill);
  border: 1px solid var(--fg-line); background: var(--fg-surface);
  color: var(--fg-text-2); font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none;
}
.fg-mnav__btn .fg-icon { color: var(--fg-accent); }
.fg-mnav__btn:hover { color: var(--fg-text); }
.fg-mnav__btn.is-active { color: var(--fg-text); background: var(--fg-raised); border-color: var(--fg-accent); }
/* inside a scroller an outside ring would be cut off */
.fg-tab:focus-visible, .fg-mnav__btn:focus-visible { outline-offset: -3px; }
/* a button-like link to the view now open (Settings in the app bar): the accent the tabs use (review V2) */
.fg-btn[aria-current="page"], .fg-btn[aria-current="page"]:hover {
  border-color: var(--fg-accent); color: var(--fg-accent); background: var(--fg-raised);
}
/* on the home view the launcher is the navigation */
.fg-appbar.is-home .fg-tabs, .fg-appbar.is-home .fg-mnav { display: none; }

/* ── dashboard: greeting, Today strip, launcher, recent activity ───────────────────────────────── */
.fg-dash {
  max-width: 1200px; margin: 0 auto; padding: 4px 24px 32px;
  display: flex; flex-direction: column; gap: 32px;
}
.fg-dash.is-searching > :not(.fg-launcher):not(.fg-empty) { display: none; }
.fg-hello { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.fg-hello__title { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.fg-hello__date { margin: 0; font-size: 14px; color: var(--fg-muted); }

.fg-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.fg-stat {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 16px;
  border-radius: var(--fg-r-lg);
  background: var(--fg-surface); border: 1px solid var(--fg-line);
  color: var(--fg-text); text-decoration: none;
  transition: border-color 0.12s, background-color 0.12s;
}
.fg-stat:hover { color: var(--fg-text); border-color: var(--fg-line-strong); background: var(--fg-hover); }
.fg-stat__n { font-family: var(--fg-font-mono); font-size: 28px; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
.fg-stat--ok .fg-stat__n { color: var(--fg-ok); }
.fg-stat--warn .fg-stat__n { color: var(--fg-warn); }
.fg-stat--bad .fg-stat__n { color: var(--fg-bad); }
.fg-stat__what { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.fg-stat__sub { font-size: 12.5px; line-height: 1.4; color: var(--fg-muted); overflow-wrap: anywhere; }
.fg-stat__who { margin-top: auto; padding-top: 2px; font-size: 12.5px; color: var(--fg-muted); }
.fg-stat__lead { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.fg-stat__title { font-size: 14.5px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.fg-stat--alert.fg-stat--warn { background: var(--fg-warn-bg); border-color: var(--fg-warn-bd); }
.fg-stat--alert.fg-stat--bad { background: var(--fg-bad-bg); border-color: var(--fg-bad-bd); }
.fg-stat--alert.fg-stat--warn:hover { border-color: var(--fg-warn); }
.fg-stat--alert.fg-stat--bad:hover { border-color: var(--fg-bad); }
.fg-stat--warn .fg-stat__lead { color: var(--fg-warn); }
.fg-stat--bad .fg-stat__lead { color: var(--fg-bad); }

.fg-launcher { display: flex; flex-direction: column; gap: 32px; }
.fg-group { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fg-group__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--fg-line-soft);
}
.fg-group__title { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-text-2); }
.fg-group__blurb { margin: 0; font-size: 13px; color: var(--fg-muted); }
.fg-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.fg-tool {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "icon name name" "what what what" "state state key";
  align-items: center; gap: 12px; min-width: 0;
  padding: 18px;
  border-radius: var(--fg-r-lg);
  background: var(--fg-surface); border: 1px solid var(--fg-line);
  color: var(--fg-text); text-decoration: none;
  transition: border-color 0.12s, background-color 0.12s;
}
.fg-tool:hover { color: var(--fg-text); border-color: var(--fg-line-strong); background: var(--fg-hover); }
.fg-tool__icon { grid-area: icon; }
.fg-tool__name { grid-area: name; font-size: 17px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.fg-tool__what { grid-area: what; align-self: start; font-size: 14px; line-height: 1.5; color: var(--fg-text-2); }
.fg-tool__state { grid-area: state; display: inline-flex; align-items: center; gap: 6px; min-height: 18px; font-size: 12.5px; }
.fg-tool__key { grid-area: key; font-family: var(--fg-font-mono); font-size: 12px; color: var(--fg-muted); white-space: nowrap; }
.fg-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: currentColor; }

.fg-recent { gap: 8px; }
.fg-activity {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  min-height: 48px; padding: 6px 0;
  border-top: 1px solid var(--fg-line-soft);
  color: var(--fg-text); text-decoration: none;
}
a.fg-activity:hover { color: var(--fg-text); }
a.fg-activity:hover .fg-activity__what { color: var(--fg-text); text-decoration: underline; text-underline-offset: 3px; }
.fg-activity__icon { color: var(--fg-accent); }
.fg-activity__who { flex: 0 0 96px; font-size: 14px; font-weight: 600; }
.fg-activity__what { flex: 1 1 260px; min-width: 0; font-size: 14px; line-height: 1.45; color: var(--fg-text-2); overflow-wrap: anywhere; }
.fg-activity__when { font-family: var(--fg-font-mono); font-size: 13px; color: var(--fg-muted); white-space: nowrap; }
.fg-empty { margin: 0; padding: 12px 0 4px; font-size: 14px; color: var(--fg-muted); }
.fg-recent .fg-empty { border-top: 1px solid var(--fg-line-soft); }

/* touch screens: no keyboard hints */
@media (hover: none) {
  .fg-kbd, .fg-tool__key { display: none; }
}
/* tablet / phone (≤ 768 px): the tabs give way to the swipeable tool strip */
@media (max-width: 768px) {
  .fg-appbar__inner { padding: 12px 20px; gap: 12px; }
  .fg-tabs { display: none; }
  .fg-mnav {
    display: flex; gap: 8px;
    overflow-x: auto; padding: 0 20px 12px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .fg-mnav::-webkit-scrollbar { display: none; }
  .fg-appbar:not(.is-home) .fg-search { display: none; }
}
/* a narrow window on a computer (mouse or trackpad, no touch): the tabs, wrapped, instead of the swipe strip,
   which a mouse wheel cannot scroll sideways (review V1: chips past the edge were out of reach) */
@media (max-width: 768px) and (hover: hover) and (pointer: fine) {
  .fg-tabs { display: flex; padding: 0 20px; }
  .fg-mnav { display: none; }
}
/* phone (≤ 600 px) */
@media (max-width: 600px) {
  .fg-appbar__title { font-size: 16px; }
  .fg-search { order: 3; flex-basis: 100%; }
  .fg-dash { padding: 0 0 24px; gap: 24px; }
  .fg-hello__title { font-size: 22px; }
  .fg-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fg-stat { padding: 14px; }
  .fg-stat__n { font-size: 24px; }
  .fg-stat--alert { grid-column: 1 / -1; }
  .fg-launcher { gap: 24px; }
  .fg-tools { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fg-tool {
    grid-template-rows: auto auto;
    grid-template-areas: "icon name state" "icon what what";
    gap: 2px 12px; padding: 12px 14px;
  }
  .fg-tool__icon { align-self: start; }
  .fg-tool__name { font-size: 16px; }
  .fg-tool__what { font-size: 13.5px; line-height: 1.45; }
  .fg-tool__key { display: none; }
  .fg-recent { padding: 16px; }
  .fg-activity__when { order: 2; margin-left: auto; }
  .fg-activity__what { order: 3; flex-basis: 100%; }
}
/* narrow phones (≤ 380 px): the brand keeps its mark; its name stays for screen readers only, so the
   status pill and Settings share the first row with it instead of dropping to a row of their own */
@media (max-width: 380px) {
  .fg-appbar__title {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* ── hub sign-in screens (Forge phase 3a, 2026-10-12) ───────────────────────────────────────────── */
/* SteelAuth.showPendingScreen() replaces the hub page's whole <body> with one of these (the password
   screen, "Hub Access Unavailable", "Device Revoked"), and the page's inline login gate lays one over
   the page. Fixed to the viewport, so the page's own body padding and gradient never show around it;
   the card centres with margin:auto, so a short phone screen with the keyboard up scrolls instead of
   cutting off the top. The focus ring is a real outline (never outline:none), 2 px accent, 2 px off.
   Contrast (WCAG formula, computed 2026-10-12 with work/phase3a/build-1/tools/contrast.py, worst
   first): field border 3.86:1 on the card / 4.22:1 on its fill (3:1 needed), muted hint 6.79:1, error
   6.63:1, focus ring 7.84:1 on the card, button label 8.68:1 (11.71:1 hovered), warn lead 10.28:1,
   lead 10.32:1, text 14.23:1. */
.fg-login {
  position: fixed; inset: 0; z-index: 2147483600;
  display: flex; overflow-y: auto;
  padding: max(24px, env(safe-area-inset-top, 0px)) 16px max(24px, env(safe-area-inset-bottom, 0px));
  background: var(--fg-ground);
}
.fg-login__card {
  margin: auto; width: 100%; max-width: 400px;
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px 24px;
  border-radius: var(--fg-r-lg);
  background: var(--fg-surface);
  border: 1px solid var(--fg-line);
}
.fg-login__title { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--fg-text); }
.fg-login__lead { margin: 0; font-size: 15px; line-height: 1.5; color: var(--fg-text-2); }
.fg-login__lead--warn { color: var(--fg-warn); font-weight: 500; }
.fg-login__form { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 0; }
.fg-login__label { font-size: 14px; font-weight: 500; color: var(--fg-text); }
.fg-login__input {
  width: 100%; min-height: 48px; padding: 0 14px;
  border-radius: var(--fg-r-md);
  border: 1px solid var(--fg-line-input);
  background: var(--fg-ground); color: var(--fg-text);
  font-family: inherit; font-size: 16px;      /* 16 px: iPhone Safari zooms the page on anything smaller */
}
.fg-login__input[aria-invalid="true"] { border-color: var(--fg-bad); }
.fg-login__btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: var(--fg-target); padding: 0 16px;
  border-radius: var(--fg-r-md);
  border: 1px solid var(--fg-accent);
  background: var(--fg-accent); color: var(--fg-on-accent);
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  cursor: pointer;
}
.fg-login__btn:hover { background: var(--fg-accent-hover); border-color: var(--fg-accent-hover); color: var(--fg-on-accent); }
.fg-login__input:focus-visible, .fg-login__btn:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }
.fg-login__err { margin: 0; min-height: 20px; font-size: 14px; line-height: 1.45; color: var(--fg-bad); overflow-wrap: anywhere; }
.fg-login__hint { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--fg-muted); overflow-wrap: anywhere; }
.fg-login__id { font-family: var(--fg-font-mono); font-size: 13px; color: var(--fg-text); }
@media (max-width: 420px) {
  .fg-login__card { padding: 24px 18px; }
  .fg-login__title { font-size: 20px; }
}

/* ── toasts + hit targets (Forge phase 3a, 2026-10-12) ──────────────────────────────────────────── */
/* .fg-toast-host: a fixed stack at the bottom of the window for short-lived toasts. (Phase 3a's hub delete
   toast and its answer used it, and that answer could sit over the dashboard for 10 s; phase 3c, 2026-10-13,
   removed that flow, so no page uses the stack now.) .fg-toast--dock: the same card IN the page flow (the
   install prompt, added at the end
   of <body>), so it never covers anything. Buttons 44 px. .fg-hit: lifts a small icon button to a
   44 x 44 px target without touching the row's markup. Contrast (WCAG formula, computed 2026-10-12 with
   work/phase3a/build-2/tools/contrast_toast.py): title 12.80:1, sub 9.28:1, accent label 7.05:1
   (hover 9.51), primary label 8.68:1 (hover 11.71), button outline 3.47:1, card edge vs the page
   ground 4.22:1, focus ring 7.05:1 on the card / 8.57:1 on the ground. */
.fg-toast-host {
  position: fixed; z-index: 99990;
  left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: min(calc(100vw - 32px), 440px);
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.fg-toast {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 16px;
  border-radius: var(--fg-r-lg);
  background: var(--fg-raised);
  border: 1px solid var(--fg-line-input);
  color: var(--fg-text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  font-family: var(--fg-font-sans); font-size: 15px; line-height: 1.4;
  pointer-events: auto;
}
.fg-toast__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.fg-toast__title { font-weight: 600; color: var(--fg-text); }
.fg-toast__sub {
  font-size: 13px; color: var(--fg-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fg-toast__sub--wrap { white-space: normal; }
.fg-toast__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }
.fg-toast__btn {
  min-height: var(--fg-target); min-width: var(--fg-target);
  padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--fg-r-md);
  border: 1px solid var(--fg-line-input);
  background: transparent; color: var(--fg-accent);
  font: inherit; font-weight: 600; white-space: nowrap;
  cursor: pointer;
}
.fg-toast__btn:hover { color: var(--fg-accent-hover); border-color: var(--fg-accent); }
.fg-toast__btn--primary { background: var(--fg-accent); border-color: var(--fg-accent); color: var(--fg-on-accent); }
.fg-toast__btn--primary:hover { background: var(--fg-accent-hover); border-color: var(--fg-accent-hover); color: var(--fg-on-accent); }
.fg-toast__btn:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }
.fg-toast--dock {
  position: static;
  width: calc(100% - 32px); max-width: 560px;
  margin: 24px auto calc(24px + env(safe-area-inset-bottom, 0px));
  box-shadow: none;
}
@media (max-width: 480px) {
  .fg-toast--dock { flex-direction: column; align-items: stretch; padding: 14px 14px 12px; }
  .fg-toast--dock .fg-toast__actions { justify-content: stretch; }
  .fg-toast--dock .fg-toast__btn { flex: 1 1 0; }
}
/* !important: the hub page's panel overflow guards set `#frank *, #victor * { min-width: 0 }` (id specificity,
   artsteel-hub.html <style>), which would otherwise squeeze the target back to its glyph (measured 19 x 44) */
.fg-hit {
  min-width: var(--fg-target) !important; min-height: var(--fg-target) !important;
  display: inline-flex; align-items: center; justify-content: center;
}
/* fix-6 (2026-10-12) ─────────────────────────────────────────────────────────────────────────────────── */
/* The Forge focus ring on the archive row's 44 px control (.fg-hit; since phase 3c, 2026-10-13, the Nuke button)
   and its filter tabs (.fg-ring): both showed the browser's 1 px default (p3a-5 V9). 7.05:1 on the toast card,
   8.57:1 on the page ground (as .fg-toast__btn). */
.fg-hit:focus-visible, .fg-ring:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }
/* On a phone a 44 px row control squeezed each archive row's title to ~63 px and made rows up to 369 px tall
   (p3a-4a F2, p3a-5 V3). At <= 480 px the row's action group takes a line of its own under the title, and Frank's
   archive list is no longer a 400 px scroll box inside the page: it scrolls with the page. !important beats the
   rows' inline styles; wider screens are untouched. Phase 3c (2026-10-13, RV7-4): selected by the classes the hub
   page now puts on them (.fg-archive-actions on each row's action group, .fg-archive-list on the list), no longer
   through :has(.fg-hit) on any div, which reached outside the .fg- names. */
@media (max-width: 480px) {
  .fg-archive-actions { flex: 1 1 100% !important; justify-content: flex-end; }
  .fg-archive-list { max-height: none !important; overflow-y: visible !important; }
}

/* ── a device list + a small dialog (Forge phase 3c, 2026-10-13) ────────────────────────────────────── */
/* .fg-devices: a Forge surface inside a page panel that is not Forge (the hub's Settings › Signed-in devices),
   on its own ground, so each text pair below is a token pair: rows are .fg-row, the marker an .fg-chip, the
   buttons .fg-btn (44 px). .fg-dialog: a <dialog> opened with showModal() — the browser keeps the focus in it,
   Esc closes it, the page behind is inert; its password field reuses .fg-login__label / __input / __err.
   Contrast (WCAG formula, computed 2026-10-13 with work/phase3c/build-1/tools/contrast.py): text 14.23:1,
   lead 10.32:1, muted 6.79:1, the "this device" chip 7.38:1, error 6.63:1, primary label 8.68:1 — all on
   the surface; field border 3.86:1 (4.22:1 on its fill), focus ring 7.84:1, dialog edge 4.44:1 on the
   backdrop (3:1 needed for each). */
.fg-devices {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 10px; padding: 14px 16px 12px;
  border-radius: var(--fg-r-md);
  background: var(--fg-surface);
  border: 1px solid var(--fg-line);
}
.fg-devices__lead { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-text-2); }
.fg-devices__this, .fg-devices__count { margin: 0; font-size: 13px; line-height: 1.45; color: var(--fg-muted); overflow-wrap: anywhere; }
.fg-devices__this { font-family: var(--fg-font-mono); }
.fg-devices__status { margin: 0; font-size: 14px; line-height: 1.45; color: var(--fg-text); }
.fg-devices__status:empty { display: none; }
.fg-devices__row { padding: 10px 0; }
.fg-devices__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.fg-devices__sub { font-family: var(--fg-font-mono); }
.fg-devices__btn { flex: 0 0 auto; }
@media (max-width: 480px) {
  .fg-devices { padding: 12px 12px 10px; }
  .fg-devices__btn { flex: 1 1 100%; }
}
.fg-dialog {
  width: min(calc(100vw - 32px), 440px); max-width: none;
  max-height: calc(100vh - 32px); overflow: auto;
  margin: auto; padding: 0; border: 0;
  background: transparent; color: var(--fg-text);
}
.fg-dialog::backdrop { background: rgba(6, 9, 14, 0.78); }
.fg-dialog__card {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0; padding: 22px 20px 18px;
  border-radius: var(--fg-r-lg);
  background: var(--fg-surface);
  border: 1px solid var(--fg-line-input);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.fg-dialog__title { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--fg-text); overflow-wrap: anywhere; }
.fg-dialog__lead { margin: 0 0 4px; font-size: 14.5px; line-height: 1.5; color: var(--fg-text-2); overflow-wrap: anywhere; }
.fg-dialog .fg-login__label { margin: 0; }          /* a page-wide label rule adds a 5 px bottom margin */
.fg-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }
@media (max-width: 420px) {
  .fg-dialog__actions .fg-btn { flex: 1 1 0; }
}