/* Controls: the finishing layer of the design system. Every native control (select, file, checkbox, radio, date) gets the same
   shape, fill, focus ring and motion as the rest of the product, so no form anywhere looks like browser default. */

html { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
::selection { background: color-mix(in srgb, var(--accent) 38%, transparent); }

/* ---------- select ---------- */
select:not(.select-btn select) {
  appearance: none; -webkit-appearance: none; font: inherit; font-size: var(--fs-body); color: var(--text);
  min-height: 46px; padding: 0 40px 0 14px; border: 0; border-radius: var(--r-sm); background-color: var(--fill); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
@media (hover: hover) { select:not(.select-btn select):hover { background-color: var(--fill-hover); } }
select:not(.select-btn select):focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
select option { background: var(--surface-2); color: var(--text); }

/* ---------- file input ---------- */
input[type="file"] { font: inherit; font-size: var(--fs-subhead); color: var(--text-2); max-width: 100%; cursor: pointer; }
input[type="file"]::file-selector-button {
  margin-right: var(--s3); min-height: 38px; padding: 0 18px; border: 0; border-radius: var(--r-full); cursor: pointer;
  background: var(--fill-hover); color: var(--text); font: inherit; font-weight: 600; font-size: var(--fs-subhead); transition: background var(--t-fast) var(--ease);
}
input[type="file"]::file-selector-button:hover { background: color-mix(in srgb, var(--text) 18%, transparent); }
input[type="file"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-full); }

/* ---------- checkbox + radio ---------- */
input[type="checkbox"]:not(.switch), input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: none; display: inline-grid; place-content: center; width: 22px; height: 22px; margin: 0; cursor: pointer;
  border: 1.5px solid var(--text-3); background: transparent; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
input[type="checkbox"]:not(.switch) { border-radius: 7px; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:not(.switch):checked { background-color: var(--accent); border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); background-size: 78%; background-position: center; background-repeat: no-repeat; }
input[type="radio"]:checked { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 5px, transparent 6px); }
input[type="checkbox"]:active, input[type="radio"]:active { transform: scale(.9); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.check { cursor: pointer; }

/* ---------- date / time ---------- */
input[type="date"], input[type="datetime-local"], input[type="time"] { font: inherit; color: var(--text); min-height: 46px; padding: 0 14px; border: 0; border-radius: var(--r-sm); background: var(--fill); width: 100%; }
input[type="date"]:focus-visible, input[type="datetime-local"]:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }

/* ---------- segmented controls inside a settings row: wrap on narrow screens instead of clipping the label ---------- */
.group-row:has(.segmented) { flex-wrap: wrap; row-gap: var(--s2); }
.group-row:has(.segmented) .segmented { margin-left: auto; max-width: 100%; }
@media (max-width: 520px) { .group-row:has(.segmented) .segmented { width: 100%; } }

/* ---------- admin sign-in: same calm centred panel as the rest ---------- */
.admin > .page-head + form.comment-form { margin-inline: auto; padding: var(--s6); border-radius: var(--r-lg); background: var(--surface); }
.admin > .page-head:has(+ form.comment-form) { text-align: center; padding-top: var(--s10); }

/* ---------- zero-data sparkline: a quiet baseline, not a row of dashes ---------- */
.spark--empty { height: 2px; margin-top: var(--s4); border-radius: 1px; background: currentColor; opacity: .18; }
.admin form.comment-form input[type="password"] { min-height: 46px; font-size: var(--fs-body); }
.admin form.comment-form .row-end { display: grid; gap: var(--s2); justify-items: stretch; }
.admin form.comment-form .btn { width: 100%; min-height: 46px; }