/* GENERATED from web/ui.css by scripts/sync-public-css.sh — do not edit.
 * The marketing site is its own Cloud Run service and needs the components on
 * its own origin. Edit the component block in web/ui.css and re-run. */

/* Shared UI components — the one place button styles live so they're consistent
   across the viewer, editor, admin, and settings. Relies on each host page's
   design tokens; falls back if a token is missing.

   Site convention: uppercase, slightly tracked. Default = ghost (outline);
   .primary = accent fill; .danger = red outline; .tiny / .icon size modifiers. */
.btn {
  font: 600 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
  padding: 7px 13px; border-radius: var(--r-sm, 6px);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; color: var(--muted, #8b93a4);
  border: 1px solid var(--border-strong, rgba(255,255,255,.18));
  transition: color .12s, border-color .12s, filter .12s, background .12s;
}
.btn:hover:not(:disabled) { color: var(--fg, #d2d6df); border-color: var(--border-strong-hi, rgba(255,255,255,.4)); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--accent, #2d6bbf); color: #fff; border-color: var(--accent, #2d6bbf); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.1); }
.btn.danger { color: #ff8a90; border-color: var(--danger, #e0454e); }
.btn.danger:hover:not(:disabled) { background: rgba(224,69,78,.12); }
.btn.tiny { font-size: 10px; padding: 4px 9px; letter-spacing: .06em; }
.btn.icon { padding: 0; width: 26px; height: 26px; }
.btn.lg { padding: 11px 22px; border-radius: 8px; letter-spacing: .08em; }   /* hero CTAs */
/* Borderless variant — no outline, subtle fill on hover (the DRAW / rail-icon
   treatment). For menu & toolbar actions where a ghost outline reads too heavy. */
.btn.plain { border-color: transparent; }
.btn.plain:hover:not(:disabled) { background: rgba(255,255,255,.06); border-color: transparent; }
/* Selected state for a plain toggle-button group (e.g. the composite Both/Monthly
   /Weekly tabs): brighter text + a persistent fill a touch stronger than hover. */
.btn.plain.active { color: #fff; background: rgba(255,255,255,.09); border-color: transparent; }

/* Text fields — inputs, textareas, selects. One source so every form box shares
   the same surface, border, radius, and focus treatment. Was forked 6 ways
   (3/5/6/8px radii, 5 backgrounds, 4 focus styles) across the pages.
   (Named .input, not .field — several pages already use .field for row groups.) */
.input {
  font: 13px/1.4 var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  color: var(--fg, #d2d6df);
  background: var(--card-hi, var(--field-bg, var(--card, #12151c)));
  border: 1px solid var(--border-strong, var(--border, rgba(255,255,255,.14)));
  border-radius: var(--r-sm, 6px);
  padding: 7px 10px; outline: none; box-sizing: border-box;
  transition: border-color .12s, background .12s;
}
.input:focus { border-color: var(--border-strong-hi, var(--border-hi, var(--accent, #2d6bbf))); }
.input::placeholder { color: var(--muted, #8b93a4); }
.input.tiny { font-size: 11px; padding: 4px 8px; }
textarea.input { resize: vertical; }
/* Filter / search box: placeholder reads uppercase to match the site voice. */
.input.filter { letter-spacing: .05em; }
.input.filter::placeholder { text-transform: uppercase; letter-spacing: .08em; }

/* Status pill — small uppercase mono tag. Base only; pages add their own
   semantic color variants (e.g. .pill.live green, .pill.plan amber) since those
   colors are page-specific. Was duplicated as .pill (docs) and .soon (help). */
.pill {
  display: inline-block;
  font: 600 10px/1 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--border-hi, var(--border-strong, rgba(255,255,255,.18)));
  color: var(--muted, #8b93a4);
}

/* Account bar — the per-user brokerage-account selector (see web/accounts.js).
   One user can run the same strategy in several accounts, so every page that
   reads or writes positions carries this bar. Shared here rather than per page
   because the viewer, the positions editor, and the SPY-Hedge dashboard all
   show it and it must look and behave the same on each. */
.acctbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card, #0d0f13);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: var(--r-sm, 6px);
  padding: 8px 12px; margin: 0 0 14px;
}
.acctbar .acctlabel {
  font: 600 10px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #8b93a4);
}
.acctbar select.input { min-width: 210px; padding: 5px 8px; font-size: 12px; }
.acctbar .acctnote { color: var(--muted, #8b93a4); font-size: 12px; text-transform: none; letter-spacing: normal; }
.acctbar .acctnote.err { color: #ff8a90; }
/* The rollup reads several books at once and cannot be edited, so the bar says so in its own color. */
.acctbar.rollup { border-color: rgba(74,158,255,.28); background: rgba(74,158,255,.07); }
/* Inline name field for add / rename. A page must never open a browser prompt() —
   it blocks the whole tab and the automated screenshot checks with it. */
.acctbar .acctform { display: flex; align-items: center; gap: 8px; }
.acctbar .acctform .input { width: 200px; padding: 5px 8px; font-size: 12px; }