/* Bleed's own page: saved chats on the left, the chat in the middle, the chat's sources on
   the right; the settings are a centred dialog (the last block of this file). The page
   loads after app.css and app.js, and borrows el(), api(), icon() and the theme from them.

   One system (6 Oct, the polish pass). Colour is app.css §0 only (the Gallery palette:
   paper, ink, one oxblood accent), so light and dark are a token swap. Everything else is
   the scale below; a value that is not on it does not belong in this file.

     space    4 · 8 · 12 · 16 · 20 · 24 · 32 · 40            (--b-1 … --b-10)
     type     display-xl / -l / -m (Cormorant 500), body 15.5/1.7, ui 13.5/1.35,
              small 12.5/1.5, meta 11.5/1.4, label 10.5 caps +.16em (Inter)
     radii    6 control-in-a-row (--r-sm) · 8 row (--b-r-row) · 10 control (--r) ·
              14 card (--r-lg) · 18 composer, dialog (--r-xl) · 999 tag
     lines    1px --rule between things, 1px --rule2 around a control; fills only for state
     depth    none at rest; --shadow-2 for a menu, --shadow-3 for the dialog
     icons    16px in rows and tools, 14px in dense meta, 12px as a glyph; stroke 1.6
     heights  36 row · 32 control · 40 field · 56 top bar
     states   hover = a 5% ink fill · selected = an 8% ink fill, heavier ink and the
              oxblood marker · keyboard focus = a 2px oxblood ring (inside a row, outside
              a control). The three never share a look.
     motion   .16s state · .28s reveal · .5s arrival, all on --ease; none when the
              device asks for reduced motion */
:root {
  --b-1: 4px; --b-2: 8px; --b-3: 12px; --b-4: 16px; --b-5: 20px; --b-6: 24px; --b-8: 32px; --b-10: 40px;
  --b-display-xl: 500 clamp(32px, 3.2vw, 46px)/1.1 var(--display);
  --b-display-l: 500 30px/1.1 var(--display);
  --b-display-m: 500 22px/1.2 var(--display);
  --b-body: 400 15.5px/1.7 var(--text);
  --b-ui: 400 13.5px/1.35 var(--text);
  --b-ui-strong: 600 13.5px/1.35 var(--text);
  --b-small: 400 12.5px/1.5 var(--text);
  --b-meta: 500 11.5px/1.4 var(--text);
  --b-label: 600 10.5px/1.2 var(--text);
  --b-track: .16em;
  --b-r-row: 8px;
  --b-row: 36px; --b-ctl: 32px; --b-field: 40px; --b-top: 56px;
  --b-icon: 16px; --b-icon-s: 14px; --b-glyph: 12px; --b-stroke: 1.6;
  --b-hover: color-mix(in srgb, var(--ink) 5%, transparent);
  --b-selected: color-mix(in srgb, var(--ink) 8%, transparent);
  --b-ring: var(--gold);
  --b-fast: .16s; --b-med: .28s; --b-slow: .5s;
  --b-side: clamp(264px, 19vw, 300px);
  --b-measure: 744px;
}

body.jbot-only.jbot-ready #app, body.jbot-only.jbot-ready #login { display: none !important; }
body.jbot-only.jbot-ready { background: var(--bg); overflow: hidden; }
.jp { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: var(--b-side) minmax(0, 1fr); background: var(--bg); color: var(--ink); font: 15px/1.6 var(--text); animation: jp-fade var(--b-med) ease-out both; }
.jp.rail-open { grid-template-columns: var(--b-side) minmax(0, 1fr) clamp(280px, 22vw, 340px); }
@keyframes jp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes jp-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes jp-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- shared: icons, focus, tools, links, menus, labels ---------- */
.jp .icon, .jp-sheet .icon, .jp-pop .icon { stroke-width: var(--b-stroke); }
.jp :focus-visible, .jp-sheet :focus-visible, .jp-pop :focus-visible { outline: 2px solid var(--b-ring); outline-offset: 2px; }
.jp-chat-open:focus-visible, .jp-dlg-tab:focus-visible, .jp-pop-item:focus-visible, .jp-me:focus-visible, .jp-seg button:focus-visible, .jp-source-open:focus-visible { outline-offset: -2px; }
.jp button, .jp-sheet button, .jp-pop button { box-shadow: none; }

.jp-tool { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--b-ctl); height: var(--b-ctl); padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted); cursor: pointer; transition: background var(--b-fast), color var(--b-fast); }
.jp-tool .icon { width: var(--b-icon); height: var(--b-icon); }
.jp-tool:hover { background: var(--b-hover); color: var(--ink); }
.jp-tool.done { color: var(--ok); }
.jp-tool.on, .jp-tool[aria-pressed="true"], .jp-tool[aria-expanded="true"] { background: var(--b-selected); color: var(--ink); }
.jp-tool-text { width: auto; gap: 6px; padding: 0 var(--b-2); font: 600 12.5px var(--text); }
.jp-link { display: inline; padding: 0; border: 0; background: none; color: var(--accent3); font: 600 12.5px/1.5 var(--text); text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: 3px; }
.jp-link:hover { background: none; color: var(--accent3); text-decoration-color: currentColor; }

/* a menu: a chat row's actions here, the project menus in bleed-projects.css */
.jp-pop { position: fixed; z-index: 30; display: flex; flex-direction: column; gap: 2px; width: max-content; min-width: 208px; max-width: min(300px, calc(100vw - 16px)); padding: 6px; border: 1px solid var(--rule2); border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow-2); animation: jp-pop-in var(--b-fast) ease-out both; }
.jp-pop-item { display: flex; align-items: center; justify-content: flex-start; gap: var(--b-3); width: 100%; height: var(--b-ctl); padding: 0 var(--b-3) 0 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); font: var(--b-ui); text-align: left; transition: background var(--b-fast); }
.jp-pop-item:hover, .jp-pop-item:focus-visible { background: var(--b-hover); color: var(--ink); }
.jp-pop-item > .icon { width: var(--b-icon); height: var(--b-icon); flex: none; color: var(--muted); }
.jp-pop-item > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-pop-item.danger, .jp-pop-item.danger > .icon { color: var(--stop); }
.jp-pop-item.danger:hover, .jp-pop-item.danger:focus-visible { background: color-mix(in srgb, var(--stop) 10%, transparent); color: var(--stop); }
.jp-pop-rule { margin: 4px 6px; border: 0; border-top: 1px solid var(--rule); }

/* ---------- the sidebar: paper, a hairline on the right, one list system ---------- */
.jp-side { position: relative; display: flex; flex-direction: column; min-height: 0; background: var(--paper); border-right: 1px solid var(--rule); }
.jp-brand { flex: none; display: flex; align-items: baseline; gap: var(--b-2); height: var(--b-top); padding: 0 var(--b-5); }
.jp-brand .jp-mark { align-self: center; width: 18px; height: 18px; color: var(--gold); }
.jp-brand strong { align-self: center; font: 600 26px/1 var(--display); letter-spacing: -.01em; color: var(--ink); }
.jp-brand span:last-child { align-self: center; padding-top: 6px; font: var(--b-label); letter-spacing: var(--b-track); text-transform: uppercase; color: var(--muted); }
.jp-new, .jp-search { flex: none; display: flex; align-items: center; gap: var(--b-2); height: var(--b-row); margin: 0 var(--b-3); padding: 0 var(--b-2) 0 var(--b-3); border-radius: var(--r); }
.jp-new { justify-content: flex-start; margin-top: var(--b-1); border: 1px solid var(--rule2); background: var(--paper); color: var(--ink); font: var(--b-ui-strong); transition: background var(--b-fast), border-color var(--b-fast); }
.jp-new > .icon { width: var(--b-icon); height: var(--b-icon); color: var(--gold); }
.jp-new > span { flex: 1; text-align: left; }
.jp-new kbd, .jp-pop kbd, .jp-keys kbd { flex: none; min-width: 20px; padding: 2px 6px; border: 1px solid var(--rule); border-radius: 5px; background: var(--bg); color: var(--muted); font: var(--b-meta); font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; }
.jp-new:hover { background: var(--b-hover); border-color: var(--rule2); color: var(--ink); }
.jp-search { margin-top: var(--b-2); border: 1px solid transparent; background: var(--bg); color: var(--muted); cursor: text; transition: border-color var(--b-fast), background var(--b-fast), box-shadow var(--b-fast); }
.jp-search:hover { border-color: var(--rule); }
.jp-search:focus-within { border-color: var(--gold-line); background: var(--paper); box-shadow: 0 0 0 3px var(--gold-soft); }
.jp-search > .icon { width: var(--b-icon-s); height: var(--b-icon-s); flex: none; }
.jp-search-input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; padding: 0; font: var(--b-ui); color: var(--ink); box-shadow: none; }
.jp-search-input:focus { box-shadow: none; outline: none; }
.jp-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.jp-search-clear { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); }
.jp-search-clear[hidden] { display: none; }
.jp-search-clear:hover { background: var(--b-hover); color: var(--ink); }
.jp-search-clear .icon { width: var(--b-glyph); height: var(--b-glyph); }

.jp-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; padding: 0 var(--b-2) var(--b-6); scrollbar-color: var(--rule2) transparent; scrollbar-width: thin; }
.jp-list .jp-group { display: block; }
.jp-group-label { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--b-2); margin: 0; padding: var(--b-5) var(--b-3) var(--b-2); background: var(--paper); font: var(--b-label); letter-spacing: var(--b-track); text-transform: uppercase; color: var(--muted); }
.jp-group-n { font: var(--b-meta); letter-spacing: 0; font-variant-numeric: tabular-nums; }
/* a row: glyphs, the title (fading out, never wrapping), when it was last used; its menu
   button takes the stamp's place on hover or focus, so nothing in the row moves */
.jp-chat { position: relative; display: flex; align-items: center; height: var(--b-row); margin-top: 1px; border-radius: var(--b-r-row); transition: background var(--b-fast); }
.jp-chat::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); opacity: 0; transform: scaleY(.4); transition: opacity var(--b-med), transform var(--b-med) var(--ease); }
.jp-chat:hover, .jp-chat.menu-open { background: var(--b-hover); }
.jp-chat.on { background: var(--b-selected); }
.jp-chat.on::before { opacity: 1; transform: none; }
.jp-chat-open { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: var(--b-2); height: 100%; padding: 0 var(--b-3); border: 0; border-radius: var(--b-r-row); background: none; color: var(--ink2); font: var(--b-ui); text-align: left; }
.jp-chat-open:hover { background: none; color: var(--ink); }
.jp-chat.on .jp-chat-open { color: var(--ink); font-weight: 550; }
.jp-chat-open .jp-glyph { width: var(--b-glyph); height: var(--b-glyph); flex: none; color: var(--muted); }
.jp-chat-open .icon-pin.jp-glyph { color: var(--gold); }
.jp-chat-open .icon-flask.jp-glyph { color: var(--plum); }
.jp-chat-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); }
.jp-chat-when { flex: none; min-width: 20px; font: var(--b-meta); color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; transition: opacity var(--b-fast); }
.jp-chat-more { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); transition: background var(--b-fast), color var(--b-fast), opacity var(--b-fast); }
.jp-chat-more .icon { width: var(--b-icon); height: var(--b-icon); }
.jp-chat-more:hover, .jp-chat-more[aria-expanded="true"] { background: var(--b-selected); color: var(--ink); }
.jp-chat-more.danger:hover { color: var(--stop); }
.jp-row-more { position: absolute; right: 4px; top: 4px; opacity: 0; }
.jp-chat:hover .jp-row-more, .jp-chat:focus-within .jp-row-more, .jp-chat.menu-open .jp-row-more { opacity: 1; }
.jp-chat:hover .jp-chat-when, .jp-chat:focus-within .jp-chat-when, .jp-chat.menu-open .jp-chat-when { opacity: 0; }
@media (hover: none) {
  .jp-row-more { position: static; opacity: 1; margin-right: 4px; }
  .jp-chat:hover .jp-chat-when, .jp-chat:focus-within .jp-chat-when { opacity: 1; }
  .jp-chat-open { padding-right: var(--b-1); }
}
.jp-chat.editing { padding: 0 2px; background: none; }
.jp-chat-edit { width: 100%; height: var(--b-ctl); padding: 0 10px; border: 1px solid var(--gold-line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font: var(--b-ui); outline: none; box-shadow: 0 0 0 3px var(--gold-soft); }
.jp-chat.confirm { gap: 6px; padding: 0 4px 0 var(--b-3); background: color-mix(in srgb, var(--stop) 9%, transparent); }
.jp-chat.confirm::before { display: none; }
.jp-confirm-text { flex: 1; min-width: 0; font: 500 12.5px/1.3 var(--text); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-confirm-yes, .jp-confirm-no { flex: none; height: 28px; padding: 0 10px; border-radius: var(--r-sm); font: 600 12px var(--text); border: 1px solid transparent; }
.jp-confirm-yes { background: var(--stop); color: var(--on-accent); border-color: var(--stop); }
:root[data-theme="dark"] .jp-confirm-yes { color: var(--night); }
.jp-confirm-yes:hover { filter: brightness(1.08); background: var(--stop); border-color: var(--stop); color: var(--on-accent); }
:root[data-theme="dark"] .jp-confirm-yes:hover { color: var(--night); }
.jp-confirm-no { background: var(--paper); color: var(--ink); border-color: var(--rule2); }
.jp-confirm-no:hover { background: var(--paper2); }
.jp-empty-list { display: grid; justify-items: center; gap: var(--b-1); margin: var(--b-10) var(--b-4) 0; text-align: center; color: var(--soft); }
.jp-empty-list .jp-mark { width: 20px; height: 20px; margin-bottom: var(--b-2); color: var(--rule2); }
.jp-empty-list .jp-empty-mark { width: 36px; height: 36px; margin-bottom: var(--b-2); }
.jp-empty-list .jp-empty-mark .icon { width: var(--b-icon); height: var(--b-icon); }
.jp-empty-list strong { font: 500 20px/1.2 var(--display); color: var(--ink); }
.jp-empty-list p { margin: 0; font: var(--b-small); overflow-wrap: anywhere; }
.jp-empty-list .jp-link { margin-top: var(--b-2); }

/* the account block: who is signed in, their role and style; it opens the settings */
.jp-account { position: relative; flex: none; padding: var(--b-2); border-top: 1px solid var(--rule); }
.jp-account::before { content: ""; position: absolute; left: 0; right: 10px; bottom: calc(100% + 1px); height: var(--b-6); background: linear-gradient(transparent, var(--paper)); pointer-events: none; }
.jp-me { display: flex; align-items: center; justify-content: flex-start; gap: var(--b-3); width: 100%; height: 52px; padding: 0 var(--b-3) 0 var(--b-2); border: 0; border-radius: var(--r); background: transparent; color: var(--ink); text-align: left; transition: background var(--b-fast); }
.jp-me:hover { background: var(--b-hover); color: var(--ink); }
.jp-me > .icon { width: var(--b-icon); height: var(--b-icon); margin-left: auto; flex: none; color: var(--muted); transition: transform var(--b-slow) var(--ease), color var(--b-fast); }
.jp-me:hover > .icon { color: var(--ink); transform: rotate(45deg); }
.jp-avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--accent2); color: var(--accent3); border: 1px solid var(--gold-line); font: 600 15px/1 var(--display); letter-spacing: .02em; }
.jp-me-text { display: grid; gap: 1px; min-width: 0; }
.jp-me-text strong { font: var(--b-ui-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-me-text span { font: var(--b-meta); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- the chat ---------- */
.jp-main { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; min-width: 0; background: var(--bg); }
.jp-main.is-empty { grid-template-rows: auto 0 minmax(0, 1fr); }
.jp-head { min-width: 0; }
.jp-top { display: flex; align-items: center; gap: var(--b-3); height: var(--b-top); padding: 0 var(--b-4) 0 var(--b-6); border-bottom: 1px solid var(--rule); background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.jp-title { flex: 1; min-width: 0; margin: 0; font: var(--b-display-m); letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-top-actions { display: flex; align-items: center; gap: 2px; flex: none; }
/* the top bar's tools: one treatment, the icon then its label; a hairline, then the way out */
.jp-top-tool { width: auto; gap: 6px; padding: 0 10px; font: 500 12.5px/1 var(--text); color: var(--soft); }
.jp-top-tool:disabled, .jp-top-tool:disabled:hover { opacity: .38; cursor: default; background: transparent; color: var(--soft); }
.jp-top .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--b-ctl); height: var(--b-ctl); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--soft); transition: background var(--b-fast), color var(--b-fast); }
.jp-top .theme-toggle:hover { background: var(--b-hover); border: 0; color: var(--ink); transform: none; }
.jp-top .theme-toggle .icon { width: var(--b-icon); height: var(--b-icon); }
.jp-menu { display: none; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; border-radius: var(--r-sm); color: var(--ink); }
.jp-menu:hover { background: var(--b-hover); }
.jp-menu .icon { width: 18px; height: 18px; }
.jp-back { position: relative; display: inline-flex; align-items: center; gap: 6px; height: var(--b-ctl); padding: 0 var(--b-3); margin-left: 17px; border: 1px solid var(--rule2); border-radius: 999px; background: var(--paper); color: var(--ink); font: 600 12.5px/1 var(--text); text-decoration: none; white-space: nowrap; transition: border-color var(--b-fast), background var(--b-fast), color var(--b-fast); }
.jp-back::before { content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 1px; background: var(--rule); }
.jp-back .icon { width: var(--b-glyph); height: var(--b-glyph); color: var(--muted); }
.jp-back:hover { border-color: var(--gold-line); background: var(--accent2); color: var(--accent3); }
.jp-back:hover .icon { color: var(--accent3); }

.jp-scroll { overflow-y: auto; min-height: 0; scrollbar-color: var(--rule2) transparent; }
.jp-thread { width: min(var(--b-measure), 100% - 48px); margin: 0 auto; padding: var(--b-8) 0 var(--b-10); display: flex; flex-direction: column; gap: var(--b-8); }
.jp-msg { position: relative; animation: jp-in var(--b-slow) var(--ease) both; }
.jp-user { display: flex; flex-direction: column; align-items: flex-end; gap: var(--b-1); }
.jp-user .jp-bubble { max-width: 78%; padding: 10px var(--b-4); border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg); background: var(--paper); border: 1px solid var(--rule); color: var(--ink); font: 400 15px/1.6 var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.jp-msg-tools { display: flex; gap: 2px; opacity: 0; transition: opacity var(--b-fast); }
.jp-msg-tools .jp-tool { width: 28px; height: 28px; }
.jp-msg-tools .jp-tool .icon { width: var(--b-icon-s); height: var(--b-icon-s); }
.jp-msg:hover .jp-msg-tools, .jp-msg:focus-within .jp-msg-tools, .jp-msg.fresh .jp-msg-tools, .jp-answer:last-child .jp-msg-tools { opacity: 1; }
@media (hover: none) { .jp-msg-tools { opacity: 1; } }
/* an answer: the mark sits on the first line of the text, the text keeps a reading measure */
.jp-answer { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--b-4); }
.jp-mark, .jp-hero-mark { display: inline-block; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8c-.3 0-.5.1-.7.4C9.6 4.5 5 10.1 5 14.6A7 7 0 0 0 19 14.6c0-4.5-4.6-10.1-6.3-12.4-.2-.3-.4-.4-.7-.4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8c-.3 0-.5.1-.7.4C9.6 4.5 5 10.1 5 14.6A7 7 0 0 0 19 14.6c0-4.5-4.6-10.1-6.3-12.4-.2-.3-.4-.4-.7-.4z'/%3E%3C/svg%3E") center / contain no-repeat; }
.jp-answer > .jp-mark { width: 20px; height: 20px; margin-top: 3px; color: var(--gold); }
.jp-mark.spinning { animation: jp-spin 1.6s ease-in-out infinite; }
@keyframes jp-spin { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(2px) scale(.88, 1.08); } }
.jp-answer-body { min-width: 0; }
.jp-answer.fresh .jp-answer-body { animation: jp-in var(--b-slow) var(--ease) both; }
.jp-text { max-width: 72ch; font: var(--b-body); overflow-wrap: anywhere; }
.jp-text p { margin: 0 0 var(--b-3); }
.jp-text p:last-child { margin-bottom: 0; }
.jp-text ul, .jp-text ol { margin: var(--b-1) 0 var(--b-3); padding-left: var(--b-6); }
.jp-text li { margin: var(--b-1) 0; padding-left: 2px; }
.jp-text li > p { margin: 6px 0 0; }
.jp-text li > ul, .jp-text li > ol { margin: var(--b-1) 0 6px; }
.jp-text ol > li::marker { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.jp-text ul > li::marker { color: var(--muted); }
.jp-text > :last-child, .jp-text li > :last-child, .jp-text blockquote > :last-child { margin-bottom: 0; }
.jp-text strong { font-weight: 650; }
.jp-nb { white-space: nowrap; }
.jp-text h3, .jp-text h4 { margin: var(--b-5) 0 var(--b-2); font: 650 16px/1.35 var(--text); color: var(--ink); letter-spacing: 0; text-transform: none; }
.jp-text h4 { font-size: 15px; }
.jp-text > h3:first-child, .jp-text > h4:first-child { margin-top: 0; }
.jp-text code { padding: 1px 5px; border-radius: var(--r-sm); background: var(--bg2); font: 13px/1.5 var(--mono); }
.jp-text pre { margin: var(--b-1) 0 var(--b-3); padding: var(--b-3); border-radius: var(--r); background: var(--bg2); overflow-x: auto; }
.jp-text pre code { padding: 0; background: none; white-space: pre; }
.jp-text blockquote { margin: var(--b-1) 0 var(--b-3); padding: 2px 0 2px var(--b-4); border-left: 2px solid var(--rule2); color: var(--soft); }
.jp-text hr { margin: var(--b-4) 0; border: 0; border-top: 1px solid var(--rule); }
.jp-text a { color: var(--accent3); text-underline-offset: 2px; }
.jp-table { margin: var(--b-1) 0 var(--b-3); overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r); }
.jp-table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.jp-table th, .jp-table td { padding: var(--b-2) var(--b-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.jp-table th { font: 600 12px/1.4 var(--text); color: var(--muted); background: var(--paper2); white-space: nowrap; }
.jp-table tr:last-child td { border-bottom: 0; }
.jp-table .jp-right { text-align: right; font-variant-numeric: tabular-nums; }
.jp-table .jp-center { text-align: center; }
.jp-cite { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin: 0 1px 0 3px; padding: 0 5px; vertical-align: 2px; border-radius: var(--r-sm); border: 0; cursor: pointer; background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--accent3); font: 700 10.5px/1 var(--text); transition: background var(--b-fast), color var(--b-fast); }
.jp-cite:hover, .jp-cite:focus-visible { background: var(--gold); color: var(--on-accent); }
.jp-cite.ext { box-shadow: inset 0 0 0 1px var(--gold-line); }
.jp-thinking { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-1) var(--b-3); min-height: 26px; color: var(--muted); font-size: 14.5px; }
.jp-think-text { font-weight: 600; color: var(--ink2); }
.jp-think-step { background: linear-gradient(90deg, var(--muted) 30%, var(--gold) 50%, var(--muted) 70%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: jp-shine 2.2s linear infinite; }
@keyframes jp-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* sources, numbered like the citations: one hairline card, rows divided by hairlines */
.jp-sources { margin: var(--b-4) 0 0; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper); font-size: inherit; overflow: hidden; }
.jp-sources summary { display: flex; align-items: center; gap: var(--b-2); height: var(--b-field); padding: 0 var(--b-3) 0 var(--b-4); font: var(--b-label); letter-spacing: var(--b-track); text-transform: uppercase; color: var(--muted); cursor: pointer; list-style: none; transition: color var(--b-fast); }
.jp-sources summary::before, .jp-mem summary::before, .jp-impact summary::before { display: none; }
.jp-sources summary::-webkit-details-marker, .jp-mem summary::-webkit-details-marker, .jp-impact summary::-webkit-details-marker { display: none; }
.jp-sources summary:hover { color: var(--ink); }
.jp-sources summary .icon { width: var(--b-icon-s); height: var(--b-icon-s); margin-left: auto; transition: transform var(--b-med) var(--ease); }
.jp-sources[open] summary .icon { transform: rotate(180deg); }
.jp-sources-n { padding: 1px 7px; border-radius: 999px; background: var(--b-selected); color: var(--soft); font: var(--b-meta); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.jp-sources ol { list-style: none; margin: 0; padding: 0; }
.jp-source { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--b-3); padding: var(--b-3) var(--b-4); border-top: 1px solid var(--rule); transition: background var(--b-fast); }
.jp-source:hover { background: var(--b-hover); }
.jp-source.flash { animation: jp-flash 1.4s ease-out; }
@keyframes jp-flash { 0% { background: rgba(var(--accent-rgb),.26); } 100% { background: transparent; } }
.jp-source-n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--accent3); font: 700 11px/1 var(--text); font-variant-numeric: tabular-nums; }
.jp-source-body { min-width: 0; }
.jp-source-title { font: var(--b-ui-strong); color: var(--ink); overflow-wrap: anywhere; }
.jp-source-detail { margin-top: 2px; font: var(--b-small); color: var(--soft); overflow-wrap: anywhere; }
.jp-source-calc { font-style: italic; }
.jp-source-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-1) var(--b-3); margin-top: var(--b-2); }
.jp-source-meta .jp-pill { margin-left: 0; }
.jp-badge { display: inline-flex; align-items: center; gap: 6px; font: var(--b-meta); color: var(--soft); --chip-tone: var(--gold); }
.jp-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--chip-tone); flex: none; }
.jp-badge.ghl { --chip-tone: var(--info); }
.jp-badge.mini-app { --chip-tone: var(--sage); }
.jp-badge.inkpulse-ghl, .jp-badge.inkpulse { --chip-tone: var(--plum); }
.jp-badge.teams { --chip-tone: var(--lane-teams); }
.jp-source-open { display: inline-flex; align-items: center; gap: var(--b-1); border: 0; border-radius: var(--r-sm); background: none; padding: 0; cursor: pointer; font: 600 12px/1.4 var(--text); color: var(--accent3); text-decoration: none; }
.jp-source-open .icon { width: 11px; height: 11px; }
.jp-source-open:hover { background: none; text-decoration: underline; text-underline-offset: 3px; color: var(--accent3); }
.jp-source-open.list { color: var(--soft); font-weight: 500; }
.jp-source-none { font: var(--b-meta); color: var(--muted); }

/* an answer's footer: one quiet line (what was read, how it was written, what was kept,
   what the check could not back) with the answer's tools at its end; a fold opens below */
.jp-afoot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin-top: var(--b-3); }
.jp-ameta { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--b-3); font: var(--b-meta); color: var(--muted); }
.jp-ameta > span { padding: 6px 0; }
.jp-afoot > .jp-msg-tools { margin-left: -7px; }
.jp-fold, .jp-fold-note { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; margin: 0; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); font: var(--b-meta); text-align: left; transition: color var(--b-fast); }
.jp-fold:hover, .jp-fold[aria-expanded="true"] { background: none; color: var(--ink); }
.jp-fold .icon, .jp-fold-note .icon { flex: none; width: var(--b-icon-s); height: var(--b-icon-s); }
.jp-fold .icon-chevron-down { width: var(--b-glyph); height: var(--b-glyph); margin-left: -2px; transition: transform var(--b-med) var(--ease); }
.jp-fold[aria-expanded="true"] .icon-chevron-down { transform: rotate(180deg); }
.jp-fold-panel { margin: var(--b-1) 0; padding: var(--b-3) var(--b-4); border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); font: var(--b-small); color: var(--soft); animation: jp-in var(--b-med) var(--ease) both; }
.jp-fold-panel[hidden] { display: none; }
.jp-fold-panel ol, .jp-fold-panel ul { margin: 0; padding: 0 0 0 var(--b-5); display: grid; gap: var(--b-1); }
.jp-fold-panel ul { list-style: none; padding-left: 0; }
.jp-fold-panel ul li { overflow-wrap: anywhere; }
.jp-fold-panel ul li::before { content: "·"; margin-right: var(--b-2); color: var(--muted); }
.jp-fold-panel li.jp-fold-act::before { display: none; }
.jp-fold-panel strong { color: var(--ink); font-weight: 600; }
.jp-fold-panel code { font: 12px var(--mono); color: var(--ink2); }
.jp-read-args { margin-left: var(--b-2); color: var(--muted); }
.jp-warn { color: var(--stop); font-weight: 600; }
.jp-moves { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-1) var(--b-3); margin-top: var(--b-3); font: var(--b-small); color: var(--soft); }
.jp-moves > .icon { width: var(--b-icon-s); height: var(--b-icon-s); color: var(--gold); }
.jp-moves-text { min-width: 0; overflow-wrap: anywhere; }
.jp-moves-text strong { color: var(--ink); font-weight: 600; }
.jp-moves-problem { flex-basis: 100%; color: var(--warn); font-weight: 600; }
.jp-correct-slot:empty { display: none; }

/* ---------- the empty state: one column, a greeting, the composer, four starters ---------- */
.jp-hero { display: grid; grid-template-columns: minmax(0, 680px); justify-content: center; align-content: center; justify-items: center; gap: 0; padding: var(--b-6) var(--b-6) 9vh; min-height: 0; overflow-y: auto; }
.jp-hero[hidden] { display: none; }
.jp-hero-mark { width: 36px; height: 36px; color: var(--gold); animation: jp-float 6s ease-in-out infinite; }
@keyframes jp-float { 50% { transform: translateY(3px) scale(.97, 1.03); } }
.jp-hero h1 { margin: var(--b-5) 0 0; font: var(--b-display-xl); text-align: center; letter-spacing: -.01em; animation: jp-in var(--b-slow) var(--ease) both .05s; }
.jp-hero-sub { margin: var(--b-2) 0 var(--b-8); max-width: 46ch; text-align: center; font: 400 15px/1.55 var(--text); color: var(--soft); text-wrap: balance; animation: jp-in var(--b-slow) var(--ease) both .1s; }
.jp-hero .jp-composer-wrap { order: 2; width: 100%; padding: 0; animation: jp-in var(--b-slow) var(--ease) both .15s; }
.jp-starters { order: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b-2); width: 100%; margin-top: var(--b-6); animation: jp-in var(--b-slow) var(--ease) both .2s; }
.jp-starter { display: grid; grid-template-columns: var(--b-icon) minmax(0, 1fr); align-items: start; justify-content: start; gap: 2px var(--b-3); min-height: 64px; padding: var(--b-3) var(--b-4); border: 1px solid var(--rule); border-radius: var(--r-lg); background: transparent; color: var(--ink); text-align: left; transition: background var(--b-fast), border-color var(--b-fast); }
.jp-starter:hover { background: var(--paper); border-color: var(--rule2); color: var(--ink); }
.jp-starter > .icon { grid-row: 1 / 3; width: var(--b-icon); height: var(--b-icon); margin-top: 2px; color: var(--gold); }
.jp-starter strong { font: var(--b-ui-strong); }
.jp-starter span { font: var(--b-small); color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-chip { border: 1px solid var(--rule2); background: var(--paper); color: var(--ink2); border-radius: 999px; height: var(--b-ctl); padding: 0 var(--b-3); font: 500 13px var(--text); transition: border-color var(--b-fast), background var(--b-fast), color var(--b-fast); }
.jp-chip:hover { border-color: var(--gold-line); background: var(--accent2); color: var(--accent3); }

/* ---------- the composer: one card; the text, then one toolbar row; the line beneath ---------- */
.jp-composer-wrap { position: relative; width: min(var(--b-measure), 100% - 48px); margin: 0 auto; padding: 0 0 var(--b-3); }
.jp-main > .jp-composer-wrap::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--b-6); background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.jp-composer { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--b-1); padding: var(--b-2); border-radius: var(--r-xl); background: var(--paper); border: 1px solid var(--rule2); box-shadow: var(--shadow-1); transition: border-color var(--b-fast), box-shadow var(--b-med); }
.jp-composer:focus-within { border-color: var(--gold-line); box-shadow: 0 0 0 3px var(--gold-soft), var(--shadow-1); }
.jp-input { display: block; width: 100%; min-height: var(--b-field); max-height: 220px; resize: none; border: 0; outline: none; background: transparent; padding: var(--b-2) var(--b-2) var(--b-1); font: 400 15.5px/1.5 var(--text); color: var(--ink); box-shadow: none; }
.jp-input:focus { box-shadow: none; outline: none; }
.jp-input:disabled { color: var(--muted); }
.jp-input::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-bar { display: flex; align-items: center; gap: var(--b-2); min-width: 0; min-height: var(--b-row); }
.jp-flags { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; }
.jp-bar-end { flex: none; display: flex; align-items: center; gap: var(--b-1); }
.jp-flag { display: inline-flex; align-items: center; flex: none; gap: 6px; height: var(--b-ctl); padding: 0 10px; border-radius: var(--b-r-row); border: 1px solid transparent; background: transparent; color: var(--soft); font: 500 12.5px/1 var(--text); transition: background var(--b-fast), border-color var(--b-fast), color var(--b-fast); }
.jp-flag .icon { width: var(--b-icon-s); height: var(--b-icon-s); }
.jp-flag:hover { background: var(--b-hover); border-color: transparent; color: var(--ink); }
.jp-flag.private.on, .jp-flag.private.on:hover { background: var(--solid); border-color: var(--solid); color: var(--on-solid); }
.jp-flag.rehearsal.on, .jp-flag.rehearsal.on:hover { background: color-mix(in srgb, var(--plum) 14%, transparent); border: 1px dashed var(--plum); color: var(--plum); }
.jp-flag:disabled { opacity: .5; cursor: default; }
/* the model picker (bleed-plugins.js) sits first in the row and takes the row's own shape */
.jp-flags .bpk-btn { min-height: var(--b-ctl); padding: 0 10px; border-color: transparent; border-radius: var(--b-r-row); background: transparent; font: 500 12.5px/1 var(--text); color: var(--ink2); }
.jp-flags .bpk-btn:hover, .jp-flags .bpk-btn[aria-expanded="true"] { background: var(--b-hover); border-color: transparent; color: var(--ink); }
.jp-flags .bpk-btn .icon { width: var(--b-icon-s); height: var(--b-icon-s); }
.jp-flags .bpk + .jp-flag { margin-left: 9px; position: relative; }
.jp-flags .bpk + .jp-flag::before { content: ""; position: absolute; left: -7px; top: 8px; bottom: 8px; width: 1px; background: var(--rule); }
.jp-listening { display: none; min-width: 0; margin-left: var(--b-2); font: 600 12px var(--text); color: var(--stop); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp.is-listening .jp-listening { display: block; }
.jp-mic, .jp-send { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--b-row); height: var(--b-row); padding: 0; border-radius: var(--r); }
.jp-mic { border: 0; background: transparent; color: var(--soft); touch-action: none; transition: background var(--b-fast), color var(--b-fast); }
.jp-mic .icon { width: 18px; height: 18px; }
.jp-mic:hover { background: var(--b-hover); color: var(--ink); }
.jp-mic.on, .jp-mic.on:hover { background: var(--stop); color: var(--on-accent); animation: jp-live 1.4s ease-in-out infinite; }
@keyframes jp-live { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--stop) 22%, transparent); } }
.jp-send { border: 0; color: var(--on-accent); background: var(--accent-gradient); transition: filter var(--b-fast), transform var(--b-fast) var(--ease); }
.jp-send .icon { width: 18px; height: 18px; stroke-width: 2.2; }
.jp-send:hover { color: var(--on-accent); background: var(--accent-gradient); filter: brightness(1.1); }
.jp-send:active { transform: scale(.96); }
.jp-send:disabled { filter: grayscale(.7) opacity(.5); cursor: default; transform: none; }
.jp-send[hidden] { display: none; }
.jp-stop, .jp-stop:hover { background: var(--solid); color: var(--on-solid); }
.jp-stop .icon { width: var(--b-icon-s); height: var(--b-icon-s); fill: currentColor; }
.jp-foot { margin: var(--b-2) 0 0; text-align: center; font: 400 11.5px/1.4 var(--text); color: var(--muted); }
.jp-shade { display: none; }

/* ---------- the right rail: this chat's sources ---------- */
.jp-rail { display: flex; flex-direction: column; min-height: 0; background: var(--paper); border-left: 1px solid var(--rule); }
.jp-rail[hidden] { display: none; }
.jp-rail-head { flex: none; display: flex; align-items: center; gap: var(--b-2); height: var(--b-top); padding: 0 var(--b-3) 0 var(--b-5); border-bottom: 1px solid var(--rule); }
.jp-rail-head h3 { margin: 0; font: var(--b-display-m); }
.jp-rail-count { flex: 1; font: var(--b-meta); color: var(--muted); font-variant-numeric: tabular-nums; }
.jp-rail-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-color: var(--rule2) transparent; }
.jp-rail-list { list-style: none; margin: 0; padding: 0; }
.jp-rail-list .jp-source:first-child { border-top: 0; }
.jp-rail-list .jp-source:last-child { border-bottom: 1px solid var(--rule); }
.jp-rail-empty { margin: var(--b-5); font: var(--b-small); color: var(--muted); }

/* ---------- flags, the banner, and what an answer carries ---------- */
.jp-pointed { animation: jp-flash 2.4s ease-out; border-radius: var(--r); }
.jp-pill { display: inline-flex; align-items: center; gap: var(--b-1); margin-left: var(--b-2); padding: 1px var(--b-2); border-radius: 999px; border: 1px solid var(--rule2); font: 600 10.5px/1.6 var(--text); letter-spacing: .04em; color: var(--soft); white-space: nowrap; }
.jp-pill .icon { width: 11px; height: 11px; }
.jp-pill.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--rule2)); }
.jp-pill.rehearsal { color: var(--plum); border-style: dashed; border-color: color-mix(in srgb, var(--plum) 55%, var(--rule2)); }
.jp-banner { display: grid; }
.jp-banner[hidden] { display: none; }
.jp-banner-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-1) var(--b-3); margin: 0; padding: var(--b-2) var(--b-4) var(--b-2) var(--b-6); font: 400 13px/1.45 var(--text); border-bottom: 1px solid var(--rule); }
.jp-banner-line .icon { width: var(--b-icon); height: var(--b-icon); flex: none; }
.jp-banner-line strong { font-weight: 650; }
.jp-banner-line span { flex: 1 1 220px; min-width: 0; }
.jp-banner-line.private { background: var(--solid); color: var(--on-solid); border-bottom-color: transparent; }
.jp-banner-line.rehearsal { background: color-mix(in srgb, var(--plum) 10%, var(--paper)); color: var(--ink); box-shadow: inset 3px 0 0 var(--plum); }
.jp-banner-line.rehearsal .icon, .jp-banner-line.rehearsal strong { color: var(--plum); }
.jp-banner-line.lost { background: color-mix(in srgb, var(--stop) 10%, var(--paper)); color: var(--ink); box-shadow: inset 3px 0 0 var(--stop); }
.jp-banner-line.lost .icon, .jp-banner-line.lost strong { color: var(--stop); }
.jp-banner-off { flex: none; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; font: 600 11.5px var(--text); opacity: .8; }
.jp-banner-off:hover { opacity: 1; background: transparent; border-color: currentColor; color: inherit; }
.jp-banner-line.private .jp-banner-off:focus-visible { outline-color: var(--on-solid); }

.jp-mem { margin: 0 0 var(--b-3); border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); font: var(--b-small); color: var(--soft); }
.jp-mem summary { display: flex; align-items: center; gap: var(--b-2); min-height: var(--b-ctl); padding: 6px var(--b-3); cursor: pointer; list-style: none; border-radius: var(--r); }
.jp-mem summary .icon { flex: none; width: var(--b-icon-s); height: var(--b-icon-s); color: var(--gold); }
.jp-mem summary .icon-chevron-down { margin-left: auto; color: var(--muted); transition: transform var(--b-med) var(--ease); }
.jp-mem[open] summary .icon-chevron-down { transform: rotate(180deg); }
.jp-mem-line { min-width: 0; overflow-wrap: anywhere; }
.jp-mem-line strong, .jp-mem li strong { color: var(--ink); font-weight: 600; }
.jp-mem ul { list-style: none; margin: 0; padding: 2px var(--b-3) var(--b-2) 34px; display: grid; gap: var(--b-1); }
.jp-mem li { display: flex; flex-wrap: wrap; gap: 2px var(--b-3); }
.jp-mem-foot { margin: 0; padding: var(--b-2) var(--b-3) var(--b-2) 34px; border-top: 1px solid var(--rule); color: var(--muted); }
.jp-notes { list-style: none; margin: var(--b-3) 0 0; padding: 0; display: grid; gap: var(--b-1); font: var(--b-small); color: var(--soft); }
.jp-notes li { display: flex; gap: var(--b-2); align-items: flex-start; }
.jp-notes .icon { flex: none; width: var(--b-icon-s); height: var(--b-icon-s); margin-top: 2px; color: var(--gold); }
.jp-notes li.warn, .jp-notes li.warn .icon { color: var(--warn); }
.jp-notes strong { color: var(--ink); font-weight: 600; }

.jp-clarify { margin-top: var(--b-4); }
.jp-clarify p { margin: 0 0 var(--b-2); font: var(--b-ui-strong); color: var(--ink2); }
.jp-clarify-options { display: flex; flex-wrap: wrap; gap: var(--b-2); }
.jp-clarify .jp-chip:disabled { opacity: .5; cursor: default; }
.jp-visuals { display: grid; gap: var(--b-4); margin-top: var(--b-4); min-width: 0; }
.jp-visuals > * { min-width: 0; }
.jp-visual { margin: 0; padding: var(--b-3) var(--b-4); border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper); }
.jp-visual figcaption { display: flex; align-items: center; margin-bottom: var(--b-2); font: 500 18px/1.2 var(--display); }
.jp-table-scroll { overflow-x: auto; }
.jp-visual table { width: 100%; border-collapse: collapse; font: 13px/1.4 var(--text); }
.jp-visual th { text-align: left; padding: 6px var(--b-3) 6px 0; border-bottom: 1px solid var(--rule2); font: var(--b-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.jp-visual td { padding: 6px var(--b-3) 6px 0; border-bottom: 1px solid var(--rule); }
.jp-visual td.num { font-variant-numeric: tabular-nums; }
.jp-visual-note { margin: var(--b-2) 0 0; font: 12px/1.5 var(--text); color: var(--muted); }
.jp-proposals { display: grid; gap: var(--b-3); margin-top: var(--b-4); }
.jp-proposal { padding: var(--b-4); border: 1px solid var(--rule2); border-radius: var(--r-lg); background: var(--paper); box-shadow: inset 3px 0 0 var(--gold); }
.jp-proposal.is-needs_approval { box-shadow: inset 3px 0 0 var(--info); }
.jp-proposal.is-blocked { box-shadow: inset 3px 0 0 var(--stop); }
.jp-proposal.is-stale { box-shadow: inset 3px 0 0 var(--warn); }
.jp-proposal.is-rehearsal { border-style: dashed; border-color: color-mix(in srgb, var(--plum) 55%, var(--rule2)); }
.jp-proposal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.jp-proposal-head .eyebrow { color: var(--muted); }
.jp-status { margin-left: auto; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--rule2); font: 700 11.5px/1.6 var(--text); color: var(--ink); overflow-wrap: anywhere; }
.jp-status.prepared { color: var(--accent3); border-color: var(--gold-line); background: var(--accent2); }
.jp-status.needs_approval { color: var(--info); border-color: color-mix(in srgb, var(--info) 45%, var(--rule2)); }
.jp-status.blocked { color: var(--stop); border-color: color-mix(in srgb, var(--stop) 45%, var(--rule2)); }
.jp-status.stale { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--rule2)); }
.jp-proposal h4 { margin: var(--b-2) 0; font: 500 20px/1.2 var(--display); }
.jp-proposal dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--b-1) var(--b-4); margin: 0; font: 13.5px/1.5 var(--text); }
.jp-proposal dt { color: var(--muted); }
.jp-proposal dd { margin: 0; overflow-wrap: anywhere; }
.jp-impact { margin-top: var(--b-3); font: 13px/1.5 var(--text); }
.jp-impact summary { cursor: pointer; list-style: none; padding: 0; font-weight: 600; color: var(--ink2); }
.jp-impact summary:hover { color: var(--accent3); }
.jp-impact > div { margin-top: var(--b-2); }
.jp-impact strong { font: var(--b-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.jp-impact .warn strong { color: var(--warn); }
.jp-impact ul { margin: var(--b-1) 0 0; padding-left: 18px; color: var(--soft); }
.jp-proposal-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-2); margin-top: var(--b-3); }
.jp-proposal-note { margin: var(--b-3) 0 0; font: 12px/1.5 var(--text); color: var(--muted); }
.jp-proposal > .jp-row-note { margin-top: var(--b-3); }
.jp-changed { margin: 6px 0 0; padding-left: 18px; font: var(--b-small); color: var(--soft); }
.jp-follow { display: flex; flex-wrap: wrap; gap: var(--b-2); margin-top: var(--b-4); }
.jp-follow-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--b-1) var(--b-2); max-width: 100%; min-height: var(--b-ctl); padding: 6px var(--b-3); border-radius: var(--r); border: 1px solid var(--rule2); background: var(--paper); color: var(--soft); font: 12.5px/1.4 var(--text); text-align: left; }
button.jp-follow-chip:hover { border-color: var(--gold-line); background: var(--accent2); color: var(--ink); }
.jp-follow-chip .icon { width: var(--b-icon-s); height: var(--b-icon-s); color: var(--gold); }
.jp-follow-chip strong { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.jp-follow-kind { font: var(--b-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.jp-note-preview { box-shadow: inset 3px 0 0 var(--sage); margin-top: var(--b-4); }
.jp-original { margin: var(--b-2) 0 0; padding: var(--b-2) var(--b-3); border-left: 2px solid var(--rule2); font: italic 13.5px/1.55 var(--text); color: var(--soft); white-space: pre-wrap; }
.jp-recover { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--b-3); margin: 0 0 var(--b-3); padding: var(--b-3) var(--b-4); border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--rule2)); border-radius: var(--r-lg); background: color-mix(in srgb, var(--warn) 7%, var(--paper)); font: 13.5px/1.5 var(--text); }
.jp-recover > .icon { width: var(--b-icon); height: var(--b-icon); margin-top: 2px; color: var(--warn); }
.jp-recover strong { font-weight: 650; }
.jp-recover p { margin: 2px 0 0; color: var(--ink2); }
.jp-recover .jp-row-actions { margin-top: var(--b-3); flex-wrap: wrap; }
.jp-correct { display: grid; gap: var(--b-2); margin-top: var(--b-3); padding: var(--b-4); border: 1px solid var(--gold-line); border-radius: var(--r-lg); background: var(--paper); }
.jp-correct .eyebrow { margin: 0; color: var(--accent3); }
.jp-correct-text, .jp-correct-why { width: 100%; padding: var(--b-2) var(--b-3); border: 1px solid var(--rule2); border-radius: var(--r); background: var(--bg); color: var(--ink); font: 14px/1.55 var(--text); }
.jp-correct-text { resize: vertical; min-height: 96px; }
.jp-correct .jp-visual-note { margin: 0; }
.jp-mount { min-width: 0; }
.jp-mount > * { min-width: 0; max-width: 100%; }

/* ---------- sheets: the shortcuts card; the settings dialog follows ---------- */
.jp-sheet { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: var(--b-4); background: color-mix(in srgb, var(--night) 46%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--ink); animation: jp-fade var(--b-med) ease-out both; }
.jp-sheet.closing { animation: jp-fade-out .24s ease-in both; pointer-events: none; }
.jp-sheet.closing > * { animation: jp-dlg-out .24s var(--ease-io) both; }
@keyframes jp-fade-out { to { opacity: 0; } }
@keyframes jp-dlg-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes jp-dlg-out { to { opacity: 0; transform: translateY(8px) scale(.99); } }
@keyframes jp-sec-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.jp-sheet-card { width: min(480px, 100%); padding: var(--b-6); border-radius: var(--r-xl); border: 1px solid var(--rule2); background: var(--paper); box-shadow: var(--shadow-3); animation: jp-dlg-in var(--b-slow) var(--ease) both; }
.jp-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--b-3); margin-bottom: var(--b-5); }
.jp-sheet-head .eyebrow { display: block; margin-bottom: var(--b-1); color: var(--accent3); letter-spacing: var(--b-track); }
.jp-sheet-head h3 { margin: 0; font: var(--b-display-l); letter-spacing: -.005em; }
.jp-keys { display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr); gap: 0; margin: 0; align-items: center; }
.jp-keys dt, .jp-keys dd { display: flex; align-items: center; gap: var(--b-1); min-height: var(--b-row); margin: 0; border-top: 1px solid var(--rule); }
.jp-keys dt:first-of-type, .jp-keys dt:first-of-type + dd { border-top: 0; }
.jp-keys dt { padding-right: var(--b-6); font: var(--b-meta); color: var(--ink2); white-space: nowrap; }
.jp-keys kbd { min-width: 24px; padding: 3px 7px; background: var(--bg); color: var(--ink2); }
.jp-key-words { font: 500 12.5px/1.3 var(--text); color: var(--ink2); }
.jp-keys dd { font: var(--b-ui); color: var(--soft); }

/* ---------- the settings primitives (the dialog and the modules mounted in it share them) ----------
   a group: a small caps label, then a card · a card: hairline rows · a row: the setting and
   one line about it on the left, its control on the right, anything wide beneath */
.jp-set { padding: var(--b-5) 0 var(--b-6); border-bottom: 1px solid var(--rule); }
.jp-set:last-child { border-bottom: 0; }
.jp-set-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--b-2); }
.jp-set-head .eyebrow { color: var(--muted); letter-spacing: var(--b-track); }
.jp-set-note { font: var(--b-meta); color: var(--ok); opacity: 0; transition: opacity var(--b-med); }
.jp-set-note.on { opacity: 1; }
.jp-set-sub { margin: 6px 0 var(--b-4); font: var(--b-small); color: var(--soft); }
.jp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--b-2) var(--b-6); align-items: center; padding: var(--b-3) 0; border-top: 1px solid var(--rule); }
.jp-set-sub + .jp-row { border-top: 0; padding-top: 0; }
.jp-row.stack { grid-template-columns: minmax(0, 1fr); }
.jp-row > :nth-child(n + 3), .jp-row > .jp-row-note, .jp-row > .jp-row-actions, .jp-row > .jp-select, .jp-row > .jp-tags { grid-column: 1 / -1; }
.jp-row-text { display: grid; gap: 2px; min-width: 0; }
.jp-row-text strong { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--b-3); font: 600 14px/1.35 var(--text); color: var(--ink); }
.jp-row-text span { max-width: 60ch; font: var(--b-small); color: var(--soft); }
.jp-row-value { font: 500 13.5px/1.35 var(--text); color: var(--ink2); text-align: right; overflow-wrap: anywhere; }
.jp-row-note { display: flex; gap: var(--b-2); align-items: flex-start; margin: 0; font: var(--b-small); color: var(--soft); }
.jp-row-note .icon { flex: none; width: var(--b-icon-s); height: var(--b-icon-s); margin-top: 2px; }
.jp-row-note.warn { color: var(--warn); }
.jp-row-note.lock { color: var(--muted); }
.jp-row-actions { display: flex; gap: var(--b-2); }
.jp-select { width: 100%; height: var(--b-field); min-height: var(--b-field); padding: 0 var(--b-8) 0 var(--b-3); font: 500 13.5px var(--text); border-radius: var(--r); }
.jp-select:disabled { opacity: .55; cursor: default; }
.jp-switch { position: relative; flex: none; width: 40px; height: 24px; padding: 0; border-radius: 999px; border: 0; background: var(--rule2); transition: background var(--b-med); }
.jp-switch:hover { background: var(--muted); }
.jp-switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.28); transition: transform var(--b-med) var(--ease); }
.jp-switch[aria-checked="true"], .jp-switch[aria-checked="true"]:hover { background: var(--gold); }
.jp-switch[aria-checked="true"] i { transform: translateX(16px); }
.jp-switch:disabled { opacity: .5; cursor: default; }
.jp-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: var(--r); background: var(--b-selected); }
.jp-seg.wide { display: grid; width: 100%; }
.jp-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 0 var(--b-4); border: 0; border-radius: 7px; background: transparent; color: var(--soft); font: 500 12.5px/1 var(--text); white-space: nowrap; transition: background var(--b-fast), color var(--b-fast), box-shadow var(--b-fast); }
.jp-seg button .icon { width: var(--b-icon-s); height: var(--b-icon-s); }
.jp-seg button:hover { color: var(--ink); background: transparent; }
.jp-seg button.on, .jp-seg button.on:hover { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 0 0 1px var(--rule); }
:root[data-theme="dark"] .jp-seg button.on, :root[data-theme="dark"] .jp-seg button.on:hover { background: var(--rule2); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.jp-seg-n { margin-left: 2px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); font: 600 11px/1.6 var(--text); font-variant-numeric: tabular-nums; }
.jp-set-action { display: inline-flex; align-items: center; gap: var(--b-2); min-height: var(--b-ctl); padding: 0 var(--b-3); border: 1px solid var(--rule2); border-radius: var(--b-r-row); background: var(--paper); color: var(--ink); font: 500 12.5px/1.2 var(--text); text-decoration: none; white-space: nowrap; transition: background var(--b-fast), border-color var(--b-fast), color var(--b-fast); }
.jp-set-action .icon { width: var(--b-icon-s); height: var(--b-icon-s); color: var(--muted); }
.jp-set-action:hover { border-color: var(--muted); background: var(--b-hover); color: var(--ink); }
.jp-set-action:hover .icon { color: var(--ink); }
.jp-set-action:disabled, .jp-set-action:disabled:hover { opacity: .45; background: var(--paper); border-color: var(--rule2); color: var(--ink); cursor: default; }
.jp-set-action.primary { border-color: var(--gold-line); background: var(--accent2); color: var(--accent3); }
.jp-set-action.primary .icon { color: var(--accent3); }
.jp-set-action.primary:hover { border-color: var(--gold); background: var(--gold-soft); color: var(--accent3); }
.jp-set-action.danger, .jp-set-action.danger .icon { color: var(--stop); }
.jp-set-action.danger:hover { border-color: color-mix(in srgb, var(--stop) 45%, var(--rule2)); background: color-mix(in srgb, var(--stop) 9%, transparent); color: var(--stop); }
.jp-set-action.danger:hover .icon { color: var(--stop); }
.jp-set-actions { display: flex; flex-wrap: wrap; gap: var(--b-2); }
.jp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.jp-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid var(--rule2); border-radius: 999px; font: 500 12px/1 var(--text); color: var(--ink2); white-space: nowrap; }
.jp-tag.accent { border-color: var(--gold-line); background: var(--accent2); color: var(--accent3); font-weight: 600; }
.jp-saved { display: inline-flex; align-items: center; gap: var(--b-1); font: 600 11px/1.2 var(--text); letter-spacing: .02em; color: var(--ok); white-space: nowrap; opacity: 0; transform: translateY(2px); transition: opacity var(--b-med), transform var(--b-med) var(--ease); }
.jp-saved:empty { display: none; }
.jp-saved.on { opacity: 1; transform: none; }
.jp-saved .icon { width: var(--b-glyph); height: var(--b-glyph); stroke-width: 2.4; }
.jp-empty { display: grid; justify-items: center; gap: var(--b-2); padding: 64px var(--b-5); text-align: center; color: var(--soft); }
.jp-empty-mark { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 50%; border: 1px solid var(--rule2); background: var(--bg); color: var(--muted); }
.jp-empty-mark .icon { width: 20px; height: 20px; }
.jp-empty strong { font: 500 26px/1.1 var(--display); letter-spacing: -.005em; color: var(--ink); }
.jp-empty p { margin: 0; max-width: 44ch; font: 13px/1.5 var(--text); }

/* ---------- the settings dialog: centred over the dimmed page ----------
   The sections in a column on the left (the canvas tone), the chosen section on the right
   on paper; only the pane scrolls, its head lifts once it does and its foot fades. On a
   phone it is a full-screen sheet: the section list first, then one section with a way
   back. Every section is the same template: title, one line, then groups of cards. */
.jp-sheet.settings { padding: var(--b-6); }
.jp-dlg { position: relative; display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); width: min(960px, 100%); height: min(720px, 100%); min-height: min(440px, 100%); border: 1px solid var(--rule2); border-radius: var(--r-xl); background: var(--paper); color: var(--ink); font: 14px/1.55 var(--text); box-shadow: var(--shadow-3); overflow: hidden; animation: jp-dlg-in var(--b-slow) var(--ease) both; }
.jp-dlg button { line-height: 1.3; }
.jp-dlg > .jp-sheet-close { position: absolute; top: var(--b-4); right: var(--b-4); z-index: 3; }
.jp-dlg-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: var(--b-6) var(--b-3) var(--b-4); background: var(--bg); border-right: 1px solid var(--rule); }
.jp-dlg-brand { flex: none; padding: var(--b-1) var(--b-3) var(--b-5); }
.jp-dlg-brand .eyebrow { display: block; margin-bottom: var(--b-1); color: var(--accent3); letter-spacing: var(--b-track); }
.jp-dlg-brand h2 { margin: 0; font: var(--b-display-l); letter-spacing: -.005em; }
.jp-dlg-nav { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 2px; margin: -2px; scrollbar-width: none; }
/* a section's tab: hover is a faint fill, the chosen one a fuller fill with the marker,
   the keyboard's place a ring: the same three states as a chat row */
.jp-dlg-tab { position: relative; flex: none; justify-content: flex-start; gap: var(--b-3); width: 100%; min-height: var(--b-row); padding: 6px var(--b-3); border: 0; border-radius: var(--b-r-row); background: transparent; color: var(--soft); font: 500 13.5px/1.25 var(--text); text-align: left; transition: background var(--b-fast), color var(--b-fast); }
.jp-dlg-tab::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); opacity: 0; transform: scaleY(.4); transition: opacity var(--b-med), transform var(--b-med) var(--ease); }
.jp-dlg-tab > .icon { flex: none; width: var(--b-icon); height: var(--b-icon); color: var(--muted); transition: color var(--b-fast); }
.jp-dlg-tab:hover { background: var(--b-hover); color: var(--ink); }
.jp-dlg-tab.on, .jp-dlg-tab.on:hover { background: var(--b-selected); color: var(--ink); font-weight: 600; }
.jp-dlg-tab.on::before { opacity: 1; transform: none; }
.jp-dlg-tab.on > .icon:first-child { color: var(--ink); }
.jp-dlg-tab-text { flex: 1; display: grid; min-width: 0; }
.jp-dlg-tab-text > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-dlg-tab-hint { margin-top: 1px; font: var(--b-meta); font-weight: 400; color: var(--muted); }
.jp-dlg-tab-hint:empty, .jp-dlg-tab > .jp-dlg-go { display: none; }
.jp-dlg-foot { flex: none; display: flex; align-items: flex-start; gap: var(--b-2); margin: var(--b-3) var(--b-3) 0; font: var(--b-meta); font-weight: 400; color: var(--muted); }
.jp-dlg-foot .icon { flex: none; width: var(--b-glyph); height: var(--b-glyph); margin-top: 2px; color: var(--ok); }

.jp-dlg-pane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.jp-dlg-pane::after { content: ""; position: absolute; left: 0; right: 12px; bottom: 0; height: var(--b-6); background: linear-gradient(transparent, var(--paper)); pointer-events: none; }
.jp-dlg-head { position: relative; z-index: 2; flex: none; display: flex; align-items: flex-start; gap: var(--b-2); min-height: 124px; padding: 28px 64px var(--b-5) var(--b-8); border-bottom: 1px solid var(--rule); background: var(--paper); transition: box-shadow var(--b-med); }
.jp-dlg-pane.scrolled .jp-dlg-head { box-shadow: 0 10px 16px -14px rgba(0,0,0,.28); }
.jp-dlg-head-text { min-width: 0; }
.jp-dlg-head h3 { margin: 0; font: var(--b-display-l); letter-spacing: -.005em; }
.jp-dlg-about { margin: 6px 0 0; max-width: 60ch; font: 400 13px/1.5 var(--text); color: var(--soft); text-wrap: pretty; }
.jp-dlg-back { display: none; }
.jp-dlg-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--b-6) var(--b-8) var(--b-10); scrollbar-color: var(--rule2) transparent; }
.jp-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--b-8); min-width: 0; }
.jp-sec.fresh { animation: jp-sec-in var(--b-slow) var(--ease) both; }
.jp-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--b-3); min-width: 0; }
.jp-group-head { display: flex; align-items: center; gap: var(--b-2); min-height: 16px; }
.jp-group-head .eyebrow { margin: 0; color: var(--muted); letter-spacing: var(--b-track); }
.jp-group-head > .icon { flex: none; width: var(--b-icon-s); height: var(--b-icon-s); color: var(--muted); }
.jp-group-count { padding: 1px 7px; border-radius: 999px; background: var(--b-selected); font: var(--b-meta); color: var(--soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.jp-group-about { margin: -4px 0 0; max-width: 60ch; font: var(--b-small); color: var(--soft); }
.jp-card { min-width: 0; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper); }
.jp-card > .jp-row { padding: var(--b-4) var(--b-5); border-top: 1px solid var(--rule); }
.jp-card > .jp-row:first-child { border-top: 0; }
.jp-card .jp-keys { margin: -6px 0; }

/* writing style: the one in use, said large; then the styles to choose from */
.jp-style-now { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--b-4); padding: var(--b-5); border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--bg); }
.jp-style-now-top { display: flex; align-items: center; justify-content: space-between; gap: var(--b-3); min-height: 16px; }
.jp-style-now-top .eyebrow { color: var(--muted); letter-spacing: var(--b-track); }
.jp-style-now-main { display: flex; align-items: center; gap: var(--b-4); min-width: 0; }
.jp-style-now-main .jp-avatar { width: 48px; height: 48px; background: var(--paper); font-size: 21px; }
.jp-style-now-main .jp-avatar .icon { width: 18px; height: 18px; }
.jp-style-now-text { min-width: 0; }
.jp-style-now-text h4 { margin: 0; font: var(--b-display-l); letter-spacing: -.005em; overflow-wrap: anywhere; }
.jp-style-kind { margin: var(--b-1) 0 0; font: var(--b-small); color: var(--soft); }
.jp-style-sample { font: italic 500 16px/1.4 var(--display); color: var(--ink2); }
.jp-style-now > .jp-style-sample { padding-left: var(--b-4); border-left: 2px solid var(--gold-line); font-size: 17.5px; }
.jp-style-guard { display: flex; align-items: flex-start; gap: var(--b-2); margin: 0; font: var(--b-small); color: var(--soft); }
.jp-style-guard .icon { flex: none; width: var(--b-icon-s); height: var(--b-icon-s); margin-top: 2px; color: var(--muted); }
.jp-style-guard b { font-weight: 600; color: var(--ink); }
.jp-fallback { margin: 0; padding: var(--b-3); border-radius: var(--r); background: color-mix(in srgb, var(--warn) 9%, var(--paper)); box-shadow: inset 3px 0 0 var(--warn); }
.jp-style-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--b-2); }
/* a choice (a style, a person): hover lifts the hairline, the chosen one takes the accent line and its tick */
.jp-style-card, .jp-person { position: relative; text-align: left; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper); color: var(--ink); transition: border-color var(--b-fast), background var(--b-fast); }
.jp-style-card { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; align-content: start; gap: var(--b-1); padding: var(--b-4) 44px var(--b-4) var(--b-4); }
.jp-style-card:hover, .jp-person:hover { border-color: var(--rule2); background: var(--b-hover); color: var(--ink); }
.jp-style-card.on, .jp-style-card.on:hover, .jp-person.on, .jp-person.on:hover { border-color: var(--gold); background: var(--accent2); }
.jp-style-card strong { font: 600 19px/1.15 var(--display); letter-spacing: -.005em; }
.jp-style-desc { font: var(--b-small); color: var(--soft); }
.jp-style-card .jp-style-sample { margin-top: var(--b-1); font-size: 15px; }
.jp-style-check { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--rule2); color: transparent; transition: background var(--b-fast), border-color var(--b-fast), color var(--b-fast); }
.jp-style-card .jp-style-check { position: absolute; top: var(--b-4); right: var(--b-4); }
.jp-style-check .icon { width: 10px; height: 10px; stroke-width: 3; }
.on > .jp-style-check { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
.jp-style-tabs button { min-height: var(--b-ctl); }
.jp-style-pick { gap: var(--b-4); }
.jp-style-pick .jp-group-about { margin: 0; }
.jp-team-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-3) var(--b-5); }
.jp-team-head .jp-group-about { flex: 1 1 280px; }
.jp-find { position: relative; flex: 0 1 220px; display: block; margin-left: auto; }
.jp-find .icon { position: absolute; left: var(--b-3); top: 50%; width: var(--b-icon-s); height: var(--b-icon-s); margin-top: -7px; color: var(--muted); pointer-events: none; }
.jp-find input { width: 100%; height: var(--b-row); min-height: 0; padding: 0 var(--b-3) 0 34px; border-radius: var(--r); font: var(--b-ui); }
.jp-find-n { position: absolute; right: var(--b-3); top: 50%; transform: translateY(-50%); font: var(--b-meta); color: var(--muted); font-variant-numeric: tabular-nums; pointer-events: none; }
.jp-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--b-2); }
.jp-person { display: grid; grid-template-columns: 32px minmax(0, 1fr) 18px; align-items: center; gap: var(--b-3); min-height: 56px; padding: var(--b-2) var(--b-4) var(--b-2) var(--b-3); }
.jp-person[hidden], .jp-people-none[hidden] { display: none; }
.jp-person-text { display: grid; gap: 1px; min-width: 0; }
.jp-person-text strong { font: var(--b-ui-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-person-text > span { display: flex; align-items: center; gap: 6px; font: var(--b-meta); font-weight: 400; color: var(--soft); white-space: nowrap; }
.jp-person-text .jp-pill { margin-left: 0; }
.jp-person.on .jp-avatar { background: var(--paper); }
.jp-people-none { margin: 0; padding: var(--b-4); border: 1px dashed var(--rule2); border-radius: var(--r); text-align: center; font: var(--b-small); color: var(--soft); }

/* account: who is signed in, said once and large */
.jp-who { display: flex; align-items: center; gap: var(--b-4); min-width: 0; padding: var(--b-5); border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--bg); }
.jp-who .jp-avatar { width: 56px; height: 56px; background: var(--paper); font-size: 24px; }
.jp-who-text { flex: 1; min-width: 0; }
.jp-who h4 { margin: 0; font: var(--b-display-l); letter-spacing: -.005em; overflow-wrap: anywhere; }
.jp-who p { margin: 2px 0 0; font: var(--b-small); color: var(--soft); }

/* other modules' panels: the dialog has given the heading, so theirs steps back and only
   its "Saved" note stays, in the margin above the panel */
.jp-dlg .jp-mount > .jp-set { position: relative; padding: 0; border: 0; }
.jp-dlg .jp-mount > .jp-set > .jp-set-head:first-child { position: absolute; top: calc(-1 * var(--b-5)); right: 0; }
.jp-dlg .jp-mount > .jp-set > .jp-set-head:first-child .eyebrow, .jp-dlg .jp-mount > .jp-set > .jp-set-sub { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1279px) { .jp-top-tool span { display: none; } .jp-top-tool { padding: 0; width: var(--b-ctl); } }
@media (max-width: 1023px) { .jp.rail-open { grid-template-columns: var(--b-side) minmax(0, 1fr); } }
@media (max-width: 900px) {
  .jp-dlg { grid-template-columns: 208px minmax(0, 1fr); }
  .jp-dlg-head { padding-left: var(--b-6); }
  .jp-dlg-body { padding: var(--b-5) var(--b-6) var(--b-8); }
}
@media (max-width: 860px) {
  .jp, .jp.rail-open { grid-template-columns: minmax(0, 1fr); }
  .jp-side { position: fixed; inset: 0 auto 0 0; width: min(312px, 86vw); z-index: 3; transform: translateX(-100%); visibility: hidden; transition: transform var(--b-med) var(--ease), visibility 0s var(--b-med); box-shadow: none; }
  body.jp-drawer .jp-side { transform: none; visibility: visible; transition: transform var(--b-med) var(--ease); box-shadow: var(--shadow-3); }
  body.jp-drawer .jp-shade { display: block; position: fixed; inset: 0; z-index: 2; background: color-mix(in srgb, var(--night) 46%, transparent); animation: jp-fade var(--b-med) ease-out both; }
  .jp-menu { display: inline-flex; align-items: center; justify-content: center; flex: none; }
  .jp-top { gap: var(--b-2); padding: 0 var(--b-2); }
  .jp-title { font-size: 19px; }
  .jp-back span { display: none; }
  .jp-back { width: var(--b-ctl); padding: 0; justify-content: center; margin-left: 9px; }
  .jp-back::before { left: -6px; }
  .jp-back .icon { width: var(--b-icon-s); height: var(--b-icon-s); }
  .jp-tool, .jp-top .theme-toggle, .jp-back { width: 36px; height: 36px; }
  .jp-msg-tools .jp-tool { width: var(--b-ctl); height: var(--b-ctl); }
  .jp-thread, .jp-composer-wrap { width: calc(100% - 24px); }
  .jp-thread { gap: var(--b-6); padding: var(--b-5) 0 var(--b-8); }
  .jp-answer { grid-template-columns: 18px minmax(0, 1fr); gap: var(--b-3); }
  .jp-answer > .jp-mark { width: 18px; height: 18px; margin-top: 4px; }
  .jp-user .jp-bubble { max-width: 90%; }
  .jp-hero { padding: var(--b-4) var(--b-3) var(--b-6); align-content: start; }
  .jp-hero-mark { margin-top: 6vh; }
  .jp-hero h1 { font-size: 30px; }
  .jp-hero-sub { margin-bottom: var(--b-6); }
  .jp-banner-line { padding: var(--b-2) var(--b-3); font-size: 12.5px; }
  .jp-status { margin-left: 0; }
  .jp-chat, .jp-pop-item { height: 44px; }
  .jp-chat::before { top: 14px; bottom: 14px; }
  .jp-row-more { top: 8px; }
  .jp-mic, .jp-send { width: var(--b-field); height: var(--b-field); }
  .jp-flag, .jp-flags .bpk-btn { height: 36px; min-height: 36px; }
}
@media (max-width: 700px) {
  .jp-sheet.settings { padding: 0; }
  .jp-dlg { grid-template-columns: minmax(0, 1fr); width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0; }
  .jp-dlg.at-list .jp-dlg-pane, .jp-dlg:not(.at-list) .jp-dlg-side { display: none; }
  .jp-dlg > .jp-sheet-close { top: var(--b-3); right: var(--b-2); width: var(--b-field); height: var(--b-field); }
  .jp-dlg-side { padding: var(--b-5) var(--b-4); border-right: 0; overflow-y: auto; }
  .jp-dlg-brand { padding: 0 var(--b-1) var(--b-5); }
  .jp-dlg-nav { flex: none; gap: 0; padding: 0; margin: 0; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper); overflow: hidden; }
  .jp-dlg-tab { min-height: 52px; padding: var(--b-2) var(--b-4); border-radius: 0; font-size: 15px; color: var(--ink); }
  .jp-dlg-tab + .jp-dlg-tab { border-top: 1px solid var(--rule); }
  .jp-dlg-tab::before { display: none; }
  .jp-dlg-tab.on, .jp-dlg-tab.on:hover { background: transparent; font-weight: 500; }
  .jp-dlg-tab > .icon:first-child { width: 18px; height: 18px; }
  .jp-dlg-tab > .jp-dlg-go { display: block; width: var(--b-icon-s); height: var(--b-icon-s); }
  .jp-dlg-tab-hint { font-size: 12.5px; }
  .jp-dlg-foot { justify-content: center; margin: var(--b-4) var(--b-1) 0; }
  .jp-dlg-back { display: inline-flex; flex: none; width: var(--b-field); height: var(--b-field); margin: -6px 0 0 -10px; }
  .jp-dlg-back .icon { width: 18px; height: 18px; }
  .jp-dlg-head { min-height: 0; padding: var(--b-4) 56px var(--b-4) var(--b-4); gap: 2px; }
  .jp-dlg-head h3 { font-size: 26px; line-height: 28px; }
  .jp-dlg-about { font-size: 12.5px; }
  .jp-dlg-body { padding: var(--b-5) var(--b-4) var(--b-10); }
  .jp-sec { gap: var(--b-6); }
  .jp-card > .jp-row { padding: var(--b-4); }
  .jp-style-now, .jp-who { padding: var(--b-4); }
  .jp-style-now-text h4, .jp-who h4 { font-size: 26px; }
  .jp-find { flex-basis: 100%; margin: 0; }
  .jp-team-head .jp-group-about { flex-basis: 100%; }
  .jp-style-tabs button, .jp-card .jp-seg button { min-height: 36px; padding: 0 6px; }
  .jp-find input { height: var(--b-field); font-size: 16px; }
  .jp-person { min-height: 60px; }
  .jp-card .jp-format { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jp-keys { grid-template-columns: minmax(0, 1fr); }
  .jp-keys dt { min-height: 0; padding-top: var(--b-3); }
  .jp-keys dd { min-height: 0; padding-bottom: var(--b-3); border-top: 0; }
  .jp-empty { padding: 48px var(--b-3); }
}
@media (max-width: 560px) {
  .jp-seg button { padding: 0 10px; }
  .jp-banner-line span { order: 3; flex-basis: 100%; }
  .jp-banner-off { margin-left: auto; }
  .jp-rail-btn { display: none; }
  .jp-tool-text { width: var(--b-ctl); padding: 0; }
  .jp-tool-text span, .jp-flag span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .jp-flag { width: 36px; padding: 0; justify-content: center; }
  .jp-flags .bpk-btn { max-width: 160px; }
  .jp-flags .bpk-fund { display: none; }
  .jp-starters { grid-template-columns: minmax(0, 1fr); }
  .jp-who { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .jp, .jp *, .jp-sheet, .jp-sheet *, .jp-pop, .jp *::before, .jp-sheet *::before { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* chats that share a title, as one row with a count; its rows sit on a hairline rail */
.jp-stack-head .jp-chat-open { gap: 6px; padding-left: 10px; }
.jp-stack-chev { transition: transform var(--b-med) var(--ease); }
.jp-stack.open .jp-stack-chev { transform: rotate(90deg); }
.jp-stack-n { flex: none; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--b-selected); color: var(--soft); font: var(--b-meta); font-variant-numeric: tabular-nums; text-align: center; }
.jp-stack-rows { position: relative; margin-left: 15px; padding-left: 7px; border-left: 1px solid var(--rule); }
.jp-stack-rows .jp-chat-open { color: var(--soft); font-size: 12.5px; }
.jp-stack-rows .jp-chat.on .jp-chat-open { color: var(--ink); }
/* a top-bar tool with nothing to act on yet steps out instead of sitting greyed */
.jp-top-tool:disabled { display: none; }