/* Family journal styles. Quiet, personal, paper-like. One hand-written sheet. */

:root {
  --paper: #fbf7ee;
  --paper-raised: #ffffff;
  --ink: #26221d;
  --ink-soft: #5f574c;
  --ink-faint: #8a8175;
  --rule: #e6ddcc;
  --accent: #8a5a2b;
  --accent-soft: #b98a52;
  --lock-bg: #efe6d4;
  --shadow: 0 1px 2px rgba(50, 40, 25, 0.06), 0 6px 20px rgba(50, 40, 25, 0.05);
  --serif: "Iowan Old Style", "Palatino Linotype", "Charter", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1c1915;
    --paper-raised: #262119;
    --ink: #ece4d6;
    --ink-soft: #b6ac9c;
    --ink-faint: #8a8175;
    --rule: #37312a;
    --accent: #d6a86a;
    --accent-soft: #b98a52;
    --lock-bg: #322a1e;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.25);
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 1.15rem 5rem;
}

/* Header and navigation */
.site-head {
  max-width: 42rem;
  margin: 0 auto;
  padding: 1.5rem 1.15rem 0.75rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-title {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0;
}

.site-title a {
  color: var(--ink);
  text-decoration: none;
}

.nav {
  display: flex;
  gap: 1.1rem;
  align-items: baseline;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--accent);
}

.nav a.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

a {
  color: var(--accent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.seg:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Date headings, letterspaced small-caps feel */
.day-head {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 2.4rem 0 0.9rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}

.day-head:first-of-type {
  margin-top: 1rem;
}

/* Posts */
.post {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.15rem 1.25rem 1.3rem;
  margin: 0 0 1.1rem;
}

.post-meta {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-faint);
}

.post-author {
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

.post-time {
  color: var(--ink-faint);
}

.lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--lock-bg);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.lock-badge svg {
  width: 0.8em;
  height: 0.8em;
}

.post-body {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.post-body p {
  margin: 0 0 0.75rem;
}

.post-body p:last-child {
  margin-bottom: 0;
}

/* Media */
.media-grid {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.5rem;
}

.media-grid img,
.media-grid video {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  background: var(--rule);
}

.media-grid img {
  cursor: zoom-in;
}

.post-actions {
  margin-top: 0.9rem;
  display: flex;
  gap: 1rem;
  font-family: var(--sans);
  font-size: 0.8rem;
}

.post-actions button {
  background: none;
  border: none;
  padding: 0;
  color: var(--ink-soft);
  cursor: pointer;
  font: inherit;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.post-actions button:hover {
  color: var(--accent);
}

.post-actions .danger:hover {
  color: #b23a3a;
}

/* Forms */
label {
  display: block;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}

textarea,
input[type="text"],
input[type="password"],
input[type="date"] {
  width: 100%;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.75rem 0.85rem;
  transition: border-color 0.15s ease;
}

textarea:focus,
input:focus {
  border-color: var(--accent-soft);
}

textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.55;
}

.field {
  margin-bottom: 1.5rem;
}

.big-textarea {
  min-height: 11rem;
  font-size: 1.2rem;
}

/* Sign in */
.login-wrap {
  max-width: 26rem;
}

/* The door held open for someone we have not met. Deliberately unmistakable:
   if you see this and it is not your first time, you mistyped your name. */
.welcome {
  border: 1.5px solid var(--accent);
  border-left-width: 5px;
  background: color-mix(in srgb, var(--accent) 8%, var(--paper-raised));
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem 0.9rem;
  margin: 0 0 1.5rem;
}

.welcome-lead {
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 1.1rem;
}

.welcome .field:last-of-type {
  margin-bottom: 1rem;
}

.welcome-quiet {
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-faint);
  margin: 0;
}

.welcome-quiet .linkish {
  font-size: inherit;
  color: var(--ink-soft);
}

input.pin-input {
  width: 7.5rem;
  text-align: center;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  font-size: 1.35rem;
}

.pin-row {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.signed-in-as {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}

.linkish {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}

/* Visibility toggle: two large labeled segments */
.vis-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.seg {
  display: block;
  text-align: left;
  background: var(--paper-raised);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.85rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.seg .seg-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  display: block;
  margin-bottom: 0.2rem;
}

.seg .seg-note {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-faint);
  line-height: 1.35;
  display: block;
}

.seg[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--paper-raised));
}

.seg[aria-pressed="true"] .seg-title {
  color: var(--accent);
}

/* Buttons */
.btn {
  font-family: var(--sans);
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  font-weight: 600;
  color: var(--paper-raised);
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  padding: 0.75rem 1.4rem;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.btn:hover {
  background: var(--accent-soft);
}

.btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.btn-quiet {
  background: none;
  color: var(--accent);
  border: 1.5px solid var(--rule);
}

.btn-quiet:hover {
  background: none;
  border-color: var(--accent-soft);
}

.form-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* File picker and upload progress */
.file-picker {
  font-family: var(--sans);
  font-size: 0.9rem;
}

.upload-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  font-family: var(--sans);
  font-size: 0.82rem;
}

.upload-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 0;
  color: var(--ink-soft);
}

.upload-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.progress {
  width: 6rem;
  height: 6px;
  border-radius: 999px;
  background: var(--rule);
  overflow: hidden;
  flex-shrink: 0;
}

.progress > span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.2s ease;
}

.upload-status {
  width: 4.5rem;
  text-align: right;
  flex-shrink: 0;
}

.upload-item.err {
  color: #b23a3a;
}

/* Month calendar on the journal page */
.cal {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.9rem 0.8rem 1rem;
  margin: 0 0 1.8rem;
}

.cal[hidden] {
  display: none;
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.cal-title {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
  text-align: center;
  flex: 1;
}

.cal-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: var(--radius);
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
}

.cal-arrow svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cal-arrow:hover:not(:disabled) {
  color: var(--accent);
}

.cal-arrow:disabled {
  opacity: 0.28;
  cursor: default;
}

.cal-dow,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.15rem;
}

.cal-dow {
  margin-bottom: 0.25rem;
}

.cal-dow span {
  text-align: center;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 0.15rem;
}

/* Every square is a comfortable thumb target on a phone. */
.cal-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: 2.75rem;
  padding: 0.1rem;
  border: 1.5px solid transparent;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1;
  color: var(--ink-faint);
  background: none;
}

.cal-blank {
  min-height: 2.75rem;
}

.cal-empty {
  color: var(--ink-faint);
  opacity: 0.45;
}

.cal-day {
  color: var(--ink-soft);
  cursor: pointer;
  font: inherit;
  font-family: var(--sans);
  font-size: 0.9rem;
  padding: 0.1rem;
}

.cal-day.cal-has {
  color: var(--ink);
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 7%, var(--paper-raised));
}

.cal-day.cal-has:hover {
  background: color-mix(in srgb, var(--accent) 14%, var(--paper-raised));
}

.cal-today {
  border-color: var(--accent);
}

.cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--accent);
}

.cal-dot-blank {
  background: none;
}

.cal-note {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-faint);
  text-align: center;
  margin: 0.8rem 0 0;
}

.cal-note[hidden] {
  display: none;
}

/* Room for the header when the calendar scrolls a day into view, and a short
   glow so the eye lands on the right entry. */
.post {
  scroll-margin-top: 1.2rem;
}

.post.just-jumped {
  border-color: var(--accent);
}

.post:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Home Screen helper: a quiet card on the feed, a permanent note in settings */
.a2hs {
  display: block;
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
  padding: 0.2rem;
  margin: 0 0 1.6rem;
}

.a2hs[hidden] {
  display: none;
}

.a2hs-open {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius);
  padding: 0.75rem 0.85rem;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
}

.a2hs-title {
  display: block;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

.a2hs-note {
  display: block;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin-top: 0.15rem;
}

.a2hs-how {
  padding: 0.2rem 0.85rem 0.6rem;
}

.a2hs-step {
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 0.7rem;
}

.a2hs-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-right: 0.4rem;
  border-radius: 999px;
  background: var(--lock-bg);
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 600;
  vertical-align: -0.25rem;
}

.ios-share {
  width: 1.05rem;
  height: 1.05rem;
  vertical-align: -0.2rem;
  margin-left: 0.15rem;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.a2hs-foot {
  font-family: var(--sans);
  font-size: 0.82rem;
  margin: 0.9rem 0 0.2rem;
}

.a2hs-settings .a2hs-step {
  margin-top: 0.7rem;
}

/* Already on the Home Screen: never ask again. */
@media (display-mode: standalone) {
  .a2hs,
  .a2hs-settings {
    display: none !important;
  }
}

/* Explainers and empty states */
.explainer {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--ink-soft);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  line-height: 1.5;
}

.explainer p {
  margin: 0 0 0.6rem;
}

.explainer p:last-child {
  margin-bottom: 0;
}

.empty {
  text-align: center;
  color: var(--ink-faint);
  font-style: italic;
  padding: 3rem 1rem;
}

.notice {
  font-family: var(--sans);
  font-size: 0.88rem;
  border-radius: var(--radius);
  padding: 0.75rem 0.95rem;
  margin: 1rem 0;
}

.notice.ok {
  background: color-mix(in srgb, var(--accent) 10%, var(--paper-raised));
  color: var(--ink-soft);
}

.notice.bad {
  background: #f6e3e0;
  color: #8a2f2f;
}

@media (prefers-color-scheme: dark) {
  .notice.bad {
    background: #3a2320;
    color: #e6a79f;
  }
}

.lead {
  color: var(--ink-soft);
  font-style: italic;
  margin: 0.2rem 0 1.6rem;
}

.load-more {
  display: block;
  margin: 1.5rem auto 0;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 10, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 50;
  cursor: zoom-out;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.lightbox[hidden] {
  display: none;
}

/* Month heading on the journal page */
.month-head {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 2.6rem 0 1rem;
}

.month-head:first-of-type {
  margin-top: 0.5rem;
}

.foot {
  text-align: center;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-top: 3rem;
}

.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;
}

/* -------------------------------------------------------------------------
   Page transitions

   The only animation in this stylesheet. Moving between pages crossfades
   softly, the way a page turns, using cross-document view transitions. The
   rules below are dropped whole by browsers that do not know them, which
   leaves the instant navigation this site has always had. No JavaScript is
   involved, and none should be.
   ------------------------------------------------------------------------- */

@view-transition {
  navigation: auto;
}

/* One pace for every part of the transition, including the nav group. */
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 200ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-old(root) {
  animation-name: page-fade-out;
  animation-fill-mode: both;
}

::view-transition-new(root) {
  animation-name: page-fade-in;
  animation-fill-mode: both;
}

@keyframes page-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* A few pixels of settle on the way in, no more. */
@keyframes page-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* The nav is lifted out of the crossfade so the chrome holds still while the
   page beneath it changes. The login page has no nav, and that needs no
   special case: with nothing to pair with, it simply fades. */
.nav {
  view-transition-name: family-journal-nav;
}

/* Asked not to move: then nothing moves. */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none;
  }
}