/* today.log — app styles.
   Built on the dbx design system (tokens.css). Faithful recreation of
   Direction C from the design handoff: near-black screen, bone ink, a single
   chartreuse accent, JetBrains Mono, square corners, no shadows. */

/* ---------- baked tweak defaults (the prototype's Tweaks panel) ---------- */
:root {
  --journal-photo-aspect: 1 / 1;            /* forced 1:1 */
  --journal-sentence-font: var(--dbx-font-display);
}

/* ---------- base reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--dbx-bg);
  color: var(--dbx-ink);
  font-family: var(--dbx-font-mono);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
::selection { background: var(--dbx-accent); color: var(--dbx-bg); }
textarea::placeholder { color: var(--dbx-ink-3); opacity: 1; }

/* ---------- motion ---------- */
@keyframes jnl-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes jnl-fade-up {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
@keyframes jnl-develop {
  0%   { filter: brightness(0.12) contrast(2.4) saturate(0.15) sepia(0.35); }
  35%  { filter: brightness(0.4) contrast(1.7) saturate(0.5) sepia(0.2); }
  100% { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important; }
}

/* ---------- screen shell ---------- */
#app { min-height: 100dvh; }
.scr {
  min-height: 100dvh;
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 30px) 22px calc(env(safe-area-inset-bottom) + 30px);
  box-sizing: border-box;
}
.scr--between { justify-content: space-between; }
.scr--center  { justify-content: center; }
.fill { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.fade { animation: jnl-fade-up 0.5s var(--dbx-ease) both; }

/* ---------- atoms ---------- */
.meta {
  font-family: var(--dbx-font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--dbx-ink-3);
}

.cursor {
  display: inline-block;
  width: 0.55em; height: 1.05em;
  background: var(--dbx-accent);
  margin-left: 2px;
  transform: translateY(0.16em);
  animation: jnl-blink 1.1s steps(1) infinite;
}

.row { display: flex; align-items: center; justify-content: space-between; }

/* ghost button — square, hairline, accent on hover/press */
.ghost {
  font-family: var(--dbx-font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--dbx-ink);
  background: transparent;
  border: 1px solid var(--dbx-rule);
  padding: 12px 16px;
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all var(--dbx-speed) var(--dbx-ease);
  -webkit-tap-highlight-color: transparent;
}
.ghost:hover:not([disabled]),
.ghost--accent:not([disabled]) {
  color: var(--dbx-bg);
  background: var(--dbx-accent);
  border-color: var(--dbx-accent);
}
.ghost[disabled] { color: var(--dbx-ink-3); cursor: default; }
.btn-rowg { display: flex; gap: 10px; align-items: stretch; }
.btn-rowg .ghost { flex: 1; }
.ghost--icon { flex: 0 0 auto !important; width: auto; padding: 0 16px; }

/* ---------- welcome ---------- */
.wordmark {
  font-family: var(--dbx-font-mono);
  font-weight: 700;
  font-size: 54px;
  line-height: 0.92;
  letter-spacing: -0.05em;
  color: var(--dbx-ink);
  display: flex; align-items: flex-end;
}
.wordmark .ext { color: var(--dbx-ink-2); font-weight: 500; }
.lede {
  font-size: 13px;
  color: var(--dbx-ink-2);
  line-height: 1.7;
  margin-top: 24px;
  max-width: 28ch;
}

/* ---------- photo ---------- */
.photo {
  width: 100%;
  aspect-ratio: var(--journal-photo-aspect, 1 / 1);
  background: var(--dbx-surface);
  border: 1px dashed var(--dbx-rule);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 0;
}
.photo--solid { border-style: solid; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--develop img { animation: jnl-develop 1.4s var(--dbx-ease) both; }
.photo-empty { font-size: 12.5px; color: var(--dbx-ink-3); }

/* ---------- the line (sentence) ---------- */
.line {
  font-family: var(--journal-sentence-font, var(--dbx-font-display));
  font-weight: 700;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--dbx-ink);
  text-wrap: pretty;
}
textarea.line {
  width: 100%; resize: none;
  background: transparent; border: none; outline: none;
  caret-color: var(--dbx-accent);
  padding: 0;
}

/* ---------- view ---------- */
.linkbtn {
  font-family: var(--dbx-font-mono); font-size: 12px; color: var(--dbx-ink-2);
  background: none; cursor: pointer;
}

/* ---------- days (archive) ---------- */
.crumb { font-family: var(--dbx-font-mono); font-size: 13px; color: var(--dbx-ink-2); }
.crumb .ps1 { color: var(--dbx-accent); margin-right: 6px; }
.daylist { flex: 1; overflow: auto; margin: 14px -2px 0; min-height: 0; }
.day-row {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  padding: 14px 2px; border-top: 1px solid var(--dbx-rule-2);
  background: none; cursor: pointer;
  transition: padding var(--dbx-speed) var(--dbx-ease);
}
.day-row:first-child { border-top: none; }
.day-row:hover { padding-left: 8px; }
.day-stamp {
  font-family: var(--dbx-font-mono); font-size: 11px; line-height: 1.5;
  flex-shrink: 0; width: 52px; white-space: pre-line;
  color: var(--dbx-ink-3); text-transform: uppercase; letter-spacing: 0.04em;
}
.day-row:hover .day-stamp { color: var(--dbx-accent); }
.day-line {
  flex: 1; font-family: var(--dbx-font-mono); font-size: 12.5px; line-height: 1.55;
  color: var(--dbx-ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.day-row:hover .day-line { color: var(--dbx-ink); }
.day-arrow { color: var(--dbx-accent); opacity: 0; transition: opacity var(--dbx-speed); flex-shrink: 0; }
.day-row:hover .day-arrow { opacity: 1; }

/* ---------- edit ---------- */
.charcount { margin-top: 8px; }
.relink {
  align-self: flex-start; margin-top: -6px; font-size: 11px; color: var(--dbx-ink-3);
  font-family: var(--dbx-font-mono); background: none; cursor: pointer;
}
.field-gap { display: flex; flex-direction: column; gap: 16px; }

/* error toast */
.err {
  color: var(--dbx-err); font-family: var(--dbx-font-mono); font-size: 12px;
  margin-top: 12px; min-height: 1em; text-align: center;
}