@layer reset, tokens, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scrollbar-gutter: stable; }
  body { margin: 0; min-block-size: 100dvh; }
  img, picture, video { max-inline-size: 100%; block-size: auto; }
  button, input, textarea, select { font: inherit; }
}

@layer tokens {
  @property --color-primary {
    syntax: "<color>"; inherits: true; initial-value: oklch(52% 0.24 5);
  }
  :root {
    color-scheme: light dark;
    accent-color: var(--color-primary);

    --font: sans-serif;
    --font-title: sans-serif;

    --font-size: 20px;
    --space-2xs: 0.3125rem;

    --line-height-body: 2;
    --line-height-heading: 1.5;
    --line-height-button: 1;

    --color-primary: light-dark(oklch(52% 0.24 5), oklch(70% 0.18 5));
    --color-primary-hover: color-mix(in oklab, var(--color-primary) 80%, black);

    --color-accent: oklch(58% 0.24 10);
    --color-accent-text: white;
    --color-accent-hover: color-mix(in oklab, var(--color-accent) 80%, black);

    --color-bg: light-dark(oklch(96% 0 0), oklch(20% 0 0));
    --color-bg-odd: light-dark(white, oklch(24% 0 0));
    --color-bg-alt: light-dark(oklch(88% 0 0), oklch(28% 0 0));
    --color-text: light-dark(oklch(0% 0 0), oklch(100% 0 0));

    --tp-dark: light-dark(oklch(0% 0 0 / 0.05), oklch(100% 0 0 / 0.08));

    --color-border: light-dark(oklch(0% 0 0 / 0.15), oklch(100% 0 0 / 0.25));
    --color-border-strong: light-dark(oklch(0% 0 0 / 0.30), oklch(100% 0 0 / 0.45));
    --color-field-bg: light-dark(white, oklch(24% 0 0));
    --color-placeholder: light-dark(oklch(55% 0 0), oklch(60% 0 0));

    --color-soft-border: light-dark(oklch(0% 0 0 / 0.15), oklch(100% 0 0 / 0.25));
    --color-soft-border-hover: light-dark(oklch(0% 0 0 / 0.30), oklch(100% 0 0 / 0.45));
    --color-soft-text: light-dark(oklch(47% 0 0), oklch(76% 0 0));

    --color-success: light-dark(oklch(52% 0.16 145), oklch(72% 0.15 145));
    --color-warning: light-dark(oklch(60% 0.16 75),  oklch(80% 0.15 75));
    --color-danger:  light-dark(oklch(52% 0.22 25),  oklch(70% 0.18 25));
    --color-info:    light-dark(oklch(52% 0.14 240), oklch(72% 0.12 240));

    --radius: 30px;
    --radius-sm: 12px;
    --radius-pill: 100px;
    --toucharea: 44px;

    --transition: 0.4s ease-in-out;
    --transition-fast: 0.15s ease-in-out;

    --padding:  30px;
    --section-padding: var(--padding);
    --button-padding-block:  calc(var(--padding) * 0.2);
    --button-padding-inline: calc(var(--padding) * 0.7);
    --gap: 20px;
    --field-padding-block:  calc(var(--padding) * 0.4);
    --field-padding-inline: calc(var(--padding) * 0.6);

    --label-size-sm: calc(var(--font-size) * 0.85);
    --label-size:    var(--font-size);
    --label-size-lg: calc(var(--font-size) * 1.25);

    /* Panels */
    --panel-nav-width: 300px;
    --panel-aside-width: 300px;
    --panel-stack-peek: 20px;
    --panel-padding: var(--padding);
    --color-panel-nav: light-dark(oklch(88% 0 0), oklch(24% 0 0));
    --color-panel-aside-bg: light-dark(oklch(20% 0 0), oklch(88% 0 0));
    --color-panel-aside-text: light-dark(oklch(96% 0 0), oklch(15% 0 0));

    --measure: none;
  }

  :root { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }

  @media (min-width: 56.25rem) {
    :root { --section-padding: calc(var(--padding) * 4); }
  }
}

@layer base {
  html { font-size: 100%; }
  body {
    font-family: var(--font);
    font-size: var(--font-size);
    line-height: var(--line-height-body);
    background: var(--color-bg);
    color: var(--color-text);
    padding: 0;
    -webkit-font-smoothing: antialiased;
  }
  :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-title);
    margin-block: 0 var(--padding);
    padding: 0;
    font-weight: 800;
    line-height: var(--line-height-heading);
    text-wrap: balance;
  }
  h1 { font-size: calc(var(--font-size) * 3); }
  h2 { font-size: calc(var(--font-size) * 2.5); }
  h3 { font-size: calc(var(--font-size) * 2); }
  h4 { font-size: calc(var(--font-size) * 1.6); }
  h5 { font-size: calc(var(--font-size) * 1.2); }
  h6 { font-size: calc(var(--font-size) * .8); }
  :where(p) {
    margin-block: 0 var(--padding);
    padding: 0;
    font-size: var(--font-size);
    text-wrap: pretty;
    max-inline-size: var(--measure);
  }
  :where(p):last-child { margin-block-end: 0; }
  :where(a) { color: var(--color-primary); text-decoration: none; }
  :where(a):hover { color: var(--color-primary-hover); }
  :where(ul) { margin: 0; padding: 0; list-style: none; }
  :where(fieldset) { margin: 0; padding: 0; border: 0; }
  :where(label) { cursor: pointer; }
  :where(section) { padding: var(--section-padding); }
  :where(section) :where(h1, h2) {
    font-size: calc(var(--font-size) * 5);
    line-height: var(--line-height-heading);
    margin-block-end: var(--padding);
  }
  :where(section) > :where(p) {
    font-size: var(--font-size);
    line-height: var(--line-height-body);
    opacity: 0.6;
  }
  @media (min-width: 56.25rem) {
    :where(section) :where(h1, h2) { font-size: calc(var(--font-size) * 4); }
  }
  hr {
    border: 0;
    border-block-start: 1px solid var(--color-border);
    margin-block: var(--padding);
  }
}

code { font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.95rem; padding: calc(var(--padding) / 3); border-radius:10px; background: var(--color-bg-alt); }
pre { margin:14px 0; padding:var(--padding); background:#222; color:#fff; border-radius:var(--radius); overflow:auto; font-size:1rem; }
pre code { background:none; padding:0; color:inherit; font-size:1em; }

table { width:100%; border-collapse:collapse; margin:12px 0 22px; font-size:1rem; }
th,td { text-align:left; padding:10px 20px; border-bottom:1px solid var(--color-bg-alt); vertical-align:top; }
th { font-size:.75rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); }
td:first-child { white-space:nowrap; }

@layer components {
  :where(.buttons) { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); }
  :where(button, .button) {
    font: inherit;
    font-size: var(--font-size);
    line-height: var(--line-height-button);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
    min-block-size: var(--toucharea);
    padding-block:  var(--button-padding-block);
    padding-inline: var(--button-padding-inline);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--tp-dark);
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    transition: translate var(--transition), background-color var(--transition), box-shadow var(--transition);
  }
  @media (hover: hover) { :where(button, .button):hover { translate: 0 2px; } }
  :where(button, .button):focus-visible {
    outline: 3px solid color-mix(in oklab, var(--color-primary) 50%, transparent);
    outline-offset: 2px;
  }
  :where(button, .button):disabled,
  :where(button, .button)[aria-disabled="true"] { cursor: not-allowed; opacity: 0.4; }

  :where(button, .button).accent { background: var(--color-accent); color: var(--color-accent-text); }
  @media (hover: hover) { :where(button, .button).accent:hover { background: var(--color-accent-hover); } }

  :where(button, .button).soft {
    border: 2px solid var(--color-soft-border);
    background: transparent;
    color: var(--color-soft-text);
    padding-block:  calc(var(--button-padding-block) - 2px);
    padding-inline: calc(var(--button-padding-inline) - 2px);
  }
  @media (hover: hover) {
    :where(button, .button).soft:hover {
      background: var(--tp-dark);
      border-color: var(--color-soft-border-hover);
      color: var(--color-text);
    }
  }

  :where(button, .button).icon {
    inline-size: var(--toucharea);
    block-size: var(--toucharea);
    padding: 0;
  }
  :where(button, .button).lg {
    --button-padding-block:  calc(var(--padding) * .6);
    --button-padding-inline: calc(var(--padding) * 2);
  }

  /* ===================== BADGES ===================== */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--gap) * 0.35);
    padding-block: calc(var(--padding) * 0.3);
    padding-inline: calc(var(--padding) * 0.5);
    border-radius: var(--radius-pill);
    background: var(--tp-dark);
    color: var(--color-text);
    font-size: calc(var(--font-size) * 0.85);
    line-height: var(--line-height-button);
    border: 0;
    white-space: nowrap;
  }
  .badge.sm {
    font-size: calc(var(--font-size) * 0.65);
    padding-block: calc(var(--padding) * 0.2);
    padding-inline: calc(var(--padding) * 0.5);
  }
  .badge.lg {
    font-size: var(--font-size);
    padding-block: calc(var(--padding) * 0.4);
    padding-inline: calc(var(--padding) * 0.7);
  }
  .badge.xl {
    font-size: calc(var(--font-size) * 1.2);
    padding-block: calc(var(--padding) * 0.6);
    padding-inline: calc(var(--padding) * 0.9);
  }
  .badge.success { background: var(--color-success); color: white; }
  .badge.warning { background: var(--color-warning); color: black; }
  .badge.danger  { background: var(--color-danger);  color: white; }
  .badge.info    { background: var(--color-info);    color: white; }
  .badge.accent  { background: var(--color-accent);  color: var(--color-accent-text); }

  .badge.count {
    display: inline-grid;
    place-items: center;
    inline-size: 1.7em;
    block-size: 1.7em;
    padding: 0;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    font-size: calc(var(--font-size) * 0.85);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .badge.count.sm { font-size: calc(var(--font-size) * 0.65); }
  .badge.count.lg     { font-size: var(--font-size); }
  .badge.count.xl     { font-size: calc(var(--font-size) * 1.4); }
  .badge.count.corner {
    position: absolute;
    inset-block-start: -0.5em;
    inset-inline-end: -0.5em;
  }

  /* ===================== ALERTS ===================== */
  .alert {
    --alert-color: var(--color-info);

    display: inline-flex;
    align-items: center;
    gap: calc(var(--gap) * 0.5);
    padding-block: calc(var(--padding) * 0.4);
    padding-inline: calc(var(--padding) * 0.6);
    border-radius: var(--radius-sm);
    border: 2px solid var(--alert-color);
    background: color-mix(in oklab, var(--alert-color) 12%, var(--color-bg));
    color: var(--color-text);
    font-size: calc(var(--font-size) * 0.9);
    line-height: var(--line-height-heading);
    max-inline-size: var(--measure);
  }
  .alert.success { --alert-color: var(--color-success); }
  .alert.warning { --alert-color: var(--color-warning); }
  .alert.danger  { --alert-color: var(--color-danger); }
  .alert.info    { --alert-color: var(--color-info); }
  .alert.accent  { --alert-color: var(--color-accent); }

  .alert.block {
    display: flex;
    inline-size: 100%;
    max-inline-size: none;
  }
  .alert.sticky {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
  }
  .alert.fixed        { position: fixed; }
  .alert.top-left     { inset-block-start: var(--padding); inset-inline-start: var(--padding); }
  .alert.top-center   { inset-block-start: var(--padding); inset-inline: 0; margin-inline: auto; }
  .alert.top-right    { inset-block-start: var(--padding); inset-inline-end: var(--padding); }
  .alert.bottom-left  { inset-block-end: var(--padding); inset-inline-start: var(--padding); }
  .alert.bottom-center{ inset-block-end: var(--padding); inset-inline: 0; margin-inline: auto; }
  .alert.bottom-right { inset-block-end: var(--padding); inset-inline-end: var(--padding); }
  .alert.left-center  { inset-inline-start: var(--padding); inset-block: 0; margin-block: auto; }
  .alert.right-center { inset-inline-end: var(--padding); inset-block: 0; margin-block: auto; }

  .alert.timed {
    animation: alert-in var(--transition) ease-out;
    transition: opacity var(--transition), translate var(--transition);
  }
  .alert.timed.leaving { opacity: 0; translate: 0 -8px; }
  @keyframes alert-in {
    from { opacity: 0; translate: 0 -8px; }
    to   { opacity: 1; translate: 0 0; }
  }

  /* ===================== SWITCH ===================== */
  .switch {
    --switch-w: 2.6em;
    --switch-h: 1.4em;
    --switch-pad: 0.2em;

    display: inline-flex;
    align-items: center;
    gap: calc(var(--gap) * 0.4);
    cursor: pointer;
    font-size: var(--font-size);
    user-select: none;
  }
  .switch input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .switch .track {
    position: relative;
    inline-size: var(--switch-w);
    block-size: var(--switch-h);
    border-radius: var(--radius-pill);
    background: var(--color-bg-alt);
    border: 2px solid var(--color-bg-alt);
    transition: background var(--transition-fast), border-color var(--transition-fast);
    flex-shrink: 0;
  }
  .switch .track::after {
    content: "";
    position: absolute;
    inset-block-start: var(--switch-pad);
    inset-inline-start: var(--switch-pad);
    inline-size: calc(var(--switch-h) - (var(--switch-pad) * 2) - 4px);
    block-size:  calc(var(--switch-h) - (var(--switch-pad) * 2) - 4px);
    border-radius: 50%;
    background: white;
    transition: translate var(--transition-fast);
  }
  .switch input:checked + .track {
    background: var(--color-primary);
    border-color: var(--color-primary);
  }
  .switch input:checked + .track::after {
    translate: calc(var(--switch-w) - var(--switch-h)) 0;
  }
  .switch input:focus-visible + .track {
    outline: 3px solid color-mix(in oklab, var(--color-primary) 50%, transparent);
    outline-offset: 2px;
  }
  .switch input:disabled + .track { opacity: 0.4; cursor: not-allowed; }

  /* ===================== AVATARS ===================== */
  :where(label, .label).avatar {
    display: inline-grid;
    place-items: center;
    inline-size: 1.4em;
    block-size: 1.4em;
    border-radius: 50%;
    overflow: hidden;
    background: var(--tp-dark);
    color: var(--color-text);
    font-size: var(--label-size-sm);
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    flex-shrink: 0;
  }
  :where(label, .label).avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  :where(label, .label).avatar.normal {
    inline-size: calc(var(--toucharea) * 0.8);
    block-size: calc(var(--toucharea) * 0.8);
    font-size: var(--label-size);
  }
  :where(label, .label).avatar.lg {
    inline-size: var(--toucharea);
    block-size: var(--toucharea);
    font-size: var(--label-size-lg);
  }
  :where(label, .label).avatar.primary { background: var(--color-primary); color: white; }
  :where(label, .label).avatar.accent  { background: var(--color-accent);  color: var(--color-accent-text); }

  /* ===================== DISCLOSURE ===================== */
  details.disclosure {
    border-block-end: 1px solid var(--color-border);
    padding-block: calc(var(--padding) * 0.4);
  }
  details.disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    padding-block: calc(var(--padding) * 0.3);
    cursor: pointer;
    font-weight: 700;
    list-style: none;
    min-block-size: var(--toucharea);
  }
  details.disclosure > summary::-webkit-details-marker { display: none; }
  details.disclosure > summary::after {
    content: "";
    inline-size: 0.55em;
    block-size: 0.55em;
    border-block-end: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    rotate: 45deg;
    transition: rotate var(--transition-fast);
    flex-shrink: 0;
  }
  details.disclosure[open] > summary::after { rotate: -135deg; }
  details.disclosure > :not(summary) {
    padding-block: calc(var(--padding) * 0.4) var(--padding);
  }
  details.disclosure > summary:focus-visible {
    outline: 3px solid color-mix(in oklab, var(--color-primary) 50%, transparent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  /* ===================== DIALOG ===================== */
  dialog {
    padding: var(--padding);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
    max-inline-size: min(90vw, 40rem);
    max-block-size: 90dvh;
    overflow: auto;
  }
  dialog::backdrop {
    background: light-dark(oklch(0% 0 0 / 0.4), oklch(0% 0 0 / 0.7));
  }
  dialog > :last-child { margin-block-end: 0; }

  /* ===================== PANELS ===================== */
  .panels {
    container: panels / inline-size;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr;
    grid-template-areas: "nav main aside";
    gap: var(--gap);
    min-block-size: 100dvh;
    position: relative;
    isolation: isolate;
  }

  /* Drop empty tracks based on presence of children */
  .panels:not(:has(> aside)) {
    grid-template-columns: auto 1fr;
    grid-template-areas: "nav main";
  }
  .panels:not(:has(> nav)) {
    grid-template-columns: 1fr auto;
    grid-template-areas: "main aside";
  }
  .panels:not(:has(> nav)):not(:has(> aside)) {
    grid-template-columns: 1fr;
    grid-template-areas: "main";
  }

  .panels > * {
    min-inline-size: 0;
    padding: var(--panel-padding);
    border-radius: var(--radius-sm);
    overflow: auto;
  }

  .panels > nav {
    grid-area: nav;
    inline-size: var(--panel-nav-width);
    background: var(--color-panel-nav);
    color: var(--color-text);
  }
  .panels > main {
    grid-area: main;
    background: var(--color-bg-odd);
    color: var(--color-text);
  }
  .panels > aside {
    grid-area: aside;
    inline-size: var(--panel-aside-width);
    background: var(--color-panel-aside-bg);
    color: var(--color-panel-aside-text);
  }

  /* ---------- Stacked variant ---------- */
  .panels.stacked {
    --reveal: calc(var(--panel-nav-width) - var(--panel-stack-peek));
    grid-template-columns: 1fr;
    grid-template-areas: "main";
    position: relative;
  }

  .panels.stacked > main {
    position: relative;
    z-index: 2;
    translate: var(--panel-stack-peek) 0;
    transition: translate var(--transition);
  }

  .panels.stacked > nav {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 1;
    inline-size: var(--panel-nav-width);
    transform-origin: left center;
    scale: 0.95;
    translate: calc(-1 * (var(--panel-nav-width) * 0.025)) 0;
    transition: scale var(--transition), translate var(--transition);
    will-change: scale;
  }

  .panels.stacked > aside {
    grid-area: aside;
    inline-size: var(--panel-aside-width);
    margin-inline-start: var(--reveal);
    transition: margin-inline-start var(--transition);
  }

  /* Reveal on hover or keyboard focus within nav */
  .panels.stacked:has(> nav:hover) > main,
  .panels.stacked:has(> nav:focus-within) > main {
    translate: var(--reveal) 0;
  }
  .panels.stacked:has(> nav:hover) > aside,
  .panels.stacked:has(> nav:focus-within) > aside {
    margin-inline-start: calc(var(--reveal) * 2);
  }
  .panels.stacked:has(> nav:hover) > nav,
  .panels.stacked:has(> nav:focus-within) > nav {
    scale: 1;
    translate: 0 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .panels.stacked > main,
    .panels.stacked > nav,
    .panels.stacked > aside { transition: none; }
  }

  /* ---------- Narrow container: single column ---------- */
  @container panels (max-width: 767px) {
    .panels,
    .panels.stacked {
      grid-template-columns: 1fr;
      grid-template-areas: "nav" "main" "aside";
      --panel-padding: calc(var(--padding) * 0.5);
    }
    .panels > nav,
    .panels > aside {
      inline-size: auto;
    }
    .panels.stacked > main,
    .panels.stacked > aside {
      translate: none;
      margin-inline-start: 0;
    }
    .panels.stacked > nav {
      position: static;
      scale: 1;
      translate: 0 0;
    }
  }
}

:where(
  input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"]),
  textarea,
  select
) {
  font: inherit;
  font-size: var(--font-size);
  line-height: var(--line-height-button);
  inline-size: 100%;
  min-block-size: var(--toucharea);
  padding-block:  var(--field-padding-block);
  padding-inline: var(--field-padding-inline);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-field-bg);
  color: var(--color-text);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
:where(
  input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"]),
  textarea,
  select
)::placeholder { color: var(--color-placeholder); opacity: 1; }

@media (hover: hover) {
  :where(
    input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"]),
    textarea,
    select
  ):hover:not(:disabled) { border-color: var(--color-border-strong); }
}
:where(
  input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"]),
  textarea,
  select
):focus-visible {
  outline: 3px solid color-mix(in oklab, var(--color-primary) 50%, transparent);
  outline-offset: 2px;
  border-color: var(--color-primary);
}
:where(
  input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"]),
  textarea,
  select
):disabled { cursor: not-allowed; opacity: 0.4; }

:where(textarea) { min-block-size: calc(var(--toucharea) * 3); resize: vertical; line-height: var(--line-height-body); }

:where(select) {
  appearance: none;
  padding-inline-end: calc(var(--field-padding-inline) + 1.5em);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - var(--field-padding-inline) - 0.8em) 50%,
    calc(100% - var(--field-padding-inline) - 0.4em) 50%;
  background-size: 0.4em 0.4em;
  background-repeat: no-repeat;
  cursor: pointer;
}

:where(input[type="checkbox"], input[type="radio"]) {
  inline-size: 1.25em;
  block-size: 1.25em;
  margin: 0;
  cursor: pointer;
}

@layer utilities {
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .center-items { display: flex; align-items: center; }
  .mb-1 { margin-block-end: var(--padding); }
  .mb-2 { margin-block-end: calc(var(--padding) * 2); }
  .text-muted { opacity: 0.65; }
  .bg-odd { background: var(--color-bg-odd); }
  .bg-alt { background: var(--color-bg-alt); }
  .no-bg  { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) { :where(button, .button) { border: 1px solid ButtonText; } }