/* kit.css — TO-CC-3111 GREEN 1. The small kit every page draws its controls from, served at /kit.css beside /tokens.css.
 *
 * Built on the existing tokens (tokens.css); every var() carries its own fallback so a page that forgot the token
 * sheet still renders the kit rather than a browser default. Every class is `k-` prefixed, so this sheet selects
 * nothing a page did not opt into: a page adopts it by adding the class, never by loading the file.
 *
 * THE RULES THE LINT (scripts/ui-lint.mjs) HOLDS THIS TO, which is also the reading order of this file:
 *   - an ACTION is a <button> (.k-btn / .k-icon-btn); a LINK navigates. Never an <a href="#"> that acts.
 *   - one .k-btn--primary per view; everything else is .k-btn--secondary or quiet.
 *   - every control is at least 44px tall on a phone, the icon button 44x44 at any width.
 *   - no text under 14px on a phone; the smallest kit text is 14px.
 *   - a .k-h with nothing under it is not drawn; a .k-empty is one sentence and one action, shown only when
 *     there is nothing to list.
 */

.k-btn, .k-icon-btn, .k-input, .k-select {
  font-family: var(--font-sans, "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  box-sizing: border-box;
}

/* ---- buttons ---------------------------------------------------------------------------------------- */
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2, 8px);
  min-height: 44px; padding: 0 var(--sp-5, 24px);
  border: 1px solid transparent; border-radius: var(--r-pill, 999px);
  font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background-color var(--ease, 150ms ease-out), color var(--ease, 150ms ease-out), filter var(--ease, 150ms ease-out), box-shadow var(--ease, 150ms ease-out);
}
.k-btn--primary   { background: var(--accent, #22d3c5); color: var(--accent-ink, #06232a); }
.k-btn--secondary { background: var(--accent-soft, rgba(34, 211, 197, 0.10)); color: var(--accent, #22d3c5); border-color: rgba(34, 211, 197, 0.28); }
.k-btn:hover { filter: brightness(1.12); }
.k-btn:focus { outline: none; }
.k-btn:focus-visible, .k-icon-btn:focus-visible, .k-input:focus-visible, .k-select:focus-visible { box-shadow: var(--focus-ring, 0 0 0 2px rgba(34, 211, 197, 0.6)); outline: none; }
.k-btn[disabled], .k-icon-btn[disabled] { opacity: 0.45; cursor: default; filter: none; }
.k-btn--block { display: flex; width: 100%; }

.k-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; flex: none;
  border: 0; border-radius: var(--r-pill, 999px);
  background: transparent; color: var(--muted, #6f8b93); font-size: 18px; line-height: 1;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background-color var(--ease, 150ms ease-out), color var(--ease, 150ms ease-out);
}
.k-icon-btn:hover { background: var(--surface-2, rgba(219, 231, 234, 0.07)); color: var(--text, #dbe7ea); }

/* ---- fields ----------------------------------------------------------------------------------------- */
.k-field { position: relative; display: flex; align-items: center; width: 100%; }
.k-input, .k-select {
  width: 100%; min-height: 44px; padding: 0 var(--sp-4, 16px);
  background: var(--surface-2, rgba(219, 231, 234, 0.07)); color: var(--text, #dbe7ea);
  border: 1px solid var(--line, rgba(219, 231, 234, 0.12)); border-radius: var(--r-card, 8px);
  font-size: 16px; line-height: 1.3; /* 16px: iOS does not zoom a field at 16px */
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--ease, 150ms ease-out), background-color var(--ease, 150ms ease-out);
}
.k-input::placeholder { color: var(--muted, #6f8b93); opacity: 1; }
.k-input:hover, .k-select:hover { border-color: rgba(219, 231, 234, 0.22); }
.k-input:focus, .k-select:focus { border-color: var(--accent, #22d3c5); outline: none; }
.k-field--icon .k-input { padding-left: 44px; }
.k-field--clear .k-input { padding-right: 44px; }
.k-field__icon {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  color: var(--muted, #6f8b93); pointer-events: none;
}
/* the clear sits INSIDE the field, in its right 44px, and shows only while the field holds text */
.k-field .k-clear { position: absolute; right: 0; top: 0; }
.k-field .k-input:placeholder-shown ~ .k-clear { display: none; }
.k-select {
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted, #6f8b93) 50%), linear-gradient(135deg, var(--muted, #6f8b93) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

/* ---- card, row, heading, empty state ---------------------------------------------------------------- */
.k-card {
  background: var(--surface, rgba(219, 231, 234, 0.04)); border: 1px solid var(--line, rgba(219, 231, 234, 0.12));
  border-radius: var(--r-card, 8px); padding: var(--sp-5, 24px); color: var(--text, #dbe7ea);
  font-size: 15px; line-height: 1.5; box-sizing: border-box;
}
.k-card > :first-child { margin-top: 0; }
.k-card > :last-child { margin-bottom: 0; }

.k-row {
  display: flex; align-items: center; gap: var(--sp-3, 12px);
  min-height: 56px; padding: var(--sp-2, 8px) var(--sp-4, 16px); box-sizing: border-box;
  border-bottom: 1px solid var(--line, rgba(219, 231, 234, 0.12));
  color: var(--text, #dbe7ea); font-size: 15px; line-height: 1.4; text-decoration: none;
}
a.k-row:hover { background: var(--surface, rgba(219, 231, 234, 0.04)); }
.k-row__main { flex: 1; min-width: 0; }
.k-row__sub { color: var(--muted, #6f8b93); font-size: 14px; }

.k-h {
  margin: var(--sp-6, 32px) 0 var(--sp-3, 12px);
  font-family: var(--font-sans, "Instrument Sans", -apple-system, "Segoe UI", Arial, sans-serif);
  font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted, #6f8b93);
}

.k-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4, 16px);
  padding: var(--sp-7, 48px) var(--sp-4, 16px); text-align: center;
  color: var(--muted, #6f8b93); font-size: 15px; line-height: 1.5;
}
.k-empty p { margin: 0; max-width: 32em; }

/* ---- toast ------------------------------------------------------------------------------------------ */
.k-toast {
  position: fixed; left: 50%; bottom: calc(var(--sp-5, 24px) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  max-width: min(92vw, 420px); padding: var(--sp-3, 12px) var(--sp-5, 24px);
  background: var(--glass-dark, rgba(8, 13, 20, 0.85)); color: var(--text, #dbe7ea);
  border: 1px solid var(--line, rgba(219, 231, 234, 0.12)); border-radius: var(--r-pill, 999px);
  font-size: 15px; line-height: 1.4; z-index: 9000;
  -webkit-backdrop-filter: var(--glass-blur, blur(24px) saturate(140%)); backdrop-filter: var(--glass-blur, blur(24px) saturate(140%));
}

@media (max-width: 768px) {
  .k-card { padding: var(--sp-4, 16px); }
}