/* Neritation. Components: buttons, chips, fields, cards, glyphs. */

/* ---- Buttons. Capsules, like the mark's cuts. ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0 1.75rem;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { text-decoration: none; }
/* Throat Blue fill, Void label. Never Starlight on the blue, that is 2.50:1. */
.btn--primary { background: var(--action); color: var(--on-action); }
.btn--primary:hover { background: var(--action-hover); }
.btn--primary:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--starlight); border: 1px solid var(--void-edge); }
.btn--ghost:hover { border-color: var(--dust); }
.btn--lg { min-height: 3.5rem; padding-inline: 2.25rem; font-size: 1.0625rem; }
.btn--nav { min-height: 2.5rem; padding-inline: 1.25rem; font-size: 0.875rem; }
/* Hebrew specific: the label is two words wide. Never a fixed width. */
html:lang(he) .btn--nav { min-inline-size: 8.5rem; }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* ---- Chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--void-edge);
  color: var(--starlight);
  font-size: 0.9rem;
  text-decoration: none;
  transition: border-color var(--dur), background var(--dur), color var(--dur);
}
.chip:hover { border-color: var(--dust); text-decoration: none; }
.chip.is-active { background: var(--starlight); color: var(--void); border-color: var(--starlight); }
.chip--input { position: relative; cursor: pointer; }
.chip--input input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip--input:has(input:checked) { background: var(--starlight); color: var(--void); border-color: var(--starlight); }
.chip--input:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.chip--escape { border-style: dashed; }

/* ---- Fields. Labels above inputs, always. No placeholders. ---- */
.field { display: flex; flex-direction: column; gap: 0.5rem; margin-block-end: 2rem; }
.field__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.field__label { font-weight: 500; font-size: 1rem; }
.field__legend { display: block; width: 100%; margin-block-end: 0.5rem; }
.field__marker { color: var(--text-secondary); font-size: 0.875rem; }
.field__helper { color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.5; }
/* Error text is the most legible thing in the group: primary colour, no accent. */
.field__error { color: var(--starlight); font-size: 0.9375rem; }
.field__counter { color: var(--text-secondary); font-size: 0.875rem; }

.input {
  width: 100%;
  background: var(--void-raised);
  border: 1px solid var(--void-edge);
  border-radius: 12px;
  padding: 0.875rem 1rem;
  color: var(--starlight);
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur) var(--ease);
}
.input:focus { border-color: var(--action); }
.field.is-invalid .input { border-color: var(--danger); }
.input--area { min-height: 10rem; resize: vertical; }
/* LTR values sit against the reading edge on the Hebrew route. */
[dir="rtl"] .input--ltr { text-align: right; }

.select { position: relative; }
.select::after {
  content: "";
  position: absolute;
  inset-inline-end: 1rem;
  top: 50%;
  width: 0.5rem; height: 0.5rem;
  border-inline-end: 1.5px solid var(--text-secondary);
  border-block-end: 1.5px solid var(--text-secondary);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.select .input { padding-inline-end: 2.5rem; }
select.input option { background: var(--void-raised); color: var(--starlight); }

/* Radio lists. Digits stay in mono, which a native select cannot do. */
.options { display: flex; flex-direction: column; gap: 0.5rem; }
.options--row { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.option { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; position: relative; padding: 0.25rem 0; }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option__box {
  width: 1.125rem; height: 1.125rem;
  border-radius: 50%;
  border: 1.5px solid var(--dust);
  flex: none;
  position: relative;
  transition: border-color var(--dur);
}
.option input:checked + .option__box { border-color: var(--action); }
.option input:checked + .option__box::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--action); }
.option input:focus-visible + .option__box { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.field.is-invalid .option__box { border-color: var(--danger); }

.check { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; position: relative; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box {
  width: 1.125rem; height: 1.125rem;
  border-radius: 5px;
  border: 1.5px solid var(--dust);
  flex: none;
  margin-top: 0.2rem;
  position: relative;
}
.check input:checked + .check__box { background: var(--action); border-color: var(--action); }
.check input:checked + .check__box::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 9px;
  border: solid var(--void);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.check input:focus-visible + .check__box { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.field.is-invalid .check__box { border-color: var(--danger); }
.check__label { line-height: 1.5; }

.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Form level states ---- */
.form-status {
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-block-end: 2rem;
}
.form-status__title { font-weight: 500; margin-block-end: 0.35rem; }
.form-status__body { color: var(--text-muted); }
.apply__state {
  border: 1px solid var(--void-edge);
  border-radius: var(--radius);
  padding: 2.5rem;
  background: var(--void-raised);
  max-inline-size: 640px;
}
.apply__state--ok { border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.apply__state-title { font-size: var(--fs-h3); font-weight: 500; margin-block-end: 1rem; }
.apply__state-body { font-size: 1.0625rem; line-height: 1.65; }
.apply__state-detail { margin-block-start: 1rem; color: var(--text-secondary); font-size: 0.9375rem; }
.apply__state-action { margin-block-start: 1.75rem; }

/* ---- Cards ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.25rem; }
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-height: 15rem;
  padding: 1.75rem;
  border: 1px solid var(--void-edge);
  border-radius: var(--radius);
  background: var(--void-raised);
  transition: border-color var(--dur) var(--ease);
}
.card:hover { border-color: var(--dust); }
.card__title { font-size: var(--fs-h3); line-height: 1.25; }
.card__title a { color: var(--starlight); text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card__meta { margin-block-start: auto; color: var(--text-secondary); font-size: 0.875rem; }

.empty { max-inline-size: var(--measure); }
.empty__title { font-size: var(--fs-h3); font-weight: 500; margin-block-end: 0.75rem; }
.empty__body, .empty__filter { color: var(--text-muted); }
.load-more { margin-block-start: 3rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.load-more__end { color: var(--text-secondary); }

.glyph { display: inline-block; }