*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Dark grey palette (replaces deep navy) */
  --dark: #2b2b2b;
  --dark-2: #3a3a3a;
  --dark-3: #4f4f4f;

  /* Text */
  --ink: #1c1c1c;
  --ink-2: #4a4a4a;
  --ink-3: #8a8a8a;

  /* Surfaces — clean whites/light greys, no warm parchment tint */
  --surface: #ffffff;
  --surface-1: #f7f7f5;
  --surface-2: #efefed;
  --border-color: #e2e2de;

  /* Accent — amber/gold, kept from original */
  --gold: #c49a2a;
  --gold-light: #d4ab3a;
  --gold-bg: #fdf8ed;

  /* Danger */
  --crimson: #b33a3a;
  --crimson-bg: #fdf2f2;

  --radius: 8px;
  --shadow: 0 1px 4px rgba(0,0,0,0.07), 0 2px 12px rgba(0,0,0,0.05);
  --shadow-lg: 0 4px 24px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  --border: 1px solid var(--border-color);

  /* Typography — clean sans-serif body, serif only for display names */
  --font-display: 'Palatino Linotype', Palatino, 'Book Antiqua', serif;
  --font-ui: system-ui, -apple-system, sans-serif;
  /* Keep --font-body alias for compat */
  --font-body: var(--font-display);

  /* Parchment aliases — map to surface/border tokens so dark mode is free */
  --parchment: var(--surface-1);
  --parchment-2: rgba(196,154,42,0.3);
  --parchment-3: var(--border-color);
}

body { font-family: var(--font-ui); background: var(--surface-1); color: var(--ink); min-height: 100vh; }

/* Monotone chip — used for neutral status indicators like "private" */
.chip-mono { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.2rem 0.55rem; border-radius: 99px; background: var(--surface-2); border: var(--border); font-family: var(--font-ui); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }

/* ── Auth pages ── */
.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--dark); }
.auth-card { background: var(--surface); border-radius: 14px; padding: 2.5rem 3rem; width: 360px; box-shadow: var(--shadow-lg); text-align: center; border: var(--border); }
.auth-emblem { font-size: 2.4rem; margin-bottom: 0.5rem; display: block; }
.auth-card h1 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--ink); margin-bottom: 0.2rem; letter-spacing: 0.01em; }
.auth-card svg { display: block; margin: 0 auto 1.5rem; }
.auth-card > p { font-family: var(--font-ui); font-size: 0.82rem; color: var(--ink-3); margin-bottom: 1.75rem; }
.auth-error { font-family: var(--font-ui); font-size: 0.8rem; color: var(--crimson); margin-top: 0.75rem; min-height: 1.2em; }
.auth-link { font-family: var(--font-ui); font-size: 0.8rem; color: var(--ink-3); margin-top: 1rem; }
.auth-link a { color: var(--gold); text-decoration: none; }

/* ── Header ── */
header { background: var(--dark); color: #fff; padding: 0 2rem; height: 56px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
.header-brand { display: flex; align-items: center; text-decoration: none; color: #fff; line-height: 0; }
.header-brand span { font-size: 1.2rem; }
.header-right { display: flex; align-items: center; gap: 0.4rem; padding-right: 0.25rem; }
.header-user { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-ui); font-size: 0.82rem; color: rgba(255,255,255,0.7); }
.header-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 600; color: #fff; flex-shrink: 0; overflow: hidden; }
.header-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Nav links */
.nav-link { font-family: var(--font-ui); font-size: 0.78rem; color: rgba(255,255,255,0.5); background: none; border: none; border-radius: 6px; padding: 0.3rem 0.6rem; cursor: pointer; transition: color 0.15s, background 0.15s; text-decoration: none; display: inline-flex; align-items: center; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* ── Main layout ── */
main { max-width: 1100px; margin: 0 auto; padding: 2.5rem 1.5rem; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.page-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--ink); min-width: 0; word-break: break-word; }
.page-subtitle { font-family: var(--font-ui); font-size: 0.78rem; color: var(--ink-3); margin-top: 0.15rem; }

/* ── Fields ── */
.field { margin-bottom: 1.2rem; text-align: left; }
.field label { display: block; font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.4rem; }
.field input[type="text"], .field input[type="password"], .field input[type="email"], .field textarea, .field select {
  width: 100%; padding: 0.6rem 0.85rem; border: 1px solid var(--border-color); border-radius: 6px;
  font-family: var(--font-ui); font-size: 0.92rem; color: var(--ink); background: var(--surface);
  outline: none; transition: border-color 0.15s; resize: vertical;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--gold); }
.field textarea { min-height: 90px; }

/* ── Buttons ── */
.btn-primary { width: 100%; padding: 0.7rem 1rem; background: var(--dark); color: #fff; border: none; border-radius: 7px; font-family: var(--font-ui); font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: background 0.15s, transform 0.1s; letter-spacing: 0.02em; }
.btn-primary:hover { background: var(--dark-2); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.45; cursor: default; }

.btn-gold { background: var(--gold); color: #fff; border: none; border-radius: 7px; padding: 0.55rem 1.1rem; font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.15s; display: inline-flex; align-items: center; gap: 0.4rem; letter-spacing: 0.02em; }
.btn-gold:hover { background: var(--gold-light); }
.btn-gold:disabled { opacity: 0.45; cursor: default; }

.btn-outline { background: var(--surface); color: var(--ink-2); border: var(--border); border-radius: 6px; padding: 0.5rem 0.9rem; font-family: var(--font-ui); font-size: 0.83rem; cursor: pointer; transition: background 0.12s, border-color 0.12s; display: inline-flex; align-items: center; gap: 0.35rem; }
.btn-outline:hover { background: var(--surface-2); border-color: #ccc; }

.btn-danger { background: var(--crimson); color: #fff; border: none; border-radius: 6px; padding: 0.55rem 1.1rem; font-family: var(--font-ui); font-size: 0.85rem; font-weight: 500; cursor: pointer; }
.btn-danger:hover { background: #9e2e2e; }

/* ── Cards ── */
.card { background: var(--surface); border-radius: var(--radius); border: var(--border); box-shadow: var(--shadow); }

/* ── Image upload zone ── */
.img-upload-zone { border: 1.5px dashed var(--border-color); border-radius: 7px; background: var(--surface-1); cursor: pointer; transition: border-color 0.15s, background 0.15s; overflow: hidden; }
.img-upload-zone:hover, .img-upload-zone.drag-over { border-color: var(--gold); background: var(--gold-bg); }
.img-upload-zone input { display: none; }
.img-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; gap: 0.4rem; color: var(--ink-3); }
.img-placeholder svg { width: 26px; height: 26px; }
.img-placeholder span { font-family: var(--font-ui); font-size: 0.78rem; }
.img-preview { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: none; }

/* ── Modal ── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: flex-start; justify-content: center; z-index: 1000; padding: 1rem; overflow-y: auto; }
.modal { background: var(--surface); border-radius: 12px; width: 100%; max-width: 480px; box-shadow: var(--shadow-lg); overflow: hidden; max-height: 90vh; overflow-y: auto; border: var(--border); margin: auto; }
.modal-header { background: var(--dark); color: #fff; padding: 1rem 1.4rem; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; }
.modal-header h2 { font-family: var(--font-ui); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.02em; }
.btn-close { background: none; border: none; color: rgba(255,255,255,0.55); cursor: pointer; font-size: 1.3rem; line-height: 1; transition: color 0.12s; }
.btn-close:hover { color: #fff; }
.modal-body { padding: 1.5rem; }
.modal-footer { display: flex; justify-content: flex-end; gap: 0.6rem; padding: 1rem 1.5rem 1.5rem; border-top: var(--border); }

/* ── Avatar ── */
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600; color: var(--ink-3); flex-shrink: 0; overflow: hidden; border: 1.5px solid var(--border-color); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Divider ── */
.divider { border: none; border-top: var(--border); margin: 1.5rem 0; }

/* ── Toast ── */
#toast { position: fixed; bottom: 1.5rem; right: 1.5rem; background: var(--dark); color: #fff; padding: 0.7rem 1.1rem; border-radius: 7px; font-family: var(--font-ui); font-size: 0.82rem; box-shadow: var(--shadow-lg); opacity: 0; transition: opacity 0.2s; pointer-events: none; z-index: 9999; }
#toast.show { opacity: 1; }

@media(max-width:500px) { .auth-card { padding: 2rem 1.5rem; width: calc(100% - 2.5rem); margin: 0 auto; } main { padding: 1.5rem 1rem; } }

/* ── Header create button ── */
.header-create { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.18); border-radius: 6px; padding: 0.3rem 0.8rem; font-family: var(--font-ui); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: background 0.15s; white-space: nowrap; }
.header-create:hover { background: rgba(255,255,255,0.18); }

/* ── User dropdown ── */
.user-dropdown { position: relative; }
.user-dropdown-trigger { display: flex; align-items: center; gap: 0.45rem; background: none; border: none; border-radius: 6px; padding: 0.3rem 0.4rem; cursor: pointer; color: rgba(255,255,255,0.85); transition: background 0.15s; }
.user-dropdown-trigger:hover { background: rgba(255,255,255,0.08); }
.dropdown-name { font-family: var(--font-ui); font-size: 0.82rem; }
.dropdown-chevron { opacity: 0.5; flex-shrink: 0; transition: transform 0.2s; }
.user-dropdown-trigger[aria-expanded="true"] .dropdown-chevron { transform: rotate(180deg); }

.dropdown-menu { position: absolute; top: calc(100% + 6px); right: 0; background: var(--surface); border: var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); min-width: 180px; overflow: hidden; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.12s, transform 0.12s; z-index: 200; }
.dropdown-menu.open { opacity: 1; transform: translateY(0); pointer-events: all; }

.dropdown-user { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem; font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; color: var(--ink); border-bottom: var(--border); }
.dropdown-divider { border: none; border-top: var(--border); margin: 0; }
.dropdown-item { display: block; width: 100%; padding: 0.6rem 1rem; font-family: var(--font-ui); font-size: 0.84rem; color: var(--ink-2); text-decoration: none; background: none; border: none; text-align: left; cursor: pointer; transition: background 0.1s; }
.dropdown-item:hover { background: var(--surface-1); color: var(--ink); }
.dropdown-signout { color: var(--crimson); }
.dropdown-signout:hover { background: var(--crimson-bg); color: var(--crimson); }

/* ── Dark mode ── */
html.dark {
  --ink: #e8e6e1;
  --ink-2: #b0aca5;
  --ink-3: #706c66;
  --surface: #1e1e1e;
  --surface-1: #161616;
  --surface-2: #272727;
  --border-color: #333330;
  --gold-bg: #2a2410;
  --crimson-bg: #2a1212;
}
html.dark body { background: var(--surface-1); color: var(--ink); }
html.dark header { background: #111111; }
html.dark .modal-header { background: #111111; }
html.dark .field input, html.dark .field textarea, html.dark .field select { background: var(--surface-2); color: var(--ink); }

/* ── Dark mode toggle ── */
.dark-toggle-wrap { display: flex; align-items: center; justify-content: space-between; padding: 0.1rem 0; }
.dark-toggle-label { font-family: var(--font-ui); font-size: 0.85rem; color: var(--ink-2); }
.dark-toggle-track { width: 40px; height: 22px; border-radius: 11px; background: var(--border-color); border: 1px solid var(--border-color); cursor: pointer; position: relative; transition: background 0.2s; flex-shrink: 0; }
.dark-toggle-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.2s; }
.dark-toggle-track.on { background: var(--gold); border-color: var(--gold); }
.dark-toggle-track.on::after { transform: translateX(18px); }

/* ── Section heading ── */
.section-heading { font-family:var(--font-ui); font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-3); margin-bottom:1rem; }

/* ── Section card ── */
.section-card { background:var(--surface); border:var(--border); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow); margin-bottom:1.5rem; }

/* ── Back link ── */
.back-link { font-family:var(--font-ui); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); text-decoration:none; display:inline-flex; align-items:center; gap:0.35rem; margin-bottom:1.5rem; }
.back-link:hover { color:var(--ink-2); }

/* ── Entity header (character / place / thing) ── */
.char-top { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:0.6rem; }
.char-name-block { flex:1; min-width:0; }
.inline-name { font-size:1.9rem; font-weight:700; font-family:var(--font-body); color:var(--ink); line-height:1.2; width:100%; background:transparent; border:none; outline:none; padding:0.1rem 0.3rem; display:block; border-radius:4px; resize:none; overflow:hidden; }
.inline-subtitle { font-size:0.95rem; color:var(--ink-3); line-height:1; width:100%; background:transparent; border:none; outline:none; font-family:var(--font-ui); padding:0; border-radius:4px; resize:none; overflow:hidden; display:block; margin-top:0.2rem; }
.editable:hover { background:var(--surface-1); }
.editable:focus { background:var(--surface-1); outline:none; }

/* ── Overflow menu ── */
.overflow-wrap { position:relative; flex-shrink:0; }
.overflow-btn { background:none; border:none; cursor:pointer; color:var(--ink-3); padding:0.25rem 0.35rem; border-radius:5px; display:flex; align-items:center; transition:background 0.12s, color 0.12s; }
.overflow-btn:hover { background:var(--surface-2); color:var(--ink); }
.overflow-menu { position:absolute; top:calc(100% + 4px); right:0; background:var(--surface); border:1px solid var(--border-color); border-radius:8px; box-shadow:var(--shadow-lg); min-width:160px; overflow:hidden; opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity 0.12s, transform 0.12s; z-index:200; }
.overflow-menu.open { opacity:1; transform:translateY(0); pointer-events:all; }
.overflow-item { display:block; width:100%; padding:0.6rem 1rem; font-family:var(--font-ui); font-size:0.85rem; color:var(--ink-2); background:none; border:none; text-align:left; cursor:pointer; transition:background 0.1s; text-decoration:none; }
.overflow-item:hover { background:var(--surface-1); }
.overflow-item.danger { color:var(--crimson); }
.overflow-item.danger:hover { background:var(--crimson-bg); }

/* ── Entity portrait ── */
.char-layout { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start; }
.char-portrait-wrap { position:relative; cursor:pointer; border-radius:var(--radius); overflow:hidden; }
.char-portrait { width:100%; aspect-ratio:1/1; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:5rem; }
.char-portrait img { width:100%; height:100%; object-fit:cover; display:block; }
.portrait-edit-btn { position:absolute; top:0.5rem; right:0.5rem; z-index:10; background:rgba(0,0,0,0.45); color:#fff; border:1px solid rgba(255,255,255,0.25); border-radius:6px; padding:0.35rem 0.4rem; cursor:pointer; display:flex; align-items:center; transition:background 0.15s, opacity 0.2s; backdrop-filter:blur(4px); opacity:0; }
.char-portrait-wrap:hover .portrait-edit-btn { opacity:1; }
.portrait-edit-btn:hover { background:rgba(0,0,0,0.65); }
.char-portrait-wrap.no-image .portrait-edit-btn { opacity:1; }
.below-portrait { margin-top:0; }

/* ── Mention popover ── */
.mention-link { color:var(--gold); text-decoration:none; font-weight:500; }
.mention-link:hover { text-decoration:underline; }
.mention-popover { background:var(--surface); border:var(--border); border-radius:8px; box-shadow:var(--shadow-lg); overflow:hidden; max-height:220px; overflow-y:auto; }
.mention-item { display:flex; align-items:center; gap:0.6rem; width:100%; padding:0.5rem 0.75rem; background:none; border:none; font-family:var(--font-ui); font-size:0.82rem; color:var(--ink-2); text-align:left; cursor:pointer; }
.mention-item.selected, .mention-item:hover { background:var(--surface-1); color:var(--ink); }
.mention-avatar { width:22px; height:22px; border-radius:4px; object-fit:cover; flex-shrink:0; }
.mention-avatar-placeholder { width:22px; height:22px; border-radius:4px; background:var(--surface-2); display:inline-flex; align-items:center; justify-content:center; font-size:0.7rem; flex-shrink:0; }

/* ── Entity body field ── */
.body-display { font-size:0.88rem; color:var(--ink-2); line-height:1.7; font-family:var(--font-ui); min-height:2rem; word-break:break-word; cursor:text; border-radius:4px; padding:0.1rem; transition:background 0.12s; }
.body-display:hover { background:var(--surface-1); }
.body-display p { margin:0 0 0.4em; }
.body-display a { color:var(--gold); text-decoration:none; font-weight:500; }
.body-display a:hover { text-decoration:underline; }
.body-empty { color:var(--ink-3); font-style:italic; }
.body-edit-area { display:none; }
.body-edit-area.open { display:block; }
/* ── Quill global border reset (beats Snow theme defaults) ── */
.ql-container.ql-snow { border:0px solid #ccc !important; }
.ql-toolbar.ql-snow { border:0px solid #ccc !important; }
/* ── Quill overrides — shared between description editor and note editors ── */
.body-edit-area .ql-toolbar.ql-snow,
.note-quill-wrap .ql-toolbar.ql-snow { border-bottom:1px solid var(--border-color); padding:0.4rem 0; font-family:var(--font-ui); }
.body-edit-area .ql-container.ql-snow,
.note-quill-wrap .ql-container.ql-snow { font-family:var(--font-ui); font-size:0.88rem; }
.body-edit-area .ql-editor { padding:0.6rem 0; min-height:80px; line-height:1.7; color:var(--ink); overflow-wrap:break-word; word-break:break-word; }
.note-quill-wrap .ql-editor { padding:0.4rem 0; min-height:60px; line-height:1.6; color:var(--ink); overflow-wrap:break-word; word-break:break-word; }
.body-edit-area .ql-editor.ql-blank::before,
.note-quill-wrap .ql-editor.ql-blank::before { color:var(--ink-3); font-style:italic; left:0; }
.body-edit-area .ql-editor p { margin:0 0 0.5em; }
.note-quill-wrap .ql-editor p { margin:0 0 0.35em; }
.body-edit-area .ql-editor a,
.body-edit-area .ql-editor a:visited,
.note-quill-wrap .ql-editor a,
.note-quill-wrap .ql-editor a:visited { color:var(--gold); text-decoration:none; font-weight:500; }
.body-edit-area .ql-editor a:hover,
.note-quill-wrap .ql-editor a:hover { text-decoration:underline; }
.body-edit-area .ql-snow .ql-stroke,
.note-quill-wrap .ql-snow .ql-stroke { stroke:var(--ink-3); }
.body-edit-area .ql-snow .ql-fill,
.note-quill-wrap .ql-snow .ql-fill { fill:var(--ink-3); }
.body-edit-area .ql-snow.ql-toolbar button:hover .ql-stroke,
.body-edit-area .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.note-quill-wrap .ql-snow.ql-toolbar button:hover .ql-stroke,
.note-quill-wrap .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke:var(--ink); }
.body-edit-area .ql-snow.ql-toolbar button:hover .ql-fill,
.body-edit-area .ql-snow.ql-toolbar button.ql-active .ql-fill,
.note-quill-wrap .ql-snow.ql-toolbar button:hover .ql-fill,
.note-quill-wrap .ql-snow.ql-toolbar button.ql-active .ql-fill { fill:var(--ink); }
.body-edit-area .ql-snow .ql-picker,
.note-quill-wrap .ql-snow .ql-picker { color:var(--ink-3); }
.body-edit-area .ql-snow .ql-picker-label,
.note-quill-wrap .ql-snow .ql-picker-label { color:var(--ink-3); }
.body-edit-area .ql-snow .ql-picker-options,
.note-quill-wrap .ql-snow .ql-picker-options { background:var(--surface); border:var(--border); border-radius:6px; box-shadow:var(--shadow-lg); }

/* ── Linked entities grid ── */
.linked-section { margin-top:2rem; padding-top:1.5rem; border-top:var(--border); }
.linked-grid { display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:0.75rem; }
.linked-card { display:flex; align-items:center; gap:0.6rem; padding:0.5rem 0.75rem; background:var(--surface); border:var(--border); border-radius:7px; text-decoration:none; color:inherit; transition:background 0.12s; font-family:var(--font-ui); font-size:0.82rem; color:var(--ink-2); }
.linked-card:hover { background:var(--surface-2); color:var(--ink); }
.linked-avatar { width:26px; height:26px; border-radius:4px; object-fit:cover; background:var(--surface-2); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:0.7rem; overflow:hidden; }
.linked-avatar img { width:100%; height:100%; object-fit:cover; }

/* ── Entity section label + body textarea ── */
.section-label { font-family:var(--font-ui); font-size:0.68rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:0.5rem; }
.inline-body { font-size:0.88rem; color:var(--ink-2); line-height:1.7; width:100%; background:transparent; border:1px solid var(--border-color); border-radius:6px; outline:none; font-family:var(--font-ui); padding:0.6rem 0.75rem; resize:none; overflow:hidden; min-height:80px; display:block; transition:border-color 0.15s, background 0.15s; }
.inline-body:hover { background:var(--surface-1); }
.inline-body:focus { border-color:var(--gold); background:var(--surface-1); }

/* ── Note column header ── */
.notes-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.5rem; }
.notes-title { font-family:var(--font-ui); font-size:0.68rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3); }
.btn-add-note { font-family:var(--font-ui); font-size:0.75rem; font-weight:500; color:var(--ink-2); background:none; border:1px solid var(--border-color); border-radius:5px; padding:0.3rem 0.75rem; cursor:pointer; transition:border-color 0.15s, color 0.15s; }
.btn-add-note:hover { border-color:var(--ink-3); color:var(--ink); }

/* ── Note cards ── */
.note-card { border:1px solid var(--border-color); border-radius:8px; padding:0.9rem 1rem; margin-bottom:0.75rem; background:var(--surface); }
.note-card-private { background:var(--surface-1); }
.note-title-display { font-family:var(--font-ui); font-size:0.78rem; font-weight:700; color:var(--ink); margin-bottom:0.4rem; letter-spacing:0.01em; }
.note-content-display { font-family:var(--font-ui); font-size:0.85rem; line-height:1.6; color:var(--ink-2); overflow-wrap:break-word; word-break:break-word; }
.note-content-display a, .note-content-display a:visited { color:var(--gold); text-decoration:none; font-weight:500; }
.note-content-display a:hover { text-decoration:underline; }
.note-placeholder { font-family:var(--font-ui); font-size:0.82rem; color:var(--ink-3); font-style:italic; }
.note-edit-area { display:none; }
.note-edit-area.open { display:block; }
.note-edit-title { width:100%; background:transparent; border:none; border-bottom:1px solid var(--parchment-3); outline:none; font-family:var(--font-ui); font-size:0.82rem; font-weight:700; color:var(--ink); padding:0 0 0.3rem; margin-bottom:0.5rem; }
.note-edit-title:focus { border-color:var(--gold); }
.note-edit-content { width:100%; background:transparent; border:none; outline:none; font-family:var(--font-ui); font-size:0.85rem; color:var(--ink-2); min-height:60px; resize:none; overflow:hidden; line-height:1.6; }
.note-view-area { }
.note-footer { display:flex; align-items:center; gap:0.5rem; margin-top:0.75rem; padding-top:0.6rem; border-top:1px solid var(--parchment-3); flex-wrap:wrap; }
.note-footer-avatar { flex-shrink:0; }
.note-footer-meta { flex:1; min-width:0; line-height:1.4; }
.note-footer-name { font-family:var(--font-ui); font-size:0.7rem; font-weight:600; color:var(--ink-2); text-transform:uppercase; letter-spacing:0.04em; display:inline; }
.note-footer-time { font-family:var(--font-ui); font-size:0.7rem; color:var(--ink-3); display:inline; }
.note-footer-time::before { content:" · "; }
.note-footer-right { display:flex; align-items:center; gap:0.4rem; margin-left:auto; flex-shrink:0; }
.share-avatars { display:flex; align-items:center; }
.share-avatars .avatar { margin-left:-6px; border:2px solid var(--surface); }
.share-avatars .avatar:first-child { margin-left:0; }
.unshared-label { font-family:var(--font-ui); font-size:0.7rem; color:var(--ink-3); font-style:italic; }
.btn-share-small { font-family:var(--font-ui); font-size:0.7rem; color:var(--ink-3); background:none; border:1px solid var(--border-color); border-radius:4px; padding:0.15rem 0.5rem; cursor:pointer; transition:border-color 0.12s, color 0.12s; white-space:nowrap; }
.btn-share-small:hover { border-color:var(--ink-3); color:var(--ink); }
.note-edit-footer { display:flex; align-items:center; justify-content:space-between; margin-top:0.75rem; flex-wrap:wrap; gap:0.5rem; }
.priv-toggle-wrap { display:inline-flex; align-items:center; gap:0.6rem; cursor:pointer; user-select:none; }
.priv-toggle-wrap input[type=checkbox] { display:none; }
.priv-track { width:44px; height:26px; border-radius:13px; background:#d8d8d8; position:relative; transition:background 0.2s; flex-shrink:0; }
.priv-track::after { content:""; position:absolute; width:20px; height:20px; border-radius:50%; background:#5a5a5a; top:3px; left:3px; transition:left 0.2s, background 0.2s; }
.priv-toggle-wrap input:checked ~ .priv-track { background:#4a4a4a; }
.priv-toggle-wrap input:checked ~ .priv-track::after { left:21px; background:#fff; }
.priv-toggle-label { font-family:var(--font-ui); font-size:0.72rem; font-weight:600; color:var(--ink-2); text-transform:uppercase; letter-spacing:0.06em; }
.note-edit-actions { display:flex; gap:0.4rem; }
.btn-note-save { font-family:var(--font-ui); font-size:0.75rem; background:var(--ink); color:var(--surface); border:none; border-radius:5px; padding:0.3rem 0.65rem; cursor:pointer; }
.btn-note-cancel { font-family:var(--font-ui); font-size:0.75rem; background:none; color:var(--ink-3); border:1px solid var(--border-color); border-radius:5px; padding:0.3rem 0.65rem; cursor:pointer; }
.btn-note-delete { font-family:var(--font-ui); font-size:0.7rem; color:var(--crimson); background:none; border:none; cursor:pointer; padding:0.2rem 0; }
.btn-note-delete:hover { text-decoration:underline; }
.note-overflow-wrap { position:relative; margin-left:auto; flex-shrink:0; }
.note-overflow-btn { background:none; border:none; cursor:pointer; color:var(--ink-3); padding:0.15rem 0.25rem; border-radius:4px; display:flex; align-items:center; transition:background 0.12s, color 0.12s; }
.note-overflow-btn:hover { background:var(--surface-2); color:var(--ink); }
.note-overflow-menu { position:absolute; top:calc(100% + 2px); right:0; background:var(--surface); border:1px solid var(--border-color); border-radius:7px; box-shadow:var(--shadow-lg); min-width:120px; overflow:hidden; opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity 0.12s, transform 0.12s; z-index:200; }
.note-overflow-menu.open { opacity:1; transform:translateY(0); pointer-events:all; }
.note-overflow-item { display:block; width:100%; padding:0.5rem 0.85rem; font-family:var(--font-ui); font-size:0.82rem; color:var(--ink-2); background:none; border:none; text-align:left; cursor:pointer; transition:background 0.1s; }
.note-overflow-item:hover { background:var(--surface-1); }
.note-overflow-item.danger { color:var(--crimson); }
.note-overflow-item.danger:hover { background:var(--crimson-bg); }
.other-note-section { margin-top:1.25rem; }
.note-vis-tag { font-family:var(--font-ui); font-size:0.68rem; color:var(--ink-3); font-weight:400; letter-spacing:0.01em; }
.other-section-label { font-family:var(--font-ui); font-size:0.68rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink); margin-bottom:0.6rem; }
.share-picker { background:var(--surface); border:1px solid var(--border-color); border-radius:var(--radius); padding:1rem; }
.share-user-row { display:flex; align-items:center; gap:0.6rem; padding:0.4rem 0; }
.share-user-row label { font-family:var(--font-ui); font-size:0.85rem; color:var(--ink-2); cursor:pointer; flex:1; }
.add-note-form { border:1px solid var(--border-color); border-radius:8px; padding:0.9rem 1rem; margin-bottom:0.75rem; background:var(--surface-1); display:none; }
.add-note-form.open { display:block; }
.add-note-form-title { width:100%; background:transparent; border:none; border-bottom:1px solid var(--parchment-3); outline:none; font-family:var(--font-ui); font-size:0.82rem; font-weight:700; color:var(--ink); padding:0 0 0.3rem; margin-bottom:0.5rem; }
.add-note-form-title:focus { border-color:var(--gold); }
.add-note-form textarea { width:100%; background:transparent; border:none; outline:none; font-family:var(--font-ui); font-size:0.85rem; color:var(--ink); min-height:70px; resize:none; line-height:1.6; }
.add-note-controls { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; margin-top:0.6rem; flex-wrap:wrap; }
.note-obscured { text-align:center; padding:0.5rem 0 0.25rem; }
.note-obscured-label { font-family:var(--font-ui); font-size:0.78rem; color:var(--ink-3); font-style:italic; display:block; margin-bottom:0.5rem; }
.btn-ask-share { font-family:var(--font-ui); font-size:0.75rem; font-weight:500; color:var(--ink-2); background:none; border:1px solid var(--border-color); border-radius:5px; padding:0.3rem 0.75rem; cursor:pointer; }

/* ── Entity page responsive ── */
@media(max-width:680px) {
  .char-layout { grid-template-columns:1fr; gap:0; }
  .char-portrait { aspect-ratio:4/3; }
  .below-portrait { margin-top:1.25rem; }
  .right-col { margin-top:1rem; }
  .back-link { margin-bottom:0.75rem; }
}

/* ── Secret entity styles ── */
.secret-card { opacity: 0.5; pointer-events: none; cursor: default; filter: grayscale(0.6); }
.secret-badge { display: inline-flex; align-items: center; gap: 0.25rem; font-family: var(--font-ui); font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--border-color); border-radius: 4px; padding: 0.1rem 0.4rem; }
/* ── Deceased character treatment (portrait, campaign cards, dashboard) ── */
/* Low-saturation + a subtle film grain via an SVG turbulence overlay. Apply
   .deceased-media to any positioned image wrapper; it fades and grains the
   image within and hosts the corner tag. .deceased-filter is the image-only
   variant for tiny previews where a tag won't fit. */
.deceased-filter, .deceased-media img { filter: grayscale(0.55) saturate(0.35) contrast(0.97) brightness(0.99); }
.deceased-media { position: relative; }
.deceased-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.14; mix-blend-mode: multiply; }
.deceased-tag { position: absolute; top: 0.45rem; left: 0.45rem; z-index: 2; font-family: var(--font-ui); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #fff; background: rgba(24,22,20,0.82); padding: 0.18rem 0.42rem; border-radius: 4px; }

/* ── Character privacy indicators (owner-facing only) ────────────────────── */
/* "Hidden" card tag — same box as .deceased-tag, shown on the campaign roster and
   dashboard when nobody but the owner and campaign owner can see the character.
   Offset to the right so a character that is both deceased and hidden shows both.
   .hidden-media must go on the image wrapper: unlike the deceased treatment there's no
   filter to hang it off, and these wrappers are position:static by default, so without
   it the tag anchors to the page instead of the card. */
.hidden-media { position: relative; }
.hidden-tag { position: absolute; top: 0.45rem; right: 0.45rem; z-index: 2; font-family: var(--font-ui); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #fff; background: rgba(24,22,20,0.82); padding: 0.18rem 0.42rem; border-radius: 4px; }

/* Crosshatch on the rules section when only the owner and campaign owner can read it.
   A reminder for whoever configures sharing — restricted viewers never see this, they
   get no rules section at all. Sits above the card but below any interactive control. */
.rules-exclusive { position: relative; }
.rules-exclusive::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 1;
  background-image: repeating-linear-gradient(45deg, var(--border-color) 0, var(--border-color) 1px, transparent 1px, transparent 9px);
  opacity: 0.3; }
.rules-exclusive > * { position: relative; z-index: 2; }
.rules-exclusive-note { font-family: var(--font-ui); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }

/* "Hidden from campaign" banner at the top of a character page. */
.hidden-banner { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; padding: 0.55rem 0.8rem; border: var(--border); border-radius: 6px; background: var(--surface-1); font-family: var(--font-ui); font-size: 0.78rem; color: var(--ink-2); }
.hidden-banner strong { font-weight: 600; color: var(--ink); }
.secret-btn { display: inline-flex; align-items: center; gap: 0.35rem; background: transparent; border: 1.5px solid var(--border-color); border-radius: 6px; padding: 0.45rem 0.85rem; font-family: var(--font-ui); font-size: 0.8rem; color: var(--ink-3); cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.secret-btn:hover { border-color: var(--gold); color: var(--gold); }
.secret-btn.is-secret { border-color: var(--gold); color: var(--gold); }

/* ── Gallery ── */
.gallery-section { margin-top: 1.5rem; padding-top: 24px; border-top: 1px solid var(--border-color); }
.gallery-mobile-add { display: none; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.5rem; margin-top: 0.75rem; }
.gallery-thumb { border: 0; padding: 0; border-radius: 6px; overflow: hidden; background: var(--surface-2); aspect-ratio: 1/1; cursor: pointer; transition: opacity 0.15s; }
.gallery-thumb:hover { opacity: 0.85; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-add-tile { background: transparent; border: 1.5px dashed var(--border-color); display: flex; align-items: center; justify-content: center; color: var(--ink-3); transition: border-color 0.15s, color 0.15s; overflow: visible; }
.gallery-add-tile:hover { border-color: var(--ink-3); color: var(--ink-2); opacity: 1; }
.gallery-thumb.nsfw-blurred { position: relative; }
.gallery-thumb.nsfw-blurred img { filter: blur(12px); }
.nsfw-label { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.55); color: #fff; font-family: var(--font-ui); font-size: 0.65rem; font-weight: 700; padding: 0.15rem 0.45rem; border-radius: 3px; letter-spacing: 0.07em; pointer-events: none; white-space: nowrap; }
.gallery-empty { font-family: var(--font-ui); font-size: 0.82rem; color: var(--ink-3); padding: 0.5rem 0; }
@media(max-width:680px) { .gallery-mobile-add { display: inline-flex; } .gallery-add-tile { display: none; } }

/* ── Gallery set badge ── */
.gallery-set-badge { position:absolute; top:0; left:0; color:#fff; background:var(--dark,#1a1a1a); border-radius:0 0 6px 0; width:22px; height:22px; display:flex; align-items:center; justify-content:center; pointer-events:none; }
@keyframes gm-spin { to { transform: rotate(360deg); } }
.btn-spinner { animation: gm-spin 0.7s linear infinite; display:block; }

/* Lightbox */
.gallery-lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; }
.lb-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.88); }
.lb-center { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; max-width:min(90vw,900px); }
.lb-content { display: flex; flex-direction: column; align-items: center; max-height:calc(80vh - 90px); }
.lb-img { max-width: 100%; max-height: calc(75vh - 90px); object-fit: contain; border-radius: 4px; display: block; }
.lb-desc { color: rgba(255,255,255,0.75); font-family: var(--font-ui); font-size: 0.82rem; margin-top: 0.75rem; text-align: center; max-width: 600px; }
.lb-set-caption { color:rgba(255,255,255,0.45); font-family:var(--font-ui); font-size:0.78rem; margin-top:0.5rem; text-align:center; max-width:600px; font-style:italic; }
.lb-filmstrip { display:flex; gap:0.4rem; overflow-x:auto; max-width:min(90vw,900px); padding-bottom:0.25rem; scrollbar-width:thin; position:fixed; bottom:1rem; left:50%; transform:translateX(-50%); z-index:2; }
.lb-strip-item { flex-shrink:0; width:60px; height:60px; border-radius:5px; overflow:hidden; border:2px solid transparent; cursor:pointer; background:rgba(255,255,255,0.08); padding:0; transition:border-color 0.12s; }
.lb-strip-item img { width:100%; height:100%; object-fit:cover; display:block; }
.lb-strip-item.active { border-color:var(--gold); }
.lb-strip-item:hover:not(.active) { border-color:rgba(255,255,255,0.35); }
.lb-nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 2; background: rgba(0,0,0,0.45); border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; transition: background 0.15s; }
.lb-nav:hover { background: rgba(0,0,0,0.72); }
.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }
.lb-top-right { position: fixed; top: 1rem; right: 1rem; z-index: 2; display: flex; align-items: center; gap: 0.4rem; }
.lb-close { background: rgba(0,0,0,0.45); border: none; border-radius: 50%; width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; transition: background 0.15s; }
.lb-close:hover { background: rgba(0,0,0,0.72); }
.lb-edit { background: rgba(0,0,0,0.45); border: none; border-radius: 50%; width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; transition: background 0.15s; }
.lb-edit:hover { background: rgba(0,0,0,0.72); }
.lb-assocs { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; justify-content: flex-end; }
.lb-assoc-chip { display: inline-flex; align-items: center; gap: 0.3rem; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.2); border-radius: 100px; padding: 0.2rem 0.55rem 0.2rem 0.25rem; font-family: var(--font-ui); font-size: 0.72rem; color: #fff; text-decoration: none; backdrop-filter: blur(4px); transition: background 0.15s; white-space: nowrap; }
.lb-assoc-chip:hover { background: rgba(0,0,0,0.72); }
.lb-assoc-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.lb-assoc-initial { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.15); display: inline-flex; align-items: center; justify-content: center; font-size: 0.6rem; flex-shrink: 0; }

/* Gallery modal */
.gallery-modal-box { background: var(--surface); border-radius: 10px; width: min(480px, 96vw); display: flex; flex-direction: column; margin: auto; }
.modal-header { background: var(--dark); color: #fff; padding: 0.9rem 1.2rem; display: flex; align-items: center; justify-content: space-between; border-radius: 10px 10px 0 0; }
.modal-title { font-family: var(--font-ui); font-size: 0.88rem; font-weight: 600; letter-spacing: 0.02em; }
.modal-close { background: none; border: none; color: rgba(255,255,255,0.6); font-size: 1rem; cursor: pointer; line-height: 1; padding: 0.2rem; }
.modal-close:hover { color: #fff; }
.gm-drop-zone { margin: 1rem; border: 2px dashed var(--border-color); border-radius: 8px; min-height: 140px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.15s; overflow: hidden; }
.gm-drop-zone:hover, .gm-drop-zone.drag-over { border-color: var(--gold); }
.gm-placeholder { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--ink-3); font-family: var(--font-ui); font-size: 0.82rem; }
.gm-browse-label { color: var(--gold); cursor: pointer; text-decoration: underline; }
.gm-preview { max-width: 100%; max-height: 280px; object-fit: contain; display: block; border-radius: 6px; }
.gm-desc-input { margin: 0 1rem 0.75rem; padding: 0.5rem 0.65rem; border: 1px solid var(--border-color); border-radius: 6px; font-family: var(--font-ui); font-size: 0.82rem; color: var(--ink); background: var(--surface); resize: vertical; outline: none; transition: border-color 0.15s; }
.gm-desc-input:focus { border-color: var(--gold); }
.gm-assoc-section { margin: 0 1rem 0.75rem; }
.gm-assoc-label { font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 0.45rem; }
.gm-assoc-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.45rem; min-height: 0; }
.gm-tag { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--gold); background: var(--gold-bg); border-radius: 100px; padding: 0.22rem 0.5rem 0.22rem 0.3rem; font-family: var(--font-ui); font-size: 0.78rem; color: var(--ink); }
.gm-tag-remove { background: none; border: none; color: var(--ink-3); cursor: pointer; font-size: 0.65rem; line-height: 1; padding: 0; margin-left: 0.1rem; }
.gm-tag-remove:hover { color: var(--crimson); }
.gm-entity-search { width: 100%; padding: 0.4rem 0.6rem; border: 1px solid var(--border-color); border-radius: 6px; font-family: var(--font-ui); font-size: 0.82rem; color: var(--ink); background: var(--surface); outline: none; transition: border-color 0.15s; }
.gm-entity-search:focus { border-color: var(--gold); }
.gm-entity-results { position: absolute; background: var(--surface); border: var(--border); border-radius: 6px; box-shadow: var(--shadow-lg); z-index: 10; overflow: hidden; }
.gm-entity-result { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; padding: 0.45rem 0.75rem; font-family: var(--font-ui); font-size: 0.82rem; color: var(--ink); background: none; border: none; cursor: pointer; }
.gm-entity-result:hover { background: var(--surface-2); }
.gm-assoc-section { position: relative; }
.gm-quick-assocs { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.45rem; margin-bottom: 0.5rem; }
.gm-quick-assoc-btn { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--surface-1); border: 1px solid var(--border-color); border-radius: 100px; padding: 0.22rem 0.65rem 0.22rem 0.3rem; font-family: var(--font-ui); font-size: 0.78rem; color: var(--ink-2); cursor: pointer; transition: border-color 0.12s, background 0.12s, color 0.12s; }
.gm-quick-assoc-btn:hover { border-color: var(--gold); background: var(--gold-bg); color: var(--ink); }
.gm-quick-assoc-btn.selected { border-color: var(--gold); background: var(--gold-bg); color: var(--ink); }
.gm-qa-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.gm-qa-initial { background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 0.6rem; font-family: var(--font-ui); color: var(--ink-3); }
.gm-actions { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; border-top: 1px solid var(--border-color); margin-top: auto; }
.btn-cancel { background: none; border: 1px solid var(--border-color); border-radius: 6px; padding: 0.45rem 0.9rem; font-family: var(--font-ui); font-size: 0.82rem; color: var(--ink-2); cursor: pointer; }
.btn-cancel:hover { border-color: var(--ink-3); }
.btn-danger-sm { background: none; border: 1px solid var(--crimson); border-radius: 6px; padding: 0.45rem 0.9rem; font-family: var(--font-ui); font-size: 0.82rem; color: var(--crimson); cursor: pointer; }
.btn-danger-sm:hover { background: var(--crimson); color: #fff; }
.btn-primary.gm-save { padding: 0.45rem 1rem; width: auto; background: var(--gold); color: #111; }
.btn-primary.gm-save:hover { background: var(--gold-2, #c9971f); }

/* ── Gallery modal: single/set mode toggle ── */
.gm-mode-toggle { display:flex; margin:1rem 1rem 0.75rem; border:1px solid var(--border-color); border-radius:7px; overflow:hidden; }
.gm-mode-btn { flex:1; background:none; border:none; padding:0.5rem 0; font-family:var(--font-ui); font-size:0.82rem; color:var(--ink-3); cursor:pointer; transition:background 0.12s,color 0.12s; }
.gm-mode-btn.active { background:var(--surface-2); color:var(--ink); font-weight:600; }

/* ── Gallery modal: set image grid ── */
.gm-set-grid { display:flex; flex-wrap:wrap; gap:0.5rem; margin:0 1rem 0.75rem; }
.gm-set-grid-item { width:72px; height:72px; border-radius:6px; border:2px solid transparent; overflow:visible; cursor:pointer; flex-shrink:0; padding:0; background:var(--surface-2); position:relative; }
.gm-set-grid-item img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; border-radius:4px; }
.gm-set-grid-item.selected { border-color:var(--gold); }
.gm-set-grid-item.drag-target { border-color:var(--gold); opacity:0.7; }
.gm-set-grid-remove { position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%; background:rgba(20,20,20,0.85); color:#fff; border:1.5px solid rgba(255,255,255,0.25); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:10px; line-height:1; z-index:2; padding:0; }
.gm-set-grid-add { width:72px; height:72px; border-radius:6px; border:2px dashed var(--ink-3); display:flex; align-items:center; justify-content:center; cursor:pointer; background:none; color:var(--ink-3); flex-shrink:0; transition:opacity 0.1s; }
.gm-set-grid-add:hover { border-color:var(--gold); color:var(--gold); }
.gm-set-grid.dragging .gm-set-grid-add { display:none; }


/* ── Assoc sections (linked pages: characters / things / locations) ── */
.loc-section { margin-top:1.5rem; padding-top:24px; border-top:1px solid var(--border-color); margin-bottom:1.5rem; }
.loc-modal-item { display:flex; align-items:center; gap:0.75rem; padding:0.6rem 0.75rem; border-radius:7px; cursor:pointer; transition:background 0.1s; }
.loc-modal-item:hover { background:var(--surface-2); }
.loc-modal-item.selected { background:var(--surface-2); }
.loc-modal-check { margin-left:auto; color:var(--gold); font-size:0.9rem; opacity:0; }
.loc-modal-item.selected .loc-modal-check { opacity:1; }
.assoc-search { width:100%; padding:0.45rem 0.75rem; border:1px solid var(--border-color); border-radius:6px; font-family:var(--font-ui); font-size:0.85rem; color:var(--ink); background:var(--surface); outline:none; transition:border-color 0.15s; box-sizing:border-box; margin-bottom:0.5rem; }
.assoc-search:focus { border-color:var(--gold); }
.manage-short { display:none; }
@media(max-width:500px) { .manage-full { display:none; } .manage-short { display:inline; } }

/* ── Entity card grid (campaign page, place locations, etc.) ── */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.5rem; max-width:calc(5 * 220px + 4 * 1.5rem); }
.char-card { background:var(--surface); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:var(--border); transition:box-shadow 0.2s,transform 0.2s; display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.char-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.char-img { width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:3.5rem; color:var(--ink-3); flex-shrink:0; overflow:hidden; }
.char-img img { width:100%; height:100%; object-fit:cover; display:block; }
.char-body { padding:0.85rem 1rem 1rem; flex:1; display:flex; flex-direction:column; }
.char-name { font-size:1rem; font-weight:700; color:var(--ink); margin-bottom:0.2rem; font-family:var(--font-display); }
.char-subtitle { font-family:var(--font-ui); font-size:0.78rem; color:var(--ink-3); line-height:1.5; flex:1; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.char-creator { display:flex; align-items:center; gap:0.4rem; margin-top:0.65rem; padding-top:0.65rem; border-top:var(--border); }
.char-creator-name { font-family:var(--font-ui); font-size:0.72rem; color:var(--ink-3); }
.grid.compact { grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); }
.grid.compact .char-name { font-size:0.88rem; }
.grid.compact .char-subtitle { font-size:0.72rem; }
.grid.compact .char-img { font-size:2.8rem; }
@media(max-width:550px) {
  .grid { grid-template-columns:1fr; gap:0.75rem; }
  .char-card { flex-direction:row; }
  .char-img { width:88px; flex-shrink:0; border-radius:0; }
  .char-creator { display:none; }
}

/* ── Skeleton loading ── */
.skel { background: var(--surface-2); border-radius: 4px; display: block; }
#skeleton { animation: none; }
#content { transition: opacity 0.15s ease; }

/* ── Universal header search ── */
.nav-ref-btn { background: none; border: none; color: rgba(255,255,255,0.75); cursor: pointer; padding: 0.4rem; align-items: center; justify-content: center; border-radius: 6px; transition: background 0.15s, color 0.15s; line-height: 0; }
.nav-ref-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.header-search { position: relative; display: flex; align-items: center; }
.header-search-btn { display: none; background: none; border: none; color: rgba(255,255,255,0.75); cursor: pointer; padding: 0.4rem; align-items: center; justify-content: center; border-radius: 6px; transition: background 0.15s; }
.header-search-btn:hover { background: rgba(255,255,255,0.08); }
.header-search-bar { display: flex; align-items: center; gap: 0.5rem; width: 200px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; padding: 0.35rem 0.6rem; color: rgba(255,255,255,0.5); transition: width 0.15s; }
.header-search-bar:focus-within { border-color: rgba(255,255,255,0.3); }
.header-search-input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: #fff; font-family: var(--font-ui); font-size: 0.82rem; }
.header-search-input::placeholder { color: rgba(255,255,255,0.4); }
.header-search-clear { display: none; align-items: center; justify-content: center; background: none; border: none; color: rgba(255,255,255,0.5); cursor: pointer; font-size: 0.8rem; padding: 0.1rem; flex-shrink: 0; }
.header-search-clear:hover { color: #fff; }
.header-search-bar.has-value .header-search-clear { display: flex; }

.header-search-results { display: none; position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: calc(100vw - 2rem); max-height: 70vh; overflow-y: auto; background: var(--surface); border: var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 0.4rem 0; z-index: 150; }
.header-search-results.open { display: block; }
.header-search-group + .header-search-group { border-top: var(--border); margin-top: 0.3rem; padding-top: 0.3rem; }
.header-search-group-label { font-family: var(--font-ui); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); padding: 0.3rem 0.9rem 0.2rem; }
.header-search-row { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.45rem 0.9rem; background: none; border: none; text-align: left; cursor: pointer; font-family: var(--font-ui); font-size: 0.84rem; color: var(--ink); transition: background 0.1s; }
.header-search-row:hover { background: var(--surface-1); }
.header-search-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; flex-shrink: 0; }
.header-search-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-search-row-meta { flex-shrink: 0; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.7rem; color: var(--ink-3); }
.header-search-empty { padding: 0.9rem; font-family: var(--font-ui); font-size: 0.82rem; color: var(--ink-3); text-align: center; }

@media(max-width:680px) {
  .header-search-bar { display: none; }
  .header-search-btn { display: flex; }
  .header-search.open { position: absolute; inset: 0; background: var(--dark); z-index: 20; padding: 0 2rem; }
  html.dark .header-search.open { background: #111111; }
  .header-search.open .header-search-btn { display: none; }
  .header-search.open .header-search-bar { display: flex; width: 100%; }
  .header-search.open .header-search-results { left: 2rem; right: 2rem; width: auto; max-width: none; }
}

/* ── Catalog info modal (universal search results) ── */
.search-info-meta { font-family: var(--font-ui); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); margin: 0 0 0.9rem; }
.search-info-stats { margin-bottom: 0.9rem; }
.search-info-stat-row { display: flex; justify-content: space-between; padding: 0.35rem 0; font-family: var(--font-ui); font-size: 0.82rem; border-bottom: var(--border); }
.search-info-stat-row span:first-child { color: var(--ink-3); }
.search-info-stat-row span:last-child { color: var(--ink); font-weight: 600; text-align: right; }
.search-info-desc { font-family: var(--font-ui); font-size: 0.85rem; line-height: 1.6; color: var(--ink-2); }

/* ── Reference modal (Dark Heresy rules browser) ── */
/* Sits below the shared detail popup (.modal-backdrop, z-index 1000) so tapping
   a row opens the info modal cleanly on top of the browser. */
.ref-modal-backdrop { z-index: 990; }
/* Pinned to the top (margin:0 auto overrides .modal's centring) with a stable
   min-height, so the window doesn't jump around as its content resizes. */
.ref-modal { max-width: 560px; margin: 0 auto; min-height: min(600px, 90vh); display: flex; flex-direction: column; overflow: hidden; }
.ref-nav { padding: 0.6rem 1.2rem; border-bottom: var(--border); background: var(--surface); flex-shrink: 0; }
.ref-nav:empty { display: none; }
.ref-navrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; }
.ref-navrow .ref-prev-toggle { margin-left: auto; }
.ref-body { padding: 0; overflow-y: auto; flex: 1; min-height: 0; }
.ref-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem; font-family: var(--font-ui); font-size: 0.8rem; }
.ref-crumb { background: none; border: none; padding: 0.1rem 0.15rem; cursor: pointer; color: var(--ink-3); font-family: var(--font-ui); font-size: 0.8rem; transition: color 0.12s; }
.ref-crumb:hover { color: var(--gold); }
.ref-crumb-cur { color: var(--ink); font-weight: 700; padding: 0.1rem 0.15rem; }
.ref-crumb-sep { color: var(--ink-3); opacity: 0.6; margin: 0 0.1rem; }

/* Reference head region (banner-home at the root, plain top bar deeper in) */
.ref-head { flex-shrink: 0; }
/* Root screen: no top bar. Banner with the logo, close × in the corner, and a
   floating search box tucked under the banner. */
.ref-home-banner { position: relative; height: 210px; background-color: var(--surface-2); background-image: url("/static/reference-hero.jpg"); background-size: cover; background-position: center 30%; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; }
.ref-home-logo { max-width: 74%; max-height: 78%; object-fit: contain; filter: drop-shadow(0 3px 10px rgba(0,0,0,0.55)); }
.ref-home-close { position: absolute; top: 0.6rem; right: 0.7rem; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,0,0,0.45); color: #fff; font-size: 1.25rem; backdrop-filter: blur(3px); transition: background 0.12s; }
.ref-home-close:hover { background: rgba(0,0,0,0.7); color: #fff; }
.ref-home-search { display: flex; align-items: center; gap: 0.5rem; width: min(86%, 400px); margin: -22px auto 0.15rem; position: relative; z-index: 2; padding: 0.6rem 0.9rem; background: var(--surface); border: var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); color: var(--ink-3); }
.ref-home-search svg { flex-shrink: 0; width: 15px; height: 15px; }

.ref-home { display: flex; flex-direction: column; }
.ref-home-list { display: flex; flex-direction: column; }
.ref-home-row { display: flex; align-items: baseline; gap: 0.65rem; width: 100%; padding: 0.95rem 1.4rem; background: none; border: none; border-bottom: var(--border); cursor: pointer; text-align: left; transition: background 0.12s; }
.ref-home-row:last-child { border-bottom: none; }
.ref-home-row:hover { background: var(--surface-1); }
.ref-home-label { flex: 1; font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; letter-spacing: 0.01em; color: var(--ink); }
.ref-home-count { font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600; color: var(--ink-3); }
.ref-home-chev { width: 15px; height: 15px; align-self: center; color: var(--ink-3); flex-shrink: 0; transition: color 0.12s, transform 0.12s; }
.ref-home-row:hover .ref-home-chev { color: var(--gold); transform: translateX(2px); }

.ref-list { display: flex; flex-direction: column; }
.ref-row { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.6rem 1.2rem; background: none; border: none; border-bottom: var(--border); text-align: left; cursor: pointer; font-family: var(--font-ui); font-size: 0.86rem; color: var(--ink); transition: background 0.1s; }
.ref-row:hover { background: var(--surface-1); }
.ref-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.12rem; }
.ref-nm { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-list.ref-prev-on .ref-nm { white-space: normal; overflow: visible; text-overflow: clip; }
.ref-pv { display: block; color: var(--ink-3); font-size: 0.74rem; line-height: 1.35; white-space: normal; }
.ref-row-meta { flex-shrink: 0; align-self: flex-start; font-size: 0.7rem; color: var(--ink-3); font-weight: 600; padding-top: 0.05rem; }
.ref-menu-row .ref-row-meta, .ref-menu-row .ref-nm { align-self: center; }

.ref-prev-toggle { display: inline-flex; align-items: center; gap: 0.45rem; background: none; border: none; cursor: pointer; font-family: var(--font-ui); font-size: 0.76rem; color: var(--ink-3); white-space: nowrap; }
.ref-prev-toggle.on { color: var(--ink); }
.ref-prev-track { width: 28px; height: 16px; border-radius: 8px; background: var(--surface-2); position: relative; transition: background 0.15s; flex-shrink: 0; }
.ref-prev-toggle.on .ref-prev-track { background: var(--gold); }
.ref-prev-dot { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.ref-prev-toggle.on .ref-prev-dot { transform: translateX(12px); }


@media(max-width:680px) { .ref-modal { max-width: 100%; } }

/* Reference "DH1e differs" flag on Phenomena/Perils rows */
.ref-diff { display: inline-block; margin-left: 0.5rem; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gold); border: 1px solid var(--gold); border-radius: 4px; padding: 0.02rem 0.3rem; vertical-align: middle; }
/* Roll-range column on Phenomena/Perils rows (sorted by roll) */
.ref-roll { flex-shrink: 0; align-self: flex-start; min-width: 3.4rem; font-family: var(--font-ui); font-size: 0.78rem; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 0.02rem; }
.ref-menu-hint { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.62rem; }
.search-info-tabletitle { font-family: var(--font-ui); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); margin: 1rem 0 0.1rem; }

/* Sortable table leaf (Talents) */
.ref-table-wrap { overflow-x: auto; }
.ref-thead, .ref-trow { display: grid; align-items: center; min-width: 380px; }
.ref-thead.ref-table-talents, .ref-tbody.ref-table-talents .ref-trow { grid-template-columns: minmax(116px, 1.7fr) 42px minmax(80px, 1.1fr) 68px; }
.ref-thead { position: sticky; top: 0; background: var(--surface); border-bottom: 2px solid var(--border-color); z-index: 1; }
.ref-th { background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-ui); font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); padding: 0.5rem 0.5rem; white-space: nowrap; transition: color 0.12s; }
.ref-th:hover { color: var(--ink); }
.ref-th.on { color: var(--gold); }
.ref-trow { width: 100%; background: none; border: none; border-bottom: var(--border); cursor: pointer; text-align: left; transition: background 0.1s; }
.ref-trow:hover { background: var(--surface-1); }
.ref-td { padding: 0.5rem 0.5rem; font-family: var(--font-ui); font-size: 0.82rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-td.ref-c-name { color: var(--ink); font-weight: 600; }
.ref-td.ref-c-src, .ref-th.ref-c-src { color: var(--ink-3); padding-left: 0.25rem; padding-right: 0.4rem; }
.ref-tbody.ref-prev-on .ref-trow { align-items: start; }
.ref-tbody.ref-prev-on .ref-c-name { white-space: normal; overflow: visible; text-overflow: clip; padding-top: 0.5rem; }
.ref-tbody.ref-prev-on .ref-td:not(.ref-c-name) { padding-top: 0.55rem; }

/* Type-and-filter living in the dark top bar */
.ref-header { gap: 0.85rem; }
.ref-title { flex-shrink: 0; }
.ref-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.7rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.14); border-radius: 7px; color: rgba(255,255,255,0.6); transition: border-color 0.12s, background 0.12s; }
.ref-search:focus-within { border-color: var(--gold); background: rgba(255,255,255,0.14); }
.ref-search svg { flex-shrink: 0; width: 15px; height: 15px; }
.ref-filter-input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-family: var(--font-ui); font-size: 0.84rem; color: #fff; }
.ref-filter-input::placeholder { color: rgba(255,255,255,0.5); }
/* In the light floating home box the text/placeholder need dark ink instead */
.ref-home-search .ref-filter-input { color: var(--ink); }
.ref-home-search .ref-filter-input::placeholder { color: var(--ink-3); }
.ref-home-search:focus-within { border-color: var(--gold); }

/* Catalog info modal: tables (hit locations, crit effects) + edition toggle */
.search-info-tablewrap { overflow-x: auto; margin-top: 0.4rem; }
.search-info-table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: 0.8rem; }
.search-info-table th { text-align: left; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.66rem; padding: 0.35rem 0.5rem; border-bottom: 2px solid var(--border-color); white-space: nowrap; }
.search-info-table td { padding: 0.4rem 0.5rem; border-bottom: var(--border); color: var(--ink-2); vertical-align: top; }
.search-info-table td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }
.search-info-editions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.si-ed-btn { font-family: var(--font-ui); font-size: 0.74rem; font-weight: 600; padding: 0.25rem 0.6rem; border: 1px solid var(--border-color); border-radius: 6px; background: var(--surface); color: var(--ink-3); cursor: pointer; transition: all 0.12s; }
.si-ed-btn:hover { border-color: var(--gold); color: var(--ink); }
.si-ed-btn.on { background: var(--gold); border-color: var(--gold); color: #fff; }
.si-differs { margin-left: auto; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gold); }
.si-differs.si-same { color: var(--ink-3); font-weight: 600; }
.search-info-altname { font-family: var(--font-ui); font-size: 0.8rem; color: var(--ink-2); margin-bottom: 0.6rem; }