/* 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);
  /* The phone tab bar is docked edge to edge: 56px of items over a reserve
     of at least 8px, which grows to the home indicator's safe area. */
  --field-nav-pad: max(8px, var(--field-safe-bottom));
  --field-nav-h: calc(var(--field-tab-h) + var(--field-nav-pad));
  /* 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;
  /* A battery under half, the design's --battWarn. */
  --field-batt-warn: #e5a50a;
}

[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;
  --field-batt-warn: #f5c518;
}

@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 max(14px, var(--field-safe-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
}

/* The endorsement artwork is cropped to its ink, so it sits on the footer's
   left margin; the white version replaces it in dark mode. */
.f-entry__foot img {
  height: 11px;
  width: auto;
  opacity: 0.9;
}

[data-theme="dark"] .f-entry__foot img { opacity: 0.75; }

.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: masthead, the live status band directly below it, content, tab bar.
   Tablet and desktop: the tab bar becomes a rail down the left, under the
   masthead and the band, both full width across it. */
.f-shell {
  height: 100%;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "head" "band" "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: "head head" "band band" "nav main";
  }
}

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

/* ---------------------------------------------------------------- live status band
   Live: the location's status and schedule, then the site summary, on the
   design's near-black band (a lighter grey in dark mode). Not updating,
   Offline and Reconnecting take their own colours, with Retry and a note. */
.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; }
}

[data-theme="dark"] .f-band--live {
  background: var(--dm-neutral-5, #2a313c);
  border-bottom-color: var(--dm-neutral-7, #3d444d);
}

.f-band__state { flex: none; font-weight: 600; }
.f-band__loc { flex: 0 0 auto; max-width: 100%; min-width: 0; align-items: center; gap: inherit; }
.f-band__loc .f-livedot { width: 9px; height: 9px; }
.f-band__sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; font-family: var(--font-mono-accent); font-variant-numeric: tabular-nums; }
.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--live:not(.f-band--sync) .f-band__loc { display: inline-flex; }

.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
   Live 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 popover is never clipped and drawers still cover what
   sits below it. Dims that must cover the masthead too (the phone's sheets)
   sit above it. */
.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 sits 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-loc[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 location's name, opening Location details. Phone: up to two lines in
   the display face, one smaller line while the page scrolls down. From 700px:
   one line that never truncates, then the project after a dot, which is the
   part that shortens. */
.f-loc {
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(100% + 8px);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin: -2px 0 -2px -8px;
  padding: 2px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast, 120ms) ease;
}

.f-loc[aria-expanded="true"] { background: var(--sfColour-hover); }
@media (hover: hover) { .f-loc:hover { background: var(--sfColour-hover); } }
.f-loc > .f-icon { flex: none; opacity: 0.6; }

.f-loc__name {
  min-width: 0;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 24px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-wrap: balance;
  overflow-wrap: anywhere;
  transition: font-size 220ms ease, line-height 220ms ease;
}

.f-loc__dot,
.f-loc__proj { display: none; }

/* Scrolled down: one smaller line. */
.f-shell.is-head-small .f-loc__name { font-size: 16px; line-height: 22px; -webkit-line-clamp: 1; line-clamp: 1; }

@media (min-width: 700px) {
  .f-loc__name,
  .f-shell.is-head-small .f-loc__name {
    flex: none;
    display: block;
    font-size: 15px;
    line-height: 20px;
    white-space: nowrap;
    overflow: visible;
  }

  .f-loc__dot { display: block; width: 3px; height: 3px; flex: none; border-radius: 50%; background: var(--textColour-tertiary); }

  .f-loc__proj {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--textColour-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 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; }

/* 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;
}

/* ---------------------------------------------------------------- location details
   From 700px a popover anchored under the location's name: js/field.js writes
   --pop-x / --pop-y from the button that opened it. It lives in the masthead
   row, so it draws over the band, drawers and sub-headers. On phones it is a
   bottom sheet over a dim; both sit in the raised masthead row, so the dim
   covers the masthead too. */
.f-menu__label {
  padding: 6px 8px 5px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--textColour-tertiary);
}

/* The popover's wrapper sits at the end of the masthead's button row. Open, it
   would be an empty flex item (its scrim and sheet are fixed), adding one gap
   and shifting the alerts, bell and avatar left; display: contents keeps it out
   of the row. Closed, [hidden] still wins. */
.f-locpop { display: contents; }
.f-locpop__scrim { display: none; }

.f-pop {
  position: fixed;
  z-index: 5;
  left: var(--pop-x, 12px);
  top: var(--pop-y, 64px);
  width: min(360px, calc(100vw - 16px));
  max-height: calc(100% - 24px);
  overflow-y: auto;
  padding: 16px;
  border: 1px solid var(--borderColour-primary);
  border-radius: 12px;
  background: var(--sfColour-primary);
  color: var(--textColour-primary);
  box-shadow: var(--field-pop-shadow);
  animation: f-menu-in 160ms ease-out both;
}

.f-pop__grip { display: none; }
.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__acts { display: flex; gap: 8px; margin-top: 14px; }
.f-pop__btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding-inline: 10px; gap: 7px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.f-pop__btn > span { overflow: hidden; text-overflow: ellipsis; }
.f-pop__btn > .f-icon { flex: none; }

@media (max-width: 699px) {
  .f-locpop__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 4;
    width: 100%;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    animation: f-fade 150ms ease-out;
  }

  .f-pop--loc {
    inset: auto 0 0 0;
    width: auto;
    max-height: calc(100% - 24px);
    padding: 0 16px max(20px, var(--field-safe-bottom));
    border-width: 1px 0 0;
    border-radius: 12px 12px 0 0;
    animation: f-sheet-up 200ms ease-out both;
  }

  .f-pop__grip { display: flex; padding: 10px 0 12px; }
}

/* 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 { flex: none; 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; }

/* The workspace row: its letter square, then its name. */
.f-rows .f-rows__ws { display: flex; align-items: center; justify-content: flex-end; gap: 6px; align-self: center; }

.f-rows__tag {
  width: 18px;
  height: 18px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 4px;
  background: var(--field-coral);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
}

.f-rows__tag .f-entity-letter { width: 100%; height: 100%; }

@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: var(--field-nav-h);
  padding-bottom: var(--field-nav-pad);
  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(12px, 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, its dim over the masthead too; from 700px a
   dropdown directly under the avatar with no dim (js/field.js writes
   --drop-top / --drop-right from the button). */
.f-sheet { position: fixed; inset: 0; z-index: var(--z-sheet); }

@media (max-width: 699px) {
  .f-sheet { z-index: var(--z-dialog); }
}

.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 max(16px, 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: var(--drop-right, calc(16px * var(--sp)));
    top: var(--drop-top, calc(var(--field-head-bottom, 56px) + 6px));
    bottom: auto;
    width: 360px;
    max-height: calc(100% - var(--drop-top, calc(var(--field-head-bottom, 56px) + 6px)) - 24px);
    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; }

/* Off a location: the short menu (who, Appearance, Language, Sign out). */
@media (min-width: 700px) {
  .f-sheet--menu .f-sheet__panel { width: min(300px, calc(100vw - 32px)); padding: 14px; border-radius: 10px; }
}

.f-who--sm { gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--dividerColour-primary); }
.f-who--sm .f-who__name { font-family: inherit; font-size: 14px; line-height: 19px; }
.f-who--sm .f-who__mail { margin-top: 0; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-avatar--md { margin: 0; width: 36px; height: 36px; cursor: default; }
.f-who--sm .f-avatar--md span { width: 36px; height: 36px; font-size: 13px; }
.f-prof__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.f-prof__rowlabel { font-size: 13px; font-weight: 500; }
.f-prof__langlabel { margin: 14px 0 8px; }
.f-prof--menu .f-segmented--lang button { min-height: 34px; }
.f-prof__out--link { margin: 12px 0 0; border-top: 1px solid var(--dividerColour-primary); }

.f-prof__signout {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--lm-red-5, #cf222e);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

[data-theme="dark"] .f-prof__signout { color: #ff8080; }
@media (hover: hover) { .f-prof__signout:hover { text-decoration: underline; } }

.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; }

/* A drawer's back link to the work group or collection it opened from:
   phones only, where the drawer covers that page's header. */
.f-crumb { display: flex; margin: -6px 0 8px; }
.f-crumb__link { min-height: 36px; max-width: 100%; }
.f-crumb__link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 700px) { .f-crumb { display: none; } }

@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-nav-h) + 40px);
  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: var(--field-batt-warn); }
.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); }

/* EMS entity branding is separate from operational/status colours. */
.f-entity-letter { display: block; width: 100%; height: 100%; border-radius: inherit; }
.f-entity-letter text { text-anchor: middle; dominant-baseline: middle; font: 600 19px var(--font-sans); }
.f-entity-dark { display: none; }
[data-theme="dark"] .f-entity-light { display: none; }
[data-theme="dark"] .f-entity-dark { display: inline; }

/* ---------------------------------------------------------------- loading skeleton
   The map screen while a location loads (js/field.js builds it on confirming
   one): masthead, status band, search, Key, controls, and the tab bar on
   phones or the rail from 700px. */
:root {
  --field-skel: #e7ecf1;
  --field-skel-strong: #dde3ea;
  --field-skel-map: #eaeef2;
  --field-skel-band: #0d1117;
}

[data-theme="dark"] {
  --field-skel: #21262d;
  --field-skel-strong: #2a313c;
  --field-skel-map: #171d25;
  --field-skel-band: #2a313c;
}

.f-skel {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--bgColour-primary);
  animation: f-fade 160ms ease both;
}

.f-skel__pulse { animation: f-skel-bob 1.4s ease-in-out infinite; }
.f-skel__b { flex: none; border-radius: 3px; background: var(--field-skel); }
.f-skel__b--strong { background: var(--field-skel-strong); }
.f-skel__fill { flex: 1; }

.f-skel__head {
  flex: none;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
  background: var(--sfColour-primary);
}

.f-skel__row { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.f-skel__title { width: 150px; height: 20px; border-radius: 5px; }
.f-skel__chev { width: 12px; height: 12px; }
.f-skel__btn { width: 36px; height: 36px; border-radius: 6px; }
.f-skel__av { width: 30px; height: 30px; border-radius: 999px; }

.f-skel__band {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 var(--gx);
  background: var(--field-skel-band);
}

.f-skel__bdot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
.f-skel__bbar { flex: none; width: 110px; height: 9px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); }
.f-skel__bbar--r { width: 96px; background: rgba(255, 255, 255, 0.16); }

.f-skel__body { flex: 1; min-height: 0; display: flex; }

.f-skel__rail {
  display: none;
  flex: none;
  width: var(--field-rail-w);
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--sfColour-primary);
  border-right: 1px solid var(--borderColour-primary);
}

.f-skel__map { position: relative; flex: 1; min-width: 0; overflow: hidden; background: var(--field-skel-map); }
.f-skel__ground { position: absolute; inset: 0; animation: f-skel-bob 1.6s ease-in-out infinite; }
.f-skel__track { position: absolute; left: -10%; top: 34%; width: 120%; height: 12px; background: var(--field-skel); transform: rotate(-7deg); }
.f-skel__track--2 { top: 47%; }
.f-skel__blob { position: absolute; left: 16%; top: 22%; width: 44%; height: 110px; border-radius: 10px; background: var(--field-skel); }
.f-skel__blob--2 { left: 38%; top: 56%; width: 38%; height: 82px; }

.f-skel__search {
  position: absolute;
  left: 12px;
  top: 12px;
  width: min(334px, calc(100% - 68px));
  height: 38px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--sfColour-primary);
  border: 1px solid var(--borderColour-primary);
}

.f-skel__sdot { width: 14px; height: 14px; border-radius: 50%; }
.f-skel__sbar { width: 130px; height: 9px; }

.f-skel__key {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 132px;
  height: 72px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--sfColour-primary);
  border: 1px solid var(--borderColour-primary);
}

.f-skel__k1 { width: 30px; height: 8px; }
.f-skel__k2 { width: 96px; height: 8px; }
.f-skel__k3 { width: 80px; height: 8px; }

.f-skel__ctls { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.f-skel__ctl { width: 38px; height: 38px; box-sizing: border-box; border-radius: 8px; background: var(--sfColour-primary); border: 1px solid var(--borderColour-primary); }

.f-skel__nav {
  flex: none;
  display: flex;
  box-sizing: border-box;
  height: var(--field-nav-h);
  padding-bottom: var(--field-nav-pad);
  background: var(--sfColour-primary);
  border-top: 1px solid var(--borderColour-primary);
}

.f-skel__navi { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; }
.f-skel__navicon { width: 22px; height: 22px; border-radius: 6px; }
.f-skel__navlabel { width: 34px; height: 8px; }

@media (min-width: 700px) {
  .f-skel__head { padding-left: 24px; padding-right: 24px; }
  .f-skel__title { width: 200px; height: 16px; }
  .f-skel__bbar--r { width: 220px; }
  .f-skel__rail { display: flex; }
  .f-skel__rail .f-skel__navi { flex: none; height: 56px; }
  .f-skel__nav { display: none; }
}

@keyframes f-skel-bob { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

@media (prefers-reduced-motion: reduce) {
  .f-skel__pulse, .f-skel__ground { animation: none; }
}