/* ============================================================ SCREENS — where the parts go. Nothing here invents a look: buttons, frames, "on" states, type voices and surfaces are parts.css, and a rule here that restyled one of them would be the first step back to every page drawing its own. Theme records supply values; parts.css supplies the parts; this file supplies the layout. ============================================================ */ :root { --world-nav-w: clamp(248px, 17.2vw, 290px); --workspace-bar-h: 64px; } /* ------------------------------------------------------------ THE FRAME — the desk: navigation on the left, the bar across the top. ------------------------------------------------------------ */ /* The bar sits above the stage (index.html), full width, so a drawer opens BENEATH it and nothing in it moves. */ .sb-head { display: none; } html[data-view='list'] .sb-head:not([hidden]) { display: flex; position: fixed; z-index: 30; top: 0; left: 0; right: 0; border-bottom: 1px solid var(--chrome-rule); } html[data-view='list'] { --stage-top: var(--bar-h, var(--workspace-bar-h)); } .sb-top { display: flex; align-items: center; gap: 14px; padding: 10px 16px; min-height: 52px; } .sb-spacer { flex: 1 1 auto; } .sb-universe { display: flex; flex-direction: row; align-items: center; gap: 10px; min-width: 0; } .sb-universe .k { color: var(--accent); font-size: 22px; } .sb-universe .n { font: 18px var(--serif); color: var(--chrome-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Open records — objects you opened, so they have edges and a close. */ .sb-tabs { display: flex; align-items: end; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; } .sb-tab { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 8px 0 16px; box-sizing: border-box; font: 14px var(--sans); color: var(--ink-dim); cursor: pointer; white-space: nowrap; background: color-mix(in srgb, var(--chrome-ink) 3%, transparent); border: 1px solid var(--chrome-rule); border-radius: var(--control-radius); } .sb-tab:hover { color: var(--chrome-ink); } .sb-tab[aria-selected='true'] { color: var(--chrome-ink); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--chrome)); } .sb-tab .sb-tab-icon { width: 16px; height: 16px; } .sb-tab-x { width: 24px; height: 24px; font: 17px/1 var(--sans); border: 0; background: none; } .sb-tab-new { width: 40px; height: 40px; border: 1px solid var(--chrome-rule); background: transparent; font: 22px/1 var(--sans); border-radius: var(--control-radius); } .workspace-find { position: relative; } .workspace-find-box { display: flex; align-items: center; gap: 10px; width: clamp(160px, 16vw, 250px); height: 40px; box-sizing: border-box; padding: 0 8px 0 12px; border: 1px solid var(--chrome-rule); border-radius: var(--control-radius); background: color-mix(in srgb, var(--chrome-ink) 3%, var(--chrome)); color: var(--ink-dim); } .workspace-find-box > span { font: 22px/1 var(--sans); } #workspaceSearch { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--chrome-ink); font: 14px var(--sans); } #workspaceSearch::placeholder { color: var(--ink-dim); } #workspaceSearch:focus-visible { outline: none; } .workspace-find-box:focus-within { border-color: var(--accent); } .workspace-find-box kbd { padding: 3px 6px; border-radius: 4px; font: 11px var(--sans); white-space: nowrap; background: color-mix(in srgb, var(--chrome-ink) 9%, var(--chrome)); } .workspace-search-results { position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; min-width: 300px; max-width: 80vw; max-height: 400px; overflow: auto; padding: 6px; border: 1px solid var(--chrome-rule); background: var(--chrome); box-shadow: 0 14px 40px #0009; } .workspace-search-results button { width: 100%; text-align: left; padding: 10px 12px; background: transparent; border: 0; color: inherit; font: 14px var(--sans); cursor: pointer; border-radius: var(--control-radius); } .workspace-search-results button:hover { background: color-mix(in srgb, var(--accent) 14%, var(--chrome)); } .theme-shortcut { width: 38px; height: 38px; border-radius: 999px; border: 0; background: transparent; color: var(--chrome-ink); font: 22px/1 var(--sans); cursor: pointer; } .theme-shortcut:hover { background: color-mix(in srgb, var(--chrome-ink) 9%, transparent); } .sb-head .pancake span { background: var(--chrome-ink); } /* The nav — fixed on the left from desktop width up. */ .world-nav { display: none; } @media (min-width: 1100px) { html:is([data-view='list'], [data-view='settings'], [data-view='play'], [data-view='playing']) .world-nav { position: fixed; inset: 0 auto 26px 0; z-index: 31; width: var(--world-nav-w); display: flex; flex-direction: column; padding: 0 14px 18px; box-sizing: border-box; border-right: 1px solid var(--chrome-rule); overflow-y: auto; } html:is([data-view='list'], [data-view='settings'], [data-view='play'], [data-view='playing']) #stage { left: var(--world-nav-w); } /* The sidebar holds the lists, so the menu does not repeat them. */ html:is([data-view='list'], [data-view='settings'], [data-view='play']) .menu-build { display: none; } html[data-view='list'] .sb-head:not([hidden]) { left: var(--world-nav-w); height: var(--workspace-bar-h); flex-direction: row-reverse; align-items: stretch; } html[data-view='list'] .sb-top { flex: 0 0 auto; } html[data-view='list'] .sb-top .sb-universe { display: none; } html[data-view='list'] .sb-tabs { flex: 1; padding: 0 12px; align-items: center; } html[data-view='play'] :is(.app-header, .play-context) { left: var(--world-nav-w); } } /* Whose this is: the product in the corner, the universe under it. */ .world-nav-brand { display: flex; align-items: center; gap: 12px; height: var(--workspace-bar-h); flex: none; margin: 0 -14px; padding: 0 22px; box-sizing: border-box; border-bottom: 1px solid var(--chrome-rule); color: var(--accent-text); } .brand-mark { width: 26px; height: 32px; flex: none; } .brand-name { font: 600 27px/1 var(--display); letter-spacing: -.01em; color: var(--accent-text); } .world-nav-title { display: grid; gap: 6px; padding: 18px 8px 14px; margin-bottom: 10px; border-bottom: 1px solid var(--chrome-rule); } .world-nav-title .label { color: var(--ink-dim); } #navUniverseChooser { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 0; font: inherit; color: var(--chrome-ink); background: none; border: 0; text-align: left; cursor: pointer; } #navUniverseName { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 18px/1.2 var(--serif); } #navUniverseChooser .chevron { width: 16px; height: 16px; flex: none; color: var(--ink-dim); } #navUniverseChooser:hover .chevron { color: var(--chrome-ink); } /* A section of the universe: a row, separated by a hairline. Only the one you are in gets a frame — "here" from parts.css. */ #worldNavLists { display: grid; gap: 2px; } .world-nav-link { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 6px 12px; box-sizing: border-box; text-align: left; cursor: pointer; color: var(--chrome-ink); font: 400 16px/1.2 var(--serif); background: transparent; border: 1px solid transparent; border-radius: var(--control-radius); } #worldNavLists .world-nav-link + .world-nav-link:not([aria-current='page']) { box-shadow: 0 -1px 0 color-mix(in srgb, var(--chrome-rule) 65%, transparent); } #worldNavLists .world-nav-link[aria-current='page'] + .world-nav-link { box-shadow: none; } .world-nav-link:hover { background: color-mix(in srgb, var(--chrome-ink) 5%, transparent); } .world-nav-link > svg { width: 21px; height: 21px; flex: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .world-nav-link > span { min-width: 0; } .world-nav-link .nav-record-count { margin-left: auto; font: 13px var(--sans); color: var(--ink-dim); } .world-nav-link[aria-current='page'] .nav-record-count { color: var(--accent-text); } .world-nav-link:disabled { opacity: .45; cursor: default; } .world-nav-recent { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--chrome-rule); } .world-nav-recent > p { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 10px; padding: 0 8px; font: 16px var(--serif); } #recentCount { font: 13px var(--sans); color: var(--ink-dim); } #recentSearch { width: 100%; min-height: 36px; margin: 0 0 10px; padding: 8px 12px; box-sizing: border-box; border: 1px solid var(--chrome-rule); border-radius: var(--control-radius); background: color-mix(in srgb, var(--chrome-ink) 3%, var(--chrome)); color: var(--chrome-ink); font: 13px var(--sans); } #recentSearch::placeholder { color: var(--ink-dim); } #worldNavRecords { display: grid; gap: 4px; } #worldNavRecords .recent-record { gap: 12px; min-height: 0; padding: 6px 8px; font: 14px/1.25 var(--sans); } #worldNavRecords .recent-record > span:last-child { display: grid; gap: 2px; min-width: 0; } .recent-record strong { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .recent-record small { font: 13px var(--sans); color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .recent-thumbnail, .recent-monogram { width: 40px; height: 40px; flex: none; object-fit: cover; box-sizing: border-box; border: 1px solid var(--chrome-rule); border-radius: var(--panel-radius); } .recent-monogram { display: grid; place-items: center; color: var(--accent); font: 22px var(--display); background: color-mix(in srgb, var(--accent) 10%, var(--chrome)); } #worldNavRecords .sb-tab-icon { width: 40px; height: 40px; padding: 8px; box-sizing: border-box; border: 1px solid var(--chrome-rule); } #worldNavRecords .recent-empty { color: var(--ink-dim); font: 13px/1.6 var(--sans); padding: 2px 8px; } @media (max-width: 1099px) { .workspace-find, .theme-shortcut { display: none; } } @media (max-width: 700px) { .sb-tabs { display: none; } .sb-top { gap: 8px; padding: 8px 12px; } } /* ------------------------------------------------------------ THE CHARACTER PAGE — the reference for every record page. banner who this is: portrait, name, one line, actions section tabs which part of them you are reading timeline the thread of moments, quiet, at the left page header label · title · one line …… search · primary · ⋯ body frames: tiles, then the table drawer supporting detail, on the desk ------------------------------------------------------------ */ #stage .cm-sheet-page { max-width: none; width: 100%; margin: 0; padding: 0; box-sizing: border-box; grid-template-rows: auto auto minmax(0, 1fr); } /* Banner. The painting runs edge to edge; a wash of page sits behind the name only, so the words read and the right of the painting stays vivid. THE PORTRAIT IS SIZED BY HEIGHT, from the top edge: a portrait is head-first, so the head lands in the same place at every width and the body runs off the bottom of the banner rather than the head off the top. A drop shadow seats a cut-out figure in the painting. */ #stage .cm-banner { position: relative; isolation: isolate; overflow: visible; box-sizing: border-box; height: 176px; min-height: 176px; margin: 0; padding: 22px 84px 20px 260px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; background: color-mix(in srgb, var(--card) 70%, var(--board)); border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; } #stage .cm-banner-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; opacity: 1; } #stage .cm-banner::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, transparent 14%, color-mix(in srgb, var(--board) 76%, transparent) 30%, color-mix(in srgb, var(--board) 66%, transparent) 52%, transparent 80%); } #stage .cm-banner::after { content: ''; position: absolute; inset: auto 0 0 0; height: 34px; z-index: -1; background: linear-gradient(transparent, color-mix(in srgb, var(--shadow) 14%, transparent)); } #stage .cm-banner .cm-portrait { position: absolute; z-index: -2; left: 8px; top: 0; bottom: 0; width: 210px; height: auto; border: 0; background: transparent; overflow: hidden; display: block; filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--shadow) 45%, transparent)); -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent); mask-image: linear-gradient(90deg, #000 72%, transparent); } #stage .cm-banner .cm-portrait img { width: 100%; height: auto; object-fit: initial; } #stage .cm-banner .cm-portrait-empty { color: color-mix(in srgb, var(--accent) 45%, var(--ink-dim)); font: 96px var(--display); } #stage .cm-banner .cm-head-text { grid-column: 1; grid-row: 1; gap: 6px; } #stage .cm-banner .cm-name { width: 100%; min-width: 0; height: auto; padding: 0; margin: 0; font: 600 clamp(38px, 5cqi, 52px)/1.02 var(--display); letter-spacing: -.03em; color: var(--ink); background: transparent; border: 0; border-bottom: 1px dashed transparent; border-radius: 0; } #stage .cm-banner .cm-name:hover { border-bottom-color: color-mix(in srgb, var(--ink) 25%, transparent); } #stage .cm-banner .cm-name:focus { outline: none; border-bottom-color: var(--accent); } #stage .cm-banner .cm-subtitle { font: 18px/1.3 var(--serif); color: var(--ink); margin: 0; } /* What they are, then their tags, on one line; the tags wrap under it when the line runs out. */ #stage .cm-head-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); } #stage .cm-head-line > .cm-tags { margin-top: 0; } /* The description: reads as a line, edits in place. A dashed rule under it on hover and focus is the only sign it takes typing. */ #stage .cm-banner .cm-head-desc { font: italic 17px/1.4 var(--serif); color: var(--ink-dim); margin: 0; max-width: 62ch; border-bottom: 1px dashed transparent; cursor: text; outline: none; } #stage .cm-banner .cm-head-desc:hover { border-bottom-color: var(--rule); } #stage .cm-banner .cm-head-desc:focus { color: var(--ink); border-bottom-color: var(--ink-dim); } #stage .cm-banner .cm-head-desc:empty::before { content: attr(data-placeholder); color: var(--ink-faint, var(--ink-dim)); } /* Banner actions sit on the painting, so they carry their own page behind them. */ .cm-banner-edit, #stage details.cm-banner-edit:has(> .menu) { position: absolute; right: 22px; top: 20px; z-index: 4; } .cm-banner-edit > summary { list-style: none; } .cm-banner-edit > summary::-webkit-details-marker { display: none; } #stage .cm-banner-edit > summary { display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box; cursor: pointer; font: 22px/1 var(--sans); color: var(--ink); background: color-mix(in srgb, var(--card) 85%, transparent); backdrop-filter: blur(4px); border: 1px solid color-mix(in srgb, var(--rule) 80%, transparent); border-radius: 999px; box-shadow: 0 2px 8px color-mix(in srgb, var(--shadow) 18%, transparent); } #stage .cm-banner-edit > summary:hover, #stage .cm-banner-edit[open] > summary { border-color: var(--action-2); color: var(--action-2); } /* The menu is parts.css §23's; it hangs from the ⋯, and while it is open the banner sits above the section tabs and the page, so nothing under it covers an item. */ #stage .cm-banner-edit > .cm-banner-controls { top: calc(100% + 8px); right: 0; width: 260px; white-space: normal; } #stage .cm-banner:has(.cm-banner-edit[open]) { z-index: 30; overflow: visible; } #stage .cm-banner-controls > .group-label { margin: var(--sp-2) 10px var(--sp-1); } #stage .cm-banner-controls > .group-label:first-child { margin-top: var(--sp-1); } #stage .cm-menu-upload { position: relative; overflow: hidden; } #stage .cm-menu-upload > input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } /* A choice inside a menu: its words, and a compact select at the end. */ #stage .cm-menu-field { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--h-line); padding: 0 10px; font: 400 var(--fs-body)/1.2 var(--sans); color: var(--ink); } #stage .cm-menu-field > .field { flex: 0 0 132px; } #stage .cm-pp-grid.cm-library-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); } #stage .cm-pp-grid.cm-library-grid > .cm-pp-cell { aspect-ratio: 4 / 3; } /* Section tabs: which part you are reading — an accent rule exactly as wide as the word. */ #stage .cm-sheet-page > .cm-tabs { display: flex; flex-wrap: nowrap; gap: 36px; margin: 0; padding: 0 30px; min-height: 48px; box-sizing: border-box; background: color-mix(in srgb, var(--card) 55%, transparent); border: 0; border-bottom: 1px solid var(--rule); position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } #stage .cm-sheet-page > .cm-tabs::-webkit-scrollbar { display: none; } /* More tabs this way: the strip fades out on that side. */ #stage .cm-sheet-page > .cm-tabs[data-fade='end'] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); } #stage .cm-sheet-page > .cm-tabs[data-fade='start'] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); } #stage .cm-sheet-page > .cm-tabs[data-fade='both'] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); } #stage .cm-sheet-page > .cm-tabs > .cm-tab { flex: none; } #stage .cm-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 0; min-height: 48px; font: 400 17px var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink-dim); background: transparent; border: 0; border-radius: 0; white-space: nowrap; } #stage .cm-tab:hover { color: var(--ink); } #stage .cm-tab[aria-selected='true'] { color: var(--ink); font-weight: 600; background: transparent; border: 0; } #stage .cm-tab[aria-selected='true']::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); } /* The thread of moments: a quiet margin, not a second page. */ #stage .cm-body { grid-template-columns: 196px minmax(0, 1fr); gap: 0; padding: 0; } /* Narrow, the thread moves to a Timeline tab and the sheet is alone — it takes the whole row, not the rail's column. */ #stage .cm-body > .cm-version:only-child { grid-column: 1 / -1; } /* Wide, the thread has the room to read: each moment's line wraps less and the titles stop truncating. */ @media (min-width: 1500px) { #stage .cm-body { grid-template-columns: 250px minmax(0, 1fr); } } @media (min-width: 1900px) { #stage .cm-body { grid-template-columns: 300px minmax(0, 1fr); } } #stage .cm-log { padding: 24px 14px 16px; border-right: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); background: transparent; } #stage .cm-log-list { gap: 4px; } #stage .cm-moment-open { padding: 10px 8px; border-radius: var(--control-radius); background: transparent; border: 1px solid transparent; } #stage .cm-moment-open:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); } #stage .cm-moment-body strong { font: 400 16px/1.25 var(--serif); } #stage .cm-moment-what { font: 13px/1.4 var(--sans); font-style: normal; color: var(--ink-dim); opacity: 1; letter-spacing: 0; text-transform: none; } #stage .cm-log .cm-add { width: 100%; font-size: 13px; } /* The page header: label · title · one line, actions at the right. */ #stage .cm-version { grid-template-rows: auto minmax(0, 1fr); } #stage .cm-moment-head { margin: 0; padding: var(--sp-3) 36px 0; border: 0; } #stage .cm-moment-head:empty { display: none; } #stage .cm-moment-head:empty + .cm-panel { --pane-top: 20px; padding-top: var(--pane-top); } /* The past-version banner: 12 above it, 12 below it before the page, which scrolls under a 3px fade so nothing butts against it. */ #stage .cm-moment-head:not(:empty) { padding-bottom: 0; } #stage .cm-moment-head:not(:empty) + .cm-panel { --pane-top: var(--sp-3); padding-top: var(--pane-top); /* 3px, not the full padding: a long fade left a band of half-seen text over a sticky toolbar. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 3px); mask-image: linear-gradient(to bottom, transparent 0, #000 3px); } /* --pane-top is the scroller's top padding, so a sticky toolbar inside (parts.css §17) can stick to its edge rather than under the padding. */ #stage .cm-version > .cm-panel { --pane-top: 2px; padding: var(--pane-top) 36px 40px; } #stage .cm-panel .cm-panel { padding: 0; overflow: visible; } #stage .cm-version > .cm-panel, #stage .cm-sheet { background: transparent; border: 0; } #stage .cm-has-spells > .cm-group { margin-bottom: 18px; } #stage .cm-has-spells > .cm-group[data-section='spellcasting'] > .group-label, #stage .cm-has-spells > .cm-group[data-section='spellbook'] > .group-label { display: none; } #stage .cm-spell-table > .cm-empty { margin: 0; padding: 16px; font: 14px var(--sans); color: var(--ink-dim); } /* Tiles: square frames. A drawing, a label, a number. */ /* ONE HEIGHT, WHATEVER WRAPS. The label is allowed two lines from the start, so a tile does not grow or shrink when a drawer narrows the page; the content sits centred, with more air above and below than between the label and the number. */ /* Slots: a line of facts under the tiles, not more tiles. */ /* The table: one frame; a label row; level bands; data rows. */ /* ONE GRID FOR THE WHOLE TABLE. The header, every band's list and every row are subgrids of it, so a column is as wide as the widest thing in it — header word or cell — and what is left over is shared equally, so the columns sit evenly across the frame. */ #stage .cm-spell-table { --frame-fill: color-mix(in srgb, var(--card) 55%, transparent); overflow: visible; --spell-gap: 26px; display: grid; grid-template-columns: var(--spell-cols); column-gap: var(--spell-gap); } #stage .cm-spell-table > * { grid-column: 1 / -1; } #stage :is(.cm-spell-columns, .cm-spells, .cm-spells .cm-spell) { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; column-gap: var(--spell-gap); align-items: center; } #stage .cm-spells > .cm-missing-row { grid-column: 1 / -1; } #stage .cm-spell-columns { padding: 12px 16px 10px; border: 0; border-bottom: 1px solid var(--rule); background: transparent; border-radius: 0; font: 600 11px/1.2 var(--caps); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); } /* Every header word sorts; the one in use carries its direction. */ #stage .cm-spell-columns > span { display: flex; } #stage .cm-sort { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 0; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; } #stage .cm-sort:hover, #stage [aria-sort='ascending'] > .cm-sort, #stage [aria-sort='descending'] > .cm-sort { color: var(--ink); } #stage :is([aria-sort='ascending'], [aria-sort='descending']) > .cm-sort::after { content: ''; flex: none; width: 0; height: 0; border: 4px solid transparent; border-bottom: 0; border-top: 5px solid currentColor; } #stage [aria-sort='descending'] > .cm-sort::after { transform: rotate(180deg); } #stage .cm-spell-columns > .cm-column-menu { overflow: visible; } /* A checked column: a tick in a square box — a choice, not an action. */ /* One of several: a round mark, filled with a dot. */ #stage .cm-spell > .cm-spell-line { display: none; } #stage .cm-spell-level { margin: 0; padding: 9px 16px; display: flex; align-items: center; gap: 10px; font: 600 11px/1.2 var(--caps); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); } #stage .cm-spells { margin: 0; padding: 0; row-gap: 0; border: 0; } #stage .cm-spells .cm-spell { position: relative; min-height: 44px; padding: 6px 16px; box-sizing: border-box; font: 14px var(--sans); color: var(--ink); cursor: pointer; background: transparent; border: 1px solid transparent; border-bottom-color: color-mix(in srgb, var(--rule) 60%, transparent); border-radius: 0; } #stage .cm-spells:last-child .cm-spell:last-child { border-bottom-color: transparent; } #stage .cm-spells .cm-spell:hover { background: var(--rec-hover); } #stage .cm-spells .cm-spell[data-selected='true'] { border-radius: var(--control-radius); background: var(--rec-on); } #stage .cm-spells .cm-spell[data-selected='true']::before { content: ''; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); } #stage .cm-spell strong { display: flex; align-items: center; gap: 12px; grid-column: 1; grid-row: 1; min-width: 0; font: var(--rec-name); } #stage .cm-spell strong > .cm-glyph { width: 20px; height: 20px; flex: none; color: var(--accent); } #stage .cm-spell strong > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; color: inherit; } #stage .cm-spell .cm-spell-cell { grid-row: 1; grid-column: auto; font: 14px var(--sans); color: var(--ink); } #stage .cm-spell > span:not(.cm-spell-cell), #stage .cm-spell .cm-spell-meta { display: none; } #stage .cm-spell[data-prepared='true'] strong > span::after { content: ' ●'; font-size: 11px; vertical-align: middle; color: var(--moss); } /* The cells take the chosen columns in order; Prepared and the ⋯ are pinned to the last two, however many come before them. */ #stage .cm-spell .cm-spell-cell-prep { grid-column: -3 / -2; } #stage :is(.cm-spell-columns > span, .cm-spell .cm-spell-cell) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #stage .cm-row-actions { grid-column: -2 / -1; grid-row: 1; justify-self: end; position: relative; } /* CARDS: the same rows, laid out like the Items cards — a name, the facts, two lines of what it does, and Prepared at the foot. */ #stage .cm-spell-deck { display: block; } #stage .cm-spell-deck > .cm-spell-level { margin: 6px 0 12px; background: transparent; border-bottom: 1px solid var(--rule); } #stage .cm-spell-deck > .cm-spell-level > button { padding-left: 0; } #stage .cm-spell-deck > .cm-empty { margin: 0; font: 14px var(--sans); color: var(--ink-dim); } #stage ul.cm-spells.cm-spell-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin: 0 0 18px; } #stage ul.cm-spells.cm-spell-cards > .cm-spell { grid-column: auto; grid-template-columns: minmax(0, 1fr) 28px; grid-template-rows: auto auto 1fr auto; gap: 6px 8px; align-items: start; min-height: 0; padding: 14px 12px 12px 16px; border: 1px solid var(--rule); border-radius: var(--panel-radius); background: var(--rec-fill); } #stage ul.cm-spells.cm-spell-cards > .cm-spell:hover { border-color: var(--rec-edge); background: var(--rec-hover); } #stage ul.cm-spells.cm-spell-cards > .cm-spell[data-selected='true'] { border-color: var(--accent); border-radius: var(--panel-radius); background: var(--rec-on); } #stage ul.cm-spells.cm-spell-cards > .cm-spell > strong { grid-column: 1; grid-row: 1; align-self: center; gap: 10px; font: var(--rec-name-lg); } #stage ul.cm-spells.cm-spell-cards > .cm-spell .cm-row-actions { grid-column: 2; grid-row: 1; } #stage ul.cm-spells.cm-spell-cards > .cm-spell > .cm-spell-cell:not(.cm-spell-cell-prep) { display: none; } #stage ul.cm-spells.cm-spell-cards > .cm-spell > span.cm-spell-line { display: block; grid-column: 1 / -1; grid-row: 2; font: 13px var(--sans); color: var(--ink-dim); white-space: normal; } #stage ul.cm-spells.cm-spell-cards > .cm-spell > span:not([class]) { display: -webkit-box; grid-column: 1 / -1; grid-row: 3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 13px/1.45 var(--sans); color: var(--ink); } #stage ul.cm-spells.cm-spell-cards > .cm-spell > .cm-spell-cell-prep { grid-column: 1 / -1; grid-row: 4; margin-top: 4px; } #stage ul.cm-spells.cm-spell-cards > .cm-missing-row { border-radius: var(--panel-radius); } /* LIST: one framed row per spell, the shape of an Items-tab row — the name, its facts on a line under it, and Prepared and ⋯ at the right. Shorter than a card; no description. */ #stage ul.cm-spells.cm-spell-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 0 18px; } #stage ul.cm-spells.cm-spell-rows > .cm-spell { grid-column: auto; grid-template-columns: minmax(0, 1fr) auto 28px; gap: 2px 12px; align-items: center; min-height: 64px; padding: 10px 10px 10px 16px; border: 1px solid var(--rule); border-radius: var(--panel-radius); background: var(--rec-fill); } #stage ul.cm-spells.cm-spell-rows > .cm-spell:hover { border-color: var(--rec-edge); background: var(--rec-hover); } #stage ul.cm-spells.cm-spell-rows > .cm-spell[data-selected='true'] { border-color: var(--accent); border-radius: var(--panel-radius); background: var(--rec-on); } #stage ul.cm-spells.cm-spell-rows > .cm-spell > strong { grid-column: 1; grid-row: 1; gap: 12px; font: var(--rec-name-lg); } #stage ul.cm-spells.cm-spell-rows > .cm-spell > .cm-spell-cell:not(.cm-spell-cell-prep) { display: none; } #stage ul.cm-spells.cm-spell-rows > .cm-spell > span.cm-spell-line { display: block; grid-column: 1; grid-row: 2; padding-left: 32px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 13px var(--sans); color: var(--ink-dim); } #stage ul.cm-spells.cm-spell-rows > .cm-spell > .cm-spell-cell-prep { grid-column: 2; grid-row: 1 / 3; } #stage ul.cm-spells.cm-spell-rows > .cm-spell .cm-row-actions { grid-column: 3; grid-row: 1 / 3; } #stage ul.cm-spells.cm-spell-rows > .cm-missing-row { border-radius: var(--panel-radius); } /* Prepared: a toggle on the row — outlined when not, ink when it is. */ /* A level band folds its rows away. */ #stage .cm-spell-level { padding: 0; } #stage .cm-spell-level > button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 16px; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; text-align: left; } #stage .cm-spell-level em { font: 600 11px var(--sans); font-style: normal; letter-spacing: 0; color: var(--ink-dim); } /* The ⋯ menu: labelled rows, not a loose button. */ #stage .cm-row-actions > summary { list-style: none; width: 28px; height: 28px; font: 18px/1 var(--sans); } #stage .cm-row-actions > summary::-webkit-details-marker { display: none; } #stage .cm-spell-preparation { margin: 0 0 14px; } /* SETS: a section of its own, under an h3 with a rule above it — the line between what the rules give (above) and what the player chooses (from here down). The heading's line carries the sets and, at its far end, the tools for them; the two counts they move are under it. */ #stage .cm-sets { display: grid; gap: 12px; margin: 0 0 14px; } /* Only when the band is narrow do the sets drop to a line of their own, under the heading and its tools. */ #stage .cm-sets { container: sets / inline-size; } #stage .cm-set-new { display: inline-flex; align-items: center; gap: 6px; } #stage .cm-prep-tiles { margin: 0 0 18px; } /* The Prepared Spells tile already says this, in the same place the eye is. */ /* The drawer's contents. The frame of it is parts.css. */ #stage .detail-pane { padding-top: 10px; } #stage .detail-head { position: relative; align-items: center; gap: 16px; padding: 20px 56px 22px 28px; border-bottom: 1px solid var(--chrome-rule); } #stage .detail-title { flex: 1; display: grid; gap: 4px; min-width: 0; } #stage #detailTitle { order: 1; font: 600 27px/1.1 var(--display); letter-spacing: -.02em; color: var(--chrome-ink); } #stage #detailKicker { order: 2; font: 16px/1.35 var(--serif); font-style: normal; text-transform: none; letter-spacing: 0; color: var(--ink-dim); margin: 0; } #stage .detail-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; background: transparent; font: 22px/1 var(--sans); } #stage #detailBody { padding: 8px 28px 32px; } /* THE NUMBERS (character view `paneNumbers`) — the block at the head of every pane: a label, then the value, then a line on when it applies. One label column for the whole block, as wide as its labels need up to two fifths of the pane, so the values line up. */ #stage .cm-about-facts { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); gap: 12px 20px; margin: 0; padding: 18px 0 20px; border-bottom: 1px solid var(--chrome-rule); } #stage .cm-about-facts > .pane-fact { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; } #stage .cm-about-facts > .pane-fact-h { grid-column: 1 / -1; padding-top: 8px; } #stage .cm-about-facts > .pane-fact-h:first-child { padding-top: 0; } #stage .cm-about-facts :is(dt, dd) { margin: 0; padding: 0; font: 14px/1.45 var(--sans); text-transform: none; letter-spacing: 0; } #stage .cm-about-facts dt { color: var(--ink-dim); } #stage .cm-about-facts dt > .cm-why-open { font: inherit; color: inherit; text-align: left; } #stage .cm-about-facts dt > .cm-why-open:hover { color: var(--ink); } #stage .cm-about-facts dd { color: var(--chrome-ink); display: grid; gap: 3px; justify-items: start; } #stage .cm-about-facts .pane-fact-v { font: 600 var(--fs-body)/1.35 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); } #stage .cm-about-facts .pane-fact-note { font: 14px/1.45 var(--sans); color: var(--ink-dim); } /* A rule that is switched off right now reads quieter, not gone. */ #stage .cm-about-facts > .pane-fact[data-part='skipped'] :is(.pane-fact-v, .rule-tag) { opacity: .6; } #stage .cm-about-text { font: 17px/1.6 var(--serif); padding: 18px 0 20px; margin: 0; border-bottom: 1px solid var(--chrome-rule); } /* A help panel in parts: each part of the page it covers under its own small heading, in the label voice, divided by a hairline. */ #stage .cm-help-secs { display: grid; gap: 0; margin-top: 14px; } #stage .cm-help-sec { display: grid; gap: var(--sp-2); padding: var(--sp-4) 0; border-top: 1px solid var(--rule); } #stage .cm-help-sec:last-child { padding-bottom: 0; } #stage .cm-help-sec > h4 { margin: 0 0 6px; font: 600 11px/1.3 var(--caps); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } /* One rule between sections: the paragraph inside one is body text, not the lede, so it carries neither the lede's padding nor its rule — and the first section's rule is the lede's. */ #stage .detail-pane .cm-help-sec > p.cm-about-text { margin: 0; padding: 0; border: 0; } #stage .cm-about-text + .cm-help-secs { margin-top: 0; } #stage .cm-about-text + .cm-help-secs > .cm-help-sec:first-child { border-top: 0; } #stage .cm-about-source { font: 13px/1.6 var(--sans); color: var(--ink-dim); margin-top: 18px; } /* ------------------------------------------------------------ EVERY TAB OF THE SHEET, held to the same rules. ------------------------------------------------------------ */ /* One page header everywhere. Inner and Personality build their own panel with an h3 and a caps sub-line; they read as the title and the one line, and the panel stops being a card inside the page. */ #stage .cm-panel .cm-panel { background: transparent; border: 0; box-shadow: none; } #stage :is(.cm-inner, .cm-manner-panel) > h3 { display: block; margin: 0 0 16px; font: 600 34px/1.1 var(--display); letter-spacing: -.02em; color: var(--ink); } /* A ? BESIDE A HEADING — round, because it is something to press; it opens how that section works in the side panel (character view `#helpButton`), which is where instructions live now. */ /* A tab's title with its ?. */ /* Each part of Inner and Personality: a rule, then its h3 — the Sets heading's look, every tab the same. */ /* What the model makes of them, under its heading. */ /* "Unremarkable so far" is a state, not an instruction: plain, quiet. */ /* The arc's three answers, as a question like the ones under it. */ /* THE CUE CARD — how to play them, set apart from the page's own words: a card on the page, a label over each half, and the sentences in the display face at a size meant to be read aloud. The Inner tab's own words use the same card. */ #stage .cm-version .cm-cue-group { display: grid; gap: 4px; } #stage .cm-version .cm-cue-group + .cm-cue-group { padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); } /* ---- THE INNER TAB ---- */ /* A model's question is a question like the rest: no frame, full width, its label in the label voice, its why behind the section's ?. */ #stage .cm-version .cm-inner fieldset.cm-axis { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; } #stage .cm-version .cm-inner fieldset.cm-axis > legend { padding: 0; margin: 0 0 8px; } #stage .cm-version .cm-inner .cm-axis-said { max-width: none; margin: 10px 0 0; padding: 0; border: 0; font: 14px/1.5 var(--sans); color: var(--ink-dim); } #stage .cm-version .cm-inner > .cm-prompt { display: grid; gap: 8px; margin: 0 0 16px; } #stage .cm-version .cm-wing-pick { max-width: 640px; } /* Who they are inside: the full width of the tab, what their type adds up to on top, then a tile per answer — its label over its words. */ #stage .cm-version .cm-inner-sum { max-width: none; margin: 4px 0 20px; } #stage .cm-version .cm-inner-facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 14px 24px; } #stage .cm-version .cm-inner-fact { display: grid; gap: 4px; align-content: start; min-width: 0; } #stage .cm-version .cm-inner-fact > p { margin: 0; font: 500 16px/1.45 var(--display); color: var(--ink); } #stage .cm-version .cm-inner-verb { display: block; font: 600 11px/1.3 var(--caps); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); } /* The type is the choice that matters: its buttons a size up. The wing and where they are now sit under it, a size down. */ #stage .cm-version .cm-inner .cm-minor { margin-bottom: 12px; } #stage .cm-version .cm-inner .cm-minor :is(.cm-bands) { flex: none; min-width: 0; max-width: 460px; } #stage .cm-version .cm-inner .cm-minor > :is(span, legend) { font-size: 11px; } /* The type at its worst and best, in the summary. */ #stage .cm-version .cm-blend-ends { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px 24px; margin: 8px 0 0; } #stage .cm-version .cm-blend-ends dt { font: 600 11px/1.3 var(--caps); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); } #stage .cm-version .cm-blend-ends dd { margin: 3px 0 0; font: 14px/1.5 var(--sans); color: var(--ink-dim); } #stage .cm-version .cm-blend-ends [data-now='true'] dt { color: var(--accent); } #stage .cm-version .cm-blend-ends [data-now='true'] dd { color: var(--ink); } #stage .cm-version .cm-blend-now { margin-left: 8px; padding: 1px 7px; font: 600 11px/1.4 var(--caps); font-style: normal; letter-spacing: .1em; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--rule)); border-radius: 999px; } /* Fill in the blanks, at the end of the Motivations heading. */ /* Story ideas under a motivation: a paragraph each, picked like any other choice — outlined, and filled with ink once it is the answer. */ #stage .cm-version .cm-ideas { display: grid; gap: 6px; margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--rule); } #stage .cm-version .cm-ideas-label { font: 600 11px/1.3 var(--caps); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); } #stage .cm-version .cm-idea { display: block; width: 100%; padding: 10px 14px; text-align: left; cursor: pointer; font: 400 14px/1.45 var(--serif); color: var(--ink); background: color-mix(in srgb, var(--card) 60%, transparent); border: 1px solid var(--rule); border-radius: var(--control-radius); } #stage .cm-version .cm-idea:hover:not([aria-pressed='true']) { border-color: color-mix(in srgb, var(--ink) 40%, var(--rule)); } #stage .cm-version .cm-idea[aria-pressed='true'] { color: var(--board); background: var(--ink); border-color: var(--ink); } #stage .cm-version .cm-idea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } #stage .cm-version .cm-ideas-more { justify-self: start; } /* Past, now, what they reach for: a quiet sub-heading over each group. */ #stage .cm-version .cm-inner-when { display: grid; gap: 14px; margin: 0 0 18px; } /* The GM's half: framed, dashed, and labelled as theirs alone. */ /* The arc, as a line down the page: a dot per point, a rule joining them. */ #stage .cm-version .cm-arc-line { list-style: none; margin: 4px 0 0; padding: 0; display: grid; } #stage .cm-version .cm-arc-node { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; padding: 0 0 18px; } #stage .cm-version .cm-arc-node::before { content: ''; position: absolute; left: 10px; top: 14px; bottom: -2px; border-left: 1.5px solid var(--rule); } #stage .cm-version .cm-arc-node:last-child::before { display: none; } #stage .cm-version .cm-arc-dot { width: 11px; height: 11px; margin: 4px 0 0 5px; border-radius: 999px; box-sizing: border-box; border: 2px solid var(--ink-dim); background: var(--board); } #stage .cm-version .cm-arc-node[data-kind='now'] .cm-arc-dot { border-color: var(--accent); background: var(--accent); } #stage .cm-version .cm-arc-node[data-kind='planned'] .cm-arc-dot { border-style: dashed; border-color: var(--brass); } #stage .cm-version .cm-arc-node[data-kind='end'] .cm-arc-dot { border-radius: 2px; } #stage .cm-version .cm-arc-body { display: grid; gap: 4px; min-width: 0; } #stage .cm-version .cm-arc-text { margin: 0; font: 16px/1.45 var(--serif); color: var(--ink); } /* Written prose on the arc — a backstory, a past shift — runs the full width, the same as the editor it was written in. */ #stage .cm-version .cm-arc-body > .rt-doc.cm-arc-text { max-width: none; } #stage .cm-version .cm-arc-node[data-kind='planned'] .cm-arc-text { font: italic 14px/1.45 var(--sans); color: var(--ink-dim); } /* A written question after a run of spectrum rows is one more row of them: the same divider above, the same room. */ #stage .cm-version .cm-vaxis + .cm-prompt { margin-top: 0; padding-top: 9px; } /* the row above draws the divider */ /* Explanations: one quiet column, not a block that pushes the page down. Readable size, the full width like all text. */ #stage .cm-version .cm-note { margin: 4px 0 14px; padding: 0 0 0 12px; font: 14px/1.5 var(--sans); color: var(--ink-dim); border-left: 2px solid color-mix(in srgb, var(--rule) 80%, transparent); } #stage .cm-version .cm-note.cm-inline { border: 0; padding: 0; margin-top: -2px; font-size: 13px; } /* Labels are parts.css .group-label; what is left here is a few the sheet still draws itself, in the same voice. */ #stage .cm-version :is(.cm-purse-h, .cm-voice-model, .cm-coin > span) { font: 600 var(--fs-label)/1.3 var(--caps); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-dim); } #stage .cm-version .cm-arch-order { font: var(--fs-label) var(--sans); font-style: normal; color: var(--ink-dim); opacity: 1; } /* Fields: one height, rounded (typed into), sans. Creation's three picks sit side by side instead of stacking down the page. */ /* A box not yet moved onto parts.css .field still looks like one. */ #stage .cm-version :where(select, input:not([type='range'], [type='checkbox'], [type='radio'], .cm-moment-title), textarea):not(.field) { min-height: var(--h-line); box-sizing: border-box; padding: 0 var(--sp-3); font: var(--fs-body)/1.4 var(--sans); color: var(--ink); background: color-mix(in srgb, var(--card) 80%, transparent); border: 1px solid var(--edge); border-radius: var(--control-radius); } #stage .cm-version :where(textarea):not(.field) { min-height: 72px; padding: var(--sp-2) var(--sp-3); } /* A field written at length is a rich-text editor (the backstory, Inner Life's answers, the GM's notes) and reads as the field it replaced: rounded, because it is typed into, with a toolbar small enough to sit above a paragraph rather than a page. */ /* OPAQUE, AND ITS OWN LAYER. The page under it is four layers of SVG noise (parts.css --surface), the dearest thing a browser paints, and a live editor invalidates its box on every keystroke and every blink of the caret. Seen through, each of those repainted the noise; on its own opaque layer only the box repaints. */ #stage .cm-version .cm-rich { background: var(--card); will-change: transform; contain: paint; } #stage .cm-creation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 14px; align-content: start; } #stage .cm-creation > * { grid-column: 1 / -1; } #stage .cm-creation > .cm-pick { grid-column: auto; margin-bottom: 8px; } /* EVERY CHOICE ON THE SHEET IS A TOGGLE — the one in parts.css. Off is outlined; on is filled with ink. Gold on gold was unreadable and claimed the action colour for something that is a state. */ #stage .cm-version :is(.cm-prom, .cm-opt, .cm-set, .cm-method, .cm-band, .cm-log-kind, .cm-equip, .cm-place-opt) { min-height: 32px; padding: 5px 14px; box-sizing: border-box; border-radius: 999px; font: 400 13px/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); background: color-mix(in srgb, var(--card) 60%, transparent); border: 1px solid var(--rule); } #stage .cm-version :is(.cm-grid-cell, .cm-archetype) { border-radius: var(--control-radius); color: var(--ink); background: color-mix(in srgb, var(--card) 60%, transparent); border: 1px solid var(--rule); } #stage .cm-version :is(.cm-prom, .cm-opt, .cm-set, .cm-method, .cm-band, .cm-log-kind, .cm-equip, .cm-place-opt, .cm-grid-cell, .cm-archetype):hover:not(:disabled) { border-color: color-mix(in srgb, var(--ink) 40%, var(--rule)); } #stage .cm-version :is(.cm-prom, .cm-opt, .cm-set, .cm-method, .cm-band, .cm-log-kind, .cm-equip, .cm-place-opt, .cm-grid-cell, .cm-archetype)[aria-pressed='true'] { color: var(--board); background: var(--ink); border-color: var(--ink); box-shadow: none; } #stage .cm-version :is(.cm-grid-cell, .cm-archetype)[aria-pressed='true'] :is(strong, span, em, small) { color: var(--board); } /* A TWO-WAY GRID IS ONE SEGMENTED CONTROL — the spectrum bar's frame, in rows: one rounded border, hairlines between cells, the name alone. */ /* Where their type usually sits: a small dot in the corner. */ /* The type played against its usual alignment — one quiet line. */ #stage .cm-version .cm-blend-tension { margin: 2px 0 0; font: italic 16px/1.45 var(--serif); color: var(--ink-dim); } /* A SPECTRUM IS ONE SEGMENTED CONTROL — the Equip/Carry/Stow switch's shape: one rounded frame, hairline dividers, the chosen word filled with ink. Equal columns, so the middle is where the middle is. */ /* A PHONE: the question over the bar, the bar the full width, and a long word wraps inside its own segment — never under 12px, never broken mid-word. */ @media (max-width: 560px) { #stage .cm-version .cm-vaxis { gap: 8px; padding: 12px 0; } #stage .cm-version .cm-vaxis + .cm-prompt { padding-top: 12px; } #stage .cm-version .cm-vaxis-ask { flex-basis: 100%; } } /* Abilities: the six scores are frames too, with readable labels. */ #stage .cm-ability-name { font: 600 11px/1.2 var(--caps); letter-spacing: .1em; color: var(--ink-dim); } #stage .cm-ability-value { font: 600 22px/1.1 var(--display); font-variant-numeric: lining-nums; } #stage .cm-ability-save { font: 13px var(--sans); } #stage .cm-ability-save em { font: 600 11px var(--caps); font-style: normal; letter-spacing: .08em; color: var(--ink-dim); } #stage .cm-ability-save b { color: color-mix(in srgb, var(--steel) 45%, var(--ink)); font: 600 13px var(--sans); } #stage .cm-ability-save[data-trained='true'] em, #stage .cm-ability-save .cm-trained { color: var(--accent-text); } /* Actions: each slot is one framed table, like the spell table. */ #stage .cm-turn-slot { border: 1px solid var(--rule); border-radius: var(--panel-radius); background: color-mix(in srgb, var(--card) 55%, transparent); margin-bottom: 12px; } #stage .cm-version .cm-turn-slot h4 { margin: 0; padding: 9px 14px; display: flex; align-items: baseline; gap: 8px; color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); } #stage .cm-turn-slot[data-slot='action'] h4 { color: var(--ink); } #stage .cm-turn-slot h4 :is(em, i) { font: 13px var(--sans); font-style: normal; letter-spacing: 0; text-transform: none; color: var(--ink-dim); opacity: 1; } #stage .cm-turn-list li { min-height: 40px; box-sizing: border-box; padding: 6px 14px; align-items: center; } #stage .cm-turn-list strong { font: var(--rec-name); } #stage .cm-turn-list li[data-kind='spell'] { padding-left: 12px; } #stage .cm-turn-any > summary { padding: 8px 14px; font: 13px var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-dim); cursor: pointer; } #stage .cm-turn-list em { font-size: 13px; font-style: normal; color: var(--ink-dim); } /* Creation numbers and coins: ink, not brass, so they can be read. */ #stage .cm-moment-mark { font: 13px var(--sans); color: var(--ink-dim); } #stage .cm-coin input { font: 14px var(--sans); } /* The personality portrait is the banner's job; here it is a thumbnail. */ #stage .cm-voice-top .cm-portrait-big { width: 100%; height: 100%; min-height: 200px; } #stage .cm-voice-top .cm-portrait-big > :is(img, svg) { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } @media (max-width: 600px) { #stage .cm-voice-top .cm-portrait-big { min-height: 0; aspect-ratio: auto; } } #stage .cm-voice-top .cm-portrait-set > summary { font: 600 11px var(--sans); letter-spacing: .04em; color: var(--chrome-ink); } #stage .cm-voice-top .cm-portrait-set { background: color-mix(in srgb, var(--chrome) 80%, transparent); } #stage .cm-voice-top .cm-portrait-big { position: relative; } #stage .cm-voice-top .cm-portrait-big > :is(img, svg) { position: absolute; inset: 0; } /* CHANGE IS A MENU (the banner ⋯'s portrait choices): a bar along the foot of the picture, and its menu dropping below it — so the picture stops clipping while it is open. */ #stage details.cm-portrait-set:has(> .menu) { position: absolute; inset: auto 0 0 0; padding: 0; } #stage .cm-portrait-set > summary { list-style: none; display: block; padding: 6px 4px; cursor: pointer; } #stage .cm-portrait-set > summary::-webkit-details-marker { display: none; } #stage .cm-portrait-set > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; } #stage .cm-portrait:has(> .cm-portrait-set[open]) { overflow: visible; z-index: 20; } #stage .cm-portrait-set > .menu { top: calc(100% + 6px); left: 0; width: 260px; text-transform: none; letter-spacing: normal; text-align: left; white-space: normal; } /* Narrow: the same row, condensed, slid with a finger. */ @container (max-width: 760px) { #stage .cm-sheet-page > .cm-tabs { gap: 22px; padding: 0 16px; min-height: 44px; } #stage .cm-sheet-page > .cm-tabs .cm-tab { min-height: 44px; font-size: 16px; gap: 6px; } } @container (max-width: 600px) { #stage .cm-has-spells .cm-group[data-section='spellcasting'] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { #stage .cm-creation { grid-template-columns: 1fr; } #stage .cm-banner { height: 148px; min-height: 148px; padding: 16px 56px 16px 120px; } #stage .cm-banner .cm-portrait { width: 128px; left: 0; } #stage .cm-banner .cm-name { font-size: 27px; } #stage .cm-banner .cm-subtitle { font-size: 14px; } #stage .cm-banner .cm-head-desc { font-size: 14px; } .cm-banner-edit { top: 10px; right: 10px; } #stage .cm-body { display: block; overflow-y: auto; } #stage .cm-moment-head { padding: 16px 16px 0; } #stage .cm-version > .cm-panel { --pane-top: 4px; padding: var(--pane-top) 16px 32px; } /* No room for columns: the header becomes a line of sort words, and each row says its facts as one line under the name. */ #stage .cm-spell-table .cm-spell-columns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px 12px; } #stage .cm-spell-columns > .cm-column-menu { margin-left: auto; } #stage .cm-spells .cm-spell { grid-template-columns: minmax(0, 1fr) auto 28px; gap: 2px 10px; padding: 8px 12px; } #stage .cm-spell .cm-spell-cell:not(.cm-spell-cell-prep) { display: none; } #stage .cm-spells .cm-spell > span.cm-spell-line { display: block; grid-column: 1; grid-row: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 13px var(--sans); color: var(--ink-dim); } #stage .cm-spell .cm-spell-cell-prep { grid-column: 2; grid-row: 1 / 3; } #stage .cm-spell .cm-row-actions { grid-column: 3; grid-row: 1 / 3; } #stage :is(.cm-spell-table, .cm-spells) { display: block; } } /* ------------------------------------------------------------ FIELDS everywhere: typed into, so rounded like an action. ------------------------------------------------------------ */ #stage :is(input, textarea, select) { border-radius: var(--control-radius); color: var(--ink); } /* ------------------------------------------------------------ COLLECTIONS and RECORD PAGES — carried over; next pass moves them onto the character page's header and frames. ------------------------------------------------------------ */ /* A COLLECTION PAGE (ui/record/collection.js): the record body's padding; page head, the tools, then the bands. */ #stage .cm-items-page { display: block; max-width: none; padding: var(--sp-5) 36px 60px; } #stage .cm-collection-tools { display: grid; gap: var(--sp-1); } #stage .cm-items-page > .cm-empty-go { margin-top: var(--sp-4); } /* Stories: the list, a quiet line of other ways in, and the new campaign's name in place of the first row. */ #stage .sm-stories .sm-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); margin-left: calc(-1 * var(--sp-2)); } #stage .sm-stories .sm-import { position: relative; overflow: hidden; } #stage .sm-stories .sm-import > input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } #stage .sm-stories .sm-new { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-2); margin: 0 0 var(--sp-4); } #stage .sm-stories .sm-new > .field-wrap { flex: 0 1 320px; } #stage .cm-items-page > .cm-group-band:first-of-type .band { margin-top: var(--sp-2); } /* On a collection card, what it does or what it is like is a sentence: its own line under the short facts, wrapping, with no dot before it. */ #stage .cm-items-page .cm-item-open > .cm-item-facts > .cm-item-does { flex: 1 1 100%; white-space: normal; overflow: visible; } #stage .cm-items-page .cm-item-open > .cm-item-facts > .cm-item-does::before { content: none; } html[data-screen='cards'] #stage .cm-items-page .cm-list.cm-items:not([data-layout]) { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 14px; } html[data-screen='cards'] #stage .cm-items-page .cm-list.cm-items:not([data-layout]) > .cm-item { border: 1px solid var(--rule); border-radius: var(--panel-radius); padding: 0; background: var(--rec-fill); overflow: hidden; } html[data-screen='cards'] #stage .cm-items-page .cm-list.cm-items:not([data-layout]) > .cm-item > .cm-item-open { min-height: 108px; padding: 18px; gap: 10px 14px; border: 0; background: transparent; } html[data-screen='cards'] #stage .cm-item-title { font: var(--rec-name-lg); } html[data-screen='cards'] #stage .cm-item-facts { font: 13px/1.6 var(--sans); } html[data-screen='cards'] #stage .cm-list.cm-items:not([data-layout]) > .cm-item:hover { border-color: var(--rec-edge); background: var(--rec-hover); } /* PLAYING CARDS (ui/record/playingcard.js) — a list dealt out on the table. Card stock round the face, rounded like a printed card (the one rounded record: it is an object you hold), a gilt frame inside, then the name and its gem, the art window, the type line, the text box and the tags. Everything is the theme's own ink, paper and accent, so a gothic deck and a neon deck come for free. */ #stage .cm-deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: var(--sp-5) var(--sp-4); margin: var(--sp-2) 0 var(--sp-6); padding: 0; list-style: none; } #stage .cm-group-band.cm-flat > .cm-deck { margin-top: var(--sp-4); } #stage .pcard { min-width: 0; max-width: 260px; } /* A phone holds two to a row, like a hand. */ @media (max-width: 600px) { #stage .cm-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-3); } } #stage .pcard-open { --pc-edge: color-mix(in srgb, var(--accent) 70%, var(--ink)); --pc-tint: color-mix(in srgb, var(--accent) 16%, var(--card)); all: unset; box-sizing: border-box; display: block; width: 100%; aspect-ratio: 5 / 7; cursor: pointer; padding: 7px; border-radius: 12px; background: linear-gradient(150deg, color-mix(in srgb, var(--ink) 88%, var(--accent)), color-mix(in srgb, var(--ink) 70%, var(--accent))); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 40%, transparent), 0 8px 18px color-mix(in srgb, var(--shadow, #000) 22%, transparent); transition: transform .14s ease, box-shadow .14s ease; } #stage .pcard-open:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 40%, transparent), 0 16px 28px color-mix(in srgb, var(--shadow, #000) 30%, transparent); } #stage .pcard-open:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } #stage .pcard-open[aria-current='true'] { box-shadow: 0 0 0 3px var(--accent), 0 8px 18px color-mix(in srgb, var(--shadow, #000) 22%, transparent); } @media (prefers-reduced-motion: reduce) { #stage .pcard-open { transition: none; } #stage .pcard-open:hover { transform: none; } } #stage .pcard-face { box-sizing: border-box; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; height: 100%; overflow: hidden; border-radius: 7px; border: 1.5px solid var(--pc-edge); background: var(--surface, var(--card)); color: var(--ink); } #stage .pcard-head { display: flex; align-items: center; gap: var(--sp-2); min-height: 36px; padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-2); box-sizing: border-box; background: var(--pc-tint); border-bottom: 1px solid var(--pc-edge); } #stage .pcard-name { flex: 1 1 auto; min-width: 0; font: 600 var(--fs-nav)/1.15 var(--display); letter-spacing: -.005em; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } #stage .pcard-gem { flex: none; display: grid; place-items: center; width: 28px; height: 28px; box-sizing: border-box; border-radius: 50%; font: 700 var(--fs-small)/1 var(--sans); font-variant-numeric: lining-nums; color: var(--board); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 55%, white), var(--accent) 60%, color-mix(in srgb, var(--accent) 70%, var(--ink))); border: 1.5px solid var(--pc-edge); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ink) 25%, transparent); } #stage .pcard-art { display: block; margin: var(--sp-2) var(--sp-2) 0; aspect-ratio: 5 / 4; overflow: hidden; border: 1px solid var(--pc-edge); background: var(--pc-tint); } #stage .pcard-pic { display: grid; place-items: center; width: 100%; height: 100%; } #stage .pcard-pic > img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; } #stage .pcard-pic > svg.cm-art { width: 74%; height: auto; } #stage .pcard-pic > svg.cm-icon { width: 40%; height: auto; color: var(--ink-dim); stroke-width: 1; } #stage .pcard-type { margin: var(--sp-2) var(--sp-2) 0; padding: 3px var(--sp-2); border: 1px solid var(--pc-edge); background: var(--pc-tint); font: 600 var(--fs-label)/1.3 var(--caps); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #stage .pcard-text { margin: var(--sp-2) var(--sp-2) 0; min-height: 0; overflow: hidden; font: italic 400 var(--fs-small)/1.45 var(--sans); color: var(--ink); } #stage .pcard-text > span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } #stage .pcard-foot { padding: var(--sp-1) var(--sp-2) 6px; font: 600 var(--fs-label)/1.3 var(--caps); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } /* ON A CARD, the face is a framed square at the side, not a glyph. */ #stage ul.cm-characters[data-layout='cards'] { --rec-fig: 64px; --rec-fig-gap: var(--sp-4); } #stage ul.cm-characters[data-layout='cards'] .cm-item-open > .cm-item-facts > .cm-item-does { flex: 1 1 100%; white-space: normal; } #stage ul.cm-characters[data-layout='cards'] .cm-item-open > .cm-item-fig > svg.cm-art { width: 100%; } #stage ul.cm-characters[data-layout='cards'] .cm-item-open > .cm-item-fig { grid-row: 1 / span 2; align-self: start; width: 64px; height: 80px; overflow: hidden; border: 1px solid var(--rule); display: grid; place-items: center; color: var(--ink-dim); background: color-mix(in srgb, var(--accent) 12%, var(--card)); } #stage ul.cm-characters[data-layout='cards'] .cm-item-open > .cm-item-fig > img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } #stage ul.cm-characters[data-layout='cards'] .cm-item-open > .cm-item-fig > svg { width: 60%; height: auto; } /* THE GM'S TAGS on a record (ui/record/tagbar.js): chips, each with its type dim before its name and a × to take it off, then + Tag. */ #stage .cm-tags { align-items: center; margin-top: var(--sp-2); } #stage .cm-tag { cursor: default; padding-right: var(--sp-1); } #stage .cm-tag-type { color: var(--ink-dim); } #stage .cm-tag-type::after { content: ' ·'; } #stage .cm-tag-x { all: unset; display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-pill); cursor: pointer; font: 400 15px/1 var(--sans); color: var(--ink-dim); } #stage .cm-tag-x:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, transparent); } #stage .cm-tag-x:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } #stage .cm-tag-add > summary { list-style: none; } #stage .cm-tag-add > summary::-webkit-details-marker { display: none; } #stage .cm-tag-add-chip { border-style: dashed; color: var(--ink-dim); } #stage .cm-tag-add > .menu { left: 0; right: auto; width: 280px; white-space: normal; } #stage .cm-tag-add .menu-item > .cm-tag-type::after { content: ' ·'; } #stage .cm-tag-new { display: flex; gap: var(--sp-2); padding: var(--sp-2) 10px 0; margin-top: var(--sp-1); border-top: 1px solid var(--rule); } #stage .cm-tag-new > .field { flex: 1 1 auto; min-width: 0; } #stage .cm-tag-hint { margin: var(--sp-1) 10px var(--sp-1); } /* Open, the banner sits above the section tabs so the menu does too. */ #stage .cm-banner:has(.cm-tag-add[open]) { position: relative; z-index: 30; overflow: visible; } /* A DRAWING AS A PICTURE (ui/record/icons.js iconArt): its layers name one of four inks, and the theme says what they are. */ #stage .cm-art { --art-ink: var(--ink); --art-paper: var(--card); --art-accent: var(--accent); --art-tone: color-mix(in srgb, var(--accent) 28%, var(--card)); } #stage .cm-art .art-fill-none { fill: none; } #stage .cm-art .art-fill-ink { fill: var(--art-ink); } #stage .cm-art .art-fill-paper { fill: var(--art-paper); } #stage .cm-art .art-fill-tone { fill: var(--art-tone); } #stage .cm-art .art-fill-accent { fill: var(--art-accent); } #stage .cm-art .art-stroke-none { stroke: none; } #stage .cm-art .art-stroke-ink { stroke: var(--art-ink); } #stage .cm-art .art-stroke-paper { stroke: var(--art-paper); } #stage .cm-art .art-stroke-tone { stroke: var(--art-tone); } #stage .cm-art .art-stroke-accent { stroke: var(--art-accent); } /* A RECORD PAGE (ui/record/full-detail.js): the collection page's padding, the page head, then the record's sections. */ #stage .record-detail { max-width: none; padding: var(--sp-5) 36px 60px; } #stage .record-detail-body { padding: 0; } #stage .record-detail-body :is(.cm-item-pane,.cm-creature-pane,.cm-crew-pane,.cm-place-pane) { max-width: none; width: 100%; padding: 0; } @media (max-width: 700px) { #stage .cm-items-page { padding: 24px 16px; } #stage .record-detail { padding: var(--sp-4) 16px 48px; } } /* ------------------------------------------------------------ STORY — carried over unchanged; the next page to move onto the parts. ------------------------------------------------------------ */ #stage .rt-notes { font-family: var(--serif); font-size: 1rem; line-height: 1.65; } #stage :is(.rt-roll, .rt-money) { border-radius: var(--control-radius); } #stage .sm-scene-rail { --board: var(--chrome); --card: var(--chrome); --ink: var(--chrome-ink); --ink-dim: color-mix(in srgb,var(--chrome-ink) 65%,var(--chrome)); --rule: var(--chrome-rule); background: var(--chrome); } #stage .sm-scene-rail .sm-rail-head { padding: 14px 12px; } #stage .sm-rail-item { padding: 12px 16px; border-bottom: 1px solid var(--chrome-rule); } #stage .sm-rail-item .name { font: 17px var(--serif); } #stage .sm-scene-head { padding: 28px 28px 20px; border-bottom: 0; } /* A story record's title is the page title (parts.css §16). */ #stage .sm-title-input { font: 600 var(--fs-title)/1.1 var(--display); letter-spacing: -.02em; padding: 4px 0; } #stage .sm-scene-head > .sm-input { font: 18px var(--serif); padding: 8px 0; } #stage .sm-scene-split { gap: 14px; padding: 0 24px 24px; } #stage .sm-outline,#stage .sm-narrative { border: 1px solid var(--rule); border-radius: var(--panel-radius); background: color-mix(in srgb,var(--card) 62%,transparent); } #stage .sm-pane-head { background: transparent; min-height: 54px; padding-inline: 18px; } #stage .sm-pane-head .label { font: 600 22px var(--serif); text-transform: none; letter-spacing: -.02em; color: var(--ink); } #stage .sm-duo-head { padding: 0; } #stage .sm-duo-head > div { padding: 14px 20px; } #stage .sm-outline .sm-outline-row { font: 18px var(--serif); } #stage .rt-bar { padding: 10px 16px; background: transparent; border-color: var(--rule); } #stage .rt-tool,#stage .rt-select { min-height: 32px; color: var(--ink-dim); border-radius: var(--control-radius); } #stage .rt-cell { padding: 16px 24px; } #stage .rt-cell p { font: 18px/1.65 var(--serif); } #stage .rt-row { border-top: 1px solid color-mix(in srgb,var(--rule) 60%,transparent); } #stage .sm-nav button { font: 16px var(--serif); text-transform: none; letter-spacing: 0; padding: 12px; } #stage .sm:has(.sm-scenes) > .sm-bar { border-bottom: 1px solid var(--rule); } #stage .sm:has(.sm-scenes) > .sm-nav { border-bottom: 1px solid var(--rule); } html[data-screen='cards'] #stage .sm-narrow { max-width: none; } html[data-screen='cards'] #stage #sm-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 14px; } html[data-screen='cards'] #stage #sm-list > :not(.sm-card) { grid-column: 1 / -1; } html[data-screen='cards'] #stage .sm-card { border: 1px solid var(--rule); border-radius: var(--panel-radius); padding: 20px; background: var(--rec-fill); min-height: 110px; } html[data-screen='cards'] #stage .sm-card .name { font: 22px var(--serif); } #stage .sm-private-note { font: 13px var(--serif); color: var(--ink-dim); margin-left: 12px; } #stage .rt-bar { flex-wrap: wrap; } #stage .sm-workspace-select { display: none; } @media (max-width: 700px) { #stage .sm-scene-head { padding: 20px 16px; } #stage .sm-scene-split { padding: 0 12px 18px; } #stage .sm-scene-rail { max-height: 150px; } #stage .rt-cell { padding: 12px 16px; } html[data-screen='cards'] #stage .sm-body { padding: 24px 16px; } #stage .sm-private-note { display: block; margin: 4px 0 0; } #stage .sm-nav .sm-tab { display: none; } #stage .sm-workspace-select { display: block; width: 100%; min-height: 42px; padding: 8px 12px; background: var(--card); border: 1px solid var(--rule); color: var(--ink); } #stage .sm-bar { flex-wrap: wrap; gap: 6px; padding: 10px 12px; } #stage .sm-scenes { flex-direction: column; } #stage .sm-scene-rail { width: 100%; max-height: 120px; } #stage .sm-scene-doc { flex: 1; min-height: 0; } #stage .sm-scene-titlebar { flex-wrap: wrap; } #stage .sm-scene-split { display: flex; flex-direction: column; } #stage .sm-outline { min-height: 160px; max-height: 240px; } #stage .sm-narrative { min-height: 420px; } #stage .sm-scene-doc { overflow: auto; } } /* ------------------------------------------------------------ SETTINGS and the phone menu ------------------------------------------------------------ */ .theme-customize { margin-block: 20px; padding: 18px; border: 1px solid var(--rule); border-radius: var(--panel-radius); } .theme-customize summary { cursor: pointer; font: 22px var(--serif); color: var(--ink); } .theme-token-fields { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 14px; margin-block: 20px; } .theme-customize label { display: grid; gap: 6px; font: 13px var(--sans); } .theme-customize input { width: 100%; min-height: 36px; box-sizing: border-box; background: var(--card); color: var(--ink); border: 1px solid var(--rule); padding: 6px; } #stage .theme-card { border-radius: var(--panel-radius); } #stage .theme-card[aria-checked='true'] { border-color: var(--accent); } .theme-customize select { width: 100%; min-height: 36px; box-sizing: border-box; background: var(--card); color: var(--ink); border: 1px solid var(--rule); padding: 6px; } .mobile-recents { display: none; } @media (max-width:1099px) { .mobile-recents { display: block; margin-top: 18px; } #menuRecentSearch { width: 100%; min-height: 38px; padding: 8px 10px; box-sizing: border-box; background: var(--chrome); color: var(--chrome-ink); border: 1px solid var(--chrome-rule); border-radius: var(--control-radius); margin-bottom: 10px; } #menuRecents { display: grid; gap: 6px; } #menuRecents .recent-record { display: flex; align-items: center; gap: 12px; min-height: 54px; font: 16px var(--serif); padding: 8px; border: 1px solid var(--chrome-rule); color: var(--chrome-ink); background: var(--chrome); text-align: left; } #menuRecents .recent-record > span { display: grid; gap: 4px; } #menuRecents .recent-record small { font: 13px var(--sans); opacity: .7; } #menuRecents .recent-record[aria-current='page'] { border-color: var(--accent); } #menuRecents .recent-empty { font: 13px var(--sans); color: var(--chrome-ink); } } /* ------------------------------------------------------------ ADD A SPELL — the list, with the page open beside it (character/build/pickspell.js). A sheet of the same paper as the page behind it: search and filters across the top, the list on the left, the spell under the cursor on the right. ------------------------------------------------------------ */ /* A dialog with no long list is as tall as what is in it. */ #stage .cm-picker.cm-pl-maker { height: auto; } #stage .cm-picker { width: min(1040px, 100%); height: min(760px, calc(100vh - 48px)); max-height: none; } /* A dialog with search and filters across the top has four rows. */ #stage .cm-picker:has(> .cm-pick-top) { grid-template-rows: auto auto minmax(0, 1fr) auto; } /* A PICKER WITHOUT A PAGE BESIDE IT (the bestiary, "which one"): the same row, with what it is on its line and its sentence under it. */ #stage .cm-cat-list { display: grid; gap: 0; margin: 0 calc(-1 * var(--sp-3)); } #stage .cm-cat-row { --fig: 24px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3); row-gap: 2px; align-items: baseline; width: 100%; min-height: var(--h-line); padding: var(--sp-1) var(--sp-3); box-sizing: border-box; cursor: pointer; text-align: left; font: 400 var(--fs-body)/1.4 var(--sans); color: var(--ink); background: transparent; border: 0; border-radius: var(--control-radius); } #stage .cm-cat-row:has(> .cm-pick-text) { padding-block: var(--sp-2); } #stage .cm-cat-row.cm-pick-row:has(> .cm-item-fig) { grid-template-columns: var(--fig) minmax(0, 1fr) auto; } #stage .cm-cat-row:hover { background: var(--rec-hover); } #stage .cm-cat-row[aria-current='true'] { background: var(--rec-on); } #stage .cm-cat-row[aria-current='true']::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); } #stage .cm-cat-row > .cm-item-fig { grid-column: 1; grid-row: 1 / span 2; align-self: center; display: grid; place-items: center; width: var(--fig); height: var(--fig); color: var(--accent); } #stage .cm-cat-row > .cm-item-fig .cm-icon { width: 100%; height: 100%; display: block; } #stage .cm-cat-row > .cm-item-fig[data-blank='true'] { visibility: hidden; } #stage .cm-cat-row .cm-pick-name { min-width: 0; } #stage .cm-cat-row .cm-pick-name > strong { font: var(--rec-name); color: var(--ink); } #stage .cm-cat-row > span:not(.cm-pick-name, .cm-item-fig) { font: 400 var(--fs-small)/1.4 var(--sans); color: var(--ink-dim); text-align: right; } #stage .cm-cat-row > .cm-pick-text { grid-column: -3 / -1; font: 400 var(--fs-small)/1.45 var(--sans); font-style: normal; color: var(--ink-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #stage .cm-pick-top { display: grid; gap: 10px; padding: 0 24px 14px; border-bottom: 1px solid var(--rule); } /* Filters are toggles, the same part as every choice on the sheet. */ #stage .cm-picker .cm-filters { gap: 6px; } #stage .cm-pick-narrow { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 6px 14px; } #stage .cm-pick-narrow > .cm-filters:not(.cm-pick-fits) { flex: 1 1 0; min-width: 0; } #stage .cm-pick-narrow > .cm-pick-fits { flex: none; } #stage .cm-pick-fits { padding-right: 14px; border-right: 1px solid var(--rule); } #stage .cm-pick-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); min-height: 0; } #stage .cm-pick-list { overflow-y: auto; padding: 4px 12px 16px 12px; scrollbar-gutter: stable; scrollbar-width: thin; } #stage .cm-pick-band { margin: 0; padding: 14px 12px 6px; font: 600 11px/1.2 var(--caps); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); } #stage .cm-picker-row { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; width: 100%; min-height: var(--h-line); padding: 0 12px; box-sizing: border-box; cursor: pointer; text-align: left; font: 14px var(--sans); color: var(--ink); background: transparent; border: 0; border-radius: var(--control-radius); } #stage .cm-picker-row:hover { background: var(--rec-hover); } #stage .cm-picker-row[aria-selected='true'] { background: var(--rec-on); } #stage .cm-picker-row[aria-selected='true']::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); } #stage .cm-picker-row > .cm-glyph { width: 20px; height: 20px; color: var(--accent); } #stage .cm-picker-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--rec-name); } #stage .cm-picker-line { font: 13px var(--sans); color: var(--ink-dim); white-space: nowrap; } #stage .cm-picker-row[data-known='true'] .cm-picker-name { color: var(--ink-dim); } #stage .cm-pick-known { font: 600 11px/1 var(--caps); font-style: normal; letter-spacing: .08em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, transparent); } #stage .cm-pick-list > .cm-empty { padding: 24px 12px; font: 14px var(--sans); color: var(--ink-dim); } #stage .cm-pick-page { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; padding: 22px 24px; border-left: 1px solid var(--rule); background: color-mix(in srgb, var(--card) 45%, transparent); } #stage .cm-pick-page-head { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; } #stage .cm-pick-page-fig { display: grid; place-items: center; width: 56px; height: 56px; box-sizing: border-box; border: 1px solid var(--rule); color: var(--accent); background: color-mix(in srgb, var(--card) 70%, transparent); } #stage .cm-pick-page-fig .cm-glyph { width: 30px; height: 30px; } #stage .cm-pick-page-head h4 { margin: 0; font: 600 27px/1.1 var(--display); color: var(--ink); text-transform: none; letter-spacing: -.01em; } #stage .cm-pick-page-head p { margin: 3px 0 0; font: italic 16px var(--serif); color: var(--ink-dim); } #stage .cm-pick-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 16px; margin: 0; padding: 12px 0; border-block: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); } #stage .cm-pick-facts dt { font: 13px var(--sans); color: var(--ink-dim); } #stage .cm-pick-facts dd { margin: 0; font: 14px var(--sans); color: var(--ink); } #stage .cm-pick-page-text { margin: 0; font: 17px/1.5 var(--serif); color: var(--ink); } #stage .cm-pick-page-higher { margin: 0; font: 16px/1.5 var(--serif); color: var(--ink-dim); } #stage .cm-pick-page-higher strong { font-weight: 600; color: var(--ink); } #stage .cm-pick-page-warn { margin: 0; padding: 8px 12px; font: 13px/1.45 var(--sans); color: var(--ink); border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } #stage .cm-pick-add { margin-top: auto; height: var(--h-line); flex: none; } /* BUYING IT (pickitem.js `buy`): the price, what is on them and what it leaves, then Purchase — at the foot of the page, where Add was. */ #stage .cm-buy { margin-top: auto; display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--rule); } #stage .cm-buy-price { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } #stage .cm-buy-price > .group-label { margin: 0; } #stage .cm-buy-price > input.field { width: 84px; text-align: right; font-variant-numeric: tabular-nums; } #stage .cm-buy-price > em { font: var(--fs-body) var(--sans); font-style: normal; color: var(--ink-dim); white-space: nowrap; } #stage .cm-buy-left { margin-left: auto; font: 600 14px/1.4 var(--sans); color: var(--ink); white-space: nowrap; } #stage .cm-buy-left[data-short='true'] { color: var(--oxblood); } #stage .cm-buy-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } #stage .cm-buy .cm-pick-add { margin-top: 0; flex: 1 1 auto; } #stage .cm-pick-page > .cm-empty { font: 14px var(--sans); color: var(--ink-dim); } @media (max-width: 760px) { #stage .cm-picker { height: 100%; border: 0; } #stage .cm-pick-add { position: sticky; bottom: 0; box-shadow: 0 0 0 12px color-mix(in srgb, var(--board) 96%, transparent), 0 -14px 16px 10px color-mix(in srgb, var(--board) 90%, transparent); } #stage .cm-pick-top { padding: 0 16px 12px; } #stage .cm-picker .cm-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } #stage .cm-pick-split { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 46%); } #stage .cm-pick-page { border-left: 0; border-top: 1px solid var(--rule); padding: 16px; } #stage .cm-picker-line { display: none; } #stage .cm-pick-narrow { display: grid; gap: 8px; } #stage .cm-pick-fits { padding-right: 0; border-right: 0; } } /* ------------------------------------------------------------ THE OTHER LISTS ON THE SHEET — items and actions — wearing the spellbook's toolbar, bands and three layouts. ------------------------------------------------------------ */ /* A band outside a table: a ruled label that folds. */ #stage :is(.cm-inventory, .cm-act-groups, .cm-spell-deck) > .cm-spell-level { margin: 8px 0 10px; background: transparent; border-bottom: 1px solid var(--rule); } #stage :is(.cm-inventory, .cm-act-groups, .cm-spell-deck) > .cm-spell-level > button { padding-left: 0; } #stage :is(.cm-inventory, .cm-act-groups) > .cm-empty { margin: 0; font: 14px var(--sans); color: var(--ink-dim); } #stage .cm-act-groups { display: block; } #stage .cm-act-groups > ul.cm-attacks { margin-bottom: 14px; } /* THE TABLE — the spellbook's, for any list: one grid, every row a subgrid of it, columns as wide as their widest cell. */ #stage .cm-dtable { --frame-fill: color-mix(in srgb, var(--card) 55%, transparent); --dt-gap: 24px; display: grid; grid-template-columns: var(--dt-cols); column-gap: var(--dt-gap); margin: 0 0 14px; } #stage .cm-dtable > * { grid-column: 1 / -1; } #stage :is(.cm-dtable-head, .cm-dtable > .cm-dt-rows, .cm-dt-rows > li) { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; column-gap: var(--dt-gap); align-items: center; } #stage .cm-dtable-head { padding: 12px 16px 10px; border-bottom: 1px solid var(--rule); font: 600 11px/1.2 var(--caps); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); } #stage .cm-dtable-head > span { display: flex; min-width: 0; } #stage .cm-dt-rows { margin: 0; padding: 0; list-style: none; row-gap: 0; } #stage .cm-dt-rows > li { position: relative; min-height: 44px; padding: 6px 16px; box-sizing: border-box; cursor: pointer; font: 14px var(--sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); } #stage .cm-dtable > .cm-dt-rows:last-child > li:last-child { border-bottom-color: transparent; } #stage .cm-dt-rows > li:hover { background: var(--rec-hover); } #stage .cm-dt-rows > li[data-selected='true'] { background: var(--rec-on); } #stage .cm-dt-rows > li[data-selected='true']::before { content: ''; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); } #stage .cm-dt-rows > li > strong { display: flex; align-items: center; gap: 12px; min-width: 0; font: var(--rec-name); } #stage .cm-dt-rows > li > strong > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; color: inherit; } #stage .cm-dt-rows > li > strong > :is(.cm-row-fig, .cm-item-fig, .cm-glyph) { flex: none; width: 22px; height: 22px; color: var(--accent); } #stage .cm-dt-rows > li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 14px var(--sans); color: var(--ink); } #stage .cm-dt-rows > li[data-unavailable='true'] > strong > span { text-decoration: line-through; color: var(--ink-dim); } #stage .cm-dt-rows .cm-place-pick { padding: 0; justify-self: start; } /* ITEM CARDS: the Items-tab card, in a grid, the carry control at its foot. */ #stage ul.cm-items.cm-item-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0 0 16px; } #stage ul.cm-items.cm-item-cards > li { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border: 1px solid var(--rule); border-radius: var(--panel-radius); background: var(--rec-fill); } #stage ul.cm-items.cm-item-cards > li:hover { border-color: var(--rec-edge); background: var(--rec-hover); } #stage ul.cm-items.cm-item-cards > li > .cm-item-open { flex: 1 1 auto; min-height: 96px; padding: 16px; align-content: start; grid-template-columns: var(--fig) minmax(0, 1fr); } /* On a card the name has the room to wrap, and the facts may too. */ #stage ul.cm-items.cm-item-cards .cm-item-open > .cm-item-head > .cm-item-name, #stage ul.cm-items.cm-item-cards .cm-item-open > .cm-item-head > .cm-item-name > .cm-item-title { white-space: normal; overflow: visible; } #stage ul.cm-items.cm-item-cards .cm-item-open > .cm-item-facts { display: block; } #stage ul.cm-items.cm-item-cards .cm-item-open > .cm-item-facts > * { display: inline; white-space: normal; } #stage ul.cm-items.cm-item-cards .cm-item-open > .cm-item-fig { align-self: start; } #stage ul.cm-items.cm-item-cards .cm-item-open > .cm-item-facts > * + *::before { margin: 0 8px 0 0; } #stage ul.cm-items.cm-item-cards > li > .cm-place-pick { align-self: flex-start; margin: 0 16px 14px; } /* ACTION CARDS: the row, taller, in a grid, with its text. */ #stage ul.cm-attacks.cm-act-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin: 0 0 16px; } #stage ul.cm-attacks.cm-act-cards > li { align-content: start; row-gap: 4px; padding: 14px 16px; min-height: 120px; cursor: pointer; border: 1px solid var(--rule); border-radius: var(--panel-radius); background: var(--rec-fill); } #stage ul.cm-attacks.cm-act-cards > li:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--rule)); } #stage ul.cm-attacks.cm-act-cards > li > strong { font: 600 18px/1.2 var(--serif); } #stage ul.cm-attacks.cm-act-cards > li > span:not([class]) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font: 13px/1.45 var(--sans); color: var(--ink); } @media (max-width: 700px) { #stage .cm-dtable { display: block; } #stage .cm-dtable-head { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 12px; } #stage :is(.cm-dtable > .cm-dt-rows) { display: block; } #stage .cm-dt-rows > li { display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 8px 12px; } #stage .cm-dt-rows > li > strong { flex: 1 0 100%; } #stage .cm-dt-rows > li > span { font-size: 13px; color: var(--ink-dim); } } /* HOW IT IS CARRIED — one joined switch, the same part as the table/list/cards switch: a third less room than three loose pills, and plainly one control with one answer. */ #stage .cm-items li:has(> .cm-item-open) > .cm-place-pick { margin-right: 10px; } /* MONEY AND SUMMARY — the Items tab's two sections above the list, with the Sets heading's rule and h3 (character view `#money`, `#summary`). */ #stage .cm-inv-sec { display: grid; gap: var(--sp-3); margin: 0 0 14px; } /* The first one sits under the tab's subtitle, which already ends the heading: no rule above it. */ #stage .cm-inventory > .cm-inv-sec:first-child > .section-head { margin-top: 0; padding-top: 0; border-top: 0; } #stage :is(.cm-money-rows, .cm-summary-rows) { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } /* MONEY AS A GRID — a column per coin under its heading, a row per place, then what it is worth and Move. Every row is a subgrid of the one grid, so the columns line up down the whole table; a narrow pane scrolls it sideways rather than stacking the boxes. */ #stage .cm-money-wrap { overflow-x: auto; } /* only ever below the narrow layout's floor */ #stage .cm-money-grid { display: grid; column-gap: 8px; grid-template-columns: minmax(120px, 1fr) repeat(var(--coins), minmax(48px, 68px)) minmax(60px, auto) auto; } #stage :is(.cm-money-head, .cm-money-row, .cm-money-move) { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; } #stage .cm-money-head { padding: 0 0 8px; border-bottom: 1px solid var(--rule); font: 600 11px/1.3 var(--caps); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); } #stage .cm-money-head > .cm-money-coin { text-align: right; padding-right: 8px; } #stage .cm-money-row { padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); } #stage .cm-money-where { font: var(--rec-name); color: var(--ink); } #stage .cm-money-in { width: 100%; min-width: 0; height: 34px; box-sizing: border-box; padding: 0 8px; text-align: right; font: 14px var(--sans); font-variant-numeric: tabular-nums; } #stage .cm-money-total { font: 600 14px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; } #stage .cm-money-head > .cm-money-total { font: inherit; color: inherit; } #stage :is(.cm-money-row, .cm-money-move) > .btn { justify-self: end; } #stage .cm-money-row[data-moving='true'] { border-bottom-color: transparent; } /* The last row needs no line: the next section's rule is right under it. */ #stage .cm-money-grid > :last-child { border-bottom: 0; } #stage .cm-summary-rows > li:last-child { border-bottom: 0; } /* The move line, on the same columns, lit as the thing being done. */ #stage .cm-money-move { padding: 10px 0; margin-bottom: 6px; background: var(--rec-on); box-shadow: inset 0 0 0 1px var(--rec-edge); border-radius: var(--control-radius); } #stage .cm-money-move > :first-child { padding-left: 12px; } #stage .cm-money-move > :last-child { margin-right: 12px; } #stage .cm-money-to { display: grid; gap: 4px; } #stage .cm-money-to > span { font: 600 11px/1.3 var(--caps); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); } #stage .cm-money-to select { min-height: 34px; padding: 0 8px; font: 14px var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: var(--control-radius); } #stage .cm-money-none { text-align: right; padding-right: 10px; color: var(--ink-dim); } /* NARROW: the place, what it is worth and Move on a line of their own, and the coins under them across the full width — so the whole grid fits without scrolling sideways. Measured on the section, not the window, so an open side pane counts. */ #stage .cm-money { container: money / inline-size; } @container money (max-width: 600px) { #stage .cm-money-grid { grid-template-columns: repeat(var(--coins), minmax(0, 1fr)); row-gap: 8px; } #stage .cm-money-head > :not(.cm-money-coin) { display: none; } #stage :is(.cm-money-row, .cm-money-move) { row-gap: 8px; } #stage :is(.cm-money-row, .cm-money-move) > :first-child { grid-row: 1; grid-column: 1 / -3; } #stage :is(.cm-money-row, .cm-money-move) > :nth-last-child(2) { grid-row: 1; grid-column: -3 / -2; } #stage :is(.cm-money-row, .cm-money-move) > :last-child { grid-row: 1; grid-column: -2 / -1; } #stage :is(.cm-money-row, .cm-money-move) > :is(.cm-money-in, .cm-money-none) { grid-row: 2; } #stage .cm-money-move { padding: 10px 12px; } #stage .cm-money-move > :first-child { padding-left: 0; } #stage .cm-money-move > :last-child { margin-right: 0; } } /* Summary: where, how many, what it weighs — each line a jump to it. */ #stage .cm-summary-rows > li > button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, auto) minmax(72px, auto); gap: 16px; align-items: baseline; padding: 8px 0; } /* THE HOVER BLEEDS PAST THE COLUMN: padding in, the same margin out, so the words stay on the page's left edge and the fill has room. */ #stage .cm-summary-rows > li > button { width: calc(100% + 20px); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: var(--control-radius); } #stage .cm-summary-rows > li > button:hover { background: var(--rec-hover); } #stage .cm-summary-rows > li { border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); } #stage .cm-summary-rows > li > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } #stage .cm-summary-where { font: var(--rec-name); color: var(--ink); } #stage :is(.cm-summary-n, .cm-summary-lb) { font: 400 var(--fs-body) var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; } /* values, so ink */ #stage .cm-inv-summary > .tile-line { margin-top: 6px; } /* The weights' labels never shorten: the value is what grows. */ #stage .cm-inv-summary > .tile-line > .tile.inline.plain { flex: none; width: auto; } #stage .cm-inv-summary .tile.inline.plain .cm-field-name { flex: none; } #stage .cm-inv-summary .tile.inline.plain .cm-field-name > span { overflow: visible; } /* STOW, WITH WHERE. The last third of the switch opens a menu of their bags and chests and Home. The switch no longer clips its children — the menu has to hang out of it — so its two ends round themselves. */ #stage .cm-place-pick:has(> details) { overflow: visible; } #stage .cm-place-pick > :first-child { border-radius: calc(var(--control-radius) - 1px) 0 0 calc(var(--control-radius) - 1px); } #stage .cm-place-pick > :last-child, #stage .cm-place-pick > details:last-child > summary { border-radius: 0 calc(var(--control-radius) - 1px) calc(var(--control-radius) - 1px) 0; } /* WHAT IS IN A BAG, UNDER THE BAG (character view `#nested`): indented to the bag's name, with a rule down from the bag's drawing so the eye can see what belongs to what. Not a row itself — no fill, no frame. */ #stage :is(.cm-inventory, .cm-items-page) ul.cm-items > li.cm-nest, #stage :is(.cm-inventory, .cm-items-page) ul.cm-items > li.cm-nest:hover { display: block; position: relative; padding: 0 0 0 calc(var(--rec-fig) + var(--rec-fig-gap) + 2px); border: 0; background: none; box-shadow: none; cursor: default; } #stage ul.cm-items > li.cm-nest::before { content: ''; position: absolute; left: calc(14px + var(--rec-fig) / 2); top: -6px; bottom: 28px; border-left: 1px solid var(--rec-edge); } #stage ul.cm-items > li.cm-nest > ul.cm-items { margin: 0; } /* WHERE IT IS, AS A TAG YOU CAN PRESS — "in Backpack", "at Home". No dot before it: the tag's edge is the separator. */ #stage .cm-item-open > .cm-item-facts > .cm-place-tag::before { content: none; } #stage .cm-item-open > .cm-item-facts > .cm-place-tag { cursor: pointer; font-size: 13px; line-height: 1.4; } #stage .cm-item-open > .cm-item-facts > .cm-place-tag > b { font-size: 13px; } #stage .cm-place-tag:hover { box-shadow: inset 0 0 0 1px var(--rec-edge); background: var(--rec-hover); } #stage .cm-place-tag:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* A bag past what it holds says so on its own facts line. */ #stage .cm-item[data-over='true'] .cm-item-facts > span:last-child { color: var(--oxblood); } /* A ROW'S ⋯, the spellbook's menu on any table, list row or card. */ #stage .cm-items > li > .cm-row-actions { flex: none; margin-right: 8px; } #stage ul.cm-items.cm-item-cards > li > .cm-row-actions { position: absolute; top: 12px; right: 4px; margin: 0; } #stage ul.cm-items.cm-item-cards > li { position: relative; } #stage .cm-dtable-head > .cm-column-menu { overflow: visible; justify-self: end; } /* The item picker wears the spell picker's parts; only the drawing and the footer's extra button are its own. */ #stage .cm-picker-row > .cm-item-fig { display: grid; place-items: center; width: 22px; height: 22px; color: var(--accent); } #stage .cm-picker-row > .cm-item-fig .cm-icon { width: 100%; height: 100%; display: block; } #stage .cm-picker-row > .cm-item-fig[data-blank='true'] { visibility: hidden; } #stage .cm-pick-page-fig > .cm-item-fig { display: grid; place-items: center; width: 34px; height: 34px; } #stage .cm-pick-page-fig > .cm-item-fig .cm-icon { width: 100%; height: 100%; } #stage .cm-pick-page-head p .cm-rarity { margin-left: 4px; font-style: normal; } /* Trained in: one line per kind, the kinds' words in a column so the facts start together. */ #stage .cm-profs { gap: 16px; } #stage .cm-profs > .cm-why-acts { margin: 0 0 0 -10px; } /* EVERY OTHER ROW THAT NAMES A RECORD wears the same name and fill — the item rows (the shared card from ui/itemcard.js), the action rows, a set's missing rows. See parts.css 14. */ #stage .cm-item-open > .cm-item-head > .cm-item-name { font: var(--rec-name-lg); color: var(--ink); } #stage .cm-dt-rows .cm-item-name { font: var(--rec-name); } #stage :is(.cm-inventory, .cm-items-page) ul.cm-items > li, #stage .cm-act-groups ul.cm-attacks > li { background: var(--rec-fill); border-color: var(--rule); transition: background .12s, border-color .12s; } #stage :is(.cm-inventory, .cm-items-page) ul.cm-items > li:hover, #stage .cm-act-groups ul.cm-attacks > li:hover { background: var(--rec-hover); border-color: var(--rec-edge); } #stage :is(.cm-inventory, .cm-items-page) ul.cm-items > li[data-open='true'] { background: var(--rec-on); border-color: var(--accent); } #stage .cm-act-groups ul.cm-attacks > li { cursor: pointer; } #stage .cm-act-groups ul.cm-attacks > li > strong { font: var(--rec-name-lg); color: var(--ink); } #stage .cm-missing-row strong { font: var(--rec-name); color: var(--ink-dim); } /* ------------------------------------------------------------ ONE ROW, ONE CARD — every list on the sheet (parts.css 14 tokens). Actions, the features on Abilities, Spells and Items each grew their own padding, drawing size and spacing, and side by side the tabs read as four products. Now: the same padding, a 24px drawing on the name's line, the same gap to the name and under it, 6px between rows, 12px between cards, and one font for the facts line and one for the sentence. (The spell TABLE stays a table: its rows are cells.) ------------------------------------------------------------ */ #stage :is(.cm-act-groups ul.cm-attacks, :is(.cm-inventory, .cm-items-page) ul.cm-items, ul.cm-spells.cm-spell-rows):not(.cm-act-cards, .cm-item-cards) { gap: var(--rec-gap); margin: 0 0 var(--rec-list-end); } #stage :is(ul.cm-attacks.cm-act-cards, ul.cm-items.cm-item-cards, ul.cm-spells.cm-spell-cards) { grid-template-columns: repeat(auto-fill, minmax(var(--rec-card-min), 1fr)); gap: var(--rec-card-gap); margin: 0 0 var(--rec-list-end); } /* An action or a feature. */ #stage .cm-act-groups ul.cm-attacks > li { grid-template-columns: var(--rec-fig) minmax(0, 1fr); column-gap: var(--rec-fig-gap); row-gap: var(--rec-line-gap); padding: var(--rec-pad); } #stage .cm-act-groups ul.cm-attacks.cm-act-cards > li { padding: var(--rec-card-pad); } #stage .cm-act-groups ul.cm-attacks > li > .cm-row-fig { width: var(--rec-fig); height: var(--rec-fig); } #stage .cm-act-groups ul.cm-attacks > li > strong { font: var(--rec-name-lg); padding-right: 64px; } /* clear of the corner word */ #stage .cm-act-groups ul.cm-attacks > li > span:not([class]) { font: var(--rec-text); color: var(--ink); } #stage .cm-act-groups ul.cm-attacks > li > .cm-source { top: 10px; right: 14px; font-size: 11px; letter-spacing: .08em; opacity: .8; } /* An item. The row's own controls sit in from the edge by the row's padding, like everything else in it. */ #stage .cm-item { --fig: var(--rec-fig); } #stage ul.cm-items > li > .cm-item-open { padding: var(--rec-pad); column-gap: var(--rec-fig-gap); row-gap: var(--rec-line-gap); } #stage ul.cm-items.cm-item-cards > li > .cm-item-open { padding: var(--rec-card-pad); } #stage ul.cm-items:not(.cm-item-cards) > li > .cm-item-open > .cm-item-fig { grid-row: 1; align-self: center; } #stage .cm-item-open > .cm-item-facts { font: var(--rec-meta); color: var(--ink-dim); } #stage .cm-items li:has(> .cm-item-open) > .cm-place-pick { margin-right: 6px; } #stage ul.cm-items:not(.cm-item-cards) > li > .cm-row-actions { margin-right: 14px; } #stage ul.cm-items.cm-item-cards > li > .cm-place-pick { margin: 0 16px 14px; } /* A spell, as a list row or a card. */ #stage ul.cm-spells:is(.cm-spell-rows, .cm-spell-cards) > .cm-spell > strong { gap: var(--rec-fig-gap); font: var(--rec-name-lg); } #stage ul.cm-spells:is(.cm-spell-rows, .cm-spell-cards) > .cm-spell > strong > .cm-glyph { width: var(--rec-fig); height: var(--rec-fig); } #stage ul.cm-spells.cm-spell-rows > .cm-spell { min-height: 0; padding: var(--rec-pad); row-gap: var(--rec-line-gap); } #stage ul.cm-spells.cm-spell-cards > .cm-spell { padding: var(--rec-card-pad); } #stage ul.cm-spells.cm-spell-rows > .cm-spell > span.cm-spell-line { padding-left: calc(var(--rec-fig) + var(--rec-fig-gap)); font: var(--rec-meta); } #stage ul.cm-spells.cm-spell-cards > .cm-spell > span.cm-spell-line { font: var(--rec-meta); } /* A card's sentence, on every kind of card: three lines, then it stops. */ #stage :is(ul.cm-attacks.cm-act-cards > li > span:not([class]), ul.cm-spells.cm-spell-cards > .cm-spell > span:not([class])) { font: var(--rec-text); -webkit-line-clamp: 3; } /* Every card in a row starts at the row's top and is as tall as it. */ #stage :is(ul.cm-attacks.cm-act-cards, ul.cm-items.cm-item-cards, ul.cm-spells.cm-spell-cards) { align-items: stretch; } /* The corner word ("Spell", "Item") keeps clear of a name that wraps. */ #stage ul.cm-attacks.cm-act-cards > li > .cm-source { top: 14px; right: 16px; } /* An item card's facts wrap as whole facts, with the row's spacing. */ #stage ul.cm-items.cm-item-cards .cm-item-open > .cm-item-facts { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; } #stage ul.cm-items.cm-item-cards .cm-item-open > .cm-item-facts > * { display: inline-flex; white-space: nowrap; } #stage ul.cm-items.cm-item-cards .cm-item-open > .cm-item-facts > .rule-tags { flex-wrap: wrap; } /* RULE TAGS ON THE ROWS (parts.css section 7). On an item's one line of facts they stay on that line and need no dot before them — the tag's own edge is the separator. A spell's facts and an action's rules are a line of tags under the name. */ #stage .cm-item-open > .cm-item-facts { align-items: center; } /* NARROW, THE FACTS WRAP AS WHOLE FACTS rather than cutting a tag in half: a row a line taller reads; "1d6 bludgeo" does not. */ #stage .cm-item-open > .cm-item-facts { flex-wrap: wrap; row-gap: 2px; overflow: visible; } #stage .cm-item-open > .cm-item-facts > .cm-item-does { overflow: visible; } /* A fact that is a sentence (a character's summary) wraps inside itself; numbers and tags stay whole. */ #stage .cm-item-open > .cm-item-facts > span:not(.rule-tags, .tag, .cm-item-does) { white-space: normal; min-width: 0; flex-shrink: 1; } #stage .cm-item-open > .cm-item-facts > .rule-tags::before { content: none; } #stage .cm-item-open > .cm-item-facts .tag.rule-tag { font-size: 13px; line-height: 1.4; } #stage .cm-item-open > .cm-item-facts .tag.rule-tag > b { font-size: 13px; } #stage .cm-spell > .cm-spell-line > .rule-tags + .rule-tags { margin-left: 6px; } /* A SMALL FORM IN A MODAL — a label over its box, two to a row where two belong together (to hit and range, damage and its type). */ #stage .cm-form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 480px) { #stage .cm-form-pair { grid-template-columns: 1fr; } } /* A POOL TILE: the count, then when it comes back, a line under it. */ #stage .tile.cm-pool .cm-pool-back { font: 13px var(--sans); color: var(--ink-dim); } #stage .tile.cm-pool[data-dry='true'] .cm-field-value { color: var(--oxblood); } #stage .tile.cm-pool .cm-field-body { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2px; } #stage .tile.cm-pool .cm-field-value { white-space: nowrap; } /* A REST'S PANE: what the rest does by itself, then what they do on it. */ #stage .cm-rest-does { margin: 0 0 14px; padding-left: 18px; font: 14px/1.5 var(--sans); color: var(--ink); } /* THE PANE'S DRAWING IS A DOOR on a spell or an item: pressing it chooses what the thing looks like. It looks like the frame it is in until the pointer is on it. */ #stage .pane-fig-btn { all: unset; display: grid; place-items: center; width: 100%; height: 100%; cursor: pointer; border-radius: inherit; } #stage .pane-fig-btn:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); } #stage .pane-fig-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } #stage .pane-fig-btn > .cm-item-fig { width: 100%; height: 100%; display: grid; place-items: center; } #stage .pane-fig-btn > .cm-item-fig > img { width: 100%; height: 100%; object-fit: cover; } #stage .pane-fig-btn > .cm-item-fig > svg { width: 60%; height: 60%; } /* THE PICTURE CHOOSER (ui/record/picturepick.js). */ #stage .cm-pp { grid-template-rows: auto minmax(0, 1fr); } #stage .cm-pp-sec { display: grid; gap: var(--sp-2); } #stage .cm-pp-sec > .group-label { margin: 0; } #stage .cm-pp-acts { display: flex; gap: 8px; align-items: center; } #stage .cm-pp-acts input[type='file'] { display: none; } #stage .cm-pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; } #stage .cm-pp-cell { all: unset; box-sizing: border-box; aspect-ratio: 1; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--rule); border-radius: 3px; background: var(--card); overflow: hidden; color: var(--accent); } #stage .cm-pp-cell:hover { border-color: var(--rec-edge); background: var(--rec-hover); } #stage .cm-pp-cell[aria-pressed='true'] { border-color: var(--accent); background: var(--rec-on); } #stage .cm-pp-cell > img { width: 100%; height: 100%; object-fit: cover; } #stage .cm-pp-cell .cm-glyph { width: 30px; height: 30px; } #stage .cm-pp-cell .cm-glyph svg { width: 100%; height: 100%; } /* A spell's own picture on its row takes the drawing's place and size. */ #stage .cm-spell > strong > .cm-item-fig { flex: none; width: 24px; height: 24px; border-radius: 3px; overflow: hidden; display: grid; place-items: center; } #stage .cm-spell > strong > .cm-item-fig > img { width: 100%; height: 100%; object-fit: cover; } #stage .cm-spell > strong > .cm-item-fig > svg { width: 20px; height: 20px; } /* ------------------------------------------------------------ INNER AND PERSONALITY, WIDE. Narrow, everything stacks; once the panel has the room, the free space to the right is used. ------------------------------------------------------------ */ #stage .cm-version :is(.cm-inner, .cm-manner-panel) { container: perspanel / inline-size; } /* TOO NARROW FOR FIVE WORDS ACROSS (a drawer open beside the sheet), a scale reads top to bottom instead: the same order, one word to a line, and no word cut to "Immov". */ @container perspanel (max-width: 460px) { #stage .cm-version .seg.scale { grid-auto-flow: row; grid-auto-rows: minmax(var(--h-compact), auto); height: auto; min-height: 0; } #stage .cm-version .seg.scale > button { justify-content: start; padding: var(--sp-1) var(--sp-3); text-align: left; font-size: var(--fs-small); } #stage .cm-version .seg.scale > button + button { border-left: 0; border-top: 1px solid var(--rule); } #stage .cm-version .seg.scale > [aria-pressed='true'] + button { border-top-color: var(--ink); } } @container perspanel (min-width: 880px) { /* Behavior: the wing and where they are now on the left, the alignment grid beside them. */ #stage .cm-version .cm-behavior-more[data-align='true'] { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); column-gap: 40px; grid-template-areas: 'wing align' 'now align'; align-items: start; } #stage .cm-version .cm-behavior-more[data-align='true'] > [data-area='wing'] { grid-area: wing; } #stage .cm-version .cm-behavior-more[data-align='true'] > [data-area='now'] { grid-area: now; } #stage .cm-version .cm-behavior-more[data-align='true'] > [data-area='align'] { grid-area: align; } #stage .cm-version .cm-behavior-more[data-align='true'] :is(.cm-wing-pick, .cm-minor .cm-bands) { max-width: none; } /* Personality's summary: the full width, the two halves side by side. */ #stage .cm-version .cm-manner-panel .cm-cue-group { align-content: start; } #stage .cm-version .cm-manner-panel .cm-cue-group + .cm-cue-group { padding-top: 0; border-top: 0; padding-left: 28px; border-left: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); } /* A spectrum row: the question gets the room to say itself on one line, so the rows are shorter. */ #stage .cm-version .cm-vaxis { flex-wrap: nowrap; padding: 7px 0; } #stage .cm-version .cm-vaxis-ask { flex: 1 1 0; } } /* ------------------------------------------------------------ THE EXPERIENCE TAB, held to the same parts: an h3 and its ? per section, frameless questions, segmented choices, notes behind the ?. ------------------------------------------------------------ */ /* Tight: the sections space themselves with their own rule, not a gap on top of a margin on top of padding. */ #stage .cm-version .cm-arc { gap: 0; } #stage .cm-version .cm-arc-block { margin: 0; gap: var(--sp-3); } #stage .cm-version .cm-moment-controls { margin-top: var(--sp-5); } /* The moment's name, one box under the title: it reads as the title's second line, and is the timeline row's name. */ /* A choice is a question like the rest: no frame, its label in the label voice. */ #stage .cm-version .cm-arc fieldset.cm-choice { margin: 0 0 18px; } /* The method, chosen in one control, and what it means under it. */ /* Who are they now: the description, then the Inner tab's own card. */ #stage .cm-version .cm-now-inner { display: grid; gap: 10px; } #stage .cm-version .cm-arc-go { justify-self: start; } #stage .cm-version .cm-now-arc { margin-top: 4px; } #stage .cm-version .cm-now-arc .cm-arc-node:last-child { padding-bottom: 0; } #stage .cm-version .cm-now-arc .cm-arc-node:last-child::before { display: none; } /* The creation form's parts sit flush: the next section's rule and heading are the only space between them. */ #stage .cm-version .cm-creation { row-gap: 0; } #stage .cm-version .cm-creation > :is(.cm-abilitygen, .cm-startgear) { margin: 0; } #stage .cm-version .cm-creation > .cm-note.cm-inline { margin: 2px 0 4px; } /* Origins on one row: species, background, class, starting level. */ /* THE FOUR ORIGINS ARE ONE FIXED WIDTH (160), and wrap when the column runs out. Stretchy columns sized themselves to how many fitted the page, so opening the drawer — fewer, wider columns — grew every field. */ /* Four, then two, then one — never three and a straggler. The page around it is the container: a container cannot restyle itself. */ #stage .cm-version .cm-arc { container: origins / inline-size; } #stage .cm-version .cm-arc-block.cm-creation { grid-template-columns: minmax(0, 1fr); } #stage .cm-version .cm-origins { display: grid; grid-template-columns: repeat(4, 160px); gap: var(--sp-3) 14px; } #stage .cm-version .cm-origins > .cm-pick { max-width: none; margin: 0; } @container origins (max-width: 681px) { #stage .cm-version .cm-origins { grid-template-columns: repeat(2, 160px); } } @container origins (max-width: 333px) { #stage .cm-version .cm-origins { grid-template-columns: minmax(0, 1fr); } } #stage .cm-version .cm-start-level input { width: 100%; box-sizing: border-box; } /* Under each level's h3, its parts as quieter sub-headings. */ /* A later level they start with: its class, what it brings, its questions. */ /* A level is a stack of groups — class, what it brings, the subclass, its questions — 16 apart, as groups are everywhere (a label is 4 over its own value); the heading sits 12 over the first. Nothing adds its own margin on top. */ #stage .cm-version .cm-start-lvl { display: grid; gap: var(--sp-4); } #stage .cm-version .cm-start-lvl > .section-head { margin-bottom: calc(var(--sp-3) - var(--sp-4)); } #stage .cm-version .cm-start-lvl > :is(.cm-pick, fieldset.cm-choice, .cm-asked, .cm-arrived, .cm-subclass) { margin: 0; } /* Every pick in a level is the same width — the class, and the subclass inside its own wrapper. */ #stage .cm-version .cm-start-lvl :is(.cm-pick, .cm-subclass .cm-pick) { max-width: 320px; margin: 0; } #stage .cm-version .cm-arch-ask { display: flex; align-items: center; gap: 12px; margin: 0; } /* A quiet action that starts a line lines its words up with the column. */ #stage .cm-version .cm-arch-ask > .btn.quiet:first-child { margin-left: calc(-1 * var(--sp-2)); } #stage .cm-version .cm-arch-chosen { font: italic 16px/1.3 var(--serif); color: var(--ink-dim); } /* High contrast, under the theme list (apps/web/src/contrast.js). */ #stage .contrast-pick { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 6px; cursor: pointer; } #stage .contrast-pick input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); } #stage .contrast-pick strong { display: block; font: 600 var(--fs-body)/1.3 var(--sans); color: var(--ink); } #stage .contrast-pick .settings-hint { display: block; margin: 2px 0 0; } /* The spell table beside an open drawer: tighter gutters when its own box is narrow, so it fits instead of running under the drawer. */ #stage :has(> .cm-spell-table) { container: spelltable / inline-size; } @container spelltable (max-width: 640px) { #stage .cm-spell-table { --spell-gap: 12px; } #stage :is(.cm-spell-columns, .cm-spells .cm-spell) { padding-left: 12px; padding-right: 8px; } } /* ------------------------------------------------------------ THE SHEET ON THE PARTS (2026-10-06) — what is left for this file: where the parts sit. Sizes, colours and corners are parts.css's. ------------------------------------------------------------ */ /* The moment's name reads as the title's second line. */ #stage .page-head:has(+ .field) { margin-bottom: var(--sp-3); } #stage .page-head + .field { margin-bottom: var(--sp-5); } /* Making the scores: one column, a gap between its parts. */ #stage .cm-abilitygen { display: grid; gap: var(--sp-3); } #stage .cm-pool { margin: 0; font: 600 var(--fs-body)/1.3 var(--sans); letter-spacing: .02em; color: var(--ink); font-variant-numeric: tabular-nums; } /* A question: its label, its line, its choices. */ #stage .cm-version fieldset.cm-axis > legend { margin: 0 0 var(--sp-2); padding: 0; } /* Starting equipment: the two offers side by side, the list folded. */ #stage .cm-start-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); } #stage .cm-start-what { margin-top: var(--sp-2); } #stage .cm-start-what > summary { list-style: none; } #stage .cm-start-what > summary::-webkit-details-marker { display: none; } #stage .cm-start-what:not([open]) > summary.band::before { transform: rotate(-45deg); margin-top: 0; } #stage .cm-start-list { margin: var(--sp-2) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sp-1); font: var(--fs-body)/1.4 var(--sans); } #stage .cm-start-list li { display: flex; gap: var(--sp-2); align-items: baseline; } #stage .cm-start-list strong { font-weight: 500; } #stage .cm-start-qty { font: var(--fs-small) var(--sans); color: var(--ink-dim); } /* Trained in: each kind on a line, its label in one column. */ #stage .cm-profs > .tile-line { flex-wrap: wrap; } #stage .cm-profs > .tile-line > .group-label { flex: 0 0 128px; margin: 0; } /* The training mark: a shape, in the gold made readable. */ #stage .cm-trained { font-size: var(--fs-label); color: var(--accent-text); } :root[data-contrast='aa'] #stage .cm-trained { color: var(--focus); } /* A row's tag of where it came from (item, spell, system): a label. */ #stage .cm-source { font: 600 var(--fs-label)/1.3 var(--caps); letter-spacing: var(--track-caps); text-transform: uppercase; font-style: normal; color: var(--ink-dim); } /* Inner: a question is its label, its line, then the box, close together. */ #stage .cm-version .cm-slot { display: grid; gap: var(--sp-1); } #stage .cm-version .cm-slot > .field-rich { margin-top: var(--sp-1); } #stage .cm-version .cm-inner > .empty-note { margin-bottom: var(--sp-3); } /* An alignment is nine words, not a full-width table. */ #stage .cm-grid-wrap > .seg.grid { max-width: 640px; } /* A spectrum row: the question, then its scale. The scale is the segmented control (parts.css §18); here is only how much room it gets. */ #stage .cm-vaxis > .seg.scale { flex: 2 1 420px; width: auto; min-width: min(100%, 360px); } @media (min-width: 1100px) { #stage .cm-version .cm-vaxis > .seg.scale { flex: 0 1 54%; } } @media (max-width: 560px) { #stage .cm-version .cm-vaxis > .seg.scale { flex-basis: 100%; min-width: 0; } } #stage .cm-axis > .seg.scale, #stage .cm-prompt > .seg { max-width: 640px; } /* A level's picker inside the callout that explains it: 12 under the explanation, and nothing after it but the callout's own padding. */ #stage .cm-version .cm-asked > fieldset.cm-choice { margin: var(--sp-2) 0 0; } #stage .sm > .sm-stories { flex: 1; min-height: 0; overflow: auto; width: 100%; margin: 0; box-sizing: border-box; } /* Character cards: engraved stock, arched portrait, level seal. */ #stage .pcard[data-kind='character'] .pcard-open { --pc-edge: color-mix(in srgb, var(--accent) 75%, var(--ink)); padding: 0; border-radius: 8px; aspect-ratio: 4 / 7; background: var(--card); color: var(--pc-edge); box-shadow: 0 2px 4px color-mix(in srgb, var(--shadow, #000) 16%, transparent); } #stage .pcard[data-kind='character'] .pcard-face { position: relative; border: 0; border-radius: 8px; overflow: visible; grid-template-rows: 44px auto auto auto minmax(0, 1fr) auto; padding: 0 12px 18px; text-align: center; background: linear-gradient(130deg, color-mix(in srgb, var(--accent) 6%, var(--card)), var(--card) 55%, color-mix(in srgb, var(--accent) 10%, var(--card))); } #stage .pcard-frame { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--pc-edge); pointer-events: none; overflow: visible; } #stage .pcard[data-kind='character'] .pcard-head { position: relative; justify-content: center; min-height: 0; padding: 8px 0 0; border: 0; background: none; } #stage .pcard-emblem { width: 32px; height: 32px; color: var(--pc-edge); } #stage .pcard[data-kind='character'] .pcard-gem { position: absolute; right: 3px; top: 17px; width: 32px; height: 32px; color: var(--ink); background: var(--card); border: 1px solid var(--pc-edge); box-shadow: inset 0 0 0 2px var(--card), inset 0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent); font: 600 18px/1 var(--display); } #stage .pcard[data-kind='character'] .pcard-art { margin: 0; aspect-ratio: 1; border-radius: 50% 50% 2px 2px; border: 0; border-top: 1px solid var(--pc-edge); background: color-mix(in srgb, var(--ink) 4%, transparent); } #stage .pcard-placeholder { display: block; width: 100%; height: 100%; color: var(--ink); } #stage .pcard[data-kind='character'] .pcard-name { flex: none; padding: 8px 0 0; font: 600 22px/1.05 var(--display); } #stage .pcard[data-kind='character'] .pcard-type { margin: 6px 0 0; padding: 0; border: 0; background: none; font: 600 11px/1.4 var(--sans); letter-spacing: .12em; color: var(--ink-dim); } /* TWO LINES OF DESCRIPTION, ALWAYS ROOM FOR THEM. The card's height follows its contents rather than a fixed shape that squeezed the text row to nothing; the text row is exactly two lines, full or not, so every card in a row is the same height. */ #stage .pcard[data-kind='character'] .pcard-open { aspect-ratio: auto; } #stage .pcard[data-kind='character'] .pcard-face { height: auto; grid-template-rows: 44px auto auto auto auto auto; } #stage .pcard[data-kind='character'] .pcard-text { margin: 10px 8px 0; height: 2.6em; font: italic 400 16px/1.3 var(--serif, var(--display)); } #stage .pcard[data-kind='character'] .pcard-text > span { -webkit-line-clamp: 2; } #stage .pcard[data-kind='character'] .pcard-foot { padding: 6px 4px 0; font: 400 11px/1.3 var(--sans); text-transform: none; letter-spacing: 0; } html[data-card-frame='plain'] #stage .pcard[data-kind='character'] .pcard-frame { display: none; } html[data-card-frame='plain'] #stage .pcard[data-kind='character'] .pcard-face { outline: 1px solid var(--pc-edge); outline-offset: -5px; } #stage .cm-character-fig > .pcard-placeholder { width: 100%; height: 100%; } @media (max-width: 600px) { #stage .pcard[data-kind='character'] .pcard-face { padding: 0 8px 15px; grid-template-rows: 40px auto auto auto auto auto; } #stage .pcard[data-kind='character'] .pcard-name { font-size: 18px; } #stage .pcard[data-kind='character'] .pcard-text { margin: 6px 3px 0; font-size: 13px; } #stage .pcard[data-kind='character'] .pcard-type { letter-spacing: .03em; } #stage .pcard[data-kind='character'] .pcard-gem { top: 12px; right: 0; width: 28px; height: 28px; font-size: 16px; } } /* Location sketches sit behind collection records, with theme paper over ink. */ html[data-view='list'][data-screen='cards'] #stage #listMount { background-image: linear-gradient(color-mix(in srgb, var(--board) 86%, transparent), color-mix(in srgb, var(--board) 72%, transparent)), var(--collection-sketch); background-size: cover; background-position: center; background-repeat: no-repeat; } /* The sign-in screen: the tavern, under the same paper. */ .gate { background-image: linear-gradient(color-mix(in srgb, var(--board) 80%, transparent), color-mix(in srgb, var(--board) 64%, transparent)), url('../assets/library/background-character.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; } html[data-collection='story'] { --collection-sketch: url('../assets/library/background-story.jpg'); } html[data-collection='characters'] { --collection-sketch: url('../assets/library/background-character.jpg'); } html[data-collection='creatures'] { --collection-sketch: url('../assets/library/background-creature.jpg'); } html[data-collection='items'] { --collection-sketch: url('../assets/library/background-item.jpg'); } html[data-collection='crews'] { --collection-sketch: url('../assets/library/background-crew.jpg'); } html[data-collection='places'] { --collection-sketch: url('../assets/library/background-place.jpg'); } html[data-collection='encounters'] { --collection-sketch: url('../assets/library/background-event.jpg'); } #stage img.pcard-placeholder { object-fit: cover; object-position: center 25%; } #stage img.pcard-placeholder { filter: grayscale(1); } /* ---- Two sides: playing your characters, or running your games ---- One switch in the ☰ menu (`html[data-side]`). The sidebar and the menu show the side you are on and nothing of the other. */ .playing-nav { display: none; } html[data-side='playing'] .playing-nav { display: grid; gap: 2px; margin-top: 18px; } html[data-side='playing'] .playing-nav > .group-label { margin: 0 0 6px; padding: 0 8px; color: var(--chrome-ink-dim, var(--ink-dim)); } html[data-side='playing'] :is(#worldNavLists, .world-nav-title, .world-nav-recent) { display: none; } html[data-side='playing'] .menu-running { display: none; } .menu-playing { display: none; } html[data-side='playing'] .menu-playing { display: block; } .menu-playing .menu-item { text-decoration: none; } @media (min-width: 1100px) { html[data-view='playing'] .menu-playing { display: none; } } .playing-nav .world-nav-link { text-decoration: none; } .playing-nav .world-nav-link[aria-current='page'] { color: var(--accent-text); } #menuPanel .menu-side { display: flex; width: 100%; box-sizing: border-box; margin: var(--sp-2) 0 var(--sp-1); border: 1px solid var(--chrome-rule); border-radius: var(--control-radius); overflow: hidden; } #menuPanel .menu-side > button { all: unset; flex: 1; box-sizing: border-box; height: var(--h-line); padding: 0 var(--sp-2); display: grid; place-items: center; cursor: pointer; font: 500 var(--fs-small)/1.2 var(--sans); color: var(--chrome-ink); } #menuPanel .menu-side > button + button { border-left: 1px solid var(--chrome-rule); } #menuPanel .menu-side > button:hover:not([aria-checked='true']) { background: color-mix(in srgb, var(--chrome-ink) 8%, transparent); } #menuPanel .menu-side > button[aria-checked='true'] { background: var(--chrome-ink); color: var(--chrome); } #menuPanel .menu-side > button:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }