/* Canonical components. Explicit second opt-in avoids changing legacy pages
 * merely because they share a token name. Colour/font values live in tokens.css.
 * Existing .tlc-* names are retained from the reviewed foundation specimen.
 */
html[data-tl-theme="light"][data-tl-ui="canonical"] body {
  margin: 0;
  background: var(--tl-surface-page);
  color: var(--tl-text);
  font-family: var(--tl-font-body);
  font-size: var(--tl-body-size);
  line-height: var(--tl-body-leading);
  -webkit-font-smoothing: antialiased;
}
html[data-tl-theme="light"][data-tl-ui="canonical"] :where(*, *::before, *::after) { box-sizing: border-box; }
html[data-tl-theme="light"][data-tl-ui="canonical"] [hidden] { display: none !important; }
html[data-tl-theme="light"][data-tl-ui="canonical"] :focus-visible {
  outline: var(--tl-focus-width) solid var(--tl-focus) !important;
  outline-offset: var(--tl-focus-offset) !important;
}
html[data-tl-theme="light"][data-tl-ui="canonical"] ::selection { background: var(--tl-action); color: var(--tl-on-action); }

/* Optional primitives for new shared templates. No existing width is forced. */
html[data-tl-theme="light"][data-tl-ui="canonical"] .tl-ui-shell {
  width: 100%; max-width: var(--tl-layout-max); margin-inline: auto;
  padding-inline: var(--tl-layout-gutter); min-width: 0;
}
html[data-tl-theme="light"][data-tl-ui="canonical"] .tl-ui-reading { max-width: var(--tl-reading-max); }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tl-ui-stack { display: grid; gap: var(--tl-space-5); min-width: 0; }
html[data-tl-theme="light"][data-tl-ui="canonical"] :is(.tl-ui-title,.tl-ui-section-title,.tl-ui-subtitle) {
  margin: 0; font-family: var(--tl-font-display); font-weight: var(--tl-heading-weight);
  line-height: var(--tl-heading-leading); letter-spacing: var(--tl-heading-tracking); color: var(--tl-text);
}
html[data-tl-theme="light"][data-tl-ui="canonical"] .tl-ui-title { font-size: var(--tl-title-size); }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tl-ui-section-title { font-size: var(--tl-section-title-size); }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tl-ui-subtitle { font-size: var(--tl-subtitle-size); }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-mono { font-family: var(--tl-font-mono); font-variant-numeric: tabular-nums; }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-secondary { color: var(--tl-text-secondary); }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-muted { color: var(--tl-text-muted); }

html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tl-space-2);
  min-height: var(--tl-control-height); height: auto; max-width: 100%;
  padding: 10px var(--tl-control-padding-x); border: 1px solid transparent;
  border-radius: var(--tl-radius); font: var(--tl-control-weight) var(--tl-button-size)/1.35 var(--tl-font-body);
  text-decoration: none; text-align: center; white-space: normal; cursor: pointer;
  transition: background-color var(--tl-motion), border-color var(--tl-motion);
}
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-button--primary { background: var(--tl-button-bg); color: var(--tl-button-ink); border-color: var(--tl-button-border); }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-button--primary:hover { background: var(--tl-button-hover); }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-button--secondary { background: var(--tl-surface-panel); color: var(--tl-text); border-color: var(--tl-border-control); }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-button--secondary:hover { background: var(--tl-surface-raised); }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-button--quiet { background: transparent; color: var(--tl-action); }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-button:disabled { background: var(--tl-disabled-bg); color: var(--tl-disabled-text); border-color: var(--tl-border); opacity: 1; cursor: not-allowed; }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-button[aria-busy="true"] { cursor: wait; }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-field { display: flex; flex-direction: column; gap: var(--tl-space-2); min-width: 0; }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-label { color: var(--tl-text); font-size: var(--tl-label-size); font-weight: var(--tl-control-weight); }
html[data-tl-theme="light"][data-tl-ui="canonical"] :is(.tlc-input,.tlc-select) {
  width: 100%; min-width: 0; min-height: var(--tl-control-height); padding: 11px 13px;
  background: var(--tl-surface-panel); color: var(--tl-text); border: 1px solid var(--tl-border-control);
  border-radius: var(--tl-radius); font: 400 var(--tl-control-size)/1.4 var(--tl-font-body);
}
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-input::placeholder { color: var(--tl-text-muted); opacity: 1; }
html[data-tl-theme="light"][data-tl-ui="canonical"] :is(.tlc-input,.tlc-select):disabled { background: var(--tl-disabled-bg); color: var(--tl-disabled-text); opacity: 1; cursor: not-allowed; }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-input[aria-invalid="true"] { border-color: var(--tl-danger); }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-help { color: var(--tl-text-muted); font-size: var(--tl-note-size); line-height: 1.5; }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-field-error { color: var(--tl-danger); font-size: var(--tl-label-size); }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-panel { min-width: 0; background: var(--tl-surface-panel); border: 1px solid var(--tl-border); border-radius: var(--tl-radius-lg); box-shadow: var(--tl-shadow); }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-status { display: flex; align-items: baseline; gap: var(--tl-space-2); font-size: var(--tl-note-size); font-weight: 600; }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-status--success { color: var(--tl-success); }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-status--warning { color: var(--tl-warning); }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-status--danger { color: var(--tl-danger); }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-notice { padding: 18px 20px; border: 1px solid var(--tl-border); border-radius: var(--tl-radius); background: var(--tl-surface-raised); color: var(--tl-text-secondary); }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-notice--success { background: var(--tl-success-bg); color: var(--tl-success); }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-notice--warning { background: var(--tl-warning-bg); color: var(--tl-warning); }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-notice--danger { background: var(--tl-danger-bg); color: var(--tl-danger); }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-dialog { width: min(540px,calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; border: 1px solid var(--tl-border); border-radius: var(--tl-radius-lg); background: var(--tl-surface-panel); color: var(--tl-text); box-shadow: var(--tl-shadow-overlay); }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-dialog::backdrop { background: var(--tl-overlay-backdrop); }
html[data-tl-theme="light"][data-tl-ui="canonical"] .tlc-dialog-close { min-width: var(--tl-compact-target); min-height: var(--tl-compact-target); border: 1px solid var(--tl-border-control); border-radius: var(--tl-radius-sm); background: var(--tl-surface-panel); color: var(--tl-text); }

@media (prefers-reduced-motion: reduce) {
  html[data-tl-theme="light"][data-tl-ui="canonical"],
  html[data-tl-theme="light"][data-tl-ui="canonical"] *,
  html[data-tl-theme="light"][data-tl-ui="canonical"] *::before,
  html[data-tl-theme="light"][data-tl-ui="canonical"] *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
}