:root {
  color-scheme: light;
  --journal-ink: #29312d;
  --journal-muted: #626a64;
  --journal-paper: #f3efe7;
  --journal-panel: rgb(255 253 248 / 90%);
  --journal-sheet: #fffdf8;
  --journal-line: rgb(66 70 64 / 12%);
  --journal-blue: #557b91;
  --journal-blue-dark: #3e6175;
  --journal-blue-soft: #dfeaec;
  --journal-sage: #8fa695;
  --journal-danger: #914949;
  --journal-shadow: 0 18px 60px rgb(65 60 51 / 8%), 0 2px 10px rgb(65 60 51 / 4%);
  --journal-radius: 1.625rem;
  --journal-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --journal-serif: Georgia, "Times New Roman", serif;
  --journal-safe-top: env(safe-area-inset-top, 0px);
  --journal-safe-right: env(safe-area-inset-right, 0px);
  --journal-safe-bottom: env(safe-area-inset-bottom, 0px);
  --journal-safe-left: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.access-page {
  min-width: 20rem;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding-right: var(--journal-safe-right);
  padding-left: var(--journal-safe-left);
  overflow-x: hidden;
  color: var(--journal-ink);
  background:
    linear-gradient(rgb(255 255 255 / 24%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 20%) 1px, transparent 1px),
    var(--journal-paper);
  background-size: 2.625rem 2.625rem;
  font-family: var(--journal-font);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

button,
input,
textarea { font: inherit; }

button { color: inherit; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: .1875rem solid rgb(85 123 145 / 40%);
  outline-offset: .1875rem;
}

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

.skip-link {
  position: fixed;
  z-index: 100;
  top: .75rem;
  left: .75rem;
  padding: .625rem .875rem;
  transform: translateY(-160%);
  border-radius: .625rem;
  color: #fff;
  background: var(--journal-ink);
  text-decoration: none;
}

.skip-link:focus { transform: translateY(0); }

.access-message {
  width: min(90vw, 34rem);
  margin: 20vh auto 0;
  color: var(--journal-danger);
  text-align: center;
}

.page-glow {
  position: fixed;
  z-index: -1;
  border-radius: 999rem;
  pointer-events: none;
}

.page-glow--one {
  top: -11rem;
  right: 8vw;
  width: 32rem;
  height: 32rem;
  background: radial-gradient(circle, rgb(197 219 223 / 68%), rgb(197 219 223 / 0%));
}

.page-glow--two {
  bottom: -16rem;
  left: -10rem;
  width: 38rem;
  height: 38rem;
  background: radial-gradient(circle, rgb(218 223 204 / 62%), rgb(218 223 204 / 0%));
}

.topbar {
  width: min(calc(100% - 2.5rem), 96rem);
  min-height: calc(6.625rem + var(--journal-safe-top));
  padding-top: var(--journal-safe-top);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .875rem;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-content: center;
  gap: .25rem;
  border: .0625rem solid rgb(255 255 255 / 72%);
  border-radius: 1rem;
  background: rgb(255 253 248 / 66%);
  box-shadow: 0 .625rem 2rem rgb(65 60 51 / 8%);
}

.brand-sun {
  width: .5rem;
  height: .5rem;
  margin: 0 auto .125rem;
  border-radius: 50%;
  background: var(--journal-ink);
}

.brand-line {
  width: 1.5rem;
  height: .125rem;
  border-radius: 1rem;
  background: var(--journal-ink);
}

.brand-line--short { width: 1.0625rem; margin: auto; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 1rem; }
.brand small {
  margin-top: .1875rem;
  color: var(--journal-muted);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.profile-menu-wrap { position: relative; }

.avatar {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: .0625rem solid var(--journal-blue);
  border-radius: 50%;
  color: #fff;
  background: var(--journal-blue);
  font-size: .8125rem;
  font-weight: 700;
  cursor: pointer;
}

.profile-menu {
  position: absolute;
  z-index: 70;
  top: calc(100% + .625rem);
  right: 0;
  width: 11rem;
  padding: .4375rem;
  border: .0625rem solid rgb(255 255 255 / 88%);
  border-radius: 1rem;
  background: rgb(255 253 248 / 98%);
  box-shadow: 0 1.125rem 3.25rem rgb(50 52 48 / 18%);
}

.profile-menu button {
  width: 100%;
  min-height: 2.5rem;
  padding: .625rem .6875rem;
  border: 0;
  border-radius: .625rem;
  background: transparent;
  font-size: .75rem;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.profile-menu button:hover,
.profile-menu button:focus-visible { background: var(--journal-blue-soft); }

.journal-shell {
  width: min(calc(100% - 2.5rem), 96rem);
  min-height: calc(100vh - 8.625rem);
  margin: 0 auto 3rem;
  display: grid;
  grid-template-columns: minmax(14.5rem, 17.5rem) minmax(32.5rem, 1fr) minmax(19.375rem, 23.75rem);
  grid-template-areas: "left editor right";
  align-items: start;
  gap: 1.125rem;
}

.panel {
  border: .0625rem solid rgb(255 255 255 / 80%);
  border-radius: var(--journal-radius);
  background: var(--journal-panel);
  box-shadow: var(--journal-shadow);
}

.side-stack {
  display: grid;
  gap: 1.125rem;
  align-content: start;
  min-width: 0;
}

.side-stack--left { grid-area: left; }
.side-stack--right { grid-area: right; }
.editor-panel { grid-area: editor; }

.journal-eyebrow {
  margin: 0 0 .5rem;
  color: var(--journal-blue);
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.panel h2 { margin: 0; font-size: 1.0625rem; line-height: 1.3; }

.panel-heading-row,
.search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.calendar-panel { padding: 1.375rem; }
.panel-controls { display: flex; gap: .1875rem; }
.panel-controls button,
.date-controls button {
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.panel-controls button {
  width: 1.8125rem;
  height: 1.8125rem;
  border-radius: .5625rem;
  color: var(--journal-muted);
  font-size: 1.3125rem;
}

.panel-controls button:hover:not(:disabled),
.date-controls button:hover:not(:disabled) { background: var(--journal-blue-soft); }
button:disabled { cursor: not-allowed; opacity: .42; }

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .25rem;
}

.calendar-weekdays { margin-top: 1.3125rem; }
.calendar-weekdays span {
  color: #8d928d;
  font-size: .5625rem;
  font-weight: 700;
  text-align: center;
}

.calendar-grid { margin-top: .5rem; }
.calendar-day {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 1.875rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: .0625rem solid transparent;
  border-radius: .5625rem;
  color: var(--journal-muted);
  background: transparent;
  font-size: .6875rem;
  cursor: pointer;
}

.calendar-day:hover:not(:disabled) { background: rgb(85 123 145 / 9%); }
.calendar-day--outside { border-style: dashed; color: #a4aaa5; opacity: .58; }
.calendar-day--today { box-shadow: inset 0 -.125rem var(--journal-sage); }
.calendar-day--selected {
  color: #fff;
  background: var(--journal-blue);
  font-weight: 700;
}

.calendar-day--marked::after {
  content: "";
  position: absolute;
  bottom: .1875rem;
  width: .1875rem;
  height: .1875rem;
  border-radius: 50%;
  background: var(--journal-blue);
}

.calendar-day--selected::after { background: #fff; }

.calendar-legend {
  margin-top: 1.0625rem;
  padding-top: .875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: .0625rem solid var(--journal-line);
  color: var(--journal-muted);
  font-size: .625rem;
}

.calendar-legend span { display: inline-flex; align-items: center; gap: .375rem; }
.calendar-legend i { width: .3125rem; height: .3125rem; border-radius: 50%; background: var(--journal-blue); }
.calendar-legend button,
.text-button {
  padding: 0;
  border: 0;
  color: var(--journal-blue-dark);
  background: transparent;
  font-size: .625rem;
  font-weight: 700;
  cursor: pointer;
}

.month-panel {
  min-height: 11.25rem;
  padding: 1.375rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background: linear-gradient(155deg, rgb(255 253 248 / 94%), rgb(229 236 229 / 86%));
}

.month-panel p:not(.journal-eyebrow):not(.panel-status) {
  margin: .5625rem 0 1rem;
  color: var(--journal-muted);
  font-size: .6875rem;
  line-height: 1.55;
}

.panel-status {
  min-height: 1.25rem;
  margin: .75rem 0 .35rem;
  color: var(--journal-muted);
  font-size: .6875rem;
  line-height: 1.45;
}

.panel-status[data-state="unavailable"],
.panel-status[data-state="forbidden"],
.panel-status[data-state="invalid"],
.panel-status[data-state="limited"] { color: var(--journal-danger); }

.month-rhythm {
  height: 2.375rem;
  display: flex;
  align-items: end;
  gap: .3125rem;
}

.month-rhythm span {
  min-width: .375rem;
  max-width: .625rem;
  height: calc(var(--rhythm-level) * 100%);
  flex: 1;
  border-radius: .5rem;
  background: var(--journal-sage);
}

.editor-panel {
  position: relative;
  min-height: 46.75rem;
  padding: 1.6875rem 2.25rem 1.8125rem;
  display: flex;
  flex-direction: column;
  background: rgb(255 253 248 / 96%);
  box-shadow: 0 1.75rem 5rem rgb(65 60 51 / 11%), 0 .1875rem .75rem rgb(65 60 51 / 5%);
}

.editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.date-controls {
  display: inline-flex;
  align-items: center;
  padding: .25rem;
  border: .0625rem solid var(--journal-line);
  border-radius: .8125rem;
  background: rgb(243 239 231 / 56%);
}

.date-controls button { width: 2rem; height: 1.875rem; border-radius: .5625rem; }
.date-controls .today-button {
  width: auto;
  padding: 0 .5625rem;
  color: var(--journal-muted);
  font-size: .625rem;
  font-weight: 700;
}

.focus-button {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .5rem .625rem;
  border: 0;
  border-radius: .625rem;
  color: var(--journal-muted);
  background: transparent;
  font-size: .625rem;
  font-weight: 700;
  cursor: pointer;
}

.focus-button:hover,
.focus-button[aria-pressed="true"] { color: var(--journal-blue-dark); background: var(--journal-blue-soft); }

.editor-date { margin-top: 3.4375rem; }
.editor-date h1 {
  margin: 0;
  font-family: var(--journal-serif);
  font-size: clamp(2.5rem, 4vw, 4.125rem);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.04;
}

.date-note {
  width: min(100%, 34rem);
  margin-top: 1.125rem;
  padding: .5rem 0 .75rem;
  border: 0;
  border-bottom: .0625rem solid var(--journal-line);
  color: var(--journal-ink);
  background: transparent;
  font-size: .9375rem;
  font-weight: 600;
}

.date-note::placeholder,
#journal-body::placeholder,
.journal-search input::placeholder { color: #959a95; }

#journal-body {
  width: 100%;
  min-height: 24rem;
  margin-top: 2.25rem;
  padding: 0;
  flex: 1;
  resize: vertical;
  border: 0;
  color: var(--journal-ink);
  background: transparent;
  font: 1.125rem/1.85 var(--journal-serif);
  scroll-margin-block: 6rem;
}

.date-note:disabled,
#journal-body:disabled { opacity: .55; }

.editor-footer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  border-top: .0625rem solid var(--journal-line);
}

.entry-meta {
  display: flex;
  gap: .5rem;
  color: var(--journal-muted);
  font-size: .6875rem;
}

.save-feedback { min-width: 9rem; text-align: right; }
.save-feedback p { margin: 0; color: var(--journal-muted); font-size: .6875rem; }
.save-feedback [data-state="failed"],
.save-feedback [data-state="conflict"] { color: var(--journal-danger); }
.journal-actions { margin-top: .5rem; display: flex; justify-content: flex-end; gap: .4rem; }
.journal-actions button,
.history-more {
  min-height: 2.25rem;
  padding: .45rem .7rem;
  border: .0625rem solid var(--journal-line);
  border-radius: .625rem;
  background: var(--journal-sheet);
  font-size: .6875rem;
  cursor: pointer;
}

.prompt-panel {
  min-height: 12.5rem;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .875rem;
  background: linear-gradient(145deg, rgb(223 234 236 / 88%), rgb(255 253 248 / 92%));
}

.prompt-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: .75rem;
  color: var(--journal-blue-dark);
  background: rgb(255 255 255 / 56%);
  font-size: 1.5rem;
}

.prompt-panel .journal-eyebrow { margin-top: .875rem; }
.prompt-panel h2 { font-family: var(--journal-serif); font-size: 1.1875rem; font-weight: 500; }
.prompt-panel .text-button { margin-top: 1rem; }

.search-panel,
.history-panel { padding: 1.375rem; }
.journal-search { margin-top: 1.0625rem; }
.search-row {
  min-height: 2.6875rem;
  padding: 0 .4375rem 0 .75rem;
  border: .0625rem solid var(--journal-line);
  border-radius: .75rem;
  background: rgb(255 255 255 / 48%);
}

.search-row:focus-within { border-color: rgb(85 123 145 / 50%); box-shadow: 0 0 0 .1875rem rgb(85 123 145 / 8%); }
.journal-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--journal-ink); background: transparent; font-size: .75rem; }
.journal-search input { scroll-margin-block: 6rem; }
.journal-search button {
  width: 1.8125rem;
  height: 1.8125rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: .5rem;
  color: var(--journal-blue-dark);
  background: var(--journal-blue-soft);
  cursor: pointer;
}

.history-list { display: grid; gap: .5rem; }
.history-entry {
  width: 100%;
  min-height: 0;
  display: grid;
  padding: .75rem;
  border: .0625rem solid var(--journal-line);
  border-radius: .75rem;
  color: var(--journal-ink);
  background: rgb(255 255 255 / 40%);
  text-align: left;
  cursor: pointer;
}

.history-entry:hover { border-color: rgb(85 123 145 / 48%); background: var(--journal-blue-soft); }
.history-entry__date { color: var(--journal-muted); font-size: .625rem; text-transform: uppercase; }
.history-entry strong { margin-top: .1875rem; font-size: .75rem; }
.history-entry__excerpt {
  display: -webkit-box;
  margin-top: .25rem;
  overflow: hidden;
  color: var(--journal-muted);
  font-size: .6875rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.history-more { width: 100%; margin-top: .75rem; }

.toast {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: 1.75rem;
  max-width: calc(100% - 2rem);
  padding: .625rem 1rem;
  transform: translate(-50%, 1.25rem);
  opacity: 0;
  border-radius: 999rem;
  color: #fff;
  background: var(--journal-ink);
  box-shadow: var(--journal-shadow);
  font-size: .6875rem;
  text-align: center;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.mobile-nav { display: none; }

body.focus-mode .side-stack,
body.focus-mode .mobile-nav { display: none; }

body.focus-mode .journal-shell {
  width: min(53rem, calc(100% - 3rem));
  display: block;
}

body.focus-mode .editor-panel { min-height: calc(100vh - 9.625rem); }

@media (max-width: 77.5rem) {
  .journal-shell {
    grid-template-columns: minmax(13rem, .7fr) minmax(29.375rem, 1.5fr);
    grid-template-areas:
      "left editor"
      "right right";
  }

  .side-stack--right {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .prompt-panel { min-height: 12rem; }
}

@media (max-width: 51.25rem) {
  body.access-page { padding-bottom: calc(5.625rem + var(--journal-safe-bottom)); background-size: 2.25rem 2.25rem; }
  .topbar { width: min(calc(100% - 2rem), 42.5rem); min-height: calc(5.125rem + var(--journal-safe-top)); }
  .brand small { display: none; }
  .brand-mark { width: 2.625rem; height: 2.625rem; }
  .journal-shell {
    width: min(calc(100% - 1.75rem), 42.5rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .editor-panel { width: 100%; min-height: calc(100vh - 11.5rem); order: 1; padding: 1.4375rem; border-radius: 1.5rem; }
  .side-stack--right { width: 100%; order: 2; grid-template-columns: 1fr; }
  .side-stack--left { width: 100%; order: 3; }
  .month-panel { display: none; }
  .editor-date { margin-top: 2.4375rem; }
  .editor-date h1 { font-size: clamp(2.25rem, 11vw, 3.0625rem); }
  #journal-body { min-height: 20.625rem; margin-top: 2.125rem; font-size: 1.1875rem; }
  .editor-footer { align-items: flex-start; flex-direction: column; }
  .save-feedback { min-width: 0; text-align: left; }
  .journal-actions { justify-content: flex-start; }
  .calendar-panel, .prompt-panel, .search-panel, .history-panel { border-radius: 1.375rem; }

  .mobile-nav {
    position: fixed;
    z-index: 60;
    right: calc(.875rem + var(--journal-safe-right));
    bottom: calc(.875rem + var(--journal-safe-bottom));
    left: calc(.875rem + var(--journal-safe-left));
    height: 4rem;
    padding: .375rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: .0625rem solid rgb(255 255 255 / 85%);
    border-radius: 1.25rem;
    background: rgb(255 253 248 / 94%);
    box-shadow: 0 1.125rem 3.4375rem rgb(65 60 51 / 18%);
  }

  .mobile-nav button {
    min-width: 0;
    min-height: 3.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    border: 0;
    border-radius: .875rem;
    color: var(--journal-muted);
    background: transparent;
    font-size: .625rem;
    font-weight: 700;
    cursor: pointer;
  }

  .mobile-nav button.is-active { color: var(--journal-blue-dark); background: var(--journal-blue-soft); }
  .mobile-nav span { font-size: 1rem; }
  body:has(#journal-body:focus) .mobile-nav,
  body:has(.journal-search input:focus) .mobile-nav { display: none; }
  .toast { bottom: calc(5.625rem + var(--journal-safe-bottom)); }
  body.focus-mode { padding-bottom: var(--journal-safe-bottom); }
  body.focus-mode .journal-shell { width: min(calc(100% - 1.75rem), 42.5rem); }
}

@media (max-width: 26.875rem) {
  .brand strong { font-size: .875rem; }
  .editor-toolbar { align-items: flex-start; }
  .editor-date { margin-top: 2.1875rem; }
  .date-note { max-width: 18rem; font-size: .875rem; }
  .date-controls .today-button { padding-inline: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}