/* ---------------------------------------------------------------------
   sqlmgr web console -- design tokens

   Palette:
     --bg:        #1C1B19  warm graphite (not neutral black -- warmer,
                            like weathered oak in low light)
     --surface:   #26241F  panel/card surface, one step up from bg
     --surface-2: #302D26  hover/active surface
     --border:    #3D3A32  hairline dividers
     --text:      #EDE8E0  warm off-white
     --text-dim:  #A89F8E  secondary text
     --accent:    #B8874B  muted golden oak -- deliberately NOT the
                            terracotta/clay (#D97757-ish) that reads as
                            an AI-generated-design tell
     --accent-2:  #D9B27C  lighter oak, for hover states
     --success:   #7A9471  muted sage
     --danger:    #B65C4A  muted brick (distinct from the accent, cooler
                            and darker than typical AI-cliché terracotta)

   Type:
     Headers/labels/data -- IBM Plex Mono: evokes a spec sheet / cut
       list, fitting both "admin console" and a flooring business that
       lives and dies by precise measurements.
     Body/UI chrome -- Inter: clean, humanist, gets out of the way.

   Signature element: the "plank stack" -- a vertical stack of
   horizontal bars, one per environment tier (Production down to
   Development), thickest/most opaque at the top. This isn't decoration:
   it's the same tier hierarchy the whole tool is organized around
   (Production/Practice/UAT are "Production-level", then Beta, Alpha,
   Development), rendered as literal flooring planks -- the more
   trusted/foundational the tier, the more solid the plank.
   --------------------------------------------------------------------- */

:root {
  --bg: #1c1b19;
  --surface: #26241f;
  --surface-2: #302d26;
  --border: #3d3a32;
  --text: #ede8e0;
  --text-dim: #a89f8e;
  --accent: #b8874b;
  --accent-2: #d9b27c;
  --success: #7a9471;
  --danger: #b65c4a;

  --font-display: "IBM Plex Mono", ui-monospace, monospace;
  --font-body: "Inter", system-ui, sans-serif;

  --radius: 3px;
}

* {
  box-sizing: border-box;
}

/* The [hidden] attribute is meant to unconditionally hide an element, but
   any class rule that sets an explicit `display` value (e.g. .topbar's
   `display: flex`, .dashboard's `display: grid`) has higher specificity
   than the browser's default `[hidden] { display: none }` UA rule and
   silently wins -- which is exactly what caused the topbar and dashboard
   to render before sign-in despite having the hidden attribute set.
   !important here restores hidden's actual intended behavior. */
[hidden] {
  display: none !important;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- Signature element: the plank stack ------------------------------ */

.plank-stack {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 14px;
  display: flex;
  flex-direction: column;
  z-index: 0;
}

.plank {
  width: 100%;
  background: var(--accent);
}

/* Thicker + more opaque = higher trust tier. Production-level tiers
   (Production/Practice/UAT) read as one solid foundation block; Beta/
   Alpha/Development taper off, both in size and opacity, mirroring how
   the tool itself treats them (see the move-database tier rules). */
.plank--production { flex: 3; opacity: 1; }
.plank--practice { flex: 3; opacity: 0.94; }
.plank--uat { flex: 3; opacity: 0.88; }
.plank--beta { flex: 2; opacity: 0.6; }
.plank--alpha { flex: 1.4; opacity: 0.4; }
.plank--development { flex: 1; opacity: 0.24; }

/* --- Top bar ----------------------------------------------------------- */

.topbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  border-bottom: 1px solid var(--border);
}

.topbar__brand {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.topbar__mark {
  color: var(--accent-2);
  font-weight: 600;
}

.topbar__divider {
  color: var(--border);
  margin: 0 8px;
}

.topbar__label {
  color: var(--text-dim);
}

.user-menu {
  position: relative;
}

.user-menu__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 10px 16px;
  min-height: 40px;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.3;
  color: var(--text-dim);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.user-menu__trigger:hover {
  background: var(--surface);
  border-color: var(--border);
}

.user-menu__trigger:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

.user-menu__chevron {
  color: var(--text-dim);
  flex-shrink: 0;
}

.user-menu__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
  z-index: 10;
}

.user-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.user-menu__item:hover {
  background: var(--surface-2);
}

.user-menu__item:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: -2px;
}

/* --- Main layout -------------------------------------------------------- */

#app {
  position: relative;
  z-index: 1;
  padding-left: 14px;
}

/* --- Sign-in card -------------------------------------------------------- */

.signin-card {
  max-width: 420px;
  margin: 14vh auto 0;
  padding: 40px 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: left;
}

.signin-card__eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 14px;
}

.signin-card__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.signin-card__subtitle {
  color: var(--text-dim);
  margin: 0 0 28px;
  font-size: 14px;
}

.signin-card__domain {
  color: var(--text);
  font-weight: 600;
}

.signin-card__error {
  margin-top: 16px;
  color: var(--danger);
  font-size: 13px;
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.icon-uniform {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.header-cell__icon {
  display: none;
  vertical-align: middle;
}

.dashboard.panels-expanded .header-cell__text {
  display: none;
}

.dashboard.panels-expanded .header-cell__icon {
  display: inline-block;
}

.btn:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

.btn--primary {
  background: var(--accent);
  color: #1c1b19;
}

.btn--primary:hover {
  background: var(--accent-2);
}

.btn--secondary {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--text-dim);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.btn--secondary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #1c1b19;
}

.btn--text {
  background: transparent;
  color: var(--text-dim);
}

.btn--text:hover {
  color: var(--text);
}

.actions-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 16px;
}

.actions-panel__header {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.requests-toolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.requests-toolbar .btn {
  font-size: 13px;
  padding: 9px 14px;
  flex: 1 1 200px;
}

/* --- Dashboard ------------------------------------------------------------- */

.dashboard {
  max-width: 1440px;
  margin: 0;
  min-height: calc(100vh - 70px);
  padding: 40px 32px 80px 18px;
  display: grid;
  grid-template-columns: 1fr 3fr;
  align-items: stretch;
  gap: 16px 32px;
}

.dashboard.panels-expanded {
  grid-template-columns: 3fr 1fr;
}

/* When the left panel group is expanded, the Requests column is squeezed
   to 1/4 width -- reduce its table to just the status dot, Type,
   Requested on, and Attempted at; there isn't room for Status text/
   Requested by, and the dot alone still conveys status at a glance. */
.dashboard.panels-expanded .requests-table__header,
.dashboard.panels-expanded .request-row > summary {
  grid-template-columns: 14px 1fr 110px 90px;
}

.dashboard.panels-expanded .requests-table__header-cell--status,
.dashboard.panels-expanded .requests-table__header-cell--by,
.dashboard.panels-expanded .request-row__col--status,
.dashboard.panels-expanded .request-row__col--by {
  display: none;
}

.dashboard__panels {
  position: relative;
  padding-right: 32px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: start;
}

.dashboard__requests {
  min-width: 0;
}

.api-error-banner {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  padding: 12px 16px;
  background: rgba(182, 92, 74, 0.12);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.panel:not(.panel--requests) {
  width: 100%;
}

.panel[open] {
  width: 100%;
}

.panel--requests {
  width: 100%;
}

.panels-toggle {
  position: absolute;
  top: 0;
  right: -13px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.panels-toggle:hover {
  color: var(--text);
  border-color: var(--accent-2);
}

.panels-toggle:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

.panels-toggle__icon {
  transition: transform 150ms ease;
}

.panels-toggle[aria-expanded="true"] .panels-toggle__icon {
  transform: rotate(180deg);
}

.panel > summary.panel__header {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.panel > summary.panel__header::-webkit-details-marker {
  display: none;
}

.panel__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
}

.panel[open] .panel__header {
  border-bottom: 1px solid var(--border);
}

.panel__disclosure {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-dim);
  flex-shrink: 0;
  transition: transform 120ms ease;
}

.panel[open] .panel__disclosure {
  transform: rotate(180deg);
}

.panel__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex: 1;
}

.panel__meta {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Fixed width regardless of which frame ("Loading" vs "Loading...") is
   showing -- calculated for IBM Plex Mono at 12px (~7.2px/char × 10
   chars for "Loading..."), plus a small safety margin. text-align:left
   keeps "Loading" itself anchored at a constant start position; only
   the empty space after it (invisible) grows and shrinks. */
.loading-text {
  display: inline-block;
  min-width: 76px;
  text-align: left;
}

.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: #3b7dc4;
  color: #ffffff;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}

/* Positioned AFTER .count-badge deliberately -- both are single-class
   selectors with equal specificity, so when an element carries both
   classes, whichever rule appears LATER in the stylesheet wins. An
   earlier version had this rule BEFORE .count-badge, which meant the
   base blue background silently overrode this green one on every
   element that had both classes -- exactly the bug that made the
   "shown" count render blue instead of green despite the code's intent. */
.count-badge--current {
  background: #639922;
}

.panel-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
}

.panel-refresh:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

.panel-refresh:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 1px;
}

.panel-refresh.is-spinning svg {
  animation: panel-refresh-spin 0.6s linear;
}

@keyframes panel-refresh-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#requestsRefreshInterval {
  margin-left: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 11px;
  font-family: var(--font-body);
  padding: 4px 6px;
}

.panel__header--static #requestsRefreshInterval {
  margin-left: auto;
}

.panel__header--static .panel-refresh {
  margin-left: 8px;
}

/* The word ("servers"/"environments") only shows once the left panel
   group is expanded to 75% width -- in the default, narrower 25% state
   there isn't room for it alongside the panel title, so just the count
   badge shows. */
.dashboard:not(.panels-expanded) .count-word {
  display: none;
}

.panel__header--static {
  cursor: default;
}

.data-list__placeholder {
  padding: 16px 20px;
  margin: 0;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.6;
  max-width: 320px;
}

.data-list {
  padding: 4px 0;
}

.data-list__empty {
  padding: 20px;
  margin: 0;
  color: var(--text-dim);
  font-size: 13px;
}

.db-group:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

.db-group__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  background: var(--surface-2);
}

.db-group__count {
  color: var(--accent-2);
}

.db-group__header .row-action {
  margin-left: auto;
}

.data-row__actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

.row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 4px;
  color: var(--text-dim);
  cursor: pointer;
}

.row-action:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

.row-action:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 1px;
}

.database-filter-wrap {
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: center;
}

.database-filter-wrap .database-filter {
  flex: 1;
}

.database-filter-wrap .btn {
  flex-shrink: 0;
  padding: 8px;
}

.database-filter {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font-body);
}

.database-filter:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 1px;
}

.database-filter::placeholder {
  color: var(--text-dim);
}

.data-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

/* Placeholder only -- what this dot's color should actually represent
   (server reachable? has issues? something else?) hasn't been decided
   yet. Neutral/gray until that's defined. */
.data-row__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
  flex-shrink: 0;
}

/* In the default (25%-width) state, Servers shows just the status dot
   + name -- host:port and notes only appear once expanded to 75%, where
   there's actually room for them. */
.dashboard:not(.panels-expanded) .data-row__detail,
.dashboard:not(.panels-expanded) .data-row__notes {
  display: none;
}

.data-row:last-child {
  border-bottom: none;
}

.data-row__name {
  font-family: var(--font-display);
  font-weight: 500;
}

.data-row__detail {
  color: var(--text-dim);
}

.data-row__notes {
  color: var(--text-dim);
  margin-left: auto;
  font-style: italic;
}

/* Requests table -- header row (labels only) plus a body of <details
   name="requests"> rows sharing one grid column layout, so the summary
   content in each row lines up under the header labels. Using the same
   name value on every row makes them an exclusive accordion natively
   (Baseline widely available since 2025) -- opening one automatically
   closes any other open row, with zero JavaScript needed for that part. */

.requests-table__header {
  display: grid;
  grid-template-columns: 14px 80px 90px 1fr 150px 110px;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

.requests-table__body {
  min-height: 0;
}

.request-row {
  border-bottom: 1px solid var(--border);
}

.request-row:last-child {
  border-bottom: none;
}

.request-row > summary {
  display: grid;
  grid-template-columns: 14px 80px 90px 1fr 150px 110px;
  gap: 12px;
  align-items: center;
  padding: 12px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 13px;
}

.request-row > summary::-webkit-details-marker {
  display: none;
}

.request-row > summary:hover {
  background: var(--surface-2);
}

.request-row__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.request-row__status-dot--pending { background: var(--text-dim); }
.request-row__status-dot--processing { background: var(--accent); }
.request-row__status-dot--completed { background: var(--success); }
.request-row__status-dot--failed { background: var(--danger); }

.request-row__col--type {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: capitalize;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.request-row__col--status--failed {
  color: var(--danger);
  font-weight: 600;
}

.request-row__col--by,
.request-row__col--when,
.requests-table__header-cell--requested-on {
  text-align: left;
}

.request-row__col--requested-on {
  color: var(--text-dim);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Not yet attempted (still Pending) and sitting past the business-day
   thresholds -- yellow at 2 business days elapsed, red at 3. Once a job
   has actually started (Processing/Completed/Failed), neither applies:
   it WAS attempted, so how long ago it was requested isn't a warning
   sign anymore. */
.request-row__col--requested-on--stale-yellow {
  color: #d4b95e;
}

.request-row__col--requested-on--stale-red {
  color: var(--danger);
  font-weight: 600;
}

.request-row__detail {
  padding: 4px 20px 16px 46px;
  font-size: 13px;
}

.request-row__detail dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
}

.request-row__detail dt {
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 2px;
}

.request-row__detail dd {
  margin: 0;
  word-break: break-word;
}

/* --- Small screens ----------------------------------------------------------- */

@media (max-width: 800px) {
  .dashboard { grid-template-columns: 1fr; }
  .dashboard__panels { align-items: stretch; }
  .panel:not(.panel--requests) { width: 100%; }
}

@media (max-width: 600px) {
  .plank-stack { width: 8px; }
  .topbar { padding: 16px; flex-direction: column; align-items: flex-start; gap: 8px; }
  #app { padding-left: 8px; }
  .signin-card { margin: 8vh 16px 0; padding: 28px 22px; }
  .dashboard { padding: 24px 16px 60px 2px; grid-template-columns: 1fr; }
  .dashboard__panels { align-items: stretch; border-right: none; padding-right: 0; }
  .panel:not(.panel--requests) { width: 100%; }
  .panels-toggle { display: none; }
  .data-row { flex-wrap: wrap; }
  .data-row__notes { margin-left: 0; }
  .requests-table__header,
  .request-row > summary {
    grid-template-columns: 12px 70px 80px 60px;
  }
  .requests-table__header span:nth-child(4),
  .requests-table__header span:nth-child(5),
  .request-row__col--by,
  .request-row__col--requested-on {
    display: none;
  }
}

/* --- Request submission modal ----------------------------------------------
   Uses the native <dialog> element -- built-in modal behavior (backdrop,
   focus trapping, Escape-to-close, top-layer stacking) with no
   hand-rolled JS needed for the mechanics, same reasoning as using
   <details> elsewhere in this page. */

.request-modal {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  width: min(440px, 90vw);
  font-family: var(--font-body);
}

.request-modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.request-modal__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 18px;
  text-transform: capitalize;
}

.request-modal__fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.request-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.request-field--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.request-field label {
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--font-display);
}

.request-field--checkbox label {
  order: 2;
}

.request-field input[type="text"],
.request-field input[type="email"] {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 9px 10px;
  font-size: 13px;
  font-family: var(--font-body);
}

.request-field input[type="text"]:focus-visible,
.request-field input[type="email"]:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 1px;
}

.request-field input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.request-field select:disabled,
.request-field input:disabled,
.request-field textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.copy-plan-loading {
  margin: -2px 0 0;
  font-size: 12px;
  color: var(--accent-2);
  font-style: italic;
}

.request-field select,
.request-field textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 9px 10px;
  font-size: 13px;
  font-family: var(--font-body);
}

.request-field select:focus-visible,
.request-field textarea:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 1px;
}

.request-field textarea {
  resize: vertical;
  min-height: 38px;
  width: 100%;
  max-width: 100%;
}

.field-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  border-radius: 50%;
  border: 1px solid var(--text-dim);
  color: var(--text-dim);
  font-size: 10px;
  font-style: italic;
  font-family: Georgia, serif;
  cursor: help;
}

.field-info:hover,
.field-info:focus-visible {
  border-color: var(--accent-2);
  color: var(--accent-2);
  outline: none;
}

.request-modal__error {
  margin: 14px 0 0;
  padding: 10px 12px;
  background: rgba(182, 92, 74, 0.12);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
}

.request-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}