/* ==========================================================================
   K07 Elements — page styles (kit/elements.html)
   The preview panel (.el-preview) carries its own data-theme and density:
     --h-m    medium control height   (44px comfortable · 36px compact)
     --btn-px button side padding     (18px comfortable · 14px compact)
   ========================================================================== */

/* Preview toolbar + panel ------------------------------------------------ */
.el-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
}

.el-preview {
  --h-m: 44px;
  --btn-px: 18px;
  margin-top: 24px;
  padding: clamp(16px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--canvas);
  color: var(--ink);
  transition: background .24s;
}

.el-preview.is-compact {
  --h-m: 36px;
  --btn-px: 14px;
}

/* Section headings inside the panel */
.el-h2 {
  margin-bottom: 18px;
}

.el-h2--lead {
  margin-bottom: 6px;
}

.el-lead {
  margin: 0 0 18px;
  font-size: 15px;
  color: var(--ink-2);
}

/* Small helper / validation text under a field */
.el-hint {
  font-size: 13px;
  color: var(--ink-3);
}

.el-hint--2   { color: var(--ink-2); }
.el-hint--pos { color: var(--pos); }
.el-hint--neg { color: var(--neg); }

.el-muted {
  font-weight: 400;
  color: var(--ink-3);
}

/* Buttons · state matrix ------------------------------------------------- */
.btn-matrix {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.btn-matrix__grid {
  display: grid;
  grid-template-columns: 120px repeat(6, minmax(128px, 1fr));
  min-width: 900px;
}

.btn-matrix__head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}

.btn-matrix__name,
.btn-matrix__cell {
  display: flex;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.btn-matrix__name {
  font-size: 13px;
  font-weight: 600;
}

/* Static button specimen; variants set the four --b-* colors */
.demo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--h-m);
  padding: 0 var(--btn-px);
  border: 1px solid var(--b-bd);
  border-radius: 999px;
  background: var(--b-bg);
  color: var(--b-fg);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.demo-btn--primary     { --b-bg: var(--action);    --b-fg: var(--on-action); --b-bd: var(--action);  --b-hov: var(--action-hover); }
.demo-btn--secondary   { --b-bg: var(--surface);   --b-fg: var(--ink);       --b-bd: var(--line-2);  --b-hov: var(--surface-2); }
.demo-btn--tertiary    { --b-bg: var(--surface-2); --b-fg: var(--ink);       --b-bd: transparent;    --b-hov: var(--surface-3); }
.demo-btn--ghost       { --b-bg: transparent;      --b-fg: var(--ink);       --b-bd: transparent;    --b-hov: var(--surface-2); }
.demo-btn--destructive { --b-bg: var(--surface);   --b-fg: var(--neg);       --b-bd: var(--neg);     --b-hov: var(--neg-bg); }

.demo-btn.is-hover,
.demo-btn.is-active {
  background: var(--b-hov);
}

.demo-btn--secondary.is-hover {
  border-color: var(--ink);
}

.demo-btn.is-focus {
  box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--action);
}

.demo-btn.is-active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .18);
}

.demo-btn.is-disabled {
  opacity: .45;
}

.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

/* Sizes, split button, icon button, link */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.demo-size {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--action);
  color: var(--on-action);
  font-weight: 600;
}

.demo-size--sm {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
}

.demo-size--md {
  height: 44px;
  padding: 0 18px;
  font-size: 15px;
}

.demo-size--lg {
  gap: 10px;
  height: 52px;
  padding: 0 24px;
  font-size: 17px;
}

.split-btn {
  display: inline-flex;
  height: 44px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ink);
  color: var(--canvas);
  font-size: 14px;
  font-weight: 600;
}

.split-btn__main,
.split-btn__more {
  display: flex;
  align-items: center;
}

.split-btn__main {
  padding: 0 16px;
  border-right: 1px solid color-mix(in oklab, var(--canvas) 30%, transparent);
}

.split-btn__more {
  padding: 0 12px;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  font-size: 18px;
}

.el-link {
  font-size: 15px;
  font-weight: 600;
}

/* Do / don't */
.do-dont {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 10px;
  margin-top: 14px;
  font-size: 14px;
}

.do-dont__item {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.do-dont__item--do {
  border-left: 0;
}

/* Inputs ----------------------------------------------------------------- */
.inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}

.el-input {
  width: 100%;
  height: var(--h-m);
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surface);
}

.el-input.is-warn { border-color: var(--warn); }
.el-input.is-ok   { border-color: var(--pos); }

.el-select {
  padding: 0 12px;
}

.el-input--disabled {
  border-color: var(--line);
  background: var(--surface-2);
  opacity: .6;
}

.el-fix {
  font-weight: 600;
}

/* Input with a button or prefix attached */
.el-group {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surface);
}

.el-group--error {
  height: var(--h-m);
  border-color: var(--neg);
}

.el-group__input {
  flex: 1;
  min-width: 0;
  height: var(--h-m);
  padding: 0 14px;
  border: 0;
  background: transparent;
  outline-offset: -2px;
}

.el-group__input--tight {
  height: auto;
  padding: 0 12px;
}

.el-group__btn {
  padding: 0 12px;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 13px;
}

.el-group__prefix {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-right: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 14px;
}

/* Password strength: JS sets is-neg / is-warn / is-pos on the bars */
.pw-meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.pw-meter span {
  height: 4px;
  border-radius: 4px;
  background: var(--surface-3);
}

.pw-meter .is-neg  { background: var(--neg); }
.pw-meter .is-warn { background: var(--warn); }
.pw-meter .is-pos  { background: var(--pos); }

/* One-time code */
.otp {
  display: flex;
  gap: 8px;
}

.otp__digit {
  display: grid;
  place-items: center;
  width: 44px;
  height: 52px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 22px;
}

.otp__digit--current {
  border-color: var(--ink);
}

/* Selection & range ------------------------------------------------------ */
.selection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
}

.selection__col,
.selection__radios {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.selection__col--roomy {
  gap: 14px;
}

/* Checkbox + radio (button-based, role=checkbox / role=radio) */
.check,
.radio {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}

.check__box {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--line-2);
  border-radius: 6px;
  background: var(--surface);
  color: var(--canvas);
  font-size: 13px;
}

.check[aria-checked="true"] .check__box {
  border-color: var(--ink);
  background: var(--ink);
}

.check--disabled {
  min-height: 0;
  opacity: .5;
}

.check--disabled .check__box {
  background: none;
}

.radio__ring {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--line-2);
  border-radius: 50%;
}

.radio__ring::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
}

.radio[aria-checked="true"] .radio__ring {
  border-color: var(--ink);
}

.radio[aria-checked="true"] .radio__ring::after {
  background: var(--ink);
}

/* Switch */
.switch {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
}

.switch__track {
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: var(--line-2);
  transition: background .16s;
}

.switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  transition: transform .24s cubic-bezier(.34, 1.56, .64, 1);
}

.switch[aria-checked="true"] .switch__track {
  background: var(--pos);
}

.switch[aria-checked="true"] .switch__thumb {
  transform: translateX(16px);
}

/* Squarer segmented control (List / Board / Timeline) */
.segmented--square {
  align-self: flex-start;
  border-radius: 10px;
}

.segmented--square .segmented__option {
  padding: 6px 14px;
  border-radius: 7px;
}

/* Seats slider + stepper */
.seats__head {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.seats__range {
  accent-color: var(--ink);
}

.stepper {
  display: flex;
  align-items: center;
  align-self: flex-start;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 10px;
}

.stepper__btn {
  width: 44px;
  height: 44px;
  border: 0;
  background: var(--surface-2);
  font-size: 18px;
}

.stepper__value {
  width: 56px;
  font-family: var(--font-mono);
  text-align: center;
}

/* Filter chips */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-chip {
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13px;
  white-space: nowrap;
}

.filter-chip[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--canvas);
}

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px;
  border: 2px dashed var(--line-2);
  border-radius: 16px;
  font-size: 14px;
  color: var(--ink-2);
  text-align: center;
}

/* Momentum & status marks ------------------------------------------------ */
.marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.plan-pill {
  padding: 3px 10px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.avatars {
  display: flex;
  align-items: center;
}

/* Avatar colors are fixed white-on-category, as in the original */
.avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--canvas);
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.avatars .avatar + .avatar {
  margin-left: -8px;
}

.avatar--c1 { background: var(--c1); }
.avatar--c3 { background: var(--c3); }
.avatar--c4 { background: var(--c4); }

.avatar--more {
  background: var(--surface-3);
  color: var(--ink);
}

.avatar--lg {
  position: relative;
  width: 32px;
  height: 32px;
  border: 0;
  font-size: 12px;
}

.avatar__presence {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--canvas);
  border-radius: 50%;
  background: var(--pos);
}

/* Multiplayer cursor flag */
.cursor-flag {
  display: flex;
  align-items: flex-start;
  gap: 2px;
}

.cursor-flag__arrow {
  width: 0;
  height: 0;
  border-top: 6px solid var(--c1);
  border-right: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid var(--c1);
}

.cursor-flag__name {
  margin-top: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--c1);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

/* Upvote toggle */
.upvote {
  min-height: 30px;
  padding: 3px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 13px;
}

.upvote[aria-pressed="true"] {
  border-color: var(--action);
  background: var(--action-tint);
}

.comment-pin {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50% 50% 50% 0;
  background: var(--c2);
  color: #111;
  font-size: 11px;
  font-weight: 700;
}

.kbd-combo {
  display: flex;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
}

.kbd {
  padding: 1px 7px;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 6px;
  font-family: inherit;
}

/* Usage meter, steps, skeleton */
.progress-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
  margin-top: 20px;
}

.progress-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.progress-item__note {
  font-size: 13px;
  color: var(--warn);
}

.meter {
  height: 8px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-3);
}

.meter__fill {
  display: block;
  width: var(--pct, 0%);
  height: 100%;
  background: var(--warn);
}

.steps {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.steps__dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--line-2);
  border-radius: 50%;
  color: var(--ink-3);
  font-size: 12px;
}

.steps__dot--done {
  border: 0;
  background: var(--ink);
  color: var(--canvas);
}

.steps__dot--current {
  border: 2px solid var(--ink);
  color: var(--ink);
  font-weight: 700;
}

.steps__line {
  flex: 1;
  height: 2px;
  background: var(--line-2);
}

.steps__line--done {
  background: var(--ink);
}

.skeleton {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-3) 0, var(--surface-2) 50%, var(--surface-3) 100%);
  background-size: 400px 100%;
  animation: shimmer 1.4s linear infinite;
}

.skeleton--short {
  width: 70%;
}

/* Anatomy & spacing ------------------------------------------------------ */
.anatomy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: center;
  gap: 16px;
}

.anatomy__stage {
  display: flex;
  justify-content: center;
  padding: 40px 24px;
  border: 1px dashed var(--line-2);
  border-radius: 16px;
  background: var(--surface);
}

.anatomy__btn-wrap {
  position: relative;
  display: inline-flex;
}

.anatomy__dims,
.anatomy__height {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--action);
}

.anatomy__dims {
  top: -24px;
  right: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
}

.anatomy__height {
  top: 0;
  right: -40px;
  bottom: 0;
  display: flex;
  align-items: center;
  padding-left: 4px;
  border-left: 1px solid var(--action);
}

.anatomy__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--h-m);
  padding: 0 18px;
  border-radius: 999px;
  background: var(--action);
  color: var(--on-action);
  font-weight: 600;
  outline: 1px dashed var(--action);
  outline-offset: 4px;
}

.anatomy__icon {
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 4px;
}

.anatomy__spec {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 0;
  font-size: 14px;
}

.anatomy__spec dt {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}

.anatomy__spec dd {
  margin: 0;
}

/* Text input · all states ------------------------------------------------ */
.input-states {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 16px;
}

.input-state {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.input-state__box {
  display: flex;
  align-items: center;
  height: var(--h-m);
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surface);
  font-size: 15px;
}

.input-state__box--hover    { border-color: var(--ink-3); }
.input-state__box--focus    { border-color: var(--ink); box-shadow: 0 0 0 3px var(--action-tint); }
.input-state__box--error    { border-color: var(--neg); }
.input-state__box--success  { border-color: var(--pos); }
.input-state__box--disabled { border-color: var(--line); background: var(--surface-2); color: var(--ink-3); opacity: .55; }
.input-state__box--loading  { color: var(--ink-3); }

.input-state__help {
  min-height: 20px;
  font-size: 13px;
  color: var(--ink-3);
}

.input-state__help--neg { color: var(--neg); }
.input-state__help--pos { color: var(--pos); }

/* Combobox & date picker ------------------------------------------------- */
.pickers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: start;
  gap: 24px;
}

.combo {
  position: relative;
}

.combo__list {
  max-height: 220px;
  padding: 4px;
  overflow: auto;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}

.combo__option {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}

.combo__option[aria-selected="true"] {
  background: var(--surface-2);
}

.combo__arr {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}

.combo__empty {
  padding: 10px;
  font-size: 14px;
  color: var(--ink-2);
}

.cal {
  max-width: 320px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.cal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.cal__nav {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}

.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}

.cal__dow {
  padding: 4px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}

.cal__day {
  height: 38px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.cal__day--today {
  border-color: var(--ink);
}

.cal__day[aria-pressed="true"] {
  border-color: transparent;
  background: var(--ink);
  color: var(--canvas);
}

.cal__day:disabled {
  opacity: 0;
  cursor: default;
}

.cal__note {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-2);
}

/* Tooltip placements ----------------------------------------------------- */
.placements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.placement {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  height: 120px;
  border: 1px dashed var(--line-2);
  border-radius: 12px;
}

.placement--column {
  flex-direction: column;
}

.placement__anchor {
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  font-size: 13px;
}

.tip {
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--inverse);
  color: var(--on-inverse);
  font-size: 12px;
}

.tip--lg {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
}

.tip__arrow {
  width: 0;
  height: 0;
  margin-top: -6px;
  border-top: 5px solid var(--inverse);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

.placements__note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}

/* Tooltip, popover, toast ------------------------------------------------ */
.overlays {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 28px;
}

.overlays__tooltip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.overlays__time {
  border-bottom: 1px dotted var(--ink-3);
  font-size: 14px;
}

.popover {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 260px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  font-size: 14px;
}

.popover__item {
  padding: 8px;
  border-radius: 8px;
}

.popover__item--active {
  background: var(--surface-2);
}

.toasts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 280px;
}

.toasts__trigger {
  align-self: flex-start;
  min-height: 44px;
  padding: 10px 16px;
  line-height: 1.55;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--inverse);
  color: var(--on-inverse);
  font-size: 14px;
  animation: pop .24s cubic-bezier(.34, 1.56, .64, 1);
}

.toast__msg {
  flex: 1;
}

.toast__undo {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}