/* Shared by the Onboarding console pages — /admin, /review and /legal — in
   Daylight Web (Console_Kit/DAYLIGHT_WEB_BRIEF.md), drawn the way
   Console_Kit/kit.css draws every console: white flat cards on the mist page,
   ink primary buttons with lime labels, green confirms, amber asks for a look,
   red is wrong — each with a word. The tokens (--dlw-*) and the frame come
   from /kit/legacy.css, loaded after this. Every gap is on 4 · 8 · 12 · 16 ·
   24 · 32 · 40 · 48 · 64.

   The class names are the ones the pages always used, so their code is
   unchanged. The pages an enterprise opens — /agreement and /esign-sim — load
   it too, after /static/team.css (the tokens and a top bar without the
   console's side rail). */
*{box-sizing:border-box}
[hidden]{display:none!important}
a{color:var(--dlw-green);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--dlw-green-hover)}
strong,b{font-weight:650}
/* the old top bar (legacy.js moves what it holds into the frame) */
.bar{position:sticky;top:0;z-index:20;background:var(--dlw-paper)}
.bar-in{max-width:1200px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bar svg{height:28px;width:auto;display:block}
.bar-r{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.eyebrow{font:500 13px/1.4 var(--dlw-mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--dlw-ink-2)}
.wrap{max-width:1200px;margin:0 auto;padding:40px 24px 64px}
h1{font:650 var(--dlw-h3)/1.2 var(--dlw-font);letter-spacing:-.3px;margin:0 0 8px}
h2{font:650 var(--dlw-h4)/1.25 var(--dlw-font);margin:0}
.sub{color:var(--dlw-ink-2);margin:0 0 24px;font-size:15px}
.mono{font-family:var(--dlw-mono);font-size:14px}
.muted{color:var(--dlw-ink-2)}
.small{font-size:15px;line-height:1.5}
.row{display:flex;gap:var(--dlw-space-12);align-items:center;flex-wrap:wrap}
.spacer{flex:1}

/* controls: M 48/24 (default) · S 40/16, flat, colour steps only */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--dlw-space-8);min-height:48px;padding:0 var(--dlw-space-24);border:0;border-radius:14px;
  background:var(--dlw-mist-2);color:var(--dlw-ink);cursor:pointer;font:650 17px/1.2 var(--dlw-font);text-decoration:none;white-space:nowrap;
  transition:background-color var(--dlw-dur-state) var(--dlw-ease-out)}
.btn:hover:not(:disabled){background:var(--dlw-mist-3);color:var(--dlw-ink)}
.btn:disabled{background:var(--dlw-mist-2);color:var(--dlw-ink-3);cursor:not-allowed}
.btn-primary{background:var(--dlw-ink);color:var(--dlw-lime)}
.btn-primary:hover:not(:disabled){background:var(--dlw-ink-hover);color:var(--dlw-lime)}
.btn-primary:active:not(:disabled){background:var(--dlw-ink-press)}
.btn-ghost,.btn-teal{background:var(--dlw-mist-2);color:var(--dlw-ink)}       /* both secondaries now */
.btn-danger{background:var(--dlw-error-soft);color:var(--dlw-error)}
.btn-danger:hover:not(:disabled){background:var(--dlw-error-hover);color:var(--dlw-error)}
.btn-sm{min-height:40px;padding:0 var(--dlw-space-16);border-radius:12px;font-size:15px}
.btn svg{width:18px;height:18px}
.btn-sm svg{width:16px;height:16px}
/* fields: label 8 control 8 helper, 56 tall, 2px border */
.input,.select,textarea.input{width:100%;min-height:56px;padding:0 var(--dlw-space-16);border:2px solid var(--dlw-ink-3);border-radius:16px;background:var(--dlw-paper);
  color:var(--dlw-ink);caret-color:var(--dlw-ink);font:450 17px/1.4 var(--dlw-font)}
.input::placeholder{color:var(--dlw-ink-3)}
.input:focus,.select:focus{outline:none;border-color:var(--dlw-ink);box-shadow:var(--dlw-focus-input)}
.input[readonly]{background:var(--dlw-mist);border-color:var(--dlw-mist-3);color:var(--dlw-ink-2)}
.input:disabled,.select:disabled{background-color:var(--dlw-mist-2);border-color:var(--dlw-mist-3);color:var(--dlw-ink-3);cursor:not-allowed}
.select{appearance:none;-webkit-appearance:none;background:var(--dlw-paper) var(--kit-chev) no-repeat right 16px center/18px 18px;padding-right:48px;cursor:pointer}
.select option{background:var(--dlw-paper);color:var(--dlw-ink)}
textarea.input{display:block;min-height:96px;padding:var(--dlw-space-16);resize:vertical;line-height:1.6}
input[type=checkbox],input[type=radio]{appearance:none;-webkit-appearance:none;width:24px;min-width:24px;height:24px;margin:0;padding:0;flex:none;vertical-align:middle;
  border:2px solid var(--dlw-ink-3);border-radius:6px;background:var(--dlw-paper) center/16px 16px no-repeat;cursor:pointer}
input[type=radio]{border-radius:999px}
input[type=checkbox]:checked,input[type=radio]:checked{background-color:var(--dlw-ink);border-color:var(--dlw-ink);background-image:var(--kit-tick)}
input[type=checkbox]:disabled{background-color:var(--dlw-mist-2);border-color:var(--dlw-mist-3);cursor:not-allowed}
input[type=checkbox]:checked:disabled{background-image:var(--kit-tick-off)}
.field{display:flex;flex-direction:column;gap:var(--dlw-space-8);margin-bottom:var(--dlw-space-24);min-width:0}
.field label,.lbl{font:600 15px/1.4 var(--dlw-font);color:var(--dlw-ink)}
.field .hint{font:500 14px/1.45 var(--dlw-font);color:var(--dlw-ink-2)}
.field .err{font:600 14px/1.45 var(--dlw-font);color:var(--dlw-error)}
.field.bad .input,.field.bad .select{border-color:var(--dlw-error)}
/* a value the reviewer changed: soft lime, the highlight */
.field.changed .input,.field.changed .select{border-color:var(--dlw-ink);background-color:var(--dlw-lime-soft)}
/* two or three across when there is room for 240 / 200 each — the review column is narrow */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:0 var(--dlw-space-24)}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:0 var(--dlw-space-24)}
/* segmented choice: S buttons on a mist-2 track; the chosen one is soft lime with an ink ring */
.seg{display:inline-flex;flex-wrap:wrap;gap:var(--dlw-space-4);padding:var(--dlw-space-4);border-radius:16px;background:var(--dlw-mist-2)}
.seg button{min-height:40px;padding:0 var(--dlw-space-16);border:0;border-radius:12px;background:transparent;color:var(--dlw-ink);font:650 15px/1.2 var(--dlw-font);
  cursor:pointer;transition:background-color var(--dlw-dur-state) var(--dlw-ease-out)}
.seg button:hover{background:var(--dlw-mist-3)}
.seg button[aria-pressed=true]{background:var(--dlw-lime-soft);box-shadow:inset 0 0 0 2px var(--dlw-ink)}
.seg button[aria-pressed=true]:focus-visible{box-shadow:inset 0 0 0 2px var(--dlw-ink),var(--dlw-focus)}
/* the test environment says so in amber, flat — never a stripe */
.seg.env button[data-env=test][aria-pressed=true]{background:var(--dlw-amber-soft);color:var(--dlw-amber);box-shadow:inset 0 0 0 2px var(--dlw-amber)}

/* surfaces: flat white cards on the mist page */
.panel{background:var(--dlw-paper);border-radius:20px;overflow:auto;min-width:0}      /* a wide table scrolls inside it on a phone, never off the page */
.card{background:var(--dlw-paper);border-radius:20px;padding:var(--dlw-card-pad);margin-bottom:var(--dlw-space-24);min-width:0}
.card h3,.grp h3{font:500 13px/1.4 var(--dlw-mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--dlw-ink-2);margin:0 0 12px}
.empty{padding:var(--dlw-space-40) var(--dlw-space-24);text-align:center;color:var(--dlw-ink-2);font-size:15px}
/* tables: mono headers, 16 rows, dividers inside the card */
table{width:100%;border-collapse:collapse;font:450 15px/1.45 var(--dlw-font)}
th{text-align:left;font:600 12px/1.4 var(--dlw-mono);letter-spacing:1px;text-transform:uppercase;color:var(--dlw-ink-2);padding:var(--dlw-space-16) var(--dlw-space-12);
  border-bottom:1px solid var(--dlw-mist-2);vertical-align:bottom}
td{padding:var(--dlw-space-16) var(--dlw-space-12);border-bottom:1px solid var(--dlw-mist-2);color:var(--dlw-ink);vertical-align:top}
.panel th:first-child,.panel td:first-child{padding-left:var(--dlw-space-24)}
.panel th:last-child,.panel td:last-child{padding-right:var(--dlw-space-24)}
tr:last-child td{border-bottom:0}
tbody tr.click{cursor:pointer}
tbody tr.click:hover td{background:var(--dlw-mist)}
tbody tr.sel td{background:var(--dlw-lime-soft)}
td b{color:var(--dlw-ink)} td small{display:block;color:var(--dlw-ink-2);font-size:14px}
/* status: a word on a flat tint — green done, amber look, red wrong */
.badge{display:inline-flex;align-items:center;min-height:28px;padding:0 var(--dlw-space-12);border-radius:999px;font:600 14px/1.2 var(--dlw-font);white-space:nowrap;
  background:var(--dlw-mist-2);color:var(--dlw-ink)}
td .badge{border-radius:8px}
.b-yellow{background:var(--dlw-amber-soft);color:var(--dlw-amber)}
.b-teal{background:var(--dlw-green);color:var(--dlw-on-ink)}
.b-cyan{background:var(--dlw-green-soft);color:var(--dlw-green)}
.b-muted{background:var(--dlw-mist-2);color:var(--dlw-ink)}
.b-red{background:var(--dlw-error-soft);color:var(--dlw-error)}
.notice{padding:var(--dlw-space-12) var(--dlw-space-16);border-radius:16px;background:var(--dlw-mist);color:var(--dlw-ink);font-size:15px;margin-bottom:var(--dlw-space-16)}
.card .notice{background:var(--dlw-mist)}
.warn{padding:var(--dlw-space-12) var(--dlw-space-16);border-radius:16px;background:var(--dlw-error-soft);color:var(--dlw-error);font-size:15px;margin-bottom:var(--dlw-space-16)}
.warn ul,.notice ul{margin:var(--dlw-space-8) 0 0;padding-left:var(--dlw-space-24)}
.testbar{background:var(--dlw-amber-soft);color:var(--dlw-amber);font-size:15px}
.testbar div{max-width:none;margin:0;padding:var(--dlw-space-12) var(--lg-inline,24px)}
.testbar b{font:500 13px/1.4 var(--dlw-mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--dlw-amber)}
dl{display:grid;grid-template-columns:176px minmax(0,1fr);gap:var(--dlw-space-8) var(--dlw-space-16);margin:0;font-size:15px}
dt{color:var(--dlw-ink-2)} dd{margin:0;word-break:break-word}
@media (max-width:560px){dl{grid-template-columns:minmax(0,1fr);gap:0}dd{margin-bottom:var(--dlw-space-8)}}

/* audit trail */
.trail{display:grid;gap:0;font-size:15px}
.trail .ev{display:grid;grid-template-columns:152px minmax(0,1fr);gap:var(--dlw-space-12);padding:var(--dlw-space-12) 0;border-bottom:1px solid var(--dlw-mist-2)}
.trail .ev:last-child{border-bottom:0}
.trail .when{color:var(--dlw-ink-2);font:500 14px/1.45 var(--dlw-mono)}
.trail .what b{color:var(--dlw-ink)}
.trail .detail{margin-top:var(--dlw-space-4);color:var(--dlw-ink-2);font-size:14px;white-space:pre-wrap;word-break:break-word}
.trail .diff{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--dlw-space-4) var(--dlw-space-12);margin-top:var(--dlw-space-8);font-size:14px}
.trail .diff del{color:var(--dlw-error);text-decoration:line-through}
.trail .diff ins{color:var(--dlw-green);text-decoration:none}
@media (max-width:640px){.trail .ev{grid-template-columns:minmax(0,1fr);gap:var(--dlw-space-4)}}

/* the agreement: section navigator + reader */
.docgrid{display:grid;grid-template-columns:256px minmax(0,1fr) 336px;gap:var(--dlw-space-24);align-items:start}
@media (max-width:1180px){.docgrid{grid-template-columns:232px minmax(0,1fr)}.docgrid .side{grid-column:1/-1}}
@media (max-width:760px){.docgrid{grid-template-columns:minmax(0,1fr)}}
.toc{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;padding:var(--dlw-space-8)}
.toc a{display:flex;gap:var(--dlw-space-8);align-items:baseline;min-height:40px;padding:var(--dlw-space-8) var(--dlw-space-12);border-radius:12px;color:var(--dlw-ink);text-decoration:none;font:500 15px/1.4 var(--dlw-font);
  transition:background-color var(--dlw-dur-state) var(--dlw-ease-out)}
.toc a:hover{background:var(--dlw-mist);color:var(--dlw-ink)}
.toc a.cur{background:var(--dlw-lime-soft);color:var(--dlw-ink);font-weight:650}
.toc a .n{font:500 13px/1.4 var(--dlw-mono);color:var(--dlw-ink-2);min-width:24px}
.toc a .dot{margin-left:auto;min-width:24px;height:24px;border-radius:999px;background:var(--dlw-amber-soft);color:var(--dlw-amber);font:600 13px/1 var(--dlw-font);display:grid;place-items:center;padding:0 var(--dlw-space-8)}
.toc a .dot.t{background:var(--dlw-green-soft);color:var(--dlw-green)}
.toc a.del .t2{text-decoration:line-through;color:var(--dlw-ink-3)}
@media (max-width:1023px){.toc{top:16px}}
@media (max-width:760px){.toc{position:static;max-height:224px}}
.sec{background:var(--dlw-paper);border-radius:20px;padding:var(--dlw-card-pad);margin-bottom:var(--dlw-space-16)}
.sec.gone{background:var(--dlw-mist-2)}
.sec.gone .prose{color:var(--dlw-ink-3)}
.sec-h{display:flex;align-items:flex-start;gap:var(--dlw-space-12);margin-bottom:var(--dlw-space-12);flex-wrap:wrap}
.sec-h .num{font:600 14px/1.4 var(--dlw-mono);color:var(--dlw-ink);background:var(--dlw-mist-2);border-radius:8px;padding:var(--dlw-space-4) var(--dlw-space-8)}
.sec-h h2{font-size:var(--dlw-h4);flex:1;min-width:200px}
.tag{display:inline-flex;align-items:center;min-height:28px;font:600 14px/1.2 var(--dlw-font);border-radius:999px;padding:0 var(--dlw-space-12);
  color:var(--dlw-error);background:var(--dlw-error-soft)}
.tag.info{color:var(--dlw-green);background:var(--dlw-green-soft)}
.prose{font-size:17px;line-height:1.7;color:var(--dlw-ink);max-width:var(--dlw-measure-body)}
.prose p{margin:0 0 16px}
.prose p.ind{padding-left:var(--dlw-space-24)}
.prose h4{font:650 17px/1.4 var(--dlw-font);margin:var(--dlw-space-24) 0 var(--dlw-space-8);color:var(--dlw-ink)}
.prose b{color:var(--dlw-ink)}
.prose table{margin:var(--dlw-space-8) 0 var(--dlw-space-16);font-size:15px;border:1px solid var(--dlw-mist-3);border-radius:16px;overflow:hidden;display:block;overflow-x:auto}
.prose th,.prose td{padding:var(--dlw-space-8) var(--dlw-space-12);border-bottom:1px solid var(--dlw-mist-2);border-right:1px solid var(--dlw-mist-2);text-transform:none;letter-spacing:0;font:450 15px/1.5 var(--dlw-font)}
.prose tr:first-child td{background:var(--dlw-mist);color:var(--dlw-ink);font-weight:650}
.prose .blank{background:var(--dlw-lime-soft);color:var(--dlw-ink);border-radius:4px;padding:0 var(--dlw-space-4);font-weight:650}
mark.m-del{background:var(--dlw-error-soft);color:var(--dlw-error);text-decoration:line-through;border-radius:4px;padding:0 2px}
mark.m-edit{background:var(--dlw-green-soft);color:var(--dlw-ink);border-bottom:2px solid var(--dlw-green);border-radius:4px;padding:0 2px;cursor:help}
mark.m-sug{background:var(--dlw-amber-soft);color:var(--dlw-ink);border-bottom:2px dotted var(--dlw-amber);border-radius:4px;padding:0 2px;cursor:help}
.sec-actions{display:flex;gap:var(--dlw-space-8);flex-wrap:wrap;margin-top:var(--dlw-space-8);padding-top:var(--dlw-space-16);border-top:1px solid var(--dlw-mist-2)}
.side{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto}
@media (max-width:1180px){.side{position:static;max-height:none}}
.mk{border-radius:16px;padding:var(--dlw-space-16);margin-bottom:var(--dlw-space-12);background:var(--dlw-paper);font-size:15px}
.mk.pending{background:var(--dlw-amber-soft)}
.mk.accepted{background:var(--dlw-green-soft)}
.mk.rejected,.mk.withdrawn{background:var(--dlw-mist-2);color:var(--dlw-ink-2)}
.mk .who{color:var(--dlw-ink-2);font-size:14px;margin-bottom:var(--dlw-space-8)}
.mk .q{margin:var(--dlw-space-8) 0;padding:var(--dlw-space-4) var(--dlw-space-12);border-left:2px solid var(--dlw-mist-3);color:var(--dlw-ink);white-space:pre-wrap;max-height:160px;overflow:auto}
.mk .q.old{border-left-color:var(--dlw-error);color:var(--dlw-error);text-decoration:line-through}
.mk .q.new{border-left-color:var(--dlw-green);color:var(--dlw-ink)}
.mk .note{white-space:pre-wrap}
.mk .dec{margin-top:var(--dlw-space-8);display:flex;gap:var(--dlw-space-8);flex-wrap:wrap;align-items:center}
/* the selection toolbar floats over the text: ink, so a shadow */
.selbar{position:fixed;z-index:30;display:flex;gap:var(--dlw-space-4);padding:var(--dlw-space-4);border-radius:16px;background:var(--dlw-ink);box-shadow:var(--dlw-e-menu)}
.selbar button{min-height:40px;font:600 15px/1.2 var(--dlw-font);border:0;border-radius:12px;padding:0 var(--dlw-space-12);cursor:pointer;background:transparent;color:var(--dlw-on-ink);
  transition:background-color var(--dlw-dur-state) var(--dlw-ease-out)}
.selbar button:hover{background:var(--dlw-ink-hover);color:var(--dlw-lime)}
.selbar button:focus-visible{box-shadow:var(--dlw-focus-on-ink)}

/* dialog */
.modal{position:fixed;inset:0;z-index:90;background:var(--dlw-scrim);display:grid;place-items:center;padding:var(--dlw-space-16)}
.dialog{width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--dlw-paper);border-radius:20px;padding:var(--dlw-space-32);box-shadow:var(--dlw-e-menu)}
@media (max-width:767px){.dialog{padding:var(--dlw-space-24)}}
.dialog h2{margin-bottom:var(--dlw-space-8)}
.dialog .actions{display:flex;gap:var(--dlw-space-12);justify-content:flex-end;margin-top:var(--dlw-space-24);flex-wrap:wrap;padding-top:0;border-top:0}
.pin{font-family:var(--dlw-mono);font-size:24px;letter-spacing:.3em;text-align:center}
.pin::placeholder{letter-spacing:normal;font-family:var(--dlw-font);font-size:17px}
.toast{position:fixed;left:50%;bottom:var(--dlw-space-24);transform:translateX(-50%);z-index:300;min-height:48px;display:flex;align-items:center;background:var(--dlw-ink);color:var(--dlw-on-ink);
  border-radius:16px;padding:var(--dlw-space-12) var(--dlw-space-16);font:600 15px/1.4 var(--dlw-font);box-shadow:var(--dlw-e-menu);max-width:calc(100% - 32px)}
.toast.bad{background:var(--dlw-error-soft);color:var(--dlw-error)}
.stepper{display:flex;gap:var(--dlw-space-8);flex-wrap:wrap;margin:var(--dlw-space-8) 0 var(--dlw-space-16)}
.stepper span{display:inline-flex;align-items:center;min-height:32px;font:600 14px/1.2 var(--dlw-font);padding:0 var(--dlw-space-12);border-radius:999px;background:var(--dlw-mist-2);color:var(--dlw-ink-2)}
.stepper span.done{background:var(--dlw-green-soft);color:var(--dlw-green)}
.stepper span.now{background:var(--dlw-ink);color:var(--dlw-lime)}
.layout2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:var(--dlw-space-24);align-items:start}
@media (max-width:980px){.layout2{grid-template-columns:minmax(0,1fr)}}