/* app.css: My Strategy preview (route 4 demo).
   Part 1 is copied from prototype build 65's style block (index.html, SHA-256 f97461b2be87cc39; extract/prototype.css),
   trimmed to what these pages use, with the class names and values unchanged (tokens, type steps, buttons, badges,
   chips, cards, the lettered banner .tb-sec, fields, the rail .bnav, the strip, the readiness drawer .ai-drawer,
   target blocks, the modal, the action bar). The photographs (--ph-m and friends) are left out.
   Part 2 holds this demo's own additions, every class prefixed r4-.
   No web font is loaded (no third-party requests): the stack is the prototype's own, so Arial stands in for Asap
   unless Asap is installed on the computer. */

/* ================================================================ Part 1: from the prototype */
:root{
  --og-deep:#007046; --og-green:#39B54A;
  --bb-sea:#004B4E; --bb-land:#009077; --bb-sky:#00B9BD;
  --bb-rose:#CD546D; --bb-saffron:#EAC62D; --bb-steel:#6399B0; --bb-gold:#B8925A;
  --grey9:#76777A; --grey5:#BCBEC0; --ink:#33383B; --body:#595959; --muted:#595959;
  --paper:#FFFFFF; --mist:#F4F6F5; --mist2:#EAF0ED; --line:#DDE3E0;
  --ok:#007046; --warn:#8A6400; --bad:#A83A50; --crit:#7C1F33; --info:#00666B;
  --chart1:#007046; --chart2:#00B9BD; --chart3:#CD546D; --chart4:#39B54A;
  --r:8px; --shadow:0 1px 2px rgba(0,40,30,.06),0 4px 14px rgba(0,40,30,.07);
  --font:'Asap',Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--body);background:var(--mist);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{color:var(--bb-sea);line-height:1.3;font-weight:700}h1{font-size:23px}h2{font-size:19px}h3{font-size:15px}h4{font-size:13.5px}h5{font-size:12.5px}
.og h1,.og h2,.og h3,.og h4,.og h5{color:var(--og-deep)}
a{color:var(--og-deep);text-decoration:none}a:hover{text-decoration:underline}a[href]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}a[href]:hover{text-decoration-thickness:2px}a.btn[href],a.btn[href]:hover{text-decoration:none}
button{font-family:var(--font)}
:focus-visible{outline:3px solid #005A38;outline-offset:2px}
.weave :focus-visible,.tbl th :focus-visible,.target-block.tgt>.tb-h :focus-visible,.on-dark :focus-visible,.on-dark:focus-visible{outline-color:#fff}
button.lnk{background:none;border:none;padding:0;font:inherit;color:var(--og-deep);cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-align:left;min-height:24px}
button.lnk:hover{text-decoration:underline;text-decoration-thickness:2px}
button.lnk.small{font-size:12.5px}
.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}
.small{font-size:12.5px}.muted{color:var(--body)}.nowrap{white-space:nowrap}
.mono{font-variant-numeric:tabular-nums}

/* app header */
.app-head{background:var(--paper);border-bottom:1px solid var(--line);padding:10px 22px;display:flex;align-items:center;gap:16px}
.app-head .mark{height:64px;width:64px;flex:0 0 auto;padding:2px}
.app-title .t1{font-size:19px;font-weight:700;color:var(--og-deep);letter-spacing:.2px}
.app-title .t2{font-size:11.5px;color:var(--body)}
.app-head .who{margin-left:auto;text-align:right}
.who .n{font-weight:600;color:var(--ink);font-size:13.5px}
.who .o{font-size:11.5px;color:var(--body)}
.who .badge{display:inline-block;margin-top:3px}

/* weave band (the gradient form; the photographs are not used) */
.weave{background:
  linear-gradient(112deg, rgba(0,112,70,.97) 0%, rgba(0,112,70,.88) 45%, rgba(0,112,70,.72) 100%),
  linear-gradient(292deg, rgba(57,181,74,.55) 0%, rgba(57,181,74,0) 55%),
  linear-gradient(68deg, rgba(57,181,74,.35) 10%, rgba(0,112,70,0) 60%),
  #007046;
  position:relative;overflow:hidden}
.weave:before,.weave:after{content:"";position:absolute;inset:-40%;pointer-events:none;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 26px, rgba(255,255,255,0) 26px 74px)}
.weave:after{background:repeating-linear-gradient(65deg, rgba(11,60,40,.16) 0 34px, rgba(255,255,255,0) 34px 96px)}
.weave.bb{background:linear-gradient(33deg,#004B4E 0%,#009077 100%)}
.hero{color:#fff;padding:22px 26px;position:relative;z-index:1}
.hero h1{color:#fff;font-size:23px;margin-bottom:2px}
.hero .sub{color:rgba(255,255,255,.85);font-size:13.5px;max-width:900px}

/* layout */
.wrap{max-width:1720px;margin:0 auto;padding:20px 22px 60px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}
.g31{grid-template-columns:2.1fr 1fr}
@media(max-width:980px){.g2,.g3,.g31{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card>.bd{padding:16px 18px}
.card>.hd{padding:13px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card>.hd h3{font-size:15px}
.card>.hd .rt{margin-left:auto;display:flex;gap:8px;align-items:center}
.card.flat{box-shadow:none}
.section-note{background:var(--mist2);border-left:4px solid var(--og-green);padding:10px 14px;border-radius:0 6px 6px 0;font-size:13.5px;margin:10px 0;color:var(--ink)}
.callout{border:1px solid var(--line);border-left:4px solid var(--bb-sky);background:#F2FAFA;padding:10px 14px;border-radius:0 6px 6px 0;font-size:13.5px;margin:10px 0}
.callout.warn{border-left-color:var(--bb-saffron);background:#FBF7E6}
.callout.open{border-left-color:var(--bb-rose);background:#FBF1F3}

/* buttons, badges, chips */
.btn{display:inline-flex;align-items:center;gap:7px;justify-content:center;min-height:38px;height:auto;padding:0 18px;border-radius:5px;border:1px solid var(--grey9);background:var(--mist2);color:var(--ink);font-family:var(--font);font-size:13.5px;font-weight:600;white-space:nowrap;cursor:pointer;transition:.15s}.btn:hover{background:#DDE3E0}
.btn.primary{background:var(--og-deep);border-color:var(--og-deep);color:#fff}
.btn.primary:hover{background:#005A38;border-color:#005A38}
.btn.bb{background:var(--bb-sea);border-color:var(--bb-sea);color:#fff}.btn.bb:hover{background:#00666B;border-color:#00666B}
.btn.ghost{background:transparent;border:1.5px solid var(--og-deep);color:var(--og-deep)}
.btn.ghost.bbg{border-color:var(--bb-sea);color:var(--bb-sea)}
.btn.ghost:hover{background:var(--mist2)}
.btn.quiet{background:var(--mist2);border:1px solid var(--grey9);color:var(--ink);font-weight:500}.btn.quiet:hover{background:#DDE3E0}.btn.danger{background:var(--bad);border:1px solid var(--bad);color:#fff}.btn.danger:hover{background:#8E2B3F;border-color:#8E2B3F}.btn.danger-quiet{background:#fff;border:1px solid var(--bad);color:var(--bad)}.btn.danger-quiet:hover{background:#FBE9ED}
.btn.sm{min-height:30px;padding:0 12px;font-size:12.5px}
.btn:disabled:disabled,.btn:disabled:disabled:hover{opacity:1;background:var(--mist);color:var(--grey5);border-color:var(--grey5);cursor:not-allowed}
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 10px;min-height:22px;font-size:11.5px;font-weight:600;letter-spacing:.2px}.badge.sm{font-size:11px;min-height:20px;padding:1px 8px}
.badge.green{background:#E2F3E6;color:var(--og-deep)}
.badge.deep{background:var(--og-deep);color:#fff}
.badge.grey{background:var(--mist2);color:var(--body)}
.badge.amber{background:#F7EFCF;color:#6F4F00}
.badge.rose{background:#F7E3E8;color:#8E2B3F}
.badge.sky{background:#DFF4F5;color:var(--info)}
.badge.red{background:#F7E3E8;color:#8E2B3F}
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--mist2);border:1px solid var(--line);border-radius:5px;padding:2px 8px;font-size:12px;font-weight:400;color:var(--ink)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font-size:13.5px}
.kv dt{color:var(--body)}.kv dd{color:var(--ink);font-weight:500}
hr.soft{border:none;border-top:1px solid var(--line);margin:14px 0}

/* tables */
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{background:var(--bb-sea);color:#fff;text-align:left;padding:8px 10px;font-weight:600;font-size:12.5px;letter-spacing:.3px}
.og .tbl th,.tbl.og th{background:var(--og-deep)}
.tbl td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:nth-child(even) td{background:#FAFBFA}
.tbl tr:hover td{background:var(--mist2)}
.tbl td input,.tbl td select{width:100%;min-width:64px}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.data-scroll{overflow-x:auto;position:relative}

/* forms */
label.f{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin:10px 0 4px}
input[type=text],input[type=number],select,textarea{font-family:var(--font);font-size:13.5px;color:var(--ink);border:1px solid var(--grey9);border-radius:5px;padding:8px 10px;background:#fff;width:100%}input[type=text],input[type=number],input[type=search],input[type=email],input[type=tel],input[type=date],input:not([type]),select:not([multiple]){height:36px}textarea{min-height:72px}
input:focus,select:focus,textarea:focus{outline:3px solid #005A38;outline-offset:2px;border-color:var(--og-green)}
input:disabled,select:disabled,textarea:disabled{background:var(--mist);border-color:var(--grey5);color:var(--body)}
.field-row{display:flex;gap:12px;flex-wrap:wrap}.field-row>*{flex:1;min-width:140px}
.seg{display:inline-flex;border:1px solid var(--grey9);border-radius:6px;overflow:hidden}
.seg button{border:none;background:#fff;padding:7px 14px;font-size:13.5px;cursor:pointer;color:var(--body)}
.seg button.on{background:var(--og-deep);color:#fff;font-weight:600}
.seg.legseg{display:flex;flex-wrap:wrap;gap:6px;border:none;border-radius:0;overflow:visible}
.seg.legseg button{border:1px solid var(--grey9);border-radius:6px;background:#fff;padding:6px 12px;font-size:13.5px;line-height:1.3;white-space:normal;text-align:center;font-family:var(--font);color:var(--body);max-width:100%}
.seg.legseg button:hover{border-color:var(--og-deep)}
.seg.legseg button.on{background:var(--og-deep);border-color:var(--og-deep);color:#fff;font-weight:600}
.seg.legseg button:disabled{cursor:default}
.q-follow-l{font-weight:700;color:var(--ink);font-size:13.5px;max-width:450px}
.evd{display:inline-flex;align-items:center;gap:6px;border:1.5px dashed var(--grey9);border-radius:6px;padding:4px 10px;font-size:12.5px;color:var(--body);cursor:pointer;background:#fff;font-family:var(--font)}
.evd:hover{border-color:var(--og-green);color:var(--og-deep)}
.evd.has{border-style:solid;border-color:var(--og-green);background:#F0FAF2;color:var(--og-deep);font-weight:600}
.req{color:#A83A50;font-weight:700}
.ferr{color:#A83A50;font-size:12.5px;margin-top:3px}
[aria-invalid="true"]{border-color:#A83A50 !important}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:#fff;color:#004B4E;padding:8px 14px;border-radius:6px;border:2px solid #004B4E;font-weight:700}
.skip:focus{left:8px}
input.tick62{width:24px;height:24px;flex:none;margin:0;accent-color:var(--og-deep)}

/* the builder: the rail and the work column */
.builder{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:1080px){.builder{grid-template-columns:1fr}}
.bnav{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow-y:auto}
@media(max-width:1080px){.bnav{position:static;max-height:none}}
.strip{position:sticky;top:0;z-index:40;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:8px 14px 7px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.strip .lbl{font-size:12.5px;color:var(--ink);font-weight:600}
.strip .acts{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.strip .row2{flex-basis:100%;font-size:12.5px;color:var(--body);line-height:1.3;margin-top:-4px}
.bnav .stg{font-size:11.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--body);margin:12px 4px 5px}
.bnav .sec{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:none;background:none;padding:7px 10px;border-radius:6px;color:var(--ink);font-size:13.5px;cursor:pointer;font-family:var(--font)}
.bnav .sec:hover{background:var(--mist2);text-decoration:none}
.bnav .sec.on{background:var(--og-deep);color:#fff;font-weight:600}
.bnav .st{margin-left:auto;font-size:11.5px;flex:none}
.bnav .sec .st.done{color:var(--og-deep);font-weight:700}
.bnav .sec.on .st.done{color:#B6EFC0}
.bnav .st .cnt{font-size:11.5px;font-weight:600;border-radius:9px;padding:0 5px;min-width:18px;height:18px;line-height:18px;text-align:center;letter-spacing:.1px;white-space:nowrap;display:inline-block}
.bnav .st .cnt.todo{background:#F7EFCF;color:#6F4F00}
.bnav .st .cnt.none{background:var(--mist2);color:var(--body)}
.bnav .sec.on .st .cnt.todo{background:#FBF3D6;color:#5B4200}
.bnav .sec.on .st .cnt.none{background:#E4EFE9;color:#0F4C35}

/* target blocks and the lettered banner */
.target-block{border:1px solid var(--line);border-radius:8px;margin:12px 0;overflow:hidden}
.target-block>.tb-h{background:var(--mist2);padding:10px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.target-block>.tb-h h4{font-size:13.5px;color:var(--ink)}
.target-block>.tb-b{padding:12px 14px}
.target-block.tgt{border:0;border-radius:0;margin:6px 0 0;overflow:visible}
.target-block.tgt>.tb-h{background:var(--og-deep);color:#fff;border-radius:8px;padding:10px 12px;margin-top:18px}
.target-block.tgt>.tb-h h4{color:#fff;font-size:13.5px}.target-block.tgt>.tb-h .btn.quiet{color:#fff;border-color:rgba(255,255,255,.7);background:transparent}
.target-block.tgt>.tb-b{padding:0}
.tchip{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.4px;color:#fff;background:var(--og-deep,#004B4E);border-radius:5px;padding:1px 7px;vertical-align:1px}
.tb-sec{display:flex;align-items:center;gap:10px;margin:24px 0 8px;padding:9px 12px;background:var(--mist2);border-left:5px solid var(--og-deep);border-radius:0 8px 8px 0;font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:.2px;scroll-margin-top:120px}
.tb-sec:first-child{margin-top:4px}
.tb-sec .n{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--og-deep);color:#fff;font-size:12.5px;font-weight:700;flex:none}
.tb-sec .n::after{content:"."}
.tb-sec .sub{font-size:12.5px;font-weight:400;color:#595959}

/* question head */
.q-head{display:flex;align-items:baseline;gap:9px;margin:14px 0 6px;scroll-margin-top:120px}
.q-head:first-child{margin-top:4px}
.q-head .qn{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:21px;padding:0 7px;border-radius:11px;border:1.5px solid var(--og-deep);color:var(--og-deep);background:#fff;font-size:11.5px;font-weight:700;letter-spacing:.2px}
.q-head .qt{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.35}
.q-head .qs,.qs{font-size:12.5px;font-weight:400;color:#595959}
.q-ev{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.q-ev .opt{flex-basis:100%;font-size:11.5px;color:#595959}
.sub-flash{outline:2px solid #39B54A;outline-offset:3px;border-radius:4px;transition:outline-color .8s}

/* readiness drawer */
.ai-drawer{position:fixed;right:0;top:0;bottom:0;width:400px;max-width:94vw;background:#fff;box-shadow:-8px 0 30px rgba(0,30,20,.18);z-index:80;display:flex;flex-direction:column;transform:translateX(105%);transition:.25s}
.ai-drawer.open{transform:none}
.ai-h{background:linear-gradient(112deg,rgba(0,75,78,.96),rgba(0,112,70,.92)),var(--ph-m,#007046);background-size:cover;background-position:center 30%;color:#fff;padding:14px 18px}
.ai-h h3{color:#fff;font-size:15px}
.ai-b{flex:1;overflow:auto;padding:14px 16px}
.ai-f{border-top:1px solid var(--line);padding:10px 16px;font-size:11.5px;color:var(--body)}
.finding{border:1px solid var(--line);border-radius:7px;padding:9px 11px;margin:8px 0;font-size:12.5px}
.finding .fh{display:flex;gap:8px;align-items:center;font-weight:600;color:var(--ink);margin-bottom:3px}
@media(min-width:1600px){body.ai-open{padding-right:400px}}
.req-group{margin:10px 0 2px;font-size:12.5px;text-transform:uppercase;letter-spacing:.9px;color:var(--og-deep);font-weight:700;display:flex;gap:8px;align-items:center}

/* modal and toast */
.modal-veil{position:fixed;inset:0;background:rgba(10,25,18,.45);z-index:90;display:none;align-items:center;justify-content:center;padding:20px}
.modal-veil.open{display:flex}
.modal{background:#fff;border-radius:10px;max-width:640px;width:100%;max-height:88vh;overflow:auto;box-shadow:0 18px 60px rgba(0,20,12,.35)}.modal.wide{max-width:1040px}
.modal .mh2{padding:14px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center}
.modal .mh2 h3{font-size:15px}
.modal .mb{padding:16px 20px}
.modal .mf{padding:12px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.modal .close{margin-left:auto;background:none;border:none;font-size:19px;color:var(--body);cursor:pointer}
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#22302B;color:#fff;padding:10px 18px;border-radius:8px;font-size:13.5px;z-index:99;display:none;box-shadow:var(--shadow)}
#toast.show{display:block;animation:tin .2s}
@keyframes tin{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* the action bar, the footer */
.ux-actbar{position:sticky;bottom:0;z-index:35;background:#fff;border:1px solid var(--line);border-top:2px solid var(--og-deep);border-radius:var(--r) var(--r) 0 0;box-shadow:0 -6px 18px rgba(0,40,30,.10);padding:10px 14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}
.ux-actbar .why{font-size:12.5px;color:var(--body)}
.ux-actbar.rest62{position:static;box-shadow:none;border-radius:var(--r)}
.app-foot{border-top:1px solid var(--line);background:#fff;padding:14px 22px;font-size:11.5px;line-height:24px;color:var(--body);text-align:center}
.app-foot b{color:var(--og-deep)}
@media print{.ai-drawer{display:none}}

/* LOOK contract (build 64): links on dark, type steps, the note at the field, action columns */
button.lnk.act64,.lnk.act64{font-size:13.5px;font-weight:600}
.on-dark a[href],.on-dark .lnk,.target-block.tgt>.tb-h .lnk,.hero .lnk{color:#fff}
.on-dark .btn.quiet{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.on-dark .btn.ghost{background:transparent;color:#fff;border-color:#fff}
.t64-cap{font-size:11.5px}.t64-sec{font-size:12.5px}.t64-body{font-size:13.5px}.t64-title{font-size:15px}.t64-h2{font-size:19px}.t64-h1{font-size:23px}.t64-kpi{font-size:30px}
.act-col64{min-width:9.5em;white-space:nowrap}
.act-note64{display:block;margin:4px 0 0;padding:3px 10px;border-radius:5px;background:#F7EFCF;color:#6F4F00;font-size:12.5px;line-height:1.4}
span.act-note64{display:inline-block;margin:0 0 0 8px}

/* ================================================================ Part 2: this demo's additions (r4-) */
[hidden]{display:none !important}
input[type=password]{font-family:var(--font);font-size:13.5px;color:var(--ink);border:1px solid var(--grey9);border-radius:5px;padding:8px 10px;background:#fff;width:100%;height:36px}

/* the preview band under the header, and notices */
.r4-band{background:#F7EFCF;border-bottom:1px solid #E4D9A8;color:#5B4E17;padding:7px 22px;font-size:12.5px;text-align:center;line-height:1.45}
.r4-notice{max-width:1720px;margin:12px auto 0;padding:10px 14px;border:1px solid #E4C2CB;border-left:4px solid var(--bad);background:#FBF1F3;color:#5E1F2C;border-radius:0 6px 6px 0;font-size:13.5px}
.r4-admin .r4-notice{margin:0 0 12px}
.r4-loading{font-size:13.5px;color:var(--body);padding:12px 0}
.r4-ok{color:var(--og-deep);font-size:12.5px;margin-top:3px;font-weight:600}

/* header: save indicator and the account menu */
.r4-save{margin-left:auto;font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap;min-height:24px;display:inline-flex;align-items:center}
.r4-save:empty{display:none}
.r4-save-saved{background:#E2F3E6;color:var(--og-deep)}
.r4-save-pending,.r4-save-saving{background:var(--mist2);color:var(--ink)}
.r4-save-error,.r4-save-stopped{background:#F7E3E8;color:#8E2B3F}
.r4-app .app-head .who{margin-left:0}
.r4-menu-wrap{position:relative;flex:none}
.r4-menu{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);min-width:190px;z-index:70;padding:6px;display:flex;flex-direction:column}
.r4-menu button{background:none;border:none;text-align:left;padding:8px 10px;border-radius:6px;font-size:13.5px;color:var(--ink);cursor:pointer;min-height:36px}
.r4-menu button:hover,.r4-menu button:focus-visible{background:var(--mist2)}

/* the slim weave band under the preview band (the prototype's slim form, without its photograph) */
.weave.r4-slim .hero{padding:10px 26px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px}
.weave.r4-slim .hero h1{font-size:19px;margin-bottom:0}
.weave.r4-slim .hero .sub{font-size:12.5px;flex:1 1 380px;min-width:0}

/* the work column */
.r4-view{min-width:0}
.r4-view:focus{outline:none}
.r4-sec-head{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;margin-bottom:12px}
.r4-kicker{font-size:11.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--body);font-weight:600}
.r4-sec-head h1{font-size:19px;margin:2px 0 0}
.r4-lead{font-size:13.5px;color:var(--ink);margin-top:6px;max-width:960px;line-height:1.5}
.r4-strip .row2{margin-top:0}
.r4-part{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 18px 16px;margin-bottom:14px}
.r4-part>.tb-sec:first-child{margin-top:0}
.r4-explainer{font-size:12.5px;color:var(--body);margin:-2px 0 8px;line-height:1.45;max-width:960px}
.r4-domain{margin-bottom:14px}
.r4-domain-l{margin-bottom:8px}
.bnav .bd{padding:6px 8px 10px}
.bnav .r4-secnum{flex:none;min-width:24px;font-weight:600}
.bnav .sec .r4-sectitle{flex:1;min-width:0}
.r4-sec-foot{display:flex;justify-content:flex-end;margin-top:8px}

/* a question, stacked: text, controls, evidence, the actions box, then the guidance */
.r4-q{padding:12px 0 14px;border-bottom:1px solid var(--line)}
.r4-q:last-child{border-bottom:none}
.r4-q .q-head{margin:0 0 6px}
.r4-q .q-head .qt{font-weight:400}.r4-q .q-head .qt b{font-weight:700} /* as the prototype's member rows (.q-row.kw): regular text, key words bold */
.r4-qsub{margin:-2px 0 6px 45px}
.r4-ctls{display:flex;flex-direction:column;gap:10px;padding-left:45px}
.r4-ctl{max-width:960px}
.r4-ctl>label.f,.r4-ctl>div.f{margin-top:0}
.r4-ctl>div.f{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin:0 0 4px}
.on-dark .req{color:#fff}
.r4-hint,.r4-sub{font-size:12.5px;color:var(--body);margin:0 0 4px;line-height:1.4}
.r4-count{font-size:11.5px;color:var(--body);margin-top:3px;text-align:right}
.r4-short{max-width:260px}
.r4-num{display:flex;align-items:center;gap:6px}
.r4-suffix{font-size:13.5px;color:var(--ink);font-weight:600}
.r4-ro{font-size:13.5px;color:var(--ink);background:var(--mist);border:1px solid var(--line);border-radius:5px;padding:7px 10px;min-height:36px}
.r4-multi{display:flex;flex-direction:column;gap:6px}
.r4-check{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--ink);cursor:pointer}
.r4-check input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--og-deep)}
.r4-decl{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink);cursor:pointer;line-height:1.45}
.r4-decl input{margin-top:1px}
.r4-tb-ctrls{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;flex-basis:100%}
.r4-tb-ctrls .r4-ctl{max-width:none}
.r4-tb-ctrls label.f,.r4-tb-ctrls div.f{color:#fff;margin:0 0 2px}
.r4-tb-ctrls .r4-short{max-width:150px}
.r4-tb-ctrls select,.r4-tb-ctrls input[type=number]{height:30px;padding:4px 8px}
.target-block.tgt>.tb-h .btn.danger-quiet{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.target-block.tgt>.tb-b>.r4-q{padding-left:2px}
.target-block.tgt.r4-retired>.tb-h{background:#5E6A65}

/* the guidance disclosure */
.r4-guide{margin:10px 0 0 45px;max-width:960px}
.r4-guide>summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--og-deep);width:max-content;min-height:24px;padding:2px 0;list-style-position:inside}
.r4-guide[open]>summary{margin-bottom:6px}
.r4-guide-help,.r4-guide-audit{font-size:12.5px;color:var(--ink);line-height:1.5;background:var(--mist);border-left:3px solid var(--line);padding:8px 12px;border-radius:0 6px 6px 0}
.r4-guide h5{margin:10px 0 4px;color:var(--og-deep)}

/* the evidence slot */
.r4-ev{display:flex;flex-direction:column;gap:6px;width:100%}
.r4-ev-label{font-size:12.5px;font-weight:600;color:var(--ink)}
.r4-att-list{list-style:none;display:flex;flex-direction:column;gap:4px}
.r4-att{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:12.5px;padding:5px 10px;border:1px solid var(--line);border-radius:6px;background:#F0FAF2}
.r4-att-name{font-weight:600;color:var(--ink);word-break:break-all}
.r4-att-meta{color:var(--body)}
.r4-att .btn{margin-left:auto}
.r4-up{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink)}
.r4-up progress{width:160px;height:8px;accent-color:var(--og-green)}
.r4-ev .evd{align-self:flex-start}
.evd:focus-within{outline:3px solid #005A38;outline-offset:2px}
.r4-ev .opt{font-size:11.5px;color:#595959}

/* tables inside questions */
.r4-tblwrap{display:flex;flex-direction:column;gap:6px;align-items:flex-start;max-width:100%}
.r4-tblwrap .data-scroll{width:100%}
.r4-tbl td input,.r4-tbl td select,.r4-tbl td textarea{font-size:12.5px}
.r4-tbl td textarea{min-height:52px;min-width:180px}
.r4-tbl td select{min-width:128px}
.r4-tbl td input[type=text]{min-width:120px}
.r4-tbl td input[type=number]{min-width:96px}
.r4-tbl th.r4-rowlabel{background:#fff;color:var(--ink);font-weight:600;font-size:12.5px;letter-spacing:0;border-bottom:1px solid var(--line);min-width:160px;vertical-align:top}
.r4-tbl tr:nth-child(even) th.r4-rowlabel{background:#FAFBFA}
.r4-ro-cell{display:inline-block;padding:8px 0;color:var(--ink)}
.r4-empty{color:var(--body);font-style:italic}

/* the submission screen */
.r4-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.r4-card .bd>p+p{margin-top:8px}
.r4-cc-kv{margin:10px 0}
.r4-cc-sec{margin-top:8px}
.r4-cc-lines{list-style:none;margin:2px 0 6px;display:flex;flex-direction:column;gap:2px}
.r4-cc-lines li{font-size:12.5px;padding:3px 0;border-bottom:1px solid var(--line)}
.r4-cc-lines .lnk{font-size:12.5px}
.r4-signoff{padding:4px 0 6px}
.r4-actbar{margin-top:0}
.r4-explain{margin-top:-6px}
.r4-list{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:var(--ink)}
.r4-list li{padding-bottom:10px;border-bottom:1px solid var(--line)}
.r4-list li:last-child{border-bottom:none;padding-bottom:0}
.r4-busy{opacity:.7;cursor:progress}

#r4-history .tbl th,#r4-history .tbl td{padding:6px 8px;white-space:nowrap;letter-spacing:0}
#r4-history .tbl th{font-size:11.5px}
#r4-history .r4-hist-when,#r4-history .r4-hist-by{display:block}
#r4-history .r4-hist-by{font-size:11.5px;color:var(--body)}

/* the document view */
.r4-doc-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.r4-docframe{width:100%;height:calc(100vh - 160px);min-height:560px;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--shadow)}

/* the drawer head */
.r4-drawer-top{display:flex;align-items:center;gap:10px}
.r4-drawer-top h3{flex:1}
.ai-h .t64-sec{color:rgba(255,255,255,.9);margin-top:2px}
.r4-need{font-size:12.5px;text-align:left}

/* sign-in, change password, page not found */
.r4-login{background:var(--mist)}
.r4-login-wrap{max-width:520px;margin:40px auto;padding:0 16px}
.r4-login-card .r4-login-head{display:flex;gap:16px;align-items:center;padding:20px 22px 6px}
.r4-mark-lg{width:96px;height:96px;flex:none}
.r4-login-card h1{font-size:23px}
.r4-form-title{margin-bottom:4px}
.r4-field{margin-bottom:6px}
.r4-wide{width:100%;margin-top:12px}
.r4-forgot{margin-top:12px;color:var(--body)}
.r4-login-foot{margin-top:14px;text-align:center;color:var(--body)}
.r4-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* the operations page */
.r4-admin-intro{margin-bottom:14px}
.r4-admin-intro h1{font-size:23px;margin-bottom:4px}
.r4-admin-intro .t64-body{max-width:960px;color:var(--ink)}
.r4-card{margin-bottom:16px}
.r4-table-wrap{padding:0}
.r4-admin .card>.bd.r4-table-wrap{padding:0}
.r4-admin-tbl th[scope=row]{background:#fff;color:var(--ink);font-weight:600;letter-spacing:0}
.r4-admin-tbl tr:nth-child(even) th[scope=row]{background:#FAFBFA}
.r4-row-actions{display:flex;gap:6px;flex-wrap:wrap}
.r4-subrow td{background:var(--mist) !important}
.r4-gap{margin-left:4px}
.r4-auto{width:auto;min-width:200px}
.r4-more{display:flex;gap:12px;align-items:center;border-top:1px solid var(--line)}
.r4-code{font-family:Consolas,Menlo,monospace;font-size:12px;color:var(--bb-sea)}
.r4-detail{max-width:520px;word-break:break-word}
.r4-temp-row{display:flex;gap:8px;align-items:center;margin:8px 0}
.r4-temp{font-family:Consolas,Menlo,monospace;font-size:15px !important;letter-spacing:.5px}

/* narrower windows: from 1024 px the rail stacks above the work column */
@media(max-width:1280px){.app-head{flex-wrap:wrap}}
@media(max-width:1080px){.r4-ctls,.r4-guide,.r4-qsub{padding-left:0;margin-left:0}}
@media print{.app-head,.r4-band,.bnav,.strip,.app-foot{display:none}}