/* ==========================================================================
   THE CONTROL SYSTEM.

   Ten controls, and no eleventh. The audit that preceded this file found 53
   control rules across four stylesheets using ~30 padding pairs, 16 font
   sizes and 20 radii to express what turned out to be ten actual jobs:

     .ka-c-btn                  primary — the one action on a screen
     .ka-c-btn--secondary       an alternative that is not the point
     .ka-c-btn--quiet           a link that behaves like a button
     .ka-c-btn--danger          an action that removes something
     .ka-c-field                a search or text input
     .ka-c-field__go            the action that lives inside a field
     .ka-c-chip                 a filter, a variant, an option
     .ka-c-chip[aria-pressed]   the chosen one
     .ka-c-icon-btn             a square control that is only an icon
     .ka-c-inline               a small action inside a row of text

   Everything here composes from tokens.css. There is not one literal colour,
   radius or duration below, which is the point: a change to the system is a
   change in one file, and it reaches every surface at once.

   TWO RULES THAT ARE NOT NEGOTIABLE

   1. HEIGHT COMES FROM PADDING. No control sets a fixed height. The
      reference direction asks for controls whose "height adapts naturally to
      content", and there is a practical reason beyond taste: a fixed 48px
      button clips a two-line label, and this shop renders translated strings.
      min-height only guarantees the touch target, and only where the pointer
      is coarse.

   2. EVERY CONTROL HAS A VISIBLE FOCUS STATE, in one colour, at one width.
      The audit found focus rings in five colours — one of them the 2.5:1
      gold — alongside eleven `outline: none` declarations. A keyboard user
      cannot use what they cannot see.
   ========================================================================== */

/* ---------------------------------------------------------------- the base */

/*
 * Shared by every control. Anything that differs between a button and a chip
 * is a difference worth having; everything below is not.
 */
.ka-c-btn,
.ka-c-chip,
.ka-c-icon-btn,
.ka-c-inline,
.ka-c-field__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ka-control-gap);
  border: 1px solid transparent;
  border-radius: var(--ka-radius-pill);
  font-family: var(--ka-font-body);
  font-size: var(--ka-type-control);
  font-weight: var(--ka-weight-medium);
  line-height: var(--ka-leading-snug);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--ka-dur) var(--ka-ease),
    border-color var(--ka-dur) var(--ka-ease),
    color var(--ka-dur) var(--ka-ease),
    transform var(--ka-dur-fast) var(--ka-ease);
}

.ka-c-btn:focus-visible,
.ka-c-chip:focus-visible,
.ka-c-icon-btn:focus-visible,
.ka-c-inline:focus-visible,
.ka-c-field__go:focus-visible,
.ka-c-field:focus-within {
  outline: var(--ka-focus-width) solid hsl(var(--ka-focus));
  outline-offset: var(--ka-focus-offset);
}

/*
 * THE SAME RING FOR THE CLASSES THAT PREDATE THIS FILE.
 *
 * Tabbing the findings archive showed the topic pills falling back to the
 * browser's own `1px auto black`: visible, so nothing looked broken, and
 * wrong, because it is a different ring from the one every control beside it
 * draws. A focus state that changes shape as you tab across a row reads as
 * three unrelated interfaces, which is the thing this pass exists to end.
 *
 * Listed explicitly rather than applied to `a:focus-visible`, because a body
 * link should keep the browser's default — it is text, not a control, and
 * ringing every link in an article would be worse than the inconsistency.
 */
.ka-research__pill:focus-visible,
.ka-arch__chip:focus-visible,
.ka-rbutton:focus-visible,
.ka-match__cta:focus-visible,
.ka-rtransparency__action a:focus-visible,
.ka-research__empty a:focus-visible,
.ka-research__back:focus-visible,
.ka-rsection__more:focus-visible,
.ka-finding:focus-visible,
.ka-rtopics a:focus-visible,
.ka-rexploring a:focus-visible,
.ka-nav__submenu-item:focus-visible {
  outline: var(--ka-focus-width) solid hsl(var(--ka-focus));
  outline-offset: var(--ka-focus-offset);
}

/* Pressing gives way slightly. It is the only motion a control makes. */
.ka-c-btn:active,
.ka-c-icon-btn:active,
.ka-c-field__go:active { transform: scale(0.985); }

/*
 * DISABLED MUST STILL BE READABLE.
 *
 * The common `opacity: 0.4` takes a 13:1 label down to about 5:1 and a 4.5:1
 * one to 1.8:1 — so the cheapest way to write this state is also the way that
 * makes it unreadable. Muted colours, full opacity.
 */
.ka-c-btn[disabled],
.ka-c-btn[aria-disabled="true"],
.ka-c-icon-btn[disabled],
.ka-c-field__go[disabled] {
  background: hsl(var(--ka-muted));
  border-color: hsl(var(--ka-border));
  color: hsl(var(--ka-muted-foreground));
  cursor: not-allowed;
  transform: none;
}

/* ------------------------------------------------------------ A. PRIMARY */

/*
 * Espresso, not gold. The gold is the brand and it stays on prices, stars and
 * hairlines; behind a body-sized label it measures about 2.5:1 against ivory,
 * which is below what a word needs to be read. This is ~13:1.
 *
 * No shadow. The button it replaces carried
 * `0 12px 34px rgba(184,137,47,0.35)` — a 34px coloured glow that announced
 * the button rather than presenting it.
 */
.ka-c-btn {
  padding: var(--ka-control-pad-y) var(--ka-control-pad-x);
  background: hsl(var(--ka-espresso));
  color: hsl(var(--ka-espresso-foreground));
}
.ka-c-btn:hover { background: hsl(var(--ka-espresso) / 0.88); }

/* ---------------------------------------------------------- B. SECONDARY */

.ka-c-btn--secondary {
  background: hsl(var(--ka-card));
  border-color: hsl(var(--ka-border));
  color: hsl(var(--ka-foreground));
}
.ka-c-btn--secondary:hover {
  border-color: hsl(var(--ka-primary) / 0.45);
  background: hsl(var(--ka-secondary) / 0.7);
}

/* -------------------------------------------------------------- C. QUIET */

.ka-c-btn--quiet {
  padding: var(--ka-control-pad-y-sm) var(--ka-control-pad-x-sm);
  background: transparent;
  border-color: transparent;
  color: hsl(var(--ka-primary));
}
.ka-c-btn--quiet:hover {
  background: hsl(var(--ka-primary) / 0.07);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ------------------------------------------------------------- J. DANGER */

/*
 * SECONDARY BY DEFAULT, and deliberately so. A filled red Remove beside a
 * quiet Add is a button that gets pressed by accident; the weight belongs on
 * the action the customer came to take. The colour is enough to say what this
 * one does, and it only fills on hover, once the cursor is already committed.
 */
.ka-c-btn--danger {
  background: transparent;
  border-color: hsl(var(--ka-danger) / 0.4);
  color: hsl(var(--ka-danger));
}
.ka-c-btn--danger:hover {
  background: hsl(var(--ka-danger));
  border-color: hsl(var(--ka-danger));
  color: hsl(var(--ka-danger-foreground));
}

/* ------------------------------------------------------------- SIZES */

.ka-c-btn--sm {
  padding: var(--ka-control-pad-y-sm) var(--ka-control-pad-x-sm);
  font-size: var(--ka-type-control-sm);
}
.ka-c-btn--lg { padding: var(--ka-control-pad-y-lg) var(--ka-control-pad-x-lg); }
.ka-c-btn--block { display: flex; width: 100%; }

/* ================================================================ D. FIELD

   The search control, and the reference direction this pass was given:
   warm off-white surface, one subtle border, a large but not cartoonish
   radius, comfortable horizontal padding, height from content, understated
   icon, action button sitting cleanly inside.

   It is one shape at two weights — see --prominent below — so the Ask Us
   field can lead without becoming a different species from the archive
   search beside it.
   ------------------------------------------------------------------------ */

.ka-c-field {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: var(--ka-field-pad-y) var(--ka-field-pad-right) var(--ka-field-pad-y) var(--ka-field-pad-left);
  border: 1px solid hsl(var(--ka-border));
  border-radius: var(--ka-radius-pill);
  background: hsl(var(--ka-card));
  box-shadow: var(--ka-shadow-raised);
  transition: border-color var(--ka-dur) var(--ka-ease), box-shadow var(--ka-dur) var(--ka-ease);
}
.ka-c-field:hover { border-color: hsl(var(--ka-border-strong)); }

/* The glyph. Understated: it labels the field, it is not an ornament. */
.ka-c-field > svg {
  flex: 0 0 auto;
  width: var(--ka-icon-sm);
  height: var(--ka-icon-sm);
  color: hsl(var(--ka-muted-foreground));
}

.ka-c-field input,
.ka-c-field textarea {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  color: hsl(var(--ka-foreground));
  font-family: var(--ka-font-body);
  font-size: var(--ka-type-body);
  line-height: var(--ka-leading-snug);
}
.ka-c-field input:focus,
.ka-c-field textarea:focus { outline: none; }
.ka-c-field input::placeholder { color: hsl(var(--ka-muted-foreground)); }

/* Search inputs get a clear affordance in WebKit; it collides with ours. */
.ka-c-field input[type="search"]::-webkit-search-decoration,
.ka-c-field input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* E. THE ACTION INSIDE THE FIELD. Espresso, pill, and the one place a
   min-height is set — it must clear 44px even when its label is hidden. */
.ka-c-field__go {
  flex: 0 0 auto;
  min-height: var(--ka-tap-min);
  padding: 0 var(--ka-control-pad-x);
  background: hsl(var(--ka-espresso));
  color: hsl(var(--ka-espresso-foreground));
}
.ka-c-field__go:hover { background: hsl(var(--ka-espresso) / 0.88); }

/*
 * The prominent variant — Ask Us. Larger type and more room, the SAME
 * geometry. The brief allows Ask Us to lead the research search; it does not
 * allow the two to look unrelated.
 */
.ka-c-field--prominent {
  padding-left: 1.5rem;
  box-shadow: var(--ka-shadow-panel);
}
.ka-c-field--prominent input { font-size: var(--ka-type-lede); padding: 0.6875rem 0; }
.ka-c-field--prominent > svg { width: var(--ka-icon-md); height: var(--ka-icon-md); }

/*
 * ON A PHOTOGRAPH.
 *
 * The one liquid-glass control in the system. Written as an @supports
 * UPGRADE, never as the base: an unsupported backdrop-filter would leave the
 * heavier fill, not transparent white text on a bright part of an image.
 *
 * The hero it sits on is a full-viewport image, and blurring a backdrop that
 * large repaints the document on every scroll frame — which on this site
 * produced a page that rendered nothing at all while reporting correct
 * geometry for every element. Any surface using this MUST give the image
 * behind it its own compositing layer. See .ka-rhero in research.css.
 */
.ka-c-field--on-image {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.3);
  box-shadow: none;
}
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .ka-c-field--on-image {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}
.ka-c-field--on-image:hover { border-color: rgba(255, 255, 255, 0.45); }
.ka-c-field--on-image:focus-within { outline-color: #fff; }
.ka-c-field--on-image > svg { color: rgba(255, 255, 255, 0.75); }
.ka-c-field--on-image input { color: #fff; }
.ka-c-field--on-image input::placeholder { color: rgba(255, 255, 255, 0.65); }
.ka-c-field--on-image .ka-c-field__go {
  background: #fff;
  color: hsl(var(--ka-espresso));
}
.ka-c-field--on-image .ka-c-field__go:hover { background: rgba(255, 255, 255, 0.88); }

/* --------------------------------------------------------------- F/G. CHIP */

.ka-c-chip {
  padding: var(--ka-control-pad-y-sm) var(--ka-control-pad-x-sm);
  border-color: hsl(var(--ka-border));
  background: transparent;
  color: hsl(var(--ka-muted-foreground));
}
.ka-c-chip:hover {
  border-color: hsl(var(--ka-primary) / 0.45);
  color: hsl(var(--ka-foreground));
}

/*
 * SELECTED IS AN ATTRIBUTE, NOT A CLASS.
 *
 * aria-pressed / aria-current / aria-selected are what a screen reader reads,
 * so styling those directly means the visual state and the announced state
 * cannot drift apart. A `.is-active` class can be added without the attribute
 * — and on this site, once was.
 */
.ka-c-chip[aria-pressed="true"],
.ka-c-chip[aria-current="true"],
.ka-c-chip[aria-selected="true"],
.ka-c-chip.is-selected {
  border-color: hsl(var(--ka-espresso));
  background: hsl(var(--ka-espresso));
  color: hsl(var(--ka-espresso-foreground));
}

/* A chip that cannot be chosen says so by more than being pale. */
.ka-c-chip[disabled],
.ka-c-chip[aria-disabled="true"] {
  border-color: hsl(var(--ka-border));
  color: hsl(var(--ka-muted-foreground));
  text-decoration: line-through;
  cursor: not-allowed;
}

/* ---------------------------------------------------------- H. ICON BUTTON */

.ka-c-icon-btn {
  padding: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-color: transparent;
  background: transparent;
  color: hsl(var(--ka-foreground));
}
.ka-c-icon-btn:hover { background: hsl(var(--ka-foreground) / 0.06); }
.ka-c-icon-btn svg { width: var(--ka-icon-md); height: var(--ka-icon-md); }
.ka-c-icon-btn--bordered { border-color: hsl(var(--ka-border)); }

/* ------------------------------------------------------ I. INLINE ACTION */

/* A small action inside a line of text — "Remove", "Change", "Undo". It is
   text with a hit area, so it carries no fill and no border at rest. */
.ka-c-inline {
  padding: 0.25rem 0.375rem;
  border-radius: var(--ka-radius-xs);
  background: transparent;
  border-color: transparent;
  color: hsl(var(--ka-muted-foreground));
  font-size: var(--ka-type-control-sm);
  text-decoration: underline;
  text-decoration-color: hsl(var(--ka-border));
  text-underline-offset: 3px;
}
.ka-c-inline:hover {
  color: hsl(var(--ka-foreground));
  text-decoration-color: currentColor;
}
.ka-c-inline--danger { color: hsl(var(--ka-danger)); }

/* ------------------------------------------------------------ TOUCH + MOTION */

/*
 * The 44px guarantee, applied ONLY where the pointer is coarse.
 *
 * Applying it everywhere would inflate every chip on a desktop archive into a
 * row of lozenges. min-height rather than height, so a control that is
 * already taller — a two-line chip, a wrapped label — keeps its own size
 * instead of being clamped back and clipping its text.
 */
@media (pointer: coarse) {
  .ka-c-btn,
  .ka-c-chip,
  .ka-c-icon-btn,
  .ka-c-field__go { min-height: var(--ka-tap-min); }
  .ka-c-icon-btn { min-width: var(--ka-tap-min); }
  .ka-c-inline { min-height: 2rem; }

  /*
   * The same guarantee for the classes that predate this file.
   *
   * They now take their colour, radius and type from the tokens, so they are
   * part of the system in every respect except their names — and a touch
   * target is not something the system should hand out only to components
   * that were renamed. Measured on the sticky buy bar: its Add to Cart came
   * out at 37px, which is a thumb-sized action drawn at fingernail size.
   */
  .ka-btn,
  .ka-buybar__btn,
  .ka-store__cta,
  .ka-auth__submit,
  .ka-contact__submit,
  .ka-chat__send,
  .ka-research__search button,
  .ka-ask__field button,
  .ka-research__pill,
  .ka-arch__chip,
  .ka-rbutton,
  .ka-match__cta { min-height: var(--ka-tap-min); }

  /*
   * The immersive homepage's own controls, measured at 375px BEFORE this
   * block existed:
   *
   *   room rail (The Atelier / Gallery / Floor)  29px
   *   sound toggle                               30px
   *   microphone, inside the Ask Us field        18px
   *   language selector, inside the same field   12px
   *
   * The last two are the worst of it: they sit inside the one control a
   * customer meets first, and 12px is not a target, it is a decoration that
   * happens to be clickable. The field grows a little on touch to hold them,
   * which is the right trade — a taller field is a cost, a 12px button is a
   * customer who cannot change language.
   */
  .ka-imm__rail-btn,
  .ka-imm__sound,
  .ka-imm__hero-mic,
  .ka-imm__lang-select,
  .ka-chat__lang-select { min-height: var(--ka-tap-min); }
  .ka-imm__hero-mic,
  .ka-imm__sound { min-width: var(--ka-tap-min); }
}

@media (prefers-reduced-motion: reduce) {
  .ka-c-btn,
  .ka-c-chip,
  .ka-c-icon-btn,
  .ka-c-inline,
  .ka-c-field,
  .ka-c-field__go { transition: none; }
  .ka-c-btn:active,
  .ka-c-icon-btn:active,
  .ka-c-field__go:active { transform: none; }
}

/* -------------------------------------------------------- SMALL SCREENS */

/*
 * The field's action loses its LABEL, never the control. The arrow stays, the
 * hit area stays 44px, and the line under the field already says what
 * pressing it does.
 */
@media (max-width: 560px) {
  .ka-c-field { padding-left: 1rem; }
  .ka-c-field__go { padding: 0 0.875rem; }
  .ka-c-field__go .ka-c-field__go-label { display: none; }
}