/* Drain Log: app shell.
   Design system borrowed from Attending Log so the two feel like one suite:
   dark ground, teal primary, amber secondary, serif display, tabular numerals,
   fixed header and bottom tab bar with only the middle scrolling.

   No web fonts. The app has to open with no signal, and a font that fails to
   load reflows the page under a patient's thumb. */

.ap {
  --bg:      #0c1620;
  --panel:   #12202c;
  --panel-2: #162836;
  --line:    #1f3543;
  --ink:     #e8f0f5;
  --dim:     #7f97a6;
  --teal:    #3ad0b4;
  --amber:   #e2924f;
  --red:     #ef6b6b;
  --title:   #93bcd9;
  --on-teal: #06202a;

  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  color-scheme: dark;
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  overflow: hidden;
}

.ap[data-theme="light"] {
  color-scheme: light;
  --bg:      #f2f6f8;
  --panel:   #ffffff;
  --panel-2: #eef4f7;
  --line:    #d5e1e8;
  --ink:     #16242e;
  --dim:     #5b7383;
  --teal:    #0f7a66;
  --amber:   #a55f16;
  --red:     #b32d2d;
  --title:   #1c6b8c;
  --on-teal: #ffffff;
}

.ap *, .ap *::before, .ap *::after { box-sizing: border-box; }
.ap p { margin: 0 0 0.75rem; }
.ap p:last-child { margin-bottom: 0; }
.ap ul, .ap ol { margin: 0 0 0.75rem; padding-left: 1.2rem; }
.ap li { margin-bottom: 0.4rem; }
.ap li:last-child { margin-bottom: 0; }
.ap-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ap :focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ---------- header ---------- */

.ap-bar {
  padding: calc(0.85rem + env(safe-area-inset-top)) 1rem 0.85rem;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
}
.ap-title { font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; color: var(--title); margin: 0; }
.ap-who {
  font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--dim); margin: 0.2rem 0 0;
}
.ap-chips { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; flex: 0 0 auto; }
.ap-chiprow { display: flex; align-items: center; gap: 0.4rem; }
.ap-chip {
  border: 1px solid var(--line); border-radius: 999px; background: transparent;
  color: var(--dim); font: inherit; font-size: 0.78rem; padding: 0.28rem 0.7rem;
  white-space: nowrap;
}
.ap-chip-btn { cursor: pointer; }
.ap-chip-round { width: 2rem; height: 2rem; padding: 0; border-radius: 50%; font-size: 0.95rem; }
.ap-chip-live { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- pinned goal bar ----------
   Sits in its own grid row so it never scrolls away. Empty means zero height. */

.ap-alertbar:empty { display: none; }
.ap-alert {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem 1rem;
  background: var(--teal); color: var(--on-teal);
  border-bottom: 1px solid var(--line);
}
.ap-alert-text { flex: 1 1 auto; font-size: 0.95rem; line-height: 1.35; font-weight: 600; }
.ap-alert-text small { display: block; font-weight: 400; opacity: 0.85; font-size: 0.82rem; }
.ap-alert-call {
  flex: 0 0 auto; text-decoration: none; white-space: nowrap;
  background: var(--on-teal); color: var(--teal);
  font-weight: 700; font-size: 0.95rem; font-variant-numeric: tabular-nums;
  padding: 0.55rem 0.9rem; border-radius: 999px; min-height: 2.5rem;
  display: inline-flex; align-items: center;
}

/* ---------- scrolling body ---------- */

.ap-main {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 1rem 1rem 2rem;
}
.ap-screen[hidden] { display: none !important; }

.ap-h {
  font-family: var(--serif); font-size: 1.6rem; line-height: 1.15;
  margin: 0.35rem 0 0.15rem; color: var(--ink);
}
.ap-sub { color: var(--dim); font-size: 0.95rem; margin: 0 0 1rem; }
.ap-eyebrow {
  font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 0.6rem;
}

/* ---------- cards ---------- */

.ap-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 1rem; margin: 0 0 0.85rem;
}
.ap-card-accent { border-top: 3px solid var(--teal); }
.ap-card-alert { border-color: var(--red); }

/* summary strip */
.ap-strip {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 0.85rem 1rem; margin: 0 0 0.85rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
}
.ap-strip-label {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim); flex: 1 1 auto;
}
.ap-stats { display: flex; gap: 1.1rem; flex: 0 0 auto; }
.ap-stat { text-align: center; }
.ap-stat-n {
  font-family: var(--mono); font-size: 1.35rem; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ap-stat-k {
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dim); margin-top: 0.15rem;
}
.ap-n-teal { color: var(--teal); }
.ap-n-amber { color: var(--amber); }
.ap-n-plain { color: var(--ink); }

/* collapsible */
.ap-fold {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  margin: 0 0 0.7rem; overflow: hidden;
}
.ap-fold > summary {
  list-style: none; cursor: pointer; padding: 0.9rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  font-weight: 600;
}
.ap-fold > summary::-webkit-details-marker { display: none; }
.ap-fold-plus { color: var(--dim); font-size: 1.25rem; line-height: 1; flex: 0 0 auto; }
.ap-fold[open] .ap-fold-plus { transform: rotate(45deg); }
.ap-fold-body { padding: 0 1rem 1rem; border-top: 1px solid var(--line); padding-top: 0.85rem; }

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

.ap-field { margin: 0 0 0.85rem; }
.ap-field:last-child { margin-bottom: 0; }
.ap-label { display: block; font-size: 0.88rem; margin: 0 0 0.35rem; color: var(--ink); }
.ap-label-note { color: var(--dim); font-weight: 400; }
.ap-input, .ap-select {
  width: 100%; min-height: 3rem; padding: 0.6rem 0.75rem;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--mono); font-size: 1.05rem; text-align: center;
  font-variant-numeric: tabular-nums;
}
.ap-select {
  font-family: var(--sans); text-align: left;
  background-color: var(--panel);
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 1.35rem, calc(100% - 0.75rem) 1.35rem;
  background-size: 0.36rem 0.36rem, 0.36rem 0.36rem;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}
/* The dropdown list itself is drawn by the operating system. color-scheme above
   is what makes it render dark; these keep the contrast right where a browser
   honours option colours instead. */
.ap-select option { background-color: var(--panel); color: var(--ink); }
.ap-input { background-color: transparent; }
.ap-input::placeholder { color: var(--dim); }

.ap-quick { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.5rem; }
.ap-quick-btn {
  flex: 1 1 3.2rem; min-height: 2.7rem; padding: 0.4rem 0.3rem;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--mono); font-size: 0.95rem; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.ap-quick-btn[aria-pressed="true"] {
  border-color: var(--teal); color: var(--teal);
}

.ap-seg { display: flex; gap: 0.4rem; }
.ap-seg-btn {
  flex: 1 1 0; min-height: 2.8rem; border: 1px solid var(--line); border-radius: 10px;
  background: transparent; color: var(--dim); font: inherit; font-size: 0.95rem; cursor: pointer;
}
.ap-seg-btn[aria-pressed="true"] {
  border-color: var(--teal); color: var(--teal); background: var(--panel-2);
}

.ap-btn {
  width: 100%; min-height: 3rem; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 600;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
}
.ap-btn + .ap-btn { margin-top: 0.55rem; }
.ap-btn-primary { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.ap-btn-danger { border-color: var(--red); color: var(--red); }
.ap-msg { min-height: 1.2rem; margin: 0.55rem 0 0; font-size: 0.9rem; color: var(--teal); }
.ap-msg-warn { color: var(--amber); }

/* ---------- entries ---------- */

.ap-rows { list-style: none; margin: 0; padding: 0; }
.ap-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--line);
}
.ap-row:last-child { border-bottom: none; }
.ap-row-when { flex: 1 1 auto; font-size: 0.9rem; }
.ap-row-when small { display: block; color: var(--dim); font-size: 0.78rem; }
.ap-row-amt {
  font-family: var(--mono); font-size: 1.05rem; font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.ap-row-x {
  flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--dim);
  font-size: 1rem; line-height: 1; cursor: pointer;
}

.ap-daily { list-style: none; margin: 0; padding: 0; }
.ap-day {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 0; border-bottom: 1px solid var(--line);
}
.ap-day:last-child { border-bottom: none; }
.ap-day-name { flex: 1 1 auto; font-size: 0.92rem; }
.ap-day-name small { display: block; color: var(--dim); font-size: 0.75rem; }
.ap-day-n {
  font-family: var(--mono); font-size: 1.1rem; font-variant-numeric: tabular-nums;
  flex: 0 0 4.5rem; text-align: right;
}
.ap-pill {
  flex: 0 0 auto; font-size: 0.7rem; padding: 0.2rem 0.55rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--dim); white-space: nowrap;
}
.ap-pill-good { border-color: var(--teal); color: var(--teal); }
.ap-pill-over { border-color: var(--amber); color: var(--amber); }

.ap-empty { color: var(--dim); font-size: 0.93rem; }

/* ---------- banner and callouts ---------- */

.ap-banner {
  border: 1px solid var(--teal); border-radius: 12px; background: var(--panel-2);
  padding: 1rem; margin: 0 0 0.85rem;
}
.ap-banner h2 { font-family: var(--serif); font-size: 1.2rem; margin: 0 0 0.5rem; color: var(--teal); }

.ap-note {
  border-left: 3px solid var(--teal); background: var(--panel-2);
  padding: 0.8rem 0.9rem; border-radius: 0 10px 10px 0; margin: 0.85rem 0 0;
}
.ap-note-warn { border-left-color: var(--amber); }
.ap-note strong { display: block; margin-bottom: 0.3rem; }

.ap-call {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 100%; min-height: 3.4rem; border-radius: 12px; text-decoration: none;
  background: var(--teal); color: var(--on-teal); font-weight: 700; font-size: 1.15rem;
  font-variant-numeric: tabular-nums; margin: 0 0 0.85rem;
}
.ap-hours { color: var(--dim); font-size: 0.88rem; }

.ap-steps { counter-reset: s; list-style: none; padding: 0; margin: 0; }
.ap-steps li {
  counter-increment: s; position: relative; padding-left: 2rem; margin-bottom: 0.7rem;
}
.ap-steps li::before {
  content: counter(s); position: absolute; left: 0; top: 0.1rem;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--teal);
  font-size: 0.75rem; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
}

.ap-credit { text-align: center; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.ap-credit p { margin: 0 0 0.2rem; font-size: 0.85rem; }
.ap-credit-ver { color: var(--dim); font-size: 0.75rem; }

/* ---------- tab bar ---------- */

.ap-tabs {
  display: flex; border-top: 1px solid var(--line); background: var(--bg);
  padding-bottom: env(safe-area-inset-bottom);
}
.ap-tab {
  flex: 1 1 0; background: transparent; border: none; cursor: pointer;
  padding: 0.55rem 0.25rem 0.6rem; color: var(--dim); font: inherit; font-size: 0.72rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  border-top: 2px solid transparent; margin-top: -1px; min-height: 3.4rem;
}
.ap-tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ap-tab[aria-selected="true"] { color: var(--teal); border-top-color: var(--teal); }
.ap-tab-dot {
  position: absolute; transform: translate(1.1rem, -0.35rem);
  width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--amber);
}

/* ---------- install card, rendered by js/jpdrain-pwa.js ---------- */

.ap .jp-install {
  background: var(--panel); border: 1px solid var(--teal); border-radius: 12px;
  padding: 1rem; margin: 0 0 0.85rem;
}
.ap .jp-install-title {
  font-family: var(--serif); font-size: 1.2rem; margin: 0 0 0.5rem; color: var(--teal);
}
.ap .jp-install p { font-size: 0.94rem; }
.ap .jp-install-first { font-weight: 700; color: var(--ink); }
.ap .jp-install-sub { font-weight: 600; margin-bottom: 0.35rem; }
.ap .jp-install-steps { counter-reset: s; list-style: none; padding: 0; margin: 0 0 0.85rem; }
.ap .jp-install-steps li {
  counter-increment: s; position: relative; padding-left: 2rem; margin-bottom: 0.6rem;
}
.ap .jp-install-steps li::before {
  content: counter(s); position: absolute; left: 0; top: 0.1rem;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--teal);
  font-size: 0.75rem; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
}
.ap .jp-install-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ap .jp-install-actions .jp-btn {
  flex: 1 1 8rem; min-height: 2.9rem; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 0.98rem; font-weight: 600;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
}
.ap .jp-install-actions .jp-btn-primary {
  background: var(--teal); border-color: var(--teal); color: var(--on-teal);
}
.ap .jp-install-actions .jp-btn-quiet { color: var(--dim); }

/* ---------- toast ---------- */

.ap .jp-toast, .ap-toast {
  position: fixed; left: 0.75rem; right: 0.75rem; bottom: calc(4.2rem + env(safe-area-inset-bottom));
  z-index: 50; display: flex; align-items: center; gap: 0.75rem; justify-content: space-between;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 10px; padding: 0.7rem 0.8rem; font-size: 0.92rem;
}
.ap .jp-toast .jp-btn, .ap-toast button {
  flex: 0 0 auto; min-height: 2.3rem; padding: 0.35rem 0.85rem; border-radius: 8px;
  background: var(--teal); border: none; color: var(--on-teal); font: inherit; font-weight: 600;
  cursor: pointer;
}

/* ---------- print ---------- */

.ap-print { display: none; }

@media print {
  /* index.html paints the page dark so the app has no white flash on load.
     That must not follow the sheet onto paper, and height:100% would otherwise
     push a blank second page. */
  html, body { background: #fff !important; height: auto !important; }
  .ap {
    position: static; display: block; overflow: visible;
    background: #fff; color: #000; font-size: 11pt;
  }
  /* Everything the app puts on screen is hidden for print, including the
     pinned goal alert, which lives in its own grid row outside .ap-main and
     was otherwise landing across the top of the printed sheet. */
  .ap-bar, .ap-tabs, .ap-main, .ap-alertbar, .ap-alert,
  .ap .jp-toast, .ap-toast, .jp-install { display: none !important; }
  .ap-print { display: block; }
  .ap-print .ap-print-head {
    margin: 0 0 0.35rem; padding-bottom: 0.3rem; border-bottom: 1.5pt solid #000;
    font-size: 10.5pt; font-weight: 600; letter-spacing: 0.01em;
  }
  .ap-print .ap-print-head .dot { font-weight: 400; padding: 0 0.15rem; }
  .ap-print h1 { font-family: var(--serif); font-size: 16pt; margin: 0 0 0.25rem; }
  .ap-print h2 {
    font-family: var(--serif); font-size: 11.5pt; font-weight: 600;
    margin: 0.9rem 0 0.3rem;
  }
  .ap-print .meta { margin: 0 0 0.75rem; font-size: 10pt; }
  .ap-print table {
    width: 100%; border-collapse: collapse; font-size: 10pt;
    margin: 0; page-break-inside: auto;
  }
  .ap-print tr { page-break-inside: avoid; }
  .ap-print thead { display: table-header-group; }
  .ap-print th, .ap-print td { border: 1px solid #000; padding: 4pt 6pt; text-align: left; }
  .ap-print th { background: #eee; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ap-print td { height: 20pt; }
  /* A day already under the goal. Marked with a tick as well as weight, so it
     still reads on a black and white printer. */
  .ap-print td.under { font-weight: 700; }
  .ap-print .foot { margin-top: 0.75rem; font-size: 9pt; }
}