/* Small fixes for everyone (the "new interface" switch does not gate these):
   typography, stacking and contrast bugs, the 404 page, status on phones. */

/* Type: CJK fonts draw ‘ ’ as full-width glyphs ("RJ&BME’ s"). Borrow only
   those two characters from a Latin face, and give Japanese and Korean pages
   their own Han/Hangul faces instead of Traditional Chinese glyph shapes. */
@font-face {
  font-family: "Observatory Quotes";
  src: local("Helvetica Neue"), local("Segoe UI"), local("Roboto"), local("Arial"), local("Liberation Sans");
  unicode-range: U+2018-2019;
}
:root {
  --font-sans: "Observatory Quotes", "Noto Sans TC", system-ui, -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", "Segoe UI", sans-serif;
  --font-display: var(--font-sans);
  --page-width: min(1120px, calc(100% - 48px));
}
html:lang(ja) { --font-sans: "Observatory Quotes", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, -apple-system, "Noto Sans TC", sans-serif; }
html:lang(ko) { --font-sans: "Observatory Quotes", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, -apple-system, "Noto Sans TC", sans-serif; }
body { font-family: var(--font-sans); }

/* Mobile: the header was position:static, so its z-index did nothing and the
   story cards painted over the open "More" menu. */
@media (max-width: 640px) {
  .site-header.legacy-site-header { position: relative; z-index: 40; }
}

/* Dark appearance: Google's embed has no dark theme; invert it so the agenda
   no longer glows white, keeping event colors' hues. */
:root[data-theme="dark"] .google-calendar-frame { border-radius: 10px; overflow: hidden; background: #1b1f1c; }
:root[data-theme="dark"] .google-calendar-frame iframe { filter: invert(.9) hue-rotate(180deg) saturate(1.2); }

/* Stories: stronger scrims so names and times stay readable over posters. */
.ob-story-header { padding-bottom: 40px; background: linear-gradient(rgb(0 0 0 / .82), rgb(0 0 0 / .55) 55%, transparent); }
.ob-story-footer { padding-top: 40px; background: linear-gradient(transparent, rgb(0 0 0 / .6) 40%, rgb(0 0 0 / .86)); }

.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; margin-top: 12px; }
.not-found { display: grid; justify-items: center; max-width: 40rem; margin: 48px auto 24px; padding: 48px 24px; text-align: center; }
.not-found > svg { width: 56px; height: 56px; padding: 12px; color: var(--color-text-brand); background: var(--color-surface-soft); border-radius: 50%; }
.not-found .eyebrow { margin: 14px 0 0; color: var(--color-text-brand); font-weight: 700; letter-spacing: .12em; }
.not-found .page-heading { display: block; padding: 4px 0 8px; border: 0; }
.not-found .page-heading p { margin-inline: auto; text-wrap: pretty; }
.not-found-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }

/* System status: a card per service on phones instead of a clipped table. */
@media (max-width: 640px) {
  .status-table { overflow: visible; }
  .status-table table, .status-table tbody, .status-table tr, .status-table th, .status-table td { display: block; width: auto; }
  .status-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .status-table tr { margin: 0 0 12px; padding: 14px 16px; background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); }
  .status-table th[scope="row"] { padding: 0 0 8px; font-size: 1rem; text-align: left; border: 0; }
  .status-table td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 10px; padding: 8px 0; border: 0; border-top: 1px solid var(--color-border-subtle); }
  .status-table td::before { content: attr(data-label); color: var(--color-text-muted); font-size: .8rem; font-weight: 600; }
  .status-table td > * { justify-self: start; }
  .status-table td p { grid-column: 2; margin: 4px 0 0; }
}

/* Korean breaks between words, not inside them. */
html:lang(ko) body { word-break: keep-all; overflow-wrap: anywhere; }

/* FAQ: plus when closed, minus when open. */
.faq summary .faq-icon { display: inline-flex; margin-left: auto; }
.faq summary .faq-icon svg { width: 20px; height: 20px; }
.faq summary .faq-icon-open, .faq[open] summary .faq-icon-closed { display: none; }
.faq[open] summary .faq-icon-open { display: inline-flex; }
.faq summary > svg { display: none; }

/* System status pills carry their meaning in colour as well as words. */
.status-pill.status-healthy { color: var(--color-success-text); background: var(--color-success-surface); }
.status-pill.status-paused { color: var(--color-warning-text); background: var(--color-warning-surface); }
.status-pill.status-degraded { color: var(--color-danger-text); background: var(--color-danger-surface); }
.status-pill.status-unavailable, .status-pill.status-disabled { color: var(--color-text-secondary); background: var(--color-surface-soft); }

.src-summary { display: none; }
.src-country-inline { display: none; }

/* Signed-in header button reads as a state, not just a link. */
.legacy-site-header .nav-account-button.is-signed-in { display: inline-flex; align-items: center; gap: 8px; color: var(--color-action-on-primary); background: var(--color-action-primary); border-color: var(--color-action-primary); }
.nav-account-avatar { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--color-action-primary); background: var(--color-action-on-primary); border-radius: 50%; }
.nav-account-avatar svg { width: 14px; height: 14px; stroke-width: 2.4; }

.nav-label-short { display: none; }

/* Contact card and Apify note: content shown to everyone, stacked layout. */
.contact-card { margin: 24px 0; padding: 20px 22px; background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); }
.contact-card h2 { margin: 0 0 6px; font-size: 1.1rem; }
.contact-card p { margin: 0 0 12px; color: var(--color-text-secondary); font-size: .9rem; line-height: 1.7; }
.contact-card ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.contact-link { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; color: var(--color-text-primary); font-weight: 600; text-decoration: none; background: var(--color-canvas); border-radius: 10px; }
.contact-link svg { width: 18px; height: 18px; color: var(--color-text-brand); }
.contact-link:hover { background: var(--color-surface-soft); }
.apify-intro { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 20px; padding: 14px 16px; color: var(--color-text-secondary); font-size: .92rem; line-height: 1.7; background: var(--color-info-surface); border-radius: var(--radius-md); }
.apify-intro svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 3px; color: var(--color-text-brand); }
.apify-intro p { margin: 0; }