/* Literata is served from the journal's own domain (no Google Fonts: they're
   blocked in some places and slow the first paint). Chinese uses the device's
   own serif: Songti on Apple devices. Literata: SIL Open Font License, see /fonts/OFL.txt. */
@font-face {
  font-family: "Literata";
  src: url("/fonts/literata-roman.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: "Literata";
  src: url("/fonts/literata-italic.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: fallback;
}

/* One column at reading width; the page starts a little below the top like a
   notebook; the controls sit at the bottom edge and step aside while you write. */
:root {
  --paper: #F1F2EE;   /* cool, slightly green notebook paper */
  --sheet: #F8F9F6;   /* raised surfaces: the menu */
  --ink: #1C2127;     /* blue-black writing ink */
  --pencil: #7A8078;  /* quiet words: date, controls */
  --rule: #D8DBD3;    /* hairlines */
  --pen: #2C4F86;     /* fountain-pen blue: caret, selection, focus */
  --serif: "Literata", "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "Noto Serif SC", Georgia, serif;
  --size: clamp(18px, 16px + 0.45vw, 21px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121519; --sheet: #1A1E23; --ink: #D9DBD4; --pencil: #878D85; --rule: #2B3036; --pen: #93ADDA;
    color-scheme: dark;
  }
}
/* The Test version wears a cooler paper, so it never passes for Daily. */
html.env-test { --paper: #EEF0F3; --sheet: #F7F8FA; }
@media (prefers-color-scheme: dark) { html.env-test { --paper: #11151C; --sheet: #191E26; } }

[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

.shell {
  min-height: 100%;
  box-sizing: border-box;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: clamp(32px, 13vh, 132px) 45vh;
  cursor: text;
}
.column { max-width: 33em; margin: 0 auto; font-size: var(--size); }

.dateline {
  margin: 0 0 2.4em;
  font-style: italic;
  font-size: 0.78em;
  color: var(--pencil);
  font-variant-numeric: oldstyle-nums;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6em;
  cursor: default;
}
.dateline .begun:empty { display: none; }
.envmark { font-style: normal; letter-spacing: 0.08em; font-size: 0.85em; }


/* A day's pieces, separated by a small time mark. */
.piece + .piece { margin-top: 2.2em; }
.stamp {
  margin: 0 0 0.9em;
  font-style: italic; font-size: 0.72em;
  color: var(--pencil);
  font-variant-numeric: oldstyle-nums;
  cursor: default;
}
.stamp:empty { display: none; }

.page {
  outline: none;
  min-height: 1.6em;
  line-height: 1.62;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -webkit-hyphens: auto; hyphens: auto;
  hanging-punctuation: first allow-end;
  text-wrap: pretty;
  overflow-wrap: break-word;
  caret-color: var(--pen);
}
.piece:last-child .page { min-height: 30vh; }
.page > :is(p, div) { margin: 0; }
.page > :is(p, div) + :is(p, div) { margin-top: 0.85em; }
::selection { background: color-mix(in srgb, var(--pen) 24%, transparent); }

/* Controls along the bottom edge. */
.chrome {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px max(16px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  font-size: 15px;
  color: var(--pencil);
  background: linear-gradient(to top, var(--paper) 55%, color-mix(in srgb, var(--paper) 0%, transparent));
  transition: opacity 0.5s ease;
}
body.writing .chrome { opacity: 0; pointer-events: none; }
.sides { display: flex; align-items: baseline; gap: 0.5em; }
.sides span { opacity: 0.6; }
button {
  font: inherit; color: inherit; background: none; border: 0; padding: 6px 2px; cursor: pointer;
  border-radius: 4px;
}
button:hover { color: var(--ink); }
button:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; }
button[aria-pressed="true"] { color: var(--ink); }
button:disabled { opacity: 0.55; cursor: default; }
button:disabled:hover { color: inherit; }
.right { display: flex; align-items: center; gap: 14px; }
#status { font-style: italic; font-size: 14px; opacity: 0; transition: opacity 0.4s; }
#status.on { opacity: 1; }
#more { letter-spacing: 0.18em; font-size: 18px; line-height: 1; padding: 6px 4px; }

/* The menu sheet. */
.sheet {
  position: fixed; z-index: 20;
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  width: min(360px, calc(100vw - 24px));
  max-height: calc(100% - 120px); overflow: auto;
  box-sizing: border-box;
  background: var(--sheet);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 8px;
  font-size: 16px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 10%, transparent);
}
.menu { display: flex; flex-direction: column; }
.menu button { text-align: left; padding: 10px 12px; color: var(--ink); }
.menu button:hover { background: color-mix(in srgb, var(--pen) 8%, transparent); }
.menu small { display: block; color: var(--pencil); font-size: 13px; font-style: italic; margin-top: 2px; }
.panel { padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 12px; }
.panel h2 { font-size: 17px; font-weight: 600; margin: 4px 0 0; text-wrap: balance; }
.panel textarea {
  font: inherit; font-size: 16px; line-height: 1.5; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 8px;
  padding: 10px 12px; min-height: 96px; resize: vertical;
}
.panel textarea:focus { outline: 2px solid var(--pen); outline-offset: -1px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.solid { background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 6px; font-size: 15px; }
.solid:hover { color: var(--paper); opacity: 0.9; }
.quiet { color: var(--pencil); font-size: 15px; }
.notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.notes li { border-top: 1px solid var(--rule); padding-top: 10px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.notes time { display: block; color: var(--pencil); font-size: 13px; font-style: italic; margin-bottom: 2px; }
.notes .empty { color: var(--pencil); font-style: italic; font-size: 14px; border: 0; }

/* First sign-in on a device. */
.gate {
  min-height: 100%;
  display: grid; place-items: center;
  padding: max(24px, env(safe-area-inset-top, 0px)) 16px max(24px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}
.gate-card { width: min(360px, 100%); display: flex; flex-direction: column; gap: 14px; }
.gate h1 { font-size: 28px; font-weight: 400; margin: 0; }
.gate p { margin: 0; line-height: 1.5; font-size: 17px; }
.gate-env { color: var(--pencil); font-style: italic; font-size: 15px !important; }
.gate label { font-size: 14px; color: var(--pencil); margin-top: 6px; display: block; }
.gate input {
  font: inherit; font-size: 17px; color: var(--ink);
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px;
  width: 100%; box-sizing: border-box; margin-top: 6px;
}
.gate input:focus { outline: 2px solid var(--pen); outline-offset: -1px; }
.gate .solid { align-self: flex-start; margin-top: 10px; font-size: 16px; padding: 10px 16px; }
.gate-error { color: #A13D2D; font-size: 15px !important; min-height: 1.5em; }
@media (prefers-color-scheme: dark) { .gate-error { color: #E3907E; } }

@media (prefers-reduced-motion: reduce) {
  .chrome, #status { transition: none; }
}