/* ============================================================
   Boiler Interns — Purdue Boilermaker internship network
   Old Gold + Black, industrial/collegiate. A Telos site.
   Shared stylesheet across the splash and all inner pages.
   ============================================================ */
:root{
  /* Purdue-family golds */
  --gold-700:#6e5323; --gold-600:#8e6f3e; --gold-500:#cfb991; --gold-400:#ddb945;
  --gold-300:#e6cd80; --gold-200:#ebd99f; --gold-100:#f4ecd4; --rush:#daaa00;
  --coal-900:#0a0a0a; --coal-800:#121110; --coal-700:#1b1916; --coal-600:#26231d;

  --bg:#0a0908; --bg-2:#12100d; --surface:#1a1712; --surface-soft:rgba(30,26,20,.6);
  --ink:#efe8d8; --ink-soft:#b6a988; --heading:#f6efdd;
  --accent:var(--gold-500); --accent-2:var(--rush);
  --line:rgba(207,185,145,.16); --chip-bg:#1e1a14;
  --shadow:0 24px 70px -25px rgba(0,0,0,.75); --shadow-sm:0 10px 34px -14px rgba(0,0,0,.65);
  --ember-op:1; --glow-op:.5; --radius:20px;
  --roll-grad:linear-gradient(180deg,var(--gold-300),var(--rush) 55%,var(--gold-600)); --roll-shadow:rgba(0,0,0,.42);
  --serif:'Oswald',Impact,sans-serif; --sans:'Inter',system-ui,sans-serif; --mono:'IBM Plex Mono',monospace;
}
html[data-theme="light"]{
  --bg:#fbf8f1; --bg-2:#f2ebda; --surface:#ffffff; --surface-soft:rgba(255,255,255,.78);
  --ink:#221e16; --ink-soft:#6c6350; --heading:#141109;
  --accent:#8e6f3e; --accent-2:#a9822f;
  /* Two deliberate changes for the light theme, both about white-on-white:
     --line was .18, which on a white card sitting on cream is barely an edge at
     all — cards read as floating smudges. .30 is still quiet but actually draws.
     --chip-bg was #ffffff, i.e. the same colour as every card it sits inside, so
     tier chips, countdowns and the modal's pills vanished entirely. */
  --line:rgba(110,83,35,.30); --chip-bg:#f7f0dd;
  --shadow:0 20px 60px -25px rgba(50,38,15,.4); --shadow-sm:0 8px 30px -12px rgba(50,38,15,.28);
  --ember-op:.5; --glow-op:.38;
  --roll-grad:linear-gradient(180deg,#e6b100,#b9820f 56%,#7d551b); --roll-shadow:rgba(90,60,10,.22);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.6;transition:background .5s ease,color .5s ease}
body{overflow-x:hidden}
/* splash pages never scroll */
body.splash{height:100dvh;overflow:hidden}
a{color:inherit}

/* ---------- animated backdrop ---------- */
.backdrop{position:fixed;inset:0;z-index:-2;overflow:hidden;
  background:radial-gradient(1200px 820px at 82% -12%, var(--surface) 0%, var(--bg-2) 44%, var(--bg) 100%);transition:background .5s ease}
.glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:var(--glow-op);mix-blend-mode:screen;animation:drift 24s ease-in-out infinite}
html[data-theme="light"] .glow{mix-blend-mode:multiply}
.glow.g1{width:560px;height:560px;background:radial-gradient(circle at 30% 30%, var(--gold-400), transparent 66%);top:-130px;right:-70px}
.glow.g2{width:640px;height:640px;background:radial-gradient(circle at 30% 30%, var(--gold-600), transparent 62%);top:26%;left:-180px;animation-delay:-8s}
.glow.g3{width:520px;height:520px;background:radial-gradient(circle at 30% 30%, var(--rush), transparent 64%);bottom:-150px;right:26%;animation-delay:-14s}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-40px,-28px) scale(1.08)}66%{transform:translate(34px,24px) scale(.95)}}
/* gritty brushed-metal noise overlay */
.backdrop::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-theme="light"] .backdrop::after{opacity:.05}
/* rising boiler embers */
.embers{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ember{position:absolute;bottom:-24px;width:6px;height:6px;border-radius:50%;opacity:var(--ember-op);
  background:radial-gradient(circle at 40% 40%, var(--gold-300), var(--rush) 55%, transparent 75%);
  box-shadow:0 0 8px 1px rgba(218,170,0,.55);animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0) translateX(0) scale(1);opacity:0}
  12%{opacity:.9}70%{opacity:.7}100%{transform:translateY(-108vh) translateX(24px) scale(.4);opacity:0}}

.wrap{max-width:1180px;margin:0 auto;padding:0 26px}

/* ---------- crossfade page transition (paired with app.js) ---------- */
html.bfade-init body{opacity:0}
body{transition:opacity .42s ease, background .5s ease, color .5s ease}
body.bfade-out{opacity:0}
@media (prefers-reduced-motion: reduce){html.bfade-init body{opacity:1}}

/* ---------- header / mast ----------
   Built to Telos's mast: one quiet line, everything that is not the account
   button is flat text. Left cluster is mark + wordmark + links + the square
   theme button; right cluster is the mono links and then the one gold block.
   Links are 11px uppercase mono-ish with wide tracking and a gold underline on
   hover rather than the pill backgrounds this header used to have — the pills
   competed with the gold account button and made the bar read busy. */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:var(--surface-soft);border-bottom:1px solid var(--line);transition:background .5s ease}
body.splash header.nav{background:transparent;border-bottom:none;position:relative}
/* Flat row of four: brand, links, theme button, right cluster. Deliberately not
   nested in a .nav-left wrapper — the links need to be a direct sibling so the
   phone breakpoint can reorder them onto a second line. The auto margin on the
   theme button is what splits the row into left and right groups.

   Full-bleed with 40px of padding, NOT inside the 1180 .wrap: Telos's mast runs
   edge to edge while its page content stays centred, so the mark sits hard left
   and the account button hard right. The .wrap class is stripped off this row in
   the markup for the same reason. */
.nav-inner{display:flex;align-items:center;gap:22px;height:72px;width:100%;max-width:none;padding:0 40px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
@media(max-width:760px){.nav-inner{padding:0 18px}}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
/* Bare line mark, no plate — Telos's mast metrics exactly: a 30px glyph beside a
   19px wordmark, both on the row's centre line. line-height:1 on the wordmark is
   what actually puts the two on the same optical axis; with the default 1.6 the
   text box is taller than the glyph and the letters ride high inside it. */
.crest{width:27px;height:30px;flex:none;display:block;color:var(--accent);transform:translateY(-9.4%)}
.crest svg{width:100%;height:100%;display:block}
.brand-name{font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:.5px;line-height:1;color:var(--heading);text-transform:uppercase;white-space:nowrap;display:block}
.brand-name .hl{color:var(--accent-2)}
nav.links{display:flex;align-items:center;gap:24px}
/* Database and Dashboard live in the right-hand cluster; these are their phone
   copies, which only come out on the second row at 640px. */
nav.links .nav-m,nav.links .nav-md{display:none}
/* Dashboard is a signed-in destination, so like Telos's mast it only appears
   once there is an account. boiler-auth.js stamps html.signedin. Hidden by
   default means a page that never loads auth shows the signed-out bar, which is
   the honest default — a Dashboard link that dumps you on a login wall is not. */
.nav-right .navdash{display:none}
html.signedin .nav-right .navdash{display:inline-block}
/* Every text item in the bar is one type spec, so nothing sits a pixel off its
   neighbour. line-height:1 + the shared 2px underline gap is what keeps the
   links, the wordmark and the buttons on a single centre line. */
.nav-inner a.mlink,nav.links a{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);text-decoration:none;line-height:1;padding-bottom:2px;
  border-bottom:1px solid transparent;border-radius:0;background:none;transition:.2s;white-space:nowrap}
.nav-inner a.mlink:hover,nav.links a:hover,nav.links a.active{color:var(--accent);background:none;border-bottom-color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:24px}
/* margin-right:auto is the split point between the left and right clusters */
.theme-toggle{width:auto;height:auto;margin-right:auto;border-radius:4px;border:1.5px solid var(--line);background:none;
  cursor:pointer;display:grid;place-items:center;color:var(--ink-soft);padding:8px 11px;line-height:1;transition:.2s;box-shadow:none}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent);transform:none}
.theme-toggle svg{width:14px;height:14px;display:block}
.theme-toggle .moon{display:none}
html[data-theme="light"] .theme-toggle .sun{display:none}
html[data-theme="light"] .theme-toggle .moon{display:block}
/* The only filled element in the bar is the account button, which boiler-auth.js
   injects into .nav-right — the gold "Dashboard" pill and the hamburger stub
   that used to live here are gone with the old header. */

/* ---------- embedded in the dashboard shell ----------
   These pages are also loaded into the dashboard's #appFrame, where the sidebar
   is already the navigation and the footer is a second copy of links the shell
   already has. Drop both, and trim the hero so the page does not open with 200px
   of empty gold before the content the sidebar just asked for. */
html.embedded header.nav,
html.embedded footer{display:none}
html.embedded .page-hero{padding-top:22px}
html.embedded body{background:transparent}
html.embedded #bAcct{display:none}

/* ============================================================
   SPLASH (index) — single non-scrolling screen
   ============================================================ */
.splash-main{height:calc(100dvh - 72px);display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:10px 26px 24px;gap:0}
.splash-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--accent);font-weight:500;background:var(--bg-2);padding:8px 18px;border-radius:999px;border:1px solid var(--line);margin-bottom:24px}
.splash-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--rush);box-shadow:0 0 8px 1px rgba(218,170,0,.7)}
.hero-title{text-decoration:none;display:block;text-align:center}
.hero-title h1{font-family:var(--serif);font-weight:700;font-size:clamp(30px,7.2vw,84px);line-height:1;letter-spacing:1.2px;color:var(--heading);text-transform:uppercase;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.26em}
/* stamped-steel fixed word */
.hero-title .fixed{white-space:nowrap;
  background:linear-gradient(180deg,#fbf6ea 0%,#cfc6b2 52%,#a2987f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.5)) drop-shadow(0 1px 1px rgba(0,0,0,.5))}
html[data-theme="light"] .hero-title .fixed{
  background:linear-gradient(180deg,#3a3120 0%,#17120a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(207,185,145,.55))}
/* second word — static gold */
.hero-title .word{white-space:nowrap;
  background:var(--roll-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 var(--roll-shadow))}
/* revolving word — mechanical roll through Interns / Ships / Internships */
/* roller width is locked to the base word ("Interns") via a hidden sizer, so
   BOILER never shifts; longer words (Internships) just extend to the right. */
.roller{position:relative;display:inline-block;flex:none;height:1.05em;line-height:1.05em;vertical-align:baseline;
  clip-path:inset(-0.14em -100vw -0.14em -0.02em)}
.roller .sizer{visibility:hidden;display:block;height:1.05em;line-height:1.05em;white-space:nowrap;font-weight:700;font-style:normal}
.roller b{position:absolute;left:0;top:0;height:1.05em;line-height:1.05em;white-space:nowrap;font-weight:700;font-style:normal;
  background:var(--roll-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 var(--roll-shadow));
  transition:transform .55s cubic-bezier(.82,0,.1,1),opacity .55s ease}
.roller b.roll-up{transform:translateY(-118%);opacity:0}
.roller b.roll-pre{transform:translateY(118%);opacity:0;transition:none}
@media (prefers-reduced-motion:reduce){.roller b{transition:none}}
/* stamped nameplate underline with rivets */
.nameplate{position:relative;width:min(360px,70vw);height:9px;margin:22px auto 0;border-radius:2px;
  background:linear-gradient(180deg,var(--gold-400),var(--gold-600));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 3px rgba(0,0,0,.4),var(--shadow-sm)}
.nameplate .rivet{position:absolute;top:50%;width:7px;height:7px;border-radius:50%;transform:translateY(-50%);
  background:radial-gradient(circle at 35% 30%,#fff6df,var(--gold-700));box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.nameplate .rivet:first-child{left:8px}
.nameplate .rivet:last-child{right:8px}
/* hazard-stripe divider */
.rule{display:flex;align-items:center;gap:16px;margin:22px 0 18px;color:var(--accent);font-family:var(--mono);font-size:12px;letter-spacing:5px;text-transform:uppercase;font-weight:500}
.rule.hazard::before,.rule.hazard::after{content:"";height:11px;width:76px;border-radius:2px;
  background:repeating-linear-gradient(45deg,var(--rush) 0 7px,#141109 7px 14px);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.splash-lede{max-width:620px;font-size:17px;color:var(--ink-soft)}

/* three planks on the splash */
.planks{display:flex;gap:18px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.plank{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 26px;width:280px;
  box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .3s cubic-bezier(.16,.84,.44,1),box-shadow .3s,border-color .3s}
.plank::after{content:"";position:absolute;top:-45%;right:-30%;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,var(--gold-400),transparent 68%);opacity:.22;transition:.4s}
.plank:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--gold-500)}
.plank:hover::after{transform:scale(1.3);opacity:.4}
.plank>*{position:relative;z-index:1}
.plank .pk-top{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:14px}
.plank .pk-num{font-family:var(--serif);font-size:16px;color:var(--accent-2);font-weight:600;letter-spacing:1px}
.plank .pk-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold-500),var(--gold-700));color:var(--coal-900);box-shadow:var(--shadow-sm)}
.plank .pk-ic svg{width:22px;height:22px}
.plank h3{font-family:var(--serif);font-size:25px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--heading);line-height:1.04;margin-bottom:5px}
.plank small{font-size:13px;color:var(--ink-soft)}
.plank .go{margin-top:14px;display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--accent)}
.plank .go svg{width:15px;height:15px;transition:.25s}
.plank:hover .go svg{transform:translateX(4px)}

/* telos parent credit on splash */
.parent-tag{margin-top:32px;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:14.5px;
  color:var(--ink-soft);letter-spacing:.4px}
.parent-tag .spark{width:8px;height:8px;border-radius:50%;background:var(--rush);box-shadow:0 0 9px 1px rgba(218,170,0,.75)}
.parent-tag a{color:var(--accent);text-decoration:none;font-weight:700;font-size:16px;border-bottom:1px solid var(--line);padding-bottom:1px;transition:.2s}
.parent-tag a:hover{color:var(--accent-2);border-color:var(--accent-2)}

/* ============================================================
   INNER PAGES — scrollable
   ============================================================ */
.page-hero{position:relative;padding:70px 0 30px;text-align:center}
.page-hero .kicker{font-family:var(--mono);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--accent-2);font-weight:500;margin-bottom:16px}
.page-hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(40px,6.4vw,76px);line-height:1;color:var(--heading);letter-spacing:.5px;text-transform:uppercase;margin-bottom:16px}
.page-hero p{max-width:640px;margin:0 auto;font-size:18px;color:var(--ink-soft)}

section.block{padding:60px 0;position:relative}
.sec-head{max-width:680px;margin-bottom:44px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--accent-2);font-weight:500;margin-bottom:14px}
.sec-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4.4vw,48px);text-transform:uppercase;color:var(--heading);line-height:1.06;letter-spacing:.4px;margin-bottom:16px}
.sec-head p{font-size:17px;color:var(--ink-soft)}

.btn{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;text-decoration:none;padding:14px 28px;border-radius:12px;transition:.2s;cursor:pointer;border:none}
.btn-primary{background:linear-gradient(135deg,var(--gold-400),var(--gold-600));color:var(--coal-900);box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:var(--surface);color:var(--accent);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{background:var(--bg-2)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px;text-align:center;backdrop-filter:blur(6px);box-shadow:var(--shadow-sm)}
.stat .num{font-family:var(--serif);font-size:40px;font-weight:700;color:var(--accent);line-height:1}
.stat .lab{font-family:var(--mono);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-soft);margin-top:8px}

/* network directory */
.conn-tools{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px;justify-content:center}
.search{flex:1;min-width:260px;max-width:440px;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px;box-shadow:var(--shadow-sm)}
.search input{border:none;outline:none;flex:1;font-size:14.5px;font-family:inherit;color:var(--ink);background:none}
.search svg{width:16px;height:16px;color:var(--accent)}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:13px;font-weight:500;color:var(--ink-soft);background:var(--chip-bg);border:1px solid var(--line);padding:11px 16px;border-radius:999px;cursor:pointer;transition:.2s}
.chip:hover,.chip.active{background:var(--gold-500);color:var(--coal-900);border-color:var(--gold-500)}
.conn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.member{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:.25s}
.member::before{content:"";position:absolute;top:0;left:0;right:0;height:64px;background:linear-gradient(135deg,var(--gold-500),var(--gold-700));opacity:.14}
.member:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.m-avatar{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;position:relative;z-index:1;background:linear-gradient(135deg,var(--gold-500),var(--gold-700));color:var(--coal-900);font-family:var(--serif);font-size:26px;font-weight:700;box-shadow:0 0 0 4px var(--surface),var(--shadow-sm);margin-bottom:16px}
.m-name{font-family:var(--serif);font-size:22px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--heading);line-height:1}
.m-role{font-size:13.5px;color:var(--accent-2);font-weight:600;margin:4px 0 12px}
.m-meta{font-size:13.5px;color:var(--ink-soft);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.m-meta svg{width:14px;height:14px;color:var(--accent);flex:none}
.m-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.m-tag{font-size:11.5px;font-weight:600;color:var(--accent);background:var(--bg-2);padding:5px 11px;border-radius:999px}
.m-connect{margin-top:18px;width:100%;justify-content:center;font-size:13.5px;padding:11px}
.placeholder-note{text-align:center;margin-top:32px;font-size:13.5px;color:var(--ink-soft);font-style:italic}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:54px}
.mode{text-align:center;padding:32px 24px;border-radius:var(--radius);background:var(--surface-soft);border:1px solid var(--line);backdrop-filter:blur(6px)}
.mode .mi{width:54px;height:54px;margin:0 auto 16px;border-radius:15px;display:grid;place-items:center;background:var(--bg-2);color:var(--accent)}
.mode .mi svg{width:26px;height:26px}
.mode h4{font-family:var(--serif);font-size:21px;text-transform:uppercase;letter-spacing:.4px;color:var(--heading);margin-bottom:8px}
.mode p{font-size:14px;color:var(--ink-soft)}

/* generic placeholder panel (test / database pages) */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:44px;box-shadow:var(--shadow-sm);text-align:center}
.panel .big-ic{width:76px;height:76px;margin:0 auto 22px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold-500),var(--gold-700));color:var(--coal-900);box-shadow:var(--shadow-sm)}
.panel .big-ic svg{width:36px;height:36px}
.panel h3{font-family:var(--serif);font-size:30px;text-transform:uppercase;letter-spacing:.4px;color:var(--heading);margin-bottom:12px}
.panel p{max-width:520px;margin:0 auto 8px;font-size:16px;color:var(--ink-soft)}
.coming{display:inline-block;margin-top:20px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);background:var(--bg-2);border:1px solid var(--line);padding:8px 16px;border-radius:999px}
.field-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.field{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 20px;box-shadow:var(--shadow-sm);transition:.25s;text-decoration:none;display:block}
.field:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold-500)}
.field .fi{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--bg-2);color:var(--accent);margin-bottom:12px}
.field .fi svg{width:20px;height:20px}
.field h4{font-family:var(--serif);font-size:20px;text-transform:uppercase;letter-spacing:.4px;color:var(--heading);font-weight:600;margin-bottom:3px}
.field span{font-size:12.5px;color:var(--ink-soft)}

/* CTA band */
.cta-band{margin:0 auto;max-width:1180px;padding:0 26px}
.cta-inner{background:linear-gradient(135deg,var(--coal-700),var(--coal-900));border-radius:28px;padding:58px 48px;text-align:center;color:var(--gold-100);position:relative;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.cta-inner::after{content:"";position:absolute;inset:0;background:radial-gradient(500px 300px at 82% -22%, rgba(218,170,0,.34), transparent 60%),radial-gradient(420px 260px at 8% 120%, rgba(207,185,145,.3), transparent 60%)}
.cta-inner>*{position:relative;z-index:1}
.cta-inner h2{font-family:var(--serif);font-size:clamp(28px,4vw,46px);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px;color:#fff}
.cta-inner p{color:rgba(255,255,255,.8);max-width:520px;margin:0 auto 28px;font-size:17px}
.cta-inner .btn-primary{background:linear-gradient(135deg,var(--gold-300),var(--gold-500));color:var(--coal-900)}

/* footer */
footer{background:var(--coal-900);color:rgba(255,255,255,.7);padding:56px 0 30px;margin-top:70px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.foot-brand .brand-name{color:#fff}
/* the header mark sits at 30px on one quiet line; the footer block wants it
   larger, so pin the size here rather than in .crest */
.foot-brand .crest{width:40px;height:44px;color:var(--gold-500)}
.foot-brand p{font-size:14px;margin-top:14px;max-width:290px;color:rgba(255,255,255,.6)}
.foot-col h5{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-500);margin-bottom:16px;font-weight:500}
.foot-col a{display:block;color:rgba(255,255,255,.68);text-decoration:none;font-size:14px;margin-bottom:10px;transition:.2s}
.foot-col a:hover{color:var(--gold-300)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.5)}
.foot-bottom a{color:var(--gold-400);text-decoration:none}
.foot-bottom a:hover{color:var(--gold-300)}
.foot-bottom .mark{letter-spacing:2px;color:var(--gold-500);font-family:var(--serif);text-transform:uppercase;font-weight:600}

.reveal{opacity:0;transform:translateY(26px);transition:.7s cubic-bezier(.16,.84,.44,1)}
.reveal.in{opacity:1;transform:none}

@media(max-width:900px){
  .stats,.field-grid{grid-template-columns:1fr 1fr}
  .conn-grid,.modes{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  body.splash{height:auto;overflow:auto}
  .splash-main{height:auto;min-height:calc(100dvh - 72px);padding:30px 26px 50px}
  .planks{flex-direction:column;align-items:center}
  .plank{width:min(320px,90vw)}
}
@media(max-width:640px){
  /* Phone: the bar becomes two rows — identity + theme + account on top, the
     nav links centred underneath. Dashboard appears twice in the markup on
     purpose: it belongs beside the account button on desktop (Telos's mast puts
     it there) and there is no room for it on that row at 390px, so the copy
     inside nav.links takes over below and the right-hand one hides. */
  .nav-inner{height:auto;flex-wrap:wrap;padding:12px 18px;gap:14px}
  .nav-right{gap:14px}
  .nav-right .mlink{display:none}
  nav.links{order:3;width:100%;gap:20px;justify-content:center;
    border-top:1px solid var(--line);padding-top:11px}
  nav.links .nav-m{display:inline-block}
  html.signedin nav.links .nav-md{display:inline-block}
  .brand{gap:8px}
  .brand-name{font-size:17px}
  .crest{width:28px;height:28px;border-radius:6px}
  .crest svg{width:16px;height:16px}
  .conn-grid,.modes,.stats,.field-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}


/* ============================================================
   Region explorer + role cards — shared by database.html and
   every field page. Mirrors the Telos database layout; only the
   palette is Boiler's.
   ============================================================ */

/* ---------- explorer: regions that open to reveal specialties ---------- */
.rex{max-width:1180px;margin:0 auto;padding:0 26px 10px}
.rex-region{margin-top:18px;border-left:2px solid transparent;padding-left:16px;transition:border-color .3s}
.rex-region.open{border-left-color:var(--rex-accent,var(--accent))}
.rex-head{display:flex;align-items:center;gap:14px;width:100%;cursor:pointer;user-select:none;
  padding:15px 18px;background:var(--surface-soft);border:1px solid var(--line);border-radius:14px;
  text-align:left;font:inherit;color:inherit;transition:.25s;box-shadow:var(--shadow-sm)}
.rex-head:hover{border-color:var(--accent);transform:translateX(3px)}
.rex-head:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rex-region.open .rex-head{border-color:var(--rex-accent,var(--accent))}
.rex-ico{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:12px;
  color:var(--rex-accent,var(--accent));background:var(--chip-bg);border:1px solid var(--line)}
.rex-ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rex-text{flex:1 1 auto;min-width:0}
.rex-title{display:block;font-family:var(--serif);font-weight:600;text-transform:uppercase;
  letter-spacing:.4px;font-size:19px;color:var(--heading);line-height:1.15}
.rex-tag{display:block;font-size:12px;color:var(--ink-soft);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rex-meta{flex:none;display:flex;align-items:center;gap:12px;color:var(--ink-soft);font-size:12.5px}
.rex-specs{font-size:12px;white-space:nowrap}
.rex-chev{font-size:12px;color:var(--accent);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.rex-region.open .rex-chev{transform:rotate(90deg)}

/* minmax(0,1fr) is what stops a long specialty name forcing the track wider than
   its share and pushing the last card off the right edge. */
.rex-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .4s cubic-bezier(.2,.7,.2,1),opacity .3s ease,margin .3s ease}
.rex-region.open .rex-grid{max-height:2400px;opacity:1;margin-top:14px;margin-bottom:6px;overflow:visible}

.rex-card{position:relative;display:block;text-decoration:none;color:inherit;
  background:var(--chip-bg);border:1px solid var(--line);border-radius:14px;
  padding:15px 16px;overflow:hidden;transition:.2s}
.rex-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--rex-accent,var(--accent));opacity:.7}
.rex-card:hover{transform:translateY(-5px);border-color:var(--rex-accent,var(--accent));
  box-shadow:var(--shadow)}
.rex-st{font-size:14.5px;font-weight:650;color:var(--heading)}
.rex-sd{color:var(--ink-soft);font-size:12px;margin-top:5px;line-height:1.45}
.rex-tagm{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.5px;padding:3px 8px;border-radius:6px;
  color:#8fc7a3;background:rgba(127,191,149,.14)}
html[data-theme="light"] .rex-tagm{color:#2f7d52;background:rgba(47,125,82,.12)}

@media(max-width:1100px){.rex-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:768px){
  .rex{padding:0 16px 10px}
  .rex-grid{grid-template-columns:1fr}
  .rex-region.open .rex-grid{max-height:7000px}
  .rex-head{padding:14px 15px;gap:12px}
  .rex-head:hover{transform:none}
  .rex-card:hover{transform:none}
  .rex-ico{width:38px;height:38px}
  .rex-title{font-size:17px}
  .rex-specs{display:none}
}

/* ---------- field pages: the role list ---------- */
.dbwrap{max-width:1180px;margin:0 auto;padding:0 26px}
.dbbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 20px}
.dbsearch{flex:1;min-width:240px;max-width:460px;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 15px;box-shadow:var(--shadow-sm)}
.dbsearch input{border:none;outline:none;flex:1;font-size:14.5px;font-family:inherit;color:var(--ink);background:none}
.dbsearch svg{width:16px;height:16px;color:var(--accent)}
.dbmeta{font-family:var(--mono);font-size:12px;color:var(--ink-soft);margin:0 0 16px;min-height:16px}
.rolegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}

/* Card anatomy is Telos's, element for element — badge stack top right, company,
   tier row, role, status, pay, description, location, apply, buttons pinned
   bottom right. Scoped under .rolegrid because .card/.row/.status are generic
   enough to collide with the landing pages that share this stylesheet. */
.rolegrid .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;position:relative;display:flex;flex-direction:column;gap:7px;
  box-shadow:var(--shadow-sm);transition:.14s}
.rolegrid .card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.rolegrid .card.isapplied{opacity:.72}
.rolegrid .co{font-size:13px;color:var(--accent);font-weight:600}
.rolegrid .role{font-size:15.5px;font-weight:650;line-height:1.3;color:var(--heading)}
.rolegrid .about{font-size:12.5px;line-height:1.5;color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rolegrid .due{font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rolegrid .card>*{min-width:0}
.rolegrid .role{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rolegrid .due{margin-bottom:2px}
.rolegrid .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px}
.rolegrid .status{font-weight:600}
.rolegrid .status.open,.rolegrid .status.soon{color:#6fae87}
.rolegrid .status.closed{color:#e05252}
.rolegrid .pay{color:#79ad90;font-size:12px;font-weight:600}

.rolegrid .tagrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rolegrid .tier,.rolegrid .fbadge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.3px;
  padding:2px 8px;border-radius:6px;background:var(--chip-bg);color:var(--gold-200);border:1px solid var(--line)}
.rolegrid .sbadge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.3px;
  padding:2px 8px;border-radius:6px;background:var(--chip-bg);color:var(--gold-300);border:1px solid var(--line)}

.rolegrid .badgewrap{position:absolute;top:14px;right:14px;display:flex;gap:5px;align-items:center;
  flex-wrap:nowrap;justify-content:flex-end;z-index:4}
.rolegrid .co{padding-right:172px}
.rolegrid .vbadge{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 8px;border-radius:6px;border:1px solid}
.rolegrid .vbadge.active{color:#7fbf95;border-color:rgba(127,191,149,.5);background:rgba(127,191,149,.12)}
.rolegrid .vbadge.verified{color:var(--gold-500);border-color:rgba(207,185,145,.5);background:rgba(207,185,145,.12)}
.rolegrid .vbadge.expected{color:var(--ink-soft);border-color:var(--line)}
.rolegrid .vbadge.closed{color:#d9736b;border-color:rgba(217,115,107,.5);background:rgba(217,115,107,.1)}
.rolegrid .badge{font-size:10px;font-weight:700;letter-spacing:.4px;padding:3px 7px;border-radius:6px}
.rolegrid .badge.new{background:var(--rush);color:#12100d}
.rolegrid .badge.applied{background:rgba(127,191,149,.16);color:#7fbf95;border:1px solid #5fbf8a}
.rolegrid .lvlbadge{font-size:10px;font-weight:700;padding:3px 7px;border-radius:6px;border:1px solid}
.rolegrid .lvlbadge.jr,.rolegrid .lvlbadge.soph{background:var(--chip-bg);color:var(--gold-200);border-color:var(--line)}
.rolegrid .lvlbadge.phd{background:#2b1f33;color:#cbaee0;border-color:#4d3a5c}
.rolegrid .lvlbadge.masters{background:#1c2a33;color:#9fc9dd;border-color:#33505f}

.rolegrid .cd{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;
  background:var(--chip-bg);color:var(--ink-soft);border:1px solid var(--line)}
.rolegrid .cd.urgent{background:rgba(217,115,107,.14);color:#e79a93;border-color:rgba(217,115,107,.4)}
.rolegrid .cd.soon{background:rgba(221,185,69,.12);color:var(--gold-300);border-color:rgba(221,185,69,.35)}
.rolegrid .cd.closed{background:transparent;color:var(--ink-soft)}
.rolegrid .livehint{font-size:11px;font-weight:600;color:var(--ink-soft)}

/* one bottom row: apply on the left, the two buttons on the right, aligned */
.rolegrid .cardfoot{margin-top:auto;padding-top:12px;display:flex;align-items:center;
  justify-content:space-between;gap:10px;flex-wrap:wrap}
.rolegrid .cardapply{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;
  color:#1c1608;background:linear-gradient(135deg,var(--gold-400),var(--gold-600));
  padding:6px 12px;border-radius:8px;text-decoration:none;flex:none}
.rolegrid .cardapply:hover{filter:brightness(1.08)}
.rolegrid .cardbtns{display:flex;gap:8px;margin-left:auto}
.rolegrid .savebtn,.rolegrid .appliedbtn{background:var(--bg-2);border:1px solid var(--line);
  color:var(--ink-soft);font-family:inherit;font-size:11.5px;font-weight:600;padding:5px 10px;
  border-radius:8px;cursor:pointer;transition:.15s}
.rolegrid .savebtn:hover{color:var(--ink);border-color:var(--accent)}
.rolegrid .savebtn.on{background:rgba(207,185,145,.16);border-color:var(--accent);color:var(--gold-200)}
.rolegrid .appliedbtn:hover{color:var(--ink);border-color:#5fbf8a}
.rolegrid .appliedbtn.on{background:rgba(95,191,138,.16);border-color:#5fbf8a;color:#7fbf95}

@media(max-width:520px){
  .rolegrid .card{padding:16px}
  .rolegrid .co,.rolegrid .role,.rolegrid .tagrow{padding-right:0}
  .rolegrid .badgewrap{position:static;max-width:none;justify-content:flex-start;margin-bottom:2px}
}

.dbstate{text-align:center;padding:60px 20px;color:var(--ink-soft)}
.dbstate .spin{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--gold-500);border-radius:50%;margin:0 auto 16px;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.dbmore{display:block;margin:26px auto 0;font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--accent);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:11px 22px;cursor:pointer}
.dbmore:hover{border-color:var(--gold-500)}

/* specialty pills on a field page — jump between siblings without going back */
.typebar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.typebar a{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);text-decoration:none;
  background:var(--chip-bg);border:1px solid var(--line);padding:8px 14px;border-radius:999px;transition:.15s}
.typebar a:hover{border-color:var(--gold-500);color:var(--accent)}
.typebar a.on{background:var(--gold-500);color:#12100d;border-color:var(--gold-500);font-weight:600}
@media(max-width:768px){.dbwrap{padding:0 16px}}

/* ---------- search page ----------
   On a field page the search box is a secondary filter under the type bar, so a
   460px cap is right. On search.html it IS the page, and that cap left it as a
   small pill with a metre of dead space beside it. Here it runs the full width
   and the field chips sit with it inside one panel, so the controls read as a
   surface instead of three loose objects floating on the backdrop — which is
   what they looked like inside the dashboard's carded shell. */
.searchpanel{background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow-sm);backdrop-filter:blur(6px);margin-bottom:18px}
.searchpanel .dbbar{margin:0 0 14px}
.searchpanel .dbsearch{max-width:none;padding:13px 17px;border-radius:12px}
.searchpanel .dbsearch input{font-size:15.5px}
.searchpanel .dbsearch svg{width:18px;height:18px}
.searchpanel .typebar{margin:0}
.searchpanel .fieldlbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 9px}

/* ---------- role modal: Overview / Deep Dive / Networking ----------
   Same three-tab deep dive a Telos card opens. No auth gate here: Telos bounces
   an anonymous reader to login.html, and Boiler has no login to bounce them to. */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.68);display:none;align-items:flex-start;
  justify-content:center;padding:34px 20px;z-index:120;overflow-y:auto}
.overlay.show{display:flex}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:18px;max-width:740px;
  width:100%;padding:26px 28px;position:relative;box-shadow:var(--shadow)}
.modal h2{margin:0 0 2px;font-family:var(--serif);font-weight:600;text-transform:uppercase;
  letter-spacing:.4px;font-size:22px;color:var(--heading);line-height:1.15}
.modal .mco{color:var(--accent);font-weight:600;font-size:14px}
.modal .mtier{margin:8px 0 2px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.modal .close{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--ink-soft);
  font-size:26px;cursor:pointer;line-height:1}
.modal .close:hover{color:var(--ink)}
.modal .tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:16px 0 4px;flex-wrap:wrap}
.modal .tab{padding:8px 12px;font-size:12.5px;color:var(--ink-soft);cursor:pointer;
  border-bottom:2px solid transparent;font-weight:600;background:none;border-top:none;
  border-left:none;border-right:none;font-family:inherit}
.modal .tab:hover{color:var(--ink)}
.modal .tab.active{color:var(--ink);border-bottom-color:var(--accent)}
.modal .pane{display:none;padding-top:12px}
.modal .pane.active{display:block}
.modal .pane h3{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-soft);margin:16px 0 6px}
.modal .pane h3:first-child{margin-top:4px}
.modal .pane p{margin:0 0 10px;font-size:14.5px;color:var(--ink);line-height:1.6}
.modal .kv{display:flex;gap:10px;font-size:13.5px;margin:5px 0}
.modal .kv b{color:var(--ink-soft);font-weight:500;min-width:126px;flex:none}
.modal .tier{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.3px;padding:2px 8px;
  border-radius:6px;background:var(--chip-bg);color:var(--gold-200);border:1px solid var(--line)}
.modal .cd{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;background:var(--chip-bg);
  color:var(--ink-soft);border:1px solid var(--line)}
.modal .cd.urgent{background:rgba(217,115,107,.14);color:#e79a93;border-color:rgba(217,115,107,.4)}
.modal .status{font-weight:600}
.modal .status.open,.modal .status.soon{color:#6fae87}
.modal .status.closed{color:#e05252}
.modal .applybar{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.modal .apply{display:inline-block;background:linear-gradient(135deg,var(--gold-400),var(--gold-600));
  color:#1c1608;text-decoration:none;padding:12px 22px;border-radius:11px;font-weight:650;font-size:14px}
.modal .apply:hover{filter:brightness(1.08)}
.modal .soon-btn{display:inline-block;background:var(--bg-2);color:var(--ink-soft);padding:12px 22px;
  border-radius:11px;font-weight:650;font-size:14px;border:1px dashed var(--line)}
.modal .netlink{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 13px;
  background:var(--chip-bg);border:1px solid var(--line);border-radius:10px;margin-bottom:8px;text-decoration:none}
.modal .netlink:hover{border-color:var(--accent)}
.modal .netlink .nl{color:var(--ink);font-size:13.5px;font-weight:600}
.modal .netlink .ns{color:var(--accent);font-size:12px;white-space:nowrap}
.modal .tmpl{background:var(--chip-bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  font-family:var(--mono);font-size:12.5px;color:var(--ink);white-space:pre-wrap;margin-bottom:10px;line-height:1.6}
.rolegrid .card{cursor:pointer}

/* ---------- light theme: contrast on the cards and the modal ----------
   The gold and green literals above are tuned for a near-black surface. The
   light theme only re-points the structural tokens (--ink, --line, --surface),
   so --gold-200 (#ebd99f) and #7fbf95 stayed as they were and the tier chips,
   the level badge and "Open (verified live)" washed out to near-invisible on
   white. Retargeted here rather than in :root because the same literals are
   correct on the dark theme and are also used where dark text sits ON gold
   (the Apply gradient), which must not move.

   Values are the dark-theme hues pushed down in lightness until each clears
   4.5:1 against the light surface, so nothing changes hue — a gold chip is
   still gold, it is just legible. */
html[data-theme="light"] .rolegrid .tier,
html[data-theme="light"] .rolegrid .fbadge,
html[data-theme="light"] .rolegrid .sbadge,
html[data-theme="light"] .rolegrid .lvlbadge.jr,
html[data-theme="light"] .rolegrid .lvlbadge.soph,
html[data-theme="light"] .rolegrid .savebtn.on,
html[data-theme="light"] .rolegrid .cd.soon,
html[data-theme="light"] .modal .tier{color:#6b4f14}
html[data-theme="light"] .rolegrid .tier,
html[data-theme="light"] .rolegrid .fbadge,
html[data-theme="light"] .rolegrid .sbadge,
html[data-theme="light"] .rolegrid .lvlbadge.jr,
html[data-theme="light"] .rolegrid .lvlbadge.soph,
html[data-theme="light"] .modal .tier{background:#f7efdb;border-color:rgba(110,83,35,.32)}
html[data-theme="light"] .rolegrid .status.open,
html[data-theme="light"] .rolegrid .status.soon,
html[data-theme="light"] .modal .status.open,
html[data-theme="light"] .modal .status.soon,
html[data-theme="light"] .rolegrid .pay{color:#1f7a4d}
html[data-theme="light"] .rolegrid .vbadge.active{color:#1f7a4d;border-color:rgba(31,122,77,.45);background:rgba(31,122,77,.10)}
html[data-theme="light"] .rolegrid .vbadge.verified{color:#7a5c1c;border-color:rgba(122,92,28,.45);background:rgba(122,92,28,.10)}
html[data-theme="light"] .rolegrid .badge.applied,
html[data-theme="light"] .rolegrid .appliedbtn.on{color:#1f7a4d;border-color:#1f7a4d;background:rgba(31,122,77,.12)}
html[data-theme="light"] .rolegrid .cd.urgent,
html[data-theme="light"] .modal .cd.urgent{color:#a8332a;border-color:rgba(168,51,42,.42);background:rgba(168,51,42,.10)}
html[data-theme="light"] .rolegrid .status.closed,
html[data-theme="light"] .modal .status.closed{color:#a8332a}
/* the PhD / master's chips ship their own dark plate — on white that plate is a
   black rectangle, so give them the same light chip treatment as the rest */
html[data-theme="light"] .rolegrid .lvlbadge.phd{background:#f1e7f7;color:#5b3a75;border-color:#c9aede}
html[data-theme="light"] .rolegrid .lvlbadge.masters{background:#e4f0f6;color:#1f5063;border-color:#a6c8d8}

@media(max-width:640px){
  .overlay{padding:0}
  .modal{border-radius:0;min-height:100vh;padding:22px 18px}
  .modal .kv{flex-direction:column;gap:2px}
  .modal .kv b{min-width:0}
}