:root{--ink:#132c3b;--line:#d5dde2;--bg:#f4f6f7;--accent:#0b6b5a;--warn:#9a3412}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;overflow-wrap:anywhere;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
/* Header: title and language buttons on the first row, the two links on their own row, everything wraps.
   Nothing overlaps at 320 px in Japanese or English. */
/* Not sticky: a wrapped header would cover too much of a small screen while the keyboard is open. */
.dr-top{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;padding:calc(8px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));background:var(--ink);color:#fff}
.dr-top>strong{order:1;flex:1 1 8em;min-width:0;font-size:17px;line-height:1.3}
.dr-top>.language-switch{order:2;margin-left:auto}
.dr-top>.dr-back{order:3;flex:0 1 auto;min-width:0}
.dr-back{color:#fff;text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center;font-size:15px;line-height:1.3;padding-right:8px}
.dr-main{max-width:760px;margin:0 auto;padding:16px 16px calc(32px + env(safe-area-inset-bottom))}
.dr-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;margin:16px 0}.dr-card h2{font-size:17px;margin:0 0 8px}
.dr-note,.dr-hint{font-size:13px;color:#42545f}.dr-status{min-height:1.6em;font-weight:600;color:var(--accent)}.dr-status.err{color:var(--warn)}
.dr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px;margin:12px 0}.dr-grid>*{min-width:0}
label{display:block;font-size:14px;font-weight:600;min-width:0}.dr-wide{margin:12px 0}.dr-check{display:flex;align-items:center;gap:8px;min-height:44px}
/* Editable controls are 16px or larger. iOS WKWebView zooms the page when a focused field is under 16px and does
   not zoom back afterwards, which pushed labels, values and the back link off screen. The size is set explicitly
   (not inherited from the 14px label) and the person's own pinch zoom stays available: no maximum-scale, no
   user-scalable=no. */
input,select,textarea{display:block;width:100%;max-width:100%;min-width:0;min-height:44px;margin-top:4px;padding:8px 10px;font-family:inherit;font-size:16px;font-weight:400;line-height:1.4;border:1px solid #9fb0ba;border-radius:8px;background:#fff;color:inherit}.dr-check input{width:22px;min-height:22px;margin:0}
button{min-height:44px;max-width:100%;padding:8px 16px;font:inherit;font-size:15px;font-weight:600;white-space:normal;border:1px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink)}.dr-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.dr-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.dr-row{border-top:1px solid var(--line);padding:10px 0;font-size:14px}.dr-row strong{display:block}.dr-row button{min-height:44px;margin:6px 6px 0 0;font-size:14px}
.dr-total{font-size:14px;border-top:2px solid var(--ink);padding-top:8px;margin-top:8px}
textarea{resize:vertical}.dr-check input{display:inline-block;flex:0 0 22px}
.dr-main,.dr-card{min-width:0}.dr-actions>button{flex:1 1 auto}