/* ==========================================================================
   THEME: FRAME
   The scannable list. Used for the module ledger and the jobs index.
   Requires 01-tokens.css and 02-base.css
   ========================================================================== */

.frames{ margin:0; }

/* --------------------------------------------------------------------------
   ROW
   The left edge is a status signal, not decoration:
     default        → azure   → verified / good to go
     .is-attention  → gold    → needs your attention
     .is-info       → grey    → informational only
   -------------------------------------------------------------------------- */
.frame{ border-bottom:1px solid var(--line-soft); }

.frame__hd{
  padding:24px 4px; display:flex; justify-content:space-between;
  align-items:flex-start; gap:22px; cursor:pointer; flex-wrap:wrap;
}
.frame__hd:hover .frame__t{ color:var(--accent); }

.frame__t{
  font-family:var(--font-display); font-size:20px; font-weight:600;
  color:var(--tx); letter-spacing:-0.02em; transition:color .13s ease;
}
.frame__sub{ font-size:15px; color:var(--tx-3); margin-top:4px; }

.frame__right{ display:flex; align-items:center; gap:20px; flex:none; }
.frame__meta{ text-align:right; }
.frame__id{ font-size:14.5px; color:var(--tx-3); }
.frame__flag{ font-size:13px; font-weight:600; color:var(--accent); margin-top:2px; }
.frame.is-attention .frame__flag{ color:var(--gold); }
.frame.is-info .frame__flag{ color:var(--tx-3); }

@media(max-width:640px){
  .frame__right{ width:100%; justify-content:space-between; }
  .frame__meta{ text-align:left; }
}

/* Disclosure caret */
.caret{
  width:9px; height:9px; flex:none; margin-top:6px;
  border-right:2px solid var(--tx-3); border-bottom:2px solid var(--tx-3);
  transform:rotate(45deg); transition:transform .18s ease;
}
.frame.is-open .caret{ transform:rotate(-135deg); }

/* Expanded body */
.frame__body{ display:none; padding:0 4px 30px; }
.frame.is-open .frame__body{ display:block; }
.frame__foot{ margin-top:16px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.frame__hint{ font-size:14px; color:var(--tx-3); }

/* --------------------------------------------------------------------------
   BADGES — shown on the closed row so the list is scannable without opening
   Used for programming language and build style.
   -------------------------------------------------------------------------- */
.badge{
  display:inline-block; font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.06em; text-transform:uppercase;
  padding:3px 8px; border-radius:4px;
  border:1px solid var(--line); color:var(--tx-3); white-space:nowrap;
}

/* Build style — how much you can trust it to survive the next update.
   Class names must match the data values exactly, casing included. */
.badge--Professional{ border-color:var(--accent); color:var(--accent); }
.badge--Hobby{ border-color:var(--gold); color:var(--gold); }
.badge--Entry{ border-color:var(--line); color:var(--tx-3); }
.badge--Vibe{ border-color:var(--line-soft); color:var(--tx-3); opacity:.75; }

.frame__badges{ display:inline-flex; gap:7px; margin-left:11px; flex-wrap:wrap; vertical-align:middle; }

/* --------------------------------------------------------------------------
   CONTROLS BAR
   -------------------------------------------------------------------------- */
.controls{
  display:flex; gap:9px; flex-wrap:wrap; align-items:center;
  padding-bottom:20px; border-bottom:1px solid var(--line);
}
.controls .input{ flex:1 1 220px; min-width:170px; }
.controls .count{ font-size:14px; color:var(--tx-3); margin-left:auto; }

.select{
  font-family:var(--font-body); font-size:14px; color:var(--tx-3);
  background:var(--bg); border:1px solid var(--line); border-radius:8px;
  padding:10px 12px; outline:none; cursor:pointer;
}
.select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

/* --------------------------------------------------------------------------
   PAGE HEAD for list pages
   -------------------------------------------------------------------------- */
.phead{ padding:62px 0 40px; }
.phead h1{ margin-top:15px; }
.phead__sub{ font-size:18px; color:var(--tx-3); max-width:58ch; margin-top:17px; }
.phead .stats{ margin-top:32px; }
@media(max-width:640px){ .phead{ padding:42px 0 30px; } }

/* --------------------------------------------------------------------------
   LEGEND — explains what the flags and styles mean.
   Worth keeping on any list that uses coded colour.
   -------------------------------------------------------------------------- */
.legend{ border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2); padding:4px 22px; }
.legend__row{ padding:14px 0; border-bottom:1px solid var(--line-soft); display:flex; gap:16px; align-items:baseline; flex-wrap:wrap; }
.legend__row:last-child{ border-bottom:none; }
.legend__k{ font-size:13.5px; font-weight:600; color:var(--tx); width:110px; flex:none; }
.legend__d{ font-size:15px; line-height:1.6; color:var(--tx-3); flex:1; min-width:220px; }