/* ---------------------------------------------------------------------------
   /resources/ - the dashboard hub: category rail left, shelf right.

   Apple design pass:
   - The rail is the heavier structural material (§12): a translucent panel that
     separates a region, with the content scrolling past it rather than under an
     opaque bar. The active item is a solid plate, not a coloured border.
   - Cards are uniform by construction. The tagline is one line, the description
     is line-clamped, and the footer is pushed to the bottom by a spacer row, so
     a long entry can never make its card taller than its neighbour (§16 craft).
   - Tracking is size-specific (§15): tight and negative on the display heading,
     near zero on body copy, positive only on the small uppercase labels.
   - Press feedback is instant and on pointer-down (§1); the only overshoot is on
     the card lift, where a pointer gesture precedes it (§4).
   --------------------------------------------------------------------------- */

.res-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 120px 24px 120px;
}

/* --- Head -------------------------------- */

.res-crumbs {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.res-crumbs ol {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.res-crumbs li + li::before {
  content: '/';
  margin-right: 8px;
  color: color-mix(in srgb, var(--color-fg) 24%, transparent);
}

.res-crumbs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--color-fg-secondary);
  transition: color 200ms var(--ease-out);
}

/* The 44px targets would otherwise stack the separator oddly. */
.res-crumbs li {
  display: inline-flex;
  align-items: center;
}

.res-crumbs a:hover {
  color: var(--color-fg);
}

.res-head {
  margin-top: 64px;
  max-width: 720px;
}

.res-head__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label-wide);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.res-head__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  /* Large type reads too loose at its natural tracking, so it tightens. */
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--color-fg);
}

.res-head__lead {
  margin: 20px 0 0;
  max-width: 56ch;
  font-size: var(--text-body);
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--color-fg-secondary);
  text-wrap: pretty;
}

/* --- Shell ------------------------------- */

.res-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 40px;
  margin-top: 56px;
  align-items: start;
}

/* --- Rail -------------------------------- */

.res-rail {
  position: sticky;
  /* clears the floating nav pill */
  top: 104px;
  border-radius: var(--radius-xl);
  border: var(--hairline) solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
  box-shadow:
    inset 0 0.5px 0 rgb(255 255 255 / 0.07),
    0 12px 40px rgb(0 0 0 / 0.3);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  padding: 8px;
}

.res-rail__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.res-rail__item {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  text-align: left;
  color: color-mix(in srgb, var(--color-fg) 62%, transparent);
  transition:
    background-color 200ms var(--ease-out),
    color 200ms var(--ease-out);
}

.res-rail__item:hover {
  background: color-mix(in srgb, var(--color-fg) 5%, transparent);
  color: var(--color-fg);
}

/* Instant, on the press itself - not on release. */
.res-rail__item:active {
  transform: scale(0.985);
  transition: transform 100ms var(--ease-out);
}

.res-rail__item[aria-selected='true'] {
  background: color-mix(in srgb, var(--color-fg) 10%, transparent);
  color: var(--color-fg);
}

.res-rail__item:focus-visible {
  outline: var(--hairline) solid var(--color-fg);
  outline-offset: 2px;
}

.res-rail__count {
  flex: none;
  min-width: 22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-fg) 8%, transparent);
  padding: 2px 6px;
  font-size: var(--text-label-s);
  text-align: center;
  color: color-mix(in srgb, var(--color-fg) 55%, transparent);
  font-variant-numeric: tabular-nums;
}

.res-rail__item[aria-selected='true'] .res-rail__count {
  background: var(--color-accent-on-dark);
  color: var(--color-bg);
}

/* --- Panel ------------------------------- */

.res-panel__blurb {
  margin: 0;
  max-width: 62ch;
  font-size: var(--text-body-s, 0.9375rem);
  line-height: 1.65;
  color: var(--color-fg-secondary);
  text-wrap: pretty;
}

.res-search {
  display: block;
  margin-top: 20px;
}

.res-search__form {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 999px;
  border: var(--hairline) solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 32%, transparent);
  padding: 0 16px;
  transition: border-color 200ms var(--ease-out);
}

.res-search__form:focus-within {
  border-color: color-mix(in srgb, var(--color-fg) 32%, transparent);
}

.res-search__icon {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--color-fg-muted);
}

.res-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 14px 12px;
  font-family: inherit;
  font-size: var(--text-body-s, 0.9375rem);
  color: var(--color-fg);
}

.res-search__input::placeholder {
  color: var(--color-fg-muted);
}

.res-search__input:focus {
  outline: none;
}

.res-search__input::-webkit-search-cancel-button {
  display: none;
}

.res-search__clear {
  flex: none;
  border-radius: 999px;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: var(--text-label-s);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-fg-muted);
  transition: color 200ms var(--ease-out);
}

.res-search__clear:hover {
  color: var(--color-fg);
}

.res-search__status {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-label-s);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

/* --- Grid -------------------------------- */

.res-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 16px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.res-grid--reels {
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
}

/* --- Card -------------------------------- */
/* Every card is the same machine: icon, name, one-line tagline, clamped body,
   then a footer pinned to the bottom. Height comes from the tallest in the row,
   and the inner grid distributes it the same way in every card. */

.res-card {
  display: flex;
}

/* The search hides cards with the `hidden` attribute, whose display:none loses
   to the rules above unless it is restated here. */
.res-card[hidden],
.res-grid .video-card[hidden] {
  display: none;
}

.res-card__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--radius-xl);
  border: var(--hairline) solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 26%, transparent);
  box-shadow: inset 0 0.5px 0 rgb(255 255 255 / 0.06);
  padding: 20px;
  transition:
    transform 420ms var(--ease-spring),
    background-color 260ms var(--ease-out),
    border-color 260ms var(--ease-out);
}

.res-card:hover .res-card__inner {
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--color-surface) 42%, transparent);
  border-color: color-mix(in srgb, var(--color-fg) 18%, transparent);
}

.res-card__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-fg) 8%, transparent);
  color: var(--color-fg-secondary);
}

.res-card__glyph {
  width: 19px;
  height: 19px;
}

.res-card__name {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-fg);
}

/* Up to two lines, and it always occupies two lines' worth of space, so the
   rows below it start at the same y in every card whether it wraps or not.
   (One nowrap line ellipsed mid-word instead, which read as a bug.) */
.res-card__tagline {
  margin: 7px 0 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(2 * 1.45em);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-accent-on-dark);
}

.res-card__desc {
  margin: 12px 0 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1.65;
  color: color-mix(in srgb, var(--color-fg) 58%, transparent);
}

.res-card__more {
  align-self: flex-start;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-label-s);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-fg-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--color-fg) 28%, transparent);
  transition: color 200ms var(--ease-out);
}

.res-card__more:hover {
  color: var(--color-fg);
}

.res-card__more:active {
  transform: scale(0.97);
  transition: transform 100ms var(--ease-out);
}

.res-card__credit-row {
  margin-top: 14px;
}

.res-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: var(--hairline) solid var(--color-border);
}

/* The footer needs 14px of clear air above it even when the card is short. */
.res-card__desc,
.res-card__more,
.res-card__credit-row {
  margin-bottom: 4px;
}

.res-card__meta {
  display: flex;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--text-label-s);
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.res-card__by {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* "after <name>" - the source a write-up was built from, linking to their
   original. Underlined so it reads as a link at this size, where colour alone
   would not carry it. */
.res-card__credit {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-label-s);
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  color: var(--color-fg-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--color-fg) 26%, transparent);
  transition: color 200ms var(--ease-out);
}

.res-card__credit:hover {
  color: var(--color-fg);
}

.res-card__credit:focus-visible {
  outline: var(--hairline) solid var(--color-fg);
  outline-offset: 2px;
}

.res-card__action {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: var(--hairline) solid color-mix(in srgb, var(--color-fg) 18%, transparent);
  padding: 7px 13px;
  font-family: var(--font-mono);
  font-size: var(--text-label-s);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-fg);
  transition:
    background-color 200ms var(--ease-out),
    color 200ms var(--ease-out),
    border-color 200ms var(--ease-out);
}

.res-card__action svg {
  width: 13px;
  height: 13px;
}

.res-card__action:hover {
  background: var(--color-fg);
  border-color: var(--color-fg);
  color: var(--color-bg);
}

.res-card__action:active {
  transform: scale(0.97);
  transition: transform 100ms var(--ease-out);
}

.res-card__action:focus-visible,
.res-card__more:focus-visible {
  outline: var(--hairline) solid var(--color-fg);
  outline-offset: 3px;
}

.res-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.res-card__tag {
  border-radius: 999px;
  border: var(--hairline) solid var(--color-border);
  padding: 4px 9px;
  font-family: var(--font-mono);
  font-size: var(--text-label-s);
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

/* --- Read more dialog -------------------- */
/* A modal task, so it takes the scrim and pushes the page back (§12). It
   materializes - blur and scale together - rather than plain-fading in. */

.res-dialog {
  width: min(620px, calc(100vw - 32px));
  max-height: min(78vh, 760px);
  border: 0;
  background: none;
  padding: 0;
  overflow: visible;
  color: var(--color-fg);
}

.res-dialog::backdrop {
  background: rgb(0 0 0 / 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
}

.res-dialog[open]::backdrop {
  opacity: 1;
}

.res-dialog__surface {
  max-height: min(78vh, 760px);
  overflow-y: auto;
  /* Reaching the end of the dialog must not hand the wheel to the page. */
  overscroll-behavior: contain;
  border-radius: var(--radius-xl);
  border: var(--hairline) solid color-mix(in srgb, var(--color-fg) 16%, transparent);
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  box-shadow:
    inset 0 0.5px 0 rgb(255 255 255 / 0.1),
    0 32px 80px rgb(0 0 0 / 0.6);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  padding: 28px;
}

.res-dialog {
  opacity: 0;
  scale: 0.96;
  transition:
    opacity 260ms var(--ease-out),
    scale 380ms var(--ease-spring),
    overlay 380ms allow-discrete,
    display 380ms allow-discrete;
}

.res-dialog[open] {
  opacity: 1;
  scale: 1;
}

@starting-style {
  .res-dialog[open] {
    opacity: 0;
    scale: 0.96;
  }
}

.res-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.res-dialog__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-fg);
}

.res-dialog__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: var(--hairline) solid var(--color-border);
  color: var(--color-fg-secondary);
  transition:
    background-color 200ms var(--ease-out),
    color 200ms var(--ease-out);
}

.res-dialog__close svg {
  width: 15px;
  height: 15px;
}

.res-dialog__close:hover {
  background: color-mix(in srgb, var(--color-fg) 10%, transparent);
  color: var(--color-fg);
}

.res-dialog__close:active {
  transform: scale(0.94);
  transition: transform 100ms var(--ease-out);
}

/* One labelled block per part: what it does, when to use it, why it helps. */
.res-dialog__block + .res-dialog__block {
  margin-top: 24px;
}

.res-dialog__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label-wide);
  text-transform: uppercase;
  color: var(--color-accent-on-dark);
}

/* 17px on 1.8 leading. This is the one place on the site where somebody sits
   and reads a paragraph, so it is sized to be read, not skimmed. */
.res-dialog__body {
  margin: 10px 0 0;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-fg);
  text-wrap: pretty;
}

.res-dialog__block:first-of-type {
  margin-top: 20px;
}

/* --- Guide dialog ------------------------ */
/* A guide is read in the dialog rather than downloaded, so this one is wider,
   its head stays put while the list scrolls under it, and the copy button sits
   in that head - the whole point of the card is the paste into an AI. */

.res-dialog--guide {
  width: min(860px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
}

.res-dialog--guide .res-dialog__surface {
  max-height: min(86vh, 900px);
  padding: 0 28px 28px;
  scroll-behavior: smooth;
}

.res-dialog__head--sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  gap: 20px;
  margin: 0 -28px;
  padding: 22px 28px 16px;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: var(--hairline) solid var(--color-border);
}

.res-dialog__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.res-guide__sub {
  margin: 6px 0 0;
  font-size: var(--text-body);
  color: var(--color-fg-secondary);
}

.res-guide__copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 15px;
  border-radius: 999px;
  border: var(--hairline) solid transparent;
  background: var(--color-accent);
  color: var(--color-fg);
  font-family: var(--font-display);
  font-size: var(--text-label-l);
  font-weight: 500;
  white-space: nowrap;
  transition:
    transform 320ms var(--ease-spring),
    background-color 200ms var(--ease-out);
}

.res-guide__copy svg {
  width: 15px;
  height: 15px;
}

.res-guide__copy:hover {
  background: color-mix(in srgb, var(--color-accent) 82%, white);
}

.res-guide__copy:active {
  transform: scale(0.96);
}

.res-guide__copy[data-copied='true'] {
  background: var(--color-brand-green);
}

.res-guide {
  padding-top: 22px;
}

.res-guide__lead {
  margin: 0 0 12px;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-fg);
  text-wrap: pretty;
}

/* The "this is not a penetration test" line. A plain bordered plate, not a
   coloured bar: it is a caveat, not an alarm. */
.res-guide__flag {
  margin: 18px 0 0;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: var(--hairline) solid var(--color-border-strong);
  background: color-mix(in srgb, var(--color-fg) 4%, transparent);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--color-fg-secondary);
}

.res-guide__prompt {
  margin: 20px 0 6px;
}

.res-guide__promptText {
  margin: 10px 0 0;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: var(--hairline) solid var(--color-border);
  background: color-mix(in srgb, var(--color-fg) 6%, transparent);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--color-fg-secondary);
}

/* When the prompt IS the guide, it is the thing being read, not a preamble. */
.res-dialog--prompt .res-guide__promptText {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-fg);
  padding: 20px 22px;
}

.res-guide__section {
  margin-top: 34px;
}

.res-guide__heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: var(--hairline) solid var(--color-border);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-fg);
}

.res-guide__tally {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: var(--tracking-label-tight);
  color: var(--color-fg-muted);
}

.res-guide__note {
  margin: 10px 0 0;
  font-size: var(--text-body-sm);
  color: var(--color-fg-muted);
}

.res-guide__list {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.res-guide__item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 0;
  border-bottom: var(--hairline) solid var(--color-border-soft);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-fg-secondary);
  text-wrap: pretty;
}

.res-guide__item:last-child {
  border-bottom: 0;
}

/* A marker, not a state: nothing here is ticked off for the reader, so it
   stays neutral. Green would read as "already handled". */
.res-guide__tick {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  border-radius: 6px;
  border: var(--hairline) solid var(--color-border-strong);
  color: var(--color-fg-muted);
}

.res-guide__tick svg {
  width: 12px;
  height: 12px;
}

.res-guide__term {
  color: var(--color-fg);
  font-weight: 600;
}

.res-guide__closing {
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: var(--hairline) solid var(--color-border);
  font-size: var(--text-body);
  color: var(--color-fg-secondary);
}

.res-dialog--guide .res-card__tags {
  margin-top: 22px;
}

/* --- Empty ------------------------------- */

.res-empty {
  margin: 28px 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label-tight);
  color: var(--color-fg-muted);
}

/* --- Reveal ------------------------------ */
/* Static by default so the page is readable before and without JS; the page
   script adds data-res-animate and takes over. */

/* transform, not the `translate` property: GSAP animates the transform, and a
   separate `translate` would survive the tween and leave the element offset. */
.res-page[data-res-animate] [data-res-reveal] {
  opacity: 0;
  transform: translateY(12px);
}

/* --- Responsive -------------------------- */

@media (max-width: 900px) {
  .res-page {
    padding: 104px 16px 88px;
  }

  .res-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 40px;
  }

  /* The rail becomes a horizontal scroller above the content, keeping the same
     order: pick a shelf, then read it. */
  .res-rail {
    position: static;
    padding: 6px;
  }

  .res-rail__list {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .res-rail__list::-webkit-scrollbar {
    display: none;
  }

  .res-rail__list li {
    flex: none;
    scroll-snap-align: start;
  }

  .res-rail__item {
    white-space: nowrap;
  }

  .res-head {
    margin-top: 40px;
  }

  .res-grid,
  .res-grid--reels {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

/* The guide dialog's head is a title, a subtitle, a copy button and a close.
   Side by side that squeezes the title into a four-word column on a phone, so
   below this width it stacks: heading first, then the two controls on a row of
   their own, both still full size. */
@media (max-width: 700px) {
  .res-dialog--guide .res-dialog__surface {
    padding: 0 18px 22px;
  }

  .res-dialog__head--sticky {
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 -18px;
    padding: 16px 18px 12px;
  }

  .res-dialog--guide .res-dialog__title {
    font-size: 1.25rem;
  }

  .res-dialog__tools {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  .res-guide__copy {
    height: 40px;
  }

  .res-guide__item {
    font-size: 0.9375rem;
  }
}

@media (max-width: 520px) {
  .res-grid,
  .res-grid--reels {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Preferences ------------------------- */

@media (prefers-reduced-motion: reduce) {
  .res-card__inner,
  .res-dialog {
    transition: opacity 200ms var(--ease-out);
  }

  .res-card:hover .res-card__inner,
  .res-card__action:active,
  .res-card__more:active,
  .res-rail__item:active,
  .res-dialog__close:active {
    transform: none;
  }

  .res-dialog {
    scale: 1;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .res-rail,
  .res-dialog__surface {
    background: var(--color-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .res-card__inner,
  .res-search__form {
    background: var(--color-surface);
  }
}

@media (prefers-contrast: more) {
  .res-rail,
  .res-card__inner,
  .res-search__form,
  .res-dialog__surface {
    border-color: var(--color-fg-secondary);
    background: var(--color-bg);
  }

  .res-card__desc,
  .res-rail__item {
    color: var(--color-fg);
  }
}