@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Sora:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
--font-sans: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--font-size-xs: 0.74rem;
--font-size-sm: 0.82rem;
--font-size-md: 0.95rem;
--font-size-lg: 1.05rem;
--font-size-xl: 1.24rem;
--font-size-2xl: 1.72rem;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-heavy: 800;
--bg-primary: #17120f;
--bg-secondary: #211915;
--bg-card: #2a201a;
--bg-elevated: #352821;
--bg-glass: rgba(36, 27, 22, 0.84);
--bg-body: var(--bg-primary);
--bg-input: color-mix(in srgb, var(--bg-card), black 8%);
--bg-hover: color-mix(in srgb, var(--bg-elevated), white 4%);
--bg-active: color-mix(in srgb, var(--bg-elevated), white 8%);
--text-primary: #f3ead9;
--text-secondary: #d4c1a3;
--text-muted: #a99478;
--text-inverse: #18120f;
--accent-primary: #c58a4a;
--accent-secondary: #6f8370;
--accent-glow: rgba(197, 138, 74, 0.26);
--accent-warm: #deaa64;
--chart-series-primary: #60a5fa;
--chart-series-primary-alt: #38bdf8;
--chart-series-amber: #f59e0b;
--chart-series-orange: #f97316;
--chart-series-yellow: #facc15;
--chart-series-green: #22c55e;
--chart-series-emerald: #34d399;
--chart-series-purple: #a78bfa;
--chart-series-rose: #fb7185;
--tone-hearth: #bb7443;
--tone-keepsake: #ceb08b;
--tone-lantern: #dfb15d;
--tone-twilight: #6a7e8f;
--tone-weathered: #7b876e;
--success: #87c28e;
--warning: #dfb15d;
--danger: #d47a69;
--info: #86a3b8;
--color-success: var(--success);
--color-warning: var(--warning);
--color-danger: var(--danger);
--color-info: var(--info);
--border: rgba(215, 191, 155, 0.16);
--border-light: rgba(238, 225, 202, 0.14);
--border-focus: color-mix(in srgb, var(--tone-lantern), white 12%);
--border-glow: rgba(197, 138, 74, 0.26);
--line-soft: color-mix(in srgb, var(--tone-keepsake), transparent 72%);
--surface-1: color-mix(in srgb, var(--bg-card), white 2%);
--surface-2: color-mix(in srgb, var(--bg-card), var(--tone-keepsake) 8%);
--surface-3: color-mix(in srgb, var(--bg-elevated), var(--tone-hearth) 12%);
--radius-xs: 6px;
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--shadow-sm: 0 8px 20px rgba(10, 6, 4, 0.28);
--shadow-md: 0 18px 38px rgba(10, 6, 4, 0.38);
--shadow-lg: 0 28px 62px rgba(10, 6, 4, 0.48);
--shadow-glow: 0 0 22px var(--accent-glow);
--material-border-softness: 1.35rem;
--material-shadow-density: 0.82;
--material-texture-strength: 0.12;
--material-highlight-glow: 0.22;
--texture-grain:
linear-gradient(135deg, rgba(255, 249, 238, 0.06), transparent 28%, rgba(255, 248, 235, 0.04) 52%, transparent 74%),
linear-gradient(25deg, rgba(0, 0, 0, 0.08), transparent 30%, rgba(255, 233, 198, 0.04) 58%, transparent 82%);
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 0.18s;
--duration-normal: 0.28s;
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
--ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
--ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
--z-base: 1;
--z-sticky: 20;
--z-drawer: 80;
--z-modal: 120;
--z-toast: 4000;
--rarity-common: #9bb4d3;
--rarity-uncommon: #68d694;
--rarity-rare: #67b8ff;
--rarity-unique: #f6c56f;
--rarity-legendary: #f68ac6;
--scrollbar-size: 10px;
--scrollbar-size-compact: 7px;
--scrollbar-track: rgba(30, 22, 18, 0.92);
--scrollbar-track-border: rgba(197, 138, 74, 0.22);
--scrollbar-thumb: #8e6845;
--scrollbar-thumb-hover: #c58a4a;
--scrollbar-thumb-active: #e0b76c;
}
:root {
--text-muted: #a99478;
--overline-color: rgba(243, 231, 205, 0.72);
--tone-success: var(--success);
--tone-success-muted: color-mix(in srgb, var(--success) 12%, transparent);
--tone-success-border: color-mix(in srgb, var(--success), transparent 60%);
--tone-success-text: color-mix(in srgb, var(--success), white 15%);
--tone-warning: var(--warning);
--tone-warning-muted: color-mix(in srgb, var(--warning) 12%, transparent);
--tone-warning-border: color-mix(in srgb, var(--warning), transparent 60%);
--tone-warning-text: color-mix(in srgb, var(--warning), white 10%);
--tone-danger: var(--danger);
--tone-danger-muted: color-mix(in srgb, var(--danger) 12%, transparent);
--tone-danger-border: color-mix(in srgb, var(--danger), transparent 60%);
--tone-danger-text: color-mix(in srgb, var(--danger), white 12%);
--tone-info: var(--info);
--tone-info-muted: color-mix(in srgb, var(--info) 12%, transparent);
--tone-info-border: color-mix(in srgb, var(--info), transparent 60%);
--tone-info-text: color-mix(in srgb, var(--info), white 15%);
--tone-muted: var(--text-muted);
--tone-muted-muted: color-mix(in srgb, var(--text-muted) 10%, transparent);
--tone-muted-border: color-mix(in srgb, var(--text-muted), transparent 70%);
--tone-muted-text: color-mix(in srgb, var(--text-muted), white 8%);
--tone-accent: var(--accent-primary);
--tone-accent-muted: color-mix(in srgb, var(--accent-primary) 12%, transparent);
--tone-accent-border: color-mix(in srgb, var(--accent-primary), transparent 55%);
--tone-accent-text: color-mix(in srgb, var(--accent-primary), white 12%);
--tone-warm: var(--accent-warm);
--tone-warm-muted: color-mix(in srgb, var(--accent-warm) 12%, transparent);
--tone-warm-border: color-mix(in srgb, var(--accent-warm), transparent 55%);
--tone-warm-text: color-mix(in srgb, var(--accent-warm), white 12%);
--tone-hearth-muted: color-mix(in srgb, var(--tone-hearth) 14%, transparent);
--tone-hearth-border: color-mix(in srgb, var(--tone-hearth), transparent 56%);
--tone-hearth-text: color-mix(in srgb, var(--tone-hearth), white 18%);
--tone-keepsake-muted: color-mix(in srgb, var(--tone-keepsake) 18%, transparent);
--tone-keepsake-border: color-mix(in srgb, var(--tone-keepsake), transparent 48%);
--tone-keepsake-text: color-mix(in srgb, var(--tone-keepsake), white 10%);
--tone-lantern-muted: color-mix(in srgb, var(--tone-lantern) 16%, transparent);
--tone-lantern-border: color-mix(in srgb, var(--tone-lantern), transparent 52%);
--tone-lantern-text: color-mix(in srgb, var(--tone-lantern), white 12%);
--tone-twilight-muted: color-mix(in srgb, var(--tone-twilight) 14%, transparent);
--tone-twilight-border: color-mix(in srgb, var(--tone-twilight), transparent 54%);
--tone-twilight-text: color-mix(in srgb, var(--tone-twilight), white 12%);
--tone-weathered-muted: color-mix(in srgb, var(--tone-weathered) 14%, transparent);
--tone-weathered-border: color-mix(in srgb, var(--tone-weathered), transparent 54%);
--tone-weathered-text: color-mix(in srgb, var(--tone-weathered), white 10%);
--surface-overlay: rgba(255, 247, 233, 0.06);
--surface-overlay-hover: rgba(255, 245, 228, 0.1);
--surface-scrim: rgba(12, 8, 6, 0.68);
--surface-hearth:
radial-gradient(circle at top, color-mix(in srgb, var(--tone-lantern), transparent 84%), transparent 46%),
linear-gradient(165deg, color-mix(in srgb, var(--bg-card), var(--tone-hearth) 14%), color-mix(in srgb, var(--bg-secondary), black 6%));
--surface-keepsake:
linear-gradient(180deg, color-mix(in srgb, var(--bg-card), var(--tone-keepsake) 12%), color-mix(in srgb, var(--bg-secondary), black 4%));
--surface-shell:
radial-gradient(circle at top left, color-mix(in srgb, var(--tone-lantern), transparent 88%), transparent 42%),
linear-gradient(180deg, color-mix(in srgb, var(--bg-card), var(--tone-twilight) 10%), color-mix(in srgb, var(--bg-secondary), black 10%));
--surface-story:
linear-gradient(180deg, color-mix(in srgb, var(--surface-2), var(--tone-keepsake) 8%), color-mix(in srgb, var(--bg-card), black 4%));
--focus-ring: color-mix(in srgb, var(--tone-lantern), white 12%);
--focus-ring-offset: 2px;
--scan-pass: var(--success);
--scan-pass-glow: color-mix(in srgb, var(--success) 30%, transparent);
--scan-fail: var(--danger);
--scan-fail-glow: color-mix(in srgb, var(--danger) 30%, transparent);
--scan-reward: var(--accent-warm);
--scan-reward-glow: color-mix(in srgb, var(--accent-warm) 30%, transparent);
--scan-neutral: var(--info);
--gradient-warm: linear-gradient(90deg, var(--tone-hearth), #e6c089);
--gradient-accent: linear-gradient(135deg, var(--tone-lantern), var(--tone-twilight));
--gradient-success: linear-gradient(90deg, var(--success), color-mix(in srgb, var(--success), white 20%));
--gradient-danger: linear-gradient(90deg, var(--danger), color-mix(in srgb, var(--danger), white 15%));
--surface-intent-utility-bg:
linear-gradient(180deg, color-mix(in srgb, var(--bg-card), white 2%), color-mix(in srgb, var(--bg-card), black 4%));
--surface-intent-utility-border: color-mix(in srgb, var(--border), var(--accent-primary) 12%);
--surface-intent-utility-shadow: var(--shadow-sm);
--surface-intent-record-bg:
radial-gradient(circle at top right, color-mix(in srgb, var(--accent-warm) 18%, transparent), transparent 42%),
linear-gradient(165deg, color-mix(in srgb, var(--bg-card), white 4%), color-mix(in srgb, var(--accent-warm) 8%, var(--bg-secondary)));
--surface-intent-record-border: color-mix(in srgb, var(--accent-warm), transparent 48%);
--surface-intent-record-shadow:
0 10px 24px rgba(2, 8, 24, 0.34),
inset 0 1px 0 rgba(255, 248, 235, 0.08);
--surface-intent-milestone-bg:
radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--accent-primary) 18%, transparent), transparent 40%),
linear-gradient(160deg, color-mix(in srgb, var(--bg-card), white 3%), color-mix(in srgb, var(--accent-primary) 11%, var(--bg-secondary)));
--surface-intent-milestone-border: color-mix(in srgb, var(--accent-primary), transparent 42%);
--surface-intent-milestone-shadow:
0 14px 32px rgba(2, 10, 26, 0.4),
inset 0 1px 0 rgba(236, 245, 255, 0.12);
--surface-intent-keepsake-bg:
radial-gradient(circle at top left, color-mix(in srgb, var(--accent-warm) 22%, transparent), transparent 44%),
radial-gradient(circle at bottom right, color-mix(in srgb, var(--accent-secondary) 14%, transparent), transparent 46%),
linear-gradient(155deg, color-mix(in srgb, var(--bg-card), white 7%), color-mix(in srgb, var(--accent-warm) 10%, var(--bg-secondary)));
--surface-intent-keepsake-border: color-mix(in srgb, var(--accent-warm), transparent 36%);
--surface-intent-keepsake-shadow:
0 18px 40px rgba(2, 10, 26, 0.42),
inset 0 1px 0 rgba(255, 249, 237, 0.16),
inset 0 0 0 1px rgba(255, 229, 181, 0.06);
}
[data-theme="light"] {
color-scheme: light;
--bg-primary: #f5ede0;
--bg-secondary: #efe4d3;
--bg-card: #fffaf1;
--bg-elevated: #f3e7d8;
--bg-glass: rgba(255, 250, 241, 0.86);
--bg-body: var(--bg-primary);
--bg-input: #f1e7d8;
--bg-hover: #eadcc9;
--bg-active: #e2d2bb;
--text-primary: #2f241d;
--text-secondary: #715948;
--text-muted: #927a67;
--text-inverse: #fffaf1;
--accent-primary: #ad6f35;
--accent-secondary: #667864;
--accent-warm: #cb9347;
--accent-glow: rgba(173, 111, 53, 0.18);
--tone-hearth: #a96435;
--tone-keepsake: #c9a57a;
--tone-lantern: #c49344;
--tone-twilight: #607486;
--tone-weathered: #738368;
--success: #5d8f60;
--warning: #bf8a36;
--danger: #bb6558;
--info: #577891;
--color-success: var(--success);
--color-warning: var(--warning);
--color-danger: var(--danger);
--color-info: var(--info);
--border: rgba(120, 86, 56, 0.18);
--border-light: rgba(173, 138, 107, 0.18);
--border-focus: color-mix(in srgb, var(--tone-lantern), white 8%);
--line-soft: color-mix(in srgb, var(--tone-keepsake), transparent 56%);
--surface-1: color-mix(in srgb, var(--bg-card), black 1%);
--surface-2: color-mix(in srgb, var(--bg-card), var(--tone-keepsake) 10%);
--surface-3: color-mix(in srgb, var(--bg-elevated), var(--tone-hearth) 7%);
--scrollbar-thumb: #c8a98b;
--scrollbar-track: #eadfce;
}
[data-theme="light"] pre,
[data-theme="light"] code {
background: #f1e7d8;
color: #2f241d;
}
.theme-toggle {
border: 1px solid var(--border);
background: var(--bg-secondary);
color: var(--text-primary);
border-radius: 999px;
padding: 0.35rem 0.6rem;
font-size: 0.85rem;
line-height: 1;
cursor: pointer;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
color-scheme: dark;
scrollbar-gutter: stable;
}
:root {
--sat: env(safe-area-inset-top, 0px);
--sar: env(safe-area-inset-right, 0px);
--sab: env(safe-area-inset-bottom, 0px);
--sal: env(safe-area-inset-left, 0px);
}
body {
font-family: var(--font-sans);
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.55;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background-image:
radial-gradient(circle at 12% -8%, color-mix(in srgb, var(--tone-lantern), transparent 84%), transparent 42%),
radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--tone-twilight), transparent 86%), transparent 34%),
linear-gradient(180deg, color-mix(in srgb, var(--bg-primary), var(--tone-hearth) 4%), var(--bg-primary));
background-attachment: fixed;
scrollbar-gutter: stable both-edges;
}
a {
color: var(--accent-primary);
text-decoration: none;
transition: var(--transition);
}
a:hover {
color: color-mix(in srgb, var(--accent-primary), white 20%);
}
img {
max-width: 100%;
display: block;
}
* {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
*::-webkit-scrollbar {
width: var(--scrollbar-size);
height: var(--scrollbar-size);
}
*::-webkit-scrollbar-track {
background: var(--scrollbar-track);
border: 1px solid var(--scrollbar-track-border);
border-radius: 999px;
}
*::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--scrollbar-thumb), #3f3a66);
border: 2px solid var(--scrollbar-track);
border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, var(--scrollbar-thumb-hover), var(--scrollbar-thumb));
}
*::-webkit-scrollbar-thumb:active {
background: linear-gradient(180deg, var(--scrollbar-thumb-active), var(--scrollbar-thumb-hover));
}
*::-webkit-scrollbar-corner {
background: var(--scrollbar-track);
}
:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: var(--focus-ring-offset);
}
.wm-skip-link {
position: absolute;
top: -100%;
left: 50%;
transform: translateX(-50%);
background: var(--accent-primary);
color: #fff;
padding: 0.75rem 1.5rem;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
font-weight: var(--font-weight-semibold);
z-index: 9999;
text-decoration: none;
transition: top 150ms ease;
}
.wm-skip-link:focus {
top: 0;
}
.wm-focus-target {
scroll-margin-top: 1.5rem;
}
@media (prefers-reduced-motion: reduce) {
.wm-skip-link {
transition: none;
}
}
.btn,
.form-input,
.form-select,
.form-textarea,
button,
[role="button"],
[role="tab"],
[type="submit"],
[type="button"],
[type="reset"],
select {
min-height: 44px;
}
.btn-sm {
min-height: 36px;
position: relative;
}
.btn-sm::before {
content: "";
position: absolute;
inset: -4px;
pointer-events: none;
}
@media (hover: none) and (pointer: coarse) {
.btn:active,
.card-interactive:active,
[role="button"]:active,
[role="tab"]:active,
a.player-nav-link:active,
.tap-target:active {
transform: scale(0.97);
transition-duration: 80ms;
}
.tap-target:active,
.card-interactive:active,
.tap-row:active {
background-image: linear-gradient(
rgba(255, 255, 255, 0.06),
rgba(255, 255, 255, 0.06)
);
}
* {
-webkit-tap-highlight-color: transparent;
}
}
.prose a,
.body-link {
padding: 0.15em 0;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.tap-row {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.625rem 0.75rem;
min-height: 48px;
cursor: pointer;
border-radius: var(--radius-sm);
transition: background 100ms ease, transform 100ms ease;
}
.btn-group,
.action-bar,
.toolbar-actions,
.filter-bar {
gap: max(0.5rem, 8px);
}
.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
min-height: 44px;
padding: 0;
border-radius: var(--radius-sm);
background: transparent;
border: none;
color: var(--text-secondary);
cursor: pointer;
flex-shrink: 0;
transition: background 100ms ease, color 100ms ease, transform 100ms ease;
}
.btn-icon:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--text-primary);
}
.btn-icon:active {
background: rgba(255, 255, 255, 0.1);
}
.btn-icon svg,
.btn-icon img {
width: 20px;
height: 20px;
}
[data-war-room-tab] {
min-height: 44px;
padding: 0.5rem 0.75rem;
cursor: pointer;
}
.table-responsive-cards .row-action,
.table-responsive-cards .table-actions > * {
min-height: 44px;
min-width: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
@media (max-width: 768px) {
.toolbar-actions {
gap: 0.5rem;
}
.toolbar-actions .btn-sm {
min-height: 40px;
padding: 0.4rem 0.65rem;
}
}
:root {
--font-serif-display: Georgia, 'Times New Roman', serif;
}
h1,
.h1 {
font-size: clamp(1.5rem, 4.5vw, var(--font-size-2xl));
font-weight: var(--font-weight-bold);
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--text-primary);
}
h2,
.h2 {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
line-height: 1.2;
color: var(--text-primary);
}
h3,
.h3 {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
line-height: 1.3;
color: var(--text-primary);
}
h4,
.h4 {
font-size: var(--font-size-md);
font-weight: var(--font-weight-medium);
line-height: 1.4;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.display-heading {
font-family: var(--font-serif-display);
font-size: clamp(1.8rem, 5.5vw, 2.4rem);
font-weight: 400;
line-height: 1.12;
letter-spacing: -0.01em;
color: var(--text-primary);
}
.overline,
.scan-result-subtitle {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--overline-color);
line-height: 1.4;
}
.subtitle {
font-size: var(--font-size-sm);
color: var(--text-secondary);
line-height: 1.5;
max-width: 70ch;
}
.prose {
font-size: var(--font-size-md);
line-height: 1.65;
color: var(--text-secondary);
max-width: 65ch;
}
.prose p + p {
margin-top: 0.75em;
}
.prose ul,
.prose ol {
margin: 0.75em 0;
padding-left: 1.25em;
}
.prose li {
margin: 0.25em 0;
}
.prose strong {
color: var(--text-primary);
font-weight: var(--font-weight-semibold);
}
.prose a {
text-decoration: underline;
text-underline-offset: 2px;
}
.prose-preline {
white-space: pre-line;
}
.label,
.stat-label,
.form-label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.stat-value {
font-size: clamp(1.5rem, 4vw, 2.2rem);
font-weight: var(--font-weight-heavy);
line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--text-primary);
}
.stat-value.sm {
font-size: var(--font-size-xl);
}
.stat-value.lg {
font-size: clamp(2rem, 6vw, 3.5rem);
}
.caption,
.form-hint,
.form-help,
.help-text {
font-size: var(--font-size-xs);
color: var(--text-muted);
line-height: 1.4;
}
.mono {
font-family: var(--font-mono);
font-size: 0.9em;
letter-spacing: 0.02em;
}
.text-gradient-accent {
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.scroll-x,
.scrollable-tab-nav,
.wr-mobile-tabs,
.wr-mobile-vitals-bar,
.floor-tabs {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
scroll-snap-type: x proximity;
}
.scroll-x::-webkit-scrollbar,
.scrollable-tab-nav::-webkit-scrollbar,
.wr-mobile-tabs::-webkit-scrollbar,
.wr-mobile-vitals-bar::-webkit-scrollbar,
.floor-tabs::-webkit-scrollbar {
display: none;
}
.scroll-x-fade,
.scrollable-tab-nav,
.wr-mobile-tabs,
.wr-mobile-vitals-bar,
.floor-tabs,
.scroll-y-shadow {
position: relative;
}
.scroll-x-fade::before,
.scroll-x-fade::after,
.scrollable-tab-nav::before,
.scrollable-tab-nav::after,
.wr-mobile-tabs::before,
.wr-mobile-tabs::after,
.wr-mobile-vitals-bar::before,
.wr-mobile-vitals-bar::after,
.floor-tabs::before,
.floor-tabs::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 2rem;
z-index: 2;
pointer-events: none;
transition: opacity 150ms ease;
}
.scroll-x-fade::before,
.scrollable-tab-nav::before,
.wr-mobile-tabs::before,
.wr-mobile-vitals-bar::before,
.floor-tabs::before {
left: 0;
background: linear-gradient(to right, var(--scroll-affordance-bg, var(--bg-primary)), transparent);
opacity: 0;
}
.scroll-x-fade::after,
.scrollable-tab-nav::after,
.wr-mobile-tabs::after,
.wr-mobile-vitals-bar::after,
.floor-tabs::after {
right: 0;
background: linear-gradient(to left, var(--scroll-affordance-bg, var(--bg-primary)), transparent);
opacity: 0;
}
.scroll-x-fade.on-card,
.scrollable-tab-nav,
.wr-mobile-tabs,
.wr-mobile-vitals-bar,
.floor-tabs.on-card {
--scroll-affordance-bg: var(--bg-card);
}
.scroll-x-fade[data-scroll-start="true"]::before,
.scrollable-tab-nav[data-scroll-start="true"]::before,
.wr-mobile-tabs[data-scroll-start="true"]::before,
.wr-mobile-vitals-bar[data-scroll-start="true"]::before,
.floor-tabs[data-scroll-start="true"]::before {
opacity: 0;
}
.scroll-x-fade[data-scroll-start="false"]::before,
.scrollable-tab-nav[data-scroll-start="false"]::before,
.wr-mobile-tabs[data-scroll-start="false"]::before,
.wr-mobile-vitals-bar[data-scroll-start="false"]::before,
.floor-tabs[data-scroll-start="false"]::before {
opacity: 1;
}
.scroll-x-fade[data-scroll-end="true"]::after,
.scrollable-tab-nav[data-scroll-end="true"]::after,
.wr-mobile-tabs[data-scroll-end="true"]::after,
.wr-mobile-vitals-bar[data-scroll-end="true"]::after,
.floor-tabs[data-scroll-end="true"]::after {
opacity: 0;
}
.scroll-x-fade[data-scroll-end="false"]::after,
.scrollable-tab-nav[data-scroll-end="false"]::after,
.wr-mobile-tabs[data-scroll-end="false"]::after,
.wr-mobile-vitals-bar[data-scroll-end="false"]::after,
.floor-tabs[data-scroll-end="false"]::after {
opacity: 1;
}
.scroll-snap-x > * {
scroll-snap-align: start;
}
.scroll-snap-center > * {
scroll-snap-align: center;
}
.scroll-y {
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.scroll-y-shadow::before,
.scroll-y-shadow::after {
content: "";
position: sticky;
left: 0;
right: 0;
height: 1.5rem;
z-index: 2;
pointer-events: none;
display: block;
}
.scroll-y-shadow::before {
top: 0;
background: linear-gradient(to bottom, var(--scroll-affordance-bg, var(--bg-card)), transparent);
margin-bottom: -1.5rem;
opacity: 0;
transition: opacity 150ms ease;
}
.scroll-y-shadow::after {
bottom: 0;
background: linear-gradient(to top, var(--scroll-affordance-bg, var(--bg-card)), transparent);
margin-top: -1.5rem;
}
.scroll-y-shadow[data-scroll-top="false"]::before {
opacity: 1;
}
.scroll-y-shadow[data-scroll-bottom="true"]::after {
opacity: 0;
}
.text-left { text-align: left; }
.text-right { text-align: right; }
.stack-lg {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-3);
}
.my-0 { margin-block: 0; }
.my-1 { margin-block: var(--space-2); }
.my-2 { margin-block: var(--space-3); }
.my-3 { margin-block: var(--space-4); }
.my-4 { margin-block: var(--space-5); }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-2); }
.mt-2 { margin-top: var(--space-3); }
.mt-3 { margin-top: var(--space-4); }
.mt-4 { margin-top: var(--space-5); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-2); }
.mb-2 { margin-bottom: var(--space-3); }
.mb-3 { margin-bottom: var(--space-4); }
.mb-4 { margin-bottom: var(--space-5); }
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.p-3 { padding: var(--space-4); }
.p-4 { padding: var(--space-5); }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.w-full { width: 100%; }
.w-fit { width: max-content; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 36rem; }
.max-w-lg { max-width: 44rem; }
.hidden { display: none !important; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-start { justify-content: flex-start; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.whitespace-pre-wrap { white-space: pre-wrap; }
.font-italic { font-style: italic; }
.surface-accent-start {
border-left: 3px solid var(--accent-primary);
}
.surface-warning {
border-color: color-mix(in srgb, var(--warning), transparent 70%);
background: color-mix(in srgb, var(--warning) 8%, var(--bg-card));
}
.container {
max-width: 1240px;
margin: 0 auto;
padding: 0 var(--space-5);
}
.page {
padding: var(--space-6) 0;
min-height: 100vh;
}
.page-mobile {
max-width: 480px;
margin: 0 auto;
padding: 1rem;
font-size: 16px;
-webkit-tap-highlight-color: transparent;
}
.page-mobile--wide {
max-width: 680px;
}
.page-mobile > main {
display: grid;
gap: var(--space-3);
}
.page-mobile p,
.page-mobile li {
font-size: 1rem;
}
.page-mobile .subtitle,
.page-mobile .form-label,
.page-mobile small,
.page-mobile .caption {
font-size: 0.875rem;
}
.page-mobile :is(input, select, textarea) {
font-size: 16px;
}
.page-mobile :is(button, .btn, .player-nav-link, a.btn, input[type="submit"], input[type="button"]) {
min-height: 44px;
min-width: 44px;
}
.page-narrow {
max-width: 920px;
margin-inline: auto;
}
.page-wide {
max-width: 1400px;
margin-inline: auto;
}
.text-center {
text-align: center;
}
.muted {
color: var(--text-muted);
}
.mb-0 {
margin-bottom: 0 !important;
}
.section {
margin-block: var(--space-5);
}
.section + .section {
border-top: 1px solid var(--border);
padding-top: var(--space-5);
}
.section-title {
margin-bottom: var(--space-3);
}
.stack {
display: grid;
gap: var(--space-4);
}
.stack-sm {
display: grid;
gap: var(--space-2);
}
.cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
.cluster-between {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--space-2);
}
.grid-auto {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-3);
}
.inline-form {
display: inline;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.app-version-footer {
margin-top: var(--space-6);
padding-top: var(--space-3);
border-top: 1px solid var(--border);
text-align: center;
font-size: 0.78rem;
color: var(--text-muted);
}
.app-version-footer code {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--text-secondary);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@keyframes glow {
0%, 100% { box-shadow: 0 0 20px var(--accent-glow); }
50% { box-shadow: 0 0 40px var(--accent-glow); }
}
.fade-in { animation: fadeIn 0.4s ease-out; }
.pulse { animation: pulse 2s ease-in-out infinite; }
.glow { animation: glow 2s ease-in-out infinite; }
.wm-meter {
height: var(--meter-height, 8px);
border-radius: 999px;
background: var(--surface-overlay);
overflow: hidden;
position: relative;
}
.wm-meter-fill {
width: var(--meter-fill-width, 0%);
height: 100%;
border-radius: 999px;
background: var(--meter-color, var(--gradient-warm));
transition: width var(--transition);
min-width: 0;
}
.wm-meter.sm { --meter-height: 4px; }
.wm-meter.md { --meter-height: 8px; }
.wm-meter.lg { --meter-height: 12px; }
.wm-meter.tone-success .wm-meter-fill {
--meter-color: var(--gradient-success);
}
.wm-meter.tone-accent .wm-meter-fill {
--meter-color: var(--gradient-accent);
}
.wm-meter.tone-danger .wm-meter-fill {
--meter-color: var(--gradient-danger);
}
.wm-meter.tone-warm .wm-meter-fill {
--meter-color: var(--gradient-warm);
}
.wm-meter.indeterminate .wm-meter-fill {
width: 40% !important;
animation: wm-meter-indeterminate 1.5s ease-in-out infinite;
}
@keyframes wm-meter-indeterminate {
0% { transform: translateX(-100%); }
100% { transform: translateX(350%); }
}
.wm-meter-segmented {
display: flex;
height: var(--meter-height, 10px);
border-radius: 999px;
overflow: hidden;
background: rgba(255, 255, 255, 0.06);
}
.wm-meter-segment {
width: var(--meter-segment-width, 0%);
height: 100%;
transition: width var(--transition);
background: var(--meter-segment-color, var(--accent-primary));
}
.wm-meter-labeled {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.wm-meter-label {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-2);
font-size: var(--font-size-sm);
}
.wm-meter-label-value {
font-weight: var(--font-weight-semibold);
font-variant-numeric: tabular-nums;
color: var(--text-primary);
}
.wm-meter-label-caption {
color: var(--text-muted);
}
.wm-ring {
--ring-size: 3.5rem;
--ring-width: 3px;
--ring-color: var(--accent-primary);
--ring-track: rgba(255, 255, 255, 0.1);
--ring-pct: 0;
width: var(--ring-size);
height: var(--ring-size);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
background: conic-gradient(
var(--ring-color) calc(var(--ring-pct) * 1%),
var(--ring-track) calc(var(--ring-pct) * 1%)
);
}
.wm-ring::before {
content: "";
position: absolute;
inset: var(--ring-width);
border-radius: 50%;
background: var(--bg-card);
}
.wm-ring-value {
position: relative;
z-index: 1;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
font-variant-numeric: tabular-nums;
color: var(--text-primary);
}
.wm-ring.sm { --ring-size: 2.5rem; --ring-width: 2px; }
.wm-ring.lg { --ring-size: 5rem; --ring-width: 4px; }
.wm-steps {
display: flex;
align-items: center;
gap: 0;
}
.wm-step {
display: flex;
align-items: center;
gap: 0;
}
.wm-step-dot {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
border: 2px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.65rem;
font-weight: var(--font-weight-bold);
color: var(--text-muted);
flex-shrink: 0;
transition: var(--transition);
}
.wm-step-line {
width: 2rem;
height: 2px;
background: var(--border);
flex-shrink: 0;
}
.wm-step.is-complete .wm-step-dot {
background: var(--success);
border-color: var(--success);
color: #fff;
}
.wm-step.is-complete .wm-step-line {
background: var(--success);
}
.wm-step.is-active .wm-step-dot {
border-color: var(--accent-primary);
background: color-mix(in srgb, var(--accent-primary) 20%, transparent);
color: var(--accent-primary);
}
.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-5);
box-shadow: var(--shadow-sm);
transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.card-glass {
background: var(--bg-glass);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-5);
box-shadow: var(--shadow-sm);
}
.card-subtle {
background: var(--surface-overlay);
border: 1px solid var(--surface-overlay-hover);
border-radius: var(--radius-md);
padding: var(--space-5);
box-shadow: none;
}
.card-ghost {
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-5);
}
.card-interactive {
cursor: pointer;
transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background 150ms ease;
}
.card-interactive:hover,
.card.card-interactive:hover,
.card-glass.card-interactive:hover,
.card-subtle.card-interactive:hover,
.card-ghost.card-interactive:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--border), var(--accent-primary) 35%);
box-shadow: var(--shadow-md);
}
.card-interactive:active {
transform: translateY(0) scale(0.99);
}
.card-highlight {
border-color: color-mix(in srgb, var(--accent-primary), transparent 50%);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--accent-primary), transparent 75%),
var(--shadow-sm);
}
.card-danger {
border-color: var(--tone-danger-border);
background: color-mix(in srgb, var(--tone-danger) 8%, var(--bg-card));
}
.card-tonal {
--card-tone: var(--tone-accent);
--card-tone-border: var(--tone-accent-border);
border-color: var(--card-tone-border);
background: color-mix(in srgb, var(--card-tone) 8%, var(--bg-card));
}
.card-tonal.tone-success { --card-tone: var(--tone-success); --card-tone-border: var(--tone-success-border); }
.card-tonal.tone-warning { --card-tone: var(--tone-warning); --card-tone-border: var(--tone-warning-border); }
.card-tonal.tone-danger { --card-tone: var(--tone-danger); --card-tone-border: var(--tone-danger-border); }
.card-tonal.tone-info { --card-tone: var(--tone-info); --card-tone-border: var(--tone-info-border); }
.surface-intent {
position: relative;
isolation: isolate;
--surface-intent-bg: var(--surface-intent-utility-bg);
--surface-intent-border: var(--surface-intent-utility-border);
--surface-intent-shadow: var(--surface-intent-utility-shadow);
}
.surface-intent[data-surface-intent="utility"] {
--surface-intent-bg: var(--surface-intent-utility-bg);
--surface-intent-border: var(--surface-intent-utility-border);
--surface-intent-shadow: var(--surface-intent-utility-shadow);
}
.surface-intent[data-surface-intent="record"] {
--surface-intent-bg: var(--surface-intent-record-bg);
--surface-intent-border: var(--surface-intent-record-border);
--surface-intent-shadow: var(--surface-intent-record-shadow);
}
.surface-intent[data-surface-intent="milestone"] {
--surface-intent-bg: var(--surface-intent-milestone-bg);
--surface-intent-border: var(--surface-intent-milestone-border);
--surface-intent-shadow: var(--surface-intent-milestone-shadow);
}
.surface-intent[data-surface-intent="keepsake"] {
--surface-intent-bg: var(--surface-intent-keepsake-bg);
--surface-intent-border: var(--surface-intent-keepsake-border);
--surface-intent-shadow: var(--surface-intent-keepsake-shadow);
}
.card.surface-intent,
.card-glass.surface-intent,
.card-subtle.surface-intent,
.card-ghost.surface-intent {
background: var(--surface-intent-bg);
border-color: var(--surface-intent-border);
box-shadow: var(--surface-intent-shadow);
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: var(--space-4);
}
.card-header:last-child {
margin-bottom: 0;
}
.card-body {
min-width: 0;
}
.card-footer {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: var(--space-4);
padding-top: var(--space-3);
border-top: 1px solid var(--border);
flex-wrap: wrap;
}
.card-divider {
height: 1px;
background: var(--border);
margin: var(--space-4) calc(var(--space-5) * -1);
}
.card-compact,
.card.compact,
.card-glass.card-compact,
.card-subtle.card-compact,
.card-ghost.card-compact {
padding: var(--space-3);
}
.card-cover {
margin: calc(var(--space-5) * -1);
margin-bottom: var(--space-4);
border-radius: var(--radius-md) var(--radius-md) 0 0;
overflow: hidden;
}
.card-cover img {
width: 100%;
display: block;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.72rem 1.05rem;
border-radius: var(--radius-sm);
font-family: inherit;
font-weight: 600;
font-size: 0.9rem;
min-height: 44px;
cursor: pointer;
border: none;
transition: var(--transition);
text-decoration: none;
}
.btn-primary {
background: linear-gradient(135deg, var(--accent-primary), #2f8fd8);
color: #fff;
box-shadow: 0 6px 16px var(--accent-glow);
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 8px 20px var(--accent-glow);
}
.btn-secondary {
background: var(--bg-elevated);
color: var(--text-primary);
border: 1px solid var(--border);
box-shadow: none;
}
.btn-secondary:hover {
border-color: color-mix(in srgb, var(--accent-primary), white 12%);
}
.btn-success { background: var(--success); color: #000; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-block { width: 100%; }
.btn-sm {
min-height: 36px;
padding: 0.45rem 0.72rem;
font-size: 0.8rem;
border-radius: var(--radius-xs);
}
.btn-lg { padding: 1rem 2rem; font-size: 1.1rem; border-radius: var(--radius-md); }
.form-group { margin-bottom: var(--space-4); }
.form-label {
display: block;
color: var(--text-muted);
margin-bottom: 0.4rem;
}
.form-input,
.form-textarea,
.form-select {
width: 100%;
padding: 0.64rem 0.78rem;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-family: inherit;
font-size: 0.95rem;
min-height: 44px;
transition: var(--transition);
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
outline: none;
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring), transparent 25%);
}
.form-textarea {
resize: vertical;
min-height: 80px;
}
.mobile-only {
display: none !important;
}
body[data-app-role="gm"] input[type="checkbox"]:not([hidden]),
body[data-app-role="gm"] input[type="radio"]:not([hidden]) {
appearance: none;
-webkit-appearance: none;
width: 22px;
height: 22px;
min-width: 22px;
margin: 0;
border: 2px solid var(--border);
border-radius: 0.4rem;
background: var(--bg-elevated);
display: inline-grid;
place-content: center;
cursor: pointer;
flex-shrink: 0;
transition: var(--transition);
}
body[data-app-role="gm"] input[type="radio"]:not([hidden]) {
border-radius: 999px;
}
body[data-app-role="gm"] input[type="checkbox"]:not([hidden])::after,
body[data-app-role="gm"] input[type="radio"]:not([hidden])::after {
content: "";
display: block;
}
body[data-app-role="gm"] input[type="checkbox"]:not([hidden])::after {
width: 0.36rem;
height: 0.72rem;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg) scale(0);
transition: transform var(--transition);
}
body[data-app-role="gm"] input[type="radio"]:not([hidden])::after {
width: 0.55rem;
height: 0.55rem;
border-radius: 999px;
background: var(--bg-card);
transform: scale(0);
transition: transform var(--transition);
}
body[data-app-role="gm"] input[type="checkbox"]:not([hidden]):checked,
body[data-app-role="gm"] input[type="radio"]:not([hidden]):checked {
border-color: var(--accent-primary);
background: var(--accent-primary);
}
body[data-app-role="gm"] input[type="checkbox"]:not([hidden]):checked::after {
transform: rotate(45deg) scale(1);
}
body[data-app-role="gm"] input[type="radio"]:not([hidden]):checked::after {
transform: scale(1);
}
body[data-app-role="gm"] input[type="checkbox"]:not([hidden]):focus-visible,
body[data-app-role="gm"] input[type="radio"]:not([hidden]):focus-visible {
outline: 2px solid color-mix(in srgb, var(--accent-primary), white 12%);
outline-offset: 2px;
}
.alert {
padding: 0.8rem 1rem;
border-radius: var(--radius-sm);
font-weight: 600;
margin-bottom: var(--space-3);
border: 1px solid transparent;
}
.alert.success {
background: var(--tone-success-muted);
border-color: var(--tone-success-border);
color: var(--tone-success-text);
}
.alert.warning {
background: var(--tone-warning-muted);
border-color: var(--tone-warning-border);
color: var(--tone-warning-text);
}
.alert.danger {
background: var(--tone-danger-muted);
border-color: var(--tone-danger-border);
color: var(--tone-danger-text);
}
.alert.info {
background: var(--tone-info-muted);
border-color: var(--tone-info-border);
color: var(--tone-info-text);
}
.profile-photo {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--accent-primary);
box-shadow: 0 0 0 3px rgba(83, 184, 255, 0.2);
}
.gate-pass {
background: linear-gradient(135deg, rgba(74, 222, 128, 0.1), rgba(74, 222, 128, 0.05));
border: 2px solid var(--success);
border-radius: var(--radius-lg);
padding: 3rem 2rem;
text-align: center;
}
.gate-pass .password {
font-family: 'JetBrains Mono', monospace;
font-size: 2.5rem;
font-weight: 700;
color: var(--success);
letter-spacing: 0.1em;
margin: 1.5rem 0;
text-shadow: 0 0 20px rgba(74, 222, 128, 0.5);
}
.gate-fail {
background: linear-gradient(135deg, rgba(248, 113, 113, 0.1), rgba(248, 113, 113, 0.05));
border: 2px solid var(--danger);
border-radius: var(--radius-lg);
padding: 3rem 2rem;
text-align: center;
}
.tier-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
font-size: 0.75rem;
font-weight: 700;
background: var(--bg-elevated);
border: 2px solid var(--accent-primary);
}
.player-nav {
margin-top: var(--space-4);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
width: 100%;
max-width: 520px;
margin-left: auto;
margin-right: auto;
padding: 0.55rem;
border-radius: var(--radius-md);
border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-card), black 5%);
box-shadow: var(--shadow-sm);
}
.player-nav-link {
min-height: 40px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg-elevated);
color: var(--text-primary);
padding: 0.55rem 0.7rem;
text-align: center;
font-size: 0.84rem;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.player-nav-link:hover {
border-color: color-mix(in srgb, var(--accent-primary), white 10%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary), transparent 72%);
color: var(--text-primary);
}
.player-nav-link-button {
font-family: inherit;
cursor: pointer;
}
.page-mobile .btn-sm {
min-height: 44px;
font-size: 0.875rem;
}
.page-mobile .player-nav-link {
min-height: 44px;
font-size: 0.875rem;
}
.realm-error-card {
max-width: 720px;
margin: 0 auto;
text-align: center;
background:
radial-gradient(circle at 15% 12%, color-mix(in srgb, var(--accent-primary), transparent 82%), transparent 45%),
linear-gradient(145deg, color-mix(in srgb, var(--bg-card), #090b13 36%), var(--bg-card));
}
.realm-error-icon {
font-size: clamp(2.4rem, 6vw, 4rem);
line-height: 1;
margin-bottom: 0.55rem;
}
.realm-error-title {
margin-bottom: 0.35rem;
}
.realm-error-subtitle {
color: var(--text-secondary);
margin: 0 auto 0.65rem;
max-width: 52ch;
}
.realm-error-message {
margin: 0 auto 1rem;
max-width: 58ch;
}
.realm-error-actions {
justify-content: center;
margin-bottom: 1rem;
}
.realm-error-code {
margin: 0;
font-size: 0.82rem;
color: var(--text-muted);
letter-spacing: 0.05em;
text-transform: uppercase;
}
@media (min-width: 430px) {
.player-nav {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
body.has-scan-action-bar {
padding-bottom: var(--scan-action-offset, 130px);
}
.scan-action-shell {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 65;
pointer-events: none;
padding: 0.45rem var(--space-3) max(0.45rem, var(--sab));
}
.scan-celebration-shell {
max-width: 540px;
margin: 0 auto 0.45rem;
border-radius: var(--radius-md);
border: 1px solid color-mix(in srgb, var(--accent-primary), transparent 40%);
background:
radial-gradient(circle at 50% -15%, color-mix(in srgb, var(--accent-primary), transparent 76%), transparent 52%),
color-mix(in srgb, var(--bg-card), black 10%);
min-height: 52px;
padding: 0.45rem 0.6rem;
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(8px);
}
.scan-celebration-shell.is-active {
opacity: 1;
transform: translateY(0);
}
.scan-celebration-rain {
position: absolute;
inset: 0;
pointer-events: none;
}
.scan-coin-piece {
position: absolute;
top: -16px;
width: 8px;
height: 12px;
border-radius: 999px;
background: linear-gradient(180deg, #ffeaa7 0%, #f59e0b 100%);
box-shadow: 0 0 0 1px rgba(255, 210, 99, 0.35);
}
.scan-celebration-copy {
margin: 0;
font-family: var(--font-display);
font-size: 0.9rem;
text-align: center;
position: relative;
z-index: 2;
color: color-mix(in srgb, var(--text-primary), white 10%);
}
.scan-action-shell.is-tier-2 .scan-celebration-shell {
border-color: color-mix(in srgb, #f59e0b, transparent 35%);
}
.scan-action-shell.is-tier-3 .scan-celebration-shell {
border-color: color-mix(in srgb, var(--accent-primary), transparent 18%);
background:
radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--accent-primary), transparent 66%), transparent 52%),
color-mix(in srgb, var(--bg-card), black 6%);
}
.scan-action-shell.is-dismissed {
display: none;
}
.scan-action-bar {
max-width: 540px;
margin: 0 auto;
padding: 0.55rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card), black 8%);
box-shadow: var(--shadow-md);
pointer-events: auto;
display: grid;
gap: 0.5rem;
}
.scan-action-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.55rem;
}
.scan-action-heading {
margin: 0;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
}
.scan-action-header-actions {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.scan-action-toggle,
.scan-action-dismiss {
min-height: 28px;
padding: 0.25rem 0.5rem;
}
.scan-action-details {
display: grid;
gap: 0.45rem;
}
.scan-action-primary {
min-height: 44px;
font-weight: 700;
}
.scan-action-secondary {
margin-top: 0.5rem;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.45rem;
}
.scan-action-secondary .btn {
min-height: 38px;
padding: 0.5rem 0.6rem;
}
.scan-token-delta {
max-width: 540px;
margin: 0 auto 0.45rem;
padding: 0.4rem 0.55rem;
border-radius: var(--radius-sm);
border: 1px solid color-mix(in srgb, var(--success), transparent 58%);
background: color-mix(in srgb, var(--success), transparent 87%);
color: color-mix(in srgb, var(--success), white 12%);
display: flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
font-size: 0.82rem;
font-weight: 700;
opacity: 0;
transform: translateY(8px);
}
.scan-token-delta.is-visible {
animation: scanTokenRise 0.48s ease-out forwards;
}
.scan-token-delta-value {
font-family: var(--font-mono);
font-size: 0.92rem;
}
@media (min-width: 721px) {
.scan-action-toggle {
display: none;
}
}
@keyframes scanTokenRise {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.stat-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.stat-icon {
display: inline-flex;
margin-right: 0.38rem;
opacity: 0.9;
}
.card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.card-title {
margin: 0;
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
}
.card-subtitle {
margin: 0.24rem 0 0;
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
.card-header-actions {
display: inline-flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.empty-state {
border: 1px dashed var(--border);
border-radius: var(--radius-md);
padding: var(--space-7) var(--space-5);
text-align: center;
color: var(--text-secondary);
display: grid;
justify-items: center;
gap: var(--space-3);
max-width: 32rem;
margin: var(--space-5) auto;
}
.empty-state-icon {
font-size: 2.6rem;
line-height: 1;
}
.empty-state-title {
margin: 0;
font-size: 1.05rem;
color: var(--text-primary);
}
.empty-state-message {
margin: 0;
line-height: 1.5;
max-width: 44ch;
}
.empty-state-actions {
display: flex;
gap: var(--space-2);
justify-content: center;
flex-wrap: wrap;
}
.empty-state.compact {
padding: var(--space-4);
margin: var(--space-2) auto;
gap: var(--space-2);
}
.empty-state.compact .empty-state-icon,
.empty-state.compact .empty-state-svg {
transform: scale(0.82);
}
.item-card {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-3);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card), black 4%);
padding: var(--space-3);
}
.item-card-icon {
width: 2.2rem;
height: 2.2rem;
border-radius: var(--radius-sm);
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--bg-elevated), black 3%);
}
.item-card-body {
min-width: 0;
}
.item-card-name {
display: block;
}
.item-card-desc {
margin: 0.22rem 0 0;
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
.item-card-meta {
margin-top: 0.36rem;
display: inline-flex;
flex-wrap: wrap;
gap: 0.36rem;
font-size: var(--font-size-xs);
color: var(--text-muted);
}
.item-card-meta span {
border: 1px solid var(--border);
border-radius: 999px;
padding: 0.1rem 0.44rem;
}
.rarity-common { border-color: color-mix(in srgb, var(--rarity-common), transparent 60%); }
.rarity-uncommon { border-color: color-mix(in srgb, var(--rarity-uncommon), transparent 55%); }
.rarity-rare { border-color: color-mix(in srgb, var(--rarity-rare), transparent 55%); }
.rarity-unique { border-color: color-mix(in srgb, var(--rarity-unique), transparent 52%); }
.rarity-legendary { border-color: color-mix(in srgb, var(--rarity-legendary), transparent 52%); }
.item-expired {
opacity: 0.72;
}
.tab-panel[hidden] {
display: none !important;
}
.form-hint {
margin: -0.1rem 0 0.35rem;
}
.form-help {
display: block;
margin-top: 0.35rem;
}
.input-invalid {
border-color: var(--tone-danger) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone-danger), transparent 75%);
}
.field-error {
display: block;
margin-top: 0.35rem;
color: var(--tone-danger-text);
font-size: var(--font-size-sm);
}
.field-error[hidden] {
display: none;
}
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 1px;
}
.form-validation-summary {
border: 1px solid var(--tone-danger-border);
background: color-mix(in srgb, var(--tone-danger) 12%, var(--bg-card));
color: var(--tone-danger-text);
border-radius: var(--radius-sm);
padding: 0.65rem 0.75rem;
margin-bottom: 1rem;
font-size: 0.9rem;
}
.form-validation-summary[hidden] {
display: none;
}
.form-validation-summary .wizard-validation-list,
.validation-summary-list {
margin: 0.45rem 0 0;
padding-left: 1.1rem;
}
.form-validation-summary .wizard-validation-list li,
.validation-summary-list li {
margin: 0.2rem 0;
}
.validation-summary-link {
color: inherit;
text-decoration: underline;
}
.validation-summary-link:hover {
text-decoration-thickness: 2px;
}
.btn.is-loading,
.btn.btn-loading {
position: relative;
pointer-events: none;
opacity: 0.82;
}
.btn.is-loading::after,
.btn.btn-loading::after {
content: "";
width: 0.72rem;
height: 0.72rem;
border-radius: 999px;
border: 2px solid currentColor;
border-right-color: transparent;
animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin {
to {
transform: rotate(1turn);
}
}
.wm-char-counter {
display: block;
margin-top: 0.25rem;
text-align: right;
color: var(--text-muted);
font-size: var(--font-size-xs);
font-variant-numeric: tabular-nums;
}
.wm-char-counter.is-warning {
color: var(--warning);
}
.wm-char-counter.is-over {
color: var(--danger);
font-weight: var(--font-weight-semibold);
}
.wm-hold-progress {
height: 0.5rem;
margin-top: 0.65rem;
overflow: hidden;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
}
.wm-hold-progress-fill {
width: 0%;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--accent-warm), #f4d9a4);
transition: width 30ms linear;
}
[data-autosave-status] {
color: var(--text-muted);
font-size: var(--font-size-xs);
font-style: italic;
}
.wm-sortable-ghost {
opacity: 0.6;
}
.wm-sortable-chosen {
cursor: grabbing;
}
.wm-sortable-drag {
cursor: grabbing;
}
.wm-sortable-handle {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
min-height: 2.5rem;
border-radius: 0.75rem;
border: 1px dashed color-mix(in srgb, var(--color-border) 82%, transparent);
background: color-mix(in srgb, var(--color-surface) 92%, transparent);
color: var(--color-text-muted, #9aa4c2);
cursor: grab;
touch-action: none;
}
.wm-sortable-handle:active {
cursor: grabbing;
}
.wm-relational-combo {
display: grid;
gap: 0.55rem;
}
.wm-relational-combo .ts-wrapper {
border: 1px solid var(--border, rgba(255, 255, 255, 0.14));
border-radius: 14px;
background: var(--surface-elevated, rgba(18, 25, 44, 0.92));
min-height: 48px;
padding: 0.2rem 0.45rem;
transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.wm-relational-combo .ts-wrapper.focus,
.wm-relational-combo .ts-wrapper:focus-within {
border-color: var(--accent, #4da3ff);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #4da3ff) 18%, transparent);
}
.wm-relational-combo .ts-wrapper.disabled {
opacity: 0.6;
}
.wm-relational-combo .ts-control {
background: transparent;
border: 0;
box-shadow: none;
color: var(--text-primary, #f5f7ff);
display: flex;
gap: 0.35rem;
min-height: 40px;
padding: 0;
}
.wm-relational-combo .ts-control input {
color: inherit;
}
.wm-relational-combo .ts-control input::placeholder {
color: var(--text-muted, rgba(229, 233, 255, 0.55));
}
.wm-relational-combo .ts-control .item {
align-items: center;
background: color-mix(in srgb, var(--accent, #4da3ff) 18%, transparent);
border: 1px solid color-mix(in srgb, var(--accent, #4da3ff) 40%, transparent);
border-radius: 999px;
color: var(--text-primary, #f5f7ff);
display: inline-flex;
font-size: 0.95rem;
font-weight: 600;
gap: 0.35rem;
margin: 0.15rem 0.2rem 0.15rem 0;
padding: 0.35rem 0.7rem;
}
.wm-relational-combo .ts-dropdown {
background: var(--surface-raised, rgba(12, 18, 34, 0.98));
border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.16));
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.34);
color: var(--text-primary, #f5f7ff);
margin-top: 0.35rem;
overflow: hidden;
z-index: 80;
}
.wm-relational-combo .ts-dropdown .option,
.wm-relational-combo .ts-dropdown .create {
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
padding: 0.7rem 0.85rem;
}
.wm-relational-combo .ts-dropdown .option:last-child,
.wm-relational-combo .ts-dropdown .create:last-child {
border-bottom: 0;
}
.wm-relational-combo .ts-dropdown .active,
.wm-relational-combo .ts-dropdown .create.active {
background: color-mix(in srgb, var(--accent, #4da3ff) 18%, rgba(255, 255, 255, 0.02));
color: var(--text-primary, #f5f7ff);
}
.wm-relational-combo__option {
display: grid;
gap: 0.2rem;
}
.wm-relational-combo__option-title {
font-weight: 700;
}
.wm-relational-combo__option-meta {
color: var(--text-secondary, rgba(229, 233, 255, 0.72));
font-size: 0.84rem;
}
.wm-relational-combo__sheet-target {
position: relative;
z-index: 30;
}
.wm-relational-combo__hint {
color: var(--text-secondary, rgba(229, 233, 255, 0.72));
font-size: 0.86rem;
}
.wm-relational-combo__create-title {
font-weight: 700;
}
.wm-relational-combo__create-subtitle {
color: var(--text-secondary, rgba(229, 233, 255, 0.72));
display: block;
font-size: 0.82rem;
margin-top: 0.15rem;
}
.mention-menu {
position: absolute;
z-index: 70;
min-width: 18rem;
max-width: min(28rem, calc(100vw - 2rem));
max-height: 18rem;
overflow: auto;
padding: 0.4rem;
border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
border-radius: 1rem;
background: var(--surface-elevated, rgba(11, 18, 32, 0.96));
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
}
.mention-menu[hidden] {
display: none;
}
.mention-menu__item {
display: block;
width: 100%;
padding: 0.75rem 0.85rem;
border: 0;
border-radius: 0.85rem;
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
}
.mention-menu__item.is-active,
.mention-menu__item:hover,
.mention-menu__item:focus-visible {
background: rgba(88, 166, 255, 0.16);
outline: none;
}
.mention-menu__label {
display: block;
font-weight: 700;
}
.mention-menu__meta {
display: block;
margin-top: 0.2rem;
color: var(--text-muted, rgba(255, 255, 255, 0.7));
font-size: 0.88rem;
}
.flatpickr-calendar {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card) 96%, black);
box-shadow: 0 22px 48px rgba(3, 7, 18, 0.45);
color: var(--text-primary);
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year,
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
color: var(--text-primary);
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year,
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
border-radius: var(--radius-xs);
}
.flatpickr-weekday,
.flatpickr-day {
color: var(--text-primary);
}
.flatpickr-day:hover,
.flatpickr-day:focus-visible,
.flatpickr-time input:hover,
.flatpickr-time input:focus-visible,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus-visible,
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
color: var(--accent);
}
.flatpickr-day:hover,
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover {
background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.flatpickr-day.today {
border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
border-color: color-mix(in srgb, var(--accent) 65%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 78%, #8fdcff), color-mix(in srgb, var(--accent-2) 72%, #c4f4ff));
color: #08111f;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
color: color-mix(in srgb, var(--text-muted) 65%, transparent);
}
.flatpickr-time {
border-top-color: var(--border-subtle);
}
.flatpickr-time input:focus-visible,
.flatpickr-time .flatpickr-am-pm:focus-visible,
.flatpickr-current-month input.cur-year:focus-visible,
.flatpickr-current-month .flatpickr-monthDropdown-months:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 1px;
}
.flatpickr-input[readonly] {
cursor: pointer;
}
.badge,
.status-badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
line-height: 1.3;
white-space: nowrap;
border: 1px solid transparent;
vertical-align: middle;
text-transform: uppercase;
letter-spacing: 0.04em;
background: rgba(255, 255, 255, 0.06);
color: var(--text-secondary);
}
.badge-outline {
background: transparent;
border-color: var(--border);
}
.badge-lg,
.status-badge.badge-lg {
padding: 0.3rem 0.85rem;
font-size: var(--font-size-sm);
}
.badge-sm,
.status-badge.badge-sm {
padding: 0.1rem 0.45rem;
font-size: 0.65rem;
}
.badge-success,
.badge.tone-success,
.badge-outline.tone-success,
.status-badge.success,
.status-badge.status-success,
.status-badge.active,
.status-badge.status-active,
.status-badge.approved,
.status-badge.resolved,
.status-badge.completed,
.status-badge.in_progress,
.status-badge.claimed,
.status-badge.ready {
color: var(--tone-success);
border-color: var(--tone-success-border);
background: var(--tone-success-muted);
}
.badge-warning,
.badge.tone-warning,
.badge-outline.tone-warning,
.status-badge.warning,
.status-badge.status-warning,
.status-badge.draft,
.status-badge.status-draft,
.status-badge.paused,
.status-badge.status-paused,
.status-badge.pending,
.status-badge.status-pending {
color: var(--tone-warning);
border-color: var(--tone-warning-border);
background: var(--tone-warning-muted);
}
.badge-danger,
.badge.tone-danger,
.badge-outline.tone-danger,
.status-badge.error,
.status-badge.danger,
.status-badge.status-danger,
.status-badge.expired,
.status-badge.status-expired,
.status-badge.revoked,
.status-badge.status-revoked,
.status-badge.rejected,
.status-badge.locked,
.status-badge.status-locked {
color: var(--tone-danger);
border-color: var(--tone-danger-border);
background: var(--tone-danger-muted);
}
.badge-info,
.badge.tone-info,
.badge-outline.tone-info,
.status-badge.info,
.status-badge.status-info,
.status-badge.open,
.status-badge.acknowledged,
.status-badge.available {
color: var(--tone-info);
border-color: var(--tone-info-border);
background: var(--tone-info-muted);
}
.badge-muted,
.badge.tone-muted,
.badge-outline.tone-muted,
.status-badge.muted {
color: var(--tone-muted);
border-color: var(--tone-muted-border);
background: var(--tone-muted-muted);
}
.badge-accent,
.badge.tone-accent,
.badge-outline.tone-accent {
color: var(--tone-accent);
border-color: var(--tone-accent-border);
background: var(--tone-accent-muted);
}
.badge-warm,
.badge.tone-warm,
.badge-outline.tone-warm {
color: var(--tone-warm);
border-color: var(--tone-warm-border);
background: var(--tone-warm-muted);
}
.badge-rarity-common {
color: var(--rarity-common);
border-color: color-mix(in srgb, var(--rarity-common) 40%, transparent);
background: color-mix(in srgb, var(--rarity-common) 10%, transparent);
}
.badge-rarity-uncommon {
color: var(--rarity-uncommon);
border-color: color-mix(in srgb, var(--rarity-uncommon) 40%, transparent);
background: color-mix(in srgb, var(--rarity-uncommon) 10%, transparent);
}
.badge-rarity-rare {
color: var(--rarity-rare);
border-color: color-mix(in srgb, var(--rarity-rare) 40%, transparent);
background: color-mix(in srgb, var(--rarity-rare) 10%, transparent);
}
.badge-rarity-unique {
color: var(--rarity-unique);
border-color: color-mix(in srgb, var(--rarity-unique) 40%, transparent);
background: color-mix(in srgb, var(--rarity-unique) 10%, transparent);
}
.badge-rarity-legendary {
color: var(--rarity-legendary);
border-color: color-mix(in srgb, var(--rarity-legendary) 40%, transparent);
background: color-mix(in srgb, var(--rarity-legendary) 10%, transparent);
}
.badge-faction,
.faction-badge {
--fc: var(--faction-color, var(--accent-primary));
color: var(--fc);
border-color: color-mix(in srgb, var(--fc) 40%, transparent);
background: color-mix(in srgb, var(--fc) 14%, transparent);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.badge-dot,
.notification-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.2rem;
height: 1.2rem;
padding: 0 0.3rem;
border-radius: 999px;
background: var(--danger);
color: #fff;
font-size: 0.68rem;
font-weight: var(--font-weight-bold);
line-height: 1;
}
.avatar {
width: 1.9rem;
height: 1.9rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--accent-primary), black 22%);
color: #fff;
font-size: 0.78rem;
font-weight: 700;
overflow: hidden;
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.time-ago {
color: var(--text-muted);
font-size: var(--font-size-sm);
}
[data-sheet-region] {
position: relative;
z-index: var(--z-sheet-region, 129);
}
.wm-sheet {
--sheet-max-height: 85vh;
--sheet-backdrop: rgba(2, 6, 18, 0.7);
position: fixed;
inset: 0;
z-index: var(--z-sheet, 130);
pointer-events: none;
display: flex;
align-items: flex-end;
visibility: hidden;
}
.wm-sheet[aria-hidden="false"] {
pointer-events: auto;
visibility: visible;
}
.wm-sheet.is-underlay .wm-sheet-panel {
transform: translateY(0) scale(0.985);
opacity: 0.92;
}
.wm-sheet-backdrop {
position: absolute;
inset: 0;
border: 0;
background: var(--sheet-backdrop);
opacity: 0;
transition: opacity var(--transition-base, 200ms) ease;
}
.wm-sheet[aria-hidden="false"] .wm-sheet-backdrop {
opacity: 1;
}
.wm-sheet.is-underlay .wm-sheet-backdrop {
opacity: 0.46;
}
.wm-sheet-panel {
position: relative;
width: 100%;
max-height: var(--sheet-max-height);
min-height: 0;
margin: 0;
background: var(--bg-card);
border: 1px solid var(--border);
border-bottom: 0;
border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
box-shadow: var(--shadow-xl, 0 -4px 32px rgba(0, 0, 0, 0.3));
transform: translateY(100%);
transition: transform var(--transition-slow, 300ms) cubic-bezier(0.32, 0.72, 0, 1), opacity var(--transition-base, 200ms) ease;
overflow: hidden;
display: flex;
flex-direction: column;
padding-bottom: var(--sab);
}
.wm-sheet[aria-hidden="false"] .wm-sheet-panel {
transform: translateY(0);
}
.wm-sheet-handle {
width: 36px;
height: 4px;
border-radius: 999px;
background: color-mix(in srgb, var(--text-muted), transparent 45%);
margin: 0.625rem auto 0;
flex-shrink: 0;
cursor: grab;
}
.wm-sheet-handle:active {
cursor: grabbing;
background: color-mix(in srgb, var(--text-muted), transparent 20%);
}
.wm-sheet-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.625rem calc(1rem + var(--sar)) 0.5rem calc(1rem + var(--sal));
flex-shrink: 0;
}
.wm-sheet-title {
margin: 0;
color: var(--text-primary);
font-size: 1rem;
font-weight: 600;
}
.wm-sheet-close {
min-width: 44px;
min-height: 44px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-elevated), black 4%);
color: var(--text-secondary);
font-size: 1rem;
line-height: 1;
cursor: pointer;
}
.wm-sheet-close:hover {
color: var(--text-primary);
background: color-mix(in srgb, var(--bg-elevated), white 4%);
}
.wm-sheet-body {
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
flex: 1;
min-height: 0;
padding: 0 calc(1rem + var(--sar)) 1rem calc(1rem + var(--sal));
}
body.wm-sheet-open {
overflow: hidden;
touch-action: none;
}
.wm-sheet[data-sheet-size="sm"] {
--sheet-max-height: 50vh;
}
.wm-sheet[data-sheet-size="md"] {
--sheet-max-height: 70vh;
}
.wm-sheet[data-sheet-size="lg"] {
--sheet-max-height: 85vh;
}
.wm-sheet[data-sheet-size="full"] {
--sheet-max-height: 100vh;
}
.wm-sheet-actions {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 0.5rem;
padding: 0.5rem 0;
}
.wm-sheet-action {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.375rem;
min-height: 48px;
padding: 0.75rem;
border-radius: var(--radius);
border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-elevated), black 4%);
color: var(--text-primary);
text-decoration: none;
text-align: center;
font-size: 0.85rem;
cursor: pointer;
}
.wm-sheet-action:hover {
background: color-mix(in srgb, var(--bg-elevated), white 4%);
}
.wm-sheet-action.is-danger {
color: color-mix(in srgb, var(--danger), white 6%);
border-color: color-mix(in srgb, var(--danger), transparent 38%);
background: color-mix(in srgb, var(--danger), transparent 88%);
}
.wm-sheet-cancel {
display: block;
width: 100%;
min-height: 48px;
padding: 0.875rem;
margin-top: 0.5rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: transparent;
color: var(--text-muted);
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
}
.wm-sheet-cancel:hover {
background: color-mix(in srgb, var(--bg-elevated), white 3%);
}
.wm-sheet[data-confirm-risk="high"] .wm-sheet-panel {
border-color: color-mix(in srgb, var(--danger), transparent 52%);
}
.wm-sheet[data-confirm-risk="medium"] .wm-sheet-panel {
border-color: color-mix(in srgb, var(--warning), transparent 58%);
}
.wm-confirm-sheet-body {
display: grid;
gap: 0.85rem;
padding-top: 0.35rem;
}
.wm-confirm-sheet__header-copy {
display: grid;
gap: 0.35rem;
}
.wm-confirm-sheet__eyebrow,
.wm-confirm-sheet__zone {
margin: 0;
display: inline-flex;
align-items: center;
width: fit-content;
padding: 0.26rem 0.7rem;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.wm-confirm-sheet__eyebrow {
background: color-mix(in srgb, var(--accent-primary), transparent 84%);
color: color-mix(in srgb, var(--accent-primary), white 18%);
}
.wm-sheet[data-confirm-risk="medium"] .wm-confirm-sheet__eyebrow {
background: color-mix(in srgb, var(--warning), transparent 82%);
color: color-mix(in srgb, var(--warning), white 14%);
}
.wm-sheet[data-confirm-risk="high"] .wm-confirm-sheet__eyebrow,
.wm-confirm-sheet__zone {
background: color-mix(in srgb, var(--danger), transparent 84%);
color: color-mix(in srgb, var(--danger), white 10%);
}
.wm-confirm-sheet__message {
margin: 0;
color: var(--text-primary);
font-size: 1rem;
font-weight: 600;
line-height: 1.45;
}
.wm-confirm-sheet__detail {
margin: 0;
}
.wm-confirm-sheet__consequences {
margin: 0;
padding-left: 1.15rem;
display: grid;
gap: 0.45rem;
color: var(--text-secondary);
}
.wm-confirm-sheet__match {
display: grid;
gap: 0.45rem;
}
.wm-confirm-sheet__match-label {
color: var(--text-primary);
font-weight: 600;
}
.wm-confirm-sheet__actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
@media (min-width: 769px) {
.wm-sheet {
align-items: center;
justify-content: center;
}
.wm-sheet-panel {
max-height: 80vh;
max-width: min(560px, 90vw);
border-bottom: 1px solid var(--border);
border-radius: var(--radius-lg);
transform: translateY(24px);
opacity: 0;
}
.wm-sheet[aria-hidden="false"] .wm-sheet-panel {
transform: translateY(0);
opacity: 1;
}
.wm-sheet.is-underlay .wm-sheet-panel {
transform: translateY(0) scale(0.985);
opacity: 0.88;
}
.wm-sheet-handle {
display: none;
}
.wm-sheet.is-drawer {
align-items: stretch;
justify-content: flex-end;
}
.wm-sheet.is-drawer .wm-sheet-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: auto;
width: min(520px, 100%);
max-width: min(520px, 100%);
max-height: none;
border-radius: 0;
border-bottom: 0;
transform: translateX(100%);
opacity: 1;
}
.wm-sheet.is-drawer[aria-hidden="false"] .wm-sheet-panel {
transform: translateX(0);
}
}
.modal-shell {
position: fixed;
inset: 0;
z-index: var(--z-modal);
}
.modal-shell[hidden] {
display: none !important;
}
.modal-backdrop {
position: absolute;
inset: 0;
border: 0;
background: rgba(2, 8, 22, 0.7);
}
.modal-panel {
position: relative;
width: min(720px, calc(100vw - 1.25rem));
margin: 9vh auto 0;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: var(--space-4);
max-height: 82vh;
overflow: auto;
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.modal-header h3 {
margin: 0;
}
.swal2-container {
z-index: 1900;
}
.wm-modal-popup {
width: min(32rem, calc(100vw - 2rem));
border-radius: 24px;
border: 1px solid var(--border-strong);
background:
linear-gradient(180deg, rgba(20, 28, 54, 0.98), rgba(10, 16, 34, 0.98)),
var(--surface-elevated);
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.42);
color: var(--text-primary);
padding: 1.5rem;
}
.wm-modal-popup-low {
border-color: color-mix(in srgb, var(--accent-primary) 26%, var(--border-strong));
}
.wm-modal-popup-medium {
border-color: color-mix(in srgb, var(--warning) 34%, var(--border-strong));
}
.wm-modal-popup-danger {
border-color: color-mix(in srgb, var(--danger) 48%, var(--border-strong));
}
.wm-modal-title {
font-size: clamp(1.2rem, 1rem + 0.6vw, 1.6rem);
line-height: 1.15;
color: var(--text-primary);
}
.wm-modal-body {
color: var(--text-secondary);
font-size: 0.98rem;
line-height: 1.55;
display: grid;
gap: 0.85rem;
}
.wm-modal-actions {
gap: 0.75rem;
margin-top: 1.25rem;
}
.wm-modal-button {
min-width: 8.5rem;
}
.wm-modal-input {
margin-top: 0.5rem;
}
.wm-modal-risk {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.wm-modal-risk-badge,
.wm-modal-zone-label {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.24rem 0.65rem;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.wm-modal-risk-badge-low {
background: color-mix(in srgb, var(--accent-primary), transparent 82%);
color: color-mix(in srgb, var(--accent-primary), white 18%);
}
.wm-modal-risk-badge-medium {
background: color-mix(in srgb, var(--warning), transparent 84%);
color: color-mix(in srgb, var(--warning), white 18%);
}
.wm-modal-risk-badge-high,
.wm-modal-zone-label {
background: color-mix(in srgb, var(--danger), transparent 84%);
color: color-mix(in srgb, var(--danger), white 12%);
}
.wm-modal-message {
margin: 0;
color: var(--text-primary);
font-size: 1rem;
font-weight: 600;
line-height: 1.45;
}
.wm-modal-detail,
.wm-modal-match-help {
margin: 0;
}
.wm-modal-consequences {
margin: 0;
padding-left: 1.15rem;
display: grid;
gap: 0.45rem;
}
.wm-modal-consequences li {
color: var(--text-secondary);
}
@media (max-width: 640px) {
.wm-modal-popup {
width: calc(100vw - 1rem);
padding: 1.1rem;
border-radius: 20px;
}
.wm-modal-actions {
display: grid;
grid-template-columns: 1fr;
}
.wm-modal-button {
width: 100%;
}
}
.wmu-ptr--ptr {
min-height: 0;
opacity: 0;
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
margin: 0 0 0.35rem;
pointer-events: none;
transition:
min-height 0.22s ease,
opacity 0.22s ease;
}
.wmu-ptr--ptr.wmu-ptr--pull,
.wmu-ptr--ptr.wmu-ptr--release,
.wmu-ptr--ptr.wmu-ptr--refresh {
opacity: 1;
}
.wmu-ptr--box {
width: 100%;
}
.pull-refresh-indicator-shell {
display: flex;
justify-content: center;
}
.pull-refresh-indicator {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.15rem 0.7rem 0.55rem;
color: var(--text-secondary);
font-size: 0.84rem;
font-weight: 640;
}
.pull-refresh-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1rem;
font-size: 1rem;
line-height: 1;
transition:
transform 0.22s ease,
opacity 0.22s ease;
}
.wmu-ptr--release .pull-refresh-icon {
transform: rotate(180deg);
}
.wmu-ptr--refresh .pull-refresh-icon {
animation: wmu-ptr-spin 0.8s linear infinite;
}
.wmu-ptr--top {
overscroll-behavior-y: contain;
}
@keyframes wmu-ptr-spin {
to {
transform: rotate(360deg);
}
}
#nprogress {
pointer-events: none;
}
#nprogress .bar {
position: fixed;
inset: 0 auto auto 0;
z-index: 4200;
width: 100%;
height: 3px;
background: linear-gradient(
90deg,
color-mix(in srgb, var(--accent-primary, #5db3ff) 82%, white 18%) 0%,
var(--accent-primary, #5db3ff) 48%,
color-mix(in srgb, var(--accent-primary, #5db3ff) 68%, var(--success, #5ee3a1) 32%) 100%
);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--accent-primary, #5db3ff) 16%, transparent),
0 0 18px color-mix(in srgb, var(--accent-primary, #5db3ff) 42%, transparent);
}
#nprogress .peg {
position: absolute;
right: 0;
display: block;
width: 120px;
height: 100%;
opacity: 1;
transform: rotate(2deg) translateY(-1px);
box-shadow:
0 0 10px color-mix(in srgb, var(--accent-primary, #5db3ff) 55%, transparent),
0 0 6px color-mix(in srgb, var(--accent-primary, #5db3ff) 40%, transparent);
}
#nprogress .spinner {
display: none !important;
}
@media (prefers-reduced-motion: reduce) {
#nprogress .bar,
#nprogress .peg {
transition: none !important;
animation: none !important;
}
}
:root {
--gm-sidebar-width: 264px;
}
.dashboard-header {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
align-items: stretch;
padding: var(--space-4);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface-shell);
margin-bottom: var(--space-5);
box-shadow: var(--shadow-sm);
}
.dashboard-header > :first-child {
display: grid;
gap: 0.35rem;
}
.dashboard-nav {
display: grid;
gap: var(--space-3);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--surface-shell), black 4%);
padding: var(--space-3);
min-width: 0;
box-shadow: var(--shadow-sm);
}
.gm-nav-mobile-bar,
.gm-nav-mobile-menu {
display: none;
}
.gm-nav-mobile-bar {
gap: 0.45rem;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.gm-nav-mobile-trigger {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--surface-2), black 4%);
color: var(--text-secondary);
min-height: 40px;
padding: 0.45rem 0.72rem;
display: inline-flex;
align-items: center;
gap: 0.42rem;
font-size: 0.82rem;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
}
.gm-nav-mobile-trigger:hover,
.gm-nav-mobile-trigger.active {
color: var(--text-primary);
background: color-mix(in srgb, var(--tone-lantern), transparent 88%);
}
.gm-nav-mobile-icon {
width: 1.15rem;
height: 1.15rem;
border-radius: 999px;
border: 1px solid var(--tone-lantern-border);
color: var(--tone-lantern-text);
font-size: 0.7rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.gm-nav-mobile-menu {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--surface-shell), black 8%);
padding: var(--space-2);
box-shadow: var(--shadow-md);
}
.gm-nav-mobile-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-2);
}
.gm-nav-mobile-links {
display: grid;
gap: 0.35rem;
}
.gm-nav-mobile-links a {
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-sm);
color: var(--text-secondary);
font-weight: 600;
padding: 0.52rem 0.7rem;
}
.gm-nav-mobile-links a.active,
.gm-nav-mobile-links a:hover {
color: var(--text-primary);
background: color-mix(in srgb, var(--tone-lantern), transparent 88%);
}
.gm-nav-mobile-links .gm-nav-link-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 34px;
gap: 0.35rem;
}
.gm-nav-mobile-links .gm-nav-link-add {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.92rem;
font-weight: 800;
padding: 0;
}
.gm-nav-groups {
display: grid;
gap: 0.55rem;
min-width: 0;
}
.gm-nav-group {
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--surface-2), black 4%);
}
.gm-nav-group > summary {
list-style: none;
cursor: pointer;
padding: 0.58rem 0.62rem;
display: flex;
align-items: center;
gap: 0.55rem;
color: var(--text-primary);
font-size: 0.83rem;
font-weight: 700;
}
.gm-nav-group > summary::-webkit-details-marker {
display: none;
}
.gm-nav-group-icon {
width: 1.12rem;
height: 1.12rem;
border-radius: 999px;
border: 1px solid var(--tone-lantern-border);
color: var(--tone-lantern-text);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 700;
flex-shrink: 0;
}
.gm-nav-group-label {
flex: 1;
}
.gm-nav-group--sub {
border-style: dashed;
border-color: color-mix(in srgb, var(--border), transparent 28%);
background: color-mix(in srgb, var(--bg-card), black 2%);
}
.gm-nav-group-chevron {
color: var(--text-muted);
transition: transform var(--transition);
transform-origin: center;
}
.gm-nav-group-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
border-radius: 999px;
padding: 0 0.35rem;
font-size: 0.68rem;
font-weight: 700;
color: var(--text-inverse);
background: color-mix(in srgb, var(--tone-hearth), black 8%);
}
.gm-nav-group[open] .gm-nav-group-chevron {
transform: rotate(0deg);
}
.gm-nav-group:not([open]) .gm-nav-group-chevron {
transform: rotate(-90deg);
}
.gm-nav-links {
display: grid;
gap: 0.25rem;
padding: 0 0.45rem 0.5rem;
}
.gm-nav-link-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 30px;
gap: 0.3rem;
}
.gm-nav-link-main,
.gm-nav-link-add {
border-radius: var(--radius-xs);
color: var(--text-secondary);
font-size: 0.8rem;
font-weight: 600;
line-height: 1.35;
padding: 0.45rem 0.55rem;
}
.gm-nav-link-add {
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
padding: 0.35rem 0;
color: var(--tone-lantern-text);
border: 1px solid var(--tone-lantern-border);
background: color-mix(in srgb, var(--surface-3), black 2%);
transition: opacity var(--transition), transform var(--transition), background var(--transition), box-shadow var(--transition);
}
.gm-nav-links a {
border-radius: var(--radius-xs);
color: var(--text-secondary);
font-size: 0.8rem;
font-weight: 600;
line-height: 1.35;
padding: 0.45rem 0.55rem;
}
.gm-nav-links a:hover,
.gm-nav-links a.active {
color: var(--text-primary);
background: color-mix(in srgb, var(--tone-lantern), transparent 88%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone-keepsake), transparent 72%);
}
.gm-nav-link-main:hover,
.gm-nav-link-main.active,
.gm-nav-link-add:hover,
.gm-nav-link-add.active {
color: var(--text-primary);
background: rgba(34, 50, 84, 0.84);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.gm-nav-link-add:hover,
.gm-nav-link-add.active {
color: color-mix(in srgb, var(--accent-primary), white 28%);
}
.gm-nav-module-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.gm-nav-module-icon {
width: 1rem;
text-align: center;
opacity: 0.92;
}
.gm-nav-show-all {
width: 100%;
border: 0;
border-radius: var(--radius-xs);
background: rgba(16, 24, 41, 0.82);
color: var(--text-muted);
text-align: left;
font-size: 0.76rem;
font-weight: 640;
padding: 0.4rem 0.55rem;
cursor: pointer;
}
.gm-nav-show-all:hover {
color: var(--text-primary);
background: rgba(24, 36, 60, 0.88);
}
.gm-nav-hidden-modules {
display: grid;
gap: 0.25rem;
}
.gm-nav-hidden-modules[hidden] {
display: none !important;
}
.gm-nav-link-row--inactive {
opacity: 0.58;
}
.gm-nav-link-row--inactive:hover,
.gm-nav-link-row--inactive:focus-within {
opacity: 0.88;
}
@media (hover: hover) and (pointer: fine) {
.gm-nav-link-row .gm-nav-link-add {
opacity: 0.26;
transform: scale(0.92);
}
.gm-nav-link-row:hover .gm-nav-link-add,
.gm-nav-link-row:focus-within .gm-nav-link-add,
.gm-nav-link-add:focus-visible,
.gm-nav-link-main.active + .gm-nav-link-add {
opacity: 1;
transform: none;
}
}
.gm-nav-footer {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: var(--space-2);
display: flex;
flex-direction: column;
gap: 0.45rem;
align-items: stretch;
}
.gm-nav-status-strip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.35rem;
}
.gm-nav-status-item {
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-xs);
background: rgba(10, 16, 29, 0.88);
padding: 0.42rem 0.4rem;
text-align: center;
}
.gm-nav-status-strip.is-stale .gm-nav-status-item {
opacity: 0.72;
}
.gm-nav-status-label {
display: block;
color: var(--text-muted);
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.07em;
}
.gm-nav-status-item strong {
display: block;
margin-top: 0.12rem;
font-size: 0.88rem;
color: var(--text-primary);
}
.gm-nav-dev-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
width: 100%;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-secondary);
background: rgba(22, 34, 60, 0.76);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.gm-nav-dev-link:hover {
color: var(--text-primary);
background: rgba(32, 47, 76, 0.9);
}
.gm-mobile-fab {
display: none;
position: fixed;
right: var(--space-4);
bottom: calc(var(--space-4) + var(--sab));
z-index: 70;
}
.gm-mobile-fab-trigger {
width: 56px;
height: 56px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--accent-primary), white 15%);
background: linear-gradient(135deg, var(--accent-primary), #3c8fe2);
color: #fff;
font-size: 1.55rem;
font-weight: 700;
box-shadow: var(--shadow-md);
cursor: pointer;
}
.gm-mobile-fab-menu {
display: none;
position: absolute;
right: 0;
bottom: 64px;
min-width: 220px;
gap: 0.45rem;
}
.gm-mobile-fab.is-open .gm-mobile-fab-menu {
display: grid;
}
.gm-mobile-fab.is-open .gm-mobile-fab-trigger {
transform: rotate(45deg);
}
.gm-mobile-fab-item {
display: block;
width: 100%;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: rgba(12, 20, 38, 0.96);
color: var(--text-primary);
padding: 0.58rem 0.72rem;
text-decoration: none;
text-align: left;
font-size: 0.84rem;
font-weight: 600;
font-family: inherit;
appearance: none;
cursor: pointer;
}
.gm-mobile-fab-item:hover {
background: rgba(28, 40, 68, 0.96);
}
@media (max-width: 520px) {
.stats-grid--3up {
grid-template-columns: 1fr;
}
}
.dashboard-nav::-webkit-scrollbar {
width: var(--scrollbar-size-compact);
height: var(--scrollbar-size-compact);
}
.dashboard-nav::-webkit-scrollbar-track {
background: rgba(21, 21, 34, 0.9);
border: 1px solid rgba(123, 97, 255, 0.22);
border-radius: 999px;
}
.dashboard-nav::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(123, 97, 255, 0.85), rgba(58, 142, 255, 0.85));
border: 1px solid rgba(16, 16, 26, 0.9);
border-radius: 999px;
}
@media (min-width: 1181px) and (min-height: 841px), (hover: hover) and (pointer: fine) and (min-width: 1024px) {
.dashboard-header {
grid-template-columns: minmax(0, 1fr);
}
body[data-app-role="gm"] .container.page {
max-width: var(--gm-page-max-width, 1240px);
padding-left: calc(var(--space-5) + var(--gm-sidebar-width) + var(--space-5));
}
body[data-app-role="gm"] .dashboard-nav {
position: fixed;
top: var(--space-6);
left: max(var(--space-5), calc((100vw - var(--gm-page-max-width, 1240px)) / 2 + var(--space-5)));
width: var(--gm-sidebar-width);
max-height: calc(100vh - var(--space-6) * 2);
overflow-y: auto;
z-index: 40;
}
body[data-app-role="gm"] .dashboard-header {
min-height: 160px;
}
.gm-mobile-fab {
display: none !important;
}
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.stat-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-4);
text-align: center;
}
.stat-value {
font-size: clamp(1.45rem, 1.3vw + 1rem, 1.95rem);
font-weight: 800;
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat-label {
font-size: 0.8rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.feed-item {
display: flex;
gap: var(--space-3);
padding: var(--space-3);
border-bottom: 1px solid var(--border);
transition: var(--transition);
}
.feed-item:hover {
background: var(--bg-secondary);
}
.feed-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.feed-body { flex: 1; }
.feed-meta { font-size: 0.8rem; color: var(--text-muted); }
.feed-photo { max-height: 200px; border-radius: var(--radius-sm); margin-top: 0.5rem; }
.table-wrapper {
overflow-x: auto;
scrollbar-gutter: stable both-edges;
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.table-wrap,
.table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.stats-grid--3up {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
table {
width: 100%;
border-collapse: collapse;
background: color-mix(in srgb, var(--bg-card), black 6%);
}
th,
td {
padding: 0.62rem 0.82rem;
text-align: left;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
th {
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-muted);
font-weight: 600;
background: color-mix(in srgb, var(--bg-card), black 8%);
}
tr:hover td {
background: color-mix(in srgb, var(--bg-secondary), transparent 20%);
}
tbody tr:nth-child(even) td {
background: color-mix(in srgb, var(--bg-card), black 3%);
}
tbody tr:nth-child(even):hover td {
background: color-mix(in srgb, var(--bg-secondary), transparent 16%);
}
.table-sticky thead th {
position: sticky;
top: 0;
z-index: 2;
background: color-mix(in srgb, var(--bg-card), black 8%);
}
.page-actions {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
align-items: center;
}
.action-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2);
}
.filter-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.table-actions {
display: flex;
gap: 0.3rem;
flex-wrap: wrap;
}
.section-stack {
display: grid;
gap: var(--space-4);
}
.card-tight {
padding: 1rem;
}
.severity-badge {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
border: 1px solid var(--border);
}
.severity-badge.low {
color: #86efac;
border-color: rgba(134, 239, 172, 0.35);
background: rgba(134, 239, 172, 0.12);
}
.severity-badge.medium {
color: #fcd34d;
border-color: rgba(252, 211, 77, 0.35);
background: rgba(252, 211, 77, 0.12);
}
.severity-badge.high {
color: #fb923c;
border-color: rgba(251, 146, 60, 0.35);
background: rgba(251, 146, 60, 0.12);
}
.severity-badge.critical {
color: #f87171;
border-color: rgba(248, 113, 113, 0.4);
background: rgba(248, 113, 113, 0.14);
}
.collapsible-card {
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--bg-card);
overflow: hidden;
}
.collapsible-card > summary {
list-style: none;
cursor: pointer;
padding: 0.9rem 1rem;
font-weight: 700;
border-bottom: 1px solid transparent;
}
.collapsible-card > summary::-webkit-details-marker {
display: none;
}
.collapsible-card[open] > summary {
border-bottom-color: var(--border);
}
.collapsible-body {
padding: var(--space-3);
}
.details-section {
margin-bottom: 1rem;
}
.details-section-subtitle {
margin-bottom: 0.8rem;
}
.item-inline-details,
.staff-inline-expert {
margin-top: 0.6rem;
}
.item-inline-details > summary,
.staff-inline-expert > summary {
padding: 0.55rem 0.75rem;
font-size: 0.82rem;
font-weight: 600;
}
.item-inline-details .collapsible-body,
.staff-inline-expert .collapsible-body {
padding: 0.75rem;
}
.empty-state-box {
border: 1px dashed var(--border);
border-radius: var(--radius-md);
padding: var(--space-5);
text-align: center;
color: var(--text-secondary);
}
.avatar-chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, var(--accent-primary), #2681c5);
}
.audit-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
border: 1px solid var(--border);
border-radius: 999px;
padding: 0.2rem 0.5rem;
font-size: 0.7rem;
color: var(--text-secondary);
}
.help-drawer {
position: fixed;
top: 0;
right: 0;
width: min(380px, 92vw);
height: 100vh;
background: color-mix(in srgb, var(--bg-card), black 5%);
border-left: 1px solid var(--border);
box-shadow: var(--shadow-lg);
transform: translateX(100%);
transition: transform var(--transition-slow);
z-index: 80;
padding: var(--space-4);
overflow-y: auto;
}
.help-drawer.open {
transform: translateX(0%);
}
.help-drawer h3 {
margin-bottom: var(--space-2);
}
.help-drawer ul {
margin-left: 1rem;
color: var(--text-secondary);
display: grid;
gap: 0.35rem;
}
.help-drawer-close {
margin-left: auto;
}
.ops-page-help {
margin-top: var(--space-3);
}
.breadcrumb {
display: flex;
align-items: center;
gap: 0.45rem;
margin-bottom: var(--space-3);
color: var(--text-muted);
font-size: 0.8rem;
}
.breadcrumb a {
color: var(--text-secondary);
}
.breadcrumb .current {
color: var(--text-primary);
}
.style-guide-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-3);
}
.faction-score-card {
border-left: 4px solid var(--accent-primary);
}
.faction-score-name {
letter-spacing: 0.06em;
}
.staff-toolbar {
margin-top: var(--space-2);
}
.staff-stats {
margin-bottom: 1rem;
}
.staff-create-card {
margin-bottom: 1rem;
}
.staff-section-title {
margin-bottom: var(--space-3);
}
.staff-create-grid,
.staff-edit-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.75rem;
align-items: end;
}
.staff-create-grid > .btn {
min-height: 44px;
}
.staff-user-list {
display: grid;
gap: 0.85rem;
}
.staff-user-card > summary {
padding: 0.85rem 0.9rem;
}
.staff-user-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.staff-user-name {
font-size: 0.96rem;
font-weight: 700;
line-height: 1.25;
}
.staff-user-meta {
display: flex;
flex-wrap: wrap;
gap: 0.55rem 0.9rem;
font-size: 0.84rem;
color: var(--text-secondary);
margin-bottom: 0.85rem;
}
.staff-action-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
margin-top: 0.8rem;
}
.inline-form {
display: inline;
}
.staff-audit-target {
margin-bottom: 1rem;
}
.staff-audit-filters {
display: grid;
grid-template-columns: 1.2fr 1.6fr 120px auto;
gap: 0.55rem;
margin-bottom: 0.85rem;
}
.staff-audit-meta {
margin-top: 0.5rem;
}
.staff-audit-details {
display: grid;
gap: 0.45rem;
}
.staff-audit-details summary {
cursor: pointer;
color: var(--accent-primary);
}
.staff-audit-details code {
display: block;
font-size: 0.75rem;
line-height: 1.35;
white-space: pre-wrap;
word-break: break-word;
max-width: 520px;
color: var(--text-secondary);
}
body.gm-compact {
font-size: 14px;
}
body.gm-compact .card {
padding: 0.72rem;
}
body.gm-compact .stats-grid {
gap: 0.55rem;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
body.gm-compact .stat-card {
padding: 0.65rem;
}
body.gm-compact .stat-value {
font-size: 1.3rem;
}
body.gm-compact th,
body.gm-compact td {
padding: 0.5rem 0.55rem;
font-size: 0.84rem;
}
body.gm-compact .subtitle {
display: none;
}
body.gm-compact .dashboard-header {
padding: 0.66rem;
gap: 0.6rem;
}
body.gm-compact .gm-nav-group > summary {
padding: 0.46rem 0.5rem;
font-size: 0.76rem;
}
body.gm-compact .gm-nav-links a {
padding: 0.35rem 0.46rem;
font-size: 0.73rem;
}
body.gm-compact .gm-nav-link-main,
body.gm-compact .gm-nav-link-add {
padding: 0.3rem 0.42rem;
font-size: 0.73rem;
}
body.gm-compact .gm-nav-link-row {
grid-template-columns: minmax(0, 1fr) 28px;
}
body.gm-compact .gm-nav-status-item {
padding: 0.34rem;
}
body.gm-compact .gm-nav-status-item strong {
font-size: 0.8rem;
}
body.gm-compact .btn {
padding: 0.45rem 0.72rem;
min-height: 34px;
}
body.gm-compact .staff-user-card > summary {
padding: 0.7rem 0.8rem;
}
body.gm-compact .staff-user-name {
font-size: 0.92rem;
}
body.gm-compact .staff-user-meta {
margin-bottom: 0.55rem;
gap: 0.45rem 0.65rem;
font-size: 0.76rem;
}
body.gm-compact .staff-create-grid,
body.gm-compact .staff-edit-grid {
gap: 0.55rem;
}
body.gm-compact .staff-action-row {
margin-top: 0.55rem;
gap: 0.4rem;
}
body.gm-compact .staff-action-row .btn {
padding: 0.36rem 0.62rem;
}
body.gm-compact .table-wrapper {
border-radius: var(--radius-sm);
}
body.gm-compact th,
body.gm-compact td {
padding: 0.46rem 0.52rem;
}
.planner-resource-help {
margin-top: 0.35rem;
padding: 0.45rem 0.55rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-elevated), black 4%);
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
.planner-time-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-3);
}
.planner-resource-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-3);
}
.planner-quick-guide {
border-left: 3px solid color-mix(in srgb, var(--accent-primary), white 10%);
}
.planner-guide-list {
margin: 0;
padding-left: 1.15rem;
display: grid;
gap: 0.35rem;
color: var(--text-secondary);
}
.planner-color-row {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
gap: 0.55rem;
align-items: center;
}
.planner-color-picker {
width: 52px;
height: 42px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-elevated), black 4%);
cursor: pointer;
}
.planner-linking-card {
margin-top: 0.25rem;
}
.planner-linking-card > summary {
font-weight: 700;
color: var(--text-primary);
}
.help-page .help-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.8rem;
}
.help-page .help-card h3 {
margin-top: 0.3rem;
margin-bottom: 0.35rem;
}
.help-panel {
position: fixed;
inset: 0;
z-index: 3700;
display: none;
}
.help-panel.open {
display: block;
}
.help-panel-backdrop {
position: absolute;
inset: 0;
border: 0;
background: rgba(2, 6, 23, 0.55);
}
.help-panel-shell {
position: absolute;
right: 1rem;
top: 1rem;
width: min(560px, calc(100vw - 2rem));
max-height: calc(100vh - 2rem);
overflow: auto;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 0.8rem;
}
.help-panel-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.6rem;
}
.help-panel-toolbar h2 {
margin: 0;
font-size: 1.15rem;
}
.help-panel-search-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 0.45rem;
margin-bottom: 0.7rem;
}
.help-panel-content {
display: grid;
gap: 0.55rem;
}
.help-panel-list {
display: grid;
gap: 0.5rem;
}
.help-panel-item {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.6rem;
background: color-mix(in srgb, var(--bg-secondary), black 5%);
}
.help-panel-item h4 {
margin: 0.35rem 0;
}
.help-panel-item p {
margin: 0;
}
.driver-active {
overflow: hidden;
}
.driver-overlay {
z-index: 3795 !important;
}
.driver-stage {
z-index: 3798 !important;
border-radius: 16px !important;
box-shadow:
0 0 0 1px color-mix(in srgb, var(--accent-primary), white 18%),
0 20px 60px rgba(4, 10, 27, 0.58) !important;
}
.driver-popover {
z-index: 3800 !important;
max-width: min(380px, calc(100vw - 1rem)) !important;
padding: 0 !important;
background:
linear-gradient(180deg, rgba(16, 26, 48, 0.98), rgba(10, 17, 34, 0.98)) !important;
border: 1px solid color-mix(in srgb, var(--accent-primary), white 16%) !important;
border-radius: 18px !important;
box-shadow:
0 28px 70px rgba(3, 8, 24, 0.62),
inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
color: var(--text-primary) !important;
}
.driver-popover * {
font-family: inherit !important;
}
.driver-popover-title {
margin: 0 !important;
padding: 1rem 1rem 0.35rem !important;
color: var(--text-primary) !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
letter-spacing: 0.01em !important;
}
.driver-popover-description {
margin: 0 !important;
padding: 0 1rem 0.95rem !important;
color: var(--text-muted) !important;
line-height: 1.55 !important;
font-size: 0.95rem !important;
}
.driver-popover-progress-text {
color: color-mix(in srgb, var(--accent-primary), white 20%) !important;
font-size: 0.78rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
.driver-popover-footer {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0.75rem !important;
padding: 0.85rem 1rem 1rem !important;
border-top: 1px solid color-mix(in srgb, var(--border), white 6%) !important;
}
.driver-popover-navigation-btns {
display: flex !important;
align-items: center !important;
gap: 0.55rem !important;
}
.driver-popover-skip-btn,
.driver-popover-prev-btn,
.driver-popover-next-btn,
.driver-popover-close-btn {
appearance: none !important;
border-radius: 12px !important;
border: 1px solid var(--border) !important;
min-height: 2.5rem !important;
padding: 0.65rem 0.95rem !important;
font-size: 0.92rem !important;
font-weight: 600 !important;
line-height: 1 !important;
box-shadow: none !important;
transition:
transform 140ms ease,
border-color 140ms ease,
background 140ms ease,
color 140ms ease,
opacity 140ms ease !important;
}
.driver-popover-prev-btn,
.driver-popover-close-btn,
.driver-popover-skip-btn {
background: color-mix(in srgb, var(--bg-secondary), black 6%) !important;
color: var(--text-secondary) !important;
}
.driver-popover-next-btn {
border-color: color-mix(in srgb, var(--accent-primary), white 18%) !important;
background:
linear-gradient(180deg, color-mix(in srgb, var(--accent-primary), white 10%), var(--accent-primary)) !important;
color: #f8fcff !important;
}
.driver-popover-next-btn:hover,
.driver-popover-prev-btn:hover,
.driver-popover-close-btn:hover,
.driver-popover-skip-btn:hover {
transform: translateY(-1px) !important;
}
.driver-popover-next-btn:hover {
border-color: color-mix(in srgb, var(--accent-primary), white 28%) !important;
}
.driver-popover-prev-btn:hover,
.driver-popover-close-btn:hover,
.driver-popover-skip-btn:hover {
border-color: color-mix(in srgb, var(--accent-primary), white 10%) !important;
color: var(--text-primary) !important;
}
.driver-popover-close-btn {
padding-inline: 0.8rem !important;
}
.driver-popover-arrow {
color: rgba(13, 22, 41, 0.98) !important;
}
.driver-popover-footer button:focus-visible {
outline: 2px solid color-mix(in srgb, var(--accent-primary), white 30%) !important;
outline-offset: 2px !important;
}
.session-handoff-panel {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.7rem;
background: color-mix(in srgb, var(--bg-secondary), black 5%);
}
.session-handoff-qr-wrap {
display: flex;
justify-content: center;
margin-bottom: 0.55rem;
}
.session-handoff-qr-img {
width: min(280px, 100%);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: #fff;
padding: 0.45rem;
}
.session-handoff-panel.is-expired .session-handoff-qr-img {
opacity: 0.55;
filter: grayscale(1);
}
.template-library-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 0.75rem;
}
.webhook-catalog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.55rem;
}
.webhook-events-list {
display: grid;
gap: 0.35rem;
}
.webhook-subscription-card .status-badge.delivered,
.webhook-subscription-card .status-badge.success {
border-color: color-mix(in srgb, var(--success), white 14%);
color: var(--success);
}
.webhook-subscription-card .status-badge.failed,
.webhook-subscription-card .status-badge.danger {
border-color: color-mix(in srgb, var(--danger), white 14%);
color: var(--danger);
}
@media (max-width: 780px) {
.help-panel-shell {
right: 0.5rem;
top: 0.5rem;
width: calc(100vw - 1rem);
max-height: calc(100vh - 1rem);
}
.help-panel-search-row {
grid-template-columns: 1fr;
}
.driver-popover {
max-width: calc(100vw - 1rem) !important;
}
.driver-popover-footer {
flex-direction: column;
align-items: stretch !important;
}
.driver-popover-navigation-btns {
width: 100%;
justify-content: stretch;
}
.driver-popover-navigation-btns button,
.driver-popover-skip-btn {
width: 100%;
}
}
.map-shell-card {
padding: 1rem;
}
.event-map-layout {
display: grid;
gap: 0.8rem;
grid-template-columns: minmax(0, 1fr) 330px;
align-items: start;
}
.event-map-main {
min-width: 0;
}
.event-map-sidebar {
min-height: 65vh;
max-height: 80vh;
overflow: auto;
display: grid;
gap: 0.5rem;
align-content: start;
}
.event-map-sidebar-list {
display: grid;
gap: 0.55rem;
}
.event-map-sidebar-group {
display: grid;
gap: 0.35rem;
}
.event-map-sidebar-group h4 {
margin: 0;
font-size: 0.8rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-secondary);
}
.event-map-sidebar-item {
width: 100%;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-card), black 4%);
color: var(--text-primary);
padding: 0.45rem 0.52rem;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.5rem;
text-align: left;
cursor: pointer;
}
.event-map-sidebar-item.is-selected {
border-color: color-mix(in srgb, var(--accent-primary), transparent 28%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary), transparent 75%);
}
.event-map-sidebar-item.is-unplaced {
border-style: dashed;
}
.event-map-sidebar-item.is-place-target {
border-color: color-mix(in srgb, var(--warning), transparent 30%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning), transparent 70%);
}
.event-map-sidebar-main {
min-width: 0;
display: grid;
gap: 0.1rem;
}
.event-map-sidebar-main strong {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.event-map-sidebar-meta {
font-size: 0.76rem;
color: var(--text-secondary);
}
.event-map-sidebar-dot {
width: 0.75rem;
height: 0.75rem;
border-radius: 999px;
background: var(--marker-color, #8ca3d7);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--marker-color, #8ca3d7), transparent 72%);
}
.event-map-sidebar-dot-unplaced {
background: transparent;
border: 2px dashed var(--text-secondary);
box-shadow: none;
}
.map-create-card,
.map-quick-place-card {
margin-bottom: 0.75rem;
}
.map-create-form {
margin-top: 0.55rem;
display: grid;
gap: 0.45rem;
}
.map-quick-place-grid {
display: grid;
gap: 0.45rem;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
align-items: start;
}
.map-quick-place-grid .form-label {
margin: 0;
}
.map-quick-place-grid > * {
grid-column: auto;
}
.map-shell-toolbar {
display: grid;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.map-toolbar-primary {
display: flex;
align-items: center;
gap: 0.5rem;
overflow-x: auto;
padding-bottom: 0.15rem;
scrollbar-width: thin;
}
.map-toolbar-floor-tabs {
min-width: 0;
flex: 1 1 auto;
}
.map-toolbar-group {
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.map-toolbar-overflow {
display: grid;
gap: 0.45rem;
}
.map-toolbar-overflow > summary {
list-style: none;
width: fit-content;
}
.map-toolbar-overflow > summary::-webkit-details-marker {
display: none;
}
.map-toolbar-overflow-panel {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
padding: 0.75rem;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-card), black 4%);
}
.map-view-switch {
margin-left: auto;
flex: 0 0 auto;
}
.map-view-switch .btn {
min-width: 98px;
}
.floor-tabs {
display: flex;
align-items: center;
gap: 0.35rem;
overflow-x: auto;
padding-bottom: 0.2rem;
scrollbar-width: thin;
}
.floor-tab {
border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-card), black 4%);
color: var(--text-secondary);
border-radius: 999px;
min-height: 44px;
padding: 0.35rem 0.7rem;
display: inline-flex;
align-items: center;
gap: 0.36rem;
white-space: nowrap;
font-weight: 600;
}
.floor-tab.is-active {
color: #fff;
border-color: color-mix(in srgb, var(--accent-primary), transparent 25%);
background: color-mix(in srgb, var(--accent-primary), black 14%);
}
.floor-tab__index {
font-size: 0.88rem;
font-weight: 800;
}
.floor-tab__label {
font-size: 0.78rem;
}
.floor-tab__badge {
min-width: 18px;
height: 18px;
padding: 0 0.28rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.68rem;
font-weight: 800;
background: color-mix(in srgb, var(--accent-primary), transparent 58%);
color: var(--text-primary);
}
.floor-tab.is-active .floor-tab__badge {
background: rgba(255, 255, 255, 0.25);
color: #fff;
}
.map-floor-select {
max-width: 220px;
min-width: 140px;
}
.event-map-surface {
width: 100%;
min-height: 65vh;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
overflow: hidden;
background: rgba(10, 12, 26, 0.65);
}
.event-map-surface-wrap {
position: relative;
}
.event-map-surface.is-offline {
background:
linear-gradient(45deg, rgba(52, 66, 99, 0.25) 25%, transparent 25%),
linear-gradient(-45deg, rgba(52, 66, 99, 0.25) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(52, 66, 99, 0.25) 75%),
linear-gradient(-45deg, transparent 75%, rgba(52, 66, 99, 0.25) 75%),
color-mix(in srgb, var(--bg-card), black 8%);
background-size: 36px 36px;
background-position: 0 0, 0 18px, 18px -18px, -18px 0;
}
.event-map-indoor {
position: relative;
min-height: 65vh;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
overflow: auto;
background: rgba(12, 16, 28, 0.72);
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.event-map-indoor-stage {
position: relative;
width: 100%;
min-width: 100%;
}
.event-map-floor-image {
width: 100%;
height: auto;
display: block;
user-select: none;
-webkit-user-drag: none;
}
.map-indoor-zoom-readout {
font-size: 0.78rem;
font-weight: 700;
color: var(--text-secondary);
min-width: 3.4rem;
text-align: center;
}
.event-map-pin {
position: absolute;
transform: translate(-50%, -100%);
background: rgba(26, 39, 74, 0.92);
border: 1px solid rgba(106, 145, 219, 0.55);
border-radius: 999px;
color: var(--text-primary);
padding: 0.2rem 0.45rem;
font-size: 0.72rem;
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.event-map-pin--context {
background: rgba(46, 58, 91, 0.78);
border-color: rgba(133, 149, 194, 0.5);
color: color-mix(in srgb, var(--text-secondary), white 16%);
pointer-events: none;
}
.event-map-pin--selected {
border-color: color-mix(in srgb, var(--accent-primary), transparent 12%);
box-shadow: 0 6px 22px rgba(8, 14, 28, 0.45);
}
.event-map-pin[data-pin-draggable="true"] {
cursor: grab;
}
.event-map-pin[data-pin-dragging="true"] {
cursor: grabbing;
z-index: 5;
}
.event-map-pin .map-pin-label {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.event-map-dot-wrap {
background: transparent;
border: 0;
}
.event-map-dot {
width: 16px;
height: 16px;
border-radius: 999px;
display: inline-block;
border: 2px solid #fff;
background: var(--marker-color, #8ca3d7);
box-shadow: 0 4px 10px rgba(9, 14, 30, 0.35);
}
.event-map-dot.is-selected {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--marker-color, #8ca3d7), transparent 65%), 0 4px 10px rgba(9, 14, 30, 0.35);
}
.map-fab-findme {
position: absolute;
right: 16px;
bottom: 82px;
width: 48px;
height: 48px;
border-radius: 999px;
border: 2px solid color-mix(in srgb, var(--accent-primary), transparent 68%);
background: color-mix(in srgb, var(--bg-card), black 2%);
color: var(--text-primary);
box-shadow: var(--shadow-md);
display: grid;
place-items: center;
z-index: 700;
cursor: pointer;
transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
touch-action: manipulation;
}
.map-fab-findme:active {
transform: scale(0.92);
}
.map-fab-findme.tracking {
background: var(--accent-primary);
color: #fff;
}
.map-fab-findme.error {
opacity: 0.5;
}
.map-legend {
position: absolute;
bottom: 18px;
left: 10px;
z-index: 700;
min-width: 188px;
max-width: min(280px, calc(100% - 24px));
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-card), black 6%);
box-shadow: var(--shadow-md);
backdrop-filter: blur(12px);
}
.map-legend-toggle {
width: 100%;
border: 0;
background: transparent;
color: var(--text-primary);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 0.6rem;
font-weight: 700;
cursor: pointer;
}
.map-legend[data-collapsed="true"] .map-legend-body {
display: none;
}
.map-legend-item {
width: 100%;
border: 0;
background: transparent;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.34rem 0.58rem;
cursor: pointer;
text-align: left;
}
.map-legend-item.active {
color: var(--text-primary);
}
.map-legend-item:not(.active) {
opacity: 0.45;
}
.map-legend-item.compact {
width: auto;
border: 1px solid var(--border);
border-radius: 999px;
font-size: 0.74rem;
padding: 0.2rem 0.45rem;
}
.map-legend-swatch {
width: 12px;
height: 12px;
border-radius: 999px;
flex-shrink: 0;
}
.map-legend-count {
margin-left: auto;
font-size: 0.75rem;
}
.map-legend-status-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.3rem;
padding: 0.35rem 0.55rem 0.55rem;
border-top: 1px solid var(--border);
}
.map-offline-banner {
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
z-index: 690;
border: 1px solid rgba(251, 191, 36, 0.34);
background: rgba(251, 191, 36, 0.16);
color: #fcd34d;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
padding: 0.24rem 0.66rem;
}
.map-poi-card {
margin-top: 0.7rem;
display: grid;
gap: 0.45rem;
}
.map-picker {
display: grid;
gap: 0.7rem;
}
.map-picker__mode {
display: grid;
gap: 0.45rem;
align-items: center;
}
.map-picker__mode .action-bar {
gap: 0.4rem;
}
.map-picker__mode .btn {
min-width: 120px;
}
.map-picker__surface {
position: relative;
z-index: 0;
isolation: isolate;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
background: color-mix(in srgb, var(--bg-card), black 8%);
}
.map-picker__leaflet {
min-height: 280px;
touch-action: none;
}
.map-picker__leaflet .leaflet-container {
touch-action: none;
}
.map-picker__indoor {
display: grid;
gap: 0.45rem;
padding: 0.5rem;
}
.map-picker__indoor-canvas {
position: relative;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
background: rgba(9, 12, 24, 0.7);
}
.map-picker__overlay {
position: absolute;
inset: 0;
}
.map-picker__status {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.35rem;
}
.map-picker__status code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
font-size: 0.72rem;
color: var(--text-secondary);
}
.map-picker__actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.map-picker__preset-actions {
display: inline-flex;
align-items: center;
gap: 0.35rem;
flex-wrap: wrap;
margin-right: 0.3rem;
}
.map-touch-guard {
position: absolute;
inset: 0;
z-index: 4;
display: grid;
place-items: center;
padding: 1rem;
border: 0;
background: color-mix(in srgb, rgba(7, 12, 22, 0.88), var(--bg-card) 22%);
color: var(--text-primary);
font: inherit;
text-align: center;
cursor: pointer;
transition: opacity var(--transition), visibility var(--transition);
}
.map-touch-guard__body {
display: grid;
gap: 0.25rem;
justify-items: center;
}
.map-touch-guard__title {
font-weight: 700;
}
.map-touch-guard__hint {
font-size: 0.8rem;
color: var(--text-secondary);
}
.map-picker--interactive .map-touch-guard {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.map-picker-empty {
min-height: 220px;
display: grid;
place-items: center;
padding: 1rem;
font-size: 0.86rem;
color: var(--text-secondary);
}
.player-map-marker-wrap {
background: transparent;
border: 0;
}
.player-map-marker {
width: 32px;
height: 32px;
border-radius: 999px;
border: 2px solid #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.74rem;
font-weight: 800;
color: #fff;
background: var(--marker-color, #9ca3af);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
}
.player-map-marker.is-completed {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2), 0 4px 10px rgba(0, 0, 0, 0.28);
}
.player-map-marker.is-locked {
opacity: 0.5;
filter: grayscale(0.3);
}
.user-position-dot-wrap {
background: transparent;
border: 0;
}
.user-position-dot {
width: 16px;
height: 16px;
border-radius: 999px;
border: 2px solid #fff;
background: #3b82f6;
display: block;
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.46);
animation: map-user-pulse 2s ease-out infinite;
}
@keyframes map-user-pulse {
0% {
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.46);
}
70% {
box-shadow: 0 0 0 14px rgba(59, 130, 246, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
}
}
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
background: color-mix(in srgb, var(--accent-primary), transparent 55%);
}
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
background: color-mix(in srgb, var(--accent-primary), black 10%);
color: #fff;
font-weight: 700;
}
@media (max-width: 900px) {
.event-map-layout {
grid-template-columns: 1fr;
}
.event-map-sidebar {
min-height: 0;
max-height: none;
}
.map-view-switch {
margin-left: 0;
}
.map-view-switch .btn {
flex: 1 1 auto;
min-width: 0;
}
.event-map-surface,
.event-map-indoor {
min-height: 54vh;
}
.map-fab-findme {
bottom: 94px;
}
.map-legend {
bottom: 12px;
left: 8px;
}
.floor-tab__label {
display: none;
}
.floor-tab {
padding: 0.35rem 0.56rem;
min-width: 44px;
justify-content: center;
}
.map-picker__leaflet {
min-height: 240px;
}
}
@media (max-width: 760px) {
.event-map-war-room-pane[data-map-war-room-pane="map"] .map-shell-toolbar {
position: absolute;
top: 8px;
left: 8px;
right: 8px;
z-index: 800;
background: rgba(10, 18, 52, 0.85);
backdrop-filter: blur(8px);
border-radius: 12px;
padding: 0.45rem;
margin-bottom: 0;
}
.event-map-war-room-pane[data-map-war-room-pane="map"] .map-toolbar-primary {
align-items: flex-start;
}
.event-map-war-room-pane[data-map-war-room-pane="map"] .map-toolbar-floor-tabs {
flex: 1 1 100%;
}
.event-map-war-room-pane[data-map-war-room-pane="map"] .map-quick-place-card,
.event-map-war-room-pane[data-map-war-room-pane="map"] .map-create-card {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 850;
border-radius: 20px 20px 0 0;
padding: 1rem 1rem calc(1rem + var(--sab));
margin: 0;
background: rgba(10, 18, 52, 0.96);
border-top: 1px solid rgba(91, 162, 255, 0.25);
}
.event-map-war-room-pane[data-map-war-room-pane="map"] .map-create-card .action-bar,
.event-map-war-room-pane[data-map-war-room-pane="map"] .map-quick-place-card .action-bar {
flex-wrap: wrap;
}
.event-map-war-room-pane[data-map-war-room-pane="map"] .map-quick-place-grid {
grid-template-columns: 1fr;
}
.event-map-war-room-pane[data-map-war-room-pane="map"] .map-quick-place-grid > * {
grid-column: auto !important;
}
}
.map-settings-layout {
display: grid;
gap: 1rem;
}
.map-settings-preview {
margin-bottom: 0;
}
.map-settings-canvas {
min-height: 420px;
border-radius: 14px;
border: 1px solid var(--border-soft);
overflow: hidden;
margin-top: 0.65rem;
}
.map-settings-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 0.9rem;
}
.map-search-results {
display: grid;
gap: 0.35rem;
margin-top: 0.45rem;
max-height: 180px;
overflow-y: auto;
padding-right: 0.25rem;
}
.map-search-result {
width: 100%;
text-align: left;
background: rgba(35, 42, 70, 0.72);
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 0.45rem 0.6rem;
color: var(--text-primary);
font-size: 0.9rem;
}
.map-search-result:hover,
.map-search-result:focus-visible {
border-color: var(--accent-primary);
outline: none;
}
.map-settings-floor-item {
border: 1px solid var(--border-soft);
border-radius: 12px;
padding: 0.6rem;
background: rgba(22, 27, 48, 0.68);
}
.map-settings-floor-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.55rem;
margin-bottom: 0.45rem;
}
.map-settings-floor-actions {
display: flex;
gap: 0.35rem;
}
body[data-app-surface="map-settings"] .map-settings-layout :is(.btn, .map-search-result, .map-settings-floor-item, .card, .action-card) {
touch-action: manipulation;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
body[data-app-surface="map-settings"] .map-settings-layout :is(.btn, .map-search-result, .map-settings-floor-item, .card, .action-card):active {
transform: none !important;
}
body[data-app-surface="map-settings"] .map-settings-floor-actions .btn {
min-width: 44px;
min-height: 44px;
}
.map-settings-floor-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.45rem;
}
.map-settings-floor-stats {
font-size: 0.76rem;
color: var(--text-muted);
}
.map-settings-type-toggle {
gap: 0.85rem;
}
@media (max-width: 900px) {
.map-settings-canvas {
min-height: 320px;
}
}
.qr-phase-strip {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.qr-create-page {
display: grid;
gap: 1rem;
}
.qr-create-header {
align-items: flex-start;
}
.qr-create-header__badge {
display: inline-flex;
margin-bottom: 0.65rem;
}
.qr-create-mobile-context,
.qr-create-mobile-dock {
display: none;
}
.qr-page-purpose {
display: grid;
gap: 0.9rem;
border: 1px solid rgba(120, 157, 231, 0.34);
background:
radial-gradient(circle at top right, rgba(103, 164, 255, 0.22), transparent 34%),
linear-gradient(135deg, rgba(16, 28, 61, 0.9), rgba(10, 16, 37, 0.96));
}
.qr-page-purpose__copy {
display: grid;
gap: 0.45rem;
}
.qr-page-purpose__copy .staff-section-title,
.qr-page-purpose__copy .subtitle {
margin: 0;
}
.qr-page-purpose__steps {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.qr-create-minimal {
max-width: 1240px;
margin: 0 auto;
}
.qr-create-layout {
display: grid;
gap: 1rem;
align-items: start;
}
.qr-create-main,
.qr-create-support {
display: grid;
gap: 1rem;
min-width: 0;
}
.qr-starter-strip {
display: grid;
gap: 0.9rem;
}
.qr-starter-strip__head {
gap: 0.75rem;
}
.qr-starter-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.75rem;
}
.qr-starter-card {
border: 1px solid rgba(112, 138, 201, 0.4);
background: rgba(23, 36, 74, 0.72);
color: var(--text-color);
border-radius: 14px;
padding: 0.85rem;
text-align: left;
display: grid;
gap: 0.35rem;
justify-items: start;
}
.qr-starter-card:hover {
border-color: rgba(147, 178, 248, 0.85);
transform: translateY(-1px);
}
.qr-starter-card.active {
border-color: #68b3ff;
box-shadow: 0 0 0 2px rgba(104, 179, 255, 0.24);
}
.qr-starter-card--manual {
border-style: dashed;
}
.qr-starter-card__eyebrow {
color: rgba(214, 223, 244, 0.74);
font-size: 0.78rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.qr-starter-card strong,
.qr-starter-card small {
line-height: 1.35;
}
.qr-starter-card small {
color: rgba(219, 225, 245, 0.76);
}
.qr-create-block {
padding: 1rem;
border: 1px solid var(--border-color);
border-radius: 14px;
background: linear-gradient(135deg, rgba(12, 24, 56, 0.58), rgba(13, 18, 40, 0.9));
margin-bottom: 1rem;
}
.qr-create-main > .qr-create-block,
.qr-create-support > .qr-create-block,
.qr-create-support > .collapsible-card {
margin-bottom: 0;
}
.qr-create-block--primary {
border-color: rgba(109, 176, 255, 0.32);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.qr-create-support-card,
.qr-create-support-tools {
border-color: rgba(123, 141, 188, 0.32);
background: linear-gradient(135deg, rgba(15, 23, 45, 0.82), rgba(12, 16, 31, 0.94));
}
.qr-create-support-disclosures {
display: grid;
gap: 1rem;
}
.qr-create-disclosure > summary {
display: grid;
gap: 0.55rem;
}
.qr-create-disclosure__label {
display: grid;
gap: 0.22rem;
}
.qr-create-disclosure__label strong,
.qr-create-disclosure__label small {
line-height: 1.35;
}
.qr-create-disclosure__label small {
color: rgba(213, 220, 240, 0.76);
font-weight: 500;
}
.qr-create-disclosure__summary {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.qr-create-preview {
border-color: rgba(123, 141, 188, 0.32);
background: linear-gradient(135deg, rgba(15, 23, 45, 0.82), rgba(12, 16, 31, 0.94));
}
.qr-create-preview > summary {
display: none;
}
.qr-create-preview__body {
display: grid;
gap: 0.85rem;
}
.qr-create-submit-head {
gap: 0.75rem;
margin-bottom: 0.85rem;
}
.qr-create-support-tools .collapsible-body {
display: grid;
gap: 0.85rem;
}
.qr-create-support-tools__actions {
align-items: stretch;
}
.qr-create-support-tools__advanced {
display: grid;
gap: 0.75rem;
}
.qr-create-support-tools__group {
display: grid;
gap: 0.7rem;
}
.qr-create-support-tools__advanced .staff-section-title,
.qr-create-support-tools__note,
.qr-create-support-tools__legend {
margin: 0;
}
.qr-create-support-tools__roles {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1rem;
}
.qr-create-mobile-summary-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.6rem;
}
.qr-create-mobile-summary-item {
display: grid;
gap: 0.15rem;
min-width: 0;
}
.qr-create-mobile-summary-item .subtitle,
.qr-create-mobile-summary-item strong {
margin: 0;
}
.qr-create-mobile-summary-item strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.qr-type-chip-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.6rem;
}
.qr-type-chip {
border: 1px solid rgba(112, 138, 201, 0.4);
background: rgba(23, 36, 74, 0.7);
color: var(--text-color);
border-radius: 12px;
padding: 0.75rem;
text-align: left;
display: flex;
flex-direction: column;
gap: 0.2rem;
min-height: 86px;
}
.qr-type-chip:hover {
border-color: rgba(147, 178, 248, 0.85);
transform: translateY(-1px);
}
.qr-type-chip.active {
border-color: #68b3ff;
box-shadow: 0 0 0 2px rgba(104, 179, 255, 0.24);
}
.qr-type-chip strong {
font-size: 0.95rem;
line-height: 1.2;
}
.qr-type-chip small {
color: rgba(219, 225, 245, 0.72);
line-height: 1.35;
}
.qr-type-chip--system {
border-style: dashed;
border-color: rgba(135, 154, 214, 0.5);
background: rgba(18, 28, 56, 0.64);
}
.qr-type-recent {
margin-top: 0.75rem;
}
.qr-type-panel.hidden {
display: none;
}
.qr-create-actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
justify-content: flex-end;
margin-top: 0.85rem;
}
.location-autocomplete {
position: relative;
}
.autocomplete-list {
display: none;
position: absolute;
z-index: 40;
left: 0;
right: 0;
margin: 0.3rem 0 0;
list-style: none;
border: 1px solid rgba(118, 145, 209, 0.4);
border-radius: 12px;
background: rgba(11, 18, 38, 0.98);
box-shadow: 0 12px 30px rgba(4, 8, 18, 0.45);
padding: 0;
max-height: min(360px, 45vh);
overflow-y: auto;
}
.autocomplete-list.open {
display: block;
}
.autocomplete-item {
padding: 0.7rem 0.8rem;
cursor: pointer;
border-bottom: 1px solid rgba(126, 150, 207, 0.16);
}
.autocomplete-item:last-child {
border-bottom: 0;
}
.autocomplete-item:hover {
background: rgba(39, 67, 128, 0.45);
}
.autocomplete-item__name {
font-weight: 600;
font-size: 0.95rem;
}
.autocomplete-item__meta {
margin-top: 0.15rem;
color: rgba(205, 214, 238, 0.78);
font-size: 0.82rem;
}
.autocomplete-item--create {
background: rgba(56, 102, 183, 0.35);
}
.autocomplete-hint {
padding: 0.65rem 0.8rem;
color: rgba(205, 214, 238, 0.7);
}
.qr-working-context {
display: grid;
gap: 0.9rem;
position: sticky;
top: 0.75rem;
z-index: 18;
border: 1px solid rgba(112, 170, 255, 0.34);
background:
radial-gradient(circle at top right, rgba(104, 179, 255, 0.2), transparent 32%),
linear-gradient(135deg, rgba(11, 20, 44, 0.94), rgba(8, 14, 33, 0.98));
box-shadow: 0 14px 32px rgba(3, 8, 20, 0.28);
}
.qr-working-context__head {
gap: 0.85rem;
align-items: start;
}
.qr-working-context__copy {
display: grid;
gap: 0.4rem;
}
.qr-working-context__copy .staff-section-title,
.qr-working-context__copy .subtitle,
.qr-working-context__metric .subtitle,
.qr-working-context__metric strong,
.qr-working-context__focus .subtitle {
margin: 0;
}
.qr-working-context__badges {
align-items: flex-start;
justify-content: flex-end;
}
.qr-working-context__metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
}
.qr-working-context__metric {
display: grid;
gap: 0.18rem;
padding: 0.8rem 0.9rem;
border: 1px solid rgba(128, 150, 204, 0.26);
border-radius: 14px;
background: rgba(15, 25, 53, 0.68);
}
.qr-working-context__metric strong {
line-height: 1.35;
}
.qr-working-context__focus {
display: grid;
gap: 0.45rem;
padding: 0.85rem 0.95rem;
border-radius: 16px;
border: 1px solid rgba(125, 150, 202, 0.24);
background: rgba(14, 22, 43, 0.82);
}
.qr-working-context__focus.info {
border-color: rgba(92, 155, 255, 0.26);
background: rgba(10, 20, 44, 0.86);
}
.qr-working-context__focus.warning {
border-color: rgba(237, 183, 74, 0.3);
background: rgba(46, 33, 11, 0.78);
}
.qr-working-context__focus.success {
border-color: rgba(78, 194, 140, 0.28);
background: rgba(10, 35, 24, 0.76);
}
.qr-working-context__focus.danger {
border-color: rgba(214, 98, 98, 0.3);
background: rgba(49, 18, 20, 0.8);
}
.qr-working-context__actions {
align-items: stretch;
}
.qr-working-context__actions .btn {
min-height: 42px;
}
[id^="qr-detail-"] {
scroll-margin-top: 8.5rem;
}
.qr-detail-head {
position: static;
}
@media (min-width: 1080px) {
.qr-create-layout {
grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.95fr);
}
}
@media (max-width: 760px) {
.qr-create-minimal {
padding-bottom: calc(8.4rem + var(--sab));
}
.qr-type-chip-grid {
grid-template-columns: 1fr;
}
.qr-starter-grid {
grid-template-columns: 1fr;
}
.qr-create-mobile-context {
display: grid;
gap: 0.8rem;
position: sticky;
top: 0.75rem;
z-index: 18;
border-color: rgba(109, 176, 255, 0.36);
box-shadow: 0 12px 28px rgba(4, 8, 18, 0.22);
}
.qr-create-mobile-context__head {
gap: 0.75rem;
}
.qr-create-mobile-dock {
display: grid;
gap: 0.75rem;
position: sticky;
bottom: calc(0.75rem + var(--sab));
z-index: 24;
margin-top: 1rem;
padding: 0.85rem;
border: 1px solid rgba(109, 176, 255, 0.34);
border-radius: 18px;
background:
linear-gradient(180deg, rgba(7, 14, 32, 0.96), rgba(9, 18, 41, 0.99)),
radial-gradient(circle at top right, rgba(104, 179, 255, 0.24), transparent 34%);
box-shadow: 0 18px 40px rgba(3, 8, 20, 0.38);
}
.qr-create-mobile-dock__summary {
display: grid;
gap: 0.75rem;
}
.qr-create-mobile-dock__actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.55rem;
}
.qr-create-mobile-dock__actions .btn {
width: 100%;
}
.qr-create-preview > summary {
display: block;
}
.qr-create-preview .collapsible-body,
.qr-create-support-tools .collapsible-body {
padding: 0.85rem;
}
.qr-create-actions {
justify-content: stretch;
}
.qr-create-actions .btn {
flex: 1 1 100%;
}
.qr-working-context {
top: 0.5rem;
padding: 0.9rem;
}
.qr-working-context__metrics {
grid-template-columns: 1fr;
}
.qr-working-context__badges {
justify-content: flex-start;
}
.qr-working-context__actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.55rem;
}
.qr-working-context__actions .btn:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.qr-page-purpose__steps {
flex-direction: column;
}
.qr-create-header__badge {
width: 100%;
}
.qr-create-submit-head {
align-items: flex-start;
}
.qr-create-disclosure__summary {
flex-direction: column;
align-items: flex-start;
}
}
.required-indicator {
color: var(--danger);
font-weight: 700;
}
.ops-toast-root {
position: fixed;
right: 1rem;
top: 1rem;
z-index: 4000;
display: grid;
gap: 0.5rem;
max-width: min(420px, calc(100vw - 1.5rem));
}
.ops-toast {
min-width: 220px;
max-width: 420px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-left: 4px solid var(--info);
color: var(--text-primary);
border-radius: var(--radius-sm);
padding: 0.6rem 0.7rem;
box-shadow: var(--shadow-md);
transition: opacity 0.18s ease, transform 0.18s ease;
display: flex;
align-items: flex-start;
gap: 0.55rem;
}
.ops-toast.success { border-left-color: var(--success); }
.ops-toast.error { border-left-color: var(--danger); }
.ops-toast.warning { border-left-color: var(--warning); }
.ops-toast.fade { opacity: 0; transform: translateY(4px); }
.ops-toast-message {
flex: 1;
min-width: 0;
line-height: 1.35;
}
.ops-toast-close {
border: 0;
background: transparent;
color: var(--text-muted);
font-size: 1.1rem;
line-height: 1;
padding: 0.1rem 0.2rem;
cursor: pointer;
}
.ops-toast-close:hover {
color: var(--text-primary);
}
@media (max-width: 640px) {
.ops-toast-root {
left: 0.75rem;
right: 0.75rem;
top: 0.75rem;
max-width: none;
}
.ops-toast {
min-width: 0;
max-width: none;
}
}
.ops-shortcuts {
position: fixed;
inset: 0;
z-index: 3600;
display: none;
}
.ops-shortcuts.open { display: block; }
.ops-shortcuts-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
}
.ops-shortcuts-modal {
position: relative;
max-width: 480px;
margin: 12vh auto 0;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 1rem;
}
.ops-shortcuts-modal ul {
margin: 0.7rem 0 1rem 1rem;
}
.volunteer-page {
max-width: 920px;
}
.volunteer-shift-shell .volunteer-shift-actions .btn {
flex: 0 1 auto;
}
.volunteer-tab-nav {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0.85rem;
}
.volunteer-tab-link {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-card), black 8%);
color: var(--text-secondary);
font-weight: 700;
font-size: 0.84rem;
min-height: 40px;
padding: 0.5rem 0.8rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.volunteer-tab-link:hover,
.volunteer-tab-link.active {
color: var(--text-primary);
border-color: color-mix(in srgb, var(--accent-primary), white 10%);
background: color-mix(in srgb, var(--bg-elevated), black 5%);
}
.volunteer-tab-panel[hidden] {
display: none !important;
}
.volunteer-shift-head {
align-items: center;
}
.volunteer-shift-actions {
gap: 0.55rem;
}
.volunteer-shift-warning {
margin-bottom: 0.85rem;
}
.volunteer-tools-steps {
margin-top: 0.5rem;
}
[data-pin-input] {
text-align: center;
font-size: 1.35rem;
letter-spacing: 0.28em;
}
.volunteer-help-list {
margin-left: 1.1rem;
color: var(--text-secondary);
display: grid;
gap: 0.3rem;
}
.volunteer-shift-clock {
font-size: 1.25rem;
min-width: 132px;
}
.volunteer-checklist {
margin-top: 0.8rem;
display: grid;
gap: 0.4rem;
}
.volunteer-duplicate-warning {
display: none;
color: var(--warning);
}
.volunteer-participant-suggestions {
margin-top: 0.45rem;
display: none;
gap: 0.4rem;
}
.volunteer-suggestion-item {
width: 100%;
text-align: left;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-secondary), black 6%);
border-radius: var(--radius-sm);
color: var(--text-primary);
padding: 0.5rem 0.6rem;
display: grid;
gap: 0.1rem;
}
.volunteer-suggestion-item span {
font-size: 0.78rem;
color: var(--text-muted);
}
.volunteer-suggestion-item:hover {
border-color: color-mix(in srgb, var(--accent-primary), white 8%);
background: color-mix(in srgb, var(--bg-elevated), black 2%);
}
.volunteer-grow-input {
flex: 1;
min-width: 180px;
}
.volunteer-result {
margin-top: 0.75rem;
}
.volunteer-queue {
margin-top: 0.8rem;
}
.volunteer-queue strong {
font-size: 0.9rem;
}
.volunteer-queue ul {
margin-top: 0.45rem;
padding-left: 1rem;
}
.volunteer-feed-actions {
gap: 0.5rem;
}
.volunteer-feed-filter {
min-width: 180px;
}
.volunteer-incident-grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 0.75rem;
}
.volunteer-recent-section {
margin-top: 0.8rem;
}
.volunteer-recent-section h4 {
margin-bottom: 0.45rem;
}
.volunteer-notes-meta {
margin-top: 0.55rem;
}
.volunteer-scan-modal {
position: fixed;
inset: 0;
z-index: 3800;
display: grid;
place-items: center;
}
.volunteer-scan-backdrop {
position: absolute;
inset: 0;
background: rgba(2, 4, 10, 0.74);
}
.volunteer-scan-panel {
position: relative;
width: min(96vw, 560px);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card), black 6%);
padding: 0.85rem;
box-shadow: var(--shadow-lg);
display: grid;
gap: 0.6rem;
}
.volunteer-scan-reader {
min-height: min(62vh, 360px);
border-radius: var(--radius-md);
overflow: hidden;
background: #05070d;
}
.volunteer-scan-reader > div {
border: 0 !important;
}
.volunteer-scan-reader video,
.volunteer-scan-reader canvas {
width: 100% !important;
height: auto !important;
object-fit: cover;
}
.moment-page .moment-shell {
max-width: 760px;
margin: 0 auto;
}
.moment-page.moment-intense {
background: radial-gradient(circle at top, color-mix(in srgb, #ff6f61 22%, transparent), transparent 60%);
}
.moment-page.moment-joyful {
background: radial-gradient(circle at top, color-mix(in srgb, #f7b543 20%, transparent), transparent 60%);
.ops-command-shell {
position: fixed;
inset: 0;
z-index: 3800;
display: none;
}
.ops-command-shell.open { display: block; }
.ops-command-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
}
.ops-command-modal {
position: relative;
max-width: 760px;
margin: 8vh auto 0;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 1rem;
}
.ops-command-input-wrap {
flex: 1;
min-width: 0;
}
.ops-command-head .form-input {
min-height: 50px;
font-size: 1rem;
}
.ops-command-head {
display: flex;
gap: 0.5rem;
align-items: center;
}
.ops-command-help {
font-size: 0.78rem;
color: var(--text-muted);
margin: 0.5rem 0;
}
.ops-command-results-head {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: center;
margin: 0.6rem 0 0.45rem;
}
.ops-command-results-meta {
font-size: 0.72rem;
color: var(--text-muted);
}
.ops-command-results {
max-height: 55vh;
overflow: auto;
display: grid;
gap: 0.8rem;
padding-right: 0.1rem;
}
.ops-command-section {
display: grid;
gap: 0.3rem;
}
.ops-command-section-title {
font-size: 0.72rem;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0 0.2rem;
}
.ops-command-row {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-secondary);
color: var(--text-primary);
padding: 0.65rem 0.78rem;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
text-align: left;
gap: 0.2rem 0.65rem;
cursor: pointer;
align-items: center;
}
.ops-command-row.active {
border-color: var(--accent-primary);
box-shadow: 0 0 0 2px var(--accent-glow);
}
.ops-command-row-icon {
width: 1.85rem;
height: 1.85rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--bg-elevated), white 2%);
font-size: 0.9rem;
}
.ops-command-copy {
min-width: 0;
display: grid;
gap: 0.18rem;
}
.ops-command-title {
font-weight: 650;
min-width: 0;
}
.ops-command-sub {
font-size: 0.78rem;
color: var(--text-muted);
min-width: 0;
}
.ops-command-row-meta {
display: grid;
justify-items: end;
gap: 0.2rem;
}
.ops-command-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
border-radius: 999px;
padding: 0.18rem 0.48rem;
font-size: 0.68rem;
font-weight: 700;
color: var(--text-secondary);
background: color-mix(in srgb, var(--bg-elevated), black 2%);
border: 1px solid color-mix(in srgb, var(--border), transparent 6%);
}
.ops-command-keyhint {
font-size: 0.68rem;
color: var(--text-muted);
}
.ops-command-empty {
text-align: center;
color: var(--text-muted);
padding: 1rem;
}
.ops-command-loading {
text-align: center;
color: var(--text-muted);
padding: 1.25rem 0.5rem;
}
.ops-command-preview-sheet .wm-sheet-panel {
max-width: min(1120px, calc(100vw - 2rem));
}
.ops-command-preview-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.ops-command-preview-actions {
display: flex;
gap: 0.5rem;
align-items: center;
}
.ops-command-preview-body {
padding: 0;
overflow: hidden;
}
.ops-command-preview-frame {
display: block;
width: 100%;
min-height: min(72vh, 860px);
border: 0;
background: #0b1020;
}
@media (max-width: 768px) {
.ops-command-modal {
max-width: none;
margin: 0;
min-height: 100dvh;
border-radius: 0;
padding: 0.85rem;
}
.ops-command-head {
align-items: stretch;
flex-direction: column;
}
.ops-command-row {
grid-template-columns: auto minmax(0, 1fr);
}
.ops-command-row-meta {
grid-column: 2;
justify-items: start;
grid-auto-flow: column;
align-items: center;
}
.ops-command-preview-sheet .wm-sheet-panel {
max-width: none;
}
}
.live-dashboard-page {
display: grid;
gap: var(--space-5);
}
.live-dashboard-head {
display: grid;
gap: var(--space-4);
}
.live-dashboard-head__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
}
.live-dashboard-head__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
}
.live-connection-status {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.35rem 0.7rem;
border-radius: 999px;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-card), black 6%);
color: var(--text-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
}
.live-connection-status::before {
content: "";
width: 0.6rem;
height: 0.6rem;
border-radius: 999px;
background: var(--warning);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning), transparent 82%);
}
.live-connection-status--connected::before {
background: var(--success);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--success), transparent 82%);
}
.live-connection-status--stale::before {
background: var(--danger);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger), transparent 82%);
}
.live-connection-warning {
display: none;
padding: 0.8rem 1rem;
border-radius: var(--radius-sm);
border: 1px solid color-mix(in srgb, var(--danger), transparent 62%);
background: color-mix(in srgb, var(--danger), transparent 90%);
color: color-mix(in srgb, var(--danger), white 16%);
font-weight: var(--font-weight-semibold);
}
.live-connection-warning.is-visible {
display: block;
}
.emergency-banner {
display: grid;
gap: 0.8rem;
padding: 1rem 1.1rem;
border: 1px solid color-mix(in srgb, var(--danger), transparent 45%);
border-radius: var(--radius-md);
background:
linear-gradient(135deg, color-mix(in srgb, var(--danger), transparent 85%), transparent),
color-mix(in srgb, var(--bg-card), black 8%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger), transparent 82%);
}
.emergency-banner__copy {
display: grid;
gap: 0.25rem;
}
.emergency-action {
min-width: 160px;
padding-inline: 1.05rem;
border: 1px solid color-mix(in srgb, var(--danger), transparent 36%);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger), transparent 82%);
}
.emergency-action.is-active {
animation: emergencyPulse 1.8s ease-in-out infinite;
}
@keyframes emergencyPulse {
0%,
100% {
box-shadow:
0 0 0 1px color-mix(in srgb, var(--danger), transparent 82%),
0 0 0 0 color-mix(in srgb, var(--danger), transparent 72%);
}
50% {
box-shadow:
0 0 0 1px color-mix(in srgb, var(--danger), transparent 60%),
0 0 0 8px color-mix(in srgb, var(--danger), transparent 92%);
}
}
.live-dashboard-section {
display: grid;
gap: var(--space-4);
}
.live-primary-stats,
.live-secondary-stats,
.live-action-grid {
display: grid;
gap: 0.8rem;
}
.live-primary-stats {
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.live-secondary-stats {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.live-secondary-stats .stat-card {
padding: var(--space-4);
}
.live-stats-updated {
color: var(--text-muted);
font-size: var(--font-size-sm);
}
.live-action-grid {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.live-action-card {
display: grid;
gap: 0.75rem;
margin: 0;
}
.live-action-card__title {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin: 0;
}
.live-action-card__fields {
display: grid;
gap: 0.65rem;
}
.live-action-card__inline {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.65rem;
}
.live-svg-icon {
width: 1.1rem;
height: 1.1rem;
color: currentColor;
flex: 0 0 auto;
}
@media (max-width: 960px) {
.live-dashboard-head__actions {
justify-content: flex-start;
}
.live-action-card__inline {
grid-template-columns: minmax(0, 1fr);
}
}
.moderation-page {
display: grid;
gap: var(--space-5);
}
.moderation-stats,
.moderation-toolbar,
.moderation-pagination {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
}
.moderation-stats .stat-card {
min-width: 160px;
flex: 1 1 160px;
}
.moderation-stats .stat-card.moderation-row--high {
border-color: color-mix(in srgb, var(--danger), transparent 45%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger), transparent 85%);
}
.moderation-toolbar {
align-items: end;
}
.moderation-toolbar__field {
min-width: 160px;
flex: 1 1 160px;
}
.moderation-toolbar__field--search {
min-width: 260px;
flex: 2 1 260px;
}
.moderation-table {
width: 100%;
}
.moderation-table th:first-child,
.moderation-table td:first-child {
width: 2.5rem;
}
.moderation-table tr {
border-left: 4px solid transparent;
}
.moderation-row--high {
border-left-color: var(--danger);
}
.moderation-row--medium {
border-left-color: var(--warning);
}
.moderation-row--low {
border-left-color: color-mix(in srgb, var(--border), white 16%);
}
.moderation-reporter {
display: grid;
gap: 0.25rem;
}
.moderation-severity {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.22rem 0.55rem;
border-radius: 999px;
border: 1px solid var(--border);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.moderation-severity--high {
border-color: color-mix(in srgb, var(--danger), transparent 32%);
color: color-mix(in srgb, var(--danger), white 12%);
background: color-mix(in srgb, var(--danger), transparent 90%);
}
.moderation-severity--medium {
border-color: color-mix(in srgb, var(--warning), transparent 35%);
color: color-mix(in srgb, var(--warning), white 10%);
background: color-mix(in srgb, var(--warning), transparent 90%);
}
.moderation-severity--low {
background: color-mix(in srgb, var(--bg-card), white 4%);
color: var(--text-secondary);
}
.moderation-reason {
display: grid;
gap: 0.35rem;
}
.moderation-actions details {
position: relative;
}
.moderation-actions summary {
list-style: none;
cursor: pointer;
}
.moderation-actions summary::-webkit-details-marker {
display: none;
}
.moderation-actions__menu {
position: absolute;
right: 0;
top: calc(100% + 0.4rem);
z-index: var(--z-modal);
width: min(280px, calc(100vw - 3rem));
display: grid;
gap: 0.55rem;
padding: 0.85rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-card), black 8%);
box-shadow: var(--shadow-lg);
}
.moderation-actions__buttons {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.45rem;
}
.moderation-bulk-bar {
position: sticky;
bottom: 1rem;
z-index: var(--z-sticky);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 1rem;
border-radius: var(--radius-md);
border: 1px solid var(--border-glow);
background: color-mix(in srgb, var(--bg-card), black 4%);
box-shadow: var(--shadow-md);
}
.moderation-bulk-bar[hidden] {
display: none;
}
.moderation-bulk-bar__actions {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
margin-left: auto;
}
.moderation-pagination {
align-items: center;
justify-content: space-between;
}
.moderation-pagination__meta {
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
@media (max-width: 900px) {
.moderation-pagination {
justify-content: flex-start;
}
.moderation-actions__menu {
right: auto;
left: 0;
}
}
}
.moment-page.moment-calm {
background: radial-gradient(circle at top, color-mix(in srgb, #4fd1c5 20%, transparent), transparent 60%);
}
.moment-page.moment-mysterious {
background: radial-gradient(circle at top, color-mix(in srgb, #6f7bff 20%, transparent), transparent 60%);
}
.moment-page.moment-sacred {
background: radial-gradient(circle at top, color-mix(in srgb, #b17dff 20%, transparent), transparent 60%);
}
.moment-emoji-grid {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.8rem 0 0.55rem;
}
.moment-emoji-btn {
min-width: 52px;
min-height: 52px;
padding: 0.45rem 0.65rem;
font-size: 1.3rem;
}
.moment-emoji-btn.active {
border-color: color-mix(in srgb, var(--accent-primary), white 10%);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary), transparent 70%);
}
.moment-emoji-cloud {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin: 0.65rem 0 0.7rem;
}
.moment-emoji-pill {
border: 1px solid var(--border);
border-radius: 999px;
padding: 0.26rem 0.62rem;
background: color-mix(in srgb, var(--bg-secondary), black 5%);
font-size: 1.06rem;
}
.moment-emoji-pill small {
color: var(--text-muted);
margin-left: 0.24rem;
}
.timeline-list {
display: grid;
gap: 0.8rem;
}
.timeline-item {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.75rem 0.8rem;
background: color-mix(in srgb, var(--bg-secondary), black 7%);
}
.timeline-item-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.35rem;
}
.timeline-emoji {
font-size: 1.15rem;
letter-spacing: 0.02em;
}
.timeline-item.intense { border-left: 4px solid #ff6f61; }
.timeline-item.joyful { border-left: 4px solid #f7b543; }
.timeline-item.calm { border-left: 4px solid #4fd1c5; }
.timeline-item.mysterious { border-left: 4px solid #6f7bff; }
.timeline-item.sacred { border-left: 4px solid #b17dff; }
.question-wall-list,
.question-gm-list {
display: grid;
gap: 0.85rem;
}
.question-display-list {
display: grid;
gap: 0.85rem;
}
.question-wall-item {
border-left: 3px solid color-mix(in srgb, var(--accent-primary), transparent 25%);
}
.question-display-item.is-featured {
border-left: 3px solid color-mix(in srgb, #fbbf24, transparent 40%);
}
.question-wall-text {
font-size: 1.08rem;
line-height: 1.5;
margin: 0.45rem 0 0.5rem;
}
.question-wall-responses,
.question-gm-responses {
margin-top: 0.65rem;
display: grid;
gap: 0.45rem;
}
.question-wall-response {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-secondary), black 6%);
padding: 0.5rem 0.65rem;
}
.question-wall-response p {
margin: 0.2rem 0;
}
.question-display-shell {
max-width: 1120px;
}
.question-display-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.65rem;
}
.question-display-meta {
margin-top: 0.25rem;
}
.volunteer-scan-video {
width: 100%;
min-height: 300px;
max-height: 70vh;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: #000;
object-fit: cover;
}
.profile-participant-qr-card {
text-align: center;
margin-bottom: 1rem;
transition: var(--transition);
}
.profile-participant-qr-card[role="button"] {
cursor: pointer;
}
.profile-participant-qr-card.is-bright {
border-color: color-mix(in srgb, var(--accent-primary), white 15%);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-glow), transparent 35%);
}
.profile-participant-qr-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0.35rem;
padding: 0.65rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: #fff;
}
.profile-participant-qr-img {
width: min(68vw, 280px);
height: auto;
display: block;
}
.profile-participant-id {
display: inline-block;
word-break: break-all;
font-size: 0.83rem;
}
.profile-page {
max-width: 840px;
}
.profile-identity-card {
text-align: center;
margin-bottom: 0.85rem;
}
.profile-email {
margin-top: 0.35rem;
}
.profile-identity-settings {
margin-top: 0.55rem;
text-align: left;
border-top: 1px solid var(--border);
padding-top: 0.45rem;
}
.profile-identity-settings > summary {
cursor: pointer;
color: var(--text-secondary);
font-weight: 600;
list-style: none;
}
.profile-identity-settings > summary::-webkit-details-marker {
display: none;
}
.profile-identity-settings[open] > summary {
color: var(--text-primary);
}
.profile-identity-settings form {
margin-top: 0.55rem;
display: grid;
gap: 0.45rem;
}
.profile-identity-option {
display: flex;
align-items: center;
gap: 0.45rem;
color: var(--text-secondary);
}
.profile-identity-nickname-wrap {
margin-left: 1.5rem;
}
.profile-tab-nav {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.5rem;
margin-bottom: 0.85rem;
padding: 0.55rem;
}
.profile-tab-link {
min-height: 40px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg-elevated);
color: var(--text-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-weight: 700;
font-size: 0.84rem;
transition: var(--transition);
}
.badge-dot {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.2rem;
height: 1.2rem;
border-radius: 999px;
margin-left: 0.35rem;
padding: 0 0.3rem;
background: color-mix(in srgb, #f87171, transparent 15%);
color: #fff;
font-size: 0.72rem;
font-weight: 800;
}
#notif-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 1.2rem;
}
.player-nav-link-has-badge {
gap: 0.35rem;
}
.notification-row {
border-left: 3px solid transparent;
}
.notification-row.unread {
border-left-color: color-mix(in srgb, var(--accent-primary), white 5%);
background: color-mix(in srgb, var(--bg-card), var(--accent-primary) 6%);
}
.notification-icon {
font-size: 1.1rem;
line-height: 1;
margin-top: 0.1rem;
}
.notification-dot {
color: color-mix(in srgb, var(--accent-primary), white 12%);
font-size: 0.7rem;
margin-right: 0.2rem;
}
.profile-tab-link:hover,
.profile-tab-link.is-active {
color: var(--text-primary);
border-color: color-mix(in srgb, var(--accent-primary), white 12%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary), transparent 72%);
}
.profile-tab-panel {
display: grid;
gap: 0.85rem;
}
.profile-inventory-subnav {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
padding: 0.55rem;
}
.profile-inventory-subtab {
min-height: 40px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg-elevated);
color: var(--text-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
text-decoration: none;
font-weight: 700;
font-size: 0.82rem;
padding: 0.35rem 0.72rem;
transition: var(--transition);
}
.profile-inventory-subtab:hover,
.profile-inventory-subtab.is-active {
color: var(--text-primary);
border-color: color-mix(in srgb, var(--accent-primary), white 12%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary), transparent 72%);
}
.profile-inventory-subpanel {
display: grid;
gap: 0.8rem;
}
.profile-page.profile-tabs-ready .profile-tab-panel[hidden] {
display: none !important;
}
.profile-overview-balance {
--profile-accent: var(--accent-primary);
border-color: color-mix(in srgb, var(--profile-accent), var(--border) 70%);
}
.profile-overview-label {
margin-bottom: 0.35rem;
}
.profile-overview-score {
font-size: clamp(2.1rem, 8vw, 3.2rem);
line-height: 1;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--profile-accent);
}
.profile-faction-block {
margin-top: 0.6rem;
display: grid;
gap: 0.35rem;
}
.welcome-steps {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.welcome-step-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
border: 1px solid var(--border);
border-radius: 999px;
padding: 0.25rem 0.7rem;
color: var(--text-secondary);
text-decoration: none;
font-size: 0.82rem;
font-weight: 600;
background: color-mix(in srgb, var(--surface-2), black 4%);
}
.welcome-step-chip.is-active {
color: var(--text-primary);
border-color: var(--tone-lantern-border);
box-shadow: inset 0 0 0 1px var(--tone-lantern-muted);
background: var(--tone-lantern-muted);
}
.welcome-step-chip.is-done {
border-color: color-mix(in srgb, var(--success), transparent 40%);
color: color-mix(in srgb, var(--success), white 15%);
}
.arrival-ritual-page {
max-width: 720px;
}
.arrival-stage-card {
border-radius: 20px;
border: 1px solid color-mix(in srgb, var(--border), transparent 12%);
padding: clamp(1rem, 2vw, 1.4rem);
background: var(--surface-shell);
position: relative;
overflow: hidden;
}
.arrival-stage-card::before {
content: "";
position: absolute;
inset: 0;
background: var(--texture-grain);
opacity: var(--material-texture-strength);
pointer-events: none;
}
.arrival-stage-card h1 {
font-family: var(--font-display);
letter-spacing: -0.03em;
}
.arrival-stage-darkness {
text-align: center;
background:
radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--tone-lantern), transparent 82%), transparent 44%),
linear-gradient(160deg, color-mix(in srgb, var(--bg-card), var(--tone-hearth) 14%) 0%, color-mix(in srgb, var(--bg-secondary), black 4%) 100%);
}
.arrival-rune {
font-size: clamp(2.2rem, 8vw, 3rem);
margin-bottom: 0.45rem;
color: color-mix(in srgb, var(--tone-lantern), white 24%);
animation: arrival-rune-glow 2.6s ease-in-out infinite;
}
.arrival-lore-text {
font-size: 1.05rem;
line-height: 1.66;
white-space: pre-wrap;
}
.arrival-faction-grid {
display: grid;
gap: 0.65rem;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.arrival-faction-choice {
border: 1px solid color-mix(in srgb, var(--arrival-faction-color, var(--border)), transparent 45%);
border-radius: 14px;
padding: 0.8rem;
display: grid;
gap: 0.2rem;
cursor: pointer;
background: color-mix(in srgb, var(--arrival-faction-color, var(--surface-2)) 14%, var(--surface-1));
}
.arrival-faction-choice input {
margin-bottom: 0.35rem;
}
.arrival-faction-name {
font-weight: 700;
}
.arrival-stage-mission {
--arrival-faction-color: var(--accent-primary);
border-color: color-mix(in srgb, var(--arrival-faction-color), var(--border) 55%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--arrival-faction-color), transparent 70%);
}
@keyframes arrival-rune-glow {
0%,
100% {
opacity: 0.68;
transform: scale(0.98);
}
50% {
opacity: 1;
transform: scale(1.04);
}
}
.participant-onboarding-page {
min-height: 100vh;
display: grid;
place-items: center;
padding-block: clamp(1rem, 4vw, 2.5rem);
background:
radial-gradient(circle at top, color-mix(in srgb, var(--tone-lantern), transparent 82%), transparent 34%),
linear-gradient(180deg, color-mix(in srgb, var(--bg-body), var(--tone-hearth) 8%), var(--bg-body));
}
.participant-onboarding-shell {
width: min(100%, 62rem);
display: grid;
gap: 1rem;
padding: clamp(1rem, 2.5vw, 1.5rem);
border-radius: 28px;
border: 1px solid color-mix(in srgb, var(--border), transparent 6%);
background: var(--surface-shell);
box-shadow: 0 30px 80px rgba(10, 6, 4, 0.34);
position: relative;
overflow: hidden;
}
.participant-onboarding-shell::before {
content: "";
position: absolute;
inset: 1px;
border-radius: inherit;
background: var(--texture-grain);
opacity: var(--material-texture-strength);
pointer-events: none;
}
.participant-onboarding-header {
display: flex;
align-items: start;
justify-content: space-between;
gap: 1rem;
}
.participant-onboarding-kicker,
.participant-onboarding-eyebrow {
margin: 0 0 0.35rem;
font-size: 0.8rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-secondary);
}
.participant-onboarding-header h1,
.participant-onboarding-panel h2 {
margin: 0;
font-family: var(--font-display);
letter-spacing: -0.02em;
}
.participant-onboarding-skip {
color: var(--text-secondary);
text-decoration: none;
font-weight: 600;
}
.participant-onboarding-skip:hover,
.participant-onboarding-skip:focus-visible {
color: var(--text-primary);
}
.participant-onboarding-steps {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.participant-onboarding-step {
display: inline-flex;
align-items: center;
min-height: 2.5rem;
border-radius: 999px;
border: 1px solid var(--border);
padding: 0.25rem 0.85rem;
color: var(--text-secondary);
font-size: 0.88rem;
font-weight: 700;
}
.participant-onboarding-step.is-active {
color: var(--text-primary);
border-color: var(--tone-lantern-border);
background: var(--tone-lantern-muted);
}
.participant-onboarding-step.is-done {
color: color-mix(in srgb, var(--success), white 12%);
border-color: color-mix(in srgb, var(--success), transparent 48%);
}
.participant-onboarding-panel {
display: grid;
gap: 1rem;
border-radius: 24px;
padding: clamp(1rem, 3vw, 2rem);
background: var(--surface-keepsake);
border: 1px solid color-mix(in srgb, var(--border), transparent 8%);
position: relative;
overflow: hidden;
}
.participant-onboarding-panel::before {
content: "";
position: absolute;
inset: 0;
background: var(--texture-grain);
opacity: calc(var(--material-texture-strength) * 0.85);
pointer-events: none;
}
.participant-onboarding-panel--hero,
.participant-onboarding-panel--complete {
text-align: center;
}
.participant-onboarding-panel--split,
.participant-onboarding-panel--scan {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
}
.participant-onboarding-lead {
margin: 0;
max-width: 42rem;
color: var(--text-secondary);
font-size: clamp(1rem, 2vw, 1.1rem);
line-height: 1.7;
}
.participant-onboarding-callout {
display: grid;
gap: 0.35rem;
padding: 1rem 1.1rem;
border-radius: 18px;
background: color-mix(in srgb, var(--surface-2), black 4%);
border: 1px solid var(--tone-lantern-border);
}
.participant-onboarding-primary,
.participant-onboarding-secondary {
justify-self: start;
}
.participant-onboarding-form {
display: grid;
gap: 0.85rem;
}
.participant-onboarding-avatar-preview {
display: grid;
place-items: center;
width: 5.75rem;
height: 5.75rem;
border-radius: 20px;
background: color-mix(in srgb, var(--surface-2), black 4%);
border: 1px solid var(--border);
}
.participant-onboarding-avatar-image,
.participant-onboarding-avatar-fallback {
width: 100%;
height: 100%;
border-radius: inherit;
}
.participant-onboarding-avatar-image {
object-fit: cover;
}
.participant-onboarding-avatar-fallback {
display: grid;
place-items: center;
font-size: 1.8rem;
font-weight: 800;
color: var(--text-primary);
}
.participant-onboarding-faction-grid {
display: grid;
gap: 0.8rem;
}
.participant-onboarding-faction-card,
.participant-onboarding-faction-reveal {
display: grid;
gap: 0.4rem;
padding: 1rem;
border-radius: 18px;
border: 1px solid color-mix(in srgb, var(--participant-onboarding-faction, var(--border)), transparent 40%);
background: color-mix(in srgb, var(--participant-onboarding-faction, var(--surface-2)) 10%, var(--surface-1));
}
.participant-onboarding-faction-card input {
margin: 0;
}
.participant-onboarding-faction-name {
font-size: 1.05rem;
font-weight: 800;
}
.participant-onboarding-faction-tagline {
color: var(--text-primary);
font-weight: 600;
}
.participant-onboarding-faction-body,
.participant-onboarding-faction-meta {
color: var(--text-secondary);
}
.participant-onboarding-scan-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.participant-onboarding-qr-card {
display: grid;
gap: 0.8rem;
justify-items: center;
padding: 1rem;
border-radius: 22px;
background: color-mix(in srgb, var(--surface-2), black 4%);
border: 1px solid color-mix(in srgb, var(--border), transparent 8%);
}
.participant-onboarding-qr-image {
width: min(100%, 21rem);
border-radius: 20px;
background: white;
padding: 1rem;
}
.participant-onboarding-qr-fallback {
width: min(100%, 21rem);
min-height: 21rem;
display: grid;
place-items: center;
border-radius: 20px;
background: color-mix(in srgb, var(--bg-card), black 15%);
color: var(--text-secondary);
}
.participant-onboarding-summary {
list-style: none;
display: grid;
gap: 0.75rem;
padding: 0;
margin: 0;
}
.participant-onboarding-summary li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.95rem 1rem;
border-radius: 16px;
background: color-mix(in srgb, var(--surface-2), black 4%);
border: 1px solid var(--border);
}
@media (max-width: 720px) {
.participant-onboarding-panel--split,
.participant-onboarding-panel--scan {
grid-template-columns: 1fr;
}
.participant-onboarding-header {
flex-direction: column;
align-items: stretch;
}
.participant-onboarding-primary,
.participant-onboarding-secondary {
justify-self: stretch;
}
}
body[data-app-surface="workflow-editor"] {
overflow: hidden;
}
.editor-workspace-shell {
--editor-panel-height: 240px;
--editor-palette-width: 280px;
--editor-inspector-width: 320px;
display: grid;
grid-template-rows: auto auto minmax(0, 1fr) auto;
height: 100dvh;
overflow: hidden;
background:
radial-gradient(circle at top left, color-mix(in srgb, var(--accent-primary), transparent 88%), transparent 38%),
linear-gradient(180deg, color-mix(in srgb, var(--bg-primary), black 3%), var(--bg-primary));
}
.editor-meta-panel {
border-bottom: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-card), black 1%);
}
.editor-meta-panel__summary {
cursor: pointer;
list-style: none;
padding: 0.7rem 1rem;
font-weight: 600;
}
.editor-meta-panel__summary::-webkit-details-marker {
display: none;
}
.editor-meta-panel__body {
padding: 0 1rem 1rem;
display: grid;
gap: 0.85rem;
}
.editor-mode-summary {
display: grid;
gap: 0.9rem;
}
.editor-mode-summary__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.editor-mode-summary__eyebrow {
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-primary);
}
.editor-mode-summary__badges,
.editor-mode-summary__actions {
display: flex;
align-items: center;
gap: 0.55rem;
flex-wrap: wrap;
}
.editor-mode-summary__metric {
padding: 0.85rem 0.95rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card), black 2%);
}
.editor-main-area {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
min-height: 0;
overflow: hidden;
}
.editor-sidebar-panel {
width: var(--editor-palette-width);
min-width: 0;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
border-right: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-card), black 2%);
overflow: hidden;
transition: width 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.editor-sidebar-panel--right {
width: var(--editor-inspector-width);
border-right: none;
border-left: 1px solid var(--border);
}
.editor-sidebar-panel--collapsed {
width: 0;
border-width: 0;
opacity: 0;
pointer-events: none;
}
.editor-sidebar-panel[hidden] {
display: none;
}
.editor-sidebar-panel__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
padding: 0.85rem 0.9rem;
border-bottom: 1px solid var(--border);
}
.editor-sidebar-panel__body {
min-height: 0;
overflow-y: auto;
padding: 0.85rem;
display: grid;
gap: 0.75rem;
}
.editor-palette-groups,
.editor-sidebar-panel__body .editor-panel-block,
.editor-inspector-panel {
display: grid;
gap: 0.7rem;
}
.editor-palette-actions {
display: grid;
gap: 0.35rem;
margin-top: 0.65rem;
}
.editor-palette-actions .btn {
justify-content: flex-start;
text-align: left;
}
.editor-canvas-area {
position: relative;
isolation: isolate;
min-height: 0;
overflow: hidden;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--accent-primary), transparent 90%), transparent 30%),
linear-gradient(135deg, color-mix(in srgb, var(--bg-card), black 2%), color-mix(in srgb, var(--bg-card), black 6%));
}
.editor-view-shell {
position: absolute;
inset: 0;
overflow: hidden;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.08)),
radial-gradient(circle at top left, color-mix(in srgb, var(--accent-primary), transparent 92%), transparent 32%);
}
.editor-view-shell--map {
background:
linear-gradient(135deg, color-mix(in srgb, var(--bg-card), white 3%), color-mix(in srgb, var(--bg-card), black 6%));
}
.editor-contextual-hint {
position: absolute;
left: 50%;
top: 1rem;
z-index: 28;
transform: translateX(-50%);
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.75rem;
align-items: start;
width: min(420px, calc(100% - 2rem));
padding: 0.85rem 1rem;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--bg-card), black 2%);
box-shadow: var(--shadow-lg);
color: var(--text-primary);
font-size: 0.78rem;
font-weight: 600;
text-align: left;
pointer-events: auto;
}
.editor-contextual-hint[hidden],
.editor-guide-card[hidden] {
display: none !important;
}
.editor-contextual-hint--warning {
border-color: color-mix(in srgb, var(--warning), transparent 16%);
background: color-mix(in srgb, var(--bg-card), var(--warning) 6%);
}
.editor-contextual-hint--success {
border-color: color-mix(in srgb, var(--success), transparent 18%);
background: color-mix(in srgb, var(--bg-card), var(--success) 6%);
}
.editor-contextual-hint__body {
min-width: 0;
}
.editor-contextual-hint__dismiss {
width: 28px;
height: 28px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
}
.editor-contextual-hint--has-nodes {
top: 5rem;
}
.editor-guide-card {
position: absolute;
inset: 50% auto auto 50%;
z-index: 29;
transform: translate(-50%, -50%);
width: min(420px, calc(100% - 2rem));
pointer-events: auto;
}
.editor-guide-card__inner {
position: relative;
display: grid;
gap: 0.8rem;
padding: 1.15rem 1.15rem 1rem;
border: 1px solid color-mix(in srgb, var(--accent-primary), transparent 26%);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--bg-card), var(--accent-primary) 7%);
box-shadow: var(--shadow-lg);
text-align: center;
pointer-events: auto;
}
.editor-guide-card__actions {
display: grid;
gap: 0.55rem;
}
.editor-guide-card__actions .btn {
width: 100%;
justify-content: center;
}
.editor-guide-card__dismiss {
position: absolute;
top: 0.55rem;
right: 0.55rem;
width: 28px;
height: 28px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
}
.editor-top-bar {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas:
"nav identity identity"
"nav lanes actions";
align-items: center;
gap: 0.75rem;
min-height: 56px;
padding: 0.65rem 1rem;
border-bottom: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-card), black 2%);
}
.editor-top-bar__nav,
.editor-top-bar__actions,
.editor-top-bar__meta {
display: flex;
align-items: center;
gap: 0.55rem;
flex-wrap: wrap;
}
.editor-top-bar__nav {
grid-area: nav;
align-self: start;
}
.editor-top-bar__identity {
grid-area: identity;
min-width: 0;
display: grid;
gap: 0.45rem;
}
.editor-top-bar__lanes {
grid-area: lanes;
min-width: 0;
align-self: end;
}
.editor-top-bar__actions {
grid-area: actions;
justify-self: end;
align-self: center;
justify-content: flex-end;
}
.editor-mode-switcher {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.22rem;
border: 1px solid var(--border);
border-radius: 999px;
background: color-mix(in srgb, var(--bg-card), black 2%);
}
.editor-mode-pill {
min-height: 32px;
padding: 0 0.75rem;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--text-secondary);
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
}
.editor-mode-pill.is-active,
.editor-mode-pill[aria-selected="true"] {
background: color-mix(in srgb, var(--accent-primary), white 3%);
color: white;
}
.editor-top-bar__name {
width: 100%;
min-width: 0;
font-size: 1rem;
font-weight: 700;
}
.editor-top-bar__status {
min-width: 118px;
}
.editor-status-pill {
min-height: 34px;
display: none;
align-items: center;
padding: 0.25rem 0.55rem;
border-radius: 999px;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-card), black 4%);
color: var(--text-secondary);
font-size: 0.78rem;
font-weight: 600;
}
.editor-status-pill.has-value {
display: inline-flex;
}
.editor-overflow-menu {
position: relative;
}
.editor-overflow-menu > summary {
list-style: none;
}
.editor-overflow-menu > summary::-webkit-details-marker {
display: none;
}
.editor-overflow-menu__panel {
position: absolute;
top: calc(100% + 0.35rem);
right: 0;
z-index: 30;
min-width: 220px;
padding: 0.65rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card), black 4%);
box-shadow: var(--shadow-lg);
display: grid;
gap: 0.45rem;
}
.editor-overflow-menu__panel .btn {
justify-content: flex-start;
width: 100%;
}
.editor-overflow-menu__item {
display: grid;
gap: 0.18rem;
justify-items: flex-start;
text-align: left;
}
[data-workflow-view][aria-pressed="true"] {
border-color: color-mix(in srgb, var(--accent-primary), white 8%);
background: color-mix(in srgb, var(--bg-card), var(--accent-primary) 18%);
color: var(--text-primary);
}
#workflow-label-toggle[aria-pressed="true"] {
border-color: color-mix(in srgb, var(--accent-primary), white 8%);
background: color-mix(in srgb, var(--bg-card), var(--accent-primary) 18%);
color: var(--text-primary);
}
.editor-viewport {
position: absolute;
inset: 0;
overflow: hidden;
}
.editor-stage {
position: absolute;
inset: 0;
}
.editor-stage--map {
min-width: 100%;
min-height: 100%;
transform-origin: 0 0;
will-change: transform;
}
.editor-cytoscape {
position: absolute;
inset: 0;
background:
radial-gradient(circle at top left, color-mix(in srgb, var(--accent-primary), transparent 88%), transparent 42%),
linear-gradient(180deg, color-mix(in srgb, #081423, white 2%), #07111d 58%, #050c16 100%);
touch-action: none;
}
.editor-cytoscape::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(color-mix(in srgb, var(--border), transparent 86%) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--border), transparent 86%) 1px, transparent 1px);
background-size: 36px 36px;
opacity: 0.55;
pointer-events: none;
}
.editor-cytoscape > * {
position: relative;
z-index: 1;
}
.workflow-cy-node {
width: 220px;
min-height: 78px;
padding: 0.6rem 0.8rem;
border: 1px solid color-mix(in srgb, var(--border), transparent 10%);
border-radius: calc(var(--radius-md) + 2px);
background: color-mix(in srgb, var(--bg-card), #081423 16%);
box-shadow: 0 18px 36px rgba(5, 12, 22, 0.28);
color: var(--text-primary);
pointer-events: none;
}
.workflow-cy-node.is-selected {
border-color: color-mix(in srgb, var(--accent-primary), white 12%);
box-shadow: 0 20px 40px rgba(34, 95, 184, 0.22);
}
.workflow-cy-node--monitor {
min-height: 116px;
}
.workflow-cy-node__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.65rem;
}
.workflow-cy-node__title {
display: block;
max-width: 146px;
font-size: 0.94rem;
line-height: 1.2;
}
.workflow-cy-node__badge {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 0.5rem;
border: 1px solid color-mix(in srgb, var(--accent-primary), transparent 58%);
border-radius: 999px;
background: color-mix(in srgb, var(--accent-primary), transparent 90%);
color: color-mix(in srgb, var(--text-primary), white 4%);
font-size: 0.68rem;
font-weight: 700;
white-space: nowrap;
}
.workflow-cy-node__type,
.workflow-cy-node__summary {
margin-top: 0.3rem;
color: var(--text-secondary);
font-size: 0.73rem;
line-height: 1.35;
}
.workflow-cy-node__runtime {
display: flex;
flex-wrap: wrap;
gap: 0.38rem;
margin-top: 0.55rem;
}
.workflow-cy-node__runtime-badge {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 0.48rem;
border-radius: 999px;
border: 1px solid var(--border);
font-size: 0.66rem;
font-weight: 700;
}
.workflow-cy-node__runtime-badge--active {
border-color: color-mix(in srgb, var(--success), transparent 22%);
background: color-mix(in srgb, var(--success), transparent 88%);
}
.workflow-cy-node__runtime-badge--completed {
border-color: color-mix(in srgb, var(--accent-primary), transparent 24%);
background: color-mix(in srgb, var(--accent-primary), transparent 88%);
}
.workflow-cy-node__runtime-badge--waiting {
border-color: color-mix(in srgb, var(--warning), transparent 24%);
background: color-mix(in srgb, var(--warning), transparent 88%);
}
.workflow-cy-node__runtime-badge--stuck {
border-color: color-mix(in srgb, var(--danger), transparent 24%);
background: color-mix(in srgb, var(--danger), transparent 90%);
}
.editor-link-hint {
position: absolute;
left: 50%;
top: 4.2rem;
z-index: 11;
transform: translateX(-50%);
max-width: min(440px, calc(100% - 2rem));
padding: 0.55rem 0.8rem;
border: 1px solid color-mix(in srgb, var(--accent-primary), transparent 20%);
border-radius: 999px;
background: color-mix(in srgb, var(--bg-card), var(--accent-primary) 9%);
box-shadow: var(--shadow-lg);
color: var(--text-primary);
font-size: 0.76rem;
font-weight: 700;
text-align: center;
}
.editor-quick-add-menu {
position: absolute;
z-index: 15;
min-width: 220px;
max-width: min(320px, calc(100% - 1.5rem));
padding: 0.7rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card), black 3%);
box-shadow: var(--shadow-lg);
}
.editor-quick-add-menu__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.55rem;
}
.editor-quick-add-menu__list {
display: grid;
gap: 0.4rem;
max-height: 260px;
overflow-y: auto;
}
.editor-map-layer,
.editor-map-image {
position: absolute;
inset: 0;
}
.editor-map-image {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
opacity: 0.55;
}
.editor-map-space-chip,
.editor-map-node-marker {
position: absolute;
transform: translate(-50%, -50%);
}
.editor-map-space-chip {
opacity: 0.82;
}
.editor-map-node-marker {
padding: 0.35rem 0.55rem;
border: 1px solid var(--border);
border-radius: 999px;
background: color-mix(in srgb, var(--bg-card), var(--accent-primary) calc(var(--workflow-node-heat, 0.14) * 100%));
color: var(--text-primary);
cursor: pointer;
}
.editor-map-node-marker.is-active {
background: var(--accent-primary);
color: white;
}
.cy-context-menus-cxt-menu {
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card), #081423 12%);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.cy-context-menus-cxt-menuitem {
padding: 0.5rem 0.9rem;
background: transparent;
color: var(--text-primary);
font-size: 0.78rem;
font-weight: 600;
}
.cy-context-menus-cxt-menuitem:hover {
background: color-mix(in srgb, var(--accent-primary), transparent 86%);
color: var(--text-primary);
}
.cytoscape-navigator {
position: absolute;
inset: 0;
border: 0;
background: linear-gradient(180deg, rgba(8, 20, 35, 0.96), rgba(6, 15, 26, 0.96));
}
.cytoscape-navigatorView {
border: 1px solid color-mix(in srgb, var(--accent-primary), white 10%);
background: color-mix(in srgb, var(--accent-primary), transparent 82%);
}
.cytoscape-navigatorOverlay {
outline: 1px solid color-mix(in srgb, var(--accent-primary), transparent 82%);
}
.editor-canvas-toolbar {
position: absolute;
top: 0.85rem;
left: 0.85rem;
right: 0.85rem;
z-index: 8;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.75rem;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 0.2rem;
scrollbar-width: thin;
}
.editor-canvas-toolbar__group {
display: flex;
align-items: center;
gap: 0.45rem;
flex: 0 0 auto;
flex-wrap: nowrap;
}
.editor-canvas-toolbar__group:last-child {
margin-left: auto;
}
.editor-zoom-label {
min-width: 56px;
display: inline-flex;
justify-content: center;
align-items: center;
min-height: 34px;
padding: 0.2rem 0.45rem;
border-radius: 999px;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-card), black 4%);
font-size: 0.78rem;
font-weight: 700;
}
.editor-minimap-shell,
.editor-canvas-summary {
position: absolute;
z-index: 8;
}
.editor-palette-group[hidden] {
display: none;
}
.editor-palette-empty-state {
display: grid;
gap: 0.5rem;
}
.editor-canvas-banner {
position: absolute;
top: 4.7rem;
left: 50%;
z-index: 30;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: flex-start;
gap: 0.7rem;
width: min(540px, calc(100% - 1.7rem));
padding: 0.75rem 0.85rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card), black 2%);
box-shadow: var(--shadow-lg);
transform: translateX(-50%);
pointer-events: auto;
}
.editor-canvas-banner[hidden] {
display: none !important;
}
.editor-canvas-banner--success {
border-color: color-mix(in srgb, #2fb36e, white 12%);
background: color-mix(in srgb, #2fb36e, var(--bg-card) 88%);
}
.editor-canvas-banner--warning {
border-color: color-mix(in srgb, #e3a63f, white 12%);
background: color-mix(in srgb, #e3a63f, var(--bg-card) 90%);
}
.editor-canvas-banner--error {
border-color: color-mix(in srgb, #d06767, white 10%);
background: color-mix(in srgb, #d06767, var(--bg-card) 90%);
}
.editor-canvas-banner__text {
min-width: 0;
font-size: 0.86rem;
line-height: 1.45;
}
.editor-canvas-banner__dismiss {
min-width: 40px;
min-height: 40px;
padding: 0 0.8rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
border: 0;
border-radius: 999px;
background: color-mix(in srgb, var(--bg-card), black 6%);
color: var(--text-primary);
cursor: pointer;
font-size: 0.82rem;
font-weight: 700;
}
.editor-minimap-shell {
right: 0.85rem;
bottom: 0.85rem;
width: 180px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card), black 2%);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.editor-minimap-shell__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.45rem;
padding: 0.45rem 0.55rem;
border-bottom: 1px solid var(--border);
}
.editor-minimap {
position: relative;
height: 108px;
opacity: 0.82;
transition: opacity 0.15s ease;
}
.editor-minimap:hover,
.editor-minimap:focus-within {
opacity: 1;
}
.editor-minimap__dot,
.editor-minimap__viewport {
position: absolute;
border-radius: 999px;
}
.editor-minimap__dot {
width: 10px;
height: 10px;
transform: translate(-50%, -50%);
border: 1px solid rgba(255, 255, 255, 0.7);
background: color-mix(in srgb, var(--accent-primary), white 8%);
}
.editor-minimap__dot.is-active {
background: var(--accent-primary);
}
.editor-minimap__viewport {
border: 1px solid color-mix(in srgb, var(--accent-primary), white 6%);
background: color-mix(in srgb, var(--accent-primary), transparent 84%);
}
.editor-canvas-summary {
left: 0.85rem;
bottom: 0.85rem;
max-width: 340px;
padding: 0;
overflow: hidden;
}
.editor-canvas-summary__toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.7rem 0.75rem;
list-style: none;
cursor: pointer;
}
.editor-canvas-summary__toggle::-webkit-details-marker {
display: none;
}
.editor-canvas-summary__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 26px;
padding: 0 0.55rem;
border-radius: 999px;
background: color-mix(in srgb, var(--accent-primary), transparent 82%);
color: var(--text-primary);
font-size: 0.74rem;
font-weight: 700;
white-space: nowrap;
}
.editor-canvas-summary__body {
display: grid;
gap: 0.45rem;
padding: 0 0.75rem 0.75rem;
}
.editor-canvas-summary[open] .editor-canvas-summary__toggle {
border-bottom: 1px solid var(--border);
}
.editor-inspector-overview {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.editor-heading-with-help {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.help-tooltip {
width: 1.2rem;
height: 1.2rem;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 999px;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-card), black 2%);
color: var(--text-secondary);
font-size: 0.72rem;
font-weight: 800;
cursor: help;
}
.help-tooltip::after {
content: attr(aria-label);
position: absolute;
left: 50%;
top: calc(100% + 0.45rem);
z-index: 5;
width: min(260px, 60vw);
padding: 0.55rem 0.65rem;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-card), black 4%);
box-shadow: var(--shadow-md);
color: var(--text-primary);
font-size: 0.72rem;
font-weight: 500;
line-height: 1.35;
text-align: left;
white-space: normal;
opacity: 0;
pointer-events: none;
transform: translate(-50%, -0.2rem);
transition: opacity 0.14s ease, transform 0.14s ease;
}
.help-tooltip:hover::after,
.help-tooltip:focus-visible::after {
opacity: 1;
transform: translate(-50%, 0);
}
.editor-inspector-actions,
.editor-edge-badges {
display: flex;
align-items: center;
gap: 0.45rem;
flex-wrap: wrap;
}
.editor-inline-fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 0.55rem;
}
.editor-inline-fields--actions {
grid-template-columns: minmax(0, auto) minmax(0, 1fr);
}
.editor-connection-chip {
justify-content: flex-start;
text-align: left;
}
.editor-nested-toggle {
border-top: 1px dashed color-mix(in srgb, var(--border), transparent 12%);
padding-top: 0.2rem;
}
.editor-nested-toggle > summary {
cursor: pointer;
color: var(--text-secondary);
font-weight: 600;
list-style: none;
}
.editor-nested-toggle > summary::-webkit-details-marker {
display: none;
}
.editor-id-context-menu {
position: fixed;
z-index: 40;
padding: 0.45rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card), black 4%);
box-shadow: var(--shadow-lg);
}
.editor-bottom-panel {
position: relative;
z-index: 1;
display: grid;
grid-template-rows: 6px 44px minmax(0, var(--editor-panel-height));
border-top: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-card), black 2%);
overflow: hidden;
transition: grid-template-rows 0.15s ease;
}
.editor-bottom-panel--collapsed {
grid-template-rows: 0 44px 0;
}
.editor-bottom-panel__handle {
cursor: ns-resize;
background: transparent;
}
.editor-bottom-panel__handle:hover,
.editor-bottom-panel__handle:active {
background: color-mix(in srgb, var(--accent-primary), transparent 20%);
}
.editor-bottom-panel__head {
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0 0.9rem;
border-bottom: 1px solid var(--border);
overflow: hidden;
}
.editor-bottom-panel__head > div {
min-width: 0;
display: flex;
align-items: baseline;
gap: 0.55rem;
overflow: hidden;
}
#workflow-secondary-panel-eyebrow,
#workflow-secondary-panel-title,
#workflow-secondary-panel-summary {
margin: 0;
}
#workflow-secondary-panel-eyebrow {
white-space: nowrap;
}
#workflow-secondary-panel-title {
flex: 0 0 auto;
font-size: 0.95rem;
line-height: 1.15;
}
#workflow-secondary-panel-summary {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.editor-bottom-panel__tabs {
display: flex;
align-items: stretch;
gap: 0;
overflow-x: auto;
border-bottom: 1px solid var(--border);
}
.editor-tab {
flex: 0 0 auto;
min-height: 44px;
min-width: 120px;
padding: 0 0.9rem;
border: 0;
border-bottom: 2px solid transparent;
background: transparent;
color: var(--text-secondary);
font-weight: 700;
cursor: pointer;
}
.editor-tab[hidden] {
display: none;
}
.editor-tab[aria-selected="true"] {
color: var(--text-primary);
border-bottom-color: var(--accent-primary);
}
.editor-bottom-panel__toggle {
margin-left: auto;
align-self: center;
margin-right: 0.55rem;
}
.editor-bottom-panel__body {
min-height: 0;
overflow: hidden;
}
.editor-bottom-panel__content {
height: 100%;
overflow-y: auto;
padding: 0.9rem;
}
.editor-panel-loading,
.editor-grid,
.editor-stack {
display: grid;
gap: 0.8rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-3 {
margin-top: 0.75rem;
}
.mt-4 {
margin-top: 1rem;
}
.mb-1 {
margin-bottom: 0.35rem;
}
.editor-grid--two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.editor-grid--three {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.editor-grid--four {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.editor-grid--dense {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.editor-subtle-card {
margin: 0;
}
.editor-preview-html {
margin-top: 0.55rem;
}
.editor-sidebar-backdrop {
position: absolute;
inset: 0;
z-index: 18;
border: 0;
background: rgba(5, 8, 16, 0.38);
}
.editor-mobile-nav {
display: none;
}
.editor-mobile-nav__btn {
background: none;
border: 0;
color: var(--text-secondary);
}
.editor-mobile-nav__btn svg {
width: 18px;
height: 18px;
}
.editor-mobile-nav__btn span {
font-size: 0.65rem;
}
.editor-mobile-nav__btn--active {
color: var(--accent-primary);
}
.editor-runtime-signal {
width: 100%;
justify-items: start;
text-align: left;
cursor: pointer;
}
.editor-save-toast {
position: fixed;
left: 50%;
bottom: 1.1rem;
z-index: 60;
transform: translate(-50%, 24px);
min-width: 180px;
max-width: min(420px, calc(100vw - 2rem));
padding: 0.7rem 0.95rem;
border: 1px solid var(--border);
border-radius: 999px;
background: color-mix(in srgb, var(--bg-card), black 4%);
box-shadow: var(--shadow-lg);
text-align: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease;
}
.editor-save-toast.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
.editor-save-toast.is-success {
border-color: color-mix(in srgb, var(--success), transparent 15%);
}
.editor-save-toast.is-error {
border-color: color-mix(in srgb, var(--danger), transparent 15%);
background: color-mix(in srgb, var(--bg-card), var(--danger) 8%);
}
.editor-connect-sheet {
position: fixed;
inset: 0;
z-index: 70;
}
.editor-connect-sheet__backdrop {
position: absolute;
inset: 0;
background: rgba(5, 8, 16, 0.5);
}
.editor-connect-sheet__panel {
position: absolute;
right: 1rem;
bottom: 1rem;
width: min(420px, calc(100vw - 2rem));
max-height: min(70vh, 640px);
display: grid;
gap: 0.75rem;
padding: 0.95rem;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--bg-card), black 2%);
box-shadow: var(--shadow-lg);
}
.editor-connect-sheet__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.65rem;
}
.editor-connect-sheet__list {
display: grid;
gap: 0.45rem;
max-height: min(52vh, 420px);
overflow-y: auto;
}
.editor-connect-sheet__row {
width: 100%;
justify-content: flex-start;
text-align: left;
}
.editor-connect-sheet__row .subtitle {
display: block;
}
.editor-health-drawer {
position: fixed;
inset: 0;
z-index: 72;
}
.editor-health-drawer__backdrop {
position: absolute;
inset: 0;
background: rgba(5, 8, 16, 0.54);
}
.editor-health-drawer__panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(440px, 100vw);
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
gap: 0.85rem;
padding: 1rem;
border-left: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-card), black 2%);
box-shadow: var(--shadow-lg);
}
.editor-health-drawer__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.editor-health-drawer__results {
min-height: 0;
overflow-y: auto;
display: grid;
gap: 0.75rem;
}
.editor-health-drawer__actions {
display: flex;
justify-content: space-between;
gap: 0.65rem;
}
.editor-health-item {
display: grid;
gap: 0.55rem;
padding: 0.85rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card), black 2%);
}
.editor-health-item--warning {
border-color: color-mix(in srgb, var(--warning), transparent 18%);
}
.editor-health-item--problem {
border-color: color-mix(in srgb, var(--danger), transparent 18%);
}
.editor-health-item__title {
font-weight: 700;
}
.editor-health-item__nodes,
.editor-health-item__fixes {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
@keyframes port-pulse {
0%, 100% {
box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-primary), transparent 40%);
}
50% {
box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-primary), transparent 80%);
}
}
@keyframes edge-dash {
to {
stroke-dashoffset: -24;
}
}
@keyframes edge-glow {
0% {
filter: drop-shadow(0 0 6px var(--accent-primary));
}
100% {
filter: none;
}
}
.editor-run-list,
.editor-run-trace-list,
.editor-runbook-grid,
.editor-runbook-entry-list {
display: grid;
gap: 0.45rem;
}
.editor-run-link {
margin: 0;
text-decoration: none;
color: inherit;
}
.editor-run-link:hover {
border-color: color-mix(in srgb, var(--accent-primary), white 10%);
}
.editor-runbook-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.editor-runbook-role summary {
cursor: pointer;
list-style: none;
}
.editor-runbook-role summary::-webkit-details-marker {
display: none;
}
.editor-runbook-entry {
margin: 0;
padding: 0.6rem;
}
.editor-top-bar__purpose-block {
display: grid;
gap: 0.4rem;
}
.editor-top-bar__purpose {
width: 100%;
min-width: 0;
font-size: 0.92rem;
}
.editor-top-bar__status-help {
min-width: 34px;
padding: 0;
font-weight: 700;
}
.editor-purpose-suggestion {
display: grid;
gap: 0.55rem;
padding: 0.7rem 0.8rem;
border: 1px solid color-mix(in srgb, var(--accent-primary), transparent 70%);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card), var(--accent-primary) 9%);
}
.editor-purpose-suggestion__actions {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.editor-palette-card-help {
display: block;
color: var(--text-tertiary);
font-size: 0.74rem;
line-height: 1.35;
}
.editor-empty-state {
position: absolute;
inset: 0;
z-index: 27;
display: grid;
place-items: center;
padding: 1rem;
pointer-events: none;
}
.editor-empty-state[hidden] {
display: none !important;
}
.editor-empty-state__card {
width: min(760px, 100%);
display: grid;
gap: 1rem;
text-align: center;
box-shadow: var(--shadow-lg);
pointer-events: auto;
}
.editor-empty-state__card button,
.editor-empty-state__card a {
pointer-events: auto;
}
.editor-empty-state__dismiss-row {
display: flex;
justify-content: flex-end;
}
.editor-empty-state__dismiss {
min-height: 42px;
padding: 0.6rem 0.95rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
border: 1px solid color-mix(in srgb, var(--border), white 8%);
border-radius: 999px;
background: color-mix(in srgb, var(--bg-card), black 5%);
color: var(--text-primary);
font-size: 0.84rem;
font-weight: 700;
cursor: pointer;
}
.editor-empty-state__dismiss:hover,
.editor-empty-state__dismiss:focus-visible {
background: color-mix(in srgb, var(--bg-card), var(--accent-primary) 10%);
}
.editor-empty-state__intro {
display: grid;
gap: 0.65rem;
justify-items: center;
}
.editor-empty-state__actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
}
.editor-empty-state__actions .btn {
min-height: 104px;
display: grid;
gap: 0.3rem;
align-content: start;
justify-items: start;
text-align: left;
white-space: normal;
}
.editor-empty-state__notes {
display: grid;
gap: 0.35rem;
}
.editor-dialog-shell {
position: fixed;
inset: 0;
z-index: 74;
}
.editor-dialog-shell__backdrop {
position: absolute;
inset: 0;
background: rgba(5, 8, 16, 0.62);
}
.editor-dialog {
position: absolute;
top: 50%;
left: 50%;
width: min(980px, calc(100vw - 2rem));
max-height: min(88vh, 860px);
display: grid;
gap: 0.9rem;
padding: 1rem;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--bg-card), black 2%);
box-shadow: var(--shadow-lg);
overflow: hidden;
transform: translate(-50%, -50%);
}
.editor-dialog--preview {
width: min(1120px, calc(100vw - 2rem));
}
.editor-dialog--checklist {
width: min(720px, calc(100vw - 2rem));
}
.editor-dialog__head,
.editor-dialog__head-actions,
.editor-dialog__actions,
.editor-preview-layout,
.editor-example-layout,
.editor-template-graph,
.editor-template-card__stats,
.editor-preview-layout__journey,
.editor-preview-layout__phone,
.editor-preview-scene-list,
.editor-checklist-list,
.editor-checklist-consequences,
.editor-status-help-list,
.editor-example-rail,
.editor-example-annotations {
display: grid;
gap: 0.75rem;
}
.editor-dialog__head {
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
}
.editor-dialog__head-actions {
grid-auto-flow: column;
align-items: center;
}
.editor-dialog__actions {
grid-auto-flow: column;
justify-content: end;
}
.editor-preview-layout,
.editor-example-layout {
min-height: 0;
grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
}
.editor-preview-layout__journey,
.editor-preview-layout__phone,
.editor-example-layout > div {
min-height: 0;
}
.editor-preview-scene-list,
.editor-example-annotations,
.editor-template-grid,
.editor-status-help-list,
.editor-checklist-list,
.editor-checklist-consequences {
overflow-y: auto;
}
.editor-template-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 0.85rem;
}
.editor-template-card,
.editor-status-help-item,
.editor-checklist-item,
.editor-example-annotation,
.editor-preview-scene {
padding: 0.85rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card), black 3%);
}
.editor-template-graph {
padding: 0.7rem;
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-secondary), transparent 20%);
}
.editor-template-graph__node {
display: inline-flex;
align-items: center;
padding: 0.32rem 0.55rem;
border-radius: 999px;
background: color-mix(in srgb, var(--accent-primary), transparent 82%);
font-size: 0.76rem;
font-weight: 600;
}
.editor-template-card__stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.editor-preview-scene {
cursor: pointer;
}
.editor-preview-scene.is-active {
border-color: color-mix(in srgb, var(--accent-primary), transparent 18%);
background: color-mix(in srgb, var(--bg-card), var(--accent-primary) 10%);
}
.editor-phone-frame {
min-height: 100%;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
border: 1px solid var(--border);
border-radius: 28px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.08));
overflow: hidden;
}
.editor-phone-frame__meta {
display: grid;
gap: 0.2rem;
padding: 0.95rem 1rem 0.7rem;
border-bottom: 1px solid var(--border);
}
.editor-phone-frame__body {
min-height: 0;
overflow: auto;
padding: 1rem;
}
.editor-status-help-item,
.editor-checklist-item {
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
}
.editor-status-help-item__dot,
.editor-checklist-item__mark {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 0.9rem;
font-weight: 700;
}
.editor-status-help-item__dot {
background: color-mix(in srgb, var(--accent-primary), transparent 84%);
}
.editor-checklist-item__mark {
background: color-mix(in srgb, var(--bg-secondary), transparent 12%);
}
.editor-checklist-item.is-pass .editor-checklist-item__mark {
background: color-mix(in srgb, var(--success), transparent 80%);
}
.editor-checklist-item.is-warning .editor-checklist-item__mark {
background: color-mix(in srgb, var(--warning), transparent 78%);
}
.editor-example-rail {
grid-auto-flow: column;
grid-auto-columns: minmax(160px, 1fr);
overflow-x: auto;
}
.editor-example-rail__node {
display: grid;
gap: 0.35rem;
padding: 0.8rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card), black 3%);
}
.editor-example-annotation__label,
.editor-checklist-item__label,
.editor-status-help-item__label {
font-weight: 700;
}
@media (max-width: 1023px) {
.editor-empty-state__actions,
.editor-preview-layout,
.editor-example-layout {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 767px) {
.editor-top-bar__purpose {
font-size: 0.88rem;
}
.editor-top-bar__status-help {
display: inline-flex;
}
.editor-empty-state {
padding: 0.75rem;
inset: 0 0 4.9rem;
}
.editor-empty-state__card {
text-align: left;
}
.editor-dialog {
left: 0;
right: 0;
top: auto;
bottom: 0;
width: auto;
max-height: min(86vh, 860px);
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
transform: none;
}
.editor-dialog__head,
.editor-dialog__head-actions,
.editor-dialog__actions {
grid-template-columns: minmax(0, 1fr);
grid-auto-flow: row;
}
.editor-example-rail {
grid-auto-flow: row;
grid-auto-columns: unset;
overflow-x: visible;
}
}
.editor-workspace-shell[data-editor-mode="view"] .editor-top-bar__panel-btn,
.editor-workspace-shell[data-editor-mode="view"] .editor-canvas-toolbar [data-toggle-panel="palette"],
.editor-workspace-shell[data-editor-mode="view"] .editor-canvas-toolbar #workflow-relayout-btn,
.editor-workspace-shell[data-editor-mode="monitor"] .editor-top-bar__panel-btn,
.editor-workspace-shell[data-editor-mode="monitor"] .editor-canvas-toolbar [data-toggle-panel="palette"],
.editor-workspace-shell[data-editor-mode="monitor"] .editor-canvas-toolbar #workflow-label-toggle {
display: none;
}
.editor-workspace-shell[data-editor-mode="view"] .editor-minimap-shell,
.editor-workspace-shell[data-editor-mode="view"] .editor-canvas-summary {
opacity: 0.82;
}
@media (max-width: 1279px) {
.editor-workspace-shell {
--editor-palette-width: 260px;
}
.editor-top-bar {
grid-template-columns: 1fr;
}
.editor-top-bar__actions {
justify-content: flex-start;
}
.editor-mode-summary__head {
flex-direction: column;
}
}
@media (max-width: 1023px) {
.editor-main-area {
grid-template-columns: minmax(0, 1fr);
}
.editor-sidebar-panel {
position: absolute;
top: 0;
bottom: 0;
z-index: 22;
width: min(340px, calc(100vw - 2rem));
box-shadow: var(--shadow-lg);
}
.editor-sidebar-panel--right {
right: 0;
}
.editor-sidebar-panel--collapsed {
opacity: 0;
pointer-events: none;
width: min(340px, calc(100vw - 2rem));
transform: translateX(-105%);
}
.editor-sidebar-panel--right.editor-sidebar-panel--collapsed {
transform: translateX(105%);
}
.editor-canvas-summary {
max-width: min(320px, calc(100% - 1.7rem));
}
.editor-canvas-banner {
width: min(480px, calc(100% - 1rem));
}
.editor-contextual-hint {
top: 4.75rem;
max-width: calc(100% - 1rem);
}
.editor-guide-card {
width: min(400px, calc(100% - 1rem));
}
.editor-grid--three,
.editor-grid--four {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.editor-mode-summary__actions .btn {
flex: 1 1 220px;
}
.editor-connect-sheet__panel {
left: 1rem;
right: 1rem;
width: auto;
}
}
@media (max-width: 767px) {
.editor-workspace-shell {
grid-template-rows: auto auto minmax(0, 1fr);
padding-bottom: 52px;
}
.editor-top-bar {
padding: 0.6rem 0.75rem;
}
.editor-top-bar__meta {
gap: 0.35rem;
}
.editor-top-bar__panel-btn,
.editor-top-bar__meta-toggle,
.editor-canvas-toolbar {
display: none;
}
.editor-top-bar__actions .editor-action-label,
.editor-top-bar__back {
white-space: nowrap;
}
.editor-mode-pill {
flex: 1 1 0;
padding-inline: 0.45rem;
}
.editor-inline-fields--actions {
grid-template-columns: 1fr;
}
.editor-sidebar-panel {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 52px;
width: auto;
transform: translateY(0);
}
.editor-sidebar-panel--left.editor-sidebar-panel--collapsed {
transform: translateY(105%);
}
.editor-sidebar-panel--right {
top: 40%;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
}
.editor-sidebar-panel--right.editor-sidebar-panel--collapsed {
transform: translateY(105%);
}
.editor-bottom-panel {
position: fixed;
left: 0;
right: 0;
bottom: 52px;
top: 18%;
z-index: 24;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
box-shadow: var(--shadow-lg);
transform: translateY(105%);
}
.editor-bottom-panel--mobile-open {
transform: translateY(0);
}
.editor-bottom-panel__handle {
display: none;
}
.editor-bottom-panel__content {
padding-bottom: max(1rem, var(--sab));
}
.editor-mobile-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 28;
display: flex;
align-items: center;
justify-content: space-around;
min-height: 52px;
padding-bottom: var(--sab);
border-top: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-card), black 2%);
}
.editor-node-port,
.editor-node-port-label {
opacity: 0;
}
.editor-node-card.is-selected .editor-node-port,
.editor-node-card.is-selected .editor-node-port-label,
.editor-node-card.is-linking-source .editor-node-port,
.editor-node-card.is-linking-source .editor-node-port-label {
opacity: 1;
}
.editor-mobile-nav__btn {
min-width: 52px;
min-height: 44px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.12rem;
}
.editor-mobile-nav__btn:disabled {
opacity: 0.45;
}
.editor-minimap-shell {
width: 140px;
}
.editor-minimap {
height: 88px;
}
.editor-edge-label {
max-width: 140px;
}
.editor-link-hint {
top: auto;
bottom: 4.7rem;
}
.editor-contextual-hint {
top: 4.9rem;
font-size: 0.74rem;
}
.editor-canvas-banner {
top: 4.9rem;
width: calc(100% - 1rem);
}
.editor-canvas-summary {
right: 0.75rem;
bottom: calc(64px + var(--sab));
max-width: none;
}
.editor-guide-card {
inset: auto 0 5.15rem 0;
transform: none;
width: auto;
padding: 0 0.75rem;
}
.editor-guide-card__inner {
text-align: left;
}
.editor-connect-sheet__panel {
left: 0;
right: 0;
bottom: 0;
width: auto;
max-height: min(76vh, 640px);
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.editor-grid--two,
.editor-grid--three,
.editor-grid--four {
grid-template-columns: minmax(0, 1fr);
}
.editor-mode-summary__actions {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.editor-save-toast {
bottom: calc(64px + var(--sab));
}
.editor-mode-switcher {
width: 100%;
justify-content: center;
}
.editor-health-drawer__panel {
width: 100%;
}
}
.profile-character-hero {
--profile-accent: var(--accent-primary);
--profile-hero-shift: 0px;
position: relative;
overflow: hidden;
border-color: color-mix(in srgb, var(--profile-accent), var(--border) 65%);
background: color-mix(in srgb, var(--bg-card), black 5%);
}
.profile-character-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
transform: translateY(var(--profile-hero-shift));
background:
linear-gradient(155deg, color-mix(in srgb, var(--profile-accent), transparent 82%), transparent 65%),
radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--profile-accent), transparent 72%), transparent 54%);
}
.profile-character-hero > * {
position: relative;
z-index: 1;
}
.profile-character-head {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.85rem;
align-items: start;
margin-bottom: 0.55rem;
}
.profile-character-avatar-wrap {
position: relative;
}
.profile-character-avatar {
width: clamp(84px, 18vw, 108px);
height: clamp(84px, 18vw, 108px);
border-radius: 999px;
border: 3px solid color-mix(in srgb, var(--profile-accent), white 18%);
box-shadow: 0 0 0 5px color-mix(in srgb, var(--profile-accent), transparent 85%);
object-fit: cover;
}
.profile-character-avatar-fallback {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 800;
background: color-mix(in srgb, var(--profile-accent), transparent 62%);
color: #fff;
}
.profile-status-chip-wrap {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
margin-top: 0.45rem;
}
.profile-status-chip {
font-size: 0.68rem;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.profile-character-copy {
display: grid;
gap: 0.28rem;
}
.profile-character-name {
margin: 0;
font-size: clamp(1.35rem, 4.6vw, 1.95rem);
line-height: 1.1;
}
.profile-live-stats-bar {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.4rem;
padding: 0.5rem;
margin-bottom: 0.75rem;
}
.profile-live-pill {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-card), black 4%);
min-height: 62px;
text-decoration: none;
color: var(--text-secondary);
display: grid;
justify-items: center;
align-content: center;
gap: 0.05rem;
font-size: 0.74rem;
}
.profile-live-pill strong {
color: var(--text-primary);
font-size: 1rem;
line-height: 1;
}
.profile-live-pill small {
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.profile-action-deck {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(240px, 74%);
gap: 0.6rem;
overflow-x: auto;
scrollbar-width: none;
padding-bottom: 0.15rem;
margin-bottom: 0.8rem;
}
.profile-action-deck::-webkit-scrollbar {
display: none;
}
.profile-action-card {
display: grid;
gap: 0.45rem;
}
.profile-action-card.tone-urgent {
border-color: color-mix(in srgb, var(--danger), transparent 58%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger), transparent 78%);
}
.profile-action-card.tone-focus {
border-color: color-mix(in srgb, var(--accent-primary), transparent 58%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary), transparent 78%);
}
.profile-action-card.tone-ambient {
border-color: color-mix(in srgb, var(--border), transparent 15%);
}
@media (max-width: 560px) {
.profile-live-stats-bar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.profile-faction-link {
display: inline-flex;
justify-content: center;
text-decoration: none;
}
.profile-faction-link:hover .faction-badge {
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary), transparent 72%);
}
.profile-quick-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.65rem;
}
.profile-fact-list {
list-style: none;
padding: 0;
display: grid;
gap: 0.4rem;
}
.profile-fact-list li {
color: var(--text-secondary);
}
.profile-quest-filter-bar {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.profile-quest-filter-bar .btn.is-active {
border-color: color-mix(in srgb, var(--accent-primary), white 12%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary), transparent 72%);
}
.profile-quest-list {
display: grid;
gap: 0.75rem;
}
.profile-quest-row > summary {
list-style: none;
}
.profile-quest-row > summary::-webkit-details-marker {
display: none;
}
.profile-quest-summary {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.75rem;
cursor: pointer;
align-items: start;
}
.profile-quest-summary h3 {
margin-bottom: 0.2rem;
}
.profile-quest-summary-meta {
display: grid;
justify-items: end;
gap: 0.35rem;
}
.profile-quest-hint-chip {
display: inline-flex;
align-items: center;
border: 1px solid rgba(251, 191, 36, 0.32);
background: rgba(251, 191, 36, 0.12);
color: #facc15;
border-radius: 999px;
padding: 0.18rem 0.55rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.03em;
}
.profile-quest-body {
margin-top: 0.6rem;
display: grid;
gap: 0.55rem;
}
.profile-quest-hint-form {
margin-top: 0.2rem;
}
.profile-quest-summary-card {
display: grid;
gap: 0.6rem;
}
.profile-quest-summary-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.profile-quest-mini-list {
display: grid;
gap: 0.52rem;
}
.profile-quest-mini-item {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-card), black 4%);
padding: 0.55rem 0.62rem;
display: grid;
gap: 0.25rem;
}
.quest-discovery-page {
--quest-discovery-max-width: 1020px;
max-width: var(--quest-discovery-max-width);
}
.quest-discovery-shell {
display: grid;
gap: 0.82rem;
}
.quest-discovery-search-card {
display: grid;
gap: 0.45rem;
position: sticky;
top: calc(var(--space-4) + var(--sat));
z-index: 6;
backdrop-filter: blur(14px);
}
.quest-discovery-search-input {
min-height: 44px;
}
.quest-filter-chip-row {
display: grid;
gap: 0.5rem;
}
.quest-filter-chip-group {
display: flex;
gap: 0.45rem;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: 0.2rem;
}
.quest-filter-chip-group::-webkit-scrollbar {
display: none;
}
.quest-filter-chip-group .filter-chip {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 0.24rem;
border-radius: 999px;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-card), black 4%);
color: var(--text-secondary);
text-decoration: none;
font-size: 0.8rem;
font-weight: 600;
min-height: 36px;
padding: 0.35rem 0.75rem;
white-space: nowrap;
}
.quest-filter-chip-group .filter-chip.active {
color: var(--text-primary);
border-color: color-mix(in srgb, var(--accent-primary), white 12%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary), transparent 70%);
}
.quest-discovery-progress-card {
display: grid;
gap: 0.6rem;
}
.quest-discovery-progress-track {
margin-top: 0;
}
.quest-suggested-block {
display: grid;
gap: 0.55rem;
}
.quest-discovery-list-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.quest-discovery-section-title {
margin: 0;
font-size: 1.06rem;
}
.quest-view-toggle .btn.is-active {
border-color: color-mix(in srgb, var(--accent-primary), white 10%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary), transparent 70%);
}
.quest-discovery-list {
display: grid;
gap: 0.7rem;
}
.quest-discovery-tier-group {
display: grid;
gap: 0.5rem;
}
.quest-discovery-tier-group h3 {
margin: 0;
font-size: 0.95rem;
color: var(--text-secondary);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.quest-card {
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card), black 4%);
display: grid;
grid-template-columns: 4px 1fr;
overflow: hidden;
}
.quest-card-suggested {
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary), transparent 70%);
}
.quest-card-stripe {
background: color-mix(in srgb, var(--accent-primary), white 8%);
}
.quest-card.quest-tier-common .quest-card-stripe {
background: #38bdf8;
}
.quest-card.quest-tier-uncommon .quest-card-stripe {
background: #22c55e;
}
.quest-card.quest-tier-rare .quest-card-stripe {
background: #f59e0b;
}
.quest-card.quest-tier-legendary .quest-card-stripe {
background: #c084fc;
}
.quest-card-body {
padding: 0.72rem 0.75rem;
display: grid;
gap: 0.45rem;
}
.quest-card-header {
display: flex;
justify-content: space-between;
gap: 0.55rem;
align-items: flex-start;
}
.quest-card-title {
margin: 0;
font-size: 1rem;
}
.quest-lock-icon {
margin-right: 0.2rem;
}
.quest-card-reward {
font-size: 0.76rem;
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: 999px;
padding: 0.2rem 0.55rem;
white-space: nowrap;
}
.quest-card-desc {
margin: 0;
color: var(--text-secondary);
font-size: 0.9rem;
}
.quest-card-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
}
.quest-tier-chip {
display: inline-flex;
align-items: center;
border-radius: 999px;
border: 1px solid var(--border);
font-size: 0.7rem;
color: var(--text-secondary);
padding: 0.16rem 0.45rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.quest-prereq-hint {
font-size: 0.74rem;
color: var(--warning);
}
.quest-completed-check {
color: var(--success);
font-size: 0.78rem;
font-weight: 700;
}
.quest-card-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.42rem;
}
.leaderboard-self-card {
border-color: color-mix(in srgb, var(--accent-primary), var(--border) 66%);
}
.leaderboard-row-current td {
background: color-mix(in srgb, var(--accent-primary), transparent 91%);
}
.leaderboard-page {
--leaderboard-max-width: 1080px;
max-width: var(--leaderboard-max-width);
}
.leaderboard-tabs-card {
padding-bottom: 0.65rem;
}
.leaderboard-tab-row {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.leaderboard-tab-row .btn.is-active {
border-color: color-mix(in srgb, var(--accent-primary), white 12%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary), transparent 70%);
}
.profile-memories-list {
display: grid;
gap: 0.5rem;
}
.profile-memory-row {
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 0.6rem;
background: color-mix(in srgb, var(--bg-card), black 3%);
}
.profile-memory-row blockquote {
margin: 0.3rem 0 0;
padding-left: 0.55rem;
border-left: 3px solid color-mix(in srgb, var(--accent-primary), transparent 35%);
color: var(--text-secondary);
}
.trade-page {
display: grid;
gap: var(--space-5);
}
.trade-hero {
background:
radial-gradient(circle at top left, color-mix(in srgb, var(--accent-warm), transparent 82%), transparent 38%),
color-mix(in srgb, var(--bg-glass), black 8%);
}
.trade-list {
display: grid;
gap: 1rem;
}
.trade-card {
display: grid;
gap: 0.95rem;
}
.trade-card__header,
.trade-card__item-row,
.trade-card__actions,
.trade-counter-form__row,
.trade-history-entry__header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.75rem;
}
.trade-card__header {
align-items: flex-start;
}
.trade-card__chips {
gap: 0.45rem;
}
.trade-card__offer-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
}
.trade-card__offer {
display: grid;
gap: 0.55rem;
padding: var(--space-4);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-secondary), white 2%);
}
.trade-card__offer--their {
background: color-mix(in srgb, var(--danger), transparent 92%);
}
.trade-card__offer--your {
background: color-mix(in srgb, var(--success), transparent 92%);
}
.trade-card__items {
display: grid;
gap: 0.45rem;
}
.trade-card__message {
display: grid;
gap: 0.45rem;
padding: var(--space-4);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-card), black 3%);
border: 1px solid var(--border);
}
.trade-counter-form {
display: grid;
gap: 0.75rem;
}
.trade-counter-sheet .wm-sheet-body {
display: grid;
gap: 0.9rem;
}
.trade-counter-form__section {
display: grid;
gap: 0.75rem;
padding: var(--space-4);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-card), black 3%);
}
.trade-counter-form__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.65rem;
}
.trade-counter-form__row > * {
flex: 1 1 12rem;
}
.trade-card__history {
border-top: 1px solid var(--border);
padding-top: var(--space-3);
}
.trade-card__history summary {
cursor: pointer;
font-weight: var(--font-weight-semibold);
}
.trade-history-list {
display: grid;
gap: 0.8rem;
margin-top: var(--space-3);
}
.trade-history-entry {
display: grid;
gap: 0.7rem;
padding: var(--space-4);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-card), black 2%);
}
.trade-history-entry.is-latest {
border-color: color-mix(in srgb, var(--accent), transparent 58%);
}
.trade-history-entry__body {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
}
.trade-history-entry__column {
display: grid;
gap: 0.45rem;
}
.trade-loading {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
.trade-loading.htmx-indicator {
display: none;
}
.htmx-request .trade-loading.htmx-indicator,
.htmx-request.trade-loading.htmx-indicator {
display: inline-flex;
}
@media (max-width: 720px) {
.trade-card__offer-grid,
.trade-history-entry__body {
grid-template-columns: minmax(0, 1fr);
}
}
.recipe-studio-shell {
display: grid;
gap: 1rem;
}
.recipe-studio-topbar,
.recipe-studio-panel-head,
.recipe-studio-inline-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.9rem;
}
.recipe-studio-eyebrow {
margin: 0 0 0.25rem;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.recipe-studio-stats,
.recipe-studio-chip-row,
.recipe-studio-nav,
.recipe-studio-alerts,
.recipe-studio-live-actions {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.recipe-studio-alert {
padding: 0.75rem 0.9rem;
border-radius: 0.9rem;
border: 1px solid color-mix(in srgb, var(--color-warning, #d38a3d) 50%, transparent);
background: color-mix(in srgb, var(--color-warning, #d38a3d) 12%, transparent);
}
.recipe-studio-panels,
.recipe-studio-grid,
.recipe-studio-grid-wide,
.recipe-studio-sim-grid,
.recipe-studio-live-list,
.recipe-studio-automation-side,
.recipe-studio-subgrid {
display: grid;
gap: 1rem;
}
.recipe-studio-grid {
grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 1fr);
}
.recipe-studio-grid-wide {
grid-template-columns: minmax(0, 1.15fr) minmax(19rem, 0.85fr);
}
.recipe-studio-subgrid,
.recipe-studio-sim-grid {
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.recipe-studio-panel {
display: grid;
gap: 1rem;
}
.recipe-studio-form,
.recipe-studio-list,
.recipe-studio-action-detail {
display: grid;
gap: 0.9rem;
}
.recipe-studio-list-card,
.recipe-studio-live-card,
.recipe-studio-sim-card {
display: grid;
gap: 0.75rem;
padding: 1rem;
border-radius: 1rem;
border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
background: color-mix(in srgb, var(--color-surface) 94%, transparent);
}
.recipe-studio-list-card.is-selected {
border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.recipe-studio-row,
.recipe-studio-inline-form {
display: grid;
grid-template-columns: minmax(0, 1fr) 7rem auto;
gap: 0.6rem;
align-items: center;
}
.recipe-studio-inline-form {
grid-template-columns: minmax(12rem, 1fr) auto;
}
.recipe-studio-rows {
display: grid;
gap: 0.65rem;
}
.recipe-studio-toggle {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 2.5rem;
}
.recipe-studio-meter {
width: 100%;
height: 0.65rem;
border-radius: 999px;
background: color-mix(in srgb, var(--color-border) 80%, transparent);
overflow: hidden;
}
.recipe-studio-meter-bar {
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 65%, white));
}
.recipe-studio-mini-list {
margin: 0;
padding-left: 1rem;
}
.recipe-studio-code {
overflow-x: auto;
padding: 0.9rem;
border-radius: 0.9rem;
background: color-mix(in srgb, var(--color-surface-raised) 92%, black 8%);
font-size: 0.8rem;
}
@media (max-width: 980px) {
.recipe-studio-grid,
.recipe-studio-grid-wide {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.recipe-studio-topbar,
.recipe-studio-panel-head,
.recipe-studio-inline-head,
.recipe-studio-row,
.recipe-studio-inline-form {
grid-template-columns: 1fr;
display: grid;
}
.recipe-studio-nav {
overflow-x: auto;
padding-bottom: 0.25rem;
}
.recipe-studio-live-actions .btn,
.recipe-studio-nav .btn {
min-height: 2.8rem;
}
}
.recipe-studio-live-card-plan {
display: grid;
gap: 0.25rem;
}
.recipe-studio-live-card-flag {
padding: 0.35rem 0.55rem;
border-radius: 0.7rem;
border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
font-size: 0.82rem;
font-weight: 620;
}
.recipe-studio-live-card-flag.tone-warning {
border-color: color-mix(in srgb, var(--color-warning, #d38a3d) 48%, transparent);
background: color-mix(in srgb, var(--color-warning, #d38a3d) 14%, transparent);
}
.recipe-studio-live-card-flag.tone-danger {
border-color: color-mix(in srgb, var(--color-danger, #c74848) 48%, transparent);
background: color-mix(in srgb, var(--color-danger, #c74848) 14%, transparent);
}
.recipe-studio-swap-form {
display: grid;
gap: 0.55rem;
padding-top: 0.55rem;
border-top: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
}
.seat-day-pills {
display: flex;
gap: 0.4rem;
overflow-x: auto;
padding-bottom: 0.15rem;
scrollbar-width: none;
}
.seat-day-pills::-webkit-scrollbar {
display: none;
}
.seat-day-pill {
flex: 0 0 auto;
min-height: 44px;
min-width: 4rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 0.9rem;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-card);
color: var(--text-primary);
text-decoration: none;
font-weight: 620;
font-size: 0.88rem;
}
.seat-day-pill.is-active {
border-color: color-mix(in srgb, var(--accent-primary), transparent 35%);
background: color-mix(in srgb, var(--accent-primary), transparent 85%);
}
@media (max-width: 768px) {
[data-recipe-studio-tab-button="recipes"],
[data-recipe-studio-tab-button="stations"],
[data-recipe-studio-tab-button="automation"],
[data-recipe-studio-tab-button="simulation"] {
display: none;
}
.recipe-studio-alerts {
position: sticky;
top: 0;
z-index: 25;
margin: -1rem -1rem 0.75rem;
padding: 0.5rem 0.75rem;
width: calc(100% + 2rem);
background: color-mix(in srgb, var(--color-surface) 96%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
}
.recipe-studio-live-card {
gap: 0.45rem;
padding: 0.8rem;
}
.recipe-studio-live-actions {
gap: 0.4rem;
}
.recipe-studio-live-actions .btn {
flex: 1 1 auto;
min-width: 5rem;
}
.recipe-studio-live-card-plan {
font-size: 0.8rem;
}
.recipe-studio-swap-form .recipe-studio-inline-form {
grid-template-columns: 1fr;
align-items: stretch;
}
body[data-app-surface="items"] .gm-surface-drawer__panel {
position: fixed;
inset: 0;
width: 100%;
max-width: 100%;
border-radius: 0;
padding-bottom: calc(1rem + var(--sab));
}
.items-pagination {
position: sticky;
bottom: calc(5.4rem + var(--sab));
z-index: 15;
padding: 0.5rem;
margin: 0 -1rem -1rem;
background: color-mix(in srgb, var(--color-surface) 98%, transparent);
border-top: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
}
.seat-manual-form .btn-primary {
width: 100%;
}
.seat-assignment-card {
border-left: 3px solid var(--border);
}
.seat-assignment-card[data-scanned="true"] {
border-left-color: var(--success, #22c55e);
}
.seat-assignment-card[data-scanned="false"] {
border-left-color: var(--danger, #ef4444);
}
}
.workshop-studio-shell {
display: grid;
gap: 1rem;
}
.workshop-studio-topbar,
.workshop-studio-panel-head,
.workshop-studio-inline-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.9rem;
}
.workshop-studio-eyebrow {
margin: 0 0 0.25rem;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.workshop-studio-stats,
.workshop-studio-kpis,
.workshop-studio-nav,
.workshop-studio-alerts,
.workshop-studio-chip-row,
.workshop-studio-live-actions {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.workshop-studio-kpis .stat-card {
min-width: 12rem;
flex: 1;
}
.workshop-studio-alert {
padding: 0.75rem 0.9rem;
border-radius: 0.9rem;
border: 1px solid color-mix(in srgb, var(--color-warning, #d38a3d) 50%, transparent);
background: color-mix(in srgb, var(--color-warning, #d38a3d) 12%, transparent);
}
.workshop-studio-panels,
.workshop-studio-grid,
.workshop-studio-grid-wide,
.workshop-studio-subgrid,
.workshop-studio-live-list,
.workshop-studio-automation-side {
display: grid;
gap: 1rem;
}
.workshop-studio-grid {
grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 1fr);
}
.workshop-studio-grid-wide {
grid-template-columns: minmax(0, 1.15fr) minmax(19rem, 0.85fr);
}
.workshop-studio-subgrid {
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.workshop-studio-panel,
.workshop-studio-form,
.workshop-studio-list,
.workshop-studio-action-detail {
display: grid;
gap: 0.9rem;
}
.workshop-studio-list-card,
.workshop-studio-live-card {
display: grid;
gap: 0.75rem;
padding: 1rem;
border-radius: 1rem;
border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
background: color-mix(in srgb, var(--color-surface) 94%, transparent);
}
.workshop-studio-live-card.tone-danger {
border-color: color-mix(in srgb, var(--color-danger, #cf4b4b) 50%, transparent);
}
.workshop-studio-live-card.tone-warning {
border-color: color-mix(in srgb, var(--color-warning, #d38a3d) 50%, transparent);
}
.workshop-studio-live-card.tone-success {
border-color: color-mix(in srgb, var(--color-success, #2f9e68) 45%, transparent);
}
.workshop-studio-list-card.is-selected {
border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.workshop-studio-inline-form {
display: grid;
grid-template-columns: minmax(11rem, 1fr) auto;
gap: 0.6rem;
}
.workshop-studio-live-card-header,
.workshop-studio-schedule-meta,
.workshop-studio-feedback-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
flex-wrap: wrap;
}
.workshop-studio-live-card-title-group {
display: grid;
gap: 0.2rem;
}
.workshop-studio-live-card-context,
.workshop-studio-live-card-host {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
color: var(--color-text-muted);
font-size: 0.86rem;
}
.workshop-studio-live-actions form,
.workshop-studio-schedule-actions,
.workshop-studio-feedback-mobile form {
display: grid;
}
.workshop-studio-live-actions {
align-items: stretch;
}
.workshop-studio-delay-form,
.workshop-studio-reassign-form {
display: grid;
gap: 0.55rem;
grid-template-columns: minmax(0, 1fr) auto;
}
.workshop-studio-schedule-mobile,
.workshop-studio-feedback-mobile {
display: none;
}
.workshop-studio-location-group,
.workshop-studio-location-group-list {
display: grid;
gap: 0.75rem;
}
.workshop-studio-schedule-card,
.workshop-studio-feedback-card {
display: grid;
gap: 0.7rem;
}
.workshop-studio-feedback-card.is-flagged {
border-color: color-mix(in srgb, var(--color-warning, #d38a3d) 55%, transparent);
}
.workshop-studio-toggle {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 2.5rem;
}
.workshop-studio-mini-list {
margin: 0;
padding-left: 1rem;
}
.workshop-studio-code {
overflow-x: auto;
padding: 0.9rem;
border-radius: 0.9rem;
background: color-mix(in srgb, var(--color-surface-raised) 92%, black 8%);
font-size: 0.8rem;
}
@media (max-width: 980px) {
.workshop-studio-grid,
.workshop-studio-grid-wide {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.workshop-studio-topbar,
.workshop-studio-panel-head,
.workshop-studio-inline-head,
.workshop-studio-inline-form {
grid-template-columns: 1fr;
display: grid;
}
.workshop-studio-nav {
overflow-x: auto;
padding-bottom: 0.25rem;
}
.workshop-studio-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.workshop-studio-kpis {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
.workshop-studio-kpis .stat-card {
min-width: 0;
padding: 0.6rem;
}
.workshop-studio-kpis .stat-value {
font-size: 1.15rem;
}
.workshop-studio-kpis .stat-label {
font-size: 0.72rem;
}
[data-workshop-studio-tab-button="hosting"],
[data-workshop-studio-tab-button="automation"] {
display: none;
}
.workshop-studio-schedule-desktop,
.workshop-studio-feedback-desktop {
display: none;
}
.workshop-studio-schedule-mobile,
.workshop-studio-feedback-mobile {
display: grid;
gap: 0.85rem;
}
.workshop-studio-live-card {
padding: 0.75rem;
}
.workshop-studio-live-card-context,
.workshop-studio-live-card-host,
.workshop-studio-schedule-meta,
.workshop-studio-feedback-meta {
font-size: 0.82rem;
}
.workshop-studio-live-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.4rem;
margin-top: 0.5rem;
}
.workshop-studio-live-actions form,
.workshop-studio-live-actions .btn {
width: 100%;
}
.workshop-studio-delay-form,
.workshop-studio-reassign-form {
grid-column: 1 / -1;
}
.workshop-studio-live-actions .btn,
.workshop-studio-nav .btn {
min-height: 2.8rem;
}
}
.library-studio-shell {
display: grid;
gap: 1rem;
}
.library-studio-topbar,
.library-studio-panel-head,
.library-studio-inline-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.9rem;
}
.library-studio-eyebrow {
margin: 0 0 0.25rem;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.library-studio-stats,
.library-studio-kpis,
.library-studio-nav,
.library-studio-alerts,
.library-studio-chip-row,
.library-studio-live-actions {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.library-studio-kpis .stat-card {
min-width: 12rem;
flex: 1;
}
.library-studio-alert {
padding: 0.75rem 0.9rem;
border-radius: 0.9rem;
border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
background: color-mix(in srgb, var(--color-surface-raised) 92%, transparent);
}
.library-studio-alert.tone-warning {
border-color: color-mix(in srgb, var(--color-warning, #d38a3d) 50%, transparent);
background: color-mix(in srgb, var(--color-warning, #d38a3d) 12%, transparent);
}
.library-studio-alert.tone-danger {
border-color: color-mix(in srgb, var(--color-danger, #bf3f4c) 50%, transparent);
background: color-mix(in srgb, var(--color-danger, #bf3f4c) 12%, transparent);
}
.library-studio-panels,
.library-studio-grid,
.library-studio-grid-wide,
.library-studio-subgrid,
.library-studio-live-list,
.library-studio-automation-side {
display: grid;
gap: 1rem;
}
.library-studio-grid {
grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 1fr);
}
.library-studio-grid-wide {
grid-template-columns: minmax(0, 1.15fr) minmax(19rem, 0.85fr);
}
.library-studio-subgrid {
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.library-studio-panel,
.library-studio-form,
.library-studio-list,
.library-studio-action-detail {
display: grid;
gap: 0.9rem;
}
.library-studio-list-card,
.library-studio-live-card {
display: grid;
gap: 0.75rem;
padding: 1rem;
border-radius: 1rem;
border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
background: color-mix(in srgb, var(--color-surface) 94%, transparent);
}
.library-studio-live-card.tone-danger,
.library-queue-card.tone-danger {
border-color: color-mix(in srgb, var(--color-danger, #bf3f4c) 50%, transparent);
}
.library-queue-card.tone-warning {
border-color: color-mix(in srgb, var(--color-warning, #d38a3d) 50%, transparent);
}
.library-studio-list-card.is-selected {
border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.library-studio-inline-form {
display: grid;
grid-template-columns: minmax(11rem, 1fr) auto;
gap: 0.6rem;
}
.library-studio-alerts {
position: sticky;
top: 0;
z-index: 25;
background: color-mix(in srgb, var(--color-surface) 96%, transparent);
padding: 0.1rem 0 0.2rem;
}
.library-studio-nav .tab-badge {
min-width: 18px;
height: 18px;
border-radius: 999px;
background: var(--danger, #ef4444);
color: #fff;
font-size: 0.65rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 0.35rem;
padding: 0 0.2rem;
}
.library-queue-card,
.library-queue-card-actions,
.library-queue-card-route-form,
.library-session-card-actions,
.library-session-card-heading-meta {
display: grid;
gap: 0.55rem;
}
.library-queue-card,
.library-studio-queue-mobile {
gap: 0.75rem;
}
.library-queue-card-header,
.library-queue-card-meta,
.library-session-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
flex-wrap: wrap;
}
.library-queue-card-meta,
.library-session-card-heading-meta {
color: var(--color-text-muted);
font-size: 0.82rem;
}
.library-queue-card-sla {
font-size: 0.82rem;
font-weight: 620;
}
.library-session-countdown {
font-weight: 700;
font-size: 0.88rem;
}
.library-session-countdown.is-overdue {
color: var(--danger, #ef4444);
}
.library-studio-queue-mobile {
display: none;
}
.library-studio-toggle {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 2.5rem;
}
.library-studio-mini-list {
margin: 0;
padding-left: 1rem;
}
.library-studio-code {
overflow-x: auto;
padding: 0.9rem;
border-radius: 0.9rem;
background: color-mix(in srgb, var(--color-surface-raised) 92%, black 8%);
font-size: 0.8rem;
}
@media (max-width: 980px) {
.library-studio-grid,
.library-studio-grid-wide {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.library-studio-topbar,
.library-studio-panel-head,
.library-studio-inline-head,
.library-studio-inline-form {
grid-template-columns: 1fr;
display: grid;
}
.library-studio-nav {
overflow-x: auto;
padding-bottom: 0.25rem;
}
.library-studio-alerts {
margin: -1rem -1rem 0.75rem;
padding: 0.6rem 0.75rem;
width: calc(100% + 2rem);
border-bottom: 1px solid var(--color-border);
}
[data-living-library-studio-tab-button="catalog"],
[data-living-library-studio-tab-button="intake"] {
display: none;
}
.library-studio-queue-desktop {
display: none;
}
.library-studio-queue-mobile {
display: grid;
}
.library-queue-card {
display: grid;
gap: 0.4rem;
padding: 0.75rem;
border-radius: 1rem;
background: color-mix(in srgb, var(--color-surface) 94%, transparent);
}
.library-queue-card-actions {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.25rem;
}
.library-queue-card-actions form,
.library-queue-card-actions .btn {
width: 100%;
}
.library-queue-card-route-form {
width: 100%;
grid-template-columns: minmax(0, 1fr) auto;
}
.library-session-card-actions {
display: grid;
grid-template-columns: 1fr;
}
.library-studio-live-actions .btn,
.library-studio-nav .btn {
min-height: 2.8rem;
}
}
.questions-studio-shell {
display: grid;
gap: 1rem;
}
.questions-studio-nav .tab-badge {
min-width: 18px;
height: 18px;
border-radius: 999px;
background: var(--danger, #ef4444);
color: #fff;
font-size: 0.65rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 0.35rem;
padding: 0 0.2rem;
}
.questions-studio-topbar,
.questions-studio-panel-head,
.questions-studio-inline-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.9rem;
}
.questions-studio-eyebrow {
margin: 0 0 0.25rem;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.questions-studio-stats,
.questions-studio-kpis,
.questions-studio-nav,
.questions-studio-chip-row,
.questions-studio-live-actions {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.questions-studio-kpis .stat-card {
min-width: 12rem;
flex: 1;
}
.questions-studio-panels,
.questions-studio-grid,
.questions-studio-grid-wide,
.questions-studio-subgrid {
display: grid;
gap: 1rem;
}
.questions-studio-grid {
grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 1fr);
}
.questions-studio-grid-wide {
grid-template-columns: minmax(0, 1.16fr) minmax(20rem, 0.84fr);
}
.questions-studio-subgrid {
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.questions-studio-panel,
.questions-studio-form,
.questions-studio-list,
.questions-studio-action-detail {
display: grid;
gap: 0.9rem;
}
.questions-studio-list-card,
.questions-studio-thread-card {
display: grid;
gap: 0.75rem;
padding: 1rem;
border-radius: 1rem;
border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
background: color-mix(in srgb, var(--color-surface) 94%, transparent);
}
.questions-studio-list-card.is-selected {
border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.questions-studio-thread-card[data-thread-state="pending"] {
border-left: 3px solid color-mix(in srgb, var(--color-primary) 70%, transparent);
}
.questions-studio-thread-text {
margin: 0.3rem 0 0;
font-weight: 600;
}
.questions-studio-filterbar {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
gap: 0.8rem;
align-items: end;
}
.questions-studio-filter-field {
display: grid;
gap: 0.35rem;
}
.questions-studio-filter-details {
padding: 0;
}
.questions-studio-filter-details > summary .subtitle {
margin-left: auto;
}
.questions-studio-inline-form {
display: grid;
grid-template-columns: minmax(11rem, 1fr) minmax(9rem, 12rem) minmax(8rem, 1fr) auto;
gap: 0.6rem;
}
.questions-studio-toggle {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 2.5rem;
}
.questions-studio-sortable-list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.6rem;
}
.questions-studio-sortable-item {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 0.6rem;
align-items: center;
padding: 0.75rem;
border-radius: 0.8rem;
border: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
background: color-mix(in srgb, var(--color-surface-raised) 90%, transparent);
}
.questions-studio-sortable-handle {
align-self: stretch;
}
.questions-studio-mini-list {
margin: 0;
padding-left: 1rem;
}
.questions-studio-code {
overflow-x: auto;
padding: 0.9rem;
border-radius: 0.9rem;
background: color-mix(in srgb, var(--color-surface-raised) 92%, black 8%);
font-size: 0.8rem;
}
.questions-studio-insight-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
gap: 0.7rem;
}
.questions-studio-insight-card {
display: grid;
gap: 0.15rem;
padding: 0.85rem;
border-radius: 0.9rem;
border: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
background: color-mix(in srgb, var(--color-surface) 94%, transparent);
}
.questions-studio-insight-card.tone-warning {
border-color: color-mix(in srgb, var(--color-warning, #d38a3d) 50%, transparent);
}
.questions-studio-insight-card.tone-danger {
border-color: color-mix(in srgb, var(--color-danger, #bf3f4c) 50%, transparent);
}
.questions-studio-insight-value {
font-size: 1.3rem;
font-weight: 700;
}
.questions-studio-insight-label {
color: var(--color-text-muted);
font-size: 0.85rem;
}
.question-gm-list {
display: grid;
gap: 0.9rem;
}
.question-gm-pending-bar {
position: sticky;
top: 0;
z-index: 20;
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
padding: 0.65rem 0.85rem;
margin-bottom: 0.75rem;
background: color-mix(in srgb, var(--color-surface) 96%, transparent);
border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
border-radius: 0.95rem;
backdrop-filter: blur(10px);
}
.question-gm-card,
.question-gm-responses,
.question-gm-response-card {
display: grid;
gap: 0.65rem;
}
.question-gm-card-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 0.65rem;
}
.question-gm-card-state {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem;
}
.question-gm-card-text {
margin: 0;
font-size: 1.03rem;
line-height: 1.55;
font-weight: 620;
}
.question-gm-card-actions {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.question-gm-card-actions .inline-form {
flex: 1 1 8.5rem;
}
.question-gm-card-actions .btn {
width: 100%;
min-width: 8.5rem;
}
.question-gm-card-meta {
display: flex;
flex-wrap: wrap;
gap: 0.45rem 0.7rem;
font-size: 0.8rem;
}
.question-gm-card[data-question-state="pending"] {
border-left: 3px solid color-mix(in srgb, var(--color-primary) 70%, transparent);
}
.question-gm-card[data-question-state="active"] {
opacity: 0.86;
}
.question-gm-card[data-question-state="removed"] {
opacity: 0.68;
}
.question-gm-responses-toggle > summary {
cursor: pointer;
font-weight: 620;
color: var(--color-text-muted);
}
.question-gm-responses {
margin-top: 0.75rem;
}
.question-gm-response-card {
padding: 0.85rem;
border-radius: 0.9rem;
border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
background: color-mix(in srgb, var(--color-surface) 94%, transparent);
}
@media (max-width: 1080px) {
.questions-studio-grid,
.questions-studio-grid-wide,
.questions-studio-filterbar {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.questions-studio-topbar,
.questions-studio-panel-head,
.questions-studio-inline-head,
.questions-studio-inline-form {
display: grid;
grid-template-columns: 1fr;
}
.questions-studio-nav {
padding-bottom: 0.2rem;
}
.questions-studio-nav .btn,
.questions-studio-live-actions .btn {
min-height: 2.8rem;
}
body[data-app-surface="questions-studio"] [data-questions-studio-tab-button="display"],
body[data-app-surface="questions-studio"] [data-questions-studio-tab-button="insights"],
body[data-app-surface="questions-studio"] [data-questions-studio-panel="display"],
body[data-app-surface="questions-studio"] [data-questions-studio-panel="insights"] {
display: none !important;
}
.questions-studio-thread-text {
font-size: 1rem;
line-height: 1.45;
}
.questions-studio-live-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.questions-studio-live-actions form,
.questions-studio-live-actions .btn {
width: 100%;
}
.question-gm-pending-bar {
top: 0.45rem;
margin-bottom: 0.6rem;
padding: 0.55rem 0.7rem;
}
.question-gm-card {
padding: 0.7rem 0.75rem;
}
.question-gm-card-head {
grid-template-columns: 1fr;
}
.question-gm-card-text {
font-size: 1rem;
line-height: 1.4;
margin-bottom: 0.1rem;
}
.question-gm-card-actions .btn {
flex: 1 1 0;
min-height: 44px;
min-width: 0;
justify-content: center;
}
.question-gm-card-meta {
gap: 0.35rem;
font-size: 0.75rem;
}
.question-gm-responses {
margin-top: 0.5rem;
}
}
.skills-studio-shell {
display: grid;
gap: 1rem;
}
.skills-studio-topbar,
.skills-studio-panel-head,
.skills-studio-inline-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.9rem;
}
.skills-studio-eyebrow {
margin: 0 0 0.25rem;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.skills-studio-stats,
.skills-studio-kpis,
.skills-studio-nav,
.skills-studio-chip-row,
.skills-studio-toggle-row {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.skills-studio-mobile-match-list,
.skills-studio-live-alerts {
display: grid;
gap: 0.9rem;
}
.skills-studio-kpis .stat-card {
min-width: 12rem;
flex: 1;
}
.skills-studio-panels,
.skills-studio-grid,
.skills-studio-grid-wide,
.skills-studio-subgrid,
.skills-studio-automation-side,
.skills-studio-card-grid {
display: grid;
gap: 1rem;
}
.skills-studio-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.skills-studio-grid-wide {
grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.9fr);
}
.skills-studio-card-grid {
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.skills-studio-panel,
.skills-studio-form,
.skills-studio-list,
.skills-studio-action-detail,
.skills-studio-filters {
display: grid;
gap: 0.9rem;
}
.skills-studio-list-card,
.skills-studio-live-card {
display: grid;
gap: 0.75rem;
padding: 1rem;
border-radius: 1rem;
border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
background: color-mix(in srgb, var(--color-surface) 94%, transparent);
}
.skills-studio-category-card,
.skills-studio-match-card,
.skills-studio-intake-card,
.skills-studio-backup-card {
position: relative;
}
.skills-studio-list-card.is-selected {
border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.skills-studio-inline-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
gap: 0.6rem;
}
.skills-studio-balance-meter {
position: relative;
overflow: hidden;
height: 0.7rem;
border-radius: 999px;
background: color-mix(in srgb, var(--color-surface-raised) 92%, black 8%);
border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
}
.skills-studio-balance-meter-fill {
display: block;
height: 100%;
min-width: 0.7rem;
border-radius: inherit;
background: color-mix(in srgb, var(--color-primary) 70%, white 10%);
}
.skills-studio-balance-meter-fill.tone-warning {
background: color-mix(in srgb, var(--color-warning) 72%, white 8%);
}
.skills-studio-balance-meter-fill.tone-danger {
background: color-mix(in srgb, var(--color-danger) 70%, white 8%);
}
.skills-studio-balance-meter-fill.tone-success {
background: color-mix(in srgb, var(--color-success) 70%, white 8%);
}
.skills-studio-balance-meter-fill.tone-draft {
background: color-mix(in srgb, var(--color-border-strong) 68%, white 8%);
}
.skills-studio-toggle {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 2.5rem;
}
.skills-studio-mini-list {
margin: 0;
padding-left: 1rem;
}
.skills-studio-code {
overflow-x: auto;
padding: 0.9rem;
border-radius: 0.9rem;
background: color-mix(in srgb, var(--color-surface-raised) 92%, black 8%);
font-size: 0.8rem;
}
.skills-studio-filters {
border: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
}
.skills-studio-mobile-match-list {
display: none;
}
.skills-studio-nav .tab-badge {
margin-left: 0.4rem;
}
@media (max-width: 980px) {
.skills-studio-grid,
.skills-studio-grid-wide {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.skills-studio-stats,
.skills-studio-nav {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 0.25rem;
scrollbar-width: thin;
}
.skills-studio-stats > *,
.skills-studio-nav > * {
flex: 0 0 auto;
}
.skills-studio-kpis {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.skills-studio-kpis .stat-card {
min-width: 0;
}
.skills-studio-topbar,
.skills-studio-panel-head,
.skills-studio-inline-head,
.skills-studio-inline-form {
display: grid;
grid-template-columns: 1fr;
}
.skills-studio-nav .btn,
.skills-studio-inline-form .btn {
min-height: 2.8rem;
}
.skills-studio-nav [data-skills-studio-tab-button="planner"],
.skills-studio-nav [data-skills-studio-tab-button="exams"] {
display: none;
}
[data-skills-studio-panel="planner"],
[data-skills-studio-panel="exams"] {
display: none;
}
.skills-studio-mobile-match-list {
display: grid;
}
.skills-studio-mobile-match-list + .card .table-scroll {
display: none;
}
.skills-studio-live-alerts {
order: -2;
}
.skills-studio-live-grid {
gap: 0.9rem;
}
.skills-studio-intake-card,
.skills-studio-backup-card,
.skills-studio-match-card {
padding: 0.9rem;
}
}
.studio-workspace-shell {
display: grid;
gap: 1rem;
}
.studio-workspace-topbar {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.studio-workspace-eyebrow {
margin: 0 0 0.25rem;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.studio-workspace-stats,
.studio-workspace-kpis,
.studio-workspace-alerts,
.studio-workspace-nav {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.studio-workspace-kpis .stat-card {
display: grid;
gap: 0.35rem;
min-width: 12rem;
flex: 1 1 12rem;
}
.studio-workspace-alerts {
display: grid;
}
.studio-workspace-alert {
padding: 0.75rem 0.95rem;
border-radius: 0.9rem;
border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
background: color-mix(in srgb, var(--color-surface) 94%, transparent);
}
.studio-workspace-alert.tone-warning {
border-color: color-mix(in srgb, var(--color-warning, #d38a3d) 50%, transparent);
background: color-mix(in srgb, var(--color-warning, #d38a3d) 12%, transparent);
}
.studio-workspace-alert.tone-danger {
border-color: color-mix(in srgb, var(--color-danger, #cf4b4b) 50%, transparent);
background: color-mix(in srgb, var(--color-danger, #cf4b4b) 12%, transparent);
}
.studio-workspace-nav .tab-badge {
margin-left: 0.4rem;
}
.studio-workspace-panels {
display: grid;
gap: 1rem;
}
.studio-workspace-panels > [data-studio-panel][hidden] {
display: none !important;
}
@media (max-width: 760px) {
.studio-workspace-topbar {
display: grid;
grid-template-columns: 1fr;
}
.studio-workspace-stats,
.studio-workspace-nav {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 0.25rem;
scrollbar-width: thin;
}
.studio-workspace-stats > *,
.studio-workspace-nav > * {
flex: 0 0 auto;
}
.studio-workspace-kpis {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
.studio-workspace-kpis .stat-card {
min-width: 0;
}
}
.profile-inventory-grid {
display: grid;
gap: 0.65rem;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.profile-inventory-item {
text-align: center;
}
.profile-inventory-icon {
font-size: 1.35rem;
line-height: 1;
margin-bottom: 0.45rem;
}
.profile-achievement-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.55rem;
}
.profile-achievement-list li {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.55rem;
align-items: center;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-card), black 5%);
padding: 0.52rem 0.6rem;
}
.profile-achievement-grid {
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 0.65rem;
}
.profile-achievement-grid li {
align-items: flex-start;
}
.achievement-tier-bronze {
border-color: rgba(205, 127, 50, 0.45);
}
.achievement-tier-silver {
border-color: rgba(192, 192, 192, 0.5);
}
.achievement-tier-gold {
border-color: rgba(255, 215, 0, 0.5);
}
.achievement-tier-legendary {
border-color: color-mix(in srgb, var(--accent-primary), #ffd700 35%);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary), transparent 65%);
}
.achievement-locked {
opacity: 0.82;
}
.achievement-unlocked {
opacity: 1;
}
.progress-track {
height: 6px;
margin-top: 0.35rem;
border-radius: 999px;
background: color-mix(in srgb, var(--bg-secondary), black 7%);
overflow: hidden;
}
.progress-fill {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, color-mix(in srgb, var(--accent-primary), white 20%), var(--accent-primary));
}
.profile-connection-list {
display: grid;
gap: 0.7rem;
}
.profile-connection-row {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-card), black 4%);
padding: 0.62rem 0.7rem;
display: grid;
gap: 0.5rem;
}
.profile-connection-row.is-seen {
opacity: 0.72;
}
.profile-connection-head {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.6rem;
align-items: center;
}
.profile-connection-head .profile-photo {
width: 44px;
height: 44px;
margin: 0;
}
.profile-journey-card {
border-color: color-mix(in srgb, var(--accent-primary), var(--border) 68%);
}
.profile-journey-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.5rem;
}
.profile-journey-row {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-card), black 4%);
padding: 0.55rem 0.65rem;
display: flex;
justify-content: space-between;
gap: 0.5rem;
align-items: center;
}
.threshold-page {
min-height: 100svh;
margin: 0;
display: grid;
place-items: center;
background: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--accent-primary), transparent 86%), transparent 50%),
linear-gradient(180deg, #090b17 0%, #06070f 100%);
color: var(--text-primary);
}
.threshold-shell {
width: min(100%, 780px);
padding: 1rem;
}
.threshold-card {
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card), black 4%);
box-shadow: var(--shadow-lg);
padding: clamp(1rem, 3vw, 2rem);
display: grid;
gap: 0.75rem;
}
.threshold-kicker {
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 0.75rem;
color: var(--text-muted);
margin: 0;
}
.threshold-message {
line-height: 1.6;
color: var(--text-secondary);
margin: 0;
}
.threshold-reflection {
min-height: 120px;
}
.threshold-reflection-display {
margin: 0;
border-left: 3px solid color-mix(in srgb, var(--accent-primary), white 10%);
padding: 0.5rem 0 0.5rem 0.75rem;
color: var(--text-secondary);
}
.threshold-page.threshold-minimal {
background: linear-gradient(180deg, #10141f 0%, #060810 100%);
}
.threshold-page.threshold-dawn {
background: radial-gradient(circle at 24% 0%, rgba(231, 179, 93, 0.22), transparent 50%),
linear-gradient(180deg, #17131b 0%, #0c0a11 100%);
}
.threshold-page.threshold-fire {
background: radial-gradient(circle at 76% 10%, rgba(230, 101, 66, 0.24), transparent 46%),
linear-gradient(180deg, #1c0d10 0%, #090709 100%);
}
.threshold-page.threshold-stone {
background: radial-gradient(circle at 12% 0%, rgba(98, 120, 163, 0.18), transparent 50%),
linear-gradient(180deg, #0d1021 0%, #070914 100%);
}
.threshold-page.threshold-crossed .threshold-card {
border-color: color-mix(in srgb, var(--success), transparent 40%);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--success), transparent 75%);
}
.badge-connection-page {
max-width: 760px;
}
.badge-connection-identity {
text-align: center;
display: grid;
gap: 0.35rem;
}
.badge-connection-identity .profile-photo {
margin: 0 auto;
}
.badge-connection-prompt {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-secondary), black 3%);
padding: 0.7rem;
}
.badge-connection-prompt blockquote {
margin: 0.4rem 0 0;
padding-left: 0.65rem;
border-left: 3px solid color-mix(in srgb, var(--accent-primary), white 10%);
color: var(--text-secondary);
line-height: 1.5;
}
.badge-connection-facts summary {
cursor: pointer;
}
.badge-connection-facts ul {
margin-top: 0.45rem;
padding-left: 1.2rem;
color: var(--text-secondary);
}
.badge-connection-prompt-stage {
--prompt-accent: var(--accent-primary);
border: 1px solid color-mix(in srgb, var(--prompt-accent), transparent 45%);
border-radius: 14px;
padding: 0.9rem;
background:
radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--prompt-accent), transparent 80%), transparent 55%),
linear-gradient(160deg, color-mix(in srgb, var(--prompt-accent), transparent 88%), color-mix(in srgb, var(--bg-card), black 6%));
display: grid;
gap: 0.65rem;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--prompt-accent), transparent 86%);
transition: padding 220ms ease, opacity 220ms ease;
}
.badge-connection-prompt-stage.is-rested {
padding: 0.72rem;
}
.badge-connection-prompt-quote-wrap {
text-align: center;
display: grid;
gap: 0.35rem;
}
.badge-connection-prompt-label {
margin: 0;
font-size: 0.76rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
}
.badge-connection-prompt-quote {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.05rem, 4vw, 1.45rem);
line-height: 1.35;
color: color-mix(in srgb, var(--text-primary), white 6%);
text-wrap: balance;
}
.badge-connection-prompt-instruction {
margin: 0;
font-size: 0.76rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: color-mix(in srgb, var(--prompt-accent), white 25%);
}
.badge-connection-memorable-btn {
justify-self: center;
}
.badge-graph-shell {
margin-top: 0.75rem;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-secondary), black 7%);
padding: 0.6rem;
}
.badge-graph-canvas {
width: 100%;
min-height: 360px;
display: block;
}
.badge-graph-status {
margin-top: 0.45rem;
}
.faction-page {
max-width: 900px;
}
.faction-header-card {
--faction-color: var(--accent-primary);
border-color: color-mix(in srgb, var(--faction-color), var(--border) 68%);
}
.faction-header-card h1 {
color: var(--faction-color);
}
#faction-ranking-strip .card {
margin-bottom: 0.8rem;
}
.faction-standing-total {
margin-top: 0.5rem;
font-size: clamp(1.6rem, 6vw, 2.2rem);
line-height: 1.1;
font-weight: 800;
}
.faction-standings-list {
margin-top: 0.75rem;
display: grid;
gap: 0.45rem;
}
.faction-standing-row {
display: grid;
gap: 0.35rem;
}
.faction-standing-row.is-current {
padding: 0.35rem 0.45rem;
border-radius: var(--radius-sm);
border: 1px solid color-mix(in srgb, var(--accent-primary), var(--border) 55%);
background: color-mix(in srgb, var(--bg-card), var(--accent-primary) 8%);
}
.faction-standing-meta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
}
.faction-standing-bar-track {
width: 100%;
height: 8px;
border-radius: 999px;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-secondary), black 5%);
overflow: hidden;
}
.faction-standing-bar-fill {
height: 100%;
min-width: 0;
border-radius: 999px;
}
.faction-message-list {
margin-top: 0.65rem;
display: grid;
gap: 0.65rem;
}
.faction-message-item {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-card), black 4%);
padding: 0.62rem 0.7rem;
display: grid;
gap: 0.35rem;
}
.faction-message-item header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.faction-message-item p {
color: var(--text-secondary);
line-height: 1.5;
}
.faction-command-fab {
position: fixed;
right: max(0.9rem, var(--sar));
bottom: calc(5.5rem + var(--sab));
z-index: 92;
border-radius: 999px;
min-height: 44px;
padding: 0.45rem 0.9rem;
box-shadow: var(--shadow-lg);
}
.faction-command-drawer {
position: fixed;
left: 0.6rem;
right: 0.6rem;
bottom: calc(0.5rem + var(--sab));
z-index: 91;
transform: translateY(10px);
opacity: 0;
transition: transform 180ms ease, opacity 180ms ease;
}
.faction-command-drawer.is-open {
transform: translateY(0);
opacity: 1;
}
.faction-message-item.announcement {
border-color: color-mix(in srgb, var(--accent-primary), var(--border) 40%);
background: color-mix(in srgb, var(--bg-card), var(--accent-primary) 12%);
}
.faction-message-item.pinned {
border-style: dashed;
}
.faction-members-list {
margin-top: 0.65rem;
display: grid;
gap: 0.45rem;
}
.faction-member-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.6rem;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-card), black 4%);
padding: 0.62rem 0.7rem;
}
.faction-member-rank {
min-width: 2.5rem;
color: var(--text-muted);
font-weight: 700;
}
.faction-member-name {
flex: 1 1 auto;
min-width: 0;
font-weight: 600;
}
.faction-member-score {
color: var(--text-secondary);
white-space: nowrap;
}
.faction-studio-page {
display: grid;
gap: 1.25rem;
}
.faction-studio-hero {
display: grid;
gap: 1rem;
grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr);
align-items: stretch;
}
.faction-studio-hero__main {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--accent-primary), transparent 78%), transparent 38%),
linear-gradient(145deg, color-mix(in srgb, var(--bg-card), black 2%), color-mix(in srgb, var(--bg-card), black 10%));
}
.faction-studio-hero__main::after {
content: "";
position: absolute;
inset: auto -12% -35% auto;
width: 220px;
height: 220px;
border-radius: 50%;
background: color-mix(in srgb, var(--accent-primary), transparent 82%);
filter: blur(10px);
pointer-events: none;
}
.faction-studio-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
margin-top: 1rem;
}
.faction-studio-stats {
display: grid;
gap: 0.8rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.faction-studio-stats .stat-card {
justify-content: center;
min-height: 118px;
background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card), white 2%), color-mix(in srgb, var(--bg-card), black 6%));
}
.faction-studio-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
}
.faction-studio-quick-grant {
position: sticky;
top: 0;
z-index: 20;
background:
linear-gradient(180deg, color-mix(in srgb, var(--bg-card), white 1%), color-mix(in srgb, var(--bg-card), black 6%)),
radial-gradient(circle at top right, color-mix(in srgb, var(--accent-primary), transparent 90%), transparent 42%);
}
.faction-studio-quick-grant-form {
display: grid;
gap: 0.65rem;
grid-template-columns: minmax(0, 1.45fr) minmax(90px, 120px) auto;
align-items: center;
}
.faction-studio-quick-grant-form .form-input {
min-width: 0;
}
.faction-studio-ceremony-actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
}
.faction-studio-layout {
display: grid;
gap: 1rem;
grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.95fr);
align-items: start;
}
.faction-studio-grid,
.faction-studio-action-builder-grid {
display: grid;
gap: 1rem;
grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.9fr);
align-items: start;
}
.faction-studio-inline-fields {
display: grid;
gap: 0.8rem;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.faction-studio-identity-form,
.faction-studio-action-form {
display: grid;
gap: 0.9rem;
}
.faction-studio-preview,
.faction-studio-builder-preview {
display: grid;
gap: 0.8rem;
align-content: start;
}
.faction-studio-preview-head {
gap: 0.5rem;
}
.faction-studio-preview__card {
--faction-preview: var(--accent-primary);
border-color: color-mix(in srgb, var(--faction-preview), var(--border) 66%);
box-shadow: 0 16px 40px color-mix(in srgb, var(--faction-preview), transparent 86%);
background:
linear-gradient(160deg, color-mix(in srgb, var(--faction-preview), transparent 90%), transparent 58%),
linear-gradient(180deg, color-mix(in srgb, var(--bg-card), white 2%), color-mix(in srgb, var(--bg-card), black 7%));
}
.faction-studio-preview__card .progress-fill {
background: linear-gradient(90deg, color-mix(in srgb, var(--faction-preview), white 28%), var(--faction-preview));
}
.faction-emblem-picker,
.faction-color-palette,
.faction-studio-chips {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.faction-color-swatch {
width: 2.2rem;
min-width: 2.2rem;
height: 2.2rem;
padding: 0;
border-radius: 999px;
border: 2px solid color-mix(in srgb, var(--swatch-color), white 18%);
background: var(--swatch-color);
}
.faction-color-swatch:focus-visible {
outline: 2px solid color-mix(in srgb, var(--swatch-color), white 35%);
outline-offset: 2px;
}
.faction-studio-delete-form {
margin-top: 0.9rem;
}
.faction-studio-faction-card,
.faction-action-row,
.faction-alert-row,
.faction-balance-card {
border-color: color-mix(in srgb, var(--faction-color, var(--accent-primary)), var(--border) 70%);
background:
linear-gradient(160deg, color-mix(in srgb, var(--faction-color, var(--accent-primary)), transparent 92%), transparent 55%),
linear-gradient(180deg, color-mix(in srgb, var(--bg-card), white 1%), color-mix(in srgb, var(--bg-card), black 6%));
}
.faction-action-row.is-live {
box-shadow: 0 0 0 1px color-mix(in srgb, var(--warning), transparent 55%);
}
.faction-studio-builder-preview,
.faction-action-detail {
border-color: color-mix(in srgb, var(--accent-primary), var(--border) 70%);
background:
linear-gradient(180deg, color-mix(in srgb, var(--bg-card), white 1%), color-mix(in srgb, var(--bg-card), black 7%)),
radial-gradient(circle at top right, color-mix(in srgb, var(--accent-primary), transparent 90%), transparent 42%);
}
.faction-studio-preview-contract {
padding: 0.9rem 1rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card), black 5%);
}
.faction-studio-preview-sequence {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.faction-studio-preview-arrow {
font-size: 1.1rem;
color: var(--text-muted);
}
.faction-studio-balance-grid,
.faction-studio-detail-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.faction-studio-mini-row {
display: grid;
gap: 0.45rem;
}
.faction-studio-code {
margin: 0;
min-height: 220px;
max-height: 420px;
overflow: auto;
padding: 0.9rem 1rem;
border-radius: var(--radius-md);
border: 1px solid var(--border);
background: #09111f;
color: #d8e3ff;
font-size: 0.8rem;
line-height: 1.45;
}
.faction-studio-page .table-wrapper {
overflow-x: auto;
}
.faction-studio-page .table-responsive-cards {
min-width: 100%;
}
.faction-studio-page [data-faction-hidden="true"] {
display: none !important;
}
@media (max-width: 1100px) {
.faction-studio-layout,
.faction-studio-grid,
.faction-studio-action-builder-grid,
.faction-studio-hero {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.faction-studio-stats {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.4rem;
}
.faction-studio-inline-fields {
grid-template-columns: 1fr;
}
.faction-studio-hero {
gap: 0.6rem;
}
.faction-studio-hero__main {
padding: 0.75rem 1rem;
}
.faction-studio-hero__main h2 {
margin: 0;
font-size: 1rem;
}
.faction-studio-hero__main::after,
.faction-studio-hero__main .subtitle {
display: none;
}
.faction-studio-hero__actions {
margin-top: 0.45rem;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}
.faction-studio-page .action-bar {
display: grid;
grid-template-columns: 1fr;
}
.faction-studio-page .action-bar .btn,
.faction-studio-hero__actions .btn {
width: 100%;
justify-content: center;
}
.faction-studio-stats .stat-card {
min-height: auto;
padding: 0.5rem;
}
.faction-studio-stats .stat-value {
font-size: 1.1rem;
}
.faction-studio-stats .stat-label {
font-size: 0.65rem;
}
.faction-studio-tab--desktop {
display: none !important;
}
.faction-studio-quick-grant {
top: 0.35rem;
padding: 0.8rem 0.85rem;
}
.faction-studio-quick-grant-form {
grid-template-columns: minmax(0, 1fr) 88px auto;
}
.faction-studio-ceremony-actions .btn {
width: 100%;
justify-content: center;
}
}
.logbook-page {
display: grid;
gap: var(--space-5);
}
.logbook-hero {
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--accent-warm), transparent 84%), transparent 36%),
color-mix(in srgb, var(--bg-glass), black 6%);
}
.logbook-nudge {
display: grid;
gap: 0.6rem;
}
.logbook-entry-list {
display: grid;
gap: 0.9rem;
}
.logbook-entry {
display: grid;
gap: 0.85rem;
}
.logbook-entry__meta,
.logbook-entry__body {
display: flex;
gap: 0.85rem;
}
.logbook-entry__meta {
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}
.logbook-entry__icon {
width: 2.75rem;
height: 2.75rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
color: var(--text-primary);
background: color-mix(in srgb, var(--bg-secondary), black 10%);
flex: 0 0 auto;
}
.logbook-entry__content {
display: grid;
gap: 0.5rem;
min-width: 0;
}
.logbook-entry__chips {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.logbook-stats {
display: grid;
gap: 0.85rem;
}
.logbook-progress {
position: relative;
overflow: hidden;
height: 9px;
border-radius: 999px;
background: color-mix(in srgb, var(--bg-secondary), white 4%);
}
.logbook-progress__fill {
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, color-mix(in srgb, var(--accent-warm), white 6%), color-mix(in srgb, var(--warning), white 24%));
}
.logbook-load-more {
margin-inline: auto;
}
@media (max-width: 640px) {
.logbook-entry__body {
flex-direction: column;
}
}
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-card), black 4%);
padding: 0.52rem 0.65rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.45rem;
}
.faction-milestone-list {
margin-top: 0.6rem;
display: grid;
gap: 0.5rem;
}
.faction-milestone-row {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-card), black 4%);
padding: 0.6rem 0.7rem;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.65rem;
}
.faction-milestone-row.completed {
border-color: color-mix(in srgb, #22c55e, var(--border) 30%);
}
.qr-layout-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1rem;
align-items: start;
}
.qr-preset-input {
max-width: 180px;
}
.qr-preset-select {
max-width: 220px;
}
.qr-grid-two {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.qr-grid-three {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.qr-summary-page {
display: grid;
gap: 1rem;
}
.qr-summary-hero {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1rem;
background: linear-gradient(135deg, color-mix(in srgb, var(--bg-card), black 3%), color-mix(in srgb, var(--bg-card), var(--accent-primary) 12%));
box-shadow: var(--shadow-sm);
display: grid;
gap: 1rem;
}
.qr-summary-hero.tone-success {
border-color: color-mix(in srgb, #22c55e, var(--border) 35%);
background: linear-gradient(135deg, color-mix(in srgb, var(--bg-card), #22c55e 10%), color-mix(in srgb, var(--bg-card), var(--accent-primary) 10%));
}
.qr-summary-hero.tone-warning {
border-color: color-mix(in srgb, #f59e0b, var(--border) 35%);
background: linear-gradient(135deg, color-mix(in srgb, var(--bg-card), #f59e0b 12%), color-mix(in srgb, var(--bg-card), black 4%));
}
.qr-summary-hero-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
flex-wrap: wrap;
}
.qr-summary-badges {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: flex-end;
}
.qr-summary-eyebrow {
margin: 0 0 0.35rem;
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
}
.qr-summary-facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
}
.qr-summary-fact {
border: 1px solid color-mix(in srgb, var(--border), transparent 10%);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card), black 6%);
padding: 0.85rem 0.9rem;
display: grid;
gap: 0.35rem;
}
.qr-summary-fact.tone-success,
.qr-summary-fact.tone-ready {
border-color: color-mix(in srgb, #22c55e, var(--border) 35%);
}
.qr-summary-fact.tone-warning {
border-color: color-mix(in srgb, #f59e0b, var(--border) 40%);
}
.qr-summary-fact-label {
margin: 0;
font-size: 0.74rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
}
.qr-summary-fact h3,
.qr-summary-attention-item h4,
.qr-summary-next-steps h4 {
margin: 0;
}
.qr-summary-section-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 0.75rem;
flex-wrap: wrap;
}
.qr-summary-attention-card {
display: grid;
gap: 0.85rem;
}
.qr-summary-attention-list {
display: grid;
gap: 0.7rem;
}
.qr-summary-attention-item {
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 0.8rem 0.9rem;
background: color-mix(in srgb, var(--bg-card), black 4%);
display: grid;
gap: 0.25rem;
}
.qr-summary-attention-item.tone-warning {
border-color: color-mix(in srgb, #f59e0b, var(--border) 30%);
background: color-mix(in srgb, #f59e0b, transparent 90%);
}
.qr-summary-attention-item.tone-info {
border-color: color-mix(in srgb, var(--accent-primary), var(--border) 55%);
}
.qr-summary-next-steps {
border-top: 1px solid var(--border);
padding-top: 0.8rem;
display: grid;
gap: 0.55rem;
}
.qr-summary-next-steps ul {
margin: 0;
padding-left: 1.1rem;
display: grid;
gap: 0.35rem;
}
.qr-summary-primary-actions {
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card), black 3%);
padding: 0.75rem;
}
.qr-grid-full {
grid-column: 1 / -1;
}
.qr-toolbar-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr auto;
gap: 0.75rem;
align-items: end;
}
.qr-context-toolbar {
display: grid;
gap: 0.75rem;
}
.qr-toolbar-top {
display: grid;
grid-template-columns: minmax(260px, 1fr) auto;
gap: 0.75rem;
align-items: end;
}
.qr-toolbar-search {
margin-bottom: 0;
}
.qr-status-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
justify-content: flex-end;
}
.qr-toolbar-main {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.qr-list-count {
white-space: nowrap;
}
.qr-more-menu {
position: relative;
}
.qr-more-menu > summary {
list-style: none;
}
.qr-more-menu > summary::-webkit-details-marker {
display: none;
}
.qr-more-panel {
position: absolute;
top: calc(100% + 0.35rem);
right: 0;
z-index: 20;
min-width: min(560px, 96vw);
padding: 0.8rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card), black 4%);
box-shadow: var(--shadow-lg);
display: grid;
gap: 0.65rem;
}
.qr-more-panel h4 {
margin: 0;
font-size: 0.85rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
}
.qr-bulk-context {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.65rem;
flex-wrap: wrap;
}
.qr-bulk-label {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-weight: 700;
color: var(--accent-primary);
}
.qr-mini-preview-img {
width: 60px;
height: 60px;
object-fit: contain;
background: #fff;
border-radius: 8px;
padding: 0.25rem;
border: 1px solid rgba(255, 255, 255, 0.12);
}
.settings-tab-content {
display: grid;
gap: 1rem;
}
.settings-tab-nav {
margin-top: 0.65rem;
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.settings-tab {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 0.35rem 0.7rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
text-decoration: none;
color: var(--text-secondary);
background: color-mix(in srgb, var(--bg-card), black 4%);
font-size: 0.82rem;
font-weight: 700;
}
.settings-tab:hover {
color: var(--text-primary);
border-color: color-mix(in srgb, var(--accent-primary), white 10%);
}
.settings-tab.is-active {
color: var(--text-primary);
border-color: color-mix(in srgb, var(--accent-primary), white 10%);
background: color-mix(in srgb, var(--accent-primary), transparent 78%);
box-shadow: inset 0 0 0 1px rgba(83, 184, 255, 0.24);
}
.settings-section + .settings-section {
border-top: 1px solid var(--border);
padding-top: 1rem;
}
.settings-color-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.settings-color-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.settings-color-row input[type="color"] {
width: 48px;
height: 36px;
border: none;
cursor: pointer;
background: transparent;
border-radius: 6px;
}
.settings-color-row .form-input {
flex: 1;
font-family: var(--font-mono);
}
.settings-color-full {
grid-column: 1 / -1;
}
.settings-preset-grid {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.settings-form-actions {
display: grid;
gap: 0.5rem;
}
.settings-form-actions .btn {
width: 100%;
}
.form-section > summary {
min-height: 44px;
display: flex;
align-items: center;
}
.qr-toolbar-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr auto;
gap: 0.75rem;
align-items: end;
}
.qr-context-toolbar {
display: grid;
gap: 0.75rem;
}
.qr-toolbar-top {
display: grid;
grid-template-columns: minmax(260px, 1fr) auto;
gap: 0.75rem;
align-items: end;
}
.qr-toolbar-search {
margin-bottom: 0;
}
.qr-status-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
justify-content: flex-end;
}
.qr-toolbar-main {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.qr-list-count {
white-space: nowrap;
}
.qr-more-menu {
position: relative;
}
.qr-more-menu > summary {
list-style: none;
}
.qr-more-menu > summary::-webkit-details-marker {
display: none;
}
.qr-more-panel {
position: absolute;
top: calc(100% + 0.35rem);
right: 0;
z-index: 20;
min-width: min(560px, 96vw);
padding: 0.8rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card), black 4%);
box-shadow: var(--shadow-lg);
display: grid;
gap: 0.65rem;
}
.qr-more-panel h4 {
margin: 0;
font-size: 0.85rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
}
.qr-bulk-context {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.65rem;
flex-wrap: wrap;
}
.qr-bulk-label {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-weight: 700;
color: var(--accent-primary);
}
.qr-mini-preview-img {
width: 60px;
height: 60px;
object-fit: contain;
background: #fff;
border-radius: 8px;
padding: 0.25rem;
border: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 1024px) {
.settings-color-row input[type="color"] {
width: 56px;
height: 44px;
}
}
@media (max-width: 768px) {
.settings-tab-nav {
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
padding-bottom: 0.25rem;
}
.settings-form-actions {
position: sticky;
bottom: 0;
z-index: 10;
margin-inline: calc(-1 * var(--space-5));
padding: 0.75rem var(--space-5) max(0.75rem, var(--sab));
border-top: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-primary), black 6%);
}
.settings-tab {
min-width: max-content;
white-space: nowrap;
scroll-snap-align: start;
flex-shrink: 0;
}
.settings-section + .settings-section {
margin-top: 1rem;
}
}
@media (max-width: 480px) {
.settings-color-row {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 400px) {
.settings-preset-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.settings-preset-grid .btn {
width: 100%;
}
}
.qr-mobile-filter-collapse,
.qr-toolbar-mobile {
display: none;
}
.qr-toolbar-mobile-overflow {
position: relative;
}
.qr-toolbar-mobile-overflow > summary {
list-style: none;
}
.qr-toolbar-mobile-overflow > summary::-webkit-details-marker {
display: none;
}
.qr-toolbar-mobile__meta {
display: grid;
gap: 0.15rem;
min-width: 0;
flex: 1 1 auto;
}
.qr-toolbar-mobile__meta .subtitle {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.qr-mini-preview-link {
display: inline-grid;
gap: 0.35rem;
justify-items: center;
text-decoration: none;
color: inherit;
}
@media (max-width: 768px) {
[data-app-surface="qrcodes"] .dashboard-header .subtitle,
[data-app-surface="qrcodes"] .staff-toolbar,
[data-app-surface="qrcodes"] .qr-toolbar-main,
[data-app-surface="qrcodes"] .qr-primary-filter-grid,
[data-app-surface="qrcodes"] .qr-advanced-filters {
display: none;
}
[data-app-surface="qrcodes"] .dashboard-header h1 {
font-size: 1.15rem;
}
.qr-mobile-filter-collapse {
display: block;
}
.qr-mobile-filter-collapse > summary {
min-height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.qr-mobile-filter-form {
display: grid;
gap: 0.65rem;
}
.qr-mobile-filter-advanced {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-card), black 4%);
padding: 0.15rem 0.75rem 0.75rem;
}
.qr-mobile-filter-advanced > summary {
min-height: 44px;
display: flex;
align-items: center;
cursor: pointer;
color: var(--text-secondary);
}
.qr-mobile-filter-advanced__body {
display: grid;
gap: 0.5rem;
}
.qr-toolbar-mobile {
display: flex;
align-items: center;
gap: 0.5rem;
}
.qr-toolbar-mobile-overflow-panel {
position: absolute;
right: 0;
top: calc(100% + 0.35rem);
z-index: 30;
min-width: min(220px, 84vw);
padding: 0.75rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card), black 4%);
box-shadow: var(--shadow-lg);
display: grid;
gap: 0.45rem;
}
.qr-mini-preview-img {
width: 88px;
height: 88px;
}
.qr-list-focus__guidance {
align-items: flex-start;
}
}
[data-selection-mode-default][hidden],
[data-selection-mode-active][hidden],
[data-selection-only][hidden],
[data-browse-only][hidden] {
display: none !important;
}
.qr-list-focus {
display: grid;
gap: 0.85rem;
border: 1px solid color-mix(in srgb, var(--accent-primary), transparent 72%);
background:
radial-gradient(circle at top right, rgba(92, 179, 255, 0.18), transparent 38%),
linear-gradient(135deg, rgba(16, 26, 54, 0.92), rgba(11, 18, 37, 0.96));
}
.qr-list-focus__copy {
display: grid;
gap: 0.35rem;
}
.qr-list-focus__copy .staff-section-title,
.qr-list-focus__copy .subtitle {
margin: 0;
}
.qr-list-focus__meta {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.qr-list-focus__guidance {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
align-items: center;
padding: 0.7rem 0.8rem;
border: 1px solid color-mix(in srgb, var(--warning), transparent 58%);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--warning), transparent 90%);
}
.qr-primary-filter-grid {
display: grid;
grid-template-columns: minmax(240px, 1.6fr) minmax(180px, 0.85fr) auto auto;
gap: 0.75rem;
align-items: end;
}
.qr-filter-summary {
display: grid;
gap: 0.15rem;
align-self: center;
}
.qr-advanced-filters {
border-top: 1px solid var(--border);
padding-top: 0.75rem;
}
.qr-advanced-filters > summary {
list-style: none;
min-height: 44px;
display: inline-flex;
align-items: center;
gap: 0.35rem;
cursor: pointer;
color: var(--text-secondary);
}
.qr-advanced-filters > summary::-webkit-details-marker {
display: none;
}
.qr-advanced-filters__body {
display: grid;
gap: 0.65rem;
max-width: 320px;
padding-top: 0.45rem;
}
.qr-advanced-filters__actions {
display: flex;
justify-content: flex-start;
}
.qr-bulk-heading {
display: grid;
gap: 0.18rem;
}
.qr-bulk-heading .subtitle {
margin: 0;
}
.qr-card-glance {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.55rem;
}
@media (max-width: 1024px) {
.qr-primary-filter-grid {
grid-template-columns: minmax(0, 1.2fr) minmax(180px, 0.8fr);
}
.qr-filter-summary,
.qr-primary-filter-grid .participant-filter-actions {
grid-column: 1 / -1;
}
}
.qr-row-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
flex-wrap: wrap;
}
.qr-row-menu {
position: relative;
}
.qr-row-menu > summary {
list-style: none;
min-width: 42px;
padding-inline: 0.5rem;
}
.qr-row-menu > summary::-webkit-details-marker {
display: none;
}
.qr-row-menu-panel {
position: absolute;
right: 0;
top: calc(100% + 0.25rem);
z-index: 15;
min-width: 150px;
padding: 0.45rem;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-card), black 4%);
display: grid;
gap: 0.35rem;
box-shadow: var(--shadow-md);
}
.qr-row-menu-panel .btn {
width: 100%;
}
.qr-row-menu-panel .inline-form {
width: 100%;
}
.qr-card-actions-primary {
display: inline-flex;
align-items: center;
gap: 0.45rem;
flex-wrap: wrap;
}
.qr-row-more {
margin-top: 0.5rem;
display: none;
}
.qr-row-more > summary {
cursor: pointer;
font-size: 0.75rem;
color: var(--text-secondary);
}
.qr-row-more dl {
margin: 0.5rem 0 0;
display: grid;
gap: 0.35rem;
font-size: 0.78rem;
}
.qr-row-more dt {
font-size: 0.68rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
}
.qr-row-more dd {
margin: 0.1rem 0 0;
}
.qr-grow-input {
margin-bottom: 0;
flex: 1;
min-width: 260px;
}
.qr-preview-wrap {
margin-top: 0.75rem;
display: none;
}
.qr-check-inline {
margin-top: 0.45rem;
}
.qr-code-readonly {
background: var(--bg-secondary);
color: var(--text-muted);
cursor: not-allowed;
}
.qr-json-mono {
font-family: var(--font-mono);
font-size: 0.85rem;
}
.qr-preview-img {
width: 100%;
max-width: 260px;
margin: 0 auto 0.75rem;
background: #fff;
padding: 0.5rem;
border-radius: 8px;
}
.qr-actions-menu {
margin-left: auto;
position: relative;
}
.qr-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8rem;
}
.qr-actions-menu > summary {
list-style: none;
}
.qr-actions-menu > summary::-webkit-details-marker {
display: none;
}
.qr-actions-summary {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-width: 54px;
justify-content: center;
}
.qr-actions-filter {
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
.qr-actions-dots {
font-size: 1.1rem;
line-height: 1;
}
.qr-actions-menu.has-selection .qr-actions-summary {
border-color: color-mix(in srgb, var(--accent-primary), white 10%);
box-shadow: 0 0 0 1px rgba(83, 184, 255, 0.28);
}
.qr-actions-panel {
position: absolute;
top: calc(100% + 0.35rem);
right: 0;
z-index: 20;
min-width: min(420px, 92vw);
padding: 0.75rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card), black 4%);
box-shadow: var(--shadow-lg);
display: grid;
gap: 0.55rem;
}
@media (max-width: 768px) {
.qr-row-actions {
display: grid;
gap: 0.45rem;
}
.qr-card-actions-primary {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.45rem;
margin-bottom: 0.5rem;
}
.qr-card-actions-primary .inline-form,
.qr-card-actions-primary .btn {
width: 100%;
}
.qr-card-actions-primary .btn,
.qr-row-menu > summary,
.qr-row-menu-panel .btn {
min-height: 44px;
justify-content: center;
}
.qr-row-menu {
display: grid;
gap: 0.45rem;
}
.qr-row-menu-panel {
position: static;
min-width: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.qr-row-menu-panel .btn-danger,
.qr-row-menu-panel .qr-row-menu-danger {
grid-column: 1 / -1;
}
}
@media (min-width: 769px) {
.qr-card-actions-primary {
display: inline-flex;
}
}
.qr-print-manager-list {
max-height: 60vh;
}
.qr-placement-shell {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.9fr);
gap: 1rem;
align-items: start;
}
.qr-placement-map-card {
position: sticky;
top: 1rem;
}
.qr-placement-map {
min-height: 60vh;
border-radius: 1rem;
overflow: hidden;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.04);
}
.qr-placement-map .leaflet-container {
min-height: 60vh;
width: 100%;
}
.qr-placement-list .is-selected {
border-color: rgba(37, 99, 235, 0.45);
box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18);
}
@media (max-width: 980px) {
.qr-placement-shell {
grid-template-columns: 1fr;
}
.qr-placement-map-card {
position: static;
}
.qr-placement-map,
.qr-placement-map .leaflet-container {
min-height: 42vh;
}
}
.qr-menu-section {
display: grid;
gap: 0.45rem;
padding-top: 0.2rem;
}
.qr-menu-section + .qr-menu-section {
border-top: 1px solid var(--border);
padding-top: 0.6rem;
}
.qr-menu-links {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.qr-menu-columns {
display: grid;
grid-template-columns: repeat(2, minmax(130px, 1fr));
gap: 0.42rem 0.65rem;
}
.qr-menu-col-item {
display: inline-flex;
align-items: center;
gap: 0.42rem;
font-size: 0.85rem;
color: var(--text-secondary);
user-select: none;
}
.qr-actions-panel .action-bar .btn {
flex: 1 1 115px;
}
.qr-bulk-title {
padding-top: 0.1rem;
border-top: 0;
}
.qr-column-toolbar .section-title {
margin: 0;
}
.qr-column-icons {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.qr-col-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: rgba(25, 36, 68, 0.82);
cursor: pointer;
transition: var(--transition);
position: relative;
}
.qr-col-toggle:hover {
border-color: var(--accent-primary);
transform: translateY(-1px);
}
.qr-col-toggle input {
position: absolute;
inset: 0;
opacity: 0;
}
.qr-col-icon {
font-size: 0.96rem;
color: var(--text-secondary);
line-height: 1;
}
.qr-col-toggle input:checked + .qr-col-icon {
color: var(--accent-primary);
}
.qr-col-toggle input:not(:checked) + .qr-col-icon {
opacity: 0.35;
}
.wm-risk-layout,
.wm-risk-actions,
.qr-bulk-context__groups {
display: grid;
gap: 0.9rem;
}
.wm-risk-layout__danger,
.wm-risk-zone,
.qr-bulk-context__group {
display: grid;
gap: 0.7rem;
}
.wm-risk-actions__group,
.wm-risk-layout__primary,
.qr-bulk-context__group {
padding: 0.85rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-secondary), black 5%);
}
.wm-risk-zone {
padding: 0.95rem;
border-radius: var(--radius);
border: 1px solid color-mix(in srgb, var(--warning), transparent 55%);
background: linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary), black 5%), color-mix(in srgb, var(--bg-card), black 1%));
}
.wm-risk-zone-danger,
.qr-bulk-context__group-danger {
border-color: color-mix(in srgb, var(--danger), transparent 48%);
background: linear-gradient(180deg, color-mix(in srgb, var(--danger), transparent 92%), color-mix(in srgb, var(--bg-card), black 2%));
}
.wm-risk-actions__eyebrow {
margin: 0;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
}
.wm-risk-zone-danger .wm-risk-actions__eyebrow,
.qr-bulk-context__group-danger > .subtitle {
color: color-mix(in srgb, var(--danger), white 12%);
}
.wm-risk-zone__copy {
display: grid;
gap: 0.2rem;
}
.qr-bulk-context__group > .subtitle {
margin: 0;
}
.qr-create-form {
display: grid;
gap: 0.9rem;
}
.qr-create-top {
display: grid;
gap: 0.25rem;
}
.qr-subsection {
margin-top: 0.25rem;
}
.qr-subsection > summary {
font-weight: 600;
}
.qr-analytics-header-card .filter-bar {
margin-bottom: 0;
}
.qr-analytics-status-chip-row {
margin-top: 0.45rem;
}
.qr-analytics-status-chip-row .status-badge {
text-transform: uppercase;
letter-spacing: 0.06em;
}
.qr-analytics-status-chip-row .status-active {
border-color: color-mix(in srgb, var(--success), transparent 55%);
color: color-mix(in srgb, var(--success), white 18%);
}
.qr-analytics-kpi-card {
text-align: left;
}
.qr-analytics-kpi-hint {
margin-top: 0.45rem;
min-height: 2.2em;
}
.qr-analytics-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
}
.qr-analytics-bar {
position: relative;
width: 100%;
min-width: 110px;
height: 8px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--border), black 12%);
background: color-mix(in srgb, var(--bg-secondary), black 12%);
overflow: hidden;
}
.qr-analytics-bar-fill {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, rgba(83, 184, 255, 0.92), rgba(98, 221, 255, 0.9));
}
.qr-analytics-bar-fill-fail {
background: linear-gradient(90deg, rgba(255, 126, 126, 0.9), rgba(255, 92, 92, 0.94));
}
.qr-geofence-editor {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-secondary), black 6%);
padding: 0.55rem;
display: grid;
gap: 0.55rem;
}
.qr-geofence-map {
width: 100%;
min-height: 280px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
overflow: hidden;
}
.access-policy-root {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-secondary), black 5%);
padding: 0.75rem;
}
.access-policy-summary {
margin-top: 0.4rem;
margin-bottom: 0.8rem;
font-weight: 600;
}
.access-policy-section {
border-top: 1px solid color-mix(in srgb, var(--border), black 18%);
padding-top: 0.75rem;
margin-top: 0.75rem;
display: grid;
gap: 0.5rem;
}
.access-policy-timeline {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 0.35rem;
align-items: center;
}
.access-policy-timeline .policy-timeline-edge,
.access-policy-timeline .policy-timeline-window {
height: 8px;
border-radius: 999px;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-secondary), black 8%);
}
.chronicle-page {
display: grid;
gap: var(--space-5);
}
.chronicle-page--gm {
padding: var(--space-4);
}
.chronicle-hero--gm {
gap: 1.25rem;
}
.chronicle-hero__actions,
.chronicle-tabs,
.chronicle-story-row__actions,
.chronicle-editor-actions,
.chronicle-snippets__buttons,
.chronicle-story-card__meta,
.chronicle-preview-card__meta {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
align-items: center;
}
.chronicle-story-shell {
display: grid;
gap: 1rem;
grid-template-columns: minmax(20rem, 30rem) minmax(0, 1fr);
}
.chronicle-story-list__items,
.chronicle-story-feed {
display: grid;
gap: 1rem;
}
.chronicle-story-row,
.chronicle-story-card,
.chronicle-preview-card {
display: grid;
gap: 0.9rem;
}
.chronicle-story-row__body {
display: grid;
gap: 0.85rem;
grid-template-columns: auto 1fr;
align-items: start;
}
.chronicle-story-row__copy,
.chronicle-story-card__body,
.chronicle-preview-card__body {
display: grid;
gap: 0.75rem;
}
.chronicle-chapter-banner {
display: grid;
gap: 0.55rem;
padding: 0.95rem 1rem;
border-radius: 18px;
border: 1px solid color-mix(in srgb, var(--border), var(--accent-primary) 16%);
background: linear-gradient(160deg, rgba(255, 248, 231, 0.12), rgba(16, 22, 37, 0.2));
}
.chronicle-chapter-banner__meta {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
align-items: center;
}
.chronicle-chapter-banner p,
.chronicle-chapter-line {
margin: 0;
}
.chronicle-chapter-line {
padding: 0.7rem 0.85rem;
border-radius: 16px;
border: 1px solid color-mix(in srgb, var(--border), white 10%);
background: color-mix(in srgb, var(--surface-2), black 3%);
color: var(--text-secondary);
}
.chronicle-memory-stamps,
.chronicle-memory-details {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
align-items: center;
}
.chronicle-memory-stamp,
.chronicle-memory-detail {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 2rem;
padding: 0.38rem 0.72rem;
border-radius: 999px;
border: 1px solid var(--line-soft);
font-size: var(--font-size-xs);
line-height: 1.2;
}
.chronicle-memory-stamp {
letter-spacing: 0.04em;
text-transform: uppercase;
background: color-mix(in srgb, var(--surface-2, #1c2744), black 2%);
}
.chronicle-memory-detail {
color: var(--text-secondary);
background: color-mix(in srgb, var(--surface-2, #1c2744), black 10%);
}
.chronicle-memory-detail--provenance {
border-style: dashed;
color: color-mix(in srgb, var(--text-primary), white 20%);
}
.chronicle-memory-stamp--voice-personal {
border-color: color-mix(in srgb, #f3b183, white 20%);
background: linear-gradient(135deg, rgba(243, 177, 131, 0.18), rgba(251, 191, 36, 0.14));
color: #ffe3ca;
}
.chronicle-memory-stamp--voice-collective {
border-color: color-mix(in srgb, #8dd3c7, white 18%);
background: linear-gradient(135deg, rgba(93, 214, 188, 0.18), rgba(59, 130, 246, 0.14));
color: #d7fff5;
}
.chronicle-memory-stamp--voice-authored {
border-color: color-mix(in srgb, #d6bcfa, white 18%);
background: linear-gradient(135deg, rgba(192, 132, 252, 0.16), rgba(244, 114, 182, 0.14));
color: #f8dfff;
}
.chronicle-memory-stamp--voice-operational {
border-color: color-mix(in srgb, #94a3b8, white 16%);
background: linear-gradient(135deg, rgba(71, 85, 105, 0.22), rgba(148, 163, 184, 0.16));
color: #d9e5f4;
}
.chronicle-memory-stamp--turning_point {
border-color: color-mix(in srgb, #f5c76a, white 18%);
background: linear-gradient(135deg, rgba(245, 199, 106, 0.18), rgba(214, 124, 55, 0.2));
}
.chronicle-memory-stamp--collective_memory {
border-color: color-mix(in srgb, #9fd2ff, white 18%);
background: linear-gradient(135deg, rgba(122, 184, 255, 0.16), rgba(96, 165, 250, 0.2));
}
.chronicle-memory-stamp--personal_milestone {
border-color: color-mix(in srgb, #c8b2ff, white 16%);
background: linear-gradient(135deg, rgba(200, 178, 255, 0.16), rgba(244, 114, 182, 0.16));
}
.chronicle-memory-stamp--administrative_note {
border-color: color-mix(in srgb, var(--line-soft), white 12%);
background: color-mix(in srgb, var(--surface-2, #1c2744), black 4%);
}
.chronicle-memory-stamp--significance-defining {
border-style: dashed;
color: #ffe0a6;
}
.chronicle-memory-stamp--significance-shared {
border-style: dashed;
color: #cbe6ff;
}
.chronicle-memory-stamp--significance-cherished {
border-style: dashed;
color: #f6d5ff;
}
.chronicle-memory-stamp--significance-warm {
border-style: dashed;
color: #ffd7b5;
}
.chronicle-memory-stamp--significance-quiet {
border-style: dashed;
color: #dbe6ff;
}
.chronicle-memory-stamp--significance-recorded {
border-style: dashed;
color: var(--text-secondary);
}
.chronicle-story-row__photo,
.chronicle-story-card__photo,
.chronicle-preview-card__photo,
.chronicle-inline-photo img {
width: 100%;
max-height: 18rem;
object-fit: cover;
border-radius: 1rem;
border: 1px solid var(--line-soft);
}
.chronicle-story-row__photo {
width: 8rem;
}
.chronicle-empty {
padding: 1rem;
}
.chronicle-editor-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.chronicle-editor-body textarea {
min-height: 24rem;
resize: vertical;
}
.chronicle-snippets {
padding: 1rem;
border-radius: 1rem;
border: 1px solid var(--line-soft);
background: color-mix(in srgb, var(--surface-2, #1c2744), black 10%);
}
.chronicle-ambiguity-review {
display: grid;
gap: 0.85rem;
padding: 1rem;
border-radius: 1rem;
border: 1px solid color-mix(in srgb, #f5c76a, var(--line-soft) 68%);
background:
radial-gradient(circle at top right, rgba(245, 199, 106, 0.12), transparent 45%),
color-mix(in srgb, var(--surface-2, #1c2744), black 8%);
}
.chronicle-ambiguity-review__badge {
border: 1px solid transparent;
}
.chronicle-ambiguity-review__badge--productive {
border-color: rgba(122, 184, 255, 0.55);
}
.chronicle-ambiguity-review__badge--grounded {
border-color: rgba(148, 163, 184, 0.55);
}
.chronicle-ambiguity-review__badge--unclear {
border-color: rgba(248, 113, 113, 0.55);
}
.chronicle-ambiguity-review__checks {
display: grid;
gap: 0.75rem;
}
.chronicle-ambiguity-check {
display: grid;
gap: 0.35rem;
padding: 0.85rem;
border-radius: 0.9rem;
border: 1px solid var(--line-soft);
background: rgba(15, 23, 42, 0.28);
}
.chronicle-ambiguity-check--pass {
border-color: rgba(74, 222, 128, 0.4);
}
.chronicle-ambiguity-check--neutral {
border-color: rgba(148, 163, 184, 0.4);
}
.chronicle-ambiguity-check--fail {
border-color: rgba(248, 113, 113, 0.5);
}
.chronicle-ambiguity-check__status {
color: var(--text-secondary);
font-size: var(--font-size-xs);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.chronicle-story-preview {
min-height: 18rem;
}
.chronicle-preview-card {
min-height: 100%;
padding: 1rem;
border-radius: 1rem;
border: 1px solid var(--line-soft);
background: var(--surface-story);
}
.chronicle-preview-card__body > :first-child,
.chronicle-story-card__body > :first-child {
margin-top: 0;
}
.chronicle-preview-card__body > :last-child,
.chronicle-story-card__body > :last-child {
margin-bottom: 0;
}
.chronicle-preview-card__review {
margin-top: 0.25rem;
}
.chronicle-inline-photo {
display: grid;
gap: 0.5rem;
}
.chronicle-inline-photo figcaption {
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
.chronicle-inline-photo--missing {
padding: 0.75rem;
border-radius: 0.9rem;
border: 1px dashed var(--line-soft);
color: var(--text-secondary);
}
.chronicle-hero,
.chronicle-panel {
background: var(--surface-intent-bg, var(--surface-shell));
border-color: var(--surface-intent-border, var(--border));
box-shadow: var(--surface-intent-shadow, var(--shadow-sm));
position: relative;
overflow: hidden;
}
.chronicle-hero {
display: grid;
gap: 1rem;
}
.chronicle-hero::before,
.chronicle-panel::before {
content: "";
position: absolute;
inset: 0;
background: var(--texture-grain);
opacity: var(--material-texture-strength);
pointer-events: none;
}
.chronicle-hero__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.chronicle-hero__identity,
.chronicle-hero__persona,
.chronicle-summary-copy,
.chronicle-day__header,
.chronicle-hour-card,
.chronicle-photo-card,
.chronicle-event__body {
display: grid;
gap: 0.5rem;
}
.chronicle-hero__persona {
justify-items: end;
text-align: right;
}
.chronicle-avatar {
width: 5rem;
height: 5rem;
border-radius: 1.25rem;
object-fit: cover;
border: 1px solid var(--line-soft);
background: color-mix(in srgb, var(--surface-2, #1c2744), black 12%);
}
.chronicle-avatar--fallback {
display: grid;
place-items: center;
padding: 0.75rem;
color: var(--text-primary);
font-size: var(--font-size-xs);
font-weight: 700;
line-height: 1.2;
text-align: center;
}
.chronicle-headline,
.chronicle-export-note {
margin: 0;
color: var(--text-secondary);
}
.chronicle-hero h1,
.chronicle-panel h2,
.chronicle-panel h3 {
font-family: var(--font-display);
letter-spacing: -0.02em;
}
.chronicle-story {
display: grid;
gap: 0.85rem;
}
.chronicle-story__line {
margin: 0;
font-size: 1.08rem;
line-height: 1.85;
opacity: 1;
transform: none;
}
@keyframes chronicleReveal {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.chronicle-export-actions {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.chronicle-summary-grid,
.chronicle-highlights,
.chronicle-photo-grid,
.chronicle-hour-grid {
display: grid;
gap: 1rem;
}
.chronicle-summary-grid {
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.chronicle-highlights {
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.chronicle-highlight {
min-height: 100%;
}
.chronicle-highlight__icon {
font-size: 1.4rem;
}
.chronicle-highlight__value {
margin: 0;
font-size: 1.8rem;
font-weight: 700;
}
.chronicle-stats {
display: grid;
gap: 1rem;
}
.chronicle-stats__summary {
display: grid;
gap: 0.45rem;
}
.chronicle-filmstrip-shell {
display: grid;
gap: 0.85rem;
}
.chronicle-timeline,
.chronicle-day__events,
.chronicle-dual-table,
.chronicle-gm-grid {
display: grid;
gap: 1rem;
}
.chronicle-day {
padding: 1rem;
border-radius: 1.25rem;
border: 1px solid var(--surface-intent-border, var(--line-soft));
background: var(--surface-intent-bg, color-mix(in srgb, var(--surface-2, #1c2744), black 8%));
box-shadow: var(--surface-intent-shadow, none);
}
.chronicle-event {
display: grid;
grid-template-columns: minmax(4.5rem, 5.25rem) 1fr;
gap: 1rem;
padding-top: 1rem;
border-top: 1px solid color-mix(in srgb, var(--surface-intent-border, var(--line-soft)), transparent 28%);
}
.chronicle-event:first-child {
padding-top: 0;
border-top: 0;
}
.chronicle-event__time {
display: grid;
gap: 0.35rem;
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
.chronicle-event__headline,
.chronicle-event__meta-row,
.chronicle-hour-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.chronicle-event__media,
.chronicle-photo-card__image,
.chronicle-photo-card img {
width: 100%;
border-radius: 1rem;
border: 1px solid var(--line-soft);
object-fit: cover;
}
.chronicle-photo-grid {
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.chronicle-hour-grid {
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.chronicle-hour-card {
padding: 0.9rem;
border-radius: 1rem;
border: 1px solid var(--line-soft);
background: color-mix(in srgb, var(--surface-2, #1c2744), black 6%);
}
.chronicle-hour-card__meter {
width: 100%;
height: 0.55rem;
border-radius: 999px;
background: color-mix(in srgb, var(--surface-3, #223158), black 8%);
overflow: hidden;
}
.chronicle-hour-card__meter span {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--color-accent, #7ab8ff), color-mix(in srgb, var(--color-accent, #7ab8ff), white 24%));
}
.chronicle-note {
margin: 0;
}
.chronicle-gm-grid {
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.chronicle-dual-table {
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.chronicle-filmstrip {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(13rem, 16rem);
gap: 0.85rem;
overflow-x: auto;
padding-bottom: 0.25rem;
}
.chronicle-filmstrip__card {
min-height: 100%;
}
.chronicle-keepsake-status {
min-height: 1.25rem;
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
@media (max-width: 860px) {
.chronicle-page--gm {
padding: 0;
}
.chronicle-hero__persona {
justify-items: start;
text-align: left;
}
.chronicle-story-shell,
.chronicle-editor-grid,
.chronicle-story-row__body {
grid-template-columns: 1fr;
}
.chronicle-story-row__photo {
width: 100%;
}
}
@media (max-width: 640px) {
.chronicle-event {
grid-template-columns: 1fr;
}
.chronicle-event__time {
grid-auto-flow: column;
justify-content: space-between;
align-items: center;
}
}
@media (prefers-reduced-motion: reduce) {
.chronicle-story__line {
opacity: 1;
transform: none;
animation: none;
}
}
.challenge-hub-page,
.gm-challenge-page {
padding-bottom: 8rem;
}
.challenge-hub-hero,
.challenge-gm-vitals {
display: grid;
gap: 1rem;
}
.challenge-hub-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
gap: 0.75rem;
}
.challenge-hub-tabs {
margin: 1rem 0 1.25rem;
}
.challenge-card,
.challenge-leaderboard-row,
.challenge-gm-card {
display: grid;
gap: 0.75rem;
}
.challenge-card__meta,
.challenge-compose-grid,
.challenge-leaderboard-row__side {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
}
.challenge-leaderboard-row {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
}
.challenge-leaderboard-row__side {
justify-content: flex-end;
}
@media (max-width: 720px) {
.challenge-compose-grid,
.challenge-leaderboard-row {
grid-template-columns: 1fr;
}
.challenge-leaderboard-row__side {
justify-content: flex-start;
}
}
.access-policy-timeline .policy-timeline-window {
background: linear-gradient(90deg, color-mix(in srgb, var(--accent-primary), black 5%), color-mix(in srgb, var(--accent-secondary), black 5%));
border-color: color-mix(in srgb, var(--accent-primary), white 5%);
}
.access-policy-presets {
gap: 0.45rem;
}
.access-policy-validation {
margin: 0;
}
.access-policy-validation.is-error {
color: #ff8f8f;
}
.access-role-chip-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.access-role-chip {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 999px;
padding: 0.42rem 0.72rem;
background: color-mix(in srgb, var(--bg-secondary), black 5%);
cursor: pointer;
font-size: 0.86rem;
}
.access-role-chip input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.access-role-chip:has(input[type="checkbox"]:checked) {
border-color: color-mix(in srgb, var(--accent-primary), white 10%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary), transparent 70%);
background: color-mix(in srgb, var(--accent-primary), var(--bg-secondary) 82%);
}
.access-role-chip.is-selected {
border-color: color-mix(in srgb, var(--accent-primary), white 10%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary), transparent 70%);
background: color-mix(in srgb, var(--accent-primary), var(--bg-secondary) 82%);
}
.access-policy-warning {
color: #ffc979;
}
.policy-role-warning {
border-color: #d57b7b;
}
.qr-type-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.75rem;
}
.qr-type-card {
display: grid;
gap: 0.3rem;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-secondary), black 6%);
padding: 0.75rem;
color: var(--text-primary);
cursor: pointer;
}
.qr-type-card input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.qr-type-card:hover,
.qr-type-card.active {
border-color: color-mix(in srgb, var(--accent-primary), white 15%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary), transparent 60%);
}
.qr-type-card p {
margin: 0;
color: var(--text-secondary);
font-size: 0.86rem;
}
.qr-type-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.qr-type-detail-grid {
margin-top: 0.6rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.75rem;
}
.qr-type-detail-grid h4 {
margin-bottom: 0.3rem;
}
.qr-type-template-row {
display: grid;
grid-template-columns: 1.1fr 1fr 1.6fr auto;
gap: 0.55rem;
align-items: start;
}
.qr-type-hint-card {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-secondary), black 8%);
padding: 0.6rem 0.7rem;
display: grid;
gap: 0.2rem;
}
.quest-wizard-progress {
margin-bottom: 0.9rem;
}
.quest-wizard-steps {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.6rem;
margin: 0;
padding: 0;
}
.quest-wizard-step {
border: 1px solid var(--line);
background: rgba(22, 26, 55, 0.45);
border-radius: 12px;
padding: 0;
}
.quest-wizard-step-link {
padding: 0.65rem 0.7rem;
display: flex;
align-items: center;
gap: 0.55rem;
width: 100%;
border-radius: inherit;
color: inherit;
text-decoration: none;
}
.quest-wizard-step-link:hover {
text-decoration: none;
background: rgba(255, 255, 255, 0.03);
}
.quest-wizard-step-link.is-disabled {
opacity: 0.58;
cursor: not-allowed;
}
.quest-wizard-step-index {
width: 1.5rem;
height: 1.5rem;
border-radius: 999px;
border: 1px solid var(--line);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.78rem;
}
.quest-wizard-step-label {
font-size: 0.86rem;
color: var(--text-secondary);
}
.quest-wizard-step.active {
border-color: var(--accent-primary);
box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.2) inset;
}
.quest-wizard-step.active .quest-wizard-step-label {
color: var(--text-primary);
}
.quest-wizard-step.done .quest-wizard-step-index {
border-color: rgba(16, 185, 129, 0.5);
color: var(--success);
}
.qr-preview-fragment {
display: grid;
gap: 0.35rem;
}
.qr-preview-fragment ul {
margin: 0;
padding-left: 1rem;
}
.quest-builder-toolbar {
display: grid;
grid-template-columns: auto minmax(220px, 320px) auto;
align-items: end;
gap: 0.75rem;
margin-bottom: 0.85rem;
}
.quest-builder-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 1rem;
}
.quest-builder-panel {
border: 1px solid var(--line);
border-radius: 14px;
padding: 0.9rem;
background: rgba(17, 19, 41, 0.45);
}
.quest-builder-panel h3 {
margin: 0 0 0.35rem;
}
.quest-builder-list {
display: grid;
gap: 0.75rem;
margin-top: 0.5rem;
}
.quest-builder-row {
border: 1px solid var(--line);
border-radius: 10px;
padding: 0.65rem;
background: rgba(12, 16, 35, 0.45);
}
.quest-builder-row-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.6rem;
}
.quest-builder-row-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.55rem;
}
.quest-builder-row-grid label {
display: grid;
gap: 0.3rem;
color: var(--text-secondary);
font-size: 0.82rem;
}
.quest-builder-check {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.quest-builder-preview {
display: grid;
gap: 0.55rem;
}
.quest-builder-preview-item {
border: 1px dashed var(--line);
border-radius: 10px;
padding: 0.55rem 0.65rem;
display: grid;
gap: 0.22rem;
}
.quest-builder-preview-item span {
color: var(--text-secondary);
font-size: 0.8rem;
}
.quest-prereq-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.7rem;
}
.token-filter-grid {
display: grid;
grid-template-columns: 2fr 1fr 180px auto;
gap: 0.75rem;
align-items: end;
}
.token-filter-actions {
margin-bottom: 0;
}
.token-ledger-grid {
display: grid;
grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.45fr);
gap: 0.9rem;
}
.token-stats-grid {
margin-bottom: 0.85rem;
}
.token-pagination {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.8rem;
}
.token-adjust-grid {
display: grid;
grid-template-columns: 1.5fr 220px;
gap: 0.75rem;
}
.token-adjust-confirm {
border: 1px solid var(--line);
}
.checkbox-inline {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.92rem;
}
.token-sparkline {
width: 130px;
height: 30px;
display: block;
}
.text-success {
color: var(--success);
}
.text-danger {
color: var(--danger);
}
.firefly-page {
margin: 0;
min-height: 100vh;
background: radial-gradient(circle at 20% 20%, rgba(250, 236, 182, 0.12), transparent 42%),
radial-gradient(circle at 80% 80%, rgba(255, 198, 125, 0.1), transparent 46%),
#060a1a;
color: var(--text-primary);
}
.firefly-shell {
min-height: 100vh;
display: grid;
place-items: center;
padding: clamp(1.5rem, 4vw, 3rem);
}
.firefly-content {
width: min(900px, 100%);
text-align: center;
}
.wr-page {
--wr-border: rgba(91, 162, 255, 0.18);
--wr-panel: linear-gradient(180deg, rgba(5, 12, 41, 0.9), rgba(10, 18, 52, 0.92));
--wr-accent: rgba(91, 162, 255, 1);
}
.wr-header,
.wr-header-meta {
display: flex;
gap: 1rem;
align-items: flex-start;
justify-content: space-between;
}
.wr-header-meta {
align-items: center;
}
.wr-freshness {
display: flex;
flex-direction: column;
gap: 0.25rem;
align-items: flex-end;
}
.wr-stale-banner {
margin-bottom: 1rem;
padding: 0.85rem 1rem;
border-radius: 16px;
border: 1px solid rgba(255, 159, 67, 0.42);
background: rgba(255, 159, 67, 0.12);
color: #ffe4bc;
}
.wr-mobile-tabs {
display: none;
gap: 0.55rem;
margin-bottom: 1rem;
--scroll-affordance-bg: var(--bg-primary);
}
.wr-pane-scroller {
display: grid;
gap: 1rem;
}
.wr-pane {
min-width: 0;
}
.wr-section,
.wr-card,
.wr-detail,
.wr-sidebar,
.wr-activity-shell {
border: 1px solid var(--wr-border);
background: var(--wr-panel);
}
.wr-vitals {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0.85rem;
}
.wr-vital {
display: grid;
gap: 0.35rem;
padding: 1rem;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
}
.wr-vital-label {
color: rgba(223, 233, 255, 0.76);
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.wr-vital-value {
font-size: clamp(1.5rem, 2vw, 2rem);
}
.wr-item-list,
.wr-detail-stack {
display: grid;
gap: 0.85rem;
}
.wr-item {
display: grid;
gap: 0.65rem;
padding: 1rem;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
}
.wr-zone-metrics {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.wr-grid-3 {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.95fr) minmax(280px, 0.85fr);
gap: 1rem;
align-items: start;
}
.wr-mobile-vitals-bar {
display: none;
--scroll-affordance-bg: var(--bg-primary);
}
.wr-mobile-vital {
white-space: nowrap;
padding: 0.4rem 0.75rem;
border-radius: 999px;
font-size: 0.82rem;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
flex-shrink: 0;
}
.wr-vital.tone-warning,
.wr-item.tone-warning,
.wr-mobile-vital.tone-warning {
border-color: rgba(255, 186, 73, 0.4);
}
.wr-vital.tone-danger,
.wr-item.tone-danger,
.wr-mobile-vital.tone-danger {
border-color: rgba(255, 107, 107, 0.42);
}
.wr-vital.tone-success,
.wr-item.tone-success,
.wr-mobile-vital.tone-success {
border-color: rgba(80, 200, 120, 0.35);
}
.wr-item.is-selected,
.wr-vital.is-selected {
border-color: color-mix(in srgb, var(--wr-accent), transparent 40%);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--wr-accent), transparent 65%);
}
@media (max-width: 1180px) {
.wr-grid-3 {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.wr-header,
.wr-header-meta {
flex-direction: column;
align-items: stretch;
}
.wr-freshness {
align-items: flex-start;
}
.wr-mobile-tabs {
display: flex;
}
.wr-pane {
display: none;
}
.wr-pane.is-active {
display: block;
}
.wr-mobile-vitals-bar {
display: flex;
gap: 0.5rem;
overflow-x: auto;
scrollbar-width: none;
padding: 0.5rem 0;
margin-bottom: 0.5rem;
}
}
.firefly-war-room-page {
display: grid;
gap: 1rem;
--wr-border: rgba(96, 165, 250, 0.2);
--wr-panel: linear-gradient(180deg, rgba(17, 21, 50, 0.92), rgba(9, 14, 33, 0.88));
--wr-accent: rgba(96, 165, 250, 1);
}
.firefly-war-room-pane-scroller {
display: grid;
gap: 1rem;
}
.firefly-war-room-header-actions {
display: grid;
gap: 0.75rem;
justify-items: end;
}
.firefly-war-room-freshness {
display: inline-flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.firefly-war-room-filters {
padding: 1rem;
}
.firefly-war-room-filter-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.8rem;
align-items: end;
}
.firefly-war-room-filter-actions {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
}
.firefly-war-room-stale-banner {
border: 1px solid rgba(244, 114, 114, 0.45);
background: rgba(127, 29, 29, 0.3);
color: #ffd5d5;
border-radius: 16px;
padding: 0.8rem 1rem;
}
.firefly-war-room-mobile-tabs {
display: none;
gap: 0.6rem;
}
.firefly-war-room-mobile-tabs .btn.is-active {
border-color: color-mix(in srgb, var(--accent-primary), white 14%);
background: color-mix(in srgb, var(--accent-primary), var(--bg-secondary) 80%);
}
.firefly-war-room-mobile-tabs .tab-badge {
min-width: 18px;
height: 18px;
border-radius: 999px;
background: var(--danger, #ef4444);
color: #fff;
font-size: 0.65rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 0.35rem;
padding: 0 0.2rem;
}
.firefly-war-room-section-head {
display: flex;
align-items: start;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.8rem;
}
.firefly-war-room-section-head h2,
.firefly-war-room-section-head h3,
.firefly-war-room-inline-head h3 {
margin: 0;
}
.firefly-war-room-vitals-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.75rem;
}
.firefly-war-room-vital {
border: 1px solid var(--border);
border-radius: 18px;
padding: 0.9rem;
display: grid;
gap: 0.28rem;
background: linear-gradient(180deg, rgba(17, 21, 50, 0.92), rgba(12, 15, 35, 0.82));
}
.firefly-war-room-vital-value {
font-size: 1.55rem;
line-height: 1;
}
.firefly-war-room-vital-label {
color: var(--text-secondary);
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.firefly-war-room-vital.tone-success,
.firefly-war-room-attention-card.tone-success {
border-color: rgba(74, 222, 128, 0.35);
}
.firefly-war-room-vital.tone-danger,
.firefly-war-room-attention-card.tone-danger {
border-color: rgba(248, 113, 113, 0.42);
}
.firefly-war-room-vital.tone-warning,
.firefly-war-room-attention-card.tone-warning {
border-color: rgba(251, 191, 36, 0.4);
}
.firefly-war-room-vital.tone-accent {
border-color: rgba(96, 165, 250, 0.38);
}
.firefly-war-room-attention-grid,
.firefly-war-room-zone-grid,
.firefly-war-room-zone-cards,
.firefly-war-room-detail-stack,
.firefly-war-room-activity-list {
display: grid;
gap: 0.8rem;
}
.firefly-war-room-attention-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.firefly-war-room-attention-card,
.firefly-war-room-zone,
.firefly-war-room-detail-card,
.firefly-war-room-activity-card,
.firefly-war-room-detail-panel {
border: 1px solid var(--border);
border-radius: 18px;
background: linear-gradient(180deg, rgba(17, 21, 50, 0.92), rgba(9, 14, 33, 0.88));
}
.firefly-war-room-attention-card,
.firefly-war-room-zone,
.firefly-war-room-detail-panel {
padding: 0.9rem;
}
.firefly-war-room-inline-head {
display: flex;
align-items: start;
justify-content: space-between;
gap: 0.6rem;
}
.firefly-war-room-chip-row,
.firefly-war-room-metrics,
.firefly-war-room-card-actions,
.firefly-war-room-card-quick-actions,
.firefly-war-room-activate-form {
display: flex;
gap: 0.55rem;
flex-wrap: wrap;
}
.firefly-war-room-metrics {
color: var(--text-secondary);
font-size: 0.88rem;
}
.firefly-war-room-metrics.is-vertical {
flex-direction: column;
gap: 0.45rem;
}
.firefly-war-room-zone-grid {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.firefly-war-room-zone-cards {
margin-top: 0.75rem;
}
.firefly-war-room-board-card,
.firefly-war-room-activity-row {
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 0.8rem;
background: rgba(9, 14, 33, 0.68);
color: inherit;
text-decoration: none;
display: grid;
gap: 0.45rem;
}
.firefly-war-room-board-card:hover,
.firefly-war-room-activity-row:hover {
text-decoration: none;
border-color: color-mix(in srgb, var(--accent-primary), white 16%);
}
.firefly-war-room-board-card.is-focused,
.firefly-war-room-attention-card.is-focused {
box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.45);
border-color: rgba(96, 165, 250, 0.58);
}
.firefly-war-room-detail-grid {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.9fr);
gap: 1rem;
align-items: start;
}
.firefly-war-room-detail-grid-inner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.75rem;
}
.firefly-war-room-detail-stack {
gap: 1rem;
}
.firefly-war-room-activate-form {
align-items: center;
}
.firefly-war-room-activate-form.is-compact .form-input {
min-width: 160px;
}
.firefly-war-room-activate-form .form-input {
min-width: 240px;
}
.firefly-war-room-activity-list {
gap: 0.65rem;
}
.firefly-war-room-activity-row {
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: start;
}
@media (max-width: 980px) {
.firefly-war-room-detail-grid {
grid-template-columns: 1fr;
}
.firefly-war-room-header-actions {
justify-items: start;
}
}
@media (max-width: 760px) {
.firefly-war-room-mobile-tabs {
display: flex;
}
.firefly-war-room-pane-scroller {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
scroll-behavior: smooth;
gap: 0;
}
.firefly-war-room-pane-scroller::-webkit-scrollbar {
display: none;
}
.firefly-war-room-pane-scroller > *,
.firefly-war-room-detail-grid > * {
flex: 0 0 100%;
min-width: 100%;
scroll-snap-align: start;
}
.firefly-war-room-detail-grid {
display: contents;
}
.firefly-war-room-detail-grid {
gap: 0.85rem;
}
.firefly-war-room-pane {
display: block;
}
.firefly-war-room-activity-row {
grid-template-columns: 1fr;
}
[data-firefly-pane="board"] #firefly-war-room-snapshot {
display: flex;
flex-direction: column;
gap: 1rem;
}
[data-firefly-pane="board"] .firefly-war-room-attention-section {
order: -2;
}
[data-firefly-pane="board"] .firefly-war-room-vitals-section {
order: -1;
}
.firefly-war-room-vitals-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.firefly-war-room-vital-value {
font-size: 1.25rem;
}
.firefly-war-room-activate-form .form-input,
.firefly-war-room-activate-form.is-compact .form-input {
min-width: 0;
width: 100%;
}
}
.beacon-war-room-page {
--wr-border: rgba(248, 113, 113, 0.2);
--wr-panel: linear-gradient(180deg, rgba(20, 8, 8, 0.88), rgba(28, 10, 10, 0.9));
--wr-accent: rgba(248, 113, 113, 1);
}
.beacon-war-room-layout {
display: grid;
gap: 1rem;
grid-template-columns: minmax(0, 2.1fr) minmax(320px, 1fr);
}
.beacon-war-room-header-actions,
.beacon-war-room-freshness,
.beacon-war-room-command-bar,
.beacon-war-room-board-actions,
.beacon-war-room-mobile-tabs,
.beacon-detail-grid,
.beacon-detail-meta,
.beacon-activity-row,
.beacon-map-cell-header {
display: flex;
gap: 0.75rem;
}
.beacon-war-room-header-actions,
.beacon-war-room-freshness,
.beacon-war-room-board-actions,
.beacon-map-cell-header {
align-items: center;
}
.beacon-war-room-header-actions {
flex-wrap: wrap;
justify-content: flex-end;
}
.beacon-war-room-stale-banner {
margin: 0.75rem 0;
padding: 0.75rem 1rem;
border: 1px solid rgba(248, 113, 113, 0.35);
border-radius: 1rem;
background: rgba(127, 29, 29, 0.35);
color: #fecaca;
}
.beacon-war-room-command-bar {
display: grid;
gap: 0.75rem;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-bottom: 0.75rem;
}
.beacon-war-room-stat {
padding: 1rem;
}
.beacon-war-room-stat strong {
display: block;
font-size: 1.8rem;
}
.beacon-sonar-grid {
display: grid;
gap: 0.75rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.beacon-sonar-grid[data-layout="single"] {
grid-template-columns: 1fr;
}
.beacon-map-cell {
overflow: hidden;
}
.beacon-map-canvas {
position: relative;
min-height: 240px;
border-radius: 1rem;
overflow: hidden;
background: radial-gradient(circle at top, rgba(34, 211, 238, 0.16), rgba(3, 7, 18, 0.95));
}
.beacon-map-floor-image {
display: block;
width: 100%;
height: auto;
}
.beacon-map-empty,
.beacon-real-map {
min-height: 240px;
}
.beacon-real-map {
width: 100%;
}
.beacon-map-empty {
display: grid;
place-items: center;
color: rgba(226, 232, 240, 0.72);
}
.beacon-ping {
position: absolute;
transform: translate(-50%, -50%);
width: 1rem;
height: 1rem;
z-index: 4;
background: transparent;
border: 0;
padding: 0;
}
.beacon-ping-dot,
.beacon-ping-ring {
position: absolute;
top: 50%;
left: 50%;
border-radius: 999px;
transform: translate(-50%, -50%);
}
.beacon-ping-dot {
width: 0.9rem;
height: 0.9rem;
background: #22d3ee;
box-shadow: 0 0 12px rgba(34, 211, 238, 0.75);
}
.beacon-ping-ring {
width: 0.9rem;
height: 0.9rem;
border: 2px solid rgba(34, 211, 238, 0.75);
animation: beacon-sonar-pulse 3s ease-out infinite;
pointer-events: none;
}
.beacon-ping-ring-2 { animation-delay: 1s; }
.beacon-ping-ring-3 { animation-delay: 2s; }
.beacon-ping[data-freshness="stale"] .beacon-ping-ring,
.beacon-ping[data-freshness="expired"] .beacon-ping-ring {
animation: none;
opacity: 0;
}
.beacon-ping[data-freshness="stale"] .beacon-ping-dot {
background: rgba(148, 163, 184, 0.9);
box-shadow: none;
}
.beacon-ping[data-freshness="expired"] .beacon-ping-dot {
background: rgba(248, 113, 113, 0.72);
box-shadow: 0 0 8px rgba(248, 113, 113, 0.35);
}
.beacon-ping-label {
position: absolute;
top: calc(100% + 0.35rem);
left: 50%;
transform: translateX(-50%);
padding: 0.15rem 0.4rem;
border-radius: 999px;
background: rgba(15, 23, 42, 0.8);
color: #f8fafc;
font-size: 0.68rem;
white-space: nowrap;
}
.beacon-ping.is-selected .beacon-ping-dot {
outline: 3px solid rgba(255, 255, 255, 0.75);
}
.beacon-war-room-sidebar {
display: grid;
gap: 1rem;
}
.beacon-war-room-sidebar-card {
display: grid;
gap: 0.85rem;
}
.beacon-registry-list,
.beacon-activity-list {
display: grid;
gap: 0.75rem;
}
.beacon-registry-card,
.beacon-activity-row {
padding: 0.85rem;
border-radius: 1rem;
background: rgba(15, 23, 42, 0.5);
border: 1px solid rgba(148, 163, 184, 0.18);
}
.beacon-registry-card.is-active {
border-color: rgba(34, 211, 238, 0.36);
}
.beacon-registry-card.is-expired {
border-color: rgba(248, 113, 113, 0.3);
}
.beacon-activity-row {
align-items: center;
justify-content: space-between;
}
.beacon-activity-dot {
width: 0.7rem;
height: 0.7rem;
border-radius: 999px;
background: #22d3ee;
box-shadow: 0 0 10px rgba(34, 211, 238, 0.45);
}
.beacon-detail-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.beacon-detail-meta {
flex-wrap: wrap;
color: rgba(191, 219, 254, 0.78);
font-size: 0.85rem;
}
.beacon-war-room-mobile-tabs {
display: none;
margin-bottom: 0.75rem;
}
@keyframes beacon-sonar-pulse {
from { transform: translate(-50%, -50%) scale(0); opacity: 0.8; }
to { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}
@keyframes beacon-burst {
from { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.65); }
to { box-shadow: 0 0 0 32px rgba(34, 211, 238, 0); }
}
.beacon-ping-burst .beacon-ping-dot {
animation: beacon-burst 1s ease-out;
}
body.beacon-display-mode .dashboard-header,
body.beacon-display-mode .beacon-war-room-sidebar,
body.beacon-display-mode .beacon-war-room-mobile-tabs,
body.beacon-display-mode [data-beacon-display-mode] {
display: none !important;
}
body.beacon-display-mode .beacon-war-room-layout {
grid-template-columns: 1fr;
}
body.beacon-display-mode .beacon-war-room-page {
max-width: none;
}
@media (max-width: 780px) {
.beacon-war-room-layout,
.beacon-war-room-command-bar,
.beacon-detail-grid {
grid-template-columns: 1fr;
}
.beacon-war-room-mobile-tabs {
display: flex;
}
.beacon-war-room-pane {
display: none;
}
.beacon-war-room-pane.is-active {
display: block;
}
.beacon-sonar-grid {
grid-template-columns: 1fr;
}
.beacon-map-canvas {
max-height: 50vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.beacon-war-room-sidebar {
display: contents;
}
[data-beacon-display-mode] {
display: none;
}
}
.gm-command-center-page,
.gm-command-center-main,
.gm-command-center-side,
.gm-command-center-attention-list,
.gm-command-center-activity-list,
.gm-command-center-tower-grid,
.gm-command-center-tower-lens-strip,
.gm-command-center-focus-rail__body,
.gm-command-center-focus-rail__activity,
.gm-command-center-faction-pulse__standings,
.gm-command-center-domain-grid,
.gm-live-intervention-cards__grid {
display: grid;
gap: 1rem;
}
.gm-command-center-page {
container-type: inline-size;
}
.gm-command-center-head {
align-items: start;
gap: 1rem;
}
.gm-command-center-head__meta,
.gm-command-center-command-bar__actions,
.gm-command-center-attention-card__meta,
.gm-command-center-focus-rail__actions,
.gm-command-center-focus-rail__metrics,
.gm-command-center-alert-banner__chips,
.gm-command-center-faction-pulse__meta,
.gm-command-center-tower-overview__meta,
.gm-command-center-tower-card__meta,
.gm-command-center-tower-card__actions,
.gm-live-intervention-card__meta,
.gm-live-intervention-card__actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
align-items: center;
}
.gm-command-center-layout {
display: grid;
grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.3fr) minmax(320px, 1fr);
gap: 1rem;
align-items: start;
}
.gm-command-center-column {
min-width: 0;
}
.gm-command-center-alert-banner {
position: sticky;
top: 0.5rem;
z-index: 2;
border-color: rgba(87, 194, 255, 0.3);
box-shadow: 0 18px 40px rgba(7, 12, 30, 0.32);
}
.gm-command-center-stat-grid,
.gm-command-center-domain__stats,
.gm-command-center-faction-pulse__metrics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.75rem;
}
.gm-command-center-faction-pulse__row,
.gm-command-center-pulse-metric,
.gm-command-center-domain,
.gm-command-center-tower-lens,
.gm-command-center-tower-card,
.gm-command-center-attention-card,
.gm-command-center-activity-row,
.gm-command-center-next-event,
.gm-command-center-focus-rail,
.gm-live-intervention-card {
border-color: rgba(120, 138, 255, 0.2);
}
.gm-command-center-faction-pulse__row.is-leader {
border-color: rgba(74, 222, 128, 0.45);
}
.gm-command-center-faction-pulse__title {
display: flex;
gap: 0.65rem;
align-items: baseline;
}
.gm-command-center-faction-pulse__rank {
color: var(--text-muted);
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.gm-command-center-pulse-metric {
min-height: 0;
}
.gm-command-center-domain-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gm-command-center-tower-lens-strip {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.gm-live-intervention-cards__grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.gm-command-center-tower-grid {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.gm-command-center-tower-lens,
.gm-command-center-tower-card {
min-height: 0;
}
.gm-command-center-tower-lens.is-selected,
.gm-command-center-domain.is-selected,
.gm-command-center-attention-card.is-selected,
.gm-command-center-activity-row.is-selected {
border-color: rgba(87, 194, 255, 0.8);
box-shadow: 0 0 0 1px rgba(87, 194, 255, 0.2);
}
.gm-command-center-tower-card__list {
margin: 0;
padding-left: 1.1rem;
display: grid;
gap: 0.4rem;
}
.gm-command-center-activity-row__meta {
display: grid;
gap: 0.5rem;
justify-items: end;
}
.gm-command-center-focus-rail__list {
margin: 0;
padding-left: 1.1rem;
display: grid;
gap: 0.45rem;
}
.gm-command-center-next-event__body {
display: grid;
gap: 0.65rem;
}
.gm-command-center-actions .live-action-grid {
display: grid;
gap: 0.9rem;
}
.live-action-card {
display: grid;
gap: 0.7rem;
}
.gm-live-intervention-card {
display: grid;
gap: 0.8rem;
}
.live-action-card__inline {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.6rem;
}
.live-action-card__title {
margin: 0;
}
.gm-command-center-command-bar .stat-card,
.gm-command-center-domain .stat-card {
min-height: 0;
}
@container (max-width: 70rem) {
.gm-command-center-layout {
grid-template-columns: 1fr;
}
.gm-command-center-column--actions {
order: 1;
}
.gm-command-center-column--feed {
order: 2;
}
.gm-command-center-column--pulse {
order: 3;
}
.gm-command-center-domain-grid {
grid-template-columns: 1fr;
}
}
@container (max-width: 45rem) {
.live-action-card__inline,
.gm-command-center-stat-grid,
.gm-command-center-faction-pulse__metrics,
.gm-command-center-tower-grid,
.gm-live-intervention-cards__grid {
grid-template-columns: 1fr;
}
.gm-command-center-activity-row__meta {
justify-items: start;
}
.gm-command-center-alert-banner {
top: 0;
}
}
.gm-economy-page {
display: grid;
gap: 1.5rem;
}
.gm-economy-shell,
.gm-economy-grid,
.gm-economy-vitals,
.gm-economy-band-list,
.gm-economy-faction-list,
.gm-economy-anomalies,
.gm-economy-high-earners,
.gm-economy-unscanned,
.gm-economy-command__actions,
.gm-economy-anomaly__actions,
.gm-economy-projection__stats {
display: grid;
gap: 1rem;
}
.gm-economy-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gm-economy-vitals {
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
margin-top: 1rem;
}
.gm-economy-chart {
min-height: 16rem;
border: 1px solid var(--wm-border-subtle, rgba(255, 255, 255, 0.08));
border-radius: 1rem;
padding: 0.75rem;
background: linear-gradient(180deg, rgba(11, 19, 45, 0.85), rgba(8, 14, 31, 0.95));
}
.gm-economy-band,
.gm-economy-faction,
.gm-economy-anomaly,
.gm-economy-person-row,
.gm-economy-qr-row {
display: grid;
gap: 0.75rem;
}
.gm-economy-anomaly--critical {
border-color: rgba(248, 113, 113, 0.55);
box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.18);
}
.gm-economy-anomaly--warning {
border-color: rgba(250, 204, 21, 0.35);
}
.gm-economy-projection {
display: grid;
gap: 1rem;
margin-top: 1rem;
}
.gm-economy-projection__stats {
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.gm-command-center-economy__meta {
display: grid;
gap: 0.75rem;
margin-top: 1rem;
}
.gm-command-center-economy__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1rem;
}
@media (max-width: 960px) {
.gm-economy-grid {
grid-template-columns: 1fr;
}
}
.gm-field-mode-bar {
display: none;
gap: 0.8rem;
border: 1px solid color-mix(in srgb, var(--accent-primary), transparent 72%);
background:
linear-gradient(135deg, color-mix(in srgb, var(--accent-primary), transparent 92%), transparent),
color-mix(in srgb, var(--bg-card), black 4%);
box-shadow: 0 12px 32px rgba(8, 14, 38, 0.2);
}
.gm-field-mode-bar__summary,
.gm-field-mode-bar__chips,
.gm-field-mode-bar__actions,
.gm-field-pane-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
align-items: center;
}
.gm-field-mode-bar__summary {
justify-content: space-between;
}
.gm-field-mode-bar__eyebrow {
color: var(--text-muted);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.gm-field-mode-bar__title {
display: grid;
gap: 0.2rem;
}
.gm-field-mode-bar__title strong {
font-size: var(--font-size-base);
}
[data-field-mode-toggle].is-active {
border-color: color-mix(in srgb, var(--accent-primary), transparent 35%);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary), transparent 80%);
}
.gm-field-pane-tabs {
display: none;
}
.gm-field-pane-tabs .btn {
flex: 1 1 0;
min-height: 46px;
}
body[data-field-mode="true"] .gm-field-mode-bar {
display: grid;
}
@media (max-width: 760px) {
body[data-field-mode="true"] .gm-field-mode-bar {
position: sticky;
top: 0;
z-index: 30;
margin-inline: calc(-1 * var(--space-5));
padding: 0.95rem var(--space-5);
border-radius: 0 0 20px 20px;
border-top: 0;
}
body[data-field-mode="true"] .gm-field-mode-bar__actions .btn {
min-height: 48px;
}
body[data-field-mode="true"] .gm-field-pane-tabs {
position: sticky;
top: calc(3.6rem + max(0px, env(safe-area-inset-top)));
z-index: 24;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.55rem;
padding: 0.25rem 0 0.5rem;
background: var(--bg-primary);
}
body[data-field-mode="true"] [data-field-pane-mode="true"] {
display: block;
}
body[data-field-mode="true"][data-app-surface="gm-command-center"] .dashboard-nav,
body[data-field-mode="true"][data-app-surface="gm-command-center"] .gm-mobile-fab,
body[data-field-mode="true"][data-app-surface="gm-command-center"] .gm-field-note-fab,
body[data-field-mode="true"][data-app-surface="event-map"] .dashboard-nav,
body[data-field-mode="true"][data-app-surface="event-map"] .gm-mobile-fab,
body[data-field-mode="true"][data-app-surface="event-map"] .gm-field-note-fab,
body[data-field-mode="true"][data-app-surface="gm-incidents"] .dashboard-nav,
body[data-field-mode="true"][data-app-surface="gm-incidents"] .gm-mobile-fab,
body[data-field-mode="true"][data-app-surface="gm-incidents"] .gm-field-note-fab {
display: none;
}
body[data-field-mode="true"][data-app-surface="gm-command-center"] .gm-command-center-head__actions,
body[data-field-mode="true"][data-app-surface="event-map"] .event-map-war-room-header-actions,
body[data-field-mode="true"][data-app-surface="gm-incidents"] .staff-toolbar {
display: none;
}
body[data-field-mode="true"] .gm-command-center-page[data-field-pane-mode="true"] .gm-command-center-layout {
grid-template-columns: 1fr;
gap: 0.85rem;
}
body[data-field-mode="true"] .gm-command-center-page[data-field-pane-mode="true"] [data-field-pane] {
margin: 0;
}
body[data-field-mode="true"][data-app-surface="event-map"] .event-map-war-room-header .action-bar,
body[data-field-mode="true"][data-app-surface="event-map"] .event-map-war-room-banner,
body[data-field-mode="true"][data-app-surface="event-map"] .event-map-war-room-mobile-vitals-bar {
display: none;
}
body[data-field-mode="true"][data-app-surface="event-map"] .event-map-war-room-mobile-tabs {
top: calc(5.75rem + max(0px, env(safe-area-inset-top)));
}
body[data-field-mode="true"][data-app-surface="event-map"] .event-map-war-room-pane[data-map-war-room-pane="map"].is-active {
height: calc(100dvh - 240px);
}
body[data-field-mode="true"][data-app-surface="event-map"] .event-map-war-room-pane[data-map-war-room-pane="map"] .map-shell-toolbar {
padding: 0.85rem;
}
body[data-field-mode="true"][data-app-surface="gm-incidents"] .staff-stats {
display: none;
}
body[data-field-mode="true"][data-app-surface="gm-incidents"] .incident-filter-bar {
top: calc(4.2rem + max(0px, env(safe-area-inset-top)));
}
}
.event-map-war-room-page {
--event-map-war-room-border: rgba(91, 162, 255, 0.18);
--event-map-war-room-panel: linear-gradient(180deg, rgba(5, 12, 41, 0.9), rgba(10, 18, 52, 0.92));
--wr-border: rgba(91, 162, 255, 0.18);
--wr-panel: linear-gradient(180deg, rgba(5, 12, 41, 0.9), rgba(10, 18, 52, 0.92));
--wr-accent: rgba(91, 162, 255, 1);
}
.event-map-war-room-header,
.event-map-war-room-header-actions {
display: flex;
gap: 1rem;
align-items: flex-start;
justify-content: space-between;
}
.event-map-war-room-header-actions {
align-items: center;
}
.event-map-war-room-freshness {
display: flex;
flex-direction: column;
gap: 0.25rem;
align-items: flex-end;
}
.event-map-war-room-banner {
margin-bottom: 1rem;
}
.event-map-war-room-stale-banner {
margin-bottom: 1rem;
padding: 0.85rem 1rem;
border-radius: 16px;
border: 1px solid rgba(255, 159, 67, 0.42);
background: rgba(255, 159, 67, 0.12);
color: #ffe4bc;
}
.event-map-war-room-desktop-snapshot {
display: block;
}
.event-map-war-room-mobile-pane,
.event-map-war-room-mobile-detail-sheet {
display: none;
}
.event-map-war-room-mobile-vitals-bar {
display: none;
}
.event-map-war-room-mobile-tabs {
display: none;
gap: 0.5rem;
margin-bottom: 1rem;
overflow-x: auto;
}
.event-map-war-room-mobile-vital {
white-space: nowrap;
padding: 0.4rem 0.75rem;
border-radius: 999px;
font-size: 0.82rem;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
flex-shrink: 0;
}
.event-map-war-room-mobile-vital.tone-danger {
border-color: rgba(255, 107, 107, 0.38);
}
.event-map-war-room-mobile-vital.tone-warning {
border-color: rgba(255, 186, 73, 0.35);
}
.event-map-war-room-section,
.event-map-war-room-activity-shell,
.event-map-war-room-detail,
.event-map-war-room-sidebar,
.event-map-war-room-map-shell {
border: 1px solid var(--event-map-war-room-border);
background: var(--event-map-war-room-panel);
}
.event-map-war-room-vitals {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.85rem;
}
.event-map-war-room-vital {
display: grid;
gap: 0.35rem;
padding: 1rem;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
}
.event-map-war-room-vital.tone-warning,
.event-map-war-room-activity-item.tone-warning,
.event-map-war-room-attention.tone-warning {
border-color: rgba(255, 186, 73, 0.35);
}
.event-map-war-room-vital.tone-danger,
.event-map-war-room-activity-item.tone-danger,
.event-map-war-room-attention.tone-danger {
border-color: rgba(255, 107, 107, 0.38);
}
.event-map-war-room-vital-label {
color: rgba(223, 233, 255, 0.76);
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.event-map-war-room-vital-value {
font-size: clamp(1.6rem, 2vw, 2.1rem);
}
.event-map-war-room-attention-list,
.event-map-war-room-zone-list,
.event-map-war-room-activity-list,
.event-map-war-room-detail-stack {
display: grid;
gap: 0.85rem;
}
.event-map-war-room-attention,
.event-map-war-room-zone,
.event-map-war-room-activity-item {
display: grid;
gap: 0.65rem;
padding: 1rem;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
}
.event-map-war-room-zone.is-selected {
border-color: rgba(91, 162, 255, 0.55);
box-shadow: 0 0 0 1px rgba(91, 162, 255, 0.35);
}
.event-map-war-room-zone-metrics,
.event-map-war-room-zone-flags {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.event-map-war-room-grid {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
gap: 1rem;
align-items: start;
}
.event-map-war-room-pane {
min-width: 0;
}
.event-map-war-room-pane[data-map-war-room-pane="activity"] {
grid-column: 1 / -1;
}
.event-map-war-room-canvas {
position: relative;
margin-top: 1rem;
}
.event-map-war-room-canvas .event-map-surface,
.event-map-war-room-canvas .event-map-indoor {
min-height: 0;
height: clamp(320px, 50vh, 600px);
}
.event-map-war-room-map-shell .map-create-card {
margin-top: 1rem;
}
.event-map-war-room-detail,
.event-map-war-room-sidebar {
padding: 1rem;
}
.event-map-war-room-focus-shell,
.event-map-war-room-focus-cards {
display: grid;
gap: 0.75rem;
}
.event-map-war-room-focus-badges {
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 0.75rem;
}
.event-map-war-room-focus-cards {
margin-top: 0.75rem;
}
.event-map-war-room-focus-card {
background: rgba(255, 255, 255, 0.04);
}
.event-map-war-room-focus-scan-row {
gap: 0.5rem;
padding: 0.3rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.event-map-war-room-sidebar {
max-height: none;
overflow: visible;
}
.event-map-war-room-sidebar .event-map-sidebar-list {
max-height: min(28rem, calc(100vh - 320px));
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.event-map-war-room-activity-shell {
padding: 1rem;
}
.location-readiness-panel {
margin-top: 1rem;
}
.location-readiness-vitals .event-map-war-room-vital {
min-height: 100%;
}
@media (max-width: 1180px) {
.event-map-war-room-grid {
grid-template-columns: minmax(0, 1fr) minmax(300px, 0.92fr);
}
}
@media (max-width: 960px) {
.event-map-war-room-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.event-map-war-room-header,
.event-map-war-room-header-actions {
flex-direction: column;
align-items: stretch;
}
.event-map-war-room-freshness {
align-items: flex-start;
}
.event-map-war-room-mobile-vitals-bar,
.event-map-war-room-mobile-tabs {
position: sticky;
z-index: 50;
background: var(--bg-body);
}
.event-map-war-room-mobile-tabs {
top: 3.4rem;
display: flex;
margin-bottom: 0.75rem;
padding-bottom: 0.35rem;
}
.event-map-war-room-mobile-vitals-bar {
top: 0;
display: flex;
gap: 0.5rem;
overflow-x: auto;
scrollbar-width: none;
padding: 0.25rem 0 0.5rem;
margin-bottom: 0.5rem;
}
.event-map-war-room-desktop-snapshot,
.event-map-war-room-detail-stack {
display: none;
}
.event-map-war-room-mobile-pane {
display: none;
}
.event-map-war-room-pane {
display: none;
}
.event-map-war-room-pane.is-active {
display: block;
animation: event-map-war-room-pane-fade-in 0.15s ease-out;
}
.event-map-war-room-pane[data-map-war-room-pane="map"].is-active {
display: flex;
flex-direction: column;
height: calc(100vh - 140px);
height: calc(100dvh - 140px);
}
.event-map-war-room-pane[data-map-war-room-pane="map"] .map-shell-card {
flex: 1;
display: flex;
flex-direction: column;
padding: 0;
border: 0;
position: relative;
overflow: hidden;
}
.event-map-war-room-pane[data-map-war-room-pane="map"] .event-map-war-room-canvas {
flex: 1;
margin: 0;
}
.event-map-war-room-pane[data-map-war-room-pane="map"] .event-map-surface,
.event-map-war-room-pane[data-map-war-room-pane="map"] .event-map-indoor {
height: 100%;
}
.event-map-war-room-sidebar .event-map-sidebar-list {
max-height: min(24rem, calc(100vh - 280px));
}
.event-map-war-room-attention {
cursor: pointer;
padding: 0.85rem;
border-radius: 16px;
min-height: 44px;
}
.event-map-war-room-attention .action-bar {
gap: 0.35rem;
}
.event-map-war-room-attention .action-bar .btn {
flex: 1 1 0;
min-height: 44px;
font-size: 0.88rem;
}
.event-map-war-room-zone-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.35rem;
}
.event-map-war-room-zone-metrics .status-badge {
text-align: center;
font-size: 0.76rem;
padding: 0.3rem 0.4rem;
}
.event-map-war-room-zone .btn {
width: 100%;
min-height: 44px;
margin-top: 0.5rem;
}
.event-map-war-room-header .subtitle {
display: none;
}
.event-map-war-room-header .action-bar {
overflow-x: auto;
flex-wrap: nowrap;
scrollbar-width: none;
gap: 0.35rem;
}
.event-map-war-room-header .action-bar .btn {
flex-shrink: 0;
white-space: nowrap;
}
.event-map-war-room-header h1 {
font-size: 1.2rem;
}
.event-map-war-room-mobile-detail-sheet {
display: block;
position: fixed;
bottom: 0;
left: 0;
right: 0;
max-height: 60vh;
background: rgba(10, 18, 52, 0.96);
border-top: 1px solid rgba(91, 162, 255, 0.25);
border-radius: 20px 20px 0 0;
z-index: 900;
overflow-y: auto;
overscroll-behavior: contain;
padding: 0.5rem 1rem calc(1rem + var(--sab));
transform: translateY(100%);
transition: transform 0.25s ease-out;
}
.event-map-war-room-mobile-detail-sheet[data-visible="true"] {
transform: translateY(0);
}
.event-map-war-room-detail-sheet-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.event-map-war-room-detail-sheet-handle {
width: 40px;
height: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.25);
margin: 0 auto;
}
.event-map-war-room-detail-sheet-content .action-bar .btn,
.event-map-war-room-detail-sheet-content .action-bar a.btn {
min-height: 44px;
flex: 1 1 calc(50% - 0.35rem);
}
}
@keyframes event-map-war-room-pane-fade-in {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.wm-linked-panel {
margin-top: 1rem;
}
.wm-linked-panel__head {
align-items: flex-start;
gap: 0.9rem;
margin-bottom: 0.9rem;
}
.wm-linked-panel__head h3 {
margin: 0;
}
.wm-linked-panel__head .subtitle {
margin: 0.3rem 0 0;
max-width: 70ch;
}
.wm-linked-panel__empty {
margin: 0;
}
.wm-linked-groups {
display: grid;
gap: 0.9rem;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.wm-linked-group {
border: 1px solid var(--border-muted);
border-radius: 18px;
background: var(--surface-raised);
padding: 0.9rem;
display: grid;
gap: 0.8rem;
}
.wm-linked-group__head {
gap: 0.75rem;
}
.wm-linked-group__icon {
font-size: 1rem;
}
.wm-linked-group__items {
display: grid;
gap: 0.55rem;
}
.wm-linked-item {
display: grid;
gap: 0.12rem;
padding: 0.65rem 0.75rem;
border-radius: 14px;
background: color-mix(in srgb, var(--surface-panel) 90%, transparent);
border: 1px solid color-mix(in srgb, var(--border-muted) 88%, transparent);
color: inherit;
text-decoration: none;
}
.wm-linked-item:hover,
.wm-linked-item:focus-visible {
border-color: var(--interactive-primary);
background: color-mix(in srgb, var(--interactive-primary) 10%, var(--surface-panel));
}
.wm-linked-item__label {
font-weight: 600;
}
.wm-linked-item__meta {
color: var(--text-muted);
font-size: 0.9rem;
}
.wm-linked-group__actions {
display: flex;
justify-content: flex-start;
}
.wm-linked-panel-shell {
margin-top: 1rem;
}
@media (max-width: 760px) {
.wm-linked-groups {
grid-template-columns: 1fr;
}
}
.wm-quick-add-row td {
background: color-mix(in srgb, var(--surface-elevated, #18203a) 88%, var(--accent-500, #4ea3ff) 12%);
}
.wm-quick-add-form {
display: grid;
gap: 0.85rem;
}
.wm-quick-add-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.75rem;
flex-wrap: wrap;
}
.wm-quick-add-grid {
display: grid;
gap: 0.75rem;
align-items: end;
}
.wm-quick-add-grid-locations {
grid-template-columns: minmax(14rem, 2fr) repeat(2, minmax(10rem, 1fr)) auto;
}
.wm-quick-add-grid-qrcodes,
.wm-quick-add-grid-planner {
grid-template-columns: minmax(12rem, 1fr) minmax(16rem, 2fr) auto;
}
.wm-quick-add-actions {
display: flex;
align-items: end;
}
@media (max-width: 900px) {
.wm-quick-add-grid-locations,
.wm-quick-add-grid-qrcodes,
.wm-quick-add-grid-planner {
grid-template-columns: 1fr;
}
.wm-quick-add-actions {
justify-content: flex-start;
}
}
.planner-war-room-page {
--planner-war-room-border: rgba(91, 162, 255, 0.18);
--planner-war-room-panel: linear-gradient(180deg, rgba(5, 12, 41, 0.9), rgba(10, 18, 52, 0.92));
--wr-border: rgba(91, 162, 255, 0.18);
--wr-panel: linear-gradient(180deg, rgba(5, 12, 41, 0.9), rgba(10, 18, 52, 0.92));
--wr-accent: rgba(91, 162, 255, 1);
}
.planner-war-room-shell-header,
.planner-war-room-shell-meta,
.planner-war-room-command-top,
.planner-war-room-detail-head,
.planner-war-room-spatial-grid,
.planner-war-room-detail-grid,
.planner-war-room-zone-metrics {
display: flex;
gap: 1rem;
}
.planner-war-room-shell-header,
.planner-war-room-shell-meta,
.planner-war-room-command-top,
.planner-war-room-detail-head,
.planner-war-room-spatial-grid {
align-items: flex-start;
justify-content: space-between;
}
.planner-war-room-shell-actions,
.planner-war-room-day-switcher,
.planner-war-room-mobile-tabs,
.planner-war-room-chip-row,
.planner-war-room-floor-tabs,
.planner-war-room-zone-metrics {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.planner-war-room-shell-meta {
align-items: center;
}
.planner-war-room-freshness {
display: flex;
flex-direction: column;
gap: 0.25rem;
align-items: flex-end;
}
.planner-war-room-stale-banner {
margin-bottom: 1rem;
padding: 0.85rem 1rem;
border-radius: 16px;
border: 1px solid rgba(255, 159, 67, 0.42);
background: rgba(255, 159, 67, 0.12);
color: #ffe4bc;
}
.planner-war-room-mobile-tabs {
display: none;
margin-bottom: 1rem;
overflow-x: auto;
}
.planner-war-room-grid {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.95fr) minmax(280px, 0.85fr);
gap: 1rem;
align-items: start;
}
.planner-war-room-pane {
min-width: 0;
}
.planner-war-room-section,
.planner-war-room-lane,
.planner-war-room-card,
.planner-war-room-attention,
.planner-war-room-vital,
.planner-war-room-zone,
.planner-war-room-hotspot,
.planner-war-room-activity-item,
.planner-war-room-floor-canvas,
.planner-war-room-detail {
border: 1px solid var(--planner-war-room-border);
background: var(--planner-war-room-panel);
}
.planner-war-room-command,
.planner-war-room-spatial,
.planner-war-room-activity,
.planner-war-room-detail {
padding: 1rem;
}
.planner-war-room-eyebrow,
.planner-war-room-vital-label {
color: rgba(223, 233, 255, 0.76);
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.planner-war-room-vitals {
margin-top: 1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0.85rem;
}
.planner-war-room-vital {
display: grid;
gap: 0.35rem;
padding: 1rem;
border-radius: 18px;
}
.planner-war-room-vital-value {
font-size: clamp(1.5rem, 2vw, 2rem);
}
.planner-war-room-attention-list,
.planner-war-room-card-list,
.planner-war-room-detail-stack,
.planner-war-room-hotspot-list,
.planner-war-room-activity-list {
display: grid;
gap: 0.85rem;
}
.planner-war-room-attention,
.planner-war-room-card,
.planner-war-room-zone,
.planner-war-room-hotspot,
.planner-war-room-activity-item {
display: grid;
gap: 0.6rem;
padding: 1rem;
border-radius: 18px;
}
.planner-war-room-lanes {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.planner-war-room-lane {
display: grid;
gap: 0.85rem;
padding: 1rem;
border-radius: 20px;
}
.planner-war-room-lane.is-collapsed .planner-war-room-card-list {
max-height: 18rem;
overflow: auto;
}
.planner-war-room-lane-header,
.planner-war-room-card-top,
.planner-war-room-zone,
.planner-war-room-hotspot,
.planner-war-room-activity-item {
align-items: start;
}
.planner-war-room-lane-header,
.planner-war-room-card-top {
display: flex;
gap: 0.55rem;
justify-content: space-between;
}
.planner-war-room-card {
color: inherit;
text-decoration: none;
}
.planner-war-room-card:hover,
.planner-war-room-zone:hover,
.planner-war-room-hotspot:hover,
.planner-war-room-activity-item:hover {
transform: translateY(-1px);
}
.planner-war-room-card.is-selected,
.planner-war-room-zone.is-selected,
.planner-war-room-overlay.is-selected,
.planner-war-room-hotspot.is-selected {
box-shadow: 0 0 0 1px rgba(91, 162, 255, 0.38);
border-color: rgba(91, 162, 255, 0.6);
}
.planner-war-room-card.tone-danger,
.planner-war-room-attention.tone-danger,
.planner-war-room-activity-item.tone-danger {
border-color: rgba(255, 107, 107, 0.45);
}
.planner-war-room-card.tone-warning,
.planner-war-room-attention.tone-warning,
.planner-war-room-activity-item.tone-warning {
border-color: rgba(255, 186, 73, 0.42);
}
.planner-war-room-card-meta {
color: rgba(223, 233, 255, 0.72);
font-size: 0.92rem;
}
.planner-war-room-chip {
padding: 0.28rem 0.6rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
color: rgba(223, 233, 255, 0.88);
font-size: 0.8rem;
}
.planner-war-room-detail-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
margin: 1rem 0;
}
.planner-war-room-detail-notes {
margin-bottom: 1rem;
}
.planner-war-room-floor-stack {
margin: 1rem 0;
}
.planner-war-room-floor {
display: none;
}
.planner-war-room-floor.is-active {
display: block;
}
.planner-war-room-floor-canvas {
position: relative;
min-height: 340px;
border-radius: 22px;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.03);
background-image:
linear-gradient(rgba(91, 162, 255, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(91, 162, 255, 0.08) 1px, transparent 1px);
background-size: 48px 48px;
background-position: center;
}
.planner-war-room-floor-canvas.has-image {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.planner-war-room-overlay {
position: absolute;
left: clamp(60px, calc(var(--overlay-x) * 1%), calc(100% - 60px));
top: clamp(30px, calc(var(--overlay-y) * 1%), calc(100% - 30px));
transform: translate(-50%, -50%);
padding: 0.5rem 0.65rem;
border-radius: 16px;
color: inherit;
text-decoration: none;
text-align: left;
min-width: 0;
max-width: min(160px, 40%);
background: rgba(10, 18, 52, 0.92);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
appearance: none;
cursor: pointer;
}
.planner-war-room-overlay.layer-active {
border-color: rgba(80, 200, 120, 0.55);
}
.planner-war-room-overlay.layer-soon {
border-color: rgba(255, 186, 73, 0.55);
}
.planner-war-room-overlay small {
display: block;
color: rgba(223, 233, 255, 0.72);
}
.planner-war-room-zone-list {
display: grid;
gap: 0.85rem;
min-width: 0;
flex: 1 1 0;
}
.planner-war-room-zone,
.planner-war-room-hotspot,
.planner-war-room-activity-item {
color: inherit;
text-decoration: none;
}
.planner-war-room-zone,
.planner-war-room-hotspot {
width: 100%;
appearance: none;
text-align: left;
cursor: pointer;
}
.planner-war-room-hotspot-list {
min-width: 0;
flex: 1 1 240px;
}
.planner-war-room-zone-metrics span {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.55rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
white-space: nowrap;
}
.planner-war-room-zone-metrics span.tone-danger {
border-color: rgba(255, 107, 107, 0.45);
}
.planner-war-room-zone-metrics span.tone-warning {
border-color: rgba(255, 186, 73, 0.42);
}
.planner-war-room-zone-metrics span.tone-success {
border-color: rgba(80, 200, 120, 0.4);
}
.planner-war-room-zone-metrics span.tone-info {
border-color: rgba(91, 162, 255, 0.45);
}
@media (max-width: 1180px) {
.planner-war-room-grid,
.planner-war-room-lanes,
.planner-war-room-detail-grid {
grid-template-columns: 1fr;
}
.planner-war-room-spatial-grid {
flex-direction: column;
}
.planner-war-room-hotspot-list {
flex-basis: auto;
}
}
@media (max-width: 760px) {
.planner-war-room-overlay {
left: clamp(52px, calc(var(--overlay-x) * 1%), calc(100% - 52px));
top: clamp(28px, calc(var(--overlay-y) * 1%), calc(100% - 28px));
max-width: min(132px, 46%);
padding: 0.4rem 0.55rem;
}
}
@media (max-width: 760px) {
.planner-war-room-shell-header,
.planner-war-room-shell-meta,
.planner-war-room-command-top,
.planner-war-room-detail-head {
flex-direction: column;
align-items: stretch;
}
.planner-war-room-freshness {
align-items: flex-start;
}
.planner-war-room-mobile-tabs {
display: flex;
}
.planner-war-room-pane {
display: none;
}
.planner-war-room-pane.is-active {
display: block;
}
.planner-war-room-overlay {
min-width: 100px;
font-size: 0.82rem;
}
}
.planner-war-room-pane-mobile-only,
.planner-war-room-mobile-day-bar,
.planner-war-room-mobile-vitals-bar,
.planner-war-room-mobile-detail-sheet,
.planner-war-room-header-overflow,
.planner-war-room-mobile-inline-edit {
display: none;
}
.planner-war-room-card,
.planner-war-room-lane-summary,
.planner-war-room-header-overflow summary {
appearance: none;
}
.planner-war-room-card {
width: 100%;
text-align: left;
cursor: pointer;
}
.planner-war-room-lane-collapse .planner-war-room-card-list {
margin-top: 0.85rem;
}
.planner-war-room-lane-summary {
display: flex;
align-items: start;
justify-content: space-between;
gap: 0.75rem;
cursor: pointer;
list-style: none;
}
.planner-war-room-lane-summary::-webkit-details-marker,
.planner-war-room-header-overflow summary::-webkit-details-marker {
display: none;
}
.planner-war-room-form-error {
margin-bottom: 1rem;
padding: 0.85rem 1rem;
border-radius: 16px;
border: 1px solid rgba(255, 107, 107, 0.45);
background: rgba(255, 107, 107, 0.1);
color: #ffd8d8;
}
.planner-war-room-header-overflow {
position: relative;
}
.planner-war-room-header-overflow-panel {
position: absolute;
right: 0;
top: calc(100% + 0.4rem);
z-index: 20;
display: none;
min-width: 220px;
padding: 0.75rem;
border-radius: 16px;
border: 1px solid rgba(91, 162, 255, 0.18);
background: rgba(10, 18, 52, 0.96);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}
.planner-war-room-header-overflow[open] .planner-war-room-header-overflow-panel {
display: grid;
gap: 0.35rem;
}
@media (max-width: 760px) {
.planner-war-room-desktop-only,
.planner-war-room-day-switcher,
.planner-war-room-vitals,
.planner-war-room-floor-stack,
.planner-war-room-floor-tabs,
.planner-war-room-hotspot-list {
display: none;
}
.planner-war-room-pane-mobile-only,
.planner-war-room-mobile-day-bar,
.planner-war-room-mobile-vitals-bar,
.planner-war-room-header-overflow,
.planner-war-room-mobile-detail-sheet,
.planner-war-room-mobile-inline-edit {
display: block;
}
.planner-war-room-shell-actions {
flex-wrap: nowrap;
}
.planner-war-room-shell-actions > *:not(:first-child):not(.planner-war-room-header-overflow) {
display: none;
}
.planner-war-room-mobile-day-bar,
.planner-war-room-mobile-vitals-bar,
.planner-war-room-mobile-tabs {
position: sticky;
z-index: 50;
background: var(--bg-body);
}
.planner-war-room-mobile-day-bar {
top: 0;
display: flex;
gap: 0.4rem;
overflow-x: auto;
scrollbar-width: none;
padding: 0.25rem 0 0.5rem;
}
.planner-war-room-day-pill,
.planner-war-room-mobile-vital {
flex-shrink: 0;
white-space: nowrap;
border-radius: 999px;
min-height: 44px;
display: inline-flex;
align-items: center;
}
.planner-war-room-day-pill {
padding: 0.45rem 0.85rem;
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.04);
color: var(--text-primary);
font-size: 0.88rem;
font-weight: 600;
text-decoration: none;
}
.planner-war-room-day-pill.is-active {
background: var(--accent-primary);
border-color: var(--accent-primary);
color: #fff;
}
.planner-war-room-mobile-vitals-bar {
top: 3.4rem;
display: flex;
gap: 0.5rem;
overflow-x: auto;
scrollbar-width: none;
padding: 0.25rem 0 0.5rem;
}
.planner-war-room-mobile-vital {
padding: 0.4rem 0.75rem;
font-size: 0.82rem;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
}
.planner-war-room-mobile-tabs {
top: 6.9rem;
margin-bottom: 0.75rem;
padding-bottom: 0.35rem;
}
.planner-war-room-lanes,
.planner-war-room-zone-metrics {
grid-template-columns: 1fr;
}
.planner-war-room-lane {
padding: 0.75rem;
}
.planner-war-room-attention .action-bar,
.planner-war-room-mobile-map-link {
display: grid;
gap: 0.35rem;
}
.planner-war-room-attention .action-bar .btn,
.planner-war-room-mobile-map-link .btn {
width: 100%;
min-height: 44px;
justify-content: center;
}
.planner-war-room-spatial-grid {
flex-direction: column;
}
.planner-war-room-zone-metrics {
display: grid;
gap: 0.3rem;
}
.planner-war-room-zone {
padding: 0.85rem;
}
.planner-war-room-mobile-detail-sheet {
position: fixed;
left: 0;
right: 0;
bottom: 0;
max-height: 65vh;
padding: 0.5rem 1rem calc(1rem + var(--sab));
overflow-y: auto;
overscroll-behavior: contain;
border-top: 1px solid rgba(91, 162, 255, 0.25);
border-radius: 20px 20px 0 0;
background: rgba(10, 18, 52, 0.96);
z-index: 900;
transform: translateY(100%);
transition: transform 0.25s ease-out;
}
.planner-war-room-mobile-detail-sheet[data-visible="true"] {
transform: translateY(0);
}
.planner-war-room-detail-sheet-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.planner-war-room-detail-sheet-handle {
width: 40px;
height: 4px;
margin: 0 auto;
border-radius: 999px;
background: rgba(255, 255, 255, 0.25);
}
.planner-war-room-detail-sheet-content .action-bar .btn,
.planner-war-room-detail-sheet-content .action-bar a.btn {
min-height: 44px;
flex: 1 1 calc(50% - 0.35rem);
}
}
.social-capital-war-room-page {
--social-capital-border: rgba(91, 162, 255, 0.18);
--social-capital-panel: linear-gradient(180deg, rgba(6, 14, 44, 0.92), rgba(12, 20, 58, 0.94));
--wr-border: rgba(91, 162, 255, 0.18);
--wr-panel: linear-gradient(180deg, rgba(6, 14, 44, 0.92), rgba(12, 20, 58, 0.94));
--wr-accent: rgba(91, 162, 255, 1);
}
.social-capital-war-room-header,
.social-capital-war-room-header-actions,
.social-capital-war-room-command-top,
.social-capital-war-room-detail-head,
.social-capital-war-room-detail-metrics,
.social-capital-war-room-detail-grid {
display: flex;
gap: 1rem;
}
.social-capital-war-room-header,
.social-capital-war-room-command-top,
.social-capital-war-room-detail-head {
align-items: flex-start;
justify-content: space-between;
}
.social-capital-war-room-header-actions,
.social-capital-war-room-chip-row,
.social-capital-war-room-mobile-tabs,
.social-capital-war-room-detail-metrics {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.social-capital-war-room-header-actions,
.social-capital-war-room-freshness {
align-items: center;
}
.social-capital-war-room-mobile-attention-list,
.social-capital-war-room-faction-bar,
.social-capital-war-room-mobile-faction-balance {
display: none;
}
.social-capital-war-room-freshness {
display: flex;
flex-direction: column;
gap: 0.25rem;
align-items: flex-end;
}
.social-capital-war-room-stale-banner {
margin-bottom: 1rem;
padding: 0.85rem 1rem;
border-radius: 16px;
border: 1px solid rgba(255, 159, 67, 0.42);
background: rgba(255, 159, 67, 0.12);
color: #ffe4bc;
}
.social-capital-war-room-mobile-tabs {
display: none;
margin-bottom: 1rem;
overflow-x: auto;
}
.social-capital-war-room-grid {
display: grid;
grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.25fr);
gap: 1rem;
align-items: start;
}
.social-capital-war-room-pane-scroller {
display: grid;
gap: 1rem;
}
.social-capital-war-room-board-grid,
.social-capital-war-room-vitals,
.social-capital-war-room-attention-list,
.social-capital-war-room-card-list,
.social-capital-war-room-bucket-list,
.social-capital-war-room-activity-list,
.social-capital-war-room-feed-mini {
display: grid;
gap: 0.85rem;
}
.social-capital-war-room-board-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 1rem;
}
.social-capital-war-room-vitals {
margin-top: 1rem;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.social-capital-war-room-section,
.social-capital-war-room-vital,
.social-capital-war-room-attention,
.social-capital-war-room-card,
.social-capital-war-room-bucket,
.social-capital-war-room-activity-item,
.social-capital-war-room-detail {
border: 1px solid var(--social-capital-border);
background: var(--social-capital-panel);
}
.social-capital-war-room-command,
.social-capital-war-room-detail,
.social-capital-war-room-activity,
.social-capital-war-room-module {
padding: 1rem;
}
.social-capital-war-room-vital,
.social-capital-war-room-attention,
.social-capital-war-room-card,
.social-capital-war-room-bucket,
.social-capital-war-room-activity-item {
padding: 1rem;
border-radius: 18px;
}
.social-capital-war-room-card,
.social-capital-war-room-feed-mini-item {
color: inherit;
text-decoration: none;
}
.social-capital-war-room-card,
.social-capital-war-room-attention,
.social-capital-war-room-activity-item,
.social-capital-war-room-feed-mini-item {
background: rgba(255, 255, 255, 0.04);
}
.social-capital-war-room-card.is-selected {
border-color: rgba(91, 162, 255, 0.6);
box-shadow: 0 0 0 1px rgba(91, 162, 255, 0.35);
}
.social-capital-war-room-eyebrow,
.social-capital-war-room-vital-label {
color: rgba(223, 233, 255, 0.74);
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.social-capital-war-room-vital-value {
font-size: clamp(1.45rem, 2vw, 1.95rem);
}
.social-capital-war-room-chip {
display: inline-flex;
align-items: center;
padding: 0.28rem 0.62rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
color: rgba(223, 233, 255, 0.9);
font-size: 0.82rem;
text-decoration: none;
}
.social-capital-war-room-progress {
height: 0.55rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.social-capital-war-room-progress span {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, rgba(91, 162, 255, 0.55), rgba(81, 226, 171, 0.85));
}
.social-capital-war-room-card-stats {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
font-size: 0.82rem;
color: rgba(223, 233, 255, 0.76);
}
.social-capital-war-room-subsection {
margin-top: 1rem;
}
.social-capital-war-room-detail-metrics article {
display: grid;
gap: 0.25rem;
min-width: 88px;
padding: 0.75rem;
border-radius: 16px;
background: rgba(255, 255, 255, 0.04);
}
.social-capital-war-room-detail-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 1rem;
}
.social-capital-war-room-detail-actions {
display: flex;
gap: 0.55rem;
flex-wrap: wrap;
align-items: center;
}
.social-capital-war-room-detail-actions form {
margin: 0;
}
.social-capital-war-room-feed-mini-item {
display: flex;
justify-content: space-between;
gap: 0.75rem;
padding: 0.65rem 0.75rem;
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
}
.social-capital-war-room-activity-time {
display: inline-flex;
flex-direction: column;
align-items: flex-end;
}
.social-capital-war-room-activity-time-ago {
display: none;
}
.social-capital-war-room-feed-badge {
margin-left: 0.35rem;
}
.social-capital-war-room-faction-segment {
min-width: 0.85rem;
}
.social-capital-war-room-faction-legend {
display: none;
}
.social-capital-war-room-feed-filters {
align-items: center;
}
.faction-dot {
display: inline-block;
width: 0.55rem;
height: 0.55rem;
border-radius: 999px;
margin-right: 0.28rem;
vertical-align: middle;
}
.social-capital-war-room-pane {
min-width: 0;
}
.tone-danger {
border-color: rgba(255, 107, 107, 0.45);
}
.tone-warning {
border-color: rgba(255, 186, 73, 0.42);
}
.tone-success {
border-color: rgba(81, 226, 171, 0.35);
}
@media (max-width: 1100px) {
.social-capital-war-room-board-grid,
.social-capital-war-room-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 780px) {
.social-capital-war-room-mobile-tabs {
display: flex;
}
.social-capital-war-room-pane-scroller {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
scroll-behavior: smooth;
gap: 0;
}
.social-capital-war-room-pane-scroller::-webkit-scrollbar {
display: none;
}
.social-capital-war-room-pane-scroller > *,
.social-capital-war-room-grid > * {
flex: 0 0 100%;
min-width: 100%;
scroll-snap-align: start;
}
.social-capital-war-room-grid {
display: contents;
}
.social-capital-war-room-pane {
display: block;
}
.social-capital-war-room-header,
.social-capital-war-room-header-actions,
.social-capital-war-room-command-top,
.social-capital-war-room-detail-head,
.social-capital-war-room-detail-grid {
display: grid;
}
.social-capital-war-room-detail-grid {
grid-template-columns: 1fr;
}
.social-capital-war-room-mobile-attention-list,
.social-capital-war-room-mobile-faction-balance,
.social-capital-war-room-faction-bar {
display: grid;
}
.social-capital-war-room-mobile-attention-list {
gap: 0.65rem;
margin-bottom: 1rem;
}
.social-capital-war-room-board-grid {
display: none;
}
.social-capital-war-room-faction-bar {
display: flex;
height: 1.4rem;
border-radius: 999px;
overflow: hidden;
margin-top: 0.85rem;
}
.social-capital-war-room-faction-legend {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
font-size: 0.78rem;
color: rgba(223, 233, 255, 0.76);
margin-top: 0.65rem;
}
.social-capital-war-room-vitals {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.social-capital-war-room-feed-filters {
display: flex;
gap: 0.4rem;
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 0.5rem;
position: sticky;
top: 0;
z-index: 10;
background: var(--social-capital-panel);
}
.social-capital-war-room-feed-filters::-webkit-scrollbar {
display: none;
}
.social-capital-war-room-activity-time-ago {
display: inline;
}
.social-capital-war-room-activity-time-label {
display: none;
}
}
.shadow-war-room-page {
--shadow-room-border: rgba(119, 153, 255, 0.18);
--shadow-room-panel: linear-gradient(180deg, rgba(7, 14, 38, 0.94), rgba(12, 20, 46, 0.96));
--wr-border: rgba(119, 153, 255, 0.18);
--wr-panel: linear-gradient(180deg, rgba(7, 14, 38, 0.94), rgba(12, 20, 46, 0.96));
--wr-accent: rgba(119, 153, 255, 1);
}
.shadow-war-room-header,
.shadow-war-room-header-actions,
.shadow-war-room-command-top,
.shadow-war-room-detail-head,
.shadow-war-room-detail-metrics,
.shadow-war-room-detail-grid {
display: flex;
gap: 1rem;
}
.shadow-war-room-header,
.shadow-war-room-command-top,
.shadow-war-room-detail-head {
align-items: flex-start;
justify-content: space-between;
}
.shadow-war-room-header-actions,
.shadow-war-room-chip-row,
.shadow-war-room-mobile-tabs,
.shadow-war-room-detail-metrics {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.shadow-war-room-header-actions,
.shadow-war-room-freshness {
align-items: center;
}
.shadow-war-room-freshness {
display: flex;
flex-direction: column;
gap: 0.25rem;
align-items: flex-end;
}
.shadow-war-room-mobile-actions-trigger,
.shadow-war-room-mobile-priority-list {
display: none;
}
.shadow-war-room-stale-banner {
margin-bottom: 1rem;
padding: 0.85rem 1rem;
border-radius: 16px;
border: 1px solid rgba(255, 159, 67, 0.42);
background: rgba(255, 159, 67, 0.12);
color: #ffe4bc;
}
.shadow-war-room-mobile-tabs {
display: none;
margin-bottom: 1rem;
overflow-x: auto;
}
.shadow-war-room-grid {
display: grid;
grid-template-columns: minmax(320px, 0.98fr) minmax(0, 1.2fr);
gap: 1rem;
align-items: start;
}
.shadow-war-room-pane-scroller {
display: grid;
gap: 1rem;
}
.shadow-war-room-board-grid,
.shadow-war-room-vitals,
.shadow-war-room-attention-list,
.shadow-war-room-card-list,
.shadow-war-room-activity-list,
.shadow-war-room-feed-mini {
display: grid;
gap: 0.85rem;
}
.shadow-war-room-board-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.shadow-war-room-vitals {
margin-top: 1rem;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.shadow-war-room-section,
.shadow-war-room-vital,
.shadow-war-room-attention,
.shadow-war-room-card,
.shadow-war-room-activity-item,
.shadow-war-room-detail,
.shadow-war-room-lane {
border: 1px solid var(--shadow-room-border);
background: var(--shadow-room-panel);
}
.shadow-war-room-command,
.shadow-war-room-detail,
.shadow-war-room-activity,
.shadow-war-room-module,
.shadow-war-room-lane {
padding: 1rem;
}
.shadow-war-room-vital,
.shadow-war-room-attention,
.shadow-war-room-card,
.shadow-war-room-activity-item,
.shadow-war-room-feed-mini-item {
padding: 1rem;
border-radius: 18px;
}
.shadow-war-room-card,
.shadow-war-room-feed-mini-item,
.shadow-war-room-chip {
color: inherit;
text-decoration: none;
}
.shadow-war-room-card,
.shadow-war-room-attention,
.shadow-war-room-activity-item,
.shadow-war-room-feed-mini-item {
background: rgba(255, 255, 255, 0.04);
}
.shadow-war-room-eyebrow,
.shadow-war-room-vital-label {
color: rgba(223, 233, 255, 0.74);
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.shadow-war-room-vital-value {
font-size: clamp(1.4rem, 2vw, 1.95rem);
}
.shadow-war-room-chip {
display: inline-flex;
align-items: center;
padding: 0.28rem 0.62rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
color: rgba(223, 233, 255, 0.9);
font-size: 0.82rem;
}
.shadow-war-room-filter-row {
margin-top: 1rem;
}
.shadow-war-room-detail-metrics article {
display: grid;
gap: 0.25rem;
min-width: 90px;
padding: 0.75rem;
border-radius: 16px;
background: rgba(255, 255, 255, 0.04);
}
.shadow-war-room-detail-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 1rem;
}
.shadow-war-room-detail-actions,
.shadow-war-room-detail-quick-actions,
.shadow-war-room-subsection {
margin-top: 1rem;
}
.shadow-war-room-detail-quick-actions {
display: flex;
gap: 0.55rem;
flex-wrap: wrap;
}
.shadow-war-room-config-header {
display: none;
}
.shadow-war-room-feed-filters {
align-items: center;
}
.shadow-war-room-observation-note {
margin-bottom: 0.55rem;
}
.shadow-war-room-note-toggle {
display: none;
}
.shadow-war-room-advice-list {
margin: 0.85rem 0 0;
padding-left: 1.1rem;
}
.shadow-war-room-advice-list li + li {
margin-top: 0.55rem;
}
.shadow-war-room-pane {
min-width: 0;
}
.shadow-war-room-card.is-focused,
.shadow-war-room-attention.is-focused {
box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.45);
border-color: rgba(96, 165, 250, 0.58);
}
.tone-danger {
border-color: rgba(255, 107, 107, 0.45);
}
.tone-warning {
border-color: rgba(255, 186, 73, 0.42);
}
.tone-success {
border-color: rgba(81, 226, 171, 0.35);
}
@media (max-width: 1100px) {
.shadow-war-room-board-grid,
.shadow-war-room-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 780px) {
.shadow-war-room-desktop-actions {
display: none;
}
.shadow-war-room-mobile-actions-trigger {
display: inline-flex;
}
.shadow-war-room-mobile-tabs {
display: flex;
}
.shadow-war-room-pane-scroller {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
scroll-behavior: smooth;
gap: 0;
}
.shadow-war-room-pane-scroller::-webkit-scrollbar {
display: none;
}
.shadow-war-room-pane-scroller > *,
.shadow-war-room-grid > * {
flex: 0 0 100%;
min-width: 100%;
scroll-snap-align: start;
}
.shadow-war-room-grid {
display: contents;
}
.shadow-war-room-pane {
display: block;
}
.shadow-war-room-header,
.shadow-war-room-header-actions,
.shadow-war-room-command-top,
.shadow-war-room-detail-head,
.shadow-war-room-detail-grid {
display: grid;
}
.shadow-war-room-detail-grid {
grid-template-columns: 1fr;
}
.shadow-war-room-config-header {
position: sticky;
top: 0;
z-index: 30;
display: grid;
gap: 0.15rem;
background: var(--shadow-room-panel);
border-bottom: 1px solid var(--shadow-room-border);
padding: 0.55rem 0.75rem;
margin: -1rem -1rem 0.75rem;
width: calc(100% + 2rem);
}
.shadow-war-room-mobile-priority-list {
display: grid;
gap: 0.65rem;
}
.shadow-war-room-board-grid {
display: none;
}
.shadow-war-room-feed-filters {
display: flex;
gap: 0.4rem;
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 0.5rem;
position: sticky;
top: 0;
z-index: 10;
background: var(--shadow-room-panel);
}
.shadow-war-room-feed-filters::-webkit-scrollbar {
display: none;
}
.shadow-war-room-observation-note {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.shadow-war-room-observation-note.is-expanded {
-webkit-line-clamp: unset;
}
.shadow-war-room-note-toggle {
display: inline-flex;
margin-bottom: 0.4rem;
}
}
.profile-page {
display: grid;
gap: var(--space-5);
}
.profile-header-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.4rem;
}
.profile-section {
display: grid;
gap: 0.9rem;
}
.profile-section-title {
display: flex;
align-items: center;
gap: 0.7rem;
margin: 0;
color: var(--text-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.profile-section-title::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: color-mix(in srgb, var(--border), white 10%);
}
.profile-overview-groups {
display: grid;
gap: 1rem;
}
.profile-lazy-zone {
display: grid;
gap: 0.75rem;
}
.profile-skeleton-card {
display: grid;
gap: 0.65rem;
}
.profile-skeleton-card[aria-busy="true"] {
opacity: 1;
}
.profile-skeleton-line--wide {
width: 78%;
}
.profile-skeleton-line--medium {
width: 56%;
}
.profile-skeleton-line--narrow {
width: 36%;
}
.profile-quest-list {
display: grid;
gap: 0.75rem;
}
.profile-quest-list__footer {
display: flex;
justify-content: flex-start;
}
.profile-drawer {
position: fixed;
inset: 0;
z-index: var(--z-drawer);
pointer-events: none;
}
.profile-drawer[hidden] {
display: block;
}
.profile-drawer.is-open {
pointer-events: auto;
}
.profile-drawer__overlay {
position: absolute;
inset: 0;
background: rgba(2, 6, 18, 0.72);
opacity: 0;
transition: opacity var(--transition-slow);
}
.profile-drawer.is-open .profile-drawer__overlay {
opacity: 1;
}
.profile-drawer__panel {
position: absolute;
top: 0;
right: 0;
width: min(420px, 100%);
height: 100%;
padding: 1rem;
transform: translateX(100%);
transition: transform var(--transition-slow);
overflow-y: auto;
}
.profile-drawer.is-open .profile-drawer__panel {
transform: translateX(0);
}
.profile-drawer__panel .connection-preview-card {
min-height: calc(100% - 2rem);
}
.profile-drawer__close {
position: sticky;
top: 0;
margin-left: auto;
z-index: 2;
}
@media (max-width: 768px) {
.profile-header-actions {
justify-content: flex-start;
}
.profile-drawer__panel {
width: 100%;
}
}
.firefly-mood {
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.78rem;
color: var(--text-muted);
margin-bottom: 0.9rem;
}
.firefly-line {
margin: 0;
line-height: 1.35;
}
.firefly-subtext {
margin-top: 1rem;
color: var(--text-secondary);
}
.firefly-ack {
margin-top: 1.4rem;
}
.firefly-secret-note {
margin-top: 0.65rem;
color: #ffd79e;
}
.firefly-single_line .firefly-line {
font-size: clamp(1.6rem, 4vw, 3rem);
font-family: "Libre Baskerville", Georgia, serif;
}
.firefly-letter .firefly-content {
background: rgba(20, 15, 7, 0.74);
border: 1px solid rgba(255, 214, 154, 0.26);
border-radius: 14px;
padding: clamp(1.2rem, 3vw, 2.2rem);
box-shadow: 0 0 0 1px rgba(255, 214, 154, 0.08), 0 10px 40px rgba(0, 0, 0, 0.38);
}
.firefly-letter .firefly-line {
font-size: clamp(1.3rem, 3vw, 2.1rem);
font-family: "Libre Baskerville", Georgia, serif;
}
.firefly-minimal {
background: #fcfcfc;
color: #111;
}
.firefly-minimal .firefly-line {
font-size: clamp(1rem, 2vw, 1.3rem);
font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
font-weight: 500;
}
.firefly-minimal .firefly-mood,
.firefly-minimal .firefly-subtext,
.firefly-minimal .firefly-secret-note {
color: #444;
}
.circle-page {
min-height: 100vh;
background:
radial-gradient(circle at 12% 0%, rgba(255, 196, 121, 0.14), transparent 44%),
radial-gradient(circle at 88% 90%, rgba(126, 213, 255, 0.11), transparent 42%),
#050816;
}
.circle-shell {
width: min(920px, 100%);
margin: 0 auto;
}
.circle-kicker {
text-transform: uppercase;
letter-spacing: 0.12em;
}
.circle-state-text {
font-size: 1.15rem;
margin: 0.75rem 0 0.45rem;
}
.circle-count {
margin: 0.75rem 0;
color: var(--text-secondary);
}
.circle-input {
margin-top: 0.4rem;
}
.circle-spoken {
margin-top: 0.75rem;
font-size: 1.05rem;
color: var(--text-secondary);
}
.circle-reveal-list {
display: grid;
gap: 0.65rem;
margin-top: 0.9rem;
}
.circle-reveal-item {
margin: 0;
padding: 0.75rem 0.85rem;
border-radius: 12px;
border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
background: color-mix(in srgb, var(--bg-secondary) 86%, transparent);
color: var(--text-primary);
opacity: 0;
transform: translateY(8px);
animation: circleRevealIn 0.45s ease forwards;
animation-delay: calc(var(--idx, 0) * 1.8s);
}
.circle-style-scroll .circle-reveal-item {
animation-delay: calc(var(--idx, 0) * 0.25s);
}
.circle-style-constellation {
position: relative;
min-height: 420px;
overflow: hidden;
border-radius: 16px;
border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
background:
radial-gradient(circle at 14% 10%, rgba(255, 224, 162, 0.08), transparent 45%),
radial-gradient(circle at 80% 86%, rgba(123, 176, 255, 0.1), transparent 42%),
color-mix(in srgb, var(--bg-secondary) 80%, black 8%);
}
.circle-style-constellation .circle-reveal-item {
position: absolute;
max-width: min(280px, 72vw);
margin: 0;
animation-delay: calc(var(--idx, 0) * 0.3s);
}
@keyframes circleRevealIn {
to {
opacity: 1;
transform: translateY(0);
}
}
.submissions-page {
--gm-page-max-width: 1320px;
max-width: var(--gm-page-max-width);
}
.submissions-filter-grid {
display: grid;
gap: 0.75rem;
grid-template-columns: 1.8fr repeat(3, minmax(0, 1fr)) auto;
align-items: end;
}
.submissions-filter-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.submissions-filter-actions .btn {
min-height: 40px;
}
.submissions-stats {
margin-top: 0.75rem;
}
.submissions-bulk-toolbar {
display: grid;
gap: 0.8rem;
}
.submissions-bulk-form {
display: grid;
gap: 0.6rem;
}
.submissions-bulk-actions {
align-items: center;
justify-content: flex-end;
}
.submissions-table td {
vertical-align: top;
}
.submissions-preview {
display: grid;
gap: 0.5rem;
max-width: 340px;
}
.submissions-preview-text {
color: var(--text-secondary);
font-size: 0.84rem;
line-height: 1.35;
}
.submission-thumb {
width: 132px;
max-width: 100%;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
object-fit: cover;
box-shadow: var(--shadow-sm);
}
.submission-actions {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
align-items: center;
}
.participant-tracker-page {
--gm-page-max-width: 1320px;
max-width: var(--gm-page-max-width);
min-width: 0;
}
.participant-filter-grid {
display: grid;
gap: 0.75rem;
grid-template-columns: repeat(6, minmax(0, 1fr));
align-items: end;
}
.participant-filter-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.participant-filter-actions .btn {
min-height: 40px;
}
.participant-tracker-stats {
margin-top: 0.75rem;
}
.participant-tracker-row.is-idle {
background: color-mix(in srgb, var(--warning), transparent 92%);
}
.participant-tracker-row.is-disengaged {
background: color-mix(in srgb, var(--danger), transparent 92%);
}
.participant-name-link {
color: var(--text-primary);
}
.participant-name-link:hover {
color: var(--accent-primary);
}
.participant-detail-page {
--gm-page-max-width: 1320px;
max-width: var(--gm-page-max-width);
min-width: 0;
}
.participant-detail-stats {
margin-top: 0.65rem;
}
.participant-detail-title {
margin-top: 0.8rem;
}
.participant-detail-tab-nav {
margin-top: 0.8rem;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
padding: 0.55rem;
}
.participant-detail-tab-link {
min-height: 40px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg-elevated);
color: var(--text-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-weight: 700;
font-size: 0.84rem;
transition: var(--transition);
}
.participant-detail-tab-link:hover,
.participant-detail-tab-link.is-active {
color: var(--text-primary);
border-color: color-mix(in srgb, var(--accent-primary), white 12%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary), transparent 72%);
}
.participant-detail-panel {
display: grid;
gap: 0.85rem;
}
.participant-detail-page.participant-detail-tabs-ready .participant-detail-panel[hidden] {
display: none !important;
}
.participant-tracker-page .dashboard-header > :first-child,
.participant-detail-page .dashboard-header > :first-child {
min-width: 0;
}
.participant-tracker-table td:first-child {
min-width: 220px;
}
.participant-tracker-table td:last-child {
min-width: 150px;
}
.participant-last-scan-grid {
display: grid;
gap: 0.75rem;
grid-template-columns: 1.4fr 1fr 1fr;
align-items: center;
}
.participant-actions-grid {
display: grid;
gap: 0.85rem;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 0.85rem;
}
.participant-detail-grid-two {
display: grid;
gap: 0.85rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.participant-connection-list {
display: grid;
gap: 0.5rem;
}
.participant-connection-row {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-card), black 4%);
color: var(--text-primary);
padding: 0.6rem 0.7rem;
display: grid;
gap: 0.18rem;
}
.participant-connection-row:hover {
border-color: color-mix(in srgb, var(--accent-primary), white 8%);
}
.participant-alert-card,
.participant-feed-card {
margin-top: 0.85rem;
}
.participant-alert-grid {
display: grid;
gap: 0.75rem;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.participant-alert-block {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.75rem;
background: color-mix(in srgb, var(--bg-card), black 4%);
display: grid;
gap: 0.35rem;
}
.participant-alert-block h4 {
margin: 0;
}
.participant-alert-block.disengaged {
border-color: color-mix(in srgb, var(--danger), transparent 55%);
}
.participant-alert-block.idle {
border-color: color-mix(in srgb, var(--warning), transparent 55%);
}
.participant-alert-block.zero {
border-color: color-mix(in srgb, var(--info), transparent 55%);
}
.participant-alert-list {
display: grid;
gap: 0.28rem;
margin-bottom: 0.35rem;
}
.connections-page__controls {
display: grid;
gap: 0.75rem;
}
.connections-page__control-row {
display: grid;
grid-template-columns: minmax(0, 1.8fr) minmax(180px, 0.8fr) minmax(180px, 0.8fr);
gap: 0.75rem;
}
.connection-results {
display: grid;
gap: 0.85rem;
}
.connection-card {
display: grid;
gap: 0.7rem;
}
.connection-card__header,
.connection-card__meta {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.6rem;
}
.connection-card__actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.depth-bar {
height: 7px;
border-radius: 999px;
background: color-mix(in srgb, var(--bg-secondary), white 4%);
overflow: hidden;
}
.depth-bar__fill {
height: 100%;
min-width: 2px;
border-radius: inherit;
background: linear-gradient(90deg, var(--depth-color, var(--accent-primary)), rgba(255, 255, 255, 0.9));
transition: width var(--transition);
}
.connections-pagination {
display: flex;
justify-content: center;
}
@media (max-width: 840px) {
.connections-page__control-row {
grid-template-columns: minmax(0, 1fr);
}
}
.capture-page,
.capture-wall-page,
.capture-wall-gm-page {
display: grid;
gap: 1rem;
}
.capture-hero,
.capture-wall-hero {
display: grid;
gap: 1rem;
}
.capture-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.capture-form-card,
.capture-form {
display: grid;
gap: 1rem;
}
.capture-form__grid,
.capture-wall-filters {
display: grid;
gap: 0.85rem;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.capture-wall-filter-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: end;
}
.capture-preview {
display: grid;
place-items: center;
min-height: 18rem;
padding: 1rem;
border-radius: 1rem;
border: 1px dashed color-mix(in srgb, var(--border), white 10%);
background: color-mix(in srgb, var(--surface-2), transparent 18%);
overflow: hidden;
}
.capture-preview__empty {
display: grid;
gap: 0.4rem;
text-align: center;
}
.capture-preview__image {
width: 100%;
max-height: 26rem;
object-fit: contain;
border-radius: 0.9rem;
}
.capture-form__counter {
text-align: right;
}
.capture-wall-grid,
.gm-capture-grid {
display: grid;
gap: 1rem;
}
.capture-wall-grid {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.gm-capture-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.capture-wall-card,
.gm-capture-card {
display: grid;
gap: 0.8rem;
overflow: hidden;
}
.capture-wall-card--featured,
.gm-capture-card--featured {
border-color: color-mix(in srgb, var(--warning), var(--border) 55%);
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.18);
}
.capture-wall-card__image-wrap,
.gm-capture-card__image-wrap {
display: block;
width: 100%;
}
.capture-wall-card__image,
.gm-capture-card__image {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.capture-wall-card__body,
.gm-capture-card__body {
display: grid;
gap: 0.65rem;
}
.capture-wall-card__meta,
.gm-capture-card__topline,
.capture-wall-card__chips,
.gm-capture-card__chips,
.gm-capture-card__actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.capture-wall-load-more {
justify-self: center;
}
.display-photo-wall {
display: grid;
gap: 0.75rem;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.display-photo-card {
display: grid;
gap: 0.5rem;
padding: 0.6rem;
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
animation: display-photo-reveal 360ms ease;
}
.display-photo-card--featured {
grid-column: 1 / -1;
grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.9fr);
align-items: stretch;
}
.display-photo-card__image {
width: 100%;
height: 100%;
min-height: 12rem;
max-height: 20rem;
object-fit: cover;
border-radius: 0.9rem;
}
.display-photo-card__body {
display: grid;
gap: 0.45rem;
align-content: start;
}
@keyframes display-photo-reveal {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 900px) {
.display-photo-wall {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.display-photo-card--featured {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.capture-form__grid,
.capture-wall-filters,
.capture-hero__actions,
.capture-wall-filter-actions,
.gm-capture-card__actions {
grid-template-columns: 1fr;
}
.display-photo-wall {
grid-template-columns: 1fr;
}
}
.field-notes-page {
display: grid;
gap: 1rem;
}
.field-notes-hero__actions,
.field-notes-toolbar,
.field-note-card__meta,
.field-note-card__toggle,
.field-note-sheet-form__actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
align-items: center;
}
.field-notes-toolbar {
justify-content: space-between;
}
.field-notes-filter-chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.field-notes-toolbar__sort {
display: grid;
gap: 0.35rem;
min-width: 12rem;
}
.field-notes-list {
display: grid;
gap: 0.85rem;
}
.field-note-card {
display: grid;
gap: 0.85rem;
}
.field-note-card.is-selected {
border-color: var(--accent, #55a7ff);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #55a7ff) 48%, transparent);
}
.field-note-card__head {
align-items: flex-start;
}
.gm-field-note-fab {
position: fixed;
right: 1rem;
bottom: calc(var(--nav-h, 72px) + 1rem);
z-index: calc(var(--z-modal, 2000) - 1);
}
.gm-field-note-fab__button {
width: 3.5rem;
height: 3.5rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--accent, #55a7ff) 28%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--accent, #55a7ff) 40%, #1f2946), #16203a);
color: #fff;
box-shadow: 0 20px 44px rgba(5, 12, 28, 0.34);
font-size: 1.4rem;
}
.field-note-sheet-form {
display: grid;
gap: 1rem;
}
.field-note-sheet-types {
display: grid;
gap: 0.6rem;
}
.field-note-sheet-types__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
gap: 0.5rem;
}
.field-note-type-pill {
position: relative;
}
.field-note-type-pill input {
position: absolute;
opacity: 0;
inset: 0;
}
.field-note-type-pill span {
display: flex;
justify-content: center;
align-items: center;
min-height: 3rem;
padding: 0.75rem 0.9rem;
border-radius: 1rem;
border: 1px solid var(--border-subtle, rgba(255,255,255,0.14));
background: var(--surface-1, rgba(18, 26, 48, 0.92));
text-align: center;
font-weight: 600;
}
.field-note-type-pill input:checked + span {
border-color: color-mix(in srgb, var(--accent, #55a7ff) 58%, transparent);
background: color-mix(in srgb, var(--accent, #55a7ff) 16%, var(--surface-1, rgba(18, 26, 48, 0.92)));
}
.field-note-sheet-form__check {
display: flex;
gap: 0.6rem;
align-items: center;
}
@media (max-width: 900px) {
.field-notes-toolbar {
align-items: stretch;
}
.field-notes-toolbar__sort {
min-width: 0;
width: 100%;
}
}
@media (min-width: 1100px) {
.gm-field-note-fab {
bottom: 1.5rem;
}
}
.participant-pulse-row,
.participant-pulse-panel,
.participant-pulse-form {
display: grid;
gap: 0.85rem;
}
.participant-pulse-row {
margin-top: 0.9rem;
padding: 0.95rem 1rem 1rem;
border-radius: 1rem;
background: color-mix(in srgb, var(--bg-card) 88%, var(--accent) 12%);
border: 1px solid color-mix(in srgb, var(--border) 75%, var(--accent) 25%);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
}
.participant-pulse-row.is-dismissed {
opacity: 0;
transform: translateY(0.35rem);
transition: opacity 0.18s ease, transform 0.18s ease;
}
.participant-pulse-row__copy {
display: grid;
gap: 0.2rem;
}
.participant-pulse-row__reactions,
.participant-pulse-form__reactions {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0.55rem;
}
.participant-pulse-reaction {
min-height: 4.25rem;
border-radius: 1rem;
border: 1px solid var(--border);
background: var(--bg-elevated);
color: var(--text-primary);
display: grid;
place-items: center;
gap: 0.2rem;
font-size: 1.4rem;
font-weight: 700;
transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.participant-pulse-reaction span {
font-size: 0.72rem;
font-weight: 600;
color: var(--text-secondary);
}
.participant-pulse-reaction:hover,
.participant-pulse-reaction:focus-visible,
.participant-pulse-reaction.is-active {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 18%, var(--bg-elevated) 82%);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
transform: translateY(-1px);
}
.participant-pulse-reaction--compact {
min-height: 3.15rem;
font-size: 1.45rem;
}
.participant-pulse-reaction--compact span {
display: none;
}
.participant-pulse-row__dismiss,
.participant-pulse-form__actions {
justify-self: start;
}
.participant-pulse-row__dismiss {
border: 0;
background: transparent;
color: var(--text-secondary);
font-weight: 600;
padding: 0;
}
.participant-pulse-form__actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
}
.participant-pulse-dashboard__stats,
.participant-pulse-dashboard__grid {
display: grid;
gap: 1rem;
}
.participant-pulse-dashboard__stats {
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.participant-pulse-dashboard__grid {
margin-top: 1rem;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
.participant-pulse-dashboard__overall {
display: grid;
gap: 0.75rem;
}
.participant-pulse-panel__alert {
margin: 0;
color: var(--text-secondary);
}
.participant-pulse-source,
.participant-pulse-comment {
gap: 0.6rem;
}
.participant-pulse-source.is-warning {
border-color: color-mix(in srgb, var(--warning) 45%, var(--border) 55%);
}
.participant-pulse-source__score {
display: grid;
justify-items: end;
gap: 0.2rem;
}
.player-nav-link--pulse {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
@media (max-width: 640px) {
.participant-pulse-row__reactions,
.participant-pulse-form__reactions {
gap: 0.45rem;
}
.participant-pulse-reaction {
min-height: 3.8rem;
padding: 0.45rem 0.25rem;
}
.participant-pulse-dashboard__grid {
grid-template-columns: 1fr;
}
}
.safe-button {
position: fixed;
right: 0.9rem;
bottom: calc(var(--nav-h, 72px) + 0.9rem + var(--sab));
z-index: 110;
width: 52px;
height: 52px;
border-radius: 999px;
border: 2px solid color-mix(in srgb, var(--tone-danger-border, #ff6b6b), white 12%);
background: color-mix(in srgb, var(--tone-danger-muted, #632b35), black 18%);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
font-size: 1.25rem;
}
.safe-button-status {
position: absolute;
right: -0.1rem;
top: -0.1rem;
min-width: 1.2rem;
height: 1.2rem;
padding: 0 0.2rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--bg-page), transparent 20%);
background: color-mix(in srgb, var(--bg-elevated), black 2%);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
line-height: 1;
}
.safety-sheet .wm-sheet-panel {
max-width: 34rem;
}
.safety-sheet-body {
display: grid;
gap: 0.9rem;
}
.safety-sheet-section {
display: grid;
gap: 0.55rem;
padding: 0.85rem;
border: 1px solid color-mix(in srgb, var(--border), transparent 18%);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-elevated), black 2%);
}
.safety-sheet-section strong {
color: var(--text-primary);
}
.safety-sheet-ack {
display: grid;
gap: 0.55rem;
padding: 1rem;
border: 1px solid color-mix(in srgb, var(--tone-success-border, #2eb67d), transparent 30%);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--tone-success-muted, #163a2b), transparent 35%);
}
.gm-quiet-room-card {
border: 1px solid color-mix(in srgb, var(--border), transparent 12%);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-elevated), black 2%);
margin-bottom: 0.75rem;
}
.gm-quiet-room-card summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem 0.8rem;
}
.gm-quiet-room-card summary::-webkit-details-marker {
display: none;
}
.gm-quiet-room-card__eyebrow {
margin: 0 0 0.18rem;
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
.gm-quiet-room-form {
display: grid;
gap: 0.65rem;
padding: 0 0.8rem 0.8rem;
}
.gm-quiet-room-card--success {
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone-success-border, #2eb67d), transparent 78%);
}
.gm-quiet-room-card--warning {
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone-warning-border, #f0b429), transparent 74%);
}
.gm-quiet-room-card--danger {
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone-danger-border, #ff6b6b), transparent 74%);
}
.incident-safety-flags {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.5rem;
margin-top: 0.45rem;
}
.incident-detail-line {
margin-top: 0.35rem;
}
.incident-detail-line--warning {
color: var(--tone-warning-text, #ffd36e);
}
.incident-actions {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.wmu-safety-overlay {
position: fixed;
inset: 0;
z-index: 150;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: rgba(4, 7, 15, 0.82);
}
.wmu-safety-overlay__card {
width: min(100%, 34rem);
display: grid;
gap: 0.8rem;
padding: 1.1rem;
border: 1px solid color-mix(in srgb, var(--tone-danger-border, #ff6b6b), transparent 28%);
border-radius: 1rem;
background: linear-gradient(160deg, rgba(26, 15, 22, 0.96), rgba(15, 20, 32, 0.98));
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.wmu-safety-overlay__eyebrow {
margin: 0;
color: color-mix(in srgb, var(--tone-danger-border, #ff6b6b), white 18%);
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.wmu-safety-overlay__card h3,
.wmu-safety-overlay__card p {
margin: 0;
}
.wmu-safety-overlay__meta {
display: grid;
gap: 0.35rem;
padding: 0.75rem;
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-elevated), black 2%);
}
.wmu-safety-overlay__actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
@media (max-width: 768px) {
.safe-button {
right: 0.75rem;
bottom: calc(var(--nav-h, 72px) + 0.75rem + var(--sab));
}
.wmu-safety-overlay__actions {
display: grid;
}
}
.volunteer-command-page {
padding-bottom: 4rem;
}
.volunteer-command-header {
align-items: flex-start;
}
.volunteer-command-kicker {
margin-bottom: 0.5rem;
}
.volunteer-command-nav {
margin-bottom: 1rem;
}
.volunteer-command-layout {
display: grid;
gap: 1rem;
}
.volunteer-command-card,
.volunteer-subcard,
.volunteer-lookup-card,
.volunteer-incident-row {
border-color: var(--border-subtle);
}
.volunteer-command-stats {
margin-bottom: 1rem;
}
.volunteer-command-scan {
display: flex;
gap: 0.75rem;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
padding: 0.9rem 1rem;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
background: linear-gradient(180deg, rgba(105, 161, 255, 0.12), rgba(105, 161, 255, 0.04));
}
.volunteer-command-grid {
display: grid;
gap: 1rem;
margin-bottom: 1rem;
}
.volunteer-feed-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--border-subtle);
}
.volunteer-feed-row:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.volunteer-feed-row:first-child {
padding-top: 0;
}
.volunteer-feed-row--hold strong {
color: var(--tone-danger-text);
}
.volunteer-lookup-card {
padding: 1rem;
}
.volunteer-lookup-card--pending {
border-style: dashed;
}
.volunteer-lookup-avatar {
width: 2.5rem;
height: 2.5rem;
border-radius: 999px;
object-fit: cover;
border: 1px solid var(--border-subtle);
}
.volunteer-lookup-status {
margin-bottom: 0.85rem;
padding: 0.95rem 1rem;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--bg-secondary), black 4%);
}
.volunteer-lookup-status--confirmed {
background: linear-gradient(180deg, rgba(46, 204, 113, 0.12), rgba(46, 204, 113, 0.04));
}
.volunteer-lookup-status--likely {
background: linear-gradient(180deg, rgba(105, 161, 255, 0.12), rgba(105, 161, 255, 0.04));
}
.volunteer-lookup-status--ambiguous,
.volunteer-lookup-status--unresolved {
background: linear-gradient(180deg, rgba(255, 196, 87, 0.12), rgba(255, 196, 87, 0.04));
}
.volunteer-lookup-badges {
align-items: flex-end;
}
.volunteer-lookup-meta {
display: flex;
flex-direction: column;
gap: 0.35rem;
margin: 0.75rem 0;
color: var(--text-muted);
font-size: 0.875rem;
}
.volunteer-lookup-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.volunteer-encounter-cues {
display: grid;
gap: 0.65rem;
margin: 0 0 0.85rem;
padding: 0.85rem 0.9rem;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
background: linear-gradient(180deg, rgba(121, 199, 183, 0.12), rgba(121, 199, 183, 0.04));
}
.volunteer-encounter-cue {
display: grid;
gap: 0.35rem;
}
.volunteer-encounter-cue p {
margin: 0;
color: var(--text-muted);
font-size: 0.9rem;
}
.volunteer-encounter-cue__meta {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
align-items: center;
font-size: 0.78rem;
color: var(--text-muted);
}
.volunteer-lookup-actions--pending {
margin-top: 0.85rem;
}
.volunteer-lookup-operator-hint,
.volunteer-lookup-pending-note {
margin-top: 0.85rem;
}
.volunteer-suggestion-item {
gap: 0.35rem;
}
.volunteer-suggestion-item__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.volunteer-suggestion-item__meta {
display: block;
font-size: 0.78rem;
color: var(--text-muted);
}
.volunteer-suggestion-item__hint {
display: block;
font-size: 0.78rem;
color: var(--text-muted);
}
.volunteer-suggestion-item--locked {
cursor: default;
opacity: 0.9;
}
.volunteer-suggestion-item--locked:hover {
border-color: var(--border);
background: color-mix(in srgb, var(--bg-secondary), black 6%);
}
.volunteer-observation-card {
margin-top: 0.75rem;
}
.volunteer-broadcast-banner {
margin-bottom: 1rem;
}
.volunteer-brief-grid {
display: grid;
gap: 1rem;
margin-bottom: 1rem;
}
.volunteer-brief-list {
margin: 0.75rem 0 0;
padding-left: 1.1rem;
}
.volunteer-brief-list li + li {
margin-top: 0.4rem;
}
@media (min-width: 900px) {
.volunteer-command-layout {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
align-items: start;
}
.volunteer-command-grid,
.volunteer-brief-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 699px) {
.volunteer-command-scan {
flex-direction: column;
align-items: stretch;
}
.volunteer-lookup-actions .btn,
.volunteer-command-scan .btn {
width: 100%;
}
.volunteer-suggestion-item__head {
align-items: flex-start;
flex-direction: column;
}
}
.participant-alert-link {
color: var(--text-primary);
}
.participant-alert-link:hover {
color: var(--accent-primary);
}
.participant-feed-filters {
margin-bottom: 0.7rem;
}
.participant-feed-list {
display: grid;
gap: 0.45rem;
}
.participant-feed-entry {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.58rem 0.66rem;
background: color-mix(in srgb, var(--bg-card), black 4%);
color: var(--text-primary);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem;
}
.participant-feed-entry:hover {
border-color: color-mix(in srgb, var(--accent-primary), white 8%);
}
.participant-feed-entry.success {
border-left: 3px solid color-mix(in srgb, var(--success), white 8%);
}
.participant-feed-entry.warning {
border-left: 3px solid color-mix(in srgb, var(--warning), white 8%);
}
.participant-feed-entry.info {
border-left: 3px solid color-mix(in srgb, var(--info), white 8%);
}
.participant-feed-entry.muted {
border-left: 3px solid color-mix(in srgb, var(--text-muted), transparent 40%);
}
.participant-feed-time {
font-family: var(--font-mono);
font-size: 0.8rem;
color: var(--text-muted);
}
.print-center-shell {
max-width: 1320px;
}
.print-center-stats {
margin-top: 0.75rem;
}
.print-center-grid {
display: grid;
gap: 0.8rem;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.print-center-card {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.85rem;
background: color-mix(in srgb, var(--bg-card), black 4%);
display: grid;
gap: 0.55rem;
}
.print-center-card h3 {
margin: 0;
}
.print-page .print-preview-toolbar {
margin-bottom: 0.75rem;
}
.settings-page .dashboard-header {
margin-bottom: var(--space-4);
}
.settings-card-grid {
display: grid;
gap: var(--space-3);
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.settings-link-card {
text-decoration: none;
color: inherit;
}
.settings-link-card:hover {
transform: translateY(-1px);
}
.settings-notification-row .form-select {
min-width: 150px;
}
.theme-option-row {
display: flex;
align-items: center;
gap: 0.6rem;
min-height: 44px;
font-weight: 600;
}
.profile-connections-controls {
display: grid;
gap: 0.6rem;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
}
.profile-connections-sort-group .btn.is-active {
border-color: color-mix(in srgb, var(--accent-primary), white 20%);
color: var(--text-primary);
}
.profile-connection-list-section {
display: grid;
gap: var(--space-3);
}
.profile-connection-card {
cursor: pointer;
transition: var(--transition);
}
.profile-connection-card:hover {
border-color: color-mix(in srgb, var(--accent-primary), white 12%);
}
.connection-preview-drawer {
margin-top: var(--space-3);
}
.connection-preview-card {
border: 1px solid color-mix(in srgb, var(--accent-primary), transparent 65%);
}
.connection-preview-stats {
margin-top: var(--space-3);
}
.tip-banner {
border-color: color-mix(in srgb, var(--accent-primary), transparent 55%);
background: color-mix(in srgb, var(--bg-card), var(--accent-primary) 8%);
}
.item-rarity-chip {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.5rem;
border-radius: 999px;
border: 1px solid var(--border);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.item-rarity-chip.rarity-common {
border-color: color-mix(in srgb, var(--rarity-common), transparent 45%);
color: var(--rarity-common);
}
.item-rarity-chip.rarity-uncommon {
border-color: color-mix(in srgb, var(--rarity-uncommon), transparent 40%);
color: var(--rarity-uncommon);
}
.item-rarity-chip.rarity-rare {
border-color: color-mix(in srgb, var(--rarity-rare), transparent 40%);
color: var(--rarity-rare);
}
.item-rarity-chip.rarity-unique,
.item-rarity-chip.rarity-legendary {
border-color: color-mix(in srgb, var(--rarity-legendary), transparent 40%);
color: var(--rarity-legendary);
}
.profile-inventory-item[data-rarity="uncommon"] {
border-left: 3px solid color-mix(in srgb, var(--rarity-uncommon), transparent 10%);
}
.profile-inventory-item[data-rarity="rare"] {
border-left: 3px solid color-mix(in srgb, var(--rarity-rare), transparent 8%);
}
.profile-inventory-item[data-rarity="unique"] {
border-left: 3px solid color-mix(in srgb, var(--rarity-legendary), transparent 8%);
}
.profile-item-drawer {
display: grid;
gap: var(--space-3);
margin-top: var(--space-3);
}
.item-detail-drawer-card {
border-color: color-mix(in srgb, var(--accent-primary), transparent 65%);
}
.item-detail-effects .list {
margin: 0.45rem 0 0;
display: grid;
gap: 0.3rem;
}
.item-detail-recipes {
margin-top: 0.75rem;
}
.item-ingredient-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
border: 1px solid var(--border);
border-radius: 999px;
padding: 0.18rem 0.5rem;
font-size: 0.72rem;
color: var(--text-secondary);
}
.item-ingredient-chip.owned {
border-color: color-mix(in srgb, var(--success), transparent 45%);
color: color-mix(in srgb, var(--success), white 12%);
}
.profile-recipe-section + .profile-recipe-section {
margin-top: 0.8rem;
}
.profile-recipe-card.is-ready {
border-color: color-mix(in srgb, var(--success), transparent 50%);
}
.notification-tab-row {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-bottom: 0.75rem;
}
.notification-tab {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-secondary);
text-decoration: none;
font-size: 0.82rem;
font-weight: 600;
padding: 0.42rem 0.62rem;
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.notification-tab.is-active {
color: var(--text-primary);
border-color: color-mix(in srgb, var(--accent-primary), white 16%);
background: color-mix(in srgb, var(--bg-card), var(--accent-primary) 13%);
}
.notification-row.unread {
border-color: color-mix(in srgb, var(--accent-primary), transparent 58%);
}
.notification-meta-chips {
display: inline-flex;
gap: 0.35rem;
flex-wrap: wrap;
}
.notification-lane {
display: grid;
gap: 0.55rem;
margin-bottom: 0.8rem;
}
.notification-lane-head h2 {
margin: 0;
font-size: 0.98rem;
}
.notification-lane-stat.urgent {
border-left: 3px solid color-mix(in srgb, var(--danger), transparent 20%);
}
.notification-lane-stat.personal {
border-left: 3px solid color-mix(in srgb, var(--warning), transparent 25%);
}
.notification-lane-stat.ambient {
border-left: 3px solid color-mix(in srgb, var(--info), transparent 35%);
}
.notification-row-urgent {
border-left: 4px solid color-mix(in srgb, var(--danger), transparent 15%);
background: color-mix(in srgb, var(--danger), transparent 92%);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger), transparent 84%);
}
.notification-row-thread .notification-thread-link {
color: inherit;
text-decoration: none;
display: block;
}
.notification-row-preview {
margin: 0.3rem 0 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.notification-ambient-wrap summary {
cursor: pointer;
}
.notification-ambient-row {
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 0.5rem 0.6rem;
background: color-mix(in srgb, var(--bg-card), black 3%);
}
.notification-thread-card {
display: grid;
gap: 0.8rem;
}
.notification-thread-messages {
display: grid;
gap: 0.55rem;
max-height: min(56vh, 520px);
overflow: auto;
padding-right: 0.2rem;
}
.notification-thread-bubble {
border: 1px solid var(--border-soft);
border-radius: 12px;
padding: 0.55rem 0.65rem;
background: color-mix(in srgb, var(--bg-card), black 4%);
}
.notification-thread-bubble.is-own {
border-color: color-mix(in srgb, var(--accent-primary), transparent 46%);
background: color-mix(in srgb, var(--accent-primary), transparent 88%);
}
.notification-thread-meta {
margin: 0 0 0.25rem;
font-size: 0.76rem;
color: var(--text-muted);
}
.notification-thread-bubble p {
margin: 0 0 0.35rem;
}
.notification-thread-reply {
display: grid;
gap: 0.4rem;
}
.display-compositor-page {
display: grid;
grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr);
gap: 1rem;
align-items: start;
}
.display-compositor-sidebar,
.display-compositor-main,
.display-compositor-side-stack {
display: grid;
gap: 1rem;
}
.display-compositor-screen-list,
.display-compositor-zone-list {
display: grid;
gap: 0.75rem;
}
.display-compositor-screen-link,
.display-compositor-zone-chip {
display: grid;
gap: 0.35rem;
padding: 0.85rem 1rem;
border-radius: 1rem;
border: 1px solid var(--border-subtle);
background: color-mix(in srgb, var(--surface-elevated) 88%, transparent);
text-decoration: none;
color: inherit;
}
.display-compositor-screen-link.is-active,
.display-compositor-zone-chip.is-active {
border-color: var(--accent-primary);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 55%, transparent);
}
.display-compositor-screen-meta,
.display-compositor-inline-row,
.display-compositor-toggle-row,
.display-compositor-toolbar,
.display-compositor-field-grid,
.display-compositor-grid-layout,
.display-compositor-editor-help,
.display-compositor-zone-meta {
display: flex;
gap: 0.75rem;
}
.display-compositor-screen-meta,
.display-compositor-zone-meta,
.display-compositor-editor-help {
justify-content: space-between;
align-items: center;
}
.display-compositor-workspace,
.display-compositor-editor,
.display-compositor-create {
display: grid;
gap: 1rem;
}
.display-compositor-grid-layout {
align-items: start;
}
.display-compositor-editor {
min-width: 0;
}
.display-compositor-field-grid {
flex-wrap: wrap;
align-items: end;
}
.display-compositor-field-grid > label {
flex: 1 1 14rem;
display: grid;
gap: 0.4rem;
}
.display-compositor-toggle {
max-width: 18rem;
}
.display-compositor-canvas {
padding: 0.9rem;
border-radius: 1.25rem;
border: 1px dashed color-mix(in srgb, var(--accent-primary) 30%, var(--border-subtle));
background:
linear-gradient(180deg, color-mix(in srgb, var(--surface-canvas) 88%, transparent), color-mix(in srgb, var(--surface-elevated) 94%, transparent)),
radial-gradient(circle at top, color-mix(in srgb, var(--accent-primary) 8%, transparent), transparent 60%);
}
.display-compositor-grid {
position: relative;
min-height: 24rem;
}
.grid-stack {
position: relative;
}
.grid-stack > .grid-stack-item {
position: absolute;
}
.grid-stack > .grid-stack-item > .grid-stack-item-content {
position: absolute;
inset: 0;
}
.display-compositor-widget {
height: 100%;
padding: 0.95rem;
display: grid;
gap: 0.5rem;
border-radius: 1rem;
border: 1px solid color-mix(in srgb, var(--accent-primary) 26%, var(--border-subtle));
background: linear-gradient(180deg, color-mix(in srgb, var(--surface-elevated) 94%, transparent), color-mix(in srgb, var(--surface-canvas) 92%, transparent));
cursor: pointer;
}
.display-compositor-widget strong {
font-size: 1rem;
}
.display-compositor-widget .subtitle {
margin: 0;
}
.display-compositor-widget-preview {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
color: var(--text-secondary);
font-size: 0.93rem;
}
.display-compositor-zone-list-card .display-compositor-zone-chip button {
justify-self: start;
}
.display-compositor-side-stack {
min-width: 0;
flex-direction: column;
width: min(100%, 23rem);
}
.display-zone-sheet textarea {
min-height: 14rem;
}
@media (max-width: 1100px) {
.display-compositor-page,
.display-compositor-grid-layout {
grid-template-columns: 1fr;
}
.display-compositor-side-stack {
width: 100%;
}
}
.gm-broadcast-shell {
display: grid;
gap: 1rem;
}
.gm-broadcast-audience-grid,
.gm-broadcast-type-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
gap: 0.75rem;
}
.gm-broadcast-choice {
display: grid;
gap: 0.35rem;
cursor: pointer;
}
.gm-broadcast-choice input {
accent-color: var(--accent);
}
.gm-broadcast-choice--type strong {
display: block;
}
.gm-broadcast-inline {
display: grid;
gap: 0.75rem;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.gm-broadcast-history {
display: grid;
gap: 0.75rem;
}
.gm-broadcast-history__headline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.gm-broadcast-history__row.is-canceled {
opacity: 0.76;
}
.gm-broadcast-targets {
display: grid;
gap: 0.75rem;
}
.gm-readiness-page {
display: flex;
flex-direction: column;
gap: 1rem;
}
.gm-readiness-head {
align-items: flex-start;
}
.readiness-shell {
display: flex;
flex-direction: column;
gap: 1rem;
}
.readiness-overview-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 1rem;
}
.readiness-hero {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
}
.readiness-hero__meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.35rem;
}
.readiness-scorecard {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1rem 1.1rem;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--surface-overlay) 45%, transparent);
grid-column: span 5;
}
.readiness-progress-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 1rem;
grid-column: span 7;
}
.readiness-progress-card {
grid-column: span 4;
display: flex;
flex-direction: column;
gap: 0.55rem;
min-height: 100%;
}
.readiness-progress-card h3,
.readiness-remaining-item h4 {
margin: 0;
}
.readiness-progress-card--done {
border-color: var(--tone-success-border);
background: color-mix(in srgb, var(--tone-success) 7%, var(--bg-card));
}
.readiness-progress-card--current {
border-color: var(--tone-info-border);
background: color-mix(in srgb, var(--tone-info) 8%, var(--bg-card));
}
.readiness-progress-card--remaining {
border-color: var(--tone-warning-border);
background: color-mix(in srgb, var(--tone-warning) 8%, var(--bg-card));
}
.readiness-scorecard__label {
display: flex;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.readiness-scorecard__chips {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.readiness-task-nav {
display: flex;
gap: 0.75rem;
overflow-x: auto;
padding-bottom: 0.2rem;
position: sticky;
top: 0.75rem;
z-index: var(--z-sticky);
}
.readiness-task-chip {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 13rem;
padding: 0.85rem 1rem;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
text-decoration: none;
color: inherit;
background: color-mix(in srgb, var(--surface-overlay) 82%, var(--bg-page));
box-shadow: var(--shadow-xs);
}
.readiness-task-chip__eyebrow {
color: var(--text-muted);
font-size: var(--font-size-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.readiness-task-chip.is-active {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--tone-info) 35%, transparent);
transform: translateY(-1px);
}
.readiness-task-chip--done {
background: color-mix(in srgb, var(--tone-success) 9%, var(--bg-card));
}
.readiness-task-chip--current {
background: color-mix(in srgb, var(--tone-info) 10%, var(--bg-card));
}
.readiness-task-chip--remaining {
background: color-mix(in srgb, var(--surface-overlay) 88%, var(--bg-page));
}
.readiness-task-chip--danger {
border-color: var(--tone-danger-border);
}
.readiness-task-chip--warning {
border-color: var(--tone-warning-border);
}
.readiness-task-chip--success {
border-color: var(--tone-success-border);
}
.readiness-task-chip__title {
font-weight: var(--font-weight-semibold);
}
.readiness-task-chip__meta {
color: var(--text-muted);
font-size: var(--font-size-sm);
}
.readiness-task-flow {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.readiness-task-section {
display: flex;
flex-direction: column;
gap: 1rem;
scroll-margin-top: 6rem;
padding: 0.95rem 1rem;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--surface-overlay) 28%, transparent);
}
.readiness-task-section--current {
border-color: color-mix(in srgb, var(--tone-info-border) 75%, var(--border));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--tone-info) 18%, transparent);
}
.readiness-task-section--done {
border-color: color-mix(in srgb, var(--tone-success-border) 65%, var(--border));
}
.readiness-task-section__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
}
.readiness-task-section__meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.35rem;
}
.readiness-category-grid,
.readiness-live-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 1rem;
}
.readiness-remaining-card {
display: flex;
flex-direction: column;
gap: 1rem;
}
.readiness-remaining-card__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
}
.readiness-remaining-list {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.readiness-remaining-item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1rem;
padding: 0.9rem;
border-radius: var(--radius-md);
border: 1px solid var(--border);
background: color-mix(in srgb, var(--surface-overlay) 42%, transparent);
}
.readiness-remaining-item--fail {
border-color: var(--tone-danger-border);
}
.readiness-remaining-item--warn {
border-color: var(--tone-warning-border);
}
.readiness-remaining-item__body,
.readiness-remaining-item__actions {
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.readiness-remaining-item__meta {
display: flex;
align-items: center;
gap: 0.45rem;
flex-wrap: wrap;
}
.readiness-remaining-item__actions {
justify-content: center;
}
.readiness-category,
.readiness-live-card,
.readiness-complete {
grid-column: span 6;
}
.readiness-category__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-bottom: 0.9rem;
}
.readiness-category--danger {
border-color: var(--tone-danger-border);
}
.readiness-category--warning {
border-color: var(--tone-warning-border);
}
.readiness-category--success {
border-color: var(--tone-success-border);
}
.readiness-checklist {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.readiness-check {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.8rem;
padding: 0.85rem;
border-radius: var(--radius-md);
border: 1px solid var(--border);
background: color-mix(in srgb, var(--surface-overlay) 35%, transparent);
}
.readiness-check--fail {
border-color: var(--tone-danger-border);
background: color-mix(in srgb, var(--tone-danger) 8%, var(--bg-card));
}
.readiness-check--warn {
border-color: var(--tone-warning-border);
background: color-mix(in srgb, var(--tone-warning) 8%, var(--bg-card));
}
.readiness-check--pass {
border-color: var(--tone-success-border);
}
.readiness-check__status {
font-size: 1.1rem;
line-height: 1;
padding-top: 0.15rem;
}
.readiness-check__title-row,
.readiness-live-stats {
display: flex;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.readiness-check__title-row h4 {
margin: 0;
}
.readiness-check__title-row h5 {
margin: 0;
font-size: var(--font-size-base);
}
.readiness-check__summary {
margin: 0.25rem 0 0.35rem;
font-weight: var(--font-weight-semibold);
}
.readiness-check__actions,
.readiness-complete__actions,
.readiness-live-actions,
.readiness-live-links {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
}
.readiness-live-grid > :first-child {
grid-column: span 12;
}
.readiness-live-stats {
margin: 0;
}
.readiness-live-stats div {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 7rem;
}
.readiness-live-stats dt {
color: var(--text-muted);
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.readiness-live-stats dd {
margin: 0;
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
}
@media (max-width: 1100px) {
.readiness-scorecard,
.readiness-progress-grid {
grid-column: span 12;
}
.readiness-progress-card {
grid-column: span 12;
}
.readiness-category,
.readiness-live-card,
.readiness-complete {
grid-column: span 12;
}
}
@media (max-width: 720px) {
.readiness-hero,
.readiness-hero__meta,
.readiness-remaining-card__head,
.readiness-task-section__head,
.readiness-task-section__meta {
align-items: flex-start;
flex-direction: column;
}
.readiness-scorecard__label {
flex-direction: column;
}
.readiness-task-nav {
top: 0.4rem;
}
.readiness-check {
grid-template-columns: 1fr;
}
.readiness-remaining-item {
grid-template-columns: 1fr;
}
.readiness-check__status {
padding-top: 0;
}
}
body[data-app-surface="gm-team"] .team-role-stats {
margin-bottom: 1rem;
}
body[data-app-surface="gm-team"] .container.page {
container-type: inline-size;
}
body[data-app-surface="gm-team"] .team-role-filter-bar,
body[data-app-surface="gm-team"] .team-import-form,
body[data-app-surface="gm-team"] .team-role-sheet-form,
body[data-app-surface="gm-team"] .team-user-quick-add {
display: grid;
gap: 0.85rem;
}
body[data-app-surface="gm-team"] .team-role-filter-tabs {
margin-bottom: 0.5rem;
}
body[data-app-surface="gm-team"] .team-role-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
body[data-app-surface="gm-team"] .team-role-card__head,
body[data-app-surface="gm-team"] .team-import-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
body[data-app-surface="gm-team"] .team-role-card__actions {
display: flex;
align-items: center;
gap: 0.65rem;
flex-wrap: wrap;
}
body[data-app-surface="gm-team"] .team-role-capabilities {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.9rem 0 1rem;
}
body[data-app-surface="gm-team"] .team-role-capability {
border: 1px solid var(--border);
border-radius: 999px;
padding: 0.45rem 0.75rem;
background: rgba(255, 255, 255, 0.03);
font-size: 0.92rem;
}
body[data-app-surface="gm-team"] .team-role-members,
body[data-app-surface="gm-team"] .team-audit-list,
body[data-app-surface="gm-team"] .team-user-role-list {
display: grid;
gap: 0.75rem;
}
body[data-app-surface="gm-team"] .team-role-member,
body[data-app-surface="gm-team"] .team-audit-item,
body[data-app-surface="gm-team"] .team-user-role-row {
width: 100%;
text-align: left;
border: 1px solid var(--border);
border-radius: 18px;
padding: 0.9rem 1rem;
background: rgba(255, 255, 255, 0.03);
}
body[data-app-surface="gm-team"] .team-role-member {
cursor: pointer;
}
body[data-app-surface="gm-team"] .team-role-member__name {
display: block;
font-weight: 700;
}
body[data-app-surface="gm-team"] .team-role-member__meta {
display: block;
color: var(--muted);
font-size: 0.92rem;
margin-top: 0.2rem;
}
body[data-app-surface="gm-team"] .team-import-textarea {
min-height: 12rem;
font-family: var(--font-mono);
}
body[data-app-surface="gm-team"] .team-import-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
align-items: center;
}
body[data-app-surface="gm-team"] .team-sheet-body {
display: grid;
gap: 1rem;
}
body[data-app-surface="gm-team"] .team-user-role-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
@container (max-width: 45rem) {
body[data-app-surface="gm-team"] .team-role-card__head,
body[data-app-surface="gm-team"] .team-import-card__head,
body[data-app-surface="gm-team"] .team-user-role-row {
grid-template-columns: 1fr;
display: grid;
}
body[data-app-surface="gm-team"] .team-import-actions {
display: grid;
}
}
.display-screen-page {
margin: 0;
min-height: 100vh;
background:
radial-gradient(circle at top, color-mix(in srgb, var(--accent-primary) 18%, transparent), transparent 38%),
linear-gradient(180deg, #071121 0%, #0f1930 40%, #09111f 100%);
color: #f5f7ff;
overflow: hidden;
}
.display-screen-shell {
min-height: 100vh;
padding: 1.25rem;
}
.display-screen-grid {
display: grid;
gap: 1rem;
min-height: calc(100vh - 2.5rem);
}
.display-screen-zone,
.display-screen-zone-host,
.display-widget {
min-height: 0;
height: 100%;
}
.display-screen-zone {
overflow: hidden;
}
.display-screen-zone-host {
display: grid;
}
.display-widget {
display: grid;
gap: 1rem;
padding: 1rem 1.1rem;
border-radius: 1.25rem;
border: 1px solid rgba(120, 170, 255, 0.16);
background: linear-gradient(180deg, rgba(13, 24, 46, 0.96), rgba(10, 18, 33, 0.98));
box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.24);
}
.display-widget-head {
display: flex;
justify-content: space-between;
align-items: start;
gap: 1rem;
}
.display-widget-head h2,
.display-countdown-value,
.display-countdown-label {
margin: 0;
}
.display-widget-head h2 {
font-size: clamp(1.1rem, 1.4vw, 1.6rem);
}
.display-widget .subtitle,
.display-widget p {
margin: 0;
color: rgba(236, 241, 255, 0.82);
}
.display-leaderboard-list,
.display-activity-list,
.display-map-list,
.display-question-list,
.display-schedule-stack {
display: grid;
gap: 0.75rem;
}
.display-leaderboard-row,
.display-question-card,
.display-activity-card,
.display-map-card,
.display-schedule-card {
display: grid;
gap: 0.35rem;
padding: 0.85rem 0.95rem;
border-radius: 1rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.display-leaderboard-value,
.display-countdown-value {
font-size: clamp(1.25rem, 2vw, 2.75rem);
font-weight: 800;
letter-spacing: -0.04em;
}
.display-countdown-copy {
display: grid;
gap: 0.4rem;
align-content: center;
min-height: 100%;
}
.display-countdown-label {
font-size: clamp(1.15rem, 1.8vw, 2rem);
}
.display-announcement-body,
.display-custom-html {
display: grid;
gap: 0.75rem;
}
.display-announcement-image {
width: 100%;
max-height: 18rem;
object-fit: cover;
border-radius: 1rem;
}
.display-camera-frame,
.display-camera-frame iframe {
width: 100%;
height: 100%;
min-height: 18rem;
border: 0;
border-radius: 1rem;
overflow: hidden;
}
.display-widget--loading {
place-items: center;
}
@media (max-width: 900px) {
.display-screen-shell {
padding: 0.85rem;
}
.display-screen-grid {
min-height: calc(100vh - 1.7rem);
grid-template-columns: 1fr !important;
grid-auto-rows: minmax(18rem, auto) !important;
}
.display-screen-zone {
grid-column: auto !important;
grid-row: auto !important;
}
}
.notifications-page {
display: grid;
gap: var(--space-5);
}
.notifications-header {
display: grid;
gap: 0.8rem;
}
.notifications-actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
}
.notifications-actions__btn {
min-width: 44px;
}
.notifications-dnd-confirm {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
align-items: center;
padding: 0.8rem 1rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-card), black 4%);
}
.notifications-dnd-confirm[hidden] {
display: none;
}
.notifications-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0.85rem;
}
.notifications-stat {
display: grid;
gap: 0.35rem;
}
.notifications-stat--urgent {
border-color: color-mix(in srgb, var(--danger), transparent 58%);
background: color-mix(in srgb, var(--danger), transparent 92%);
}
.notifications-stat--personal {
border-color: color-mix(in srgb, var(--accent-primary), transparent 62%);
background: color-mix(in srgb, var(--accent-primary), transparent 92%);
}
.notifications-stat--ambient {
border-color: color-mix(in srgb, var(--border), white 6%);
background: color-mix(in srgb, var(--bg-card), black 3%);
}
.notifications-stat__pulse {
display: inline-flex;
width: 0.55rem;
height: 0.55rem;
border-radius: 999px;
background: var(--danger);
animation: notificationPulse 1.5s ease-in-out infinite;
}
@keyframes notificationPulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.45;
transform: scale(1.18);
}
}
.notifications-list-shell {
display: grid;
gap: 0.75rem;
}
.notification-row-actions {
min-width: 144px;
}
.notification-row-actions .swipe-action {
min-width: 72px;
padding-inline: 0.85rem;
font-size: 0.82rem;
font-weight: 700;
text-decoration: none;
}
.notification-swipe-form {
display: flex;
}
.notifications-skeleton {
display: grid;
gap: 0.7rem;
}
.notifications-skeleton__row {
display: grid;
gap: 0.45rem;
}
.notifications-undo {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
align-items: center;
padding: 0.8rem 1rem;
border-radius: var(--radius-sm);
border: 1px solid color-mix(in srgb, var(--success), transparent 60%);
background: color-mix(in srgb, var(--success), transparent 92%);
}
.notifications-undo[hidden] {
display: none;
}
@media (max-width: 767px) {
.notifications-actions {
width: 100%;
}
.notifications-actions > * {
flex: 1 1 160px;
}
.notifications-list-shell .swipe-row .action-bar {
display: none;
}
}
.leaderboard-tabs {
display: inline-flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.leaderboard-tab {
min-height: 40px;
}
.leaderboard-tab[aria-selected="true"] {
border-color: color-mix(in srgb, var(--accent-primary), white 10%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary), transparent 70%);
}
.leaderboard-panel {
display: grid;
gap: 1rem;
}
.leaderboard-self-card {
display: grid;
gap: 0.8rem;
}
.leaderboard-self-card__top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.7rem;
}
.leaderboard-self-card__progress {
display: grid;
gap: 0.45rem;
}
.leaderboard-self-card__bar {
height: 10px;
border-radius: 999px;
overflow: hidden;
background: color-mix(in srgb, var(--bg-secondary), white 4%);
}
.leaderboard-self-card__fill {
height: 100%;
min-width: 2px;
border-radius: inherit;
background: linear-gradient(90deg, var(--accent-primary), color-mix(in srgb, var(--accent-secondary), white 18%));
}
.leaderboard-self-card__meta {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
.leaderboard-mountain__fill {
min-width: 2px;
}
.leaderboard-mountain__value--zero {
color: var(--text-muted);
}
.home-guest {
display: grid;
gap: 1rem;
padding-bottom: 2rem;
}
.home-guest__toolbar {
display: flex;
justify-content: flex-end;
margin-bottom: 0.25rem;
}
.home-guest__hero {
padding: clamp(1.4rem, 5vw, 2.2rem);
border-radius: 24px;
text-align: center;
background: var(--surface-intent-bg,
radial-gradient(circle at top, color-mix(in srgb, var(--tone-lantern), transparent 82%), transparent 42%),
linear-gradient(160deg, color-mix(in srgb, var(--bg-card), var(--tone-hearth) 10%), color-mix(in srgb, var(--bg-secondary), black 8%)));
border: 1px solid var(--surface-intent-border, color-mix(in srgb, var(--border), var(--tone-lantern) 20%));
box-shadow: var(--surface-intent-shadow, var(--shadow-sm));
}
.home-guest__brand {
margin: 0;
font-size: clamp(2.3rem, 8vw, 3.2rem);
line-height: 0.95;
font-family: var(--font-display);
letter-spacing: -0.03em;
background: linear-gradient(135deg, var(--tone-lantern), var(--tone-twilight));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.home-guest__tagline {
margin: 0.45rem 0 1.2rem;
}
.home-guest__section-title {
margin: 0.35rem 0 0.45rem;
font-size: 0.83rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
}
.home-guest__nav-grid {
display: grid;
gap: 0.55rem;
}
.home-guest__nav-card {
display: flex;
gap: 1rem;
align-items: center;
padding: 0.95rem 1rem;
text-decoration: none;
color: inherit;
background: var(--surface-keepsake);
border-color: var(--line-soft);
}
.home-guest__nav-icon {
flex: 0 0 2.25rem;
display: grid;
place-items: center;
font-size: 1.3rem;
text-align: center;
}
.home-guest__nav-copy {
display: grid;
gap: 0.15rem;
}
.home-guest__nav-copy span {
color: var(--text-secondary);
font-size: 0.875rem;
}
.pulse-home-skeleton {
display: grid;
gap: 0.7rem;
margin-top: 0.75rem;
}
.pulse-home-skeleton--rail {
grid-auto-flow: column;
grid-auto-columns: minmax(220px, 78%);
overflow: hidden;
}
.pulse-home-skeleton__card,
.pulse-home-skeleton__line {
position: relative;
overflow: hidden;
border-radius: 18px;
background: color-mix(in srgb, var(--bg-secondary), black 6%);
}
.pulse-home-skeleton__card::after,
.pulse-home-skeleton__line::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
animation: adr-shimmer 1.6s ease-in-out infinite;
}
.pulse-home-skeleton__card {
min-height: 156px;
}
.pulse-home-skeleton__line {
height: 0.95rem;
}
.pulse-home-skeleton__line--short {
width: 48%;
}
.pulse-home-skeleton__line--mid {
width: 72%;
}
@media (min-width: 820px) {
.home-guest__nav-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.participant-schedule-page {
display: grid;
gap: 1rem;
}
.participant-schedule-hero {
display: grid;
gap: 0.9rem;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--accent-primary), transparent 82%), transparent 42%),
linear-gradient(160deg, color-mix(in srgb, var(--bg-card), white 2%), color-mix(in srgb, var(--bg-card), black 4%));
}
.participant-schedule-hero__head {
align-items: start;
}
.participant-schedule-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
color: var(--text-secondary);
font-size: 0.84rem;
}
.participant-schedule-shell,
.participant-schedule-live,
.participant-schedule-stack {
display: grid;
gap: 0.9rem;
}
.participant-schedule-modes {
gap: 0.55rem;
}
.participant-schedule-mode {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.65rem;
padding: 0.65rem 1rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--border), transparent 8%);
background: color-mix(in srgb, var(--bg-elevated), transparent 6%);
color: var(--text-secondary);
text-decoration: none;
font-weight: 700;
white-space: nowrap;
}
.participant-schedule-mode.is-active {
background: color-mix(in srgb, var(--accent-primary), transparent 78%);
border-color: color-mix(in srgb, var(--accent-primary), transparent 40%);
color: var(--text-primary);
}
.participant-schedule-live-card {
position: relative;
overflow: hidden;
}
.participant-schedule-live-card--live {
border-color: color-mix(in srgb, var(--danger), transparent 48%);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger), transparent 70%);
}
.participant-schedule-live-card--soon,
.participant-schedule-entry--warm {
border-color: color-mix(in srgb, var(--warning), transparent 48%);
background: color-mix(in srgb, var(--warning), transparent 92%);
}
.participant-schedule-entry--past {
opacity: 0.72;
}
.participant-schedule-entry--live {
border-inline-start: 4px solid var(--danger);
}
.participant-schedule-day-group {
display: grid;
gap: 0.75rem;
}
.participant-schedule-day-group__header {
display: grid;
gap: 0.15rem;
}
.participant-schedule-day-group__header h2,
.participant-schedule-live-card h2,
.participant-schedule-entry h3 {
margin: 0;
}
.participant-schedule-entry__topline {
align-items: start;
gap: 0.5rem;
}
.participant-schedule-entry__meta {
display: flex;
flex-wrap: wrap;
gap: 0.45rem 0.85rem;
margin: 0;
color: var(--text-secondary);
font-size: 0.9rem;
}
.participant-schedule-entry__meta span {
position: relative;
}
.participant-schedule-entry__meta span:not(:last-child)::after {
content: "•";
position: absolute;
inset-inline-end: -0.55rem;
color: var(--text-muted);
}
.participant-schedule-entry__relative {
margin: 0;
color: var(--text-primary);
font-weight: 700;
}
.participant-schedule-entry__body {
margin: 0;
color: var(--text-secondary);
}
.participant-schedule-entry__actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
align-items: center;
justify-content: space-between;
}
.participant-schedule-pin {
margin: 0;
}
.participant-schedule-pin .btn {
min-width: 9.5rem;
}
.scan-pulse {
display: inline-block;
width: 0.58rem;
height: 0.58rem;
margin-right: 0.35rem;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 0 0 currentColor;
animation: participantSchedulePulse 1400ms ease-out infinite;
}
@keyframes participantSchedulePulse {
0% {
box-shadow: 0 0 0 0 color-mix(in srgb, currentColor, transparent 36%);
}
70% {
box-shadow: 0 0 0 0.42rem color-mix(in srgb, currentColor, transparent 100%);
}
100% {
box-shadow: 0 0 0 0 color-mix(in srgb, currentColor, transparent 100%);
}
}
@media (max-width: 640px) {
.participant-schedule-hero__head {
display: grid;
gap: 0.75rem;
}
.participant-schedule-entry__actions {
align-items: stretch;
}
.participant-schedule-pin,
.participant-schedule-pin .btn {
width: 100%;
}
}
.faction-page {
position: relative;
padding-bottom: 8.5rem;
}
.faction-header {
display: grid;
gap: 0.75rem;
}
.faction-header__top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.75rem;
}
.faction-emblem {
width: 72px;
height: 72px;
border-radius: 12px;
object-fit: cover;
border: 1px solid var(--border);
}
.faction-description {
margin-top: 0.1rem;
}
.faction-stats {
margin-top: 0.2rem;
gap: 0.65rem;
}
.faction-lore {
margin-top: 0.75rem;
}
.faction-lore__body {
margin-top: 0.5rem;
white-space: pre-wrap;
}
.faction-section-title {
margin: 0 0 0.5rem;
}
.faction-section-title--tight {
margin: 0;
}
.faction-panel-loading {
display: none;
gap: 0.7rem;
margin-top: 0.75rem;
}
.faction-panel-loading.htmx-request,
.htmx-request > .faction-panel-loading,
.htmx-request.faction-panel-loading {
display: grid;
}
.faction-panel-loading__line,
.faction-panel-loading__card {
position: relative;
overflow: hidden;
border-radius: 16px;
background: color-mix(in srgb, var(--bg-secondary), black 6%);
min-height: 0.95rem;
}
.faction-panel-loading__line::after,
.faction-panel-loading__card::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
animation: adr-shimmer 1.6s ease-in-out infinite;
}
.faction-panel-loading__card {
min-height: 4rem;
}
.faction-panel-loading__line--short {
width: 40%;
}
.faction-tab-bar {
padding: 0.35rem;
}
.faction-tab-panel[hidden] {
display: none !important;
}
.faction-command-overlay[hidden] {
display: none !important;
}
.faction-command-overlay {
position: fixed;
inset: 0;
z-index: 980;
display: grid;
align-items: end;
}
.faction-command-overlay__backdrop {
position: absolute;
inset: 0;
background: rgba(8, 12, 20, 0.55);
}
.faction-command-drawer {
position: relative;
margin: 0;
border-radius: 24px 24px 0 0;
transform: translateY(100%);
transition: transform var(--duration-normal) var(--ease-out);
}
.faction-command-overlay.is-open .faction-command-drawer {
transform: translateY(0);
}
.faction-command-section {
display: grid;
gap: 1rem;
}
.faction-command-form {
padding: 1rem;
border: 1px solid var(--border);
border-radius: 18px;
background: color-mix(in srgb, var(--bg-card), black 4%);
}
.faction-command-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0.75rem;
}
.faction-command-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.faction-command-column {
display: grid;
gap: 0.85rem;
align-content: start;
}
.faction-command-card {
display: grid;
gap: 0.7rem;
}
.faction-command-copy {
white-space: pre-wrap;
margin: 0;
}
.faction-command-meta {
gap: 0.5rem;
}
.faction-command-subsection {
margin-top: 1rem;
}
.faction-command-details > summary {
min-height: 44px;
display: flex;
align-items: center;
cursor: pointer;
font-weight: 700;
}
.faction-command-details[open] > summary {
margin-bottom: 0.6rem;
}
.badge-info {
background: color-mix(in srgb, var(--accent), transparent 82%);
color: var(--accent);
}
.badge-warning {
background: rgba(245, 158, 11, 0.18);
color: #fbbf24;
}
.badge-danger {
background: rgba(239, 68, 68, 0.18);
color: #fca5a5;
}
.badge-success {
background: rgba(34, 197, 94, 0.18);
color: #86efac;
}
.badge-muted {
background: color-mix(in srgb, var(--bg-secondary), white 6%);
color: var(--text-muted);
}
body.faction-drawer-open {
overflow: hidden;
}
@media (min-width: 880px) {
.faction-command-overlay {
align-items: center;
justify-items: end;
padding: 1rem;
}
.faction-command-drawer {
width: min(32rem, calc(100vw - 2rem));
border-radius: 24px;
transform: translateX(110%);
}
.faction-command-overlay.is-open .faction-command-drawer {
transform: translateX(0);
}
}
.faction-form-layout {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 1rem;
align-items: start;
}
.faction-preview-section {
margin: 0;
}
.faction-preview-section > summary {
list-style: none;
cursor: pointer;
min-height: 44px;
display: flex;
align-items: center;
font-weight: 700;
margin-bottom: 0.75rem;
}
.faction-preview-section > summary::-webkit-details-marker {
display: none;
}
.faction-emblem-picker,
.faction-color-palette {
display: flex;
gap: 0.45rem;
flex-wrap: wrap;
margin-top: 0.55rem;
}
.faction-color-swatch {
width: 2rem;
height: 2rem;
padding: 0;
border-radius: 999px;
border: 2px solid transparent;
background: var(--swatch-color);
}
.faction-color-swatch.is-selected {
border-color: var(--text-primary);
box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px color-mix(in srgb, var(--text-primary), transparent 55%);
}
.faction-alignment-chips {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.faction-form-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.6rem;
}
@media (max-width: 768px) {
.faction-command-grid,
.faction-command-columns {
grid-template-columns: 1fr;
}
.faction-form-layout {
grid-template-columns: 1fr;
}
.faction-form-actions {
position: sticky;
bottom: 0;
z-index: 10;
margin-inline: calc(-1 * var(--space-5));
padding: 0.75rem var(--space-5) max(0.75rem, var(--sab));
border-top: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-primary), black 6%);
}
.faction-form-actions .btn {
flex: 1 1 180px;
}
}
@media (max-width: 1024px) {
.faction-color-swatch {
width: 44px;
height: 44px;
}
.faction-color-palette {
gap: 0.5rem;
}
.faction-emblem-picker .btn-sm {
min-width: 44px;
min-height: 44px;
font-size: 1.25rem;
}
}
@media (max-width: 400px) {
.faction-alignment-chips {
grid-template-columns: 1fr;
}
}
.quest-progress-summary {
margin-bottom: 0.85rem;
}
.quest-chain {
margin-bottom: 0.9rem;
}
.quest-chain-title {
margin-bottom: 0.5rem;
}
.quest-chain-track {
display: flex;
align-items: center;
gap: 0.55rem;
overflow-x: auto;
padding: 0.3rem 0.1rem 0.55rem;
scroll-snap-type: x proximity;
scrollbar-width: thin;
}
.quest-chain-track-branch {
align-items: stretch;
}
.quest-chain-node {
display: inline-flex;
align-items: center;
gap: 0.35rem;
flex: 0 0 auto;
scroll-snap-align: center;
}
.quest-chain-card {
display: grid;
gap: 0.15rem;
min-width: 144px;
max-width: 180px;
padding: 0.58rem;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-elevated);
}
.quest-chain-card-focus {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary), transparent 65%);
}
.quest-chain-icon {
font-size: 1.25rem;
line-height: 1;
}
.quest-chain-name {
font-size: 0.88rem;
line-height: 1.2;
}
.quest-chain-meta {
color: var(--text-secondary);
font-size: 0.74rem;
}
.quest-chain-connector {
color: var(--text-muted);
font-weight: 700;
font-size: 0.8rem;
}
.quest-chain-node-completed .quest-chain-card {
border-color: color-mix(in srgb, var(--success), transparent 58%);
}
.quest-chain-node-available .quest-chain-card,
.quest-chain-node-in_progress .quest-chain-card {
border-color: color-mix(in srgb, var(--accent-primary), transparent 40%);
}
.quest-chain-node-locked .quest-chain-card {
opacity: 0.72;
}
@media (max-width: 640px) {
.quest-chain-card {
min-width: 132px;
max-width: 152px;
}
}
body {
--participant-nav-height: 72px;
}
body[data-app-role="participant"] .page-mobile {
padding-bottom: calc(var(--participant-nav-height) + var(--sab));
}
body[data-app-role="participant"] .page-mobile:has(.participant-preview-banner) {
padding-top: 5.4rem;
}
.participant-preview-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 92;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.8rem;
align-items: center;
padding: calc(0.8rem + var(--sat)) calc(1rem + var(--sar)) 0.8rem calc(1rem + var(--sal));
background: color-mix(in srgb, var(--danger), #08101e 62%);
border-bottom: 1px solid color-mix(in srgb, var(--danger), white 20%);
box-shadow: 0 14px 34px rgba(8, 16, 30, 0.24);
}
.participant-preview-banner__body {
display: grid;
gap: 0.18rem;
}
.participant-preview-banner__body strong,
.participant-preview-banner__body span,
.participant-preview-banner__body p {
color: #f8fafc;
margin: 0;
}
.participant-preview-banner__body p {
font-size: 0.92rem;
color: rgba(248, 250, 252, 0.84);
}
.participant-preview-banner__actions {
display: flex;
align-items: center;
}
body[data-admin-impersonation="true"] {
padding-top: 4.5rem;
}
.admin-impersonation-banner {
position: fixed;
inset: 0 0 auto 0;
z-index: 2200;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.8rem;
align-items: center;
padding: calc(0.8rem + var(--sat)) calc(1rem + var(--sar)) 0.8rem calc(1rem + var(--sal));
background: linear-gradient(135deg, rgba(110, 76, 255, 0.98), rgba(9, 20, 48, 0.98));
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 14px 34px rgba(8, 16, 30, 0.24);
}
.admin-impersonation-banner__body {
display: grid;
gap: 0.18rem;
}
.admin-impersonation-banner__body strong,
.admin-impersonation-banner__body span,
.admin-impersonation-banner__body p {
color: #f8fafc;
margin: 0;
}
.admin-impersonation-banner__body p {
font-size: 0.92rem;
color: rgba(248, 250, 252, 0.84);
}
.admin-impersonation-banner__actions {
display: flex;
align-items: center;
}
.participant-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 80;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
align-items: flex-end;
gap: 0.1rem;
padding: 0.2rem calc(0.35rem + var(--sar)) calc(0.25rem + var(--sab)) calc(0.35rem + var(--sal));
border-top: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-card), black 8%);
backdrop-filter: blur(8px);
}
.nav-tab {
min-height: 56px;
text-decoration: none;
color: var(--text-secondary);
font-size: 0.66rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border-radius: var(--radius-sm);
position: relative;
}
.nav-tab-icon {
font-size: 1.05rem;
line-height: 1;
}
.nav-tab-label {
margin-top: 0.16rem;
}
.nav-tab-active {
color: var(--text-primary);
background: color-mix(in srgb, var(--accent-primary), transparent 82%);
}
.nav-tab-primary {
color: var(--text-primary);
}
.nav-tab-ring {
width: 46px;
height: 46px;
border-radius: 999px;
margin-top: -18px;
margin-bottom: 0.15rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--accent-primary), #2f8fd8);
border: 1px solid color-mix(in srgb, var(--accent-primary), white 20%);
box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-primary), transparent 60%);
}
.nav-tab-primary .nav-tab-icon {
font-size: 1.28rem;
}
.nav-tab-badge-dot {
min-width: 18px;
height: 18px;
border-radius: 999px;
position: absolute;
right: calc(50% - 19px);
top: 2px;
font-size: 0.68rem;
background: var(--danger);
color: #fff;
padding: 0 0.3rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
@media (max-width: 380px) {
.participant-preview-banner {
grid-template-columns: 1fr;
padding-inline: 0.8rem;
}
.admin-impersonation-banner {
grid-template-columns: 1fr;
padding-inline: 0.8rem;
}
.participant-nav {
gap: 0.05rem;
padding-inline: 0.2rem;
}
.nav-tab {
font-size: 0.6rem;
}
.nav-tab-label {
margin-top: 0.12rem;
letter-spacing: -0.01em;
}
}
.player-nav-legacy {
display: none;
}
@media (min-width: 768px) {
body[data-app-role="participant"] .page-mobile {
padding-bottom: 0;
}
body[data-app-role="participant"] .page-mobile:has(.participant-preview-banner) {
padding-top: 0;
}
.participant-nav {
display: none;
}
.player-nav-legacy {
display: grid;
}
.participant-preview-banner {
position: sticky;
top: 0;
margin: 0 0 1rem;
border-radius: var(--radius-sm);
}
.admin-impersonation-banner {
left: 1rem;
right: 1rem;
top: 0.75rem;
border-radius: var(--radius-sm);
}
}
.pull-refresh {
height: 0;
opacity: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.35rem;
}
.pull-refresh-indicator {
display: inline-flex;
gap: 0.45rem;
align-items: center;
color: var(--text-secondary);
font-size: 0.84rem;
}
.pull-refresh-icon {
font-size: 1rem;
}
.touch-list {
min-height: 120px;
}
.swipe-row {
--swipe-actions-width: 116px;
position: relative;
overflow: hidden;
border-radius: var(--radius-sm);
isolation: isolate;
touch-action: pan-y;
}
.swipe-row-content {
position: relative;
z-index: 2;
margin: 0;
transition: transform 0.18s ease;
will-change: transform;
}
.swipe-row.is-swiped-open .swipe-row-content {
transform: translateX(calc(var(--swipe-actions-width) * -1));
}
.swipe-row-actions {
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: inline-flex;
align-items: stretch;
justify-content: flex-end;
z-index: 1;
min-width: 116px;
pointer-events: none;
}
.swipe-row.is-swiped-open .swipe-row-actions {
pointer-events: auto;
}
.swipe-row-actions > * {
display: flex;
}
.swipe-action {
border: none;
min-width: 58px;
height: 100%;
padding: 0 0.5rem;
font-size: 1.1rem;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
cursor: pointer;
}
.swipe-action-pin {
background: color-mix(in srgb, var(--accent-primary), black 18%);
}
.swipe-action-open {
background: color-mix(in srgb, var(--accent-primary), black 14%);
}
.swipe-action-read {
background: color-mix(in srgb, var(--success), black 18%);
}
.load-more {
text-align: center;
padding: 0.55rem 0.2rem 0.8rem;
}
.load-more-spinner {
display: inline-flex;
gap: 0.55rem;
align-items: center;
color: var(--text-secondary);
font-size: 0.84rem;
}
.list-end {
text-align: center;
color: var(--text-muted);
font-size: 0.8rem;
padding: 0.7rem 0.2rem 0.85rem;
}
.scan-first-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: color-mix(in srgb, var(--warning), transparent 80%);
color: color-mix(in srgb, var(--warning), white 14%);
border: 1px solid color-mix(in srgb, var(--warning), transparent 58%);
border-radius: 999px;
padding: 0.24rem 0.58rem;
font-size: 0.78rem;
margin-bottom: 0.55rem;
}
.scan-outcomes {
display: grid;
gap: 0.38rem;
margin-bottom: 0.58rem;
}
.scan-outcome-item {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.84rem;
color: var(--text-secondary);
}
.scan-outcome-title {
font-weight: 600;
color: var(--text-primary);
}
.scan-outcome-value {
color: var(--text-secondary);
}
.scan-next-card {
border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-secondary), black 8%);
border-radius: var(--radius-sm);
padding: 0.6rem 0.7rem;
margin-bottom: 0.55rem;
}
.scan-next-card h3 {
margin: 0 0 0.25rem;
font-size: 0.93rem;
}
.scan-next-card p {
margin: 0;
color: var(--text-secondary);
font-size: 0.83rem;
}
.scan-share-btn {
margin-top: 0.3rem;
}
.notification-priority.urgent {
border-color: color-mix(in srgb, var(--danger), transparent 20%);
color: #fff;
background: color-mix(in srgb, var(--danger), black 12%);
}
.notification-priority.high {
border-color: color-mix(in srgb, var(--warning), transparent 30%);
color: color-mix(in srgb, var(--warning), white 18%);
background: color-mix(in srgb, var(--warning), transparent 86%);
}
.notification-priority.normal {
border-color: color-mix(in srgb, var(--accent-primary), transparent 42%);
}
.notification-priority.low,
.notification-priority.batch {
opacity: 0.85;
}
.qr-mini-preview-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
border-radius: var(--radius-xs);
border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-secondary), black 8%);
}
.qr-mini-preview-img {
width: 46px;
height: 46px;
border-radius: 6px;
object-fit: contain;
}
.qr-insight-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.7rem;
}
.qr-insight-card {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-secondary), black 8%);
padding: 0.72rem;
}
.qr-insight-head {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.4rem;
}
.qr-insight-icon {
font-size: 1.1rem;
}
.qr-insight-card p {
margin: 0;
}
.qr-insight-card .subtitle {
margin-top: 0.35rem;
}
.qr-insight-positive {
border-color: color-mix(in srgb, var(--success), transparent 50%);
}
.qr-insight-warning {
border-color: color-mix(in srgb, var(--warning), transparent 45%);
}
.qr-insight-alert {
border-color: color-mix(in srgb, var(--danger), transparent 38%);
}
.qr-analytics-split-chart {
display: flex;
align-items: stretch;
margin-top: 0.8rem;
min-height: 34px;
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-secondary), black 12%);
}
.qr-analytics-split-success,
.qr-analytics-split-failure {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.74rem;
font-weight: 700;
min-width: 12%;
}
.qr-analytics-split-success {
color: color-mix(in srgb, var(--success), white 16%);
background: color-mix(in srgb, var(--success), transparent 78%);
}
.qr-analytics-split-failure {
color: color-mix(in srgb, var(--danger), white 12%);
background: color-mix(in srgb, var(--danger), transparent 82%);
}
.faction-hub-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-bottom: 0.8rem;
}
.faction-hub-tab {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-secondary), black 6%);
color: var(--text-secondary);
font-weight: 700;
padding: 0.52rem 0.72rem;
min-height: 44px;
cursor: pointer;
}
.faction-hub-tab.is-active {
color: var(--text-primary);
border-color: color-mix(in srgb, var(--accent-primary), transparent 48%);
background: color-mix(in srgb, var(--accent-primary), transparent 82%);
}
.faction-hub-panel[hidden] {
display: none !important;
}
@media (min-width: 768px) {
.swipe-row-actions {
display: none;
}
}
.htmx-indicator {
display: none !important;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
display: inline-flex !important;
}
.spinner {
display: inline-block;
width: 1em;
height: 1em;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.spinner {
animation: none !important;
}
}
.wm-skel {
position: relative;
overflow: hidden;
background: color-mix(in srgb, var(--bg-elevated, #20263a) 88%, white 12%);
border-radius: var(--radius-xs);
}
.wm-skel::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.08) 42%,
rgba(255, 255, 255, 0.12) 50%,
rgba(255, 255, 255, 0.08) 58%,
rgba(255, 255, 255, 0) 100%
);
transform: translateX(-100%);
animation: wm-skel-shimmer 1.6s ease-in-out infinite;
}
@keyframes wm-skel-shimmer {
100% {
transform: translateX(100%);
}
}
.wm-skel-line {
width: 100%;
height: 0.85rem;
margin: 0;
}
.wm-skel-line.short {
width: 60%;
}
.wm-skel-line.xs {
width: 35%;
}
.wm-skel-circle {
width: 3rem;
height: 3rem;
border-radius: 999px;
flex-shrink: 0;
}
.wm-skel-circle.sm {
width: 2rem;
height: 2rem;
}
.wm-skel-circle.lg {
width: 4.5rem;
height: 4.5rem;
}
.wm-skel-rect {
width: 100%;
height: 6rem;
border-radius: var(--radius-sm);
}
.wm-skel-card {
padding: 1rem;
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card, #171c2d) 92%, white 8%);
border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.wm-skel-row {
display: flex;
align-items: center;
gap: 0.75rem;
}
.wm-skel-stack {
display: flex;
flex: 1;
flex-direction: column;
gap: 0.5rem;
}
.wm-skel-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.75rem;
}
.wm-skel-table {
display: grid;
gap: 0.75rem;
}
.wm-skel-war-room {
display: grid;
gap: 0.75rem;
}
.wm-skel-profile {
display: grid;
gap: 1rem;
text-align: center;
}
.wm-skel-profile-stats {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.wm-skel-profile-stat {
min-width: 4.5rem;
}
[data-skel-container] {
position: relative;
}
[data-skel] {
transition: opacity 0.18s ease;
}
[data-skel].is-loaded {
opacity: 0;
pointer-events: none;
}
.wm-skel-overlay {
position: absolute;
inset: 0;
z-index: 2;
display: grid;
align-content: start;
gap: 0.75rem;
padding: 0;
background: color-mix(in srgb, var(--bg-app, #0d1322) 68%, transparent 32%);
border-radius: inherit;
pointer-events: none;
}
.wm-skel-overlay.htmx-indicator {
display: none !important;
}
.htmx-request .wm-skel-overlay.htmx-indicator,
.htmx-request.htmx-indicator.wm-skel-overlay {
display: grid !important;
}
.wm-skel-pane-overlay {
padding: 0.5rem;
}
.wm-skel-pane-overlay > [data-skel] {
height: 100%;
}
@media (prefers-reduced-motion: reduce) {
.wm-skel::after {
animation: none !important;
transform: none;
}
}
/* Page-enter animation must NOT apply a transform: the page root (<main>) is
the containing block for position:fixed descendants such as
.participant-shell__sidebar. Any transform (including an identity translate)
reparents those fixed elements onto <main> instead of the viewport, which
made the desktop sidebar overlap the content column on first load. Opacity
is enough — it gives the same perceived fade without moving the layout. */
.wmu-page-enter {
opacity: 0;
}
.wmu-page-enter.wmu-page-enter-done {
opacity: 1;
transition: opacity 220ms ease-out;
}
.wmu-swap-enter {
will-change: opacity, transform;
}
.wmu-swap-leave {
will-change: opacity;
}
.htmx-swapping {
opacity: 0.4;
transition: opacity 120ms var(--ease-accelerate, ease-in);
}
.no-swap-animate.htmx-settling,
.no-swap-animate.htmx-added,
.no-swap-animate .htmx-settling,
.no-swap-animate .htmx-added {
animation: none !important;
transition: none !important;
}
@keyframes wmuSwapEnter {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.wm-tab-panel {
animation: wmuSwapEnter 180ms var(--ease-decelerate, ease-out);
}
.wm-tab-panel[hidden] {
display: none !important;
}
.wm-tab-panel.slide-left {
animation: wm-tab-slide-left 180ms var(--ease-decelerate, ease-out);
}
.wm-tab-panel.slide-right {
animation: wm-tab-slide-right 180ms var(--ease-decelerate, ease-out);
}
@keyframes wm-tab-slide-left {
from {
opacity: 0;
transform: translateX(16px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes wm-tab-slide-right {
from {
opacity: 0;
transform: translateX(-16px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@media (prefers-reduced-motion: no-preference) {
::view-transition-old(root) {
animation: 150ms var(--ease-accelerate, ease-in) both vt-fade-out;
}
::view-transition-new(root) {
animation: 200ms var(--ease-decelerate, ease-out) both vt-fade-in;
}
}
@keyframes vt-fade-out {
to {
opacity: 0;
transform: translateY(-4px);
}
}
@keyframes vt-fade-in {
from {
opacity: 0;
transform: translateY(6px);
}
}
/*
* Card motion — legacy shorthand kept for backward compat.
* For richer lift/settle behaviour, use .motion-lift from
* 27_tactile_motion.css (ADR-0670) which adds spring easing
* and the shared --motion-* token vocabulary.
*/
.card {
transition: transform 150ms ease, box-shadow 150ms ease;
}
.card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.card:active {
transform: translateY(0) scale(0.99);
}
.btn {
transition: transform 110ms ease, opacity 110ms ease;
}
.btn:active:not(:disabled) {
transform: scale(0.97);
}
[data-countup],
[data-count-to],
.count-animated,
[data-count] {
font-variant-numeric: tabular-nums;
display: inline-block;
min-width: 1ch;
}
/*
* Pulse feedback — for gentler confirmation motion, see
* .motion-confirm in 27_tactile_motion.css (ADR-0670).
*/
.wm-pulse {
animation: wmPulse 400ms ease-out;
}
@keyframes wmPulse {
0% {
box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-primary), transparent 30%);
}
50% {
box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-primary), transparent 80%);
}
100% {
box-shadow: 0 0 0 0 transparent;
}
}
.badge-success.wm-pulse,
.alert.success.wm-pulse,
.tone-success.wm-pulse {
animation-name: wmPulseSuccess;
}
@keyframes wmPulseSuccess {
0% {
box-shadow: 0 0 0 0 color-mix(in srgb, var(--success), transparent 30%);
}
50% {
box-shadow: 0 0 0 6px color-mix(in srgb, var(--success), transparent 80%);
}
100% {
box-shadow: 0 0 0 0 transparent;
}
}
.stagger-enter > * {
animation: wmuSwapEnter 200ms var(--ease-decelerate) both;
}
.stagger-enter > *:nth-child(1) { animation-delay: 0ms; }
.stagger-enter > *:nth-child(2) { animation-delay: 40ms; }
.stagger-enter > *:nth-child(3) { animation-delay: 80ms; }
.stagger-enter > *:nth-child(4) { animation-delay: 120ms; }
.stagger-enter > *:nth-child(5) { animation-delay: 160ms; }
.stagger-enter > *:nth-child(6) { animation-delay: 200ms; }
.stagger-enter > *:nth-child(7) { animation-delay: 240ms; }
.stagger-enter > *:nth-child(8) { animation-delay: 280ms; }
.stagger-enter > *:nth-child(9) { animation-delay: 320ms; }
.stagger-enter > *:nth-child(10) { animation-delay: 360ms; }
.stagger-enter > *:nth-child(n+11) { animation-delay: 400ms; }
.wm-toggle {
position: relative;
display: inline-flex;
width: 2.75rem;
height: 1.5rem;
background: var(--surface-overlay);
border-radius: 999px;
border: 1px solid var(--border);
cursor: pointer;
transition: background 200ms ease, border-color 200ms ease;
flex-shrink: 0;
appearance: none;
-webkit-appearance: none;
}
.wm-toggle::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: calc(1.5rem - 6px);
height: calc(1.5rem - 6px);
border-radius: 50%;
background: var(--text-secondary);
transition: transform 200ms var(--ease-emphasized), background 200ms ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.wm-toggle:checked {
background: color-mix(in srgb, var(--accent-primary) 30%, transparent);
border-color: var(--accent-primary);
}
.wm-toggle:checked::after {
transform: translateX(1.25rem);
background: var(--accent-primary);
}
[data-count] {
font-variant-numeric: tabular-nums;
}
body.scan-success {
animation: scanPulse 520ms ease-out;
}
body.scan-failure {
animation: scanShake 380ms ease-out;
}
@keyframes scanPulse {
0% {
box-shadow: inset 0 0 0 0 rgba(74, 222, 128, 0.5);
}
100% {
box-shadow: inset 0 0 0 40px rgba(74, 222, 128, 0);
}
}
@keyframes scanShake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
75% { transform: translateX(-3px); }
}
@media (prefers-reduced-motion: reduce) {
.wmu-page-enter,
.wmu-page-enter.wmu-page-enter-done,
.wmu-swap-enter,
.htmx-swapping,
.htmx-added,
.htmx-settling,
.wm-tab-panel,
.wm-tab-panel.slide-left,
.wm-tab-panel.slide-right,
.card,
.btn,
.wm-pulse,
.stagger-enter > *,
.wm-toggle,
.wm-toggle::after,
body.scan-success,
body.scan-failure {
animation: none !important;
transition: none !important;
transform: none !important;
}
}
.wm-img-wrap {
position: relative;
display: block;
overflow: hidden;
background: var(--bg-elevated);
}
.wm-img-wrap.is-loaded {
background: transparent;
}
.wm-img-blur,
.wm-img-main {
display: block;
width: 100%;
}
.wm-img-wrap.has-placeholder .wm-img-blur {
filter: blur(20px);
transform: scale(1.04);
transition: opacity 300ms ease;
}
.wm-img-wrap.has-placeholder .wm-img-main {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 300ms ease;
}
.wm-img-wrap.is-loaded .wm-img-main {
opacity: 1;
}
.wm-img-wrap.is-loaded .wm-img-blur {
opacity: 0;
}
.wm-img-wrap.wm-img-round {
border-radius: 999px;
}
.wm-img-wrap.wm-img-rounded {
border-radius: var(--radius-md);
}
.wm-img-wrap.wm-img-round .wm-img-blur,
.wm-img-wrap.wm-img-round .wm-img-main,
.wm-img-wrap.wm-img-rounded .wm-img-blur,
.wm-img-wrap.wm-img-rounded .wm-img-main {
border-radius: inherit;
}
.wm-img-wrap.wm-img-contain.has-placeholder .wm-img-blur,
.wm-img-wrap.wm-img-contain.has-placeholder .wm-img-main {
object-fit: contain;
background: var(--bg-elevated);
}
.wm-img-wrap.wm-img-reveal {
margin-top: 1.5rem;
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-elevated) 88%, black 12%);
}
.wm-img-wrap.wm-img-reveal.has-placeholder .wm-img-blur,
.wm-img-wrap.wm-img-reveal.has-placeholder .wm-img-main {
height: min(18.75rem, 60vw);
max-height: 18.75rem;
}
@media (prefers-reduced-motion: reduce) {
.wm-img-blur,
.wm-img-main {
transition: none;
}
}
.scan-result-page {
min-height: 100vh;
min-height: 100dvh;
}
.scan-result-frame {
padding-bottom: calc(var(--sab) + 5rem);
}
.scan-result-subtitle {
margin: 0 0 0.35rem;
}
.scan-icon {
font-size: clamp(3rem, 8vw, 4rem);
line-height: 1;
margin-bottom: var(--space-4);
display: block;
}
.scan-action-shell {
position: sticky;
bottom: 0;
z-index: var(--z-sticky, 40);
}
.scan-result-card {
margin: 1rem 0;
}
.scan-stack {
display: grid;
gap: var(--space-3);
}
.scan-stat-grid,
.stat-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
}
.stat-card,
.scan-stat-card {
background: var(--surface-overlay);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: var(--space-3);
text-align: center;
}
.scan-result-status {
padding: 1.5rem 1rem;
text-align: center;
}
.scan-result-status .status-icon {
display: block;
margin-bottom: 0.75rem;
font-size: 2.25rem;
}
.scan-theme-dark {
background:
radial-gradient(circle at top, color-mix(in srgb, var(--text-primary) 12%, transparent), transparent 35%),
linear-gradient(180deg, #131926 0%, #090d15 100%);
color: #f6f2ea;
}
.scan-theme-ceremony {
background:
radial-gradient(circle at 50% 0%, var(--scan-reward-glow), transparent 45%),
linear-gradient(180deg, #131926 0%, #090d15 100%);
color: #f6f2ea;
}
.scan-theme-danger {
background:
radial-gradient(circle at top, var(--scan-fail-glow), transparent 40%),
linear-gradient(180deg, #131926 0%, #090d15 100%);
color: #f6f2ea;
}
.scan-color-dynamic {
color: var(--scan-dynamic-color, var(--text-primary));
}
.scan-bg-dynamic {
background: var(--scan-dynamic-bg, var(--bg-card));
}
.scan-border-dynamic {
border-color: var(--scan-dynamic-border, var(--border));
}
.scan-color-dot {
width: 16px;
height: 16px;
border-radius: 50%;
flex-shrink: 0;
background: var(--scan-dynamic-bg, var(--accent-primary));
}
.scan-balance-scale {
margin: 1rem auto 1.25rem;
width: 12rem;
text-align: center;
}
.scan-balance-scale-stage {
position: relative;
height: 5.5rem;
}
.scan-balance-scale-post {
position: absolute;
left: 50%;
top: 0;
width: 6px;
height: 5.5rem;
background: var(--surface-overlay-hover);
transform: translateX(-50%);
border-radius: 999px;
}
.scan-balance-scale-beam {
position: absolute;
left: 50%;
top: 1.6rem;
width: 10rem;
height: 4px;
background: var(--scan-reward);
border-radius: 999px;
transform: translateX(-50%) rotate(var(--scan-rotate-deg, 0deg));
transform-origin: center;
}
.scan-balance-scale-weight {
position: absolute;
top: 2.6rem;
width: 2.6rem;
height: 2.6rem;
border: 2px solid color-mix(in srgb, var(--text-primary) 42%, transparent);
border-radius: 999px;
}
.scan-balance-scale-weight.left {
left: calc(50% - 4.25rem);
}
.scan-balance-scale-weight.right {
right: calc(50% - 4.25rem);
}
.scan-faction-chip {
background: color-mix(in srgb, var(--scan-dynamic-color, var(--accent-primary)) 16%, transparent);
color: var(--scan-dynamic-color, var(--accent-primary));
border: 1px solid color-mix(in srgb, var(--scan-dynamic-color, var(--accent-primary)) 40%, transparent);
}
.scan-empty-card {
text-align: center;
padding: 3rem;
}
.scan-quote {
margin: 1rem 0 0;
padding: 0.75rem 1rem;
border-left: 3px solid var(--tone-accent);
font-style: italic;
color: var(--text-secondary);
}
.scan-list-reset {
list-style: none;
padding: 0;
}
.scan-list-item {
padding: 0.4rem 0;
border-bottom: 1px solid var(--border);
color: var(--text-secondary);
}
.scan-qr-wrap {
margin: 0 auto 0.75rem;
}
:root {
--ritual-pause-short: 300ms;
--ritual-pause-medium: 600ms;
--ritual-pause-long: 1000ms;
--ritual-reveal-duration: 400ms;
--ritual-settle-duration: 200ms;
--ritual-stagger-offset: 120ms;
--ritual-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ritual-pending {
opacity: 0;
transform: translateY(8px);
}
.ritual-reveal {
animation: ritual-reveal-in var(--ritual-reveal-duration) var(--ritual-ease) forwards;
}
@keyframes ritual-reveal-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.ritual-stagger > .ritual-pending:nth-child(1) { animation-delay: 0ms; }
.ritual-stagger > .ritual-pending:nth-child(2) { animation-delay: var(--ritual-stagger-offset); }
.ritual-stagger > .ritual-pending:nth-child(3) { animation-delay: calc(var(--ritual-stagger-offset) * 2); }
.ritual-stagger > .ritual-pending:nth-child(4) { animation-delay: calc(var(--ritual-stagger-offset) * 3); }
.ritual-stagger > .ritual-pending:nth-child(5) { animation-delay: calc(var(--ritual-stagger-offset) * 4); }
.ritual-settle {
animation: ritual-settle var(--ritual-settle-duration) var(--ritual-ease) forwards;
}
@keyframes ritual-settle {
from { transform: scale(1.02); }
to { transform: scale(1); }
}
.ritual-milestone {
animation: ritual-milestone-pulse 600ms var(--ritual-ease);
}
@keyframes ritual-milestone-pulse {
0% { transform: scale(1); }
40% { transform: scale(1.03); }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.ritual-pending { opacity: 1; transform: none; }
.ritual-reveal { animation: none; opacity: 1; transform: none; }
.ritual-settle { animation: none; transform: none; }
.ritual-milestone { animation: none; transform: none; }
:root {
--ritual-pause-short: 0ms;
--ritual-pause-medium: 0ms;
--ritual-pause-long: 0ms;
}
}
.wm-offline-banner {
position: fixed;
top: calc(var(--sat) + 0.75rem);
left: 50%;
transform: translate(-50%, -150%);
width: min(42rem, calc(100vw - 1.5rem));
z-index: calc(var(--z-toast, 5000) - 100);
display: flex;
align-items: center;
justify-content: center;
padding: 0.9rem 1rem;
border: 1px solid color-mix(in srgb, var(--warning, #f59e0b), transparent 35%);
border-radius: 999px;
background: color-mix(in srgb, var(--warning, #f59e0b) 18%, var(--bg-elevated, #111827));
color: var(--text, #f8fafc);
box-shadow: 0 1rem 2rem rgb(15 23 42 / 0.25);
opacity: 0;
pointer-events: none;
transition:
transform 180ms ease,
opacity 180ms ease;
}
.wm-offline-banner.is-visible {
transform: translate(-50%, 0);
opacity: 1;
}
@media (max-width: 640px) {
.wm-offline-banner {
width: calc(100vw - 1rem);
padding:
calc(0.85rem + var(--sat) * 0.15)
0.95rem;
border-radius: 1rem;
top: 0.5rem;
}
}
@media (prefers-reduced-motion: reduce) {
.wm-offline-banner {
transition: none;
}
}
.wm-toast-host,
.ops-toast-root {
position: fixed;
left: 50%;
bottom: calc(var(--sab) + 5.5rem);
transform: translateX(-50%);
z-index: 4000;
display: flex;
flex-direction: column-reverse;
align-items: center;
gap: 0.5rem;
width: min(92vw, 420px);
pointer-events: none;
}
.wm-toast-host .toastify,
.ops-toast-root .toastify {
position: relative !important;
inset: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
transform: none !important;
display: block;
width: 100%;
max-width: 100%;
padding: 0.75rem 1rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg-elevated);
color: var(--text-primary);
box-shadow: var(--shadow-md);
max-width: 100%;
min-width: 0;
cursor: default;
pointer-events: auto;
}
.wm-toast-host .toastify.wm-toast,
.ops-toast-root .toastify.wm-toast {
background-image: none;
}
.wm-toast-host .toastify.wm-toast-persistent,
.ops-toast-root .toastify.wm-toast-persistent {
border-width: 2px;
}
.wm-toast-body {
display: flex;
align-items: center;
gap: 0.55rem;
width: 100%;
min-width: 0;
}
.wm-toast-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.3rem;
font-size: 1rem;
line-height: 1;
font-weight: 700;
}
.wm-toast-copy {
flex: 1;
min-width: 0;
line-height: 1.35;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.wm-toast-title {
font-size: 0.88rem;
line-height: 1.2;
}
.wm-toast-text {
min-width: 0;
}
.wm-toast-host .toastify.wm-toast-success,
.ops-toast-root .toastify.wm-toast-success {
border-color: color-mix(in srgb, var(--success), transparent 60%);
background: color-mix(in srgb, var(--success) 12%, var(--bg-elevated));
}
.wm-toast-host .toastify.wm-toast-success .wm-toast-icon,
.ops-toast-root .toastify.wm-toast-success .wm-toast-icon {
color: var(--success);
}
.wm-toast-host .toastify.wm-toast-error,
.ops-toast-root .toastify.wm-toast-error {
border-color: color-mix(in srgb, var(--danger), transparent 60%);
background: color-mix(in srgb, var(--danger) 12%, var(--bg-elevated));
}
.wm-toast-host .toastify.wm-toast-error .wm-toast-icon,
.ops-toast-root .toastify.wm-toast-error .wm-toast-icon {
color: var(--danger);
}
.wm-toast-host .toastify.wm-toast-warning,
.ops-toast-root .toastify.wm-toast-warning {
border-color: color-mix(in srgb, var(--warning), transparent 60%);
background: color-mix(in srgb, var(--warning) 12%, var(--bg-elevated));
}
.wm-toast-host .toastify.wm-toast-warning .wm-toast-icon,
.ops-toast-root .toastify.wm-toast-warning .wm-toast-icon {
color: var(--warning);
}
.wm-toast-host .toastify.wm-toast-reward,
.ops-toast-root .toastify.wm-toast-reward {
border-color: color-mix(in srgb, var(--accent-warm, #f4bf4f), transparent 48%);
background: linear-gradient(
135deg,
color-mix(in srgb, var(--accent-warm, #f4bf4f) 18%, var(--bg-elevated)),
color-mix(in srgb, var(--accent-warm, #f4bf4f) 10%, var(--bg-elevated))
);
}
.wm-toast-host .toastify.wm-toast-reward .wm-toast-icon,
.ops-toast-root .toastify.wm-toast-reward .wm-toast-icon {
color: var(--accent-warm, #f4bf4f);
}
.wm-toast-host .toastify .toast-close,
.ops-toast-root .toastify .toast-close {
align-self: flex-start;
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1;
opacity: 0.72;
padding: 0 0 0 0.65rem;
}
.wm-toast-host .toastify .toast-close:hover,
.ops-toast-root .toastify .toast-close:hover {
opacity: 1;
}
@media (max-width: 640px) {
.wm-toast-host,
.ops-toast-root {
width: min(94vw, 32rem);
bottom: calc(var(--sab) + 4.9rem);
}
}
@media (prefers-reduced-motion: reduce) {
.wm-toast-host .toastify,
.ops-toast-root .toastify {
transition-duration: 120ms;
}
}
@media print {
:root {
--bg-primary: #ffffff;
--bg-secondary: #ffffff;
--bg-card: #ffffff;
--text-primary: #111111;
--text-secondary: #333333;
--border: rgba(0, 0, 0, 0.22);
}
body {
background: #ffffff !important;
color: #111111 !important;
}
.btn,
.dashboard-nav,
.gm-nav-mobile-bar,
.ops-toast-root,
.app-version-footer {
display: none !important;
}
.card,
.table-wrapper {
border-color: rgba(0, 0, 0, 0.2) !important;
box-shadow: none !important;
}
a {
color: #111111 !important;
text-decoration: none;
}
}
.badge-print-grid,
.quest-print-grid,
.faction-print-grid,
.sign-print-grid,
.checklist-print-grid {
display: grid;
gap: 0.85rem;
}
.badge-print-grid {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.badge-print-card {
border: 1px dashed var(--border);
border-radius: 10px;
background: color-mix(in srgb, var(--bg-card), black 4%);
padding: 0.45rem;
display: grid;
grid-template-columns: 96px 1fr;
gap: 0.55rem;
align-items: center;
min-height: 210px;
}
.badge-print-qr-wrap {
display: grid;
place-items: center;
}
.badge-print-qr {
width: 92px;
height: 92px;
object-fit: contain;
background: #ffffff;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.18);
padding: 0.25rem;
}
.badge-print-qr-missing {
font-size: 0.78rem;
color: var(--text-muted);
display: grid;
place-items: center;
}
.badge-print-content {
display: grid;
gap: 0.24rem;
}
.badge-print-name {
margin: 0;
}
.badge-print-role {
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 700;
color: var(--text-muted);
}
.badge-print-role.staff,
.badge-print-role.firefly,
.badge-print-role.faction,
.badge-print-role.gm,
.badge-print-role.admin {
color: var(--danger);
}
.badge-print-faction {
font-weight: 600;
}
.badge-print-footer {
font-size: 0.75rem;
color: var(--text-muted);
word-break: break-word;
}
.quest-print-grid {
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}
.quest-print-card {
border: 1px solid var(--border);
border-radius: 10px;
background: color-mix(in srgb, var(--bg-card), black 4%);
padding: 0.8rem;
display: grid;
gap: 0.5rem;
break-inside: avoid;
}
.quest-print-card.is-draft {
border-color: color-mix(in srgb, var(--warning), transparent 40%);
}
.quest-print-head {
display: flex;
justify-content: space-between;
gap: 0.5rem;
align-items: flex-start;
}
.quest-print-head h2 {
margin: 0;
font-size: 1.2rem;
}
.quest-print-meta {
font-size: 0.86rem;
color: var(--text-secondary);
}
.quest-print-description {
margin: 0;
line-height: 1.35;
}
.quest-print-prereq {
font-size: 0.88rem;
}
.quest-print-qr-wrap {
display: grid;
place-items: center;
gap: 0.2rem;
}
.quest-print-qr {
width: 170px;
height: 170px;
object-fit: contain;
background: #ffffff;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.18);
padding: 0.2rem;
}
.quest-print-qr-missing {
min-height: 120px;
border: 1px dashed var(--border);
border-radius: 8px;
width: 100%;
display: grid;
place-items: center;
color: var(--text-muted);
}
.quest-print-footer {
font-size: 0.75rem;
color: var(--text-muted);
}
.faction-print-grid {
grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
}
.faction-print-poster {
border: 1px solid var(--border);
border-radius: 12px;
background:
radial-gradient(circle at top, color-mix(in srgb, var(--poster-color), transparent 78%), transparent 58%),
color-mix(in srgb, var(--bg-card), black 4%);
padding: 1.1rem;
display: grid;
gap: 0.45rem;
break-inside: avoid;
}
.faction-print-poster h2 {
margin: 0;
font-size: 2rem;
}
.faction-print-brand {
font-size: 3rem;
line-height: 1;
}
.faction-print-tagline {
margin: 0;
font-style: italic;
}
.faction-print-description {
margin: 0.25rem 0;
line-height: 1.45;
}
.faction-print-home {
margin: 0;
}
.faction-print-qr-wrap {
margin-top: 0.45rem;
}
.faction-print-qr {
width: 190px;
height: 190px;
object-fit: contain;
background: #ffffff;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.18);
padding: 0.22rem;
}
.faction-print-poster footer {
font-size: 0.78rem;
color: var(--text-muted);
}
.sign-print-grid {
grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
}
.sign-print-card {
border: 1px solid var(--border);
border-radius: 12px;
padding: 0.9rem;
background: color-mix(in srgb, var(--bg-card), black 4%);
display: grid;
gap: 0.55rem;
break-inside: avoid;
}
.sign-print-card h2 {
margin: 0;
}
.sign-print-primary {
display: grid;
grid-template-columns: 170px 1fr;
gap: 0.6rem;
align-items: center;
}
.sign-print-primary img {
width: 166px;
height: 166px;
object-fit: contain;
background: #ffffff;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.18);
padding: 0.2rem;
}
.sign-print-secondary {
display: grid;
gap: 0.35rem;
}
.sign-print-secondary-item {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
}
.sign-print-card footer {
font-size: 0.78rem;
color: var(--text-muted);
}
.checklist-print-grid {
grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
}
.checklist-print-card {
border: 1px solid var(--border);
border-radius: 12px;
padding: 0.9rem;
background: color-mix(in srgb, var(--bg-card), black 4%);
display: grid;
gap: 0.6rem;
break-inside: avoid;
}
.checklist-print-card h2,
.checklist-print-card h3 {
margin: 0;
}
.checklist-print-card section {
border-top: 1px solid var(--border);
padding-top: 0.45rem;
display: grid;
gap: 0.3rem;
}
.checklist-print-card ul {
margin: 0;
padding-left: 1.05rem;
display: grid;
gap: 0.25rem;
}
@media print {
.no-print,
.print-preview-toolbar,
.participant-filter-grid {
display: none !important;
}
@page {
margin: 8mm;
}
.badge-print-grid {
grid-template-columns: repeat(2, 85mm);
gap: 0;
}
.badge-print-card {
width: 85mm;
min-height: 54mm;
height: 54mm;
border: 1px dashed rgba(0, 0, 0, 0.32);
grid-template-columns: 22mm 1fr;
gap: 2.5mm;
padding: 2.4mm;
}
.badge-print-qr {
width: 20mm;
height: 20mm;
border-radius: 0;
border-color: rgba(0, 0, 0, 0.32);
padding: 0;
}
.badge-print-name {
font-size: 14pt;
}
.badge-print-role {
font-size: 8pt;
letter-spacing: 0.08em;
}
.badge-print-faction {
font-size: 10pt;
}
.badge-print-footer {
font-size: 7pt;
}
.quest-print-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.4rem;
}
.quest-print-card {
min-height: 148mm;
border-color: rgba(0, 0, 0, 0.24);
box-shadow: none;
}
.quest-print-qr {
width: 52mm;
height: 52mm;
}
.faction-print-grid {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.faction-print-poster {
min-height: 260mm;
page-break-after: always;
border-color: rgba(0, 0, 0, 0.24);
}
.faction-print-poster:last-child {
page-break-after: auto;
}
.faction-print-qr {
width: 56mm;
height: 56mm;
}
.sign-print-grid,
.checklist-print-grid {
grid-template-columns: 1fr;
gap: 0.45rem;
}
.sign-print-card,
.checklist-print-card {
min-height: 142mm;
border-color: rgba(0, 0, 0, 0.24);
}
.sign-print-primary img {
width: 48mm;
height: 48mm;
}
}
body.touch-mode .btn {
min-height: 44px;
padding-top: 0.85rem;
padding-bottom: 0.85rem;
}
body.touch-mode .form-input,
body.touch-mode .form-select,
body.touch-mode .form-textarea {
min-height: 44px;
font-size: 1.05rem;
}
body.high-contrast {
--bg-primary: #000;
--bg-secondary: #0b0b0b;
--bg-card: #111;
--bg-elevated: #191919;
--text-primary: #fff;
--text-secondary: #f0f0f0;
--text-muted: #bdbdbd;
--border: rgba(255, 255, 255, 0.25);
--accent-primary: #00e6ff;
--accent-secondary: #ffe100;
--danger: #ff6b6b;
--success: #4cff9c;
}
.qr-expert-settings {
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card), black 5%);
}
.qr-expert-settings > summary {
padding: 0.75rem 0.9rem;
font-weight: 700;
cursor: pointer;
list-style: none;
}
.qr-expert-settings > summary::-webkit-details-marker {
display: none;
}
.qr-content-builder {
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-secondary), black 6%);
padding: 0.75rem;
margin-top: 0.45rem;
}
.qr-content-json-advanced {
margin-top: 0.6rem;
}
.qr-content-json-advanced > summary {
font-weight: 600;
cursor: pointer;
}
.item-effect-group[hidden],
.qr-content-builder[hidden] {
display: none !important;
}
.item-limits-toggle > summary {
cursor: pointer;
font-weight: 600;
list-style: none;
}
.item-limits-toggle > summary::-webkit-details-marker {
display: none;
}
.item-limits-grid {
margin-top: 0.55rem;
}
.empty-state-hero {
padding: var(--space-7) var(--space-5);
border: 1px dashed color-mix(in srgb, var(--border), var(--accent-primary) 30%);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--bg-glass), transparent 15%);
backdrop-filter: blur(14px) saturate(140%);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
.empty-state-svg {
width: 120px;
height: 120px;
color: color-mix(in srgb, var(--accent-primary), #ffffff 10%);
display: inline-flex;
align-items: center;
justify-content: center;
}
.empty-state-svg svg {
width: 100%;
height: 100%;
}
.btn,
.action-card,
.event-map-sidebar-item,
.timeline-memory-card,
.empty-state-hero {
transition: transform 0.16s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.2s ease, filter 0.2s ease;
}
.btn:active,
.action-card:active,
.event-map-sidebar-item:active,
.timeline-memory-card:active {
transform: translateY(1px) scale(0.975);
}
.btn:hover,
.action-card:hover,
.timeline-memory-card:hover {
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}
.ops-toast {
animation: slideUpSpring 260ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes slideUpSpring {
0% {
transform: translateY(22px);
opacity: 0;
}
65% {
transform: translateY(-4px);
opacity: 1;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.skeleton-line {
height: 14px;
border-radius: 999px;
background: linear-gradient(100deg,
color-mix(in srgb, var(--bg-secondary), #ffffff 8%) 0%,
color-mix(in srgb, var(--bg-card), #ffffff 18%) 45%,
color-mix(in srgb, var(--bg-secondary), #ffffff 8%) 100%);
background-size: 220% 100%;
animation: skeletonPulse 1.2s ease-in-out infinite;
}
@keyframes skeletonPulse {
0% { background-position: 180% 0; }
100% { background-position: -60% 0; }
}
.timeline-skeleton {
display: none;
gap: 0.6rem;
margin: 0.5rem 0 0.85rem;
}
.timeline-skeleton.htmx-request {
display: grid;
}
.timeline-mode-toggle {
display: inline-flex;
gap: 0.35rem;
padding: 0.25rem;
border: 1px solid var(--border);
border-radius: 999px;
margin-bottom: 0.75rem;
background: color-mix(in srgb, var(--surface-2), black 4%);
}
.timeline-mode-pill {
border-radius: 999px;
border: 1px solid transparent;
color: var(--text-secondary);
text-decoration: none;
font-size: 0.78rem;
font-weight: 700;
padding: 0.36rem 0.72rem;
}
.timeline-mode-pill.is-active {
color: var(--text-primary);
border-color: var(--tone-lantern-border);
background: var(--tone-lantern-muted);
}
.timeline-filter-bar {
display: flex;
gap: 0.45rem;
overflow-x: auto;
padding-bottom: 0.25rem;
margin-bottom: 0.8rem;
}
.timeline-filter-bar .btn.is-active {
border-color: var(--tone-lantern-border);
box-shadow: inset 0 0 0 1px var(--tone-lantern-muted);
}
.timeline-storyline {
position: relative;
display: grid;
gap: 0.95rem;
margin-left: 1.25rem;
padding-left: 1.4rem;
}
.timeline-storyline::before {
content: "";
position: absolute;
left: 0;
top: 0.25rem;
bottom: 0.25rem;
width: 3px;
border-radius: 999px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--tone-lantern), transparent 38%),
color-mix(in srgb, var(--tone-twilight), transparent 78%));
}
.timeline-memory-card {
position: relative;
border: 1px solid var(--surface-intent-border, var(--border));
border-radius: var(--radius-md);
background: var(--surface-intent-bg, var(--surface-story));
padding: 0.85rem;
overflow: hidden;
box-shadow: var(--surface-intent-shadow, var(--shadow-sm));
}
.timeline-memory-card.is-my-story {
transform: translateY(10px);
opacity: 0;
animation: timelineStoryReveal 420ms ease-out forwards;
}
.timeline-memory-card.is-my-story::after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: color-mix(in srgb, var(--tone-lantern), white 8%);
transform-origin: top;
transform: scaleY(0);
animation: timelineStoryEdge 480ms ease-out forwards;
}
.timeline-node {
position: absolute;
left: -1.94rem;
top: 1rem;
width: 16px;
height: 16px;
border-radius: 999px;
border: 2px solid color-mix(in srgb, var(--tone-lantern), white 12%);
background: color-mix(in srgb, var(--tone-lantern), black 18%);
}
.timeline-memory-card .timeline-emoji {
font-size: 1.55rem;
line-height: 1.25;
}
.timeline-memory-stamps {
margin-bottom: 0.65rem;
}
.timeline-memory-details {
margin: 0.15rem 0 0.55rem;
}
.timeline-heatmap-bar {
margin: 0.5rem 0 0.35rem;
height: 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--bg-secondary), black 5%);
overflow: hidden;
}
.timeline-heatmap-fill {
display: block;
width: 100%;
height: 100%;
background: var(--timeline-heatmap, linear-gradient(90deg, #94a3b8, #6366f1));
}
.timeline-sparkline {
width: 100%;
height: 20px;
margin-bottom: 0.2rem;
}
.timeline-sparkline polyline {
fill: none;
stroke: color-mix(in srgb, var(--tone-lantern), white 12%);
stroke-width: 1.6;
}
.timeline-memory-card.mood-intense {
border-left: 4px solid var(--tone-hearth);
}
.timeline-memory-card.mood-joyful {
border-left: 4px solid var(--tone-lantern);
}
.timeline-memory-card.mood-calm {
border-left: 4px solid var(--tone-weathered);
}
.timeline-memory-card.mood-mysterious {
border-left: 4px solid var(--tone-twilight);
}
.timeline-memory-card.mood-sacred {
border-left: 4px solid var(--tone-keepsake);
}
@keyframes timelineStoryReveal {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes timelineStoryEdge {
from {
transform: scaleY(0);
}
to {
transform: scaleY(1);
}
}
body[data-app-role="gm"].has-floating-toolbar {
padding-bottom: 5.4rem;
}
body[data-app-role="gm"] .staff-toolbar.floating-context-toolbar {
position: fixed;
right: 1rem;
bottom: 0.9rem;
z-index: 90;
margin-top: 0;
padding: 0.4rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--border), white 10%);
background: color-mix(in srgb, var(--bg-glass), transparent 15%);
backdrop-filter: blur(16px) saturate(170%);
box-shadow: 0 10px 36px rgba(0, 0, 0, 0.25);
display: inline-flex;
gap: 0.35rem;
align-items: center;
transition: transform 0.2s ease, opacity 0.2s ease;
}
body[data-app-role="gm"] .staff-toolbar.floating-context-toolbar.is-hidden {
transform: translateY(110%);
opacity: 0;
pointer-events: none;
}
body[data-app-role="gm"] .staff-toolbar.floating-context-toolbar .floating-tool-btn {
min-width: 44px;
min-height: 44px;
padding: 0.25rem 0.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
font-size: 1.06rem;
}
body[data-app-role="gm"] .staff-toolbar.floating-context-toolbar .floating-tool-btn::after {
content: attr(data-toolbar-label);
position: absolute;
bottom: calc(100% + 0.4rem);
right: 0;
padding: 0.24rem 0.5rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-card), black 6%);
color: var(--text-primary);
font-size: 0.74rem;
white-space: nowrap;
opacity: 0;
transform: translateY(6px);
pointer-events: none;
transition: var(--transition);
}
body[data-app-role="gm"] .staff-toolbar.floating-context-toolbar .floating-tool-btn:hover::after,
body[data-app-role="gm"] .staff-toolbar.floating-context-toolbar .floating-tool-btn:focus-visible::after {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 860px) {
body[data-app-role="gm"] .staff-toolbar.floating-context-toolbar {
left: 50%;
right: auto;
transform: translateX(-50%);
max-width: calc(100vw - 1.1rem);
overflow-x: auto;
}
body[data-app-role="gm"] .staff-toolbar.floating-context-toolbar.is-hidden {
transform: translateX(-50%) translateY(110%);
}
}
@keyframes adr-shimmer {
0% { transform: translateX(-120%); opacity: 0; }
18% { opacity: 0.22; }
48% { opacity: 0.42; }
100% { transform: translateX(120%); opacity: 0; }
}
@keyframes adr-orb-pulse {
0% { transform: translateY(0) scale(1); box-shadow: 0 16px 34px rgba(12, 18, 31, 0.24); }
50% { transform: translateY(-3px) scale(1.02); box-shadow: 0 20px 40px rgba(12, 18, 31, 0.32); }
100% { transform: translateY(0) scale(1); box-shadow: 0 16px 34px rgba(12, 18, 31, 0.24); }
}
@keyframes adr-wait-drift {
0% { transform: translateY(0) scale(1); }
50% { transform: translateY(-6px) scale(1.02); }
100% { transform: translateY(0) scale(1); }
}
@keyframes adr-poster-flicker {
0%, 100% { opacity: 0.9; transform: scale(1); }
50% { opacity: 1; transform: scale(1.08); }
}
@keyframes adr-note-float {
0%, 100% { transform: rotate(var(--note-tilt, 0deg)) translateY(0); }
50% { transform: rotate(var(--note-tilt, 0deg)) translateY(-4px); }
}
@keyframes adr-oracle-pulse {
0% { box-shadow: 0 0 0 0 rgba(252, 211, 77, 0.34); }
100% { box-shadow: 0 0 0 18px rgba(252, 211, 77, 0); }
}
@keyframes adr-moment-burst {
0% { transform: translate(-50%, -50%) scale(0.65); opacity: 0; }
12% { opacity: 1; }
100% { transform: translate(-50%, -220%) scale(1.35); opacity: 0; }
}
@keyframes adr-circle-ring {
0% { transform: scale(0.86); opacity: 0.3; }
50% { transform: scale(1.04); opacity: 1; }
100% { transform: scale(0.98); opacity: 0.7; }
}
.pulse-home-page {
position: relative;
padding-bottom: 8.5rem;
}
.pulse-home-hero {
margin: -1rem -1rem 0;
padding: clamp(1.35rem, 4vw, 2.2rem);
border-radius: 0 0 28px 28px;
color: #f9f4e8;
background:
radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--tone-lantern), transparent 82%), transparent 40%),
linear-gradient(145deg, color-mix(in srgb, var(--bg-card), var(--tone-hearth) 18%), color-mix(in srgb, var(--bg-secondary), black 4%));
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}
.pulse-home-hero__inner {
max-width: 34rem;
display: grid;
gap: 0.55rem;
}
.pulse-home-shelf {
margin-top: 1.2rem;
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 1rem;
align-items: start;
}
.pulse-home-kicker {
margin: 0;
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 249, 233, 0.72);
}
.pulse-home-hero h1 {
margin: 0;
font-size: clamp(2rem, 8vw, 3.3rem);
line-height: 0.96;
font-family: var(--font-display);
letter-spacing: -0.03em;
}
.pulse-home-hero__status,
.chronicle-hero__atmosphere,
.gm-command-center-head__meta,
.gm-command-center-head__atmosphere {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
align-items: center;
}
.chronicle-hero__atmosphere,
.gm-command-center-head__atmosphere {
max-width: 44rem;
}
.pulse-mood-neutral {
background:
radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--tone-twilight), transparent 80%), transparent 40%),
linear-gradient(145deg, color-mix(in srgb, var(--bg-card), var(--tone-twilight) 16%), color-mix(in srgb, var(--bg-secondary), black 4%));
}
.pulse-mood-intense {
background:
radial-gradient(circle at 22% 0%, color-mix(in srgb, var(--tone-hearth), transparent 76%), transparent 42%),
linear-gradient(145deg, #201411, #43281f);
}
.pulse-mood-joyful {
background:
radial-gradient(circle at 22% 0%, color-mix(in srgb, var(--tone-lantern), transparent 74%), transparent 42%),
linear-gradient(145deg, #211710, #48351d);
}
.pulse-mood-calm {
background:
radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--tone-weathered), transparent 76%), transparent 42%),
linear-gradient(145deg, #151814, #27352a);
}
.pulse-mood-sacred {
background:
radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--tone-keepsake), transparent 76%), transparent 42%),
linear-gradient(145deg, #1b1410, #3b2a20);
}
.pulse-mood-mysterious {
background:
radial-gradient(circle at 20% 0%, rgba(124, 134, 255, 0.24), transparent 42%),
linear-gradient(145deg, #0f1224, #27244a);
}
.pulse-mood-reflective {
background:
radial-gradient(circle at 18% 0%, rgba(255, 192, 120, 0.16), transparent 42%),
linear-gradient(145deg, #16131b, #312933);
}
body[data-atmosphere-key="quiet"] {
--wm-atm-glow: rgba(145, 175, 255, 0.14);
--wm-atm-ink: rgba(30, 40, 70, 0.86);
--wm-atm-line: rgba(145, 175, 255, 0.28);
}
body[data-atmosphere-key="warm"] {
--wm-atm-glow: rgba(253, 185, 73, 0.18);
--wm-atm-ink: rgba(62, 44, 22, 0.78);
--wm-atm-line: rgba(253, 185, 73, 0.34);
}
body[data-atmosphere-key="live"] {
--wm-atm-glow: rgba(79, 209, 197, 0.16);
--wm-atm-ink: rgba(18, 44, 55, 0.82);
--wm-atm-line: rgba(79, 209, 197, 0.32);
}
body[data-atmosphere-key="urgent"] {
--wm-atm-glow: rgba(241, 109, 72, 0.18);
--wm-atm-ink: rgba(70, 28, 24, 0.84);
--wm-atm-line: rgba(241, 109, 72, 0.4);
}
body[data-atmosphere-key="reflective"] {
--wm-atm-glow: rgba(232, 185, 132, 0.12);
--wm-atm-ink: rgba(50, 37, 45, 0.82);
--wm-atm-line: rgba(232, 185, 132, 0.26);
}
body[data-atmosphere-time="dawn"] {
--wm-atm-sheen: rgba(255, 214, 153, 0.18);
}
body[data-atmosphere-time="day"] {
--wm-atm-sheen: rgba(255, 255, 255, 0.08);
}
body[data-atmosphere-time="dusk"] {
--wm-atm-sheen: rgba(255, 185, 120, 0.16);
}
body[data-atmosphere-time="night"] {
--wm-atm-sheen: rgba(145, 175, 255, 0.12);
}
.wm-atmosphere-hero,
body[data-app-surface="gm-command-center"] .gm-command-center-head {
position: relative;
overflow: hidden;
isolation: isolate;
}
.wm-atmosphere-hero::before,
body[data-app-surface="gm-command-center"] .gm-command-center-head::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 18% 0%, var(--wm-atm-glow, rgba(145, 175, 255, 0.14)), transparent 44%),
linear-gradient(145deg, color-mix(in srgb, var(--bg-card), var(--wm-atm-ink, rgba(30, 40, 70, 0.86)) 80%), color-mix(in srgb, var(--bg-secondary), black 8%));
opacity: 0.94;
z-index: 0;
}
.wm-atmosphere-hero::after,
body[data-app-surface="gm-command-center"] .gm-command-center-head::after {
content: "";
position: absolute;
inset: auto -10% 42% 38%;
min-height: 7rem;
background: radial-gradient(circle, var(--wm-atm-sheen, rgba(255, 255, 255, 0.08)), transparent 72%);
pointer-events: none;
z-index: 0;
}
.wm-atmosphere-hero > *,
body[data-app-surface="gm-command-center"] .gm-command-center-head > * {
position: relative;
z-index: 1;
}
body[data-app-surface="home"][data-atmosphere-key] .pulse-home-strip,
body[data-app-surface="home"][data-atmosphere-key] .pulse-home-encounters,
body[data-app-surface="home"][data-atmosphere-key] .pulse-home-summary,
body[data-app-surface="home"][data-atmosphere-key] .pulse-home-links,
body[data-app-surface="chronicle"][data-atmosphere-key] .chronicle-panel,
body[data-app-surface="gm-command-center"][data-atmosphere-key] .gm-command-center-alert-banner,
body[data-app-surface="gm-command-center"][data-atmosphere-key] .gm-command-center-command-bar,
body[data-app-surface="gm-command-center"][data-atmosphere-key] .gm-command-center-domain,
body[data-app-surface="gm-command-center"][data-atmosphere-key] .gm-command-center-attention-card,
body[data-app-surface="gm-command-center"][data-atmosphere-key] .gm-command-center-activity-row,
body[data-app-surface="gm-command-center"][data-atmosphere-key] .gm-command-center-focus-rail,
body[data-app-surface="gm-command-center"][data-atmosphere-key] .gm-command-center-next-event,
body[data-app-surface="gm-command-center"][data-atmosphere-key] .gm-command-center-faction-pulse__row,
body[data-app-surface="gm-command-center"][data-atmosphere-key] .gm-command-center-pulse-metric {
border-color: color-mix(in srgb, var(--border), var(--wm-atm-line, rgba(145, 175, 255, 0.28)) 46%);
}
body[data-app-surface="chronicle"][data-atmosphere-key] .chronicle-hero,
body[data-app-surface="gm-command-center"][data-atmosphere-key] .gm-command-center-alert-banner,
body[data-app-surface="gm-command-center"][data-atmosphere-key] .gm-command-center-command-bar {
box-shadow: 0 18px 40px rgba(7, 12, 30, 0.28);
}
.pulse-home-strip,
.pulse-home-encounters,
.pulse-home-whispers,
.pulse-home-summary,
.pulse-home-links {
background:
linear-gradient(180deg, color-mix(in srgb, var(--bg-card), white 2%), color-mix(in srgb, var(--bg-card), black 3%));
border-color: color-mix(in srgb, var(--border), var(--accent-primary) 12%);
}
.pulse-home-chapter {
position: relative;
overflow: hidden;
}
.pulse-home-chapter::before {
content: "";
position: absolute;
inset: 0 auto auto 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), transparent 65%);
pointer-events: none;
}
.pulse-shelf-feature,
.pulse-shelf-keepsakes,
.pulse-home-link-group {
display: grid;
gap: 0.8rem;
padding: 1rem;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 24px;
background: linear-gradient(160deg, rgba(255, 248, 231, 0.1), rgba(16, 22, 37, 0.28));
box-shadow: 0 18px 38px rgba(8, 12, 22, 0.18);
}
.pulse-shelf-feature h2,
.pulse-shelf-keepsakes h2,
.pulse-home-link-group h3 {
margin: 0;
}
.pulse-shelf-feature > p:last-of-type,
.pulse-shelf-note p,
.pulse-home-link-group p:last-of-type {
margin: 0;
}
.pulse-shelf-feature__actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
}
.pulse-shelf-note {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.75rem;
align-items: start;
padding: 0.85rem 0.9rem;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(10, 14, 24, 0.22);
}
.pulse-shelf-chapter {
display: grid;
gap: 0.5rem;
padding: 0.85rem 0.9rem;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(10, 14, 24, 0.2);
}
.pulse-shelf-chapter__meta {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
align-items: center;
}
.pulse-shelf-chapter p {
margin: 0;
}
.pulse-shelf-note__icon {
width: 2.4rem;
height: 2.4rem;
border-radius: 14px;
display: inline-grid;
place-items: center;
font-size: 1.2rem;
background: rgba(255, 255, 255, 0.12);
}
.pulse-card-rail {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(250px, 78%);
gap: 0.75rem;
overflow-x: auto;
padding-bottom: 0.2rem;
scrollbar-width: thin;
}
.pulse-card {
display: grid;
gap: 0.45rem;
align-content: start;
min-height: 170px;
border: 1px solid var(--surface-intent-border, var(--border));
border-radius: 22px;
padding: 1rem;
text-decoration: none;
color: inherit;
background: var(--surface-intent-bg, var(--surface-story));
box-shadow: var(--surface-intent-shadow, var(--shadow-sm));
transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.pulse-card:hover {
transform: translateY(-2px);
}
.pulse-card__icon {
width: 2.5rem;
height: 2.5rem;
border-radius: 16px;
display: inline-grid;
place-items: center;
font-size: 1.35rem;
background: color-mix(in srgb, var(--tone-keepsake), transparent 82%);
}
.pulse-card__action {
margin-top: auto;
font-size: 0.8rem;
font-weight: 700;
color: var(--text-secondary);
}
.pulse-card--urgent {
border-color: var(--tone-hearth-border);
}
.pulse-card--warning {
border-color: var(--tone-lantern-border);
}
.pulse-card--success {
border-color: var(--tone-weathered-border);
}
.pulse-card--ambient {
border-color: var(--tone-twilight-border);
}
.pulse-summary-list {
display: grid;
gap: 0.55rem;
}
.pulse-summary-list p {
margin: 0;
padding: 0.8rem 0.9rem;
border-radius: 16px;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--surface-2), black 4%);
}
.pulse-encounter-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.8rem;
}
.pulse-encounter-card {
display: grid;
gap: 0.65rem;
align-content: start;
min-height: 240px;
padding: 1rem;
border-radius: 22px;
border: 1px solid color-mix(in srgb, var(--border), var(--accent-primary) 24%);
background:
radial-gradient(circle at top right, rgba(121, 199, 183, 0.18), transparent 42%),
linear-gradient(165deg, rgba(250, 252, 255, 0.08), rgba(16, 22, 37, 0.34));
box-shadow: 0 18px 38px rgba(8, 12, 22, 0.16);
}
.pulse-encounter-card h3,
.pulse-encounter-card p {
margin: 0;
}
.pulse-encounter-card__meta {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
align-items: center;
font-size: 0.78rem;
color: var(--text-secondary);
}
.pulse-encounter-card__why {
color: var(--text-secondary);
font-size: 0.88rem;
}
.pulse-encounter-card__action {
margin-top: auto;
font-weight: 700;
color: var(--accent-primary);
text-decoration: none;
}
.pulse-encounter-card--success {
border-color: color-mix(in srgb, var(--tone-weathered-border), white 10%);
}
.pulse-encounter-card--warning {
border-color: color-mix(in srgb, var(--tone-lantern-border), white 10%);
}
.pulse-encounter-card--info,
.pulse-encounter-card--ambient {
border-color: color-mix(in srgb, var(--tone-twilight-border), white 10%);
}
.pulse-encounter-card--empty {
border-style: dashed;
}
.pulse-whisper-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.8rem;
}
.pulse-whisper-card {
display: grid;
gap: 0.65rem;
align-content: start;
min-height: 220px;
padding: 1rem;
border-radius: 22px;
border: 1px solid color-mix(in srgb, var(--border), var(--tone-lantern-border) 34%);
background:
radial-gradient(circle at top right, rgba(246, 210, 162, 0.18), transparent 42%),
linear-gradient(165deg, rgba(255, 247, 236, 0.08), rgba(16, 22, 37, 0.34));
box-shadow: 0 18px 38px rgba(8, 12, 22, 0.16);
}
.pulse-whisper-card h3,
.pulse-whisper-card p {
margin: 0;
}
.pulse-whisper-card__meta {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
align-items: center;
font-size: 0.78rem;
color: var(--text-secondary);
}
.pulse-whisper-card__location {
color: var(--text-secondary);
font-size: 0.88rem;
}
.pulse-whisper-card__action {
margin-top: auto;
font-weight: 700;
color: var(--accent-primary);
text-decoration: none;
}
.pulse-whisper-card--empty {
border-style: dashed;
}
.pulse-home-link-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.75rem;
}
.pulse-home-link-grid--compact {
grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
.pulse-home-link-grid--stacked {
grid-template-columns: 1fr;
}
.pulse-home-link-groups {
display: grid;
gap: 0.9rem;
}
.pulse-home-link {
display: grid;
gap: 0.4rem;
min-height: 108px;
padding: 0.95rem;
text-decoration: none;
color: inherit;
border: 1px solid var(--surface-intent-border, var(--border));
border-radius: 18px;
background: var(--surface-intent-bg, var(--surface-keepsake));
box-shadow: var(--surface-intent-shadow, var(--shadow-sm));
}
.pulse-home-link span {
color: var(--text-secondary);
font-size: 0.86rem;
}
.pulse-home-link--metric {
min-height: 96px;
}
.pulse-home-link--metric strong {
font-size: 1.45rem;
letter-spacing: -0.03em;
}
.pulse-scan-orb {
position: fixed;
right: 1rem;
bottom: 5.8rem;
z-index: 920;
min-width: 5.2rem;
min-height: 5.2rem;
padding: 0.85rem 1rem;
border-radius: 999px;
display: inline-grid;
place-items: center;
text-decoration: none;
color: var(--text-inverse);
font-weight: 800;
letter-spacing: 0.02em;
background:
radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.5)),
linear-gradient(145deg, color-mix(in srgb, var(--tone-lantern), white 18%), color-mix(in srgb, var(--tone-hearth), black 8%));
box-shadow: 0 18px 34px rgba(20, 12, 8, 0.3);
animation: adr-orb-pulse 2.2s ease-in-out infinite;
}
.inventory-cabinet-tip {
border-style: dashed;
border-color: color-mix(in srgb, var(--accent-primary), transparent 40%);
background: linear-gradient(160deg, color-mix(in srgb, var(--bg-card), white 3%), color-mix(in srgb, var(--accent-primary), transparent 94%));
}
.inventory-cabinet-grid {
gap: 0.85rem;
grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}
.inventory-cabinet-card {
position: relative;
overflow: hidden;
min-height: 220px;
display: grid;
gap: 0.55rem;
align-content: start;
text-align: left;
background: var(--surface-intent-bg, linear-gradient(165deg, color-mix(in srgb, var(--bg-card), white 2%), color-mix(in srgb, var(--bg-secondary), black 6%)));
border-color: var(--surface-intent-border, color-mix(in srgb, var(--border), white 6%));
box-shadow: var(--surface-intent-shadow, var(--shadow-sm));
transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.inventory-cabinet-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.inventory-cabinet-card__glow {
position: absolute;
inset: -20% -40%;
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.18), transparent);
opacity: 0;
pointer-events: none;
}
.inventory-cabinet-card__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.6rem;
}
.inventory-cabinet-card h3 {
margin: 0;
}
.inventory-cabinet-card__inspect {
margin-top: auto;
font-size: 0.78rem;
font-weight: 700;
color: var(--text-secondary);
}
.inventory-cabinet-card[data-rarity="common"] {
background: linear-gradient(165deg, rgba(98, 110, 135, 0.12), color-mix(in srgb, var(--bg-card), black 3%));
}
.inventory-cabinet-card[data-rarity="uncommon"] {
border-color: color-mix(in srgb, var(--rarity-uncommon), transparent 42%);
background: linear-gradient(160deg, rgba(104, 214, 148, 0.11), color-mix(in srgb, var(--bg-card), black 5%));
}
.inventory-cabinet-card[data-rarity="rare"] {
border-color: color-mix(in srgb, var(--rarity-rare), transparent 36%);
background: linear-gradient(160deg, rgba(88, 156, 255, 0.16), color-mix(in srgb, var(--bg-card), black 6%));
}
.inventory-cabinet-card[data-rarity="rare"] .inventory-cabinet-card__glow,
.inventory-cabinet-card[data-rarity="legendary"] .inventory-cabinet-card__glow,
.inventory-cabinet-card[data-rarity="unique"] .inventory-cabinet-card__glow {
opacity: 1;
animation: adr-shimmer 3.4s linear infinite;
}
.inventory-cabinet-card[data-rarity="legendary"],
.inventory-cabinet-card[data-rarity="unique"] {
border-color: color-mix(in srgb, var(--rarity-legendary), transparent 25%);
background:
radial-gradient(circle at top right, rgba(246, 138, 198, 0.2), transparent 42%),
linear-gradient(165deg, rgba(122, 92, 227, 0.16), color-mix(in srgb, var(--bg-card), black 8%));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--rarity-legendary), transparent 72%), var(--shadow-md);
}
.inventory-cabinet-card[data-rarity="legendary"]::after,
.inventory-cabinet-card[data-rarity="unique"]::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 28px rgba(246, 138, 198, 0.15);
pointer-events: none;
}
.item-detail-drawer-card {
border-radius: 24px;
background: linear-gradient(165deg, color-mix(in srgb, var(--bg-card), white 2%), color-mix(in srgb, var(--bg-secondary), black 5%));
}
.item-detail-drawer-head {
align-items: flex-start;
}
.item-detail-drawer-art {
width: 3.4rem;
height: 3.4rem;
border-radius: 18px;
display: grid;
place-items: center;
background: color-mix(in srgb, var(--bg-secondary), black 4%);
}
.item-detail-drawer-lore {
margin: 0.75rem 0 0;
padding-left: 0.85rem;
border-left: 3px solid color-mix(in srgb, var(--accent-primary), transparent 30%);
color: var(--text-secondary);
font-style: italic;
line-height: 1.6;
}
.item-detail-action-row {
flex-wrap: wrap;
}
.item-detail-offer-form {
display: flex;
flex: 1 1 320px;
gap: 0.5rem;
flex-wrap: wrap;
}
.item-detail-offer-form .form-input {
flex: 1 1 220px;
}
.item-recipe-mini {
border-radius: 18px;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-secondary), black 4%);
}
.item-recipe-mini.is-ready {
border-color: color-mix(in srgb, var(--success), transparent 42%);
}
.leaderboard-page {
padding-bottom: 7rem;
}
.leaderboard-tabs-card {
position: sticky;
top: 0.65rem;
z-index: 4;
backdrop-filter: blur(12px);
}
.leaderboard-tab-row {
display: flex;
gap: 0.45rem;
flex-wrap: wrap;
}
.leaderboard-mountain {
display: grid;
gap: 0.85rem;
}
.leaderboard-mountain__row {
display: grid;
gap: 0.55rem;
padding: 0.9rem;
border-radius: 22px;
border: 1px solid var(--border);
background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card), white 2%), color-mix(in srgb, var(--bg-secondary), black 4%));
}
.leaderboard-mountain__row.is-leading {
border-color: color-mix(in srgb, var(--warning), transparent 28%);
}
.leaderboard-mountain__bar {
position: relative;
min-height: 44px;
border-radius: 999px;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--border), white 4%);
background: color-mix(in srgb, var(--bg-secondary), black 8%);
display: flex;
align-items: center;
padding: 0 1rem;
}
.leaderboard-mountain__fill {
position: absolute;
inset: 0 auto 0 0;
border-radius: inherit;
background:
linear-gradient(90deg, color-mix(in srgb, var(--mountain-color, var(--accent-primary)), white 12%), color-mix(in srgb, var(--mountain-color, var(--accent-primary)), black 12%));
}
.leaderboard-mountain__row.is-leading .leaderboard-mountain__fill::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.2), transparent);
animation: adr-shimmer 3s linear infinite;
}
.leaderboard-mountain__value,
.leaderboard-mountain__label,
.leaderboard-mountain__spark {
position: relative;
z-index: 1;
}
.leaderboard-mountain__value {
margin-left: auto;
font-weight: 800;
}
.leaderboard-gap-line {
margin-top: 0.8rem;
padding: 0.85rem 0.95rem;
border-radius: 18px;
background: color-mix(in srgb, var(--accent-primary), transparent 93%);
}
.leaderboard-recognition-grid {
display: grid;
gap: 0.85rem;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
margin-bottom: 1rem;
}
.leaderboard-recognition-card {
border: 1px solid var(--border);
border-radius: 22px;
padding: 0.95rem;
background: linear-gradient(165deg, color-mix(in srgb, var(--bg-card), white 2%), color-mix(in srgb, var(--bg-secondary), black 4%));
}
.leaderboard-podium {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.55rem;
margin-top: 0.8rem;
align-items: end;
}
.leaderboard-podium__step {
min-height: 126px;
padding: 0.75rem 0.55rem;
border-radius: 18px 18px 12px 12px;
text-align: center;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-secondary), black 5%);
display: grid;
gap: 0.4rem;
}
.leaderboard-podium__step--1 {
min-height: 154px;
background: linear-gradient(180deg, rgba(245, 189, 66, 0.18), color-mix(in srgb, var(--bg-secondary), black 4%));
}
.leaderboard-podium__step--2 {
min-height: 138px;
background: linear-gradient(180deg, rgba(182, 191, 202, 0.14), color-mix(in srgb, var(--bg-secondary), black 4%));
}
.leaderboard-podium__step--3 {
background: linear-gradient(180deg, rgba(182, 112, 76, 0.14), color-mix(in srgb, var(--bg-secondary), black 4%));
}
.leaderboard-podium__avatar {
width: 3rem;
height: 3rem;
margin: 0 auto;
border-radius: 999px;
display: grid;
place-items: center;
font-weight: 800;
border: 2px solid color-mix(in srgb, var(--faction-color, var(--accent-primary)), transparent 28%);
background: color-mix(in srgb, var(--faction-color, var(--accent-primary)), transparent 84%);
}
.social-capital-page,
.skills-page,
.living-book-page,
.shadow-page,
.question-display-page,
.moment-page {
background:
radial-gradient(circle at top, color-mix(in srgb, var(--accent-primary), transparent 90%), transparent 45%),
linear-gradient(180deg, color-mix(in srgb, var(--bg), black 2%), color-mix(in srgb, var(--bg), black 6%));
}
.social-capital-hero,
.skills-hero,
.living-book-hero,
.shadow-journal-hero {
border-radius: 26px;
overflow: hidden;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--accent-primary), transparent 82%), transparent 36%),
linear-gradient(155deg, color-mix(in srgb, var(--bg-card), white 2%), color-mix(in srgb, var(--bg-secondary), black 5%));
}
.social-offering-grid {
display: grid;
gap: 0.75rem;
}
.social-offering-card {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 0.75rem;
align-items: center;
border: 1px solid var(--border);
border-radius: 22px;
padding: 0.95rem;
background: linear-gradient(165deg, color-mix(in srgb, var(--bg-card), white 2%), color-mix(in srgb, var(--bg-secondary), black 3%));
}
.social-offering-card__avatar,
.skills-carousel__avatar,
.skills-schedule__avatar,
.participant-intelligence-card__avatar {
width: 3rem;
height: 3rem;
border-radius: 999px;
display: grid;
place-items: center;
font-weight: 800;
border: 2px solid color-mix(in srgb, var(--faction-color, var(--accent-primary)), transparent 30%);
background: color-mix(in srgb, var(--faction-color, var(--accent-primary)), transparent 84%);
}
.social-offering-card p {
margin: 0.2rem 0 0;
color: var(--text-secondary);
}
.social-offering-ritual {
position: fixed;
inset: 0;
z-index: 3500;
display: grid;
place-items: center;
padding: 1rem;
background: rgba(4, 6, 12, 0.82);
backdrop-filter: blur(18px);
}
.social-offering-ritual__shell {
width: min(100%, 28rem);
display: grid;
gap: 0.85rem;
text-align: center;
padding: 1.4rem;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 28px;
background: linear-gradient(180deg, rgba(14, 18, 31, 0.94), rgba(24, 30, 47, 0.92));
}
.social-offering-ritual__bowl {
width: 5.5rem;
height: 5.5rem;
margin: 0 auto;
border-radius: 999px;
display: grid;
place-items: center;
font-size: 2rem;
background: radial-gradient(circle, rgba(255, 235, 196, 0.16), rgba(255, 255, 255, 0.03));
animation: adr-orb-pulse 2.6s ease-in-out infinite;
}
.social-offering-ritual__hold.is-holding {
border-color: color-mix(in srgb, var(--success), transparent 24%);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--success), transparent 78%);
}
.skills-hero__countdown {
display: grid;
gap: 0.15rem;
margin-top: 0.9rem;
padding: 0.85rem 0.95rem;
border-radius: 18px;
background: rgba(255, 255, 255, 0.05);
}
.skills-schedule__timeline {
position: relative;
padding-left: 0.5rem;
}
.skills-schedule__item {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.75rem;
align-items: start;
border-radius: 20px;
}
.skills-schedule__item.is-upcoming {
border-color: color-mix(in srgb, var(--warning), transparent 34%);
background: color-mix(in srgb, var(--warning), transparent 93%);
}
.skills-schedule__content {
display: grid;
gap: 0.22rem;
}
.skills-carousel {
position: relative;
min-height: 360px;
}
.skills-carousel__card {
position: absolute;
inset: 0;
display: grid;
gap: 0.8rem;
align-content: start;
padding: 1rem;
border-radius: 22px;
border: 1px solid var(--border);
background: linear-gradient(165deg, color-mix(in srgb, var(--bg-card), white 2%), color-mix(in srgb, var(--bg-secondary), black 4%));
opacity: 0.18;
transform: scale(0.94) translateY(18px);
pointer-events: none;
transition: transform var(--duration-normal) var(--ease-out), opacity var(--duration-normal) var(--ease-out);
}
.skills-carousel__card.is-active {
opacity: 1;
transform: scale(1) translateY(0);
pointer-events: auto;
box-shadow: var(--shadow-md);
}
.skills-carousel__body {
display: grid;
gap: 0.3rem;
}
.living-book-registration,
.living-book-passport {
background: linear-gradient(165deg, color-mix(in srgb, var(--bg-card), white 2%), color-mix(in srgb, var(--bg-secondary), black 4%));
}
.living-book-catalog__sorts {
flex-wrap: wrap;
}
.living-book-shelf {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
align-items: end;
gap: 0.65rem;
overflow-x: auto;
padding: 1rem 0.1rem 0.4rem;
touch-action: pan-x;
scrollbar-width: thin;
}
.living-book-shelf__spine {
width: clamp(4.4rem, var(--spine-width, 5.5rem), 8rem);
min-height: 198px;
border: 0;
border-radius: 20px 20px 8px 8px;
padding: 0.95rem 0.55rem;
display: grid;
gap: 0.45rem;
align-content: space-between;
justify-items: center;
cursor: pointer;
color: #f8f1e4;
background:
linear-gradient(180deg, color-mix(in srgb, var(--spine-color, var(--accent-primary)), white 5%), color-mix(in srgb, var(--spine-color, var(--accent-primary)), black 24%));
box-shadow: inset -8px 0 0 rgba(0, 0, 0, 0.12), 0 10px 18px rgba(8, 12, 22, 0.18);
}
.living-book-shelf__spine.is-busy {
opacity: 0.42;
}
.living-book-shelf__spine.is-active {
transform: translateY(-5px);
box-shadow: inset -8px 0 0 rgba(0, 0, 0, 0.14), 0 14px 24px rgba(8, 12, 22, 0.24);
}
.living-book-shelf__title,
.living-book-shelf__owner {
writing-mode: vertical-rl;
transform: rotate(180deg);
}
.living-book-shelf__title {
font-weight: 800;
}
.living-book-shelf__owner {
font-size: 0.76rem;
color: rgba(248, 241, 228, 0.7);
}
.living-book-shelf__details {
margin-top: 1rem;
}
.living-book-detail-card {
border-radius: 22px;
border: 1px solid var(--border);
padding: 1rem;
background: color-mix(in srgb, var(--bg-secondary), black 2%);
}
.living-book-passport__grid {
display: grid;
gap: 0.75rem;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.living-book-passport__stamp {
border: 1px dashed color-mix(in srgb, var(--border), white 8%);
border-radius: 20px;
padding: 0.95rem;
background: linear-gradient(180deg, rgba(245, 236, 215, 0.08), rgba(255, 255, 255, 0.02));
}
.living-book-passport__stamp--gold {
border-color: rgba(251, 191, 36, 0.42);
}
.living-book-passport__stamp--ink {
border-color: rgba(96, 165, 250, 0.36);
}
.living-book-passport__stamp--shadow {
border-color: rgba(129, 140, 248, 0.36);
}
.living-book-passport__date {
font-size: 0.76rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 0.4rem;
}
.shadow-journal-entry__paper {
min-height: 180px;
background:
repeating-linear-gradient(180deg, rgba(39, 107, 122, 0.08), rgba(39, 107, 122, 0.08) 1px, transparent 1px, transparent 34px),
linear-gradient(180deg, rgba(250, 246, 238, 0.98), rgba(241, 232, 214, 0.92));
color: #285966;
border-color: rgba(142, 104, 73, 0.28);
}
.shadow-journal-entry__seal {
min-width: 190px;
}
.shadow-journal-archive__stack {
gap: 0.85rem;
}
.shadow-journal-note {
position: relative;
transform: rotate(var(--note-tilt, 0deg));
transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
background: linear-gradient(180deg, rgba(244, 233, 207, 0.12), rgba(255, 255, 255, 0.02));
animation: adr-note-float 5.4s ease-in-out infinite;
}
.shadow-journal-note.is-open,
.shadow-journal-note:hover {
transform: rotate(0deg) translateY(-3px);
box-shadow: var(--shadow-md);
}
.gate-fail-ritual {
max-width: 34rem;
margin: 0 auto;
text-align: center;
padding: 1rem;
}
.gate-fail-ritual__illustration {
position: relative;
width: min(72vw, 280px);
height: min(72vw, 280px);
margin: 0 auto 1rem;
display: grid;
place-items: center;
}
.gate-fail-ritual__door {
width: 72%;
height: 82%;
border-radius: 24px 24px 10px 10px;
border: 1px solid rgba(157, 120, 86, 0.42);
background:
linear-gradient(90deg, rgba(65, 39, 22, 0.94), rgba(113, 73, 44, 0.94), rgba(61, 36, 21, 0.94));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 24px 42px rgba(4, 8, 16, 0.34);
}
.gate-fail-ritual__lock {
position: absolute;
width: 4.6rem;
height: 4.6rem;
border-radius: 999px;
display: grid;
place-items: center;
font-size: 1.75rem;
background: radial-gradient(circle, rgba(255, 221, 156, 0.22), rgba(255, 255, 255, 0.04));
animation: adr-orb-pulse 2.8s ease-in-out infinite;
}
.gate-fail-ritual__lore {
text-align: left;
border-radius: 20px;
border: 1px solid rgba(154, 114, 85, 0.28);
padding: 0.95rem;
background: color-mix(in srgb, var(--bg-card), black 3%);
}
.gate-fail-ritual__lore p {
margin: 0.45rem 0 0;
}
.gate-fail-ritual__guide,
.gate-fail-ritual__hack {
border-radius: 22px;
}
.question-display-shell {
max-width: 1200px;
}
.question-display-header--oracle {
background:
radial-gradient(circle at top right, rgba(244, 200, 92, 0.14), transparent 38%),
linear-gradient(155deg, rgba(11, 14, 22, 0.96), rgba(23, 29, 44, 0.94));
color: #f7f3ea;
}
.question-display-actions {
display: flex;
gap: 0.55rem;
align-items: center;
flex-wrap: wrap;
}
.question-display-spotlight {
margin-bottom: 1rem;
}
.question-display-spotlight__card {
min-height: 210px;
border-radius: 28px;
display: grid;
place-items: center;
text-align: center;
padding: 1.4rem;
border: 1px solid rgba(244, 200, 92, 0.28);
background: linear-gradient(180deg, rgba(16, 20, 31, 0.96), rgba(23, 29, 43, 0.9));
}
.question-display-spotlight__card h2 {
max-width: 22ch;
margin: 0;
font-size: clamp(1.6rem, 4vw, 2.7rem);
line-height: 1.08;
}
.question-display-grid {
display: grid;
gap: 0.9rem;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.question-display-item {
border-radius: 22px;
background: linear-gradient(180deg, rgba(245, 247, 252, 0.98), rgba(237, 241, 247, 0.96));
color: #141922;
}
.question-display-item__topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.55rem;
}
.question-display-item__resonance {
font-weight: 800;
color: #9a6a00;
}
.question-display-item.is-featured {
box-shadow: 0 0 0 2px rgba(244, 200, 92, 0.28), var(--shadow-md);
}
.question-display-item.is-pulsing {
animation: adr-oracle-pulse 0.9s ease-out;
}
.question-display-gm-controls {
display: flex;
gap: 0.45rem;
flex-wrap: wrap;
margin-top: 0.75rem;
}
.participant-intel-toolbar {
position: sticky;
top: 0.65rem;
z-index: 4;
backdrop-filter: blur(12px);
}
.participant-intelligence-grid {
display: grid;
gap: 0.85rem;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.participant-intelligence-card {
border-radius: 22px;
display: grid;
gap: 0.75rem;
background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card), white 2%), color-mix(in srgb, var(--bg-secondary), black 4%));
}
.participant-intelligence-card.is-idle {
border-color: rgba(250, 204, 21, 0.28);
}
.participant-intelligence-card.is-disengaged {
border-color: rgba(248, 113, 113, 0.3);
}
.participant-intelligence-card__identity {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.65rem;
align-items: center;
}
.participant-intelligence-card__metrics {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.participant-intelligence-card__metrics span {
padding: 0.28rem 0.55rem;
border-radius: 999px;
border: 1px solid var(--border);
font-size: 0.78rem;
color: var(--text-secondary);
}
.participant-intelligence-card__actions {
flex-wrap: wrap;
}
.dispatch-studio {
border-radius: 24px;
}
.dispatch-studio__templates .action-bar {
flex-wrap: wrap;
}
.dispatch-studio__preview {
display: grid;
gap: 0.55rem;
padding: 1rem;
border-radius: 20px;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-secondary), black 5%);
}
.dispatch-studio__phone {
width: min(100%, 320px);
margin: 0 auto;
padding: 0.8rem;
border-radius: 28px;
border: 1px solid rgba(255, 255, 255, 0.09);
background: linear-gradient(180deg, rgba(16, 20, 31, 0.98), rgba(25, 31, 46, 0.95));
}
.dispatch-studio__notif {
display: grid;
gap: 0.4rem;
padding: 0.9rem;
border-radius: 20px;
background: linear-gradient(180deg, rgba(245, 247, 252, 0.98), rgba(236, 241, 248, 0.96));
color: #111722;
}
.dispatch-studio__notif p {
margin: 0;
}
.dispatch-studio__queue article {
border-radius: 18px;
}
.token-mint-dashboard,
.token-quick-action {
border-radius: 24px;
}
.token-mint-dashboard__stats {
margin-top: 0.9rem;
}
.token-flow-chart {
display: grid;
grid-template-columns: repeat(24, minmax(0, 1fr));
gap: 0.35rem;
align-items: end;
min-height: 220px;
margin-top: 1rem;
}
.token-flow-chart__bar {
display: grid;
gap: 0.35rem;
justify-items: center;
}
.token-flow-chart__column {
width: 100%;
min-height: 18px;
border-radius: 999px 999px 10px 10px;
background: color-mix(in srgb, var(--text-muted), transparent 65%);
}
.token-flow-chart__bar--positive .token-flow-chart__column {
background: linear-gradient(180deg, rgba(74, 222, 128, 0.96), rgba(21, 128, 61, 0.9));
}
.token-flow-chart__bar--negative .token-flow-chart__column {
background: linear-gradient(180deg, rgba(248, 113, 113, 0.96), rgba(185, 28, 28, 0.9));
}
.token-flow-chart__bar--neutral .token-flow-chart__column {
background: linear-gradient(180deg, rgba(148, 163, 184, 0.8), rgba(100, 116, 139, 0.82));
}
.token-flow-chart__label {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 0.72rem;
color: var(--text-muted);
}
.token-event-bonus {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
}
.bounty-board-page {
padding-bottom: 7rem;
}
.bounty-board-hero {
border-radius: 26px;
color: #f8f1e4;
}
.bounty-sort-row {
flex-wrap: wrap;
}
.bounty-poster-grid {
display: grid;
gap: 0.95rem;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.bounty-poster {
position: relative;
overflow: hidden;
min-height: 420px;
display: grid;
gap: 0.6rem;
align-content: start;
padding: 1rem;
border-radius: 18px;
border: 1px solid rgba(133, 96, 59, 0.3);
background:
linear-gradient(180deg, rgba(247, 235, 205, 0.96), rgba(230, 214, 182, 0.92));
color: #2c2015;
box-shadow: 0 18px 28px rgba(23, 16, 10, 0.16);
}
.bounty-poster.is-focused {
box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.24), 0 18px 28px rgba(23, 16, 10, 0.16);
}
.bounty-poster__masthead,
.bounty-poster__title {
text-align: center;
}
.bounty-poster__masthead {
font-size: 0.92rem;
letter-spacing: 0.22em;
font-weight: 800;
}
.bounty-poster__title {
font-size: 1.55rem;
line-height: 1.02;
font-weight: 800;
}
.bounty-poster__portrait {
min-height: 150px;
border: 1px solid rgba(106, 75, 45, 0.26);
border-radius: 12px;
overflow: hidden;
display: grid;
place-items: center;
background: rgba(70, 48, 25, 0.09);
}
.bounty-poster__portrait img {
width: 100%;
height: 100%;
object-fit: cover;
filter: sepia(0.76) saturate(0.7);
}
.bounty-poster__portrait--placeholder {
padding: 1rem;
text-align: center;
color: rgba(44, 32, 21, 0.72);
}
.bounty-poster__description {
margin: 0;
min-height: 3.6em;
}
.bounty-poster__reward {
position: relative;
padding: 0.7rem 0.9rem;
border-radius: 16px;
border: 1px solid rgba(147, 111, 40, 0.32);
background: linear-gradient(180deg, rgba(255, 212, 123, 0.62), rgba(232, 176, 52, 0.34));
font-weight: 800;
text-align: center;
}
.bounty-poster__flame {
position: absolute;
top: -0.65rem;
right: 0.65rem;
animation: adr-poster-flicker 1.6s ease-in-out infinite;
}
.bounty-poster__meta {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.bounty-poster__meta span {
padding: 0.24rem 0.52rem;
border: 1px solid rgba(106, 75, 45, 0.22);
border-radius: 999px;
font-size: 0.74rem;
}
.bounty-poster__actions {
margin-top: auto;
flex-wrap: wrap;
}
.world-wait-panel {
border-radius: 26px;
}
.world-wait-panel__hero {
display: grid;
gap: 1rem;
grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
align-items: center;
}
.world-wait-panel__visual {
min-height: 220px;
border-radius: 24px;
display: grid;
place-items: center;
text-align: center;
padding: 1rem;
background:
radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)),
linear-gradient(180deg, rgba(14, 18, 31, 0.94), rgba(24, 31, 47, 0.88));
animation: adr-wait-drift 4.6s ease-in-out infinite;
}
.world-wait-panel__icon {
font-size: 2.6rem;
}
.world-wait-panel__countdown {
display: grid;
gap: 0.35rem;
}
.world-wait-panel__count-label {
font-size: clamp(1.7rem, 7vw, 2.8rem);
font-weight: 800;
}
.world-wait-panel__cards {
display: grid;
gap: 0.75rem;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.world-wait-card {
border: 1px solid var(--border);
border-radius: 20px;
padding: 0.9rem;
background: color-mix(in srgb, var(--bg-secondary), black 3%);
display: grid;
gap: 0.45rem;
}
.world-wait-card__title {
font-weight: 800;
}
.world-wait-context-card,
.world-wait-context-card__meta {
display: grid;
gap: 0.55rem;
}
.confessional-shell {
min-height: 100svh;
padding: 1.2rem;
background:
radial-gradient(circle at top, rgba(255, 196, 128, 0.09), transparent 30%),
linear-gradient(180deg, #07090f 0%, #111623 100%);
color: #f2ede4;
}
.confessional-shell__hero {
max-width: 34rem;
margin: 0 auto 1.1rem;
text-align: center;
display: grid;
gap: 0.55rem;
}
.confessional-shell__prompt {
margin: 0;
color: rgba(242, 237, 228, 0.78);
}
.confessional-shell__form {
max-width: 34rem;
margin: 0 auto;
padding: 1rem;
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.09);
background: rgba(17, 22, 35, 0.8);
}
.confessional-shell__result {
max-width: 34rem;
margin: 0.95rem auto 0;
}
.confessional-shell__echo-card {
background: rgba(17, 22, 35, 0.72);
}
.confessional-ritual-result {
display: grid;
gap: 0.85rem;
padding: 1.1rem;
border-radius: 24px;
border: 1px solid rgba(255, 234, 193, 0.14);
background: linear-gradient(180deg, rgba(8, 10, 16, 0.98), rgba(17, 22, 35, 0.92));
}
.confessional-ritual-result__flame {
width: 3.6rem;
height: 4.5rem;
margin: 0 auto;
border-radius: 999px 999px 999px 999px / 72% 72% 28% 28%;
background: radial-gradient(circle at 50% 30%, rgba(255, 236, 179, 0.95), rgba(255, 145, 77, 0.72) 45%, rgba(255, 96, 57, 0.18) 82%);
filter: blur(0.2px);
animation: adr-orb-pulse 2s ease-in-out infinite;
}
.confessional-ritual-result__copy {
text-align: center;
display: grid;
gap: 0.35rem;
}
.confessional-ritual-result__copy p {
margin: 0;
}
.confessional-ritual-result__echo {
padding: 0.85rem;
border-radius: 18px;
background: rgba(255, 255, 255, 0.04);
color: rgba(242, 237, 228, 0.84);
font-style: italic;
}
.confessional-ritual-result__release {
justify-self: center;
}
body.is-releasing-confession,
body.is-in-confessional-ritual {
background: #05070c;
}
.moment-shell {
position: relative;
padding: 1rem;
}
.moment-shell__pulsebar {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 0.65rem;
align-items: center;
margin-bottom: 0.75rem;
}
.moment-shell__pulse-track {
position: relative;
height: 12px;
border-radius: 999px;
overflow: hidden;
background: rgba(255, 255, 255, 0.08);
}
.moment-shell__pulse-fill {
position: absolute;
inset: 0 auto 0 0;
border-radius: inherit;
background: linear-gradient(90deg, rgba(252, 211, 77, 0.9), rgba(248, 113, 113, 0.92));
}
.moment-shell__pulse-fill.is-fever::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.26), transparent);
animation: adr-shimmer 1.2s linear infinite;
}
.moment-shell__card {
position: relative;
overflow: hidden;
border-radius: 28px;
padding: 1.05rem;
}
.moment-shell__flash {
position: absolute;
inset: 1rem;
z-index: 2;
border-radius: 22px;
display: grid;
place-items: center;
text-align: center;
padding: 1rem;
background: rgba(255, 255, 255, 0.88);
color: #15181f;
}
.moment-shell__burst-layer {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.moment-shell__burst {
position: absolute;
transform: translate(-50%, -50%);
font-size: 1.5rem;
animation: adr-moment-burst 1.1s ease-out forwards;
}
.moment-witness-form {
position: relative;
z-index: 1;
}
.moment-emoji-grid {
justify-content: center;
}
.moment-emoji-btn {
min-width: 60px;
min-height: 60px;
border-radius: 18px;
}
.circle-shell--reveal {
max-width: 40rem;
margin: 0 auto;
padding: 1.1rem;
}
.circle-reveal-stage {
min-height: 280px;
display: grid;
place-items: center;
text-align: center;
}
.circle-reveal-stage__ring {
width: min(62vw, 220px);
aspect-ratio: 1;
border-radius: 999px;
border: 2px solid rgba(248, 223, 171, 0.54);
box-shadow: 0 0 0 12px rgba(248, 223, 171, 0.06);
animation: adr-circle-ring 2.8s ease-in-out infinite;
}
.circle-reveal-stage__line {
margin-top: -8.8rem;
max-width: 22ch;
font-size: clamp(1.35rem, 4vw, 2rem);
line-height: 1.2;
opacity: 0;
transform: translateY(8px);
transition: opacity 220ms ease, transform 220ms ease;
}
.circle-reveal-stage__line.is-visible {
opacity: 1;
transform: translateY(0);
}
.circle-style-sequential,
.circle-style-mosaic {
display: grid;
gap: 0.7rem;
}
.circle-style-constellation {
position: relative;
min-height: 420px;
}
.circle-style-constellation .circle-reveal-item {
position: absolute;
max-width: 16rem;
}
.circle-reveal-item {
margin: 0;
padding: 0.9rem;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.05);
}
.qr-create-preview {
position: sticky;
top: 0.75rem;
z-index: var(--z-sticky);
align-self: start;
}
.qr-create-preview__role-bar,
.qr-create-preview__state-bar,
.qr-create-preview__scenario-bar,
.qr-create-preview__chips {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.qr-create-preview__loading {
min-height: 1.3rem;
margin-top: 0.5rem;
}
.qr-create-preview__meta {
display: grid;
gap: 0.55rem;
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
.qr-create-preview__frame {
min-height: 320px;
padding: 0.9rem;
border-radius: 24px;
border: 1px solid rgba(148, 163, 184, 0.28);
background: linear-gradient(180deg, rgba(248, 250, 255, 0.18), rgba(224, 232, 255, 0.08));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.qr-create-preview__frame.is-mobile {
width: min(100%, 360px);
margin: 0 auto;
border-radius: 34px;
padding: 1rem 0.8rem 1.2rem;
}
.qr-create-preview__iframe {
width: 100%;
min-height: 520px;
border: 0;
border-radius: 22px;
background: #f8fafc;
color-scheme: light;
}
.qr-create-preview__frame.is-mobile .qr-create-preview__iframe {
min-height: 640px;
border-radius: 28px;
}
.qr-create-preview .btn.btn-secondary,
.qr-create-preview .status-badge {
border-color: rgba(148, 163, 184, 0.34);
background: rgba(30, 41, 59, 0.72);
color: #f8fafc;
}
.qr-create-preview .btn.btn-secondary.is-active,
.qr-create-preview .btn.btn-secondary:hover {
background: rgba(59, 130, 246, 0.32);
border-color: rgba(125, 211, 252, 0.72);
color: #ffffff;
}
.qr-preview-fragment {
display: grid;
gap: 0.45rem;
}
.qr-preview-fragment p {
margin: 0;
}
.event-map-pin {
gap: 0.35rem;
}
.map-pin-icon {
display: inline-grid;
place-items: center;
width: 1rem;
height: 1rem;
}
.event-map-pin--claimable {
border-color: rgba(74, 222, 128, 0.72);
background: rgba(15, 51, 33, 0.92);
}
.event-map-pin--nearly-ready {
border-color: rgba(251, 191, 36, 0.72);
background: rgba(65, 49, 18, 0.92);
}
.event-map-pin--locked {
border-color: rgba(248, 113, 113, 0.62);
background: rgba(69, 27, 27, 0.92);
}
.event-map-pin--completed {
border-color: rgba(148, 163, 184, 0.6);
background: rgba(45, 53, 71, 0.92);
}
.player-map-marker__icon {
font-size: 0.92rem;
line-height: 1;
}
.player-map-marker--claimable {
border-color: rgba(187, 247, 208, 0.96);
box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18), 0 6px 16px rgba(0, 0, 0, 0.28);
}
.player-map-marker--nearly-ready {
border-color: rgba(254, 240, 138, 0.96);
box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18), 0 6px 16px rgba(0, 0, 0, 0.28);
}
.player-map-marker--locked {
background: linear-gradient(180deg, rgba(153, 27, 27, 0.94), rgba(127, 29, 29, 0.88));
}
.player-map-marker--completed {
background: linear-gradient(180deg, rgba(107, 114, 128, 0.94), rgba(75, 85, 99, 0.9));
}
.player-map-marker.is-undiscovered {
opacity: 0.66;
filter: grayscale(0.3);
}
.player-map-marker-wrap.is-focused .player-map-marker {
transform: scale(1.1);
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18), 0 8px 20px rgba(0, 0, 0, 0.32);
}
@media (max-width: 900px) {
.world-wait-panel__hero {
grid-template-columns: 1fr;
}
.question-display-grid,
.leaderboard-recognition-grid,
.bounty-poster-grid,
.participant-intelligence-grid {
grid-template-columns: 1fr;
}
.social-offering-card,
.skills-schedule__item {
grid-template-columns: 1fr;
}
.social-offering-card__avatar,
.skills-schedule__avatar {
margin-bottom: 0.15rem;
}
}
@media (max-width: 640px) {
.pulse-home-hero {
margin-inline: -0.75rem;
}
.pulse-home-shelf {
grid-template-columns: 1fr;
}
.pulse-card-rail {
grid-auto-columns: 88%;
}
.pulse-scan-orb {
bottom: 6.1rem;
min-width: 4.7rem;
min-height: 4.7rem;
}
.living-book-shelf__spine {
min-height: 176px;
}
.token-flow-chart {
overflow-x: auto;
padding-bottom: 0.25rem;
}
}
@media (min-width: 880px) {
.pulse-home-link-groups {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.quest-filter-chip-row {
display: grid;
gap: 0.6rem;
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.quest-filter-chip-group {
display: flex;
gap: 0.5rem;
min-width: max-content;
}
.quest-loading-bar {
position: sticky;
top: 0;
z-index: 4;
display: none;
height: 4px;
overflow: hidden;
border-radius: 999px;
background: color-mix(in srgb, var(--bg-secondary), black 10%);
}
.quest-loading-bar.htmx-request,
.htmx-request > .quest-loading-bar,
.htmx-request.quest-loading-bar {
display: block;
}
.quest-loading-bar__fill {
display: block;
width: 38%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
animation: adr-shimmer 1.2s linear infinite;
}
.quest-suggestion-empty {
padding: 1rem;
}
.quest-load-more,
.timeline-storyline > .load-more,
#bounty-board-grid > .load-more {
margin-top: 1rem;
display: flex;
justify-content: center;
}
.timeline-filter-bar {
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.timeline-item-subtitle {
margin: 0.2rem 0 0;
}
.timeline-skeleton {
display: none;
gap: 0.85rem;
margin-top: 0.85rem;
}
.timeline-skeleton.htmx-request,
.htmx-request > .timeline-skeleton,
.htmx-request.timeline-skeleton {
display: grid;
}
.timeline-skeleton__entry {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.75rem;
}
.timeline-skeleton__dot {
width: 0.95rem;
height: 0.95rem;
margin-top: 0.3rem;
border-radius: 999px;
background: color-mix(in srgb, var(--accent-primary), var(--bg-card) 72%);
}
.timeline-skeleton__body {
display: grid;
gap: 0.45rem;
}
.bounty-board-toolbar {
display: grid;
gap: 0.75rem;
}
.workflows-stats-grid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.workflows-create-grid {
display: grid;
gap: 0.85rem;
align-items: start;
}
.workflows-section-title {
margin: 0 0 0.35rem;
}
.workflows-create-body,
.workflows-create-form,
.workflows-prompt-form,
.workflow-recipes-grid,
.workflows-recipe-card,
.item-grant-form,
.dispatch-form {
display: grid;
gap: 0.75rem;
}
.workflows-checkbox {
display: inline-flex;
align-items: center;
gap: 0.55rem;
}
.workflows-list-toolbar {
gap: 0.8rem;
align-items: center;
}
.workflow-table-skeleton {
display: grid;
gap: 0.6rem;
}
.workflow-table-skeleton__row {
min-height: 1rem;
border-radius: 999px;
background: linear-gradient(90deg, color-mix(in srgb, var(--bg-secondary), black 5%), color-mix(in srgb, var(--bg-card), white 5%), color-mix(in srgb, var(--bg-secondary), black 5%));
background-size: 200% 100%;
animation: adr-shimmer 1.2s linear infinite;
}
.workflow-table-skeleton__row:nth-child(1) {
width: 88%;
}
.workflow-table-skeleton__row:nth-child(2) {
width: 70%;
}
.workflow-table-skeleton__row:nth-child(3) {
width: 78%;
}
.ops-pagination {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-top: 0.9rem;
}
.system-info-card summary,
.item-create-card summary,
.participant-filter-advanced summary {
cursor: pointer;
}
.item-checkbox-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.field-hint {
margin: 0;
color: var(--text-secondary);
font-size: 0.9rem;
}
.field-hint--valid {
color: var(--success);
}
.field-hint--error {
color: var(--danger);
}
.item-table__name {
display: flex;
align-items: center;
gap: 0.55rem;
flex-wrap: wrap;
}
.participant-search-results {
display: grid;
gap: 0.35rem;
}
.participant-search-option {
border: 1px solid var(--border);
border-radius: 14px;
background: var(--bg-card);
color: var(--text-primary);
text-align: left;
padding: 0.7rem 0.85rem;
}
.gm-surface-drawer {
--z-sheet: var(--z-drawer);
}
.gm-surface-drawer__overlay {
background: rgba(2, 6, 18, 0.72);
}
.gm-surface-drawer__panel {
width: min(520px, 100%);
max-width: min(520px, 100%);
background: color-mix(in srgb, var(--bg-card), white 2%);
}
.gm-surface-drawer__head {
position: sticky;
top: 0;
z-index: 2;
background: color-mix(in srgb, var(--bg-card), white 2%);
}
.gm-surface-drawer__close {
margin-left: auto;
}
.qr-drawer-loading {
display: grid;
gap: 0.85rem;
align-items: center;
padding: 1.1rem;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--bg-card), white 3%);
}
.qr-drawer-loading__spinner {
width: 2.2rem;
height: 2.2rem;
border-radius: 999px;
border: 3px solid color-mix(in srgb, var(--accent-primary), transparent 70%);
border-top-color: var(--accent-primary);
animation: qr-drawer-spin 0.9s linear infinite;
}
.qr-drawer-card {
display: grid;
gap: 0.9rem;
}
.qr-drawer-card__head {
align-items: start;
}
.qr-drawer-card__meta,
.qr-drawer-card__actions {
align-items: stretch;
}
.qr-drawer-card__actions .btn {
min-height: 44px;
}
.qr-drawer-card__footer {
padding-top: 0.35rem;
border-top: 1px solid color-mix(in srgb, var(--border), transparent 12%);
}
.qr-type-search-card {
display: grid;
gap: 0.55rem;
}
.qr-catalog-layout {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
gap: 1rem;
align-items: start;
margin-bottom: 1rem;
}
.qr-catalog-browser,
.qr-type-detail-shell {
position: relative;
}
.qr-catalog-tabs {
margin: 0 0 1rem;
padding-bottom: 0.35rem;
border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 12%);
}
.qr-catalog-tab {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-height: 44px;
padding: 0.5rem 0.9rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--border), transparent 8%);
color: var(--text-secondary);
text-decoration: none;
background: color-mix(in srgb, var(--bg-secondary), black 4%);
}
.qr-catalog-tab.active {
border-color: color-mix(in srgb, var(--accent-primary), white 12%);
background: color-mix(in srgb, var(--accent-primary), var(--bg-secondary) 78%);
color: var(--text-primary);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary), transparent 65%);
}
.qr-catalog-tab .badge {
background: color-mix(in srgb, var(--bg-card), white 7%);
color: inherit;
}
.qr-catalog-search {
min-height: 44px;
}
.qr-type-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.75rem;
}
.qr-type-card {
display: grid;
gap: 0.45rem;
min-height: 100%;
padding: 0.9rem;
border: 1px solid color-mix(in srgb, var(--border), transparent 10%);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-secondary), black 4%);
color: var(--text-primary);
text-decoration: none;
transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.qr-type-card:hover,
.qr-type-card.active {
border-color: color-mix(in srgb, var(--accent-primary), white 12%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary), transparent 68%), var(--shadow-sm);
transform: translateY(-1px);
}
.qr-type-card-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem;
}
.qr-type-card p {
margin: 0;
color: var(--text-secondary);
font-size: 0.92rem;
line-height: 1.45;
}
.qr-complexity-quick {
background: color-mix(in srgb, #2dc66d, transparent 82%);
color: #93f0b8;
}
.qr-complexity-standard {
background: color-mix(in srgb, #54a8ff, transparent 82%);
color: #b5d7ff;
}
.qr-complexity-advanced {
background: color-mix(in srgb, #ffb357, transparent 80%);
color: #ffd8a8;
}
.qr-type-detail-backdrop {
display: none;
}
.qr-type-detail-panel {
display: grid;
gap: 0.85rem;
}
.qr-type-detail-handle {
display: none;
}
.qr-type-detail-card {
display: grid;
gap: 1rem;
}
.qr-type-detail-head {
display: flex;
align-items: start;
justify-content: space-between;
gap: 0.9rem;
}
.qr-type-detail-title-row {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.qr-type-detail-title-row .section-title {
margin: 0;
}
.qr-type-meta-grid,
.qr-type-detail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.75rem;
}
.qr-type-meta,
.qr-type-detail-grid > div {
padding: 0.8rem;
border: 1px solid color-mix(in srgb, var(--border), transparent 8%);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-secondary), black 4%);
}
.qr-type-detail-grid__full {
grid-column: 1 / -1;
}
.qr-type-meta .meta-label {
display: block;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
margin-bottom: 0.35rem;
}
.qr-type-meta .meta-value {
color: var(--text-primary);
}
.qr-type-fields-preview {
padding: 0.9rem;
border: 1px solid color-mix(in srgb, var(--border), transparent 8%);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-secondary), black 4%);
}
.qr-type-fields-preview h4 {
margin-top: 0;
margin-bottom: 0.65rem;
}
.qr-field-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.qr-field-chip {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-height: 36px;
padding: 0.4rem 0.65rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--border), transparent 8%);
background: color-mix(in srgb, var(--bg-card), black 3%);
}
.qr-field-chip.is-required {
border-color: color-mix(in srgb, var(--accent-primary), transparent 55%);
}
.qr-field-chip .field-type {
font-size: 0.82rem;
color: var(--text-muted);
}
@media (max-width: 900px) {
.qr-catalog-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.qr-type-card-grid {
grid-template-columns: 1fr;
gap: 0.45rem;
}
.qr-type-card {
padding: 0.75rem 0.85rem;
}
.qr-type-card p {
display: none;
}
.qr-catalog-search {
position: sticky;
top: 0;
z-index: 4;
}
.qr-type-detail-shell {
position: fixed;
inset: 0;
z-index: var(--z-modal);
background: transparent;
pointer-events: none;
}
.qr-type-detail-shell .qr-type-detail-backdrop {
display: block;
position: absolute;
inset: 0;
border: 0;
background: rgba(2, 8, 22, 0.72);
opacity: 0;
transition: opacity 160ms ease;
}
.qr-type-detail-panel {
position: absolute;
left: 0;
right: 0;
bottom: 0;
max-height: 78vh;
overflow: auto;
padding: 1rem 1rem calc(1rem + var(--sab));
border: 1px solid color-mix(in srgb, var(--border), transparent 8%);
border-bottom: 0;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
background: var(--bg-card);
box-shadow: var(--shadow-lg);
transform: translateY(100%);
transition: transform 180ms ease;
}
.qr-type-detail-shell.is-open {
pointer-events: auto;
}
.qr-type-detail-shell.is-open .qr-type-detail-backdrop {
opacity: 1;
}
.qr-type-detail-shell.is-open .qr-type-detail-panel {
transform: translateY(0);
}
.qr-type-detail-handle {
display: block;
width: 38px;
height: 4px;
margin: 0 auto 0.7rem;
border-radius: 999px;
background: var(--border);
}
.qr-type-detail-close {
min-height: 44px;
}
}
.qr-batch-core-card,
.qr-batch-review-card {
margin-bottom: 1rem;
}
.qr-batch-core-grid,
.qr-batch-review-grid,
.qr-batch-advanced-body {
margin-top: 0.9rem;
}
.qr-batch-advanced > summary {
min-height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.qr-batch-submit-bar {
position: sticky;
bottom: max(0.75rem, var(--sab));
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.85rem;
padding: 0.9rem 1rem;
border: 1px solid color-mix(in srgb, var(--border), transparent 8%);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--bg-card), black 2%);
box-shadow: var(--shadow-lg);
}
.qr-detail-save-bar {
position: sticky;
bottom: max(0.75rem, var(--sab));
z-index: 25;
display: none;
align-items: center;
justify-content: space-between;
gap: 0.85rem;
padding: 0.9rem 1rem;
margin-top: 1rem;
border: 1px solid color-mix(in srgb, var(--accent-primary), transparent 60%);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--bg-card), black 3%);
box-shadow: var(--shadow-lg);
}
.qr-detail-save-bar .btn {
min-height: 44px;
}
@keyframes qr-drawer-spin {
to {
transform: rotate(360deg);
}
}
body.gm-drawer-open {
overflow: hidden;
}
.item-drawer-tabs,
.participant-view-toggle,
.participant-quick-filters,
.submissions-range,
.qr-table-qr-cell {
display: flex;
gap: 0.55rem;
flex-wrap: wrap;
}
.participant-filter-primary {
display: flex;
gap: 0.85rem;
justify-content: space-between;
align-items: end;
flex-wrap: wrap;
}
.participant-filter-primary__form {
display: grid;
gap: 0.8rem;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
flex: 1 1 520px;
}
.participant-skeleton-card {
display: grid;
gap: 0.6rem;
}
.dispatch-customize {
margin-top: 0.75rem;
}
.dispatch-customize summary {
list-style: none;
}
.dispatch-customize summary::-webkit-details-marker {
display: none;
}
.token-quick-grant {
display: grid;
gap: 0.6rem;
margin-top: 0.75rem;
}
.qr-table-qr-cell {
flex-direction: column;
align-items: flex-start;
}
.submission-tip-card {
margin-top: 0.8rem;
}
.submissions-bulk-toolbar {
overflow: hidden;
max-height: 0;
opacity: 0;
transform: translateY(1rem);
transition: max-height var(--transition-slow), opacity var(--transition-slow), transform var(--transition-slow);
}
.submissions-bulk-toolbar.bulk-toolbar--active {
max-height: 12rem;
opacity: 1;
transform: translateY(0);
}
.submission-thumb-link {
display: inline-flex;
}
.submission-lightbox {
position: fixed;
inset: 0;
z-index: calc(var(--z-drawer) + 1);
}
.submission-lightbox[hidden] {
display: none;
}
.submission-lightbox__backdrop {
position: absolute;
inset: 0;
border: 0;
background: rgba(2, 6, 18, 0.82);
}
.submission-lightbox__panel {
position: relative;
z-index: 1;
width: min(92vw, 960px);
margin: 4vh auto;
padding: 1rem;
display: grid;
gap: 0.8rem;
}
.submission-lightbox__panel img {
width: 100%;
max-height: 80vh;
object-fit: contain;
border-radius: 18px;
}
.submission-lightbox__close {
justify-self: end;
}
.qr-mobile-pagination-top {
display: none;
}
.qr-card-select {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.55rem;
border: 1px solid var(--border);
border-radius: 999px;
background: color-mix(in srgb, var(--bg-card), black 4%);
font-size: 0.78rem;
font-weight: 700;
}
.qr-card-select input {
margin: 0;
}
@media (max-width: 900px) {
.participant-filter-primary {
flex-direction: column;
align-items: stretch;
}
}
@media (min-width: 901px) {
.workflows-create-grid {
grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
}
}
@media (max-width: 768px) {
.gm-surface-drawer__panel {
width: 100%;
max-width: 100%;
max-height: min(82vh, 760px);
background: color-mix(in srgb, var(--bg-card), black 2%);
}
.gm-surface-drawer__close {
margin-left: 0;
}
.ops-pagination {
flex-wrap: wrap;
}
.qr-mobile-pagination-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
position: sticky;
top: 0;
z-index: 20;
margin-bottom: 0.65rem;
padding: 0.55rem 0;
background: color-mix(in srgb, var(--bg-primary), black 4%);
border-bottom: 1px solid var(--border);
}
.qr-mobile-pagination-top .action-bar {
flex-wrap: nowrap;
}
.qr-mobile-pagination-top .btn {
min-height: 44px;
flex: 0 0 auto;
}
.qr-drawer-card__actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.qr-drawer-card__actions .btn {
width: 100%;
}
.qr-batch-submit-bar {
flex-direction: column;
align-items: stretch;
}
.qr-batch-submit-bar .btn {
width: 100%;
}
.qr-detail-save-bar {
display: flex;
flex-direction: column;
align-items: stretch;
}
[data-app-surface="qrcodes"] .ops-pagination {
padding-bottom: 7rem;
}
[data-app-surface="qrcodes"] .qr-bulk-context {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
flex-direction: column;
align-items: stretch;
gap: 0.55rem;
padding: 0.85rem 1rem calc(0.85rem + var(--sab));
background: color-mix(in srgb, var(--bg-card), black 2%);
border-top: 1px solid var(--border);
box-shadow: var(--shadow-lg);
}
[data-app-surface="qrcodes"] .qr-bulk-context .action-bar {
flex-wrap: nowrap;
overflow-x: auto;
}
[data-app-surface="qrcodes"] .qr-bulk-context .btn {
min-height: 44px;
flex: 0 0 auto;
}
}
.quest-flow-layout {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
align-items: start;
gap: 0.8rem;
}
.quest-flow-sidebar {
display: grid;
gap: 0.7rem;
}
.quest-flow-sidebar__toggle {
display: none;
width: 100%;
justify-content: space-between;
}
.quest-flow-qr-list {
margin-top: 0.45rem;
max-height: 280px;
overflow: auto;
display: grid;
gap: 0.35rem;
}
.quest-flow-canvas {
position: relative;
min-height: 560px;
border: 1px solid var(--border);
border-radius: 12px;
background: color-mix(in srgb, var(--bg-card), black 5%);
overflow: hidden;
overscroll-behavior: contain;
}
.quest-flow-stage-viewport {
position: relative;
width: 100%;
height: 100%;
min-height: 560px;
}
.quest-flow-stage {
position: relative;
width: 1200px;
height: 640px;
transform-origin: top left;
touch-action: none;
will-change: transform;
}
.quest-flow-stage__edges {
position: absolute;
inset: 0;
width: 1200px;
height: 640px;
pointer-events: none;
}
.quest-flow-stage__nodes {
position: absolute;
inset: 0;
}
.quest-flow-node {
position: absolute;
width: 176px;
padding: 0.5rem;
cursor: grab;
touch-action: none;
user-select: none;
}
.quest-flow-node.is-selected {
border-color: color-mix(in srgb, var(--accent-primary), transparent 20%);
}
.quest-flow-mobile-toolbar {
display: none;
}
.quest-form {
display: grid;
gap: 1rem;
}
.quest-form__submit {
display: grid;
}
.incident-filter-bar {
margin-bottom: var(--space-3);
}
.incident-details-text {
max-width: 38ch;
white-space: pre-wrap;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.incident-actions {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.registration-promote-card {
display: grid;
gap: 0.65rem;
}
.registration-faction-form {
display: flex;
align-items: center;
gap: 0.35rem;
flex-wrap: wrap;
}
.registration-faction-form .form-select {
min-width: 170px;
}
.registration-card-actions {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.invite-url-cell {
display: grid;
gap: 0.45rem;
}
.invite-url-code {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.invite-url-actions {
display: flex;
align-items: center;
gap: 0.45rem;
flex-wrap: wrap;
}
.shadow-datetime {
white-space: nowrap;
}
.scoreboard-filter-bar {
margin-bottom: 1rem;
}
.scoreboard-filter-form {
display: flex;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
}
.scoreboard-filter-select {
min-width: 150px;
}
.scoreboard-faction-card {
border-left: 4px solid var(--faction-color);
}
.scoreboard-faction-card .stat-label {
color: var(--faction-color);
}
.scoreboard-rank {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2rem;
min-height: 2rem;
padding: 0 0.55rem;
border-radius: 999px;
background: color-mix(in srgb, var(--bg-elevated), black 8%);
font-weight: 800;
}
.scoreboard-rank--1 {
color: #f3c24f;
}
.scoreboard-rank--2 {
color: #d4d7dd;
}
.scoreboard-rank--3 {
color: #d58a52;
}
.scoreboard-score {
display: grid;
gap: 0.35rem;
min-width: 120px;
}
.scoreboard-scorebar {
height: 0.45rem;
border-radius: 999px;
background: color-mix(in srgb, var(--bg-elevated), black 6%);
overflow: hidden;
}
.scoreboard-scorebar > span {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
}
.webhook-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.8rem;
}
.error-details {
margin: 0;
}
.error-details > summary {
cursor: pointer;
}
.error-preview {
display: -webkit-box;
max-width: 38ch;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.error-full {
margin-top: 0.5rem;
max-width: 100%;
overflow-x: auto;
font-size: 0.75rem;
white-space: pre-wrap;
word-break: break-word;
}
@media (min-width: 769px) {
.quest-form .form-section > summary ~ * {
display: block;
}
}
@media (max-width: 1024px) {
.quest-flow-layout {
grid-template-columns: 1fr;
}
.quest-flow-sidebar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 25;
max-height: 55vh;
margin: 0;
border-radius: 16px 16px 0 0;
box-shadow: var(--shadow-lg);
transform: translateY(calc(100% - 58px));
transition: transform var(--transition);
}
.quest-flow-sidebar.is-expanded {
transform: translateY(0);
}
.quest-flow-sidebar__toggle {
display: inline-flex;
}
.quest-flow-qr-list {
max-height: none;
}
.quest-flow-mobile-toolbar {
position: fixed;
left: 0.75rem;
right: 0.75rem;
bottom: max(0.75rem, var(--sab));
z-index: 24;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
}
}
@media (max-width: 768px) {
.quest-flow-canvas {
min-height: 400px;
padding-bottom: 5rem;
}
.quest-flow-stage-viewport {
min-height: 400px;
}
.quest-form__submit {
position: sticky;
bottom: 0;
z-index: 10;
margin-inline: calc(-1 * var(--space-5));
padding: 0.75rem var(--space-5) max(0.75rem, var(--sab));
border-top: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-primary), black 6%);
}
.incident-filter-bar {
position: sticky;
top: 0;
z-index: 10;
padding: 0.5rem 0;
background: color-mix(in srgb, var(--bg-primary), black 6%);
border-bottom: 1px solid var(--border);
}
.incident-table tbody tr {
border-left: 4px solid transparent;
}
.incident-filter-bar .btn {
min-height: 44px;
}
.incident-table .incident-row--critical {
border-left-color: var(--danger);
}
.incident-table .incident-row--high {
border-left-color: var(--warning);
}
.incident-table .incident-row--medium {
border-left-color: var(--info);
}
.incident-actions {
flex-direction: column;
gap: 0.5rem;
}
.incident-actions .btn {
width: 100%;
min-height: 48px;
}
.incident-details-text {
max-width: none;
-webkit-line-clamp: initial;
overflow: visible;
}
.registration-faction-form {
width: 100%;
}
.registration-faction-form .form-select {
flex: 1;
min-width: 0;
}
.registration-card-actions .btn,
.registration-promote-card .btn {
width: 100%;
min-height: 48px;
}
.invite-url-code {
max-width: calc(100vw - 7rem);
font-size: 0.8rem;
}
.shadow-assignment-table .shadow-datetime {
color: var(--text-muted);
white-space: normal;
font-size: 0.85rem;
}
.scoreboard-filter-form {
gap: 0.75rem;
}
.scoreboard-table thead th {
position: sticky;
top: 0;
z-index: 5;
}
.webhook-actions {
display: grid;
grid-template-columns: 1fr 1fr;
}
.webhook-actions .btn {
width: 100%;
min-height: 44px;
}
.webhook-actions .btn-danger {
grid-column: 1 / -1;
}
}
@media (max-width: 480px) {
.scoreboard-filter-form {
flex-direction: column;
align-items: stretch;
}
.scoreboard-filter-select {
min-width: 0;
width: 100%;
}
}
.operator-provenance-strip {
margin: 1rem 0 1.5rem;
border: 1px solid color-mix(in srgb, var(--border-soft), var(--tone-info, #5a88ff) 24%);
background:
linear-gradient(135deg, color-mix(in srgb, var(--bg-card), var(--tone-info, #5a88ff) 7%), var(--bg-card)),
linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}
.operator-provenance-strip__head {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: flex-start;
}
.operator-provenance-strip__eyebrow {
margin: 0 0 0.35rem;
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-secondary);
}
.operator-provenance-strip__title {
margin: 0;
font-size: clamp(1.05rem, 2vw, 1.3rem);
}
.operator-provenance-strip__summary {
margin: 0.4rem 0 0;
max-width: 56rem;
}
.operator-provenance-strip__facts,
.operator-provenance-strip__receipts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: 0.85rem;
margin-top: 1rem;
}
.operator-provenance-strip__fact,
.operator-provenance-strip__receipt {
padding: 0.85rem 0.95rem;
border-radius: 0.95rem;
border: 1px solid color-mix(in srgb, var(--border-soft), transparent 18%);
background: color-mix(in srgb, var(--bg-card), white 10%);
}
.operator-provenance-strip__receipt {
display: grid;
gap: 0.2rem;
color: inherit;
text-decoration: none;
transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.operator-provenance-strip__receipt:hover,
.operator-provenance-strip__receipt:focus-visible {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--tone-info, #5a88ff), var(--border-soft) 30%);
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}
.operator-provenance-strip__label {
font-size: 0.78rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-secondary);
}
.operator-provenance-strip__value {
display: block;
font-size: 0.96rem;
line-height: 1.4;
color: var(--text-primary);
}
body[data-app-surface="workflow-editor"] .operator-provenance-strip {
margin: 0 1rem 1rem;
}
@media (max-width: 720px) {
.operator-provenance-strip__head {
flex-direction: column;
align-items: stretch;
}
.operator-provenance-strip__facts,
.operator-provenance-strip__receipts {
grid-template-columns: 1fr;
}
}
.workflows-onboarding-card,
.workflows-onboarding-card__intro,
.workflows-onboarding-card__actions,
.workflows-onboarding-grid {
display: grid;
gap: 0.9rem;
}
.workflows-onboarding-card__intro {
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
}
.workflows-onboarding-card__actions {
grid-auto-flow: column;
align-items: center;
}
.workflows-onboarding-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.workflows-onboarding-panel {
min-height: 100%;
}
@media (max-width: 1023px) {
.workflows-onboarding-card__intro,
.workflows-onboarding-grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 767px) {
.workflows-onboarding-card__actions {
grid-auto-flow: row;
}
}
.surface-state {
--surface-state-accent: var(--accent-primary, #5db3ff);
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 1rem;
align-items: start;
padding: 1rem 1.1rem;
border-radius: 1rem;
border: 1px solid color-mix(in srgb, var(--surface-state-accent), transparent 68%);
background:
linear-gradient(
135deg,
color-mix(in srgb, var(--surface-state-accent), white 92%) 0%,
color-mix(in srgb, var(--surface-state-accent), transparent 96%) 100%
);
box-shadow: 0 16px 40px color-mix(in srgb, var(--surface-state-accent), transparent 90%);
}
.surface-state--info {
--surface-state-accent: var(--accent-primary, #5db3ff);
}
.surface-state--success {
--surface-state-accent: var(--success, #33c37d);
}
.surface-state--warning {
--surface-state-accent: var(--warning, #f5b942);
}
.surface-state--danger {
--surface-state-accent: var(--danger, #ef5b6c);
}
.surface-state__icon {
width: 3rem;
min-width: 3rem;
height: 3rem;
border-radius: 999px;
display: grid;
place-items: center;
font-size: 1.2rem;
font-weight: 700;
background: color-mix(in srgb, var(--surface-state-accent), white 86%);
color: color-mix(in srgb, var(--surface-state-accent), black 8%);
}
.surface-state__body {
min-width: 0;
display: grid;
gap: 0.45rem;
}
.surface-state__eyebrow {
margin: 0;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: color-mix(in srgb, var(--surface-state-accent), black 18%);
}
.surface-state__title {
margin: 0;
font-size: 1.05rem;
line-height: 1.3;
}
.surface-state__description,
.surface-state__answer {
margin: 0;
color: var(--text-secondary);
}
.surface-state__answers {
display: grid;
gap: 0.3rem;
}
.surface-state__answer strong {
color: var(--text-primary);
}
.surface-state__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 0.2rem;
}
.surface-state--compact {
padding: 0.85rem 0.95rem;
gap: 0.85rem;
border-radius: 0.9rem;
}
.surface-state--compact .surface-state__icon {
width: 2.55rem;
min-width: 2.55rem;
height: 2.55rem;
font-size: 1.05rem;
}
.surface-state--compact .surface-state__title {
font-size: 0.98rem;
}
.surface-state--family-loading .surface-state__icon {
animation: surface-state-pulse 1.3s ease-in-out infinite;
}
@keyframes surface-state-pulse {
0%,
100% {
transform: scale(1);
opacity: 0.88;
}
50% {
transform: scale(1.06);
opacity: 1;
}
}
@media (max-width: 640px) {
.surface-state {
grid-template-columns: 1fr;
}
.surface-state__icon {
width: 2.75rem;
min-width: 2.75rem;
height: 2.75rem;
}
}
.gm-mobile-tabs {
display: none;
}
body.gm-more-open,
body.quick-jump-open,
body.wm-sheet-open {
overflow: hidden;
}
.participant-context-links {
display: none;
}
.mobile-context-bar {
display: none;
}
.quick-jump {
display: none;
}
.quick-jump[aria-hidden="false"] {
display: block;
}
.quick-jump-backdrop {
position: fixed;
inset: 0;
background: rgba(4, 8, 17, 0.66);
z-index: 120;
}
.quick-jump-panel {
position: fixed;
inset: 0;
z-index: 121;
background: color-mix(in srgb, var(--bg-card), black 6%);
display: flex;
flex-direction: column;
}
.quick-jump-header {
display: flex;
align-items: center;
gap: 0.5rem;
padding: calc(0.55rem + var(--sat)) calc(0.7rem + var(--sar)) 0.55rem calc(0.7rem + var(--sal));
border-bottom: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-elevated), black 4%);
}
.quick-jump-icon {
font-size: 1.05rem;
color: var(--text-secondary);
}
.quick-jump-input {
flex: 1;
min-height: 44px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-card), black 10%);
color: var(--text-primary);
padding: 0.5rem 0.65rem;
font-size: 1rem;
}
.quick-jump-cancel {
min-height: 44px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-elevated), black 6%);
color: var(--text-secondary);
padding: 0 0.7rem;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
}
.quick-jump-results {
overflow-y: auto;
padding: 0.35rem 0;
}
.quick-jump-group {
padding: 0.4rem 0.8rem;
color: var(--text-muted);
font-size: 0.7rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.quick-jump-item {
display: grid;
grid-template-columns: 1.35rem minmax(0, 1fr) auto;
align-items: center;
gap: 0.55rem;
min-height: 52px;
padding: 0.55rem 0.8rem;
color: var(--text-primary);
border-top: 1px solid color-mix(in srgb, var(--border), transparent 40%);
}
.quick-jump-item:hover {
background: color-mix(in srgb, var(--accent-primary), transparent 88%);
}
.quick-jump-item-icon {
font-size: 1rem;
}
.quick-jump-item-label {
font-size: 0.88rem;
font-weight: 600;
}
.quick-jump-item-meta {
color: var(--text-muted);
font-size: 0.72rem;
font-family: var(--font-mono);
}
.quick-jump-empty {
margin: 0.7rem 0.8rem;
padding: 0.7rem;
border: 1px dashed var(--border);
border-radius: var(--radius-sm);
color: var(--text-secondary);
text-align: center;
}
.table-actions-mobile {
gap: 0.4rem;
}
.table-actions-more {
min-height: 44px;
min-width: 44px;
padding-inline: 0.8rem;
font-size: 1.1rem;
line-height: 1;
}
@media (max-width: 1180px), (max-height: 840px) and (max-width: 1440px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
body[data-app-role="gm"] .container.page {
padding-bottom: calc(5.4rem + var(--sab));
}
.gm-nav-mobile-bar,
.gm-nav-mobile-menu {
display: none !important;
}
.gm-mobile-tabs {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 95;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.2rem;
padding: 0.25rem calc(0.35rem + var(--sar)) calc(0.25rem + var(--sab)) calc(0.35rem + var(--sal));
border-top: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-card), black 8%);
backdrop-filter: blur(10px);
}
.gm-mobile-tab {
min-height: 52px;
border-radius: var(--radius-sm);
border: 1px solid color-mix(in srgb, var(--border), transparent 22%);
background: color-mix(in srgb, var(--bg-elevated), black 3%);
color: var(--text-secondary);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.18rem;
text-decoration: none;
font-size: 0.66rem;
font-weight: 650;
cursor: pointer;
}
.gm-mobile-tab-icon {
font-size: 1rem;
line-height: 1;
}
.gm-mobile-tab-label {
line-height: 1.15;
}
.gm-mobile-tab-active {
color: var(--text-primary);
border-color: color-mix(in srgb, var(--accent-primary), transparent 35%);
background: color-mix(in srgb, var(--accent-primary), transparent 85%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary), transparent 55%);
}
.gm-mobile-more-backdrop {
--sheet-backdrop: rgba(3, 7, 15, 0.72);
}
.gm-mobile-more-sheet {
background: color-mix(in srgb, var(--bg-card), black 8%);
--sheet-max-height: 70vh;
}
.gm-mobile-more-head {
padding-bottom: 0;
}
.gm-mobile-more-body {
padding-top: 0.35rem;
}
.gm-mobile-more-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.45rem;
}
.gm-mobile-more-link {
min-height: 56px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-elevated), black 4%);
color: var(--text-primary);
text-decoration: none;
display: grid;
grid-template-columns: 1.2rem minmax(0, 1fr);
align-items: center;
gap: 0.55rem;
padding: 0.5rem 0.6rem;
}
.gm-mobile-more-link.is-active {
border-color: color-mix(in srgb, var(--accent-primary), transparent 45%);
background: color-mix(in srgb, var(--accent-primary), transparent 86%);
}
.gm-mobile-more-icon {
font-size: 1rem;
}
.gm-mobile-more-copy {
display: grid;
gap: 0.08rem;
}
.gm-mobile-more-title {
font-size: 0.82rem;
font-weight: 640;
}
.gm-mobile-more-meta {
color: var(--text-muted);
font-size: 0.66rem;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.gm-mobile-more-link.is-inactive {
opacity: 0.62;
}
.gm-mobile-more-extra-toggle {
grid-column: 1 / -1;
min-height: 44px;
border: 1px dashed color-mix(in srgb, var(--border), transparent 12%);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-elevated), black 5%);
color: var(--text-secondary);
font-size: 0.78rem;
font-weight: 630;
text-align: left;
padding: 0.4rem 0.6rem;
}
.gm-mobile-more-extra {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.45rem;
}
.gm-mobile-more-extra[hidden] {
display: none !important;
}
.gm-mobile-fab {
display: block;
right: 0.85rem;
bottom: calc(4.6rem + var(--sab));
}
.mobile-context-bar {
position: sticky;
top: 0;
z-index: 32;
margin: 0 0 var(--space-3);
padding: 0.32rem 0.45rem;
border: 1px solid color-mix(in srgb, var(--border), transparent 20%);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-elevated), black 5%);
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.35rem;
}
.mobile-context-back {
min-height: 36px;
display: inline-flex;
align-items: center;
gap: 0.36rem;
color: var(--text-primary);
text-decoration: none;
font-size: 0.82rem;
font-weight: 620;
}
.mobile-context-arrow {
font-size: 1rem;
color: var(--accent-primary);
}
.mobile-context-siblings {
display: inline-flex;
align-items: center;
gap: 0.28rem;
}
.mobile-context-sibling {
width: 34px;
height: 34px;
border: 1px solid var(--border);
border-radius: var(--radius-xs);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
text-decoration: none;
font-size: 1rem;
}
.mobile-context-index {
color: var(--text-muted);
font-size: 0.72rem;
min-width: 44px;
text-align: center;
}
.table-actions-mobile > * {
display: none;
}
.table-actions-mobile > :first-child,
.table-actions-mobile > .table-actions-more {
display: inline-flex;
}
}
@media (max-width: 767px) {
.participant-context-links {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.35rem;
margin: 0.4rem 0 0.75rem;
}
.participant-context-link {
min-height: 44px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-elevated), black 6%);
color: var(--text-secondary);
text-decoration: none;
padding: 0.35rem 0.4rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
font-size: 0.73rem;
font-weight: 620;
text-align: center;
position: relative;
}
.participant-context-link.is-active {
color: var(--text-primary);
border-color: color-mix(in srgb, var(--accent-primary), transparent 45%);
background: color-mix(in srgb, var(--accent-primary), transparent 88%);
}
.participant-context-link-icon {
font-size: 0.9rem;
}
.participant-context-link-badge {
position: absolute;
top: 3px;
right: 3px;
min-width: 16px;
height: 16px;
border-radius: 999px;
background: var(--danger);
color: #fff;
font-size: 0.63rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 0.2rem;
}
.disclosure-tier-primary {
border-color: color-mix(in srgb, var(--accent-primary), transparent 52%);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary), transparent 72%);
}
.pd-toggle,
.pd-show-more {
min-height: 44px;
}
.pd-toggle {
margin-bottom: 0.55rem;
border: 1px dashed var(--border);
border-radius: var(--radius-xs);
background: color-mix(in srgb, var(--bg-elevated), black 5%);
color: var(--text-secondary);
font-size: 0.79rem;
font-weight: 610;
padding: 0.35rem 0.6rem;
cursor: pointer;
}
.pd-section-collapsed > :not(.section-title):not(h2):not(h3):not(h4):not(.pd-toggle) {
display: none;
}
.pd-section-collapsed.pd-section-expanded > :not(.section-title):not(h2):not(h3):not(h4) {
display: block;
}
.pd-section-collapsed.pd-section-expanded > .table-wrapper,
.pd-section-collapsed.pd-section-expanded > .stats-grid,
.pd-section-collapsed.pd-section-expanded > .participant-actions-grid,
.pd-section-collapsed.pd-section-expanded > .participant-detail-grid-two {
display: grid;
}
.pd-show-more {
width: 100%;
margin: -0.2rem 0 0.5rem;
}
.pd-tertiary-hidden {
display: none !important;
}
.pulse-home-links.pd-tertiary-hidden {
display: block !important;
}
}
@media (min-width: 1181px) and (min-height: 841px), (hover: hover) and (pointer: fine) and (min-width: 1024px) {
.gm-mobile-tabs,
.gm-mobile-more-sheet-root,
.mobile-context-bar,
.participant-context-links,
.quick-jump {
display: none !important;
}
}
.gm-mobile-fab-item {
min-height: 44px;
display: flex;
align-items: center;
}
@media (max-width: 1180px), (max-height: 840px) and (max-width: 1440px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
.dashboard-nav {
padding: 0.6rem;
}
body[data-app-role="gm"] .btn-sm {
min-height: 44px;
padding-inline: 0.75rem;
font-size: 0.875rem;
}
body[data-app-role="gm"] .settings-tab {
min-height: 44px;
padding: 0.5rem 0.75rem;
}
body[data-app-role="gm"] .form-select,
body[data-app-role="gm"] .form-input {
min-height: 44px;
}
.gm-nav-mobile-bar {
display: flex;
}
.gm-nav-mobile-menu[hidden] {
display: none !important;
}
.gm-nav-mobile-menu:not([hidden]) {
display: block;
}
.gm-nav-groups {
display: none;
}
.gm-nav-footer {
display: none;
}
}
@media (max-width: 768px) {
.btn-sm {
min-height: 44px;
padding-inline: 0.75rem;
}
.form-input,
.form-textarea,
select.form-input {
min-height: 44px;
}
.badge,
.badge-outline,
.status-badge {
min-height: 28px;
padding: 0.2rem 0.55rem;
}
.desktop-only {
display: none !important;
}
.mobile-only {
display: inline !important;
}
.container {
padding: 0 var(--space-3);
}
.page {
padding: var(--space-4) 0;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.dashboard-header {
gap: 0.75rem;
padding: 0.8rem 0.75rem 0.7rem;
}
.action-bar,
.filter-bar {
gap: 0.35rem;
}
.action-bar .btn,
.filter-bar .btn {
flex: 1 1 138px;
}
.sticky-actions-mobile {
position: sticky;
bottom: 0;
z-index: 15;
background: color-mix(in srgb, var(--bg-primary), black 8%);
border-top: 1px solid var(--border);
margin-inline: calc(-1 * var(--space-3));
padding: 0.55rem var(--space-3);
}
.table-responsive-cards thead {
display: none;
}
.table-responsive-cards tbody,
.table-responsive-cards tr,
.table-responsive-cards td {
display: block;
width: 100%;
}
.table-responsive-cards tbody tr {
border-bottom: 1px solid var(--border);
padding: 0.55rem;
background: color-mix(in srgb, var(--bg-card), black 4%);
}
.table-responsive-cards tbody tr:last-child {
border-bottom: 0;
}
.table-responsive-cards td {
border: 0;
padding: 0.4rem 0.2rem;
}
.table-responsive-cards td::before {
content: attr(data-label);
display: block;
font-size: 0.68rem;
color: var(--text-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 0.2rem;
}
.qr-layout-grid,
.volunteer-incident-grid {
grid-template-columns: 1fr;
}
.volunteer-tab-nav {
display: grid;
grid-template-columns: 1fr;
}
.volunteer-tab-link {
width: 100%;
}
.volunteer-scan-video {
min-height: 220px;
}
.volunteer-shift-shell .volunteer-shift-actions .btn {
flex: 1 1 120px;
}
.qr-grid-two,
.qr-grid-three,
.qr-toolbar-grid,
.qr-summary-facts {
grid-template-columns: 1fr;
}
.qr-summary-hero {
padding: 0.85rem;
}
.qr-summary-hero-head,
.qr-summary-section-head {
align-items: stretch;
}
.qr-summary-badges {
justify-content: flex-start;
}
.settings-color-grid {
grid-template-columns: 1fr;
}
.qr-toolbar-top {
grid-template-columns: 1fr;
}
.qr-status-tabs {
justify-content: flex-start;
}
.qr-toolbar-main {
align-items: stretch;
}
.qr-more-panel {
right: auto;
left: 0;
min-width: 100%;
}
.qr-bulk-context {
align-items: stretch;
}
.qr-bulk-context .action-bar .btn {
flex: 1 1 140px;
}
.qr-preset-input,
.qr-preset-select,
.volunteer-feed-filter {
max-width: 100%;
min-width: 0;
}
.qr-actions-menu {
margin-left: 0;
}
.qr-actions-summary {
width: 46px;
min-width: 46px;
padding-inline: 0;
}
.qr-actions-filter {
display: none;
}
.qr-actions-panel {
right: auto;
left: 0;
min-width: 100%;
}
.qr-controls {
align-items: flex-start;
}
.qr-menu-columns {
grid-template-columns: 1fr;
}
#qr-table td[data-col="preview"],
#qr-table td[data-col="profile"],
#qr-table td[data-col="quest"],
#qr-table td[data-col="expiry"],
#qr-table td[data-col="batch"] {
display: none !important;
}
#qr-table td[data-col="actions"] .table-actions {
justify-content: flex-start;
}
#qr-table td[data-col="actions"] .table-actions > * {
min-height: 44px;
min-width: 44px;
}
#qr-table td[data-col="actions"] .qr-row-more {
display: block;
}
#qr-table td[data-col="actions"] .qr-row-menu-panel {
position: static;
box-shadow: none;
border: 0;
padding: 0.2rem 0 0;
background: transparent;
}
#qr-table.table-responsive-cards tbody tr {
position: relative;
display: grid;
gap: 0;
padding: 0;
margin-bottom: 0.75rem;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg-card), black 3%);
overflow: hidden;
}
#qr-table.table-responsive-cards td[data-label="Select"] {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: auto;
padding: 0;
z-index: 1;
background: transparent;
}
#qr-table.table-responsive-cards td[data-label="Select"]::before,
#qr-table.table-responsive-cards td[data-label="Actions"]::before,
#qr-table.table-responsive-cards td[data-label="QR"]::before {
display: none;
}
#qr-table.table-responsive-cards td[data-label="QR"] {
padding: 0.85rem 0.85rem 0.65rem;
border-bottom: 1px solid var(--border);
}
#qr-table.table-responsive-cards td[data-label="Status"],
#qr-table.table-responsive-cards td[data-label="Scans"],
#qr-table.table-responsive-cards td[data-label="Preview"] {
padding: 0.55rem 0.85rem;
}
#qr-table.table-responsive-cards td[data-label="Actions"] {
padding: 0.65rem 0.85rem 0.85rem;
border-top: 1px solid var(--border);
}
#qr-table.table-responsive-cards td[data-col="preview"] {
display: block !important;
}
#qr-table.table-responsive-cards .qr-table-qr-cell {
display: grid;
gap: 0.35rem;
padding-right: 4.4rem;
}
#qr-table.table-responsive-cards .qr-card-heading {
display: grid;
gap: 0.35rem;
}
#qr-table.table-responsive-cards .qr-card-location {
font-size: 1rem;
line-height: 1.25;
}
#qr-table.table-responsive-cards .qr-card-code {
font-size: 0.88rem;
}
#qr-table.table-responsive-cards .qr-card-status-cell,
#qr-table.table-responsive-cards .qr-card-scan-cell {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
#qr-table.table-responsive-cards .qr-card-scan-cell strong {
font-size: 0.95rem;
}
#qr-table.table-responsive-cards .qr-mini-preview-link {
justify-items: start;
}
#qr-table.table-responsive-cards .qr-row-menu > summary {
width: 100%;
}
.qr-analytics-grid {
grid-template-columns: 1fr;
}
.quest-wizard-steps {
grid-template-columns: 1fr 1fr;
}
.quest-builder-toolbar {
grid-template-columns: 1fr;
align-items: stretch;
}
.quest-builder-grid,
.quest-prereq-grid {
grid-template-columns: 1fr;
}
.quest-builder-row-grid {
grid-template-columns: 1fr;
}
.token-filter-grid,
.token-ledger-grid,
.token-adjust-grid {
grid-template-columns: 1fr;
}
.token-pagination {
gap: 0.65rem;
flex-direction: column;
align-items: flex-start;
}
.qr-type-template-row {
grid-template-columns: 1fr;
}
.qr-geofence-map {
min-height: 230px;
}
.qr-analytics-bar {
min-width: 80px;
}
.staff-create-grid,
.staff-edit-grid {
grid-template-columns: 1fr;
gap: 0.65rem;
}
.staff-action-row {
gap: 0.45rem;
}
.staff-action-row .btn {
flex: 1 1 140px;
min-height: 40px;
}
.staff-user-head {
align-items: flex-start;
flex-direction: column;
}
.staff-user-meta {
flex-direction: column;
gap: 0.25rem;
}
.staff-audit-filters {
grid-template-columns: 1fr;
}
h1 {
font-size: 1.5rem;
}
.page-actions .btn {
min-height: 40px;
}
.collapsible-card > summary {
padding: 0.85rem 0.9rem;
}
.collapsible-body {
padding: 0.85rem;
}
.question-display-header {
flex-direction: column;
}
}
@media (max-width: 520px) {
.stats-grid {
grid-template-columns: 1fr;
}
.gm-nav-mobile-trigger {
font-size: 0.76rem;
min-height: 38px;
padding: 0.4rem 0.6rem;
}
.scan-action-shell {
padding-inline: 0.5rem;
}
.scan-action-bar {
padding: 0.45rem;
gap: 0.4rem;
}
.scan-action-header {
align-items: flex-start;
}
.scan-action-heading {
font-size: 0.74rem;
}
.scan-action-toggle,
.scan-action-dismiss {
min-height: 30px;
padding: 0.25rem 0.45rem;
font-size: 0.74rem;
}
.scan-action-shell.is-collapsed .scan-action-details,
.scan-action-shell.is-collapsed .scan-action-secondary,
.scan-action-shell.is-collapsed .scan-share-btn {
display: none;
}
.scan-action-secondary {
grid-template-columns: 1fr;
}
.qr-col-toggle {
width: 32px;
height: 32px;
}
.quest-wizard-steps {
grid-template-columns: 1fr;
}
.dashboard-header {
padding: 0.75rem;
}
.qr-geofence-map {
min-height: 200px;
}
.card {
padding: 0.82rem;
}
.staff-user-card > summary {
padding: 0.75rem 0.8rem;
}
.staff-audit-details code {
max-width: 100%;
font-size: 0.7rem;
}
th,
td {
padding: 0.46rem 0.52rem;
font-size: 0.82rem;
}
.player-nav {
padding: 0.45rem;
gap: 0.4rem;
}
.player-nav-link {
min-height: 38px;
font-size: 0.8rem;
padding: 0.45rem 0.5rem;
}
.page-mobile .player-nav-link {
min-height: 44px;
font-size: 0.875rem;
}
.profile-tab-nav {
grid-template-columns: 1fr;
}
.profile-quick-stats {
grid-template-columns: 1fr;
}
.profile-quest-summary {
grid-template-columns: 1fr;
}
.profile-quest-summary-meta {
justify-items: start;
}
.profile-quest-summary-actions .btn {
flex: 1 1 140px;
}
.quest-discovery-search-card {
position: static;
top: auto;
}
.quest-card-header {
flex-direction: column;
align-items: flex-start;
}
.quest-card-reward {
white-space: normal;
}
.quest-card-actions .btn {
flex: 1 1 130px;
}
.profile-inventory-grid {
grid-template-columns: 1fr;
}
.profile-connection-head {
grid-template-columns: 1fr;
align-items: flex-start;
}
.profile-inventory-subtab {
flex: 1 1 140px;
}
.leaderboard-tab-row .btn {
flex: 1 1 140px;
}
.profile-journey-row {
flex-direction: column;
align-items: flex-start;
}
.profile-identity-nickname-wrap {
margin-left: 0;
}
.faction-standing-meta,
.faction-message-item header,
.faction-member-row {
flex-direction: column;
align-items: flex-start;
}
.scrollable-tab-nav {
flex-wrap: nowrap;
padding-bottom: 0.25rem;
scroll-snap-type: x mandatory;
}
.scrollable-tab-nav > .btn,
.scrollable-tab-nav > a {
flex: 0 0 auto;
white-space: nowrap;
min-height: 44px;
scroll-snap-align: start;
}
.mobile-collapsible-filters {
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 0;
}
.mobile-collapsible-filters > summary {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 48px;
padding: 0 1rem;
font-weight: 620;
cursor: pointer;
list-style: none;
}
.mobile-collapsible-filters > summary::-webkit-details-marker {
display: none;
}
.mobile-collapsible-filters > .mobile-collapsible-filters-body {
padding: 0.75rem 1rem 1rem;
border-top: 1px solid var(--border);
}
}
.scrollable-tab-nav {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
@media (min-width: 769px) {
.mobile-collapsible-filters > summary {
display: none;
}
.mobile-collapsible-filters > .mobile-collapsible-filters-body {
display: block !important;
}
}
@media (max-width: 1023px) {
.submissions-filter-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.submissions-filter-actions {
grid-column: 1 / -1;
}
.submissions-bulk-actions {
justify-content: flex-start;
}
.participant-filter-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.participant-actions-grid,
.participant-detail-grid-two {
grid-template-columns: 1fr;
}
.participant-last-scan-grid {
grid-template-columns: 1fr;
align-items: flex-start;
}
}
@media (max-width: 768px) {
.map-legend {
max-width: calc(100% - 16px);
}
.map-poi-card .btn {
flex: 1 1 130px;
}
.submissions-filter-grid {
grid-template-columns: 1fr;
}
.quest-discovery-list-head {
flex-direction: column;
align-items: stretch;
}
.quest-view-toggle .btn {
flex: 1 1 140px;
}
.submissions-filter-actions .btn {
flex: 1 1 140px;
}
.submissions-bulk-actions {
width: 100%;
}
.submissions-bulk-actions .btn {
flex: 1 1 140px;
}
.submission-actions .btn {
flex: 1 1 120px;
}
.participant-filter-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.participant-filter-actions {
grid-column: 1 / -1;
}
.participant-filter-actions .btn {
flex: 1 1 140px;
}
.participant-detail-tab-link {
font-size: 0.78rem;
padding: 0 0.4rem;
}
.print-center-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 520px) {
.submissions-filter-grid {
grid-template-columns: 1fr;
}
.quest-card-body {
padding: 0.65rem 0.62rem;
}
.quest-card-actions .btn {
flex: 1 1 100%;
}
.submissions-bulk-actions .btn {
flex: 1 1 100%;
}
.participant-filter-grid {
grid-template-columns: 1fr;
}
.participant-feed-entry {
align-items: flex-start;
}
.participant-feed-entry .status-badge {
order: 3;
}
.participant-detail-tab-nav {
grid-template-columns: 1fr;
}
.participant-detail-tab-link {
justify-content: flex-start;
padding: 0 0.72rem;
}
.settings-card-grid {
grid-template-columns: 1fr;
}
.profile-connections-controls {
grid-template-columns: 1fr;
}
.profile-inventory-subtab {
flex: 1 1 100%;
justify-content: flex-start;
}
.profile-connections-sort-group {
width: 100%;
}
.profile-connections-sort-group .btn {
flex: 1 1 48%;
}
.settings-notification-row .profile-connections-controls {
grid-template-columns: 1fr;
}
.notification-tab {
flex: 1 1 calc(50% - 0.45rem);
justify-content: center;
}
}
:root {
--app-shell-sidebar-w: 0px;
--app-shell-nav-h: 0px;
--app-shell-edge-gap: 1rem;
}
.app-shell-main {
min-height: 100svh;
}
.app-shell-skip {
position: fixed;
top: 0.75rem;
left: 0.75rem;
z-index: 210;
transform: translateY(-140%);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--accent-primary), black 10%);
color: #fff;
padding: 0.65rem 0.85rem;
font-weight: 700;
box-shadow: var(--shadow-md);
}
.app-shell-skip:focus {
transform: translateY(0);
}
body:has([data-participant-shell]),
body:has([data-gm-shell]) {
--app-shell-nav-h: calc(4.75rem + var(--sab));
}
body:has([data-participant-shell]) .page-mobile {
padding-bottom: var(--app-shell-nav-h);
}
body:has([data-gm-shell]) .container.page {
padding-bottom: calc(var(--app-shell-nav-h) + var(--space-4));
}
.participant-shell,
.dashboard-nav[data-gm-shell] {
position: relative;
}
.participant-shell__sidebar,
.gm-shell-primary {
display: none;
}
.participant-shell__sidebar {
position: fixed;
inset: 1rem auto 1rem 1rem;
width: calc(var(--app-shell-sidebar-w) - (var(--app-shell-edge-gap) * 1.5));
max-height: calc(100svh - 2rem);
overflow: auto;
z-index: 78;
padding: 1rem;
border: 1px solid var(--border);
border-radius: calc(var(--radius-md) + 0.2rem);
background: var(--surface-shell);
box-shadow: var(--shadow-md);
scrollbar-width: thin;
}
.participant-shell__brand,
.participant-shell__status,
.participant-shell__links,
.participant-shell__utility {
display: grid;
gap: 0.75rem;
}
.participant-shell__brand {
padding-bottom: 0.9rem;
border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 15%);
}
.participant-shell__brand h2,
.participant-shell__brand p {
margin: 0;
}
.participant-shell__brand h2 {
font-family: var(--font-display);
letter-spacing: -0.02em;
}
.participant-shell__status {
padding-block: 0.95rem;
}
.participant-shell__status-chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.participant-shell__links {
align-content: start;
}
.participant-shell__link {
display: grid;
grid-template-columns: 1.2rem minmax(0, 1fr) auto;
align-items: center;
gap: 0.65rem;
min-height: 46px;
padding: 0.62rem 0.72rem;
border: 1px solid color-mix(in srgb, var(--border), transparent 18%);
border-radius: var(--radius-sm);
color: var(--text-secondary);
background: color-mix(in srgb, var(--surface-2), black 4%);
text-decoration: none;
font-weight: 620;
}
.participant-shell__link:hover,
.participant-shell__link.is-active,
.participant-shell__link[aria-current="page"] {
color: var(--text-primary);
border-color: var(--tone-lantern-border);
background: var(--tone-lantern-muted);
}
.participant-shell__link-icon {
font-size: 1rem;
line-height: 1;
}
.participant-shell__utility {
padding-top: 0.95rem;
border-top: 1px solid color-mix(in srgb, var(--border), transparent 15%);
}
.participant-shell__utility .participant-context-links {
display: grid;
gap: 0.5rem;
margin: 0;
}
.participant-context-link {
min-height: 44px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--surface-2), black 5%);
color: var(--text-secondary);
text-decoration: none;
padding: 0.45rem 0.6rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
font-size: 0.82rem;
font-weight: 620;
text-align: center;
}
.participant-context-link:hover,
.participant-context-link.is-active {
color: var(--text-primary);
border-color: var(--tone-lantern-border);
background: var(--tone-lantern-muted);
}
.gm-shell-primary {
gap: 0.5rem;
}
.gm-shell-primary__search {
display: grid;
grid-template-columns: 1rem minmax(0, 1fr);
gap: 0.55rem;
align-items: center;
min-height: 48px;
padding: 0.65rem 0.7rem;
border: 1px solid var(--tone-lantern-border);
border-radius: var(--radius-sm);
background: var(--tone-lantern-muted);
color: var(--text-primary);
text-align: left;
cursor: pointer;
box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff, transparent 92%);
}
.gm-shell-primary__search:hover {
background: color-mix(in srgb, var(--tone-lantern), transparent 84%);
border-color: color-mix(in srgb, var(--tone-lantern), transparent 34%);
}
.gm-shell-primary__search-icon {
font-size: 0.95rem;
line-height: 1;
}
.gm-shell-primary__search-copy {
display: grid;
gap: 0.12rem;
}
.gm-shell-primary__search-copy strong {
font-size: 0.79rem;
line-height: 1.2;
}
.gm-shell-primary__search-copy span {
font-size: 0.72rem;
color: var(--text-muted);
}
.gm-shell-primary__link {
display: grid;
grid-template-columns: 1rem minmax(0, 1fr);
gap: 0.5rem;
align-items: center;
min-height: 44px;
padding: 0.55rem 0.65rem;
border: 1px solid color-mix(in srgb, var(--border), transparent 18%);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--surface-2), black 3%);
color: var(--text-secondary);
text-decoration: none;
font-size: 0.8rem;
font-weight: 640;
}
.gm-shell-primary__link:hover,
.gm-shell-primary__link.is-active,
.gm-shell-primary__link[aria-current="page"] {
color: var(--text-primary);
border-color: var(--tone-lantern-border);
background: var(--tone-lantern-muted);
}
@media (min-width: 1024px) and ((hover: hover) or (pointer: fine)) {
body:has([data-participant-shell]) {
--app-shell-sidebar-w: 18.5rem;
--app-shell-nav-h: 0px;
}
body:has([data-gm-shell]) {
--app-shell-sidebar-w: 19.5rem;
--app-shell-nav-h: 0px;
}
body:has([data-participant-shell]) .participant-nav,
body:has([data-gm-shell]) .gm-mobile-tabs,
body:has([data-gm-shell]) .gm-mobile-fab {
display: none !important;
}
body:has([data-participant-shell]) .participant-shell__sidebar {
display: grid;
}
body:has([data-participant-shell]) .page-mobile {
max-width: min(1100px, calc(100vw - var(--app-shell-sidebar-w) - 3rem));
margin-left: calc(var(--app-shell-sidebar-w) + 1rem);
margin-right: 1rem;
padding-bottom: 1.25rem;
}
body:has([data-participant-shell]) .participant-shell__utility .participant-context-links {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body:has([data-gm-shell]) .container.page {
max-width: none;
padding-left: calc(var(--app-shell-sidebar-w) + 1rem);
padding-right: 1rem;
padding-bottom: var(--space-6);
}
body:has([data-gm-shell]) .dashboard-header {
grid-template-columns: minmax(0, 1fr);
}
body:has([data-gm-shell]) .dashboard-nav {
position: fixed;
inset: 1rem auto 1rem 1rem;
width: calc(var(--app-shell-sidebar-w) - (var(--app-shell-edge-gap) * 1.5));
max-height: calc(100svh - 2rem);
overflow: auto;
z-index: 78;
scrollbar-width: thin;
}
body:has([data-gm-shell]) .gm-shell-primary {
display: grid;
}
body:has([data-gm-shell]) .gm-mobile-more-sheet-root {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 1023.98px) {
body:has([data-participant-shell]) {
--app-shell-nav-h: calc(4.75rem + var(--sab));
}
body:has([data-participant-shell]) .participant-nav {
display: grid !important;
}
body:has([data-participant-shell]) .page-mobile {
padding-bottom: var(--app-shell-nav-h) !important;
}
}
body[data-app-role="gm"][data-gm-shell-mode="desktop"] {
--app-shell-sidebar-w: 19.5rem;
--app-shell-nav-h: 0px;
}
body[data-app-role="gm"][data-gm-shell-mode="desktop"] .container.page {
max-width: none;
padding-left: calc(var(--app-shell-sidebar-w) + 1rem);
padding-right: 1rem;
padding-bottom: var(--space-6);
}
body[data-app-role="gm"][data-gm-shell-mode="desktop"] .dashboard-header {
grid-template-columns: minmax(0, 1fr);
}
body[data-app-role="gm"][data-gm-shell-mode="desktop"] .dashboard-nav[data-gm-shell] {
position: fixed;
inset: 1rem auto 1rem 1rem;
width: calc(var(--app-shell-sidebar-w) - (var(--app-shell-edge-gap) * 1.5));
max-height: calc(100svh - 2rem);
overflow: auto;
z-index: 78;
padding: var(--space-3);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface-shell);
box-shadow: var(--shadow-sm);
scrollbar-width: thin;
}
body[data-app-role="gm"][data-gm-shell-mode="desktop"] .gm-shell-primary,
body[data-app-role="gm"][data-gm-shell-mode="desktop"] .gm-nav-groups {
display: grid !important;
}
body[data-app-role="gm"][data-gm-shell-mode="desktop"] .gm-nav-footer {
display: flex !important;
}
body[data-app-role="gm"][data-gm-shell-mode="desktop"] .gm-mobile-tabs,
body[data-app-role="gm"][data-gm-shell-mode="desktop"] .gm-mobile-fab,
body[data-app-role="gm"][data-gm-shell-mode="desktop"] .gm-mobile-more-sheet-root,
body[data-app-role="gm"][data-gm-shell-mode="desktop"] .gm-nav-mobile-bar,
body[data-app-role="gm"][data-gm-shell-mode="desktop"] .gm-nav-mobile-menu {
display: none !important;
}
body[data-app-role="gm"][data-gm-shell-mode="mobile"] {
--app-shell-sidebar-w: 0px;
--app-shell-nav-h: calc(4.75rem + var(--sab));
}
body[data-app-role="gm"][data-gm-shell-mode="mobile"] .container.page {
max-width: none;
padding-left: var(--space-4) !important;
padding-right: var(--space-4) !important;
padding-bottom: calc(var(--app-shell-nav-h) + var(--space-4));
}
body[data-app-role="gm"][data-gm-shell-mode="mobile"] .dashboard-nav[data-gm-shell] {
position: relative !important;
inset: auto !important;
width: auto !important;
max-height: none !important;
overflow: visible !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body[data-app-role="gm"][data-gm-shell-mode="mobile"] .gm-shell-primary,
body[data-app-role="gm"][data-gm-shell-mode="mobile"] .gm-nav-groups,
body[data-app-role="gm"][data-gm-shell-mode="mobile"] .gm-nav-footer,
body[data-app-role="gm"][data-gm-shell-mode="mobile"] .gm-nav-mobile-bar,
body[data-app-role="gm"][data-gm-shell-mode="mobile"] .gm-nav-mobile-menu {
display: none !important;
}
body[data-app-role="gm"][data-gm-shell-mode="mobile"] .gm-mobile-tabs {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 95;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.2rem;
padding: 0.25rem 0.35rem calc(0.25rem + var(--sab));
border-top: 1px solid var(--border);
background: color-mix(in srgb, var(--surface-shell), black 8%);
backdrop-filter: blur(10px);
}
body[data-app-role="gm"][data-gm-shell-mode="mobile"] .gm-mobile-tab {
min-height: 52px;
border-radius: var(--radius-sm);
border: 1px solid color-mix(in srgb, var(--border), transparent 22%);
background: color-mix(in srgb, var(--surface-2), black 3%);
color: var(--text-secondary);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.18rem;
text-decoration: none;
font-size: 0.66rem;
font-weight: 650;
cursor: pointer;
}
body[data-app-role="gm"][data-gm-shell-mode="mobile"] .gm-mobile-tab-icon {
font-size: 1rem;
line-height: 1;
}
body[data-app-role="gm"][data-gm-shell-mode="mobile"] .gm-mobile-tab-label {
line-height: 1.15;
}
body[data-app-role="gm"][data-gm-shell-mode="mobile"] .gm-mobile-tab-active {
color: var(--text-primary);
border-color: color-mix(in srgb, var(--accent-primary), transparent 35%);
background: color-mix(in srgb, var(--accent-primary), transparent 85%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary), transparent 55%);
}
body[data-app-role="gm"][data-gm-shell-mode="mobile"] .gm-mobile-more-backdrop {
--sheet-backdrop: rgba(3, 7, 15, 0.72);
}
body[data-app-role="gm"][data-gm-shell-mode="mobile"] .gm-mobile-more-sheet {
background: color-mix(in srgb, var(--bg-card), black 8%);
--sheet-max-height: 70vh;
}
body[data-app-role="gm"][data-gm-shell-mode="mobile"] .gm-mobile-more-head {
padding-bottom: 0;
}
body[data-app-role="gm"][data-gm-shell-mode="mobile"] .gm-mobile-more-body {
padding-top: 0.35rem;
}
body[data-app-role="gm"][data-gm-shell-mode="mobile"] .gm-mobile-more-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.45rem;
}
body[data-app-role="gm"][data-gm-shell-mode="mobile"] .gm-mobile-more-link {
min-height: 56px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-elevated), black 4%);
color: var(--text-primary);
text-decoration: none;
display: grid;
grid-template-columns: 1.2rem minmax(0, 1fr);
align-items: center;
gap: 0.55rem;
padding: 0.5rem 0.6rem;
}
body[data-app-role="gm"][data-gm-shell-mode="mobile"] .gm-mobile-more-link.is-active {
border-color: color-mix(in srgb, var(--accent-primary), transparent 45%);
background: color-mix(in srgb, var(--accent-primary), transparent 86%);
}
body[data-app-role="gm"][data-gm-shell-mode="mobile"] .gm-mobile-more-icon {
font-size: 1rem;
}
body[data-app-role="gm"][data-gm-shell-mode="mobile"] .gm-mobile-more-copy {
display: grid;
gap: 0.08rem;
}
body[data-app-role="gm"][data-gm-shell-mode="mobile"] .gm-mobile-more-title {
font-size: 0.82rem;
font-weight: 640;
}
body[data-app-role="gm"][data-gm-shell-mode="mobile"] .gm-mobile-more-meta {
color: var(--text-muted);
font-size: 0.66rem;
}
body[data-app-role="gm"][data-gm-shell-mode="mobile"] .gm-mobile-fab {
display: block !important;
}
/* ADR-0836: Scan result pages must never show the desktop sidebar.
The sidebar renders as a fixed panel on large viewports and causes layout artifacts
(offset content, placeholder brand copy) for all QR types when viewed on desktop.
Mobile bottom-tab nav (.participant-nav) is unaffected. */
body.scan-result-page .participant-shell__sidebar {
display: none !important;
}
@media (min-width: 1024px) and ((hover: hover) or (pointer: fine)) {
body.scan-result-page:has([data-participant-shell]) {
--app-shell-sidebar-w: 0px;
--app-shell-nav-h: 0px;
}
/* Desktop: unfix the scan "What's Next" action bar. The fixed/sticky bottom
bar is a mobile thumb-reach pattern; on wide viewports it either covers
the content column or floats awkwardly in the gutter. Let it flow inline
beneath the scan content instead. Also clear the body padding-bottom
that was reserving space for the floating bar. */
body.scan-result-page .scan-action-shell {
position: static;
padding: 0;
margin-top: 1rem;
}
body.scan-result-page.has-scan-action-bar {
padding-bottom: 0;
}
body.scan-result-page .scan-action-bar {
pointer-events: auto;
}
}