/* Salestools light card (shared, byte-equal in renderer/ and IOS/). Theme tokens only, so the
   dark / light / sierra themes all apply; fallbacks keep it legible where a token is missing. */
.stl-card { box-sizing: border-box; margin: 10px 0; padding: 14px 16px; border: 1px solid var(--accent-line, var(--line)); border-radius: 14px; background: var(--surface-1, var(--bg-2, transparent)); color: var(--text); font: 400 13px/1.5 var(--sans, system-ui); max-width: 560px; }
.stl-head { display: flex; align-items: center; gap: 8px; }
.stl-title { flex: 1; min-width: 0; font-weight: 650; font-size: 14px; color: var(--text); }
.stl-tag { font: 600 11px/1.2 var(--mono, var(--sans, system-ui)); padding: 3px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-2, var(--text)); }
.stl-sub { margin-top: 4px; color: var(--text-2, var(--text)); }
.stl-disclosure { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2, transparent); border: 1px solid var(--line); color: var(--text-2, var(--text)); font-size: 12.5px; overflow-wrap: anywhere; }
.stl-disclosure.stl-accepted { opacity: .75; }
.stl-terms, .stl-open { display: inline-block; margin-top: 8px; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; font-size: 12.5px; }
.stl-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.stl-acts[hidden], .stl-crm[hidden] { display: none; }
.stl-crm-t { margin-top: 12px; font-weight: 600; color: var(--text); }
.stl-btn { min-height: 36px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2, transparent); color: var(--text); font: 600 13px/1.2 var(--sans, system-ui); cursor: pointer; }
.stl-btn.primary { background: var(--accent); border-color: var(--accent-line, var(--accent)); color: var(--on-accent, #fff); }
.stl-btn.tertiary { background: transparent; border-color: transparent; color: var(--text-2, var(--text)); }
.stl-btn.danger { color: var(--danger, #e5484d); border-color: var(--danger, #e5484d); background: transparent; }
.stl-btn:disabled { opacity: .55; cursor: default; }
.stl-btn:focus-visible, .stl-terms:focus-visible, .stl-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stl-msg { margin-top: 8px; min-height: 0; color: var(--text-2, var(--text)); font-size: 12.5px; }
.stl-msg:empty { display: none; }
.stl-msg.warn { color: var(--warn, var(--danger, #c77d00)); }
.stl-msg.ok { color: var(--ok, var(--text)); }
.stl-card.stl-dismissed { opacity: .6; }
.stl-sheet { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 16px; background: #0007; }
.stl-sheet-box { box-sizing: border-box; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 12px 16px 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface-1, var(--bg, #fff)); }
.stl-sheet-box .stl-card { margin: 0; max-width: none; border: 0; padding: 4px 0; background: transparent; }
.stl-close { margin-top: 8px; }
.stl-set-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.stl-set-text { flex: 1; min-width: 0; }
.stl-set-t { font-weight: 600; color: var(--text); }
.stl-set-d { margin-top: 2px; font-size: 12.5px; color: var(--text-2, var(--text)); }
.stl-set-note { padding: 0 14px 12px; font-size: 12.5px; line-height: 1.5; color: var(--text-2, var(--text)); }
.stl-set-note .stl-terms { margin-top: 0; }
@media (max-width: 600px) {
  .stl-btn { min-height: 44px; }
  .stl-sheet { align-items: flex-end; padding: 0; }
  .stl-sheet-box { border-radius: 24px 24px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}