/* BMOS app — base components. Tokens + base elements (body, headings, links, .btn, focus) live in tokens.css.
   No hex, no raw font-size, no raw radius here: reference tokens only. See /DESIGN.md.
   Load order in every page: tokens.css → app.css → landing.css → sections.css. */

* { box-sizing:border-box; } [hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
.muted { color:var(--n6); } .faint { color:var(--n5); } .sm { font-size:var(--t-14); } .xs { font-size:var(--t-12); } .mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.wrap { width:min(1160px, 100% - 40px); margin:0 auto; } .inline { display:inline; margin:0; }
.card { background:var(--white); border:1px solid var(--n2); border-radius:var(--r-md); padding:20px; }
.pill { display:inline-flex; align-items:center; gap:5px; font-size:var(--t-12); font-weight:600; border-radius:var(--r-pill); padding:3px 10px; border:1px solid var(--n2); background:var(--n1); color:var(--n6); text-decoration:none; white-space:nowrap; }
.pill.ok { color:var(--ok); background:var(--ok-bg); border-color:var(--ok-line); } .pill.warn { color:var(--warn); background:var(--warn-bg); border-color:var(--warn-line); } .pill.bad { color:var(--bad); background:var(--bad-bg); border-color:var(--bad-line); } .pill.brand { color:var(--brand-ink); background:var(--brand-bg); border-color:var(--brand-line); } .pill.off { color:var(--n5); }
label.f { display:flex; flex-direction:column; gap:6px; font-size:var(--t-14); font-weight:600; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=search], select, textarea { font:inherit; font-size:var(--t-16); min-height:46px; padding:0 14px; border:1px solid var(--n3); border-radius:var(--r-md); background:var(--white); color:var(--n9); width:100%; transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
textarea { padding:var(--s-3) 14px; min-height:110px; resize:vertical; } input:focus, select:focus, textarea:focus { outline:none; box-shadow:var(--focus-ring); border-color:var(--brand-soft); }
.err { color:var(--bad); font-size:var(--t-14); font-weight:500; }
table.t { width:100%; border-collapse:collapse; background:var(--white); } table.t th { text-align:left; font-size:var(--t-12); color:var(--n5); font-weight:500; padding:10px 14px; background:var(--n1); border-bottom:1px solid var(--n2); } table.t td { padding:var(--s-3) 14px; border-bottom:1px solid var(--n2); font-size:var(--t-14); vertical-align:middle; } table.t tr:last-child td { border-bottom:0; }
.testbar { background:var(--n1); color:var(--n6); border:1px solid var(--n2); border-radius:var(--r-md); padding:var(--s-2) var(--s-3); font-size:var(--t-14); }
.origin { display:inline-flex; align-items:center; gap:6px; font-size:var(--t-12); font-weight:600; color:var(--brand-ink); background:var(--brand-bg); border:1px solid var(--brand-line); border-radius:var(--r-pill); padding:3px 10px 3px 6px; white-space:nowrap; }
.empty { text-align:center; padding:44px var(--s-4); display:flex; flex-direction:column; align-items:center; gap:10px; }
.toast { position:fixed; left:50%; bottom:var(--s-5); transform:translateX(-50%); background:var(--n9); color:var(--white); border-radius:var(--r-md); padding:10px var(--s-4); font-size:var(--t-14); z-index:1000; box-shadow:var(--shadow); }
/* marketing */
.logo { display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--n9); font-weight:800; letter-spacing:-.02em; white-space:nowrap; }
/* painel */
.plan { display:flex; flex-direction:column; gap:2px; background:var(--brand-bg); border:1px solid var(--brand-line); border-radius:var(--r-md); padding:10px var(--s-3); font-size:var(--t-14); }
@media (max-width: 860px) {
  h1 { font-size:var(--t-40); }}

/* pedidos e datas não quebram */
table.t td:first-child, table.t td:nth-child(2) { white-space:nowrap; }

/* ── Touch: no grey/blue tap flash; pressed states come from :active instead ── */
a, button, summary, label, [role="button"], [role="tab"] { -webkit-tap-highlight-color: transparent; }

/* ── Headings never leave one word alone on the last line; prose avoids orphans too ── */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd, figcaption, summary { text-wrap: pretty; }

/* ── In-page anchors land below the sticky header (64px desktop, 60px mobile) ── */
[id] { scroll-margin-top: calc(64px + var(--s-4)); }
@media (max-width: 860px) { [id] { scroll-margin-top: calc(60px + var(--s-4)); } }

/* ── Reduced motion: a safety net for any animation with a literal duration (tokens.css already zeroes --dur*).
   Loops stop, one-shot animations jump to their end state. No JS here waits on animationend/transitionend. ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important;
  }
}

/* ── Print: no sticky chrome, no ink-heavy dark panels ── */
@media print {
  .nv, .nv-skip, .toast { display: none !important; }
  body { background: var(--white); }
  .code, .dc-code, .dc-res, .dp-out, .st-dark, .final, [class*="-term"] {
    background: var(--white) !important; color: var(--n9) !important; border: 1px solid var(--n3); box-shadow: none !important;
  }
  .code *, .dc-code *, [class*="-term"] *, .final * { color: var(--n9) !important; }
}