:root{ --teal:#0F766E; --teal-dark:#0b5a54; --teal-light:#e6f4f2; --ink:#0f172a; --slate:#475569; --muted:#94a3b8; --line:#e2e8f0; --bg:#f8fafc; --card:#ffffff; --green:#16a34a; --amber:#d97706; --red:#dc2626; --blue:#2563eb; --link:#0F766E; --radius:14px; --shadow:0 1px 3px rgba(15,23,42,.08),0 8px 24px rgba(15,23,42,.06); } /* ===== Dark mode (toggled in Settings; ). The app is built on these variables, so most of the UI re-themes from the overrides here. --teal stays the same hue so white-on-teal buttons keep their contrast. ===== */ html[data-theme="dark"]{ --teal-light:#163a35; --ink:#e7ecf3; --slate:#b8c4d6; --muted:#8a99b0; --line:#2a3850; --bg:#0d1521; --card:#172234; --link:#2dd4bf; --shadow:0 1px 3px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.4); } html[data-theme="dark"]{color-scheme:dark} /* Bottom nav: inactive icons stay neutral grey, only the current tab is teal. */ html[data-theme="dark"] .botnav a.active, html[data-theme="dark"] .botnav a.bn-cta{color:#2dd4bf} html[data-theme="dark"] .pill, html[data-theme="dark"] .lifecycle .lc.done, html[data-theme="dark"] .orb-label, html[data-theme="dark"] .brand .wordmark .w2{color:#5eead4} html[data-theme="dark"] .badge.draft{background:#243246;color:#cbd5e1} html[data-theme="dark"] .lifecycle .lc{background:#243246;color:#9fb0c7} html[data-theme="dark"] .li-row.review{background:#2c2710} html[data-theme="dark"] .li-row.expanded{background:#26220f} html[data-theme="dark"] .compare tbody tr:nth-child(even){background:#1d2a3b} html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea{background:var(--card);color:var(--ink)} html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder{color:var(--muted)} /* Browser autofill forces a light background + dark text on inputs (the "light boxes" in dark mode). WebKit won't let you set the background directly, so paint over it with a huge inset box-shadow and override the text fill colour. */ html[data-theme="dark"] input:-webkit-autofill, html[data-theme="dark"] input:-webkit-autofill:hover, html[data-theme="dark"] input:-webkit-autofill:focus, html[data-theme="dark"] input:-webkit-autofill:active, html[data-theme="dark"] select:-webkit-autofill, html[data-theme="dark"] textarea:-webkit-autofill{ -webkit-text-fill-color:var(--ink); -webkit-box-shadow:0 0 0 1000px var(--card) inset; box-shadow:0 0 0 1000px var(--card) inset; caret-color:var(--ink); border:1px solid var(--line); transition:background-color 9999s ease-in-out 0s; } /* Weekday picker: a fixed 7-across grid (equal, shrinkable cols so it never wraps OR overflows). The native checkbox is hidden; a ticked day shows as a teal chip. */ .daygrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px} .daygrid label{display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600; padding:8px 0;border:1px solid var(--line);border-radius:7px;cursor:pointer;white-space:nowrap;overflow:hidden;user-select:none} .daygrid input{position:absolute;opacity:0;width:0;height:0} .daygrid label:has(input:checked){background:var(--teal);color:#fff;border-color:var(--teal)} /* Compact header buttons: full label on desktop, icon-only on phones (no wrapping). */ .btn{white-space:nowrap} @media (max-width:640px){ .btn-lbl{display:none} } /* Collapsible cards — tap the header to fold everything under it. */ .card.cc-collapsed > *:not(:first-child){display:none !important} .card .cc-chev{color:var(--muted)} /* "Available now" toggle switch (dashboard). */ .av-track{position:absolute;inset:0;background:var(--line);border-radius:999px;transition:background .15s} .av-track::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:left .15s ease;box-shadow:0 1px 3px rgba(0,0,0,.35)} .av-switch .avail-switch-in:checked + .av-track{background:#22c55e} .av-switch .avail-switch-in:checked + .av-track::after{left:25px} html[data-theme="dark"] .acct-menu a:hover{background:#243246} html[data-theme="dark"] .brand .wordmark .w1{color:var(--ink)} html[data-theme="dark"] img.shadowed, html[data-theme="dark"] .invoice-paper{filter:none} *{box-sizing:border-box} .ic{vertical-align:-.18em;flex:none} /* inline line-icons (icon() macro) */ html,body{margin:0;padding:0;overflow-x:clip;max-width:100%;width:100%;overscroll-behavior-x:none;-webkit-text-size-adjust:100%;text-size-adjust:100%} body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif; color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased} a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3{line-height:1.2;margin:0 0 .4em} .container{max-width:1080px;margin:0 auto;padding:0 20px} /* Data-heavy pages (wide tables) get more room on desktop so every column shows without horizontal scrolling; on mobile the .table-wrap still scrolls. */ .container.wide{max-width:1080px} /* One page width everywhere when logged in — narrow stays for auth pages only */ .authed .narrow{max-width:1080px} .narrow{max-width:760px} /* Nav */ .nav{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40} .nav .container{display:flex;align-items:center;gap:18px;height:62px} .brand{font-weight:800;font-size:20px;color:var(--ink);display:flex;align-items:center;gap:8px} .brand .dot{width:26px;height:26px;border-radius:7px;background:var(--teal);display:inline-flex; align-items:center;justify-content:center;color:#fff;font-size:14px} .brand .mark{display:block;border-radius:7px;flex:none} .brand .wordmark{font-weight:800;font-size:20px;letter-spacing:-.01em} .brand .wordmark .w1{color:#334155} .brand .wordmark .w2{color:var(--teal)} .brand:hover{text-decoration:none} .nav .spacer{flex:1} .nav a.navlink{color:var(--slate);font-weight:600;font-size:15px;white-space:nowrap} .nav a.navlink:hover{color:var(--teal);text-decoration:none} .pill{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--teal-light);color:var(--teal-dark)} /* Nav: secondary links flow inline on desktop, collapse into a hamburger on mobile. */ .nav-extra{display:contents} .nav-burger{display:none;background:none;border:1px solid var(--line);border-radius:9px; padding:5px 8px;cursor:pointer;color:var(--ink);align-items:center} .nav-burger:hover{background:var(--bg)} /* Mobile: compact bar (logo + Dashboard / Invoices / + Quote + hamburger). */ @media(max-width:720px){ .nav{position:relative} .nav .container{flex-wrap:nowrap;gap:8px} .nav .brand .wordmark{display:none} .nav a.navlink,.nav .pill{font-size:13px} .nav-burger{display:inline-flex} .nav-extra{display:none} .nav-extra.open{display:flex;flex-direction:column;position:absolute;top:calc(100% - 1px);right:8px; background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow); padding:8px;min-width:190px;z-index:50;gap:2px} .nav-extra.open a.navlink{padding:9px 12px;border-radius:8px;font-size:15px} .nav-extra.open a.navlink:hover{background:var(--bg);text-decoration:none} .banner{padding:28px 20px} .banner h2{font-size:23px} } /* Buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer; font-weight:700;font-size:15px;padding:11px 18px;border-radius:10px;border:1px solid transparent; background:var(--teal);color:#fff;transition:.15s;text-decoration:none; white-space:nowrap} /* never wrap/break a button label mid-word */ .btn:hover{background:var(--teal-dark);text-decoration:none} .btn.lg{padding:14px 26px;font-size:17px} .btn.block{width:100%} .btn.ghost{background:var(--card);color:var(--ink);border-color:var(--line)} .btn.ghost:hover{background:var(--bg);border-color:var(--muted)} .btn.danger{background:var(--card);color:var(--red);border-color:#fecaca} .btn.danger:hover{background:#fef2f2} .btn.sm{padding:7px 12px;font-size:13px} .btn.rec{background:var(--red);border-color:var(--red);color:#fff;animation:pulse 1.3s ease-in-out infinite} .btn.rec:hover{background:#b91c1c} @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.45)}50%{box-shadow:0 0 0 6px rgba(220,38,38,0)}} /* Voice input: an animated sound-wave instead of a mic emoji, and an AI gradient glow while listening instead of a red recording light. */ .wave{display:inline-flex;align-items:center;gap:2px;height:16px} .wave span{width:2.5px;border-radius:2px;background:currentColor} .wave span:nth-child(1){height:5px}.wave span:nth-child(2){height:11px} .wave span:nth-child(3){height:16px}.wave span:nth-child(4){height:9px} .wave span:nth-child(5){height:6px} .btn.listening{background:linear-gradient(120deg,var(--teal),#6366f1);border-color:transparent;color:#fff; animation:aiglow 1.7s ease-in-out infinite} .btn.listening .wave span{animation:eq .9s ease-in-out infinite} .btn.listening .wave span:nth-child(2){animation-delay:.12s} .btn.listening .wave span:nth-child(3){animation-delay:.24s} .btn.listening .wave span:nth-child(4){animation-delay:.36s} .btn.listening .wave span:nth-child(5){animation-delay:.48s} @keyframes eq{0%,100%{height:4px}50%{height:16px}} @keyframes aiglow{0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,.5)}50%{box-shadow:0 0 0 8px rgba(99,102,241,0)}} @media(prefers-reduced-motion:reduce){.btn.listening,.btn.listening .wave span{animation:none}} /* ChatGPT-style voice orb: a greeny-blue orb drops over the job box while listening. */ .voice-field{position:relative} .voice-orb{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:16px;border-radius:10px;background:rgba(248,250,252,.82);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); opacity:0;transform:translateY(-22px);pointer-events:none;transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1)} .voice-field.listening .voice-orb{opacity:1;transform:translateY(0);pointer-events:auto;cursor:pointer} .orb-wrap{position:relative;width:104px;height:104px} .orb{position:absolute;inset:0;border-radius:50%; background:radial-gradient(circle at 33% 30%,#6ee7d6 0%,#22d3ee 40%,#6366f1 88%); box-shadow:0 12px 50px rgba(56,189,248,.55);animation:orb-breathe 2.6s ease-in-out infinite} .orb::after{content:"";position:absolute;inset:-28%;border-radius:50%;z-index:-1; background:conic-gradient(from 0deg,#34d399,#22d3ee,#6366f1,#34d399);filter:blur(20px);opacity:.6; animation:orb-spin 6s linear infinite} .orb-label{font-weight:700;color:var(--teal-dark);font-size:14px} @keyframes orb-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}} @keyframes orb-spin{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.voice-orb{transition:opacity .2s}.orb,.orb::after{animation:none}} /* Cards */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:24px;box-shadow:var(--shadow)} .card + .card{margin-top:18px} .grid{display:grid;gap:18px} .grid>*{min-width:0} /* let grid items shrink so wide content scrolls, not the page */ .grid.cols-2{grid-template-columns:1fr 1fr} .grid.cols-3{grid-template-columns:repeat(3,1fr)} .grid.cols-4{grid-template-columns:repeat(4,1fr)} @media(max-width:780px){.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}.grid.cols-4{grid-template-columns:1fr 1fr}} /* Quote editor: 2-up (lines | side panel) on desktop, single scrollable column on mobile. (Was an inline grid-template-columns that ignored the breakpoint.) */ .quote-grid{display:grid;gap:18px;grid-template-columns:2fr 1fr;align-items:start} @media(max-width:820px){.quote-grid{grid-template-columns:1fr}} /* Let columns shrink below their content so the line-item controls row scrolls within itself (overflow-x) instead of widening the whole page on mobile. */ .quote-grid>*{min-width:0} #litable,.li-row{min-width:0} .btn-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* Forms */ label{display:block;font-weight:600;font-size:14px;margin:0 0 6px;color:var(--ink)} .hint{font-size:13px;color:var(--muted);font-weight:400} input[type=text],input[type=email],input[type=password],input[type=number],input[type=color], select,textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px; font-size:15px;font-family:inherit;background:var(--card);color:var(--ink)} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-light)} textarea{resize:vertical;min-height:120px} .field{margin-bottom:16px} .row{display:flex;gap:14px} .row > *{flex:1} @media(max-width:640px){.row{flex-direction:column;gap:0}} /* Flash */ .flash{padding:12px 16px;border-radius:10px;margin-bottom:14px;font-weight:600;font-size:14px} .flash.success{background:#dcfce7;color:#166534} .flash.error{background:#fee2e2;color:#991b1b} .flash.info{background:#dbeafe;color:#1e40af} /* Badges */ .badge{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;display:inline-block;white-space:nowrap} .badge.draft{background:#f1f5f9;color:#475569} .badge.sent{background:#dbeafe;color:#1e40af} .badge.accepted{background:#dcfce7;color:#166534} .badge.declined{background:#fee2e2;color:#991b1b} .badge.est{background:#fef3c7;color:#92400e} .badge.invoiced{background:#e0e7ff;color:#3730a3} /* job invoiced, not yet paid */ .badge.partial{background:#fef3c7;color:#92400e} /* invoice part-paid */ .badge.complete{background:#bbf7d0;color:#14532d} /* job paid in full → complete */ /* Tables */ .table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} .table-wrap table{min-width:600px} /* Job/title column: a sensible width floor so long job descriptions get room instead of wrapping into many lines while the fixed date/status columns hog the row. The table scrolls horizontally, so widening this is safe. */ .col-job{min-width:260px} /* Quote/invoice number column: never wrap the reference (e.g. "Q-1001"). */ .col-id{white-space:nowrap} /* Promo codes table (8 cols): keep headings + short cells on one line so the table scrolls instead of squishing every heading into a narrow stack. */ .promo-table{min-width:780px} .promo-table th{white-space:nowrap} /* "Verify" links under a market-priced line: where the suggested price came from. */ .li-verify{display:block;font-size:11px;color:var(--muted);margin-top:3px;line-height:1.5} .li-verify a{color:var(--teal)} .compare tbody tr:nth-child(even){background:var(--bg)} .compare tbody td{vertical-align:middle} .compare th{vertical-align:bottom} /* CSS bar charts (team analytics) — dependency-free, accurate heights because the bar % is relative to .bar-track (flex:1), with labels sitting outside it. */ .chart{display:flex;align-items:stretch;gap:8px;height:200px;overflow-x:auto;padding-bottom:2px} .bar-col{flex:1 0 36px;display:flex;flex-direction:column;min-width:36px} .bar-track{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:0} .bar{width:62%;background:var(--teal);border-radius:6px 6px 0 0;min-height:2px;transition:height .2s} .bar:hover{filter:brightness(1.08)} .bar-val{text-align:center;font-size:11px;font-weight:700;margin-top:5px} .bar-lbl{text-align:center;font-size:11px;color:var(--muted);white-space:nowrap} table{width:100%;border-collapse:collapse} th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line);font-size:14px} th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)} /* Headings are short labels — inside a scroll wrapper never let them break into squished multi-line stacks on mobile; the table scrolls sideways instead. Scoped to .table-wrap so bare (narrow) tables can't overflow the page. Long free-text CELLS (job titles, descriptions) still wrap. */ .table-wrap th{white-space:nowrap} /* Money/number cells stay on one line so amounts never split. */ td.num,th.num{text-align:right;white-space:nowrap} /* Phones: titles truncate so the MONEY (total + status) stays on screen — a horizontally-scrolled-away total is an invisible total. */ @media(max-width:640px){ td.col-job,th.col-job{max-width:30vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} } tr:last-child td{border-bottom:none} /* Stat tiles */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} @media(max-width:780px){.stats{grid-template-columns:1fr 1fr}} .stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px} .stat .v{font-size:26px;font-weight:800} .stat .l{font-size:13px;color:var(--muted);font-weight:600} /* Landing */ .hero{padding:72px 0 48px;text-align:center} .hero h1{font-size:48px;letter-spacing:-.02em;margin-bottom:18px} .hero p.sub{font-size:20px;color:var(--slate);max-width:620px;margin:0 auto 28px} .hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} @media(max-width:640px){.hero h1{font-size:34px}.hero p.sub{font-size:17px}} .kicker{color:var(--teal);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:13px;margin-bottom:14px} .section{padding:48px 0} .feature{padding:22px} .feature .ico{width:44px;height:44px;border-radius:12px;background:var(--teal-light);color:var(--teal-dark); display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px} .feature .ico svg{width:22px;height:22px} .feature h3{font-size:18px} .feature p{color:var(--slate);font-size:15px;margin:0} .banner{background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;border-radius:18px; padding:40px;text-align:center;margin:20px 0} .banner h2{color:#fff;font-size:28px} .banner .btn{background:var(--card);color:var(--teal-dark)} .banner .btn:hover{background:#e6f4f2} .logos{display:flex;gap:14px 26px;justify-content:center;flex-wrap:wrap;color:var(--muted);font-weight:700; font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-top:18px} /* Rotating integrations banner: a seamless auto-scrolling marquee. The track holds the chips TWICE and slides left by 50%, so it loops with no visible jump. */ .marquee{overflow:hidden;width:100%; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)} .marquee-track{display:flex;gap:30px;width:max-content;animation:marquee 28s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} .intg{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-weight:700;font-size:18px; letter-spacing:-.01em;color:var(--slate);background:var(--card);border:1px solid var(--line); border-radius:12px;padding:11px 20px;box-shadow:0 1px 2px rgba(15,23,42,.05)} /* Brand chips: official colours + a brand-coloured dot, so they read as a logo lockup without shipping the trademarked artwork. */ .intg-xero{color:#1AB4D7;border-color:#1AB4D733} .intg-myob{color:#6300A5;border-color:#6300A533} .intg-qbo{color:#2CA01C;border-color:#2CA01C33} .intg-stripe{color:#635BFF;border-color:#635BFF33} .intg-xero::before,.intg-myob::before,.intg-qbo::before,.intg-stripe::before{ content:"";width:9px;height:9px;border-radius:50%;background:currentColor;flex:none} /* Real brand logos: uniform height on a white chip so every brand's own colours read correctly regardless of the source artwork's aspect ratio. */ .intg-logo{padding:12px 24px} .intg-logo img{height:26px;width:auto;display:block} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){ .marquee{-webkit-mask-image:none;mask-image:none} .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:14px} } /* Pricing */ .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;align-items:start} @media(max-width:560px){.plans{grid-template-columns:1fr}} .plan{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;position:relative} .plan.featured{border:2px solid var(--teal);box-shadow:var(--shadow)} .plan .price{font-size:40px;font-weight:800;margin:8px 0} .plan .price span{font-size:16px;color:var(--muted);font-weight:600} .plan ul{list-style:none;padding:0;margin:18px 0} .plan li{padding:7px 0 7px 26px;position:relative;color:var(--slate);font-size:15px} .plan li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800} .tag{position:absolute;top:-12px;right:20px;background:var(--teal);color:#fff;font-size:12px; font-weight:700;padding:4px 12px;border-radius:999px} /* Misc */ .muted{color:var(--muted)} .center{text-align:center} .mt{margin-top:18px}.mt2{margin-top:32px} .flex{display:flex;align-items:center;gap:12px} .flex.between{justify-content:space-between;flex-wrap:wrap} .tag-trade{font-size:13px;color:var(--slate)} .empty{text-align:center;padding:48px 20px;color:var(--muted)} .empty .big{font-size:48px;margin-bottom:8px} /* Stacked line-item rows: description full-width on top, controls below — far clearer than the old cramped table (description was truncated, the type dropdown was squashed) and it wraps cleanly on mobile. */ /* Light two-line rows: description on its own line, then Type/Qty/Unit/Unit$/Total inline beneath. Just a separator between lines — no heavy boxes. */ /* Group headers on the review screen (Labour / Materials / Other). */ .li-group-head{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em; color:var(--teal-dark);margin:16px 0 4px;padding-left:2px} .li-group-head:first-child{margin-top:2px} /* Left status bar is a real border (reserves space) + a left gutter, so the description/controls inputs sit beside it and never overlap it. */ .li-row{padding:10px 4px 10px 12px;border-bottom:1px solid var(--line);border-left:3px solid transparent} .li-row.review{background:#fffbeb} .li-row.saved:not(.review){border-left-color:var(--green)} .li-desc{width:100%;font-size:15px;padding:8px 10px} .li-badge{margin-top:5px} .li-badge:empty{display:none} /* Line 2: Type/Qty/Unit/Unit$/Total stay on ONE line (never wrap to 3+ lines); on a very narrow phone this row scrolls horizontally on its own rather than widening the page. */ .li-controls{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin-top:8px;overflow-x:auto;padding-bottom:3px} .li-controls select{flex:none;padding:6px 7px;font-size:13px;width:auto} .li-ctl{flex:none;font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:4px} .li-ctl input{flex:none;padding:6px 7px;font-size:13px;width:58px} .li-ctl input.unit{width:50px} .li-ctl input.price{width:92px} /* Unit $ — room for larger dollar amounts */ .li-total{flex:none;margin-left:auto;font-size:14px;white-space:nowrap;padding-left:6px} /* Expanded review line: stack the controls full-width so they're easy to read/edit on a phone instead of the cramped horizontal-scroll strip. */ .li-row.expanded{background:#fffdf5;padding:12px;border-radius:10px} .li-row.expanded .li-controls{flex-direction:column;align-items:stretch;overflow-x:visible;gap:10px} .li-row.expanded .li-controls select{width:100%} .li-row.expanded .li-ctl{justify-content:space-between;font-size:14px;color:var(--ink)} .li-row.expanded .li-ctl input{width:60%;max-width:none} .li-row.expanded .li-total{margin-left:0;align-self:flex-end;font-size:16px} .notice{background:var(--teal-light);border:1px solid #b9e0db;color:var(--teal-dark); padding:12px 16px;border-radius:10px;font-size:14px} /* Combined upload dropbox */ .dropbox{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;cursor:pointer; border:2px dashed var(--line);border-radius:12px;background:var(--bg);padding:20px 16px;transition:.15s} .dropbox:hover,.dropbox.drag{border-color:var(--teal);background:var(--teal-light)} .spinner{display:none;align-items:center;gap:10px;color:var(--slate);font-weight:600;margin-top:14px} .spinner.on{display:flex} .dots{width:18px;height:18px;border:3px solid var(--teal-light);border-top-color:var(--teal); border-radius:50%;animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* --- notifications bell --- */ .bell-wrap{position:relative;display:inline-flex} .bell-btn{position:relative;background:none;border:0;cursor:pointer;color:var(--muted);padding:6px;border-radius:8px;display:inline-flex;align-items:center} .bell-btn:hover{color:var(--teal);background:rgba(15,118,110,.08)} .bell-badge{position:absolute;top:0;right:0;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:#e11d48;color:#fff;font-size:11px;font-weight:700;line-height:16px;text-align:center} .bell-panel{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-width:86vw;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(2,6,23,.18);z-index:60;overflow:hidden} @media(max-width:720px){.bell-panel{position:fixed;top:62px;left:10px;right:10px;width:auto;max-width:none}} .bell-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)} .linkbtn{background:none;border:0;color:var(--teal);font-weight:600;cursor:pointer;font-size:13px} .bell-items{max-height:60vh;overflow-y:auto} .bell-item{display:block;padding:11px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)} .bell-item:hover{background:var(--bg)} .bell-item.unread{background:rgba(15,118,110,.06)} .bell-item.unread .bi-title{font-weight:700} .bi-title{font-size:14px} .bi-body{font-size:13px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bi-ago{font-size:11px;color:var(--muted);margin-top:3px} .bell-foot{display:block;text-align:center;padding:10px;font-size:13px;font-weight:600;color:var(--teal);text-decoration:none} .bell-foot:hover{background:var(--bg)} .bell-empty{padding:20px 14px;color:var(--muted);text-align:center;font-size:14px} /* unread bubble on dashboard quote rows */ .qbubble{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#e11d48;color:#fff;font-size:11px;font-weight:700;vertical-align:middle} /* Narrow screens: let the nav wrap instead of widening the whole page */ /* Keep the nav on ONE line on phones: shrink the gap and drop the wordmark (logo stays) so every icon fits without squishing or wrapping. */ @media(max-width:600px){.nav .container{gap:9px;flex-wrap:nowrap}.nav .brand .wordmark{display:none}} @media(max-width:430px){.nav .container{gap:7px}.acct-name{display:none}}