/* Shortlist (Page Lemon internal tool template): the private hiring back office of Tidewater Labs, the company behind
   the Hiring careers template. Art direction: the careers site's chart room by day. A navy rail, cool paper with a faint
   teal chart grid, and a signal-orange route line where every hiring stage is a stop. Hanken Grotesk for headings,
   JetBrains Mono for kickers, dates and counts. kit.css (never edited here) gives layout, behaviour and accessibility. */
:root {
  --s-navy: #0B1624;
  --s-navy-2: #12233A;
  --s-orange: #FF7A1A;
  --s-orange-text: #B34700;
  --s-teal: #1F8F84;
  --s-paper: #F2F5F8;
  --s-grid: rgba(31, 143, 132, .07);
  --s-ink: #0B1624;
  --s-muted: #4F5F72;
  --s-sans: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --s-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --k-brand: var(--s-orange-text);
  --k-brand-ink: #FFFFFF;
  --k-brand-soft: #FDEBDD;
  --k-hero: var(--s-navy);
  --k-hero-ink: #EEF3F7;
  --k-gold: var(--s-orange);
  --k-bg: var(--s-paper);
  --k-surface: #FFFFFF;
  --k-surface-2: #E8EEF3;
  --k-line: rgba(11, 22, 36, .1);
  --k-line-strong: rgba(11, 22, 36, .2);
  --k-text: var(--s-ink);
  --k-muted: var(--s-muted);
  --k-faint: #5A6A7D;
  --k-font: var(--s-sans);
  --k-font-display: var(--s-sans);
  --k-font-mono: var(--s-mono);
  --pl-v-accent: var(--s-orange-text);
  --pl-v-font: var(--s-sans);
  --pl-v-radius: 4px;

  /* stage colours (the stage choice's colours: blue, teal, purple, orange, green, grey) */
  --s-st-applied: #2563B8;
  --s-st-screen: #13827A;
  --s-st-interview: #6F4BC2;
  --s-st-offer: #B34700;
  --s-st-hired: #227A3E;
  --s-st-rejected: #5F6B78;
}

@media (prefers-color-scheme: dark) {
  :root {
    --s-paper: #0B1624;
    --s-grid: rgba(43, 181, 166, .06);
    --s-ink: #EEF3F7;
    --s-muted: #A6B4C4;
    --k-brand: var(--s-orange);
    --k-brand-ink: var(--s-navy);
    --k-brand-soft: rgba(255, 122, 26, .16);
    --k-hero: #07101B;
    --k-surface: #111F31;
    --k-surface-2: #182A42;
    --k-line: rgba(238, 243, 247, .11);
    --k-line-strong: rgba(238, 243, 247, .22);
    --k-faint: #93A3B5;
    --pl-v-accent: var(--s-orange);
    --s-st-applied: #7EB0F5;
    --s-st-screen: #4FD1C2;
    --s-st-interview: #B9A0F2;
    --s-st-offer: #FF9A50;
    --s-st-hired: #6ED48C;
    --s-st-rejected: #A6B4C4;
  }
}

/* paper with a faint chart grid */
body.s-app {
  background-color: var(--k-bg);
  background-image: linear-gradient(var(--s-grid) 1px, transparent 1px), linear-gradient(90deg, var(--s-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  font-family: var(--s-sans);
}
.s-app h1, .s-app h2, .s-app h3 { font-family: var(--s-sans); letter-spacing: -.015em; }
.s-app .k-pagehead h1 { font-weight: 800; }
.s-app .k-kicker.s-kicker { font-family: var(--s-mono); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--k-brand); }
.s-kicker a { display: inline-block; padding: 4px 0; color: inherit; text-decoration: none; }
.s-kicker a::before { content: "← "; }
.s-kicker a:hover { text-decoration: underline; text-underline-offset: 3px; }
.s-num { font-family: var(--s-mono); font-weight: 700; color: var(--k-brand); font-variant-numeric: tabular-nums; }
.s-gap { margin-top: var(--k-5); }
.s-gap-b { margin-bottom: var(--k-5); }
.s-note { color: var(--k-muted); font-size: var(--k-t-foot); }

/* header: the signed-in teammate */
.s-brand-tag { font-family: var(--s-mono); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--k-brand); margin-left: 4px; }
.k-tabs-brand .s-brand-tag { color: var(--s-orange); }
.s-me { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--k-t-sub); }
.s-me .k-avatar { width: 36px; height: 36px; background: var(--s-orange); color: var(--s-navy); font-family: var(--s-mono); }
.s-me-name { display: none; }
@media (min-width: 640px) { .s-me-name { display: inline; } }
.k-top-end { gap: 12px; }

/* the route: open applications by stage, each stage a stop */
.s-route { position: relative; margin-bottom: var(--k-5); padding: var(--k-4) var(--k-5) var(--k-5); background: var(--k-surface); border: 1px solid var(--k-line); border-radius: var(--k-r-l); }
.s-route-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.s-route-head h2 { font-size: 1.0625rem; font-weight: 700; }
.s-route-head a { display: inline-flex; align-items: center; min-height: 44px; color: var(--k-brand); font-weight: 600; font-size: var(--k-t-sub); text-decoration: none; }
.s-stops { position: relative; list-style: none; margin: var(--k-3) 0 var(--k-4); padding: 0; display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; }
.s-stops::before { content: ""; position: absolute; top: 13px; left: 0; right: 0; height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--s-orange) 0 10px, transparent 10px 16px); opacity: .45; }
.s-stop { position: relative; flex: 1 0 96px; scroll-snap-align: start; display: grid; justify-items: start; gap: 4px; padding: 34px 12px 4px 0; }
.s-stop::before { content: ""; position: absolute; top: 13px; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--s-orange); }
.s-stop::after { content: ""; position: absolute; top: 5px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--k-surface); border: 4px solid var(--s-orange); box-sizing: border-box; }
.s-stop:last-child::before { right: 12px; }
.s-stop b { font-family: var(--s-mono); font-size: 1.75rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.s-stop span { font-family: var(--s-mono); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--k-muted); }
.s-metrics { padding-top: var(--k-4); border-top: 1px dashed var(--k-line-strong); }
.s-metrics > * { min-width: 5.25rem; }
.s-metrics b { font-family: var(--s-mono); font-size: 1.375rem; font-weight: 700; display: block; font-variant-numeric: tabular-nums; }
.s-metrics span { color: var(--k-muted); font-size: var(--k-t-foot); }

/* the views kit's output in Shortlist's look: mono dates and counts, square pills, an orange stop on each card */
.s-app .plv-table { font-size: .9375rem; }
.s-app .plv-table thead th { font-family: var(--s-mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; }
.s-app .plv-table time, .s-app .plv-card time { font-family: var(--s-mono); font-size: .8125rem; white-space: nowrap; }
.s-app .plv-table td a { color: var(--k-brand); text-decoration-color: color-mix(in srgb, var(--k-brand) 35%, transparent); text-underline-offset: 3px; }
.s-app .plv-table td a { overflow-wrap: anywhere; }
.s-app .plv-table td > * { min-width: 0; max-width: 100%; }
.s-app .plv-filter { white-space: nowrap; }
.s-app .plv-pill { border-radius: 3px; font-family: var(--s-mono); font-size: .75rem; }
.s-app .plv-count { font-family: var(--s-mono); }
.s-app .plv-group th { font-family: var(--s-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--k-muted); background: var(--k-surface-2); }
.k-panel > [data-pl-view="table"] .plv-scroll { border: 0; border-radius: 0 0 var(--k-r-l) var(--k-r-l); }
.k-panel > [data-pl-view="table"] .plv-tools { padding: var(--k-3) var(--k-5) 0; }
.k-panel > [data-pl-view="table"] .plv-more { margin: var(--k-3) var(--k-5) var(--k-4); }
.k-panel > [data-pl-view] > .k-empty { margin: var(--k-4) var(--k-5); }
@media (max-width: 639px) {
  .k-panel > [data-pl-view="table"] { padding: var(--k-3) var(--k-4) var(--k-2); }
  .k-panel > [data-pl-view="table"] .plv-tools { padding: 0; }
  .k-panel > [data-pl-view="table"] .plv-scroll { background: transparent; }
  .k-panel > [data-pl-view="table"] .plv-more { margin: 0 0 var(--k-3); }
}

/* board cards (Pipeline and each role): the page's own card inside the kit's */
.s-app .plv-col-head h3 { font-family: var(--s-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.s-app .plv-card { border-left: 4px solid var(--s-orange); }
/* Board columns at least 168px wide from tablets up (the kit keeps each card inside its column). */
@media (min-width: 640px) { .s-app .plv-board { grid-auto-columns: minmax(168px, 1fr); } }
.s-card { display: grid; gap: 2px; min-width: 0; }
.s-card-name { font-weight: 700; }
.s-card-name a { color: var(--k-text); text-decoration: none; }
.s-card-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.s-card-role { color: var(--k-muted); font-size: var(--k-t-foot); }
.s-card-role a { color: inherit; text-decoration: none; }
.s-card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; margin-top: 6px; color: var(--k-muted); font-size: .8125rem; }
.s-card-foot:empty { display: none; }
.s-app .plv-move { margin-top: 6px; }

/* record pages: the record's name as the page title, then panels */
.s-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.s-title .plv-title { margin: 4px 0 0; font-size: var(--k-t-1, 2rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; overflow-wrap: anywhere; }
.s-title .k-empty { padding: 0; font-size: var(--k-t-2); font-weight: 700; }
.s-sechead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: var(--k-3); }
.s-sechead h2 { font-size: 1.0625rem; font-weight: 700; }
.s-record .plv-comments:first-child, .s-record .plv-files:first-child, .s-record .plv-links:first-child { margin-top: 0; }
.s-recordgrid { align-items: start; }

/* collapsible add forms */
.s-add > summary { cursor: pointer; list-style: none; }
.s-add > summary::-webkit-details-marker { display: none; }
.s-add > summary h2::before { content: "+ "; color: var(--k-brand); }
.s-add[open] > summary h2::before { content: "− "; }
.s-add:not([open]) > summary { border-bottom: 0; }

/* feedback: the rating scale */
.s-scale-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: baseline; margin: 0; }
.s-scale-list dt { font-weight: 700; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.s-scale-list dd { margin: 0; color: var(--k-muted); font-size: var(--k-t-sub); }
.s-score { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 3px; font-family: var(--s-mono); font-weight: 700; color: #FFFFFF; }
.s-score-4 { background: var(--s-st-hired); }
.s-score-3 { background: var(--s-st-screen); }
.s-score-2 { background: var(--s-st-offer); }
.s-score-1 { background: #B42318; }
@media (prefers-color-scheme: dark) { .s-score { color: var(--s-navy); } .s-score-1 { background: #FF8A80; } }

/* callouts and empty states */
.s-callout { margin-top: var(--k-5); }
.s-app .k-callout-num b { display: inline; font-family: var(--s-mono); }
.s-app .k-empty h3 { font-family: var(--s-sans); }
.s-home { margin-bottom: 0; }
.s-app .k-empty h2 { color: var(--k-text); font-size: 1.125rem; margin-bottom: 6px; }

@media (prefers-reduced-motion: reduce) {
  .s-stops { scroll-behavior: auto; }
}
.s-formbody > .k-help { margin: 0 0 var(--k-4); }
/* "Add here" forms inside a record page panel, and the kit's link pickers and file inputs in Shortlist's look. */
.s-add-in { border-top: 1px solid var(--k-line); }
.s-add-in > summary h3 { margin: 0; font-size: var(--k-t-body, 1rem); }
.s-add-in > summary h3::before { content: "+ "; color: var(--k-brand); }
.s-add-in[open] > summary h3::before { content: "− "; }
.s-add-in:not([open]) > summary { border-bottom: 0; }

/* The rail is as tall as the window less Page Lemon's demo bar (--plx-bar, set on a demo site), so the bar never covers the rail note. */
@media (min-width: 1024px) { .k-tabs { height: calc(100vh - var(--plx-bar, 0px)); } }
.s-fb-note { margin: 0; padding: var(--k-3) var(--k-5) 0; }