/* ═══════════════════════════════════════════════════════════════════════ GLOBAL app primitives — Neurobird flat lime/navy dark skin. Tokens/fonts/.btn--lime|outline|navy/.eyebrow/.rule live in brand.css (loaded BEFORE this). Here we only override local app selectors. ═══════════════════════════════════════════════════════════════════════ */ :root{ /* local app aliases mapped onto brand tokens (dark surfaces) */ --bg:var(--navy); --surface:#1e1e34; /* card panel: a hair lighter than navy */ --surface-2:#26263f; /* raised chip/track fill */ --line:rgba(255,255,255,.18); /* hairline on dark = brand --rule */ --line-soft:rgba(255,255,255,.10); --ink:var(--white); --ink-2:rgba(255,255,255,.86); --ink-dim:rgba(255,255,255,.62); --ink-faint:rgba(255,255,255,.44); --accent:var(--lime); --accent-soft:rgba(245,255,171,.12); --tint:var(--lime); /* status stays semantic but flattened onto the palette */ /* --good/--warn/--bad already defined in brand.css */ --radius:9px; --radius-lg:10px; /* shadows neutralised — flat design uses rules, not shadows */ --shadow-sm:none; --shadow-md:none; --shadow-lg:0 24px 60px -30px rgba(0,0,0,.6); } *{box-sizing:border-box;-webkit-font-smoothing:antialiased} html,body{background:var(--navy);color:var(--white); font-family:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; margin:0;min-height:100vh;font-weight:500;font-size:14px;line-height:1.5;letter-spacing:0;overflow-x:clip} a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .15s,color .15s} a:hover{border-color:var(--lime);color:var(--lime)} a.tint{color:var(--lime);border-color:rgba(245,255,171,.35)} a.tint:hover{border-color:var(--lime)} .hide{display:none!important} .muted{color:var(--ink-dim)} .faint{color:var(--ink-faint)} /* ── type: editorial, Satoshi Black ── */ h1{font-size:clamp(30px,4vw,42px);font-weight:900;letter-spacing:-.03em;margin:0;color:var(--white);line-height:.98;text-wrap:balance} h2:not(#auth h2){font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-faint);font-weight:700;margin:26px 0 10px} h2:not(#auth h2)::before{content:"/";opacity:.5;margin-right:2px} h3{font-size:15px;font-weight:800;margin:0 0 4px;letter-spacing:-.01em;color:var(--white)} .lede{color:var(--ink-dim);font-size:15px;max-width:62ch;margin:6px 0 0;font-weight:500} .display{font-weight:900;letter-spacing:-.03em;line-height:.98;text-wrap:balance} /* pixel-art layer neutralised (kept as no-ops so any stray hooks are inert) */ img{image-rendering:auto} .pixel,.pix-band,.pix-band::after,.pixel-card{} .pix-band{background:var(--surface)} .pixel-card{border:1px solid var(--line);border-radius:var(--radius);box-shadow:none;background:var(--surface)} /* ── buttons: solid lime primary / hairline ghost, uppercase wide track ── */ .btn{display:inline-flex;align-items:center;justify-content:center; background:var(--lime);color:var(--navy);border:none;border-radius:var(--radius); padding:12px 20px;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase; cursor:pointer;font-family:inherit;white-space:nowrap; transition:transform .15s ease,background .2s ease,color .2s ease,border-color .2s ease} .btn:hover{transform:translateY(-2px);background:var(--lime-hover)} .btn:active{transform:translateY(0)} .btn:disabled{opacity:.4;cursor:default;transform:none} .btn.ghost{background:transparent;color:var(--white);border:1.5px solid var(--line)} .btn.ghost:hover{background:var(--white);color:var(--navy);border-color:var(--white);transform:translateY(-2px)} .btn.sm{padding:8px 15px;font-size:11px;border-radius:var(--radius-sm)} .btn.big{width:100%;justify-content:center;padding:15px;font-size:13px} .btn.danger{background:transparent;color:var(--bad);border:1.5px solid rgba(224,112,112,.5)} .btn.danger:hover{background:var(--bad);color:var(--white);border-color:var(--bad);transform:translateY(-2px)} /* ── inputs: hairline-ruled, tinted-white fill, lime focus ── */ input:not([type]),input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=tel],input[type=url],textarea,select{ background:rgba(255,255,255,.06);color:var(--white);border:1px solid var(--line);border-radius:var(--radius); padding:11px 13px;font:inherit;font-size:13px;font-weight:500;width:100%; transition:border-color .2s,background .2s} select{appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center;padding-right:34px} select option{background:var(--navy);color:var(--white)} textarea{line-height:1.55;resize:vertical} input:focus,textarea:focus,select:focus{outline:none;border-color:var(--lime);background:rgba(255,255,255,.1)} input::placeholder,textarea::placeholder{color:var(--ink-faint)} input[type=file]{border:1px dashed var(--line);padding:12px 13px;background:rgba(255,255,255,.04);color:var(--ink-dim)} input[type=file]:hover{border-color:var(--lime)} label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-faint);font-weight:700;margin:14px 0 6px} .chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);font-weight:500;margin:9px 0;text-transform:none;letter-spacing:normal} .chk input{width:auto;margin:0;accent-color:var(--lime)} /* ── cards: flat navy-tint panel + 1px rule, NO shadow ── */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px;margin-top:18px;box-shadow:none} .stack{display:flex;flex-direction:column;gap:0} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px} .field{display:flex;flex-direction:column} /* experience editor cards */ .exp-card{border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px 18px 18px;margin-bottom:12px;background:rgba(255,255,255,.03)} .exp-head{display:flex;align-items:center;gap:10px;margin-bottom:6px} .exp-num{width:24px;height:22px;border-radius:var(--radius-sm);background:var(--lime);color:var(--navy);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex:0 0 auto} .exp-title{font-weight:700;font-size:14px;color:var(--white);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .exp-rm{flex:0 0 auto} .exp-card .field label{margin-top:10px} .exp-card .form-grid .field:first-child label,.exp-card .form-grid .field:nth-child(2) label{margin-top:2px} /* ── pills / badges / scores: flat, small-radius, lime-selected ── */ .pill{display:inline-block;padding:4px 11px;border-radius:var(--radius-sm);font-size:12px;background:var(--surface-2);color:var(--ink-2); margin:0 6px 6px 0;border:1px solid var(--line);font-weight:600} .pill.tint{background:var(--accent-soft);color:var(--lime);border-color:rgba(245,255,171,.35)} .pill.ok{background:rgba(75,191,148,.14);color:var(--good);border-color:rgba(75,191,148,.4)} .pill.sel{cursor:pointer} .pill.sel input{margin-right:6px;vertical-align:middle;accent-color:var(--lime)} .score{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:24px;padding:0 8px;border-radius:var(--radius-sm); background:var(--surface-2);color:var(--white);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;border:1px solid var(--line)} .score.good{background:rgba(75,191,148,.14);color:var(--good);border-color:rgba(75,191,148,.4)} .score.warn{background:rgba(224,182,74,.14);color:var(--warn);border-color:rgba(224,182,74,.4)} /* ── layout shell: navy app, flat navy sidebar, lime active nav ── */ .app{display:grid;grid-template-columns:236px 1fr;min-height:100vh;position:relative} .app::before{content:none} /* pixel-forest layer removed */ aside{background:var(--ink);border-right:1px solid var(--line);padding:22px 14px 16px;display:flex;flex-direction:column;gap:2px; position:sticky;top:0;height:100vh;color:var(--white);box-shadow:none} .brand{font-weight:900;letter-spacing:-.02em;font-size:16px;margin:4px 8px 24px;display:flex;align-items:center;gap:10px;color:var(--white);text-transform:uppercase} /* brand mark: flat lime tile with a navy "k" (no pixel scene) */ .brand-mark{width:24px;height:24px;border-radius:var(--radius-sm);flex:0 0 auto;background-size:cover;background-repeat:no-repeat; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%23F5FFAB'/%3E%3Ctext x='16' y='23' font-family='Helvetica,Arial,sans-serif' font-size='20' font-weight='900' text-anchor='middle' fill='%2317172B'%3Ek%3C/text%3E%3C/svg%3E")} .brand small{color:var(--ink-faint);font-weight:500;margin-left:2px;text-transform:none;letter-spacing:0} .nav button{background:none;border:0;color:var(--ink-dim);text-align:left;padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer; font:inherit;font-weight:700;font-size:13px;letter-spacing:.01em;width:100%;display:flex;align-items:center;gap:10px;transition:background .15s,color .15s} .nav button:hover{background:rgba(255,255,255,.06);color:var(--white)} .nav button.active{background:var(--lime);color:var(--navy)} /* ── "answers waiting" badge ──────────────────────────────────────────────────────────────── An application at needs_answers is FINISHED except for one fact only the person holds — the CV is tailored, the form is filled, the employer is one answer away. That state used to be visible only inside the Sent CVs list, which the user has to think to open, so completed applications sat unsent after every run. The count rides the nav so it is visible from every tab. ⛔ The number is APPLICATIONS UNLOCKED, not questions outstanding: "6" must mean six more applications go out, which is the only framing that reads as a reward rather than a chore. */ .nav button{position:relative} .navbadge{margin-left:auto;min-width:19px;height:19px;padding:0 6px;border-radius:10px; background:var(--lime);color:var(--navy);font-size:11px;font-weight:800;line-height:19px; text-align:center;letter-spacing:0;flex:0 0 auto; box-shadow:0 0 0 0 rgba(214,249,78,.55);animation:navpulse 2.6s ease-out 3} /* on the active (lime) row the lime pill would vanish into the background — invert it there */ .nav button.active .navbadge{background:var(--navy);color:var(--lime);box-shadow:none;animation:none} @keyframes navpulse{ 0%{box-shadow:0 0 0 0 rgba(214,249,78,.55)} 70%{box-shadow:0 0 0 7px rgba(214,249,78,0)} 100%{box-shadow:0 0 0 0 rgba(214,249,78,0)}} /* ⛔ the pulse is an ATTENTION cue, not decoration: it runs three times and stops, and never runs at all for someone who asked for less motion. */ @media (prefers-reduced-motion: reduce){ .navbadge{animation:none} } /* the banner at the top of Sent CVs — the same fact, stated where the user is looking */ .pendbar{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:12px 14px; border:1px solid rgba(214,249,78,.38);border-radius:var(--radius); background:linear-gradient(90deg,rgba(214,249,78,.13),rgba(214,249,78,.04))} .pendbar-dot{width:9px;height:9px;border-radius:5px;background:var(--lime);flex:0 0 auto; box-shadow:0 0 0 3px rgba(214,249,78,.18)} .pendbar-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .pendbar-txt b{font-size:14px;color:var(--white);line-height:1.25} .pendbar-txt span{font-size:12.5px;color:var(--ink-dim);line-height:1.35} .pendbar .btn{flex:0 0 auto} @media (max-width:640px){ .pendbar{flex-wrap:wrap} .pendbar .btn{width:100%} } .mobnav button .mobdot{position:absolute;top:6px;right:calc(50% - 16px);min-width:8px;height:8px; border-radius:5px;background:var(--lime);box-shadow:0 0 0 2px var(--navy,#17172B)} .mint{color:var(--lime)} .sidebar-foot{margin-top:auto;font-size:12px;color:var(--ink-faint);padding:12px 10px 0;border-top:1px solid var(--line)} .sidebar-foot a{color:var(--ink-faint);border:0} .sidebar-foot a:hover{color:var(--lime)} .page-head{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:8px} .page-head .actions{display:flex;gap:10px;flex-wrap:wrap} .app main{--pix-accent:none} main{padding:40px 56px 80px;max-width:1100px;width:100%;min-width:0;overflow-x:hidden} /* ── tables: hairline-ruled rows on dark ── */ table{width:100%;border-collapse:collapse;table-layout:auto} th,td{padding:12px 14px;text-align:left;font-size:13px;vertical-align:top;border-bottom:1px solid var(--line-soft)} th{color:var(--ink-faint);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--line)} tbody tr{transition:background .12s} tbody tr:hover{background:rgba(255,255,255,.04)} tbody tr:last-child td{border-bottom:0} .card-flush{padding:0;overflow:hidden} .empty{padding:56px 28px;text-align:center;color:var(--ink-faint)} .empty h3{color:var(--ink-2);margin-bottom:6px} .status{font-size:12.5px;color:var(--ink-dim);margin-left:4px} /* the onboarding hand-off notice: prominent, above the CTA, impossible to miss */ .ob-working{display:flex;align-items:center;justify-content:center;gap:12px; margin:18px auto 0;max-width:520px;padding:16px 20px;border-radius:var(--radius-lg); background:var(--accent-soft);border:1.5px solid var(--accent-line); font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.01em} .ob-working .spin{width:20px;height:20px;border-width:3px;margin-right:0} .ob-working.err{background:var(--bad-soft,rgba(192,57,43,.10));border-color:var(--bad,#C0392B);color:var(--bad,#C0392B)} .spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--lime);border-radius:50%;animation:sp .8s linear infinite;vertical-align:middle;margin-right:7px} @keyframes sp{to{transform:rotate(360deg)}} /* ── live jobs stream: flat panel + lime bar ── */ .live-head{display:flex;align-items:center;gap:14px;padding:14px 18px;margin-top:6px;border:1px solid var(--line); border-radius:var(--radius-lg);background:var(--surface);box-shadow:none; opacity:0;max-height:0;overflow:hidden;transition:opacity .4s ease,max-height .4s ease,margin .3s,padding .3s} .live-head.on{opacity:1;max-height:80px;padding:14px 18px} .live-dot{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(245,255,171,.5); animation:pulse 1.4s ease-out infinite;flex:0 0 auto} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(245,255,171,.45)}70%{box-shadow:0 0 0 9px rgba(245,255,171,0)}100%{box-shadow:0 0 0 0 rgba(245,255,171,0)}} .live-text{font-size:13px;color:var(--ink-2);font-weight:600} .live-text b{font-variant-numeric:tabular-nums;color:var(--white)} .live-bar{flex:1;height:4px;background:var(--surface-2);border-radius:2px;overflow:hidden;min-width:80px} .live-bar i{display:block;height:100%;width:0;border-radius:2px;position:relative; background:var(--lime);transition:width .6s cubic-bezier(.4,0,.2,1)} /* a travelling sheen on the fill so the bar always looks ALIVE even between the ~3s poll ticks (the % never sits frozen, so the bar never looks "stuck") */ .live-bar i::after{content:"";position:absolute;inset:0;border-radius:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); background-size:60% 100%;background-repeat:no-repeat;animation:sheen 1.4s ease-in-out infinite} @keyframes sheen{0%{background-position:-60% 0}100%{background-position:160% 0}} .live-bar.indet i{width:35%;animation:slide 1.2s ease-in-out infinite} @keyframes slide{0%{margin-left:-35%}100%{margin-left:100%}} @media(prefers-reduced-motion:reduce){.live-bar i::after{animation:none;opacity:0}} /* job cards grid */ .jobs-grid{display:flex;flex-direction:column;gap:10px;margin-top:14px} .jcard{display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:center; background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:15px 18px;box-shadow:none; will-change:transform,opacity;transition:border-color .15s,background .15s} .jcard:hover{border-color:rgba(245,255,171,.4)} .jcard .jmain{min-width:0} .jcard .jtitle{font-size:14.5px;font-weight:800;color:var(--white);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .jcard .jmeta{font-size:12.5px;color:var(--ink-dim);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap;align-items:center} .jcard .jco{font-weight:600;color:var(--ink-2)} .jcard .jright{display:flex;align-items:center;gap:12px;flex:0 0 auto} .jcard .jtime{font-size:11px;color:var(--ink-faint);font-variant-numeric:tabular-nums;white-space:nowrap} .fresh-tag{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--navy); background:var(--lime);border:none;border-radius:var(--radius-sm);padding:3px 8px} .dot-sep{color:var(--line)} .jm-i{white-space:nowrap;display:inline-flex;align-items:center;gap:0} @keyframes cardIn{0%{opacity:0;transform:translateY(14px) scale(.985)}100%{opacity:1;transform:translateY(0) scale(1)}} .jcard.enter{animation:cardIn .5s cubic-bezier(.16,1,.3,1) both} @keyframes flash{0%{background:rgba(245,255,171,.12);border-color:rgba(245,255,171,.5)}100%{background:var(--surface);border-color:var(--line)}} .jcard.flash{animation:cardIn .5s cubic-bezier(.16,1,.3,1) both, flash 1.6s ease-out .2s 1} /* skeleton */ .jcard.skel{pointer-events:none} .sk-line{height:11px;border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.14) 37%,rgba(255,255,255,.06) 63%); background-size:400% 100%;animation:shimmer 1.4s ease infinite} .sk-title{width:46%;height:14px} .sk-meta{width:30%;margin-top:9px} .sk-btn{width:96px;height:30px;border-radius:var(--radius)} @keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}} /* pagination */ .pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding:4px 2px} .pager .pinfo{font-size:12.5px;color:var(--ink-dim);font-variant-numeric:tabular-nums} .pager .pbtns{display:flex;gap:8px} @media(prefers-reduced-motion:reduce){.jcard.enter,.jcard.flash{animation:none}.live-dot{animation:none}} /* ══ LIVE APPLY: the card being tailored/submitted right now gets a Neurobird conic border ══ */ .jcard{position:relative} .jcard.tailoring{border-color:transparent;background:#FCFCF9} .jcard.tailoring::before{content:"";position:absolute;inset:-1.5px;z-index:0;padding:1.5px;border-radius:11px;pointer-events:none; background:conic-gradient(from var(--jedge,0deg),var(--lime) 0deg,#fff 60deg,var(--lime) 130deg,#3431A5 210deg,#6f6bff 260deg,var(--lime) 330deg,var(--lime) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude; animation:jedge 2.4s linear infinite} @property --jedge{syntax:'';inherits:false;initial-value:0deg} @keyframes jedge{to{--jedge:360deg}} .jcard.tailoring>*{position:relative;z-index:1} /* a little "TAILORING LIVE" status chip that appears on the active card */ .jcard .jstatus{display:none;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.08em; text-transform:uppercase;color:var(--navy);background:var(--lime);border-radius:20px;padding:5px 11px;white-space:nowrap} .jcard.tailoring .jstatus{display:inline-flex} .jcard .jstatus i{width:6px;height:6px;border-radius:50%;background:var(--navy);animation:jblink 1s infinite} @keyframes jblink{0%,100%{opacity:1}50%{opacity:.3}} @media(prefers-reduced-motion:reduce){.jcard.tailoring::before{animation:none}} /* ── apply-run progress banner (reuses .live-head slot styling) ── */ .apply-prog{margin:0 0 16px;border:1px solid var(--line);border-radius:14px;background:#FCFCF9;padding:16px 18px; display:none} .apply-prog.on{display:block} .apply-prog-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .apply-prog-t{font-size:14px;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:9px} .apply-prog-t .d{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(245,255,171,.6);animation:holopulse 1.6s infinite} .apply-prog-c{font-size:12.5px;color:var(--ink-dim);font-variant-numeric:tabular-nums;font-weight:600} .apply-prog-now{font-size:12.5px;color:var(--ink-2);margin-top:8px;min-height:1.2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .apply-prog-bar{height:7px;border-radius:5px;background:rgba(23,23,43,.08);overflow:hidden;margin-top:12px} .apply-prog-bar i{display:block;height:100%;width:0;background:var(--lime);border-radius:5px;transition:width .6s cubic-bezier(.16,1,.3,1)} .apply-prog.done .apply-prog-t .d{animation:none;background:var(--good)} /* ── segmented control: flat track, lime active ── */ .seg-ctrl{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:3px;gap:2px} .seg-ctrl button{background:none;border:0;color:var(--ink-dim);font:inherit;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:8px 16px;border-radius:var(--radius-sm);cursor:pointer;transition:.12s} .seg-ctrl button:hover{color:var(--white)} .seg-ctrl button.active{background:var(--lime);color:var(--navy);box-shadow:none} /* ── details / advanced ── */ details{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin-top:18px} details>summary{cursor:pointer;font-weight:700;padding:14px 18px;font-size:14px;list-style:none;display:flex;align-items:center;gap:9px;color:var(--white)} details>summary::-webkit-details-marker{display:none} details>summary::before{content:'›';color:var(--ink-faint);font-weight:700;display:inline-block;transition:transform .15s} details[open]>summary::before{transform:rotate(90deg)} details>summary .sub{color:var(--ink-faint);font-weight:500;font-size:12.5px} details .body{padding:4px 18px 18px;border-top:1px solid var(--line-soft)} /* ── tailoring badges / segments ── */ .badge{font-size:10px;padding:3px 8px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface-2);color:var(--ink-faint);vertical-align:middle;font-weight:700;text-transform:uppercase;letter-spacing:.05em} .badge.dyn{color:var(--lime);border-color:rgba(245,255,171,.35);background:var(--accent-soft)} .seg{padding:11px 14px;border-radius:var(--radius);margin:7px 0;border-left:3px solid var(--line);background:rgba(255,255,255,.03)} .seg.tailored{background:var(--accent-soft);border-left-color:var(--lime)} .seg.pinned{background:rgba(75,191,148,.12);border-left-color:var(--good)} .seg.verbatim{background:var(--surface-2);border-left-color:var(--line)} .tag{font-size:9px;text-transform:uppercase;letter-spacing:.08em;padding:2px 7px;border-radius:var(--radius-sm);margin-left:6px;font-weight:800} .tag.tailored{background:var(--lime);color:var(--navy)} .tag.pinned{background:rgba(75,191,148,.2);color:var(--good)} .tag.verbatim{background:var(--surface-2);color:var(--ink-faint)} .sk{display:inline-block;font-size:12px;padding:4px 11px;border-radius:var(--radius-sm);margin:3px 5px 3px 0;border:1px solid var(--line);background:var(--surface-2);font-weight:600} .sk.tailored{background:var(--accent-soft);border-color:rgba(245,255,171,.35);color:var(--lime)} .sk.pinned{background:rgba(75,191,148,.12);border-color:rgba(75,191,148,.4);color:var(--good)} .legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--ink-dim);margin:10px 0 16px} .legend .sw{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:middle} /* ── match insights (modal) ── */ .ins-score{font-size:34px;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--white)} .ins-score small{font-size:14px;font-weight:600;color:var(--ink-dim);letter-spacing:0} .ins-list{margin:6px 0 0;padding-left:18px} .ins-list li{margin:4px 0;font-size:13px} .ins-list.strengths li{color:var(--good)} .ins-list.gaps li{color:var(--ink-dim)} .pill.miss{background:var(--surface-2);color:var(--ink-dim);border-color:var(--line-soft)} /* ── tracker / kanban: flat columns, lime dragover ── */ .board{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:18px;align-items:start} .bcol{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--radius-lg);padding:10px;min-height:120px;transition:background .12s,border-color .12s} .bcol.dragover{background:var(--accent-soft);border-color:rgba(245,255,171,.5)} .bcol-head{display:flex;align-items:center;justify-content:space-between;font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--ink-faint);padding:4px 6px 10px} .bcol-head .cnt{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1px 8px;color:var(--ink-2);letter-spacing:0} .bcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px 11px;margin-bottom:8px;box-shadow:none;cursor:grab} .bcard:active{cursor:grabbing} .bcard.dragging{opacity:.45} .bcard .bco{font-weight:800;font-size:13px;letter-spacing:-.01em;color:var(--white)} .bcard .bt{font-size:12.5px;color:var(--ink-2);margin-top:2px} .bcard .bl{font-size:11.5px;color:var(--ink-faint);margin-top:2px} .bcard .brow{display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:6px} .bcard .bnext{background:none;border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink-dim);cursor:pointer;font:inherit;font-size:13px;padding:1px 8px;line-height:1.4} .bcard .bnext:hover{border-color:var(--lime);color:var(--lime)} .bempty{font-size:12px;color:var(--ink-faint);padding:10px 6px;text-align:center} @media(max-width:900px){.board{grid-template-columns:1fr 1fr;overflow-x:visible}} /* ── coach chat: dark bubbles, lime user accent ── */ .chat-wrap{display:flex;flex-direction:column;height:calc(100vh - 230px);min-height:380px;margin-top:14px} .chat-msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:6px 2px} .bub{max-width:74%;padding:11px 14px;border-radius:var(--radius-lg);font-size:13.5px;line-height:1.55;white-space:pre-wrap;word-wrap:break-word} .bub.user{align-self:flex-end;background:var(--lime);color:var(--navy);border:1px solid var(--lime);border-bottom-right-radius:4px;font-weight:600} .bub.bot{align-self:flex-start;background:var(--surface);color:var(--ink-2);border:1px solid var(--line);border-bottom-left-radius:4px;box-shadow:none} .chat-input{display:flex;gap:9px;align-items:flex-end;margin-top:14px;border-top:1px solid var(--line-soft);padding-top:14px} .chat-input textarea{resize:none;max-height:120px} .chat-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} .chat-chips .pill{cursor:pointer;transition:border-color .12s,background .12s,color .12s} .chat-chips .pill:hover{border-color:var(--lime);color:var(--lime);background:var(--accent-soft)} /* ── modal ── */ .ovl{position:fixed;inset:0;background:rgba(5,5,16,.7);display:flex;align-items:flex-start;justify-content:center;padding:34px 16px;overflow:auto;z-index:50} .modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 30px;max-width:840px;width:100%;margin:auto;box-shadow:var(--shadow-lg)} /* preview tabs */ .ptabs{display:inline-flex;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:4px;margin-bottom:16px} .ptab{background:transparent;border:0;color:var(--ink-dim);padding:7px 14px;border-radius:var(--radius-sm);font-weight:700;font-size:12px;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;transition:.12s} .ptab:hover{color:var(--white)} .ptab.on{background:var(--lime);color:var(--navy)} /* design switcher */ .dz-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px} .dz{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:9px 11px;cursor:pointer;transition:.12s} .dz:hover{border-color:var(--ink-faint)} .dz.on{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime)} .dz .dz-n{font-weight:700;font-size:12.5px;color:var(--white)} .dz .dz-b{font-size:10.5px;color:var(--ink-dim);line-height:1.3} .pdf-wrap{position:relative;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#0c0c18;min-height:540px} .pdf-frame{width:100%;height:62vh;min-height:540px;border:0;display:block;background:#fff} .pdf-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ink-dim);font-size:13px;background:#0c0c18;z-index:1} @media(max-width:680px){.dz-row{grid-template-columns:1fr 1fr}} /* Settings design picker */ #designGrid{display:block} /* Sent CVs table */ .sent-table{width:100%;border-collapse:collapse;font-size:13px} /* ── INBOX (the managed address, mail.keywordise.com) ── ⛔⛔ THE SCROLL BUG (owner 2026-10-09: "there's literally no option to scroll"): the list is `.card.card-flush.mi-list`. 03-app.css (loaded AFTER this file) says `.app .card-flush{overflow:hidden}`, specificity 0,2,0, which beat `.mi-list{max-height:72vh;overflow:auto}` (0,1,0): the list kept its 72vh box and clipped everything below it, with no scrollbar, no wheel, no keyboard. The rules below use `.app .card.mi-list` (0,3,0) so no later card rule can undo them. tools/inbox_scroll_check.py (deploy chain) loads the real stylesheets and fails when the list cannot scroll. Layout: desktop = two panes that fit the viewport and scroll on their own; phone = the page scrolls, the reader is a full-screen sheet. */ .nav-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;margin-left:6px;border-radius:9px;background:var(--lime);color:var(--navy);font-size:11px;font-weight:800;line-height:1;vertical-align:1px} /* category badges: tokens, light + dark. INTERVIEW soft green, OFFER stronger green, ASSESSMENT lime (.dyn), REJECTED calm grey (never red) */ .app{--mi-ok-bg:#E4F5E9;--mi-ok-ink:#1B5E36;--mi-ok-line:#B7E0C3;--mi-offer-bg:#C6EBD2;--mi-offer-ink:#0E5A2D;--mi-offer-line:#8FD0A6; --mi-grey-bg:#ECECEA;--mi-grey-ink:#50505F;--mi-grey-line:#D9D9D5;--mi-neutral-ink:#4B4B5C;--mi-switch-off:#C9C9D2;--mi-switch-on:var(--navy,#17172B)} :root[data-theme="dark"] .app{--mi-ok-bg:rgba(127,224,176,.16);--mi-ok-ink:#A5ECC6;--mi-ok-line:rgba(127,224,176,.38);--mi-offer-bg:rgba(127,224,176,.26);--mi-offer-ink:#C2F5DB;--mi-offer-line:rgba(127,224,176,.55); --mi-grey-bg:rgba(255,255,255,.08);--mi-grey-ink:#C9C9D3;--mi-grey-line:rgba(255,255,255,.16);--mi-neutral-ink:#C9C9D3;--mi-switch-off:rgba(255,255,255,.28);--mi-switch-on:var(--lime,#F5FFAB)} .app .badge.cat-interview{background:var(--mi-ok-bg);color:var(--mi-ok-ink);border-color:var(--mi-ok-line)} .app .badge.cat-offer{background:var(--mi-offer-bg);color:var(--mi-offer-ink);border-color:var(--mi-offer-line)} .app .badge.cat-rejection{background:var(--mi-grey-bg);color:var(--mi-grey-ink);border-color:var(--mi-grey-line)} .app .mi-row .badge:not(.cat-interview):not(.cat-offer):not(.cat-rejection):not(.dyn),.app .mi-bar .badge:not(.cat-interview):not(.cat-offer):not(.cat-rejection):not(.dyn){color:var(--mi-neutral-ink)} /* the header card: forwarding control (switch, address, Change) + the application address */ .app .card.mi-addrcard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 28px;align-items:center;padding:14px 20px;margin-bottom:0} .mi-card-row{display:flex;align-items:center;gap:8px;min-width:0} .mi-fwdblock{flex:1 1 auto;min-width:0} .mi-fwdline{display:flex;align-items:center;gap:12px;min-width:0} .mi-fwdtxt{display:flex;flex-direction:column;min-width:0;flex:1 1 auto} .mi-fwdtxt b{font-size:14px;font-weight:700;color:var(--ink);line-height:1.3} .mi-fwdaddr{font-size:13px;color:var(--ink-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35} .mi-switch{position:relative;flex:none;width:46px;height:28px;padding:0;border-radius:99px;border:0;background:var(--mi-switch-off);cursor:pointer;transition:background .18s;-webkit-tap-highlight-color:transparent} .mi-switch::after{content:"";position:absolute;inset:-9px -4px} /* a 46x46 hit area around the 46x28 track */ .mi-switch .mi-knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(23,23,43,.3);transition:transform .18s,background .18s} .mi-switch.on,.mi-switch[aria-checked="true"]{background:var(--mi-switch-on)} .mi-switch.on .mi-knob,.mi-switch[aria-checked="true"] .mi-knob{transform:translateX(18px);background:var(--lime,#F5FFAB)} .mi-switch:focus-visible,.mi-link:focus-visible,.mi-back:focus-visible,.mi-card-more:focus-visible,.mi-row:focus-visible,.mi-list:focus-visible{outline:2px solid var(--navy,#17172B);outline-offset:2px} .mi-link{flex:none;background:none;border:0;padding:6px 4px;font:inherit;font-size:13px;font-weight:700;color:var(--navy,#17172B);text-decoration:underline;text-underline-offset:3px;cursor:pointer} .mi-fwdblock.off .mi-fwdaddr{color:var(--ink-faint)} .mi-fwdform{margin-top:10px} .mi-fwdlbl{display:block;margin-bottom:6px} .mi-fwdrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .mi-fwdrow input{flex:1 1 220px;min-width:0;min-height:40px;padding:8px 12px;font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-sm,8px)} .mi-fwdrow input[aria-invalid="true"]{border-color:var(--bad,#C0392B)} .mi-fwdmsg{margin:8px 0 0;font-size:12.5px;line-height:1.45} .mi-fwdmsg.bad{color:var(--bad,#C0392B)} .mi-card-more{display:none} .mi-addrblock{min-width:0} .mi-addrline{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px;min-width:0} .mi-addrline code{font-family:inherit;font-size:15px;font-weight:800;color:var(--navy);background:var(--lime);padding:3px 9px;border-radius:6px;word-break:break-all} /* the two panes */ .mi-wrap{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:18px;align-items:start} .app .card.mi-list{max-height:72vh;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;margin-top:0} .app .card.mi-read{margin-top:0} .mi-row{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line-soft);padding:12px 16px;color:var(--ink-2);cursor:pointer;font:inherit;border-radius:0;-webkit-tap-highlight-color:transparent} .mi-row:hover{background:var(--surface-2)} .mi-row:active{background:var(--surface-2)} .mi-row.on{background:var(--accent-soft)} .mi-row.unread .mi-top b,.mi-row.unread .mi-subj{color:var(--ink);font-weight:800} .mi-row.unread .mi-top b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:7px;vertical-align:1px} .mi-row.mi-sys{opacity:.72} .mi-more .mi-row{padding-left:32px;background:var(--surface-2)} .mi-n{margin-left:auto;white-space:nowrap} #miSysToggle{margin-right:8px} /* the Inbox tab's unread RESULT-thread count: a small lime pill on the icon, same number as the sidebar (data-inbox-count), hidden at 0 */ .mobnav button .mob-badge{position:absolute;top:1px;left:calc(50% + 5px);min-width:17px;height:17px;padding:0 4px;box-sizing:border-box;border-radius:9px; background:var(--lime,#F5FFAB);color:var(--navy,#17172B);border:1px solid #B9CC4E;font-size:10.5px;font-weight:800;line-height:15px;text-align:center; font-variant-numeric:tabular-nums;letter-spacing:0;pointer-events:none} .mobnav button .mob-badge[hidden]{display:none} .mi-top{display:flex;justify-content:space-between;gap:8px;font-size:13px;min-width:0} .mi-top b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600} .mi-when{color:var(--ink-faint);font-size:12px;flex:none;font-variant-numeric:tabular-nums} .mi-subj{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mi-prev{font-size:12.5px;color:var(--ink-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mi-meta{display:flex;gap:8px;align-items:center;font-size:12px;min-width:0} .mi-co{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .mi-empty{margin:0;padding:22px 24px} .app .card.mi-read{padding:0;display:flex;flex-direction:column;min-width:0} .mi-bar{display:none} .mi-pane{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;overflow:auto;padding:20px 22px} .mi-head h3{font-size:18px;overflow-wrap:anywhere} .mi-from{font-size:13.5px;margin-top:6px;overflow-wrap:anywhere} .mi-sub{font-size:12.5px;margin-top:2px;overflow-wrap:anywhere} .mi-otp{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px;padding:10px 14px;border:1px solid rgba(245,255,171,.35);border-radius:var(--radius);background:var(--accent-soft)} .mi-otp b{font-size:18px;letter-spacing:.12em;color:var(--navy);background:var(--lime);padding:2px 10px;border-radius:6px;font-variant-numeric:tabular-nums} .mi-body{display:block;width:100%;flex:1 1 380px;min-height:260px;height:auto;border:0;border-radius:var(--radius);background:#fff;margin-top:16px} .mi-sent{margin-top:12px;padding:10px 14px;border-left:3px solid var(--lime);background:var(--surface-2);border-radius:0 var(--radius) var(--radius) 0;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere} .mi-reply{margin-top:16px;flex:none} .mi-reply-open{display:none} .mi-reply-form{display:flex;flex-direction:column;gap:10px} .mi-reply textarea{width:100%;resize:vertical;min-height:84px;background:var(--surface-2);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);padding:12px;font:inherit} .mi-reply-go{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:12.5px} .mi-empty-read{margin:auto;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:40px 24px;max-width:340px;color:var(--ink-dim);font-size:13.5px;line-height:1.5} .mi-empty-read svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.55} .mi-empty-read b{color:var(--ink);font-size:15px} /* desktop: the view fits the window, the list and the reader scroll on their own (no page scroll, no double scrollbars) */ @media (min-width:821px){ html.on-inbox .app main{padding-bottom:24px} [data-view="inbox"]:not(.hide){display:flex;flex-direction:column;height:calc(100vh - 64px);height:calc(100dvh - 64px);min-height:480px} [data-view="inbox"] .mi-addrcard{flex:none} .mi-wrap{flex:1 1 auto;min-height:0;grid-template-rows:minmax(0,1fr);align-items:stretch;margin-top:14px} .app .card.mi-list{max-height:none;height:100%} .app .card.mi-read{height:100%;overflow:hidden} } /* phone: native-mail feel. The page scrolls; the list is full width; a tapped thread is a full-screen sheet with a back chevron */ @media (max-width:820px){ html.on-inbox .app main{padding:12px 0 calc(86px + env(safe-area-inset-bottom))} [data-view="inbox"] .page-head{flex-wrap:nowrap;align-items:center;padding:0 16px;margin-bottom:10px} [data-view="inbox"] .page-head .lede{display:none} [data-view="inbox"] .page-head .actions{width:auto;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end;margin-left:auto;gap:8px} [data-view="inbox"] .page-head .actions .btn{width:auto;flex:none;min-height:44px;padding:0 16px} #miSysToggle{margin-right:0;min-height:44px;padding:0 14px} .app .card.mi-addrcard{display:block;margin:0 12px 12px;padding:2px 2px 2px 14px;position:relative} .mi-fwdline{min-height:44px;gap:10px} .mi-fwdtxt{flex-direction:row;align-items:center} .mi-fwdtxt b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .mi-fwdblock:not(.off) .mi-fwdaddr::before{content:"Forward to ";color:var(--ink);font-weight:600} .mi-fwdaddr{font-size:14px} .mi-link{min-height:44px;min-width:44px;padding:0 4px;font-size:14px} .mi-card-more{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;background:none;border:0;color:var(--ink-dim);cursor:pointer} .mi-card-more svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s} .mi-addrcard.open .mi-card-more svg{transform:rotate(180deg)} .mi-addrblock{display:none;padding:2px 0 12px} .mi-addrcard.open .mi-addrblock{display:block} .mi-fwdform{padding-bottom:12px} .mi-fwdrow .btn{min-height:44px} .mi-fwdrow input{min-height:44px} .mi-wrap{display:block} .app .card.mi-list{max-height:none;overflow:visible;border-radius:0;border-left:0;border-right:0;box-shadow:none} .mi-row{padding:12px 16px 12px 18px;min-height:76px;gap:2px} .mi-top{font-size:15px} .mi-top b{font-weight:600} .mi-when{font-size:12.5px} .mi-subj{font-size:14.5px} .mi-prev{font-size:13.5px} .mi-meta{font-size:12.5px;margin-top:3px} .mi-more .mi-row{padding-left:30px} .mi-n{padding:8px 0 8px 8px;margin:-8px 0} .app .card.mi-read{display:none} .app .card.mi-read.mi-open{display:flex;position:fixed;inset:0;margin:0;z-index:75;width:100%;height:100vh;height:100dvh;border:0;border-radius:0;background:var(--surface);overflow:hidden} html.mi-reading,html.mi-reading body{overflow:hidden} .mi-bar{display:flex;flex:none;align-items:center;gap:4px;padding:calc(6px + env(safe-area-inset-top)) 14px 6px 4px;min-height:56px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2} .mi-bar .badge{margin-left:auto} .mi-back{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;border-radius:50%;color:var(--navy,#17172B);cursor:pointer;-webkit-tap-highlight-color:transparent} .mi-back:active{background:var(--surface-2)} .mi-back svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .mi-bar-t{font-size:16px;font-weight:700;color:var(--navy,#17172B)} .mi-pane{padding:14px 16px calc(14px + env(safe-area-inset-bottom))} .mi-head h3{font-size:19px;line-height:1.25} .mi-body{min-height:44vh;margin-top:12px} .mi-reply{margin-top:12px} .mi-reply-open{display:inline-flex;width:100%;min-height:48px;justify-content:center;align-items:center} .mi-reply-form{display:none} .mi-reply.open .mi-reply-form{display:flex} .mi-reply.open .mi-reply-open{display:none} .mi-reply textarea{font-size:16px;min-height:110px} .mi-reply-go .btn{min-height:46px} .mi-otp .btn{min-height:44px} } .sent-table th{text-align:left;font-weight:700;color:var(--ink-faint);font-size:11px;text-transform:uppercase;letter-spacing:.1em;padding:10px 14px;border-bottom:1px solid var(--line)} .sent-table td{padding:12px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle} .sent-table tr:last-child td{border-bottom:0} .sent-table .vac-co{font-weight:800;color:var(--white)} .sent-table .vac-ti{font-size:12px;margin-top:2px;color:var(--ink-dim)} .sent-table .vac-link{color:var(--white);text-decoration:none;border-bottom:1px solid var(--line)} .sent-table .vac-link:hover{border-color:var(--lime);color:var(--lime)} .sent-table .nowrap{white-space:nowrap} .sent-badge{display:inline-block;padding:3px 9px;border-radius:var(--radius-sm);font-size:11px;font-weight:700;background:var(--surface-2);color:var(--ink-dim);text-transform:uppercase;letter-spacing:.04em} .sent-badge.ok{background:rgba(75,191,148,.14);color:var(--good)} .sent-badge.warn{background:rgba(224,182,74,.14);color:var(--warn)} .sent-badge.bad{background:rgba(224,112,112,.14);color:var(--bad)} /* ── CLEAN RESULTS PANEL — one hero KPI + a few distinct supporting stats ── */ .holo--clean .holo-hero2{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(20px,3vw,44px); align-items:center;padding:clamp(22px,3vw,34px) clamp(22px,3vw,36px)} .holo-hero2-main{min-width:0} .hh2-n{font-weight:900;letter-spacing:-.04em;line-height:.9;color:var(--lime); font-size:clamp(56px,8vw,104px);font-variant-numeric:tabular-nums} .hh2-l{font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--white); margin-top:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .hh2-sub{color:var(--ink-dim);font-size:13.5px;line-height:1.5;margin-top:14px;max-width:42ch} /* supporting stats: hairline-split, no boxes, clearly distinct numbers */ .holo-mini{display:grid;grid-template-columns:1fr;gap:0;border-left:1px solid var(--line)} .hmini{padding:14px 0 14px 22px;border-top:1px solid var(--line)} .hmini:first-child{border-top:0} .hmini-n{font-weight:900;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;color:var(--white); line-height:1;font-variant-numeric:tabular-nums} .hmini-l{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);margin-top:6px;font-weight:700} @media(max-width:820px){ .holo--clean .holo-hero2{grid-template-columns:1fr;gap:20px;padding:20px 18px} .hh2-n{font-size:clamp(52px,17vw,72px)} .holo-mini{border-left:0;border-top:1px solid var(--line);padding-top:4px;grid-template-columns:1fr 1fr} .hmini{padding:14px 0 0;border-top:0} .hmini:nth-child(3){grid-column:1 / -1} } /* ══════════════════════════════════════════════════════════════════════════════════════ ⛔⛔ MOBILE GPU GATE — docs/MOBILE_PERFORMANCE.md app.keywordise.com took 15-30s to start painting on iPhones for DAYS in July, and the cause was GPU COMPOSITING, not the network. `backdrop-filter` reads back everything painted behind it on every frame, and blur cost scales with R². Desktop GPUs absorb it; phone GPUs do not, and Safari paints NOTHING until the first composite finishes. Two offenders survived on the dashboard with no gate at all: .mobnav position:fixed + blur(18px) — recomposites on EVERY scroll frame, always on screen .seg blur(16px) x2-3 controls — the match/freshness sliders themselves Gated on coarse pointer OR narrow viewport. ⛔ NOT on navigator.connection: Safari does not implement it, so such a guard never fires on an iPhone — the exact trap from the July hunt. The translucency is replaced with a near-opaque background so the design still reads as intentional rather than broken. ══════════════════════════════════════════════════════════════════════════════════════ */ @media (hover:none) and (pointer:coarse), (max-width:900px){ .mobnav{-webkit-backdrop-filter:none!important;backdrop-filter:none!important; background:rgba(255,255,255,.97)!important} .seg{-webkit-backdrop-filter:none!important;backdrop-filter:none!important; background:rgba(23,23,43,.055)!important} .mobsheet,.upg-ovl{-webkit-backdrop-filter:none!important;backdrop-filter:none!important} .upg-ovl{background:rgba(12,12,24,.86)!important} /* a blurred solid IS a gradient — and a gradient costs nothing to composite */ .holo-glow,.bg::after{filter:none!important} } /* ── DASHBOARD HERO: solid navy block, lime ring + lime stat panel ── */ .holo{position:relative;overflow:hidden;border-radius:var(--radius-lg);margin:0 0 22px; background:var(--ink); border:1px solid var(--line); box-shadow:none; color:var(--white);isolation:isolate} .holo-aurora{display:none} .holo-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:22px;padding:22px} /* match ring — lime accent, no glow */ .holo-ring-wrap{display:flex;flex-direction:column;align-items:center;text-align:center} .holo-ring{position:relative;width:190px;height:190px;filter:none} .holo-ring-svg{width:100%;height:100%;transform:rotate(-90deg)} .holo-track{fill:none;stroke:var(--rule);stroke-width:9} .holo-arc{fill:none;stroke-width:9;stroke-linecap:round;stroke:var(--lime) !important; transition:stroke-dasharray 1.4s cubic-bezier(.22,1,.36,1)} .holo-ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} .holo-pct{font-size:48px;font-weight:900;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--white);text-shadow:none} .holo-pct span{font-size:20px;font-weight:800;opacity:.85;margin-left:1px} .holo-pct-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--lime);margin-top:6px;font-weight:800} .holo-ring-sub{font-size:12.5px;color:var(--ink-dim);margin:14px 0 0;max-width:34ch;line-height:1.45} /* HOURS SAVED — the big editorial number */ .holo-hours{font-weight:900;letter-spacing:-.04em;line-height:.9;font-variant-numeric:tabular-nums; color:var(--lime);text-shadow:none;font-size:clamp(64px,14vw,104px)} .holo-hours small{font-size:.34em;font-weight:800;color:var(--lime);margin-left:4px;letter-spacing:0} .mint-n{color:var(--lime) !important} /* reach strip */ .holo-reach{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px;align-items:center; padding:12px 22px 18px;font-size:12px;color:var(--ink-dim);font-weight:600;border-top:1px solid var(--line)} .holo-reach b{color:var(--white);font-weight:800;font-variant-numeric:tabular-nums} .holo-reach .dot{opacity:.4} /* stat counters — flat panels split by hairlines, NO glass/blur */ .holo-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .holo-stat{background:var(--surface);padding:15px 16px;backdrop-filter:none} .holo-hero-stat{grid-column:1 / -1;background:var(--lime)} .hs-n{font-size:27px;font-weight:900;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;color:var(--white)} .holo-hero-stat .hs-n{font-size:38px;color:var(--navy)} .hs-l{font-size:11px;color:var(--ink-dim);margin-top:7px;text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:7px;font-weight:700} .holo-hero-stat .hs-l{color:var(--muted-dark)} .hs-live{display:inline-flex;align-items:center;gap:5px;color:var(--lime);font-size:10px;letter-spacing:.06em;font-weight:800} .holo-hero-stat .hs-live{color:var(--navy)} .hs-live i{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(245,255,171,.6);animation:holopulse 1.8s infinite} .holo-hero-stat .hs-live i{background:var(--navy);box-shadow:0 0 0 0 rgba(23,23,43,.5)} .prism-text{color:var(--lime);font-weight:800} @keyframes holopulse{0%{box-shadow:0 0 0 0 rgba(245,255,171,.5)}70%{box-shadow:0 0 0 7px rgba(245,255,171,0)}100%{box-shadow:0 0 0 0 rgba(245,255,171,0)}} .holo-stat .hs-n{transition:opacity .5s} .holo-stat.loading .hs-n{opacity:.35} /* skeleton shimmer on stat numbers while /api/stats loads (perceived speed) */ .holo-stat.loading .hs-n{color:transparent!important;position:relative;border-radius:5px;min-width:44px;display:inline-block} .holo-stat.loading .hs-n::after{content:"";position:absolute;inset:2px 0;border-radius:5px; background:linear-gradient(100deg,rgba(255,255,255,.06) 30%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.06) 70%); background-size:400% 100%;animation:shimmer 1.4s ease infinite} .holo.holo--lime .holo-stat.loading .hs-n::after,.app .holo.holo--lime .holo-stat.loading .hs-n::after{ background:linear-gradient(100deg,rgba(23,23,43,.06) 30%,rgba(23,23,43,.14) 50%,rgba(23,23,43,.06) 70%);background-size:400% 100%} @media(min-width:620px){ .holo-grid{grid-template-columns:auto 1fr;align-items:center;gap:30px;padding:28px 30px} .holo-stats{grid-template-columns:repeat(3,1fr)} .holo-hero-stat{grid-column:span 3} .holo-ring{width:210px;height:210px} } @media(min-width:920px){ .holo-hero-stat{grid-column:span 1} .holo-stats{grid-template-columns:repeat(3,1fr)} } @media(prefers-reduced-motion:reduce){ .holo-arc{transition:none} .hs-live i{animation:none} .holo-aurora{display:none} } /* ── LANDING PAGE: flat dark, lime CTA (pixel/video removed) ── */ .lp-nav-shell{position:absolute;top:0;left:0;right:0;z-index:30;pointer-events:none} .lp-nav{pointer-events:auto;display:flex;align-items:center;justify-content:space-between; max-width:1200px;margin:0 auto;padding:22px 40px} .lp-nav .brand{margin:0;font-weight:900;color:var(--white);font-size:19px;letter-spacing:-.02em;line-height:1;display:flex;align-items:center;gap:10px;text-transform:uppercase} .lp-nav .brand-mark{width:24px;height:24px;margin:0;flex:0 0 auto} .brand-dot{display:none} .lp-nav-links{display:flex;align-items:center;gap:28px} .lp-nav-links a{border:0;color:var(--muted);font-size:14.5px;font-weight:500;transition:color .15s} .lp-nav-links a:hover{color:var(--lime)} .lp-login{background:none;border:0;color:var(--muted);font:inherit;font-size:14.5px;font-weight:500;cursor:pointer;transition:color .15s} .lp-login:hover{color:var(--lime)} .lp-cta-btn{background:var(--lime);color:var(--navy);border:0;font:inherit;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer; padding:12px 22px;border-radius:var(--radius);transition:transform .15s,background .2s} .lp-cta-btn:hover{transform:translateY(-2px);background:var(--lime-hover)} @media(max-width:720px){.lp-nav{padding:18px 20px} .lp-nav-links a,.lp-login{display:none} .lp-nav-links{gap:0}} /* hero — dark block, no video bg */ .lp-hero{position:relative;overflow:hidden;min-height:92vh;display:flex;align-items:center; background:#050510;border-bottom:1px solid var(--line)} .lp-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.28} .lp-hero::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,#050510 0%,rgba(5,5,16,.92) 40%,rgba(5,5,16,.55) 70%,rgba(5,5,16,.3) 100%)} .lp-hero-inner{position:relative;z-index:2;padding:40px 40px 56px;width:100%;max-width:1200px;margin:0 auto} .lp-hero-inner>*{max-width:620px} .lp-h1{font-size:clamp(42px,7vw,88px);color:var(--lime);font-weight:900;letter-spacing:-.03em;line-height:.96;text-transform:uppercase} /* eyebrow tag — flat lime-bordered chip with leading slash */ .lp-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px; font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--lime); background:transparent;border:1px solid var(--rule);border-radius:var(--radius-sm);padding:7px 13px;box-shadow:none} .lp-eyebrow::before{content:"/";opacity:.6;margin-right:2px} .lp-eyebrow-mark{display:none} .lp-sub{font-size:clamp(15px,2.4vw,20px);color:var(--muted);max-width:48ch;margin:22px 0 28px;line-height:1.5;font-weight:500} .lp-cta{display:flex;gap:10px;max-width:460px;flex-wrap:wrap} .lp-cta input{flex:1;min-width:180px;padding:15px 16px;border:1px solid var(--rule);border-radius:var(--radius);font-size:15px;background:rgba(255,255,255,.06);color:var(--white)} .lp-cta input::placeholder{color:var(--ink-faint)} .lp-cta input:focus{outline:none;border-color:var(--lime);background:rgba(255,255,255,.1)} .lp-cta .btn.big{padding:15px 24px;font-size:13px;font-weight:700;white-space:nowrap;width:auto} .lp-trust{margin-top:14px;font-size:12.5px;color:var(--ink-dim);font-weight:600} /* stats band */ .lp-stats{padding:clamp(40px,6vw,72px) 20px;border-bottom:1px solid var(--line);max-width:1000px;margin:0 auto;width:100%} .lp-stats-head{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;gap:9px;margin-bottom:20px} .lp-live{display:inline-flex;align-items:center;gap:5px;color:var(--lime);font-size:11px;text-transform:uppercase;letter-spacing:.08em} .lp-live i{width:6px;height:6px;border-radius:50%;background:var(--lime);animation:holopulse 1.8s infinite} .lp-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} @media(min-width:620px){.lp-stats-grid{grid-template-columns:repeat(4,1fr)}} .lp-stat-n{font-size:clamp(34px,4vw,48px);font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;color:var(--lime)} .lp-stat-l{font-size:12px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.08em;margin-top:6px;font-weight:700} /* how-it-works cards — flat navy panels + hairline */ .lp-how{display:grid;grid-template-columns:1fr;gap:16px;padding:36px 20px;max-width:1000px;margin:0 auto;width:100%} @media(min-width:760px){.lp-how{grid-template-columns:repeat(3,1fr)}} .lp-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:0 0 20px;overflow:hidden} .lp-card-pix{height:130px;background:var(--ink);background-size:cover;background-position:center;border-bottom:1px solid var(--line)} .lp-card h3{font-size:19px;margin:18px 20px 6px;color:var(--white);font-weight:900} .lp-card p{margin:0 20px;color:var(--ink-dim);font-size:14px;line-height:1.5} /* final cta — solid lime block */ .lp-final{position:relative;overflow:hidden;min-height:52vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;background:var(--lime)} .lp-final-bg{display:none} .lp-final::after{content:none} .lp-final-card{position:relative;z-index:2;background:transparent;border-radius:0;padding:30px 26px;max-width:520px;width:100%;text-align:center;color:var(--navy)} .lp-final-card h1,.lp-final-card h2{color:var(--navy)} .lp-final-card .lede{color:var(--muted-dark)} .lp-final-card .lp-cta{margin:0 auto;justify-content:center} .lp-final-card .lp-cta input{background:rgba(23,23,43,.06);border-color:var(--rule-dark);color:var(--navy)} .lp-final-card .lp-cta input::placeholder{color:var(--muted-dark-2)} .lp-final-card .lp-cta input:focus{border-color:var(--navy)} .lp-final-card .btn.big{background:var(--navy);color:var(--white)} .lp-final-card .btn.big:hover{background:var(--navy);opacity:.9} /* auth modal */ .lp-modal{position:fixed;inset:0;z-index:50;background:rgba(5,5,16,.7);backdrop-filter:none; display:flex;align-items:center;justify-content:center;padding:20px} .lp-modal .auth-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;max-width:400px;width:100%} .lp-modal .brand{justify-content:center;font-weight:900;margin-bottom:6px} .lp-modal .lede{text-align:center;margin:0 auto 20px;max-width:32ch} /* ── centered flows: auth + onboarding ── */ .center-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px} .auth-card{width:100%;max-width:380px} .auth-card .brand{justify-content:center;margin-bottom:6px} .auth-card .lede{text-align:center;font-size:14px;margin:0 auto 24px;max-width:34ch} .ob-col{width:100%;max-width:460px;text-align:center} .ob-step{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-faint);font-weight:700;margin-bottom:14px} /* CV-parse progress bar (onboarding) */ .ob-prog{max-width:420px;margin-inline:auto} .ob-prog-track{height:8px;border-radius:99px;background:rgba(23,23,43,.08);overflow:hidden} .ob-prog-track i{display:block;height:100%;width:0;border-radius:99px;background:var(--lime,#D6F94E); transition:width .28s cubic-bezier(.3,.9,.3,1)} /* ⛔ space-between + a long phase string squeezed "94% · 25s" into two broken lines. The counter is a fixed-width fact and must never wrap; the phase takes whatever is left and wraps cleanly. */ .ob-prog-row{display:flex;gap:12px;align-items:flex-start;justify-content:space-between; margin-top:8px;font-size:12.5px;color:var(--ink-dim,#5a6273);text-align:left} .ob-prog-row span:first-child{font-weight:700;color:var(--ink,#17172b);font-variant-numeric:tabular-nums; white-space:nowrap;flex:0 0 auto} .ob-prog-row span:last-child{flex:1 1 auto;text-align:right;line-height:1.45;min-width:0} @media (max-width:520px){ .ob-prog-row{flex-direction:column;gap:4px} .ob-prog-row span:last-child{text-align:left}} /* "Let AI decide" — the hero easy-path button */ .btn.ai-decide{background:var(--navy,#17172b);color:var(--lime,#D6F94E);font-size:16px;padding:16px 22px; display:inline-flex;align-items:center;gap:10px;box-shadow:0 6px 22px rgba(23,23,43,.18);transition:transform .15s,box-shadow .15s,opacity .2s} .btn.ai-decide:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(23,23,43,.24)} .btn.ai-decide.dim{opacity:.5} .btn.ai-decide .ai-spark{font-size:17px;line-height:1;color:var(--lime,#D6F94E);animation:aiSpark 2.4s ease-in-out infinite} @keyframes aiSpark{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.75}} @media(prefers-reduced-motion:reduce){.btn.ai-decide .ai-spark{animation:none}} .ob-or{display:flex;align-items:center;gap:12px;color:var(--ink-faint,#9aa0ab);font-size:12.5px;margin:20px auto 14px;max-width:360px} .ob-or::before,.ob-or::after{content:"";flex:1;height:1px;background:var(--line,#e7e9ed)} .ob-step::before{content:"/";opacity:.5;margin-right:2px} .ob-col h1{font-size:28px;margin-bottom:10px} .ob-col .lede{margin:0 auto 26px;text-align:center} .ob-col .field-left label{text-align:left} .ob-dots{display:flex;justify-content:center;gap:7px;margin-bottom:22px} .ob-dots span{width:7px;height:7px;border-radius:99px;background:var(--line)} .ob-dots span.on{background:var(--lime);width:20px} .preset-cards{display:flex;flex-direction:column;gap:9px;margin:18px 0;text-align:left} .preset-card{border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;cursor:pointer;transition:border-color .12s,background .12s;background:var(--surface)} .preset-card:hover{border-color:var(--ink-faint)} .preset-card.active{border-color:var(--lime);background:var(--accent-soft)} .preset-card .pl{font-weight:700;font-size:13.5px;display:flex;align-items:center;justify-content:space-between;color:var(--white)} .preset-card .rec{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--good);font-weight:700} .preset-card .pb{font-size:12.5px;color:var(--ink-dim);margin-top:3px} /* ⛔⛔⛔ WAS color:var(--white) — WHITE TEXT ON THE #FAFAF7 PAPER BACKGROUND = 1.05:1, i.e. INVISIBLE. (1.0 is the theoretical floor; AA needs 4.5.) It was written when the onboarding surface was NAVY; the wizard was later restyled light (`#onboard{background: var(--bg)}`) and this colour never migrated, because `--white` still means white. Both labels the user photographed — 'Where do you want to work?' and 'Where are you allowed to work?' — were unreadable on the most important screen a new user ever sees. ⭐⭐ A COLOUR CHOSEN FOR ONE SURFACE IS A BUG THE MOMENT THE SURFACE CHANGES. Use the SEMANTIC ink token, which the light/dark themes both redefine, never a literal. */ .fresh-lbl{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:2px;letter-spacing:-.01em} .chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:14px 0} /* desktop: the mobile bottom bar + sheet never show */ .mobnav,.mobsheet{display:none} @media(max-width:820px){ .app{grid-template-columns:1fr} /* mobile app shell: a clean minimal sticky TOP BAR (brand only). Primary nav lives in a fixed BOTTOM tab bar (native pattern); the old horizontal-scroll strip + sidebar sub-nav are retired. */ aside{position:sticky;top:0;z-index:15;height:auto;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px; border-right:0;border-bottom:1px solid var(--line);padding:12px 16px;box-shadow:0 1px 0 rgba(0,0,0,.04); width:100%;max-width:100%;overflow:hidden} .brand{margin:0;font-size:15px} .sidebar-pix,.sidebar-foot,.nav{display:none} main{padding:20px 16px calc(86px + env(safe-area-inset-bottom))} .form-grid{grid-template-columns:1fr} /* ── fixed bottom tab bar ── */ .mobnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60; /* ⛔ 86%-white relies on the blur to obscure what scrolls beneath — and when a browser skips backdrop-filter (energy saver, older engines) the nav becomes a window: the owner's screenshot shows a job title reading straight through the tab bar. Base opacity now works WITHOUT the blur; the blur is a bonus, never the load-bearing layer. */ background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px); border-top:1px solid rgba(23,23,43,.08); padding:7px 6px calc(7px + env(safe-area-inset-bottom));box-shadow:0 -1px 20px rgba(23,23,43,.06)} @supports not (backdrop-filter: blur(1px)){ .mobnav{background:rgba(255,255,255,.985)} } .mobnav button{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; background:none;border:0;cursor:pointer;padding:5px 2px;color:var(--ink-faint,#9098a6); font-size:10.5px;font-weight:600;letter-spacing:.01em;border-radius:12px;transition:color .15s} .mobnav button svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;transition:transform .18s cubic-bezier(.3,1.4,.5,1)} .mobnav button.on{color:var(--navy,#17172B)} .mobnav button.on svg{transform:translateY(-1px) scale(1.06)} .mobnav button.on::before{content:"";position:absolute;top:0;width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--lime,#D6F94E)} .mobnav button:active{transform:scale(.94)} /* ── "More" bottom sheet ── */ .mobsheet{display:block;position:fixed;inset:0;z-index:70;background:rgba(23,23,43,.32); -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s} .mobsheet.show{opacity:1;pointer-events:auto} .mobsheet[hidden]{display:none} .mobsheet-card{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:22px 22px 0 0; padding:10px 14px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -8px 40px rgba(23,23,43,.2); transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.9,.3,1)} .mobsheet.show .mobsheet-card{transform:translateY(0)} .mobsheet-grip{width:38px;height:4px;border-radius:99px;background:rgba(23,23,43,.16);margin:4px auto 12px} .mobsheet-card button{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;cursor:pointer; padding:15px 8px;font-size:15.5px;font-weight:600;color:var(--navy,#17172B);text-align:left;border-bottom:1px solid rgba(23,23,43,.06)} .mobsheet-card button:last-child{border-bottom:0;color:var(--bad,#c0492e)} .mobsheet-card button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;color:var(--ink-dim,#5a6273)} .mobsheet-card button:last-child svg{color:var(--bad,#c0492e)} .mobsheet-card button:active{background:rgba(23,23,43,.04)} } @media(max-width:480px){ main{padding:18px 14px calc(86px + env(safe-area-inset-bottom))} } /* ═══ MOBILE SAFETY LAYER — every app element fits the viewport, cleanly ═══ */ @media(max-width:820px){ /* hard containment so nothing can push the PAGE wider than the screen */ html,body{overflow-x:hidden;max-width:100%} .app,.app main{max-width:100%;min-width:0;overflow-x:hidden} .app img,.app svg,.app canvas,.app video{max-width:100%;height:auto} /* break only genuinely-long unbreakable strings (URLs/emails), NOT normal words */ .app main{overflow-wrap:break-word} /* page head: title + action buttons wrap; buttons share the row */ .page-head{flex-wrap:wrap;align-items:flex-start;gap:10px} .page-head .actions{width:100%;gap:8px} .page-head .actions .btn{flex:1 1 auto;min-width:0;padding:11px 12px;font-size:12.5px;white-space:nowrap} /* the "what your AI did" hero: single column, numbers scale to fit */ .holo-grid{grid-template-columns:1fr!important;gap:16px;padding:18px} .holo-hours{font-size:clamp(52px,17vw,76px)} .holo-ring-sub{max-width:100%} .holo-stats{grid-template-columns:1fr 1fr} .holo-hero-stat{grid-column:1 / -1} .hs-n{font-size:22px} .holo-hero-stat .hs-n{font-size:30px} .hs-l{font-size:10px;flex-wrap:wrap} .holo-reach{font-size:11px;gap:6px 8px;padding:12px 16px 16px} /* JOB CARDS: stack to one column so the title gets full width, actions below */ .jcard{grid-template-columns:1fr!important;gap:12px} .jcard .jtitle{white-space:normal;overflow:visible} .jcard .jright{flex-wrap:wrap;width:100%} .jcard .jright .btn{flex:1 1 auto;min-width:0;white-space:nowrap;padding:10px 10px;font-size:12.5px} /* ANY app table (Sent CVs, Answers, …) → stacked cards; header row hidden */ .app main table{display:block;width:100%;border-collapse:collapse} .app main table thead{display:none} .app main table tbody,.app main table tr{display:block;width:100%} .app main table tr{border-bottom:1px solid var(--line);padding:12px 2px} .app main table tr:last-child{border-bottom:0} .app main table td{display:block;width:100%;padding:3px 0;border:0;white-space:normal;overflow-wrap:break-word} .app main table td:empty{display:none} .app main table td .btn{width:auto;display:inline-flex} /* kanban board: horizontal swipe strip of fixed-width columns */ .board{display:flex!important;flex-wrap:nowrap;gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory;margin-left:-16px;margin-right:-16px;padding:18px 16px 4px;max-width:none} .board::-webkit-scrollbar{display:none} .board{scrollbar-width:none} .bcol{flex:0 0 80%;max-width:320px;scroll-snap-align:start} .dz-row{grid-template-columns:1fr 1fr!important} .form-grid,.two-col,.split{grid-template-columns:1fr!important} .ptabs{flex-wrap:wrap} .app input,.app select,.app textarea,.app .field{max-width:100%;width:100%} } @media(max-width:420px){ .holo-stats{grid-template-columns:1fr} .dz-row{grid-template-columns:1fr!important} } /* ═══ MOBILE POLISH — proportionate type, generous tap targets, calm rhythm ═══ */ @media(max-width:820px){ /* page rhythm: comfortable gutters, breathing room between blocks */ .app main{padding:18px 16px 80px} .page-head{margin-bottom:18px} .app .page-head h1{font-size:26px;line-height:1.05} .app .lede{font-size:14px;line-height:1.5;margin-top:6px} .app .card{padding:18px 16px;margin-top:16px;border-radius:14px} label{font-size:11px;margin:16px 0 7px} /* TAP TARGETS: every button/input min 44px, comfortable padding + readable size */ .app .btn{min-height:46px;padding:13px 18px;font-size:13px;border-radius:11px} .app .btn.sm{min-height:42px;padding:11px 14px;font-size:12px;border-radius:10px} .app input:not([type]),.app input[type=text],.app input[type=email],.app input[type=password], .app input[type=number],.app input[type=search],.app input[type=tel],.app input[type=url], .app textarea,.app select{min-height:46px;padding:13px 14px;font-size:16px;border-radius:11px} /* 16px inputs stop iOS from auto-zooming on focus */ .app select{background-position:right 14px center;padding-right:38px} .app .chk{min-height:40px;font-size:14px} /* page-head action buttons: full-width, stacked, easy to hit (no cramped side-by-side) */ .page-head .actions{flex-direction:column;gap:9px} .page-head .actions .btn{width:100%;flex:none;min-height:48px;font-size:13px} /* mode / segmented tabs: bigger touch rows */ .ptabs{gap:6px} .ptabs button,.ptabs a{min-height:42px;padding:10px 14px;font-size:12.5px} /* JOB CARDS: roomier, clear hierarchy, tappable action row */ .jobs-grid{gap:12px} .jcard{padding:16px 16px 14px;border-radius:14px;gap:10px} .jcard .jtitle{font-size:16px;line-height:1.25} .jcard .jmeta{font-size:13px;margin-top:5px;gap:5px 8px} .jcard .jright{gap:8px;margin-top:2px} .jcard .jright .btn{min-height:44px;font-size:12.5px;flex:1 1 30%} /* stacked-table cards (Sent, Answers): clear spacing + readable rows */ .app main table tr{padding:16px 2px} .app main table td{padding:4px 0;font-size:14px;line-height:1.5} .app main table td .btn{min-height:42px} .vac-co{font-size:15px} .vac-ti{font-size:13px;margin-top:3px} /* kanban cards: bigger, easier to read/tap */ .bcol{padding:12px} .bcol-head{font-size:12px;padding:6px 6px 12px} .bcard{padding:13px 13px;font-size:13.5px;border-radius:11px;margin-bottom:9px} /* holo hero: a touch more air */ .holo{margin:0 0 18px;border-radius:16px} .holo-hours{margin-top:4px} .holo-stat{padding:16px 16px} /* CV preview / big media: fill width, sensible min height */ .cv-preview,.pdf-frame,#cvPreview,.design-preview{width:100%;max-width:100%} .chat-msgs{font-size:14.5px;line-height:1.55} .chat-input{gap:8px} .chat-input textarea{min-height:46px} .chat-chips{gap:8px} .chat-chips button{min-height:40px;padding:9px 13px;font-size:12.5px} } /* ═══════════════════════════════════════════════════════════════════════════ LIGHT APP OVERRIDES — append to the END of the GLOBAL