/* Tint UI — early component layer. Public API is intentionally small and provisional. */
:where(.tint-button, .tint-tabs button, .tint-pagination button) {
  min-height: 2.75rem;
  padding: 0.625rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius, 0.6rem);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
}
.tint-button { display: inline-flex; align-items: center; justify-content: center; width: fit-content; line-height: 1.25; text-decoration: none; }
.tint-button--sm { min-height: 2rem; padding: 0.375rem 0.75rem; font-size: 0.875rem; line-height: 1.25; }
.tint-button--lg { min-height: 3.25rem; padding: 0.875rem 1.75rem; font-size: 1.05rem; line-height: 1.35; }
:where(.tint-button, .tint-tabs button, .tint-pagination button):hover:not(:disabled) { background: var(--surface-variant); }
:where(.tint-button, .tint-tabs button, .tint-pagination button):disabled { cursor: not-allowed; opacity: 0.48; }
.tint-button:hover:not(:disabled) { color: var(--text); }
.tint-button--primary { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.tint-button--primary:hover:not(:disabled) { filter: brightness(1.06); background: var(--primary); color: var(--on-primary); }
.tint-button--secondary { border-color: var(--secondary); background: var(--secondary); color: var(--on-secondary); }
.tint-button--secondary:hover:not(:disabled) { filter: brightness(1.06); background: var(--secondary); color: var(--on-secondary); }
.tint-button--quiet { border-color: transparent; background: transparent; }
.tint-button--danger { border-color: var(--danger); background: var(--danger); color: var(--on-danger); }
.tint-button--danger:hover:not(:disabled) { border-color: var(--danger); background: var(--danger); color: var(--on-danger); filter: brightness(1.06); }

.tint-heading--underlined { display: flex; width: 100%; border-bottom: 1px solid var(--border); }
.tint-heading--underlined > span { display: block; margin-bottom: -1px; padding-bottom: 0.5rem; border-bottom: 2px solid var(--primary); }

.tint-field { display: grid; gap: 0.25rem; color: var(--text-muted); font-size: 0.82rem; font-weight: 650; }
.tint-field__label { display: block; }
.tint-field__control { display: flex; align-items: center; min-height: 3.5rem; gap: 1rem; padding-inline: 1rem; border: 1px solid var(--border); border-radius: var(--radius, 0.6rem); background: var(--surface); }
.tint-field__control:focus-within { border-color: var(--focus); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 22%, transparent); }
.tint-field__icon { width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem; color: var(--text-muted); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; }
.tint-field__suffix { flex: 0 0 auto; color: var(--text-muted); font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.tint-field__control :where(input, select, textarea) { width: 100%; min-width: 0; min-height: 3.375rem; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-family: inherit; font-size: 0.95rem; font-weight: 400; line-height: 1.4; }
.tint-field__control :where(input, textarea)::placeholder { color: var(--text-muted); font-style: italic; font-weight: 400; opacity: 1; }
.tint-field__control textarea { min-height: 7rem; padding-block: 1rem; resize: vertical; }
.tint-field__description { padding-inline: 1rem; color: var(--text-muted); font-size: 0.78rem; font-weight: 500; line-height: 1.35; }
.tint-field > input[type="range"] { width: 100%; min-height: 2.65rem; padding-inline: 0; accent-color: var(--primary); }
.tint-choice { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text); }
.tint-choice input {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 1.25rem;
  display: grid;
  place-content: center;
  margin: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}
.tint-choice input[type="checkbox"] { border-radius: calc(var(--radius, 0.6rem) * 0.35); }
.tint-choice input[type="radio"] { border-radius: 50%; }
.tint-choice input[type="checkbox"]:checked { border-color: var(--primary); background: var(--primary); }
.tint-choice input[type="radio"]:checked { border-color: var(--primary); background: var(--surface); }
.tint-choice input[type="checkbox"]::before {
  content: "";
  width: 0.62rem;
  height: 0.34rem;
  border-bottom: 2.25px solid var(--on-primary);
  border-left: 2.25px solid var(--on-primary);
  transform: translateY(-0.08rem) rotate(-45deg);
}
.tint-choice input[type="radio"]::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--primary);
}
.tint-choice input:not(:checked)::before { transform: scale(0); }
.tint-choice input[type="checkbox"]:checked::before { transform: translateY(-0.08rem) rotate(-45deg); }
.tint-choice input:disabled { cursor: not-allowed; opacity: 0.72; }
.tint-choice-group { display: grid; align-content: start; gap: 0.65rem; min-width: 0; margin: 0; padding: 0.8rem; border: 1px solid var(--border); border-radius: var(--radius, 0.6rem); }
.tint-choice-group--inline { display: flex; flex-wrap: wrap; gap: 0.65rem 1rem; }
.tint-choice-group legend { padding-inline: 0.35rem; color: var(--text-muted); font-size: 0.78rem; }
.tint-field--error .tint-field__control { border-color: var(--danger); }
.tint-field--error .tint-field__description { color: var(--danger); }

.tint-breadcrumbs { display: flex; flex-wrap: wrap; gap: 0; align-items: center; color: var(--text-muted); font-size: 0.88rem; }
.tint-breadcrumbs > * + *::before { content: var(--breadcrumb-separator, "/"); display: inline-block; margin-inline: 0.5rem; color: var(--text-muted); font-weight: 400; text-decoration: none; }
.tint-breadcrumbs strong { color: var(--text); }
.tint-tabs { display: flex; gap: 0.2rem; border-bottom: 1px solid var(--border); }
.tint-tabs button { min-height: 2.45rem; margin-bottom: -1px; padding-inline: 0.9rem; border-color: transparent; border-radius: 0; background: transparent; color: var(--text); }
.tint-tabs button:not(.active):hover { border-bottom-color: var(--border); background: transparent; }
.tint-tabs button.active { border-bottom: 4px solid var(--primary); background: transparent; }
.tint-pagination { display: flex; gap: 0.35rem; }
.tint-pagination button { min-width: 2.55rem; padding-inline: 0.65rem; }
.tint-pagination button[aria-current="page"] { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }

.tint-alerts { display: grid; gap: 0.65rem; }
.tint-alert { display: grid; gap: 0.2rem; padding: 0.85rem 1rem; border-radius: var(--radius, 0.6rem); }
.tint-alert span { font-size: 0.84rem; }
.tint-alert--info { background: var(--info-container); color: var(--on-info-container); }
.tint-alert--success { background: var(--success-container); color: var(--on-success-container); }
.tint-alert--warning { background: var(--warning-container); color: var(--on-warning-container); }
.tint-alert--danger { background: var(--danger-container); color: var(--on-danger-container); }
.tint-badge { display: inline-flex; align-items: center; width: fit-content; padding: 0.24rem 0.48rem; border-radius: var(--radius, 0.6rem); background: var(--surface-variant); color: var(--text); font-size: 0.72rem; font-weight: 750; }
.tint-badge--primary { background: var(--primary-container); color: var(--on-primary-container); }
.tint-progress { width: min(18rem, 100%); height: 0.7rem; accent-color: var(--primary); }
.tint-progress-field { display: grid; gap: 0.25rem; color: var(--text-muted); font-size: 0.72rem; }
.tint-progress-field span { display: flex; justify-content: space-between; gap: 1rem; }

.tint-card { padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius, 0.6rem); background: var(--surface); }
.tint-card h3, .tint-card p { margin-top: 0; }
.tint-card__header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.tint-card__header p { color: var(--text-muted); font-size: 0.82rem; }
.tint-card--primary { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.tint-card--primary .tint-card__header p { color: color-mix(in srgb, var(--on-primary) 78%, transparent); }
.tint-card--primary .tint-button { border-color: var(--on-primary); background: var(--on-primary); color: var(--primary); }
.tint-avatar { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-weight: 800; }
.tint-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius, 0.6rem); }
.tint-table { width: 100%; border-collapse: collapse; }
.tint-table :where(th, td) { padding: 0.75rem 0.85rem; border-bottom: 1px solid var(--border); text-align: left; }
.tint-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-variant) 20%, transparent); }
.tint-table tbody tr:last-child :where(th, td) { border-bottom: 0; }

.tint-dropdown, .tint-dialog { border: 1px solid var(--border); border-radius: var(--radius, 0.6rem); background: var(--surface); }
.tint-dropdown { display: grid; width: 12rem; padding: 0.35rem; }
.tint-dropdown button { padding: 0.55rem 0.65rem; border: 0; border-radius: var(--radius, 0.6rem); background: transparent; color: var(--text); text-align: left; }
.tint-dropdown button:hover { background: var(--surface-variant); }
.tint-dropdown button.danger { color: var(--danger); }
.tint-dialog { max-width: 24rem; padding: 1.25rem; }
.tint-dialog h3 { margin: 0 0 0.4rem; }
.tint-dialog p { margin: 0 0 1.25rem; color: var(--text-muted); }
.tint-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.65rem; }
.tint-empty { display: grid; justify-items: start; align-content: center; min-height: 13rem; padding: 1.25rem; border: 2px dashed var(--border); border-radius: var(--radius, 0.6rem); }
.tint-empty h3 { margin: 0 0 0.35rem; }
.tint-empty p { margin: 0 0 1rem; color: var(--text-muted); }
.tint-skeleton { display: grid; align-content: center; gap: 0.7rem; min-height: 13rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius, 0.6rem); }
.tint-skeleton span { color: var(--text-muted); font-size: 0.78rem; font-weight: 700; }
.tint-skeleton i { height: 0.8rem; border-radius: 0.3rem; background: var(--surface-variant); }
.tint-skeleton i:nth-child(1) { width: 42%; }
.tint-skeleton i:nth-child(3) { width: 68%; }

/* Typography: semantic HTML works without a wrapper class. */
:where(h1, h2, h3) { font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
:where(h1) { font-size: clamp(2.25rem, 5vw, 2.618rem); }
:where(h2) { font-size: 1.618rem; }
:where(h3) { font-size: 1.25rem; }
.tint-display { font-family: "Archivo Tint", "Aptos", sans-serif; font-size: clamp(3rem, 7vw, 4.236rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.04em; text-wrap: balance; }
:where(ul, ol) { padding-left: 1.4em; }
a { color: color-mix(in oklab, var(--primary) 76%, var(--text)); text-decoration-thickness: 0.08em; text-underline-offset: 0.16em; }
a:hover { color: var(--primary); }
li + li { margin-top: 0.3rem; }
blockquote { padding: 0.9rem 1rem; border-inline-start: 1px solid var(--primary); background: var(--primary-container); color: var(--on-primary-container); font-size: 1.125rem; }
:where(code, kbd) { padding: 0.12em 0.3em; border-radius: calc(var(--radius, 0.6rem) * 0.55); background: var(--surface-variant); font: 0.88em/1.4 ui-monospace, "Cascadia Code", monospace; }
kbd { border: 1px solid var(--border); box-shadow: 0 1px 0 var(--border); }
pre { overflow-x: auto; padding: 1rem; border-radius: var(--radius, 0.6rem); background: var(--surface-variant); }
pre code { padding: 0; background: transparent; }

/* Toasts. Behaviour lives in tint-ui.js; semantic structure remains usable without it. */
.tint-toast-region { position: fixed; z-index: 1000; right: 1rem; bottom: 1rem; width: min(24rem, calc(100vw - 2rem)); display: flex; flex-direction: column; gap: 0.65rem; pointer-events: none; }
.tint-toast { --toast-color: var(--info); --toast-container: var(--info-container); --toast-on-container: var(--on-info-container); position: relative; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) 2rem; gap: 0.7rem; align-items: start; overflow: hidden; padding: 0.85rem 0.8rem 0.85rem 0.9rem; border: 1px solid color-mix(in srgb, var(--toast-color) 30%, var(--border)); border-inline-start: 4px solid var(--toast-color); border-radius: var(--radius, 0.6rem); background: color-mix(in srgb, var(--toast-container) 58%, var(--surface)); color: var(--toast-on-container); box-shadow: 0 0.7rem 1.8rem rgba(5, 15, 35, 0.16); pointer-events: auto; }
.tint-toast--timed::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--toast-color); transform-origin: left; animation: tint-toast-remaining var(--toast-duration) linear forwards; }
.tint-toast--timed:hover::after, .tint-toast--timed:focus-within::after { animation-play-state: paused; }
.tint-toast--no-icon { grid-template-columns: minmax(0, 1fr) 2rem; }
.tint-toast--success { --toast-color: var(--success); --toast-container: var(--success-container); --toast-on-container: var(--on-success-container); }
.tint-toast--warning { --toast-color: var(--warning); --toast-container: var(--warning-container); --toast-on-container: var(--on-warning-container); }
.tint-toast--danger { --toast-color: var(--danger); --toast-container: var(--danger-container); --toast-on-container: var(--on-danger-container); }
.tint-toast__icon { display: grid; place-items: center; align-self: center; color: var(--toast-color); }
.tint-toast__icon svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tint-toast__body { display: grid; gap: 0.12rem; min-width: 0; }
.tint-toast__body span { font-size: 0.84rem; opacity: 0.82; }
.tint-toast__dismiss { width: 2rem; height: 2rem; display: grid; place-items: center; margin: -0.45rem -0.35rem 0 0; padding: 0; border: 0; border-radius: var(--radius, 0.6rem); background: transparent; color: currentColor; cursor: pointer; }
.tint-toast__dismiss:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.tint-toast__dismiss svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; }
@media (max-width: 48rem) { .tint-toast-region { top: calc(var(--nav-height, 0px) + 0.75rem); right: 0.75rem; bottom: auto; width: calc(100vw - 1.5rem); } }
@media (prefers-reduced-motion: reduce) { .tint-toast { animation: none !important; } }
@keyframes tint-toast-remaining { from { transform: scaleX(1); } to { transform: scaleX(0); } }