/* ===== Design tokens — adapted from phys-revision design-system ===== 主題系統：每個主題 = 一組 var() 覆寫（全平台組件已用 var()，故換 token 即換皮）。 ── 加新主題只需三步（呢個係「為日後鋪路」嘅擴展點）── 1. 喺下面加一個 [data-theme=""] 區塊，覆寫想改嘅變數（其餘繼承 classic）。 2. admin.js 嘅 THEMES array push 一項 {key,name,thumb}。 3. assets/theme-thumbs/.png 放 2×2 四頁縮圖。現行皮 = classic（display「簡約現代」）；:root 同 [data-theme="classic"]/[data-theme="light"] 共用同一組 token（light 係舊別名，向後相容）。預設主題喺 + boot 套用。 */ :root, [data-theme="light"], [data-theme="classic"] { --bg:#FFFFFF; --surface:#FFFFFF; --band:#F5F5F7; --surface-2:#FBFBFD; /* --surface2：帶色淺 tint（區隔於近白 --surface-2）。供群組列底／課題碼徽章／免責橫額用。舊碼 4 處誤寫 var(--surface2,…)（無連字號）從未定義而 fallback 到冷藍硬碼，換皮失效；現定義為 token 令主題可覆寫。冷藍 tint 上 --ink2 已驗 4.56、--ink 15.13（皆 ≥AA）。 */ --surface2:#EFF3FB; --ink:#1D1D1F; --ink2:#6E6E73; --ink3:#6B6B71; --accent:#2563EB; --accent-text:#1D4ED8; --accent-on:#FFFFFF; --accent-soft:rgba(37,99,235,.10); --ok-text:#15803D; --bad-text:#D32020; --warn-text:#A14807; --ok-fill:#16A34A; --bad-fill:#DC2626; --warn-fill:#D97706; --ok-soft:rgba(22,163,74,.10); --bad-soft:rgba(220,38,38,.08); --warn-soft:rgba(217,119,6,.10); /* --school：本校柱填色；--hk：全港。--hk 文字色（.val-hk）另用 --hk-text（WCAG ≥4.5），柱 .hk-fill 仍用 --hk 淺灰（柱為大色塊，唔受 4.5:1 文字門檻限制）。 */ --school:#2563EB; --hk:#94949E; --hk-text:#6E6E73; --hairline:rgba(0,0,0,.08); --hairline-2:rgba(0,0,0,.12); --shadow:0 10px 40px rgba(0,0,0,.06); --shadow-lift:0 18px 50px rgba(0,0,0,.10); --t-display:2.25rem; --t-h1:1.5rem; --t-h2:1.375rem; --t-h3:1.125rem; --t-body:1rem; --t-sm:0.875rem; --t-xs:0.75rem; --lh-tight:1.25; --lh-body:1.6; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --radius:20px; --radius-sm:14px; --radius-xs:10px; --font:"Inter",-apple-system,"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif; --font-num:"SF Mono",ui-monospace,"Inter",monospace; } /* ===== 主題：典雅學府（collegiate）— 白金襯線學府風 ===== 只覆寫色彩 / 字體 / 圓角；狀態色（ok/bad/warn）沿用 classic 以保數據語意一致。數字仍用 --font-num（等寬），確保表格 / 圖表喺 serif 下對齊清晰可讀。 */ [data-theme="collegiate"] { --bg:#fffefb; --surface:#fffdf8; --band:#f8f5ee; --surface-2:#faf7f0; --surface2:#F6F1E4; /* collegiate 暖 tint（覆寫冷藍，令換皮生效）；ink2 5.25 / ink 12.66 ≥AA。 */ --ink:#2e2a22; --ink2:#6b6357; --ink3:#6e675b; --accent:#b8954a; --accent-text:#7d6430; --accent-on:#fffdf8; --accent-soft:rgba(184,149,74,.12); /* --hk 柱填色留淺暖灰；--hk-text 文字色加深至 WCAG ≥4.5（同 ink3）。 */ --school:#b8954a; --hk:#b8b0a0; --hk-text:#6e675b; --hairline:rgba(120,95,40,.14); --hairline-2:rgba(120,95,40,.22); --shadow:0 10px 40px rgba(120,95,40,.08); --shadow-lift:0 18px 50px rgba(120,95,40,.14); --radius:8px; --radius-sm:6px; --radius-xs:4px; --font:"Noto Serif TC","Cormorant Garamond",Georgia,serif; } /* collegiate body：極淡金色菱形暗紋（certificate 質感，opacity 低不擾讀）。 */ [data-theme="collegiate"] body{ position:relative; } [data-theme="collegiate"] body::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background-image:url("data:image/svg+xml,"); background-size:76px 76px; } /* 暗紋之上：topbar / main / footer 提升 z-index 免被蓋。 */ [data-theme="collegiate"] .topbar, [data-theme="collegiate"] .wrap, [data-theme="collegiate"] main, [data-theme="collegiate"] .foot{ position:relative; z-index:1; } /* topbar 半透明背景跟主題改成米白（classic 寫死白，serif 下換金米調更和諧）。 */ [data-theme="collegiate"] .topbar{ background:rgba(255,253,248,.85); } /* DSE 方塊 logo：collegiate 配金底白字。 */ [data-theme="collegiate"] .logo{ background:var(--accent); color:var(--accent-on); } *{box-sizing:border-box} [hidden]{display:none!important} html{scroll-behavior:smooth} body{margin:0;font-family:var(--font);background:var(--band);color:var(--ink);line-height:var(--lh-body);font-size:var(--t-body)} .font-num{font-family:var(--font-num)} /* ===== 雙語標籤系統（中上英下 / Bilingual labels）===== 全平台介面文字「中文在上（主）、英文在下（次）」。一個可複用結構，兩種變體： .bi → block 用（標題／說明）：中英各佔一行，英文細一截、灰、字重輕、行距收緊。 .bi-inline → inline 用（按鈕／分頁／pill）：中英仍堆疊但更緊湊，英文 .62em、不撐高元件。結構：中文English 由 app.js 的 biLabel(zh,en[,inline]) helper 統一產生，確保 DOM 一致（亦令 smoke 的 .includes(中文) 斷言維持有效——中文文字節點原樣保留，英文只係相鄰 sibling）。英文一律 --ink3（已驗 WCAG AA：classic 最差 4.86、collegiate 最差 5.14，皆 ≥4.5）。 */ /* ── 雙語呈現變體 spec（哪類元素用哪種；boss 選方案 A 保留全部雙語，唔收斂覆蓋）── 平台共 5 種雙語呈現，按語境分工，唔混用： 1. .bi 堆疊（中上英下），block 語境：標題／說明／modal／長卡標題。英文**換行**。 2. .bi-inline 堆疊但收緊，chrome 短標籤：tab／pill／按鈕／角色掣。英文**nowrap**（短標籤單行）。 3. landing .en 着陸頁專用（landing.css），block 換行——同 .bi 同類，獨立檔。 4. .dual-val .val-who 數值行內聯（中英橫向並列，省直高），如「全港 Day School 73.0%」。 5. inline「· English」個別 sibling 補英文（addEn/.bi-en-line），block 換行。斷點收密度規則見檔尾 768 / 430 兩段。 */ .bi,.bi-inline{display:inline-flex;flex-direction:column;line-height:var(--lh-tight);vertical-align:middle} .bi{gap:1px} .bi>b,.bi-inline>b{font-weight:inherit} .bi>b{line-height:1.25} /* block 變體（.bi 堆疊雙語：標題／說明／modal 文字）：英文一律正常換行（overflow-wrap 斷得到超長拉丁字串），唔 nowrap——否則長英文撐爆容器後被切斷／溢出（F1/F2/F3 根因）。對齊乾淨反例 landing.css .en、privacy .en-doc、.gate-h2 的 block 換行行為。 chrome 短標籤（tab/pill）的單行需求改由 .bi-inline>small 提供（見下），兩者分離。 */ .bi>small{font-size:.7em;font-weight:400;color:var(--ink3);line-height:1.2;letter-spacing:.01em;white-space:normal;overflow-wrap:break-word} /* inline 變體（按鈕／分頁／pill）：更收緊，英文更細，避免撐高 chrome。英文預設用 --ink3（白／淺底 chrome 上 ≥AA）；有色底元件另在下方覆寫。 */ .bi-inline{gap:0;text-align:center} .bi-inline>b{line-height:1.15} .bi-inline>small{font-size:.62em;font-weight:400;color:var(--ink3);letter-spacing:.02em;line-height:1.15;white-space:nowrap} /* pill 類（.user-role）底色為 tint，英文沿用 pill 文字色（accent-text）。 ⚠ 唔降透明度——實測 accent-text@70% on accent-soft 只 3.57small{color:inherit} /* active tab（accent-text 文字 on surface 白底）：英文白字降透明度仍 6.7 PASS（深字色淺底）。 */ .tab.is-active .bi-inline>small{color:inherit;opacity:.85} /* 深底 chrome 按鈕（管理後台＝白字黑底）：英文沿用白字降透明度，唔用 --ink3（深底失對比）。白@78%≈10.6:1 對 --ink，遠超 AA。 */ .user-admin .bi-inline>small{color:inherit;opacity:.78} /* 登入頁主登入掣（solid --ink 深底；GIS 載入失敗時成為唯一主登入掣）：英文副標「Sign in with Google」沿用預設 --ink3 喺深底只 3.18small{color:#fff;opacity:.85} /* 有色底主動作掣（admin 匯入/批准/套用等 .mini-btn.primary、主題套用掣）：英文副標沿用掣文字色（白），唔用 --ink3——藍底上 --ink3 只 1.02，白字 5.17 PASS（qa 2026-07-02 P0#5）。 */ .mini-btn.primary .bi-inline>small,.theme-apply .bi-inline>small{color:inherit} /* 追加英文下行（addEn helper）：用於既有 el(tag,cls,中文) 之後就地補英文，父元素非 .bi 結構，故英文獨立成 block、細字灰色（--ink3 ≥AA）、行距收緊。 white-space 正常（長英文說明可換行，唔逼爆），與 .bi>small 的 nowrap 變體分開。 */ .bi-en-line{display:block;font-size:.78em;font-weight:400;color:var(--ink3); line-height:1.3;letter-spacing:.01em;margin-top:1px} /* 表頭緊湊雙語（thead .bi）：中上英下，英文更細，控制行高避免撐爆表頭。英文預設可換行（長欄名如 Our-School Candidates 不逼爆欄寬）；數字欄（th.num，如 MC A–D／百分比欄）維持窄、英文 nowrap 置中（短英文如 Gap/Max 唔會換行擠亂）。 */ thead .bi{gap:0;align-items:inherit} thead .bi>b{line-height:1.15} thead .bi>small{font-size:.66em;font-weight:400;color:var(--ink3);line-height:1.15; letter-spacing:.01em;white-space:normal;margin-top:0;text-transform:none} thead th.num .bi{align-items:center} thead th.num .bi>small{white-space:nowrap} /* ⚠ 修復欄位錯位（2026-06-29，live 實證）：當 .bi 直接套喺 / 本身（雙語表頭）， .bi 的 display:inline-flex 令儲存格脫離 table-cell 模型 → 表頭欄寬與數據欄寬各自計算、表頭浮喺數據左邊一大截、整個表錯位。強制 th.bi/td.bi 維持 table-cell（欄對齊），中上英下改由內部 b／small 各自 display:block 達成（已 live 驗證對齊 + 雙語層次保留）。 */ th.bi,td.bi{display:table-cell} th.bi>b,td.bi>b,th.bi>small,td.bi>small{display:block} /* 卡標題行：雙語標題（中上英下，左對齊）與其後 pill／標章 inline 並排。標題本身用 .bi-inline span，但喺標題語境要左對齊（覆寫 .bi-inline 的 center）、英文細字唔 nowrap（長英文標題可換行）。pill 垂直置中對齊標題中文行。 */ .title-bi{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-3)} .title-bi>.bi-inline{text-align:left;align-items:flex-start} .title-bi>.bi-inline>small{white-space:normal} /* 置中的雙語 block（登入頁標題／說明、主頁標題等）：用 flex 但置中對齊。 */ .bi.bi-center{display:flex;align-items:center} /* 登入頁 h2 / gate-sub 為置中文字流，需 inline-flex→改 flex 並 center。 */ .gate-h2{display:flex;flex-direction:column;align-items:center;gap:2px} .gate-h2>small{font-size:.6em;font-weight:400;color:var(--ink3);letter-spacing:.04em} .gate-sub-bi{display:flex;flex-direction:column;align-items:center;gap:2px} /* ===== 全域鍵盤焦點態（:focus-visible）===== 個別元件可有自訂 focus（如 .select:focus）；此為 fallback，確保所有可聚焦互動元件（連結／掣／switch／卡／分頁／可排序表頭／說明掣）鍵盤聚焦時都有清晰可見外框。用 :focus-visible 故滑鼠點擊唔會留框，只鍵盤導航先顯示。 */ a:focus-visible, button:focus-visible, [role="switch"]:focus-visible, .subj-card:focus-visible, .tab:focus-visible, th[role]:focus-visible, th.lu-sortable:focus-visible, .help-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } h1,h2,h3{line-height:var(--lh-tight)} /* ===== Topbar ===== */ .topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--hairline)} /* 頂欄密度（F4）：三件（brand／tabs／userbar）一行排。雙語令各件變高變闊，故收緊 gap，並令 brand 唔內部換行（h1 唔好疊落 home 掣）。桌面 ≥769px 唔強制換行（nowrap）—— 超寬內容靠下方收密度規則處理，唔靠整條 topbar wrap 成兩行。 */ /* topbar inner 比正文（1120）略寬，畀雙語多啲橫向空間（雙語 chrome 比單語闊）。兩行格局（2026-06-29 boss）：第一行＝brand（校徽＋標題）｜tabs（中）｜userbar 動作鍵（更新紀錄／管理後台／登出，靠右）；第二行＝brand 副標（DSE-DIP＋學校編號…，靠左，喺標題下）｜identbar 人名＋角色（靠右，喺登出鍵下）。用 CSS grid 三欄兩行：brand 佔第一欄並跨兩行（其 .sub 自然落第二行左）； tabs 喺第一行中欄；userbar 第一行右欄；identbar 第二行右欄。 */ .topbar-inner{max-width:1240px;margin:0 auto;padding:var(--s-3) var(--s-5); display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto; grid-template-areas:"brand tabs actions" "brand . ident"; column-gap:var(--s-3);row-gap:4px} /* brand 跨兩行：內部 flex-column，校徽喺左、右側 div 上=標題（對齊第一行）下=副標（對齊第二行）。 */ .brand{grid-area:brand;display:flex;align-items:flex-start;gap:var(--s-3);flex-wrap:nowrap;min-width:0;align-self:center} .brand>div{min-width:0} .logo{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--accent);color:var(--accent-on);font-weight:800;font-size:.85rem;letter-spacing:.02em} /* 左上角校徽（取代藍色 DSE 方塊；兩主題共用、透明底） */ .brand-logo{width:40px;height:40px;object-fit:contain;display:block;flex-shrink:0} .brand h1{font-size:var(--t-h1);font-weight:700;margin:0;line-height:var(--lh-tight);white-space:nowrap} .brand .sub{margin:2px 0 0;font-size:var(--t-xs);color:var(--ink2);white-space:nowrap} /* 產品名標籤（DSE-DIP）：學校為實例品牌，DSE-DIP 為產品名，並存。已由標題移到副標行（學校編號之左，2026-06-29 boss）。 */ .product-tag{display:inline-block;vertical-align:middle;margin-right:8px;font-size:.78em;font-weight:800; letter-spacing:.04em;padding:2px 8px;border-radius:999px;background:var(--accent-soft); color:var(--accent-text);font-family:var(--font-num,inherit);line-height:1.2;transform:translateY(-1px)} /* tabs 第一行中欄：全部分頁一律可見、可點，無橫向捲、無裁切（2026-06-29 boss）。窄不下時換行（wrap）成多行而非橫向捲；置中。 */ .tabs{grid-area:tabs;display:flex;flex-wrap:wrap;justify-content:center;gap:4px;background:var(--band);padding:4px;border-radius:var(--radius-md,16px);border:1px solid var(--hairline);min-width:0;justify-self:center;align-self:center} .tab{appearance:none;border:0;background:transparent;color:var(--ink2);font:inherit;font-size:var(--t-sm);font-weight:600;padding:8px 15px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s;flex:0 0 auto;white-space:nowrap} .tab:hover{color:var(--ink)} .tab.is-active{background:var(--surface);color:var(--accent-text);box-shadow:0 1px 3px rgba(0,0,0,.08)} /* Home button (top-left, persistent inside app) */ .home-btn{appearance:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--hairline-2);background:var(--surface);color:var(--ink2);font:inherit;font-size:var(--t-sm);font-weight:600;padding:8px 14px;border-radius:var(--radius-xs);cursor:pointer;transition:border-color .15s,color .15s,background .15s;white-space:nowrap;flex:0 0 auto} .home-btn:hover{color:var(--accent-text);border-color:var(--accent);background:var(--accent-soft)} .home-btn svg{display:block} /* Home (landing) grid */ .home-title{font-size:var(--t-h2);font-weight:700;margin:0 0 4px} /* .home-title.bi：作為 block 標題，改 flex column 左對齊（覆寫 .bi 的 inline-flex+vertical-align）。 */ .home-title.bi{display:flex;align-items:flex-start;vertical-align:baseline} .home-title.bi>small{font-size:.5em;margin-top:1px} .home-sub{font-size:var(--t-sm);color:var(--ink2);margin:0 0 var(--s-5)} /* 主頁說明英文：另起一行、細、灰、字重輕。 */ .home-sub-en{display:block;margin-top:2px;font-size:.78em;color:var(--ink3);font-weight:400;line-height:1.4} .home-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(168px,1fr))} .subj-card{position:relative;display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:var(--s-4);cursor:pointer;font:inherit;box-shadow:0 2px 10px rgba(0,0,0,.04);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease} .subj-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--accent)} .subj-card-zh{font-size:1.05rem;font-weight:700;color:var(--ink);line-height:1.3} .subj-card-en{font-size:var(--t-xs);color:var(--ink3);line-height:1.3} /* 年份錨到卡底（margin-top:auto）：多欄斷點 align-items:stretch 令同列卡等高，短名卡本會喺年份下留大片空白（似未完成）；改為把年份／標章推到卡底，留白移到標題與年份之間、變得有意圖，各卡結構一致。單欄斷點卡自撐高度、無 stretch，此規則無副作用。 */ .subj-card-meta{font-family:var(--font-num);font-size:var(--t-xs);color:var(--ink2);margin-top:auto;padding-top:6px} .subj-card.inactive{opacity:.86;background:var(--surface-2)} .subj-card-tag{font-size:var(--t-xs);font-weight:700;padding:2px 8px;border-radius:999px;margin-top:6px} .subj-card-tag.ended{background:var(--band);color:var(--ink2)} .subj-card-tag.renamed{background:var(--warn-soft);color:var(--warn-text)} .subj-card-tag.attain{background:var(--accent-soft);color:var(--accent-text)} /* 已停辦／改名科：獨立摺疊區，視覺灰調，預設收埋 */ .home-ended{margin-top:var(--s-5)} .ended-block{border:1px solid var(--hairline);border-radius:var(--radius-sm);background:var(--surface-2)} .ended-summary{display:flex;align-items:center;gap:8px;padding:var(--s-3) var(--s-4);cursor:pointer;list-style:none;user-select:none;color:var(--ink2);font-weight:600;font-size:var(--t-sm)} .ended-summary::-webkit-details-marker{display:none} .ended-summary:hover{color:var(--ink)} .ended-caret{font-size:var(--t-xs);color:var(--ink3);width:1em;display:inline-block} .ended-title{flex:0 0 auto} .ended-count{font-family:var(--font-num);font-size:var(--t-xs);color:var(--ink3);background:var(--band);padding:1px 8px;border-radius:999px} .ended-grid{padding:0 var(--s-4) var(--s-4)} .ended-grid .subj-card{filter:grayscale(.35)} .ended-grid .subj-card:hover{filter:none} /* ===== Layout ===== */ .wrap{max-width:1120px;margin:0 auto;padding:var(--s-5)} .view{animation:fade .25s ease} @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* ===== Boot / error ===== */ .boot{text-align:center;padding:80px 24px;color:var(--ink2)} .boot-hint{font-size:var(--t-sm);max-width:48ch;margin:8px auto 0;color:var(--ink3)} .boot code{font-family:var(--font-num);background:var(--surface);padding:1px 6px;border-radius:5px;font-size:.85em} .boot.error{color:var(--bad-text)} .spinner{width:34px;height:34px;border:3px solid var(--hairline-2);border-top-color:var(--accent);border-radius:50%;margin:0 auto 16px;animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* ===== Controls ===== */ .controls{margin-bottom:var(--s-5)} .controls-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} .field{display:flex;flex-direction:column;gap:6px} .field-lbl{font-size:var(--t-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)} .select{appearance:none;font:inherit;font-size:var(--t-sm);color:var(--ink);background:var(--surface);border:1px solid var(--hairline-2);border-radius:var(--radius-xs);padding:10px 14px;cursor:pointer;transition:border-color .15s,box-shadow .15s} select.select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236E6E73' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:30px} .select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .select:disabled{opacity:.5;cursor:not-allowed} /* ===== Card ===== */ .card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:var(--s-5);box-shadow:var(--shadow);margin-bottom:var(--s-4)} .card h2{font-size:var(--t-h3);font-weight:700;margin:0 0 var(--s-4);display:flex;align-items:center;gap:10px;flex-wrap:wrap} .pill{display:inline-block;font-size:var(--t-xs);font-weight:700;padding:3px 11px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text)} .pill.gray{background:var(--band);color:var(--ink2)} .pill.esr{background:rgba(217,119,6,.12);color:var(--warn-text)} .pill.ssr{background:var(--accent-soft);color:var(--accent-text)} /* ===== Overview ===== */ .subj-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4)} .subj-title{font-size:var(--t-h2);font-weight:700;margin:0} .subj-status{font-size:var(--t-sm);color:var(--ink2);margin:4px 0 0} .dist-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-3)} .dist-head h2{margin:0} .dist-year{padding-top:7px;padding-bottom:7px} /* B6：年份選單作 stat-row 末件並排，靠右、不撐滿（其餘 stat block flex:1 佔位）。內部 select-then-label 同 stat block 嘅 num-then-lbl 一致；垂直靠底對齊基線。 */ .stat.stat-year{flex:0 0 auto;display:flex;flex-direction:column;justify-content:flex-end;min-width:130px} .stat.stat-year .dist-year{width:100%} .dist-sub{display:flex;gap:8px;align-items:center;margin-bottom:var(--s-3)} /* 總覽：趨勢圖（上）+ 等級分佈（下）上下堆疊，各佔整行 full-width 橫向長方形。 */ .ov-grid{display:grid;gap:var(--s-4);grid-template-columns:1fr;align-items:start} .stat-row{display:flex;gap:var(--s-5);flex-wrap:wrap;margin-bottom:var(--s-3)} .stat{flex:1;min-width:90px} .stat .num{font-family:var(--font-num);font-size:1.5rem;font-weight:700;color:var(--ink)} .stat .lbl{font-size:var(--t-xs);color:var(--ink2);margin-top:2px} /* cumulative level bars */ .lvl{margin-top:var(--s-3)} .lvl-row{display:grid;grid-template-columns:84px 1fr 108px;align-items:center;gap:10px;padding:5px 0} .lvl-row .lvl-name{font-size:var(--t-sm);color:var(--ink2);font-weight:600} .lvl-track{height:14px;border-radius:7px;background:var(--band);overflow:hidden} .lvl-fill{height:100%;border-radius:7px;background:var(--accent);transition:width .4s ease} .lvl-row .lvl-val{font-family:var(--font-num);font-size:var(--t-sm);text-align:right;color:var(--ink);white-space:nowrap} .lvl-cap{font-size:var(--t-xs);color:var(--ink3);margin-top:10px} /* chart */ .chart-wrap{position:relative} .chart-svg{width:100%;height:auto;display:block;overflow:visible} /* A1 總覽趨勢圖 full-width 後封頂高度——再收扁（360→250），配合 viewBox 由 520×300 改 640×210，令圖更扁（橫向長方形，闊 >> 高）。viewBox 預設 xMidYMid meet → 超過 max-height 時等比縮並水平置中。 */ .ov-grid .chart-svg{max-height:250px;margin-inline:auto} /* A5 圖例兩組同一行：本校/全港對齊左、系列對齊右。窄屏 wrap 落兩行仍各自成組。 */ .legend-row{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:var(--s-3)} .legend-row .legend{margin-top:var(--s-3)} .legend{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-3);font-size:var(--t-xs);color:var(--ink2)} .legend .lk{appearance:none;border:1px solid var(--hairline);background:var(--surface);display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:var(--t-xs);color:var(--ink);padding:5px 11px;border-radius:999px;cursor:pointer;transition:color .14s,opacity .14s,border-color .14s} .legend .lk:hover{border-color:var(--hairline-2)} .legend .lk.off{color:var(--ink3);opacity:.75} .legend .lk.off .sw{opacity:.3} .legend .sw{width:14px;height:3px;border-radius:2px;display:inline-block} .legend .dot{width:9px;height:9px;border-radius:50%;display:inline-block} .chart-note{font-size:var(--t-xs);color:var(--ink3);margin-top:var(--s-3);line-height:1.5} .empty{padding:40px 20px;text-align:center;color:var(--ink3);font-size:var(--t-sm)} /* ===== Lookup (按卷分組，同版顯示全答案) ===== */ .lu-body{margin-top:var(--s-2)} .lu-intro{font-size:var(--t-sm);color:var(--ink2);margin:0 0 var(--s-4)} /* 弱項排序摘要卡（weakness_ranking_v1）：中性框架，左側強調條，唔用紅色警示。 */ .weak-summary{border-left:4px solid var(--accent);background:var(--accent-soft)} .weak-summary-head{margin:0 0 var(--s-2)} .weak-summary-title{font-size:var(--t-sm);font-weight:700;color:var(--accent-text)} /* 弱項卡底＝半透明 accent-soft（疊喺 band 上），實測 ink2 僅 4.06b,.entrance-card .entrance-sub>small, .entrance-card .entrance-trend-title>b,.entrance-card .entrance-trend-title>small, .entrance-card .entrance-metric-label>b,.entrance-card .entrance-metric-label>small, .entrance-card .entrance-metric-sub>b,.entrance-card .entrance-metric-sub>small, .entrance-card .entrance-note>b,.entrance-card .entrance-note>small{display:block} /* 卡頭：標題＋僅管理層 badge（左，可換行）＋年份選單（右上）。baseline 對齊三件。 */ .entrance-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3) var(--s-4);flex-wrap:wrap} .entrance-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px var(--s-3); font-size:var(--t-h3);font-weight:700;color:var(--ink);margin:0;min-width:0} /* 標題雙語 span（中上英下，左對齊）＋ badge inline 並排，垂直 baseline 齊。 */ .entrance-title>.bi-inline{text-align:left;align-items:flex-start} .entrance-title>.bi-inline>small{white-space:normal} /* badge：zh 與 en 之間留間距（原 inline-block 令 b／small 貼死），en 細字稍降。 */ .entrance-title .mgmt-only-badge, .entrance-title .pill{display:inline-flex;align-items:baseline;gap:5px;flex:0 0 auto} .entrance-title .mgmt-only-badge>small, .entrance-title .pill>small{font-size:.82em;font-weight:600;opacity:.85} .entrance-year-field{flex:0 0 auto;align-items:flex-start;margin-left:auto} .entrance-year-field .select{min-width:120px} .entrance-sub{font-size:var(--t-sm);color:var(--ink2);margin:0 0 var(--s-4);line-height:1.45} .entrance-sub>small{color:var(--ink3);font-size:.86em;margin-top:1px} .entrance-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:stretch} .entrance-trend-title{font-size:var(--t-body);font-weight:700;color:var(--ink);margin:var(--s-4) 0 var(--s-2);padding-top:var(--s-3);border-top:1px solid var(--hairline)} .entrance-trend-title>small{font-size:.78em;font-weight:400;color:var(--ink3);margin-top:1px} .entrance-metric{display:flex;flex-direction:column;background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:var(--s-4)} .entrance-metric-label{font-weight:700;color:var(--ink);font-size:var(--t-body);line-height:1.3} .entrance-metric-label>small{font-size:.76em;font-weight:400;color:var(--ink3);margin-top:1px} /* §ref 副標：自成一行喺 metric 標題之下（唔再 flow 到標題右邊），與標題左對齊。 */ .entrance-metric-sub{font-size:var(--t-xs);color:var(--ink3);margin-top:2px;margin-bottom:var(--s-3);line-height:1.35} .entrance-metric-sub>small{font-size:.92em;color:var(--ink3);margin-top:0} /* 三個數字（本校／全港日校／差距）恆一行：flex-wrap 喺窄 metric box（1280 雙欄下 box≈504px）會把第三個「差距」擠落第二行、令桌面反比平板侷促。改 3 欄 grid（auto 寬）令三 fig 一律同行、跨斷點排法一致；空間極窄時整組先讓路。 */ .entrance-figs{display:grid;grid-template-columns:repeat(3,auto);gap:var(--s-3) var(--s-5);align-items:end;justify-content:start;margin-top:auto} /* 手機（≤600）：三個數字內容（尤其「全港日校 73.0%（30566）」）合共闊過單欄卡寬，grid 3 欄唔會換行 → 溢出頁面。改回 flex-wrap 令窄屏自然換行（無橫向溢出）；桌面／平板仍 grid 3 欄同行。 */ @media(max-width:600px){ .entrance-figs{display:flex;flex-wrap:wrap;grid-template-columns:none;align-items:flex-end;gap:var(--s-3) var(--s-5)} } .entrance-fig{display:flex;flex-direction:column;gap:2px} .entrance-fig-num{font-family:var(--font-num);font-size:1.5rem;font-weight:700;color:var(--ink);line-height:1.1} .entrance-fig.hk .entrance-fig-num{color:var(--ink2)} .entrance-fig.gap .entrance-fig-num{font-size:1.125rem;color:var(--accent-text)} .entrance-fig-lbl{font-size:var(--t-xs);color:var(--ink3)} .entrance-note{font-size:var(--t-xs);color:var(--ink3);line-height:1.55;margin:var(--s-4) 0 0;padding-top:var(--s-3);border-top:1px solid var(--hairline)} .entrance-note>small{font-size:.92em;color:var(--ink3);margin-top:1px} /* ===== Locked subject title (lookup / gap) ===== */ .subj-locked{margin:0 0 var(--s-4)} /* ===== Switch toggle (顯示本校數據) ===== */ .field-toggle{justify-content:flex-start} .switch{appearance:none;border:0;cursor:pointer;width:46px;height:26px;border-radius:999px;background:var(--hairline-2);position:relative;padding:0;transition:background .18s ease;flex:0 0 auto} .switch.on{background:var(--accent)} .switch-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s ease} .switch.on .switch-knob{transform:translateX(20px)} /* ===== Dual distribution bars (本校 vs 全港日校) ===== */ /* 右欄加寬以容納 #3 累積人數「X%（n）」。 */ .lvl-row.dual{grid-template-columns:84px 1fr 176px;align-items:center} .dual-track{display:flex;flex-direction:column;gap:0} .dual-track .lvl-track{height:9px;border-radius:0} .dual-track .hk-track{border-radius:5px 5px 0 0} .dual-track .sch-track{border-radius:0 0 5px 5px} .dual-track .hk-fill{background:var(--hk);border-radius:0} .dual-track .sch-fill{background:var(--school);border-radius:0} .dual-val{font-family:var(--font-num);font-size:var(--t-xs);text-align:right;line-height:1.35;white-space:nowrap} .dual-val .val-hk{color:var(--hk-text)} .dual-val .val-sch{color:var(--ink);font-weight:600} /* 數值行的標籤（全港/本校）雙語：中／英橫向並列（唔垂直堆疊，省直高），英文細字灰、跟在中文後（如「全港 Day School 73.0%」），值數字緊接。 */ .dual-val .val-line{display:flex;align-items:baseline;justify-content:flex-end;gap:2px} .dual-val .val-who{flex-direction:row;gap:3px;vertical-align:baseline} .dual-val .val-who>small{font-size:.82em;color:var(--ink3);white-space:nowrap} .dual-val .val-line .val-num{white-space:nowrap} /* #8 非任教科目（教師）：只顯全港單條，本校條/值/label 不渲染。單條全圓角。 */ .lvl-row.hkonly{grid-template-columns:84px 1fr 176px;align-items:center} .lvl-row.hkonly .dual-track .hk-track{border-radius:5px} .lvl-row.hkonly .dual-val .val-hk{font-weight:600;color:var(--ink)} /* 窄屏（≤560）：84px+176px 固定欄令對比條剩 ~14px 不可讀（qa 2026-07-02 P0#1）。改兩行式：首行＝等級標籤（左）＋數值（右），次行＝對比條全寬。 */ @media (max-width:560px){ .lvl-row.dual,.lvl-row.hkonly{ grid-template-columns:auto 1fr; grid-template-areas:"label val" "bar bar"; row-gap:4px} .lvl-row.dual>.lvl-name,.lvl-row.hkonly>.lvl-name{grid-area:label} .lvl-row.dual>.dual-track,.lvl-row.hkonly>.dual-track{grid-area:bar} .lvl-row.dual>.dual-val,.lvl-row.hkonly>.dual-val{grid-area:val} } .dist-legend{display:flex;gap:var(--s-4);margin-top:var(--s-3);font-size:var(--t-xs);color:var(--ink2)} .dl-item{display:inline-flex;align-items:center;gap:6px} .dl-sw{width:14px;height:10px;border-radius:3px;display:inline-block} .dl-sw.hk{background:var(--hk)} .dl-sw.sch{background:var(--school)} /* dashed legend swatch for the 全港 dataset toggle */ .legend .sw.sw-dash{height:0;border-top:3px dashed currentColor;background:transparent!important;border-radius:0} .legend-ds{margin-bottom:2px} /* ===== MC option table (ABCD 全港%, 藍正解 / 紅最高錯) ===== */ .mc-table th.num,.mc-table td.num{text-align:center} .mc-table td.opt-answer .hk-pct{color:var(--accent-text);font-weight:800} .mc-table td.opt-wrong .hk-pct{color:var(--bad-text);font-weight:800} /* 色盲友善：最高誘答除紅色另加非顏色形狀標記（▲），正解已有 ✓ tick—— 兩態皆有形狀，紅綠色盲亦分辨得到。 */ .mc-table td.opt-wrong .wrong-mark{color:var(--bad-text);font-size:.72em;margin-left:4px;vertical-align:1px} .ans-table td .hk-pct{font-family:var(--font-num)} .ans-table td .sch-paren{font-family:var(--font-num);color:var(--ink3);margin-left:2px} .ans-table td.diff-col{font-family:var(--font-num);text-align:center;color:var(--ink2);min-width:84px} .diff-col .diff-num{display:block} /* 查閱差距條：中性、零線居中、正右負左（重用全校一覽 gap-bar 視覺） */ .lu-diff-bar{position:relative;height:6px;margin:4px auto 0;width:72px} .lu-diff-bar .zero{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--hairline-2)} .lu-diff-bar .fill{position:absolute;top:1px;bottom:1px;border-radius:2px;background:var(--ink3);opacity:.55} /* ===== Footer ===== */ .foot{max-width:1120px;margin:0 auto;padding:var(--s-5);font-size:var(--t-xs);color:var(--ink3)} /* opacity:.85 令 ink3 與 band 底 alpha 合成後跌至 3.62 onerror 顯 placeholder） */ .theme-thumb{display:block;width:100%;aspect-ratio:4/3;object-fit:cover; border:1px solid var(--hairline);border-radius:var(--radius-xs);background:var(--band)} .theme-thumb.is-missing{display:flex;align-items:center;justify-content:center; color:var(--ink3);font-size:var(--t-xs);text-align:center;min-height:140px} .theme-apply{padding:9px 14px;border-radius:var(--radius-xs);border:1px solid var(--accent); background:var(--accent);color:#fff;cursor:pointer;font:inherit;font-size:var(--t-sm);font-weight:600} .theme-apply:hover{opacity:.9} .theme-apply:disabled{opacity:.5;cursor:default} /* ===== toast（後台動作回饋；右下角浮現後自動消失）===== */ .toast{position:fixed;right:var(--s-5);bottom:var(--s-5);z-index:50; background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--radius-xs); font-size:var(--t-sm);box-shadow:var(--shadow-lift);max-width:340px; opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s} .toast.show{opacity:1;transform:none} .toast.bad{background:var(--bad-fill)} .admin-table-wrap{overflow-x:auto} .admin-table{width:100%;border-collapse:collapse;font-size:var(--t-sm)} .admin-table th,.admin-table td{padding:10px 12px;border-bottom:1px solid var(--hairline);text-align:left;vertical-align:middle} .admin-table th{font-size:var(--t-xs);color:var(--ink3);font-weight:700;text-transform:none} .admin-table tr.row-pending{background:var(--warn-soft)} .admin-table tr.row-staged{opacity:.82} .subj-chips{color:var(--ink2);font-size:var(--t-xs);margin-right:8px} .admin-table th.col-check,.admin-table td.col-check{width:32px;text-align:center;padding-left:8px;padding-right:8px} .admin-table .col-check input{cursor:pointer} .role-tag{display:inline-block;font-size:var(--t-xs);color:var(--ink2);padding:2px 8px;border-radius:var(--radius-xs);background:var(--band)} /* ===== 批量操作條（選 ≥1 行先顯示）===== */ .bulk-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:var(--s-3); padding:10px 14px;border:1px solid var(--accent);border-radius:var(--radius-sm); background:var(--accent-soft,var(--band))} .bulk-info{font-size:var(--t-sm);color:var(--ink1)} .bulk-info .bulk-count{color:var(--accent);font-size:var(--t-md)} .bulk-field{display:flex;align-items:center;gap:6px;font-size:var(--t-xs);color:var(--ink2)} .bulk-field .bulk-lbl{white-space:nowrap} .bulk-field .bulk-subj{min-width:160px;height:auto;min-height:64px} .mini-btn{padding:5px 12px;border-radius:var(--radius-xs);border:1px solid var(--hairline-2); background:var(--surface);color:var(--ink2);cursor:pointer;font:inherit;font-size:var(--t-xs);margin-left:4px} .mini-btn:hover{background:var(--band)} .mini-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)} .mini-btn.primary:hover{opacity:.9} /* collegiate 金 --accent #b8954a 白字只 2.82small,.cl-preface small{color:#5F5F66} /* accent-soft 底上 --ink3 邊界（~4.4），加深至 ≥5.2 穩過 AA */ .cl-preface{font-size:var(--t-sm);color:var(--ink);background:var(--accent-soft);border-radius:var(--radius-sm); padding:var(--s-3) var(--s-4);margin:0 0 var(--s-4);line-height:var(--lh-body)} .cl-intros{display:grid;gap:var(--s-3)} .cl-intro{display:flex;gap:var(--s-3);align-items:flex-start} .cl-intro-tag{flex:0 0 auto;font-size:var(--t-xs);font-weight:700;padding:3px 11px;border-radius:999px;margin-top:2px} .cl-intro-tag.tier1{background:var(--accent-soft);color:var(--accent-text)} .cl-intro-tag.tier2{background:var(--band);color:var(--ink2)} .cl-intro-txt{margin:0;font-size:var(--t-sm);color:var(--ink2);line-height:var(--lh-body)} /* 重大版本分段段頭（B 改造）：把同一重大版本下的 release 卡歸入一段。 */ .cl-major-head{margin:var(--s-5) 0 var(--s-4);padding-bottom:var(--s-3); border-bottom:2px solid var(--accent-text)} .cl-major-head:first-of-type{margin-top:0} .cl-major-title{font-size:var(--t-h2);font-weight:800;color:var(--accent-text);margin:0;letter-spacing:.01em} .cl-major-blurb{font-size:var(--t-sm);color:var(--ink2);margin:6px 0 0;line-height:var(--lh-body)} .cl-release{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius); box-shadow:var(--shadow);padding:var(--s-5);margin-bottom:var(--s-4)} .cl-rel-head{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-4); padding-bottom:var(--s-3);border-bottom:1px solid var(--hairline)} .cl-ver{font-size:1.25rem;font-weight:800;color:var(--accent-text)} .cl-date{font-size:var(--t-xs);color:var(--ink3)} .cl-summary{font-size:var(--t-sm);font-weight:700;color:var(--ink)} .cl-draft{border-style:dashed;border-color:var(--warn-fill);background:var(--warn-soft)} .cl-draft-tag{font-size:var(--t-xs);font-weight:700;padding:2px 10px;border-radius:999px; background:var(--warn-text);color:#fff;margin-left:auto} /* warn-text 深琥珀：白字 6.1 ≥AA（warn-fill 只 3.19） */ .cl-list{list-style:none;margin:0;padding:0} .cl-list-1{display:grid;gap:var(--s-3)} .cl-item{display:flex;flex-direction:column;gap:3px} .cl-item-title{font-size:var(--t-body);font-weight:700;color:var(--ink)} .cl-item-desc{font-size:var(--t-sm);color:var(--ink2);line-height:var(--lh-body)} /* 第二層：視覺區隔（淺底 + 標籤） */ .cl-tier2{margin-top:var(--s-4);background:var(--surface-2);border:1px dashed var(--hairline-2); border-radius:var(--radius-sm);padding:var(--s-4)} .cl-tier2-head{margin-bottom:var(--s-3)} .cl-tier2-tag{display:inline-block;font-size:var(--t-xs);font-weight:700;padding:3px 11px;border-radius:999px; background:var(--band);color:var(--ink2);letter-spacing:.02em} .cl-list-2{display:grid;gap:8px} .cl-item-2{position:relative;padding-left:18px;font-size:var(--t-sm);color:var(--ink2);line-height:var(--lh-body)} .cl-item-2::before{content:"›";position:absolute;left:4px;color:var(--ink3);font-weight:700} /* ============================================================ 平台級響應式（窄屏）——範本參照 landing.css 的 920/640 兩斷點。只「加」窄屏規則，唔覆寫桌面：寬屏行為完全不變。 768px：平板直向 / 大手機；頂欄收窄、分頁可橫向捲、各 grid 收單欄、數據表 min-width 保可讀（配 .table-scroll 左右滑）。 ============================================================ */ @media(max-width:768px){ /* 頂欄窄屏改單欄堆疊：brand｜動作鍵（靠右）｜分頁（換行可見、無橫向捲）｜人名+角色（靠右）。 grid 收成一欄、四個區域各佔一行；padding 收窄。 */ .topbar-inner{padding:var(--s-3) var(--s-4); grid-template-columns:1fr; grid-template-areas:"brand" "actions" "tabs" "ident"; row-gap:var(--s-2)} .brand{align-self:auto} .brand h1{font-size:var(--t-h2)} /* 分頁：全部可見、換行排列、無橫向捲、無裁切。英文下行收起省高省闊（aria-label 保留全中英）。 */ .tabs{flex-wrap:wrap;justify-content:flex-start;justify-self:stretch;max-width:100%} .tab{flex:0 0 auto;white-space:nowrap;padding:8px 14px} .tab .bi-inline>small{display:none} /* 動作鍵：英文下行收起、gap 再收，靠右單行。 */ .userbar{gap:6px;flex-wrap:wrap;justify-content:flex-end;justify-self:end} .userbar .bi-inline>small{display:none} /* 人名+角色：靠右，喺動作鍵之下。 */ .identbar{gap:6px;justify-content:flex-end;justify-self:end} .user-email{max-width:160px} /* 各佈局 grid 收單欄（窄屏多欄會逼到不可讀）。 */ .controls-grid{grid-template-columns:1fr} .ov-grid{grid-template-columns:1fr} .entrance-grid{grid-template-columns:1fr} /* 數據表：窄屏給 min-width 保各欄可讀，配 .table-scroll 左右滑（此斷點先開橫向捲）。橫捲提示（防「靜默裁欄」）：① 細 scrollbar 樣式（Chrome/FF/Android 常顯）②右緣漸變陰影（Lea Verou scrolling-shadows：cover 用 local 隨內容、shadow 用 scroll 釘住容器右緣；捲到尾 shadow 自動隱去）——iOS Safari 亦顯。純 background + scrollbar 偽類，唔改 overflow/position/ containing-block，故對 sticky 零影響（且此斷點 thead 已 static）。 */ .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin; background: linear-gradient(to left, var(--surface), rgba(255,255,255,0)) right center / 34px 100% no-repeat local, radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.18), rgba(0,0,0,0)) right center / 16px 100% no-repeat scroll} .table-scroll::-webkit-scrollbar{height:7px} .table-scroll::-webkit-scrollbar-thumb{background:var(--hairline-2);border-radius:4px} .table-scroll::-webkit-scrollbar-track{background:transparent} .table-scroll .ans-table, .table-scroll .gap-table{min-width:560px} .table-scroll .mc-table{min-width:600px} /* ⚠ sticky 取捨（2026-06-29）：窄屏要橫向捲 → .table-scroll 必為 overflow 容器，會擒住 vertical sticky 令表頭浮喺表中間並蓋住資料行（同寬屏前 bug 同源）。窄屏空間有限、表頭 resticky 價值低，故窄屏直接取消表頭 sticky：表頭隨頁正常捲走，零浮疊、零重疊。（寬屏 overflow:visible，sticky 對 viewport 正常 pin 喺頂欄下，已驗證。） .ans-table（查閱 MC／長題表）同一取捨：窄屏 overflow-x:auto → 表頭改 static。 */ .gap-table thead th,.ans-table thead th{position:static;top:auto} /* 手機觸控舒適度（皆已過 WCAG 2.5.8 24px，此為 44px 舒適目標優化，字級不變）：角色預覽掣、頂欄動作掣、趨勢圖圖例切換鈕、編輯模式學習點下拉、inline 核實掣。 */ .rpb-btn{min-height:44px} .user-changelog,.user-admin,.user-logout{min-height:44px;display:inline-flex;align-items:center} .legend .lk{min-height:40px;padding-top:8px;padding-bottom:8px} .ans-table td.topic-col .review-pick{min-height:34px} .verify-btn{width:2em;height:2em} /* 查閱控制列密度（6 欄單欄堆疊過高）：平板兩欄，令控制列縮短、數據提前露出。 */ #view-lookup .controls-grid{grid-template-columns:1fr 1fr} } /* 手機（≤480）：select 欄全寬保可讀（避免收窄裁走選項文字），兩個 toggle 並排省一行。 */ @media(max-width:480px){ #view-lookup .controls-grid label.field:not(.field-toggle){grid-column:1 / -1} } /* 全校一覽只兩個 field：auto-fit 令各撐到等寬（1280≈530／768≈720px），過闊。桌面／平板封頂 240px 並靠左，令下拉框寬度貼近內容需要（手機 ≤600 維持既有單欄全寬）。 */ @media(min-width:601px){ #view-school .controls-grid{grid-template-columns:repeat(auto-fit,minmax(180px,240px));justify-content:start} } /* ≤430px（小手機，雙語 chrome 收最密）：brand 副標收起、產品標籤縮、校名標題截斷免疊 home 掣， userbar email 收起（role/admin/登出仍在），分頁更貼。英文已在 768 段收起，此處只控密度。 */ @media(max-width:430px){ .topbar-inner{padding:var(--s-2) var(--s-3)} .brand{gap:var(--s-2)} .brand-logo,.logo{width:32px;height:32px} /* F6：校名標題縮字級 + 單行截斷，唔疊住 home 掣／產品標籤。 */ .brand h1{font-size:var(--t-h3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .brand .sub{font-size:10px} .product-tag{margin-right:6px;padding:1px 6px;font-size:.72em} .home-btn{padding:6px 10px} .home-btn span{display:none} /* 只留 home icon，省位 */ /* 人名+角色（ident）：保留可見（boss 指定），收窄字距。 */ .user-email{max-width:120px} .userbar,.identbar{gap:5px} .user-role,.user-admin,.user-logout,.user-changelog{padding:4px 9px} .tab{padding:7px 12px} /* 登入頁標題喺 276px 卡內文寬逼出孤字（『台』／『DIP)』落單行）：略收字級 + text-wrap:balance 令中／英各自兩行分佈平均、避免單字孤行。 */ .gate-card h2.gate-h2>b{font-size:1.25rem;text-wrap:balance} .gate-h2>small{text-wrap:balance} } @media(max-width:560px){ .cl-intro{flex-direction:column;gap:6px} .cl-rel-head{gap:8px} } /* ============================================================ B3：導出（CSV + 列印/PDF） ============================================================ */ /* 導出列：放喺各視圖數據卡頂，掣靠右。 */ .export-bar{display:flex;justify-content:flex-end;gap:8px;margin:0 0 var(--s-3)} .export-btn{margin-left:0} /* 列印頁眉／頁腳：螢幕上隱藏，只喺列印時顯示。 */ .print-head,.print-foot{display:none} /* ============================================================ @media print — 隱藏 nav/控制/掣，淨印標題+數據表+頁眉頁腳。瀏覽器「列印 → 儲存為 PDF」即得會議用 PDF（不引入 PDF library）。 ============================================================ */ @media print{ /* 版面：去底色、去陰影、收窄留白，慳紙。 */ body{background:#fff;color:#000;font-size:11pt} .wrap{max-width:none;margin:0;padding:0} /* 隱藏所有非數據 UI：頂欄/分頁/使用者列/主目錄掣/頁尾/控制列/導出掣/載入。 */ .topbar,.tabs,.userbar,.home-btn,.foot,.appFoot,#appFoot, .controls,.export-bar,.boot,.spinner, .school-banner,.changelog-link,.cl-overlay, .gate,.dist-year,.legend,.legend-ds,.dist-legend,.gap-bar-cell,.sw-table .gap-bar-cell, .role-preview-bar,.role-preview-banner{ display:none!important; } /* 圖表互動圖例已隱藏；趨勢 SVG 仍可印（向量）。 */ /* 列印頁眉／頁腳：顯示。 */ .print-head{display:block;margin:0 0 12pt;padding:0 0 8pt;border-bottom:2px solid #000} .print-head-title{font-size:15pt;font-weight:700} .print-head-sub{font-size:11pt;color:#333;margin-top:2pt} .print-foot{display:block;margin-top:12pt;padding-top:8pt;border-top:1px solid #999; font-size:9pt;color:#444} /* 卡片：去框去陰影，避免印出灰盒。 */ .card{background:#fff;border:none;border-radius:0;box-shadow:none;padding:0;margin:0 0 10pt;page-break-inside:auto} .view{animation:none} /* 數據表：清晰邊框，避免跨頁切行。 */ table{width:100%;border-collapse:collapse;font-size:10pt} th,td{border:1px solid #bbb;padding:4pt 6pt} thead{display:table-header-group} /* 每頁重印表頭 */ tr{page-break-inside:avoid} /* 介紹文字保留（細字）。 */ .gap-count,.lu-intro,.gap-note,.mc-subnote,.lvl-cap,.chart-note{font-size:9pt;color:#333} .subj-title,.subj-status{color:#000} /* MC 正解/誘答色標：列印用底紋（瀏覽器預設唔印背景色，故加邊框輔助）。 */ .opt-answer{font-weight:700;outline:1.5pt solid #000} .ans-tick{display:none} .sch-paren{color:#444} @page{margin:14mm} } /* ============================================================ round-6 新增樣式 ============================================================ */ /* #7a 「僅管理層看見」標章（全校一覽 / 升學達標卡 / 入口 banner）。 */ .mgmt-only-badge{display:inline-block;vertical-align:middle;font-size:var(--t-xs);font-weight:700; padding:2px 9px;border-radius:999px;background:var(--warn-soft);color:var(--warn-text); letter-spacing:.01em;white-space:nowrap} /* 白字疊淺白半透明底再合成到藍 banner 只 3.49small{color:inherit;opacity:.78} /* 非 active 態英文：白底上用 --ink3（已驗 AA）。banner 英文沿用 warn-text 系。 */ .rpb-btn:not(.active) .bi-inline>small{color:var(--ink3)} /* 預覽橫額英文：solid warn-text（唔降透明度——warn-text@78% on warn-soft 只 3.05.rpb-banner-en{color:inherit;font-weight:400;font-size:.8em;margin-top:1px} .role-preview-banner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3); flex-wrap:wrap;margin:0 0 var(--s-4);padding:10px 14px;border-radius:var(--radius-sm); background:var(--warn-soft);color:var(--warn-text);font-size:var(--t-sm);font-weight:600; border:1px solid rgba(217,119,6,.30)} .rpb-restore{padding:5px 14px;border-radius:var(--radius-xs);border:1px solid var(--warn-text); background:transparent;color:var(--warn-text);font:inherit;font-size:var(--t-xs);font-weight:700;cursor:pointer} .rpb-restore:hover{background:var(--warn-text);color:#fff} /* ===== 試用者（trial）：樣本數據標籤 / 唯讀橫幅 / 視覺禁用態 ===== */ /* 等級分佈／趨勢圖嘅「樣本數據（示範用）」標籤——醒目暖色，提示非真實成績。 */ .sample-pill{display:inline-block;vertical-align:middle;margin-left:8px; font-size:var(--t-xs);font-weight:700;padding:2px 10px;border-radius:999px; background:var(--warn-soft);color:var(--warn-text);letter-spacing:.01em;white-space:nowrap; border:1px solid rgba(217,119,6,.30)} /* #8 非任教科目（教師）總覽說明條：本校已隱藏、只顯全港。 */ .ov-hkonly-note{margin:0 0 var(--s-3);padding:9px 14px;border-radius:var(--radius-sm); background:var(--surface-2,#f4f5f7);color:var(--ink2);font-size:var(--t-sm);font-weight:600; border:1px solid rgba(0,0,0,.08)} /* 後台試用者唯讀橫幅。 */ .trial-banner{margin:0 0 var(--s-4);padding:10px 14px;border-radius:var(--radius-sm); background:var(--warn-soft);color:var(--warn-text);font-size:var(--t-sm);font-weight:600; border:1px solid rgba(217,119,6,.30)} /* 視覺禁用態（行為禁用由 JS 攔截 + 顯訊息；此處只示意不可用，仍可撳以彈訊息）。 */ .is-disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.3)} .is-disabled:hover{opacity:.45} /* ===== 使用說明（in-app help）===== */ /* 主程式：每視圖右上角浮一個低調「？使用說明」掣（.view 設 position:relative 作錨）。 */ .view{position:relative} .help-btn{appearance:none;border:1px solid var(--hairline-2);background:var(--surface); color:var(--ink2);font:inherit;font-size:var(--t-xs);font-weight:600; padding:5px 12px;border-radius:999px;cursor:pointer; transition:border-color .15s,color .15s,background .15s} .help-btn:hover{color:var(--accent-text);border-color:var(--accent)} /* 視圖內浮右上角；列印時隱藏（手冊另有完整說明）。 */ .view > .help-btn{position:absolute;top:0;right:0;z-index:5} /* 後台：跟在區段標題列尾（inline，不浮動）。 */ .help-btn-inline{position:static} @media print{ .help-btn{display:none} } /* 使用說明 modal（沿用 subj-dialog 風格）。 */ .help-dialog{border:none;border-radius:var(--radius);box-shadow:var(--shadow-lift); padding:0;max-width:560px;width:92%;color:var(--ink);background:var(--surface)} .help-dialog::backdrop{background:rgba(0,0,0,.40)} .help-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3); padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--hairline)} .help-dialog-title{margin:0;font-size:var(--t-h3)} .help-close{appearance:none;border:0;background:transparent;color:var(--ink2); font-size:1.1rem;line-height:1;cursor:pointer;padding:4px 8px;border-radius:var(--radius-xs)} .help-close:hover{color:var(--ink);background:var(--band)} .help-dialog-body{padding:var(--s-4) var(--s-5) var(--s-5);max-height:70vh;overflow-y:auto} .help-sect-title{margin:var(--s-4) 0 var(--s-2);font-size:var(--t-sm);font-weight:700;color:var(--accent-text)} .help-sect-title:first-child{margin-top:0} .help-purpose-p{margin:0 0 var(--s-2);font-size:var(--t-sm);line-height:var(--lh-body);color:var(--ink)} .help-steps{margin:0;padding-left:1.4em} .help-steps li{margin:0 0 6px;font-size:var(--t-sm);line-height:var(--lh-body)} .help-roles{margin:var(--s-4) 0 0;font-size:var(--t-xs);color:var(--ink2); padding-top:var(--s-3);border-top:1px solid var(--hairline)}