/* BASE — element defaults. Values come from tokens.css only. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font: var(--weight-regular) var(--text-body) / var(--leading-body) var(--font-sans);
  letter-spacing: var(--tracking-body); -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; letter-spacing: var(--tracking-heading); font-weight: var(--weight-semibold); }
h1 { font-size: var(--text-h1); line-height: var(--leading-tight); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-lg); }
p { margin: 0; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); margin-bottom: var(--space-xs); }

input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=time], input[type=search], textarea {
  width: 100%; height: var(--control-h); padding: 0 var(--field-padding-x);
  border: var(--border-strong); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text); font: inherit;
  transition: border-color var(--dur-base), box-shadow var(--dur-base); appearance: none; -webkit-appearance: none;
}
/* Safari/Chrome add their own inner padding to date boxes; remove it so the text lines up with every other box. */
input[type=date], input[type=time] { display: flex; align-items: center; min-width: 0; line-height: normal; }
input[type=date]::-webkit-date-and-time-value, input[type=time]::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 0; }
input[type=date]::-webkit-datetime-edit, input[type=date]::-webkit-datetime-edit-fields-wrapper, input[type=time]::-webkit-datetime-edit, input[type=time]::-webkit-datetime-edit-fields-wrapper { padding: 0; margin: 0; }
input[type=date]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator { margin: 0; padding: 0; opacity: var(--opacity-icon); cursor: pointer; }   /* quiet calendar/clock icon (native picker kept for phones) */
input:focus, textarea:focus { border-color: var(--color-focus); }

/* ---- keyboard focus: ONE ring for every control (token --focus-ring, colour --color-focus, 3:1 on every surface) ----
   Anything that can be focused shows the outline below. Controls that sit inside a clipped or tight frame, and every field, use the same ring
   as a shadow instead (the group right after it). Never add a focus style anywhere else: add the control to this group, or give it the class focus-ring. */
:focus-visible { outline: var(--focus-outline-w) solid var(--color-focus); outline-offset: var(--focus-outline-offset); }
input:focus, textarea:focus, .select-btn:focus, .select-option:focus-visible, .select.open .select-btn, .menu-btn:focus-visible, .menu-item:focus-visible, button.chip:focus-visible,
.grip:focus-visible, .search-clear:focus-visible, .th-sort:focus-visible, .switch input:focus-visible + i, .focus-ring:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.th-sort:focus-visible { border-radius: var(--radius-sm); }

/* ---- hidden attribute always wins (used to show/hide form sections) ---- */
[hidden] { display: none !important; }

textarea { height: auto; min-height: var(--textarea-min-h); padding: var(--space-md) var(--field-padding-x); resize: none; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }   /* no native up/down spinner; prices are typed */
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: var(--space-0); }
input[type=file] { display: none; }
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }   /* no native clear (x) button; the box looks like every other field */
input[type=checkbox], input[type=radio] { accent-color: var(--color-primary); width: var(--check-size); height: var(--check-size); flex: none; }

/* ---- scroll bars: one themed style for everything that scrolls (sheets, tables, lists, menus, the page) ----
   The standard properties give a thin bar with no arrow buttons in Chrome, Edge, Firefox and current Safari, and the bar is clipped by rounded corners.
   Setting ::-webkit-scrollbar anywhere would switch WebKit to its older permanent-track bar (not clipped, looks native), so those rules only
   exist inside the @supports block, for browsers that do not know the standard properties yet. */
* { scrollbar-width: thin; scrollbar-color: var(--color-scroll-thumb) transparent; }
@supports not (scrollbar-width: thin) {
  *::-webkit-scrollbar { width: var(--scroll-w); height: var(--scroll-w); }
  *::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
  *::-webkit-scrollbar-button { display: none; }
  *::-webkit-scrollbar-thumb { background: var(--color-scroll-thumb); background-clip: padding-box; border: var(--scroll-gap) solid transparent; border-radius: var(--radius-pill); }
  *::-webkit-scrollbar-thumb:hover { background: var(--color-scroll-thumb-hover); background-clip: padding-box; }
  .seg.tabs::-webkit-scrollbar { display: none; }
}
/* the tab row scrolls sideways without a visible bar (it fades at the edge instead; see .seg.tabs in components.css) */
.seg.tabs { scrollbar-width: none; }