/* 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;
}
/* The title can be a name the patient chose, up to 30 characters. The header
   wraps so the chips drop below a long name instead of crushing it. */
.ap-bar { flex-wrap: wrap; }
.ap-head { flex: 1 1 10rem; min-width: 0; }
.ap-titlerow { display: flex; align-items: center; gap: 0.4rem; }
.ap-title {
  font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; color: var(--title); margin: 0;
  min-width: 0; overflow-wrap: break-word;
}
.ap-title[data-long] { font-size: 1.22rem; }
.ap-chips { margin-left: auto; }
/* Pencil beside the title: tells the patient the name is theirs to change. */
.ap-rename {
  flex: 0 0 auto; width: 2.25rem; height: 2.25rem; margin: -0.2rem 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); border-radius: 50%;
  color: var(--dim); cursor: pointer; padding: 0;
}
.ap-rename svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ap-rename:hover, .ap-rename:focus-visible { color: var(--teal); border-color: var(--teal); }
.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; }

/* ---------- page shell ----------
   For a copy whose index.html cannot carry an inline <style> block. */
html.ap-doc, html.ap-doc body { margin: 0; padding: 0; height: 100%; background: #0c1620; }
html.ap-doc body { overscroll-behavior: none; }

/* ---------- 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-amber { background: var(--amber); }
.ap-alert-amber .ap-alert-call { color: var(--amber); }
.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; }
/* spacing variants that used to be inline style attributes, which a strict
   Content-Security-Policy (no 'unsafe-inline' for styles) ignores */
.ap .ap-sub-top { margin-top: 1rem; }
.ap .ap-sub-flush { margin: 0; }
.ap .ap-sub-gap { margin: 0.6rem 0 0; }
.ap .ap-sub-hint { margin: 0 0 0.75rem; }
.ap-daynote { color: var(--dim); font-size: 0.9rem; margin: -0.35rem 0 0.85rem; padding: 0 0.25rem; }
.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-btn-quiet { color: var(--dim); }
.ap-input-text { font-family: var(--sans); text-align: left; }

/* one time "name your app" nudge on the log screen */
.ap-tip {
  background: var(--panel); border: 1px solid var(--teal); border-radius: 12px;
  padding: 1rem; margin: 0 0 0.85rem;
}
.ap-tip-title { font-family: var(--serif); font-size: 1.15rem; color: var(--teal); margin: 0 0 0.35rem !important; }
.ap-tip p { font-size: 0.94rem; }
.ap-tip-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.ap-tip-actions .ap-btn { flex: 1 1 8rem; min-height: 2.9rem; margin-top: 0 !important; }
.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-own {
  border-left: 3px solid var(--amber); background: var(--panel-2);
  padding: 0.75rem 0.9rem; border-radius: 0 10px 10px 0; margin: 0 0 0.85rem;
}
.ap .jp-install-own strong { display: block; color: var(--amber); margin-bottom: 0.25rem; }
.ap .jp-install-own p { margin: 0; }
.ap .jp-install-name { color: var(--teal); }
.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 {
  .ap {
    position: static; display: block; overflow: visible;
    background: #fff; color: #000; font-size: 11pt;
  }
  .ap-bar, .ap-tabs, .ap-main, .ap .jp-toast, .ap-toast { display: none !important; }
  html.ap-doc, html.ap-doc body { background: #fff; height: auto; }
  .ap-print { display: block; }
  .ap-print h1 { font-family: var(--serif); font-size: 16pt; margin: 0 0 0.25rem; }
  .ap-print .meta { margin: 0 0 0.75rem; font-size: 10pt; }
  .ap-print table { width: 100%; border-collapse: collapse; font-size: 10pt; }
  .ap-print th, .ap-print td { border: 1px solid #000; padding: 4pt 6pt; text-align: left; }
  .ap-print td { height: 20pt; }
  .ap-print .foot { margin-top: 0.75rem; font-size: 9pt; }
  .ap-print .ap-print-h2 { font-family: var(--serif); font-size: 12pt; margin: 1rem 0 0.35rem; }
  .ap-print-slots table { margin: 0 0 8pt; page-break-inside: avoid; break-inside: avoid; }
  .ap-print-slots th { background: #eee; font-weight: 600; width: 16%; }
  .ap-print-slots td { height: 16pt; }
  .ap-print-slots .ap-slot-total th { text-align: right; background: #fff; }
}