:root {
  --bg: #14161b;
  --panel: #1c1f27;
  --panel-2: #232733;
  --line: #2d3340;
  --text: #eef0f4;
  --muted: #9aa3b2;
  --accent: #ff9e80;        /* warm peach/coral */
  --accent-soft: #ffb59e;
  --accent-ink: #2a1410;    /* readable text on the peach */
  --left: #ffb59e;          /* gentle distinct tints per side */
  --right: #a0d8c5;
  --error: #ff8a8a;
  --radius: 16px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
}

/* App shell: lock the page so there's no rubber-band / page scroll — it feels
   native. Scrolling happens *inside* <main> (the log book can grow), with
   overscroll contained so it never bounces the whole app. */
body:not(.centered) {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  overscroll-behavior: none;
  padding-top: env(safe-area-inset-top);
}

body.centered {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  overscroll-behavior: none;
}

h1 { margin: .25rem 0; font-size: 2rem; letter-spacing: -.02em; }
h2 { margin: 0 0 .9rem; font-size: 1.05rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.error { color: var(--error); margin: .25rem 0 0; }

/* ---- Layout ---- */
.topbar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  width: 100%; max-width: 560px;
}
.brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.25rem; }
.brand img { display: block; }

main {
  flex: 1 1 auto;
  min-height: 0;                 /* let the flex child shrink so it can scroll */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  width: 100%; max-width: 560px;
  padding: .25rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
  display: grid; gap: 1rem; align-content: start;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
}

/* ---- Login ---- */
.login { width: min(360px, 100%); text-align: center; }
.login .logo { margin-bottom: .5rem; }
.login input, .login button { width: 100%; margin-top: 1rem; }

/* ---- Hero / greeting ---- */
.hero { text-align: center; padding: 1.5rem 1.25rem; }
.hero .ago { font-size: 2.4rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.hero .ago small { font-size: 1rem; font-weight: 500; color: var(--muted); display: block; margin-top: .15rem; }
.hero .lastline { margin: .6rem 0 0; color: var(--muted); }
.hero .suggest {
  margin-top: 1rem; display: inline-flex; align-items: center; gap: .5rem;
  background: var(--panel-2); border: 1px solid var(--line);
  padding: .5rem .9rem; border-radius: 999px; font-weight: 600;
}
.hero .suggest .pill { color: var(--accent); }
.hero.empty .ago { font-size: 1.4rem; }

/* side dot used in hero + log rows */
.dot { display: inline-block; width: .7em; height: .7em; border-radius: 50%; vertical-align: baseline; }
.dot.left { background: var(--left); }
.dot.right { background: var(--right); }
.tag { font-weight: 600; }
.tag.left { color: var(--left); }
.tag.right { color: var(--right); }

/* ---- Form ---- */
.group-label { display: block; font-size: .9rem; color: var(--muted); margin: 0 0 .45rem; }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem; }
.sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1.1rem; }
.size-btn {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background: var(--panel-2); color: var(--text);
  border: 2px solid var(--line); border-radius: 12px;
  padding: .85rem .3rem; font-size: 1rem; font-weight: 600; font-family: inherit;
  transition: border-color .12s, background .12s, transform .05s;
}
.size-btn:active { transform: scale(.98); }
.size-btn.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--panel-2)); }
.side-btn {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background: var(--panel-2); color: var(--text);
  border: 2px solid var(--line); border-radius: 14px;
  padding: 1.1rem .5rem; font-size: 1.1rem; font-weight: 600;
  transition: border-color .12s, background .12s, transform .05s;
}
.side-btn:active { transform: scale(.98); }
.side-btn[data-side="left"]::before,
.side-btn[data-side="right"]::before {
  content: ""; display: inline-block; width: .7em; height: .7em;
  border-radius: 50%; margin-right: .5em; vertical-align: middle;
}
.side-btn[data-side="left"]::before { background: var(--left); }
.side-btn[data-side="right"]::before { background: var(--right); }
.side-btn.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--panel-2)); }

.field { display: block; margin-bottom: .9rem; }
.field > span { display: block; font-size: .9rem; color: var(--muted); margin-bottom: .35rem; }
.field-toggle { margin-bottom: .9rem; }
.field-toggle > summary { cursor: pointer; color: var(--accent-soft); font-weight: 500; }
.field-toggle[open] > summary { margin-bottom: .75rem; }

input[type="password"], input[type="datetime-local"] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 12px;
  padding: .85rem .9rem;
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.3;
}
input:focus { outline: none; border-color: var(--accent); }

/* iOS renders datetime-local with its own quirks: the value overflows the box
   and the field looks like plain text. Keep it block-level (NOT flex — that's
   what made the value spill on iOS), left-align the value, and let it shrink. */
input[type="datetime-local"] {
  min-height: 3.3rem;
  text-align: left;
  max-width: 100%;
  overflow: hidden;
}
input[type="datetime-local"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
  min-width: 0;
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  /* tint the picker glyph toward the peach accent so it's visible on dark */
  filter: invert(78%) sepia(35%) saturate(900%) hue-rotate(316deg) brightness(102%);
  opacity: 1;
  cursor: pointer;
}

.actions { display: flex; align-items: center; gap: 1rem; margin-top: .25rem; }

button.primary {
  appearance: none; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  border: none; border-radius: 12px; padding: .85rem 1.4rem;
  font-size: 1.05rem; font-weight: 700; font-family: inherit;
  flex: 1; transition: filter .12s, transform .05s;
}
button.primary:hover { filter: brightness(1.05); }
button.primary:active { transform: scale(.99); }

button.link {
  appearance: none; background: none; border: none; cursor: pointer;
  color: var(--muted); font: inherit; padding: .5rem; text-decoration: underline;
}
button.link:hover { color: var(--text); }

/* ---- Log book ---- */
.feeds { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.feed {
  display: flex; align-items: center; gap: .75rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: .8rem .9rem;
}
.feed .info { flex: 1; min-width: 0; }
.feed .when { font-weight: 600; }
.feed .sub { color: var(--muted); font-size: .9rem; }
.feed .row-actions { display: flex; gap: .25rem; }
.feed .row-actions button {
  appearance: none; background: var(--panel-2); border: 1px solid var(--line);
  color: var(--muted); border-radius: 9px; padding: .45rem .6rem;
  font: inherit; font-size: .85rem; cursor: pointer;
}
.feed .row-actions button:hover { color: var(--text); border-color: var(--accent); }
.empty { text-align: center; padding: 1rem; }