/* ========================================================================== CodeGreen ITM Learning Center Extends the marketing site's design language (Poppins / Inter, brand green) with a reading environment tuned for long-form study, including a dark study mode for the lesson reader. ========================================================================== */ /* Palette ------------------------------------------------------------------------- These values are lifted from the inspection app (admin/src/index.css, the default "Code Green" palette) so the Learning Center and the product read as one piece of software rather than two. When a token changes there, change it here too. Theme resolution matches the app: an explicit choice is stamped as data-theme on , and with no choice at all the OS preference applies. The dark block is therefore written twice, once for the explicit attribute and once for the media query, guarded so an explicit "light" always wins. */ :root{ /* App: --brand-green / --nav-text-active / --brand-bg */ --brand:#1e7d3c; --brand-d:#166534; --brand-dd:#0f4a25; --brand-l:#e7f0ea; --brand-l2:#eef4f0; /* App: --text-h / --text / --border */ --ink:#0f1c14; --body:#3b423c; --muted:#66756c; --line:#d1ddd3; /* App: --bg (page) sits below --surface (cards), so cards read as raised. */ --page:#e8efe9; --band:#dfe9e2; --surface:#ffffff; --tint:#f3f8f4; --raise:#ffffff; /* App: --fire / --warn */ --fa:#d7263d; --amber:#b45309; --shadow-sm:0 1px 2px rgba(20,45,30,.06), 0 2px 8px rgba(20,45,30,.05); --shadow:0 1px 2px rgba(20,45,30,.06), 0 12px 32px -12px rgba(20,45,30,.14); --shadow-lg:0 2px 6px rgba(20,45,30,.07), 0 40px 80px -32px rgba(20,45,30,.34); --on-brand:#ffffff; --ground:#10201a; --maxw:1180px; --radius:16px; color-scheme:light; } /* Dark: the app's :root[data-theme='dark'] values. Elevation on dark comes from the lighter surface rather than a shadow, exactly as it does in the app. */ :root[data-theme="dark"]{ --brand:#4ade80; --brand-d:#5fd68a; --brand-dd:#86efac; --brand-l:#17251c; --brand-l2:#141f18; --ink:#f3f4f6; --body:#9ca3af; --muted:#7d8590; --line:#2e303a; --page:#16171d; --band:#121319; --surface:#1f2028; --tint:#1a1b22; --raise:#23252e; --fa:#f0415a; --amber:#f59e0b; /* Brand goes light in dark mode, so text on it must go dark. */ --on-brand:#10201a; --ground:#0d0e13; --shadow-sm:none; --shadow:0 12px 32px -12px rgba(0,0,0,.65); --shadow-lg:0 40px 80px -32px rgba(0,0,0,.8); color-scheme:dark; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --brand:#4ade80; --brand-d:#5fd68a; --brand-dd:#86efac; --brand-l:#17251c; --brand-l2:#141f18; --ink:#f3f4f6; --body:#9ca3af; --muted:#7d8590; --line:#2e303a; --page:#16171d; --band:#121319; --surface:#1f2028; --tint:#1a1b22; --raise:#23252e; --fa:#f0415a; --amber:#f59e0b; /* Brand goes light in dark mode, so text on it must go dark. */ --on-brand:#10201a; --ground:#0d0e13; --shadow-sm:none; --shadow:0 12px 32px -12px rgba(0,0,0,.65); --shadow-lg:0 40px 80px -32px rgba(0,0,0,.8); color-scheme:dark; } } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; color:var(--body); background:var(--page); font-family:"Inter",system-ui,-apple-system,sans-serif; font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; transition:background .25s ease, color .25s ease; } h1,h2,h3,h4{font-family:"Poppins",system-ui,sans-serif; color:var(--ink); margin:0; line-height:1.12; letter-spacing:-.02em;} p{margin:0} a{color:inherit; text-decoration:none} img{max-width:100%} button{font:inherit; cursor:pointer} .wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px} .eyebrow{font-weight:600; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand);} .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} :focus-visible{outline:3px solid var(--brand); outline-offset:3px; border-radius:6px} /* The [hidden] attribute loses to any same-specificity display rule from a class on the same element (e.g. a flex/grid utility) -- this makes it win regardless, which is what toggling .hidden on a calculator field expects. */ [hidden]{display:none !important} /* ---------------------------------------------------------------- buttons */ .btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:600; font-size:16px; padding:13px 24px; border-radius:11px; border:1px solid transparent; cursor:pointer; transition:transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease, color .14s ease; white-space:nowrap; min-height:46px;} .btn-primary{background:var(--brand); color:var(--on-brand); box-shadow:0 10px 22px -8px rgba(30,125,60,.55);} .btn-primary:hover{background:var(--brand-d); transform:translateY(-2px);} .btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line);} .btn-ghost:hover{border-color:var(--brand); color:var(--brand); transform:translateY(-2px);} .btn-onDark{background:rgba(255,255,255,.09); color:#fff; border-color:rgba(255,255,255,.24); backdrop-filter:blur(6px);} .btn-onDark:hover{background:rgba(255,255,255,.16); transform:translateY(-2px);} .btn-lg{padding:16px 32px; font-size:17px; min-height:54px;} .btn-sm{padding:9px 16px; font-size:14.5px; min-height:40px; border-radius:9px;} .btn[disabled]{opacity:.5; cursor:not-allowed; transform:none !important} /* ---------------------------------------------------------------- nav */ header.lc-nav{position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--page) 86%, transparent); backdrop-filter:saturate(1.5) blur(14px); -webkit-backdrop-filter:saturate(1.5) blur(14px); border-bottom:1px solid var(--line);} /* The header carries more than the body does: a wordmark, eight links, a theme toggle, and two account buttons. Measured, that row needs about 1350px, but .wrap caps everything at 1180, so the account block was pushed past the right edge and dragged the page sideways. Let the header alone run wider. Body content stays at --maxw. */ .lc-nav .wrap{max-width:1400px} .lc-nav-in{display:flex; align-items:center; justify-content:space-between; height:76px; gap:20px;} .lc-brand{display:flex; align-items:center; gap:12px; flex:0 0 auto;} .lc-brand img{height:46px; width:auto; display:block;} /* The "Code-Green" wordmark in the logo is near-black on a transparent background, so it vanishes against any dark ground. Inverting flips it to white, and rotating the hue back through 180 degrees keeps the flame and the ITM reading green rather than turning magenta. Applied only where the ground is actually dark. */ :root[data-theme="dark"] .lc-brand img{filter:invert(1) hue-rotate(180deg);} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .lc-brand img{filter:invert(1) hue-rotate(180deg);} } .lc-brand .divider{width:1px; height:26px; background:var(--line);} .lc-brand .lc-name{font-family:"Poppins"; font-weight:600; font-size:15.5px; color:var(--ink); letter-spacing:-.01em;} .lc-nav{position:relative;} .lc-nav-links{display:flex; align-items:center; gap:20px; min-width:0;} /* Without nowrap each label wraps inside itself once the row gets tight, so "How it works" becomes two stacked lines and the header looks broken. Adding a nav item is what tips it over, so the guard belongs on the rule. */ .lc-nav-links a:not(.btn){font-weight:500; font-size:15px; color:var(--body); white-space:nowrap;} .lc-nav-links a:not(.btn):hover{color:var(--brand)} /* The account slot holds two buttons. Left as a plain span they stack, giving an 88px tall item in a row where everything else is 25px, which is what makes the header look broken. Lay them out in a row. */ .lc-nav-links #acct{display:flex; align-items:center; gap:8px} .lc-nav-links #acct .btn{white-space:nowrap} /* ---------------------------------------------------- mobile nav (<=900px) The links used to be hidden with nothing put in their place, which left no way to reach the courses on a phone AND left the account buttons sticking out past the viewport. That overflow is what let the whole page be dragged sideways: body overflow-x:hidden does not stop the document itself being wider than the screen. Everything now collapses behind one button. */ .lc-burger{ display:none; width:44px; height:44px; flex:0 0 auto; align-items:center; justify-content:center; background:transparent; border:1px solid var(--line); border-radius:10px; cursor:pointer; padding:0; } .lc-burger span{position:relative; display:block; width:19px; height:2px; border-radius:2px; background:var(--ink);} .lc-burger span::before,.lc-burger span::after{ content:""; position:absolute; left:0; width:19px; height:2px; border-radius:2px; background:var(--ink); transition:transform .18s ease, top .18s ease; } .lc-burger span::before{top:-6px} .lc-burger span::after{top:6px} .lc-nav.open .lc-burger span{background:transparent} .lc-nav.open .lc-burger span::before{top:0; transform:rotate(45deg)} .lc-nav.open .lc-burger span::after{top:0; transform:rotate(-45deg)} @media(max-width:1400px){ .lc-burger{display:flex} .lc-nav-in{gap:12px} /* Off the flex row entirely, so nothing can push the header wider than the screen. */ .lc-nav-links{ position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:4px; background:var(--card,#fff); border-bottom:1px solid var(--line); padding:10px 20px 18px; box-shadow:0 18px 30px -22px rgba(0,0,0,.5); display:none; } .lc-nav.open .lc-nav-links{display:flex} .lc-nav-links a:not(.btn){display:block; padding:13px 4px; font-size:16px; border-bottom:1px solid var(--line);} .lc-nav-links .btn{width:100%; justify-content:center;} .lc-nav-links #acct{display:block} .lc-nav-links .theme-btn{align-self:flex-start; margin-top:10px} } @media(max-width:520px){.lc-brand .lc-name,.lc-brand .divider{display:none}} /* ------------------------------------------------------------- back to top Long lessons on a phone are a lot of scrolling with no way back. */ .to-top{ position:fixed; right:16px; bottom:16px; z-index:60; width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:var(--card,#fff); color:var(--ink); cursor:pointer; display:grid; place-content:center; box-shadow:0 10px 24px -10px rgba(0,0,0,.45); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease, visibility .18s; } .to-top.show{opacity:1; visibility:visible; transform:none} .to-top:focus-visible{outline:2px solid var(--brand); outline-offset:2px} @media (prefers-reduced-motion:reduce){ .to-top{transition:none} } /* ---------------------------------------------------------------- hero */ .lc-hero{position:relative; background:#0b1610; color:#dbe6e0; overflow:hidden; padding:96px 0 104px;} .lc-hero::before{content:""; position:absolute; inset:0; background: radial-gradient(52% 62% at 78% 6%, rgba(26,128,67,.34), transparent 62%), radial-gradient(46% 58% at 12% 94%, rgba(214,40,40,.20), transparent 66%), radial-gradient(40% 50% at 46% 40%, rgba(29,78,216,.14), transparent 70%);} .lc-hero::after{content:""; position:absolute; inset:0; opacity:.5; background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:64px 64px; mask-image:radial-gradient(70% 70% at 50% 40%, #000, transparent 78%);} .lc-hero .wrap{position:relative; z-index:2} .lc-hero .eyebrow{color:#6ede9a} .lc-hero h1{color:#fff; font-size:clamp(38px,5.4vw,68px); font-weight:800; margin-top:18px; max-width:16ch; text-wrap:balance;} .lc-hero h1 .g{color:#57c07f} .lc-hero .lede{margin-top:24px; font-size:clamp(17px,1.5vw,21px); color:#a8bbb1; max-width:60ch;} .lc-hero .lede b{color:#e6efe9; font-weight:600} .byline{margin-top:26px; display:inline-flex; align-items:center; gap:13px; padding:12px 20px 12px 13px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(6px); font-size:14.5px; color:#a8bbb1; line-height:1.45;} .byline b{color:#fff; font-weight:600} /* Portrait is a near-square headshot (900x880), so object-fit cover barely crops and leaves the face tiny. Instead the image is laid out at 2.4x the circle width and offset so the face center, roughly 52.4% across and 34.1% down the source, lands at the center of the circle: left = 50 - 52.4 * 2.0 = -55% top = 50 - 33.34 * 2.0 = -17% Percentages are relative to the circle, so this holds at any avatar size. */ .byline-mark{flex:0 0 auto; position:relative; width:46px; height:46px; border-radius:50%; overflow:hidden; background:#0f4a25; box-shadow:0 0 0 2px rgba(87,192,127,.55);} .byline-mark img{position:absolute; width:200%; max-width:none; height:auto; left:-55%; top:-17%; display:block;} @media(max-width:520px){.byline{align-items:flex-start; border-radius:16px}} .lc-hero-cta{margin-top:34px; display:flex; gap:14px; flex-wrap:wrap;} .lc-hero-stats{margin-top:52px; display:flex; flex-wrap:wrap; gap:14px 48px; padding-top:32px; border-top:1px solid rgba(255,255,255,.12);} .lc-hero-stats div{min-width:96px} .lc-hero-stats b{display:block; font-family:"Poppins"; font-size:30px; font-weight:700; color:#fff; line-height:1.1;} .lc-hero-stats span{font-size:13.5px; color:#8fa79b; letter-spacing:.02em} /* mission band */ .lc-mission{background:var(--brand-l2); border-bottom:1px solid var(--line); padding:44px 0;} .lc-mission .wrap{display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap;} .lc-mission .txt{flex:1 1 420px} .lc-mission h2{font-size:22px; font-weight:700; margin-bottom:8px} .lc-mission p{color:var(--body); max-width:78ch} /* ---------------------------------------------------------------- sections */ section{padding:88px 0} .sec-head{max-width:64ch; margin:0 auto 44px; text-align:center} .sec-head h2{font-size:clamp(29px,3.6vw,44px); font-weight:700; margin-top:12px; text-wrap:balance} .sec-head p{margin-top:16px; font-size:19px; color:var(--muted)} .sec-tint{background:var(--band)} /* ---------------------------------------------------------------- atlas */ .atlas{margin-top:8px} .atlas-band{position:relative; padding:0 0 12px} .atlas-label{display:flex; align-items:center; gap:14px; margin-bottom:18px} .atlas-step{flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--ink); color:var(--page); font-family:"Poppins"; font-weight:700; font-size:14px; display:grid; place-items:center;} .atlas-label h3{font-size:17px; font-weight:600; letter-spacing:-.01em} .atlas-label .note{font-size:14.5px; color:var(--muted); margin-left:auto; text-align:right; max-width:52ch} @media(max-width:820px){.atlas-label .note{display:none}} .atlas-nodes{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));} .atlas-node{position:relative; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 20px 18px; box-shadow:var(--shadow-sm); cursor:pointer; width:100%; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;} .atlas-node:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--nodec,#1a8043) 45%, var(--line));} .atlas-node[aria-expanded="true"]{border-color:var(--nodec,#1a8043); box-shadow:var(--shadow)} .atlas-node .tag{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--nodec,#1a8043); background:color-mix(in srgb, var(--nodec,#1a8043) 12%, transparent); padding:4px 9px; border-radius:6px; margin-bottom:12px;} .atlas-node h4{font-size:22px; font-weight:700; letter-spacing:-.02em} .atlas-node .sub{font-size:14.5px; color:var(--muted); margin-top:3px} .atlas-node .chev{position:absolute; top:20px; right:18px; color:var(--muted); transition:transform .2s ease} .atlas-node[aria-expanded="true"] .chev{transform:rotate(180deg); color:var(--nodec,#1a8043)} .atlas-detail{grid-column:1/-1; display:none; background:var(--tint); border:1px solid var(--line); border-left:3px solid var(--nodec,#1a8043); border-radius:12px; padding:20px 22px; margin-top:2px;} .atlas-detail.open{display:block; animation:fadeUp .22s ease} .atlas-detail p{color:var(--body); max-width:80ch} .atlas-detail .go{display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-weight:600; font-size:15px; color:var(--nodec,#1a8043)} .atlas-detail .go:hover{gap:11px} .atlas-flow{display:flex; align-items:center; justify-content:center; gap:12px; padding:14px 0 22px; color:var(--muted);} .atlas-flow .rail{width:2px; height:26px; background:linear-gradient(var(--line), color-mix(in srgb, var(--brand) 50%, var(--line)));} .atlas-flow span{font-size:13px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;} @keyframes fadeUp{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}} /* ---------------------------------------------------------------- tracks */ .track-grid{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));} .track-card{position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-sm); overflow:hidden; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;} .track-card::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--tc,#1e7d3c)} .track-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--tc) 40%, var(--line))} .track-top{display:flex; align-items:flex-start; justify-content:space-between; gap:16px} .track-code{font-family:"Poppins"; font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--tc); background:color-mix(in srgb, var(--tc) 11%, transparent); padding:5px 11px; border-radius:7px; display:inline-block;} .track-card h3{font-size:24px; font-weight:700; margin-top:14px; letter-spacing:-.02em} .track-card .tag-line{color:var(--muted); font-size:15.5px; margin-top:6px} .track-card .summary{margin-top:14px; font-size:15.5px; color:var(--body); flex:1 1 auto} .track-meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px} .chip{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--muted); background:var(--tint); border:1px solid var(--line); padding:5px 11px; border-radius:999px;} .track-actions{display:flex; align-items:center; gap:12px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line)} .track-actions .btn{flex:1 1 auto} /* progress ring */ .ring{flex:0 0 auto; position:relative; width:56px; height:56px} .ring svg{transform:rotate(-90deg); display:block} .ring circle{fill:none; stroke-width:6; stroke-linecap:round} .ring .bg{stroke:var(--line)} .ring .fg{stroke:var(--tc,#1e7d3c); transition:stroke-dashoffset .7s cubic-bezier(.22,1,.36,1)} .ring b{position:absolute; inset:0; display:grid; place-items:center; font-family:"Poppins"; font-size:13px; font-weight:700; color:var(--ink)} .pill-soon{font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--amber); background:color-mix(in srgb, var(--amber) 13%, transparent); padding:4px 9px; border-radius:6px;} /* ---------------------------------------------------------------- how it works */ .steps{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .step{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:26px; box-shadow:var(--shadow-sm)} .step .n{width:34px; height:34px; border-radius:10px; background:var(--brand-l); color:var(--brand-d); display:grid; place-items:center; font-family:"Poppins"; font-weight:700; font-size:15px; margin-bottom:14px} .step h3{font-size:18px; font-weight:600; margin-bottom:7px} .step p{font-size:15.5px; color:var(--muted)} /* ---------------------------------------------------------------- disclaimer */ .disclaimer{background:var(--tint); border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:12px; padding:18px 20px; font-size:14.5px; color:var(--muted); max-width:88ch; margin:0 auto;} .disclaimer b{color:var(--ink); font-weight:600} /* ========================================================================== COURSE READER ========================================================================== */ .course-shell{display:grid; grid-template-columns:312px minmax(0,1fr); gap:0; min-height:calc(100vh - 76px);} @media(max-width:1000px){.course-shell{grid-template-columns:1fr}} .course-side{border-right:1px solid var(--line); background:var(--band); padding:28px 22px 60px; position:sticky; top:76px; height:calc(100vh - 76px); overflow-y:auto;} @media(max-width:1000px){ .course-side{position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); padding:18px 22px;} .course-side.collapsed{padding:16px 22px} .course-side.collapsed .side-scroll{display:none} } .side-track{display:flex; align-items:center; gap:12px; margin-bottom:6px} .side-track .track-code{margin:0} .course-side h2{font-size:20px; font-weight:700; margin:10px 0 4px; letter-spacing:-.02em} .course-side .side-sub{font-size:14px; color:var(--muted)} .side-progress{margin:20px 0 26px} .side-progress .bar{height:8px; border-radius:99px; background:var(--line); overflow:hidden} .side-progress .bar i{display:block; height:100%; border-radius:99px; background:var(--tc,#1e7d3c); transition:width .7s cubic-bezier(.22,1,.36,1)} .side-progress .meta{display:flex; justify-content:space-between; font-size:13px; color:var(--muted); margin-top:9px; font-weight:500} .mod{margin-bottom:22px} .mod > h3{font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px} .lesson-link{display:flex; align-items:flex-start; gap:11px; padding:10px 12px; border-radius:10px; margin-bottom:3px; font-size:15px; color:var(--body); line-height:1.45; transition:background .14s ease, color .14s ease;} .lesson-link:hover{background:color-mix(in srgb, var(--tc,#1e7d3c) 8%, transparent); color:var(--ink)} .lesson-link.active{background:var(--surface); color:var(--ink); font-weight:600; box-shadow:var(--shadow-sm)} .lesson-link .dot{flex:0 0 auto; width:19px; height:19px; border-radius:50%; border:2px solid var(--line); margin-top:2px; display:grid; place-items:center; background:var(--surface); transition:all .2s ease} .lesson-link.done .dot{background:var(--tc,#1e7d3c); border-color:var(--tc,#1e7d3c); color:var(--on-brand)} .lesson-link.done .dot svg{display:block} .lesson-link .dot svg{display:none; width:11px; height:11px} .lesson-link .soon{font-size:11px; font-weight:700; color:var(--amber); letter-spacing:.06em; text-transform:uppercase; margin-left:auto; flex:0 0 auto} .side-toggle{display:none; width:100%; align-items:center; justify-content:space-between; background:none; border:0; padding:4px 0; color:var(--ink); font-family:"Poppins"; font-weight:600; font-size:16px} @media(max-width:1000px){.side-toggle{display:flex}} /* ------------------------------------------------------- lesson main */ .course-main{padding:44px 0 96px; min-width:0} .lesson-wrap{width:100%; max-width:760px; margin:0 auto; padding:0 28px} .lesson-head{padding-bottom:26px; border-bottom:1px solid var(--line); margin-bottom:34px} .crumb{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--muted); margin-bottom:14px; flex-wrap:wrap} .crumb a:hover{color:var(--brand)} .lesson-head h1{font-size:clamp(30px,4vw,42px); font-weight:700; letter-spacing:-.025em; text-wrap:balance} .lesson-head .lede{margin-top:16px; font-size:19px; color:var(--muted); max-width:64ch} .lesson-facts{display:flex; flex-wrap:wrap; gap:9px; margin-top:20px} .refs{background:var(--tint); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:34px} .refs h4{font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:11px} .refs ul{list-style:none; margin:0; padding:0; display:grid; gap:7px} .refs li{display:flex; gap:10px; align-items:baseline; font-size:14.5px} .refs .rc{flex:0 0 auto; font-family:"Poppins"; font-weight:600; font-size:12.5px; color:var(--tc,#1e7d3c); background:color-mix(in srgb, var(--tc,#1e7d3c) 11%, transparent); padding:2px 8px; border-radius:5px; white-space:nowrap} .refs .rs{font-weight:600; color:var(--ink)} .refs .rt{color:var(--muted)} /* lesson body typography */ .lesson-body > * + *{margin-top:24px} .lesson-body p{font-size:17.5px; line-height:1.75; color:var(--body)} .lesson-body h3{font-size:25px; font-weight:700; margin-top:44px; letter-spacing:-.02em} .lesson-body h3 + p{margin-top:14px} .lesson-body ul,.lesson-body ol{margin:0; padding-left:24px; display:grid; gap:11px} .lesson-body li{font-size:17px; line-height:1.7; color:var(--body); padding-left:4px} .lesson-body li::marker{color:var(--tc,#1e7d3c); font-weight:700} .callout{border-radius:13px; padding:20px 22px; border:1px solid var(--line); border-left:3px solid var(--muted); background:var(--tint)} .callout h4{display:flex; align-items:center; gap:9px; font-size:16px; font-weight:600; margin-bottom:9px} .callout p{font-size:16.5px; line-height:1.7} .callout.field{border-left-color:var(--brand); background:color-mix(in srgb, var(--brand) 6%, var(--tint))} .callout.field h4{color:var(--brand-d)} [data-theme="dark"] .callout.field h4{color:var(--brand-d)} .callout.warn{border-left-color:var(--amber); background:color-mix(in srgb, var(--amber) 7%, var(--tint))} .callout.warn h4{color:#b45309} [data-theme="dark"] .callout.warn h4{color:#fbbf24} .tbl-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:12px; -webkit-overflow-scrolling:touch} .lesson-body table{border-collapse:collapse; width:100%; min-width:520px; font-size:15.5px} .lesson-body th{background:var(--tint); text-align:left; font-family:"Poppins"; font-weight:600; font-size:13px; letter-spacing:.03em; color:var(--ink); padding:13px 16px; border-bottom:1px solid var(--line); white-space:nowrap} .lesson-body td{padding:13px 16px; border-bottom:1px solid var(--line); color:var(--body); vertical-align:top; line-height:1.6} .lesson-body tr:last-child td{border-bottom:0} .lesson-body tbody tr:nth-child(even){background:color-mix(in srgb, var(--tint) 55%, transparent)} .terms{border:1px solid var(--line); border-radius:13px; overflow:hidden} .terms > h4{background:var(--tint); padding:13px 18px; font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line)} .terms dl{margin:0; padding:6px 18px 16px} .terms dt{font-family:"Poppins"; font-weight:600; font-size:16.5px; color:var(--ink); margin-top:14px} .terms dd{margin:5px 0 0; font-size:16px; color:var(--body); line-height:1.65} .takeaways{margin-top:44px; background:color-mix(in srgb, var(--brand) 7%, var(--tint)); border:1px solid color-mix(in srgb, var(--brand) 22%, var(--line)); border-radius:15px; padding:24px 26px} .takeaways h3{font-size:19px; font-weight:700; display:flex; align-items:center; gap:10px; margin-bottom:14px} .takeaways ul{list-style:none; margin:0; padding:0; display:grid; gap:12px} .takeaways li{display:flex; gap:12px; font-size:16.5px; line-height:1.6; color:var(--body)} /* ------------------------------------------------------- quiz */ .quiz{margin-top:52px; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-sm); overflow:hidden} .quiz-head{padding:24px 26px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:16px; flex-wrap:wrap} .quiz-head h3{font-size:21px; font-weight:700} .quiz-head p{font-size:14.5px; color:var(--muted); margin-top:3px} .quiz-count{margin-left:auto; font-size:13.5px; font-weight:600; color:var(--muted); background:var(--tint); border:1px solid var(--line); padding:6px 13px; border-radius:999px; white-space:nowrap} .quiz-body{padding:26px} /* difficulty, graded to the four NICET levels */ .quiz-legend{padding:16px 26px; border-bottom:1px solid var(--line); background:var(--tint)} .quiz-legend p{font-size:14.5px; color:var(--muted); max-width:76ch} .lvl-key{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px} .lvl{display:inline-flex; align-items:baseline; gap:6px; font-size:12px; font-weight:500; padding:4px 10px; border-radius:999px; border:1px solid; white-space:nowrap; cursor:help;} .lvl b{font-weight:700; letter-spacing:.02em} .lvl-1{color:#0e7490; border-color:color-mix(in srgb,#0e7490 32%,transparent); background:color-mix(in srgb,#0e7490 9%,transparent)} .lvl-2{color:var(--brand); border-color:color-mix(in srgb,var(--brand) 34%,transparent); background:color-mix(in srgb,var(--brand) 9%,transparent)} .lvl-3{color:#b45309; border-color:color-mix(in srgb,#b45309 34%,transparent); background:color-mix(in srgb,#b45309 10%,transparent)} .lvl-4{color:#be123c; border-color:color-mix(in srgb,#be123c 34%,transparent); background:color-mix(in srgb,#be123c 10%,transparent)} :root[data-theme="dark"] .lvl-1{color:#67e8f9} :root[data-theme="dark"] .lvl-3{color:#fbbf24} :root[data-theme="dark"] .lvl-4{color:#fda4af} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .lvl-1{color:#67e8f9} :root:not([data-theme="light"]) .lvl-3{color:#fbbf24} :root:not([data-theme="light"]) .lvl-4{color:#fda4af} } .q-lvl{margin-bottom:9px} .q-stem > div{min-width:0} .q{padding:0 0 6px} .q + .q{margin-top:34px; padding-top:34px; border-top:1px solid var(--line)} .q-stem{display:flex; gap:13px; margin-bottom:18px} .q-num{flex:0 0 auto; width:27px; height:27px; border-radius:8px; background:var(--tint); border:1px solid var(--line); display:grid; place-items:center; font-family:"Poppins"; font-weight:700; font-size:13px; color:var(--muted)} .q-stem p{font-size:17.5px; font-weight:500; color:var(--ink); line-height:1.6} .choices{display:grid; gap:10px; padding-left:40px} @media(max-width:560px){.choices{padding-left:0}} .choice{display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left; background:var(--surface); border:1.5px solid var(--line); border-radius:11px; padding:14px 16px; font-size:16.5px; color:var(--body); line-height:1.55; transition:border-color .14s ease, background .14s ease, transform .1s ease;} .choice:hover:not([disabled]){border-color:var(--brand); background:color-mix(in srgb, var(--brand) 5%, var(--surface))} .choice .mk{flex:0 0 auto; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; font-family:"Poppins"; font-size:12.5px; font-weight:700; color:var(--muted); background:var(--surface)} .choice[disabled]{cursor:default} .choice.correct{border-color:var(--brand); background:color-mix(in srgb, var(--brand) 10%, var(--surface))} .choice.correct .mk{background:var(--brand); border-color:var(--brand); color:var(--on-brand)} .choice.wrong{border-color:var(--fa); background:color-mix(in srgb, var(--fa) 8%, var(--surface))} .choice.wrong .mk{background:var(--fa); border-color:var(--fa); color:#fff} .choice.dim{opacity:.55} .why{margin:14px 0 0 40px; border-radius:11px; padding:15px 17px; font-size:16px; line-height:1.65; background:var(--tint); border:1px solid var(--line); border-left:3px solid var(--brand); animation:fadeUp .2s ease} .why b{color:var(--ink)} @media(max-width:560px){.why{margin-left:0}} .quiz-result{margin-top:26px; padding:24px 26px; border-radius:14px; text-align:center; background:color-mix(in srgb, var(--brand) 8%, var(--tint)); border:1px solid color-mix(in srgb, var(--brand) 25%, var(--line))} .quiz-result .score{font-family:"Poppins"; font-size:40px; font-weight:800; color:var(--ink); line-height:1.1} .quiz-result p{margin-top:7px; color:var(--body)} .quiz-result .btn{margin-top:18px} .badge-pop{display:inline-flex; align-items:center; gap:11px; margin-top:16px; padding:11px 18px; border-radius:999px; background:var(--surface); border:1px solid color-mix(in srgb, var(--brand) 35%, var(--line)); box-shadow:var(--shadow-sm); font-weight:600; font-size:15px; color:var(--ink); animation:pop .4s cubic-bezier(.2,1.4,.4,1)} @keyframes pop{from{opacity:0; transform:scale(.86)} to{opacity:1; transform:none}} /* ------------------------------------------------------- lesson footer nav */ .lesson-nav{display:flex; gap:14px; margin-top:48px; padding-top:30px; border-top:1px solid var(--line); flex-wrap:wrap} .lesson-nav a{flex:1 1 240px; display:flex; flex-direction:column; gap:4px; border:1px solid var(--line); border-radius:13px; padding:16px 20px; background:var(--surface); transition:border-color .14s ease, transform .14s ease} .lesson-nav a:hover{border-color:var(--brand); transform:translateY(-2px)} .lesson-nav .dir{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)} .lesson-nav .ttl{font-family:"Poppins"; font-weight:600; font-size:16.5px; color:var(--ink); line-height:1.35} .lesson-nav .next{text-align:right; align-items:flex-end} /* reading progress bar */ .read-bar{position:fixed; top:0; left:0; height:3px; background:var(--brand); z-index:70; width:0; transition:width .1s linear} /* theme toggle */ .theme-btn{width:42px; height:42px; border-radius:11px; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; color:var(--body); transition:border-color .14s ease, color .14s ease} .theme-btn:hover{border-color:var(--brand); color:var(--brand)} .theme-btn .sun{display:none} [data-theme="dark"] .theme-btn .sun{display:block} [data-theme="dark"] .theme-btn .moon{display:none} /* ------------------------------------------------------- outline placeholder */ .outline-note{border:1px dashed color-mix(in srgb, var(--amber) 50%, var(--line)); background:color-mix(in srgb, var(--amber) 6%, var(--tint)); border-radius:14px; padding:28px; text-align:center} .outline-note h3{font-size:20px; font-weight:700; margin-bottom:9px} .outline-note p{color:var(--muted); max-width:56ch; margin:0 auto} /* ========================================================================== AUTH / ACCOUNT ========================================================================== */ .modal-veil{position:fixed; inset:0; background:rgba(8,18,13,.55); backdrop-filter:blur(4px); z-index:100; display:none; align-items:center; justify-content:center; padding:24px; overflow-y:auto} .modal-veil.open{display:flex; animation:fadeUp .18s ease} .modal{background:var(--surface); border-radius:20px; box-shadow:var(--shadow-lg); width:100%; max-width:452px; padding:34px; position:relative; margin:auto} .modal h2{font-size:26px; font-weight:700; letter-spacing:-.02em} .modal .sub{margin-top:9px; color:var(--muted); font-size:15.5px} .modal-x{position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--muted); display:grid; place-items:center} .modal-x:hover{border-color:var(--brand); color:var(--brand)} .field{margin-top:18px} .field label{display:block; font-size:14px; font-weight:600; color:var(--ink); margin-bottom:7px} .field input,.field select{width:100%; min-height:46px; padding:11px 14px; border:1.5px solid var(--line); border-radius:11px; background:var(--surface); color:var(--ink); font:inherit; font-size:16px; transition:border-color .14s ease} .field input:focus,.field select:focus{outline:none; border-color:var(--brand)} .field .hint{font-size:13px; color:var(--muted); margin-top:6px} .check{display:flex; gap:11px; align-items:flex-start; margin-top:18px; font-size:14.5px; color:var(--body); line-height:1.5} .check input{width:19px; height:19px; margin-top:2px; flex:0 0 auto; accent-color:var(--brand)} .form-msg{margin-top:16px; padding:12px 15px; border-radius:10px; font-size:14.5px; display:none} .form-msg.show{display:block} .form-msg.err{background:color-mix(in srgb, var(--fa) 10%, transparent); color:#a51d1d; border:1px solid color-mix(in srgb, var(--fa) 30%, transparent)} .form-msg.ok{background:var(--brand-l); color:var(--brand-dd); border:1px solid color-mix(in srgb, var(--brand) 30%, transparent)} [data-theme="dark"] .form-msg.err{color:#fca5a5} [data-theme="dark"] .form-msg.ok{color:#86efac} .modal .btn{width:100%; margin-top:22px} /* Confirmation screen shown after signup, replacing the form entirely. */ .sent{text-align:center; padding:6px 0 2px} .sent h2{font-size:25px; margin-bottom:10px} .sent .sub{margin:0 auto; max-width:38ch} .sent .sub b{color:var(--ink); font-weight:600; word-break:break-word} .sent-notes{list-style:none; margin:22px 0 0; padding:0; text-align:left; display:grid; gap:12px} .sent-notes li{position:relative; padding-left:20px; font-size:14.5px; color:var(--muted); line-height:1.6} .sent-notes li::before{content:""; position:absolute; left:4px; top:9px; width:6px; height:6px; border-radius:50%; background:var(--brand)} .sent .btn{margin-top:24px} .swap{margin-top:18px; text-align:center; font-size:14.5px; color:var(--muted)} .swap button{background:none; border:0; color:var(--brand); font-weight:600; padding:0} .swap button:hover{text-decoration:underline} .acct{display:flex; align-items:center; gap:10px} .acct .avatar{width:36px; height:36px; border-radius:50%; background:var(--brand); color:var(--on-brand); display:grid; place-items:center; font-family:"Poppins"; font-weight:700; font-size:14.5px} .acct .who{font-size:14px; font-weight:600; color:var(--ink); line-height:1.25} .acct .who span{display:block; font-weight:400; font-size:12.5px; color:var(--muted)} @media(max-width:640px){.acct .who{display:none}} /* sync banner */ .sync-note{display:flex; align-items:center; gap:12px; background:var(--brand-l); border:1px solid color-mix(in srgb, var(--brand) 25%, var(--line)); border-radius:12px; padding:13px 17px; font-size:14.5px; color:var(--brand-dd); margin-bottom:26px} [data-theme="dark"] .sync-note{color:var(--brand-d)} .sync-note button{margin-left:auto; background:none; border:0; color:inherit; font-weight:700; text-decoration:underline; white-space:nowrap; padding:0} /* ---------------------------------------------------------------- tools */ .calc-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow-sm); display:grid; grid-template-columns:200px minmax(0,1fr); gap:32px; align-items:start;} /* Column widths live here rather than inline on each page. An inline grid-template-columns cannot be overridden by the media query below, which is why every calculator stayed two-up on a phone and squeezed its text into one or two words per line. */ .calc-card.col-narrow{grid-template-columns:200px minmax(0,1fr)} .calc-card.col-wide{grid-template-columns:220px minmax(0,1fr)} .calc-card.col-single{grid-template-columns:1fr} .calc-result{position:sticky; top:96px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; background:var(--tint); border:1px solid var(--line); border-radius:14px; padding:26px 18px; min-height:190px;} .calc-result .num{font-family:"Poppins"; font-size:44px; font-weight:800; color:var(--brand); line-height:1} .calc-result .num-label{font-size:13px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em} .calc-result .placeholder{font-size:14.5px; color:var(--muted); max-width:22ch} .calc-result .factor-recap{font-size:12.5px; color:var(--muted); margin-top:4px} .calc-fields{display:flex; flex-direction:column} .calc-fields .field:first-child{margin-top:0} .calc-fields .note{font-size:13px; color:var(--muted); margin-top:7px} .area-row{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap} .area-row .field{margin-top:0; flex:1 1 100px} .area-row .times{padding-bottom:13px; color:var(--muted); font-weight:600} .area-divider{display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--muted); font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em} .area-divider::before,.area-divider::after{content:""; flex:1 1 auto; height:1px; background:var(--line)} .calc-tabs{display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap} .calc-tab{padding:9px 16px; border-radius:9px; border:1.5px solid var(--line); background:var(--surface); color:var(--muted); font-weight:600; font-size:14.5px; cursor:pointer; transition:border-color .14s ease, color .14s ease} .calc-tab[aria-selected="true"]{border-color:var(--brand); color:var(--brand); background:var(--brand-l)} .item-rows{display:flex; flex-direction:column; gap:10px} .item-row{display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; padding:14px; background:var(--tint); border:1px solid var(--line); border-radius:11px;} .item-row .field{margin-top:0; flex:1 1 110px} .item-row .field-qty{flex:0 1 80px} .item-row .field-check{flex:0 0 auto; display:flex; align-items:center; gap:7px; padding-bottom:12px; font-size:13.5px; color:var(--body)} .item-row .field-check input{width:auto; min-height:0} .item-row .remove-row{flex:0 0 auto; background:none; border:0; color:var(--muted); padding:11px 4px; cursor:pointer} .item-row .remove-row:hover{color:var(--fa)} .add-row-btn{margin-top:12px; align-self:flex-start} .fill-table-wrap{overflow-x:auto; margin-top:8px} .fill-table{width:100%; border-collapse:collapse; font-size:14px} .fill-table th,.fill-table td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap} .fill-table th{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600} .fill-table tr.pass td{color:var(--ink)} .fill-table tr.fail td{color:var(--muted)} .fill-table tr.recommended{background:var(--brand-l)} .fill-table .status-pass{color:var(--brand); font-weight:600} .fill-table .status-fail{color:var(--muted)} /* ---------------------------------------------------------------- badges */ .badge-hub .sec-head{margin-bottom:30px} .badge-summary{text-align:center; margin:0 0 40px; font-size:16px; color:var(--muted)} .badge-summary b{color:var(--ink)} .badge-track-group{margin-top:40px} .badge-track-group:first-child{margin-top:0} .badge-track-head{display:flex; align-items:center; gap:14px; margin-bottom:18px} .badge-track-head h3{font-size:20px; font-weight:700; letter-spacing:-.01em} .badge-card-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} .badge-card{display:flex; align-items:flex-start; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:16px 18px; box-shadow:var(--shadow-sm); transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;} .badge-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--tc) 40%, var(--line))} .badge-icon{flex:0 0 auto; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb, var(--tc) 14%, transparent); color:var(--tc)} .badge-card-body{display:flex; flex-direction:column; gap:3px; min-width:0} .badge-card-body b{font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.3} .badge-card-body span{font-size:12.5px; color:var(--muted)} .badge-empty{text-align:center; padding:60px 20px; border:1px dashed var(--line); border-radius:var(--radius); background:var(--tint)} .badge-empty p{color:var(--muted); font-size:16px; margin-bottom:20px} /* ---------------------------------------------------------------- footer */ footer.lc-foot{background:var(--ground); color:#9fb0a8; padding:56px 0 34px; margin-top:0} .lc-foot .cols{display:grid; gap:34px; grid-template-columns:1.6fr repeat(auto-fit,minmax(150px,1fr))} /* The footer ground is dark in BOTH themes. The marketing site solves this by sitting the logo on a white pill (see .foot-logo in index.html); match that here so the two footers look like the same site. */ .lc-foot .foot-logo{display:inline-flex; background:#fff; border-radius:14px; padding:10px 14px; margin-bottom:14px;} .lc-foot .foot-logo img{height:44px; width:auto; display:block; margin:0;} .lc-foot p{font-size:14.5px; max-width:42ch} .lc-foot h4{color:#fff; font-size:13px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; margin-bottom:14px} .lc-foot .fcol a{display:block; font-size:14.5px; margin-bottom:9px; color:#9fb0a8} .lc-foot .fcol a:hover{color:#fff} .lc-foot .bot{margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); font-size:13.5px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap} /* ---------------------------------------------------------------- utility */ .center{text-align:center} .mt-32{margin-top:32px} .mt-44{margin-top:44px} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important} } /* A way out of a tool without opening the menu. On a phone the only route back to the tools list was the hamburger, which nobody opens mid-task. */ .back-link{display:inline-flex; align-items:center; gap:7px; margin-bottom:18px; color:var(--muted); font-size:14px; font-weight:600; text-decoration:none; padding:9px 14px 9px 11px; border:1px solid var(--line); border-radius:99px; background:var(--surface); transition:color .14s ease, border-color .14s ease} .back-link:hover{color:var(--brand); border-color:var(--brand)} .back-link svg{width:15px; height:15px; flex:0 0 auto} /* ============ TOOLS, RESPONSIVE ============ These live at the end of the file on purpose. The rules they override are declared further up, and at equal specificity the later rule wins, so a responsive block placed beside its base rule gets quietly beaten. */ @media(max-width:820px){ .calc-card, .calc-card.col-narrow, .calc-card.col-wide, .calc-card.col-single{grid-template-columns:1fr; padding:22px; gap:22px} /* Stuck to the top of a one column layout, the result panel covers the very fields you are typing into. */ .calc-result{position:static; min-height:0; padding:22px 16px} } /* On a phone, two fields side by side leaves each about 170px, which truncates a select like "4 x 1-1/2 square (21 cu in)" into something unreadable. Stack them. Tablets keep the paired layout. */ @media(max-width:560px){ .area-row{flex-direction:column; align-items:stretch; gap:0} .area-row .field{flex:1 1 auto; margin-top:18px} .area-row .field:first-child{margin-top:0} /* The multiplication sign only reads correctly between two fields on one line. Stacked, it is noise. */ .area-row .times{display:none} .item-row{flex-direction:column; align-items:stretch; gap:0; position:relative} .item-row .field{flex:1 1 auto; margin-top:14px} .item-row .field:first-child{margin-top:0} .item-row .field-qty{flex:1 1 auto} .item-row .field-check{padding-bottom:0; margin-top:14px} /* Keep the remove control out of the stacked flow, in the corner. */ .item-row .remove-row{position:absolute; top:6px; right:6px; padding:8px} .calc-result .num{font-size:38px} .back-link{width:100%; justify-content:center; padding:13px 16px; font-size:15px} /* Safety net. A table wider than the phone drags the entire page sideways, which reads as the layout being unlocked rather than as one wide table. Making the table itself the scroller contains it. Wrapping tables in .fill-table-wrap is still the right thing to do; this catches the ones somebody forgets. */ main table{display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch} /* The reference page filters have the same problem. */ .ref-filters select{min-width:0; width:100%} .ref-filters .ref-chip{width:100%; justify-content:center} }