/* Cycle & Flow Tracker — app layer.
   Every value here comes from the Modernist handoff prototype
   ("Cycle Tracker Prototype.dc.html"); the prototype expressed them as inline
   styles, this file gives them names. Tokens live in ds/modernist.css — never
   hard-code a colour or a font here that a var() already carries. */

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #c9c7c5; /* the gutter the phone frame sits on, from the handoff */
  overscroll-behavior: none;
}
a { color: var(--color-text); cursor: pointer; }
a:hover { color: var(--color-accent-700); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── shell ─────────────────────────────────────────────────────────────── */

.frame {
  display: flex; justify-content: center; align-items: flex-start;
  min-height: 100dvh;
}
.app {
  position: relative;
  width: 390px; max-width: 100vw;
  height: 100dvh; max-height: 900px;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.5;
  box-shadow: var(--shadow-lg);
  /* The two symptoms that meant "this is not just a heavy day" (SPEC §5). */
  --amber: #7a5200;
  --amber-bg: rgba(170, 120, 20, .14);
}
.scroll {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
}
.screen { display: flex; flex-direction: column; min-height: 100%; }
.screen.pad-bottom { padding-bottom: 24px; }

.pad-x { padding: 20px 20px 0; }
.kicker {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  margin: 0 0 4px; font-family: var(--font-body); font-weight: 400;
}
.display {
  font-family: var(--font-heading); font-weight: 500;
  font-size: 30px; letter-spacing: -0.015em;
}
.title-lg { font-family: var(--font-heading); font-weight: 500; font-size: 24px; }
.title-md { font-family: var(--font-heading); font-weight: 500; font-size: 18px; }
.amber-text { color: var(--amber); }

.sub   { font-size: 12px; }
.small { font-size: 13px; }
.tiny  { font-size: 11px; }
.w600  { font-weight: 600; }
.mt-1  { margin: 10px 0 0; }
.mt-2  { margin-top: 8px; }
.section { padding: 16px 20px 24px; }
.actions { padding: 24px 20px 0; }
.stack-tight > p { margin: 4px 0 0; }

/* Button shapes used across the screens. Labels stay flush left — Modernist
   never centres a label inside a button wider than its text. */
.btn-hero   { justify-content: flex-start; text-align: left; min-height: 68px; font-size: 19px; }
.btn-row    { justify-content: flex-start; text-align: left; min-height: 52px; font-size: 15px; margin-top: 0; }
.btn-half   { justify-content: flex-start; text-align: left; min-height: 48px; flex: 1; }
.btn-inline { justify-content: flex-start; text-align: left; white-space: nowrap; min-height: 44px; }
.btn-link {
  justify-content: flex-start; text-align: left; white-space: nowrap;
  padding-left: 0; font-size: 13px; min-height: 44px;
}
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-tight { display: flex; flex-direction: column; gap: 10px; }
.row-buttons { padding: 16px 20px 0; display: flex; gap: 10px; }

/* ── log screen ────────────────────────────────────────────────────────── */

.log-head {
  padding: 20px 20px 0;
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px;
}
.today-total { padding: 8px 20px 0; }
.entry-list { display: flex; flex-direction: column; }
.entry {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  width: 100%; padding: 11px 0; min-height: 44px;
  border: 0; border-bottom: 1px solid var(--color-divider);
  background: none; color: inherit; font: inherit; font-size: 13px;
  text-align: left; cursor: pointer;
}
.entry:hover { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.entry-desc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip-amber {
  display: inline-flex; align-items: center;
  background: var(--amber-bg); color: var(--amber);
  padding: 1px 8px; font-size: 11px;
}

/* ── cycle screen ──────────────────────────────────────────────────────── */

.meds {
  padding: 14px 20px 0;
  display: flex; align-items: center; gap: 8px; font-size: 12px; flex-wrap: wrap;
}
.tag button {
  border: 0; background: none; font: inherit; color: inherit;
  cursor: pointer; padding: 0 0 0 6px; line-height: 1;
}
.med-add { color: var(--color-accent-700); font-size: 12px; cursor: pointer; }
.med-input { width: 150px; }
.date-input { width: auto; min-width: 160px; }
.pbac { padding: 20px 20px 0; display: flex; flex-direction: column; gap: 6px; }
.pbac-legend { display: flex; justify-content: space-between; font-size: 13px; }
.pbac-track {
  position: relative; height: 8px;
  background: color-mix(in srgb, var(--color-text) 12%, transparent);
}
.pbac-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--color-accent-700); }
.pbac-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--color-text); }

.daygrid { display: grid; grid-template-columns: 1fr 52px 52px 78px; gap: 6px; align-items: center; }
.daygrid-head {
  padding: 0 0 6px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
}
.daygrid .num { text-align: right; }
.dayrow { padding: 10px 0; border-bottom: 1px solid var(--color-divider); font-size: 13px; }
.badge-heavy {
  justify-self: end; font-size: 10px; padding: 1px 7px;
  box-shadow: inset 0 0 0 1px var(--color-text);
}
.dash { text-align: right; color: var(--color-neutral-500); }
.totals {
  margin: 16px 20px 0; padding: 12px 14px; background: var(--color-surface);
  display: flex; justify-content: space-between; font-size: 12px;
}
.totals strong { font-size: 15px; font-weight: 500; }

/* ── data screen ───────────────────────────────────────────────────────── */

.banner {
  margin: 14px 20px 0; padding: 12px 14px;
  border: 1px solid var(--amber); background: var(--amber-bg);
  font-size: 13px; color: var(--amber);
}
.banner .btn-secondary { border-color: var(--amber); color: var(--amber); }
.storage-track { height: 6px; background: color-mix(in srgb, var(--color-text) 12%, transparent); }
.storage-fill { height: 6px; background: var(--color-accent-700); }
.split { display: flex; justify-content: space-between; font-size: 13px; }

/* ── tab bar ───────────────────────────────────────────────────────────── */

.tabs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--color-divider); background: var(--color-bg);
  flex: none; padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  padding: 16px 0 26px; min-height: 44px; text-align: center; font-size: 12px;
  border: 0; background: none; cursor: pointer;
  font-family: var(--font-body); color: var(--color-neutral-600);
}
.tab[aria-current="page"] { font-weight: 600; color: var(--color-accent); }

/* ── segmented control (handoff variant) ───────────────────────────────
   The design system's .seg-opt fills solid accent when checked; the prototype
   uses a lighter outline+ink treatment on these dense option rows. */

.seg .seg-opt {
  border: 0; background: none; font: inherit; font-size: 13px;
  color: var(--color-text); min-height: 44px; cursor: pointer;
}
.seg .seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg .seg-opt[aria-pressed="true"] {
  color: var(--color-accent-700); box-shadow: inset 0 0 0 1px var(--color-accent);
}
.seg .seg-opt:not([aria-pressed="true"]):hover {
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

/* ── entry sheet ───────────────────────────────────────────────────────── */

.sheet-wrap {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.sheet-backdrop {
  position: absolute; inset: 0; width: 100%; border: 0; padding: 0;
  background: color-mix(in srgb, var(--color-neutral-900) 55%, transparent);
  cursor: pointer;
}
.sheet {
  position: relative; background: var(--color-bg); box-shadow: var(--shadow-lg);
  padding: 20px 20px 28px; display: flex; flex-direction: column; gap: 14px;
  max-height: 86%; overflow-y: auto;
}
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sheet-time { font-size: 13px; }
.sheet-when { width: auto; max-width: 210px; min-height: 44px; }
.sheet-time a { color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 3px; }
.sat-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.sat {
  padding: 12px 8px; text-align: center; min-height: 72px; cursor: pointer;
  font-family: var(--font-body); background: none;
  border: 1px solid var(--color-divider); color: var(--color-text);
}
.sat:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.sat[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent-700);
}
.sat b { font-size: 14px; font-weight: 500; display: block; }
.sat span { font-size: 11px; opacity: .65; }
.opt-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.opt-row.top { align-items: flex-start; }
.opt-label { width: 64px; flex: none; }
.opt-row.top .opt-label { padding-top: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 0; cursor: pointer; font-family: var(--font-body);
  display: inline-flex; align-items: center; padding: 6px 12px;
  font-size: 12px; min-height: 32px;
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  color: var(--color-neutral-700);
}
.chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent-700); box-shadow: inset 0 0 0 1px var(--color-accent);
}
.chip.is-amber[aria-pressed="true"] {
  background: var(--amber-bg); color: var(--amber);
  box-shadow: inset 0 0 0 1px var(--amber);
}

/* ── toast ─────────────────────────────────────────────────────────────── */

.toast {
  position: absolute; left: 12px; right: 12px; bottom: 86px; z-index: 20;
  background: var(--color-neutral-900); color: var(--color-neutral-100);
  padding: 12px 14px; display: flex; align-items: center; gap: 12px;
  font-size: 13px; box-shadow: var(--shadow-lg);
}
.toast span { flex: 1; }
.toast button {
  flex: none; border: 0; background: none; font: inherit; font-size: 13px;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
  color: var(--color-accent-200); padding: 4px 0;
}
.toast button.undo { color: var(--color-neutral-300); }

/* ── confirm dialog ────────────────────────────────────────────────────── */

.modal {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--color-neutral-900) 55%, transparent);
  padding: 24px;
}
.modal-box {
  background: var(--color-bg); box-shadow: var(--shadow-lg); padding: 20px;
  display: flex; flex-direction: column; gap: 14px; width: 100%;
}

/* ── doctor report ─────────────────────────────────────────────────────── */

.report-bar {
  padding: 14px 20px; display: flex; align-items: center; gap: 12px;
  border-bottom: 2px solid var(--color-divider);
  position: sticky; top: 0; background: var(--color-bg); z-index: 2;
}
.report-body { padding: 20px; }
.report-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.report-title { font-family: var(--font-heading); font-weight: 500; font-size: 22px; letter-spacing: -0.015em; }
.report-meta { display: flex; gap: 24px; margin-top: 10px; font-size: 12px; flex-wrap: wrap; align-items: baseline; }
.report-name { width: 180px; min-height: 28px; padding: 2px 6px; font-size: 12px; }
.report-note { font-size: 11.5px; margin: 10px 0 0; }
.report-foot { font-size: 10.5px; margin: 22px 0 0; line-height: 1.6; }
.report-scroll { overflow-x: auto; }
.report-table { font-size: 11.5px; }
.report-table.wide { min-width: 640px; }
.report-empty { font-size: 12px; margin: 0 0 12px; }

/* iOS zooms the viewport when a focused input is under 16px. */
@media (max-width: 480px) {
  .input { font-size: 16px; }
}

/* ── print — A4/Letter, the report only ────────────────────────────────── */

@media print {
  body { background: #fff; }
  .frame { display: block; min-height: 0; }
  .app {
    width: auto; max-width: none; height: auto; max-height: none;
    overflow: visible; box-shadow: none; background: #fff;
    font-size: 10pt; line-height: 1.4;
  }
  .scroll { display: block; overflow: visible; }
  .screen { display: block; min-height: 0; padding-bottom: 0; }
  .tabs, .report-bar, .toast, .sheet-wrap, .modal, .no-print { display: none !important; }
  .report-body { padding: 0; }
  .report-scroll { overflow: visible !important; }
  .report-table, .report-table.wide { min-width: 0; font-size: 8.5pt; }
  .report-name { border: 0; background: none; padding: 0; width: auto; }
  .table th, .table td { padding: 3px 6px; }
  .table tbody tr:hover { background: none; }
  table { page-break-inside: auto; }
  tr, h6 { page-break-inside: avoid; }
  h6 { page-break-after: avoid; }
  @page { margin: 14mm; }
}