/* Lifelog's look: black, iA Writer Quattro, green link underlines, rows
   divided by hairlines rather than cards, one column up to 850px. */
@font-face { font-family: Quattro; src: url("/static/fonts/iAWriterQuattroV.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: Quattro; src: url("/static/fonts/iAWriterQuattroV-Italic.ttf") format("truetype"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #000; --text: #f0efec; --link: #45b003; --rule: #ffffff1f; --muted: #f0efec99;
  --error: #ff6b5e; --warn: #e8b43a; --hover: #ffffff14; --field: #111;
  /* Charts */
  --grid: #1a1a1a; --axis: #8a8984;
  --s1: #45b003; --s2: #3987e5; --s3: #d55181; --s-other: #5c5b56;  /* validated all-pairs on black */
  --z1: #2f7405; --z2: #45b003; --z3: #9be061;  /* Lifelog's heatmap greens: easy, moderate, hard */
  --heat-0: #1a1a1a; --heat-1: #1f4a08; --heat-2: #2f7405; --heat-3: #45b003; --heat-4: #9be061;
  --g1: #2f7405; --g2: #45b003; --g3: #9be061;  /* the same greens, for the parts of a stacked bar */
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  max-width: 850px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 48px) 2em;
  background: var(--bg); color: var(--text);
  font-family: Quattro, Charter, "Bitstream Charter", "Sitka Text", Cambria, serif; line-height: 1.45;
}
/* Safari, the one browser with hanging-punctuation, runs the page wider, as in Lifelog. */
@supports (hanging-punctuation: first) and (-webkit-appearance: none) { body { max-width: 1400px; padding-left: 36px; padding-right: 36px; } }

a { color: inherit; text-decoration-color: var(--link); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
h1 { font-size: 1.2em; margin: 16px 0; }
h2 { font-size: 1.1em; margin: 32px 0 16px; padding-bottom: 0.3em; border-bottom: 1px dotted var(--text); }
h3 { font-size: 1em; margin: 1em 0 0; }
p { margin: 0.6em 0; }
.muted, .note { color: var(--muted); }
.small, .note { font-size: 0.8em; }
.ok { color: var(--link); }
.fair { color: var(--warn); }
.poor, .error { color: var(--error); }
.material-symbols-outlined { font-size: 1.2em; align-self: center; font-variation-settings: "opsz" 20; }

/* Header: home on the left, the sections on the right; it stays at the top. */
header.site { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 0 1em; align-items: baseline;
  justify-content: space-between; margin: 0 0 0.5em; padding: 1em 0; background: var(--bg); box-shadow: -1em 0 0 var(--bg), 1em 0 0 var(--bg); }
@supports (hanging-punctuation: first) and (-webkit-appearance: none) { header.site { padding-top: 0.5em; } }
header.site .home { margin: 0; font-size: 1.35em; font-weight: 700; }
header.site .home a { text-decoration: none; }
header.site .home a:hover, header.site .home a[aria-current] { color: var(--link); }
/* Noto's outline 🧏, stepping back to line up with the content below, with a
   little room before the word. Left on the baseline, the bottom of its face
   sits level with the bottom of COACH's letters; the hand hangs below. */
header.site .home .emoji { font-family: "Noto Emoji"; font-weight: 400; color: var(--text); margin: 0 0.25em 0 -0.044em; }
header.site nav { color: var(--muted); display: flex; gap: 0.4em; align-items: baseline; flex-wrap: wrap; }
header.site nav a { color: var(--text); }
header.site nav a[aria-current] { font-weight: 700; }
footer.site { margin-top: 3em; padding-top: 0.5em; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.9em; display: flex; gap: 1em; justify-content: space-between; flex-wrap: wrap; }
footer.site form { margin: 0; display: inline; }
footer.site nav.links { display: flex; gap: 0.4em; align-items: baseline; }
footer.site nav.links a { color: var(--text); }
footer.site nav.links a[aria-current] { font-weight: 700; }

/* Rows */
ul.rows { list-style: none; padding: 0; margin: 0; }
ul.rows li { display: flex; flex-wrap: wrap; gap: 0.5em; align-items: baseline; padding: 0.4em 0; border-bottom: 1px solid var(--rule); }
ul.rows li:hover { background: var(--hover); box-shadow: -0.5em 0 0 var(--hover), 0.5em 0 0 var(--hover); }
ul.rows li > .material-symbols-outlined { align-self: flex-start; line-height: calc(1.45 / 1.2); }
ul.rows li .what { flex: 1; min-width: 0; }
ul.rows li .n { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Buttons and fields */
button, .button { font: inherit; color: #000; background: var(--link); border: 0; border-radius: 6px; padding: 0.35em 1.1em; font-weight: 600; cursor: pointer; }
button:disabled { opacity: 0.4; cursor: default; }
button.linkish { color: inherit; background: none; border: 0; padding: 0; font-weight: inherit; text-decoration: underline var(--link); text-underline-offset: 0.2em; }
button.linkish:hover { text-decoration-thickness: 2px; }
input, textarea { font: inherit; color: var(--text); background: var(--field); border: 1px solid var(--rule); border-radius: 6px; padding: 0.4em 0.6em; width: 100%; }
input:focus, textarea:focus { outline: none; border-color: var(--link); }
input[type="file"] { padding: 0.5em; }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 1em; color: var(--muted); margin-top: 0.75em; }
.narrow { max-width: 340px; margin: 3em auto; }

/* Dashboard */
.status { color: var(--muted); margin: 0 0 1em; }
.status strong { color: var(--warn); font-weight: 600; }
.status.data-span { margin: 2em 0 0; font-size: 0.9em; }
.range-switch { display: flex; gap: 0.8em; margin: 1.5em 0 0; }
.range-switch a { color: var(--muted); text-decoration: none; }
.range-switch a:hover { color: var(--text); }
.range-switch a[aria-current] { color: var(--text); font-weight: 700; }
.cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 0 2em; }
figure { margin: 0 0 1em; min-width: 0; }
figcaption h3 { margin: 0.5em 0 0; }
.legend { display: flex; flex-wrap: wrap; gap: 0.25em 0.9em; margin: 0.2em 0 0; color: var(--muted); font-size: 0.8em; }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }
.empty { color: var(--muted); font-size: 0.9em; margin: 1em 0 1.5em; }

svg.chart { display: block; width: 100%; height: auto; margin: 0.5em 0 0.25em; }
.chart .axis-label { fill: var(--axis); font-size: 13px; font-family: inherit; font-variant-numeric: tabular-nums; }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .baseline { stroke: var(--axis); stroke-width: 1; }
/* As in Lifelog: a goal is a solid blue line across, a trend a dashed gray one. */
.chart .goal { stroke: var(--s2); stroke-width: 1.5; }
.chart .fit { stroke: var(--axis); stroke-width: 1.5; stroke-dasharray: 5 4; pointer-events: none; }
.chart .goal-label { fill: var(--axis); font-size: 12px; font-family: inherit; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { stroke: var(--bg); stroke-width: 2; }
.chart .hit { fill: transparent; }
.chart .hit:hover, .chart .hit.on { fill: var(--hover); }
path.s1, .dot.s1, .key.s1 { fill: var(--s1); background: var(--s1); }
path.s2, .dot.s2, .key.s2 { fill: var(--s2); background: var(--s2); }
path.s3, .dot.s3, .key.s3 { fill: var(--s3); background: var(--s3); }
path.s-other, .key.s-other { fill: var(--s-other); background: var(--s-other); }
path.g1, .key.g1 { fill: var(--g1); background: var(--g1); }
path.g2, .key.g2 { fill: var(--g2); background: var(--g2); }
path.g3, .key.g3 { fill: var(--g3); background: var(--g3); }
path.z1, .key.z1 { fill: var(--z1); background: var(--z1); }
path.z2, .key.z2 { fill: var(--z2); background: var(--z2); }
path.z3, .key.z3 { fill: var(--z3); background: var(--z3); }
.line.s1 { stroke: var(--s1); }

/* Lifelog's calendar: its five greens, scrolling sideways on a phone. */
.scroll-x { overflow-x: auto; margin: 0 0 1em; }
/* The year's calendar shrinks to fit down to 600px wide (an iPad mini held
   upright fits); narrower, it scrolls, starting at the latest weeks. */
svg.chart.heatmap { min-width: 600px; margin: 0; }
.heatmap .axis-label { font-size: 12px; }
.cell.l0 { fill: var(--heat-0); } .cell.l1 { fill: var(--heat-1); } .cell.l2 { fill: var(--heat-2); }
.cell.l3 { fill: var(--heat-3); } .cell.l4 { fill: var(--heat-4); }
/* Scores diverge from a gray 0 (not the empty cell's near-black, which is a
   day left blank): magenta below, green above, brighter further out. */
.cell.v-none { fill: var(--heat-0); }
.cell.v-n2 { fill: #e8709f; } .cell.v-n1 { fill: #a0456b; } .cell.v-0 { fill: #3d3c39; }
.cell.v-p1 { fill: #3d8a0c; } .cell.v-p2 { fill: #74c22f; }
.scroll-x.life-heat { margin-bottom: 1.25em; }
.heatmap .cell:hover { stroke: var(--text); stroke-width: 1.5; }

#tip { position: fixed; z-index: 10; pointer-events: none; max-width: 300px; padding: 0.35em 0.6em; border-radius: 6px;
  background: #111; border: 1px solid var(--rule); color: var(--text); font-size: 0.85em; line-height: 1.35; box-shadow: 0 4px 24px #000a; }

/* Life: the day's entry, everything a tap or a few words. */
.life { margin: 0 0 1.5em; }
.day-nav { display: flex; align-items: baseline; gap: 0.4em; margin: 0.75em 0 0.9em; }
.day-nav h1 { margin: 0 0.35em 0 0; flex: 0 1 auto; }
.day-nav a, .day-nav .off { font-size: 1.4em; line-height: 1; text-decoration: none; padding: 0 0.2em; }
.day-nav a:hover { color: var(--link); }
.day-nav .off { color: var(--rule); }
.where { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.25em; margin: 0 0 0.45em; line-height: 1.6; }
.where input { width: auto; max-width: 100%; padding: 0.05em 0.3em; margin-left: -0.3em; border-color: transparent;
  background: none; font-weight: 600; }
.where input:hover { border-color: var(--rule); }
.where input:focus { border-color: var(--link); background: var(--field); }
.where .place-note { font-size: 0.85em; }
.where .ruler { position: absolute; visibility: hidden; white-space: pre; font-weight: 600; }
.context { margin: 0 0 1.6em; font-size: 0.9em; line-height: 1.6; }
.score { display: flex; align-items: center; gap: 0.45em; margin: 0 0 0.75em; }
.score-label { width: 4.2em; color: var(--muted); }
.score button, .chip { font: inherit; font-weight: 400; color: var(--text); background: none; border: 1px solid var(--rule);
  border-radius: 6px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.score button { min-width: 2.75em; padding: 0.3em 0; font-variant-numeric: tabular-nums; }
.score button:hover, .chip:hover { border-color: var(--link); }
.score button[aria-pressed="true"], .chip[aria-pressed="true"] { color: #000; background: var(--link); border-color: var(--link); font-weight: 600; }
.life textarea { margin: 0.9em 0 1em; min-height: 4.5em; resize: none; overflow: hidden; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4em; }
.chip { padding: 0.2em 0.65em; font-size: 0.9em; border-radius: 999px; }
.saved { min-height: 1.45em; margin: 0.6em 0 0; font-size: 0.85em; text-align: right; }
ul.days li { padding: 0; }
/* One line a day: the text, then the tags, cut short with … when they don't fit. */
ul.days li a { display: flex; gap: 0.75em; align-items: baseline; padding: 0.4em 0; text-decoration: none; white-space: nowrap; }
ul.days li.here { background: var(--hover); box-shadow: -0.5em 0 0 var(--hover), 0.5em 0 0 var(--hover); }
ul.days .when { flex: none; min-width: 6.2em; color: var(--muted); }
ul.days .scores { flex: none; min-width: 4.2em; font-variant-numeric: tabular-nums; }
ul.days .gist, ul.days .tags { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
ul.days .gist { flex: 1 1 auto; }
ul.days .tags { flex: 0 1 auto; max-width: 35%; font-size: 0.85em; }
@media (max-width: 480px) { .score button { min-width: 0; flex: 1; } .score-label { width: 3.6em; } }

/* Coach */
.coach-bar { position: sticky; top: var(--header-height, 3.5em); z-index: 1; display: flex; flex-wrap: wrap; gap: 0 1em; justify-content: space-between;
  padding: 0 0 0.5em; margin-bottom: 1em; border-bottom: 1px solid var(--rule); color: var(--muted); background: var(--bg); box-shadow: -1em 0 0 var(--bg), 1em 0 0 var(--bg); }
.coach-bar a { color: var(--text); }
.coach-bar a[aria-current] { font-weight: 700; }
.coach-page { display: flex; flex-direction: column; min-height: calc(100dvh - 6em); }
.chat { flex: 1; margin: 0 0 0.5em; }
.msg { margin: 0 0 1.1em; }
.msg .who { color: var(--muted); font-size: 0.85em; margin: 0 0 0.2em; }
.msg p { margin: 0 0 0.6em; }
.msg .text ul, .msg .text ol { padding-left: 1.2em; }
.msg.you .text { white-space: pre-wrap; color: var(--link); }
.msg.coach.thinking .text::after { content: "…"; display: inline-block; width: 0; overflow: hidden; vertical-align: bottom; color: var(--muted); animation: coach-dots 1.2s steps(4, jump-none) infinite; }
.msg.coach.pending .text { white-space: pre-wrap; }
@keyframes coach-dots { to { width: 1.1em; } }
.intro { color: var(--muted); }
.compose { position: sticky; bottom: 0; z-index: 1; margin: 0; padding: 0.75em 0 1em; background: var(--bg); box-shadow: -1em 0 0 var(--bg), 1em 0 0 var(--bg); }
.compose textarea { min-height: 3.5em; resize: vertical; }
.notes { font-size: 0.9em; min-height: 60vh; }

/* Goals */
.goals { display: grid; grid-template-columns: 1fr 7em auto; gap: 0.5em 1em; align-items: baseline; margin: 1.5em 0 1em; }
.goals input { padding: 0.25em 0.5em; text-align: right; border-radius: 4px; }
.goals .unit { color: var(--muted); }
@media (max-width: 480px) { .goals { grid-template-columns: 1fr 6em; } .goals .unit { display: none; } }

code { font-size: 0.85em; background: var(--field); padding: 0.1em 0.35em; border-radius: 4px; word-break: break-all; }
details summary { cursor: pointer; }