/* =========================================================================
   Cal-Merge — Material Design 3 inspired stylesheet
   - Mobile-first, large-touch-target, large-print
   - Light + dark themes (auto-detect + manual toggle, both via [data-theme])
   - No external CSS dependencies
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens (light theme by default)
   ------------------------------------------------------------------------- */
:root {
  color-scheme: light;
  --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue",
    Arial, sans-serif;

  /* M3-style color tokens (light) */
  --md-primary: #2563eb;
  --md-on-primary: #ffffff;
  --md-primary-container: #e0ecff;
  --md-on-primary-container: #001a41;

  --md-secondary: #5b6478;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #dfe3f0;
  --md-on-secondary-container: #181c24;

  --md-surface: #fdfcff;
  --md-surface-dim: #ece6f0;
  --md-surface-variant: #f3f4f6;
  --md-on-surface: #1b1b1f;
  --md-on-surface-variant: #4a4a55;
  --md-outline: #767680;
  --md-outline-variant: #d6d6e0;

  --md-error: #b3261e;
  --md-on-error: #ffffff;
  --md-error-container: #f9dedc;
  --md-on-error-container: #410e0b;

  --md-success: #1b873f;
  --md-on-success: #ffffff;

  --md-warning: #b45309;
  --md-on-warning: #ffffff;
  --md-warning-container: #fef3c7;
  --md-on-warning-container: #78350f;

  --md-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1);
  --md-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.12);
  --md-shadow-3: 0 4px 8px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.1);

  --md-radius-sm: 8px;
  --md-radius-md: 12px;
  --md-radius-lg: 20px;
  --md-radius-pill: 999px;

  --md-touch: 48px;

  font-family: var(--font-sans);
  font-size: 18px; /* base — large print for non-tech-savvy users */
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* -------------------------------------------------------------------------
   2. Dark theme — applies when:
      - the user explicitly toggled it (data-theme="dark"), OR
      - the OS/browser prefers dark AND user hasn't chosen (auto, via
        data-theme="auto" set by inline script in layout.tsx)
   ------------------------------------------------------------------------- */
:root[data-theme="dark"],
:root[data-theme="auto"] {
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --md-primary: #a8c7fa;
    --md-on-primary: #002f65;
    --md-primary-container: #1a4480;
    --md-on-primary-container: #d6e2ff;

    --md-secondary: #bfc6d4;
    --md-on-secondary: #293041;
    --md-secondary-container: #3f4759;
    --md-on-secondary-container: #dde2f0;

    --md-surface: #141318;
    --md-surface-dim: #141318;
    --md-surface-variant: #2a2a31;
    --md-on-surface: #e6e1e9;
    --md-on-surface-variant: #c9c5d0;
    --md-outline: #8e8e98;
    --md-outline-variant: #44444f;

    --md-error: #f2b8b5;
    --md-on-error: #601410;
    --md-error-container: #8c1d18;
    --md-on-error-container: #f9dedc;

    --md-success: #6fd886;
    --md-on-success: #003912;

    --md-warning: #fcd34d;
    --md-on-warning: #422006;
    --md-warning-container: #78350f;
    --md-on-warning-container: #fef3c7;

    --md-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
    --md-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.55);
    --md-shadow-3: 0 4px 8px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --md-primary: #a8c7fa;
  --md-on-primary: #002f65;
  --md-primary-container: #1a4480;
  --md-on-primary-container: #d6e2ff;

  --md-secondary: #bfc6d4;
  --md-on-secondary: #293041;
  --md-secondary-container: #3f4759;
  --md-on-secondary-container: #dde2f0;

  --md-surface: #141318;
  --md-surface-dim: #141318;
  --md-surface-variant: #2a2a31;
  --md-on-surface: #e6e1e9;
  --md-on-surface-variant: #c9c5d0;
  --md-outline: #8e8e98;
  --md-outline-variant: #44444f;

  --md-error: #f2b8b5;
  --md-on-error: #601410;
  --md-error-container: #8c1d18;
  --md-on-error-container: #f9dedc;

  --md-success: #6fd886;
  --md-on-success: #003912;

  --md-warning: #fcd34d;
  --md-on-warning: #422006;
  --md-warning-container: #78350f;
  --md-on-warning-container: #fef3c7;

  --md-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
  --md-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.55);
  --md-shadow-3: 0 4px 8px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* -------------------------------------------------------------------------
   3. Reset / base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--md-on-surface);
  background: var(--md-surface);
  min-height: 100vh;
}

a {
  color: var(--md-primary);
  text-decoration: none;
}
a:hover,
a:focus-visible {
  text-decoration: underline;
}

h1,
h2,
h3 {
  color: var(--md-on-surface);
  font-weight: 600;
  line-height: 1.25;
  margin: 2.5rem 0 1rem;
}
h1:first-child,
h2:first-child,
h3:first-child {
  margin-top: 0;
}
h1 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  letter-spacing: -0.01em;
}
h2 {
  font-size: clamp(1.4rem, 3vw, 1.75rem);
}
h3 {
  font-size: 1.2rem;
}

p {
  margin: 0 0 1rem;
}

hr {
  border: 0;
  border-top: 1px solid var(--md-outline-variant);
  margin: 2rem 0;
}

code,
pre {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;
  font-size: 0.95em;
}

/* -------------------------------------------------------------------------
   4. Layout: app bar + page container
   ------------------------------------------------------------------------- */
.appbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--md-touch);
  padding: 0.5rem 1rem;
  background: var(--md-surface);
  color: var(--md-on-surface);
  border-bottom: 1px solid var(--md-outline-variant);
  box-shadow: var(--md-shadow-1);
}

.appbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--md-on-surface);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.appbar .brand:hover,
.appbar .brand:focus-visible {
  text-decoration: none;
}
.appbar .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

.appbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.appbar-user {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--md-on-surface-variant);
  font-size: 0.95rem;
}

.appbar form {
  display: inline-flex;
  margin: 0;
}

.page {
  max-width: 920px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

.page-narrow {
  max-width: 560px;
}

/* -------------------------------------------------------------------------
   5. Buttons (filled / outlined / text)
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--md-touch);
  padding: 0 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--md-radius-pill);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  background: transparent;
  color: var(--md-primary);
  transition: background-color 0.15s ease, color 0.15s ease,
    box-shadow 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--md-primary) 40%, transparent);
  outline-offset: 2px;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn .icon {
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 auto;
}

/* Filled — primary action */
.btn-filled {
  background: var(--md-primary);
  color: var(--md-on-primary);
  box-shadow: var(--md-shadow-1);
}
.btn-filled:hover,
.btn-filled:focus-visible {
  box-shadow: var(--md-shadow-2);
  text-decoration: none;
}
.btn-filled:active {
  box-shadow: var(--md-shadow-1);
}

/* Filled danger — destructive primary action (e.g. confirm delete in a modal) */
.btn-filled.danger {
  background: var(--md-error);
  color: var(--md-on-error);
}
.btn-filled.danger:hover,
.btn-filled.danger:focus-visible {
  background: color-mix(in srgb, var(--md-error) 88%, var(--md-on-surface) 12%);
  box-shadow: var(--md-shadow-2);
  text-decoration: none;
}
.btn-filled.danger:active {
  box-shadow: var(--md-shadow-1);
}

/* Tonal — secondary action with emphasis */
.btn-tonal {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}
.btn-tonal:hover,
.btn-tonal:focus-visible {
  background: color-mix(in srgb, var(--md-secondary-container) 85%, var(--md-on-surface) 15%);
  text-decoration: none;
}

/* Outlined — secondary action */
.btn-outlined {
  border-color: var(--md-outline);
  color: var(--md-primary);
}
.btn-outlined:hover,
.btn-outlined:focus-visible {
  background: color-mix(in srgb, var(--md-primary) 8%, transparent);
  text-decoration: none;
}

/* Text — low-emphasis, but still a full tappable button */
.btn-text {
  padding: 0 0.75rem;
  color: var(--md-primary);
}
.btn-text:hover,
.btn-text:focus-visible {
  background: color-mix(in srgb, var(--md-primary) 8%, transparent);
  text-decoration: none;
}

.btn-text.danger {
  color: var(--md-error);
}
.btn-text.danger:hover,
.btn-text.danger:focus-visible {
  background: color-mix(in srgb, var(--md-error) 8%, transparent);
}

.btn-block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.5rem;
}
.btn-row .btn {
  flex: 0 0 auto;
}

/* Icon-only button (used for theme toggle) */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--md-touch);
  height: var(--md-touch);
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.icon-btn:hover,
.icon-btn:focus-visible {
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
  outline: none;
}
.icon-btn .icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* -------------------------------------------------------------------------
   6. Form fields — Material outlined style
   ------------------------------------------------------------------------- */
.stack-form,
.form-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 1.25rem 0;
  max-width: 560px;
}
.form-stack-wide {
  max-width: none;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  margin: 1.25rem 0;
}
.form-row > .field {
  flex: 1 1 220px;
}
.form-row > .field-btn {
  flex: 0 0 auto;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 1rem;
}

.field > .label,
.field > legend {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--md-on-surface-variant);
  letter-spacing: 0.01em;
}

.field .help {
  font-size: 0.9rem;
  color: var(--md-on-surface-variant);
}
.field .help code {
  background: var(--md-surface-variant);
  padding: 0.05em 0.35em;
  border-radius: 4px;
}

.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
  font-family: inherit;
  font-size: 1.0625rem; /* 17px — large enough to read, small enough to avoid iOS zoom on focus */
  line-height: 1.4;
  color: var(--md-on-surface);
  background: var(--md-surface);
  padding: 0.875rem 1rem;
  min-height: var(--md-touch);
  border: 1.5px solid var(--md-outline);
  border-radius: var(--md-radius-sm);
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

textarea {
  resize: vertical;
  min-height: 6rem;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}

input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input::placeholder,
input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--md-on-surface-variant) 80%, transparent);
}

.input:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--md-primary);
  box-shadow: 0 0 0 1px var(--md-primary);
}

.input:disabled,
input:disabled,
textarea:disabled {
  background: color-mix(in srgb, var(--md-on-surface) 4%, transparent);
  color: var(--md-on-surface-variant);
  cursor: not-allowed;
}

input[type="number"]:disabled {
  opacity: 0.6;
}

.fileline {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  border: 1.5px solid var(--md-outline);
  border-radius: var(--md-radius-sm);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fileline:focus-within {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 1px var(--md-primary);
}
.fileline input {
  border: none;
  border-radius: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.fileline input:focus {
  box-shadow: none;
}
.fileline .suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 1rem;
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
  font-weight: 600;
  font-size: 1rem;
}

/* Checkbox row */
.checkbox-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--md-on-surface);
  cursor: pointer;
  padding: 0.5rem 0;
  min-height: var(--md-touch);
}
.checkbox-row input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  accent-color: var(--md-primary);
  cursor: pointer;
}

.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Fieldset/section grouping */
.section {
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-md);
  padding: 1.25rem;
  padding-top: 30px;
  margin: 0;
}
.section > .section-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: var(--md-on-surface);
}
.section > .section-help {
  font-size: 0.95rem;
  color: var(--md-on-surface-variant);
  margin: 0 0 1rem;
}

.section > .field + .field {
  margin-top: 0.75rem;
}

/* -------------------------------------------------------------------------
   7. Status / messaging
   ------------------------------------------------------------------------- */
.hint {
  color: var(--md-on-surface-variant);
  font-size: 1rem;
  margin: 0 0 1rem;
}

.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--md-radius-md);
  font-size: 1rem;
  font-weight: 500;
  margin: 0.5rem 0;
  border: 1px solid transparent;
}
.alert .icon {
  width: 1.4rem;
  height: 1.4rem;
  flex: 0 0 auto;
  margin-top: 0.1rem;
}

/* Compact section title used inside alerts (e.g. the verification banner).
   Smaller than a top-level h2 so the alert doesnt feel like a page heading,
   and no top margin so it sits flush against the alert padding. Inherits
   color from the alert so it picks up the container on-color. */
.alert-title {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.25rem;
  color: inherit;
}

/* Tighten the default 1rem paragraph bottom margin inside alerts so the
   alert doesnt pile up vertical space when it has a few stacked paragraphs.
   The last paragraph in the alert gets no bottom margin so it sits flush
   against the alert padding. */
.alert p {
  margin: 0 0 0.4rem;
}
.alert p:last-child {
  margin-bottom: 0;
}
.alert-error {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
  border-color: color-mix(in srgb, var(--md-error) 40%, transparent);
}
.alert-success {
  background: color-mix(in srgb, var(--md-success) 12%, var(--md-surface));
  color: var(--md-success);
  border-color: color-mix(in srgb, var(--md-success) 40%, transparent);
}

/* Warning — softer than error, used for "important but not broken" states
   (e.g. "please verify your email"). Uses the M3 container pattern (soft
   background, readable text, tinted border) so it visually sits between
   .alert-error and .alert-success. */
.alert-warning {
  background: var(--md-warning-container);
  color: var(--md-on-warning-container);
  border-color: color-mix(in srgb, var(--md-warning) 40%, transparent);
}
.delete-warning {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
  border: 1px solid color-mix(in srgb, var(--md-error) 40%, transparent);
  border-radius: var(--md-radius-md);
  padding: 0.85rem 1rem;
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.45;
}
.delete-warning strong {
  color: var(--md-error);
}

.status-ok {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--md-success);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}
.status-ok::before {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--md-success);
}

.status-error {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--md-error);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  cursor: help;
  border-bottom: 1px dotted var(--md-error);
}
.status-error::before {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--md-error);
}

/* -------------------------------------------------------------------------
   8. Cards (feed list items, auth pages)
   ------------------------------------------------------------------------- */
.card {
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-md);
  padding: 1.5rem;
  box-shadow: var(--md-shadow-1);
}
.card-elevated {
  box-shadow: var(--md-shadow-2);
}
.card + .card {
  margin-top: 1rem;
}

/* Settings page: each top-level card on /dashboard/settings. */
.settings-card {
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-md);
  padding: 1.5rem;
  margin: 1.25rem 0;
  box-shadow: var(--md-shadow-1);
}
.settings-card h2 {
  margin-top: 0;
}
.settings-card + .settings-card {
  margin-top: 1.5rem;
}

/* -------------------------------------------------------------------------
   9. Sources table — responsive: cards on mobile, table on desktop
   ------------------------------------------------------------------------- */
.sources-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
  font-size: 1rem;
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-md);
  overflow: hidden;
  box-shadow: var(--md-shadow-1);
}
.sources-table th,
.sources-table td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--md-outline-variant);
  vertical-align: middle;
}
.sources-table th {
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sources-table tr:last-child td {
  border-bottom: none;
}
.sources-table .truncate {
  max-width: 320px;
  word-break: break-all;
  overflow-wrap: anywhere;
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 0.95rem;
  color: var(--md-on-surface-variant);
}
.sources-table .row-actions {
  text-align: right;
}
.sources-table .row-actions form {
  display: inline-block;
  margin: 0;
}

/* Mobile: collapse the table to stacked cards using data-label */
@media (max-width: 720px) {
  .sources-table,
  .sources-table thead,
  .sources-table tbody,
  .sources-table tr,
  .sources-table th,
  .sources-table td {
    display: block;
  }
  .sources-table thead {
    position: absolute;
    left: -9999px;
    top: -9999px;
  }
  .sources-table {
    border: none;
    background: transparent;
    box-shadow: none;
  }
  .sources-table tr {
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-radius-md);
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    box-shadow: var(--md-shadow-1);
  }
  .sources-table td {
    border: none;
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .sources-table td::before {
    content: attr(data-label);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--md-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .sources-table .row-actions {
    align-items: stretch;
  }
  .sources-table .row-actions .btn {
    width: 100%;
  }
  .sources-table .truncate {
    max-width: 100%;
  }
}

.feed-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.feed-card {
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-md);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--md-shadow-1);
}
.feed-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.feed-card-header strong {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--md-on-surface);
}
/* Right-aligned action area inside the feed card header. Holds the
   subscribe-icons group (icon-only) plus any text buttons (Share, Edit,
   etc.). Inline-flex + gap so the icons and the text buttons lay out
   horizontally with consistent spacing on desktop, and wrap cleanly on
   narrow viewports. */
.feed-card-header-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}
.feed-card-header-actions form {
  margin: 0;
}
.feed-url {
  margin: 0.75rem 0;
}
.feed-url code {
  display: block;
  padding: 0.75rem 1rem;
  background: var(--md-surface-variant);
  color: var(--md-on-surface);
  border-radius: var(--md-radius-sm);
  font-size: 0.95rem;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.feed-meta {
  color: var(--md-on-surface-variant);
  font-size: 0.95rem;
  margin: 0.5rem 0 1rem;
}
.feed-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.feed-actions form {
  margin: 0;
}

/* -------------------------------------------------------------------------
   Subscribe icons (icon-only square buttons in feed card headers)
   -------------------------------------------------------------------------
   Four small platform-specific deep links that hand the feed's .ics URL
   to Apple Calendar (webcal://), Google Calendar
   (calendar.google.com/calendar/render?cid=…), Outlook.com
   (outlook.live.com/.../addfromweb) and Microsoft 365
   (outlook.office.com/.../addfromweb). Rendered on every feed card,
   shared feed card, and SuperFeed card.

   Visual design:
   - `.subscribe-icons` is an inline-flex group of icon-only square
     buttons, dropped into the right side of `.feed-card-header-actions`
     next to the text buttons (Share, Edit, etc.). It is icon-only, so
     the visible chrome is compact: a 36x36 square with an 18x18 brand
     icon. The button label lives in the `title` attribute (rendered as
     a native browser tooltip on hover) and in the `aria-label` (read by
     screen readers), so the user can still tell what each button does
     before clicking.
   - `.subscribe-btn` is a square outlined chip (no text). Uses the
     same outlined aesthetic as `.btn-outlined` so it sits comfortably
     next to the text buttons.
   - `.subscribe-icon` is the brand PNG (Apple/Google/Outlook/O365).
     We don't use `currentColor` because these are real brand assets,
     not stroke-based shapes — they look right in both light and dark
     themes without needing separate dark-mode variants.
   - On narrow viewports the icons group wraps onto its own line above
     the text buttons, then the text buttons wrap individually below.
   ------------------------------------------------------------------------- */
.subscribe-icons {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
}
.subscribe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--md-surface);
  color: var(--md-on-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-sm);
  text-decoration: none;
  /* Subtle background tint on hover, plus a slightly darker border so
     the button "lifts" without becoming the primary action. */
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.subscribe-btn:hover {
  background: color-mix(in srgb, var(--md-primary) 8%, var(--md-surface));
  border-color: var(--md-outline);
}
.subscribe-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--md-primary) 40%, transparent);
  outline-offset: 2px;
}
.subscribe-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  /* Brand icons ship with their own backgrounds. No filter needed. */
}

@media (max-width: 600px) {
  .feed-card-header-actions {
    width: 100%;
    justify-content: flex-start;
  }
  /* On narrow screens, let the icons group occupy a little breathing room
     on its own line and grow the squares a touch (taller thumb target). */
  .subscribe-icon {
    width: 50px;
    height: 50px;
  }
  .subscribe-btn {
    margin-left: 50px;
  }
}

/* Visual separator between the "Your feeds" section and the "Shared feeds"
   section on the dashboard. The h1 inside the section gets its first-child
   top margin reset to 0, so we add it back on the section element itself
   to keep the section headings vertically aligned with the rest of the
   page rhythm. */
.shared-feeds-section {
  margin-top: 2.5rem;
}

/* -------------------------------------------------------------------------

/* -------------------------------------------------------------------------
   10. Landing & auth pages
   ------------------------------------------------------------------------- */
.hero {
  text-align: center;
  padding: 2rem 0 1rem;
}
.hero h1 {
  font-size: clamp(2rem, 6vw, 3rem);
  margin-bottom: 0.5rem;
}
.hero p {
  font-size: 1.15rem;
  color: var(--md-on-surface-variant);
  max-width: 36rem;
  margin: 0 auto 1.5rem;
}
.hero .btn {
  font-size: 1.1rem;
  padding: 0 1.75rem;
  min-height: 56px;
}

/* Landing hero: side-by-side copy + image placeholder on desktop, stacks on mobile. */
.hero-landing {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 2rem;
  text-align: left;
  padding: 1.5rem 0 1rem;
}
.hero-landing .hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
.hero-landing h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  margin: 0;
  letter-spacing: -0.015em;
}
.hero-landing .hero-subhead {
  font-size: 1.1rem;
  color: var(--md-on-surface-variant);
  max-width: 32rem;
  margin: 0 0 0.75rem;
}
.hero-landing .hero-cta {
  font-size: 1.1rem;
  padding: 0 1.75rem;
  min-height: 56px;
}
.hero-landing .hero-note {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
}
.hero-landing .hero-image-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 320px;
  border: 1.5px dashed var(--md-outline-variant);
  border-radius: var(--md-radius-lg);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem;
  text-align: center;
}
/* Real hero image — fills the right column on desktop, stacks under the
   copy on mobile. Same aspect ratio as the old placeholder so the layout
   doesn't shift. */
.hero-landing .hero-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 360px;
  object-fit: cover;
  border-radius: var(--md-radius-lg);
  border: 1px solid var(--md-outline-variant);
  box-shadow: var(--md-shadow-1);
  display: block;
}
@media (min-width: 760px) {
  .hero-landing {
    grid-template-columns: 1.1fr 1fr;
    gap: 2.5rem;
    padding: 2rem 0 1.5rem;
  }
  .hero-landing .hero-image {
    max-height: 360px;
  }
}

/* "How it works" 3-step strip on the landing page. */
.landing-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.5rem 0 0;
}
.landing-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 1.25rem 1.5rem;
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-md);
  box-shadow: var(--md-shadow-1);
}
.landing-step h3 {
  font-size: 1.1rem;
  margin: 0;
  color: var(--md-on-surface);
}
.landing-step p {
  margin: 0;
  color: var(--md-on-surface-variant);
  font-size: 0.98rem;
}
.landing-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  margin-bottom: 0.35rem;
}
.landing-step-icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}
@media (min-width: 720px) {
  .landing-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

/* -------------------------------------------------------------------------
   10a. Use cases — code-only before/after chip visualizations
   ------------------------------------------------------------------------- */
.usecases {
  margin: 3rem 0 0;
}
.usecases-title {
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  font-weight: 600;
  margin: 0 0 1.25rem;
  color: var(--md-on-surface);
  text-align: center;
}

.usecase-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding: 1.5rem;
  margin: 0 0 1.5rem;
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-lg);
  box-shadow: var(--md-shadow-1);
}
@media (min-width: 880px) {
  .usecase-card {
    grid-template-columns: 1fr 1.2fr;
    align-items: center;
    gap: 2rem;
    padding: 2rem 2rem;
  }
  /* Push the illustration placeholder to its own row, full width, on desktop. */
  .usecase-card .usecase-image-placeholder {
    grid-column: 1 / -1;
    margin-top: 0.25rem;
  }
}

.usecase-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}
.usecase-copy h3 {
  font-size: 1.35rem;
  margin: 0;
  color: var(--md-on-surface);
  line-height: 1.3;
}
.usecase-copy p {
  margin: 0;
  color: var(--md-on-surface-variant);
  font-size: 1rem;
  line-height: 1.5;
}
.usecase-copy p em {
  color: var(--md-on-surface);
  font-style: normal;
  font-weight: 600;
}

.usecase-tag {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: var(--md-radius-pill);
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Before/after chip visualization. */
.usecase-visual {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  align-items: stretch;
  min-width: 0;
}
@media (min-width: 520px) {
  .usecase-visual {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
}

.usecase-column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--md-surface-variant);
  border-radius: var(--md-radius-md);
  min-width: 0;
}
.usecase-column-after {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}
.usecase-column-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
  margin-bottom: 0.25rem;
}
.usecase-column-after .usecase-column-label {
  color: var(--md-on-primary-container);
  opacity: 0.85;
}

.usecase-source {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.usecase-arrow {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  align-self: center;
  justify-self: center;
}
.usecase-arrow .icon {
  width: 1.4rem;
  height: 1.4rem;
}
@media (min-width: 520px) {
  .usecase-arrow {
    display: inline-flex;
  }
}

/* Individual chip — source dot + optional tag prefix + label. */
.usecase-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--md-radius-pill);
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  color: var(--md-on-surface);
  font-size: 0.85rem;
  line-height: 1.2;
  max-width: 100%;
  min-width: 0;
}
.usecase-column-after .usecase-chip {
  background: var(--md-surface);
  border-color: color-mix(in srgb, var(--md-on-primary-container) 15%, transparent);
}

.usecase-chip-dot {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: currentColor;
}
.usecase-chip-blue   { color: #1d4ed8; }
.usecase-chip-purple { color: #7c3aed; }
.usecase-chip-green  { color: #047857; }
.usecase-chip-orange { color: #c2410c; }
.usecase-chip-teal   { color: #0f766e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .usecase-chip-blue   { color: #93c5fd; }
  :root:not([data-theme="light"]) .usecase-chip-purple { color: #c4b5fd; }
  :root:not([data-theme="light"]) .usecase-chip-green  { color: #6ee7b7; }
  :root:not([data-theme="light"]) .usecase-chip-orange { color: #fdba74; }
  :root:not([data-theme="light"]) .usecase-chip-teal   { color: #5eead4; }
}
:root[data-theme="dark"] .usecase-chip-blue   { color: #93c5fd; }
:root[data-theme="dark"] .usecase-chip-purple { color: #c4b5fd; }
:root[data-theme="dark"] .usecase-chip-green  { color: #6ee7b7; }
:root[data-theme="dark"] .usecase-chip-orange { color: #fdba74; }
:root[data-theme="dark"] .usecase-chip-teal   { color: #5eead4; }

.usecase-chip-tag {
  flex: 0 0 auto;
  font-weight: 600;
  color: currentColor;
}
.usecase-chip-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usecase-chip.is-removed {
  text-decoration: line-through;
  text-decoration-color: var(--md-on-surface-variant);
  text-decoration-thickness: 1.5px;
  opacity: 0.55;
  color: var(--md-on-surface-variant);
}
.usecase-chip.is-removed .usecase-chip-dot {
  opacity: 0.5;
}

/* Real use-case image — spans full card width on desktop, sits under the
   visual on mobile. Same aspect ratio as the old placeholder so the
   layout doesn't shift. */
.usecase-image {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: 200px;
  object-fit: cover;
  border-radius: var(--md-radius-md);
  border: 1px solid var(--md-outline-variant);
  box-shadow: var(--md-shadow-1);
}
@media (min-width: 880px) {
  .usecase-image {
    grid-column: 1 / -1;
    max-height: 220px;
  }
}
@media (max-width: 600px) {
  .usecase-image {
    max-height: 160px;
  }
}

.auth-card {
  max-width: 480px;
  margin: 2rem auto;
  padding: 2rem 1.75rem;
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-lg);
  box-shadow: var(--md-shadow-3);
}
.auth-card h1 {
  text-align: center;
  margin-bottom: 0.5rem;
}
.auth-card .auth-hint {
  text-align: center;
  color: var(--md-on-surface-variant);
  margin-bottom: 1.5rem;
}
.auth-card .btn-filled {
  width: 100%;
  margin-top: 0.5rem;
  font-size: 1.05rem;
}
.auth-card .auth-link {
  display: block;
  text-align: center;
  margin-top: 1.25rem;
  color: var(--md-on-surface-variant);
}
.auth-card .auth-link a {
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   10b. Site footer
   ------------------------------------------------------------------------- */
.site-footer {
  margin-top: 2rem;
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
  border-top: 1px solid var(--md-outline-variant);
}
.site-footer-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 1.25rem 1rem;
  text-align: center;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

/* -------------------------------------------------------------------------
   11. Utility
   ------------------------------------------------------------------------- */
.muted {
  color: var(--md-on-surface-variant);
}
.center {
  text-align: center;
}
.spacer {
  flex: 1 1 auto;
}
.mt-0 {
  margin-top: 0 !important;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.mt-1 {
  margin-top: 0.5rem;
}
.mt-2 {
  margin-top: 1rem;
}
.mt-3 {
  margin-top: 1.5rem;
}

/* Hide a <br> (or other inline element) only on wide viewports — the
   landing hero uses this to insert a manual line break on narrow screens. */
@media (min-width: 601px) {
  .hide-mobile {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   12. Small-screen tweaks
   ------------------------------------------------------------------------- */
@media (max-width: 600px) {
  :root {
    font-size: 17px;
  }
  .appbar {
    padding: 0.5rem 0.75rem;
  }
  .appbar .brand {
    font-size: 1.1rem;
  }
  .page {
    padding: 1rem 0.75rem 3rem;
  }
  .feed-card,
  .auth-card,
  .card {
    padding: 1.25rem 1rem;
  }
  .feed-card-header {
    flex-direction: column;
    align-items: stretch;
  }
  .feed-card-header .btn {
    align-self: flex-start;
  }
  .btn {
    width: 100%;
  }
  .appbar .btn,
  .btn-row .btn,
  .btn-row-center .btn {
    width: auto;
  }
  .form-row {
    flex-direction: column;
    align-items: stretch;
  }
  .form-row > .field,
  .form-row > .field-btn {
    flex: 1 1 100%;
  }
  .auth-card .btn-filled {
    width: 100%;
  }
}

/* On larger screens let buttons stay inline */
@media (min-width: 601px) {
  .btn-auto {
    width: auto;
  }
}

/* -------------------------------------------------------------------------
   13. Previewed/truncated links (sources table URL column)
   ------------------------------------------------------------------------- */
.previewed-link {
  color: var(--md-primary);
  text-decoration: none;
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 0.9rem;
  word-break: break-all;
  overflow-wrap: anywhere;
  border-bottom: 1px dashed color-mix(in srgb, var(--md-primary) 50%, transparent);
  padding-bottom: 1px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.previewed-link:hover,
.previewed-link:focus-visible {
  background: color-mix(in srgb, var(--md-primary) 10%, transparent);
  border-bottom-color: var(--md-primary);
  text-decoration: none;
}

.sources-table .truncate {
  max-width: 320px;
}
@media (max-width: 720px) {
  .sources-table .truncate {
    max-width: 100%;
  }
}

/* -------------------------------------------------------------------------
   14. Feed-card: single visual box containing the blue link + copy icon
   ------------------------------------------------------------------------- */
.feed-url-box {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0.75rem 0;
  background: var(--md-surface-variant);
  border-radius: var(--md-radius-sm);
  border: 1px solid var(--md-outline-variant);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
  min-width: 0;
}
.feed-url-box:hover,
.feed-url-box:focus-within {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 1px var(--md-primary);
}

.feed-url-box .feed-url {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  display: block;
  color: var(--md-primary);
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.15s ease;
}
.feed-url-box .feed-url:hover {
  background: color-mix(in srgb, var(--md-primary) 8%, transparent);
  text-decoration: underline;
}
.feed-url-box .feed-url:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--md-primary) 8%, transparent);
}
.feed-url code {
  display: block;
  padding: 0.75rem 1rem;
  color: inherit;
  font-size: 0.95rem;
  word-break: break-all;
  overflow-wrap: anywhere;
  background: transparent;
}

.feed-url-box .copy-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-width: 48px;
  height: auto;
  border: none;
  border-left: 1px solid var(--md-outline-variant);
  background: transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  padding: 0;
  border-radius: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.feed-url-box .copy-btn:hover {
  background: color-mix(in srgb, var(--md-primary) 12%, transparent);
  color: var(--md-primary);
}
.feed-url-box .copy-btn:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--md-primary) 12%, transparent);
  color: var(--md-primary);
  box-shadow: inset 0 0 0 2px var(--md-primary);
}
.feed-url-box .copy-btn .icon {
  width: 1.25rem;
  height: 1.25rem;
}
.feed-url-box .copy-btn.is-copied {
  color: var(--md-success);
  background: color-mix(in srgb, var(--md-success) 12%, transparent);
}
.feed-url-box .copy-btn.is-copied:hover {
  background: color-mix(in srgb, var(--md-success) 18%, transparent);
}
.feed-url-box .copy-btn.is-failed {
  color: var(--md-error);
  background: color-mix(in srgb, var(--md-error) 12%, transparent);
}

@media (max-width: 600px) {
  .feed-url-box .copy-btn {
    width: 56px;
    min-width: 56px;
  }
}

/* -------------------------------------------------------------------------
   15. Status indicators with icons
   ------------------------------------------------------------------------- */
.status-ok,
.status-error {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.status-ok .icon,
.status-error .icon {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
}
/* Remove the ::before dots that we previously used — the icon replaces them. */
.status-ok::before,
.status-error::before {
  content: none;
}

/* -------------------------------------------------------------------------
   16. Logout button — keep it readable next to a tight app bar
   ------------------------------------------------------------------------- */
.appbar-user .btn-text {
  padding: 0 0.5rem;
}
.appbar-user .btn-text .icon {
  width: 1.15rem;
  height: 1.15rem;
}

/* -------------------------------------------------------------------------
   17. Form button labels (icon + text spacing)
   ------------------------------------------------------------------------- */
.btn > .icon + span,
.btn > span + .icon {
  margin-left: 0.1rem;
}

/* -------------------------------------------------------------------------
   18. Sources table URL cell — give the clickable link some breathing room
   ------------------------------------------------------------------------- */
.sources-table td.truncate {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
@media (max-width: 720px) {
  .sources-table td.truncate {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* -------------------------------------------------------------------------
   19. Modal dialog (native <dialog> + showModal())
   ------------------------------------------------------------------------- */
.modal {
  border: none;
  padding: 0;
  background: transparent;
  color: var(--md-on-surface);
  max-width: min(560px, calc(100vw - 2rem));
  width: 100%;
  margin: auto;
}

.modal[open] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  animation: modal-pop 0.18s ease-out;
}

.modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
  animation: modal-fade 0.18s ease-out;
}

:root[data-theme="dark"] .modal::backdrop {
  background: rgba(0, 0, 0, 0.7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .modal::backdrop {
    background: rgba(0, 0, 0, 0.7);
  }
}

@keyframes modal-pop {
  from { transform: translateY(8px) scale(0.98); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-card {
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-lg);
  box-shadow: var(--md-shadow-3);
  padding: 1.5rem 1.75rem;
  width: 100%;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--md-on-surface);
}

.modal-header .icon-btn {
  /* tighten the close button against the right edge of the card */
  margin-right: -0.5rem;
}

.modal-body {
  /* The form inside uses .form-stack which already handles field spacing. */
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

@media (max-width: 600px) {
  .modal-card {
    padding: 1.25rem 1rem;
  }
  .modal-actions {
    flex-direction: column-reverse;
  }
  .modal-actions .btn {
    width: 100%;
  }
}

/* -------------------------------------------------------------------------
   20. Empty state — first-step callout
   ------------------------------------------------------------------------- */
.empty-state {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  border: 1px solid color-mix(in srgb, var(--md-primary) 20%, transparent);
  border-radius: var(--md-radius-md);
  padding: 2rem 1.5rem;
  margin: 1.5rem 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.empty-state h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--md-on-primary-container);
}

.empty-state p {
  margin: 0;
  max-width: 480px;
  color: var(--md-on-primary-container);
  opacity: 0.9;
}

.empty-state .btn-filled {
  margin-top: 0.5rem;
  font-size: 1.05rem;
  min-height: 52px;
  padding: 0 1.5rem;
}

.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--md-primary);
  color: var(--md-on-primary);
  margin-bottom: 0.25rem;
}

.empty-state-icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

@media (max-width: 600px) {
  .empty-state {
    padding: 1.5rem 1rem;
  }
}

/* -------------------------------------------------------------------------
   21. Centered button row + colorful filled-button variant
   ------------------------------------------------------------------------- */
.btn-row-center {
  justify-content: center;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.btn-row-center .btn {
  flex: 0 0 auto;
}

/* A brighter, more eye-catching variant of the filled button — used for the
   "Add source" trigger on the dashboard so it stands out from the rest of
   the chrome. Uses a gradient on top of the primary color and slightly
   larger padding so it reads as a hero action without breaking the M3
   button shape (still pill, still 48px+ tall, still uses --md-primary
   and --md-on-primary for AA contrast in both themes). */
.btn-colorful {
  background: linear-gradient(
    135deg,
    var(--md-primary) 0%,
    color-mix(in srgb, var(--md-primary) 70%, #8b5cf6 30%) 100%
  );
  color: var(--md-on-primary);
  box-shadow: var(--md-shadow-1);
  padding: 0 1.75rem;
  font-size: 1.05rem;
  position: relative;
  overflow: hidden;
}

.btn-colorful::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0) 60%
  );
  pointer-events: none;
}

.btn-colorful:hover,
.btn-colorful:focus-visible {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--md-primary) 90%, #000 10%) 0%,
    color-mix(in srgb, var(--md-primary) 60%, #8b5cf6 40%) 100%
  );
  box-shadow: var(--md-shadow-2);
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-colorful:active {
  transform: translateY(0);
  box-shadow: var(--md-shadow-1);
}

/* -------------------------------------------------------------------------
   22. SuperFeeds (a "feed of feeds") — visual differentiation from
   regular feed cards
   ------------------------------------------------------------------------- */
.superfeeds-section {
  margin-top: 2.5rem;
}

/* The SuperFeed card is intentionally very close to a regular feed card —
   same shape, same shadow, same actions. The only visual tells are:
     1. A thicker left border in the secondary color (the "stacked layers"
        accent — a regular feed is one layer, a SuperFeed is several).
     2. A small chip containing the layers icon at the start of the
        header.
   These are enough to distinguish a SuperFeed at a glance, without making
   the user feel like they're learning a whole new card type. */
.super-feed-card {
  border-left: 4px solid var(--md-secondary);
  padding-left: calc(1.5rem - 4px);
}

.super-feed-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: var(--md-radius-sm);
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  margin-right: 0.25rem;
}
.super-feed-card-icon .icon {
  width: 1.15rem;
  height: 1.15rem;
}

@media (max-width: 600px) {
  .super-feed-card {
    padding-left: calc(1rem - 4px);
  }
  .super-feed-card-icon {
    width: 28px;
    height: 28px;
  }
  .super-feed-card-icon .icon {
    width: 1rem;
    height: 1rem;
  }
}