/* Base components of the Nods Office UI (NOD-154), class names as in the accepted mockups so screens can follow them.
   Needs tokens.css first. Not loaded by today's office pages, whose style.css uses some of the same class names. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--text-body)/var(--leading) var(--body); }
::selection { background: var(--amber); color: var(--on-amber); }
button, select, textarea, input { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; font-family: var(--pix); font-weight: 700; letter-spacing: .02em; line-height: 1.2; text-wrap: balance; }
h1 { font-size: var(--text-h1); } h2 { font-size: var(--text-h2); } h3 { font-size: var(--text-h3); }
p { margin: 0; }
/* Numbers stay in Space Grotesk, also inside pixel headings. */
.num, .n, .vn { font-family: var(--body); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
code, .mono { font-family: var(--mono); font-size: var(--text-s); }

/* pixel frames */
.paper { border: var(--frame) solid transparent; border-image: var(--f-paper) 4 fill / var(--frame) stretch; }
.cream { border: var(--frame) solid transparent; border-image: var(--f-cream) 4 fill / var(--frame) stretch; }
.panel { border: var(--frame) solid transparent; border-image: var(--f-paper) 4 fill / var(--frame) stretch; padding: var(--space-3) var(--space-4) var(--space-5); }

/* buttons: cream by default, amber for the one main action, red only for risky ones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: var(--tap-btn); padding: 0 14px; border: var(--frame) solid transparent; border-image: var(--f-cream) 4 fill / var(--frame) stretch; background: none; color: var(--ink); font: 700 var(--text-body) var(--body); cursor: pointer; text-decoration: none; text-align: center; }
.btn.primary { border-image-source: var(--f-amber); color: var(--on-amber); }
.btn.danger { border-image-source: var(--f-red); color: var(--on-red); }
.btn.small { min-height: var(--tap); font-size: var(--text-m); padding: 0 var(--space-3); }
.btn.big { min-height: var(--tap-big); font-size: var(--text-field); width: 100%; }
.btn.block { width: 100%; }
.btn.quiet { border-image-source: none; border-color: transparent; text-decoration: underline; text-underline-offset: 4px; }
.btn:active:not(:disabled) { transform: translateY(2px); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; filter: grayscale(.85); opacity: .7; }
.btn svg, .link svg { width: 18px; height: 18px; flex: none; shape-rendering: crispEdges; }
.link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-1); border: 0; background: none; color: var(--ink); font: 600 var(--text-body) var(--body); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.link.danger { color: var(--red-ink); }

/* risky actions (NOD-262), behaviour in web/ds/hold.js: the fill grows while the finger stays down */
.risk { display: grid; gap: var(--space-3); justify-items: start; }
.hold { position: relative; overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.hold .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--hold-fill); pointer-events: none; }
.hold.primary .fill { background: var(--hold-fill-primary); }
.hold.holding .fill { width: 100%; transition: width var(--hold-ms) linear; }
/* The fill is the timer, so reduced motion keeps its linear growth (QA C-20) while every other transition stops. */
@media (prefers-reduced-motion: reduce) { .hold.holding .fill { transition-duration: var(--hold-ms) !important; } }
.hold > span { position: relative; }
.confirm { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius); background: var(--p-amber-b); justify-items: start; }
.confirm.danger { background: var(--p-red-b); }
.confirm p { max-width: 60ch; }

/* chips: a pressable tag with the cream frame, amber when on */
.chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-2); border: var(--frame) solid transparent; border-image: var(--f-cream) 4 fill / var(--frame) stretch; background: none; color: var(--ink); font: 700 var(--text-m) var(--body); cursor: pointer; white-space: nowrap; text-decoration: none; }
.chip.on, .chip[aria-current="page"], .chip[aria-pressed="true"] { border-image-source: var(--f-amber); color: var(--on-amber); }
.chip:active { transform: translateY(2px); }
.chip svg { width: 18px; height: 18px; shape-rendering: crispEdges; }

/* pills: one style for every tag and state, a dot or icon, sentence case */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 0 var(--space-3); min-height: 22px; border-radius: var(--radius); font: 600 var(--text-xs)/1 var(--body); white-space: nowrap; background: var(--p-grey-b); color: var(--p-grey-f); vertical-align: middle; }
.pill > i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.pill.blue { background: var(--p-blue-b); color: var(--p-blue-f); }
.pill.green { background: var(--p-green-b); color: var(--p-green-f); }
.pill.amber { background: var(--p-amber-b); color: var(--p-amber-f); }
.pill.red { background: var(--p-red-b); color: var(--p-red-f); }
.pill.purple { background: var(--p-purple-b); color: var(--p-purple-f); }
.badge { min-width: 24px; height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-round); background: var(--red); color: var(--on-red); border: 2px solid var(--ink); font: 700 var(--text-s)/20px var(--body); font-variant-numeric: tabular-nums; text-align: center; }
.mpill, .flame { display: inline-flex; align-items: center; gap: 5px; font: 600 var(--text-s) var(--body); white-space: nowrap; }
.flame { gap: 3px; }
svg.fl, .prov { display: block; shape-rendering: crispEdges; flex: none; }
.prov { width: 13px; height: 13px; }

/* fields */
.lab { display: block; margin-bottom: var(--space-2); font: 700 var(--text-s) var(--body); letter-spacing: .02em; color: var(--muted); }
.field { width: 100%; min-height: 48px; font: var(--text-field) var(--body); padding: var(--space-4) var(--space-5); border: 2px solid var(--ink); background: var(--field); color: var(--ink); border-radius: 0; }
.field.mono { font: var(--text-body) var(--mono); }
.field[aria-invalid="true"] { border-color: var(--red-ink); box-shadow: inset 0 0 0 1px var(--red-ink); }
.field::placeholder { color: var(--muted); opacity: 1; }
.hint { font-size: var(--text-s); color: var(--muted); }
.err { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--red-ink); font: 600 var(--text-m) var(--body); }

/* callouts: tinted box with an icon, no side stripe */
.callout { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-1) var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius); background: var(--p-amber-b); color: var(--ink); }
.callout b { display: block; }
.callout > svg { width: 20px; height: 20px; margin-top: 1px; shape-rendering: crispEdges; }
.callout.info { background: var(--p-blue-b); } .callout.danger { background: var(--p-red-b); }
.callout.good { background: var(--p-green-b); } .callout.neutral { background: var(--tint); }

/* raw command or config: always first, always mono, always on the dark block */
.raw { margin: 0; padding: var(--space-4) var(--space-5); background: var(--code-bg); color: var(--code); font: var(--text-s)/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; border: 2px solid #2a2036; }

/* sheets: rise from the bottom over a scrim, on a wide screen the page decides where they sit */
.scrim { position: fixed; inset: 0; z-index: 8; background: var(--scrim); }
.sheet { position: fixed; z-index: 9; left: 0; right: 0; bottom: 0; max-height: 82dvh; overflow: auto; padding: var(--space-1) var(--space-2) calc(var(--space-4) + var(--safe-b)); animation: ds-up var(--dur-sheet) var(--ease-pixel); }
@keyframes ds-up { from { transform: translateY(30%); } }
.sheet-head, .dlg-h { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.sheet-head h2, .dlg-h h2 { flex: 1; font-size: 18px; }
.grab { width: 40px; height: 4px; border-radius: 2px; background: var(--paper-lo); margin: 2px auto var(--space-3); }

/* dialogs: a native <dialog> opened with showModal() traps focus and closes on Escape (QA M8) */
dialog { padding: 0; border: 0; background: none; color: var(--ink); max-width: min(480px, calc(100vw - 16px)); width: 100%; max-height: calc(100dvh - 32px); }
dialog::backdrop { background: var(--backdrop); }
dialog .panel { max-height: calc(100dvh - 40px); overflow: auto; display: grid; gap: var(--space-5); }

/* toast: above the dock, never over buttons, its box swallows taps, nothing under it is hit by accident (QA M5, F1) */
.toast { position: fixed; z-index: 40; top: auto; right: auto; margin: 0; left: 50%; transform: translateX(-50%); bottom: calc(var(--dock-h) + 16px + var(--safe-b)); width: max-content; max-width: calc(100vw - 24px); display: flex; gap: var(--space-4); align-items: center; padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4); font-weight: 700; }