@font-face { font-family: Quattro; src: url(fonts/iAWriterQuattroS-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Quattro; src: url(fonts/iAWriterQuattroS-Italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --bg: #f6f3ed;
  --fg: #2a2724;
  --muted: #9a938a;
  --accent: #b4532a;
  --size: 1.25rem;
  --leading: 1.65;
  --measure: 34rem;
  --gutter: 1.25rem;
  color-scheme: light;
}
:root[data-theme="dark"] { --bg: #191817; --fg: #e4dfd6; --muted: #6f6961; color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #191817; --fg: #e4dfd6; --muted: #6f6961; color-scheme: dark; }
}
@media (min-width: 900px) { :root { --size: 1.4rem; } }

html { background: var(--bg); color: var(--fg); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: var(--size) / var(--leading) Quattro, Georgia, serif; }

#page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: calc(50vh - 0.5lh) var(--gutter) 50vh;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
#sheet { position: relative; }

#input, #measure {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0; padding: 0; border: 0;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  hyphens: none;
}
#input {
  background: transparent;
  color: inherit;
  resize: none;
  outline: none;
  overflow: hidden;
  min-height: 1lh;
  caret-color: var(--accent);
}
#input::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }
#measure { position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none; }

/* Draft mode: everything above the current line fades out. */
#fade {
  position: fixed; left: 0; right: 0; top: 0;
  height: calc(50vh - 1lh);
  pointer-events: none;
  background: linear-gradient(var(--bg) 35%, transparent 100%);
  opacity: 0; transition: opacity 0.6s;
}
body.draft #fade { opacity: 1; }
body.draft #input { caret-color: var(--fg); }

#status {
  position: fixed; right: 1rem; bottom: 1rem;
  font-size: 0.8rem; color: var(--muted);
  opacity: 0; transition: opacity 0.4s;
  pointer-events: none;
}
#status.on { opacity: 1; }
#progress {
  position: fixed; left: max(1rem, env(safe-area-inset-left)); bottom: 1rem;
  font-size: 0.8rem; color: var(--muted); opacity: 0.7;
  pointer-events: none; font-variant-numeric: tabular-nums;
}
body.list #progress, #progress:empty { display: none; }

dialog {
  outline: none;
  border: 0; border-radius: 6px; padding: 1.5rem 2rem;
  background: var(--bg); color: var(--fg);
  font-size: 1rem; max-width: 22rem;
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.25);
}
dialog::backdrop { background: rgb(0 0 0 / 0.25); }
dialog h2 { margin: 0 0 1rem; font-size: 1rem; font-weight: 400; color: var(--muted); }
dialog dl { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.2rem; margin: 0; }
dialog dt { white-space: nowrap; }
dialog dd { margin: 0; }
dialog .hint { color: var(--muted); font-size: 0.85rem; margin: 1.2rem 0 0; }

/* Goal progress: a hairline along the bottom edge. */
#goal {
  position: fixed; left: 0; bottom: 0; height: 2px;
  width: calc(var(--p, 0) * 100%);
  background: var(--muted);
  opacity: 0; transition: width 1s linear, opacity 0.6s, background 0.6s;
  pointer-events: none;
}
#goal.on { opacity: 0.6; }
#goal.done { background: var(--accent); opacity: 1; }

/* Start screen */
dialog fieldset { border: 0; padding: 0; margin: 0 0 1.2rem; display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; }
dialog legend { color: var(--muted); font-size: 0.85rem; padding: 0; margin-bottom: 0.4rem; width: 100%; }
dialog label { cursor: pointer; }
dialog input[type="radio"] { appearance: none; margin: 0; width: 0; height: 0; }
dialog label:has(input[type="radio"]) { color: var(--muted); }
dialog label:has(input[type="radio"]:checked) { color: var(--fg); }
dialog label:has(:focus-visible) { text-decoration: underline; text-underline-offset: 0.3em; }
dialog kbd { font: inherit; font-size: 0.7rem; color: var(--muted); margin-left: 0.2em; }
#goal-row:not([hidden]) { display: flex; align-items: baseline; gap: 0.6rem; margin: -0.6rem 0 1.2rem; color: var(--muted); }
#goal-row input { font: inherit; color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--muted); outline: none; width: 5rem; padding: 0.2rem 0; text-align: right; }
#title-row:not([hidden]) { display: block; margin: -0.6rem 0 1.2rem; color: var(--muted); }
#title-row input { font: inherit; color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--muted); outline: none; width: 100%; margin-top: 0.3rem; padding: 0.2rem 0; }
dialog button { font: inherit; background: var(--fg); color: var(--bg); border: 0; border-radius: 4px; padding: 0.4rem 1rem; cursor: pointer; }
dialog button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* List page */
body.list #page, body.list #fade, body.list #goal { display: none; }
#list { display: none; }
body.list #list { display: block; max-width: var(--measure); margin: 0 auto; padding: max(1.5rem, env(safe-area-inset-top)) var(--gutter) 4rem; font-size: 1rem; }
#list header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.5rem; }
#list nav { display: flex; gap: 1.5rem; }
#list nav button { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); cursor: pointer; }
#list nav button[aria-selected="true"] { color: var(--fg); }
#list kbd { font: inherit; font-size: 0.7rem; color: var(--muted); margin-left: 0.2em; }
#list-new { font: inherit; background: var(--fg); color: var(--bg); border: 0; border-radius: 4px; padding: 0.3rem 0.8rem; cursor: pointer; }
#list-rows { display: flex; flex-direction: column; }
#list .row { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 1rem; text-align: left; font: inherit; color: var(--fg); background: none; border: 0; border-top: 1px solid color-mix(in srgb, var(--muted) 30%, transparent); padding: 0.9rem 0.2rem; cursor: pointer; }
#list .row:focus-visible { outline: none; background: color-mix(in srgb, var(--fg) 6%, transparent); }
#list .row .meta { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
#list .row .snippet { grid-column: 1 / -1; color: var(--muted); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#list .empty { color: var(--muted); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Sync settings */
#setup { width: min(26rem, 90vw); }
#setup .field { display: block; color: var(--muted); margin-bottom: 1rem; }
#setup .field input { display: block; width: 100%; box-sizing: border-box; font: inherit; color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--muted); outline: none; padding: 0.2rem 0; margin-top: 0.2rem; }
#setup .row { display: flex; gap: 0.8rem; margin-top: 1rem; }
#setup .row button[type="button"] { background: none; color: var(--fg); border: 1px solid var(--muted); }
#sync-status:empty { display: none; }

/* Touch menu: only on screens without a pointer that hovers. */
#menu-button {
  display: none;
  position: fixed; right: max(0.5rem, env(safe-area-inset-right)); top: max(0.5rem, env(safe-area-inset-top));
  background: none; border: 0; color: var(--muted); opacity: 0.5;
  font: inherit; font-size: 1.2rem; padding: 0.4rem 0.8rem; cursor: pointer;
}
@media (hover: none) { #menu-button { display: block; } }
#menu { padding: 0.8rem 0; min-width: 14rem; }
#menu[open] { display: flex; flex-direction: column; }
#menu button { background: none; color: var(--fg); text-align: left; border-radius: 0; padding: 0.7rem 1.5rem; }
#menu button:active { background: color-mix(in srgb, var(--fg) 8%, transparent); }