/* ============================================================================
   Paper Wallet — the whimsical skin.
   Loaded after personal.css / app.css / nav.css on every page. It changes how
   things look (paper, cards, pockets, receipts, ink) and never what they do.
   ========================================================================== */

:root {
  --paper: #f4efe5;
  --paper-2: #ece6d8;
  --paper-3: #e3dccb;
  --sheet: #fffdf8;
  --ink: #26221d;
  --ink-2: #4d463c;
  --muted: #6b6356;
  --line: #ddd5c4;
  --line-2: #cfc6b2;
  --accent: #2746c4;
  --accent-2: #1d36a0;
  --skill-a: #4a50d6; --skill-b: #2f34a8;
  --know-a: #237a56; --know-b: #185a3f;
  --pref-a: #ad540c; --pref-b: #8a4208;
  --sticky: #fff3a8; --sticky-ink: #6b5400;
  --danger: #a63a2f;
  --shadow-1: 0 1px 2px #2622160c, 0 10px 24px -14px #26221640;
  --shadow-2: 0 2px 4px #26221610, 0 24px 44px -20px #26221655;
  --display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --canvas: var(--paper); --surface: var(--sheet); --ink-soft: var(--ink-2); --ink-faint: var(--muted);
  --line-strong: var(--line-2); --indigo: var(--accent); --indigo-ink: var(--accent-2); --indigo-soft: #e6e9fa;
  --red: var(--danger); --purple: var(--accent);
  color-scheme: light;
}
:root[data-theme="night"] {
  --paper: #1d1a15; --paper-2: #26221c; --paper-3: #2f2a22; --sheet: #2a261f;
  --ink: #f1ebdf; --ink-2: #d7cfc0; --muted: #b3a995; --line: #3b3529; --line-2: #4a4334;
  --accent: #9fb0ff; --accent-2: #c1ccff; --indigo-soft: #2b3156;
  --sticky: #4d4213; --sticky-ink: #ffe98a; --danger: #ff9a8c;
  --shadow-1: 0 1px 2px #00000040, 0 10px 24px -14px #000000aa;
  --shadow-2: 0 2px 4px #00000050, 0 24px 44px -20px #000000cc;
  color-scheme: dark;
}

/* ---------- paper ---------- */
html { background: var(--paper); }
body, :root {
  font-family: var(--body);
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(var(--line) 1px, transparent 1.2px);
  background-size: 22px 22px;
  background-attachment: fixed;
}
::selection { background: #ffe98a; color: #26221d; }
h1, h2, h3, .count strong, .brand { font-family: var(--display); letter-spacing: 0; }
button, input, select, textarea { font-family: var(--body); }
a { color: var(--accent); }

/* ---------- header ---------- */
header.topbar { background: transparent; border: 0; }
header.topbar .brand { font-family: var(--display); font-weight: 600; font-size: 22px; color: var(--ink); gap: 12px; }
header.topbar .logo {
  width: 38px; height: 28px; border-radius: 7px 7px 9px 9px; background: linear-gradient(160deg, var(--skill-a), var(--skill-b));
  color: transparent; position: relative; box-shadow: inset 0 -6px 0 #0002, 0 2px 0 #0003; font-size: 0;
}
header.topbar .logo::before { content: ""; position: absolute; left: 6px; right: 6px; top: 7px; height: 4px; border-radius: 2px; background: #fff8; }
header.topbar .logo::after { content: ""; position: absolute; right: 7px; bottom: 6px; width: 9px; height: 9px; border-radius: 50%; background: #ffe98a; box-shadow: 0 0 0 2px #0002; }
header.topbar .views { background: var(--paper-3); border: 1px solid var(--line-2); border-radius: 14px; padding: 4px; }
header.topbar .views a { font-family: var(--body); border-radius: 10px; color: var(--muted); font-weight: 600; }
header.topbar .views a.on { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 0 var(--line-2), 0 2px 6px -2px #0002; }
header.topbar .views a:hover { color: var(--ink); }
header.topbar .toolbar button, header.topbar .toolbar .btn {
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--sheet); color: var(--ink);
  font-family: var(--body); transition: transform .12s ease, box-shadow .12s ease;
}
header.topbar .toolbar .quiet, header.topbar .toolbar .btn-quiet { background: transparent; border-color: transparent; color: var(--muted); }
header.topbar .toolbar .primary, header.topbar .toolbar .btn-primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
header.topbar .toolbar button:hover, header.topbar .toolbar .btn:hover { background: var(--sheet); border-color: var(--line-2); transform: translateY(-1px); box-shadow: var(--shadow-1); color: var(--ink); }
header.topbar .toolbar .primary:hover, header.topbar .toolbar .btn-primary:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
header.topbar .toolbar .account { color: var(--muted); }

/* ---------- buttons everywhere ---------- */
button, .btn, button.btn {
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--sheet); color: var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
button:hover, .btn:hover { background: var(--sheet); border-color: var(--line-2); box-shadow: var(--shadow-1); transform: translateY(-1px); }
button:active, .btn:active { transform: translateY(0); box-shadow: none; }
button:disabled, .btn:disabled { transform: none; box-shadow: none; }
.primary, button.btn-primary, .btn-primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.primary:hover, button.btn-primary:hover, .btn-primary:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.quiet, .btn-quiet, .btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.quiet:hover, .btn-quiet:hover, .btn-ghost:hover { background: var(--paper-2); border-color: transparent; color: var(--ink); box-shadow: none; }
.danger, .btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--sheet)); }
.link, .linkish, .link-quiet, .suggest-link, button.link {
  background: none; border: 0; border-radius: 0; color: var(--accent); padding: 0; box-shadow: none; transform: none;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 3px;
}
.link:hover, .linkish:hover, .link-quiet:hover, button.link:hover { background: none; box-shadow: none; transform: none; text-decoration-color: var(--accent); color: var(--accent-2); }
.link-quiet { color: var(--muted); text-decoration: none; }
.tag { color: var(--accent); }

/* ---------- intro ---------- */
main .intro .avatar {
  background: var(--sheet); color: var(--ink); border: 2px solid var(--ink); font-family: var(--display); font-style: italic; font-size: 14px;
  box-shadow: 3px 3px 0 var(--ink); transform: rotate(-6deg);
}
main .intro h1 { font-family: var(--display); font-weight: 600; font-size: 34px; letter-spacing: -0.3px; color: var(--ink); }
main .intro h1::first-letter { font-style: italic; }
main .intro p, main .intro .stat { color: var(--muted); }
main .intro .stat strong { font-family: var(--display); font-size: 17px; color: var(--ink); }
.stat-on strong { color: var(--accent) !important; }
.stat-warn strong { color: var(--pref-b) !important; }

/* ---------- sticky notes (drafts banner, warnings) ---------- */
#drafts.warning, .drafts, .warning, .warnings .warning, .guard-warn, .lint {
  background: var(--sticky); color: var(--sticky-ink); border: 0; border-radius: 3px 3px 14px 3px;
  box-shadow: var(--shadow-1); position: relative;
}
#drafts.warning::before, .drafts::before {
  content: ""; position: absolute; left: 50%; top: -8px; width: 72px; height: 16px; margin-left: -36px;
  background: #ffffff66; border: 1px solid #0000000f; transform: rotate(-1.5deg); backdrop-filter: blur(1px);
}
#drafts.warning { padding: 14px 16px; }
.drafts .linkish, #drafts .link { color: var(--sticky-ink); font-weight: 700; }
.warning-info { background: var(--indigo-soft); color: var(--accent-2); border-radius: 10px; }
.warning-block, .guard-block { background: #fde6e2; color: #7d2418; border-radius: 10px; }
:root[data-theme="night"] .warning-block, :root[data-theme="night"] .guard-block { background: #4a1f19; color: #ffb3a6; }

/* ---------- starter pack: a sample envelope while the wallet is empty ---------- */
.starter {
  display: flex; gap: 26px; align-items: center; margin: 0 0 24px; padding: 22px 26px 22px 22px;
  background: var(--sheet); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: var(--shadow-1); position: relative; overflow: hidden;
}
.starter::before { content: ""; position: absolute; inset: 8px; border: 2px dashed var(--line-2); border-radius: 12px; pointer-events: none; }
.starter::after { content: "✂"; position: absolute; left: 22px; top: -2px; font-size: 14px; color: var(--muted); background: var(--sheet); padding: 0 4px; transform: rotate(90deg); }
.starter-fan { position: relative; width: 150px; height: 112px; flex-shrink: 0; }
.starter-mini {
  position: absolute; left: 50%; top: 50%; width: 92px; height: 60px; margin: -30px 0 0 -46px; border-radius: 10px; color: #fff; font-size: 18px;
  display: grid; place-items: center; box-shadow: var(--shadow-1), inset 0 1px 0 #ffffff55; transition: transform .2s ease;
}
.starter-mini.skill { background: linear-gradient(150deg, var(--skill-a), var(--skill-b)); transform: rotate(-14deg) translate(-34px, 8px); }
.starter-mini.knowledge { background: linear-gradient(150deg, var(--know-a), var(--know-b)); transform: rotate(-2deg) translateY(-4px); }
.starter-mini.preference { background: linear-gradient(150deg, var(--pref-a), var(--pref-b)); transform: rotate(11deg) translate(34px, 8px); }
.starter:hover .starter-mini.skill { transform: rotate(-18deg) translate(-42px, 6px); }
.starter:hover .starter-mini.preference { transform: rotate(15deg) translate(42px, 6px); }
.starter-text { min-width: 0; flex: 1; }
.starter-eyebrow { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border: 1.5px solid currentColor; border-radius: 4px; padding: 1px 7px; margin-bottom: 8px; transform: rotate(-2deg); }
.starter h2 { font-family: var(--display); font-size: 22px; font-weight: 600; margin: 0 0 6px; color: var(--ink); }
.starter p { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; line-height: 1.55; max-width: 60ch; }
.starter-actions { gap: 10px; justify-content: flex-start; }
@media (max-width: 700px) { .starter { flex-direction: column; align-items: flex-start; padding: 18px; } .starter-fan { width: 100%; height: 96px; } }

/* ---------- the three cards ---------- */
.cards { gap: 22px; perspective: 1200px; }
.category {
  position: relative; border: 0; border-radius: 22px; padding: 24px 24px 22px; min-height: 236px; color: #fff;
  background: linear-gradient(150deg, var(--face-a), var(--face-b));
  box-shadow: var(--shadow-2), inset 0 1px 0 #ffffff55, inset 0 -1px 0 #0000002a;
  transition: transform .18s ease, box-shadow .18s ease; overflow: hidden;
}
.category::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 80% at 100% 0%, #ffffff2e, transparent 55%), repeating-linear-gradient(135deg, #ffffff05 0 2px, transparent 2px 9px);
}
.category::after {
  content: ""; position: absolute; right: 22px; bottom: 20px; width: 46px; height: 32px; border-radius: 7px; opacity: .55;
  background: linear-gradient(135deg, #fff5c2, #e2b96a); box-shadow: inset 0 0 0 1px #0003; pointer-events: none;
}
.category.skill { --face-a: var(--skill-a); --face-b: var(--skill-b); }
.category.knowledge { --face-a: var(--know-a); --face-b: var(--know-b); }
.category.preference { --face-a: var(--pref-a); --face-b: var(--pref-b); }
.category:hover, .category:focus-visible { border-color: transparent; transform: translateY(-5px) rotate(-.35deg); box-shadow: var(--shadow-2), 0 30px 50px -24px #0006, inset 0 1px 0 #ffffff66; }
.category:nth-child(2):hover { transform: translateY(-5px); }
.category:nth-child(3):hover { transform: translateY(-5px) rotate(.35deg); }
.category-head { gap: 14px; }
.category-head h2 { color: #fff; font-family: var(--display); font-size: 23px; font-weight: 600; letter-spacing: 0; }
.category-head p { color: #ffffffd0; font-size: 12.5px; }
.category-icon, .knowledge .category-icon, .preference .category-icon, .skill .category-icon {
  background: #ffffff22; color: #fff; border: 1px solid #ffffff40; border-radius: 12px; width: 42px; height: 42px; font-size: 20px;
}
.count, .skill .count strong, .knowledge .count strong, .preference .count strong { color: #fff; }
.category .count strong { font-family: var(--display); font-size: 40px; font-weight: 600; letter-spacing: -1px; color: #fff; line-height: 1; }
.category .count small { color: #ffffffc9; letter-spacing: .04em; text-transform: uppercase; font-size: 10px; }
.card-preview { color: #ffffffe6; font-size: 13px; }
.card-preview div { padding: 2px 0; border-bottom: 1px dashed #ffffff26; }
.card-preview div:last-child { border-bottom: 0; }
.card-preview .preview-active { color: #fff; font-weight: 600; }
.card-preview .preview-more { color: #ffffffb0; }
.card-preview .preview-note { display: inline-block; margin-top: 8px; background: var(--sticky); color: var(--sticky-ink); border-radius: 3px 3px 10px 3px; padding: 3px 9px; font-size: 11.5px; font-weight: 600; border-bottom: 0; transform: rotate(-1deg); }
.category .link, .category .link:hover { color: #fff; text-decoration: none; font-weight: 700; font-size: 13px; background: #ffffff22; border: 1px solid #ffffff44; border-radius: 999px; padding: 8px 14px; align-self: flex-start; position: relative; z-index: 1; transition: background .12s ease; }
.category .link:hover { background: #ffffff38; }

/* ---------- decks: rubber-banded stacks ---------- */
.decks-row { gap: 10px; }
.decks-row .small { font-family: var(--display); font-style: italic; color: var(--muted); font-size: 14px; }
.decks-row .chip { position: relative; background: var(--sheet); color: var(--ink); border: 1px solid var(--line-2); border-radius: 9px; padding: 7px 12px; font-size: 12px; font-weight: 600; box-shadow: 2px 2px 0 var(--paper-3), 4px 4px 0 var(--line); transition: transform .12s ease, box-shadow .12s ease; }
.decks-row .chip::before { display: none; }
.decks-row .chip:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--paper-3), 6px 6px 0 var(--line); }
.decks-row .chip.chip-on, .decks-row .chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: 2px 2px 0 var(--line-2), 4px 4px 0 var(--line); }

/* ---------- chips as luggage tags ---------- */
.chip { background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 999px 8px 8px 999px; padding: 6px 11px 6px 20px; position: relative; font-weight: 600; }
.chip::before { content: ""; position: absolute; left: 7px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.chip:hover { background: var(--sheet); box-shadow: var(--shadow-1); }
.chip-on, .chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip-on::before, .chip.on::before { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.chip-check { background: var(--sheet); box-shadow: none; }
/* List filters: full pills, like Export, with Archived on the same row. */
.filters .chips { align-items: center; flex-wrap: nowrap; }
.filters .chips > button.chip {
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  background: var(--sheet);
  color: var(--ink);
  border: 1px solid var(--line-2);
  box-shadow: none;
}
.filters .chips > button.chip::before { content: none; }
.filters .chips > button.chip:hover { background: var(--sheet); color: var(--ink); border-color: var(--line-2); box-shadow: var(--shadow-1); }
.filters .chips > button.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filters .chips > button.chip.on::before { content: none; }
.filters .chips > button.chip.on:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filters .chips > .chip-check {
  width: auto;
  flex: 0 0 auto;
  align-self: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.filters .chips > .chip-check::before { content: none; }
#page-tools .account { cursor: default; }
#page-tools .account a {
  pointer-events: none;
  cursor: default;
  color: inherit;
  text-decoration: none;
}
header.topbar .toolbar .account { cursor: default; }
header.topbar .toolbar .account a {
  pointer-events: none;
  cursor: default;
  color: inherit;
  text-decoration: none;
}

/* ---------- pills as rubber stamps ---------- */
.pill { border-radius: 4px; border: 1.5px solid currentColor; background: transparent !important; text-transform: uppercase; letter-spacing: .06em; font-size: 10px; padding: 1px 7px; font-weight: 700; }
.pill-skill, .pill-work { color: var(--skill-b); } .pill-knowledge { color: var(--know-b); } .pill-preference, .pill-pref { color: var(--pref-b); }
.pill-always { color: var(--ink); } .pill-confidential, .pill-block, .pill-stale { color: var(--danger); } .pill-draft, .pill-warn { color: var(--pref-b); }
.pill-example, .pill-owner, .pill-archived { color: var(--muted); }
:root[data-theme="night"] .pill-skill, :root[data-theme="night"] .pill-work { color: #aeb3ff; }
:root[data-theme="night"] .pill-knowledge { color: #8fe0ba; }
:root[data-theme="night"] .pill-preference, :root[data-theme="night"] .pill-pref, :root[data-theme="night"] .pill-draft, :root[data-theme="night"] .pill-warn { color: #ffbe84; }

/* ---------- the pocket (home panel, chat, list preview) ---------- */
.chat { position: relative; }
.chat, .preview-panel {
  background: var(--paper-2); border: 0; border-radius: 26px; box-shadow: inset 0 0 0 1px var(--line), inset 0 2px 0 #ffffff80, var(--shadow-1);
}
.chat::before, .preview-panel::before {
  content: ""; position: absolute; inset: 10px; border: 2px dashed var(--line-2); border-radius: 18px; pointer-events: none; opacity: .9;
}
.chat-head h2, .preview-head h2 { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--ink); }
.connection { color: var(--muted); }
.dot { background: var(--line-2); } .dot.ready { background: #2a8a62; box-shadow: 0 0 0 3px #2a8a6233; }
.welcome h3, .chat .welcome h3 { font-family: var(--display); font-weight: 600; font-size: 25px; color: var(--ink); }
.welcome p, .chat .welcome p { color: var(--muted); font-size: 14px; }
.welcome-icon { color: transparent; font-size: 0; width: 72px; height: 50px; margin: 0 auto 16px; position: relative; border-radius: 9px 9px 13px 13px; background: linear-gradient(160deg, var(--skill-a), var(--skill-b)); box-shadow: inset 0 -9px 0 #0002, 0 3px 0 #0003; transform: rotate(-4deg); }
.welcome-icon::before { content: ""; position: absolute; left: -6px; top: -10px; width: 54px; height: 20px; border-radius: 6px; background: var(--sheet); border: 1px solid var(--line-2); transform: rotate(-8deg); box-shadow: 0 2px 0 var(--line); }
.welcome-icon::after { content: ""; position: absolute; right: 12px; bottom: 10px; width: 14px; height: 14px; border-radius: 50%; background: #ffe98a; box-shadow: 0 0 0 2px #0002; }
.starters button { background: var(--sheet); font-size: 13px; }
.starters .primary, .chat .starters .primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* selected cards fan out as mini-cards */
.selection-strip .small { color: var(--muted); font-family: var(--display); font-style: italic; font-size: 14px; }
.selection-strip .chip {
  border-radius: 7px; padding: 7px 10px 7px 16px; background: var(--sheet); color: var(--ink); border: 1px solid var(--line-2);
  box-shadow: var(--shadow-1); font-weight: 600; font-size: 12px; max-width: 100%;
}
.selection-strip .chip::before { left: 0; top: 0; bottom: 0; width: 6px; height: auto; margin: 0; border-radius: 6px 0 0 6px; background: var(--muted); box-shadow: none; }
.selection-strip .chip.chip-skill::before { background: linear-gradient(var(--skill-a), var(--skill-b)); }
.selection-strip .chip.chip-knowledge::before { background: linear-gradient(var(--know-a), var(--know-b)); }
.selection-strip .chip.chip-preference::before { background: linear-gradient(var(--pref-a), var(--pref-b)); }
.selection-strip .chip:hover { transform: translateY(-2px) rotate(-1deg); }
.tag-row .chip { border-radius: 999px 8px 8px 999px; padding: 6px 11px 6px 20px; box-shadow: none; }
.tag-row .chip::before { left: 7px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2); bottom: auto; }

.render-row select, .list-controls select, #target-select { border-radius: 999px; border: 1px solid var(--line-2); background: var(--sheet); color: var(--ink); padding-left: 14px; }
.decks select {
  appearance: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 10px 32px 10px 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background-color: var(--sheet);
  color: var(--ink);
  box-shadow: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2320201f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}
.decks select:hover { background-color: var(--sheet); border-color: var(--line-2); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.render-row .small { color: var(--muted); }

/* the copy sheet is a typed receipt */
.composer, .preview { border-radius: 4px 4px 14px 14px; border: 1px solid var(--line); background: var(--sheet); box-shadow: var(--shadow-1); }
.composer { position: relative; }
.composer::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 3px; background: repeating-linear-gradient(90deg, var(--line-2) 0 10px, transparent 10px 16px); opacity: .7; }
.package-text, .preview, .package, pre.package { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); line-height: 1.65; }
.composer-bottom span { color: var(--muted); }
.notice { color: var(--muted); }

/* a receipt prints when you copy */
.receipt-slip {
  margin: 14px auto 0; width: min(360px, 100%); background: var(--sheet); color: var(--ink-2); font-family: var(--mono); font-size: 12px; line-height: 1.6;
  padding: 14px 18px 22px; border-radius: 3px 3px 0 0; box-shadow: var(--shadow-1); position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), 97% 100%, 94% calc(100% - 7px), 91% 100%, 88% calc(100% - 7px), 85% 100%, 82% calc(100% - 7px), 79% 100%, 76% calc(100% - 7px), 73% 100%, 70% calc(100% - 7px), 67% 100%, 64% calc(100% - 7px), 61% 100%, 58% calc(100% - 7px), 55% 100%, 52% calc(100% - 7px), 49% 100%, 46% calc(100% - 7px), 43% 100%, 40% calc(100% - 7px), 37% 100%, 34% calc(100% - 7px), 31% 100%, 28% calc(100% - 7px), 25% 100%, 22% calc(100% - 7px), 19% 100%, 16% calc(100% - 7px), 13% 100%, 10% calc(100% - 7px), 7% 100%, 4% calc(100% - 7px), 1% 100%, 0 calc(100% - 7px));
  animation: print .5s cubic-bezier(.2,.8,.2,1);
  transform-origin: top center;
}
.receipt-slip strong { display: block; font-family: var(--display); font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: .02em; text-align: center; margin-bottom: 6px; }
.receipt-slip .rule { border-top: 1px dashed var(--line-2); margin: 8px 0; }
.receipt-slip .row { display: flex; justify-content: space-between; gap: 12px; }
.receipt-slip .row span:last-child { text-align: right; }
.receipt-slip .foot { text-align: center; color: var(--muted); margin-top: 8px; font-size: 11px; }
@keyframes print { from { opacity: 0; transform: scaleY(.2) translateY(-10px); } to { opacity: 1; transform: none; } }

/* ---------- footer with the lamp ---------- */
main .footer { color: var(--muted); align-items: center; justify-content: flex-start; }
main .footer > span:last-of-type { margin-left: auto; }
.lights { border: 1px solid var(--line-2); background: var(--sheet); color: var(--ink); border-radius: 999px; padding: 5px 11px; font-size: 11px; font-weight: 600; margin-left: 12px; }
.lights::before { content: "☾ "; } :root[data-theme="night"] .lights::before { content: "☀ "; }

/* ---------- dialogs are index cards ---------- */
dialog, .dialog {
  border: 1px solid var(--line-2); border-radius: 16px; background: var(--sheet); color: var(--ink);
  box-shadow: 0 40px 80px -30px #000a, 0 0 0 1px #ffffff40 inset;
}
dialog::backdrop, .overlay { background: #2a241c80; backdrop-filter: blur(3px); }
.dialog-head { border-bottom: 2px solid var(--ink); background: var(--sheet); padding: 20px 24px 16px; border-radius: 16px 16px 0 0; position: relative; }
.dialog-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; border-top: 1px solid var(--ink); }
.dialog-head h2 { font-family: var(--display); font-weight: 600; font-size: 22px; color: var(--ink); }
.dialog-head p, .dialog-head .hint { color: var(--muted); }
.dialog-head .quiet, .dialog-close { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--sheet); color: var(--muted); font-size: 18px; line-height: 1; padding: 0; display: grid; place-items: center; margin-top: 0; }
.dialog-head .quiet:hover, .dialog-close:hover { color: var(--ink); background: var(--paper-2); }
.dialog-body { background: var(--sheet); border-radius: 0 0 16px 16px; }
.dialog-body h3, .dialog h3 { font-family: var(--display); font-size: 16px; font-weight: 600; color: var(--ink); }
.field, label, .label { color: var(--ink-2); }
.field input, .field textarea, .field select, input[type="text"], input[type="email"], input[type="search"], select, textarea, input[type="date"] {
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--sheet); color: var(--ink);
  box-shadow: inset 0 1px 2px #26221608;
}
.field input:focus, .field textarea:focus, .field select:focus, .search:focus, .dialog input:focus, .dialog textarea:focus, .dialog select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field-hint, .small, .hint { color: var(--muted); }
.item { border-bottom: 1px dashed var(--line-2); }
.item h3, .item-head h3 { font-family: var(--display); font-size: 16px; font-weight: 600; }
.item p { color: var(--muted); }
.item-draft { background: var(--sticky); color: var(--sticky-ink); border-radius: 3px 3px 14px 3px; border-bottom: 0; box-shadow: var(--shadow-1); }
.item-draft p, .item-draft .small, .item-draft h3 { color: var(--sticky-ink); }
.item-draft .link { color: var(--sticky-ink); }
.item-actions button { border-radius: 999px; }
.backup, .more, .version, .settings-section, .polish, .trial-panel, .golden, .choice { border-color: var(--line-2); border-radius: 12px; background: var(--sheet); }
.settings-section { box-shadow: var(--shadow-1); }
.settings-section summary, .more summary, .version summary, .backup summary { color: var(--ink); }
.golden { border: 1px dashed var(--line-2); background: var(--paper-2); }
.app-tabs { background: var(--paper-3); border: 1px solid var(--line-2); border-radius: 12px; padding: 3px; display: inline-flex; }
.app-tabs button { border-radius: 9px; color: var(--muted); border: 0; }
.app-tabs button.on { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 0 var(--line-2); }
.guard-ok, .small.ok { color: #1f7a52; } :root[data-theme="night"] .guard-ok, :root[data-theme="night"] .small.ok { color: #8fe0ba; }
.verdict-pass { background: #e4f3ea; color: #1b5e3c; border-radius: 10px; } .verdict-fail { background: #fde6e2; color: #7d2418; border-radius: 10px; }
:root[data-theme="night"] .verdict-pass { background: #1e3b2d; color: #a7e7c4; } :root[data-theme="night"] .verdict-fail { background: #4a1f19; color: #ffb3a6; }
.receipt-item { border: 0; border-radius: 0; background: var(--sheet); box-shadow: var(--shadow-1); padding: 10px 14px 16px; margin: 0 0 14px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 96% 100%, 92% calc(100% - 6px), 88% 100%, 84% calc(100% - 6px), 80% 100%, 76% calc(100% - 6px), 72% 100%, 68% calc(100% - 6px), 64% 100%, 60% calc(100% - 6px), 56% 100%, 52% calc(100% - 6px), 48% 100%, 44% calc(100% - 6px), 40% 100%, 36% calc(100% - 6px), 32% 100%, 28% calc(100% - 6px), 24% 100%, 20% calc(100% - 6px), 16% 100%, 12% calc(100% - 6px), 8% 100%, 4% calc(100% - 6px), 0 100%); }
.receipt-item summary { font-family: var(--mono); font-size: 12px; }
.vote { border-radius: 999px; } .vote-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.select-item input, .chip-check input, .select-row input, .type-row input { accent-color: var(--accent); }
.error { color: var(--danger); }
.toast, #toast { background: var(--ink); color: var(--paper); border-radius: 12px; font-family: var(--body); box-shadow: var(--shadow-2); }

/* ---------- list view: index cards with a coloured tab ---------- */
.main .toolbar .btn { background: var(--sheet); }
.search, .toolbar .search { border-radius: 999px; padding-left: 18px; }
.card {
  position: relative; border: 1px solid var(--line-2); border-radius: 14px; background: var(--sheet); box-shadow: var(--shadow-1);
  padding: 18px 18px 16px 22px; transition: transform .14s ease, box-shadow .14s ease;
}
.card::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 5px; border-radius: 0 4px 4px 0; background: var(--muted); }
.card.skill::before { background: linear-gradient(var(--skill-a), var(--skill-b)); }
.card.knowledge::before { background: linear-gradient(var(--know-a), var(--know-b)); }
.card.preference::before { background: linear-gradient(var(--pref-a), var(--pref-b)); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.card h2 { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--ink); }
.card p { color: var(--muted); }
.card .meta { color: var(--muted); font-family: var(--mono); font-size: 11px; }
.card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--indigo-soft), var(--shadow-1); }
.card.is-draft { background: var(--sticky); border-style: solid; border-color: transparent; color: var(--sticky-ink); border-radius: 3px 3px 16px 3px; }
.card.is-draft h2, .card.is-draft p, .card.is-draft .meta, .card.is-draft .select-row { color: var(--sticky-ink); }
.select-row { color: var(--accent); }
.wallet-layout { gap: 24px; }
.preview-panel { padding: 20px; }
.preview-head .hint { color: var(--muted); }
.empty { background: transparent; border: 2px dashed var(--line-2); border-radius: 16px; color: var(--muted); }
.choice { background: var(--sheet); }
.choice:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.dialog-actions { background: var(--sheet); border-top: 1px dashed var(--line-2); }
.success { background: #e4f3ea; color: #1b5e3c; border-radius: 10px; }
.banner, .notice.banner { background: var(--indigo-soft); color: var(--accent-2); }

/* ---------- chat view: notes passed back and forth ---------- */
.messages { gap: 14px; }
.bubble { border-radius: 4px 14px 14px 14px; background: var(--sheet); color: var(--ink); box-shadow: var(--shadow-1); border: 1px solid var(--line); }
.bubble.user { border-radius: 14px 4px 14px 14px; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bubble.user .link, .bubble.user button { color: var(--paper); border-color: #ffffff40; background: transparent; }
.bubble.system { background: transparent; border: 1px dashed var(--line-2); color: var(--muted); box-shadow: none; }
.bubble small { color: var(--muted); }
.bubble.user small { color: #ffffffa0; }

/* ---------- motion & small screens ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .category:hover, .card:hover, button:hover, .selection-strip .chip:hover, .decks-row .chip:hover { transform: none; }
}
@media (max-width: 700px) {
  main .intro h1 { font-size: 28px; }
  .category { min-height: 200px; padding: 20px; }
  .category .count strong { font-size: 34px; }
  .chat, .preview-panel { border-radius: 20px; }
  .chat::before, .preview-panel::before { inset: 8px; border-radius: 14px; }
  header.topbar .brand { font-size: 19px; }
  .receipt-slip { width: 100%; }
}
/* dialog action weight: one button forward, overflow and delete set back */
.overflow-menu {
  position: fixed; margin: 0; padding: 6px; min-width: 176px; background: var(--sheet); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow-2);
}
.item-actions .overflow-menu button, .overflow-menu button {
  display: block; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 8px;
  padding: 8px 12px; color: var(--ink); font-weight: 500; box-shadow: none;
}
.overflow-menu button:hover { background: var(--paper-2); transform: none; box-shadow: none; border-color: transparent; color: var(--ink); }
.overflow-menu button.danger, .overflow-menu button.danger:hover { color: var(--danger); background: transparent; }
.overflow-menu button.danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.overflow-menu .menu-rule { height: 1px; margin: 4px 8px; background: var(--line); }
.item-top .select-row { color: var(--accent); }
.item-top .select-row input { accent-color: var(--accent); }
.item-top .overflow-trigger, .card .overflow-trigger { width: 34px; height: 34px; margin: -6px -4px 0 0; padding: 0; border-radius: 999px; color: var(--muted); display: grid; place-items: center; }
.overflow-trigger .dots { width: 3px; height: 3px; border-radius: 50%; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
.list-controls select.quiet-sort {
  border-color: transparent; background: transparent; color: var(--muted); box-shadow: none; font-size: 13px;
}
.list-controls select.quiet-sort:hover, .list-controls select.quiet-sort:focus { background: var(--paper-2); }
.archive-toggle.on { background: var(--paper-3); color: var(--ink); border-color: transparent; }
.deck-actions button.quiet.danger { background: transparent; border-color: transparent; box-shadow: none; }
.deck-actions button.quiet.danger:hover {
  background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: transparent;
  transform: none; box-shadow: none; color: var(--danger);
}
/* examples box in Settings: same frame as the golden example, stacked */
.examples-box { margin-top: 12px; }
.examples-box + .golden { margin-top: 10px; }
.golden strong { font-family: var(--display); font-size: 16px; }