styles.css

/*
 * Randomness plugin styles.
 *
 * Kept minimal — uses Obsidian's CSS variables so the UI inherits the
 * user's theme. Override in your snippets folder if you want a
 * different look.
 */

/* Inline rdm: rendering */

.randomness-clickable {
    /* Generic "this element is clickable" pointer cue. Used by
     * the browser pane's result body to signal click-to-copy. */
    cursor: pointer;
}

.randomness-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0 0.25em;
    border-radius: 3px;
    background: var(--background-modifier-hover);
    font-family: inherit;
}

.randomness-inline-locked {
    background: var(--background-modifier-success);
    color: var(--text-on-accent);
}

.randomness-inline-preview {
    background: var(--background-modifier-hover);
    font-style: italic;
}

.randomness-inline-result {
    /* The actual result text */
}

.randomness-inline-controls {
    display: inline-flex;
    gap: 0.15em;
    /* Always visible. The earlier opacity-fade-on-hover hid them in
     * Live Preview where mouse-tracking interacts oddly with
     * CodeMirror, and made the lock/reroll buttons hard to find on
     * first inspection. Explicit pointer-events guards against theme
     * snippets that disable pointer-events on inline-children of
     * code-styled spans. */
    pointer-events: auto;
}

.randomness-inline-button {
    background: none;
    border: none;
    padding: 0 0.15em;
    margin: 0;
    cursor: pointer;
    font-size: 0.85em;
    line-height: 1;
    color: inherit;
    /* Match the controls' pointer-events guard. */
    pointer-events: auto;
}

.randomness-inline-button:hover {
    opacity: 0.7;
}

.randomness-inline-error {
    /* Red text on a neutral panel background — readable in every
     * theme. (Red-on-red was unreadable in dark themes where
     * `--background-modifier-error` is a vivid solid red.) */
    color: var(--text-error);
    background: var(--background-secondary);
    border: 1px solid var(--text-error);
    border-radius: 4px;
    padding: 0 0.3em;
    font-family: var(--font-monospace);
    font-size: 0.85em;
}

/* Codeblock output */

.randomness-loading {
    color: var(--text-muted);
    font-style: italic;
}

.randomness-output {
    /* Inherit from the surrounding markdown styling */
}

.randomness-error {
    /* Both `--background-modifier-error` AND its `-hover` variant are
     * vivid solid reds in many themes, and `--text-error` is also red
     * — so any of them as the background gave red-on-red, leaving the
     * message unreadable. Use the neutral panel background with the
     * normal text colour so the message is always legible; the strong
     * red is reserved for the left border so the row still reads as an
     * error at a glance. */
    color: var(--text-normal);
    background: var(--background-secondary);
    padding: 0.5em 0.75em;
    border-radius: 4px;
    border-left: 3px solid var(--text-error);
}

.randomness-error > strong {
    color: var(--text-error);
    display: block;
    margin-bottom: 0.25em;
}

.randomness-error-message {
    color: var(--text-normal);
    font-family: var(--font-monospace);
    font-size: 0.85em;
    margin-top: 0.25em;
    white-space: pre-wrap;
}

/* Prompt controls */

.randomness-prompts {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    padding: 0.5em 0.75em;
    margin-bottom: 0.75em;
    background: var(--background-secondary);
    border-radius: 4px;
}

.randomness-prompt-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.randomness-prompt-label {
    font-weight: 500;
    min-width: 8em;
}

.randomness-prompt-input,
.randomness-prompt-select {
    flex: 1;
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    color: var(--text-normal);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: inherit;
    font-size: inherit;
}

/* Reroll control (codeblock rollers) */

.randomness-codeblock-controls {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0.75em;
}

.randomness-reroll-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.25em 0.7em;
    background: var(--interactive-normal);
    color: var(--text-normal);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.2;
    box-shadow: var(--input-shadow, none);
}

.randomness-reroll-btn:hover {
    background: var(--interactive-hover);
}

.randomness-reroll-btn:active {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
}

.randomness-reroll-btn:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 1px;
}

/* ── Generator browser (right-sidebar pane) ── */

.randomness-browser {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.5em;
    gap: 0.5em;
    overflow: hidden;
}

.randomness-browser-loading {
    color: var(--text-muted);
    font-style: italic;
    padding: 1em;
    text-align: center;
}

.randomness-browser-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
}

.randomness-browser-header h3 {
    margin: 0;
    font-size: 1em;
}

.randomness-browser-header-actions {
    display: flex;
    gap: 0.3em;
    flex-shrink: 0;
}

.randomness-browser-collapse-all,
.randomness-browser-reload {
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    color: var(--text-normal);
    padding: 0.2em 0.6em;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8em;
}

.randomness-browser-collapse-all:hover,
.randomness-browser-reload:hover {
    background: var(--background-modifier-hover);
}

.randomness-browser-filter {
    width: 100%;
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    color: var(--text-normal);
    padding: 0.3em 0.5em;
    border-radius: 3px;
    font-family: inherit;
    font-size: inherit;
}

.randomness-browser-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}

.randomness-browser-empty {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 1em 0;
}

/* Tree nodes — folders and files. Indentation comes from nesting the
 * children container; each level adds extra left-padding. */

.randomness-browser-folder,
.randomness-browser-file {
    display: flex;
    flex-direction: column;
}

.randomness-browser-folder-header,
.randomness-browser-file-header {
    display: flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.2em 0.3em;
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
    /* Keep names from overflowing the sidebar horizontally; long names
     * truncate with an ellipsis instead. */
    min-width: 0;
}

.randomness-browser-folder-header:hover,
.randomness-browser-file-header:hover {
    background: var(--background-modifier-hover);
}

.randomness-browser-chevron {
    color: var(--text-muted);
    font-size: 0.8em;
    width: 1em;
    flex-shrink: 0;
    text-align: center;
}

.randomness-browser-folder-name {
    font-weight: 600;
    color: var(--text-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.randomness-browser-file-title {
    color: var(--text-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.randomness-browser-folder-count,
.randomness-browser-file-count {
    color: var(--text-muted);
    font-size: 0.75em;
    background: var(--background-modifier-border);
    padding: 0 0.4em;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Indent children one level. Nested folders inherit the indent
 * cumulatively, so the depth is visible without per-level styles. */
.randomness-browser-folder-children {
    padding-left: 0.9em;
    border-left: 1px dotted var(--background-modifier-border);
    margin-left: 0.4em;
}

.randomness-browser-entry-error {
    color: var(--text-error);
    font-size: 0.85em;
    padding: 0.2em 0.5em;
}

.randomness-browser-entry-note {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.85em;
    padding: 0.2em 0.5em;
}

.randomness-browser-tables {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    /* Tables sit just inside an expanded file; indent them a touch
     * so they group visually under the file's title row. */
    padding-left: 1.4em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

.randomness-browser-table-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.randomness-browser-roll-btn {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border: none;
    padding: 0.15em 0.6em;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8em;
    flex-shrink: 0;
}

.randomness-browser-roll-btn:hover {
    background: var(--interactive-accent-hover);
}

/* Copy-inline button: emoji label so we don't fight for horizontal
 * space with the Roll button + table name. Less visually heavy than
 * the accent-coloured Roll button — it's the secondary action. */
.randomness-browser-copy-inline-btn {
    background: var(--background-secondary);
    color: var(--text-normal);
    border: 1px solid var(--background-modifier-border);
    padding: 0.05em 0.4em;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.85em;
    flex-shrink: 0;
    line-height: 1.2;
}

.randomness-browser-copy-inline-btn:hover {
    background: var(--background-modifier-hover);
}

/* Pin toggle: visually consistent with Copy-inline (also a
 * secondary button next to the Roll primary), but its filled
 * state gets accent colour so the user can tell at a glance
 * which tables they've pinned. */
.randomness-browser-pin-btn {
    background: var(--background-secondary);
    color: var(--text-normal);
    border: 1px solid var(--background-modifier-border);
    padding: 0.05em 0.4em;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.85em;
    flex-shrink: 0;
    line-height: 1.2;
    /* Slightly muted when unpinned so the affordance is "ready
     * to act on", not "hey look at me". */
    opacity: 0.7;
}

.randomness-browser-pin-btn:hover {
    background: var(--background-modifier-hover);
    opacity: 1;
}

.randomness-browser-pin-btn-active {
    /* Pinned state — full opacity and a subtle accent tint on the
     * border so the pin button reads as "engaged". */
    opacity: 1;
    border-color: var(--interactive-accent);
}

/* Favourites sort toggle on the section header (issue #15). Sits
 * after the count badge; accent border when a non-default sort is
 * active so the user can see why rows aren't in pin order. */
.randomness-browser-fav-sort-btn {
    background: var(--background-secondary);
    color: var(--text-muted);
    border: 1px solid var(--background-modifier-border);
    padding: 0 0.35em;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8em;
    line-height: 1.3;
    flex-shrink: 0;
    margin-left: auto;
}

.randomness-browser-fav-sort-btn:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

.randomness-browser-fav-sort-btn-active {
    color: var(--text-normal);
    border-color: var(--interactive-accent);
}

/* ▲▼ manual reorder buttons on favourite rows. Stacked vertically
 * and compact so they don't push the Roll button out of line. */
.randomness-browser-move {
    display: inline-flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 1px;
}

.randomness-browser-move-btn {
    background: transparent;
    color: var(--text-muted);
    border: none;
    padding: 0;
    margin: 0;
    box-shadow: none;
    cursor: pointer;
    font-size: 0.55em;
    line-height: 1;
    height: 0.9em;
}

.randomness-browser-move-btn:hover:not(:disabled) {
    color: var(--text-normal);
    background: transparent;
}

.randomness-browser-move-btn:disabled {
    opacity: 0.25;
    cursor: default;
}

/* Table name + optional source-file subtitle. The pinned-section
 * variant stacks them vertically (display: flex column on the
 * containing label wrap). Regular tree shows just the name. */
.randomness-browser-table-label {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.randomness-browser-table-name {
    color: var(--text-normal);
    font-size: 0.85em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.randomness-browser-table-source {
    color: var(--text-muted);
    font-size: 0.75em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Pull the subtitle visually closer to the name above it,
     * since they're a unit. */
    margin-top: -0.1em;
}

/* The Favourites section's outer wrap inherits folder styles;
 * this extra class gives it a thin accent-coloured left border so
 * it reads as a distinguished group at the top of the tree. */
.randomness-browser-favourites {
    border-left: 2px solid var(--interactive-accent);
    margin-bottom: 0.4em;
    padding-left: 2px;
}

.randomness-browser-result {
    /* The grip above draws the divider line. Cap height so a very
     * long result doesn't push the list out of view; the body
     * itself scrolls if needed. */
    max-height: 40%;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    flex-shrink: 0;
}

/* Dragged to a size: the grip sets an explicit height and the
 * 40% cap no longer applies. */
.randomness-browser-result.is-sized {
    max-height: none;
    min-height: 0;
}

/* Drag grip between the tree and the result panel. Sits on the
 * panel's top border; drag to resize, double-click to reset. */
.randomness-browser-result-grip {
    flex-shrink: 0;
    height: 9px;
    margin: -4px 0;
    cursor: ns-resize;
    position: relative;
    touch-action: none;
}
.randomness-browser-result-grip::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 4px;
    border-top: 1px solid var(--background-modifier-border);
}
.randomness-browser-result-grip::after {
    content: "";
    position: absolute;
    left: 50%; top: 3px;
    width: 28px; height: 3px;
    margin-left: -14px;
    border-radius: 2px;
    background: var(--background-modifier-border);
}
.randomness-browser-result-grip:hover::after,
.randomness-browser-result-grip.is-dragging::after {
    background: var(--interactive-accent);
}

.randomness-browser-result-hint {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    font-size: 0.85em;
}

.randomness-browser-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
}

.randomness-browser-result-label {
    font-weight: 600;
    font-size: 0.85em;
    color: var(--text-muted);
    /* Truncate the "Title / Table" label if too long. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.randomness-browser-copy-btn {
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    color: var(--text-normal);
    padding: 0.15em 0.6em;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8em;
    flex-shrink: 0;
}

.randomness-browser-copy-btn:hover {
    background: var(--background-modifier-hover);
}

.randomness-browser-result-body {
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 3px;
    padding: 0.5em;
    overflow-y: auto;
    /* Fill whatever height the panel has (sized or capped) and
     * scroll inside it rather than pushing the panel taller. */
    flex: 1 1 auto;
    min-height: 0;
    /* Keep whitespace from multi-result rolls (newline-joined). */
    white-space: pre-wrap;
    font-family: inherit;
}

.randomness-browser-result-body:hover {
    background: var(--background-modifier-hover);
}

/* Embedded images from `![[image.png]]` wiki-syntax. Cap the
 * max width so a huge image doesn't blow out the layout of the
 * codeblock/inline/result containers — but respect intrinsic
 * smaller sizes and any explicit width="N" from the pipe-syntax. */
.randomness-embed-image {
    max-width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    border-radius: 3px;
}

/* Unresolved wiki link. Matches Obsidian's own convention — a
 * muted, dashed-underline appearance so the user can see the
 * link is broken but the text still reads.
 *
 * A dashed `border-bottom` is used for the underline rather than an
 * underline decoration: the Obsidian community-plugin linter flags
 * the underline-decoration family as only partially supported on the
 * older minAppVersion, whereas a dashed bottom border is universally
 * supported and renders identically. padding-bottom keeps the border
 * clear of the text baseline. */
.randomness-unresolved-link {
    color: var(--text-error, var(--text-muted));
    border-bottom: 1px dashed currentColor;
    padding-bottom: 1px;
    cursor: help;
}

/* Reference view — read-only help pane opened from settings or
 * the "Open reference" command. Cap inner width on wide displays
 * so the long-form prose stays readable; add comfortable padding
 * and let Obsidian's theme handle typography. */
.randomness-reference-view {
    padding: 1em 1.5em;
    overflow-y: auto;
}

.randomness-reference-content {
    max-width: 50em;
    margin: 0 auto;
    /* Inherit theme font / sizes — don't override; the goal is
     * "looks native". The padding gives some breathing room from
     * the pane edges on narrow displays. */
}

/* The rendered markdown contains code blocks. Obsidian renders
 * them with its own styling already, but we boost padding a hair
 * so syntax examples don't crowd the prose around them. */
.randomness-reference-content pre {
    margin: 0.8em 0;
}

/* Inline rdm:[@ autocomplete suggestion items. Two-line layout:
 * the table name on top, the source file as a muted subtitle
 * below. Obsidian's suggestion-container provides padding and
 * hover highlight; we only style the inner content. */
.randomness-suggest-item {
    display: flex;
    flex-direction: column;
    /* tight vertical spacing — the popup is already padded */
    gap: 0;
}

.randomness-suggest-name {
    font-size: 0.95em;
    color: var(--text-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.randomness-suggest-source {
    font-size: 0.75em;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: -0.1em;
}

/* Out-of-scope suggestion items — tables that exist somewhere in
 * the vault but aren't imported by the current note. Picking one
 * surfaces a Notice telling the user how to import it. Visually
 * muted so the in-scope items are obviously the primary
 * suggestions. */
.randomness-suggest-out-of-scope .randomness-suggest-name {
    color: var(--text-muted);
    font-style: italic;
}

.randomness-suggest-out-of-scope .randomness-suggest-source {
    color: var(--text-faint);
}

/* ─── Portraits (```portrait codeblocks) ─── */
.randomness-portrait-bar { margin-bottom: 6px; }
.randomness-portrait-grid {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start;
}
.randomness-portrait-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.randomness-portrait-art svg { display: block; width: 100%; height: auto; }
.randomness-portrait-art {
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px; overflow: hidden;
}
.randomness-portrait-caption {
  font-size: var(--font-ui-smaller); color: var(--text-muted);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.randomness-portrait-actions { display: flex; gap: 6px; }
.randomness-portrait-hint { color: var(--text-muted); font-style: italic; }

/* lock/unlock overlay (top-right of the art) */
.randomness-portrait-art { position: relative; }
.randomness-portrait-lockbtn {
  position: absolute; top: 4px; right: 4px;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  border-radius: 6px; border: 1px solid var(--background-modifier-border);
  background: var(--background-primary); color: var(--text-muted);
  opacity: 0; transition: opacity 120ms ease;
  cursor: pointer;
}
.randomness-portrait-art:hover .randomness-portrait-lockbtn { opacity: 0.9; }
.randomness-portrait-lockbtn:hover { color: var(--text-normal); opacity: 1; }

/* roller pane */
.randomness-portrait-pane-controls {
  display: flex; gap: 8px; margin-bottom: 8px; align-items: center;
}
.randomness-portrait-pane-controls input[type="number"] { width: 64px; }
.randomness-portrait-pane .randomness-portrait-grid { gap: 8px; }

/* panel tabs (generator browser: Generators / Portraits / Builder) */
.randomness-panel-tabs {
  display: flex; gap: 4px; margin-bottom: 8px;
  border-bottom: 1px solid var(--background-modifier-border);
  padding-bottom: 6px;
}
.randomness-panel-tab {
  background: transparent; border: none; cursor: pointer;
  padding: 4px 10px; border-radius: 6px; color: var(--text-muted);
}
.randomness-panel-tab.is-active {
  background: var(--background-modifier-hover); color: var(--text-normal);
  font-weight: 600;
}
/* settings: the per-tab "Show … tab" toggles sit under one heading row */
.randomness-setting-indent { padding-left: 1.5em; }

/* overlay icon buttons (PNG top-left, lock/copy top-right) */
.randomness-portrait-iconbtn {
  position: absolute; top: 4px;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  border-radius: 6px; border: 1px solid var(--background-modifier-border);
  background: var(--background-primary); color: var(--text-muted);
  opacity: 0; transition: opacity 120ms ease; cursor: pointer;
}
.randomness-portrait-iconbtn-top-left { left: 4px; }
.randomness-portrait-iconbtn-top-right { right: 4px; }
.randomness-portrait-art:hover .randomness-portrait-iconbtn { opacity: 0.9; }
.randomness-portrait-iconbtn:hover { color: var(--text-normal); opacity: 1; }

/* inline portraits */
.randomness-portrait-inline {
  display: inline-block; vertical-align: middle; line-height: 0;
}
.randomness-portrait-inline svg { width: 100%; height: auto; display: block; }

/* builder tab */
.randomness-portrait-builder { display: flex; gap: 12px; flex-wrap: wrap; }
.randomness-portrait-builder-form {
  display: flex; flex-direction: column; gap: 6px; min-width: 220px; flex: 1;
}
.randomness-portrait-builder-row {
  display: flex; gap: 6px; align-items: center;
}
.randomness-portrait-builder-row label {
  width: 110px; font-size: var(--font-ui-smaller); color: var(--text-muted);
}
.randomness-portrait-builder-row select { flex: 1; min-width: 0; }

/* small overlay icons (inline spans + bottom corners) */
.randomness-portrait-iconbtn-bottom-left { bottom: 4px; left: 4px; top: auto; }
.randomness-portrait-iconbtn-bottom-right { bottom: 4px; right: 4px; top: auto; }
.randomness-portrait-iconbtn-small { width: 20px; height: 20px; }
.randomness-portrait-iconbtn-small svg { width: 13px; height: 13px; }
.randomness-portrait-inline { position: relative; }
.randomness-portrait-inline .randomness-portrait-iconbtn { opacity: 0; }
.randomness-portrait-inline:hover .randomness-portrait-iconbtn { opacity: 0.9; }

/* ── Dice tray (Dice Roller merge, Phase 5) ─────────────────────── */

.randomness-tray {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.randomness-tray-result {
    font-size: 1.6em;
    font-weight: 600;
    text-align: center;
    padding: 12px 8px;
    border-radius: 8px;
    background: var(--background-secondary);
    cursor: pointer;
    min-height: 1.4em;
    word-break: break-word;
    user-select: text;
}
.randomness-tray-dice {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}
.randomness-tray-die {
    min-width: 44px;
    font-variant-numeric: tabular-nums;
}
.randomness-tray-opts {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
}
.randomness-tray-mod-value {
    min-width: 2.5em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.randomness-tray-pool {
    text-align: center;
    font-family: var(--font-monospace);
    font-size: 0.9em;
    padding: 4px;
    border-radius: 6px;
    background: var(--background-secondary);
    word-break: break-word;
}
.randomness-tray-pool.is-empty {
    color: var(--text-muted);
    font-family: inherit;
}
.randomness-tray-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
}
.randomness-tray-formula {
    display: flex;
    gap: 4px;
}
.randomness-tray-input {
    flex: 1;
    min-width: 0;
}
.randomness-tray-heading {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-top: 4px;
}
.randomness-tray-saved-row,
.randomness-tray-history-row {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 2px 0;
}
.randomness-tray-saved-roll {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}
.randomness-tray-history-row {
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 4px;
}
.randomness-tray-history-row:hover {
    background: var(--background-secondary);
}
.randomness-tray-history-formula {
    flex: 1;
    color: var(--text-muted);
    font-family: var(--font-monospace);
    font-size: 0.85em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.randomness-tray-history-result {
    font-weight: 600;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Per-die breakdown under a history row ("2d10 → 7, 3"). Full-width
   line below formula+result, muted and small so it reads as detail. */
.randomness-tray-history-detail {
    flex-basis: 100%;
    color: var(--text-faint);
    font-family: var(--font-monospace);
    font-size: 0.75em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.randomness-tray-history-row {
    flex-wrap: wrap;
}

/* ── Graphical dice overlay (Dice Roller merge, Phase 6) ────────── */

.randomness-dice3d-layer {
    position: fixed;
    inset: 0;
    z-index: var(--layer-notice, 1000);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: pointer;
    background: transparent;
}
/* The backdrop lives only behind the dice: a rounded, softly blurred
   card sized to its contents — theme-aware rather than a full-screen
   scrim. */
.randomness-dice3d-table {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    align-items: center;
    justify-content: center;
    max-width: 72vw;
    padding: 30px 38px 40px;
    border-radius: 18px;
    background: color-mix(
        in srgb,
        var(--background-primary) 82%,
        transparent
    );
    backdrop-filter: blur(3px);
    border: 1px solid var(--background-modifier-border);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    animation: rdm-backdrop-in 0.18s ease-out;
}
@keyframes rdm-backdrop-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}
.randomness-dice3d-die {
    width: 64px;
    height: 64px;
    position: relative;
    perspective: 420px;
    margin-bottom: 18px;
    flex: 0 0 auto;
    /* Fade lives HERE, on the flat wrapper — animating opacity on the
       preserve-3d cube flattens its 3D rendering in Chromium and can
       expose mirrored backfaces (the "mirrored 1" bug). */
    animation: rdm-die-fade 0.3s ease-out both;
}
@keyframes rdm-die-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.randomness-dice3d-die-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20px;
    text-align: center;
    font-size: 0.75em;
    font-weight: 600;
    color: var(--text-muted);
    text-shadow: 0 0 4px var(--background-primary);
}
/* Tell the dice apart at a glance: one hue per die type. */
.randomness-dice3d-d4 .randomness-dice3d-chip { filter: hue-rotate(-40deg); }
.randomness-dice3d-d8 .randomness-dice3d-chip { filter: hue-rotate(35deg); }
.randomness-dice3d-d10 .randomness-dice3d-chip { filter: hue-rotate(80deg); }
.randomness-dice3d-d12 .randomness-dice3d-chip { filter: hue-rotate(150deg); }
.randomness-dice3d-d20 .randomness-dice3d-chip { filter: hue-rotate(210deg); }
.randomness-dice3d-d100 .randomness-dice3d-chip { filter: hue-rotate(280deg); }
.randomness-dice3d-die.is-dropped {
    opacity: 0.35;
    filter: grayscale(0.8);
}
.randomness-dice3d-hidden {
    display: none;
}

/* d6: a real cube */
.randomness-dice3d-cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: rdm-tumble 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.randomness-dice3d-face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6em;
    font-weight: 700;
    color: var(--text-on-accent, #fff);
    background: var(--interactive-accent);
    border: 2px solid var(--background-modifier-border);
    border-radius: 10px;
    backface-visibility: hidden;
}
.randomness-dice3d-face-front  { transform: translateZ(32px); }
.randomness-dice3d-face-back   { transform: rotateY(180deg) translateZ(32px); }
.randomness-dice3d-face-right  { transform: rotateY(90deg) translateZ(32px); }
.randomness-dice3d-face-left   { transform: rotateY(-90deg) translateZ(32px); }
.randomness-dice3d-face-top    { transform: rotateX(90deg) translateZ(32px); }
.randomness-dice3d-face-bottom { transform: rotateX(-90deg) translateZ(32px); }

.randomness-dice3d-land-1 { --rdm-lx: 0deg;    --rdm-ly: 0deg; }
.randomness-dice3d-land-2 { --rdm-lx: 0deg;    --rdm-ly: -90deg; }
.randomness-dice3d-land-3 { --rdm-lx: -90deg;  --rdm-ly: 0deg; }
.randomness-dice3d-land-4 { --rdm-lx: 90deg;   --rdm-ly: 0deg; }
.randomness-dice3d-land-5 { --rdm-lx: 0deg;    --rdm-ly: 90deg; }
.randomness-dice3d-land-6 { --rdm-lx: 0deg;    --rdm-ly: 180deg; }

@keyframes rdm-tumble {
    from {
        transform: rotateX(0deg) rotateY(0deg) translateY(-22vh);
    }
    60% {
        transform: rotateX(calc(540deg + var(--rdm-lx, 0deg)))
            rotateY(calc(360deg + var(--rdm-ly, 0deg))) translateY(4px);
    }
    to {
        transform: rotateX(calc(720deg + var(--rdm-lx, 0deg)))
            rotateY(calc(720deg + var(--rdm-ly, 0deg))) translateY(0);
    }
}

/* other dice: shaped chips with a number-cycle */
.randomness-dice3d-chip {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4em;
    font-weight: 700;
    color: var(--text-on-accent, #fff);
    background: var(--interactive-accent);
    border: 2px solid var(--background-modifier-border);
    animation: rdm-chipspin 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes rdm-chipspin {
    from { transform: rotate(0turn) scale(0.4) translateY(-22vh); }
    to   { transform: rotate(2turn) scale(1) translateY(0); }
}
.randomness-dice3d-d4 .randomness-dice3d-chip {
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    padding-top: 14px;
}
.randomness-dice3d-d8 .randomness-dice3d-chip {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.randomness-dice3d-d10 .randomness-dice3d-chip,
.randomness-dice3d-d100 .randomness-dice3d-chip {
    clip-path: polygon(50% 0%, 92% 38%, 50% 100%, 8% 38%);
}
.randomness-dice3d-d12 .randomness-dice3d-chip {
    clip-path: polygon(50% 0%, 98% 35%, 79% 91%, 21% 91%, 2% 35%);
}
.randomness-dice3d-d20 .randomness-dice3d-chip {
    clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0% 50%);
}

.randomness-dice3d-total {
    font-size: 2em;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 12px;
    background: var(--background-primary);
    border: 2px solid var(--interactive-accent);
}
/* Present from the start so the card is pre-sized; revealed (with a
   pop) only once the dice settle. */
.randomness-dice3d-total.is-pending {
    visibility: hidden;
}
.randomness-dice3d-total:not(.is-pending) {
    animation: rdm-fadein 0.25s ease-out;
}
@keyframes rdm-fadein {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}

.randomness-dice3d-cube,
.randomness-dice3d-chip {
    animation-fill-mode: both;
}

/* ── Persistent decks (Decks tab + inline deck: spans) ──────────── */

.randomness-deck {
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    padding: 8px;
    margin: 8px 0;
}
.randomness-deck-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.randomness-deck-chevron {
    color: var(--text-muted);
    font-size: 0.75em;
    flex-shrink: 0;
}
.randomness-deck-name {
    font-weight: 600;
    flex: 1;
}
.randomness-deck.is-collapsed {
    padding-top: 5px;
    padding-bottom: 5px;
}
.randomness-deck-count {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.randomness-deck-card {
    margin: 6px 0;
    text-align: center;
    /* Anchor for the portrait-style overlay icon buttons. */
    position: relative;
}
.randomness-deck-card:hover .randomness-portrait-iconbtn {
    opacity: 0.9;
}
/* window.DiceRoller shim rollers (Initiative Tracker encounter
   counts and other API consumers): result + a small re-roll die. */
.randomness-shim-roller {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.randomness-shim-roller-die {
    display: inline-flex;
    color: var(--text-muted);
}
.randomness-shim-roller-die svg {
    width: 0.9em;
    height: 0.9em;
}
.randomness-shim-roller:hover .randomness-shim-roller-die {
    color: var(--text-normal);
}

/* deck: codeblock display — the tab's card renderer at block size */
.randomness-deck-block {
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    padding: 10px;
    margin: 8px 0;
    max-width: 420px;
}
.randomness-deck-block .randomness-deck-card-img {
    height: 340px;
}
/* Multi-card deal (`deck:Name|5`): the hand as a wrapping row of
   smaller cards, oldest-dealt first. */
.randomness-deck-hand {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
}
.randomness-deck-hand .randomness-deck-card {
    margin: 0;
    flex: 0 1 auto;
    max-width: 150px;
}
.randomness-deck-block .randomness-deck-hand .randomness-deck-card-img {
    height: 170px;
}
.randomness-deck-block:has(.randomness-deck-hand) {
    max-width: 680px;
}
/* Dungeon grids (`deck:Name|2x2`): W×H tiles, each turned its own
   way; hover a tile for its reroll/rotate buttons. Quarter-turn
   decks should use square card art — a 90°-turned rectangle
   overflows its cell. */
.randomness-deck-gridblock {
    max-width: fit-content;
}
.randomness-deck-grid {
    display: grid;
    gap: 6px;
    justify-content: center;
    margin: 4px auto;
}
.randomness-deck-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.randomness-deck-tile-img {
    width: 100%;
    display: block;
    border-radius: 4px;
}
.randomness-deck-tile-img.is-reversed {
    transform: rotate(180deg);
}
.randomness-deck-tile-img.is-turned-right {
    transform: rotate(90deg);
}
.randomness-deck-tile-img.is-turned-left {
    transform: rotate(-90deg);
}
.randomness-deck-tile-text {
    font-size: var(--font-ui-small);
    text-align: center;
    padding: 4px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    align-self: stretch;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}
.randomness-deck-tilebtns {
    position: absolute;
    top: 2px;
    right: 2px;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 120ms ease;
}
.randomness-deck-tile:hover .randomness-deck-tilebtns,
.randomness-deck-tilebtns:focus-within {
    opacity: 0.95;
}
.randomness-deck-tilebtn {
    font-size: var(--font-ui-smaller);
    padding: 0 4px;
    cursor: pointer;
}
.randomness-deck-grid-hint {
    grid-column: 1 / -1;
}
.randomness-deck-block-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
}
.randomness-deck-card-img {
    max-width: 100%;
    /* Fixed box (not max-height): the tab repaints on every draw and
       a fresh <img> has zero height until it decodes, so the name and
       text below flashed at the top and jumped down when the image
       arrived. Reserving the full box up front keeps the layout
       stable; object-fit letterboxes non-5:7 card art without
       distortion. */
    height: 240px;
    object-fit: contain;
    border-radius: 6px;
    display: block;
    margin: 0 auto 4px;
}
.randomness-deck-card-img.is-reversed {
    transform: rotate(180deg);
}
.randomness-deck-card-img.is-turned-right {
    transform: rotate(90deg);
}
.randomness-deck-card-img.is-turned-left {
    transform: rotate(-90deg);
}
.randomness-deck-card-name {
    font-weight: 600;
}
.randomness-deck-card-text {
    font-size: var(--font-ui-small);
    color: var(--text-normal);
    text-align: left;
    margin-top: 4px;
}
.randomness-deck-card-badge {
    display: inline-block;
    font-size: var(--font-ui-smaller);
    color: var(--text-on-accent);
    background: var(--interactive-accent);
    border-radius: 4px;
    padding: 1px 6px;
    margin-bottom: 4px;
}
.randomness-deck-card-hint {
    color: var(--text-muted);
    font-size: var(--font-ui-small);
}
.randomness-deck-back-default {
    font-size: 64px;
    line-height: 1;
    color: var(--text-faint);
}
.randomness-deck-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 6px 0;
}
.randomness-deck-button {
    font-size: var(--font-ui-small);
    padding: 2px 8px;
}
.randomness-deck-flip {
    font-size: var(--font-ui-small);
    color: var(--text-muted);
}
.randomness-deck-flip-input {
    width: 56px;
    margin-left: 4px;
}
.randomness-deck-history {
    font-size: var(--font-ui-small);
    margin-top: 4px;
}
.randomness-deck-history ol {
    margin: 4px 0 0;
    padding-left: 20px;
}

/* Inline `deck:Name` spans. */
.randomness-deck-inline-body {
    margin-left: 2px;
}
.randomness-deck-inline-img {
    max-height: 48px;
    vertical-align: middle;
    border-radius: 3px;
    margin-right: 4px;
}
.randomness-deck-inline-img.is-reversed {
    transform: rotate(180deg);
}
.randomness-deck-inline-img.is-turned-right {
    transform: rotate(90deg);
}
.randomness-deck-inline-img.is-turned-left {
    transform: rotate(-90deg);
}
.randomness-deck-turn-select {
    margin-right: 6px;
}
.randomness-deck-inline-name {
    font-weight: 600;
}
.randomness-deck-inline-count {
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
}

/* Controls rendered into a note are not text, and starting a
 * drag-select on one is never useful. `makeEditorSafe()` adds this
 * class unless the element is a whole rendered result — those people
 * do select and copy. A class rather than an inline style so no
 * JavaScript writes to `el.style`; it survives `cloneNode` just the
 * same, which the editor guard relies on. */
.randomness-no-select {
    user-select: none;
}