/* UI_MIGRATION_PLAN.md F4 — the 6 primitives every NEW_UI screen is
   composed from (plan §2/§7.1: "section card / list row / labeled field /
   chip / accent panel / page shell"). NEW_UI/KlearScreen.dc.html has no
   CSS classes at all — every screen there uses one-off inline styles via
   a prototyping DSL — so these class names and the radius/spacing scale
   below are this migration's own codification of the repeated inline
   patterns found there, not a 1:1 lift. Preview all of these live at
   /_styleguide/ (DEBUG only). Page shell itself is in 05-layout.css. */

/* ---- 0. Button ---------------------------------------------------------
   Not one of the plan's 6 named primitives, but every screen needs one —
   added ad hoc (Phase 1) the moment a real form needed it. Radius/height
   match .k-field so a button under a field lines up visually. */

.k-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 52px;
  border-radius: 14px;
  border: 1px solid var(--k-line);
  background: var(--k-surface);
  color: var(--k-ink);
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

.k-btn:hover {
  border-color: var(--k-accentLine);
  /* Restated so the bare a:hover in 03-base.css can't repaint it. */
  color: var(--k-ink);
}

.k-btn--primary {
  background: var(--k-primary);
  color: var(--k-onPrimary);
  border-color: var(--k-primary);
}

.k-btn--primary:hover {
  opacity: 0.92;
  color: var(--k-onPrimary);
}

.k-btn--dashed {
  border-style: dashed;
}

/* "You haven't finished the form yet" — dimmed, but still clickable on
   purpose. A disabled button swallows the click and explains nothing; this
   one submits, gets cancelled by the page's submit guard, and the guard
   then says exactly what's missing. */
.k-btn--incomplete {
  opacity: 0.55;
}

/* Provider buttons. Colours are dictated by each provider's branding
   guidelines, so they're literals rather than tokens and deliberately do
   NOT follow the Klear palette — but they keep .k-btn's height/radius so
   they line up with everything else in the stack.
   Google: https://developers.google.com/identity/branding-guidelines
   LINE:   https://developers.line.biz/en/docs/line-login/login-button/ */

.k-btn--google {
  background: #ffffff;
  border-color: #747775;
  color: #1f1f1f;
}

.k-btn--google:hover {
  background: #f7f8f8;
  border-color: #747775;
  color: #1f1f1f;
}

/* Google's dark-theme button spec. Matched to the resolved colour scheme
   the same way 01-tokens.css does it, so it tracks the theme switch. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .k-btn--google,
  :root:not([data-theme]) .k-btn--google {
    background: #131314;
    border-color: #8e918f;
    color: #e3e3e3;
  }
  :root[data-theme="auto"] .k-btn--google:hover,
  :root:not([data-theme]) .k-btn--google:hover {
    background: #1e1f20;
    color: #e3e3e3;
  }
}

:root[data-theme="dark"] .k-btn--google {
  background: #131314;
  border-color: #8e918f;
  color: #e3e3e3;
}

:root[data-theme="dark"] .k-btn--google:hover {
  background: #1e1f20;
  color: #e3e3e3;
}

:root[data-theme="light"] .k-btn--google {
  background: #ffffff;
  border-color: #747775;
  color: #1f1f1f;
}

/* LINE green is the same in both themes — the guidelines give one base
   colour plus a darker pressed state, and no dark-mode variant. */
.k-btn--line {
  background: #06c755;
  border-color: #06c755;
  color: #ffffff;
}

.k-btn--line:hover {
  background: #05b54c;
  border-color: #05b54c;
  color: #ffffff;
}

.k-btn--line:active {
  background: #04a544;
  border-color: #04a544;
  color: #ffffff;
}

/* ---- 1. Card --------------------------------------------------------- */

.k-card {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1rem;
  border-radius: 18px;
  background: var(--k-surface);
  border: 1px solid var(--k-line);
}

.k-card--lg {
  border-radius: 20px;
}

.k-card--accent {
  border-color: var(--k-accentLine);
}

.k-card--dashed {
  border-style: dashed;
  background: var(--k-bg);
  border-radius: 14px;
}

.k-card--muted {
  background: transparent;
  opacity: 0.75;
}

.k-card--muted:hover {
  opacity: 1;
}

.k-card--clickable {
  cursor: pointer;
}

.k-card--clickable:hover {
  border-color: var(--k-accent);
}

/* ---- 2. Row -----------------------------------------------------------
   .k-row is a divider row inside a .k-card (e.g. a member list); .k-row--card
   is a standalone row that's its own card (e.g. an expense list item). */

.k-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--k-line);
}

.k-row:last-child {
  border-bottom: none;
}

.k-row--card {
  padding: 0.75rem 0.8125rem;
  border-radius: 16px;
  background: var(--k-surface);
  border: 1px solid var(--k-line);
  cursor: pointer;
}

.k-row--card:hover {
  border-color: var(--k-accentLine);
}

.k-row--selected {
  background: var(--k-accentSoft);
  border-color: var(--k-accentLine);
}

.k-row--dashed {
  border: 1px dashed var(--k-line);
  border-radius: 16px;
  color: var(--k-soft);
  cursor: pointer;
}

.k-row--dashed:hover {
  opacity: 0.75;
}

/* A .k-row that is itself a <button> (e.g. each friend in the add-member
   picker, where the whole row submits its own form). Resets the button
   chrome that would otherwise fight the row layout. */
.k-row--button {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--k-line);
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.k-row--button:hover {
  color: inherit;
}

form:last-child .k-row--button {
  border-bottom: none;
}

.k-row__avatar {
  width: 2.125rem;
  height: 2.125rem;
  flex: none;
  border-radius: 999px;
  background: var(--k-accentSoft);
  color: var(--k-accent);
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.k-row__icon-btn {
  flex: none;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 10px;
  border: 1px solid var(--k-line);
  color: var(--k-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
}

.k-row__icon-btn:hover {
  color: var(--k-accent);
  border-color: var(--k-accentLine);
}

/* Active/pressed state for a toggle icon button (the favourite star). */
.k-row__icon-btn--on {
  color: var(--k-cat3);
  border-color: var(--k-cat3);
}

.k-row__icon-btn--on:hover {
  color: var(--k-cat3);
  border-color: var(--k-cat3);
  opacity: 0.8;
}

/* ---- 3. Field ---------------------------------------------------------- */

.k-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.k-field__label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--k-soft);
}

.k-field input,
.k-field select,
.k-field textarea {
  height: 52px;
  border-radius: 14px;
  border: 1px solid var(--k-line);
  background: var(--k-field);
  color: var(--k-ink);
  padding: 0 0.9375rem;
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
  width: 100%;
}

.k-field textarea {
  height: auto;
  min-height: 6rem;
  padding: 0.75rem 0.9375rem;
}

.k-field input:focus,
.k-field select:focus,
.k-field textarea:focus {
  outline: 2px solid var(--k-accent);
  outline-offset: 1px;
}

/* Set by the sign-up page's submit guard. Uses aria-invalid rather than a
   class so the visual state and the accessibility state can't drift apart. */
.k-field input[aria-invalid="true"] {
  border-color: var(--k-warn);
}

.k-field--accent input {
  border-color: var(--k-accentLine);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.k-field--compact input {
  height: 46px;
  border-radius: 13px;
  padding: 0 0.75rem;
}

/* ---- 4. Chip -----------------------------------------------------------
   Pill-shaped status/role/filter labels. Base is the neutral outline
   variant; add a modifier for accent/warn/owner/dashed. See the {% chip %}
   inclusion tag (apps/accounts/templatetags/ui_components.py) for the
   templated version of this. */

.k-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: none;
  padding: 0.3rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid var(--k-line);
  color: var(--k-soft);
  background: transparent;
}

.k-chip--accent {
  background: var(--k-accentSoft);
  color: var(--k-accent);
  border-color: transparent;
}

.k-chip--warn {
  background: var(--k-warnSoft);
  color: var(--k-warn);
  border-color: transparent;
}

.k-chip--owner {
  background: var(--k-ownerBg);
  color: var(--k-ownerFg);
  border-color: transparent;
}

.k-chip--outline-accent {
  background: transparent;
  color: var(--k-accent);
  border-color: var(--k-accentLine);
}

.k-chip--dashed {
  border-style: dashed;
  cursor: pointer;
}

.k-chip--dashed:hover {
  color: var(--k-ink);
  border-color: var(--k-ink);
}

/* Chips are often <a> (the expense-list category filters), so each coloured
   variant has to hold its colour on hover — see the note in 03-base.css. */
a.k-chip:hover {
  color: var(--k-soft);
}

a.k-chip--accent:hover {
  color: var(--k-accent);
}

a.k-chip--warn:hover {
  color: var(--k-warn);
}

a.k-chip--owner:hover {
  color: var(--k-ownerFg);
}

a.k-chip--outline-accent:hover {
  color: var(--k-accent);
}

/* ---- 5. Panel ----------------------------------------------------------
   Accent-tinted informational callout. */

.k-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9375rem;
  border-radius: 18px;
  background: var(--k-accentSoft);
  border: 1px solid var(--k-accentLine);
}

.k-panel--row {
  flex-direction: row;
  align-items: center;
}

.k-panel--dashed {
  border-style: dashed;
  border-radius: 14px;
}

.k-panel--dashed:hover {
  border-style: solid;
}

.k-panel__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--k-accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- 6. Tab bar / FAB ---------------------------------------------------
   Page shell furniture that pairs with .k-app (05-layout.css). Wired up
   in Phase 3.5 via templates/partials/tabbar.html across the 4 trip
   screens (Trip/Expenses/Members/Settle). position:sticky (rather than
   restructuring every page into the full flex-column-with-scrollable-
   middle shell from the design source) keeps this a small, low-risk
   change on top of already-shipped pages. */

.k-tabbar {
  /* Not sticky — it's the fixed last row of the .k-app flex column
     (05-layout.css), which is how the design builds it and what keeps it
     stable while the iOS URL bar collapses. */
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  padding: 0.5625rem 0.75rem calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
  background: var(--k-surface);
  border-top: 1px solid var(--k-line);
}

.k-tabbar__slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: var(--k-soft);
  cursor: pointer;
  text-decoration: none;
}

.k-tabbar__slot:hover {
  color: var(--k-ink);
}

.k-tabbar__slot--active,
.k-tabbar__slot--active:hover {
  /* :hover restated so the active tab keeps its accent when the pointer is
     over it, instead of falling through to .k-tabbar__slot:hover. */
  color: var(--k-accent);
}

.k-tabbar__slot span {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.k-tabbar__fab-slot {
  flex: none;
  width: 56px;
  display: flex;
  justify-content: center;
}

.k-fab {
  width: 48px;
  height: 48px;
  margin-top: -16px;
  border-radius: 999px;
  background: var(--k-primary);
  color: var(--k-onPrimary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  text-decoration: none;
}

.k-fab:hover {
  opacity: 0.92;
  color: var(--k-onPrimary);
}

/* The Klear mark inside the FAB (26px per the design, L696). */
.k-fab__mark {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}

.k-fab--disabled {
  background: var(--k-line);
  color: var(--k-soft);
  box-shadow: none;
  cursor: default;
}

/* ---- 7. Icon -----------------------------------------------------------
   One sprite symbol (templates/partials/icons.html) rendered by the
   {% icon %} tag. Colour always comes from the parent via currentColor. */

.k-icon {
  flex: none;
  display: block;
  color: inherit;
}

/* ---- 8. Section header -------------------------------------------------
   The uppercase letter-spaced eyebrow above every list in the design
   (L350-L353, L832, L1030), optionally with a count on the right. */

.k-section {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.625rem;
  padding-top: 0.25rem;
}

.k-section__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--k-soft);
}

.k-section__count {
  font-size: 0.75rem;
  color: var(--k-soft);
}

/* ---- 9. Avatar ---------------------------------------------------------
   Colour comes from --k-av-bg/--k-av-fg, set per member by the
   {% avatar %} tag (deterministic from TripMember.pk so nobody changes
   colour between screens). --self and --shadow are the two fixed
   exceptions from the design (L317/L1156 and L1192). */

.k-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 999px;
  background: var(--k-av-bg, var(--k-line));
  color: var(--k-av-fg, var(--k-soft));
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}

.k-avatar--sm {
  width: 1.375rem;
  height: 1.375rem;
  font-size: 0.5625rem;
}

.k-avatar--lg {
  width: 3.125rem;
  height: 3.125rem;
  font-size: 1.1875rem;
}

.k-avatar--self {
  background: var(--k-accentSoft);
  color: var(--k-accent);
}

.k-avatar--shadow {
  background: transparent;
  color: var(--k-soft);
  border: 1px dashed var(--k-line);
}

/* Overlapping stack. The surface-coloured ring is what makes the overlap
   read as depth rather than as a rendering glitch — don't drop it.
   (The prototype also has `gap:-6px` at L364; that's invalid CSS and does
   nothing — the real overlap is this negative margin.) */
.k-avatars {
  display: flex;
  align-items: center;
  flex: none;
}

.k-avatars .k-avatar + .k-avatar {
  margin-left: -7px;
  border: 2px solid var(--k-surface);
}

/* ---- 10. Meter ---------------------------------------------------------
   The thin progress/proportion bar (L51-L55, L546-L549). --segments is the
   multi-colour variant on the landing card; the plain one takes a single
   fill whose width is set inline. */

.k-meter {
  display: flex;
  gap: 0.375rem;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--k-line);
}

.k-meter--segments {
  background: none;
  margin-top: 2px;
}

.k-meter > span {
  border-radius: 999px;
  display: block;
}

.k-meter__fill {
  background: var(--k-accent);
  border-radius: 999px;
}

/* ---- 11. Numbered step -------------------------------------------------
   The three how-it-works rows on the landing screen (L63-L83). */

.k-step {
  display: flex;
  gap: 0.8125rem;
  align-items: flex-start;
}

.k-step__num {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: var(--k-accentSoft);
  color: var(--k-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
}

/* ---- 11b. Logo ---------------------------------------------------------
   partials/logo.html renders both variants; these rules pick one. The
   selector logic mirrors 01-tokens.css exactly (OS preference unless
   data-theme overrides it) so the mark can never contradict the palette. */

.k-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.k-logo__img {
  height: var(--k-logo-h, 34px);
  width: auto;
  display: block;
}

/* Default (light): show the navy mark. */
.k-logo__img--dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .k-logo__img--light,
  :root:not([data-theme]) .k-logo__img--light {
    display: none;
  }
  :root[data-theme="auto"] .k-logo__img--dark,
  :root:not([data-theme]) .k-logo__img--dark {
    display: block;
  }
}

:root[data-theme="dark"] .k-logo__img--light {
  display: none;
}

:root[data-theme="dark"] .k-logo__img--dark {
  display: block;
}

:root[data-theme="light"] .k-logo__img--light {
  display: block;
}

:root[data-theme="light"] .k-logo__img--dark {
  display: none;
}

/* ---- 12. Selection action bar ------------------------------------------
   The contextual "N selected · Export · Delete" bar on the expenses list
   (NEW_UI L1090-L1104). Sticky to the bottom of .k-scroll, not fixed to
   the viewport — the tab bar already owns the viewport's last row. */

.k-actionbar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-radius: 16px;
  background: var(--k-surface);
  border: 1px solid var(--k-accentLine);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* ---- 12b. Two-position sliding toggle ----------------------------------
   Used by the language switch. The moving pill is a ::before on the track,
   translated by the --b modifier, so the two options stay real <button>s
   and the whole thing still works with JS disabled. */

.k-toggle2 {
  position: relative;
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--k-field);
  border: 1px solid var(--k-line);
}

.k-toggle2::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  border-radius: 999px;
  background: var(--k-primary);
  transition: transform 160ms ease;
}

.k-toggle2--b::before {
  transform: translateX(100%);
}

@media (prefers-reduced-motion: reduce) {
  .k-toggle2::before {
    transition: none;
  }
}

.k-toggle2__opt {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 2.75rem;
  padding: 0.25rem 0.625rem;
  border: none;
  background: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--k-soft);
  cursor: pointer;
  white-space: nowrap;
}

.k-toggle2__opt[aria-current="true"] {
  color: var(--k-onPrimary);
}

/* ---- 12c. Checkbox -----------------------------------------------------
   Real <input type="checkbox">, visually hidden but still focusable and
   clickable (opacity:0, not display:none — display:none would take it out
   of the tab order and stop @change firing). The tick is a sibling span
   styled off :checked. */

.k-check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
}

.k-check input[type="checkbox"] {
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.k-check__box {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.0625rem;
  border-radius: 6px;
  border: 1px solid var(--k-line);
  background: var(--k-field);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
}

.k-check input[type="checkbox"]:checked + .k-check__box {
  background: var(--k-primary);
  border-color: var(--k-primary);
  color: var(--k-onPrimary);
}

.k-check input[type="checkbox"]:focus-visible + .k-check__box {
  outline: 2px solid var(--k-accent);
  outline-offset: 2px;
}

.k-check input[type="checkbox"][aria-invalid="true"] + .k-check__box {
  border-color: var(--k-warn);
}

.k-check__label {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--k-soft);
}

/* An inline text button that reads as a link (opens the terms modal). */
.k-link {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--k-accent);
  text-decoration: underline;
  cursor: pointer;
}

/* ---- 12d. Modal --------------------------------------------------------
   Native <dialog>: the browser supplies focus trapping, Esc-to-close and
   the backdrop, so no JS beyond showModal()/close(). */

.k-modal {
  width: min(calc(100vw - 2rem), 26.875rem);
  max-height: 82dvh;
  padding: 0;
  border: 1px solid var(--k-line);
  border-radius: 20px;
  background: var(--k-surface);
  color: var(--k-ink);
  overflow: hidden;
}

.k-modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.k-modal[open] {
  display: flex;
  flex-direction: column;
}

.k-modal__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1rem 0.75rem 1.25rem;
  border-bottom: 1px solid var(--k-line);
}

.k-modal__title {
  flex: 1;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: var(--k-lh-heading);
}

.k-modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.25rem;
}

.k-modal__foot {
  flex: none;
  padding: 0.75rem 1.25rem calc(env(safe-area-inset-bottom, 0px) + 1rem);
  border-top: 1px solid var(--k-line);
}

.k-terms h3 {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  line-height: var(--k-lh-heading);
}

.k-terms p {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--k-soft);
}

.k-terms strong {
  color: var(--k-ink);
}

/* Show the copy matching the page language. Both are in the DOM so the
   modal never disagrees with the surrounding UI. */
.k-terms--th {
  display: none;
}

html[lang="th"] .k-terms--th {
  display: block;
}

html[lang="th"] .k-terms--en {
  display: none;
}

/* LINE's mark is white-on-green, so on a neutral row it needs its own green
   puck to stay legible and on-brand. */
.k-provider-dot {
  flex: none;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 6px;
  background: #06c755;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- 12e. Disclosure ---------------------------------------------------
   A collapsible section built on <details>/<summary>: open/closed is the
   browser's own state, so it needs no JS and works with JS disabled. */

.k-disclosure {
  padding: 0;
}

.k-disclosure__summary {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem;
  cursor: pointer;
  list-style: none;
}

/* Hide the native triangle in both engines — the chevron replaces it. */
.k-disclosure__summary::-webkit-details-marker {
  display: none;
}

.k-disclosure__summary::marker {
  content: "";
}

.k-disclosure__chevron {
  color: var(--k-soft);
  transition: transform 160ms ease;
}

.k-disclosure[open] .k-disclosure__chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .k-disclosure__chevron {
    transition: none;
  }
}

.k-disclosure__body {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--k-line);
}

/* ---- 13. Search field --------------------------------------------------
   A .k-field with a leading icon tucked inside the input box. */

.k-field--search {
  position: relative;
}

.k-field--search .k-field__icon {
  position: absolute;
  left: 0.8125rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--k-soft);
  pointer-events: none;
}

.k-field--search input[type="search"] {
  padding-left: 2.375rem;
}