/* Mobile first: this is only ever opened from an iPhone home screen, added to
   it, with no browser chrome around it. Everything here is about that — thumb
   reach, tap targets, and not looking broken when the page is the whole
   screen. Colour and type stay plain on purpose; SPEC.md defers that until the
   app has earned it. */
:root {
  --bg: #14161a;
  --fg: #e8e6e3;
  --muted: #8b8f98;
  --accent: #7aa2f7;
  --rule: #262a31;
  --field: #1b1e24;
  --edge: #333944;

  /* Every target on the phone is measured against this. 44pt is Apple's floor,
     not a target to aim at, so the things that matter sit above it. */
  --tap: 44px;
  /* The bottom bar's real height — a tap box, its top rule, and the home
     indicator underneath it. Content is padded by this so nothing ends up
     behind any of the three. */
  --nav-h: calc(var(--tap) + 1px + env(safe-area-inset-bottom, 0px));
}

* { box-sizing: border-box; }

html {
  /* Standalone mode rubber-bands past the end of the page. Without this the
     overscroll shows the browser's white, which looks like a broken app. */
  background: var(--bg);
  overscroll-behavior-y: none;
  /* iOS inflates fonts in landscape unless told not to. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Sides and top as before; the bottom clears the fixed nav. */
  padding: 1.25rem 1.25rem calc(var(--nav-h) + 1rem);
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* A grey flash on every tap reads as a web page. A faint accent reads as an
     app, and still confirms the tap landed. */
  -webkit-tap-highlight-color: rgba(122, 162, 247, .15);
}

/* One phone-width column. On the phone this does nothing; on the laptop where
   it gets built it stops the screens spreading across a monitor and looking
   like a different app from the one being designed. */
main { max-width: 26rem; margin: 0 auto; }

/* Kills the 300ms wait for a possible double-tap without disabling pinch-zoom
   for the whole page, which is an accessibility feature and stays. */
a, button, input, label, summary { touch-action: manipulation; }

/* Buttons are for tapping, not for selecting. Long-pressing Done should not
   pop the text-selection loupe. */
button { -webkit-user-select: none; user-select: none; }

/* Navigation ---------------------------------------------------------------
   Bottom bar, not a top one. Four screens is few enough to show them all, and
   the bottom of a phone is the part a thumb reaches without the hand moving.
   SPEC.md: nothing important in the top corners. */
nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  /* Centred and capped, so the bar lines up with the column above it instead
     of stretching to the width of a laptop. */
  justify-content: center;
  background: var(--bg);
  border-top: 1px solid var(--rule);
  /* The inset keeps the labels off the home indicator on a notched phone and
     is 0 everywhere else. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

nav a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  max-width: 6.5rem;
  padding: .55rem 0;
  color: var(--muted);
  text-decoration: none;
  font-size: .95rem;
}

/* Which screen you are on, said quietly. There is no back button in
   standalone mode, so this is the only orientation on offer. */
nav a[aria-current="page"] { color: var(--fg); }
nav a:hover { color: var(--accent); }

h1 { font-size: 1.6rem; margin: 0 0 .5rem; }
p { color: var(--muted); }

h2 { font-size: 1.15rem; margin: 2rem 0 .5rem; }
a { color: var(--accent); }

.note { font-size: .9rem; }

.errors {
  margin: 0 0 1rem;
  padding: .75rem 1rem .75rem 2rem;
  border-left: 3px solid #e06c75;
  background: #1d1a1c;
  color: #e8b3b6;
  font-size: .95rem;
}

/* Lists ------------------------------------------------------------- */
.anchor-list,
.task-list { list-style: none; margin: 0; padding: 0; }

.anchor-list li,
.task-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--rule);
}

.anchor-list .when { display: block; color: var(--fg); font-variant-numeric: tabular-nums; }
/* Which days the anchor repeats on. Deliberately not .days — that is the
   fieldset in the add form, and when both had the name this line of text was
   drawn inside the fieldset's box. */
.anchor-list .repeat { display: block; color: var(--muted); font-size: .85rem; }

.actions { display: flex; align-items: center; gap: .25rem; }
.actions form { margin: 0; }
/* Edit sits next to Archive, so it needs the same box or the wrong one gets
   tapped. Padded rather than sized, so the words stay ordinary text. */
.actions a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 .5rem;
}

/* Forms ------------------------------------------------------------------- */
.anchor-form label,
.task-form label { display: block; margin-bottom: 1rem; color: var(--muted); font-size: .9rem; }

/* font: inherit keeps these at the body's 17px. Anything under 16px makes iOS
   zoom the page in when the field is focused and leaves it there. */
.anchor-form input[type="text"],
.anchor-form input[type="time"],
.task-form input[type="text"],
.task-form input[type="number"] {
  display: block;
  width: 100%;
  min-height: var(--tap);
  margin-top: .35rem;
  padding: .6rem .7rem;
  background: var(--field);
  color: var(--fg);
  border: 1px solid var(--edge);
  border-radius: 8px;
  font: inherit;
}

.anchor-form .row { display: flex; gap: 1rem; }
.anchor-form .row label { flex: 1; }

.days,
.effort { margin: 0 0 1rem; padding: .6rem .75rem; border: 1px solid var(--edge); border-radius: 8px; }
.days legend,
.effort legend { color: var(--muted); font-size: .9rem; padding: 0 .3rem; }
/* Seven of these in a row is the tightest thing to hit anywhere in the app, so
   the label is part of the target and the whole thing is a full tap box. */
.days .day {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: var(--tap);
  padding-right: .5rem;
  color: var(--fg);
}
.days .day input { width: 1.35rem; height: 1.35rem; }

button {
  min-height: var(--tap);
  padding: .7rem 1.1rem;
  background: var(--accent);
  color: #10131a;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
}

/* A destructive action should not look like the primary one. It keeps the full
   tap height anyway: it sits a few pixels from Edit, and the smaller of two
   neighbours is the one you miss. The padding makes the box; the text stays
   small, so it still reads as the quieter action. */
button.link {
  min-height: var(--tap);
  padding: 0 .5rem;
  background: none;
  color: var(--muted);
  font-weight: 400;
  text-decoration: underline;
}

/* Tasks ------------------------------------------------------------------- */
.task-list .meta { display: block; color: var(--muted); font-size: .85rem; }
.task-list.done { opacity: .65; }

/* Three effort buttons that are also the submit buttons: one tap picks the
   effort and saves. Wide enough for a thumb. */
.effort-buttons { display: flex; gap: .5rem; margin-top: .4rem; }
.effort-buttons button { flex: 1; padding: .8rem .4rem; }

/* On the edit form the task's current effort is the filled button and the
   other two drop back, so what it is now reads at a glance. :has() means the
   add form, where nothing is current, keeps all three filled. */
.effort-buttons:has(.current) button:not(.current) {
  background: none;
  color: var(--fg);
  border: 1px solid var(--edge);
}

/* Now ---------------------------------------------------------------------
   SPEC.md "Interaction rules" are requirements, not polish, so they are here
   from the first version of this screen: every target at least 44x44pt,
   reachable one-handed, and the whole screen inside one phone height. */
.until { margin-top: 0; }
.ask { margin: 1.75rem 0 .6rem; }

/* Three buttons, one row, each one its own submit — tapping is answering. */
.capacity-buttons { display: flex; gap: .5rem; }
.capacity-buttons button {
  flex: 1;
  min-height: 56px;
  font-size: 1.05rem;
}

.suggestions { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.suggestions li {
  /* 44pt floor with room to spare: this is the list read at arm's length on a
     sofa, and it is the one thing on the screen worth making big. The task and
     its Done button sit on one row, so the button lands under the thumb on the
     right rather than below the text. */
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--rule);
}
.suggestions .what { display: flex; flex-direction: column; gap: .15rem; }
.suggestions form { margin: 0; }
/* Done is the action the whole app exists to encourage, so it is a real
   target: past the 44pt floor on both sides and never shrunk by a long name. */
.suggestions button { min-height: 48px; flex: none; }
/* The last suggestion's rule and the nudge's rule sat one on top of the other.
   The nudge already draws the line between the two halves of the screen, so the
   list stops without one. */
.suggestions li:last-child { border-bottom: 0; }
.suggestions strong { font-size: 1.1rem; }
.suggestions .meta { color: var(--muted); font-size: .85rem; }

.empty { margin: 1.75rem 0 0; }

/* Deliberately quiet and last: needed rarely, and never by accident. Padded so
   it is still a thumb-sized target despite being one line of text. */
.recheck { margin-top: 1rem; }
.recheck a { display: inline-block; padding: .75rem 0; color: var(--muted); }

/* The nudge -----------------------------------------------------------------
   Deliberately quieter than .suggestions: dimmer text, a rule instead of a
   card, no colour of its own. It is the smaller offer on the screen and should
   read that way. It still has to fit above the fold alongside three
   suggestions, so it stays three short lines at most. */
.nudge {
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--rule);
}

.nudge-why { margin: 0 0 .3rem; font-size: .85rem; }

/* Name on the left, Done on the right — the same row shape as a suggestion, so
   the finishing action is always in the same place under the thumb. */
.nudge-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nudge-head form { margin: 0; }
.nudge-head button { min-height: 48px; flex: none; }
.nudge-task { color: var(--fg); }

/* The first step is the thing on offer, so it is the line that reads as an
   action; the task name above it is context. */
.first-step { margin: .35rem 0 0; color: var(--fg); }
.first-step::before { content: "→ "; color: var(--accent); }

/* Asked in the moment, so it has to be answerable one-handed: full-width field
   above a full-width button, both past the 44pt floor, both low on the screen. */
.nudge-form { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
/* The question takes the full width and the answer row sits under it. */
.nudge-form label { width: 100%; margin: 0; color: var(--muted); font-size: .85rem; }
.nudge-form input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: .6rem .7rem;
  background: var(--field);
  color: var(--fg);
  border: 1px solid var(--edge);
  border-radius: 8px;
  font: inherit;
}
.nudge-form button { flex: none; min-height: 48px; }


/* Streak ------------------------------------------------------------------
   Twelve columns of seven days. Sized so the whole grid fits the width of a
   phone with room to spare rather than scrolling sideways: at 12 x 26px it is
   312px inside a 350px column. Plain, per SPEC.md — this is a screen you look
   at, not one you use. */
.streak-grid { display: flex; gap: 4px; margin-top: 1.5rem; }
.week { display: flex; flex-direction: column; gap: 4px; }

.cell {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--field);
}

/* One hue, five steps. Shade carries the count, so a heavy week reads as a
   block of colour without needing a legend. */
.level-1 { background: #29406b; }
.level-2 { background: #3d63a8; }
.level-3 { background: #5b84d0; }
.level-4 { background: var(--accent); }

/* Days that have not happened yet are not empty days. Drawn as an outline so
   the current week reads as unfinished rather than as a run of failures. */
.future { background: none; box-shadow: inset 0 0 0 1px #23262c; }