/* app.css — jadeid product CSS.
 *
 * ⚠️ PRODUCT-SPECIFIC LAYOUT ONLY. tokens.css and hj-ui.css are vendored from
 * the theme kit at deploy time and are already loaded when this file runs, so
 * every color, size, radius and font here is a var(--hj-*) and every component
 * — panel, button, field, label, hint, error, chip, kv list, wordmark — is an
 * hj- class. Nothing below re-declares one.
 *
 * STANDING RULE (jadeworks): new styling goes INTO the kit, not into a product,
 * so every service inherits it. If something here starts looking like a
 * component the estate would want, move it to theme/src/kit/css/hj-ui.css.
 *
 * 🔴 NO RAW HEX. Not one value in this file is a literal color.
 *
 * ── PRODUCT-SPECIFIC CSS RULES IN THIS FILE: 24 ──────────────────────────────
 * (the kit carries the rest — campaign is at 12, jadeops at ~20). Print this
 * count at deploy the way campaign/deploy.sh:41-42 and code/deploy.sh:73 do:
 *
 *     grep -cE '^[^@/ ][^{]*\{' web/app.css
 *
 * If it climbs, the product is growing its own buttons and the fix is the kit,
 * not another rule here.
 */

/* [hidden] must win. Every panel below sets display:flex or display:grid, and
 * a display declaration beats the UA's [hidden]{display:none} on specificity —
 * so a "hidden" section renders anyway. This one rule is why show()/hide()
 * works at all. */
[hidden]{ display:none !important }

/* ---- page frame ---------------------------------------------------------- */
.pg{
  min-height:100%;
  display:flex; justify-content:center;
  padding:var(--hj-space-8) var(--hj-space-4);
}
.card{
  width:100%; max-width:27rem;
  align-self:center;
}
.console{
  width:100%; max-width:46rem;
  display:flex; flex-direction:column; gap:var(--hj-space-4);
}
.sect{ margin:0 }
.mt0{ margin-top:0 }
.row{
  display:flex; flex-wrap:wrap; gap:var(--hj-space-1);
  margin:var(--hj-space-2) 0;
}
/* The kit has .hj-error for failure and .hj-hint for neutral, but nothing for
 * "this worked" — and an InvalidStateError is success-adjacent, so rendering it
 * red would be a lie. Kit candidate. */
.msg-ok{
  color:var(--hj-semantic-brand-bright);
  font-size:var(--hj-font-size-caption);
  margin-top:var(--hj-space-3);
  border-left:2px solid var(--hj-semantic-brand-bright);
  padding-left:var(--hj-space-2);
}
.summary{
  cursor:pointer; color:var(--hj-semantic-link);
  font-size:var(--hj-font-size-caption);
}
.hj-chip.is-static{ cursor:default }

/* ---- credential / session rows ------------------------------------------- */
.list{ list-style:none; margin:var(--hj-space-3) 0 0; padding:0 }
.item{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--hj-space-3); padding:var(--hj-space-2) 0;
  border-bottom:1px solid var(--hj-line-soft);
}
/* min-width:0 is what stops a long label pushing the row wider than the panel
 * — the flex-item default of min-width:auto refuses to shrink below content,
 * and that is the usual cause of horizontal page scroll. */
.item__main{ min-width:0; overflow-wrap:anywhere }
.item__title{ font-weight:var(--hj-font-weight-medium) }
.item__meta{ color:var(--hj-muted); font-size:var(--hj-font-size-caption) }

/* ---- recovery codes ------------------------------------------------------ */
.codes{
  display:grid; gap:var(--hj-space-2);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  list-style:none; margin:var(--hj-space-3) 0 0; padding:0;
}
.code{
  padding:var(--hj-space-1) var(--hj-space-2);
  background:var(--hj-semantic-bg-page);
  border:1px solid var(--hj-line-soft); border-radius:var(--hj-radius-sm);
  font-size:var(--hj-font-size-caption); overflow-wrap:anywhere;
}

/* ---- app launcher -------------------------------------------------------- */
/* min(100%, 15rem) rather than a bare 15rem: at 360px the bare form makes a
 * track wider than the viewport and the whole page scrolls sideways. */
.apps{
  display:grid; gap:var(--hj-space-3);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  margin-top:var(--hj-space-3);
}
.app{
  display:flex; flex-direction:column; gap:2px;
  padding:var(--hj-space-3);
  background:var(--hj-semantic-bg-page);
  border:1px solid var(--hj-line); border-radius:var(--hj-radius-md);
  color:var(--hj-semantic-text-primary); text-decoration:none;
  min-width:0; overflow-wrap:anywhere;
}
.app:hover, .app:focus-visible{ border-color:var(--hj-semantic-brand-accent) }
.app.is-locked{ opacity:.62 }
.app__name{ font-weight:var(--hj-font-weight-medium) }
.app__host{ color:var(--hj-muted); font-size:var(--hj-font-size-caption) }
.app__gate{ color:var(--hj-semantic-brand-accent); font-size:var(--hj-font-size-caption) }

/* admin console — layout only; every color and size comes from the kit */
.adm { max-width: 60rem; margin: 2rem auto; }
.adm-head { display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1.5rem; }
.adm-sec { margin-top: 2rem; }