/* ============================================================================
   SHELFMARK — Ashby Job Board Custom CSS
   ----------------------------------------------------------------------------
   Upload this file in Ashby → Job Board Options → Custom CSS (drag-to-upload).

   It themes the embedded careers board to the Shelfmark design system: brand
   type (Plus Jakarta Sans + IBM Plex Mono kickers), warm paper canvas with
   white cards, navy text, teal as the affirmative/clickable accent, and the
   navy "Talk to an engineer"-style primary button.

   Brand colors (links, active controls, hover) are ALSO set in the Ashby admin
   color pickers — Brand Color #1DBEAB (teal) and Brand Color (Dark) #0C2540.
   Those values are mirrored in :root below so the file is self-consistent. If
   you tweak the pickers, keep them matched here. (We use the true brand navy
   #0A2540; the picker's #0C2540 is visually identical — update the picker to
   #0A2540 if you want them byte-exact.)

   Values are hardcoded hex (not design-system tokens) on purpose: Ashby has no
   access to tokens.css. Source of truth for every value: design-system/tokens.css.
   ============================================================================ */

/* ---- Brand type. @import must be the first rule in the file. -------------- */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  /* --- Ashby-controlled variables (documented in the example CSS) --------- */

  /* Primary / clickable + active controls (links, current tab). = brand teal.
     Mirror of the admin "Brand Color" picker. */
  --colorPrimary600: #1DBEAB;

  /* Hover color for clickable controls. = brand navy.
     Mirror of the admin "Brand Color (Dark)" picker. */
  --colorPrimary900: #0A2540;

  /* Reading-column width. The default 800px is a touch tight for a careers
     page sitting inside the site shell; 940 gives the form room to breathe. */
  --widthMaxJobBoard: 940px;

  /* Radii — Shelfmark uses a softer card radius than control/button radius. */
  --borderRadiusContainer: 12px; /* --radius-card    */
  --borderRadiusControl:   8px;  /* --radius-button  */
  --borderRadiusButton:    8px;  /* --radius-button  */

  /* Brand type stack. */
  --fontFamily: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", "Helvetica", "Arial", sans-serif;

  /* White page canvas (was warm paper #FAF8F4; switched to pure white 2026-06-29). */
  --colorAppBackground: #FFFFFF;

  /* --- Shelfmark palette (our own helper vars, used throughout this file) -- */
  --sm-navy:          #0A2540;
  --sm-teal:          #1DBEAB;
  --sm-teal-deep:     #14998a; /* teal darkened for text on white (contrast) */
  --sm-amber:         #FF8A3D;
  --sm-paper:         #FAF8F4;
  --sm-paper-deep:    #F0EBE2;
  --sm-white:         #FFFFFF;

  --sm-fg:            #0A2540;
  --sm-fg-muted:      rgba(10, 37, 64, 0.62);
  --sm-fg-faint:      rgba(10, 37, 64, 0.42);
  --sm-hairline:      rgba(10, 37, 64, 0.12);
  --sm-hairline-soft: rgba(10, 37, 64, 0.08);

  --sm-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --sm-shadow-rest:  0 2px 6px -2px rgba(10, 37, 64, 0.06);
  --sm-shadow-lift:  0 16px 32px -16px rgba(10, 37, 64, 0.5);
  --sm-ease:         cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   BASE
   ============================================================================ */

body {
  font-family: var(--fontFamily);
  color: var(--sm-fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================================
   JOB BOARD — LIST VIEW
   ============================================================================ */

/* Board heading ("Open Roles" / company name). */
.ashby-job-board-heading {
  font-family: var(--fontFamily);
  font-weight: 800;
  font-size: 48px;
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--sm-navy);
}

/* The "N open roles" count — rendered as a mono kicker, a Shelfmark signature. */
.ashby-job-board-heading-count {
  font-family: var(--sm-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sm-teal-deep);
}

/* "Filters" label. */
.ashby-job-board-filters-label {
  font-family: var(--sm-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sm-fg-muted);
}

/* Filter select boxes (department / location / etc.). */
.ashby-job-board-filter {
  font-family: var(--fontFamily);
  font-size: 15px;
  color: var(--sm-navy);
  background: var(--sm-white);
  border: 1px solid var(--sm-hairline);
  border-radius: var(--borderRadiusControl);
  box-shadow: var(--sm-shadow-rest);
  transition: border-color 0.18s var(--sm-ease), box-shadow 0.18s var(--sm-ease);
}
.ashby-job-board-filter:hover {
  border-color: rgba(10, 37, 64, 0.24);
}
.ashby-job-board-filter:focus-within,
.ashby-job-board-filter:focus {
  border-color: var(--sm-teal);
  box-shadow: 0 0 0 3px rgba(29, 190, 171, 0.22);
  outline: none;
}

/* "Reset filters" — quiet teal text link. */
.ashby-job-board-reset-filters-label {
  font-family: var(--fontFamily);
  font-weight: 600;
  font-size: 14px;
  color: var(--sm-teal-deep);
  cursor: pointer;
}
.ashby-job-board-reset-filters-label:hover {
  color: var(--sm-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Department / team headings (group rows in the list) ------------------ */

.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
  font-family: var(--sm-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sm-navy);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sm-hairline);
  margin-top: 40px;
}

.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading-level {
  font-family: var(--fontFamily);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sm-fg-muted);
}

/* ---- Job posting briefs (each role row in the list) ----------------------- */

.ashby-job-posting-brief-list {
  display: flex;
  flex-direction: column;
}

/* Each role = a white card on the paper canvas. The example CSS sets a 10px
   bottom margin here; we keep rhythm via gap-like margin + card chrome. */
.ashby-job-posting-brief {
  margin-bottom: 12px;
  background: var(--sm-white);
  border: 1px solid var(--sm-hairline-soft);
  border-radius: var(--borderRadiusContainer);
  box-shadow: var(--sm-shadow-rest);
  padding: 22px 24px;
  transition: transform 0.18s var(--sm-ease), box-shadow 0.18s var(--sm-ease),
              border-color 0.18s var(--sm-ease);
}
.ashby-job-posting-brief:hover {
  transform: translateY(-2px);
  border-color: rgba(29, 190, 171, 0.55);
  box-shadow: var(--sm-shadow-lift);
}

/* Title of the role in the list. */
.ashby-job-posting-brief-title {
  font-family: var(--fontFamily);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--sm-navy);
}
.ashby-job-posting-brief:hover .ashby-job-posting-brief-title {
  color: var(--sm-teal-deep);
}

/* Location / type / commitment details under the title. */
.ashby-job-posting-brief-details {
  font-family: var(--fontFamily);
  font-size: 14px;
  color: var(--sm-fg-muted);
  margin-top: 4px;
}

/* ============================================================================
   JOB POSTING — DETAIL VIEW
   ============================================================================ */

/* Back-to-all-jobs button — quiet ghost link with a teal accent. */
.ashby-job-board-back-to-all-jobs-button {
  font-family: var(--sm-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sm-fg-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.18s var(--sm-ease);
}
.ashby-job-board-back-to-all-jobs-button:hover {
  color: var(--sm-teal-deep);
}

/* Main header block at the top of a posting. */
.ashby-job-posting-header {
  border-bottom: 1px solid var(--sm-hairline);
  padding-bottom: 24px;
}

/* The job title heading on a posting page. */
.ashby-job-posting-heading {
  font-family: var(--fontFamily);
  font-weight: 800;
  font-size: 42px;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--sm-navy);
}

/* Left pane — the job description prose. */
.ashby-job-posting-left-pane {
  font-family: var(--fontFamily);
  font-size: 16px;
  line-height: 1.65;
  color: rgba(10, 37, 64, 0.84);
}
.ashby-job-posting-left-pane h1,
.ashby-job-posting-left-pane h2,
.ashby-job-posting-left-pane h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sm-navy);
}
.ashby-job-posting-left-pane a {
  color: var(--sm-teal-deep);
  text-underline-offset: 2px;
}

/* Right pane — tabs + overview + application form. */
.ashby-job-posting-right-pane {
  font-family: var(--fontFamily);
}

/* Tab slider (Overview / Application). */
.ashby-job-posting-right-pane-tab-slider {
  font-family: var(--fontFamily);
  font-weight: 600;
  border-bottom: 1px solid var(--sm-hairline);
}

/* ============================================================================
   APPLICATION FORM
   ============================================================================ */

.ashby-application-form-container,
.ashby-survey-form-container {
  font-family: var(--fontFamily);
  color: var(--sm-fg);
}

/* Each section of the form. */
.ashby-application-form-section-container {
  border-top: 1px solid var(--sm-hairline-soft);
  padding-top: 28px;
  margin-top: 28px;
}
.ashby-application-form-section-container:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.ashby-application-form-section-header-title {
  font-family: var(--fontFamily);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--sm-navy);
}
.ashby-application-form-section-header-description {
  font-family: var(--fontFamily);
  font-size: 14px;
  line-height: 1.55;
  color: var(--sm-fg-muted);
  margin-top: 4px;
}

/* A label + input pairing. */
.ashby-application-form-field-entry {
  margin-top: 18px;
}

/* Question label + (optional) description. */
.ashby-application-form-question-title {
  font-family: var(--fontFamily);
  font-weight: 600;
  font-size: 14px;
  color: var(--sm-navy);
}
.ashby-application-form-question-description {
  font-family: var(--fontFamily);
  font-size: 13px;
  line-height: 1.5;
  color: var(--sm-fg-muted);
}

/* Inputs. Ashby's inputs don't expose dedicated classes in the documented
   list, so we target native controls inside a field entry. White surface,
   hairline border, teal focus ring. */
.ashby-application-form-field-entry input,
.ashby-application-form-field-entry textarea,
.ashby-application-form-field-entry select {
  font-family: var(--fontFamily);
  font-size: 15px;
  color: var(--sm-navy);
  background: var(--sm-white);
  border: 1px solid var(--sm-hairline);
  border-radius: var(--borderRadiusControl);
  transition: border-color 0.18s var(--sm-ease), box-shadow 0.18s var(--sm-ease);
}
.ashby-application-form-field-entry input::placeholder,
.ashby-application-form-field-entry textarea::placeholder {
  color: var(--sm-fg-faint);
}
.ashby-application-form-field-entry input:hover,
.ashby-application-form-field-entry textarea:hover,
.ashby-application-form-field-entry select:hover {
  border-color: rgba(10, 37, 64, 0.24);
}
.ashby-application-form-field-entry input:focus,
.ashby-application-form-field-entry textarea:focus,
.ashby-application-form-field-entry select:focus {
  border-color: var(--sm-teal);
  box-shadow: 0 0 0 3px rgba(29, 190, 171, 0.22);
  outline: none;
}

/* ---- Resume autofill pane ("drop a resume, we autofill") ------------------ */

.ashby-application-form-autofill-pane,
.ashby-application-form-autofill-input-root {
  background: var(--sm-paper);
  border: 1px dashed rgba(10, 37, 64, 0.22);
  border-radius: var(--borderRadiusContainer);
}
.ashby-application-form-autofill-input-root[data-state="drag"],
.ashby-application-form-autofill-input-drag-layer[data-state="active"] {
  border-color: var(--sm-teal);
  background: rgba(29, 190, 171, 0.06);
}
.ashby-application-form-autofill-input-title {
  font-family: var(--fontFamily);
  font-weight: 700;
  font-size: 15px;
  color: var(--sm-navy);
}
.ashby-application-form-autofill-input-description {
  font-family: var(--fontFamily);
  font-size: 13px;
  color: var(--sm-fg-muted);
}
/* The magic-sparkles icon → brand teal. */
.ashby-application-form-autofill-input-icon {
  color: var(--sm-teal);
  fill: var(--sm-teal);
}
/* Autofill validation alert. */
.ashby-application-form-autofill-input-form-alert[data-highlight="positive"] {
  color: var(--sm-teal-deep);
}
.ashby-application-form-autofill-input-form-alert[data-highlight="negative"] {
  color: var(--sm-amber);
}

/* ---- Texting-consent note ------------------------------------------------- */
.ashby-application-form-texting-consent-description {
  font-family: var(--fontFamily);
  font-size: 12px;
  line-height: 1.5;
  color: var(--sm-fg-faint);
}

/* ============================================================================
   SUBMIT BUTTON — Shelfmark primary CTA (navy fill, teal glow on hover)
   ============================================================================ */
.ashby-application-form-submit-button {
  font-family: var(--fontFamily) !important;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--sm-white) !important;
  background: var(--sm-navy) !important;
  border: none;
  border-radius: var(--borderRadiusButton);
  box-shadow: 0 16px 32px -16px rgba(10, 37, 64, 0.5);
  transition: transform 0.18s var(--sm-ease), box-shadow 0.18s var(--sm-ease),
              background 0.18s var(--sm-ease);
}
.ashby-application-form-submit-button:hover {
  background: #0c2c4d !important;
  transform: translateY(-1px);
  box-shadow: 0 22px 40px -16px rgba(10, 37, 64, 0.55),
              0 0 0 6px rgba(29, 190, 171, 0.25);
}
.ashby-application-form-submit-button:active {
  transform: translateY(0);
}

/* ============================================================================
   SUCCESS / FAILURE / BLOCKED states
   ============================================================================ */
.ashby-application-form-success-container {
  background: rgba(29, 190, 171, 0.08);
  border: 1px solid rgba(29, 190, 171, 0.35);
  border-radius: var(--borderRadiusContainer);
  color: var(--sm-navy);
  font-family: var(--fontFamily);
  padding: 24px;
}
.ashby-application-form-failure-container,
.ashby-application-form-blocked-application-container {
  background: rgba(255, 138, 61, 0.08);
  border: 1px solid rgba(255, 138, 61, 0.4);
  border-radius: var(--borderRadiusContainer);
  color: var(--sm-navy);
  font-family: var(--fontFamily);
  padding: 24px;
}

/* ============================================================================
   RESPONSIVE — heading sizes step down on phones.
   (Ashby's CSS sanitizer rejects clamp(), so we use fixed px + a media query.)
   ============================================================================ */
@media (max-width: 600px) {
  .ashby-job-board-heading { font-size: 32px; }
  .ashby-job-posting-heading { font-size: 28px; }
}