@layer reset, shell, dashboard, login, responsive;

@layer reset {
  :root {
    color-scheme: light;
    --black: #171717;
    --white: #fff;
    --canvas: #f7f7f4;
    --surface: #fdfdfb;
    --soft: #f0f0ec;
    --ink: #383838;
    --muted: #686864;
    --line: #d4d3ce;
    --action-primary: #3081b8;
    --action-back: #b62435;
    --action-alternate: #3c7955;
    --page-width: 1440px;
    --page-gutter: clamp(1.25rem, 4vw, 2.125rem);
  }

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

  html {
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--canvas);
    color: var(--black);
  }

  body {
    min-block-size: 100vh;
    margin: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  :where(button, input, select, a) { font: inherit; }
  a { color: var(--action-primary); }

  :where(button, input, select, a):focus-visible {
    outline: 3px solid var(--action-primary);
    outline-offset: 3px;
  }
}

@layer shell {
  .site-header {
    z-index: 20;
    border-block-end: 1px solid var(--black);
    background: var(--surface);
  }

  :where(.header-inner, .main-inner, .footer-inner) {
    inline-size: min(100%, var(--page-width));
    margin-inline: auto;
  }

  :where(.header-inner, .footer-inner) {
    min-block-size: 70px;
    padding-inline: var(--page-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: .875rem;
    text-decoration: none;
    color: var(--black);
  }

  .brand-logo {
    inline-size: 150px;
    block-size: 42px;
    object-fit: contain;
    object-position: center;
  }

  .brand-copy { display: grid; gap: 2px; }

  .brand-title {
    font-size: .9375rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  :where(.brand-subtitle, .environment, .eyebrow, .meta, .footer-inner) {
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  :where(.brand-subtitle, .environment, .meta, .footer-inner) { color: var(--muted); }

  .site-footer { border-block-start: 1px solid var(--black); background: var(--black); }
  .footer-inner { color: var(--white); }
  .footer-inner a { color: var(--white); }
}

@layer dashboard {
  .dashboard-page {
    .site-header { position: sticky; inset-block-start: 0; }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 1.375rem;
    }

    .account {
      min-inline-size: 0;
      display: flex;
      align-items: center;
      gap: .625rem;
      font-size: .8125rem;
    }

    .account-dot {
      inline-size: 8px;
      aspect-ratio: 1;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--black);
    }

    :where(.menu-button, .close-button) {
      border: 0;
      background: transparent;
      cursor: pointer;
    }

    .menu-button { color: var(--black); }
    .close-button { color: var(--action-back); }

    .menu-button {
      block-size: 42px;
      padding-inline: 1rem;
      display: inline-flex;
      align-items: center;
      gap: .75rem;
      font-size: .8125rem;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .menu-icon { inline-size: 18px; display: grid; gap: 4px; }
    .menu-icon span { block-size: 1px; background: currentColor; }
    main { inline-size: 100%; }
    .main-inner { padding: clamp(2.25rem, 5vw, 3.5rem) var(--page-gutter) clamp(3.25rem, 7vw, 4.5rem); }
    .page-heading { max-inline-size: 860px; margin-block-end: clamp(2rem, 4vw, 3rem); }
    .eyebrow { margin: 0 0 .875rem; font-weight: 750; }

    h1 {
      max-inline-size: 760px;
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(3rem, 6vw, 5rem);
      font-weight: 400;
      line-height: .95;
      letter-spacing: -.055em;
    }

    .intro {
      max-inline-size: 680px;
      margin: 1.25rem 0 0;
      color: var(--ink);
      font-size: 1.125rem;
      line-height: 1.6;
    }

    .dashboard-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr);
      border-block: 1px solid var(--black);
    }

    .panel { min-block-size: 320px; padding: 1.75rem; }
    .panel + .panel { border-inline-start: 1px solid var(--black); }

    .panel-header {
      margin-block-end: 1.75rem;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1.25rem;
    }

    h2 {
      margin: 0;
      font-size: .875rem;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    :where(.task-list, .status-list, .nav-groups, .nav-links) {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .task-item {
      padding-block: 1rem;
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      align-items: center;
      gap: 1.125rem;
      border-block-start: 1px solid var(--line);
    }

    .task-number, .status-value {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 1.5rem;
    }

    .task-title { display: block; font-size: 1rem; font-weight: 650; }
    .task-detail { display: block; margin-block-start: 5px; color: var(--muted); font-size: .8125rem; }
    .arrow { font-size: 1.375rem; font-weight: 300; }
    .assigned-task { align-items: start; }
    .task-description { max-inline-size: 58ch; line-height: 1.45; }
    .task-link { display: inline-block; margin-block-start: .625rem; color: var(--action-alternate); font-size: .75rem; font-weight: 750; text-underline-offset: 4px; }
    .task-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: .5rem; }
    .task-actions form { margin: 0; }
    .completed-task .task-title, .task-card-complete h3 { color: var(--muted); text-decoration: line-through; }
	.task-card-archived { opacity: .58; }
    .completed-task .task-number { color: var(--action-alternate); }
    .task-priority { margin-inline-start: .5rem; color: var(--action-back); font-family: inherit; font-size: .6875rem; font-weight: 750; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; vertical-align: middle; }
    .task-timing { margin: .875rem 0 0; color: var(--muted); font-size: .75rem; }
    .status-list { display: grid; }

    .status-item {
      padding-block: 1.0625rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      border-block-start: 1px solid var(--line);
      font-size: .875rem;
    }

    .dashboard-calendar { margin-block-start: clamp(1.5rem, 4vw, 2.5rem); border-block: 1px solid var(--black); }
    .dashboard-calendar-priority { margin-block: calc(-1 * clamp(1rem, 2.5vw, 1.75rem)) clamp(2.5rem, 5vw, 4.5rem); }
    .calendar-upcoming-header, .calendar-navigation { padding-block: 1.5rem; display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; }
    .calendar-upcoming-header .eyebrow { margin-block-end: .5rem; }
    .calendar-upcoming-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .calendar-upcoming-item { min-inline-size: 0; padding: 1.25rem; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 1rem; border-block-start: 1px solid var(--line); }
    .calendar-upcoming-item + .calendar-upcoming-item { border-inline-start: 1px solid var(--line); }
    .calendar-upcoming-item time { display: grid; gap: 2px; color: var(--action-alternate); font-size: .6875rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
    .calendar-upcoming-item time strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.375rem; font-weight: 400; letter-spacing: 0; }
    .calendar-upcoming-item h3 { margin: 0; font-size: .8125rem; line-height: 1.4; }
    .calendar-upcoming-item p { margin: .375rem 0 0; color: var(--muted); font-size: .6875rem; line-height: 1.45; }
    .calendar-upcoming-link { display: flex; align-items: center; justify-content: space-between; color: var(--action-alternate); font-size: .8125rem; font-weight: 750; letter-spacing: .04em; line-height: 1.35; text-decoration: none; text-transform: uppercase; }
    .calendar-upcoming-link span { font-size: 1.25rem; }

    .publishing-calendar { border-block: 1px solid var(--black); }
    .calendar-navigation h2 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 400; letter-spacing: -.02em; text-transform: none; }
    .calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .calendar-weekdays span { padding: .75rem; border-block-start: 1px solid var(--line); color: var(--muted); font-size: .6875rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
    .calendar-day { min-block-size: 150px; padding: .625rem; border-block-start: 1px solid var(--line); border-inline-start: 1px solid var(--line); }
    .calendar-day:nth-child(7n + 1) { border-inline-start: 0; }
    .calendar-day > time { display: block; margin-block-end: .5rem; font-family: Georgia, "Times New Roman", serif; font-size: 1rem; }
    .calendar-day-outside { background: #f7f7f7; color: var(--muted); }
    .calendar-event { margin-block-start: .5rem; padding: .5rem; border-inline-start: 3px solid var(--action-alternate); background: #f5f5f5; }
	.calendar-event-publishing { border-inline-start-color: var(--action-primary); }
	.calendar-event-admin { border-inline-start-color: var(--black); }
	.calendar-event form { margin: .5rem 0 0; }
	.calendar-delete-button { inline-size: 24px; block-size: 24px; padding: 0; border: 0; background: var(--action-back); color: var(--white); cursor: pointer; font-size: 1rem; line-height: 1; }
	.calendar-event strong, .calendar-event span, .calendar-event small { display: block; }
    .calendar-event strong { font-size: .6875rem; line-height: 1.35; }
    .calendar-event span, .calendar-event small { margin-block-start: .25rem; color: var(--muted); font-size: .625rem; line-height: 1.3; }

    .message-center {
      margin-block: 0 clamp(3rem, 7vw, 4.5rem);
      border-block: 1px solid var(--black);
    }

    .message-center-header {
      padding: 1.5rem 0;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 1.5rem;
    }

    .message-center-header .eyebrow { margin-block-end: .5rem; }
    .message-center-header h2 { font-size: 1rem; }
    .message-list { display: grid; }

    .message-card {
      padding: 1.75rem 0;
      border-block-start: 1px solid var(--line);
    }

    .message-meta {
      margin-block-end: .75rem;
      display: flex;
      justify-content: space-between;
      gap: 1.5rem;
      color: var(--muted);
      font-size: .75rem;
      line-height: 1.5;
    }

    .message-card h3 {
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 1.625rem;
      font-weight: 400;
    }

    .message-body {
      max-inline-size: 880px;
      margin: 1rem 0 0;
      color: var(--ink);
      line-height: 1.65;
    }

    .message-actions {
      margin-block-start: 1.5rem;
      display: flex;
      align-items: center;
      gap: .75rem;
    }

    .message-actions form { margin: 0; }

    :where(.primary-button, .secondary-button, .danger-button) {
      min-block-size: 38px;
      padding-inline: .875rem;
      border: 0;
      display: inline-grid;
      place-items: center;
      cursor: pointer;
      font-size: .75rem;
      font-weight: 750;
      letter-spacing: .05em;
      text-decoration: none;
      text-transform: uppercase;
    }

    .secondary-button { background: var(--action-alternate); color: var(--white); }
    .text-button { min-block-size: auto; padding: 0; border: 0; background: transparent; color: var(--action-back); font-size: .75rem; font-weight: 750; letter-spacing: .05em; text-decoration: underline; text-underline-offset: 4px; text-transform: uppercase; }
    .alternate-link { color: var(--action-alternate); }
    .secondary-button:hover { background: #2d5e43; color: var(--white); }
    .empty-message { margin: 0; padding: 1.5rem 0; border-block-start: 1px solid var(--line); color: var(--muted); }
    .archive-center { max-inline-size: 1000px; margin-block-end: 0; }
    .archive-date { margin: 1rem 0 0; color: var(--muted); font-size: .75rem; }

    .menu-scrim {
      position: fixed;
      inset: 0;
      z-index: 29;
      border: 0;
      background: rgb(0 0 0 / 28%);
      opacity: 0;
      pointer-events: none;
      transition: opacity 180ms ease;
    }

    .flyout {
      position: fixed;
      inset: 0 0 0 auto;
      z-index: 30;
      inline-size: min(460px, 100%);
      overflow: hidden;
      border-inline-start: 1px solid var(--black);
      background: var(--white);
      transform: translateX(101%);
      transition: transform 220ms ease;
    }

    .menu-panel {
      position: absolute;
      inset: 0;
      padding: 1.5rem;
      overflow-y: auto;
      background: var(--white);
    }

    .submenu-panel { display: none; }
    .flyout.submenu-open .main-menu-panel { display: none; }
    .flyout.submenu-open .submenu-panel.is-active { display: block; }

    &.menu-open { overflow: hidden; }
    &.menu-open .menu-scrim { opacity: 1; pointer-events: auto; }
    &.menu-open .flyout { transform: translateX(0); }

    .flyout-header {
      padding-block-end: 1.25rem;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) 38px;
      align-items: start;
      gap: 1rem;
      border-block-end: 1px solid var(--black);
    }

    .flyout-title {
      margin: 0;
      min-inline-size: 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.25rem, 3.5vw, 1.6rem);
      font-weight: 400;
      line-height: 1.1;
    }

    .main-menu-panel .flyout-header { grid-template-columns: minmax(0, 1fr) 38px; }
    .submenu-panel .flyout-header { grid-template-columns: 38px minmax(0, 1fr) 38px; gap: .5rem; }
    .submenu-panel .close-button { justify-self: end; }
    .submenu-panel .flyout-title { margin-inline-start: .75rem; font-size: clamp(1.2rem, 3vw, 1.45rem); }

    .close-button { inline-size: 38px; aspect-ratio: 1; font-size: 1.35rem; line-height: 1; }
    .back-button { inline-size: 38px; aspect-ratio: 1; border: 0; background: var(--action-primary); color: var(--white); cursor: pointer; font-size: 1.1rem; }
    .back-button:hover { background: #246994; color: var(--white); }
    .nav-groups { display: grid; }
    .nav-group { padding-block: 1.125rem; border-block-end: 1px solid var(--line); }

    .nav-label {
      margin-block-end: .625rem;
      color: var(--muted);
      font-size: .6875rem;
      font-weight: 750;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .nav-links { display: grid; gap: 2px; }

    :where(.nav-links a, .nav-submenu-button, .account-reset-button) {
	  padding-block: .4375rem;
	  padding-inline: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      inline-size: 100%;
      border: 0;
      background: transparent;
      color: var(--black);
      cursor: pointer;
      font-size: .975rem;
      text-decoration: none;
      text-align: start;
    }

    :where(.nav-links a, .nav-submenu-button, .account-reset-button, .logout-button):hover { text-decoration: underline; text-underline-offset: 5px; }
    :where(.logout-form, .account-reset-form) { margin: 0; }
    :where(.account-reset-button, .logout-button) {
      inline-size: 100%;
      padding: .8125rem 0;
      border: 0;
      background: transparent;
      color: var(--action-back);
      cursor: pointer;
      font: inherit;
      font-size: 1.0625rem;
      text-align: start;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    &.form-page {
      .compact-heading { max-inline-size: 980px; margin-block-end: 2.25rem; }
      .compact-heading h1 { font-size: clamp(2.8rem, 5vw, 4.5rem); }

      .user-admin-heading {
        max-inline-size: none;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 2rem;
      }

      .form-panel {
        max-inline-size: 900px;
        padding: clamp(1.25rem, 3vw, 2rem) 0;
        border-block: 1px solid var(--black);
      }

      .form-panel-header {
        margin-block-end: 1.5rem;
        padding-block-end: 1rem;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1.5rem;
        border-block-end: 1px solid var(--black);
      }

      .step-label {
        margin: 0 0 .5rem;
        color: var(--muted);
        font-size: .6875rem;
        font-weight: 750;
        letter-spacing: .1em;
        text-transform: uppercase;
      }

      .form-panel h2 {
        font-family: Georgia, "Times New Roman", serif;
        font-size: 2rem;
        font-weight: 400;
        letter-spacing: normal;
        text-transform: none;
      }

      .text-link { font-size: .8125rem; text-underline-offset: 4px; }
      .back-link { color: var(--action-back); }
      .admin-form { display: grid; gap: 1.125rem; }
      .form-grid { display: grid; gap: 1.125rem; }
      .two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .field { display: grid; gap: .4375rem; }
      .field label { font-size: .75rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
      .field-label-optional { color: var(--muted); font-weight: 400; letter-spacing: normal; text-transform: none; }

      :where(.field input, .field select, .field textarea) {
        inline-size: 100%;
        padding: .625rem .75rem;
        border: 1px solid var(--black);
        border-radius: 0;
        background: var(--white);
        color: var(--black);
        font-size: .875rem;
      }

      :where(.field input, .field select) { block-size: 42px; }
      .field textarea { min-block-size: 132px; resize: vertical; line-height: 1.55; }

      .audience-fieldset {
        margin: 0;
        padding: 0;
        display: grid;
        gap: .75rem;
        border: 0;
      }

      .audience-fieldset legend {
        margin-block-end: .75rem;
        font-size: .75rem;
        font-weight: 750;
        letter-spacing: .07em;
        text-transform: uppercase;
      }

      :where(.choice-row, .recipient-row) { cursor: pointer; }
      .choice-row { display: flex; align-items: center; gap: .625rem; font-size: .875rem; }
      :where(.choice-row input, .recipient-row input) { inline-size: 18px; block-size: 18px; accent-color: var(--black); }

      .recipient-list {
        max-block-size: 330px;
        margin-block-start: .5rem;
        overflow-y: auto;
        border: 1px solid var(--black);
      }

      .recipient-row {
        padding: .875rem 1rem;
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: .875rem;
      }

      .recipient-row + .recipient-row { border-block-start: 1px solid var(--line); }
      .recipient-row span { min-inline-size: 0; display: grid; gap: .25rem; }
      .recipient-row strong { font-size: .875rem; }
      .recipient-row small { overflow: hidden; color: var(--muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }

      .task-recipient-picker { position: relative; }
      .task-recipient-picker summary { min-block-size: 48px; padding: .75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--black); cursor: pointer; font-size: .9375rem; list-style: none; }
      .task-recipient-picker summary::-webkit-details-marker { display: none; }
      .task-recipient-picker[open] summary { border-block-end-color: var(--line); }
      .task-recipient-options { position: absolute; z-index: 10; inset-inline: 0; padding: .75rem; border: 1px solid var(--black); border-block-start: 0; background: var(--white); box-shadow: 0 .75rem 1.5rem rgb(0 0 0 / 12%); }
      .task-all-recipients { padding: .25rem 0 1rem; font-weight: 650; }
      .task-recipient-options .recipient-list { max-block-size: 270px; margin: 0; border: 1px solid var(--line); }

      .field-help { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }
      .notice { margin-block-end: 1.5rem; padding: .875rem 1rem; border: 1px solid var(--black); font-size: .875rem; line-height: 1.5; }

      .form-actions {
        padding-block-start: 1rem;
        display: flex;
        align-items: center;
        gap: 1.25rem;
        border-block-start: 1px solid var(--line);
      }

      .form-actions p { max-inline-size: 360px; margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }

      .primary-button {
        min-block-size: 42px;
        padding-inline: .875rem;
        border: 0;
        background: var(--action-primary);
        color: var(--white);
        cursor: pointer;
        font-size: .8125rem;
        font-weight: 750;
        letter-spacing: .06em;
        text-transform: uppercase;
      }

      .primary-button:hover { background: #246994; color: var(--white); }
      .primary-button:disabled { cursor: not-allowed; opacity: .45; }
      .primary-button.button-link { display: inline-grid; flex: 0 0 auto; place-items: center; text-decoration: none; }

	  .task-manager-heading { max-inline-size: none; display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; }
	  .calendar-heading { max-inline-size: none; display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; }
	  .calendar-add-button { min-block-size: 42px; padding-inline: .875rem; font-size: .8125rem; }
	  .calendar-notice { max-inline-size: none; }
	  .calendar-item-dialog { inline-size: min(680px, calc(100% - 2rem)); max-block-size: min(860px, calc(100dvh - 2rem)); padding: 0; border: 1px solid var(--black); }
	  .calendar-item-dialog::backdrop { background: rgb(0 0 0 / 45%); }
	  .calendar-item-dialog .form-panel { max-inline-size: none; border: 0; }
	  .task-manager { margin-block-start: 0; }
      .task-manager .message-card { padding-block: 1.25rem; }
      .task-delete-button { color: var(--action-back); }

      .user-admin-notice { max-inline-size: 1100px; }

      .user-directory {
        margin-block-end: 2rem;
        border-block: 1px solid var(--black);
        background: var(--surface);
      }

      .directory-header {
        padding: 1rem;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1.5rem;
        border-block-end: 1px solid var(--black);
        background: var(--soft);
      }

      .directory-header .step-label { margin-block-end: .5rem; }
      .table-scroll { max-block-size: 620px; overflow: auto; }

      .user-table {
        inline-size: 100%;
        border-collapse: collapse;
        font-size: .8125rem;
        text-align: start;
      }

      .user-table :where(th, td) { padding: .8125rem 1rem; border-block-end: 1px solid var(--line); text-align: start; vertical-align: middle; }
      .user-table th { position: sticky; inset-block-start: 0; z-index: 1; background: var(--soft); font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; }
      .user-table tr[aria-current="true"] { background: var(--soft); }
      .user-table tbody tr:hover { background: #fafaf7; }
      .user-table td:nth-child(2) { overflow-wrap: anywhere; }
      .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

      .user-editor { max-inline-size: 1100px; }

      .user-editor-modal {
		position: fixed;
		inset: 50% auto auto 50%;
        inline-size: min(1100px, calc(100% - 2rem));
        max-inline-size: none;
        max-block-size: min(900px, calc(100dvh - 2rem));
		margin: 0;
        padding: 0;
        overflow: auto;
        border: 1px solid var(--black);
        background: var(--white);
        color: var(--black);
		transform: translate(-50%, -50%);
      }

      .user-editor-modal::backdrop { background: rgb(0 0 0 / 45%); }
      .user-editor-modal .user-editor { max-inline-size: none; border: 0; }

      .modal-close {
        inline-size: 42px;
        aspect-ratio: 1;
        border: 0;
        background: var(--action-back);
        color: var(--white);
        cursor: pointer;
        font-size: 1.5rem;
        line-height: 1;
      }

      .modal-close:hover { background: var(--action-back); color: var(--white); }

      .settings-fieldset {
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border: 1px solid var(--black);
      }

      .settings-fieldset legend {
        margin-inline-start: 1rem;
        padding-inline: .5rem;
        font-size: .75rem;
        font-weight: 750;
        letter-spacing: .07em;
        text-transform: uppercase;
      }

      .setting-toggle {
        min-block-size: 72px;
        padding: 1rem;
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: .875rem;
        cursor: pointer;
      }

      .setting-toggle:nth-of-type(even) { border-inline-start: 1px solid var(--line); }
      .setting-toggle:nth-of-type(n+3) { border-block-start: 1px solid var(--line); }
      .setting-toggle input { inline-size: 18px; block-size: 18px; accent-color: var(--black); }
      .setting-toggle span { min-inline-size: 0; display: grid; gap: .25rem; }
      .setting-toggle strong { font-size: .875rem; }
      .setting-toggle small { color: var(--muted); font-size: .6875rem; line-height: 1.4; }

      .system-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); }
      .system-fields div { min-inline-size: 0; padding: 1rem; display: grid; gap: .375rem; }
      .system-fields div + div { border-inline-start: 1px solid var(--line); }
      .system-fields span { color: var(--muted); font-size: .6875rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
      .system-fields strong { font-size: .8125rem; font-weight: 500; overflow-wrap: anywhere; }

      .account-actions {
        margin-block-start: 3rem;
        padding-block-start: 2rem;
        border-block-start: 1px solid var(--black);
      }

      .account-actions-heading { margin-block-end: 1.5rem; }
      .account-actions-heading h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; font-weight: 400; }
      .account-action-list { display: grid; }

      .account-action-list form {
        padding-block: 1.125rem;
        display: grid;
        grid-template-columns: minmax(190px, auto) minmax(0, 1fr);
        align-items: center;
        gap: 1.25rem;
        border-block-start: 1px solid var(--line);
      }

      .account-action-list p { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }

      .promoted-listings-heading {
        max-inline-size: none;
        margin-block-end: clamp(1.75rem, 4vw, 2.5rem);
        display: grid;
        grid-template-columns: max-content minmax(320px, 680px);
        align-items: end;
        column-gap: clamp(2rem, 7vw, 7rem);
      }
      .promoted-listings-heading .intro { margin: 0 0 .35rem; }
      .promoted-listings-form {
        max-inline-size: none;
        padding-block: 0 clamp(1.5rem, 2vw, 2rem);
        padding-inline: 0;
      }
      .promoted-listings-notice { max-inline-size: none; }
      .notice-success { border-inline-start: 6px solid var(--black); }
      .notice-error { border-inline-start: 6px double var(--black); }
      .promoted-listings-form .field-help { max-inline-size: 660px; }
      .promoted-listings-actions { flex-wrap: wrap; }
      .promoted-listings-actions :is(.primary-button, .secondary-button) { min-block-size: 48px; padding-inline: 1rem; font-size: .8125rem; }
      .promoted-listings-history { max-inline-size: none; margin-block-start: clamp(1.5rem, 2vw, 2rem); border-block-start: 0; }
      .promoted-listings-table td { vertical-align: top; }
      .promoted-listings-table td strong,
      .promoted-listings-table td small { display: block; }
      .promoted-listings-table td small { margin-block-start: .25rem; color: var(--muted); line-height: 1.45; }
      .promoted-listings-table .status-pill { display: inline-block; padding: .25rem .5rem; border: 1px solid var(--black); font-size: .6875rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
      .promoted-listings-table form { margin: 0; }
      .promotion-row-actions { display: flex; align-items: center; gap: .5rem; }
      .promoted-listings-table .danger-button { min-block-size: 36px; }
      .small-delete-button { inline-size: 32px; block-size: 32px; border: 0; background: var(--action-back); color: var(--white); cursor: pointer; font-size: 1.25rem; line-height: 1; }
      .small-delete-button:hover { background: var(--action-back); color: var(--white); }
      .empty-state { margin: 0; padding: 2rem 1.5rem; color: var(--muted); }
      .pagination { padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-block-start: 1px solid var(--line); color: var(--muted); font-size: .8125rem; }
      .pagination > :where(span:first-child, span:last-child),
      .pagination a { font-size: .9375rem; font-weight: 650; }
      .pagination a { color: var(--action-primary); text-underline-offset: 4px; }
      .pagination .pagination-previous { color: var(--action-back); }

      .wanteds-heading {
        max-inline-size: none;
        margin-block-end: clamp(1.75rem, 4vw, 2.5rem);
        display: grid;
        grid-template-columns: max-content minmax(320px, 680px);
        align-items: end;
        column-gap: clamp(2rem, 7vw, 7rem);
      }
      .wanteds-heading .intro { margin: 0 0 .35rem; }
      .wanteds-list { max-inline-size: none; margin-block-start: 0; }
      .wanteds-table td { vertical-align: top; }
      .wanteds-table td strong,
      .wanteds-table td small { display: block; }
      .wanteds-table td small { margin-block-start: .25rem; color: var(--muted); line-height: 1.45; }
      .wanteds-table .wanted-description { max-inline-size: 460px; color: var(--ink); line-height: 1.5; }
      .wanteds-table form { margin: 0; }
      .wanteds-table .danger-button { min-block-size: 36px; }
      .wanteds-table tr.is-expired { background: #f3f3f3; color: var(--muted); }
      .wanteds-table tr.is-expired :where(strong, small, .wanted-description, a) { color: var(--muted); }
      .wanteds-table tr.is-expired :where(.edit-button, .danger-button) { opacity: .65; }
      .wanted-row-actions { display: flex; align-items: center; gap: .5rem; }
      .edit-button { color: var(--action-primary); }

      .wanted-editor-modal {
        position: fixed;
        inset: 50% auto auto 50%;
        inline-size: min(880px, calc(100% - 2rem));
        max-inline-size: none;
        max-block-size: min(900px, calc(100dvh - 2rem));
        margin: 0;
        padding: 0;
        overflow: auto;
        border: 1px solid var(--black);
        background: var(--white);
        color: var(--black);
        transform: translate(-50%, -50%);
      }
      .wanted-editor-modal::backdrop { background: rgb(0 0 0 / 45%); }
      .wanted-editor-modal .form-panel { max-inline-size: none; border: 0; }
      .wanted-editor-modal .system-fields { margin-block-end: 1.5rem; }
      .wanted-editor-modal .field:has(textarea) { grid-column: span 2; }

      .equipment-updater-heading {
        max-inline-size: none;
        margin-block-end: clamp(1.75rem, 4vw, 2.5rem);
        display: grid;
        grid-template-columns: max-content minmax(320px, 680px);
        align-items: end;
        column-gap: clamp(2rem, 7vw, 7rem);
      }
      .equipment-updater-heading .intro { margin: 0 0 .35rem; }
      .equipment-updater-controls { margin-block-end: 1.5rem; display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
      .dealer-picker-form { display: flex; align-items: end; gap: .75rem; }
      .dealer-picker-form .field { min-inline-size: min(100%, 440px); }
      .equipment-updater-controls select { min-inline-size: min(100%, 440px); }
      .equipment-updater-list { max-inline-size: none; }
      .equipment-directory-header { padding-block: 1.125rem; }
      .equipment-search-form { padding-block: 1rem; display: flex; align-items: center; gap: .625rem; border-block-end: 1px solid var(--line); }
      .equipment-search-form input { inline-size: min(100%, 520px); }
      .equipment-search-form :is(input, .secondary-button) { block-size: 48px; }
      .equipment-updater-table td { vertical-align: top; }
      .equipment-updater-table td strong, .equipment-updater-table td small { display: block; }
      .equipment-updater-table td small { margin-block-start: .25rem; color: var(--muted); line-height: 1.45; }
      .equipment-updater-table :is(th:last-child, td:last-child) { white-space: nowrap; }
      .equipment-row-actions {
        display: grid;
        grid-template-columns: max-content max-content max-content;
        align-items: center;
        justify-content: start;
        column-gap: 1.125rem;
      }
      .equipment-row-actions form { inline-size: max-content; margin: 0; }
      .equipment-row-actions .text-button {
        min-block-size: 32px;
        padding-inline: 0;
        display: inline-grid;
        place-items: center;
        font-size: .6875rem;
      }
      .equipment-row-actions .equipment-view-link { color: var(--action-alternate); }
      .equipment-row-actions .equipment-delete-link { color: var(--action-back); }
      .equipment-updater-empty { border-block: 1px solid var(--line); }
      .equipment-editor-modal {
        position: fixed;
        inset: 50% auto auto 50%;
        inline-size: min(880px, calc(100% - 2rem));
        max-inline-size: none;
        max-block-size: min(900px, calc(100dvh - 2rem));
        margin: 0;
        padding: 0;
        overflow: auto;
        border: 1px solid var(--black);
        background: var(--white);
        color: var(--black);
        transform: translate(-50%, -50%);
      }
      .equipment-editor-modal::backdrop { background: rgb(0 0 0 / 45%); }
      .equipment-editor-modal .form-panel { max-inline-size: none; border: 0; }
      .equipment-reference { margin-block-end: 1.5rem; }

      .category-info-heading {
        max-inline-size: none;
        margin-block-end: clamp(1.75rem, 4vw, 2.5rem);
        display: grid;
        grid-template-columns: max-content minmax(320px, 680px);
        align-items: end;
        column-gap: clamp(2rem, 7vw, 7rem);
      }
      .category-info-heading .intro { margin: 0 0 .35rem; }
      .category-info-layout { display: grid; grid-template-columns: minmax(230px, .34fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
      .category-picker { max-block-size: 70dvh; overflow: auto; border-block-start: 1px solid var(--black); }
      .category-picker-header { padding-block: 1.125rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-block-end: 1px solid var(--black); }
      .category-picker-header .step-label { margin: 0; }
      .category-picker ul { margin: 0; padding: 0; list-style: none; }
      .category-picker li { border-block-end: 1px solid var(--line); }
      .category-picker a { padding: .875rem 0; display: grid; gap: .25rem; color: var(--black); text-decoration: none; }
      .category-picker a:hover { text-decoration: underline; text-underline-offset: 4px; }
      .category-picker a[aria-current="page"] { padding-inline: .75rem; background: #f1f1f1; }
      .category-picker strong { font-size: .875rem; }
      .category-picker small { color: var(--muted); font-size: .6875rem; line-height: 1.4; }
      .category-editor { min-inline-size: 0; }
      .category-editor .form-panel-header { padding-block-start: 0; }
      .category-reference-layout { margin-block-end: 1.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); }
      .category-reference-stack { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); }
      .category-reference-item, .category-icon-cell { padding: .5rem .75rem; display: grid; align-content: start; gap: .375rem; }
      .category-reference-item + .category-reference-item { border-block-start: 1px solid var(--line); }
      .category-icon-cell { border-inline-start: 1px solid var(--line); }
      .category-reference-layout :where(span, strong) { display: block; }
      .category-reference-layout span { color: var(--muted); font-size: .6875rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
      .category-reference-layout strong { font-size: .8125rem; font-weight: 500; overflow-wrap: anywhere; }
      .category-editor .form-grid textarea { min-block-size: 120px; }
      .category-icon-preview { margin: 0; display: grid; align-content: start; justify-items: start; gap: .625rem; }
      .category-icon-preview img { inline-size: 120px; block-size: 88px; object-fit: contain; }
      .category-icon-preview figcaption { min-inline-size: 0; color: var(--muted); font-size: .6875rem; line-height: 1.35; overflow-wrap: anywhere; }
      .category-icon-preview figcaption a { color: var(--action-primary); }
      .category-copy-field { grid-column: span 2; }
      .category-copy-field textarea { min-block-size: 220px !important; }
      .category-ai-snippet textarea { min-block-size: 160px !important; }

      .category-icons-heading {
        max-inline-size: none;
        margin-block-end: clamp(1.75rem, 4vw, 2.5rem);
        display: grid;
        grid-template-columns: max-content minmax(320px, 680px);
        align-items: end;
        column-gap: clamp(2rem, 7vw, 7rem);
      }
      .category-icons-heading .intro { margin: 0 0 .35rem; }
      .icon-controls { margin-block-end: 3rem; padding-block: 1.25rem; border-block: 1px solid var(--black); }
      .icon-style-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
      .icon-style-button { min-block-size: 38px; padding-inline: .875rem; border: 0; background: var(--soft); color: var(--black); cursor: pointer; font-size: .75rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
      .icon-style-button.is-active { background: var(--action-primary); color: var(--white); }
      .icon-industry-links { margin-block-start: 1.25rem; display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; }
      .icon-industry-links a { font-size: .8125rem; text-underline-offset: 4px; }
      .icon-industry-section { margin-block: 0 3rem; scroll-margin-block-start: 6rem; }
      .icon-industry-header { padding-block-end: 1rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-block-end: 1px solid var(--black); }
      .icon-industry-header h2 { font-family: Georgia, "Times New Roman", serif; font-size: 2rem; font-weight: 400; letter-spacing: normal; text-transform: none; }
      .icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.5rem; }
      .icon-card { min-inline-size: 0; aspect-ratio: 2 / 3; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border: 1px solid var(--line); overflow: hidden; }
      .icon-card h3 { min-block-size: 3.2em; margin: 0; padding: .875rem; font-size: .875rem; line-height: 1.35; }
      .icon-image-wrap { min-block-size: 0; padding: 1rem; display: grid; place-items: center; overflow: hidden; border-block: 1px solid var(--line); }
      .icon-preview-image { min-inline-size: 0; min-block-size: 0; max-inline-size: 100%; max-block-size: 100%; inline-size: auto; block-size: auto; object-fit: contain; }
      .icon-card-url { min-block-size: 108px; padding: .875rem; display: grid; align-content: start; gap: .375rem; }
      .icon-card-url > span { color: var(--muted); font-size: .625rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
      .icon-card-url a { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow-wrap: anywhere; font-size: .6875rem; line-height: 1.4; text-underline-offset: 3px; }

      .promotion-report-dialog {
        inline-size: min(860px, calc(100% - 2rem));
        max-inline-size: none;
        max-block-size: calc(100dvh - 2rem);
        padding: 0;
        overflow: auto;
        border: 1px solid var(--black);
        background: var(--white);
      }

      .promotion-report-dialog::backdrop { background: rgb(0 0 0 / 45%); }
      .promotion-report-dialog .form-panel { max-inline-size: none; padding-inline: clamp(1rem, 3vw, 2rem); border: 0; }
      .promotion-report-note { margin: 1rem 0 0; padding: .875rem 1rem; border-inline-start: 4px solid var(--action-alternate); background: #f5f5f5; font-size: .8125rem; line-height: 1.5; }
      .promotion-report-chart { margin-block-start: 1.5rem; border-block-start: 1px solid var(--line); }
      .promotion-report-row { padding-block: 1rem; display: grid; grid-template-columns: 110px repeat(2, minmax(0, 1fr)); gap: 1rem; border-block-end: 1px solid var(--line); font-size: .75rem; }
      .promotion-report-row span { min-inline-size: 0; display: grid; gap: .375rem; }
      .promotion-report-row i { display: block; inline-size: var(--value); block-size: 7px; background: var(--action-primary); }

      .danger-button {
        min-block-size: 38px;
        padding-inline: .75rem;
        border: 0;
        background: var(--action-back);
        color: var(--white);
        cursor: pointer;
        font-size: .75rem;
        font-weight: 750;
        letter-spacing: .05em;
        text-transform: uppercase;
      }

      .danger-button:hover { background: #921d2b; color: var(--white); }
      .danger-button:disabled { cursor: not-allowed; opacity: .45; }
    }
  }
}

@layer login {
  .login-page {
    main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr); }
    :where(.login-intro, .login-area) { padding: clamp(2.5rem, 6vw, 4.75rem); }

    .login-intro {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-inline-end: 1px solid var(--black);
    }

    .eyebrow { margin: 0 0 1.375rem; font-weight: 750; }

    h1 {
      max-inline-size: 680px;
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(3.25rem, 6vw, 5.25rem);
      font-weight: 400;
      line-height: .92;
      letter-spacing: -.055em;
    }

    .intro-copy {
      max-inline-size: 560px;
      margin: 1.5rem 0 3rem;
      color: var(--ink);
      font-size: 1.125rem;
      line-height: 1.6;
    }

    .security-note {
      max-inline-size: 520px;
      padding-block-start: 1.375rem;
      border-block-start: 1px solid var(--line);
      color: var(--muted);
      font-size: .8125rem;
      line-height: 1.6;
    }

    .login-area { display: grid; place-items: center; }
    .login-panel { inline-size: min(100%, 470px); }

    .login-panel h2 {
      margin: 0 0 .75rem;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 2.375rem;
      font-weight: 400;
    }

    .login-panel > p { margin: 0 0 2.25rem; color: var(--muted); font-size: .875rem; line-height: 1.6; }
    .error-message { margin-block-end: 1.5rem; padding: .875rem 1rem; border: 1px solid var(--black); font-size: .875rem; line-height: 1.5; }
    .field { margin-block-end: 1.5rem; display: grid; gap: .5625rem; }
    .field label { font-size: .75rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }

    .field input {
      inline-size: 100%;
      block-size: 42px;
      padding-inline: .75rem;
      border: 1px solid var(--black);
      border-radius: 0;
      background: var(--white);
      color: var(--black);
      font-size: .9375rem;
    }

    .submit-button {
      inline-size: 100%;
      block-size: 46px;
      margin-block-start: .5rem;
      border: 1px solid var(--action-primary);
      background: var(--action-primary);
      color: var(--white);
      cursor: pointer;
      font-size: .8125rem;
      font-weight: 750;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .submit-button:hover { background: var(--white); color: var(--action-primary); }
    .button-link { display: grid; place-items: center; text-decoration: none; }
    .form-note { margin-block-start: 1.125rem; color: var(--muted); font-size: .75rem; line-height: 1.5; }
  }
}

@layer responsive {
  @media (max-width: 900px) {
    .login-page {
      main { grid-template-columns: 1fr; }
      .login-intro { border-inline-end: 0; border-block-end: 1px solid var(--black); }
      .intro-copy { margin-block-end: 1.875rem; }
    }
  }

  @media (max-width: 760px) {
    :where(.header-inner, .main-inner, .footer-inner) { padding-inline: 1.25rem; }
    .header-inner { min-block-size: 68px; }
	.brand-logo { inline-size: 86px; block-size: 36px; }
    .brand-subtitle, .environment { display: none; }

    .dashboard-page {
      .header-actions { gap: .75rem; }
      .account { max-inline-size: 90px; }
      .account span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .menu-label { display: none; }
      .menu-button { inline-size: 42px; padding-inline: 11px; }
      .main-inner { padding-block: 3rem 4.375rem; }
      .page-heading { margin-block-end: 2.875rem; }
      h1 { font-size: clamp(3.25rem, 16vw, 4.625rem); }
      .intro { font-size: 1rem; }
      .dashboard-grid { grid-template-columns: 1fr; }
      .panel { min-block-size: auto; padding: 1.75rem 0; }
      .panel + .panel { border-block-start: 1px solid var(--black); border-inline-start: 0; }
      .task-item { grid-template-columns: 32px minmax(0, 1fr) auto; gap: .75rem; }
	  .task-actions { grid-column: 2 / -1; justify-content: start; }
      .message-center-header, .message-meta { align-items: flex-start; flex-direction: column; gap: .625rem; }
      .message-actions { align-items: stretch; flex-direction: column; }
      .message-actions :where(form, button) { inline-size: 100%; }
	  .calendar-upcoming-header, .calendar-navigation { align-items: flex-start; flex-direction: column; }
	  .calendar-upcoming-list { grid-template-columns: 1fr; }
	  .calendar-upcoming-item + .calendar-upcoming-item { border-block-start: 1px solid var(--line); border-inline-start: 0; }
	  .calendar-weekdays { display: none; }
	  .calendar-grid { grid-template-columns: 1fr; }
	  .calendar-day { min-block-size: 48px; border-inline-start: 0; }
	  .calendar-day > time { margin-block-end: 0; }
	  .calendar-day:has(.calendar-event) { min-block-size: 108px; }

	  &.form-page {
		.promoted-listings-heading { grid-template-columns: 1fr; align-items: start; gap: 1.25rem; }
		.wanteds-heading { grid-template-columns: 1fr; align-items: start; gap: 1.25rem; }
		.category-info-heading { grid-template-columns: 1fr; align-items: start; gap: 1.25rem; }
		.category-icons-heading { grid-template-columns: 1fr; align-items: start; gap: 1.25rem; }
		.equipment-updater-heading { grid-template-columns: 1fr; align-items: start; gap: 1.25rem; }
		.equipment-updater-controls, .dealer-picker-form { align-items: stretch; flex-direction: column; }
		.dealer-picker-form .field, .equipment-updater-controls select { min-inline-size: 0; }
		.equipment-search-form { align-items: stretch; flex-wrap: wrap; }
		.category-info-layout { grid-template-columns: 1fr; }
		.category-picker { max-block-size: 320px; }
		.category-reference-layout { grid-template-columns: 1fr; }
		.category-icon-cell { border-block-start: 1px solid var(--line); border-inline-start: 0; }
		.category-copy-field { grid-column: auto; }
		.two-columns { grid-template-columns: 1fr; }
		.form-panel-header, .form-actions, .user-admin-heading { align-items: flex-start; flex-direction: column; }
		.task-manager-heading { align-items: flex-start; flex-direction: column; }
		.calendar-heading { align-items: flex-start; flex-direction: column; }
		.settings-fieldset, .system-fields { grid-template-columns: 1fr; }
		.setting-toggle:nth-of-type(even) { border-inline-start: 0; }
		.setting-toggle:nth-of-type(n+2), .system-fields div + div { border-block-start: 1px solid var(--line); border-inline-start: 0; }
		.account-action-list form { grid-template-columns: 1fr; gap: .625rem; }
		.account-action-list button { inline-size: 100%; }
		.wanted-editor-modal .field:has(textarea) { grid-column: auto; }
		.user-editor-modal { inline-size: 100%; max-block-size: 100dvh; border: 0; }
		.wanted-editor-modal { inline-size: 100%; max-block-size: 100dvh; border: 0; }
		.equipment-editor-modal { inline-size: 100%; max-block-size: 100dvh; border: 0; }
	  }
    }

    @media (max-width: 620px) {
      .user-admin-page {
        .table-scroll { max-block-size: none; overflow: visible; }
        .user-table :where(thead, th) { display: none; }
        .user-table :where(tbody, tr, td) { display: block; }
        .user-table tr { padding: 1rem; border-block-end: 1px solid var(--black); }
        .user-table td { padding: .375rem 0; display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: .75rem; border: 0; }
        .user-table td::before { content: attr(data-label); color: var(--muted); font-size: .6875rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
        .user-table td:last-child { padding-block-start: .875rem; }
        .user-table td:last-child::before { content: ""; }
      }

      .promoted-listings-page {
        .promoted-listings-table :where(thead, th) { display: none; }
        .promoted-listings-table :where(tbody, tr, td) { display: block; }
        .promoted-listings-table tr { padding: 1rem; border-block-end: 1px solid var(--black); }
        .promoted-listings-table td { padding: .375rem 0; display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: .75rem; border: 0; }
        .promoted-listings-table td::before { content: attr(data-label); color: var(--muted); font-size: .6875rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
        .promoted-listings-table td:last-child { padding-block-start: .875rem; }
      }

      .wanteds-page {
        .wanteds-table :where(thead, th) { display: none; }
        .wanteds-table :where(tbody, tr, td) { display: block; }
        .wanteds-table tr { padding: 1rem; border-block-end: 1px solid var(--black); }
        .wanteds-table td { padding: .375rem 0; display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: .75rem; border: 0; }
        .wanteds-table td::before { content: attr(data-label); color: var(--muted); font-size: .6875rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
        .wanteds-table td:last-child { padding-block-start: .875rem; }
      }

      .equipment-updater-page {
        .equipment-updater-table :where(thead, th) { display: none; }
        .equipment-updater-table :where(tbody, tr, td) { display: block; }
        .equipment-updater-table tr { padding: 1rem; border-block-end: 1px solid var(--black); }
        .equipment-updater-table td { padding: .375rem 0; display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: .75rem; border: 0; }
        .equipment-updater-table td::before { content: attr(data-label); color: var(--muted); font-size: .6875rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
        .equipment-updater-table td:last-child { padding-block-start: .875rem; }
      }
    }
  }

  @media (max-width: 600px) {
    .login-page {
      :where(.login-intro, .login-area) { padding: 3rem 1.25rem; }
      h1 { font-size: clamp(3.375rem, 16vw, 4.75rem); }
    }

    .footer-inner {
      padding-block: 1.25rem;
      align-items: flex-start;
      flex-direction: column;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.flyout, .menu-scrim) { transition: none !important; }
  }
}