/* JENNi Partner API portal — the signed-in area (JEN-274).
 *
 * Same rule as portal.css: every colour, radius, shadow, spacing step, font and easing
 * below comes from assets/brand/jenni-tokens.css. Nothing here invents a value, and
 * the three theme states resolve through the token file, not through this one.
 *
 * `.authbtn` opens the public authentication view. A successful sign-in replaces it
 * with the responsive full-page account workspace defined at the end of this file.
 */

/* ---------------------------------------------------------------- topbar control */

.authbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-button);
  background: transparent;
  color: hsl(var(--foreground));
  font: inherit;
  font-size: var(--scale-sm);
  cursor: pointer;
  transition: background var(--motion-quick) var(--ease-jenni),
              border-color var(--motion-quick) var(--ease-jenni);
}
.authbtn:hover { background: var(--alpha-blue-08); border-color: var(--brand-blue); }
.authbtn[aria-expanded='true'] { border-color: var(--brand-blue); }
.authbtn[data-state='out'] { border-color: var(--brand-blue); color: var(--brand-blue); }
.authbtn__label { font-weight: 600; white-space: nowrap; }
.authbtn__state {
  font-family: var(--mono);
  font-size: var(--scale-xs);
  letter-spacing: var(--tracking-mono);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--alpha-blue-15);
  color: var(--brand-blue);
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.authbtn__state[hidden] { display: none; }
/* `hidden` must win over the display rule above: on a plain static host (config.js
 * sets no JENNI_PORTAL_API) portal-auth.js leaves the toggle hidden, and an
 * author `display` would otherwise put "Sign in / Sign up" on a page with nothing
 * to sign in to. */
.authbtn[hidden] { display: none; }

/* ------------------------------------------------------------------------ panel */

.pa {
  position: fixed;
  top: 61px;
  right: var(--space-3);
  z-index: 16;
  width: 560px;
  max-width: calc(100vw - 2 * var(--space-2));
  max-height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  background: hsl(var(--background));
  box-shadow: var(--e3);
}
.pa[hidden] { display: none; }

.pa__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 8px var(--space-2);
  border-bottom: 1px solid hsl(var(--border));
}
.pa__barlabel {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.pa__close {
  width: 28px;
  height: 28px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-button);
  background: transparent;
  color: hsl(var(--foreground));
  font: inherit;
  font-size: var(--scale-body);
  line-height: 1;
  cursor: pointer;
}
.pa__close:hover { background: var(--alpha-blue-08); border-color: var(--brand-blue); }

.pa__body {
  overflow-y: auto;
  padding: var(--space-2) var(--space-2) var(--space-3);
}

.pa__title { margin: 0 0 4px; font-size: var(--scale-h4); letter-spacing: var(--tracking-tight); }
.pa__lede  { margin: 0 0 var(--space-2); font-size: var(--scale-sm); opacity: 0.75; line-height: 1.45; }
.pa__h3    { margin: 4px 0 8px; font-size: var(--scale-body); font-weight: 700; }

.pa__homehead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}
.pa__actions { display: flex; gap: 6px; flex: none; }

/* ------------------------------------------------------------------------ forms */

.pa__form { display: grid; gap: 10px; }

.pa__field { display: grid; gap: 4px; font-size: var(--scale-sm); }
.pa__field > span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.pa__field input,
.pa__field select,
.pa__field textarea {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-button);
  background: hsl(var(--card));
  color: inherit;
  font: inherit;
  font-size: var(--scale-sm);
}
.pa__field input[type='password'],
.pa__field input[inputmode='numeric'] { font-family: var(--mono); letter-spacing: var(--tracking-mono); }
.pa__field textarea { resize: vertical; min-height: 64px; }
.pa__field input:focus-visible,
.pa__field select:focus-visible,
.pa__field textarea:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 1px; }
.pa__field input:disabled,
.pa__field select:disabled,
.pa__field textarea:disabled { opacity: 0.55; }

.pa__set { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; border: 0; }
.pa__set legend {
  width: 100%;
  padding: 0;
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.pa__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-pill);
  font-family: var(--mono);
  font-size: var(--scale-xs);
  letter-spacing: var(--tracking-mono);
  cursor: pointer;
}
.pa__chip:hover { background: var(--alpha-blue-08); }
.pa__chip input { accent-color: var(--brand-blue); margin: 0; }

.pa__btn {
  padding: 8px 14px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-button);
  background: transparent;
  color: hsl(var(--foreground));
  font: inherit;
  font-size: var(--scale-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--motion-quick) var(--ease-jenni),
              border-color var(--motion-quick) var(--ease-jenni);
}
.pa__btn:hover { background: var(--alpha-blue-08); border-color: var(--brand-blue); }
.pa__btn:disabled { opacity: 0.55; cursor: progress; }
.pa__btn--primary {
  border-color: var(--brand-blue);
  background: var(--brand-blue);
  color: var(--brand-white);
}
.pa__btn--primary:hover { background: var(--brand-blue); opacity: 0.9; }
.pa__btn--sm { padding: 5px 10px; font-size: var(--scale-xs); }

.pa__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-blue);
  font: inherit;
  font-size: var(--scale-xs);
  cursor: pointer;
}
.pa__link:hover { text-decoration: underline; }
.pa__alt { margin: var(--space-2) 0 0; font-size: var(--scale-xs); opacity: 0.85; }

/* --------------------------------------------------------------------- notices */

.pa__notice {
  margin: 0 0 var(--space-1);
  padding: 7px 10px;
  border-left: 3px solid var(--brand-blue);
  border-radius: var(--radius-button);
  background: var(--alpha-navy-04);
  font-size: var(--scale-xs);
  line-height: 1.4;
}
.pa__notice--ok    { border-left-color: var(--success); }
.pa__notice--error { border-left-color: var(--danger); }
.pa__notice--info  { border-left-color: var(--warning); }

/* ------------------------------------------------------------------------ cards */

.pa__card {
  margin-top: var(--space-2);
  padding: var(--space-1) 12px 12px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  background: hsl(var(--card));
}
.pa__cardhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pa__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  margin: 4px 0 6px;
  font-weight: 400;
}
.pa__empty { margin: 4px 0 0; font-size: var(--scale-sm); opacity: 0.7; }
.pa__hint  { margin: 6px 0 0; font-size: var(--scale-xs); line-height: 1.35; opacity: 0.65; }
.pa__hint code, .pa__dl code, .pa__table code, .pa__grantmeta code {
  font-family: var(--mono); font-size: inherit; letter-spacing: var(--tracking-mono);
}

.pa__pills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.pa__pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-family: var(--mono);
  font-size: var(--scale-xs);
  letter-spacing: var(--tracking-mono);
  background: var(--alpha-navy-04);
  color: hsl(var(--muted-foreground));
  /* Long status copy ("Inactive — awaiting activation by JENNi") wraps inside a
   * 300px card rather than clipping — nowrap here cost 79px at 375px (gate 1, D3). */
  overflow-wrap: anywhere;
}
.pa__pill--ok   { background: var(--alpha-blue-15); color: var(--brand-blue); }
.pa__pill--info { background: var(--alpha-blue-08); color: var(--brand-blue); }
.pa__pill--warn { border: 1px solid var(--warning); color: hsl(var(--foreground)); }

.pa__dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0; font-size: var(--scale-sm); }
.pa__dl dt { color: hsl(var(--muted-foreground)); }
.pa__dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.pa__tablewrap { overflow-x: auto; }
.pa__table { width: 100%; border-collapse: collapse; font-size: var(--scale-xs); }
.pa__table th, .pa__table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid hsl(var(--border));
  vertical-align: top;
}
.pa__table th {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  font-weight: 400;
}

.pa__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pa__grant, .pa__req {
  padding: 8px 10px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-button);
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Meta, pill and the Claim button sit on one line where they fit and wrap onto a
 * second where they do not: at 375px an unwrapped row measured 374px inside a 341px
 * body and pushed Claim key off the panel (gate 1, D2). */
.pa__grantrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pa__grantmeta { flex: 1 1 160px; min-width: 0; font-size: var(--scale-sm); }
.pa__grantmeta strong { margin-right: 6px; }
.pa__grantmeta small { display: block; font-size: var(--scale-xs); opacity: 0.65; margin-top: 2px; }
.pa__decision { margin: 6px 0 0; font-size: var(--scale-xs); line-height: 1.4; }

/* ---------------------------------------------------------------- one-time secret */

.pa__secret {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--brand-blue);
  border-radius: var(--radius-md);
  background: var(--alpha-blue-08);
}
.pa__secret-title { margin: 0 0 4px; font-weight: 700; font-size: var(--scale-sm); }
.pa__secret-warn  { margin: 0 0 8px; font-size: var(--scale-xs); line-height: 1.4; }
.pa__secret-row   { display: flex; gap: 6px; align-items: stretch; }
.pa__secret-value {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-button);
  background: hsl(var(--card));
  font-family: var(--mono);
  font-size: var(--scale-xs);
  letter-spacing: var(--tracking-mono);
  overflow-wrap: anywhere;
  user-select: all;
}
.pa__secret .pa__btn { margin-top: 8px; }
.pa__secret-row .pa__btn { margin-top: 0; }


/* ------------------------------------------------------------------ tabs (u3) */
/* Five sibling sections, one shown; the switch is `el.hidden`, the bar is a tablist.
 * The bar wraps rather than scrolls so the panel never grows wider than the viewport
 * at 400px — the probe measures document scrollWidth against innerWidth per tab. */

.pa__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 var(--space-2);
  padding-bottom: 6px;
  border-bottom: 1px solid hsl(var(--border));
}
.pa__tabbtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  background: transparent;
  color: hsl(var(--muted-foreground));
  font: inherit;
  font-size: var(--scale-sm);
  font-weight: 600;
  cursor: pointer;
}
.pa__tabbtn:hover { background: var(--alpha-blue-08); color: hsl(var(--foreground)); }
.pa__tabbtn[aria-selected='true'] { background: var(--alpha-blue-15); color: var(--brand-blue); border-color: var(--alpha-blue-15); }
.pa__tabbtn:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 1px; }
.pa__badge {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  font-size: var(--scale-xs);
  font-weight: 700;
  text-align: center;
  line-height: 16px;
}
.pa__tab[hidden] { display: none; }
.pa__count { font-size: var(--scale-xs); font-weight: 500; opacity: 0.65; margin-left: 6px; }
.pa__next { margin: 6px 0 0; font-size: var(--scale-sm); }

/* Overview → Retailers card (T-2026-0916-016): the looked-up / registered retailer. */
.pa__rt { margin-top: 10px; padding-top: 10px; border-top: 1px solid hsl(var(--border)); }
.pa__rt .pa__pills { margin-bottom: 6px; }

/* health card */
.pa__healthgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pa__health {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  background: hsl(var(--card));
}
.pa__health[data-health-error] { border-color: var(--warning); }
.pa__health-title { margin: 0 0 4px; font-size: var(--scale-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.8; }
.pa__health-num { margin: 0; font-size: var(--scale-sm); }
.pa__health-num strong { font-size: var(--scale-body); }
.pa__health .pa__pills { margin-bottom: 4px; }

/* keys table */
.pa__keyname { display: block; font-size: var(--scale-sm); }
.pa__keyid { display: block; }
.pa__table small { display: block; opacity: 0.65; }
.pa__rowactions { white-space: nowrap; text-align: right; }
.pa__rowactions .pa__btn { margin: 1px 0; }
.pa__btn--danger { border-color: var(--danger); color: var(--danger); }
.pa__btn--danger:hover { background: transparent; border-color: var(--danger); opacity: 0.85; }
.pa__confirmrow td { background: var(--alpha-blue-08); }
.pa__confirm-title { margin: 0; font-size: var(--scale-sm); }
.pa__form--inline { padding: 6px 2px; }
.pa__form--inline .pa__actions { flex-wrap: wrap; }
.pa__form--create { margin: 8px 0 10px; padding: 10px 12px; border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); background: hsl(var(--card)); }

/* curl / response blocks: wrap, never widen the panel */
.pa__curl {
  margin: 6px 0 0;
  padding: 8px 10px;
  max-width: 100%;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-button);
  background: hsl(var(--card));
  font-family: var(--mono);
  font-size: var(--scale-xs);
  letter-spacing: var(--tracking-mono);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-all;
}
.pa__resp { margin-top: 6px; font-size: var(--scale-xs); }
.pa__resp summary { cursor: pointer; opacity: 0.75; }
.pa__resp .pa__curl { max-height: 220px; overflow: auto; }

/* quickstart steps */
.pa__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pa__step {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  background: hsl(var(--card));
}
.pa__step[data-state='ok'] { border-color: var(--success); }
.pa__step[data-state='fail'] { border-color: var(--danger); }
.pa__step[data-state='running'] { border-color: var(--brand-blue); }
.pa__stephead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--scale-sm); }
.pa__stepnum {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--alpha-blue-15);
  color: var(--brand-blue);
  font-size: var(--scale-xs);
  font-weight: 700;
}
.pa__step[data-state='ok'] .pa__stepnum { background: var(--success); color: #fff; }
.pa__step[data-state='fail'] .pa__stepnum { background: var(--danger); color: #fff; }
.pa__steps-inline { margin: 4px 0 0; padding-left: 18px; font-size: var(--scale-sm); line-height: 1.45; }
.pa__steps-inline li { margin-bottom: 4px; }
.pa__form--qs .pa__actions { flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  /* Same rule as .accessbtn in portal.css: one row, two ends, and the brand text on the
   * left must never sit under the controls. The control keeps its STATE only — the
   * signed-in email, or a two-word "Sign in" — because at 375px the full label put the
   * button under the brand link and the click landed on the brand (gate 1, D1). It
   * starts at 1000px, not 860px: between 861 and ~960px the two-column layout still
   * shows the version chips, and "Your account" + a 30-character email pushed the row
   * out of its column into the brand's. */
  .authbtn { padding: 0 10px; gap: 0; }
  .authbtn__label { display: none; }
  .authbtn[data-state='out']::before { content: 'Sign in'; font-weight: 600; white-space: nowrap; }
  .authbtn__state { max-width: 140px; }
}

@media (max-width: 860px) {
  .authbtn__state { max-width: 96px; }
  .pa { right: var(--space-1); }
}

@media (max-width: 520px) {
  /* Below ~520px the topbar row cannot hold a third control at all: at 375px the
   * JEN-270 access button (131px) + the theme button (34px) + the row's own gaps and
   * padding leave 22px between the brand link (ends at x=136) and the controls, so
   * even an icon-only toggle would sit under the brand (gate 1, D1). The control leaves
   * the row and sits under it at the right edge, over the empty right half of the
   * reference's mobile header; the panel opens below it instead of over it. */
  .authbtn {
    position: fixed;
    top: 61px;
    right: var(--space-1);
    z-index: 15;
    height: 30px;
    background: hsl(var(--background));
    box-shadow: var(--e1);
  }
  .authbtn__state { max-width: 160px; }
  .pa { top: 99px; max-height: calc(100vh - 108px); }
  .pa__dl { grid-template-columns: 1fr; }
  .pa__healthgrid { grid-template-columns: 1fr; }
  .pa__tabbtn { padding: 5px 8px; }
  /* The keys table has six columns; at phone width each row becomes a two-column card
   * (probe: a 478px table inside a 400px panel put the status pill one letter per line). */
  .pa__table[data-keys-table] thead { display: none; }
  .pa__table[data-keys-table], .pa__table[data-keys-table] tbody { display: block; }
  .pa__table[data-keys-table] tr[data-key-row] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 10px;
    padding: 8px 0;
    border-bottom: 1px solid hsl(var(--border));
  }
  .pa__table[data-keys-table] tr[data-key-row] td { display: block; padding: 0; border: 0; min-width: 0; }
  .pa__table[data-keys-table] tr[data-key-row] td:first-child,
  .pa__table[data-keys-table] tr[data-key-row] td:nth-child(5),
  .pa__table[data-keys-table] tr[data-key-row] td.pa__rowactions { grid-column: 1 / -1; }
  .pa__table[data-keys-table] tr[data-key-row] td:nth-child(3)::before { content: 'created '; opacity: 0.6; }
  .pa__table[data-keys-table] tr[data-key-row] td:nth-child(4)::before { content: 'last used '; opacity: 0.6; }
  .pa__table[data-keys-table] .pa__rowactions { text-align: left; }
  .pa__table[data-keys-table] tr.pa__confirmrow { display: block; }
  .pa__table[data-keys-table] tr.pa__confirmrow td { display: block; }
}

/* JEN-462 account workspace: once authenticated this is a full page, not a drawer. */
.pa.pa--workspace {
  inset: 0;
  z-index: 30;
  width: 100vw;
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: auto;
}
.account-shell { min-height: 100vh; background: hsl(var(--background)); color: hsl(var(--foreground)); }
.account-header {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  min-height: 88px; padding: var(--space-2) clamp(var(--space-2), 4vw, var(--space-4));
  border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--background));
}
.account-header h1, .account-header p, .account-pagehead h2 { margin: 0; }
.account-header > div:last-child { display: flex; gap: var(--space-1); }
.eyebrow { margin: 0 0 4px; color: hsl(var(--muted-foreground)); font: 600 var(--scale-xs)/1.2 var(--mono); text-transform: uppercase; letter-spacing: var(--tracking-mono); }
.account-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: calc(100vh - 89px); }
.account-nav { position: sticky; top: 89px; align-self: start; display: grid; padding: var(--space-2); max-height: calc(100vh - 89px); overflow: auto; border-right: 1px solid hsl(var(--border)); }
.account-nav a { padding: 9px 12px; border-radius: var(--radius-button); color: inherit; text-decoration: none; font-size: var(--scale-sm); }
.account-nav a:hover { background: var(--alpha-blue-08); }
.account-nav a[aria-current='page'] { background: var(--alpha-blue-15); color: var(--brand-blue); font-weight: 700; }
.account-main { min-width: 0; padding: clamp(var(--space-2), 4vw, var(--space-4)); }
.account-main:focus { outline: 0; }
.account-pagehead { display: flex; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--space-2); }
.account-grid--profiles { margin-top: var(--space-2); }
.account-card, .account-state, .account-toolbar, .account-summary, .account-secret {
  min-width: 0; padding: var(--space-2); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); background: hsl(var(--card));
}
.account-card--wide, .account-toolbar, .account-summary, .account-secret { margin-bottom: var(--space-2); }
.account-card h3 { margin: 8px 0; }
.account-card dl { display: grid; gap: 8px; margin: 0; }
.account-card dl > div { min-width: 0; display: grid; grid-template-columns: minmax(110px, .35fr) 1fr; gap: var(--space-1); border-bottom: 1px solid hsl(var(--border)); padding-bottom: 6px; }
.account-card dt { color: hsl(var(--muted-foreground)); text-transform: capitalize; }
.account-card dd { margin: 0; min-width: 0; }
.account-card ul { margin: 0; padding-left: 18px; }
.account-value, .account-card code { overflow-wrap: anywhere; word-break: break-word; }
.account-status { display: inline-flex; padding: 3px 8px; border-radius: var(--radius-pill); background: hsl(var(--muted)); font: var(--scale-xs)/1 var(--mono); }
.account-status--implemented { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.account-status--partial, .account-status--blocked_authority { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.account-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.account-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.account-toolbar p { margin: 0; flex: 1 1 320px; }
.account-state { max-width: 760px; }
.account-state[data-state='loading'] { border-style: dashed; }
.account-state[data-state='error'], .account-state[data-state='denied'] { border-color: var(--danger); }
.account-state[data-state='feature-off'], .account-state[data-state='not-configured'] { border-color: var(--warning); }
.account-muted { color: hsl(var(--muted-foreground)); }
.account-secret { border-color: var(--warning); }
.account-secret code { display: block; margin: 8px 0; padding: 10px; overflow-wrap: anywhere; background: hsl(var(--background)); }
.account-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.account-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-top: var(--space-2); }
.account-pagination button, .account-actions button, .account-actions a, .account-toolbar button, .account-header button {
  min-height: 44px; max-width: 100%; overflow-wrap: anywhere;
}
.account-notice { margin: 0; padding: 8px 12px; border-radius: var(--radius-button); background: var(--alpha-blue-08); }
.account-notice--error { color: var(--danger); }
.account-auth { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: var(--space-2); overflow: auto; background: hsl(var(--background)); }
.account-auth__card { width: min(480px, 100%); padding: var(--space-3); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); background: hsl(var(--card)); box-shadow: var(--e3); }
.account-auth__card form { display: grid; gap: 12px; }
.account-auth__card label { display: grid; gap: 4px; }
.account-auth__card input { width: 100%; padding: 10px; border: 1px solid hsl(var(--border)); border-radius: var(--radius-button); background: hsl(var(--background)); color: inherit; }
.account-auth__card nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-2); }
.account-auth__card nav button { border: 0; background: transparent; color: var(--brand-blue); cursor: pointer; }
/* JEN-500 sign-up org step: create an organization, or join one by invite. */
.account-orgchoice { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.account-orgchoice legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
.account-auth__card .account-orgchoice__option { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid hsl(var(--border)); border-radius: var(--radius-button); cursor: pointer; }
.account-auth__card .account-orgchoice__option:has(input:checked) { border-color: var(--brand-blue); background: var(--alpha-blue-08); }
.account-auth__card .account-orgchoice input { flex: none; width: auto; margin: 3px 0 0; padding: 0; accent-color: var(--brand-blue); }
.account-orgchoice__option span { display: grid; gap: 2px; min-width: 0; }
.account-orgchoice__option small, .account-hint { color: hsl(var(--muted-foreground)); }
.account-hint { margin: 0; font-size: var(--scale-sm); }

@media (max-width: 760px) {
  .pa.pa--workspace { top: 0; max-height: none; }
  .account-header { position: static; align-items: flex-start; }
  .account-layout { grid-template-columns: 1fr; }
  .account-nav { position: static; display: flex; flex-wrap: wrap; overflow: visible; max-height: none; border-right: 0; border-bottom: 1px solid hsl(var(--border)); padding: var(--space-1); }
  .account-nav a { flex: none; min-height: 44px; display: inline-flex; align-items: center; }
  .account-main { padding: var(--space-2); }
  .account-pagehead, .account-header { flex-direction: column; }
  .account-card dl > div { grid-template-columns: 1fr; }
}