/* ============================================================
   IDFL Online Application — enterprise form UI
   Tokens follow idfl-japan-export/DESIGN.md. Deliberately NOT the
   marketing landing page: denser, quieter, no imagery, no scroll motion.
   ============================================================ */
:root{
  --bg:#ffffff;
  --bg-app:#f7f7f5;
  --bg-soft:#f6f6f3;
  --ink:#17171b;
  --ink-soft:#3c3c43;
  --muted:#63636c;
  --faint:#74747c;
  --hairline:rgba(23,23,27,.12);
  --hairline-2:rgba(23,23,27,.07);
  --hairline-strong:rgba(23,23,27,.30);
  --accent:#1255A0;
  --accent-deep:#0d3f78;
  --accent-soft:#eef3f9;
  --danger:#b3261e;
  --danger-soft:#fdf1f0;
  --warn:#8a5a00;
  --warn-soft:#fdf6e7;
  --ok:#1b6b45;
  --ok-soft:#eef6f1;
  --r-card:12px;
  --r-chip:4px;
  --rail-w:286px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --f-sans:"Zen Kaku Gothic New", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --f-mono:"Space Mono", ui-monospace, "SFMono-Regular", monospace;
}
*{box-sizing:border-box;}
/* Any author `display` rule beats the UA sheet's [hidden]{display:none}, which would
   silently un-hide elements the app hides via the hidden attribute (.banner is display:flex).
   All conditional visibility in this app relies on `hidden`, so enforce it globally. */
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  margin:0;background:var(--bg-app);color:var(--ink);
  font-family:var(--f-sans);font-size:15px;line-height:1.75;
  letter-spacing:.01em;font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p{margin:0;}
ul,ol,dl,dd{margin:0;padding:0;list-style:none;}
button{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px;}

.skip-link{position:absolute;left:16px;top:-100px;z-index:100;background:var(--accent);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-chip) var(--r-chip);transition:top .2s var(--ease);}
.skip-link:focus{top:0;}

/* ---------- header ---------- */
.app-header{
  position:sticky;top:0;z-index:30;background:var(--bg);
  border-bottom:1px solid var(--hairline);
}
.app-bar{display:flex;align-items:center;gap:18px;padding:12px 24px;}
.app-brand{display:flex;align-items:baseline;gap:12px;min-width:0;}
.app-brand strong{font-size:14px;letter-spacing:.14em;text-transform:uppercase;}
.app-brand span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.app-actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.save-status{font-size:12.5px;color:var(--muted);white-space:nowrap;}
.save-status.is-saved{color:var(--ok);}
.save-status.is-error{color:var(--danger);}

.progress-wrap{display:flex;align-items:center;gap:12px;padding:0 24px 12px;}
.progress-label{font-size:12.5px;color:var(--muted);white-space:nowrap;}
.progress{flex:1;height:6px;background:var(--hairline-2);border-radius:999px;overflow:hidden;}
.progress-bar{height:100%;width:0;background:var(--accent);transition:width .3s var(--ease);}
.progress-pct{font-family:var(--f-mono);font-size:13px;font-weight:700;min-width:44px;text-align:right;}

/* ---------- layout ---------- */
.app-body{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:calc(100vh - 96px);}
.rail-wrap{border-right:1px solid var(--hairline);background:var(--bg);}
.rail{position:sticky;top:96px;display:flex;flex-direction:column;padding:16px 12px;gap:2px;}
.rail-item{
  display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  background:none;border:none;cursor:pointer;padding:11px 12px;border-radius:8px;
  transition:background .2s var(--ease);
}
.rail-item:hover{background:var(--bg-soft);}
.rail-item.is-current{background:var(--accent-soft);}
.rail-no{
  flex:none;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--f-mono);font-size:12px;font-weight:700;
  border:1px solid var(--hairline-strong);color:var(--muted);background:var(--bg);
}
.rail-item.is-current .rail-no{border-color:var(--accent);color:var(--accent);}
.rail-item.is-done .rail-no{background:var(--ok);border-color:var(--ok);color:#fff;}
.rail-item.is-warn .rail-no{background:var(--warn-soft);border-color:var(--warn);color:var(--warn);}
.rail-text{display:flex;flex-direction:column;min-width:0;}
.rail-title{font-size:14px;font-weight:500;line-height:1.4;}
.rail-item.is-current .rail-title{color:var(--accent);font-weight:700;}
.rail-en{font-size:11px;color:var(--faint);letter-spacing:.04em;}
.rail-mark{margin-left:auto;flex:none;width:8px;height:8px;border-radius:50%;margin-top:8px;}
.rail-item.is-todo .rail-mark{background:var(--hairline-strong);}
.rail-item.is-warn .rail-mark{background:var(--warn);}
.rail-item.is-done .rail-mark{background:var(--ok);}

.main{display:flex;flex-direction:column;min-width:0;}
.main-scroll{flex:1;overflow-y:auto;padding:32px 40px 40px;}
.step-wrap{max-width:820px;margin:0 auto;}
.step-head{margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--hairline);}
.step-counter{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--muted);}
.step-title{font-size:26px;font-weight:700;line-height:1.3;margin-top:6px;outline:none;}
.step-title-en{font-size:13px;color:var(--faint);letter-spacing:.06em;margin-top:2px;}
.step-section{font-size:11.5px;color:var(--muted);font-family:var(--f-mono);margin-top:8px;}
.step-intro{font-size:14.5px;color:var(--ink-soft);margin-bottom:22px;}

.fade-in{animation:fade .18s var(--ease);}
@keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){
  .fade-in{animation:none;}
  .progress-bar{transition:none;}
}

/* ---------- cards / fields ---------- */
.card{background:var(--bg);border:1px solid var(--hairline);border-radius:var(--r-card);padding:24px;margin-bottom:20px;}
.card-title{font-size:16px;font-weight:700;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--hairline-2);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;}
.grid-2 > .f{min-width:0;}

.f{margin-bottom:18px;}
.grid-2 > .f{margin-bottom:0;}
.f-label{display:block;font-size:13.5px;font-weight:500;color:var(--ink);margin-bottom:7px;line-height:1.5;}
.f-en{display:block;font-size:11.5px;color:var(--faint);font-weight:400;letter-spacing:.02em;}
.req{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--danger);background:var(--danger-soft);border-radius:var(--r-chip);padding:1px 6px;vertical-align:1px;}
.f-note{font-size:12.5px;color:var(--muted);margin:-3px 0 8px;}
.f input[type=text],.f input[type=email],.f input[type=tel],.f select,.f textarea{
  width:100%;font:inherit;font-size:14.5px;color:var(--ink);background:var(--bg);
  border:1px solid var(--hairline-strong);border-radius:6px;padding:9px 12px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.f textarea{resize:vertical;line-height:1.7;}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.f.has-error input,.f.has-error select,.f.has-error textarea{border-color:var(--danger);}
.f-err{font-size:12.5px;color:var(--danger);margin-top:5px;min-height:0;}
.f-err:empty{display:none;}
.f.is-flash{animation:flash 1.2s var(--ease);border-radius:8px;}
@keyframes flash{0%,100%{background:transparent;}20%{background:var(--warn-soft);}}
@media (prefers-reduced-motion: reduce){.f.is-flash{animation:none;outline:2px solid var(--warn);outline-offset:4px;}}

.radio-row{display:flex;flex-wrap:wrap;gap:8px 10px;}
.radio,.check{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-size:14px;line-height:1.6;}
.radio{border:1px solid var(--hairline-strong);border-radius:999px;padding:6px 14px;transition:border-color .2s,background .2s;}
.radio:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:500;}
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px 14px;}
.check input,.radio input{margin:5px 0 0;accent-color:var(--accent);flex:none;}
.check-single{margin-top:2px;}

.help{margin-top:8px;border-left:2px solid var(--hairline);padding-left:12px;}
.help > summary{font-size:12.5px;color:var(--accent);cursor:pointer;list-style:none;}
.help > summary::-webkit-details-marker{display:none;}
.help > summary::before{content:"› ";}
.help[open] > summary::before{content:"⌄ ";}
.help-body{font-size:12.5px;color:var(--muted);line-height:1.8;padding-top:6px;}
.help-body p+p{margin-top:6px;}

.inline-note{font-size:12.5px;color:var(--muted);margin:6px 0;}
.warn-inline{font-size:12.5px;color:var(--warn);background:var(--warn-soft);border-radius:6px;padding:8px 12px;margin-top:10px;}
/* Informational note (not a warning) — e.g. "product detail is not needed here". */
.note-inline{
  font-size:13px;color:var(--ink-soft);background:var(--accent-soft);
  border-left:3px solid var(--accent);border-radius:0 6px 6px 0;
  padding:10px 14px;margin:-8px 0 22px;line-height:1.7;
}
.rv-note{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.7;}
.std-note{font-size:13px;color:var(--ink-soft);background:var(--bg-soft);border-left:3px solid var(--accent);padding:12px 16px;border-radius:0 6px 6px 0;margin-bottom:22px;}
.notice{background:var(--warn-soft);border:1px solid rgba(138,90,0,.25);border-radius:var(--r-card);padding:18px 20px;}
.notice h4{font-size:14px;margin-bottom:6px;}
.notice p{font-size:13px;color:var(--ink-soft);}
.declaration-text{background:var(--bg);border:1px solid var(--hairline);border-radius:var(--r-card);padding:20px 24px;margin-bottom:20px;font-size:13.5px;color:var(--ink-soft);}

/* ---------- standards ---------- */
.std{background:var(--bg);border:1px solid var(--hairline);border-radius:var(--r-card);padding:18px 22px;margin-bottom:14px;transition:border-color .2s var(--ease);}
.std.is-on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft);}
.std-pick{display:flex;align-items:flex-start;gap:12px;cursor:pointer;}
.std-pick input{margin-top:6px;accent-color:var(--accent);width:17px;height:17px;flex:none;}
.std-pick strong{font-size:15px;display:block;}
.std-ja{font-size:12.5px;color:var(--muted);display:block;}
.std-detail{margin-top:18px;padding-top:18px;border-top:1px solid var(--hairline-2);}
.prior{margin-bottom:16px;}
.prior .f{margin-bottom:4px;}

/* ---------- products ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}
.prod{border:1px solid var(--hairline);border-radius:10px;padding:14px 16px;transition:border-color .2s var(--ease);}
.prod.is-on{border-color:var(--accent);background:var(--accent-soft);}
.prod-pick{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14.5px;}
.prod-pick input{accent-color:var(--accent);width:17px;height:17px;flex:none;}
.prod .f{margin:12px 0 0;}
.prod.is-on .f textarea{background:var(--bg);}

/* ---------- repeating ---------- */
.repeat-list{display:flex;flex-direction:column;gap:16px;}
.repeat-item{background:var(--bg);border:1px solid var(--hairline);border-radius:var(--r-card);padding:20px 22px;}
.repeat-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--hairline-2);}
.repeat-title{font-size:14px;font-weight:700;}
.repeat-actions{margin-left:auto;display:flex;gap:6px;}
.repeat-foot{margin-top:16px;}
.rds-table{margin-top:24px;padding-top:20px;border-top:1px solid var(--hairline);}
.sub-title{font-size:14.5px;font-weight:700;margin-bottom:4px;}

/* ---------- buttons ---------- */
.btn-primary,.btn-line,.btn-ghost{
  display:inline-flex;align-items:center;gap:.5em;cursor:pointer;
  font-size:14px;font-weight:500;border-radius:6px;padding:9px 18px;
  border:1px solid transparent;transition:background .2s,border-color .2s,color .2s;
}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover:not(:disabled){background:var(--accent-deep);}
.btn-line{background:var(--bg);border-color:var(--hairline-strong);}
.btn-line:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.btn-ghost{background:none;padding:6px 12px;font-size:13px;color:var(--muted);}
.btn-ghost:hover:not(:disabled){color:var(--accent);background:var(--bg-soft);}
.btn-ghost.danger:hover:not(:disabled){color:var(--danger);background:var(--danger-soft);}
button:disabled{opacity:.45;cursor:not-allowed;}

/* ---------- footer nav ---------- */
.app-foot{
  position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--hairline);
  padding:14px 40px;display:flex;align-items:center;gap:12px;
}
.foot-spacer{flex:1;}

/* ---------- banners ---------- */
.banner{display:flex;align-items:center;gap:14px;padding:12px 24px;font-size:13.5px;border-bottom:1px solid var(--hairline);}
.banner.info{background:var(--accent-soft);color:var(--accent-deep);}
.banner.warn{background:var(--warn-soft);color:var(--warn);}
.banner button{margin-left:auto;}

/* ---------- review ---------- */
.review{display:flex;flex-direction:column;gap:16px;}
.rv-summary{display:flex;align-items:flex-start;gap:16px;border-radius:var(--r-card);padding:18px 22px;border:1px solid;}
.rv-summary.ok{background:var(--ok-soft);border-color:rgba(27,107,69,.28);}
.rv-summary.bad{background:var(--danger-soft);border-color:rgba(179,38,30,.25);}
.rv-summary p{font-size:13px;color:var(--ink-soft);margin-top:4px;}
.rv-group{background:var(--bg);border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden;}
.rv-group.is-incomplete{border-color:rgba(179,38,30,.35);}
.rv-group.is-attention{border-color:rgba(138,90,0,.35);}
.rv-head{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--hairline-2);background:var(--bg-soft);}
.rv-title{font-size:14.5px;font-weight:700;}
.rv-badge{font-size:11px;font-weight:700;letter-spacing:.06em;border-radius:var(--r-chip);padding:2px 8px;}
.rv-badge.ok{background:var(--ok-soft);color:var(--ok);}
.rv-badge.bad{background:var(--danger-soft);color:var(--danger);}
.rv-badge.warn{background:var(--warn-soft);color:var(--warn);}
.rv-head .btn-ghost{margin-left:auto;}
.rv-dl{display:grid;grid-template-columns:minmax(160px,240px) 1fr;gap:0;padding:4px 20px 14px;}
.rv-dl dt{font-size:12.5px;color:var(--muted);padding:9px 16px 9px 0;border-bottom:1px solid var(--hairline-2);}
.rv-dl dd{font-size:13.5px;color:var(--ink-soft);padding:9px 0;border-bottom:1px solid var(--hairline-2);word-break:break-word;}
.rv-empty{color:var(--faint);}
.rv-sub{font-size:13px;font-weight:700;color:var(--accent);padding:14px 20px 0;}
.rv-missing,.rv-warnlist{padding:8px 12px 12px;display:flex;flex-direction:column;gap:2px;}
.rv-jump{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:8px 12px;border-radius:6px;}
.rv-jump:hover{background:var(--bg-soft);}
.rv-jump-label{font-size:13.5px;font-weight:500;color:var(--accent);}
.rv-jump-msg{font-size:12.5px;color:var(--muted);}
.rv-more{font-size:12.5px;color:var(--muted);padding:6px 12px;}
.rv-gate{background:var(--bg);border:1px solid var(--hairline);border-radius:var(--r-card);padding:22px;}
.rv-gate h3{font-size:15px;margin-bottom:6px;}
.rv-gate p{font-size:13px;color:var(--ink-soft);}
.rv-gate-btns{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0 10px;}

/* ---------- boot failure notice ---------- */
#bootError{max-width:640px;margin:80px auto;padding:28px;background:var(--bg);border:1px solid var(--danger);border-radius:var(--r-card);}
#bootError h2{font-size:18px;margin-bottom:10px;}
#bootError p{font-size:14px;color:var(--ink-soft);margin-bottom:10px;}
#bootError code{font-family:var(--f-mono);font-size:13px;background:var(--bg-soft);padding:2px 6px;border-radius:4px;}

/* ---------- responsive ---------- */
#railToggle{display:none;}
@media (max-width:1024px){
  .app-body{grid-template-columns:1fr;}
  .rail-wrap{
    position:fixed;inset:0 auto 0 0;width:min(320px,86vw);z-index:40;
    transform:translateX(-102%);transition:transform .25s var(--ease);
    box-shadow:0 0 40px -18px rgba(0,0,0,.5);overflow-y:auto;
  }
  body.rail-open .rail-wrap{transform:none;}
  .rail{position:static;padding-top:24px;}
  #railToggle{display:inline-flex;}
  .main-scroll{padding:24px 20px 32px;}
  .app-foot{padding:14px 20px;}
}
@media (prefers-reduced-motion: reduce){.rail-wrap{transition:none;}}
@media (max-width:720px){
  /* keep the header on one line: shorten the draft-action labels, drop the subtitle */
  .lbl-long{display:none;}
  .app-brand span{display:none;}
  .app-actions{gap:4px;}
  .app-actions .btn-ghost{padding:6px 8px;font-size:12.5px;}
  .save-status{flex-basis:100%;text-align:right;}
  .grid-2{grid-template-columns:1fr;}
  .rv-dl{grid-template-columns:1fr;padding:4px 16px 14px;}
  .rv-dl dt{border-bottom:none;padding-bottom:0;}
  .rv-dl dd{padding-top:2px;}
  .app-bar{flex-wrap:wrap;gap:10px;padding:12px 16px;}
  .progress-wrap{padding:0 16px 12px;}
  .step-title{font-size:21px;}
  .app-foot{flex-wrap:wrap;}
}

/* ---------- generation gate ---------- */
.gate-reasons{margin:8px 0 0;padding-left:18px;list-style:disc;}
.gate-reasons li{font-size:12.5px;color:var(--danger);line-height:1.7;}
.gate-reasons:empty{display:none;}

/* ---------- post-download handoff -------------------------------------------
   What the applicant does with the Word file once it is on their machine.
   Sits inside .rv-gate, so it reuses the card's tokens and adds no new colour
   language; the numbers come from a CSS counter to keep the markup a plain
   semantic <ol>.                                                             */
.handoff{
  margin-top:18px;padding-top:16px;
  border-top:1px solid var(--hairline);
}
.handoff h4{font-size:13.5px;margin-bottom:8px;color:var(--ink);}
.handoff>p{font-size:13px;color:var(--ink-soft);line-height:1.85;max-width:76ch;}
.handoff-steps{
  list-style:none;counter-reset:handoff;
  margin:14px 0 12px;display:grid;gap:6px;
}
.handoff-steps li{
  counter-increment:handoff;
  display:flex;align-items:flex-start;gap:10px;
  font-size:13px;line-height:1.6;color:var(--ink-soft);
}
.handoff-steps li::before{
  content:counter(handoff);
  flex:none;width:21px;height:21px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--accent);color:#fff;
  font-family:var(--f-mono);font-size:11px;font-weight:700;
}

/* ---------- 申請後の流れ ----------------------------------------------------
   A collapsible timeline that sits between the app header and the wizard.
   Uses the existing card, hairline and accent tokens — no new design language.
   Numbers come from a CSS counter, so the list stays semantic (<ol>) and the
   markup carries no hard-coded ①②③.                                        */
.flow{
  border-bottom:1px solid var(--hairline);
  background:var(--bg-soft);
}
.flow-summary{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  padding:14px clamp(16px,4vw,40px);
  font-size:14.5px;font-weight:700;color:var(--ink);
  list-style:none;
}
.flow-summary::-webkit-details-marker{display:none;}
.flow-summary::before{
  content:"";width:0;height:0;flex:none;
  border-left:6px solid var(--muted);
  border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;
  transition:transform .2s var(--ease);
}
.flow[open] .flow-summary::before{transform:rotate(90deg);}
.flow-summary:hover{background:var(--accent-soft);}
.flow-title{flex:1;min-width:0;}
.flow-hint{font-size:11.5px;font-weight:400;color:var(--muted);font-family:var(--f-mono);}
.flow-body{padding:0 clamp(16px,4vw,40px) 24px;}
.flow-lead{font-size:14px;color:var(--ink-soft);line-height:1.8;margin-bottom:18px;max-width:78ch;}
.flow-steps{
  list-style:none;counter-reset:flowstep;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:2px 28px;
}
.flow-steps li{
  counter-increment:flowstep;
  position:relative;display:flex;align-items:flex-start;gap:12px;
  padding:9px 0 9px 0;
  font-size:14px;line-height:1.65;color:var(--ink-soft);
}
.flow-steps li::before{
  content:counter(flowstep);
  flex:none;width:24px;height:24px;margin-top:-1px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--accent);color:#fff;
  font-family:var(--f-mono);font-size:11.5px;font-weight:700;
}
.flow-actor{
  display:inline-block;margin-right:6px;padding:1px 7px;border-radius:var(--r-chip,999px);
  background:var(--bg);border:1px solid var(--hairline);
  font-size:11.5px;color:var(--muted);white-space:nowrap;
}
.flow-note{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--hairline-2);
  font-size:13px;color:var(--muted);line-height:1.75;
}
@media (max-width:640px){
  .flow-steps{grid-template-columns:1fr;gap:0;}
  .flow-summary{padding:12px 16px;}
  .flow-body{padding:0 16px 20px;}
}
@media (prefers-reduced-motion: reduce){
  .flow-summary::before{transition:none;}
}