/* Farm Monitor — the phone frame and the app's own pieces. Tokens, fonts and base
 * styles are in tokens.css and the components in components.css, both shared with
 * the gateway dashboard. Layout uses logical properties (inline/block) so a
 * right-to-left language mirrors without a second stylesheet. */

:root {
  --topbar-h: 52px;
  --tabbar-h: 60px;
  --rail-w: 232px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

body { background: var(--container); overscroll-behavior-y: none; }

/* ---- frame ----------------------------------------------------------------------------- */
.fm { min-height: 100vh; min-height: 100dvh; }

.topbar {
  position: sticky; inset-block-start: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--s2);
  min-height: calc(var(--topbar-h) + var(--safe-top));
  padding: var(--safe-top) max(var(--s3), env(safe-area-inset-right, 0px)) 0 max(var(--s3), env(safe-area-inset-left, 0px));
  background: var(--canvas);
  border-block-end: 1px solid var(--border-strong);
}
.topbar-title { flex: 1 1 auto; min-width: 0; font-size: var(--fs-lg); line-height: 22px; }
.topbar .live.offline { font-size: var(--fs-sm); }   /* "Last updated 14:32": the numbers on screen are old */
.topbar-back { margin-inline-start: calc(-1 * var(--s2)); }

.live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; }
.live.live .live-dot { background: var(--ok); }
.live.live .live-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.live.connecting .live-dot, .live.retrying .live-dot { background: var(--warn); animation: pulse 1.4s ease-in-out infinite; }
.live.offline { color: var(--crit-text); }
.live.offline .live-dot { background: var(--crit); }

.fm-main {
  min-width: 0;
  padding: var(--s3) max(var(--s4), env(safe-area-inset-right, 0px)) calc(var(--tabbar-h) + var(--safe-bottom) + var(--s5)) max(var(--s4), env(safe-area-inset-left, 0px));
}
.page { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s4); }

.tabbar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 25;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-block-end: var(--safe-bottom);
  padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);   /* landscape notch */
  background: var(--canvas);
  border-block-start: 1px solid var(--border-strong);
}
.rail-brand { display: none; }
.tab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--tabbar-h);
  color: var(--text-2); text-decoration: none;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em;
  -webkit-tap-highlight-color: transparent;
}
.tab .i { width: 24px; height: 24px; }
.tab-ico { position: relative; display: inline-flex; }
.tab[aria-current="page"] { color: var(--accent-text); }
.tab[aria-current="page"]::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 28%;
  height: 3px; border-radius: 0 0 3px 3px; background: var(--accent);
}
.tab-badge {
  position: absolute; inset-block-start: -6px; inset-inline-start: 14px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; border: 2px solid var(--canvas);
  background: var(--warn); color: #1c1203;
  font: 600 10px / 1 var(--font-mono);
}
.tab-badge.crit { background: var(--crit-strong); color: #fff; }

/* wide screens: the tabs become a rail */
@media (min-width: 900px) {
  .fm { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .topbar { grid-column: 2; }
  .fm-main { grid-column: 2; padding: var(--s4) var(--s5) var(--s6); }
  .tabbar {
    grid-column: 1; grid-row: 1 / span 2;
    position: sticky; inset-block-start: 0; height: 100vh;
    display: flex; flex-direction: column; gap: 2px; padding: var(--s3) var(--s2);
    background: var(--container);
    border-block-start: 0; border-inline-end: 1px solid var(--border-strong);
  }
  .rail-brand { display: flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s2) var(--s3); color: var(--text); text-decoration: none; }
  .rail-brand img { width: 28px; height: 28px; border-radius: var(--r-control); }
  .tab { flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 40px; padding: 0 var(--s2); border-radius: var(--r-control); font-size: var(--fs-base); font-weight: 500; letter-spacing: 0; }
  .tab .i { width: 20px; height: 20px; }
  .tab:hover { background: var(--well); color: var(--text); }
  .tab[aria-current="page"] { background: var(--canvas); color: var(--text); border: 1px solid var(--border); }
  .tab[aria-current="page"]::before { inset-block: 8px; inset-inline: 0 auto; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
  .tab[aria-current="page"] .i { color: var(--accent); }
  .topbar-back { display: none; }
}

/* ---- phones: readable type and 44 px targets ------------------------------------------ */
/* One step up on the type scale for a phone held at arm's length; the shared tokens stay as
 * they are on the gateway. */
@media (max-width: 899px) {
  :root { --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-base: 15px; }
}
@media (max-width: 899px), (pointer: coarse) {
  .btn, .btn.sm { height: 44px; min-width: 44px; padding: 0 var(--s4); }
  .btn.icon-only, .btn.sm.icon-only { width: 44px; padding: 0; }
  .input, .select, .input.mono { height: 44px; font-size: 16px; }   /* 16 px stops iOS zooming into the field */
  .seg button, .seg-tab { min-height: 44px; }
  .seg button { min-width: 44px; }
  .tabs button { height: 44px; }
  .legend button { min-height: 44px; }
  details.disclosure > summary { min-height: 44px; }
  .check { min-height: 44px; }
  .input-with-button .input { padding-inline-end: 52px; }
  .input-with-button .btn { width: 44px; padding: 0; }
  .house-foot a { padding: 14px 6px; margin: -14px -6px; }   /* an inline link still gets a 44 px hit area */
}

/* ---- sentence case where people have to read it ------------------------------------------ */
/* Buttons, chips and small labels were all-caps monospace: harder to read in a second
 * language, and everything shouted at once. Only the section headings keep capitals. */
.btn { text-transform: none; letter-spacing: 0; font-size: var(--fs-md); }
.chip { height: 24px; padding: 0 var(--s2); font: 600 var(--fs-sm) / 1 var(--font-ui); letter-spacing: 0; text-transform: none; }
.chip.pulse .dot, .chip .dot { width: 7px; height: 7px; }
.label, .kpi .label, .readout .label { font: 500 var(--fs-sm) / 1.3 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--text-2); }
.chip, .badge { max-width: 100%; }

/* ---- page head (as on the gateway) ------------------------------------------------------ */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.page-head .titles { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.page-head .crumb { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); color: var(--text-2); text-decoration: none; }
.page-head .crumb:hover { color: var(--accent-text); }
.page-head .title-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; min-width: 0; }
.page-head .title-row h1 { overflow-wrap: anywhere; }
.page-head .actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
@media (max-width: 899px) {
  .page-head .crumb { display: none; }
  /* the top bar already says which site or controller this is; keep the heading for screen readers */
  .page-head .title-row h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---- small layout helpers -------------------------------------------------------------- */
.stack-sm { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.row.tight { gap: 4px; flex-wrap: nowrap; }
.section-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; }
.note { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-sm); }
.note .i { margin-top: 1px; flex: none; }
.more-link { width: 100%; justify-content: space-between; }
.kpi-compact { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.form-grid.two { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.plain { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.about { text-align: center; font-size: var(--fs-sm); }
.field-row { align-items: flex-end; flex-wrap: nowrap; }
.field-row .field { flex: 1 1 auto; }

/* segmented tabs that are links (site page) */
.seg-tabs { display: flex; width: 100%; }
.seg-tab {
  flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 4px var(--s2); text-align: center; line-height: 1.2; overflow-wrap: anywhere;
  border-inline-end: 1px solid var(--border-strong);
  background: var(--canvas); color: var(--text-2);
  font: 600 var(--fs-sm) var(--font-ui); text-decoration: none;
}
.seg-tab:last-child { border-inline-end: 0; }
.seg-tab[aria-selected="true"] { background: var(--accent-strong); color: var(--on-accent); }

/* ---- alarms ----------------------------------------------------------------------------- */
.alarm-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3);
  padding: var(--s3);
  background: var(--canvas);
  border: 1px solid var(--border-strong); border-inline-start: 4px solid var(--warn); border-radius: var(--r-card);
}
.alarm-row.sev-critical { border-inline-start-color: var(--crit); }
.alarm-row.sev-info { border-inline-start-color: var(--accent); }
.alarm-row.cleared { border-inline-start-color: var(--ok); }
.alarm-row.tappable { cursor: pointer; }
.alarm-row.tappable:hover { background: var(--container); }
.alarm-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--chip-warn-bg); color: var(--warn-text); }
.sev-critical .alarm-ico { background: var(--chip-crit-bg); color: var(--crit-text); }
.sev-info .alarm-ico { background: var(--chip-info-bg); color: var(--accent-text); }
.cleared .alarm-ico { background: var(--chip-ok-bg); color: var(--ok-text); }
.alarm-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.alarm-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); min-width: 0; }
.alarm-title { min-width: 0; overflow-wrap: anywhere; }
.alarm-where, .alarm-where.truncate { font-size: var(--fs-sm); overflow-wrap: anywhere; white-space: normal; overflow: visible; text-overflow: clip; }   /* long site names wrap: the house stays visible */
.alarm-msg { margin-top: 2px; font-size: var(--fs-md); color: var(--text-2); overflow-wrap: anywhere; }
.alarm-meta { margin-top: var(--s2); gap: var(--s2); }
.alarm-meta .btn { margin-inline-start: auto; }
.alarm-row.acked { background: var(--container); }
.alarm-row .alarm-top .nowrap { font-size: var(--fs-md); color: var(--text-2); font-variant-numeric: tabular-nums; }

/* Alarms page: both filters on one line, then the one bulk action */
.alarm-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.alarm-filters.one { grid-template-columns: minmax(0, 1fr); }
.ack-all { width: 100%; justify-content: center; }
.as-of { font-size: var(--fs-sm); color: var(--text-2); }

/* ---- sites, houses, lists ---------------------------------------------------------------- */
a.card { color: inherit; text-decoration: none; }
a.card:hover { background: var(--container); }
.site-card .card-head .i { color: var(--text-3); }
/* the name is the answer to "which site?": let it wrap rather than cut it off */
.site-card .card-head { align-items: flex-start; }
.site-card .card-head h3.truncate { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.site-card .card-head .i, .site-card .card-head .chip { flex: none; }
.site-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.site-figures > div { display: flex; flex-direction: column; gap: 2px; padding: var(--s2) var(--s3); background: var(--well); border: 1px solid var(--border); border-radius: var(--r-control); }
.site-figures b { font: 600 22px / 28px var(--font-mono); }
.link-card .card-head .i:last-child { color: var(--text-3); }

.house-card .readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* gateway health and relays */
.health { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s3); }
.health-fact { display: flex; align-items: flex-start; gap: var(--s2); min-width: 0; }
.health-fact > .i { margin-top: 2px; color: var(--text-3); flex: none; }
.health-fact .subtle { font-size: var(--fs-sm); overflow-wrap: anywhere; }
@media (max-width: 899px) {
  .health { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .health-fact { align-items: flex-start; }
  .health-fact > .stack-xs { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s2); row-gap: 2px; }
  .health-fact > .stack-xs > .subtle { grid-column: 1 / -1; }
}
.stack-xs { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-items: flex-start; }
.panel.stale .panel-body { opacity: 0.7; }
.relay-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s1) var(--s3); }
.relay-card > .card-head { grid-column: 1 / -1; }
.relay-card > .meta { grid-column: 1; }
.relay-card > .row { grid-column: 2; }
.relay-card.on { border-color: var(--chip-ok-bd); box-shadow: inset 3px 0 0 var(--ok); }
.house-foot { font-size: var(--fs-sm); overflow-wrap: anywhere; }

.list { display: flex; flex-direction: column; background: var(--canvas); border: 1px solid var(--border-strong); border-radius: var(--r-card); overflow: hidden; }
.list-row {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 56px; padding: var(--s2) var(--s3);
  color: inherit; text-decoration: none;
  border-block-end: 1px solid var(--border);
}
.list-row:last-child { border-block-end: 0; }
a.list-row:hover { background: var(--container); }
.list-ico { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--r-control); background: var(--well); color: var(--text-2); }
.list-main { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* a row may wrap: name and sub-line keep their full width and the reading and chip drop below when the line is short */
.list-row { flex-wrap: wrap; }
.list-main .truncate { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.list-row > .list-side { margin-inline-start: auto; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s2); }
.list-row > .list-chevron { margin-inline-start: 0; }
.list-main .row { flex-wrap: wrap; }
.list-main .row .input { height: 34px; max-width: 200px; flex: 1 1 140px; }
@media (max-width: 899px), (pointer: coarse) { .list-main .row .input { height: 44px; max-width: none; font-size: 16px; } }
.list-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; font-size: var(--fs-sm); }
.list-chevron { color: var(--text-3); }

/* ---- forms, disclosure, secrets ---------------------------------------------------------- */
.input-with-button { position: relative; display: flex; }
.input-with-button .input { padding-inline-end: 44px; }
.input-with-button .btn { position: absolute; inset-inline-end: 0; inset-block: 0; height: auto; }
.signin-submit { width: 100%; height: 44px; }

details.disclosure { display: flex; flex-direction: column; gap: var(--s3); }
details.disclosure > summary {
  display: flex; align-items: center; gap: var(--s2);
  min-height: 40px; cursor: pointer; list-style: none; font-weight: 500; color: var(--accent-text);
}
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure[open] > summary { margin-block-end: var(--s2); }
details.card.disclosure > summary { color: var(--text); }
details.site-editor > summary .subtle { margin-inline-start: auto; font-size: var(--fs-xs); }
.secret { margin-top: var(--s2); user-select: all; color: var(--text); }
.secret-box { flex-wrap: wrap; }

/* admin audit log: two lines per entry */
.audit { margin: 0; padding: 0; list-style: none; }
.audit-row { padding: var(--s2) var(--s3); border-block-end: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.audit-row:last-child { border-block-end: 0; }
.audit-what { margin: 0; overflow-wrap: anywhere; font-size: var(--fs-md); }
.audit-who { margin: 0; display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--fs-sm); }
.audit-by { min-width: 0; overflow-wrap: anywhere; }

/* ---- notices over the tab bar ---------------------------------------------------------- */
.toasts { inset-inline-end: max(var(--s3), env(safe-area-inset-right, 0px)); inset-block-end: calc(var(--tabbar-h) + var(--safe-bottom) + var(--s3)); }
.update-bar {
  position: fixed; z-index: 30;
  inset-inline: max(var(--s3), env(safe-area-inset-left, 0px)) max(var(--s3), env(safe-area-inset-right, 0px)); inset-block-end: calc(var(--tabbar-h) + var(--safe-bottom) + var(--s3));
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s2) var(--s2) var(--s2) var(--s3);
  background: var(--overlay); border: 1px solid var(--border-overlay); border-radius: var(--r-card);
}
.update-bar span { min-width: 0; font-weight: 500; }
.update-bar .btn { flex: none; }
@media (min-width: 900px) {
  .toasts { inset-block-end: var(--s4); }
  .update-bar { inset-inline: auto var(--s4); inset-block-end: var(--s4); }
}

/* ---- report printing -------------------------------------------------------------------- */
.report { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s4); }
.report-head { display: flex; align-items: center; gap: var(--s3); }
.report-head img { width: 40px; height: 40px; border-radius: var(--r-card); }
.report-kv { grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); }
@media (max-width: 899px) {
  .report-kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .report-kv dt { margin-block-start: var(--s3); font-size: var(--fs-sm); }
  .report-kv dd { white-space: normal; }
}
@media print {
  :root { color-scheme: light; }
  body { background: #fff; }
  .topbar, .tabbar, .no-print, .seg-tabs, .page-head .actions, .banners, .update-bar, .toasts { display: none !important; }
  .fm { display: block; }
  .fm-main { padding: 0; }
  .report { border: 0; }
}

/* ---- right-to-left: arrows point the other way ------------------------------------------- */
[dir="rtl"] svg:has(use[href$="#chevron_right"]),
[dir="rtl"] svg:has(use[href$="#chevron_left"]),
[dir="rtl"] svg:has(use[href$="#arrow_back"]),
[dir="rtl"] svg:has(use[href$="#arrow_forward"]) { transform: scaleX(-1); }