/* TurboPrivate control kit: the one definition of each base control. Only
   semantic tokens from tokens.css appear here; a surface may place a control,
   never define it a second time.
   Corners follow one rule: rounded squares everywhere. Containers take the
   large radius, controls the medium one, an item nested inside a control the
   small one. A circle appears only where the shape is the meaning.
   Elevation encodes the layer, never importance. */

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

:where(button, input, textarea, select) { font: inherit; color: inherit; }

:where(button, a) { -webkit-tap-highlight-color: transparent; }

:where(button, summary, a, label) { touch-action: manipulation; }

:where(button, input, textarea, select, summary, a, [tabindex]):focus-visible {
  outline: 3px solid var(--tp-focus-ring);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

:where(h1, h2, h3, h4, p, dl, dd, figure) { margin: 0; }

:where(fieldset) { min-inline-size: 0; margin: 0; padding: 0; border: 0; }

:where(legend) { padding: 0; }

.tp-sr-only {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Text roles */
.tp-eyebrow {
  color: var(--tp-accent);
  font-size: var(--tp-text-label);
  font-weight: var(--tp-weight-strong);
  letter-spacing: var(--tp-tracking-caps);
  text-transform: uppercase;
}

.tp-muted { color: var(--tp-ink-muted); line-height: var(--tp-leading-body); }

/* Page head: a stage's first row. An optional mark, then eyebrow, title and
   one summary line; every stage that has a title uses this one head. */
.tp-page-head { display: flex; align-items: center; gap: var(--tp-space-4); min-inline-size: 0; }

.tp-page-head > div { display: grid; gap: var(--tp-space-0-5); min-inline-size: 0; }

.tp-page-head h1 { font-size: var(--tp-text-headline); font-weight: var(--tp-weight-strong); letter-spacing: var(--tp-tracking-tight); line-height: var(--tp-leading-tight); overflow-wrap: anywhere; }

.tp-page-head > div > p:not(.tp-eyebrow) { color: var(--tp-ink-muted); font-size: var(--tp-text-label); line-height: var(--tp-leading-body); }

/* Button: one element, four variants, two sizes. */
.tp-button {
  display: inline-flex;
  min-block-size: var(--tp-control-default);
  align-items: center;
  justify-content: center;
  gap: var(--tp-space-2);
  padding: var(--tp-space-2) var(--tp-space-4);
  border: var(--tp-line-width) solid transparent;
  border-radius: var(--tp-radius-md);
  background: var(--tp-accent);
  color: var(--tp-on-accent);
  cursor: pointer;
  font-weight: var(--tp-weight-strong);
  text-align: center;
  text-decoration: none;
  transition: background var(--tp-motion-fast) var(--tp-motion-ease), border-color var(--tp-motion-fast) var(--tp-motion-ease), color var(--tp-motion-fast) var(--tp-motion-ease);
}

.tp-button[data-variant="secondary"] {
  border-color: var(--tp-line-strong);
  background: var(--tp-surface-raised);
  color: var(--tp-ink);
  font-weight: var(--tp-weight-medium);
}

.tp-button[data-variant="quiet"] {
  padding-inline: var(--tp-space-3);
  background: transparent;
  color: var(--tp-accent-ink);
  font-weight: var(--tp-weight-medium);
}

.tp-button[data-variant="icon"] {
  inline-size: var(--tp-control-default);
  padding: 0;
  border-color: var(--tp-line);
  border-radius: var(--tp-radius-md);
  background: var(--tp-surface-raised);
  color: var(--tp-ink);
}

.tp-button[data-variant="icon"][aria-pressed="true"],
.tp-button[data-variant="icon"][aria-expanded="true"] { border-color: var(--tp-accent); color: var(--tp-accent-ink); background: var(--tp-surface-raised); }

.tp-button[data-tone="danger"] { border-color: color-mix(in srgb, var(--tp-danger) 40%, transparent); color: var(--tp-danger); }

.tp-button[data-size="compact"] { min-block-size: var(--tp-control-compact); padding-inline: var(--tp-space-3); font-size: var(--tp-text-label); }

.tp-button[data-size="compact"][data-variant="icon"] { inline-size: var(--tp-control-compact); padding: 0; }

.tp-button:active:not(:disabled) { filter: brightness(.94); }

.tp-button:disabled { cursor: not-allowed; opacity: .5; }

.tp-button[data-busy="true"] { cursor: progress; }

/* Segmented tabs: role=tablist with role=tab buttons. */
.tp-tabs {
  display: inline-flex;
  gap: var(--tp-space-0-5);
  max-inline-size: 100%;
  padding: var(--tp-space-0-5);
  overflow-x: auto;
  border: var(--tp-line-width) solid var(--tp-line);
  border-radius: var(--tp-radius-md);
  background: var(--tp-surface-muted);
  scrollbar-width: none;
}

.tp-tab {
  display: inline-flex;
  flex: 0 0 auto;
  min-block-size: calc(var(--tp-control-compact) - var(--tp-space-1));
  align-items: center;
  gap: var(--tp-space-1-5);
  padding-inline: var(--tp-space-3);
  border: 0;
  border-radius: var(--tp-radius-sm);
  background: transparent;
  color: var(--tp-ink-muted);
  cursor: pointer;
  font-size: var(--tp-text-label);
  font-weight: var(--tp-weight-strong);
  white-space: nowrap;
  transition: background var(--tp-motion-fast) var(--tp-motion-ease), color var(--tp-motion-fast) var(--tp-motion-ease);
}

.tp-tab[aria-selected="true"],
.tp-tab[aria-pressed="true"] { background: var(--tp-surface-raised); color: var(--tp-accent-ink); box-shadow: var(--tp-shadow-low); }

/* Field: label wraps its caption and control. */
.tp-field { display: grid; gap: var(--tp-space-1); min-inline-size: 0; color: var(--tp-ink-muted); font-size: var(--tp-text-body); }

.tp-field > span:first-child { font-size: var(--tp-text-label); font-weight: var(--tp-weight-medium); }

.tp-input,
.tp-field :where(input:not([type="checkbox"], [type="radio"], [type="file"]), textarea, select) {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--tp-control-default);
  padding: var(--tp-space-2) var(--tp-space-3);
  border: var(--tp-line-width) solid var(--tp-line-strong);
  border-radius: var(--tp-radius-md);
  background: var(--tp-surface);
  color: var(--tp-ink);
}

.tp-field :where(textarea) { resize: vertical; line-height: var(--tp-leading-body); }

.tp-input:focus,
.tp-input:focus-within,
.tp-field :where(input, textarea, select):focus { border-color: var(--tp-accent); }

.tp-input:disabled,
.tp-field :where(input, textarea, select):disabled { opacity: .6; }

.tp-input[aria-invalid="true"],
.tp-field :where(input, textarea, select)[aria-invalid="true"] { border-color: var(--tp-danger); }

/* Check: a checkbox or radio with its caption. */
.tp-check { display: flex; align-items: start; gap: var(--tp-space-2); color: var(--tp-ink); line-height: var(--tp-leading-body); cursor: pointer; }

.tp-check > input { flex: 0 0 auto; inline-size: var(--tp-icon-md); block-size: var(--tp-icon-md); margin: .15em 0 0; accent-color: var(--tp-accent); }

/* Choice: a selectable card button (storage mode, interaction profile, storage location). */
.tp-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--tp-space-2); }

.tp-choice {
  display: grid;
  align-content: start;
  gap: var(--tp-space-1);
  min-inline-size: 0;
  padding: var(--tp-space-4);
  border: var(--tp-line-width) solid var(--tp-line);
  border-radius: var(--tp-radius-md);
  background: var(--tp-surface-raised);
  color: var(--tp-ink-muted);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--tp-motion-fast) var(--tp-motion-ease), box-shadow var(--tp-motion-fast) var(--tp-motion-ease);
}

.tp-choice > strong { color: var(--tp-ink); font-size: var(--tp-text-title); font-weight: var(--tp-weight-strong); }

.tp-choice > span { line-height: var(--tp-leading-body); }


.tp-choice[aria-pressed="true"],
.tp-choice[data-selected="true"] { border-color: var(--tp-accent); background: var(--tp-accent-soft); box-shadow: inset 0 0 0 var(--tp-line-width) var(--tp-accent); }

.tp-choice:disabled { cursor: not-allowed; opacity: .6; }

/* Navigation list: a vertical column of sections; the current one is marked
   with aria-current and takes the selected tab's look. */
.tp-nav { display: grid; align-content: start; gap: var(--tp-space-0-5); margin: 0; padding: 0; list-style: none; }

.tp-nav-item {
  display: flex;
  inline-size: 100%;
  min-block-size: var(--tp-control-compact);
  align-items: center;
  gap: var(--tp-space-2);
  padding-inline: var(--tp-space-3);
  border: 0;
  border-radius: var(--tp-radius-md);
  background: transparent;
  color: var(--tp-ink-muted);
  cursor: pointer;
  font-size: var(--tp-text-body);
  font-weight: var(--tp-weight-medium);
  text-align: left;
  white-space: nowrap;
  transition: background var(--tp-motion-fast) var(--tp-motion-ease), color var(--tp-motion-fast) var(--tp-motion-ease);
}

.tp-nav-item[aria-current="page"] { background: var(--tp-surface-raised); color: var(--tp-accent-ink); box-shadow: var(--tp-shadow-low); }

/* Dock: a column of joined buttons, one rounded body. The 1px gaps show the
   line color between cells; the end cells carry the body's rounded corners,
   so an active cell's ring follows the curve instead of being clipped by it. */
.tp-dock {
  --tp-dock-corner: calc(var(--tp-radius-md) - var(--tp-line-width));
  display: flex;
  flex-direction: column;
  gap: var(--tp-line-width);
  border: var(--tp-line-width) solid var(--tp-line);
  border-radius: var(--tp-radius-md);
  background: var(--tp-line);
  box-shadow: var(--tp-shadow-low);
  overflow: hidden;
}

.tp-dock > .tp-button {
  inline-size: var(--tp-control-default);
  min-block-size: var(--tp-control-default);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--tp-surface-raised);
  color: var(--tp-ink);
  box-shadow: none;
}

.tp-dock > .tp-button:first-child { border-start-start-radius: var(--tp-dock-corner); border-start-end-radius: var(--tp-dock-corner); }

.tp-dock > .tp-button:last-child { border-end-start-radius: var(--tp-dock-corner); border-end-end-radius: var(--tp-dock-corner); }

.tp-dock > .tp-button:is([aria-pressed="true"], [aria-expanded="true"]) { color: var(--tp-accent-ink); box-shadow: inset 0 0 0 2px var(--tp-accent); }

.tp-dock > .tp-button:focus-visible { outline-offset: -3px; }

/* Card: the one raised container. */
.tp-card {
  display: grid;
  align-content: start;
  gap: var(--tp-space-3);
  min-inline-size: 0;
  padding: var(--tp-space-5);
  border: var(--tp-line-width) solid var(--tp-line);
  border-radius: var(--tp-radius-md);
  background: var(--tp-surface-raised);
  box-shadow: var(--tp-shadow-low);
}

.tp-card[data-emphasis="accent"] { border-color: color-mix(in srgb, var(--tp-accent) 54%, var(--tp-line)); background: linear-gradient(145deg, color-mix(in srgb, var(--tp-accent) 12%, var(--tp-surface-raised)), var(--tp-surface-raised)); }

.tp-card[data-emphasis="quiet"] { box-shadow: none; background: var(--tp-surface); }

.tp-card > h2,
.tp-card > h3 { font-size: var(--tp-text-title); font-weight: var(--tp-weight-strong); letter-spacing: var(--tp-tracking-tight); }

/* Icon-bearing controls size their glyph from the kit. */
.tp-button > .tp-icon,
.tp-tab > .tp-icon,
.tp-nav-item > .tp-icon { flex: 0 0 auto; }

/* Motion and contrast preferences apply to every surface. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

@media (prefers-contrast: more) {
:where(.tp-card) { border-color: var(--tp-line-strong); }
}

@media (forced-colors: active) {
:where(.tp-button, .tp-tabs, .tp-dock, .tp-choice, .tp-card) { forced-color-adjust: auto; border: var(--tp-line-width) solid CanvasText; box-shadow: none; }
}

/* Hover is a neutral interaction state in both themes. Selection, focus and
   destructive actions retain their own semantic cues. */
:is(.tp-button, .tp-tab, .tp-nav-item):hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--tp-hover);
  color: var(--tp-ink);
}