/* Control base styles: reset, typography, forms, RTL and accessibility. */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-block-start: calc(var(--topbar-height) + 1rem); }

body {
  margin: 0;
  min-block-size: 100vh;
  background-color: var(--bg-page);
  color: var(--text-main);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5rem 0;
  color: var(--dark-midnight);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
h1 { font-size: 1.5rem; font-weight: 800; }
h2 { font-size: 1.15rem; font-weight: 750; }
h3 { font-size: 0.95rem; font-weight: 700; }

p { margin: 0 0 0.75rem 0; }

a {
  color: var(--primary-hover);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--primary-dark); }
/* Links inside content are underlined so they are not colour-only. */
.card a:not(.button), .data-table a, .breadcrumbs a, .pagination a, .meta-grid a { text-decoration: underline; text-underline-offset: 0.15em; }

code, .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--bg-ice-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: 0.05rem 0.35rem;
  direction: ltr;
  unicode-bidi: isolate;
}

label {
  display: grid;
  gap: 0.45rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-main);
  text-align: start;
}
/* The required mark shares the label's text row instead of becoming a
   grid row of its own; the text explaining it sits above each form. */
.required-mark { margin-inline-start: 0.2em; color: var(--danger); font-weight: 800; }
label:has(> .required-mark) { display: block; }
label:has(> .required-mark) > input, label:has(> .required-mark) > select, label:has(> .required-mark) > textarea, label:has(> .required-mark) > .card-hint { display: block; margin-block-start: 0.45rem; }

input, textarea, select {
  inline-size: 100%;
  min-block-size: 2.85rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 0.95rem;
  background: var(--bg-surface);
  color: var(--text-main);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Placeholders are hints, not values, but they still need 4.5:1 (the browser default is about 2.3:1 on white). */
::placeholder { color: var(--public-text-muted); opacity: 1; }
input:focus, textarea:focus, select:focus {
  outline: var(--focus-outline);
  outline-offset: 1px;
  border-color: var(--primary-hover);
  box-shadow: var(--focus-ring);
}

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  inline-size: fit-content;
  min-block-size: 2.85rem;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--primary-hover);
  color: var(--public-on-action);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
button:hover, .button:hover { background: var(--primary-dark); color: var(--public-on-action); }
button:focus-visible, .button:focus-visible, a:focus-visible, [tabindex="0"]:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid CanvasText; }
}
.button-secondary {
  background: var(--bg-surface);
  color: var(--primary-dark);
  border: 1px solid var(--border);
}
.button-secondary:hover { background: var(--bg-ice-subtle); color: var(--primary-dark); }
.button-danger { background: var(--danger); }
.button-danger:hover { background: var(--union-danger-hover); }
.button-block { inline-size: 100%; }

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -5rem;
  padding: 0.75rem 1.25rem;
  background: var(--bg-surface);
  color: var(--primary-dark);
  font-weight: 600;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 100;
}
.skip-link:focus { inset-block-start: 1rem; }

.visually-hidden {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* Numbers and identifiers read left-to-right in both directions; times
   are isolated only, so Arabic relative phrases keep their word order. */
.num, td.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
time { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }

[dir="rtl"] body { text-align: start; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- Shared choice controls and select (one implementation) -------------
   Checkbox and radio: a 1.25rem painted box with a 2.75rem hit area. The mark
   is a clip-path shape, so no image is needed (the CSP allows none inline).
   Radio cards, segments and feature rows keep a real input and restyle only the
   label around it, so they inherit this look; nothing here hides an input. */
input[type=checkbox], input[type=radio] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: inline-grid;
  flex: none;
  place-content: center;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  min-block-size: 0;
  margin: 0;
  padding: 0;
  border: 2px solid var(--public-field-border);
  border-radius: var(--radius-xs, 0.3rem);
  background-color: var(--public-surface);
  color: var(--public-on-action);
  vertical-align: middle;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type=radio] { border-radius: 50%; }
input[type=checkbox]::before, input[type=radio]::before {
  content: "";
  inline-size: 0.8rem;
  block-size: 0.8rem;
  background: currentColor;
  transform: scale(0);
  transition: transform 0.12s ease;
}
input[type=checkbox]::before { clip-path: polygon(14% 44%, 0 59%, 40% 100%, 100% 17%, 85% 0, 39% 66%); }
input[type=radio]::before { inline-size: 0.5rem; block-size: 0.5rem; clip-path: circle(50%); }
/* The hit area grows to 2.75rem square without moving the box. */
input[type=checkbox]::after, input[type=radio]::after {
  content: "";
  position: absolute;
  inset: -0.75rem;
}
input[type=checkbox]:hover:not(:disabled), input[type=radio]:hover:not(:disabled) { border-color: var(--public-action-hover); }
input[type=checkbox]:checked, input[type=radio]:checked,
input[type=checkbox]:indeterminate {
  /* The edge is the brand colour, not the action fill: in the dark theme the action blue is only 2.4:1 against the surface. */
  border-color: var(--state-selected-edge, var(--public-action));
  background-color: var(--public-action);
}
input[type=checkbox]:checked:hover:not(:disabled), input[type=radio]:checked:hover:not(:disabled),
input[type=checkbox]:indeterminate:hover:not(:disabled) {
  border-color: var(--public-action-hover);
  background-color: var(--public-action-hover);
}
input[type=checkbox]:checked::before, input[type=radio]:checked::before,
input[type=checkbox]:indeterminate::before { transform: scale(1); }
input[type=checkbox]:indeterminate::before { clip-path: polygon(0 38%, 100% 38%, 100% 62%, 0 62%); }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}
input[type=checkbox][aria-invalid=true], input[type=radio][aria-invalid=true] { border-color: var(--public-danger-ink); }
input[type=checkbox]:disabled, input[type=radio]:disabled {
  border-color: var(--public-border);
  background-color: var(--public-hover);
  color: var(--public-muted);
  cursor: not-allowed;
}
input[type=checkbox]:disabled:checked, input[type=radio]:disabled:checked,
input[type=checkbox]:disabled:indeterminate { background-color: var(--public-border-strong); }
@media (forced-colors: active) {
  /* Windows high contrast: hand the control back to the system. */
  input[type=checkbox], input[type=radio] {
    appearance: auto;
    -webkit-appearance: auto;
    border: revert;
    background-color: revert;
    accent-color: Highlight;
  }
  input[type=checkbox]::before, input[type=radio]::before { content: none; }
}

/* Select: closed state is the same everywhere, 2.75rem tall with a chevron
   drawn by gradients. The chevron sits at the inline end, mirrored in RTL. */
select:not([multiple], [size]) {
  appearance: none;
  -webkit-appearance: none;
  min-block-size: var(--dafina-control-height);
  padding-inline-end: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.9rem) 50%;
  background-size: 0.4rem 0.4rem;
  background-repeat: no-repeat;
  cursor: pointer;
}
[dir=rtl] select:not([multiple], [size]) { background-position: 0.9rem 50%, 1.25rem 50%; }
select:disabled { background-color: var(--public-hover); color: var(--public-muted); cursor: not-allowed; }
@media (forced-colors: active) {
  select:not([multiple], [size]) { appearance: auto; -webkit-appearance: auto; }
}
/* Chromium 135+: the open list is styled too. Other browsers keep the native list. */
@supports (appearance: base-select) {
  select:not([multiple], [size]), select:not([multiple], [size])::picker(select) { appearance: base-select; }
  select:not([multiple], [size]), .public-pages select:not([multiple], [size]) { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background-image: none; padding-inline-end: 0.5rem; }
  select:not([multiple], [size])::picker-icon { color: var(--public-muted); transition: rotate 0.15s ease; }
  select:not([multiple], [size]):open::picker-icon { rotate: 180deg; }
  select::picker(select) {
    margin-block: 0.25rem;
    padding: 0.375rem;
    border: 1px solid var(--public-border);
    border-radius: var(--dafina-radius-md);
    background: var(--public-surface);
    color: var(--public-ink);
    box-shadow: var(--union-shadow-picker);
  }
  select option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: var(--dafina-control-height);
    padding-block: 0.25rem;
    padding-inline: 0.75rem;
    border-radius: var(--dafina-radius-sm);
    background: transparent;
    color: var(--public-ink);
    font-weight: 500;
    cursor: pointer;
  }
  select option:hover, select option:focus-visible { background: var(--public-hover); outline: none; }
  select option:checked { background: var(--public-tint); color: var(--public-brand); font-weight: 700; }
  select option:disabled { color: var(--public-muted); cursor: not-allowed; }
  select option::checkmark { color: var(--public-action); }
}
@media (forced-colors: active) {
  @supports (appearance: base-select) {
    select:not([multiple], [size]), select:not([multiple], [size])::picker(select) { appearance: auto; }
  }
}

/* File input: the button part follows the buttons. */
input[type=file] { min-block-size: var(--dafina-control-height); padding: 0.4rem 0.6rem; cursor: pointer; }
input[type=file]::file-selector-button {
  margin-inline-end: 0.875rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--public-border-strong);
  border-radius: var(--radius-md);
  background: var(--public-surface);
  color: var(--public-ink);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--public-hover); }

/* Date and time pickers: the field follows the other inputs; the popup follows
   the theme through color-scheme and accent-color. Chromium draws the popup
   grid itself, so that part can only be themed this far. */
input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week]) {
  color-scheme: light;
  accent-color: var(--public-action);
  min-inline-size: 0;
  font-variant-numeric: tabular-nums;
}
@media (prefers-color-scheme: dark) {
  input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week]) { color-scheme: dark; }
}
input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-datetime-edit { padding: 0; }
input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-datetime-edit-text { color: var(--public-muted); padding-inline: 0.1em; }
input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-datetime-edit-month-field:focus,
input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-datetime-edit-day-field:focus,
input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-datetime-edit-year-field:focus,
input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-datetime-edit-hour-field:focus,
input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-datetime-edit-minute-field:focus,
input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-datetime-edit-second-field:focus,
input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-datetime-edit-ampm-field:focus,
input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-datetime-edit-week-field:focus {
  background: var(--public-action);
  color: var(--public-on-action);
  border-radius: 0.2rem;
  outline: none;
}
input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-calendar-picker-indicator {
  box-sizing: content-box;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin: 0;
  margin-inline-start: 0.5rem;
  padding: 0.3rem;
  border-radius: var(--radius-sm);
  background: currentColor;
  background-image: none;
  color: var(--public-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / 1.15rem no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / 1.15rem no-repeat;
  cursor: pointer;
  opacity: 1;
  transition: color 0.15s ease;
}
input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])[type=time]::-webkit-calendar-picker-indicator {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-calendar-picker-indicator:hover { color: var(--public-action); }
input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-calendar-picker-indicator:focus-visible { color: var(--public-action); outline: var(--focus-outline); outline-offset: 1px; }
input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week]):disabled::-webkit-calendar-picker-indicator { cursor: not-allowed; opacity: 0.5; }
input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])[aria-invalid=true]::-webkit-calendar-picker-indicator { color: var(--public-danger-ink); }
@media (forced-colors: active) {
  input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week])::-webkit-calendar-picker-indicator { background: ButtonText; -webkit-mask: none; mask: none; background-image: revert; }
}