/* ============================================================================ SHOSHIN RYU MEMBER PORTAL — MASTER STYLESHEET (portal.css) ============================================================================ Served at: https://portal.shoshinryu.org/portal/v1/css/portal.css Repo path: api/webflow/css/portal.css Loaded by: in the Webflow portal page custom code (staging AND production portal pages). HISTORY ------- 2026-07-31 v7.8 ANALYTICS PHASE D -- chart tokens (--viz-*, validated for colorblind separation in both modes), chart containers, and the dojo-selector filter row. 2026-07-31 v7.7.1 Dashboard live-test fixes: .ma-dash-title (the panel h2 was inheriting Webflow's display-size heading) and .ma-dash-scroll (monthly-trend table overflowed the card; .ma-table--wide's 640px floor removed from it). 2026-07-31 v7.7 ANALYTICS DASHBOARD (Phase C) — styles for the new staff-only Dashboard tab (#panel-dashboard, added to Embed 1 v7.4). All rules are namespaced .ma-dash-* and ADDITIVE: the panel reuses .ma-card, .ma-table, .ma-table--stack, .ma-table-wrap and .ma-btn for everything structural, so it inherits the responsive and stacked-table behavior already audited in v7.2/ v7.3 for free. Dark values live in the .yudansha-mode block at the end of the file, following the standing theming pattern. 2026-07-03 v7.6 ADMIN GUIDE DARK MODE — defines the CSS custom property palette (--ma-guide-*) used by the Help Center Administrator Guide. The guide fragment (built by guideMdToSafeHtml in routes/support.js and rendered by features/support.js) uses INLINE styles whose colors are var() references with light-theme fallbacks baked in — inline styles beat stylesheet rules (v7.x modal lesson), but var() resolves against the cascade, so the .yudansha-mode block at the end of this file re-themes the entire guide (light text, gold accents) with zero JS changes. Purely ADDITIVE — no existing rule touched. 2026-06-15 v7.5 BREAKPOINT AUDIT (yudansha shell) — dark background now fills the full portal container in yudansha mode: .yudansha-mode gets background:#0f0f0f so any gap within #ma-portal is dark; .ma-layout likewise. Exit button repositioned on phones via order:-1 (CSS flexbox order property) so it renders at the TOP of the header column as a "back button" — UX standard for mobile; no HTML change needed, order is only applied in ≤640px block. 2026-06-15 v7.4 BREAKPOINT AUDIT — .ma-kebab-btn extracted from inline styles to CSS (base + :hover + yudansha-mode variants). Removes all onmouseover/onmouseout inline handlers from roster.js row/button elements; CSS :hover does not linger on touch the way inline handlers do (touch tap fires mouseover but not the matching mouseout on finger-lift, leaving a permanent tint on stacked cards). Row hover on .ma-table--stack already neutralised; this closes the kebab button half of the same problem. 2026-06-12 v7.3.1 Width-floor rescope: 640px desktop floor moved from .ma-table--stack to opt-in .ma-table--wide (the org overview's 2-col Dojo table was inheriting it). 2026-06-12 v7.3 STACKED TABLES + CREDENTIAL BADGES (Stage 2 Push B). Additive again: (1) .ma-table--stack -- tables that opt in (Roster flat + grouped, Household Members, Billing Breakdown, Payment History) render on phones as labeled mini-cards instead of scrolling horizontally; the v7.2 sticky-column/scroll-shadow treatment now applies only to tables that DON'T opt in (admin mega-tables like the audit log). (2) .ma-cred-* badges -- the Roster's account- credentials lifecycle (invited / started / credentialed / expired / none), fed by the new credential_status field on GET /members. 2026-06-12 v7.2 RESPONSIVE PASS (Stage 2 Push A). All changes are ADDITIVE -- a new "RESPONSIVE PASS" section at the bottom of this file. No pre-existing rule was modified, so the cascade for every existing breakpoint behaves exactly as before; the new tiers win only where they match (equal specificity, later in file). Tiers: phone polish (<=640px: 16px inputs to stop iOS focus-zoom, 44px touch targets, sticky first table column + scroll shadows), NEW tablet tier (641-1023px), wide (>=1920px: container 1200->1500px), 4K (>=2560px: container caps at 1760px, centered -- deliberate decision (Joey, 2026-06-12) NOT to fill 4K edge-to-edge). 2026-06-12 v7.0 Extracted verbatim from Webflow Embed 1 v6.6 (which had hit 49,973 of Webflow's 50,000-char embed limit). The embed now carries HTML only; ALL portal CSS lives here. Rules are byte-identical to v6.6 — only these comment banners were added. The pre-extraction monolith is archived at webflow/_legacy/SR-Portal-Embed-1-HTML-CSS-v6.6.html and its change history is in the vault: 03-Components/Embed 1 Changelog.md CACHING ------- This file is served UNSTAMPED (no ?v= query string), so app.js sends Cache-Control: no-store, must-revalidate — every pipeline deploy of this file is live on the next page load. No Webflow re-paste is ever needed. CONVENTIONS ----------- - Every portal selector is prefixed .ma- / #ma- (Member Area) to avoid collisions with Webflow site styles. #ma-portal is the root container. - Brand palette (see vault: Brand & Design): Shoshin Red #c3301b primary accent, active states Near-black #1a1a1a sidebar, auth box, dark surfaces Charcoal #474546 muted headings Yudansha Gold #c9a84c black-belt sub-portal accent - Fonts: Montserrat (headings/UI labels), Roboto (body). - .yudansha-mode rules at the bottom are the black-belt sub-portal dark theme; many target inline style="" attributes ([style*="..."]) because feature modules render with inline styles — do not "simplify" those selectors without testing the Yudansha shell. ============================================================================ */ /* ── FONTS ───────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;900&family=Roboto:wght@400;500&display=swap'); /* ── ROOT CONTAINER ──────────────────────────────────────────────────────── */ #ma-portal { font-family: 'Roboto', sans-serif; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0.75rem; } #ma-portal * { box-sizing: border-box; } /* ── TOUCH FEEDBACK — :active states for touchscreens ────────────────────── */ .ma-btn:active { opacity: 0.7; transform: scale(0.97); } .ma-tab:active { background: rgba(255,255,255,0.12) !important; } .ma-video-card:active { box-shadow: 0 1px 4px rgba(0,0,0,0.12); transform: scale(0.98); } .ma-event-card:active { box-shadow: none; transform: scale(0.99); } .ma-sidebar-signout:active { border-color: #c3301b; color: #c3301b; opacity: 0.8; } .ma-yudansha-entry-btn:active { background: rgba(201,168,76,0.3); } .ma-yudansha-landing-card:active { border-color: #c9a84c; transform: scale(0.98); } .ma-hamburger:active { background: rgba(255,255,255,0.2); } * { -webkit-tap-highlight-color: transparent; } /* ── KEBAB (⋮) ACTION BUTTON — roster rows ───────────────────────────────── */ /* Base styles + CSS hover replace the onmouseover/onmouseout inline handlers */ /* that were removed 2026-06-15 (breakpoint audit). Inline handlers fire on */ /* touch tap and never fire the matching mouseout on finger-lift, leaving a */ /* permanent background tint on stacked cards. CSS :hover does not have this */ /* problem — browsers suppress :hover on touch targets after the tap completes. */ .ma-kebab-btn { background: transparent; border: none; cursor: pointer; font-size: 18px; line-height: 1; color: #555; padding: 2px 8px; border-radius: 4px; font-weight: bold; } .ma-kebab-btn:hover { background: #eee; color: #000; } .yudansha-mode .ma-kebab-btn { color: #888; } .yudansha-mode .ma-kebab-btn:hover { background: rgba(255,255,255,0.08); color: #f0f0f0; } /* ── KEBAB DROPDOWN MENU ITEMS ───────────────────────────────────────────── */ /* The floating action dropdown that appears on ⋮ click. Base styles moved */ /* from inline to CSS 2026-06-15 (same touch-linger fix as .ma-kebab-btn). */ /* Per-item text color is still inline (it varies by action severity). */ .ma-kebab-menu-item { display: block; width: 100%; border: none; background: #fff; text-align: left; padding: 9px 14px; font-size: 13px; cursor: pointer; font-family: inherit; } .ma-kebab-menu-item:hover { background: #f5f5f5; } /* ── AUTH (LOGIN) SCREEN ─────────────────────────────────────────────────── */ .ma-auth-box { max-width: 400px; margin: 1.5rem auto; text-align: center; padding: 2.5rem 2rem; background: #1a1a1a; border-radius: 4px; border-top: 4px solid #c3301b; } .ma-auth-box h2 { margin: 0 0 0.5rem; font-size: 1.25rem; font-family: 'Montserrat', sans-serif; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #fff; } .ma-auth-box p { color: #adadad; margin: 0 0 1.5rem; font-size: 0.88rem; } .ma-auth-tagline { font-family: 'Montserrat', sans-serif; font-size: 9px; letter-spacing: 0.8px; text-transform: uppercase; color: #474546; margin: 0.5rem 0 1.25rem; text-align: center; white-space: nowrap; overflow: visible; } /* ── BUTTONS ─────────────────────────────────────────────────────────────── */ .ma-btn { display: inline-block; padding: 0.65rem 1.4rem; border-radius: 8px; font-size: 0.95rem; font-weight: 500; cursor: pointer; border: none; transition: opacity 0.15s; } .ma-btn:hover { opacity: 0.85; } .ma-btn-primary { background: #c3301b; color: #fff; width: 100%; font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } .ma-btn-secondary { background: #fff; color: #1a1a1a; width: 100%; font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; border: 2px solid #474546; } .ma-btn-sm { background: #f0f0f0; color: #333; font-size: 0.82rem; padding: 0.4rem 0.9rem; } .ma-btn-danger { background: #e74c3c; color: #fff; } .ma-btn-success { background: #27ae60; color: #fff; } .ma-btn-ghost { background: none; border: 1px solid #333; color: #888; transition: color 0.15s, border-color 0.15s; } .ma-btn-ghost:hover { color: #f0f0f0; border-color: #555; opacity: 1; } /* ── STATUS DOTS — membership status indicators ──────────────────────────── */ .ma-status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:middle; flex-shrink:0; } .ma-status-active { background:#16a34a; } .ma-status-cancelled { background:#9ca3af; } .ma-status-pending { background:#d97706; } .ma-status-past_due { background:#dc2626; } .ma-status-lifetime { background:#c9a84c; } .ma-status-house { background:#6366f1; } .ma-status-inactive { background:#9ca3af; } /* ── PROFILE-INCOMPLETE BANNER ───────────────────────────────────────────── */ .ma-profile-banner { background: #1a1a1a; color: #fff; padding: 0.75rem 1rem; border-left: 4px solid #c3301b; border-radius: 8px; margin-bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .ma-profile-banner p { margin: 0; font-size: 0.88rem; } .ma-profile-banner + .ma-layout { margin-top: 0.75rem; } /* ── MAIN LAYOUT — SIDEBAR + CONTENT SHELL ───────────────────────────────── */ .ma-layout { display: flex; width: 100%; min-height: 560px; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; } .ma-sidebar { width: 200px; flex-shrink: 0; background: #1a1a1a; display: flex; flex-direction: column; } .ma-sidebar-logo { padding: 1rem 0.85rem 0.85rem; border-bottom: 1px solid rgba(255,255,255,0.08); } .ma-sidebar-logo img { width: 100%; height: auto; display: block; max-width: 168px; } .ma-sidebar-user { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 0.85rem; border-bottom: 1px solid rgba(255,255,255,0.08); } .ma-sidebar-user-info { min-width: 0; } .ma-sidebar-name { font-family: 'Montserrat', sans-serif; font-size: 0.78rem; font-weight: 700; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ma-sidebar-id { font-size: 0.7rem; color: #adadad; margin-top: 2px; } .ma-avatar { width: 32px; height: 32px; border-radius: 50%; background: #c3301b; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; font-family: 'Montserrat', sans-serif; flex-shrink: 0; } .ma-tabs { flex: 1; display: flex; flex-direction: column; padding: 0.4rem 0; overflow-y: auto; } .ma-sidebar-section { font-family: 'Montserrat', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #474546; padding: 0.6rem 0.85rem 0.2rem; } .ma-sidebar-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 0.4rem 0.85rem; } .ma-tab { display: block; width: 100%; padding: 0.48rem 0.85rem; background: none; border: none; border-left: 3px solid transparent; font-size: 0.85rem; font-family: 'Roboto', sans-serif; font-weight: 400; color: #adadad; cursor: pointer; text-align: left; transition: color 0.1s, background 0.1s, border-left-color 0.1s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0; } .ma-tab:hover:not(.active) { color: #e5e7eb; background: rgba(255,255,255,0.05); border-left-color: rgba(195,48,27,0.4); } .ma-tab.active { color: #ffffff; background: rgba(255,255,255,0.08); border-left-color: #c3301b; font-weight: 500; } .ma-sidebar-footer { padding: 0.75rem 0.85rem; border-top: 1px solid rgba(255,255,255,0.08); } .ma-sidebar-signout { width: 100%; padding: 0.4rem; background: none; border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; font-size: 0.75rem; font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #adadad; cursor: pointer; transition: border-color 0.12s, color 0.12s; } .ma-sidebar-signout:hover { border-color: #c3301b; color: #c3301b; } /* ── CONTENT AREA — PANELS, CARDS, GRIDS ─────────────────────────────────── */ .ma-content { flex: 1; padding: 1.25rem; background: #f9f9f9; color: #222; min-width: 0; min-height: 560px; overflow-y: auto; } .ma-panel { display: none; } .ma-panel.active { display: block; } .ma-card { background: #fafafa; border: 1px solid #e8e8e8; border-radius: 10px; padding: 1.25rem; margin-bottom: 1rem; } .ma-card h3 { margin: 0 0 0.75rem; font-size: 0.85rem; font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #1a1a1a; border-bottom: 2px solid #c3301b; padding-bottom: 0.5rem; display: inline-block; } .ma-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } @media (max-width: 600px) { .ma-grid-2 { grid-template-columns: 1fr; } } /* ── FORM FIELDS ─────────────────────────────────────────────────────────── */ .ma-field { margin-bottom: 0.75rem; } .ma-field label { display: block; font-size: 0.82rem; color: #555; margin-bottom: 0.25rem; font-weight: 500; } .ma-field input, .ma-field select { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #ddd; border-radius: 6px; font-size: 0.9rem; } .ma-val { font-size: 0.95rem; color: #222; } .ma-input { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #ddd; border-radius: 6px; font-size: 0.9rem; } .ma-label { display: block; font-size: 0.82rem; color: #555; margin-bottom: 0.25rem; font-weight: 500; } /* ── BADGES — rank / status pills ────────────────────────────────────────── */ .ma-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; } .ma-badge-green { background: #d4edda; color: #155724; } .ma-badge-red { background: #f8d7da; color: #721c24; } .ma-badge-yellow { background: #fff3cd; color: #856404; } .ma-badge-gray { background: #e2e3e5; color: #383d41; } .ma-badge-black { background: #1a1a1a; color: #fff; } .ma-badge-red-brand { background: #c3301b; color: #fff; } .ma-badge-lifetime { background: #1a1a1a; color: #c9a84c; border: 1px solid #c9a84c; font-weight: 700; } .rank-black { background: #1a1a1a; color: #fff; font-family: 'Montserrat', sans-serif; padding: 0.2rem 0.7rem; border-radius: 20px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; } .rank-other { background: #e8e8e8; color: #333; padding: 0.2rem 0.7rem; border-radius: 20px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; } /* ── VIDEOS TAB — grid, cards, Plyr overlay ──────────────────────────────── */ .ma-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .ma-video-card { border: 1px solid #e2e2e2; border-radius: 8px; overflow: hidden; cursor: pointer; transition: box-shadow 0.15s; } .ma-video-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); } .ma-video-thumb { width: 100%; aspect-ratio: 16/9; background: #1a1a1a; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2rem; } .ma-video-info { padding: 0.65rem; } .ma-video-info h4 { margin: 0 0 0.25rem; font-size: 0.9rem; } .ma-video-info p { margin: 0; font-size: 0.78rem; color: #777; } .ma-player-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 9999; align-items: center; justify-content: center; padding: 1rem; } .ma-player-overlay.open { display: flex; } .ma-player-wrap { width: 100%; max-width: 860px; } .ma-player-close { position: absolute; top: 1rem; right: 1.25rem; color: #fff; font-size: 1.6rem; cursor: pointer; background: none; border: none; } /* ── TABLES — roster, billing history, audit log ─────────────────────────── */ .ma-table { width: 100%; border-collapse: collapse; font-size: 0.87rem; } .ma-table th { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 2px solid #e2e2e2; font-size: 0.8rem; color: #555; } .ma-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid #f0f0f0; vertical-align: middle; } .ma-table tr:hover td { background: #fafafa; } /* ── ALERTS, LOADING STATES, SPINNER ─────────────────────────────────────── */ .ma-alert { padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.9rem; } .ma-alert-info { background: #cfe2ff; color: #084298; border: 1px solid #b6d4fe; } .ma-alert-warning { background: #fff3cd; color: #664d03; border: 1px solid #ffecb5; } .ma-alert-success { background: #d1e7dd; color: #0f5132; border: 1px solid #badbcc; } .ma-alert-error { background: #f8d7da; color: #842029; border: 1px solid #f5c2c7; } .ma-loading { text-align: center; padding: 3rem; color: #888; font-size: 0.9rem; } .ma-spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid #ddd; border-top-color: #c3301b; border-radius: 50%; animation: spin 0.7s linear infinite; margin-right: 0.5rem; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } /* ── PROMOTION FORM + FILTER BARS ────────────────────────────────────────── */ .ma-promo-form { background: #f8f9fa; border: 1px dashed #ccc; border-radius: 8px; padding: 1rem; margin-top: 1rem; } .ma-filter-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; } .ma-filter-bar input, .ma-filter-bar select { padding: 0.4rem 0.7rem; border: 1px solid #ddd; border-radius: 6px; font-size: 0.85rem; } .ma-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; } .ma-dot-green { background: #27ae60; } .ma-dot-red { background: #e74c3c; } .ma-dot-yellow { background: #f39c12; } /* ── MOBILE TOPBAR, HAMBURGER, SIDEBAR OVERLAY ───────────────────────────── */ .ma-topbar { display: none; align-items: center; background: #1a1a1a; padding: 0.55rem 0.85rem; gap: 0.75rem; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(255,255,255,0.08); transition: background 300ms ease, border-color 300ms ease; } .ma-hamburger { background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; padding: 0.1rem 0.35rem; line-height: 1; flex-shrink: 0; border-radius: 4px; transition: background 0.15s; } .ma-hamburger:hover { background: rgba(255,255,255,0.1); } .ma-topbar-logo img { height: 26px; width: auto; display: block; } .ma-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 1500; cursor: pointer; } .ma-sidebar-overlay.open { display: block; } #ma-impersonation-banner { box-sizing: border-box; } /* ── MOBILE — PORTAL-WIDE OVERRIDES (max-width: 640px) ── */ /* Slide-in sidebar, stacked grids, horizontal-scroll tables, larger touch */ /* targets. The Stage 2 responsive pass will primarily grow this section. */ @media (max-width: 640px) { #ma-portal { padding: 0; overflow-x: hidden; } .ma-topbar { display: flex; } .ma-layout { flex-direction: row; border-radius: 0; border-left: none; border-right: none; min-height: 100vh; overflow: visible; } .ma-sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 220px; z-index: 1600; transform: translateX(-100%); transition: transform 0.25s ease; overflow-y: auto; } .ma-sidebar.open { transform: translateX(0); } .ma-sidebar-name { font-size: 0.72rem; } .ma-sidebar-id { font-size: 0.65rem; } .ma-avatar { width: 28px; height: 28px; font-size: 0.72rem; } .ma-sidebar-logo { padding: 0.6rem 0.75rem; } .ma-sidebar-user { padding: 0.6rem 0.75rem; gap: 0.5rem; } .ma-sidebar-footer { padding: 0.5rem 0.75rem; } .ma-tab { padding: 0.26rem 0.75rem; font-size: 0.82rem; line-height: 1.4; } .ma-sidebar-section { padding: 0.3rem 0.75rem 0.1rem; font-size: 0.6rem; } .ma-sidebar-divider { margin: 0.25rem 0.75rem; } .ma-content { padding: 0.75rem; min-height: 60vh; width: 100%; overflow-x: auto; } .ma-card { padding: 0.85rem; overflow-x: auto; } .ma-card h3 { font-size: 0.78rem; } .ma-grid-2 { grid-template-columns: 1fr; } .ma-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ma-table { min-width: 480px; } .ma-table th { font-size: 0.72rem; padding: 0.4rem 0.5rem; } .ma-table td { font-size: 0.8rem; padding: 0.4rem 0.5rem; } .ma-filter-bar { flex-direction: column; gap: 0.4rem; } .ma-filter-bar input, .ma-filter-bar select, .ma-filter-bar button { width: 100%; margin-left: 0 !important; } .ma-btn { padding: 0.75rem 1rem; font-size: 0.88rem; } .ma-btn-sm { padding: 0.5rem 0.75rem; font-size: 0.8rem; } .ma-auth-box { margin: 1rem auto; padding: 2rem 1.25rem; } .ma-profile-banner { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .ma-video-grid { grid-template-columns: 1fr; } #ma-impersonation-banner { font-size: 11px !important; padding: 5px 10px !important; } #ma-impersonation-banner button { font-size: 11px !important; padding: 2px 8px !important; } .ma-media-grid { grid-template-columns: 1fr; } /* CSS Grid for Yudansha header on phones — the only clean solution for */ /* exit[col1, left] | title[col2, centered] on ONE row, badge centered */ /* below on row 2. grid-template-columns: auto 1fr means col1 sizes to */ /* the exit button, col2 gets the rest. Explicit grid placement on every */ /* item overrides DOM order so exit and title land on the same row. */ /* !important: display:grid beats base display:flex (later in file); */ /* gap beats base gap:1rem; margin-left:0 beats base margin-left:auto. */ /* position:static clears position:absolute from a previous attempt. */ .ma-yudansha-header { display: grid !important; grid-template-columns: auto 1fr; align-items: center; gap: 0.35rem 0.5rem !important; } .ma-yudansha-exit { grid-column: 1; grid-row: 1; position: static !important; margin-left: 0 !important; } .ma-yudansha-title { grid-column: 2; grid-row: 1; justify-content: center; } .ma-yudansha-rank-badge { grid-column: 1 / -1; grid-row: 2; justify-self: center; } .ma-yudansha-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ma-yudansha-tab { padding: 0.45rem 0.75rem; font-size: 0.82rem; white-space: nowrap; flex-shrink: 0; } #ma-next-rank-badge { white-space: nowrap; font-size: 0.65rem; margin-left: 0; margin-top: 3px; } .ma-videos-filter-bar { flex-wrap: wrap !important; } .ma-videos-filter-bar > div[style*="flex:1"] { flex: 1 1 100% !important; min-width: 0; } } /* ── EVENTS MEDIA HUB ────────────────────────────────────────────────────── */ .ma-event-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 1rem 1.1rem; margin-bottom: 0.75rem; cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s; } .ma-event-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-color: #c3301b; } .ma-event-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; } .ma-event-card-title { font-size: 0.97rem; font-weight: 600; color: #1a1a1a; margin: 0; } .ma-event-type-badge { display: inline-block; padding: 0.18rem 0.5rem; border-radius: 4px; font-size: 0.72rem; font-weight: 700; font-family: 'Montserrat', sans-serif; letter-spacing: 0.5px; text-transform: uppercase; flex-shrink: 0; background: #f0f0f0; color: #474546; } .ma-event-status-current { background: #e8f5e9; color: #2e7d32; } .ma-event-status-historical { background: #f5f5f5; color: #888; } .ma-event-card-meta { font-size: 0.81rem; color: #666; margin: 0.3rem 0 0; } .ma-event-card-counts { display: flex; gap: 1.25rem; margin-top: 0.5rem; font-size: 0.8rem; color: #888; } .ma-event-detail-header { margin-bottom: 1rem; } .ma-event-detail-header h2 { margin: 0 0 0.25rem; font-size: 1.15rem; color: #1a1a1a; } .ma-event-detail-meta { font-size: 0.84rem; color: #555; } .ma-media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1rem; } .ma-media-col-header { font-family: 'Montserrat', sans-serif; font-size: 0.76rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #474546; margin: 0 0 0.5rem; padding-bottom: 0.4rem; border-bottom: 2px solid #e0e0e0; } .ma-media-file-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; padding: 0.5rem 0.75rem; margin-bottom: 0.4rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; } .ma-media-file-info { min-width: 0; flex: 1; overflow: hidden; } .ma-media-file-name { color: #222; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ma-media-file-meta { color: #999; font-size: 0.75rem; display: block; margin-top: 1px; } .ma-media-file-delete { flex-shrink: 0; margin-left: 0.5rem; padding: 0.22rem 0.5rem; background: none; border: 1px solid #e0e0e0; border-radius: 4px; color: #bbb; font-size: 0.72rem; cursor: pointer; transition: color 0.12s, border-color 0.12s; } .ma-media-file-delete:hover { color: #e74c3c; border-color: #e74c3c; } .ma-upload-bar { height: 6px; background: #e0e0e0; border-radius: 3px; overflow: hidden; margin: 0.4rem 0; } .ma-upload-fill { height: 100%; background: #c3301b; border-radius: 3px; transition: width 0.15s; width: 0; } .ma-upload-label { font-size: 0.8rem; color: #666; } .ma-event-qr img { display: block; max-width: 220px; margin: 0.75rem 0; border: 1px solid #e0e0e0; border-radius: 6px; } .ma-event-qr-url { font-size: 0.8rem; color: #666; word-break: break-all; } /* ── YUDANSHA SUB-PORTAL — entry button, dark shell, landing, candidacy ──── */ .ma-yudansha-entry-btn { display: block; width: 100%; padding: 0.5rem 0.75rem; background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.3); border-radius: 6px; font-size: 0.82rem; font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: 0.4px; text-align: left; color: #c9a84c; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .ma-yudansha-entry-btn:hover { background: rgba(201,168,76,0.22); border-color: rgba(201,168,76,0.6); } .ma-content, .ma-card, .ma-topbar { transition: background 300ms ease, color 300ms ease, border-color 300ms ease; } .ma-sidebar { transition: background 300ms ease, border-color 300ms ease; } .ma-layout { transition: border-color 300ms ease; } .yudansha-mode .ma-layout { border-color: #2a2a2a; } .yudansha-mode .ma-sidebar { background: #111111; } .yudansha-mode .ma-sidebar-logo { border-bottom-color: rgba(255,255,255,0.06); } .yudansha-mode .ma-sidebar-user { border-bottom-color: rgba(255,255,255,0.06); } .yudansha-mode .ma-sidebar-footer { border-top-color: rgba(255,255,255,0.06); } .yudansha-mode .ma-sidebar-divider{ background: rgba(255,255,255,0.06); } .yudansha-mode .ma-sidebar-section{ color: #555; } .yudansha-mode .ma-tab { color: #666; } .yudansha-mode .ma-tab:hover:not(.active) { color: #ccc; border-left-color: rgba(201,168,76,0.3); background: rgba(255,255,255,0.04); } .yudansha-mode .ma-tab.active { color: #f0f0f0; background: rgba(201,168,76,0.08); border-left-color: #c9a84c; } .yudansha-mode .ma-content { background: #0f0f0f; } .yudansha-mode .ma-card { background: #1a1a1a; border-color: #2a2a2a; } .yudansha-mode .ma-card h3 { color: #c9a84c !important; border-bottom-color: #c9a84c !important; } .yudansha-mode .ma-topbar { background: #111111; border-bottom-color: rgba(255,255,255,0.06); } /* Dark background on the portal root (#ma-portal) and layout container so */ /* any gap within the portal—between the topbar and layout, or the layout */ /* border area—is #0f0f0f rather than the Webflow page background (white). */ /* Without these, a visible white strip can appear at the right or bottom */ /* edge of the phone viewport on devices where the Webflow section has */ /* its own background that bleeds into the portal container edges. */ .yudansha-mode { background: #0f0f0f; } .yudansha-mode .ma-layout { background: #0f0f0f; } .ma-yudansha-shell { display: flex; flex-direction: column; min-height: 100%; } /* On desktop: display:contents makes this wrapper transparent to the flex */ /* parent — title button and exit button become direct flex items of the */ /* header row, so the desktop layout (title left, badge center, exit right */ /* via margin-left:auto) is unchanged. On mobile (≤640px block above) this */ /* is overridden to display:flex to form the explicit [← Exit | Title] row. */ .ma-yudansha-header-top { display: contents; } .ma-yudansha-header { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid #2a2a2a; margin-bottom: 1rem; } .ma-yudansha-title { display: flex; align-items: center; gap: 0.5rem; } .ma-yudansha-kanji { font-size: 1.4rem; line-height: 1; color: #c9a84c; } .ma-yudansha-label { font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #f0f0f0; } .ma-yudansha-rank-badge { display: inline-block; padding: 0.2rem 0.75rem; background: rgba(201,168,76,0.12); border: 1px solid #c9a84c; border-radius: 20px; font-size: 0.78rem; font-family: 'Montserrat', sans-serif; font-weight: 700; color: #c9a84c; } .ma-yudansha-exit { margin-left: auto; font-size: 0.82rem; padding: 0.35rem 0.85rem; } /* Shorten "← Exit Yudansha" to "← Exit" below 720px (phones + small */ /* tablets). The word " Yudansha" is wrapped in .ma-yudansha-exit-word in */ /* _renderShell (yudansha.js) so CSS can target it. The button's */ /* aria-label="Exit Yudansha" stays unchanged for screen-reader users. */ @media (max-width: 720px) { .ma-yudansha-exit-word { display: none; } } .ma-yudansha-tabs { display: flex; gap: 0; margin-bottom: 1.25rem; border-bottom: 1px solid #2a2a2a; } .ma-yudansha-tab { padding: 0.55rem 1.1rem; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 0.88rem; font-family: 'Roboto', sans-serif; color: #666; cursor: pointer; transition: color 0.15s, border-color 0.15s; } .ma-yudansha-tab:hover { color: #ccc; } .ma-yudansha-tab.active { color: #c9a84c; border-bottom-color: #c9a84c; font-weight: 500; } .ma-yudansha-content { flex: 1; } .ma-yudansha-hero { text-align: center; padding: 2.5rem 1.5rem; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 10px; margin-top: 0.5rem; } .ma-yudansha-hero-icon { font-size: 2.5rem; margin-bottom: 1rem; } .ma-yudansha-hero-title { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: #f0f0f0; margin: 0 0 0.75rem; } .ma-yudansha-hero-body { font-size: 0.9rem; color: #a0a0a0; line-height: 1.6; max-width: 480px; margin: 0 auto 0.5rem; } .ma-yudansha-btn-gold { background: #c9a84c; color: #111; border: none; padding: 0.65rem 1.75rem; border-radius: 8px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; transition: opacity 0.15s; display: inline-block; } .ma-yudansha-btn-gold:hover { opacity: 0.85; } .ma-yudansha-status-bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.65rem 0.85rem; margin-bottom: 1rem; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 8px; font-size: 0.85rem; } .ma-yudansha-status-label { font-weight: 700; font-family: 'Montserrat', sans-serif; } .ma-yudansha-status-progress { color: #666; font-size: 0.82rem; } .ma-yudansha-drive-link { color: #c9a84c; font-size: 0.8rem; text-decoration: none; margin-left: auto; } .ma-yudansha-drive-link:hover{ text-decoration: underline; } .ma-yudansha-cards { display: flex; flex-direction: column; gap: 0.6rem; } .ma-yudansha-card { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 8px; overflow: hidden; transition: border-color 0.15s; } .ma-yudansha-card.complete { border-color: rgba(92,158,92,0.4); } .ma-yudansha-card-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; cursor: pointer; transition: background 0.12s; } .ma-yudansha-card-header:hover { background: rgba(255,255,255,0.03); } .ma-yudansha-card-icon { font-size: 1.1rem; flex-shrink: 0; } .ma-yudansha-card-label { font-size: 0.9rem; font-weight: 600; color: #f0f0f0; flex: 1; } .ma-yudansha-card-status { font-size: 0.8rem; } .ma-yudansha-card-chevron { color: #555; font-size: 0.75rem; flex-shrink: 0; } .ma-yudansha-card-body { padding: 0.75rem 1rem 1rem; border-top: 1px solid #2a2a2a; } .ma-yudansha-card-desc { font-size: 0.86rem; color: #a0a0a0; margin: 0; line-height: 1.55; } .ma-yudansha-landing { padding-top: 0.5rem; } .ma-yudansha-landing-welcome { margin-bottom: 1.5rem; } .ma-yudansha-landing-greeting { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 900; color: #c9a84c; letter-spacing: 1px; display: block; margin-bottom: 0.4rem; } .ma-yudansha-landing-sub { font-size: 0.9rem; color: #888; margin: 0; line-height: 1.6; } .ma-yudansha-landing-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; } .ma-yudansha-landing-card { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 10px; padding: 1.25rem 1rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; display: flex; flex-direction: column; gap: 0.4rem; } .ma-yudansha-landing-card:hover { border-color: #c9a84c; background: rgba(201,168,76,0.05); } .ma-yudansha-landing-card-icon { font-size: 1.5rem; } .ma-yudansha-landing-card-label { font-family: 'Montserrat', sans-serif; font-size: 0.9rem; font-weight: 700; color: #f0f0f0; letter-spacing: 0.5px; } .ma-yudansha-landing-card-desc { font-size: 0.82rem; color: #888; line-height: 1.5; flex: 1; } .ma-yudansha-landing-card-arrow { font-size: 0.9rem; color: #c9a84c; margin-top: 0.25rem; } /* ── MOBILE — YUDANSHA LANDING (max-width: 640px) ── */ @media (max-width: 640px) { .ma-yudansha-landing-cards { grid-template-columns: 1fr; } } /* v6.4 -- 2026-06-02 Yudansha Session C: dark mode panel overrides */ /* Dark theme text overrides. Without these, .ma-content inherits the portal */ /* default dark-on-light color scheme even after the background goes #0f0f0f. */ .yudansha-mode .ma-content { color: #f0f0f0; } .yudansha-mode .ma-val { color: #ddd; } .yudansha-mode .ma-field label { color: #a0a0a0; } .yudansha-mode .ma-label { color: #a0a0a0; } .yudansha-mode .ma-loading { color: #666; } .yudansha-mode .ma-table th { color: #666; border-bottom-color: #2a2a2a; } .yudansha-mode .ma-table td { border-bottom-color: #1e1e1e; color: #ccc; } .yudansha-mode .ma-table tr:hover td { background: rgba(255,255,255,0.03); } .yudansha-mode .ma-input { background: #111; color: #f0f0f0; border-color: #2a2a2a; } .yudansha-mode .ma-input::placeholder { color: #444; } /* Structure helpers for Session B pre-test form cards */ .ma-yudansha-candidacy { display: flex; flex-direction: column; gap: 0; } .ma-yudansha-card-form { padding-top: 0.25rem; } /* ── v6.4 Yudansha dark mode: panel content overrides (2026-06-02) ───────── */ /* Core/Densho — kokoro card and empty-state card backgrounds (inline #fafafa) */ .yudansha-mode #core-content [style*="background:#fafafa"] { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important; } /* Core/Densho — Kokoro series section heading gold border */ .yudansha-mode #core-content [style*="border-bottom:2px solid"] { border-bottom-color: rgba(201,168,76,0.3) !important; } /* Videos — filter bar background */ .yudansha-mode #panel-videos [style*="background:#f9f9f9"] { background: #1a1a1a !important; border-color: rgba(255,255,255,0.08) !important; } /* Videos — period/track select background */ .yudansha-mode #panel-videos [style*="background:#f5f5f5"] { background: #1e1e1e !important; color: #f0f0f0 !important; border-color: #333 !important; } /* Videos — inactive track toggle (Adult/Youth white button) */ .yudansha-mode #panel-videos [data-action="switch-track"][style*="background:#fff"] { background: rgba(255,255,255,0.05) !important; color: #a0a0a0 !important; } /* Videos — video card and technique card backgrounds */ .yudansha-mode #panel-videos [style*="background:#fafafa"] { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important; } /* Videos — category section headers */ .yudansha-mode #panel-videos h4 { color: #888 !important; border-bottom-color: rgba(255,255,255,0.08) !important; } /* Videos — view row (period name label) and technique divider borders */ .yudansha-mode #panel-videos [style*="border-bottom:1px solid #eee"] { border-bottom-color: rgba(255,255,255,0.08) !important; } .yudansha-mode #panel-videos [style*="border-top:1px solid #eee"] { border-top-color: rgba(255,255,255,0.08) !important; } /* Videos — Video/Technique toggle border */ .yudansha-mode #panel-videos [style*="border:1px solid #ddd"] { border-color: rgba(255,255,255,0.2) !important; } .yudansha-mode #panel-videos [style*="border-left:1px solid #ddd"] { border-left-color: rgba(255,255,255,0.15) !important; } /* Videos — technique card title text (hardcoded #1a1a1a) */ .yudansha-mode #panel-videos [style*="color:#1a1a1a"] { color: #f0f0f0 !important; } /* Approvals + Audit Log + Add Member — shared header/divider pattern */ .yudansha-mode #panel-approvals [style*="background:#f"], .yudansha-mode #panel-audit [style*="background:#f"], .yudansha-mode #panel-add_member[style*="background:#f"] { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.08) !important; } /* Section header text — #666 and #555 too faint on dark */ .yudansha-mode #panel-approvals [style*="color:#666"], .yudansha-mode #panel-approvals [style*="color:#555"], .yudansha-mode #panel-audit [style*="color:#666"], .yudansha-mode #panel-audit [style*="color:#555"], .yudansha-mode #panel-add_member[style*="color:#666"], .yudansha-mode #panel-add_member[style*="color:#555"] { color: #a0a0a0 !important; } /* Darker text (#444 and #333) — lift to readable mid-tone */ .yudansha-mode #panel-approvals [style*="color:#444"], .yudansha-mode #panel-approvals [style*="color:#333"], .yudansha-mode #panel-audit [style*="color:#444"], .yudansha-mode #panel-audit [style*="color:#333"], .yudansha-mode #panel-add_member[style*="color:#444"], .yudansha-mode #panel-add_member[style*="color:#333"] { color: #c0c0c0 !important; } /* Section border lines */ .yudansha-mode #panel-approvals [style*="border-bottom:1px solid #e"], .yudansha-mode #panel-audit [style*="border-bottom:1px solid #e"], .yudansha-mode #panel-add_member[style*="border-bottom:1px solid #e"] { border-bottom-color: rgba(255,255,255,0.08) !important; } /* h3/h4 section headings — gold accent matches Yudansha theme */ .yudansha-mode #panel-approvals h3, .yudansha-mode #panel-approvals h4, .yudansha-mode #panel-audit h3, .yudansha-mode #panel-audit h4, .yudansha-mode #panel-add_member h3,.yudansha-mode #panel-add_member h4 { color: #c9a84c !important; } /* ── v6.6 — 2026-06-09: Activation screen dark theme fix ───────────────── */ /* #ma-activate-screen had no explicit background or text colors, making */ /* all content invisible against the Portal Section's black background. */ /* Added dark theme to match the .ma-auth-box (login screen) styling. */ #ma-activate-screen { background: #1a1a1a; border-radius: 4px; border-top: 4px solid #c3301b; padding: 2.5rem 2rem; color: #fff; } #ma-activate-screen h2 { font-family: 'Montserrat', sans-serif; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #fff; } /* ========================================================================== RESPONSIVE PASS -- v7.2 (2026-06-12, Stage 2 Push A) ========================================================================== Everything below is ADDITIVE. The pre-v7.2 stylesheet had exactly two real-world layouts: phone (<=640px slide-in sidebar) and a 1200px-capped desktop that everything from an iPad to a 4K monitor received. This section adds the missing tiers and polishes the phone tier. TIER MAP (decided with Joey 2026-06-12): <=640px phone -- existing slide-in layout + polish below 641-1023px tablet -- NEW: slimmer sidebar, tightened spacing 1024-1919px desktop -- unchanged (the classic 1200px layout) >=1920px wide -- container grows to 1500px >=2560px 4K -- container caps at 1760px, centered. Deliberately NOT edge-to-edge: a roster row spanning ~3800px is unreadable, so the portal sits centered with margins, like every mainstream dashboard product. Ordering note: these rules sit LAST in the file on purpose. At equal specificity, later rules win -- so anything here that intentionally overlaps an earlier rule (e.g. the <=640px additions) reliably wins without needing !important. ========================================================================== */ /* -- PHONE POLISH (<=640px) ---------------------------------------------- */ @media (max-width: 640px) { /* 16px inputs: iOS Safari auto-zooms the whole page when a focused input's font-size is under 16px -- the single most disorienting mobile-form behavior. 16px exactly disables that zoom. Applied to every text-entry control in the portal shell... */ .ma-field input, .ma-field select, .ma-field textarea, .ma-input, .ma-filter-bar input, .ma-filter-bar select { font-size: 16px; } /* Modal card padding tightened for phone (2026-06-15 breakpoint audit). MODAL_CARD_STYLE in core/ui.js sets padding:1.5rem 1.75rem via inline style (24px top, 28px sides). On a 375px screen the 24px gap above the first field wastes valuable real estate. The close-X is position:absolute at top:14px so there is no flow conflict with reducing the top pad; 0.75rem (12px) clears it with 2px to spare. !important is required to override the inline style. */ [role="dialog"] { padding-top: 0.75rem !important; padding-left: 1.25rem !important; padding-right: 1.25rem !important; } /* ...and inside modals. Modals are appended to by openModal() (core/ui.js), NOT inside #ma-portal, so portal-scoped selectors can't reach them -- [role="dialog"] is the stable hook the helper puts on every modal card. */ [role="dialog"] input, [role="dialog"] select, [role="dialog"] textarea { font-size: 16px; } /* 44px touch targets (Apple HIG / Android 48dp-ish): buttons get a guaranteed minimum hit area. min-height (not height) so multi-line button labels still grow naturally. Sidebar .ma-tab rows are intentionally excluded -- 15+ admin tabs at 44px each would push half the nav off-screen; their full-width rows are already easy to hit. */ .ma-btn, .ma-btn-sm, .ma-sidebar-signout, .ma-yudansha-entry-btn, .ma-yudansha-btn-gold { min-height: 44px; } /* Sticky first column on wide tables (Roster, audit log, billing history): the identifying column stays pinned while the rest scrolls horizontally under it, so the user never loses track of which row they're reading. Solid background required -- sticky cells render OVER the scrolling cells behind them. #fafafa matches both the .ma-card surface and the row-hover color, so the pinned column blends seamlessly in the light theme. */ .ma-table th:first-child, .ma-table td:first-child { position: sticky; left: 0; z-index: 1; background: #fafafa; box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06); } /* Same trick in the Yudansha dark shell -- dark sticky background, softer shadow (a light shadow on #1a1a1a reads as a glow). */ .yudansha-mode .ma-table th:first-child, .yudansha-mode .ma-table td:first-child { background: #1a1a1a; box-shadow: 2px 0 4px rgba(0, 0, 0, 0.5); } /* Scroll shadows on the table wrapper: soft inner shadows appear at whichever edge has more content hidden beyond it, and disappear when fully scrolled -- the standard "there's more this way" cue. Pure CSS (Lea Verou technique): two white "covers" scroll WITH the content (background-attachment: local) and slide off the shadow layers (attachment: scroll) as you reach each end. Works because .ma-table rows have transparent backgrounds. */ .ma-table-wrap { background: linear-gradient(to right, #fafafa 30%, rgba(250, 250, 250, 0)), linear-gradient(to right, rgba(250, 250, 250, 0), #fafafa 70%) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0)) 100% 0; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } /* Dark-shell variant of the scroll shadows. */ .yudansha-mode .ma-table-wrap { background: linear-gradient(to right, #1a1a1a 30%, rgba(26, 26, 26, 0)), linear-gradient(to right, rgba(26, 26, 26, 0), #1a1a1a 70%) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)) 100% 0; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } } /* -- TABLET TIER (641-1023px) -- NEW ------------------------------------- */ /* Previously this range fell through to the full desktop layout: a 200px sidebar eating a quarter of an iPad-portrait screen and desktop padding everywhere. The slide-in phone pattern would be overkill here -- there IS room for a persistent sidebar, just a slimmer one. */ @media (min-width: 641px) and (max-width: 1023px) { #ma-portal { padding: 0.5rem; } .ma-sidebar { width: 172px; } .ma-sidebar-logo img { max-width: 144px; } .ma-tab { padding: 0.3rem 0.7rem; font-size: 0.84rem; } .ma-content { padding: 1rem; } .ma-card { padding: 1rem; } } /* Two-column cards stack a little earlier than the tablet/desktop line: at 641-900px each .ma-grid-2 column is under ~330px and Personal Info / Membership cards start wrapping awkwardly. (The base sheet already stacks them at <=600px; this widens that to <=900px.) */ @media (max-width: 900px) { .ma-grid-2 { grid-template-columns: 1fr; } } /* -- WIDE TIER (>=1920px) ------------------------------------------------ */ /* The 1200px cap was designed against 1366-1920px laptops. On a full-HD or wider monitor the portal floats in a sea of margin; let it breathe without letting line lengths get silly. */ @media (min-width: 1920px) { #ma-portal { max-width: 1500px; } .ma-content { padding: 1.5rem 2rem; } .ma-card { padding: 1.5rem; } } /* -- 4K TIER (>=2560px) -------------------------------------------------- */ /* Cap, don't stretch (decision 2026-06-12): content maxes at 1760px, centered. Type scales up one notch so the portal doesn't feel like a postage stamp at 4K pixel densities with 100% OS scaling. rem-based sizes throughout the sheet inherit the bump automatically. */ @media (min-width: 2560px) { #ma-portal { max-width: 1760px; font-size: 1.0625rem; } } /* ── MODAL CARDS — global color anchor ──────────────────────────────────── */ /* openModal() appends the card to , outside #ma-portal. The Webflow */ /* portal section sets explicit color on heading elements (h2, h3, h4) that */ /* makes them white — invisible on the modal's white card background. */ /* CSS inheritance on [role="dialog"] loses to Webflow's explicit heading */ /* rules, so we override with !important here. This is one of the rare valid */ /* uses of !important: beating a third-party stylesheet we cannot modify. */ /* Confirmed root cause 2026-06-15 breakpoint audit: 13 h3 elements across */ /* member-admin.js had no explicit color and were invisibly white. */ [role="dialog"] h2, [role="dialog"] h3, [role="dialog"] h4 { color: #1a1a1a !important; font-size: 1rem !important; /* override Webflow's ~2rem default h3 */ font-weight: 600 !important; font-family: inherit !important; line-height: 1.3 !important; } /* ── PORTAL PANEL HEADINGS — global color anchor ──────────────────────── */ /* Same root cause as [role="dialog"] fix above: Webflow sets color:white */ /* on h2/h3/h4 body-wide. Inside .ma-content (the main panel area) this */ /* makes bare headings like "Dojos (13)" in Org Overview invisible on the */ /* white light-theme background (white text on white card). !important is */ /* required for the same reason as the modal fix — Webflow's heading rule */ /* has enough specificity to beat a plain class+element rule. */ /* The yudansha shell is safe: its headings use explicit classes */ /* (.ma-yudansha-hero-title, .ma-yudansha-card-label etc.) with their own */ /* colors; .ma-card h3 has !important added to its yudansha-mode rule */ /* so the gold color survives here. */ .ma-content h2, .ma-content h3, .ma-content h4 { color: #1a1a1a !important; } /* When yudansha-mode is active the content background is #0f0f0f — the */ /* base rule above would make headings dark (#1a1a1a) on dark, invisible. */ /* This override restores a readable light color. Specificity 0,2,1 beats */ /* the 0,1,1 base rule above (and both have !important so spec decides). */ .yudansha-mode .ma-content h2, .yudansha-mode .ma-content h3, .yudansha-mode .ma-content h4 { color: #f0f0f0 !important; } /* Card section headings (.ma-card h3) stay gold in dark mode. */ /* Specificity 0,3,1 beats the 0,2,1 yudansha override above, so gold */ /* wins regardless of source order. Also upgrades border-bottom to gold */ /* so the underline matches (was red in light theme). */ .yudansha-mode .ma-content .ma-card h3 { color: #c9a84c !important; border-bottom-color: #c9a84c !important; } /* ========================================================================== STACKED TABLES + CREDENTIAL BADGES -- v7.3 (2026-06-12, Stage 2 Push B) ========================================================================== */ /* -- CREDENTIAL BADGES (all viewports) ------------------------------------ The Roster's account-credentials lifecycle. A SEPARATE signal from the membership-status dot: the dot answers "is the membership active", the badge answers "has this person created their Entra sign-in yet" -- the per-member state the migration watch previously required SQL for. States map 1:1 to credential_status from GET /members. */ .ma-cred { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; } .ma-cred-credentialed { background: #dcfce7; color: #166534; } /* green : Entra account exists */ .ma-cred-invited { background: #dbeafe; color: #1e40af; } /* blue : invite sent, not clicked */ .ma-cred-started { background: #fef3c7; color: #92400e; } /* amber : clicked, abandoned */ .ma-cred-expired { background: #fee2e2; color: #991b1b; } /* red : token expired -> resend */ .ma-cred-none { background: #f1f5f9; color: #64748b; } /* grey : no invite ever (no email) */ /* Yudansha dark shell: same hues, dark-surface friendly. */ .yudansha-mode .ma-cred-credentialed { background: rgba(22,101,52,0.35); color: #86efac; } .yudansha-mode .ma-cred-invited { background: rgba(30,64,175,0.35); color: #93c5fd; } .yudansha-mode .ma-cred-started { background: rgba(146,64,14,0.35); color: #fcd34d; } .yudansha-mode .ma-cred-expired { background: rgba(153,27,27,0.35); color: #fca5a5; } .yudansha-mode .ma-cred-none { background: rgba(100,116,139,0.25); color: #94a3b8; } /* -- STACKED TABLES: desktop base ------------------------------------------ Above 640px an opted-in table is a completely normal .ma-table. The min-width below replaces the inline style="min-width:640px" the Roster table used to carry (inline styles can't be overridden by the phone breakpoint; a class rule can). Narrow desktop windows still get the .ma-table-wrap horizontal scrollbar exactly as before. */ .ma-table-wrap--stack { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Only tables that explicitly opt in via ma-table--wide get a desktop width floor (today: the flat Roster -- it replaces the old inline style="min-width:640px"). v7.3.1 rescope: the floor was originally on ma-table--stack itself with carve-out selectors, which silently applied a 640px floor to any NEW narrow table that opted into stacking (first victim: the org overview's two-column Dojo list). */ .ma-table--wide { min-width: 640px; } /* -- STACKED TABLES: the phone transformation (<=640px) ------------------- */ @media (max-width: 640px) { /* Kill every horizontal-scroll pressure for opted-in tables (including the flat Roster's ma-table--wide desktop floor). */ .ma-table--stack { min-width: 0; display: block; } .ma-table--wide { min-width: 0; } .ma-table-wrap--stack { overflow-x: visible; background: none; } .ma-table--stack thead { display: none; } /* labels move into the cells */ .ma-table--stack tbody { display: block; } /* Each row becomes a small card. position:relative anchors the .ma-stack-actions kebab in the top-right corner. */ .ma-table--stack tr { display: block; position: relative; background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; padding: 0.6rem 0.75rem; margin-bottom: 0.6rem; } /* Cells become label/value lines. */ .ma-table--stack td { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.18rem 0; border-bottom: none; width: auto; /* defeats inline width:48px etc. on action cells */ text-align: left; } .ma-table--stack td[data-label]::before { content: attr(data-label); flex: 0 0 6.5em; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #999; } /* The identifying cell (name / payment date): full-width card title. padding-right clears the absolutely-positioned actions kebab. */ .ma-table--stack td.ma-stack-primary { display: block; font-size: 0.98rem; padding: 0 2.25rem 0.25rem 0; } /* Roster grouped view ellipsizes names at desktop widths; on a stacked card let the name wrap naturally instead. */ .ma-table--stack td.ma-stack-primary div { white-space: normal !important; overflow: visible !important; } /* Row actions (kebab) pin to the card's top-right corner. */ .ma-table--stack td.ma-stack-actions { position: absolute; top: 0.45rem; right: 0.5rem; padding: 0; } /* Cells with no content (e.g. an empty Account cell on older cached API data) vanish instead of rendering a dangling label. */ .ma-table--stack td:empty { display: none; } /* v7.2's sticky first column + row hover make no sense on stacked cards -- neutralize them for opted-in tables. (These win over the v7.2 rules above purely by being later in the file.) */ .ma-table--stack th:first-child, .ma-table--stack td:first-child { position: static; box-shadow: none; background: transparent; } .ma-table--stack tr:hover td { background: transparent; } /* Yudansha dark shell card surfaces. */ .yudansha-mode .ma-table--stack tr { background: #161616; border-color: #2a2a2a; } .yudansha-mode .ma-table--stack td[data-label]::before { color: #777; } .yudansha-mode .ma-table--stack td:first-child { background: transparent; } } /* ========================================================================== HELP & SUPPORT PANEL — FAQ ACCORDION (added 2026-06-16) ========================================================================== Styles for the FAQ accordion in features/support.js. Sections have a branded title bar. Items expand/collapse via a max-height CSS transition triggered by the .open class (toggled by MA.toggleFaq() on each question button click). ========================================================================== */ /* ── Section title ─────────────────────────────────────────────────────── */ /* Matches the Montserrat uppercase label style used by .ma-sidebar-section */ /* and .ma-media-col-header throughout the portal. Red underline ties it */ /* to the Shoshin Red brand accent. */ .ma-faq-section { margin-bottom: 1.5rem; } .ma-faq-section-title { font-family: 'Montserrat', sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #474546; padding-bottom: 0.4rem; border-bottom: 2px solid #c3301b; margin-bottom: 0.2rem; } /* ── Accordion item (wrapper) ──────────────────────────────────────────── */ .ma-faq-item { border-bottom: 1px solid #eee; } /* ── Question button ───────────────────────────────────────────────────── */ /* Full-width, left-aligned, no border — looks like a row, not a button. */ /* Flex row: question text fills the left, chevron pins to the right. */ .ma-faq-question { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; width: 100%; background: none; border: none; text-align: left; padding: 0.75rem 0; font-size: 0.9rem; font-weight: 500; color: #222; cursor: pointer; font-family: inherit; line-height: 1.4; } .ma-faq-question:hover { color: #c3301b; } .ma-faq-question.open { color: #c3301b; } /* ── Chevron ───────────────────────────────────────────────────────────── */ /* Rotates 180° when the answer is open. transition is on transform only */ /* to avoid repainting the text around it. */ .ma-faq-chevron { flex-shrink: 0; font-size: 0.72rem; color: #ccc; transition: transform 0.2s ease, color 0.15s; } .ma-faq-question.open .ma-faq-chevron { transform: rotate(180deg); color: #c3301b; } /* ── Answer panel (collapsed by default) ──────────────────────────────── */ /* max-height: 0 + overflow: hidden = content invisible but still in the */ /* flow. max-height: 600px when .open = transition smoothly expands. */ /* 600px is a generous ceiling; actual content is far shorter. */ .ma-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .ma-faq-answer.open { max-height: 600px; } /* ── Answer text ───────────────────────────────────────────────────────── */ /* Slightly muted color and comfortable line-height for readability. */ .ma-faq-answer p { font-size: 0.88rem; color: #555; line-height: 1.65; margin: 0 0 0.85rem; padding-right: 1.25rem; /* clears the chevron column on narrow screens */ } /* ── Yudansha dark mode overrides — FAQ accordion ──────────────────────── */ /* Without these, the FAQ question text (#222), section titles (#474546), */ /* and answer text (#555) are nearly invisible on the #1a1a1a card surface */ /* that yudansha-mode applies to .ma-card. These rules mirror the gold/gray */ /* palette already used throughout the yudansha dark shell. */ /* Section title: muted visible label, gold underline accent */ .yudansha-mode .ma-faq-section-title { color: #777; border-bottom-color: #c9a84c; } /* Item dividers: very subtle dark-on-dark separation */ .yudansha-mode .ma-faq-item { border-bottom-color: #2a2a2a; } /* Question text: light gray by default, gold on hover/open */ .yudansha-mode .ma-faq-question { color: #d0d0d0; } .yudansha-mode .ma-faq-question:hover, .yudansha-mode .ma-faq-question.open { color: #c9a84c; } /* Chevron: muted gray at rest, gold when open */ .yudansha-mode .ma-faq-chevron { color: #555; } .yudansha-mode .ma-faq-question.open .ma-faq-chevron { color: #c9a84c; } /* Answer text: readable light gray on #1a1a1a card */ .yudansha-mode .ma-faq-answer p { color: #bbb !important; } /* Contact Support card intro paragraph (inline color:#555 needs !important) */ .yudansha-mode #supp-form-section > p { color: #aaa !important; } /* Form labels inside the Help panel */ .yudansha-mode #panel-help .ma-label { color: #999 !important; } /* Char counter and small note text are already #aaa inline — readable in */ /* dark mode without an override. File attach list text is set by JS. */ /* ============================================================ ADMIN GUIDE — YUDANSHA DARK MODE PALETTE (v7.6, 2026-07-03) ------------------------------------------------------------ The Help Center Administrator Guide (features/support.js + routes/support.js guideMdToSafeHtml) styles its content with INLINE styles, because Embed 1 is size-constrained and the fragment must render with zero extra markup. Inline styles beat stylesheet rules (2026-06-15 modal lesson), so instead of colors, every inline style references a CSS custom property with a LIGHT-THEME FALLBACK baked in: color: var(--ma-guide-ink, #1a1a1a) Light mode therefore needs NO rules here at all. This block only defines the DARK values. Because CSS variables resolve against the cascade, setting them on .yudansha-mode re-themes every guide element — headings, tables, dividers, links — without touching the JS. THE CONTRACT (keep in sync with routes/support.js THEMING comment — if you add a variable there, add its dark value here): --ma-guide-ink main text --ma-guide-sub secondary text (section labels, notes) --ma-guide-accent heading underlines + links (gold in dark, matching the Yudansha palette #c9a84c) --ma-guide-line dividers / table row borders --ma-guide-code-bg inline-code chip background ============================================================ */ /* ============================================================ ANALYTICS DASHBOARD -- v7.7 (2026-07-31, Analytics Phase C) ============================================================ Styles for the staff-only Dashboard tab (#panel-dashboard). DESIGN RULE: this panel deliberately adds as little as possible. Cards, tables, stacked-mobile tables, table wrappers and buttons all reuse the existing classes, so every responsive behavior audited in v7.2 / v7.3 applies without a second implementation. What IS new here is only what genuinely didn't exist: the stat tiles, the 30/90 toggle, and a handful of inline text treatments. COLORS: light values are stated directly here. Dark values are set in the .yudansha-mode block below, per the standing theming pattern -- NOT with a second copy of each rule. ============================================================ */ /* ------------------------------------------------------------ CHART TOKENS (v7.8, 2026-07-31, Analytics Phase D) ------------------------------------------------------------ The chart palette lives HERE, not in features/dashboard.js, so light/dark is resolved by the cascade and the JS never has to know which theme is active -- it reads these with getComputedStyle. Same principle as the --ma-guide-* tokens added in v7.6 for the Admin Guide. ⚠ THESE VALUES ARE VALIDATED, NOT CHOSEN. Both pairs were run through the colorblind-safety validator (Machado 2009, protanopia + deuteranopia at severity 1.0): light #c3301b / #2a78d6 worst adjacent CVD dE 27.5 normal-vision dE 32.6, contrast >=3:1 dark #e0563c / #3987e5 worst adjacent CVD dE 24.7 normal-vision dE 31.6, contrast >=3:1 Targets are CVD dE >= 8 and normal-vision dE >= 15 (OKLab x100). The brand GOLD (#c9a84c) was tested for the light surface and REJECTED: 2.23:1 contrast, below the 3:1 floor for chart marks. It stays where it works -- the dark Yudansha shell. Do not "restore brand color" here without re-running the validator. ------------------------------------------------------------ */ .ma-dash-viz { --viz-series-1: #c3301b; /* brand red -- slot 1 */ --viz-series-2: #2a78d6; /* slot 2, second series only */ --viz-grid: #ececec; /* hairline grid, one shade off surface */ --viz-text: #52514e; /* axis + legend ink */ --viz-surface: #ffffff; /* tooltip bg + point rings */ } /* Chart containers. Height is set inline per chart so the x-axis band is included -- a fixed height that excludes the axis produces a tiny nested scrollbar inside the card. */ .ma-dash-chartwrap { position: relative; width: 100%; } /* Filter row -- ONE row above everything it scopes, never a control inside an individual chart card. */ .ma-dash-filterbar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 1rem; } .ma-dash-filterbar label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.4px; color: #666; margin: 0; } .ma-dash-filterbar select { max-width: 320px; } /* Panel title. Webflow styles bare h2 elements globally and very large; portal.css only ever overrode their COLOR (.ma-content h2 { color }), never their size, because no other feature panel renders a bare h2 at panel root -- they all put headings inside .ma-card as h3. This panel does have a top-level title, so it needs its own class. A class (0,1,0) outranks Webflow's element selector (0,0,1); !important matches the existing heading rules' style and guards against Webflow adding its own !important later. Found in live testing 2026-07-31 -- the title rendered at display size and wrapped to two lines. */ .ma-dash-title { font-size: 1.5rem !important; line-height: 1.25 !important; font-weight: 700 !important; margin: 0 0 0.25rem !important; } /* Horizontal scroll for the one wide table in this panel (Monthly trend, 7 columns). This is deliberately a dashboard-scoped opt-in rather than adding overflow-x to the shared .ma-table-wrap. That shared class only gains overflow-x inside the <=768px media query, and widening its behavior for every table in the portal to fix one table here is exactly the mistake v7.3.1 had to undo (a width floor placed on the shared pattern class instead of an opt-in modifier). The trend table also no longer carries .ma-table--wide -- its 640px min-width was pushing it past the card's right edge at normal laptop widths. Phase D replaces this table with a Chart.js chart, at which point this rule can go. */ .ma-dash-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* "Figures as of " line. Understated but always present -- if the nightly rollup stops running this date stops advancing, which is the earliest visible signal that something broke. (Learned the hard way 2026-07-31: the rollup job had never run.) */ .ma-dash-asof { font-size: 0.85rem; color: #666; margin: 0 0 1rem; } .ma-dash-thin { display: inline-block; margin-left: 0.35rem; color: #8a6d1f; } /* Stat tiles. auto-fit + minmax means the row reflows from four across on desktop to two on a phone with no breakpoint of its own -- one less thing to re-audit at 375px. */ .ma-dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.75rem; margin-top: 0.5rem; } .ma-dash-tile { background: #fafafa; border: 1px solid #ececec; border-radius: 6px; padding: 0.75rem 0.5rem; text-align: center; } .ma-dash-tile-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: #1a1a1a; } .ma-dash-tile-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.4px; color: #666; margin-top: 0.25rem; } /* Section header with a control on the right (the 30/90 toggle). Wraps rather than squashing on narrow screens. */ .ma-dash-section-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; } .ma-dash-toggle { display: flex; gap: 0.35rem; } /* The pressed state is driven by .active, which the delegated handler in features/dashboard.js toggles in place -- the buttons are NOT re-rendered, so they keep focus (partial re-render contract, established 2026-07-31 with the video search bars). */ .ma-dash-toggle-btn.active { background: #c3301b; border-color: #c3301b; color: #fff; } .ma-dash-headline { font-size: 0.95rem; margin: 0 0 0.5rem; } .ma-dash-caveat { font-size: 0.8rem; color: #666; background: #fbf7ea; border-left: 3px solid #d9b64a; padding: 0.5rem 0.75rem; border-radius: 0 4px 4px 0; margin: 0 0 0.75rem; } .ma-dash-empty { color: #666; font-size: 0.9rem; margin: 0; } .ma-dash-muted { color: #888; font-size: 0.85rem; } /* "Never signed in" -- the rows a dojo-cho most needs to notice. */ .ma-dash-never { color: #c3301b; font-weight: 600; } /* Small inline chips (Guardian / Youth / Pending). Same visual family as the roster Type chips, kept local because the roster's are generated inline in roster.js rather than from a class. */ .ma-dash-chip { display: inline-block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.3px; background: #eee; color: #555; border-radius: 3px; padding: 1px 5px; margin-left: 4px; vertical-align: middle; } .ma-dash-chip--warn { background: #fbe9e7; color: #b3261e; } .yudansha-mode { --ma-guide-ink: #e8e8e8; --ma-guide-sub: #a0a0a0; --ma-guide-accent: #c9a84c; --ma-guide-line: #2f2f2f; --ma-guide-code-bg: rgba(255, 255, 255, 0.08); } /* ------------------------------------------------------------ Analytics Dashboard -- dark values (v7.7, 2026-07-31) ------------------------------------------------------------ The Dashboard is a staff tab in the LIGHT portal, so these rules only matter if a staff member has the Yudansha shell active. Included for completeness and because every panel that skipped its dark counterpart has eventually surfaced as a dark-on-dark bug (v7.5 heading cascade, 2026-06-16). ------------------------------------------------------------ */ .yudansha-mode .ma-dash-tile { background: #161616; border-color: #2f2f2f; } .yudansha-mode .ma-dash-tile-value { color: #e8e8e8; } .yudansha-mode .ma-dash-tile-label, .yudansha-mode .ma-dash-asof, .yudansha-mode .ma-dash-muted, .yudansha-mode .ma-dash-empty { color: #a0a0a0; } .yudansha-mode .ma-dash-thin { color: #c9a84c; } .yudansha-mode .ma-dash-never { color: #e57373; } .yudansha-mode .ma-dash-caveat { background: rgba(201, 168, 76, 0.10); border-left-color: #c9a84c; color: #cfcfcf; } .yudansha-mode .ma-dash-chip { background: rgba(255, 255, 255, 0.08); color: #c9c9c9; } .yudansha-mode .ma-dash-viz { --viz-series-1: #e0563c; --viz-series-2: #3987e5; --viz-grid: #2f2f2f; --viz-text: #a0a0a0; --viz-surface: #0f0f0f; } .yudansha-mode .ma-dash-filterbar label { color: #a0a0a0; } .yudansha-mode .ma-dash-toggle-btn.active { background: #c9a84c; border-color: #c9a84c; color: #1a1a1a; }