/* =============================================================
   All Plan — Accordion Folder Design System
   -------------------------------------------------------------
   One expanding file (風琴夾) per APP. The tabs along the top are
   the APP tabs; the panel below them is that APP's pocket, and the
   pocket you can see is the APP you are reading. Each tab is a link
   to a separate website, not a tab pane that swaps content in place.

   Per-APP identity is three custom properties (--accent /
   --accent-rgb / --tint) set by [data-plan]. Adding an APP = one
   [data-plan="x"] rule below plus one entry in assets/apps.js.
   ============================================================= */

/* ---------- 1. type ---------- */

/* The wordmark face, subset to Latin (3.5MB TTF -> 4.8KB woff2). */
@font-face{
  font-family:"CP Font";
  src:url("/assets/fonts/cpfont.woff2") format("woff2"),
      url("/assets/fonts/cpfont.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Everything except the wordmark is SF Rounded. SF Rounded has no Han
     coverage, so each language appends its own CJK family below — Chinese
     and Japanese fonts draw the same characters differently. */
  --sans:ui-rounded,"SF Pro Rounded","SF Pro Text",-apple-system,BlinkMacSystemFont,
         "Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --display:"CP Font",ui-rounded,"SF Pro Rounded",-apple-system,sans-serif;
}

html[data-lang="zh"] body{font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif}
html[data-lang="cn"] body{font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif}
html[data-lang="ja"] body{font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic","Noto Sans JP","Meiryo",sans-serif}
html[data-lang="en"] body{font-family:var(--sans)}

/* ---------- 2. tokens ---------- */

:root{
  --page:#fcfbf9;          /* the desk: near-white, easy to read against */

  --ink:#24211d;           /* body text — 14.6:1 on --page */
  --ink-soft:#655f55;      /* secondary — 5.6:1 */
  --ink-faint:#8f887c;

  --card:#ffffff;          /* paper sitting inside a pocket */
  --card-edge:#e8e4da;

  /* per-APP identity; overridden by [data-plan] */
  --accent:#3c3a34;        /* pocket board + tab fill */
  --accent-rgb:60,58,52;
  --tint:#f1efe9;          /* pocket interior — the paper you read on */

  --gut:clamp(16px,4.4vw,40px);
  --r:8px;

  --lift-1:0 1px 2px rgba(40,34,22,.07);
  --lift-2:0 2px 5px rgba(40,34,22,.07),0 8px 20px rgba(40,34,22,.07);
  --pocket-lift:0 3px 8px rgba(40,34,22,.10),0 18px 44px rgba(40,34,22,.13);

  --label:700 11.5px/1 var(--sans);

  /* A file-folder glyph, drawn here so there is no icon font to license.
     Outlined rather than solid: at this size a filled silhouette reads as
     a plain rectangle and the tab disappears. */
  --ico-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='2.7' y='4.9' width='18.6' height='14.2' rx='2.3'/%3E%3Cpath d='M3.6 7.4 12 13.1 20.4 7.4'/%3E%3C/svg%3E");
  --ico-folder:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M2.9 8.6V18.6A1.7 1.7 0 0 0 4.6 20.3H19.4A1.7 1.7 0 0 0 21.1 18.6V10.3A1.7 1.7 0 0 0 19.4 8.6H11.6L9.5 5.4H4.6A1.7 1.7 0 0 0 2.9 7.1Z'/%3E%3C/svg%3E");
}

/* ---------- 3. APP registry (visual half) ---------- */

[data-plan="all"]{--accent:#3c3a34;--accent-rgb:60,58,52; --tint:#f1efe9}
[data-plan="b"]  {--accent:#22405f;--accent-rgb:34,64,95;  --tint:#e9eff6}  /* B Plan — BP.brandPrimary */
[data-plan="j"]  {--accent:#a83d22;--accent-rgb:168,61,34; --tint:#f9ece6}  /* J Plan */

/* ---------- 4. base ---------- */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font:16.5px/1.78 var(--sans);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

a{color:var(--accent);text-decoration-color:rgba(var(--accent-rgb),.38);text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}

.shell{max-width:920px;margin:0 auto;padding:clamp(26px,5vw,52px) var(--gut) clamp(40px,7vw,80px)}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* =============================================================
   5. MASTHEAD — the label written on the outside of the file
   ============================================================= */

.masthead{margin:0 0 clamp(18px,3vw,26px)}

.wordmark{
  display:block;
  font-family:var(--display);
  font-size:clamp(52px,12.5vw,104px);
  line-height:.96;
  letter-spacing:.005em;
  color:var(--ink);
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
/* The title is the site's identity, not an APP's: it never takes an APP
   colour. Tap/hover feedback is a brightness shift, so nothing can latch a
   colour onto it (iOS keeps :hover applied after a tap until you tap away). */
a.wordmark{transition:opacity .16s ease}
a.wordmark:hover,
a.wordmark:active{opacity:.62}
a.wordmark:focus-visible{outline-color:var(--ink)}

.tagline{
  margin:clamp(6px,1.4vw,12px) 0 0;
  font-family:var(--display);
  font-size:clamp(15px,3.4vw,27px);
  line-height:1.3;
  color:var(--ink);
}

/* =============================================================
   6. TABS — one per APP, all on one level, all parallel.
   The tab you are on is flush with the pocket below it; the others
   sit lower, tucked behind the board, still in their own colour.
   ============================================================= */

.tabs{position:relative;z-index:2}

.tabs__row{
  list-style:none;
  display:flex;
  align-items:flex-end;
  gap:5px;
  margin:0;
  padding:0;
  min-height:58px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.tabs__row::-webkit-scrollbar{display:none}
.tabs__row > li{flex:none;display:flex;align-items:flex-end}

.tab{
  display:flex;align-items:center;
  height:48px;
  padding:0 clamp(18px,3.4vw,30px);
  border-radius:11px 11px 0 0;
  background:var(--accent);
  color:#fff;
  /* an APP's name is its wordmark, so it is set in the display face here,
     in the contents-list badge, and in the contents-list name */
  font-family:var(--display);
  font-size:clamp(16px,2.8vw,20px);
  font-weight:400;
  letter-spacing:.02em;
  white-space:nowrap;
  text-decoration:none;
  position:relative;
  transition:height .18s ease;
  /* tucked in behind the board: a shaded lip along the bottom edge */
  box-shadow:inset 0 -7px 11px -7px rgba(0,0,0,.45);
}
.tab:hover{height:53px}

/* The current APP: full height, no lip, and its bottom edge runs straight
   into the pocket board — one continuous piece of card. */
.tab[aria-current="page"]{
  height:58px;
  margin-bottom:-3px;
  padding-bottom:3px;
  z-index:3;
  box-shadow:none;
  cursor:default;
}
.tab[aria-current="page"]::after{
  /* hairline along the fold, so the tab still reads as a separate piece
     of card rather than a painted rectangle */
  content:"";position:absolute;left:0;top:0;
  width:100%;height:1px;
  background:rgba(255,255,255,.24);
  border-radius:11px 11px 0 0;
}

/* =============================================================
   7. POCKET — the expanding file itself: coloured board outside,
   readable paper inside, accordion creases down the sides and along
   the bottom gusset.
   ============================================================= */

.pocket{
  position:relative;z-index:1;
  padding:clamp(9px,1.6vw,14px) clamp(9px,1.6vw,14px) clamp(18px,2.8vw,26px);
  background:var(--accent);
  border-radius:0 10px 10px 10px;
  box-shadow:var(--pocket-lift);
}
/* side creases */
.pocket::before{
  content:"";position:absolute;
  left:3px;right:3px;top:18px;bottom:18px;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.17) 0 1px,rgba(255,255,255,.10) 1px 2px,transparent 2px 4px) left  /5px 100% no-repeat,
    repeating-linear-gradient(90deg,rgba(0,0,0,.17) 0 1px,rgba(255,255,255,.10) 1px 2px,transparent 2px 4px) right /5px 100% no-repeat;
  pointer-events:none;
}
/* bottom gusset creases */
.pocket::after{
  content:"";position:absolute;
  left:22px;right:22px;bottom:5px;height:11px;
  background:repeating-linear-gradient(0deg,
    rgba(0,0,0,.16) 0 1px,rgba(255,255,255,.11) 1px 2px,transparent 2px 4px);
  border-radius:0 0 6px 6px;
  pointer-events:none;
}

/* The document's own tab, at the right-hand end of the rim: APP tabs on the
   left, "which document" on the right. Shorter and quieter than an APP tab so
   the two are never confused. */
.pocket__label{
  position:absolute;bottom:100%;right:clamp(12px,3vw,26px);
  display:flex;align-items:center;
  height:32px;
  padding:0 15px;
  border-radius:9px 9px 0 0;
  background:var(--accent);
  color:rgba(255,255,255,.94);
  font:var(--label);
  letter-spacing:.14em;
  text-transform:uppercase;
  z-index:2;
  max-width:46%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  box-shadow:inset 0 -6px 10px -6px rgba(0,0,0,.4);
}

.pocket__inner{
  position:relative;z-index:1;
  background:var(--tint);
  border-radius:var(--r);
  padding:clamp(24px,5vw,60px) clamp(20px,4.6vw,56px) clamp(30px,5vw,56px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 3px rgba(0,0,0,.15);
}

/* =============================================================
   8. DOCUMENT
   ============================================================= */

.doc-head{border-bottom:1px solid rgba(var(--accent-rgb),.18);padding-bottom:24px}

.stamp{
  display:inline-block;
  font:var(--label);
  letter-spacing:.13em;text-transform:uppercase;
  color:#fff;background:var(--accent);
  padding:6px 12px;border-radius:7px;
}

.doc-head h1{
  font-size:clamp(27px,5.4vw,40px);
  line-height:1.2;
  margin:18px 0 8px;
  letter-spacing:-.02em;
  font-weight:800;
}
.doc-head .meta{color:var(--ink-soft);font-size:14.5px;margin:0}

.langbar{display:flex;flex-wrap:wrap;gap:7px;margin:24px 0 0}
.langbar button{
  font:inherit;font-size:14px;font-weight:700;cursor:pointer;
  padding:7px 15px;border-radius:9px;
  border:1px solid var(--card-edge);
  background:var(--card);
  color:var(--ink-soft);
  transition:background-color .15s,color .15s,border-color .15s;
}
.langbar button:hover{color:var(--ink);border-color:rgba(var(--accent-rgb),.45)}
.langbar button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- body copy ---------- */

.pocket__inner h2{
  font-size:20px;line-height:1.4;margin:42px 0 10px;
  letter-spacing:-.015em;font-weight:800;
  display:flex;gap:11px;align-items:baseline;
}
.pocket__inner h2 .n{
  flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:26px;padding:0 6px;
  border-radius:8px;
  background:var(--accent);color:#fff;
  font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;
  transform:translateY(-2px);
}
.pocket__inner h3{font-size:16px;margin:28px 0 6px;font-weight:800;letter-spacing:-.005em}

.pocket__inner p{margin:11px 0}
.pocket__inner ul,.pocket__inner ol{margin:11px 0;padding-left:22px}
.pocket__inner li{margin:6px 0}
.pocket__inner li::marker{color:rgba(var(--accent-rgb),.7)}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em;
  background:rgba(var(--accent-rgb),.08);
  padding:1px 5px;border-radius:5px;
}

/* ---------- blocks ---------- */

/* the note clipped to the front of the file */
.callout{
  background:var(--card);
  border:1px solid var(--card-edge);
  border-left:5px solid var(--accent);
  border-radius:5px 12px 12px 5px;
  padding:18px 20px;margin:26px 0;
  box-shadow:var(--lift-1);
}
.callout p{margin:0}
.callout p + p{margin-top:10px}
.callout strong{font-weight:800}

/* flagged slip: irreversible actions, permissions, "read this twice".
   Tinted in the APP's own colour, so it is never mistaken for another APP,
   and distinguished from .callout by being coloured stock rather than white. */
.notice{
  background:rgba(var(--accent-rgb),.085);
  border:1px solid rgba(var(--accent-rgb),.3);
  border-radius:11px;
  padding:15px 19px;margin:24px 0;
}
.notice p{margin:0}
.notice p + p{margin-top:10px}
.notice strong{color:var(--accent);font-weight:800}

/* index cards: one per permission / data item */
.cards{list-style:none;padding:0;margin:18px 0}
.cards > li{
  position:relative;
  margin:10px 0;padding:16px 18px 16px 21px;
  background:var(--card);
  border:1px solid var(--card-edge);
  border-radius:11px;
  box-shadow:var(--lift-1);
}
.cards > li::before{
  content:"";position:absolute;left:0;top:12px;bottom:12px;width:5px;
  background:var(--accent);border-radius:0 4px 4px 0;
}
.cards > li > strong{margin-bottom:4px;color:var(--ink);font-size:15.5px;font-weight:800}
/* Only the untranslated label may set display here: a two-part selector
   would outrank [data-i18n]{display:none} and show all four languages at
   once. A translated label gets its block from --i18n-show (section 11). */
.cards > li > strong:not([data-i18n]){display:block}
.cards em{font-style:normal;color:var(--ink-faint);font-size:13px}

/* ledger: what leaves the device, and to whom */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:20px 0}
.ledger{
  width:100%;border-collapse:separate;border-spacing:0;
  font-size:14.5px;background:var(--card);
  border:1px solid var(--card-edge);border-radius:11px;overflow:hidden;
}
.ledger th,.ledger td{
  text-align:left;vertical-align:top;
  padding:12px 14px;
  border-bottom:1px solid var(--card-edge);
}
.ledger thead th{
  font:var(--label);letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--accent);border-bottom:none;
}
.ledger tbody tr:last-child th,.ledger tbody tr:last-child td{border-bottom:none}
.ledger tbody th{font-weight:800;width:36%}

/* FAQ: one filed slip each, tab hanging in the gutter */
.faq{
  margin:14px 0;padding:17px 19px;
  background:var(--card);
  border:1px solid var(--card-edge);
  border-radius:5px 11px 11px 5px;
}
.faq > strong:first-child{
  display:block;margin-bottom:7px;
  font-size:16px;font-weight:800;color:var(--ink);
  padding-left:26px;position:relative;
}
.faq > strong:first-child::before{
  content:"";position:absolute;left:0;top:.2em;
  width:17px;height:17px;
  background-color:var(--accent);
  -webkit-mask-image:var(--ico-folder);mask-image:var(--ico-folder);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
}

/* numbered steps */
.steps{list-style:none;counter-reset:s;padding:0;margin:18px 0}
.steps > li{
  counter-increment:s;position:relative;
  margin:10px 0;padding:15px 18px 15px 54px;
  background:var(--card);
  border:1px solid var(--card-edge);
  border-radius:11px;
  box-shadow:var(--lift-1);
}
.steps > li::before{
  content:counter(s);
  position:absolute;left:16px;top:15px;
  width:25px;height:25px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;
  font-size:12.5px;font-weight:800;
}
.steps > li > strong{margin-bottom:2px;font-weight:800}
.steps > li > strong:not([data-i18n]){display:block}

/* contact chip */
.contact{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;padding:0;list-style:none}
.contact li{margin:0}
.contact a{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 19px;border-radius:11px;
  background:var(--card);
  border:1px solid var(--card-edge);
  text-decoration:none;font-weight:800;font-size:15.5px;color:var(--accent);
  box-shadow:var(--lift-1);
}
.contact a:hover{border-color:rgba(var(--accent-rgb),.5);box-shadow:var(--lift-2)}
.contact a::before{
  content:"";width:19px;height:19px;flex:none;
  background-color:currentColor;
  -webkit-mask-image:var(--ico-mail);mask-image:var(--ico-mail);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
}

/* the pocket's companion document: policy <-> support */
.crosslink{
  display:flex;align-items:center;gap:15px;
  margin:34px 0 0;padding:18px 20px;
  text-decoration:none;color:#fff;
  background:var(--accent);
  border-radius:5px 12px 12px 12px;
  box-shadow:var(--lift-1);
  transition:transform .18s ease,box-shadow .18s ease;
}
.crosslink:hover{transform:translateY(-2px);box-shadow:var(--lift-2)}
.crosslink__mark{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex:none;border-radius:9px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.3);
}
.crosslink__mark::before{
  content:"";width:19px;height:19px;
  background:#fff;
  -webkit-mask-image:var(--ico-folder);mask-image:var(--ico-folder);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
}
.crosslink__txt{min-width:0;flex:1}
.crosslink__kicker{
  display:block;font:var(--label);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.66);margin-bottom:3px;
}
.crosslink__name{font-size:16.5px;font-weight:800}
.crosslink__arrow{flex:none;font-size:19px;transition:transform .18s ease}
.crosslink:hover .crosslink__arrow{transform:translateX(4px)}

/* ---------- document foot ---------- */

.doc-foot{
  margin-top:48px;padding-top:22px;
  border-top:1px solid rgba(var(--accent-rgb),.18);
  color:var(--ink-soft);font-size:13.5px;
}
.doc-foot p{margin:6px 0}
.doc-foot .filed{
  font:var(--label);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);
}

/* page foot, outside the pocket */
.pagefoot{margin-top:clamp(20px,3vw,30px);color:var(--ink-faint);font-size:13.5px}
.pagefoot p{margin:5px 0}
.pagefoot a{color:var(--ink-soft);font-weight:700}

/* =============================================================
   9. APP LIST on the All Plan page — the file's own contents page.
   Each row carries its own data-plan, so [data-plan] re-points --accent
   on that row and it keeps its APP's colour inside a neutral pocket.
   ============================================================= */

.filelist{list-style:none;padding:0;margin:20px 0 0}
.filelist > li{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin:11px 0;padding:16px 18px;
  background:var(--card);
  border:1px solid var(--card-edge);
  border-left:5px solid var(--accent);
  border-radius:5px 11px 11px 5px;
  box-shadow:var(--lift-1);
}
.filelist__mark{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:none;border-radius:10px;
  background:var(--accent);color:#fff;
  font-family:var(--display);font-size:21px;font-weight:400;
  padding-top:2px;   /* the display face sits high in its em box */
}
.filelist__txt{flex:1 1 190px;min-width:0}
.filelist__name{
  display:block;line-height:1.25;
  font-family:var(--display);font-size:19px;font-weight:400;letter-spacing:.01em;
}
.filelist__note{margin-top:3px;font-size:14px;color:var(--ink-soft);line-height:1.55}
.filelist__links{display:flex;flex-wrap:wrap;gap:8px;flex:none}
.filelist__links a{
  font-size:13.5px;font-weight:800;text-decoration:none;
  color:var(--accent);
  padding:7px 13px;border-radius:9px;
  border:1px solid var(--accent);
}
.filelist__links a:hover{background:var(--accent);color:#fff}

/* =============================================================
   10. narrow screens
   ============================================================= */

@media (max-width:600px){
  .tabs__row{
    margin:0 calc(var(--gut) * -1);
    padding:0 var(--gut);
    scroll-padding-left:var(--gut);
  }
  .pocket__label{max-width:56%;height:28px;padding:0 11px;font-size:10px;letter-spacing:.1em}
  .filelist__links{flex:1 1 100%}
  .filelist__links a{flex:1 1 auto;text-align:center}
}

/* =============================================================
   11. language visibility, driven by <html data-lang>
   zh = 繁體中文 · cn = 简体中文 · en = English · ja = 日本語
   ============================================================= */

[data-i18n]{display:none}
html[data-lang="zh"] [data-i18n="zh"],
html[data-lang="cn"] [data-i18n="cn"],
html[data-lang="en"] [data-i18n="en"],
html[data-lang="ja"] [data-i18n="ja"]{display:var(--i18n-show,revert)}

/* An element can carry both a layout class and data-i18n. For those, the
   reveal rule above would hand back the UA default — inline for a span or a
   strong — and undo the class. Such classes state the display they need
   here, once, rather than being restated per language (a rule that ignored
   the language would reveal the three hidden copies as well).
   ADD A LINE HERE whenever a new block-level class also gets translated. */
.crosslink__name,
.filelist__note,
.cards > li > strong,
.steps > li > strong{--i18n-show:block}
.pocket__label{--i18n-show:flex}

/* =============================================================
   12. motion & print
   ============================================================= */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

@media print{
  body{background:#fff}
  .tabs,.langbar,.crosslink,.pagefoot{display:none}
  .pocket{background:none;box-shadow:none;padding:0}
  .pocket::before,.pocket::after,.pocket__label{display:none}
  .pocket__inner{background:none;box-shadow:none;padding:0}
  .shell{max-width:none;padding:0}
}