/* ── Fingerprint tab and the SOUL.md editor (js/components/fingerprintPanel.js, soulEditor.js) ── */

:root {
  --soul-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --soul-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── The tab (inside .agent-panel, so it uses the panel's --ap-* tokens) ── */

.fp-root { display: flex; flex-direction: column; gap: 14px; }

.fp-name {
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  border-radius: 14px; background: var(--ap-fill);
}
.fp-name-value { min-height: 22px; font-size: 0.9375rem; font-weight: 600; color: var(--ap-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-name-label { font-size: 0.8125rem; font-weight: 600; color: var(--ap-ink); }

.fp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px;
  border: 0; border-radius: 10px; font: inherit; font-size: 0.8125rem; font-weight: 500; cursor: pointer;
  transition: transform 160ms var(--soul-ease-out), background-color 150ms ease;
}
.fp-btn:active:not(:disabled) { transform: scale(0.97); }
.fp-btn:disabled { cursor: default; opacity: 0.55; }
.fp-btn:focus-visible { outline: 2px solid var(--ap-accent); outline-offset: 2px; }
.fp-btn svg { width: 14px; height: 14px; }
.fp-btn-edit { width: 100%; background: var(--ap-bg); color: var(--ap-ink); box-shadow: inset 0 0 0 1px var(--ap-line); }
.fp-btn-quiet { background: transparent; color: var(--ap-muted); }
.fp-btn-primary { background: var(--ap-accent); color: #fff; }
[data-theme="dark"] .fp-btn-primary { color: #0b1020; }
@media (hover: hover) and (pointer: fine) {
  .fp-btn-edit:hover:not(:disabled) { background: var(--ap-fill); }
  .fp-btn-quiet:hover:not(:disabled) { color: var(--ap-ink); }
}

.fp-rename { display: flex; flex-direction: column; gap: 8px; }
.fp-rename-input {
  height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--ap-line);
  background: var(--ap-bg); color: var(--ap-ink); font: inherit; font-size: 0.9375rem;
}
.fp-rename-input:focus { outline: 2px solid var(--ap-accent); outline-offset: 0; border-color: transparent; }
.fp-rename-error { min-height: 0; font-size: 0.75rem; color: #dc2626; }
.fp-rename-error:empty { display: none; }
[data-theme="dark"] .fp-rename-error { color: #fca5a5; }
.fp-rename-actions { display: flex; justify-content: flex-end; gap: 6px; }

.fp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fp-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  aspect-ratio: 1 / 0.95; padding: 14px; border: 0; border-radius: 16px; overflow: hidden;
  color: #fff; text-align: left; font: inherit; isolation: isolate;
}
/* A soft light across the top, like a lit card */
.fp-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 70% at 20% 0%, rgba(255, 255, 255, 0.28), transparent 60%);
}
.fp-card-soul {
  background: linear-gradient(150deg, #ff4d6d 0%, #e11d48 45%, #9f1239 100%);
  box-shadow: 0 10px 24px -14px rgba(225, 29, 72, 0.75);
  cursor: pointer; transition: transform 180ms var(--soul-ease-out), box-shadow 180ms ease;
}
.fp-card-memory {
  background: linear-gradient(150deg, #60a5fa 0%, #3b5bdb 50%, #3730a3 100%);
  box-shadow: 0 10px 24px -14px rgba(59, 91, 219, 0.75);
}
.fp-card-soul:active { transform: scale(0.97); }
.fp-card-soul:focus-visible { outline: 2px solid var(--ap-accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .fp-card-soul:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(225, 29, 72, 0.85); }
  .fp-card-soul:hover:active { transform: translateY(-2px) scale(0.97); }
}
.fp-card-title { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.fp-card-sub { font-family: var(--soul-mono); font-size: 0.5625rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.82; }
.fp-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 6px; }
.fp-card-date { font-family: var(--soul-mono); font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-card-foot svg { width: 16px; height: 16px; flex: none; fill: rgba(255, 255, 255, 0.92); stroke: none; }

.fp-hint { margin: 2px 2px 0; font-size: 0.75rem; line-height: 1.45; color: var(--ap-muted); text-wrap: pretty; }

/* Saved from your portal: what Starman keeps of what read skills read (the read cache) */
.fp-kept { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--ap-line); }
.fp-kept-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.fp-kept-title { font-size: 0.8125rem; font-weight: 600; color: var(--ap-ink); }
.fp-kept-all { height: 28px; padding: 0 8px; font-size: 0.75rem; }
.fp-kept-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fp-kept-row { border-radius: 12px; background: var(--ap-fill); }
.fp-kept-line { display: flex; align-items: center; gap: 4px; padding: 4px 8px 4px 4px; }
/* The row opens what is saved in a dialog (keptReadDialog.js): the whole left part is the button */
.fp-kept-open {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 8px;
  border: 0; border-radius: 9px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: transform 160ms var(--soul-ease-out), background-color 160ms ease;
}
.fp-kept-open:active { transform: scale(0.985); }
.fp-kept-open:focus-visible { outline: 2px solid var(--ap-accent); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) {
  .fp-kept-open:hover { background: var(--ap-bg); }
  .fp-kept-open:hover .fp-kept-chevron { color: var(--ap-muted); transform: translateX(1px); }
}
.fp-kept-main { flex: 1; min-width: 0; display: block; }
.fp-kept-skill { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--ap-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-kept-meta { display: block; margin-top: 2px; font-size: 0.71875rem; color: var(--ap-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fp-kept-chevron { flex: none; display: inline-flex; color: var(--ap-faint); transition: transform 160ms var(--soul-ease-out), color 160ms ease; }
.fp-kept-chevron svg { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) { .fp-kept-open:active, .fp-kept-open:hover .fp-kept-chevron { transform: none; } }
.fp-kept-row.is-stale .fp-kept-skill { color: var(--ap-muted); }
.fp-kept-forget {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border: 0; border-radius: 8px; background: transparent; color: var(--ap-muted); cursor: pointer;
  transition: transform 160ms var(--soul-ease-out), color 160ms ease, background-color 160ms ease;
}
.fp-kept-forget svg { width: 14px; height: 14px; }
.fp-kept-forget:active { transform: scale(0.94); }
.fp-kept-forget:focus-visible { outline: 2px solid var(--ap-accent); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .fp-kept-forget:hover { color: var(--ap-ink); background: var(--ap-bg); } }
.fp-kept-empty { margin: 0; font-size: 0.75rem; line-height: 1.45; color: var(--ap-muted); text-wrap: pretty; }
.fp-kept-retry { border: 0; padding: 0; background: none; font: inherit; color: var(--ap-accent); cursor: pointer; text-decoration: underline; }
.fp-login { margin-top: 14px; height: 34px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--ap-accent); color: #fff; font: inherit; font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: transform 160ms var(--soul-ease-out); }
.fp-login:active { transform: scale(0.97); }
[data-theme="dark"] .fp-login { color: #0b1020; }

.fp-skeleton { display: inline-block; width: 92px; height: 12px; border-radius: 6px; background: var(--ap-line); animation: fp-pulse 1.2s ease-in-out infinite; vertical-align: middle; }
.fp-skeleton-light { width: 64px; height: 9px; background: rgba(255, 255, 255, 0.35); }
@keyframes fp-pulse { 50% { opacity: 0.5; } }

/* ── The editor ── */

.se-root {
  --se-ink: #0f172a; --se-muted: #64748b; --se-line: #e8ebf0; --se-fill: #f1f5f9; --se-bg: #ffffff;
  --se-accent: #2563eb; --se-pill-bg: #eef2ff; --se-pill-ink: #4338ca; --se-pill-line: #c7d2fe;
  --se-warn-bg: #fff7ed; --se-warn-ink: #9a3412; --se-error: #dc2626;
  position: fixed; inset: 0; z-index: 1600; display: flex; flex-direction: column;
  background: var(--se-bg); color: var(--se-ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  opacity: 0; transform: translateY(8px) scale(0.99);
  transition: opacity 200ms var(--soul-ease-out), transform 200ms var(--soul-ease-out);
}
[data-theme="dark"] .se-root {
  --se-ink: #f1f5f9; --se-muted: #94a3b8; --se-line: rgba(255, 255, 255, 0.08); --se-fill: rgba(255, 255, 255, 0.06);
  --se-bg: #0d1017; --se-accent: #7aa2ff; --se-pill-bg: rgba(122, 162, 255, 0.14); --se-pill-ink: #c7d7ff;
  --se-pill-line: rgba(122, 162, 255, 0.35); --se-warn-bg: rgba(251, 146, 60, 0.12); --se-warn-ink: #fdba74; --se-error: #fca5a5;
}
.se-root.is-open { opacity: 1; transform: none; }
.se-root.is-leaving { opacity: 0; transform: translateY(6px) scale(0.99); transition-duration: 150ms; }
.se-root.no-motion, .se-root.no-motion.is-leaving { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .se-root, .se-root.is-leaving { transform: none; transition: opacity 150ms ease; }
}

.se-head {
  flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  height: 56px; padding: 0 16px; border-bottom: 1px solid var(--se-line);
}
.se-head-start { display: flex; align-items: center; gap: 10px; min-width: 0; }
.se-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.se-title { margin: 0; font-size: 0.9375rem; font-weight: 600; white-space: nowrap; }
.se-title:focus { outline: none; }
.se-status { min-width: 0; font-size: 0.75rem; color: var(--se-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.se-status.is-error { color: var(--se-error); }
.se-link { border: 0; padding: 0; background: none; color: var(--se-accent); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.se-toolbar { display: flex; align-items: center; gap: 2px; }
.se-tool {
  display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: var(--se-muted); font: inherit; cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, transform 120ms var(--soul-ease-out);
}
.se-tool svg { width: 16px; height: 16px; }
.se-tool-text { font-size: 0.75rem; font-weight: 600; }
.se-tool[aria-pressed="true"] { background: var(--se-fill); color: var(--se-ink); }
.se-tool:active { transform: scale(0.94); }
.se-tool:focus-visible, .se-icon-btn:focus-visible, .se-btn:focus-visible, .se-menu-item:focus-visible { outline: 2px solid var(--se-accent); outline-offset: 1px; }
.se-tool-sep { width: 1px; height: 18px; margin: 0 6px; background: var(--se-line); }
@media (hover: hover) and (pointer: fine) {
  .se-tool:hover { background: var(--se-fill); color: var(--se-ink); }
  .se-icon-btn:hover { background: var(--se-fill); color: var(--se-ink); }
}

.se-head-end { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.se-icon-btn {
  display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px;
  background: transparent; color: var(--se-muted); cursor: pointer; transition: transform 120ms var(--soul-ease-out);
}
.se-icon-btn:active { transform: scale(0.94); }
.se-icon-btn svg { width: 18px; height: 18px; }
.se-more-wrap { position: relative; }
.se-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 2; min-width: 240px; padding: 6px;
  border-radius: 12px; background: var(--se-bg); border: 1px solid var(--se-line);
  box-shadow: 0 14px 34px -12px rgba(15, 23, 42, 0.28); transform-origin: top right;
  animation: se-pop 150ms var(--soul-ease-out);
}
@keyframes se-pop { from { opacity: 0; transform: scale(0.96); } }
@media (prefers-reduced-motion: reduce) { .se-menu { animation: none; } }
.se-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--se-ink); font: inherit; font-size: 0.8125rem; text-align: left; cursor: pointer;
}
.se-menu-item svg { width: 15px; height: 15px; color: var(--se-muted); }
.se-menu-item[hidden] { display: none; }
.se-menu-item:hover, .se-menu-item:focus-visible { background: var(--se-fill); }

.se-question { display: flex; align-items: center; gap: 6px; margin-right: 6px; min-width: 0; }
.se-question[hidden] { display: none; }
.se-question-text { font-size: 0.8125rem; color: var(--se-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.se-btn {
  height: 30px; padding: 0 12px; border: 0; border-radius: 8px; flex: none;
  background: var(--se-fill); color: var(--se-ink); font: inherit; font-size: 0.8125rem; font-weight: 500; cursor: pointer;
  transition: transform 120ms var(--soul-ease-out);
}
.se-btn:active { transform: scale(0.97); }
.se-btn-primary { background: var(--se-accent); color: #fff; }
[data-theme="dark"] .se-btn-primary { color: #0b1020; }

.se-banner {
  flex: none; display: flex; align-items: center; gap: 10px; padding: 9px 16px;
  border-bottom: 1px solid var(--se-line); background: var(--se-fill); color: var(--se-muted); font-size: 0.8125rem;
}
.se-banner[hidden] { display: none; }
.se-banner svg { width: 15px; height: 15px; flex: none; }
.se-banner-warn { background: var(--se-warn-bg); color: var(--se-warn-ink); justify-content: space-between; flex-wrap: wrap; }
.se-banner-actions { display: flex; gap: 6px; }

.se-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.se-doc { max-width: 720px; margin: 0 auto; padding: 48px 24px 120px; }
.se-loading, .se-failed { padding: 24px 0; color: var(--se-muted); font-size: 0.9375rem; display: flex; align-items: center; gap: 12px; }
.se-loading[hidden], .se-failed[hidden] { display: none; }

.se-editor {
  min-height: 60vh; outline: none; font-size: 1rem; line-height: 1.65; color: var(--se-ink);
  caret-color: var(--se-accent); overflow-wrap: anywhere;
}
.se-editor > :first-child { margin-top: 0; }
.se-editor h1 { margin: 0 0 6px; font-size: 2rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.se-editor h2 { margin: 28px 0 6px; font-size: 1.25rem; line-height: 1.3; font-weight: 650; letter-spacing: -0.01em; }
.se-editor h3 { margin: 22px 0 4px; font-size: 1.0625rem; font-weight: 650; }
.se-editor p { margin: 8px 0; }
.se-editor ul, .se-editor ol { margin: 6px 0; padding-left: 1.4em; }
.se-editor li { margin: 3px 0; padding-left: 2px; }
.se-editor li::marker { color: var(--se-muted); }
.se-editor em { color: var(--se-muted); }
.se-editor strong { font-weight: 650; }

/* A blank: a pill to type over */
.soul-pill {
  display: inline-block; padding: 0 7px; margin: 0 1px; border-radius: 6px; line-height: 1.5;
  background: var(--se-pill-bg); color: var(--se-pill-ink); box-shadow: inset 0 0 0 1px var(--se-pill-line);
  font-size: 0.9em; font-style: normal; font-weight: 450; cursor: text; user-select: none; vertical-align: baseline;
  transition: box-shadow 120ms ease;
}
.soul-pill.is-selected { box-shadow: inset 0 0 0 2px var(--se-accent); }

/* Phones: the toolbar gets a row of its own */
@media (max-width: 720px) {
  .se-head { grid-template-columns: 1fr auto; grid-template-rows: 56px auto; height: auto; padding: 0 12px; row-gap: 0; }
  .se-toolbar { grid-column: 1 / -1; grid-row: 2; padding: 6px 0 8px; overflow-x: auto; }
  .se-head-end { grid-column: 2; grid-row: 1; }
  .se-question { position: absolute; top: 56px; left: 0; right: 0; z-index: 3; padding: 8px 12px; margin: 0; background: var(--se-bg); border-bottom: 1px solid var(--se-line); }
  .se-doc { padding: 28px 16px 96px; }
  .se-editor h1 { font-size: 1.625rem; }
}

/* The import sheet: a small dialog over the document */
.se-sheet-backdrop {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px;
  background: rgba(15, 23, 42, 0.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: se-fade 160ms ease-out;
}
.se-sheet-backdrop[hidden] { display: none; }
[data-theme="dark"] .se-sheet-backdrop { background: rgba(0, 0, 0, 0.5); }
.se-sheet {
  position: relative; width: min(560px, 100%); max-height: min(720px, calc(100vh - 32px)); display: flex; flex-direction: column;
  padding: 32px 32px 28px; border-radius: 24px; background: var(--se-bg); color: var(--se-ink);
  box-shadow: 0 30px 80px -24px rgba(15, 23, 42, 0.45); border: 1px solid var(--se-line);
  animation: se-rise 220ms var(--soul-ease-out);
}
@keyframes se-fade { from { opacity: 0; } }
@keyframes se-rise { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .se-sheet, .se-sheet-backdrop { animation: none; } }

.se-sheet-close {
  position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 34px; height: 34px;
  border: 0; border-radius: 10px; background: transparent; color: var(--se-muted); cursor: pointer;
  transition: background-color 120ms ease, transform 120ms var(--soul-ease-out);
}
.se-sheet-close svg { width: 20px; height: 20px; }
.se-sheet-close:active:not(:disabled) { transform: scale(0.94); }
.se-sheet-close:disabled { opacity: 0.35; cursor: default; }
.se-sheet-close:focus-visible { outline: 2px solid var(--se-accent); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .se-sheet-close:hover:not(:disabled) { background: var(--se-fill); color: var(--se-ink); } }

.se-sheet-head { display: flex; align-items: center; gap: 22px; padding-right: 36px; }
.se-sheet-heading { min-width: 0; }
/* The document mark: a soft tile with a lit top edge, the page inside in a blue gradient */
.se-sheet-icon {
  flex: none; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 22px;
  background: linear-gradient(160deg, #f5f8ff 0%, #e6eeff 100%);
  box-shadow: 0 10px 24px -12px rgba(37, 99, 235, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(37, 99, 235, 0.08);
}
.se-sheet-icon svg { width: 44px; height: 44px; filter: drop-shadow(0 4px 6px rgba(37, 99, 235, 0.28)); }
[data-theme="dark"] .se-sheet-icon {
  background: linear-gradient(160deg, rgba(122, 162, 255, 0.18) 0%, rgba(122, 162, 255, 0.08) 100%);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(122, 162, 255, 0.15);
}
.se-sheet-title { margin: 0; font-size: 1.5rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; }
.se-sheet-title:focus { outline: none; }
.se-sheet-sub { margin: 6px 0 0; font-size: 1.0625rem; font-weight: 500; color: var(--se-muted); text-wrap: pretty; }
.se-sheet-sub[hidden] { display: none; }
.se-sheet-note { margin: 6px 0 0; font-size: 0.875rem; color: var(--se-muted); opacity: 0.85; text-wrap: pretty; }

.se-progress { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.se-progress[hidden] { display: none; }
.se-progress-track { flex: 1; height: 10px; border-radius: 999px; background: var(--se-fill); overflow: hidden; }
.se-progress-bar {
  height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2563eb, #3b82f6);
  transform: scaleX(0); transform-origin: left; transition: transform 260ms var(--soul-ease-out);
}
.se-progress-count { flex: none; font-size: 0.9375rem; color: var(--se-muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .se-progress-bar { transition: none; } }

.se-sheet-body { flex: 1; min-height: 0; overflow-y: auto; margin: 20px -6px 0; padding: 0 6px 2px; }
.se-sheet-msg { margin: 6px 0; font-size: 0.9375rem; line-height: 1.5; color: var(--se-ink); text-wrap: pretty; }
.se-sheet-msg.is-error { color: var(--se-error); }
.se-sheet-msg.is-note { padding: 10px 12px; border-radius: 12px; background: var(--se-warn-bg); color: var(--se-warn-ink); font-size: 0.8125rem; }
.se-sheet-aside { margin: 12px 2px 0; font-size: 0.8125rem; color: var(--se-muted); }
.se-sheet-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.se-sheet-foot:empty { display: none; }
.se-sheet-foot .se-btn { height: 40px; padding: 0 18px; border-radius: 12px; font-size: 0.875rem; }
.se-sheet-foot .se-btn:disabled { opacity: 0.5; cursor: default; }

.se-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.se-row {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 12px 18px;
  border: 0; border-radius: 16px; background: var(--se-fill); color: var(--se-ink); font: inherit; text-align: left;
}
.se-row.is-choice { cursor: pointer; transition: background-color 120ms ease, transform 120ms var(--soul-ease-out); }
.se-row.is-choice:active { transform: scale(0.99); }
.se-row.is-choice:focus-visible { outline: 2px solid var(--se-accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .se-row.is-choice:hover { background: color-mix(in srgb, var(--se-fill) 70%, var(--se-line)); } }
.se-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.se-row-label { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--se-muted); }
.se-row-value { font-size: 1.0625rem; font-weight: 550; color: var(--se-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.se-row-note { font-size: 0.8125rem; color: var(--se-warn-ink); overflow-wrap: anywhere; }

/* The mark on the right: a green tick (chosen, or done), an empty ring (not chosen, or waiting), a spinner */
.se-row-mark {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}
.se-row-mark.is-on, .se-row-mark.is-done { background: #dcfce7; color: #16a34a; }
[data-theme="dark"] .se-row-mark.is-on, [data-theme="dark"] .se-row-mark.is-done { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
.se-row-mark.is-off, .se-row-mark.is-wait { box-shadow: inset 0 0 0 2px var(--se-line); }
.se-row-mark.is-done svg { animation: se-tick 220ms var(--soul-ease-out); }
@keyframes se-tick { from { opacity: 0; transform: scale(0.6); } }
.se-row-spin {
  width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--se-line); border-top-color: var(--se-accent);
  animation: se-spin 800ms linear infinite;
}
@media (prefers-reduced-motion: reduce) { .se-row-mark.is-done svg { animation: none; } .se-row-spin { animation-duration: 1.6s; } }

@media (max-width: 520px) {
  .se-sheet { padding: 24px 18px 20px; border-radius: 20px; }
  .se-sheet-title { font-size: 1.25rem; }
  .se-sheet-head { gap: 14px; }
  .se-sheet-icon { width: 56px; height: 56px; border-radius: 16px; }
  .se-sheet-icon svg { width: 30px; height: 30px; }
  .se-sheet-sub { font-size: 0.9375rem; }
  .se-row { min-height: 64px; padding: 10px 14px; }
}

.se-spinner {
  display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
  border-radius: 50%; border: 2px solid var(--se-line); border-top-color: var(--se-accent);
  animation: se-spin 700ms linear infinite;
}
@keyframes se-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .se-spinner { animation-duration: 1.6s; } }

/* ── What one kept read holds: a dialog over the dashboard (js/components/keptReadDialog.js) ── */
/* Tokens as the Recents record dialog's (recents-dialog.css .rd-root), so both read as one family */
.kr-root {
  --kr-ink: #0f172a; --kr-muted: #64748b; --kr-faint: #94a3b8; --kr-line: #e8ebf0; --kr-fill: #f1f5f9;
  --kr-bg: #ffffff; --kr-accent: #2563eb; --kr-soft: #334155; --kr-head: #f8fafc;
  --kr-danger: #b91c1c; --kr-danger-bg: rgba(220, 38, 38, 0.08);
  --kr-backdrop: rgba(15, 23, 42, 0.4);
  --kr-shadow: 0 24px 64px -16px rgba(15, 23, 42, 0.28), 0 2px 6px rgba(15, 23, 42, 0.06);
  position: fixed; inset: 0; z-index: 1500; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; color: var(--kr-ink); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}
[data-theme="dark"] .kr-root {
  --kr-ink: #f1f5f9; --kr-muted: #94a3b8; --kr-faint: #64748b; --kr-line: rgba(255, 255, 255, 0.08); --kr-fill: rgba(255, 255, 255, 0.06);
  --kr-bg: #11141d; --kr-accent: #7aa2ff; --kr-soft: #cbd5e1; --kr-head: #161a25;
  --kr-danger: #fca5a5; --kr-danger-bg: rgba(248, 113, 113, 0.12);
  --kr-backdrop: rgba(0, 0, 0, 0.6);
  --kr-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}
.kr-backdrop { position: absolute; inset: 0; background: var(--kr-backdrop); }
.kr-panel {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  width: min(640px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 48px)); max-height: min(680px, calc(100dvh - 48px));
  background: var(--kr-bg); border: 1px solid var(--kr-line); border-radius: 16px; box-shadow: var(--kr-shadow);
  transform-origin: center;
}
/* Motion: pointer opens fade the backdrop and scale the panel from 0.96; keyboard opens and Escape don't animate */
.kr-root[data-motion="pointer"] .kr-backdrop { transition: opacity 200ms var(--soul-ease-out); }
.kr-root[data-motion="pointer"] .kr-panel { transition: opacity 200ms var(--soul-ease-out), transform 200ms var(--soul-ease-out); }
.kr-root[data-state="enter"] .kr-backdrop, .kr-root[data-state="leave"] .kr-backdrop { opacity: 0; }
.kr-root[data-state="enter"] .kr-panel { opacity: 0; transform: scale(0.96); }
.kr-root[data-state="leave"] { pointer-events: none; }
.kr-root[data-state="leave"] .kr-backdrop, .kr-root[data-state="leave"] .kr-panel { transition-duration: 150ms; }
.kr-root[data-state="leave"] .kr-panel { opacity: 0; transform: scale(0.98); }

.kr-head { flex: none; display: flex; align-items: flex-start; gap: 14px; padding: 18px 16px 16px 24px; border-bottom: 1px solid var(--kr-line); }
.kr-tile { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--kr-fill); color: var(--kr-soft); }
.kr-tile svg { width: 18px; height: 18px; }
.kr-heading { flex: 1; min-width: 0; outline: none; padding-top: 1px; }
.kr-title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--kr-ink); text-wrap: balance; }
.kr-meta { margin: 3px 0 0; font-size: 0.8125rem; color: var(--kr-muted); font-variant-numeric: tabular-nums; }
.kr-icon-btn {
  flex: none; width: 32px; height: 32px; margin-top: -2px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: none; color: var(--kr-muted); cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, transform 120ms var(--soul-ease-out);
}
.kr-icon-btn svg { width: 18px; height: 18px; }
.kr-icon-btn:active { transform: scale(0.97); }
.kr-icon-btn:focus-visible { outline: 2px solid var(--kr-accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .kr-icon-btn:hover { background: var(--kr-fill); color: var(--kr-ink); } }

.kr-body { flex: 1; min-height: 160px; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 20px; padding: 18px 24px 22px; }
.kr-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kr-list-title { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--kr-soft); }
.kr-count { font-weight: 500; color: var(--kr-faint); font-variant-numeric: tabular-nums; }
.kr-table-wrap { overflow: auto; max-width: 100%; border: 1px solid var(--kr-line); border-radius: 12px; }
.kr-table-wrap:focus-visible { outline: 2px solid var(--kr-accent); outline-offset: 2px; }
.kr-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.8125rem; line-height: 1.4; }
.kr-table th {
  padding: 9px 14px; background: var(--kr-head); border-bottom: 1px solid var(--kr-line);
  font-size: 0.71875rem; font-weight: 600; color: var(--kr-muted); text-align: left; white-space: nowrap;
}
.kr-table td { padding: 9px 14px; border-bottom: 1px solid var(--kr-line); color: var(--kr-ink); vertical-align: top; font-variant-numeric: tabular-nums; min-width: 64px; }
.kr-table td:first-child { font-weight: 500; min-width: 160px; overflow-wrap: anywhere; }
.kr-table tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) { .kr-table tbody tr:hover td { background: var(--kr-fill); } }
.kr-values { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; margin: 0; border: 1px solid var(--kr-line); border-radius: 12px; overflow: hidden; font-size: 0.8125rem; }
.kr-values > div { display: contents; }
.kr-values dt, .kr-values dd { padding: 9px 14px; border-bottom: 1px solid var(--kr-line); }
.kr-values > div:last-child dt, .kr-values > div:last-child dd { border-bottom: 0; }
.kr-values dt { color: var(--kr-muted); background: var(--kr-head); }
.kr-values dd { margin: 0; color: var(--kr-ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.kr-picture { display: block; max-width: 100%; max-height: 160px; border-radius: 6px; }
.kr-faint { color: var(--kr-faint); }
.kr-note { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--kr-muted); text-wrap: pretty; }
.kr-link { padding: 0; border: 0; background: none; font: inherit; color: var(--kr-accent); cursor: pointer; text-decoration: underline; }
.kr-loading { display: flex; flex-direction: column; gap: 10px; }
.kr-skeleton { display: block; height: 14px; border-radius: 7px; background: var(--kr-fill); animation: fp-pulse 1.2s ease-in-out infinite; }
.kr-skeleton:first-child { width: 40%; }
/* The records arrive: they fade in once (the body is drawn again only when what it shows changes) */
.kr-body.is-ready > * { animation: kr-in 200ms var(--soul-ease-out) both; }
@keyframes kr-in { from { opacity: 0; transform: translateY(4px); } }

.kr-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 12px 24px; border-top: 1px solid var(--kr-line); }
.kr-hint { display: flex; align-items: center; gap: 6px; margin: 0; min-width: 0; font-size: 0.75rem; color: var(--kr-muted); }
.kr-hint svg { flex: none; width: 13px; height: 13px; }
.kr-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.kr-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 10px;
  font: inherit; font-size: 0.8125rem; font-weight: 500; cursor: pointer;
  transition: transform 160ms var(--soul-ease-out), background-color 150ms ease, color 150ms ease;
}
.kr-btn svg { width: 14px; height: 14px; }
.kr-btn:active { transform: scale(0.97); }
.kr-btn:focus-visible { outline: 2px solid var(--kr-accent); outline-offset: 2px; }
.kr-btn-danger { background: transparent; color: var(--kr-danger); }
.kr-btn-primary { background: var(--kr-accent); color: #fff; }
[data-theme="dark"] .kr-btn-primary { color: #0b1020; }
@media (hover: hover) and (pointer: fine) {
  .kr-btn-danger:hover { background: var(--kr-danger-bg); }
  .kr-btn-primary:hover { filter: brightness(1.06); }
}
@media (max-width: 520px) {
  .kr-foot { flex-wrap: wrap; }
  .kr-hint { flex-basis: 100%; }
  .kr-actions { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .kr-root[data-motion="pointer"] .kr-panel { transition-property: opacity; }
  .kr-root[data-state] .kr-panel { transform: none; }
  .kr-btn:active, .kr-icon-btn:active { transform: none; }
  .kr-body.is-ready > * { animation-name: kr-fade; }
  @keyframes kr-fade { from { opacity: 0; } }
}