/* Slate's product layer. The original prototype remains intact in console.css;
   this file turns it into the working recruiting product. */

/* A page shell should paint before its JavaScript and data arrive. These
   placeholders describe shape only: no zero counts, fake names, or empty
   records that could be mistaken for real recruiting data. All three browser
   screens use the same quiet sweep, and reduced-motion readers get a static
   surface with the same geometry. */
@keyframes slate-skeleton-sweep {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@keyframes slate-loading-spin {
  to { transform: rotate(360deg); }
}

.slate-loading {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(190px, 248px) minmax(0, 1fr);
  background: var(--page);
  color: var(--ink2);
}
.screen-console [data-console-root] > .slate-loading { grid-column: 1 / -1; }
.slate-loading--single { display: block; }
.slate-loading__rail {
  min-height: 100vh;
  padding: 28px 20px;
  background: var(--rail-bg);
  border-right: 1px solid var(--rail-divider);
}
.slate-loading__main {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 42px 44px 80px;
}
.slate-loading__status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  color: var(--ink2);
  font-size: 13px;
}
.slate-loading__spinner {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 2px solid var(--hair);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: slate-loading-spin 800ms linear infinite;
}

/* A role switch happens inside Rich's already-drawn workspace. Keep that
   canvas visually quiet: one centred progress mark, sized to be legible across
   the light and dark palettes and coloured only by the existing theme tokens. */
.slate-role-loading {
  flex: 1 1 0%;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--ink2);
}
.slate-role-loading__status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--ink2);
  font-family: var(--num);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.slate-role-loading__spinner {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
}
.slate-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.slate-skeleton-card {
  min-height: 176px;
  padding: 20px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--card);
}
.slate-skeleton-line {
  display: block;
  width: 100%;
  height: 11px;
  margin: 0 0 13px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sunk) 25%, var(--hair) 45%, var(--sunk) 65%);
  background-size: 300% 100%;
  animation: slate-skeleton-sweep 1.45s ease-in-out infinite;
}
.slate-skeleton-line--title { width: 48%; height: 17px; margin-bottom: 24px; }
.slate-skeleton-line--medium { width: 72%; }
.slate-skeleton-line--short { width: 38%; }
.slate-loading__rail .slate-skeleton-line {
  background: linear-gradient(90deg, var(--rail-hover) 25%, var(--rail-divider) 45%, var(--rail-hover) 65%);
  background-size: 300% 100%;
}
.slate-noscript {
  position: fixed;
  inset: 18px 18px auto;
  z-index: 1000;
  max-width: 620px;
  margin: 0 auto;
  padding: 14px 16px;
  border: 1px solid var(--amber);
  border-radius: var(--r-sm);
  background: var(--amber-wash);
  color: var(--amber);
  font: 14px/1.5 ui-sans-serif, system-ui, sans-serif;
}
.slate-empty {
  width: min(520px, 100%);
  padding: 28px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--card);
}
.slate-empty__mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--sunk);
  color: var(--ink2);
  font-family: var(--num);
}
.slate-empty h1 { margin: 0; color: var(--ink); font-size: 22px; font-weight: 600; }
.slate-empty p { margin: 9px 0 0; color: var(--ink2); font-size: 14px; line-height: 1.55; }

@media (max-width: 760px) {
  .slate-loading { grid-template-columns: 1fr; }
  .slate-loading__rail { display: none; }
  .slate-loading__main { padding: 28px 18px 60px; }
  .slate-skeleton-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .slate-loading__spinner,
  .slate-skeleton-line { animation: none !important; }
}

:root {
  --page: #f4f1e9;
  --card: #fffdf8;
  --sunk: #e9e4d8;
  --hair: #ded8ca;
  --line: #9b9588;
  --ink: #17211d;
  --ink2: #626b66;
  --accent: #e85d3f;
  --accent-wash: #fbe5df;
  --on-accent: #26130f;
  --amber: #934b0d;
  --amber-wash: #faead5;
  --moss: #1d7254;
  --moss-wash: #ddefe5;
  --plum: #76518a;
  --plum-wash: #eee4f2;
  --teal: #18756f;
  --teal-wash: #dff1ee;
  --rail-bg: #15251f;
  --rail-hover: #21352d;
  --rail-selected: #f4f1e8;
  --rail-selected-ink: #17211d;
  --rail-selected-muted: #5d6762;
  --rail-divider: #2b4138;
  --rail-ink: #f4f1e8;
  --rail-muted: #a9b9b0;
  --rail-accent: #ff8266;
  --rail-accent-wash: #3c2b25;
  --r: 14px;
  --r-sm: 9px;
  --ambient-art:
    radial-gradient(circle at 82% 4%, rgba(232, 93, 63, .13), transparent 23rem),
    radial-gradient(circle at 54% 104%, rgba(24, 117, 111, .09), transparent 32rem);
  --ambient-motif:
    radial-gradient(circle at 68% 32%, color-mix(in srgb, var(--accent) 54%, transparent) 0 10%, transparent 10.8%),
    radial-gradient(circle at 68% 32%, transparent 0 26%, color-mix(in srgb, var(--accent) 34%, transparent) 26.5% 28%, transparent 28.6%),
    linear-gradient(132deg, transparent 36%, color-mix(in srgb, var(--teal) 28%, transparent) 36.5% 62%, transparent 62.5%);
}

[data-theme="dark"] {
  --page: #111713;
  --card: #19211c;
  --sunk: #0d130f;
  --hair: #2d3931;
  --line: #718077;
  --ink: #f2f1e9;
  --ink2: #aeb8b0;
  --accent: #ff8164;
  --accent-wash: #3b211b;
  --on-accent: #17110f;
  --amber: #f0b66a;
  --amber-wash: #332719;
  --moss: #79cba3;
  --moss-wash: #183127;
  --plum: #cf9de4;
  --plum-wash: #2d2134;
  --teal: #70cfc5;
  --teal-wash: #17312e;
  --rail-bg: #0c1511;
  --rail-hover: #18261f;
  --rail-selected: #3b211b;
  --rail-selected-ink: #fff3ef;
  --rail-selected-muted: #d9aaa0;
  --rail-divider: #25342c;
  --rail-ink: #f4f1e8;
  --rail-muted: #a9b9b0;
  --rail-accent: #ff8164;
  --rail-accent-wash: #3b211b;
}

/* Alternative palettes keep Slate's hierarchy and semantic colours intact,
   while changing the atmosphere of the workspace. The attribute is the only
   source of truth, so the same saved choice follows a person from Console to
   Deciding and through the sign-in screen without a second preference. */
[data-theme="ocean"] {
  color-scheme: light;
  --page: #eef4f6;
  --card: #fbfdfe;
  --sunk: #dfeaec;
  --hair: #cfdee2;
  --line: #7f969d;
  --ink: #15262d;
  --ink2: #5a6d74;
  --accent: #197a94;
  --accent-wash: #d8edf3;
  --on-accent: #f8fdff;
  --amber: #98600d;
  --amber-wash: #f8ead0;
  --moss: #27745d;
  --moss-wash: #dceee7;
  --plum: #6c5792;
  --plum-wash: #ebe6f4;
  --teal: #167c78;
  --teal-wash: #d7efed;
  --rail-bg: #12303a;
  --rail-hover: #1c414d;
  --rail-selected: #e8f4f6;
  --rail-selected-ink: #14323a;
  --rail-selected-muted: #59747a;
  --rail-divider: #28505b;
  --rail-ink: #edf8fa;
  --rail-muted: #a8c2c8;
  --rail-accent: #73d2e7;
  --rail-accent-wash: #1d4a56;
}

[data-theme="lavender"] {
  color-scheme: light;
  --page: #f4f0f7;
  --card: #fefcff;
  --sunk: #e9e1ee;
  --hair: #ddd2e4;
  --line: #9a8ca3;
  --ink: #261d2d;
  --ink2: #706477;
  --accent: #8754a5;
  --accent-wash: #eee0f5;
  --on-accent: #fffaff;
  --amber: #94600d;
  --amber-wash: #f8ead1;
  --moss: #34725a;
  --moss-wash: #deede6;
  --plum: #7d4d9b;
  --plum-wash: #eee0f5;
  --teal: #28766f;
  --teal-wash: #dbefec;
  --rail-bg: #302039;
  --rail-hover: #422b4d;
  --rail-selected: #f1e6f5;
  --rail-selected-ink: #32203b;
  --rail-selected-muted: #76647d;
  --rail-divider: #50355b;
  --rail-ink: #fbf4ff;
  --rail-muted: #c8b4d0;
  --rail-accent: #d9a9ef;
  --rail-accent-wash: #51315f;
}

[data-theme="forest"] {
  color-scheme: dark;
  --page: #101b17;
  --card: #182620;
  --sunk: #0b1511;
  --hair: #2a4036;
  --line: #6d887b;
  --ink: #eff5ed;
  --ink2: #acc0b4;
  --accent: #a9ce79;
  --accent-wash: #293a20;
  --on-accent: #14200f;
  --amber: #efbd6f;
  --amber-wash: #362a18;
  --moss: #8bd0a8;
  --moss-wash: #1b3527;
  --plum: #d0a7dd;
  --plum-wash: #33263a;
  --teal: #78cec2;
  --teal-wash: #193734;
  --rail-bg: #09120e;
  --rail-hover: #14231b;
  --rail-selected: #293a20;
  --rail-selected-ink: #f1f8e9;
  --rail-selected-muted: #bfd09f;
  --rail-divider: #23372d;
  --rail-ink: #eef5ec;
  --rail-muted: #9fb4a7;
  --rail-accent: #b3dc7f;
  --rail-accent-wash: #293a20;
}

[data-theme="canyon"] {
  color-scheme: light;
  --page: #f7efe3;
  --card: #fffaf2;
  --sunk: #eadcc8;
  --hair: #decdb5;
  --line: #988570;
  --ink: #2d2118;
  --ink2: #746455;
  --accent: #b6532f;
  --accent-wash: #f3ddce;
  --on-accent: #fffaf2;
  --amber: #8a590d;
  --amber-wash: #f3e2bd;
  --moss: #557044;
  --moss-wash: #e4ead8;
  --plum: #7f536f;
  --plum-wash: #efe0e9;
  --teal: #38736d;
  --teal-wash: #dcebe7;
  --rail-bg: #42281c;
  --rail-hover: #573528;
  --rail-selected: #f5e4d2;
  --rail-selected-ink: #3b2419;
  --rail-selected-muted: #826858;
  --rail-divider: #664235;
  --rail-ink: #fff5e9;
  --rail-muted: #d2b9a7;
  --rail-accent: #f0a06e;
  --rail-accent-wash: #613b2c;
  --ambient-art:
    radial-gradient(ellipse at 88% 4%, rgba(190, 94, 44, .18), transparent 28rem),
    linear-gradient(155deg, transparent 56%, rgba(151, 99, 63, .08) 56.2%, transparent 72%);
}

/* Newsprint is intentionally not another green workspace. Its paper, ink and
   rule-led character make dense review pages feel closer to an editorial desk
   than a dashboard; Electric goes the other way with crisp cobalt geometry. */
[data-theme="ink"] {
  color-scheme: light;
  --page: #eeeae0;
  --card: #fffdf7;
  --sunk: #ded8ca;
  --hair: #c9c1b1;
  --line: #726b60;
  --ink: #191815;
  --ink2: #625f58;
  --accent: #ba382f;
  --accent-wash: #f2d9d3;
  --on-accent: #fffaf2;
  --amber: #8b5a0a;
  --amber-wash: #f2e4c7;
  --moss: #39684e;
  --moss-wash: #dce8df;
  --plum: #694966;
  --plum-wash: #eadfe8;
  --teal: #326b6e;
  --teal-wash: #d9e8e7;
  --rail-bg: #1d1c19;
  --rail-hover: #302e29;
  --rail-selected: #f5efe2;
  --rail-selected-ink: #191815;
  --rail-selected-muted: #625f58;
  --rail-divider: #45423b;
  --rail-ink: #f7f2e7;
  --rail-muted: #bdb5a6;
  --rail-accent: #ef7569;
  --rail-accent-wash: #4d2925;
  --r: 3px;
  --r-sm: 2px;
  --ambient-art:
    repeating-linear-gradient(0deg, rgba(25, 24, 21, .035) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, transparent 73%, rgba(186, 56, 47, .08) 73.15%, transparent 73.3%);
  --ambient-motif:
    repeating-linear-gradient(0deg, transparent 0 16px, rgba(25, 24, 21, .22) 16px 17px),
    linear-gradient(90deg, transparent 0 72%, rgba(186, 56, 47, .42) 72% 73.5%, transparent 73.5%);
}

[data-theme="cobalt"] {
  color-scheme: dark;
  --page: #0b1022;
  --card: #121a34;
  --sunk: #080d1d;
  --hair: #25335b;
  --line: #7186c2;
  --ink: #f5f7ff;
  --ink2: #aeb9db;
  --accent: #7da1ff;
  --accent-wash: #1f336f;
  --on-accent: #07102d;
  --amber: #ffc46b;
  --amber-wash: #392b16;
  --moss: #69d6b1;
  --moss-wash: #14372f;
  --plum: #d4a3ff;
  --plum-wash: #30214a;
  --teal: #5ee2e6;
  --teal-wash: #12373e;
  --rail-bg: #060a16;
  --rail-hover: #111a35;
  --rail-selected: #203a83;
  --rail-selected-ink: #ffffff;
  --rail-selected-muted: #c4d2ff;
  --rail-divider: #1d294c;
  --rail-ink: #f4f6ff;
  --rail-muted: #9eabd0;
  --rail-accent: #8cafff;
  --rail-accent-wash: #1f3371;
  --r: 18px;
  --r-sm: 11px;
  --ambient-art:
    radial-gradient(circle at 82% 12%, rgba(86, 129, 255, .26), transparent 22rem),
    linear-gradient(135deg, transparent 68%, rgba(94, 226, 230, .08) 68.2%, transparent 81%);
  --ambient-motif:
    conic-gradient(from 35deg at 62% 42%, transparent 0 12%, rgba(125, 161, 255, .3) 12% 19%, transparent 19% 48%, rgba(94, 226, 230, .18) 48% 56%, transparent 56%),
    radial-gradient(circle at 62% 42%, transparent 0 24%, rgba(125, 161, 255, .3) 24.5% 25.5%, transparent 26%);
}

[data-theme="ocean"] { --ambient-art: radial-gradient(circle at 88% 7%, rgba(25, 122, 148, .18), transparent 26rem), linear-gradient(165deg, transparent 54%, rgba(63, 153, 171, .08) 54.2%, transparent 75%); }
[data-theme="lavender"] { --ambient-art: radial-gradient(circle at 86% 4%, rgba(135, 84, 165, .17), transparent 27rem), radial-gradient(circle at 48% 105%, rgba(198, 142, 183, .11), transparent 30rem); }
[data-theme="forest"] { --ambient-art: radial-gradient(ellipse at 84% 0%, rgba(169, 206, 121, .13), transparent 28rem), linear-gradient(145deg, transparent 64%, rgba(83, 126, 80, .09) 64.2%, transparent 79%); }
[data-theme="dark"] { --ambient-art: radial-gradient(circle at 84% 4%, rgba(255, 129, 100, .12), transparent 25rem), radial-gradient(circle at 55% 110%, rgba(112, 207, 197, .08), transparent 34rem); }

/* Generated editorial artwork, kept as real project assets rather than soft
   CSS blobs. Each source is 1672 x 941 and served as a high-quality WebP;
   the quiet centre is deliberate so interface copy remains readable. */
:root,
[data-theme="light"] {
  --ambient-image: url('/art/ambient-linen.webp');
  --ambient-image-opacity: .46;
  --ambient-image-filter: saturate(.94) contrast(1.02);
}
[data-theme="canyon"],
[data-theme="ink"] {
  --ambient-image: url('/art/ambient-linen.webp');
  --ambient-image-opacity: .52;
  --ambient-image-filter: saturate(1.08) contrast(1.04);
}
[data-theme="ocean"],
[data-theme="lavender"] {
  --ambient-image: url('/art/ambient-mineral.webp');
  --ambient-image-opacity: .43;
  --ambient-image-filter: saturate(.86) contrast(1.03);
}
[data-theme="forest"] {
  --ambient-image: url('/art/ambient-mineral.webp');
  --ambient-image-opacity: .26;
  --ambient-image-filter: brightness(.42) saturate(.72) hue-rotate(42deg);
}
[data-theme="dark"],
[data-theme="cobalt"] {
  --ambient-image: url('/art/ambient-midnight.webp');
  --ambient-image-opacity: .58;
  --ambient-image-filter: saturate(1.04) contrast(1.08);
}

/* Slate ranges: still native controls, with the browser's keyboard and
   accessibility semantics, but no browser-default chrome. `console.js`
   supplies --range-progress from min/value/max so WebKit can paint the filled
   side as honestly as Firefox's native progress pseudo-element. */
.screen-console input[type="range"] {
  --range-progress: 0%;
  --range-accent: currentColor;
  -webkit-appearance: none;
  appearance: none;
  height: 26px;
  margin-inline: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}
.screen-console input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border: 1px solid color-mix(in srgb, var(--range-accent) 18%, var(--hair));
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--range-accent) 0 var(--range-progress),
    var(--sunk) var(--range-progress) 100%);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent);
}
.screen-console input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border: 3px solid var(--card);
  border-radius: 50%;
  background: var(--range-accent);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 28%, transparent),
    0 0 0 1px color-mix(in srgb, var(--range-accent) 34%, transparent);
}
.screen-console input[type="range"]::-moz-range-track {
  height: 6px;
  border: 1px solid color-mix(in srgb, var(--range-accent) 18%, var(--hair));
  border-radius: 999px;
  background: var(--sunk);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent);
}
.screen-console input[type="range"]::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--range-accent);
}
.screen-console input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid var(--card);
  border-radius: 50%;
  background: var(--range-accent);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 28%, transparent),
    0 0 0 1px color-mix(in srgb, var(--range-accent) 34%, transparent);
}
.screen-console input[type="range"]:focus-visible { outline: none; }
.screen-console input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 28%, transparent),
    0 0 0 4px color-mix(in srgb, var(--range-accent) 24%, transparent);
}
.screen-console input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 28%, transparent),
    0 0 0 4px color-mix(in srgb, var(--range-accent) 24%, transparent);
}
.screen-console input[type="range"]:disabled {
  cursor: not-allowed;
  opacity: .48;
}
.screen-console textarea[data-brief][data-file-over="true"] {
  border-color: var(--accent) !important;
  background: var(--accent-wash) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.screen-console .shell { background: var(--page); }

/* Product shell: a calm, dark project rail beside a generous work surface. */
.screen-console [data-console-root] {
  grid-template-columns: 272px minmax(0, 1fr);
  background:
    radial-gradient(circle at 75% -10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 30rem),
    var(--page);
}

/* Ambient art is a removable photographic layer. Keeping it off the cards
   preserves contrast; keeping it on one pseudo-element gives the switch one
   unambiguous thing to remove. */
[data-ambient="on"] .screen-console [data-console-root],
[data-ambient="on"] .screen-console [data-deciding-root],
[data-ambient="on"] .screen-signin {
  background-color: var(--page) !important;
  background-image: none !important;
}

/* The backdrop above changes the atmosphere; this is the visible artwork.
   It sits inside the work surface (not over the rail), and content is lifted
   above it. Turning Ambient artwork off removes the pseudo-element entirely,
   so the switch has an immediate, unmistakable effect. */
[data-ambient="on"] .screen-console [data-console-root] > main,
[data-ambient="on"] .screen-console [data-deciding-root] > div:first-of-type {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
[data-ambient="on"] .screen-console [data-console-root] > main::before,
[data-ambient="on"] .screen-console [data-deciding-root] > div:first-of-type::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image:
    linear-gradient(90deg,
      color-mix(in srgb, var(--page) 76%, transparent) 0%,
      color-mix(in srgb, var(--page) 32%, transparent) 42%,
      color-mix(in srgb, var(--page) 12%, transparent) 100%),
    var(--ambient-image);
  background-size: cover;
  background-position: center;
  opacity: var(--ambient-image-opacity);
  filter: var(--ambient-image-filter);
  pointer-events: none;
}
[data-ambient="on"] .screen-console [data-console-root] > main > *,
[data-ambient="on"] .screen-console [data-deciding-root] > div:first-of-type > * {
  position: relative;
  z-index: 1;
}
[data-ambient="on"] .screen-console [data-console-root] > main > .console-page {
  background: transparent !important;
}
[data-layout="gallery"][data-ambient="on"] .screen-console [data-console-root] > main::before,
[data-layout="gallery"][data-ambient="on"] .screen-console [data-deciding-root] > div:first-of-type::before {
  background-position: left center;
}

/* The normal rail already exposes every role as a button. Studio replaces
   that tall list with one compact native picker inside its masthead. */
.studio-role-picker { display: none; }

/* Studio is a two-level masthead, not the entire left rail squeezed sideways.
   Identity and the current role occupy the first line; destination tabs get a
   separate line underneath. Below 1001px the normal responsive shell takes
   over, because a desktop masthead cannot become a usable phone navbar merely
   by making every tab narrower. */
@media (min-width: 1001px) {
  [data-layout="studio"] .screen-console [data-console-root] {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 128px minmax(0, 1fr) !important;
  }
  [data-layout="studio"] .screen-console [data-console-root] > .sidebar {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 184px minmax(0, 1fr) minmax(340px, .55fr);
    grid-template-rows: 46px 54px;
    align-items: stretch;
    column-gap: 16px;
    row-gap: 8px;
    overflow: hidden;
    padding: 10px 16px 11px;
    border-right: 0;
    border-bottom: 1px solid var(--rail-divider);
    box-shadow: 0 12px 38px color-mix(in srgb, var(--ink) 10%, transparent);
  }
  [data-layout="studio"] .screen-console .sidebar > .rail-block:first-child {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    padding: 4px 16px 4px 4px !important;
    border-right: 1px solid var(--rail-divider);
  }
  [data-layout="studio"] .screen-console .sidebar > .rail-roles {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    padding: 0 !important;
    border: 0 !important;
  }
  [data-layout="studio"] .screen-console .sidebar > .rail-roles > div:first-child {
    flex: 0 0 66px !important;
    padding: 0 !important;
  }
  [data-layout="studio"] .screen-console .rail-roles-list {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    display: grid !important;
    grid-template-columns: minmax(90px, 150px) minmax(180px, 520px);
    align-items: center;
    justify-content: start;
    gap: 10px !important;
    overflow: hidden;
  }
  /* The list is flat in the live DOM: client headings and role buttons are
     siblings. The earlier rule hid the unused rows without !important, then
     the very next rule forced every role back to display:flex !important.
     Three roles therefore formed a 196px column inside a 46px masthead and
     overflow:hidden showed a random clipped slice of it. Marking the current
     role's client and pairing it with a compact picker keeps the context and
     the role-switching path inside the masthead. */
  [data-layout="studio"] .screen-console .rail-roles-list .eyebrow,
  [data-layout="studio"] .screen-console .rail-roles-list .rail-role {
    display: none !important;
  }
  [data-layout="studio"] .screen-console .rail-roles-list .eyebrow[data-current-client="true"] {
    display: flex !important;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    padding: 0 !important;
    overflow: hidden;
  }
  [data-layout="studio"] .screen-console .rail-roles-list .studio-role-picker {
    display: block !important;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: 34px;
    min-width: 0;
    padding: 5px 32px 5px 12px;
    border: 1px solid var(--accent);
    border-radius: var(--r-sm);
    background: var(--accent-wash);
    color: var(--ink);
    font: 13px/1.2 var(--ui);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  [data-layout="studio"] .screen-console .sidebar > .rail-block:nth-child(3),
  [data-layout="studio"] .screen-console .sidebar > .rail-block:nth-child(4) {
    min-width: 0;
    display: grid;
    grid-template-rows: 13px minmax(0, 1fr);
    gap: 4px;
    padding: 0 !important;
    border: 0 !important;
  }
  [data-layout="studio"] .screen-console .sidebar > .rail-block:nth-child(3) {
    grid-column: 1 / 3;
    grid-row: 2;
  }
  [data-layout="studio"] .screen-console .sidebar > .rail-block:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
  }
  [data-layout="studio"] .screen-console .sidebar > .rail-block:nth-child(3) > .rail-eyebrow,
  [data-layout="studio"] .screen-console .sidebar > .rail-block:nth-child(4) > .rail-eyebrow {
    padding: 0 5px;
    font-size: 8.5px;
    line-height: 13px;
  }
  [data-layout="studio"] .screen-console .rail-row-sub { display: none; }
  [data-layout="studio"] .screen-console .sidebar > .rail-block:nth-child(3) > div:last-child,
  [data-layout="studio"] .screen-console .sidebar > .rail-block:nth-child(4) > div:last-child {
    height: 100%;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(78px, 1fr));
    align-items: stretch;
    gap: 4px !important;
  }
  [data-layout="studio"] .screen-console .sidebar > .rail-block:nth-child(4) > div:last-child {
    grid-template-columns: repeat(3, minmax(74px, 1fr));
  }
  [data-layout="studio"] .screen-console .sidebar > .rail-block:nth-child(3) > div:last-child > div,
  [data-layout="studio"] .screen-console .sidebar > .rail-block:nth-child(4) > div:last-child > div {
    min-width: 0;
    display: flex !important;
  }
  [data-layout="studio"] .screen-console .sidebar > .rail-block:nth-child(3) > div:last-child > div > div:first-child,
  [data-layout="studio"] .screen-console .sidebar > .rail-block:nth-child(4) > div:last-child > div > div:first-child {
    display: none !important;
  }
  [data-layout="studio"] .screen-console .sidebar .rail-row {
    width: 100%;
    min-width: 0;
    min-height: 37px;
    justify-content: center;
    gap: 6px;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 7px;
  }
  [data-layout="studio"] .screen-console .sidebar .rail-row:hover {
    background: var(--rail-hover) !important;
  }
  [data-layout="studio"] .screen-console .sidebar .rail-row[aria-current="page"] {
    border-color: var(--rail-divider);
    background: var(--rail-selected) !important;
    color: var(--rail-selected-ink) !important;
  }
  [data-layout="studio"] .screen-console .sidebar .rail-row-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  [data-layout="studio"] .screen-console .sidebar > .rail-block:nth-child(4) .rail-row-label {
    font-size: 12px;
  }
  [data-layout="studio"] .screen-console .sidebar .pill {
    flex: 0 0 auto;
    min-width: 20px;
    padding: 1px 4px;
    font-size: 12px;
  }
  [data-layout="studio"] .screen-console .sidebar > .rail-block:nth-child(5) { display: none; }
  [data-layout="studio"] .screen-console [data-console-root] > main {
    grid-column: 1;
    grid-row: 2;
  }
  [data-layout="studio"] .screen-console main > .console-page {
    max-width: none;
    padding-top: 64px !important;
  }
  [data-layout="studio"] .screen-console [data-console-root] > main [data-settings] {
    top: 16px !important;
    right: 24px !important;
    z-index: 210 !important;
  }
}

/* Gallery is a real alternate composition: the project rail swaps sides and
   the work surface takes the visual lead. Long role names still have a roomy
   rail, but it no longer anchors every theme to the same left-heavy silhouette. */
[data-layout="gallery"] .screen-console [data-console-root] {
  grid-template-columns: minmax(0, 1fr) 292px !important;
}
[data-layout="gallery"] .screen-console [data-console-root] > .sidebar {
  grid-column: 2;
  grid-row: 1;
  border-right: 0;
  border-left: 1px solid var(--rail-divider);
  box-shadow: -12px 0 42px color-mix(in srgb, var(--ink) 9%, transparent);
}
[data-layout="gallery"] .screen-console [data-console-root] > main {
  grid-column: 1;
  grid-row: 1;
}
[data-layout="gallery"] .screen-console main > .console-page {
  max-width: none;
  padding-left: clamp(26px, 4vw, 76px) !important;
  padding-right: clamp(26px, 4vw, 76px) !important;
}
[data-layout="gallery"] .screen-console .card {
  box-shadow: 0 20px 60px color-mix(in srgb, var(--ink) 10%, transparent);
}
[data-layout="gallery"] .screen-console [data-console-root] > main [data-settings] {
  right: 318px !important;
}

@media (min-width: 1001px) {
  [data-layout="studio"] .screen-console [data-deciding-root] {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 112px minmax(0, 1fr) !important;
  }
  [data-layout="studio"] .screen-console [data-deciding-root] > aside {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
    gap: 14px;
    overflow: hidden !important;
    padding: 12px 16px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--hair);
  }
  [data-layout="studio"] .screen-console [data-deciding-root] > aside > div:first-child {
    flex: 0 0 190px !important;
    align-self: center;
    padding: 0 !important;
  }
  [data-layout="studio"] .screen-console [data-deciding-root] > aside > div:nth-child(2) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 0 0 14px !important;
    border: 0 !important;
    border-left: 1px solid var(--hair) !important;
  }
  [data-layout="studio"] .screen-console [data-deciding-root] [data-scroll-id="roles"] {
    overflow: hidden !important;
  }
  [data-layout="studio"] .screen-console [data-deciding-root] [data-scroll-id="roles"] > div { display: contents; }
  [data-layout="studio"] .screen-console [data-deciding-root] [data-scroll-id="roles"] > div > div:first-child,
  [data-layout="studio"] .screen-console [data-deciding-root] [data-role-row]:not(:has(button[aria-current="true"])),
  [data-layout="studio"] .screen-console [data-deciding-root] > aside > div:nth-child(n+3) { display: none; }
  [data-layout="studio"] .screen-console [data-deciding-root] > div:first-of-type {
    grid-column: 1;
    grid-row: 2;
  }
}
[data-layout="gallery"] .screen-console [data-deciding-root] {
  grid-template-columns: minmax(0, 1fr) 276px !important;
}
[data-layout="gallery"] .screen-console [data-deciding-root] > aside {
  grid-column: 2;
  grid-row: 1;
  border-right: 0 !important;
  border-left: 1px solid var(--hair);
}
[data-layout="gallery"] .screen-console [data-deciding-root] > div:first-of-type {
  grid-column: 1;
  grid-row: 1;
}

.screen-console .sidebar {
  --card: var(--rail-bg);
  --sunk: var(--rail-hover);
  --hair: var(--rail-divider);
  --line: #6d8278;
  --ink: var(--rail-ink);
  --ink2: var(--rail-muted);
  --accent: var(--rail-accent);
  --accent-wash: var(--rail-accent-wash);
  --amber: #f2b65f;
  --amber-wash: #403522;
  --moss: #77d3aa;
  --moss-wash: #203c31;
  --plum: #cf9ce7;
  --plum-wash: #352a3b;
  --teal: #77d8cf;
  --teal-wash: #203c39;
  width: auto;
  border-right: 0;
  background: var(--rail-bg);
  color: var(--ink);
  box-shadow: 8px 0 32px rgba(23, 33, 29, .08);
}

/* The Appearance control is a set of miniature palette cards. Colour swatches
   make the choices scannable; the label and aria-pressed state keep colour
   from being the only way a choice is communicated. */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}
.theme-option {
  min-width: 0;
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--page);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
.theme-option:hover { border-color: var(--line); transform: translateY(-1px); }
.theme-option[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-wash);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent);
  font-weight: 600;
}
.theme-swatch {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 8px;
  background: var(--swatch-page);
}
.theme-swatch::before { content: ""; background: var(--swatch-rail); }
.theme-swatch::after {
  content: "";
  width: 8px;
  height: 8px;
  place-self: center;
  border-radius: 50%;
  background: var(--swatch-accent);
}
.theme-option[data-theme-choice="light"] .theme-swatch { --swatch-page: #f4f1e9; --swatch-rail: #15251f; --swatch-accent: #e85d3f; }
.theme-option[data-theme-choice="dark"] .theme-swatch { --swatch-page: #111713; --swatch-rail: #0c1511; --swatch-accent: #ff8164; }
.theme-option[data-theme-choice="ocean"] .theme-swatch { --swatch-page: #eef4f6; --swatch-rail: #12303a; --swatch-accent: #197a94; }
.theme-option[data-theme-choice="lavender"] .theme-swatch { --swatch-page: #f4f0f7; --swatch-rail: #302039; --swatch-accent: #8754a5; }
.theme-option[data-theme-choice="forest"] .theme-swatch { --swatch-page: #101b17; --swatch-rail: #09120e; --swatch-accent: #a9ce79; }
.theme-option[data-theme-choice="canyon"] .theme-swatch { --swatch-page: #f7efe3; --swatch-rail: #42281c; --swatch-accent: #b6532f; }
.theme-option[data-theme-choice="ink"] .theme-swatch { --swatch-page: #eeeae0; --swatch-rail: #1d1c19; --swatch-accent: #ba382f; }
.theme-option[data-theme-choice="cobalt"] .theme-swatch { --swatch-page: #0b1022; --swatch-rail: #060a16; --swatch-accent: #7da1ff; }

.appearance-open { width: min(430px, calc(100vw - 28px)) !important; max-height: min(760px, calc(100vh - 80px)); overflow-y: auto; }
.appearance-entry,
.appearance-back,
.layout-option {
  width: 100%; border: 1px solid var(--hair); border-radius: 10px;
  background: var(--page); color: var(--ink); font: inherit; text-align: left;
}
.appearance-entry { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 12px; }
.appearance-entry strong { display: block; font-size: 13.5px; }
.appearance-entry small { display: block; margin-top: 2px; color: var(--ink2); font-size: 11.5px; }
.appearance-back { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; background: transparent; }
.layout-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 8px; }
.layout-option { min-width: 0; padding: 8px; font-size: 12px; }
.layout-option[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-wash); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; }
.layout-preview { height: 40px; display: grid; gap: 3px; margin-bottom: 7px; padding: 4px; border: 1px solid var(--hair); border-radius: 6px; background: var(--card); }
.layout-preview::before,
.layout-preview::after { content: ""; border-radius: 3px; background: var(--sunk); }
.layout-option[data-layout-choice="balanced"] .layout-preview { grid-template-columns: 28% 1fr; }
.layout-option[data-layout-choice="studio"] .layout-preview { grid-template-rows: 31% 1fr; }
.layout-option[data-layout-choice="gallery"] .layout-preview { grid-template-columns: 1fr 34%; }
[data-theme="ink"] .screen-console h1,
[data-theme="ink"] .screen-console h2 { font-family: Georgia, 'Times New Roman', serif !important; letter-spacing: -.02em; }

.screen-console .rail-row {
  min-height: 42px;
  padding: 7px 10px;
  border-radius: 10px;
}

/* Destination rows benefit from a consistent target; role rows do not. Their
   titles and optional share line wrap, so the shared 42px minimum made a
   one-line role exactly as tall as a two-line role. The role list itself is the
   rail's elastic, scrolling region, though: without flex-shrink:0 it compresses
   every card below its contents when the list is full and the share line spills
   through the border. Let content determine each height, and scroll the list
   instead of crushing its children. */
.screen-console .rail-role { flex: 0 0 auto; min-height: 0; }

.screen-console .rail-row:hover { background: var(--rail-hover); }
.screen-console .rail-row[aria-current="page"] {
  background: var(--rail-selected) !important;
  color: var(--rail-selected-ink) !important;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .16);
}
.screen-console .rail-row[aria-current="page"] .rail-row-sub { color: var(--rail-selected-muted); }

.screen-console main { min-width: 0; }
.screen-console main > .console-page {
  max-width: none;
  padding: 54px clamp(24px, 4vw, 72px) var(--role-menu-scroll-room, 120px) !important;
  gap: 42px !important;
}

.screen-console [data-page] > section,
.screen-console [data-page] > div { width: 100%; }

.screen-console .card {
  border: 1px solid color-mix(in srgb, var(--hair) 82%, transparent);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: 0 14px 44px rgba(38, 43, 35, .07), 0 2px 6px rgba(38, 43, 35, .04);
}

.screen-console button,
.screen-console input,
.screen-console select,
.screen-console textarea { font-family: var(--ui); }

.screen-console button { cursor: pointer; }
.screen-console button:focus-visible,
.screen-console input:focus-visible,
.screen-console select:focus-visible,
.screen-console textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

/* Search values are first-class objects. What is on screen is what Recruiter
   receives; the empty final control is always the next value.

   This wrapper used to be the bordered chip input itself. The current editor
   renders complete per-value rows and a complete text input inside it, so
   retaining the old padding, background and border made every empty facet a
   field nested inside another field. It is deliberately layout-only now: the
   child that accepts input owns the interactive `line` border. */
.screen-console .facet-values {
  display: block;
  container-type: inline-size;
  min-height: 0;
  margin-top: 7px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.screen-console .facet-values:focus-within {
  border-color: transparent;
  box-shadow: none;
}
.screen-console .facet-values > input {
  min-width: 0;
  color: var(--ink);
}
.screen-console .facet-value {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 31px;
  padding: 2px 3px 2px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--hair));
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.3;
}
.screen-console .facet-value > button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink2);
  font-size: 15px;
}
.screen-console .facet-value > button:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* Sourcing is one composition desk, then its orders. */
.screen-console [data-page="spend"] { max-width: 1380px !important; }
.screen-console [data-page="spend"] .card { overflow: visible; }
.screen-console .calibration-short {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 13px 15px;
  border-radius: 10px;
  background: var(--page);
}
.screen-console .calibration-short button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-size: 13px;
}

@media (max-width: 1000px) {
  .screen-console [data-console-root] {
    display: flex;
    flex-direction: column;
  }
  .screen-console main { order: 1; }
  .screen-console .sidebar {
    order: 2;
    position: static;
    width: auto;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 18px 14px;
    border-top: 1px solid var(--rail-divider);
  }
  .screen-console main > .console-page {
    padding: 70px 18px var(--role-menu-scroll-room, 72px) !important;
  }
  .screen-console [data-settings] { top: 14px !important; right: 14px !important; }
}

@media (max-width: 620px) {
  .screen-console main > .console-page { padding-left: 12px !important; padding-right: 12px !important; }
  .screen-console .card { border-radius: 11px; }
  .screen-console .two-col { grid-template-columns: 1fr; gap: 22px; }
  .screen-console [data-page="spend"] [style*="padding: 24px"] { padding: 17px !important; }
  .screen-console .facet-values > input { flex-basis: 100%; }
}