@import url("./tokens.css");
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:64px; }
body { margin:0; font-family:var(--font-sans); background:var(--color-canvas); color:var(--color-text-primary); line-height:1.75; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
button:disabled { opacity:.5; cursor:not-allowed; }
a { color:var(--color-text-brand); text-decoration:none; }
a:hover { text-decoration:underline; }
svg { width:20px; height:20px; flex-shrink:0; vertical-align:middle; }
button svg,a svg { pointer-events:none; }
img { max-width:100%; display:block; }
:focus-visible { outline:2px solid var(--color-focus-ring); outline-offset:3px; border-radius:var(--radius-sm); }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
input,select,textarea { border:1px solid var(--color-border-subtle); border-radius:var(--radius-sm); background:var(--color-surface); padding:9px 12px; min-width:0; max-width:100%; }
input[type=checkbox] { accent-color:var(--color-action-primary); }
h1,h2,h3,h4,p { margin:0; }
h1,h2,h3,h4 { line-height:1.4; overflow-wrap:anywhere; }
h1 { font-size:1.8rem; } h2 { font-size:1.25rem; } h3 { font-size:1.05rem; }
p { overflow-wrap:anywhere; }
hr { border:0; border-top:1px solid var(--color-border-subtle); margin:20px 0; }
[hidden],.failed-image { display:none !important; }
.skip-link { position:fixed; left:12px; top:-100px; z-index:100; padding:10px 15px; background:var(--color-action-primary); color:white; border-radius:8px; }
.skip-link:focus { top:12px; }
/* ---------- app 殼（Threads 式）：桌機左欄／平板窄欄／手機頂欄＋底欄 ---------- */
.site-header {
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: 260px;
  display: flex; flex-direction: column; gap: 4px; padding: 20px 16px 16px;
  background: var(--color-canvas);
}
.brand { display: flex; align-items: baseline; gap: 2px; padding: 4px 12px 20px; text-decoration: none; }
.brand:hover { text-decoration: none; }
/* Observatory identity; the reference navigation dimensions stay unchanged. */
.brand { align-items:center; gap:9px; color:var(--color-text-primary); }
.brand-mark { display:flex; align-items:center; color:var(--color-text-brand); flex:none; }
.brand-mark svg { width:30px; height:30px; }
.brand-name { font-size:1.05rem; line-height:1.2; font-weight:700; letter-spacing:-.025em; }
.brand-name small { display:block; color:var(--color-text-muted); font-size:.69rem; letter-spacing:.015em; font-weight:500; margin-top:5px; }
.site-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; }
.nav-item {
  display: flex; align-items: center; gap: 14px;
  min-height: var(--layout-tap-target, 44px); padding: 10px 12px;
  border-radius: var(--radius-md); color: var(--color-text-secondary);
  font-weight: 600; font-size: 0.95rem; line-height: 1;
  transition: background var(--motion-fast, 140ms), color var(--motion-fast, 140ms);
}
.nav-item svg { width: 24px; height: 24px; flex: 0 0 auto; }
.nav-account-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  position: relative;
  width: 24px; height: 24px; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--color-border-subtle); background: var(--color-surface-soft);
  color: var(--color-text-brand); font-size: 0.76rem; font-weight: 750; line-height: 1;
}
.nav-account-avatar img,
.profile-avatar img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.nav-item:hover { background: var(--color-surface-soft); color: var(--color-text-primary); text-decoration: none; }
.nav-item[aria-current="page"] { color: var(--color-text-primary); }
.nav-more { position: relative; margin-top: auto; }
.nav-more summary { list-style: none; cursor: pointer; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more-menu {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 50;
  min-width: 210px; padding: 8px; display: flex; flex-direction: column; gap: 2px;
  background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-raised);
}
.nav-more-menu a, .nav-more-menu button {
  display: flex; align-items: center; min-height: 44px; padding: 10px 14px;
  border: none; background: none; cursor: pointer; text-align: left;
  border-radius: var(--radius-md); color: var(--color-text-primary);
  font-family: inherit; font-size: 0.92rem; font-weight: 600;
}
.nav-more-menu a:hover, .nav-more-menu button:hover { background: var(--color-surface-soft); text-decoration: none; }
.nav-more-menu .mi { width: 20px; height: 20px; flex: none; margin-right: 12px; color: var(--color-text-secondary); }
.nav-more-menu .nav-account-avatar.mi { font-size: 0.66rem; color: var(--color-text-brand); }
.nav-more-menu > div { display: flex; flex-direction: column; gap: 2px; }
.nav-more-menu > div[hidden] { display: none; }
.nav-more-menu .nav-logout {
  margin: 6px 0 0; padding: 6px 0 0; border-top: 1px solid var(--color-border-subtle);
}
.nav-more-menu .nav-logout button { width: 100%; color: var(--color-danger-text); }
.nav-more-menu .nav-logout .mi { color: currentColor; }

/* 外觀子面板（Threads 式） */
.appear-open { justify-content: space-between; }
.appear-open svg { width: 18px; height: 18px; color: var(--color-text-muted); flex: 0 0 auto; }
.appear-head { display: flex; align-items: center; gap: 6px; padding: 2px 4px 6px; }
.appear-head strong { font-size: 0.95rem; }
.appear-back {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; min-height: 0; padding: 0;
  border: none; background: none; cursor: pointer; border-radius: 50%;
  color: var(--color-text-secondary);
}
.appear-back svg { width: 20px; height: 20px; }
.appear-back:hover { background: var(--color-surface-soft); }
.appear-label { padding: 8px 14px 2px; font-size: 0.78rem; font-weight: 700; color: var(--color-text-muted); }
.appear-seg {
  display: flex; gap: 2px; margin: 4px 6px; padding: 3px;
  background: var(--color-surface-soft); border-radius: var(--radius-pill);
}
.appear-seg button {
  flex: 1; min-height: 36px; padding: 6px 10px; justify-content: center; text-align: center;
  border: none; background: none; cursor: pointer; border-radius: var(--radius-pill);
  font-family: inherit; font-size: 0.88rem; font-weight: 600; color: var(--color-text-muted);
}
.appear-seg button:hover { background: color-mix(in srgb, var(--color-canvas) 40%, transparent); color: var(--color-text-secondary); }
.appear-seg button[aria-pressed="true"] {
  background: var(--color-canvas); color: var(--color-text-primary);
  box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
}

.fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 30;
  display: none; align-items: center; justify-content: center;
  width: 64px; height: 56px; border-radius: var(--radius-lg);
  background: var(--color-surface-raised); border: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary); box-shadow: var(--shadow-raised);
  transition: transform var(--motion-fast, 140ms) var(--motion-ease);
}
.fab:hover { transform: scale(1.06); text-decoration: none; }
.fab svg { width: 26px; height: 26px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

main { max-width: var(--layout-content, 1200px); margin: 0 auto; padding: 8px 20px 64px; }

@media (min-width: 1080px) {
  body { padding-left: 260px; }
  .nav-account-entry { margin-top: auto; }
  .nav-more { margin-top: 0; }
  .nav-more-menu .nav-mobile-extra { display: none; }
}
@media (min-width: 700px) and (max-width: 1079px) {
  body { padding-left: 76px; }
  .site-header { width: 76px; padding: 16px 10px; }
  .brand { justify-content: center; padding: 4px 0 16px; }
  .brand-name { display:none; }
  .nav-label { display: none; }
  .nav-item { justify-content: center; padding: 10px 0; }
  .nav-more-menu { left: calc(100% + 10px); bottom: 0; }
  .nav-desktop-extra { display: none; }
}
@media (max-width: 699px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .site-header {
    position: sticky; inset: auto; top: 0; width: auto; z-index: 40;
    flex-direction: row; justify-content: center; align-items: center;
    height: 54px; padding: 0 12px;
    background: none;
  }
  /* 毛玻璃放偽元素：backdrop-filter 直接放 header 會變成 fixed 底欄的 containing block，把底欄拉到頂部。
     往下延伸＋mask 漸層讓模糊淡出，避免硬邊界。 */
  .site-header::before {
    content: ""; position: absolute; inset: 0 0 -12px; z-index: -1; pointer-events: none;
    background: color-mix(in srgb, var(--color-canvas) 78%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    mask-image: linear-gradient(to bottom, #000 54px, transparent 66px);
    -webkit-mask-image: linear-gradient(to bottom, #000 54px, transparent 66px);
  }
  .brand { padding: 0; }
  .brand-name { font-size:1rem; }
  .brand-name small { display:none; }
  .brand-mark svg { width:25px; height:25px; }
  .site-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    flex-direction: row; gap: 0; flex: none;
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--color-canvas) 86%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--color-border-subtle);
  }
  .nav-item {
    flex: 1; flex-direction: column; justify-content: center; gap: 3px;
    min-height: 52px; padding: 5px 0; color: var(--color-text-muted); font-size: 0.68rem;
  }
  .nav-item[aria-current="page"] { color: var(--color-text-primary); }
  .nav-item svg { width: 23px; height: 23px; }
  .nav-label { display: block; }
  .nav-more { flex: 1; display: flex; margin: 0; position: static; }
  .nav-more summary.nav-item { width: 100%; }
  .nav-more-menu {
    position: fixed; left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom));
    min-width: 0;
  }
  .nav-desktop-extra { display: none; }
  main { padding: 4px 14px 48px; }
  .hero { padding: 16px 0 6px; }
}

/* Shared reading layouts and compact controls. */
.main-container { max-width:1200px; min-height:70vh; margin:0 auto; padding:8px 20px 48px; }
.main-container:focus { outline:none; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:24px 0 20px; }
.page-heading h1 { font-size:clamp(1.5rem,3vw,2rem); margin:3px 0 8px; }
.page-heading p:not(.eyebrow) { max-width:720px; font-size:.9rem; color:var(--color-text-secondary); }
.eyebrow { font-size:.74rem; font-weight:650; color:var(--color-text-muted); }
.small { font-size:.82rem; }.muted,.field-hint { color:var(--color-text-muted); }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:24px 0 12px; }
.section-heading p { font-size:.84rem; color:var(--color-text-muted); }
.button,.copy-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; border:1px solid var(--color-border-subtle); background:var(--color-surface); color:var(--color-text-primary); border-radius:var(--radius-sm); font-weight:600; font-size:.86rem; padding:8px 14px; cursor:pointer; }
.button:hover,.copy-button:hover { text-decoration:none; background:var(--color-surface-soft); }
.button-primary { background:var(--color-action-primary); color:var(--color-action-on-primary); border-color:transparent; }
.button-primary:hover { background:var(--color-action-primary-hover); }
.button-danger { color:var(--color-danger-text); background:var(--color-danger-surface); }
.text-link { display:inline-flex; align-items:center; gap:5px; font-size:.84rem; }
.tag,.status-pill,.country-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 7px; font-size:.72rem; border-radius:var(--radius-pill); background:var(--color-surface-soft); color:var(--color-text-secondary); }
.status-pill.is-ok { background:var(--color-success-surface); color:var(--color-success-text); }
.follow-button,.round-link { width:32px; height:32px; border:1px solid var(--color-border-subtle); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--color-surface); color:var(--color-text-secondary); flex:none; }
.follow-button.is-following { color:var(--color-text-brand); background:var(--color-surface-soft); }
.avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; background:var(--color-surface-soft); display:flex; align-items:center; justify-content:center; font-size:.88rem; color:var(--color-text-brand); flex:none; }
.empty-state { color:var(--color-text-muted); padding:36px 18px; text-align:center; }
.empty-state svg { margin-bottom:10px; }
.filter-bar { display:flex; align-items:end; flex-wrap:wrap; gap:10px; padding:12px 0 16px; border-bottom:1px solid var(--color-border-subtle); }
.filter-bar label { display:flex; flex-direction:column; gap:4px; font-size:.75rem; color:var(--color-text-muted); min-width:0; }
.filter-bar select { max-width:220px; font-size:.83rem; }
.filter-bar .search-label { flex:1; min-width:190px; }
.search-wrap { display:flex; align-items:center; position:relative; }
.search-wrap svg { position:absolute; left:11px; width:17px; }
.search-wrap input { width:100%; padding-left:35px; }
.filter-bar .checkbox-filter { flex-direction:row; align-items:center; align-self:center; white-space:nowrap; }
.clear-filter { border:0; background:transparent; color:var(--color-text-brand); padding:9px 6px; font-size:.8rem; }
.list-summary { display:flex; justify-content:space-between; gap:12px; padding:12px 0; color:var(--color-text-muted); font-size:.8rem; }
.pagination { display:flex; flex-direction:column; align-items:center; gap:12px; margin:25px 0; font-size:.82rem; color:var(--color-text-muted); }
.original-note,.notice { display:flex; gap:7px; align-items:flex-start; font-size:.8rem; color:var(--color-text-muted); margin:12px 0; }
.table-scroll { max-width:100%; overflow:auto; }
table { width:100%; border-collapse:collapse; font-size:.85rem; }
th,td { padding:11px 12px; text-align:left; border-bottom:1px solid var(--color-border-subtle); }
th { color:var(--color-text-muted); font-weight:600; white-space:nowrap; }
.prose { max-width:720px; }
.prose section { margin:24px 0; }.prose h2 { margin-bottom:10px; }.prose p { color:var(--color-text-secondary); }
.faq { border-bottom:1px solid var(--color-border-subtle); padding:14px 0; }
.faq summary { cursor:pointer; display:flex; justify-content:space-between; gap:12px; font-weight:600; }
.faq p { margin-top:12px; color:var(--color-text-secondary); font-size:.9rem; }
.site-footer { max-width:1200px; padding:16px 20px 24px; margin:0 auto; color:var(--color-text-muted); font-size:.72rem; border-top:1px solid var(--color-border-subtle); }
.footer-links { display:flex; flex-wrap:wrap; gap:8px 16px; margin-bottom:8px; }
.footer-bottom { display:flex; flex-wrap:wrap; gap:8px 20px; }
.site-footer a { color:var(--color-text-muted); }
.nav-more-menu { max-height:min(700px,calc(100dvh - 100px)); overflow:auto; width:280px; }
.nav-more-menu .appear-head { flex-direction:row; }
.nav-more-menu .appear-seg { flex-direction:row; }
.nav-more-menu .appear-seg button { padding:6px; font-size:.78rem; }
.nav-more-menu .language-picker { display:flex; flex-direction:column; gap:6px; padding:10px 14px; font-size:.8rem; font-weight:600; }
.language-picker select { width:100%; }
.mobile-header-action { display:none; }
/* Browser-owned community forms keep their identity and API semantics. */
.contribution-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr); gap:24px; align-items:start; }
.contribution-layout > * { min-width:0; }
.form-panel,.capacity-panel,.owned-contribution,.impact-panel { background:var(--color-surface); border:1px solid var(--color-border-subtle); border-radius:var(--radius-lg); padding:24px; }
.form-panel h2 { margin-bottom:18px; }
.form-panel > label:not(.consent-label) { display:block; margin:16px 0 5px; font-size:.85rem; font-weight:600; }
.form-panel > input,.form-panel > select,.form-panel > textarea { display:block; width:100%; }
.field-hint { font-size:.78rem; line-height:1.7; margin-top:7px; }
.currency-input { display:flex; align-items:center; gap:10px; }.currency-input input { flex:1; width:100%; }
.consent-label { display:flex; gap:10px; align-items:flex-start; padding:18px 0 5px; font-size:.82rem; }
.consent-label input { flex:none; width:17px; height:17px; margin-top:5px; }
.form-message { margin:12px 0; font-size:.84rem; color:var(--color-text-secondary); }
.form-message.is-error { padding:12px; border-radius:8px; color:var(--color-danger-text); background:var(--color-danger-surface); }
.capacity-figures { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0; }
.capacity-figures > div { display:flex; flex-direction:column; }.capacity-figures strong { font-size:1.75rem; line-height:1.4; }
.capacity-figures span { font-size:.78rem; color:var(--color-text-muted); }
.capacity-panel h3 { margin-bottom:10px; }.capacity-panel > .small { color:var(--color-text-muted); }
.schedule-list { margin:8px 0 16px; }.schedule-list > div { display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--color-border-subtle); font-size:.8rem; }
.schedule-list small { display:block; color:var(--color-text-muted); }.schedule-list strong { text-align:right; font-weight:600; }
.sidebar-note { padding:20px 4px; }.sidebar-note h3 { margin-bottom:9px; }.sidebar-note p { font-size:.84rem; color:var(--color-text-secondary); margin-bottom:12px; }
.ownership-section { margin-top:28px; }.ownership-section h2 { margin-bottom:9px; }.owned-contribution { margin:14px 0; }
.owned-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.owned-contribution dl { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0; }.owned-contribution dt { font-size:.76rem; color:var(--color-text-muted); }.owned-contribution dd { margin:0; }
.impact-panel { margin-top:20px; }.impact-panel h3 { margin-bottom:14px; }.impact-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.submission-row { display:flex; gap:14px; align-items:flex-start; justify-content:space-between; border-bottom:1px solid var(--color-border-subtle); padding:14px 0; }.submission-row > div { min-width:0; }.submission-url { overflow-wrap:anywhere; }
.initial-loading { min-height:60vh; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; }.initial-loading p { font-size:.88rem; color:var(--color-text-muted); }
.loading-mark { font-size:2rem; }.server-content + .initial-loading { display:none; }.server-content { max-width:1000px; margin:0 auto; padding:25px 20px; }.server-content nav { display:flex; flex-wrap:wrap; gap:12px; }
.toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%,20px); opacity:0; visibility:hidden; z-index:100; padding:12px 18px; border-radius:12px; background:var(--color-text-primary); color:var(--color-canvas); max-width:min(90vw,620px); font-size:.85rem; box-shadow:var(--shadow-raised); transition:opacity .2s,transform .2s; }
.toast.visible { visibility:visible; opacity:1; transform:translate(-50%,0); }
dialog { border:1px solid var(--color-border-subtle); border-radius:var(--radius-lg); background:var(--color-surface-raised); color:var(--color-text-primary); padding:26px; max-width:500px; width:calc(100vw - 32px); box-shadow:var(--shadow-raised); }dialog::backdrop { background:#0007; backdrop-filter:blur(3px); }dialog h2,dialog p,.dialog-icon { margin-bottom:14px; }.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
@media (min-width:1080px) { .nav-more { margin-top:auto; } }
@media (min-width:700px) and (max-width:1079px) { .nav-more-menu { width:280px; }.nav-more { margin-top:auto; } }
@media (max-width:850px) { .contribution-layout { grid-template-columns:1fr; }.contribution-layout aside { max-width:720px; } }
@media (max-width:699px) {
 .main-container { padding:4px 14px 30px; }.page-heading { padding:18px 0 14px; }.page-heading h1 { font-size:1.5rem; }
 .nav-more-menu { width:auto; }.nav-more-menu .nav-mobile-extra { display:flex; }.nav-more-menu a { min-height:40px; }
 .brand { max-width:calc(100% - 80px); }.brand-name { white-space:nowrap; font-size:.98rem; }
 .mobile-header-action { display:flex; position:absolute; top:7px; width:40px; height:40px; align-items:center; justify-content:center; border:0; background:none; color:var(--color-text-secondary); }
 .mobile-filter { left:10px; }.mobile-search { right:10px; }.mobile-header-action svg { width:22px; height:22px; }
 .site-nav > .nav-item,.site-nav .nav-more summary { min-width:0; }.nav-label { white-space:nowrap; font-size:.64rem; }
 .site-footer { padding:16px 14px 24px; }.toast { bottom:calc(82px + env(safe-area-inset-bottom)); }
 .form-panel,.capacity-panel,.owned-contribution,.impact-panel { padding:18px; }.impact-grid { grid-template-columns:1fr; }
 .filter-bar { gap:8px; }.filter-bar > label:not(.checkbox-filter) { flex:1 1 130px; }.filter-bar .search-label { flex-basis:100%; }.filter-bar select { max-width:100%; }
 .form-panel > .button { width:100%; }.dialog-actions .button { flex:1; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }
.nav-more-menu a { gap:12px; }
.nav-more-menu a svg { width:20px; height:20px; }
.nav-more-menu .appear-open { gap:12px; }
.nav-more-menu .appear-open span { margin-right:auto; }
@media (min-width:1080px) { html:lang(zh-Hant) .brand-name { font-size:1.35rem; } }
@media (max-width:699px) { html:lang(zh-Hant) .brand-name { font-size:1.45rem; font-weight:700; } }
/* Each locale presents one wordmark, sized to retain the compact navigation. */
.brand-name { white-space:nowrap; }
@media (min-width:1080px) {
  html:lang(en) .brand-name { font-size:.92rem; }
  html:lang(ja) .brand-name { font-size:1.12rem; }
  html:lang(ko) .brand-name { font-size:1.12rem; }
}
@media (max-width:699px) {
  html:lang(ja) .brand-name,html:lang(ko) .brand-name { font-size:1.1rem; }
}
@media (max-width:359px) { html:lang(en) .brand-name { font-size:.88rem; } }

/* Google account controls on contribution and submission pages. */
.account-panel { margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.account-panel > div { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.account-panel h2 { margin-top: 0; }
.account-panel #login-message { flex-basis: 100%; margin: 0; }
.account-panel #login-message:empty { display: none; }