/* HealthOS — Ocean design tokens. Every colour, radius and spacing value used by the
   components below comes from these custom properties; pages never hard-code colours. */
:root {
  color-scheme: light dark;
  /* Handoff H1 tokens (HEALTHOS_UI_IMPLEMENTATION_HANDOFF §Visual contract). */
  --bg: light-dark(#f4f6f5, #111c22);
  --panel: light-dark(#ffffff, #1b2931);
  --ink: light-dark(#17323a, #e8f0ee);
  --muted: light-dark(#597076, #a5b9bd);
  --line: light-dark(#dce5e3, #35464d);
  --soft: light-dark(#eaf0ee, #25383d);
  --accent: light-dark(#19796c, #7ed4bb);
  --tint: light-dark(#e1f1e9, #244039);
  --on: light-dark(#ffffff, #10221f);
  --blue: light-dark(#5274bb, #98b9fa);
  --amber: light-dark(#9a5e27, #e9b17c);
  --purple: light-dark(#8d6daa, #c6afe2);
  --warn: light-dark(#fbf0e2, #3d3122);
  --danger: light-dark(#a8323a, #ff9ea4);
  --danger-bg: light-dark(#fde8e9, #4a2428);
  --space: 22px;
  --r-panel: 15px;
  --r-control: 9px;
  --r-chip: 6px;
  --rail: 164px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 14px/1.5 var(--font); background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; }
h1 { font-size: 32px; font-weight: 620; letter-spacing: -1.1px; line-height: 1.15; margin: 0 0 8px; }
h2 { font-size: 19px; font-weight: 600; margin: 0 0 10px; }
h3 { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
p { margin: 0 0 10px; }
a { color: var(--accent); }
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--accent); font-weight: 650; margin: 0 0 6px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--on); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; top: 8px; }
.boot { padding: 40px; text-align: center; color: var(--muted); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- shell ---------- */
.app { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh;
  background: linear-gradient(to right, var(--panel) calc(var(--rail) - 1px), var(--line) 0 var(--rail), transparent 0); }
.rail { background: var(--panel); border-right: 1px solid var(--line); padding: 26px 14px 18px; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
.rail > * { flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 650; margin: 0 8px 30px; color: var(--ink); text-decoration: none; }
.brand-mark { background: var(--accent); color: var(--panel); border-radius: 10px; padding: 4px 9px; font-size: 15px; font-weight: 700; }
.rail nav { display: grid; gap: 4px; }
.nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--muted); margin: 24px 12px 8px; font-weight: 500; }
.nav-btn { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 10px 12px; border-radius: var(--r-control); color: var(--ink); text-decoration: none; font-weight: 550; }
.nav-btn:hover { background: var(--soft); }
.nav-btn[aria-current="page"] { background: var(--tint); color: var(--accent); }
.nav-btn.quiet { color: var(--muted); font-weight: 500; }
.nav-ico { width: 18px; text-align: center; flex: none; }
.nav-ico svg { width: 17px; height: 17px; display: block; margin: auto; }
.rail-foot { margin-top: auto; padding: 14px 6px 0; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 12px; color: var(--muted); }
.rail-foot .row { gap: 6px; }
.rail-foot button { min-height: 32px; padding: 4px 9px; font-size: 12px; }
.main { min-width: 0; display: flex; flex-direction: column; }
.space-badge { font-size: 11px; padding: 3px 8px; border-radius: var(--r-chip); background: var(--warn); color: var(--amber); font-weight: 600; justify-self: start; }
.space-badge.personal { background: var(--tint); color: var(--accent); }
.content { padding: 24px; max-width: 1180px; width: 100%; }
.page-foot { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.bottom-nav { display: none; }

/* ---------- components ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 18px; margin-bottom: 16px; }
.panel > h2:first-child, .panel > .eyebrow:first-child { margin-top: 0; }
.hero { background: var(--tint); border-color: transparent; }
.grid { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: 10px; }
.chip { display: inline-block; font-size: 11px; line-height: 1.4; padding: 2px 7px; border-radius: var(--r-chip); background: var(--soft); color: var(--muted); font-weight: 600; white-space: nowrap; }
.chip.good { background: var(--tint); color: var(--accent); }
.chip.attention { background: var(--warn); color: var(--amber); }
.chip.info { background: var(--soft); color: var(--blue); }
.chip.purple { background: var(--soft); color: var(--purple); }
.chip.bad { background: var(--danger-bg); color: var(--danger); }
.note { background: var(--warn); color: var(--ink); border-radius: var(--r-control); padding: 10px 12px; margin: 0 0 12px; }
.note.info { background: var(--soft); }
.note.error { background: var(--danger-bg); }
.note strong { color: var(--amber); }
.note.error strong { color: var(--danger); }
.items { list-style: none; margin: 0; padding: 0; }
.item { display: grid; grid-template-columns: 45px 1fr auto; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); align-items: start; }
.item:first-child { border-top: 0; }
.item .time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; padding-top: 1px; }
.photo { margin: 6px 0; }
.photo .thumb { display: block; max-width: 160px; max-height: 160px; border-radius: 6px; border: 1px solid var(--line); object-fit: cover; margin-bottom: 4px; }
.item .title { font-weight: 600; }
.item .meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.item .chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.item .chips > .chip { white-space: normal; overflow-wrap: anywhere; } /* only a chip wider than its row wraps */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.stat { background: var(--soft); border-radius: var(--r-control); padding: 10px 12px; }
.stat .v { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.stat .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; }
.tabs button { background: var(--soft); color: var(--ink); border: 0; }
.tabs button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
.empty { text-align: center; padding: 28px 16px; background: var(--soft); border-radius: var(--r-control); color: var(--muted); }
.error-state { background: var(--danger-bg); border-radius: var(--r-control); padding: 14px; }
.loading { color: var(--muted); padding: 20px 0; }
.loading::before { content: ""; display: inline-block; width: 12px; height: 12px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; margin-right: 8px; vertical-align: -1px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loading::before { animation: none; } }

button, .btn { font: inherit; font-weight: 600; min-height: 36px; padding: 6px 13px; border-radius: var(--r-control); border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
button:hover { background: var(--soft); }
button.primary, .btn.primary { background: var(--accent); color: var(--on); border-color: var(--accent); }
button.primary:hover { filter: brightness(1.05); }
button.danger { color: var(--danger); }
button.link { border: 0; background: none; color: var(--accent); padding: 4px 6px; min-height: 0; }
button:disabled { opacity: .55; cursor: not-allowed; }
.icon-btn { padding: 6px 9px; }

form .fields, .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.field { display: grid; gap: 4px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field > span, .field > legend { font-size: 12px; font-weight: 600; color: var(--muted); }
fieldset.field { border: 0; padding: 0; margin: 0; }
.field .hint { font-size: 11px; color: var(--muted); font-weight: 400; }
.field.row { display: flex; align-items: center; }
.field.row > span { font-size: 14px; font-weight: 400; color: inherit; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-control); padding: 7px 9px; min-height: 36px; width: 100%; }
textarea { min-height: 70px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; }
.row > input, .row > select { width: auto; }
.form-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.invalid { border-color: var(--danger); }
.table-wrap + h3 { margin-top: 18px; }
.list-rows { display: grid; gap: 6px; }
.list-row { display: grid; grid-template-columns: minmax(8em, 2fr) repeat(3, minmax(4.2em, 1fr)) auto; gap: 6px; align-items: end; }
.list-cell { display: grid; gap: 2px; min-width: 0; }
.list-cell > span { font-size: 11px; color: var(--muted); }
.list-cell input { width: 100%; min-width: 0; }
@media (max-width: 580px) { .list-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .list-cell:first-child { grid-column: 1 / -1; } }
.field-error { color: var(--danger); font-size: 12px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); font-weight: 600; }
.table-wrap { overflow-x: auto; }
tr.deleted td { color: var(--muted); text-decoration: line-through; }
details > summary { cursor: pointer; font-weight: 600; }
pre { white-space: pre-wrap; word-break: break-word; background: var(--soft); padding: 10px; border-radius: var(--r-control); font-size: 12px; max-height: 360px; overflow: auto; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
dl.kv dt { color: var(--muted); font-size: 12px; }
dl.kv dd { margin: 0; }

.toast { position: fixed; right: 16px; bottom: 16px; background: var(--ink); color: var(--panel); padding: 10px 14px; border-radius: var(--r-control); z-index: 20; max-width: 360px; }
.toast.error { background: var(--danger); color: #fff; }

/* charts */
.chart svg { width: 100%; max-width: 820px; height: auto; display: block; }
.chart .axis { stroke: var(--line); }
.chart .gridline { stroke: var(--line); stroke-dasharray: 2 3; }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2; }
.chart .dot { fill: var(--accent); }
.chart .alt { fill: var(--purple); }
.chart .missing { fill: none; stroke: var(--muted); stroke-width: 1; }
.chart .ov-experiment { fill: var(--blue); opacity: .12; }
.chart .ov-exception { fill: var(--amber); opacity: .18; }
.chart .agg { stroke: var(--amber); stroke-dasharray: 5 4; stroke-width: 1.5; }
.chart text { fill: var(--muted); font-size: 11px; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

/* ---------- page helpers ---------- */
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chips { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0; }
.chip.optional { background: var(--soft); color: var(--muted); font-style: italic; }
.small-btn, button.small-btn { min-height: 30px; padding: 3px 10px; font-size: 12px; }
.small-btn.danger { color: var(--danger); }
.panel.inset { background: var(--soft); border-color: transparent; margin: 10px 0 0; padding: 12px; }
.row.actions { margin-top: 6px; gap: 6px; }
.item.deleted .title, .item.deleted .meta { color: var(--muted); text-decoration: line-through; }
.item > .actions { display: flex; gap: 6px; flex-wrap: wrap; }
ol.history { margin: 8px 0 0; padding-left: 20px; }
ol.history li + li { margin-top: 6px; }
table.data td, table.data th { font-variant-numeric: tabular-nums; }
table.diff td { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
table.diff tr.added td { background: var(--tint); }
table.diff tr.removed td { background: var(--danger-bg); }
table.diff tr.changed td { background: var(--warn); }
pre.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
a.button, a.btn { font-weight: 600; min-height: 36px; padding: 6px 13px; border-radius: var(--r-control); border: 1px solid var(--line); background: var(--panel); color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
a.button.primary { background: var(--accent); color: var(--on); border-color: var(--accent); }
.draft { border-left: 3px solid var(--amber); padding-left: 12px; }
.note.attention { background: var(--warn); }
.note.good { background: var(--tint); }
.chart { margin: 0 0 18px; }
.chart figcaption { margin-bottom: 6px; }
.chart .grid { stroke: var(--line); stroke-dasharray: 2 3; }
.chart text.axis { fill: var(--muted); stroke: none; }
.chart text.missing { fill: var(--danger); stroke: none; font-size: 12px; }
.chart .overlay.experiment { fill: var(--purple); opacity: .14; }
.chart .overlay.exception { fill: var(--amber); opacity: .18; }

.auth { max-width: 520px; margin: 7vh auto; padding: 0 16px; }

/* ---------- H1 components (reference: healthos-handoff-reference.fragment.html) ---------- */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head .sub { max-width: 60ch; }
.sub { color: var(--muted); font-size: 12px; }
.seg { display: inline-flex; gap: 3px; padding: 4px; background: var(--soft); border-radius: 10px; flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: 7px 11px; border-radius: 7px; color: var(--muted); min-height: 34px; font-weight: 550; }
.seg button:hover { background: none; color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 4px #00000014; }
button.quiet, .btn.quiet { border: 0; background: var(--soft); }
.pills { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.pills button { border: 1px solid var(--line); background: var(--panel); padding: 8px 13px; border-radius: 20px; color: var(--muted); font-weight: 500; }
.pills button[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: transparent; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: var(--r-chip); background: var(--soft); font-size: 11px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.pill.good { background: var(--tint); color: var(--accent); }
.status { color: var(--accent); font-size: 12px; font-weight: 550; }
.stackg { display: grid; gap: 16px; }
.two { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(230px, 1fr); gap: 18px; align-items: start; }
.dashgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dashgrid .wide { grid-column: 1 / -1; }
.panel .panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.bigstat { font-size: 36px; line-height: 1.12; letter-spacing: -1.4px; font-weight: 550; margin: 12px 0 8px; font-variant-numeric: tabular-nums; }
.bigstat small { font-size: 14px; letter-spacing: 0; font-weight: 400; color: var(--muted); }
.notice { padding: 10px 14px; border-radius: 8px; background: var(--tint); color: var(--accent); font-size: 12px; margin-bottom: 15px; }
.quick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

/* area group on Today */
.area-group { padding: 0; overflow: hidden; }
.area-group > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px; cursor: pointer; }
.area-group > summary::-webkit-details-marker, .routine summary::-webkit-details-marker, .plan-card > summary::-webkit-details-marker { display: none; }
.area-group > summary > span:first-child { display: flex; gap: 10px; align-items: center; font-size: 18px; font-weight: 600; }
.area-group[open] > summary .chev, .routine details[open] > summary .chev { transform: rotate(180deg); }
.chev { display: inline-block; transition: transform .15s; }
.group-body { padding: 0 20px 18px; display: grid; gap: 14px; }
.capture-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.capture-item:last-child { border-bottom: 0; }
.capture-item > button { flex: none; white-space: nowrap; }
.capture-list { border-top: 1px solid var(--line); }
.area-open { border: 0; background: none; color: var(--accent); padding: 8px 0; min-height: 0; font-weight: 550; text-decoration: none; }
.area-open:hover { background: none; text-decoration: underline; }

/* routine card */
.routine { padding: 0; overflow: hidden; margin: 0; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--panel); }
.routine-head { padding: 18px 20px; display: flex; align-items: center; gap: 14px; }
.routine-text { flex: 1; min-width: 0; }
.routine-symbol { width: 52px; height: 52px; background: var(--tint); color: var(--accent); border-radius: 16px; display: grid; place-items: center; flex-shrink: 0; font-size: 22px; }
.routine-symbol svg { width: 27px; height: 27px; }
.routine h3 { font-size: 19px; margin: 0; }
.grow { flex: 1; min-width: 0; }
.routine details > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 500; }
.detail-body { padding: 0 20px 18px; }
.step { padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 25px 1fr; gap: 10px; }
.step:last-child { border-bottom: 0; }
.stepnum { height: 24px; border-radius: 50%; background: var(--soft); color: var(--muted); text-align: center; font-size: 12px; line-height: 24px; }
.step p { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.routine-done { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.routine-form { padding: 0 20px 18px; display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.routine-form .field { min-width: 120px; flex: 1; }
.outcome-full { background: var(--tint); color: var(--accent); }

/* sheet for inline capture */
.sheet { border: 2px solid var(--accent); background: var(--panel); padding: 18px; border-radius: 14px; margin: 8px 0 4px; }

/* ring + strip + mini chart */
.ring { width: 72px; height: 72px; position: relative; display: grid; place-items: center; flex-shrink: 0; }
.ring svg { position: absolute; inset: 0; width: 72px; height: 72px; }
.ring b, .ring > span { font-size: 16px; font-weight: 600; }
.ring .track { stroke: var(--soft); }
.ring .fill { stroke: var(--accent); }
.strip { display: flex; height: 12px; gap: 4px; margin: 14px 0 8px; }
.strip span { flex: 1; background: var(--soft); border-radius: 3px; }
.strip span.filled { background: var(--accent); }
.strip span.partial { background: var(--accent); opacity: .5; }
.strip span.missed { background: var(--line); }
.mini-chart { height: 74px; display: flex; align-items: end; gap: 5px; margin: 16px 0 5px; }
.mini-chart span { flex: 1; background: var(--accent); border-radius: 4px 4px 0 0; min-width: 0; max-width: 34px; }
.mini-chart span.future { background: none; }
.mini-chart span.missing { background: var(--soft); height: 4px !important; border-radius: 2px; }
.metric-link { border: 0; background: none; padding: 0; min-height: 0; text-align: left; color: var(--ink); font-size: 15px; font-weight: 600; }
.heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 14px 0 8px; }
.heat span { height: 24px; border-radius: 4px; display: grid; place-items: center; font-size: 11px; background: var(--soft); color: var(--muted); }
.heat .recorded { background: var(--tint); color: var(--accent); }

/* progress chart */
.hchart { width: 100%; min-height: 205px; }
.hchart svg { display: block; width: 100%; height: auto; overflow: visible; }
.hchart text { fill: var(--muted); font-size: 11px; font-family: inherit; }
.hchart .grid { stroke: var(--line); stroke-dasharray: 2 4; }
.hchart .line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.hchart .prev { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; }
.hchart .dot { fill: var(--accent); }
.hchart [data-point] { cursor: pointer; }
.hchart [data-point]:focus-visible { outline: none; stroke: var(--blue); stroke-width: 3px; }
.hchart .bar { fill: var(--accent); }
.hchart .gap { fill: var(--soft); }
.hchart .ctx { fill: var(--purple); }
.source-details summary { cursor: pointer; color: var(--muted); font-size: 12px; margin-top: 14px; font-weight: 500; }
.source-details p, .source-details li { font-size: 12px; color: var(--muted); }
.checkline { font-size: 12px; display: inline-flex; gap: 8px; align-items: center; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0; }

/* goals */
.goal-track { height: 12px; background: var(--soft); border-radius: 6px; position: relative; margin: 15px 0; }
.goal-track > span { height: 100%; display: block; background: var(--accent); border-radius: 6px; max-width: 100%; }
.goal-track > i { position: absolute; top: -4px; height: 20px; width: 2px; background: var(--muted); }
.goal-empty { margin: 0 auto 18px; background: var(--tint); color: var(--accent); padding: 18px; width: 68px; border-radius: 20px; display: grid; place-items: center; }
.goal-empty svg { width: 30px; height: 30px; }
.empty-hero { text-align: center; padding: 34px 12px; }
.empty-hero h2 { margin-bottom: 6px; }

/* plan cards */
.plan-card { padding: 0; }
.plan-card > summary { padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; }
.plan-card > summary::after { content: '⌄'; color: var(--muted); }
.plan-body { padding: 0 22px 22px; }
.plan-part { padding: 14px 0; border-top: 1px solid var(--line); }

/* journal */
.journal-spread { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 26px; margin-top: 18px; }
.journal-spread > div + div { border-left: 1px solid var(--line); padding-left: 24px; }
.notebook { line-height: 28px; background: repeating-linear-gradient(transparent, transparent 27px, var(--line) 27px, var(--line) 28px); border: 0; border-radius: 0; resize: vertical; min-height: 170px; }
.gratitude { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ebox-vessel { height: 150px; width: 95px; border: 2px solid var(--muted); border-radius: 6px; margin: 15px auto 10px; position: relative; overflow: hidden; }
.ebox-vessel > div { position: absolute; bottom: 0; width: 100%; background: var(--tint); border-top: 2px solid var(--accent); }
.ebox-vessel > span { position: absolute; top: 16.66%; width: 100%; border-top: 1px dashed var(--muted); font-size: 11px; text-align: center; color: var(--muted); }
.ebox-row { display: flex; gap: 6px; margin: 8px 0; }
.ebox-row > input:first-child { flex: 1; min-width: 0; }
.ebox-row > input[type=number] { width: 72px; flex: 0 0 72px; }
.todo-row { display: flex; gap: 8px; align-items: center; padding: 4px 0; }
.todo-row input[type=text] { flex: 1; }

/* calendar */
.calwrap { padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.callegend { display: flex; gap: 15px; flex-wrap: wrap; font-size: 11px; color: var(--muted); align-items: center; }
.callegend > span { display: inline-flex; align-items: center; gap: 6px; }
.callegend i { display: inline-block; width: 14px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 5px; }
.calgrid { display: grid; grid-template-columns: 44px repeat(var(--days), minmax(0, 1fr)); min-width: 0; margin-top: 14px; }
.calhead { padding: 8px 3px; text-align: center; font-size: 12px; border-bottom: 1px solid var(--line); color: var(--muted); }
.calhead strong { display: block; font-size: 17px; font-weight: 550; color: var(--ink); }
.calhead.today strong { color: var(--accent); }
.hours { position: relative; color: var(--muted); font-size: 10px; }
.hour { position: absolute; right: 7px; transform: translateY(-6px); }
.daycol { position: relative; border-left: 1px solid var(--line); background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hh) - 1px), var(--line) calc(var(--hh) - 1px), var(--line) var(--hh)); cursor: copy; touch-action: pan-y; }
.daycol:focus-visible { outline-offset: -3px; }
.event { position: absolute; left: 3px; right: 3px; border: 0; border-left: 3px solid var(--accent); border-radius: 6px; background: var(--tint); color: var(--accent); text-align: left; padding: 5px 6px; overflow: hidden; font-size: 11px; line-height: 1.25; touch-action: pan-y; -webkit-touch-callout: none; user-select: none; cursor: grab; display: block; min-height: 0; font-weight: 400; }
.event:hover { background: var(--tint); filter: brightness(.98); }
.event strong { font-weight: 600; display: block; }
.event small { font-size: 10px; display: block; margin-top: 2px; }
.event .sync-mark { position: absolute; top: 3px; right: 4px; font-size: 10px; line-height: 1.3; font-weight: 700; padding: 0 5px; border-radius: 6px; background: var(--soft); color: var(--muted); pointer-events: none; }
.event .sync-mark.rejected, .event .sync-mark.conflict { background: var(--warn); color: var(--amber); }
.calendar-sync { margin: 0 0 12px; padding: 0 22px; }
.calendar-sync.attention { color: var(--amber); }
.event.unresolved { border-left-style: dashed; background: var(--soft); color: var(--muted); }
.event.external { background: var(--soft); color: var(--muted); border-left: 3px solid var(--line, var(--muted)); cursor: default; right: 40%; opacity: .92; }
.callegend .external-swatch { background: var(--soft); border-left: 3px solid var(--muted); }
.event.done { opacity: .7; }
.event.routine, .routine-swatch { background: var(--soft); border-left: 3px dotted var(--good, var(--accent)); color: var(--ink, inherit); cursor: pointer; text-decoration: none; touch-action: auto; }
.event.routine { z-index: 2; left: auto; width: 46%; }
.event:not(.routine) { z-index: 1; }
.event.is-dragging { z-index: 5; box-shadow: 0 8px 22px #0004; opacity: .92; cursor: grabbing; }
.event.is-resizing { z-index: 5; box-shadow: 0 4px 14px #0003; }
.event.is-armed { z-index: 5; outline: 2px solid var(--accent); outline-offset: 1px; }
.resize-edge { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; }
.resize-edge::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 18px; margin-left: -9px; height: 2px; border-radius: 2px; background: currentColor; opacity: .35; }
@media (pointer: coarse) { .resize-edge { height: 14px; } }
.event.selected { outline: 2px solid var(--blue); outline-offset: 1px; }
.now-line { position: absolute; left: 0; right: 0; border-top: 2px solid var(--amber); pointer-events: none; }

/* requests & owner */
.req { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.req:last-child { border-bottom: 0; }
.steps-line { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 16px; }
.steps-line span { font-size: 11px; color: var(--muted); border-top: 3px solid var(--soft); padding-top: 6px; flex: 1; min-width: 80px; }
.steps-line span.current { border-top-color: var(--accent); color: var(--ink); font-weight: 600; }
.steps-line span.done { border-top-color: var(--accent); }
.tracker-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 0; }
dialog.hsheet { border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--panel); color: var(--ink); padding: 22px; max-width: min(560px, 94vw); width: 100%; }
dialog.hsheet::backdrop { background: #0006; }

.auth { max-width: 520px; margin: 7vh auto; padding: 0 16px; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .two { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .app { grid-template-columns: 1fr; background: none; }
  .rail { position: static; height: auto; padding: 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { margin: 0 4px 10px; font-size: 16px; }
.area-ico svg { width: 17px; height: 17px; }
  .rail nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .nav-btn { font-size: 12px; padding: 8px 10px; min-height: 44px; gap: 6px; }
  .nav-label { display: none; }
  /* V2: the More group stays reachable on small screens; closed links take no space. */
  .nav-more > summary.nav-label { display: flex; align-items: center; min-height: 44px; margin: 0; padding: 8px 10px; font-size: 12px; letter-spacing: 1px; }
  .nav-more:not([open]) > a { display: none; }
  .rail-foot { margin-top: 10px; padding-top: 10px; display: flex; flex-wrap: wrap; align-items: center; }
  .content { padding: 18px; }
  h1 { font-size: 28px; }
  .cols-2, .cols-3, .grid.two { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journal-spread { grid-template-columns: 1fr; }
  .journal-spread > div + div { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 580px) {
  .content { padding: 14px; }
  .dashgrid { grid-template-columns: 1fr; }
  .fields, form .fields { grid-template-columns: 1fr; }
  input, select, textarea { font-size: 16px; }
  .panel { padding: 16px; }
  .routine-head { padding: 16px; gap: 10px; flex-wrap: wrap; }
  .routine-symbol { width: 40px; height: 40px; }
  .routine-head > .routine-done { margin-left: 50px; }
  .routine-text { flex-basis: calc(100% - 50px); }
  .detail-body, .routine-form { padding: 0 16px 16px; }
  .area-group > summary { align-items: flex-start; flex-direction: column; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .calwrap { padding: 10px; }
  .calgrid { grid-template-columns: 30px repeat(var(--days), minmax(0, 1fr)); }
  .event { padding: 4px 2px; font-size: 10px; }
  .event small { display: none; }
  .bigstat { font-size: 30px; }
  .tracker-list { grid-template-columns: 1fr; }
  .item { grid-template-columns: 40px 1fr; }
  .item > .actions { grid-column: 1 / -1; }
  /* V2: a long plan title and its status chip wrap instead of pushing the page sideways. */
  .plan-card > summary { flex-wrap: wrap; }
  .plan-card > summary > div { min-width: 0; }
}
@media (pointer: coarse) {
  button, .btn, .nav-btn, select, input { min-height: 44px; }
  /* V2: disclosure toggles and small links keep at least the 24 px WCAG 2.2 target. */
  summary { min-height: 24px; }
  a.small-link, .goal-mini a, .row.between > a { display: inline-flex; align-items: center; min-height: 24px; }
}
/* V2: date-like inputs focus an inner field, so show the ring on the input itself. */
input[type=date]:focus-within, input[type=month]:focus-within, input[type=time]:focus-within, input[type=datetime-local]:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Today page details */
.overline { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; }
.chip-btn:hover { border-color: var(--accent); }
.chip-btn.quiet { background: transparent; color: var(--muted); }
.area-ico { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-right: 10px; border-radius: 10px; background: var(--tint); color: var(--accent); font-size: 16px; }
.area-group > summary > span:first-child { display: inline-flex; align-items: center; font-weight: 700; font-size: 17px; }
.area-group[open] .chev { transform: rotate(180deg); }
.sheet-body { margin-top: 14px; }
.nav-more > summary { cursor: pointer; list-style: none; }
.nav-more > summary::-webkit-details-marker { display: none; }
.todo-row input[type=text] { flex: 1; min-width: 0; }

/* H1 dashboard, goals, progress, plan, requests and owner pages */
.ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 14px 0; }
.card-grid > .panel { margin: 0; }
.metric { display: flex; flex-direction: column; gap: 6px; }
.metric .big, .panel > .big, .big { font-size: 30px; font-weight: 600; margin: 4px 0 0; letter-spacing: -0.01em; }
.metric .unit, .big .unit { font-size: 14px; color: var(--muted); font-weight: 500; }
.metric .sub { margin: 0; }
.card-title { font-weight: 650; color: var(--ink); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.card-title:hover { color: var(--accent); }
.area-ico { color: var(--accent); }
.small-link { font-size: 13px; color: var(--accent); font-weight: 600; text-decoration: none; }
.small-link:hover { text-decoration: underline; }
ul.plain { list-style: none; padding: 0; margin: 4px 0; }
ul.plain li { padding: 3px 0; }
.small-h { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0; }
.check-group { border: 1px solid var(--line); border-radius: var(--r-control); padding: 8px 12px; margin: 0; display: grid; gap: 4px; }
.check-group legend { font-weight: 650; padding: 0 4px; }
.check-group label.row { gap: 8px; justify-content: flex-start; }
.goal-mini li { border-bottom: 1px solid var(--line); padding: 8px 0; }
.goal-mini li:last-child { border-bottom: 0; }
.row.top { align-items: flex-start; }
.rhythm .strip span.partial { background: var(--tint); }
.chip.status-achieved, .chip.status-kept, .chip.status-at_or_above_guide, .chip.status-within_recorded { background: var(--tint); color: var(--accent); }
.chip.status-below_guide, .chip.status-over_limit, .chip.status-incomplete { background: var(--warn); color: var(--amber); }
.chip.status-not_achieved, .chip.status-not_reached { background: var(--danger-bg); color: var(--danger); }
.goal-card { display: grid; gap: 8px; }
.goal-card .goal-track { margin: 6px 0; }
.events { font-size: 13px; color: var(--muted); }
.events li { padding: 2px 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-all; }
textarea.package { width: 100%; min-height: 180px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.issue-list li { padding: 3px 0; }
.insight { border-left: 3px solid var(--line); padding: 6px 10px; margin: 8px 0; }
.insight.reviewed { border-color: var(--accent); }
.insight.dismissed { opacity: 0.6; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 8px 0 16px; overflow-x: auto; }
.tabs a { padding: 8px 12px; text-decoration: none; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a[aria-current="page"] { color: var(--accent); border-color: var(--accent); }
@media (max-width: 700px) { .card-grid { grid-template-columns: 1fr; } .metric .big { font-size: 26px; } }

/* area overview + routines */
.capture-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.capture-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; min-height: 72px; padding: 12px 14px; }
.measure-list li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.measure-list li:last-child { border-bottom: 0; }
.routine-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.routine-row:last-child { border-bottom: 0; }
.step-editor { padding-left: 18px; }
.step-editor li { align-items: end; }
.pre { white-space: pre-line; }
.plan-part h4 { margin: 0 0 4px; }
.page-links { margin: 14px 0; }
.row.wrap { flex-wrap: wrap; }
.request-row { padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.request-row:last-child { border-bottom: 0; }
.request-row .row.wrap input.grow { min-width: 200px; }
textarea.mono { width: 100%; }
/* Photo comparison: side by side at every width so the two images stay directly comparable. */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.compare-side { margin: 0; min-width: 0; display: grid; gap: 8px; align-content: start; }
.compare-side img { width: 100%; max-height: 70vh; object-fit: contain; background: var(--line); border-radius: 8px; }
.compare-missing { aspect-ratio: 3 / 4; display: grid; place-items: center; text-align: center; padding: 12px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted, inherit); font-size: .9em; }
.compare-meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 0; font-size: .9em; }
.compare-meta dt { color: var(--muted, inherit); }
.compare-meta dd { margin: 0; overflow-wrap: anywhere; }
.compare-controls select { max-width: 100%; }
@media (max-width: 520px) { .compare-grid { gap: 8px; } .compare-meta { grid-template-columns: 1fr; } .compare-meta dd { margin-bottom: 4px; } }
.weekday-pick { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; }
.weekday-pick legend { width: 100%; margin-bottom: 4px; }
.weekday-pick .chip { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.series-panel { border-top: 1px solid var(--line); padding-top: 8px; }
.series-panel .form-actions { flex-wrap: wrap; }

/* Focused review additions; all existing shell, type, colour and card rules retained. */
.tracking-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px;background:var(--muted)}
.tracking-dot.pending,.tracking-dot.due{background:transparent;box-shadow:inset 0 0 0 2px var(--amber, #dca94e)}
.tracking-dot.recorded,.tracking-dot.met{background:var(--accent)}
.tracking-dot.met{box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent)}
.tracking-dot.optional,.tracking-dot.skipped,.tracking-dot.off{width:10px;height:3px;border-radius:2px;flex-basis:10px;background:var(--muted)}
.tracking-dot.import{background:var(--blue)}
.tracking-dot.weekly{opacity:.45}
.capture-item .status{display:inline-flex;align-items:center;gap:6px;margin-left:8px}
.capture-item .status-text{font-size:11px;color:var(--muted)}
.rating-buttons{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.rating-buttons button{min-width:34px;padding:8px}
.rating-buttons button[aria-pressed=true]{background:var(--accent);color:var(--on-accent,#132c24)}
.product-check-row{display:grid;grid-template-columns:minmax(140px,1fr) 78px 70px;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.product-check-row>input[type=text]{grid-column:1/-1}
.capture-photo-preview{max-width:100%;max-height:260px;object-fit:contain;border-radius:10px}
@media(max-width:500px){.product-check-row{grid-template-columns:minmax(110px,1fr) 65px 48px;gap:8px}}

[hidden] { display: none !important; }

/* Walkthrough refinement: preserve the shell, strengthen grouping and disclosure. */
.refined-routine {margin-bottom:18px;}
.refined-routine .routine-disclosure > summary {border:0;padding:22px;display:flex;align-items:center;gap:16px;color:var(--ink);}
.refined-routine .routine-disclosure > summary h3 {flex:1;font-size:20px;}
.refined-routine .routine-disclosure > summary .chev {font-size:22px;}
.routine-content {padding:0 22px 22px;}
.routine-time-row {display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:420px;margin:4px 0 20px;}
.routine-step-grid {display:grid;gap:10px;}
.routine-step-box {display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--bg);}
.routine-step-box strong {font-size:15px;line-height:1.5;}
.step-minutes {display:flex;align-items:center;gap:8px;white-space:nowrap;}
.step-minutes input {width:76px;text-align:center;}
.routine-note {margin:18px 0;}
.routine-note input {width:100%;margin-top:10px;}
.routine-actions {margin-top:20px;}
.area-group.needs-tracking {border-left:5px solid #dbac59;}
.area-group.needs-tracking > summary {background:color-mix(in srgb,#dbac59 9%,transparent);}
.area-group.tracking-recorded {border-left:5px solid var(--accent);}
.area-group.tracking-recorded > summary {background:color-mix(in srgb,var(--accent) 8%,transparent);}
.area-group.tracking-optional {border-left:5px solid var(--line);}
.tracking-dot {width:15px;height:15px;flex-basis:15px;}
.tracking-dot.optional,.tracking-dot.skipped,.tracking-dot.off {width:15px;height:6px;flex-basis:15px;}
.capture-list {display:grid;gap:10px;}
.capture-list .capture-item {border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--bg);}
.area-group.panel {margin-top:18px;}
.journal-panel {margin-top:28px;border-top:4px solid #9c8acb;}
.journal-heading {gap:16px;flex-wrap:wrap;margin-bottom:22px;}
.journal-date-nav {margin-left:auto;}
.journal-date-nav input {max-width:170px;}
.dashboard-grid {gap:26px;margin:28px 0;}
[data-dashboard-area] {padding:26px;border-top:4px solid var(--accent);}
[data-dashboard-area="sleep"] {border-top-color:#929ce0;}
[data-dashboard-area="vocal"] {border-top-color:#64bbbf;}
[data-dashboard-area="training"] {border-top-color:#e7b46d;}
[data-dashboard-area="nutrition"] {border-top-color:#94bc76;}
[data-dashboard-area="skin"] {border-top-color:#d792ba;}
.dashboard-dates > summary {cursor:pointer;text-align:right;color:var(--muted);font-size:13px;}
.dashboard-dates form {padding-top:12px;}
@media(max-width:600px){.routine-step-box{padding:12px;gap:8px}.routine-disclosure>summary{flex-wrap:wrap}.routine-time-row{max-width:none}.journal-date-nav{margin-left:0}.dashboard-grid{gap:20px}}
/* September walkthrough: focused hierarchy and calendar reference treatment. */
.capture-item.tracker-due {background:color-mix(in srgb,var(--amber) 9%,var(--panel));border-left:4px solid var(--amber)}
.capture-item.tracker-recorded,.capture-item.tracker-met,.capture-item.tracker-skipped {background:color-mix(in srgb,var(--accent) 7%,var(--panel));border-left:4px solid var(--accent)}
.planned-time {font-size:14px;color:var(--accent);font-weight:600}
.step-estimate {display:block;font-size:12px;color:var(--accent);margin-top:5px}
.step-editor li {padding:16px;border:1px solid var(--line);border-radius:12px}
.apple-calendar {padding:22px 0 0;border-radius:16px;overflow:hidden;background:#24292c;color:#e5e7e8}
.calendar-month {font-size:30px;font-weight:600;padding:0 22px 18px;letter-spacing:-1px}
.calendar-toolbar {padding:0 22px 20px;gap:16px;flex-wrap:wrap}
.apple-calendar .calgrid {margin-top:0;grid-template-columns:58px repeat(var(--days),minmax(0,1fr))}
.apple-calendar .calhead {border-color:#ffffff12;background:#24292c;color:#bbc0c4;font-weight:400;padding:14px 0;display:flex;gap:7px;justify-content:center;align-items:center}
.apple-calendar .calhead strong {font-size:18px;margin:0}
.apple-calendar .calhead.today strong {background:#d63440;color:white;border-radius:50%;padding:4px 8px}
.apple-calendar .daycol {border-color:#ffffff12;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--hh) - 1px),#ffffff16 calc(var(--hh) - 1px),#ffffff16 var(--hh))}
.apple-calendar .hour {color:#a8afb5;font-size:11px}
.apple-calendar .event {border-radius:4px;border-left:3px solid #66b4ff;background:#173951;color:#80c7ff;font-size:12px;padding:6px;left:3px;right:3px}
.apple-calendar .event.routine {width:46%;left:auto;border-left:3px solid #ad93ff;background:#393054;color:#d6c6ff}
.apple-calendar .event[data-kind=gym],.apple-calendar .event[data-kind=pilates],.apple-calendar .event[data-kind=badminton] {background:#501d2d;color:#ff7893;border-color:#ff4c74}
.apple-calendar .event[data-kind=commitment] {background:#503712;color:#ffbe59;border-color:#ffae32}
.apple-calendar .event small {font-size:11px;color:inherit}
.apple-calendar .event.unresolved {border-left-style:solid}
.apple-calendar .now-line {border-color:#fa5c68}
.calendar-connection {padding:16px 22px;border-top:1px solid #ffffff15;font-size:12px}
.calendar-connection summary {cursor:pointer;color:#a8afb5}
.preview-toolbar {margin-bottom:20px}.preview-toolbar button {font-size:12px}
.completion-card {display:flex;flex-direction:column;align-items:center;gap:20px;text-decoration:none;color:var(--text);border-left:4px solid var(--accent)}
.completion-card>.row {width:100%}.completion-card h2 {display:flex;align-items:center;gap:10px;font-size:18px;margin:0}
.completion-card h2 svg {width:23px;height:23px}.completion-card.needs-tracking {border-left-color:var(--amber);background:color-mix(in srgb,var(--amber) 5%,var(--panel))}
.completion-caption {font-size:13px;color:var(--muted)}.no-daily {font-size:50px;color:var(--muted);height:90px}
.compact-rhythm {margin-bottom:26px;padding:26px}.rhythm-count {font-size:28px;margin:12px 0}.rhythm-count span{font-size:14px;color:var(--muted)}
.dashboard-pins {margin-top:34px}.dashboard-pins>.row{margin-bottom:16px}.pin-visual {text-decoration:none;color:var(--text);padding:24px;overflow:hidden}.pin-visual h3{font-size:15px;margin:0}.pin-value{font-size:34px;font-weight:600;margin:20px 0}.pin-value span{font-size:14px;color:var(--muted)}
.empty-pin{padding:32px;width:100%;border-style:dashed}.customise-group{border:1px solid var(--line);border-radius:14px;padding:15px;margin-bottom:12px}.customise-group summary{display:flex;gap:10px;align-items:center;cursor:pointer;font-weight:600}.customise-group summary:after{content:'⌄';margin-left:auto}.customise-group summary svg{width:20px;height:20px}.measure-tile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}.measure-tile-wrap{border:1px solid var(--line);border-radius:12px;overflow:hidden}.measure-tile{display:flex;gap:12px;align-items:center;justify-content:space-between;text-align:left;width:100%;min-height:76px;border:0;border-radius:0;background:var(--soft)}.measure-tile[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 20%,var(--panel));color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}.hide-measure{font-size:11px;border:0;width:100%;border-radius:0;padding:6px}.selection-count{font-size:13px;color:var(--muted)}
@media(max-width:600px){.measure-tile-grid{grid-template-columns:1fr}.calendar-toolbar{padding:0 12px 16px}.calendar-month{font-size:24px}.completion-card{padding:18px}.apple-calendar .calgrid{grid-template-columns:38px repeat(var(--days),minmax(0,1fr))}}
.completion-card .ring {width:104px;height:104px;flex:none}.completion-card .ring svg{width:104px;height:104px}.completion-card .ring>span{font-size:23px}.completion-card .ring .fill{stroke:var(--accent)}
.pin-visual .mini-chart{height:130px;margin-top:24px}.pin-visual .mini-chart span{border-radius:4px 4px 0 0}
.apple-calendar .event {align-content:start;justify-content:start}
.event.compact,.apple-calendar .event.compact {padding-top:2px;padding-bottom:2px;line-height:1.15}.event.compact small {margin-top:0}
.event.tiny {white-space:nowrap;text-overflow:ellipsis}.event.tiny strong {display:inline}
@media (min-width: 581px) {.event.tiny small {display:inline}.event.tiny small:before {content:' '}}
/* Shared quiet hierarchy: retain meaningful state, put optional depth behind disclosure. */
#main[data-page]:not([data-page=today]):not([data-page=dashboard]) .page-head {margin-bottom:28px;gap:22px}
.icon-heading {display:flex;align-items:center;gap:14px}.icon-heading>svg {width:30px;height:30px;flex-shrink:0;color:var(--accent)}
#main .pills {gap:10px;flex-wrap:wrap;margin-bottom:26px}
#main .pills button {display:inline-flex;align-items:center;gap:8px;min-height:42px}
#main .pills svg {width:18px;height:18px;flex-shrink:0}
#main .tabs {gap:10px;margin-bottom:26px}#main .tabs a,#main .tabs button{padding:11px 18px;border-radius:10px}
#main .source-details {margin-top:16px;padding:12px 0;border-top:1px solid var(--line)}
#main .source-details summary {cursor:pointer;font-size:13px;font-weight:600;color:var(--muted)}
#main .source-details[open] summary {color:var(--text);margin-bottom:14px}
#main .source-details p {line-height:1.6}
[data-area=sleep] {--area-color:#b3a5e9}[data-area=vocal]{--area-color:#8ed3d0}[data-area=training]{--area-color:#e1b16a}[data-area=nutrition]{--area-color:#b1cb87}[data-area=skin]{--area-color:#d89dbc}[data-area=habits]{--area-color:#8bcbbb}
#main[data-page=area]>.stack>.panel,#main .progress-hero,#main .goal-card,#main .plan-card {border-top:3px solid var(--area-color,var(--accent))}
#main[data-page=area] .panel,#main[data-page=progress] .panel,#main[data-page=goals] .panel {padding:26px}
.progress-hero {margin-top:20px}.progress-hero>.row {margin-bottom:22px}.progress-hero select{min-width:260px;max-width:100%;font-size:16px}.progress-hero .big{font-size:46px;margin:18px 0 5px}
.coverage-visual {display:flex;align-items:center;gap:14px;font-size:13px;color:var(--muted);padding:15px;background:var(--soft);border-radius:16px}.coverage-visual .ring{flex:none}
.progress-hero .chart {margin:24px 0}
.capture-grid {gap:14px}.capture-tile {padding:20px;border-radius:14px;display:flex;align-items:center;gap:12px;text-align:left;min-height:92px;flex-wrap:wrap;border-left:4px solid var(--line)}
.capture-tile>svg{width:25px;height:25px;color:var(--area-color,var(--accent));flex:none}.capture-tile>.status{width:100%;margin-left:37px;font-size:12px}
.capture-tile.tracker-due {border-left-color:var(--amber);background:color-mix(in srgb,var(--amber) 8%,var(--panel))}
.capture-tile.tracker-recorded,.capture-tile.tracker-met,.capture-tile.tracker-skipped {border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--panel))}
.area-measure-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:20px}.area-measure-card {display:block;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:18px;text-decoration:none;color:var(--text)}.area-measure-card h3 {font-size:14px;margin:0 0 14px}.area-measure-value{display:block;font-size:27px}.area-measure-card .mini-chart{height:76px;margin-top:18px}
.plan-card>summary {gap:20px;align-items:center;padding:6px 0}.plan-card>summary>div{display:flex;gap:14px;align-items:center}.plan-card h3{margin:0;font-size:18px}.plan-area-icon svg{height:24px;width:24px;color:var(--area-color,var(--accent))}.plan-body{padding-top:22px}.plan-part{padding:16px 0;border-bottom:1px solid var(--line)}.plan-part h4{color:var(--area-color,var(--accent))}
.goal-card .goal-track {height:14px;margin:24px 0 16px}.goal-card .row{flex-wrap:wrap;gap:10px}.goal-card .chip{font-size:12px}.goal-card .overline{color:var(--area-color,var(--accent))}
.utility-grid {list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:26px 0}.utility-tile{display:flex;align-items:center;gap:18px;padding:26px;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--text);text-decoration:none;min-height:112px}.utility-tile>svg{width:30px;height:30px;color:var(--accent)}.utility-tile>span{margin-left:auto}.utility-tile:hover{border-color:var(--accent);background:var(--soft)}
.page-help{margin-bottom:24px}.empty{padding:24px;font-size:14px}.hsheet .fields{gap:18px}.hsheet .field>span{font-size:13px;font-weight:600}.hsheet input,.hsheet select{min-height:42px}
@media(max-width:600px){.utility-grid,.area-measure-grid{grid-template-columns:1fr}.coverage-visual{padding:10px}.progress-hero select{min-width:0;width:100%}#main[data-page=area] .panel,#main[data-page=progress] .panel,#main[data-page=goals] .panel{padding:18px}.icon-heading>svg{width:25px;height:25px}.capture-tile{padding:16px}}
.coverage-visual .ring .track {stroke:var(--line)}
.tracker-choice-form .tracker-choice{display:flex;align-items:center;gap:12px;padding:17px;border:1px solid var(--line);border-radius:12px;background:var(--soft);cursor:pointer;min-height:60px}
.tracker-choice:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--panel));color:var(--accent)}
.tracker-choice input{width:18px;height:18px;min-height:0;accent-color:var(--accent)}
#main[data-page=owner]>.panel,#main[data-page=requests]>.panel,#main[data-page=more] .panel{padding:24px;margin-bottom:22px}
#main[data-page=photos] .panel{padding:24px}
#main .request-list>li,#main .routine-list>li{padding:18px 0}
.area-measure-value .measure-unit{font-size:13px;font-weight:400;color:var(--muted)}
#main .capture-tile .tracking-dot{display:inline-block;margin-right:7px}
#main .capture-tile .status{display:inline-flex;align-items:center;justify-content:center;margin-left:0}
#main .plan-card{padding:16px 20px;margin-bottom:16px}#main .plan-card>summary{min-height:40px}
.open-decisions{padding:22px!important}.open-decisions>summary{cursor:pointer;font-size:18px;font-weight:600}.open-decisions[open]>summary{margin-bottom:18px}
/* Member profiles and date-grouped photographic records. */
.profile-switch{padding:0 12px 18px;display:grid;gap:8px}.profile-switch select{width:100%;font-size:13px}.profile-switch .row{justify-content:space-between}.profile-card{display:grid;gap:18px;align-content:start}.profile-avatar{height:52px;width:52px;display:grid;place-items:center;border-radius:18px;background:#256b68;color:white;font-size:24px}.profile-baseline{display:flex;gap:24px}.profile-baseline div{display:grid;gap:4px}.profile-baseline strong{font-size:24px}.profile-baseline span{font-size:12px}.feature-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px}.toggle-track{width:34px;height:20px;background:#52575d;border-radius:20px;padding:3px}.toggle-track:after{content:'';display:block;background:white;width:14px;height:14px;border-radius:50%;transition:transform .15s}.feature-toggle[aria-pressed=true] .toggle-track{background:#409489}.feature-toggle[aria-pressed=true] .toggle-track:after{transform:translateX(14px)}.photo-toolbar{display:flex;gap:12px;margin-bottom:28px}.photo-days{display:grid;gap:32px}.photo-day h2{font-size:17px;margin-bottom:14px}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}.photo-tile{position:relative;margin:0;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--panel)}.photo-open{display:block;width:100%;padding:0;border:0;border-radius:0;background:none}.photo-open img{display:block;width:100%;height:220px;object-fit:cover}.photo-tile figcaption{padding:13px;text-transform:capitalize}.photo-select{position:absolute;right:10px;top:10px;border-radius:50%;width:32px;height:32px;padding:0;background:#202829cc;color:#ddd}.photo-select[aria-pressed=true]{background:#4f9a8b;color:white;box-shadow:0 0 0 3px white}.photo-lightbox{width:100%;max-height:70vh;object-fit:contain;border-radius:14px}
.goal-steps{display:flex;gap:24px;padding:0 0 24px;color:var(--muted)}.goal-steps .active{color:var(--text);border-bottom:3px solid #529d90;padding-bottom:8px}.goal-template-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.goal-template{display:grid;gap:18px;text-align:left;padding:24px;min-height:120px}.goal-template svg{width:26px;height:26px;color:#79b8ab}.goal-summary{display:grid;gap:12px;padding:26px;background:color-mix(in srgb,#4e9c90 12%,transparent);border-radius:18px;margin:0 0 24px}.goal-summary svg{width:32px;height:32px}.goal-summary strong{font-size:36px}.goal-summary h2{margin:0}
.photo-select[aria-pressed=false]{color:transparent;border:2px solid #d4e0dc99}.photo-toolbar input{min-width:160px}.photo-toolbar button{white-space:nowrap}.goal-card .goal-track{margin:14px 0}.goal-card .source-details{padding-top:10px;margin-top:4px}

/* Progress and goals: a single visual focus, with source detail on demand. */
.progress-v2{padding:28px;display:grid;gap:22px}.measure-trigger{font-size:1.2rem;font-weight:700;display:flex;align-items:center;gap:12px;padding:12px 16px;text-align:left}.measure-trigger svg{width:24px;height:24px}.measure-trigger>span{margin-left:18px}.trend-head .big{margin:8px 0;font-size:3.8rem;letter-spacing:-.06em}.trend-head .unit{font-size:1.15rem;letter-spacing:0}.trend-callout{display:grid;gap:7px;padding:16px 20px;border-radius:16px;background:color-mix(in srgb,var(--accent,#81dac6) 10%,transparent);text-align:right}.trend-callout strong{font-size:1.5rem;color:var(--accent,#81dac6)}.trend-callout span{font-size:.8rem}.trend-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.trend-stat{display:grid;gap:10px;padding:16px;border:1px solid var(--border,#344747);border-radius:14px}.trend-stat>span{font-size:.8rem}.trend-stat strong{font-size:1.25rem}.progress-v2 .hchart{margin:10px 0;min-height:220px}.chart-empty{min-height:240px;display:grid;place-content:center;justify-items:center;gap:12px}.chart-empty svg{width:42px;height:42px}.day-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:9px;margin:18px 0}.day-cell{aspect-ratio:1.5;border:1px solid var(--border,#3a5050);font-weight:700;opacity:1!important}.day-cell.met{background:#245f52;color:#c0fbe5}.day-cell.missed{background:#69432b;color:#ffcfac}.day-cell.unknown{background:transparent;border-style:dashed;color:#8eaaaa}.day-legend{display:flex;gap:24px;font-size:.8rem}.day-legend .met{color:#83dfb9}.day-legend .missed{color:#eeb888}.hchart .target-line{stroke:#e8c57c;stroke-width:1.3;stroke-dasharray:5 5}.goals-visual-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:22px}.goal-visual{padding:24px;display:grid;gap:18px}.goal-title{display:flex;align-items:center;gap:12px}.goal-title>svg{width:24px;height:24px;flex-shrink:0}.goal-title h2{margin:0;font-size:1.1rem}.goal-numbers{display:flex;gap:14px;align-items:baseline}.goal-numbers>strong{font-size:3.5rem;line-height:1.15;letter-spacing:-.05em}.goal-numbers>span{font-size:1rem}.goal-target{display:block;font-size:.85rem;margin-top:6px}.goal-visual .goal-track{height:9px;margin:0}.goal-visual .hchart{margin:0;min-height:0}.goal-visual .hchart svg{width:100%;height:auto}.goal-evidence{display:flex;justify-content:space-between;gap:8px;font-size:.8rem}.goal-date{font-size:.85rem}.goal-options{border-top:1px solid var(--border,#344747);padding-top:12px}.goal-options summary{font-size:.8rem;cursor:pointer}.goal-options p{font-size:.85rem}.goal-visual .chip{white-space:normal}.goal-visual .goal-track>span{background:var(--accent,#84dcca)}
@media(max-width:700px){.goals-visual-grid{grid-template-columns:1fr}.progress-v2{padding:18px}.trend-stats{gap:7px}.trend-stat{padding:12px 9px}.trend-head .big{font-size:3rem}.trend-callout{padding:10px}.measure-trigger{font-size:1rem}.day-grid{gap:5px}}
.starter-preview{border:1px solid var(--border,#344747);border-radius:18px;padding:20px;display:grid;gap:16px}.starter-packages{display:grid;gap:12px}.starter-package{background:color-mix(in srgb,var(--accent,#81dac6) 6%,transparent);border-radius:12px;padding:14px;display:grid;gap:10px}.starter-package strong{display:flex;gap:10px;align-items:center}.starter-package svg,.measure-tile>svg{width:22px;height:22px}.starter-preview p{font-size:.85rem}.goal-date{white-space:nowrap}

/* H2 additions: what changed, sleep timing, goal periods, pairing (descriptive, quiet). */
.what-changed{display:grid;gap:6px}.what-changed .sub{margin:0}
.sleep-timing{display:grid;gap:12px}.timing-axis{display:flex;justify-content:space-between;margin-left:64px;margin-right:92px}
.timing-rows{list-style:none;margin:0;padding:0;display:grid;gap:6px}.timing-row{display:grid;grid-template-columns:56px 1fr 84px;gap:8px;align-items:center}
.timing-track{position:relative;height:14px;border-radius:7px;background:color-mix(in srgb,var(--muted) 14%,transparent)}.timing-row.missing .timing-track{background:repeating-linear-gradient(90deg,transparent 0 6px,color-mix(in srgb,var(--muted) 18%,transparent) 6px 8px);display:flex;align-items:center;padding-left:6px}
.timing-bar{position:absolute;top:0;bottom:0;border-radius:7px;background:var(--area-sleep,#6c8cff);min-width:3px}
.goal-periods{list-style:none;margin:0;padding:0;display:grid;gap:6px}.goal-periods li{display:flex;justify-content:space-between;gap:12px}
@media(max-width:700px){.timing-row{grid-template-columns:48px 1fr 76px}.timing-axis{margin-left:56px;margin-right:84px}}
.sleep-timing>summary{cursor:pointer;list-style:none}.sleep-timing>summary::-webkit-details-marker{display:none}.sleep-timing>summary h2{margin:0}
.hchart .tag-mark{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:2 4;opacity:.8}

/* ---------- H4 entry: sign-in, setup, invitation, recovery ---------- */
.entry { min-height: 100svh; display: flex; flex-direction: column; background: var(--bg); }
.entry-top { padding: 24px 32px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.entry-top .brand { margin: 0; font-size: 19px; letter-spacing: -.4px; }
.entry-badge { border: 1px solid var(--line); border-radius: 30px; padding: 8px 12px; min-height: 36px; color: var(--muted); background: none; font-size: 12px; cursor: pointer; }
.entry-main { flex: 1; display: grid; place-content: center; padding: 24px 24px 80px; outline: none; }
.entry-card { width: min(404px, calc(100vw - 48px)); background: var(--panel); border: 1px solid var(--line); border-radius: 24px; padding: 32px; }
.entry-greeting { display: flex; align-items: center; gap: 13px; }
.entry-greeting h1 { font-size: 30px; letter-spacing: -1px; line-height: 1.2; margin: 0; }
.entry-pulse { color: var(--accent); width: 28px; flex: none; }
.entry-sub { color: var(--muted); margin: 14px 0 0; line-height: 1.55; font-size: 15px; }
.entry-form { margin-top: 28px; display: grid; gap: 20px; }
.entry-field { display: grid; gap: 8px; font-size: 14px; font-weight: 550; }
.entry-input { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); padding: 13px 14px; width: 100%; min-height: 50px; font: 16px var(--font); }
.entry-input[aria-invalid="true"] { border-color: var(--danger); }
.entry-pw { position: relative; display: block; }
.entry-pw .entry-input { padding-right: 54px; }
.entry-eye { position: absolute; right: 3px; top: 3px; height: 44px; width: 44px; background: transparent; border: 0; color: var(--muted); display: grid; place-items: center; cursor: pointer; padding: 0; min-height: 44px; }
.entry-eye svg { width: 20px; }
.entry-wide { width: 100%; min-height: 50px; border-radius: 12px; font-size: 16px; font-weight: 650; display: flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.entry-wide[aria-busy="true"] { opacity: .75; cursor: progress; }
.entry-status { margin: 0; font-size: 14px; line-height: 1.5; color: var(--accent); }
.entry-status:empty { display: none; }
.entry-status.error { color: var(--danger); }
.entry-link { display: grid; place-items: center; width: 100%; min-height: 44px; margin-top: 10px; background: none; border: 0; color: var(--muted); font-size: 14px; cursor: pointer; text-decoration: none; }
.entry-link.inline { display: inline; width: auto; min-height: 0; margin: 0 0 0 6px; color: var(--accent); text-decoration: underline; padding: 0; }
.entry-demo { border: 0; border-radius: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); width: 100%; padding: 22px 0 4px; margin-top: 12px; min-height: 48px; cursor: pointer; display: flex; gap: 12px; align-items: center; justify-content: center; font-size: 15px; }
.entry-demo svg { color: var(--accent); width: 19px; }
.entry-demo:hover { background: none; color: var(--accent); }
.entry-foot { display: flex; gap: 22px; justify-content: center; margin-top: 18px; }
.entry-foot button { background: none; border: 0; color: var(--muted); font-size: 13px; min-height: 44px; min-width: 44px; cursor: pointer; }
.entry-check { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 6px 0; font-size: 14px; cursor: pointer; }
.entry-check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; }
.entry-perm { border: 0; margin: 20px 0 0; padding: 0; }
.entry-perm h3, .entry-perm legend { font-size: 14px; font-weight: 650; margin: 0 0 6px; padding: 0; }
.entry-perm ul { margin: 0; padding-left: 18px; }
.entry-expiry { margin: 16px 0 0; text-align: center; }
.entry-dialog { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 20px; max-width: min(360px, calc(100vw - 32px)); padding: 28px; }
.entry-dialog::backdrop { background: #0008; }
.entry-dialog p { line-height: 1.6; }
@media (max-width: 500px) { .entry-top { padding: 18px 20px; } .entry-card { padding: 26px 22px; width: calc(100vw - 32px); } .entry-main { padding: 12px 16px 48px; } .entry-greeting h1 { font-size: 27px; } }

/* ---------- H4 sharing, install, offline ---------- */
.perm-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; }
.perm-table th, .perm-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.perm-table td input[type="checkbox"] { width: 22px; height: 22px; }
.perm-table tbody th { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; color: var(--ink); }
.share-row { padding: 8px 0; border-bottom: 1px solid var(--line); gap: 10px; flex-wrap: wrap; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.chip-toggle { border-radius: 30px; min-height: 36px; }
.chip-toggle[aria-pressed="true"] { background: var(--tint); color: var(--accent); border-color: var(--accent); }
.delegated-bar, .welcome-bar { margin: 16px var(--space) 0; }
.offline-bar { position: sticky; top: 0; z-index: 20; background: var(--warn); color: var(--ink); padding: 10px 16px; text-align: center; font-size: 13px; }
@media (display-mode: standalone) { .rail { padding-top: max(26px, env(safe-area-inset-top)); } .content { padding-bottom: max(24px, env(safe-area-inset-bottom)); } }

/* ---------- H4-6 focused accessibility corrections ---------- */
/* Current-page nav text reached only 4.49:1 on its tint in light mode. */
.nav-btn[aria-current="page"] { color: light-dark(#136a5e, #7ed4bb); }
/* The calendar header is always dark; its day numbers must be light in both themes. */
.apple-calendar .calhead strong { color: #eef2f3; }
.apple-calendar .calhead.today strong { color: #ffffff; }
/* Touch screens: comfortable 44 px targets for the small controls the audit found, without
   changing the desktop layout. Disclosure summaries grow by padding so their markers stay. */
@media (pointer: coarse) {
  button.small-btn, .small-btn, .icon-btn, .seg button, .chip-btn, .entry-badge, a.button, .btn, button.link { min-height: 44px; }
  .icon-btn { min-width: 44px; justify-content: center; }
  a.small-link, .area-open, .row.between > a, .rail .small-link { display: inline-flex; align-items: center; min-height: 44px; }
  details > summary, #main details > summary { min-height: 44px; padding-block: 11px; box-sizing: border-box; }
  .rail-foot button, #main .pills button, .pills button { min-height: 44px; }
  .skip:focus { min-height: 44px; display: inline-flex; align-items: center; }
  label.row.small:has(> input[type=checkbox]), label.row.small:has(> input[type=radio]) { min-height: 44px; }
}
.setup-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }

/* H5 offline sync status: quiet, unambiguous, never a false "saved" */
.sync-row { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.status-strip > .sync-row { margin: 0; }
.status-chip { cursor: pointer; border: 1px solid currentColor; min-height: 32px; font: inherit; font-size: 0.85rem; }
.status-chip:focus-visible { outline: 2px solid var(--focus, #19796c); outline-offset: 2px; }
.status-sources { display: grid; gap: 10px; margin: 0; padding: 0; }
.offline-bar summary { cursor: pointer; }
.sync-pill { cursor: pointer; border: 1px solid currentColor; min-height: 32px; font: inherit; font-size: 0.85rem; }
.sync-pill:focus-visible { outline: 2px solid var(--focus, #19796c); outline-offset: 2px; }
dialog.sync-sheet { max-width: min(560px, 94vw); width: 100%; border: 0; border-radius: 16px; padding: 20px; background: var(--panel, #fff); color: inherit; }
dialog.sync-sheet::backdrop { background: rgb(0 0 0 / 0.35); }
.sync-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; max-height: 60vh; overflow: auto; }
.sync-item { border: 1px solid var(--line, #d8dedb); border-radius: 12px; padding: 10px 12px; }
.sync-item pre.wrap { white-space: pre-wrap; word-break: break-word; max-height: 12em; overflow: auto; }
.goal-pace { display: grid; gap: 4px; margin: 6px 0; }
.pace-rows { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 6px 0 0; }
.pace-rows dt { color: var(--muted); } .pace-rows dd { margin: 0; }
/* H6 weekly review: bounded icons, compact actual/target/pace rows and change tiles. */
.review-window { gap: 8px; align-items: center; }
.review-window input { width: auto; min-width: 0; }
.review-goals { display: grid; gap: 18px; margin: 0; padding: 0; }
.review-goal { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; }
.review-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--area-color, var(--accent)) 28%, var(--panel)); color: var(--ink); }
.review-icon svg { width: 20px; height: 20px; display: block; }
.review-goal-main { display: grid; gap: 6px; min-width: 0; }
.review-goal-main a { overflow-wrap: anywhere; }
.review-figures { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.review-actual { font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.review-pace { margin-left: auto; color: var(--muted); }
.review-bar { height: 8px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.review-bar > span { display: block; height: 100%; background: var(--area-color, var(--accent)); border-radius: inherit; }
.review-goal[data-goal-state=needs_attention] .review-bar > span { background: var(--amber); }
.review-how summary, .review-about summary { cursor: pointer; color: var(--muted); }
.review-how p, .review-about p { margin: 4px 0; }
.review-changes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 0; padding: 0; }
.review-change { display: grid; gap: 4px; align-content: start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
.review-change .chip { justify-self: start; font-size: 12px; }
.review-steps { display: grid; gap: 10px; margin: 0; padding: 0; }
.review-steps li { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: start; }
.review-coverage .chip { font-size: 12px; }
@media (max-width: 600px) { .review-pace { margin-left: 0; flex-basis: 100%; } .review-steps li { grid-template-columns: 16px 1fr; } .review-steps li > a { grid-column: 2; } }
/* H6 report a problem: user-initiated, local only. */
.page-foot .report-link { font-size: 12px; color: var(--muted); min-height: 32px; }
.report-sheet textarea { width: 100%; }
.report-shot { display: grid; gap: 8px; }
.report-shot img { max-width: 100%; max-height: 240px; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; }
[data-report-status=error] { color: var(--danger); }
/* Agreed member plan on Goals: same panels as goal cards; one column on narrow screens. */
.member-plan { margin-bottom: 16px; }
.plan-grid .plan-goal h3 { margin: 0 0 6px; font-size: 15px; }
.plan-win { margin: 4px 0; overflow-wrap: anywhere; }
.plan-assign select { margin-left: 6px; }
@media (max-width: 580px) { .plan-grid { grid-template-columns: 1fr; } .member-plan .page-head { flex-wrap: wrap; } }

/* Approved mobile shell (handoff 2026-09-27): compact top bar and a safe-area five-item bottom bar
   instead of the wrapped rail links. Desktop keeps the side rail; these rules apply only <=780px. */
.more-sheet { display: none; }
@media (max-width: 780px) {
  .rail { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; }
  .rail > nav { display: none; }
  .rail .brand { margin: 0; }
  .rail .profile-switch { padding: 0; flex: 1 1 200px; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .rail:has(.profile-switch) .who { display: none; }
  .rail-foot { margin: 0 0 0 auto; padding: 0; border-top: 0; }
  .main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .bottom-nav { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
    padding: 6px max(4px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--panel) 94%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
  .bottom-nav a, .bottom-nav button { position: relative; min-width: 0; min-height: 52px; display: grid; place-content: center; justify-items: center; gap: 2px; padding: 2px;
    border: 0; border-radius: 0; background: none; color: var(--muted); font-size: 10px; font-weight: 700; text-decoration: none; }
  .bottom-nav svg { width: 22px; height: 22px; }
  .bottom-nav span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bottom-nav [aria-current="page"] { color: var(--accent); }
  .bottom-nav [aria-current="page"]::before { content: ""; position: absolute; top: -6px; left: 50%; width: 35px; margin-left: -17.5px; height: 3px; border-radius: 0 0 4px 4px; background: var(--accent); }
  .more-sheet:not([hidden]) { display: block; position: fixed; left: 0; right: 0; bottom: calc(65px + env(safe-area-inset-bottom)); z-index: 14; max-height: 72vh; overflow-y: auto;
    padding: 16px 14px; background: var(--panel); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 40px rgb(0 0 0 / .18); overscroll-behavior: contain; }
  .more-sheet nav { display: grid; gap: 2px; }
  .more-sheet .nav-label { display: block; margin: 14px 12px 4px; }
  .more-sheet .nav-more > summary.nav-label { display: none; }
  .more-sheet .nav-more > a { display: flex; }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* H030 first-use corrections (approved concept 2026-09-27 + 029 walkthrough). */
/* Softened sage light palette from the concept; dark values unchanged. */
:root {
  --bg: light-dark(#dce7de, #111c22);
  --panel: light-dark(#eaf1e9, #1b2931);
  --soft: light-dark(#d9e6dc, #25383d);
  --line: light-dark(#b9cdbf, #35464d);
  --ink: light-dark(#19352f, #e8f0ee);
  --muted: light-dark(#4d685d, #a5b9bd);
  --accent: light-dark(#1e806a, #7ed4bb);
  --tint: light-dark(#cfe3d6, #244039);
  --blue: light-dark(#4c70a6, #98b9fa);
  --amber: light-dark(#a5641d, #e9b17c);
  --warn: light-dark(#ecdcc4, #3d3122);
}
/* The iPhone status area: content never shows through it while scrolling. */
body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--bg); z-index: 40; pointer-events: none; }
@media (max-width: 780px) {
  .rail { position: sticky; top: 0; z-index: 12; background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); }
  input, select, textarea { font-size: 16px; }
}

/* Health-area and routine bars: one size and hierarchy. A full amber fill means a due tracker still
   needs a record; recorded and scheduled bars stay quiet with a small labelled cue. */
.routine-bars { display: grid; }
.area-group.panel { border-left: 4px solid var(--line); }
.area-group > summary { min-height: 66px; padding: 12px 18px; }
.area-group > summary .area-ico { width: 39px; height: 39px; border-radius: 12px; }
.area-group > summary .area-ico svg { width: 21px; height: 21px; }
.area-group.needs-tracking { border-left: 5px solid var(--amber); border-color: color-mix(in srgb, var(--amber) 46%, var(--line)); background: color-mix(in srgb, var(--amber) 21%, var(--panel)); }
.area-group.needs-tracking > summary { background: transparent; }
.area-group.needs-tracking > summary .sub { color: color-mix(in srgb, var(--ink) 76%, var(--amber)); font-weight: 650; }
.area-group.tracking-recorded { border-left: 4px solid var(--line); }
.area-group.tracking-recorded > summary { background: transparent; }
.area-group.tracking-recorded > summary .sub { color: var(--accent); font-weight: 650; }
.area-group.tracking-scheduled > summary .sub { color: var(--blue); font-weight: 650; }
.area-group.tracking-scheduled .area-ico { color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, var(--soft)); }
.routine-bar .routine-content { padding-top: 4px; }
@media (max-width: 580px) {
  .area-group > summary { flex-direction: row; align-items: center; padding: 11px 14px; }
  .area-group > summary > span:first-child { font-size: 15px; min-width: 0; }
  .area-group > summary .sub { font-size: 12px; text-align: right; }
}

/* Goal visuals: value against target, small bars and rings; an empty track means unknown. */
.goal-bar { display: block; height: 7px; border-radius: 10px; background: var(--line); overflow: hidden; min-width: 60px; }
.goal-bar > span { display: block; height: 100%; border-radius: 10px; background: var(--accent); }
.goal-bar.unknown { background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 10px); opacity: .7; }
.tone-attention .goal-bar > span { background: var(--amber); }
.mini-ring { width: 56px; height: 56px; flex: none; }
.mini-ring circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.mini-ring .track { stroke: var(--line); }
.mini-ring .fill { stroke: var(--accent); }
.plan-grid { gap: 12px; }
.plan-visual { display: grid; gap: 8px; align-content: start; }
.plan-goal-head { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.plan-goal-head h3 { margin: 0; font-size: 15px; }
.plan-big strong { font-size: 28px; letter-spacing: -.04em; line-height: 1.1; font-weight: 760; }
.plan-big span { color: var(--muted); font-size: 13px; }
.plan-bars { display: grid; gap: 6px; }
.plan-bar-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 12px; }
.plan-bar-label { color: var(--muted); font-weight: 650; }
.plan-bar-text { color: var(--muted); white-space: nowrap; }
.plan-sub { margin: 0; color: var(--muted); font-size: 12px; }
.plan-more > summary, .plan-about > summary, .dashboard-note > summary, .plan-archive > summary { cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 650; }
.plan-archive { grid-column: 1 / -1; }
.plan-visual.tone-good { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.week-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.week-pill { display: grid; justify-items: center; gap: 3px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; min-width: 58px; font-size: 11px; color: var(--muted); }
.week-pill .dots { display: flex; gap: 4px; }
.week-pill .dots i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line); }
.week-pill .dots i.on { background: var(--accent); border-color: var(--accent); }
.week-pill.tone-good { border-color: var(--accent); }
.plan-dash-head { display: flex; align-items: center; gap: 14px; margin: 8px 0 6px; }
.plan-dash-head strong { display: block; font-size: 18px; }
.plan-dash-head small { color: var(--muted); }
.goal-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 22px; }
.goal-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 72px; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.goal-row-title { min-width: 0; font-weight: 600; font-size: 14px; }
.goal-row-title small { display: block; color: var(--muted); font-weight: 500; font-size: 11px; }
.goal-row-value strong { font-size: 15px; }
.goal-row-value small, .goal-row-sub { color: var(--muted); font-size: 11px; }
.goal-row.tone-unknown .goal-row-value strong { color: var(--muted); }

/* Weekly review: comparisons and short conclusions first; detail on demand. */
.review-conclusions { display: grid; gap: 4px; margin: 6px 0 12px; font-size: 14px; }
.review-conclusions > li { padding-left: 16px !important; position: relative; }
.review-conclusions li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.compare-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: 22px; }
.compare-row { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.change-bars { display: grid; gap: 3px; margin-top: 6px; }
.change-bar { display: block; height: 6px; border-radius: 6px; background: var(--accent); min-width: 4px; }
.change-bar.before { background: var(--line); }
.review-coverage-panel { gap: 10px; }
.review-coverage-panel > h2 { margin: 0; font-size: 16px; }

/* Programme cards in the approved Liam exercise-card style; source words unchanged. */
.programme { display: grid; gap: 14px; }
.programme-purpose { margin: 0; font-size: 15px; }
.programme-log { display: flex; flex-wrap: wrap; gap: 8px; }
.programme-steps h4, .programme-stop h4 { margin: 0 0 8px; font-size: 14px; letter-spacing: .02em; }
.ex-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ex-card { --tone: var(--accent); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px 14px 14px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); overflow: hidden; }
.ex-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--tone); }
.ex-card[data-tone="blue"] { --tone: var(--blue); } .ex-card[data-tone="amber"] { --tone: var(--amber); } .ex-card[data-tone="coral"] { --tone: var(--danger); }
.ex-index { font-size: 12px; font-weight: 900; letter-spacing: .14em; color: var(--tone); padding-top: 2px; }
.ex-main h5 { margin: 0 0 4px; font-size: 16px; letter-spacing: -.02em; }
.ex-main p { margin: 4px 0 0; white-space: pre-line; }
.ex-dose { display: inline-block; font-size: 12px; font-weight: 750; color: var(--muted); }
.programme-stop { border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--line)); background: color-mix(in srgb, var(--amber) 12%, var(--panel)); border-radius: 14px; padding: 12px 14px; }
.programme-stop p { margin: 0 0 6px; }
.programme-more > summary { cursor: pointer; font-weight: 650; }
.programme-links { display: flex; flex-wrap: wrap; gap: 8px; }
.programme-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 11px; border: 1px solid var(--line); background: var(--soft); color: var(--ink); font-weight: 700; text-decoration: none; }
@media (max-width: 580px) { .ex-grid { grid-template-columns: 1fr; } .goal-row { grid-template-columns: minmax(0, 1fr) auto 56px; } }
.ex-main p.ex-dose-line { font-weight: 750; color: var(--muted); }

/* H032: target rate, attainment and observed-night share shown beside the raw values. */
.goal-pct { margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 12px; font-weight: 800; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.goal-pct.share { color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, transparent); }
.goal-tile-pct.share { color: var(--blue); }
.tone-unknown .goal-pct { display: none; }
.plan-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; }
.plan-pct { margin-left: auto; display: inline-flex; align-items: baseline; gap: 5px; }
.plan-pct b { font-size: 22px; letter-spacing: -.03em; color: var(--accent); }
.plan-pct.share b { color: var(--blue); }
.plan-pct small { color: var(--muted); font-size: 11px; max-width: 150px; line-height: 1.2; }
.plan-bar-row { grid-template-columns: 52px minmax(0, 1fr) auto; }
.plan-bar-target { grid-column: 2 / -1; color: var(--muted); font-size: 11px; margin-top: -3px; }
.plan-dash-window { display: block; font-weight: 700; color: var(--ink) !important; }

/* Weekly: a state bar and compact goal tiles lead; conclusions follow; all counting is in detail. */
.state-summary { display: grid; gap: 8px; margin: 10px 0 14px; }
.state-bar { display: flex; height: 12px; border-radius: 8px; overflow: hidden; background: var(--line); }
.state-bar > span { display: block; height: 100%; }
.seg-met { --seg: var(--accent); } .seg-behind { --seg: var(--amber); } .seg-other { --seg: var(--blue); }
.seg-none { --seg: var(--line); }
.state-bar > span { background: var(--seg); }
.state-bar > .seg-none { background: repeating-linear-gradient(90deg, var(--muted) 0 3px, transparent 3px 7px); opacity: .45; }
.state-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.state-legend li { display: inline-flex; align-items: center; gap: 5px; padding: 0 !important; }
.state-legend li::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--seg); }
.state-legend b { color: var(--ink); }
.goal-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-bottom: 12px; }
.goal-tile { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px !important; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.goal-tile-ring { position: relative; width: 50px; height: 50px; }
.goal-tile-ring .mini-ring { width: 50px; height: 50px; }
.goal-tile-pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.goal-tile-main { display: grid; gap: 1px; min-width: 0; }
.goal-tile-main strong { font-size: 13px; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.goal-tile-win { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal-tile-win span { display: inline-block; min-width: 26px; font-weight: 750; color: var(--ink); }
.goal-tile.tone-unknown .goal-tile-pct { color: var(--muted); }
.tone-attention .mini-ring .fill { stroke: var(--amber); }
.review-partial { margin: 2px 0 0; }
.review-all > summary { cursor: pointer; font-weight: 650; margin-top: 4px; }
@media (max-width: 580px) {
  .goal-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .goal-tile { grid-template-columns: 36px minmax(0, 1fr); gap: 6px; padding: 8px 7px !important; }
  .goal-tile-ring, .goal-tile-ring .mini-ring { width: 36px; height: 36px; }
  .goal-tile-pct { font-size: 10px; }
  .goal-tile-win { white-space: normal; }
  .goal-tile-win span { min-width: 22px; }
}

/* Opened programme pages in the approved Liam exercise-card standard. */
#main .plan-card[open] > summary h3 { font-size: clamp(26px, 4.6vw, 44px); line-height: 1.02; letter-spacing: -.055em; }
.programme { gap: 18px; }
.programme-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 20px 22px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 16%, var(--panel)) 0%, var(--panel) 70%); }
.programme-eyebrow { color: var(--accent); font-size: 12px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.programme-hero .programme-purpose { margin-top: 8px; font-size: 16px; line-height: 1.38; max-width: 560px; }
.programme-cadence { width: 118px; height: 118px; border-radius: 50%; display: grid; place-content: center; text-align: center; gap: 2px; padding: 10px;
  background: radial-gradient(circle, var(--panel) 0 61%, transparent 62%), conic-gradient(var(--accent) 0 112deg, color-mix(in srgb, var(--accent) 25%, var(--line)) 112deg 360deg); }
.programme-cadence b { font-size: 15px; line-height: 1.1; letter-spacing: -.02em; }
.programme-cadence span { font-size: 12px; color: var(--muted); font-weight: 700; }
.programme-log button, .programme-log .button { min-height: 44px; padding: 10px 18px; font-weight: 750; }
.programme-head { display: flex; justify-content: space-between; align-items: end; gap: 10px; margin-bottom: 10px; }
.programme-head h4 { margin: 0 !important; font-size: 20px !important; letter-spacing: -.035em !important; display: flex; gap: 8px; align-items: center; }
.programme-head > span { color: var(--muted); font-size: 13px; font-weight: 650; }
.phase-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.phase { --tone: var(--accent); position: relative; overflow: hidden; display: grid; align-content: start; gap: 4px; min-height: 104px; padding: 16px 14px 13px !important; border: 1px solid var(--line); border-radius: 16px; background: var(--soft); }
.phase::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 5px; background: var(--tone); }
.phase[data-tone="blue"], .ex-card[data-tone="blue"] { --tone: var(--blue); }
.phase[data-tone="amber"], .ex-card[data-tone="amber"] { --tone: var(--amber); }
.phase[data-tone="coral"], .ex-card[data-tone="coral"] { --tone: var(--danger); }
.phase-min { font-size: 26px; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--tone); }
.phase-min small { font-size: 13px; letter-spacing: 0; }
.phase-label { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.phase-option { color: var(--muted); font-size: 12px; }
.ex-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.ex-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; min-height: 0; padding: 20px 20px 18px 24px; border-radius: 20px; background: var(--soft); }
.ex-card::before { width: 6px; }
.ex-main { display: grid; align-content: start; gap: 6px; min-width: 0; }
.ex-index { padding: 0; }
.ex-main h5.ex-title { margin: 4px 0 0; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.05; letter-spacing: -.05em; font-weight: 800; }
.ex-dose { font-size: 14px; font-weight: 760; color: var(--muted); }
.ex-main p { margin: 0; font-size: 14px; line-height: 1.4; }
.ex-main p.ex-tech { color: var(--muted); } .ex-tech b { color: var(--tone); font-weight: 800; }
.ex-main p.ex-tech.caution { color: var(--ink); padding: 6px 9px; border-radius: 10px; background: color-mix(in srgb, var(--amber) 14%, transparent); } .ex-tech.caution b { color: var(--amber); }
.ex-num { align-self: start; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; font-size: 26px; font-weight: 850; letter-spacing: -.05em; color: var(--tone);
  background: color-mix(in srgb, var(--tone) 11%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 32%, transparent); }
.ex-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ex-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 9px 16px; border-radius: 11px; font-size: 14px; font-weight: 800; text-decoration: none; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--tone, var(--accent)) 47%, var(--line)); background: color-mix(in srgb, var(--tone, var(--accent)) 13%, var(--panel)); }
.ex-link.watch { background: var(--tone, var(--accent)); border-color: var(--tone, var(--accent)); color: var(--on); }
.ex-link:focus-visible { outline: 3px solid var(--tone, var(--accent)); outline-offset: 3px; }
.ex-play { font-size: 11px; }
.programme-links .ex-links { margin: 0; }
.programme-stop { border-width: 1px 1px 1px 5px; border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); }
.programme-stop h4 { color: var(--amber); }
.programme-cues, .programme-prose, .programme-note { padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--soft); }
.programme-cues h4, .programme-note h4 { margin: 0 0 6px; font-size: 15px; }
.programme-cues ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.programme-prose p { margin: 0 0 8px; padding-left: 12px; border-left: 3px solid color-mix(in srgb, var(--accent) 40%, var(--line)); line-height: 1.45; }
.programme-prose p:last-child { margin-bottom: 0; }
.programme-note p { margin: 0; }
.programme-note.caution { border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); background: color-mix(in srgb, var(--amber) 10%, var(--panel)); }
.chip.variant-full { color: var(--accent); } .chip.variant-short { color: var(--blue); }
@media (max-width: 580px) {
  .programme-hero { grid-template-columns: minmax(0, 1fr) auto; padding: 16px; }
  .programme-cadence { width: 86px; height: 86px; padding: 6px; }
  .programme-cadence b { font-size: 12px; } .programme-cadence span { font-size: 10px; }
  .phase-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-grid { grid-template-columns: 1fr; }
  .ex-card { min-height: 0; padding: 18px 16px 16px 20px; }
  .ex-num { width: 52px; height: 52px; font-size: 21px; border-radius: 15px; }
  .ex-links .ex-link { flex: 1; }
}
@media (max-width: 360px) { .goal-tiles { grid-template-columns: 1fr; } .goal-tile-win { white-space: nowrap; } }

/* Phones (029 walkthrough): the top bar keeps the brand, profile and a sample badge; theme, sign-out,
   Master view and Manage move into More so Today starts near the top. Wider screens are unchanged. */
.sheet-account { display: none; }
@media (max-width: 580px) {
  .rail { flex-wrap: nowrap; padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: 8px; }
  .rail .profile-switch > .row, .rail-foot > .row, .rail-foot .space-badge.personal, .rail-foot .who { display: none; }
  .rail .profile-switch { flex: 1 1 auto; grid-template-columns: minmax(0, 1fr); }
  .rail-foot:not(:has(.space-badge:not(.personal))) { display: none; }
  .more-sheet .sheet-account { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
  .more-sheet .sheet-account .row { gap: 8px; flex-wrap: wrap; }
  .more-sheet .sheet-account button, .more-sheet .sheet-account a { min-height: 44px; }
}

/* ======================================================================================
   Approved overnight design (healthos-overnight-approved-20261002). Desktop rail + top bar,
   phone top bar + bottom bar attached to the visible edge, and the shared visual components.
   ====================================================================================== */
:root {
  --surface: var(--panel);
  --raised: light-dark(#d9e6dc, #23343a);
  --shadow: light-dark(#4c69561f, #07111466);
  --green: light-dark(#1d8968, #83d8b9);
  --coral: light-dark(#ac6055, #efa5a0);
  --accent-ink: light-dark(#f7fffa, #123029);
}
html { background: var(--bg); }
html, body { overscroll-behavior-y: none; }
.app { min-height: 100vh; min-height: 100dvh; }
.rail-who { font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--muted); font-weight: 650; margin: -18px 12px 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail .nav-btn.area-link { padding-left: 12px; }
.rail .nav-more .profile-switch { display: grid; gap: 8px; margin: 4px 6px 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.profile-label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.profile-label select { width: 100%; }
.nav-btn.report-link { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.page-foot { display: none; }

/* Top bar: desktop shows theme and profile initial at the right; phones add the brand. */
.ap-top { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 70px; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.ap-wordmark { display: none; align-items: center; gap: 9px; font-weight: 750; letter-spacing: -.04em; font-size: 19px; color: var(--ink); text-decoration: none; margin-right: auto; }
.ap-mark { width: 30px; height: 30px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: 18px; }
.ap-top-right { display: flex; align-items: center; gap: 8px; }
.ap-demo { font-size: 11px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); padding: 4px 6px; border-radius: 6px; }
.ap-iconbutton { display: grid; place-items: center; width: 38px; height: 38px; min-height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); }
.ap-iconbutton svg { width: 18px; height: 18px; }
.ap-avatar { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: var(--raised); color: var(--accent); font-weight: 700; }

/* Page head, section titles, rings, segmented periods. */
.ap-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 1px 0 18px; flex-wrap: wrap; }
.ap-pagehead h1 { font-size: 31px; line-height: 1.1; letter-spacing: -.05em; margin: 0; font-weight: 760; }
.ap-date { font-size: 12px; color: var(--muted); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }
.ap-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ap-head-action { border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: var(--surface); padding: 8px; min-width: 41px; height: 41px; min-height: 41px; display: grid; place-items: center; text-decoration: none; }
.ap-head-action svg { width: 18px; height: 18px; }
.ap-sectiontitle { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 11px; }
.ap-sectiontitle h2 { font-size: 18px; letter-spacing: -.025em; margin: 0; }
.ap-link { border: 0; background: none; color: var(--accent); font-size: 13px; font-weight: 700; padding: 5px; min-height: 0; text-decoration: none; cursor: pointer; }
.ap-ring { --pct: 0; --ring: var(--accent); width: 75px; height: 75px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--ring) calc(var(--pct) * 1%), var(--line) 0); }
.ap-ring-inner { width: 60px; height: 60px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: 20px; font-weight: 760; letter-spacing: -.04em; }
.ap-ring-sm { width: 72px; height: 72px; }
.ap-ring-sm .ap-ring-inner { width: 58px; height: 58px; font-size: 16px; }
.ap-ring-lg { width: 112px; height: 112px; }
.ap-ring-lg .ap-ring-inner { width: 88px; height: 88px; font-size: 26px; }
.ap-period { display: flex; padding: 4px; border-radius: 13px; background: var(--surface); border: 1px solid var(--line); gap: 3px; margin: 0 0 17px; }
.ap-period button { flex: 1; min-width: 0; height: 35px; min-height: 35px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: 13px; font-weight: 700; padding: 0 6px; }
.ap-period button.selected { background: var(--raised); color: var(--ink); box-shadow: 0 1px 5px var(--shadow); }

/* Today, above Track. */
.ap-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--amber) 20%, var(--surface)), color-mix(in srgb, var(--amber) 9%, var(--surface)) 68%); border: 1px solid color-mix(in srgb, var(--amber) 38%, var(--line)); border-radius: 21px; padding: 18px; margin-bottom: 19px; display: flex; align-items: center; gap: 16px; min-width: 0; max-width: 510px; }
.ap-hero.done { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--surface)), var(--surface) 62%); border-color: var(--line); }
.ap-hero .ap-ring { --ring: var(--amber); }
.ap-hero.done .ap-ring { --ring: var(--accent); }
.ap-hero strong { font-size: 20px; display: block; line-height: 1.15; }
.ap-hero small { font-size: 13px; color: var(--muted); display: block; margin-top: 5px; }
.ap-hero .grow { min-width: 0; flex: 1; }
.ap-tasks .todo-row { display: flex; align-items: center; gap: 11px; padding: 8px 10px 8px 14px; border: 1px solid color-mix(in srgb, var(--amber) 36%, var(--line)); background: color-mix(in srgb, var(--amber) 17%, var(--surface)); border-radius: 13px; min-height: 50px; margin-bottom: 7px; }
.ap-tasks .todo-row.done { background: var(--surface); border-color: var(--line); }
.ap-tasks .todo-row.done > span { text-decoration: line-through; color: var(--muted); }
.ap-tasks .todo-row input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.ap-tasks .todo-row .icon-btn { border: 0; background: none; color: var(--muted); }
.ap-tasks > div > .sub { color: var(--muted); margin: 0 0 7px; }
.ap-tasks form { display: flex; gap: 8px; margin: 0 !important; }
.ap-tasks form input { flex: 1; min-width: 0; height: 45px; border: 1px dashed var(--line); background: transparent; border-radius: 12px; padding: 0 15px; }
.ap-tasks form button { border-radius: 12px; }
.ap-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 19px 0 2px; }
.ap-quick > button, .ap-quick > a { min-width: 0; display: grid; justify-items: center; gap: 5px; padding: 12px 4px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; font-size: 12px; font-weight: 700; text-decoration: none; min-height: 58px; }
.ap-quick svg { width: 22px; height: 22px; color: var(--accent); }
.ap-track-more { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 10px; }
/* Below Track: every collapsed bar (routines and areas) is one size. */
#main[data-page=today] .routine-bars { gap: 0; margin: 0; }
#main[data-page=today] .area-group.panel, #main[data-page=today] .routine-bar.panel { margin: 0 0 14px; }
#main[data-page=today] .area-group > summary { min-height: 58px; }

/* Visual goal cards. */
.ap-goalgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ap-goal { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; min-width: 0; display: flex; flex-direction: column; }
.ap-goal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ap-goal-head strong { font-size: 18px; }
.ap-goal-head svg { width: 18px; height: 18px; color: var(--tone, var(--accent)); flex: none; }
.ap-goal-read { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.ap-big { font-size: 34px; font-weight: 650; letter-spacing: -.04em; line-height: 1.1; }
.ap-target { color: var(--muted); font-size: 14px; margin-top: 8px; }
.ap-sub { color: var(--muted); font-size: 12px; margin-top: 4px; }
.ap-bar { height: 7px; width: 100%; background: var(--raised); border-radius: 6px; overflow: hidden; margin-top: auto; }
.ap-goal .ap-bar { margin-top: 20px; }
.ap-bar > span { display: block; height: 100%; background: var(--tone, var(--accent)); border-radius: inherit; }
.ap-goal.compact { padding: 18px; }
.ap-goal.compact .ap-big { font-size: 28px; }
.ap-goalfilters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.ap-goalfilters button { background: var(--surface); color: var(--muted); border: 1px solid var(--line); padding: 8px 12px; border-radius: 22px; min-height: 38px; font: inherit; }
.ap-goalfilters button[aria-pressed=true] { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.ap-archived { margin-top: 22px; color: var(--muted); }
.ap-archived summary { cursor: pointer; font-weight: 600; }
.ap-archived ul { margin: 10px 0 0; padding-left: 18px; font-size: 13px; }
.ap-member-select { min-width: 140px; }

/* Dashboard: six equal health-area cards. */
.ap-areagrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 18px; margin-bottom: 8px; }
.ap-area { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 250px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--tone, var(--accent)); border-radius: 16px; color: var(--ink); text-decoration: none; }
.ap-area h2 { align-self: flex-start; display: flex; gap: 9px; align-items: center; font-size: 19px; margin: 0; }
.ap-area h2 svg { width: 17px; height: 17px; color: var(--tone, var(--accent)); }
.ap-area .ap-ring { margin-top: 8px; width: 112px; height: 112px; }
.ap-area .ap-ring-inner { width: 92px; height: 92px; font-size: 26px; }
.ap-area .ap-none { font-size: 34px; color: var(--muted); margin: 34px 0 14px; line-height: 1; }
.ap-area .ap-caption { color: var(--muted); font-size: 14px; margin-top: auto; text-align: center; }
.ap-area:hover { border-color: color-mix(in srgb, var(--tone, var(--accent)) 50%, var(--line)); }

/* Weekly review. */
.ap-weekly-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.ap-wcard { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; min-width: 0; }
.ap-wcard > small { color: var(--ink); font-size: 15px; }
.ap-wcard .ap-big { margin: 12px 0 8px; }
.ap-wcard .ap-delta { color: var(--muted); font-size: 13px; }
.ap-wcard .ap-ring { margin: 18px auto 0; }
.ap-compare { display: flex; gap: 18px; align-items: end; height: 100px; margin: 34px 0 10px; }
.ap-compare > div { flex: 1; background: var(--raised); border-radius: 5px 5px 0 0; position: relative; min-height: 3px; }
.ap-compare > div.latest { background: var(--accent); }
.ap-compare > div.unknown { background: repeating-linear-gradient(45deg, var(--raised) 0 5px, transparent 5px 10px); border: 1px dashed var(--line); }
.ap-compare span { position: absolute; top: -24px; width: 100%; text-align: center; font-size: 14px; }
.ap-compare-labels { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.ap-matrix-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; overflow-x: auto; }
.ap-matrix-card h2 { font-size: 22px; margin: 0 0 18px; }
.ap-matrix { width: 100%; border-collapse: collapse; min-width: 520px; }
.ap-matrix th { color: var(--muted); font-size: 13px; font-weight: 600; padding: 8px 4px; }
.ap-matrix th[scope=row] { text-align: left; color: var(--ink); font-size: 15px; font-weight: 500; padding-left: 4px; }
.ap-matrix td { text-align: center; padding: 10px 4px; }
.ap-daymark { display: inline-block; width: 28px; height: 28px; border-radius: 6px; vertical-align: middle; }
.ap-daymark.met { background: var(--green); }
.ap-daymark.not { background: color-mix(in srgb, var(--amber) 62%, var(--surface)); }
.ap-daymark.unknown { border: 1.5px dashed var(--muted); background: transparent; }
.ap-daymark.future { border: 1px solid var(--line); opacity: .35; }
.ap-legend { display: flex; gap: 20px; flex-wrap: wrap; color: var(--muted); font-size: 13px; align-items: center; margin-top: 10px; }
.ap-legend > span { display: flex; gap: 7px; align-items: center; }
.ap-legend .ap-daymark { width: 12px; height: 12px; border-radius: 3px; }
.ap-weekly-range { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* My plan list and dedicated programme pages. */
.ap-planlink { width: 100%; display: flex; align-items: center; gap: 14px; padding: 20px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--tone, var(--accent)); border-radius: 15px; color: var(--ink); margin-bottom: 14px; text-decoration: none; }
.ap-planlink strong { flex: 1; font-size: 18px; }
.ap-planlink svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.ap-planlink .ap-arrow { color: var(--accent); }
.ap-back { display: inline-flex; gap: 6px; align-items: center; color: var(--accent); text-decoration: none; margin: 4px 0 16px; font-size: 15px; }
.ap-programmehero { padding: 28px; background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface)); border: 1px solid var(--line); border-radius: 24px; display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 22px; }
.ap-programmehero h1 { font-size: clamp(30px, 4vw, 50px); letter-spacing: -.05em; line-height: 1.05; margin: 0; }
.ap-programmehero .ap-version { color: var(--muted); font-size: 13px; margin-top: 10px; }
.ap-cadence { border: 8px solid var(--accent); border-radius: 50%; width: 130px; height: 130px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6px; }
.ap-cadence b { font-size: 36px; letter-spacing: -.05em; line-height: 1.05; }
.ap-cadence span { font-size: 12px; color: var(--muted); }
.ap-sequence { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.ap-sequence > div, .ap-sequence > a { flex: 1; min-width: 130px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; color: var(--ink); text-decoration: none; }
.ap-sequence strong { display: block; font-size: 27px; margin-bottom: 8px; letter-spacing: -.03em; }
.ap-sequence small { color: var(--muted); }
.ap-exercisegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ap-exercisecard { border: 1px solid var(--line); background: var(--surface); border-radius: 22px; padding: 23px; position: relative; border-left: 5px solid var(--tone, var(--accent)); min-width: 0; }
.ap-exercisecard > small { color: var(--muted); }
.ap-exercisecard.has-symbol { padding-right: 112px; }
.ap-symbol { position: absolute; top: 20px; right: 20px; width: 72px; height: 72px; border-radius: 18px; display: grid; place-items: center; color: var(--tone, var(--accent)); background: color-mix(in srgb, var(--tone, var(--accent)) 11%, transparent); border: 1px solid color-mix(in srgb, var(--tone, var(--accent)) 32%, transparent); }
.ap-symbol svg { width: 49px; height: 49px; stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) { .ap-exercisecard.has-symbol { padding-right: 92px; } .ap-symbol { width: 60px; height: 60px; top: 16px; right: 16px; } .ap-symbol svg { width: 40px; height: 40px; } }
.ap-exercisecard h2 { font-size: 26px; line-height: 1.1; letter-spacing: -.04em; margin: 14px 0 10px; overflow-wrap: anywhere; }
.ap-exercisecard > span { font-size: 15px; }
.ap-exercisecard ul { margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: 14px; }
.ap-exercisecard a { font-size: 14px; }
.ap-stop { margin: 20px 0 0; padding: 14px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--coral) 45%, var(--line)); background: color-mix(in srgb, var(--coral) 10%, var(--surface)); }
.ap-stop strong { display: block; margin-bottom: 4px; }
.ap-keep { margin-top: 8px; }
.ap-keep p { margin: 0 0 6px; }
.ap-optional { margin-top: 22px; color: var(--muted); font-size: 14px; }
.ap-optional > summary { cursor: pointer; }
.ap-optional h3 { color: var(--ink); margin: 16px 0 4px; font-size: 15px; }
.ap-optional p { color: var(--ink); line-height: 1.6; white-space: pre-line; }
.ap-optional .ap-prov { display: block; color: var(--muted); margin: 0 0 4px; }
.ap-exercisecard .ap-now { margin: 6px 0 0; font-size: 14px; color: var(--ink); }
.ap-exercisecard .ap-now b { color: var(--accent); }
.ap-plainbutton { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 9px; padding: 10px 15px; min-height: 44px; font-weight: 650; }

/* Routine editor: drag/reorder, rename, add/remove steps, minutes. */
.ap-editrow { display: grid; grid-template-columns: 32px minmax(0, 1fr) 96px 36px; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 10px; margin: 10px 0; }
.ap-editrow.dragging { opacity: .5; }
.ap-editrow > input { width: 100%; }
.ap-editrow label { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; }
.ap-editrow label input { width: 58px; }
.ap-editrow button { background: none; border: 0; color: var(--muted); font-size: 22px; padding: 0; min-height: 44px; }
.ap-grip { cursor: grab; touch-action: pinch-zoom; }
.ap-editor-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

/* Progress: browse-first metric library. */
.ap-measurebar { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-align: left; margin-bottom: 12px; }
.ap-measurebar strong { flex: 1; font-size: 16px; }
.ap-measurebar small { color: var(--muted); }
.ap-measurebar .ap-ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--raised); color: var(--accent); }
.ap-measurebar svg { width: 18px; height: 18px; }
.ap-library { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; margin-bottom: 22px; }
.ap-library[hidden] { display: none; }
.library-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.library-heading h2 { margin: 0; font-size: 21px; }
.library-tabs { display: flex; gap: 8px; margin: 16px 0; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.library-tabs button { background: transparent; color: var(--muted); border: 0; border-radius: 8px; font: inherit; padding: 8px 12px; min-height: 38px; }
.library-tabs button[aria-pressed=true] { background: var(--raised); color: var(--ink); }
.library-tabs span { margin-left: 6px; font-size: 12px; }
.library-current { display: flex; justify-content: space-between; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); padding: 0 0 18px; margin: 0 0 10px; }
.library-current > div { display: grid; gap: 3px; }
.library-current small, .library-current span { color: var(--muted); font-size: 12px; }
.library-current strong { font-size: 16px; }
.library-rows { padding-bottom: 10px; }
.library-row { display: flex; align-items: center; gap: 8px; padding: 1px 0; }
.library-choice { display: flex; align-items: center; flex: 1; min-width: 0; min-height: 44px; text-align: left; padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; }
.library-choice[aria-pressed=true] strong::after { content: ' ✓'; color: var(--accent); }
.library-choice strong { font-size: 14px; font-weight: 550; overflow-wrap: anywhere; }
.library-choice span { font-size: 12px; color: var(--muted); }
.library-choice[aria-pressed=true] { background: var(--raised); }
.library-hide { flex: none; font: inherit; font-size: 13px; background: transparent; color: var(--muted); border: 0; padding: 0 12px; min-height: 44px; min-width: 56px; border-radius: 8px; }
.library-hide:hover { background: var(--raised); color: var(--ink); }
.library-empty { color: var(--muted); padding: 32px 0; text-align: center; }
.metric-breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 18px 0; color: var(--muted); font-size: 14px; }
.metric-breadcrumb button { font: inherit; background: transparent; border: 0; color: var(--accent); padding: 4px 0; min-height: 0; }
.metric-breadcrumb strong { font-weight: 500; color: var(--ink); }
.metric-browser-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.metric-source-card, .metric-category-card { position: relative; display: grid; gap: 7px; text-align: left; padding: 20px 42px 20px 18px; min-height: 92px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; }
.metric-source-card:hover, .metric-category-card:hover { background: var(--raised); border-color: var(--accent); }
.metric-source-card strong, .metric-category-card strong { font-size: 17px; font-weight: 550; }
.metric-source-card span, .metric-category-card span { font-size: 13px; color: var(--muted); }
.metric-source-card i, .metric-category-card i { position: absolute; right: 18px; top: 34px; font-style: normal; color: var(--accent); }
.ap-chart { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.ap-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ap-chart-head h2 { margin: 0; font-size: 22px; }
.ap-stats { display: flex; gap: 26px; flex-wrap: wrap; margin: 20px 0; }
.ap-stats strong { font-size: 30px; display: block; letter-spacing: -.03em; }
.ap-stats small { color: var(--muted); }
.ap-chart svg { width: 100%; height: auto; display: block; }
.ap-chart svg text { fill: var(--muted); font-size: 13px; }
.ap-chart .gridline { stroke: var(--line); stroke-width: 1; }
.ap-chart .targetline { stroke: var(--blue); stroke-dasharray: 6 5; stroke-width: 1.5; }
.ap-chart .historyline { stroke: var(--accent); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ap-chart .dot { fill: var(--accent); }
.ap-chart .barmark { fill: var(--accent); }
.ap-chart-empty { padding: 60px 20px; text-align: center; color: var(--muted); }
.ap-chart-foot { color: var(--muted); font-size: 13px; margin-top: 10px; display: flex; gap: 18px; flex-wrap: wrap; }
@media (max-width: 760px) { .photo-toolbar { display: grid; grid-template-columns: 1fr auto; } .photo-toolbar select { grid-column: 1 / -1; width: 100%; } .photo-toolbar input { min-width: 0; } }
.ap-rec-key { display: inline-flex; align-items: center; gap: 6px; }
.ap-rec-key i { width: 18px; border-top: 3px solid var(--accent); border-radius: 2px; }
/* Comparison delta: neutral (no good/bad colour), beside the average. */
/* Phone: value, delta, goal and coverage read across in one row of three (approved Progress card). */
@media (max-width: 760px) { .ap-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; margin: 16px 0; } .ap-stats strong { font-size: 24px; white-space: nowrap; } }
.ap-stats .ap-delta strong { color: var(--ink); }
.ap-info { width: 36px; height: 36px; padding: 0; display: inline-grid; place-items: center; text-align: center; border-radius: 50%; font-style: italic; font-weight: 700; font-family: Georgia, serif; }
.ap-compare-info { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--raised); display: grid; gap: 6px; font-size: 13px; }
.ap-compare-info p { margin: 0; }
.ap-compare-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; }
.ap-compare-row span:first-child { color: var(--muted); }

/* Journal: compact E-box and fields that grow with the writing. */
.journal-panel textarea.ap-grow { overflow: hidden; resize: none; min-height: 46px; }
.journal-panel textarea.notebook.ap-grow { min-height: 180px; }
.journal-panel .ebox-vessel { height: 140px; width: 84px; }
.ap-journal-page .journal-panel { margin-top: 0; }

/* More (phones): the approved page of rows; profile selector on top. */
.ap-more-list { display: grid; gap: 8px; }
.ap-more-row { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 56px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 13px; padding: 10px 13px; text-align: left; text-decoration: none; font-weight: 600; list-style: none; cursor: pointer; }
.ap-more-row::-webkit-details-marker { display: none; }
.ap-more-row > span:not(.ap-more-chev) { flex: 1; }
.ap-more-row > svg { width: 19px; height: 19px; color: var(--accent); flex: none; }
.ap-more-chev { color: var(--muted); }
.ap-more-group[open] > .ap-more-row { border-radius: 13px 13px 0 0; }
.ap-more-group[open] .ap-more-chev { transform: rotate(180deg); }
.ap-more-body { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 13px 13px; padding: 6px; display: grid; gap: 2px; background: var(--surface); }
.ap-more-body .nav-btn { display: flex; }
.ap-more-profile { margin: 0 0 12px; }
.ap-more-profile .profile-switch { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.ap-more-profile .profile-switch .row { gap: 8px; }

@media (max-width: 980px) {
  .ap-areagrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  /* Phones: the rail is replaced by the sticky top bar and the bottom bar. */
  .app > .rail { display: none; }
  .ap-top { position: sticky; top: 0; z-index: 12; justify-content: space-between; min-height: 0; padding: calc(10px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); }
  .ap-wordmark { display: flex; }
  .ap-goalgrid, .ap-exercisegrid, .metric-browser-grid { grid-template-columns: 1fr; }
  .ap-weekly-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-weekly-summary > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ap-areagrid { gap: 10px; }
  .ap-area { min-height: 200px; padding: 16px 12px; gap: 10px; }
  .ap-area h2 { font-size: 15px; }
  .ap-area .ap-ring { width: 88px; height: 88px; }
  .ap-area .ap-ring-inner { width: 72px; height: 72px; font-size: 20px; }
  .ap-area .ap-caption { font-size: 12px; }
  .ap-programmehero { flex-direction: column; align-items: flex-start; padding: 22px; }
  .ap-cadence { width: 92px; height: 92px; border-width: 6px; }
  .ap-cadence b { font-size: 26px; }
  .ap-goal { padding: 18px; }
  .ap-big { font-size: 30px; }
  .ap-chart { padding: 16px; }
  .ap-library { padding: 16px; }
  /* More is a full page above the bottom bar on phones. */
  .more-sheet:not([hidden]) { top: 0; bottom: calc(66px + env(safe-area-inset-bottom)); max-height: none; border-radius: 0; border-top: 0; box-shadow: none; background: var(--bg);
    padding: calc(16px + env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 18px max(18px, env(safe-area-inset-left)); }
  .more-sheet > h2 { font-size: 31px; letter-spacing: -.05em; font-weight: 760; margin: 0 0 14px; }
  .more-sheet .sheet-account { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
  /* Bottom bar attached to the visible bottom edge. Its own background continues below it, so the
     home-indicator area and any rubber-band overscroll never show page content under the bar. */
  .bottom-nav { bottom: 0; transform: translateZ(0); background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bottom-nav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 120px; background: var(--surface); pointer-events: none; }
  .main { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
  .ap-pagehead h1 { font-size: 30px; }
  .ap-sequence > div { min-width: 96px; padding: 12px; }
  .ap-sequence strong { font-size: 22px; }
  .ap-exercisecard { padding: 18px; }
  .ap-exercisecard h2 { font-size: 23px; }
}
#main .area-group.panel { padding: 0; }
@media (max-width: 580px) {
  #main[data-page=today] .area-group > summary { min-height: 66px; padding: 11px 14px; gap: 10px; flex-wrap: nowrap; }
  #main[data-page=today] .area-group > summary > span:first-child { flex: 1; gap: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #main[data-page=today] .area-group > summary > .row { flex: none; gap: 6px; flex-wrap: nowrap; }
  #main[data-page=today] .area-group > summary .sub { white-space: nowrap; }
}
.programme-log { margin: 0 0 16px; gap: 8px; }
.ap-period button { justify-content: center; text-align: center; }
.ap-bar > span { background: var(--accent); }
.ap-goal .plan-more { margin-top: 12px; font-size: 12px; color: var(--muted); }
.ap-goal .plan-more > summary { cursor: pointer; }
.ap-goal .plan-more[open] { color: var(--ink); }
.ap-goal .plan-more .plan-win { margin: 8px 0; }
.review-dates { position: relative; }
.review-dates > summary { list-style: none; cursor: pointer; padding: 6px 0; }
.review-dates > summary::-webkit-details-marker { display: none; }
.review-dates[open] > form { position: absolute; right: 0; top: 100%; z-index: 5; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px; width: max-content; }
.weekly > .ap-weekly-summary, .weekly > .ap-matrix-card { margin-bottom: 0; }
.review-detail { color: var(--muted); }
.review-detail > summary { cursor: pointer; font-weight: 600; margin: 6px 0; }
.ap-matrix th { text-transform: none; letter-spacing: 0; border: 0; } .ap-matrix td { border: 0; } .ap-matrix tr + tr { border-top: 1px solid var(--line); }
.entry-remember { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; font-size: 14px; color: var(--ink); cursor: pointer; min-height: 44px; }
.entry-remember input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; }
@media (max-width: 780px) {
  body.kb-open .bottom-nav { display: none; }
  body.kb-open .main { padding-bottom: 24px; }
}
.ap-head-actions select { width: auto; min-height: 41px; } .ap-head-actions { flex-wrap: nowrap; }
.programme-log { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 580px) { .ap-head-actions { flex-wrap: wrap; justify-content: flex-end; } .ap-head-actions select { max-width: 150px; } }
.ap-phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ap-phases > div { border-top: 3px solid var(--tone, var(--accent)); min-width: 0; display: grid; gap: 4px; align-content: start; }
.ap-phases strong { color: var(--tone, var(--accent)); margin: 0; }
.ap-phases b { font-size: 15px; }
.ap-phases small { color: var(--muted); }
.ap-exlinks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.ap-watch, .ap-guide { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 12px; font-weight: 700; text-decoration: none; }
.ap-watch { background: var(--tone, var(--accent)); color: var(--accent-ink); }
.ap-guide { border: 1px solid color-mix(in srgb, var(--tone, var(--accent)) 55%, var(--line)); color: var(--ink); background: color-mix(in srgb, var(--tone, var(--accent)) 8%, var(--surface)); }
.ap-exercisecard > span { font-weight: 650; color: color-mix(in srgb, var(--ink) 80%, var(--muted)); }
@media (max-width: 780px) { .ap-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.journal-spread .jg + .jg { margin-top: 18px; }
.ap-ebox-meter { display: none; height: 14px; background: var(--raised); border-radius: 7px; overflow: hidden; margin: 6px 0 14px; }
.ap-ebox-meter > span { display: block; height: 100%; background: var(--accent); }
.ap-journal-page .journal-panel { border-top: 4px solid var(--purple); }
@media (max-width: 780px) {
  .journal-spread { display: flex; flex-direction: column; gap: 18px; }
  .journal-spread > div { display: contents; }
  .journal-spread .jg + .jg { margin-top: 0; }
  .journal-spread > div + div { padding: 0; border: 0; }
  .jg-happy { order: 1; } .jg-free { order: 2; } .jg-grat { order: 3; } .jg-ebox { order: 4; } .jg-tasks { order: 5; } .jg-wins { order: 6; }
  .jg-happy { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .jg-happy h3 { margin: 0; font-size: 17px; font-weight: 550; }
  .jg-happy .field { display: flex; align-items: center; gap: 8px; margin: 0; }
  .jg-happy .field > span { order: 2; color: var(--muted); }
  .jg-happy input { width: 70px; }
  .jg-ebox .ebox-vessel { display: none; }
  .jg-ebox .ap-ebox-meter { display: block; }
}
.journal-panel textarea.notebook { padding: 0 8px; line-height: 28px; background-attachment: local; }
/* Approved calendar: follows the app theme; HealthOS blocks, other calendars and training are tinted. */
.apple-calendar { background: transparent; color: var(--ink); padding-top: 0; border-radius: 0; overflow: visible; }
.ap-calendar-page .calendar-month { display: none; }
.apple-calendar .calendar-toolbar { padding: 0 0 16px; }
.apple-calendar .calendar-toolbar button { min-height: 38px; }
.apple-calendar .calhead { background: var(--bg); color: var(--muted); border-color: var(--line); text-transform: uppercase; font-size: 12px; letter-spacing: .04em; flex-direction: column; gap: 2px; }
.apple-calendar .calhead strong { font-size: 18px; color: var(--ink); letter-spacing: 0; }
.apple-calendar .calhead.today { background: var(--accent); color: var(--accent-ink); border-radius: 14px; }
.apple-calendar .calhead.today strong { background: none; color: var(--accent-ink); padding: 0; border-radius: 0; }
.apple-calendar .daycol { border-color: var(--line); background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hh) - 1px), color-mix(in srgb, var(--line) 70%, transparent) calc(var(--hh) - 1px), color-mix(in srgb, var(--line) 70%, transparent) var(--hh)); }
.apple-calendar .hour { color: var(--muted); }
.apple-calendar .event { background: color-mix(in srgb, var(--blue) 22%, var(--surface)); color: var(--ink); border-left: 3px solid var(--blue); border-radius: 8px; }
.apple-calendar .event small { color: var(--muted); }
.apple-calendar .event.routine { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); color: var(--ink); border-left: 3px dotted var(--accent); }
.apple-calendar .event[data-kind=gym], .apple-calendar .event[data-kind=pilates], .apple-calendar .event[data-kind=badminton] { background: color-mix(in srgb, var(--amber) 22%, var(--surface)); color: var(--ink); border-left: 3px dotted var(--amber); }
.apple-calendar .event[data-kind=commitment] { background: color-mix(in srgb, var(--coral) 20%, var(--surface)); color: var(--ink); border-color: var(--coral); }
.apple-calendar .event.external { background: color-mix(in srgb, var(--blue) 24%, var(--surface)); border-left: 3px solid var(--blue); }
.apple-calendar .now-line { border-color: var(--coral); }
.apple-calendar .calendar-connection { border-top: 1px solid var(--line); padding: 14px 0; }
.apple-calendar .calendar-connection summary { color: var(--muted); }
.ap-viewing { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 3px 4px 3px 10px; } .ap-viewing .ap-link { color: var(--accent-ink); text-decoration: underline; padding: 2px 6px; }
@media (max-width: 580px) {
  .ap-matrix-card { padding: 16px 12px; }
  .ap-matrix { min-width: 0; table-layout: fixed; }
  .ap-matrix th, .ap-matrix td { padding: 6px 1px; }
  .ap-matrix thead th { font-size: 10px; }
  .ap-matrix th[scope=row] { font-size: 12.5px; width: 31%; padding-right: 4px; line-height: 1.2; }
  .ap-daymark { width: 20px; height: 20px; border-radius: 5px; }
  .ap-wcard { padding: 16px; }
  .ap-wcard .ap-big { font-size: 28px; }
  .ap-compare { height: 70px; gap: 10px; }
}
/* 1003 design repair: approved phone compositions. Goal cards become compact rows (title, value, bar,
   target and percent; no ring); Weekly summary tiles drop their comparison columns for a bar; the
   matrix keeps a real label column so no day cell sits over a habit name. */
.ap-goal-pct { display: none; }
.ap-wcard > .ap-bar { display: none; }
.ap-matrix thead th:first-child { width: 30%; }
.ap-goal { position: relative; }
.ap-goal:has(> .plan-more) > .ap-goal-head { padding-right: 30px; }
.ap-goal > .plan-more { margin-top: 0; }
.ap-goal > .plan-more[open] { margin-top: 12px; }
.ap-goal .plan-more > summary { list-style: none; position: absolute; top: 16px; right: 10px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; min-height: 30px; border-radius: 8px; color: var(--muted); }
.ap-goal .plan-more > summary:hover { background: var(--raised); }
.ap-goal .plan-more > summary::-webkit-details-marker { display: none; }
.ap-goal .plan-more > summary::after { content: "⌄"; font-size: 18px; line-height: 1; transform: translateY(-3px); }
.ap-goal .plan-more[open] > summary::after { transform: rotate(180deg) translateY(-2px); }
.review-changes .review-change { padding: 12px 14px; }
@media (max-width: 780px) {
  .ap-goalgrid { gap: 10px; }
  .ap-goal { padding: 14px 16px; border-radius: 14px; }
  .ap-goal-head { justify-content: flex-start; gap: 8px; margin-bottom: 4px; }
  .ap-goal-head strong { font-size: 13px; font-weight: 700; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ap-goal-head svg { order: -1; width: 17px; height: 17px; }
  .ap-goal-pct { display: block; margin-left: auto; font-size: 13px; font-weight: 700; color: var(--ink); }
  .ap-goal .ap-ring { display: none; }
  .ap-goal-read { display: block; }
  .ap-goal .ap-big, .ap-goal.compact .ap-big { font-size: 25px; margin: 6px 0 2px; }
  .ap-goal .ap-target { font-size: 12px; margin-top: 2px; }
  .ap-goal .ap-sub:not([data-unknown-window]) { display: none; }
  .ap-goal .ap-bar { margin-top: 10px; height: 8px; }
  .ap-goal .plan-more > summary { top: 9px; right: 6px; }
  .ap-area { min-height: 168px; padding: 14px 10px; gap: 8px; }
  .ap-area .ap-ring { width: 76px; height: 76px; margin-top: 2px; }
  .ap-area .ap-ring-inner { width: 62px; height: 62px; font-size: 18px; }
  .ap-area .ap-none { margin: 18px 0 8px; }
  .ap-weekly-summary { gap: 10px; margin-bottom: 14px; }
  .ap-wcard { padding: 14px 16px; }
  .ap-wcard > small { font-size: 13px; font-weight: 700; color: var(--muted); }
  .ap-wcard .ap-big { font-size: 25px; margin: 8px 0 4px; }
  .ap-wcard .ap-delta { font-size: 12px; }
  .ap-wcard .ap-compare, .ap-wcard .ap-compare-labels, .ap-wcard .ap-ring { display: none; }
  .ap-wcard > .ap-bar { display: block; margin-top: 10px; height: 8px; }
}
@media (max-width: 580px) {
  .ap-matrix thead th:first-child { width: 33%; }
  .ap-matrix th[scope=row] { width: auto; overflow-wrap: anywhere; hyphens: auto; }
  .ap-daymark { width: 18px; height: 18px; }
}
.rail .nav-more > summary.nav-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rail .nav-more > summary.nav-label::after { content: "⌄"; font-size: 15px; letter-spacing: 0; line-height: 1; transform: translateY(-3px); }
.rail .nav-more[open] > summary.nav-label::after { transform: rotate(180deg) translateY(-3px); }
.rail .nav-more .profile-switch { padding: 10px; }
.rail .nav-more .profile-label select { min-width: 0; width: 100%; max-width: none; box-sizing: border-box; text-overflow: ellipsis; }
.ap-more-page .ap-more-profile { margin-bottom: 12px; }
.ap-more-page .sheet-account { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 580px) {
  /* Viewing another member: one compact line beside the wordmark. */
  .ap-top { gap: 8px; }
  .ap-top-right { min-width: 0; gap: 6px; }
  .ap-viewing { white-space: nowrap; max-width: 150px; padding: 3px 3px 3px 9px; font-size: 11.5px; }
  .ap-viewing > :first-child { overflow: hidden; text-overflow: ellipsis; }
  .ap-viewing .ap-link { padding: 2px 5px; min-height: 0; }
}
.content { max-width: 1320px; }
/* Journal (1003 repair): one set of fields, two arrangements. */
.ap-phone-only { display: none; }
.journal-panel .gratitude-n { color: var(--accent); font-weight: 750; min-width: 14px; }
.journal-panel .gratitude-n::after { content: "."; }
.jg-tasks form input, .ap-tasks form input { flex: 1; min-width: 0; }
.jg-tasks form button { flex: none; }
/* The + Add button appears once a task is typed; Enter also adds. */
.ap-tasks form input:placeholder-shown + button, .jg-tasks form input:placeholder-shown + button { display: none; }
.ap-tasks form { margin-top: 0 !important; }
.ap-tasks > div:empty { display: none; }
.jg-happy .field { margin: 0; }
.jg-ebox .ap-ebox-total { display: grid; gap: 4px; }
@media (max-width: 780px) {
  .ap-desk-only { display: none; }
  .ap-phone-only { display: inline; }
  header.ap-phone-only { display: flex; }
  .ap-today-journal { display: none; }
  .ap-journal-head { align-items: center; }
  .ap-journal-head .ap-link { font-size: 16px; }
  .ap-journal-page .journal-panel { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
  .ap-journal-page .journal-heading h2 { display: none; }
  .ap-journal-page .journal-heading { margin-bottom: 8px; }
  .journal-spread .jg h3 { font-size: 17px; font-weight: 600; margin: 0 0 8px; }
  .jg-happy { display: flex; align-items: center; gap: 10px; }
  .jg-happy h3 { margin: 0 !important; }
  .jg-happy .field { display: flex; flex-direction: row; align-items: center; gap: 8px; }
  .jg-happy .field > .ap-of { order: 0; color: var(--muted); }
  .jg-ebox { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
  .jg-ebox > h3 { flex: 1; margin: 0 !important; }
  .jg-ebox > .ap-ebox-total { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); }
  .jg-ebox > .ap-ebox-total input { width: 64px; }
  .jg-ebox > .ap-ebox-meter, .jg-ebox > div:not(.ebox-vessel):not(.ap-ebox-meter) { flex-basis: 100%; }
  .jg-ebox > .ap-ebox-meter { margin: 14px 0 6px; }
  .jg-ebox > button { margin-top: 6px; }
  .jg-tw { margin-top: 4px; }
  .jg-tw > summary { font-size: 15px; font-weight: 600; padding: 10px 0; }
  .jg-tw .jg { margin-top: 10px; }
}
@media (max-width: 780px) {
  .jg-happy { flex-wrap: nowrap; }
  .jg-happy > h3 { flex: none; width: auto; }
  .jg-ebox > h3 { order: 1; } .jg-ebox > .ap-ebox-total { order: 2; } .jg-ebox > .ap-ebox-meter { order: 3; }
  .jg-ebox > div:not(.ebox-vessel):not(.ap-ebox-meter) { order: 4; } .jg-ebox > button { order: 5; }
  .jg-ebox > button { flex: none; width: auto; border: 0; background: none; color: var(--accent); font-weight: 700; padding: 6px 0; min-height: 36px; }
}
@media (max-width: 780px) {
  .journal-spread > .jg { display: block; }
  .journal-spread > .jg-happy, .journal-spread > .jg-ebox { display: flex; }
  .journal-spread > .jg-tw { order: 7; }
}
@media (max-width: 780px) { .jg-tw .jg-wins { margin-top: 16px; } }
/* Weekly (1003-003): phone shows the approved four compact tiles; desktop keeps the comparison cards. */
.ap-weekly-tiles { display: none; }
@media (max-width: 780px) {
  .weekly .ap-weekly-summary { display: none; }
  .ap-weekly-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ap-wtile { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 14px 16px; min-width: 0; }
  .ap-wtile > small { display: block; font-size: 14px; font-weight: 600; color: var(--muted); }
  .ap-wtile .ap-big { font-size: 30px; font-weight: 760; letter-spacing: -.03em; margin-top: 6px; line-height: 1.1; }
  .ap-wtile .ap-of { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
  .ap-wtile .ap-delta { font-size: 13px; color: var(--muted); margin-top: 4px; }
  .weekly .ap-dup-tile { display: none; }
}
/* Phone Journal (1003-003): compact bordered free-writing field that grows, primary Done and Contributor;
   Done keeps the entry, so the draft/save row is desktop-only here. */
@media (max-width: 780px) {
  .journal-panel textarea.notebook, .journal-panel textarea.notebook.ap-grow { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; line-height: 1.5; min-height: 120px; }
  .ap-journal-head .ap-journal-done { min-height: 44px; padding: 0 18px; border-radius: 12px; font-size: 16px; }
  .jg-ebox > button.small-btn { background: var(--accent); color: var(--on); border: 0; border-radius: 12px; padding: 10px 16px; min-height: 44px; font-size: 15px; font-weight: 600; margin-top: 10px; }
  .ap-journal-page .journal-panel > .form-actions { display: none; }
}
/* Programme pages (1003 repair): eyebrow + source tagline hero, rules as rules, conditions, meal tiles. */
.ap-eyebrow { color: var(--accent); font-size: 12px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.ap-programmehero h1 .ap-line { display: block; }
.ap-purpose { color: var(--ink); opacity: .85; font-size: 17px; line-height: 1.45; margin: 14px 0 0; max-width: 56ch; }
.ap-rules { margin: 0; padding: 14px 18px 14px 34px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; display: grid; gap: 8px; line-height: 1.5; }
.ap-rules b { color: var(--ink); }
.ap-condition { margin: -2px 0 12px; padding: 10px 14px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--amber) 60%, var(--line)); color: var(--ink); background: color-mix(in srgb, var(--amber) 8%, var(--surface)); font-size: 14px; }
.ap-exercisecard > small { letter-spacing: .1em; font-weight: 750; color: var(--tone, var(--muted)); }
.ap-exlinks { display: flex; flex-wrap: wrap; gap: 10px; }
.ap-exlinks > a { min-width: 112px; padding: 0 18px; }
.ap-mealgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ap-meal { text-align: left; font: inherit; color: var(--ink); cursor: pointer; padding: 18px; }
.ap-meal h2 { font-size: 22px; margin: 10px 0 6px; }
.ap-meal-state { font-size: 14px; font-weight: 700; color: var(--muted); }
.ap-meal-state.done { color: var(--green); } .ap-meal-state.not { color: var(--amber); }
.ap-meal[data-state=unknown] { border-left-style: dashed; }
/* An unrecorded meal's dashed edge uses the line colour; its number keeps readable contrast. */
.ap-meal[data-state=unknown] small { color: var(--muted); }
.ap-sequence > div > span { color: var(--muted); font-size: 13px; }
@media (max-width: 780px) {
  .ap-mealgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-purpose { font-size: 15px; }
  .ap-meal h2 { font-size: 19px; }
}
.ap-programme .ap-period { margin-top: 22px; }
.ap-stop { border-left: 5px solid var(--coral); }
.ap-meal { display: grid; justify-items: start; align-content: start; gap: 0; min-height: 120px; }
.ap-cadence b.long { font-size: 27px; }
@media (max-width: 780px) { .ap-cadence b.long { font-size: 19px; } }
.ap-fold { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); margin-top: 10px; }
.ap-fold > summary { cursor: pointer; padding: 14px 16px; font-weight: 700; font-size: 16px; list-style: none; display: flex; justify-content: space-between; }
.ap-fold > summary::-webkit-details-marker { display: none; }
.ap-fold > summary::after { content: "⌄"; color: var(--muted); }
.ap-fold[open] > summary::after { transform: rotate(180deg); }
.ap-fold > p, .ap-fold > ul { margin: 0 16px 16px; }
.ap-fold + .ap-fold { margin-top: 8px; }
/* Progress (1003 repair): the goal is one dashed blue line keyed in the foot, as approved. */
.ap-chart .target-line { stroke: var(--blue); stroke-dasharray: 6 5; stroke-width: 1.5; }
.ap-chart .target-key, .ap-chart .target-label { display: none; }
.ap-goal-key { display: inline-flex; align-items: center; gap: 6px; }
.ap-goal-key i { width: 18px; border-top: 2px dashed var(--blue); }
.ap-chart-empty .ap-link { margin-top: 8px; font-size: 14px; }
/* iPhone Home Screen app (1003 repair). In iOS standalone mode WebKit moves position:fixed elements with
   the page whenever the document itself scrolls (and leaves the visual viewport offset after the keyboard
   closes), so a fixed bottom bar floats above the bottom edge while scrolling. Here the document never
   scrolls: the shell fills the screen, .main is the only scroller, and the bottom bar is an ordinary row
   at the end of the shell whose own background runs into the home-indicator area. Safari and desktop keep
   normal page scrolling. */
@media (max-width: 780px) {
  html.app-shell:has(.app), html.app-shell:has(.app) body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  html.app-shell .app { position: fixed; top: 0; right: 0; bottom: 0; left: 0; min-height: 0; height: auto; display: flex; flex-direction: column; }
  html.app-shell .app > .main { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; padding-bottom: 24px; }
  html.app-shell .app > .main > * { flex-shrink: 0; }
  html.app-shell .bottom-nav { position: relative; flex: none; left: auto; right: auto; bottom: auto; transform: none; }
  html.app-shell .bottom-nav::after { display: none; }
  html.app-shell .more-sheet:not([hidden]) { bottom: calc(66px + env(safe-area-inset-bottom)); }
  html.app-shell body.kb-open .main { padding-bottom: 24px; }
}
.ap-stages > div { border-top: 3px solid var(--tone, var(--accent)); }
.ap-stages strong { font-size: 18px; color: var(--tone, var(--accent)); }
.ap-stages span { color: var(--ink); font-size: 14px; line-height: 1.45; }
@media (max-width: 780px) { .ap-stages > div { min-width: calc(50% - 5px); } }
.ap-goal .programme-log { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.ap-goal .programme-log > button { margin: 0; min-height: 40px; padding: 8px 12px; font-size: 13px; width: auto; flex: 0 1 auto; }
.ap-goal .week-strip { margin-top: 10px; }
.plan-dash-window { margin-top: 10px; }

/* In-app photo viewer: dark full-screen layer with an always-reachable Back control. The stage row
   and its single cell are minmax(0, 1fr), so the image is limited by the space actually left between
   the bar and the category row (a plain 1fr cell let a 2048 px photo grow past them). */
.pv { position: fixed; inset: 0; z-index: 2000; background: #0d1214; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); color: #e8eeee; }
.pv-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; min-height: 60px; box-sizing: border-box; }
.pv-zoom-btn { margin-left: auto; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 22px; background: #26302f; color: #fff; border: 1px solid #3c4746; font-size: 14px; }
.pv-close { min-height: 44px; min-width: 88px; border-radius: 22px; background: #26302f; color: #fff; border: 1px solid #3c4746; font-size: 16px; }
.pv-title { font-size: 15px; opacity: .85; }
.pv-stage { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0; overflow: hidden; padding: 8px; }
.pv-img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px; }
/* Actual size: the original pixels scroll inside the stage only; Back and category stay put. */
.pv-stage.pv-actual { overflow: auto; place-items: start; overscroll-behavior: contain; }
.pv-actual .pv-img { max-width: none; max-height: none; border-radius: 0; }
.pv-extra { padding: 8px 16px 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
body.pv-open { overflow: hidden; }
/* A newer release is active and this tab has unsaved typing: offer Reload instead of forcing it. */
.release-update { position: fixed; z-index: 1500; bottom: calc(env(safe-area-inset-bottom) + 24px); white-space: nowrap; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 4px 4px 4px 16px; border-radius: 26px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 6px 24px #0000002e; font-size: 14px; }
.release-update button { min-height: 44px; min-width: 44px; border-radius: 22px; padding: 0 16px; }
@media (max-width: 780px) { .release-update { bottom: calc(env(safe-area-inset-bottom) + 100px); } }
.pv button, .pv .small-btn, .pv .seg button, .pv .meal-slot .seg button { min-height: 44px; min-width: 44px; }
@media (max-height: 480px) { .pv-bar { min-height: 52px; padding-block: 4px; } .pv-extra { padding-block: 4px; } }
.photo-open-btn { display: block; padding: 0; border: 0; background: none; min-height: 0; cursor: zoom-in; }
.meal-slot { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.meal-slot .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.meal-slot .seg button { min-height: 36px; border: 0; border-radius: 0; padding: 0 12px; background: none; font-size: 13px; }
.meal-slot .seg button[aria-pressed=true] { background: var(--accent); color: #0d1214; }
@media (pointer: coarse), (max-width: 580px) { .meal-slot .seg button, .meal-slot .small-btn, .entry-more > summary { min-height: 44px; min-width: 44px; } }
.entry-more > summary { list-style: none; cursor: pointer; min-height: 36px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--line); border-radius: 18px; font-size: 13px; }
.entry-more > summary::-webkit-details-marker { display: none; }
.entry-more[open] > .row { margin-top: 8px; }
.info-details > summary { cursor: pointer; font-size: 13px; color: var(--muted, #8a9696); list-style: none; }
.info-details > summary::-webkit-details-marker { display: none; }
.own-goals{margin-top:18px}.own-goals>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700}.own-goals[open]>summary{margin-bottom:12px}
.journal-panel .limit-hint{display:block;margin:2px 0 0 auto;text-align:right;font-size:.78rem;color:var(--muted,#8a8f98)}
.journal-panel .limit-hint.over{color:var(--danger,#e5484d);font-weight:600}
.journal-panel textarea[aria-invalid="true"]{outline:2px solid var(--danger,#e5484d);outline-offset:1px}
.journal-panel .gratitude{flex-wrap:wrap}.journal-panel .gratitude>textarea{flex:1 1 0;min-width:0}.journal-panel .gratitude .limit-hint{flex-basis:100%}

/* Workout log (programme page → Log Gym A …): the approved exercise cards with set rows beside the plan. */
.ap-backrow { align-items: center; }
.ap-backrow .ap-print { font-size: 14px; }
.wk-page .wk-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.wk-page .wk-top h1 { margin: 6px 0 0; font-size: clamp(34px, 5vw, 52px); letter-spacing: -.05em; line-height: 1; }
.wk-when { display: flex; gap: 12px; align-items: center; }
.wk-count { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.wk-list { list-style: none; padding: 0; margin: 14px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.wk-card { padding: 18px; }
.wk-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.wk-card h2 { font-size: 22px; margin: 8px 0 6px; }
.wk-plan { display: inline-block; font-weight: 750; color: var(--muted); }
.wk-last { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.wk-last b { color: var(--ink, inherit); font-weight: 700; }
.wk-done { min-width: 48px; min-height: 48px; border-radius: 14px; font-size: 22px; font-weight: 800; border: 2px solid var(--line); background: transparent; color: var(--muted); }
.wk-done.on { background: var(--tone, var(--accent)); border-color: var(--tone, var(--accent)); color: var(--surface, #fff); }
.wk-done:disabled { opacity: 1; cursor: default; }
.wk-sets { display: grid; gap: 8px; margin-top: 12px; }
.wk-set { display: grid; grid-template-columns: 22px repeat(auto-fit, minmax(0, 1fr)); gap: 8px; align-items: end; }
.wk-setn { font-weight: 800; color: var(--tone, var(--accent)); text-align: center; padding-bottom: 12px; }
.wk-cell { display: grid; gap: 2px; font-size: 12px; color: var(--muted); }
.wk-cell input { min-height: 44px; font-size: 17px; text-align: center; width: 100%; font-variant-numeric: tabular-nums; }
.wk-setbtns { display: flex; gap: 8px; margin-top: 10px; }
.wk-session { margin-top: 18px; }
.wk-response { display: flex; gap: 8px; flex-wrap: wrap; }
.wk-resp { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }
.wk-resp i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.wk-resp.green i { background: var(--green, #2f9e6a); } .wk-resp.amber i { background: var(--amber); } .wk-resp.red i { background: var(--danger); }
.wk-resp[aria-pressed="true"] { outline: 2px solid var(--accent); }
.wk-actions { margin-top: 16px; }
.wk-history { margin: 18px 0 8px; }
.wk-rows { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.wk-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 14px; }
.wk-row .wk-date { color: var(--muted); font-variant-numeric: tabular-nums; }
.wk-rowact { display: flex; gap: 6px; }
@media (max-width: 560px) { .wk-row { grid-template-columns: 1fr auto; } .wk-row .wk-date { grid-column: 1 / -1; } }
.wk-trendgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 10px; }
.wk-trend { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; }
.wk-trendval { font-weight: 800; font-variant-numeric: tabular-nums; }
.wk-bars { grid-column: 1 / -1; display: flex; gap: 3px; align-items: flex-end; height: 36px; }
.wk-bars i { flex: 1; min-width: 4px; max-width: 18px; background: var(--accent); border-radius: 3px 3px 0 0; }

/* Printable workout sheets: white A4 pages on screen, and only the sheets when printed. */
.ps-toolbar { gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ps-toolbar .ap-period a { padding: 8px 12px; border-radius: 10px; text-decoration: none; color: inherit; }
.ps-toolbar .ap-period a.selected { background: var(--accent); color: var(--surface, #fff); }
.print-sheets { display: grid; gap: 18px; justify-items: center; }
.ps-sheet { width: 210mm; min-height: 297mm; box-sizing: border-box; padding: 12mm 13mm 10mm; background: #fff; color: #17201d; border-radius: 4px; box-shadow: 0 4px 24px #0004;
  font: 11pt/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; display: flex; flex-direction: column; gap: 4mm; color-scheme: light; }
@media (max-width: 860px) { .ps-sheet { zoom: .44; } }
.ps-head { display: grid; grid-template-columns: 20mm 1fr 52mm; gap: 5mm; align-items: center; border-bottom: .6mm solid #17201d; padding-bottom: 3mm; }
.ps-mark { width: 18mm; height: 18mm; border-radius: 5mm; background: #17201d; color: #fff; display: grid; place-items: center; font-size: 30pt; font-weight: 800; letter-spacing: -.04em; }
.ps-title small { font-size: 9pt; letter-spacing: .12em; text-transform: uppercase; color: #4b5a55; font-weight: 700; }
.ps-title h1 { margin: 0; font-size: 30pt; line-height: 1; letter-spacing: -.05em; color: #17201d; }
.ps-sub { font-size: 9.5pt; color: #4b5a55; margin-top: 1mm; }
.ps-date { display: flex; align-items: flex-end; gap: 2mm; font-size: 9pt; color: #4b5a55; }
.ps-line { flex: 1; border-bottom: .3mm solid #8a9692; min-height: 6mm; display: block; }
.ps-dosenote { font-size: 9.5pt; font-weight: 700; color: #4b5a55; }
.ps-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.4mm; }
.ps-card { display: grid; grid-template-columns: 11mm minmax(0, 1fr) auto; gap: 3mm; align-items: center; border: .3mm solid #c9d1ce; border-left: 1.6mm solid var(--tone); border-radius: 3mm; padding: 2.4mm 3mm; break-inside: avoid; page-break-inside: avoid; }
.ps-num { font-size: 16pt; font-weight: 800; color: var(--tone); letter-spacing: -.03em; }
.ps-name { display: flex; gap: 2.5mm; align-items: baseline; flex-wrap: wrap; }
.ps-name strong { font-size: 13.5pt; letter-spacing: -.02em; }
.ps-name small { font-size: 7.5pt; letter-spacing: .12em; color: #6b7773; font-weight: 700; }
.ps-dose { font-size: 10.5pt; font-weight: 700; color: #2c3a36; }
.ps-cue { font-size: 8.8pt; color: #4b5a55; }
.ps-cue.tech::before { content: "• "; }
.ps-link { font-size: 8.5pt; color: #2c3a36; font-family: ui-monospace, Menlo, monospace; }
.ps-sets { display: flex; gap: 2.5mm; align-items: center; }
.ps-set { display: grid; grid-template-columns: auto auto auto auto auto; align-items: center; gap: 1mm; border-left: .3mm dashed #c9d1ce; padding-left: 2mm; }
.ps-set small { font-size: 7.5pt; font-weight: 800; color: var(--tone); }
.ps-box { display: inline-block; width: 11mm; height: 8mm; border: .3mm solid #6b7773; border-radius: 1.2mm; background: #fff; }
.ps-box.wide { width: 22mm; }
.ps-box.sq { width: 7mm; height: 7mm; }
.ps-set em, .ps-tick em, .ps-field em { font-style: normal; font-size: 7.5pt; color: #6b7773; }
.ps-tick { display: grid; justify-items: center; gap: .5mm; margin-left: 1mm; }
.ps-after { display: flex; flex-wrap: wrap; gap: 3mm 7mm; align-items: center; border-top: .3mm solid #c9d1ce; padding-top: 3mm; }
.ps-field { display: flex; gap: 2mm; align-items: center; font-size: 9pt; font-weight: 700; color: #2c3a36; }
.ps-scale { display: inline-flex; gap: 1mm; }
.ps-scale i { font-style: normal; width: 5.4mm; height: 5.4mm; border: .3mm solid #8a9692; border-radius: 50%; display: grid; place-items: center; font-size: 7pt; font-weight: 600; }
.ps-dot { display: inline-flex; gap: 1.2mm; align-items: center; font-weight: 600; font-size: 8.5pt; }
.ps-dot i { width: 4.5mm; height: 4.5mm; border-radius: 50%; border: .5mm solid; }
.ps-dot.d0 i { border-color: #1f8a70; } .ps-dot.d1 i { border-color: #b7791f; } .ps-dot.d2 i { border-color: #c0504d; }
.ps-notes { flex: 1 1 100%; } .ps-notes .ps-line { min-width: 30mm; }
.ps-notes-src { font-size: 8.4pt; color: #2c3a36; border: .3mm solid #c9d1ce; border-radius: 2.5mm; padding: 2mm 3mm; break-inside: avoid; }
.ps-notes-src p { margin: .6mm 0; }
.ps-mobility { border: .3mm solid #c9d1ce; border-radius: 3mm; padding: 2.4mm 3mm; display: grid; gap: 1mm; break-inside: avoid; }
.ps-week { display: grid; grid-template-columns: 10mm repeat(7, 9mm); gap: 1mm; align-items: center; justify-items: center; font-size: 8pt; margin-top: 1mm; }
.ps-foot { margin-top: auto; display: flex; justify-content: space-between; gap: 6mm; font-size: 7.5pt; color: #6b7773; border-top: .3mm solid #c9d1ce; padding-top: 1.5mm; }
@page { size: A4 portrait; margin: 0; }
@media print {
  body:has(.print-sheets) :not(:has(.print-sheets)):not(.print-sheets):not(.print-sheets *) { display: none !important; }
  body:has(.print-sheets), body:has(.print-sheets) :has(.print-sheets) { display: block !important; position: static !important; overflow: visible !important; height: auto !important; min-height: 0 !important;
    max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: #fff !important; box-shadow: none !important; transform: none !important; }
  .print-sheets { display: block; }
  .ps-sheet { zoom: 1; width: 210mm; height: auto; min-height: 296mm; overflow: visible; margin: 0; border-radius: 0; box-shadow: none; break-after: page; page-break-after: always; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .ps-sheet:last-child { break-after: auto; page-break-after: auto; }
}
.wk-set + .wk-set .wk-cell > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wk-set + .wk-set .wk-setn { padding-bottom: 12px; }
.wk-count { white-space: nowrap; }
.ap-eyebrow .ap-review { margin-left: 10px; letter-spacing: 0; text-transform: none; vertical-align: middle; }
.ap-wcard .ap-period-note { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; cursor: help; }
/* Data for analysis (More → Data & backups). */
.ex-range input { min-height: 44px; }
.ex-picks { border: 0; padding: 0; margin: 10px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ex-picks legend { margin-bottom: 6px; }
.ex-pick { display: inline-flex; gap: 6px; align-items: center; min-height: 36px; cursor: pointer; }
.ex-preview:not(:empty) { margin-top: 14px; }
.ex-bigs { display: flex; flex-wrap: wrap; gap: 18px; }
.ex-big b { display: block; font-size: 28px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ex-big span { color: var(--muted); font-size: 13px; }
.ex-sources { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ex-sources li { display: grid; grid-template-columns: 120px 1fr 70px auto; gap: 10px; align-items: center; }
.ex-sources i { display: block; height: 10px; border-radius: 5px; background: var(--accent); }
.ex-sources b { text-align: right; font-variant-numeric: tabular-nums; }
.ex-sources small { color: var(--muted); }
@media (max-width: 560px) { .ex-sources li { grid-template-columns: 90px 1fr 56px; } .ex-sources small { display: none; } }
.ex-fold { margin-top: 10px; }
.ex-metrics { display: grid; gap: 10px; margin: 10px 0; max-height: 420px; overflow: auto; }
.ex-area { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.ex-metric { display: flex; gap: 8px; align-items: center; min-height: 32px; }
.ex-files code { font-size: 12px; }
.calendar-sync .calendar-refresh { min-width: 32px; min-height: 32px; padding: 2px 8px; } .calendar-checked { color: var(--muted); font-size: 12px; }
.journal-panel .gratitude { align-items: flex-start; } .journal-panel .gratitude-n { padding-top: 11px; }
.allday-gutter { font-size: 10px; color: var(--muted); display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; border-bottom: 1px solid var(--line); }
.allday-cell { border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 3px; display: grid; gap: 2px; align-content: start; min-height: 26px; }
.allday-chip { font-size: 12px; line-height: 1.3; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--blue, #9bbcf0) 22%, transparent); border-left: 3px solid var(--blue, #9bbcf0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Choose trackers: per-person import sources and imported-trend Hide/Restore (approved metric picker rows). */
.source-choice{display:flex;flex-wrap:wrap;gap:8px}
.source-choice button{border-radius:999px;padding:8px 14px;min-height:40px}
.source-choice button[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--panel));color:var(--accent)}
.trend-head{font-size:13px;font-weight:650;color:var(--muted);margin:8px 0 0}
.metric-hide-row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line)}
.metric-hide-row:last-child{border-bottom:0}
.metric-hide-row strong{display:block;font-weight:600}
.metric-hide-row small{color:var(--muted)}
.metric-hide-row .ap-link{min-height:44px;min-width:44px}
/* Liam's Gym and Weekly data bars. */
.liam-dots{display:inline-flex;gap:4px;align-items:center}
.liam-dots i{width:12px;height:12px;border-radius:50%;border:2px solid var(--accent);display:inline-block}
.liam-dots i.on{background:var(--accent)}
.liam-week strong{display:block}.liam-week small{color:var(--muted)}
.liam-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.liam-step{display:flex;align-items:center;gap:10px;min-height:44px}
.liam-step small{display:block;color:var(--muted);font-size:12px}
.liam-tick{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:13px;font-weight:700}
.liam-step.done .liam-tick{background:var(--accent);border-color:var(--accent);color:var(--accent-ink,#fff)}
.liam-step input[type=date]{max-width:170px}
.liam-sent{margin-top:6px}
.liam-parts{display:flex;gap:10px}.liam-parts span.on{color:var(--text,inherit);font-weight:600}
.trend-group>summary{cursor:pointer;padding:8px 0}
.metric-hide-row .ap-link{color:var(--muted)}
/* 8 Oct: routine steps are compact named ticks; the action row is exactly Done / Partly / Skipped. */
.routine-checklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin:6px 0 4px}
.routine-check{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);cursor:pointer;font-size:14px;line-height:1.35}
.routine-check input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--accent)}
.routine-check:has(input:checked){border-color:var(--accent);background:var(--tint)}
.routine-check small{margin-left:auto;color:var(--muted);white-space:nowrap}
.routine-content .routine-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.routine-note .routine-time-row{margin:10px 0}
/* Habit "Didn't meet it" when that is the recorded answer: amber attention, never the success fill. */
button.habit-miss[aria-pressed="true"]{background:var(--warn);color:var(--amber);border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber);font-weight:650}
.capture-item[data-training]>.row.wrap{flex-wrap:nowrap;gap:8px}
@media(max-width:600px){.routine-checklist{grid-template-columns:1fr}}
/* 8 Oct cadence slots: amber outline while due, filled when recorded; text marks each state (never colour alone). */
.cadence-slots{gap:6px}
.cadence-slot{min-height:36px;padding:6px 12px;border-radius:999px;border:1.5px solid var(--amber);background:color-mix(in srgb,var(--amber) 12%,var(--panel));font-size:13px;color:var(--ink)}
.cadence-slot.done{border-color:var(--accent);background:var(--tint)}
.cadence-slot.not_done{border-color:var(--line);background:var(--bg);color:var(--muted)}
.cadence-slot.optional{border-style:dashed;border-color:var(--line);background:transparent;color:var(--muted)}