/* Mobi Field Tools — component styles. Every value is a token from tokens.json. */
.mo { font-family: var(--font-sans); color: var(--text-primary); -webkit-font-smoothing: antialiased; box-sizing: border-box; }
.mo *, .mo *::before, .mo *::after { box-sizing: border-box; }

/* Button — primary pill (Start/Stop) and outlined */
.mo-btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-10); height:var(--size-row-lg); padding:0 var(--space-24); border-radius:var(--radius-button); border:0; font:700 16px/1.17 var(--font-sans); cursor:pointer; }
.mo-btn--block { display:flex; width:100%; }
.mo-btn--primary { background:var(--brand); color:var(--on-brand); }
.mo-btn--primary:active { background:var(--brand-strong); }
.mo-btn--outlined { background:transparent; color:var(--accent); border:var(--size-hairline) solid var(--outline); height:var(--size-row); font-size:14px; font-weight:500; }
.mo-btn:focus-visible, .mo-iconbtn:focus-visible, .mo-seg__opt:focus-visible, .mo-switch:focus-visible, .mo-visit:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.mo-btn svg { width:var(--size-icon-button-glyph); height:var(--size-icon-button-glyph); }

/* IconButton — 44px round */
.mo-iconbtn { display:inline-flex; align-items:center; justify-content:center; width:var(--size-touch); height:var(--size-touch); border-radius:var(--radius-full); padding:0; cursor:pointer; color:var(--text-primary); background:transparent; border:0; flex:none; }
.mo-iconbtn--outlined { background:var(--surface); border:var(--size-hairline) solid var(--outline); }
.mo-iconbtn:active { background:var(--track); }

/* Pill + badge */
.mo-pill { display:inline-flex; align-items:center; gap:var(--space-4); padding:var(--space-2) var(--space-8); border-radius:var(--radius-pill); font:500 12px/1.17 var(--font-sans); white-space:nowrap; background:var(--status-neutral-bg); color:var(--status-neutral-fg); }
.mo-pill--badge { font-size:11px; font-weight:700; padding-left:var(--space-6); }
.mo-pill svg { width:var(--size-icon-badge); height:var(--size-icon-badge); }
.mo-tone-neutral   { background:var(--status-neutral-bg);    color:var(--status-neutral-fg); }
.mo-tone-progress  { background:var(--status-progress-bg);   color:var(--status-progress-fg); }
.mo-tone-confirming{ background:var(--status-confirming-bg); color:var(--status-confirming-fg); }
.mo-tone-failed    { background:var(--status-failed-bg);     color:var(--status-failed-fg); }
.mo-tone-updated   { background:var(--status-updated-bg);    color:var(--status-updated-fg); }
.mo-tone-optional  { background:var(--status-optional-bg);   color:var(--status-optional-fg); }

/* Card — Card.Soft */
.mo-card { background:var(--surface); border:var(--size-hairline) solid var(--outline); border-radius:var(--radius-card); overflow:hidden; }
.mo-card--lg { border-radius:var(--radius-card-lg); }
.mo-card--connected { border-color:var(--connected-outline); }

/* Progress */
.mo-progress { position:relative; height:var(--size-bar); background:var(--track); border-radius:var(--radius-bar); overflow:hidden; }
.mo-progress__fill { position:absolute; inset:0 auto 0 0; border-radius:var(--radius-bar); background:var(--status-neutral-bar); }
.mo-progress--indeterminate .mo-progress__fill { width:40%; animation:mo-indet 1.4s ease-in-out infinite; }
@keyframes mo-indet { from { left:-40%; } to { left:100%; } }
@media (prefers-reduced-motion: reduce) { .mo-progress--indeterminate .mo-progress__fill { animation:none; left:0; width:100%; opacity:.5; } }
.mo-bar-neutral{background:var(--status-neutral-bar)} .mo-bar-progress{background:var(--status-progress-bar)} .mo-bar-confirming{background:var(--status-confirming-bar)} .mo-bar-failed{background:var(--status-failed-bar)} .mo-bar-updated{background:var(--status-updated-bar)}

/* VisitCard */
.mo-visit { display:block; width:100%; text-align:left; padding:var(--space-12) var(--space-14); font:inherit; color:inherit; cursor:pointer; }
.mo-visit__top, .mo-visit__mid { display:flex; align-items:center; gap:var(--space-8); }
.mo-visit__mid { margin:var(--space-8) 0; }
.mo-visit__title { font:700 16px/1.17 var(--font-sans); }
.mo-visit__time { margin-left:auto; font-size:12px; color:var(--text-muted); }
.mo-visit__detail { flex:1; min-width:0; font-size:13px; line-height:1.17; color:var(--text-muted); }

/* ListRow — row inside a grouped card */
.mo-row { display:flex; align-items:center; gap:var(--space-8); min-height:var(--size-row); padding:var(--space-10) var(--space-16); border-top:var(--size-hairline) solid var(--divider); font-size:14px; line-height:1.17; }
.mo-row:first-child { border-top:0; }
.mo-row--tall { min-height:var(--size-row-lg); }
.mo-row__label { flex:1; min-width:0; }
.mo-row__label--mono { font-family:var(--font-mono); }
.mo-row__value { font:13px/1.17 var(--font-mono); }

/* Switch — MaterialSwitch rendition */
.mo-switch { position:relative; width:52px; height:32px; border-radius:var(--radius-full); border:2px solid var(--switch-off); background:var(--screen-bg); padding:0; cursor:pointer; flex:none; }
.mo-switch::after { content:""; position:absolute; top:6px; left:6px; width:16px; height:16px; border-radius:var(--radius-full); background:var(--switch-off); transition:all .15s; }
.mo-switch[aria-checked="true"] { background:var(--brand); border-color:var(--brand); }
.mo-switch[aria-checked="true"]::after { top:2px; left:22px; width:24px; height:24px; background:var(--on-brand); }

/* SegmentedToggle */
.mo-seg { display:flex; width:100%; }
.mo-seg__opt { flex:1; height:var(--size-row); border:var(--size-hairline) solid var(--outline); background:transparent; color:var(--text-primary); font:500 14px/1 var(--font-sans); cursor:pointer; margin-left:calc(-1 * var(--size-hairline)); }
.mo-seg__opt:first-child { border-radius:var(--radius-full) 0 0 var(--radius-full); margin-left:0; }
.mo-seg__opt:last-child { border-radius:0 var(--radius-full) var(--radius-full) 0; }
.mo-seg__opt[aria-pressed="true"] { background:var(--accent-bg); color:var(--accent); border-color:var(--outline); }

/* Timeline */
.mo-tl { margin-left:var(--space-6); }
.mo-tl__item { display:flex; gap:var(--space-14); }
.mo-tl__rail { width:var(--size-dot); display:flex; flex-direction:column; align-items:center; flex:none; }
.mo-tl__dot { width:var(--size-dot); height:var(--size-dot); margin-top:5px; border-radius:var(--radius-full); background:var(--status-neutral-fg); flex:none; }
.mo-tl__line { width:2px; flex:1; background:var(--outline); }
.mo-tl__item:last-child .mo-tl__line { visibility:hidden; }
.mo-tl__body { flex:1; padding-bottom:var(--space-16); }
.mo-tl__head { display:flex; align-items:center; gap:var(--space-8); }
.mo-tl__title { font:700 14px/1.17 var(--font-sans); }
.mo-tl__detail { font-size:12px; line-height:1.17; color:var(--text-muted); }

/* Headers */
.mo-header { display:flex; align-items:center; padding:var(--space-20) var(--space-20) var(--space-8); }
.mo-header--back { padding-left:var(--space-12); gap:var(--space-12); }
.mo-header__text { flex:1; min-width:0; }
.mo-header__title { margin:0; font:700 22px/1.17 var(--font-sans); }
.mo-header__sub { font-size:13px; line-height:1.17; color:var(--text-muted); }
.mo-header__sub--mono { font-family:var(--font-mono); font-size:12px; }
.mo-header__micro { font-size:11px; line-height:1.17; color:var(--text-muted); }
.mo-header__aside { text-align:right; font-size:13px; line-height:1.17; color:var(--text-muted); }
.mo-header__aside div + div { font-size:12px; }
.mo-section { display:flex; align-items:baseline; gap:var(--space-8); }
.mo-section__title { flex:1; margin:0; font:700 15px/1.17 var(--font-sans); }
.mo-section__hint { font-size:12px; color:var(--text-muted); }
.mo-section--toggle { cursor:pointer; background:none; border:0; padding:0; width:100%; text-align:left; color:inherit; font:inherit; align-items:center; }
.mo-section--toggle svg { width:var(--size-icon); height:var(--size-icon); transition:transform .15s; }
.mo-section--toggle[aria-expanded="true"] svg { transform:rotate(180deg); }

/* ── Patterns filled in from the tire-pressure app (APK has none) ── */

/* TextField — label, big mono input, optional trailing button, hint */
.mo-field { display:block; }
.mo-field__label { display:block; font:500 14px/1.17 var(--font-sans); margin-bottom:var(--space-8); }
.mo-field__row { display:flex; gap:var(--space-8); align-items:stretch; }
.mo-field__input { flex:1; min-width:0; width:100%; height:var(--size-row-lg); font:500 22px/1 var(--font-mono); color:var(--text-primary); background:var(--surface); border:var(--size-hairline) solid var(--outline); border-radius:var(--radius-card); padding:0 var(--space-16); outline:none; -webkit-appearance:none; appearance:none; -moz-appearance:textfield; }
.mo-field__input::-webkit-inner-spin-button, .mo-field__input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.mo-field__input::placeholder { color:var(--text-muted); opacity:.7; }
.mo-field__input:focus { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.mo-field__input:disabled { background:var(--screen-bg); color:var(--text-muted); }
.mo-field--invalid .mo-field__input { border-color:var(--status-failed-bar); box-shadow:0 0 0 1px var(--status-failed-bar); }
.mo-field--compact .mo-field__input { height:var(--size-row); font-size:20px; padding:0 var(--space-12); border-radius:var(--radius-pill); }
.mo-field__btn { min-width:88px; padding:0 var(--space-20); border-radius:var(--radius-full); border:var(--size-hairline) solid var(--outline); background:var(--surface); color:var(--accent); font:500 14px/1 var(--font-sans); cursor:pointer; white-space:nowrap; }
.mo-field__btn:active { background:var(--accent-bg); }
.mo-field__hint { font-size:12px; line-height:1.3; color:var(--text-muted); margin-top:var(--space-8); }
.mo-field--invalid .mo-field__hint { color:var(--status-failed-fg); }

/* RowAction — small round actions at the end of a list row */
.mo-act { flex:none; min-width:var(--size-row); height:var(--size-row); padding:0 var(--space-14); border-radius:var(--radius-full); border:var(--size-hairline) solid var(--outline); background:var(--surface); color:var(--text-primary); font:500 14px/1 var(--font-sans); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:var(--space-4); }
.mo-act--remove { background:var(--status-failed-bg); border-color:var(--status-failed-bg); color:var(--status-failed-fg); font-size:16px; font-weight:700; }
.mo-act--armed { background:var(--status-failed-bar); border-color:var(--status-failed-bar); color:var(--on-brand); font-weight:700; }
.mo-act--done { background:var(--status-updated-bg); border-color:var(--status-updated-bg); color:var(--status-updated-fg); cursor:default; }
.mo-act:focus-visible, .mo-field__btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* StatTile */
.mo-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(84px, 1fr)); gap:var(--space-8); }
.mo-stat { background:var(--surface); border:var(--size-hairline) solid var(--outline); border-radius:var(--radius-card); padding:var(--space-12) var(--space-10); }
.mo-stat__val { font:700 22px/1.17 var(--font-sans); font-variant-numeric:tabular-nums; }
.mo-stat__sub { font-size:11px; line-height:1.3; color:var(--text-muted); margin-top:var(--space-2); }
.mo-stat__lbl { font-size:12px; line-height:1.3; color:var(--text-muted); margin-top:var(--space-4); }

/* DataTable — inside a Card size="lg" */
.mo-table { width:100%; border-collapse:collapse; font:400 14px/1.17 var(--font-sans); }
.mo-table th { text-align:left; font-size:12px; font-weight:500; color:var(--text-muted); padding:var(--space-10) var(--space-16) var(--space-6); }
.mo-table td { padding:var(--space-10) var(--space-16); border-top:var(--size-hairline) solid var(--divider); }
.mo-table .is-num { font-variant-numeric:tabular-nums; }
.mo-table .is-mono { font-family:var(--font-mono); font-size:13px; }
.mo-table .is-muted { color:var(--text-muted); font-size:12px; }
.mo-table .is-strong { font-weight:700; }

/* Banner — inline message, no border, no icon-only signal */
.mo-banner { border-radius:var(--radius-card); padding:var(--space-12) var(--space-14); font:400 14px/1.3 var(--font-sans); }
.mo-banner--failed { background:var(--status-failed-bg); color:var(--status-failed-fg); }
.mo-banner--updated { background:var(--status-updated-bg); color:var(--status-updated-fg); }
.mo-banner--progress { background:var(--status-progress-bg); color:var(--status-progress-fg); }
.mo-banner--neutral { background:var(--status-neutral-bg); color:var(--status-neutral-fg); }
.mo-banner__title { font-weight:500; }
.mo-banner__detail { font-size:13px; margin-top:var(--space-4); }

/* ActionBar — the bottom bar holding the one primary action; flat band of screen-bg */
.mo-actionbar { position:sticky; bottom:0; display:flex; align-items:center; gap:var(--space-12); background:var(--screen-bg); padding:var(--space-12) 0 var(--space-24); }