/* ============================================================
Shadowrun Character Manager — Phase 1
Aesthetic: neon-noir terminal. Dark slate, electric amber
accent, mono for data, a humanist sans for chrome.
============================================================ */
/* Fonts: JetBrains Mono for data/tabular content, Space Grotesk
for UI chrome. Both load from Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
/* ============================================================
Default palette — Holo.
Cinematic holographic UI. Magenta for active/primary signal,
teal for data and ambient surfaces. Orange alerts, mint positives,
red for damage/danger. This is what loads if no theme is stored.
============================================================ */
:root {
/* Deep cool-black surfaces */
--bg-deep: #06090c;
--bg-base: #0a0f14;
--bg-surface: #0f1822;
--bg-raised: #142030;
--bg-hover: #1a2a3e;
--bg-card: var(--bg-surface);
/* Borders — teal-tinted, slightly stronger than default for
the cards-have-edges requirement from the hybrid brief. */
--border-subtle: rgba(122, 216, 224, 0.10);
--border-base: rgba(122, 216, 224, 0.22);
--border-strong: rgba(122, 216, 224, 0.45);
/* Text — cool whites and blue-greys, no warm undertones */
--text-primary: #e8f2f5;
--text-secondary: #a5c9d0;
--text-muted: #6f95a0;
--text-faint: #4d6570;
/* Primary accent — magenta. Drives chrome: active nav, buttons,
brand, section eyebrows, card title markers, focus rings. */
--accent: #ff5aa0;
--accent-dim: #8a3260;
--accent-glow: rgba(255, 90, 160, 0.25);
/* Secondary accent — teal. Reassigned from its usual "brighter
primary" role to mean "data / values". Most data numerics
use --accent-bright. */
--accent-bright: #7ad8e0;
/* Semantic colors — three-way split as designed in preview */
--good: #4cf0a8; /* mint — successful commits, budget-under */
--warn: #ff8c50; /* orange — over-cap, over-budget, alerts */
--bad: #ff4060; /* red — destructive, damage, lost contacts */
--info: #8dc4ff; /* sky — info banners, matrix accents */
/* Theme flourishes (toggled by theme-specific overrides below). */
--flair-clip-data: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
--flair-clip-container: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
--flair-card-bg: rgba(122, 216, 224, 0.035);
--flair-card-blur: 2px;
--flair-scanlines: rgba(122, 216, 224, 0.020);
--flair-focus-glow: 0 0 0 3px var(--accent-glow), 0 0 14px rgba(255, 90, 160, 0.2);
--flair-nav-active-width: 2px;
/* Topbar pattern — Matrix lattice in teal with magenta junctions. */
--flair-topbar-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='34' viewBox='0 0 50 34'%3E%3Cg stroke='%237ad8e0' fill='none'%3E%3Cpath d='M0 0L50 0M0 17L50 17M0 34L50 34M0 0L0 34M25 0L25 34M50 0L50 34' stroke-width='0.6' stroke-opacity='0.20'/%3E%3Cpath d='M6 17L18 17M32 0L32 10M40 24L46 24' stroke-width='1.2' stroke-opacity='0.55' stroke-dasharray='2 2'/%3E%3C/g%3E%3Ccircle cx='0' cy='0' r='1.3' fill='%237ad8e0' fill-opacity='0.75'/%3E%3Ccircle cx='25' cy='17' r='1.3' fill='%237ad8e0' fill-opacity='0.75'/%3E%3Ccircle cx='50' cy='34' r='1.3' fill='%237ad8e0' fill-opacity='0.75'/%3E%3Ccircle cx='0' cy='34' r='1' fill='%23ff5aa0' fill-opacity='0.8'/%3E%3Ccircle cx='38' cy='8' r='1' fill='%23ff5aa0' fill-opacity='0.7'/%3E%3C/svg%3E");
--flair-topbar-wash: rgba(6, 9, 12, 0.85);
--flair-topbar-wash-mid: rgba(6, 9, 12, 0.1);
/* Type */
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
--font-sans: 'Space Grotesk', system-ui, sans-serif;
/* Motion */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}
/* ============================================================
Amber Terminal — the original dark-amber cyberpunk terminal.
Keeps the full Holo chrome (translucent cards, clipped corners,
magenta-gets-swapped-for-amber focus glow, etc.) just recolored.
============================================================ */
:root[data-theme="amber"] {
/* Warmer dark surfaces */
--bg-deep: #0a0d12;
--bg-base: #0f1318;
--bg-surface: #161b22;
--bg-raised: #1c2330;
--bg-hover: #232b3a;
--bg-card: var(--bg-surface);
/* Borders — amber-tinted */
--border-subtle: rgba(240, 168, 66, 0.10);
--border-base: rgba(240, 168, 66, 0.22);
--border-strong: rgba(240, 168, 66, 0.45);
/* Warm text */
--text-primary: #e8ecf1;
--text-secondary: #8b96a8;
--text-muted: #5a6678;
--text-faint: #3d4756;
/* Amber is monochromatic — both primary and data accent are amber.
The single-color identity is its whole vibe. */
--accent: #f0a842;
--accent-bright: #ffc266;
--accent-dim: #8a5e22;
--accent-glow: rgba(240, 168, 66, 0.22);
/* Semantics */
--good: #6dd58c;
--warn: #f0a842; /* same as accent — monochromatic approach */
--bad: #e35d6a;
--info: #6aa9e9;
/* Amber-tinted card/scanline/focus-glow */
--flair-card-bg: rgba(240, 168, 66, 0.025);
--flair-scanlines: rgba(240, 168, 66, 0.015);
--flair-focus-glow: 0 0 0 3px var(--accent-glow), 0 0 14px rgba(240, 168, 66, 0.20);
/* Amber-tinted Matrix lattice. Same geometry, amber thread + bright-amber junctions. */
--flair-topbar-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='34' viewBox='0 0 50 34'%3E%3Cg stroke='%23f0a842' fill='none'%3E%3Cpath d='M0 0L50 0M0 17L50 17M0 34L50 34M0 0L0 34M25 0L25 34M50 0L50 34' stroke-width='0.6' stroke-opacity='0.20'/%3E%3Cpath d='M6 17L18 17M32 0L32 10M40 24L46 24' stroke-width='1.2' stroke-opacity='0.55' stroke-dasharray='2 2'/%3E%3C/g%3E%3Ccircle cx='0' cy='0' r='1.3' fill='%23f0a842' fill-opacity='0.75'/%3E%3Ccircle cx='25' cy='17' r='1.3' fill='%23f0a842' fill-opacity='0.75'/%3E%3Ccircle cx='50' cy='34' r='1.3' fill='%23f0a842' fill-opacity='0.75'/%3E%3Ccircle cx='0' cy='34' r='1' fill='%23ffc266' fill-opacity='0.8'/%3E%3Ccircle cx='38' cy='8' r='1' fill='%23ffc266' fill-opacity='0.7'/%3E%3C/svg%3E");
--flair-topbar-wash: rgba(10, 13, 18, 0.85);
--flair-topbar-wash-mid: rgba(10, 13, 18, 0.1);
}
/* ============================================================
Awakened — elven/druidic aesthetic. Forest base, silver
primary, mint ambient/data, lavender alerts, clay-red damage.
Topbar carries elven knotwork pattern.
============================================================ */
:root[data-theme="awakened"] {
/* Forest surfaces — very dark with a green undertone */
--bg-deep: #070e0a;
--bg-base: #0a1410;
--bg-surface: #0f1d16;
--bg-raised: #14271e;
--bg-hover: #1a3428;
--bg-card: var(--bg-surface);
/* Borders — mint-tinted */
--border-subtle: rgba(122, 227, 176, 0.10);
--border-base: rgba(122, 227, 176, 0.22);
--border-strong: rgba(122, 227, 176, 0.45);
/* Cool-green text */
--text-primary: #eef5ea;
--text-secondary: #a5c9a0;
--text-muted: #7d9589;
--text-faint: #546b5f;
/* Primary — silver. Drives chrome: active nav, buttons, brand. */
--accent: #d8e6e0;
--accent-dim: #8a9690;
--accent-glow: rgba(216, 230, 224, 0.30);
/* Secondary — mint. Used for data numerics (--accent-bright role). */
--accent-bright: #7ae3b0;
/* Semantics */
--good: #7ae3b0; /* mint — same as ambient, fitting for an "awakened" theme */
--warn: #bf8cff; /* lavender — mana-aurora alerts */
--bad: #d86c59; /* clay-red — earthier than Holo's neon */
--info: #a5c9a0; /* sage green — subdued info */
/* Flair — mint-tinted cards and scanlines. */
--flair-card-bg: rgba(122, 227, 176, 0.030);
--flair-scanlines: rgba(122, 227, 176, 0.018);
--flair-focus-glow: 0 0 0 3px var(--accent-glow), 0 0 14px rgba(216, 230, 224, 0.18);
/* Knotwork topbar pattern — mint waves with silver junctions. */
--flair-topbar-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='50' viewBox='0 0 120 50'%3E%3Cg stroke='%237ae3b0' fill='none'%3E%3Cpath d='M0 25Q30 5 60 25T120 25' stroke-width='0.9' stroke-opacity='0.35'/%3E%3Cpath d='M0 25Q30 45 60 25T120 25' stroke-width='0.9' stroke-opacity='0.35'/%3E%3Cpath d='M0 12Q30 32 60 12T120 12' stroke-width='0.5' stroke-opacity='0.22'/%3E%3Cpath d='M0 38Q30 18 60 38T120 38' stroke-width='0.5' stroke-opacity='0.22'/%3E%3C/g%3E%3Ccircle cx='30' cy='25' r='1.5' fill='%237ae3b0' fill-opacity='0.7'/%3E%3Ccircle cx='90' cy='25' r='1.5' fill='%237ae3b0' fill-opacity='0.7'/%3E%3Ccircle cx='60' cy='12' r='1.1' fill='%23d8e6e0' fill-opacity='0.75'/%3E%3Ccircle cx='60' cy='38' r='1.1' fill='%23d8e6e0' fill-opacity='0.75'/%3E%3C/svg%3E");
--flair-topbar-wash: rgba(7, 14, 10, 0.85);
--flair-topbar-wash-mid: rgba(7, 14, 10, 0.1);
}
/* ============================================================
Paper theme — light, print-friendly, legible at the table
============================================================ */
:root[data-theme="paper"] {
--bg-deep: #e8e4db;
--bg-base: #f4f1ea;
--bg-surface: #ffffff;
--bg-raised: #faf8f3;
--bg-hover: #f0ede5;
--bg-card: #ffffff;
--border-subtle: #d8d2c4;
--border-base: #b8b0a0;
--border-strong: #8a8370;
--text-primary: #15130e;
--text-secondary: #4a4638;
--text-muted: #6e6a5c;
--text-faint: #9c9788;
/* Accent: deep rust — keeps the warmth, readable on white. */
--accent: #b8581f;
--accent-bright: #d46a2a;
--accent-dim: #7d3d15;
--accent-glow: rgba(184, 88, 31, 0.10);
--good: #2d7a3e;
--warn: #a06818;
--bad: #a42b32;
--info: #2668a8;
/* Paper personality: disable cyberpunk flourishes for print-feel.
Cards go opaque white, scanlines off, no clip-path on data tiles,
no blur. The 2px active-nav border stays — still useful. */
--flair-card-bg: #ffffff;
--flair-card-blur: 0;
--flair-scanlines: transparent;
--flair-clip-data: none;
--flair-clip-container: none;
--flair-focus-glow: 0 0 0 3px var(--accent-glow);
/* Paper: no topbar pattern, clean solid background. */
--flair-topbar-pattern: none;
--flair-topbar-wash: transparent;
--flair-topbar-wash-mid: transparent;
}
/* ============================================================
High Contrast theme — accessibility-first. Pure black, pure
white, yellow accent (best contrast on both). Every state
transition is obvious. All subtle effects disabled.
============================================================ */
:root[data-theme="contrast"] {
--bg-deep: #000000;
--bg-base: #000000;
--bg-surface: #000000;
--bg-raised: #0a0a0a;
--bg-hover: #1a1a1a;
--bg-card: #000000;
--border-subtle: #666666;
--border-base: #cccccc;
--border-strong: #ffffff;
--text-primary: #ffffff;
--text-secondary: #dddddd;
--text-muted: #aaaaaa;
--text-faint: #888888;
/* Accent: yellow. WCAG contrast ratio 19.5:1 on black. */
--accent: #ffee00;
--accent-bright: #ffff44;
--accent-dim: #ccbb00;
--accent-glow: rgba(255, 238, 0, 0.30);
--good: #00ff88;
--warn: #ffaa00;
--bad: #ff5555;
--info: #66ccff;
/* Contrast personality: no translucency, no scanlines, no clipping,
no soft glow — every edge is a solid line, every state is loud. */
--flair-card-bg: #000000;
--flair-card-blur: 0;
--flair-scanlines: transparent;
--flair-clip-data: none;
--flair-clip-container: none;
--flair-focus-glow: 0 0 0 3px var(--accent);
--flair-nav-active-width: 3px;
/* Contrast: no topbar pattern. */
--flair-topbar-pattern: none;
--flair-topbar-wash: transparent;
--flair-topbar-wash-mid: transparent;
}
/* Everything gets a visible border in contrast mode. Cards
that relied on surface-color differentiation need explicit edges. */
:root[data-theme="contrast"] .card,
:root[data-theme="contrast"] .btn,
:root[data-theme="contrast"] .input,
:root[data-theme="contrast"] .pending-bar,
:root[data-theme="contrast"] .sidebar,
:root[data-theme="contrast"] .topbar {
border: 1px solid var(--border-base);
}
/* Focus states need the thickest possible outline. */
:root[data-theme="contrast"] .btn:focus,
:root[data-theme="contrast"] .input:focus,
:root[data-theme="contrast"] .btn-primary:focus {
outline: 3px solid var(--accent);
outline-offset: 2px;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
height: 100%;
background: var(--bg-deep);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
overflow: hidden;
}
#root { height: 100%; }
/* Scanline texture on the deepest background, very subtle.
Color comes from the --flair-scanlines variable so each theme
can tint or disable it. */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient(
180deg,
transparent 0px,
transparent 2px,
var(--flair-scanlines) 2px,
var(--flair-scanlines) 3px
);
z-index: 9999;
}
/* Grain overlay for warmth. Disabled on themes where --flair-scanlines
is transparent (Paper, Contrast). */
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
opacity: 0.04;
z-index: 9998;
mix-blend-mode: overlay;
}
:root[data-theme="paper"] body::after,
:root[data-theme="contrast"] body::after {
display: none;
}
/* ============================================================
Bootstrap screen (shown before React mounts)
============================================================ */
.bootstrap-screen {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-family: var(--font-mono);
color: var(--accent);
}
.bootstrap-text { font-size: 14px; letter-spacing: 0.05em; }
.bootstrap-prompt { margin-right: 0.5em; }
.blink { animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
/* ============================================================
App shell layout
============================================================ */
.app {
display: grid;
grid-template-rows: auto 1fr;
height: 100%;
}
/* Top bar */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
/* Layer order (top to bottom):
- linear-gradient darkening wash so text stays readable
- SVG pattern from --flair-topbar-pattern (per-theme)
- solid --bg-base fallback
Themes with no pattern (Paper, Contrast) set --flair-topbar-pattern to none. */
background:
linear-gradient(90deg,
var(--flair-topbar-wash, rgba(10,15,20,0.85)) 0%,
var(--flair-topbar-wash-mid, rgba(10,15,20,0.1)) 30%,
var(--flair-topbar-wash-mid, rgba(10,15,20,0.1)) 70%,
var(--flair-topbar-wash, rgba(10,15,20,0.85)) 100%
),
var(--flair-topbar-pattern, none),
var(--bg-base);
border-bottom: 1px solid var(--border-base);
}
.topbar-brand {
display: flex;
align-items: baseline;
gap: 10px;
font-family: var(--font-mono);
}
.topbar-brand .brand-marker {
color: var(--accent);
font-weight: 700;
}
/* Logo glyph — SVG as mask so the fill follows the theme accent.
Aspect ratio 147.3:189.1 (tall-ish); sized to match the text's
cap-height-ish band so it sits visually in line with SHADOWRUN. */
.topbar-brand .brand-logo {
display: inline-block;
width: 20px;
height: 26px;
background-color: var(--accent);
-webkit-mask-image: url('./assets/shadowrun-logo.svg');
mask-image: url('./assets/shadowrun-logo.svg');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
/* Vertically nudge it onto the text baseline — logo is geometrically
taller than lowercase letters, so pull up slightly. */
transform: translateY(4px);
flex-shrink: 0;
}
.topbar-brand .brand-name {
font-family: var(--font-sans);
font-weight: 600;
letter-spacing: 0.02em;
}
.topbar-brand .brand-subtitle {
color: var(--text-muted);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.topbar-actions { display: flex; gap: 8px; }
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
background: transparent;
border: 1px solid var(--border-strong);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
border-radius: 2px;
cursor: pointer;
transition: all 120ms var(--ease-out);
}
.btn:hover {
border-color: var(--accent);
color: var(--accent-bright);
background: var(--accent-glow);
}
.btn:active { transform: translateY(1px); }
.btn-primary {
background: var(--accent);
color: var(--bg-deep);
border-color: var(--accent);
font-weight: 600;
}
.btn-primary:hover {
background: var(--accent-bright);
border-color: var(--accent-bright);
color: var(--bg-deep);
}
.btn-ghost { border-color: transparent; color: var(--text-secondary); }
.btn-ghost:hover { color: var(--text-primary); background: var(--bg-hover); border-color: transparent; }
/* Main content area */
.main {
display: grid;
grid-template-columns: 240px 1fr;
overflow: hidden;
}
/* Sidebar (navigation between character sections) */
.sidebar {
background: var(--bg-base);
border-right: 1px solid var(--border-base);
padding: 16px 0;
overflow-y: auto;
}
.sidebar-section-label {
padding: 8px 20px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--text-muted);
text-transform: uppercase;
}
.nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 20px;
color: var(--text-secondary);
cursor: pointer;
border-left: 2px solid transparent;
transition: all 120ms var(--ease-out);
user-select: none;
}
.nav-item:hover {
color: var(--text-primary);
background: var(--bg-surface);
}
.nav-item.active {
color: var(--accent-bright);
border-left-color: var(--accent);
background: linear-gradient(90deg, var(--accent-glow) 0%, transparent 60%);
}
.nav-item-marker {
font-family: var(--font-mono);
color: var(--text-muted);
font-size: 11px;
}
.nav-item.active .nav-item-marker { color: var(--accent); }
.nav-divider {
height: 1px;
background: var(--border-subtle);
margin: 12px 16px;
}
/* Content area */
.content {
overflow-y: auto;
padding: 28px 36px;
background: var(--bg-deep);
}
.content-header { margin-bottom: 28px; }
.content-title {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.24em;
color: var(--text-muted);
text-transform: uppercase;
margin: 0 0 4px 0;
}
.content-title::before { content: '// '; color: var(--accent); }
.content-heading {
font-family: var(--font-sans);
font-size: 28px;
font-weight: 600;
margin: 0;
letter-spacing: -0.01em;
}
/* ============================================================
Character header panel (always-visible summary at top of content)
============================================================ */
.char-header {
display: grid;
grid-template-columns: 1fr auto;
gap: 20px;
padding: 20px 24px;
background: var(--bg-surface);
border: 1px solid var(--border-base);
border-radius: 3px;
margin-bottom: 24px;
position: relative;
overflow: hidden;
}
/* Thin accent bar on the left */
.char-header::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dim) 100%);
}
.char-header-identity h1 {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 700;
margin: 0 0 4px 0;
letter-spacing: -0.01em;
}
.char-header-identity h1 .nameless { color: var(--text-muted); font-style: italic; font-weight: 400; }
.char-header-identity .meta {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-secondary);
}
.char-header-identity .meta span { color: var(--text-muted); }
.char-header-identity .meta strong { color: var(--accent); font-weight: 500; }
.char-header-stats {
display: grid;
grid-auto-flow: column;
gap: 28px;
align-items: center;
}
.stat-pip {
text-align: right;
}
.stat-pip-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
margin-bottom: 2px;
}
.stat-pip-value {
font-family: var(--font-mono);
font-size: 18px;
font-weight: 500;
color: var(--text-primary);
}
.stat-pip.highlight .stat-pip-value { color: var(--accent-bright); }
/* ============================================================
Form inputs
============================================================ */
.form-row {
display: grid;
grid-template-columns: 200px 1fr;
gap: 16px;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--border-subtle);
}
.form-row:last-child { border-bottom: none; }
.form-row label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--text-secondary);
text-transform: uppercase;
}
.form-row label .hint { color: var(--text-muted); text-transform: none; letter-spacing: normal; font-size: 11px; margin-left: 6px; }
.input, .select, .textarea {
width: 100%;
padding: 8px 12px;
background: var(--bg-base);
border: 1px solid var(--border-base);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 14px;
border-radius: 2px;
transition: all 120ms var(--ease-out);
}
.input:focus, .select:focus, .textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow);
}
.textarea { font-family: var(--font-sans); resize: vertical; min-height: 80px; }
.select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 32px;
}
/* ============================================================
Card (generic content container inside tabs)
============================================================ */
.card {
background: var(--flair-card-bg, var(--bg-surface));
backdrop-filter: blur(var(--flair-card-blur, 0));
border: 1px solid var(--border-base);
border-radius: 3px;
margin-bottom: 20px;
}
/* ============================================================
Holo-chrome flair rules (apply always, driven by --flair-* vars)
Each rule here is the *how* of the visual effect; the *whether*
and *color* come from the theme's palette block. A theme can
disable any flourish by setting its variable to `none` or
`transparent` or `0`.
============================================================ */
/* HUD-style clipped bottom-right. Applied to surfaces that read as
distinct bordered objects — the main visual "tiles" of the UI.
Two sizes:
--flair-clip-data — 6px, used on smaller row/tile elements
--flair-clip-container — 10px, used on large card containers
Themes that want clean corners (Paper, Contrast) set both to none.
Intentional non-targets:
.modal — has a drop shadow that would look bad clipped
.picker-modal, dropdowns — overflowing content needs to be visible
cards with overflow:visible children (tooltips, popovers) */
.card,
.pending-bar {
clip-path: var(--flair-clip-container, none);
}
/* Data tiles and row-type content get the smaller notch. */
.attr-row,
.priority-grid .priority-cell,
.nuyen-stat,
.stat-tile,
.contact-row,
.skill-row,
.gear-row,
.weapon-row,
.armor-row,
.cyberware-row,
.quality-row,
.spell-row,
.bound-spirit-row,
.adept-power-row,
.knowledge-row {
clip-path: var(--flair-clip-data, none);
}
/* Magenta focus glow on inputs/primary buttons (color baked into
--flair-focus-glow so themes can retune without duplicating rules). */
.input:focus,
.btn-primary:focus {
outline: none;
border-color: var(--accent);
box-shadow: var(--flair-focus-glow, 0 0 0 3px var(--accent-glow));
}
.btn-primary:hover {
box-shadow: var(--flair-focus-glow, none);
}
/* Active nav item gets a solid border of theme-specific width. */
.nav-item.active {
border-left: var(--flair-nav-active-width, 2px) solid var(--accent);
}
/* Pending-changes bar adopts the alert (warn) color in Holo
because magenta is reserved for "active/primary", not "attention". */
.pending-bar { border-color: var(--warn); }
.pending-bar .pb-count { color: var(--warn); }
.pending-bar .pb-karma-value { color: var(--warn); }
.pending-bar .pb-karma-value.over { color: var(--bad); }
/* Amber is monochromatic — pending bar should match its single accent,
not get a distinct warn color (which would look grafted-on). */
:root[data-theme="amber"] .pending-bar { border-color: var(--accent); }
:root[data-theme="amber"] .pending-bar .pb-count { color: var(--accent); }
:root[data-theme="amber"] .pending-bar .pb-karma-value { color: var(--accent); }
/* At-cap / availability / finalize-blocker warnings — orange in Holo,
amber in Amber, rust in Paper, orange in Contrast. --warn carries it. */
.attr-warning,
.gear-over-avail,
.finalize-blocker {
border-left-color: var(--warn);
}
.card-header {
padding: 14px 20px;
border-bottom: 1px solid var(--border-subtle);
display: flex;
align-items: center;
justify-content: space-between;
}
.card-title {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--text-secondary);
text-transform: uppercase;
margin: 0;
}
.card-title::before { content: '▸ '; color: var(--accent); margin-right: 2px; }
.card-body { padding: 16px 20px; }
/* ============================================================
Priority selection grid (the signature Shadowrun UI)
============================================================ */
.priority-grid {
display: grid;
grid-template-columns: 80px repeat(5, 1fr);
gap: 1px;
background: var(--border-base);
border: 1px solid var(--border-base);
border-radius: 2px;
overflow: hidden;
}
.priority-cell {
background: var(--bg-surface);
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 2px;
min-height: 48px;
}
.priority-cell.header {
background: var(--bg-base);
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.priority-cell.row-label {
background: var(--bg-base);
align-items: flex-start;
justify-content: center;
font-family: var(--font-mono);
font-size: 18px;
font-weight: 700;
color: var(--accent);
}
.priority-cell.option {
cursor: pointer;
transition: all 120ms var(--ease-out);
}
.priority-cell.option:hover {
background: var(--bg-hover);
}
.priority-cell.option.selected {
background: var(--accent-glow);
box-shadow: inset 0 0 0 1px var(--accent);
}
.priority-cell.option.selected-in-col {
opacity: 0.35;
}
.priority-cell .opt-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.05em;
}
.priority-cell .opt-value {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
}
.priority-cell.option.selected .opt-value { color: var(--accent-bright); }
/* Priority assignment summary */
.priority-status {
margin-top: 18px;
padding: 12px 16px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-left: 2px solid var(--accent);
border-radius: 2px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-secondary);
}
.priority-status.complete { border-left-color: var(--good); }
.priority-status.complete::before { content: '✓ '; color: var(--good); }
.priority-status.incomplete::before { content: '! '; color: var(--warn); }
/* ============================================================
Empty state (shown on fresh load)
============================================================ */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 20px;
text-align: center;
color: var(--text-secondary);
}
.empty-state-glyph {
font-family: var(--font-mono);
font-size: 48px;
color: var(--accent-dim);
margin-bottom: 16px;
letter-spacing: 0.1em;
}
.empty-state-title {
font-family: var(--font-sans);
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 8px 0;
}
.empty-state-body {
max-width: 360px;
margin-bottom: 24px;
color: var(--text-muted);
}
.empty-state-actions { display: flex; gap: 10px; }
/* ============================================================
Toast / status line
============================================================ */
.toast-container {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 100;
pointer-events: none;
}
.toast {
background: var(--bg-raised);
border: 1px solid var(--border-strong);
border-left: 3px solid var(--accent);
padding: 10px 16px;
border-radius: 2px;
font-family: var(--font-mono);
font-size: 12px;
animation: toast-in 260ms var(--ease-out);
pointer-events: auto;
max-width: 360px;
}
.toast.good { border-left-color: var(--good); }
.toast.bad { border-left-color: var(--bad); }
@keyframes toast-in {
from { opacity: 0; transform: translateX(12px); }
to { opacity: 1; transform: translateX(0); }
}
/* ============================================================
Utilities
============================================================ */
.mono { font-family: var(--font-mono); }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.accent { color: var(--accent); }
/* Small helper text for in-progress features */
.phase-note {
margin-top: 32px;
padding: 14px 18px;
border: 1px dashed var(--border-base);
border-radius: 2px;
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.7;
}
.phase-note strong { color: var(--accent); font-weight: 500; }
/* Scrollbar styling (subtle, in-theme) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }
/* ============================================================
Phase 2: Attributes & Skills
============================================================ */
/* Point-remaining chips (shown in the card header) */
.points-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
background: var(--bg-base);
border: 1px solid var(--border-base);
border-radius: 2px;
color: var(--text-secondary);
}
.points-chip .pts-value { color: var(--text-primary); font-weight: 500; }
.points-chip.good { border-color: var(--good); color: var(--good); }
.points-chip.good .pts-value { color: var(--good); }
.points-chip.warn { border-color: var(--warn); color: var(--warn); }
.points-chip.warn .pts-value { color: var(--warn); }
.points-chip.bad { border-color: var(--bad); color: var(--bad); }
.points-chip.bad .pts-value { color: var(--bad); }
.card-header-right { display: flex; gap: 8px; align-items: center; }
/* Attribute rows */
.attr-group-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.2em;
color: var(--text-muted);
text-transform: uppercase;
padding: 14px 20px 6px;
border-top: 1px solid var(--border-subtle);
}
.attr-group-label:first-child { border-top: none; padding-top: 4px; }
.attr-row {
display: grid;
grid-template-columns: 160px 1fr 120px;
align-items: center;
padding: 10px 20px;
gap: 16px;
border-top: 1px solid var(--border-subtle);
transition: background 120ms var(--ease-out);
}
.attr-row:hover { background: var(--bg-hover); }
.attr-row .attr-name {
display: flex;
align-items: baseline;
gap: 8px;
}
.attr-row .attr-name .label {
font-family: var(--font-sans);
font-weight: 600;
color: var(--text-primary);
font-size: 14px;
}
.attr-row .attr-name .abbr {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--text-muted);
}
.attr-stepper {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 10px;
align-items: center;
}
.stepper-btn {
width: 28px;
height: 28px;
background: var(--bg-raised);
border: 1px solid var(--border-base);
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 16px;
line-height: 1;
border-radius: 2px;
cursor: pointer;
transition: all 120ms var(--ease-out);
display: flex;
align-items: center;
justify-content: center;
}
.stepper-btn:hover:not(:disabled) {
border-color: var(--accent);
color: var(--accent-bright);
background: var(--accent-glow);
}
.stepper-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.attr-track {
display: flex;
gap: 2px;
height: 18px;
align-items: stretch;
}
.attr-pip {
flex: 1;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: 1px;
transition: all 140ms var(--ease-out);
min-width: 12px;
}
.attr-pip.filled { background: var(--accent); border-color: var(--accent); }
.attr-pip.bought-last { background: var(--accent-bright); border-color: var(--accent-bright); }
.attr-pip.above-max { background: var(--border-subtle); opacity: 0.3; }
.attr-value {
font-family: var(--font-mono);
font-size: 20px;
font-weight: 600;
color: var(--accent-bright);
text-align: center;
min-width: 42px;
}
.attr-range {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
text-align: left;
min-width: 56px;
}
.attr-range .slash { color: var(--text-faint); margin: 0 2px; }
/* One-at-max warning */
.attr-warning {
margin-top: 16px;
padding: 10px 16px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-left: 2px solid var(--warn);
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 12px;
border-radius: 2px;
}
.attr-warning::before { content: '! '; color: var(--warn); font-weight: 700; }
/* ============================================================
Derived stats panel — shown alongside attributes
============================================================ */
.derived-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
padding: 16px 20px;
}
.derived-cell {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 6px 10px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: 2px;
}
.derived-cell .label {
font-family: var(--font-sans);
font-size: 12px;
color: var(--text-secondary);
}
.derived-cell .value {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 600;
color: var(--accent-bright);
}
.derived-cell .value .suffix {
color: var(--text-muted);
font-weight: 400;
font-size: 11px;
}
/* Condition monitor — the little boxes grid */
.condition-monitor {
display: grid;
grid-template-columns: 80px 1fr;
gap: 10px;
align-items: center;
padding: 8px 10px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: 2px;
margin-bottom: 6px;
}
.condition-monitor .cm-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
color: var(--text-muted);
text-transform: uppercase;
}
.cm-boxes {
display: flex;
gap: 2px;
flex-wrap: wrap;
}
.cm-box {
width: 14px;
height: 14px;
border: 1px solid var(--border-strong);
border-radius: 1px;
background: transparent;
}
/* ============================================================
Skills table
============================================================ */
.skills-toolbar {
display: flex;
gap: 10px;
align-items: center;
padding: 14px 20px;
background: var(--bg-surface);
border: 1px solid var(--border-base);
border-bottom: none;
border-radius: 3px 3px 0 0;
}
.skill-search {
flex: 1;
padding: 7px 12px;
background: var(--bg-base);
border: 1px solid var(--border-base);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 13px;
border-radius: 2px;
}
.skill-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.skill-filters {
display: flex;
gap: 4px;
}
.filter-chip {
padding: 5px 11px;
background: transparent;
border: 1px solid var(--border-base);
border-radius: 2px;
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: all 120ms var(--ease-out);
user-select: none;
}
.filter-chip:hover { color: var(--text-primary); border-color: var(--border-strong); }
.filter-chip.active {
color: var(--accent-bright);
border-color: var(--accent);
background: var(--accent-glow);
}
.skills-table {
background: var(--bg-surface);
border: 1px solid var(--border-base);
border-top: none;
border-radius: 0 0 3px 3px;
overflow: hidden;
}
.skills-table-head {
display: grid;
grid-template-columns: 1fr 100px 80px 80px 80px;
gap: 12px;
padding: 8px 20px;
background: var(--bg-base);
border-bottom: 1px solid var(--border-base);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
position: sticky;
top: 0;
z-index: 1;
}
.skills-category-label {
padding: 10px 20px 6px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.2em;
color: var(--text-muted);
text-transform: uppercase;
background: var(--bg-base);
border-bottom: 1px solid var(--border-subtle);
}
.skill-row {
display: grid;
grid-template-columns: 1fr 100px 80px 80px 80px;
gap: 12px;
padding: 8px 20px;
align-items: center;
border-top: 1px solid var(--border-subtle);
transition: background 100ms var(--ease-out);
}
.skill-row:hover { background: var(--bg-hover); }
.skill-row.trained { background: rgba(240, 168, 66, 0.04); }
.skill-row .skill-name {
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-primary);
display: flex;
align-items: baseline;
gap: 8px;
}
.skill-row.trained .skill-name { color: var(--accent-bright); font-weight: 500; }
.skill-row .skill-attr {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
letter-spacing: 0.1em;
}
.skill-rating-stepper {
display: flex;
gap: 4px;
align-items: center;
}
.skill-rating-value {
min-width: 24px;
text-align: center;
font-family: var(--font-mono);
font-size: 15px;
font-weight: 600;
color: var(--accent-bright);
}
.skill-row:not(.trained) .skill-rating-value { color: var(--text-muted); }
.dice-pool {
font-family: var(--font-mono);
font-size: 16px;
font-weight: 600;
text-align: right;
color: var(--accent-bright);
}
.skill-row:not(.trained) .dice-pool.defaulted {
color: var(--text-secondary);
font-weight: 400;
}
.skill-row:not(.trained) .dice-pool.defaulted::before {
content: '(';
color: var(--text-faint);
font-size: 12px;
}
.skill-row:not(.trained) .dice-pool.defaulted::after {
content: ')';
color: var(--text-faint);
font-size: 12px;
}
.dice-pool.zero {
color: var(--text-faint);
font-weight: 400;
}
.breakdown {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
text-align: right;
}
.breakdown .plus { color: var(--text-faint); margin: 0 3px; }
/* Skill footer stats */
.skills-empty-category {
padding: 14px 20px;
text-align: center;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
font-style: italic;
}
/* ============================================================
Phase 2.5: Skill groups and specializations
============================================================ */
/* Skill groups card: 2-column grid of groups with steppers */
.skill-groups-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.skill-group-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
align-items: center;
padding: 10px 20px;
border-top: 1px solid var(--border-subtle);
border-left: 1px solid var(--border-subtle);
transition: background 120ms var(--ease-out);
}
.skill-group-row:nth-child(odd) { border-left: none; }
.skill-group-row:hover { background: var(--bg-hover); }
.skill-group-row.active { background: rgba(240, 168, 66, 0.05); }
.skill-group-row .sg-name {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
}
.skill-group-row.active .sg-name { color: var(--accent-bright); }
.skill-group-row .sg-members {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
letter-spacing: 0.03em;
display: block;
margin-top: 2px;
font-weight: 400;
}
.sg-stepper {
display: flex;
align-items: center;
gap: 6px;
}
.sg-stepper .skill-rating-value {
min-width: 22px;
font-size: 14px;
}
/* Covered-by-group indicator: shown in place of the skill stepper */
.skill-via-group {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--accent-dim);
letter-spacing: 0.05em;
}
.skill-via-group .via-label {
padding: 2px 7px;
background: rgba(240, 168, 66, 0.08);
border: 1px solid var(--accent-dim);
border-radius: 2px;
color: var(--accent);
text-transform: uppercase;
font-size: 9px;
letter-spacing: 0.1em;
}
.skill-row.via-group .skill-rating-value {
color: var(--accent);
opacity: 0.9;
}
.skill-row.via-group {
background: rgba(240, 168, 66, 0.025);
}
/* Specialization input */
.skill-row-with-spec {
display: grid;
grid-template-columns: 1fr 100px 100px 80px 100px;
gap: 12px;
padding: 8px 20px;
align-items: center;
border-top: 1px solid var(--border-subtle);
transition: background 100ms var(--ease-out);
}
.skill-row-with-spec:hover { background: var(--bg-hover); }
.skill-row-with-spec.trained { background: rgba(240, 168, 66, 0.04); }
.skill-row-with-spec.via-group { background: rgba(240, 168, 66, 0.025); }
.skills-table-head-with-spec {
display: grid;
grid-template-columns: 1fr 100px 100px 80px 100px;
gap: 12px;
padding: 8px 20px;
background: var(--bg-base);
border-bottom: 1px solid var(--border-base);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
position: sticky;
top: 0;
z-index: 1;
}
.spec-input {
width: 100%;
padding: 4px 8px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 11px;
border-radius: 2px;
transition: all 120ms var(--ease-out);
}
.spec-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent-glow);
}
.spec-input::placeholder { color: var(--text-faint); font-style: italic; }
.spec-input:disabled {
background: transparent;
border-color: transparent;
color: var(--text-faint);
cursor: not-allowed;
}
.spec-input.has-value {
border-color: var(--accent-dim);
color: var(--accent-bright);
font-weight: 500;
}
/* List datalist styled through browser — can't fully style, but the input looks good regardless */
/* Dice pool shown as "10 / 12" when spec applies */
.dice-pool-with-spec {
display: flex;
flex-direction: column;
align-items: flex-end;
font-family: var(--font-mono);
}
.dice-pool-with-spec .base {
font-size: 14px;
color: var(--text-secondary);
}
.dice-pool-with-spec .with-spec {
font-size: 16px;
font-weight: 600;
color: var(--accent-bright);
}
.dice-pool-with-spec .with-spec::before {
content: '+2 ';
color: var(--accent-dim);
font-size: 9px;
letter-spacing: 0.1em;
font-weight: 400;
margin-right: 2px;
}
/* Broken-group warning banner */
.broken-group-warning {
margin: 10px 0;
padding: 10px 16px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-left: 2px solid var(--bad);
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 12px;
border-radius: 2px;
}
.broken-group-warning::before { content: '! '; color: var(--bad); font-weight: 700; }
/* ============================================================
Phase 2.75: Knowledge & Language skills
============================================================ */
.knowledge-section-label {
padding: 12px 20px 6px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.2em;
color: var(--text-muted);
text-transform: uppercase;
background: var(--bg-base);
border-bottom: 1px solid var(--border-subtle);
display: flex;
justify-content: space-between;
align-items: center;
}
.knowledge-section-label .hint {
font-weight: 400;
color: var(--text-faint);
letter-spacing: 0.05em;
text-transform: none;
font-size: 11px;
}
.knowledge-row {
display: grid;
grid-template-columns: 130px 1fr 110px 80px 120px 28px;
gap: 10px;
padding: 8px 20px;
align-items: center;
border-top: 1px solid var(--border-subtle);
transition: background 100ms var(--ease-out);
}
.knowledge-row:hover { background: var(--bg-hover); }
.knowledge-row.native { background: rgba(240, 168, 66, 0.04); }
.knowledge-cat-select {
padding: 5px 8px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.05em;
border-radius: 2px;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 6px center;
padding-right: 22px;
}
.knowledge-cat-select:focus {
outline: none;
border-color: var(--accent);
}
.knowledge-name-input {
width: 100%;
padding: 5px 10px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 13px;
border-radius: 2px;
}
.knowledge-name-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent-glow);
}
.knowledge-name-input::placeholder { color: var(--text-faint); font-style: italic; }
.knowledge-row.native .knowledge-name-input {
border-color: var(--accent-dim);
color: var(--accent-bright);
font-weight: 500;
}
.knowledge-native-badge {
display: inline-flex;
align-items: center;
justify-content: center;
height: 28px;
padding: 0 10px;
background: rgba(240, 168, 66, 0.08);
border: 1px solid var(--accent-dim);
color: var(--accent);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
border-radius: 2px;
text-transform: uppercase;
}
.knowledge-remove-btn {
width: 24px;
height: 24px;
background: transparent;
border: 1px solid transparent;
color: var(--text-faint);
font-size: 14px;
line-height: 1;
cursor: pointer;
border-radius: 2px;
transition: all 120ms var(--ease-out);
display: flex;
align-items: center;
justify-content: center;
}
.knowledge-remove-btn:hover {
color: var(--bad);
border-color: var(--bad);
background: rgba(227, 93, 106, 0.08);
}
.knowledge-add-row {
padding: 12px 20px;
display: flex;
gap: 8px;
flex-wrap: wrap;
border-top: 1px solid var(--border-subtle);
background: var(--bg-base);
}
.add-button {
padding: 5px 12px;
background: transparent;
border: 1px dashed var(--border-strong);
border-radius: 2px;
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.05em;
cursor: pointer;
transition: all 120ms var(--ease-out);
}
.add-button:hover {
border-color: var(--accent);
color: var(--accent-bright);
border-style: solid;
background: var(--accent-glow);
}
.add-button .plus-icon {
color: var(--accent);
margin-right: 4px;
}
/* ============================================================
Phase 3: Modal + EntityPicker + Qualities
============================================================ */
/* Modal backdrop and frame */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(10, 13, 18, 0.72);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
display: flex;
align-items: center;
justify-content: center;
z-index: 200;
animation: modal-fade-in 160ms var(--ease-out);
}
@keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
background: var(--bg-base);
border: 1px solid var(--border-strong);
border-radius: 4px;
width: 90%;
max-width: 1040px;
max-height: 86vh;
display: flex;
flex-direction: column;
box-shadow: 0 24px 64px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--accent-glow);
animation: modal-slide-in 200ms var(--ease-out);
}
@keyframes modal-slide-in {
from { opacity: 0; transform: translateY(8px) scale(0.99); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
border-bottom: 1px solid var(--border-base);
background: var(--bg-surface);
}
.modal-title {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--text-secondary);
text-transform: uppercase;
margin: 0;
}
.modal-title::before { content: '▸ '; color: var(--accent); }
.modal-close {
width: 28px;
height: 28px;
background: transparent;
border: 1px solid transparent;
color: var(--text-muted);
font-size: 18px;
line-height: 1;
cursor: pointer;
border-radius: 2px;
transition: all 120ms var(--ease-out);
display: flex;
align-items: center;
justify-content: center;
}
.modal-close:hover {
border-color: var(--border-strong);
color: var(--text-primary);
background: var(--bg-hover);
}
.modal-body {
flex: 1;
min-height: 0;
display: flex;
overflow: hidden;
}
.modal-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 20px;
border-top: 1px solid var(--border-base);
background: var(--bg-surface);
gap: 10px;
}
.modal-footer .footer-info {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.03em;
}
.modal-footer .footer-actions {
display: flex;
gap: 8px;
}
/* EntityPicker layout: sidebar list + details panel */
.picker-sidebar {
width: 420px;
min-width: 360px;
border-right: 1px solid var(--border-base);
display: flex;
flex-direction: column;
background: var(--bg-base);
}
.picker-toolbar {
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 8px;
border-bottom: 1px solid var(--border-subtle);
background: var(--bg-surface);
}
.picker-search {
width: 100%;
padding: 8px 12px 8px 32px;
background: var(--bg-base);
border: 1px solid var(--border-base);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 13px;
border-radius: 2px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 10px center;
}
.picker-search:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow);
}
.picker-filters {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.picker-list {
flex: 1;
overflow-y: auto;
min-height: 0;
}
.picker-item {
padding: 10px 16px;
border-bottom: 1px solid var(--border-subtle);
cursor: pointer;
transition: background 100ms var(--ease-out);
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: baseline;
}
.picker-item:hover { background: var(--bg-hover); }
.picker-item.selected {
background: var(--accent-glow);
border-left: 2px solid var(--accent);
padding-left: 14px;
}
.picker-item .pi-name {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
}
.picker-item.selected .pi-name { color: var(--accent-bright); }
.picker-item .pi-karma {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
}
.picker-item.selected .pi-karma { color: var(--accent); }
.picker-item .pi-meta {
grid-column: 1 / -1;
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
letter-spacing: 0.03em;
margin-top: 2px;
}
.picker-item.positive .pi-karma::before { content: '−'; color: var(--warn); margin-right: 2px; }
.picker-item.negative .pi-karma::before { content: '+'; color: var(--good); margin-right: 2px; }
.picker-item.already-taken { opacity: 0.5; cursor: not-allowed; }
.picker-item.already-taken .pi-name::after {
content: ' · added';
color: var(--text-muted);
font-style: italic;
font-size: 11px;
font-weight: 400;
}
.picker-list-empty {
padding: 32px 20px;
text-align: center;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
font-style: italic;
}
.picker-details {
flex: 1;
padding: 24px 28px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.picker-details-empty {
margin: auto;
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.05em;
text-align: center;
}
.picker-details-title {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 700;
color: var(--text-primary);
margin: 0;
letter-spacing: -0.01em;
}
.picker-details-cost {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: var(--bg-surface);
border: 1px solid var(--border-base);
border-radius: 2px;
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-primary);
width: fit-content;
}
.picker-details-cost .cost-label {
color: var(--text-muted);
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.picker-details-cost.positive .cost-value { color: var(--warn); }
.picker-details-cost.negative .cost-value { color: var(--good); }
.picker-details-cost .cost-value { font-weight: 600; }
.picker-details-section {
border-top: 1px solid var(--border-subtle);
padding-top: 14px;
}
.picker-details-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
margin-bottom: 6px;
}
.picker-details-text {
color: var(--text-primary);
font-size: 14px;
line-height: 1.6;
}
.picker-details-source {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-faint);
margin-top: 2px;
}
.picker-details-tags {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.picker-tag {
padding: 3px 9px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.05em;
border-radius: 2px;
text-transform: uppercase;
}
.picker-details-rank-input {
display: flex;
align-items: center;
gap: 10px;
}
.picker-details-rank-input label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--text-secondary);
text-transform: uppercase;
}
/* ============================================================
Qualities view
============================================================ */
.qualities-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.qualities-column .card-header {
padding: 12px 18px;
}
.qualities-column.positive .card-title::before { content: '+ '; color: var(--warn); font-weight: 700; }
.qualities-column.negative .card-title::before { content: '− '; color: var(--good); font-weight: 700; }
.quality-row {
display: grid;
grid-template-columns: 1fr auto 28px;
gap: 10px;
padding: 10px 18px;
border-top: 1px solid var(--border-subtle);
align-items: center;
transition: background 100ms var(--ease-out);
}
.quality-row:hover { background: var(--bg-hover); }
.quality-row .qr-name {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
}
.quality-row .qr-desc {
grid-column: 1;
font-family: var(--font-sans);
font-size: 12px;
color: var(--text-secondary);
line-height: 1.45;
margin-top: 2px;
}
.quality-row .qr-notes {
grid-column: 1;
margin-top: 4px;
}
.qr-notes-input {
width: 100%;
padding: 4px 8px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 11px;
font-style: italic;
border-radius: 2px;
}
.qr-notes-input:focus {
outline: none;
border-color: var(--accent);
}
.qr-notes-input::placeholder {
color: var(--text-faint);
}
.quality-row .qr-karma {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 600;
text-align: right;
min-width: 50px;
}
.quality-row.positive .qr-karma { color: var(--warn); }
.quality-row.negative .qr-karma { color: var(--good); }
.quality-row .qr-ranks {
display: flex;
align-items: center;
gap: 4px;
margin-left: 8px;
}
.qr-ranks .label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
color: var(--text-muted);
text-transform: uppercase;
}
.quality-column-empty {
padding: 28px 20px;
text-align: center;
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 11px;
font-style: italic;
}
.quality-add-bar {
padding: 12px 18px;
border-top: 1px solid var(--border-subtle);
background: var(--bg-base);
}
.karma-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
padding: 16px 20px;
background: var(--bg-surface);
border: 1px solid var(--border-base);
border-radius: 3px;
margin-bottom: 20px;
}
.karma-stat {
display: flex;
flex-direction: column;
gap: 3px;
padding: 4px 0;
}
.karma-stat .k-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.karma-stat .k-value {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 600;
color: var(--text-primary);
}
.karma-stat.positive .k-value { color: var(--warn); }
.karma-stat.negative .k-value { color: var(--good); }
.karma-stat.free .k-value { color: var(--accent-bright); }
.karma-stat.over .k-value { color: var(--bad); }
.karma-stat .k-cap {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
}
.karma-stat.at-cap .k-cap { color: var(--good); }
.karma-stat.over-cap .k-cap { color: var(--bad); }
/* ============================================================
Phase 4a: Gear (Weapons + Armor)
============================================================ */
/* Sub-tabs inside the gear view */
.gear-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--border-base);
margin-bottom: 18px;
}
.gear-tab {
padding: 10px 20px;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
transition: all 120ms var(--ease-out);
display: flex;
align-items: center;
gap: 8px;
}
.gear-tab:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.gear-tab.active {
color: var(--accent-bright);
border-bottom-color: var(--accent);
}
.gear-tab .tab-count {
font-size: 10px;
padding: 2px 7px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 8px;
color: var(--text-muted);
}
.gear-tab.active .tab-count {
background: var(--accent-glow);
border-color: var(--accent-dim);
color: var(--accent);
}
/* Nuyen summary bar */
.nuyen-summary {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
padding: 16px 20px;
background: var(--bg-surface);
border: 1px solid var(--border-base);
border-radius: 3px;
margin-bottom: 20px;
}
.nuyen-stat {
display: flex;
flex-direction: column;
gap: 3px;
}
.nuyen-stat .n-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.nuyen-stat .n-value {
font-family: var(--font-mono);
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
}
.nuyen-stat.over .n-value { color: var(--bad); }
.nuyen-stat.free .n-value { color: var(--accent-bright); }
.nuyen-stat.remaining.done .n-value { color: var(--good); }
/* Weapon table (since this has many columns) */
.weapon-table {
background: var(--bg-surface);
border: 1px solid var(--border-base);
border-radius: 3px;
overflow: hidden;
margin-bottom: 16px;
}
.weapon-table-head,
.weapon-row {
display: grid;
grid-template-columns: 1.6fr 70px 70px 80px 70px 70px 90px 90px 100px 28px;
gap: 8px;
padding: 8px 16px;
align-items: center;
}
.weapon-table-head {
background: var(--bg-base);
border-bottom: 1px solid var(--border-base);
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.weapon-row {
border-top: 1px solid var(--border-subtle);
transition: background 100ms var(--ease-out);
}
.weapon-row:hover { background: var(--bg-hover); }
.weapon-row .wr-name {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
}
.weapon-row .wr-name .wr-cat {
display: block;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.1em;
color: var(--text-muted);
text-transform: uppercase;
margin-top: 1px;
}
.weapon-row .wr-stat {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-secondary);
text-align: center;
}
.weapon-row .wr-stat.damage {
color: var(--text-primary);
font-weight: 500;
}
.weapon-row .wr-stat.cost {
text-align: right;
color: var(--accent);
}
.weapon-row .wr-notes-row {
grid-column: 1 / -1;
padding-top: 4px;
margin-top: 2px;
border-top: 1px dashed var(--border-subtle);
display: none;
}
.weapon-row.has-notes .wr-notes-row,
.weapon-row:focus-within .wr-notes-row { display: block; }
/* Armor table — simpler */
.armor-table {
background: var(--bg-surface);
border: 1px solid var(--border-base);
border-radius: 3px;
overflow: hidden;
margin-bottom: 16px;
}
.armor-table-head,
.armor-row {
display: grid;
grid-template-columns: 1.6fr 70px 70px 80px 100px 28px;
gap: 8px;
padding: 10px 16px;
align-items: center;
}
.armor-table-head {
background: var(--bg-base);
border-bottom: 1px solid var(--border-base);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.armor-row {
border-top: 1px solid var(--border-subtle);
transition: background 100ms var(--ease-out);
}
.armor-row:hover { background: var(--bg-hover); }
.armor-row.is-layer { background: rgba(240, 168, 66, 0.035); }
.armor-row .ar-name {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
}
.armor-row .ar-name .layer-badge {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
background: var(--bg-surface);
border: 1px solid var(--accent-dim);
color: var(--accent);
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.1em;
border-radius: 2px;
text-transform: uppercase;
vertical-align: middle;
}
.armor-row .ar-notes {
grid-column: 1 / -1;
font-family: var(--font-sans);
font-size: 12px;
color: var(--text-secondary);
margin-top: 2px;
font-style: italic;
}
.armor-row .ar-stat {
font-family: var(--font-mono);
font-size: 13px;
text-align: center;
color: var(--text-primary);
}
.armor-row .ar-stat.rating { font-weight: 600; }
.armor-row .ar-stat.cost {
text-align: right;
color: var(--accent);
}
.gear-empty {
padding: 36px 20px;
text-align: center;
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 12px;
font-style: italic;
}
.gear-add-bar {
display: flex;
gap: 10px;
padding: 14px 0 4px;
flex-wrap: wrap;
}
/* Details panel — weapon stat grid */
.weapon-stat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
padding: 12px 14px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 2px;
}
.weapon-stat-grid .ws {
display: flex;
flex-direction: column;
gap: 2px;
}
.weapon-stat-grid .ws-label {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.weapon-stat-grid .ws-value {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
}
.weapon-stat-grid .ws-value.damage {
color: var(--accent);
}
/* Current armor rating banner */
.current-armor-ribbon {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 16px;
background: var(--bg-surface);
border: 1px solid var(--accent-dim);
border-left: 2px solid var(--accent);
border-radius: 2px;
margin-bottom: 16px;
}
.current-armor-ribbon .cab-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.current-armor-ribbon .cab-value {
font-family: var(--font-mono);
font-size: 20px;
font-weight: 700;
color: var(--accent-bright);
}
.current-armor-ribbon .cab-formula {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
margin-left: auto;
}
/* Ensure our nuyen column in the picker is sized right */
.picker-item .pi-cost {
font-family: var(--font-mono);
font-size: 11px;
color: var(--accent);
white-space: nowrap;
}
/* ============================================================
Phase 4b: Augmentations (Cyberware + Bioware)
============================================================ */
/* Essence meter — the centerpiece of the aug views */
.essence-meter {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 20px;
align-items: center;
padding: 16px 20px;
background: var(--bg-surface);
border: 1px solid var(--border-base);
border-radius: 3px;
margin-bottom: 18px;
}
.essence-big {
display: flex;
flex-direction: column;
gap: 2px;
}
.essence-big .e-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.essence-big .e-value {
font-family: var(--font-mono);
font-size: 32px;
font-weight: 700;
color: var(--accent-bright);
line-height: 1;
letter-spacing: -0.02em;
}
.essence-big .e-value.danger { color: var(--bad); }
.essence-big .e-value.warn { color: var(--warn); }
.essence-big .e-max {
font-size: 14px;
color: var(--text-muted);
font-weight: 400;
}
.essence-bar-wrap {
display: flex;
flex-direction: column;
gap: 6px;
}
.essence-bar-labels {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
letter-spacing: 0.05em;
}
.essence-bar {
height: 12px;
background: var(--bg-base);
border: 1px solid var(--border-base);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.essence-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent) 0%, var(--accent-bright) 100%);
transition: width 300ms var(--ease-out);
}
.essence-bar-fill.warn {
background: linear-gradient(90deg, #d4a34a 0%, #e4c068 100%);
}
.essence-bar-fill.danger {
background: linear-gradient(90deg, #c06060 0%, #e08080 100%);
}
.essence-magic {
text-align: right;
}
.essence-magic .em-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.essence-magic .em-value {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 600;
color: var(--text-primary);
}
.essence-magic .em-hint {
font-size: 10px;
font-family: var(--font-mono);
color: var(--text-faint);
}
/* Ware table */
.ware-table {
background: var(--bg-surface);
border: 1px solid var(--border-base);
border-radius: 3px;
overflow: hidden;
margin-bottom: 16px;
}
.ware-table-head,
.ware-row {
display: grid;
grid-template-columns: 1.6fr 110px 70px 70px 70px 100px 28px;
gap: 10px;
padding: 10px 16px;
align-items: center;
}
.ware-table-head {
background: var(--bg-base);
border-bottom: 1px solid var(--border-base);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.ware-row {
border-top: 1px solid var(--border-subtle);
transition: background 100ms var(--ease-out);
}
.ware-row:hover { background: var(--bg-hover); }
.ware-row.bioware { background: rgba(140, 200, 140, 0.03); }
.ware-row.bioware:hover { background: rgba(140, 200, 140, 0.06); }
.ware-row .wr-name {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
}
.ware-row .wr-name .wr-cat {
display: block;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.1em;
color: var(--text-muted);
text-transform: uppercase;
margin-top: 1px;
}
.ware-row .wr-desc {
grid-column: 1;
font-family: var(--font-sans);
font-size: 11px;
color: var(--text-secondary);
margin-top: 3px;
line-height: 1.4;
}
.ware-row .wr-grade-select {
padding: 4px 6px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.05em;
border-radius: 2px;
cursor: pointer;
}
.ware-row .wr-grade-select:focus {
outline: none;
border-color: var(--accent);
}
.ware-row .wr-stat {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-secondary);
text-align: center;
}
.ware-row .wr-stat.essence {
color: var(--accent);
font-weight: 600;
}
.ware-row .wr-stat.cost {
text-align: right;
color: var(--accent);
}
.ware-row .wr-rating {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.ware-row .wr-notes-row {
grid-column: 1 / -1;
padding-top: 4px;
margin-top: 2px;
border-top: 1px dashed var(--border-subtle);
display: none;
}
.ware-row.has-notes .wr-notes-row,
.ware-row:focus-within .wr-notes-row { display: block; }
/* Grade chip (when showing just the grade value) */
.grade-chip {
display: inline-block;
padding: 2px 6px;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.08em;
border: 1px solid var(--border-subtle);
border-radius: 2px;
color: var(--text-muted);
text-transform: uppercase;
}
.grade-chip.alphaware { color: #9cb4cc; border-color: #5a7290; }
.grade-chip.betaware { color: #b79dd9; border-color: #6a4e94; }
.grade-chip.deltaware { color: #c7b07a; border-color: #8b7040; }
.grade-chip.used { color: #ac8c8c; border-color: #6d5555; }
/* Picker — ware variant with grade chooser in details */
.picker-grade-row {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px 12px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 2px;
}
.picker-grade-row .grade-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.picker-grade-options {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.picker-grade-option {
padding: 6px 10px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.05em;
border-radius: 2px;
cursor: pointer;
transition: all 120ms var(--ease-out);
display: flex;
flex-direction: column;
gap: 2px;
min-width: 90px;
}
.picker-grade-option:hover {
border-color: var(--accent-dim);
color: var(--text-primary);
}
.picker-grade-option.active {
border-color: var(--accent);
background: var(--accent-glow);
color: var(--accent-bright);
}
.picker-grade-option .gop-name {
font-weight: 600;
text-transform: uppercase;
}
.picker-grade-option .gop-effect {
font-size: 9px;
color: var(--text-muted);
letter-spacing: 0.03em;
}
.ware-empty {
padding: 36px 20px;
text-align: center;
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 12px;
font-style: italic;
}
/* Magic-cap warning banner shown when cyberware reduced Magic attribute cap */
.magic-cap-warning {
margin: 12px 0 18px;
padding: 10px 16px;
background: rgba(212, 163, 74, 0.08);
border: 1px solid var(--warn);
border-left: 3px solid var(--warn);
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 12px;
border-radius: 2px;
display: flex;
align-items: center;
gap: 10px;
}
.magic-cap-warning::before {
content: '⚠';
color: var(--warn);
font-size: 16px;
}
/* ============================================================
Phase 5a: Magic (Tradition + Spells)
============================================================ */
/* Tradition picker tiles */
.tradition-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 12px;
margin-bottom: 20px;
}
.tradition-tile {
padding: 14px 16px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 3px;
cursor: pointer;
transition: all 150ms var(--ease-out);
display: flex;
flex-direction: column;
gap: 6px;
}
.tradition-tile:hover {
border-color: var(--accent-dim);
background: var(--bg-hover);
}
.tradition-tile.selected {
border-color: var(--accent);
background: var(--accent-glow);
box-shadow: 0 0 0 1px var(--accent-dim);
}
.tradition-tile .tt-name {
font-family: var(--font-sans);
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
}
.tradition-tile.selected .tt-name { color: var(--accent-bright); }
.tradition-tile .tt-drain {
font-family: var(--font-mono);
font-size: 11px;
color: var(--accent);
letter-spacing: 0.05em;
}
.tradition-tile .tt-desc {
font-family: var(--font-sans);
font-size: 12px;
color: var(--text-secondary);
line-height: 1.5;
margin-top: 4px;
}
.tradition-tile .tt-spirits {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 6px;
}
.tradition-tile .tt-spirit {
padding: 2px 7px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
border-radius: 2px;
letter-spacing: 0.05em;
}
.tradition-tile.selected .tt-spirit {
border-color: var(--accent-dim);
color: var(--accent);
}
/* Drain formula / dice pool summary */
.magic-summary {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
padding: 16px 20px;
background: var(--bg-surface);
border: 1px solid var(--border-base);
border-radius: 3px;
margin-bottom: 20px;
}
.magic-stat {
display: flex;
flex-direction: column;
gap: 3px;
}
.magic-stat .m-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.magic-stat .m-value {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 600;
color: var(--text-primary);
}
.magic-stat .m-value.accent { color: var(--accent-bright); }
.magic-stat .m-hint {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-faint);
}
/* Spell table */
.spell-table {
background: var(--bg-surface);
border: 1px solid var(--border-base);
border-radius: 3px;
overflow: hidden;
margin-bottom: 16px;
}
.spell-table-head,
.spell-row {
display: grid;
grid-template-columns: 1.4fr 70px 70px 80px 80px 80px 70px 28px;
gap: 8px;
padding: 10px 16px;
align-items: center;
}
.spell-table-head {
background: var(--bg-base);
border-bottom: 1px solid var(--border-base);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.spell-row {
border-top: 1px solid var(--border-subtle);
transition: background 100ms var(--ease-out);
}
.spell-row:hover { background: var(--bg-hover); }
.spell-row.combat { border-left: 2px solid rgba(227, 93, 106, 0.5); }
.spell-row.detection { border-left: 2px solid rgba(140, 200, 140, 0.5); }
.spell-row.health { border-left: 2px solid rgba(120, 180, 220, 0.5); }
.spell-row.illusion { border-left: 2px solid rgba(180, 140, 220, 0.5); }
.spell-row.manipulation{ border-left: 2px solid rgba(240, 168, 66, 0.5); }
.spell-row .sp-name {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
}
.spell-row .sp-name .sp-desc {
display: block;
font-family: var(--font-sans);
font-size: 12px;
color: var(--text-secondary);
font-weight: 400;
margin-top: 3px;
line-height: 1.4;
}
.spell-row .sp-stat {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-secondary);
text-align: center;
}
.spell-row .sp-stat.drain {
color: var(--accent);
font-weight: 600;
}
.spell-row .sp-stat.type-M { color: #b799e0; }
.spell-row .sp-stat.type-P { color: #e09d70; }
.spell-empty {
padding: 36px 20px;
text-align: center;
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 12px;
font-style: italic;
}
/* Drain calculator — interactive preview at the top of the spell list */
.drain-preview {
padding: 14px 20px;
background: var(--bg-surface);
border: 1px solid var(--accent-dim);
border-left: 2px solid var(--accent);
border-radius: 2px;
margin-bottom: 16px;
display: grid;
grid-template-columns: auto auto 1fr;
gap: 20px;
align-items: center;
}
.drain-preview .dp-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.drain-preview .dp-value {
font-family: var(--font-mono);
font-size: 15px;
color: var(--accent-bright);
font-weight: 600;
}
.drain-preview .dp-hint {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
}
.drain-preview .dp-force-input {
display: flex;
align-items: center;
gap: 8px;
}
.drain-preview label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
color: var(--text-muted);
text-transform: uppercase;
}
.drain-preview .dp-force-input input {
width: 60px;
padding: 5px 8px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 14px;
text-align: center;
border-radius: 2px;
}
/* Spell category stat chip coloring in picker */
.picker-item.combat .pi-meta::before { content: '● '; color: rgba(227, 93, 106, 0.8); }
.picker-item.detection .pi-meta::before { content: '● '; color: rgba(140, 200, 140, 0.8); }
.picker-item.health .pi-meta::before { content: '● '; color: rgba(120, 180, 220, 0.8); }
.picker-item.illusion .pi-meta::before { content: '● '; color: rgba(180, 140, 220, 0.8); }
.picker-item.manipulation .pi-meta::before { content: '● '; color: rgba(240, 168, 66, 0.8); }
/* Spell stat grid in picker details (similar to weapon stat grid) */
.spell-stat-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
padding: 12px 14px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 2px;
}
/* ============================================================
Phase 5b: Adept Powers
============================================================ */
/* Power Points meter (similar to essence meter from Phase 4b) */
.pp-meter {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 20px;
align-items: center;
padding: 16px 20px;
background: var(--bg-surface);
border: 1px solid var(--border-base);
border-radius: 3px;
margin-bottom: 18px;
}
.pp-meter .pp-big {
display: flex;
flex-direction: column;
gap: 2px;
}
.pp-meter .pp-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.pp-meter .pp-value {
font-family: var(--font-mono);
font-size: 32px;
font-weight: 700;
color: var(--accent-bright);
line-height: 1;
}
.pp-meter .pp-value.over { color: var(--bad); }
.pp-meter .pp-value.done { color: var(--good); }
.pp-meter .pp-max {
font-size: 14px;
color: var(--text-muted);
font-weight: 400;
}
.pp-meter .pp-bar {
height: 12px;
background: var(--bg-base);
border: 1px solid var(--border-base);
border-radius: 2px;
overflow: hidden;
}
.pp-meter .pp-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent) 0%, var(--accent-bright) 100%);
transition: width 300ms var(--ease-out);
}
.pp-meter .pp-bar-fill.over {
background: linear-gradient(90deg, var(--bad) 0%, #f08080 100%);
}
.pp-meter .pp-bar-fill.done {
background: linear-gradient(90deg, var(--good) 0%, #90d090 100%);
}
/* Mystic Adept split slider */
.ma-split {
padding: 16px 20px;
background: var(--bg-surface);
border: 1px solid var(--border-base);
border-radius: 3px;
margin-bottom: 18px;
}
.ma-split-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 10px;
}
.ma-split-header .ma-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.ma-split-header .ma-values {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-secondary);
}
.ma-split-header .ma-values strong {
color: var(--accent-bright);
font-weight: 600;
}
.ma-slider-row {
display: flex;
gap: 12px;
align-items: center;
}
.ma-slider {
flex: 1;
-webkit-appearance: none;
appearance: none;
height: 6px;
background: var(--bg-base);
border-radius: 3px;
outline: none;
cursor: pointer;
border: 1px solid var(--border-subtle);
}
.ma-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
background: var(--accent);
border: 2px solid var(--bg-base);
border-radius: 50%;
cursor: grab;
box-shadow: 0 0 0 1px var(--accent-dim);
transition: transform 100ms var(--ease-out);
}
.ma-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.ma-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.05); }
.ma-slider::-moz-range-thumb {
width: 16px;
height: 16px;
background: var(--accent);
border: 2px solid var(--bg-base);
border-radius: 50%;
cursor: grab;
box-shadow: 0 0 0 1px var(--accent-dim);
}
.ma-slider-num {
width: 40px;
padding: 4px 6px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 13px;
text-align: center;
border-radius: 2px;
}
/* Adept power table */
.power-table {
background: var(--bg-surface);
border: 1px solid var(--border-base);
border-radius: 3px;
overflow: hidden;
margin-bottom: 16px;
}
.power-table-head,
.power-row {
display: grid;
grid-template-columns: 1.6fr 100px 70px 110px 60px 28px;
gap: 10px;
padding: 10px 16px;
align-items: center;
}
.power-table-head {
background: var(--bg-base);
border-bottom: 1px solid var(--border-base);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.power-row {
border-top: 1px solid var(--border-subtle);
transition: background 100ms var(--ease-out);
}
.power-row:hover { background: var(--bg-hover); }
.power-row .pwr-name {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
}
.power-row .pwr-name .pwr-selection {
color: var(--accent);
font-weight: 400;
margin-left: 4px;
font-style: italic;
}
.power-row .pwr-desc {
grid-column: 1;
font-family: var(--font-sans);
font-size: 12px;
color: var(--text-secondary);
line-height: 1.5;
margin-top: 4px;
}
.power-row .pwr-meta-row {
grid-column: 1;
margin-top: 3px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-faint);
letter-spacing: 0.05em;
}
.power-row .pwr-stat {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-secondary);
text-align: center;
}
.power-row .pwr-stat.pp {
color: var(--accent);
font-weight: 600;
}
.power-row .pwr-level {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
/* Source pill on each power for visual distinction */
.power-source-pill {
display: inline-block;
padding: 1px 6px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.05em;
border-radius: 2px;
margin-left: 8px;
text-transform: uppercase;
}
.power-source-pill.crb { color: var(--accent); border-color: var(--accent-dim); }
.power-source-pill.sg { color: #b799e0; border-color: #6a5494; }
.power-source-pill.ss { color: #9cb4cc; border-color: #5a7290; }
/* Selection prompt within picker details */
.power-selection-row {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px 12px;
background: var(--bg-surface);
border: 1px solid var(--accent-dim);
border-radius: 2px;
margin-top: 8px;
}
.power-selection-row label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.power-selection-row input,
.power-selection-row select {
padding: 6px 10px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 13px;
border-radius: 2px;
}
.power-selection-row input:focus,
.power-selection-row select:focus {
outline: none;
border-color: var(--accent);
}
.adept-empty {
padding: 36px 20px;
text-align: center;
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 12px;
font-style: italic;
}
/* ============================================================
Phase 4c — Identity + Equipment (generic)
============================================================ */
/* Identity sub-tab — SINs + licenses editor rows */
.identity-group {
background: var(--bg-surface);
border: 1px solid var(--border-base);
border-radius: 3px;
overflow: hidden;
margin-bottom: 16px;
}
.identity-group-header {
padding: 10px 16px;
background: var(--bg-base);
border-bottom: 1px solid var(--border-base);
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.2em;
color: var(--text-muted);
text-transform: uppercase;
}
.identity-group-header .ig-hint {
font-size: 10px;
letter-spacing: 0.05em;
color: var(--text-faint);
text-transform: none;
}
.identity-head {
display: grid;
grid-template-columns: 1.5fr 60px 90px 1.4fr 90px 28px;
gap: 10px;
padding: 8px 16px;
background: var(--bg-base);
border-bottom: 1px solid var(--border-subtle);
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.sin-row,
.license-row {
display: grid;
grid-template-columns: 1.5fr 60px 90px 1.4fr 90px 28px;
gap: 10px;
padding: 10px 16px;
align-items: center;
border-top: 1px solid var(--border-subtle);
transition: background 100ms var(--ease-out);
}
.sin-row:hover,
.license-row:hover { background: var(--bg-hover); }
.sin-row input[type="text"],
.license-row input[type="text"],
.license-row select {
padding: 5px 8px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 13px;
border-radius: 2px;
width: 100%;
}
.sin-row input[type="text"]:focus,
.license-row input[type="text"]:focus,
.license-row select:focus {
outline: none;
border-color: var(--accent);
}
.sin-row .sin-rating,
.license-row .lic-rating {
display: flex;
gap: 4px;
align-items: center;
justify-content: center;
}
.rating-num-input {
width: 42px;
padding: 4px 6px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 13px;
border-radius: 2px;
text-align: center;
}
.rating-num-input:focus {
outline: none;
border-color: var(--accent);
}
.sin-row .sin-stat,
.license-row .lic-stat {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-secondary);
text-align: center;
}
.sin-row .cost,
.license-row .cost {
color: var(--accent);
font-weight: 600;
text-align: right;
}
.sin-row .sin-desc {
grid-column: 1 / -1;
padding-top: 4px;
font-family: var(--font-sans);
font-size: 11px;
color: var(--text-secondary);
line-height: 1.4;
font-style: italic;
}
.linked-badge {
display: inline-block;
padding: 2px 6px;
background: var(--bg-surface);
border: 1px solid var(--accent-dim);
color: var(--accent);
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.05em;
border-radius: 2px;
margin-left: 6px;
text-transform: uppercase;
}
.identity-note {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
padding: 10px 16px;
border-top: 1px solid var(--border-subtle);
background: rgba(240, 168, 66, 0.03);
line-height: 1.5;
}
.identity-actions {
display: flex;
gap: 10px;
margin: 12px 0;
flex-wrap: wrap;
}
/* Generic equipment table — for Electronics, Security, Medical, Misc */
.equip-table {
background: var(--bg-surface);
border: 1px solid var(--border-base);
border-radius: 3px;
overflow: hidden;
margin-top: 12px;
}
.equip-head,
.equip-row {
display: grid;
grid-template-columns: 2fr 1fr 70px 80px 90px 28px;
gap: 12px;
padding: 10px 16px;
align-items: center;
}
.equip-head {
background: var(--bg-base);
border-bottom: 1px solid var(--border-base);
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.equip-row {
border-top: 1px solid var(--border-subtle);
transition: background 100ms var(--ease-out);
}
.equip-row:hover { background: var(--bg-hover); }
.equip-row .er-name {
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-primary);
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
}
.equip-row .er-cat {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
letter-spacing: 0.05em;
text-transform: uppercase;
}
.equip-row .er-rating,
.equip-row .er-avail {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-secondary);
text-align: center;
}
.equip-row .er-cost {
font-family: var(--font-mono);
font-size: 12px;
color: var(--accent);
font-weight: 600;
text-align: right;
}
.equip-empty {
padding: 48px 20px;
text-align: center;
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 12px;
font-style: italic;
}
.equip-row-desc {
grid-column: 1 / -1;
padding-top: 6px;
font-size: 11px;
color: var(--text-secondary);
line-height: 1.4;
font-style: italic;
}
.equip-row .rating-stepper {
display: flex;
gap: 4px;
align-items: center;
justify-content: center;
}
.equip-row .rating-stepper button {
width: 18px;
height: 18px;
border: 1px solid var(--border-subtle);
background: var(--bg-base);
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 10px;
border-radius: 2px;
cursor: pointer;
padding: 0;
}
.equip-row .rating-stepper button:hover:not(:disabled) {
border-color: var(--accent);
color: var(--accent);
}
.equip-row .rating-stepper button:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.equip-row .rating-stepper .r-val {
min-width: 18px;
text-align: center;
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-primary);
}
.btn-row-remove {
width: 24px;
height: 24px;
border: 1px solid var(--border-subtle);
background: transparent;
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 14px;
line-height: 1;
border-radius: 2px;
cursor: pointer;
padding: 0;
transition: all 100ms var(--ease-out);
}
.btn-row-remove:hover {
border-color: var(--bad);
color: var(--bad);
}
/* Equipment actions bar — add buttons for each tab */
.equip-actions {
display: flex;
gap: 10px;
margin: 12px 0;
flex-wrap: wrap;
}
/* ============================================================
Phase 5c — Complex Forms table
============================================================ */
.cf-head,
.cf-row {
display: grid;
grid-template-columns: 2fr 90px 90px 80px 100px 28px;
gap: 12px;
padding: 10px 16px;
align-items: center;
}
.cf-head {
background: var(--bg-base);
border-bottom: 1px solid var(--border-base);
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.cf-row {
border-top: 1px solid var(--border-subtle);
transition: background 100ms var(--ease-out);
}
.cf-row:hover { background: var(--bg-hover); }
.cf-row .cf-name {
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-primary);
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.cf-row .cf-selection {
font-family: var(--font-mono);
font-size: 10px;
color: var(--accent);
letter-spacing: 0.05em;
}
.cf-row .cf-target,
.cf-row .cf-duration,
.cf-row .cf-fade,
.cf-row .cf-fade-preview {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-secondary);
text-align: center;
}
.cf-row .cf-fade-preview {
font-weight: 600;
}
.cf-row .cf-desc {
grid-column: 1 / -1;
padding-top: 6px;
font-size: 11px;
color: var(--text-secondary);
line-height: 1.4;
font-style: italic;
}
/* ============================================================
Phase 5d — Magical Equipment (foci, reagents, lodges)
============================================================ */
.foci-limits-ribbon {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
align-items: start;
}
.fl-stat .fl-label {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
margin-bottom: 4px;
}
.fl-stat .fl-value {
font-family: var(--font-sans);
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.1;
}
.fl-stat .fl-hint {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
margin-top: 3px;
font-style: italic;
}
.foci-warning {
margin-top: 12px;
padding: 10px 14px;
background: rgba(255, 108, 92, 0.12);
border-left: 3px solid var(--bad);
border-radius: 3px;
font-size: 12px;
font-family: var(--font-mono);
color: var(--bad);
}
.foci-warning div + div { margin-top: 4px; }
/* Focus table */
.focus-head,
.focus-row {
display: grid;
grid-template-columns: 2fr 1.3fr 70px 60px 95px 60px 55px 28px;
gap: 12px;
padding: 10px 16px;
align-items: center;
}
.focus-head {
background: var(--bg-base);
border-bottom: 1px solid var(--border-base);
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.focus-row {
border-top: 1px solid var(--border-subtle);
transition: background 100ms var(--ease-out);
}
.focus-row:hover { background: var(--bg-hover); }
.focus-name {
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-primary);
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.focus-subtype {
font-family: var(--font-mono);
font-size: 10px;
color: var(--accent);
letter-spacing: 0.03em;
}
.focus-cat,
.focus-karma,
.focus-nuyen,
.focus-avail {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
}
.focus-karma { color: var(--accent); font-weight: 600; }
.focus-nuyen { text-align: right; }
.focus-bonded { text-align: center; }
.focus-bonded input[type=checkbox] {
accent-color: var(--accent);
cursor: pointer;
}
/* Per-category tint on the left border */
.focus-row.focus-cat-enchanting { border-left: 3px solid #8bc34a; }
.focus-row.focus-cat-metamagic { border-left: 3px solid #ba68c8; }
.focus-row.focus-cat-power { border-left: 3px solid #ffb74d; }
.focus-row.focus-cat-qi { border-left: 3px solid #ff8a65; }
.focus-row.focus-cat-spell { border-left: 3px solid #4fc3f7; }
.focus-row.focus-cat-spirit { border-left: 3px solid #9fa8da; }
.focus-row.focus-cat-weapon { border-left: 3px solid #e57373; }
/* Reagent table */
.reagent-head,
.reagent-row {
display: grid;
grid-template-columns: 2fr 120px 110px 80px 28px;
gap: 12px;
padding: 10px 16px;
align-items: center;
}
.reagent-head {
background: var(--bg-base);
border-bottom: 1px solid var(--border-base);
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.reagent-row {
border-top: 1px solid var(--border-subtle);
transition: background 100ms var(--ease-out);
}
.reagent-row:hover { background: var(--bg-hover); }
.reagent-grade-name {
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-primary);
font-weight: 500;
}
.reagent-cost,
.reagent-avail {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
}
.reagent-row.reagent-grade-raw { border-left: 3px solid var(--border-base); }
.reagent-row.reagent-grade-refined { border-left: 3px solid var(--accent); }
.reagent-row.reagent-grade-radical { border-left: 3px solid var(--bad); }
.reagent-drams input {
background: var(--bg-base);
border: 1px solid var(--border-subtle);
color: var(--text-primary);
padding: 4px 8px;
font-family: var(--font-mono);
font-size: 12px;
border-radius: 2px;
}
/* Reagent grade cards on the picker */
.reagent-grade-options {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 8px;
}
.reagent-grade-option {
padding: 12px 14px;
border: 1px solid var(--border-subtle);
border-radius: 3px;
cursor: pointer;
transition: border-color 100ms var(--ease-out), background 100ms var(--ease-out);
}
.reagent-grade-option:hover {
background: var(--bg-hover);
}
.reagent-grade-option.selected {
border-color: var(--accent);
background: rgba(240, 168, 66, 0.08);
}
.rgo-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 5px;
}
.rgo-name {
font-family: var(--font-sans);
font-weight: 600;
color: var(--text-primary);
font-size: 13px;
}
.rgo-cost {
font-family: var(--font-mono);
font-size: 11px;
color: var(--accent);
}
.rgo-desc {
font-size: 11px;
color: var(--text-secondary);
line-height: 1.4;
font-style: italic;
}
/* Lodge table */
.lodge-head,
.lodge-row {
display: grid;
grid-template-columns: 2fr 120px 110px 80px 28px;
gap: 12px;
padding: 10px 16px;
align-items: center;
}
.lodge-head {
background: var(--bg-base);
border-bottom: 1px solid var(--border-base);
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.lodge-row {
border-top: 1px solid var(--border-subtle);
transition: background 100ms var(--ease-out);
}
.lodge-row:hover { background: var(--bg-hover); }
.lodge-name {
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-primary);
font-weight: 500;
}
.lodge-cost,
.lodge-avail {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
}
/* ============================================================
Phase 6a — Matrix (ASDF configurator, deck picker, programs)
============================================================ */
/* Deck picker — multiple owned decks */
.deck-picker {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
.deck-card {
padding: 14px;
border: 1px solid var(--border-subtle);
border-radius: 3px;
cursor: pointer;
position: relative;
transition: border-color 100ms var(--ease-out), background 100ms var(--ease-out);
}
.deck-card:hover {
background: var(--bg-hover);
}
.deck-card.active {
border-color: var(--accent);
background: rgba(240, 168, 66, 0.08);
}
.deck-card .dc-name {
font-family: var(--font-sans);
font-weight: 600;
color: var(--text-primary);
font-size: 13px;
margin-bottom: 4px;
}
.deck-card .dc-meta {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
letter-spacing: 0.03em;
}
.deck-card .dc-badge {
position: absolute;
top: 8px;
right: 8px;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.1em;
color: var(--accent);
background: var(--bg-base);
padding: 2px 6px;
border: 1px solid var(--accent);
text-transform: uppercase;
border-radius: 2px;
}
/* Deck summary — shown below picker/single-deck when booted */
.deck-summary {
padding: 12px 14px;
background: var(--bg-base);
border-radius: 3px;
border-left: 3px solid var(--accent);
}
.deck-summary .ds-name {
font-family: var(--font-sans);
font-weight: 600;
font-size: 14px;
margin-bottom: 8px;
}
.deck-summary .ds-stats {
display: flex;
flex-wrap: wrap;
gap: 20px;
font-size: 12px;
font-family: var(--font-mono);
}
.deck-summary .ds-stats > span {
display: flex;
flex-direction: column;
gap: 2px;
}
/* ASDF configurator */
.asdf-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.asdf-card {
padding: 18px 14px;
border: 1px solid var(--border-subtle);
border-radius: 3px;
cursor: pointer;
text-align: center;
position: relative;
transition: all 120ms var(--ease-out);
background: var(--bg-base);
}
.asdf-card:hover {
background: var(--bg-hover);
border-color: var(--border-base);
}
.asdf-card.selected {
border-color: var(--accent);
background: rgba(240, 168, 66, 0.12);
box-shadow: 0 0 0 1px var(--accent);
}
.asdf-card.living {
cursor: default;
}
.asdf-card.living:hover {
background: var(--bg-base);
border-color: var(--border-subtle);
}
.asdf-card .asdf-short {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--text-muted);
margin-bottom: 6px;
}
.asdf-card .asdf-label {
font-family: var(--font-sans);
font-size: 11px;
color: var(--text-secondary);
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.asdf-card .asdf-value {
font-family: var(--font-sans);
font-size: 36px;
font-weight: 300;
color: var(--accent);
line-height: 1;
}
.asdf-card .asdf-derived {
font-family: var(--font-mono);
font-size: 10px;
margin-top: 6px;
letter-spacing: 0.05em;
}
/* Programs panel — two columns (loaded / stored) */
.programs-split {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 200px;
}
.ps-col {
padding: 16px;
}
.ps-col:first-child {
border-right: 1px solid var(--border-subtle);
}
.ps-heading {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.2em;
color: var(--text-muted);
margin-bottom: 12px;
text-transform: uppercase;
}
.ps-empty {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
font-style: italic;
padding: 12px 0;
}
.ps-row {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 12px;
padding: 10px 12px;
border: 1px solid var(--border-subtle);
border-radius: 3px;
margin-bottom: 6px;
transition: background 100ms var(--ease-out);
}
.ps-row:hover {
background: var(--bg-hover);
}
.ps-row.loaded {
border-left: 3px solid var(--accent);
}
.ps-row.stored {
border-left: 3px solid var(--border-subtle);
}
.ps-row.hacking {
border-left-color: var(--bad);
}
.ps-row.loaded.hacking {
border-left-color: var(--bad);
}
.ps-name {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
color: var(--text-primary);
grid-column: 1 / 2;
}
.ps-desc {
grid-column: 1 / 2;
grid-row: 2;
font-size: 10px;
color: var(--text-secondary);
font-style: italic;
line-height: 1.3;
margin-top: 2px;
}
.ps-btn {
grid-column: 2 / 3;
grid-row: 1 / 3;
font-size: 10px;
padding: 6px 10px;
}
/* ============================================================
Phase 6b — Sprites (roster, compile dialog, reference)
============================================================ */
/* Stats ribbon — mirrors foci-limits-ribbon pattern */
.sprite-ribbon {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
align-items: start;
}
.sr-stat .sr-label {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
margin-bottom: 4px;
}
.sr-stat .sr-value {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.1;
}
.sr-stat .sr-hint {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
margin-top: 3px;
font-style: italic;
}
/* Sprite roster rows */
.sprite-head,
.sprite-row {
display: grid;
grid-template-columns: 1.8fr 70px 40px 40px 40px 40px 1.2fr 55px 115px 28px;
gap: 10px;
padding: 10px 16px;
align-items: center;
}
.sprite-head {
background: var(--bg-base);
border-bottom: 1px solid var(--border-base);
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.sprite-row {
border-top: 1px solid var(--border-subtle);
transition: background 100ms var(--ease-out);
}
.sprite-row:hover { background: var(--bg-hover); }
.sprite-row .sp-name {
display: flex;
flex-direction: column;
gap: 2px;
}
.sp-nickname {
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-primary);
font-weight: 500;
}
.sp-type {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.03em;
}
.sp-stat {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-secondary);
text-align: center;
}
.sp-init {
font-size: 10px;
white-space: nowrap;
}
.sp-tasks input {
background: var(--bg-base);
border: 1px solid var(--border-subtle);
color: var(--text-primary);
padding: 3px 6px;
font-family: var(--font-mono);
font-size: 11px;
border-radius: 2px;
}
.sp-state select,
.input-inline {
background: var(--bg-base);
border: 1px solid var(--border-subtle);
color: var(--text-primary);
padding: 3px 6px;
font-family: var(--font-mono);
font-size: 11px;
border-radius: 2px;
width: 100%;
}
.sp-details {
grid-column: 1 / -1;
padding-top: 4px;
font-size: 11px;
color: var(--text-secondary);
line-height: 1.4;
}
/* Per-sprite-type left border tint */
.sprite-row.sprite-courier { border-left: 3px solid #4fc3f7; }
.sprite-row.sprite-crack { border-left: 3px solid #ba68c8; }
.sprite-row.sprite-data { border-left: 3px solid #8bc34a; }
.sprite-row.sprite-fault { border-left: 3px solid #e57373; }
.sprite-row.sprite-machine { border-left: 3px solid #ffb74d; }
/* Compile dialog — sprite type cards */
.sprite-type-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
margin-bottom: 8px;
}
.sprite-type-card {
padding: 12px 14px;
border: 1px solid var(--border-subtle);
border-radius: 3px;
cursor: pointer;
transition: border-color 100ms var(--ease-out), background 100ms var(--ease-out);
}
.sprite-type-card:hover { background: var(--bg-hover); }
.sprite-type-card.selected {
border-color: var(--accent);
background: rgba(240, 168, 66, 0.08);
}
.sprite-type-card.sprite-courier { border-left: 3px solid #4fc3f7; }
.sprite-type-card.sprite-crack { border-left: 3px solid #ba68c8; }
.sprite-type-card.sprite-data { border-left: 3px solid #8bc34a; }
.sprite-type-card.sprite-fault { border-left: 3px solid #e57373; }
.sprite-type-card.sprite-machine { border-left: 3px solid #ffb74d; }
.stc-name {
font-family: var(--font-sans);
font-weight: 600;
color: var(--text-primary);
font-size: 13px;
margin-bottom: 4px;
}
.stc-desc {
font-size: 11px;
color: var(--text-secondary);
font-style: italic;
line-height: 1.4;
margin-bottom: 6px;
}
.stc-powers {
font-size: 10px;
color: var(--accent);
letter-spacing: 0.02em;
}
/* Sprite stat preview card in compile dialog */
.sprite-preview-card {
padding: 14px 16px;
background: var(--bg-base);
border-radius: 3px;
border-left: 3px solid var(--accent);
}
.spc-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 10px;
}
.spc-name {
font-family: var(--font-sans);
font-weight: 600;
color: var(--text-primary);
font-size: 13px;
}
.spc-init {
font-size: 11px;
color: var(--text-muted);
}
.spc-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin-bottom: 10px;
}
.spc-stat {
text-align: center;
padding: 6px;
background: var(--bg-hover);
border-radius: 2px;
}
.spc-lbl {
font-family: var(--font-mono);
font-size: 9px;
color: var(--text-muted);
letter-spacing: 0.15em;
margin-bottom: 2px;
}
.spc-val {
font-family: var(--font-sans);
font-size: 20px;
font-weight: 600;
color: var(--accent);
}
.spc-meta {
font-size: 11px;
color: var(--text-secondary);
line-height: 1.6;
}
/* Context text under the preview */
.sprite-context {
padding: 10px 14px;
background: rgba(240, 168, 66, 0.04);
border-left: 2px solid var(--accent);
border-radius: 2px;
font-size: 11px;
color: var(--text-secondary);
line-height: 1.5;
}
.sprite-context div + div { margin-top: 4px; }
/* Sprite reference modal grid */
.sprite-reference-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.sprite-ref-card {
padding: 14px 16px;
border: 1px solid var(--border-subtle);
border-radius: 3px;
border-left-width: 3px;
}
.sprite-ref-card.sprite-courier { border-left-color: #4fc3f7; }
.sprite-ref-card.sprite-crack { border-left-color: #ba68c8; }
.sprite-ref-card.sprite-data { border-left-color: #8bc34a; }
.sprite-ref-card.sprite-fault { border-left-color: #e57373; }
.sprite-ref-card.sprite-machine { border-left-color: #ffb74d; }
.src-name {
font-family: var(--font-sans);
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
}
.src-desc {
font-size: 12px;
color: var(--text-secondary);
font-style: italic;
line-height: 1.4;
margin-bottom: 10px;
}
.src-stats {
display: flex;
flex-wrap: wrap;
gap: 14px;
font-size: 11px;
padding: 6px 10px;
background: var(--bg-base);
border-radius: 2px;
margin-bottom: 8px;
}
.src-stats span { color: var(--text-muted); }
.src-stats strong { color: var(--accent); font-weight: 600; }
.src-skills, .src-powers {
font-size: 11px;
color: var(--text-primary);
margin-bottom: 6px;
line-height: 1.5;
}
.src-powers ul {
margin: 4px 0 0 16px;
padding: 0;
list-style: disc;
}
.src-powers li {
margin-bottom: 2px;
}
.src-source {
font-size: 9px;
letter-spacing: 0.1em;
margin-top: 6px;
opacity: 0.6;
}
/* ============================================================
Phase 6c — Echoes + Matrix Actions Reference
============================================================ */
/* Header-right slot for action buttons next to the page title */
.content-header {
display: flex;
align-items: baseline;
gap: 14px;
flex-wrap: wrap;
}
.content-header-right {
margin-left: auto;
}
/* Echoes roster */
.echo-head,
.echo-row {
display: grid;
grid-template-columns: 1.6fr 2fr 90px 28px;
gap: 12px;
padding: 10px 16px;
align-items: start;
}
.echo-head {
background: var(--bg-base);
border-bottom: 1px solid var(--border-base);
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.echo-row {
border-top: 1px solid var(--border-subtle);
transition: background 100ms var(--ease-out);
}
.echo-row:hover { background: var(--bg-hover); }
.echo-row.echo-core { border-left: 3px solid var(--accent); }
.echo-row.echo-splat { border-left: 3px solid #ba68c8; }
.echo-name {
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-primary);
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.echo-selection {
font-family: var(--font-mono);
font-size: 10px;
color: var(--accent);
letter-spacing: 0.03em;
}
.echo-summary {
font-size: 12px;
color: var(--text-secondary);
font-style: italic;
line-height: 1.4;
}
.echo-source {
font-size: 10px;
color: var(--text-muted);
letter-spacing: 0.03em;
}
.echo-extra {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 10px;
padding-top: 6px;
}
.echo-extra input {
max-width: 240px;
}
.echo-description {
grid-column: 1 / -1;
padding-top: 6px;
font-size: 11px;
color: var(--text-secondary);
line-height: 1.5;
}
/* Matrix Actions Reference — toolbar + rows */
.mar-toolbar {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 16px;
}
.mar-chips {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.mar-chip {
padding: 5px 10px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
border-radius: 2px;
cursor: pointer;
transition: all 100ms var(--ease-out);
}
.mar-chip:hover { background: var(--bg-hover); }
.mar-chip.active {
border-color: var(--accent);
color: var(--accent);
background: rgba(240, 168, 66, 0.08);
}
.mar-category-group {
margin-bottom: 18px;
padding-left: 12px;
}
.mar-cat-heading {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 8px;
font-weight: 600;
}
.mar-row {
padding: 8px 10px 10px;
border-bottom: 1px solid var(--border-subtle);
transition: background 80ms var(--ease-out);
}
.mar-row:hover { background: var(--bg-hover); }
.mar-row:last-child { border-bottom: none; }
.mar-row-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin-bottom: 3px;
}
.mar-name {
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-primary);
font-weight: 500;
}
.mar-meta {
font-size: 10px;
display: flex;
gap: 10px;
align-items: baseline;
color: var(--text-muted);
}
.mar-marks {
color: var(--accent);
letter-spacing: 0.1em;
min-width: 36px;
text-align: right;
}
.mar-type {
color: var(--text-secondary);
font-weight: 600;
}
.mar-source {
opacity: 0.6;
}
.mar-test {
font-size: 11px;
color: var(--text-primary);
margin-bottom: 4px;
}
.mar-opposed {
color: var(--text-secondary);
}
.mar-desc {
font-size: 11px;
color: var(--text-secondary);
font-style: italic;
line-height: 1.4;
}
/* ============================================================
Phase 7 — Rigging (vehicles, drones, RCCs, autosofts)
============================================================ */
/* Vehicle rows */
.veh-head,
.veh-row {
display: grid;
grid-template-columns: 1.8fr 45px 40px 40px 45px 40px 45px 45px 45px 95px 28px;
gap: 8px;
padding: 8px 14px;
align-items: center;
}
.veh-head {
background: var(--bg-base);
border-bottom: 1px solid var(--border-base);
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.veh-row {
border-top: 1px solid var(--border-subtle);
transition: background 100ms var(--ease-out);
}
.veh-row:hover { background: var(--bg-hover); }
/* Per-category left border tint */
.veh-row.veh-bike { border-left: 3px solid #4fc3f7; }
.veh-row.veh-car { border-left: 3px solid var(--accent); }
.veh-row.veh-truck { border-left: 3px solid #ffb74d; }
.veh-row.veh-aircraft { border-left: 3px solid #ba68c8; }
.veh-row.veh-watercraft { border-left: 3px solid #4db6ac; }
.veh-row .veh-name {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.vn-name {
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-primary);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vn-cat {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.03em;
text-transform: capitalize;
}
.veh-stat {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-secondary);
text-align: center;
}
.veh-cost {
font-size: 11px;
color: var(--accent);
text-align: right;
}
.veh-details {
grid-column: 1 / -1;
padding-top: 4px;
font-size: 11px;
color: var(--text-secondary);
line-height: 1.4;
font-style: italic;
}
.veh-notes {
grid-column: 1 / -1;
padding-top: 6px;
}
/* Drone rows (different shape — more vertical) */
.drone-size-head {
padding: 8px 16px;
background: var(--bg-base);
border-bottom: 1px solid var(--border-base);
border-top: 1px solid var(--border-base);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.2em;
color: var(--accent);
text-transform: uppercase;
font-weight: 600;
}
.drone-row {
padding: 12px 16px;
border-bottom: 1px solid var(--border-subtle);
transition: background 100ms var(--ease-out);
}
.drone-row:hover { background: var(--bg-hover); }
.drone-head {
display: grid;
grid-template-columns: 2fr 3fr 200px 28px;
gap: 12px;
align-items: center;
margin-bottom: 6px;
}
.dr-name {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
}
.dr-stats {
display: flex;
gap: 12px;
font-size: 10px;
color: var(--text-secondary);
flex-wrap: wrap;
}
.dr-stats span { white-space: nowrap; }
.dr-cost {
text-align: right;
font-size: 11px;
color: var(--accent);
}
.dr-desc {
font-size: 11px;
color: var(--text-secondary);
font-style: italic;
margin-bottom: 10px;
line-height: 1.4;
}
.dr-autosofts {
padding: 8px 10px;
background: var(--bg-base);
border-radius: 2px;
border-left: 2px solid var(--accent);
}
.dr-autosofts-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.dr-no-autosofts {
font-size: 11px;
font-style: italic;
padding: 4px 0;
}
.dr-autosoft-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.dr-autosoft-row {
display: grid;
grid-template-columns: 1.6fr 40px 1.4fr 80px 28px;
gap: 10px;
align-items: center;
padding: 4px 0;
font-size: 11px;
}
.dr-as-name {
color: var(--text-primary);
font-weight: 500;
}
.dr-as-rating {
color: var(--accent);
font-size: 10px;
}
.dr-as-spec {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.03em;
}
.dr-as-cost {
text-align: right;
color: var(--text-secondary);
font-size: 10px;
}
/* Small button variant */
.btn.btn-small {
padding: 3px 8px;
font-size: 10px;
}
/* Autosoft picker */
.autosoft-type-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
}
.autosoft-type-card {
padding: 12px 14px;
border: 1px solid var(--border-subtle);
border-radius: 3px;
cursor: pointer;
transition: border-color 100ms var(--ease-out), background 100ms var(--ease-out);
}
.autosoft-type-card:hover { background: var(--bg-hover); }
.autosoft-type-card.selected {
border-color: var(--accent);
background: rgba(240, 168, 66, 0.08);
}
.atc-name {
font-family: var(--font-sans);
font-weight: 600;
color: var(--text-primary);
font-size: 13px;
margin-bottom: 4px;
}
.atc-desc {
font-size: 11px;
color: var(--text-secondary);
font-style: italic;
line-height: 1.4;
margin-bottom: 6px;
}
.atc-tag {
display: inline-block;
padding: 2px 6px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: 2px;
font-size: 9px;
color: var(--text-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.autosoft-preview {
margin-top: 14px;
padding: 12px 14px;
background: var(--bg-base);
border-left: 3px solid var(--accent);
border-radius: 2px;
font-size: 12px;
color: var(--text-primary);
}
.autosoft-preview > div + div {
margin-top: 2px;
}
/* RCC cards */
.rcc-card {
padding: 14px 16px;
border: 1px solid var(--border-subtle);
border-left: 3px solid var(--accent);
border-radius: 3px;
margin-bottom: 12px;
}
.rcc-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 10px;
}
.rcc-name {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
}
.rcc-source {
font-size: 10px;
letter-spacing: 0.03em;
}
.rcc-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin-bottom: 10px;
}
.rcc-stat {
text-align: center;
padding: 6px;
background: var(--bg-base);
border-radius: 2px;
}
.rcc-lbl {
font-family: var(--font-mono);
font-size: 9px;
color: var(--text-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 2px;
}
.rcc-val {
font-family: var(--font-sans);
font-size: 20px;
font-weight: 600;
color: var(--accent);
}
.rcc-hint {
font-size: 11px;
font-style: italic;
line-height: 1.5;
}
.rcc-drones {
margin-top: 14px;
padding: 10px 12px;
background: var(--bg-base);
border-radius: 2px;
}
.rcc-drones-head {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--text-secondary);
text-transform: uppercase;
margin-bottom: 4px;
}
/* ============================================================
Phase 8 — Career (ribbon, damage, runs, advancements, rep)
============================================================ */
/* Career stats ribbon */
.career-ribbon {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 14px;
padding: 14px 16px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 3px;
margin-bottom: 16px;
}
.cr-stat {
text-align: center;
padding: 4px 6px;
border-right: 1px solid var(--border-subtle);
}
.cr-stat:last-child { border-right: none; }
.cr-stat.primary {
background: rgba(240, 168, 66, 0.06);
border-radius: 2px;
}
.cr-lbl {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
margin-bottom: 4px;
}
.cr-val {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.1;
}
.cr-hint {
font-family: var(--font-mono);
font-size: 9px;
color: var(--text-muted);
margin-top: 4px;
font-style: italic;
}
/* Damage tracker */
.dmg-track {
margin-bottom: 14px;
}
.dmg-track:last-child { margin-bottom: 0; }
.dmg-track-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 6px;
}
.dmg-label {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
min-width: 80px;
}
.dmg-count {
font-size: 12px;
color: var(--text-secondary);
min-width: 60px;
}
.dmg-buttons {
margin-left: auto;
display: flex;
gap: 4px;
}
.dmg-boxes {
display: flex;
gap: 3px;
flex-wrap: wrap;
}
.dmg-box {
width: 18px;
height: 24px;
border: 1px solid var(--border-base);
border-radius: 2px;
background: var(--bg-base);
cursor: pointer;
transition: background 80ms var(--ease-out), border-color 80ms var(--ease-out);
}
.dmg-box:hover {
border-color: var(--accent);
}
.dmg-box.filled.phys {
background: var(--bad);
border-color: var(--bad);
}
.dmg-box.filled.stun {
background: #b8a355;
border-color: #b8a355;
}
.wound-badge {
font-family: var(--font-mono);
font-size: 11px;
padding: 4px 10px;
background: rgba(191, 92, 80, 0.12);
border: 1px solid var(--bad);
color: var(--bad);
border-radius: 2px;
}
/* Reputation panel */
.rep-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.rep-row {
display: grid;
grid-template-columns: 180px 150px 1fr;
gap: 14px;
align-items: center;
padding: 10px 12px;
background: var(--bg-base);
border-radius: 2px;
border-left: 2px solid var(--border-subtle);
}
.rep-label {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
}
.rep-controls {
display: flex;
align-items: center;
gap: 6px;
}
.rep-input {
width: 60px;
text-align: center;
font-size: 14px;
font-weight: 600;
}
.rep-hint {
font-size: 11px;
color: var(--text-muted);
font-style: italic;
line-height: 1.4;
}
/* Runs table */
.run-head,
.run-row {
display: grid;
grid-template-columns: 100px 1.5fr 70px 110px 2fr 28px;
gap: 10px;
padding: 8px 14px;
align-items: center;
}
.run-head {
background: var(--bg-base);
border-bottom: 1px solid var(--border-base);
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.run-row {
border-top: 1px solid var(--border-subtle);
transition: background 100ms var(--ease-out);
}
.run-row:hover { background: var(--bg-hover); }
.run-date {
font-size: 11px;
color: var(--text-muted);
}
.run-name {
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-primary);
}
.run-karma {
color: var(--accent);
font-size: 12px;
}
.run-nuyen {
color: var(--good);
font-size: 11px;
text-align: right;
}
.run-notes {
font-size: 11px;
font-style: italic;
line-height: 1.4;
}
/* Advancements table */
.adv-head,
.adv-row {
display: grid;
grid-template-columns: 100px 130px 1fr 70px 28px;
gap: 10px;
padding: 8px 14px;
align-items: center;
}
.adv-head {
background: var(--bg-base);
border-bottom: 1px solid var(--border-base);
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.adv-row {
border-top: 1px solid var(--border-subtle);
transition: background 100ms var(--ease-out);
}
.adv-row:hover { background: var(--bg-hover); }
/* Per-type tinting */
.adv-row.adv-attribute { border-left: 3px solid #4fc3f7; }
.adv-row.adv-skill { border-left: 3px solid var(--accent); }
.adv-row.adv-skill_group { border-left: 3px solid #8bc34a; }
.adv-row.adv-knowledge { border-left: 3px solid #4db6ac; }
.adv-row.adv-specialization { border-left: 3px solid #ffb74d; }
.adv-row.adv-quality { border-left: 3px solid #ba68c8; }
.adv-row.adv-initiation { border-left: 3px solid #e57373; }
.adv-row.adv-other { border-left: 3px solid var(--border-subtle); }
.adv-date {
font-size: 11px;
color: var(--text-muted);
}
.adv-type {
font-size: 10px;
letter-spacing: 0.05em;
color: var(--text-secondary);
}
.adv-detail {
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-primary);
}
.adv-karma {
color: var(--bad);
text-align: right;
font-size: 12px;
}
/* Cost preview in advancement dialog */
.adv-cost-preview {
margin-top: 14px;
padding: 14px;
background: var(--bg-base);
border-left: 3px solid var(--accent);
border-radius: 2px;
}
.acp-lbl {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
margin-bottom: 4px;
}
.acp-val {
font-family: var(--font-sans);
font-size: 26px;
font-weight: 600;
color: var(--accent);
margin-bottom: 4px;
}
.acp-hint {
font-family: var(--font-mono);
font-size: 11px;
}
.acp-warn {
margin-top: 8px;
padding: 6px 10px;
background: rgba(191, 92, 80, 0.1);
color: var(--bad);
border-radius: 2px;
font-size: 11px;
}
/* ============================================================
SIN / License auto-label hint (Phase 8 bugfix)
When the user hasn't typed a name, show the live-derived
"SIN (R4)" placeholder and a follow-the-rating hint below.
============================================================ */
.sin-name-cell {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.sin-name-cell input {
width: 100%;
}
.sin-auto-label {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
padding-left: 4px;
letter-spacing: 0.03em;
}
/* ============================================================
Phase 8 finalize — mode chip + read-only lock + warning banners
============================================================ */
/* Topbar mode chip */
.mode-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 100px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: all 120ms var(--ease-out);
border: 1px solid transparent;
background: transparent;
margin-right: 8px;
}
.mode-chip .mc-dot {
width: 6px;
height: 6px;
border-radius: 50%;
display: inline-block;
}
.mode-chip-creation {
color: var(--accent);
border-color: var(--accent);
background: rgba(240, 168, 66, 0.06);
}
.mode-chip-creation .mc-dot { background: var(--accent); }
.mode-chip-creation:hover {
background: rgba(240, 168, 66, 0.15);
}
.mode-chip-career {
color: #8bc34a;
border-color: #8bc34a;
background: rgba(139, 195, 74, 0.06);
}
.mode-chip-career .mc-dot { background: #8bc34a; }
.mode-chip-career:hover {
background: rgba(139, 195, 74, 0.15);
}
/* Finalize confirmation checkbox row */
.finalize-checkbox {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: 2px;
font-size: 12px;
cursor: pointer;
transition: border-color 120ms var(--ease-out);
}
.finalize-checkbox:hover { border-color: var(--accent); }
.finalize-checkbox input[type="checkbox"] {
width: 14px;
height: 14px;
cursor: pointer;
}
/* Banner shown above a run/advancement dialog when it will finalize */
.finalize-warning {
margin-bottom: 14px;
padding: 12px 14px;
background: rgba(240, 168, 66, 0.08);
border-left: 3px solid var(--accent);
border-radius: 2px;
}
.fw-title {
font-size: 12px;
font-weight: 600;
color: var(--accent);
margin-bottom: 6px;
letter-spacing: 0.02em;
}
.fw-body {
font-size: 11px;
color: var(--text-secondary);
line-height: 1.5;
}
/* ============================================================
FinalizeDialog — fork/wipe picker (Phase 9 Cycle 1)
============================================================ */
/* History summary shown at top of un-finalize dialog when there's
any career history to lose. */
.finalize-history-summary {
margin-bottom: 16px;
padding: 12px 14px;
background: var(--bg-base);
border-left: 2px solid var(--border-base);
border-radius: 2px;
}
.fhs-title {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
margin-bottom: 8px;
}
.fhs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 6px 16px;
font-size: 12px;
color: var(--text-secondary);
}
.fhs-grid strong {
color: var(--text-primary);
}
/* Fork / wipe radio card picker */
.finalize-path-picker {
display: flex;
flex-direction: column;
gap: 12px;
}
.finalize-path-card {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
border: 1px solid var(--border-subtle);
border-radius: 3px;
cursor: pointer;
transition: border-color 120ms var(--ease-out), background 120ms var(--ease-out);
}
.finalize-path-card:hover {
border-color: var(--accent);
background: rgba(240, 168, 66, 0.04);
}
.finalize-path-card.selected {
border-color: var(--accent);
background: rgba(240, 168, 66, 0.08);
}
.finalize-path-card.disabled {
cursor: not-allowed;
opacity: 0.55;
}
.finalize-path-card.disabled:hover {
border-color: var(--border-subtle);
background: transparent;
}
.finalize-path-card input[type="radio"] {
margin-top: 2px;
flex-shrink: 0;
}
.fpc-body {
flex: 1;
min-width: 0;
}
.fpc-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 6px;
}
.fpc-safe {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.1em;
color: #8bc34a;
background: rgba(139, 195, 74, 0.1);
padding: 2px 8px;
border-radius: 2px;
text-transform: uppercase;
}
.fpc-destructive {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.1em;
color: var(--bad);
background: rgba(191, 92, 80, 0.1);
padding: 2px 8px;
border-radius: 2px;
text-transform: uppercase;
}
.fpc-desc {
font-size: 11px;
color: var(--text-secondary);
line-height: 1.5;
}
.fpc-form {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border-subtle);
}
.fpc-label {
display: block;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
color: var(--text-muted);
text-transform: uppercase;
margin-bottom: 4px;
}
.fpc-hint {
font-size: 10px;
margin-top: 6px;
font-style: italic;
line-height: 1.4;
}
/* Pending-approval badge on advancement log rows (for refund entries) */
.adv-pending-approval {
background: rgba(240, 168, 66, 0.04);
}
.adv-approval-badge {
display: inline-block;
margin-left: 10px;
padding: 2px 6px;
background: rgba(240, 168, 66, 0.12);
color: var(--accent);
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.08em;
border-radius: 2px;
text-transform: uppercase;
}
/* ============================================================
Phase 9 Cycle 2a — Pending-changes bar + pending-row tint
============================================================ */
/* The sticky bar that appears below the character header when
pending changes exist. */
.pending-bar {
background: rgba(240, 168, 66, 0.06);
border: 1px solid rgba(240, 168, 66, 0.3);
border-left: 3px solid var(--accent);
border-radius: 3px;
margin-bottom: 14px;
overflow: hidden;
transition: background 120ms var(--ease-out);
}
.pb-head {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 14px;
cursor: pointer;
user-select: none;
transition: background 100ms var(--ease-out);
}
.pb-head:hover {
background: rgba(240, 168, 66, 0.1);
}
.pb-chip {
display: flex;
align-items: center;
gap: 6px;
}
.pb-count {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 600;
color: var(--accent);
min-width: 22px;
text-align: center;
}
.pb-count-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
color: var(--text-secondary);
text-transform: uppercase;
}
.pb-karma {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
}
.pb-karma-label {
color: var(--text-muted);
letter-spacing: 0.05em;
}
.pb-karma-value {
color: var(--accent);
font-weight: 600;
font-size: 13px;
}
.pb-karma-value.over {
color: var(--bad);
}
.pb-karma-remain {
color: var(--text-secondary);
font-size: 10px;
}
.pb-spacer {
flex: 1;
}
.btn.btn-small {
padding: 3px 10px;
font-size: 11px;
}
.pb-expand-chevron {
color: var(--text-muted);
font-size: 12px;
transition: transform 120ms var(--ease-out);
margin-left: 4px;
}
.pb-expand-chevron.open {
transform: rotate(180deg);
}
/* Expanded body — per-change diff */
.pb-body {
border-top: 1px solid rgba(240, 168, 66, 0.2);
padding: 6px 14px 10px;
display: flex;
flex-direction: column;
gap: 4px;
}
.pb-entry {
display: grid;
grid-template-columns: 70px 1fr 110px;
gap: 12px;
padding: 5px 8px;
background: var(--bg-base);
border-radius: 2px;
font-size: 12px;
align-items: center;
}
.pbe-category {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
}
.pbe-detail {
color: var(--text-primary);
}
.pbe-karma {
text-align: right;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
}
.pbe-karma.spend {
color: var(--accent);
}
.pbe-karma.refund {
color: var(--good);
}
/* Skill row pending tint */
.skill-row-with-spec.pending {
border-left: 2px solid var(--accent);
background: rgba(240, 168, 66, 0.04);
}
.skill-rating-value.pending-value {
color: var(--accent);
font-weight: 600;
}
/* Karma carryover notice — shown in Finalize dialog */
.karma-carryover-notice {
margin: 14px 0;
padding: 12px 14px;
background: rgba(139, 195, 74, 0.06);
border-left: 3px solid var(--good);
border-radius: 2px;
}
.karma-carryover-notice.warn {
background: rgba(240, 168, 66, 0.06);
border-left-color: var(--accent);
}
.kcn-title {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
margin-bottom: 6px;
}
.kcn-body {
font-size: 12px;
line-height: 1.5;
color: var(--text-secondary);
}
.kcn-body strong {
color: var(--text-primary);
}
/* Karma carryover notice in Finalize dialog (Cycle 2a header pass) */
.karma-carryover-box {
margin: 12px 0;
padding: 10px 12px;
background: rgba(240, 168, 66, 0.06);
border-left: 2px solid var(--accent);
border-radius: 2px;
}
.karma-carryover-box.warn {
background: rgba(191, 92, 80, 0.06);
border-left-color: var(--bad);
}
.kcb-title {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--text-muted);
text-transform: uppercase;
margin-bottom: 6px;
}
.kcb-body {
font-size: 12px;
line-height: 1.5;
color: var(--text-secondary);
}
.kcb-body strong.bad {
color: var(--bad);
}
/* ============================================================
Phase 9 Cycle 2b — extended pending tints
============================================================ */
/* Attr stepper pending state */
.attr-stepper.pending .attr-value {
color: var(--accent);
}
.attr-stepper.pending .attr-pip.filled {
/* Subtle amber glow on filled pips to indicate projected state. */
box-shadow: 0 0 0 1px rgba(240, 168, 66, 0.35) inset;
}
/* Skill group pending state */
.skill-group-row.pending {
border-left: 2px solid var(--accent);
background: rgba(240, 168, 66, 0.04);
}
/* Knowledge row pending state */
.knowledge-row.pending {
background: rgba(240, 168, 66, 0.04);
border-left: 2px solid var(--accent);
}
.knowledge-row.pending .skill-rating-value.pending-value {
color: var(--accent);
font-weight: 600;
}
/* Specialization input pending state */
.spec-input.pending-value {
color: var(--accent);
font-weight: 500;
border-left: 2px solid var(--accent);
}
/* Attribute row pending indicator */
.attr-row.pending {
background: rgba(240, 168, 66, 0.04);
border-left: 2px solid var(--accent);
}
/* ============================================================
Phase 9 Cycle 2c — pending tints for qualities, spells, powers, forms
============================================================ */
/* Pending new quality row (in a quality column) */
.quality-row.pending-new {
background: rgba(240, 168, 66, 0.06);
border-left: 2px solid var(--accent);
}
/* Pending buyoff indicator on a committed negative quality row */
.quality-row.pending-buyoff {
opacity: 0.65;
text-decoration: line-through;
text-decoration-color: var(--accent);
border-left: 2px solid var(--accent);
}
.quality-row.pending-buyoff .qr-name,
.quality-row.pending-buyoff .qr-desc,
.quality-row.pending-buyoff .qr-karma {
text-decoration: none; /* restore legibility of child fields */
}
/* Pending new spell row */
.spell-row.pending-new {
background: rgba(240, 168, 66, 0.06);
border-left: 2px solid var(--accent);
}
.spell-row.pending-new .sp-name {
color: var(--accent-bright);
}
/* Pending new adept power row */
.power-row.pending-new {
background: rgba(240, 168, 66, 0.06);
border-left: 2px solid var(--accent);
}
.power-row.pending-new .pwr-name {
color: var(--accent-bright);
}
.power-row.pending-new .pwr-pp.accent {
color: var(--accent);
font-weight: 600;
}
.power-row.pending-new .pwr-selection-display,
.power-row.pending-new .pwr-level-display {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-muted);
text-align: center;
}
/* Pending new complex form row */
.cf-row.pending-new {
background: rgba(240, 168, 66, 0.06);
border-left: 2px solid var(--accent);
}
/* ============================================================
Phase 9 Cycle 2d — pending bar nuyen/essence + magic warning
============================================================ */
.pb-nuyen, .pb-essence {
display: flex;
gap: 6px;
align-items: baseline;
font-family: var(--font-mono);
font-size: 12px;
}
.pb-magic-warning {
padding: 10px 20px;
background: rgba(191, 92, 80, 0.12);
border-top: 1px solid var(--bad);
border-bottom: 1px solid var(--bad);
color: var(--bad);
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.05em;
text-align: center;
animation: magic-warning-pulse 2.4s infinite ease-in-out;
}
.pb-magic-warning strong {
color: var(--bad);
font-weight: 700;
}
@keyframes magic-warning-pulse {
0%, 100% { background: rgba(191, 92, 80, 0.12); }
50% { background: rgba(191, 92, 80, 0.22); }
}
.pending-bar.has-magic-warning .pb-head {
border-bottom: none; /* warning line visually continues the bar */
}
.pbe-costs {
display: flex;
gap: 10px;
justify-content: flex-end;
flex-shrink: 0;
}
.pbe-nuyen {
font-family: var(--font-mono);
font-size: 11px;
color: var(--accent);
}
.pbe-essence {
font-family: var(--font-mono);
font-size: 11px;
color: var(--bad);
}
/* Pending-gear row styling across gear tabs */
.gear-row.pending-new,
.weapon-row.pending-new,
.armor-row.pending-new,
.equipment-row.pending-new,
.ware-row.pending-new,
.sin-row.pending-new,
.license-row.pending-new,
.vehicle-row.pending-new,
.drone-row.pending-new,
.focus-row.pending-new,
.reagent-row.pending-new {
background: rgba(240, 168, 66, 0.06);
border-left: 2px solid var(--accent);
}
.gear-pending-tag {
margin-left: 6px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
color: var(--accent);
text-transform: uppercase;
}
/* Projected essence bar overlay in career mode */
.essence-bar-fill-projected {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: repeating-linear-gradient(
45deg,
rgba(191, 92, 80, 0.25),
rgba(191, 92, 80, 0.25) 6px,
rgba(191, 92, 80, 0.45) 6px,
rgba(191, 92, 80, 0.45) 12px
);
border-right: 1px solid var(--bad);
pointer-events: none;
}
.essence-bar {
position: relative; /* ensure the overlay positions correctly */
}
/* ============================================================
Phase 10 — Submersion section
============================================================ */
.sub-ribbon {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 4px 0 20px 0;
border-bottom: 1px solid var(--border-subtle);
margin-bottom: 20px;
}
.sub-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border-subtle);
border-radius: 4px;
}
.sub-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
}
.sub-value {
font-family: var(--font-mono);
font-size: 32px;
font-weight: 600;
color: var(--text-primary);
line-height: 1;
}
.sub-hint {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
text-align: center;
}
.sub-submerge-panel {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
background: rgba(240, 168, 66, 0.04);
border: 1px solid rgba(240, 168, 66, 0.2);
border-radius: 4px;
}
.sub-submerge-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.sub-next-label {
margin-bottom: 2px;
}
.sub-next-value {
font-family: var(--font-mono);
font-size: 18px;
font-weight: 500;
color: var(--text-primary);
}
.sub-method-row {
display: flex;
gap: 8px;
align-items: center;
}
.sub-method-row label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12px;
color: var(--text-primary);
flex: 1;
}
.sub-method-row select,
.sub-method-row input {
padding: 6px 10px;
background: var(--bg-card);
border: 1px solid var(--border-subtle);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 12px;
border-radius: 3px;
}
.sub-pending-banner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 14px 16px;
background: rgba(240, 168, 66, 0.08);
border: 1px solid rgba(240, 168, 66, 0.3);
border-radius: 4px;
}
.sub-history {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--border-subtle);
}
.sub-history-head {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 10px;
}
.sub-history-row {
display: grid;
grid-template-columns: 80px 90px 1fr;
gap: 12px;
padding: 8px 0;
align-items: center;
border-bottom: 1px solid var(--border-subtle);
}
.sub-history-row:last-child {
border-bottom: none;
}
.sub-history-notes {
grid-column: 1 / -1;
font-size: 11px;
font-style: italic;
margin-top: 2px;
}
/* Pending-echo row coloring matches other pending rows */
.echo-row.pending-new {
background: rgba(240, 168, 66, 0.06);
border-left: 2px solid var(--accent);
}
/* Submerge button disabled state — highly visible */
.btn.sub-btn-disabled,
.btn.sub-btn-disabled:hover {
background: var(--border-subtle) !important;
color: var(--text-muted) !important;
cursor: not-allowed !important;
opacity: 0.6;
border: 1px solid var(--border-subtle);
}
/* Can't-submerge reason banner */
.sub-cant-reason {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: rgba(191, 92, 80, 0.08);
border: 1px solid rgba(191, 92, 80, 0.3);
border-radius: 3px;
color: var(--text-primary);
font-size: 12px;
margin: 4px 0;
}
.sub-cant-reason strong {
color: var(--bad);
}
.sub-cant-icon {
color: var(--bad);
font-size: 16px;
font-weight: 700;
flex-shrink: 0;
}
/* Priority / metatype locked banner */
.priorities-locked-banner {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 16px;
margin-bottom: 16px;
background: rgba(120, 140, 170, 0.08);
border: 1px solid var(--border-subtle);
border-left: 3px solid var(--text-muted);
border-radius: 3px;
color: var(--text-primary);
font-size: 12px;
line-height: 1.5;
}
.plb-icon {
font-size: 14px;
flex-shrink: 0;
padding-top: 1px;
}
/* Priority grid locked */
.priority-grid.locked .priority-cell.option {
cursor: not-allowed;
opacity: 0.7;
}
.priority-grid.locked .priority-cell.option.selected {
opacity: 1;
}
.priority-grid.locked .priority-cell.option:hover {
background: inherit;
}
/* ============================================================
Phase 11 — Character Sheet play view
============================================================ */
/* Grid — 12-col flexible, auto-fit for responsive */
.sheet-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 12px;
margin-top: 12px;
}
.sheet-tile {
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: 4px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0; /* let children shrink */
}
.sheet-tile-head {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-muted);
padding-bottom: 6px;
border-bottom: 1px solid var(--border-subtle);
}
/* ---- Tile spans ---- */
.sheet-cm { grid-column: span 7; }
.sheet-attrs { grid-column: span 5; }
.sheet-init { grid-column: span 4; }
.sheet-defenses { grid-column: span 4; }
.sheet-augs { grid-column: span 4; }
.sheet-skills { grid-column: span 6; }
.sheet-combat { grid-column: span 6; }
.sheet-magic { grid-column: span 6; }
.sheet-matrix { grid-column: span 6; }
.sheet-identity { grid-column: span 12; }
.sheet-lifestyle { grid-column: span 6; }
.sheet-contacts { grid-column: span 6; }
@media (max-width: 1200px) {
.sheet-cm, .sheet-attrs, .sheet-init, .sheet-defenses,
.sheet-augs, .sheet-skills, .sheet-combat, .sheet-magic,
.sheet-matrix, .sheet-identity,
.sheet-lifestyle, .sheet-contacts {
grid-column: span 12;
}
}
/* ---- Condition monitor ---- */
.cm-track {
display: flex;
flex-direction: column;
gap: 4px;
}
.cm-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--text-secondary);
display: flex;
justify-content: space-between;
align-items: baseline;
}
.cm-boxes {
display: flex;
gap: 2px;
flex-wrap: wrap;
}
.cm-box {
width: 22px;
height: 22px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 2px;
cursor: pointer;
position: relative;
padding: 0;
font-family: var(--font-mono);
font-size: 8px;
color: var(--text-muted);
transition: background 80ms ease;
display: flex;
align-items: center;
justify-content: center;
}
.cm-box:hover:not(:disabled) {
border-color: var(--accent);
}
.cm-box.filled {
background: var(--bad);
border-color: var(--bad);
}
.cm-box.filled.wound {
background: var(--bad);
}
.cm-box:disabled {
cursor: default;
opacity: 0.7;
}
.cm-box .cm-mod {
position: absolute;
top: -10px;
right: 0;
font-size: 8px;
color: var(--text-muted);
letter-spacing: 0;
}
.cm-box.filled .cm-mod {
color: var(--bad);
}
.cm-overflow {
margin-top: 8px;
padding: 8px 12px;
background: rgba(191, 92, 80, 0.12);
border: 1px solid var(--bad);
border-radius: 3px;
color: var(--bad);
font-family: var(--font-mono);
font-size: 11px;
}
.cm-edge {
display: flex;
align-items: baseline;
gap: 10px;
margin-top: 6px;
padding-top: 8px;
border-top: 1px solid var(--border-subtle);
}
.cm-edge-value {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 600;
color: var(--accent);
}
/* ---- Attributes ---- */
.attr-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
}
.attr-cell {
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 4px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 2px;
}
.attr-cell.special {
border-color: var(--accent-dim);
}
.attr-label {
font-size: 10px;
letter-spacing: 0.08em;
color: var(--text-muted);
}
.attr-val {
font-size: 22px;
font-weight: 600;
color: var(--text-primary);
}
/* ---- Initiative & Limits ---- */
.init-section, .limit-section {
display: flex;
flex-direction: column;
gap: 4px;
}
.limit-section {
padding-top: 10px;
border-top: 1px dashed var(--border-subtle);
margin-top: 6px;
}
.init-row, .limit-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 3px 0;
}
.init-label, .limit-label {
font-size: 11px;
color: var(--text-secondary);
}
.init-value, .limit-val {
font-size: 15px;
color: var(--text-primary);
font-weight: 500;
}
/* ---- Skills ---- */
.skills-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.skills-category {
display: flex;
flex-direction: column;
gap: 2px;
}
.skills-cat-label {
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
padding-bottom: 3px;
border-bottom: 1px solid var(--border-subtle);
margin-bottom: 4px;
}
.skill-row {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 6px;
align-items: baseline;
padding: 2px 0;
font-size: 12px;
}
.skill-pool {
font-size: 16px;
font-weight: 600;
color: var(--accent);
text-align: right;
}
.skill-name {
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.skill-meta {
font-size: 10px;
}
.skill-spec {
font-size: 10px;
color: var(--accent);
background: rgba(240, 168, 66, 0.08);
padding: 1px 4px;
border-radius: 2px;
white-space: nowrap;
}
/* ---- Combat / weapons ---- */
.weapon-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.sheet-weapon {
padding: 8px;
background: var(--bg-surface);
border-radius: 3px;
border-left: 2px solid var(--text-muted);
}
.sw-name {
font-size: 13px;
color: var(--text-primary);
margin-bottom: 3px;
}
.sw-stats {
display: flex;
gap: 10px;
font-size: 11px;
color: var(--text-secondary);
flex-wrap: wrap;
}
.sw-notes {
font-size: 10px;
margin-top: 4px;
font-style: italic;
}
/* ---- Defenses ---- */
.def-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
.def-cell {
display: flex;
flex-direction: column;
align-items: center;
padding: 8px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: 2px;
}
.def-label {
font-size: 10px;
color: var(--text-muted);
letter-spacing: 0.08em;
}
.def-val {
font-size: 22px;
font-weight: 600;
color: var(--text-primary);
margin: 2px 0;
}
.def-hint {
font-size: 9px;
color: var(--text-muted);
}
/* ---- Augmentations ---- */
.augs-list {
display: flex;
flex-direction: column;
gap: 3px;
max-height: 240px;
overflow-y: auto;
}
.aug-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 4px 6px;
background: var(--bg-surface);
border-radius: 2px;
font-size: 12px;
border-left: 2px solid var(--text-muted);
}
.aug-row.aug-bioware {
border-left-color: #8aa890; /* greenish, bioware */
}
.aug-name {
color: var(--text-primary);
}
.aug-type {
font-size: 10px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* ---- Magic / Matrix subsections ---- */
.magic-header, .persona-stats {
display: flex;
gap: 16px;
flex-wrap: wrap;
padding-bottom: 6px;
border-bottom: 1px dashed var(--border-subtle);
margin-bottom: 6px;
}
.mh-item {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 12px;
}
.ps-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.ps-cell .mono {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
}
.magic-subsection {
margin-top: 8px;
}
.sheet-spell, .sheet-power, .sheet-focus {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 2px 0;
font-size: 12px;
color: var(--text-primary);
}
/* ---- Identity ---- */
.sheet-sin {
display: flex;
gap: 10px;
align-items: baseline;
padding: 3px 0;
font-size: 12px;
}
/* ============================================================
Phase 12 — Paper theme surgical overrides and print CSS
============================================================ */
/* Condition monitor filled boxes in paper/print — black fill on white */
:root[data-theme="paper"] .cm-box.filled {
background: #15130e;
border-color: #15130e;
}
/* Pending row tint — softer amber wash in paper */
:root[data-theme="paper"] .gear-row.pending-new,
:root[data-theme="paper"] .weapon-row.pending-new,
:root[data-theme="paper"] .armor-row.pending-new,
:root[data-theme="paper"] .equipment-row.pending-new,
:root[data-theme="paper"] .ware-row.pending-new,
:root[data-theme="paper"] .sin-row.pending-new,
:root[data-theme="paper"] .license-row.pending-new,
:root[data-theme="paper"] .vehicle-row.pending-new,
:root[data-theme="paper"] .drone-row.pending-new,
:root[data-theme="paper"] .focus-row.pending-new,
:root[data-theme="paper"] .reagent-row.pending-new,
:root[data-theme="paper"] .echo-row.pending-new,
:root[data-theme="paper"] .equip-row.pending-new,
:root[data-theme="paper"] .drone-row.pending-new,
:root[data-theme="paper"] .dr-autosoft-row.pending-new,
:root[data-theme="paper"] .reagent-row.pending-new,
:root[data-theme="paper"] .lodge-row.pending-new {
background: rgba(184, 88, 31, 0.06);
}
/* Augmentations row: bioware distinction works in both themes (uses
different border-left color), so we leave the existing rule alone. */
/* Theme toggle button — label visible, not just a glyph */
.theme-toggle {
letter-spacing: 0.05em;
}
/* ============================================================
Print — activates on Cmd-P / Ctrl-P.
Hides app chrome, forces Paper theme regardless of current
theme setting, paginates the Character Sheet cleanly.
============================================================ */
@media print {
/* Force paper theme values even if user is on amber */
:root, :root[data-theme="amber"], :root[data-theme="paper"] {
--bg-deep: #fff;
--bg-base: #fff;
--bg-surface: #fff;
--bg-raised: #fff;
--bg-hover: #fff;
--bg-card: #fff;
--border-subtle: #c0c0c0;
--border-base: #888;
--border-strong: #333;
--text-primary: #000;
--text-secondary: #222;
--text-muted: #555;
--text-faint: #888;
--accent: #8a3a10;
--accent-bright: #a04818;
--accent-dim: #5d2810;
--accent-glow: transparent;
--good: #1a5a24;
--warn: #7a4a10;
--bad: #7a1a20;
--info: #1a4880;
}
body, .app {
background: #fff !important;
color: #000 !important;
}
/* Hide everything that isn't character data */
.topbar,
.sidebar,
.pending-bar,
.content-header,
.phase-note,
.stub-hint,
.toast-stack,
.mode-chip,
.btn,
button,
.btn-row-remove,
.cm-box .cm-mod {
display: none !important;
}
/* Show the buttons as visual elements when needed (edge, CM) */
.cm-box {
display: inline-block !important;
background: #fff !important;
border: 1px solid #000 !important;
cursor: default !important;
}
.cm-box.filled {
background: #000 !important;
}
.main {
display: block !important;
grid-template-columns: none !important;
overflow: visible !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
}
.app {
display: block !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
html, body {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
margin: 0 !important;
padding: 0 !important;
}
.content {
padding: 0 !important;
margin: 0 !important;
max-width: none !important;
overflow: visible !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
display: block !important;
}
/* Force single scrollable flow — anything with overflow: hidden or auto
would clip the printed output to its initial viewport size. */
*, *::before, *::after {
overflow: visible !important;
max-height: none !important;
}
/* Sheet grid: retain 12-col but ensure clean break-inside: avoid */
.sheet-grid {
display: grid !important;
grid-template-columns: repeat(12, 1fr) !important;
gap: 8px !important;
margin: 0 !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
min-height: 0 !important;
}
.sheet-tile, .sheet-tile * {
visibility: visible !important;
}
.sheet-tile {
background: #fff !important;
border: 1px solid #000 !important;
box-shadow: none !important;
page-break-inside: avoid;
break-inside: avoid;
padding: 10px !important;
}
/* Tile heads smaller for print */
.sheet-tile-head {
font-size: 9px !important;
letter-spacing: 0.12em !important;
color: #000 !important;
padding-bottom: 4px !important;
}
/* Dice pool numbers stay prominent but smaller */
.skill-pool {
font-size: 14px !important;
}
.attr-val, .def-val, .cm-edge-value, .ps-cell .mono {
font-size: 18px !important;
}
.init-value, .limit-val {
font-size: 13px !important;
}
.skill-row {
font-size: 11px !important;
}
/* Re-enable the print-only header (hidden on screen) */
.print-sheet-header {
display: block !important;
margin-bottom: 10px !important;
padding-bottom: 8px !important;
border-bottom: 1px solid #000 !important;
}
.print-sheet-header h2 {
margin: 0 !important;
font-size: 18px !important;
color: #000 !important;
}
.print-sheet-header .print-meta {
font-size: 11px !important;
color: #333 !important;
}
/* Force page breaks between major tile groups when they get long */
.sheet-skills {
page-break-inside: auto; /* allow split within the big skills block */
}
.skills-category {
page-break-inside: avoid;
}
/* Page size */
@page {
size: letter;
margin: 0.5in;
}
/* In hot-prints, we can't show pending states usefully; hide them */
.gear-pending-tag {
display: none !important;
}
}
/* "Print Sheet" button visible on the character sheet tab */
.sheet-content-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.print-sheet-btn {
flex-shrink: 0;
}
/* Print-only header — hidden on screen, shown by @media print */
.print-sheet-header {
display: none;
}
/* ============================================================
Phase 13 — Availability gating
============================================================ */
.picker-item.blocked {
opacity: 0.45;
cursor: not-allowed;
position: relative;
border-left: 2px solid var(--bad);
}
.picker-item.blocked:hover {
background: transparent;
}
.picker-item.blocked .pi-name {
color: var(--text-muted);
text-decoration: line-through;
text-decoration-color: var(--bad);
text-decoration-thickness: 1px;
}
.picker-item.blocked .pi-cost,
.picker-item.blocked .pi-meta {
color: var(--text-muted);
}
/* ============================================================
Phase 14 — Lifestyle
============================================================ */
.lifestyle-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 10px;
}
.lifestyle-tile {
padding: 12px 14px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-left: 2px solid transparent;
border-radius: 3px;
cursor: pointer;
transition: all 120ms var(--ease-out);
position: relative;
}
.lifestyle-tile:hover {
background: var(--bg-hover);
border-left-color: var(--accent);
}
.lifestyle-tile.selected {
background: var(--accent-glow);
border-left-color: var(--accent-bright);
border-color: var(--accent-dim);
}
.lifestyle-tile.disabled {
opacity: 0.4;
cursor: default;
}
.lifestyle-tile.disabled:hover {
background: var(--bg-surface);
border-left-color: transparent;
}
.lt-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 4px;
}
.lt-name {
font-weight: 600;
color: var(--text-primary);
font-size: 15px;
}
.lifestyle-tile.selected .lt-name {
color: var(--accent-bright);
}
.lt-cost {
font-family: var(--font-mono);
font-size: 12px;
color: var(--accent);
font-weight: 600;
}
.lt-base {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
margin-bottom: 4px;
}
.lt-desc {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.4;
}
.lt-selected-badge {
margin-top: 6px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--accent);
text-transform: uppercase;
}
/* Sheet lifestyle tile */
.sheet-lifestyle {}
.sheet-lt-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
margin-bottom: 4px;
flex-wrap: wrap;
}
.sheet-lt-name {
font-weight: 600;
color: var(--text-primary);
overflow-wrap: anywhere;
min-width: 0;
}
.sheet-lt-cost {
font-family: var(--font-mono);
font-size: 12px;
color: var(--accent);
font-weight: 600;
white-space: nowrap;
}
.sheet-lt-paid {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
margin-bottom: 4px;
overflow-wrap: anywhere;
line-height: 1.4;
}
.sheet-lt-notes {
font-size: 11px;
color: var(--text-muted);
font-style: italic;
line-height: 1.4;
margin-top: 4px;
overflow-wrap: anywhere;
}
/* Phase 15 — nuyen-stat sub-line for karma-to-nuyen breakdown */
.nuyen-stat .n-sub {
display: block;
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
margin-top: 2px;
letter-spacing: 0.05em;
}
/* ============================================================
Phase 17 — Bound spirits + registered sprites
============================================================ */
.bound-spirits-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.bound-spirit-row {
display: grid;
grid-template-columns: minmax(160px, 1fr) auto auto minmax(80px, auto) 32px;
gap: 12px;
align-items: center;
padding: 8px 10px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-left: 2px solid var(--accent-dim);
border-radius: 3px;
}
.bound-spirit-row .bs-type .input {
width: 100%;
}
.bound-spirit-row .bs-force,
.bound-spirit-row .bs-services {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.bound-spirit-row .bs-force label,
.bound-spirit-row .bs-services label {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.1em;
color: var(--text-muted);
text-transform: uppercase;
}
.bound-spirit-row .bs-cost {
font-family: var(--font-mono);
font-size: 12px;
text-align: right;
padding-right: 6px;
}
.bound-spirit-row .icon-btn {
background: transparent;
border: 1px solid var(--border-subtle);
border-radius: 3px;
width: 28px;
height: 28px;
color: var(--text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
transition: all 120ms var(--ease-out);
}
.bound-spirit-row .icon-btn:hover {
border-color: var(--bad);
color: var(--bad);
}
/* ============================================================
Phase 18 — Contacts
============================================================ */
.contacts-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.contact-row {
padding: 12px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-left: 2px solid var(--accent-dim);
border-radius: 3px;
display: flex;
flex-direction: column;
gap: 10px;
}
.contact-row.warn {
border-left-color: var(--warn);
}
.contact-main {
display: grid;
grid-template-columns: minmax(160px, 2fr) minmax(140px, 1fr);
gap: 10px;
align-items: center;
}
.contact-main .contact-name,
.contact-main .contact-archetype {
width: 100%;
}
.contact-ratings {
display: flex;
align-items: center;
gap: 16px;
}
.contact-rating {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.contact-rating label {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.1em;
color: var(--text-muted);
text-transform: uppercase;
}
.contact-cost {
font-family: var(--font-mono);
font-size: 12px;
margin-left: auto;
padding-right: 6px;
}
.contact-row .icon-btn {
background: transparent;
border: 1px solid var(--border-subtle);
border-radius: 3px;
width: 28px;
height: 28px;
color: var(--text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
transition: all 120ms var(--ease-out);
}
.contact-row .icon-btn:hover {
border-color: var(--bad);
color: var(--bad);
}
/* Print theme — make contacts readable on paper */
@media print {
.contact-row {
break-inside: avoid;
}
}
/* Sheet contacts tile */
.sheet-contacts-table {
display: flex;
flex-direction: column;
gap: 4px;
}
.sheet-contact-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 2px 0;
gap: 8px;
flex-wrap: wrap;
}
.sheet-contact-name {
flex: 1;
min-width: 0;
font-size: 12px;
overflow-wrap: anywhere;
line-height: 1.4;
}
.sheet-contact-ratings {
display: flex;
gap: 3px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--accent);
white-space: nowrap;
flex-shrink: 0;
}
/* ============================================================
Phase 19 — Finalize checklist + quality selection pills
============================================================ */
.finalize-checklist-summary {
display: flex;
gap: 10px;
margin: 14px 0 10px 0;
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.fc-tally {
padding: 3px 10px;
border: 1px solid var(--border-subtle);
border-radius: 2px;
background: var(--bg-surface);
}
.fc-tally.ok { color: var(--text-muted); }
.fc-tally.warn { color: var(--warn); border-color: var(--warn); }
.fc-tally.block { color: var(--bad); border-color: var(--bad); }
.finalize-checklist {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 6px;
}
.fc-item {
display: grid;
grid-template-columns: 28px 1fr;
gap: 10px;
padding: 8px 10px;
background: var(--bg-surface);
border-left: 2px solid var(--border-subtle);
border-radius: 2px;
align-items: start;
}
.fc-item.ok { border-left-color: var(--good); }
.fc-item.warn { border-left-color: var(--warn); }
.fc-item.block { border-left-color: var(--bad); }
.fc-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--bg-base);
}
.fc-item.ok .fc-icon { background: var(--good); }
.fc-item.warn .fc-icon { background: var(--warn); }
.fc-item.block .fc-icon { background: var(--bad); }
.fc-title {
font-weight: 600;
font-size: 12px;
line-height: 1.3;
}
.fc-detail {
font-size: 11px;
color: var(--text-secondary);
line-height: 1.4;
margin-top: 2px;
}
.btn-warn {
background: var(--warn);
color: var(--bg-base);
border: 1px solid var(--warn);
font-weight: 600;
}
.btn-warn:hover {
filter: brightness(1.1);
}
/* Quality selection pills — shown next to the quality name */
.quality-selection-pill {
display: inline-block;
margin-left: 8px;
padding: 2px 8px;
background: rgba(240, 168, 66, 0.1);
border: 1px solid var(--accent-dim);
border-radius: 10px;
font-size: 10px;
font-family: var(--font-mono);
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ============================================================
Phase 19 — Creation Summary view
============================================================ */
.summary-status-banner {
display: grid;
grid-template-columns: 48px 1fr;
gap: 14px;
align-items: center;
padding: 14px 16px;
margin-bottom: 20px;
border-radius: 4px;
border-left: 3px solid var(--good);
background: rgba(93, 170, 135, 0.06);
}
.summary-status-banner.warn {
border-left-color: var(--warn);
background: rgba(240, 168, 66, 0.06);
}
.summary-status-banner.block {
border-left-color: var(--bad);
background: rgba(191, 92, 80, 0.06);
}
.ssb-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
font-family: var(--font-mono);
font-size: 20px;
font-weight: 700;
color: var(--bg-base);
background: var(--good);
}
.summary-status-banner.warn .ssb-icon { background: var(--warn); }
.summary-status-banner.block .ssb-icon { background: var(--bad); }
.ssb-title {
font-weight: 600;
font-size: 14px;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.1em;
line-height: 1.3;
}
.ssb-detail {
font-size: 12px;
color: var(--text-secondary);
margin-top: 4px;
}
.summary-section {
margin-bottom: 20px;
padding: 14px 16px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-left: 2px solid var(--accent-dim);
border-radius: 3px;
}
.summary-h {
margin: 0 0 12px 0;
font-size: 11px;
font-family: var(--font-mono);
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.2em;
}
.summary-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.summary-field {
display: flex;
flex-direction: column;
gap: 2px;
}
.summary-label {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
}
.summary-value {
font-size: 14px;
font-weight: 500;
}
.summary-attr-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 8px;
}
.summary-attr {
padding: 8px 10px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: 3px;
text-align: center;
}
.summary-attr.special {
border-color: var(--accent-dim);
}
.sa-abbr {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
margin-bottom: 2px;
}
.sa-value {
font-size: 18px;
font-weight: 600;
font-family: var(--font-mono);
color: var(--accent);
}
.sa-bonus {
font-size: 9px;
color: var(--accent);
margin-top: 2px;
}
.summary-skill-group {
margin-top: 10px;
}
.summary-sgl {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
margin-bottom: 4px;
padding-bottom: 2px;
border-bottom: 1px solid var(--border-subtle);
}
.summary-skill-row {
display: flex;
justify-content: space-between;
padding: 2px 0;
font-size: 12px;
line-height: 1.4;
}
.summary-qual {
display: flex;
justify-content: space-between;
padding: 3px 6px;
border-radius: 2px;
font-size: 12px;
margin-bottom: 2px;
}
.summary-qual.positive { background: rgba(240, 168, 66, 0.06); }
.summary-qual.negative { background: rgba(93, 170, 135, 0.06); }
.summary-gear-cats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 4px;
}
.summary-gear-cat {
display: flex;
justify-content: space-between;
padding: 4px 8px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: 2px;
font-size: 12px;
}
.sg-label {
color: var(--text-secondary);
}
.summary-contacts {
display: flex;
flex-direction: column;
gap: 4px;
}
.summary-contact {
display: flex;
justify-content: space-between;
padding: 4px 0;
border-bottom: 1px solid var(--border-subtle);
font-size: 12px;
}
.summary-contact:last-child {
border-bottom: none;
}
.sc-ratings {
color: var(--accent);
}
.karma-ledger {
display: flex;
flex-direction: column;
gap: 2px;
}
.kl-row {
display: flex;
justify-content: space-between;
padding: 3px 8px;
font-size: 12px;
font-family: var(--font-mono);
}
.kl-row.good { color: var(--good); }
.kl-row.bad { color: var(--bad); }
.kl-row.total {
border-top: 1px solid var(--border-subtle);
margin-top: 4px;
padding-top: 6px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 11px;
}
/* ============================================================
Phase 24 — Mobile Responsive Layouts
============================================================
Breakpoints:
- Desktop (> 1024px): existing layout
- Tablet (641–1024px): narrower gutters, smaller text, stacked
where sensible; sidebar remains inline
- Mobile (<= 640px): sidebar becomes drawer with scrim overlay,
hamburger toggle, grids collapse to 1 col,
topbar compacts
============================================================ */
/* Hamburger button — hidden on desktop */
.topbar-hamburger {
display: none;
background: transparent;
border: 1px solid var(--border-subtle);
border-radius: 3px;
width: 36px;
height: 32px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 0;
margin-right: 8px;
cursor: pointer;
flex-shrink: 0;
}
.topbar-hamburger span {
width: 18px;
height: 2px;
background: var(--text-primary);
border-radius: 1px;
display: block;
}
.topbar-hamburger:hover {
border-color: var(--accent);
}
.topbar-hamburger:disabled {
opacity: 0.35;
cursor: not-allowed;
}
/* Scrim — hidden on desktop */
.sidebar-scrim {
display: none;
}
/* ========== Tablet breakpoint (641–1024px) ========== */
@media (max-width: 1024px) {
/* Tighten content padding */
.content {
padding: 20px 18px;
}
/* Narrower sidebar */
.main {
grid-template-columns: 200px 1fr;
}
/* Topbar becomes more compact; keep brand subtitle but smaller */
.topbar {
padding: 10px 14px;
}
.topbar-brand .brand-subtitle {
display: none;
}
.topbar-actions .btn {
padding: 6px 10px;
font-size: 12px;
}
/* Character header pips reflow */
.character-header {
flex-wrap: wrap;
gap: 8px !important;
}
/* Sheet grid: force full-width earlier (was 1200px) */
.sheet-grid .sheet-cm,
.sheet-grid .sheet-attrs,
.sheet-grid .sheet-init,
.sheet-grid .sheet-defenses,
.sheet-grid .sheet-augs,
.sheet-grid .sheet-skills,
.sheet-grid .sheet-combat,
.sheet-grid .sheet-magic,
.sheet-grid .sheet-matrix,
.sheet-grid .sheet-identity,
.sheet-grid .sheet-lifestyle,
.sheet-grid .sheet-contacts {
grid-column: span 12;
}
/* Priority grid becomes horizontally scrollable */
.priority-grid {
overflow-x: auto;
}
.priority-table {
overflow-x: auto;
}
/* Qualities/gear picker modals */
.picker-modal {
max-width: 94vw;
max-height: 90vh;
}
}
/* ========== Mobile breakpoint (<= 640px) ========== */
@media (max-width: 640px) {
/* On mobile, use document-level scrolling (not inner scroll containers).
The desktop layout uses .app height-100% + .content overflow-auto to
create an inner scroll region with a fixed topbar. That doesn't work
well on phones — landscape especially runs out of vertical space for
a bounded content area. Let the page scroll naturally. */
html, body {
height: auto;
overflow: auto;
}
.app {
display: flex;
flex-direction: column;
height: auto;
min-height: 100vh;
}
.content {
overflow: visible;
height: auto;
}
/* Compact content */
.content {
padding: 14px 12px;
}
/* Topbar reorganization */
.topbar {
padding: 8px 10px;
flex-wrap: wrap;
gap: 6px;
position: sticky;
top: 0;
z-index: 50;
}
.topbar-brand {
flex: 1;
min-width: 0;
gap: 6px;
}
.topbar-brand .brand-name {
font-size: 14px;
}
.topbar-actions {
flex-wrap: wrap;
gap: 4px;
}
.topbar-actions .btn {
padding: 5px 8px;
font-size: 11px;
}
/* Hide some secondary buttons to save space; Save As moves into menu future */
.topbar-actions .theme-toggle {
display: none;
}
/* ----- Hamburger + drawer sidebar ----- */
.topbar-hamburger {
display: flex;
}
.main {
display: block;
position: relative;
overflow: visible;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 260px;
max-width: 85vw;
z-index: 100;
transform: translateX(-100%);
transition: transform 200ms var(--ease-out);
border-right: 1px solid var(--border-strong);
box-shadow: 2px 0 16px rgba(0,0,0,0.3);
padding-top: 14px;
}
.main.sidebar-drawer-open .sidebar {
transform: translateX(0);
}
.sidebar-scrim {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 99;
}
.main.sidebar-drawer-open .sidebar-scrim {
display: block;
}
.content {
/* fill the full viewport when sidebar is collapsed */
grid-column: unset;
}
/* Character header — stack vertically on phone */
.character-header {
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
.character-header .stat-pip {
width: 100%;
}
/* Pending changes bar — compact */
.pending-bar {
flex-wrap: wrap;
gap: 6px;
padding: 8px 10px !important;
}
/* Priority grid — 6-column grid doesn't collapse meaningfully, so
allow horizontal scroll. overflow: hidden on the base rule needs
to be unwound so the container can actually scroll. */
.priority-grid {
overflow-x: auto !important;
overflow-y: visible !important;
min-width: 560px; /* keep cells readable */
}
/* Wrap the grid in a scrollable region; also loosen the old overflow: hidden */
.priorities-view,
.priority-grid-wrap {
overflow-x: auto;
}
/* Legacy class from prior breakpoint */
.priority-table {
overflow-x: auto;
}
/* Attribute grid — stack into 2 columns */
.attributes-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
/* Skills view — fewer columns */
.skills-header, .skill-row {
font-size: 12px;
}
/* Modal dialogs */
.modal {
width: 94vw !important;
max-width: 94vw !important;
max-height: 90vh;
}
.picker-modal {
width: 94vw;
max-width: 94vw;
}
.modal-body, .modal-content {
padding: 14px !important;
}
.footer-actions {
flex-wrap: wrap;
gap: 6px;
}
/* Any multi-column grid collapses to 1 column by default */
.summary-grid-2, .summary-grid-3 {
grid-template-columns: 1fr !important;
}
/* Bound spirits / contact rows — stack fields */
.bound-spirit-row,
.contact-row {
grid-template-columns: 1fr !important;
}
.bound-spirit-row > *,
.contact-row > * {
width: 100%;
}
.contact-main {
grid-template-columns: 1fr !important;
}
.contact-ratings {
flex-wrap: wrap;
justify-content: flex-start;
}
/* Gear rows — tighter */
.gear-row {
flex-wrap: wrap;
gap: 6px;
}
/* Sheet grid already collapses to span 12 via tablet query; double-check */
.sheet-grid {
gap: 10px;
}
/* Nuyen summary — stack */
.nuyen-summary {
flex-direction: column;
gap: 8px;
}
.nuyen-stat {
width: 100%;
}
/* Contact budget ribbon */
.contact-budget-ribbon {
flex-direction: column;
gap: 6px;
}
}
/* ========== Narrow-mobile tweaks (<= 380px) ========== */
@media (max-width: 380px) {
.content {
padding: 10px 8px;
}
.topbar-brand .brand-name {
font-size: 12px;
}
.topbar-brand .brand-marker {
font-size: 14px;
}
.topbar-actions .btn {
padding: 4px 6px;
font-size: 10px;
}
.attributes-grid {
grid-template-columns: 1fr !important;
}
}
/* ============================================================
Phase 20 — Career contacts UI
============================================================ */
/* Career-mode banner at top of view */
.career-contacts-banner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 10px 14px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-left: 3px solid var(--accent);
border-radius: 3px;
font-size: 12px;
flex-wrap: wrap;
}
.career-contacts-banner .ccb-main {
flex: 1;
min-width: 240px;
color: var(--text-secondary);
line-height: 1.5;
}
.career-contacts-banner .ccb-stat {
font-size: 12px;
white-space: nowrap;
}
/* Contact row status tags (at top of a row) */
.contact-status-tag {
display: flex;
align-items: center;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
padding: 4px 10px;
margin-bottom: 8px;
border-radius: 2px;
text-transform: uppercase;
}
.contact-lost-tag {
background: rgba(128, 32, 32, 0.12);
color: var(--bad);
border: 1px solid rgba(128, 32, 32, 0.3);
}
.contact-new-tag {
background: rgba(138, 58, 16, 0.12);
color: var(--accent);
border: 1px solid rgba(138, 58, 16, 0.3);
}
/* Lost contacts visually struck-through */
.contact-lost-pending {
opacity: 0.5;
position: relative;
}
.contact-lost-pending .contact-main,
.contact-lost-pending .contact-ratings,
.contact-lost-pending textarea {
text-decoration: line-through;
pointer-events: none;
}
/* Tag itself stays readable */
.contact-lost-pending .contact-status-tag {
text-decoration: none;
opacity: 1;
pointer-events: auto;
}
/* Pending raise visible accent */
.contact-delta-pending {
border-left: 3px solid var(--accent);
padding-left: 10px;
}
/* Newly-staged contact accent */
.contact-new-pending {
border: 1px dashed var(--accent);
padding: 10px;
border-radius: 3px;
background: rgba(138, 58, 16, 0.03);
}
/* Cost column needs room when showing revert button + cost */
.contact-cost {
display: flex;
align-items: center;
white-space: nowrap;
}
/* Small-variant button used for inline undo/revert */
.btn-sm {
padding: 3px 8px;
font-size: 11px;
}
/* ============================================================
Phase 21 — Generalized pending-new row styling
(reused by bound spirits + registered sprites in career mode)
============================================================ */
.pending-new-row {
border: 1px dashed var(--accent);
padding: 10px;
border-radius: 3px;
background: rgba(138, 58, 16, 0.03);
}
.pending-new-tag {
display: flex;
align-items: center;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
padding: 4px 10px;
margin-bottom: 8px;
border-radius: 2px;
text-transform: uppercase;
background: rgba(138, 58, 16, 0.12);
color: var(--accent);
border: 1px solid rgba(138, 58, 16, 0.3);
flex-wrap: wrap;
gap: 4px;
}
/* ============================================================
Phase 24c — Theme picker dropdown
============================================================ */
.theme-picker {
position: relative;
}
.theme-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 1000;
min-width: 280px;
background: var(--bg-surface);
border: 1px solid var(--border-base);
border-radius: 3px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
padding: 4px;
display: flex;
flex-direction: column;
gap: 2px;
}
.theme-menu-item {
display: flex;
align-items: center;
gap: 12px;
background: transparent;
border: none;
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 13px;
text-align: left;
padding: 10px 12px;
cursor: pointer;
border-radius: 2px;
transition: background 0.12s;
width: 100%;
}
.theme-menu-item:hover {
background: var(--bg-hover);
}
.theme-menu-item.active {
background: var(--accent-glow);
color: var(--accent);
}
.theme-menu-item .tmi-marker {
font-size: 18px;
min-width: 20px;
text-align: center;
opacity: 0.85;
}
.theme-menu-item .tmi-label {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.theme-menu-item .tmi-label strong {
font-weight: 600;
font-size: 13px;
}
.theme-menu-item .tmi-desc {
font-size: 11px;
color: var(--text-muted);
font-weight: 400;
}
.theme-menu-item.active .tmi-desc {
color: var(--accent-dim);
}
.theme-menu-item .tmi-check {
font-size: 14px;
color: var(--accent);
margin-left: 8px;
}
/* On narrow mobile the topbar theme toggle is already hidden by
existing media query. Menu positioning won't matter. */