/* NSL 頁首品牌區（lockup）——學習台與管理台共用。
 *
 * 為什麼是一個獨立檔案：兩個台都是單檔應用，樣式各自內嵌。這一區原本就是
 * 抄過去的，管理台裡還留著一行「與學習台一致：單排、44px」——而學習台早就
 * 不是 44px 了。註解說得再清楚也擋不住抄件走樣：**同一條規則只能有一個地方**。
 *
 * 規格與 Space Careers、Rocketry Toolchain 共用，見 space-career docs/brand.md。
 * 共用的是**比例規則**，顯示高度由各站自己的頁首密度決定；本站兩個台都用 30px。
 *
 * 依賴：--sans、--ink、--muted 三個代幣（兩個台的名稱與色值本來就一致）。
 * 這裡不定義它們——未定義的自訂屬性不會報錯，只會靜靜地繼承成別的值。
 */

/* 品牌英文字＝TASA Explorer（臺灣國家太空中心識別字體，OFL，自載 latin 子集）。
   自載不外連 CDN：本站 CSP 是 font-src 'self' data:，外連會被自己的標頭擋掉，
   而字型被擋不會報錯，只會安靜換成系統字。見 assets/fonts/README.md。 */
@font-face {
  font-family: "TASA Explorer";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/TASAExplorer-latin.woff2") format("woff2");
}

/* 標記當成一個色彩代幣，而不是兩個 <img> 靠選擇器切換。
   主題有三種狀態（明選淺、明選深、跟隨系統），兩個 <img> 就要為那三種各寫
   一次顯示規則，遲早跟配色對不起來——深色底配淺底標記。當成代幣就同進退。
   三段的順序不能動：明確指定的那兩條要排在媒體查詢後面才蓋得過系統偏好。 */
:root { --brand-mark: url("/assets/lc-mark-light.svg"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --brand-mark: url("/assets/lc-mark.svg"); }
}
:root[data-theme="light"] { --brand-mark: url("/assets/lc-mark-light.svg"); }
:root[data-theme="dark"]  { --brand-mark: url("/assets/lc-mark.svg"); }

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* 方形標（viewBox 32×32），等比不變形——contain 保證這件事。
   它是裝飾：旁邊就是「NewSpace Learning Center」這幾個字，不需要替代文字。 */
.brand-mark {
  width: 30px; height: 30px; flex: none;
  background: var(--brand-mark) center / contain no-repeat;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }

/* nowrap 但要能截斷：品牌區在頁首裡是可壓縮的一段（flex: 1 1 0），
   只寫 nowrap 的話字會直接溢出格子、疊到旁邊的東西上——名字愈長愈明顯。 */
.brand-name {
  font-family: "TASA Explorer", var(--sans); font-weight: 800;
  font-size: 1rem; letter-spacing: 0.005em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 副標：學習台放課程名，管理台放「管理台」。小字、弱色、字距放寬。
   一定要能截斷——課程名長度不可控，不截就把右邊的使用者選單擠出畫面。 */
.brand-sub {
  font-size: 0.74rem; font-weight: 400; margin: 0; color: var(--muted);
  letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 手機：品牌規格的間距 10px→8px。品牌區可壓縮（副標有 ellipsis），
   右側的使用者選單不縮——那是這一列上唯一的出口。 */
@media (max-width: 560px) {
  .brand { gap: 8px; }
  .brand-mark { width: 26px; height: 26px; }
}