/* ════════════════════════════════════════════════════════════════ AURORA GLASS — design tokens Dark is the default; [data-theme="light"] overrides the same vars, so every existing page inherits the new palette automatically. ════════════════════════════════════════════════════════════════ */ :root { color-scheme: light; /* ---- Brand (raw) ---- */ --brand-coral: #FF6B5C; --brand-coral-strong: #D24A38; /* AA: white text on this ≥4.5:1 */ --brand-sky: #3B9EFF; --brand-sky-strong: #1668D6; /* AA: text on white ≥4.5:1 */ /* ---- Surfaces ---- */ --color-bg-primary: #FAFAFC; --color-bg-secondary: #FFFFFF; --color-bg-tertiary: #F1F3F8; --color-bg-sunken: #EEF1F7; --color-bg-inverse: #1F2433; --color-surface-overlay: rgba(20, 24, 38, 0.45); /* ---- Text ---- */ --color-text-primary: #1F2433; --color-text-secondary: #5A6275; --color-text-tertiary: #8A91A6; --color-text-inverse: #FFFFFF; --color-text-link: var(--brand-sky-strong); /* ---- Borders ---- */ --color-border-primary: #E2E6F0; --color-border-secondary: #EDEFF6; --color-border-strong: #CBD2E2; --color-border-focus: var(--brand-sky-strong); /* ---- Accent / actions ---- */ --color-accent-primary: var(--brand-coral); --color-accent-primary-hover: #FF8175; --color-accent-primary-active: #F25445; --color-accent-strong: var(--brand-coral-strong); --color-on-accent: #2A1714; /* dark ink on coral (~5.5:1) */ --color-accent-soft: #FFEDEA; --color-accent-soft-border: #FFD7D1; --color-accent-secondary: var(--brand-sky); --color-accent-secondary-strong: var(--brand-sky-strong); --color-accent-secondary-soft: #E7F1FF; --color-on-accent-secondary: #08203B; /* ---- Status ---- */ --color-status-success: #1E8E54; --color-status-success-soft: #E3F6EC; --color-status-warning: #B26A00; --color-status-warning-soft: #FFF1D6; --color-status-error: #D2362E; --color-status-error-soft: #FCE6E5; --color-status-info: var(--brand-sky-strong); --color-status-info-soft: #E7F1FF; /* ---- Domain: troop colors (light, text-safe) ---- */ --troop-archer: #1E78C8; --troop-footman: #1E8E54; --troop-cavalry: #B26A00; --troop-archer-soft: #E4F0FB; --troop-footman-soft: #E3F6EC; --troop-cavalry-soft: #FFF1D6; /* ---- Spacing (4px base) ---- */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; /* ---- Typography ---- */ /* Font fallback is per-character, so Latin text uses Nunito and only Han characters reach --font-cjk. The Noto faces are self-hosted subsets declared per-language in App.razor; the platform families after them catch anything outside the subset — user-typed member names and notes — so those degrade to the OS font, never to tofu. */ --font-cjk: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; --font-family-body: "Nunito Sans", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", var(--font-cjk); --font-family-display: "Nunito", "Nunito Sans", -apple-system, "Segoe UI", var(--font-cjk); --font-family-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-md: 1.125rem; --font-size-lg: 1.375rem; --font-size-xl: 1.75rem; --font-size-2xl: 2.25rem; --font-size-3xl: 3rem; --font-weight-normal: 400; --font-weight-medium: 600; --font-weight-semibold: 700; --font-weight-bold: 800; --line-height-tight: 1.2; --line-height-normal: 1.55; --line-height-relaxed: 1.7; --letter-spacing-tight: -0.01em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.04em; /* ---- Layout ---- */ --max-width-content: 72ch; --max-width-wide: 1100px; --max-width-page: 1320px; --size-touch-target: 2.75rem; --sidebar-width: 264px; --header-height: 64px; --bottombar-height: 64px; /* Consolidated radius scale: everything is 16px, large containers 24px, pills stay round. */ --border-radius-sm: 16px; --border-radius-md: 16px; --border-radius-lg: 16px; --border-radius-xl: 24px; --border-radius-full: 999px; /* ---- Shadows (soft, layered — no glass/blur) ---- */ --shadow-sm: 0 1px 2px rgba(28, 33, 51, 0.06), 0 1px 3px rgba(28, 33, 51, 0.05); --shadow-md: 0 2px 6px rgba(28, 33, 51, 0.07), 0 6px 16px -6px rgba(28, 33, 51, 0.10); --shadow-lg: 0 8px 24px -8px rgba(28, 33, 51, 0.14), 0 16px 48px -16px rgba(28, 33, 51, 0.16); --shadow-focus: 0 0 0 3px rgba(22, 104, 214, 0.35); /* ---- Motion ---- */ --duration-instant: 50ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --easing-default: cubic-bezier(0.4, 0, 0.2, 1); --easing-in: cubic-bezier(0.4, 0, 1, 1); --easing-out: cubic-bezier(0, 0, 0.2, 1); --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* ════════ LEGACY ALIASES — old names → new tokens (all 57 pages inherit) ════════ */ --bg: var(--color-bg-primary); --bg2: var(--color-bg-secondary); --bg3: var(--color-bg-tertiary); --bg4: var(--color-bg-sunken); --border: var(--color-border-primary); --border2: var(--color-border-strong); --text: var(--color-text-primary); --text2: var(--color-text-secondary); --text3: var(--color-text-tertiary); --accent: var(--color-accent-primary); --accent-2: var(--color-accent-secondary); --accent-deep: var(--color-accent-strong); --accent-grad: linear-gradient(135deg, #FF6B5C 0%, #3B9EFF 100%); --accent-soft: var(--color-accent-soft); --glow: var(--shadow-focus); --gold: var(--color-accent-primary); --archer: var(--troop-archer); --footman: var(--troop-footman); --cavalry: var(--troop-cavalry); --red: var(--color-status-error); --teal: var(--color-accent-secondary-strong); --purple: #6A4DE0; --purple-soft: #EFEBFC; --surface-inset: var(--color-bg-tertiary); --ok-text: var(--color-status-success); --ok-bg: var(--color-status-success-soft); --ok-border: #BFE6CE; --bad-text: var(--color-status-error); --bad-bg: var(--color-status-error-soft); --bad-border: #F4C7C4; --warn-bg: var(--color-status-warning-soft); --warn-border: #ECD49B; /* Glass → solid card surfaces + soft shadow (blur removed) */ --glass-bg: var(--color-bg-secondary); --glass-bg-2: var(--color-bg-tertiary); --glass-border: var(--color-border-primary); --glass-blur: 0px; --shadow: var(--shadow-md); /* Animated aurora mesh → neutralized */ --mesh-1: transparent; --mesh-2: transparent; --mesh-3: transparent; --mesh-base: var(--color-bg-primary); --radius: var(--border-radius-lg); --radius-sm: var(--border-radius-sm); --radius-lg: var(--border-radius-xl); --font-body: var(--font-family-body); --font-display: var(--font-family-display); --font-mono: var(--font-family-mono); } /* Traditional Chinese. Simplified and Traditional share many codepoints but draw them differently, so serving Noto Sans SC to a zh-Hant reader looks subtly foreign. Noto Sans SC is kept as the second entry because untranslated strings fall back to Simplified, which Noto Sans TC cannot draw at all. Relies on being set — see App.razor. */ html[lang="zh-Hant"] { --font-cjk: "Noto Sans TC", "Noto Sans SC", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", sans-serif; } /* MudBlazor renders every typography variant from RocTheme, which is a static object and so cannot reorder SC/TC by language — its emitted stacks end at sans-serif with no CJK family. Point its variables at the stacks above instead, which carry both the CJK fallback and the zh-Hant swap. Every variant is listed because MudBlazor propagates Default.FontFamily to the variants RocTheme leaves unset, so they all need the same treatment. `html:root` outranks the plain `:root` MudThemeProvider emits, so this wins on specificity rather than document order (the provider renders from , after this stylesheet). */ html:root { --mud-typography-default-family: var(--font-body); --mud-typography-body1-family: var(--font-body); --mud-typography-body2-family: var(--font-body); --mud-typography-button-family: var(--font-body); --mud-typography-caption-family: var(--font-body); --mud-typography-overline-family: var(--font-body); --mud-typography-subtitle1-family: var(--font-body); --mud-typography-subtitle2-family: var(--font-body); --mud-typography-h1-family: var(--font-display); --mud-typography-h2-family: var(--font-display); --mud-typography-h3-family: var(--font-display); --mud-typography-h4-family: var(--font-display); --mud-typography-h5-family: var(--font-display); --mud-typography-h6-family: var(--font-display); /* MudBlazor ships Material's uppercase button label at weight 500. The app's own .btn-* buttons are sentence case at 700, and nine pages put the two kinds side by side — so a row read "SHARE Publish DELETE ROW", which is what made the button text look wrong rather than any alignment problem. Matching the variables fixes every page at once; restyling nine pages' markup would have been the same result with far more risk. */ --mud-typography-button-text-transform: none; --mud-typography-button-weight: 700; } /* Height and radius to match .btn-* as well, so a mixed row sits on one baseline instead of stepping up and down. Mud sets no min-height, which left its buttons ~10px shorter. */ .mud-button-root:not(.mud-icon-button) { min-height: 44px; border-radius: var(--border-radius-md); } .mud-button-root.mud-button-outlined-size-small, .mud-button-root.mud-button-filled-size-small, .mud-button-root.mud-button-text-size-small { min-height: 36px; } /* DARK — opt-in via toggle (night play). Warm-cool dark, not pure black. */ [data-theme="dark"] { color-scheme: dark; --color-bg-primary: #12151D; --color-bg-secondary: #1A1F2B; --color-bg-tertiary: #232938; --color-bg-sunken: #0E1118; --color-bg-inverse: #EDEFF5; --color-surface-overlay: rgba(0, 0, 0, 0.55); --color-text-primary: #ECEEF5; --color-text-secondary: #AAB2C5; --color-text-tertiary: #7A8198; --color-text-inverse: #1F2433; --color-text-link: #6FB6FF; --color-border-primary: #2C3344; --color-border-secondary: #232938; --color-border-strong: #3A4358; --color-border-focus: #6FB6FF; --color-accent-primary: #FF7A6B; --color-accent-primary-hover: #FF8E80; --color-accent-primary-active: #F2685A; --color-accent-strong: #FF7A6B; --color-on-accent: #2A1714; --color-accent-soft: rgba(255, 122, 107, 0.16); --color-accent-soft-border: rgba(255, 122, 107, 0.34); --color-accent-secondary: #5BAAFF; --color-accent-secondary-strong: #6FB6FF; --color-accent-secondary-soft: rgba(91, 170, 255, 0.16); --color-on-accent-secondary: #08203B; --color-status-success: #46C281; --color-status-success-soft: rgba(70, 194, 129, 0.16); --color-status-warning: #E0A53A; --color-status-warning-soft: rgba(224, 165, 58, 0.16); --color-status-error: #FF7A72; --color-status-error-soft: rgba(255, 122, 114, 0.16); --color-status-info: #6FB6FF; --color-status-info-soft: rgba(111, 182, 255, 0.16); --troop-archer: #5BAAFF; --troop-footman: #46C281; --troop-cavalry: #E0A53A; --troop-archer-soft: rgba(91, 170, 255, 0.16); --troop-footman-soft: rgba(70, 194, 129, 0.16); --troop-cavalry-soft: rgba(224, 165, 58, 0.16); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45), 0 8px 24px -10px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 36px -10px rgba(0, 0, 0, 0.6); --shadow-focus: 0 0 0 3px rgba(111, 182, 255, 0.45); /* Legacy aliases needing explicit dark values */ --accent-grad: linear-gradient(135deg, #FF7A6B 0%, #5BAAFF 100%); --glow: var(--shadow-focus); --shadow: var(--shadow-md); --ok-border: rgba(70, 194, 129, 0.4); --bad-border: rgba(255, 122, 114, 0.4); --warn-border: rgba(224, 165, 58, 0.4); --purple: #9B86FF; --purple-soft: rgba(155, 134, 255, 0.16); --mesh-base: var(--color-bg-primary); } /* ── Spec Planner canvas (SVG nodes/links) — theme-adaptive ── */ :root { --sp-grid: #E6E9F2; /* The three link tiers must stay separable against the canvas (--surface-inset, #F1F3F8) AND against the grid (#E6E9F2). --sp-link-dim used to be #EDEFF6 — lighter than the grid and a shade off the background — so the shape of an untouched tree was invisible until points were spent in it. Every tier now sits darker than the grid. */ --sp-link: #94A3BD; /* both ends reachable, nothing invested yet */ --sp-link-active: #3B9EFF; /* on an invested path — set apart by hue and width */ --sp-link-dim: #B4C0D4; /* an end is still locked — subordinate, not hidden */ --sp-sel-ring: #1F2433; --sp-hub-fill: #FFF1EF; --sp-locked-fill: #F1F3F8; --sp-locked-stroke: #CBD2E2; --sp-locked-text: #9097AB; --sp-avail-fill: #FFFFFF; --sp-avail-stroke: #3B9EFF; --sp-avail-text: #1668D6; --sp-partial-fill: #E7F1FF; --sp-partial-stroke: #3B9EFF; --sp-partial-text: #1668D6; --sp-done-fill: #1668D6; --sp-done-stroke: #0F4FA8; --sp-done-text: #FFFFFF; --sp-dot-on: #1668D6; --sp-dot-on-stroke: #0F4FA8; --sp-dot-off: #E2E6F0; --sp-dot-off-stroke: #CBD2E2; --sp-hubdot-on: #E0A53A; --sp-hubdot-on-stroke: #B26A00; --sp-hubdot-off: #EEE7D6; --sp-hubdot-off-stroke:#D9C9A0; } [data-theme="dark"] { --sp-grid: #1A2230; /* Canvas here is #232938, so links read as structure by sitting *lighter* than it. The old values were darker than the background and vanished into it. */ --sp-link: #6280AB; --sp-link-active: #0090C0; --sp-link-dim: #46536D; --sp-sel-ring: #FFFFFF; --sp-hub-fill: #1A3040; --sp-locked-fill: #131C28; --sp-locked-stroke: #2A3848; --sp-locked-text: #6A7890; --sp-avail-fill: #152D4A; --sp-avail-stroke: #3A7AB4; --sp-avail-text: #5AB4FF; --sp-partial-fill: #0D4A80; --sp-partial-stroke: #3A9AD0; --sp-partial-text: #80D0FF; --sp-done-fill: #005590; --sp-done-stroke: #00C8FF; --sp-done-text: #D6F4FF; --sp-dot-on: #00C8FF; --sp-dot-on-stroke: #00E8FF; --sp-dot-off: #1A2A3A; --sp-dot-off-stroke: #2A3848; --sp-hubdot-on: #D4A843; --sp-hubdot-on-stroke: #F0C060; --sp-hubdot-off: #1E2A18; --sp-hubdot-off-stroke:#2E3A28; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-body); background: var(--color-bg-primary); color: var(--text); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Calm static page background (animated aurora mesh removed in the friendly overhaul). */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--color-bg-primary); } a { color: var(--color-text-link); text-decoration: none; transition: color .15s; } a:hover { color: var(--color-accent-strong); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text); margin: 0 0 0.5em 0; letter-spacing: -0.01em; } /* Mono numerics helper */ .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; } /* Reusable glass surface */ .glass { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); backdrop-filter: blur(var(--glass-blur)) saturate(150%); border: 1px solid var(--glass-border); } /* Refined scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border2); border-radius: var(--border-radius-lg); border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--accent-deep); background-clip: content-box; } @media (prefers-reduced-motion: reduce) { body::before { animation: none; } } /* ════════════════════════════════════════════════════════════════ App shell — glass header + glass sidebar ════════════════════════════════════════════════════════════════ */ .roc-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; /* the sidebar + main scroll internally, so no body scrollbar runs past the header */ } .roc-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--space-4); height: var(--header-height); padding: 0 var(--space-5); /* Left inset = sidebar margin + sidebar padding, so the brand's hover pill starts on the same line as the nav-link pills below it. The brand then carries the same 12px inner padding as a nav-link, so the ◈ also lines up with the menu icon rail. */ padding-left: calc(var(--space-4) + var(--space-3)); background: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border-primary); box-shadow: var(--shadow-sm); } .roc-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: var(--font-size-md); letter-spacing: .01em; color: var(--color-text-primary); text-decoration: none; padding: 5px 10px 5px var(--space-3); border-radius: var(--border-radius-md); transition: background-color .15s; } .roc-brand:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); } .roc-brand:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .roc-brand-mark { width: 36px; height: 36px; border-radius: var(--border-radius-md); display: grid; place-items: center; background: var(--color-accent-primary); color: var(--color-on-accent); font-size: 17px; box-shadow: var(--shadow-sm); } /* The mark is the logo image itself, so it drops the accent tile it used to sit on: the artwork is sepia and transparent, and it clashed against the coral fill rather than reading as a mark. Sizing stays on .roc-brand-mark above so the header (36px) and auth pages (52px) keep their existing dimensions. */ img.roc-brand-mark { background: none; box-shadow: none; object-fit: contain; } .roc-brand-name { color: var(--color-text-primary); } .roc-header-spacer { flex: 1; } .roc-header-actions { display: flex; align-items: center; gap: var(--space-3); } .roc-user { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; gap: 3px; } .roc-user-name { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-primary); } .roc-user-role { font-size: 11px; font-weight: 700; line-height: 1; color: var(--color-accent-strong); background: var(--color-accent-soft); border: 1px solid var(--color-accent-soft-border); padding: 3px 9px; border-radius: var(--border-radius-full); text-transform: uppercase; letter-spacing: .06em; } .roc-icon-btn { width: 44px; height: 44px; border-radius: var(--border-radius-md); display: grid; place-items: center; cursor: pointer; background: var(--color-bg-secondary); border: 1px solid var(--color-border-strong); color: var(--color-text-secondary); transition: color .15s, border-color .15s, background-color .15s, box-shadow .15s; } .roc-icon-btn:hover { color: var(--color-text-primary); background: var(--color-bg-tertiary); } .roc-icon-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .roc-icon-btn svg { width: 20px; height: 20px; } /* ── Notification bell + dropdown ── */ .roc-bell { position: relative; display: inline-flex; } .roc-bell-btn { position: relative; } .roc-bell-badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; font-size: 10px; font-weight: 800; line-height: 1; color: #fff; background: var(--color-accent-primary-active); border: 2px solid var(--color-bg-primary); border-radius: var(--border-radius-full); } .roc-bell-backdrop { position: fixed; inset: 0; z-index: 90; background: transparent; } .roc-bell-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 100; width: 340px; max-width: calc(100vw - 24px); background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .roc-bell-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-secondary); font-weight: 800; color: var(--color-text-primary); } .roc-bell-mark { background: none; border: none; cursor: pointer; color: var(--color-accent-secondary-strong); font-weight: 700; font-size: var(--font-size-sm); } .roc-bell-list { max-height: 360px; overflow-y: auto; } .roc-bell-empty { padding: var(--space-5); text-align: center; color: var(--color-text-tertiary); font-size: var(--font-size-sm); } .roc-bell-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-secondary); } .roc-bell-item:hover { background: var(--color-bg-tertiary); } .roc-bell-item.is-unread { background: var(--color-accent-secondary-soft); } .roc-bell-item.is-unread:hover { background: var(--color-accent-secondary-soft); } .roc-bell-item-title { font-weight: 700; color: var(--color-text-primary); font-size: var(--font-size-sm); } .roc-bell-item-body { color: var(--color-text-secondary); font-size: var(--font-size-sm); } .roc-bell-item-time { color: var(--color-text-tertiary); font-size: 11px; } .roc-bell-all { display: block; text-align: center; padding: var(--space-3); color: var(--color-accent-secondary-strong); font-weight: 700; font-size: var(--font-size-sm); text-decoration: none; } .roc-bell-all:hover { background: var(--color-bg-tertiary); } /* ── User menu (avatar + dropdown) ── */ .roc-usermenu { position: relative; display: inline-flex; } .roc-usermenu-trigger { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 4px 10px 4px 4px; background: var(--color-bg-secondary); border: 1px solid var(--color-border-strong); border-radius: var(--border-radius-full); cursor: pointer; color: var(--color-text-primary); transition: background .15s, border-color .15s, box-shadow .15s; } .roc-usermenu-trigger:hover { background: var(--color-bg-tertiary); } .roc-usermenu-trigger:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .roc-avatar { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--color-accent-primary); color: var(--color-on-accent); font-weight: 800; font-size: var(--font-size-base); line-height: 1; } .roc-avatar-lg { width: 44px; height: 44px; font-size: var(--font-size-md); } .roc-usermenu-name { font-weight: 700; font-size: var(--font-size-sm); color: var(--color-text-primary); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .roc-usermenu-caret { width: 16px; height: 16px; color: var(--color-text-tertiary); flex: 0 0 auto; } .roc-usermenu-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 100; width: 250px; max-width: calc(100vw - 24px); background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-2); } .roc-usermenu-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--color-border-secondary); margin-bottom: var(--space-2); } .roc-usermenu-id { display: flex; flex-direction: column; min-width: 0; } .roc-usermenu-id .roc-usermenu-name { max-width: 150px; } .roc-usermenu-role { font-size: var(--font-size-sm); color: var(--color-text-secondary); } .roc-usermenu-item { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3); width: 100%; box-sizing: border-box; background: none; border: none; text-align: left; cursor: pointer; padding: 10px var(--space-3); border-radius: var(--border-radius-md); color: var(--color-text-primary); font-size: var(--font-size-base); font-weight: 600; font-family: inherit; line-height: 1.3; text-decoration: none; min-height: 44px; appearance: none; -webkit-appearance: none; } .roc-usermenu-item:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); text-decoration: none; } .roc-usermenu-item svg { width: 18px; height: 18px; color: var(--color-text-secondary); flex: 0 0 auto; } .roc-usermenu-danger { color: var(--color-status-error); } .roc-usermenu-danger svg { color: var(--color-status-error); } .roc-usermenu form { margin: 0; width: 100%; display: block; } /* Language switcher inside the user menu */ .roc-usermenu-langs { display: flex; gap: 6px; padding: 6px var(--space-3); } .roc-usermenu-lang { flex: 1; text-align: center; text-decoration: none; padding: 8px 6px; border-radius: var(--border-radius-md); border: 1px solid var(--color-border-primary); color: var(--color-text-secondary); font-weight: 700; font-size: var(--font-size-sm); min-height: 40px; display: flex; align-items: center; justify-content: center; } .roc-usermenu-lang:hover { color: var(--color-text-primary); background: var(--color-bg-tertiary); text-decoration: none; } /* Language switcher on the login card */ .roc-login-langs { display: flex; justify-content: center; gap: var(--space-4); margin-top: var(--space-4); } .roc-login-langs a { color: var(--color-text-tertiary); text-decoration: none; font-weight: 700; font-size: var(--font-size-sm); } .roc-login-langs a:hover { color: var(--color-text-primary); } @media (max-width: 560px) { .roc-usermenu-name, .roc-usermenu-caret { display: none; } .roc-usermenu-trigger { padding: 4px; } } .roc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; background: var(--color-bg-secondary); border: 1px solid var(--color-border-strong); color: var(--color-text-primary); padding: 8px 16px; border-radius: var(--border-radius-md); font-size: var(--font-size-sm); font-weight: 700; cursor: pointer; font-family: var(--font-body); transition: color .15s, border-color .15s, background-color .15s, box-shadow .15s; } .roc-btn:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); } .roc-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } /* ════════════════════════════════════════════════════════════════ Button system (Task 5) — global, AA-safe, ≥44px targets. .btn-primary coral fill + dark ink .btn-secondary outline .btn-ghost transparent .btn-danger red fill + white Add .btn-sm for a compact variant. ════════════════════════════════════════════════════════════════ */ .btn-primary, .btn-secondary, .btn-ghost, .btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: var(--border-radius-md); border: 1px solid transparent; font-family: var(--font-body); font-size: var(--font-size-base); font-weight: 700; line-height: 1.1; cursor: pointer; text-decoration: none; -webkit-appearance: none; transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, filter .15s; } .btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-ghost:focus-visible, .btn-danger:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .btn-primary:disabled, .btn-secondary:disabled, .btn-ghost:disabled, .btn-danger:disabled, .btn-primary[disabled], .btn-secondary[disabled], .btn-ghost[disabled], .btn-danger[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; filter: none; } .btn-primary { background: var(--color-accent-primary); color: var(--color-on-accent); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--color-accent-primary-hover); color: var(--color-on-accent); text-decoration: none; } .btn-primary:active { background: var(--color-accent-primary-active); } .btn-secondary { background: var(--color-bg-secondary); border-color: var(--color-border-strong); color: var(--color-text-primary); } .btn-secondary:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); text-decoration: none; } .btn-ghost { background: transparent; color: var(--color-text-primary); } .btn-ghost:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); text-decoration: none; } .btn-danger { background: var(--color-status-error); color: #fff; box-shadow: var(--shadow-sm); } .btn-danger:hover { filter: brightness(.95); color: #fff; text-decoration: none; } .btn-sm { min-height: 36px; padding: 7px 14px; font-size: var(--font-size-sm); } /* ════════════════════════════════════════════════════════════════ Cards & grouped sections (Task 6) — Apple-Health-style building blocks .roc-card soft content card (padded) .roc-section muted label + .roc-group (rounded list of .roc-row) ════════════════════════════════════════════════════════════════ */ .roc-card { background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); /* Cards carried no margin, so every page invented its own and the ones that forgot had their cards touching. One default here, cancelled below wherever the container already supplies a gap, so the two can never add up. */ margin-bottom: var(--space-5); } /* Vertical rhythm for stacked page content. Prefer this over per-page margins: a container with a gap spaces whatever it holds, cards or not. */ .roc-stack { display: flex; flex-direction: column; gap: var(--space-5); } .roc-stack > .roc-card, .acct-grid > .roc-card, .roc-stack > .mud-paper, .roc-stack > .mud-card { margin-bottom: 0; } .roc-card:last-child { margin-bottom: 0; } /* A MudPaper or MudCard used as a page section gets the same rhythm as .roc-card. Pages mix the two — MudCard for the shieldwall rows, .roc-card elsewhere — and without this the Mud ones touched while the others were spaced. Scoped to direct children of the page shell so nested papers (a panel inside a card) keep their own spacing. `:where` keeps specificity at zero, so any page that wants something else still wins. */ :where(.roc-main) > :where(.mud-paper, .mud-card), :where(.roc-main) > :where(div) > :where(.mud-paper, .mud-card) { margin-bottom: var(--space-5); } :where(.roc-stack) > :where(.mud-paper, .mud-card):last-child, :where(.roc-main) > :where(.mud-paper, .mud-card):last-child { margin-bottom: 0; } .roc-card--flush { padding: 0; overflow: hidden; } .roc-card--pad-sm { padding: var(--space-4); } .roc-card--accent { background: var(--color-accent-soft); border-color: var(--color-accent-soft-border); } .roc-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); } .roc-card-head--bordered { padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border-secondary); } .roc-card-title { font-family: var(--font-display); font-weight: 800; font-size: var(--font-size-lg); color: var(--color-text-primary); margin: 0; letter-spacing: -0.01em; } .roc-card-sub { margin: 2px 0 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); } .roc-section { margin-bottom: var(--space-6); } .roc-section-title { font-size: var(--font-size-sm); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-tertiary); margin: 0 0 var(--space-3) var(--space-2); } .roc-group { background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .roc-row { display: flex; align-items: center; gap: var(--space-4); min-height: 56px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-secondary); } .roc-row:last-child { border-bottom: none; } .roc-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .roc-row-label { font-weight: 700; color: var(--color-text-primary); } .roc-row-sub { font-size: var(--font-size-sm); color: var(--color-text-secondary); } .roc-row-value { color: var(--color-text-secondary); font-weight: 600; text-align: right; white-space: nowrap; } a.roc-row, .roc-row--link { cursor: pointer; text-decoration: none; color: inherit; transition: background-color .15s; } a.roc-row:hover, .roc-row--link:hover { background: var(--color-bg-tertiary); text-decoration: none; } a.roc-row:focus-visible, .roc-row--link:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .roc-row-chevron { color: var(--color-text-tertiary); flex: 0 0 auto; } .roc-row-chevron svg { width: 18px; height: 18px; display: block; } /* ════════════════════════════════════════════════════════════════ Page header (Task 7) — title + one-line purpose + optional action. Used at the top of every tool/list page via . ════════════════════════════════════════════════════════════════ */ .roc-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); } .roc-page-head-text { min-width: 0; } .roc-page-title { font-family: var(--font-display); font-weight: 800; font-size: var(--font-size-xl); line-height: 1.15; letter-spacing: -0.02em; color: var(--color-text-primary); margin: 0; } /* moves focus to this

after each navigation so screen readers announce the new page. The heading is tabindex="-1" (never in the tab order), so it only ever receives that programmatic focus — a visible ring serves no keyboard-navigation purpose. Suppress it in every case (F5/Ctrl+R refresh registers keyboard modality, so :focus-visible would otherwise match). */ .roc-page-title:focus { outline: none; box-shadow: none; } .roc-page-desc { margin: 6px 0 0; color: var(--color-text-secondary); font-size: var(--font-size-md); max-width: 70ch; } .roc-page-head-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } @media (max-width: 600px) { .roc-page-head { align-items: flex-start; } .roc-page-head-actions { width: 100%; } } /* ════════════════════════════════════════════════════════════════ Form fields (Task 8) Native controls use .roc-field / .roc-label / .roc-input / .roc-help. (.roc-input base lives in the Login block; here we extend it to select/textarea, add states, and lightly tune MudBlazor inputs.) ════════════════════════════════════════════════════════════════ */ .roc-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); } .roc-label { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-primary); } .roc-label .roc-req { color: var(--color-status-error); margin-left: 2px; } .roc-help { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0; } .roc-field-error { font-size: var(--font-size-sm); color: var(--color-status-error); font-weight: 600; margin: 0; } /* Buttons sitting under a field control. A row inside the column-flex .roc-field so the button keeps its natural width instead of stretching to the field. */ .roc-field-actions { display: flex; flex-wrap: wrap; gap: 8px; } /* Security-log event badge (admin audit page). */ .roc-audit-badge { display: inline-block; padding: 2px 8px; border-radius: var(--border-radius-sm); font-size: var(--font-size-sm); font-weight: 600; white-space: nowrap; } .roc-audit-badge.is-ok { background: var(--color-status-success-soft); color: var(--color-text-primary); } .roc-audit-badge.is-fail { background: var(--color-status-error-soft, var(--color-bg-tertiary)); color: var(--color-status-error); } select.roc-input { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6275' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; } textarea.roc-input { min-height: 96px; padding: 11px 14px; resize: vertical; line-height: 1.5; } .roc-input:disabled { background: var(--color-bg-tertiary); color: var(--color-text-tertiary); cursor: not-allowed; } .roc-input[aria-invalid="true"], .roc-input.is-invalid { border-color: var(--color-status-error); } .roc-input[aria-invalid="true"]:focus, .roc-input.is-invalid:focus { box-shadow: 0 0 0 3px var(--color-status-error-soft); } /* MudBlazor inputs — friendlier sizing + readable labels/helper (low-risk tweaks) */ .mud-input-control .mud-input-root, .mud-input-control input, .mud-input-control .mud-select-input { font-size: var(--font-size-base); } .mud-input-label { font-weight: 600; } .mud-input-helper-text { font-size: var(--font-size-sm); color: var(--color-text-secondary); } /* ════════════════════════════════════════════════════════════════ Responsive data list (Task 9) — table on desktop, cards on phone. Custom tables: use .roc-table (wrap in .roc-table-wrap for framing). Give each so it stacks readably on mobile. MudTable: set Breakpoint + DataLabel on MudTd; styling below makes the stacked rows look like cards. ════════════════════════════════════════════════════════════════ */ .roc-table-wrap { background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .roc-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-base); } .roc-table thead th { text-align: left; font-size: var(--font-size-sm); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-tertiary); padding: 12px var(--space-4); border-bottom: 1px solid var(--color-border-primary); white-space: nowrap; } .roc-table tbody td { padding: 13px var(--space-4); border-bottom: 1px solid var(--color-border-secondary); color: var(--color-text-primary); vertical-align: middle; } .roc-table tbody tr:last-child td { border-bottom: none; } .roc-table tbody tr:hover { background: var(--color-bg-tertiary); } .roc-table .roc-td-num { text-align: right; font-variant-numeric: tabular-nums; } .roc-table .roc-td-actions { text-align: right; white-space: nowrap; } /* MudTable — roomier + tokenized headers (desktop) */ .mud-table-root { font-size: var(--font-size-base); } .mud-table-root .mud-table-head .mud-table-cell { font-size: var(--font-size-sm); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-tertiary); } .mud-table-root .mud-table-body .mud-table-cell { padding-top: 13px; padding-bottom: 13px; } /* Phone: collapse custom tables into stacked cards via data-label */ @media (max-width: 700px) { .roc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .roc-table, .roc-table tbody, .roc-table tr, .roc-table td { display: block; width: 100%; } .roc-table tbody tr { background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-md); box-shadow: var(--shadow-sm); margin-bottom: var(--space-3); padding: 4px var(--space-3); } .roc-table tbody tr:hover { background: var(--color-bg-secondary); } .roc-table tbody td { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: 10px 0; border-bottom: 1px solid var(--color-border-secondary); text-align: right; } .roc-table tbody tr td:last-child { border-bottom: none; } .roc-table tbody td::before { content: attr(data-label); font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-secondary); text-align: left; margin-right: var(--space-3); } .roc-table tbody td:not([data-label])::before, .roc-table tbody td[data-label=""]::before { content: none; } .roc-table .roc-td-num, .roc-table .roc-td-actions { text-align: right; } /* MudTable stacked rows → card look */ .mud-table-root.mud-table-smalldevice .mud-table-body .mud-table-row { border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-md); box-shadow: var(--shadow-sm); margin-bottom: var(--space-3); background: var(--color-bg-secondary); } } /* ════════════════════════════════════════════════════════════════ Dialogs (Task 10) — light, rounded, roomy. MudBlazor provides the focus-trap, Esc-to-close, and backdrop; we restyle the surface + copy. ════════════════════════════════════════════════════════════════ */ .mud-dialog { border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--color-border-primary); } .mud-dialog-title { font-family: var(--font-display); font-weight: 800; font-size: var(--font-size-lg); color: var(--color-text-primary); } .mud-dialog-content { font-size: var(--font-size-base); color: var(--color-text-primary); } .roc-dialog-message { line-height: var(--line-height-relaxed); } .mud-dialog-actions { gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); } /* ════════════════════════════════════════════════════════════════ Empty states (Task 11) — friendly "nothing here yet" via : soft icon + one-line explanation + a clear next action. ════════════════════════════════════════════════════════════════ */ .roc-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-7) var(--space-5); max-width: 440px; margin: 0 auto; } .roc-empty-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: var(--border-radius-full); background: var(--color-accent-soft); color: var(--color-accent-strong); margin-bottom: var(--space-1); } .roc-error-icon { background: var(--color-status-warning-soft); color: var(--color-status-warning); } .roc-empty-icon svg { width: 30px; height: 30px; } .roc-empty-title { font-family: var(--font-display); font-weight: 800; font-size: var(--font-size-lg); color: var(--color-text-primary); margin: 0; } .roc-empty-desc { color: var(--color-text-secondary); font-size: var(--font-size-base); margin: 0; max-width: 42ch; line-height: var(--line-height-relaxed); } .roc-empty-action { margin-top: var(--space-2); } /* ════════════════════════════════════════════════════════════════ Feedback (Task 12) — toasts, tooltips, inline tips. Snackbar/tooltip severity colors come from the theme; here we tokenize shape/shadow/typography. gives inline guidance (info/tip/success/warn). ════════════════════════════════════════════════════════════════ */ .mud-snackbar .mud-snackbar-surface { border-radius: var(--border-radius-md); box-shadow: var(--shadow-lg); font-family: var(--font-body); font-size: var(--font-size-base); font-weight: 600; } .mud-snackbar .mud-snackbar-content-message { font-family: var(--font-body); } /* Calmer progress bar */ .mud-progress-linear { height: 8px !important; border-radius: var(--border-radius-full); overflow: hidden; background: var(--color-bg-tertiary); } .mud-progress-linear .mud-progress-linear-bar { border-radius: var(--border-radius-full); } .mud-tooltip { background: var(--color-bg-inverse); color: var(--color-text-inverse); border-radius: var(--border-radius-sm); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 600; padding: 6px 10px; box-shadow: var(--shadow-md); } .roc-tip { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--border-radius-md); background: var(--color-accent-secondary-soft); color: var(--color-text-primary); font-size: var(--font-size-sm); line-height: var(--line-height-normal); } .roc-tip strong { font-weight: 800; } .roc-tip-icon { flex: 0 0 auto; color: var(--color-accent-secondary-strong); margin-top: 1px; } .roc-tip-icon svg { width: 18px; height: 18px; display: block; } .roc-tip-body { min-width: 0; } .roc-tip-body :last-child { margin-bottom: 0; } .roc-tip--tip { background: var(--color-accent-soft); } .roc-tip--tip .roc-tip-icon { color: var(--color-accent-strong); } .roc-tip--success { background: var(--color-status-success-soft); } .roc-tip--success .roc-tip-icon { color: var(--color-status-success); } .roc-tip--warning { background: var(--color-status-warning-soft); } .roc-tip--warning .roc-tip-icon { color: var(--color-status-warning); } /* Dashboard account card (GroupCard child element — styled globally) */ .home-account { max-width: 560px; } /* Header crowding relief on small screens (full mobile nav lands in Task 4) */ @media (max-width: 480px) { .roc-header { padding: 0 var(--space-4); gap: var(--space-3); } .roc-user-name { display: none; } } .roc-layout { display: flex; flex: 1; min-height: 0; } .roc-sidebar { width: var(--sidebar-width); min-width: var(--sidebar-width); margin: var(--space-4) 0 var(--space-4) var(--space-4); padding: var(--space-3); border-radius: var(--border-radius-lg); background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); box-shadow: var(--shadow-sm); align-self: flex-start; position: sticky; top: calc(var(--header-height) + var(--space-3)); max-height: calc(100vh - var(--header-height) - var(--space-6)); overflow-y: auto; } .roc-main { flex: 1; padding: var(--space-5); overflow: auto; min-width: 0; } /* Nav */ .roc-nav { display: flex; flex-direction: column; gap: var(--space-4); } .roc-nav-section { display: flex; flex-direction: column; gap: 2px; } .roc-nav-heading { padding: var(--space-2) var(--space-3) 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--color-text-tertiary); } .roc-nav-link { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: var(--border-radius-md); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: 700; transition: background .15s, color .15s; } .roc-nav-link svg { width: 19px; height: 19px; flex: 0 0 auto; opacity: .8; } .roc-nav-link:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); text-decoration: none; } .roc-nav-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .roc-nav-link.active { color: var(--color-text-primary); background: var(--color-accent-soft); } .roc-nav-link.active::before { content: ""; position: absolute; left: calc(-1 * var(--space-3)); top: 8px; bottom: 8px; width: 3px; border-radius: 0 16px 16px 0; background: var(--color-accent-primary); } .roc-nav-link.active svg { opacity: 1; color: var(--color-accent-primary); } /* Disabled "coming soon" nav items */ .roc-nav-link-soon { cursor: default; color: var(--color-text-tertiary); } .roc-nav-link-soon:hover { background: transparent; color: var(--color-text-tertiary); } .roc-nav-link-soon svg { opacity: .55; } .roc-soon { margin-left: auto; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-tertiary); background: var(--color-bg-tertiary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-full); padding: 2px 8px; } /* ════════════════════════════════════════════════════════════════ Mobile bottom navigation + "More" sheet (Task 4) Desktop: hidden. Phone (<768px): sidebar hides, bottom bar shows. ════════════════════════════════════════════════════════════════ */ .roc-bottombar { display: none; } .roc-bottom-link { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--bottombar-height); padding: 6px 2px; border: none; background: none; cursor: pointer; color: var(--color-text-secondary); font-family: var(--font-body); font-size: 11px; font-weight: 700; text-decoration: none; transition: color .15s; } .roc-bottom-link svg { width: 24px; height: 24px; } .roc-bottom-link:hover { color: var(--color-text-primary); text-decoration: none; } .roc-bottom-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--border-radius-sm); } .roc-bottom-link.active { color: var(--color-accent-strong); } .roc-bottom-link.active svg { color: var(--color-accent-primary); } .roc-sheet-backdrop { position: fixed; inset: 0; z-index: 60; background: var(--color-surface-overlay); animation: roc-fade-in .15s var(--easing-out); } .roc-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-height: 80vh; overflow-y: auto; background: var(--color-bg-secondary); border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0; border-top: 1px solid var(--color-border-primary); box-shadow: var(--shadow-lg); padding: var(--space-2) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); animation: roc-slide-up .22s var(--easing-out); } .roc-sheet-handle { width: 40px; height: 4px; border-radius: 999px; background: var(--color-border-strong); margin: 4px auto var(--space-3); } .roc-sheet-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-weight: 800; font-size: var(--font-size-md); margin-bottom: var(--space-2); } @keyframes roc-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes roc-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (max-width: 767.98px) { .roc-sidebar { display: none; } .roc-main { padding: var(--space-4); padding-bottom: calc(var(--bottombar-height) + var(--space-5) + env(safe-area-inset-bottom, 0px)); } .roc-bottombar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--color-bg-secondary); border-top: 1px solid var(--color-border-primary); box-shadow: 0 -2px 12px -6px rgba(28, 33, 51, .18); } } /* Safety: never show the mobile sheet/bar on desktop, even if state lingers. */ @media (min-width: 768px) { .roc-sheet, .roc-sheet-backdrop { display: none; } } @media (prefers-reduced-motion: reduce) { .roc-sheet, .roc-sheet-backdrop { animation: none; } } /* Login page */ .roc-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-bg-primary); padding: var(--space-5); } .roc-login-card { width: 100%; max-width: 400px; background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-6) var(--space-6) var(--space-7); } .roc-login-brand { display: flex; justify-content: center; margin-bottom: var(--space-4); } .roc-login-brand .roc-brand-mark { width: 52px; height: 52px; font-size: 24px; border-radius: var(--border-radius-lg); } .roc-login-title { font-family: var(--font-display); font-weight: 800; font-size: var(--font-size-xl); letter-spacing: -0.01em; text-align: center; color: var(--color-text-primary); margin: 0 0 6px; } .roc-login-sub { text-align: center; color: var(--color-text-secondary); font-size: var(--font-size-base); margin-bottom: var(--space-6); } .roc-system-ref { text-align: center; color: var(--color-text-tertiary); font-size: var(--font-size-sm); margin: 0 0 var(--space-2); } .roc-system-ref code { font-family: var(--font-mono, monospace); color: var(--color-text-secondary); word-break: break-all; } /* ---- First-visit onboarding ---- */ .roc-onboard-overlay { position: fixed; inset: 0; z-index: 1400; background: rgba(20, 14, 12, .45); display: flex; align-items: center; justify-content: center; padding: var(--space-4); animation: roc-onboard-fade .2s ease; } @keyframes roc-onboard-fade { from { opacity: 0; } to { opacity: 1; } } .roc-onboard-card { position: relative; width: 100%; max-width: 420px; background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-7) var(--space-6) var(--space-6); text-align: center; animation: roc-onboard-pop .22s ease; } @keyframes roc-onboard-pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } } .roc-onboard-skip { position: absolute; top: 10px; right: 10px; background: transparent; border: none; color: var(--color-text-tertiary); cursor: pointer; font-size: var(--font-size-sm); font-weight: 700; padding: 8px 12px; border-radius: var(--border-radius-md); min-height: 44px; } .roc-onboard-skip:hover { color: var(--color-text-primary); background: var(--color-bg-tertiary); } .roc-onboard-skip:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .roc-onboard-art { width: 64px; height: 64px; margin: 0 auto var(--space-4); display: grid; place-items: center; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent-strong); } .roc-onboard-art svg { width: 32px; height: 32px; } .roc-onboard-title { font-size: var(--font-size-xl); font-weight: 800; color: var(--color-text-primary); margin: 0 0 var(--space-2); } .roc-onboard-body { font-size: var(--font-size-base); color: var(--color-text-secondary); line-height: var(--line-height-normal); margin: 0 0 var(--space-5); } .roc-onboard-dots { display: flex; gap: 7px; justify-content: center; margin-bottom: var(--space-5); } .roc-onboard-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-strong); transition: background .15s, transform .15s; } .roc-onboard-dot.is-active { background: var(--color-accent-primary); transform: scale(1.25); } .roc-onboard-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .roc-onboard-actions .btn-primary { min-width: 132px; text-align: center; } /* "Coming soon" dashboard tile */ .home-tile--soon { cursor: default; opacity: .72; } .home-tile--soon .home-tile-icon { opacity: .85; } .roc-input-group { margin-bottom: var(--space-4); } .roc-input-label { display: block; font-size: var(--font-size-sm); color: var(--color-text-secondary); font-weight: 700; margin-bottom: 6px; } .roc-input { width: 100%; min-height: 46px; background: var(--color-bg-secondary); border: 1px solid var(--color-border-strong); color: var(--color-text-primary); padding: 11px 14px; border-radius: var(--border-radius-md); font-size: var(--font-size-base); outline: none; font-family: inherit; transition: border-color .15s, box-shadow .15s; } .roc-input::placeholder { color: var(--color-text-tertiary); } .roc-input:focus { border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); } .roc-submit { width: 100%; min-height: 48px; margin-top: var(--space-2); background: var(--color-accent-primary); border: none; color: var(--color-on-accent); border-radius: var(--border-radius-md); font-family: var(--font-body); font-size: var(--font-size-md); font-weight: 800; cursor: pointer; box-shadow: var(--shadow-sm); transition: background-color .15s, box-shadow .15s; } .roc-submit:hover { background: var(--color-accent-primary-hover); } .roc-submit:active { background: var(--color-accent-primary-active); } .roc-submit:focus-visible { outline: none; box-shadow: var(--shadow-focus); } /* button-styled anchor (e.g. "Go to sign in" after a successful reset) */ .roc-submit-link { display: block; text-align: center; text-decoration: none; line-height: 48px; } .roc-login-link { display: block; text-align: center; margin-top: var(--space-4); color: var(--color-accent-secondary-strong); font-size: var(--font-size-sm); font-weight: 700; text-decoration: none; } .roc-login-link:hover { text-decoration: underline; } .roc-error { color: var(--color-status-error); font-size: var(--font-size-sm); font-weight: 600; text-align: center; margin-bottom: var(--space-4); padding: 10px 12px; background: var(--color-status-error-soft); border: 1px solid var(--color-status-error); border-radius: var(--border-radius-md); } /* Error UI */ #blazor-error-ui { background: var(--bg2); border-top: 1px solid var(--red); bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; color: var(--text); } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* ────────────────────────────────────────────────────────────────── Royal Tech (and, later, Normal Tech) — class names ported verbatim from the old HTML tool so the port stays readable side-by-side. ────────────────────────────────────────────────────────────────── */ .rtp-wrap { display: flex; flex-direction: column; min-height: calc(100vh - var(--header-height) - 150px); gap: var(--space-3); } .rtp-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3); background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); } .rtp-kpi { background: var(--color-bg-tertiary); border: 1px solid var(--color-border-primary); border-radius: 999px; padding: 5px 14px; font-size: var(--font-size-sm); color: var(--color-text-secondary); } .rtp-kpi strong { color: var(--color-accent-strong); font-weight: 800; margin-left: 4px; } .rtp-legend { font-size: var(--font-size-sm); color: var(--color-text-tertiary); } .rtp-search { flex: 1; min-width: 180px; max-width: 320px; min-height: 40px; background: var(--color-bg-secondary); border: 1px solid var(--color-border-strong); color: var(--color-text-primary); padding: 8px 12px; border-radius: var(--border-radius-md); font-size: var(--font-size-base); font-family: inherit; outline: none; } .rtp-search::placeholder { color: var(--color-text-tertiary); } .rtp-search:focus { border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); } .rtp-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; background: var(--color-bg-secondary); border: 1px solid var(--color-border-strong); color: var(--color-text-primary); padding: 8px 14px; border-radius: var(--border-radius-md); font-size: var(--font-size-sm); font-weight: 700; cursor: pointer; font-family: inherit; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; } .rtp-btn:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); } .rtp-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .rtp-btn.active { color: var(--color-text-primary); border-color: var(--color-accent-primary); background: var(--color-accent-soft); } .rtp-btn.rtp-btn-todo.active { background: var(--color-accent-soft); } .rtp-btn-danger { color: var(--color-status-error); border-color: var(--color-status-error); } .rtp-btn-danger:hover { background: var(--color-status-error-soft); color: var(--color-status-error); } .rtp-btn-save { color: var(--color-accent-strong); border-color: var(--color-accent-primary); } /* Royal/Normal segmented switch (Tech page header) */ .tech-switch { display: inline-flex; background: var(--color-bg-tertiary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-full); padding: 3px; gap: 2px; } .tech-switch-tab { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 18px; border-radius: var(--border-radius-full); font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-secondary); text-decoration: none; transition: background .15s, color .15s; } .tech-switch-tab:hover { color: var(--color-text-primary); text-decoration: none; } .tech-switch-tab.active { background: var(--color-accent-primary); color: var(--color-on-accent); } .tech-switch-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .rtp-filterbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 8px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--border-radius-lg); } .rtp-dd-wrap { position: relative; } .rtp-dd-btn { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); padding: 6px 10px; border-radius: var(--border-radius-lg); font-size: 12px; cursor: pointer; font-family: inherit; min-width: 140px; text-align: left; } .rtp-dd-btn:hover { background: var(--bg4); color: var(--text); } .rtp-dd-panel { position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--border-radius-lg); padding: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 200px; max-height: 320px; overflow-y: auto; box-shadow: 0 6px 22px rgba(0,0,0,0.4); } .rtp-dd-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); cursor: pointer; padding: 3px 4px; border-radius: var(--border-radius-lg); } .rtp-dd-row:hover { background: var(--bg3); } .rtp-dd-row input[type=checkbox] { margin: 0; accent-color: var(--color-accent-strong); } .rtp-dd-clear { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border); font-size: 11px; color: var(--red); cursor: pointer; text-align: center; } /* Troop / buff / context badges */ .rtp-badge { display: inline-block; padding: 1px 6px; border-radius: var(--border-radius-lg); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; border: 1px solid transparent; vertical-align: middle; } .bd-all { color: var(--text2); border-color: var(--border); } .bd-footman { color: var(--footman); border-color: rgba(63, 185, 80, 0.4); } .bd-archer { color: var(--archer); border-color: rgba(56, 139, 253, 0.4); } .bd-cavalry { color: var(--cavalry); border-color: rgba(227, 179, 65, 0.4); } .bd-calamity { color: var(--color-status-error); border-color: rgba(255, 132, 132, 0.4); } .bd-judicator { color: var(--purple); border-color: rgba(163, 113, 247, 0.4); } .bd-destroyer { color: var(--color-status-warning); border-color: rgba(255, 158, 100, 0.4); } .bd-evilbuster { color: var(--color-accent-secondary-strong); border-color: rgba(118, 200, 255, 0.4); } .bd-terminator { color: var(--color-status-error); border-color: rgba(255, 110, 110, 0.4); } .bd-punisher { color: var(--purple); border-color: rgba(199, 138, 240, 0.4); } .bt-might, .bt-damageout { color: var(--color-status-error); border-color: rgba(248, 81, 73, 0.4); } .bt-resist, .bt-damagered { color: var(--color-status-success); border-color: rgba(86, 211, 100, 0.4); } .bt-hp { color: var(--purple); border-color: rgba(163, 113, 247, 0.4); } .bt-tactmight { color: var(--cavalry); border-color: rgba(227, 179, 65, 0.4); } .bt-tactresist { color: var(--color-accent-secondary-strong); border-color: rgba(88, 166, 255, 0.4); } .bt-combatspeed { color: var(--color-text-secondary); border-color: rgba(139, 148, 158, 0.4); } .bt-cap, .bt-research, .bt-costred, .bt-training, .bt-heal { color: var(--text2); border-color: var(--border); } .ctx-field { color: var(--color-status-success); border-color: rgba(86, 211, 100, 0.4); } .ctx-siege, .ctx-siegeatk, .ctx-siegedef { color: var(--color-status-warning); border-color: rgba(255, 158, 100, 0.4); } /* Stat bar */ .rtp-statbar { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 10px 12px; } .rtp-statbar-hdr { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; } .rtp-statbar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } /* Four stat cards with large numbers overflow a phone; go 2×2 on narrow screens. */ @media (max-width: 560px) { .rtp-statbar-grid { grid-template-columns: repeat(2, 1fr); } } .rtp-statcard { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 8px 10px; } .rtp-statcard-title { font-size: 12px; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .rtp-statcard-title.foot { color: var(--footman); } .rtp-statcard-title.arch { color: var(--archer); } .rtp-statcard-title.cav { color: var(--cavalry); } .rtp-statcard-title.gen { color: var(--color-accent-strong); } .rtp-statrow { display: flex; justify-content: space-between; font-size: 11px; padding: 1px 0; color: var(--text2); } .rtp-statrow .v { color: var(--text); font-weight: 600; } .rtp-statrow.zero .v { color: var(--text3); font-weight: 400; } /* Books / sections / techs */ .rtp-books { display: flex; flex-direction: column; gap: 10px; } .rtp-book { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--border-radius-lg); overflow: hidden; } .rtp-book-hdr { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface-inset); cursor: pointer; border-bottom: 1px solid var(--border); } .rtp-book-hdr:hover { background: var(--bg4); } .rtp-book-name { color: var(--color-accent-strong); font-weight: 700; font-size: 14px; flex: 1; } .rtp-book-meta { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--text2); } .rtp-book-meta .chev { color: var(--text3); transition: transform 0.2s; } .rtp-book.rtp-book-collapsed .rtp-book-body { display: none; } .rtp-book.rtp-book-collapsed .chev { transform: rotate(-90deg); } .rtp-book-body { padding: 6px 10px 10px 10px; } .rtp-section { margin-top: 6px; } .rtp-section-name { font-size: 10px; color: var(--color-accent-secondary-strong); text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 2px 4px 2px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .rtp-tech { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border: 1px solid transparent; border-radius: var(--border-radius-lg); min-height: 28px; } .rtp-tech:hover { border-color: var(--border); background: var(--color-bg-tertiary); } /* A tech waiting on another. Dimmed rather than hidden: knowing it is there, and what it needs, is the point of showing the tree at all. The spec planner already reserves --sp-locked-* for exactly this state, so the two pages agree on what "locked" looks like. */ .rtp-tech-locked { opacity: 0.55; } .rtp-tech-locked .rtp-tech-name { color: var(--sp-locked-text); } .rtp-tech-locked .rtp-tech-slider { cursor: not-allowed; } .rtp-lock { font-size: 10px; flex: 0 0 auto; line-height: 1; } .ntp-locked-note { font-size: 10px; color: var(--sp-locked-text); } .rtp-tech-cb { accent-color: var(--color-accent-strong); margin: 0; cursor: pointer; } .rtp-tech-name { font-size: 12px; color: var(--text); flex: 0 0 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; } .rtp-tech-desc { flex: 1; font-size: 11px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rtp-tech-troops { display: flex; gap: 3px; } .rtp-tech-slider { flex: 0 0 140px; accent-color: var(--color-accent-secondary); height: 3px; } .rtp-tech-lv { font-size: 11px; color: var(--text2); flex: 0 0 auto; min-width: 52px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .rtp-tech-cost { font-size: 11px; color: var(--text3); width: 90px; text-align: right; } .rtp-tech.rtp-tech-maxed .rtp-tech-name, .rtp-tech.rtp-tech-maxed .rtp-tech-lv { color: var(--color-status-success); } .rtp-tech.rtp-tech-done { opacity: 0.45; } .rtp-tech.rtp-tech-done .rtp-tech-name, .rtp-tech.rtp-tech-done .rtp-tech-desc { text-decoration: line-through; color: var(--text3); } .rtp-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: 56px 24px; text-align: center; color: var(--color-text-secondary); font-size: var(--font-size-base); font-weight: 600; } .rtp-loading::before { content: ""; width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--color-border-strong); border-top-color: var(--color-accent-primary); animation: roc-spin .8s linear infinite; } @keyframes roc-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .rtp-loading::before { animation-duration: 2.4s; } } /* ────────────────────────────────────────────────────────────────── Normal Tech — grid of node cards + per-node modal ────────────────────────────────────────────────────────────────── */ .ntp-rows { display: flex; flex-direction: column; gap: 14px; } .ntp-row { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 10px 12px; } .ntp-row-name { color: var(--color-accent-strong); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 8px; } .ntp-row-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); } .ntp-node { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 10px 12px; cursor: pointer; transition: border-color 0.12s, transform 0.12s; display: flex; flex-direction: column; gap: 6px; min-height: 100px; } .ntp-node:hover { border-color: var(--border2); transform: translateY(-1px); } .ntp-node.ntp-done { border-color: rgba(63, 185, 80, 0.35); } .ntp-node.ntp-done .ntp-node-name { color: var(--footman); } .ntp-node.ntp-partial { border-color: rgba(227, 179, 65, 0.4); } .ntp-node.ntp-hidden { display: none; } .ntp-node-hdr { display: flex; align-items: center; gap: 6px; } .ntp-node-status { font-size: 12px; } .ntp-node-name { font-size: 13px; font-weight: 700; color: var(--text); } .ntp-node-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .ntp-season { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.04em; } .ntp-node-stats { display: flex; gap: 10px; font-size: 11px; color: var(--text2); } .ntp-medal { padding: 1px 6px; font-size: 10px; font-weight: 700; border-radius: var(--border-radius-lg); border: 1px solid transparent; } .ntp-medal-wb { color: var(--cavalry); border-color: rgba(227, 179, 65, 0.4); } .ntp-medal-cm { color: var(--archer); border-color: rgba(56, 139, 253, 0.4); } .ntp-medal-res { color: var(--footman); border-color: rgba(63, 185, 80, 0.4); } .ntp-medal-mix { color: var(--purple); border-color: rgba(163, 113, 247, 0.4); } /* Fearless Medals — Royal Tech's currency, so it needs a colour of its own even though no Normal Tech section is ever paid for in it. */ .ntp-medal-fm { color: var(--color-status-error); border-color: rgba(248, 81, 73, 0.4); } .ntp-progress-bar { height: 4px; background: var(--bg); border-radius: var(--border-radius-lg); overflow: hidden; margin-top: auto; } .ntp-progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--cavalry)); transition: width 0.2s; } .ntp-progress-text { font-size: 10px; color: var(--text3); } /* Modal */ .ntp-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 1000; } .ntp-modal-box { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(760px, 92vw); max-height: 85vh; background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--border-radius-lg); box-shadow: 0 18px 60px rgba(0,0,0,0.6); display: flex; flex-direction: column; z-index: 1001; } .ntp-modal-hdr { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-inset); border-radius: 16px 16px 0 0; } .ntp-modal-title { color: var(--color-accent-strong); font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; } .ntp-modal-close { background: none; border: none; color: var(--text2); font-size: 16px; cursor: pointer; padding: 4px 8px; } .ntp-modal-close:hover { color: var(--red); } .ntp-modal-body { flex: 1; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; } .ntp-modal-footer { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 16px; border-top: 1px solid var(--border); } .ntp-mtech { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--border-radius-lg); background: var(--bg3); } .ntp-mtech.rtp-tech-maxed { border-color: rgba(63, 185, 80, 0.4); } .ntp-mtech-row1 { display: flex; justify-content: space-between; gap: 10px; } .ntp-mtech-name { font-size: 12px; font-weight: 700; color: var(--text); } .ntp-mtech-desc { font-size: 11px; color: var(--text3); flex: 1; text-align: right; } .ntp-mtech-row2 { display: flex; align-items: center; gap: 8px; } .ntp-mtech-row2 .rtp-tech-slider { flex: 1; } .ntp-mtech-lv { font-size: 11px; color: var(--text2); width: 44px; text-align: right; } .ntp-mtech-qq { padding: 2px 8px; font-size: 11px; } .ntp-mtech-row3 { display: flex; flex-direction: column; gap: 2px; font-size: 11px; } .ntp-next-cost { font-weight: 700; color: var(--color-accent-secondary-strong); } .ntp-max-cost { color: var(--text3); } /* ────────────────────────────────────────────────────────────────── Hero Combos ────────────────────────────────────────────────────────────────── */ .hc-wrap { display: flex; flex-direction: column; gap: 12px; min-height: calc(100vh - 97px); } .hc-ctrls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--border-radius-lg); } .hc-sel { background: var(--color-bg-secondary); border: 1px solid var(--color-border-strong); color: var(--color-text-primary); padding: 8px 12px; border-radius: var(--border-radius-md); font-size: var(--font-size-sm); font-family: inherit; outline: none; min-width: 140px; min-height: 40px; } .hc-sel:focus { border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); } .hc-count { font-size: 11px; color: var(--text2); margin-left: auto; } .hc-banner { color: var(--color-accent-strong); font-style: italic; margin-left: 6px; } .hc-selbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--border-radius-lg); min-height: 42px; } .hc-sellabel { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; } .hc-selhint { font-size: 12px; color: var(--text2); } .hc-chip { background: var(--bg3); border: 1px solid var(--gold); color: var(--text); font-size: 12px; font-family: inherit; padding: 3px 10px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .hc-chip:hover { background: var(--color-accent-soft); } .hc-chip-x { color: var(--text3); font-size: 10px; } .hc-clear { margin-left: auto; } /* Results */ /* One column since the SX22/SX28 split was merged into a single combined list. */ .hc-results { display: grid; grid-template-columns: 1fr; gap: 10px; } .hc-result-col { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .hc-result-hdr { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--color-status-warning); padding-bottom: 6px; border-bottom: 1px solid var(--border); } .hc-combo { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--border-radius-lg); background: var(--bg3); } .hc-combo-hdr { display: flex; justify-content: space-between; font-size: 10px; } .hc-rank { font-weight: 700; } .hc-combo-body { font-size: 12px; color: var(--text); } .hc-member-sel { color: var(--color-accent-strong); font-weight: 700; } .hc-skin { color: var(--text3); font-size: 11px; } .hc-sep { color: var(--text3); } .hc-more { text-align: center; color: var(--text3); font-size: 11px; padding: 6px 0; } .hc-empty { grid-column: 1 / -1; } .hc-cat-cavalry { color: var(--color-accent-secondary-strong); border-color: var(--color-accent-secondary-strong); } .hc-cat-archer { color: var(--color-status-success); border-color: var(--color-status-success); } .hc-cat-footmen { color: var(--color-status-warning); border-color: var(--color-status-warning); } .hc-cat-mixed { color: var(--purple); border-color: var(--purple); } .hc-cat-poisontiler { color: var(--color-accent-strong); border-color: var(--color-accent-strong); } .hc-cat-other { color: var(--text2); border-color: var(--border); } /* Hero grid */ .hc-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); } .hcard { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: border-color 0.12s, transform 0.12s; position: relative; min-height: 108px; } .hcard:hover { border-color: var(--border2); transform: translateY(-1px); } .hcard-selected { border-color: var(--color-accent-strong); box-shadow: 0 0 0 1px var(--gold); } .hcard-hdr { display: flex; justify-content: space-between; align-items: baseline; } .hcard-name { font-size: 13px; font-weight: 700; color: var(--text); } .hcard-season { font-size: 10px; color: var(--text3); } .hcard-badges { display: flex; gap: 4px; flex-wrap: wrap; } .hcard-troop-foot { color: var(--footman); border-color: rgba(63, 185, 80, 0.4); } .hcard-troop-arch { color: var(--archer); border-color: rgba(56, 139, 253, 0.4); } .hcard-troop-cav { color: var(--cavalry); border-color: rgba(227, 179, 65, 0.4); } .hcard-type-imperial { color: var(--cavalry); border-color: rgba(227, 179, 65, 0.4); } .hcard-type-season { color: var(--archer); border-color: rgba(56, 139, 253, 0.4); } .hcard-type-exclusive { color: var(--purple); border-color: rgba(163, 113, 247, 0.4); } .hcard-excels { color: var(--text2); border-color: var(--border); } .hcard-stats { display: flex; gap: 10px; font-size: 11px; color: var(--text2); } .hcard-sel-indicator { position: absolute; top: 6px; right: 8px; color: var(--color-accent-strong); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; } /* ─── Spec Planner ───────────────────────────────────────────────── */ .sp-wrap { display: flex; flex-direction: column; height: calc(100vh - var(--header-height) - 178px); min-height: 480px; overflow: hidden; overflow-anchor: none; } .sp-toolbar { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3); background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); margin-bottom: var(--space-3); flex: 0 0 auto; } .sp-tabs { display: flex; gap: var(--space-2); flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } .sp-tabs::-webkit-scrollbar { display: none; } .sp-tab { --sp-tab-accent: var(--color-border-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 8px 18px; min-width: 116px; min-height: 44px; flex: 0 0 auto; background: var(--color-bg-tertiary); border: 2px solid transparent; border-radius: var(--border-radius-md); color: var(--color-text-secondary); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 700; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .sp-tab:hover { background: var(--color-bg-sunken); color: var(--color-text-primary); } .sp-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .sp-tab-active { background: color-mix(in srgb, var(--sp-tab-accent) 14%, var(--color-bg-secondary)); border-color: var(--sp-tab-accent); color: var(--color-text-primary); } .sp-tab-icon { font-size: 18px; line-height: 1; } .sp-tab-label { font-size: var(--font-size-sm); letter-spacing: 0.01em; line-height: 1.2; } .sp-tab-pts { font-size: 11px; color: var(--color-text-tertiary); font-weight: 600; } .sp-tab-active .sp-tab-pts { color: var(--color-text-secondary); } .sp-actions { display: flex; gap: var(--space-2); align-items: center; flex: 0 0 auto; } .sp-zoom { display: inline-flex; gap: 4px; } .sp-zoom-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background: var(--color-bg-secondary); border: 1px solid var(--color-border-strong); border-radius: var(--border-radius-md); color: var(--color-text-primary); font-size: var(--font-size-md); font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s; } .sp-zoom-btn:hover { background: var(--color-bg-tertiary); } .sp-zoom-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .sp-body { display: flex; flex: 1 1 auto; gap: 8px; min-height: 0; } .sp-canvas-wrap { flex: 1 1 auto; min-width: 0; min-height: 0; background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .sp-canvas-scroll { height: 100%; overflow: auto; overflow-anchor: none; background: var(--surface-inset); } .sp-svg { display: block; } .sp-side { flex: 0 0 360px; display: flex; flex-direction: column; gap: var(--space-3); min-height: 0; } .sp-side-section { background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; min-height: 0; } .sp-side-detail { flex: 0 0 auto; max-height: 50%; overflow: auto; } .sp-side-summary { flex: 1 1 auto; overflow: auto; } .sp-side-hdr { flex: 0 0 auto; padding: var(--space-3) var(--space-4); background: var(--color-bg-tertiary); border-bottom: 1px solid var(--color-border-primary); color: var(--color-text-tertiary); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } /* Spec Planner — stack canvas + side panel on small screens */ @media (max-width: 860px) { .sp-wrap { height: auto; min-height: 0; overflow: visible; } .sp-body { flex-direction: column; } .sp-canvas-wrap { height: 60vh; flex: 0 0 auto; } .sp-side { flex: 1 1 auto; width: 100%; } .sp-side-detail { max-height: none; } } /* Detail panel */ .sp-side-detail > div:not(.sp-side-hdr), .sp-side-detail > pre, .sp-side-detail > ul { padding-left: 12px; padding-right: 12px; } .sp-side-detail .sp-empty { padding: 14px 12px; color: var(--text3); } .sp-side-detail .sp-tip { padding: 0 12px 12px; color: var(--text3); font-size: 11px; line-height: 1.5; } .sp-name { margin-top: 10px; color: var(--text); font-family: var(--font-display); font-size: 16px; font-weight: 600; } .sp-lvl-row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; } .sp-lvl { color: var(--color-accent-secondary-strong); font-weight: 600; font-size: 13px; } .sp-lvl-btns { display: inline-flex; gap: 4px; } .sp-lvl-btn { min-width: 36px; height: 36px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--border-radius-lg); cursor: pointer; font-weight: 700; font-size: 14px; } .sp-lvl-btn:disabled { opacity: 0.4; cursor: not-allowed; } .sp-lvl-plus:not(:disabled):hover { border-color: var(--color-accent-secondary-strong); color: var(--color-accent-secondary-strong); } .sp-lvl-minus:not(:disabled):hover { border-color: var(--color-status-error); color: var(--color-status-error); } .sp-status { display: inline-block; margin-top: 8px; padding: 2px 8px; font-size: 11px; font-weight: 600; border-radius: var(--border-radius-lg); letter-spacing: 0.04em; } .sp-status-locked { background: var(--color-bg-tertiary); color: var(--color-text-tertiary); } .sp-status-avail { background: var(--color-accent-secondary-soft); color: var(--color-accent-secondary-strong); } .sp-status-partial { background: var(--color-accent-secondary-soft); color: var(--color-accent-secondary-strong); } .sp-status-done { background: var(--color-status-success-soft); color: var(--color-status-success); } .sp-status-hub { background: var(--color-accent-soft); color: var(--color-accent-strong); } .sp-desc { margin: 8px 0 6px; padding: 8px 10px; background: var(--color-bg-tertiary); border: 1px solid var(--border); border-radius: var(--border-radius-lg); color: var(--text2); font-size: 12px; line-height: 1.5; white-space: pre-wrap; font-family: inherit; } .sp-pre-label { margin-top: 6px; color: var(--text3); font-size: 11px; } .sp-pre-list { list-style: none; padding: 0; margin: 4px 0 8px; } .sp-pre-list li { padding: 2px 0; font-size: 12px; } .sp-pre-done { color: var(--text2); } .sp-pre-todo { color: var(--text3); } .sp-cost-line { margin-top: 6px; font-size: 12px; color: var(--color-accent-strong); } .sp-cost-note { color: var(--text3); } /* Summary panel */ .sp-side-summary > * { padding-left: 12px; padding-right: 12px; } .sp-side-summary > .sp-side-hdr, .sp-side-summary .sp-section-hdr.sp-section-inner { padding-left: 12px; padding-right: 12px; } .sp-side-summary .sp-empty { padding: 14px 12px; color: var(--text3); } .sp-section-hdr { margin-top: 10px; color: var(--text2); font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .sp-tree-pts { list-style: none; padding-left: 0; margin: 6px 0; } .sp-tree-pts li { padding: 4px 8px; margin: 4px 0; background: rgba(255,255,255,0.03); font-size: 12px; color: var(--text2); } .sp-tree-pts-total { color: var(--color-accent-strong) !important; font-weight: 600; border-left: 3px solid var(--gold) !important; } .sp-stats, .sp-abilities { list-style: none; padding-left: 0; margin: 6px 0; } .sp-stats li { padding: 3px 0; border-bottom: 1px dotted var(--border); font-size: 12px; color: var(--text2); } .sp-stats li:last-child { border-bottom: none; } .sp-abilities li { padding: 4px 8px; margin: 4px 0; background: rgba(255,255,255,0.03); font-size: 12px; color: var(--text2); } /* SVG node interactions */ .sp-node { cursor: default; } .sp-clickable { cursor: pointer; } .sp-clickable:hover circle:nth-of-type(1) { filter: brightness(1.3); } /* ─── Eden Calculator ────────────────────────────────────────────── */ .ec-wrap { display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-4); } .ec-toolbar { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3); background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); flex-wrap: wrap; } /* Scrollable chip-row of tabs */ .ec-tabs { display: flex; gap: var(--space-2); flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .ec-tabs::-webkit-scrollbar { display: none; } .ec-tab { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; min-height: 44px; padding: 10px 16px; background: var(--color-bg-tertiary); border: 1px solid transparent; border-radius: var(--border-radius-full); color: var(--color-text-secondary); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 700; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; } .ec-tab:hover { background: var(--color-bg-sunken); color: var(--color-text-primary); } .ec-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .ec-tab-active { background: var(--color-accent-primary); border-color: var(--color-accent-primary); color: var(--color-on-accent); } .ec-tab-active:hover { background: var(--color-accent-primary-hover); color: var(--color-on-accent); } .ec-tab-icon { font-size: 15px; line-height: 1; } .ec-tab-label { letter-spacing: 0.01em; } /* "Later" tabs (Loyalty/Fortress): de-emphasised until selected */ .ec-tab-later:not(.ec-tab-active) { background: transparent; color: var(--color-text-tertiary); } .ec-tab-later:not(.ec-tab-active) .ec-tab-icon { opacity: 0.6; } .ec-tab-later:not(.ec-tab-active):hover { background: var(--color-bg-tertiary); color: var(--color-text-secondary); } /* Tab group labels ("Set up" / "Results") in the Eden tab bar */ .ec-tabgroup { display: inline-flex; align-items: center; flex: 0 0 auto; align-self: center; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-tertiary); white-space: nowrap; } .ec-tabgroup:not(:first-child) { margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--color-border-secondary); } /* Guided-flow hero on the Dashboard (start-here guide / plain-language summary) */ .ec-hero { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4) var(--space-5); border-radius: var(--border-radius-lg); } .ec-hero-start { background: var(--color-accent-soft); border: 1px solid var(--color-accent-soft-border); } .ec-hero-summary { background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); } .ec-hero-emoji { font-size: 28px; line-height: 1.2; flex: 0 0 auto; } .ec-hero-text { min-width: 0; } .ec-hero-title { font-family: var(--font-display); font-weight: 800; font-size: var(--font-size-lg); color: var(--color-text-primary); margin-bottom: 2px; } .ec-hero-sub { margin: 0 0 var(--space-3); color: var(--color-text-secondary); font-size: var(--font-size-md); line-height: 1.5; max-width: 68ch; } .ec-hero-summary .ec-hero-sub { margin-bottom: 0; } .ec-hero-sub b { color: var(--color-text-primary); } .ec-hero-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } /* Tile cards read as tappable (they open the assign dialog) */ .ec-tile-card { transition: border-color .15s, box-shadow .15s, transform .15s; } .ec-tile-card:hover { border-color: var(--color-accent-soft-border); box-shadow: var(--shadow-md); transform: translateY(-2px); } .ec-tile-card-count { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .ec-tile-card-edit { color: var(--color-accent-secondary-strong); font-weight: 700; white-space: nowrap; } /* Workshop slots read as tappable too */ .ec-ws-slot:not([disabled]) { transition: border-color .15s, box-shadow .15s, transform .15s; } .ec-ws-slot:not([disabled]):hover { border-color: var(--color-accent-soft-border); box-shadow: var(--shadow-md); transform: translateY(-2px); } .ec-ws-slot-hint { display: block; margin-top: 2px; font-size: 10px; font-weight: 700; color: var(--color-accent-secondary-strong); } /* Password field with a show/hide eye toggle */ .roc-pw { position: relative; display: block; } .roc-pw .roc-input { width: 100%; padding-right: 44px; } .roc-pw-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; background: none; border: none; cursor: pointer; padding: 0; color: var(--color-text-tertiary); border-radius: var(--border-radius-md); transition: background .15s, color .15s; } .roc-pw-toggle:hover { color: var(--color-text-secondary); background: var(--color-bg-tertiary); } .roc-pw-toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .roc-pw-toggle svg { width: 18px; height: 18px; } /* Login form uses two SVGs toggled by a class (JS-driven); the Blazor field swaps its own. */ .roc-pw-toggle .pw-eye-off { display: none; } .roc-pw-toggle.is-showing .pw-eye { display: none; } .roc-pw-toggle.is-showing .pw-eye-off { display: block; } /* Inline info marker (hover/focus for a plain-language explanation) */ .roc-infotip { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 5px; vertical-align: middle; border-radius: 50%; background: var(--color-bg-tertiary); color: var(--color-text-secondary); font-size: 10px; font-weight: 800; font-style: italic; font-family: var(--font-display); line-height: 1; cursor: help; user-select: none; transition: background .15s, color .15s; } .roc-infotip:hover, .roc-infotip:focus-visible { background: var(--color-accent-soft); color: var(--color-accent-strong); outline: none; } /* Progressive-disclosure block (native
) for advanced/optional content. No own margin — spacing comes from the parent's gap so rhythm stays uniform. */ .roc-collapsible { margin-top: 0; } .roc-collapsible-summary { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; user-select: none; list-style: none; padding: 9px 14px; min-height: 40px; background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); font-weight: 700; font-size: var(--font-size-sm); color: var(--color-text-secondary); transition: background .15s, color .15s; } .roc-collapsible-summary::-webkit-details-marker { display: none; } .roc-collapsible-summary::marker { content: ""; } .roc-collapsible-summary:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); } .roc-collapsible-summary:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .roc-collapsible-chevron { width: 16px; height: 16px; flex: 0 0 auto; transition: transform .15s; } .roc-collapsible[open] > .roc-collapsible-summary .roc-collapsible-chevron { transform: rotate(90deg); } .roc-collapsible-body { padding-top: var(--space-4); } /* Plain-language "here's the result" line at the top of a tab */ .ec-takeaway { margin: 0; padding: var(--space-3) var(--space-4); background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); font-size: var(--font-size-md); color: var(--color-text-secondary); line-height: 1.5; } .ec-takeaway b { color: var(--color-text-primary); font-weight: 800; } .ec-takeaway .pos { color: var(--color-status-success); font-weight: 800; } .ec-takeaway .neg { color: var(--color-status-error); font-weight: 800; } @media (prefers-reduced-motion: reduce) { .roc-collapsible-chevron { transition: none; } } .ec-toolbar-right { display: flex; align-items: center; gap: var(--space-4); flex: 0 0 auto; flex-wrap: wrap; } .ec-date-field { display: inline-flex; align-items: center; gap: var(--space-2); } .ec-date-label { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-secondary); } .ec-date { background: var(--color-bg-secondary); color: var(--color-text-primary); border: 1px solid var(--color-border-strong); border-radius: var(--border-radius-md); padding: 9px 12px; font-size: var(--font-size-sm); font-family: var(--font-body); color-scheme: light; } [data-theme="dark"] .ec-date { color-scheme: dark; } .ec-date:focus { outline: none; border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); } .ec-phase { color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: 600; } .ec-save-state { font-size: var(--font-size-sm); font-weight: 700; padding: 4px 10px; border-radius: var(--border-radius-full); } .ec-save-pending { color: var(--color-status-warning); background: var(--color-status-warning-soft); } .ec-save-ok { color: var(--color-status-success); background: var(--color-status-success-soft); } /* Panel content */ .ec-panel-content { /* One consistent vertical rhythm for every block in a tab. Children must NOT add their own vertical margins — that stacks on top of this gap and makes the spacing uneven. */ display: flex; flex-direction: column; gap: var(--space-4); } .ec-section { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 12px; } .ec-section-hdr { color: var(--color-accent-strong); font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .ec-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 10px; } .ec-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px; } .ec-grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 10px; } .ec-form-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; } .ec-label { color: var(--text2); font-size: 12px; min-width: 130px; } .ec-hint { color: var(--text3); font-size: 11px; } .ec-input { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 4px 8px; font-size: 12px; flex: 1 1 auto; min-width: 0; } .ec-input-sm { max-width: 120px; } .ec-select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 4px 8px; font-size: 12px; flex: 1 1 auto; min-width: 0; } .ec-select:disabled { opacity: 0.4; cursor: not-allowed; } .ec-check-row { cursor: pointer; padding: 4px 0; user-select: none; } /* KPI strip */ .ec-kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; } .ec-kpi-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 8px 10px; text-align: center; } .ec-kpi-card-bold { border-color: var(--color-accent-strong); } .ec-kpi-val { color: var(--text); font-family: var(--font-display); font-size: 18px; font-weight: 700; } .ec-kpi-label { color: var(--text3); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; } .ec-banner { padding: 8px 12px; background: var(--color-status-info-soft); border: 1px solid var(--color-accent-secondary-strong); border-radius: var(--border-radius-lg); color: var(--color-accent-secondary-strong); font-size: 12px; } .ec-banner-warn { background: rgba(212,168,67,0.12); border-color: var(--color-accent-strong); color: var(--color-accent-strong); } .ec-result-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 12px; } .ec-result-key { color: var(--text2); } .ec-result-val { color: var(--text); font-weight: 600; } .ec-result-pos { color: var(--color-status-success) !important; } .ec-result-neg { color: var(--color-status-error) !important; } .ec-result-block { padding: 4px; } /* Camp / fortress / workshop cards */ .ec-camp-card, .ec-fort-card, .ec-ws-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 8px; display: flex; flex-direction: column; gap: 4px; } .ec-camp-name, .ec-fort-title, .ec-ws-card-title { color: var(--text); font-family: var(--font-display); font-size: 13px; font-weight: 600; } .ec-camp-cost, .ec-ws-card-info { color: var(--text3); font-size: 10px; } .ec-fort-totals { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border); color: var(--text); font-size: 12px; } /* Spec slot tiles */ .ec-spec-row { display: flex; gap: 8px; flex-wrap: wrap; } .ec-spec-node { width: 60px; height: 60px; background: var(--bg); border: 2px solid var(--border); border-radius: var(--border-radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; color: var(--text2); transition: border-color 0.12s, background 0.12s; } .ec-spec-node:hover { border-color: var(--color-accent-secondary-strong); } .ec-spec-node-lit { background: var(--color-accent-secondary-soft); border-color: var(--color-accent-secondary-strong); color: var(--color-accent-secondary-strong); } .ec-spec-node-lv { font-family: var(--font-display); font-size: 14px; font-weight: 700; } .ec-spec-node-sub { font-size: 10px; color: var(--text3); } .ec-spec-node-lit .ec-spec-node-sub { color: var(--color-accent-secondary-strong); } /* Tile cards */ .ec-tile-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 10px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; color: var(--text); font: inherit; } .ec-tile-card:hover { border-color: var(--color-accent-strong); } .ec-tile-card-resource { font-size: 14px; font-weight: 700; } .ec-tile-card-name { color: var(--text2); font-size: 11px; } .ec-tile-card-rate { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--color-accent-secondary-strong); } .ec-tile-card-unit { font-size: 11px; color: var(--text3); } .ec-tile-card-count { color: var(--text3); font-size: 11px; } /* Workshop slot grid */ .ec-slots-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; } .ec-ws-slot { background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--border-radius-lg); padding: 14px 10px; min-height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text2); cursor: pointer; font: inherit; } .ec-ws-slot:hover:not(:disabled) { border-color: var(--color-accent-secondary-strong); } .ec-ws-slot:disabled { cursor: default; } .ec-ws-slot-active { background: var(--color-accent-secondary-soft); border-color: var(--color-accent-secondary-strong); color: var(--color-accent-secondary-strong); } .ec-ws-slot-locked { opacity: 0.4; } .ec-ws-slot-title { font-size: 11px; color: var(--text3); } .ec-ws-slot-icon { font-size: 22px; } .ec-ws-slot-label { font-size: 12px; font-weight: 700; color: var(--color-accent-secondary-strong); } .ec-ws-slot-empty { font-size: 11px; color: var(--text3); } .ec-ws-slot-lock { font-size: 16px; } .ec-slot-grid-modal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px; } .ec-slot-pick { background: var(--color-bg-tertiary); border: 1.5px solid var(--color-border-strong); border-radius: var(--border-radius-lg); padding: 12px; color: var(--color-text-secondary); font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; } .ec-slot-pick:hover { border-color: var(--color-accent-secondary-strong); color: var(--color-accent-secondary-strong); } .ec-slot-pick-active { background: var(--color-accent-secondary-soft); border-color: var(--color-accent-secondary-strong); color: var(--color-accent-secondary-strong); } /* Period toggle */ .ec-toolbar-inner { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 4px 0; } .ec-vt-tabs { display: flex; gap: 4px; } .ec-vt-btn { background: var(--bg); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 4px 12px; color: var(--text2); font-size: 12px; cursor: pointer; } .ec-vt-active { background: var(--color-accent-secondary-soft); border-color: var(--color-accent-secondary-strong); color: var(--color-accent-secondary-strong); } /* Badges */ .ec-badges { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0; } .ec-badge { background: var(--bg); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 2px 8px; font-size: 11px; color: var(--text2); } .ec-badge-max { background: rgba(212,168,67,0.18); border-color: var(--color-accent-strong); color: var(--color-accent-strong); } .ec-detail { font-size: 11px; color: var(--text3); margin: 2px 0; } /* Table */ .ec-table-wrap { overflow-x: auto; } .ec-table { width: 100%; border-collapse: collapse; font-size: 12px; color: var(--text); } .ec-table th, .ec-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left; } .ec-table th { color: var(--text3); font-weight: 600; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; } /* Phone: stack ec-tables into label:value cards (they're too wide to read as a side-scroll strip). Each must carry data-label="Column". */ @media (max-width: 560px) { .ec-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ec-table, .ec-table tbody, .ec-table tr, .ec-table td { display: block; width: 100%; } .ec-table tbody tr { border: 1px solid var(--border); border-radius: var(--border-radius-md); margin-bottom: 8px; } .ec-table tbody td { display: flex; justify-content: space-between; gap: 12px; text-align: right; border-bottom: 1px solid var(--border); } .ec-table tbody tr td:last-child { border-bottom: none; } .ec-table tbody td::before { content: attr(data-label); font-weight: 600; color: var(--text3); text-align: left; } .ec-table tbody td:not([data-label])::before { content: none; } } /* Progress bar */ .ec-progress { background: var(--color-bg-tertiary); border-radius: var(--border-radius-lg); height: 6px; margin-top: 6px; overflow: hidden; } .ec-progress-bar { background: var(--color-accent-secondary); height: 100%; border-radius: var(--border-radius-lg); } /* Flow cards (dashboard) */ .ec-flow-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 10px; } .ec-flow-title { color: var(--color-accent-strong); font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; } .ec-flow-row { font-size: 11px; color: var(--text2); padding: 2px 0; } /* Tile dialog */ .ec-tile-modal-body { padding: 8px 12px; max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } .ec-tile-modal-totals { display: flex; justify-content: space-between; padding: 8px 4px 0; border-top: 1px solid var(--border); margin-top: 6px; font-size: 12px; color: var(--text2); } /* ── Virtue planner ───────────────────────────────────────────────────── */ .vp-outer { display: flex; flex-direction: column; height: calc(100vh - 64px); overflow: hidden; } .vp-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: var(--bg2); border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap; gap: 8px; } .vp-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .vp-troop-sel, .vp-path-sel { display: flex; align-items: center; gap: 5px; } .vp-label { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; } .vp-troop-btn, .vp-path-btn { min-height: 44px; padding: 7px 14px; font-size: var(--font-size-sm); font-weight: 700; background: var(--color-bg-tertiary); border: 1px solid var(--color-border-strong); color: var(--color-text-secondary); border-radius: var(--border-radius-md); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .vp-troop-btn:hover, .vp-path-btn:hover { color: var(--color-text-primary); background: var(--color-bg-sunken); } .vp-troop-btn:focus-visible, .vp-path-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .vp-troop-active, .vp-path-active { background: var(--color-accent-primary); color: var(--color-on-accent); border-color: var(--color-accent-primary); } .vp-troop-active:hover, .vp-path-active:hover { background: var(--color-accent-primary-hover); color: var(--color-on-accent); } .vp-path-clear { color: var(--color-status-error); } .vp-totals { display: flex; align-items: center; gap: 6px; font-size: 12px; } .vp-total-label { color: var(--text2); } .vp-total-val { color: var(--color-accent-strong); font-weight: 700; } .vp-save-state { margin-left: 12px; font-size: 11px; padding: 2px 8px; border-radius: var(--border-radius-lg); } .vp-save-pending { background: var(--warn-bg); color: var(--color-accent-strong); } .vp-save-ok { background: var(--ok-bg); color: var(--ok-text); } .vp-body { display: flex; flex: 1; overflow: hidden; background: transparent; } .vp-columns { flex: 1; overflow-x: auto; overflow-y: auto; display: flex; gap: 8px; padding: 10px; align-items: flex-start; } .vp-col { display: flex; flex-direction: column; gap: 6px; flex: 0 0 220px; width: 220px; min-width: 220px; max-width: 220px; } .vp-col-hdr { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--border-radius-lg); } .vp-col-title { color: var(--color-accent-strong); font-weight: 700; font-size: 13px; } .vp-col-cost { color: var(--text2); font-size: 11px; } .vp-col-prog { font-size: 11px; padding: 1px 7px; border-radius: var(--border-radius-lg); background: var(--bg3); color: var(--text2); border: 1px solid var(--border); } .vp-prog-partial { color: var(--color-accent-strong); border-color: var(--color-accent-strong); } .vp-prog-done { color: var(--ok-text); border-color: var(--ok-border); background: var(--ok-bg); } .vp-tree-card { position: relative; padding: 8px 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--border-radius-lg); cursor: pointer; transition: background .1s, border-color .1s; } .vp-tree-step { position: absolute; top: 5px; right: 5px; min-width: 20px; height: 20px; padding: 0 5px; background: var(--gold); color: #000; font-weight: 700; font-size: 11px; border-radius: var(--border-radius-lg); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.4); } .vp-tree-card:hover { background: var(--bg3); border-color: var(--color-accent-strong); } .vp-tree-partial { border-color: var(--color-accent-strong); background: var(--warn-bg); } .vp-tree-done { border-color: var(--ok-border); background: var(--ok-bg); } .vp-tree-selected { outline: 2px solid var(--gold); outline-offset: -2px; } .vp-tree-name { font-weight: 700; font-size: 12px; padding-right: 28px; } .vp-tree-cost { color: var(--text2); font-size: 11px; margin-bottom: 4px; } .vp-tree-bar-wrap { height: 4px; background: var(--bg3); border-radius: var(--border-radius-lg); overflow: hidden; margin-bottom: 3px; } .vp-tree-bar { height: 100%; background: var(--gold); transition: width .15s; } .vp-tree-prog { font-size: 10px; color: var(--text2); } .vp-legion { padding: 6px 8px; background: var(--surface-inset); border: 1px dashed var(--border2); border-radius: var(--border-radius-lg); margin-top: 4px; } .vp-legion-done { border-color: var(--ok-border); background: var(--ok-bg); } .vp-legion-title { font-size: 10px; font-weight: 700; color: var(--color-accent-strong); text-transform: uppercase; letter-spacing: .05em; } .vp-legion-name { font-size: 12px; font-weight: 600; } .vp-legion-desc { font-size: 10px; color: var(--text2); line-height: 1.3; } /* Detail panel */ .vp-detail { width: 320px; min-width: 320px; display: flex; flex-direction: column; overflow: hidden; background: var(--bg2); border-left: 1px solid var(--border); } .vp-detail-top { flex: 1; overflow-y: auto; padding: 10px; } .vp-detail-empty { padding: 20px 10px; text-align: center; color: var(--text2); font-style: italic; } .vp-detail-empty-sm { padding: 6px 0; color: var(--text2); font-style: italic; font-size: 11px; } .vp-detail-title { font-size: 14px; font-weight: 700; color: var(--color-accent-strong); } .vp-detail-cost { font-size: 11px; color: var(--text2); margin-bottom: 8px; } .vp-detail-section { font-size: 10px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .05em; margin: 8px 0 4px; padding-bottom: 3px; border-bottom: 1px solid var(--border); } .vp-detail-nodes, .vp-detail-milestones { display: flex; flex-direction: column; gap: 3px; } .vp-detail-node, .vp-detail-ms { display: flex; align-items: flex-start; gap: 6px; padding: 5px 6px; border-radius: var(--border-radius-lg); cursor: pointer; border: 1px solid transparent; background: var(--surface-inset); } .vp-detail-node:hover, .vp-detail-ms:hover { background: var(--color-bg-tertiary); border-color: var(--color-border-strong); } .vp-detail-node-checked, .vp-detail-ms-done { background: var(--ok-bg); border-color: var(--ok-border); } .vp-detail-node-passive { border-left: 2px solid var(--gold); } .vp-detail-node-check { width: 14px; height: 14px; min-width: 14px; border-radius: var(--border-radius-lg); border: 1.5px solid var(--color-border-strong); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--ok-text); background: var(--color-bg-tertiary); margin-top: 1px; } .vp-detail-node-checked .vp-detail-node-check, .vp-detail-ms-done .vp-detail-node-check { background: var(--color-status-success); border-color: var(--color-status-success); color: #fff; } .vp-detail-node-info { display: flex; flex-direction: column; gap: 1px; flex: 1; } .vp-detail-node-name { font-size: 11px; font-weight: 600; } .vp-detail-node-effect { font-size: 10px; color: var(--text2); line-height: 1.3; } .vp-detail-ms-pct { width: 32px; min-width: 32px; padding: 1px 0; background: var(--bg3); border-radius: var(--border-radius-lg); text-align: center; font-size: 10px; font-weight: 700; color: var(--color-accent-strong); } .vp-detail-ms-effect { flex: 1; font-size: 10px; line-height: 1.3; } .vp-detail-ms-check { font-size: 12px; color: var(--ok-text); min-width: 14px; text-align: center; } .vp-detail-actions { display: flex; gap: 6px; margin-top: 10px; } .vp-btn-all, .vp-btn-clear { flex: 1; min-height: 40px; padding: 6px 10px; font-size: 11px; font-weight: 600; border-radius: var(--border-radius-lg); cursor: pointer; } .vp-btn-all { background: var(--ok-bg); border: 1px solid var(--ok-border); color: var(--ok-text); } .vp-btn-clear { background: var(--bad-bg); border: 1px solid var(--bad-border); color: var(--bad-text); } .vp-btn-all:hover { background: var(--color-status-success-soft); border-color: var(--color-status-success); } .vp-btn-clear:hover { background: var(--color-status-error-soft); border-color: var(--color-status-error); } .vp-detail-summary { border-top: 1px solid var(--border); padding: 10px; max-height: 40%; overflow-y: auto; background: var(--color-bg-tertiary); } .vp-sum-rows { display: flex; flex-direction: column; } .vp-sum-row { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 0; border-bottom: 1px solid var(--color-border-secondary); font-size: 11px; } .vp-sum-name { color: var(--text2); } .vp-sum-val { font-weight: 700; font-variant-numeric: tabular-nums; } .vp-sum-pos { color: var(--ok-text); } .vp-sum-neg { color: var(--bad-text); } @media (max-width: 900px) { .vp-detail { width: 100%; min-width: unset; border-left: none; border-top: 1px solid var(--border); } .vp-body { flex-direction: column; } } /* ── Hero Roster ──────────────────────────────────────────────────────── */ .hr-wrap { display: flex; flex-direction: column; gap: var(--space-4); } .hr-section { background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-4); } .hr-section-hdr { display: flex; align-items: center; justify-content: space-between; font-size: var(--font-size-sm); font-weight: 800; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border-secondary); } .hr-save-state { font-size: var(--font-size-sm); font-weight: 700; padding: 4px 10px; border-radius: var(--border-radius-full); text-transform: none; letter-spacing: 0; } .hr-save-pending { background: var(--color-status-warning-soft); color: var(--color-status-warning); } .hr-save-ok { background: var(--color-status-success-soft); color: var(--color-status-success); } .hr-legion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 10px; } .hr-legion { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 8px; display: flex; flex-direction: column; gap: 6px; } .hr-legion-hdr { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--text2); text-transform: uppercase; letter-spacing: .05em; } .hr-legion-title { color: var(--color-accent-strong); font-weight: 700; } .hr-clear-btn { background: transparent; border: 1px solid var(--border2); color: var(--bad-text); font-size: 10px; padding: 2px 8px; border-radius: var(--border-radius-lg); cursor: pointer; } .hr-clear-btn:hover { background: var(--bad-bg); border-color: var(--bad-border); } .hr-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .hr-slot { min-height: 78px; background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 6px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; text-align: left; color: var(--text2); transition: background .1s, border-color .1s; } .hr-slot:hover { background: var(--color-bg-tertiary); border-color: var(--color-accent-strong); } .hr-slot-empty { align-items: center; justify-content: center; border-style: dashed; } .hr-slot-plus { font-size: 22px; color: var(--text2); font-weight: 700; line-height: 1; } .hr-slot-empty-label { font-size: 10px; color: var(--text2); text-transform: uppercase; letter-spacing: .05em; } .hr-slot-filled { background: var(--ok-bg); border-color: var(--ok-border); color: var(--color-text-primary); } .hr-slot-filled:hover { background: var(--color-status-success-soft); border-color: var(--color-status-success); } .hr-slot-name { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .hr-slot-badges { display: flex; flex-wrap: wrap; gap: 3px; margin-top: auto; } .hr-slot-season { background: var(--color-accent-soft); color: var(--color-accent-strong); border: 1px solid var(--color-accent-soft-border); } .hr-ctrls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .hr-count { margin-left: auto; font-size: var(--font-size-sm); color: var(--color-text-secondary); } .hr-count b { color: var(--color-accent-strong); } .hr-card { position: relative; transition: opacity .1s; } .hr-card.hr-owned { border-color: var(--ok-border); box-shadow: 0 0 0 1px rgba(108, 208, 125, .12) inset; } .hr-card.hr-assigned { opacity: .55; cursor: not-allowed; } .hr-card-tag { margin-top: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; text-align: center; padding: 3px 4px; border-radius: var(--border-radius-lg); } .hr-card-tag-owned { color: var(--ok-text); background: var(--color-status-success-soft); border: 1px solid var(--ok-border); } .hr-card-tag-assigned { color: var(--color-accent-strong); background: var(--color-accent-soft); border: 1px solid var(--color-accent-soft-border); } /* Picker dialog */ .hr-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 8px; margin-top: 10px; max-height: 60vh; overflow-y: auto; } .hr-pick-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 8px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 5px; } .hr-pick-card:hover { border-color: var(--color-accent-strong); background: var(--bg2); } .hr-pick-name { font-weight: 700; font-size: 13px; } .hr-pick-meta { display: flex; flex-wrap: wrap; gap: 3px; } .hr-empty-pick { padding: 16px; text-align: center; color: var(--text2); font-style: italic; } /* ── Dragon Master ────────────────────────────────────────────────────── */ .dm-wrap { padding: 14px; display: flex; flex-direction: column; gap: 14px; } .dm-subtabs { display: flex; align-items: center; gap: 0; background: var(--bg2); border: 1px solid var(--border); border-radius: 16px 16px 0 0; padding: 0 4px; flex-wrap: wrap; } .dm-stab { background: transparent; border: none; color: var(--color-text-secondary); cursor: pointer; min-height: 44px; padding: 12px 18px; font-size: var(--font-size-base); font-weight: 700; border-bottom: 3px solid transparent; transition: color .15s, border-color .15s; } .dm-stab:hover { color: var(--color-text-primary); } .dm-stab:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .dm-stab-active { color: var(--color-accent-strong); border-bottom-color: var(--color-accent-primary); } .dm-save-state { margin-left: auto; font-size: var(--font-size-sm); font-weight: 700; padding: 4px 10px; border-radius: var(--border-radius-full); margin-right: 10px; } .dm-save-pending { background: var(--color-status-warning-soft); color: var(--color-status-warning); } .dm-save-ok { background: var(--color-status-success-soft); color: var(--color-status-success); } .dm-section { background: var(--bg2); border: 1px solid var(--border); border-radius: 0 0 16px 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; } .dm-h1 { font-size: 18px; font-weight: 700; color: var(--color-accent-strong); margin-bottom: 4px; } .dm-h2 { font-size: 14px; font-weight: 700; color: var(--color-accent-strong); margin: 14px 0 4px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); padding-bottom: 5px; } .dm-p { font-size: 12px; color: var(--text2); line-height: 1.5; } /* Cost cards */ .dm-cost-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .dm-cost-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; } .dm-cost-blue { border-left: 4px solid var(--color-accent-secondary); background: var(--color-accent-secondary-soft); } .dm-cost-purple { border-left: 4px solid var(--purple); background: var(--purple-soft); } .dm-cost-title { font-size: 13px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 6px; } .dm-cost-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; padding: 3px 0; } .dm-cost-row span { color: var(--text2); } .dm-cost-row b { color: var(--color-text-primary); font-weight: 600; } .dm-cost-row-total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; font-size: 13px; } .dm-cost-row-total b { color: var(--color-accent-strong); } .dm-cost-vs b { color: var(--ok-text); } .dm-warn { background: var(--color-status-warning-soft); border: 1px solid var(--warn-border); border-left: 4px solid var(--color-status-warning); color: var(--color-text-primary); padding: 10px 14px; border-radius: var(--border-radius-lg); font-size: 12px; line-height: 1.5; } .dm-tip { background: var(--color-status-success-soft); border: 1px solid var(--ok-border); border-left: 4px solid var(--ok-text); color: var(--color-text-primary); padding: 10px 14px; border-radius: var(--border-radius-lg); font-size: 12px; line-height: 1.5; } /* Tracker grid */ .dm-tracker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-bottom: 12px; } .dm-piece { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 12px; display: flex; flex-direction: column; gap: 6px; transition: border-color .12s, background .12s; } .dm-piece-ready { border-color: var(--ok-text); background: var(--color-status-success-soft); } .dm-piece-gold { border-color: var(--color-accent-strong); background: var(--color-accent-soft); opacity: .85; } .dm-piece-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .dm-piece-icon { font-size: 22px; } .dm-piece-name { font-size: 14px; font-weight: 700; color: var(--color-text-primary); flex: 1; } .dm-piece-tag { font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: var(--border-radius-lg); text-transform: uppercase; letter-spacing: .04em; } .dm-piece-tag-ready { background: var(--ok-bg); color: var(--ok-text); border: 1px solid var(--ok-border); } .dm-piece-tag-gold { background: var(--color-accent-soft); color: var(--color-accent-strong); border: 1px solid var(--color-accent-soft-border); } .dm-piece-row { display: flex; align-items: center; gap: 8px; font-size: 12px; } .dm-piece-lbl { color: var(--text2); width: 60px; flex-shrink: 0; } .dm-piece-inp { width: 64px; background: var(--bg); border: 1px solid var(--border); color: var(--color-text-primary); border-radius: var(--border-radius-lg); padding: 4px 6px; font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; } .dm-piece-inp:focus { border-color: var(--color-accent-strong); outline: none; } .dm-piece-target { color: var(--text2); font-size: 11px; } .dm-piece-prog-wrap { height: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--border-radius-lg); overflow: hidden; margin-top: 4px; } .dm-piece-prog-bar { height: 100%; background: linear-gradient(90deg, #58a6ff 0%, #a371f7 50%, var(--ok-text) 100%); transition: width .15s; } .dm-piece-prog-text { font-size: 11px; color: var(--text2); text-align: center; } .dm-piece-need { color: var(--color-status-warning); } .dm-piece-actions { margin-top: 4px; } .dm-piece-btn { width: 100%; min-height: 40px; padding: 8px; font-size: 11px; font-weight: 600; border-radius: var(--border-radius-lg); cursor: pointer; border: 1px solid var(--border); background: var(--bg); color: var(--text2); transition: background .1s, border-color .1s; } .dm-piece-btn:disabled { opacity: .5; cursor: not-allowed; } .dm-piece-btn-gold:not(:disabled) { background: var(--color-accent-soft); border-color: var(--color-accent-strong); color: var(--color-accent-strong); } .dm-piece-btn-gold:not(:disabled):hover { background: var(--gold); color: #000; } .dm-piece-btn-undo { color: var(--bad-text); border-color: var(--bad-border); } .dm-piece-btn-undo:hover { background: var(--bad-bg); } /* Totals row */ .dm-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 12px; } .dm-total-card { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--border-radius-lg); } .dm-total-val { font-size: 18px; font-weight: 700; color: var(--color-accent-strong); font-variant-numeric: tabular-nums; } .dm-total-lbl { font-size: 11px; color: var(--text2); text-transform: uppercase; letter-spacing: .04em; } /* Sequence diagrams */ .dm-seq { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--border-radius-lg); } .dm-seq-item { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--border-radius-lg); padding: 8px 12px; min-width: 80px; } .dm-seq-num { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; } .dm-seq-num-1 { color: var(--color-status-error); } .dm-seq-num-2 { color: var(--color-status-warning); } .dm-seq-num-3 { color: var(--color-accent-strong); } .dm-seq-num-4 { color: var(--color-status-success); } .dm-seq-num-5 { color: var(--color-accent-secondary-strong); } .dm-seq-num-6 { color: var(--purple); } .dm-seq-icon { font-size: 24px; } .dm-seq-label { font-size: 11px; color: var(--text2); font-weight: 600; } .dm-seq-arrow { font-size: 18px; color: var(--text2); font-weight: 700; } /* Fusion flow */ /* Blue and Purple routes as two clearly-separated cards */ .dm-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--space-4); margin-top: var(--space-3); } .dm-route { border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); padding: var(--space-4); } .dm-route-b { border-left: 4px solid var(--color-accent-secondary); background: var(--color-accent-secondary-soft); } .dm-route-p { border-left: 4px solid var(--purple); background: var(--purple-soft); } .dm-route-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 var(--space-2); } .dm-route-blue { color: var(--color-accent-secondary-strong); } .dm-route-purple { color: var(--purple); } .dm-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--border-radius-lg); } .dm-flow-node { display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: var(--border-radius-lg); padding: 8px 14px; min-width: 80px; border: 1px solid; } .dm-flow-blue { background: var(--color-accent-secondary-soft); border-color: var(--color-accent-secondary); color: var(--color-accent-secondary-strong); } .dm-flow-purple { background: var(--purple-soft); border-color: var(--purple); color: var(--purple); } .dm-flow-orange { background: var(--color-status-warning-soft); border-color: var(--color-status-warning); color: var(--color-status-warning); } .dm-flow-gold { background: var(--color-accent-soft); border-color: var(--color-accent-strong); color: var(--color-accent-strong); } .dm-flow-qty { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; } .dm-flow-tier { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .dm-flow-arrow { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text2); font-size: 18px; font-weight: 700; } .dm-flow-cost { font-size: 10px; color: var(--text2); font-weight: 600; } /* Decomp table */ .dm-table-wrap { overflow-x: auto; } .dm-table { width: 100%; border-collapse: collapse; font-size: 12px; } .dm-table th, .dm-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); } .dm-table th { background: var(--bg3); color: var(--color-accent-strong); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; } .dm-table td { font-variant-numeric: tabular-nums; } .dm-gain { color: var(--ok-text); font-weight: 700; } /* ── Tile War ─────────────────────────────────────────────────────────── */ .tw-wrap { background: #0b0e1a; /* intentional dark tactical console (both themes) */ color: #e8eaf0; padding: 16px 18px; margin: -22px; /* bleed to the edges of .roc-main padding */ min-height: calc(100vh - 60px); display: flex; flex-direction: column; gap: 10px; } .tw-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; } .tw-tab { background: var(--color-bg-tertiary); border: 1px solid transparent; border-radius: var(--border-radius-md); color: var(--color-text-secondary); min-height: 40px; padding: 8px 18px; font-size: var(--font-size-sm); font-weight: 700; letter-spacing: .01em; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .tw-tab:hover { color: var(--color-text-primary); background: var(--color-bg-sunken); } .tw-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .tw-tab-active { background: var(--color-bg-secondary); color: var(--color-text-primary); border-color: var(--color-border-primary); box-shadow: var(--shadow-sm); } .tw-tab-bad.tw-tab-active { border-top: 3px solid var(--bad-text); } .tw-tab-good.tw-tab-active { border-top: 3px solid var(--archer); } .tw-tab-play.tw-tab-active { border-top: 3px solid var(--cavalry); } .tw-topbar { background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-3) var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; } .tw-mode-title { flex: 1 1 auto; font-size: var(--font-size-base); font-weight: 800; color: var(--color-text-primary); letter-spacing: .01em; } .tw-spd-row { display: flex; align-items: center; gap: 5px; font-size: var(--font-size-sm); color: var(--color-text-secondary); } .tw-spd-lbl { margin-right: 4px; font-weight: 700; } .tw-spd-btn { background: var(--color-bg-secondary); border: 1px solid var(--color-border-strong); color: var(--color-text-secondary); border-radius: var(--border-radius-sm); min-height: 44px; padding: 5px 14px; font-size: var(--font-size-sm); font-weight: 700; cursor: pointer; } .tw-spd-btn:hover { color: var(--color-text-primary); background: var(--color-bg-tertiary); } .tw-spd-on { background: var(--color-accent-secondary-soft); color: var(--color-accent-secondary-strong); border-color: var(--color-accent-secondary-strong); } .tw-ctrl { background: var(--color-bg-secondary); border: 1px solid var(--color-border-strong); color: var(--color-text-primary); border-radius: var(--border-radius-md); min-height: 40px; padding: 7px 16px; font-size: var(--font-size-sm); font-weight: 700; cursor: pointer; transition: background .15s; } .tw-ctrl:hover { background: var(--color-bg-tertiary); } .tw-time { font-size: var(--font-size-md); font-weight: 800; color: var(--color-text-primary); font-variant-numeric: tabular-nums; min-width: 64px; } .tw-winner { margin-left: auto; padding: 6px 14px; border-radius: var(--border-radius-full); font-weight: 800; font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: .05em; } .tw-winner-blue { background: var(--color-accent-secondary-soft); color: var(--color-accent-secondary-strong); border: 1px solid var(--color-accent-secondary-strong); } .tw-winner-red { background: var(--color-status-error-soft); color: var(--color-status-error); border: 1px solid var(--color-status-error); } .tw-instructions { background: var(--color-accent-secondary-soft); border: 1px solid var(--color-accent-secondary-soft); border-left: 3px solid var(--color-accent-secondary-strong); color: var(--color-text-primary); padding: var(--space-3) var(--space-4); border-radius: var(--border-radius-md); font-size: var(--font-size-sm); line-height: var(--line-height-normal); } .tw-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; } .tw-leg { display: flex; align-items: center; gap: 5px; font-size: var(--font-size-sm); color: var(--color-text-secondary); } .tw-leg-sw { width: 13px; height: 13px; border-radius: var(--border-radius-lg); flex-shrink: 0; border: 1px solid transparent; } .tw-leg-cb { background: #4a90d9; border-color: #88ccff; } .tw-leg-cr { background: #d94a4a; border-color: #ff9999; } .tw-leg-blue { background: #185fa5; } .tw-leg-red { background: #a32d2d; } .tw-leg-blue-p { background: #185fa5; border: 2px dashed #6ab4ff; } .tw-leg-red-p { background: #a32d2d; border: 2px dashed #ff8888; } .tw-leg-dot { width: 12px; height: 12px; border-radius: 50%; background: #ff9966; border: 1.5px solid #fff; } .tw-leg-dot-ret { opacity: .4; border-color: rgba(255,255,255,.4); } .tw-body { display: flex; gap: 12px; align-items: flex-start; } .tw-grid-scroll { flex: 1 1 auto; overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; } .tw-grid-host { /* Sized inline by JS module via canvas + tile rows */ } /* Tile colors painted by JS via class assignment */ .tw-tile { /* Base sized inline by JS; styled here */ cursor: default; } .tw-tile.tw-blue { background: #185fa5; color: #b5d4f4; border-color: #2a7fcc; } .tw-tile.tw-red { background: #a32d2d; color: #f7c1c1; border-color: #cc4444; } .tw-tile.tw-blue-p { background: #185fa5; color: #b5d4f4; border: 2px dashed #6ab4ff; } .tw-tile.tw-red-p { background: #a32d2d; color: #f7c1c1; border: 2px dashed #ff8888; } .tw-tile.tw-cb { background: #4a90d9; color: #fff; border: 2px solid #88ccff; } .tw-tile.tw-cr { background: #d94a4a; color: #fff; border: 2px solid #ff9999; } .tw-castle-burning { background: #d94a4a; color: #fff; border: 2px solid #ff9999; animation: tw-burn .7s ease-in-out infinite; } @keyframes tw-burn { 0%, 100% { box-shadow: 0 0 4px 2px rgba(220,60,60,.5); } 50% { box-shadow: 0 0 14px 6px rgba(255,80,80,.95); } } /* Click affordance in play mode */ .tw-wrap[data-mode="play"] .tw-tile { cursor: crosshair; } .tw-tile:hover { filter: brightness(1.15); } /* Side panel (legions + log) */ .tw-side { flex: 0 0 280px; display: flex; flex-direction: column; gap: 10px; } .tw-side-section { background: #22252e; border: 1px solid #2e3140; border-radius: var(--border-radius-lg); padding: 10px 12px; } .tw-side-hdr { font-size: 11px; font-weight: 700; color: var(--color-accent-strong); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #2e3140; } .tw-leg-row { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: var(--border-radius-lg); font-size: 11px; margin-bottom: 3px; background: #1a1d24; border: 1px solid #2a2e38; } .tw-leg-row-blue { border-left: 3px solid #4a90d9; } .tw-leg-row-red { border-left: 3px solid #d94a4a; } .tw-leg-id { font-weight: 700; color: #e8eaf0; width: 38px; flex-shrink: 0; } .tw-leg-status { flex: 1; color: #9aa0b4; font-size: 10.5px; } .tw-leg-status-idle { color: #6a7080; } .tw-leg-status-out { color: #ffb070; } .tw-leg-status-ret { color: #9aa0b4; } .tw-leg-status-capturing { color: #f7a0a0; font-weight: 700; } .tw-leg-eta { color: var(--color-accent-strong); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 10.5px; } .tw-log { display: flex; flex-direction: column; gap: 3px; max-height: 240px; overflow-y: auto; } .tw-log-entry { font-size: 10.5px; line-height: 1.4; padding: 4px 6px; border-radius: var(--border-radius-lg); background: #1a1d24; } .tw-log-neutral { color: #9aa0b4; } .tw-log-good { color: #a0f7c0; } .tw-log-warn { color: #f7c1a0; } .tw-log-bad { color: #f7a0a0; } .tw-log-defeat { color: #ff6060; font-weight: 700; } .tw-log-win { color: #60ff90; font-weight: 700; } .tw-verdict { background: #22252e; border: 1px solid #2e3140; border-left: 3px solid #4a90d9; border-radius: var(--border-radius-lg); padding: 10px 14px; transition: border-color .4s; } .tw-verdict-defeat { border-left-color: #ff3333; background: #2e1a1a; } .tw-verdict-t { font-size: 11px; color: #9aa0b4; margin-bottom: 4px; } .tw-verdict-msg { font-size: 13px; line-height: 1.55; } .tw-vm-neutral { color: #9aa0b4; } .tw-vm-good { color: #a0f7c0; } .tw-vm-warn { color: #f7c1a0; } .tw-vm-bad { color: #f7a0a0; } .tw-vm-defeat { color: #ff6060; font-weight: 700; font-size: 14px; } .tw-vm-win { color: #60ff90; font-weight: 700; font-size: 14px; } @media (max-width: 1100px) { .tw-body { flex-direction: column; } .tw-side { flex: 0 0 auto; width: 100%; } } /* ════════════════════════════════════════════════════════════════ AURORA GLASS — feature-page rollout layer Upgrades the top-level panels of every feature namespace to the glass treatment + Aurora radii. Declared last so it wins over the original (lower-specificity, earlier) rules. Nested cards keep their solid surfaces for readability over the glass. ════════════════════════════════════════════════════════════════ */ /* Top-level panels / toolbars / sections → frosted glass */ .rtp-toolbar, .rtp-filterbar, .rtp-statbar, .rtp-book, .ntp-row, .hc-ctrls, .hc-selbar, .hc-result-col, .sp-toolbar, .sp-canvas-wrap, .sp-side-section, .ec-toolbar, .ec-section, .vp-header, .hr-section, .dm-section, .dm-subtabs { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); backdrop-filter: blur(var(--glass-blur)) saturate(150%); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--shadow); } /* Dragon Master keeps its tab-strip + body visually joined */ .dm-subtabs { border-radius: var(--radius) var(--radius) 0 0; border-bottom: none; box-shadow: none; } .dm-section { border-radius: 0 0 var(--radius) var(--radius); } /* Virtue header spans full width — square it, keep the glass */ .vp-header { border-radius: 0; box-shadow: none; } /* Modals & dialogs → glass + soft depth, with a blurred backdrop */ .ntp-modal-box { background: var(--glass-bg); -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(160%); backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(160%); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .ntp-modal-backdrop, .mud-overlay-dialog { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .mud-dialog { background: var(--glass-bg) !important; -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(160%); backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(160%); border: 1px solid var(--glass-border); border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg) !important; } /* Rounder, friendlier controls across the feature pages */ .rtp-btn, .rtp-dd-btn, .rtp-search, .hc-sel, .ec-input, .ec-select, .ec-vt-btn, .ec-date, .vp-troop-btn, .vp-path-btn, .vp-col-prog, .dm-piece-btn, .dm-piece-inp { border-radius: var(--radius-sm); } /* Accent glow on focus for the main search/inputs (gold == accent now) */ .rtp-search:focus, .hc-sel:focus, .ec-input:focus, .ec-select:focus, .dm-piece-inp:focus { box-shadow: 0 0 0 3px var(--accent-soft); } /* Lift cards a touch more on hover, with an Aurora edge */ .ntp-node:hover, .hcard:hover, .hr-pick-card:hover, .dm-piece:hover, .ec-tile-card:hover, .vp-tree-card:hover { box-shadow: var(--shadow), 0 0 0 1px var(--glass-border); } @media (prefers-reduced-motion: reduce) { .ntp-node, .hcard, .hr-pick-card, .dm-piece, .ec-tile-card, .vp-tree-card { transition: none; } } /* ── Settings pages (/account and /castle) ──────────────────────────────────── Global rather than scoped: /account and /castle share this layout and these controls, and Blazor's scoped CSS is per-component, so a .razor.css on one page would leave the other unstyled. Same reasoning as the .sp-* planner styles above. */ /* One centred column of segments. .roc-main is unconstrained, so on a wide screen the old auto-fit grid spread these six cards over three or four columns of uneven height — settings ended up scattered rather than read in order. A single column keeps each segment one measure wide and the reading order top to bottom; the cap is what stops a full-width monitor stretching a form field to 1500px. Below the cap the width rule is inert, so narrow screens are unaffected. */ .acct-page { --acct-col: 760px; max-width: var(--acct-col); margin-inline: auto; } .acct-grid { display: flex; flex-direction: column; gap: var(--space-5); } /* Castle profile: active-hours grid (+0..+23) and castle-type chips. Column counts are fixed rather than auto-filled, and every one of them divides 24 exactly, so the last row is always full. auto-fill used to be fine in a ~350px card, but in the wider single column it fitted 15 across and left a ragged 9 on the second row. */ .acct-hours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 x 6 */ gap: 6px; margin-top: var(--space-2); } @media (min-width: 480px) { .acct-hours { grid-template-columns: repeat(8, minmax(0, 1fr)); } /* 8 x 3 */ } @media (min-width: 760px) { .acct-hours { grid-template-columns: repeat(12, minmax(0, 1fr)); } /* 12 x 2 */ } .acct-hour { min-height: 40px; padding: 6px 4px; border: 1px solid var(--color-border-strong); background: var(--color-bg-tertiary); color: var(--color-text-secondary); border-radius: var(--border-radius-md); font-weight: 700; font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .acct-hour:hover { color: var(--color-text-primary); } .acct-hour.is-on { background: var(--color-accent-soft); border-color: var(--color-accent-strong); color: var(--color-accent-strong); } .acct-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .acct-chip { min-height: 40px; padding: 8px 14px; border: 1px solid var(--color-border-strong); background: var(--color-bg-tertiary); color: var(--color-text-secondary); border-radius: var(--border-radius-full); font-weight: 700; font-size: var(--font-size-sm); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .acct-chip:hover { color: var(--color-text-primary); } .acct-chip.is-on { background: var(--color-accent-secondary-soft); border-color: var(--color-accent-secondary-strong); color: var(--color-accent-secondary-strong); } /* Castle buddies picker */ .acct-buddies { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 6px; margin-top: var(--space-2); } .acct-buddy { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-md); cursor: pointer; font-size: var(--font-size-sm); } .acct-buddy.is-on { background: var(--color-accent-secondary-soft); border-color: var(--color-accent-secondary-strong); } .acct-buddy-name { font-weight: 700; color: var(--color-text-primary); } .acct-buddy-coord { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--color-text-tertiary); font-size: 12px; } .acct-toggle { display: flex; align-items: center; gap: 10px; margin: var(--space-3) 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); cursor: pointer; } .acct-coords { display: flex; gap: var(--space-4); } .acct-coords .roc-field { flex: 1; } .acct-push-status { padding: var(--space-3) var(--space-4); border-radius: var(--border-radius-lg); font-size: var(--font-size-sm); line-height: 1.5; margin-bottom: var(--space-3); } .acct-push-status.is-on { background: var(--color-status-success-soft); color: var(--color-text-primary); } .acct-push-status.is-off { background: var(--color-bg-tertiary); color: var(--color-text-secondary); } .acct-push-status.is-info { background: var(--color-accent-secondary-soft); color: var(--color-text-primary); } .acct-push-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } .acct-qr { display: block; width: 200px; height: 200px; border-radius: var(--border-radius-lg); background: #fff; padding: var(--space-3); margin: var(--space-3) 0; } .acct-recovery { list-style: none; padding: var(--space-3) var(--space-4); margin: var(--space-3) 0; background: var(--color-bg-tertiary); border-radius: var(--border-radius-lg); columns: 2; column-gap: var(--space-5); } .acct-recovery li { padding: 2px 0; } .acct-recovery code { font-size: var(--font-size-sm); letter-spacing: 0.05em; } /* Deletion is irreversible, so the card that holds it is marked out rather than sitting as just another section in the stack. */ .acct-danger { border-color: var(--color-status-error); } /* A shieldwall row opened from a notification. Filled rather than outlined so the row the link named is obvious without scrolling hunting for it. */ .sw-highlight { border: 2px solid var(--color-accent-secondary-strong); } /* Countdown on a notification. Amber inside the last hour, because that is when the pad deadline stops being information and starts being a problem. */ .roc-bell-countdown { margin-left: 8px; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--color-accent-secondary-strong); } .roc-bell-countdown.is-urgent { color: var(--color-status-warning); } /* Unread dot on the What's new menu entry. A dot rather than a count: there is only ever one thing to say — there is something you have not read. */ .roc-usermenu-dot { width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--color-accent-primary); flex: none; } /* What's new. The kind chip is fixed-width so the change text starts on the same column down the whole list and can be skimmed. */ .wn-kind { min-width: 76px; justify-content: center; } .wn-item { padding-left: 0; padding-right: 0; } .wn-timeline { padding-left: 0; } /* Shieldwall row times: the three moments, game time and the member's own day beside it. Borderless because it is a label-value list rather than data to compare across rows. */ /* Currency-tinted KPI chips, so the War Badge figure and the Courage Medal figure are not two identical-looking numbers side by side. */ .rtp-kpi-wb { color: var(--cavalry); } .rtp-kpi-cm { color: var(--archer); } .rtp-kpi-res { color: var(--footman); } .rtp-kpi-mix { color: var(--purple); } .rtp-kpi-fm { color: var(--color-status-error); } /* The smaller "spent" figure inside a currency chip: present but subordinate to what is left, which is the number being planned against. */ .rtp-kpi-sub { font-size: 10px; opacity: 0.75; font-weight: 400; margin-left: 4px; } /* Shieldwall timeline: the row%s five moments side by side. Was five two-line table rows, which pushed the castle list off the screen on every wall. Wraps rather than scrolls, so a narrow phone gets two or three per line instead of a sideways scrollbar. */ .sw-times { display: flex; flex-wrap: wrap; gap: var(--space-2); } .sw-time { display: flex; flex-direction: column; gap: 1px; padding: 4px 8px; min-width: 96px; border: 1px solid var(--border); border-radius: var(--border-radius-lg); background: var(--color-bg-tertiary); } .sw-time-t { font-size: 11px; font-weight: 700; color: var(--text2); } .sw-time-game { font-size: 12px; color: var(--text); white-space: nowrap; } .sw-time-local { font-size: 11px; color: var(--text3); white-space: nowrap; } /* Spec preset menu and the "loaded from" line. Presets used to be invisible until you opened a dialog; the point of these is that the page says what you have and what you are looking at. */ .sp-preset-item { display: flex; flex-direction: column; gap: 1px; min-width: 180px; } .sp-preset-name { font-size: 13px; color: var(--text); } .sp-preset-when { font-size: 11px; color: var(--text3); } .sp-loaded-preset { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); padding: 6px 10px; font-size: 12px; color: var(--text2); background: var(--color-bg-tertiary); border: 1px solid var(--border); border-radius: var(--border-radius-lg); }