/* 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.
 *
 * Two pieces. `.authbtn` is the topbar control (a sibling of .accessbtn, styled to
 * match it — portal.css is not edited for this). `.pa` is the panel: a drawer under the
 * topbar, wider than the access drawer because it carries forms and tables, and it
 * scrolls on its own so the reference underneath keeps its place.
 */

/* ---------------------------------------------------------------- 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); }

/* 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; }
}