@layer reset, dependencies, base, components, utilities;

/* Resets */

@layer reset{

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}
}

/* Dependencies */

@layer dependencies{

:root {
  /* Color scheme settings */
  color-scheme: light;

  /* Primitive colors

    Fig       the platform: actions, nav surface, wordmark
    Sea       done, delivered
    Toffee    needs a look, fix this
    Crimson   act now: overdue, denied, at risk, killed; system errors
    Marigold  footage received, video published
    Violet    in someone else's hands: with an agency, locked for scripting
    Ink       text and figures
    Cream     paper
  */

  --color--fig-50: #f4ecf3;
  --color--fig-100: #dfc8dc;
  --color--fig-200: #c5a0bf;
  --color--fig-400: #815073;
  --color--fig-500: #5e3355;
  --color--fig-700: #44243d;
  --color--fig-900: #2e1729;

  --color--sea-100: #edf3ef;
  --color--sea-500: #2f7a70;
  --color--sea-700: #1e5c54;

  --color--toffee-100: #faf3e4;
  --color--toffee-200: #f0e2c4;
  --color--toffee-500: #8c5a2e;
  --color--toffee-900: #5c3a1a;

  --color--crimson-100: #fbecea;
  --color--crimson-200: #ebc2be;
  --color--crimson-500: #a8302e;
  --color--crimson-900: #6e1f1c;

  --color--marigold-100: #fbf3e1;
  --color--marigold-200: #efcb79;
  --color--marigold-500: #d4952b;

  --color--violet-100: #f3f0f7;
  --color--violet-300: #d1cade;
  --color--violet-500: #8a7ba4;
  --color--violet-800: #3e2f52;

  --color--ink-100: #a99ba7;
  --color--ink-300: #837b8a;
  --color--ink-500: #524a5a;
  --color--ink-900: #241f29;

  --color--cream-50: #fdfbfa;
  --color--cream-100: #fbf7f6;
  --color--cream-300: #f5f1ea;
  --color--cream-500: #e9e3e0;

  --color--border-soft: #ede2ea;
  --color--border-field: #e2d4df;
  --color--border-mid: #b9b0b4;

  --color--white-500: #ffffff;

  --color--primary-base: var(--color--fig-500);
  --color--primary-dark: var(--color--fig-700);
  --color--primary-light: var(--color--fig-100);

  --color--accent-base: var(--color--fig-50);
  --color--accent-dark: var(--color--fig-900);
  --color--accent-light: var(--color--fig-200);

  --color--disabled: var(--color--cream-300);

  /* Semantic colors */

  --color--background-base: var(--color--cream-100);
  --color--background-light: var(--color--cream-300);
  --color--background-x-light: var(--color--cream-50);
  --color--background-dark: var(--color--fig-900);
  --color--background-card: var(--color--white-500);

  --color--ui-danger-light: var(--color--crimson-100);
  --color--ui-danger-base: var(--color--crimson-500);
  --color--ui-danger-dark: var(--color--crimson-900);
  --color--ui-success-light: var(--color--sea-100);
  --color--ui-success-base: var(--color--sea-500);
  --color--ui-success-dark: var(--color--sea-700);
  --color--ui-warning-light: var(--color--toffee-100);
  --color--ui-warning-base: var(--color--toffee-500);
  --color--ui-warning-dark: var(--color--toffee-900);

  --color--text: var(--color--ink-900);
  --color--text-soft: var(--color--ink-500);
  --color--text-muted: var(--color--ink-300);
  --color--text-faint: var(--color--ink-100);
  --color--text-inverse: var(--color--white-500);

  --color--focus: var(--color--fig-400);
  --color--link: var(--color--fig-500);
  --color--link-hover: var(--color--fig-700);
  --color--current: var(--color--fig-500);

  /* Status colors

    Every state carries a word alongside its colour, never colour alone.
    "Fix" is a correction (toffee). "Act" is urgent (crimson).
    "Held" means the case is waiting with someone else, not stuck.
    "Celebrate" is reserved for footage received and video published.
  */

  --color--fix-light: var(--color--toffee-100);
  --color--fix-base: var(--color--toffee-500);
  --color--fix-dark: var(--color--toffee-900);
  --color--fix-border: var(--color--toffee-200);

  --color--act-light: var(--color--crimson-100);
  --color--act-base: var(--color--crimson-500);
  --color--act-dark: var(--color--crimson-900);
  --color--act-border: var(--color--crimson-200);

  --color--done-light: var(--color--sea-100);
  --color--done-base: var(--color--sea-500);
  --color--done-dark: var(--color--sea-700);

  --color--held-light: var(--color--violet-100);
  --color--held-base: var(--color--violet-500);
  --color--held-dark: var(--color--violet-800);

  --color--celebrate-light: var(--color--marigold-100);
  --color--celebrate-base: var(--color--marigold-500);
  --color--celebrate-dark: var(--color--toffee-900);
  --color--celebrate-border: var(--color--marigold-200);

  /* Navigation */

  --color--nav-background: var(--color--fig-900);
  --color--nav-text: var(--color--fig-100);
  --color--nav-text-current: var(--color--white-500);

  /* Font & typography */

  --font-size--50: 0.75rem;
  --font-size--75: 0.8125rem;
  --font-size--100: 0.875rem;
  --font-size--150: 0.9375rem;
  --font-size--200: 1rem;
  --font-size--250: 1.125rem;
  --font-size--300: 1.375rem;
  --font-size--400: 1.75rem;
  --font-size--500: 2.25rem;
  --font-size--600: 3rem;

  --font-size--body: var(--font-size--75);
  --font-size--small: var(--font-size--50);
  --font-size--ui: var(--font-size--100);
  --font-size--section-title: var(--font-size--200);
  --font-size--subheader: var(--font-size--300);
  --font-size--header: var(--font-size--400);
  --font-size--display: var(--font-size--600);

  --font-weight--normal: 400;
  --font-weight--medium: 500;
  --font-weight--semibold: 600;
  --font-weight--bold: 700;

  --font-style--normal: normal;
  --font-style--italic: italic;

  --font-family--body: "PlusJakartaSans", system-ui, "Arial", sans-serif;
  --font-family--display: "BricolageGrotesque", system-ui, "Arial", sans-serif;

  --line-height--base: 1.55;
  --line-height--tight: 1.15;

  --letter-spacing--display: -0.015em;

  --measure--base: 66ch;
  --measure--narrow: 27rem;

  /* Borders */

  --border-radius--small: 0.25rem;
  --border-radius--base: 0.625rem;
  --border-radius--large: 1rem;
  --border-radius--x-large: 1.25rem;
  --border-radius--pill: 4rem;
  --border-radius--circle: 100%;

  --border-width--base: 1px;
  --border-width--thick: 4px;

  --border--base: var(--border-width--base) solid var(--color--border-soft);
  --border--light: var(--border-width--base) solid var(--color--border-field);
  --border--dark: var(--border-width--base) solid var(--color--border-mid);

  /* Form controls */

  --form-control--height: 2.875rem;
  --form-control--height-large: 3.25rem;
  --form-control--padding-block: 0.8125rem;
  --form-control--padding-inline: 1rem;
  --form-control--checkbox-size: 1.125rem;

  --form-control--width-x-small: 10rem;
  --form-control--width-small: 15rem;
  --form-control--width-base: 23.75rem;
  --form-control--width-large: 30rem;
  --form-control--width-full: 40rem;

  /* Media */

  --aspect-ratio--video: 16 / 9;

  /* Container sizing */

  --container--base: 50rem;
  --container--large: 70rem;

  --nav--width: 6rem;

  /* Spacing */

  --space--xx-small: 0.25rem;
  --space--x-small: 0.5rem;
  --space--small: 0.75rem;
  --space--base: 1rem;
  --space--medium: 1.5rem;
  --space--large: 2rem;
  --space--x-large: 3rem;
  --space--xx-large: 4rem;

  /* Spacing - Page margins */

  --space--page-margin-inline: var(--space--base);
  --space--page-margin-block: var(--space--large);

  /* Transitions */

  --transition-duration--base: 0.2s;
  --transition-timing--base: ease-in-out;

  /* Z-index */

  --z-index--basement: -999999;
  --z-index--base: 1;
  --z-index--layout: 1000;
  --z-index--modal: 4000;
  --z-index--ceiling: 999999;

  /* High contrast settings */
}

  @media (prefers-contrast: more) {

:root {
    --color--focus: Highlight;
    --color--text: ButtonText;
    --border--base: var(--border-width--base) solid ButtonText;
    --border--light: var(--border-width--base) solid ButtonText;
    --border--dark: var(--border-width--base) solid ButtonText;
}
  }

  /* Breakpoints

    CSS custom properties (variables) cannot be used for breakpoint values,
    however, to make debugging easier and to stay consistent, try to stick to
    these values when delaring breakpoints throughout the codebase.

    x-small: 320px;
    small: 600px; - Used for mobile layout
    medium: 820px;
    large: 1000px;
  */

@media screen and (min-width: 1000px) {
  :root {
    --space--page-margin-inline: var(--space--x-large);
  }
}
}

@layer dependencies{

@font-face {
  font-display: swap;
  font-family: "BricolageGrotesque";
  font-style: normal;
  font-weight: 200 800;
  src: url("/assets/bricolage-grotesque-latin-wght-normal-3084aa15.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "PlusJakartaSans";
  font-style: normal;
  font-weight: 200 800;
  src: url("/assets/plus-jakarta-sans-latin-wght-normal-d2ff26bc.woff2") format("woff2");
}
}

/* Base */

@layer base{
  @media screen and (prefers-reduced-motion: no-preference) {
html {
    scroll-behavior: smooth;
}
  }
}

@layer base{

.button {
  align-items: center;
  border: var(--border-width--base) solid transparent;
  border-radius: var(--border-radius--base);
  cursor: pointer;
  display: flex;
  font-weight: var(--font-weight--bold);
  font-size: var(--font-size--ui);
  gap: var(--space--x-small);
  justify-content: center;
  line-height: 1;
  padding-block: var(--space--small);
  padding-inline: var(--space--medium);
  text-align: center;
  text-decoration: none;
  transition-duration: var(--transition-duration--base);
  transition-property: background-color, color;
  transition-timing-function: var(--transition-timing--base);
}

  .button:focus-visible {
    outline: var(--border-width--thick) solid var(--color--focus);
    outline-offset: 2px;
  }

.button--primary {
  background-color: var(--color--primary-base);
  color: var(--color--text-inverse);
}

  .button--primary:hover,.button--primary:focus-visible {
    background-color: var(--color--primary-dark);
    color: var(--color--text-inverse);
  }

.button--secondary {
  background-color: var(--color--background-base);
  border-color: var(--color--primary-base);
  color: var(--color--text);
}

  .button--secondary:hover,.button--secondary:focus-visible {
    background-color: var(--color--primary-dark);
    color: var(--color--text-inverse);
  }

.button--danger {
  background-color: var(--color--background-base);
  border-color: var(--color--border-mid);
  color: var(--color--ui-danger-base);
}

  .button--danger:hover,.button--danger:focus-visible {
    background-color: var(--color--ui-danger-light);
    color: var(--color--ui-danger-dark);
  }

.button--large {
  height: var(--form-control--height-large);
  width: 100%;
}

.button:disabled {
  background-color: var(--color--disabled);
  cursor: not-allowed;
  color: var(--color--text);
}
}

@layer base{

details {
  display: flex;
  flex-direction: column;
  gap: var(--space--small);
}

  details[open] summary:after {
    transform: rotate(90deg);
  }

  details p:not(:last-of-type) {
    margin-block-end: var(--space--small);
  }

  [dir="rtl"] details:not([open]) summary:after {
    transform: rotate(180deg);
  }

summary {
  align-items: center;
  align-self: start;
  cursor: pointer;
  display: flex;
  font-size: var(--font-size--section-title);
  font-weight: var(--font-weight--bold);
  gap: var(--space--x-small);
  list-style: none;
}

  summary::-webkit-details-marker {
    display: none;
  }
  summary:after {
    --size: var(--space--small);

    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="12" fill="none"><path fill="%2332314C" d="M1.01 11.16a.946.946 0 0 1-.554-.182 1.065 1.065 0 0 1-.368-.484 1.16 1.16 0 0 1-.056-.623c.038-.21.133-.402.273-.553L3.59 5.766.305 2.214a1.085 1.085 0 0 1-.224-.35A1.154 1.154 0 0 1 .292.676.996.996 0 0 1 .62.44a.933.933 0 0 1 .772.007 1 1 0 0 1 .324.242l3.992 4.315c.187.202.292.476.292.762 0 .286-.105.56-.292.763l-3.992 4.315a.961.961 0 0 1-.706.316Z"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: var(--size);
    transition: var(--transition-duration--base) transform
      var(--transition-timing--base);
    width: var(--size);
  }
}

@layer base{

:is(
  button,
  input[type="checkbox"],
  input[type="radio"],
  input[type="range"],
  select
) {
  cursor: pointer;
}

:where(input, label, select) {
  display: block;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

form {
  display: flex;
  flex-direction: column;
  gap: var(--space--large);
}

:where(fieldset > *:not(:last-child)) {
  margin-block-end: var(--space--base);
}

:is(input, textarea, select) {
  accent-color: var(--color--primary-base);
  border: var(--border--light);
}

  :is(input,textarea,select):focus {
    outline: var(--border-width--base) solid var(--color--primary-base);
  }

  [readonly]:is(input,textarea,select) {
    border-color: transparent;
    padding-inline-start: 0;
  }

    [readonly]:is(input,textarea,select):focus {
      padding-inline-start: var(--space--small);
    }

:where(
  input:not([type]),
  select,
  textarea,
  [type="color"],
  [type="date"],
  [type="datetime"],
  [type="datetime-local"],
  [type="email"],
  [type="month"],
  [type="number"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="time"],
  [type="url"],
  [type="week"]
) {
  background-color: var(--color--background-base);
  border-radius: var(--border-radius--base);
  color: var(--color--text);
  padding-block: var(--space--small);
  padding-inline: var(--space--small);
}

  :where(input:not([type]),select,textarea,[type="color"],[type="date"],[type="datetime"],[type="datetime-local"],[type="email"],[type="month"],[type="number"],[type="password"],[type="search"],[type="tel"],[type="text"],[type="time"],[type="url"],[type="week"]):focus-visible {
    outline: var(--border-width--thick) solid var(--color--focus);
    outline-offset: 2px;
  }

label:has(
  input:not([type]),
  select,
  textarea,
  [type="color"],
  [type="date"],
  [type="datetime"],
  [type="datetime-local"],
  [type="email"],
  [type="month"],
  [type="number"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="time"],
  [type="url"],
  [type="week"]
) {
  display: flex;
  flex-direction: column;
  gap: var(--space--x-small);
}

label:has([type="radio"], [type="checkbox"]) {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: var(--space--x-small);
  justify-self: start;
}

label:has(input[required], select[required], textarea[required]) > span::after,
.fieldset-required > legend::after {
  content: "*";
  margin-inline-start: var(--space--xx-small);
}

:is(input[type="checkbox"], input[type="radio"]) {
  --input-size: var(--form-control--checkbox-size);

  flex-shrink: 0;
  height: var(--input-size);
  width: var(--input-size);
}

  :is(input[type="checkbox"],input[type="radio"]):focus {
    outline: none;
  }

  :is(input[type="checkbox"],input[type="radio"]):focus-visible {
    outline: var(--border-width--thick) solid var(--color--focus);
    outline-offset: 2px;
  }

textarea {
  resize: vertical;
}

:where(select) {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" fill="none"><path fill="%2332314C" fill-rule="evenodd" d="M.65.63A.875.875 0 0 1 1.885.602L4.828 3.42 7.77.603a.875.875 0 1 1 1.21 1.264l-3.374 3.23a1.125 1.125 0 0 1-1.556 0L.676 1.868A.875.875 0 0 1 .649.629Z" clip-rule="evenodd"/></svg>');
  background-position: right var(--space--small) center;
  background-repeat: no-repeat;
  background-size: var(--space--small);
}

  [dir="rtl"] :where(select) {
    background-position: left var(--space--small) center;
  }

:where([type="search"])::-webkit-search-cancel-button {
  -webkit-appearance: none;
          appearance: none;
  background-image: url('data:image/svg+xml,<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.01629 5.99568L9.79098 2.22099C9.86057 2.15553 9.9163 2.07677 9.95487 1.98937C9.99345 1.90197 10.0141 1.80772 10.0155 1.71219C10.017 1.61667 9.99927 1.52183 9.96338 1.43329C9.9275 1.34475 9.8742 1.26432 9.80665 1.19677C9.7391 1.12922 9.65867 1.07592 9.57013 1.04003C9.48159 1.00415 9.38675 0.986415 9.29122 0.987876C9.1957 0.989338 9.10144 1.00997 9.01405 1.04854C8.92665 1.08712 8.84788 1.14285 8.78243 1.21244L5.00774 4.98713L1.23305 1.21244C1.09931 1.0787 0.917915 1.00356 0.728776 1.00356C0.539636 1.00356 0.358244 1.0787 0.224502 1.21244C0.0907603 1.34618 0.015625 1.52758 0.015625 1.71671C0.015625 1.90585 0.0907603 2.08725 0.224502 2.22099L3.99919 5.99568L0.224502 9.77037C0.0907603 9.90411 0.015625 10.0855 0.015625 10.2746C0.015625 10.4638 0.0907603 10.6452 0.224502 10.7789C0.358244 10.9127 0.539636 10.9878 0.728776 10.9878C0.917915 10.9878 1.09931 10.9127 1.23305 10.7789L5.00774 7.00423L8.78243 10.7789C8.91617 10.9127 9.09756 10.9878 9.2867 10.9878C9.47584 10.9878 9.65724 10.9127 9.79098 10.7789C9.92472 10.6452 9.99985 10.4638 9.99985 10.2746C9.99985 10.0855 9.92472 9.90411 9.79098 9.77037L6.01629 5.99568Z" fill="%2332314C"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  height: var(--space--small);
  width: var(--space--small);
}

:where(input[type="range"]) {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--color--background-base);
  border: 0;
  border-radius: var(--border-radius--base);
  height: var(--border-width--thick);
  width: 100%;
}

  :where(input[type="range"]):focus {
    background-color: var(--color--primary-base);
    outline: none;
  }

label:has(input[type="range"]) {
  display: flex;
  flex-direction: column;
  gap: var(--space--medium);
}

[type="range"]::-webkit-slider-thumb {
  --size: var(--space--large);

  -webkit-appearance: none;

          appearance: none;
  background-color: var(--color--background-base);
  background-image: url('data:image/svg+xml,<svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.65812 9C4.43757 8.99995 4.22607 8.90521 4.07014 8.73662L0.743499 5.14104C0.587587 4.97247 0.5 4.74388 0.5 4.50552C0.5 4.26717 0.587587 4.03857 0.743499 3.87L4.07014 0.274422C4.14686 0.188569 4.23862 0.120089 4.34009 0.0729785C4.44156 0.0258683 4.55069 0.0010711 4.66111 3.39396e-05C4.77154 -0.00100322 4.88105 0.0217402 4.98326 0.0669374C5.08547 0.112135 5.17833 0.17888 5.25641 0.26328C5.3345 0.34768 5.39625 0.448043 5.43807 0.558514C5.47988 0.668985 5.50093 0.787352 5.49997 0.906706C5.49901 1.02606 5.47607 1.14401 5.43248 1.25368C5.38889 1.36335 5.32554 1.46254 5.2461 1.54546L2.50745 4.50552L5.2461 7.46559C5.36238 7.5913 5.44156 7.75145 5.47363 7.92579C5.50571 8.10014 5.48924 8.28084 5.42631 8.44507C5.36337 8.6093 5.25681 8.74967 5.12007 8.84845C4.98334 8.94722 4.82258 8.99996 4.65812 9Z" fill="%2332314C"/><path d="M11.3419 9C11.1774 8.99996 11.0167 8.94722 10.8799 8.84845C10.7432 8.74967 10.6366 8.6093 10.5737 8.44507C10.5108 8.28084 10.4943 8.10014 10.5264 7.92579C10.5584 7.75145 10.6376 7.5913 10.7539 7.46559L13.4926 4.50552L10.7539 1.54546C10.6745 1.46254 10.6111 1.36335 10.5675 1.25368C10.5239 1.14401 10.501 1.02606 10.5 0.906706C10.4991 0.787352 10.5201 0.668985 10.5619 0.558514C10.6037 0.448043 10.6655 0.34768 10.7436 0.26328C10.8217 0.17888 10.9145 0.112135 11.0167 0.0669374C11.1189 0.0217402 11.2285 -0.00100322 11.3389 3.39396e-05C11.4493 0.0010711 11.5584 0.0258683 11.6599 0.0729785C11.7614 0.120089 11.8531 0.188569 11.9299 0.274422L15.2565 3.87C15.4124 4.03857 15.5 4.26717 15.5 4.50552C15.5 4.74388 15.4124 4.97247 15.2565 5.14104L11.9299 8.73662C11.7739 8.90521 11.5624 8.99995 11.3419 9Z" fill="%2332314C"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  border: var(--border--base);
  border-radius: var(--border-radius--circle);
  height: var(--size);
  width: var(--size);
}

[type="range"]::-moz-range-thumb {
  --size: var(--space--large);

  background-color: var(--color--background-base);
  background-image: url('data:image/svg+xml,<svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.65812 9C4.43757 8.99995 4.22607 8.90521 4.07014 8.73662L0.743499 5.14104C0.587587 4.97247 0.5 4.74388 0.5 4.50552C0.5 4.26717 0.587587 4.03857 0.743499 3.87L4.07014 0.274422C4.14686 0.188569 4.23862 0.120089 4.34009 0.0729785C4.44156 0.0258683 4.55069 0.0010711 4.66111 3.39396e-05C4.77154 -0.00100322 4.88105 0.0217402 4.98326 0.0669374C5.08547 0.112135 5.17833 0.17888 5.25641 0.26328C5.3345 0.34768 5.39625 0.448043 5.43807 0.558514C5.47988 0.668985 5.50093 0.787352 5.49997 0.906706C5.49901 1.02606 5.47607 1.14401 5.43248 1.25368C5.38889 1.36335 5.32554 1.46254 5.2461 1.54546L2.50745 4.50552L5.2461 7.46559C5.36238 7.5913 5.44156 7.75145 5.47363 7.92579C5.50571 8.10014 5.48924 8.28084 5.42631 8.44507C5.36337 8.6093 5.25681 8.74967 5.12007 8.84845C4.98334 8.94722 4.82258 8.99996 4.65812 9Z" fill="%2332314C"/><path d="M11.3419 9C11.1774 8.99996 11.0167 8.94722 10.8799 8.84845C10.7432 8.74967 10.6366 8.6093 10.5737 8.44507C10.5108 8.28084 10.4943 8.10014 10.5264 7.92579C10.5584 7.75145 10.6376 7.5913 10.7539 7.46559L13.4926 4.50552L10.7539 1.54546C10.6745 1.46254 10.6111 1.36335 10.5675 1.25368C10.5239 1.14401 10.501 1.02606 10.5 0.906706C10.4991 0.787352 10.5201 0.668985 10.5619 0.558514C10.6037 0.448043 10.6655 0.34768 10.7436 0.26328C10.8217 0.17888 10.9145 0.112135 11.0167 0.0669374C11.1189 0.0217402 11.2285 -0.00100322 11.3389 3.39396e-05C11.4493 0.0010711 11.5584 0.0258683 11.6599 0.0729785C11.7614 0.120089 11.8531 0.188569 11.9299 0.274422L15.2565 3.87C15.4124 4.03857 15.5 4.26717 15.5 4.50552C15.5 4.74388 15.4124 4.97247 15.2565 5.14104L11.9299 8.73662C11.7739 8.90521 11.5624 8.99995 11.3419 9Z" fill="%2332314C"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  border: var(--border--base);
  border-radius: var(--border-radius--circle);
  height: var(--size);
  width: var(--size);
}

[type="range"]:is(:active, :focus)::-webkit-slider-thumb {
  background-color: var(--color--primary-base);
  background-image: url('data:image/svg+xml,<svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.65812 9C4.43757 8.99995 4.22607 8.90521 4.07014 8.73662L0.743499 5.14104C0.587587 4.97247 0.5 4.74388 0.5 4.50552C0.5 4.26717 0.587587 4.03857 0.743499 3.87L4.07014 0.274422C4.14686 0.188569 4.23862 0.120089 4.34009 0.0729785C4.44156 0.0258683 4.55069 0.0010711 4.66111 3.39396e-05C4.77154 -0.00100322 4.88105 0.0217402 4.98326 0.0669374C5.08547 0.112135 5.17833 0.17888 5.25641 0.26328C5.3345 0.34768 5.39625 0.448043 5.43807 0.558514C5.47988 0.668985 5.50093 0.787352 5.49997 0.906706C5.49901 1.02606 5.47607 1.14401 5.43248 1.25368C5.38889 1.36335 5.32554 1.46254 5.2461 1.54546L2.50745 4.50552L5.2461 7.46559C5.36238 7.5913 5.44156 7.75145 5.47363 7.92579C5.50571 8.10014 5.48924 8.28084 5.42631 8.44507C5.36337 8.6093 5.25681 8.74967 5.12007 8.84845C4.98334 8.94722 4.82258 8.99996 4.65812 9Z" fill="%23FFFFFF"/><path d="M11.3419 9C11.1774 8.99996 11.0167 8.94722 10.8799 8.84845C10.7432 8.74967 10.6366 8.6093 10.5737 8.44507C10.5108 8.28084 10.4943 8.10014 10.5264 7.92579C10.5584 7.75145 10.6376 7.5913 10.7539 7.46559L13.4926 4.50552L10.7539 1.54546C10.6745 1.46254 10.6111 1.36335 10.5675 1.25368C10.5239 1.14401 10.501 1.02606 10.5 0.906706C10.4991 0.787352 10.5201 0.668985 10.5619 0.558514C10.6037 0.448043 10.6655 0.34768 10.7436 0.26328C10.8217 0.17888 10.9145 0.112135 11.0167 0.0669374C11.1189 0.0217402 11.2285 -0.00100322 11.3389 3.39396e-05C11.4493 0.0010711 11.5584 0.0258683 11.6599 0.0729785C11.7614 0.120089 11.8531 0.188569 11.9299 0.274422L15.2565 3.87C15.4124 4.03857 15.5 4.26717 15.5 4.50552C15.5 4.74388 15.4124 4.97247 15.2565 5.14104L11.9299 8.73662C11.7739 8.90521 11.5624 8.99995 11.3419 9Z" fill="%23FFFFFF"/></svg>');
}

[type="range"]:is(:active, :focus)::-moz-range-thumb {
  background-color: var(--color--primary-base);
  background-image: url('data:image/svg+xml,<svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.65812 9C4.43757 8.99995 4.22607 8.90521 4.07014 8.73662L0.743499 5.14104C0.587587 4.97247 0.5 4.74388 0.5 4.50552C0.5 4.26717 0.587587 4.03857 0.743499 3.87L4.07014 0.274422C4.14686 0.188569 4.23862 0.120089 4.34009 0.0729785C4.44156 0.0258683 4.55069 0.0010711 4.66111 3.39396e-05C4.77154 -0.00100322 4.88105 0.0217402 4.98326 0.0669374C5.08547 0.112135 5.17833 0.17888 5.25641 0.26328C5.3345 0.34768 5.39625 0.448043 5.43807 0.558514C5.47988 0.668985 5.50093 0.787352 5.49997 0.906706C5.49901 1.02606 5.47607 1.14401 5.43248 1.25368C5.38889 1.36335 5.32554 1.46254 5.2461 1.54546L2.50745 4.50552L5.2461 7.46559C5.36238 7.5913 5.44156 7.75145 5.47363 7.92579C5.50571 8.10014 5.48924 8.28084 5.42631 8.44507C5.36337 8.6093 5.25681 8.74967 5.12007 8.84845C4.98334 8.94722 4.82258 8.99996 4.65812 9Z" fill="%23FFFFFF"/><path d="M11.3419 9C11.1774 8.99996 11.0167 8.94722 10.8799 8.84845C10.7432 8.74967 10.6366 8.6093 10.5737 8.44507C10.5108 8.28084 10.4943 8.10014 10.5264 7.92579C10.5584 7.75145 10.6376 7.5913 10.7539 7.46559L13.4926 4.50552L10.7539 1.54546C10.6745 1.46254 10.6111 1.36335 10.5675 1.25368C10.5239 1.14401 10.501 1.02606 10.5 0.906706C10.4991 0.787352 10.5201 0.668985 10.5619 0.558514C10.6037 0.448043 10.6655 0.34768 10.7436 0.26328C10.8217 0.17888 10.9145 0.112135 11.0167 0.0669374C11.1189 0.0217402 11.2285 -0.00100322 11.3389 3.39396e-05C11.4493 0.0010711 11.5584 0.0258683 11.6599 0.0729785C11.7614 0.120089 11.8531 0.188569 11.9299 0.274422L15.2565 3.87C15.4124 4.03857 15.5 4.26717 15.5 4.50552C15.5 4.74388 15.4124 4.97247 15.2565 5.14104L11.9299 8.73662C11.7739 8.90521 11.5624 8.99995 11.3419 9Z" fill="%23FFFFFF"/></svg>');
}
}

@layer base{
body {
  margin: var(--space--page-margin-block) var(--space--page-margin-inline);
}
}

@layer base{

:where(ul, ol)[class] {
  list-style: none;
  margin: 0;
  padding: 0;
}
  dl dt {
    font-weight: var(--font-weight--bold);
  }

  dl dd {
    margin-inline-start: 0;
  }

    :is(dl dd):not(:last-of-type) {
      margin-bottom: var(--space--base);
    }
}

@layer base{

:where(audio, canvas, iframe, img, figure, picture, video) {
  display: block;
  height: auto;
  margin: 0;
  width: 100%;
}

iframe {
  border: 0;
}

svg:not([fill]) {
  fill: currentColor;
}
}

@layer base{

dialog {
  background-color: var(--color--background-base);
  border: var(--border--base);
  border-radius: var(--border-radius--base);
  color: var(--color--text);
  flex-direction: column;
  gap: var(--space--base);
  max-width: var(--container--base);
  width: calc(100% - var(--space--base));
}

  dialog[open] {
    display: flex;
  }

  dialog[open]::backdrop {
    background-color: color-mix(
      in srgb,
      var(--color--primary-base),
      transparent 10%
    );
  }

dialog button[data-dialogClose] {
  align-self: flex-end;
}

dialog.slide-in {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-block-end: 0;
}

  @media (prefers-reduced-motion: no-preference) {

dialog.slide-in {
    transform: translateY(100%);
    transition:
      calc(var(--transition-duration--base) * 2) var(--transition-timing--base)
        transform,
      display var(--transition-duration--base) var(--transition-timing--base)
        allow-discrete,
      overlay var(--transition-duration--base) var(--transition-timing--base)
        allow-discrete;
}
  }
    @media (prefers-reduced-motion: no-preference) {

  dialog.slide-in::backdrop {
      transition:
        overlay var(--transition-duration--base) allow-discrete,
        display var(--transition-duration--base) allow-discrete,
        var(--transition-duration--base) background-color
          var(--transition-timing--base);
  }
    }

  dialog.slide-in[open] {
    transform: translateY(0);
  }

    @media (prefers-reduced-motion: no-preference) {

  dialog.slide-in[open] {
      transition: calc(var(--transition-duration--base) * 2)
        var(--transition-timing--base) transform;
  }

      @starting-style {

  dialog.slide-in[open] {
        transform: translateY(100%);
  }

        dialog.slide-in[open]::backdrop {
          background-color: transparent;
        }
      }
    }
}

@layer base{

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

  table p {
    margin: 0;
  }

:where(thead, tbody) :where(th, td) {
  border-inline-end: var(--border--light);
  border-bottom: var(--border--light);
  padding-block: var(--space--small);
  padding-inline: var(--space--small);
}

:where(tfoot) td,
caption {
  font-weight: var(--font-weight--bold);
  padding-block: var(--space--xx-small);
  padding-inline: var(--space--small);
  text-align: start;
}

:where(thead, tbody) :where(th, td):first-child {
  border-inline-start: var(--border--light);
}

th {
  background-color: var(--color--background-light);
  border-top: var(--border--light);
  font-size: var(--font-size--small);
  font-weight: var(--font-weight--bold);
  text-align: start;
}

tr:first-child th:first-child {
  border-top-left-radius: var(--border-radius--base);
}

tr:first-child th:last-child {
  border-top-right-radius: var(--border-radius--base);
}

tr:last-child td:first-child {
  border-bottom-left-radius: var(--border-radius--base);
}

tr:last-child td:last-child {
  border-bottom-right-radius: var(--border-radius--base);
}

.table--striped tbody tr:nth-child(even) {
  background-color: var(--color--background-x-light);
}

.table-outer-wrapper {
  display: flex;
}

.table-inner-wrapper {
  overflow-x: auto;
  flex: 1 1 0%;
  margin-block-end: var(--space--base);
  width: 1rem;
}
}

@layer base{

html {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
}

body {
  color: var(--color--text);
  font-family: var(--font-family--body);
  font-size: var(--font-size--body);
  font-weight: var(--font-weight--normal);
  line-height: var(--line-height--base);
}

:where(h1, h2, h3, h4, strong) {
  font-weight: var(--font-weight--bold);
}

:where(h1, h2, h3) {
  font-family: var(--font-family--display);
}

h1 {
  text-wrap: balance;
  text-wrap: pretty;
}

a {
  color: var(--color--link);
  transition: var(--transition-duration--base) color
    var(--transition-timing--base);
}

  a:hover {
    color: var(--color--link-hover);
  }

label {
  font-size: var(--font-size--ui);
  font-weight: var(--font-weight--bold);
  text-align: start;
}

input {
  font-size: var(--font-size--body);
}

legend {
  font-size: var(--font-size--body);
  font-weight: var(--font-weight--bold);
}

hr {
  border: var(--border--light);
  width: 100%;
}

blockquote {
  font-style: var(--font-style--italic);
  display: block;
  margin-block-start: var(--space--base);
  margin-block-end: var(--space--base);
  margin-inline-start: var(--space--large);
  margin-inline-end: var(--space--large);
}
blockquote + figcaption {
  margin-block-start: var(--space--base);
  margin-block-end: var(--space--base);
  margin-inline-start: var(--space--large);
  margin-inline-end: var(--space--large);
}

table {
  font-variant-numeric: tabular-nums lining-nums slashed-zero;
}

code {
  font-variant-numeric: slashed-zero;
}
}

/* Components */
/* Import components from the component folder here in ABC order */
/* For example: @import "components/_card.css" layer(components); */
@layer components{

.admin-case__agencies {
  display: flex;
  flex-direction: column;
  gap: var(--space--xx-small);
  list-style: none;
  margin: 0;
  padding: 0;
}

  .admin-case__agencies li {
    display: flex;
    gap: var(--space--small);
    justify-content: space-between;
  }

.admin-case__fee {
  border-color: var(--color--primary-light);
}

  .admin-case__fee p {
    color: var(--color--text-soft);
  }

  .admin-case__fee .admin-case__amount {
    color: var(--color--text);
    font-family: var(--font-family--display);
    font-size: var(--font-size--header);
    font-weight: var(--font-weight--semibold);
    line-height: var(--line-height--tight);
  }

.admin-case__decision {
  align-self: end;
  display: flex;
  gap: var(--space--small);
}

.log-request.admin-case__rejection {
  border-radius: var(--border-radius--large);
  border-top: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  margin: 0;
  position: static;
}

.admin-case__need {
  display: flex;
  flex-direction: column;
  gap: var(--space--base);
  grid-column: 1 / -1;
}

  .admin-case__need[hidden] {
    display: none;
  }

.admin-case__release {
  border-color: var(--color--primary-light);
}

  .admin-case__release fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }

  .admin-case__release .field_with_errors {
    display: contents;
  }

.admin-case__posted .field_with_errors {
  display: contents;
}

.admin-case__posted .admin-case__channels {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-case__posted .admin-case__decision {
  align-items: center;
  align-self: stretch;
  flex-wrap: wrap;
  justify-content: space-between;
}

  :is(.admin-case__posted .admin-case__decision) .button {
    margin-inline-start: auto;
  }

.admin-case__goes-live-on[hidden] {
  display: none;
}

label > .admin-case__channel-hint::after {
  content: none;
}

.admin-case__suggested,
.admin-case__topics-hint,
.admin-case__channel-hint {
  color: var(--color--text-soft);
  font-weight: var(--font-weight--normal);
  margin: 0;
}

.admin-case__channels {
  display: grid;
  gap: var(--space--small);
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.admin-case__channel {
  background-color: var(--color--background-card);
  border: var(--border--dark);
  border-radius: var(--border-radius--base);
  box-sizing: border-box;
  -moz-column-gap: var(--space--small);
       column-gap: var(--space--small);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  justify-self: stretch;
  margin: 0;
  padding: var(--space--small) var(--space--base);
  row-gap: var(--space--xx-small);
}

  .admin-case__channel .admin-case__channel-hint {
    grid-column: 2;
  }

  .admin-case__channel:has(:checked) {
    background-color: var(--color--accent-base);
    border-color: var(--color--primary-base);
  }

  .admin-case__channel:has(:focus-visible) {
    outline: var(--border-width--thick) solid var(--color--focus);
    outline-offset: 2px;
  }

.admin-case__channel-name {
  font-weight: var(--font-weight--medium);
}

.admin-case__topics {
  display: flex;
  flex-direction: column;
  gap: var(--space--small);
}

  .admin-case__topics legend {
    font-weight: var(--font-weight--medium);
  }

  .admin-case__topics > [hidden] {
    display: none;
  }

.admin-case__topic {
  align-items: center;
  display: grid;
  margin: 0;
  gap: var(--space--small);
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
}

@media screen and (max-width: 600px) {
  .admin-case__topic {
    grid-template-columns: minmax(0, 1fr);
  }
}

.admin-case__errors {
  margin: 0;
  padding-inline-start: var(--space--base);
}

.admin-case__denial-note {
  background-color: var(--color--act-light);
  border-inline-start: var(--border-width--thick) solid var(--color--act-border);
  border-radius: var(--border-radius--base);
  margin: 0;
  overflow-wrap: anywhere;
  padding: var(--space--base) var(--space--medium);
}

.admin-case__reassignment {
  display: flex;
  flex-direction: column;
  gap: var(--space--base);
}

  .admin-case__reassignment .admin-case__channels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-case__reassignment legend {
    font-weight: var(--font-weight--medium);
    margin-block-end: var(--space--small);
  }

  .admin-case__reassignment .admin-case__topic[hidden] {
    display: none;
  }

  .admin-case__reassignment .admin-case__decision {
    justify-content: flex-end;
  }

@media screen and (max-width: 600px) {
  .admin-case__reassignment .admin-case__channels,
  .admin-case__posted .admin-case__channels {
    grid-template-columns: minmax(0, 1fr);
  }
}

.admin-case__script {
  display: flex;
  flex-direction: column;
  gap: var(--space--base);
}

.case-card.admin-case__script-draft {
  align-items: center;
  flex-flow: row wrap;
  justify-content: space-between;
}

  .case-card.admin-case__script-draft .production-case__draft {
    font-size: var(--font-size--150);
    gap: var(--space--x-small);
  }

  .case-card.admin-case__script-draft .production-case__draft svg {
    height: var(--space--medium);
    width: var(--space--medium);
  }

.case-card.admin-case__title {
  border-color: var(--color--primary-light);
  gap: var(--space--small);
}

  .case-card.admin-case__title label {
    font-size: var(--font-size--section-title);
    font-weight: var(--font-weight--semibold);
    margin: 0;
  }

  .case-card.admin-case__title input[type="text"] {
    background-color: var(--color--background-card);
    border-color: var(--color--border-mid);
  }

  .case-card.admin-case__title .admin-case__own-title {
    align-self: stretch;
    display: grid;
    gap: var(--space--small);
  }

  .case-card.admin-case__title .admin-case__decision {
    align-items: center;
    align-self: stretch;
    justify-content: space-between;
  }

.case-card.admin-case__footage {
  gap: var(--space--xx-small);
}

  .case-card.admin-case__footage ul {
    display: flex;
    flex-direction: column;
    gap: var(--space--xx-small);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .case-card.admin-case__footage li {
    align-items: center;
    color: var(--color--text-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--font-size--150);
    gap: var(--space--small);
    justify-content: space-between;
  }

  .case-card.admin-case__footage li a {
    color: var(--color--link);
    font-size: var(--font-size--section-title);
    font-weight: var(--font-weight--medium);
    text-decoration: none;
  }

.log-request.admin-case__drop {
  grid-column: 1 / -1;
}
}
@layer components{

body.auth {
  background-color: var(--color--background-dark);
  box-sizing: border-box;
  display: grid;
  margin: 0;
  min-height: 100dvh;
  padding: var(--space--page-margin-block) var(--space--page-margin-inline);
  place-items: center;
}

body.auth main {
  width: 100%;
}

.auth-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space--large);
  margin-inline: auto;
  max-width: var(--form-control--width-large);
}

.auth-wordmark {
  align-items: center;
  color: var(--color--text-inverse);
  display: flex;
  font-family: var(--font-family--display);
  font-size: var(--font-size--500);
  font-weight: var(--font-weight--bold);
  gap: var(--space--small);
  justify-content: center;
  letter-spacing: var(--letter-spacing--display);
  line-height: var(--line-height--tight);
  margin: 0;
}

.auth-card {
  background-color: var(--color--background-card);
  border-radius: var(--border-radius--x-large);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space--medium);
  padding: var(--space--x-large);
}

  @media (max-width: 600px) {

.auth-card {
    padding: var(--space--medium);
}
  }

.auth-card > header {
  text-align: center;
}

  :is(.auth-card > header) h1 {
    font-size: var(--font-size--header);
    font-weight: var(--font-weight--semibold);
    letter-spacing: var(--letter-spacing--display);
    line-height: var(--line-height--tight);
    margin: 0;
  }

  :is(.auth-card > header) p {
    color: var(--color--text-soft);
    font-size: var(--font-size--150);
    margin: var(--space--x-small) 0 0;
  }

.auth-card > p {
  color: var(--color--text-soft);
  font-size: var(--font-size--ui);
  margin: 0;
  text-align: center;
}

.auth-card form {
  gap: var(--space--medium);
}

.auth-card :is([type="email"], [type="password"], [type="text"]) {
  background-color: var(--color--background-card);
  font-size: var(--font-size--150);
  height: var(--form-control--height-large);
  padding-block: 0;
  padding-inline: var(--form-control--padding-inline);
}

.auth-card label small {
  color: var(--color--text-soft);
  font-size: var(--font-size--body);
  font-weight: var(--font-weight--normal);
}

.auth-card label:has([type="checkbox"]) {
  color: var(--color--text-soft);
  font-weight: var(--font-weight--normal);
}

.auth-footer {
  color: var(--color--accent-light);
  font-size: var(--font-size--75);
  margin: 0;
  text-align: center;
}
}
@layer components{

.badge {
  --badge-background: var(--color--primary-base);
  --badge-text: var(--color--text-inverse);

  align-items: center;
  align-self: start;
  background-color: var(--badge-background);
  border-radius: var(--border-radius--pill);
  color: var(--badge-text);
  display: inline-flex;
  gap: var(--space--xx-small);
  justify-self: start;
  line-height: var(--line-height--tight);
  font-size: var(--font-size--small);
  margin: 0;
  padding: var(--space--xx-small) var(--space--small);
}

a.badge {
  text-decoration: none;
}
  a.badge:hover,a.badge:focus {
    background-color: var(--color--primary-dark);
    color: var(--badge-text);
  }

.badge--primary {
  --badge-background: var(--color--primary-base);
}
.badge--accent {
  --badge-background: var(--color--accent-base);
  --badge-text: var(--color--text);
}
.badge--accent-outline {
  --badge-background: var(--color--accent-base);
  --badge-text: var(--color--text);

  border: var(--border-width--base) solid var(--color--primary-light);
}
.badge--plain {
  --badge-background: var(--color--background-light);
  --badge-text: var(--color--text-soft);
}
.badge--outline {
  --badge-background: transparent;
  --badge-text: var(--color--text-soft);

  border: var(--border--base);
}
.badge--held {
  --badge-background: var(--color--held-light);
  --badge-text: var(--color--held-dark);
}
.badge--fix {
  --badge-background: var(--color--fix-light);
  --badge-text: var(--color--fix-dark);

  border: var(--border-width--base) solid var(--color--fix-border);
}
.badge--act {
  --badge-background: var(--color--act-light);
  --badge-text: var(--color--act-dark);

  border: var(--border-width--base) solid var(--color--act-border);
}
.badge--celebrate {
  --badge-background: var(--color--celebrate-light);
  --badge-text: var(--color--celebrate-dark);
}
.badge--success {
  --badge-background: var(--color--ui-success-light);
  --badge-text: var(--color--ui-success-dark);
}
.badge--danger {
  --badge-background: var(--color--ui-danger-light);
  --badge-text: var(--color--ui-danger-dark);
}
.badge--large {
  font-size: var(--font-size--ui);
  font-weight: var(--font-weight--semibold);
  padding: var(--space--x-small) var(--space--base);
}
.badge--no-break {
  white-space: nowrap;
}
  a.badge--accent:hover,a.badge--accent:focus {
    background-color: var(--color--accent-dark);
    color: var(--badge-text);
  }

.badge__count {
  border-radius: var(--border-radius--large);
  background-color: var(--color--text-inverse);
  color: var(--color--primary-base);
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: var(--space--x-small);
  padding-right: var(--space--x-small);
}

.badge__icon {
  height: 20px;
}

.badge-group {
  display: flex;
  gap: var(--space--x-small);
  flex-wrap: wrap;
}
}
@layer components{

.brief {
  margin-inline: auto;
  max-width: var(--container--large);
}

.brief__body {
  display: grid;
  gap: var(--space--x-large);
  grid-template-columns: minmax(0, 1fr);
}

  .brief__body > section {
    display: flex;
    flex-direction: column;
    gap: var(--space--x-small);
  }

  .brief__body header {
    border-bottom: var(--border-width--base) solid var(--color--text);
    display: flex;
    flex-direction: column;
    gap: var(--space--xx-small);
    padding-block-end: var(--space--small);
  }

  .brief__body h2 {
    font-size: var(--font-size--subheader);
    font-weight: var(--font-weight--semibold);
    letter-spacing: var(--letter-spacing--display);
    line-height: var(--line-height--tight);
    margin: 0;
  }

  .brief__body p {
    color: var(--color--text-soft);
    margin: 0;
  }
  .brief__evidence header {
    border-bottom: 0;
    padding-block-end: var(--space--x-small);
  }

  .brief__evidence h2 {
    color: var(--color--text-soft);
    font-size: var(--font-size--small);
    font-weight: var(--font-weight--medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

.brief__cards {
  display: grid;
  gap: var(--space--base);
  grid-template-columns: minmax(0, 1fr);
}

  @media (min-width: 820px) {

.brief__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
  }

  .brief__cards li {
    background-color: var(--color--background-card);
    border: var(--border--base);
    border-radius: var(--border-radius--large);
    display: flex;
    flex-direction: column;
    gap: var(--space--xx-small);
    padding: var(--space--medium);
  }

  .brief__cards strong {
    font-size: var(--font-size--150);
    font-weight: var(--font-weight--semibold);
    line-height: var(--line-height--tight);
  }

.brief__updated {
  align-items: center;
  background-color: var(--color--background-light);
  border-radius: var(--border-radius--pill);
  color: var(--color--text-soft);
  display: inline-flex;
  font-size: var(--font-size--ui);
  gap: var(--space--x-small);
  margin: calc(var(--space--small) * -1) 0 var(--space--x-large);
  padding: var(--space--x-small) var(--space--base);
}

  .brief__updated svg {
    width: var(--space--base);
  }

.brief__assigned-channel {
  background-color: var(--color--background-card);
  border: var(--border--base);
  border-radius: var(--border-radius--x-large);
  display: flex;
  flex-direction: column;
  gap: var(--space--medium);
  padding: var(--space--large);
}

  .brief__assigned-channel h3 {
    font-size: var(--font-size--header);
  }

.brief__channel-heading {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space--small) var(--space--base);
}

  .brief__channel-heading h3 {
    font-weight: var(--font-weight--semibold);
    letter-spacing: var(--letter-spacing--display);
    line-height: var(--line-height--tight);
    margin: 0;
  }

  .brief__channel-heading .brief__assigned-note {
    font-size: var(--font-size--ui);
    margin-inline-start: auto;
  }

.brief__channels {
  align-items: start;
  display: grid;
  gap: var(--space--medium);
  grid-template-columns: minmax(0, 1fr);
}

  @media (min-width: 820px) {

.brief__channels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
  }

.brief__channel {
  border: var(--border-width--base) dashed var(--color--border-mid);
  border-radius: var(--border-radius--x-large);
  gap: var(--space--base);
  padding: var(--space--medium);
}

  .brief__channel summary {
    align-self: stretch;
    gap: var(--space--base);
  }

    :is(.brief__channel summary):after {
      transform: rotate(90deg);
    }

  .brief__channel:not([open]) {
    gap: 0;
  }

  .brief__channel[open] summary:after {
    transform: rotate(-90deg);
  }

  .brief__channel h3 {
    flex: 1;
    font-size: var(--font-size--subheader);
    font-weight: var(--font-weight--semibold);
    letter-spacing: var(--letter-spacing--display);
    line-height: var(--line-height--tight);
    margin: 0;
  }

.brief__topics {
  -moz-columns: 2 12rem;
       columns: 2 12rem;
  -moz-column-gap: var(--space--large);
       column-gap: var(--space--large);
  font-size: var(--font-size--150);
  list-style: none;
  margin: 0;
  padding: 0;
}

  .brief__topics li {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    padding-block-end: var(--space--small);
    padding-inline-start: var(--space--medium);
    position: relative;
  }

    :is(.brief__topics li)::before {
      background-color: var(--color--fig-400);
      border-radius: 2px;
      content: "";
      height: 0.5rem;
      inset-block-start: 0.45em;
      inset-inline-start: 0;
      position: absolute;
      width: 0.5rem;
    }
}
@layer components{

.modal--new-case {
  max-width: 60rem;
}

  .modal--new-case .case-form {
    max-width: none;
  }

.case-form {
  gap: 0;
  max-width: var(--container--base);
}

.case-form__section {
  border-bottom: var(--border--base);
  display: grid;
  gap: var(--space--base) var(--space--medium);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-block: var(--space--medium);
}

.case-form__wide {
  grid-column: 1 / -1;
}

.case-form__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space--x-small);
}

  .case-form__heading h2 {
    font-size: var(--font-size--section-title);
    margin: 0;
  }

  .case-form__heading p {
    color: var(--color--text-soft);
    margin: 0;
  }

.case-form :is(input:not([type="checkbox"], [type="submit"]), select, textarea) {
  background-color: var(--color--background-card);
  border: var(--border--dark);
  box-sizing: border-box;
  font-size: var(--font-size--150);
  padding-inline: var(--form-control--padding-inline);
  width: 100%;
}

.case-form :is(input:not([type="checkbox"], [type="submit"]), select) {
  height: var(--form-control--height);
  padding-block: 0;
}

.case-form input[type="date"] {
  padding-inline-end: var(--space--x-small);
}

  :is(.case-form input[type="date"]):invalid {
    color: var(--color--text-soft);
  }

  :is(.case-form input[type="date"])::-webkit-datetime-edit,:is(.case-form input[type="date"])::-webkit-datetime-edit-fields-wrapper,:is(.case-form input[type="date"])::-webkit-datetime-edit-text,:is(.case-form input[type="date"])::-webkit-datetime-edit-day-field,:is(.case-form input[type="date"])::-webkit-datetime-edit-month-field,:is(.case-form input[type="date"])::-webkit-datetime-edit-year-field {
    padding: 0;
  }

.case-form select:has(option[value=""]:checked) {
  color: var(--color--text-soft);
}

.case-form label > span::after {
  content: none;
}

.case-form :is(label, legend) em {
  color: var(--color--text-soft);
  font-style: var(--font-style--normal);
  font-weight: var(--font-weight--normal);
}

.case-form small {
  color: var(--color--text-soft);
  display: flex;
  font-size: var(--font-size--small);
  font-weight: var(--font-weight--normal);
  gap: var(--space--small);
}

.case-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space--x-small);
}

.case-form__sources {
  display: flex;
  flex-direction: column;
  gap: var(--space--x-small);
}

  .case-form__sources li {
    display: flex;
    gap: var(--space--small);
  }

  .case-form__sources .button {
    aspect-ratio: 1;
    border: var(--border--dark);
    flex-shrink: 0;
    height: var(--form-control--height);
    padding: 0;
  }

.case-form__add-button {
  align-self: start;
  background: none;
  border: 0;
  color: var(--color--primary-base);
  cursor: pointer;
  font-size: var(--font-size--150);
  font-weight: var(--font-weight--medium);
  padding-block: var(--space--x-small);
  padding-inline: 0;
}

  .case-form__add-button::before {
    content: "+ ";
  }

  .case-form__add-button:hover {
    text-decoration: underline;
  }

.case-form__ticks {
  display: grid;
  gap: var(--space--small);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

  .case-form__ticks[hidden] {
    display: none;
  }

  .case-form__ticks label {
    background-color: var(--color--background-card);
    justify-self: stretch;
    border: var(--border--dark);
    border-radius: var(--border-radius--base);
    box-sizing: border-box;
    font-weight: var(--font-weight--medium);
    gap: var(--space--small);
    min-height: var(--form-control--height);
    padding-inline: var(--form-control--padding-inline);
  }

    :is(.case-form__ticks label):has(:checked) {
      background-color: var(--color--accent-base);
      border-color: var(--color--primary-base);
    }

.case-form__actions {
  align-items: center;
  display: flex;
  gap: var(--space--small);
  padding-block: var(--space--medium);
}

.case-form__status {
  display: flex;
  gap: var(--space--medium);
  margin-inline-end: auto;
}

.case-form__evidence,
.case-form__in-focus {
  color: var(--color--text-soft);
  white-space: nowrap;
}

  :is(.case-form__evidence,.case-form__in-focus) strong {
    color: var(--color--text);
    margin-inline-start: var(--space--x-small);
  }

@media screen and (max-width: 600px) {
  .case-form__actions {
    flex-wrap: wrap;
  }

    .case-form__actions > .button {
      flex: 1;
    }

  .case-form__status {
    flex-basis: 100%;
  }
}

.case-form:has([data-in-focus="true"]:checked) .case-form__in-focus-no,
.case-form:not(:has([data-in-focus="true"]:checked)) .case-form__in-focus-yes {
  display: none;
}

.case-form__link-button {
  background: none;
  border: 0;
  color: var(--color--link);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

  .case-form__link-button:hover {
    color: var(--color--link-hover);
  }

.case-form__channels {
  display: grid;
  gap: var(--space--small);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

  .case-form__channels label {
    background-color: var(--color--background-card);
    border: var(--border--dark);
    border-radius: var(--border-radius--base);
    box-sizing: border-box;
    font-weight: var(--font-weight--medium);
    justify-content: center;
    justify-self: stretch;
    min-height: var(--form-control--height);
    padding-inline: var(--form-control--padding-inline);
    text-align: center;
  }

    :is(.case-form__channels label):has(:checked) {
      background-color: var(--color--accent-base);
      border-color: var(--color--primary-base);
    }

    :is(.case-form__channels label):has(:focus-visible) {
      outline: var(--border-width--thick) solid var(--color--focus);
      outline-offset: 2px;
    }
}
@layer components{

.cases-sort {
  display: none;
}

@media screen and (max-width: 600px) {
  .cases-sort {
    display: block;
    margin-block-end: var(--space--base);
  }

    .cases-sort label {
      color: var(--color--text-soft);
      font-size: var(--font-size--small);
      font-weight: var(--font-weight--semibold);
    }

    .cases-sort select {
      background-color: var(--color--background-card);
      box-sizing: border-box;
      font-size: var(--font-size--ui);
      height: var(--form-control--height);
      width: 100%;
    }
}
}
@layer components{

.cases-table :is(th, td) {
  background-color: transparent;
  border: 0;
  border-bottom: var(--border--base);
  border-radius: 0;
  padding: var(--space--small) var(--space--medium);
  vertical-align: top;
  white-space: nowrap;
}

  :is(.cases-table :is(th,td)):last-child {
    text-align: end;
  }

  :is(.cases-table :is(th,td)):nth-child(2) {
    white-space: normal;
    width: 100%;
  }

.cases-table th {
  border-bottom: var(--border--dark);
  color: var(--color--text-soft);
  font-weight: var(--font-weight--semibold);
  padding-block: var(--space--x-small);
}

  :is(.cases-table th) a {
    color: inherit;
    text-decoration: none;
  }

.cases-table tbody tr {
  cursor: pointer;
}

  :is(.cases-table tbody tr):hover {
    background-color: var(--color--background-card);
  }

.cases-table td:first-child {
  color: var(--color--text-soft);
  font-family: var(--font-family--display);
  font-weight: var(--font-weight--semibold);
}
  :is(.cases-table td:nth-child(2)) > * {
    max-width: var(--measure--narrow);
  }

  :is(.cases-table td:nth-child(2)) :is(a,.cases-table__title) {
    color: var(--color--text);
    display: block;
    font-family: var(--font-family--display);
    font-size: var(--font-size--section-title);
    font-weight: var(--font-weight--semibold);
    line-height: var(--line-height--tight);
    text-decoration: none;
  }

  :is(.cases-table td:nth-child(2)) p {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--color--text-soft);
    display: -webkit-box;
    margin-block-start: var(--space--xx-small);
    overflow: hidden;
  }

.cases-table td .cases-table__people {
  color: var(--color--primary-base);
  font-size: var(--font-size--small);
}

  :is(.cases-table td .cases-table__people) b {
    color: var(--color--primary-dark);
    font-weight: var(--font-weight--semibold);
  }

.cases-table td p + p {
  color: var(--color--text-soft);
  font-size: var(--font-size--small);
  margin-block-start: var(--space--xx-small);
}

.cases-table td strong {
  color: var(--color--ui-success-dark);
  font-weight: var(--font-weight--semibold);
}

.cases-table meter {
  --segment-width: 0.625rem;
  --segment-gap: 0.1875rem;
  --segment-height: 0.375rem;
  --segment-step: calc(var(--segment-width) + var(--segment-gap));

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;
  background: var(--color--primary-light);
  height: var(--segment-height);
  -webkit-mask-image: repeating-linear-gradient(
    to right,
    black 0 var(--segment-width),
    transparent var(--segment-width) var(--segment-step)
  );
          mask-image: repeating-linear-gradient(
    to right,
    black 0 var(--segment-width),
    transparent var(--segment-width) var(--segment-step)
  );
  vertical-align: middle;
  width: calc(var(--segments, 4) * var(--segment-step) - var(--segment-gap));
}

  :is(.cases-table meter)::-webkit-meter-bar {
    background: var(--color--primary-light);
    border: 0;
    border-radius: 0;
    height: var(--segment-height);
  }

  :is(.cases-table meter)::-webkit-meter-optimum-value {
    background: var(--color--primary-base);
    height: var(--segment-height);
  }

  :is(.cases-table meter)::-moz-meter-bar {
    background: var(--color--primary-base);
  }

.cases-table meter + span {
  color: var(--color--text-soft);
  font-size: var(--font-size--small);
}

.cases-table__requests {
  display: grid;
  gap: var(--space--x-small);
  list-style: none;
  margin: 0;
  padding: 0;
}

  .cases-table__requests p + p {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space--xx-small);
  }

.cases-table__none {
  color: var(--color--text-soft);
}

.cases-table__avatar {
  align-items: center;
  background-color: var(--color--primary-light);
  border-radius: var(--border-radius--circle);
  color: var(--color--primary-dark);
  display: inline-flex;
  font-size: var(--font-size--small);
  font-weight: var(--font-weight--bold);
  height: var(--space--medium);
  justify-content: center;
  margin-inline-end: var(--space--xx-small);
  width: var(--space--medium);
}

@media screen and (min-width: 601px) {
  .cases-table--foia {
    table-layout: fixed;
  }

    .cases-table--foia :is(th,td) {
      white-space: normal;
    }

      :is(.cases-table--foia :is(th,td)):last-child {
        text-align: start;
      }

    .cases-table--foia th:nth-child(1) { width: 6%; }
    .cases-table--foia th:nth-child(2) { width: 28%; }
    .cases-table--foia th:nth-child(3) { width: 11%; }
    .cases-table--foia th:nth-child(4) { width: 12%; }
    .cases-table--foia th:nth-child(5) { width: 14%; }
    .cases-table--foia th:nth-child(6) { width: 29%; }

    .cases-table--foia td:nth-child(4) {
      white-space: nowrap;
    }
}

@media screen and (max-width: 600px) {
  .cases-table,
  .cases-table tbody {
    display: block;
  }

  .cases-table thead {
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
  }

  .cases-table tbody {
    display: grid;
    gap: var(--space--small);
    margin-block-end: var(--space--base);
  }

  .cases-table tbody tr {
    background-color: var(--color--background-card);
    border: var(--border--base);
    border-radius: var(--border-radius--large);
    display: grid;
    gap: var(--space--small) var(--space--base);
    grid-template-areas:
      "number status"
      "story story"
      "where added-by"
      "brief-match story-strength";
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--space--base);
  }

  .cases-table td {
    border: 0;
    padding: 0;
    white-space: normal;
  }

  .cases-table td:nth-child(1) {
    grid-area: number;
  }

  .cases-table td:nth-child(2) {
    grid-area: story;
    width: auto;
  }

  .cases-table td:nth-child(3) {
    grid-area: where;
  }

  .cases-table td:nth-child(4) {
    grid-area: brief-match;
  }

  .cases-table td:nth-child(5) {
    grid-area: story-strength;
  }

  .cases-table td:nth-child(6) {
    grid-area: status;
    justify-self: end;
  }

  .cases-table td:nth-child(7) {
    grid-area: added-by;
    text-align: start;
  }

  .cases-table td[data-label]::before {
    color: var(--color--text-soft);
    content: attr(data-label);
    display: block;
    font-size: var(--font-size--small);
    margin-block-end: var(--space--xx-small);
  }
}

@media screen and (max-width: 600px) {
  .cases-table--foia tbody tr {
    grid-template-areas:
      "number number"
      "story story"
      "brief-match story-strength"
      "requests requests";
  }

  .cases-table--foia td:nth-child(3) {
    grid-area: brief-match;
  }

  .cases-table--foia td:nth-child(4) {
    grid-area: story-strength;
  }

  .cases-table--foia td:nth-child(5) {
    grid-area: requests;
    text-align: start;
  }
}

@media screen and (min-width: 601px) {
  .cases-table--production {
    table-layout: fixed;
  }

    .cases-table--production :is(th,td) {
      white-space: normal;
    }

      :is(.cases-table--production :is(th,td)):last-child {
        text-align: start;
      }

    .cases-table--production th:nth-child(1) { width: 6%; }
    .cases-table--production th:nth-child(2) { width: 44%; }
    .cases-table--production th:nth-child(3) { width: 15%; }
    .cases-table--production th:nth-child(4) { width: 13%; }
    .cases-table--production th:nth-child(5) { width: 12%; }
    .cases-table--production th:nth-child(6) { width: 10%; }
}

@media screen and (max-width: 600px) {
  .cases-table--production tbody tr {
    grid-template-areas:
      "number number"
      "story story"
      "where brief-match"
      "story-strength status";
  }

  .cases-table--production td:nth-child(6) {
    justify-self: start;
  }
}

.cases-table--home tbody tr:not([data-controller="row-link"]) {
  cursor: default;
}

@media screen and (min-width: 601px) {
  .cases-table--home {
    table-layout: fixed;
  }

    .cases-table--home :is(th,td) {
      white-space: normal;
    }

      :is(.cases-table--home :is(th,td)):last-child {
        text-align: start;
      }

    .cases-table--home th:nth-child(1) { width: 6%; }
    .cases-table--home th:nth-child(2) { width: 52%; }
    .cases-table--home th:nth-child(3) { width: 14%; }
    .cases-table--home th:nth-child(4) { width: 14%; }
    .cases-table--home th:nth-child(5) { width: 14%; }
}

@media screen and (max-width: 600px) {
  .cases-table--home tbody tr {
    grid-template-areas:
      "number number"
      "story story"
      "where where"
      "brief-match story-strength";
  }

  .cases-table--home td:nth-child(5) {
    justify-self: start;
  }
}
}
@layer components{

.chart-table {
  font-size: var(--font-size--ui);
}

  .chart-table :is(th,td) {
    background: none;
    border: 0;
    border-block-end: var(--border-width--base) solid var(--color--border-soft);
    padding: var(--space--small) var(--space--base) var(--space--small) 0;
    vertical-align: top;
  }

  .chart-table :is(th,td):last-child {
    padding-inline-end: 0;
  }

  .chart-table thead th {
    border-block-end-color: var(--color--border-mid);
    color: var(--color--text-soft);
    font-size: var(--font-size--small);
    font-weight: normal;
    padding-block-start: 0;
    text-align: end;
  }

  .chart-table thead th:first-child,.chart-table th[scope="row"] {
    text-align: start;
  }

  .chart-table th[scope="row"] {
    font-weight: normal;
  }

  .chart-table td {
    font-variant-numeric: tabular-nums;
    text-align: end;
    white-space: nowrap;
  }

.chart-table__label {
  font-weight: var(--font-weight--medium);
}

.chart-table__hint {
  color: var(--color--text-soft);
  display: block;
  font-size: var(--font-size--small);
}
}
@layer components{

.modal--department {
  max-height: calc(100dvh - var(--space--large));
  max-width: 58rem;
}

  .modal--department > turbo-frame {
    display: flex;
    flex-direction: column;
    min-block-size: 0;
  }

.department__header {
  border-bottom: var(--border--base);
  display: flex;
  flex-direction: column;
  gap: var(--space--small);
  padding: var(--space--large) var(--space--x-large) var(--space--medium) var(--space--large);
}

  .department__header h2 {
    font-size: var(--font-size--subheader);
    font-weight: var(--font-weight--semibold);
    letter-spacing: var(--letter-spacing--display);
    line-height: var(--line-height--tight);
    margin: 0;
  }

  .department__header dd {
    overflow-wrap: anywhere;
  }

.department__state {
  color: var(--color--text-soft);
  font-weight: var(--font-weight--semibold);
  margin: 0;
}

.department__body {
  background-color: var(--color--background-x-light);
  display: flex;
  flex-direction: column;
  gap: var(--space--base);
  min-block-size: 0;
  overflow-y: auto;
  padding: var(--space--medium) var(--space--large);
}

.department__footer {
  border-top: var(--border--base);
  display: flex;
  gap: var(--space--small);
  justify-content: flex-end;
  padding: var(--space--base) var(--space--large);
}

.department-card {
  background-color: var(--color--background-card);
  border: var(--border--base);
  border-radius: var(--border-radius--large);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space--base);
  padding: var(--space--medium);
}

  .department-card h3 {
    font-size: var(--font-size--section-title);
    font-weight: var(--font-weight--semibold);
    margin: 0;
  }

  .department-card h3:has( + .department-card__intro) {
    margin-block-end: calc(-1 * var(--space--small));
  }

.department-card__header {
  align-items: baseline;
  display: flex;
  gap: var(--space--small);
  justify-content: space-between;
}

.department-card__action {
  font-size: var(--font-size--ui);
  font-weight: var(--font-weight--medium);
  text-decoration: none;
}

.note-form {
  background-color: var(--color--accent-base);
  border-top: var(--border--base);
  display: flex;
  flex-direction: column;
  gap: var(--space--base);
  padding: var(--space--medium) var(--space--large);
  position: relative;
}

  .note-form textarea {
    background-color: var(--color--background-card);
    border: var(--border--dark);
    border-radius: var(--border-radius--base);
    box-sizing: border-box;
    font-size: var(--font-size--150);
    padding: var(--space--small) var(--form-control--padding-inline);
    width: 100%;
  }

  .note-form label {
    font-weight: var(--font-weight--medium);
  }

  .note-form label > span::after {
    content: none;
  }

.note-form__header {
  padding-inline-end: var(--space--large);
}

  .note-form__header h3 {
    font-size: var(--font-size--ui);
    font-weight: var(--font-weight--semibold);
    margin: 0;
  }

  .note-form__header p {
    color: var(--color--text-soft);
    font-size: var(--font-size--ui);
    margin: var(--space--xx-small) 0 0;
  }

.note-form__close {
  color: var(--color--text-soft);
  font-size: var(--font-size--300);
  inset-block-start: var(--space--medium);
  inset-inline-end: var(--space--large);
  line-height: 1;
  position: absolute;
  text-decoration: none;
}

.note-form__actions {
  display: flex;
  gap: var(--space--small);
  justify-content: flex-end;
}

.department-card__intro {
  color: var(--color--text-soft);
  font-size: var(--font-size--ui);
  margin: 0;
}

.department-stats {
  display: grid;
  gap: var(--space--base);
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  margin: var(--space--x-small) 0 0;
}

  .department-stats dt {
    color: var(--color--text-soft);
    font-size: var(--font-size--small);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .department-stats dd {
    font-size: var(--font-size--section-title);
    font-weight: var(--font-weight--semibold);
    margin: var(--space--xx-small) 0 0;
  }

.department-notes {
  display: flex;
  flex-direction: column;
  gap: var(--space--small);
  list-style: none;
  margin: 0;
  padding: 0;
}

.department-note {
  background-color: var(--color--background-base);
  border: 1px solid transparent;
  border-radius: var(--border-radius--large);
  padding: var(--space--base) var(--space--medium);
}

  .department-note:first-child {
    background-color: var(--color--ui-warning-light);
    border-color: var(--color--toffee-200);
  }

  .department-note p {
    font-size: var(--font-size--ui);
    margin: 0;
  }

  .department-note p + p {
    color: var(--color--text-soft);
    font-size: var(--font-size--small);
    margin-block-start: var(--space--xx-small);
  }

.department-requests {
  list-style: none;
  margin: 0;
  padding: 0;
}

.department-request {
  align-items: baseline;
  border-bottom: var(--border--base);
  display: grid;
  gap: var(--space--x-small) var(--space--small);
  grid-template-columns: 3rem minmax(0, 1fr) auto auto;
  padding-block: var(--space--small);
}

  .department-request:last-child {
    border-bottom: 0;
  }

  .department-request > a {
    font-weight: var(--font-weight--medium);
    text-decoration: none;
  }

.department-request__case {
  color: var(--color--text-soft);
  font-size: var(--font-size--small);
  font-weight: var(--font-weight--semibold);
}

.department-request__summary {
  display: flex;
  flex-direction: column;
  gap: var(--space--xx-small);
  min-width: 0;
}

.department-request__title {
  font-weight: var(--font-weight--medium);
}

.department-request__records {
  color: var(--color--text-soft);
  font-size: var(--font-size--small);
}

.department-request__outcome {
  color: var(--color--text-muted);
  font-size: var(--font-size--small);
}

@media screen and (max-width: 600px) {
  .modal--department > turbo-frame {
    display: block;
  }

  .department__body {
    overflow-y: visible;
  }

  .department-request {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

    .department-request > :is(.department-request__outcome,a) {
      grid-column: 2;
    }
}
}
@layer components{

.modal--new-department {
  max-width: 58rem;
}

.department-form {
  gap: 0;
}

.department-form__fields {
  display: grid;
  gap: var(--space--base) var(--space--medium);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-block: var(--space--medium);
}

.department-form__fields .field_with_errors {
  display: contents;
}

.department-form__name {
  grid-column: span 2;
}

.department-form__wide {
  grid-column: 1 / -1;
}

.department-form :is(input:not([type="submit"]), select, textarea) {
  background-color: var(--color--background-card);
  border: var(--border--dark);
  box-sizing: border-box;
  font-size: var(--font-size--150);
  padding-inline: var(--form-control--padding-inline);
  width: 100%;
}

.department-form :is(input:not([type="submit"]), select) {
  height: var(--form-control--height);
  padding-block: 0;
}

.department-form select:has(option[value=""]:checked) {
  color: var(--color--text-soft);
}

.department-form label > span::after {
  content: none;
}

.department-form label em {
  color: var(--color--text-soft);
  font-style: var(--font-style--normal);
  font-weight: var(--font-weight--normal);
}

.department-form__actions {
  border-top: var(--border--base);
  display: flex;
  gap: var(--space--small);
  justify-content: flex-end;
  margin-inline: calc(-1 * var(--space--large));
  padding: var(--space--medium) var(--space--large);
}

@media screen and (max-width: 600px) {
  .department-form__fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .department-form__name {
    grid-column: auto;
  }
}

.department-form--edit {
  padding-inline: var(--space--large);
}
}
@layer components{

.departments-table :is(th, td) {
  background-color: transparent;
  border: 0;
  border-bottom: var(--border--base);
  border-radius: 0;
  padding: var(--space--small) var(--space--medium);
  vertical-align: top;
}

.departments-table td {
  padding-block: var(--space--medium);
}

.departments-table th {
  border-bottom: var(--border--dark);
  color: var(--color--text-soft);
  font-weight: var(--font-weight--semibold);
  padding-block: var(--space--x-small);
  white-space: nowrap;
}

  :is(.departments-table th) a {
    color: inherit;
    text-decoration: none;
  }

.departments-table tbody tr {
  cursor: pointer;
}

  :is(.departments-table tbody tr):hover {
    background-color: var(--color--background-card);
  }

.departments-table td:nth-child(1) {
  color: var(--color--text-soft);
  font-family: var(--font-family--display);
  font-weight: var(--font-weight--semibold);
  white-space: nowrap;
}

.departments-table td:nth-child(2) {
  color: var(--color--text);
  font-family: var(--font-family--display);
  font-size: var(--font-size--section-title);
  font-weight: var(--font-weight--semibold);
  line-height: var(--line-height--tight);
}

  :is(.departments-table td:nth-child(2)) a {
    color: inherit;
    text-decoration: none;
  }

.departments-table td:nth-child(3) {
  font-weight: var(--font-weight--semibold);
}

.departments-table td:nth-child(4) {
  max-width: var(--measure--narrow);
}

  :is(.departments-table td:nth-child(4)) p {
    margin: 0;
  }

  :is(.departments-table td:nth-child(4)) p + p {
    color: var(--color--text-soft);
    font-size: var(--font-size--small);
    margin-block-start: var(--space--xx-small);
  }

@media screen and (min-width: 601px) {
  .departments-table {
    table-layout: fixed;
    width: 100%;
  }

    .departments-table th:nth-child(1) { width: 12%; }
    .departments-table th:nth-child(2) { width: 33%; }
    .departments-table th:nth-child(3) { width: 15%; }
    .departments-table th:nth-child(4) { width: 40%; }
}

@media screen and (max-width: 600px) {
  .departments-table,
  .departments-table tbody {
    display: block;
  }

  .departments-table thead {
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
  }

  .departments-table tbody {
    display: grid;
    gap: var(--space--small);
    margin-block-end: var(--space--base);
  }

  .departments-table tbody tr {
    background-color: var(--color--background-card);
    border: var(--border--base);
    border-radius: var(--border-radius--large);
    display: grid;
    gap: var(--space--small);
    padding: var(--space--base);
  }

  .departments-table td {
    border: 0;
    max-width: none;
    padding: 0;
  }

  .departments-table td:nth-child(4):not(:has(p)) {
    display: none;
  }

  .departments-table td[data-label]::before {
    color: var(--color--text-soft);
    content: attr(data-label);
    display: block;
    font-size: var(--font-size--small);
    margin-block-end: var(--space--xx-small);
  }
}
}
@layer components{

.page-header__search {
  anchor-name: --filters;
}

.filter-panel {
  background-color: var(--color--background-card);
  border: var(--border--base);
  border-radius: var(--border-radius--large);
  box-shadow: 0 0.75rem 2rem rgb(36 31 41 / 0.12);
  box-sizing: border-box;
  color: var(--color--text);
  inset: auto;
  margin: var(--space--x-small) 0 0;
  max-height: calc(100% - var(--space--x-small) - var(--space--base));
  max-width: calc(100vw - 2 * var(--space--base));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space--medium);
  position-anchor: --filters;
  position-area: block-end span-inline-start;
  width: var(--form-control--width-full);
}

  .filter-panel:popover-open {
    display: grid;
    gap: var(--space--medium);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

.filter-panel__group {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

  .filter-panel__group legend {
    color: var(--color--text-soft);
    font-size: var(--font-size--small);
    font-weight: var(--font-weight--semibold);
    margin-block-end: var(--space--x-small);
    padding: 0;
  }

.filter-panel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space--x-small);
}

.filter-panel__footer {
  align-items: center;
  border-block-start: var(--border--base);
  display: flex;
  gap: var(--space--base);
  grid-column: 1 / -1;
  justify-content: flex-end;
  padding-block-start: var(--space--base);
}

.filter-panel__show-results {
  display: none;
}

.filter-list {
  grid-column: 1 / -1;
}

.filter-list__find {
  box-sizing: border-box;
  font-size: var(--font-size--ui);
  width: 100%;
}

.filter-list__items {
  border: var(--border--light);
  border-radius: var(--border-radius--base);
  list-style: none;
  margin: 0;
  max-height: 15rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space--xx-small);
}

.filter-list__item {
  border-radius: var(--border-radius--base);
  box-sizing: border-box;
  font-size: var(--font-size--ui);
  padding: var(--space--x-small) var(--space--small);
  width: 100%;
}

  .filter-list__item:hover {
    background-color: var(--color--background-x-light);
  }

.filter-list__label {
  flex: 1;
  min-width: 0;
}

.filter-list__description {
  color: var(--color--text-soft);
  font-size: var(--font-size--small);
  margin-inline-start: var(--space--xx-small);
}

.filter-list__empty {
  color: var(--color--text-soft);
  font-size: var(--font-size--ui);
  margin: 0;
}

.filter-chip {
  align-items: center;
  background-color: var(--color--background-x-light);
  border: var(--border--light);
  border-radius: var(--border-radius--pill);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--font-size--ui);
  gap: var(--space--x-small);
  padding: var(--space--xx-small) var(--space--small);
  transition: background-color var(--transition-duration--base) var(--transition-timing--base);
}

  .filter-chip input {
    clip-path: inset(50%);
    height: 1px;
    margin: 0;
    overflow: hidden;
    position: absolute;
    width: 1px;
  }

  .filter-chip:hover {
    border-color: var(--color--primary-light);
  }

  .filter-chip:has(:checked) {
    background-color: var(--color--accent-base);
    border-color: var(--color--primary-base);
    color: var(--color--primary-dark);
  }

  .filter-chip:has(:focus-visible) {
    outline: 2px solid var(--color--focus);
    outline-offset: 2px;
  }

.filter-chip__count {
  color: var(--color--text-soft);
  font-size: var(--font-size--small);
}

@media screen and (max-width: 600px) {
  .filter-panel {
    border: 0;
    border-radius: 0;
    height: 100dvh;
    inset: 0;
    margin: 0;
    max-height: none;
    max-width: none;
    padding-block-end: 0;
    position: fixed;
    position-area: none;
    width: 100%;
  }

    .filter-panel:popover-open {
      align-content: start;
      grid-template-columns: minmax(0, 1fr);
    }

  .filter-panel__footer {
    background-color: var(--color--background-card);
    inset-block-end: 0;
    justify-content: space-between;
    padding-block-end: var(--space--base);
    position: sticky;
  }

  .filter-panel__show-results {
    display: flex;
  }

  .filter-list__find {
    inset-block-start: calc(-1 * var(--space--medium));
    position: sticky;
    z-index: 1;
  }

  .filter-list__items {
    max-height: none;
  }
}
}
@layer components{

.filter-pills {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space--small);
  margin-block-end: var(--space--base);
}

.filter-pills__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space--small);
  list-style: none;
  margin: 0;
  padding: 0;
}

.filter-pill {
  align-items: center;
  background-color: var(--color--background-x-light);
  border: var(--border--base);
  border-radius: var(--border-radius--base);
  color: var(--color--text);
  display: inline-flex;
  font-size: var(--font-size--ui);
  font-weight: var(--font-weight--semibold);
  gap: var(--space--x-small);
  padding: var(--space--xx-small) var(--space--small);
}

.filter-pill__group {
  color: var(--color--text-soft);
  font-weight: var(--font-weight--normal);
}

.filter-pill__remove {
  color: var(--color--text-soft);
  margin-inline-start: var(--space--xx-small);
  text-decoration: none;
}

  .filter-pill__remove:hover {
    color: var(--color--primary-base);
  }

  .filter-pill__remove:focus-visible {
    outline: 2px solid var(--color--focus);
    outline-offset: 2px;
  }

@media screen and (max-width: 600px) {
  .filter-pills {
    display: none;
  }
}
}
@layer components{

.modal--case {
  max-width: 58rem;
}

  .modal--case > turbo-frame {
    display: flex;
    flex-direction: column;
    min-block-size: 0;
  }

.foia-case {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space--medium);
  padding: var(--space--large) var(--space--large) var(--space--medium);
}

.foia-case__header {
  padding-inline-end: var(--space--large);
}

  .foia-case__header h2 {
    font-size: var(--font-size--subheader);
    font-weight: var(--font-weight--semibold);
    letter-spacing: var(--letter-spacing--display);
    line-height: var(--line-height--tight);
    margin: var(--space--small) 0 0;
  }

.modal--case-details {
  max-block-size: calc(100dvh - 2 * var(--space--x-large));
  max-width: 63rem;
}

.case {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
}

.case-header {
  border-bottom: var(--border--base);
  display: grid;
  gap: var(--space--medium);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--space--large) var(--space--large) var(--space--medium);
}

  .case-header h2 {
    font-size: var(--font-size--subheader);
    font-weight: var(--font-weight--semibold);
    letter-spacing: var(--letter-spacing--display);
    line-height: var(--line-height--tight);
    margin: var(--space--small) 0 var(--space--medium);
  }

.case-header__logged {
  color: var(--color--text-soft);
  font-size: var(--font-size--ui);
  line-height: var(--line-height--base);
  margin: 0;
  padding-inline-end: var(--space--large);
}

.case-footer {
  background-color: var(--color--background-card);
  border-top: var(--border--base);
  display: flex;
  gap: var(--space--small);
  justify-content: flex-end;
  padding: var(--space--base) var(--space--large);
}

.case-footer--start {
  justify-content: flex-start;
}

  .case-footer--start .case-footer__title {
    color: var(--color--text-soft);
    font-weight: var(--font-weight--normal);
    margin: 0 var(--space--small) 0 0;
  }

  .case-footer--start .case-footer__end {
    margin-inline-start: auto;
  }

  .case-footer--start .button:not(:hover,:focus-visible) {
    background-color: var(--color--background-card);
  }

.case-facts__note {
  color: var(--color--text-soft);
  font-weight: var(--font-weight--normal);
}

.case-body {
  align-items: start;
  background-color: var(--color--background-base);
  display: grid;
  gap: var(--space--base);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-block-size: 0;
  overflow-y: auto;
  padding: var(--space--medium) var(--space--large);
}

.case-card {
  background-color: var(--color--background-card);
  border: var(--border--base);
  border-radius: var(--border-radius--large);
  display: flex;
  flex-direction: column;
  gap: var(--space--base);
  padding: var(--space--medium);
}

  .case-card > h3,.case-card > header h3 {
    font-size: var(--font-size--section-title);
    font-weight: var(--font-weight--semibold);
    margin: 0;
  }

  .case-card > p {
    font-size: var(--font-size--150);
    line-height: var(--line-height--base);
    margin: 0;
  }

  .case-card > header p {
    color: var(--color--text-soft);
    font-size: var(--font-size--ui);
    margin: var(--space--xx-small) 0 0;
  }

.case-card__empty {
  color: var(--color--text-soft);
  font-size: var(--font-size--150);
  margin: 0;
}

.case-card__agencies {
  display: flex;
  flex-direction: column;
  font-size: var(--font-size--150);
  margin: 0;
}

  .case-card__agencies li {
    display: flex;
    gap: var(--space--base);
    justify-content: space-between;
    padding-block: var(--space--small);
  }

    :is(.case-card__agencies li):first-child {
      padding-block-start: 0;
    }

    :is(.case-card__agencies li):last-child {
      padding-block-end: 0;
    }

    :is(.case-card__agencies li) + li {
      border-top: var(--border--base);
    }

  .case-card__agencies span:first-child {
    font-weight: var(--font-weight--medium);
  }

  .case-card__agencies span:last-child {
    color: var(--color--text-soft);
    flex-shrink: 0;
  }

.case-card__checklist {
  display: grid;
  font-size: var(--font-size--150);
  gap: var(--space--base);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  line-height: var(--line-height--base);
  margin: 0;
}

  .case-card__checklist label {
    align-items: center;
    display: flex;
    font-weight: var(--font-weight--normal);
    gap: var(--space--small);
  }

  .case-card__checklist li:has(input:not(:checked)) {
    color: var(--color--text-soft);
  }

  .case-card__checklist input {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border: var(--border--dark);
    border-radius: var(--border-radius--small);
    flex-shrink: 0;
    height: 1.25rem;
    margin: 0;
    width: 1.25rem;
  }

    :is(.case-card__checklist input):checked {
      background-color: var(--color--primary-base);
      border-color: var(--color--primary-base);
    }

.case-timeline {
  display: flex;
  flex-direction: column;
  font-size: var(--font-size--150);
  gap: var(--space--small);
  line-height: var(--line-height--base);
  list-style: none;
  margin: 0;
  padding: 0;
}

  .case-timeline li {
    -moz-column-gap: var(--space--medium);
         column-gap: var(--space--medium);
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
  }

  .case-timeline li:last-child {
    font-weight: var(--font-weight--semibold);
  }

.case-timeline__date {
  color: var(--color--text-soft);
  grid-row: span 2;
}

.case-timeline__by {
  color: var(--color--text-soft);
  font-size: var(--font-size--ui);
  font-weight: var(--font-weight--normal);
}

.case-card--wide {
  grid-column: 1 / -1;
}

.case-card__topics {
  margin: 0;
}

.case-card__sources {
  display: flex;
  flex-direction: column;
  font-size: var(--font-size--150);
  margin: 0;
}

  .case-card__sources li {
    display: flex;
    flex-direction: column;
    gap: var(--space--xx-small);
    padding-block: var(--space--small);
  }

    :is(.case-card__sources li):first-child {
      padding-block-start: 0;
    }

    :is(.case-card__sources li):last-child {
      padding-block-end: 0;
    }

    :is(.case-card__sources li) + li {
      border-top: var(--border--base);
    }

  .case-card__sources a {
    font-weight: var(--font-weight--medium);
    text-decoration: none;
  }

  .case-card__sources span {
    color: var(--color--text-soft);
    font-size: var(--font-size--ui);
    overflow-wrap: anywhere;
  }

.case-card__people {
  color: var(--color--text-soft);
  font-size: var(--font-size--150);
  line-height: var(--line-height--base);
  margin: 0;
}

  .case-card__people div {
    -moz-column-gap: var(--space--xx-small);
         column-gap: var(--space--xx-small);
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .case-card__people .case-facts__note {
    grid-column: 2;
  }

  .case-card__people dt {
    font-weight: var(--font-weight--semibold);
  }

    :is(.case-card__people dt)::after {
      content: ":";
    }

  .case-card__people dd {
    margin: 0;
  }

.foia-case__heading {
  align-items: center;
  display: flex;
  gap: var(--space--small);
  margin: 0;
}

.foia-case__number {
  color: var(--color--text-soft);
  font-size: var(--font-size--small);
  font-weight: var(--font-weight--semibold);
  letter-spacing: 0.04em;
}

.foia-case__edit {
  margin-block-start: var(--space--small);
  width: -moz-fit-content;
  width: fit-content;
}

.case-edit {
  padding: var(--space--large) var(--space--large) 0;
}

  .case-edit .case-form {
    max-width: none;
  }

.case-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space--small) var(--space--large);
  margin: 0;
}

  .case-facts dt {
    color: var(--color--text-soft);
    font-size: var(--font-size--small);
    font-weight: var(--font-weight--normal);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .case-facts dd {
    font-size: var(--font-size--ui);
    font-weight: var(--font-weight--medium);
    margin: var(--space--xx-small) 0 0;
  }

.case-details {
  align-items: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

  .case-details details {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .case-details summary {
    align-self: end;
    color: var(--color--link);
    font-size: var(--font-size--ui);
    font-weight: var(--font-weight--medium);
  }

    :is(.case-details summary):hover {
      color: var(--color--link-hover);
    }

    :is(.case-details summary)::after {
      display: none;
    }

  .case-details details[open] .case-details__read,.case-details details:not([open]) .case-details__hide {
    display: none;
  }

.case-details__requests {
  color: var(--color--text-soft);
  font-size: var(--font-size--ui);
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.case-details__body {
  background-color: var(--color--background-x-light);
  border: var(--border--base);
  border-radius: var(--border-radius--large);
  display: flex;
  flex-direction: column;
  gap: var(--space--base);
  margin-block-start: var(--space--base);
  padding: var(--space--medium);
}

  .case-details__body > p {
    font-size: var(--font-size--ui);
    line-height: var(--line-height--base);
    margin: 0;
  }

.foia-case .case-details__body {
  max-block-size: min(24rem, 45dvh);
  overflow-y: auto;
}
  .case-details__section h3,.case-details__section h3 + p {
    color: var(--color--text-soft);
    font-size: var(--font-size--small);
    font-weight: var(--font-weight--normal);
    letter-spacing: 0.04em;
    margin: 0 0 var(--space--x-small);
    text-transform: uppercase;
  }

  .case-details__section h3 + p {
    margin-block-end: var(--space--small);
  }

.case-details__checklist {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.case-details__source-list {
  display: flex;
  flex-direction: column;
  font-size: var(--font-size--ui);
}

  .case-details__source-list li {
    display: flex;
    flex-direction: column;
    gap: var(--space--xx-small);
    padding-block: var(--space--small);
  }

    :is(.case-details__source-list li):first-child {
      padding-block-start: 0;
    }

    :is(.case-details__source-list li):last-child {
      padding-block-end: 0;
    }

    :is(.case-details__source-list li) + li {
      border-top: var(--border--base);
    }

  .case-details__source-list a {
    font-weight: var(--font-weight--medium);
    text-decoration: none;
  }

  .case-details__source-list span {
    color: var(--color--text-soft);
    overflow-wrap: anywhere;
  }

.foia-case__requests {
  background-color: var(--color--background-x-light);
  border-top: var(--border--base);
  display: flex;
  flex-direction: column;
  gap: var(--space--base);
  min-block-size: 0;
  overflow-y: auto;
  padding: var(--space--medium) var(--space--large);
}

.foia-case__log-request {
  align-self: start;
  font-size: var(--font-size--ui);
  font-weight: var(--font-weight--medium);
  text-decoration: none;
}

.case-footer__title {
  align-self: center;
  font-size: var(--font-size--ui);
  font-weight: var(--font-weight--semibold);
  margin: 0 auto 0 0;
}

.foia-case__dropped {
  background-color: var(--color--held-light);
  border: var(--border--base);
  border-radius: var(--border-radius--large);
  font-size: var(--font-size--ui);
  padding: var(--space--base) var(--space--medium);
}

  .foia-case__dropped h3 {
    font-size: var(--font-size--ui);
    font-weight: var(--font-weight--semibold);
    margin: 0;
  }

  .foia-case__dropped p {
    margin: var(--space--xx-small) 0 0;
  }

.case-body > .foia-case__dropped {
  grid-column: 1 / -1;
}

.foia-case__dropped-by {
  color: var(--color--text-soft);
}

.foia-request {
  background-color: var(--color--background-card);
  border: var(--border--base);
  border-radius: var(--border-radius--large);
}

  .foia-request h3 {
    font-size: var(--font-size--ui);
    font-weight: var(--font-weight--semibold);
    margin: 0;
  }

  .foia-request p {
    color: var(--color--text-soft);
    font-size: var(--font-size--ui);
    margin: var(--space--xx-small) 0 0;
  }

  .foia-request .badge {
    align-self: center;
    flex-shrink: 0;
  }

.foia-request__header,
.foia-request__body {
  align-items: center;
  display: flex;
  gap: var(--space--base);
  justify-content: space-between;
  padding: var(--space--base) var(--space--medium);
}

.foia-request__body {
  border-top: var(--border--base);
}

  .foia-request__body .button {
    flex-shrink: 0;
  }

.foia-request__actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--space--x-small);
}

.log-request {
  background-color: var(--color--accent-base);
  border-top: var(--border--base);
  display: grid;
  gap: var(--space--base) var(--space--medium);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  inset-block-end: calc(-1 * var(--space--medium));
  margin: 0 calc(-1 * var(--space--large)) calc(-1 * var(--space--medium));
  padding: var(--space--medium) var(--space--large);
  position: sticky;
}

  .log-request > :is(header,#error_explanation,.log-request__records,.log-request__actions) {
    grid-column: 1 / -1;
  }

  .log-request :is(input:not([type="checkbox"],[type="submit"]),select) {
    background-color: var(--color--background-card);
    border: var(--border--dark);
    border-radius: var(--border-radius--base);
    box-sizing: border-box;
    font-size: var(--font-size--150);
    font-weight: var(--font-weight--normal);
    height: var(--form-control--height);
    padding-block: 0;
    padding-inline: var(--form-control--padding-inline);
    width: 100%;
  }

  .log-request select:has(option[value=""]:checked) {
    color: var(--color--text-soft);
  }

  .log-request label > span::after {
    content: none;
  }

  .log-request :is(label,legend) {
    font-weight: var(--font-weight--medium);
  }

  .log-request legend {
    font-size: var(--font-size--ui);
    margin-block-end: var(--space--x-small);
    padding: 0;
  }

  .log-request :is(label,legend) em {
    color: var(--color--text-soft);
    font-style: var(--font-style--normal);
    font-weight: var(--font-weight--normal);
  }

.log-request--update {
  grid-template-columns: 3fr 2fr 2fr;
}

  .log-request--update > [hidden] {
    display: none;
  }

.log-request--decision {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.log-request__header {
  padding-inline-end: var(--space--large);
}

  .log-request__header h3 {
    font-size: var(--font-size--ui);
    font-weight: var(--font-weight--semibold);
    margin: 0;
  }

  .log-request__header p {
    color: var(--color--text-soft);
    font-size: var(--font-size--ui);
    margin: var(--space--xx-small) 0 0;
  }

.log-request__close {
  color: var(--color--text-soft);
  font-size: var(--font-size--300);
  inset-block-start: var(--space--medium);
  inset-inline-end: var(--space--large);
  line-height: 1;
  position: absolute;
  text-decoration: none;
}

.log-request__wide {
  grid-column: 1 / -1;
}

.log-request__ticks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space--x-small);
}

  .log-request__ticks label {
    background-color: var(--color--background-card);
    border: var(--border--dark);
    border-radius: var(--border-radius--pill);
    font-weight: var(--font-weight--medium);
    padding: var(--space--xx-small) var(--space--small);
  }

    :is(.log-request__ticks label):has(:checked) {
      background-color: var(--color--primary-light);
      border-color: var(--color--primary-base);
    }

.log-request__actions {
  display: flex;
  gap: var(--space--small);
  justify-content: flex-end;
}

@media screen and (max-width: 600px) {
  .modal--case > turbo-frame {
    display: block;
  }

  .foia-case__requests {
    overflow-y: visible;
  }

  .case-header,
  .case-body,
  .case-card__checklist,
  .case-details__checklist {
    grid-template-columns: minmax(0, 1fr);
  }

  .case-header > div {
    padding-inline-end: var(--space--large);
  }

  .case-body {
    overflow-y: visible;
  }

  .case-footer {
    bottom: 0;
    position: sticky;
  }

  .log-request {
    grid-template-columns: minmax(0, 1fr);
    inset-block-end: auto;
    position: relative;
  }
}
}
@layer components{

.foia-timeline:not(:has(li)) {
  display: none;
}

.foia-timeline {
  display: grid;
  font-size: var(--font-size--ui);
  gap: var(--space--x-small);
  list-style: none;
  margin: 0;
  padding: 0;
}

.foia-timeline__entry {
  display: grid;
  gap: var(--space--base);
  grid-template-columns: 3.5rem 1fr;
}

  .foia-timeline__entry time {
    color: var(--color--text-soft);
  }

  .foia-timeline__entry a {
    color: inherit;
  }
  .foia-timeline__entry--latest time,.foia-timeline__entry--latest .foia-timeline__label {
    color: var(--color--text);
    font-weight: var(--font-weight--semibold);
  }

  .foia-timeline__entry--latest .foia-timeline__detail {
    color: var(--color--text-soft);
  }

.foia-timeline__note {
  color: var(--color--text-soft);
  margin: 0;
  overflow-wrap: anywhere;
}

  .foia-timeline__note p {
    margin: 0;
  }

  .foia-timeline__note p + p {
    margin-block-start: var(--space--x-small);
  }
}
@layer components{

.funnel-chart {
  -moz-column-gap: var(--space--medium);
       column-gap: var(--space--medium);
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) auto;
  list-style: none;
  margin: 0;
  padding: 0;
  row-gap: var(--space--x-small);
}

.funnel-chart[hidden] {
  display: none;
}

.funnel-chart__row {
  align-items: center;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  row-gap: var(--space--x-small);
}

.funnel-chart__label {
  font-size: var(--font-size--ui);
  font-weight: var(--font-weight--medium);
}

.funnel-chart__bar {
  background-color: var(--color--accent-light);
  block-size: 1.5rem;
  border-radius: var(--border-radius--small);
  display: block;
  inline-size: var(--bar-width);
}

.funnel-chart__row--last .funnel-chart__bar {
  background-color: var(--color--primary-base);
}

.funnel-chart__count {
  font-size: var(--font-size--ui);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight--semibold);
  text-align: end;
}

.funnel-chart__conversion {
  color: var(--color--text-soft);
  font-size: var(--font-size--small);
  grid-column: 2 / -1;
}
}
@layer components{

.identity {
  align-items: center;
  background-color: var(--color--accent-base);
  border-radius: var(--border-radius--base);
  display: flex;
  gap: var(--space--base);
  padding: var(--space--base);
}

.identity__initial {
  align-items: center;
  background-color: var(--color--primary-base);
  border-radius: var(--border-radius--circle);
  color: var(--color--text-inverse);
  display: flex;
  flex-shrink: 0;
  font-family: var(--font-family--display);
  font-size: var(--font-size--section-title);
  font-weight: var(--font-weight--semibold);
  height: var(--space--x-large);
  justify-content: center;
  width: var(--space--x-large);
}

.identity > div {
  display: flex;
  flex-direction: column;
  gap: var(--space--xx-small);
}

.identity strong {
  font-family: var(--font-family--display);
  font-size: var(--font-size--subheader);
  font-weight: var(--font-weight--semibold);
  line-height: var(--line-height--tight);
}

.identity span:not(.identity__initial) {
  color: var(--color--primary-dark);
  font-weight: var(--font-weight--semibold);
}

.identity small {
  color: var(--color--text-soft);
  font-size: var(--font-size--body);
}
}
@layer components{

.modal--invoice {
  max-height: calc(100dvh - var(--space--large));
  max-width: 58rem;
}

  .modal--invoice > turbo-frame {
    display: flex;
    flex-direction: column;
    min-block-size: 0;
  }

.invoice {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space--medium);
  padding: var(--space--large) var(--space--large) var(--space--medium);
}

.invoice__header {
  padding-inline-end: var(--space--large);
}

  .invoice__header h2 {
    font-size: var(--font-size--subheader);
    font-weight: var(--font-weight--semibold);
    letter-spacing: var(--letter-spacing--display);
    line-height: var(--line-height--tight);
    margin: var(--space--small) 0 0;
  }

.invoice__heading {
  align-items: center;
  display: flex;
  gap: var(--space--small);
  margin: 0;
}

.invoice__number {
  color: var(--color--text-soft);
  font-size: var(--font-size--small);
  font-weight: var(--font-weight--semibold);
  letter-spacing: 0.04em;
}

.invoice__quoted {
  color: var(--color--text-soft);
  font-size: var(--font-size--ui);
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.invoice__activity {
  background-color: var(--color--background-x-light);
  border-top: var(--border--base);
  display: flex;
  flex-direction: column;
  gap: var(--space--base);
  min-block-size: 0;
  overflow-y: auto;
  padding: var(--space--medium) var(--space--large);
}

.invoice__card {
  background-color: var(--color--background-card);
  border: var(--border--base);
  border-radius: var(--border-radius--large);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space--base);
  padding: var(--space--medium);
}

  .invoice__card h3 {
    font-size: var(--font-size--section-title);
    font-weight: var(--font-weight--semibold);
    margin: 0;
  }

.invoice__card-hint {
  color: var(--color--text-soft);
  margin: 0;
}

.invoice__payment-form {
  align-items: end;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space--base);
  justify-content: flex-end;
  margin: 0;
}

.invoice__footer {
  border-top: var(--border--base);
  display: flex;
  gap: var(--space--small);
  justify-content: flex-end;
  padding: var(--space--base) var(--space--large);
}

  .invoice__footer form {
    margin: 0;
  }

@media screen and (max-width: 600px) {
  .modal--invoice > turbo-frame {
    display: block;
  }

  .invoice__activity {
    overflow-y: visible;
  }
}
}
@layer components{

.invoices-table :is(th, td) {
  background-color: transparent;
  border: 0;
  border-bottom: var(--border--base);
  border-radius: 0;
  padding: var(--space--small) var(--space--medium);
  vertical-align: top;
}

.invoices-table td {
  padding-block: var(--space--medium);
}

  :is(.invoices-table td) p {
    margin: 0;
  }

  :is(.invoices-table td) :is(p + p,.badge + p) {
    color: var(--color--text-soft);
    font-size: var(--font-size--small);
    margin-block-start: var(--space--xx-small);
  }

.invoices-table th {
  border-bottom: var(--border--dark);
  color: var(--color--text-soft);
  font-weight: var(--font-weight--semibold);
  padding-block: var(--space--x-small);
  white-space: nowrap;
}

  :is(.invoices-table th) a {
    color: inherit;
    text-decoration: none;
  }

.invoices-table td:nth-child(1) {
  color: var(--color--text-soft);
  font-family: var(--font-family--display);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight--semibold);
}

.invoices-table tbody tr {
  cursor: pointer;
}

  :is(.invoices-table tbody tr):hover {
    background-color: var(--color--background-card);
  }

.invoices-table td:nth-child(2) > p:first-child {
  color: var(--color--text);
  font-family: var(--font-family--display);
  font-size: var(--font-size--section-title);
  font-weight: var(--font-weight--semibold);
  line-height: var(--line-height--tight);
}

  :is(.invoices-table td:nth-child(2) > p:first-child) a {
    color: inherit;
    text-decoration: none;
  }

.invoices-table td:nth-child(4) {
  font-family: var(--font-family--display);
  font-size: var(--font-size--section-title);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight--semibold);
  white-space: nowrap;
}

.invoices-table td:nth-child(5) > p:first-child {
  font-weight: var(--font-weight--semibold);
}

.invoices-table td:nth-child(6) .badge {
  white-space: nowrap;
}

.invoices-table .badge--celebrate {
  border: 1px solid var(--color--celebrate-border);
}

@media screen and (min-width: 601px) {
  .invoices-table {
    table-layout: fixed;
    width: 100%;
  }

    .invoices-table th:nth-child(1) { width: 7%; }
    .invoices-table th:nth-child(2) { width: 33%; }
    .invoices-table th:nth-child(3) { width: 18%; }
    .invoices-table th:nth-child(4) { width: 12%; }
    .invoices-table th:nth-child(5) { width: 15%; }
    .invoices-table th:nth-child(6) { width: 15%; }
}

@media screen and (max-width: 600px) {
  .invoices-table,
  .invoices-table tbody {
    display: block;
  }

  .invoices-table thead {
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
  }

  .invoices-table tbody {
    display: grid;
    gap: var(--space--small);
    margin-block-end: var(--space--base);
  }

  .invoices-table tbody tr {
    background-color: var(--color--background-card);
    border: var(--border--base);
    border-radius: var(--border-radius--large);
    display: grid;
    gap: var(--space--small);
    padding: var(--space--base);
  }

  .invoices-table td {
    border: 0;
    padding: 0;
  }

  .invoices-table td[data-label]::before {
    color: var(--color--text-soft);
    content: attr(data-label);
    display: block;
    font-size: var(--font-size--small);
    font-weight: normal;
    margin-block-end: var(--space--xx-small);
  }
}
}
@layer components{

.loading-indicator {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.loading-indicator svg {
  animation: rotate 0.75s linear infinite;
  max-width: 3rem;
}

@media (prefers-reduced-motion: reduce) {
  .loading-indicator svg {
    animation: rotate 4s linear infinite;
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
}
@layer components{
.logo {
  width: auto;
}
}
@layer components{

.modal {
  background-color: var(--color--background-card);
  border: 0;
  border-radius: var(--border-radius--x-large);
  gap: 0;
  padding: 0;
}

.modal > header {
  border-bottom: var(--border--base);
  padding: var(--space--x-large) var(--space--large) var(--space--medium);
  position: relative;
  text-align: center;
}

  :is(.modal > header) h2 {
    font-size: var(--font-size--header);
    font-weight: var(--font-weight--semibold);
    letter-spacing: var(--letter-spacing--display);
    line-height: var(--line-height--tight);
    margin: 0;
  }

  :is(.modal > header) p {
    color: var(--color--text-soft);
    font-size: var(--font-size--150);
    margin: var(--space--x-small) 0 0;
  }

.modal__close {
  background: none;
  border: 0;
  color: var(--color--text-soft);
  font-size: var(--font-size--300);
  inset-block-start: var(--space--medium);
  inset-inline-end: var(--space--medium);
  line-height: 1;
  position: absolute;
}

.modal__body {
  padding-inline: var(--space--large);
}
}
@layer components{

.notice {
  background-color: var(--color--background-light);
  border: var(--border-width--base) solid transparent;
  border-radius: var(--border-radius--base);
  display: flex;
  flex-direction: column;
  gap: var(--space--xx-small);
  padding: var(--space--base);
}

.notice strong {
  font-family: var(--font-family--display);
  font-size: var(--font-size--section-title);
  font-weight: var(--font-weight--semibold);
  line-height: var(--line-height--tight);
}

.notice p {
  margin: 0;
}

.notice--fix {
  background-color: var(--color--fix-light);
  border-color: var(--color--fix-border);
  color: var(--color--fix-dark);
}

.notice--act {
  background-color: var(--color--act-light);
  border-color: var(--color--act-border);
  color: var(--color--act-dark);
}

.notice--done {
  background-color: var(--color--done-light);
  color: var(--color--done-dark);
}

.notice--celebrate {
  background-color: var(--color--celebrate-light);
  border-color: var(--color--celebrate-border);
  color: var(--color--celebrate-dark);
}
}
@layer components{

.page-footer {
  display: grid;
  grid-template-areas:
    "copyright"
    "nav";
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space--small) var(--space--medium);
}

.page-copyright {
  grid-area: copyright;
  font-size: var(--font-size--small);
}

.page-footer .footer-nav {
  grid-area: nav;
}

@media (min-width: 600px) {
  .page-footer {
    grid-template-areas: "copyright nav";
    grid-template-columns: 1fr auto;
  }
}
}
@layer components{

.page-header {
  align-items: center;
  display: grid;
  gap: var(--space--small) var(--space--medium);
  grid-template-columns: minmax(0, 1fr) auto;
  margin-block-end: var(--space--medium);
}

.page-header h1 {
  font-size: var(--font-size--500);
  font-weight: var(--font-weight--semibold);
  letter-spacing: var(--letter-spacing--display);
  line-height: var(--line-height--tight);
  margin: 0;
}

.page-header__label {
  color: var(--color--primary-base);
  font-size: var(--font-size--small);
  font-weight: var(--font-weight--semibold);
  grid-column: 1 / -1;
  margin: 0;
}

.page-header__subheading {
  color: var(--color--text-soft);
  font-size: var(--font-size--ui);
  grid-column: 1 / -1;
  margin: 0;
  max-width: var(--measure--base);
}

.page-header__actions {
  display: flex;
  gap: var(--space--small);
}

.page-header svg {
  width: var(--space--base);
}

.page-header__search {
  align-items: center;
  flex-direction: row;
  gap: var(--space--small);
  grid-column: 1 / -1;
  margin-block-start: var(--space--small);
}

.page-header__search-field {
  flex: 1;
  position: relative;
}

  .page-header__search-field > svg {
    color: var(--color--text-soft);
    inset-block-start: 50%;
    inset-inline-end: var(--space--base);
    pointer-events: none;
    position: absolute;
    translate: 0 -50%;
  }

  .page-header__search-field input {
    background-color: var(--color--background-card);
    box-sizing: border-box;
    font-size: var(--font-size--ui);
    height: var(--form-control--height);
    padding-inline-end: var(--space--x-large);
    width: 100%;
  }

@media screen and (max-width: 600px) {
  .page-header h1 {
    font-size: var(--font-size--header);
  }

  .page-header__filter {
    padding-inline: var(--space--small);
  }

  .page-header__periods {
    grid-column: 1 / -1;
  }

  .page-header__filter-label {
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}
}
@layer components{

.page-nav {
  display: flex;
  flex-direction: row;
  gap: var(--space--medium);
}

.page-nav a {
  text-decoration: none;
}
.page-nav a:hover,
.page-nav a:focus {
  text-decoration: underline;
}

.page-nav [aria-current="page"] {
  color: var(--color--current);
}
}
@layer components{

:where(.pagination) .pagination__page[aria-current="page"] {
  font-weight: bold;
}

/* PAGY SERIES NAV */

.pagy.series-nav {
  display: flex;
}
:where(.pagy.series-nav) a {
  padding: var(--space--xx-small);
}

:where(.pagy.series-nav) a[aria-current="page"] {
  font-weight: bold;
}

/* PAGY INPUT NAV */

.pagy.input-nav {
  display: flex;
  gap: var(--space--x-small);
  align-items: center;
}

.pagy.input-nav label {
  display: flex;
  flex-direction: row;
  font-weight: normal;
  align-items: center;
}

/* FANCY PAGINATION */

.pagination--fancy {
  display: grid;
  grid-template-areas:
    "pagelist"
    "meta";
  gap: var(--space--small);
}

:where(.pagination--fancy) .pagination__meta {
  grid-area: meta;
  text-align: center;
}

:where(.pagination--fancy) .pagination__list {
  display: flex;
  list-style: none;
  padding: 0;
  grid-area: pagelist;
  justify-content: center;
  gap: var(--space--x-small);
}

:where(.pagination--fancy) .pagination__page a,
:where(.pagination--fancy) .pagination__space,
:where(.pagination--fancy) .pagination__control--prev a,
:where(.pagination--fancy) .pagination__control--next a {
  padding: var(--space--xx-small);
  display: block;
}

:where(.pagination--fancy) .pagination__page a {
  border: var(--border--base);
  padding: var(--space--xx-small) var(--space--small);
}

:where(.pagination--fancy) .pagination__page:has([aria-current="page"]) a {
  outline: var(--border-width--thick) solid var(--color--primary-light);
}
}
@layer components{

.production-case {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space--medium);
  padding: var(--space--large) var(--space--large) var(--space--medium);
}

.production-case__body {
  flex: 1;
  min-block-size: 0;
  overflow-y: auto;
}

  @media screen and (max-width: 600px) {

.production-case__body {
    overflow-y: visible;
}
  }

.production-case__header {
  padding-inline-end: var(--space--large);
}

  .production-case__header h2 {
    font-size: var(--font-size--subheader);
    font-weight: var(--font-weight--semibold);
    letter-spacing: var(--letter-spacing--display);
    line-height: var(--line-height--tight);
    margin: var(--space--small) 0 0;
  }

.production-case__heading {
  align-items: center;
  display: flex;
  gap: var(--space--base);
  margin: 0;
}

.production-case__number {
  color: var(--color--text-soft);
  font-size: var(--font-size--small);
  font-weight: var(--font-weight--semibold);
  letter-spacing: 0.04em;
}

.production-case .case-facts--spread {
  justify-content: space-between;
}

.production-case .case-details {
  position: relative;
}

  :is(.production-case .case-details) details {
    grid-row: 2;
  }

  :is(.production-case .case-details) summary {
    inset-block-start: 0;
    inset-inline-end: 0;
    position: absolute;
  }

.production-case .case-details__requests {
  padding-inline-end: 12rem;
}

  :is(.production-case .case-details__requests) p {
    margin: 0;
  }

  :is(.production-case .case-details__requests) ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

.production-case__activity {
  background-color: var(--color--background-x-light);
  border-top: var(--border--base);
  padding: var(--space--medium) var(--space--large);
}

  .production-case__activity:not(:has(*)) {
    display: none;
  }

.production-case__timeline {
  background-color: var(--color--background-x-light);
  border-top: var(--border--base);
  padding: var(--space--medium) var(--space--large);
}

.production-case__activity:has(*) + .production-case__timeline {
  border-top: 0;
  padding-top: 0;
}

.production-case__decision {
  padding: 0 var(--space--large) var(--space--medium);
}

.production-case__panel {
  align-items: center;
  background-color: var(--color--background-card);
  border: var(--border--base);
  border-radius: var(--border-radius--large);
  display: flex;
  gap: var(--space--medium);
  justify-content: space-between;
  padding: var(--space--medium);
}

  .production-case__panel > div:first-child {
    flex: 1 1 auto;
  }

  .production-case__panel h3 {
    font-size: var(--font-size--section-title);
    font-weight: var(--font-weight--semibold);
    margin: 0;
  }

.production-case__panel-hint {
  color: var(--color--text-soft);
  margin: var(--space--small) 0 0;
}

.production-case__panel-actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--space--base);
}

  .production-case__panel-actions form {
    margin: 0;
  }

.production-case__panel--stacked {
  align-items: stretch;
  flex-direction: column;
}

  .production-case__panel--stacked .production-case__panel-actions {
    align-self: flex-end;
  }

.production-case__link-field {
  display: grid;
  gap: var(--space--small) var(--space--base);
  grid-template-columns: 1fr auto;
}

  .production-case__link-field label {
    font-weight: var(--font-weight--semibold);
  }

  .production-case__link-field label .production-case__panel-hint {
    display: block;
    font-weight: var(--font-weight--normal);
    margin-block-start: var(--space--x-small);
  }

  .production-case__link-field .field_with_errors {
    display: contents;
  }

  .production-case__link-field input {
    grid-column: 1 / -1;
  }

.production-case__title-field {
  display: grid;
  gap: var(--space--small);
}

  .production-case__title-field label {
    font-weight: var(--font-weight--semibold);
  }

  .production-case__title-field .field_with_errors {
    display: contents;
  }

.production-case__cancel {
  color: var(--color--text-soft);
  font-size: var(--font-size--300);
  line-height: 1;
  text-decoration: none;
}

.production-case__draft {
  align-items: center;
  display: flex;
  gap: var(--space--base);
  margin: 0;
}

  .production-case__draft svg {
    color: var(--color--text-soft);
    height: var(--space--large);
    width: var(--space--large);
  }

.production-case__draft-link {
  font-weight: var(--font-weight--semibold);
  text-decoration: none;
}

.production-case__change-link {
  background: none;
  border: 0;
  color: var(--color--text-soft);
  padding: 0;
  text-decoration: underline;
}

.production-case__panel:has(.production-case__video-title, #script_video_title_video_title) {
  border-color: var(--color--accent-light);
}

.production-case__video-title {
  align-items: flex-end;
  display: flex;
  gap: var(--space--medium);
  justify-content: space-between;
}

  .production-case__video-title dl,.production-case__video-title dd {
    margin: 0;
  }

  .production-case__video-title dt {
    color: var(--color--text-soft);
    font-size: var(--font-size--small);
  }

  .production-case__video-title dd {
    color: var(--color--text-soft);
    font-size: var(--font-size--ui);
  }

  .production-case__video-title .production-case__video-title-value {
    color: var(--color--text);
    font-weight: var(--font-weight--semibold);
  }

.production-case__panel--correction {
  background-color: var(--color--accent-base);
  border-color: var(--color--accent-light);
}

  .production-case__panel--correction label {
    font-weight: var(--font-weight--semibold);
  }

  .production-case__panel--correction label .production-case__panel-hint {
    font-weight: var(--font-weight--normal);
  }

  .production-case__panel--correction :is(input[type="text"],textarea) {
    box-sizing: border-box;
    display: block;
    margin-block-start: var(--space--small);
    width: 100%;
  }

.production-case__correction-header {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}

.production-case__correction-note {
  border-inline-start: var(--border-width--base) solid var(--color--accent-light);
  margin: 0;
  overflow-wrap: anywhere;
  padding-inline-start: var(--space--base);
}

  .production-case__correction-note p {
    margin: 0;
  }

  .production-case__correction-note p + p {
    margin-block-start: var(--space--small);
  }

.production-case__panel--question {
  border-color: var(--color--accent-light);
}

.production-table__writer {
  align-items: center;
  display: flex;
  font-size: var(--font-size--ui);
}

@media screen and (max-width: 600px) {
  .production-case__panel {
    align-items: stretch;
    flex-direction: column;
  }

  .production-case__panel .production-case__panel-actions {
    align-self: stretch;
    flex-direction: column;
  }

    :is(.production-case__panel .production-case__panel-actions) .button {
      box-sizing: border-box;
      width: 100%;
    }
}
}
@layer components{

body:has(> .rail) {
  background-color: var(--color--background-base);
  display: grid;
  grid-template-columns: var(--nav--width) minmax(0, 1fr);
  margin: 0;
  min-height: 100dvh;
}

body:has(> .rail) > main {
  padding: var(--space--large);
}

.rail {
  align-items: center;
  background-color: var(--color--nav-background);
  box-sizing: border-box;
  color: var(--color--nav-text);
  display: flex;
  flex-direction: column;
  gap: var(--space--xx-small);
  height: 100dvh;
  overflow-y: auto;
  padding: var(--space--medium) var(--space--x-small);
  position: sticky;
  top: 0;
}

.rail .logo {
  margin-block-end: var(--space--xx-large);
  width: var(--space--large);
}

.rail__item {
  align-items: center;
  background: none;
  border: 0;
  border-radius: var(--border-radius--base);
  box-sizing: border-box;
  color: var(--color--nav-text);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  flex-direction: column;
  font-size: var(--font-size--small);
  font-weight: var(--font-weight--semibold);
  gap: var(--space--xx-small);
  padding: var(--space--small) var(--space--xx-small);
  text-align: center;
  text-decoration: none;
  width: 100%;
}

  .rail__item svg {
    width: 1.25rem;
  }

  .rail__item[aria-current="page"] {
    background-color: var(--color--primary-dark);
    color: var(--color--nav-text-current);
  }

.rail__account {
  margin-block-start: auto;
}

.rail__menu {
  background-color: var(--color--background-card);
  border: var(--border--base);
  border-radius: var(--border-radius--base);
  color: var(--color--text);
  font-size: var(--font-size--ui);
  inset: auto auto var(--space--medium) calc(var(--nav--width) + var(--space--x-small));
  margin: 0;
  padding: var(--space--base);
}

  .rail__menu:popover-open {
    display: flex;
    flex-direction: column;
    gap: var(--space--small);
  }

  .rail__menu p {
    color: var(--color--text-soft);
    margin: 0;
  }

@media screen and (max-width: 600px) {
  body:has(> .rail) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  body:has(> .rail) > main {
    padding: var(--space--base);
  }

  .rail {
    flex-direction: row;
    gap: var(--space--xx-small);
    height: auto;
    overflow-x: auto;
    padding: var(--space--x-small) var(--space--base);
    z-index: var(--z-index--layout);
  }

  .rail .logo {
    margin-block-end: 0;
    margin-inline-end: var(--space--small);
    width: var(--space--medium);
  }

  .rail__item {
    padding: var(--space--x-small);
    width: auto;
  }

    .rail__item svg {
      width: 1.125rem;
    }

  .rail__account {
    anchor-name: --account-menu;
    margin-block-start: 0;
    margin-inline-start: auto;
  }

  .rail__menu {
    inset: auto;
    margin: var(--space--x-small) 0 0;
    position-anchor: --account-menu;
    position-area: block-end span-inline-start;
  }
}
}
@layer components{

.report-card {
  background-color: var(--color--background-card);
  border: var(--border-width--base) solid var(--color--border-soft);
  border-radius: var(--border-radius--x-large);
  display: flex;
  flex-direction: column;
  gap: var(--space--medium);
  padding: var(--space--medium);
}

.report-card + .report-card {
  margin-block-start: var(--space--medium);
}

.report-grid {
  display: grid;
  gap: var(--space--medium);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block: var(--space--medium);
}

  .report-grid .time-chart {
    --time-chart-columns: minmax(7rem, 10rem) minmax(0, 1fr) 6rem;
  }

  .report-grid > turbo-frame {
    display: flex;
  }

  .report-grid .report-card {
    flex: 1;
  }

.report-stack {
  display: grid;
  gap: var(--space--medium);
  grid-template-columns: minmax(0, 1fr);
}

.report-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--space--xx-small);
}

  .report-card__header h2 {
    font-size: var(--font-size--250);
    font-weight: var(--font-weight--semibold);
    letter-spacing: var(--letter-spacing--display);
    line-height: var(--line-height--tight);
    margin: 0;
  }

  .report-card__header p {
    color: var(--color--text-soft);
    font-size: var(--font-size--ui);
    margin: 0;
  }

.report-card__header--with-action {
  align-items: start;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space--small);
  justify-content: space-between;
}

  .report-card__header--with-action > div {
    display: flex;
    flex-direction: column;
    gap: var(--space--xx-small);
  }

.report-card__action {
  background: none;
  border: 0;
  color: var(--color--primary-base);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size--ui);
  font-weight: var(--font-weight--semibold);
  padding: 0;
  white-space: nowrap;
}

  .report-card__action:hover {
    color: var(--color--primary-dark);
  }

  .report-card__action:focus-visible {
    outline: 2px solid var(--color--focus);
    outline-offset: 2px;
  }

.report-card__sorts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space--xx-small);
}

.report-card__sort {
  background-color: var(--color--background-card);
  border: var(--border-width--base) solid var(--color--border-field);
  border-radius: var(--border-radius--base);
  color: var(--color--text);
  font-size: var(--font-size--small);
  font-weight: var(--font-weight--medium);
  line-height: 1;
  padding: var(--space--x-small) var(--space--small);
  text-decoration: none;
  white-space: nowrap;
}

  .report-card__sort:hover {
    border-color: var(--color--border-mid);
    color: var(--color--text);
  }

  .report-card__sort:focus-visible {
    outline: 2px solid var(--color--focus);
    outline-offset: 2px;
  }

  .report-card__sort[aria-current="true"] {
    background-color: var(--color--accent-base);
    border-color: var(--color--primary-base);
    color: var(--color--accent-dark);
  }

.report-drill {
  border-block-start: var(--border-width--base) solid var(--color--border-soft);
  padding-block-start: var(--space--medium);
}

.report-drill__header {
  align-items: start;
  display: flex;
  gap: var(--space--base);
  justify-content: space-between;
  margin-block-end: var(--space--base);
}

  .report-drill__header h3 {
    font-size: var(--font-size--section-title);
    font-weight: var(--font-weight--semibold);
    margin: 0;
  }

  .report-drill__header p {
    color: var(--color--text-soft);
    font-size: var(--font-size--small);
    margin: var(--space--xx-small) 0 0;
  }

.report-drill__close {
  color: var(--color--primary-base);
  font-size: var(--font-size--ui);
  font-weight: var(--font-weight--semibold);
  text-decoration: none;
}
  :is(.cases-table--report :is(th,td)):first-child {
    padding-inline-start: 0;
  }

.cases-table td.cases-table__overdue {
  color: var(--color--act-base);
  font-weight: var(--font-weight--semibold);
}

@media screen and (max-width: 600px) {
  .report-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .report-drill {
    scroll-margin-block-start: calc(var(--space--xx-large) * 2);
  }

  .cases-table--report tbody tr {
    grid-template-areas:
      "number story-strength"
      "story story"
      "where brief-match";
  }
}

.report-card__empty {
  color: var(--color--text-soft);
  font-size: var(--font-size--ui);
  margin: 0;
}
}
@layer components{

.report-table {
  overflow-x: auto;
}

  .report-table table {
    font-size: var(--font-size--ui);
    margin: 0;
    width: 100%;
  }

  .report-table :is(th,td) {
    background: none;
    border: 0;
    border-block-end: var(--border-width--base) solid var(--color--border-soft);
    padding: var(--space--small) var(--space--base) var(--space--small) 0;
    vertical-align: top;
  }

  .report-table :is(th,td):last-child {
    padding-inline-end: 0;
  }

  .report-table thead th {
    border-block-end-color: var(--color--border-mid);
    color: var(--color--text-soft);
    font-size: var(--font-size--small);
    font-weight: normal;
    padding-block-start: 0;
    text-align: end;
  }

  .report-table thead th:first-child,.report-table th[scope="row"] {
    text-align: start;
  }

  .report-table th[scope="row"] {
    font-size: var(--font-size--ui);
    font-weight: var(--font-weight--medium);
  }

  .report-table td {
    font-variant-numeric: tabular-nums;
    text-align: end;
    white-space: nowrap;
  }

.report-table__share {
  color: var(--color--text-soft);
  display: block;
  font-size: var(--font-size--small);
}
}
@layer components{

search form {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--space--x-small);
}

/* since search has a single field which is always required, we can omit the required indicator */
search form label:has([type="search"][required]) > span:after {
  display: none;
}
}
@layer components{

.settings-header {
  margin-block-end: var(--space--base);
}

  .settings-header h1 {
    grid-column: 1 / -1;
  }

.settings-header__bar {
  align-items: end;
  border-block-end: var(--border--dark);
  display: flex;
  gap: var(--space--base);
  grid-column: 1 / -1;
  justify-content: space-between;
}

  .settings-header__bar .page-header__actions {
    margin-block-end: 0.625rem;
  }

  .settings-header__bar .button {
    height: 2.5rem;
    padding-block: 0;
  }

.tabs {
  display: flex;
  gap: var(--space--medium);
}

.tabs__tab {
  border-block-end: calc(var(--border-width--base) * 2) solid transparent;
  color: var(--color--text-soft);
  font-size: var(--font-size--150);
  font-weight: var(--font-weight--semibold);
  margin-block-end: calc(var(--border-width--base) * -1);
  padding: 0.625rem var(--space--xx-small) var(--space--small);
  text-decoration: none;
}

  .tabs__tab[aria-current="page"] {
    border-color: var(--color--primary-base);
    color: var(--color--text);
  }

.settings-intro {
  color: var(--color--text-soft);
  font-size: var(--font-size--100);
  margin-block: 0 var(--space--base);
}

.settings-brief {
  display: grid;
  gap: var(--space--base);
  grid-template-columns: minmax(0, 1fr);
}

  @media (min-width: 1100px) {

.settings-brief {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
  }

  .settings-brief > turbo-frame {
    display: contents;
  }

.channel-card {
  background-color: var(--color--background-card);
  border: var(--border--base);
  border-radius: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.125rem 1.25rem;
}

  .channel-card :is(h2,h3,p,ul) {
    margin: 0;
  }

  .channel-card h2 {
    font-family: var(--font-family--display);
    font-size: var(--font-size--250);
    font-weight: var(--font-weight--semibold);
  }

  .channel-card h3 {
    color: var(--color--text-soft);
    font-size: var(--font-size--50);
    font-weight: var(--font-weight--semibold);
    margin-block-end: 0.375rem;
  }

  .channel-card ul {
    list-style: none;
    padding: 0;
  }

.channel-card--new {
  background-color: var(--color--accent-base);
  border: var(--border-width--base) dashed var(--color--accent-light);
}

.channel-card :where(button:not(.button)) {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.channel-card__header {
  align-items: start;
  display: flex;
  gap: var(--space--small);
  justify-content: space-between;
}

.channel-card__staff {
  color: var(--color--text-soft);
  font-size: var(--font-size--75);
  line-height: 1.35;
  margin-block-start: 0.125rem;
}

.channel-card__section {
  display: flex;
  flex-direction: column;
}

.switch {
  align-items: center;
  color: var(--color--text-soft);
  display: inline-flex;
  font-size: var(--font-size--75);
  font-weight: var(--font-weight--semibold);
  gap: var(--space--x-small);
  white-space: nowrap;
}

  .switch::before {
    background: radial-gradient(circle at 0.625rem 50%, var(--color--white-500) 0.5rem, transparent 0.5rem)
      var(--color--border-mid);
    border-radius: var(--border-radius--pill);
    content: "";
    height: 1.25rem;
    width: 2.125rem;
  }

  .switch[aria-checked="true"] {
    color: var(--color--ui-success-dark);
  }

  .switch[aria-checked="true"]::before {
    background: radial-gradient(circle at calc(100% - 0.625rem) 50%, var(--color--white-500) 0.5rem, transparent 0.5rem)
      var(--color--ui-success-base);
  }

.channel-card__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.chip {
  align-items: center;
  background-color: var(--color--accent-base);
  border-radius: var(--space--x-small);
  color: var(--color--primary-dark);
  display: inline-flex;
  font-size: var(--font-size--75);
  font-weight: var(--font-weight--semibold);
  gap: var(--space--xx-small);
  height: 1.75rem;
  padding: 0 var(--space--xx-small) 0 0.625rem;
}

.chip__form {
  display: contents;
}

.channel-card .chip__remove {
  border-radius: 0.3125rem;
  color: var(--color--primary-base);
  font-size: var(--font-size--150);
  height: 1.25rem;
  line-height: 1;
  width: 1.25rem;
}

  :is(.channel-card .chip__remove):hover {
    background-color: var(--color--primary-light);
  }

.chip--add {
  background: none;
  padding: 0;
}

  .chip--add:has(form) {
    flex-basis: 100%;
    height: auto;
  }

  .chip--add > turbo-frame {
    flex: 1;
    min-width: 0;
  }

.chip--add__link {
  align-items: center;
  display: inline-flex;
  text-decoration: none;
}

.chip--add__link,
.button--dashed {
  border: var(--border-width--base) dashed var(--color--border-mid);
  border-radius: var(--space--x-small);
  color: var(--color--primary-base);
  font-size: var(--font-size--75);
  font-weight: var(--font-weight--semibold);
  height: 1.75rem;
  padding: 0 0.625rem;
}

  :is(.chip--add__link,.button--dashed):hover {
    border-color: var(--color--primary-base);
  }

.channel-card .button--dashed {
  align-self: start;
  background: none;
  line-height: normal;
  margin-block-start: var(--space--x-small);
}

.channel-card__guidelines li {
  align-items: start;
  border-block-start: var(--border--base);
  display: flex;
  font-size: var(--font-size--100);
  gap: var(--space--small);
  justify-content: space-between;
  padding-block: var(--space--x-small);
}

  :is(.channel-card__guidelines li):first-child {
    border-block-start: 0;
    padding-block-start: 0;
  }

.channel-card .channel-card__remove {
  color: var(--color--text-soft);
  flex: none;
  font-size: var(--font-size--50);
  font-weight: var(--font-weight--medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}

  :is(.channel-card .channel-card__remove):hover {
    color: var(--color--ui-danger-base);
  }

.topic-chip-form,
.guideline-field-form,
.channel-name-form {
  align-items: center;
  display: grid;
  gap: var(--space--x-small);
  grid-template-columns: minmax(0, 1fr) auto auto;
}

  :is(.topic-chip-form,.guideline-field-form,.channel-name-form) label,:is(.topic-chip-form,.guideline-field-form,.channel-name-form) #error_explanation {
    font-size: var(--font-size--75);
    grid-column: 1 / -1;
  }

  :is(.topic-chip-form,.guideline-field-form,.channel-name-form) .field_with_errors {
    display: contents;
  }

  :is(.topic-chip-form,.guideline-field-form,.channel-name-form) input[type="text"] {
    min-width: 0;
    padding-block: var(--space--x-small);
  }
}
@layer components{

.stage-cards {
  display: grid;
  gap: var(--space--small);
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  grid-column: 1 / -1;
}

.stage-card {
  background-color: var(--color--background-card);
  border: 1px solid var(--color--border-soft);
  border-radius: var(--border-radius--large);
  box-sizing: border-box;
  color: var(--color--text);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space--base);
  text-decoration: none;
}

  .stage-card[href]:hover {
    border-color: var(--color--border-mid);
  }

  .stage-card:focus-visible {
    outline: 2px solid var(--color--focus);
    outline-offset: 2px;
  }

.stage-card--waiting {
  background-color: var(--color--background-dark);
  border-color: var(--color--background-dark);
  color: var(--color--text-inverse);
}

  .stage-card--waiting .stage-card__hint {
    color: var(--color--fig-100);
  }

.stage-card--selected {
  outline: 2px solid var(--color--primary-dark);
  outline-offset: 2px;
}

.stage-card__count {
  font-family: var(--font-family--display);
  font-size: var(--font-size--400);
  font-weight: var(--font-weight--semibold);
  line-height: var(--line-height--tight);
  margin-block-end: var(--space--x-small);
}

.stage-card__title {
  font-size: var(--font-size--ui);
  font-weight: var(--font-weight--semibold);
}

.stage-card__hint {
  color: var(--color--text-soft);
  font-size: var(--font-size--small);
}

.stage-cards--pipeline {
  gap: var(--space--medium);
  grid-auto-flow: row;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) minmax(0, 7fr) minmax(0, 5fr);
}

  .stage-cards--pipeline > li {
    position: relative;
  }

  .stage-cards--pipeline > li + li::before {
    border-block-start: 1.5px solid var(--color--border-mid);
    border-inline-end: 1.5px solid var(--color--border-mid);
    content: "";
    block-size: 0.375rem;
    inline-size: 0.375rem;
    inset-block-start: 2rem;
    inset-inline-start: calc(var(--space--medium) / -2 - 0.25rem);
    position: absolute;
    transform: rotate(45deg);
  }

  .stage-cards--pipeline .stage-card {
    background-color: var(--color--background-x-light);
  }

  .stage-cards--pipeline .stage-card--done {
    background-color: var(--color--done-light);
    border-color: var(--color--done-light);
  }

.stage-cards--summary {
  margin-block-end: var(--space--medium);
}

.stage-card__rows {
  border-block-start: var(--border-width--base) solid var(--color--border-soft);
  list-style: none;
  margin-block: var(--space--base) 0;
  padding: var(--space--x-small) 0 0;
}

.stage-card__row {
  display: flex;
  font-size: var(--font-size--ui);
  gap: var(--space--x-small);
  justify-content: space-between;
  padding-block: var(--space--x-small);
}

.stage-card__row-count {
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight--medium);
}

@media screen and (max-width: 600px) {
  .stage-cards.stage-cards--pipeline {
    grid-template-columns: minmax(0, 1fr);
  }

    .stage-cards.stage-cards--pipeline > li + li::before {
      display: none;
    }

  .stage-cards {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

    .stage-cards > :last-child:nth-child(odd) {
      grid-column: 1 / -1;
    }
}
}
@layer components{

.time-chart {
  --time-chart-columns: minmax(10rem, 16rem) minmax(0, 1fr) 6rem;
  --time-chart-flag-space: 7rem;

  display: flex;
  flex-direction: column;
  gap: var(--space--small);
}

.time-chart[hidden] {
  display: none;
}

.time-chart__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space--base);
  list-style: none;
  margin: 0;
  padding: 0;
}

.time-chart__row,
.time-chart__footer {
  align-items: center;
  -moz-column-gap: var(--space--medium);
       column-gap: var(--space--medium);
  display: grid;
  grid-template-columns: var(--time-chart-columns);
}

.time-chart__stage {
  display: flex;
  flex-direction: column;
}

.time-chart__label {
  font-size: var(--font-size--ui);
  font-weight: var(--font-weight--medium);
}

.time-chart__hint {
  color: var(--color--text-soft);
  font-size: var(--font-size--small);
}

.time-chart__track {
  align-items: center;
  display: flex;
  gap: var(--space--x-small);
  padding-inline-end: var(--time-chart-flag-space);
}

.time-chart__bar {
  background-color: var(--color--accent-light);
  block-size: 0.875rem;
  border-radius: 999px;
  flex-shrink: 0;
  inline-size: var(--bar-width);
}

.time-chart__row--biggest .time-chart__bar {
  background-color: var(--color--primary-base);
}

.time-chart__flag {
  color: var(--color--primary-base);
  flex-shrink: 0;
  font-size: var(--font-size--small);
  font-weight: var(--font-weight--semibold);
  white-space: nowrap;
}

.time-chart__days {
  font-size: var(--font-size--ui);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight--medium);
  text-align: end;
}

.time-chart__axis {
  border-block-start: var(--border-width--base) solid var(--color--border-soft);
  color: var(--color--text-soft);
  display: flex;
  font-size: var(--font-size--small);
  font-variant-numeric: tabular-nums;
  grid-column: 2;
  justify-content: space-between;
  list-style: none;
  margin: 0 var(--time-chart-flag-space) 0 0;
  padding: var(--space--x-small) 0 0;
}

.time-chart__total {
  color: var(--color--text-soft);
  font-size: var(--font-size--small);
  grid-column: 3;
  text-align: end;
}

@media screen and (max-width: 600px) {
  .time-chart {
    --time-chart-flag-space: 6rem;
  }

  .time-chart__row,
  .time-chart__footer {
    grid-template-areas:
      "stage days"
      "track track";
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--space--x-small);
  }

  .time-chart__stage {
    grid-area: stage;
  }

  .time-chart__days {
    grid-area: days;
  }

  .time-chart__track {
    grid-area: track;
  }

  .time-chart__footer {
    grid-template-areas:
      "axis axis"
      "total total";
  }

  .time-chart__axis {
    grid-area: axis;
  }

  .time-chart__total {
    grid-area: total;
  }
}
}
@layer components{

.toast {
  background-color: var(--color--background-dark);
  border-radius: var(--border-radius--base);
  color: var(--color--text-inverse);
  display: flex;
  flex-direction: column;
  font-size: var(--font-size--75);
  gap: 0.125rem;
  inset-block-end: var(--space--base);
  inset-inline-end: var(--space--base);
  box-sizing: border-box;
  max-width: min(24rem, calc(100vw - 2 * var(--space--base)));
  min-width: 14rem;
  padding: var(--space--small) var(--space--base);
  position: fixed;
  z-index: var(--z-index--layout);
}

  .toast p {
    margin: 0;
  }

.toast__undo-form {
  align-self: flex-start;
}

.toast__undo {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: var(--font-weight--bold);
  padding: 0;
  text-decoration: underline;
}
}
@layer components{
.user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space--small);
}
}
@layer components{

.users-table-scroll {
  margin-block-end: var(--space--base);
  overflow-x: auto;
  position: relative;
}

.users-table :is(th, td) {
  background-color: transparent;
  border: 0;
  border-bottom: var(--border--base);
  border-radius: 0;
  padding: var(--space--small);
  vertical-align: middle;
  white-space: nowrap;
}

.users-table th {
  border-bottom: var(--border--dark);
  color: var(--color--text-soft);
  font-weight: var(--font-weight--semibold);
}

  :is(.users-table th) a {
    color: inherit;
    text-decoration: none;
  }

.users-table__email {
  font-weight: var(--font-weight--semibold);
}

.users-table__name,
.users-table__muted {
  color: var(--color--text-soft);
  font-size: var(--font-size--75);
}

.users-table__channel select {
  border: var(--border--dark);
  border-radius: var(--space--x-small);
  font-size: var(--font-size--75);
  padding: var(--space--xx-small) var(--space--x-small);
}

.users-table__action {
  background: none;
  border: 0;
  color: var(--color--text-soft);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size--75);
  font-weight: var(--font-weight--semibold);
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

  .users-table__action:hover {
    color: var(--color--ui-danger-base);
  }

.users-table__action--primary {
  color: var(--color--primary-base);
}

  .users-table__action--primary:hover {
    color: var(--color--primary-dark);
  }
}
@layer components{

.user-form {
  background-color: var(--color--background-card);
  border: var(--border--base);
  border-radius: var(--border-radius--large);
  gap: 0;
  max-width: var(--measure--narrow);
}

  .user-form label > span::after {
    content: none;
  }

  .user-form :is(input[type="text"],input[type="email"],select) {
    background-color: var(--color--background-card);
    border: var(--border--dark);
    box-sizing: border-box;
    font-size: var(--font-size--150);
    height: var(--form-control--height);
    padding-block: 0;
    padding-inline: var(--form-control--padding-inline);
    width: 100%;
  }

.user-form__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space--base);
  padding: var(--space--medium) var(--space--large);
}

.user-form__actions {
  border-top: var(--border--base);
  display: flex;
  gap: var(--space--small);
  justify-content: flex-end;
  padding: var(--space--base) var(--space--large);
}

.modal--invite {
  max-width: 36rem;
}

  .modal--invite > header {
    padding-inline-end: var(--space--x-large);
    text-align: start;
  }

  .modal--invite .user-form {
    border: 0;
    border-radius: 0;
    max-width: none;
  }
}
@layer components{

.video-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space--base);
}

  .video-grid > p {
    color: var(--color--text-soft);
    margin: 0;
    text-align: end;
  }

  .video-grid > ul {
    display: grid;
    gap: var(--space--medium);
    grid-template-columns: minmax(0, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
  }

    @media (min-width: 600px) {

  .video-grid > ul {
      grid-template-columns: repeat(2, minmax(0, 1fr));
  }
    }

    @media (min-width: 1000px) {

  .video-grid > ul {
      grid-template-columns: repeat(3, minmax(0, 1fr));
  }
    }

.video-card {
  background-color: var(--color--background-card);
  border: var(--border--base);
  border-radius: var(--border-radius--large);
  color: var(--color--text);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

  .video-card h2 {
    font-size: var(--font-size--section-title);
    font-weight: var(--font-weight--semibold);
    line-height: var(--line-height--tight);
    margin: 0;
  }

.video-card__tile {
  aspect-ratio: var(--aspect-ratio--video);
  background-color: var(--color--background-dark);
  color: var(--color--text-inverse);
  display: grid;
  grid-template: "tile" minmax(0, 1fr) / minmax(0, 1fr);
  overflow: hidden;
}

  .video-card__tile > * {
    grid-area: tile;
  }

  .video-card__tile svg {
    place-self: center;
    width: var(--space--x-large);
  }

  .video-card__tile > .badge {
    margin: var(--space--small);
    place-self: start;
    position: relative;
    z-index: 1;
  }

.video-card__thumbnail {
  block-size: 100%;
  inline-size: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.video-card__play {
  background-color: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: grid;
  padding: 0;
  place-items: center;
}

  .video-card__play svg {
    filter: drop-shadow(0 0 var(--space--x-small) rgb(0 0 0 / 60%));
  }

  .video-card__play:hover,.video-card__play:focus-visible {
    background-color: color-mix(in srgb, var(--color--background-dark) 30%, transparent);
  }

  .video-card__play:focus-visible {
    outline: var(--border-width--thick) solid var(--color--focus);
    outline-offset: -4px;
  }

.video-card__player {
  block-size: 100%;
  border: 0;
  inline-size: 100%;
}

.video-card__goes-live {
  font-weight: var(--font-weight--semibold);
  margin: 0;
  place-self: center;
}

.video-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space--x-small);
  padding: var(--space--base);
}

.video-card__meta {
  align-items: center;
  color: var(--color--text-soft);
  display: flex;
  font-size: var(--font-size--small);
  gap: var(--space--small);
  justify-content: space-between;
  margin: 0;
  margin-block-start: auto;
}

.video-card__watch {
  align-items: center;
  color: var(--color--link);
  display: inline-flex;
  font-weight: var(--font-weight--semibold);
  gap: var(--space--xx-small);
}

  .video-card__watch svg {
    width: var(--space--small);
  }
}
/* Utilities */
@layer utilities{

.u-hide-visually {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.u-hide-visually--focus-unhide:focus {
  clip: auto;
  clip-path: none;
  height: auto;
  overflow: visible;
  white-space: inherit;
  width: auto;
  padding-block: var(--space--small);
  padding-inline: var(--space--medium);
  position: absolute;
  text-align: center;
  z-index: calc(var(--z-index--layout) + 1);
}
}
@layer utilities{

.w-full {
  width: 100%;
}

.w-auto {
  width: auto;
}

.w-screen {
  width: 100vw;
}
}