/* Shape Chicago: shared look for every page (housing, transit, and pages to come). White panels and Instrument Sans, with City Hall accents: the red six-point star, two flag-blue rules, navy for main actions. Layout: a header (brand, page tabs, Sources, Share), a metrics bar across the top, a left panel for options, the map filling the rest. On phones: a slim metrics strip under the header and a bottom sheet for options. Header and bar are position:absolute (pages are full-screen, no scrolling): position:fixed made Chrome clip the WebGL map by the bar's height. */ :root{ --sc-ink:#1a1d21; --sc-ink2:#3d434b; --sc-mute:#5a6069; --sc-faint:#6a7079; --sc-line:#e6e9ed; --sc-line2:#d5d9de; --sc-chip:#f6f7f9; --sc-seg:#f1f2f4; --sc-map:#eef0ec; --sc-navy:#2b5da0; --sc-navy2:#1d4580; --sc-flag:#41b6e6; --sc-star:#e4002b; --sc-green:#1f6b44; --sc-greenbg:#eef7f1; --sc-greenmute:#3f5a4b; --sc-warn:#7a4b00; --sc-warnbg:#fdf3e1; --sc-hard:#b3001e; --sc-shadow:0 10px 30px rgba(20,28,40,.14); --sc-shadow2:0 4px 14px rgba(20,28,40,.12); --sc-head:60px; --sc-font:'Instrument Sans',system-ui,-apple-system,sans-serif; } @media (max-width:859px){ :root{--sc-head:56px} } /* header */ .sc-head{position:absolute;left:0;right:0;top:0;height:var(--sc-head);background:#fff;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 20px 0;box-sizing:border-box;font-family:var(--sc-font);color:var(--sc-ink)} .sc-head::before,.sc-head::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--sc-flag)} .sc-head::before{top:0} .sc-head::after{top:3px} .sc-head .sc-l{display:flex;align-items:center;gap:20px;min-width:0} .sc-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:var(--sc-ink);text-decoration:none;white-space:nowrap} .sc-brand svg{width:22px;height:22px;flex:none} .sc-nav{display:flex;gap:4px;padding:4px;background:var(--sc-seg);border-radius:20px;font-size:14px} .sc-nav a{padding:7px 14px;border-radius:16px;color:var(--sc-mute);text-decoration:none;white-space:nowrap} .sc-nav a[aria-current="page"]{background:#fff;color:var(--sc-ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)} .sc-head .sc-r{display:flex;align-items:center;gap:8px} .sc-fan{font-size:12px;color:var(--sc-faint);margin-right:6px;white-space:nowrap} .sc-btn{font:inherit;font-family:var(--sc-font);font-size:14px;font-weight:600;min-height:38px;padding:0 16px;border-radius:20px;border:1px solid var(--sc-line2);background:#fff;color:var(--sc-ink);cursor:pointer;white-space:nowrap} .sc-btn:hover{background:var(--sc-seg)} a.sc-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:var(--sc-ink);box-sizing:border-box}a.sc-btn.primary{color:#fff} .sc-btn.primary{background:var(--sc-navy);border-color:var(--sc-navy);color:#fff} .sc-btn.primary:hover{background:var(--sc-navy2)} @media (max-width:1180px){ .sc-fan{display:none} } @media (max-width:859px){ .sc-head{padding:4px 12px 0} .sc-brand span{display:none} .sc-nav{font-size:13px} .sc-nav a{padding:7px 9px} .sc-btn{min-height:36px;padding:0 12px} .sc-head .sc-share,.sc-head .sc-fan{display:none} .sc-head .sc-l{gap:10px} } @media (max-width:440px){ .sc-nl{display:none} .sc-nav a{padding:7px 8px} } /* metrics bar */ .sc-bar{position:absolute;left:0;right:0;top:var(--sc-head);background:#fff;border-top:1px solid var(--sc-line);border-bottom:1px solid var(--sc-line);z-index:4;display:flex;align-items:center;gap:24px;padding:0 20px;min-height:76px;box-sizing:border-box;font-family:var(--sc-font);color:var(--sc-ink)} .sc-m{display:flex;flex-direction:column;gap:1px;flex:none} .sc-m b{font-size:22px;font-weight:600;letter-spacing:-.02em;white-space:nowrap} .sc-m span{font-size:12.5px;color:var(--sc-mute);white-space:nowrap} .sc-m.g b{color:var(--sc-green)} .sc-m.g span{color:var(--sc-greenmute)} .sc-sep{width:1px;height:44px;background:var(--sc-line);flex:none} .sc-push{margin-left:auto} .sc-seg{display:flex;gap:2px;padding:3px;background:var(--sc-seg);border-radius:18px;font-size:13.5px;font-weight:600} .sc-seg button{font:inherit;border:0;padding:7px 14px;border-radius:15px;background:transparent;color:var(--sc-ink2);cursor:pointer;white-space:nowrap} .sc-seg button[aria-checked="true"]{background:#fff;color:var(--sc-ink);box-shadow:0 1px 2px rgba(0,0,0,.12)} .sc-seg button.hard{color:var(--sc-hard)} .sc-seg button.hard[aria-checked="true"]{background:var(--sc-hard);color:#fff} /* info button and pop-up */ .ib{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--sc-line2);background:#fff;color:var(--sc-mute);font:italic 600 12px/1 Georgia,serif;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;vertical-align:middle} .ib:hover{color:var(--sc-ink);border-color:var(--sc-ink)} dialog.sc-info{border:0;border-radius:20px;box-shadow:var(--sc-shadow);padding:0;width:min(460px,calc(100vw - 32px));max-height:calc(100vh - 64px);font-family:var(--sc-font);color:var(--sc-ink)} dialog.sc-info::backdrop{background:rgba(20,24,30,.35)} dialog.sc-info .sc-ibody{padding:22px 24px;overflow:auto;max-height:calc(100vh - 64px);font-size:14.5px;line-height:1.55} dialog.sc-info h2{font-size:19px;margin:0 0 12px;padding-right:80px;font-weight:600;letter-spacing:-.01em} dialog.sc-info p{margin:0 0 10px;color:var(--sc-ink2);font-size:14.5px;line-height:1.55} dialog.sc-info a{color:var(--sc-navy)} dialog.sc-info .sc-x{float:right;margin:-4px -6px 0 12px} @media (max-width:859px){ dialog.sc-info{margin:auto 0 0;width:100vw;max-width:100vw;border-radius:22px 22px 0 0;max-height:85vh} dialog.sc-info .sc-ibody{max-height:85vh;padding:18px 20px calc(24px + env(safe-area-inset-bottom))} } .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* motion: things respond when you point at them, and open smoothly */ :where(.sc-head, .sc-bar) :where(button, a){transition:background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s} .sc-btn:active{transform:translateY(1px)} .sc-btn.primary:hover{box-shadow:0 2px 10px rgba(43,93,160,.28)} .sc-nav a:not([aria-current]):hover{color:var(--sc-ink);background:rgba(255,255,255,.65)} .sc-seg button{transition:background-color .15s, color .15s, box-shadow .15s} .sc-seg button:not([aria-checked="true"]):hover{background:rgba(255,255,255,.7)} .sc-seg button.hard:not([aria-checked="true"]):hover{background:#fbe9ec} .ib{transition:color .15s, border-color .15s, background-color .15s, transform .15s} .ib:hover{transform:scale(1.08);background:var(--sc-seg)} dialog.sc-info[open]{animation:scPop .24s cubic-bezier(.2,.8,.2,1)} dialog.sc-info[open]::backdrop{animation:scFade .24s ease-out} @keyframes scPop{from{opacity:0;transform:translateY(10px) scale(.98)}} @keyframes scFade{from{opacity:0}} @media (max-width:859px){ dialog.sc-info[open]{animation:scSheet .28s cubic-bezier(.2,.8,.2,1)} @keyframes scSheet{from{transform:translateY(40px);opacity:.4}} } @media (prefers-reduced-motion:reduce){ dialog.sc-info[open], dialog.sc-info[open]::backdrop{animation:none} .ib:hover{transform:none} } /* Moving between Shape Chicago pages: the header stays put while the page underneath cross-fades (browsers that support it) */ @view-transition { navigation: auto; } .sc-head { view-transition-name: sc-head; } ::view-transition-old(root) { animation: 220ms cubic-bezier(.4,0,1,1) both sc-vt-out; } ::view-transition-new(root) { animation: 320ms cubic-bezier(.2,.8,.2,1) both sc-vt-in; } @keyframes sc-vt-out { to { opacity: 0; transform: translateX(-4%) scale(.985); } } @keyframes sc-vt-in { from { opacity: 0; transform: translateX(4%) scale(.985); } } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } /* the on/off switch every tool uses (housing policies, transit proposals and routes, budget options) */ .sc-switch{flex:none;width:46px;height:28px;border-radius:14px;border:0;background:var(--sc-line2);position:relative;padding:0;cursor:pointer;transition:background .15s} .sc-switch::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .18s} .sc-switch[aria-checked="true"]{background:var(--sc-navy)} .sc-switch[aria-checked="true"]::after{transform:translateX(18px)} .sc-switch:focus-visible{outline:2px solid var(--sc-navy);outline-offset:2px} @media (prefers-reduced-motion:reduce){ .sc-switch,.sc-switch::after{transition:none} } /* six tools: the page tabs scroll sideways on narrow screens instead of widening the page */ .sc-nav{min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .sc-nav::-webkit-scrollbar{display:none} @media (max-width:440px){ .sc-nav a{padding:7px 7px} .sc-nav{font-size:12.5px} } /* local sponsor card and support button (shape.js fills [data-ad] and [data-support]) */ .sc-ad{display:block;margin:14px 0;font-family:var(--sc-font)} .sc-ad-l{display:block;font-size:11px;font-weight:600;color:var(--sc-mute);margin:0 0 4px 2px} .sc-ad-b{display:flex;gap:12px;align-items:center;background:#fff;border:1px dashed var(--sc-line2);border-radius:14px;padding:10px 14px;text-decoration:none;color:var(--sc-ink);transition:border-color .15s,background .15s} .sc-ad-b:hover{border-color:var(--sc-navy);background:#f8fbff} .sc-ad-b img{width:72px;height:48px;object-fit:contain;flex:none;border-radius:8px} .sc-ad-b b{display:block;font-size:14.5px;font-weight:600;line-height:1.3} .sc-ad-b span span{display:block;font-size:13px;color:var(--sc-ink2);line-height:1.4;margin-top:1px} .sc-support{display:inline-flex;align-items:center;gap:6px;text-decoration:none} .sc-support svg{width:15px;height:15px;color:var(--sc-star)} .sc-foot-extra{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:12px 0 0;font-size:13px} /* the tab bar scrolls sideways on narrow screens: fade the edge that has more tabs past it */ .sc-nav.more-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)} .sc-nav.more-l{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent)} .sc-nav.more-l.more-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent)} /* the edge fade would also hide an open menu, which hangs below the bar */ .sc-nav:has(.sc-simbtn[aria-expanded="true"]){-webkit-mask-image:none !important;mask-image:none !important} .sc-head .sc-l{flex:1 1 auto} .sc-head .sc-r{flex:none} /* first-visit tool intro */ dialog.sc-intro{width:min(520px,calc(100vw - 32px));padding:0;overflow:hidden} @media (max-width:640px){ dialog.sc-intro{width:100vw} } @media (min-width:641px){ dialog.sc-intro{margin:auto;border-radius:20px} } /* tablets: a centered card, not a left-aligned sheet */ .sc-intro-art{background:linear-gradient(180deg,#f6f8f5,#e8ede7);aspect-ratio:800/380} .sc-intro-art img{width:100%;height:100%;object-fit:contain;display:block} .sc-intro h2{margin:0 0 10px;font-size:22px;letter-spacing:-.01em;font-weight:600} .sc-intro p{margin:0 0 10px;font-size:15px;line-height:1.55;color:var(--sc-ink2)} .sc-intro ul{margin:0 0 10px;padding-left:20px;font-size:14.5px;line-height:1.55;color:var(--sc-ink2)} .sc-intro-go{display:flex;justify-content:flex-end;margin-top:14px} /* Simulators menu in the header (v61): Housing, Transit, Budget, Pensions, Your lot */ .sc-sims{display:flex} .sc-simbtn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:0;border-radius:16px;background:transparent;color:var(--sc-mute);font:inherit;white-space:nowrap;cursor:pointer} .sc-simbtn svg{width:10px;height:6px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s} .sc-simbtn[aria-expanded="true"] svg{transform:rotate(180deg)} .sc-simbtn[aria-current="page"]{background:#fff;color:var(--sc-ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)} .sc-simbtn:not([aria-current]):hover,.sc-simbtn[aria-expanded="true"]:not([aria-current]){color:var(--sc-ink);background:rgba(255,255,255,.65)} .sc-simmenu{position:fixed;z-index:1000;min-width:190px;padding:6px;background:#fff;border:1px solid var(--sc-line,#e3e5e8);border-radius:12px;box-shadow:0 10px 30px rgba(20,30,50,.16);display:flex;flex-direction:column;gap:2px;font-size:15px} .sc-simmenu[hidden]{display:none} .sc-simhd{padding:6px 10px 4px;font-size:12px;color:var(--sc-mute)} .sc-simmenu a{padding:9px 10px;border-radius:8px;color:var(--sc-ink);text-decoration:none} .sc-simmenu a:hover,.sc-simmenu a:focus-visible{background:var(--sc-chip)} .sc-simmenu a[aria-current="page"]{font-weight:600;color:var(--sc-navy)} @media (max-width:860px){ .sc-simbtn{padding:7px 9px} } @media (max-width:440px){ .sc-simbtn{padding:7px 8px} } @media (prefers-reduced-motion:no-preference){ .sc-simmenu:not([hidden]){animation:scMenuIn .14s ease-out} @keyframes scMenuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} } /* Nov 8 (Kyle picked A): what's selected is solid navy everywhere, so it never reads as white on white */ .sc-nav a[aria-current="page"],.sc-simbtn[aria-current="page"]{background:var(--sc-navy);color:#fff;box-shadow:none} .sc-simbtn[aria-current="page"] svg{stroke:#fff} .sc-seg button[aria-checked="true"]{background:var(--sc-navy);color:#fff;box-shadow:none} .sc-seg button.hard[aria-checked="true"]{background:var(--sc-hard);color:#fff} .sc-seg button:not([aria-checked="true"]):hover{background:#e3e7ec;color:var(--sc-ink)} .sc-nav a:not([aria-current]):hover,.sc-simbtn:not([aria-current]):hover{background:#e3e7ec} /* one hover rule: things you can open lift a little and get a navy edge; buttons darken; switches and sliders stay put */ @media (hover:hover){ .sc-lift{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease} .sc-lift:hover{transform:translateY(-2px);border-color:var(--sc-navy) !important;box-shadow:0 6px 16px rgba(43,93,160,.14) !important} .sc-btn{transition:background-color .15s ease,border-color .15s ease} .sc-btn:not(.primary):not(:disabled):hover{background:#e9ecf0;border-color:#c4cad2} } @media (prefers-reduced-motion:reduce){ .sc-lift:hover{transform:none} } /* reading pages: a light gray page so white cards stand off it (maps keep their own look) */ :root{--sc-page:#f3f5f7} /* reading pages share three widths and two headline sizes (Nov 9 review): text 720, lists 860, everything else 1180; page titles 40px (heroes on the home page and the tracker are bigger on purpose), card titles 20px */ :root{--sc-w-text:720px; --sc-w-list:860px; --sc-w-wide:1180px; --sc-h1:40px; --sc-h2:20px} body.sc-gray{background:var(--sc-page)} /* plan cards (shape/plans.js): home page and /plans/ */ .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px} .pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--sc-line);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--sc-ink);font-family:var(--sc-font)} @media (hover:hover){ .pcard{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease} .pcard:hover{transform:translateY(-2px);border-color:var(--sc-navy);box-shadow:0 6px 16px rgba(43,93,160,.14)} } .pmapw{position:relative;background:#f3f5f7;display:flex;justify-content:center;padding:12px 0 6px;border-bottom:1px solid var(--sc-line)} .pmap{height:170px;width:auto;display:block} .pmap.empty{height:170px} .pgr{position:absolute;left:12px;top:10px;width:46px;height:46px;display:grid;place-items:center} .pgr svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--sc-star)} .pgr i{position:relative;font-style:normal;font-weight:700;font-size:14px;color:#fff;margin-top:1px} .pgr[data-g="F"] svg,.pgr[data-g="–"] svg{fill:#fff;stroke:var(--sc-star);stroke-width:1.4} .pgr[data-g="F"] i,.pgr[data-g="–"] i{color:var(--sc-star)} .pmode{position:absolute;right:10px;top:10px;font-size:12px;font-weight:600;background:#fff;border:1px solid var(--sc-line2);border-radius:10px;padding:2px 8px;color:var(--sc-navy)} .pmode.hard{color:var(--sc-hard)} .pbody{display:flex;flex-direction:column;gap:8px;padding:14px 16px 14px;flex:1} .pt{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.25} .pwho{font-size:13px;color:var(--sc-mute);margin-top:-4px} .pnums{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13.5px;color:var(--sc-ink2)} .pnums b{font-size:20px;font-weight:600;color:var(--sc-ink);letter-spacing:-.01em} .pnums span{display:flex;align-items:baseline;gap:5px} .pchips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px} .pchips li{font-size:12.5px;line-height:1.2;padding:4px 8px;border-radius:8px;background:#eef3fa;color:#1d4580} .pchips li.policy{background:#eef7f1;color:#1f6b44} .pchips li.cut{background:#fdecef;color:#a0001b} .pchips li.more{background:var(--sc-seg);color:var(--sc-mute)} .pwarn{font-size:12.5px;color:#a0001b} .pfoot{margin-top:auto;padding-top:6px;display:flex;align-items:center;justify-content:space-between;gap:10px} .popen{font-size:14px;font-weight:600;color:var(--sc-navy)} .pend{display:inline-flex;align-items:center;gap:7px;font:600 14px var(--sc-font);min-height:36px;padding:0 12px;border-radius:18px;border:1px solid var(--sc-line2);background:#fff;color:var(--sc-ink);cursor:pointer} .pend svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round} .pend b{font-weight:600;color:var(--sc-mute);padding-left:7px;border-left:1px solid var(--sc-line2)} .pend:not(:disabled):hover{border-color:var(--sc-navy);color:var(--sc-navy)} .pend.on{background:var(--sc-navy);border-color:var(--sc-navy);color:#fff;cursor:default} .pend.on b{color:#fff;border-left-color:rgba(255,255,255,.4)} .pend.on svg{fill:rgba(255,255,255,.25)} .sc-simmenu a.sc-simalt{margin-top:4px;border-top:1px solid var(--sc-line);border-radius:0 0 8px 8px;padding-top:10px} /* transit, budget and pensions plan cards: a chart instead of a map, and the simulator's name in the corner */ .pmap.wide{height:auto;width:calc(100% - 28px);max-width:420px;align-self:center} .pmap.wide text,svg.big.wide text{font-family:var(--sc-font)} .pcard[class*="sim-"] .pmapw{min-height:189px;align-items:center} .pmode.sim{color:var(--sc-ink2)} .pchips li.more{background:var(--sc-seg);color:var(--sc-ink2)} /* the "share with neighbors" box in each simulator (SCPlans.shareBox) */ .pshare{display:flex;flex-direction:column;gap:8px;align-items:flex-start;font-family:var(--sc-font)} .pshn{margin:0;font-size:15px;line-height:1.4;color:var(--sc-ink2);display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline} .pshn b{color:var(--sc-ink);font-weight:600} .pshalt{font:inherit;font-size:14px;font-weight:600;color:var(--sc-navy);background:none;border:0;padding:6px 0;cursor:pointer;text-decoration:underline;text-underline-offset:2px} .pshfine,.pshmsg{margin:0;font-size:13px;color:var(--sc-mute);line-height:1.45} .pshmsg:empty{display:none} .pshmsg{color:var(--sc-ink2);font-size:14px} .pshmsg a{font-weight:600} .pshl{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:600;color:var(--sc-ink);width:100%;max-width:420px} .pshl i{font-style:normal;font-weight:400;color:var(--sc-mute)} .pshl input{font:inherit;font-size:16px;font-weight:400;color:var(--sc-ink);background:#fff;border:1px solid #c9cfd6;border-radius:8px;padding:9px 11px;min-height:42px;box-sizing:border-box;width:100%} .pshl input:focus{outline:2px solid var(--sc-navy);outline-offset:1px;border-color:var(--sc-navy)} .pshl input[aria-invalid="true"]{border-color:#c4001f;box-shadow:0 0 0 1px #c4001f} .pshalt{margin-top:-4px} .pshafter:empty{display:none} .pdel,.prep{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px;color:var(--sc-ink2)} .pdel button,.prep button{font:inherit;font-size:14px;font-weight:600;background:none;border:0;padding:6px 0;cursor:pointer;text-decoration:underline;text-underline-offset:2px;color:var(--sc-navy)} .pdel .pdelgo,.pdel .pdelyes{color:#b0001c} .pdel .pdelyes{background:#b0001c;color:#fff;text-decoration:none;border-radius:999px;padding:6px 14px} .prep button{color:var(--sc-mute);font-weight:500} .pdelmsg:empty,.prep span:empty{display:none} .pkind{align-self:flex-start;font-size:12px;font-weight:600;padding:2px 8px;border-radius:8px;background:#eef3fa;color:#1d4580} .pkind.k-tall{background:#e3f1f2;color:#0b5f67} .pkind.k-mm{background:#e8f5fb;color:#14607f} .pkind.k-hood{background:#f1ecf8;color:#5b3e8c} .pkind.k-main{background:#fff3e0;color:#8a4b00} .pkind.k-pol{background:#eef7f1;color:#1f6b44} .pkind.k-all{background:#1a1d21;color:#fff} .pkind.k-cut{background:#fdecef;color:#a0001b} .psum{font-size:13.5px;color:var(--sc-ink2);line-height:1.35;margin-top:-4px} .sc-btn:disabled{opacity:.45;cursor:default} /* Nov 9 review: "Not affiliated" stays in view at every width. Reading pages get the shared footer (