/* Sign-in and account pages (3.3.0). Loaded after app.css and built only from its tokens.
   The sign-in card sits in a reading-room viewport: a faint measurement grid, a centre
   crosshair and corner ticks, the way an image viewer frames a slice. No web fonts. */

body.ak{overflow:auto; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;}
.ak .topbar{flex:none;}
.ak .topbar .who{display:flex; align-items:baseline; gap:6px; font-size:var(--fs-sm); color:var(--ink); max-width:28ch; overflow:hidden; white-space:nowrap;}
.ak .topbar .who b{overflow:hidden; text-overflow:ellipsis;}
.ak .topbar .who span{font-size:var(--fs-xs); color:var(--muted);}
.ak a.tbtn{text-decoration:none; color:var(--ink);}

/* language segmented control (two options, aria-pressed) */
.langseg{display:inline-flex; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--panel-2);}
.langseg button{font-size:var(--fs-xs); font-weight:600; padding:6px 11px; min-height:32px; color:var(--muted);}
.langseg button + button{border-left:1px solid var(--line);}
.langseg button[aria-pressed="true"]{background:var(--accent-container); color:var(--on-accent-container);}
.langseg button:hover:not([aria-pressed="true"]){color:var(--ink);}

/* ── sign-in viewport ─────────────────────────────────────────────────── */
.ak-stage{position:relative; flex:1; display:grid; place-items:center; padding:40px 16px 64px; overflow:hidden;}
.ak-stage::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:28px 28px; background-position:center;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at center,#000 10%,transparent 72%); mask-image:radial-gradient(ellipse 70% 60% at center,#000 10%,transparent 72%);}
/* centre crosshair, the reader's fixation point */
.ak-stage::after{content:""; position:absolute; left:50%; top:50%; width:96vmin; height:96vmin; transform:translate(-50%,-50%); pointer-events:none; opacity:.55;
  background:linear-gradient(var(--line) 0 0) center/1px 100% no-repeat, linear-gradient(var(--line) 0 0) center/100% 1px no-repeat;
  -webkit-mask-image:radial-gradient(circle,transparent 0 23vmin,#000 23vmin 30vmin,transparent 46vmin); mask-image:radial-gradient(circle,transparent 0 23vmin,#000 23vmin 30vmin,transparent 46vmin);}
.ak-ticks{position:absolute; inset:18px; pointer-events:none;}
.ak-ticks i{position:absolute; width:22px; height:22px; border-color:var(--line-strong); border-style:solid; opacity:.6;}
.ak-ticks i:nth-child(1){left:0; top:0; border-width:1.5px 0 0 1.5px;}
.ak-ticks i:nth-child(2){right:0; top:0; border-width:1.5px 1.5px 0 0;}
.ak-ticks i:nth-child(3){left:0; bottom:0; border-width:0 0 1.5px 1.5px;}
.ak-ticks i:nth-child(4){right:0; bottom:0; border-width:0 1.5px 1.5px 0;}

.ak-card{position:relative; z-index:1; width:min(420px,100%); background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:28px 28px 22px 32px; animation:ak-rise .32s ease-out both;}
.ak-card::before{content:""; position:absolute; left:0; top:18px; bottom:18px; width:4px; border-radius:0 3px 3px 0; background:var(--accent);}
@keyframes ak-rise{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.ak-kicker{font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.6px; color:var(--muted); text-transform:uppercase;}
.ak-card h1{font-size:var(--fs-xl); margin:6px 0 6px; font-weight:800; letter-spacing:-.3px;}
.ak-lead{margin:0 0 18px; color:var(--muted); font-size:var(--fs-sm);}
.ak-step[hidden]{display:none !important;}
.ak-checking{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:var(--fs-sm);}

/* fields */
.ak-field{display:block; margin:0 0 14px;}
.ak-field > span{display:block; font-size:var(--fs-xs); font-weight:600; color:var(--muted); margin-bottom:5px;}
.ak-input{display:flex; align-items:stretch; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--panel-2);}
/* the field's input box, not its caption (both are spans directly in the label) */
.ak-field > span.ak-input{display:flex; font-size:var(--fs); font-weight:400; color:var(--ink); margin-bottom:0;}
.ak-input:focus-within{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent;}
.ak-input input,.ak-input select{flex:1; min-width:0; border:0; background:transparent; padding:10px 12px; font-size:var(--fs-md); min-height:44px; color:var(--ink);}
.ak-input input:focus,.ak-input select:focus{outline:none;}
.ak-input input.mono{font-family:var(--mono);}
.ak-input .reveal{flex:none; padding:0 12px; font-size:var(--fs-xs); font-weight:700; color:var(--accent-strong); border-left:1px solid var(--line); min-width:56px;}
.ak-input .reveal:focus-visible{outline-offset:-3px;}
.ak-field[data-invalid="true"] .ak-input{border-color:var(--crit);}
.ak-hint{margin:5px 0 0; font-size:var(--fs-xs); color:var(--faint); line-height:1.5;}
.ak-count{display:inline-flex; gap:6px; align-items:center; font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted); margin-top:5px;}
.ak-count[data-ok="true"]{color:var(--ok-ink);}
.ak-count .bar{width:84px; height:4px; border-radius:2px; background:var(--panel-3); overflow:hidden;}
.ak-count .bar i{display:block; height:100%; width:0; background:var(--accent); transition:width .15s;}
.ak-count[data-ok="true"] .bar i{background:var(--ok);}
.ak-code input{letter-spacing:.4em; font-family:var(--mono); font-size:var(--fs-lg);}

.ak-go{width:100%; margin-top:6px;}
.ak-row{display:flex; gap:8px; margin-top:8px;}
.ak-row > *{flex:1;}
/* A single action under the temporary password: a button, not a full-width field (UX P3). */
.ak-row.ak-row-center{justify-content:center;}
.ak-row.ak-row-center > *{flex:0 0 auto;}
.tbtn.ak-copy{min-width:8em; justify-content:center; text-align:center; border-color:var(--accent); color:var(--ink); font-weight:600; cursor:pointer;}
.tbtn.ak-copy:hover{background:color-mix(in srgb,var(--accent) 16%,transparent);}
.spinner{width:14px; height:14px; border:2px solid color-mix(in srgb,var(--accent-ink) 35%,transparent); border-top-color:var(--accent-ink); border-radius:50%; display:inline-block; animation:ak-spin .8s linear infinite;}
.ak-checking .spinner{border-color:var(--line); border-top-color:var(--accent);}
@keyframes ak-spin{to{transform:rotate(360deg);}}

/* messages */
.ak-msg{margin:0 0 14px; padding:10px 12px; border-radius:var(--r-sm); font-size:var(--fs-sm); line-height:1.55;}
.ak-msg:empty,.ak-msg[hidden]{display:none;}
.ak-msg.err{color:var(--crit-ink); background:var(--crit-dim);}
.ak-msg.info{color:var(--warn-ink); background:var(--warn-dim);}
.ak-msg.ok{color:var(--ok-ink); background:var(--ok-dim);}
.ak-msg ul{margin:0; padding-left:18px;}
.ak-foot{margin-top:18px; padding-top:14px; border-top:1px solid var(--line-soft); font-size:var(--fs-xs); color:var(--faint); line-height:1.6;}
.ak-foot p{margin:0 0 4px;}
.ak-link{color:var(--accent-strong); font-weight:600; background:none; border:0; padding:0; text-decoration:underline; text-underline-offset:2px; cursor:pointer; font-size:inherit;}

/* secret (two-step verification) */
.ak-secret{font-family:var(--mono); font-size:var(--fs-lg); letter-spacing:.08em; word-spacing:.35em; padding:12px 14px; border-radius:var(--r-sm);
  background:var(--panel-2); border:1px dashed var(--line-strong); user-select:all; overflow-wrap:anywhere;}
.ak-uri{font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted); overflow-wrap:anywhere; user-select:all; margin:8px 0 0;}

/* ── account pages ────────────────────────────────────────────────────── */
.ak-main{flex:1; width:min(1180px,100%); margin:0 auto; padding:22px 20px 48px;}
.ak-main h1{font-size:var(--fs-xl); margin:0 0 4px; font-weight:800; letter-spacing:-.3px;}
.ak-tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin:18px 0 18px;}
.ak-tabs [role="tab"]{padding:10px 16px; min-height:44px; font-weight:700; font-size:var(--fs-sm); color:var(--muted); border-bottom:3px solid transparent; margin-bottom:-1px;}
.ak-tabs [role="tab"][aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent);}
.ak-tabs [role="tab"]:hover{color:var(--ink);}
.ak-panel[hidden]{display:none;}
.ak-grid{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start;}
@media (max-width:900px){.ak-grid{grid-template-columns:1fr;}}
.ak-box{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px;}
.ak-box h2{font-size:var(--fs-md); margin:0 0 12px;}
.ak-roles{margin:12px 0 0; padding:0; list-style:none; font-size:var(--fs-xs); color:var(--muted); line-height:1.55;}
.ak-roles li{margin:0 0 6px;}
.ak-roles b{color:var(--ink);}

.ak-table{width:100%; border-collapse:collapse; font-size:var(--fs-sm);}
.ak-table caption{text-align:left; font-weight:700; font-size:var(--fs-md); padding:0 0 10px;}
.ak-table th{text-align:left; font-size:var(--fs-xs); font-weight:700; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap;}
.ak-table td{padding:9px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle;}
.ak-table tbody tr:hover{background:color-mix(in srgb,var(--panel-2) 60%,transparent);}
.ak-table .mono{font-family:var(--mono); font-size:var(--fs-xs);}
.ak-table .sub{display:block; color:var(--faint); font-size:var(--fs-xs);}
.ak-chips{display:flex; flex-wrap:wrap; gap:4px;}
.ak-actions{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.ak-actions select,.ak-table select{font-size:var(--fs-xs); padding:4px 8px; min-height:32px; border-radius:var(--r-sm); border:1px solid var(--line-strong); background:var(--panel-2); color:var(--ink);}
.ak-scroll{overflow-x:auto;}
.ak-filters{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:12px;}
.ak-filters .ak-field{margin:0; min-width:180px;}
.ak-filters .ak-input input{min-height:36px; padding:6px 10px; font-size:var(--fs-sm);}
.ak-verify{margin:0 0 14px;}
.ak-verify .ak-msg{margin:10px 0 0;}
.ak-fp{font-family:var(--mono); font-size:var(--fs-xs); overflow-wrap:anywhere;}
.ak-empty{color:var(--muted); padding:16px 4px;}

/* dialog */
.ak-scrim{position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px; background:rgba(4,8,12,.66); backdrop-filter:blur(3px);}
.ak-dialog{width:min(460px,100%); background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; box-shadow:0 10px 40px -12px rgba(0,0,0,.7);}
.ak-dialog h2{margin:0 0 8px; font-size:var(--fs-lg);}
.ak-dbody{font-size:var(--fs-sm); line-height:1.6; color:var(--ink);}
.ak-dbody p{margin:0 0 10px;}
.ak-dfoot{display:flex; justify-content:flex-end; gap:8px; margin-top:14px;}
/* The temporary password: every character visible (it wraps rather than scrolls); the groups of four
   are spaced by margins, never by space characters, so a copy is the password itself. */
.ak-temp{display:block; font-family:var(--mono); font-size:var(--fs-xl); letter-spacing:.06em; line-height:1.6; padding:12px; text-align:center; border-radius:var(--r-sm); background:var(--panel-2); border:1px dashed var(--accent); user-select:all; overflow-wrap:anywhere; word-break:break-all; white-space:normal;}
.ak-temp .ak-grp{display:inline; margin:0 .3em;}
.tbtn.danger{border-color:color-mix(in srgb,var(--crit) 60%,var(--line)); color:var(--crit-ink);}
.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;}

@media (max-width:560px){
  .ak .topbar{flex-wrap:wrap; height:auto; gap:8px;}
  .ak-card{padding:22px 18px 18px 22px;}
}
@media (prefers-reduced-motion:reduce){.ak-card{animation:none;}}

/* ── 3.4.0 標註進度 ─────────────────────────────────────────────────────────
   A ledger, not a dashboard: one headline figure, quiet tiles, two tables. Numbers are tabular;
   colour only ever repeats what a word already says (status chips carry their label). */
.pg-head{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:0 0 14px;}
.pg-head h2{margin:0; font-size:var(--fs-lg);}
.pg-head .ak-hint{margin:0;}
.pg-head .spacer{flex:1;}
/* Six equal cards in a fixed grid: 3 × 2 from 1100 px, 2 × 3 below, one column on a phone (G06). */
.pg-overview{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 10px;}
@media (max-width:1100px){.pg-overview{grid-template-columns:repeat(2,minmax(0,1fr));}}
.pg-tile{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; min-width:0;}
.pg-hero{display:flex; flex-direction:column; gap:6px;}
.pg-hero-value{margin:0; font-size:44px; font-weight:700; line-height:1.05; letter-spacing:-1px; font-variant-numeric:tabular-nums;}
.pg-tile-label{margin:0; font-size:var(--fs-xs); font-weight:700; color:var(--muted);}
.pg-tile-value{margin:4px 0 0; font-size:var(--fs-xl); font-weight:700; font-variant-numeric:tabular-nums;}
.pg-tile-sub{margin:4px 0 0; font-size:var(--fs-xs); color:var(--faint);}
.pg-tile-date{font-size:var(--fs-md); font-weight:600;}
.pg-states{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px;}
.pg-states li{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.pg-states b{font-weight:600; font-size:var(--fs-sm);}
.pg-approx{position:relative; display:inline-block; margin-left:4px; color:var(--warn-ink); font-weight:700; cursor:help; border-radius:4px;}
/* The tip of a 「≈」 (admin.js places it inside the viewport; no inline style attribute). */
.pg-tipbox{position:fixed; z-index:50; max-width:300px; padding:7px 10px; border-radius:var(--r-sm); background:var(--panel-3); color:var(--ink); border:1px solid var(--line-strong); font-size:var(--fs-xs); line-height:1.45; box-shadow:0 6px 20px -8px rgba(0,0,0,.6); pointer-events:none;}
.pg-tipbox[hidden]{display:none;}
.pg-est{display:flex; gap:6px; align-items:baseline; color:var(--warn-ink);}
.pg-est .pg-approx{margin-left:0;}
.pg-legend{display:flex; flex-wrap:wrap; gap:6px 18px; margin:0 0 16px; font-size:var(--fs-xs); color:var(--muted);}
.pg-legend dd{margin:0; display:flex; align-items:center; gap:6px;}
.pg-keys{font-size:var(--fs-xs);}
.pg .ak-box{margin:0 0 16px;}
.pg .ak-box h3{margin:0 0 10px; font-size:var(--fs-md);}
.pg-count{margin:0 0 0 auto; align-self:center;}
progress.pg-bar{appearance:none; -webkit-appearance:none; display:block; width:100%; min-width:110px; height:8px; border:0; border-radius:999px; background:var(--panel-3); overflow:hidden; color:var(--chart-bar);}
progress.pg-bar::-webkit-progress-bar{background:var(--panel-3); border-radius:999px;}
progress.pg-bar::-webkit-progress-value{background:var(--chart-bar); border-radius:999px;}
progress.pg-bar::-moz-progress-bar{background:var(--chart-bar); border-radius:999px;}
.pg-hero progress.pg-bar{height:10px;}
.pg-table th[scope="row"]{font-weight:600; text-align:left; padding:9px 10px; border-bottom:1px solid var(--line-soft); white-space:nowrap;}
.pg-table .pg-n{text-align:right;}
.pg-table td.pg-n .sub{white-space:nowrap;}
.pg-table .pg-progress{min-width:150px;}
.pg-row{cursor:pointer;}
.pg-case{color:var(--ink); font-weight:700; text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:3px;}
.pg-case:hover{text-decoration-color:var(--accent);}
.pg-sort{all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:4px; min-height:24px; font:inherit; color:inherit;}
.pg-sort:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}
.pg-sort-mark{font-size:10px; min-width:10px;}
.pg-unrec{color:var(--muted); font-style:italic;}
.pg-daily{display:grid; gap:2px; justify-items:start;}
.pg-chart{display:block; overflow:visible;}
.pg-col{fill:var(--chart-bar);}
.pg-hit{fill:transparent;}
.pg-hit:hover{fill:color-mix(in srgb,var(--ink) 8%,transparent);}
.pg-base{stroke:var(--line); stroke-width:1;}
.pg-axis{display:flex; justify-content:space-between; width:138px; font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums;}
.pg-daily details{font-size:var(--fs-xs);}
.pg-daily summary{cursor:pointer; color:var(--muted); min-height:24px;}
.pg-days{border-collapse:collapse; margin-top:4px;}
.pg-days th,.pg-days td{padding:2px 5px; border:1px solid var(--line-soft); text-align:center; font-size:11px;}
@media (forced-colors:active){.pg-col{fill:CanvasText;} progress.pg-bar::-webkit-progress-value{background:Highlight;}}
@media (max-width:760px){.pg-overview{grid-template-columns:1fr;} .pg-hero-value{font-size:38px;}}