/*
 * The control layer: the controls and a few utilities.
 *
 * Loaded BEFORE tokens.css and index.css, so app rules win ties without
 * "!important".
 *
 * Everything here draws on the --inchi-* tokens. There are no colour values
 * in this file, and only two radii: a control's and a plate's.
 */

/* ---- Reboot ----------------------------------------------------------- */
/*
 * Normalisation, easy to forget because nothing in the app names it. Three of
 * these are load-bearing:
 *
 *   - `fieldset` — the stereo option groups and `fieldset.annotation-selection`
 *     regain the browser's default inset border and padding without it;
 *   - `[hidden]` — the app toggles `.hidden` on elements that also carry
 *     `display: flex`, which wins over the UA `display: none`;
 *   - `summary` — index.css replaces this with an authored triangle, because
 *     `display: flex` kills the native marker.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  line-height: inherit;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 600;
  line-height: 1.2;
}

p, dl, ul, ol {
  margin-top: 0;
  margin-bottom: 1rem;
}

dd {
  margin-left: 0;
}

small, .small {
  font-size: 0.875em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  font-family: var(--inchi-font-identifier);
  font-size: 0.875em;
}

summary {
  display: list-item;
  cursor: pointer;
}

button, input, select, textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button, [type="button"], [type="submit"] {
  appearance: button;
}

table {
  border-collapse: collapse;
}

img, svg {
  vertical-align: middle;
}

/*
 * The only body font stack in the project; without it the app falls back to
 * the browser's default serif. index.css sets the rest of the body.
 */
body {
  margin: 0;
  font-family:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

a {
  color: var(--inchi-brand);
}

a:hover {
  color: var(--inchi-brand-hover);
}

/* A capped container for the About page, a Read surface that wants a measure. */
.container-md {
  width: 100%;
  margin-inline: auto;
  padding-inline: 0.75rem;
}

@media (min-width: 768px) {
  .container-md { max-width: 720px; }
}
@media (min-width: 992px) {
  .container-md { max-width: 960px; }
}
@media (min-width: 1200px) {
  .container-md { max-width: 1140px; }
}
@media (min-width: 1400px) {
  .container-md { max-width: 1320px; }
}

/* ---- Focus ------------------------------------------------------------ */
/*
 * One treatment for every focusable thing, which is the system's own rule.
 * :focus-visible only: a click on a button should not draw a ring.
 *
 * --inchi-focus, matching the named list in index.css that also promotes a
 * control's own border, so there is one focus system rather than two.
 */
:focus-visible {
  outline: var(--inchi-rule-weight) solid var(--inchi-focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* ---- Buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.375rem 0.75rem;
  border: var(--inchi-rule-weight) solid transparent;
  border-radius: var(--inchi-radius-sm);
  background: transparent;
  color: var(--inchi-ink);
  font: inherit;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
}

.btn:disabled {
  cursor: default;
}

/* A button is on the plate, not above it: no shadow and no transform. */
.btn-primary {
  border-color: var(--inchi-brand);
  background: var(--inchi-brand);
  color: var(--inchi-on-brand);
}

.btn-primary:hover,
.btn-primary:active {
  border-color: var(--inchi-brand-hover);
  background: var(--inchi-brand-hover);
  color: var(--inchi-on-brand);
}

.btn-primary:disabled {
  border-color: var(--inchi-rule-hairline);
  background: var(--inchi-field-sunken);
  color: var(--inchi-ink-faint);
}

/* A control boundary, so --inchi-rule and never the hairline. */
.btn-outline-secondary {
  border-color: var(--inchi-rule);
  background: transparent;
  color: var(--inchi-ink-muted);
}

.btn-outline-secondary:hover {
  border-color: var(--inchi-rule);
  background: var(--inchi-field-sunken);
  color: var(--inchi-ink);
}

.btn-outline-secondary:active {
  border-color: var(--inchi-rule-stroke);
  background: var(--inchi-field-sunken);
  color: var(--inchi-ink);
}

.btn-outline-secondary:disabled {
  border-color: var(--inchi-rule-hairline);
  color: var(--inchi-ink-faint);
}

.btn.border-0 {
  border-color: transparent;
}

/*
 * The copy/download pair on a result plate head. Two buttons reading as one
 * control, so the inner corners are squared and the border is shared.
 */
.btn-group {
  display: inline-flex;
}

.btn-group > .btn:not(:first-child) {
  margin-left: calc(var(--inchi-rule-weight) * -1);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group > .btn:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* ---- Fields ----------------------------------------------------------- */

.form-control,
.form-select {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  border: var(--inchi-rule-weight) solid var(--inchi-rule);
  border-radius: var(--inchi-radius-sm);
  background: var(--inchi-field);
  color: var(--inchi-ink);
  font: inherit;
  line-height: 1.5;
}

.form-control::placeholder {
  color: var(--inchi-ink-faint);
}

.form-select-sm {
  padding: 0.25rem 2rem 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.form-label {
  display: inline-block;
  margin-bottom: 0.25rem;
}

/*
 * The select caret's mechanics only. `appearance: none` removes the native
 * arrow and this positions the replacement; the replacement itself — a data
 * URI whose stroke colour cannot read a custom property, so it is written
 * literally once per theme — lives in index.css, which owns every colour.
 */
select.form-select,
select[data-version] {
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 0.75rem;
}

/* ---- Checkboxes and radios -------------------------------------------- */
.form-check {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  min-height: 1.5rem;
  margin-bottom: 0.125rem;
}

.form-check-input {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0.25rem 0 0;
  appearance: none;
  border: var(--inchi-rule-weight) solid var(--inchi-rule);
  border-radius: 0.25em; /* A checkbox's own small radius, not a control's. */
  background: var(--inchi-field);
  cursor: pointer;
}

.form-check-input[type="radio"] {
  border-radius: 50%;
}

.form-check-input:checked {
  border-color: var(--inchi-brand);
  background-color: var(--inchi-brand);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.7rem;
}

.form-check-input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E");
}

.form-check-input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3' fill='%23fff'/%3E%3C/svg%3E");
}

.form-check-input:disabled {
  border-color: var(--inchi-rule-hairline);
  background-color: var(--inchi-field-sunken);
  cursor: default;
}

.form-check-input:disabled ~ .form-check-label,
.form-check-input:disabled + .form-check-label {
  color: var(--inchi-ink-faint);
}

.form-check-label {
  cursor: pointer;
}

/*
 * The sub-option indent. The templates also mark the inputs with
 * data-inchi-sub-option; this class is only the visual half.
 */
.option-indent {
  margin-left: 1.5rem;
}

/* ---- Alerts ----------------------------------------------------------- */
/*
 * The fragment-loading failure paths in components.js write
 * `class="alert alert-warning"`, so the modifier is needed as well as the
 * base, even though there is only one kind.
 */
.alert-warning,
.alert {
  padding: 0.75rem 1rem;
  border: var(--inchi-rule-weight-hairline) solid var(--inchi-rule);
  border-radius: var(--inchi-radius-sm);
  background: var(--inchi-field-sunken);
  color: var(--inchi-ink);
}

/* ---- Aspect ratio ----------------------------------------------------- */
.ratio {
  position: relative;
  width: 100%;
}

.ratio::before {
  display: block;
  padding-top: var(--inchi-aspect-ratio, 62%);
  content: "";
}

.ratio > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---- Utilities -------------------------------------------------------- */
/*
 * Only the ones the markup uses. Do not add a scale: an unused utility here
 * is a framework growing back.
 */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-muted { color: var(--inchi-ink-muted); }

.w-100 { width: 100%; }
.h-100 { height: 100%; }

.d-flex { display: flex; }
.align-items-center { align-items: center; }
.gap-2 { gap: 0.5rem; }
.row-cols-auto { display: flex; flex-wrap: wrap; gap: 1rem; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-5 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-5 { margin-bottom: 3rem; }
.me-2 { margin-right: 0.5rem; }
.py-1 { padding-block: 0.25rem; }
.py-2 { padding-block: 0.5rem; }
.px-3 { padding-inline: 1rem; }

/*
 * The touch-target floor, on everything that takes a pointer. Keyed to any-pointer as
 * well as pointer: a stylus 2-in-1 reports a fine primary pointer and still
 * needs the target.
 */
@media (pointer: coarse), (any-pointer: coarse) {
  .btn,
  .form-control,
  .form-select,
  .form-check-label {
    min-height: 44px;
  }

  .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
  }
}