/* =========================================================================
   CARDS — tonal layering, no solid borders
   =========================================================================
   The "No-Line Rule": structural boundaries come from surface-tier
   background shifts, not 1px borders. A card sitting on the main
   surface uses `surface-container-lowest` (pure white in light mode);
   against a recessed secondary workspace it uses the tier above.
   Nothing here draws a line. */
.md-card {
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-large);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1rem;
  transition: background-color var(--md-sys-motion-duration-medium)
    var(--md-sys-motion-easing-standard);
}
/* Filled = the most-recessed tier, for informational panels that
   should feel like "a sheet tucked behind the main reading surface". */
.md-card--filled {
  background: var(--md-sys-color-surface-container);
}
/* Elevated = sits cleanly on top of a surface-container-low workspace.
   No drop shadow — the layering itself is the depth cue. On hover,
   lift by nudging the background one tier closer to white. */
.md-card--elevated {
  background: var(--md-sys-color-surface-container-lowest);
}
.md-card--elevated:hover {
  background: color-mix(
    in srgb,
    var(--md-sys-color-primary) 3%,
    var(--md-sys-color-surface-container-lowest)
  );
}
/* Outlined = the ghost-border variant. Used for form cards where a
   visible boundary actually helps users parse the content. Stroke is
   outline-variant at 15% — faint enough to read as structure, not
   chrome. */
.md-card--outlined {
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-ghost-stroke);
}

.md-card__headline {
  font: 600 1.375rem/1.35 var(--md-sys-typescale-font-editorial);
  margin: 0 0 0.25rem;
  color: var(--md-sys-color-on-surface);
}
.md-card__supporting {
  color: var(--md-sys-color-on-surface-variant);
  font: 500 0.75rem/1.4 var(--md-sys-typescale-font-label);
  letter-spacing: 0.01em;
}
.md-card__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

/* =========================================================================
   BUTTONS — filled, tonal, outlined, text, elevated
   ========================================================================= */
.md-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 40px;
  padding: 0 1.125rem;
  /* Scholarly Lens: rounded rectangles, not pills. Pills read too SaaS;
     this sits between "print button" and "web CTA". */
  border-radius: var(--md-sys-shape-corner-medium);
  border: none;
  font: 600 0.8125rem/1 var(--md-sys-typescale-font-label);
  letter-spacing: 0.005em;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition:
    background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    filter var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
  user-select: none;
}
.md-btn:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}
.md-btn:hover {
  text-decoration: none;
}

/* Filled — high-emphasis primary action.
   Uses the signature 135deg linear gradient from primary -> primary-container.
   This is the one place in the UI where the gradient appears; it's what
   the spec calls the "Signature Texture" that gives buttons soul. */
.md-btn--filled {
  background: var(--md-sys-gradient-primary);
  color: var(--md-sys-color-on-primary);
}
.md-btn--filled:hover {
  /* Brighten the gradient slightly on hover via filter rather than
     swapping backgrounds — keeps the transition smooth. */
  filter: brightness(1.08);
  box-shadow: var(--md-sys-elevation-1);
}

/* Tertiary — surface-variant background with on-surface-variant text.
   The spec calls this "Tertiary"; we keep the M3 name `tonal` for the
   class because that's the BEM modifier used across the codebase. */
.md-btn--tonal {
  background: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
}
.md-btn--tonal:hover {
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface);
}

/* Outlined — ghost-stroke border (outline-variant at 15%), not a
   solid stroke. Reads as boundary without visual noise. */
.md-btn--outlined {
  background: transparent;
  color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-ghost-stroke);
}
.md-btn--outlined:hover {
  background: var(--md-sys-color-surface-container-high);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
}

/* Secondary / Text — lowest-weight ghost button. No background, label-
   voice type in the primary color, subtle hover fill. */
.md-btn--text {
  background: transparent;
  color: var(--md-sys-color-primary);
  padding: 0 0.75rem;
}
.md-btn--text:hover {
  background: var(--md-sys-color-surface-container-high);
}

/* Elevated — rare. A primary-colored label sitting on a raised white
   sheet. Used sparingly in the dashboard summary card. */
.md-btn--elevated {
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-primary);
  box-shadow: var(--md-sys-elevation-2);
}
.md-btn--elevated:hover {
  box-shadow: var(--md-sys-elevation-3);
}

/* Inline SVG icons inherit color via currentColor and align to the text
   baseline inside buttons/links. No fills — strokes only. */
.md-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}
.md-btn .md-icon,
.md-top-app-bar__link .md-icon {
  margin-right: -2px; /* optical alignment against text */
}

/* Inline button groups inside cards/headers */
.md-btn-group {
  display: inline-flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* button_to wraps in a form which defaults to display:block — keep inline */
form.button_to {
  display: inline-block;
  margin: 0;
}

/* =========================================================================
   TEXT FIELDS — outlined (M3 default for forms)
   ========================================================================= */
.md-field {
  display: block;
  margin: 1rem 0;
}
.md-field__label {
  display: block;
  font: 600 0.6875rem/1.4 var(--md-sys-typescale-font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 0.5rem;
}
/* "Minimalist Ledger" — no box, no background, just a bottom stroke
   at 20% opacity. On focus the stroke goes 2px primary. Gives forms
   the feel of filling in a ruled page rather than typing into a web
   input. */
.md-field__input,
.md-field__textarea,
.md-field__select {
  width: 100%;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 20%, transparent);
  border-radius: 0;
  padding: 0.625rem 0.125rem;
  font: 400 1rem/1.5 var(--md-sys-typescale-font-editorial);
  transition:
    border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    border-width var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.md-field__textarea {
  resize: vertical;
  min-height: 120px;
}
.md-field__select {
  /* Native selects need an explicit appearance reset plus a caret glyph
     so they don't render the OS-native chrome that would fight the
     ledger aesthetic. */
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 9px) 50%;
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
  padding-right: 1.75rem;
}
/* Tame the native date / datetime-local picker so it matches the
   ledger aesthetic: transparent background, inherited font, and a
   calendar icon that uses the current text colour instead of the
   browser default blue/grey. */
.md-field__input[type="date"],
.md-field__input[type="datetime-local"] {
  color-scheme: dark light; /* respect OS theme for the popup */
}
.md-field__input[type="date"]::-webkit-calendar-picker-indicator,
.md-field__input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: var(--md-sys-calendar-icon-filter, none);
  cursor: pointer;
  opacity: 0.6;
}
.md-field__input[type="date"]::-webkit-calendar-picker-indicator:hover,
.md-field__input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-calendar-icon-filter: invert(1);
  }
}

.md-field__input:focus,
.md-field__textarea:focus,
.md-field__select:focus {
  outline: none;
  border-bottom-color: var(--md-sys-color-primary);
  border-bottom-width: 2px;
  padding-bottom: calc(0.625rem - 1px); /* compensate for thicker border */
}

/* =========================================================================
   CHIPS — label-voice status pills
   ========================================================================= */
.md-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 26px;
  padding: 0 0.625rem;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  font: 600 0.6875rem/1 var(--md-sys-typescale-font-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.md-chip--tonal {
  background: var(--md-sys-color-primary-fixed);
  color: var(--md-sys-color-on-primary-fixed);
}

/* =========================================================================
   BANNERS — notice / error (used for flash)
   ========================================================================= */
.md-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--md-sys-shape-corner-large);
  margin-bottom: 1rem;
  background: var(--md-sys-color-primary-fixed);
  color: var(--md-sys-color-on-primary-fixed);
  font: 500 0.875rem/1.5 var(--md-sys-typescale-font-label);
}
.md-banner--error {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

/* Demo-mode banner — shown at the top of the app when the current user
   is a throwaway demo teacher. Warm amber so it reads as "informational
   / temporary" rather than "error". Sticky to the top so it persists
   across page navigations. */
.demo-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  background: color-mix(in srgb, #f59e0b 18%, var(--md-sys-color-surface));
  color: var(--md-sys-color-on-surface);
  border-bottom: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
  font: 500 0.875rem/1.4 var(--md-sys-typescale-font-label);
  position: sticky;
  top: 0;
  z-index: 50;
}
.demo-banner__icon {
  display: inline-flex;
  color: #b45309;
}
.demo-banner__text {
  flex: 1;
}
.demo-banner__cta {
  margin-left: auto;
  flex-shrink: 0;
}

/* Floating toast notification — bottom center, auto-dismisses. */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  z-index: 100;
  padding: 0.875rem 1.5rem;
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  font: 500 0.875rem/1.4 var(--md-sys-typescale-font-label);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--md-sys-elevation-3);
  opacity: 0;
  transition:
    opacity var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard),
    transform var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.toast--error {
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
}
@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: none;
  }
}

/* =========================================================================
   FEEDBACK — teacher submission form + admin triage list
   =========================================================================
   Classes for the in-product feedback feature. Keeps all presentation
   rules out of ERB (no `style=""` on new templates) per project rule. */
.feedback-page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.5rem 1rem;
}
.feedback-page__tag {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}
.feedback-page__tag span {
  background: color-mix(in srgb, #22c55e 22%, transparent);
  color: #065f46;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.feedback-card {
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-large);
  overflow: hidden;
  transition: background-color var(--md-sys-motion-duration-medium)
    var(--md-sys-motion-easing-standard);
}
.feedback-card__body {
  padding: 2.5rem 2rem;
}
@media (min-width: 640px) {
  .feedback-card__body { padding: 3rem; }
}
.feedback-card__header {
  text-align: center;
  margin-bottom: 2.25rem;
}
.feedback-card__title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--md-sys-color-on-surface);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.feedback-card__subtitle {
  font-size: 1rem;
  color: var(--md-sys-color-on-surface-variant);
  font-style: italic;
  margin: 0;
}
.feedback-form__field {
  margin-bottom: 2rem;
}
.feedback-form__label,
.feedback-form__field > label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 0.5rem;
}
.feedback-form__label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.75rem;
}
.feedback-form__label-row .feedback-form__label {
  margin-bottom: 0;
}
.feedback-form__hint {
  font-size: 0.6875rem;
  color: var(--md-sys-color-outline);
}
.feedback-form__textarea {
  width: 100%;
  min-height: 8rem;
  padding: 0.75rem 0;
  font-size: 1.0625rem;
  font-family: inherit;
  color: var(--md-sys-color-on-surface);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 0;
  resize: vertical;
  transition: border-color 0.2s;
}
.feedback-form__textarea:focus {
  outline: none;
  border-bottom-color: var(--md-sys-color-primary);
  box-shadow: 0 1px 0 0 var(--md-sys-color-primary);
}
.feedback-form__textarea::placeholder {
  color: var(--md-sys-color-outline);
}
.feedback-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.75rem 1rem;
  border: 2px dashed var(--md-sys-color-outline-variant);
  border-radius: 0.75rem;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.feedback-dropzone:hover {
  border-color: var(--md-sys-color-primary);
  background: color-mix(in srgb, var(--md-sys-color-primary) 4%, transparent);
  color: var(--md-sys-color-primary);
}
.feedback-dropzone__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.feedback-dropzone__text {
  font-size: 0.8125rem;
  font-weight: 500;
}
.feedback-dropzone__preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.feedback-dropzone__preview:empty {
  display: none;
}
.feedback-dropzone__thumb-wrap {
  position: relative;
}
.feedback-dropzone__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  display: block;
}
.feedback-dropzone__remove {
  position: absolute;
  top: -0.375rem;
  right: -0.375rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  border: none;
  background: var(--md-sys-color-on-surface);
  color: var(--md-sys-color-surface);
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.feedback-dropzone__remove:hover {
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
}
.feedback-form__errors {
  background: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent);
  color: var(--md-sys-color-on-error-container);
  padding: 0.75rem 1rem;
  border-radius: var(--md-sys-shape-corner-medium);
  margin-bottom: 1.5rem;
}
.feedback-form__errors ul {
  margin: 0.25rem 0 0 1rem;
  padding: 0;
}
.feedback-form__actions {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--md-sys-color-surface-container-high);
}
.feedback-form__submit {
  background: linear-gradient(135deg,
    var(--md-sys-color-primary),
    color-mix(in srgb, var(--md-sys-color-primary) 70%, #000));
  color: var(--md-sys-color-on-primary);
  border: none;
  padding: 0.875rem 2rem;
  border-radius: 0.75rem;
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
  box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--md-sys-color-primary) 60%, transparent);
  transition: transform 0.15s;
}
.feedback-form__submit:hover { transform: scale(0.98); }
.feedback-form__submit:active { transform: scale(0.95); }
.feedback-form__cancel {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
}
.feedback-form__cancel:hover {
  color: var(--md-sys-color-on-surface);
}
.feedback-card__footer {
  background: var(--md-sys-color-surface-container-low);
  padding: 0.875rem 2rem;
}
.feedback-card__footer-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  color: var(--md-sys-color-outline);
}

.feedback-chip {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
}
.feedback-chip--open {
  background: color-mix(in srgb, #3b82f6 18%, transparent);
  color: #1d4ed8;
}
.feedback-chip--important {
  background: color-mix(in srgb, #f59e0b 22%, transparent);
  color: #92400e;
}
.feedback-chip--duplicate {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
}
.feedback-chip--resolved {
  background: color-mix(in srgb, #22c55e 22%, transparent);
  color: #166534;
}

.feedback-show__message {
  white-space: pre-wrap;
  background: var(--md-sys-color-surface-container-lowest);
  padding: 1rem 1.25rem;
  border-radius: var(--md-sys-shape-corner-medium);
  line-height: 1.55;
}
.feedback-show__images {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}
.feedback-show__images img {
  max-width: 260px;
  max-height: 260px;
  border-radius: var(--md-sys-shape-corner-medium);
}
.feedback-show__meta {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.875rem;
  margin-top: 0.5rem;
}
.feedback-show__status-form {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1rem;
}

/* -- Settings page ----------------------------------------------------- */
.settings-page__header {
  margin: 0 0 2rem;
}
.settings-page__title {
  margin: 0 0 0.5rem;
}
.settings-page__subtitle {
  margin: 0;
}
.settings-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.settings-card__title {
  margin: 0 0 0.25rem;
}
.settings-card__subtitle {
  margin: 0 0 1.5rem;
}
.settings-card__section + .settings-card__section {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.settings-field__hint {
  margin: -0.5rem 0 1rem;
}
.settings-card__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

/* Avatar upload — dropzone style matching feedback attachments */
.settings-avatar-row {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.settings-avatar-dropzone {
  flex: 1 1 18rem;
  min-width: 16rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 2px dashed var(--md-sys-color-outline-variant);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  color: var(--md-sys-color-on-surface-variant);
}
.settings-avatar-dropzone:hover {
  border-color: var(--md-sys-color-primary);
  background: color-mix(in srgb, var(--md-sys-color-primary) 4%, transparent);
  color: var(--md-sys-color-primary);
}
.settings-avatar-dropzone__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.settings-avatar-dropzone__thumb {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-primary-container, #e0e0ff);
  color: var(--md-sys-color-on-primary-container, #231f73);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--md-sys-typescale-font-shell, "Manrope", sans-serif);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.settings-avatar-dropzone__copy {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.settings-avatar-dropzone__text {
  font-size: 0.875rem;
  font-weight: 500;
}
.settings-avatar-dropzone__filename {
  font-size: 0.75rem;
  color: var(--md-sys-color-on-surface-variant);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-avatar-dropzone__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

/* Theme swatch picker */
.theme-swatch-grid {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.theme-swatch {
  cursor: pointer;
  text-align: center;
}
.theme-swatch__input {
  display: none;
}
.theme-swatch__preview {
  width: 80px;
  height: 56px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 8px 10px;
  transition: border-color 0.15s;
  border: 2.5px solid var(--md-sys-color-outline-variant);
}
.theme-swatch:has(input:checked) .theme-swatch__preview {
  border-color: var(--swatch-accent);
}
.theme-swatch__bar {
  border-radius: 2px;
  background: var(--swatch-accent);
  width: 100%;
  height: 4px;
  margin-bottom: 5px;
}
.theme-swatch__line {
  height: 3px;
  border-radius: 2px;
  background: var(--swatch-text);
  opacity: 0.3;
  margin-bottom: 3px;
}
.theme-swatch__line--short {
  width: 60%;
  opacity: 0.2;
  margin-bottom: 0;
}
.theme-swatch__line--long {
  width: 80%;
}
.theme-swatch__label {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--md-sys-color-on-surface-variant);
}

/* Notification preferences table */
.settings-notifications {
  width: 100%;
  border-collapse: collapse;
}
.settings-notifications th,
.settings-notifications td {
  padding: 0.75rem 0;
  font-size: 0.875rem;
}
.settings-notifications th {
  text-align: center;
  font-weight: 600;
  font-size: 0.8125rem;
}
.settings-notifications td {
  text-align: center;
}
.settings-notifications th:first-child,
.settings-notifications td:first-child {
  text-align: left;
}
.settings-notifications tbody tr {
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.settings-notifications__check {
  accent-color: var(--md-sys-color-primary);
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.settings-field__readonly {
  opacity: 0.6;
  cursor: not-allowed;
}
.settings-footer-links {
  margin-top: 1.5rem;
  display: flex;
  gap: 1.5rem;
  font-size: 0.8125rem;
}