/* =====================================================================
   ROBIN RADAR — Ashby Job Board theme  ·  "FLIP" (Ashby-compliant build)
   ---------------------------------------------------------------------
   Stays strictly inside Ashby's rules (only .ashby-* classes + :root
   theme variables + @-rules; no body/html/:has/tag selectors, no font:
   shorthand, no clamp()) so it uploads with ZERO errors — but keeps the
   headline effect: each job becomes a near-full-screen PAGE that FLIPS
   as you scroll. The flip is bound to the job card's own class, so it's
   fully compliant.

   Paste into: Ashby → Job Board → Theme → Custom CSS.  Revert: clear it.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/* --- 1. THEME VARIABLES ------------------------------------------- */
:root{
  --colorAppBackground:#0a0b0d;
  --colorPrimary900:#5CDB45;
  --colorPrimary600:#57c93f;

  /* DARK-THEME THE POSTING / APPLICATION PAGES.
     Ashby renders those with its internal neutral palette (light surfaces +
     dark text) — the job-description card is a plain, un-classed white <div>
     we can't select directly. Overriding Ashby's neutral tokens flips those
     surfaces dark and the text light, so the detail page stops being a white
     box on black. (Verified live before shipping.) */
  --colorNeutral000:#141619;   /* card / surface  */
  --colorNeutral100:#0f1114;
  --colorNeutral200:#23262b;   /* borders / dividers */
  --colorNeutral300:#2b2f36;
  --colorNeutral400:#3a3f47;
  --colorNeutral500:#7d8699;   /* muted text */
  --colorNeutral600:#a8aebd;
  --colorNeutral700:#c2c7d1;   /* body text (was dark) */
  --colorNeutral800:#e5e6e8;
  --colorNeutral900:#ffffff;   /* headings */
  --fontFamily:'Montserrat','-apple-system','BlinkMacSystemFont','Segoe UI','Helvetica','Arial',sans-serif;
  --borderRadiusContainer:16px;
  --borderRadiusControl:999px;
  --borderRadiusButton:999px;
  --widthMaxJobBoard:1080px;

  --rr-green:#5CDB45;
  --rr-card:#141619;
  --rr-card-hover:#171a1e;
  --rr-card-edge:#23262b;
  --rr-n800:#373e4d; --rr-n700:#545b6d; --rr-n600:#7d8699; --rr-n500:#a8aebd; --rr-n400:#c2c7d1;
  --rr-white:#ffffff;
  --rr-ease:cubic-bezier(.2,.7,.2,1);

  --rr-reticle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M3 3 H7 M3 3 V7 M21 3 H17 M21 3 V7 M3 21 H7 M3 21 V17 M21 21 H17 M21 21 V17'/%3E%3Ccircle cx='12' cy='12' r='1.4' fill='%23fff' stroke='none'/%3E%3C/svg%3E");
  --rr-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a8aebd' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6 L8 10 L12 6'/%3E%3C/svg%3E");
}

/* --- 2. BOARD HEADING --------------------------------------------- */
.ashby-job-board-heading{
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--rr-white);
  font-size:40px;
}
.ashby-job-board-heading-count{ color:var(--rr-green); text-shadow:0 0 14px rgba(92,219,69,.45); }

/* --- 3. FILTERS --------------------------------------------------- */
.ashby-job-board-filters-label{
  color:var(--rr-green);
  text-transform:uppercase; letter-spacing:.10em; font-size:12px; font-weight:700;
}
.ashby-job-board-filter{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-color:var(--rr-card);
  background-image:var(--rr-chevron);
  background-repeat:no-repeat; background-position:right 13px center; background-size:15px;
  color:var(--rr-white);
  border:1px solid var(--rr-card-edge);
  border-radius:999px;
  padding-top:9px; padding-bottom:9px; padding-left:16px; padding-right:36px;
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:13px;
  cursor:pointer;
  transition:border-color .2s var(--rr-ease), box-shadow .2s var(--rr-ease);
}
.ashby-job-board-filter:hover{ border-color:var(--rr-n600); }
.ashby-job-board-filter:focus,
.ashby-job-board-filter:focus-visible{
  outline:none; border-color:var(--rr-green);
  box-shadow:0 0 0 3px rgba(92,219,69,.25), 0 0 16px rgba(92,219,69,.18);
}
.ashby-job-board-reset-filters-label{
  background:transparent; border:none; color:var(--rr-n500); font-weight:600; cursor:pointer;
  transition:color .2s;
}
.ashby-job-board-reset-filters-label:hover{ color:var(--rr-green); }

/* --- 4. DEPARTMENT / TEAM HEADINGS -------------------------------- */
.ashby-department-heading,
.ashby-job-posting-brief-department-heading{
  color:var(--rr-n500); text-transform:uppercase; letter-spacing:.16em;
  font-size:13px; font-weight:700;
}
.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading-level{ color:var(--rr-green); letter-spacing:.16em; }

/* =====================================================================
   5. THE FLIP — each job is a near-full-screen PAGE that turns as you
   scroll. Bound entirely to .ashby-job-posting-brief (a real Ashby
   class), so it's 100% compliant — no wrapper/tag selectors needed.
   ===================================================================== */
.ashby-job-posting-brief{
  position:relative;
  overflow:hidden;
  min-height:80vh;                         /* ~one job per screen        */
  display:flex; flex-direction:column; justify-content:center;
  padding-top:12vh; padding-bottom:10vh; padding-left:8vw; padding-right:8vw;
  margin-top:5vh; margin-bottom:5vh;
  background:var(--rr-card);
  border:1px solid var(--rr-card-edge);
  border-radius:18px;
  box-shadow:0 40px 90px rgba(0,0,0,.6);
  transform-origin:50% 0%;                 /* hinge at the top binder rings */
  backface-visibility:hidden;
  transition:border-color .35s var(--rr-ease), box-shadow .35s var(--rr-ease), background-color .35s var(--rr-ease);
}
.ashby-job-posting-brief:hover{
  border-color:var(--rr-n600);
  background-color:var(--rr-card-hover);
  box-shadow:0 46px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(92,219,69,.18);
}

/* Two binder rings punched through the top — the hinge the page turns on */
.ashby-job-posting-brief::before{
  content:"";
  position:absolute;
  top:4vh; left:0; right:0; height:20px;
  pointer-events:none;
  background:
    radial-gradient(circle at calc(50% - 40px) 50%, transparent 0 5px, var(--rr-n600) 5px 7px, transparent 7.5px),
    radial-gradient(circle at calc(50% + 40px) 50%, transparent 0 5px, var(--rr-n600) 5px 7px, transparent 7.5px);
}

/* "VIEW ROLE →" affordance */
.ashby-job-posting-brief::after{
  content:"VIEW ROLE \2192";
  position:absolute; left:8vw; bottom:9vh;
  font-family:'Montserrat',sans-serif; font-size:13px; font-weight:700; letter-spacing:.1em;
  color:var(--rr-green); opacity:.6;
  transition:opacity .3s var(--rr-ease), text-shadow .3s;
  pointer-events:none;
}
.ashby-job-posting-brief:hover::after{ opacity:1; text-shadow:0 0 10px rgba(92,219,69,.6); }

/* Big page title + reticle + accent */
.ashby-job-posting-brief-title{
  position:relative; margin:0;
  font-family:'Montserrat',sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.01em;
  color:var(--rr-white);
  font-size:52px; line-height:1.05;
}
.ashby-job-posting-brief-title::after{
  content:""; display:block; width:0; height:3px; margin-top:22px;
  background:var(--rr-green); box-shadow:0 0 8px rgba(92,219,69,.7);
  transition:width .45s var(--rr-ease);
}
.ashby-job-posting-brief:hover .ashby-job-posting-brief-title::after{ width:110px; }
@supports ((-webkit-mask-image:url('')) or (mask-image:url(''))){
  .ashby-job-posting-brief-title::before{
    content:""; display:inline-block; width:26px; height:26px; margin-right:12px; vertical-align:-4px;
    background-color:var(--rr-green);
    -webkit-mask:var(--rr-reticle) center / contain no-repeat;
            mask:var(--rr-reticle) center / contain no-repeat;
  }
}
.ashby-job-posting-brief-details{ color:var(--rr-n400); font-size:20px; margin-top:22px; }

/* --- 6. FLIP MOTION ----------------------------------------------- *
   Chromium: each page turns (rotateX) as it passes through the viewport,
   bound to scroll position. Elsewhere: a clean fade-in. Reduced-motion:
   static. Cards are ALWAYS visible at rest. */
@keyframes rr-fade{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
.ashby-job-posting-brief{ animation:rr-fade .6s var(--rr-ease) both; }

@supports (animation-timeline: view()){
  .ashby-job-posting-brief{
    animation:rr-flip linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
  @keyframes rr-flip{
    0%   { opacity:0; transform:perspective(1500px) rotateX(-82deg); }
    18%  { opacity:1; }
    46%,54%{ opacity:1; transform:perspective(1500px) rotateX(0deg); }
    82%  { opacity:1; }
    100% { opacity:0; transform:perspective(1500px) rotateX(80deg); }
  }
}
@media (prefers-reduced-motion: reduce){
  .ashby-job-posting-brief{ animation:none; transform:none; min-height:0; }
  .ashby-job-posting-brief::before{ display:none; }
}

/* --- 7. POSTING DETAIL PAGE --------------------------------------- */
.ashby-job-posting-heading{ color:var(--rr-white); }
.ashby-job-posting-heading::after{
  content:""; display:block; width:64px; height:3px; margin-top:16px;
  background:var(--rr-green); box-shadow:0 0 12px rgba(92,219,69,.6);
}
.ashby-job-posting-left-pane{ color:var(--rr-n400); }
.ashby-job-posting-right-pane-tab-slider{ background:var(--rr-green); }
.ashby-job-board-back-to-all-jobs-button{ color:var(--rr-green); transition:text-shadow .2s; }
.ashby-job-board-back-to-all-jobs-button:hover{ text-shadow:0 0 10px rgba(92,219,69,.5); }

/* --- 8. APPLICATION FORM (on-brand touches) ----------------------- */
.ashby-application-form-submit-button{
  background:var(--rr-green); color:#06210a; font-weight:700; border-radius:999px;
}
.ashby-application-form-section-header-title{ color:var(--rr-white); }

/* --- 9. RESPONSIVE ------------------------------------------------ */
@media (max-width:640px){
  .ashby-job-board-heading{ font-size:28px; }
  .ashby-job-posting-brief{ min-height:70vh; padding-left:24px; padding-right:24px; }
  .ashby-job-posting-brief-title{ font-size:32px; }
  .ashby-job-posting-brief-details{ font-size:16px; }
  .ashby-job-posting-brief::after{ left:24px; }
}

/* end of file */