/* ==========================================================================
   Muse Studio — stylesheet
   Calm, paper-neutral UI: whites and warm creams with graphite greys; ink
   black is reserved for primary actions so it stays sparing and deliberate.
   All foreground/background pairs below are chosen to meet WCAG 2.1 AA contrast.
   Mobile-first; see "Responsive layout" at the bottom for tablet/desktop.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ink accents — near-black, used sparingly (white text clears AA easily) */
  --accent: #26241f;        /* primary buttons / strong accents */
  --accent-2: #3d3a33;      /* deep warm grey — hover pair / gradients */
  --accent-3: #b9b3a4;      /* mid warm grey — rings / hover borders */
  --accent-soft: #efeadf;   /* soft cream tint surfaces */
  --accent-tint: #faf8f2;   /* lightest cream tint */

  /* Paper surfaces + links */
  --paper: #f6f3ec;    /* the app screen background — warm blank paper */
  --surface: #ffffff;  /* cards */
  --link: #44403a;     /* links / secondary buttons (white text clears AA) */
  --tint: #efeadf;     /* tinted panels (notes, image placeholders) */

  /* Ink / text */
  --ink:      #211f1a;   /* primary text */
  --ink-soft: #57534a;   /* secondary text — clears AA on white & paper */
  --ink-faint:#8a8577;

  /* Lines & states (muted so they sit quietly on paper) */
  --line:   #e4dfd4;
  --line-2: #cfc9ba;
  --ok:     #4a6741;     /* success / published */
  --ok-bg:  #edf0e3;
  --warn:   #7a6236;
  --warn-bg:#f5efdf;
  --danger: #8c3038;     /* report / delete */
  --danger-bg:#f6ebe8;

  /* Shape & motion */
  --radius:   16px;
  --radius-sm:10px;
  --radius-lg:24px;
  --shadow:   0 1px 2px rgba(33,31,26,.06), 0 8px 24px rgba(33,31,26,.08);
  --shadow-sm:0 1px 2px rgba(33,31,26,.08);
  --tap: 44px;           /* minimum touch target */
  --maxw: 460px;         /* toast width cap */

  --font-ui: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
input, textarea, select, button { font-family: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--link); }

/* Visible, consistent keyboard focus everywhere */
:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: -60px;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 10px 10px;
  z-index: 100;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; }

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

/* --------------------------------------------------------------------------
   App shell
   Phones (default): app bar on top, screen, tab bar on the bottom.
   ≥720px the tab bar becomes a left rail — see "Responsive layout" below.
   -------------------------------------------------------------------------- */
.device {
  width: 100%;
  height: 100dvh;
  background: var(--paper);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* Brand mark (assets/logo.svg — rounded corners are baked into the SVG) */
.logo-mark { display: block; flex: none; }

/* --------------------------------------------------------------------------
   Icons (js/icons.js — Heroicons outline, drawn with currentColor)
   -------------------------------------------------------------------------- */
.icon { width: 20px; height: 20px; flex: none; }
.icon--inline { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -0.2em; }
.icon--ok { color: var(--ok); }
.tab__icon { display: inline-flex; }
.tab__icon .icon { width: 22px; height: 22px; }
.tag .icon { width: 13px; height: 13px; }
.empty__icon { display: flex; justify-content: center; }
.empty__icon .icon { width: 44px; height: 44px; }
.uploader__icon .icon { width: 30px; height: 30px; }
.toast .icon { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   App bar (header)
   -------------------------------------------------------------------------- */
.appbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  min-height: 56px;
}
.appbar__brand {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: .2px;
}
.appbar__brand .dot { font-size: 1.1rem; line-height: 1; }
.appbar__spacer { flex: 1; }
.appbar__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap);
  background: transparent;
  color: var(--ink); border: 1px solid var(--line-2); border-radius: 12px;
  font-size: .95rem; padding: 0 12px;
}
.appbar__btn:hover { background: var(--accent-soft); }
.appbar__title {
  font-family: var(--font-display);
  font-weight: 600; font-size: 1.12rem;
}

/* --------------------------------------------------------------------------
   Screen container
   -------------------------------------------------------------------------- */
.app-screen {
  /* Positioning context so absolutely-positioned descendants (e.g. .sr-only
     labels) are contained + clipped here instead of growing the document. */
  position: relative;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
  scroll-behavior: smooth;
}
.app-screen:focus { outline: none; }

.screen-pad { padding: 18px 16px 24px; }
.screen-pad--narrow { max-width: 380px; margin: 0 auto; }

.stack > * + * { margin-top: 14px; }
.stack-sm > * + * { margin-top: 8px; }

/* Page intro headings */
.page-title {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 600;
  color: var(--ink);
}
.page-sub { color: var(--ink-soft); margin-top: 4px; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .12em;
  font-size: .72rem; font-weight: 700; color: var(--accent);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card--pad { padding: 16px; }
.card__title { font-weight: 600; font-size: 1.02rem; }
.card__meta { color: var(--ink-soft); font-size: .85rem; }

.spark {
  background:
    radial-gradient(120% 120% at 100% 0%, #f0e8d5 0%, transparent 55%),
    var(--surface);
  border: 1px solid var(--accent-soft);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 600; font-size: .98rem;
  text-decoration: none;
  transition: transform .04s ease, background .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--block { width: 100%; }
.btn--primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: #0f0e0b; }
.btn--secondary { background: var(--link); color: #fff; }
.btn--secondary:hover { background: #2e2b25; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: #f2eee5; }
.btn--soft { background: var(--accent-soft); color: var(--accent); }
.btn--soft:hover { background: #e5dfd0; }
.btn--danger { background: transparent; color: var(--danger); border-color: #ddc6c2; }
.btn--danger:hover { background: var(--danger-bg); }
.btn--sm { min-height: 36px; padding: 0 12px; font-size: .88rem; border-radius: 10px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-row--end { justify-content: flex-end; }
.btn-row--split { justify-content: space-between; }

/* Icon-only button (always carries an aria-label in markup) */
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap);
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 12px; color: var(--ink-soft);
}
.iconbtn:hover { background: #f2eee5; color: var(--ink); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.field { display: block; }
.field + .field { margin-top: 14px; }
.label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.hint { color: var(--ink-soft); font-size: .82rem; margin-top: 6px; }
.input, .textarea, .select {
  width: 100%;
  min-height: var(--tap);
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 1rem;
}
.textarea { min-height: 88px; resize: vertical; line-height: 1.4; }
.input:focus, .textarea:focus, .select:focus {
  outline: 3px solid var(--link);
  outline-offset: 1px;
  border-color: var(--link);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--danger);
}
.error-text { color: var(--danger); font-size: .82rem; margin-top: 6px; font-weight: 500; }
.error-text:empty { display: none; }

/* Checkbox / radio rows with large tap targets */
.check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; cursor: pointer;
}
.check:hover { background: #f8f5ee; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.check__text { font-size: .95rem; }

/* Multi-select chips (quiz options) */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap);
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line-2);
  background: #fff;
  color: var(--ink);
  font-weight: 500;
}
.chip:hover { border-color: var(--accent-3); }
.chip[aria-pressed="true"] {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.chip[aria-pressed="true"]::before { content: "✓"; font-weight: 700; }
.chip:disabled { opacity: .45; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   Tab bar (bottom nav)
   -------------------------------------------------------------------------- */
.tabbar {
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar[hidden] { display: none; }
/* Rail-only brand block (rendered by nav.js, revealed at ≥720px) */
.tabbar__brand { display: none; }
.tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-height: 58px;
  border: 0; background: transparent;
  color: var(--ink-soft);
  font-size: .72rem; font-weight: 600;
  padding: 6px 2px;
}
.tab .tab__icon { font-size: 1.25rem; line-height: 1; }
.tab[aria-current="page"] { color: var(--accent); }
.tab[aria-current="page"] .tab__icon { transform: translateY(-1px); }
.tab:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Auth screens
   -------------------------------------------------------------------------- */
.auth-hero {
  text-align: center;
  padding: 8px 0 4px;
}
.auth-logo {
  width: 64px; height: 64px; margin: 0 auto 10px;
  filter: drop-shadow(0 10px 20px rgba(33,31,26,.22));
}
.auth-logo .logo-mark { width: 100%; height: 100%; }
.auth-title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; }
.auth-switch { text-align: center; color: var(--ink-soft); font-size: .92rem; }
.auth-switch button {
  background: none; border: 0; color: var(--link); font-weight: 600; padding: 4px;
  text-decoration: underline; min-height: var(--tap);
}
.divider {
  display: flex; align-items: center; gap: 10px; color: var(--ink-faint); font-size: .82rem;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Password strength meter */
.pw-meter { display: flex; gap: 5px; margin-top: 8px; }
.pw-meter span { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.pw-meter[data-score="1"] span:nth-child(-n+1),
.pw-meter[data-score="2"] span:nth-child(-n+2),
.pw-meter[data-score="3"] span:nth-child(-n+3),
.pw-meter[data-score="4"] span:nth-child(-n+4) { background: var(--accent-2); }
.pw-meter[data-score="4"] span { background: var(--ok); }

/* --------------------------------------------------------------------------
   Onboarding quiz
   -------------------------------------------------------------------------- */
.progress {
  height: 8px; border-radius: 999px; background: var(--accent-soft); overflow: hidden;
}
.progress__bar {
  height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--link));
  border-radius: 999px; transition: width .3s ease; width: 0;
}
.step-count { font-size: .82rem; color: var(--ink-soft); font-weight: 600; }
.quiz-q { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; }
.quiz-help { color: var(--ink-soft); }
.maxhint { font-size: .8rem; color: var(--warn); font-weight: 600; }

/* --------------------------------------------------------------------------
   Chat
   -------------------------------------------------------------------------- */
.chat { display: flex; flex-direction: column; height: 100%; }
.chat__log {
  flex: 1; overflow-y: auto; padding: 16px 14px 8px;
  display: flex; flex-direction: column; gap: 12px;
}
.bubble {
  max-width: 84%;
  padding: 11px 14px;
  border-radius: 16px;
  font-size: .96rem;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.bubble--ai {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
  box-shadow: var(--shadow-sm);
}
.bubble--me {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.bubble__role { font-size: .7rem; font-weight: 700; opacity: .75; margin-bottom: 3px; display: block; }
.chat__suggestions { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 14px 8px; }
.chat__compose {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--surface);
}
.chat__compose textarea {
  flex: 1; min-height: var(--tap); max-height: 120px; resize: none;
  padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 14px; font-size: 1rem;
}
.typing { display: inline-flex; gap: 4px; align-items: center; }
.typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint);
  animation: blink 1.2s infinite both;
}
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* --------------------------------------------------------------------------
   Journal & gallery shared media
   -------------------------------------------------------------------------- */
.uploader {
  border: 2px dashed var(--line-2);
  border-radius: var(--radius);
  background: #fff;
  padding: 22px; text-align: center; color: var(--ink-soft);
  min-height: 150px; display: grid; place-items: center; gap: 6px;
}
.uploader:hover { border-color: var(--accent-3); background: var(--accent-tint); }
.uploader__icon { font-size: 1.8rem; }
.preview-img {
  width: auto; max-width: 100%; height: auto; max-height: 420px;
  margin-inline: auto;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--tint);
}

.reflect-list { display: flex; flex-direction: column; gap: 8px; }
.reflect-row { display: flex; gap: 8px; align-items: center; }
.reflect-row .input { flex: 1; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 600;
}
.tag--private { background: var(--tint); color: var(--ink-soft); }
.tag--public  { background: var(--ok-bg); color: var(--ok); }
.tag--pending { background: var(--warn-bg); color: var(--warn); }
.tag--removed { background: var(--danger-bg); color: var(--danger); }

.entry { overflow: hidden; }
.entry__body { padding: 14px 16px; }
.entry__refs { display: grid; gap: 10px; margin-top: 12px; }
@media (min-width: 380px) { .entry__refs { grid-template-columns: 1fr 1fr; } }
.ref-box { background: #f8f5ee; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.ref-box h4 { font-size: .8rem; margin-bottom: 6px; }
.ref-box--good h4 { color: var(--ok); }
.ref-box--improve h4 { color: var(--link); }
.ref-box li { font-size: .9rem; padding: 3px 0 3px 16px; position: relative; }
.ref-box li::before { content: "•"; position: absolute; left: 2px; color: var(--ink-faint); }

/* --------------------------------------------------------------------------
   Gallery / community
   -------------------------------------------------------------------------- */
.post { overflow: hidden; }
.post__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.avatar {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .9rem;
  background: var(--link);
}
.post__author { font-weight: 600; font-size: .94rem; }
.post__time { color: var(--ink-soft); font-size: .8rem; }
.post__img { width: 100%; background: var(--tint); }
/* Colour-block placeholders keep a fixed shape… */
div.post__img { aspect-ratio: 4/3; }
/* …but real artwork keeps its own aspect ratio: the box hugs the image,
   capped in height and centred in the card. */
img.post__img {
  width: auto; max-width: 100%;
  height: auto; max-height: 560px;
  margin-inline: auto;
}
.post__caption { padding: 12px 14px; }
.post__actions { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.post__actions .iconbtn { font-size: .85rem; gap: 6px; padding: 0 12px; }

.comments { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.comment { display: flex; gap: 8px; }
.comment .avatar { width: 30px; height: 30px; font-size: .78rem; }
.comment__bubble { background: #f2eee5; border-radius: 12px; padding: 8px 11px; font-size: .9rem; }
.comment__author { font-weight: 600; font-size: .82rem; }
.comment-form { display: flex; gap: 8px; padding: 8px 14px 14px; }
.comment-form .input { flex: 1; }

/* --------------------------------------------------------------------------
   Profile & settings
   -------------------------------------------------------------------------- */
.profile-head { display: flex; align-items: center; gap: 14px; }
.profile-head .avatar { width: 64px; height: 64px; font-size: 1.4rem; }
.profile-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }

.setting {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 14px 16px;
}
.setting + .setting { border-top: 1px solid var(--line); }
.setting__text { min-width: 0; }
.setting__title { font-weight: 600; font-size: .96rem; }
.setting__desc { color: var(--ink-soft); font-size: .82rem; margin-top: 2px; }

/* Accessible toggle switch */
.switch { position: relative; flex: none; width: 52px; height: 30px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track {
  position: absolute; inset: 0; border-radius: 999px; background: var(--line-2);
  transition: background .15s ease;
}
.switch .track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  background: #fff; border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform .15s ease;
}
.switch input:checked + .track { background: var(--ok); }
.switch input:checked + .track::after { transform: translateX(22px); }
.switch input:focus-visible + .track { outline: 3px solid var(--link); outline-offset: 2px; }

.section-label {
  text-transform: uppercase; letter-spacing: .1em; font-size: .72rem;
  font-weight: 700; color: var(--ink-soft); padding: 4px 2px;
}

.privacy-note {
  background: var(--tint); border: 1px solid #dcd5c3; border-radius: 12px;
  padding: 12px 14px; font-size: .88rem; color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Empty states
   -------------------------------------------------------------------------- */
.empty { text-align: center; padding: 36px 18px; color: var(--ink-soft); }
.empty__icon { font-size: 2.2rem; }
.empty__title { font-weight: 600; color: var(--ink); margin-top: 6px; }

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */
.toast-host {
  /* Sits above the bottom tab bar on phones; drops to 24px on wide
     viewports where navigation moves to the side rail. */
  position: fixed; left: 50%; bottom: calc(72px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; width: min(92vw, var(--maxw));
}
.toast {
  pointer-events: auto;
  background: var(--ink); color: #fff;
  padding: 12px 16px; border-radius: 12px; font-size: .92rem; font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  display: flex; align-items: center; gap: 10px;
  animation: toast-in .2s ease;
}
.toast--ok { background: #3c4a34; }
.toast--err { background: #5a2a26; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */
.modal-host { position: fixed; inset: 0; z-index: 90; display: none; }
.modal-host.open { display: block; }
.modal-overlay {
  position: absolute; inset: 0; background: rgba(32,30,24,.55);
  display: grid; place-items: center; padding: 18px;
  animation: toast-in .15s ease;
}
.modal {
  width: min(420px, 100%); background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 22px; max-height: 90dvh; overflow-y: auto;
}
.modal__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.modal__body { color: var(--ink-soft); margin-top: 8px; }

/* --------------------------------------------------------------------------
   Misc helpers
   -------------------------------------------------------------------------- */
.center { text-align: center; }
.muted { color: var(--ink-soft); }
.small { font-size: .85rem; }
.row { display: flex; align-items: center; gap: 10px; }
.row--between { justify-content: space-between; }
.grow { flex: 1; }
.pill {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: .76rem; font-weight: 600;
}

/* --------------------------------------------------------------------------
   Responsive layout — tablet & desktop
   ≥720px  the bottom tab bar becomes a compact left rail (icon over label),
           content columns centre with a comfortable reading width.
   ≥900px  journal + gallery lists become two-column grids.
   ≥1100px the rail widens with full labels and the brand block.
   The rail sits in an `auto` grid column, so when nav.js hides it on
   auth/onboarding screens the column collapses and content spans full width.
   -------------------------------------------------------------------------- */
@media (min-width: 720px) {
  .device {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
  }
  .appbar {
    grid-column: 1 / -1;
    padding-left: 20px; padding-right: 20px;
  }
  .app-screen { grid-row: 2; grid-column: 2; }

  .tabbar {
    grid-row: 2; grid-column: 1;
    width: 96px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    padding: 14px 10px;
    border-top: 0;
    border-right: 1px solid var(--line);
  }
  .tabbar__brand {
    display: grid; place-items: center; gap: 4px;
    padding: 6px 0 14px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px;
  }
  .tabbar__brandname { display: none; }
  .tab { flex: none; min-height: 64px; border-radius: 12px; }
  .tab[aria-current="page"] { background: var(--accent-soft); }

  .screen-pad { max-width: 860px; margin-inline: auto; padding: 26px 28px 40px; }
  .screen-pad--narrow { max-width: 420px; }

  /* Chat: log + suggestion chips read at a centered width, while the compose
     bar's white background and divider span the full content width — its
     controls stay centered via the dynamic side padding (860px incl. 24px
     padding each side → 812px of controls). */
  .chat__log, .chat__suggestions { width: 100%; max-width: 860px; margin-inline: auto; }
  .chat__log { padding: 20px 24px 10px; }
  .chat__suggestions { padding: 0 24px 10px; }
  .chat__compose {
    padding: 12px max(24px, calc((100% - 812px) / 2)) max(12px, env(safe-area-inset-bottom));
  }
  .bubble { max-width: 70%; }

  /* Navigation is in the side rail now — toasts can hug the bottom edge. */
  .toast-host { bottom: 24px; }
}

@media (min-width: 900px) {
  /* Journal + community lists flow as card grids. */
  [data-feed], [data-list] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }
  [data-feed] > * + *, [data-list] > * + * { margin-top: 0; }
  [data-feed] > .empty, [data-list] > .empty { grid-column: 1 / -1; }
  .screen-pad { max-width: 980px; }
}

@media (min-width: 1100px) {
  .tabbar { width: 236px; padding: 16px 14px; }
  .tabbar__brand {
    grid-auto-flow: column;
    justify-content: start; align-items: center; gap: 10px;
    padding: 8px 10px 16px;
  }
  .tabbar__brandname {
    display: inline;
    font-family: var(--font-display);
    font-weight: 600; font-size: 1.05rem;
  }
  .tab {
    flex-direction: row; justify-content: flex-start;
    gap: 12px;
    min-height: var(--tap);
    padding: 10px 14px;
    font-size: .95rem;
  }
  .tab .tab__icon { font-size: 1.2rem; }
  .tab[aria-current="page"] .tab__icon { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}