/* Portolan — Chart's colour (warm paper, deep blue; near-black and light blue in the dark),
   Trail's type (a humanist sans; Manrope/Nunito Sans when installed, the system stack otherwise). */
:root {
  --ink: #1c2530; --muted: #5c6b7a; --line: #d8dee6; --accent: #1f3a5f; --accent-ink: #fff;
  --paper: #f7f3ec; --card: #fffdf9; --bad: #a12b2b; --bad-bg: #fff3f3; --bad-line: #f0c9c9;
  --mark: #ffe3a0; --mark-ink: #4a3300; --code: #ece7de;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e8ecf1; --muted: #9fb0c2; --line: #2b3542; --accent: #8fb8ff; --accent-ink: #0b1220;
    --paper: #0f141a; --card: #171e27; --bad: #ff9c9c; --bad-bg: #2a1616; --bad-line: #5a2a2a;
    --mark: #6b4e00; --mark-ink: #ffe3a0; --code: #232c37;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #e8ecf1; --muted: #9fb0c2; --line: #2b3542; --accent: #8fb8ff; --accent-ink: #0b1220;
  --paper: #0f141a; --card: #171e27; --bad: #ff9c9c; --bad-bg: #2a1616; --bad-line: #5a2a2a;
  --mark: #6b4e00; --mark-ink: #ffe3a0; --code: #232c37;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 "Nunito Sans", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--paper); }
h1, h2, h3, .brand, button { font-family: "Manrope", "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
header.top { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; padding: .6rem 1rem; background: var(--accent); color: var(--accent-ink); }
header.top a, header.top .who { color: inherit; }
header.top .brand { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; letter-spacing: .01em; text-decoration: none; font-size: 1.15rem; }
nav[aria-label="Account"] { display: flex; gap: .9rem; align-items: center; margin-left: auto; flex-wrap: wrap; }
nav[aria-label="Account"] button, .theme button { background: transparent; color: inherit; border: 1px solid currentColor; opacity: .85; }
.theme { display: flex; gap: .25rem; }
.theme button { padding: .2rem .5rem; font-size: .8rem; border-radius: .35rem; }
.theme button[aria-pressed="true"] { opacity: 1; background: var(--accent-ink); color: var(--accent); }
main { max-width: 46rem; margin: 0 auto; padding: 1rem 1rem 5rem; }
footer { text-align: center; color: var(--muted); padding: 1rem; }
h1 { font-size: 1.7rem; margin: .5rem 0 .25rem; font-weight: 800; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; font-weight: 700; }
h2 small { color: var(--muted); font-weight: 400; }
h3 { font-size: 1rem; margin: .5rem 0; }
.lede, .meta, .hint, .empty, small { color: var(--muted); }
a { color: var(--accent); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: .75rem; padding: 1rem; margin: .75rem 0; }
form label { display: block; margin: .75rem 0 .25rem; font-weight: 700; }
form input, form textarea { display: block; width: 100%; margin: 0 0 .25rem; padding: .6rem .65rem; font: inherit; font-weight: 400; border: 1px solid var(--line); border-radius: .5rem; background: var(--card); color: var(--ink); }
form input:focus, form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
form fieldset { border: 1px dashed var(--line); border-radius: .5rem; padding: .5rem .75rem; margin: .75rem 0; }
form legend { font-weight: 700; padding: 0 .25rem; }
button { font: inherit; font-weight: 700; padding: .6rem 1rem; border-radius: .5rem; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); cursor: pointer; }
button:hover { filter: brightness(1.08); }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.inline { display: inline; }
.inline button { padding: .3rem .6rem; background: transparent; color: var(--accent); }
.error { color: var(--bad); background: var(--bad-bg); border: 1px solid var(--bad-line); border-radius: .5rem; padding: .5rem .75rem; }
ul.trips, ul.travelers, ol.captures, ul.tokens { list-style: none; padding: 0; margin: 0; }
ul.trips li, ul.tokens li { padding: .5rem 0; border-bottom: 1px solid var(--line); display: flex; gap: .75rem; align-items: baseline; flex-wrap: wrap; }
ul.travelers li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
ul.travelers .name { font-weight: 700; }
ol.captures li.capture { background: var(--card); border: 1px solid var(--line); border-radius: .75rem; padding: .75rem 1rem; margin: .5rem 0; }
.capture .page { word-break: break-all; font-weight: 700; }
.capture .text { margin: .4rem 0; white-space: pre-wrap; }
.capture .note { margin: .4rem 0; color: var(--muted); font-style: italic; white-space: pre-wrap; }
.capture .meta { margin: .25rem 0 0; font-size: .9rem; }
mark.proposed { background: var(--mark); color: var(--mark-ink); border-radius: .3rem; padding: 0 .4rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.fresh input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
code { background: var(--code); padding: .1rem .3rem; border-radius: .3rem; word-break: break-all; }
#status:empty { display: none; }
#status { margin-top: .75rem; }

/* Phone: capture stays within thumb reach — the capture card is first and the page is one column. */
@media (max-width: 40rem) {
  header.top { padding: .5rem .75rem; }
  nav[aria-label="Account"] .who small { display: none; }
  main { padding: .75rem .75rem 5rem; }
  h1 { font-size: 1.45rem; }
  button { width: 100%; }
  .inline button, .theme button, nav[aria-label="Account"] button { width: auto; }
}
/* Desktop: the trip page as two columns — capture and travelers beside the captures. */
@media (min-width: 64rem) {
  main.trip { max-width: 72rem; display: grid; grid-template-columns: minmax(20rem, 26rem) 1fr; gap: 0 2rem; align-items: start; }
  main.trip > h1, main.trip > .meta, main.trip > .error { grid-column: 1 / -1; }
  main.trip > section.captures-section { grid-column: 2; grid-row: 3 / span 2; }
  main.trip > section.capture-first { position: sticky; top: 1rem; }
}