/* ============================================================
   redesign.css — editorial visual layer for the portal.
   Loaded AFTER portal.css so it overrides the login + app shell
   + student/teacher/admin component styles. Does NOT touch the
   report-viewer overlay (.ro-host / .report-page / iframe.report).
   FOLIO login = navy+gold; after login the tenant theme's
   --wc-primary (red) flows into --brand via the #app scope.
   ============================================================ */
:root{
  --r-ink:#25231f; --r-ink-soft:#4e473d; --r-muted:#857761;
  --r-paper:#fbf7ee; --r-card:#fffdf7; --r-warm:#f5eddd;
  --r-rule:#ddd0b4; --r-gold:#b8a47a; --r-gold-deep:#9a8553;
  --r-red:#8a3a36; --r-red-bg:#f3e4df;
  --r-green:#55725a; --r-green-bg:#eaf0e8;
  --r-amber:#7b5d13; --r-amber-bg:#f6ecc8;
  --r-navy:#1f3f70; --r-navy-bg:#e3ebf7;
  --r-shadow:0 22px 60px rgba(61,47,28,.14);
  --r-shadow-sm:0 6px 22px rgba(61,47,28,.08);
  /* 系統字。CSP 不放行外部字型,自架中文 woff2 又因為學生姓名是動態內容
     而無法安全子集化 —— 所以直接用各平台自己的中文字。正式站本來就是
     這個樣子(Google Fonts 一直被 CSP 擋著),這裡只是讓 CSS 說實話。
     注意:PingFang TC 是 Apple 的無襯線中文字,所以在 serif 角色前列它會
     偷偷把 CJK 文字變成無襯線。Songti TC/SC 必須排在 PingFang 前。 */
  --r-display:Georgia,"Times New Roman","Songti TC","Songti SC",serif;
  --r-serif:"Songti TC","Songti SC",Georgia,serif;
  --r-sans:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;
  --brand:#1f3f70; --brand-bg:#e3ebf7; --brand-ink:#16305c;
}
/* after login the tenant theme is applied → go red */
#app{ --brand:var(--wc-primary,#8a1f1f); --brand-bg:#f3e0dc; --brand-ink:#6e2420; }

body.preview{ font-family:var(--r-sans); color:var(--r-ink); background:var(--r-paper);
  -webkit-font-smoothing:antialiased; line-height:1.62; position:relative; }
body.preview::before{ content:""; position:fixed; inset:0; z-index:-2; background:
  radial-gradient(120% 90% at 12% -5%,#fffdf6 0%,rgba(255,253,246,0) 55%),
  radial-gradient(100% 80% at 100% 0%,#f7efdd 0%,rgba(247,239,221,0) 60%), var(--r-paper); }
body.preview::after{ content:""; position:fixed; inset:0; z-index:-1; opacity:.4; mix-blend-mode:multiply; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); }
@keyframes r-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes r-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- buttons (override global button{} + .btn) ---------- */
#login-screen .btn, #login-screen button[type=submit], #app .btn, .ro-overlay .btn,
#app button.btn{ font-family:var(--r-sans); font-weight:700; font-size:14px; border-radius:11px;
  width:auto; margin:0; padding:11px 20px; border:1px solid transparent; cursor:pointer; transition:.18s;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; }
#login-screen button[type=submit], #app .btn:not(.ghost):not(.sm){ background:var(--brand); color:#fff; box-shadow:0 8px 22px -8px var(--brand); }
#login-screen button[type=submit]:hover, #app .btn:not(.ghost):hover{ transform:translateY(-1px); filter:brightness(1.06); }
#app .btn.ghost{ background:var(--r-card); color:var(--brand-ink); border-color:var(--r-rule); box-shadow:none; }
#app .btn.ghost:hover{ border-color:var(--brand); background:#fff; }
#app .btn.sm{ padding:7px 14px; font-size:12.5px; background:transparent; color:var(--brand); border-color:transparent; box-shadow:none; }
#app .btn.sm:hover{ color:var(--brand-ink); text-decoration:underline; }

/* ================= LOGIN — floating navy card, gold FOLIO ================= */
#login-screen.wrap{ max-width:none; margin:0; padding:24px; min-height:100vh; min-height:100dvh;
  display:flex; align-items:center; justify-content:center; }
#login-screen .login-box{ width:100%; max-width:392px; position:relative; overflow:hidden;
  background:linear-gradient(165deg,#274c83 0%,#1c3a68 52%,#152d52 100%);
  border:1px solid rgba(255,255,255,.10); border-radius:24px; padding:40px 34px 34px;
  color:#e9f0fa; box-shadow:0 34px 80px -24px rgba(18,32,64,.6), 0 6px 18px rgba(0,0,0,.16);
  animation:r-rise .6s ease both; }
/* faint gold corner glow for depth */
#login-screen .login-box::before{ content:""; position:absolute; top:-60px; right:-60px; width:180px; height:180px;
  background:radial-gradient(circle,rgba(217,189,126,.22),transparent 70%); pointer-events:none; }
#login-screen .login-mark{ font-family:var(--r-display); font-weight:600; font-size:30px; letter-spacing:3px;
  color:#dcc080; line-height:1; margin-bottom:22px; position:relative; }
#login-screen .login-mark::after{ content:""; display:block; width:34px; height:2px; background:#dcc080; margin-top:12px; border-radius:2px; opacity:.8; }
#login-screen .eyebrow{ display:block; font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:#cdb985; }
#login-screen #login-title{ font-family:var(--r-display); font-weight:600; font-size:28px; color:#fff; letter-spacing:.3px; margin:7px 0 4px; }
#login-screen .login-box > p{ color:#a9bdd9; font-size:13.5px; margin:0 0 24px; }
#login-screen form label{ display:block; font-size:12px; font-weight:700; letter-spacing:.5px; color:#b6c7e0; margin:15px 0 7px; }
#login-screen form input{ width:100%; font-family:var(--r-sans); font-size:15.5px; color:#fff;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:13px 15px; transition:.18s; }
#login-screen form input::placeholder{ color:#88a0c2; }
#login-screen form input:focus{ outline:none; border-color:#dcc080; box-shadow:0 0 0 3px rgba(220,192,128,.22); background:rgba(255,255,255,.11); }
#login-screen .pw-eye{ color:#9fb3d0; } #login-screen .pw-eye:hover{ color:#dcc080; }
#login-screen button[type=submit]{ width:100%; margin-top:24px; padding:13px;
  background:linear-gradient(135deg,#e0c587,#c5a35c); color:#16305c; font-weight:700; box-shadow:0 10px 24px -10px rgba(220,192,128,.7); }
#login-screen button[type=submit]:hover{ transform:translateY(-1px); filter:brightness(1.05); }
#login-screen .error{ margin-top:14px; color:#ffb0a8; font-size:13.5px; }

/* ================= APP TOPBAR ================= */
#app .preview-bar{ display:flex; align-items:center; gap:14px;
  padding:14px max(20px,env(safe-area-inset-right)) 14px max(20px,env(safe-area-inset-left));
  padding-top:max(14px,env(safe-area-inset-top));
  background:rgba(255,253,247,.86); backdrop-filter:blur(8px); border-bottom:1px solid var(--r-rule); }
#app .preview-bar .brand{ display:flex; align-items:center; gap:0; }
#app .preview-bar .brand img[data-logo-img]{ height:38px; width:auto; display:block; }
#app .preview-bar .brand strong[data-logo-text]{ font-family:var(--r-display); font-weight:600; font-size:19px; color:var(--r-ink); }
#app .preview-bar .brand em[data-since]{ font-family:var(--r-serif); font-style:italic; color:var(--r-red); font-size:12px; margin-left:8px; }
#app #who{ margin-left:auto; font-size:13.5px; color:var(--r-ink-soft); font-weight:500; }
#app .preview-bar .btn{ padding:8px 14px; font-size:13px; }

#app .view{ max-width:920px; margin:0 auto; padding:34px 24px 70px; }
#app .view h2{ font-family:var(--r-display); font-weight:600; font-size:27px; color:var(--r-ink); letter-spacing:.3px; margin:0 0 4px; }
#app .view h2 .muted{ font-family:var(--r-sans); font-weight:500; font-size:14px; color:var(--r-muted); }
#app .view > .back{ margin-bottom:14px; }

/* ---------- student: sittings + cards ---------- */
#app .sitting{ margin-top:26px; animation:r-rise .5s ease both; }
#app .sitting-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:14px; }
#app .sitting-head .sitting-title{ font-family:var(--r-serif); font-weight:700; font-size:16px; color:var(--r-ink); }
#app .sitting-head::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--r-gold),transparent); order:1; }
#app .sitting-head .sitting-date{ order:2; font-size:12.5px; color:var(--r-muted); }
#app .report-card{ position:relative; background:var(--r-card); border:1px solid var(--r-rule); border-radius:16px;
  padding:22px 24px; margin-bottom:14px; box-shadow:var(--r-shadow-sm); overflow:hidden; transition:.2s; }
#app .report-card:hover{ transform:translateY(-2px); box-shadow:var(--r-shadow); border-color:var(--r-gold); }
#app .report-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--rc-accent,var(--brand)); }
#app .report-card.essay{ --rc-accent:var(--r-red); } #app .report-card.trans{ --rc-accent:var(--r-navy); }
#app .rc-grid{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px; }
#app .rc-fig{ font-family:var(--r-display); font-weight:500; font-style:italic; font-variant-numeric:tabular-nums;
  line-height:.85; color:var(--rc-accent,var(--brand)); font-size:50px; }
#app .rc-fig span{ font-size:18px; font-style:normal; color:var(--r-muted); margin-left:2px; }
#app .rc-fig .rc-missing-score{ margin:0; font-family:var(--r-sans); font-size:16px; font-weight:700; }
#app .rc-k{ font-family:var(--r-serif); font-weight:700; font-size:18px; color:var(--r-ink); }
#app .rc-sub{ font-size:12.5px; color:var(--r-muted); margin-top:2px; }
#app .rc-chips{ display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; }
#app .chip{ font-family:var(--r-sans); font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:999px; letter-spacing:.3px; }
#app .chip.red{ color:var(--r-red); background:var(--r-red-bg) } #app .chip.green{ color:var(--r-green); background:var(--r-green-bg) }
#app .chip.amber{ color:var(--r-amber); background:var(--r-amber-bg) } #app .chip.navy{ color:var(--r-navy); background:var(--r-navy-bg) }
#app .rc-actions{ display:flex; flex-direction:column; gap:8px; }
#app .rc-actions .btn{ padding:9px 16px; font-size:13px; }

/* ---------- teacher: panels + charts ---------- */
#app .class-actions{ display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 6px; }
#app .metric-panel{ background:var(--r-card); border:1px solid var(--r-rule); border-radius:18px; padding:20px 22px; margin-top:18px; box-shadow:var(--r-shadow-sm); animation:r-rise .5s ease both; }
#app .metric-head{ display:flex; align-items:center; gap:12px; margin-bottom:4px; }
#app .metric-head h3{ font-family:var(--r-serif); font-weight:700; font-size:17px; color:var(--r-ink); margin:0; }
#app .metric-panel .toggle{ margin-left:auto; display:inline-flex; background:var(--r-warm); border-radius:999px; padding:3px; }
#app .metric-panel .toggle button{ width:auto; margin:0; font-family:var(--r-sans); font-size:12.5px; font-weight:700; border:0; background:none; color:var(--r-muted); padding:6px 16px; border-radius:999px; cursor:pointer; transition:.15s; }
#app .metric-panel .toggle button.on{ background:var(--r-card); color:var(--brand-ink); box-shadow:var(--r-shadow-sm); }
#app .chart-host{ margin-top:12px; }
#app svg.chart .bar{ fill:var(--brand); transition:fill .15s; }
#app #m-trans svg.chart .bar{ fill:var(--r-navy); }
#app svg.chart .bar:hover{ filter:brightness(1.08); }
/* bar grow-in (ranked = scaleX from left; distribution = scaleY from bottom) */
#app svg.chart .bar-h{ transform-box:fill-box; transform-origin:left center; animation:r-grow-x .8s cubic-bezier(.2,.85,.25,1) both; }
#app svg.chart .bar-v{ transform-box:fill-box; transform-origin:bottom center; animation:r-grow-y .7s cubic-bezier(.2,.85,.25,1) both; }
@keyframes r-grow-x{ from{ transform:scaleX(0); } }
@keyframes r-grow-y{ from{ transform:scaleY(0); } }
#app svg.chart .bar-name{ fill:var(--r-ink-soft); font-family:var(--r-sans); font-size:12px; }
#app svg.chart .bar-val{ fill:var(--brand-ink); font-family:var(--r-display); font-size:12px; font-variant-numeric:tabular-nums; }
#app #m-trans svg.chart .bar-val{ fill:var(--r-navy); }
#app svg.chart .avg-line{ stroke:var(--r-gold-deep); stroke-width:1.5; stroke-dasharray:4 4; }
#app svg.chart .avg-label{ fill:var(--r-muted); font-family:var(--r-sans); font-size:11px; }

/* ---------- admin: per-class cards (no wide-table overflow) ---------- */
#app .admin-classes{ display:flex; flex-direction:column; gap:14px; margin-top:20px; }
#app .cls-card{ background:var(--r-card); border:1px solid var(--r-rule); border-radius:16px; padding:18px 20px;
  box-shadow:var(--r-shadow-sm); animation:r-rise .5s ease both; }
#app .cls-head{ display:flex; align-items:center; gap:12px; padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--r-warm); }
#app .cls-head .cls-name{ font-family:var(--r-serif); font-weight:700; font-size:18px; color:var(--r-ink); }
#app .cls-head .cls-n{ font-size:12px; color:var(--r-muted); }
#app .cls-head .btn.sm{ margin-left:auto; }
/* 名冊尚未匯入的班級:淡化、壓縮高度,且沒有下方分隔線(底下沒有內容) */
#app .cls-card.empty{ padding:14px 20px; background:transparent; border-style:dashed; box-shadow:none; }
#app .cls-card.empty .cls-head{ padding-bottom:0; margin-bottom:0; border-bottom:0; }
#app .cls-card.empty .cls-name{ color:var(--r-muted); font-weight:600; }
#app .cls-card.empty .cls-n{ margin-left:auto; }

/* 輕量班級列:卡片是導覽,不是儀表板 */
/* display:block 是必要的,不是多餘 —— portal.css 有一條泛用的 .row{display:flex},
   而這張卡片的 class 是「cls-card row」,會被那條抓走。被抓走時 .cls-head 與
   .cls-tally 變成同一列的 flex item:份數擠到人數旁邊,「選擇考試 ›」的
   margin-left:auto 只在 .cls-head 內生效,於是卡在行中間而不是靠右。 */
#app .cls-card.row{ display:block; padding:14px 20px; }
#app .cls-card.row .cls-head{ padding-bottom:0; margin-bottom:0; border-bottom:0; }
/* 導覽列上的數字讀得到:單位維持灰色小字,數字用 display 字體獨立加重 */
#app .cls-card.row .cls-n b{ font-family:var(--r-display); font-weight:500; font-size:13.5px;
  font-variant-numeric:tabular-nums; color:var(--r-ink-soft); }
/* 份數色票。沿用報告卡片 .chip 的藥丸語言與同一組 --r-*-bg 色票,但把數字放大 ——
   .chip 的數字是附註,這裡的數字才是要讀的東西。班級卡片與考試卡片共用同一顆,
   往下鑽進去看到的是同一個物件,不是兩種寫法。 */
#app .tally{ display:inline-flex; align-items:baseline; gap:5px;
  padding:4px 12px; border-radius:999px; font-family:var(--r-sans); font-size:12px; font-weight:500; }
#app .tally b{ font-family:var(--r-display); font-weight:600; font-size:17px;
  font-variant-numeric:tabular-nums; letter-spacing:.2px; }
#app .tally.essay{ background:var(--r-red-bg); color:var(--r-red); }
#app .tally.trans{ background:var(--r-navy-bg); color:var(--r-navy); }
/* 份數:卡片第二行 */
#app .cls-tally{ display:flex; flex-wrap:wrap; gap:10px; margin-top:11px; }
#app .empty-state{ margin:20px 0; }
#app .cls-metrics{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
#app .cm-lbl{ font-family:var(--r-serif); font-weight:700; font-size:14.5px; color:var(--r-ink); margin-bottom:8px; }
/* 樣本數是讀者判斷五標可不可信的依據,給它一顆色票。 */
#app .cm-lbl .tally{ margin-left:9px; }
#app .cm-bar{ height:9px; border-radius:999px; background:var(--r-warm); overflow:hidden; }
#app .cm-bar i{ display:block; height:100%; border-radius:999px; transform-origin:left center;
  animation:r-grow-x .9s cubic-bezier(.2,.85,.25,1) both; }
#app .cm.essay .cm-bar i{ background:linear-gradient(90deg,var(--r-red),var(--r-gold-deep)); }
#app .cm.trans .cm-bar i{ background:linear-gradient(90deg,var(--r-navy),#3a5e96); }
#app .cm-stats{ display:flex; gap:16px; margin-top:9px; }
#app .cm-stats span{ font-size:11px; color:var(--r-muted); display:flex; flex-direction:column; line-height:1.25; }
#app .cm-stats b{ font-family:var(--r-display); font-weight:500; font-size:18px; font-variant-numeric:tabular-nums; color:var(--r-ink); }

/* ---------- 考試列表 ---------- */
#app .exam-list{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
#app .exam-row{ display:flex; flex-direction:column; align-items:stretch; width:100%; text-align:left;
  background:var(--r-card); border:1px solid var(--r-rule); border-radius:14px;
  padding:16px 18px; cursor:pointer; font:inherit; color:inherit;
  transition:border-color .18s ease; }
#app .exam-row:hover{ border-color:var(--r-gold); }
#app .exam-head{ display:flex; align-items:center; gap:14px; }
#app .exam-row .exam-name{ font-family:var(--r-serif); font-weight:700; font-size:16px; color:var(--r-ink); }
#app .exam-row .exam-date,
#app .exam-row .exam-sections,
#app .exam-row .exam-n{ font-size:12.5px; color:var(--r-muted); }
#app .exam-row .exam-go{ margin-left:auto; color:var(--r-muted); font-size:18px; }
/* 指標區沿用 .cm-*,但那組規則是為 <div> 寫的;這裡是 <span>(button 內
   只能放 phrasing content),所以要補回 display,否則高度與 margin 不生效。 */
#app .exam-row .cls-metrics{ margin-top:14px; padding-top:14px; border-top:1px solid var(--r-warm); }
#app .exam-row .cm,
#app .exam-row .cm-lbl,
#app .exam-row .cm-bar{ display:block; }
/* .cm-lbl 裡唯一的 span 就是份數色票,它自己是 inline-flex,不需要補 display。
   但數字要比五標小一號 —— 五標才是這張卡片的主角,樣本數是它的註腳。 */
#app .exam-row .cm-lbl .tally{ padding:3px 10px; font-size:11.5px; }
#app .exam-row .cm-lbl .tally b{ font-size:14px; }
/* 五個標線比原本三個數字擠,收一點間距 */
#app .exam-row .cm-stats{ gap:11px; }
#app .exam-row .cm-stats b{ font-size:16px; }
@media (max-width:640px){
  #app .exam-head{ flex-wrap:wrap; gap:6px 12px; }
  #app .exam-row .exam-name{ flex:1 0 100%; }
  #app .exam-row .exam-go{ margin-left:auto; }
  #app .exam-row .cm-stats{ gap:7px; }
  #app .exam-row .cm-stats b{ font-size:14px; }
}

/* ================= change-password page ================= */
body.preview .change-card, .cp-page .wrap{ }
.cp-page{ font-family:var(--r-sans); color:var(--r-ink); }
.cp-page .card{ background:var(--r-card); border:1px solid var(--r-rule); border-radius:18px; box-shadow:var(--r-shadow); padding:30px 30px 26px; }
.cp-page h1{ font-family:var(--r-display); font-weight:600; font-size:25px; color:var(--r-ink); letter-spacing:.3px; }
.cp-page p{ color:var(--r-muted); font-size:14px; }
.cp-page label{ font-size:12.5px; font-weight:700; letter-spacing:.5px; color:var(--r-ink-soft); }
.cp-page input{ font-family:var(--r-sans); font-size:15.5px; background:var(--r-paper); border:1px solid var(--r-rule); border-radius:12px; }
.cp-page input:focus{ outline:none; border-color:var(--r-red); box-shadow:0 0 0 4px var(--r-red-bg); }
.cp-page .pw-eye{ color:#a99d86; } .cp-page .pw-eye:hover{ color:var(--r-red); }
.cp-page button[type=submit]{ background:var(--r-red); color:#fff; border:0; border-radius:11px; font-weight:700; box-shadow:0 8px 22px -8px var(--r-red); }
.cp-page button.secondary{ background:var(--r-card); color:var(--r-red); border:1px solid var(--r-rule); border-radius:11px; font-weight:700; }

/* ================= mobile ================= */
@media(max-width:760px){
  #login-screen.wrap{ padding:18px; }
  #login-screen .login-box{ padding:32px 24px 28px; border-radius:20px; }
  #app .view{ padding:22px 14px 56px; }
  #app .preview-bar{ flex-wrap:wrap; gap:10px; } #app .preview-bar .btn{ padding:7px 12px; font-size:12px; }
  #app .rc-grid{ grid-template-columns:auto 1fr; row-gap:14px; }
  #app .rc-actions{ grid-column:1/-1; flex-direction:row; } #app .rc-actions .btn{ flex:1; }
  #app .metric-head{ flex-wrap:wrap; } #app .metric-panel .toggle{ margin-left:0; }
  #app .cls-metrics{ grid-template-columns:1fr; gap:16px; }
  #app .cls-head{ flex-wrap:wrap; } #app .cls-head .btn.sm{ margin-left:auto; }
  #app .cls-tally{ gap:14px; }
}