/* legacy screens (SPEC §3.3.6): /spec/{id}/*, /h/{slug}/*, /eval/label.
   Only what the system components in ../app.css do not already cover, on
   the same tokens and ladder. Every selector here is lg-* or a class only
   these templates render. */

/* ---------------------------------------------------------------- columns and rhythm */

.lg-list-col { max-width: var(--w-list); }
.lg-form-col { max-width: var(--w-form); }
.lg-after { margin-top: var(--space-3); }
.lg-before { margin-bottom: var(--space-3); }
.lg-sub { margin: calc(-1 * var(--space-2)) 0 var(--space-3); }
.lg-filter { margin-bottom: var(--space-5); }
.lg-warns { display: grid; gap: var(--space-2); max-width: var(--w-list); margin-bottom: var(--space-5); }
.lg-card-head { margin-bottom: var(--space-4); }
.lg-span { grid-column: 1 / -1; }

/* label · value lists rendered as <dl> */
.lg-dl { margin: 0; }
.lg-dl .lv > dt, .lg-dl .lv > dd { margin: 0; }
.card > .lg-dl { margin: calc(-1 * var(--space-2)) calc(-1 * var(--pad-card)) var(--space-4); }
.card > .lg-dl .lv { background: transparent; }

/* ---------------------------------------------------------------- folded lists ("N more", optional form parts) */

.lg-more { margin-top: var(--space-3); }
.lg-more > summary {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: 44px; list-style: none; cursor: pointer;
  color: var(--accent-text); font-weight: 500;
}
.lg-more > summary::-webkit-details-marker { display: none; }
.lg-more > summary::after {
  content: ""; width: 6px; height: 6px; margin: 0 4px 3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--duration);
}
.lg-more[open] > summary::after { transform: rotate(-135deg); margin-bottom: -2px; }
.lg-more > .list, .lg-more > .card { margin-top: var(--space-2); }
.spec-form > .lg-more { margin-top: var(--space-2); }
.rate-form > .lg-voice { margin: 0 0 var(--space-4); }

/* ---------------------------------------------------------------- candidate row (Find, Shortlist, Watch) */

.pr.lg-cand {
  grid-template-columns: minmax(0, 40fr) minmax(0, 45fr) auto;
  grid-template-areas: "id why act" "foot foot foot";
  align-items: start;
}
.lg-cand-foot {
  grid-area: foot;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
}
.lg-cand-foot > .why[open] { flex-basis: 100%; }
.lg-cand .row-warn { margin-top: var(--space-1); }
.lg-verdict { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.lg-verdict .verdict { flex-wrap: wrap; }
/* attend.css squares .pr .verdict buttons for the ✓/✕ pair; these carry words */
.pr .lg-verdict .verdict .btn { width: auto; padding: 0 var(--space-3); }
.lg-verdict .btn-not-fit[aria-pressed="true"] { background: var(--danger-wash); border-color: var(--danger); color: var(--danger); }
.lg-reasons > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-3); }
.lg-reasons dt { font-weight: 500; color: var(--ink); }
.lg-reasons dd { margin: 0; }
@media (max-width: 720px) {
  .pr.lg-cand { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id act" "why why" "foot foot"; }
  .lg-reasons > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ---------------------------------------------------------------- people and plain rows */

.pr .person-name { font-weight: 500; color: var(--ink); }
.pr .person-bio { display: block; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-2); }
.lg-people .pr, .pr.lg-side-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id"; }
.pr.lg-spec { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id act"; }
a.pr-id.pr-name { color: var(--accent-text); }
@media (hover: hover) { a.pr-id.pr-name:hover { color: var(--accent-text); } }
.lg-ref { overflow-wrap: anywhere; color: var(--accent-text); }
.lg-org .pr-act:empty { display: none; }

/* ---------------------------------------------------------------- versions */

.lg-version { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); }
.lg-version-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.lg-inline-form { display: grid; gap: var(--space-1); margin-top: var(--space-2); max-width: var(--w-form); }

/* ---------------------------------------------------------------- forms (brief, rate, date, upload) */

.lg-fieldset { margin: 0 0 var(--space-4); min-width: 0; display: grid; gap: var(--space-4); }
.lg-fieldset > legend { float: left; width: 100%; padding: 0; margin-bottom: var(--space-1); }
.lg-fieldset > legend.sr-only { float: none; }
.lg-fieldset > legend + * { clear: both; }
.lg-fieldset > .field, .lg-fieldset > .field-textarea { margin-bottom: 0; }

.seat-section { display: grid; gap: var(--space-2); }
.seat-rows, .notlike-rows { display: grid; gap: var(--space-2); }
.seat-row, .notlike-row { display: flex; align-items: center; gap: var(--space-2); }
.seat-row > input[type="text"], .notlike-row > input { flex: 1; min-width: 0; }
.seat-count { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-meta); color: var(--text-2); }
.seat-count input[type="number"] { width: 80px; flex: none; }
@media (max-width: 720px) {
  .seat-row { flex-wrap: wrap; }
  .seat-row > input[type="text"] { flex: 1 1 100%; }
  .seat-count { flex: 1; }
}
.btn-remove {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; border: 0; border-radius: var(--radius-control);
  background: none; color: var(--text-2); font-size: var(--fs-heading); cursor: pointer;
}
@media (hover: hover) { .btn-remove:hover { background: var(--danger-wash); color: var(--danger); } }
.btn-add { justify-self: start; min-height: 44px; }
.guest-picker > li + li { border-top: 1px solid var(--line); }
.guest-picker .choice-row { padding: var(--space-2) var(--space-4); }

.lg-rate-row { padding: var(--space-3) var(--space-4); }
.lg-rate-row .choice { margin: 0; }
.lg-rate-row .choice > legend { display: flex; gap: var(--space-2); align-items: baseline; }
.lg-rate-row .choice-row { padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-control); }
.rate-deck-help { margin-bottom: var(--space-3); }
.rate-deck.is-deck:focus-visible { border-radius: var(--radius-card); }

.lg-date-form { display: grid; grid-template-columns: minmax(0, 1fr) 160px auto; align-items: end; gap: var(--space-3); }
.lg-date-form .field { margin-bottom: 0; }
@media (max-width: 720px) {
  .lg-date-form { grid-template-columns: minmax(0, 1fr) 120px; }
  .lg-date-form > .btn { grid-column: 1 / -1; }
}
.lg-form-col .claim-form > .btn { margin-top: var(--space-1); }
.lg-form-col input[type="file"] { width: 100%; max-width: 100%; padding: var(--space-2); height: auto; min-height: 44px; font-size: var(--fs-meta); }
.lg-form-col .ask-body { width: 100%; }

/* ---------------------------------------------------------------- eval labelling (owner tool) */

.eval-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.eval-column { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.eval-column-head { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.eval-arm-form, .eval-pick-form { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.eval-arm-btn[aria-pressed="true"], .eval-pick-btn[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent); }
.eval-person-row {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--row-min); padding: var(--space-2) var(--space-4);
}
.eval-person-row + .eval-person-row { border-top: 1px solid var(--line); }
.eval-person-row .avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--sunk); color: var(--text-2); font-size: var(--fs-meta); font-weight: 500;
}
.eval-person-text { flex: 1; min-width: 0; font-weight: 500; }
.eval-person-marked { background: var(--accent-wash); }
.eval-mark { color: var(--accent-text); margin-left: var(--space-1); }
.eval-bio-dot { color: var(--muted); margin-left: var(--space-1); }
.lg-empty-row { color: var(--text-3); }
@media (hover: hover) { .eval-spec-row .pr-id:hover { text-decoration: none; } }
.eval-spec-row-done { background: var(--success-wash); }
.lg-list-col > .section-head { flex-wrap: wrap; }
.section-head > .why[open] { flex-basis: 100%; }

/* ---------------------------------------------------------------- page header: name, then its meta, then actions */

.pagehead.lg-head { grid-template-areas: "crumb crumb" "title act" "meta act"; }
.pagehead.lg-head > .crumb { grid-area: crumb; justify-self: start; }
.pagehead.lg-head > h1 { grid-area: title; }
.pagehead.lg-head > .pagehead-meta { grid-area: meta; }
.pagehead.lg-head > .pagehead-meta + .pagehead-meta { grid-area: auto; grid-column: 1; }
.pagehead.lg-head > .pagehead-act { grid-area: act; align-self: center; }
@media (max-width: 720px) {
  .pagehead.lg-head { grid-template-areas: "crumb" "title" "meta" "act"; }
  .pagehead.lg-head > .pagehead-act { margin-top: var(--space-2); }
}