/* ============================================================
   StillUnemployed.com — Jobs board
   Rebuilt clean from Manus export. CSS preserved verbatim from
   the original <style> blocks; only @font-face src paths were
   changed to ./assets/ relative URLs.
   ============================================================ */

/* ---- Global reset / tap highlight (from resp-inject) ---- */
html, body { max-width: 100%; overflow-x: hidden; }
* { -webkit-tap-highlight-color: transparent; }

/* Font declarations are shared in fonts.css, loaded through brand.css. */
/* ---------------- Component styles (verbatim) ---------------- */
body { margin: 0; background: #EFE6D4; }
    .board {
      background-color: #EFE6D4;
      background-image:
        radial-gradient(rgba(120,92,54,0.08) 1px, transparent 1.7px),
        radial-gradient(rgba(120,92,54,0.05) 1px, transparent 1.7px);
      background-size: 9px 9px, 9px 9px;
      background-position: 0 0, 4.5px 4.5px;
    }
    /* ---- "Change Look?" themes (palettes verbatim from MAIN FILE.dc.html) ---- */
    .board.cod {
      background-color: #283026;
      background-image:
        radial-gradient(rgba(220,225,205,0.05) 1px, transparent 1.7px),
        radial-gradient(rgba(220,225,205,0.035) 1px, transparent 1.7px),
        radial-gradient(130% 80% at 50% 0%, rgba(0,0,0,0.30), transparent 62%);
      background-size: 9px 9px, 9px 9px, 100% 100%;
      background-position: 0 0, 4.5px 4.5px, 0 0;
    }
    .board.girly {
      background-color: #FBD7E8;
      background-image:
        radial-gradient(rgba(216,40,126,0.10) 1px, transparent 1.7px),
        radial-gradient(rgba(216,40,126,0.07) 1px, transparent 1.7px),
        radial-gradient(130% 80% at 50% 0%, rgba(255,255,255,0.5), transparent 60%);
      background-size: 10px 10px, 10px 10px, 100% 100%;
      background-position: 0 0, 5px 5px, 0 0;
    }
    .board.poker {
      /* burgundy velvet pool-table felt: dot texture + a warm top sheen + bottom vignette */
      background-color: #4F0F1C;
      background-image:
        radial-gradient(rgba(244,222,173,0.055) 1px, transparent 1.7px),
        radial-gradient(rgba(244,222,173,0.035) 1px, transparent 1.7px),
        radial-gradient(120% 85% at 50% 0%, rgba(255,206,130,0.13), transparent 55%),
        radial-gradient(140% 90% at 50% 100%, rgba(0,0,0,0.38), transparent 62%);
      background-size: 9px 9px, 9px 9px, 100% 100%, 100% 100%;
      background-position: 0 0, 4.5px 4.5px, 0 0, 0 0;
    }
    .board.mermaid {
      /* deep ocean: plankton dots + drifting sun-caustics + refracted light + depth gradient */
      background-color: #9FDCEB;
      background-image:
        radial-gradient(rgba(12,74,92,0.10) 1px, transparent 1.7px),
        radial-gradient(rgba(12,74,92,0.06) 1px, transparent 1.7px),
        radial-gradient(55% 42% at 22% 14%, rgba(255,255,255,0.55), transparent 60%),
        radial-gradient(50% 38% at 80% 26%, rgba(206,244,255,0.42), transparent 62%),
        repeating-linear-gradient(115deg, rgba(255,255,255,0.18) 0 2px, transparent 2px 17px),
        repeating-linear-gradient(63deg, rgba(255,255,255,0.10) 0 1.5px, transparent 1.5px 26px),
        linear-gradient(180deg, #CDEFF6 0%, #86D2E6 45%, #3E9FC0 100%);
      background-size: 10px 10px, 10px 10px, 150% 130%, 140% 120%, 100% 100%, 100% 100%, 100% 100%;
      background-position: 0 0, 5px 5px, 0% 0%, 100% 0%, 0 0, 0 0, 0 0;
      animation: mermaidDrift 16s ease-in-out infinite alternate;
    }
    @keyframes mermaidDrift {
      from { background-position: 0 0, 5px 5px, 0% 0%,  100% 0%, 0 0,    0 0,     0 0; }
      to   { background-position: 0 0, 5px 5px, 14% 8%, 86% 12%, 60px 0, -40px 0, 0 0; }
    }
    @media (prefers-reduced-motion: reduce) { .board.mermaid { animation: none; } }
    .board.bratt {
      /* Charli XCX brat: pale-lime base + a lime glow so the bright green cards/nav pop */
      background-color: #EEF6D6;
      background-image:
        radial-gradient(rgba(90,140,0,0.10) 1px, transparent 1.7px),
        radial-gradient(rgba(90,140,0,0.06) 1px, transparent 1.7px),
        radial-gradient(130% 80% at 50% 0%, rgba(138,206,0,0.30), transparent 60%);
      background-size: 10px 10px, 10px 10px, 100% 100%;
      background-position: 0 0, 5px 5px, 0 0;
    }
    .board.noir {
      /* Black Cat: luxury white SILK — soft satin sheen with a gathered spiral swirl in the corner */
      background-color: #F0EEE8;
      background-image:
        conic-gradient(from 205deg at 90% 86%, rgba(255,255,255,0.85) 0deg, rgba(206,200,190,0.20) 70deg, rgba(255,255,255,0.85) 145deg, rgba(206,200,190,0.20) 215deg, rgba(255,255,255,0.85) 290deg, rgba(206,200,190,0.20) 360deg),
        linear-gradient(122deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0.42) 58%, rgba(255,255,255,0) 84%, rgba(255,255,255,0.4) 100%),
        radial-gradient(150% 120% at 14% 8%, rgba(255,255,255,0.6), transparent 55%);
      background-size: 100% 100%, 100% 100%, 100% 100%;
      background-repeat: no-repeat;
    }
    .board.beauty {
      /* high-class beauty: cream base + soft rose glow */
      background-color: #EFE7DC;
      background-image:
        radial-gradient(rgba(110,20,35,0.08) 1px, transparent 1.7px),
        radial-gradient(rgba(110,20,35,0.05) 1px, transparent 1.7px),
        radial-gradient(130% 80% at 50% 0%, rgba(242,196,206,0.5), transparent 62%);
      background-size: 10px 10px, 10px 10px, 100% 100%;
      background-position: 0 0, 5px 5px, 0 0;
    }
    .board.chess {
      /* marble chessboard: warm ivory base with a faint checker grid */
      background-color: #E9E7DF;
      background-image:
        linear-gradient(45deg, rgba(20,20,20,0.030) 25%, transparent 25%, transparent 75%, rgba(20,20,20,0.030) 75%),
        linear-gradient(45deg, rgba(20,20,20,0.030) 25%, transparent 25%, transparent 75%, rgba(20,20,20,0.030) 75%),
        radial-gradient(130% 85% at 50% 0%, rgba(255,255,255,0.5), transparent 60%);
      background-size: 66px 66px, 66px 66px, 100% 100%;
      background-position: 0 0, 33px 33px, 0 0;
    }
    /* keep the page gutter behind the board matching the active theme */
    body.theme-chess   { background: #E9E7DF !important; }
    body.theme-cod     { background: #283026 !important; }
    body.theme-girly   { background: #FBD7E8 !important; }
    body.theme-poker   { background: #4F0F1C !important; }
    body.theme-mermaid { background: #6FC7DE !important; }
    body.theme-bratt   { background: #EEF6D6 !important; }
    body.theme-noir    { background: #F0EEE8 !important; }
    body.theme-beauty  { background: #EFE7DC !important; }
    /* Card text limits (Jul 2 2026): a long company or role can no longer stretch
       its whole row and leave neighbor cards with dead space. Both clamp to 2
       lines with an ellipsis; the full text stays in the job popup + title attr. */
    .card-co   { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .card-role { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

    /* Tracker nav post-it: class-styled (never inline styles on anchors — Netlify
       mangles quoted inline styles). Colors come from CSS vars the JS sets on the
       nav row per the active "Change Look?" theme. */
    .nav-postit-tracker {
      --r: -2.5deg;
      background: var(--su-nav-bg, var(--su-yellow-paper));
      color: var(--su-nav-ink, #1f1c14);
      font-family: 'Indie Flower', cursive;
      font-size: 21px;
      letter-spacing: 0.01em;
      padding: 10px 20px;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
    }
    .postit {
      text-decoration: none;
      transform: perspective(720px) rotate(var(--r, 0deg));
      transform-origin: 50% 2%;
      box-shadow: 0 8px 18px rgba(44,33,24,0.22);
      transition: transform 0.34s cubic-bezier(.2,.92,.26,1.22), box-shadow 0.34s ease;
      will-change: transform;
    }
    .postit:hover {
      transform: perspective(720px) rotateX(32deg) rotate(var(--r, 0deg)) translateY(-5px) scale(1.025);
      box-shadow: 0 30px 36px -10px rgba(44,33,24,0.38);
    }
    .note {
      position: relative;
      transform: rotate(var(--rot, 0deg));
      box-shadow: 3px 6px 13px rgba(44,33,24,0.17);
      transition: transform .26s cubic-bezier(.2,.9,.3,1.25), box-shadow .26s ease;
      will-change: transform;
    }
    .note:hover {
      transform: rotate(0deg) translateY(-7px) scale(1.025);
      box-shadow: 9px 18px 32px -6px rgba(44,33,24,0.34);
      z-index: 6;
    }
    .note:hover .doodle-arrow { transform: translateX(5px) rotate(-3deg); }
    .doodle-arrow { transition: transform .24s cubic-bezier(.2,.9,.3,1.4); }
    .applylink2:hover { text-decoration: underline; text-underline-offset: 4px; }
    .bmbtn { transition: transform .14s ease; }
    .bmbtn:hover { transform: scale(1.22) rotate(-7deg); }
    .tab:hover { filter: brightness(1.03); }
    .fbopt { transition: transform .16s cubic-bezier(.2,.9,.3,1.3), box-shadow .16s ease; }
    .notetab:hover { transform: rotate(var(--nr,0deg)) scale(1.06); }
    .notetab { transition: transform .15s ease; }
    .envbob { animation: envbob 1.9s ease-in-out infinite; transform-origin: center; }
    @keyframes envbob { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-2.5px) rotate(-4deg)} }
    @keyframes envFadeAway { 0%{opacity:1; transform:rotate(var(--nr,0deg)) scale(1)} 100%{opacity:0; transform:rotate(var(--nr,0deg)) scale(.7)} }
    @keyframes noteFold { 0%{transform:scale(1); opacity:1} 100%{transform:scale(.14); opacity:0} }
    .stampfade { animation: stampFade .5s ease both; }
    @keyframes stampFade { 0%{opacity:0; transform:rotate(-4deg) scale(.9)} 100%{opacity:0.72; transform:rotate(-4deg) scale(1)} }
    @keyframes noteUnfold {
      0% { transform: scale(.16); opacity: 0; }
      55% { opacity: 1; }
      72% { transform: scale(1.06); }
      100% { transform: scale(1); opacity: 1; }
    }
    .fbopt:hover { transform: translateY(-5px) scale(1.045) rotate(0deg) !important; box-shadow: 4px 12px 22px rgba(44,33,24,0.28) !important; }

/* ---------------- Responsive overrides (verbatim from resp-inject) ---------------- */
[data-act]:not([data-act="stop"]):focus-visible, .trk-input:focus-visible, .trk-status:focus-visible, .trk-notes:focus-visible { outline:3px solid #D8502E !important; outline-offset:3px; }
.bmbtn { width:44px; height:44px; margin:-12px; }
.su-unlisted-saved { margin:32px 0; padding:20px; background:#FCFAF3; border:1px dashed #CDB88C; color:#2C2118; }
.su-unlisted-saved h2 { font-family:'Indie Flower',cursive; }
.su-unlisted-saved li { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:16px 0; }
.su-unlisted-saved a { color:#914322; overflow-wrap:anywhere; flex:1; min-width:180px; }
.su-unlisted-saved button { min-height:44px; background:var(--su-yellow-paper); color:#2C2118; border:1px solid #CDB88C; border-radius:4px; padding:8px 12px; cursor:pointer; }
#overlay-root [role="dialog"]:focus { outline:none; }
body.su-dialog-open { overflow:hidden; }
#overlay-root > [data-act] { -webkit-backdrop-filter:blur(2.5px); backdrop-filter:blur(2.5px); }
@media(prefers-reduced-transparency:reduce) {
  #overlay-root > [data-act] { -webkit-backdrop-filter:none; backdrop-filter:none; }
}
#overlay-root [data-act="closeDetail"], #overlay-root [data-act="closeAdvice"], #overlay-root [data-act="closeSignup"], #overlay-root [data-act="detailShare"] { min-width:32px; min-height:32px; }
@media (max-width: 1024px) {
    .board > div[style*="max-width: 1240px"] { padding-left: 24px !important; padding-right: 24px !important; }
    /* hide the founder/about card on tablet + below so it never overlaps the centered nav */
    .board .aboutcard { display: none !important; }
  }
  @media (max-width: 700px) {
    .job-grid { margin-top: 8px !important; padding-top: 0 !important; }
    .board > div:first-of-type {
      height: auto !important; padding: 16px 16px 0 !important;
      display: flex !important; flex-direction: column !important;
      align-items: stretch !important; gap: 12px !important;
    }
    .board > div:first-of-type > div:nth-child(1) {
      position: static !important; top: auto !important; left: auto !important;
      width: 100% !important; box-sizing: border-box !important; justify-content: flex-start !important;
    }
    .board > div:first-of-type > div:nth-child(2) {
      position: static !important; top: auto !important; left: auto !important;
      transform: none !important; justify-content: center !important;
      flex-wrap: wrap !important; gap: 12px !important;
    }
    .board > div:first-of-type > div:nth-child(2) a { font-size: 18px !important; padding: 10px 18px !important; }
    .board > div[style*="max-width: 1240px"] { padding-left: 16px !important; padding-right: 16px !important; }
    .board h1 { font-size: 40px !important; max-width: 100% !important; line-height: 0.98 !important; }
    .board div[style*="justify-content: space-between"][style*="flex-start"] { flex-direction: column !important; gap: 14px !important; }
    .board div[style*="#FBF6E9"][style*="border-radius: 5px"] { flex-wrap: wrap !important; gap: 10px !important; transform: none !important; }
    .board input[placeholder^="search"] { flex: 1 1 100% !important; font-size: 18px !important; min-width: 0 !important; }
    .board div[style*="position: absolute"][style*="width: 320px"],
    .board div[style*="position: absolute"][style*="width: 268px"] { width: min(92vw, 320px) !important; right: 0 !important; left: auto !important; }
    .board div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 64px 0 !important; padding: 12px 4px 0 !important; }
    .board div[style*="flex-wrap: wrap"] { row-gap: 10px !important; }
    .board div[style*="color: #7A6650"] { display: none !important; }
    .board div[style*="color: rgb(122, 102, 80)"] { display: none !important; }
    .board span[style*="color: #9C8367"] { display: none !important; }
    .board span[style*="rgb(156, 131, 103)"] { display: none !important; }
    .board div[style*="rgb(92, 64, 51)"] { display: none !important; }
  }

/* Change-look picker: 2-across + smaller cards on mobile (desktop keeps 3-across / 3+2) */
@media (max-width: 560px){
  /* only 3 themes now: full-width stacked cards so the badge + title each fit one line */
  .look-grid{ grid-template-columns: 1fr !important; gap: 12px !important; }
  .look-grid > div{ min-height: 118px !important; padding: 18px 16px 18px !important; }
  .look-grid > div > div:last-child{ font-size: 16px !important; white-space: nowrap !important; }
}

/* "we have even more themes" expander: the extra themes render as smaller/secondary cards. */
.look-grid-more > div{ min-height: 116px !important; padding: 12px 8px 11px !important; transform: none !important; }
.look-grid-more > div > div:last-child{ font-size: 15px !important; }

/* Hide the "pay key →" label on mobile (keep the color swatches + numbers) */
@media (max-width: 560px){ .pay-key-label{ display: none !important; } }

/* The first card on either board keeps a small drawing clear of the controls. */
.note-lead-doodle .doodle { top:-28px !important; left:4px !important; right:auto !important; }
/* Preserve the original arrow pose and its quiet corner position. */
.note-lead-doodle .original-doodle { top: -32px !important; }

/* ---- Advice notes + newsletter signup cards in the feed (2026-07-18) ----
   Two cadences live in the same DOM: .su-ins-d = desktop schedule (advice note in every
   3rd row's middle slot, signup card at a row-end two rows later), .su-ins-m = mobile
   schedule (J J S J J N — signup roughly every 3rd card, note every 5th job card).
   display:none removes the hidden set from the grid flow, so each viewport only ever
   sees its own cadence and positions stay exact. Breakpoint matches the 700px 1-col flip. */
@media (max-width: 700px) { .su-ins-d { display: none !important; } }
@media (min-width: 701px) { .su-ins-m { display: none !important; } }
/* notes lift a little less than job cards on hover — they're paper, not postings */
.su-advice:hover { transform: rotate(0deg) translateY(-5px) scale(1.015); }
.su-signup:hover { transform: rotate(var(--rot, 0deg)); box-shadow: 3px 6px 13px rgba(44,33,24,0.17); }

/* Compact, quiet reminders and a reserved space for the embedded signup form. */
.su-tracker-nudge {position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:195;display:flex;align-items:center;width:max-content;max-width:calc(100vw - 24px);background:#FCFAF3;color:#2A2118;border:1px solid #D6CBB7;border-radius:5px;box-shadow:2px 6px 18px #2c21182b;padding-left:12px;}
.su-tracker-nudge a {display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font:500 clamp(12px,3.5vw,15px)/1.3 var(--su-body);color:inherit;text-decoration:none;min-height:44px;}
.su-tracker-nudge button {flex:none;width:44px;height:44px;background:none;border:0;color:inherit;font:22px var(--su-body);cursor:pointer;}
.su-newsletter-frame {position:relative;min-height:50px;margin-top:12px;}
.su-newsletter-frame iframe {position:relative;display:block;width:100%;height:50px;border:0;background:transparent;border-radius:4px;opacity:0;}
.su-newsletter-frame.is-loaded iframe {opacity:1;}
.su-newsletter-loading {position:absolute;inset:0;height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border:1px solid #D6CBB7;border-radius:4px;background:#F4EEE2;font:14px var(--su-body);color:#6F5E45;}
.su-newsletter-loading i {width:26%;height:24px;background:#E4D5B4;border-radius:3px;}
.su-newsletter-loading[hidden],.su-newsletter-fallback[hidden] {display:none;}
.su-newsletter-fallback {font:14px var(--su-body);color:#A83D20;}
#overlay-root {font-family:var(--su-body);}
.su-filter-backdrop{position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;background:rgba(44,33,24,.58);backdrop-filter:blur(5px);overscroll-behavior:contain}
.su-filter-note{position:relative;width:390px;max-width:100%;max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;background:var(--su-paper);color:var(--su-ink);border-radius:5px;box-shadow:var(--su-note-shadow);padding:24px 20px 20px}
.su-filter-header{position:sticky;top:-24px;z-index:2;display:flex;align-items:center;justify-content:space-between;margin:-24px -20px 14px;padding:8px 12px 0 20px;background:var(--su-paper)}
.su-filter-header h2{margin:0;font-family:'Indie Flower',cursive;font-size:22px}
.su-filter-note [aria-label="Close filters"]{position:static!important;flex-shrink:0;width:44px!important;height:44px!important;background:transparent!important}
.su-filter-note .su-salary-range{width:100%}
.su-filter-note .su-salary-slider{margin:10px 0!important}
.su-filter-note .su-tune-feed{margin-top:14px}
.su-filter-note [data-act="fr"],.su-filter-note [data-act="ws"]{box-sizing:border-box;height:44px;min-height:44px;border:0;line-height:1.15;display:inline-flex;align-items:center;justify-content:center}
.su-sort-help{margin-top:8px;font:14px/1.5 var(--su-body);color:var(--su-muted)}
.su-sort-help summary{min-height:44px;align-content:center;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.su-sort-help p{margin:0 0 8px}
.su-filter-note [data-act="clearAll"]{min-height:44px;display:flex;align-items:center}

/* QA 2.3.4: drawings support the copy without setting the entire row's height. */
.su-advice .su-advice-illustration { max-width:148px !important; margin:10px auto 0 !important; }
.su-advice .su-advice-illustration svg { max-height:80px; }
.job-grid { margin-top:44px !important; }
@media(max-width:700px){ .job-grid { margin-top:24px !important; } }
.bmbtn { width:58px; height:58px; margin:-12px; }
.bmbtn svg { width:25px; height:25px; }
/* All transient messages own both their paper and ink, including dark themes. */
.su-feedback-toast { position:fixed; left:50%; bottom:max(26px,env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:2147483200; width:max-content; max-width:min(460px,calc(100vw - 32px)); box-sizing:border-box; padding:14px 22px; background:var(--su-paper); color:var(--su-ink); border:1px solid var(--su-muted); border-radius:3px; box-shadow:var(--su-note-shadow); font:18px/1.45 var(--su-hand); text-align:center; }
.su-discovery-feedback { padding:12px 16px; background:var(--su-action-paper,var(--su-yellow-paper)); color:var(--su-action-ink,var(--su-ink)); box-shadow:var(--su-note-shadow); border-radius:3px; }
.su-discovery-feedback p { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:0; color:inherit; }
.su-discovery-feedback button { background:transparent; color:inherit; border:1px solid currentColor; }
/* The embedded form is never concealed while third-party scripts finish loading. */
.su-newsletter-frame iframe { opacity:1; z-index:1; }
.su-newsletter-loading { z-index:0; pointer-events:none; }
.su-newsletter-retry { display:block; margin-top:8px; min-height:44px; border:0; background:var(--su-paper); color:var(--su-orange-text); font:16px var(--su-body); text-decoration:underline; cursor:pointer; }
.su-newsletter-retry[hidden] { display:none; }
.su-newsletter-footer{display:flex;flex-wrap:wrap;column-gap:.3em;row-gap:0;margin:8px 0 0;color:#6F5E45;font:14.5px/1.4 var(--su-hand)}
.su-newsletter-footer span{white-space:nowrap}

/* QA 2.3.7: small paper controls, with the theme's paired action colors. */
.su-tracker-nudge{background:var(--su-paper,#FCFAF3);color:var(--su-ink,#2A2118);padding:7px 0 7px 12px}
.su-tracker-nudge a{gap:7px;white-space:normal}
.su-tracker-nudge a>svg{flex:none;width:20px}
.su-tracker-sticky{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;background:var(--su-action-paper,var(--su-yellow-paper));color:var(--su-action-ink,var(--su-ink));font:21px/1.1 var(--su-hand);box-shadow:2px 4px 8px #2a211826;transform:rotate(-2deg);border-radius:2px}
.su-signin-reminder{position:fixed;z-index:194;right:16px;bottom:max(20px,env(safe-area-inset-bottom));box-sizing:border-box;width:340px;max-width:calc(100vw - 32px);padding:16px 20px;background:var(--su-paper,#FCFAF3);color:var(--su-ink,#2A2118);box-shadow:var(--su-note-shadow);border:1px solid var(--su-rule,#d2c5b0);border-radius:3px;font:15px/1.5 var(--su-body)}
.su-signin-reminder p{margin:0 0 10px}.su-signin-reminder p:first-child{font:23px/1.2 var(--su-hand);margin-bottom:8px}
.su-signin-reminder>div{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.su-signin-reminder button{min-height:44px;border:0;border-radius:2px;padding:8px 12px;font:16px/1.25 var(--su-hand);cursor:pointer}
.su-signin-reminder [data-signin]{background:var(--su-action-paper,var(--su-yellow-paper));color:var(--su-action-ink,var(--su-ink));box-shadow:2px 3px 6px #2a211826}
.su-signin-reminder [data-dismiss]{background:transparent;color:inherit;text-decoration:underline;text-underline-offset:3px}
@media(max-width:700px){
  .bmbtn{width:64px;height:64px}.bmbtn svg{width:28px;height:28px}
  .su-founder-overlay{padding:16px !important}
  .su-founder-note{transform:none !important;max-height:calc(100dvh - 32px);overflow:auto}
  .su-founder-image-wrap{padding:10px 10px 0 !important}
  .su-founder-image{height:clamp(110px,21dvh,165px) !important}
  .su-founder-image img{object-position:50% 31% !important}
  .su-founder-copy{padding:12px 22px 18px !important}
  .su-founder-hello{font-size:20px !important}
  .su-founder-title{font-size:27px !important;width:auto !important}
  .su-founder-bio{font-size:15px !important;line-height:1.48 !important;margin-top:16px !important}
  .su-founder-credit{margin-top:10px !important;font-size:12px !important}
  .su-founder-actions{gap:12px !important;margin-top:14px !important}
  .su-founder-actions>a{padding:11px 16px !important;min-height:44px;box-sizing:border-box;font-size:15px !important}
  .su-founder-release{margin-top:12px !important;padding-top:8px !important;font-size:12px !important}
}
.su-mini-themes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 14px; margin-top:26px; }
.su-mini-theme { position:relative; display:flex; align-items:center; justify-content:center; min-height:78px; padding:16px 8px 10px; border:0; border-radius:2px; background:var(--mini-paper); color:var(--mini-ink); box-shadow:2px 5px 9px #2a21182e; transform:rotate(-1deg); font:20px/1.15 var(--su-hand); cursor:pointer; }
.su-mini-theme:nth-child(even) { transform:rotate(1deg); }
.su-mini-theme::before { content:''; position:absolute; width:46px; height:15px; top:-8px; left:calc(50% - 23px); background:var(--su-tape); transform:rotate(-2deg); }
.su-mini-theme:hover { transform:translateY(-2px); }
.su-mini-theme[data-act="pickBratt"] { font-family:Arial,sans-serif; }
.su-mini-chess { background-image:conic-gradient(#171717 25%,transparent 0 50%,#171717 0 75%,transparent 0); background-size:26px 26px; }
.su-mini-chess span { background:#171717; color:#F4F2EC; padding:3px 9px; }
@media(max-width:700px) { .su-mini-themes { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:16px 10px; } .su-mini-theme { font-size:17px; min-height:70px; } }

.su-discovery.su-discovery-feedback{background:var(--su-action-paper,#F1E544);color:var(--su-action-ink,#2A2118)}
.su-discovery.su-discovery-feedback button{background:transparent;color:inherit;border-color:currentColor}
.su-availability-stamp{font:700 11px/1.3 var(--su-body,Arial,sans-serif);border:1.5px solid currentColor;border-radius:3px;padding:4px 7px;max-width:50%}
.su-saved-availability{font:500 14px/1.5 var(--su-body,Arial,sans-serif);color:#2A2118;border-block:1px dashed #AA9572;padding:10px 0}
.su-internship-stamp{opacity:1!important}

.su-primary-themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.su-primary-theme{min-height:112px!important;font-size:23px!important}
@media(max-width:480px){.su-primary-themes{gap:10px}.su-primary-theme{min-height:90px!important;font-size:20px!important}}

@media(max-width:360px){.su-mini-theme{font-size:15px!important;padding-inline:6px}.su-primary-theme{font-size:18px!important}}

/* Saved shortcut is a single quiet row with the same themed paper as Tracker. */
.su-saved-nudge .su-saved-shortcut{display:inline-flex;align-items:center;gap:7px;width:auto;min-height:44px;padding:0;border:0;background:transparent;color:inherit;font:500 clamp(12px,3.5vw,15px)/1.3 var(--su-body);white-space:nowrap}
.su-saved-shortcut>svg{flex:none;width:20px}
.su-saved-nudge{box-sizing:border-box}

/* A pointer-opened delete dialog keeps safe initial focus without a keyboard ring.
   The first key press removes this marker before normal keyboard handling. */
.trk-remove-confirm[data-pointer-opening="true"] [data-act="cancelRemoval"]:focus { outline:none !important; }

/* Jobs and internships share one readable paper dialog and visible share hint. */
.su-detail-dialog { transform:none !important; overflow-wrap:anywhere; }
.su-detail-header { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:8px; margin:-20px -20px 0 0; }
.su-detail-dialog .su-detail-company { min-width:0; padding-top:20px; }
.su-detail-dialog .su-detail-role { display:block !important; overflow:visible !important; -webkit-line-clamp:unset !important; padding-right:0 !important; margin-top:14px !important; }
.su-detail-actions { display:flex; gap:0; padding-bottom:34px; }
#overlay-root .su-detail-actions > button { position:relative; display:inline-flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px; min-width:44px; min-height:44px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:#5C4033; cursor:pointer; }
.su-detail-actions > button:focus-visible { outline:2px solid var(--su-orange-text); outline-offset:-4px; }
.su-detail-actions .su-detail-save > svg { width:18px; height:18px; }
.su-detail-share-hint { position:absolute; top:40px; left:0; width:44px; display:flex; flex-direction:column; align-items:center; color:#A63D22; font:700 16px/1.15 var(--su-hand); white-space:nowrap; }
.su-detail-dialog [data-act="detailApply"],.su-detail-dialog [data-act="detailProgram"] { min-height:44px; color:var(--su-orange-text) !important; }
@media(max-width:700px) {
  .su-detail-dialog { padding:30px 24px 26px 38px !important; }
  .su-detail-dialog > div:first-child { left:26px !important; }
  .su-detail-header { margin-right:-14px; }
}
@media(max-width:700px) {
  .su-detail-header { grid-template-columns:minmax(0,1fr); }
  .su-detail-actions { grid-row:1; justify-self:end; }
  .su-detail-dialog .su-detail-company { padding-top:0; }
}

/* Close controls own their entire target, including the paper circle. */
.su-advice-close { z-index:5; }
.su-advice-close svg { pointer-events:none; }
.su-tracker-founder { border:0; padding:0; background:transparent; color:var(--su-ink); max-width:none; max-height:none; width:100%; height:100%; }
.su-tracker-founder::backdrop { background:transparent; }
.su-newsletter-success { padding:0; border:1px solid #D6CBB7; border-radius:5px; width:500px; max-width:calc(100% - 32px); max-height:calc(100dvh - 40px); overflow:auto; background:var(--su-paper); color:var(--su-ink); box-shadow:var(--su-note-shadow); }
.su-newsletter-success[data-restoring]::backdrop { background:#827B6F; }
.su-newsletter-success::backdrop { background:rgba(44,33,24,.38); backdrop-filter:blur(3px); }
.su-newsletter-success-paper { position:relative; padding:34px 32px 30px 44px; background-image:linear-gradient(90deg,transparent 25px,rgba(214,80,46,.4) 25px,rgba(214,80,46,.4) 26px,transparent 26px),repeating-linear-gradient(180deg,transparent 0 39px,var(--su-rule) 39px 40px); }
.su-newsletter-success-close { position:absolute; top:8px; right:8px; display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; background:transparent; color:var(--su-ink); cursor:pointer; }
.su-newsletter-success-close svg { pointer-events:none; }
.su-newsletter-success h2 { margin:0 32px 24px 0; font:400 52px/1.1 var(--su-hand); }
.su-newsletter-success h2:focus { outline:none; }
.su-newsletter-success p { font:400 25px/1.6 var(--su-hand); margin:0 0 24px; }
.su-newsletter-success .su-newsletter-success-ps { margin:24px 0 0; }
.su-newsletter-success-ps span { text-decoration:underline; text-decoration-color:var(--su-orange); text-underline-offset:5px; }
.su-newsletter-go { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--su-orange-text); font:700 23px/1.3 var(--su-body); text-decoration:none; }
@media(max-width:600px){ .su-newsletter-success-paper{padding:30px 24px 26px 38px;} .su-newsletter-success h2{font-size:44px;} .su-newsletter-success p{font-size:23px;} }

/* Shared source-backed deadline and employer-industry details. */
.su-job-deadline{font-family:var(--su-body);font-size:13px;line-height:1.5;color:var(--su-muted,#6F5E45);margin:8px 0;overflow-wrap:anywhere}
.su-employer-industry{display:block;font-family:var(--su-hand);font-size:19px;margin:0 0 18px}
.su-employer-industry select{display:block;width:100%;box-sizing:border-box;padding:9px 12px;margin-top:8px;border:1.5px solid currentColor;border-radius:5px;background:var(--su-action-paper);color:var(--su-action-ink);font:inherit}