/* ---------------------------------------------------------------------------
   Tide — one stylesheet. No framework, no CDN, no external request.

   Built on the tokens in design.md. Every colour, radius and space below is a
   token; nothing invents a value. Marketing-only structures (hero bands, 126px
   display type, the dark footer band) are deliberately not imported — this is
   a screen you read with a headache. See design.md, "How this is applied".
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------- fonts ---
   Wise Sans is proprietary, and this app is not allowed to call a CDN. The
   stacks below fall back to the platform sans. To use real Inter / Manrope,
   drop the .woff2 files into public/assets/fonts/ and uncomment this block —
   self-hosted, so still no third-party request.

@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 900;
  font-display: swap; src: url("fonts/Inter-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 900;
  font-display: swap; src: url("fonts/Manrope-Variable.woff2") format("woff2");
}
--------------------------------------------------------------------------- */

:root {
  /* --- brand & accent ------------------------------------------------- */
  --primary:          #9fe870;
  --primary-active:   #cdffad;
  --primary-neutral:  #c5edab;
  --primary-pale:     #e2f6d5;
  --on-primary:       #163300;

  /* --- surface -------------------------------------------------------- */
  --canvas:           #ffffff;
  --canvas-soft:      #e8ebe6;

  /* --- text ----------------------------------------------------------- */
  --ink:              #0e0f0c;
  --ink-deep:         #163300;
  --body:             #454745;
  --mute:             #868685;

  /* --- semantic ------------------------------------------------------- */
  --positive:         #2ead4b;
  --positive-deep:    #054d28;
  --warning:          #ffd11a;
  --warning-content:  #4a3b1c;
  --negative:         #d03238;
  --negative-deep:    #a72027;
  --negative-darkest: #a7000d;
  --negative-bg:      #320707;

  /* --- lines: ink at low alpha, so hairlines sit in the same family --- */
  --line:             rgba(14, 15, 12, .12);
  --line-firm:        rgba(14, 15, 12, .30);
  --ink-border:       #0e0f0c;
  --track:            rgba(14, 15, 12, .10);

  /* --- spacing, 4px base ---------------------------------------------- */
  --s-xxs: 2px;  --s-xs: 4px;  --s-sm: 8px;  --s-md: 12px;
  --s-lg: 16px;  --s-xl: 24px; --s-2xl: 32px; --s-3xl: 48px;

  /* --- radius --------------------------------------------------------- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 9999px;

  /* --- type ----------------------------------------------------------- */
  --font-display: "Wise Sans", "Manrope", "Inter", -apple-system,
                  BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Per-entry-type colour, replaced by index.php?r=types.css */
  --type-colour: #454745;
}

/* The brand is a light-mode identity. Dark mode is the documented polarity
   flip: ink becomes the canvas, the lime stays exactly as it is. */
@media (prefers-color-scheme: dark) {
  :root {
    --canvas:       #1b1d18;
    --canvas-soft:  #0e0f0c;
    --ink:          #e8ebe6;
    --ink-deep:     #cdffad;
    --body:         #b6b9b2;
    --mute:         #8a8d86;
    --line:         rgba(232, 235, 230, .14);
    --line-firm:    rgba(232, 235, 230, .34);
    --ink-border:   rgba(232, 235, 230, .34);
    --track:        rgba(232, 235, 230, .14);
    --primary-pale: #1f3313;
    --negative:     #ef6b6b;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--canvas-soft);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;      /* body-md */
  line-height: 24px;
  font-feature-settings: "calt";
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Display face, weight 900, only on the page headline — the brand moment. */
h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  line-height: 30px;
  letter-spacing: -.02em;
  margin: 0 0 var(--s-xs);
}
h2 {                    /* display-xs */
  font-size: 24px; line-height: 31px; letter-spacing: -.48px;
  font-weight: 600; margin: var(--s-2xl) 0 var(--s-sm);
}
.card > h2:first-child { margin-top: 0; }
h3 {
  font-size: 16px; line-height: 24px; font-weight: 600;
  margin: var(--s-lg) 0 var(--s-sm);
}
p { margin: 0 0 var(--s-sm); }
a { color: var(--ink); text-decoration-color: var(--line-firm); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .875em;
  background: var(--canvas-soft);
  padding: 1px var(--s-xs);
  border-radius: var(--r-sm);
}

.muted { color: var(--body); }
.small { font-size: 14px; line-height: 20px; }      /* body-sm */

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------------ shell */

.wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--s-lg) var(--s-md) var(--s-3xl);
}

/* nav-bar: white on the sage canvas, ink text */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-lg);
  padding: var(--s-md) var(--s-lg);
  background: var(--canvas);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--s-sm);
  font-family: var(--font-display); font-weight: 900;
  font-size: 18px; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none;
}
.brand-name { line-height: 1; }

/* --- the mark -----------------------------------------------------------
   Inline SVG so it can be styled from here. In dark mode the tile and the
   water swap places — the polarity flip the design system already uses for
   its dark cards — otherwise a near-black tile would vanish into the bar. */

.logo { flex: 0 0 auto; display: block; }
.logo-tile { fill: var(--ink); }
.logo-wave {
  fill: none; stroke: var(--primary);
  stroke-width: 4.2; stroke-linecap: round;
}
.logo-wave-soft { stroke-width: 3.4; stroke-opacity: .45; }

.logo-lg { margin: 0 0 var(--s-md); }

@media (prefers-color-scheme: dark) {
  .logo-tile { fill: var(--primary); }
  .logo-wave { stroke: #0e0f0c; }
  .logo-wave-soft { stroke-opacity: .4; }
}
.topnav { display: flex; align-items: center; gap: var(--s-lg); }
/* nav-link: body-sm-strong */
.topnav a, .linkbutton { font-size: 14px; line-height: 20px; font-weight: 600; }
.topnav a { text-decoration: none; }
.topnav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.inline { display: inline; margin: 0; }

.pagefoot {
  max-width: 46rem; margin: 0 auto;
  padding: 0 var(--s-md) var(--s-2xl);
  color: var(--mute);
  font-size: 12px; line-height: 16px;              /* caption */
}

/* card-content: white, 24px radius, 24px interior, no border */
.card {
  background: var(--canvas);
  border-radius: var(--r-xl);
  padding: var(--s-xl);
  margin-bottom: var(--s-lg);
}
.card-narrow { max-width: 27rem; margin: var(--s-3xl) auto; }
.card-narrow form + p { margin-top: var(--s-xl); }

/* badge-positive / badge-negative, widened into message strips */
.flash {
  border-radius: var(--r-xl);
  padding: var(--s-md) var(--s-lg);
  margin: 0 0 var(--s-md);
  font-size: 14px; line-height: 20px; font-weight: 600;
}
.flash-ok    { background: var(--primary-pale); color: var(--positive-deep); }
.flash-error { background: var(--negative-bg);  color: #ffffff; }

@media (prefers-color-scheme: dark) {
  .flash-ok { color: var(--primary-active); }
}

/* ------------------------------------------------------------- form parts */

label {
  display: block;
  font-size: 14px; line-height: 20px; font-weight: 600;   /* body-sm-strong */
  color: var(--body);
  margin-bottom: var(--s-xs);
}

/* text-input: white, 1px ink border, 12px radius, 12/16 padding */
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="time"], input[type="number"],
select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;      /* 16px minimum stops iOS zooming on focus */
  line-height: 24px;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--ink-border);
  border-radius: var(--r-md);
  padding: var(--s-md) var(--s-lg);
}
textarea { resize: vertical; }
::placeholder { color: var(--mute); opacity: 1; }

input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.stack > * + * { margin-top: var(--s-md); }

/* --- buttons: 24px pill-rectangle, button-md label, 12/24 padding ------- */

button, .ghost {
  font-family: inherit;
  font-size: 16px; line-height: 24px; font-weight: 600;
  padding: var(--s-md) var(--s-xl);
  border-radius: var(--r-xl);
  border: 1px solid transparent;
  background: var(--canvas-soft);          /* button-secondary */
  color: var(--ink);
  cursor: pointer;
}
button.primary {                            /* button-primary */
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
button.primary:hover  { background: var(--primary-active); border-color: var(--primary-active); }
button.primary:active { background: var(--primary-neutral); border-color: var(--primary-neutral); }

.ghost {                                    /* button-tertiary */
  display: inline-block; text-decoration: none;
  background: var(--canvas);
  border-color: var(--ink-border);
}
button.danger {
  background: transparent;
  color: var(--negative-darkest);
  border-color: var(--line-firm);
}
button.danger:hover { border-color: var(--negative); color: var(--negative); }

button.small, .ghost.small {
  font-size: 14px; line-height: 20px;
  padding: var(--s-sm) var(--s-lg);
}

.linkbutton {
  border: 0; background: none; padding: 0;
  color: var(--ink); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--line-firm);
  text-underline-offset: 3px;
  border-radius: 0;
}
.linkbutton:hover { text-decoration-color: currentColor; }

/* ---------------------------------------------------- dashboard skeleton
   One column on a phone, in the order: header, add form, context, entries.
   Two columns from 64rem, with the context column parked on the right and
   the day's work running down the left.                                    */

.dash { display: grid; gap: var(--s-lg); align-items: start; }
.dash-side { display: grid; gap: var(--s-lg); align-content: start; min-width: 0; }
.dash-form, .dash-list { min-width: 0; }

/* On a phone the month comes before the account card — it is the thing you
   act on. On a wide screen the account block sits at the top of the column,
   where a signed-in identity belongs. */
.dash-side > .cal     { order: 1; }
.dash-side > .glance  { order: 2; }
.dash-side > .profile { order: 3; }

.pagehead {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--s-md);
  margin: 0 0 var(--s-lg);
}
.pagehead-title { min-width: 0; }
.pagehead h1 { margin: 0; }

.eyebrow {
  margin: 0 0 var(--s-xxs);
  font-size: 11px; line-height: 16px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--mute);
}

.cardtitle {
  font-size: 16px; line-height: 24px; font-weight: 600;
  letter-spacing: 0;
  margin: 0 0 var(--s-lg);
}

.listhead {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--s-sm);
  padding: 0 var(--s-xs);
  margin-bottom: var(--s-sm);
}
.listhead .cardtitle { margin: 0; }
.listmeta { margin: 0; font-size: 13px; line-height: 20px; color: var(--body); }

/* The date bar: arrows either side of a typed DD/MM/YYYY box. */
.datebar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-sm);
}
.datebar input[type="text"] {
  width: 8.5rem; flex: 0 0 auto;
  padding: var(--s-sm) var(--s-md);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------- day navigation */

.daynav {
  display: flex; align-items: center; gap: var(--s-sm);
  margin: var(--s-xs) 0 var(--s-lg);
}
.daynav-mid { flex: 1; min-width: 0; text-align: center; }

/* button-icon-circular */
.daynav-arrow {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  background: var(--canvas);
  color: var(--ink);
  text-decoration: none;
  font-size: 18px; line-height: 1;
}
.daynav-arrow:hover { background: var(--primary-pale); }

/* badge-positive shape, used as the "today" marker */
.tag {
  display: inline-block;
  font-family: var(--font-body); font-weight: 600;
  font-size: 12px; line-height: 16px; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--positive-deep);
  background: var(--primary-pale);
  border-radius: var(--r-pill);
  padding: var(--s-xxs) var(--s-md);
  vertical-align: .18em;
}
@media (prefers-color-scheme: dark) { .tag { color: var(--primary-active); } }

.datepick {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: var(--s-sm); margin-top: var(--s-sm);
}
.datepick input[type="date"] {
  width: auto;
  padding: var(--s-sm) var(--s-md);
  font-size: 14px; line-height: 20px;
  border-radius: var(--r-md);
}

/* ---------------------------------------------------------- the add form */

.chips {
  position: relative;
  border: 0; margin: 0 0 var(--s-md); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-sm);
}
/* Invisible but 1px and focusable: a zero-size control makes Chrome refuse to
   submit a form with `required` on it instead of showing "choose one". */
.chip-input {
  position: absolute; top: 14px; left: 8px;
  width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none;
}
.chip {
  display: inline-block; margin: 0;
  padding: var(--s-sm) var(--s-md);
  border: 1px solid var(--line-firm);
  border-radius: var(--r-xl);
  font-size: 14px; line-height: 20px; font-weight: 600;
  color: var(--body);
  cursor: pointer; user-select: none;
}
.chip::before {
  content: ""; display: inline-block;
  width: 8px; height: 8px; border-radius: var(--r-pill);
  background: var(--type-colour);
  margin-right: var(--s-sm); vertical-align: .04em;
}
/* Selected chips take the entry type's own colour. That is data, not brand
   accent — the lime green stays reserved for the CTA below. */
.chip-input:checked + .chip {
  background: var(--type-colour);
  border-color: var(--type-colour);
  color: #ffffff;
}
.chip-input:checked + .chip::before { background: rgba(255, 255, 255, .85); }
.chip-input:focus-visible + .chip { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Numbered steps down the form: type, time, text, severity. Each step is a
   .field with a visible label, so the shape of the task is obvious rather
   than implied by placeholder text. */
.field { border: 0; margin: 0 0 var(--s-lg); padding: 0; min-width: 0; }
.field:last-of-type { margin-bottom: 0; }
.fieldlabel {
  display: block; padding: 0;
  font-size: 12px; line-height: 16px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--mute);
  margin-bottom: var(--s-sm);
}
.hint {
  margin: var(--s-xs) 0 0;
  font-size: 12px; line-height: 16px;
  color: var(--mute);
}

/* On a phone the text box gets the full width and the time sits above it —
   squeezing both onto one line left about six characters visible. */
.addrow { display: flex; flex-direction: column; gap: var(--s-lg); }
.addrow .field { margin: 0; }
.addrow textarea { flex: 1 1 auto; min-width: 0; }

/* --- the time picker: hour : minute AM/PM --------------------------------
   Three native selects, so a phone opens its own wheel and the 12-hour
   reading is identical on every browser. */

.timepick {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s-xs);
}
.timepick select {
  width: auto; flex: 0 0 auto;
  padding: var(--s-md) var(--s-sm) var(--s-md) var(--s-md);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.timepick .tp-ap { margin-left: var(--s-xs); }
.tp-sep {
  flex: 0 0 auto;
  font-weight: 600; color: var(--body);
  margin: 0 calc(var(--s-xxs) * -1);
}

.label-like {
  display: block;
  font-size: 14px; line-height: 20px; font-weight: 600;
  color: var(--body);
  margin-bottom: var(--s-xs);
}

.nowbtn {
  padding: 0 var(--s-md);
  font-size: 14px; line-height: 20px;
  background: var(--canvas-soft);
  border-radius: var(--r-md);
}
.nowbtn:hover { background: var(--primary-pale); }

.sevrow { display: flex; align-items: center; gap: var(--s-md); }
.sevrow input[type="range"] {
  flex: 1 1 auto; width: auto; min-width: 0; height: 28px;
  padding: 0; border: 0; background: none;
  accent-color: var(--type-colour);
}
.sevout {
  flex: 0 0 2.5rem; text-align: right;
  font-family: var(--font-display); font-weight: 900;
  font-size: 22px; line-height: 24px;
  color: var(--ink);
}
.sevpick[hidden] { display: none; }

/* Full-width on a phone: the primary action should be impossible to miss. */
.addactions { margin-top: var(--s-xl); display: flex; }
.addactions button { width: 100%; }

/* ---------------------------------------------------------------- summary */

.daysummary {
  color: var(--body);
  font-size: 14px; line-height: 20px;
  margin: 0 var(--s-xs) var(--s-md);
}
.empty {
  color: var(--mute);
  text-align: center;
  background: var(--canvas);
  border-radius: var(--r-xl);
  padding: var(--s-3xl) var(--s-xl);
}

/* --------------------------------------------------------------- timeline
   One white card per day, entries as rows inside it: the surface contrast
   between sage canvas and white card is the elevation, per the brand.       */

.timeline {
  list-style: none; margin: 0; padding: var(--s-sm) 0;
  background: var(--canvas);
  border-radius: var(--r-xl);
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 4.7rem .9rem 1fr;
  align-items: start;
  padding: var(--s-md) var(--s-lg) var(--s-md) var(--s-md);
}
/* The thread, drawn behind the nodes. */
.tl-item::before {
  content: "";
  position: absolute;
  left: calc(var(--s-md) + 4.7rem + .43rem);
  top: 22px; bottom: -6px;
  width: 1px; background: var(--line);
}
.tl-item:last-child::before { display: none; }

.tl-time {
  color: var(--body);
  font-size: 14px; line-height: 20px; font-weight: 600;
  padding-top: 2px;
}
.tl-node {
  width: 10px; height: 10px; margin-top: 7px;
  border-radius: var(--r-pill);
  background: var(--type-colour);
  position: relative; z-index: 1;
  box-shadow: 0 0 0 3px var(--canvas);
}
.tl-body { min-width: 0; padding-left: var(--s-sm); }

.tl-meta { margin: 0; line-height: 16px; }
.tl-type {
  color: var(--type-colour);
  font-size: 12px; line-height: 16px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.tl-src {
  color: var(--mute);
  font-size: 12px; line-height: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0 var(--s-sm); margin-left: var(--s-sm);
}
.tl-text { margin: var(--s-xxs) 0 0; overflow-wrap: anywhere; }

/* Severity: ten cells, the first N filled. */
.sevbar { display: flex; align-items: center; gap: 3px; margin: var(--s-sm) 0 0; }
.sevbar b {
  width: 14px; height: 6px;
  background: var(--track);
  border-radius: var(--r-pill);
}
.sevbar em {
  font-style: normal; font-weight: 600;
  font-size: 12px; line-height: 16px;
  color: var(--body); margin-left: var(--s-sm);
}
/* nth-of-type, not nth-child: the bar also holds a screen-reader span, which
   would otherwise be counted and leave the bar one cell short. */
.sev-1  b:nth-of-type(-n+1),
.sev-2  b:nth-of-type(-n+2),
.sev-3  b:nth-of-type(-n+3),
.sev-4  b:nth-of-type(-n+4),
.sev-5  b:nth-of-type(-n+5),
.sev-6  b:nth-of-type(-n+6),
.sev-7  b:nth-of-type(-n+7),
.sev-8  b:nth-of-type(-n+8),
.sev-9  b:nth-of-type(-n+9),
.sev-10 b:nth-of-type(-n+10) { background: var(--type-colour); }

/* ---------------------------------------------------------- edit / delete */

.tl-edit { margin-top: var(--s-xs); }
.tl-edit > summary {
  cursor: pointer; list-style: none;
  display: inline-block;
  font-size: 12px; line-height: 16px; font-weight: 600;
  letter-spacing: .04em;
  color: var(--mute);
  padding: var(--s-xs) 0;
}
.tl-edit > summary::-webkit-details-marker { display: none; }
.tl-edit > summary:hover,
.tl-edit[open] > summary { color: var(--ink); }

.editform {
  margin: var(--s-sm) 0 0;
  padding: var(--s-lg);
  background: var(--canvas-soft);
  border-radius: var(--r-lg);
}
.deleteform { margin: var(--s-sm) 0 0; }
.editrow { display: flex; flex-wrap: wrap; gap: var(--s-sm); margin-bottom: var(--s-sm); }
.editrow select { flex: 1 1 6rem; min-width: 0; }
.editrow .timefield { flex: 0 0 auto; }
.editrow .sevnum { width: 5rem; flex: 0 0 auto; text-align: center; padding-left: var(--s-sm); padding-right: var(--s-sm); }
.editrow .sevnum[hidden] { display: none; }
.editform textarea { background: var(--canvas); }
.editactions { display: flex; justify-content: flex-end; margin-top: var(--s-md); }

/* --------------------------------------------------------------- calendar
   Days you have recorded are tinted by the worst symptom on them; days that
   have been and gone with nothing on them are left obviously blank. That
   contrast is the whole point of the screen.                                */

.cal { margin: 0; }
.cal-compact {
  background: var(--canvas);
  border-radius: var(--r-xl);
  padding: var(--s-lg);
  margin-bottom: var(--s-lg);
}

.cal-head { display: flex; align-items: center; gap: var(--s-sm); }
.cal-title {
  flex: 1; text-align: center; margin: 0;
  font-size: 16px; line-height: 24px; font-weight: 600;
}
/* On the full Month screen the calendar header is the page heading. */
.cal:not(.cal-compact) .cal-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: 26px; line-height: 32px; letter-spacing: -.02em;
}
.cal-title a { text-decoration: none; }
.cal-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cal-arrow {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  background: var(--canvas-soft);
  color: var(--ink); text-decoration: none;
}
.cal-arrow:hover { background: var(--primary-pale); }
.cal-summary {
  margin: var(--s-xs) 0 var(--s-md);
  text-align: center;
  font-size: 14px; line-height: 20px;
  color: var(--body);
}
.cal-summary strong { color: var(--ink); }

.cal-grid { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.cal-grid th {
  padding: 0 0 var(--s-xs);
  font-size: 11px; line-height: 16px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--mute);
}
.cal-grid th abbr { text-decoration: none; }
.cal-grid td { padding: 0; }

.cal-day a {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 42px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--ink);
  background: var(--canvas-soft);
}
.cal-num { font-size: 14px; line-height: 18px; font-weight: 600; }
.cal-count { font-size: 10px; line-height: 12px; color: inherit; opacity: .75; }

/* A day that has been and gone with nothing on it. */
.cal-empty a {
  background: transparent;
  border-style: dashed;
  border-color: var(--line-firm);
  color: var(--mute);
}
.cal-future a { background: transparent; color: var(--mute); opacity: .5; }

/* Recorded days, tinted by how bad the day was. Declared after .cal-future
   so a day you have already logged ahead of time still reads as recorded. */
.cal-has a       { background: var(--primary-pale); color: var(--ink-deep); opacity: 1; }
.cal-lvl1 a      { background: #f6dcd2; color: #6b2b20; }
.cal-lvl2 a      { background: #eeae9f; color: #5a1e14; }
.cal-lvl3 a      { background: var(--negative); color: #ffffff; }
.cal-out a    { visibility: hidden; }
.cal-today a  { box-shadow: 0 0 0 2px var(--ink); }
.cal-sel a    { outline: 2px solid var(--ink); outline-offset: 1px; }

@media (prefers-color-scheme: dark) {
  .cal-has a  { background: #23361a; color: var(--primary-active); }
  .cal-lvl1 a { background: #3b241f; color: #efc3b8; }
  .cal-lvl2 a { background: #5a2b24; color: #f7d6ce; }
  .cal-lvl3 a { background: #8c2b2b; color: #ffffff; }
}

.cal-key {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-xs) var(--s-md);
  margin: var(--s-md) 0 0;
  font-size: 11px; line-height: 16px; color: var(--mute);
}
.cal-swatch {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 3px; margin-right: var(--s-xxs);
  vertical-align: -2px;
  background: var(--primary-pale);
}
.cal-key .cal-lvl1 { background: #f6dcd2; }
.cal-key .cal-lvl2 { background: #eeae9f; }
.cal-key .cal-lvl3 { background: var(--negative); }
.cal-key .cal-empty { background: transparent; border: 1px dashed var(--line-firm); }
@media (prefers-color-scheme: dark) {
  .cal-key .cal-lvl0 { background: #23361a; }
  .cal-key .cal-lvl1 { background: #3b241f; }
  .cal-key .cal-lvl2 { background: #5a2b24; }
  .cal-key .cal-lvl3 { background: #8c2b2b; }
}

/* --------------------------------------------------------------- settings */

.formactions { display: flex; justify-content: flex-end; margin-top: var(--s-lg); }
.formactions button { width: 100%; }

.status {
  font-weight: 600;
  margin-bottom: var(--s-xs);
}
.status-on::before,
.status-off::before {
  content: ""; display: inline-block;
  width: 8px; height: 8px; border-radius: var(--r-pill);
  margin-right: var(--s-sm); vertical-align: .08em;
}
.status-on::before  { background: var(--positive); }
.status-off::before { background: var(--mute); }

.pairing-code {
  font-family: var(--font-display); font-weight: 900;
  font-size: 40px; line-height: 48px; letter-spacing: .12em;
  text-align: center;
  background: var(--primary-pale); color: var(--ink-deep);
  border-radius: var(--r-lg);
  padding: var(--s-md);
  margin: var(--s-md) 0;
}
@media (prefers-color-scheme: dark) { .pairing-code { color: var(--primary-active); } }

.statlist { margin: 0; }
.statlist > div {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-lg);
  padding: var(--s-sm) 0;
  border-bottom: 1px solid var(--line);
}
.statlist > div:last-child { border-bottom: 0; padding-bottom: 0; }
.statlist > div:first-child { padding-top: 0; }
.statlist dt { color: var(--body); font-size: 14px; line-height: 20px; flex: 0 0 auto; }
.statlist dd {
  margin: 0; font-weight: 600; text-align: right;
  min-width: 0; overflow-wrap: anywhere;
}
.statlist-tight > div { padding: var(--s-xs) 0; }
.dd-sub {
  display: block;
  font-size: 12px; line-height: 16px; font-weight: 400;
  color: var(--mute);
}
.truncate { font-weight: 400; font-size: 14px; }

/* ------------------------------------------------------- due / reminders */

.due .eyebrow { margin-bottom: var(--s-md); }

.watertot { margin: 0 0 var(--s-md); }
.watertot-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-sm); font-size: 14px; line-height: 20px; color: var(--body);
}
.watertot-head strong { color: var(--ink); }
.waterbar {
  height: 8px; border-radius: var(--r-pill);
  background: var(--track); margin-top: var(--s-xs); overflow: hidden;
}
.waterbar-fill { display: block; height: 100%; background: var(--accent-cyan, #38c8ff); border-radius: var(--r-pill); }
/* Width in 5% steps — a class rather than an inline style, which the CSP forbids. */
.w-0{width:0} .w-5{width:5%} .w-10{width:10%} .w-15{width:15%} .w-20{width:20%}
.w-25{width:25%} .w-30{width:30%} .w-35{width:35%} .w-40{width:40%} .w-45{width:45%}
.w-50{width:50%} .w-55{width:55%} .w-60{width:60%} .w-65{width:65%} .w-70{width:70%}
.w-75{width:75%} .w-80{width:80%} .w-85{width:85%} .w-90{width:90%} .w-95{width:95%}
.w-100{width:100%}

.duelist { list-style: none; margin: 0; padding: 0; }
.dueitem {
  padding: var(--s-md) 0;
  border-bottom: 1px solid var(--line);
}
.duelist .dueitem:last-child { border-bottom: 0; padding-bottom: 0; }
.dueitem-when {
  font-size: 13px; line-height: 18px; font-weight: 600; color: var(--body);
}
.dueitem-late .dueitem-when { color: var(--negative-darkest); }
.dueitem-missed { opacity: .85; }
.dueitem-what { margin: var(--s-xxs) 0 var(--s-sm); }
.dueitem-what strong { font-weight: 600; }
.dueitem-dose, .dueitem-note {
  display: block; font-size: 13px; line-height: 18px; color: var(--mute);
}
.dueitem-do { display: flex; flex-wrap: wrap; gap: var(--s-xs); }
.dueitem-do .inline { display: inline; }

.pill-missed { background: var(--negative-bg); color: #fff; }

.donelist { margin-top: var(--s-md); }
.donelist > summary {
  cursor: pointer; list-style: none;
  font-size: 12px; line-height: 16px; font-weight: 600; color: var(--mute);
}
.donelist > summary::-webkit-details-marker { display: none; }
.donelist ul { list-style: none; margin: var(--s-sm) 0 0; padding: 0;
               font-size: 13px; line-height: 20px; color: var(--body); }
.done-taken   { color: var(--positive-deep); font-weight: 600; }
.done-skipped { color: var(--mute); font-weight: 600; }
@media (prefers-color-scheme: dark) { .done-taken { color: var(--primary-active); } }

/* --------------------------------------------------- schedule management */

.schedlist { list-style: none; margin: 0; padding: 0; }
.schedrow {
  display: flex; flex-wrap: wrap; gap: var(--s-md);
  justify-content: space-between; align-items: flex-start;
  padding: var(--s-md) 0; border-bottom: 1px solid var(--line);
}
.schedlist .schedrow:last-child { border-bottom: 0; }
.schedrow-off { opacity: .55; }
.schedrow-main { min-width: 0; flex: 1 1 14rem; }
.schedrow-title { margin: 0; font-weight: 600; }
.schedrow-dose { font-weight: 400; color: var(--body); }
.schedrow-when { margin: var(--s-xxs) 0 0; font-size: 14px; line-height: 20px; }
.schedrow-meta { margin: var(--s-xxs) 0 0; font-size: 12px; line-height: 16px; color: var(--mute); }
.schedrow-do { display: flex; gap: var(--s-xs); align-items: center; flex: 0 0 auto; }

.tworow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sm); }
.tworow input[type="number"] { width: 7rem; }
.tworow input[type="text"] { width: 9rem; }
.tworow-sep { color: var(--mute); font-size: 14px; }

[data-when][hidden] { display: none; }

/* --------------------------------------------------------- profile card */

.profile-name {
  font-family: var(--font-display); font-weight: 900;
  font-size: 22px; line-height: 28px; letter-spacing: -.02em;
  margin: 0 0 var(--s-md);
  overflow-wrap: anywhere;
}
.cardlink { margin: var(--s-md) 0 0; font-size: 14px; line-height: 20px; }
.cardlink a { text-decoration: none; font-weight: 600; }
.cardlink a:hover { text-decoration: underline; text-underline-offset: 3px; }

.pill {
  display: inline-block;
  font-size: 12px; line-height: 16px; font-weight: 600;
  border-radius: var(--r-pill);
  padding: var(--s-xxs) var(--s-md);
}
.pill-on  { background: var(--primary-pale); color: var(--positive-deep); }
.pill-off { background: var(--canvas-soft); color: var(--mute); }
@media (prefers-color-scheme: dark) {
  .pill-on  { color: var(--primary-active); }
  .pill-off { background: rgba(232, 235, 230, .08); }
}

.typelist { list-style: none; margin: 0 0 var(--s-lg); padding: 0; }
.typerow {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sm);
  padding: var(--s-sm) 0;
  border-bottom: 1px solid var(--line);
}
.typelist .typerow:last-child { border-bottom: 0; }
.typerow input[type="color"] {
  flex: 0 0 auto; width: 44px; height: 44px;
  padding: var(--s-xxs); border-radius: var(--r-md);
  border: 1px solid var(--line-firm); background: var(--canvas);
}
.typerow input[type="text"] { flex: 1 1 8rem; min-width: 0; }
.typerow .ordernum { flex: 0 0 4.5rem; width: 4.5rem; text-align: center; padding-left: var(--s-sm); padding-right: var(--s-sm); }
.checkline {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--s-xs);
  margin: 0; font-size: 14px; font-weight: 600; color: var(--body);
}
.checkline input { width: auto; accent-color: var(--primary); }
.typemeta { flex: 1 1 100%; font-size: 12px; line-height: 16px; color: var(--mute); }

/* ----------------------------------------------------------- wider screens */

@media (min-width: 48rem) {
  .wrap { padding: var(--s-2xl) var(--s-lg) var(--s-3xl); }
  .pagefoot { padding: 0 var(--s-lg) var(--s-3xl); }
  h1 { font-size: 32px; line-height: 36px; }
  .addrow { flex-direction: row; align-items: flex-start; }
  .addrow .field-time { flex: 0 0 auto; }
  .addrow .field-body { flex: 1 1 auto; }
  .addactions, .formactions { justify-content: flex-end; }
  .addactions button, .formactions button { width: auto; }
  .chip { padding: var(--s-sm) var(--s-lg); }
  .typemeta { flex: 0 0 auto; }
  .pagehead { flex-wrap: nowrap; }
}

/* Two columns once there is room for them. Below this the single column
   still reads form → context → entries, which is the order you want on a
   phone: record first, then see where you are, then read the day back. */
@media (min-width: 64rem) {
  .wrap { max-width: 66rem; }
  .pagefoot { max-width: 66rem; }

  .dash {
    grid-template-columns: minmax(0, 1fr) 21rem;
    column-gap: var(--s-xl);
  }
  .dash-form { grid-column: 1; grid-row: 1; }
  .dash-side { grid-column: 2; grid-row: 1 / span 2; }
  .dash-list { grid-column: 1; grid-row: 2; }

  .dash-side > .profile { order: 1; }
  .dash-side > .cal     { order: 2; }
  .dash-side > .glance  { order: 3; }

  .cal-day a { min-height: 44px; }
  .tl-item { grid-template-columns: 5.2rem 1rem 1fr; padding-left: var(--s-lg); }
  .tl-item::before { left: calc(var(--s-lg) + 5.2rem + .48rem); }
}

/* --------------------------------------------------------------- printing */

@media print {
  .topbar, .daynav, .addform, .tl-edit, .pagefoot, .flash { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .wrap { max-width: none; padding: 0; }
  .timeline, .card { background: none; border-radius: 0; padding: 0; }
  .tl-item::before { background: #ccc; }
}

.watertot-do { display: flex; align-items: center; gap: var(--s-sm); margin-top: var(--s-sm); flex-wrap: wrap; }
.watertot-left { font-size: 12px; line-height: 16px; color: var(--mute); }