/* TruPro suite theme — extracted from command.html (Platform Unification v3 §5).
   One copy of the palette, the type scale, and the shared blueprint components.
   Linked by the Command-look suite pages; a page's own <style> loads AFTER this
   file, so page-specific rules win where they differ on purpose.
   TradeCast is excluded — different product, keeps its own look. The Field App
   (index.html) carries its own palette by design and links only the type tokens. */

:root {
  --navy:        #2b4b81;
  --navy-deep:   #1d345c;
  --red:         #cc2039;
  --red-100:     #fdecef;
  --red-700:     #9e162b;
  --bg:          #f2f2f3;
  --ink:         #1d1f20;
  --divider:      rgba(29,31,32,0.16);
  --divider-soft: rgba(29,31,32,0.09);
  --muted:        rgba(29,31,32,0.55);
  --muted-heavy:  rgba(29,31,32,0.45);
  --accent-100:  #eaf0fa;
  --accent-800:  #1b3057;
  --green:       #1a8a3c;
  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-body:    "Barlow", system-ui, sans-serif;

  /* Type scale (§6). Rem-based so Field mode can scale the whole app from the
     root; at the default 16px root these come out to exactly the px the spec
     names. Nothing a person must READ goes below --fs-small; --fs-micro is the
     absolute floor and only for pills/badges. */
  --fs-micro:   0.6875rem;  /* 11px — pills and badges, absolute floor */
  --fs-small:   0.8125rem;  /* 13px — labels, metadata */
  --fs-body:    1rem;       /* 16px — default reading size */
  --fs-lead:    1.125rem;   /* 18px — card titles */
  --fs-display: 1.375rem;   /* 22px — headings */
}

/* Field mode — bigger type for gloves-and-sunlight use. Toggled from the app
   switcher; the preference syncs across devices via the state API. */
html[data-field-mode] { font-size: 118%; }

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.5; background: var(--bg); color: var(--ink); min-height: 100vh; }

/* ── BLUEPRINT CARD + CORNER TICKS ── */
.blueprint { position: relative; border: 1px solid var(--divider); background: #fff; }
.blueprint > .corner { position: absolute; width: 11px; height: 11px; color: rgba(29,31,32,0.55); pointer-events: none; }
.blueprint > .corner::before, .blueprint > .corner::after { content: ""; position: absolute; background: currentColor; }
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-small);
  letter-spacing: .07em; text-transform: uppercase; line-height: 1.2;
  color: var(--ink); background: transparent; border: 1px solid var(--divider); padding: 8px 14px;
}
.btn-primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-700); }
.btn-navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-secondary:hover { background: rgba(29,31,32,.07); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── INPUTS ── */
/* 16px, not 14: under the body floor iOS force-zooms every focused field. */
.input {
  min-height: 40px; padding: 8px 11px; font: inherit; font-size: var(--fs-body);
  color: var(--ink); background: #fff; border: 1px solid var(--divider);
}
.input:focus { outline: none; border-color: var(--navy); }

/* ── PILLS ── */
.pill { font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; white-space: nowrap; }
.pill-src { background: var(--accent-100); color: var(--accent-800); }
.pill-red { background: var(--red-100); color: var(--red-700); }
.pill-solid-red { background: var(--red); color: #fff; }
.pill-ghost { border: 1px solid var(--divider); color: var(--muted); background: #fff; cursor: pointer; }
.pill-ghost:hover { border-color: var(--navy); color: var(--navy); }
.pill-jt { background: #eaf6ec; color: #14662d; }

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.pulse { animation: pulse 2.4s ease-in-out infinite; }

/* ── TOPBAR ── */
.topbar {
  background: var(--navy); color: #fff; border-bottom: 3px solid var(--red);
  display: flex; align-items: center; gap: 14px; padding: 10px 18px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 100;
}
.logo-chip { display: flex; align-items: center; justify-content: center; width: 42px; height: 32px; background: #fff; padding: 3px; flex-shrink: 0; }
.logo-chip img { width: 100%; height: 100%; object-fit: contain; display: block; }
.app-title { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-display); letter-spacing: .02em; }
.nav-tabs { display: flex; border: 1px solid rgba(255,255,255,.28); }
.nav-tabs a {
  font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-small); letter-spacing: .09em;
  text-transform: uppercase; padding: 6px 13px; color: rgba(255,255,255,.7); text-decoration: none;
}
.nav-tabs a + a { border-left: 1px solid rgba(255,255,255,.28); }
.nav-tabs a.cur { background: var(--red); color: #fff; }
.sync-pill { display: flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid rgba(255,255,255,.28); font-size: var(--fs-micro); letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.user-badge { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-small); letter-spacing: .1em; padding: 4px 9px; border: 1px solid rgba(255,255,255,.3); text-transform: uppercase; cursor: pointer; }

/* ── STATUSBAR ── */
.statusbar {
  display: flex; align-items: center; gap: 16px; padding: 9px 18px;
  background: #fff; border-bottom: 1px solid var(--divider); font-size: var(--fs-small); flex-wrap: wrap;
}
.statusbar .day { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-small); letter-spacing: .14em; text-transform: uppercase; }
.conn { display: flex; align-items: center; gap: 5px; }
.conn .dot { width: 6px; height: 6px; border-radius: 50%; }
.scope-toggle { display: flex; border: 1px solid var(--divider); }
.scope-toggle button {
  border: 0; font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-small);
  letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; cursor: pointer;
  background: #fff; color: var(--muted);
}
.scope-toggle button + button { border-left: 1px solid var(--divider); }
.scope-toggle button.on { background: var(--navy); color: #fff; }

/* ── SECTION HEADS ── */
.sec-head { display: flex; align-items: center; gap: 10px; }
.sec-label { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-small); letter-spacing: .16em; text-transform: uppercase; color: #fff; padding: 3px 10px; }
.sec-sub { font-size: var(--fs-small); color: var(--muted); }
.sec-rule { flex: 1; height: 2px; }
.card-kicker { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-small); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }

/* ── DIALOGS ── */
.dialog-backdrop { position: fixed; inset: 0; display: none; place-items: center; padding: 14px; background: rgba(43,43,45,.5); z-index: 200; }
.dialog-backdrop.open { display: grid; }
.dialog { width: min(520px,100%); background: #fff; border: 1px solid var(--divider); box-shadow: 0 12px 32px rgba(43,43,45,.22); max-height: 88vh; overflow-y: auto; position: relative; }
.dlg-head { padding: 14px 18px; background: var(--navy); color: #fff; border-bottom: 3px solid var(--red); display: flex; align-items: center; gap: 10px; }
.dlg-title { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-display); flex: 1; }
.dlg-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.pick-row { padding: 10px 12px; border: 1px solid var(--divider); cursor: pointer; font-size: var(--fs-small); }
.pick-row:hover { background: var(--accent-100); border-color: var(--navy); }

/* ── TOAST ── */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--navy-deep); color: #fff; border-bottom: 3px solid var(--red);
  padding: 11px 16px; font-size: var(--fs-small); font-weight: 600; z-index: 300;
  opacity: 0; pointer-events: none; transition: opacity .2s; max-width: 92vw;
}
.toast.show { opacity: 1; }
.toast.err { background: var(--red); }