/* ══ forms ═══════════════════════════════════════════════════════════════
 * Everything you type into or choose from. A field is a capsule: text you type
 * into is one of the few things on screen that is not a slab, which is exactly
 * why it reads as a place to type.
 */
input, textarea { font: inherit; font-family: var(--font); font-weight: 600;
  background: var(--panel); color: var(--text);
  border: 1.5px solid var(--border); border-radius: var(--r-pill);
  padding: 11px 15px; width: 100%; transition: border-color .18s; }
/* Anything that can grow past one line keeps square-ish corners - a pill with
   six lines in it is a lozenge, not a field. */
textarea { border-radius: var(--r-md); }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
/* A focused field lights its own rim rather than growing an outline outside it:
   these sit shoulder to shoulder in rows, and an offset ring would collide. */
input:focus, textarea:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(75, 123, 236, .18); }
/* Autofill repaints a field in the browser's own pale yellow, which on a dark
   theme is a white slab with white text in it. The background cannot be set
   directly, so it is painted over with an inset shadow and the text color is
   forced with `-webkit-text-fill-color`; the long transition is the usual trick
   for keeping the override from being repainted away. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--panel-2) inset;
  caret-color: var(--text);
  transition: background-color 100000s ease-in-out 0s;
}

/* ── the tick box ─────────────────────────────────────────────────────
   Drawn here rather than left to `accent-color`, which only recolors the
   browser's own square and leaves its size, its radius and its focus ring at
   the platform's defaults - a grey system checkbox on an Orbis card. This is
   the same slab as everything else, and the tick is a rotated L drawn with two
   borders, so it needs no font, no image and no glyph that might not arrive. */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  position: relative; flex: none; cursor: pointer;
  width: 19px; height: 19px; padding: 0; min-height: 0;
  background: var(--panel); border: 2px solid var(--border-hi);
  border-radius: 6px; box-shadow: none;
  transition: background .15s, border-color .15s;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked, input[type="radio"]:checked {
  background: var(--accent); border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px; border: solid #fff;
  border-width: 0 2.5px 2.5px 0; transform: rotate(43deg);
}
input[type="radio"]:checked::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #fff;
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled {
  opacity: .45; cursor: not-allowed;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) {
  input[type="checkbox"]:not(:disabled):hover, input[type="radio"]:not(:disabled):hover {
    border-color: var(--accent);
  }
}

/* ── the dropdown ─────────────────────────────────────────────────────
   Orbis draws its own - see `kit::input::picker` for why a `<select>` cannot
   be made to match, however its `option`s are styled. The face is a capsule
   like every other field; the popup is the `.menu-pop` the ⋯ menus use. */
.picker { position: relative; min-width: 0; }
.picker-face { display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px; border-radius: var(--r-pill);
  background: var(--panel); border: 1.5px solid var(--border);
  box-shadow: none; color: var(--text); font-size: 13px; font-weight: 700;
  text-align: left; }
.picker-face:active:not(:disabled) { transform: none; }
.picker-label { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.picker-caret { flex: none; font-size: 12px; line-height: 1; color: var(--muted-2);
  transition: transform .15s; }
.picker-face[aria-expanded="true"] { border-color: var(--accent); color: var(--text); }
.picker-face[aria-expanded="true"] .picker-caret { transform: rotate(180deg); }
@media (hover: hover) {
  .picker-face:hover { border-color: var(--border-hi); color: var(--text); }
  .picker-face[aria-expanded="true"]:hover { border-color: var(--accent); }
}
/* Pinned to the viewport, never to whatever scrolling panel the face sits in -
   the coordinates come inline from `kit::input::picker`, measured off the face
   the moment it opens. This is what lets a picker inside a modal's scrolling
   body (the donate dialog) drop its list over the fold instead of being
   clipped by it, and why one rule serves the sort pickers, the language picker
   and every dialog alike. Above the modal (60), below the toasts (100). A long
   list scrolls inside itself. */
.picker-pop { position: fixed; z-index: 90;
  max-width: min(320px, 92vw);
  max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px; background: var(--panel);
  border: 2px solid var(--border-hi); border-radius: var(--r-md);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .6); }
.picker-opt { display: block; width: 100%; padding: 9px 12px;
  background: transparent; border: 0; border-radius: var(--r-sm); box-shadow: none;
  color: var(--text); font-size: 13px; font-weight: 700; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-opt:active:not(:disabled) { transform: none; }
/* The one already chosen, marked the way the study desk marks its subject: a
   lit leading edge, not a filled row. */
.picker-opt.on { background: rgba(75, 123, 236, .14); color: var(--text-hi);
  box-shadow: inset 3px 0 0 var(--accent); }
@media (hover: hover) {
  .picker-opt:hover { background: var(--panel-3); color: var(--text-hi);
    border-color: transparent; }
  .picker-opt.on:hover { background: rgba(75, 123, 236, .2); }
}

/* ── numbers ────────────────────────────────────────────────────────── */
input[type="number"] { width: 88px; }
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0 -13px 0 6px;
  width: 20px;
  height: calc(100% + 2px);
  align-self: stretch;
  cursor: pointer;
  opacity: 1;
  background-color: var(--panel-3);
  border-left: 1px solid var(--border);
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background-image:
    linear-gradient(45deg, var(--muted) 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, var(--muted) 50%),
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: 30% 28%, 70% 28%, 30% 72%, 70% 72%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
@media (hover: hover) {
  input[type="number"]::-webkit-inner-spin-button:hover { background-color: var(--border-hi); }
}
input[type="number"]:disabled::-webkit-inner-spin-button { opacity: .4; cursor: not-allowed; }

/* ── the platform's own dropdown ────────────────────────────────────── */
/* Still used where the picker above would be more machinery than the choice is
   worth - the language foot of the sidebar, a trade preference. */
select { font: inherit; font-family: var(--font); font-weight: 700;
  background: var(--panel); color: var(--text);
  border: 1.5px solid var(--border); border-radius: var(--r-pill);
  padding: 11px 34px 11px 15px; width: 100%;
  appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat; }
select:focus { outline: none; border-color: var(--accent); }
select:disabled { opacity: .5; cursor: not-allowed; background-image: none; }
select option { background: var(--panel); color: var(--text); }

/* ── choosing how many ──────────────────────────────────────────────── */
/* −, a field, +, and Max. Used anywhere a number is chosen. */
.qty-input { gap: 4px; align-items: center; margin-top: 6px; }
.qty-input input { width: 76px; text-align: center; margin: 0; }
.qty-input button { min-width: 30px; padding: 4px 8px; }
/* Amounts of orbs: a field, the usual sizes, and everything you hold. */
.orb-input { gap: 6px; }

/* ── field pairs ────────────────────────────────────────────────────── */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-grid label { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.field-grid input { width: 100%; }

/* ── the phone ──────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  /* iOS zooms in when a field smaller than 16px takes focus and never zooms
     back out. Every field is 16px here; the label above it stays small. */
  input, textarea, select { font-size: 16px; min-height: 44px; }
  textarea { min-height: 88px; }
  /* The tick boxes keep their own size; the whole label is the tap target. */
  input[type="checkbox"], input[type="radio"] { min-height: 0; }
  .qty-input button, .orb-input button { min-height: 40px; min-width: 40px; }
}
@media (max-width: 560px) {
  .field-grid { grid-template-columns: 1fr; }
}