:root {
  --bg: #f1f6f6; --surface: #ffffff; --surface2: #e6eff0; --text: #17313a; --muted: #5a727d;
  --primary: #16757a; --primary-ink: #ffffff; --border: #d3e0e3; --good: #3fae6a; --bad: #d9534f; --warn: #e0a43a;
  --danger: #b8403a; --radius: 16px; --radius-s: 10px;
  --fs-xs: .75rem; --fs-s: .85rem; --fs-m: .9rem;   /* 2.6.0 (#35): the small type steps */
  /* the tension scale (0 → 5 → 10) for the slider track; the same two ends as --good / --bad */
  --tension-mid: #e6c34a;
  --tension-gradient: linear-gradient(90deg, var(--good), var(--tension-mid) 50%, var(--bad));
  --nav-h: 64px; --top-h: 52px;
  color-scheme: light;
}
[data-theme=dark] {
  --bg: #0e181c; --surface: #16252b; --surface2: #1e3239; --text: #e4eff2; --muted: #93abb4;
  --primary: #4fbfc4; --primary-ink: #06282b; --border: #27393f; --danger: #e0766f; --shadow: none;
  color-scheme: dark;
}
body.night {
  --bg: #06080b; --surface: #0d1217; --surface2: #151c23; --text: #aeb9be; --muted: #6f7e86;
  --primary: #3b8f93; --primary-ink: #021416; --border: #1b242b;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-top: calc(var(--top-h) + env(safe-area-inset-top)); padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px);
  transition: background .4s;
}
body.is-locked #main, body.is-locked #nav { visibility: hidden; }
/* 1.8 (S5): nothing readable in the OS app switcher while the app is in the background */
body.is-hidden #main, body.is-hidden #banner, body.is-hidden #toast, body.is-hidden dialog { visibility: hidden; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; }
h2 { font-size: 1.1rem; } h3 { font-size: 1rem; }
a { color: var(--primary); text-decoration: none; }
p { margin: 0 0 .6rem; }
.muted { color: var(--muted); } .small { font-size: var(--fs-s); } .center { text-align: center; } .grow { flex: 1; min-width: 0; }
[hidden] { display: none !important; }

#top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: calc(var(--top-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0;
  display: flex; align-items: center; gap: 8px; background: var(--primary); color: var(--primary-ink);
}
#top h1 { font-size: 1.15rem; margin: 0; flex: 1; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root:not([data-icons=color]) .emo { filter: grayscale(1); }   /* 2.8.0: emoji in greyscale (js/emoji.js wraps them); 2.9.0: optional */
#find { color: inherit; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 4px; } #find svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#back { color: inherit; font-size: 1.9rem; line-height: 1; padding: 0 10px 4px 2px; }
.sos { background: #fff; color: #b3261e; font-weight: 800; letter-spacing: .04em; font-size: var(--fs-s); padding: 7px 14px; border-radius: 999px; min-height: 36px; display: inline-flex; align-items: center; }
body.night #top { background: #0d1a1d; }

#main { max-width: 640px; margin: 0 auto; padding: 12px 14px; outline: none; }
.view > * + * { margin-top: 12px; }
.view > .row, .view > .chips { margin-top: 12px; }

#nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  display: flex; background: var(--surface); border-top: 1px solid var(--border);
}
#nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); font-size: var(--fs-xs); min-height: 48px; }
#nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#nav a.on { color: var(--primary); font-weight: 650; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); display: block; color: inherit; }
.card.hero { padding: 16px; }
.card.calm { background: linear-gradient(160deg, var(--surface), var(--surface2)); }
.card.hint { background: var(--surface2); font-weight: 600; }
.card.affirm { text-align: center; font-size: 1.15rem; font-style: italic; background: linear-gradient(160deg, var(--surface), var(--surface2)); }
.card.affirm p { margin: 4px 0; }
.sec-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.sec-h h2 { margin: 0; }
.date { margin: 2px 2px 0; text-transform: capitalize; }

.btn { font: inherit; font-weight: 600; border: 1px solid transparent; border-radius: var(--radius-s); padding: 10px 16px; min-height: 44px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.btn.primary { background: var(--primary); color: var(--primary-ink); }
.btn.ghost { background: transparent; color: var(--primary); border-color: var(--border); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.big { min-height: 54px; font-size: 1.05rem; width: 100%; }
.btn.sm { min-height: 36px; padding: 4px 12px; font-size: var(--fs-m); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--primary) 25%, transparent); } }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.row.center { justify-content: center; } .row.end { justify-content: flex-end; }
.col { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.input, select.input, textarea.input {
  font: inherit; width: 100%; padding: 10px 12px; min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--bg); color: var(--text);
}
textarea.input { resize: vertical; }
.form label, label.block, .sheet label { display: block; font-size: var(--fs-s); color: var(--muted); margin-top: 10px; }
.form label > .input, .sheet label > .input, .form label > select { margin-top: 4px; color: var(--text); font-size: 1rem; }
.row + p, .row + .small, .row + label, .row + .bk-head, .row + .bk-parts { margin-top: 12px; }   /* gap between a button row and the text under it (2.1) */
fieldset { border: 1px solid var(--border); border-radius: var(--radius-s); margin: 12px 0 0; padding: 8px 12px 12px; }
legend { font-weight: 600; padding: 0 6px; }
input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--primary); flex: none; }
.check { display: flex !important; align-items: center; gap: 10px; color: var(--text) !important; font-size: 1rem !important; min-height: 44px; margin: 0 !important; }
.check span { flex: 1; } .check small { margin-left: auto; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip { font: inherit; font-size: var(--fs-m); padding: 8px 14px; min-height: 40px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; }
.chip.on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.chip.sm { min-height: 32px; padding: 4px 12px; font-size: var(--fs-s); }
.pill { font-size: var(--fs-xs); padding: 2px 10px; border-radius: 999px; background: var(--surface2); color: var(--muted); white-space: nowrap; }

/* tension slider */
.tslider { --tc: var(--primary); margin: 6px 0 4px; }
.tnum { display: flex; align-items: baseline; gap: 10px; }
.tnum b { font-size: 2.6rem; line-height: 1; color: var(--tc); min-width: 1.3em; }
.tnum span { font-size: 1.05rem; color: var(--muted); }
.tscale { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 36px; background: transparent; margin: 4px 0; }
input[type=range]::-webkit-slider-runnable-track { height: 12px; border-radius: 6px; background: var(--tension-gradient); }
input[type=range]::-moz-range-track { height: 12px; border-radius: 6px; background: var(--tension-gradient); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 4px solid var(--tc, var(--primary)); margin-top: -9px; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--tc, var(--primary)); }

/* suggestions + lists */
.sug h3 { margin: 0; } .sug-h { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.sug .why { font-size: var(--fs-s); color: var(--primary); margin-bottom: 0; }
details.help > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; min-height: 44px; padding-right: 28px; position: relative; }
details.help > summary::-webkit-details-marker { display: none; }
details.help > summary h2 { margin: 0; }
details.help > summary::after { content: ''; position: absolute; right: 4px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-75%) rotate(45deg); transition: transform .15s; }
details.help[open] > summary::after { transform: translateY(-25%) rotate(-135deg); }
details.help[open] > summary { margin-bottom: 10px; }
details.help #sugg .card.sug { box-shadow: none; border: 1px solid var(--border); }
#sugg > * + * { margin-top: 10px; } #sugg { margin-top: 10px; }
.item { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 12px 14px; }
.item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.item-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minifit { display: inline-flex; align-items: flex-end; gap: 2px; height: 20px; }
.minifit i { width: 4px; background: var(--primary); border-radius: 2px; display: block; }
.searchbar { position: sticky; top: calc(var(--top-h) + env(safe-area-inset-top)); z-index: 5; background: var(--bg); padding: 4px 0; }
.fab { position: fixed; right: 18px; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px); width: 56px; height: 56px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); font-size: 2rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); z-index: 10; }
.menu .item { margin-top: 10px; } .ico { font-size: 1.6rem; width: 36px; text-align: center; } .chev { color: var(--muted); font-size: 1.4rem; }
ol.steps { padding-left: 1.2rem; margin: .4rem 0 .8rem; } ol.steps li { margin: .35rem 0; }
ol.steps.big { list-style: none; padding: 0; } ol.steps.big li { margin: 0; border-bottom: 1px solid var(--border); } ol.steps.big li:last-child { border: 0; }
ul.plain { list-style: none; padding: 0; margin: 0; } ul.plain li { padding: 4px 0; }
.plain-link { display: block; padding: 6px 0; }
.fitbar { display: grid; grid-template-columns: 104px 1fr 18px; gap: 8px; align-items: center; font-size: var(--fs-s); margin: 6px 0; }
.fitbar .bar { height: 10px; background: var(--surface2); border-radius: 5px; overflow: hidden; } .fitbar .bar i { display: block; height: 100%; background: var(--primary); }
.fitrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0; font-size: var(--fs-s); }
.fitrow > span { width: 90px; flex: none; }
.seg { display: flex; flex: 1; border: 1px solid var(--border); border-radius: var(--radius-s); overflow: hidden; }
.seg button { flex: 1; font: inherit; min-height: 40px; border: 0; background: var(--bg); color: var(--text); border-right: 1px solid var(--border); cursor: pointer; }
.seg button:last-child { border: 0; } .seg button.on { background: var(--primary); color: var(--primary-ink); font-weight: 700; }

/* diary */
.datenav { display: flex; align-items: center; gap: 6px; }
.datenav .btn { width: 44px; padding: 0; font-size: 1.4rem; } .dn-mid { flex: 1; text-align: center; margin: 0 !important; color: var(--text) !important; font-size: 1rem !important; }
.dn-mid input { display: block; margin: 2px auto 0; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-s); text-align: center; }
.tl-b { display: flex; width: 100%; align-items: center; gap: 10px; background: none; border: 0; font: inherit; color: var(--text); padding: 4px 0; min-height: 38px; cursor: pointer; text-align: left; }
.dot { width: 14px; height: 14px; border-radius: 50%; flex: none; } .tl-v { color: var(--muted); } .tl-n { color: var(--muted); font-size: var(--fs-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
ul.plain.tl li { padding: 0; } ul.plain.tl li + li { border-top: 1px solid var(--border); }
.card.hero .tl, .tview .tl { margin: 0; }
.seg-sw { display: flex; gap: 6px; justify-content: flex-end; margin: 2px 0 4px; }
.t-sum { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: var(--muted); } .t-sum b { color: var(--text); } .t-sum .dot { width: 10px; height: 10px; }
/* 2.6.2: the entry row under a tension / mood card (slider or faces) and the view switch in the card header */
.quick { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); } .quick-l { margin: 0 0 2px; } .quick .moods { margin-bottom: 0; } .quick .tslider { margin-bottom: 0; }
.sec-h .seg-sw { margin: 0; flex: none; }
/* 2.6.2: a comment per Protokoll row */
.tr-line { display: flex; align-items: center; gap: 4px; } .tr-line .tr-row { flex: 1; min-width: 0; gap: 8px; } .tr-line .tr-in { grid-template-columns: 5.4rem 3.4rem; } .tr-line .tr-in.wide { grid-template-columns: 9.4rem; }
.tr-cb { flex: none; width: 30px; height: 34px; padding: 0; border-radius: var(--radius-s); border: 1px solid transparent; background: none; font-size: 1rem; cursor: pointer; opacity: .45; filter: grayscale(1); }
.tr-cb.on { opacity: 1; filter: none; border-color: var(--border); background: var(--surface2); }
.tr-c { margin: 0 0 8px; font-size: var(--fs-m); }
.ml .ml-e { font-size: 1.4rem; width: 1.8rem; text-align: center; flex: none; } .ml .tl-n { white-space: normal; }
.moods { display: flex; gap: 8px; justify-content: space-between; margin: 6px 0 10px; }
.mood { flex: 1; font-size: 1.7rem; min-height: 52px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; }
.mood.on { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.input.num { width: 84px; text-align: right; }
.goal { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); } .goal:last-child { border: 0; } .goal .check { flex: 1; } .ws { display: flex; align-items: center; justify-content: space-between; }
.contact { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); } .contact:last-child { border: 0; }
.chain { padding-left: 1.2rem; } .chain li { margin: .5rem 0; } .chain-edit { padding-left: 1.2rem; } .chain-edit li { display: flex; justify-content: space-between; gap: 6px; align-items: center; margin: 6px 0; }
.chain-edit .row { margin: 0; flex-wrap: nowrap; }

/* sleep */
.live .live-t { font-size: 1.1rem; } .live.asleep, .live.awake, .live.bed { background: linear-gradient(160deg, var(--surface), var(--surface2)); }
.wake-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; margin: 8px 0 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--border); } .wake-row label { margin: 0 !important; flex: 1 1 40%; } .wake-row .grow { flex: 1 1 60%; order: 2; } .wake-row .btn { order: 3; flex: none; }
.preview { margin-top: 14px; padding: 12px; border-radius: var(--radius-s); background: var(--surface2); } .err { color: var(--danger); margin: 0; font-weight: 600; } .hint-s { background: var(--surface2); padding: 8px 12px; border-radius: var(--radius-s); font-size: var(--fs-m); }
.stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; text-align: center; } .stats4 b { display: block; font-size: var(--fs-m); line-height: 1.25; } .stats4 small { color: var(--muted); font-size: var(--fs-xs); line-height: 1.2; display: block; }

/* charts, tables */
.chart { width: 100%; height: auto; display: block; } .chart .grid { stroke: var(--border); stroke-width: 1; } .chart .axis { fill: var(--muted); font-size: 9px; } .chart .axis.emo { font-size: 13px; }
.card .stats4 + .stats4 { margin-top: 12px; }
.chart .hit { fill: transparent; cursor: pointer; outline: none; }
.chart circle.hit.sel, .chart circle.hit:focus-visible { stroke: var(--text); stroke-width: 1.5; fill: color-mix(in srgb, var(--primary) 14%, transparent); }
.chart rect.hit.sel, .chart rect.hit:focus-visible { fill: color-mix(in srgb, var(--text) 9%, transparent); }
.pos { color: var(--good); font-weight: 700; } .neg { color: var(--bad); font-weight: 700; }

/* timer */
.tdisp { font-size: 4rem; font-weight: 300; text-align: center; font-variant-numeric: tabular-nums; margin: 8px 0; }
.tbar { height: 8px; background: var(--surface2); border-radius: 4px; overflow: hidden; margin-bottom: 8px; } .tbar i { display: block; height: 100%; background: var(--primary); width: 0; transition: width .25s linear; }
.orb { position: relative; width: min(70vw, 280px); aspect-ratio: 1; margin: 8px auto; display: flex; align-items: center; justify-content: center; }
.orb-in { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--primary) 60%, #fff), var(--primary)); opacity: .85; transform: scale(.55); transition: transform .12s linear; }
.orb .phase { position: relative; color: var(--primary-ink); font-weight: 700; font-size: 1.15rem; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.bcount { text-align: center; font-size: 1.4rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.phase-l { text-align: center; font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; } .phase-l.work { color: var(--good); } .phase-l.rest { color: var(--warn); }
@media (prefers-reduced-motion: reduce) { .orb-in { transition: none; } .btn.pulse { animation: none; } }

/* overlays */
dialog.sheet { border: 0; padding: 0; width: min(calc(100% - 24px), 560px); max-width: calc(100% - 24px); margin: auto; border-radius: 20px; background: var(--surface); color: var(--text); max-height: min(88vh, calc(100dvh - 24px)); overflow: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
dialog.sheet::backdrop { background: rgba(5, 15, 20, .55); }
.sheet-body { padding: 20px 18px; }
.confirm-msg { font-size: 1.05rem; }
#toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px); transform: translate(-50%, 20px); background: #1f3238; color: #fff; padding: 10px 16px; border-radius: var(--radius-s); opacity: 0; pointer-events: none; transition: .25s; z-index: 60; display: flex; gap: 12px; align-items: center; max-width: 92vw; }
#toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } #toast button { background: none; border: 0; color: #7fe0e4; font: inherit; font-weight: 700; }
#charttip { position: fixed; z-index: 60; max-width: min(300px, calc(100vw - 16px)); padding: 8px 10px; border-radius: var(--radius-s); background: var(--text); color: var(--bg); font-size: var(--fs-s); line-height: 1.35; white-space: pre-line; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); pointer-events: none; }
#banner { position: fixed; left: 8px; right: 8px; top: calc(var(--top-h) + env(safe-area-inset-top) + 6px); z-index: 30; background: var(--surface); border: 1px solid var(--primary); border-radius: 14px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); max-width: 624px; margin: 0 auto; }
#lock { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; align-items: center; justify-content: center; }
.lock-in { width: min(320px, 90vw); text-align: center; } .lock-in h1 { color: var(--primary); }
.dots { font-size: 1.6rem; letter-spacing: .3em; min-height: 2.2rem; margin: 6px 0 12px; }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; } .pad button { font: inherit; font-size: 1.4rem; min-height: 60px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; } .pad .ok { background: var(--primary); color: var(--primary-ink); font-size: 1rem; font-weight: 700; }

@media print {
  #top, #nav, #toast, #banner, .noprint, .fab { display: none !important; }
  body { padding: 0; background: #fff; color: #000; } .card { box-shadow: none; break-inside: avoid; }
  #charttip { display: none; }
}
.card h3 + .chart, .card h3 + .dstrip { margin-top: 4px; } .card .stats4 + h3, .card .chips + h3, .card .moodist + h3, .card .tbl + h3, .card .chart + h3, .card p + h3, .card .dstrip + h3 { margin-top: 18px; }

/* server / partner features */
.codebox { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-s); word-break: break-all; user-select: all; background: var(--surface2); border: 1px dashed var(--border); border-radius: var(--radius-s); padding: 12px; margin: 10px 0; }
.bigcode { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 2rem; letter-spacing: .12em; text-align: center; font-weight: 700; padding: 16px 0 4px; color: var(--primary); user-select: all; }
.warnbox { background: color-mix(in srgb, var(--warn) 18%, var(--surface)); border: 1px solid var(--warn); border-radius: var(--radius-s); padding: 10px 12px; margin: 8px 0; }
.badge { display: inline-block; min-width: 1.3em; padding: 0 6px; border-radius: 999px; background: var(--primary); color: var(--primary-ink); font-size: var(--fs-s); font-weight: 700; text-align: center; }
.pl { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); } .pl:last-child { border: 0; }
.msgs li { border-bottom: 1px solid var(--border); padding: 10px 0; } .msgs li:last-child { border: 0; } .msgs li.unread { border-left: 3px solid var(--primary); padding-left: 10px; }
.msg-h { display: flex; justify-content: space-between; gap: 8px; } .msgs p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
#cloud details { margin: 8px 0; } #cloud details ul { padding-left: 1.2em; margin: 6px 0; } #cloud h3 { margin: 18px 0 4px; font-size: 1rem; }

/* ---- selective backup (zip) ---- */
.bk-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 10px 0 2px; }
.bk-parts { display: grid; gap: 2px; margin: 4px 0 10px; } .bk-parts .check { margin: 0; min-height: 36px; }

/* ---- diary protocol rows: labels left, inputs right-aligned in fixed columns ---- */
.tr-row { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; color: var(--text) !important; font-size: 1rem !important; min-height: 48px; margin: 0 !important; }
.tr-l { flex: 1; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.tr-in { display: grid; grid-template-columns: 6rem 3.9rem; align-items: center; gap: 6px 8px; flex: none; }
.tr-in > .input, .tr-in > input[type=range] { width: 100%; min-width: 0; margin: 0; }
.tr-in .input.num { text-align: right; }
.tr-in > .tr-chk { grid-column: 1; justify-self: end; width: 26px; height: 26px; margin: 0; accent-color: var(--primary); }
.tr-in.wide { grid-template-columns: 10.4rem; }
.tr-u { display: block; font-size: var(--fs-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }

/* ---- editable chip lists ---- */
.le-chip { gap: 4px; padding-right: 6px; cursor: default; }
.le-x { font: inherit; border: 0; background: rgba(0,0,0,.18); color: inherit; border-radius: 50%; width: 24px; height: 24px; line-height: 1; cursor: pointer; margin-left: 4px; }
.le-add { margin-top: 12px; align-items: center; }

/* ---- calendar ---- */
.cal-nav small { display: block; }
.cal-wd, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-wd { text-align: center; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 4px; }
.cal-day { font: inherit; position: relative; aspect-ratio: 1 / 1.05; min-height: 44px; border-radius: var(--radius-s); border: 1px solid transparent; background: var(--bg); color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 2px; }
.cal-day.out { background: transparent; visibility: hidden; }
.cal-day.future { color: var(--muted); }
.cal-day.today { border-color: var(--primary); font-weight: 700; }
.cal-day.sel { background: var(--primary); color: var(--primary-ink); }
.cal-dots { display: flex; gap: 3px; justify-content: center; min-height: 7px; }
.cal-dots i, .cal-legend i, .cal-sum .sw { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.cal-day.sel .cal-dots i { box-shadow: 0 0 0 1.5px var(--primary-ink); }
.cd-d { background: var(--primary); } .cd-s { background: #7b68c9; } .cd-u { background: var(--good); } .cd-t { background: var(--warn); }
.cal-day.sel .cd-d { background: var(--primary-ink); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: var(--fs-xs); color: var(--muted); } .cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-sum li { display: flex; align-items: center; gap: 8px; padding: 3px 0; } .cal-sum .sw { flex: none; }
.cal-sum + .row, #cal-sum .row { margin-top: 12px; }

/* ---- accent colour picker ---- */
.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 12px; }
.swatch { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0; position: relative; display: inline-block; margin: 0 !important; }
.swatch.on { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--text); }
.swatch.custom { background: conic-gradient(#e55, #ec4, #5c5, #4cd, #55e, #c5c, #e55); overflow: hidden; --c: transparent; }
.swatch.custom.on { background: var(--c); }
.swatch.custom input { position: absolute; inset: -6px; width: 60px; height: 60px; opacity: 0; cursor: pointer; }

.fp-last { margin-top: 14px; } .fp-last summary { cursor: pointer; color: var(--muted); font-size: var(--fs-m); } .fp-last .btn { margin-top: 8px; }
.range-nav { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .range-nav .chip { min-width: 44px; justify-content: center; font-size: 1.2rem; } .range-nav .chip:disabled { opacity: .35; cursor: default; }
.range-l { flex: 1; text-align: center; line-height: 1.3; } .range-l small { display: block; font-size: var(--fs-xs); } .range-l b { font-size: var(--fs-m); }
@media print { .range-nav { display: none; } }

/* 2.0: running countdown in the header while its page is closed */
.tchip { margin-left: auto; margin-right: 8px; padding: 4px 10px; border-radius: 999px; background: var(--primary); color: var(--primary-ink); font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; font-size: var(--fs-m); }
.tchip[hidden] { display: none; }