/* YenTake — every style in the site. Light and dark, 360px up.
 *
 * All of it lives here on purpose: _headers sets style-src 'self' with no
 * 'unsafe-inline', so a <style> block or a style="" attribute anywhere would be
 * refused by the browser. Sizes that have to be computed (the timeline bars) are
 * set through el.style.height from JavaScript, which a policy does not cover.
 */
:root{
  --bg:#f4f6f7;--surface:#ffffff;--surface2:#f7f9fa;--ink:#16201f;--ink2:#47565a;--mute:#74858a;
  --line:#dde4e6;--line2:#eaeff0;
  --acc:#0e6b7c;--acc-ink:#ffffff;--acc-soft:#e6f2f4;--acc-line:#a9cdd5;
  --ok:#2c6e49;--ok-bg:#e7f2ec;--ok-line:#a9cebc;
  --warn:#8a5a00;--warn-bg:#fbf1df;--warn-line:#e8c893;
  --err:#a63a24;--err-bg:#fbeae6;--err-line:#eab5a8;
  --tax:#b4643c;--si:#3f7fa6;--res:#8a5fa8;
  --shadow:0 1px 2px rgba(18,32,32,.06),0 8px 22px rgba(18,32,32,.07);
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101516;--surface:#182021;--surface2:#1f2829;--ink:#e8eeee;--ink2:#b3c1c3;--mute:#839295;
    --line:#2b3536;--line2:#232c2d;
    --acc:#5cc0d3;--acc-ink:#07191d;--acc-soft:#17282c;--acc-line:#31565e;
    --ok:#6dcb9b;--ok-bg:#16281f;--ok-line:#2f5a44;
    --warn:#e0b06a;--warn-bg:#2a2318;--warn-line:#584426;
    --err:#f0a08c;--err-bg:#2c1c18;--err-line:#5c352c;
    --tax:#e39a72;--si:#79b5d8;--res:#bd95d6;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 22px rgba(0,0,0,.38);
  }
}
:root[data-theme="dark"]{
  --bg:#101516;--surface:#182021;--surface2:#1f2829;--ink:#e8eeee;--ink2:#b3c1c3;--mute:#839295;
  --line:#2b3536;--line2:#232c2d;
  --acc:#5cc0d3;--acc-ink:#07191d;--acc-soft:#17282c;--acc-line:#31565e;
  --ok:#6dcb9b;--ok-bg:#16281f;--ok-line:#2f5a44;
  --warn:#e0b06a;--warn-bg:#2a2318;--warn-line:#584426;
  --err:#f0a08c;--err-bg:#2c1c18;--err-line:#5c352c;
  --tax:#e39a72;--si:#79b5d8;--res:#bd95d6;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 22px rgba(0,0,0,.38);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.6;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  font-variant-numeric:tabular-nums}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
@media(max-width:420px){.wrap{padding:0 14px}}

header{background:var(--surface);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:1.05rem;
  letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.brand svg{flex:none}
header nav{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
header nav a{color:var(--mute);font-size:.88rem;text-decoration:none}
header nav a:hover{color:var(--ink)}

h1{font-size:1.95rem;line-height:1.22;letter-spacing:-.02em;margin:28px 0 10px;text-wrap:balance}
h2{font-size:1.22rem;letter-spacing:-.01em;margin:30px 0 10px}
h3{font-size:1rem;margin:20px 0 6px}
p{margin:0 0 14px}
.lead{color:var(--ink2);font-size:1.06rem;max-width:64ch;margin:0 0 18px}
a{color:var(--acc)}
.tag{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 11px;font-size:.8rem;
  font-weight:600;background:var(--acc-soft);color:var(--acc);border:1px solid var(--acc-line)}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);margin:0 0 18px}
.panel>.head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:13px 18px;border-bottom:1px solid var(--line2)}
.panel>.head h2{margin:0;font-size:1.02rem}
.panel>.head .note{margin:0}
.panel .body{padding:18px}
@media(max-width:420px){.panel .body{padding:14px}.panel>.head{padding:12px 14px}}
.note{font-size:.86rem;color:var(--mute);line-height:1.55}
.small{font-size:.88rem}
.stack{display:grid;gap:16px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);border-radius:9px;padding:9px 15px;font-size:.94rem;
  font-family:inherit;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--surface2)}
.btn.primary{background:var(--acc);color:var(--acc-ink);border-color:var(--acc);font-weight:600}
.btn.quiet{border-color:transparent;background:transparent;color:var(--acc)}
.btn.small{padding:5px 10px;font-size:.84rem}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--acc);outline-offset:2px}

input[type=text],input[type=number],select{border:1px solid var(--line);border-radius:8px;padding:8px 9px;
  font-size:.95rem;background:var(--surface);color:var(--ink);font-family:inherit;max-width:100%;width:100%}
input.yen{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;text-align:right}
label{font-size:.9rem}
.field{display:grid;gap:5px;min-width:0}
.field>span:first-child{font-weight:600;font-size:.86rem;color:var(--ink2)}
.field small{color:var(--mute);font-size:.78rem;line-height:1.45}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.check{display:flex;align-items:flex-start;gap:9px;font-size:.9rem;color:var(--ink)}
.check input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--acc)}
.check span small{display:block;color:var(--mute);font-size:.78rem}
fieldset{border:1px solid var(--line2);border-radius:10px;padding:14px;margin:0;min-width:0}
legend{font-weight:600;font-size:.86rem;color:var(--ink2);padding:0 6px}

/* --- segmented control -------------------------------------------------- */
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.seg label{position:relative;flex:1;min-width:0}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{display:block;padding:9px 8px;text-align:center;font-size:.9rem;color:var(--ink2);cursor:pointer;font-weight:600}
.seg input:checked + span{background:var(--acc);color:var(--acc-ink)}
.seg input:focus-visible + span{outline:2px solid var(--acc);outline-offset:-3px;border-radius:7px}
.seg label + label{border-left:1px solid var(--line)}

/* --- tabs --------------------------------------------------------------- */
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 14px}
.tabs button{border:1px solid var(--line);background:var(--surface);color:var(--ink2);border-radius:999px;
  padding:7px 14px;font-size:.9rem;font-family:inherit;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--acc);color:var(--acc-ink);border-color:var(--acc);font-weight:600}

/* --- headline numbers --------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.card{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--surface2);min-width:0}
.card.lead-card{background:var(--acc-soft);border-color:var(--acc-line)}
.card .k{font-size:.8rem;color:var(--mute);display:block}
.card .v{font-size:1.55rem;line-height:1.2;font-weight:600;letter-spacing:-.02em;display:block;
  overflow-wrap:break-word}
.card.lead-card .v{color:var(--acc)}
.card .sub{font-size:.82rem;color:var(--ink2);display:block;margin-top:3px}

/* --- tables ------------------------------------------------------------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:collapse;font-size:.9rem}
table.data th,table.data td{padding:7px 10px;border-bottom:1px solid var(--line2);text-align:left;vertical-align:top}
table.data thead th{font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2);font-weight:700;
  white-space:nowrap}
/* Row identifiers are <th scope="row"> so a screen reader can repeat them while
   the reader moves down a column. They should still read as body text. */
table.data tbody th{font-weight:400;color:inherit;text-align:left}
table.data tbody tr.total th{font-weight:700}
table.data td.num,table.data th.num{text-align:right;white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
/* Every row rule has to name th as well as td: the first cell of each body row
   is a <th scope="row">, and a rule that says `td` alone leaves it unpainted —
   a white notch at the start of every bonus row and every total. */
table.data tr.total td,table.data tr.total th{font-weight:700;background:var(--surface2)}
table.data tr.dim td,table.data tr.dim th{color:var(--mute);font-size:.84rem}
table.data tr.bonus-row td,table.data tr.bonus-row th{background:var(--warn-bg)}
table.data tr.cliff td,table.data tr.cliff th{box-shadow:inset 0 2px 0 var(--res)}
table.data caption{text-align:left;font-size:.84rem;color:var(--mute);padding:0 0 8px}
.jp{font-size:.95rem}
.rom{color:var(--mute);font-size:.8rem;display:block}

/* --- timeline chart ----------------------------------------------------- */
.chart{display:flex;align-items:flex-end;gap:2px;height:170px;padding:0;margin:0 0 6px;list-style:none;
  border-bottom:1px solid var(--line)}
.chart li{flex:1 1 0;min-width:4px;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.chart i{display:block;width:100%}
.chart i.net{background:var(--acc)}
.chart i.tax{background:var(--tax)}
.chart i.si{background:var(--si)}
.chart i.res{background:var(--res)}
.chart li.has-bonus i.net{background:var(--ok)}
.chart-axis{display:flex;justify-content:space-between;font-size:.74rem;color:var(--mute);margin:0 0 12px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.8rem;color:var(--ink2);margin:0 0 14px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
.legend i.net{background:var(--acc)}
.legend i.tax{background:var(--tax)}
.legend i.si{background:var(--si)}
.legend i.res{background:var(--res)}
.legend i.bonus{background:var(--ok)}

/* --- messages ----------------------------------------------------------- */
.msg{border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin:0 0 14px;font-size:.9rem;line-height:1.6}
.msg.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.msg.info{background:var(--acc-soft);color:var(--ink2);border-color:var(--acc-line)}
.msg p{margin:0 0 6px}
.msg p:last-child{margin:0}
.msg ul{margin:6px 0 0;padding-left:1.2em}

/* --- offer comparison --------------------------------------------------- */
.offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.offer{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--surface2);min-width:0}
.offer.best{border-color:var(--ok-line);background:var(--ok-bg)}
.offer h3{margin:0 0 10px;font-size:.95rem}
.offer .field{margin-bottom:10px}
.offer .out{border-top:1px solid var(--line);padding-top:10px;margin-top:4px}
.offer .out b{display:block;font-size:1.2rem;letter-spacing:-.01em}
.offer .out span{font-size:.8rem;color:var(--ink2)}

/* --- ad slot: nothing is loaded into it until AdSense is approved ------- */
.adslot{min-height:0;margin:0 0 18px}

footer{border-top:1px solid var(--line);margin-top:48px;padding:22px 0 34px;font-size:.86rem;color:var(--mute)}
footer .wrap{display:flex;gap:8px 18px;flex-wrap:wrap;align-items:center}
footer a{color:var(--mute)}

.doc{max-width:72ch}
.doc h2{font-size:1.18rem}
.doc ul,.doc ol{padding-left:1.3em}
.doc li{margin-bottom:7px}
.doc table{width:100%;font-size:.9rem;border-collapse:collapse;margin:0 0 16px}
.doc th,.doc td{padding:8px 10px;border-bottom:1px solid var(--line2);text-align:left;
  white-space:normal;overflow-wrap:break-word;vertical-align:top}
.doc th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2)}
.doc dt{font-weight:600;margin-top:12px}
.doc dd{margin:2px 0 0}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(12px);opacity:0;
  background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:999px;font-size:.88rem;
  pointer-events:none;transition:opacity .16s,transform .16s;z-index:30;max-width:92vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

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

/* The month column never wraps: the table already scrolls inside .tablewrap on a
   narrow screen, and "Apr / 2026" across two lines is harder to read than a
   scrollbar. Left alone elsewhere, where the first column is prose. */
#monthTable td:first-child,#monthTable th:first-child{white-space:nowrap}

/* On a wide screen the dependent fields sit in one grid, and labels of one and
   two lines would otherwise put their inputs at different heights. Reserving two
   lines lines the row up. Below this width each field is its own row, where the
   reserved space would just be a gap. */
@media(min-width:700px){
  .grid3>.field>span:first-child{min-height:2.7em;display:flex;align-items:flex-end}
}