/* dear diary, app view layout (DESIGN_SPEC.md section 6). Mobile-first:
   single --app-max column (base.css sets it on main). Desktop widens the
   journal into the t1 two-column tl-grid; record/entry/search stay centered
   for reading comfort. View-specific layout only; components live in
   components.css. Sections are banded so other view agents append theirs. */

/* ---------------- journal (2.4) ---------------- */

.journal-grid{ display:block; }
.journal-grid .heat-card{ margin-bottom:var(--sp-6); }

@media (min-width:901px){
  /* the journal wants more room than the reading column */
  main:has([data-view="journal"]:not([hidden])){ max-width:var(--wrap-max); }
  .journal-grid{
    display:grid; grid-template-columns:1.15fr 1fr; gap:44px; align-items:start;
  }
  .journal-grid .heat-card{
    margin-bottom:0;
    position:sticky; top:calc(64px + var(--sp-4));
  }
}

/* ---------------- entry (2.5) ---------------- */

[data-view="entry"]{ padding-top:var(--sp-2); }

/* ---------------- search (2.6) ---------------- */

[data-view="search"]{ padding-top:var(--sp-2); }

/* ---------------- settings (2.7, settings-onboarding agent) ---------------- */

.view-title{
  font-family:var(--sans); font-size:var(--fs-h3); font-weight:var(--fw-head);
  line-height:var(--lh-head); letter-spacing:var(--ls-head);
  color:var(--chalk); margin:0 0 var(--sp-5);
}
.settings-group{
  background:var(--slate-2); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--sp-5);
  margin-bottom:var(--sp-4);
}
.settings-label{
  font-family:var(--mono); font-size:var(--fs-caption);
  letter-spacing:var(--ls-caption); text-transform:uppercase;
  color:var(--chalk-faint); font-weight:var(--fw-mono-strong);
  margin:0 0 var(--sp-4);
}
.settings-item + .settings-item{ margin-top:var(--sp-5); }
.settings-sub{
  font-family:var(--sans); font-size:14px; color:var(--chalk-dim);
  line-height:var(--lh-body); margin:var(--sp-2) 0 0; max-width:46ch;
}
.settings-body{
  font-family:var(--sans); font-size:var(--fs-body); color:var(--chalk-dim);
  line-height:var(--lh-body); margin:0 0 var(--sp-3); max-width:52ch;
}
.settings-meta{
  font-family:var(--mono); font-size:var(--fs-meta); color:var(--chalk-dim);
  margin:var(--sp-2) 0 0;
}
.settings-warn{
  font-family:var(--mono); font-size:var(--fs-meta); color:var(--danger);
  border:1px solid var(--danger); background:var(--danger-glow);
  border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4);
  margin:var(--sp-4) 0 0;
}
.settings-rows{ margin:0 0 var(--sp-4); }
.settings-row{
  display:flex; justify-content:space-between; gap:var(--sp-3);
  padding:9px 0; border-top:1px dashed var(--line);
  font-family:var(--mono); font-size:var(--fs-meta);
}
.settings-row:first-child{ border-top:0; padding-top:0; }
.settings-row dt{ color:var(--chalk-dim); }
.settings-row dd{ color:var(--chalk); margin:0; text-align:right; }
.settings-link{ color:var(--accent); text-underline-offset:3px; }
.settings-link:hover{ color:var(--accent-dim); }
.meter{
  height:10px; border-radius:var(--r-pill);
  background:var(--slate-4); border:1px solid var(--line);
  overflow:hidden; margin-bottom:var(--sp-2);
}
.meter-fill{
  height:100%; width:0; border-radius:var(--r-pill);
  background:var(--chalk); transition:width var(--dur-slow) var(--ease);
}
.meter.warn .meter-fill{ background:var(--danger); }
@media (prefers-reduced-motion: reduce){
  .meter-fill{ transition:none; }
}