/* C79 public-only components. Approved tokens are defined in brand-tokens.css. */
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font: 15px/1.65 var(--font-text); }
button, input { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #2459b5; outline-offset: 3px; }
.skip-link { position: fixed; z-index: 40; top: -80px; left: 12px; padding: 8px 12px; color: var(--paper); border-radius: var(--radius-hard); background: var(--ink); }
.skip-link:focus { top: 12px; }
.public-app, .public-layout { min-height: 100vh; }
.public-layout { display: flex; background: var(--paper); }
.script-fallback { max-width: 760px; margin: 48px auto; padding: 18px; color: var(--ink-muted); border: 1px solid var(--line); border-radius: var(--radius-card); }
.member-rail { display: flex; width: 174px; flex: 0 0 174px; flex-direction: column; gap: 4px; padding: 14px 10px; border-right: 1px solid var(--line); background: var(--paper); }
.brand-logo { display: block; padding: 8px 7px 14px; border: 0; background: transparent; }
.brand-logo img, .mobile-brand img { display: block; width: 100%; height: auto; }
.rail-label { margin: 2px 8px; color: var(--ink-muted); font-size: 11px; font-weight: 700; }
.member-select { display: inline-flex; width: 100%; min-height: 36px; align-items: center; gap: 7px; padding: 6px 8px; color: var(--ink); border: 0; border-radius: var(--radius-card); background: transparent; text-align: left; }
.member-select:hover, .member-select[aria-current="page"] { color: var(--member-ink, var(--ink)); background: color-mix(in srgb, var(--member-color, var(--ink)) 14%, var(--paper)); font-weight: 700; }
.member-dot { width: 9px; height: 9px; flex: 0 0 9px; border: 1px solid color-mix(in srgb, var(--member-color, var(--ink)) 65%, var(--ink)); border-radius: 50%; background: var(--member-color, var(--ink)); }
.rail-note { margin-top: auto; padding: 8px; color: var(--ink-muted); border-top: 1px dashed var(--line); font-size: 11px; }
.public-main { min-width: 0; flex: 1; padding: 14px clamp(18px, 3vw, 36px) 96px; }
.global-header { display: flex; max-width: 1180px; min-width: 0; flex-wrap: wrap; align-items: center; row-gap: 8px; column-gap: 14px; margin: 0 auto 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mobile-brand, .mobile-member-flow { display: none; }
.primary-nav { display: flex; min-width: 0; flex: 1; flex-wrap: wrap; gap: 3px; }
.nav-item, .filter-button, .view-tab, .button-ink, .button-soft, .header-my-oshi, .search-trigger { min-height: 40px; padding: 7px 11px; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); font-weight: 700; }
.nav-item, .header-my-oshi, .member-select, .member-chip { display: inline-flex; align-items: center; }
.nav-item { border-color: transparent; color: var(--ink-muted); }
.nav-item:hover, .nav-item[aria-current="page"], .filter-button[aria-pressed="true"], .view-tab[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); background: var(--paper-soft); }
.header-tools { display: flex; min-width: 0; flex: 0 0 auto; align-items: center; gap: 7px; }
.header-my-oshi { white-space: nowrap; }
.content-column { max-width: 1180px; margin: 0 auto; }
.today-cover { position: relative; display: grid; overflow: hidden; grid-template-columns: minmax(0, 1fr) minmax(230px, .48fr); gap: 24px; padding: clamp(22px, 4vw, 42px); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper-soft); }
.today-cover::before { position: absolute; top: 0; right: 0; left: 0; height: 7px; background: linear-gradient(90deg, #FFD84D 0 12.5%, #F2453D 12.5% 25%, #5FD3B0 25% 37.5%, #4A72E8 37.5% 50%, #FF8A3D 50% 62.5%, #6EC8F5 62.5% 75%, #A66BE0 75% 87.5%, #FF6FA5 87.5%); content: ""; }
.today-cover > * { position: relative; }
.date-kicker { margin-bottom: 4px; color: var(--ink-muted); font-weight: 700; }
.display-date, h1 { font-family: var(--font-display); }
.display-date { margin: 0 0 10px; font-size: clamp(2.35rem, 6vw, 4.8rem); line-height: .98; letter-spacing: -.05em; }
.favorite-title-member { color: var(--member-ink, var(--ink)); }
.today-cover p, .page-title p { color: var(--ink-muted); }
.scope-switch, .segmented-controls, .calendar-tabs, .member-chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.today-counts { align-self: end; display: grid; gap: 8px; }
.count-link { min-height: 50px; padding: 9px 11px; color: var(--ink); border: 1px solid var(--ink); border-radius: var(--radius-hard); background: var(--paper); font-weight: 800; text-align: left; }
.count-link:hover { background: var(--paper-soft); }
.section-block { margin-top: 31px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.section-heading > * { min-width: 0; }
.section-heading h2, .page-title h1 { margin: 0; font-size: 1.45rem; }
.section-heading p { margin: 0; color: var(--ink-muted); font-size: .88rem; }
.page-title { margin: 4px 0 16px; }
.page-title p { margin: 4px 0 0; }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.story-card, .community-card, .event-card, .ticket-card, .member-card, .empty-card, .detail-surface, .settings-card { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); }
.story-card, .community-card { position: relative; padding: 16px; }
.story-card::before { position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: var(--member-color, repeating-linear-gradient(135deg, var(--ink) 0 2px, var(--paper) 2px 5px)); content: ""; }
.community-card { border-style: dashed; background: #fcfcfa; }
.community-card::before { display: inline-block; width: 28px; height: 4px; margin-bottom: 9px; background: repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 9px); content: ""; }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 8px; color: var(--ink-muted); font-size: .78rem; }
.status-chip { display: inline-flex; min-height: 25px; align-items: center; padding: 2px 7px; color: var(--ink); border: 1px solid var(--ink); border-radius: var(--radius-chip); background: var(--paper); font-size: .72rem; font-weight: 700; }
.status-chip.community { border-style: dashed; color: var(--ink-muted); }
.status-chip.cancelled { text-decoration: line-through; }
.card-title-link { display: block; width: 100%; overflow-wrap: anywhere; padding: 0; color: var(--ink); border: 0; background: transparent; font: 800 1.2rem/1.42 var(--font-text); text-align: left; }
.card-title-link:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.story-card p, .community-card p, .event-card p, .ticket-card p { margin: 8px 0 0; color: var(--ink-muted); font-size: .88rem; }
.community-facts { padding-top: 9px; border-top: 1px dashed var(--line); font-size: .8rem; }
.member-chips { margin-top: 12px; }
.member-chip { min-height: 27px; padding: 3px 8px; color: var(--member-ink, var(--ink)); border: 1px solid var(--member-ink, var(--line)); border: 1px solid color-mix(in srgb, var(--member-color, var(--ink)) 58%, var(--line)); border-radius: var(--radius-chip); background: var(--paper-soft); background: color-mix(in srgb, var(--member-color, var(--paper)) 18%, var(--paper)); font-size: .73rem; font-weight: 700; }
.community-section .section-heading h2::before { display: inline-block; width: 19px; height: 4px; margin-right: 7px; vertical-align: middle; background: repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 7px); content: ""; }
.event-list, .ticket-list { display: grid; gap: 10px; }
.event-card, .ticket-card { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; }
.ticket-card { grid-template-columns: minmax(0, 1fr); }
.event-date { align-self: stretch; display: grid; place-content: center; padding: 8px; border: 1px solid var(--ink); border-radius: var(--radius-hard); background: var(--paper-soft); text-align: center; }
.event-date strong { font-family: var(--font-display); font-size: 1.45rem; line-height: 1; }
.filter-scroller { display: flex; gap: 7px; overflow-x: auto; margin: 14px 0; padding: 2px 0 6px; scrollbar-width: thin; }
.filter-scroller .filter-button { flex: 0 0 auto; }
.result-summary { margin: -4px 0 13px; color: var(--ink-muted); font-size: .82rem; }
.search-row { display: flex; gap: 8px; margin-bottom: 14px; }
.search-input { width: min(540px, 100%); min-height: 43px; padding: 8px 11px; color: var(--ink); border: 1px solid var(--ink); border-radius: var(--radius-card); background: var(--paper); }
.empty-card { padding: 27px; color: var(--ink-muted); text-align: center; }
.button-ink { color: var(--paper); border-color: var(--ink); background: var(--ink); }
.button-soft { background: var(--paper-soft); }
.text-button { padding: 4px 0; color: var(--ink); border: 0; border-bottom: 1px solid var(--ink); background: transparent; font-weight: 700; }
.member-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.member-card { min-height: 175px; padding: 18px; color: var(--ink); text-align: left; }
.member-card:hover { background: var(--paper-soft); }
.member-hero { position: relative; overflow: hidden; border-left: 7px solid var(--member-color); }
.member-avatar { display: grid; width: 46px; height: 46px; margin-bottom: 10px; place-items: center; color: var(--member-ink, var(--ink)); border: 1px solid var(--member-ink, var(--ink)); border-radius: 50%; background: var(--member-color); font-weight: 900; }
.member-card span { display: block; margin-top: 5px; color: var(--ink-muted); font-size: .82rem; }
.member-profile { margin-bottom: 28px; padding: 24px; border: 1px solid var(--line); border-left: 8px solid var(--member-color); border-radius: var(--radius-card); background: var(--paper-soft); }
.member-profile h1 { margin: 0 0 7px; }
.member-profile p { margin: 0 0 14px; color: var(--ink-muted); }
.member-color-name { color: var(--member-ink) !important; font-weight: 800; }
.calendar-tabs { margin: 14px 0; }
.calendar-week { display: grid; gap: 22px; }
.month-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.month-event { min-height: 138px; padding: 13px; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); text-align: left; }
.month-event:hover { background: var(--paper-soft); }
.month-event time, .month-event strong, .month-event span { display: block; }
.month-event time { margin-bottom: 9px; font-family: var(--font-display); }
.month-event span { margin-top: 7px; color: var(--ink-muted); font-size: .83rem; }
.detail-surface, .settings-card { width: 100%; max-width: 780px; padding: clamp(20px, 4vw, 38px); }
.detail-title, .youtube-panel h2 { min-width: 0; overflow-wrap: anywhere; }
.detail-title { max-width: 100%; margin: 15px 0 10px; font-size: clamp(1.65rem, 3.1vw, 2.5rem); line-height: 1.14; letter-spacing: -.035em; }
.detail-surface > p { color: var(--ink-muted); }
.source-title-disclosure { margin-top: 14px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--radius-hard); color: var(--ink-muted); font-size: .82rem; }
.source-title-disclosure summary { color: var(--ink); cursor: pointer; font-weight: 800; }
.source-title-disclosure p { margin: 9px 0 0; overflow-wrap: anywhere; }
.settings-card h2 { margin-top: 0; }
.youtube-setting { margin-top: 25px; padding-top: 20px; border-top: 1px dashed var(--line); }
.youtube-setting p { color: var(--ink-muted); }
.youtube-panel { min-width: 0; margin-top: 24px; overflow: hidden; padding: 18px; border: 1px solid var(--ink); border-radius: var(--radius-card); background: var(--paper-soft); }
.youtube-panel h2 { margin: 3px 0 7px; font-size: 1.04rem; }
.youtube-attribution { margin: 0; color: var(--ink-muted); font-size: .78rem; font-weight: 800; }
.youtube-privacy-note, .youtube-player-message { margin: 0; color: var(--ink-muted); font-size: .87rem; }
.youtube-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.youtube-watch-link { display: inline-flex; min-height: 40px; align-items: center; padding: 7px 11px; color: var(--ink); border: 1px solid var(--ink); border-radius: var(--radius-card); background: var(--paper); font-weight: 700; text-decoration: none; }
.youtube-watch-link:hover { background: var(--paper-2); text-decoration: underline; text-decoration-thickness: 2px; }
.youtube-player-host { display: grid; gap: 10px; min-height: 0; }
.youtube-iframe { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; min-height: 200px; border: 0; border-radius: var(--radius-hard); background: var(--ink); }
.status-banner { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 18px; padding: 11px 13px; border-left: 4px solid var(--ink); background: #f7f7f5; }
.status-banner strong { color: var(--ink); }
.mobile-nav { display: none; }
@media (max-width: 1020px) { .member-rail { display: none; } .public-main { padding: 0 16px calc(104px + env(safe-area-inset-bottom)); } .global-header { position: sticky; z-index: 20; top: 0; flex-wrap: nowrap; margin: 0 -16px 8px; padding: 10px 16px; background: var(--paper); box-shadow: 0 1px 0 var(--line); } .mobile-brand { display: block; width: 126px; flex: 0 1 126px; padding: 2px; border: 0; background: transparent; } .primary-nav { display: none; } .header-tools { margin-left: auto; } .search-trigger, .header-my-oshi { min-height: 37px; padding: 6px 8px; font-size: .78rem; } .mobile-member-flow { display: flex; gap: 7px; overflow-x: auto; margin: 0 -16px; padding: 3px 16px 10px; scrollbar-width: thin; } .mobile-member-flow .member-chip { flex: 0 0 auto; } .member-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mobile-nav { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 5px max(8px, env(safe-area-inset-left)) calc(5px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right)); border-top: 1px solid var(--line); background: var(--paper); box-shadow: 0 -8px 20px rgba(0, 0, 0, .07); } .mobile-nav .nav-item { min-height: 49px; padding: 6px 2px; border-radius: var(--radius-hard); font-size: .7rem; } }
@media (max-width: 560px) { .today-cover { grid-template-columns: 1fr; padding: 28px 18px 20px; } .today-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .count-link { min-height: 59px; padding: 8px; font-size: .78rem; } .card-grid, .member-list, .month-grid { grid-template-columns: 1fr; } .event-card { grid-template-columns: 68px minmax(0, 1fr); gap: 10px; } .section-heading { align-items: start; flex-direction: column; gap: 3px; } .search-row { align-items: stretch; flex-direction: column; } .youtube-panel { margin: 20px 0 0; padding: 15px; } .youtube-actions > * { width: 100%; justify-content: center; } }
@media (max-width: 380px) { .mobile-brand { width: 102px; flex-basis: 102px; } .header-tools { gap: 4px; } .search-trigger, .header-my-oshi { padding-right: 6px; padding-left: 6px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }