/* MedPally design system — Threads-style white theme: edge-to-edge feed
   with hairline dividers, sticky top bar, slide-in drawer. */

:root {
  color-scheme: light;

  --bg: #FFFFFF;
  --primary: #123A4D;
  --primary-dark: #0D2A38;
  --accent: #1C6E8C;
  --accent-dark: #123A4D;

  --card: #FFFFFF;
  --border: #EFEFEF;
  --border-strong: #DBDBDB;

  --text: #1C1C1E;
  --text-secondary: #6E6E73;
  --text-muted: #9A9A9E;
  --text-faint: #C7C7CC;

  --rct: #2F7D5C;
  --danger: #C4402F;
  --danger-bg: #FBEAE7;
  --danger-soft: #E3B4AB;

  --chip-bg: #F2F2F4;
  --tag-bg: #F2F2F4;

  --radius-card: 18px;
  --radius-btn: 14px;
  --radius-pill: 100px;
  --radius-input: 12px;

  --content-width: 560px;
}

* { box-sizing: border-box; }

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

body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--primary); }

h1, h2, h3 { color: var(--text); margin: 0 0 0.4em; }

.app-main {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 12px 20px 40px;
  min-height: 100vh;
}

.app-main.has-bottom-nav { padding-bottom: 96px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Kept intentionally close to the feed layout, so a cold tab still feels
   responsive rather than flashing an empty white page. */
.page-loading { padding: 8px 0; }
.skeleton, .skeleton-card {
  background: linear-gradient(90deg, #f1f2f3 25%, #fafafa 37%, #f1f2f3 63%);
  background-size: 400% 100%; animation: skeleton-shimmer 1.2s ease infinite;
}
.skeleton { border-radius: 6px; }
.skeleton-title { width: 132px; height: 27px; margin: 8px 20px 9px; }
.skeleton-subtitle { width: 92px; height: 14px; margin: 0 20px 22px; }
.skeleton-card { min-height: 184px; padding: 18px 20px; margin: 1px 0; background-color: var(--card); }
.skeleton-line { width: 56%; height: 14px; margin-bottom: 11px; }
.skeleton-line-short { width: 24%; height: 11px; margin-bottom: 20px; }
.skeleton-copy { width: 95%; height: 13px; margin-bottom: 8px; }
.skeleton-copy-short { width: 73%; }
@keyframes skeleton-shimmer { to { background-position: -400% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ---------------------------------------------------------------- messages */

.messages { list-style: none; padding: 0; margin: 0 0 16px; max-width: var(--content-width); margin-left: auto; margin-right: auto; }
.messages li {
  padding: 12px 14px; border-radius: var(--radius-input);
  background: #E7F2EC; color: #1C5E3F; font-size: 14px; font-weight: 500;
  margin-bottom: 8px;
}
/* app.js takes the list away five seconds after it appears; this is the fade
   on the way out. */
.messages[data-autodismiss] { transition: opacity 0.4s ease; }
.messages[data-autodismiss].is-dismissed { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .messages[data-autodismiss] { transition: none; } }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--radius-btn);
  padding: 15px; font-size: 16px; font-weight: 600;
  cursor: pointer; font-family: inherit; text-decoration: none;
}
.btn-block { width: 100%; display: flex; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }
.btn-primary:disabled { background: var(--danger-soft); cursor: not-allowed; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #a8371f; color: #fff; }
.btn-outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
.btn-outline-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.4); }
.btn-outline-light:hover { color: #fff; }
.btn-soft { background: var(--chip-bg); color: var(--text); }
.btn-white { background: #fff; color: var(--primary); }
.btn-white:hover { color: var(--primary-dark); }
.btn-text { background: none; border: none; padding: 10px; font-size: 14.5px; font-weight: 600;
  color: var(--text-secondary); cursor: pointer; font-family: inherit; }
.btn-text-danger { background: none; border: none; color: var(--danger);
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; padding: 10px; }
.btn-sm { padding: 7px 14px; font-size: 13px; border-radius: var(--radius-pill); font-weight: 600; }

.back-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin: 0 0 8px -8px;
  background: none; border: none; cursor: pointer; color: var(--text);
  border-radius: 50%;
}
.back-btn:hover { background: var(--chip-bg); }

/* ---------------------------------------------------------------- forms */

.field { margin-bottom: 16px; }
.field label, .field-label {
  display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px;
}
.field .hint { color: var(--text-muted); font-weight: 400; }

input[type=text], input[type=email], input[type=password], input[type=search], textarea {
  width: 100%; border: 1px solid var(--border-strong); background: var(--card);
  border-radius: var(--radius-input); padding: 14px; font-size: 15px; color: var(--text);
  font-family: inherit;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus,
input[type=search]:focus, textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
input::placeholder { color: var(--text-muted); }

.errorlist { list-style: none; padding: 0; margin: 0 0 8px; color: var(--danger); font-size: 13.5px; }
.errorlist li { margin-bottom: 2px; }

/* ---------------------------------------------------------------- chips / pills */

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.feed-controls { display: flex; align-items: center; gap: 12px; }
.feed-menu { margin-left: auto; position: relative; }
.feed-menu summary { cursor: pointer; border: 1px solid var(--border); border-radius: 999px; padding: 7px 11px; font-size: 13px; list-style: none; }
.feed-menu-panel { position: absolute; z-index: 3; right: 0; top: calc(100% + 6px); width: 200px; padding: 12px; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgb(0 0 0 / 12%); }
.feed-menu-panel strong, .feed-menu-panel a { display: block; margin: 5px 0; }
.feed-menu-panel strong { margin-top: 10px; font-size: 12px; }
.feed-menu-panel strong:first-child { margin-top: 0; }
/* nowrap so the star stays beside the design badge instead of dropping under
   it — a two-word label like "Prospective cohort" wraps inside its own box
   rather than pushing the star onto a second row. */
.card-badges { margin-left: auto; display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; justify-content: flex-end; }
/* The row is already pushed right; leaving the badges' own auto margin in
   place would spread them apart from each other instead of grouping them. */
.card-badges .badge { margin-left: 0; }
/* Featured repeats on every pick, so it's a mark rather than a second word
   badge — the design label is what the eye is actually scanning for. Same
   colour as the active Featured pill, so the tab and its marks read as one. */
.featured-star {
  display: inline-flex; align-items: center; flex-shrink: 0; color: var(--primary);
}
.chip {
  display: inline-block; background: var(--chip-bg); color: var(--text-faint); padding: 10px 16px;
  border-radius: var(--radius-pill); font-size: 14px; font-weight: 600;
}
.chip.chip-active { background: var(--primary); color: #fff; }
.chip-wrap { position: relative; cursor: pointer; display: inline-flex; }
.chip-wrap input {
  position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.chip-wrap input:checked ~ .chip { background: var(--primary); color: #fff; }
.chip-wrap input:focus-visible ~ .chip { outline: 2px solid var(--accent); outline-offset: 2px; }

.pill-tab {
  border: none; background: var(--chip-bg); color: var(--text-secondary);
  padding: 7px 14px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.pill-tab.pill-tab-active { background: var(--primary); color: #fff; }

/* ---------------------------------------------------------------- page headers */

.page-header { margin-bottom: 16px; }
.page-title { font-size: 24px; font-weight: 700; color: var(--text); margin: 0; }
.page-subtitle { font-size: 13px; color: var(--text-muted); margin: 2px 0 12px; }
.wizard-step {
  font-size: 12.5px; font-weight: 600; color: var(--accent);
  letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 8px;
}

/* ---------------------------------------------------------------- cards (paper feed) */

.card {
  background: var(--card); border: none; border-bottom: 1px solid var(--border);
  border-radius: 0; padding: 16px 20px; margin-bottom: 0;
}
.card.seen h3 a, .card.seen .summary { color: var(--text-muted); }
.card.seen .card-journal { color: var(--text-secondary); }

.app-main.feed-flush { padding-left: 0; padding-right: 0; }
.feed-flush .page-header, .feed-flush .messages, .feed-flush .empty-state {
  padding-left: 20px; padding-right: 20px;
}
#cards .card:first-child { border-top: 1px solid var(--border); }

/* Above the content width the flush column would otherwise float unbounded. */
@media (min-width: 600px) {
  .app-main.feed-flush { border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
}
.card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.card-header .journal-cover { border-radius: 9px; flex-shrink: 0; }
.card-journal { font-size: 13px; font-weight: 600; color: var(--text); }
.card-date { font-size: 12px; color: var(--text-muted); }
.badge {
  margin-left: auto; background: var(--rct); color: #fff; font-size: 10px; font-weight: 700;
  padding: 4px 9px; border-radius: 6px; letter-spacing: 0.02em;
}
.new-divider { color: var(--accent); font-size: 12px; font-weight: 700; margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 0.03em; }

/* ---------------------------------------------------------------- week groups */

/* A week heading is a card-level object, not a page-level one, so it carries
   its own 20px like .card does rather than joining the .feed-flush exception
   list — that way it stays edge-aligned with the cards at every width. */
.week-header {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: var(--bg); border: none; border-bottom: 1px solid var(--border);
  padding: 13px 20px; font-family: inherit; font-size: 12px; font-weight: 700;
  color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em;
  cursor: pointer;
}
.week-header:hover { background: var(--chip-bg); }
/* Explicit rather than relying on the UA [hidden] rule, which any later
   display declaration on .card would silently outrank. */
.card[hidden] { display: none; }
.week-count { color: var(--text-muted); }
.week-chevron { margin-left: auto; color: var(--text-faint); transition: transform 0.12s ease; }
.week-header[aria-expanded="false"] .week-chevron { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .week-chevron { transition: none; } }

/* Loading the next page is a request once anything below is collapsed: hidden
   cards have almost no height, so scrolling can't be what asks for them. */
.feed-more {
  display: block; width: 100%; background: none; border: none;
  border-bottom: 1px solid var(--border); padding: 16px 20px; font-family: inherit;
  font-size: 14px; font-weight: 600; color: var(--accent); cursor: pointer; text-align: center;
}
.feed-more:hover { background: var(--chip-bg); }

/* The sentinel stands in for the page that hasn't arrived yet, so it borrows
   the loading skeleton and sits flush in the list like a real card would. */
.feed-sentinel .skeleton-card { margin: 0; border-bottom: 1px solid var(--border); }

.card h3 { font-size: 16.5px; line-height: 1.35; margin: 0 0 8px; }
.card h3 a { color: var(--text); }
.card h3 a:hover { color: var(--accent); }

.summary { margin: 0 0 12px; font-size: 14px; color: #4A4A4E; line-height: 1.5; }
.summary dt { font-weight: 600; color: var(--text); margin-top: 8px; }
.summary dt:first-child { margin-top: 0; }
.summary dd { margin: 2px 0 0; }
.summary-disclaimer {
  margin: 0 0 16px; color: var(--text-muted); font-size: 11px;
  font-style: italic; line-height: 1.4;
}

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.tag {
  display: inline-block; background: var(--tag-bg); color: var(--text-secondary);
  border-radius: 6px; padding: 4px 10px; font-size: 11.5px;
}

.card-actions {
  display: flex; align-items: center; gap: 18px; border-top: 1px solid var(--border);
  padding-top: 12px; flex-wrap: wrap;
}
.card-actions form { margin: 0; }
.icon-btn {
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary);
  font-size: 13px; font-weight: 500;
}
.icon-btn svg { display: block; }
.icon-btn.is-active { color: var(--text); }
.icon-btn.icon-btn-like.is-active { color: var(--danger); }
.card-actions .spacer { flex: 1; }
.link-muted { color: var(--text-secondary); font-size: 13px; }

/* ---------------------------------------------------------------- welcome / landing */

/* The hero is the whole page: no white gutter, no rounded corner, and it runs
   under the notch and the home indicator rather than stopping at them. The
   body carries the same colour so overscroll and the iOS status bar area do
   not flash white either. */
body.is-landing { background: var(--primary-dark); }
.app-main.landing-flush { max-width: none; padding: 0; }

.welcome-hero {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  padding:
    calc(48px + env(safe-area-inset-top, 0px))
    calc(24px + env(safe-area-inset-right, 0px))
    calc(32px + env(safe-area-inset-bottom, 0px))
    calc(24px + env(safe-area-inset-left, 0px));
}
.welcome-hero > * { width: 100%; max-width: 420px; }
.welcome-hero .welcome-body {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; text-align: center;
}
.welcome-mark {
  width: 64px; height: 64px; border-radius: 18px; background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.welcome-mark .logo-glyph { width: 31px; }
.welcome-hero h1 { font-size: 30px; font-weight: 700; margin: 0; color: #fff; }
.welcome-hero .lede { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.72); max-width: 340px; margin: 0 auto; }
.welcome-hero ul { text-align: left; padding-left: 1.1rem; color: rgba(255,255,255,0.82); font-size: 14.5px; line-height: 1.6; }
.welcome-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.welcome-fineprint { text-align: center; font-size: 12px; color: rgba(255,255,255,0.55); margin: 4px 0 0; }

/* ---------------------------------------------------------------- auth pages (allauth) */

.auth-shell { max-width: 420px; margin: 0 auto; padding-top: 8px; }
.auth-shell h1 { font-size: 26px; font-weight: 700; margin-bottom: 6px; }
.auth-shell > p:first-of-type,
.auth-shell p.entrance-lede { font-size: 14.5px; color: var(--text-secondary); margin-bottom: 24px; line-height: 1.45; }
.auth-shell form p { margin: 0 0 16px; }
.auth-shell form label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.auth-shell form ul.errorlist { margin-bottom: 10px; }
.auth-shell button[type=submit],
.auth-shell input[type=submit] {
  display: flex; width: 100%; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; border: none; border-radius: var(--radius-btn);
  padding: 15px; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 8px;
  font-family: inherit;
}
.auth-shell button[type=submit]:hover { background: var(--primary-dark); }
.auth-shell button[type=submit]:disabled { background: var(--primary); cursor: wait; opacity: 0.78; }
.button-spinner {
  width: 15px; height: 15px; border: 2px solid rgb(255 255 255 / 45%); border-top-color: #fff;
  border-radius: 50%; animation: button-spin 0.7s linear infinite;
}
@keyframes button-spin { to { transform: rotate(360deg); } }
.auth-shell a.button, .auth-shell button:not([type=submit]) {
  display: flex; width: 100%; align-items: center; justify-content: center;
  background: transparent; color: var(--primary); border: 1px solid var(--primary);
  border-radius: var(--radius-btn); padding: 14px; font-size: 15px; font-weight: 600;
  cursor: pointer; margin-top: 10px; font-family: inherit; text-decoration: none;
}
.auth-shell hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }

.auth-divider {
  display: flex; align-items: center; gap: 12px; margin: 20px 0;
  color: var(--text-muted); font-size: 13px;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.provider-list form { margin: 0; }
/* .auth-shell button[type=submit] restyles submits as the dark primary CTA,
   so the Google button needs the higher-specificity variants to stay white. */
.btn-google,
.auth-shell button[type=submit].btn-google {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px;
  background: #fff; border: 1px solid #dadce0; border-radius: var(--radius-btn);
  padding: 13px; font-size: 15px; font-weight: 600; color: #3c4043;
  cursor: pointer; font-family: inherit; margin-top: 0;
}
.btn-google:hover,
.auth-shell button[type=submit].btn-google:hover { background: #f8f9fa; color: #3c4043; }
.btn-google svg { flex-shrink: 0; }
.btn-google:disabled,
.auth-shell button.btn-google:disabled {
  background: #f5f5f5; color: #8a8d91; border-color: #e2e2e2; cursor: not-allowed; opacity: 1;
}
.btn-google:disabled svg { opacity: 0.45; }
.provider-coming-soon { font-size: 11px; font-weight: 700; color: #75787c; }

/* ---------------------------------------------------------------- specialty / journal / frequency */

.journal-group { margin-bottom: 20px; }
.journal-group-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em; color: var(--text-muted);
  text-transform: uppercase; margin: 0 0 8px;
}
.journal-row {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 0;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.journal-row:last-child { border-bottom: none; }
.journal-row .journal-name { font-size: 15px; color: var(--text); font-weight: 500; }
.journal-checkbox { position: relative; width: 22px; height: 22px; flex-shrink: 0; }
.journal-checkbox input {
  position: absolute; inset: 0; width: 22px; height: 22px; margin: 0; opacity: 0; cursor: pointer;
}
.journal-checkbox .box {
  width: 22px; height: 22px; border-radius: 7px; background: #EDEDEF;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.journal-checkbox input:checked ~ .box { background: var(--primary); }
.journal-checkbox .box svg { opacity: 0; }
.journal-checkbox input:checked ~ .box svg { opacity: 1; }
.journal-group-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 14px; margin: 8px 0 2px; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  border-radius: 10px; background: color-mix(in srgb, var(--primary) 7%, var(--card)); cursor: pointer;
}
.journal-group-toggle:hover { background: color-mix(in srgb, var(--primary) 11%, var(--card)); }
.journal-group-toggle-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.journal-group-toggle-title { font-size: 14px; font-weight: 700; color: var(--text); }
.journal-group-toggle-detail { font-size: 12px; color: var(--text-muted); }
.journal-specialty-items { margin: 0 0 4px 16px; padding-left: 12px; border-left: 2px solid color-mix(in srgb, var(--primary) 20%, var(--border)); }
.journal-specialty-items .journal-row { padding-left: 2px; }
.selected-count { font-size: 12.5px; color: var(--text-muted); text-align: center; margin-bottom: 10px; }

.option-row {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--border); background: var(--card); border-radius: 14px;
  padding: 16px; margin-bottom: 12px; cursor: pointer;
}
.option-row.is-selected { border: 2px solid var(--primary); background: #F0F5F7; padding: 15px; }
.option-row .option-label { font-size: 15.5px; font-weight: 600; color: var(--text); }
.option-row .option-desc { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.option-dot {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-strong);
  flex-shrink: 0; margin-left: 12px;
}
.option-row.is-selected .option-dot { border-color: var(--primary); background: var(--primary); }
.option-row input[type=radio] { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }

/* ---------------------------------------------------------------- account page */

.account-header {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px; padding: 14px 0 6px; margin-bottom: 20px;
}
.avatar {
  width: 52px; height: 52px; border-radius: 50%; background: var(--primary); color: #fff;
  font-size: 19px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.avatar-lg { width: 72px; height: 72px; font-size: 26px; margin-bottom: 8px; }
.avatar-sm { width: 40px; height: 40px; font-size: 15px; }
.account-name { font-size: 18px; font-weight: 700; color: var(--text); }
.account-email { font-size: 13px; color: var(--text-muted); }

.stat-row {
  display: flex; border: 1px solid var(--border); border-radius: 14px;
  margin-bottom: 24px; overflow: hidden;
}
.stat { flex: 1; text-align: center; padding: 12px 4px; min-width: 0; }
.stat + .stat { border-left: 1px solid var(--border); }
.stat-value {
  font-weight: 700; font-size: 16px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px;
}
.stat-label { font-size: 11.5px; color: var(--text-muted); }

.settings-row-value.is-verified { color: var(--rct); font-weight: 600; }
.settings-row.settings-row-danger {
  width: 100%; background: none; border: none; border-bottom: 1px solid var(--border);
  cursor: pointer; font-family: inherit; text-align: left;
}
.settings-row.settings-row-danger:last-child { border-bottom: none; }
.settings-row.settings-row-danger .settings-row-label { color: var(--danger); font-size: 14.5px; font-weight: 600; }

.settings-group {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; margin-bottom: 24px;
}
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 16px; border-bottom: 1px solid var(--border);
  color: var(--text); text-decoration: none;
}
.settings-row:last-child { border-bottom: none; }
.settings-row:hover { color: var(--text); background: rgba(0,0,0,0.02); }
.settings-row-label { font-size: 14.5px; color: var(--text); font-weight: 500; }
.settings-row-value {
  display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 14px;
}
.settings-row-value svg { flex-shrink: 0; }

/* ---------------------------------------------------------------- delete confirm */

.danger-panel { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 8px 20px; }
.danger-icon-circle {
  width: 56px; height: 56px; border-radius: 50%; background: var(--danger-bg);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.danger-panel h1 { font-size: 21px; margin-bottom: 10px; }
.danger-panel p { font-size: 14px; color: var(--text-secondary); line-height: 1.55; max-width: 320px; margin: 0 auto; }
.confirm-input { text-align: center; letter-spacing: 0.08em; }

/* ---------------------------------------------------------------- search */

.search-bar {
  display: flex; align-items: center; gap: 10px; background: var(--chip-bg);
  border-radius: var(--radius-input); padding: 12px 14px; margin-bottom: 4px;
}
.search-bar svg { flex-shrink: 0; color: var(--text-muted); }
.search-bar input { border: none; background: none; font-size: 15px; flex: 1; color: var(--text); padding: 0; width: 100%; }
.search-bar input:focus { outline: none; }

.recent-searches { margin-top: 32px; }
.recent-searches h2 {
  margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--text-secondary);
}
.recent-search-list { border-top: 1px solid var(--border); }
.recent-search-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--border); color: var(--text);
}
.recent-search-item:hover { color: var(--accent); }
.recent-search-item > span { min-width: 0; }
.recent-search-item svg { flex-shrink: 0; color: var(--text-muted); }
.recent-search-title {
  display: block; overflow: hidden; color: inherit; font-size: 14px; font-weight: 600;
  line-height: 1.35; text-overflow: ellipsis; white-space: nowrap;
}
.recent-search-meta {
  display: block; margin-top: 3px; color: var(--text-muted); font-size: 12px;
}
.recent-search-empty { margin: 0; color: var(--text-muted); font-size: 13.5px; }

.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 60px 20px;
}
.empty-state-icon {
  width: 52px; height: 52px; border-radius: 50%; background: var(--chip-bg);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--text-muted);
}
.empty-state h2 { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.empty-state p { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; max-width: 260px; margin: 0 auto; }
.empty-state-action {
  margin-top: 16px; padding: 9px 18px; border-radius: var(--radius-pill);
  background: var(--chip-bg); color: var(--accent); font-size: 13.5px; font-weight: 600;
}
.empty-state-action:hover { background: var(--border); color: var(--accent-dark); }

/* ---------------------------------------------------------------- top bar + drawer */

.top-bar {
  position: sticky; top: 0; z-index: 20; background: #fff;
  padding-top: env(safe-area-inset-top, 0);
  box-shadow: 0 1px 0 var(--border), 0 2px 8px rgba(0, 0, 0, 0.04);
}
.top-bar-inner {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  max-width: var(--content-width); margin: 0 auto; height: 52px; padding: 0 12px;
}
.hamburger {
  position: relative; display: inline-flex; width: 40px; height: 40px;
  align-items: center; justify-content: center; border-radius: 50%;
  cursor: pointer; color: var(--text);
}
.hamburger:hover { background: var(--chip-bg); }
.hamburger input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: pointer;
}
.hamburger:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Brand and page title share the centre slot and crossfade; visibility (not
   just opacity) keeps the hidden one out of the tab order. */
.top-bar-brand, .top-bar-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  max-width: calc(100% - 104px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.02em; color: var(--text);
  transition: opacity 0.18s ease, visibility 0.18s ease;
}
.top-bar-brand { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.top-bar-brand:hover { color: var(--text); }
/* The monogram on its brand tile, sized to sit on the cap height of the name
   beside it. */
.brand-tile {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 7px; background: var(--primary); color: #fff;
}
.brand-tile .logo-glyph { width: 11.5px; }
.top-bar-title { font-size: 16px; font-weight: 700; opacity: 0; visibility: hidden; }
.top-bar.is-collapsed .top-bar-brand { opacity: 0; visibility: hidden; }
.top-bar.is-collapsed .top-bar-title { opacity: 1; visibility: visible; }
.top-bar-spacer { width: 40px; }

.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
  width: min(300px, 84vw); background: #fff;
  display: flex; flex-direction: column;
  padding: calc(20px + env(safe-area-inset-top, 0)) 12px calc(16px + env(safe-area-inset-bottom, 0));
  transform: translateX(-105%); transition: transform 0.22s ease;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08);
}
.drawer-overlay {
  position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.35);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease; cursor: pointer;
}
body:has(.drawer-toggle:checked) .drawer { transform: translateX(0); }
body:has(.drawer-toggle:checked) .drawer-overlay { opacity: 1; pointer-events: auto; }
body:has(.drawer-toggle:checked) { overflow: hidden; }

.drawer-brand {
  font-size: 17px; font-weight: 800; letter-spacing: -0.02em; padding: 0 12px 14px;
  display: flex; align-items: center; gap: 9px;
}
.drawer-nav { flex: 1; }
.drawer-link {
  display: flex; align-items: center; gap: 14px; padding: 13px 12px;
  border-radius: 12px; color: var(--text); font-size: 15.5px; font-weight: 600;
}
.drawer-link:hover { background: var(--chip-bg); color: var(--text); }
.drawer-link.is-active { color: var(--primary); background: var(--chip-bg); }
.drawer-footer {
  border-top: 1px solid var(--border); padding: 14px 12px 0;
  display: flex; align-items: center; gap: 12px;
}
.drawer-user { flex: 1; min-width: 0; }
.drawer-user-name {
  font-size: 14px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drawer-user-email {
  font-size: 12px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drawer-footer form { margin: 0; flex-shrink: 0; }
.drawer-logout {
  background: none; border: none; color: var(--danger); font-family: inherit;
  font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 8px;
}

/* ---------------------------------------------------------------- bottom nav */

.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: #fff; border-top: 1px solid var(--border);
  display: flex; align-items: stretch; padding-bottom: env(safe-area-inset-bottom, 6px);
}
.bottom-nav-inner {
  display: flex; width: 100%; max-width: var(--content-width); margin: 0 auto;
}
.bottom-nav a {
  flex: 1; background: none; border: none; padding: 9px 4px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--text-muted); text-decoration: none;
}
.bottom-nav a.is-active { color: var(--primary); }
.bottom-nav a span { font-size: 10.5px; font-weight: 600; }

/* ---------------------------------------------------------------- misc */

.fineprint { color: var(--text-muted); font-size: 0.85rem; }
.journal-cover { border-radius: 9px; }
.logo-glyph { display: block; height: auto; }

@media (max-width: 480px) {
  .app-main { padding: 12px 16px 32px; }
  .app-main.feed-flush { padding-left: 0; padding-right: 0; }
  .feed-flush .page-header, .feed-flush .messages, .feed-flush .empty-state {
    padding-left: 16px; padding-right: 16px;
  }
}

/* ---------------------------------------------------------------- marketing site */

.marketing-body {
  min-height: 100vh; display: flex; flex-direction: column;
  background: #fff; color: var(--text);
}
.marketing-body main { flex: 1; }
.marketing-shell { width: min(1080px, calc(100% - 40px)); margin: 0 auto; }
.marketing-header {
  position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--border); backdrop-filter: blur(14px);
}
.marketing-header-inner {
  min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.marketing-brand {
  display: inline-flex; align-items: center; gap: 9px; color: var(--text);
  font-size: 17px; font-weight: 800; letter-spacing: -0.02em;
}
.marketing-brand:hover { color: var(--text); }
.marketing-nav { display: flex; align-items: center; gap: 24px; }
.marketing-nav a { color: var(--text-secondary); font-size: 13.5px; font-weight: 600; }
.marketing-nav a:hover { color: var(--primary); }
.marketing-nav .marketing-nav-cta {
  padding: 9px 14px; border-radius: 10px; background: var(--primary); color: #fff;
}
.marketing-nav .marketing-nav-cta:hover { background: var(--primary-dark); color: #fff; }

.marketing-hero {
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 18%, rgba(28, 110, 140, 0.11), transparent 28%),
    linear-gradient(180deg, #fff 0%, #f8fbfc 100%);
  border-bottom: 1px solid var(--border);
}
.marketing-hero-grid {
  min-height: 610px; padding: 92px 0 86px; display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
  align-items: center; gap: 72px;
}
.marketing-eyebrow, .marketing-section-kicker {
  margin: 0 0 14px; color: var(--accent); font-size: 12px; font-weight: 750;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.marketing-hero h1 {
  max-width: 690px; margin: 0; color: var(--primary); font-size: clamp(42px, 5.5vw, 68px);
  line-height: 1.03; letter-spacing: -0.048em;
}
.marketing-lede {
  max-width: 620px; margin: 25px 0 0; color: var(--text-secondary);
  font-size: 18px; line-height: 1.65;
}
.marketing-actions { margin-top: 30px; display: flex; align-items: center; gap: 24px; }
.marketing-primary-btn {
  padding: 13px 19px; border-radius: 11px; background: var(--primary); color: #fff;
  font-size: 14.5px;
}
.marketing-primary-btn:hover { background: var(--primary-dark); color: #fff; }
.marketing-text-link { color: var(--primary); font-size: 14px; font-weight: 650; }
.marketing-text-link span { display: inline-block; transition: transform 0.16s ease; }
.marketing-text-link:hover span { transform: translateX(3px); }
.marketing-beta-note { margin: 13px 0 0; color: var(--text-muted); font-size: 12px; }

.marketing-preview {
  position: relative; padding: 28px; border: 1px solid var(--border-strong);
  border-radius: 20px; background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 22px 65px rgba(18, 58, 77, 0.11);
}
.marketing-preview::before {
  content: ""; position: absolute; inset: 12px -12px -12px 12px; z-index: -1;
  border-radius: 20px; background: #eaf3f6;
}
.marketing-preview-source { display: flex; align-items: center; gap: 10px; }
.marketing-preview-mark {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; border-radius: 9px; background: var(--primary); color: #fff;
  font-size: 14px; font-weight: 800;
}
.marketing-preview-source strong, .marketing-preview-source small { display: block; }
.marketing-preview-source strong { color: var(--text); font-size: 13px; }
.marketing-preview-source small { margin-top: 1px; color: var(--text-muted); font-size: 11px; }
.marketing-preview-badge {
  margin-left: auto; padding: 3px 8px; border-radius: 6px; background: #e7f2ec;
  color: #1c5e3f; font-size: 9.5px; font-weight: 750; text-transform: uppercase;
  letter-spacing: 0.04em;
}
.marketing-preview h2 {
  margin: 25px 0 18px; color: var(--text); font-size: 19px; line-height: 1.32;
  letter-spacing: -0.02em;
}
.marketing-preview dl { margin: 0; }
.marketing-preview dl div { padding: 12px 0; border-top: 1px solid var(--border); }
.marketing-preview dt { color: var(--text); font-size: 11px; font-weight: 750; }
.marketing-preview dd { margin: 2px 0 0; color: var(--text-secondary); font-size: 12.5px; }
.marketing-preview > p {
  margin: 17px 0 0; color: var(--text-muted); font-size: 9.5px;
  font-style: italic; line-height: 1.45;
}

.marketing-section { padding: 92px 0 96px; }
.marketing-section h2, .marketing-trust h2, .marketing-final-cta h2 {
  margin: 0; color: var(--primary); font-size: clamp(30px, 4vw, 43px);
  line-height: 1.13; letter-spacing: -0.035em;
}
.marketing-steps { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px; }
.marketing-steps article { padding-top: 20px; border-top: 1px solid var(--border-strong); }
.marketing-steps article > span { color: var(--accent); font-size: 11px; font-weight: 750; }
.marketing-steps h3 { margin: 17px 0 9px; font-size: 17px; letter-spacing: -0.015em; }
.marketing-steps p { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.65; }

.marketing-trust { padding: 78px 0; background: var(--primary); color: #fff; }
.marketing-trust-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.marketing-trust .marketing-section-kicker { color: #8ec4d6; }
.marketing-trust h2 { color: #fff; }
.marketing-trust p:not(.marketing-section-kicker) {
  margin: 0 0 22px; color: rgba(255, 255, 255, 0.76); font-size: 15px; line-height: 1.75;
}
.marketing-trust .marketing-text-link { color: #fff; }

.marketing-final-cta { padding: 92px 0 96px; text-align: center; }
.marketing-final-cta h2 { margin-bottom: 28px; }

.marketing-footer { border-top: 1px solid var(--border); padding: 24px 0 28px; }
.marketing-footer-inner {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  color: var(--text-muted); font-size: 11.5px;
}
.marketing-footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.marketing-footer-links a {
  padding: 0; border: 0; border-radius: 0; background: none;
  color: var(--text-muted); font-size: 11.5px; font-weight: 500;
}
.marketing-footer-links a:hover { color: var(--primary); }

.marketing-document { max-width: 760px; padding-top: 76px; padding-bottom: 90px; }
.marketing-document header { padding-bottom: 34px; border-bottom: 1px solid var(--border); }
.marketing-document h1 {
  margin: 0; color: var(--primary); font-size: clamp(38px, 6vw, 54px);
  line-height: 1.08; letter-spacing: -0.042em;
}
.marketing-document-intro {
  max-width: 650px; margin: 20px 0 0; color: var(--text-secondary); font-size: 17px; line-height: 1.65;
}
.marketing-document-date { margin: 15px 0 0; color: var(--text-muted); font-size: 12px; }
.marketing-document section { padding-top: 30px; }
.marketing-document section h2 {
  margin: 0 0 9px; color: var(--text); font-size: 18px; letter-spacing: -0.015em;
}
.marketing-document section p {
  margin: 0 0 12px; color: var(--text-secondary); font-size: 14.5px; line-height: 1.72;
}
.marketing-document section a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.marketing-document .marketing-disclosure {
  margin-top: 16px; color: var(--text-muted); font-size: 11px; font-style: italic;
}
.marketing-document-cta { margin-top: 38px; }
.marketing-error { max-width: 760px; padding-top: 110px; padding-bottom: 130px; }
.marketing-error h1 {
  margin: 0; color: var(--primary); font-size: clamp(38px, 6vw, 54px);
  line-height: 1.08; letter-spacing: -0.042em;
}
.marketing-error > p:not(.marketing-eyebrow) {
  margin: 18px 0 24px; color: var(--text-secondary); font-size: 16px;
}

@media (max-width: 800px) {
  .marketing-hero-grid { min-height: 0; grid-template-columns: 1fr; gap: 58px; padding: 72px 0 76px; }
  .marketing-hero-copy { max-width: 690px; }
  .marketing-preview { width: min(100%, 520px); }
  .marketing-steps { grid-template-columns: 1fr; gap: 28px; }
  .marketing-trust-inner { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 560px) {
  .marketing-shell { width: min(100% - 32px, 1080px); }
  .marketing-header-inner { min-height: 58px; }
  .marketing-nav { gap: 14px; }
  .marketing-nav > a:first-child { display: none; }
  .marketing-nav a { font-size: 12.5px; }
  .marketing-nav .marketing-nav-cta { padding: 8px 11px; }
  .marketing-hero-grid { padding: 58px 0 64px; gap: 46px; }
  .marketing-hero h1 { font-size: clamp(40px, 12vw, 52px); }
  .marketing-lede { margin-top: 20px; font-size: 16px; }
  .marketing-actions { align-items: flex-start; flex-direction: column; gap: 17px; }
  .marketing-preview { padding: 22px; border-radius: 17px; }
  .marketing-section { padding: 70px 0 74px; }
  .marketing-trust { padding: 66px 0; }
  .marketing-final-cta { padding: 70px 0 76px; }
  .marketing-final-cta h2 br { display: none; }
  .marketing-footer-inner { align-items: flex-start; flex-direction: column; }
  .marketing-footer-links { gap: 16px; }
  .marketing-document { padding-top: 56px; padding-bottom: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .marketing-text-link span { transition: none; }
}