/* Shared typography, layout, and components. Page styles own composition only. */
:root {
  --ui-font-body: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "Songti SC", "STSong", "SimSun", Georgia, serif;
  --ui-font-control: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-font-display: var(--ui-font-body);
  --ui-font-reading: var(--ui-font-body);
  --ui-font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --ui-size-fineprint: 0.75rem;
  --ui-size-supporting: 0.875rem;
  --ui-size-body: 1rem;
  --ui-size-section: 1.5rem;
  --ui-size-title: 2rem;
  --ui-weight-regular: 400;
  --ui-weight-bold: 700;
  --ui-leading-body: 1.6;
  --ui-leading-heading: 1.2;
  --ui-page-max: 48rem;
  --ui-page-gutter: clamp(1rem, 4vw, 2rem);
  --ui-space-1: 0.25rem;
  --ui-space-2: 0.5rem;
  --ui-space-3: 0.75rem;
  --ui-space-4: 1rem;
  --ui-space-6: 1.5rem;
  --ui-space-8: 2rem;
  --ui-panel-padding: var(--ui-space-4);
  --ui-section-padding: var(--ui-space-6);
  --ui-control-min-height: 2.75rem;
  --ui-context-min-height: 2.75rem;
  --ui-control-border-width: 1px;
  --ui-control-padding-block: var(--ui-space-2);
  --ui-control-padding-inline: var(--ui-space-3);
  --ui-radius-control: 0.4rem;
  --ui-radius-panel: 0.65rem;
  --ui-link: #3f3a31;
  --ui-link-hover: #171512;
  --ui-text-muted: #6b665b;
  --ui-text-muted-soft: #716c61;
  --ui-info: #075a9c;
  --ui-info-surface: #e8f3fb;
  --ui-success: #24613e;
  --ui-success-surface: #eef7f0;
  --ui-warning: #805b00;
  --ui-warning-surface: #fff7df;
  --ui-error: #98291d;
  --ui-error-surface: #fff0ed;
  font-family: var(--ui-font-body);
  font-size: var(--ui-size-body);
  font-weight: var(--ui-weight-regular);
  line-height: var(--ui-leading-body);
  letter-spacing: normal;
}

@media (min-width: 651px) {
  :root {
    --ui-panel-padding: var(--ui-space-6);
    --ui-section-padding: var(--ui-space-8);
  }
}

@media (min-width: 651px) and (hover: hover) and (pointer: fine) {
  :root {
    --ui-control-min-height: 2.25rem;
    --ui-context-min-height: 1.75rem;
    --ui-control-padding-block: var(--ui-space-1);
  }
}

.ui-container {
  width: min(calc(100% - var(--ui-page-gutter) - var(--ui-page-gutter)), var(--ui-page-max));
  min-width: 0;
  margin-inline: auto;
  overflow-wrap: anywhere;
}

.ui-title {
  margin: 0;
  font-family: var(--ui-font-display);
  font-size: var(--ui-size-title);
  font-weight: var(--ui-weight-regular);
  line-height: var(--ui-leading-heading);
}

.ui-heading {
  margin: 0 0 var(--ui-space-4);
  font-family: var(--ui-font-display);
  font-size: var(--ui-size-section);
  font-weight: var(--ui-weight-regular);
  line-height: var(--ui-leading-heading);
}

.ui-subheading {
  margin: 0 0 var(--ui-space-2);
  font-size: var(--ui-size-body);
  font-weight: var(--ui-weight-bold);
  line-height: var(--ui-leading-heading);
}

.ui-reading { font-family: var(--ui-font-reading); line-height: var(--ui-leading-body); }
.ui-code { font-family: var(--ui-font-mono); }
.ui-small { font-size: var(--ui-size-supporting); line-height: var(--ui-leading-body); }
.ui-fineprint { font-size: var(--ui-size-fineprint); line-height: var(--ui-leading-body); }
.ui-muted { color: var(--ui-text-muted); }
.ui-muted--soft { color: var(--ui-text-muted-soft); }
.ui-link { color: var(--ui-link); text-decoration-line: underline; text-decoration-style: dotted; text-underline-offset: 0.18em; }
.ui-link:hover { color: var(--ui-link-hover); }
.ui-link--accent { color: var(--tool-accent); }
.ui-link--accent:hover { color: var(--tool-accent-hover); }

/* Explicit layouts own their children's spacing, including native block margins. */
.ui-flow > * { margin-block: 0; }
.ui-flow > * + *,
.ui-flow > * + .ui-help { margin-block-start: var(--ui-space-4); }
.ui-flow > * + :is(.ui-heading, .ui-subheading) { margin-block-start: var(--ui-space-6); }
.ui-flow > :is(.ui-title, .ui-heading, .ui-subheading) + * { margin-block-start: var(--ui-space-2); }
.ui-flow > :is(ul, ol) { padding-inline-start: var(--ui-space-6); }
.ui-flow > :is(ul, ol) > li + li { margin-block-start: var(--ui-space-2); }
.ui-stack { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: var(--ui-space-6); }
.ui-stack > * { margin-block: 0; }
.ui-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); }
.ui-actions > * { margin-block: 0; }

.ui-button,
.ui-input,
.ui-select,
.ui-textarea,
.ui-file::file-selector-button {
  box-sizing: border-box;
  min-height: var(--ui-control-min-height);
  min-width: 0;
  max-width: 100%;
  border: var(--ui-control-border-width) solid var(--site-control-border);
  border-radius: var(--ui-radius-control);
  padding: var(--ui-control-padding-block) var(--ui-control-padding-inline);
  font: inherit;
  font-family: var(--ui-font-control);
  font-size: var(--ui-size-body);
  font-weight: var(--ui-weight-regular);
  line-height: var(--ui-leading-body);
}

.ui-button,
.ui-file::file-selector-button {
  border-color: var(--tool-accent-border);
  color: var(--tool-accent-strong);
  background: var(--site-panel-background);
  font-weight: var(--ui-weight-bold);
  cursor: pointer;
}

.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.ui-button:hover:not(:disabled),
.ui-file:not(:disabled)::file-selector-button:hover { background: var(--site-hover); }
.ui-button--primary { border-color: var(--tool-accent-border); color: var(--tool-on-accent); background: var(--tool-accent); }
.ui-button--primary:hover:not(:disabled) { color: var(--tool-on-accent); background: var(--tool-accent-hover); }
.ui-button--quiet { border-color: transparent; background: transparent; }
.ui-button--danger { border-color: var(--ui-error); color: var(--ui-error); }
.ui-button--danger:hover:not(:disabled) { background: var(--ui-error-surface); }
.ui-button:active:not(:disabled),
.ui-file:not(:disabled)::file-selector-button:active { box-shadow: inset 0 0 0 1px currentcolor; }
.ui-button[aria-pressed="true"] { border-color: var(--tool-accent-border); color: var(--tool-accent-strong); background: var(--tool-accent-soft); }
.ui-button[aria-pressed="true"]:hover:not(:disabled) { color: var(--tool-accent-strong); background: var(--tool-accent-notice); }
.ui-button--icon { width: var(--ui-control-min-height); flex: 0 0 var(--ui-control-min-height); padding-inline: var(--ui-control-padding-block); }
.ui-button--icon svg { width: 1.25rem; height: 1.25rem; fill: currentcolor; }

.ui-field { display: grid; min-width: 0; gap: var(--ui-space-2); }
.ui-group { min-width: 0; margin: 0; border: 0; padding: 0; }
.ui-group > legend { margin-bottom: var(--ui-space-2); padding: 0; }
.ui-label { display: block; font-family: var(--ui-font-control); font-size: var(--ui-size-body); font-weight: var(--ui-weight-bold); line-height: var(--ui-leading-body); }
.ui-help { margin: 0; color: var(--site-muted); font-family: var(--ui-font-body); font-size: var(--ui-size-supporting); font-weight: var(--ui-weight-regular); line-height: var(--ui-leading-body); }
.ui-help--error { color: var(--ui-error); }
.ui-input, .ui-select, .ui-textarea {
  width: 100%;
  color: var(--site-text);
  background: var(--site-surface);
}
/* Keep native selection behavior. Reserve space for an inset chevron. */
.ui-select:not([multiple]):not([size]),
.ui-select[size="1"]:not([multiple]) {
  appearance: none;
  padding-right: calc(var(--ui-control-padding-inline) + 1.5rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%234a4a43' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ui-control-padding-inline) center;
  background-size: 1rem 1rem;
}
@media (forced-colors: active) {
  .ui-select:not([multiple]):not([size]),
  .ui-select[size="1"]:not([multiple]) {
    appearance: auto;
    padding-right: var(--ui-control-padding-inline);
    background-image: none;
  }
}
.ui-textarea { display: block; min-height: 8rem; resize: vertical; }
.ui-input.ui-code, .ui-textarea.ui-code { font-family: var(--ui-font-mono); }
.ui-input[readonly], .ui-textarea[readonly] { background: var(--site-subtle-surface); }
.ui-input[aria-invalid="true"],
.ui-select[aria-invalid="true"],
.ui-textarea[aria-invalid="true"] {
  border-color: var(--ui-error);
  box-shadow: inset 0 0 0 var(--ui-control-border-width) var(--ui-error);
}
.ui-range { display: block; width: 100%; min-width: 0; min-height: var(--ui-control-min-height); margin: 0; accent-color: var(--tool-accent); cursor: pointer; touch-action: pan-y; }
.ui-choice { display: flex; min-height: var(--ui-control-min-height); align-items: center; gap: var(--ui-space-2); font-family: var(--ui-font-control); font-size: var(--ui-size-body); font-weight: var(--ui-weight-bold); line-height: var(--ui-leading-body); cursor: pointer; }
.ui-choice input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--tool-accent); }
.ui-file { min-width: 0; max-width: 100%; font: inherit; font-family: var(--ui-font-control); font-size: var(--ui-size-body); font-weight: var(--ui-weight-regular); line-height: var(--ui-leading-body); }
.ui-file::file-selector-button { margin-right: var(--ui-space-2); }

.ui-button:focus-visible,
.ui-input:focus-visible,
.ui-select:focus-visible,
.ui-textarea:focus-visible,
.ui-range:focus-visible,
.ui-choice input:focus-visible,
.ui-file:focus-visible {
  outline: 3px solid var(--site-focus);
  outline-offset: 3px;
}

/* Disabled styling wins over ordinary selected and invalid styling. Read-only stays usable. */
.ui-button:disabled,
.ui-input:disabled,
.ui-select:disabled,
.ui-textarea:disabled,
.ui-file:disabled::file-selector-button {
  border-color: var(--site-panel-border);
  color: var(--site-muted);
  background-color: var(--site-subtle-surface);
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}
.ui-range:disabled, .ui-choice input:disabled, .ui-file:disabled { color: var(--site-muted); accent-color: var(--site-muted); opacity: 1; cursor: not-allowed; }
.ui-choice:has(input:disabled) { color: var(--site-muted); cursor: not-allowed; }
.ui-button[aria-busy="true"]:disabled { cursor: progress; }

.ui-panel { min-width: 0; border: 1px solid var(--site-panel-border); border-radius: var(--ui-radius-panel); padding: var(--ui-panel-padding); background: var(--site-panel-background); }
.ui-notice {
  --ui-notice-tone: var(--ui-info);
  --ui-notice-surface: var(--ui-info-surface);
  min-width: 0;
  border-inline-start: var(--ui-space-1) solid var(--ui-notice-tone);
  border-radius: var(--ui-radius-panel);
  padding: var(--ui-space-4);
  color: var(--site-text);
  background: var(--ui-notice-surface);
  font-family: var(--ui-font-body);
  font-size: var(--ui-size-body);
  font-weight: var(--ui-weight-regular);
  line-height: var(--ui-leading-body);
  overflow-wrap: anywhere;
}
.ui-notice[data-tone="success"] { --ui-notice-tone: var(--ui-success); --ui-notice-surface: var(--ui-success-surface); }
.ui-notice[data-tone="warning"] { --ui-notice-tone: var(--ui-warning); --ui-notice-surface: var(--ui-warning-surface); }
.ui-notice[data-tone="error"] { --ui-notice-tone: var(--ui-error); --ui-notice-surface: var(--ui-error-surface); }
.ui-notice__title { color: var(--ui-notice-tone); }
.ui-notice__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--ui-space-4); }

.ui-disclosure { min-width: 0; border: 1px solid var(--site-panel-border); border-radius: var(--ui-radius-panel); background: var(--site-panel-background); }
.ui-disclosure > summary { -webkit-user-select: none; user-select: none; min-height: var(--ui-control-min-height); border-radius: var(--ui-radius-panel); padding: var(--ui-space-3) var(--ui-panel-padding); font-family: var(--ui-font-control); font-weight: var(--ui-weight-bold); cursor: pointer; }
.ui-disclosure > summary:hover { background: var(--site-hover); }
.ui-disclosure[open] > summary { border-bottom: 1px solid var(--site-divider); border-radius: var(--ui-radius-panel) var(--ui-radius-panel) 0 0; }
.ui-disclosure__body { min-width: 0; padding: var(--ui-panel-padding); }
.ui-table-scroll { min-width: 0; max-width: 100%; overflow-x: auto; }
.ui-table { width: 100%; border-collapse: collapse; color: var(--site-text); font-family: var(--ui-font-body); font-size: var(--ui-size-body); font-weight: var(--ui-weight-regular); line-height: var(--ui-leading-body); }
.ui-table caption { padding-bottom: var(--ui-space-2); font-weight: var(--ui-weight-bold); text-align: start; }
.ui-table th, .ui-table td { border-bottom: 1px solid var(--site-divider); padding: var(--ui-space-3); text-align: start; vertical-align: top; overflow-wrap: normal; }
.ui-table th { font-weight: var(--ui-weight-bold); }
.ui-table thead, .ui-table tfoot { background: var(--site-hover); }
.ui-table thead th { border-bottom-color: var(--site-panel-border); }
.ui-table tfoot { font-weight: var(--ui-weight-bold); }
.ui-table tfoot th, .ui-table tfoot td { border-top: 1px solid var(--site-panel-border); }
.ui-table .ui-table__text { min-width: 12rem; overflow-wrap: anywhere; }
.ui-table .ui-table__number { text-align: end; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.ui-table--striped > tbody > tr { background: var(--site-subtle-surface); }
.ui-table--striped > tbody > tr:nth-child(even) { background: var(--site-inset-surface); }
.ui-metrics { display: grid; min-width: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--ui-space-6); margin: 0; color: var(--site-text); font-family: var(--ui-font-body); font-size: var(--ui-size-body); font-weight: var(--ui-weight-regular); line-height: var(--ui-leading-body); }
.ui-metrics > div { min-width: 0; border-top: 1px solid var(--site-divider); padding-top: var(--ui-space-3); }
.ui-metrics dt { color: var(--site-muted); font-size: var(--ui-size-supporting); }
.ui-metrics dd { margin: var(--ui-space-2) 0 0; font-size: var(--ui-size-body); font-weight: var(--ui-weight-bold); font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.ui-divider { width: 100%; margin-block: var(--ui-space-6); border: 0; border-top: 1px solid var(--site-panel-border); }
.ui-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.ui-page-header { display: grid; min-width: 0; gap: var(--ui-space-6); }
.ui-context-row { display: flex; flex-wrap: wrap; min-height: var(--ui-context-min-height); align-items: center; justify-content: space-between; gap: var(--ui-space-2) var(--ui-space-4); }
.ui-context-row > .ui-breadcrumb { flex: 1 1 6rem; }
.ui-breadcrumb { min-width: 0; color: var(--site-muted); font-family: var(--ui-font-body); font-size: var(--ui-size-body); font-weight: var(--ui-weight-regular); line-height: var(--ui-leading-body); }
.ui-breadcrumb > ol { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); margin: 0; padding: 0; list-style: none; }
.ui-breadcrumb li { display: flex; min-width: 0; max-width: 100%; align-items: baseline; gap: var(--ui-space-2); }
.ui-breadcrumb li > [aria-hidden="true"] { flex: 0 0 auto; }
.ui-breadcrumb a, .ui-breadcrumb [aria-current="page"] { min-width: 0; overflow-wrap: anywhere; }
.ui-breadcrumb [aria-current="page"] { color: var(--site-text); }
.ui-tool-header { gap: var(--ui-space-2); }
.ui-tool-header > .ui-context-row > .ui-breadcrumb { flex: 0 1 auto; }
.ui-button-group { display: inline-flex; max-width: 100%; gap: 0; }
.ui-button-group > .ui-button { position: relative; flex: 1 1 0; border-radius: 0; }
.ui-button-group > .ui-button + .ui-button { margin-inline-start: calc(0px - var(--ui-control-border-width)); }
.ui-button-group > .ui-button:first-child { border-start-start-radius: var(--ui-radius-control); border-end-start-radius: var(--ui-radius-control); }
.ui-button-group > .ui-button:last-child { border-start-end-radius: var(--ui-radius-control); border-end-end-radius: var(--ui-radius-control); }
.ui-button-group > .ui-button:focus-visible { z-index: 1; }
.ui-language { --ui-control-min-height: var(--ui-context-min-height); flex: 0 0 auto; margin-inline-start: auto; }
.ui-language > .ui-button { flex: 0 0 auto; min-width: var(--ui-control-min-height); padding: var(--ui-space-1) var(--ui-space-2); font-size: var(--ui-size-supporting); line-height: var(--ui-leading-heading); white-space: nowrap; overflow-wrap: normal; }
.ui-language--tool > .ui-button:not(:disabled) { border-color: var(--site-control-border); color: var(--site-muted); background: var(--site-panel-background); }
/* The current language is disabled on purpose and retains its selected appearance. */
.ui-language--tool > .ui-button[aria-pressed="true"] { border-color: var(--ui-link); color: var(--site-panel-background); background: var(--ui-link); cursor: default; }
.ui-language--tool > .ui-button[aria-pressed="false"]:hover:not(:disabled) { color: var(--site-text); background: var(--site-hover); }
.ui-language--text { display: inline-flex; align-items: center; gap: var(--ui-space-1); color: var(--site-muted); font-family: var(--ui-font-control); font-size: var(--ui-size-supporting); line-height: var(--ui-leading-heading); }
.ui-language--text > .ui-button { min-width: 1.5rem; padding-inline: 0; font-weight: var(--ui-weight-regular); }
.ui-language--text > .ui-button:not(:disabled) { border-color: transparent; color: var(--ui-link); background: transparent; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 0.2em; }
.ui-language--text > .ui-button[aria-pressed="true"] { border-color: transparent; color: var(--site-text); background: transparent; font-weight: var(--ui-weight-bold); text-decoration: none; cursor: default; }
.ui-language--text > .ui-button:hover:not(:disabled) { color: var(--ui-link-hover); background: transparent; text-decoration-thickness: 2px; }

/* Preserve native hidden state when a component defines a display layout. */
.ui-panel [hidden], .ui-disclosure [hidden], .ui-notice [hidden],
.ui-flow > [hidden], .ui-stack > [hidden], .ui-actions > [hidden], .ui-breadcrumb [hidden] { display: none; }

.ui-page { padding-block: var(--ui-space-6) var(--ui-space-8); }
.site-header.ui-page-header { padding-block: var(--ui-section-padding) var(--ui-space-3); }
.ui-panel[hidden], .ui-notice[hidden], .ui-disclosure[hidden], .ui-metrics[hidden],
.ui-button[hidden], .ui-range[hidden], .ui-choice[hidden], .ui-button-group[hidden],
.ui-container[hidden], .ui-stack[hidden], .ui-actions[hidden], .ui-field[hidden] { display: none; }