:root{
  /* ==========================================================================
     RECEDE DESIGN TOKENS
     Methodology: Vignelli Canon (modular grid, fixed category palette, a small
     fixed type system, structural rules) applied to a dark editorial UI.
     Not a copy of any product — the rules are Vignelli's, the values are ours.

     Every value below is either a multiple of the 4px grid unit, a step on the
     type scale, or a colour with exactly one documented job. Nothing here is
     decorative and nothing is arbitrary.
     ========================================================================== */

  /* --- Grid ---------------------------------------------------------------
     4px base. Vignelli's rule is that the grid is non-negotiable: every
     margin, pad and gap in this file is a multiple of it, so vertical rhythm
     holds even where two unrelated components meet. */
  --u:4px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:48px;

  /* --- Ground -------------------------------------------------------------
     The page was #121009 and cards #252016 — a 1.5:1 step, so a card read as
     a slightly different shade of nothing. The ground drops to near-black and
     the two surfaces lift, which is what makes a section look like a section.
     Measured against --bg: surface 1.19:1, surface-2 1.44:1. */
  --bg:#0A0906;
  --surface:#221D14;
  --surface-2:#332C1E;

  /* --- Text tiers ---------------------------------------------------------
     Three tiers, measured on --surface (the harder of the two grounds).
     The old faint tier was 4.96:1 and carried 9–11px labels, which is why the
     grey text looked washed into the background. Every tier moved up:
       --text       16.5:1   (was 14.5)  — near-white, as asked
       --text-dim   11.2:1   (was  7.9)
       --text-faint  6.8:1   (was  5.0)  — the big one
     The gaps between tiers are still wide enough to read as three levels. */
  --text:#FFFDF7;
  --text-dim:#DCD2BE;
  --text-faint:#B3A488;

  /* --- Rules --------------------------------------------------------------
     Two weights, because a Vignelli grid distinguishes the line that divides a
     section from the line that subdivides one.
       --border      3.3:1 — structural: card edges, section rules, table lines.
                             Clears the 3:1 minimum for non-text UI, so it is
                             a line you see rather than one you hunt for.
       --border-soft 2.0:1 — internal subdivision only, inside an already
                             bounded box. Never the only thing marking an edge. */
  --border:#6E6247;
  --border-soft:#4A422F;

  /* --- Category palette ---------------------------------------------------
     Vignelli's discipline: one colour, one meaning, systematically applied,
     never decoration. Six colours, each with exactly one job. If a new element
     needs a colour, it takes the one matching its meaning — or it takes none.

       --accent  ORANGE  your action, and only yours: primary buttons, your
                         match score, the thing to tap next.
       --good    GREEN   the employer behaved well: replied, fast, offer.
       --warn    AMBER   waiting, or proceed with care.
       --risk    CORAL   silence, or a signal worth knowing before you apply.
       --info    BLUE    something the app worked out for you (insights).
       --pro     VIOLET  the paid plan, and nothing else.

     All six measure 5.2:1 or better on --surface. */
  --accent:#E2703A;
  --accent-dim:rgba(226,112,58,0.55);
  --accent-wash:rgba(226,112,58,0.15);
  --good:#9ECE6A;
  --warn:#E5C14C;
  --risk:#E8836B;
  --info:#7AB8E8;
  --info-wash:rgba(122,184,232,0.13);
  --pro:#C79BE8;
  --pro-wash:rgba(199,155,232,0.13);

  /* --- Type ---------------------------------------------------------------
     Three families, fixed roles, no exceptions:
       Newsreader italic — display only (hero, big numbers)
       Inter             — everything the user reads as prose or UI
       IBM Plex Mono     — data, labels, legends: anything diagrammatic
     Scale is a 1.2 modular scale rounded to the half-pixel. */
  --t-micro:9.5px; --t-label:10.5px; --t-xs:11.5px; --t-sm:12.5px;
  --t-base:13.5px; --t-md:15px; --t-lg:18px; --t-xl:22px; --t-display:32px;
  --track-label:0.1em;   /* uppercase mono labels ride wide, map-legend style */

  /* --- Geometry -----------------------------------------------------------
     Vignelli is geometric, not soft: corners are near-sharp and consistent.
     Radius exists to stop a 1px border looking chipped, not to round a card. */
  --r-sm:2px; --r-md:3px; --r-lg:4px; --r-pill:100px;

  /* --- Motion -------------------------------------------------------------
     Functional feedback only. Nothing moves to be charming. */
  --ease:cubic-bezier(.32,.72,0,1);
  --fast:140ms; --normal:220ms;
}

/* ==========================================================================
   STRUCTURE — the parts that make the app read as organised at a glance.
   Added for the sharpening pass: section headers that name and colour-code
   each block, real table rules, and a legend style shared by both.
   ========================================================================== */

/* A section header is the map legend for the block under it: a category dot,
   a mono uppercase name, and a rule that runs to the edge. Because the dot
   takes its colour from the category palette, the eye can sort the screen
   into blocks before reading a single word. */
.sec{ display:flex; align-items:center; gap:var(--s2); margin:var(--s6) 0 var(--s3); }
.sec::after{ content:""; flex:1; height:1px; background:var(--border); }
.sec-mark{ width:7px; height:7px; border-radius:50%; background:var(--text-faint); flex:0 0 auto; }
.sec-name{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:var(--t-label);
           letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-dim);
           white-space:nowrap; }
.sec-count{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:var(--t-micro);
            color:var(--text-faint); flex:0 0 auto; }
.sec-act .sec-mark{ background:var(--accent); }
.sec-good .sec-mark{ background:var(--good); }
.sec-warn .sec-mark{ background:var(--warn); }
.sec-risk .sec-mark{ background:var(--risk); }
.sec-info .sec-mark{ background:var(--info); }
.sec-pro  .sec-mark{ background:var(--pro); }

/* A data table, ruled the way a printed one is: a heavy rule under the head,
   hairlines between rows, numerals in mono and right-aligned so digits line up
   in a column the eye can scan without reading. */
.tbl{ width:100%; border-collapse:collapse; }
.tbl th{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:var(--t-micro);
         letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-faint);
         text-align:left; font-weight:500; padding:0 var(--s2) var(--s2) 0;
         border-bottom:1px solid var(--border); }
.tbl td{ font-size:var(--t-sm); color:var(--text-dim); padding:var(--s3) var(--s2) var(--s3) 0;
         border-bottom:1px solid var(--border-soft); vertical-align:baseline; }
.tbl tr:last-child td{ border-bottom:0; }
.tbl td:first-child{ color:var(--text); font-weight:500; }
.tbl .num, .tbl th.num{ text-align:right; padding-right:0;
                        font-family:'IBM Plex Mono',ui-monospace,monospace; }
.tbl .num{ color:var(--text); }

/* Two fields on one grid row — the name split, and anything else that is one
   idea in two boxes. Collapses on a narrow phone rather than squeezing. */
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
@media (max-width:340px){ .field-row{ grid-template-columns:1fr; gap:0; } }

/* A key/value line, ruled. Used wherever the app states a fact about a job or
   an application — replaces prose runs that were hard to scan. */
.kv{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4);
     padding:var(--s3) 0; border-bottom:1px solid var(--border-soft); }
.kv:last-child{ border-bottom:0; }
.kv-k{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:var(--t-micro);
       letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-faint);
       white-space:nowrap; }
.kv-v{ font-size:var(--t-sm); color:var(--text); text-align:right; font-weight:500; }

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased; min-height:100vh;
  display:flex; justify-content:center;
}
.serif{ font-family:'Newsreader', Georgia, serif; font-style:italic; }
.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }
button, input, select, textarea{ font-family:inherit; }
input, select, textarea{ outline:none; }
input:focus, select:focus, textarea:focus, button:focus-visible{ outline:1.5px solid var(--accent); outline-offset:1px; }

/* The shell is exactly one viewport tall, never taller.
   It used to be min-height:100vh, which let it grow with the content — so
   .screen's own overflow-y never engaged, the whole page scrolled instead, and
   everything anchored to the shell with bottom:0 (sheets, the tab bar, toasts)
   sat at the bottom of that overgrown box rather than at the bottom of the
   screen. On a long page like Settings the sheet opened hundreds of pixels
   below the fold, which is what made the dossier look like it never opened.
   dvh first so mobile browser chrome doesn't crop it; vh as the fallback. */
.app{ width:100%; max-width:440px; height:100vh; height:100dvh; display:flex; flex-direction:column; position:relative; background:var(--bg); overflow:hidden; }

.brand{ display:flex; align-items:center; justify-content:space-between; padding:22px 22px 13px 22px; border-bottom:1px solid var(--border); flex-shrink:0; }
.brand .word{ font-size:13px; letter-spacing:0.16em; text-transform:uppercase; font-weight:600; }
.brand-right{ display:flex; align-items:center; gap:10px; }

/* sync indicator */
.sync{ display:flex; align-items:center; gap:6px; font-size:9.5px; font-family:'IBM Plex Mono', monospace; color:var(--text-faint); letter-spacing:0.04em; text-transform:uppercase;
       /* also the manual-refresh control: strip button chrome, keep the hit area */
       appearance:none; -webkit-appearance:none; background:none; border:0;
       padding:6px 4px; margin:-6px -4px; cursor:pointer; transition:color .15s ease; }
.sync:hover:not(:disabled){ color:var(--text-dim); }
.sync:disabled{ cursor:default; }
.sync:focus-visible{ outline:1px solid var(--accent); outline-offset:2px; border-radius:2px; }
.sync .dot{ width:6px; height:6px; border-radius:50%; background:var(--text-faint); flex-shrink:0; }
.sync.synced .dot{ background:var(--good); }
.sync.syncing .dot{ background:var(--warn); animation:pulse 1.1s ease-in-out infinite; }
.sync.offline .dot{ background:var(--risk); }
.sync.local .dot{ background:var(--text-faint); }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.35;} }

.screen{ display:none; flex-direction:column; flex:1; padding:20px 22px 104px 22px; position:relative; z-index:1; overflow-y:auto; }
/* The floating action button occupies from 98px to 150px above the bottom, but
   the padding above only cleared the tab bar at 104px — leaving a band of real
   content that could never be scrolled out from under it. On the applications
   screen that band landed on the company filter, so the FAB sat on top of an
   input. Screens that actually show the button get enough room to scroll past
   it; the rest keep the smaller padding rather than carrying dead space. */
.app:has(.fab.visible) .screen{ padding-bottom:168px; }
.screen.active{ display:flex; }

.btn{
  background:transparent; color:var(--text); border:1.5px solid var(--text);
  border-radius:2px; padding:15px; font-size:13px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.1em; text-align:center; width:100%; cursor:pointer;
  position:relative; transition:background .16s ease, color .16s ease, box-shadow .16s ease, transform .12s ease;
}
.btn::before, .btn::after{ content:""; position:absolute; top:-1.5px; bottom:-1.5px; width:6px; border:1.5px solid var(--accent); transition:border-color .16s ease; }
.btn::before{ left:-1.5px; border-right:none; }
.btn::after{ right:-1.5px; border-left:none; }
.btn:active{ transform:scale(0.98); }
.btn:disabled{ opacity:0.5; cursor:default; }
.btn.secondary{ border-color:var(--border); color:var(--text-dim); }
.btn.secondary::before,.btn.secondary::after{ border-color:var(--border); }
.btn.danger{ border-color:var(--border); color:var(--risk); }
.btn.danger::before,.btn.danger::after{ display:none; }
.link-btn{ background:none; border:none; color:var(--accent); font-size:12.5px; cursor:pointer; text-align:left;
  /* Padding plus an equal negative margin: the tap target grows to a thumb-sized
     area without moving anything on screen. */
  padding:11px 0; margin:-11px 0; }

.row{ display:flex; align-items:center; justify-content:space-between; }
.stack{ display:flex; flex-direction:column; }

.statement{ border:1px solid var(--border); border-radius:2px; background:var(--surface); padding:20px 18px; position:relative; box-shadow:inset 0 1px 0 rgba(255,255,255,0.03), 0 8px 20px -14px rgba(0,0,0,0.7); }

.stamp{ display:inline-flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono', monospace; font-size:9.5px; font-weight:500; text-transform:uppercase; letter-spacing:0.05em; border:1.3px solid var(--accent); color:var(--accent); padding:3px 7px; border-radius:1px; white-space:nowrap; background:var(--accent-wash); }

/* One stamp per outcome. Green covers both interview and offer, because the
   palette says green means "the employer behaved well" and both are that; the
   two are separated by weight and mark, not by a seventh colour. */
.stamp-mark{ margin-right:5px; font-size:11px; line-height:1; }
.stamp-no-reply{ border-style:dashed; border-color:var(--text-faint);
                 color:var(--text-faint); background:none; }
.stamp-rejected{ border-color:var(--risk); color:var(--risk);
                 background:color-mix(in srgb, var(--risk) 14%, transparent); }
.stamp-interview{ border-color:var(--good); color:var(--good);
                  background:color-mix(in srgb, var(--good) 14%, transparent); }
.stamp-offer{ border-color:var(--good); background:var(--good); color:var(--bg); font-weight:600; }

/* jobs */
.searchbar{ display:flex; gap:8px; margin:14px 0 12px 0; }
.searchbar input, .searchbar select{ background:var(--surface); border:1px solid var(--border); color:var(--text); font-size:12.5px; padding:10px 11px; border-radius:2px; transition:border-color .14s ease; }
.searchbar input{ flex:1; min-width:0; }
.searchbar select{ flex-shrink:0; max-width:120px; }

.seg-ctl{ display:flex; border:1px solid var(--border); border-radius:3px; overflow:hidden; margin-bottom:16px; }
.seg-ctl button{ flex:1; background:transparent; border:none; border-right:1px solid var(--border); color:var(--text-dim); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; padding:10px 4px; cursor:pointer; transition:background .14s ease, color .14s ease; }
.seg-ctl button:last-child{ border-right:none; }
.seg-ctl button.active{ background:var(--accent-wash); color:var(--accent); }

.job-card{ border:1px solid var(--border); background:var(--surface); border-radius:3px; padding:15px 15px 13px 15px; margin-bottom:11px; cursor:pointer; transition:background .14s ease, border-color .14s ease, transform .12s ease; box-shadow:inset 0 1px 0 rgba(255,255,255,0.03); }
.job-card:active{ transform:scale(0.995); }
.job-card .jc-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.job-card .jc-role{ font-size:14.5px; font-weight:600; line-height:1.25; }
.job-card .jc-co{ font-size:12px; color:var(--text-dim); margin-top:3px; }
.job-card .jc-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.job-card.applied{ opacity:0.55; }
.pill{ font-size:10px; padding:3px 8px; border-radius:100px; border:1px solid var(--border); color:var(--text-dim); white-space:nowrap; background:var(--bg); }
.pill.salary{ color:var(--good); border-color:color-mix(in srgb, var(--good) 45%, transparent); }
.pill.risk{ color:var(--risk); border-color:color-mix(in srgb, var(--risk) 45%, transparent); }
.pill.remote{ color:var(--text); }
.match{ font-family:'IBM Plex Mono', monospace; font-size:15px; font-weight:500; color:var(--accent); line-height:1; text-align:right; flex-shrink:0; }
.match .m-lab{ display:block; font-family:'Inter'; font-size:8.5px; color:var(--text-faint); letter-spacing:0.08em; text-transform:uppercase; margin-top:3px; font-weight:600; }
.jc-actions{ display:flex; gap:8px; margin-top:12px; }
.mini-btn{ flex:1; background:transparent; border:1px solid var(--border); color:var(--text-dim); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; padding:9px; border-radius:2px; cursor:pointer; transition:all .14s ease; }
.mini-btn.primary{ border-color:var(--accent); color:var(--accent); background:var(--accent-wash); }
.mini-btn.done{ border-style:dashed; color:var(--text-faint); }
.mini-btn.saved{ color:var(--accent); border-color:var(--accent-dim); }

.section-label{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:var(--t-label);
                color:var(--text-dim); text-transform:uppercase; letter-spacing:var(--track-label);
                margin:var(--s6) 0 var(--s3) 0; }
.case-id{ font-size:10px; color:var(--text-faint); font-family:'IBM Plex Mono', monospace; }
.screen-title{ font-size:15px; font-weight:600; }

.activity-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 12px; margin:0 -12px; border-top:1px solid var(--border-soft); cursor:pointer; border-radius:3px; transition:background .14s ease; }
.activity-row:first-child{ border-top:none; }
.activity-row .co{ font-size:13.5px; font-weight:500; }

.app-row{ padding:15px 12px; margin:0 -12px; border-top:1px solid var(--border-soft); cursor:pointer; border-radius:3px; transition:background .14s ease; }
.app-row:first-child{ border-top:none; }
.app-row .co{ font-size:14px; font-weight:500; }
.app-row .role{ font-size:11.5px; color:var(--text-dim); margin-top:2px; }
.app-row .date{ font-size:10px; color:var(--text-faint); margin-top:7px; text-align:right; }

.company-row{ padding:16px 12px; margin:0 -12px; border-top:1px solid var(--border-soft); cursor:pointer; border-radius:3px; transition:background .14s ease; }
.company-row:first-child{ border-top:none; }
.company-row .name{ font-size:14px; font-weight:500; }
.company-row .count{ font-size:11px; color:var(--text-dim); margin-top:2px; }
/* No colour here: the state classes below own it. Setting it on this rule
   made it specificity (0,2,0) and beat every .score-* class (0,1,0), so
   the markup carried the right class and rendered the wrong colour. */
.company-row .score{ font-family:'IBM Plex Mono', monospace; font-size:16px; font-weight:500; }

.letterhead{ text-align:center; width:100%; margin-bottom:8px; }
.letterhead .co-name{ font-family:'Newsreader', Georgia, serif; font-weight:600; font-size:19px; }
.letterhead .meta{ font-size:11px; color:var(--text-faint); font-family:'IBM Plex Mono', monospace; margin-top:4px; }
.seal-wrap{ display:flex; justify-content:center; margin:24px 0 20px 0; }
.seal{ width:150px; height:150px; border-radius:50%; border:1.5px dashed var(--accent); display:flex; align-items:center; justify-content:center; transform:rotate(-4deg); position:relative; flex-shrink:0; }
.seal::before{ content:""; position:absolute; inset:10px; border-radius:50%; border:1px solid var(--accent-dim); }
.seal .inner{ display:flex; flex-direction:column; align-items:center; transform:rotate(4deg); }
.seal .score{ font-family:'IBM Plex Mono', monospace; font-size:34px; font-weight:500; }
.seal .score-label{ font-size:9px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.12em; margin-top:2px; }
.honesty{ font-size:12px; color:var(--text-dim); line-height:1.55; text-align:center; max-width:260px; margin:0 auto 24px auto; }

.settings-card{ border:1px solid var(--border); border-radius:2px; background:var(--surface); padding:20px 18px; margin-bottom:16px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.03), 0 8px 20px -14px rgba(0,0,0,0.7); }
.toggle{ width:40px; height:22px; border:1.5px solid var(--border); position:relative; cursor:pointer; background:transparent; flex-shrink:0; border-radius:2px; padding:0; transition:background .16s ease, border-color .16s ease; }
/* The switch stays 40x22 visually, but its touchable area reaches full height. */
.toggle::after{ content:""; position:absolute; inset:-11px -6px; }
.toggle.on{ background:var(--accent); border-color:var(--accent); }
.toggle .knob{ position:absolute; top:1.5px; left:1.5px; width:15px; height:15px; background:var(--text-dim); transition:left .15s; }
.toggle.on .knob{ left:20.5px; background:var(--bg); }
.settings-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.plan-badge{ font-family:'IBM Plex Mono', monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent); border:1px solid var(--accent); padding:3px 8px; display:inline-block; }
.source-row{ display:flex; align-items:center; justify-content:space-between; padding:13px 0; border-top:1px solid var(--border-soft); }
.source-row:first-child{ border-top:none; }
.source-row .s-name{ font-size:13.5px; font-weight:500; }
.source-row .s-count{ font-size:11px; color:var(--text-faint); margin-top:2px; }

.summary-box{ border-left:2px solid var(--accent); background:var(--surface-2); padding:14px; font-size:12.5px; line-height:1.65; border-radius:0 3px 3px 0; }
.chips{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{ font-size:11.5px; padding:7px 12px; border-radius:100px; border:1px solid var(--border); background:transparent; color:var(--text-dim); cursor:pointer; transition:all .14s ease; }
.chip.selected{ border-color:var(--accent); color:var(--accent); background:var(--accent-wash); }
.steps-dots{ display:flex; gap:6px; margin-bottom:22px; }
.steps-dots .d{ height:3px; flex:1; background:var(--border); border-radius:2px; transition:background .2s ease; }
.steps-dots .d.on{ background:var(--accent); }

/* auth */
.auth-wrap{ display:flex; flex-direction:column; justify-content:center; flex:1; padding:24px 22px 40px 22px; }
.auth-hero{ margin-bottom:30px; }
.auth-hero .serif{ font-size:32px; line-height:1.14; display:block; margin-bottom:10px; }
.auth-hero .sub{ font-size:13.5px; color:var(--text-dim); line-height:1.5; }
.auth-tabs{ display:flex; border:1px solid var(--border); border-radius:3px; overflow:hidden; margin-bottom:20px; }
.auth-tabs button{ flex:1; background:transparent; border:none; border-right:1px solid var(--border); color:var(--text-dim); font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; padding:11px 4px; cursor:pointer; transition:all .14s ease; }
.auth-tabs button:last-child{ border-right:none; }
.auth-tabs button.active{ background:var(--accent-wash); color:var(--accent); }
.oauth-stack{ display:flex; flex-direction:column; gap:9px; margin-bottom:20px; }
.oauth-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:13px; border:1px solid var(--border); background:var(--surface);
  color:var(--text); font-size:13.5px; font-weight:500; border-radius:3px; cursor:pointer;
  transition:background .14s ease, border-color .14s ease, transform .1s ease;
}
.oauth-btn:active{ transform:scale(0.99); }
.oauth-btn svg{ flex-shrink:0; }
.oauth-btn:disabled{ opacity:.55; cursor:default; }
/* A provider that isn't switched on yet. Left visible so the option reads as
   coming, rather than looking like a button that failed. */
.oauth-btn.unavailable{ opacity:.42; }
.oauth-btn.unavailable::after{
  content:"soon"; font-family:'IBM Plex Mono', monospace; font-size:9px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint);
  border:1px solid var(--border); border-radius:2px; padding:1px 4px; margin-left:2px;
}
.auth-divider{ display:flex; align-items:center; gap:12px; margin-bottom:18px; color:var(--text-faint); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background:var(--border); }

/* profile dossier */
.dossier-section{ margin-bottom:22px; }
.dossier-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.dossier-head .t{ font-size:12.5px; font-weight:600; }
.dossier-item{ border:1px solid var(--border); background:var(--surface); border-radius:3px; padding:13px 14px; margin-bottom:8px; }
.dossier-item .di-top{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.dossier-item .di-title{ font-size:13.5px; font-weight:500; }
.dossier-item .di-sub{ font-size:11.5px; color:var(--text-dim); margin-top:3px; }
.dossier-item .di-body{ font-size:12px; color:var(--text-dim); line-height:1.6; margin-top:8px; }
.icon-btn{ background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  /* Was 2px/4px — a ~16px target. Grown to ~42px the same way. */
  padding:14px 10px; margin:-14px -10px; }
.icon-btn:hover{ color:var(--risk); }

.completeness{ display:flex; align-items:center; gap:11px; margin-bottom:6px; }
.completeness .bar{ flex:1; height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.completeness .bar span{ display:block; height:100%; background:var(--accent); transition:width .3s ease; }
.completeness .pct{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--accent); }

.cv-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px dashed var(--border); border-radius:3px; padding:14px; }
.cv-row.has-file{ border-style:solid; background:var(--surface); }

/* draft preview */
.draft-box{ border:1px solid var(--border); background:var(--surface); border-radius:3px; padding:14px; font-size:12.5px; line-height:1.7; white-space:pre-wrap; max-height:280px; overflow-y:auto; }
.draft-basis{ display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
.draft-warn{ border-left:2px solid var(--warn); background:var(--surface-2); padding:10px 12px; font-size:11.5px; line-height:1.6; color:var(--text-dim); border-radius:0 2px 2px 0; margin-bottom:10px; }

.auth-msg{ font-size:12px; line-height:1.55; padding:11px 13px; border-radius:2px; margin-bottom:16px; border-left:2px solid var(--risk); background:var(--surface-2); color:var(--text-dim); }
.auth-msg.ok{ border-left-color:var(--good); }
.auth-note{ font-size:11px; color:var(--text-faint); line-height:1.6; margin-top:16px; text-align:center; }

.field{ margin-bottom:17px; }
.field label{ display:block; font-family:'IBM Plex Mono',ui-monospace,monospace;
              font-size:var(--t-label); text-transform:uppercase; letter-spacing:var(--track-label);
              color:var(--text-dim); margin-bottom:var(--s2); }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=date], .field input[type=number], .field select, .field textarea{
  width:100%; background:var(--surface); border:1px solid var(--border); color:var(--text);
  font-size:14px; padding:12px; border-radius:2px; transition:border-color .14s ease;
}
.field textarea{ resize:vertical; min-height:76px; line-height:1.55; font-size:13px; }
/* Standalone as well as inside a .field: a hint that explains a pair of
   fields sits outside both of them, and as a descendant-only rule it
   rendered there at full body size in white — louder than the labels it
   was explaining. */
.hint, .field .hint{ font-size:var(--t-xs); color:var(--text-faint);
                     margin-top:var(--s2); line-height:1.5; }
.field-row + .hint{ margin-top:0; margin-bottom:var(--s4); }

.toggle-pair{ display:flex; gap:8px; }
.toggle-pair button{ flex:1; padding:11px; border:1px solid var(--border); background:transparent; color:var(--text-dim); font-size:13px; cursor:pointer; border-radius:2px; transition:all .14s ease; }
.toggle-pair button.active{ border-color:var(--text); background:var(--text); color:var(--bg); }
.status-picker{ display:flex; gap:8px; flex-wrap:wrap; }
.status-btn{ flex:1; min-width:76px; padding:11px 6px; border:1px solid var(--border); background:transparent; color:var(--text-dim); font-family:'IBM Plex Mono', monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.04em; cursor:pointer; text-align:center; border-radius:2px; transition:all .14s ease; }
.status-btn.active{ border-color:var(--accent); color:var(--accent); background:var(--accent-wash); }

.detail-meta{ font-size:12.5px; color:var(--text-dim); line-height:1.8; margin-bottom:20px; }
.detail-meta b{ color:var(--text); font-weight:500; }
.jd-desc{ font-size:13px; line-height:1.7; color:var(--text-dim); }
.jd-desc ul{ padding-left:18px; margin:8px 0; }
.jd-desc li{ margin-bottom:6px; }
.empty{ padding:44px 6px; text-align:center; color:var(--text-dim); font-size:13px; line-height:1.6; }
.empty button{ margin-top:16px; }

.fab{ display:none; position:absolute; right:20px; bottom:98px; z-index:15; width:52px; height:52px; align-items:center; justify-content:center; background:var(--surface-2); border:1.5px solid var(--accent); cursor:pointer; border-radius:16px; box-shadow:0 10px 24px -8px rgba(0,0,0,0.65); transition:background .16s ease, transform .16s ease, box-shadow .16s ease; }
.fab.visible{ display:flex; }
.fab:active{ transform:scale(0.94); }

.backdrop{ position:absolute; inset:0; background:rgba(8,7,4,0.66); opacity:0; pointer-events:none; transition:opacity .22s; z-index:24; }
.backdrop.open{ opacity:1; pointer-events:auto; }
/* A closed sheet is hidden by visibility, not by its transform alone.
   translateY(105%) is 105% of the sheet's OWN height, so a short sheet (an
   empty one is only a header tall) does not travel far enough to clear the
   screen — every closed sheet was peeking about 47px above the bottom edge.
   Visibility flips instantly and only after the slide-out finishes, so the
   animation is unchanged and the result no longer depends on the sheet's height. */
.sheet{ position:absolute; left:0; right:0; bottom:0; max-height:88%; background:var(--bg); border-top:1px solid var(--border); border-radius:14px 14px 0 0; transform:translateY(105%); visibility:hidden; transition:transform .28s cubic-bezier(.32,.72,0,1), visibility 0s linear .28s; z-index:25; display:flex; flex-direction:column; overflow:hidden; }
.sheet.open{ transform:translateY(0); visibility:visible; transition:transform .28s cubic-bezier(.32,.72,0,1), visibility 0s; }
.sheet-header{ display:flex; align-items:center; justify-content:space-between; padding:15px 20px; border-bottom:1px solid var(--border); flex-shrink:0; }
.sheet-header .title{ font-size:14px; font-weight:600; }
.sheet-close{ background:none; border:none; color:var(--text-dim); font-size:12px; cursor:pointer; text-transform:uppercase; letter-spacing:0.06em; transition:color .14s ease;
  padding:13px 8px; margin:-13px -8px; }
.sheet-body{ padding:20px 20px 30px 20px; overflow-y:auto; }

#toast{ position:absolute; left:50%; bottom:98px; transform:translate(-50%,10px); background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding:11px 18px; font-size:12.5px; border-radius:3px; opacity:0; pointer-events:none; transition:all .22s; z-index:40; white-space:nowrap; box-shadow:0 10px 24px -10px rgba(0,0,0,0.7); }
#toast.show{ opacity:1; transform:translate(-50%,0); }

nav.tabbar{ display:none; position:absolute; left:14px; right:14px; bottom:calc(14px + env(safe-area-inset-bottom, 0px)); background:var(--surface-2); border:1px solid var(--border); border-radius:18px; padding:7px; justify-content:space-between; align-items:stretch; box-shadow:0 16px 34px -12px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.04); z-index:14; gap:4px; }
nav.tabbar.visible{ display:flex; }
.tab{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:none; border:none; cursor:pointer; color:var(--text-faint); padding:9px 4px; border-radius:12px; transition:background .16s ease, color .16s ease; }
.tab.active{ color:var(--text); background:var(--accent-wash); }
.tab.active svg *{ stroke:var(--accent); }
.tab .tab-label{ font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; }
.tab svg{ display:block; transition:stroke .16s ease; }

@media (hover:hover) and (pointer:fine){
  .btn:hover:not(:disabled){ background:var(--text); color:var(--bg); box-shadow:0 0 0 3px var(--accent-wash); }
  .btn.secondary:hover{ background:var(--surface-2); color:var(--text); border-color:var(--text-dim); }
  .btn.danger:hover{ background:rgba(201,108,86,0.14); color:#E08267; border-color:var(--risk); }
  .fab:hover{ background:var(--accent-wash); transform:translateY(-2px); box-shadow:0 14px 26px -8px rgba(0,0,0,0.65); }
  .tab:hover{ color:var(--text); background:var(--surface); }
  .tab.active:hover{ background:var(--accent-wash); }
  .activity-row:hover, .app-row:hover, .company-row:hover{ background:var(--surface); }
  .job-card:hover{ background:var(--surface-2); border-color:var(--text-faint); }
  .mini-btn:hover{ border-color:var(--text-dim); color:var(--text); }
  .mini-btn.primary:hover{ background:rgba(218,102,47,0.22); color:var(--accent); border-color:var(--accent); }
  .status-btn:hover{ border-color:var(--text-dim); color:var(--text); }
  .status-btn.active:hover{ border-color:var(--accent); color:var(--accent); }
  .toggle-pair button:hover{ border-color:var(--text-dim); color:var(--text); }
  .toggle-pair button.active:hover{ background:var(--text); }
  .toggle:hover{ border-color:var(--text-dim); }
  .toggle.on:hover{ border-color:var(--accent); }
  .chip:hover{ border-color:var(--text-dim); color:var(--text); }
  .chip.selected:hover{ border-color:var(--accent); color:var(--accent); }
  .seg-ctl button:hover, .auth-tabs button:hover{ background:var(--surface); color:var(--text); }
  .seg-ctl button.active:hover, .auth-tabs button.active:hover{ background:var(--accent-wash); color:var(--accent); }
  .link-btn:hover{ text-decoration:underline; }
  .sheet-close:hover{ color:var(--text); }
  .searchbar input:hover, .searchbar select:hover, .field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--text-dim); }
  .oauth-btn:hover:not(:disabled){ background:var(--surface-2); border-color:var(--text-dim); }
  .capture-btn:hover{ background:var(--surface-2); border-color:var(--text-faint); }
  .account-row:hover{ background:var(--surface-2); }
  .insight-teaser:hover{ background:color-mix(in srgb, var(--accent) 20%, transparent); }
  .avatar-btn:hover{ transform:scale(1.04); }
  .dossier-item:hover{ border-color:var(--text-faint); }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }


/* ---------------------------------------------------------------------------
   follow-up queue
   The one thing on the Applications screen that asks for an action, so it gets
   the accent edge — everything else there is a record of what already happened.
   --------------------------------------------------------------------------- */
.followup-card{ border:1px solid var(--border); border-left:2px solid var(--accent);
  background:var(--surface); border-radius:0 3px 3px 0; padding:14px 15px; margin-top:16px; }
.followup-head{ display:flex; align-items:baseline; justify-content:space-between; }
.followup-title{ font-size:13px; font-weight:600; letter-spacing:.01em; }
.followup-count{ font-size:11px; color:var(--accent); font-family:'IBM Plex Mono',monospace; }
.followup-sub{ font-size:11.5px; color:var(--text-faint); margin-top:3px; margin-bottom:10px; }
.followup-row{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 0; border-top:1px solid var(--border); }
.followup-row .co{ font-size:13px; font-weight:500; }
.followup-row .role{ font-size:11px; color:var(--text-faint); font-family:'IBM Plex Mono',monospace; }
.followup-row .mini-btn{ flex:0 0 auto; padding:7px 12px; }
.followup-more{ font-size:11px; color:var(--text-faint); padding-top:9px;
  border-top:1px solid var(--border); text-align:center; }


/* ---------------------------------------------------------------------------
   response scale
   Red through amber to green, by how likely an employer is to reply at all.
   Used sparingly and always next to its own label — the colour is a second
   channel for a judgement the words already make, never the only one.
   --------------------------------------------------------------------------- */
.scale{ margin:14px 0 4px; }
.scale-track{ position:relative; height:6px; border-radius:3px; overflow:visible;
  /* The full range sits underneath at low opacity, so a short green fill still
     reads as "far along a scale" rather than as a small bar. */
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--risk) 22%, transparent),
    color-mix(in srgb, var(--warn) 22%, transparent),
    color-mix(in srgb, var(--good) 22%, transparent)); }
.scale-fill{ position:absolute; inset:0 auto 0 0; border-radius:3px; transition:width .35s ease; }
.scale-low { background:linear-gradient(90deg, var(--risk), var(--risk)); }
.scale-mid { background:linear-gradient(90deg, var(--risk), var(--warn)); }
.scale-good{ background:linear-gradient(90deg, var(--risk), var(--warn) 55%, var(--good)); }
.scale-high{ background:linear-gradient(90deg, var(--risk), var(--warn) 45%, var(--good)); }
.scale-marker{ position:absolute; top:-3px; width:2px; height:12px; border-radius:1px;
  background:var(--text); transform:translateX(-1px); box-shadow:0 0 0 2px var(--bg); }
.scale-legend{ display:flex; align-items:baseline; justify-content:space-between; margin-top:7px; }
.scale-label{ font-size:11.5px; font-weight:600; letter-spacing:.01em; }
.scale-rate{ font-size:11px; color:var(--text-dim); font-family:'IBM Plex Mono',monospace; }
.scale-text-low { color:var(--risk); }
.scale-text-mid { color:var(--warn); }
.scale-text-good{ color:var(--good); }
.scale-text-high{ color:var(--good); }
/* Too small a sample to judge: drop the colour entirely rather than imply a
   verdict the data cannot support. */
.scale.thin .scale-fill{ background:var(--text-faint); }
.scale.thin .scale-label{ color:var(--text-faint); font-weight:500; }

.scale-dot{ display:inline-block; width:7px; height:7px; border-radius:50%;
  margin-right:8px; vertical-align:middle; flex:0 0 auto; }
.scale-dot.scale-low { background:var(--risk); }
.scale-dot.scale-mid { background:var(--warn); }
.scale-dot.scale-good{ background:var(--good); }
.scale-dot.scale-high{ background:var(--good); box-shadow:0 0 0 2px color-mix(in srgb, var(--good) 30%, transparent); }
.scale-dot.scale-unknown{ background:transparent; border:1px solid var(--border); }


/* ---------------------------------------------------------------------------
   daily nudge
   One quiet line at the top of the feed. It states where the person stands and
   gets out of the way — no confetti, no broken-streak drama. Job hunting is
   demoralising enough without an app performing at you.
   --------------------------------------------------------------------------- */
.nudge{ display:flex; align-items:flex-start; gap:11px; margin:14px 0 4px;
  padding:12px 14px; border:1px solid var(--border); border-left:2px solid var(--accent);
  background:var(--surface); border-radius:0 3px 3px 0; }
.nudge-mark{ width:7px; height:7px; border-radius:50%; background:var(--accent);
  margin-top:5px; flex:0 0 auto; }
.nudge-title{ font-size:13px; font-weight:600; }
.nudge-body{ font-size:11.5px; color:var(--text-dim); line-height:1.5; }
/* Already applied today: acknowledge it, then recede. */
.nudge-done{ border-left-color:var(--good); }
.nudge-done .nudge-mark{ background:var(--good); }

/* ---------------------------------------------------------------------------
   document capture
   --------------------------------------------------------------------------- */
.capture-row{ display:flex; gap:8px; margin-top:9px; }
.capture-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 10px; font-size:12px; font-weight:500; color:var(--text);
  background:var(--surface); border:1px solid var(--border); border-radius:3px;
  cursor:pointer; transition:background .14s ease, border-color .14s ease; }
.capture-btn svg{ color:var(--accent); flex:0 0 auto; }
.capture-btn:active{ transform:scale(0.99); }


/* ---------------------------------------------------------------------------
   plans and allowance
   Priced like a tool someone chooses, not a paywall they hit. The free column
   is shown in full rather than as a list of things withheld.
   --------------------------------------------------------------------------- */
.pricing-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.pricing-title{ font-size:13.5px; font-weight:600; }
.plan-badge{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-dim); border:1px solid var(--border);
  border-radius:2px; padding:3px 7px; }
.plan-badge.pro{ color:var(--pro); border-color:color-mix(in srgb, var(--pro) 55%, transparent); background:var(--pro-wash); }

.allowance{ margin:14px 0 18px; }
.allowance-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:7px; }
.allowance-label{ font-size:11.5px; color:var(--text-dim); }
.allowance-count{ font-size:11px; color:var(--text); font-family:'IBM Plex Mono',monospace; }
.allowance-track{ height:5px; border-radius:3px; background:var(--surface-2); overflow:hidden; }
.allowance-fill{ height:100%; border-radius:3px; background:var(--accent); transition:width .35s ease; }
.allowance-note{ font-size:11px; color:var(--text-faint); margin-top:7px; }

.plan-grid{ display:flex; flex-direction:column; gap:11px; }
.plan{ border:1px solid var(--border); border-radius:4px; background:var(--surface); padding:15px 16px; }
.plan.accent{ border-color:color-mix(in srgb, var(--pro) 55%, transparent); }
.plan.current{ box-shadow:inset 0 0 0 1px var(--accent-dim); }
.plan-name{ font-size:12.5px; font-weight:600; letter-spacing:.02em; }
.plan-price{ font-family:'Newsreader',Georgia,serif; font-size:27px; font-weight:600; margin:5px 0 2px; }
.plan-price span{ font-family:'Inter',system-ui,sans-serif; font-size:12px; font-weight:400; color:var(--text-faint); }
.plan-line{ font-size:11.5px; color:var(--pro); font-family:'IBM Plex Mono',monospace; margin-bottom:11px; }
.plan-features{ list-style:none; margin:0 0 14px; padding:0; }
.plan-features li{ position:relative; padding-left:19px; font-size:12px; color:var(--text-dim);
  line-height:1.5; margin-bottom:6px; }
.plan-features li::before{ content:""; position:absolute; left:2px; top:6px; width:5px; height:8px;
  border-right:1.6px solid var(--good); border-bottom:1.6px solid var(--good);
  transform:rotate(45deg); }
.plan-current-tag{ font-size:11px; color:var(--text-faint); font-family:'IBM Plex Mono',monospace;
  text-transform:uppercase; letter-spacing:.08em; }
.pricing-foot{ font-size:11px; color:var(--text-faint); line-height:1.55; margin-top:13px; text-align:center; }

/* The day's-allowance sheet — a finish line, not a wall. */
.allowance-hero{ text-align:center; padding:6px 0 2px; }
.allowance-hero-count{ font-family:'Newsreader',Georgia,serif; font-size:52px; font-weight:600;
  color:var(--accent); line-height:1; }
.allowance-hero-label{ font-size:11px; color:var(--text-faint); font-family:'IBM Plex Mono',monospace;
  text-transform:uppercase; letter-spacing:.1em; margin-top:6px; }
.allowance-hero-copy{ font-size:13px; color:var(--text-dim); line-height:1.6; text-align:center;
  margin:16px 0 18px; }
.allowance-upsell{ border:1px solid color-mix(in srgb, var(--pro) 55%, transparent); background:var(--pro-wash);
  border-radius:4px; padding:15px 16px; }
.allowance-upsell-title{ font-size:13px; font-weight:600; margin-bottom:5px; }
.allowance-upsell-body{ font-size:12px; color:var(--text-dim); line-height:1.55; }

.pricing-note{ font-size:11px; color:var(--text-faint); line-height:1.5; margin-top:9px;
  text-align:center; padding-top:9px; border-top:1px solid var(--border); }


/* ---------------------------------------------------------------------------
   account: the avatar and its menu
   The person's own face is the way into everything about them. It replaced a
   fourth tab-bar item, so the bar carries only the app's actual work — roles,
   applications, companies — and anything personal lives behind their photo.
   --------------------------------------------------------------------------- */
.avatar-btn{ position:relative; width:32px; height:32px; flex:0 0 auto; padding:0;
  border-radius:50%; border:0; background:none; cursor:pointer; overflow:visible;
  transition:transform .12s ease; }
.avatar-btn:active{ transform:scale(0.94); }
.avatar-btn img, .avatar-initials{ display:block; width:100%; height:100%; border-radius:50%;
  object-fit:cover; }
.avatar-initials{ display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:600; letter-spacing:.02em; color:#F7F2E7; }
/* The ring is the sync light. It means the corner reports state without a
   second widget sitting next to it. */
.avatar-btn::after{ content:""; position:absolute; inset:-3px; border-radius:50%;
  border:1.5px solid transparent; transition:border-color .2s ease; }
.avatar-btn.sync-synced::after { border-color:var(--good); }
.avatar-btn.sync-syncing::after{ border-color:var(--warn); animation:pulse 1.1s ease-in-out infinite; }
.avatar-btn.sync-offline::after{ border-color:var(--risk); }
.avatar-btn:focus-visible{ outline:none; }
.avatar-btn:focus-visible::after{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-wash); }

.account-head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.account-face-btn{ position:relative; width:62px; height:62px; flex:0 0 auto; padding:0;
  border:0; background:none; cursor:pointer; border-radius:50%; }
.account-face{ display:block; width:62px; height:62px; border-radius:50%; object-fit:cover; }
.account-initials{ display:flex; align-items:center; justify-content:center;
  font-size:21px; font-weight:600; color:#F7F2E7; }
.account-face-edit{ position:absolute; left:50%; bottom:-3px; transform:translateX(-50%);
  font-size:8.5px; letter-spacing:.09em; text-transform:uppercase;
  font-family:'IBM Plex Mono',monospace; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border); border-radius:2px; padding:2px 6px; }
.account-name{ font-size:16px; font-weight:600; }
.account-email{ font-size:11.5px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; }
.account-plan{ align-self:flex-start; margin-top:4px; font-family:'IBM Plex Mono',monospace;
  font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim);
  border:1px solid var(--border); border-radius:2px; padding:2px 6px; }
.account-plan.pro{ color:var(--pro); border-color:color-mix(in srgb, var(--pro) 55%, transparent); background:var(--pro-wash); }

.account-stats{ display:flex; gap:9px; margin-bottom:14px; }
.account-stat{ flex:1; text-align:center; border:1px solid var(--border); background:var(--surface);
  border-radius:3px; padding:11px 6px; }
.account-stat .n{ display:block; font-family:'Newsreader',Georgia,serif; font-size:21px; font-weight:600; }
.account-stat .n .of{ font-size:12px; color:var(--text-faint); }
.account-stat .l{ display:block; font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-faint); font-family:'IBM Plex Mono',monospace; margin-top:3px; }

.account-sync{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--text-dim);
  border:1px solid var(--border); border-radius:3px; padding:9px 12px; margin-bottom:16px; }
.account-sync .dot{ width:6px; height:6px; border-radius:50%; background:var(--text-faint); flex:0 0 auto; }
.account-sync.synced .dot{ background:var(--good); }
.account-sync.syncing .dot{ background:var(--warn); }
.account-sync.offline .dot{ background:var(--risk); }
.account-sync-btn{ margin-left:auto; background:none; border:0; cursor:pointer; color:var(--accent);
  font-size:11px; font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.07em; }

.account-group{ border:1px solid var(--border); border-radius:3px; overflow:hidden; margin-bottom:14px; }
.account-row{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; padding:13px 14px; background:var(--surface); border:0; border-bottom:1px solid var(--border);
  cursor:pointer; text-align:left; text-decoration:none; transition:background .14s ease; }
.account-group .account-row:last-child{ border-bottom:0; }
.account-row-label{ font-size:13px; font-weight:500; color:var(--text); }
.account-row-note{ font-size:11px; color:var(--text-faint); }
.account-row-chev{ color:var(--text-faint); font-size:17px; line-height:1; flex:0 0 auto; }

.account-reassure{ font-size:11.5px; color:var(--text-dim); line-height:1.6; margin-bottom:16px;
  padding-left:11px; border-left:2px solid var(--good); }

.back-link{ background:none; border:0; padding:0 0 12px; margin:0; cursor:pointer;
  color:var(--text-dim); font-size:12.5px; font-family:'Inter',system-ui,sans-serif;
  transition:color .14s ease; }


/* Keyboard focus must be visible on every interactive thing, not only inputs.
   Without this, tabbing through the app is invisible. */
a:focus-visible, .tab:focus-visible, .icon-btn:focus-visible, .link-btn:focus-visible,
.sheet-close:focus-visible, .mini-btn:focus-visible, .account-row:focus-visible,
.capture-btn:focus-visible, .toggle:focus-visible, .fab:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:3px;
}

/* Sentinel at the end of the job list — also tells the person there is more
   below rather than looking like the end of the catalogue. */
.jobs-more{ display:block; width:100%; text-align:center; padding:15px 0; margin-top:6px;
  font-size:11px; color:var(--text-dim); font-family:'IBM Plex Mono',monospace;
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-radius:3px;
  transition:background .14s ease, color .14s ease; }


/* A compact variant of .btn, used inside cards where the full 15px padding and
   uppercase weight would dominate. The class was already on two buttons in the
   markup and had never been defined, so both rendered at full size. */
.btn.small{ padding:11px 14px; font-size:11.5px; letter-spacing:0.07em; }

/* Heading above the photo choices in the account sheet. */
.avatar-choices-title{ font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-faint); font-family:'IBM Plex Mono',monospace; margin-bottom:8px; }

/* Wrapper for the plan cards — no box of its own, it just groups them. */
.pricing{ display:block; }

/* The photo choices block sits inside the account sheet, so it needs the same
   breathing room as the rows it appears between. */
.avatar-choices{ border:1px solid var(--border); background:var(--surface);
  border-radius:3px; padding:13px 14px; margin-bottom:16px; }
.avatar-choices .link-btn{ margin-top:11px; display:block; text-align:center; width:100%; }

/* ---------------------------------------------------------------------------
   insights
   The app's own reading of the market. Given the accent edge because it is the
   one thing on the roles screen that tells you something you did not know.
   --------------------------------------------------------------------------- */
.insight-teaser{ display:block; width:100%; text-align:left; cursor:pointer;
  border:1px solid var(--accent-dim); border-left:2px solid var(--accent);
  background:var(--accent-wash); border-radius:0 3px 3px 0;
  padding:13px 15px; margin:14px 0 4px; transition:background .14s ease; }
.insight-eyebrow{ display:block; font-family:'IBM Plex Mono',monospace; font-size:9px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }
.insight-line{ display:block; font-size:13px; line-height:1.55; color:var(--text); }
.insight-line b{ font-weight:600; }
.insight-gain{ display:block; font-size:11.5px; color:var(--good); margin-top:7px; }
.insight-more{ display:block; font-size:11px; color:var(--text-dim); margin-top:9px;
  font-family:'IBM Plex Mono',monospace; letter-spacing:.05em; }

.insight-basis{ font-size:11.5px; color:var(--text-faint); line-height:1.55; margin-bottom:6px; }
.insight-row{ display:flex; align-items:center; gap:14px; padding:11px 0;
  border-bottom:1px solid var(--border); }
.insight-row:last-of-type{ border-bottom:0; }
.insight-skill{ font-size:13px; font-weight:500; }
.insight-note{ font-size:11px; color:var(--text-faint); line-height:1.5; }
.insight-bar{ flex:0 0 88px; height:5px; border-radius:3px; background:var(--surface-2); overflow:hidden; }
/* The label block must take the slack, or a long skill name pushes its bar
   right and the bars stop sharing a left edge — which is the only thing that
   makes a row of bars comparable at a glance. min-width:0 lets a long name
   wrap instead of forcing the row wider. */
.insight-row .stack{ flex:1; min-width:0; }
.insight-bar div{ height:100%; background:var(--accent); border-radius:3px; }
/* A locked row is dimmed, never hidden: seeing that there IS more is the point. */
.insight-row.locked{ opacity:.38; }
.insight-lock{ border:1px solid color-mix(in srgb, var(--pro) 55%, transparent); background:var(--pro-wash);
  border-radius:3px; padding:14px 15px; margin-top:12px; font-size:12.5px;
  color:var(--text-dim); line-height:1.55; }
.insight-uplift{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  border:1px solid var(--border); background:var(--surface); border-radius:3px; padding:15px 16px; }
.insight-uplift .n{ font-family:'Newsreader',Georgia,serif; font-size:30px; font-weight:600;
  color:var(--text-dim); }
.insight-uplift .n.after{ color:var(--good); }
.insight-uplift .arrow{ color:var(--text-faint); font-size:17px; }
.insight-uplift .insight-note{ flex:1 0 100%; margin-top:4px; }

/* ==========================================================================
   FINISH-YOUR-PROFILE PROMPT
   Shown once, after the first application. Its job is to make each gap read as
   a consequence rather than an empty field, so the category mark carries the
   severity and the text carries the reason.
   ========================================================================== */

/* The drop zone. Dashed border is doing real work here — it is the
   conventional "this accepts something" affordance, and the only dashed edge
   left in the app now that the decorative ones are gone. */
.dropzone{ display:flex; flex-direction:column; align-items:center; justify-content:center;
           gap:var(--s2); text-align:center; padding:var(--s6) var(--s4);
           border:1.5px dashed var(--border); border-radius:var(--r-lg);
           background:var(--surface); color:var(--text-faint); cursor:pointer;
           transition:border-color var(--fast) ease, background var(--fast) ease, color var(--fast) ease; }
.dropzone:hover, .dropzone:focus-visible{ border-color:var(--accent); color:var(--text-dim); outline:none; }
.dropzone.over{ border-color:var(--accent); border-style:solid;
                background:var(--accent-wash); color:var(--text); }
.dropzone svg{ color:var(--accent); }
.dz-main{ font-size:var(--t-base); font-weight:600; color:var(--text); }
.dz-sub{ font-size:var(--t-xs); line-height:1.5; }

/* One gap per row: severity mark, what to do, and why it matters. The reason
   is the point of the row, so it is set at readable size rather than as fine
   print — a gap nobody understands the cost of is a gap nobody fills. */
.gap-list{ border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.gap{ display:flex; align-items:flex-start; gap:var(--s3); width:100%; text-align:left;
      padding:var(--s4); background:transparent; border:0;
      border-bottom:1px solid var(--border-soft); cursor:pointer;
      transition:background var(--fast) ease; }
.gap:last-child{ border-bottom:0; }
.gap:hover, .gap:focus-visible{ background:var(--surface); outline:none; }
.gap-mark{ width:7px; height:7px; border-radius:50%; margin-top:5px; flex:0 0 auto;
           background:var(--text-faint); }
.gap-mark.sec-risk{ background:var(--risk); }
.gap-mark.sec-warn{ background:var(--warn); }
.gap-mark.sec-info{ background:var(--info); }
.gap-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--s1); }
.gap-label{ font-size:var(--t-base); font-weight:600; color:var(--text); }
.gap-why{ font-size:var(--t-xs); line-height:1.55; color:var(--text-dim); }
.gap-chev{ color:var(--text-faint); font-size:17px; line-height:1; flex:0 0 auto; margin-top:2px; }

/* The add-control sits under its section rule rather than fighting the rule for
   the same line, which is what the old head/button row did — the button pushed
   the rule short and the two read as one broken line. */
.sec-actions{ display:flex; justify-content:flex-end; margin:calc(-1 * var(--s2)) 0 var(--s3); }
.icon-btn.accent{ color:var(--accent); }
.icon-btn.accent:hover{ color:var(--accent); opacity:.8; }

/* A table row that is also a control. The whole row is the target, so it needs
   the same 44px-ish height and feedback a button would have. */
.tbl-tap{ cursor:pointer; }
.tbl-tap:hover td, .tbl-tap:focus-visible td{ background:var(--surface); }
.tbl td.accent{ color:var(--accent); }
.kv-v.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }
.gap-more{ font-size:var(--t-xs); color:var(--text-faint); text-align:center;
           padding:var(--s3) 0 0; line-height:1.5; }

/* A company's score sits on the outcome ramp, not on the accent — the accent
   is the user's own next action, and an employer's record is not that.
   Below the sample floor it stays neutral, matching the hollow dot: a score
   built on one application is not yet a finding about anyone. */
.score-unknown{ color:var(--text-faint); }
.score-low { color:var(--risk); }
.score-mid { color:var(--warn); }
.score-good{ color:var(--good); }
.score-high{ color:var(--good); }

/* The upgrade lives in violet, not the accent.
   The palette reserves the accent for the user's own next action — Apply, and
   the controls around it. When the upsell wore the same colour, "Go Unlimited"
   carried exactly the weight of "Apply", so the paid plan competed for
   attention with the thing people actually came to do. Violet marks the paid
   plan and nothing else, which lets it be visible without shouting over the
   product. */
.btn.pro-cta{ border-color:var(--pro); color:var(--pro); }
.btn.pro-cta::before, .btn.pro-cta::after{ border-color:var(--pro); }
.plan-features li.pro-feat::before{ border-color:var(--pro); }

/* An estimated salary must never be mistakable for a disclosed one.
   Dashed border, "est." prefix and the amber of the caution category, because
   this is a number to proceed carefully with — someone who walks into a
   negotiation believing a figure we produced is worse off than someone who
   knew nothing. Opacity tracks confidence, so a weak estimate looks weak. */
.pill.salary-est{ color:var(--warn); border-style:dashed;
                  border-color:color-mix(in srgb, var(--warn) 45%, transparent);
                  background:color-mix(in srgb, var(--warn) 8%, transparent); }
.pill.salary-est.conf-low{ opacity:.72; }