/* ============================================================================================================
   ReconHire v3 design layer. Loaded LAST on every page (app, homepage, public pages), so it restyles the whole site
   from one place: same blue → violet colors, cleaner and slimmer surfaces.
   - Calm canvas: no grid pattern behind pages, one soft glow at the top.
   - Slim cards: thin border, light shadow, no gradient bars or glows; tighter padding in the side columns.
   - Eyebrow labels ("Your stats") instead of code-style "// YOUR STATS"; hidden in side columns where cards have titles.
   - One footer: the side-column footer keeps just the links; language and app badges live in the page footer.
   - New logo (a gradient tile with a radar arc and an R) with a slow, subtle scan.
   Dark mode keeps working: everything uses the theme tokens.
   ============================================================================================================ */
:root{--radius:14px;--v3-r:14px;--v3-r-sm:10px;
  --v3-shadow:0 1px 2px rgba(15,23,42,.05),0 1px 1px rgba(15,23,42,.03);
  --v3-shadow-hi:0 1px 2px rgba(15,23,42,.06),0 12px 28px -16px rgba(15,23,42,.28);
  --v3-grad:linear-gradient(135deg,#3b82f6 0%,#4f46e5 55%,#7c3aed 100%)}
[data-theme="dark"]{--v3-shadow:0 1px 2px rgba(0,0,0,.35);--v3-shadow-hi:0 1px 2px rgba(0,0,0,.4),0 14px 30px -16px rgba(0,0,0,.6)}

/* ---------- canvas ---------- */
html body{background-image:none;background-color:var(--bg)}
html body::before{background:radial-gradient(1000px 420px at 50% -220px,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%)}
html body .caret{display:none}

/* ---------- logo ---------- */
html body .logo{width:34px;height:34px;filter:none;overflow:visible}
html body .logo .rscan{transform-box:view-box;transform-origin:32px 32px;animation:v3scan 9s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes v3scan{0%{transform:rotate(0)}70%,100%{transform:rotate(360deg)}}
html body .brand:hover .logo .rscan{animation-duration:2.4s}
@media (prefers-reduced-motion:reduce){html body .logo .rscan{animation:none}}
html.reduce-motion body .logo .rscan,.reduce-motion .logo .rscan{animation:none}
html body .brand-text{justify-content:center}
html body .brand-text b{font-weight:700;letter-spacing:-.01em}
html body .brand-text b span{text-shadow:none;background:var(--v3-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- cards ---------- */
html body .card{border-radius:var(--v3-r);border:1px solid var(--line);box-shadow:var(--v3-shadow);background:var(--surface)}
html body:not(.landing) .card:not(.vote-card):not(.vote-banner)::before{display:none}
html body .card:hover{box-shadow:var(--v3-shadow)}
html body a.card:hover,html body .card.cpg-card:hover,html body .hx-tool:hover{box-shadow:var(--v3-shadow-hi);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
html body .modal{border-radius:18px;box-shadow:0 30px 80px -20px rgba(15,23,42,.45)}

/* side columns: slimmer cards, tighter rhythm */
html body :is(.f-left,.f-right,.hx-left,.hx-right,.side-rail,.jh-left,.jh-right,.mx-rail,.n-left) .card{padding:12px 14px;border-radius:12px}
html body :is(.f-left,.f-right,.hx-left,.hx-right,.side-rail,.jh-left,.jh-right,.mx-rail,.n-left){gap:10px}
html body :is(.f-left,.f-right,.hx-left,.hx-right,.side-rail,.jh-right) .card h3{font-size:.98rem}

/* ---------- eyebrow labels (were "// LABEL" in a code font) ---------- */
html body :is(.kicker,.rh-kick,.pr-kick,.ng-kick,.ln-kick,.sx-k,.mx-kick,.st-kick,.rg-kick,.jh-kick,.pb-kick,.biz-k,.wx2-k,.en-k,.gs-kicker,.ct-kick2,.kick,.rh-k){
  font:600 .7rem/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:none;-webkit-text-fill-color:currentColor}
html body :is(.f-left,.f-right,.hx-left,.hx-right,.side-rail,.jh-left,.jh-right,.mx-rail,.n-left) :is(.kicker,.rh-kick,.pr-kick,.ng-kick,.ln-kick,.sx-k,.mx-kick,.st-kick,.jh-kick){display:none}

/* ---------- page heads: smaller, calmer titles inside the app ---------- */
html body:not(.landing) main h1,html body:not(.landing) .page-head h1{font-size:clamp(1.45rem,2.4vw,1.85rem);letter-spacing:-.005em}
html body:not(.landing) main h2{font-size:clamp(1.15rem,1.8vw,1.35rem)}
html body .page-head p,html body .cpg-hero p{color:var(--muted)}
html body .cpg-hero{background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 7%,var(--surface)),color-mix(in srgb,var(--accent2) 7%,var(--surface)));border-color:color-mix(in srgb,var(--accent) 18%,var(--line))}

/* ---------- buttons, chips, inputs ---------- */
html body .btn{border-radius:var(--v3-r-sm);font-weight:600;box-shadow:none;transition:background-color .15s,border-color .15s,color .15s,transform .1s}
html body .btn:active{transform:translateY(1px)}
html body .btn.primary{background:var(--v3-grad);border-color:transparent;color:#fff}
html body .btn.primary:hover{filter:brightness(1.07)}
html body .btn.ghost{background:var(--surface);border:1px solid var(--line2);color:var(--text)}
html body .btn.ghost:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line2));color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
html body .btn.quiet{background:transparent;border-color:transparent}
html body .btn.quiet:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
html body .chip{border-radius:999px}
html body .chip.on{background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
html body :is(.input,input.input,select.input,textarea.input){border-radius:var(--v3-r-sm);border:1px solid var(--line2);background:var(--surface);box-shadow:none}
html body :is(.input,input.input,select.input,textarea.input):focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);outline:none}

/* ---------- top bar ---------- */
html body .top,html body header.top,html body .app-top{box-shadow:none}
html body .nav-lbl{font-weight:600;letter-spacing:0}
html body .tabs>a.on .nav-lbl,html body .tabs button.on .nav-lbl{color:var(--text)}

/* ---------- one footer ---------- */
html body :is(.f-left,.f-right,.hx-left,.hx-right,.side-rail,.jh-left,.jh-right,.mx-rail,.n-left,aside) .rail-foot :is(.rh-prefs,.ab-wrap){display:none}
html body:has(:is(.f-left,.hx-left,.side-rail,.jh-left,.mx-rail,.n-left,aside) .rail-foot) .foot-app{display:none}
html body .rail-foot{gap:8px;font-size:.78rem}
html body .rail-foot .rf-brand{opacity:.75}
html body .rail-foot .rf-logo{width:18px;height:18px}

/* ---------- ad cards: slimmer label, no glow ---------- */
html body .ad-card{box-shadow:var(--v3-shadow)}
html body .ad-label{font:600 .66rem/1 var(--font);letter-spacing:.06em;text-transform:uppercase;opacity:.75}
html body .ad-tag{background:none;padding:0;border:0}

/* ---------- empty states: lighter ---------- */
html body .card.empty{box-shadow:none;border-style:dashed}

/* ---------- homepage ---------- */
html body.landing .card{box-shadow:var(--v3-shadow)}
html body.landing .feat .card::before{display:none}

/* ---------- small screens ---------- */
@media (max-width:640px){
  html body :is(main) .card{border-radius:12px}
  html body .logo{width:30px;height:30px}
}

/* terminal-style status lines ("> nothing here yet_") are gone in v3; the plain sentence under them stays */
html body :is(.mx-term,p.rh-term,.jh-term){font:500 .92rem/1.4 var(--font);color:var(--muted);background:none;border:0;padding:0;letter-spacing:0;text-transform:none}
html body :is(.mx-term,p.rh-term,.jh-term)::after,html body :is(.mx-term,p.rh-term,.jh-term)::before{display:none}
html body .mx-empty .mx-term+p,html body .mx-empty p{margin-top:4px}
/* homepage: calmer canvas too */
html body.landing{background-image:none}

/* ============================================================================================================
   v3.1 redesign: less boxy, tighter corners, fewer widgets.
   - Corners: panels and cards 8px (was 14 to 16). Buttons and chips stay fully rounded.
   - Open side columns: widgets in the left and right columns are open sections divided by a thin line, not boxes.
   - Home feed: post box first; left column is your card plus one "today" card; right column is job picks, people,
     one ad and one Explore list (interview prep, puzzles, practice, events, groups, range) instead of seven cards.
   - Profile: shorter header, and empty sections are one slim row each instead of a tall empty box.
   ============================================================================================================ */
:root{--radius:8px;--v3-r:8px;--v3-r-sm:8px}
html body .card{border-radius:8px;box-shadow:none}
html body .card:hover{box-shadow:none}
html body .modal{border-radius:12px}
html body :is(.input,input.input,select.input,textarea.input){border-radius:8px}
html body .btn{border-radius:999px}
html body .cpg-logo,html body .cpg-mono{border-radius:8px}
html body .cpg-head-logo .cpg-logo,html body .cpg-head-logo .cpg-mono{border-radius:10px}
html body .cpg-head .cpg-cover{border-radius:8px 8px 0 0}
html body .cpg-card .cpg-card-cover{border-radius:8px 8px 0 0}
html body :is(.cpg-col,.cpg-person,.pt-slot){border-radius:8px}

/* tabs: an underline instead of a pill bar */
html body .cpg-tabs{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:0;gap:2px}
html body .cpg-tabs a{border-radius:0;padding:10px 14px 11px;position:relative;background:none}
html body .cpg-tabs a:hover{background:none;color:var(--text)}
html body .cpg-tabs a.on{color:var(--text);background:none}
html body .cpg-tabs a.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:3px;border-radius:3px;background:var(--v3-grad)}

/* open side columns: sections, not boxes */
html body :is(.f-left,.f-right,.hx-right,.side-rail,.jh-right,.ng-right,.mx-rail,.n-left) > .card:not(.ad-card):not(.ad-spot):not(.f-me):not(.jh-me):not(.hx-menu),
html body :is(.f-left,.f-right,.hx-right,.side-rail,.jh-right,.ng-right) > .stack > .card:not(.ad-card){
  background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;padding:14px 2px 6px}
html body :is(.f-left,.f-right,.hx-right,.side-rail,.jh-right,.ng-right,.mx-rail,.n-left) > .card:first-child:not(.ad-card):not(.ad-spot):not(.f-me):not(.jh-me):not(.hx-menu){border-top:0;padding-top:2px}
html body :is(.f-left,.f-right,.hx-left,.hx-right,.side-rail,.jh-left,.jh-right,.ng-left,.ng-right,.mx-rail,.n-left){gap:6px}
html body :is(.f-left,.f-right,.hx-right,.side-rail,.jh-right,.ng-right) .ad-card,html body :is(.f-right,.side-rail) .ad-spot{border-radius:8px;margin:6px 0}
/* the left menus (Jobs, Hiring, Network) stay as one clean panel */
html body :is(.hx-menu,.jh-menu,.ng-man){border-radius:8px}

/* ---------- Home feed ---------- */
html body .rh-feed .f-left > :is(.act-card,.ad-left,.rg-homecard){display:none}
html body .rh-feed .f-right > :is(.iv-home,.gx-card,.ad-text-card,.ev-rail,.cm-sugg,.cm-hgaps,.pr-home){display:none}
html body .rh-feed .f-mid{display:flex;flex-direction:column;gap:10px}
html body .rh-feed .f-mid > *{margin:0}
html body .rh-feed .f-mid > .f-compose{order:1}
html body .rh-feed .f-mid > .eg-slot{order:2}
html body .rh-feed .f-mid > .f-tabs{order:3}
html body .rh-feed .f-mid > .f-list{order:4}
html body .rh-feed .f-mid > .td-strip{display:none}
html body .rh-feed .f-mid > .hp-card{order:5;display:none}
html body .rh-feed .f-right{display:flex;flex-direction:column}
html body .rh-feed .f-right > .f-jobs{order:1}
html body .rh-feed .f-right > .f-ppl{order:2}
html body .rh-feed .f-right > .ad-spot,html body .rh-feed .f-right > .ad-card{order:3}
html body .rh-feed .f-right > .v3-explore{order:4}
html body .rh-feed .f-right > .trend{order:5}
html body .rh-feed .f-right > .rail-foot{order:9}
html body .rh-feed .f-post{border-radius:8px}
/* getting started: one slim line with the next step; the rest opens on demand */
html body .eg-card{padding:12px 14px}
html body .eg-card:not(.v3-open) .eg-steps li:not(.next){display:none}
html body .eg-card:not(.v3-open) .eg-foot{display:none}
html body .eg-card .eg-head{cursor:pointer}
html body .eg-card .v3-more{border:0;background:none;color:var(--accent);font:600 .82rem var(--font);cursor:pointer;padding:4px 0 0}
/* the Explore list */
html body .v3-explore h3{margin:0 0 6px;font-size:.98rem}
html body .v3-explore a{display:flex;align-items:center;gap:10px;padding:7px 4px;border-radius:8px;color:var(--text);text-decoration:none;font-size:.9rem}
html body .v3-explore a:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--accent)}
html body .v3-explore a .ico{width:18px;height:18px;color:var(--accent);flex:none}
html body .v3-explore a small{margin-left:auto;color:var(--dim);font-size:.76rem}

/* ---------- Profile ---------- */
html body .pf-hero .pf-cover{height:140px}
html body .pf-page .wl-sec{padding-top:6px}
html body .pf-page .wl-empty{display:flex;align-items:center;gap:12px;min-height:0;padding:12px 14px;text-align:left;border:1px dashed var(--line2);border-radius:8px;background:none}
html body .pf-page .wl-empty > svg,html body .pf-page .wl-empty > .ico{width:22px;height:22px;flex:none;margin:0}
html body .pf-page .wl-empty :is(h3,h4,b){margin:0;font-size:.95rem}
html body .pf-page .wl-empty p{margin:0;font-size:.86rem;color:var(--muted)}
html body .pf-page .pf-nudge{padding:10px 14px}
/* stronger overrides where older skins used long selectors */
html body .pf-page .pf-hero .pf-cover{height:132px!important;min-height:0!important}
html body .pf-page .wl-empty{flex-direction:row!important;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:6px 12px}
html body .pf-page .wl-empty > b{flex:0 0 auto}
html body .pf-page .wl-empty > span{flex:1 1 320px;color:var(--muted);font-size:.86rem;text-align:left}
html body .rh-feed .f-left > .ad-card{display:none}
html body .rh-feed .card,html body .pf-page .card,html body .jh-grid .card,html body .ng-grid .card{border-radius:8px}
/* profile side column: the streak and daily challenge live on Home; keep strength, views and one ad here */
html body .pf-page + .side-rail .hb-card,html body .rail-grid > .side-rail .hb-card{display:none}
/* one promo per side column: when the large spotlight ad shows, the small card for it does not */
html body :is(.side-rail,.f-right,.jh-right,.hx-right):has(> .ad-spot) > .ad-card{display:none}
html body .pf-page .wl-empty b::before{content:none}
/* leftover code-style prefixes added by older styles */
html body .hb-qcard>h3::before,html body .wl-about h3::before,html body .wl-made::before,html body .net-stats>b::before,html body .trend>b::before,html body .cm-hgaps>.spread>b::before,html body .cm-sugg>.spread>b::before{content:none!important;display:none!important}
html body .rh-feed .f-skel::after{content:"Loading your feed…"!important;font:500 .9rem var(--font)!important}
/* feed: no promo in the left column; on phones the post box comes first and the same widgets are trimmed */
html body .rh-feed .f-left > .ad-card{display:none!important}
html body .rh-feed .f-mid > :is(.act-card,.rg-homecard,.iv-home,.gx-card,.ad-text-card,.ev-rail,.cm-sugg,.cm-hgaps,.pr-home,.td-strip,.hp-card){display:none!important}
html body .rh-feed .f-mid > .hb-card{order:2}
html body .rh-feed .f-mid > :is(.f-jobs,.f-ppl,.trend,.ad-spot,.ad-card,.v3-explore){order:6}

/* ============================================================================================================
   v3.2: every remaining page.
   - Promos live on the right or at the bottom only: none in left columns, and the stacked "From ReconHire" text ads
     step aside whenever another ad is on the page.
   - Empty states: no grid pattern, no terminal line; an icon, a short title and one sentence.
   - Duplicate labels above page titles are gone (Messages, Events, Learning).
   - Footer: plain column titles, no terminal status line.
   ============================================================================================================ */
html body :is(.f-left,.hx-left,.jh-left,.ng-left,.n-left,.st-side,.ln-left,.mx-left) .ad-card{display:none!important}
html body:has(.ad-spot,.ad-card:not([hidden])) .ad-text-card{display:none}
html body :is(.pb-term,.rh-cursor,.pb-caret,.rh-foot-term){display:none!important}
html body :is(.rh-empty,.pb-empty,.card.empty,.hb-empty,.jh-empty,.f-empty){background-image:none!important}
html body :is(.rh-empty,.pb-empty,.card.empty) h3{font-size:1.02rem;margin:6px 0 2px}
html body :is(.rh-empty,.pb-empty,.card.empty) p{color:var(--muted);margin:0 0 8px}
html body :is(.mx-kick,.pb-kick,.ln-kick,.st-kick,.jh-kick,.ng-kick){display:none}
html body .rh-foot :is(.rh-foot-k,.kick,.kicker){font:700 .74rem/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* tables and lists (admin, billing, trackers): lighter lines, tighter rows */
html body table{border-collapse:collapse}
html body :is(.adm-table,.tbl,.table) :is(th,td){padding:8px 10px;border-color:var(--line)}
html body :is(.adm-table,.tbl,.table) th{font:600 .74rem var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:none}
/* section tabs across the app share the underline style */
html body :is(.pf-tabs .seg,.cr-tabs,.rs-tabs){border-radius:8px}
/* messaging: a flat two-pane panel */
html body .mx-shell,html body .mx-wrap{border-radius:8px;box-shadow:none}
/* learning, practice and range cards: flat, tight corners, no coloured top bars */
html body :is(.ln-card,.pr-cert,.rg-card,.ng-card,.cm-card,.ev-card,.gx-tile){border-radius:8px;box-shadow:none}
html body :is(.ln-card,.pr-cert,.cm-card,.ev-card)::before{display:none}
/* pricing: flat plan cards, one highlighted */
html body :is(.plan,.price-card,.bl-plan){border-radius:10px;box-shadow:none}
/* phones: content first on framed pages */
@media (max-width:900px){
  html body :is(.hx-grid,.jh-grid,.ng-grid) :is(.hx-right,.jh-right,.ng-right) .ad-card{margin-top:8px}
}
/* tight corners everywhere, including panels older skins styled with long selectors */
html body .card,html body :is(.st-group,.rg-card,.sx-card,.mx,.n-list,.ad-spot,.ad-card,.jh-me,.jh-menu,.hx-menu,.ng-man,.preview-banner,.bl-card,.f-me,.jh-note,.jf-hero,.jf-side,.hl-deck,.term){border-radius:8px!important}
html body .mx{box-shadow:none!important;border:1px solid var(--line)}
html body .card{box-shadow:none!important}
html body .st-nav{border-radius:8px!important;box-shadow:none!important;border:1px solid var(--line)}
html body .st-nav::before{display:none!important}
html body .n-markall{background:var(--surface);border:1px solid var(--line2);color:var(--text)}

/* v3.2.1: public achievement wallet (/u/handle). The About card shared a class name with the dark app-launch pop-up and inherited its
   light text on what is now a light card; the page also lost its side margins and the header band floated under a blank strip. */
html body .card.ab-card{color:var(--text)!important;animation:none!important;text-align:left}
html body .card.ab-card .ab-lead{color:var(--text)!important;font-size:1.05rem;line-height:1.55;margin:0 0 14px}
html body .card.ab-card .ab-body p{color:var(--text)!important;font-size:.95rem}
html body .card.ab-card .ab-chip{color:var(--text)!important}
html body .card.ab-card h3{color:var(--muted)!important;font:600 .8rem var(--font)!important;letter-spacing:.06em!important}
html body .wl-public{max-width:1040px!important;margin:0 auto 48px!important;padding:24px 20px 0!important;box-sizing:border-box}
html body .wl-public>.card{margin:0 0 14px!important}
html body .wl-public .wl-hero.ap-head{padding:0 26px 26px!important;overflow:hidden}
html body .wl-public .wl-hero .ap-band{margin:0 -26px!important;height:104px}
html body .wl-public .wl-hero .wl-hero-main{margin-top:-34px;position:relative;z-index:2;align-items:flex-end;gap:18px;flex-wrap:wrap}
html body .wl-public .wl-hero .wl-id{padding-top:44px!important;min-width:0;flex:1 1 260px}
html body .wl-public .wl-hero .wl-id h1{font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.15;overflow-wrap:anywhere}
html body .wl-public .wl-hero .ap-strip{margin:18px -26px -26px!important;padding:14px 26px 16px!important}
html body .wl-public .card.ap-roles{padding:16px 20px!important}
html body .wl-public .card.ab-card{padding:18px 22px!important}
html body .wl-public .wl-made{margin-top:22px!important}
@media (max-width:640px){
  html body .wl-public{padding:14px 12px 0!important}
  html body .wl-public .wl-hero.ap-head{padding:0 16px 16px!important}
  html body .wl-public .wl-hero .ap-band{margin:0 -16px!important;height:84px}
  html body .wl-public .wl-hero .ap-strip{margin:14px -16px -16px!important;padding:12px 16px 14px!important}
  html body .wl-public .wl-hero .wl-id{padding-top:8px!important;flex-basis:100%}
  html body .wl-public .card.ap-roles,html body .wl-public .card.ab-card{padding:14px 16px!important}
}
html body .wl-public .wl-hero .wl-hero-main{margin-top:0;align-items:flex-start}
html body .wl-public .wl-hero .wl-hero-main>.pfp,html body .wl-public .wl-hero .wl-hero-main>.wl-photo{margin-top:-44px;flex:none}
html body .wl-public .wl-hero .wl-id{padding-top:14px!important}
html body .wl-public .wl-sub:empty{display:none}
@media (max-width:640px){html body .wl-public .wl-hero .wl-id{padding-top:8px!important}}
@media (max-width:640px){
  html body .wl-public .wl-hero .wl-hero-main{flex-direction:column!important;align-items:flex-start!important;gap:8px!important;text-align:left!important}
  html body .wl-public .wl-hero .wl-id{width:100%!important;max-width:100%!important;flex:0 0 auto!important;text-align:left!important;margin:0!important}
  html body .wl-public .wl-hero .wl-id h1{font-size:1.5rem!important;white-space:normal!important;justify-content:flex-start!important}
  html body .wl-public .wl-hero .wl-id .kicker,html body .wl-public .wl-hero .wl-headline{text-align:left!important}
}

/* v3.3.0: profile header. Photo overlaps the cover, then the name and details sit underneath it (not beside it),
   with current job and school in a column on the right. Same layout on your own profile and on member profiles. */
html body .mprof .mp-head{display:block!important;padding:0!important}
html body .mprof .mp-head .mp-av{margin:-78px 0 0 24px!important;position:relative;z-index:2;width:max-content}
html body .mprof .mp-head .mp-main{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(200px,280px);gap:4px 32px;padding:12px 24px 0!important;align-items:start}
html body .mprof .mp-head .mp-main>*{grid-column:1;min-width:0;margin-top:0;margin-bottom:0}
html body .mprof .mp-head .mp-main>.pf-orgs.inline{grid-column:2;grid-row:1/span 5;display:grid!important;gap:12px;margin:4px 0 0!important;align-content:start}
html body .mprof .mp-head .mp-main>.chips,html body .mprof .mp-head .mp-main>.mp-links{margin-top:6px}
html body .mprof .mp-head .mp-main h1{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
html body .mprof .mp-head .mp-act{padding:14px 24px 20px!important;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start!important}
html body .pf-page .pf-hero .pf-top{padding:0 24px!important;margin:0!important;display:flex;justify-content:space-between;align-items:flex-start}
html body .pf-page .pf-hero .pf-photo{margin-top:-78px!important;position:relative;z-index:2}
html body .pf-page .pf-hero .pf-top .pf-edit{margin-top:12px}
html body .pf-page .pf-hero .pf-main{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(200px,280px);gap:4px 32px;padding:12px 24px 0!important;align-items:start}
html body .pf-page .pf-hero .pf-main .pf-orgs{padding-top:4px;min-width:0;max-width:none}
html body .pf-page .pf-hero .pf-acts{margin:14px 24px 0!important;padding:0 0 18px!important;gap:8px;flex-wrap:wrap;justify-content:flex-start;border:0!important}
html body .pf-page .pf-hero .pf-acts .btn.sm{border-radius:999px;font-weight:600}
html body .pf-page .pf-hero .pf-acts .pf-otw{background:var(--accent)!important;color:#fff!important;border:0!important;box-shadow:none!important}
html body .pf-pop{position:relative}
html body .pf-pop>.menu,html body .pf-acts .pop>.menu{position:absolute;top:calc(100% + 6px);left:0;right:auto;z-index:40;min-width:290px;max-width:min(340px,86vw);padding:6px;border-radius:10px;background:var(--surface);border:1px solid var(--line);box-shadow:0 14px 34px -14px rgba(15,23,42,.35);display:grid}
html body .pf-menu>button{display:flex;align-items:flex-start;gap:10px;width:100%;padding:9px 10px;border:0;background:none;border-radius:8px;text-align:left;color:var(--text);cursor:pointer;font:inherit}
html body .pf-menu>button:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
html body .pf-menu>button>.ico{width:18px;height:18px;flex:none;margin-top:2px;color:var(--accent)}
html body .pf-menu>button>span{display:grid;gap:1px;min-width:0}
html body .pf-menu>button b{font-size:.92rem;font-weight:600}
html body .pf-menu>button small{font-size:.78rem;color:var(--muted);line-height:1.35;white-space:normal}
html body .pf-page .pf-hero{overflow:visible!important}
html body .pf-page .pf-hero .pf-cover{border-radius:8px 8px 0 0;overflow:hidden}
@media (max-width:760px){
  html body .mprof .mp-head .mp-main,html body .pf-page .pf-hero .pf-main{grid-template-columns:minmax(0,1fr)!important;padding:10px 16px 0!important}
  html body .mprof .mp-head .mp-main>.pf-orgs.inline{grid-column:1;grid-row:auto;margin-top:8px!important}
  html body .mprof .mp-head .mp-av{margin:-56px 0 0 16px!important}
  html body .pf-page .pf-hero .pf-photo{margin-top:-56px!important}
  html body .pf-page .pf-hero .pf-top{padding:0 16px!important}
  html body .mprof .mp-head .mp-act{padding:12px 16px 16px!important}
  html body .pf-page .pf-hero .pf-acts{margin:12px 16px 0!important}
}
html body .pf-page .pf-hero .pf-acts .btn.sm.ghost{background:none!important;color:var(--accent)!important;border:1px solid var(--accent)!important;box-shadow:none!important}
html body .pf-page .pf-hero .pf-acts .btn.sm.ghost:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)!important}
html body .pf-page .pf-hero .pf-acts .pf-pop:last-of-type>.btn.sm.ghost{color:var(--text)!important;border-color:var(--line2)!important}
@media (max-width:760px){html body .pf-page .pf-hero .pf-acts{position:relative}html body .pf-page .pf-hero .pf-acts .pop{position:static}html body .pf-page .pf-hero .pf-acts .pop>.menu{left:0;right:0;max-width:none;min-width:0}}
html body .pf-acts .pop>.menu{max-height:min(72vh,470px)!important;overflow:auto}

/* v3.4.0: Home side columns. Job picks shows two at a time with arrows. */
html body .f-jobs .f-job-list{display:grid;gap:2px;margin-top:6px}
html body .f-jobs .f-job-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
html body .f-jobs .f-job-nav button{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line2);background:var(--surface);color:var(--text);cursor:pointer;padding:0}
html body .f-jobs .f-job-nav button:hover{border-color:var(--accent);color:var(--accent)}
html body .f-jobs .f-job-nav button .ico{width:15px;height:15px}
html body .f-jobs .f-job-dots{font-size:.78rem;color:var(--muted)}
/* v3.4.1: footer columns never push a phone page sideways */
@media (max-width:900px){html body .rh-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}html body .rh-foot-grid>*{min-width:0}html body .rh-foot-col a{width:auto!important;max-width:100%;white-space:normal;overflow-wrap:anywhere}}

/* v3.4.2: weekly viewer numbers live in the profile card under Invitations; the left column has no scrollbar */
html body .f-me-stats a.f-me-wk span{white-space:normal;line-height:1.25}
html body .f-me .f-me-name{display:grid;justify-items:center;gap:6px;padding:0 12px;text-decoration:none}
html body .f-me .f-me-name .nm{display:block;text-align:center;text-wrap:balance;line-height:1.25}
html body .f-me .f-me-name .nm .vbadges{display:inline-flex;vertical-align:middle;margin-left:5px;white-space:nowrap}
html body .f-me .f-me-title{display:block;max-width:100%;min-width:0}
html body .f-me .f-me-title .tbadge{max-width:100%;margin:0;white-space:nowrap}
html body .f-me .f-me-title .tbadge .tb-co{overflow:hidden;text-overflow:ellipsis;min-width:0}
html body .f-me .f-me-title .tbadge.big{display:inline-flex;font-size:.68rem;padding:4px 9px;gap:4px;white-space:nowrap;max-width:100%;box-sizing:border-box}
html body .f-me .f-me-title .tbadge.big .tb-l,html body .f-me .f-me-title .tbadge.big .tb-ck,html body .f-me .f-me-title .tbadge.big .ico{flex:none}
html body .f-me .f-me-title .tbadge.big .tb-co{max-width:none!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:5px}
html body .f-me .f-me-name{padding:0 6px}

/* v3.5.0: profile side column. A finished profile shows one quiet All-star line and the view counts instead of the big progress card; no language switcher here (it lives in Settings and the Me menu). */
html body .pf-power.all-star{background:var(--surface)!important;padding:12px 14px!important}
html body .pf-power .pf-done{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:.92rem}
html body .pf-power .pf-done .ico{width:18px;height:18px;color:#d97706;flex:none}
html body .pf-power .pf-done small{margin-left:auto;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,#f59e0b 16%,transparent);color:#b45309;font-weight:600;font-size:.72rem}
/* v3.5.0: profile links sit under the school in the right column of the header */
html body .pf-links-side{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0!important;padding:0!important;border:0!important}
html body .pf-links-side .wl-links{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
html body .pf-links-side :is(.wl-link,.chip){font-size:.8rem;padding:4px 10px;min-height:0}
html body .mprof .mp-head .mp-main>.mp-links:empty{display:none}

/* v3.5.0: profile side column. No language switcher here (it is in Settings and the Me menu); a small All-star chip in the header replaces the finished progress card */
html body .side-rail .rail-foot .rh-prefs,html body .pf-page ~ * .rh-prefs{display:none!important}
html body .pf-allstar{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 9px;border-radius:999px;font-size:.76rem;font-weight:700;color:#92400e;background:linear-gradient(90deg,#fde68a,#fbbf24);vertical-align:middle}
html body .pf-allstar .ico{width:13px;height:13px}
/* v3.5.0: free resume checker: the "keep this resume and see matching jobs" call to action under the scores */
html body .ck-save{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin:14px 0;padding:16px 18px!important;border-radius:8px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line))!important;background:color-mix(in srgb,var(--accent) 6%,var(--surface))!important}
html body .ck-save[hidden]{display:none}
html body .ck-save-t{flex:1 1 320px;min-width:0}
html body .ck-save-t b{font-size:1.08rem}
html body .ck-save-t p{margin:4px 0 0;color:var(--muted);font-size:.92rem}
html body .ck-save-a{display:grid;gap:6px;justify-items:start}