/* Partner console styles. * * Ported from the v12 prototype with every component class name preserved. QA * selectors, screenshots and muscle memory all depend on them, and the design * is signed off, so this file restyles nothing. * * TOKENS. Section 5.1 asks for the provider palette to be namespaced so a * future theme change is one file. The namespaced names are the source; the * short names below alias them, because every one of the 500 rules ported from * the prototype references the short form and rewriting them all would be a * 500-line diff that changes no pixels and breaks every review of this file * against its source. */ :root{ --partner-ink:#17211B; --partner-forest:#12372B; --partner-forest2:#1E5741; --partner-gold:#C29B3C; --partner-gold-deep:#A8842B; --partner-gold-soft:#F5EAD2; --partner-tint:#E3EDE6; --partner-tintb:#CBDCCE; --partner-paper:#F1EDE2; --partner-card:#FCFAF5; --partner-line:#E1DBCB; --partner-sub:#5B655C; --partner-win:#1E5741; --partner-lose:#8C4622; --partner-lose-soft:#F2E3D6; } :root{ --ink:#17211B; --forest:#12372B; --forest2:#1E5741; --gold:#C29B3C; --gold-deep:#A8842B; --gold-soft:#F5EAD2; --tint:#E3EDE6; --tintb:#CBDCCE; --paper:#F1EDE2; --card:#FCFAF5; --line:#E1DBCB; --sub:#5B655C; --win:#1E5741; --lose:#8C4622; --lose-soft:#F2E3D6; --disp:'Bricolage Grotesque',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --mono:'Space Mono',ui-monospace,monospace; --panew:264px; --panec:78px; } *{box-sizing:border-box;margin:0;padding:0} body{font-family:var(--body);background:var(--paper);color:var(--ink);font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} a{color:var(--forest2);text-decoration:none} :focus-visible{outline:2.5px solid var(--gold);outline-offset:2px;border-radius:8px} h1,h2,h3{font-family:var(--disp);letter-spacing:-.015em;text-wrap:balance} .mono{font-family:var(--mono)} /* frame */ .app{display:grid;grid-template-columns:var(--panew) 1fr;min-height:100vh;transition:grid-template-columns .28s ease} .app.collapsed{grid-template-columns:var(--panec) 1fr} .pane{background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:var(--bannerh,0px);height:calc(100vh - var(--bannerh,0px));overflow:hidden} .pane__top{display:flex;align-items:center;gap:10px;padding:18px 18px 8px} .pane__top svg{width:36px;height:36px;flex:none} .pane__top b{font-family:var(--disp);font-weight:800;font-size:20px;white-space:nowrap} .roompill{margin:0 18px 10px;align-self:flex-start;font-size:11.5px;font-weight:700;color:var(--gold-deep);background:var(--gold-soft);border:1px solid #E8D6A8;border-radius:999px;padding:3px 11px;white-space:nowrap} /* The nav takes the slack and gives it back: on a short window it scrolls itself rather than growing the pane, so the profile button below it stays on screen instead of being clipped by the pane's overflow. */ .pnav{display:flex;flex-direction:column;gap:4px;padding:4px 12px;flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin} .pnav button{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:12px;font-size:14px;font-weight:600;color:#3A453E;text-align:left;white-space:nowrap;transition:background .15s} .pnav button svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .pnav button:hover{background:#EDE8DB} .pnav button.on{background:var(--tint);color:var(--forest2);box-shadow:inset 3px 0 0 var(--gold)} .pane__prof{display:flex;flex:none;align-items:center;gap:10px;margin:8px 12px 14px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:var(--card);text-align:left;transition:background .15s} .pane__prof:hover{background:#EDE8DB} .pane__prof.on{background:var(--tint);border-color:var(--tintb)} .ava2{width:34px;height:34px;border-radius:10px;background:linear-gradient(140deg,var(--forest),var(--forest2));color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;font-family:var(--disp);flex:none} .pp{flex:1;min-width:0} .pp b{display:block;font-size:13.5px;font-family:var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pp small{font-size:11px;color:var(--gold-deep);font-weight:700} .chev{width:15px;height:15px;stroke:#949E95;fill:none;stroke-width:2;flex:none} .app.collapsed .pane__top b,.app.collapsed .pnav button span,.app.collapsed .roompill{display:none} .app.collapsed .pnav button{justify-content:center;padding:11px 0} .app.collapsed .pane__prof{justify-content:center;padding:10px 0;border:0;background:none;margin:8px 6px 12px} .app.collapsed .pane__prof .pp,.app.collapsed .pane__prof .chev{display:none} .overlay{display:none} .top{display:flex;align-items:center;gap:16px;padding:13px clamp(16px,3vw,30px);background:rgba(241,237,226,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:var(--bannerh,0px);z-index:30} .burger{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#3A453E} .burger:hover{background:#EDE8DB} .burger svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round} .greet{font-family:var(--disp);font-weight:800;font-size:clamp(16px,2.1vw,20px);white-space:nowrap} .greet small{display:block;font-family:var(--body);font-weight:600;font-size:11.5px;color:var(--sub)} .search{flex:1;max-width:480px;margin-left:auto;position:relative;min-width:0} .search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:#949E95;fill:none;stroke-width:2;stroke-linecap:round} .search input{width:100%;min-width:0;font:inherit;font-size:13.5px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:9px 14px 9px 38px} .search input:focus{outline:none;border-color:var(--gold)} .ava{width:38px;height:38px;border-radius:50%;background:linear-gradient(140deg,var(--forest),var(--forest2));color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;font-family:var(--disp);flex:none} .main{min-width:0} .content{padding:clamp(18px,2.6vw,28px);max-width:1200px;width:100%;margin:0 auto} .view{display:none} .vhead{margin-bottom:16px} .vhead h2{font-size:clamp(21px,2.7vw,26px);font-weight:800} .vhead p{color:var(--sub);font-size:13.5px;margin-top:2px} @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* ON THE VIEW, NOT ON THE CARD. A card is a fresh element after every host.innerHTML, and a fresh element restarts the animation from opacity 0. Boot repaints every view about a dozen times as the load jobs settle one by one, so keying the rise to .card made the console blink for two seconds on landing. The view container is toggled only by router.paint(), and classList.toggle with an explicit boolean does not touch an element that is already .on, so this plays once per navigation and never on a repaint. */ .view.on{display:block;animation:rise .45s ease both} /* cards */ .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:clamp(16px,2.3vw,22px);box-shadow:0 1px 2px rgba(23,33,27,.04),0 8px 24px rgba(23,33,27,.05)} .eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--forest2)} .eyebrow.gld{color:var(--gold-deep)} .card h3{font-size:16.5px;font-weight:750;margin:2px 0 4px} .cardnote{font-size:13px;color:var(--sub)} .grid2{display:grid;grid-template-columns:1.62fr 1fr;gap:18px;align-items:start} .grid2>*{min-width:0} .aside{display:flex;flex-direction:column;gap:16px} .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px} .mt{padding:16px 18px} .mt .n{font-family:var(--mono);font-size:clamp(23px,3vw,30px);font-weight:700;line-height:1.05;display:block;margin:4px 0 2px} .mt .n em{font-style:normal;font-size:13px;color:var(--sub)} .mt .l{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--sub)} .mt .s{font-size:12px;color:var(--sub)} .mt.hero{background:var(--forest);border-color:var(--forest);color:#EAF2EC} .mt.hero .l,.mt.hero .s,.mt.hero .n em{color:#BFD6C6} .mt.hero .n{color:#fff} .btn{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:#231A05;font-weight:700;font-size:13.5px;border-radius:11px;padding:10px 17px;transition:background .2s,transform .12s;box-shadow:0 2px 8px rgba(194,155,60,.3)} .btn:hover{background:var(--gold-deep);color:#fff} .btn:active{transform:translateY(1px)} .btn.ghost{background:transparent;color:var(--ink);border:1.5px solid #C9C3B2;box-shadow:none} .btn.ghost:hover{background:#EDE8DB} .btn.forest{background:var(--forest);color:#fff;box-shadow:none} .btn.forest:hover{background:#0D2A20} .btn[disabled]{opacity:.45;cursor:not-allowed} .tlink{font-size:13px;font-weight:650;color:var(--forest2)} .fnote{font-size:12px;color:var(--sub);margin-top:9px} /* activation checklist */ .tasks{margin-top:12px;display:flex;flex-direction:column} .task{display:flex;align-items:center;gap:13px;padding:12px 4px;border-bottom:1px dashed var(--line)} .task:last-child{border-bottom:0} .task i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;flex:none;border:2.5px solid var(--line);color:#949E95;background:#fff} .task.dn i{background:var(--forest2);border-color:var(--forest2);color:#fff} .task .tt{flex:1;min-width:0} .task .tt b{display:block;font-size:14px} .task .tt small{font-size:12px;color:var(--sub)} .task.dn .tt b{color:var(--sub);text-decoration:line-through;text-decoration-thickness:1.5px} .task .tlink{white-space:nowrap} .pbar{height:8px;background:#E7E2D3;border-radius:5px;overflow:hidden;margin-top:12px} .pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--forest2),var(--gold));border-radius:5px;transition:width .5s ease} .pline{display:flex;justify-content:space-between;font-size:12px;color:var(--sub);margin-top:6px} .pline b{font-family:var(--mono);color:var(--ink)} /* how it works */ .how{display:flex;flex-direction:column;gap:12px;margin-top:12px} .how .h{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:#3A453E} .how .h i{width:24px;height:24px;flex:none;border-radius:8px;background:var(--tint);color:var(--forest2);display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:700} .how .h b{color:var(--ink)} /* agenda */ .agenda{display:flex;flex-direction:column} .ag{display:flex;gap:13px;align-items:center;padding:11px 2px;border-bottom:1px dashed var(--line)} .ag:last-child{border-bottom:0} .ag .d{width:46px;flex:none;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:5px 0} .ag .d b{display:block;font-family:var(--mono);font-size:15px;line-height:1.1} .ag .d span{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sub)} .ag .d.today{background:var(--gold-soft);border-color:#E8D6A8} .ag .d.today b{color:var(--gold-deep)} .ag .t{flex:1;min-width:0;font-size:13px} .ag .t b{display:block;font-size:13.5px} .ag .t small{color:var(--sub);font-size:12px} .ag .cdchip{margin-left:auto} .cdchip{font-family:var(--mono);font-size:11.5px;color:var(--gold-deep);background:var(--gold-soft);border:1px solid #E8D6A8;border-radius:8px;padding:4px 9px;white-space:nowrap} /* bid desk table */ .tbl{width:100%;border-collapse:collapse;font-size:13px} .tbl th{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);text-align:left;padding:9px 10px;border-bottom:1.5px solid var(--line);white-space:nowrap} .tbl td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:middle} .tbl tbody tr:hover td{background:#F6F2E7} .tbl .num{font-family:var(--mono);white-space:nowrap} .twrap{overflow-x:auto} .rg{font-family:var(--disp);font-weight:750;font-size:14px;white-space:nowrap} .rg small{display:block;font-family:var(--body);font-weight:500;font-size:11.5px;color:var(--sub)} /* An area row is a held-open space, not a cohort: no hover, muted label. */ .arearow td{height:44px} .arearow:hover td{background:transparent} .arearow .rg{color:var(--sub);font-weight:650} .minirail{display:flex;align-items:center;gap:0;min-width:118px} .mr{width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid var(--line);flex:none} .mrl{flex:1;height:2px;background:var(--line);min-width:8px} .mr.past{background:var(--forest2);border-color:var(--forest2)} .mrl.past{background:var(--forest2)} .mr.now{border-color:var(--gold);background:var(--gold-soft);box-shadow:0 0 0 3px rgba(194,155,60,.2)} .stlbl{font-size:10.5px;font-weight:700;color:var(--sub);margin-top:5px;letter-spacing:.03em} .stlbl.hot{color:var(--gold-deep)} .pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;border-radius:999px;padding:4px 11px;white-space:nowrap} .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .pill.sealed{background:var(--forest);color:#EAF2EC} .pill.won{background:var(--tint);color:var(--win)} .pill.lost{background:var(--lose-soft);color:var(--lose)} .pill.pending{background:var(--gold-soft);color:var(--gold-deep)} .pill.paid{background:var(--tint);color:var(--win)} .pill.due{background:var(--gold-soft);color:var(--gold-deep)} .closecell{font-family:var(--mono);font-size:12px;white-space:nowrap} .closecell.hot{color:var(--gold-deep);font-weight:700} /* bid ticket drawer */ .dwr{display:none} tr.exp + tr.dwr{display:table-row} .dwr>td{background:#F8F5EC;padding:0;border-bottom:1.5px solid var(--line)} .dgrid{display:grid;grid-template-columns:1fr;gap:0} .dgrid>*{min-width:0;padding:18px 20px} .brief{border-right:1px solid var(--line)} .dh{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);margin-bottom:10px} .dl{display:flex;flex-direction:column} .dl .r{display:flex;gap:12px;align-items:center;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13px} .dl .r:last-child{border-bottom:0} .dl .r span{width:130px;flex:none;color:var(--sub);font-size:12px} .dl .r b{font-family:var(--mono);font-weight:700;font-size:12.5px} .mixin{flex:1;display:flex;gap:4px;align-items:center;min-width:0} .mixin i{height:8px;border-radius:4px;background:var(--forest2);display:block} .mixin i:nth-child(2){opacity:.65} .mixin i:nth-child(3){opacity:.35} .mixin em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--sub);white-space:nowrap;margin-left:4px} .tkt .steps{display:flex;gap:8px;margin-bottom:12px} .tkt .steps span{font-size:11px;font-weight:700;color:var(--sub)} .tkt .steps span.on{color:var(--gold-deep)} .tkt .steps i{flex:1;height:2px;background:var(--line);align-self:center} .bidform label{font-size:11.5px;font-weight:700;color:var(--sub);display:block;margin:9px 0 4px} .bidform input[type=number],.bidform select{width:100%;font-family:var(--mono);font-size:13.5px;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:8px 11px} .bidform input:focus,.bidform select:focus{outline:none;border-color:var(--gold)} .two{display:grid;grid-template-columns:1fr 1fr;gap:10px} .pk{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px} .pk label{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);border-radius:999px;padding:5px 12px;font-size:11.5px;font-weight:600;color:#3A453E;margin:0;cursor:pointer;background:#fff} .pk input{accent-color:var(--forest2)} .range{display:flex;align-items:center;gap:10px;margin-top:4px} .range input{flex:1;accent-color:var(--gold)} .range b{font-family:var(--mono);font-size:13px;width:44px;text-align:right} .tsum{margin-top:14px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:11px 14px;font-family:var(--mono);font-size:12.5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .tsum b{color:var(--forest)} .scn{width:100%;border-collapse:collapse;font-size:12px;margin-top:10px} .scn th{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--sub);text-align:right;padding:5px 7px;border-bottom:1px solid var(--line)} .scn th:first-child,.scn td:first-child{text-align:left} .scn td{font-family:var(--mono);text-align:right;padding:6px 7px;border-bottom:1px dashed var(--line)} .scn tr:last-child td{border-bottom:0} .consent{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:#3A453E;margin:13px 0 10px;max-width:60ch} .consent input{width:16px;height:16px;accent-color:var(--gold);margin-top:2px;flex:none} .receipt{background:var(--tint);border:1px solid var(--tintb);border-radius:12px;padding:13px 15px;font-size:13px;color:#173D2E} .receipt b{font-family:var(--mono)} /* empty states + ghost */ .empty{text-align:center;padding:clamp(30px,5vw,52px) 20px} .empty svg{width:64px;height:64px;margin-bottom:12px} .empty h3{font-size:19px;font-weight:750;margin-bottom:6px} .empty p{color:var(--sub);font-size:13.5px;max-width:48ch;margin:0 auto 16px} .ghostwrap{position:relative;margin-top:14px} .ghostwrap>.ghost{opacity:.22;filter:grayscale(.3);pointer-events:none} .ghostlbl{position:absolute;inset:0;display:grid;place-items:center} .ghostlbl span{background:var(--card);border:1.5px dashed #C9C3B2;border-radius:999px;padding:7px 16px;font-size:12px;font-weight:700;color:var(--sub)} /* charts */ .chart svg{width:100%;height:auto;display:block} .bar{fill:var(--forest2);opacity:.85} .bar.now{fill:var(--gold)} .axis{font-family:var(--mono);font-size:9px;fill:#949E95} .bval{font-family:var(--mono);font-size:9.5px;fill:var(--forest);font-weight:700} .funnel{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px} .fstep{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 12px;text-align:center} .fstep b{display:block;font-family:var(--mono);font-size:18px} .fstep span{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--sub)} .fstep.hot{background:var(--tint);border-color:var(--tintb)} .fstep.hot b{color:var(--win)} /* coverage table */ .covdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--forest2);margin-right:7px} .covdot.pend{background:var(--gold)} /* Top, not middle: one open dropdown grows its cell, and centred cells would shunt the district field and Declare down the row as it opened. */ .addrow td{background:#F8F5EC;vertical-align:top} .addrow input{width:100%;font:inherit;font-size:13px;background:#fff;border:1.5px solid var(--line);border-radius:9px;padding:8px 11px} .addrow input:focus{outline:none;border-color:var(--gold)} /* the city and region picker. Each panel is ABSOLUTELY positioned now, which the old district list could not be: it lived in a table row inside .twrap (overflow-x:auto), and an absolute panel is clipped by that scroll box at exactly the widths where the list matters most. The picker is its own card, outside any scroll box, so a floating panel is free again, and floating is what keeps the fields below it from being pushed down the page every time a list opens. */ .cvgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .cvfield{min-width:0} .cvfield .celab em{font-style:normal;font-weight:500;color:var(--sub);font-size:11px} .cvcombo{position:relative} .cvbtn{display:flex;align-items:center;gap:8px;width:100%;background:#fff;border:1.5px solid var(--line);border-radius:11px;padding:11px 13px;font:inherit;font-size:14px;color:var(--ink);text-align:left;cursor:pointer} .cvbtn:hover{border-color:#CFD8CE} .cvcombo.open .cvbtn{border-color:var(--gold);box-shadow:0 0 0 3px rgba(194,155,60,.14)} .cvcombo.off .cvbtn{background:#F4F2EB;color:var(--sub);cursor:not-allowed;border-color:var(--line);box-shadow:none} .cvlab{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600} .cvlab.ph{color:#9AA39C;font-weight:400} .cvcar{flex:none;width:0;height:0;border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:5px solid #8B958D} .cvcombo.open .cvcar{transform:rotate(180deg)} .cvpanel{position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1.5px solid var(--line);border-radius:13px;box-shadow:0 18px 40px -18px rgba(20,35,28,.35);padding:8px} .cvpanel[hidden]{display:none} .cvsearch{width:100%;font:inherit;font-size:13px;border:1.5px solid var(--line);border-radius:9px;padding:8px 10px;background:#FBFAF5;margin-bottom:6px} .cvsearch:focus{outline:none;border-color:var(--gold)} .cvlist{max-height:280px;overflow-y:auto} .cvgroup{position:sticky;top:0;background:#fff;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--sub);padding:9px 10px 4px} .cvitem{display:flex;align-items:center;gap:8px;width:100%;text-align:left;font:inherit;font-size:13.5px;background:none;border:0;border-radius:8px;padding:8px 10px;cursor:pointer;color:var(--ink)} .cvitem:hover{background:var(--tint)} .cvitem.is-disabled{color:#9AA39C;cursor:default} .cvitem.is-disabled:hover{background:none} .cvsub{color:var(--sub);font-size:12px} .cvtag{margin-left:auto;flex:none;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--forest2);background:var(--tint);border-radius:20px;padding:2px 8px} .cvtag.soon{color:#8A6D22;background:#F6EEDC} .cvchk{margin-left:auto;flex:none;color:var(--forest2);font-weight:700} .cvempty{padding:14px 10px;color:var(--sub);font-size:13px;text-align:center} .cvresolved{margin-top:16px;border-top:1px dashed var(--line);padding-top:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--sub)} .cvresolved b{font-family:var(--mono);font-size:12.5px;color:var(--forest2)} .cvrow2{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-top:18px} .cvrow2 .msel{min-width:200px} /* On the picker card the speed panel FLOATS, exactly like the city and region panels above it. Same geometry, same z-index, same shadow, so the two rows of this one card behave as one control and not as two. In flow it grew the row: opening the list pushed the technology chips and Declare down the card, resized the card, and moved the button out from under the cursor that was on its way to it. The reason the shared rule stays in flow (a .twrap scroll box clipping an absolute panel) does not apply here, because this copy of the control is on a card, outside any scroll box. */ .cvrow2 .mselpanel{position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0; margin-top:0;border-radius:13px;box-shadow:0 18px 40px -18px rgba(20,35,28,.35)} /* The picker's technology group is the same chip group the edit row uses, so the one chip handler and chosenSpeeds() still find it by .cechips. Only the look differs: in a dropdown panel these are a stacked checkbox list, and out here on the card they are four pills in a row. Hence a modifier rather than a second group with its own handler. */ .cechips.cvchips{flex-direction:row;gap:8px;flex-wrap:wrap} .cechips.cvchips button{width:auto;border:1.5px solid var(--line);border-radius:20px;padding:7px 14px;font-size:12.5px;color:var(--ink)} .cechips.cvchips button::before{display:none;content:none} .cechips.cvchips button.on{border-color:var(--forest2);background:var(--tint);color:var(--forest);font-weight:600} .cechips.cvchips button.on::before{display:none;content:none} .cvsmall{display:block;margin-top:14px;font-size:12px;color:var(--sub);line-height:1.6} .cvnone{border:1px dashed var(--line);border-radius:12px;padding:18px;text-align:center;color:var(--sub);font-size:13px} @media (max-width:768px){.cvgrid{grid-template-columns:1fr}.cvrow2{align-items:stretch}.cvrow2 .btn{width:100%;justify-content:center}.cvlist{max-height:50vh}} /* feed, toggles, account */ .feed ul{list-style:none;display:flex;flex-direction:column} .feed li{position:relative;padding:0 0 12px 20px;font-size:13px;color:#3A453E} .feed li::before{content:"";position:absolute;left:4px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--gold)} .feed li::after{content:"";position:absolute;left:7.5px;top:17px;bottom:-2px;width:1.5px;background:var(--line)} .feed li:last-child::after{display:none} .feed .when{font-family:var(--mono);font-size:10.5px;color:var(--sub);display:block} .tog{display:flex;align-items:center;gap:11px;padding:8px 0;font-size:13px;color:#3A453E;cursor:pointer;position:relative} .tog input{position:absolute;opacity:0;pointer-events:none} .tog i{width:36px;height:21px;border-radius:999px;background:#D9D2BF;position:relative;flex:none;transition:background .2s} .tog i::after{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#FCFAF5;transition:left .2s;box-shadow:0 1px 3px rgba(23,33,27,.25)} .tog input:checked + i{background:var(--forest2)} .tog input:checked + i::after{left:18px} .pi{list-style:none;margin-top:10px;display:flex;flex-direction:column} .pi li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13.5px} .pi span{color:var(--sub);width:104px;flex:none;font-size:12.5px} .pi b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pi .tlink{margin-left:auto} /* toast, controls */ .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--forest);color:#fff;font-size:13px;font-weight:600;border-radius:12px;padding:11px 18px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:70} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .drop{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(18,55,43,.14);display:none;z-index:40;overflow:hidden} .drop.open{display:block} .drop button{display:flex;width:100%;text-align:left;gap:10px;align-items:center;padding:10px 14px;font-size:13px;border-bottom:1px dashed var(--line)} .drop button:last-child{border-bottom:0} .drop button:hover{background:#F6F2E7} .drop .st{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--sub)} .ag{cursor:pointer} .ag:hover .t b{color:var(--forest2)} .planhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px} .plan{max-width:780px} .pl{position:relative;padding:0 0 20px 36px} .pl::before{content:"";position:absolute;left:11px;top:24px;bottom:-2px;width:2px;background:var(--line)} .pl:last-child::before{display:none} .pl i{position:absolute;left:0;top:1px;width:23px;height:23px;border-radius:50%;border:2.5px solid var(--line);background:#fff;display:grid;place-items:center;font-size:10.5px;font-weight:800;color:#949E95;font-family:var(--mono)} .pl.dn i{background:var(--forest2);border-color:var(--forest2);color:#fff} .pl.now i{border-color:var(--gold);background:var(--gold-soft);color:var(--gold-deep)} .pl b{display:block;font-size:14.5px;font-family:var(--disp)} .pl.now b{color:var(--gold-deep)} .pl .pd{font-family:var(--mono);font-size:11px;color:var(--sub)} .pl p{font-size:12.5px;color:var(--sub);margin-top:2px;max-width:58ch} .covsvc{font-size:12px;color:var(--sub)} .covedit td{background:#F8F5EC} /* the two coverage multi-selects. Like .dpanel above, the panel sits IN FLOW rather than absolutely positioned, and for the same reason: this control lives in a table inside .twrap, which is overflow-x:auto, and an absolutely positioned panel is clipped by that scroll box. Open simply grows the row. That is the TABLE EDIT ROW's copy of the control. The picker card carries the same control outside any scroll box, and there the panel floats: see `.cvrow2 .mselpanel` below. */ .msel{position:relative;min-width:0} .mseltrig{display:flex;align-items:center;gap:8px;width:100%;background:#fff;border:1.5px solid var(--line);border-radius:9px;padding:8px 11px;font:inherit;font-size:13px;color:#3A453E;text-align:left;cursor:pointer} .mseltrig:hover{border-color:var(--forest2)} .mseltrig[aria-expanded="true"]{border-color:var(--gold)} .mseltxt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600} .mseltxt.ph{color:#9AA39C;font-weight:400} .mselcar{flex:none;width:0;height:0;border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:5px solid #8B958D} .mseltrig[aria-expanded="true"] .mselcar{transform:rotate(180deg)} .mselpanel{margin-top:6px;background:#fff;border:1.5px solid var(--line);border-radius:10px;box-shadow:0 6px 18px rgba(31,45,38,.08);overflow:hidden} .mselpanel[hidden]{display:none} .mselhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:7px 11px;background:#F8F5EC;border-bottom:1px solid var(--line);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sub)} .mselhead .tlink{font-size:10px;font-weight:700;letter-spacing:0;text-transform:none} /* The options are the old chips, restacked. Same buttons, same data-t/data-s, same class `on`: only the presentation moved into the panel. */ .cechips{display:flex;flex-direction:column} .cechips button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:9px 11px;font-size:13px;font-weight:400;background:#fff;color:#3A453E;cursor:pointer} .cechips button:last-child{border-bottom:0} .cechips button::before{content:"";flex:none;width:15px;height:15px;border:1.5px solid var(--line);border-radius:4px;background:#fff} .cechips button:hover{background:var(--tint)} .cechips button.on{color:var(--forest2);font-weight:600} .cechips button.on::before{content:"✓";display:grid;place-items:center;font-size:10px;font-weight:800;color:#fff;background:var(--forest2);border-color:var(--forest2)} /* Two of them side by side in the edit row, which is not inside a scroll box and can afford the width. */ .cerow{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start;max-width:560px;margin:6px 0 10px} .celab{font-size:11px;font-weight:700;color:var(--sub);display:block;margin-bottom:4px} @media (max-width:768px){.cerow{grid-template-columns:1fr}} .ceform{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;max-width:560px} .ceform label{font-size:11px;font-weight:700;color:var(--sub);display:block;margin-bottom:4px} .ceform select{width:100%;font:inherit;font-size:13px;background:#fff;border:1.5px solid var(--line);border-radius:9px;padding:8px 10px} /* A locked row reads at full ink like every other row: the gold coverage tag in its action cell is the lock signal, so the desk and Coming cohorts match. */ .lockedtag{font-size:11px;font-weight:700;color:var(--gold-deep)} /* ===== v12 additions ===== */ .consent{display:flex;gap:11px;align-items:flex-start;width:100%;max-width:none;margin-top:14px} .consent input{flex:none;width:16px;height:16px;margin:2px 0 0} .consent span{flex:1;min-width:0;font-size:12.5px;font-weight:500;line-height:1.6;color:var(--ink)} /* ===== v11 additions ===== */ .pendcta{margin:10px 0 4px;padding:0 2px} .pendcta small{display:block;font-size:11.5px;color:var(--sub);margin-top:8px;line-height:1.5;text-align:center} .ghostrow td{color:var(--sub);opacity:.5} .apprline{display:flex;gap:12px;align-items:baseline;margin-top:12px;padding:11px 13px;border:1px solid var(--gold);background:var(--gold-soft);border-radius:12px;font-size:12.5px} .apprline span{color:var(--sub);flex:none} .apprline b{font-family:var(--disp)} .apprline em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--sub)} .apprline .tlink{margin-left:auto;white-space:nowrap} /* ===== v10 additions ===== */ .task{align-items:flex-start} .task>div{flex:1;min-width:0} .task b{display:block;font-family:var(--disp);font-size:13.5px;line-height:1.3} .task small{display:block;font-size:11.5px;color:var(--sub);margin-top:2px;line-height:1.45} .task .tlink{white-space:nowrap;margin-left:12px;flex:none} .tiert.t7 th:nth-child(1){width:17%} .tiert.t7 th:nth-child(2){width:13%} .tiert.t7 th:nth-child(3){width:17%} .tiert.t7 th:nth-child(4){width:15%} .tiert.t7 th:nth-child(5){width:15%} .tiert.t7 th:nth-child(6){width:15%} .tiert th{padding:4px 8px 6px;vertical-align:bottom} .mechnote{align-self:end} .covdot.soon{background:#C9C3B2} .conrow,.logrow{align-items:flex-start} .conrow .conact{margin-top:2px} .logrow .pill{margin-top:2px} .dl .r{align-items:baseline} .mt .s{line-height:1.35} .gaterow{align-items:flex-start} .gaterow i{margin-top:1px} .ovstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px} .ovstat{border:1px solid var(--line);border-radius:12px;padding:11px 13px} .ovstat b{display:block;font-family:var(--disp);font-size:20px;line-height:1.15} .ovstat span{display:block;font-size:11px;color:var(--sub);margin-top:3px;line-height:1.35} .uplist{margin-top:12px;border-top:1px dashed var(--line)} .uprow{display:flex;gap:10px;align-items:baseline;padding:9px 2px;border-bottom:1px dashed var(--line);font-size:12.5px} .uprow span{color:var(--sub);flex:none;width:110px} .uprow b{font-family:var(--disp);font-size:13px} .uprow em{font-style:normal;margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--sub)} /* ===== v8 additions ===== */ .tiert th:nth-child(1){width:24%} .tiert th:nth-child(2){width:21%} .tiert th:nth-child(3){width:20%} .tiert th:nth-child(4){width:14%} .tiert input,.tiert select{padding:7px 7px;font-size:12.5px} .tiert .tname{min-width:92px} .eqgrid label{white-space:nowrap} .opt2{font-weight:600;color:var(--sub);font-size:10px;text-transform:none;letter-spacing:0} .apcadd{display:grid;grid-template-columns:1.1fr 1.6fr .9fr auto;gap:10px;align-items:center;margin-top:6px} .apcadd input,.apcadd select{width:100%;min-width:0;font:inherit;font-size:13px;border:1.5px solid var(--line);border-radius:9px;padding:8px 10px;background:#fff} .apcrow{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:11px;padding:9px 12px;margin-bottom:8px} .apcrow b{display:block;font-family:var(--disp);font-size:13.5px} .apcrow small{display:block;font-size:11.5px;color:var(--sub)} .apcrow .trm{margin-left:auto} @media (max-width:940px){.apcadd{grid-template-columns:1fr 1fr}} /* ===== v7 additions ===== */ #pnav{flex:1 1 auto;overflow-y:auto;min-height:0;padding-bottom:10px;scrollbar-width:thin} .gated .content{width:100%;max-width:none} .gated .app{display:block} .view[data-v="pending"] .vhead{max-width:640px;margin-left:auto;margin-right:auto;text-align:center} .vsplit{margin:30px 0 12px;border-top:1px solid var(--line);padding-top:22px} .vsplit .subh{font-family:var(--disp);font-size:19px} .vsplit p{font-size:13px;color:var(--sub);margin-top:3px} .bidform label{display:block;font-size:11.5px;font-weight:700;color:var(--ink);margin:0 0 6px} .bidform label.blk{margin-top:2px} .bidform .two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px} .bidform .two>div{min-width:0} .bidform select,.bidform input[type="number"],.bidform input[type="text"]{width:100%;min-width:0;font:inherit;font-size:13px;border:1.5px solid var(--line);border-radius:9px;padding:8px 10px;background:#fff} /* Equal thirds: the equipment boxes are answers to comparable questions and sized alike, whether or not the rental cell is showing. Bottom-aligned, so a label that wraps does not drop its own input below the others. */ .eqgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end} .eqgrid>div{min-width:0} .hint{display:block;font-size:10.5px;color:var(--sub);font-weight:600;margin-top:4px} .tiert th{white-space:nowrap} .scnwrap{margin-top:14px;border-top:1px dashed var(--line);padding-top:12px} .scnwrap h4{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);margin:0 0 8px} .scnchip{font-family:var(--mono);font-size:10.5px;color:var(--sub);margin-bottom:8px} .scnchip b{color:var(--forest2)} .scnwrap .scn{width:100%} .scnwrap .scn th,.scnwrap .scn td{padding:6px 6px;font-size:11.5px} .scn tr.likely td{background:var(--tint);font-weight:700} @media (max-width:940px){.eqgrid{grid-template-columns:1fr 1fr}} /* ===== v6 additions ===== */ .dgrid .brief{position:sticky;top:82px;align-self:start} .bidform:not(.aftnew) .tac{display:none} .taddrow{border:1.5px dashed var(--line);border-radius:9px;background:#fff;padding:7px 12px;font-size:12px;font-weight:650;color:var(--forest2);cursor:pointer;margin:0 0 12px} .taddrow:hover{border-color:var(--forest2)} .trm{border:0;background:#F1EDE0;color:#8C3B1B;width:24px;height:24px;border-radius:7px;font-size:14px;line-height:1;cursor:pointer} .trm:hover{background:#E8DFC9} .capnote{font-size:10px;color:var(--sub);font-weight:600} .tiert .tname{width:100%;min-width:108px;font:inherit;font-size:13px;border:1.5px solid var(--line);border-radius:8px;padding:6px 8px;background:#fff} .tiert th:first-child{width:30%} .tiert td{vertical-align:middle} /* ===== v5 additions ===== */ .pnav button.soon{opacity:.55;cursor:default} .pnav button.soon em{font-style:normal;margin-left:auto;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#EFEAD9;color:var(--sub);border-radius:6px;padding:2px 7px} .lsub{font-weight:500;color:var(--sub);text-transform:none;letter-spacing:0} .tiert{width:100%;border-collapse:collapse;margin:6px 0 12px;font-size:13px} .tiert th{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--sub);text-align:left;padding:4px 8px 6px} .tiert td{padding:5px 8px;border-top:1px dashed var(--line)} .tiert input[type="number"],.tiert input[type="text"]{width:100%;font:inherit;font-size:13px;border:1.5px solid var(--line);border-radius:8px;padding:6px 8px;background:#fff} .tiert input:disabled{opacity:.4;background:#F6F3EA} .omhead{display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px} .omlab{display:block;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--sub);margin-bottom:5px} .omcap small{display:block;font-size:11px;color:var(--sub);margin-top:4px} .om4 .n.hotn{color:#B0512B} .om4 .n.excn{color:#8C3B1B} .omload{height:5px;background:#EFEAD9;border-radius:99px;overflow:hidden;margin:7px 0 6px} .omload i{display:block;height:100%;background:var(--forest2);border-radius:99px} .omload i.hot{background:#B0512B} .omload i.exc{background:#C2643B} .logls{display:flex;flex-direction:column} .logrow{display:flex;gap:12px;align-items:center;padding:11px 2px;border-bottom:1px dashed var(--line)} .logrow:last-child{border-bottom:0} .logrow b{display:block;font-family:var(--disp);font-size:13.5px} .logrow small{display:block;font-size:11.5px;color:var(--sub);margin-top:1px} .logrow .pill{margin-left:auto} .sthead{display:flex;align-items:center;gap:12px} .stls{margin-top:10px;border-top:1.5px solid var(--line)} .strow{display:grid;grid-template-columns:1fr 48px 120px;gap:10px;align-items:center;padding:11px 2px;border-bottom:1px solid var(--line)} .strow b{display:block;font-family:var(--body);font-weight:650;font-size:13.5px} .strow small{display:block;font-size:11.5px;color:var(--sub);margin-top:1px} .strow .stn{font-size:12px;color:var(--sub);text-align:right} .strow .stamt{font-family:var(--mono);font-size:13px;text-align:right;font-weight:700} .strow.neg .stamt{color:#8C3B1B} .strow.held .stamt{color:var(--gold-deep,#8a6a1c)} .sttot{display:flex;align-items:baseline;gap:12px;padding:14px 2px 2px} .sttot span{font-weight:650;font-size:13.5px} .sttot b{margin-left:auto;font-family:var(--disp);font-size:26px} #invcard section.card{margin-bottom:16px} /* ===== v4 additions ===== */ .modal{position:fixed;inset:0;background:rgba(10,26,19,.5);backdrop-filter:blur(3px);display:grid;place-items:center;padding:18px;z-index:120} .modal[hidden]{display:none} .mbox{background:#fff;border:1px solid var(--line);border-radius:18px;max-width:560px;width:100%;max-height:88vh;overflow:auto;padding:22px 24px;box-shadow:0 30px 70px rgba(10,26,19,.35)} .mhead{display:flex;align-items:center;gap:12px} .mhead h3{font-family:var(--disp);font-size:19px} .mx{margin-left:auto;font-size:22px;line-height:1;color:var(--sub);padding:4px 9px;border-radius:9px} .mx:hover{background:#F1EDE0} .msub{font-size:13.5px;color:var(--sub);margin:6px 0 12px;max-width:58ch} .clabel{display:block;font-size:11.5px;font-weight:700;color:var(--ink);margin:10px 0 6px} .cselect{width:100%;font:inherit;font-size:13.5px;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:9px 11px} .gaterow{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:9px} .gaterow i{flex:none;width:24px;height:24px;border-radius:8px;background:#EFEAD9;color:var(--sub);font-style:normal;font-family:var(--mono);font-size:11.5px;font-weight:700;display:grid;place-items:center} .gaterow.dn i{background:var(--forest2);color:#fff} .gaterow.now{border-color:var(--gold);background:var(--gold-soft)} .gaterow.now i{background:var(--gold);color:#fff} .gaterow b{display:block;font-family:var(--disp);font-size:13.5px} .gaterow small{display:block;font-size:12px;color:var(--sub);margin-top:2px;max-width:52ch} .gaterow .tlink{margin-left:auto;white-space:nowrap} .capin{margin-left:auto;width:76px;font:inherit;font-size:14px;border:1.5px solid var(--line);border-radius:9px;padding:7px 9px;text-align:center} .termls{list-style:none;margin:4px 0 12px;padding:0;display:flex;flex-direction:column;gap:7px} .termls li{font-size:13px;color:#2E3A33;padding-left:18px;position:relative} .termls li::before{content:"";position:absolute;left:2px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--forest2)} .conls{display:flex;flex-direction:column} .conrow{display:flex;gap:14px;align-items:center;padding:13px 2px;border-bottom:1px dashed var(--line)} .conrow:last-child{border-bottom:0} .conrow b{display:block;font-family:var(--disp);font-size:14px} .conrow small{display:block;font-size:12px;color:var(--sub);margin-top:2px;max-width:64ch} .conrow .rowopen{font:inherit;color:inherit;text-align:left;padding:0;text-decoration:underline;text-decoration-color:var(--tintb);text-decoration-thickness:1.5px;text-underline-offset:3px} .conrow .rowopen:hover{color:var(--forest2);text-decoration-color:var(--forest2)} .conact{margin-left:auto;white-space:nowrap} .alertbar{background:#7A2E12;color:#fff;border-radius:12px;padding:11px 16px;font-size:13px;margin-bottom:16px} .rtbl td{vertical-align:middle} .slotsel{font:inherit;font-size:12px;border:1.5px solid var(--line);border-radius:8px;padding:5px 7px;background:#fff} .miniprog{height:8px;background:#EFEAD9;border-radius:99px;overflow:hidden;margin-top:10px} .miniprog i{display:block;height:100%;background:var(--forest2);border-radius:99px} .gated .pane{display:none} .gated .top .search{visibility:hidden} @media (max-width:940px){ .app,.app.collapsed{grid-template-columns:1fr} .pane{position:fixed;left:0;top:var(--bannerh,0px);bottom:0;height:auto;width:min(78vw,300px);z-index:80;transform:translateX(-102%);transition:transform .28s ease;box-shadow:14px 0 40px rgba(18,55,43,.18)} .app.paneopen .pane{transform:translateX(0)} .app.collapsed .pane__top b,.app.collapsed .pnav button span,.app.collapsed .roompill{display:initial} .app.collapsed .pnav button{justify-content:flex-start;padding:10px 13px} .app.collapsed .pane__prof{justify-content:flex-start;padding:10px 12px;border:1px solid var(--line);background:var(--card);margin:8px 12px 14px} .app.collapsed .pane__prof .pp,.app.collapsed .pane__prof .chev{display:initial} .overlay{display:block;position:fixed;inset:0;background:rgba(18,55,43,.4);z-index:75;opacity:0;pointer-events:none;transition:opacity .25s} .app.paneopen .overlay{opacity:1;pointer-events:auto} .greet{display:none} .grid2{grid-template-columns:1fr} .dgrid{grid-template-columns:1fr} .brief{border-right:0;border-bottom:1px solid var(--line)} .funnel{grid-template-columns:repeat(2,1fr)} } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ===== added with the /partner rebuild ===== */ /* A rejected or verifying region explains itself on the row below its own. Constrained because the reason is prose and a full-width line of it is unreadable next to a table. */ .covwhy{margin:0 0 10px;max-width:70ch} .covspeed{width:100%;font:inherit;font-size:12.5px;border:1.5px solid var(--line);border-radius:9px;padding:7px 9px;background:#fff} .covdot.rej{background:var(--lose)} /* A task whose own check has cleared shows the check state instead of an action, because there is nothing left to do on it. */ .taskstate{font-size:11.5px;font-weight:650;color:var(--sub);white-space:nowrap;margin-left:12px;flex:none} .task.flag i{background:var(--gold-soft);border-color:var(--gold);color:var(--gold-deep)} /* Save-on-blur indicator. Deliberately quiet and deliberately present: silent autosave is indistinguishable from lost work. */ .savedot{font-size:11.5px;font-weight:650;color:var(--forest2);margin-top:8px} .savedot::before{content:"\2713 ";} /* The banner. The review variant is informational, not an alert, so it does not borrow the failure colour. The bar holds the top of the frame rather than scrolling off it: it is the one thing on every view, and the pane and the header both offset from its height (--bannerh, written by components/banner.js). Full bleed, because a rounded card floating at the top of the viewport reads as a dismissed toast. Empty host, no bar and no offset. */ #mainbanner:not(:empty){position:sticky;top:0;z-index:60} #mainbanner .alertbar{border-radius:0;margin-bottom:0} .alertbar.review{background:var(--forest);color:#EAF2EC} .bannerlink{color:#fff;text-decoration:underline} /* The gated review frame. Nav and search are hidden, and the card centres. */ .gated .pane{display:none} .gated .app{display:block} .gated .top .search{visibility:hidden} .gated .content{width:100%;max-width:none} .opt2{font-weight:600;color:var(--sub);font-size:10px;text-transform:none;letter-spacing:0} /* ===== modal forms and document upload ===== * * The registration modal shipped with bare