/* Layout: sticky white header, then a two-column shell: the step list on a paper panel at left, one step at a time at right. Stacks on phones.
   Tokens are taken from the E&M Design System: white page, paper panels, Meridian Navy as the accent, vermilion as the second accent.
   Single light theme by choice: the design system defines no dark theme and the brief asks for a white base. */
:root{
  color-scheme:light;
  --navy-950:#0b1426;--navy-900:#101b33;--navy-800:#14213d;--navy-700:#1f3157;--navy-300:#9aa6bf;--navy-100:#dfe3ec;--navy-50:#f1f3f7;
  --vermilion-50:#fcf0ec;--vermilion-100:#f8ddd5;--vermilion-500:#c8472b;--vermilion-600:#ad3b22;--vermilion-700:#8f301c;
  --paper:#fbfaf7;--stone-50:#f5f4f0;--stone-100:#ebe9e3;--stone-200:#d9d6ce;--stone-300:#bfbbb1;--stone-500:#827e75;--stone-600:#6b675f;--stone-800:#36332e;--white:#ffffff;
  --success-600:#2f7a4b;--success-50:#edf6f0;--danger-600:#b3261e;--danger-50:#fbeeed;
  --surface-page:var(--white);--surface-soft:var(--paper);--surface-card:var(--white);
  --text-primary:var(--navy-900);--text-body:var(--stone-800);--text-secondary:var(--stone-600);--text-link:var(--vermilion-600);--text-link-hover:var(--vermilion-700);
  --border-hairline:var(--stone-200);--border-subtle:var(--stone-100);
  --font-sans:'IBM Plex Sans','IBM Plex Sans JP','Hiragino Sans','Yu Gothic',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --radius-control:999px;--radius-card:20px;--radius-tile:16px;
  --shadow-card:0 1px 2px rgba(11,20,38,.04),0 8px 24px rgba(11,20,38,.05);
  --shadow-button:0 8px 20px rgba(20,33,61,.18);--shadow-3:0 20px 48px rgba(11,20,38,.12);
  --halo:0 0 0 3px rgba(200,71,43,.16);--focus-ring:0 0 0 2px var(--white),0 0 0 4px var(--vermilion-500);
  --ease:cubic-bezier(.2,0,0,1);--dur:200ms;--header-h:72px;
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:15px;line-height:1.85}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--white)}
:lang(ja){line-break:strict;overflow-wrap:anywhere}
::selection{background:var(--vermilion-100);color:var(--navy-900)}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--border-subtle)}
.top-in{max-width:1200px;margin:0 auto;min-height:var(--header-h);padding-block:12px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px}
.logo{display:block;width:89px;height:40px;flex:none}
.app-name{display:flex;flex-direction:column;gap:1px;line-height:1.4;padding-left:20px;border-left:1px solid var(--border-hairline)}
.app-name b{font-size:15px;font-weight:700;color:var(--text-primary)}
.app-name small{font-size:11px;color:var(--text-secondary)}
.proto{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:26px;padding:3px 12px;border-radius:999px;background:var(--vermilion-50);color:var(--vermilion-700);font-size:12px;font-weight:600;letter-spacing:.04em;line-height:1.4}
.proto::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--vermilion-500);flex:none}
@media (max-width:640px){.proto{margin-left:0}.app-name{padding-left:14px}.app-name small{display:none}}

/* fields */
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field>label,.field>.lbl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;font-weight:500;line-height:1.5;color:var(--text-primary)}
.req,.law{display:inline-flex;align-items:center;height:18px;border-radius:999px;font-size:11px;font-weight:600;line-height:1}
.req{padding:0 7px;background:var(--navy-800);color:var(--white);letter-spacing:.04em}
.law{padding:0 8px;background:var(--vermilion-50);color:var(--vermilion-700);letter-spacing:.02em}
.help{margin:0;font-size:12px;line-height:1.65;color:var(--text-secondary)}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{width:100%;min-width:0;font:inherit;font-size:15px;color:var(--text-primary);background-color:var(--white);border:1px solid var(--border-hairline);border-radius:var(--radius-control);outline:none;transition:border-color var(--dur),box-shadow var(--dur)}
input[type=text],input[type=email],input[type=tel],input[type=number],select{height:48px;padding:0 18px}
textarea{min-height:96px;padding:12px 16px;border-radius:var(--radius-tile);line-height:1.75;resize:vertical}
select{-webkit-appearance:none;appearance:none;padding-right:44px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b675f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:16px}
::placeholder{color:var(--stone-500);opacity:1}
input:hover,select:hover,textarea:hover{border-color:var(--stone-300)}
input:focus,select:focus,textarea:focus{border-color:var(--vermilion-500);box-shadow:var(--halo)}
input[type=file]{font:inherit;font-size:14px;color:var(--text-secondary);max-width:100%}
input[type=file]::file-selector-button{font:inherit;font-size:14px;font-weight:600;height:40px;padding:0 18px;margin-right:12px;border-radius:999px;border:1.5px solid var(--navy-100);background:var(--white);color:var(--navy-800);cursor:pointer}
input[type=file]:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:999px}
.invalid input,.invalid select,.invalid textarea,.invalid .opts label{border-color:var(--danger-600)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 16px 6px 12px;border:1px solid var(--border-hairline);border-radius:999px;background:var(--white);font-size:14px;line-height:1.5;color:var(--text-body);cursor:pointer;transition:border-color var(--dur),background var(--dur)}
.opts label:hover{border-color:var(--stone-300)}
.opts label:has(input:checked){border-color:var(--navy-800);background:var(--navy-50);color:var(--text-primary);font-weight:500}
.opts label:has(input:focus-visible){box-shadow:var(--focus-ring)}
.opts input{flex:none;margin:0;width:16px;height:16px;accent-color:var(--navy-800)}
.opts.blk label{border-radius:var(--radius-tile);padding:12px 16px;align-items:flex-start}
.opts.blk input{margin-top:4px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.fixrow{display:flex;flex-direction:column;gap:10px}
.fixv{display:flex;align-items:center;min-height:48px;padding:10px 18px;border-radius:var(--radius-tile);background:var(--stone-50);border:1px solid var(--border-subtle);font-size:15px;font-weight:500;line-height:1.5;color:var(--text-primary)}
@media (max-width:600px){.row2{grid-template-columns:minmax(0,1fr)}}

/* actions */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 28px;border-radius:999px;border:1.5px solid var(--navy-100);background:var(--white);color:var(--navy-800);font:inherit;font-size:15px;font-weight:600;letter-spacing:.02em;line-height:1;white-space:nowrap;cursor:pointer;transition:background var(--dur) var(--ease),border-color var(--dur),transform var(--dur) var(--ease),color var(--dur)}
.btn:hover{border-color:var(--navy-300);transform:translateY(-2px)}
.btn:active{transform:none}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.btn.primary{background:var(--navy-800);border-color:transparent;color:var(--white);box-shadow:var(--shadow-button)}
.btn.primary:hover{background:var(--navy-700)}
.btn.primary:focus-visible{box-shadow:var(--shadow-button),var(--focus-ring)}
.btn.accent{background:var(--vermilion-600);border-color:transparent;color:var(--white)}
.btn.accent:hover{background:var(--vermilion-700)}
.btn.ghost{border-color:transparent;background:none;padding:0 12px}
.btn.ghost:hover{transform:none;color:var(--vermilion-600)}
.btn svg.i{width:17px;height:17px;transition:transform var(--dur) var(--ease)}
.btn:hover svg.r{transform:translateX(3px)}
.spacer{flex:1}
.saved{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary)}
@media (max-width:560px){.btn{height:48px;padding:0 20px}.btn.ghost{padding:0 8px}}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:20;max-width:calc(100% - 32px);padding:12px 22px;border-radius:999px;background:var(--navy-800);color:var(--white);font-size:14px;line-height:1.5;box-shadow:var(--shadow-3)}


/* signed-in user (replaces the prototype badge) */
.me{margin-left:auto;display:inline-flex;align-items:center;gap:10px;font-size:12px;color:var(--text-secondary);line-height:1.4}
.me b{color:var(--text-primary);font-weight:600}
.me button{font:inherit;font-size:12px;color:var(--text-link);background:none;border:0;padding:4px 2px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.me button:hover{color:var(--text-link-hover)}
.me button:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:4px}
.stage{display:inline-flex;align-items:center;min-height:22px;padding:2px 10px;border-radius:999px;background:var(--vermilion-50);color:var(--vermilion-700);font-size:11px;font-weight:600;letter-spacing:.04em}
@media (max-width:640px){.me{margin-left:0}}
.err{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:var(--danger-50);color:var(--danger-600);font-size:13px;line-height:1.6}
.loading{padding:48px 16px;text-align:center;color:var(--text-secondary)}