/* Shared styles for the four pages. Tokens and components follow design/Career Study Redesign.dc.html. */

/* 1. Tokens */
:root{
  --bg:#FAFAF8; --fg:#1B1B19; --fg2:#5E5E59; --fg3:#8A8A84; --line:#E2E2DD; --fill:#EFEFEB;
  --on-accent:#FFFFFF; --accent:oklch(0.50 0.16 255);
  --ok:oklch(0.58 0.14 150); --warn:oklch(0.72 0.15 80); --bad:oklch(0.56 0.18 28);
  --font:"IBM Plex Sans","Noto Sans TC",system-ui,-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  --content:1192px; --main:880px; --text:880px; --pad:32px;
  color-scheme:light;
}
html{scrollbar-gutter:stable}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#151514; --fg:#ECECE7; --fg2:#A6A69F; --fg3:#77776F; --line:#2B2B29; --fill:#202020;
  --on-accent:#111111; --accent:oklch(0.74 0.12 255);
  --ok:oklch(0.72 0.14 150); --warn:oklch(0.80 0.14 80); --bad:oklch(0.68 0.16 28); color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#151514; --fg:#ECECE7; --fg2:#A6A69F; --fg3:#77776F; --line:#2B2B29; --fill:#202020;
  --on-accent:#111111; --accent:oklch(0.74 0.12 255);
  --ok:oklch(0.72 0.14 150); --warn:oklch(0.80 0.14 80); --bad:oklch(0.68 0.16 28); color-scheme:dark }

/* 2. Base */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:17px;line-height:1.7}
a{color:var(--accent)}
a:hover{color:var(--fg)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input,button,select{font:inherit}
strong,b{font-weight:600}
h1{margin:0;font-size:32px;line-height:1.3;font-weight:700;text-wrap:balance}
h2{margin:48px 0 16px;font-size:24px;line-height:1.3;font-weight:700;text-wrap:balance;padding-top:24px;border-top:1px solid var(--fg3);scroll-margin-top:72px}
h3{margin:40px 0 12px;font-size:19px;line-height:1.3;font-weight:600;text-wrap:balance}
p{margin:0 0 16px;max-width:var(--text)}
ul,ol{margin:0 0 16px;padding-left:24px;max-width:var(--text)}
li{margin:0 0 12px}
li:last-child{margin-bottom:0}
[id]{scroll-margin-top:72px}

/* 3. Top nav */
.site{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
.site .in{max-width:var(--content);margin:0 auto;padding:0 var(--pad);height:56px;display:flex;align-items:center;gap:40px;min-width:0}
.site .brand{font-size:15px;font-weight:500;color:var(--fg);text-decoration:none;white-space:nowrap}
.site .tabs{display:flex;gap:4px;height:56px;min-width:0}
.site .tabs a{display:flex;align-items:center;padding:0 12px;font-size:15px;color:var(--fg2);text-decoration:none;white-space:nowrap}
.site .tabs a:hover{color:var(--fg)}
.site .tabs a.on{color:var(--fg);box-shadow:inset 0 -2px 0 var(--accent)}

/* 4. Page frame */
/* Every page: centered frame, side nav 200 + gap 48 + one 880 column (.page), 48 between blocks. */
/* --content = 200 + 48 + 880 + 2 x pad, shared with the header so the brand sits over the side nav. */
/* Below 1000 the side nav is gone and .page is the only column. Grid rules live in section 12. */
.wrap{max-width:var(--content);margin:0 auto;padding:48px var(--pad) 96px}
.page{display:flex;flex-direction:column;gap:48px;min-width:0;max-width:var(--main)}
.intro{display:flex;flex-direction:column;gap:16px}
.intro p{margin:0}
/* Page title block: h1 and one line under it on the left, page level switch on the right */
.jp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.jp-head .sub{margin:8px 0 0}
/* Long text pages: everything under the title block sits in one .doc, headings keep the 48 rhythm */
.doc>h2:first-child{margin-top:0}
.sub{color:var(--fg2)}
.lead{font-size:19px;font-weight:600;line-height:1.5;max-width:var(--text)}
.note{font-size:15px;color:var(--fg2);max-width:var(--text)}
.fine{font-size:14px;color:var(--fg3);max-width:var(--text)}

/* In-page anchor links */
.anchors{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:15px;padding-top:8px}
.anchors a{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;white-space:nowrap}
.anchors a:hover{border-bottom-color:currentColor}

/* Links between the pages of one tab */
.subnav{display:flex;flex-wrap:wrap;gap:4px 24px;margin:0;font-size:15px;line-height:1.5}
.subnav a{color:var(--fg2);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.subnav a:hover{color:var(--fg)}
.subnav a[aria-current="page"]{color:var(--fg);font-weight:600;border-bottom-color:var(--accent)}

/* Legend line with certainty tags */
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:14px;color:var(--fg2);margin:0;padding-top:8px;line-height:1.5}
.legend .it{display:inline-flex;gap:8px;align-items:center}
.legend .c{margin-left:0}

/* 5. Tags */
/* Certainty tags: told apart by line style, not color */
.c{display:inline-block;font-size:13px;line-height:20px;padding:0 6px;border-radius:4px;font-weight:500;white-space:nowrap;vertical-align:middle;margin-left:8px;border:1px solid var(--fg3);color:var(--fg2);font-variant-numeric:tabular-nums}
.c.ok{border-color:var(--accent);color:var(--accent)}
.c.est{border-style:solid}
.c.tbc{border-style:dashed}
/* Info tags without a certainty meaning: grey fill, no border */
.c:not(.ok):not(.est):not(.tbc),.tag{border:0;background:var(--fill);color:var(--fg2);line-height:22px;font-weight:400}
.tag{display:inline-block;font-size:13px;padding:0 6px;border-radius:4px;white-space:nowrap}
h2 .c,h3 .c{position:relative;top:-2px}

/* 6. Filter chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}
.chip{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:18px;font-size:15px;line-height:1;white-space:nowrap;flex:none;cursor:pointer;border:1px solid var(--fg3);background:transparent;color:var(--fg2);user-select:none}
.chip:hover{color:var(--fg)}
.chip[aria-pressed="true"],.chip:has(input:checked){background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.chip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
select.sel{appearance:none;-webkit-appearance:none;height:36px;min-width:0;padding:0 32px 0 12px;font:inherit;font-size:15px;line-height:1;color:var(--fg);background-color:var(--bg);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 d='M1 1.5l5 5 5-5' fill='none' stroke='%238A8A84' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;border:1px solid var(--line);border-radius:6px;cursor:pointer}
select.sel:hover{border-color:var(--fg3)}
select.sel:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.chip-sep{width:1px;height:24px;background:var(--line);flex:none}

/* 7. Bar chart: label 96, bar, value 56. Width = value / axis max. */
.chart{display:flex;flex-direction:column;gap:0;max-width:560px}
.row{display:grid;grid-template-columns:96px minmax(0,1fr) 56px;gap:12px;align-items:center;height:28px}
.row .lab{font-size:15px;color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .track{display:block;height:16px;background:var(--fill);position:relative;min-width:0}
.row .bar{display:block;position:absolute;top:0;bottom:0;left:0;max-width:100%;background:var(--accent)}
.row .bar.neg{background:var(--fg3)}
.row .val{font-size:15px;font-weight:500;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.row.ref .lab{color:var(--fg);font-weight:600}
.axis{display:grid;grid-template-columns:96px minmax(0,1fr) 56px;gap:12px;margin-top:4px;max-width:560px}
.axis>span:nth-child(2){display:flex;justify-content:space-between;font-size:13px;line-height:1.5;color:var(--fg3);font-variant-numeric:tabular-nums;border-top:1px solid var(--line);padding-top:4px}
.axis i{font-style:normal;white-space:nowrap}
.chart-w .row,.chart-w .axis{grid-template-columns:96px minmax(0,1fr) 64px}

/* 8. Tables */
.tw{overflow-x:auto;margin:0 0 16px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.5}
th,td{padding:10px 0 10px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{padding-top:8px;padding-bottom:8px;font-size:13px;font-weight:500;color:var(--fg2);border-bottom-color:var(--fg3);white-space:nowrap;vertical-align:bottom}
th:first-child,td:first-child{padding-left:0}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.k{white-space:nowrap}
td.key{font-weight:600}
tr.ref td.k{font-weight:600}
tr.ref td.k::after{content:"市場參考";display:inline-block;margin-left:8px;font-size:13px;font-weight:400;line-height:22px;padding:0 6px;border-radius:4px;background:var(--fill);color:var(--fg2);vertical-align:middle}
.good,.bad{color:inherit}

/* "Show all columns" and "show other cities": the same full width row at the end of a table or list */
button.more{display:none;width:100%;min-height:44px;align-items:center;gap:8px;padding:0;margin:0 0 16px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--fg2);font-size:15px;text-align:left;cursor:pointer}
button.more::after{content:"\FE40";font-size:13px;color:var(--fg3)}
button.more[aria-expanded="true"]::after,button.more[aria-pressed="true"]::after{content:"\FE3F"}
button.more:hover{color:var(--fg)}
.tw+button.more{margin-top:-16px}

/* 9. Expandable rows */
tr.city{cursor:pointer}
tr.city td.k button{font:inherit;font-weight:inherit;color:var(--fg);background:none;border:0;padding:0;cursor:pointer;text-align:left}
td.chev,th.chev{width:36px;text-align:right;color:var(--fg3);font-size:13px;white-space:nowrap;vertical-align:top;line-height:1;padding-top:19px}
tr.city:hover td.chev{color:var(--fg)}
tr.det td{padding:12px 0 16px;color:var(--fg2)}
.bk{list-style:none;margin:0;padding:0;max-width:560px;font-size:15px;line-height:1.5}
.bk li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 24px;margin:0;padding:3px 0}
.bk .amt{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bk .nt{grid-column:1 / -1;font-size:13px;color:var(--fg3);line-height:1.5}
.bk li.sum{color:var(--fg);font-weight:600}
.bk li.sum .nt{font-weight:400}
.bk li.head{font-size:13px;color:var(--fg3);padding-top:12px}

/* 10. Form controls */
.field{display:flex;flex-direction:column;gap:8px}
.field .lbl{font-size:15px;color:var(--fg2)}
.field input[type=number]{height:48px;width:100%;padding:0 12px;font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;color:var(--fg);background:var(--bg);border:1px solid var(--fg3);border-radius:0;outline:none}
.field input[type=number]:focus{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.field input[type=number]:disabled{opacity:.5}
.field .hint{font-size:14px;color:var(--fg3)}
.switches{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.switch{min-height:48px;display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:16px;align-items:center;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5;padding:8px 0;cursor:pointer}
.switch input{appearance:none;-webkit-appearance:none;margin:0;width:40px;height:24px;border-radius:12px;cursor:pointer;background:radial-gradient(circle at 12px 12px,var(--bg) 8.5px,transparent 9.5px),var(--fg3)}
.switch input:checked{background:radial-gradient(circle at 28px 12px,var(--bg) 8.5px,transparent 9.5px),var(--accent)}
.switch input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Source lists */
.src{font-size:15px;color:var(--fg2)}
.src li{margin:0 0 8px}
details{border-bottom:1px solid var(--line)}
details:first-child{border-top:1px solid var(--line)}
summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:15px;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"\FE40";margin-left:auto;font-size:13px;color:var(--fg3)}
details[open] summary::after{content:"\FE3F"}
details .src{padding-bottom:12px}

/* 12. Side nav: built by scripts/toc.js from the h2[id] of the current view. Replaces .subnav and .anchors on desktop. */
.toc{display:none}
@media (min-width:1000px){
  .wrap{display:grid;grid-template-columns:168px minmax(0,var(--main));column-gap:32px;align-items:start}
  .page{grid-column:2;grid-row:1}
  .toc{display:block;grid-column:1;grid-row:1;position:sticky;top:80px;max-height:calc(100vh - 104px);overflow-y:auto;scrollbar-width:thin;font-size:15px;line-height:1.4}
  .subnav,.anchors{display:none}
}
@media (min-width:1200px){
  .wrap{grid-template-columns:200px minmax(0,var(--main));column-gap:48px}
}
.toc ul{list-style:none;margin:0;padding:0;max-width:none;border-left:1px solid var(--line)}
.toc li{margin:0}
.toc a{display:flex;align-items:center;min-height:36px;margin-left:-1px;padding:6px 8px 6px 16px;color:var(--fg2);text-decoration:none}
.toc a:hover{color:var(--fg)}
.toc a:focus-visible{outline-offset:-2px}
.toc a[aria-current]{color:var(--fg);font-weight:600;box-shadow:inset 2px 0 0 var(--accent)}
.toc-h{margin:0 0 8px;font-size:13px;line-height:1.5;color:var(--fg3)}
.toc ul+.toc-h{margin-top:32px}

/* 11. Mobile */
@media (max-width:640px){
  :root{--pad:20px}
  body{font-size:17px}
  h1{font-size:28px}
  h2{font-size:22px;margin-top:32px;padding-top:20px}
  h3{margin-top:32px}
  .site .in{display:block;height:auto;padding:0}
  .site .brand{display:flex;align-items:center;height:44px;padding:0 20px}
  .site .tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;height:44px;border-top:1px solid var(--line)}
  .site .tabs a{justify-content:center;padding:0 4px}
  [id],h2{scroll-margin-top:100px}
  .wrap{padding:32px var(--pad) 64px}
  .page{gap:32px}
  .jp-head{flex-direction:column;align-items:flex-start;gap:16px}
  .sub{font-size:15px}
  .anchors{flex-wrap:nowrap;overflow-x:auto;gap:8px;margin:0 -20px;padding:4px 20px 0;scrollbar-width:none}
  .anchors a{flex:none;display:flex;align-items:center;height:36px;padding:0 14px;border:1px solid var(--line);border-radius:18px;color:var(--fg)}
  .chips.scroll{flex-wrap:nowrap;overflow-x:auto;margin-left:-20px;margin-right:-20px;padding:0 20px;scrollbar-width:none}
  .row,.axis{grid-template-columns:84px minmax(0,1fr) 48px;gap:10px}
  .chart-w .row,.chart-w .axis{grid-template-columns:84px minmax(0,1fr) 64px}
  .tw:not(.all) .d{display:none}
  button.more{display:flex}
  th,td{padding-left:12px}
  td.k{white-space:normal;word-break:keep-all}
  tr.ref td.k::after{display:block;width:max-content;margin:4px 0 0}
  .tw.all{position:relative}
  .tw.all tr:not(.det)>th:first-child,.tw.all tr:not(.det)>td:first-child{position:sticky;left:0;z-index:1;background:var(--bg);padding-right:12px}
  tr.det .bk{position:sticky;left:0;max-width:calc(100vw - 40px)}
}

/* 13. Split view: list on the left works as tabs, the chosen item's details on the right, always open */
.split{display:grid;grid-template-columns:280px minmax(0,1fr);column-gap:48px;align-items:start;margin:24px 0 0}
.split .split-pick{display:none}
.split-list{position:sticky;top:72px;max-height:calc(100vh - 96px);overflow-y:auto;border-top:1px solid var(--fg3);scrollbar-width:thin}
.si{appearance:none;-webkit-appearance:none;display:flex;flex-direction:column;gap:4px;width:100%;margin:0;text-align:left;font:inherit;color:var(--fg);background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:inset 3px 0 0 transparent;padding:10px 12px 10px 15px;cursor:pointer;line-height:1.4}
.si:hover{background:var(--fill)}
.si[aria-selected="true"]{font-weight:700;box-shadow:inset 3px 0 0 var(--accent)}
.si:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.si .s1{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:15px}
.si .sn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.si .sv{flex:none;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.si[aria-selected="true"] .sv{font-weight:700}
.si .s2{display:flex;flex-wrap:wrap;gap:6px}
.si .c{margin-left:0;font-weight:400}
.si.dim,.si.dim .sv{color:var(--fg3)}
.split-det{min-width:0}
.split-det h3{margin:0;font-size:24px}
.split-det .sd-city{margin:4px 0 0;font-size:15px;color:var(--fg2)}
.sd-big{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:16px 0 0;font-size:32px;line-height:1.2;font-weight:600;font-variant-numeric:tabular-nums}
.sd-big .lbl{font-size:15px;font-weight:500;color:var(--fg2)}
.sd-big .c{margin-left:0}
.sd-big.dim{color:var(--fg3)}
.split-det h4{margin:32px 0 8px;font-size:17px;line-height:1.4;font-weight:600}
.split-det .tw{margin:0}
.split-det td.lv{font-weight:600;white-space:nowrap}
.split-det td .c{margin-left:0}
.split-det td.sr{color:var(--fg2);overflow-wrap:anywhere}
.sd-notes{list-style:none;margin:0;padding:0;font-size:15px;line-height:1.6;color:var(--fg2)}
.sd-notes li{margin:0;padding:8px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.sd-notes li:first-child{border-top:1px solid var(--line)}
.sd-jobs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sd-jobs li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0;padding:12px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.4}
.sd-jobs a{text-decoration:none}
.sd-jobs a:hover{text-decoration:underline}
.split-det .sd-none{margin:0;font-size:15px;color:var(--fg2)}
@media (max-width:640px){
  .split{grid-template-columns:minmax(0,1fr);row-gap:24px}
  .split .split-list{display:none}
  .split .split-pick{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:8px;width:100%}
  .split .split-pick select{min-height:44px;width:100%}
  .split-det h3{font-size:22px}
  .sd-big{font-size:28px}
  .split-det table,.split-det tbody{display:block}
  .split-det thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .split-det tr{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:2px 8px;padding:8px 0;border-bottom:1px solid var(--line)}
  .split-det td{display:block;padding:0;border:0}
  .split-det td.n{text-align:left}
  .split-det td.sr{grid-column:1 / -1;font-size:14px}
}