/* base.css: reset, type, focus, motion, utilities (P1.T3.S1). Tokens only: no literal colour, length, radius, shadow or
   z-index outside tokens.css (L-01), logical properties only (L-04). Component and shell CSS live in other files. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--canvas);
  color: var(--text);
  /* A focused or anchored element is never hidden under a sticky bar (WCAG 2.4.11). */
  scroll-padding-block-start: calc(var(--sticky-offset, var(--size-topbar)) + var(--space-5));
}

body {
  margin: 0;
  min-block-size: 100%;
  font: var(--type-body);
  color: var(--text);
  background: var(--canvas);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

/* Titles and text elements. Text-bearing elements set min-block-size, never a fixed block-size (WCAG 1.4.12). */
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}

h1 { font: var(--type-page); }
h2 { font: var(--type-section); }
h3, h4, h5, h6 { font: var(--type-sub); }

p, li, dd {
  max-inline-size: var(--size-prose);
}

ul, ol {
  padding-inline-start: var(--space-7);
}

small { font: var(--type-caption); }
strong, b { font-weight: 600; }
code, kbd, samp, pre { font: inherit; } /* monospace exists only inside a raw network message (02 Boundaries) */

/* Type utilities, one per type token. */
.t-page { font: var(--type-page); }
.t-section { font: var(--type-section); }
.t-sub { font: var(--type-sub); }
.t-body { font: var(--type-body); }
.t-button { font: var(--type-button); }
.t-table { font: var(--type-table); }
.t-label { font: var(--type-label); }
.t-caption { font: var(--type-caption); }
.t-figure { font: var(--type-figure); }
.t-card { font: var(--type-card); }
.t-mono { font: var(--type-mono); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }

/* Links: brand colour; underlined always in running text, on hover and focus elsewhere. */
a {
  color: var(--brand);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
p a,
li a,
.prose a {
  text-decoration: underline;
  text-decoration-thickness: var(--border-width);
  text-underline-offset: var(--space-1);
}

/* Form controls inherit type; components restyle them. */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button {
  cursor: pointer;
}
button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}
button[aria-disabled="true"],
button:disabled {
  color: var(--text-disabled);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
th,
td {
  padding: 0;
  text-align: start;
  font-weight: inherit;
}

/* Numeric cells and numerals (DQ-06, L-06): tabular lining numerals, end-aligned in numeric columns, while
   identifiers and dates stay start-aligned. */
.num,
[data-num],
[data-figure-id] {
  font-variant-numeric: tabular-nums lining-nums;
}
th[data-type="num"],
td[data-type="num"] {
  text-align: end;
  font-variant-numeric: tabular-nums lining-nums;
}
th[data-type="id"],
td[data-type="id"],
th[data-type="date"],
td[data-type="date"] {
  text-align: start;
}

img,
svg,
video {
  max-inline-size: 100%;
}

hr {
  border: 0;
  border-block-start: var(--border-width) solid var(--border);
  margin: var(--space-5) 0;
}

[hidden] {
  display: none !important;
}

/* Icons: Tabler outline from the sprite, currentColor, one size per context (02 Heights and icons). */
.icon {
  flex: none;
  inline-size: var(--icon-sm);
  block-size: var(--icon-sm);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.icon-xs { inline-size: var(--icon-xs); block-size: var(--icon-xs); stroke-width: var(--icon-stroke-chip); }
.icon-sm { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.icon-md { inline-size: var(--icon-md); block-size: var(--icon-md); }
.icon-lg { inline-size: var(--icon-lg); block-size: var(--icon-lg); }
[dir="rtl"] .icon-mirror {
  transform: scaleX(-1);
}

/* Focus ring (02 Global state recipe): 2 px brand outline, 2 px offset, never shown for mouse clicks. Inside clipped
   containers the ring sits inside the edge so it is not cut off. */
:focus-visible {
  outline: var(--border-width-thick) solid var(--focus-ring);
  outline-offset: var(--space-2);
}
:focus:not(:focus-visible) {
  outline: none;
}
table :focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="option"]:focus-visible,
.focus-inset:focus-visible {
  outline-offset: calc(-1 * var(--border-width-thick));
}
main:focus,
[tabindex="-1"]:focus {
  outline: none;
}

.visually-hidden {
  position: absolute;
  inline-size: var(--border-width);
  block-size: var(--border-width);
  margin: calc(-1 * var(--border-width));
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(100%);
  white-space: nowrap;
}

/* Arabic: more line height, never italic or letter-spaced. Titles take the smaller ratio. Table rows keep their fixed
   height, so an Arabic row matches a Latin row (RT-03). !important because the ratio is a hard rule of 02 and a component's
   `font` shorthand would otherwise reset it. */
:lang(ar) {
  line-height: var(--lh-arabic) !important;
  font-style: normal;
  letter-spacing: 0;
}
:lang(ar) *:not(h1):not(.t-page) {
  line-height: var(--lh-arabic) !important;
}
h1:lang(ar),
:lang(ar) h1,
.t-page:lang(ar),
:lang(ar) .t-page {
  line-height: var(--lh-arabic-page) !important;
}

/* Reduced motion: every transition is instant; state changes stay visible. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}