/* ═══════════════════════════════════════════════════════════════════════════ DM WORKSHOP — v69.5 skin, matched to Jeremy's 15 reference mockups. The visual language (see /reference images): near-black leather stage; PARCHMENT cards carrying dark ink; Cinzel gold serif headings with thin ornamental rules; crimson wax-seal primary buttons with gold text; dark panels hairlined in translucent gold; colored tag chips ON the parchment; red pushpins; the italic gold footer tagline between diamond rules. Palette is Workshop-scoped (--cxw-*): the Workshop is DM-only chrome and keeps this fixed identity regardless of the campaign's player-facing theme, exactly like the mockups. Platform tokens are still consulted for fonts and a handful of shared roles. ════════════════════════════════════════════════════════════════════════ */ :root { /* leather + gold + parchment + crimson — Workshop-namespaced (--cxw-*), defined at :root because drawers, modals, and the quick-capture button mount on , outside .cxw-page. Nothing else consumes them. */ --cxw-bg: #131009; --cxw-panel: #1b1610; --cxw-panel-2: #211b13; --cxw-line: rgba(201, 162, 74, .18); --cxw-line-strong: rgba(201, 162, 74, .38); --cxw-gold: #c9a24a; --cxw-gold-bright: #f4c867; --cxw-crimson: #6d1a1f; --cxw-crimson-hi: #8c2429; --cxw-crimson-line: #a83236; --cxw-parch: #e9dcbd; --cxw-parch-2: #ddcda6; --cxw-parch-line: #b9a678; --cxw-ink: #2b2115; --cxw-ink-soft: #57482f; --cxw-ink-dim: #7a6a4c; --cxw-text: #e8dcc0; --cxw-text-soft: #b0a488; --cxw-text-dim: #8a8377; --cxw-green: #4f7d52; --cxw-red: #a03a3a; --cxw-blue: #3f6386; --cxw-violet: #6b4f8a; } .cxw-page { font-family: var(--font-body, "EB Garamond", Georgia, serif); color: var(--cxw-text); } /* nav item ships hidden; the DM body class or codex-runtime reveals it */ .nav-item[data-page="workshop"] { display: none; } body.cxw-dm .nav-item[data-page="workshop"] { display: flex; } /* ── page header: gold serif + ornament ────────────────────────────────── */ .cxw-header .cxw-eyebrow { color: var(--cxw-crimson-line); letter-spacing: .22em; text-transform: uppercase; font-size: .66rem; font-weight: 700; } .cxw-title-line { font-family: var(--font-display, "Cinzel", Georgia, serif); color: var(--cxw-text); display: flex; align-items: center; gap: 16px; } .cxw-ornament { flex: 0 1 180px; height: 8px; position: relative; } .cxw-ornament::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--cxw-line-strong); } .cxw-ornament::after { content: "\2726"; position: absolute; left: 26px; top: 50%; transform: translateY(-54%); color: var(--cxw-gold); font-size: .6rem; background: transparent; text-shadow: -14px 0 0 var(--cxw-bg), 14px 0 0 var(--cxw-bg); } .cxw-page .page-description { color: var(--cxw-text-soft); } /* ── footer tagline ────────────────────────────────────────────────────── */ .cxw-tagline { margin: 42px 0 8px; display: flex; align-items: center; justify-content: center; gap: 18px; } .cxw-tagline em { font-family: var(--font-body, "EB Garamond", serif); font-style: italic; color: var(--cxw-gold); font-size: 1.02rem; letter-spacing: .04em; white-space: nowrap; } .cxw-tagline-rule { flex: 0 1 220px; height: 1px; background: var(--cxw-line-strong); position: relative; } .cxw-tagline-rule::before, .cxw-tagline-rule::after { content: "\2B29"; position: absolute; top: 50%; transform: translateY(-52%); color: var(--cxw-gold); font-size: .55rem; } .cxw-tagline-rule::before { left: -4px; } .cxw-tagline-rule::after { right: -4px; } /* ── subnav: dark pills, crimson active with gold edge ─────────────────── */ .cxw-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; } .cxw-subnav button { appearance: none; cursor: pointer; font-family: inherit; font-size: .84rem; letter-spacing: .02em; padding: 7px 14px; border-radius: 9px; background: var(--cxw-panel); color: var(--cxw-text-soft); border: 1px solid var(--cxw-line); transition: color .15s, border-color .15s, background .15s; } .cxw-subnav button:hover { color: var(--cxw-gold-bright); border-color: var(--cxw-line-strong); } .cxw-subnav button.active { background: linear-gradient(180deg, var(--cxw-crimson-hi), var(--cxw-crimson)); border-color: var(--cxw-crimson-line); color: #f0dfb8; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.4); } /* ── status line ───────────────────────────────────────────────────────── */ .cxw-status { min-height: 20px; font-size: .82rem; color: var(--cxw-text-soft); margin-bottom: 10px; } .cxw-status.ok { color: #9fc79b; } .cxw-status.error { color: #e08a8a; } /* ── buttons inside the Workshop ───────────────────────────────────────── */ .cxw-page .button, .cxw-confirm .button, .cxw-drawer .button { font-family: inherit; font-size: .84rem; letter-spacing: .02em; border-radius: 9px; padding: 8px 14px; cursor: pointer; background: var(--cxw-panel-2); color: var(--cxw-text); border: 1px solid var(--cxw-line-strong); transition: border-color .15s, background .15s, color .15s; } .cxw-page .button:hover, .cxw-confirm .button:hover, .cxw-drawer .button:hover { border-color: var(--cxw-gold); color: var(--cxw-gold-bright); } .cxw-page .button-primary, .cxw-confirm .button-primary, .cxw-drawer .button-primary { background: linear-gradient(180deg, var(--cxw-crimson-hi), var(--cxw-crimson)); border: 1px solid var(--cxw-crimson-line); outline: 1px solid rgba(201,162,74,.35); outline-offset: -3px; color: #f4e3ba; font-weight: 700; box-shadow: 0 3px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.09); } .cxw-page .button-primary:hover, .cxw-confirm .button-primary:hover, .cxw-drawer .button-primary:hover { background: linear-gradient(180deg, #9c2b31, var(--cxw-crimson-hi)); color: #ffefc4; } .cxw-page .button-danger, .cxw-confirm .button-danger, .cxw-drawer .button-danger { background: var(--cxw-crimson); border-color: var(--cxw-crimson-line); color: #f0d3d3; } .cxw-page .button:disabled, .cxw-confirm .button:disabled, .cxw-drawer .button:disabled { opacity: .5; cursor: default; } /* ── overview: dark gold-hairlined tool cards ──────────────────────────── */ .cxw-overview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } .cxw-tool-card { appearance: none; cursor: pointer; text-align: left; background: linear-gradient(180deg, var(--cxw-panel-2), var(--cxw-panel)); border: 1px solid var(--cxw-line); border-radius: 12px; padding: 16px 16px 13px; color: var(--cxw-text); font-family: inherit; transition: border-color .18s, transform .18s, box-shadow .18s; } .cxw-tool-card:hover { border-color: var(--cxw-line-strong); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.4); } .cxw-tool-mark { display: block; font-size: 1.3rem; color: var(--cxw-gold); margin-bottom: 8px; } .cxw-tool-card h3 { margin: 0 0 6px; font-family: var(--font-display, "Cinzel", serif); font-size: .92rem; letter-spacing: .02em; color: var(--cxw-gold-bright); } .cxw-tool-card p { margin: 0 0 10px; font-size: .8rem; line-height: 1.5; color: var(--cxw-text-soft); } .cxw-tool-count { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cxw-text-dim); border-top: 1px solid var(--cxw-line); padding-top: 8px; display: block; } .cxw-overview-note { margin: 18px 2px 0; font-size: .8rem; color: var(--cxw-text-dim); font-style: italic; } /* ── toolbar row ───────────────────────────────────────────────────────── */ .cxw-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; } .cxw-toolbar .cxw-search { flex: 1 1 220px; min-width: 0; background: var(--cxw-panel); color: var(--cxw-text); border: 1px solid var(--cxw-line); border-radius: 9px; padding: 8px 12px; font-family: inherit; font-size: .85rem; } .cxw-toolbar .cxw-search::placeholder { color: var(--cxw-text-dim); } .cxw-toolbar .cxw-search:focus { outline: none; border-color: var(--cxw-line-strong); } .cxw-toolbar select { background: var(--cxw-panel); color: var(--cxw-text); border: 1px solid var(--cxw-line); border-radius: 9px; padding: 8px 10px; font-family: inherit; font-size: .82rem; } .cxw-toolbar #cxw-new-btn { margin-left: auto; } /* popular tags row — colored chips like the mockups */ .cxw-tagbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 14px; } .cxw-tagbar:not(:empty)::before { content: "Popular tags \203A"; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cxw-gold); margin-right: 4px; } .cxw-tagchip { appearance: none; cursor: pointer; font-family: inherit; font-size: .7rem; letter-spacing: .03em; padding: 3px 10px; border-radius: 6px; background: var(--cxw-panel-2); border: 1px solid var(--cxw-line); color: #efe6d2; transition: filter .15s, box-shadow .15s; } .cxw-tagchip[class*="cxw-tg-"] { border-color: transparent; } .cxw-tagchip:hover { filter: brightness(1.2); } .cxw-tagchip.active { box-shadow: 0 0 0 1px var(--cxw-gold-bright); } /* the eight tag colors (dark chips, light text — as on the mockup cards) */ .cxw-tg-0 { background: #7c2d2d; } /* red — plot */ .cxw-tg-1 { background: #2d4a6b; } /* blue — npc */ .cxw-tg-2 { background: #2f5c39; } /* green — location */ .cxw-tg-3 { background: #5a3d7a; } /* violet— quest */ .cxw-tg-4 { background: #6b5a1f; } /* olive — lore */ .cxw-tg-5 { background: #3f5c5a; } /* teal — item */ .cxw-tg-6 { background: #6b3a1f; } /* rust — faction */ .cxw-tg-7 { background: #4a4357; } /* slate — encounter */ /* ── kanban boards ─────────────────────────────────────────────────────── */ .cxw-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x proximity; } .cxw-col { flex: 0 0 264px; max-width: 264px; max-height: 72vh; display: flex; flex-direction: column; scroll-snap-align: start; background: var(--cxw-panel); border: 1px solid var(--cxw-line); border-radius: 12px; } .cxw-col.cxw-drop-target { border-color: var(--cxw-gold); box-shadow: inset 0 0 0 1px var(--cxw-gold); } .cxw-col-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--cxw-line); background: linear-gradient(180deg, rgba(0,0,0,.28), transparent); border-radius: 12px 12px 0 0; } .cxw-col-title { flex: 1; font-family: var(--font-display, "Cinzel", serif); font-size: .74rem; letter-spacing: .05em; color: var(--cxw-gold-bright); } .cxw-col-count { flex: none; min-width: 20px; text-align: center; font-size: .68rem; font-weight: 700; color: var(--cxw-text); background: rgba(201,162,74,.14); border: 1px solid var(--cxw-line); border-radius: 6px; padding: 1px 6px; } .cxw-col-body { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; } .cxw-col-foot { padding: 8px 10px 10px; border-top: 1px solid var(--cxw-line); } .cxw-add-inline { width: 100%; appearance: none; cursor: pointer; font-family: inherit; background: transparent; border: 1px dashed var(--cxw-line-strong); border-radius: 8px; color: var(--cxw-text-soft); font-size: .78rem; padding: 7px 0; transition: color .15s, border-color .15s; } .cxw-add-inline:hover { color: var(--cxw-gold-bright); border-color: var(--cxw-gold); } /* ── THE PARCHMENT CARD ────────────────────────────────────────────────── */ .cxw-card { position: relative; background: radial-gradient(140% 90% at 18% 0%, rgba(255,250,235,.5), transparent 55%), linear-gradient(168deg, var(--cxw-parch) 0%, var(--cxw-parch-2) 100%); border: 1px solid var(--cxw-parch-line); border-radius: 6px; padding: 11px 12px 9px; color: var(--cxw-ink); cursor: grab; box-shadow: 0 1px 0 rgba(255,248,228,.55) inset, 0 0 0 1px rgba(43,33,21,.14) inset, 0 3px 8px rgba(0,0,0,.45); transition: transform .14s, box-shadow .14s; } .cxw-card:hover, .cxw-card:focus-visible { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,248,228,.55) inset, 0 0 0 1px rgba(43,33,21,.14) inset, 0 6px 14px rgba(0,0,0,.5); outline: none; } .cxw-card:focus-visible { box-shadow: 0 0 0 2px var(--cxw-gold), 0 6px 14px rgba(0,0,0,.5); } .cxw-card.cxw-dragging { opacity: .55; transform: rotate(1.2deg); cursor: grabbing; } .cxw-lib-card { cursor: pointer; } /* ink on parchment — every text role inside a card flips dark */ .cxw-card-title, .cxw-card .cxw-card-title { margin: 0; font-weight: 700; font-size: .9rem; line-height: 1.3; color: var(--cxw-ink); } h4.cxw-card-title { font-family: inherit; } .cxw-card-body, .cxw-card-excerpt { margin: 5px 0 0; font-size: .8rem; line-height: 1.45; color: var(--cxw-ink-soft); } p.cxw-card-excerpt { margin: 5px 0 0; } .cxw-card-top { display: flex; align-items: flex-start; gap: 7px; } .cxw-card-meta, .cxw-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; } .cxw-linkcount { margin-left: auto; font-size: .7rem; color: var(--cxw-ink-dim); } /* red pushpin */ .cxw-pin { color: #a1272c; } .cxw-card > .cxw-pin { position: absolute; top: -7px; right: 10px; font-size: .95rem; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); } /* colored status dot, top-right like the mockups */ .cxw-dot, .cxw-card-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; border: 1px solid rgba(43,33,21,.35); } .cxw-dot { position: absolute; top: 10px; right: 10px; } .cxw-card-dot { margin-top: 4px; } /* tags ON parchment: dark chips, light text */ .cxw-tag, .cxw-minitag { font-size: .64rem; letter-spacing: .04em; padding: 2px 8px; border-radius: 5px; background: #4a4357; color: #efe6d2; line-height: 1.5; } .cxw-minitag { background: rgba(43,33,21,.14); color: var(--cxw-ink-soft); } .cxw-minitag.cxw-tg-0, .cxw-minitag.cxw-tg-1, .cxw-minitag.cxw-tg-2, .cxw-minitag.cxw-tg-3, .cxw-minitag.cxw-tg-4, .cxw-minitag.cxw-tg-5, .cxw-minitag.cxw-tg-6, .cxw-minitag.cxw-tg-7 { color: #efe6d2; } .cxw-converted-tag { background: rgba(122,31,36,.16); color: #7a1f24; font-weight: 700; } /* status pills on parchment (vault / lore / sandbox) */ .cxw-status-pill { margin-left: auto; flex: none; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: 2px 9px; border-radius: 5px; background: rgba(43,33,21,.12); color: var(--cxw-ink-soft); border: 1px solid rgba(43,33,21,.2); } .cxw-status-available, .cxw-status-canon, .cxw-status-ready, .cxw-status-resolved, .cxw-status-achieved { background: #dfe8d5; color: #33552f; border-color: #a9bf9c; } .cxw-status-reserved, .cxw-status-draft, .cxw-status-underway, .cxw-status-advancing, .cxw-status-in-play { background: #efe3c2; color: #7a5c14; border-color: #cbb277; } .cxw-status-used, .cxw-status-fragment, .cxw-status-scrapped, .cxw-status-broken, .cxw-status-abandoned { background: #e2d9ea; color: #563a78; border-color: #b4a1cb; } /* library groups */ .cxw-lib-group { margin: 0 0 26px; } .cxw-lib-cat { margin: 0 0 10px; font-family: var(--font-display, "Cinzel", serif); font-size: .84rem; letter-spacing: .08em; color: var(--cxw-gold-bright); border-bottom: 1px solid var(--cxw-line); padding-bottom: 7px; display: flex; align-items: baseline; gap: 10px; } .cxw-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; } /* ── vault rows: parchment ledger strips ───────────────────────────────── */ .cxw-vault-rows { display: flex; flex-direction: column; gap: 7px; } .cxw-vault-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 6px; cursor: pointer; background: linear-gradient(168deg, var(--cxw-parch), var(--cxw-parch-2)); border: 1px solid var(--cxw-parch-line); color: var(--cxw-ink); box-shadow: 0 1px 0 rgba(255,248,228,.5) inset, 0 2px 6px rgba(0,0,0,.4); transition: transform .12s, box-shadow .12s; } .cxw-vault-row:hover, .cxw-vault-row:focus-visible { transform: translateY(-1px); outline: none; box-shadow: 0 1px 0 rgba(255,248,228,.5) inset, 0 4px 10px rgba(0,0,0,.5); } .cxw-vault-name { font-weight: 700; color: var(--cxw-ink); flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cxw-vault-meaning { flex: 1; min-width: 0; font-size: .82rem; font-style: italic; color: var(--cxw-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cxw-vault-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .cxw-vault-add input[type="text"] { flex: 1 1 180px; } /* quick-capture / vault-add: a parchment writing surface */ .cxw-capture { background: linear-gradient(168deg, var(--cxw-parch), var(--cxw-parch-2)); border: 1px solid var(--cxw-parch-line); border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; box-shadow: 0 1px 0 rgba(255,248,228,.5) inset, 0 3px 10px rgba(0,0,0,.45); } .cxw-capture input[type="text"], .cxw-capture textarea, .cxw-capture select { background: rgba(255,252,242,.55); color: var(--cxw-ink); border: 1px solid rgba(43,33,21,.28); border-radius: 7px; padding: 8px 10px; font-family: inherit; font-size: .88rem; } .cxw-capture input::placeholder, .cxw-capture textarea::placeholder { color: var(--cxw-ink-dim); } .cxw-capture .cxw-cap-title { width: 100%; box-sizing: border-box; margin-bottom: 8px; } .cxw-capture textarea { width: 100%; box-sizing: border-box; resize: vertical; } .cxw-cap-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; } .cxw-cap-save { margin-left: auto; } .cxw-listgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; } /* ── empty & loading ───────────────────────────────────────────────────── */ .cxw-empty { border: 1px dashed var(--cxw-line-strong); border-radius: 10px; padding: 26px 18px; text-align: center; color: var(--cxw-text-soft); font-size: .88rem; font-style: italic; } .cxw-loading { padding: 30px 6px; color: var(--cxw-text-soft); font-style: italic; } .cxw-hint { display: block; font-size: .74rem; color: var(--cxw-text-dim); margin-top: 5px; line-height: 1.5; } /* ── drawer (right editor panel — dark inspector, as in the mockups) ───── */ #cxw-drawer-wrap { position: fixed; inset: 0; z-index: 1200; } .cxw-drawer-backdrop { position: absolute; inset: 0; background: rgba(6,4,2,.6); } .cxw-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(470px, 100vw); display: flex; flex-direction: column; background: linear-gradient(180deg, #1e1812, var(--cxw-panel)); border-left: 1px solid var(--cxw-line-strong); box-shadow: -14px 0 40px rgba(0,0,0,.55); } .cxw-drawer-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--cxw-line); } .cxw-drawer-kicker { flex: 1; font-family: var(--font-display, "Cinzel", serif); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cxw-gold); } .cxw-drawer-close { appearance: none; cursor: pointer; width: 30px; height: 30px; border-radius: 8px; background: transparent; border: 1px solid var(--cxw-line); color: var(--cxw-text-soft); font-size: .8rem; line-height: 1; } .cxw-drawer-close:hover { color: var(--cxw-gold-bright); border-color: var(--cxw-line-strong); } .cxw-drawer-body { flex: 1; overflow-y: auto; padding: 16px; } .cxw-drawer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--cxw-line); background: rgba(0,0,0,.22); } .cxw-foot-spacer { flex: 1; } .cxw-dirty { font-size: .72rem; color: var(--cxw-text-dim); font-style: italic; } /* fields */ .cxw-field { margin-bottom: 14px; } .cxw-field > label { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cxw-gold); margin-bottom: 6px; } .cxw-field input[type="text"], .cxw-field textarea, .cxw-field select { width: 100%; box-sizing: border-box; background: #14100a; color: var(--cxw-text); border: 1px solid var(--cxw-line); border-radius: 8px; padding: 9px 11px; font-family: inherit; font-size: .88rem; line-height: 1.5; } .cxw-field textarea { resize: vertical; } .cxw-field input:focus, .cxw-field textarea:focus, .cxw-field select:focus { outline: none; border-color: var(--cxw-line-strong); } .cxw-field input::placeholder, .cxw-field textarea::placeholder { color: var(--cxw-text-dim); } /* chips inside the drawer */ .cxw-chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .cxw-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; padding: 3px 10px; border-radius: 999px; background: var(--cxw-panel-2); color: var(--cxw-text-soft); border: 1px solid var(--cxw-line); } .cxw-chip button { appearance: none; cursor: pointer; background: none; border: 0; color: var(--cxw-text-dim); font-size: .78rem; padding: 0; line-height: 1; } .cxw-chip button:hover { color: #e08a8a; } button.cxw-chip { font: inherit; cursor: pointer; } .cxw-chip-link { color: var(--cxw-gold-bright); border-color: var(--cxw-line-strong); } .cxw-chip-link:hover { background: rgba(201,162,74,.12); } .cxw-arch-toggle { cursor: pointer; } .cxw-arch-toggle input { accent-color: var(--cxw-gold); } /* color label radio row */ .cxw-colorrow { display: flex; gap: 8px; } .cxw-colorrow button { appearance: none; cursor: pointer; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--cxw-line); } .cxw-colorrow button[aria-checked="true"] { border-color: var(--cxw-gold-bright); box-shadow: 0 0 0 2px rgba(244,200,103,.3); } /* entity link picker */ .cxw-picker { position: relative; } .cxw-picker input { width: 100%; box-sizing: border-box; background: #14100a; color: var(--cxw-text); border: 1px solid var(--cxw-line); border-radius: 8px; padding: 9px 11px; font-family: inherit; font-size: .85rem; } .cxw-picker-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; background: var(--cxw-panel-2); border: 1px solid var(--cxw-line-strong); border-radius: 9px; overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,.55); } .cxw-picker-results button { display: block; width: 100%; text-align: left; appearance: none; cursor: pointer; background: none; border: 0; border-bottom: 1px solid var(--cxw-line); color: var(--cxw-text); font-family: inherit; font-size: .82rem; padding: 9px 12px; } .cxw-picker-results button:last-child { border-bottom: 0; } .cxw-picker-results button:hover { background: rgba(201,162,74,.1); } .cxw-picker-type { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cxw-gold); margin-right: 6px; } .cxw-picker-results .cxw-picker-none { padding: 10px 12px; font-size: .8rem; color: var(--cxw-text-dim); font-style: italic; } /* meta grid */ .cxw-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: .76rem; color: var(--cxw-text-dim); margin: 4px 0 0; } .cxw-meta-grid dt { text-transform: uppercase; letter-spacing: .1em; font-size: .62rem; color: var(--cxw-gold); } .cxw-meta-grid dd { margin: 2px 0 0; color: var(--cxw-text-soft); } /* ── modals ────────────────────────────────────────────────────────────── */ .cxw-confirm-backdrop { position: fixed; inset: 0; z-index: 1300; background: rgba(6,4,2,.66); display: flex; align-items: center; justify-content: center; padding: 20px; } .cxw-confirm { width: min(430px, 100%); background: linear-gradient(180deg, #1f1913, var(--cxw-panel)); border: 1px solid var(--cxw-line-strong); border-radius: 12px; padding: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.6); } .cxw-confirm h3 { margin: 0 0 8px; font-family: var(--font-display, "Cinzel", serif); font-size: .95rem; color: var(--cxw-gold-bright); } .cxw-confirm p { margin: 0 0 16px; font-size: .86rem; color: var(--cxw-text-soft); line-height: 1.55; } .cxw-confirm .cxw-confirm-actions { display: flex; gap: 8px; justify-content: flex-end; } .cxw-confirm .cxw-field input, .cxw-confirm .cxw-field textarea { background: #14100a; color: var(--cxw-text); border: 1px solid var(--cxw-line); border-radius: 8px; width: 100%; box-sizing: border-box; padding: 9px 11px; font-family: inherit; } /* convert modal: preview is a real parchment page */ .cxw-convert { width: min(580px, 100%); max-height: 88vh; overflow: auto; } .cxw-radio { display: flex; align-items: baseline; gap: 8px; font-size: .85rem; color: var(--cxw-text); padding: 3px 0; cursor: pointer; } .cxw-radio input { accent-color: var(--cxw-gold); flex: none; } .cxw-secret-row { color: var(--cxw-text-soft); } .cxw-secret-mark { font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cxw-crimson-line); font-weight: 700; } .cxw-secret-warning { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; font-size: .82rem; border: 1px solid var(--cxw-crimson-line); background: rgba(140,36,41,.18); color: #f0d9b8; } .cxw-cv-preview { border: 1px solid var(--cxw-parch-line); border-radius: 6px; padding: 14px 16px; background: linear-gradient(168deg, var(--cxw-parch), var(--cxw-parch-2)); color: var(--cxw-ink); max-height: 230px; overflow: auto; font-size: .84rem; line-height: 1.55; box-shadow: 0 1px 0 rgba(255,248,228,.5) inset, 0 3px 8px rgba(0,0,0,.4); } .cxw-cv-preview h2 { margin: 0 0 8px; font-family: var(--font-display, "Cinzel", serif); font-size: 1rem; color: var(--cxw-ink); } .cxw-cv-preview h3 { margin: 12px 0 4px; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #6d1a1f; } .cxw-cv-preview p, .cxw-cv-preview li { margin: 0 0 8px; color: var(--cxw-ink-soft); } .cxw-cv-preview ol, .cxw-cv-preview ul { margin: 0 0 8px; padding-left: 20px; } /* ── clue / step / branch editors (parchment slips in the drawer) ──────── */ .cxw-clue-row, .cxw-branch-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; } .cxw-clue-state { flex: none; width: 108px; text-align: left; font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 8px 8px; border-radius: 7px; cursor: pointer; font-family: inherit; background: var(--cxw-panel-2); color: var(--cxw-text-soft); border: 1px solid var(--cxw-line); transition: border-color .15s, color .15s; } .cxw-clue-state:hover { border-color: var(--cxw-line-strong); } .cxw-clue-planted, .cxw-step-underway { color: var(--cxw-text); border-color: var(--cxw-line-strong); } .cxw-clue-found, .cxw-step-done { color: var(--cxw-gold-bright); border-color: var(--cxw-gold); } .cxw-clue-connected { color: var(--cxw-gold-bright); border-color: var(--cxw-gold-bright); background: rgba(201,162,74,.12); } .cxw-clue-row input, .cxw-branch-row input { background: #14100a; color: var(--cxw-text); border: 1px solid var(--cxw-line); border-radius: 7px; padding: 8px 10px; font-family: inherit; font-size: .84rem; } .cxw-clue-row .cxw-clue-text { flex: 2 1 120px; min-width: 0; } .cxw-clue-row .cxw-clue-where { flex: 1 1 80px; min-width: 0; } .cxw-branch-row input { flex: 1 1 100px; min-width: 0; } .cxw-clue-del { flex: none; appearance: none; background: none; border: 0; cursor: pointer; color: var(--cxw-text-dim); font-size: .85rem; padding: 4px; } .cxw-clue-del:hover { color: #e08a8a; } .cxw-branch-likely { flex: none; appearance: none; cursor: pointer; background: var(--cxw-panel-2); border: 1px solid var(--cxw-line); border-radius: 7px; color: var(--cxw-text-dim); font-size: .8rem; padding: 6px 9px; } .cxw-branch-likely.active { color: var(--cxw-gold-bright); border-color: var(--cxw-gold); } /* clue / step progress on cards (drawn ON parchment) */ .cxw-clue-progress { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; } .cxw-clue-bar { flex: 1; height: 6px; border-radius: 999px; overflow: hidden; background: rgba(43,33,21,.18); } .cxw-clue-fill { display: block; height: 100%; background: linear-gradient(90deg, #8c6a1f, #c9a24a); border-radius: 999px; transition: width .25s; } .cxw-clue-nums { flex: none; font-size: .7rem; font-weight: 700; color: var(--cxw-ink-soft); } .cxw-three-clue { margin: 6px 0 2px; font-size: .72rem; line-height: 1.45; color: #7a1f24; font-weight: 600; } .cxw-agenda-next { margin: 4px 0 2px; font-size: .76rem; font-style: italic; color: var(--cxw-ink-soft); } /* ── random tables ─────────────────────────────────────────────────────── */ .cxw-table-card .cxw-roll-btn { font-size: .74rem; padding: 5px 11px; background: rgba(43,33,21,.1); color: var(--cxw-ink); border: 1px solid rgba(43,33,21,.3); } .cxw-table-card .cxw-roll-btn:hover { color: #6d1a1f; border-color: #6d1a1f; } .cxw-roll-result { margin: 8px 0 2px; padding: 8px 10px; border-radius: 6px; font-size: .82rem; line-height: 1.5; background: rgba(255,252,240,.6); border: 1px dashed rgba(43,33,21,.35); color: var(--cxw-ink); } .cxw-roll-die { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 4px; margin-right: 5px; border-radius: 5px; font-size: .72rem; font-weight: 800; background: var(--cxw-crimson); color: #f4e3ba; border: 1px solid var(--cxw-crimson-line); } /* ── session idea generator ────────────────────────────────────────────── */ .cxw-gen-panel { max-width: 780px; } .cxw-gen-panel > .button-primary { margin: 6px 0 14px; } .cxw-gen-idea { border-radius: 8px; padding: 6px 18px 16px; background: linear-gradient(168deg, var(--cxw-parch), var(--cxw-parch-2)); border: 1px solid var(--cxw-parch-line); color: var(--cxw-ink); box-shadow: 0 1px 0 rgba(255,248,228,.5) inset, 0 4px 14px rgba(0,0,0,.5); } .cxw-gen-row { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(43,33,21,.16); } .cxw-gen-row:last-of-type { border-bottom: 0; } .cxw-gen-label { flex: none; width: 132px; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #6d1a1f; } .cxw-gen-text { flex: 1; font-size: .92rem; line-height: 1.55; color: var(--cxw-ink); } .cxw-gen-reroll { flex: none; appearance: none; cursor: pointer; background: none; border: 1px solid rgba(43,33,21,.3); border-radius: 6px; color: var(--cxw-ink-soft); font-size: .85rem; padding: 2px 8px; transition: color .15s, border-color .15s; } .cxw-gen-reroll:hover { color: #6d1a1f; border-color: #6d1a1f; } .cxw-gen-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; } /* ── question prompts ──────────────────────────────────────────────────── */ .cxw-prompt-sets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .cxw-prompt-card { max-width: 740px; border-radius: 8px; padding: 22px 24px; background: linear-gradient(168deg, var(--cxw-parch), var(--cxw-parch-2)); border: 1px solid var(--cxw-parch-line); color: var(--cxw-ink); box-shadow: 0 1px 0 rgba(255,248,228,.5) inset, 0 4px 14px rgba(0,0,0,.5); } .cxw-prompt-q { margin: 0 0 6px; font-family: var(--font-display, "Cinzel", serif); font-size: 1.08rem; line-height: 1.5; color: var(--cxw-ink); } .cxw-prompt-sets .cxw-tagchip { font-size: .78rem; padding: 6px 13px; border-radius: 8px; } /* ── timeline sandbox: parchment event strips ──────────────────────────── */ .cxw-sandbox-list { display: flex; flex-direction: column; gap: 8px; max-width: 880px; } .cxw-sandbox-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 6px; cursor: pointer; background: linear-gradient(168deg, var(--cxw-parch), var(--cxw-parch-2)); border: 1px solid var(--cxw-parch-line); color: var(--cxw-ink); box-shadow: 0 1px 0 rgba(255,248,228,.5) inset, 0 2px 7px rgba(0,0,0,.4); transition: transform .12s, box-shadow .12s; } .cxw-sandbox-row:hover, .cxw-sandbox-row:focus-visible { transform: translateY(-1px); outline: none; box-shadow: 0 1px 0 rgba(255,248,228,.5) inset, 0 5px 12px rgba(0,0,0,.5); } .cxw-sb-reorder { display: flex; flex-direction: column; gap: 2px; flex: none; } .cxw-sb-reorder button { appearance: none; cursor: pointer; background: rgba(43,33,21,.08); border: 1px solid rgba(43,33,21,.28); border-radius: 4px; color: var(--cxw-ink-soft); font-size: .52rem; line-height: 1; padding: 3px 6px; } .cxw-sb-reorder button:hover:not(:disabled) { color: #6d1a1f; border-color: #6d1a1f; } .cxw-sb-reorder button:disabled { opacity: .3; cursor: default; } .cxw-sb-when { flex: none; width: 132px; font-size: .74rem; font-weight: 700; color: #6d1a1f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cxw-sb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .cxw-sb-main strong { color: var(--cxw-ink); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cxw-sb-excerpt { font-size: .76rem; color: var(--cxw-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── connection web (6B: full spec) ────────────────────────────────────── */ .cxw-web-toolbar { align-items: stretch; } .cxw-web-picker { flex: 1 1 220px; position: relative; } .cxw-web-picker input { width: 100%; box-sizing: border-box; background: var(--cxw-panel); color: var(--cxw-text); border: 1px solid var(--cxw-line); border-radius: 9px; padding: 8px 12px; font-family: inherit; font-size: .84rem; } .cxw-web-typebar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 8px; } .cxw-web-typebar .cxw-tagchip { opacity: .45; } .cxw-web-typebar .cxw-tagchip.active { opacity: 1; } .cxw-web-typebar .cxw-col-count { margin-left: 4px; } .cxw-web-frame { display: flex; gap: 12px; align-items: stretch; } .cxw-web-stage { position: relative; overflow: hidden; flex: 1; min-width: 0; min-height: 480px; height: 64vh; touch-action: none; border: 1px solid var(--cxw-line-strong); border-radius: 12px; background: radial-gradient(circle at 50% 42%, rgba(201,162,74,.05), transparent 55%), radial-gradient(rgba(201,162,74,.12) 1px, transparent 1px) 0 0 / 30px 30px, #100d08; cursor: grab; } .cxw-web-stage:active { cursor: grabbing; } .cxw-web-world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; } .cxw-web-svg { position: absolute; left: 0; top: 0; width: 4000px; height: 3000px; overflow: visible; } .cxw-web-node { position: absolute; width: 150px; min-height: 44px; box-sizing: border-box; padding: 8px 11px 7px; border-radius: 8px; cursor: grab; user-select: none; touch-action: none; background: linear-gradient(168deg, var(--cxw-parch), var(--cxw-parch-2)); border: 1px solid var(--cxw-parch-line); box-shadow: 0 1px 0 rgba(255,248,228,.5) inset, 0 3px 9px rgba(0,0,0,.55); transition: opacity .18s, box-shadow .18s; } .cxw-web-node:active { cursor: grabbing; } .cxw-web-node:focus-visible { outline: 2px solid var(--cxw-gold-bright); outline-offset: 1px; } .cxw-web-linkfrom { border-color: var(--cxw-gold-bright); box-shadow: 0 0 0 2px rgba(244,200,103,.5), 0 3px 9px rgba(0,0,0,.55); } .cxw-web-selected { border-color: var(--cxw-crimson-line); box-shadow: 0 0 0 2px rgba(168,50,54,.55), 0 3px 9px rgba(0,0,0,.55); } .cxw-web-hit { box-shadow: 0 0 0 2px var(--cxw-gold-bright), 0 3px 9px rgba(0,0,0,.55); } .cxw-web-dimmed { opacity: .35; } .cxw-web-filtered { opacity: .12; pointer-events: none; } body.cxw-linking .cxw-web-node { cursor: crosshair; } .cxw-web-label { display: block; font-size: .8rem; font-weight: 700; color: var(--cxw-ink); line-height: 1.3; word-break: break-word; } .cxw-web-type { display: block; font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #6d1a1f; margin-top: 2px; } /* zoom toolbar (left, like the mockup) */ .cxw-web-zoombar { position: absolute; left: 12px; top: 12px; z-index: 20; display: flex; flex-direction: column; gap: 6px; } .cxw-web-zoombar button { width: 34px; height: 34px; appearance: none; cursor: pointer; background: var(--cxw-panel-2); color: var(--cxw-text); border: 1px solid var(--cxw-line-strong); border-radius: 8px; font-size: .95rem; line-height: 1; font-family: inherit; } .cxw-web-zoombar button:hover { color: var(--cxw-gold-bright); border-color: var(--cxw-gold); } /* legend (bottom-left, like the mockup) */ .cxw-web-legend { position: absolute; left: 12px; bottom: 12px; z-index: 20; display: flex; flex-direction: column; gap: 4px; background: rgba(19,16,9,.88); border: 1px solid var(--cxw-line); border-radius: 9px; padding: 9px 12px; font-size: .66rem; letter-spacing: .04em; color: var(--cxw-text-soft); } .cxw-web-legend span { display: flex; align-items: center; gap: 7px; } .cxw-web-legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; } /* minimap (bottom-right, like the mockup) */ .cxw-web-minimap { position: absolute; right: 12px; bottom: 12px; z-index: 20; cursor: pointer; border: 1px solid var(--cxw-line-strong); border-radius: 8px; } /* inspector (right panel, like the mockup) */ .cxw-web-inspector { flex: 0 0 260px; max-width: 260px; overflow-y: auto; background: linear-gradient(180deg, #1e1812, var(--cxw-panel)); border: 1px solid var(--cxw-line-strong); border-radius: 12px; } .cxw-ins-body { padding: 12px 14px; } .cxw-ins-title { margin: 0 0 8px; font-family: var(--font-display, "Cinzel", serif); font-size: .98rem; color: var(--cxw-gold-bright); } .cxw-web-inspector .cxw-status-pill { display: inline-block; margin-left: 0; background: rgba(201,162,74,.12); color: var(--cxw-text-soft); border-color: var(--cxw-line); } .cxw-ins-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; } .cxw-ins-actions .button { font-size: .74rem; padding: 6px 10px; } .cxw-ins-h { margin: 16px 0 8px; font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cxw-gold); border-top: 1px solid var(--cxw-line); padding-top: 12px; } .cxw-ins-conns { display: flex; flex-direction: column; gap: 6px; } .cxw-ins-conn { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; appearance: none; cursor: pointer; font-family: inherit; background: var(--cxw-panel-2); border: 1px solid var(--cxw-line); border-radius: 8px; padding: 8px 10px; color: var(--cxw-text); } .cxw-ins-conn:hover { border-color: var(--cxw-line-strong); } .cxw-ins-conn i { flex: none; width: 4px; height: 26px; border-radius: 2px; } .cxw-ins-conn-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .cxw-ins-conn-main strong { font-size: .8rem; color: var(--cxw-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cxw-ins-conn-main em { font-size: .68rem; font-style: normal; color: var(--cxw-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cxw-ins-conn-edit { flex: none; color: var(--cxw-text-dim); font-size: .78rem; padding: 3px; } .cxw-ins-conn-edit:hover { color: var(--cxw-gold-bright); } /* ── responsive ────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .cxw-drawer { width: 100vw; border-left: 0; } .cxw-col { flex-basis: 82vw; max-width: 82vw; } } @media (max-width: 640px) { .cxw-subnav { gap: 6px; } .cxw-subnav button { font-size: .76rem; padding: 6px 11px; } .cxw-toolbar .cxw-search { flex-basis: 100%; } .cxw-capture .cxw-cap-save { width: 100%; margin-left: 0; } .cxw-listgrid, .cxw-lib-grid { grid-template-columns: 1fr; } .cxw-vault-name { max-width: 55%; } .cxw-vault-meaning { display: none; } .cxw-clue-row, .cxw-branch-row { flex-wrap: wrap; } .cxw-clue-row .cxw-clue-text { flex-basis: 100%; order: -1; } .cxw-branch-row input { flex-basis: 100%; } .cxw-gen-row { flex-wrap: wrap; } .cxw-gen-label { width: auto; flex-basis: 100%; } .cxw-sb-when { display: none; } .cxw-ornament { display: none; } .cxw-tagline-rule { flex-basis: 60px; } } /* ── v69.6 · attachments ────────────────────────────────────────────────── */ .cxw-att-row { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; } .cxw-att-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex: none; border: 1px solid var(--cxw-line-strong); background: #14100a; } .cxw-att-icon { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1rem; border: 1px solid var(--cxw-line); border-radius: 6px; } .cxw-att-name { flex: 1; min-width: 0; font-size: .82rem; color: var(--cxw-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cxw-att-row .cxw-chip-link { flex: none; text-decoration: none; } /* ── v69.6 · global quick capture ───────────────────────────────────────── */ .cxw-qc-btn { position: fixed; right: 22px; bottom: 22px; z-index: 1100; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; font-size: 1.25rem; line-height: 1; background: linear-gradient(180deg, var(--cxw-crimson-hi, #8c2429), var(--cxw-crimson, #6d1a1f)); border: 1px solid var(--cxw-crimson-line, #a83236); outline: 1px solid rgba(201,162,74,.4); outline-offset: -3px; color: #f4e3ba; box-shadow: 0 5px 16px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.1); transition: transform .15s, box-shadow .15s; } .cxw-qc-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1); } .cxw-qc { width: min(460px, 100%); } @media (max-width: 640px) { .cxw-qc-btn { right: 14px; bottom: 74px; width: 46px; height: 46px; } } /* 6B responsive: inspector becomes a bottom sheet on narrow screens */ @media (max-width: 900px) { .cxw-web-frame { flex-direction: column; } .cxw-web-inspector { flex: none; max-width: none; max-height: 40vh; } .cxw-web-stage { height: 52vh; } .cxw-web-legend { display: none; } } /* ── v69.8 · 6C per-tool depth ──────────────────────────────────────────── */ /* clue blocks (mystery) */ .cxw-clue-block { border: 1px solid var(--cxw-line); border-radius: 9px; padding: 9px 10px; margin-bottom: 8px; background: rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 6px; } .cxw-clue-block-top { display: flex; gap: 6px; align-items: center; } .cxw-clue-block-top select { flex: 1 1 90px; min-width: 0; background: #14100a; color: var(--cxw-text); border: 1px solid var(--cxw-line); border-radius: 7px; padding: 6px 8px; font-family: inherit; font-size: .76rem; } .cxw-clue-block input { width: 100%; box-sizing: border-box; background: #14100a; color: var(--cxw-text); border: 1px solid var(--cxw-line); border-radius: 7px; padding: 7px 9px; font-family: inherit; font-size: .82rem; } .cxw-clue-block-row { display: flex; gap: 6px; } .cxw-clue-block-row input { flex: 1 1 60px; min-width: 0; } /* guided prompts (lore) */ .cxw-guided { border: 1px solid var(--cxw-line); border-radius: 9px; padding: 0 12px 4px; margin-bottom: 14px; } .cxw-guided summary { cursor: pointer; padding: 10px 0; font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cxw-gold); display: flex; align-items: center; gap: 8px; } .cxw-guided[open] summary { border-bottom: 1px solid var(--cxw-line); margin-bottom: 12px; } /* progress clocks (agenda) */ .cxw-clock-sizes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .cxw-clock-row { display: flex; align-items: center; gap: 8px; } .cxw-clock-row .button { padding: 4px 10px; font-size: .85rem; } .cxw-clock-pips { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; } .cxw-clock-pip { width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--cxw-line-strong); background: rgba(0,0,0,.3); } .cxw-clock-pip.filled { background: linear-gradient(180deg, var(--cxw-gold-bright), var(--cxw-gold)); border-color: var(--cxw-gold); } .cxw-clock-count { font-size: .72rem; font-weight: 700; color: var(--cxw-text-soft); } .cxw-clock-mini { margin: 8px 0 2px; } .cxw-clock-mini .cxw-clock-pip { width: 11px; height: 11px; border-color: rgba(43,33,21,.4); background: rgba(43,33,21,.14); } .cxw-clock-mini .cxw-clock-pip.filled { background: linear-gradient(180deg, #8c6a1f, #c9a24a); border-color: #8c6a1f; } .cxw-clock-mini .cxw-clock-count { color: var(--cxw-ink-soft); } /* branch planner (scenario) */ .cxw-branch-card { border: 1px solid var(--cxw-line); border-radius: 9px; padding: 9px 10px 10px; margin-bottom: 10px; background: rgba(0,0,0,.18); } .cxw-branch-head { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; } .cxw-branch-head input { flex: 1; min-width: 0; background: #14100a; color: var(--cxw-gold-bright); font-weight: 700; border: 1px solid var(--cxw-line); border-radius: 7px; padding: 7px 9px; font-family: inherit; font-size: .84rem; } .cxw-branch-step { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 7px; } .cxw-branch-step-n { flex: none; width: 20px; height: 20px; margin-top: 4px; display: flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 800; border-radius: 5px; background: var(--cxw-crimson); color: #f4e3ba; border: 1px solid var(--cxw-crimson-line); } .cxw-branch-step-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .cxw-branch-step-main input { width: 100%; box-sizing: border-box; background: #14100a; color: var(--cxw-text); border: 1px solid var(--cxw-line); border-radius: 7px; padding: 7px 9px; font-family: inherit; font-size: .82rem; } .cxw-branch-step-row { display: flex; gap: 5px; } .cxw-branch-step-row input:first-child { flex: 0 1 130px; } .cxw-branch-step-row input:last-child { flex: 1; } .cxw-branch-step-ctl { flex: none; display: flex; flex-direction: column; gap: 2px; } .cxw-branch-step-ctl button { appearance: none; cursor: pointer; background: none; border: 1px solid var(--cxw-line); border-radius: 4px; color: var(--cxw-text-dim); font-size: .5rem; line-height: 1; padding: 3px 5px; } .cxw-branch-step-ctl button:hover:not(:disabled) { color: var(--cxw-gold-bright); border-color: var(--cxw-gold); } .cxw-branch-step-ctl button:disabled { opacity: .3; cursor: default; } .cxw-branch-card .cxw-add-inline { margin-top: 2px; } /* world-state trackers */ .cxw-ws-row { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; } .cxw-ws-row input[type="text"] { flex: 0 1 120px; min-width: 0; background: #14100a; color: var(--cxw-text); border: 1px solid var(--cxw-line); border-radius: 7px; padding: 6px 8px; font-family: inherit; font-size: .8rem; } .cxw-ws-row .button { padding: 3px 9px; font-size: .82rem; } .cxw-ws-bar { flex: 1; } /* timeline type badge on sandbox rows */ .cxw-ttype-tag { flex: none; background: rgba(109,26,31,.14); color: #6d1a1f; font-weight: 700; } /* roll panel (table drawer) */ .cxw-roll-n { width: 62px; background: #14100a; color: var(--cxw-text); border: 1px solid var(--cxw-line); border-radius: 7px; padding: 7px 8px; font-family: inherit; } .cxw-roll-results { margin: 10px 0 8px; padding-left: 22px; font-size: .84rem; line-height: 1.6; color: var(--cxw-text); } .cxw-roll-results:empty { display: none; } /* generator inputs + locks + sources */ .cxw-gen-inputs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 12px; margin: 8px 0 12px; } .cxw-gen-inputs label { display: flex; flex-direction: column; gap: 4px; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cxw-gold); } .cxw-gen-inputs select, .cxw-gen-inputs input { background: var(--cxw-panel); color: var(--cxw-text); border: 1px solid var(--cxw-line); border-radius: 8px; padding: 8px 10px; font-family: var(--font-body, serif); font-size: .84rem; letter-spacing: normal; text-transform: none; font-weight: 400; } .cxw-gen-num { flex: none; width: 20px; height: 20px; margin-top: 2px; display: flex; align-items: center; justify-content: center; font-size: .66rem; font-weight: 800; border-radius: 50%; background: #2b2115; color: #e9dcbd; } .cxw-gen-lock { flex: none; appearance: none; cursor: pointer; background: none; border: 1px solid rgba(43,33,21,.3); border-radius: 6px; font-size: .72rem; padding: 2px 6px; color: var(--cxw-ink-soft); } .cxw-gen-lock.active { border-color: #6d1a1f; background: rgba(109,26,31,.1); } .cxw-gen-sources { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(43,33,21,.16); } .cxw-gen-sources-h { font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6d1a1f; } .cxw-gen-sources .cxw-chip { background: rgba(43,33,21,.1); color: var(--cxw-ink-soft); border-color: rgba(43,33,21,.28); } @media (max-width: 640px) { .cxw-clue-block-row { flex-wrap: wrap; } .cxw-branch-step-row { flex-wrap: wrap; } .cxw-branch-step-row input:first-child { flex-basis: 100%; } .cxw-gen-inputs { grid-template-columns: 1fr; } } /* ── v70.0 · workshop close-out ─────────────────────────────────────────── */ .cxw-pm-list { max-height: 44vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .cxw-pm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--cxw-line); border-radius: 8px; background: var(--cxw-panel-2); font-size: .82rem; color: var(--cxw-text); } .cxw-pm-row.off span { opacity: .4; text-decoration: line-through; } .cxw-pm-row.custom { border-color: var(--cxw-gold); } .cxw-pm-row .cxw-chip { flex: none; cursor: pointer; } .cxw-sb-grouphead { margin: 18px 0 8px; } /* ── v70.1 · drawer view mode ───────────────────────────────────────────── */ .cxw-drawer-view .cxw-drawer-body { padding-top: 6px; } .cxw-vw-title { margin: 8px 0 10px; font-family: var(--font-display, "Cinzel", serif); font-size: 1.25rem; color: var(--cxw-gold-bright); line-height: 1.3; } .cxw-vw-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 16px; } .cxw-vw-block { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--cxw-line); } .cxw-vw-block:last-of-type { border-bottom: 0; } .cxw-vw-block h4 { margin: 0 0 6px; font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cxw-gold); } .cxw-vw-block p { margin: 0 0 8px; font-size: .88rem; line-height: 1.65; color: var(--cxw-text); } .cxw-vw-clues, .cxw-vw-steps { margin: 4px 0 0; padding-left: 20px; font-size: .85rem; line-height: 1.7; color: var(--cxw-text); } .cxw-vw-clues li { margin-bottom: 6px; list-style: none; margin-left: -20px; } .cxw-vw-clues .cxw-status-pill { margin: 0 6px 0 0; } .cxw-vw-steps li.done { opacity: .6; text-decoration: line-through; } .cxw-vw-steps li.underway { color: var(--cxw-gold-bright); } .cxw-vw-ws-name { flex: 0 1 120px; font-size: .8rem; color: var(--cxw-text); } /* ── v70.2 · card previews ──────────────────────────────────────────────── */ .cxw-card-more { margin: 7px 0 2px; display: flex; flex-direction: column; gap: 4px; } .cxw-more-row { display: flex; gap: 7px; align-items: baseline; font-size: .76rem; line-height: 1.45; } .cxw-more-l { flex: none; font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6d1a1f; padding-top: 1px; } .cxw-more-t { color: var(--cxw-ink-soft); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cxw-sb-preview em { font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6d1a1f; }