/* Kokuin — tokens and base components (docs/design-v2/UI-REFRESH.md §3–§5).
   The contract's paper, ink and one 朱 seal: white paper, ink-black type and controls, hairlines instead
   of shadows, and the seal red only for the mark, the stamp and the completed state.
   Written one rule per line: test/client-source.test.ts reads some rules verbatim ("selector{decls}").
   The component gallery at /dev/ui (development only) shows every class below in every state. */
:root{
--paper:#FFFFFF;--ground:#F5F5F3;--ink:#1E2229;--ink-2:#3A404A;--muted:#666C76;--line:#E4E5E7;--line-2:#C8CBD0;
--seal:#C53D2F;--seal-tint:#FBEEEC;--seal-line:#F0D2CD;--focus:#2F5BA8;--focus-tint:#EBF0F8;--danger:#A1262F;--danger-tint:#F8EBEC;--ok:#2F6B4F;--ok-tint:#EAF2ED;--warn:#9A6A12;--warn-tint:#F7F0E3;
--s1:#2F5BA8;--s2:#2F6B4F;--s3:#9A6A12;--s4:#6B4E9B;--s5:#9E3D5C;
--ink-hover:#353A43;--line-hover:#ADB1B8;--placeholder:#72777F;--row-hover:#FAFAF8;--ring:0 0 0 3px rgba(47,91,168,.25);
--sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Noto Sans CJK JP","Yu Gothic UI","Yu Gothic",Meiryo,system-ui,sans-serif;
--mincho:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Noto Serif CJK JP","BIZ UDPMincho",serif;
--mono:ui-monospace,"SF Mono",Menlo,Consolas,"IBM Plex Mono",monospace;
--r-control:8px;--r-card:12px;--r-chip:999px;
--float:0 16px 40px rgba(30,34,41,.14),0 2px 6px rgba(30,34,41,.06);
--container:1120px;--gutter:32px;--top-h:64px;--bar-h:69px;
/* Names from the first palette, kept so existing markup and inline styles keep working. */
--white:#FFFFFF;--tint:var(--ground);--ink2:var(--ink-2);--line2:var(--line-2);
--b50:var(--ground);--b100:var(--line);--b300:var(--line-2);--b600:var(--ink);--b700:var(--ink-hover);
--okbg:var(--ok-tint);--okink:var(--ok);--warnbg:var(--warn-tint);--warnink:#6B4A0D;--dangerbg:var(--danger-tint);--dangerink:var(--danger);
--r1:8px;--r2:12px;--sh1:none;--sh2:var(--float);--sh3:var(--float)}
/* One width system: the layout puts a width class on <body>, and the header, main and footer all read it. */
.w-wide{--container:1280px}.w-narrow{--container:624px}.w-reading{--container:784px}

/* Base */
*,*::before,*::after{box-sizing:border-box}html,body{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:16px;line-height:1.8;line-break:strict;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
body.shell-app{font-size:15px;line-height:1.7}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--focus)}
img,svg{max-width:100%}
p{margin:0 0 1em}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--seal-tint);color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0}.skip:focus{left:16px;top:10px;z-index:100;background:var(--paper);color:var(--ink);padding:10px 16px;border:1px solid var(--ink);border-radius:var(--r-control);text-decoration:none;font-weight:600}
[hidden]{display:none!important}

/* Type: Gothic is Kokuin's interface; Mincho is the contract's own words (document titles, marketing display). */
h1,h2,h3,h4{font-feature-settings:"palt";letter-spacing:.02em;text-wrap:balance}
h1{font-size:28px;line-height:1.4;margin:0 0 8px;font-weight:700}
h2{font-size:18px;line-height:1.5;margin:0 0 16px;font-weight:700}
h3{font-size:16px;line-height:1.6;margin:0 0 8px;font-weight:700}
h4{font-size:15px;line-height:1.6;margin:0 0 8px;font-weight:700}
p,li,dd{text-wrap:pretty}
@supports (word-break:auto-phrase){h1,h2,h3,h4,.lead,label,.lbl,.hint,.badge,.btn,.steps li,.eyebrow,.alert,.doc-title,.mincho,.display,table.list .t,table.list .sub,.people .who b,.empty{word-break:auto-phrase}}
.mincho,.doc-title{font-family:var(--mincho);font-weight:600;font-feature-settings:"palt";letter-spacing:.03em}
.doc-title{overflow-wrap:break-word}
.display{font-family:var(--mincho);font-weight:600;font-size:36px;line-height:1.35;letter-spacing:.04em}
.lead{color:var(--muted);margin:0 0 32px;font-size:15px}
.muted{color:var(--muted)}.small{font-size:13px}.xs{font-size:12px}
.ink2{color:var(--ink-2)}
.num,.tnum{font-variant-numeric:tabular-nums}
.num{text-align:right}
/* Eyebrows are plain supporting text now: no capitals, no tracking, no accent colour. */
.eyebrow{font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);margin:0 0 8px}
.nocase{text-transform:none}/* the product name is written "Kokuin", never upper-cased */
.mono{font-family:var(--mono);font-size:13px;overflow-wrap:anywhere;font-variant-ligatures:none}
.email,.break-any{overflow-wrap:anywhere}
.nowrap{white-space:nowrap}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* Header */
.top{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line);position:relative;z-index:30}
.top-in{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter);height:var(--top-h);display:flex;align-items:center;gap:16px}
/* The wordmark alone (views/mark.tsx), 22 px tall. Its baseline is 20/770 of the height above the box's
   bottom, so centring the box would set it ~5 px under the nav's baseline: the nudge puts it on it. */
.brand{display:inline-flex;align-items:center;color:var(--ink);text-decoration:none;min-height:44px;flex:none}
.brand:hover{color:var(--ink)}
.brand svg{display:block;height:22px;width:auto;flex:none;transform:translateY(var(--brand-nudge,-5px))}
.plan{display:inline-flex;align-items:center;font-size:12px;font-weight:500;color:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--r-chip);padding:0 10px;line-height:22px;white-space:nowrap;text-decoration:none;font-feature-settings:"palt"}
.plan:hover{color:var(--ink);border-color:var(--ink)}
.nav{margin-left:auto;display:flex;gap:4px;align-items:center;align-self:stretch}
.nav a{position:relative;color:var(--ink);text-decoration:none;font-size:14px;font-weight:500;font-feature-settings:"palt";min-width:44px;padding:0 12px;display:flex;align-items:center;justify-content:center;align-self:stretch}
.nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:transparent}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{background:var(--line-2)}
.nav a[aria-current]{font-weight:700}
.nav a[aria-current]::after{background:var(--ink)}
.nav a:focus-visible{outline-offset:-6px;border-radius:10px}
.nav .nav-cta{align-self:center;min-height:36px;margin-left:8px;padding:0 14px;border-radius:var(--r-control);background:var(--ink);color:#fff;font-weight:600}
.nav .nav-cta::after{display:none}
.nav .nav-cta:hover{background:var(--ink-hover);color:#fff}
.nav .nav-cta:focus-visible{outline-offset:2px}
.nav .nav-plan{display:none}
.tagline{margin-left:auto;font-size:13px;color:var(--muted);white-space:nowrap}
.menu-btn{display:none;margin-left:auto;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line-2);color:var(--ink);border-radius:var(--r-control);min-height:44px;min-width:44px;padding:0 14px;font-size:14px;font-weight:500;cursor:pointer;font-feature-settings:"palt"}
.menu-btn:hover{border-color:var(--ink)}
.menu-ic{position:relative;width:16px;height:10px;flex:none}
.menu-ic i{position:absolute;left:0;right:0;height:1.5px;border-radius:1px;background:currentColor;transition:transform .16s,top .16s}
.menu-ic i:first-child{top:1px}.menu-ic i:last-child{top:7.5px}
.menu-btn[aria-expanded=true] .menu-ic i:first-child{top:4.25px;transform:rotate(45deg)}
.menu-btn[aria-expanded=true] .menu-ic i:last-child{top:4.25px;transform:rotate(-45deg)}

/* Page container */
main{width:100%;max-width:var(--container);margin:0 auto;padding:40px var(--gutter) 96px;flex:1}
main.wide{max-width:max(var(--container),1280px)}
main.flush{max-width:none;padding:0}
.page{flex:1}
.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start}
.grid>*{min-width:0}
.grid>.card+.card{margin-top:0}
.narrow{max-width:480px;margin:0 auto}
.mid{max-width:760px;margin:0 auto}
.column{max-width:560px;margin:0 auto}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:32px}
.page-head>*{min-width:0}
.page-head h1{margin:0}
.page-head .lead{margin:4px 0 0}
.page-actions,.btn-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.page-actions>form,.btn-row>form,.actions>form{display:flex;margin:0}
.stack>*+*{margin-top:16px}
.hr{border:0;border-top:1px solid var(--line);margin:32px 0}
form{margin:0}

/* Cards are for separate objects only; sections inside a page are separated by space and a hairline. */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;min-width:0}
.card+.card{margin-top:24px}
.card.tight{padding:20px}
.card>h2:first-child,.card>h3:first-child{margin-top:0}
.sect{padding:32px 0;border-top:1px solid var(--line)}
.sect:first-child{border-top:0;padding-top:0}
.sect-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-bottom:16px}
.sect-head h2{margin:0}
.sec{border-top:1px solid var(--line);margin-top:32px;padding-top:32px}

/* Forms */
.field{margin-bottom:24px;min-width:0}
label,.lbl{display:block;font-size:14px;font-weight:600;line-height:1.5;margin-bottom:8px;color:var(--ink);font-feature-settings:"palt"}
.opt{font-weight:400;color:var(--muted);font-size:12px;margin-left:6px}
.hint{display:block;font-size:13px;color:var(--muted);margin-top:8px;line-height:1.6}
.err-text{display:block;font-size:13px;font-weight:500;color:var(--danger);margin-top:8px;line-height:1.6}
input[type=text],input[type=email],input[type=date],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=url],select,textarea{width:100%;min-height:48px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-control);font:inherit;font-size:16px;line-height:1.5;color:var(--ink);background:var(--paper);transition:border-color .12s,box-shadow .12s}
input[type=date]{padding-right:10px}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666C76' stroke-width='2' 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 14px center;padding-right:40px}
textarea{padding:12px 14px;min-height:112px;resize:vertical;line-height:1.7}
input::placeholder,textarea::placeholder{color:var(--placeholder);opacity:1}
input:hover,select:hover,textarea:hover{border-color:var(--line-hover)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:var(--ring)}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--danger)}
input[aria-invalid=true]:focus,textarea[aria-invalid=true]:focus{box-shadow:0 0 0 3px rgba(161,38,47,.2)}
input:disabled,select:disabled,textarea:disabled{background:var(--ground);color:var(--muted);border-color:var(--line);cursor:not-allowed}
input[readonly]{background:var(--ground)}
input[type=checkbox],input[type=radio]{accent-color:var(--ink)}
.row{display:grid;gap:16px;grid-template-columns:repeat(var(--c,2),minmax(0,1fr))}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:10px;padding:3px;background:var(--paper);gap:2px;flex-wrap:wrap;max-width:100%}
.seg label{margin:0;font-weight:500;font-size:14px;cursor:pointer;position:relative}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:flex;align-items:center;min-height:40px;padding:0 16px;border-radius:7px;color:var(--ink-2)}
.seg label:hover span{background:var(--ground)}
.seg input:checked+span{background:var(--ink);color:#fff;font-weight:600}
.seg input:focus-visible+span{outline:2px solid var(--focus);outline-offset:1px}
.check{display:flex;gap:12px;align-items:flex-start;min-height:44px;font-size:15px;font-weight:500;line-height:1.6;padding:10px 0;margin:0;cursor:pointer;font-feature-settings:normal}
.check input{width:20px;height:20px;accent-color:var(--ink);flex:none;margin:2px 0 0}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0;font-size:14px;font-weight:600;margin-bottom:8px}

/* Buttons: one height per size, so every button in a row lines up (forms wrapping a button included). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--r-control);font:inherit;font-size:15px;font-weight:600;line-height:1.3;letter-spacing:.02em;font-feature-settings:"palt";border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;vertical-align:middle;-webkit-tap-highlight-color:transparent;transition:background-color .12s,border-color .12s,color .12s}
.btn svg{flex:none}
.btn-p,.btn-dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-p:hover,.btn-dark:hover{background:var(--ink-hover);border-color:var(--ink-hover);color:#fff}
.btn-p:active,.btn-dark:active{background:#0F1217}
.btn-s{background:var(--paper);color:var(--ink);border-color:var(--line-2)}
.btn-s:hover{background:var(--ground);border-color:var(--line-hover);color:var(--ink)}
.btn-g{background:transparent;color:var(--ink);padding:0 12px}
.btn-g:hover{background:var(--ground);color:var(--ink)}
.btn-d{background:var(--paper);color:var(--danger);border-color:var(--danger)}
.btn-d:hover{background:var(--danger-tint);color:var(--danger)}
.btn-sm{min-height:36px;padding:0 14px;font-size:14px;gap:6px}
.btn-lg{min-height:52px;padding:0 28px;font-size:16px}
.btn-block{width:100%}
.btn:disabled,.btn[aria-disabled=true]{cursor:not-allowed;background:var(--ground);border-color:var(--line);color:var(--muted)}
.btn-g:disabled,.btn-g[aria-disabled=true]{background:transparent;border-color:transparent}
/* Busy (setBusy in src/client/lib.ts: disabled + aria-busy + a spinner): keeps its colours, unlike disabled. */
.btn[aria-busy=true]{cursor:progress}
.btn-p[aria-busy=true],.btn-dark[aria-busy=true]{background:var(--ink-2);border-color:var(--ink-2);color:#fff}
.btn-s[aria-busy=true]{background:var(--paper);border-color:var(--line-2);color:var(--ink)}
.btn-g[aria-busy=true]{color:var(--ink)}
.btn-d[aria-busy=true]{background:var(--paper);border-color:var(--danger);color:var(--danger)}
.spin{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;display:inline-block;flex:none;opacity:.85}
@keyframes spin{to{transform:rotate(360deg)}}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:.22em;cursor:pointer}
.linkish:hover{color:var(--focus)}
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:32px}
.actions.between{justify-content:space-between}

/* Steps: a thin line with labels; the current step is ink, finished steps carry a small check. */
.steps{list-style:none;margin:0 0 40px;padding:0;display:flex;gap:4px}
.steps li{flex:1;min-width:0;display:flex;align-items:center;gap:6px;font-size:13px;line-height:1.4;color:var(--muted);padding-top:10px;border-top:2px solid var(--line);font-feature-settings:"palt"}
.steps .n{display:none}
.steps .done{color:var(--ink-2);border-top-color:var(--ink)}
.steps .done .n{display:inline-flex;color:var(--ink)}
.steps .cur{color:var(--ink);font-weight:600;border-top-color:var(--ink)}

/* Upload */
.drop{border:1.5px dashed var(--line-2);border-radius:var(--r-card);background:var(--paper);padding:48px 24px;text-align:center;transition:border-color .12s,background-color .12s}
.drop.over{border-color:var(--ink);background:var(--ground)}
.drop .ic{width:48px;height:48px;display:grid;place-items:center;margin:0 auto 12px;color:var(--ink-2)}
.file{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:var(--r-card);padding:14px 16px;background:var(--paper);min-width:0}
.file .ic{width:36px;height:36px;display:grid;place-items:center;flex:none;color:var(--ink-2);background:var(--ground);border-radius:var(--r-control)}
.file>div{min-width:0;flex:1}
.file b{display:block;font-size:14px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.file small{display:block;color:var(--muted);font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.file .ok{margin-left:auto;color:var(--ok);font-size:14px;font-weight:600;display:flex;gap:4px;align-items:center}
.file .btn{flex:none}
.progress{height:4px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:12px}
.progress>i{display:block;height:100%;background:var(--ink);width:0;transition:width .2s}

/* Alerts and notes: a 3 px bar in the alert's colour on the ground tone, never a full tinted box. */
.alert{--bar:var(--ink-2);display:flex;gap:12px;padding:14px 16px 14px 15px;border:0;border-left:3px solid var(--bar);border-radius:0 var(--r-control) var(--r-control) 0;background:var(--ground);color:var(--ink);font-size:14px;line-height:1.7;margin-bottom:16px}
.alert svg{flex:none;margin-top:3px;color:var(--bar)}
.alert>div{min-width:0}
.alert p{margin:0}.alert p+p{margin-top:6px}
.alert a{color:var(--ink)}
.a-info{--bar:var(--ink-2)}
.a-ok{--bar:var(--ok)}
.a-warn{--bar:var(--warn)}
.a-err{--bar:var(--danger)}
.a-err>div>b:first-child,.a-warn>div>b:first-child{display:block}
.side h3{font-size:13px;font-weight:600;line-height:1.6;color:var(--ink-2);margin:0 0 6px}
/* The standing notes: a short muted list, like the signer pages' note (no icons, no tinted box). */
.notes{list-style:none;padding:0;margin:0;display:grid;gap:4px;font-size:13px;line-height:1.7;color:var(--muted)}
.notes li{position:relative;padding-left:14px}
.notes li::before{content:"";position:absolute;left:2px;top:.78em;width:4px;height:4px;border-radius:50%;background:var(--line-2)}
.notes svg{display:none}
.saved{color:var(--ok);font-size:13px;font-weight:600}

/* Status chips. 完了 is the one place the seal colour marks state: seal text on seal tint with a tiny seal (the solid square turned 6°). */
.badge,.chip{--dot:var(--muted);display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;line-height:1.5;min-height:24px;padding:1px 10px;border-radius:var(--r-chip);white-space:nowrap;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);font-feature-settings:"palt";font-variant-numeric:tabular-nums;max-width:100%;vertical-align:middle}
.badge::before,.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dot);flex:none}
.st-draft{background:var(--ground);border-color:var(--ground);color:var(--ink-2);--dot:#9A9EA5}
.st-sent{color:var(--ink);--dot:var(--focus)}
.st-completed{background:var(--seal-tint);border-color:var(--seal-line);color:var(--seal)}
.st-completed::before{width:7px;height:7px;border-radius:0;background:var(--seal);transform:rotate(6deg)}
.st-declined,.st-expired,.st-voided{color:var(--muted)}
.st-declined::before,.st-expired::before,.st-voided::before{width:8px;height:8px;background:linear-gradient(45deg,transparent calc(50% - .75px),currentColor calc(50% - .75px),currentColor calc(50% + .75px),transparent calc(50% + .75px));border:1.25px solid currentColor}

/* Tables (the dashboard): no outer card, a hairline under each row, 56 px rows. */
.table-wrap{overflow-x:auto;background:var(--paper)}
table.list{width:100%;border-collapse:collapse;font-size:14px}
table.list th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;padding:10px 12px;border-bottom:1px solid var(--line-2);white-space:nowrap;font-feature-settings:"palt"}
table.list td{padding:12px;height:56px;border-bottom:1px solid var(--line);vertical-align:middle;font-variant-numeric:tabular-nums}
/* The title column takes the slack; counts, dates and amounts stay on one line. Text starts at the page edge. */
table.list td:not(:first-child){white-space:nowrap}
table.list th:first-child,table.list td:first-child{padding-left:0}
table.list th:last-child,table.list td:last-child{padding-right:0}
table.list tr.rowlink{cursor:pointer}
table.list tr.rowlink:hover td{background:var(--row-hover)}
table.list tr.rowlink:hover .t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
table.list .t{font-family:var(--mincho);font-size:16px;font-weight:600;letter-spacing:.02em;color:var(--ink);text-decoration:none;overflow-wrap:break-word}
table.list .t:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
table.list .sub{display:block;font-size:13px;color:var(--muted);line-height:1.6;margin-top:2px}
table.list th.num{text-align:right}
.empty{text-align:center;padding:64px 24px;color:var(--muted)}
.empty .ic{width:48px;height:48px;display:grid;place-items:center;margin:0 auto 12px;color:var(--muted)}
.empty h2,.empty h3{color:var(--ink);margin-bottom:4px}
.empty p{margin:0 0 20px}
.filters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) auto;gap:12px;align-items:end;margin-bottom:24px}
.filters .field{margin:0}
.filters label{font-size:12px;margin-bottom:4px;color:var(--ink-2)}
.filters input,.filters select{min-height:40px;font-size:14px;padding:0 12px}
.filters select{padding-right:36px;background-position:right 10px center}
.filters .btn{min-height:40px}
.meter{display:flex;align-items:center;gap:12px;font-size:13px}
.meter .bar{flex:1;height:4px;border-radius:2px;background:var(--line);overflow:hidden;min-width:96px}
.meter .bar i{display:block;height:100%;background:var(--ink)}
.meter.full .bar i{background:var(--warn)}
.stats{display:flex;flex-wrap:wrap;gap:16px 48px;margin-bottom:32px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{min-width:0}
.stat b{display:inline-block;font-size:22px;line-height:1.3;font-weight:700;font-variant-numeric:tabular-nums;margin-right:6px}
.stat span{font-size:13px;color:var(--muted)}
.stat .meter{margin-top:8px}

/* List mode: at < 760 px a table.list.to-list becomes one block per row: the title with its status chip
   (mark that cell td.cell-chip), then the other cells as one line of meta; td[data-label] cells print
   their label first, and .hide-m cells drop out. */
@media (max-width:759px){
 .table-wrap:has(>table.to-list){overflow:visible}
 table.to-list,table.to-list tbody{display:block;width:100%}
 table.to-list thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
 table.to-list tr{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px 16px;padding:16px 0;border-bottom:1px solid var(--line)}
 table.to-list tr:first-child{border-top:1px solid var(--line-2)}
 table.to-list td{display:block;height:auto;padding:0;border:0;font-size:13px;line-height:1.6;color:var(--muted);text-align:left;white-space:nowrap;order:2}
 table.to-list td:first-child{order:0;flex:1 1 calc(100% - 112px);min-width:0;white-space:normal;color:var(--ink);font-size:14px;margin-bottom:4px}
 table.to-list td.cell-chip{order:1;flex:none;margin-left:auto}
 table.to-list td[data-label]::before{content:attr(data-label) " ";color:var(--muted)}
 table.to-list td[data-label]{color:var(--ink-2)}
 table.to-list tr.rowlink:hover td{background:none}
 table.list .hide-m{display:none}
}

/* Detail page */
dl.meta{display:grid;grid-template-columns:160px minmax(0,1fr);margin:0;font-size:14px}
dl.meta dt,dl.meta dd{padding:12px 0;border-bottom:1px solid var(--line);margin:0}
dl.meta dt{color:var(--muted);padding-right:16px}
dl.meta dd{font-weight:500;overflow-wrap:break-word;min-width:0}
.people{list-style:none;margin:0;padding:0;display:grid}
.people li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:14px 0;border-bottom:1px solid var(--line);min-width:0}
.people>li:first-child:not(.cc-row){border-top:1px solid var(--line)}
.people .who{min-width:0;flex:1 1 220px}
.people .who b{display:block;font-size:15px;font-weight:600;line-height:1.5}
.people .who small{display:block;color:var(--muted);font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.people li>.badge,.people li>form,.people li>.btn{flex:none}
.dotn{width:28px;height:28px;border-radius:50%;color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;flex:none;font-variant-numeric:tabular-nums}
.sw-dot{width:10px;height:10px;border-radius:50%;background:var(--sc,var(--s1));flex:none;display:inline-block}
.timeline{list-style:none;margin:0;padding:0;font-size:13px}
.timeline li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.timeline li:last-child{border-bottom:0}
.timeline time{color:var(--muted);font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums}
.hash{font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--ink-2);background:var(--ground);border-radius:6px;padding:8px 10px;overflow-wrap:anywhere;display:block;font-variant-ligatures:none}

/* Signers editor */
.signer{border:1px solid var(--line);border-left:3px solid var(--sc,var(--s1));border-radius:var(--r-card);padding:24px 20px 4px;background:var(--paper);position:relative;min-width:0}
.signer+.signer{margin-top:24px}
.signer .num{position:absolute;top:-12px;left:16px;background:var(--sc,var(--ink));color:#fff;font-size:12px;font-weight:600;border-radius:var(--r-chip);padding:0 10px;line-height:24px;text-align:left}
.signer .rm{position:absolute;top:8px;right:8px}

/* Field placement */
.editor{display:grid;grid-template-columns:360px minmax(0,1fr);gap:32px;align-items:start}
.editor>*{min-width:0}
.tools{position:sticky;top:16px;display:grid;gap:16px;max-height:calc(100vh - 32px - var(--bar-h));overflow-y:auto;overscroll-behavior:contain;padding-bottom:4px}
.tools .card{padding:20px}
.who-pick{display:grid;gap:8px}
.who-pick button{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--paper);font:inherit;font-size:14px;text-align:left;cursor:pointer;color:var(--ink);min-width:0}
.who-pick button:hover{border-color:var(--line-hover)}
.who-pick button[aria-pressed=true]{border-color:var(--sc);box-shadow:inset 0 0 0 1px var(--sc);background:color-mix(in srgb,var(--sc) 6%,#fff)}
.who-pick .sw{width:12px;height:12px;border-radius:50%;background:var(--sc);flex:none}
.who-pick small{display:block;color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.ftype{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ftype button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;border:1px solid var(--line-2);border-radius:var(--r-control);background:var(--paper);font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:grab}
.ftype button:hover{border-color:var(--ink);background:var(--ground)}
.ftype button[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:#fff}
.pages{display:grid;gap:32px;justify-items:center;background:var(--ground);border-radius:var(--r-card);padding:24px;min-height:400px}
.pagewrap{position:relative;background:#fff;box-shadow:0 0 0 1px var(--line),0 1px 3px rgba(30,34,41,.06);max-width:100%;touch-action:pan-x pan-y pinch-zoom}
.pagewrap .pfail{position:absolute;inset:0;z-index:4;display:grid;place-content:center;justify-items:center;gap:8px;padding:16px;background:rgba(255,255,255,.95);text-align:center;font-size:14px;color:var(--ink)}
.pagewrap .pfail p{margin:0}
.pagewrap canvas{display:block;width:100%;height:auto}
.pagewrap .pno{position:absolute;bottom:-24px;left:0;right:0;text-align:center;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.layer{position:absolute;inset:0}
.placing .layer{cursor:crosshair}
.fld{position:absolute;border:2px solid var(--sc,var(--s1));background:rgba(255,255,255,.35);background:color-mix(in srgb,var(--sc,var(--s1)) 10%,transparent);border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--sc,var(--s1));user-select:none;-webkit-user-select:none;touch-action:none;overflow:hidden;line-height:1.2;text-align:center}
.fld.sel{overflow:visible;box-shadow:0 0 0 3px color-mix(in srgb,var(--sc,var(--s1)) 28%,transparent)}
.fld .del{position:absolute;top:-1px;right:-1px;width:22px;height:22px;border:0;border-radius:0 2px 0 6px;background:var(--sc,var(--s1));color:#fff;font-size:14px;line-height:22px;cursor:pointer;padding:0;display:none}
.fld .del::before{content:"";position:absolute;inset:-6px}
.fld.sel .del,.fld:hover .del{display:block}
/* The resize handle: 12 px to see, 24 px to hit (28 px on touch screens). */
.fld .rs{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;background:var(--sc,var(--s1));cursor:nwse-resize;border-radius:3px 0 2px 0}
.fld .rs::before{content:"";position:absolute;right:-6px;bottom:-6px;width:24px;height:24px}
.fld[data-editable=false]{cursor:default}
.fld.filled{border-style:solid;background:rgba(255,255,255,.6)}
.fld.filled img{max-width:100%;max-height:100%;object-fit:contain}
.fld.todo{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--sc,var(--s1)) 22%,transparent)}}
.fld.other{border-style:dashed;opacity:.5}
.fld.fld-check{overflow:visible;cursor:pointer}
.fld.fld-check::after{content:"";position:absolute;inset:-14px}
.fld input[type=text]{position:absolute;inset:0;width:100%;height:100%;min-height:0;border:0;background:transparent;padding:0 4px;font-size:12px;border-radius:0}
.fld input[type=checkbox]{width:70%;height:70%;accent-color:var(--sc,var(--s1));margin:0}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:16px}
.legend span{display:flex;gap:8px;align-items:center}.dot{width:8px;height:8px;border-radius:50%}
/* The action bar is fixed to the bottom of the viewport; the page reserves its height so it never covers content. */
.sticky-bar,.action-bar{position:fixed;left:0;right:0;bottom:0;z-index:25;margin:0;background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(30,34,41,.06);padding:12px 0 calc(12px + env(safe-area-inset-bottom))}
.sticky-bar .in,.action-bar .in{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;gap:12px 16px;justify-content:space-between;flex-wrap:wrap}
.sticky-bar .in>div,.action-bar .in>div{display:flex;gap:8px;flex-wrap:wrap}
body:has(.sticky-bar)>footer,body:has(.action-bar)>footer{padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom))}
@supports (backdrop-filter:blur(6px)){.sticky-bar,.action-bar{background:rgba(255,255,255,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}}

/* Signing */
.otp{display:flex;gap:8px}
.otp input{width:52px;height:60px;min-height:0;text-align:center;font-family:var(--mono);font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;padding:0}
.doc{background:var(--ground);border-radius:var(--r-card);padding:24px;display:grid;gap:32px;justify-items:center}
.hero-ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;background:var(--ground);color:var(--ink-2)}
.center{text-align:center}
.signhead{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.signhead>*{min-width:0}
.todo-count{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
/* Dialogs: centred with the one shadow; on phones they become bottom sheets. */
.modal{position:fixed;inset:0;z-index:50;background:rgba(30,34,41,.45);display:grid;place-items:center;padding:16px;overscroll-behavior:contain}
.modal .box{background:var(--paper);border-radius:var(--r-card);box-shadow:var(--float);width:100%;max-width:560px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;padding:28px;animation:dlg-in .16s ease-out}
.modal .box h2{margin:0 0 8px;font-size:22px}
.modal .box .actions{margin-top:24px}
.modal .box.wide{max-width:720px}
@keyframes dlg-in{from{opacity:0;transform:translateY(8px)}}
.tabs{display:flex;gap:2px;padding:3px;margin:16px 0;background:var(--paper);border:1px solid var(--line-2);border-radius:10px}
.tabs button{flex:1;background:none;border:0;border-radius:7px;font:inherit;font-size:14px;font-weight:600;color:var(--ink-2);padding:0 12px;cursor:pointer;min-height:40px;font-feature-settings:"palt"}
.tabs button:hover{background:var(--ground)}
.tabs button[aria-selected=true]{background:var(--ink);color:#fff}
.pad{border:1.5px dashed var(--line-2);border-radius:var(--r-card);background:var(--paper);position:relative;touch-action:none}
.pad canvas{display:block;width:100%;height:180px;cursor:crosshair}
.pad .base{position:absolute;left:24px;right:24px;bottom:40px;border-top:1px solid var(--line)}
.pad .ph{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;color:var(--placeholder);font-size:14px;pointer-events:none}
.typed-preview{display:grid;place-items:center;height:120px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);overflow:hidden}
.typed-preview canvas{max-width:100%}
.typed-preview.stamp-preview{height:180px}
.typed-preview.stamp-preview canvas{width:160px;height:160px}
.verdict{--bar:var(--ink-2);border-radius:0 var(--r-card) var(--r-card) 0;padding:28px 32px;display:flex;gap:24px;align-items:center;border:0;border-left:3px solid var(--bar);background:var(--ground)}
.verdict .hero-ic{margin:0;color:#fff;flex:none;background:var(--bar)}
.verdict h2{font-size:22px;margin:0 0 4px}
.verdict p{margin:0}
.v-ok{--bar:var(--ok)}.v-info{--bar:var(--ink-2)}.v-bad{--bar:var(--danger)}.v-unk{--bar:var(--muted)}
.v-bad h2{color:var(--danger)}

/* The seal (.seal, views/mark.tsx Seal): the solid 朱 square turned 6°, --size a side; the turn is in the
   SVG, so the box stays square and the corners overhang it a little. Add .stamp-in for the one-time
   「押す」 moment (the landing hero and the signer's done page only): it comes down from 1.6× and settles
   with a small give. Reduced motion and print show it at rest. */
.seal{--size:16px;display:inline-block;width:var(--size);height:var(--size);line-height:0;flex:none}
.seal svg{display:block;width:100%;height:100%;overflow:visible}
.stamp-in{animation:stamp-in 360ms cubic-bezier(.3,.7,.2,1) var(--stamp-delay,180ms) both}
@keyframes stamp-in{0%{opacity:0;transform:scale(1.6)}55%{opacity:1;transform:scale(.92)}100%{opacity:1;transform:scale(1)}}

/* Kokuin v2 client (KOKUIN-H-SPEC §6, §7): CC, 自分で送る, key forms, prior signers, 印鑑, templates */
.cc-row,.people .cc-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:12px;align-items:end;margin-bottom:12px}
.people .cc-row{border:0;padding:0;background:none;border-radius:0}
.cc-row .field{margin:0}
.cc-row .btn{min-height:48px}
.self-panel{display:grid;gap:16px}
.self-panel .alert{margin:0}
.self-links{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.self-links li{border:1px solid var(--line);border-radius:var(--r-card);padding:16px;background:var(--paper);display:grid;gap:12px;min-width:0}
.self-links .who b{display:block;font-size:15px;font-weight:600}
.self-links .who small{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.self-link{display:flex;gap:8px;align-items:center}
.self-link input{flex:1;min-width:0;min-height:44px;font-family:var(--mono);font-size:13px;padding:0 12px}
.self-link .btn{min-height:44px;flex:none}
.self-actions{display:flex;gap:8px;flex-wrap:wrap}
.code{display:block;font-family:var(--mono);font-size:16px;font-weight:600;letter-spacing:.06em;color:var(--ink);margin-top:2px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.code-form{margin:0}
.code-form label{font-size:13px;margin-bottom:6px}
.code-form input{min-height:44px;font-family:var(--mono);font-size:15px;letter-spacing:.04em;text-transform:uppercase}
.backup-msg{margin:0 0 8px}
.resend-hint{margin-top:4px;max-width:320px}
.upsell a{margin-left:6px}
.fld.prior{border-style:dotted;background:rgba(255,255,255,.55);cursor:default;pointer-events:none;animation:none}
.fld.prior img{max-width:100%;max-height:100%;object-fit:contain}
.fld.prior .prior-text{color:var(--ink);font-weight:500;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.fld.prior .prior-check{color:var(--ink);font-size:14px;line-height:1}
.fld.prior .prior-date{font-size:10px;opacity:.8}
.hanko-mode{margin-bottom:16px}
.hanko-make .field{margin-bottom:16px}
.hanko-preview{display:grid;place-items:center;height:180px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);overflow:hidden}
.hanko-preview canvas{height:160px;width:160px}
.tpl-list li{flex-wrap:wrap}
.tpl-list li input{min-height:44px}

/* Footer: quiet, on the ground tone, aligned with the page's container. */
.foot{background:var(--ground);border-top:1px solid var(--line);color:var(--ink-2)}
.foot-in{width:100%;max-width:var(--container);margin:0 auto;padding:48px var(--gutter) 32px;display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:32px;font-size:13px;line-height:1.7}
.foot-in h2,.foot-in h4{font-size:13px;font-weight:600;letter-spacing:0;color:var(--ink);margin:0 0 12px}
.foot-in ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot-in p{margin:0 0 6px;color:var(--ink-2)}
.foot-in a{color:var(--ink-2);text-decoration:none}.foot-in a:hover{color:var(--ink);text-decoration:underline}
.foot-brand{display:flex;color:var(--ink);margin:2px 0 14px}
.foot-brand svg{display:block;height:18px;width:auto;flex:none}
.foot-bottom{width:100%;max-width:var(--container);margin:0 auto;padding:16px var(--gutter) 32px;font-size:12px;color:var(--muted);display:flex;gap:8px 16px;flex-wrap:wrap;justify-content:space-between;background:linear-gradient(var(--line),var(--line)) center top/calc(100% - 2 * var(--gutter)) 1px no-repeat}
.foot-min{border-top:1px solid var(--line);background:var(--paper)}
.foot-min-in{width:100%;max-width:var(--container);margin:0 auto;padding:20px var(--gutter) calc(24px + env(safe-area-inset-bottom));font-size:12px;color:var(--muted);display:flex;align-items:center;gap:4px 20px;flex-wrap:wrap}
.foot-min a{color:var(--muted);text-decoration:none}.foot-min a:hover{color:var(--ink);text-decoration:underline}

/* Marketing bases (page lanes own the layouts; these keep the classes on the same tokens). */
.hero{background:var(--paper);color:var(--ink);position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-in{width:100%;max-width:var(--container);margin:0 auto;padding:72px var(--gutter) 88px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.hero h1{font-family:var(--mincho);font-weight:600;font-size:52px;line-height:1.3;letter-spacing:.04em;margin:0 0 20px;color:var(--ink)}
.hero .sub{font-size:16px;line-height:1.9;color:var(--ink-2);margin:0 0 32px}
.hero .fine{font-size:13px;color:var(--muted);margin-top:16px}
.price-tag{display:inline-flex;align-items:baseline;gap:6px;font-weight:700}
.section{padding:88px 0}
.section.alt{background:var(--ground);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-in{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.section h2.big{font-family:var(--mincho);font-weight:600;font-size:36px;line-height:1.4;letter-spacing:.04em;margin:0 0 12px}
.section .lead{max-width:680px}
.howto{counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;list-style:none;margin:0;padding:0}
.howto li{position:relative;padding-top:16px;border-top:1px solid var(--line-2);min-width:0}
.howto li::before{counter-increment:s;content:counter(s);display:block;font-family:var(--mincho);font-size:28px;font-weight:600;line-height:1.2;color:var(--ink);margin-bottom:12px}
.plan-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:32px;display:flex;flex-direction:column;position:relative;min-width:0}
.plan-card.featured{border-color:var(--line-2);border-top:2px solid var(--ink)}
.plan-card .ribbon{position:absolute;top:28px;right:28px;border:1px solid var(--ink);color:var(--ink);font-size:12px;font-weight:600;border-radius:var(--r-chip);padding:0 10px;line-height:22px}
.plan-card .amount{font-size:36px;font-weight:700;letter-spacing:-.01em;line-height:1.1;margin:16px 0 4px;font-variant-numeric:tabular-nums}
.plan-card .amount small{font-size:15px;font-weight:500;color:var(--muted);margin-left:4px;letter-spacing:0}
.plan-card ul{list-style:none;margin:24px 0;padding:0;display:grid;gap:10px;font-size:15px;flex:1}
.plan-card li{display:flex;gap:10px}
.plan-card li svg{flex:none;margin-top:5px;color:var(--ink)}
.plan-card li.no svg{color:var(--line-2)}
.plan-card li.no{color:var(--muted)}
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;padding:16px 40px 16px 0;list-style:none;position:relative;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:24px;width:10px;height:10px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg);transition:transform .16s}
.faq details[open] summary::after{top:28px;transform:rotate(-135deg)}
.faq details p{margin:0 0 16px;color:var(--ink-2)}
.compare{width:100%;border-collapse:collapse;font-size:15px;background:var(--paper)}
.compare th,.compare td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.compare thead th{font-size:13px;color:var(--muted);font-weight:600;border-bottom-color:var(--line-2)}

/* Legal / prose */
.prose{max-width:760px;margin:0 auto}
.prose h1{margin-bottom:8px}
.prose h2{font-family:var(--mincho);font-weight:600;font-size:22px;letter-spacing:.03em;margin:48px 0 12px}
.prose h3{font-size:16px;margin:28px 0 8px}
.prose p,.prose li{color:var(--ink-2);line-height:1.9}
.prose ol,.prose ul{padding-left:1.4em}
.prose li+li{margin-top:6px}
.prose table{width:100%;border-collapse:collapse;font-size:15px;margin:16px 0}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:14px 12px;text-align:left;vertical-align:top}
.prose th{width:30%;color:var(--ink-2);font-weight:600;background:var(--ground)}
.prose .meta-line{color:var(--muted);font-size:14px}

/* Toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;background:var(--ink);color:#fff;border-radius:var(--r-control);padding:12px 20px;font-size:14px;box-shadow:var(--float);max-width:calc(100% - 32px);text-align:center}
body:has(.sticky-bar) .toast,body:has(.action-bar) .toast{bottom:calc(var(--bar-h) + 16px + env(safe-area-inset-bottom))}

/* Touch screens: every target is at least 44 px. */
@media (pointer:coarse){
 .btn-sm,.filters input,.filters select,.filters .btn,.tabs button,.seg span{min-height:44px}
 .fld .rs::before{right:-8px;bottom:-8px;width:28px;height:28px}
 .foot-in li a,.foot-min a{display:inline-flex;align-items:center;min-height:44px}
 .foot-in ul{gap:0}
}

@media (max-width:1023px){
 .grid{grid-template-columns:minmax(0,1fr);gap:24px}
 .editor{grid-template-columns:minmax(0,1fr)}.tools{position:static;max-height:none;overflow:visible}
 .filters{grid-template-columns:repeat(3,minmax(0,1fr))}
 .hero-in{grid-template-columns:minmax(0,1fr);gap:40px}.hero h1{font-size:36px}
 .foot-in{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-in>:first-child{grid-column:1/-1}
}
@media (max-width:759px){
 :root{--gutter:16px;--top-h:56px;--bar-h:104px}
 .top-in{gap:8px}.top-in .plan{display:none}
 .brand svg{height:20px;--brand-nudge:-4px}
 .menu-btn{display:inline-flex}
 .nav{display:none;position:absolute;top:100%;left:0;right:0;align-self:auto;min-height:calc(100vh - var(--top-h));min-height:calc(100dvh - var(--top-h));background:var(--paper);flex-direction:column;align-items:stretch;padding:8px var(--gutter) calc(24px + env(safe-area-inset-bottom));gap:0;border-top:1px solid var(--line);margin:-1px 0 0}
 .nav.open{display:flex}
 .nav a{justify-content:flex-start;min-height:52px;font-size:16px;padding:0;border-bottom:1px solid var(--line)}
 .nav a::after{left:calc(-1 * var(--gutter));right:auto;top:0;bottom:0;width:3px;height:auto}
 .nav a:hover::after{background:transparent}
 .nav a[aria-current]::after{background:var(--ink)}
 .nav .nav-plan{display:flex;color:var(--muted);font-size:14px}
 .nav .nav-cta{align-self:stretch;margin:20px 0 0;min-height:48px;justify-content:center;font-size:16px;border-bottom:0;padding:0 16px}
 main{padding:24px var(--gutter) 64px}
 .card{padding:20px}.card.tight{padding:16px}
 h1{font-size:24px}.lead{margin-bottom:24px}
 .display{font-size:28px}
 .row{grid-template-columns:minmax(0,1fr)}.row.keep{grid-template-columns:repeat(var(--c,2),minmax(0,1fr))}
 .steps{margin-bottom:28px;gap:3px}.steps li{display:block;font-size:12px;line-height:1.5;word-break:normal}
 .steps .done .n{vertical-align:-2px;margin-right:2px}
 .actions{flex-direction:column-reverse;align-items:stretch}.actions .btn,.actions>form,.actions>form .btn{width:100%}
 .page-head{align-items:flex-start}
 .otp{gap:6px}.otp input{width:calc((100% - 30px)/6);height:56px;font-size:22px}
 .doc,.pages{padding:12px;gap:28px}
 .verdict{flex-direction:column;align-items:flex-start;padding:24px 20px}
 dl.meta{grid-template-columns:minmax(0,1fr)}dl.meta dt{padding:12px 0 0;border:0}dl.meta dd{padding-top:2px}
 .file{gap:12px;padding:12px 14px}.file>div{flex:1 1 0}
 .filters{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .people li>.dotn+.who{flex:1 1 calc(100% - 40px)}
 .people li>.dotn~.badge,.people li>.dotn~form{margin-left:40px}
 /* Signer rows: the name and e-mail take the first line; the status chip and 変更 share the second. */
 .people li:has(>.dotn){display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px 12px;align-items:center}
 .people li:has(>.dotn)>.dotn{grid-row:1;grid-column:1}
 .people li:has(>.dotn)>.who{grid-row:1;grid-column:2/-1}
 .people li:has(>.dotn)>.badge,.people li:has(>.dotn)>form{grid-row:2;grid-column:2;justify-self:start;margin:0}
 .people li:has(>.dotn)>.btn{grid-row:2;grid-column:3}
 .badge,.chip{white-space:normal;text-align:left;border-radius:12px}/* one line: the same pill; two lines: a soft box */
 .timeline li{grid-template-columns:minmax(0,1fr);gap:2px}
 .hero-in{padding:48px var(--gutter) 64px}.hero h1{font-size:36px}.hero .sub{font-size:16px}
 .section{padding:56px 0}.section h2.big{font-size:28px}
 .plan-card{padding:24px}.plan-card .ribbon{top:20px;right:20px}
 .foot-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px;padding-top:40px}
 .sticky-bar .in>span,.action-bar .in>span{flex:1 1 100%}
 .sticky-bar .in>div,.action-bar .in>div{flex:1 1 100%;flex-wrap:nowrap}
 .sticky-bar .in .btn,.action-bar .in .btn{flex:1;padding:0 12px}
 .modal{place-items:end stretch;padding:0}
 .modal .box{max-width:none;border-radius:var(--r-card) var(--r-card) 0 0;max-height:92vh;max-height:92dvh;padding:24px 20px calc(20px + env(safe-area-inset-bottom));animation-name:sheet-in;animation-duration:.2s}
 .modal .box.wide{max-width:none}
 .cc-row,.people .cc-row{grid-template-columns:minmax(0,1fr);gap:8px;border-bottom:1px solid var(--line);padding-bottom:12px}
 .self-link{flex-wrap:wrap}.self-link .btn{width:100%}
 .self-actions .btn{flex:1}
 .page-head{margin-bottom:24px}
 .stats{gap:12px 32px}
}
@keyframes sheet-in{from{transform:translateY(24px);opacity:.6}}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 .spin{animation-duration:1.6s!important;animation-iteration-count:infinite!important}
 .fld.todo{animation:none!important}
 .stamp-in{animation:none!important;opacity:1}
}
@media print{.stamp-in{animation:none!important;opacity:1}.top,.foot,.foot-min,.actions,.sticky-bar,.action-bar,.skip{display:none}body{background:#fff;padding:0!important}.card{border:0;padding:0}}

/* ===========================================================================================
   Lane ui-sender: the sender app (UI-REFRESH §6 "Sender app") — dashboard, new, prepare,
   envelope, settings, and the dialogs the client builds on those pages. Page-specific rules
   only; the shared components above are used as they are.
   =========================================================================================== */
@supports (word-break:auto-phrase){.dash-empty p,.drop-t,.new-sec .hint,.prep-sec .hint,.env-meta,.set-head p{word-break:auto-phrase}}

/* Dashboard: title and 新規作成 on one line, usage as one quiet line of figures, filters in one row. */
.dash-head{align-items:center;margin-bottom:12px}
.usage{list-style:none;margin:0 0 32px;padding:0;display:flex;flex-wrap:wrap;row-gap:6px;font-size:13px;line-height:1.6;color:var(--muted)}
.usage li{display:flex;align-items:center;gap:8px;padding:0 20px;border-left:1px solid var(--line);font-feature-settings:"palt"}
.usage li:first-child{padding-left:0;border-left:0}
.usage .v{color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.usage b{font-size:15px;font-weight:700;color:var(--ink)}
.usage .u-bar{display:block;width:80px;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.usage .u-bar i{display:block;height:100%;background:var(--ink)}
.usage .full .u-bar i{background:var(--warn)}
.usage .full .v{color:var(--warn)}
.filter-toggle{display:none}
.dash-head~.filters{grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,2.1fr) minmax(0,1.4fr) auto;padding-bottom:24px;margin-bottom:0}
.filters legend{font-size:12px;font-weight:600;line-height:1.5;margin-bottom:4px;color:var(--ink-2)}
.filters .range{display:flex;align-items:center;gap:6px}
.filters .range>span{flex:none;font-size:13px;color:var(--muted)}
.filters .range input{flex:1 1 0;min-width:0;padding-left:10px}
.filters .range input[type=date]{padding-right:6px}
.filters .f-go{display:flex;gap:4px;align-items:center}
.filters .f-go .btn{min-height:40px;font-size:14px;padding:0 16px}
.dash-list th:not(:first-child){width:1%}
.dash-list th:not(:first-child),.dash-list td:not(:first-child){padding-left:24px}
/* Counterparty, then signers: always one line each, so every row has the same rhythm. */
table.list.dash-list .sub{margin-top:4px}
.dash-list .sub>span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-list td.cell-when{font-size:13px;color:var(--muted)}
.dash-list td.cell-when time{font-variant-numeric:tabular-nums}
.pager{display:flex;justify-content:space-between;gap:8px;margin-top:24px}
.dash-empty{text-align:center;padding:48px 24px 56px;border-top:1px solid var(--line-2);color:var(--muted)}
.dash-empty p{margin:0 auto 20px;max-width:34em;text-wrap:balance}
.dash-empty.first{border:1px solid var(--line);border-radius:var(--r-card);padding:64px 24px;background:var(--paper)}
.dash-empty.first h2{font-size:22px;color:var(--ink);margin:0 0 8px}
.dash-empty.first p{color:var(--ink-2)}
@media (max-width:1023px){.dash-list .hide-t{display:none}}
@media (max-width:1023px){
 .dash-head~.filters{grid-template-columns:repeat(2,minmax(0,1fr))}
 .dash-head~.filters .f-go{grid-column:1/-1;justify-content:flex-end}
}
@media (max-width:759px){
 .dash-head{margin-bottom:8px}
 .usage{margin-bottom:24px}
 .usage li{padding:0 14px}
 .usage li:first-child{flex-basis:100%;padding:0}
 .usage li:nth-child(2){padding-left:0;border-left:0}
 .usage .u-bar{flex:1;max-width:120px}
 .filter-toggle{display:block;margin:0 0 16px}
 .filter-toggle summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 12px;border:1px solid var(--line-2);border-radius:var(--r-control);background:var(--paper);font-size:14px;font-weight:600;cursor:pointer;list-style:none;font-feature-settings:"palt"}
 .filter-toggle summary::-webkit-details-marker{display:none}
 .filter-toggle summary::after{content:"";width:7px;height:7px;margin:0 2px 3px 4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .16s}
 .filter-toggle[open] summary{border-color:var(--ink)}
 .filter-toggle[open] summary::after{margin-bottom:-3px;transform:rotate(-135deg)}
 .filter-count{font-size:12px;font-weight:600;color:var(--paper);background:var(--ink);border-radius:var(--r-chip);padding:0 8px;line-height:20px}
 .filter-toggle:not([open])+.filters{display:none}
 .dash-head~.filters{grid-template-columns:minmax(0,1fr);gap:16px;padding:16px;margin-bottom:16px;background:var(--ground);border-radius:var(--r-card)}
 .dash-head~.filters .f-go{justify-content:stretch}
 .dash-head~.filters .f-go .btn{flex:1;min-height:44px}
 .filters input,.filters select{background-color:var(--paper)}
 table.list.dash-list .sub{margin-top:2px}
 table.list.dash-list td{padding-left:0}
 .dash-empty.first{padding:40px 20px}
 .dash-empty.first h2{font-size:18px}
}

/* New (upload): a large drop zone on paper, then the document's details in sections, not cards. */
.new-grid{margin-top:8px}
.new-form{min-width:0}
.new-form>.field.new-pdf{margin-bottom:0}
.new-form .drop{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:256px;padding:40px 24px;cursor:pointer}
.new-form .drop:hover{border-color:var(--line-hover)}
.new-form .drop.over{border-color:var(--ink);border-style:solid}
.new-form .drop:has(#file:focus-visible) label.btn{outline:2px solid var(--focus);outline-offset:2px}
.drop-ic{color:var(--ink-2);margin-bottom:12px;flex:none}
.drop-t{margin:0;font-size:16px;font-weight:600;line-height:1.6}
.drop-or{margin:0 0 12px;font-size:13px;color:var(--muted)}
.new-form .drop label.btn{margin:0}
.drop-limit{margin:16px 0 0;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.new-form .file{padding:16px 18px;min-height:76px}
.new-sec{border-top:1px solid var(--line);margin-top:36px;padding-top:28px}
.new-sec>h2{font-size:18px;margin:0 0 20px}
.new-sec>h2+.hint{margin:-14px 0 20px}
.new-form .seg{display:flex}
.new-form .seg label{flex:1}
.new-form .seg span{justify-content:center}
.new-form .actions{margin-top:8px;padding-top:28px;border-top:1px solid var(--line)}
.new-form .progress{margin:0 0 -4px}
/* The standing notes beside the work: a short muted list under a hairline, not a tinted panel. */
.new-grid>.side,.env-side>.side{border:0;border-top:1px solid var(--line);background:none;border-radius:0;padding:16px 0 0}
@media (min-width:1024px) and (min-height:820px){.new-grid>.side,.env-side{position:sticky;top:24px}}
@media (max-width:759px){
 .new-form .drop{min-height:208px;padding:32px 16px}
 .new-sec{margin-top:28px;padding-top:24px}
 .new-form .actions{flex-direction:column;align-items:stretch}
}

/* Prepare: an editor. ≥1024 px: a 360 px sidebar (sticky, scrolls on its own; prepare.ts fits its
   height above the action bar) and the document on the ground tone, with the palette as the
   document's toolbar sticking over the pages. Below that, one column: the sidebar's sections, then
   the document with its toolbar. The head is two rows (the steps, then the title line), so the
   document starts high on a laptop screen. */
main.prep-main{padding-top:24px;padding-bottom:40px}
.prep-main>.steps{margin-bottom:20px}
.prep-head{align-items:center;margin-bottom:20px}
.prep-head>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 20px;min-width:0}
.prep-head h1{font-size:22px;line-height:1.4}
.prep-of{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;margin:0;min-width:0}
.prep-of .doc-title{font-size:18px;line-height:1.5;color:var(--ink);min-width:0}
.prep-of .pages-n{font-size:13px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.prep{display:grid;grid-template-columns:360px minmax(0,1fr);gap:32px;align-items:start}
.prep>*{min-width:0}
.prep-side{position:sticky;top:16px;max-height:calc(100vh - var(--bar-h) - 32px);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;padding-right:12px;margin-right:-12px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.prep-sec{padding:20px 0 22px;border-top:1px solid var(--line)}
.prep-sec:first-child{border-top:0;padding-top:2px}
.prep-sec>h2{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 2px;font-size:18px;line-height:1.5;margin:0 0 4px}
.prep-sec>.hint{margin:0 0 16px}
.prep-sec .field{margin-bottom:14px}
.prep-sec label,.prep-sec .lbl{font-size:13px;margin-bottom:6px}
.prep-sec textarea{min-height:88px}
.prep-sec .row{gap:12px}
.prep-sec .seg{display:flex}
.prep-sec .seg label{flex:1;margin:0}
.prep-sec .seg span{justify-content:center;padding:0 8px;min-height:40px}
.prep-adds{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:14px}
.prep-sec .check{font-size:14px;padding:8px 0;min-height:0}
.prep-sec .check .hint{margin-top:2px;font-weight:400}
.prep-sec .check+.check{margin-top:4px}
/* Signers: one compact row per person (colour dot, name, e-mail, 変更); 変更 opens the form in place,
   with their colour as a bar and the access code behind a disclosure. */
.prep .signer.is-compact{padding:0;border:0}
.prep .signer.is-compact::before{display:none}
.prep .signer.is-compact+.signer,.prep .signer+.signer.is-compact{margin-top:0}
.signer-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 0;border-bottom:1px solid var(--line)}
.signer.is-compact:first-child .signer-row{border-top:1px solid var(--line)}
.signer-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--sc,var(--s1))}
.signer-id{flex:1;min-width:0;line-height:1.5}
.signer-id b{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.signer-id .email{display:block;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.signer-flag{display:inline-block;margin-top:2px;font-size:12px;color:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-chip);padding:0 8px;line-height:20px}
.signer-row .btn{flex:none}
.signer-done{display:flex;justify-content:flex-end;margin:4px 0 2px}
.prep .signer{border:0;border-radius:0;background:none;padding:0 0 0 15px;position:relative}
.prep .signer::before{content:"";position:absolute;left:0;top:6px;bottom:2px;width:3px;border-radius:2px;background:var(--sc,var(--s1))}
.prep .signer:not(.is-compact)+.signer:not(.is-compact){margin-top:22px}
.prep .signer.is-compact+.signer:not(.is-compact),.prep .signer:not(.is-compact)+.signer.is-compact{margin-top:16px}
.signer-head{display:flex;align-items:center;gap:8px;min-height:32px;margin-bottom:6px}
.prep .signer .num{position:static;flex:1;min-width:0;background:none;color:var(--sc,var(--ink));font-size:13px;font-weight:700;line-height:1.5;padding:0;border-radius:0;text-align:left}
.signer-tools{display:flex;gap:2px;margin-left:auto;flex:none}
.signer-tools .btn{min-height:32px;min-width:32px;padding:0;color:var(--muted)}
.signer-tools .btn:hover{color:var(--ink)}
.prep .signer .field{margin-bottom:10px}
.signer-code{margin-top:-2px}
.signer-code summary,.prep-more summary{display:flex;align-items:center;gap:8px;min-height:36px;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;list-style:none;font-feature-settings:"palt";width:fit-content;max-width:100%}
.signer-code summary::-webkit-details-marker,.prep-more summary::-webkit-details-marker{display:none}
.signer-code summary::before,.prep-more summary::before{content:"";width:6px;height:6px;margin:0 3px 0 1px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .16s;flex:none}
.signer-code[open] summary::before,.prep-more[open] summary::before{transform:rotate(45deg) translate(-1px,-1px)}
.signer-code summary .opt,.prep-more summary .opt{margin-left:0}
.signer-code summary:hover,.prep-more summary:hover{color:var(--ink)}
.signer-code .hint{margin:0 0 8px}
.signer-code .field{margin-bottom:4px}
/* CC: rows of name and e-mail with a neutral bar; 削除 sits beside the name. */
.prep #cc-list{display:block}
.prep #cc-list:empty{display:none}
.prep .cc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;margin:0;padding:0 0 0 15px;position:relative;border:0}
.prep .cc-row::before{content:"";position:absolute;left:0;top:6px;bottom:2px;width:3px;border-radius:2px;background:var(--line-2)}
.prep .cc-row+.cc-row{margin-top:18px}
.prep .cc-row>.field{margin:0}
.prep .cc-row>.field:nth-child(2){grid-column:1/-1;grid-row:2}
.prep .cc-row>.btn{grid-column:2;grid-row:1;min-height:44px}
.prep .cc-row label{font-size:12px;margin-bottom:4px;color:var(--ink-2)}
/* 依頼の送り方: two choices with what each does. */
.choice{display:grid;gap:8px}
.choice label{display:flex;gap:12px;align-items:flex-start;margin:0;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-control);background:var(--paper);cursor:pointer;font-size:14px;font-weight:400;line-height:1.6}
.choice label:hover{border-color:var(--line-hover)}
.choice label:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.choice input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--ink)}
.choice b{display:block;font-weight:600}
.choice small{display:block;margin-top:2px;font-size:12px;line-height:1.65;color:var(--muted)}
.choice small,.prep-sec .check .hint,.prep-sec .hint{font-feature-settings:normal}
.prep-more{margin-top:8px;border-top:1px solid var(--line);padding-top:6px}
.prep-more>.hint{margin:0 0 12px}
/* The palette: the document pane's toolbar. Who (the signer chips) and what (four tools) on one row,
   in the selected signer's colour, then one line of how-to (or what the next click places). */
.prep-palette.prep-sec{position:sticky;top:0;z-index:6;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 16px;margin:0;padding:12px 16px;background:var(--paper);border:1px solid var(--line);border-bottom-color:var(--line-2);border-radius:var(--r-card) var(--r-card) 0 0}
.prep-palette .palette-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;margin:0}
.prep-palette>.who-pick{grid-column:1;grid-row:1}
.prep-palette>.ftype{grid-column:2;grid-row:1}
.prep-palette>.palette-intro,.prep-palette>.palette-hint{grid-column:1/-1;grid-row:2;margin:0;font-size:12px;line-height:1.6}
.prep-palette:has(.palette-hint.on)>.palette-intro{display:none}
.prep-palette>.field-props{grid-column:1/-1}
.prep-palette .who-pick{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.prep-palette .who-pick button{display:inline-flex;align-items:center;gap:6px;min-height:36px;max-width:100%;padding:0 11px 0 9px;border:1px solid var(--line-2);border-radius:var(--r-chip);background:var(--paper);font-size:13px;line-height:1.3;cursor:pointer}
.prep-palette .who-pick button:hover{border-color:var(--line-hover)}
.prep-palette .who-pick button[aria-pressed=true]{border-color:var(--sc);box-shadow:inset 0 0 0 1px var(--sc);background:#fff;background:color-mix(in srgb,var(--sc) 7%,#fff)}
.prep-palette .who-pick .sw{width:10px;height:10px}
.prep-palette .who-pick .nm{min-width:0;max-width:10em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.prep-palette .who-pick .ct{flex:none;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.prep-palette .who-pick .no-sig .ct{color:var(--danger);font-weight:600}
.prep-palette .ftype{display:flex;gap:6px}
.prep-palette .ftype button{flex-direction:row;gap:6px;min-height:40px;padding:0 12px;font-size:13px;border-color:var(--line-2);border-color:color-mix(in srgb,var(--sc,var(--ink)) 40%,var(--line-2));color:var(--ink);cursor:pointer;white-space:nowrap}
.prep-palette .ftype button svg{color:var(--sc,var(--ink))}
.prep-palette .ftype button:hover{border-color:var(--sc,var(--ink));background:var(--ground);background:color-mix(in srgb,var(--sc,var(--ink)) 7%,#fff)}
.prep-palette .ftype button[aria-pressed=true]{background:var(--sc,var(--ink));border-color:var(--sc,var(--ink));color:#fff}
.prep-palette .ftype button[aria-pressed=true] svg{color:#fff}
.palette-hint{margin:0;font-size:12px;line-height:1.6;color:var(--muted)}
.palette-hint:empty{display:none}
.palette-hint.on{color:var(--ink);font-weight:600}
.field-props{padding-top:10px;border-top:1px solid var(--line)}
.fp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.fp-what{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;font-weight:600;overflow-wrap:anywhere}
.fp-what::before{content:"";flex:none;width:12px;height:12px;border-radius:2px;border:2px solid var(--sc,var(--s1));background:color-mix(in srgb,var(--sc,var(--s1)) 12%,transparent)}
.fp-head .btn{flex:none}
.fp-row{display:flex;align-items:flex-end;gap:12px}
.fp-row .field{flex:1;min-width:0;margin:0}
.fp-row label{font-size:12px;margin-bottom:4px}
.fp-row input[type=text]{min-height:40px}
.prep-sec .fp-row .check{flex:none;align-items:center;min-height:40px;padding:0;font-size:13px}
.prep-sec .fp-row .check input{margin:0}
/* The document: the work surface, on the ground tone. */
.prep .pages{min-height:calc(100vh - 220px);padding:32px 28px 56px;border-radius:0 0 var(--r-card) var(--r-card);border:1px solid var(--line);border-top:0;align-content:start}
.pages-msg{display:flex;align-items:center;gap:10px;margin:96px auto 0;font-size:14px;color:var(--muted)}
.prep.is-locked .prep-side,.prep.is-locked .prep-palette{opacity:.5}
.prep-bar .in>span{font-variant-numeric:tabular-nums}
@media (min-width:1024px){
 .prep-sec input[type=text],.prep-sec input[type=email],.prep-sec input[type=date],.prep-sec input[type=number],.prep-sec select{min-height:44px;font-size:15px}
}
@media (max-width:1023px){
 main.prep-main{padding-bottom:24px}
 .prep{display:flex;flex-direction:column;align-items:stretch;gap:0}
 .prep-sec{min-width:0}
 .prep-side{display:contents}
 .prep-sec:first-child{padding-top:0}
 /* One column: the toolbar is one row (chips scroll sideways, then the four tools) over the full-bleed pages. */
 .prep-doc{margin:8px calc(-1 * var(--gutter)) 0}
 .prep-palette.prep-sec{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:8px var(--gutter);border-width:1px 0;border-radius:0;box-shadow:0 12px 16px -14px rgba(30,34,41,.2)}
 .prep-palette>.palette-intro{display:none}
 .prep-palette .who-pick{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 0 0 calc(-1 * var(--gutter));padding:2px 0 2px var(--gutter)}
 .prep-palette .who-pick::-webkit-scrollbar{display:none}
 .prep-palette .who-pick button{flex:none}
 .prep .pages{min-height:60vh;border:0;border-radius:0;padding:20px 12px 40px}
}
@media (max-width:759px){
 .prep-head{flex-wrap:nowrap;align-items:flex-start;gap:8px}
 .prep-head>div{flex:1;display:block}
 .prep-head h1{font-size:22px}
 .prep-head form{align-self:flex-start;margin:-4px -10px 0 0}
 .prep-head form .btn{min-width:44px;min-height:44px;padding:0 10px}
 .prep-head form .btn .lbl-wide{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
 .prep-of{margin-top:4px}
 .prep-of .doc-title{font-size:16px}
 /* Phones: icon over a 12 px label, so the four tools and a chip share one ~60 px row. */
 .prep-palette .ftype{gap:4px}
 .prep-palette .ftype button{flex-direction:column;justify-content:center;gap:1px;width:52px;min-height:48px;padding:0 2px;font-size:12px;line-height:1.2}
 .prep-palette .ftype button svg{width:18px;height:18px}
}
/* A field drawn smaller than its label (a date field on a phone-width page) keeps its colour, not a clipped word. */
.prep .fld{container-type:size}
@container (max-height:13px){.prep .fld>span:not(.rs){display:none}}

/* Envelope: the title block (status, the title in Mincho, meta on its own lines) with equal-height
   actions, then the record in one column and the key status and notes beside it (≥1024 px). */
.env-back{margin:0 0 20px;font-size:14px}
.env-back a{display:inline-flex;align-items:center;gap:4px;min-height:32px;color:var(--ink-2);text-decoration:none}
.env-back a:hover{color:var(--ink);text-decoration:underline}
.env-back svg{margin-left:-4px}
.env-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px 32px;margin-bottom:32px}
.env-title{min-width:0;flex:1}
.env-title .badge{margin-bottom:12px}
.env-title h1.doc-title{font-size:28px;line-height:1.45;letter-spacing:.03em;margin:0 0 10px;font-weight:600}
.env-cp{margin:0 0 4px;font-size:15px;color:var(--ink-2)}
.env-meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 20px;font-size:13px;line-height:1.6;color:var(--ink-2);font-variant-numeric:tabular-nums}
.env-meta .k{color:var(--muted);margin-right:6px}
.env-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:stretch;gap:8px;flex:none;max-width:100%}
.env-actions>form{display:flex;margin:0}
.env-actions .btn{min-height:44px}
.env-actions .resend-hint{flex-basis:100%;order:9;margin:0;max-width:none;text-align:right;contain:inline-size}
.env-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start;margin-top:8px}
.env-grid>*{min-width:0}
.env-side{display:grid;gap:16px}
.key-status>p{margin:0;padding:14px 0}
.key-status .alert{margin:0}
.key-status .code-form{margin-top:12px}
.env-sec{padding:32px 0;border-top:1px solid var(--line)}
.env-sec:first-child{border-top:0;padding-top:0}
.env-sec>h2{font-size:18px;margin:0 0 6px}
.env-sec>.sect-head{margin-bottom:16px}
.env-sec>h2+.hint{margin:0 0 16px}
.env-sec>h2+:not(.hint){margin-top:16px}
.env-files{display:grid;gap:10px}
.env-files .file .btn{margin-left:auto}
/* 文書を今すぐ削除: after the files, quiet and away from the 保存 buttons (it cannot be undone). */
.env-purge{display:flex;margin:16px 0 0}
/* 署名者: a vertical timeline in the signers' colours; in order, a line joins them. */
.signer-tl{list-style:none;margin:0;padding:0}
.tl-item{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;column-gap:14px;row-gap:8px;align-items:start;padding:0 0 24px}
.tl-item:last-child{padding-bottom:4px}
.signer-tl:not(.tl-par) .tl-item:not(:last-child)::before{content:"";position:absolute;left:13.5px;top:34px;bottom:6px;width:1px;background:var(--line-2)}
.tl-dot{grid-column:1;grid-row:1/span 2;width:28px;height:28px;border-radius:50%;background:var(--sc,var(--s1));color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.tl-who{grid-column:2/-1;grid-row:1;min-width:0;padding-top:2px}
.tl-who b{display:block;font-size:15px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.tl-who .email{display:block;font-size:13px;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}
.tl-note{display:inline-block;margin-top:4px;font-size:12px;color:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-chip);padding:0 8px;line-height:20px}
.tl-state{grid-column:2;grid-row:2;align-self:center;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0}
.tl-state>form{display:flex;margin:0}
.tl-at{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.tl-change{grid-column:3;grid-row:2;align-self:center}
.env-cc{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.env-cc h3{display:flex;align-items:baseline;gap:2px;font-size:14px;margin:0 0 10px}
.cc-people{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cc-people li{min-width:0;padding-left:42px}
.cc-people b{display:block;font-size:14px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.cc-people .email{display:block;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.env-sec dl.meta{margin-top:12px}
.env-sec dl.meta>:nth-last-child(-n+2){border-bottom:0}
.env-sec dl.meta .hash{margin-top:6px}
.env-sec .timeline{margin-top:12px}
.env-sec .timeline b{font-weight:600}
.tl-actor{display:block;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.tl-actor .mono{font-size:12px;margin-left:10px;color:var(--muted)}
@media (max-width:1023px){
 .env-grid{display:flex;flex-direction:column;gap:0}
 .env-side{display:contents}
 .key-status{order:-1;margin-bottom:24px}
 .key-status:has(>p){margin-bottom:8px}
 .env-side>.side{order:1;margin-top:8px}
}
@media (max-width:759px){
 .env-back{margin-bottom:12px}
 .env-head{flex-direction:column;align-items:stretch;gap:20px;margin-bottom:24px}
 .env-title h1.doc-title{font-size:24px}
 .env-actions{justify-content:stretch}
 .env-actions>*{flex:1}
 .env-actions .btn{width:100%}
 .env-actions .resend-hint{text-align:left}
 .env-sec{padding:28px 0}
 .tl-item{column-gap:12px}
 .cc-people li{padding-left:40px}
 .tl-actor .mono{display:block;margin:0}
}

/* Dialogs on the sender's pages (lib.ts openDialog) and the 「自分で送る」 panel (selfpanel.ts). */
.dlg>p.small{margin:0 0 16px;line-height:1.7}
.dlg>.field:last-of-type{margin-bottom:0}
.dlg-who{display:grid;min-width:0;margin:4px 0 12px;padding:12px 14px;border-left:3px solid var(--line-2);background:var(--ground);border-radius:0 var(--r-control) var(--r-control) 0}
.dlg-who .k{font-size:12px;color:var(--muted);line-height:1.6}
.dlg-who b{font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.dlg-who .email{font-size:13px;color:var(--ink-2);overflow-wrap:anywhere}
.self-host{margin:0 0 32px;padding:24px;border:1px solid var(--line-2);border-top:2px solid var(--ink);border-radius:var(--r-card);background:var(--paper)}
.self-host>h2{font-size:18px;margin:0 0 16px}
.self-panel{gap:20px}
.self-links{gap:16px}
.self-links li{gap:12px;padding:18px 20px}
.self-links .who b{font-size:16px}
.self-links .who small{display:block}
.self-link input{font-size:13px;background:var(--ground);color:var(--ink-2)}
.self-actions .btn{min-height:40px}
.self-links .backup{display:grid;gap:2px;padding:10px 14px;background:var(--ground);border-radius:var(--r-control)}
.self-links .backup .k{font-size:12px;color:var(--muted)}
.self-links .backup .code{margin:0;font-size:15px;letter-spacing:.08em}
.self-panel>.hint{margin:0}
.self-panel .alert br{display:none}
@media (max-width:759px){
 .self-host{padding:20px 16px;margin-bottom:24px}
 .self-links li{padding:16px}
 .self-panel .self-link{flex-wrap:nowrap}
 .self-panel .self-link .btn{width:auto;padding:0 14px}
 .self-panel .self-actions .btn{flex:1 1 calc(50% - 4px);padding:0 10px}
 .self-links .backup .code{font-size:13px;letter-spacing:.02em}
}

/* Settings: one section per subject, its h2 and a line of context on the left and the controls on
   the right, hairlines between (no stack of cards). */
.settings{max-width:980px}
.settings>.page-head{margin-bottom:16px}
.set{display:grid;grid-template-columns:240px minmax(0,1fr);gap:12px 56px;padding:40px 0;border-top:1px solid var(--line);scroll-margin-top:16px}
.set:first-child{border-top:0;padding-top:8px}
.set-head{min-width:0}
.set-head h2{font-size:18px;margin:0 0 8px}
.set-head p{margin:0;font-size:13px;line-height:1.75;color:var(--muted)}
.set-main{min-width:0}
#profile .field{max-width:480px}
/* Lists inside a section: no rule above the first row or under the last (the section rules do that). */
.set .people>li:first-child{border-top:0;padding-top:0}
.set .people>li:last-child{border-bottom:0;padding-bottom:0}
.set dl.meta>:nth-child(-n+2){padding-top:0}
.set dl.meta>:nth-last-child(-n+2){border-bottom:0}
/* Row actions: 名前を変更 (secondary) and 削除 / 取り消し / 外す (danger), small, on one line at the right. */
.row-acts{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.row-acts>form{display:flex;margin:0}
.set .people>li{position:relative}
.set-main>.alert{margin-bottom:20px}
#profile form .field:last-of-type{margin-bottom:20px}
.set-list+.set-inline,.set-list+p{margin-top:20px}
.set-inline{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.set-inline>.field{flex:1 1 220px;min-width:0;margin:0}
.set-list{margin:0 0 4px}
.set-list .who b{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;overflow-wrap:anywhere}
.set-list .who small{display:flex;flex-wrap:wrap;gap:0 14px}
.set-list .who .email{overflow-wrap:anywhere;min-width:0}
.set-list .you{font-size:12px;font-weight:600;color:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--r-chip);padding:0 8px;line-height:20px}
.set-none{margin:0 0 4px}
.pk-rename summary{list-style:none}
.pk-rename summary::-webkit-details-marker{display:none}
.pk-rename .when-open,.pk-rename[open] .when-closed{display:none}
.pk-rename[open] .when-open{display:inline}
/* The rename form opens under the row, across its whole width. */
.set .people>li:has(.pk-rename[open]){padding-bottom:72px}
.set .people>li:last-child:has(.pk-rename[open]){padding-bottom:58px}
.pk-rename[open]>.set-inline{position:absolute;left:0;right:0;bottom:14px;margin:0}
.set .people>li:last-child .pk-rename[open]>.set-inline{bottom:0}
.pk-rename .set-inline input{min-height:40px}
.pk-add{margin-top:24px}
.pk-required{display:grid;justify-items:start;gap:4px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.pk-required .check{padding-top:0}
.pk-members{margin-top:28px}
.pk-members h3{font-size:14px;margin:0 0 4px}
.pk-lost{margin-top:24px}
#templates .tpl-list li .btn{flex:none}
#templates .tpl-list li .who input{min-height:40px}
#templates .tpl-empty{padding:0;border:0}
.set dl.meta{margin:0}
.set-offer{margin-top:28px;padding:28px}
.set-offer h3{font-size:18px;margin:0}
.set-offer .amount{font-size:28px;margin:12px 0 4px}
.set-offer ul{margin:16px 0 20px}
.set-offer .terms{margin:0 0 16px;font-size:13px;grid-template-columns:96px minmax(0,1fr)}
.set-offer .terms dt,.set-offer .terms dd{padding:10px 0}
.set-offer>.hint{margin:16px 0}
.set-offer>form+.hint{margin:8px 0 0}
.set-portal{display:grid;justify-items:start;gap:4px;margin-top:24px}
@media (max-width:859px){
 .set{grid-template-columns:minmax(0,1fr);padding:32px 0}
 .set-head p{max-width:40em}
}
@media (max-width:759px){
 .set{padding:28px 0}
 .set-offer{padding:20px}
 .set-offer .terms{grid-template-columns:minmax(0,1fr)}
 .set-offer .terms dt{padding:10px 0 0}
 .set-offer .terms dd{padding-top:2px}
 .set-inline>.btn{flex:1 1 100%}
 /* Phones: who first, then both row actions on one line under the meta. */
 .set .people>li>.who{flex-basis:100%}
 .set .people>li>.row-acts,.set .people>li>form{margin-left:0}
}

/* Touch screens: the lane's small controls grow to 44 px. */
@media (pointer:coarse){
 .signer-code summary,.prep-more summary,.pk-rename summary,.env-back a{min-height:44px}
 .signer-tools .btn{min-height:44px;min-width:44px}
 .prep-palette .who-pick button{min-height:44px}
 .prep-palette .ftype button{min-height:44px}
 /* The resize handle, drawn bigger on touch screens (its hit area is 28 px): 16 px, 22 px when selected. */
 .prep .fld .rs{width:16px;height:16px;border-radius:4px 0 2px 0}
 .prep .fld.sel .rs{width:22px;height:22px}
}
/* Phones: inputs under 16 px make iOS zoom the page on focus (the filters, the link and code fields). */
@media (max-width:759px){
 .filters input,.filters select,.self-link input,.key-status .code-form input{font-size:16px}
}

/* ==========================================================================================
   Signer lane (UI-REFRESH §6 "Signer pages"): the counterparty's pages, phone first.
   .req (landing and code entry), .signer-note, .msg (message pages), the sign page
   (.sign-root: .signbar, .sign-doc, .sign-end/.consent, .todo-bar; data-state from sign.ts),
   the signature sheet (.sig-modal, .pad, .hanko-*), the done page (.done-*, .receipt) and /d/ (.dl).
   ========================================================================================== */
.shell-signer main{padding-top:32px}
.shell-signer .steps{margin-bottom:28px}
.shell-signer .tagline{font-size:12px}

/* The request: a letter that arrived. Organisation, the title in Mincho, who / until when, the message. */
.req{padding:32px}
.req-org{margin:0 0 6px;font-size:14px;font-weight:600;line-height:1.6;color:var(--ink-2);font-feature-settings:"palt"}
.req-title{font-size:28px;line-height:1.5;margin:0 0 24px;color:var(--ink)}
.req-title.is-long,.dl-title.is-long{font-size:22px;line-height:1.6}
.req-meta{margin:0 0 24px;border-top:1px solid var(--line);font-size:14px;line-height:1.6}
.req-meta>div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.req-meta dt{color:var(--muted)}
.req-meta dd{margin:0;min-width:0;color:var(--ink);font-weight:500;overflow-wrap:break-word}
.req-msg{margin:0 0 24px}
.req-msg blockquote{margin:0;padding:2px 0 2px 16px;border-left:3px solid var(--line-2);white-space:pre-wrap;text-wrap-style:pretty;overflow-wrap:break-word;font-size:15px;line-height:1.8;color:var(--ink)}
@supports (word-break:auto-phrase){.req-title,.signbar-title,.msg-title,.done-hero h1,.receipt dd.doc-title,.dl-title,.req-act>p,.req-msg blockquote,.done-hero .lead,.done-fine,.sign-keep,.msg-body p,.signer-note li,.notes li,.dash-list .t,.env-title .doc-title,.verify .lead{word-break:auto-phrase}}
.req-act>p,.req-msg blockquote,.done-hero .lead,.done-fine,.sign-keep,.msg-body p,.signer-note li,.verify .lead{text-wrap:pretty}
.req-msg figcaption{margin:8px 0 0 19px;font-size:12px;line-height:1.5;color:var(--muted)}
.req-act{border-top:1px solid var(--line);padding-top:24px}
.req-act>p{margin:0 0 16px;font-size:15px;line-height:1.8}
.req-to{display:block;margin-top:4px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.req-act .req-fine{margin:12px 0 0;text-align:center;font-size:13px;color:var(--muted)}
.req-act .alert{margin-bottom:20px}
/* Code entry: the document it is for, quietly, then the six boxes. */
.req-doc{margin:0 0 12px;font-size:15px;line-height:1.6;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.verify h1{font-size:24px;margin:0 0 8px}
.verify .lead{margin:0 0 24px;color:var(--ink-2)}
.otp-set{margin:0 0 24px}
.otp-set legend{margin-bottom:10px}
/* The six boxes fill the column, like the button under them. */
.verify .otp{gap:8px}
.verify .otp input{flex:1 1 0;min-width:0;width:auto;height:64px;font-size:28px;border-radius:10px;caret-color:var(--ink)}
.verify .otp input:nth-child(3){margin-right:12px}
.otp-plain{margin-top:12px;font-family:var(--mono);letter-spacing:.2em}
.resend{display:flex;align-items:center;justify-content:center;gap:0 4px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--muted)}
.resend .btn{color:var(--ink);text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px;padding:0 8px}

/* The standing notices under the card: short, muted, with the link to the full disclosure. */
.signer-note{margin:28px 0 0;font-size:13px;line-height:1.7;color:var(--muted)}
.signer-note-h{font-size:13px;font-weight:600;line-height:1.6;color:var(--ink-2);margin:0 0 6px}
.signer-note ul{list-style:none;margin:0 0 8px;padding:0}
.signer-note li{position:relative;padding-left:14px}
.signer-note li+li{margin-top:2px}
.signer-note li::before{content:"";position:absolute;left:2px;top:.78em;width:4px;height:4px;border-radius:50%;background:var(--line-2)}
.signer-note p{margin:0}
.signer-note a{color:var(--ink-2)}

/* Message pages: one muted icon, one sentence, one next step. */
.msg{max-width:440px;margin:16px auto 0;padding:32px 0 8px;text-align:center}
.msg-ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;background:var(--ground);color:var(--muted)}
.msg-doc{max-width:100%;margin:0 0 6px;font-size:14px;line-height:1.6;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-title{font-size:22px;line-height:1.5;margin:0 0 12px}
.msg-body{color:var(--ink-2);font-size:15px;line-height:1.8}
.msg-body p{margin:0}
.msg-body .alert{text-align:left;margin:16px 0 0}
.msg-body .alert>svg{display:none}/* the block's own icon says it once */
.msg-next{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;line-height:1.7;color:var(--muted);display:grid;gap:16px;justify-items:center}
.msg-next p{margin:0}

/* The sign page: the document is the work surface, on the ground tone, under a thin bar. */
.shell-signer main.sign-main{padding:0;background:var(--ground)}
.shell-signer{padding-bottom:var(--fixed-h,0px)}
.sign-head{background:var(--paper);padding-top:28px}
.shell-signer .sign-head .steps{margin:0}
.signbar{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.signbar-in{display:flex;align-items:center;gap:12px 24px;padding-top:14px;padding-bottom:14px;min-height:76px}
.signbar-doc{flex:1;min-width:0}
.signbar-title{font-size:18px;line-height:1.45;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.signbar-meta{margin:2px 0 0;display:flex;flex-wrap:wrap;gap:0 16px;font-size:13px;line-height:1.6;color:var(--muted)}
.signbar-meta span{display:inline-flex;align-items:center;gap:6px;min-width:0}
.signbar-meta .sw-dot{width:8px;height:8px}
.signbar-act{display:flex;align-items:center;gap:16px;flex:none}
.signbar-act .todo-count{font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.sign-root[data-state=loading] .signbar-act,.sign-root[data-state=blocked] .signbar-act{display:none}
.sign-body{padding-top:24px;padding-bottom:56px}
.sign-body>.alert,.sign-body>#sign-error,.sign-body>#verify-failed{max-width:720px;margin-left:auto;margin-right:auto}
.sign-doc{background:none;padding:0;border-radius:0;min-height:240px;align-content:start}
.sign-loading{display:flex;align-items:center;justify-content:center;gap:10px;margin:80px 0;font-size:14px;line-height:1.7;color:var(--muted);text-align:center}
.sign-doc .pagewrap{box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(30,34,41,.05)}
/* Fields: the signer's colour; the one to fill next is gently highlighted (one at a time). */
.sign-doc .fld{container-type:size}
.sign-doc .fld>span{font-size:clamp(6px,min(60cqh,11cqw),13px);line-height:1.15;padding:0 4px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sign-doc .fld[role=button]:not(.filled):hover{background:color-mix(in srgb,var(--sc,var(--s1)) 18%,transparent)}
.sign-doc .fld.todo{animation:none}
.sign-doc .fld.todo.next{animation:pulse 1.8s ease-in-out infinite;background:color-mix(in srgb,var(--sc,var(--s1)) 16%,transparent)}
.sign-doc .fld.filled{border-width:1.5px;background:rgba(255,255,255,.72)}
.sign-doc .fld:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* Touch screens: a field keeps its drawn size, but what the finger can hit grows to 44 px around it;
   on this page fields are not dragged, so touching one never blocks scrolling. The page caption is
   for screen readers only (most contracts print their own page numbers). */
.sign-doc .fld{touch-action:manipulation}
.sign-doc .pagewrap .pno{left:0;right:auto;bottom:0;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.sign-doc{gap:24px}
@media (pointer:coarse){
 .sign-doc .fld[role=button]{overflow:visible}
 .sign-doc .fld[role=button]::after{content:"";position:absolute;top:min(0px,calc((100% - 44px) / 2));bottom:min(0px,calc((100% - 44px) / 2));left:min(0px,calc((100% - 44px) / 2));right:min(0px,calc((100% - 44px) / 2))}
 .sign-doc .fld.fld-check::after{inset:auto;top:min(-14px,calc((100% - 44px) / 2));bottom:min(-14px,calc((100% - 44px) / 2));left:min(-14px,calc((100% - 44px) / 2));right:min(-14px,calc((100% - 44px) / 2))}
}
/* The 予備コード, when the link's key is missing or wrong. */
.code-card{max-width:560px;margin:0 auto 24px}
.code-card .field{margin-bottom:16px}
.code-card input{font-family:var(--mono);font-size:15px;letter-spacing:.04em;text-transform:uppercase}
.code-card .backup-msg{font-size:14px;color:var(--ink);font-weight:500}
/* After the last page: what happens to the files, the consent, and a quiet way to decline. */
.sign-end{max-width:720px;margin:40px auto 0}
.sign-keep{margin:0 0 16px;font-size:13px;line-height:1.7;color:var(--muted)}
.consent{display:flex;align-items:center;gap:16px 24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:20px 24px}
.consent-check{flex:1;min-width:0;padding:0;font-size:14px;line-height:1.75;font-weight:500;color:var(--ink)}
.consent-check input{margin-top:3px}
.consent .btn{flex:none}
.sign-decline{margin:20px 0 0;font-size:13px;color:var(--muted);text-align:center}
.sign-decline .linkish{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:var(--ink-2)}
/* Nothing to consent to until the document is shown (辞退 stays available). */
.sign-root:is([data-state=loading],[data-state=blocked]) :is(.consent,.sign-keep){display:none}
.todo-bar{display:none}

/* The signature sheet: 手書き / 文字で入力 / 印鑑 as a segmented control. */
.sig-modal .box{max-width:600px}
@media (min-width:760px){.sig-modal{place-items:start center;padding-top:max(16px,6vh)}.sig-modal .box{max-height:calc(100vh - max(16px,6vh) - 16px);max-height:calc(100dvh - max(16px,6vh) - 16px)}}
.sig-head h2{margin:0 0 4px}
.sig-head p{margin:0}
.sig-modal .tabs{margin:20px 0}
.sig-modal .tabs button{padding:0 8px;white-space:nowrap}
.sig-modal .pad{background:var(--paper)}
.sig-modal .pad canvas{height:200px}
.sig-modal .pad .base{left:28px;right:28px;bottom:52px;border-top-color:var(--line-2)}
.pad-clear{position:absolute;top:6px;right:6px}
#typed-font{margin:0 0 16px}
.sig-modal .typed-preview{height:132px;border-style:dashed;border-color:var(--line-2)}
.sig-modal input[type=file]{display:block;width:100%;max-width:100%;font-size:14px;color:var(--ink-2)}
.sig-modal input[type=file]::file-selector-button{font:inherit;font-size:14px;font-weight:600;min-height:44px;padding:0 16px;margin-right:12px;border:1px solid var(--line-2);border-radius:var(--r-control);background:var(--paper);color:var(--ink);cursor:pointer}
.sig-modal input[type=file]::file-selector-button:hover{background:var(--ground)}
/* 印鑑: 丸印 and 角印 side by side, each about its real size; the chosen one is exported. */
.hanko-mode{margin-bottom:20px}
.hanko-make .field{margin-bottom:16px}
.hanko-kinds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hanko-kind{position:relative;margin:0;cursor:pointer;font-weight:500}
.hanko-kind input{position:absolute;opacity:0;pointer-events:none}
.hk-body{position:relative;display:grid;justify-items:center;gap:2px;height:100%;padding:12px 12px 14px;border:1px solid var(--line-2);border-radius:var(--r-card);background:var(--paper);transition:border-color .12s,box-shadow .12s}
.hk-body::before{content:"";position:absolute;top:12px;left:12px;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--paper)}
.hanko-kind:hover .hk-body{border-color:var(--line-hover)}
.hanko-kind input:checked+.hk-body{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.hanko-kind input:checked+.hk-body::before{border-color:var(--ink);background:var(--ink);box-shadow:inset 0 0 0 3px var(--paper)}
.hanko-kind input:focus-visible+.hk-body{outline:2px solid var(--focus);outline-offset:2px}
.hk-stage{display:grid;place-items:center;width:100%;height:100px}
.hk-stage canvas{display:block;width:15mm;height:15mm}
.hanko-kind[data-kind=kaku] .hk-stage canvas{width:21mm;height:21mm}
.hk-name{font-size:14px;font-weight:600;line-height:1.5;color:var(--ink)}
.hk-note{font-size:12px;line-height:1.5;color:var(--muted)}
.hanko-shape .hint{margin-top:10px}

/* Done: the stamp moment, then what happens next, the files when complete, and the receipt. */
.done-hero{text-align:center;padding:8px 0 0}
.done-hero h1{font-size:28px;line-height:1.45;margin:24px 0 8px}
.done-hero h1 .seal{--size:13px;position:relative;top:-.62em;margin-left:.16em;vertical-align:baseline}
.done-hero .lead{max-width:460px;margin:0 auto 32px;color:var(--ink-2);font-size:15px;line-height:1.8}
.done-status{margin:0 0 24px}
.done-status .code-form .self-link{margin-top:4px}
.done-status .code-form input{font-size:14px;letter-spacing:.02em;padding:0 12px}
.done-files{display:grid;gap:12px;margin:0 0 24px}
.done-files .file .btn{margin-left:auto}
.receipt{margin:0 0 32px;border-top:1px solid var(--line);font-size:14px;line-height:1.6}
.receipt>div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.receipt dt{color:var(--muted)}
.receipt dd{margin:0;min-width:0;color:var(--ink);overflow-wrap:break-word}
.receipt dd.doc-title{font-size:16px;line-height:1.6}
.receipt-sub{display:block;font-size:12px;color:var(--muted)}
/* The hero is centred; everything from the files down reads from the left edge, under the receipt. */
.done-next{display:flex;justify-content:flex-start;margin:0 0 24px}
.done-fine{margin:0;font-size:13px;line-height:1.75;color:var(--muted);text-align:left}
#in-app-note{margin:-8px 0 24px}

/* /d/: the completed files by link (the mail's too-big fallback). */
.dl .badge{margin-bottom:12px}
.dl-title{font-size:28px;line-height:1.5;margin:0 0 8px}
.dl .lead{color:var(--ink-2);margin:0 0 24px}

@media (max-width:759px){
 .shell-signer main{padding-top:20px}
 .shell-signer .steps{margin-bottom:20px}
 .req{padding:24px 20px}
 .req-title{font-size:24px;margin-bottom:20px}
 .req-title.is-long,.dl-title.is-long{font-size:18px}
 .req-meta>div{grid-template-columns:64px minmax(0,1fr);gap:12px}
 .verify h1{font-size:22px}
 .verify .otp{gap:6px}
 .verify .otp input{width:calc((100% - 30px - 8px)/6);height:58px;font-size:24px;padding:0}
 .verify .otp input:nth-child(3){margin-right:8px}
 .msg{padding-top:24px}
 .msg-title{font-size:22px}
 /* Sign page: the bar scrolls away on phones; the bottom of the screen carries the next step. */
 .sign-head{padding-top:20px}
 .signbar{position:static}
 .signbar-in{min-height:0;padding-top:12px;padding-bottom:14px}
 .signbar-title{font-size:18px;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
 .signbar-meta{gap:0 12px;font-size:12px}
 .signbar-act #next-field{display:none}
 .signbar-act .todo-count{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
 .sign-body{padding-top:16px;padding-bottom:40px}
 .sign-end{margin-top:32px}
 .consent{flex-direction:column;align-items:stretch;padding:16px}
 .code-card input{font-size:14px;letter-spacing:.02em;padding:0 12px}
 .consent .btn{width:100%}
 .sign-root[data-state=todo] .todo-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:25;background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(30,34,41,.06);padding:12px 0 calc(12px + env(safe-area-inset-bottom))}
 .todo-bar-in{display:flex;align-items:center;gap:12px}
 .todo-bar .todo-count{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
 .todo-bar .btn{flex:none;padding:0 24px}
 /* Everything filled: the consent and 「同意して署名する」 are fixed to the bottom of the screen. */
 .sign-root[data-state=ready] .consent{position:fixed;left:0;right:0;bottom:0;z-index:25;gap:12px;border-width:1px 0 0;border-radius:var(--r-card) var(--r-card) 0 0;box-shadow:var(--float);padding:14px 16px calc(14px + env(safe-area-inset-bottom));animation:sheet-in .2s ease-out;max-height:70vh;overflow-y:auto}
 .sign-root[data-state=ready] .consent-check{font-size:13px;line-height:1.65}
 .sig-modal .pad canvas{height:180px}
 .sig-modal .pad .base{left:20px;right:20px;bottom:44px}
 .sig-modal .typed-preview{height:112px}
 .sig-modal .tabs{margin:16px 0}
 .hk-stage{height:92px}
 .done-hero h1{font-size:22px}
 .done-hero .lead{margin-bottom:28px}
 .receipt>div{grid-template-columns:72px minmax(0,1fr);gap:12px}
 .dl-title{font-size:22px}
}
@media (max-width:359px){
 .req{padding:20px 16px}
 .req-meta>div{grid-template-columns:minmax(0,1fr);gap:0}
 .receipt>div{grid-template-columns:minmax(0,1fr);gap:0}
 .hanko-kinds{gap:8px}
}
@media (prefers-reduced-motion:reduce){
 .sign-doc .fld.next{box-shadow:0 0 0 4px color-mix(in srgb,var(--sc,var(--s1)) 24%,transparent)}
}
@media print{.signbar,.todo-bar,.consent,.sign-decline{display:none}.sign-main{background:#fff}}