/* ============================================================
   Clay UI - soft / claymorphic design tokens
   Light comes from the top-left. Raised surfaces: light shadow
   top-left, dark shadow bottom-right. Wells (inputs) invert it.
   ============================================================ */
html[data-theme="clay"]{
  /* light = white paper under a lamp; the theme slider dims the room */
  --bg: #eef0f4;
  --surface: #f5f6f9;
  --surface-2: #e6e8ee;
  --surface-hi: #ffffff;                       /* lit edge of every raised surface */
  --room-light: rgba(255, 255, 255, 0.85);     /* lamp glow, top-left of the page */
  --room-shade: rgba(120, 126, 140, 0.18);     /* ambient shade, bottom-right */
  --text: #5c606a;
  --text-strong: #33373f;
  --muted: #8f939d;

  /* accent family - the picker rewrites all five at runtime */
  --accent: #bcb094;                /* primary: warm sand */
  --accent-deep: #a2977f;
  --accent-soft: #e1dbcf;
  --accent-rgb: 162, 151, 127;      /* for tinted drop shadows */
  --accent-deep-rgb: 113, 106, 89;  /* for tinted inner shadows */
  --on-accent: #fff;

  --light: rgba(255, 255, 255, 0.95);
  --dark: rgba(154, 160, 172, 0.55);
  --dark-2: rgba(154, 160, 172, 0.35);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;

  /* raised */
  --raise: -6px -6px 14px var(--light), 6px 6px 14px var(--dark);
  --raise-sm: -3px -3px 8px var(--light), 3px 3px 8px var(--dark);
  --raise-lg: -10px -10px 24px var(--light), 10px 10px 24px var(--dark);
  /* pressed / inset */
  --inset: inset -4px -4px 10px var(--light), inset 4px 4px 10px var(--dark);
  --inset-sm: inset -2px -2px 6px var(--light), inset 2px 2px 6px var(--dark);
  /* accent surfaces keep the same geometry but tint the shadows */
  --accent-shadow: rgba(var(--accent-rgb), 0.45);
  --accent-raise: -5px -5px 12px var(--light), 5px 5px 14px var(--accent-shadow);
  --accent-inset: inset -3px -3px 8px rgba(255, 255, 255, 0.55), inset 3px 3px 8px rgba(var(--accent-deep-rgb), 0.45);

  /* knob faces, scrollbar bevel and thumbwheel shading - all theme-dependent.
     The theme slider (app.js) interpolates every token in this block from
     light → dark → black, so nothing here is hard-coded per theme. */
  --knob-a: #f8f8fa;
  --knob-b: var(--surface-2);
  --sb-hi: rgba(255, 255, 255, 0.95);
  --sb-lo: var(--dark);
  --drum-hi: rgba(255, 255, 255, 0.4);
  --drum-lo: var(--dark-2);

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* overshoots, then clicks into place */
  --spring-soft: cubic-bezier(0.3, 1.3, 0.5, 1);
  --pull: cubic-bezier(0.2, 0.9, 0.3, 1.08);      /* fills chase the thumb, slight overshoot */
}

html[data-theme="clay"] *{ box-sizing: border-box; }
html[data-theme="clay"]{ scroll-behavior: smooth; }
html[data-theme="clay"] body{
  margin: 0;
  min-height: 100vh;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  /* the room: a lamp top-left, shade gathering bottom-right, over the base tone */
  background:
    radial-gradient(120% 90% at 0% 0%, var(--room-light), transparent 62%),
    radial-gradient(120% 90% at 100% 100%, var(--room-shade), transparent 62%),
    var(--bg);
  background-attachment: fixed;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
html[data-theme="clay"] button, html[data-theme="clay"] input{ font: inherit; color: inherit; }
html[data-theme="clay"] button{ cursor: pointer; border: 0; background: none; }
html[data-theme="clay"] svg{ width: 22px; height: 22px; fill: currentColor; }
html[data-theme="clay"] svg.accent{ color: var(--accent-deep); }
html[data-theme="clay"] :focus-visible{ outline: 3px solid var(--accent-soft); outline-offset: 3px; }
html[data-theme="clay"] input:focus-visible, html[data-theme="clay"] textarea:focus-visible{ outline: none; }

/* ---------- Layout ---------- */
html[data-theme="clay"] .hero{
  max-width: 1140px;
  margin: 0 auto;
  padding: 56px 24px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
}
html[data-theme="clay"] .eyebrow{
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--inset-sm);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
html[data-theme="clay"] .hero h1{
  margin: 16px 0 8px;
  font-size: clamp(38px, 6vw, 60px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}
html[data-theme="clay"] .hero__text{ flex: 1 1 340px; min-width: 0; }
html[data-theme="clay"] .hero p{ max-width: 520px; margin: 0; color: var(--muted); }
html[data-theme="clay"] .hero__actions{
  flex: 0 0 auto;
  margin-left: auto;          /* stays pinned top-right, even when it wraps */
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}

html[data-theme="clay"] .board{
  max-width: 1140px;
  margin: 0 auto;
  padding: 24px 24px 64px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}
html[data-theme="clay"] .panel{
  padding: 26px 26px 30px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--raise-lg);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
html[data-theme="clay"] .panel h2{
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
html[data-theme="clay"] .row{ display: flex; align-items: center; gap: 18px; }
html[data-theme="clay"] .row--wrap{ flex-wrap: wrap; }
html[data-theme="clay"] .spacer{ flex: 0 0 8px; }

html[data-theme="clay"] .foot{ text-align: center; padding: 8px 24px 48px; color: var(--muted); font-size: 13px; }
html[data-theme="clay"] .foot code{
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--inset-sm);
  font-size: 12px;
}

/* ---------- Buttons ---------- */
html[data-theme="clay"] .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--raise);
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: box-shadow 0.18s var(--ease), transform 0.28s var(--spring), color 0.18s;
}
html[data-theme="clay"] .btn:hover{ transform: translateY(-1px); }
html[data-theme="clay"] .btn:active{ transition-duration: 0.08s, 0.08s, 0.18s; transform: translateY(1px) scale(0.98); }
html[data-theme="clay"] .btn:active, html[data-theme="clay"] .btn--pressed{ box-shadow: var(--inset); color: var(--accent-deep); }
html[data-theme="clay"] .btn--pressed{ transform: none; }
html[data-theme="clay"] .btn--accent{
  background: linear-gradient(145deg, var(--accent-soft), var(--accent));
  color: var(--on-accent);
  box-shadow: var(--accent-raise);
}
html[data-theme="clay"] .btn--accent:active{ box-shadow: var(--accent-inset); color: var(--on-accent); }
html[data-theme="clay"] .btn:disabled{ cursor: not-allowed; color: var(--muted); box-shadow: var(--raise-sm); opacity: 0.7; transform: none; }

/* ---------- Icon tiles ---------- */
html[data-theme="clay"] .tile{
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--raise);
  color: var(--text);
  transition: box-shadow 0.18s var(--ease), transform 0.28s var(--spring), color 0.18s;
}
html[data-theme="clay"] .tile svg{ width: 24px; height: 24px; }
html[data-theme="clay"] .tile:hover{ transform: translateY(-1px); }
html[data-theme="clay"] .tile:active{ transition-duration: 0.08s, 0.08s, 0.18s; transform: translateY(1px) scale(0.96); }
html[data-theme="clay"] .tile:active, html[data-theme="clay"] .tile--pressed{ box-shadow: var(--inset); }
html[data-theme="clay"] .tile--pressed{ transform: none; }
html[data-theme="clay"] .tile--pressed{ color: var(--accent-deep); }
html[data-theme="clay"] .tile--accent{ color: var(--accent-deep); }
html[data-theme="clay"] .tile--wide{ width: 78px; }
html[data-theme="clay"] .tile--small{ width: 48px; height: 48px; border-radius: var(--r-sm); }
html[data-theme="clay"] .tile--round{ border-radius: 50%; }
html[data-theme="clay"] .tile--play svg{ color: var(--accent-deep); filter: drop-shadow(1px 1px 1px rgba(var(--accent-deep-rgb), 0.4)); }

/* ---------- Toggles ---------- */
html[data-theme="clay"] .switch{ position: relative; display: inline-block; }
html[data-theme="clay"] .switch input{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
html[data-theme="clay"] .switch__track{
  position: relative;
  display: block;
  width: 84px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--inset);
  /* the track changes colour slowly while the knob springs across fast */
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
html[data-theme="clay"] .switch__knob{
  position: absolute;
  top: 5px;
  left: 5px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--knob-a), var(--knob-b));
  box-shadow: var(--raise-sm);
  transition: transform 0.38s var(--spring), background 0.5s var(--ease);
}
html[data-theme="clay"] .switch input:checked + .switch__track{
  background: linear-gradient(145deg, var(--accent-soft), var(--accent));
  box-shadow: var(--accent-inset);
}
html[data-theme="clay"] .switch input:checked + .switch__track .switch__knob{ transform: translateX(40px); }

/* vertical ON/OFF pill */
html[data-theme="clay"] .switch--v .switch__track{ width: 64px; height: 92px; border-radius: 22px; }
html[data-theme="clay"] .switch--v .switch__knob{ width: 52px; height: 40px; top: 6px; left: 6px; border-radius: 16px; }
html[data-theme="clay"] .switch--v input:checked + .switch__track .switch__knob{ transform: translateY(40px); }
html[data-theme="clay"] .switch__text{
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  transition: color 0.25s;
}
html[data-theme="clay"] .switch--v .switch__text{ bottom: 14px; }
html[data-theme="clay"] .switch--v input:checked + .switch__track .switch__text{ bottom: auto; top: 14px; color: var(--on-accent); }

/* theme slider in the header: sun ─── moon, fill shows the light→black range */
html[data-theme="clay"] .theme-slider{
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 18px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--raise);
}
html[data-theme="clay"] .theme-slider svg{ width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
html[data-theme="clay"] .theme-slider .slider{ width: 130px; }
html[data-theme="clay"] .theme-slider .slider__fill{
  background: linear-gradient(90deg, #f7f8fa, #8d9099 30%, #2b2e35 60%, #08080a);
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.25);
}

/* ---------- Checkbox & Radio ---------- */
html[data-theme="clay"] .radio, html[data-theme="clay"] .check{ position: relative; display: inline-block; width: 34px; height: 34px; }
html[data-theme="clay"] .radio input, html[data-theme="clay"] .check input{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
html[data-theme="clay"] .radio span, html[data-theme="clay"] .check span{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--surface);
  box-shadow: var(--inset-sm);
  transition: background 0.2s var(--ease);
}
html[data-theme="clay"] .radio span{ border-radius: 50%; }
html[data-theme="clay"] .check span{ border-radius: 9px; }
html[data-theme="clay"] .radio span::after{
  content: "";
  width: 16px; height: 16px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--knob-a), var(--knob-b));
  box-shadow: var(--raise-sm);
  transform: scale(0.85);
  transition: background 0.25s var(--ease), transform 0.32s var(--spring), box-shadow 0.25s;
}
html[data-theme="clay"] .radio input:checked + span::after{
  background: linear-gradient(145deg, var(--accent-soft), var(--accent));
  box-shadow: var(--accent-raise);
  transform: scale(1);
}
html[data-theme="clay"] .radio--dark input:checked + span::after{ background: linear-gradient(145deg, #8a8e97, #5f636b); box-shadow: var(--raise-sm); }
html[data-theme="clay"] .check svg{ width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(0.4); transition: opacity 0.15s, transform 0.32s var(--spring), stroke 0.2s; }
html[data-theme="clay"] .check input:checked + span{ background: linear-gradient(145deg, var(--accent-soft), var(--accent)); box-shadow: var(--accent-inset); }
html[data-theme="clay"] .check input:checked + span svg{ opacity: 1; transform: scale(1); stroke: var(--on-accent); }
html[data-theme="clay"] .check--dark input:checked + span{ background: var(--surface); box-shadow: var(--inset-sm); }
html[data-theme="clay"] .check--dark input:checked + span svg{ stroke: var(--text-strong); }

/* ---------- Segmented ---------- */
html[data-theme="clay"] .segmented{
  display: flex;
  padding: 6px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--inset);
}
html[data-theme="clay"] .segmented button{
  flex: 1;
  height: 40px;
  border-radius: 12px;
  color: var(--muted);
  font-weight: 500;
  transition: box-shadow 0.2s var(--ease), color 0.2s, background 0.2s;
}
html[data-theme="clay"] .segmented button[aria-checked="true"]{
  background: var(--surface);
  box-shadow: var(--raise-sm);
  color: var(--text-strong);
}

/* ---------- Search ---------- */
html[data-theme="clay"] .search{
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 20px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--inset);
  color: var(--muted);
  transition: box-shadow 0.2s var(--ease);
}
/* focus: the well sinks a touch deeper - no glow */
html[data-theme="clay"] .search:focus-within{ box-shadow: inset -5px -5px 12px var(--light), inset 5px 5px 12px var(--dark); }
html[data-theme="clay"] .search input{ flex: 1; border: 0; background: transparent; outline: none; color: var(--text-strong); }
html[data-theme="clay"] .search input::placeholder{ color: var(--muted); }
html[data-theme="clay"] .search input::-webkit-search-cancel-button{ -webkit-appearance: none; }
html[data-theme="clay"] .search--accent{ background: linear-gradient(145deg, var(--accent-soft), var(--accent)); box-shadow: var(--accent-inset); color: var(--on-accent); }
html[data-theme="clay"] .search--accent input, html[data-theme="clay"] .search--accent input::placeholder{ color: var(--on-accent); }

/* ---------- Dropdown (select + menu) ---------- */
html[data-theme="clay"] .dd{ position: relative; }
html[data-theme="clay"] .dd--grow{ flex: 1 1 0; min-width: 140px; }
html[data-theme="clay"] .dd__trigger{
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 22px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--inset);
  color: var(--muted);
  font-weight: 500;
  text-align: left;
  transition: color 0.2s, box-shadow 0.2s var(--ease);
}
html[data-theme="clay"] .dd__trigger:focus-visible{ outline: none; box-shadow: var(--inset), 0 0 0 3px var(--accent-soft); }
html[data-theme="clay"] .dd__trigger.has-value, html[data-theme="clay"] .dd__trigger[aria-expanded="true"]{ color: var(--text-strong); }
html[data-theme="clay"] .dd__trigger--btn{ width: auto; height: 48px; box-shadow: var(--raise); color: var(--text); }
html[data-theme="clay"] .dd__trigger--btn[aria-expanded="true"]{ box-shadow: var(--inset); color: var(--accent-deep); }
html[data-theme="clay"] .dd__label{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="clay"] .dd__chev{ flex: 0 0 auto; width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
html[data-theme="clay"] .dd__trigger[aria-expanded="true"] .dd__chev{ transform: rotate(180deg); }

html[data-theme="clay"] .dd__menu{
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: max(100%, 200px);
  z-index: 30;
  padding: 10px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--raise-lg);
  display: grid;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}
html[data-theme="clay"] .dd__menu--right{ left: auto; right: 0; min-width: 220px; }
html[data-theme="clay"] .dd.is-open .dd__menu{ opacity: 1; visibility: visible; transform: none; }
html[data-theme="clay"] .dd__menu:focus{ outline: none; }

html[data-theme="clay"] .dd__option{
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  color: var(--text);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  transition: box-shadow 0.15s var(--ease), background 0.15s, color 0.15s;
}
html[data-theme="clay"] .dd__option svg{ width: 18px; height: 18px; flex: 0 0 auto; color: var(--muted); }
html[data-theme="clay"] .dd__option:hover, html[data-theme="clay"] .dd__option.is-focused{
  background: var(--surface-2);
  box-shadow: var(--inset-sm);
  color: var(--text-strong);
}
html[data-theme="clay"] .dd__option:hover svg, html[data-theme="clay"] .dd__option.is-focused svg{ color: var(--text-strong); }
html[data-theme="clay"] .dd__option:focus-visible{ outline: none; }
html[data-theme="clay"] .dd__option[aria-selected="true"]{ color: var(--accent-deep); }
html[data-theme="clay"] .dd__check{ margin-left: auto; opacity: 0; transform: scale(0.6); transition: opacity 0.15s, transform 0.15s var(--ease); }
html[data-theme="clay"] .dd__option[aria-selected="true"] .dd__check{ opacity: 1; transform: none; color: var(--accent-deep) !important; }
html[data-theme="clay"] .dd__dot{
  flex: 0 0 auto;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 2px 2px 4px var(--dark), inset 1px 1px 2px rgba(255, 255, 255, 0.5);
}
html[data-theme="clay"] .dd__kbd{
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--inset-sm);
  font-family: inherit;
  font-size: 11px;
  color: var(--muted);
}
html[data-theme="clay"] .dd__divider{ height: 2px; margin: 6px 10px; border-radius: 2px; background: var(--surface-2); box-shadow: var(--inset-sm); }
html[data-theme="clay"] .dd__option--danger, html[data-theme="clay"] .dd__option--danger svg{ color: #d9534f; }
html[data-theme="clay"] .dd__option--danger:hover, html[data-theme="clay"] .dd__option--danger.is-focused, html[data-theme="clay"] .dd__option--danger:hover svg, html[data-theme="clay"] .dd__option--danger.is-focused svg{ color: #c9302c; }

html[data-theme="clay"] .hint{ margin: 0; font-size: 13px; color: var(--muted); }
html[data-theme="clay"] .hint kbd{
  display: inline-block;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--raise-sm);
  font-family: inherit;
  font-size: 11px;
  text-align: center;
  color: var(--text);
}

/* ---------- Notification ---------- */
html[data-theme="clay"]{ --ok: #4fa36d; --warn: #e0a232; --err: #d9534f; }
html[data-theme="clay"] .notif{ position: relative; }
html[data-theme="clay"] .notif__triggers{ gap: 10px; }
html[data-theme="clay"] .badge-host{ position: relative; }
html[data-theme="clay"] .badge{
  position: absolute;
  top: -7px; right: -7px;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--accent-soft), var(--accent));
  box-shadow: var(--accent-raise);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  transition: transform 0.25s var(--ease), opacity 0.25s;
}
html[data-theme="clay"] .badge.is-empty{ transform: scale(0); opacity: 0; }
html[data-theme="clay"] .alert, html[data-theme="clay"] .toasts .toast{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--surface);
}
html[data-theme="clay"] .alert{
  box-shadow: var(--inset);
  overflow: hidden;
  transition: opacity 0.25s, transform 0.25s var(--ease), height 0.28s var(--ease), padding 0.28s var(--ease), margin 0.28s var(--ease);
}
html[data-theme="clay"] .alert.is-leaving{ opacity: 0; transform: translateX(16px); height: 0 !important; padding-top: 0; padding-bottom: 0; margin-top: -22px; }
html[data-theme="clay"] .notice__icon{
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--accent-soft), var(--accent));
  box-shadow: var(--accent-raise);
  color: var(--on-accent);
}
html[data-theme="clay"] .notice__icon svg{ width: 18px; height: 18px; }
/* kind tints: raised, coloured tiles so the type reads at a glance */
html[data-theme="clay"] .notice__icon--success{ background: linear-gradient(145deg, color-mix(in srgb, var(--ok) 45%, #fff), var(--ok)); box-shadow: -4px -4px 10px var(--light), 4px 4px 12px color-mix(in srgb, var(--ok) 45%, transparent); color: #fff; }
html[data-theme="clay"] .notice__icon--warning{ background: linear-gradient(145deg, color-mix(in srgb, var(--warn) 45%, #fff), var(--warn)); box-shadow: -4px -4px 10px var(--light), 4px 4px 12px color-mix(in srgb, var(--warn) 45%, transparent); color: #5a4a2a; }
html[data-theme="clay"] .notice__icon--error{ background: linear-gradient(145deg, color-mix(in srgb, var(--err) 45%, #fff), var(--err)); box-shadow: -4px -4px 10px var(--light), 4px 4px 12px color-mix(in srgb, var(--err) 45%, transparent); color: #fff; }
html[data-theme="clay"] .notice__icon--info{ background: var(--surface); box-shadow: var(--inset-sm); color: var(--accent-deep); }
html[data-theme="clay"] .notice__body{ flex: 1; min-width: 0; }
html[data-theme="clay"] .notice__body strong{ display: block; color: var(--text-strong); font-weight: 600; }
html[data-theme="clay"] .notice__body p{ margin: 2px 0 0; font-size: 13px; color: var(--muted); }
html[data-theme="clay"] .link{
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-deep);
  text-decoration: none;
}
html[data-theme="clay"] .link:hover{ text-decoration: underline; }
html[data-theme="clay"] .notice__body .link{ margin-top: 8px; display: inline-block; }

/* notification centre popover (anchored under the bell, opens to the right) */
html[data-theme="clay"] .popover--notif{ left: 0; right: auto; width: 320px; }
html[data-theme="clay"] .popover__head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html[data-theme="clay"] .popover__head h3{ margin: 0; }
html[data-theme="clay"] .notif__list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-height: 320px; overflow-y: auto; }
html[data-theme="clay"] .notif__item{
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--raise-sm);
  cursor: pointer;
  transition: box-shadow 0.15s var(--ease), opacity 0.2s;
}
html[data-theme="clay"] .notif__item:hover, html[data-theme="clay"] .notif__item:focus-visible{ box-shadow: var(--inset-sm); outline: none; }
html[data-theme="clay"] .notif__item:not(.is-unread){ opacity: 0.7; }
html[data-theme="clay"] .notif__item .notice__icon{ width: 32px; height: 32px; border-radius: 10px; }
html[data-theme="clay"] .notif__item .notice__icon svg{ width: 16px; height: 16px; }
html[data-theme="clay"] .notif__text{ flex: 1; min-width: 0; }
html[data-theme="clay"] .notif__text strong{ display: block; font-size: 14px; font-weight: 600; color: var(--text-strong); }
html[data-theme="clay"] .notif__text p{ margin: 1px 0 0; font-size: 13px; color: var(--muted); }
html[data-theme="clay"] .notif__text time{ display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
html[data-theme="clay"] .notif__dot{
  flex: 0 0 auto;
  width: 9px; height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--accent-soft), var(--accent));
  box-shadow: 1px 1px 3px rgba(var(--accent-deep-rgb), 0.5);
  transition: transform 0.2s var(--ease), opacity 0.2s;
}
html[data-theme="clay"] .notif__item:not(.is-unread) .notif__dot{ transform: scale(0); opacity: 0; }
html[data-theme="clay"] .notif__empty{ margin: 4px 0; text-align: center; font-size: 13px; color: var(--muted); }
html[data-theme="clay"] .notif__item.is-new{ animation: toast-in 0.3s var(--ease); }
html[data-theme="clay"] .notice__close{
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--surface);
  box-shadow: var(--raise-sm);
  color: var(--muted);
  transition: box-shadow 0.15s var(--ease), color 0.15s;
}
html[data-theme="clay"] .notice__close svg{ width: 14px; height: 14px; }
html[data-theme="clay"] .notice__close:hover{ color: var(--text-strong); }
html[data-theme="clay"] .notice__close:active{ box-shadow: var(--inset-sm); }

html[data-theme="clay"] .toasts{
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 100;
  width: min(360px, calc(100vw - 48px));
  display: grid;
  gap: 14px;
  pointer-events: none;
}
html[data-theme="clay"] .toasts .toast{
  position: relative;
  padding-bottom: 22px;
  box-shadow: var(--raise-lg);
  overflow: hidden;
  pointer-events: auto;
  animation: toast-in 0.35s var(--ease);
  transition: height 0.28s var(--ease), padding 0.28s var(--ease), margin 0.28s var(--ease), opacity 0.22s, transform 0.28s var(--ease);
}
/* leaving: fade + slide, and collapse height so the stack closes up smoothly */
html[data-theme="clay"] .toasts .toast.is-leaving{
  opacity: 0;
  transform: translateX(30px);
  height: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: -14px;   /* cancel the stack gap */
}
html[data-theme="clay"] .toasts .toast[data-kind="success"] .toast__bar i{ background: linear-gradient(90deg, color-mix(in srgb, var(--ok) 55%, #fff), var(--ok)); }
html[data-theme="clay"] .toasts .toast[data-kind="warning"] .toast__bar i{ background: linear-gradient(90deg, color-mix(in srgb, var(--warn) 55%, #fff), var(--warn)); }
html[data-theme="clay"] .toasts .toast[data-kind="error"]   .toast__bar i{ background: linear-gradient(90deg, color-mix(in srgb, var(--err) 55%, #fff), var(--err)); }
html[data-theme="clay"] .toast__bar{
  position: absolute;
  left: 18px; right: 18px; bottom: 9px;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-2);
  box-shadow: var(--inset-sm);
  overflow: hidden;
}
html[data-theme="clay"] .toast__bar i{
  display: block;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent));
  transform-origin: left;
  animation: toast-progress var(--dur, 4s) linear forwards;
}
html[data-theme="clay"] .toasts .toast:hover .toast__bar i{ animation-play-state: paused; }
@keyframes toast-in{ from { opacity: 0; transform: translateX(40px) scale(0.96); } }
@keyframes toast-out{ to { opacity: 0; transform: translateY(12px) scale(0.96); } }
@keyframes toast-progress{ from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------- Grid ---------- */
html[data-theme="clay"] .panel--wide{ grid-column: 1 / -1; }
@media (max-width: 720px){ html[data-theme="clay"] .panel--wide{ grid-column: auto; } }
html[data-theme="clay"] .grid-wrap{
  padding: 10px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--inset);
  overflow-x: auto;
}
html[data-theme="clay"] .grid{ min-width: 520px; font-size: 14px; }
html[data-theme="clay"] .grid__row{
  display: grid;
  grid-template-columns: 1.6fr 1.3fr 0.7fr 1fr;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  min-height: 48px;
  border-radius: var(--r-sm);
}
html[data-theme="clay"] .grid__row--head{
  min-height: 40px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
html[data-theme="clay"] .grid__sort{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  transition: color 0.15s;
}
html[data-theme="clay"] .grid__sort svg{ width: 14px; height: 14px; opacity: 0.5; }
html[data-theme="clay"] .grid__sort:hover, html[data-theme="clay"] .grid__sort[aria-sort]{ color: var(--accent-deep); }
html[data-theme="clay"] .grid__sort[aria-sort] svg{ opacity: 1; }
html[data-theme="clay"] .grid__sort[aria-sort="descending"] svg{ transform: scaleY(-1); }
html[data-theme="clay"] .grid__sort.num{ justify-content: flex-end; }
html[data-theme="clay"] .grid__body{ display: grid; gap: 10px; padding: 4px 2px 6px; }
html[data-theme="clay"] .grid__row--body{
  background: var(--surface);
  box-shadow: var(--raise-sm);
  font-weight: 500;
  color: var(--text);
  transition: color 0.15s, box-shadow 0.15s var(--ease);
}
html[data-theme="clay"] .grid__row--body:hover{ color: var(--text-strong); }
html[data-theme="clay"] .grid__row--body [role="cell"]{ display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
html[data-theme="clay"] .grid__row--body .dd__dot{ width: 12px; height: 12px; }
html[data-theme="clay"] .num{ justify-content: flex-end; text-align: right; font-variant-numeric: tabular-nums; }
html[data-theme="clay"] .pill{
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--inset-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
html[data-theme="clay"] .pill--ok{ color: #4fa36d; }
html[data-theme="clay"] .pill--warn{ color: #d9534f; }
html[data-theme="clay"] .pill--accent{ color: var(--accent-deep); }

/* ---------- Tooltip ----------
   <el class="tip" data-tip="text"> - ::after is the bubble, ::before the arrow.
   Shown on hover, keyboard focus, or .is-open (programmatic). */
html[data-theme="clay"] .tips{ padding-top: 44px; }        /* room for top tooltips inside the panel */
html[data-theme="clay"] .tip{ position: relative; }
/* hover transforms create a stacking context, which would trap the bubble's
   z-index below later siblings - so lift the whole element while it shows */
html[data-theme="clay"] .tip:hover, html[data-theme="clay"] .tip:focus-visible, html[data-theme="clay"] .tip.is-open{ z-index: 50; }
html[data-theme="clay"] .tip::before, html[data-theme="clay"] .tip::after{
  position: absolute;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}
html[data-theme="clay"] .tip::after{
  content: attr(data-tip);
  padding: 8px 14px;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--raise);
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}
html[data-theme="clay"] .tip::before{
  content: "";
  width: 12px; height: 12px;
  border-radius: 2px;
  background: var(--surface);
}
/* top (default) */
html[data-theme="clay"] .tip::after{ left: 50%; bottom: calc(100% + 14px); transform: translate(-50%, 6px); }
html[data-theme="clay"] .tip::before{ left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 6px) rotate(45deg); box-shadow: 3px 3px 5px var(--dark); }
/* bottom */
html[data-theme="clay"] .tip--bottom::after{ bottom: auto; top: calc(100% + 14px); transform: translate(-50%, -6px); }
html[data-theme="clay"] .tip--bottom::before{ bottom: auto; top: calc(100% + 10px); transform: translate(-50%, -6px) rotate(45deg); box-shadow: -3px -3px 5px var(--light); }
/* left */
html[data-theme="clay"] .tip--left::after{ left: auto; bottom: auto; right: calc(100% + 14px); top: 50%; transform: translate(6px, -50%); }
html[data-theme="clay"] .tip--left::before{ left: auto; bottom: auto; right: calc(100% + 10px); top: 50%; transform: translate(6px, -50%) rotate(45deg); box-shadow: 3px -3px 5px var(--dark); }
/* right */
html[data-theme="clay"] .tip--right::after{ bottom: auto; left: calc(100% + 14px); top: 50%; transform: translate(-6px, -50%); }
html[data-theme="clay"] .tip--right::before{ bottom: auto; left: calc(100% + 10px); top: 50%; transform: translate(-6px, -50%) rotate(45deg); box-shadow: -3px 3px 5px var(--dark); }

html[data-theme="clay"] .tip:hover::before, html[data-theme="clay"] .tip:hover::after, html[data-theme="clay"] .tip:focus-visible::before, html[data-theme="clay"] .tip:focus-visible::after, html[data-theme="clay"] .tip.is-open::before, html[data-theme="clay"] .tip.is-open::after{
  opacity: 1;
  visibility: visible;
}
html[data-theme="clay"] .tip:hover::after, html[data-theme="clay"] .tip:focus-visible::after, html[data-theme="clay"] .tip.is-open::after{ transform: translate(-50%, 0); }
html[data-theme="clay"] .tip:hover::before, html[data-theme="clay"] .tip:focus-visible::before, html[data-theme="clay"] .tip.is-open::before{ transform: translate(-50%, 0) rotate(45deg); }
html[data-theme="clay"] .tip--bottom:hover::after, html[data-theme="clay"] .tip--bottom:focus-visible::after, html[data-theme="clay"] .tip--bottom.is-open::after{ transform: translate(-50%, 0); }
html[data-theme="clay"] .tip--bottom:hover::before, html[data-theme="clay"] .tip--bottom:focus-visible::before, html[data-theme="clay"] .tip--bottom.is-open::before{ transform: translate(-50%, 0) rotate(45deg); }
html[data-theme="clay"] .tip--left:hover::after, html[data-theme="clay"] .tip--left:focus-visible::after, html[data-theme="clay"] .tip--left.is-open::after, html[data-theme="clay"] .tip--right:hover::after, html[data-theme="clay"] .tip--right:focus-visible::after, html[data-theme="clay"] .tip--right.is-open::after{ transform: translate(0, -50%); }
html[data-theme="clay"] .tip--left:hover::before, html[data-theme="clay"] .tip--left:focus-visible::before, html[data-theme="clay"] .tip--left.is-open::before, html[data-theme="clay"] .tip--right:hover::before, html[data-theme="clay"] .tip--right:focus-visible::before, html[data-theme="clay"] .tip--right.is-open::before{ transform: translate(0, -50%) rotate(45deg); }

html[data-theme="clay"] .tip--accent::after{
  background: linear-gradient(145deg, var(--accent-soft), var(--accent));
  box-shadow: var(--accent-raise);
  color: var(--on-accent);
}
html[data-theme="clay"] .tip--accent::before{ background: var(--accent-soft); box-shadow: 3px 3px 5px rgba(var(--accent-rgb), 0.45); }

/* Mega tooltip: a rich card instead of an attr() bubble. The host has no
   data-tip, so the pseudo bubble is switched off; the card is a real child so
   it can hold markup. The wrapper's top padding bridges the hover gap. */
html[data-theme="clay"] .tip--mega{ display: inline-block; }
html[data-theme="clay"] .tip--mega::before, html[data-theme="clay"] .tip--mega::after{ content: none; }
html[data-theme="clay"] .tip--mega:hover, html[data-theme="clay"] .tip--mega:focus-within, html[data-theme="clay"] .tip--mega.is-open{ z-index: 50; }
html[data-theme="clay"] .tip__mega{
  position: absolute;
  z-index: 60;
  top: 100%;
  left: 0;
  width: 330px;
  padding-top: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  cursor: default;
  text-align: left;
  font-weight: 400;
}
html[data-theme="clay"] .tip--mega:hover .tip__mega, html[data-theme="clay"] .tip--mega:focus-within .tip__mega, html[data-theme="clay"] .tip--mega.is-open .tip__mega{
  opacity: 1;
  visibility: visible;
  transform: none;
}
html[data-theme="clay"] .tip__mega-card{
  position: relative;
  padding: 18px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--raise-lg);
  display: grid;
  gap: 14px;
}
html[data-theme="clay"] .tip__mega-card::before{
  content: "";
  position: absolute;
  top: -6px; left: 30px;
  width: 12px; height: 12px;
  border-radius: 2px;
  background: var(--surface);
  transform: rotate(45deg);
  box-shadow: -3px -3px 5px var(--light);
}
html[data-theme="clay"] .tip__mega-head{ display: flex; align-items: center; gap: 12px; }
html[data-theme="clay"] .tip__mega-head strong{ display: block; color: var(--text-strong); font-weight: 600; font-size: 15px; }
html[data-theme="clay"] .tip__mega-head p{ margin: 0; font-size: 13px; color: var(--muted); }
html[data-theme="clay"] .tip__mega-text{ margin: 0; font-size: 13px; line-height: 1.55; color: var(--text); }
html[data-theme="clay"] .tip__mega-swatches{ display: flex; gap: 10px; }
html[data-theme="clay"] .tip__mega-swatches i{
  width: 30px; height: 30px;
  border-radius: 10px;
  background: var(--c);
  box-shadow: 2px 2px 5px var(--dark), inset 1px 1px 2px rgba(255, 255, 255, 0.4);
}
html[data-theme="clay"] .tip__mega-foot{ display: flex; justify-content: space-between; align-items: center; gap: 10px; }
html[data-theme="clay"] .tip__mega-foot .hint{ font-size: 12px; }

/* ---------- Pop-up (modal dialog) ---------- */
html[data-theme="clay"] .modal{
  border: 0;
  padding: 0;
  width: 100%;
  max-width: min(480px, calc(100vw - 32px));
  background: transparent;
  color: var(--text);
  overflow: visible;
}
html[data-theme="clay"] .modal--sm{ max-width: min(400px, calc(100vw - 32px)); }
html[data-theme="clay"] .modal::backdrop{ background: color-mix(in srgb, var(--bg) 72%, rgba(20,22,28,.28)); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="clay"] .modal[open]{ animation: modal-in 0.3s var(--ease); }
html[data-theme="clay"] .modal[open]::backdrop{ animation: fade-in 0.3s var(--ease); }
html[data-theme="clay"] .modal__card{
  position: relative;
  margin: 0;
  padding: 28px;
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--raise-lg), 0 30px 60px rgba(0, 0, 0, 0.25);
  display: grid;
  gap: 14px;
  justify-items: start;
}
html[data-theme="clay"] .modal__close{ position: absolute; top: 16px; right: 16px; }
html[data-theme="clay"] .modal h3{ margin: 4px 0 0; font-size: 20px; font-weight: 600; color: var(--text-strong); }
html[data-theme="clay"] .modal p{ margin: 0; font-size: 14px; color: var(--muted); }
html[data-theme="clay"] .modal .search{ width: 100%; }
html[data-theme="clay"] .modal__swatches{ display: flex; flex-wrap: wrap; gap: 12px; }
html[data-theme="clay"] .modal__swatches button{
  width: 44px; height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--surface);
  box-shadow: var(--raise-sm);
  transition: box-shadow 0.15s var(--ease);
}
html[data-theme="clay"] .modal__swatches button[aria-checked="true"], html[data-theme="clay"] .modal__swatches button:active{ box-shadow: var(--inset-sm); }
html[data-theme="clay"] .modal__swatches i{
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 2px 2px 4px var(--dark), inset 1px 1px 2px rgba(255, 255, 255, 0.45);
}
html[data-theme="clay"] .modal__actions{ width: 100%; display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
html[data-theme="clay"] .btn--danger{ color: #d9534f; }
html[data-theme="clay"] .btn--danger:active{ color: #c9302c; }
@keyframes modal-in{ from { opacity: 0; transform: translateY(18px) scale(0.97); } }
@keyframes fade-in{ from { opacity: 0; } }

/* ---------- Scrollbars ---------- */
/* Scrollbars follow the slider: a thin inset track with a raised white knob
   riding in front of it. Outer shadows are clipped to the scrollbar strip, so
   the knob's lift comes from an inner bevel + a wider body than the track. */
html[data-theme="clay"] ::-webkit-scrollbar{ width: 18px; height: 18px; }
html[data-theme="clay"] ::-webkit-scrollbar-track{
  margin: 8px;
  border: 6px solid transparent;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  background-clip: padding-box;
  box-shadow: inset 1px 1px 3px var(--dark), inset -1px -1px 2px var(--light);
}
html[data-theme="clay"] ::-webkit-scrollbar-thumb{
  min-height: 40px;
  min-width: 40px;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: linear-gradient(145deg, var(--knob-a), var(--knob-b));
  background-clip: padding-box;
  box-shadow: inset 2px 2px 3px var(--sb-hi), inset -2px -2px 4px var(--sb-lo);
}
html[data-theme="clay"] ::-webkit-scrollbar-thumb:hover{ background: var(--knob-a); background-clip: padding-box; }
html[data-theme="clay"] ::-webkit-scrollbar-thumb:active{ box-shadow: inset 2px 2px 4px var(--sb-lo), inset -2px -2px 3px var(--sb-hi); }
html[data-theme="clay"] ::-webkit-scrollbar-corner{ background: transparent; }
/* Firefox has no scrollbar pseudo-elements; only style there so Chromium
   keeps the ::-webkit-scrollbar rules (setting scrollbar-color disables them). */
@supports not selector(::-webkit-scrollbar){
  html[data-theme="clay"] *{ scrollbar-width: thin; scrollbar-color: var(--muted) transparent; }
}


/* ---------- Slider ---------- */
html[data-theme="clay"] .slider{ position: relative; height: 32px; }
html[data-theme="clay"] .slider input{
  position: absolute; inset: 0;
  width: 100%; margin: 0;
  opacity: 0; cursor: pointer; z-index: 2;
}
html[data-theme="clay"] .slider__track{
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 18px;
  transform: translateY(-50%);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--inset-sm);
  overflow: hidden;
}
html[data-theme="clay"] .slider__fill{
  height: 100%;
  width: var(--pct, 60%);
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent-soft), var(--accent));
  box-shadow: var(--accent-inset);
}
html[data-theme="clay"] .slider__thumb{
  position: absolute;
  top: 50%;
  left: var(--pct, 60%);
  width: 32px; height: 32px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--knob-a), var(--knob-b));
  box-shadow: var(--raise-sm);
  pointer-events: none;
  z-index: 1;
}
html[data-theme="clay"] .slider__thumb::after{
  content: "";
  position: absolute; inset: 10px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--inset-sm);
}
html[data-theme="clay"] .slider__value{
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--inset-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}

/* ---------- Dial (top-down) ---------- */
html[data-theme="clay"] .dials{ align-items: center; gap: 32px; }
html[data-theme="clay"] .dial{
  position: relative;
  width: 156px; height: 156px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--inset);
  cursor: grab;
  user-select: none;
  touch-action: none;
  outline: none;
}
html[data-theme="clay"] .dial:active{ cursor: grabbing; }
html[data-theme="clay"] .dial:focus-visible{ box-shadow: var(--inset), 0 0 0 3px var(--accent-soft); }
html[data-theme="clay"] .dial > *{ grid-area: 1 / 1; }
html[data-theme="clay"] .dial__ticks{ position: absolute; inset: 0; }
html[data-theme="clay"] .dial__tick{
  position: absolute;
  left: 50%; top: 50%;
  width: 3px; height: 10px;
  margin: -5px 0 0 -1.5px;
  border-radius: 2px;
  background: var(--muted);
  opacity: 0.4;
  transform: rotate(var(--a)) translateY(-66px);
  transition: background 0.15s, opacity 0.15s, box-shadow 0.15s;
}
html[data-theme="clay"] .dial__tick.is-on{ background: var(--accent); opacity: 1; box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.55); }
html[data-theme="clay"] .dial__knob{
  position: relative;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--knob-a), var(--knob-b));
  box-shadow: var(--raise);
  transform: rotate(var(--angle, 0deg));
  will-change: transform;
}
html[data-theme="clay"] .dial__pointer{
  position: absolute;
  top: 7px; left: 50%;
  width: 6px; height: 14px;
  margin-left: -3px;
  border-radius: 3px;
  background: linear-gradient(var(--accent-soft), var(--accent));
  box-shadow: 1px 1px 2px rgba(var(--accent-deep-rgb), 0.45);
}
/* cap and readout must sit above the positioned (rotating) knob */
html[data-theme="clay"] .dial__cap, html[data-theme="clay"] .dial__value{ position: relative; z-index: 1; }
html[data-theme="clay"] .dial__cap{
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--inset-sm);
  pointer-events: none;
}
html[data-theme="clay"] .dial__value{
  pointer-events: none;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

/* ---------- Dial (side-on thumbwheel) ---------- */
html[data-theme="clay"] .wheel{
  position: relative;
  flex: 1 1 180px;
  min-width: 160px;
  max-width: 240px;
  padding-top: 16px;
  display: grid;
  gap: 12px;
  justify-items: center;
  cursor: grab;
  user-select: none;
  touch-action: none;
  outline: none;
}
html[data-theme="clay"] .wheel:active{ cursor: grabbing; }
html[data-theme="clay"] .wheel__marker{
  position: absolute;
  top: 0; left: 50%;
  width: 10px; height: 10px;
  margin-left: -5px;
  border-radius: 2px;
  background: linear-gradient(145deg, var(--accent-soft), var(--accent));
  box-shadow: 1px 1px 3px rgba(var(--accent-deep-rgb), 0.45);
  transform: rotate(45deg) translateY(2px);
}
/* the hole the wheel sits in */
html[data-theme="clay"] .wheel__well{
  width: 100%;
  padding: 10px 12px;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--inset);
  transition: box-shadow 0.2s var(--ease);
}
html[data-theme="clay"] .wheel:focus-visible .wheel__well{ box-shadow: var(--inset), 0 0 0 3px var(--accent-soft); }
/* the drum: barely proud of the hole's floor */
html[data-theme="clay"] .wheel__drum{
  position: relative;
  height: 54px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 2px 3px 6px var(--dark-2), -2px -2px 5px var(--light);
}
html[data-theme="clay"] .wheel__ridges{
  position: absolute;
  inset: 0;
  /* soft undulations, no hard edges: shade → clear → light → clear, every 22px */
  background: repeating-linear-gradient(90deg,
    transparent 0px,
    var(--dark-2) 7px,
    transparent 13px,
    var(--light) 17px,
    transparent 22px);
  background-position: var(--offset, 0px) 0;
  opacity: 0.55;
}
/* cylinder shading: falls into shadow at both ends, gently lit along the top */
html[data-theme="clay"] .wheel__drum::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--dark-2) 0%, transparent 25%, transparent 75%, var(--dark-2) 100%),
    linear-gradient(180deg, var(--drum-hi), transparent 40%, transparent 65%, var(--drum-lo));
}
html[data-theme="clay"] .wheel__value{
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--inset-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}

/* ---------- Progress ring ---------- */
html[data-theme="clay"] .ring{ position: relative; width: 150px; height: 150px; align-self: center; }
html[data-theme="clay"] .ring svg{ width: 100%; height: 100%; transform: rotate(-90deg); }
html[data-theme="clay"] .ring circle{ fill: none; stroke-width: 14; stroke-linecap: round; }
html[data-theme="clay"] .ring__track{ stroke: var(--surface-2); filter: drop-shadow(-2px -2px 3px var(--light)) drop-shadow(2px 2px 3px var(--dark-2)); }
html[data-theme="clay"] .ring__fill{
  stroke: var(--accent);
  stroke-dasharray: 314.16;
  stroke-dashoffset: calc(314.16 - (314.16 * var(--value)) / 100);
  transition: stroke-dashoffset 0.6s var(--ease);
  filter: drop-shadow(2px 2px 3px rgba(var(--accent-deep-rgb), 0.35));
}
html[data-theme="clay"] .ring__label{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 22px; font-weight: 600;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

/* ---------- Spinner ---------- */
html[data-theme="clay"] .spinner{ position: relative; width: 120px; height: 120px; align-self: center; }
html[data-theme="clay"] .spinner i{
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 26px;
  margin: -13px 0 0 -6px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--raise-sm);
  transform-origin: 50% 50%;
  transform: rotate(var(--a)) translateY(-44px);
  animation: spin-blob 1.2s linear infinite;
}
html[data-theme="clay"] .spinner i:nth-child(1){ --a: 0deg;   animation-delay: -1.1s; }
html[data-theme="clay"] .spinner i:nth-child(2){ --a: 30deg;  animation-delay: -1.0s; }
html[data-theme="clay"] .spinner i:nth-child(3){ --a: 60deg;  animation-delay: -0.9s; }
html[data-theme="clay"] .spinner i:nth-child(4){ --a: 90deg;  animation-delay: -0.8s; }
html[data-theme="clay"] .spinner i:nth-child(5){ --a: 120deg; animation-delay: -0.7s; }
html[data-theme="clay"] .spinner i:nth-child(6){ --a: 150deg; animation-delay: -0.6s; }
html[data-theme="clay"] .spinner i:nth-child(7){ --a: 180deg; animation-delay: -0.5s; }
html[data-theme="clay"] .spinner i:nth-child(8){ --a: 210deg; animation-delay: -0.4s; }
html[data-theme="clay"] .spinner i:nth-child(9){ --a: 240deg; animation-delay: -0.3s; }
html[data-theme="clay"] .spinner i:nth-child(10){ --a: 270deg; animation-delay: -0.2s; }
html[data-theme="clay"] .spinner i:nth-child(11){ --a: 300deg; animation-delay: -0.1s; }
html[data-theme="clay"] .spinner i:nth-child(12){ --a: 330deg; animation-delay: 0s; }
@keyframes spin-blob{
  0%   { background: var(--accent); box-shadow: var(--accent-raise); }
  35%  { background: var(--surface); box-shadow: var(--raise-sm); }
  100% { background: var(--surface); box-shadow: var(--raise-sm); }
}

/* ---------- Chips & card ---------- */
html[data-theme="clay"] .chip{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--raise);
  font-weight: 500;
  color: var(--text);
  transition: box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
html[data-theme="clay"] .chip svg{ width: 18px; height: 18px; }
html[data-theme="clay"] .chip:hover{ transform: translateY(-1px); }
html[data-theme="clay"] .chip:active{ box-shadow: var(--inset); transform: none; }
html[data-theme="clay"] .card{
  padding: 22px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--inset);
  display: grid;
  gap: 8px;
}
html[data-theme="clay"] .card__tag{
  justify-self: start;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: linear-gradient(145deg, var(--accent-soft), var(--accent));
  box-shadow: var(--accent-raise);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 600;
}
html[data-theme="clay"] .card strong{ color: var(--text-strong); font-weight: 600; }
html[data-theme="clay"] .card p{ margin: 0; font-size: 14px; color: var(--muted); }

/* ---------- Accent picker popover ---------- */
html[data-theme="clay"] .picker{ position: relative; }
html[data-theme="clay"] .picker__btn{ gap: 12px; padding-left: 20px; }
html[data-theme="clay"] .picker__dot{
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--accent-soft), var(--accent));
  box-shadow: var(--accent-raise);
}
html[data-theme="clay"] .popover{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;               /* anchored under its button; JS adds .popover--flip if it would overflow */
  z-index: 40;
  width: 248px;
  padding: 16px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--raise-lg);
  display: grid;
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
html[data-theme="clay"] .picker.is-open .popover, html[data-theme="clay"] .notif.is-open .popover{ opacity: 1; visibility: visible; transform: none; }
html[data-theme="clay"] .popover--flip{ left: auto; right: 0; }
html[data-theme="clay"] .popover h3{
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
html[data-theme="clay"] .swatches{
  display: grid;
  grid-template-columns: repeat(4, 46px);
  justify-content: space-between;
  gap: 10px;
}
html[data-theme="clay"] .swatch{
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--raise-sm);
  display: grid;
  place-items: center;
  transition: box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
html[data-theme="clay"] .swatch:hover{ transform: translateY(-1px); }
html[data-theme="clay"] .swatch:active, html[data-theme="clay"] .swatch[aria-pressed="true"]{ box-shadow: var(--inset-sm); transform: none; }
html[data-theme="clay"] .swatch::after{
  content: "";
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(145deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c));
  box-shadow: 2px 2px 5px color-mix(in srgb, var(--c) 45%, transparent);
}
html[data-theme="clay"] .swatch[aria-pressed="true"]::after{ outline: 3px solid var(--surface); outline-offset: -1px; }
html[data-theme="clay"] .swatch--custom{ overflow: hidden; }
html[data-theme="clay"] .swatch--custom::after{
  background: conic-gradient(#f4a29d, #f7c873, #9fd8a3, #7fb8e6, #b9a3e6, #f4a29d);
  box-shadow: none;
}
html[data-theme="clay"] .swatch--custom input{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
html[data-theme="clay"] .popover__row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
html[data-theme="clay"] .popover__row .popover__hex{ flex: 1 1 0; min-width: 0; }
html[data-theme="clay"] .popover__row .btn--sm{ flex: 0 0 auto; padding: 0 14px; }
html[data-theme="clay"] .popover__hex{
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--inset-sm);
  color: var(--text-strong);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  text-transform: uppercase;
  outline: none;
}
html[data-theme="clay"] .popover__hex:focus{ box-shadow: inset -3px -3px 7px var(--light), inset 3px 3px 7px var(--dark); }
html[data-theme="clay"] .popover__hex.is-invalid{ color: #d9534f; }
html[data-theme="clay"] .btn--sm{ min-height: 40px; padding: 0 16px; font-size: 13px; border-radius: var(--r-sm); }

@media (max-width: 480px){
  html[data-theme="clay"] .popover, html[data-theme="clay"] .popover--flip{ right: auto; left: 0; width: min(248px, calc(100vw - 48px)); }
}

/* ---------- Lit surfaces ----------
   Every raised surface picks up the lamp: a soft gradient from its lit edge
   (--surface-hi) down to its base tone. Placed after the component rules so
   their `background:` shorthands don't wipe it; pressed/inset states opt out. */
html[data-theme="clay"] .panel, html[data-theme="clay"] .tile, html[data-theme="clay"] .btn:not(.btn--accent):not(.btn--danger), html[data-theme="clay"] .chip, html[data-theme="clay"] .dd__menu, html[data-theme="clay"] .dd__trigger--btn, html[data-theme="clay"] .popover, html[data-theme="clay"] .toasts .toast, html[data-theme="clay"] .list li, html[data-theme="clay"] .grid__row--body, html[data-theme="clay"] .notif__item, html[data-theme="clay"] .select__menu li, html[data-theme="clay"] .segmented button[aria-checked="true"], html[data-theme="clay"] .tip::after, html[data-theme="clay"] .tip__mega-card, html[data-theme="clay"] .modal__card, html[data-theme="clay"] .swatch, html[data-theme="clay"] .theme-slider, html[data-theme="clay"] .picker__btn, html[data-theme="clay"] .notice__close, html[data-theme="clay"] .modal__swatches button, html[data-theme="clay"] .dial__knob{
  background-image: linear-gradient(145deg, var(--surface-hi), var(--surface) 70%);
}
html[data-theme="clay"] .modal__card{ background-image: linear-gradient(145deg, var(--surface-hi), var(--bg) 70%); }
html[data-theme="clay"] .tile:active, html[data-theme="clay"] .tile--pressed, html[data-theme="clay"] .btn:active, html[data-theme="clay"] .btn--pressed, html[data-theme="clay"] .chip:active, html[data-theme="clay"] .dd__trigger--btn[aria-expanded="true"], html[data-theme="clay"] .swatch:active, html[data-theme="clay"] .swatch[aria-pressed="true"], html[data-theme="clay"] .notice__close:active, html[data-theme="clay"] .modal__swatches button[aria-checked="true"], html[data-theme="clay"] .notif__item:hover{
  background-image: none;
}
html[data-theme="clay"] .tip--accent::after{
  background-image: linear-gradient(145deg, var(--accent-soft), var(--accent));
}

@media (prefers-reduced-motion: reduce){
  /* decorative motion off; status indicators keep moving, just gently */
  html[data-theme="clay"] *, html[data-theme="clay"] *::before, html[data-theme="clay"] *::after{ transition: none !important; }
  html[data-theme="clay"] .toasts .toast, html[data-theme="clay"] .modal[open], html[data-theme="clay"] .modal[open]::backdrop, html[data-theme="clay"] .notif__item.is-new, html[data-theme="clay"] .offline__card, html[data-theme="clay"] .dd.is-open .dd__option, html[data-theme="clay"] .dd.is-open .dd__divider, html[data-theme="clay"] .segmented button[aria-checked="true"]{ animation: none !important; }
  html[data-theme="clay"]{ scroll-behavior: auto; }
  html[data-theme="clay"] .spinner i{ animation-duration: 2.4s !important; }
  html[data-theme="clay"] .arc svg{ animation-duration: 2s !important; }
  html[data-theme="clay"] .bar--indeterminate .bar__fill{ animation-duration: 3s !important; }
}
@media (max-width: 480px){
  html[data-theme="clay"] .hero{ padding-top: 36px; }
  html[data-theme="clay"] .panel{ padding: 22px 20px 26px; }
  html[data-theme="clay"] .switch--v .switch__track{ width: 56px; height: 84px; }
  html[data-theme="clay"] .switch--v .switch__knob{ width: 44px; }
}

/* ---------- Grouped-panel helpers ---------- */
html[data-theme="clay"] .stack{ display: grid; gap: 12px; }
html[data-theme="clay"] .progress-row{ justify-content: space-around; width: 100%; }
html[data-theme="clay"] .progress-row .ring, html[data-theme="clay"] .progress-row .spinner{ align-self: center; }

/* ---------- Theme slider readout ---------- */
html[data-theme="clay"] .theme-slider__value{
  min-width: 36px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--inset-sm);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}

/* ---------- Terminal ---------- */
html[data-theme="clay"] .term{
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--raise);
  overflow: hidden;
}
html[data-theme="clay"] .term__bar{ display: flex; align-items: center; gap: 8px; padding: 12px 16px; }
html[data-theme="clay"] .term__dot{ width: 12px; height: 12px; border-radius: 50%; box-shadow: var(--raise-sm); }
html[data-theme="clay"] .term__dot--r{ background: linear-gradient(145deg, #ff9a92, #f4726b); }
html[data-theme="clay"] .term__dot--y{ background: linear-gradient(145deg, #fbd89a, #f7c873); }
html[data-theme="clay"] .term__dot--g{ background: linear-gradient(145deg, #b5e6c4, #8fd4a8); }
html[data-theme="clay"] .term__title{ margin-left: auto; margin-right: auto; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); }
html[data-theme="clay"] .term__screen{
  margin: 0 12px 12px;
  padding: 18px 20px;
  min-height: 220px;
  max-height: 320px;
  overflow-y: auto;
  border-radius: var(--r-sm);
  /* matte clay slab: same material as the panel, gently sunk */
  background: var(--surface);
  box-shadow: var(--inset-sm);
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.75;
  color: var(--text);
  /* the type is pressed out of the clay: lit edge up-left, shade down-right */
  text-shadow: -1px -1px 0 var(--light), 1px 1px 1px var(--dark);
  cursor: text;
}
html[data-theme="clay"] .term__screen::-webkit-scrollbar{ width: 16px; }
html[data-theme="clay"] .term__line{ display: flex; align-items: baseline; gap: 10px; white-space: pre-wrap; word-break: break-word; }
html[data-theme="clay"] .term__prompt{ flex: 0 0 auto; color: var(--accent-deep); text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.75), 1px 1px 1px rgba(var(--accent-deep-rgb), 0.45); }
html[data-theme="clay"] .term__cmd{ color: var(--text-strong); }
html[data-theme="clay"] .term__out{ color: var(--muted); padding-left: 2px; font-weight: 500; }
html[data-theme="clay"] .term__err{ color: var(--err); }
html[data-theme="clay"] .term__ok{ color: var(--ok); }
html[data-theme="clay"] .term__input{ align-items: center; margin: 0; }
html[data-theme="clay"] .term__input input{
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  outline: none;
  color: var(--text-strong);
  font: inherit;
  caret-color: var(--accent);
}
html[data-theme="clay"] .term__cursor{ width: 9px; height: 17px; border-radius: 3px; background: linear-gradient(145deg, var(--accent-soft), var(--accent)); box-shadow: var(--accent-raise); animation: blink 1.1s steps(1) infinite; }
html[data-theme="clay"] .term__input:focus-within .term__cursor{ display: none; }
@keyframes blink{ 50% { opacity: 0; } }

/* ---------- Footer actions / offline screen ---------- */
html[data-theme="clay"] .foot__actions{ display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
html[data-theme="clay"] .offline{
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}
html[data-theme="clay"] .offline[hidden]{ display: none; }
html[data-theme="clay"] .offline__card{
  max-width: 420px;
  padding: 32px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--raise-lg);
  display: grid;
  gap: 12px;
  justify-items: start;
  animation: modal-in 0.35s var(--ease);
}
html[data-theme="clay"] .offline__card h3{ margin: 6px 0 0; font-size: 20px; font-weight: 600; color: var(--text-strong); }
html[data-theme="clay"] .offline__card p{ margin: 0; font-size: 14px; color: var(--muted); }
html[data-theme="clay"] .offline__card code, html[data-theme="clay"] .modal p code{ padding: 1px 6px; border-radius: 6px; background: var(--surface); box-shadow: var(--inset-sm); font-size: 12px; }

/* ---------- Export page ---------- */
html[data-theme="clay"] .doc{ max-width: 900px; margin: 0 auto; padding: 24px 24px 64px; display: grid; gap: 28px; }
html[data-theme="clay"] .doc .panel{ gap: 18px; }
html[data-theme="clay"] .doc p{ margin: 0; }
html[data-theme="clay"] .doc h3{ margin: 0; font-size: 16px; font-weight: 600; color: var(--text-strong); }
html[data-theme="clay"] .steps{ margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: step; }
html[data-theme="clay"] .steps li{ display: flex; gap: 14px; align-items: flex-start; counter-increment: step; }
html[data-theme="clay"] .steps li::before{
  content: counter(step);
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--accent-soft), var(--accent));
  box-shadow: var(--accent-raise);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 600;
}
html[data-theme="clay"] .steps li > div{ padding-top: 5px; }
html[data-theme="clay"] .steps strong{ color: var(--text-strong); font-weight: 600; }
html[data-theme="clay"] .code{
  margin: 0;
  width: 100%;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: var(--inset);
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-strong);
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
  max-height: 420px;
}
html[data-theme="clay"] textarea.code{ resize: vertical; border: 0; outline: none; min-height: 260px; }
html[data-theme="clay"] textarea.code:focus-visible{ box-shadow: inset -5px -5px 12px var(--light), inset 5px 5px 12px var(--dark); }
html[data-theme="clay"] .code-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html[data-theme="clay"] .files{ display: grid; gap: 12px; }
html[data-theme="clay"] .file{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--raise-sm);
}
html[data-theme="clay"] .file strong{ color: var(--text-strong); font-weight: 600; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
html[data-theme="clay"] .file span{ flex: 1; font-size: 13px; color: var(--muted); }
html[data-theme="clay"] .back{ display: inline-flex; align-items: center; gap: 8px; }
html[data-theme="clay"] .back svg{ width: 16px; height: 16px; }

/* ---------- Progress: ring cap, arc spinner, bars, stepper ---------- */
html[data-theme="clay"] .stack--center{ justify-items: center; align-content: center; gap: 18px; }
html[data-theme="clay"] .ring__cap{
  position: absolute;
  inset: 27px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--knob-a), var(--knob-b));
  box-shadow: var(--raise-sm);
  pointer-events: none;
}
html[data-theme="clay"] .ring__label{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; line-height: 1.1; }
html[data-theme="clay"] .ring__label strong{ font-size: 22px; font-weight: 600; color: var(--text-strong); }
html[data-theme="clay"] .ring__label span{ font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
html[data-theme="clay"] .spinner--sm{ width: 80px; height: 80px; }
html[data-theme="clay"] .spinner--sm i{ width: 8px; height: 18px; margin: -9px 0 0 -4px; transform: rotate(var(--a)) translateY(-28px); }
html[data-theme="clay"] .arc{ width: 48px; height: 48px; }
html[data-theme="clay"] .arc svg{ width: 100%; height: 100%; animation: arc-spin 1.1s linear infinite; }
html[data-theme="clay"] .arc circle{ fill: none; stroke-width: 6; stroke-linecap: round; }
html[data-theme="clay"] .arc__track{ stroke: var(--surface-2); filter: drop-shadow(-1px -1px 2px var(--light)) drop-shadow(1px 1px 2px var(--dark-2)); }
html[data-theme="clay"] .arc__fill{ stroke: var(--accent); stroke-dasharray: 40 80; filter: drop-shadow(1px 1px 2px rgba(var(--accent-deep-rgb), 0.35)); }
@keyframes arc-spin{ to { transform: rotate(360deg); } }

html[data-theme="clay"] .bar{ display: grid; gap: 10px; }
html[data-theme="clay"] .bar__head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
html[data-theme="clay"] .bar__head strong{ color: var(--text-strong); font-weight: 600; }
html[data-theme="clay"] .bar__track{
  position: relative;
  height: 16px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: var(--inset-sm);
  overflow: hidden;
}
html[data-theme="clay"] .bar__fill{
  height: 100%;
  width: var(--pct, 40%);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.5), inset 0 -2px 3px rgba(var(--accent-deep-rgb), 0.35);
  transition: width 0.35s var(--ease);
}
html[data-theme="clay"] .bar--indeterminate .bar__fill{ width: 35%; animation: bar-slide 1.6s var(--ease) infinite; }
@keyframes bar-slide{ from { transform: translateX(-100%); } to { transform: translateX(300%); } }

html[data-theme="clay"] .stepper{ display: flex; align-items: center; padding: 4px 4px 26px; }
html[data-theme="clay"] .step{
  position: relative;
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  box-shadow: var(--raise-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
html[data-theme="clay"] .step svg{ width: 16px; height: 16px; }
html[data-theme="clay"] .step.is-done{ background: linear-gradient(145deg, var(--accent-soft), var(--accent)); box-shadow: var(--accent-raise); color: var(--on-accent); }
html[data-theme="clay"] .step.is-current{ box-shadow: var(--inset-sm); color: var(--accent-deep); }
html[data-theme="clay"] .step__label{ position: absolute; top: 40px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 500; color: var(--muted); white-space: nowrap; }
html[data-theme="clay"] .step.is-current .step__label{ color: var(--text-strong); }
html[data-theme="clay"] .step-link{ flex: 1; height: 6px; margin: 0 6px; border-radius: 3px; background: var(--surface-2); box-shadow: var(--inset-sm); overflow: hidden; }
html[data-theme="clay"] .step-link.is-done::after{ content: ""; display: block; height: 100%; background: linear-gradient(90deg, var(--accent-soft), var(--accent)); }

/* ---------- Motion: things fall, spring and pull ---------- */
/* dropdown menus fall out of their button and bounce to rest; options tumble in after */
html[data-theme="clay"] .dd__menu{
  transform-origin: top center;
  transform: translateY(-16px) scaleY(0.72);
  transition: opacity 0.16s var(--ease), transform 0.44s var(--spring), visibility 0.16s;
}
html[data-theme="clay"] .dd.is-open .dd__menu{ transform: none; }
html[data-theme="clay"] .dd.is-open .dd__option, html[data-theme="clay"] .dd.is-open .dd__divider{ animation: dd-drop 0.42s var(--spring-soft) both; }
html[data-theme="clay"] .dd.is-open .dd__menu > :nth-child(1){ animation-delay: 0.03s; }
html[data-theme="clay"] .dd.is-open .dd__menu > :nth-child(2){ animation-delay: 0.07s; }
html[data-theme="clay"] .dd.is-open .dd__menu > :nth-child(3){ animation-delay: 0.11s; }
html[data-theme="clay"] .dd.is-open .dd__menu > :nth-child(4){ animation-delay: 0.15s; }
html[data-theme="clay"] .dd.is-open .dd__menu > :nth-child(5){ animation-delay: 0.19s; }
html[data-theme="clay"] .dd.is-open .dd__menu > :nth-child(6){ animation-delay: 0.23s; }
@keyframes dd-drop{ from { opacity: 0; transform: translateY(-14px); } }
/* popovers (accent, inbox) drop the same way */
html[data-theme="clay"] .popover{
  transform-origin: top;
  transform: translateY(-14px) scaleY(0.8);
  transition: opacity 0.18s var(--ease), transform 0.44s var(--spring), visibility 0.2s;
}
/* toasts, dialogs and new inbox rows land with a soft spring */
html[data-theme="clay"] .toasts .toast{ animation: toast-in 0.48s var(--spring-soft); }
html[data-theme="clay"] .modal[open]{ animation: modal-in 0.42s var(--spring-soft); }
html[data-theme="clay"] .notif__item.is-new{ animation: toast-in 0.42s var(--spring-soft); }
/* segmented: the active pill pops as it lands */
html[data-theme="clay"] .segmented button[aria-checked="true"]{ animation: seg-pop 0.32s var(--spring); }
@keyframes seg-pop{ from { transform: scale(0.9); } }

/* sliders: the thumb follows the pointer instantly, the colour chases it a beat
   later with a slight overshoot, and a lit lip at the leading edge sells the pull */
html[data-theme="clay"] .slider__fill{ position: relative; transition: width 0.3s var(--pull); }
html[data-theme="clay"] .slider__fill::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 22px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5));
}
html[data-theme="clay"] .slider__thumb{ transition: transform 0.28s var(--spring); }
html[data-theme="clay"] .slider input:active ~ .slider__thumb{ transform: translate(-50%, -50%) scale(1.15); }
html[data-theme="clay"] .bar__fill{ transition: width 0.5s var(--pull); }
html[data-theme="clay"] .ring__fill{ transition: stroke-dashoffset 0.6s var(--pull); }

/* sound toggle in the header */
html[data-theme="clay"] .icon-btn, html[data-theme="clay"] .sound-btn{ width: 48px; padding: 0; }
html[data-theme="clay"] .icon-btn svg{ width: 20px; height: 20px; }
html[data-theme="clay"] .sound-btn svg{ width: 20px; height: 20px; }
html[data-theme="clay"] .sound-btn .off{ display: none; }
html[data-theme="clay"] .sound-btn[aria-pressed="false"] .on{ display: none; }
html[data-theme="clay"] .sound-btn[aria-pressed="false"] .off{ display: block; }
html[data-theme="clay"] .sound-btn[aria-pressed="false"]{ color: var(--muted); }

html[data-theme="clay"] body{
  /* room light kept by clay-ui.css; cancel kit max-width board */
}
html[data-theme="clay"] .hero,
html[data-theme="clay"] .board{
  display:contents;
}