/* Form controls and the application/operations surfaces built from them.
 *
 * Same design laws as the rest of the site: frosted glass, 2-4px radius,
 * hairline borders, no pills. Fields are calm and generously spaced — someone
 * describing a difficult situation should not be filling in a cramped form.
 */

/* --- Fields -------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.15rem; }

.field label {
  font-size: 0.72rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.field-hint { font-size: var(--step--1); color: var(--muted); line-height: 1.55; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 0.85rem;
  background: var(--glass-2);
  border: 1px solid var(--hair-2);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: var(--step-0);
  transition: border-color var(--fast) var(--ease);
}

.field textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--text); outline: none; }

.field-row { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 44rem) { .field-row { grid-template-columns: 1fr 1fr; } }

.form-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; }

/* --- Inline feedback ----------------------------------------------------- */
.form-message {
  margin-top: 1rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--hair);
  border-left: 3px solid var(--muted);
  border-radius: var(--radius);
  font-size: var(--step--1);
  color: var(--muted);
}

.form-message[data-tone="error"] { border-left-color: var(--text); color: var(--text); }

/* --- Status pills are forbidden; these are status TAGS -------------------- */
.status-tag {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--hair-2);
  border-radius: var(--radius);
  background: var(--glass-2);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.status-tag[data-status="verified"],
.status-tag[data-status="qualified"],
.status-tag[data-status="finalist"],
.status-tag[data-status="selected"] { color: var(--text); border-color: var(--text); }

/* --- Record lists (applications, queue, files, entries) ------------------- */
.record-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; }

.record {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 1.05rem 1.25rem;
  background: var(--glass);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
}

.record-main { flex: 1 1 16rem; min-width: 0; }
.record-main h3 { font-size: var(--step-0); margin-bottom: 0.2rem; }
.record-meta { font-size: var(--step--1); color: var(--muted); }
.record-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.record .btn { min-height: 38px; padding: 0.45rem 0.95rem; font-size: 0.7rem; }

/* --- Timeline ------------------------------------------------------------ */
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; }

.timeline li {
  padding-inline-start: 1.1rem;
  border-inline-start: 1px solid var(--hair-2);
  font-size: var(--step--1);
  color: var(--muted);
}

.timeline time { display: block; font-family: var(--font-mono); font-size: 0.7rem; }
.timeline .timeline-note { margin-top: 0.35rem; color: var(--text); line-height: 1.6; }

/* --- Definition list for one reviewed record ------------------------------ */
.detail-list { margin: 0; display: grid; gap: 0.25rem; }

.detail-list dt {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Applicant narrative arrives with its own line breaks and must keep them. */
.detail-list dd {
  margin: 0 0 0.9rem;
  font-size: var(--step--1);
  line-height: 1.7;
  white-space: pre-wrap;
}

/* --- Two-column app layout ----------------------------------------------- */
.app-columns { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 62rem) { .app-columns { grid-template-columns: 1.35fr 1fr; } }

/**
 * A panel is a real surface, not a bare grid.
 *
 * It must carry its own padding, hairline and radius: the shared ALYSSIUN OS
 * launcher paints `.panel` with a themed background (`!important`, from its
 * host stylesheet), so a panel with no inset renders as a hard square with the
 * text pressed into the corner. Matching .card's padding and radius keeps every
 * surface in the app reading as one family.
 */
.panel {
  display: grid;
  gap: 1rem;
  padding: clamp(1.35rem, 1rem + 1.1vw, 2rem);
  background: var(--glass);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
}

/* The heading sits tight to the panel edge it titles, not floating in the gap. */
.panel > h2 { font-size: var(--step-1); }
.panel > h2:not(:first-child) { margin-top: 0.5rem; }

/* Tabs across the operations area. Buttons, not links: they switch a view.
   The strip owns the whole gap down to its panel (see .ops-tabbar). */
.ops-tabbar { padding-bottom: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.5rem; }

.tabs button {
  padding: 0.55rem 1rem;
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  color: var(--muted);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
}

.tabs button[aria-selected="true"] { color: var(--text); border-color: var(--text); }


/* --- Vote options -------------------------------------------------------- */
.vote-option { display: flex; gap: 0.9rem; align-items: flex-start; }
.vote-option input { width: auto; min-height: 0; margin-top: 0.35rem; }
.vote-count { font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted); }

/* --- Ledger table -------------------------------------------------------- */
.ledger-wrap { overflow-x: auto; }
.ledger { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.ledger th, .ledger td { padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid var(--hair); }
.ledger th { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.ledger td.amount { font-family: var(--font-mono); white-space: nowrap; }