/* field.css — the OWL field app's own styles, built on the OWL design tokens
   (owl/colors_and_type.css, vendored unchanged from the designer's handoff).

   Rules this file keeps:
   - Colours, type, spacing and radii come from the tokens, never literal values,
     so light and dark follow data-theme (set by js/theme.js before first paint).
   - Layout follows the width of the screen, never the device. A tablet in
     desktop mode reports itself as a desktop browser, so the only honest signal
     is width: phone under 700px, tablet 700–1099px, desktop from 1100px.
   - Touch first at every width. Targets are at least 44px and nothing depends
     on hover: the desktop layout will mostly be used with a finger.
   - No inline styles anywhere: the CSP forbids them. */

:root {
  --field-tab-h: 56px;
  --field-rail-w: 72px;
  --field-coral: var(--lm-brand-4, #f1582b);
  --field-coral-tint: #fff0eb;
  --field-safe-bottom: env(safe-area-inset-bottom, 0px);
  --field-safe-left: env(safe-area-inset-left, 0px);
  /* Spacing scale: 1 on phones, 1.1 on tablets, 1.2 on desktop (the design's --sp). */
  --sp: 1;
  /* Page gutter: 16px on phones, 24px from 700px (the design's --gx). */
  --gx: 16px;
  /* Shared component colours the tokens do not carry (the design's literals). */
  --field-seg-on: var(--sfColour-primary);
  --field-seg-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
  --field-pop-shadow: 0 16px 32px -12px rgba(16, 24, 40, 0.3), 0 2px 6px rgba(16, 24, 40, 0.08);
  --field-dialog-shadow: 0 24px 48px -12px rgba(16, 24, 40, 0.35), 0 2px 6px rgba(16, 24, 40, 0.08);
  --field-muted-ink: #818b98;
  --field-disabled-ink: #b7c0ca;
  --field-avatar: var(--lm-neutral-12, #25292e);
  --field-unread: #0969da;
  --field-crit-bg: #ffebe9;
  --field-crit-fg: #cf222e;
  --field-warn-bg: #fff1e5;
  --field-warn-fg: #bc4c00;
  --field-live-fg: var(--lm-green-6, #116329);
  --field-live-dot: #2da44e;
}

[data-theme="dark"] {
  --field-coral-tint: rgba(241, 88, 43, 0.16);
  --field-seg-on: #3d444d;
  --field-seg-shadow: inset 0 0 0 1px #656c76;
  --field-pop-shadow: 0 16px 32px -12px rgba(1, 4, 9, 0.7), 0 2px 6px rgba(1, 4, 9, 0.4);
  --field-dialog-shadow: 0 24px 48px -12px rgba(1, 4, 9, 0.8), 0 2px 6px rgba(1, 4, 9, 0.4);
  --field-muted-ink: #9198a1;
  --field-disabled-ink: #656c76;
  --field-avatar: rgba(255, 255, 255, 0.14);
  --field-unread: #4493f8;
  --field-crit-bg: rgba(248, 81, 73, 0.16);
  --field-crit-fg: #ff7b72;
  --field-warn-bg: rgba(219, 109, 40, 0.16);
  --field-warn-fg: #f0883e;
  --field-live-fg: #aceebb;
  --field-live-dot: #3fb950;
}

@media (min-width: 700px) {
  :root { --sp: 1.1; --gx: 24px; }
}

@media (min-width: 1100px) {
  :root { --sp: 1.2; }
}

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

/* Keep native controls in the selected app theme, even when the OS differs.
   Thin, unobtrusive scrollbars match the tablet panels without hiding desktop
   scrolling affordances. Horizontal chip rows override this with width: none. */
:root {
  color-scheme: light;
  scrollbar-color: var(--borderColour-primary) transparent;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

* {
  scrollbar-width: thin;
}

/* Fallback for browsers without the standard scrollbar properties. */
@supports not (scrollbar-width: thin) {
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--borderColour-primary);
    border-radius: 999px;
  }
  ::-webkit-scrollbar-corner { background: transparent; }
}

[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bgColour-primary);
  color: var(--textColour-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body-02);
  line-height: 1.43;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--textColour-brand, var(--field-coral));
}

button,
input {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--field-coral);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------- buttons */

.f-btn {
  min-height: 52px;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.f-btn:active {
  transform: scale(0.99);
}

.f-btn--primary {
  background: var(--field-coral);
  color: #fff;
}

.f-btn--primary:active {
  background: var(--buttonColour-primary-hover, #c4432b);
}

.f-btn--secondary {
  background: var(--sfColour-primary);
  border-color: var(--borderColour-primary);
  color: var(--textColour-primary);
}

.f-btn--quiet {
  background: var(--buttonColour-tertiary, var(--sfColour-hover));
  color: var(--textColour-primary);
  min-height: 44px;
}

.f-btn svg {
  flex: none;
  stroke: currentColor;
}

.f-btn--danger {
  background: var(--lm-red-5, #cf222e);
  color: #fff;
  min-height: 46px;
}

.f-btn--danger:active {
  background: var(--lm-red-6, #a40e26);
}

/* Compact sizes for buttons inside rows and panels; the hit area stays 44px
   through padding where the design draws them smaller. */
.f-btn--md {
  min-height: 44px;
  font-size: 14px;
}

.f-btn--sm {
  width: auto;
  min-height: 32px;
  padding: 0 12px;
  font-size: 13px;
  gap: 6px;
}

/* Hover backgrounds only where there is a real hover: on a touchscreen a
   tapped element would keep its hover state until the next tap elsewhere. */
@media (hover: hover) {
  .f-btn--secondary:hover,
  .f-btn--quiet:hover { background: var(--sfColour-hover); }
  .f-btn--primary:hover { background: var(--lm-brand-5, #d6431a); }
}

.f-mono {
  font-family: var(--font-mono-accent);
  font-variant-numeric: tabular-nums;
}

.f-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- sign-in */

.f-entry {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bgColour-primary);
}

.f-entry__body {
  flex: 1;
  padding: max(56px, 9vh) 24px 24px;
  display: flex;
  flex-direction: column;
}

.f-entry__card {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

@media (min-width: 700px) {
  .f-entry__body {
    justify-content: center;
  }
}

/* The theme button in the corner of the entry screens (sign-in, picker). */
.f-themetoggle {
  position: relative;
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--borderColour-primary);
  border-radius: 6px;
  background: var(--sfColour-primary);
  color: var(--textColour-primary);
  cursor: pointer;
}

.f-themetoggle::after { content: ""; position: absolute; inset: -4px; }
/* On sign-in it sits in the screen's corner, as the prototype draws it. */
.f-entry { position: relative; }
.f-entry .f-themetoggle { position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); right: 16px; z-index: 2; }
[data-theme="dark"] .f-themetoggle { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.08); }
.f-themetoggle > * { grid-area: 1 / 1; display: none; }
.f-themetoggle[data-mode="auto"] .f-themetoggle__auto,
.f-themetoggle[data-mode="light"] .f-themetoggle__light,
.f-themetoggle[data-mode="dark"] .f-themetoggle__dark { display: block; }
.f-themetoggle__light .f-icon,
.f-themetoggle__dark .f-icon { display: block; }

.f-entry__logo {
  height: 26px;
  align-self: flex-start;
}

[data-theme="dark"] .f-entry__logo {
  filter: invert(1);
}

.f-entry__title {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 34px;
  font-weight: 600;
  margin: 26px 0 0;
  text-wrap: balance;
}

.f-entry__blurb {
  margin: 5px 0 0;
  color: var(--textColour-secondary);
  line-height: 20px;
}

.f-entry__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

.f-label {
  font-size: var(--fs-overline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--textColour-tertiary);
}

.f-input {
  width: 100%;
  height: 48px;
  margin-top: 6px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
}

.f-input:focus {
  border-color: var(--field-coral);
  outline: none;
  box-shadow: 0 0 0 3px var(--field-coral-tint);
}

.f-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
}

.f-or::before,
.f-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--dividerColour-primary, var(--borderColour-primary));
}

.f-hint {
  font-size: var(--fs-caption);
  line-height: 17px;
  color: var(--textColour-tertiary);
  text-align: center;
  text-wrap: pretty;
  margin: 8px 0 0;
}

.f-alert {
  margin-top: 18px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--sfColour-danger, #ffebe9);
  color: var(--textColour-danger, #a40e26);
  font-size: var(--fs-body-03);
}

.f-trouble {
  margin-top: 16px;
  text-align: left;
  font-size: var(--fs-body-03);
}

.f-trouble summary {
  color: var(--textColour-brand, var(--field-coral));
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.f-trouble summary::-webkit-details-marker {
  display: none;
}

.f-trouble p {
  margin: 0;
  color: var(--textColour-secondary);
}

.f-test {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px dashed var(--borderColour-primary);
}

/* "Continue with SSO" pressed: the form gives way to a spinner, centred in the
   space left (js/field.js adds is-sso on submit). */
.f-entry__busy,
.f-sso {
  display: none;
}

.f-entry.is-sso .f-entry__idle,
.f-entry.is-sso .f-entry__form,
.f-entry.is-sso .f-trouble,
.f-entry.is-sso .f-test,
.f-entry.is-sso .f-alert {
  display: none;
}

.f-entry.is-sso .f-entry__busy {
  display: inline;
}

.f-entry.is-sso .f-entry__card {
  flex: 1 0 auto;
}

.f-entry.is-sso .f-sso {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
}

.f-sso__spin {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid var(--lm-neutral-4, #e0e6eb);
  border-top-color: var(--field-coral);
  animation: f-spin 900ms linear infinite;
}

[data-theme="dark"] .f-sso__spin {
  border-color: var(--dm-neutral-4, #3d444d);
  border-top-color: var(--field-coral);
}

.f-sso__title {
  font-size: 15px;
  font-weight: 500;
  margin-top: 18px;
}

.f-sso__sub {
  font-size: 13px;
  line-height: 19px;
  color: var(--textColour-secondary);
  margin-top: 5px;
  text-align: center;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

@keyframes f-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .f-sso__spin { animation-duration: 2.4s !important; }
}

.f-entry__foot {
  flex: none;
  padding: 14px 24px calc(14px + max(16px, var(--field-safe-bottom)));
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
}

.f-entry__foot img {
  height: 16px;
  opacity: 0.9;
}

.f-entry__endorse--dark,
[data-theme="dark"] .f-entry__endorse { display: none; }
[data-theme="dark"] .f-entry__endorse--dark { display: block; }

.f-version {
  font-size: var(--fs-overline);
  color: var(--textColour-tertiary);
  font-family: var(--font-mono-accent);
  font-variant-numeric: tabular-nums;
}

/* ================================================================ app shell
   The layers, bottom to top (the design's table; drawers must cover page
   sub-headers, the masthead's menus are never clipped, dims cover everything):
   rail 30 · band 31 · tab row 40 · drawers 50 · profile sheet 60 ·
   masthead row 65 · notifications and dialogs 66/67 · full-screen flows 70 ·
   alert takeover 72/73 · toasts 80. */
:root {
  --z-rail: 30;
  --z-band: 31;
  --z-tabrow: 40;
  --z-drawer: 50;
  --z-sheet: 60;
  --z-head: 65;
  --z-dialog: 66;
  --z-flow: 70;
  --z-takeover: 72;
  --z-toast: 80;
}

/* Phone: band, masthead, content, tab bar. Tablet and desktop: the tab bar
   becomes a rail down the left, under the full-width band and masthead. */
.f-shell {
  height: 100%;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "band" "head" "main" "nav";
}

@media (min-width: 700px) {
  .f-shell--loc {
    grid-template-columns: var(--field-rail-w) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "band band" "head head" "nav main";
  }
}

.f-main {
  grid-area: main;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* ---------------------------------------------------------------- connection band */
.f-bandslot {
  grid-area: band;
  position: relative;
  z-index: var(--z-band);
  min-width: 0;
}

.f-band {
  max-height: 240px;
  overflow: hidden;
  padding: 5px var(--gx);
  background: #0d1117;
  color: #f0f6fc;
  border-bottom: 1px solid #0d1117;
  font-size: 12px;
  line-height: 16px;
  transition: background 200ms ease, color 200ms ease, max-height 220ms ease, padding 220ms ease, border-width 220ms ease;
}

@media (min-width: 700px) {
  .f-band { padding-block: 8px; font-size: 13px; }
}

.f-band__row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}

@media (min-width: 700px) {
  .f-band__row { gap: 8px; }
}

.f-band__dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #3fb950;
  animation: owlLive 2.4s ease-in-out infinite;
}

@media (min-width: 700px) {
  .f-band__dot { width: 9px; height: 9px; }
}

.f-band__state { flex: none; font-weight: 600; }
.f-band__age { flex: none; opacity: 0.85; font-family: var(--font-mono-accent); font-variant-numeric: tabular-nums; }
.f-band__fill { flex: 1 1 0; min-width: 0; }
.f-band__summary { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; opacity: 0.75; font-size: 12px; }

@media (min-width: 700px) {
  .f-band__summary { font-size: 13px; opacity: 0.9; }
}

.f-band__retry {
  flex: none;
  margin: -8px -6px;
  padding: 8px 6px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.f-band__note { margin-top: 3px; font-size: 12px; line-height: 17px; opacity: 0.85; white-space: normal; }

/* Each state's copy is in the markup; the state class shows its own. */
.f-band [data-for] { display: none; }
.f-band--live [data-for~="live"],
.f-band--stale [data-for~="stale"],
.f-band--offline [data-for~="offline"] { display: revert; }
.f-band--sync [data-for] { display: none; }
.f-band--sync [data-for~="sync"] { display: revert; }

.f-band--stale,
.f-band--sync {
  background: var(--sfColour-warning01, #fff1e5);
  color: var(--lm-orange-6, #953800);
  border-bottom-color: var(--lm-orange-2, #ffb77c);
}

.f-band--stale .f-band__dot,
.f-band--sync .f-band__dot { background: var(--lm-orange-5, #bc4c00); animation: none; }

[data-theme="dark"] .f-band--stale,
[data-theme="dark"] .f-band--sync { background: rgba(188, 76, 0, 0.22); color: #ffd8b5; }

.f-band--offline {
  background: var(--lm-red-7, #82071e);
  color: #fff;
  border-bottom-color: var(--lm-red-8, #660018);
}

.f-band--offline .f-band__dot { background: #fff; animation: none; }

/* Hide on scroll (pages with data-autohide-band, js/field.js): only the
   Connected band folds; Stale and Offline always stay in view. */
.f-shell.is-chrome-hidden .f-band--live {
  max-height: 0;
  padding-block: 0;
  border-bottom-width: 0;
}

@keyframes owlLive { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes owlPulse { 0% { transform: scale(0.35); opacity: 0.7; } 100% { transform: scale(1.7); opacity: 0; } }

/* ---------------------------------------------------------------- masthead */
/* The masthead wrapper makes no stacking context: only its top bar row is
   raised (z 65), so its menus are never clipped while the phone's second row
   sits under dims and sheets, as the prototype layers them. */
.f-head {
  grid-area: head;
  position: relative;
  background: var(--sfColour-primary);
  color: var(--textColour-primary);
  border-bottom: 1px solid var(--borderColour-primary);
}

/* Dark: the top bar rows sit a step above the page (the prototype's dark bar). */
[data-theme="dark"] .f-head {
  background: #151b23;
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .f-head .f-topbtn { border-color: rgba(255, 255, 255, 0.22); }
[data-theme="dark"] .f-head .f-badge { border-color: #151b23; }
[data-theme="dark"] .f-ws[aria-expanded="true"],
[data-theme="dark"] .f-loc[aria-expanded="true"],
[data-theme="dark"] .f-loc2[aria-expanded="true"] { background: rgba(255, 255, 255, 0.1); }

.f-head__bar {
  position: relative;
  z-index: var(--z-head);
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 12px;
  padding-top: max(10px, env(safe-area-inset-top, 0px));
}

@media (min-width: 700px) {
  .f-head__bar { gap: 12px; padding-inline: var(--gx); }
}

.f-head__logo { height: 22px; flex: none; }
[data-theme="dark"] .f-head__logo { filter: invert(1); }

.f-head__title {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.f-head__fill { flex: 1 1 0; min-width: 0; }

/* The workspace chip and the location, side by side from 700px; stacked on a
   phone, where the location shows here only while the second row is folded. */
.f-head__id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 0 1 auto;
}

.f-ws {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: none;
  margin: -5px -7px -5px -5px;
  padding: 5px 7px 5px 5px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast, 120ms) ease;
}

.f-ws[aria-expanded="true"] { background: var(--sfColour-hover); }
@media (hover: hover) { .f-ws:hover { background: var(--sfColour-hover); } }

.f-ws__letter {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: var(--field-coral);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.f-ws__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.f-ws .f-icon { flex: none; opacity: 0.6; transition: transform 180ms ease; }
.f-ws[aria-expanded="true"] .f-icon { transform: rotate(180deg); }

.f-loc,
.f-loc2 {
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: background var(--duration-fast, 120ms) ease;
}

.f-loc[aria-expanded="true"],
.f-loc2[aria-expanded="true"] { background: var(--sfColour-hover); }
@media (hover: hover) { .f-loc:hover, .f-loc2:hover { background: var(--sfColour-hover); } }

.f-loc {
  flex: 0 1 auto;
  display: flex;
  margin: -2px 0 -2px -8px;
  padding: 2px 8px;
  min-height: 36px;
  align-items: center;
}

.f-loc__line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.f-loc__line > .f-icon { flex: none; opacity: 0.6; }
.f-loc__name { min-width: 0; font-size: 15px; line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-loc__meta { flex: none; font-size: 12px; color: var(--textColour-secondary); font-family: var(--font-mono-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.f-loc__status { display: none; }

/* A location's status dot; a live one pulses. */
.f-livedot { position: relative; width: 10px; height: 10px; flex: none; }
.f-livedot span { position: absolute; inset: 0; border-radius: 50%; background: var(--field-muted-ink); }
.f-livedot span + span { inset: 1px; }
.f-livedot--live span { background: var(--field-live-dot); }
.f-livedot--live span:first-child { animation: owlPulse 1.8s ease-out infinite; }
.f-livedot--live span + span { animation: owlLive 1.2s ease-in-out infinite; }
.f-livedot--soon span { background: var(--lm-orange-5, #bc4c00); }
.f-livedot--planned span { background: #4493f8; }

.f-head__row2 { display: none; }

@media (max-width: 699px) {
  .f-head { border-bottom-color: var(--borderColour-primary); }
  .f-head__bar { padding-bottom: 10px; }
  .f-head__id { flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 2px; }
  .f-head__bar > .f-head__chips { display: none; }

  .f-ws { margin: 0 -4px; padding: 0 4px; height: 36px; gap: 8px; max-width: 100%; font-weight: 600; }
  .f-ws__letter { width: 22px; height: 22px; border-radius: 4px; font-weight: 700; }
  .f-ws__name { max-width: none; }
  .f-ws .f-icon { width: 11px; height: 11px; opacity: 1; }
  .f-loc { display: none; }

  /* Row 2: the location's name and live status, with the alert chips. */
  .f-head__row2 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px 10px;
    max-height: 80px;
    overflow: hidden;
    transition: max-height 220ms ease, opacity 160ms ease, padding 220ms ease;
  }

  .f-loc2 { flex: 0 1 auto; margin: -4px -8px; padding: 4px 8px; }
  .f-loc2 .f-livedot { display: none; }
  .f-loc2 .f-loc__status .f-livedot { display: block; width: 9px; height: 9px; }
  .f-loc2 .f-loc__line { gap: 6px; }
  .f-loc2 .f-loc__name { font-family: var(--font-display); font-size: 19px; line-height: 24px; }
  .f-loc2 .f-loc__meta { display: none; }
  .f-loc2 .f-loc__line > .f-icon { width: 16px; height: 16px; }
  .f-loc2 .f-loc__status { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13px; line-height: 18px; min-width: 0; }
  .f-loc__st { flex: none; font-weight: 600; color: var(--textColour-secondary); }
  .f-loc__st--live { color: var(--field-live-fg); }
  .f-loc__sub { min-width: 0; color: var(--textColour-secondary); font-family: var(--font-mono-accent); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .f-head__chips--row2 { margin-left: auto; }

  /* Scrolled down: row 2 folds away and the location joins row 1 under a
     smaller workspace line. */
  .f-shell.is-head-small .f-head__row2 { max-height: 0; opacity: 0; padding-bottom: 0; }
  .f-shell.is-head-small .f-ws { height: 18px; gap: 5px; font-size: 11px; font-weight: 500; color: var(--textColour-secondary); border-radius: 4px; }
  .f-shell.is-head-small .f-ws__letter { width: 14px; height: 14px; font-size: 9px; border-radius: 3px; }
  .f-shell.is-head-small .f-loc { display: flex; margin: 0 0 0 -8px; min-height: 0; padding: 0 8px; max-width: 100%; }
  .f-shell.is-head-small .f-loc .f-loc__meta { display: none; }
  .f-shell.is-head-small .f-loc .f-livedot { width: 8px; height: 8px; }
}

/* The alert chips: Critical and Warning counts, grey at zero. */
.f-head__chips { display: flex; align-items: center; gap: 6px; flex: none; }

.f-alertchip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-pill, 999px);
  background: var(--sfColour-hover);
  color: var(--textColour-secondary);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
}

/* A 44px target around a 22px chip. */
.f-alertchip::after { content: ""; position: absolute; inset: -11px -3px; }
.f-alertchip__dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.f-alertchip__label { margin-left: -2px; }
.f-alertchip--critical { background: var(--field-crit-bg); color: var(--field-crit-fg); }
.f-alertchip--warning { background: var(--field-warn-bg); color: var(--field-warn-fg); }

/* Labels drop to counts when the row runs out of room. */
@media (min-width: 700px) and (max-width: 939px) {
  .f-head__bar .f-alertchip__label { display: none; }
}

@media (max-width: 479px) {
  .f-head__row2 .f-alertchip__label { display: none; }
}

/* Top-bar buttons: alerts and notifications, with their count badges. */
.f-topbtn {
  position: relative;
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--borderColour-primary);
  border-radius: 6px;
  background: transparent;
  color: var(--textColour-primary);
  cursor: pointer;
  transition: background var(--duration-fast, 120ms) ease;
}

.f-topbtn:active { background: var(--sfColour-hover); }
@media (hover: hover) { .f-topbtn:hover { background: var(--sfColour-hover); } }
.f-topbtn::after { content: ""; position: absolute; inset: -4px; }
.f-topbtn__slot { display: contents; }

.f-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 2px solid var(--sfColour-primary);
  border-radius: var(--radius-pill, 999px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-mono-accent);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  animation: f-pop 200ms ease both;
}

.f-badge--critical { background: var(--lm-red-5, #cf222e); }
.f-badge--warning { background: var(--lm-orange-5, #bc4c00); }
.f-badge--notes { background: var(--field-coral); }

.f-iconbtn {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--textColour-secondary);
  border-radius: var(--radius-pill, 999px);
  cursor: pointer;
}

.f-iconbtn:active { background: var(--sfColour-hover); }
.f-iconbtn__dot { position: absolute; top: 10px; right: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--field-unread); border: 2px solid var(--sfColour-primary); }

.f-avatar {
  width: 44px;
  height: 44px;
  flex: none;
  margin: -7px -7px -7px -5px;
  border: 0;
  padding: 0;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.f-avatar span {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  background: var(--field-avatar);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}

/* ---------------------------------------------------------------- menus and popovers
   Anchored under their trigger: js/field.js writes --pop-x / --pop-y from the
   button that opened them. They live in the masthead row, so they draw over
   drawers and sub-headers. */
.f-menu,
.f-pop {
  position: fixed;
  left: var(--pop-x, 12px);
  top: var(--pop-y, 64px);
  background: var(--sfColour-primary);
  border: 1px solid var(--borderColour-primary);
  color: var(--textColour-primary);
  animation: f-menu-in 160ms ease-out both;
}

.f-menu,
.f-pop { z-index: 5; }

.f-menu {
  width: 266px;
  padding: 6px;
  border-radius: 8px;
  box-shadow: 0 12px 28px -10px rgba(16, 24, 40, 0.28);
}

.f-menu__label {
  padding: 6px 8px 5px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--textColour-tertiary);
}

.f-menu__ws {
  display: flex;
  align-items: center;
  gap: calc(9px * var(--sp));
  min-height: 44px;
  padding: calc(8px * var(--sp));
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
}

.f-menu__ws.is-active { background: var(--sfColour-hover); }
.f-menu__ws[aria-disabled="true"] { cursor: default; }

.f-menu__tag {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: #dde3ea;
  color: var(--textColour-secondary);
  font-size: 12px;
  font-weight: 600;
}

[data-theme="dark"] .f-menu__tag { background: #2a313c; }
.f-menu__ws.is-active .f-menu__tag { background: var(--field-coral); color: #fff; }
.f-menu__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.f-menu__name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-menu__sub { margin-top: 1px; font-size: 11px; color: var(--textColour-tertiary); }
.f-menu__ws .f-icon--tick { flex: none; color: var(--textColour-brand); stroke-width: 2.4; }
.f-menu__sep { height: 1px; margin: 6px 4px; background: var(--dividerColour-primary); }
.f-menu__form { margin: 0; }

.f-menu__item {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: calc(10px * var(--sp));
  padding: calc(9px * var(--sp)) calc(8px * var(--sp));
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

@media (hover: hover) { .f-menu__item:hover, .f-menu__ws:not([aria-disabled]):hover { background: var(--sfColour-hover); } }
.f-menu__item .f-icon { flex: none; color: var(--iconColour-secondary, var(--textColour-secondary)); }
.f-menu__grow { flex: 1; min-width: 0; }
.f-menu__meta { font-size: 11px; color: var(--textColour-tertiary); font-family: var(--font-mono-accent); font-variant-numeric: tabular-nums; }

.f-pop {
  width: min(360px, calc(100vw - 16px));
  padding: 16px;
  border-radius: 12px;
  box-shadow: var(--field-pop-shadow);
}

.f-pop__head { display: flex; align-items: flex-start; gap: 12px; }
.f-pop__titles { flex: 1; min-width: 0; }
.f-pop__head .f-menu__label { padding: 0; }
.f-pop__title { margin-top: 2px; font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 600; text-wrap: pretty; }
.f-pop__btn { margin-top: 14px; min-height: 44px; font-size: 14px; }

/* Label/value rows with dividers (the location popover, detail panels). */
.f-rows { margin: 12px 0 0; }
.f-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--dividerColour-primary); }
.f-rows > div:last-child { border-bottom: 1px solid var(--dividerColour-primary); }
.f-rows dt { color: var(--textColour-secondary); font-size: 13px; }
.f-rows dd { margin: 0; text-align: right; font-size: 13px; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }

@keyframes f-menu-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------------------------------------------------------- navigation */
.f-nav {
  grid-area: nav;
  position: relative;
  z-index: var(--z-rail);
  display: flex;
  height: calc(var(--field-tab-h) + max(8px, var(--field-safe-bottom)));
  padding-bottom: max(8px, var(--field-safe-bottom));
  background: var(--sfColour-primary);
  border-top: 1px solid var(--borderColour-primary);
}

.f-nav__item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--field-muted-ink);
  text-decoration: none;
  font-size: 10px;
  font-weight: 500;
  transition: color 200ms ease, background 200ms ease;
}

.f-nav__item span { max-width: 100%; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-nav__item svg { stroke: currentColor; }
.f-nav__item[aria-current="page"] { color: var(--field-coral); }
.f-nav__item[aria-current="page"] .f-nav__fill { fill: currentColor; }
.f-nav__item[aria-current="page"] .f-nav__cut { stroke: var(--sfColour-primary); }
.f-nav__item[aria-current="page"] .f-nav__dot { fill: var(--sfColour-primary); }

.f-nav__item[aria-disabled="true"] {
  color: var(--field-disabled-ink);
  cursor: not-allowed;
}

@media (min-width: 700px) {
  .f-nav {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: auto;
    padding: 8px 8px max(8px, var(--field-safe-bottom)) max(8px, var(--field-safe-left));
    border-top: 0;
    border-right: 1px solid var(--borderColour-primary);
  }

  .f-nav__item {
    flex: none;
    width: 56px;
    height: 56px;
    gap: 5px;
    padding: 0 2px;
    border-radius: 8px;
    font-size: 11px;
  }

  .f-nav__item[aria-current="page"] { background: var(--field-coral-tint); }
  @media (hover: hover) { .f-nav__item:not([aria-current]):not([aria-disabled]):hover { background: var(--sfColour-hover); } }
}

/* ---------------------------------------------------------------- pages */
.f-page {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(20px * var(--sp)) calc(16px * var(--sp)) calc(32px * var(--sp));
  display: flex;
  flex-direction: column;
  gap: calc(14px * var(--sp));
}

.f-page__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; margin: 0; }
.f-page__blurb { margin: 0; color: var(--textColour-secondary); }

.f-search { display: flex; gap: 8px; }
.f-search .f-input { margin: 0; flex: 1; min-width: 0; }
.f-search .f-chip { flex: none; }

/* A filter chip (filterChip): white with a border, coral when pressed. */
.f-chip {
  position: relative;
  min-height: 36px;
  padding: 0 calc(14px * var(--sp));
  border-radius: var(--radius-pill);
  border: 1px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
  color: var(--textColour-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.f-chip::after { content: ""; position: absolute; inset: -4px 0; }
@media (hover: hover) { .f-chip:hover { background: var(--sfColour-hover); } }
.f-chip[aria-pressed="true"] { background: var(--field-coral); border-color: transparent; color: #fff; }
.f-chip[aria-disabled="true"] { opacity: 0.55; }
.f-chip__count { font-size: 12px; font-family: var(--font-mono-accent); font-variant-numeric: tabular-nums; color: var(--textColour-tertiary); }
.f-chip[aria-pressed="true"] .f-chip__count { color: rgba(255, 255, 255, 0.8); }

.f-empty {
  margin-top: calc(24px * var(--sp));
  padding: calc(28px * var(--sp)) 20px;
  border: 1px dashed var(--borderColour-primary);
  border-radius: var(--radius-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.f-empty svg { stroke: var(--textColour-tertiary); margin-bottom: 6px; }
.f-empty h2 { margin: 0; font-size: var(--fs-h5); font-weight: 600; }
.f-empty p { margin: 0; max-width: 44ch; color: var(--textColour-secondary); text-wrap: pretty; }

/* ---------------------------------------------------------------- segmented control
   The design's segmented control: a grey track, the chosen option raised.
   Buttons (aria-pressed) or links (aria-current); counts in
   f-segmented__count. Used by the tab row, the alerts tabs, the theme and
   language switches, and segControl. */
.f-segmented {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 8px;
  background: var(--sfColour-hover);
  min-width: 0;
}

.f-segmented > button,
.f-segmented > a,
.f-segmented__tab,
.f-segmented form button {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--textColour-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6px * var(--sp));
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}

.f-segmented [aria-pressed="true"],
.f-segmented [aria-current="page"],
.f-segmented [aria-selected="true"] {
  background: var(--field-seg-on);
  color: var(--textColour-primary);
  box-shadow: var(--field-seg-shadow);
}

.f-segmented form { flex: 1; display: flex; margin: 0; }
.f-segmented form button { width: 100%; }
.f-segmented__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.f-segmented__count { flex: none; font-size: 11px; color: var(--textColour-tertiary); font-family: var(--font-mono-accent); font-variant-numeric: tabular-nums; }
.f-segmented__dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.f-segmented__tab--critical .f-segmented__dot { background: var(--field-crit-fg); }
.f-segmented__tab--warning .f-segmented__dot { background: var(--field-warn-fg); }
.f-segmented__code { font-size: 11px; font-family: var(--font-mono-accent); opacity: 0.7; }

.f-segmented--lang { gap: 6px; }
.f-segmented--lang form button { min-height: 40px; font-size: 14px; gap: calc(7px * var(--sp)); border: 1px solid transparent; }
.f-segmented--lang form button[aria-pressed="true"] { box-shadow: none; border-color: var(--borderColour-primary); background: var(--sfColour-primary); }

.f-segmented--icons { flex: none; gap: 2px; padding: 2px; border-radius: 7px; }
.f-segmented--icons > button { flex: none; width: 40px; min-height: 30px; padding: 0; border-radius: 5px; }
.f-segmented--icons > button[aria-pressed="true"] { background: var(--sfColour-primary); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12); }

/* ---------------------------------------------------------------- tab row */
.f-tabs {
  position: sticky;
  top: 0;
  z-index: var(--z-tabrow);
  display: flex;
  align-items: center;
  gap: 12px;
  max-height: 120px;
  padding: 12px var(--gx);
  background: var(--sfColour-primary);
  border-bottom: 1px solid var(--borderColour-primary);
  transition: max-height 220ms ease, padding 220ms ease, opacity 160ms ease, border-width 220ms ease;
}

.f-tabs__title { display: none; }

/* A page with one view (pageTitle): its title and count, on every width. */
.f-tabs--solo { gap: 8px; }
.f-tabs--solo .f-tabs__title {
  display: block;
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.f-tabs--solo .f-tabs__count { font-size: 12px; }

.f-tabs__group {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 8px;
  background: var(--sfColour-hover);
}

.f-tabs__item {
  flex: 1 1 0;
  min-width: 0;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6px * var(--sp));
  background: transparent;
  color: var(--textColour-secondary);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}

.f-tabs__item[aria-current="page"],
.f-tabs__morebtn.is-current {
  background: var(--field-seg-on);
  color: var(--textColour-primary);
  box-shadow: var(--field-seg-shadow);
}

.f-tabs__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.f-tabs__count { flex: none; font-size: 11px; color: var(--textColour-tertiary); font-family: var(--font-mono-accent); font-variant-numeric: tabular-nums; }
.f-tabs__item[hidden] { display: none; }

.f-tabs__more { position: relative; flex: 1 1 0; min-width: 0; display: flex; }
.f-tabs__morebtn { width: 100%; gap: 4px; padding: 0 10px; }
.f-tabs__morebtn .f-icon { flex: none; stroke-width: 2.2; }

.f-tabs__menu {
  position: absolute;
  top: 40px;
  right: 0;
  z-index: 9;
  min-width: 220px;
  padding: 4px;
  border-radius: 8px;
  background: var(--sfColour-primary);
  border: 1px solid var(--borderColour-primary);
  box-shadow: 0 12px 28px -10px rgba(16, 24, 40, 0.3), 0 2px 6px rgba(16, 24, 40, 0.08);
  animation: f-menu-in 160ms ease-out both;
}

.f-tabs__menuitem {
  min-height: 44px;
  padding: 0 calc(12px * var(--sp));
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: calc(10px * var(--sp));
  color: var(--textColour-primary);
  font-size: 14px;
  text-decoration: none;
}

@media (hover: hover) { .f-tabs__menuitem:hover { background: var(--sfColour-hover); } }
.f-tabs__menuitem[hidden] { display: none; }
.f-tabs__menulabel { flex: 1; min-width: 0; white-space: nowrap; }
.f-tabs__menuitem .f-tabs__count { font-size: 12px; font-family: inherit; }
.f-tabs__menuitem .f-icon { flex: none; visibility: hidden; color: var(--field-coral); stroke-width: 2.4; }
.f-tabs__menuitem[aria-current="page"] { font-weight: 600; }
.f-tabs__menuitem[aria-current="page"] .f-icon { visibility: visible; }

@media (min-width: 700px) {
  .f-tabs { gap: 16px; }
  .f-tabs--titled .f-tabs__title {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .f-tabs--titled .f-tabs__group { flex: 0 0 auto; }
  .f-tabs--titled .f-tabs__item { flex: 1 0 auto; }
}

/* Hide on scroll, with the band (pages with data-autohide-band). */
.f-shell.is-chrome-hidden [data-autohide-band] .f-tabs,
.f-shell.is-chrome-hidden .f-tabs[data-autohide-band] {
  max-height: 0;
  padding-block: 0;
  opacity: 0;
  border-bottom-width: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ---------------------------------------------------------------- overlay slots */
.f-slot:empty { display: none; }

/* One panel replacing another in an open slot keeps still (js/field.js sets
   data-swapped): the entry animations below are for opening. */
.f-slot[data-swapped] > *,
.f-slot[data-swapped] > * > * { animation: none; }

/* A drawer: full screen under the masthead on phones, a right-hand panel from
   700px; it opens directly below the masthead rows (--field-drawer-top). */
.f-drawer {
  position: fixed;
  z-index: var(--z-drawer);
  inset: var(--field-drawer-top, 0px) 0 0 0;
  display: flex;
  flex-direction: column;
  background: var(--sfColour-primary);
  animation: f-slide-up 220ms var(--ease-standard, ease) both;
  overflow: hidden;
}

@media (min-width: 700px) {
  .f-drawer {
    inset: var(--field-drawer-top, 0px) 0 0 auto;
    width: min(460px, 92%);
    border-left: 1px solid var(--borderColour-primary);
    box-shadow: -8px 0 24px rgba(1, 4, 9, 0.08);
    animation-name: f-slide-in;
    transition: width 180ms ease;
  }
  .f-drawer.is-expanded { width: calc(100% - var(--field-rail-w)); }
}

/* Close and Expand float top-right; the header starts at the top edge and
   keeps clear of them. */
.f-drawer__controls { position: absolute; top: 8px; right: 8px; z-index: 4; display: flex; gap: 2px; }
.f-drawer__controls .f-iconbtn { width: 40px; height: 40px; border-radius: 8px; color: var(--textColour-secondary); }
@media (hover: hover) { .f-drawer__controls .f-iconbtn:hover { background: var(--sfColour-hover); } }
.f-drawer__controls .f-icon--close { width: 20px; height: 20px; }
.f-drawer__expand { display: none; }
@media (min-width: 700px) { .f-drawer__expand { display: grid; } }
.f-drawer.is-expanded .f-drawer__expand { color: var(--textColour-primary); background: var(--sfColour-hover); }

.f-drawer__head { padding: 14px 100px 10px var(--gx); }
.f-drawer__head h2 { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 600; }
.f-drawer__tabs { position: sticky; top: 0; z-index: 1; display: flex; gap: 4px; padding: 8px var(--gx); border-block: 1px solid var(--borderColour-primary); background: var(--sfColour-primary); }
.f-drawer__body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px var(--gx); }
.f-drawer__foot { display: flex; gap: 8px; padding: 12px var(--gx) max(12px, var(--field-safe-bottom)); border-top: 1px solid var(--borderColour-primary); background: var(--sfColour-primary); }
.f-drawer__foot .f-btn { flex: 1; }

/* A dialog: full screen on phones, centred over a dim from 700px. */
.f-modal { position: fixed; inset: 0; z-index: var(--z-dialog); display: grid; place-items: center; }
.f-modal__dim { position: absolute; inset: 0; border: 0; padding: 0; background: rgba(1, 4, 9, 0.45); animation: f-fade 200ms ease both; }
.f-modal__panel { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--sfColour-primary); overflow: hidden; }

@media (min-width: 700px) {
  .f-modal__panel {
    width: min(520px, calc(100% - 48px));
    height: auto;
    max-height: calc(100% - 48px);
    border-radius: 12px;
    box-shadow: var(--field-dialog-shadow);
    animation: f-pop 200ms ease both;
  }
}

.f-modal__head { padding: 20px 20px 8px; }
.f-modal__head h2 { margin: 0; font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 600; }
.f-modal__body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 20px 16px; }
.f-modal__foot { display: flex; gap: 8px; padding: 12px 20px max(16px, var(--field-safe-bottom)); border-top: 1px solid var(--borderColour-primary); }
.f-modal__foot .f-btn { flex: 1; }

/* A full-screen flow. */
.f-flow { position: fixed; inset: 0; z-index: var(--z-flow); display: flex; flex-direction: column; background: var(--sfColour-primary); animation: f-slide-up 220ms ease both; }
.f-flow__head { display: flex; align-items: center; gap: 8px; padding: max(8px, env(safe-area-inset-top, 0px)) 8px 8px; border-bottom: 1px solid var(--borderColour-primary); }
.f-flow__body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px var(--gx); }
.f-flow__foot { display: flex; gap: 8px; padding: 12px var(--gx) max(12px, var(--field-safe-bottom)); border-top: 1px solid var(--borderColour-primary); }
.f-flow__foot .f-btn { flex: 1; }

/* A bordered 40px close button (alerts, notifications). */
.f-closebtn {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--borderColour-primary);
  border-radius: 6px;
  background: transparent;
  color: var(--iconColour-primary, var(--textColour-primary));
  cursor: pointer;
}

@media (hover: hover) { .f-closebtn:hover { background: var(--sfColour-hover); } }
.f-closebtn::after { content: ""; position: absolute; inset: -2px; }

@keyframes f-slide-up { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes f-slide-in { from { transform: translateX(24px); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes f-pop { from { transform: scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------------------------------------------------------- profile sheet
   A bottom sheet on phones (under the masthead row, which stays in view);
   from 700px a panel under the avatar with no dim. */
.f-sheet { position: fixed; inset: 0; z-index: var(--z-sheet); }

.f-sheet__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  animation: f-fade var(--duration-normal) var(--ease-standard);
}

.f-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(82%, calc(100% - var(--field-drawer-top, 0px) - 8px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 16px calc(26px + var(--field-safe-bottom));
  border-radius: 12px 12px 0 0;
  background: var(--sfColour-primary);
  box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.06);
  animation: f-sheet-up 200ms ease-out;
}

.f-sheet__grip { display: flex; justify-content: center; padding: 14px 0 16px; }
.f-sheet__grip::before { content: ""; width: 36px; height: 4px; border-radius: var(--radius-pill); background: var(--lm-neutral-4, #e0e6eb); }
[data-theme="dark"] .f-sheet__grip::before { background: var(--dm-neutral-5, #3d444d); }

/* Drag to dismiss (js/field.js, "sheet drag"): any [data-sheet] panel with a
   visible [data-sheet-grip]. The grip takes the whole gesture; the rest of
   the sheet keeps native vertical scrolling and the script takes over only a
   pull down from the top. */
@media (max-width: 699px) {
  [data-sheet] [data-sheet-grip] { touch-action: none; cursor: grab; }
  [data-sheet].is-sheet-dragging { user-select: none; -webkit-user-select: none; }
  [data-sheet].is-sheet-dragging [data-sheet-grip] { cursor: grabbing; }
}

@media (min-width: 700px) {
  .f-sheet__scrim { background: transparent; animation: none; }
  .f-sheet__panel {
    left: auto;
    right: calc(16px * var(--sp));
    top: calc(var(--field-drawer-top, 56px) + 6px);
    bottom: auto;
    width: 360px;
    max-height: calc(100% - var(--field-drawer-top, 56px) - 30px);
    padding: 14px 16px 26px;
    border: 1px solid var(--borderColour-primary);
    border-radius: 12px;
    box-shadow: var(--field-pop-shadow);
    animation: f-menu-in 160ms ease-out both;
  }
  .f-sheet__grip { display: none; }
}

.f-who { display: flex; align-items: center; gap: 12px; }
.f-who__text { flex: 1; min-width: 0; }
.f-avatar--lg { margin: 0; width: 44px; height: 44px; cursor: default; }
.f-avatar--lg span,
.f-who .f-avatar span { width: 44px; height: 44px; font-size: 17px; }
.f-who__name { font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 600; }
.f-who__mail { margin-top: 2px; color: var(--textColour-secondary); font-size: 12px; overflow-wrap: anywhere; }

.f-setting { display: flex; flex-direction: column; gap: 8px; }

.f-pairbox { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 10px 10px 12px; border-radius: 6px; border: 1px solid var(--borderColour-primary); }
.f-pairbox__text { flex: 1; min-width: 0; }
.f-pairbox__title { font-size: 13px; font-weight: 600; }
.f-pairbox__sub { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--textColour-secondary); }
.f-pairbox .f-btn--sm { flex: none; padding: 0 14px; }

.f-mydev { display: flex; gap: 8px; margin-top: 14px; }
.f-mydev__tile { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--borderColour-primary); }
.f-mydev__k { font-size: 11px; color: var(--textColour-tertiary); }
.f-mydev__v { margin-top: 3px; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-mydev__s { margin-top: 1px; display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--textColour-tertiary); }
.f-mydev__s .f-batt { font-size: 11px; color: inherit; }

/* The profile's grouped rows. */
.f-plist {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 16px;
  background: var(--borderColour-primary);
  border: 1px solid var(--borderColour-primary);
  border-radius: 8px;
  overflow: hidden;
}

.f-plist__row {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 52px;
  padding: 0 13px;
  border: 0;
  background: var(--sfColour-primary);
  color: var(--textColour-primary);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

@media (hover: hover) { .f-plist__row:hover { background: var(--sfColour-hover); } }
.f-plist__row--static { padding-right: 9px; cursor: default; }
@media (hover: hover) { .f-plist__row--static:hover { background: var(--sfColour-primary); } }
.f-plist__row > .f-icon { flex: none; }
.f-plist__row > .f-icon:last-child { color: var(--textColour-tertiary); }
.f-plist__label { flex: none; font-size: 15px; font-weight: 500; white-space: nowrap; }
.f-plist__label--grow { flex: 1; min-width: 0; }
.f-plist__value { flex: 1 1 auto; min-width: 0; text-align: right; font-size: 12px; color: var(--textColour-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-plist__value--brand { color: var(--textColour-brand); font-weight: 600; }
.f-plist__row--rec { align-items: center; gap: 12px; padding: 12px 13px; }
.f-plist__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.f-plist__name { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; min-width: 0; }
.f-plist__sub { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--textColour-secondary); }
.f-plist__meta { margin-top: 1px; font-size: 12px; line-height: 16px; color: var(--textColour-tertiary); font-family: var(--font-mono-accent); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.f-rec__marker { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--field-coral); box-shadow: 0 0 0 3px var(--sfColour-primary), 0 0 0 4px var(--borderColour-primary); }
.f-tag { display: inline-flex; align-items: center; flex: none; padding: 1px 7px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; }
.f-tag--here { background: var(--lm-green-0, #dafbe1); color: var(--lm-green-6, #116329); }
[data-theme="dark"] .f-tag--here { background: rgba(46, 160, 67, 0.16); color: #4ac26b; }

.f-prof__label { display: block; margin: 20px 0 8px; }
.f-prof__out { margin: 20px 0 0; }
.f-prof__out .f-btn { gap: 8px; font-weight: 500; }
.f-prof__title { margin: 8px 0 0; font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 600; }
.f-prof__blurb { margin: 4px 0 0; font-size: 13px; line-height: 18px; color: var(--textColour-secondary); text-wrap: pretty; }
.f-prof__empty { margin-top: 14px; padding: 14px; border: 1px dashed var(--borderColour-primary); border-radius: 8px; }
.f-prof__emptyt { font-size: 13px; font-weight: 600; }
.f-prof__emptys { margin-top: 2px; font-size: 12px; color: var(--textColour-secondary); }

.f-backlink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin-left: -8px;
  padding: 0 12px 0 6px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--field-coral);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

@media (hover: hover) { .f-backlink:hover { background: var(--sfColour-hover); } }
.f-backlink .f-icon { stroke-width: 2.2; }

@keyframes f-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes f-sheet-up { from { transform: translateY(20px); opacity: 0.5; } to { transform: translateY(0); opacity: 1; } }
@keyframes f-drawer-in { from { transform: translateX(24px); opacity: 0.4; } to { transform: translateX(0); opacity: 1; } }

/* ---------------------------------------------------------------- pills, labels */
.f-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-pill, 999px);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--sfColour-hover);
  color: var(--textColour-secondary);
}

.f-pill__dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
/* A record's state (severityPill): Active green, Warning yellow, Critical red
   (the prototype's device pills; the masthead chips and the alerts drawer
   keep Warning orange). */
.f-pill--active, .f-pill--live { background: var(--lm-green-0, #dafbe1); color: var(--lm-green-6, #116329); }
.f-pill--warning, .f-pill--arming { background: #fff8c5; color: #7d4e00; }
.f-pill--critical { background: var(--lm-red-0, #ffebe9); color: var(--lm-red-6, #a40e26); }
.f-pill--soon { background: var(--field-warn-bg); color: var(--lm-orange-6, #953800); }
.f-pill--info, .f-pill--planned { background: #ddf4ff; color: #0550ae; }
.f-pill--off, .f-pill--inactive { background: var(--sfColour-hover); color: var(--textColour-secondary); }
.f-pill--off .f-pill__dot, .f-pill--inactive .f-pill__dot { background: #c8d1da; }
/* A zone's state (zonePill): a stronger green, a yellow dot while arming. */
.f-pill--zone.f-pill--active { background: #aceebb; }
.f-pill--zone.f-pill--active .f-pill__dot { background: #2da44e; }
.f-pill--zone.f-pill--arming .f-pill__dot { background: #d4a72c; }
[data-theme="dark"] .f-pill--active, [data-theme="dark"] .f-pill--live, [data-theme="dark"] .f-pill--zone.f-pill--active { background: rgba(46, 160, 67, 0.16); color: #4ac26b; }
[data-theme="dark"] .f-pill--zone.f-pill--active .f-pill__dot { background: #3fb950; }
[data-theme="dark"] .f-pill--warning, [data-theme="dark"] .f-pill--arming { background: rgba(212, 167, 44, 0.18); color: #e3b341; }
[data-theme="dark"] .f-pill--critical { background: rgba(207, 34, 46, 0.2); color: #ff8080; }
[data-theme="dark"] .f-pill--soon { color: #ffd8b5; background: rgba(188, 76, 0, 0.22); }
[data-theme="dark"] .f-pill--info, [data-theme="dark"] .f-pill--planned { background: rgba(56, 139, 253, 0.16); color: #79c0ff; }
[data-theme="dark"] .f-pill--off, [data-theme="dark"] .f-pill--inactive { background: #2f3742; color: #b7bdc8; }
[data-theme="dark"] .f-pill--off .f-pill__dot, [data-theme="dark"] .f-pill--inactive .f-pill__dot { background: #656c76; }

.f-cat { font-weight: 600; }
.f-cat--permitted { color: #116329; }
.f-cat--restricted { color: #a40e26; }
.f-cat--warning { color: #7d4e00; }
.f-cat--prohibited { color: #a40e26; }
.f-cat--informational { color: #0550ae; }
[data-theme="dark"] .f-cat--permitted { color: #4ac26b; }
[data-theme="dark"] .f-cat--restricted { color: #ff8080; }
[data-theme="dark"] .f-cat--warning { color: #e3b341; }
[data-theme="dark"] .f-cat--prohibited { color: #ff8080; }
[data-theme="dark"] .f-cat--informational { color: #79c0ff; }

/* Tones for icon tiles and state pills (severity, or a zone event's L1). */
.f-tone--critical, .f-tone--prohibited { background: var(--field-crit-bg); color: var(--field-crit-fg); }
.f-tone--warning { background: var(--field-warn-bg); color: var(--field-warn-fg); }
.f-tone--permitted { background: #dafbe1; color: #1a7f37; }
.f-tone--restricted { background: linear-gradient(135deg, rgba(239,68,68,.22) 50%, rgba(34,197,94,.22) 50%); color: #a40e26; }
.f-tone--informational, .f-tone--info { background: #ddf4ff; color: #0969da; }
.f-tone--muted { background: var(--sfColour-hover); color: var(--textColour-secondary); }
[data-theme="dark"] .f-tone--permitted { background: rgba(46, 160, 67, 0.18); color: #4ac26b; }
[data-theme="dark"] .f-tone--restricted { background: linear-gradient(135deg, rgba(239,68,68,.22) 50%, rgba(34,197,94,.22) 50%); color: #ff8080; }
[data-theme="dark"] .f-tone--informational, [data-theme="dark"] .f-tone--info { background: rgba(56, 139, 253, 0.16); color: #4493f8; }

/* ---------------------------------------------------------------- toasts */
.f-toasts {
  position: fixed;
  z-index: var(--z-toast);
  left: 12px;
  right: 12px;
  bottom: calc(var(--field-tab-h) + 40px + var(--field-safe-bottom));
  display: grid;
  gap: 8px;
  pointer-events: none;
}

@media (min-width: 700px) {
  .f-toasts { left: 50%; right: auto; bottom: 24px; transform: translateX(-50%); width: min(420px, calc(100% - 32px)); }
}

.f-toast {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 13px;
  border-radius: 6px;
  background: var(--sfColour-staticBlack, #151b23);
  color: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  animation: f-sheet-up 180ms ease-out both;
  transition: opacity 250ms ease;
}

[data-theme="dark"] .f-toast { background: #2a313c; }
.f-toast.is-leaving { opacity: 0; }
.f-toast > .f-icon { flex: none; margin-top: 1px; color: #4ac26b; stroke-width: 2.6; }
.f-toast--error { background: var(--lm-red-7, #82071e); }
.f-toast__text { flex: 1; min-width: 0; }
.f-toast__title { font-size: 13px; font-weight: 600; }
.f-toast__sub { margin-top: 2px; font-size: 12px; line-height: 17px; color: var(--lm-neutral-7, #c8d1da); }

/* ---------------------------------------------------------------- battery gauge */
.f-batt { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--textColour-secondary); }
.f-batt__body { position: relative; width: 20px; height: 10px; border: 1.5px solid color-mix(in srgb, var(--textColour-primary) 38%, transparent); border-radius: 3px; padding: 1px; }
.f-batt__fill { display: block; height: 100%; border-radius: 1px; background: var(--textColour-primary); }
.f-batt--warning .f-batt__fill { background: #e5a50a; }
.f-batt--critical .f-batt__fill { background: #e5484d; }
.f-batt__fill--0 { width: 0; } .f-batt__fill--1 { width: 10%; } .f-batt__fill--2 { width: 20%; } .f-batt__fill--3 { width: 30%; } .f-batt__fill--4 { width: 40%; } .f-batt__fill--5 { width: 50%; }
.f-batt__fill--6 { width: 60%; } .f-batt__fill--7 { width: 70%; } .f-batt__fill--8 { width: 80%; } .f-batt__fill--9 { width: 90%; } .f-batt__fill--10 { width: 100%; }

/* ---------------------------------------------------------------- location list (kept for the picker's old markup) */
.f-loclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.f-loclist__item { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--borderColour-primary); border-radius: 8px; background: var(--sfColour-primary); color: inherit; text-decoration: none; }
.f-loclist__item[aria-disabled="true"] { opacity: 0.55; }
.f-loclist__name { font-weight: 600; }
.f-loclist__meta { font-size: 13px; color: var(--textColour-secondary); }