/* VENDORED .jb-* rule blocks, verbatim, no edits to any rule. Only the section headers below are ours.
   Read-only copy of the JUWEL product design system, refreshed 2026-10-28 and re-checked against its current main branch (no rule has changed). From
     juwel-landing/face-next/css/app.css      (lines cited per block)
     juwel-landing/face-next/css/thread.css   (lines cited per block)
     juwel-landing/assets/bubbly/base.css     (reset + focus + sr-only only)
   Families kept: pills, chips, tag, kicker, note, card--quiet, group, rows, seg, steps, approval, linkbtn.
   Cut on purpose: buttons (the film uses .pf-btn from porcelain.css), toggles, menus, toasts, inputs, receipts.
   Do not edit by hand: re-export from origin/main. */

/* ---- reset + focus + visually-hidden (juwel-landing/assets/bubbly/base.css, same rules) ---- */
*, *::before, *::after { box-sizing: border-box; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible,
.jb-focus:focus-visible,
.jb-focus[data-focus-visible] {
  outline: var(--jb-focus-width) solid var(--jb-focus-ring);
  outline-offset: var(--jb-focus-offset);
}
@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
}
.jb-sr-only {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---- app.css L193-200: link button ---- */
.jb-linkbtn { position: relative; color: var(--jb-violet-text); font: var(--jb-type-callout); font-weight: var(--jb-w-bold); min-block-size: var(--jb-target-min); padding-inline: 2px; text-decoration: none; }
.jb-linkbtn:hover { text-decoration: underline; }
/* G1.5: the visual stays a small text link; the ::after lifts the tap target to 44 (--jb-target). */
.jb-linkbtn::after {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  inline-size: max(100%, var(--jb-target)); block-size: max(100%, var(--jb-target));
  transform: translate(-50%, -50%);
}

/* ---- app.css L203-227: chips + pills + tag + kicker + note ---- */
/* ---- Chips + pills (Chip no approved frame (GAP-17)) ---- */
.jb-chip {
  display: inline-flex; align-items: center; gap: var(--jb-s-4);
  min-block-size: 36px; padding-inline: var(--jb-s-12);
  border-radius: var(--jb-r-full);
  background: var(--jb-surface-2); color: var(--jb-ink-2);
  font: var(--jb-type-callout);
}
button.jb-chip { min-block-size: var(--jb-target); }
.jb-chip--tag { min-block-size: 24px; padding-inline: var(--jb-s-8); background: var(--jb-tint-lilac); color: var(--jb-tint-lilac-ink); font: var(--jb-type-caption); font-weight: var(--jb-w-bold); }
.jb-chip--remembered { background: var(--jb-tint-lilac); color: var(--jb-tint-lilac-ink); }
.jb-chip--file { background: var(--jb-surface); box-shadow: inset 0 0 0 1px var(--jb-line); }
.jb-chips { display: flex; flex-wrap: wrap; gap: var(--jb-s-8); }
.jb-pill { display: inline-flex; align-items: center; gap: var(--jb-s-4); min-block-size: 28px; padding-inline: var(--jb-s-12); border-radius: var(--jb-r-full); font: var(--jb-type-caption); font-weight: var(--jb-w-bold); }
.jb-pill--status { background: var(--jb-surface); color: var(--jb-ink-2); }
.jb-pill--mint { background: var(--jb-tint-mint); color: var(--jb-tint-mint-ink); }
.jb-pill--amber { background: var(--jb-amber-soft); color: var(--jb-amber-ink); min-block-size: var(--jb-target); font: var(--jb-type-callout); font-weight: var(--jb-w-bold); padding-inline: var(--jb-s-16); }
.jb-pill--tint { background: var(--jb-tint-sky); color: var(--jb-tint-sky-ink); margin-block: var(--jb-s-12) var(--jb-s-4); }
.jb-pill--tint[data-tint="lilac"] { background: var(--jb-tint-lilac); color: var(--jb-tint-lilac-ink); }
.jb-tag { display: inline-block; font: var(--jb-type-mono); color: var(--jb-ink-3); margin-block-end: var(--jb-s-4); }
.jb-kicker { font: var(--jb-type-mono); letter-spacing: .08em; color: var(--jb-violet-text); }
.jb-mono { font: var(--jb-type-mono); }
.jb-muted { color: var(--jb-ink-3); font: var(--jb-type-callout); }
.jb-note { font: var(--jb-type-caption); color: var(--jb-ink-3); }
.jb-note[data-tone="receipt"] { display: inline-flex; align-self: center; padding: var(--jb-s-8) var(--jb-s-12); border-radius: var(--jb-r-full); background: var(--jb-surface-2); color: var(--jb-ink-2); }

/* ---- app.css L229-240: cards + group + rows ---- */
/* ---- Cards + groups + rows (Card no approved frame (GAP-26), List row no approved frame (GAP-24)) ---- */
.jb-card { background: var(--jb-surface); border-radius: var(--jb-r-20); box-shadow: var(--jb-e1); padding: var(--jb-s-16); }
.jb-card--quiet { background: var(--jb-surface-2); box-shadow: none; display: grid; gap: var(--jb-s-8); justify-items: start; }
.jb-group { background: var(--jb-surface); border-radius: var(--jb-r-20); box-shadow: inset 0 0 0 1px var(--jb-line); overflow: clip; }
.jb-row { display: flex; align-items: center; gap: var(--jb-s-12); min-block-size: 56px; padding: var(--jb-s-12) var(--jb-s-16); inline-size: 100%; text-align: start; color: inherit; text-decoration: none; }
.jb-row + .jb-row { border-block-start: 1px solid var(--jb-line); }
.jb-row__text { flex: 1; min-inline-size: 0; }
.jb-row__title { font: var(--jb-type-label); }
.jb-row__sub { font: var(--jb-type-caption); color: var(--jb-ink-3); }
.jb-row--danger .jb-row__title { color: var(--jb-error); }
.jb-row--inline { min-block-size: 44px; padding-inline: 0; justify-content: space-between; }
.jb-row__actions { display: flex; flex-wrap: wrap; gap: var(--jb-s-8); margin-block-start: var(--jb-s-12); }

/* ---- app.css L269-272: segmented control ---- */
/* ---- Segmented + inputs ---- */
.jb-seg { display: inline-flex; flex-wrap: wrap; gap: var(--jb-s-4); padding: var(--jb-s-4); border-radius: var(--jb-r-full); background: var(--jb-surface-2); }
.jb-seg__opt { min-block-size: var(--jb-target); min-inline-size: 64px; padding-inline: var(--jb-s-12); border-radius: var(--jb-r-full); font: var(--jb-type-callout); color: var(--jb-ink-2); position: relative; }
.jb-seg__opt[aria-checked="true"] { background: var(--jb-surface); color: var(--jb-ink); font-weight: var(--jb-w-bold); box-shadow: var(--jb-e1); }

/* ---- thread.css L108-116: steps ---- */
/* Steps: text the moment a step arrives, collapsed to one line after done (G3.3) */
.jb-steps { list-style: none; padding: var(--jb-s-4); margin: 0; display: grid; gap: 6px; }
.jb-step { display: flex; align-items: center; gap: var(--jb-s-8); font: var(--jb-type-callout); line-height: 20px; color: var(--jb-ink-2); }
.jb-step .jb-icon { flex: none; }
.jb-step .jb-icon { color: var(--jb-tint-mint-ink); }
.jb-step[data-phase="running"] .jb-icon, .jb-step[data-phase="waiting"] .jb-icon { color: var(--jb-ink-3); }
.jb-steps__summary { display: inline-flex; align-items: center; gap: var(--jb-s-4); min-block-size: var(--jb-target); font: var(--jb-type-callout); color: var(--jb-ink-3); border-radius: var(--jb-r-full); padding-inline: var(--jb-s-4); }
.jb-steps__summary .jb-icon { transition: transform var(--jb-spring-pop-dur) var(--jb-spring-pop); }
.jb-steps__summary[aria-expanded="true"] .jb-icon { transform: rotate(90deg); }

/* ---- thread.css L183-196: approval card ---- */
/* Approval card (K10) */
.jb-approval { display: grid; gap: var(--pf-s16); max-inline-size: 500px; padding: var(--pf-s16); }
.jb-approval__head { display: flex; gap: var(--jb-s-12); align-items: flex-start; }
.jb-approval__well { display: grid; place-items: center; inline-size: 40px; block-size: 40px; flex: none; border-radius: var(--jb-r-12); background: var(--jb-tint-lilac); color: var(--jb-tint-lilac-ink); }
.jb-approval__summary { font: var(--pf-type-label); color: var(--pf-ink); }
.jb-approval__scope { font: var(--pf-type-caption); color: var(--pf-ink-2); margin-block-start: 2px; }
/* FABLE A3: Approve and Cancel are the same box (equal share of the row, at least the 44 px target): neither is made easier to hit than the other. No autofocus, no pulse on the expiry. */
.jb-approval__actions { display: flex; gap: var(--jb-s-8); flex-wrap: wrap; }
.jb-approval__actions .pf-btn { flex: 1 1 0; min-block-size: var(--pf-target); min-inline-size: var(--pf-target); }
.jb-approval__status { font: var(--pf-type-caption); color: var(--pf-ink-2); }
.jb-approval__status:focus:not(:focus-visible) { outline: none; } /* focus lands here after a decision (r2 #105) */
.jb-approval__status[data-tone="done"] { color: var(--jb-tint-mint-ink); font-weight: var(--jb-w-bold); }
.jb-approval__status[data-tone="unknown"] { color: var(--jb-amber-ink); }
.jb-approval__foot { font: var(--pf-type-caption); color: var(--pf-ink-2); }

/* ---- thread.css L207-220: approval payload (details, fields, body, more) ---- */
/* V11-05: the payload being approved (recipients + message preview), plain text. */
.jb-approval__details { display: grid; gap: var(--jb-s-8); padding: var(--jb-s-12); border-radius: var(--jb-r-12); background: var(--jb-tint-lilac); min-inline-size: 0; }
.jb-approval__fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px var(--jb-s-8); margin: 0; font: var(--jb-type-caption); }
.jb-approval__fields dt { color: var(--jb-ink-3); }
.jb-approval__fields dd { margin: 0; color: var(--jb-ink-2); overflow-wrap: anywhere; }
.jb-approval__body { font: var(--jb-type-callout); color: var(--jb-ink-2); white-space: pre-wrap; overflow-wrap: anywhere; max-block-size: 40vh; overflow: auto; }
.jb-approval__more { position: relative; justify-self: start; padding: 0; border: 0; background: none; font: var(--jb-type-caption); color: var(--jb-tint-lilac-ink); text-decoration: underline; cursor: pointer; }
/* G1.5: bare text toggle; ::after lifts the tap target to 44 (--jb-target) without changing the card. */
.jb-approval__more::after {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  inline-size: max(100%, var(--jb-target)); block-size: max(100%, var(--jb-target));
  transform: translate(-50%, -50%);
}
.jb-approval__more:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }