/* ============================================================
   Arc90 v171 — four areas, single-column habits, Tasks,
   check-ins, tracker strip. Built on the approved tokens.
   ============================================================ */

:root,
[data-theme="light"] {
  --area-mind: #4a64c8;
  --area-health: #2e8754;
  --area-career: #b8691f;
  --area-money: #8c4f9e;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --hit: 48px;
}
[data-theme="dark"],
[data-theme="mono"] {
  --area-mind: #9fb1f5;
  --area-health: #8fd6a8;
  --area-career: #f0b46f;
  --area-money: #d3a3e3;
}

.area-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--area-c, var(--tx-3)); flex: none; }
.area-mind { --area-c: var(--area-mind); }
.area-health { --area-c: var(--area-health); }
.area-career { --area-c: var(--area-career); }
.area-money { --area-c: var(--area-money); }
.area-fill-mind { fill: var(--area-mind); } .area-fill-health { fill: var(--area-health); }
.area-fill-career { fill: var(--area-career); } .area-fill-money { fill: var(--area-money); }
.area-stroke-mind { stroke: var(--area-mind); } .area-stroke-health { stroke: var(--area-health); }
.area-stroke-career { stroke: var(--area-career); } .area-stroke-money { stroke: var(--area-money); }

/* ---------- Today header + banner ---------- */
.today-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.today-tasks-entry {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; min-width: var(--hit);
  padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  color: var(--tx); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; flex: none; margin-top: 4px;
}
.today-tasks-entry svg { width: 16px; height: 16px; }
.ck-banner {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--hit); margin: 0 0 12px;
  padding: 0 16px; border: 1px solid var(--accent-line); border-radius: 14px; background: var(--accent-soft);
  color: var(--tx); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
}
.ck-banner span:nth-child(2) { flex: 1; }
.ck-banner em { font-style: normal; color: var(--tx-3); font-size: 18px; }
.ck-banner-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
/* today's stack row: slot, count, one pill */
.stack-row { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; min-height: var(--hit); }
.stack-go { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: var(--hit); padding: 0 2px; border: 0; background: none; color: var(--tx); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.stack-go b { font-weight: 600; color: var(--tx-3); font-variant-numeric: tabular-nums; }
.stack-go em { font-style: normal; color: var(--tx-3); font-size: 18px; }

/* ---------- tracker strip ---------- */
.tr-strip {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 0 14px;
  padding: 2px 0 4px; scrollbar-width: none;
}
.tr-strip::-webkit-scrollbar { display: none; }
.tr-tile {
  flex: 0 0 74px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-height: 92px; padding: 10px 4px 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--card);
  color: var(--tx); font: inherit; cursor: pointer; transition: transform .15s var(--ease-out), border-color .2s;
}
.tr-tile:active { transform: scale(.96); }
.tr-tile.kept { border-color: color-mix(in srgb, var(--area) 45%, var(--line)); }
.tr-tile.running { border-color: var(--area); }
.tr-ring-wrap { position: relative; width: 48px; height: 48px; display: grid; place-items: center; }
.tr-ring { position: absolute; inset: 0; width: 48px; height: 48px; transform: rotate(-90deg); }
.tr-ring circle { fill: none; stroke-width: 3; }
.tr-ring-track { stroke: var(--card-2); }
.tr-ring-fill { stroke: var(--area); stroke-linecap: round; transition: stroke-dashoffset .25s var(--ease-out); }
.tr-value { position: relative; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: -.01em; color: var(--tx); display: flex; align-items: baseline; }
.tr-value small { font-size: 10px; font-weight: 600; color: var(--tx-3); margin-left: 1px; }
.tr-value .mood-face { color: var(--area); }
.tr-label { font-size: 11px; font-weight: 600; color: var(--tx-2); text-align: center; line-height: 1.15; }
.tr-running .tr-label, .tr-tile.running .tr-label { color: var(--area); }
.tr-tile.running .tr-ring-fill { animation: trPulse 1.6s ease-in-out infinite; }
@keyframes trPulse { 50% { opacity: .55; } }

.tr-sheet h2, .area-sheet h2 { margin: 0 0 14px; }
.tr-water-edit { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tr-water-edit b { font-size: 22px; }
.tr-settings .tr-set-row { display: flex; align-items: center; gap: 10px; min-height: var(--hit); border-bottom: 1px solid var(--line); }
.tr-settings .tr-set-row:last-of-type { border-bottom: 0; }
.tr-set-main { flex: 1; display: flex; align-items: center; gap: 10px; font-weight: 600; min-height: var(--hit); cursor: pointer; }
.tr-set-main input { width: 20px; height: 20px; accent-color: var(--accent); }
.tr-settings select { min-height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--tx); font: inherit; font-size: 13px; padding: 0 8px; }
.tr-set-move { display: flex; gap: 2px; }
.tr-set-move button { width: 36px; height: 40px; border: 0; background: none; color: var(--tx-2); font-size: 16px; cursor: pointer; border-radius: 8px; }
.tr-set-move button:disabled { opacity: .3; }

/* ---------- habit rows ---------- */
.hr-section { margin-top: 22px; }
.hr-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.hr-section-head h2 { margin: 0; font-size: 20px; }
.hr-group { margin-bottom: 12px; }
.hr-group-head {
  display: flex; align-items: center; justify-content: space-between; margin: 10px 0 2px; padding: 0 2px 6px;
  border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--tx-2);
}
.hr-group-head span { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-group-head span::before { content: ''; width: 3px; height: 12px; border-radius: 2px; background: var(--tone, var(--accent)); flex: none; }
.hr-group-head b { font-weight: 600; color: var(--tx-3); font-variant-numeric: tabular-nums; }
.hr-row { position: relative; overflow: hidden; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); touch-action: pan-y; }
.hr-main { transition: transform .2s var(--ease-out); }
.hr-row.swiping .hr-main { transition: none; }
.hr-main { position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; min-height: 56px; background: var(--bg); transition: opacity .2s; }
.hr-row.done .hr-main > *, .hr-row.skipped .hr-main > * { opacity: .5; }
.hr-row.done .hr-main > .hr-check { opacity: .7; }
.hr-row.done .hr-open b { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--tx) 35%, transparent); }
.hr-check { flex: none; width: var(--hit); height: var(--hit); margin-left: -8px; display: grid; place-items: center; border: 0; background: none; color: var(--tx-3); cursor: pointer; }
.hr-check svg { width: 26px; height: 26px; overflow: visible; }
.hr-check circle { fill: none; stroke: currentColor; stroke-width: 1.6; transition: fill .2s, stroke .2s; }
.hr-check path { fill: none; stroke: var(--on-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .2s var(--ease-out) .05s; }
.hr-check[aria-pressed="true"] circle { fill: var(--accent); stroke: var(--accent); }
.hr-check[aria-pressed="true"] path { stroke-dashoffset: 0; }
.hr-row.just-done .hr-check svg { animation: hrPop .25s var(--ease-out); }
@keyframes hrPop { 40% { transform: scale(1.18); } }
.hr-open { flex: 1; min-width: 0; min-height: var(--hit); display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 4px; border: 0; background: none; color: var(--tx); font: inherit; text-align: left; cursor: pointer; }
.hr-open b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-open small { font-size: 12px; color: var(--tx-3); }
.hr-dot { margin: 0 8px; }
button.hr-dot { width: 40px; height: 40px; margin: 0; border: 0; padding: 0; background: radial-gradient(circle, var(--area-c) 0 4px, transparent 4.5px); cursor: pointer; border-radius: 50%; }
.hr-dot.flagged { background: radial-gradient(circle, var(--area-c) 0 3px, transparent 3.5px 6.5px, var(--area-c) 7px 8.2px, transparent 8.7px); animation: hrFlag 2.4s ease-in-out infinite; }
@keyframes hrFlag { 50% { opacity: .45; } }
.hr-streak { min-width: 34px; text-align: right; font-size: 14px; font-weight: 700; color: var(--tx-2); font-variant-numeric: tabular-nums; }
.hr-streak small { font-size: 11px; font-weight: 600; color: var(--tx-3); margin-left: 1px; }
.hr-clean { min-height: 36px; padding: 0 2px 0 10px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.swipe-tray { position: absolute; inset: 0 0 0 auto; display: flex; z-index: 0; }
.swipe-tray button { width: 68px; border: 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--tx); background: var(--card-2); cursor: pointer; }
.swipe-tray button + button { background: var(--accent); color: var(--on-accent); }
.swipe-tray button:disabled { opacity: .4; }
.hr-empty { color: var(--tx-3); font-size: 14px; }
.hr-rest { margin-top: 10px; }
.hr-rest summary { min-height: var(--hit); display: flex; align-items: center; color: var(--tx-3); font-size: 13px; font-weight: 600; cursor: pointer; }
.hr-flag-banner {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; margin: 4px 0 14px; padding: 10px 16px;
  border: 1px solid var(--accent-line); border-radius: 14px; background: var(--accent-soft); color: var(--tx); font: inherit; text-align: left; cursor: pointer;
}
.hr-flag-banner span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.hr-flag-banner small { color: var(--tx-2); font-size: 12px; }
.hr-flag-banner em { font-style: normal; color: var(--tx-3); font-size: 18px; }
.hr-edit-hint { color: var(--tx-3); font-size: 13px; margin: 8px 2px; }
.hr-add-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; margin-top: 4px; padding: 0 4px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.hr-add-row span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1.6px dashed currentColor; font-size: 16px; }

.area-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.area-pills button, .tk-area-pick button, .ck-areas button {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--card); color: var(--tx); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.area-pills-lg button { min-height: var(--hit); flex: 1 1 calc(50% - 8px); justify-content: center; }
.area-pills button[aria-pressed="true"], .tk-area-pick button[aria-pressed="true"], .ck-areas button[aria-pressed="true"] { border-color: var(--area-c, var(--accent)); background: color-mix(in srgb, var(--area-c, var(--accent)) 12%, var(--card)); }
.area-pills button .area-dot, .tk-area-pick .area-dot, .ck-areas .area-dot { --area-c: inherit; }
.area-pills button:has(.area-mind), .tk-area-pick button:has(.area-mind), .ck-areas button:has(.area-mind) { --area-c: var(--area-mind); }
.area-pills button:has(.area-health), .tk-area-pick button:has(.area-health), .ck-areas button:has(.area-health) { --area-c: var(--area-health); }
.area-pills button:has(.area-career), .tk-area-pick button:has(.area-career), .ck-areas button:has(.area-career) { --area-c: var(--area-career); }
.area-pills button:has(.area-money), .tk-area-pick button:has(.area-money), .ck-areas button:has(.area-money) { --area-c: var(--area-money); }
.area-review-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.area-review-row b { display: block; margin-bottom: 8px; }
.area-sheet .btn { width: 100%; margin-top: 18px; }

/* ---------- tasks ---------- */
.tk-top { display: flex; align-items: center; gap: 8px; }
.tk-top h1 { flex: 1; margin: 0; }
.tk-back { width: var(--hit); height: var(--hit); margin-left: -12px; border: 0; background: none; color: var(--tx); font-size: 30px; line-height: 1; cursor: pointer; }
.tk-sort { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--tx-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tk-lists { display: flex; gap: 6px; overflow-x: auto; margin: 6px -16px 8px; padding: 0 16px 8px; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.tk-lists::-webkit-scrollbar { display: none; }
.tk-lists button { flex: none; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--tx-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.tk-lists button[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.tk-lists .tk-list-new { color: var(--tx-3); }
.tk-list, .tk-today, .tk-completed { position: relative; }
.tk-row { position: relative; display: flex; align-items: center; min-height: 56px; background: var(--bg); border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); touch-action: pan-y; transition: transform .2s var(--ease-out), opacity .2s; }
.tk-row.swiping { transition: none; }
.tk-row[data-swipe-dir="right"].swiping { box-shadow: inset 4px 0 0 var(--accent); }
.tk-row[data-swipe-dir="left"].swiping { box-shadow: inset -4px 0 0 #c4453c; }
.tk-row.dragging { z-index: 3; background: var(--card); box-shadow: 0 8px 24px rgba(0,0,0,.18); transition: none; }
.tk-sub { padding-left: 34px; }
.tk-check { flex: none; width: var(--hit); height: var(--hit); margin-left: -8px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; }
.tk-check span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1.6px solid var(--tx-3); color: transparent; transition: background .2s, border-color .2s; }
.tk-check span svg { width: 13px; height: 13px; }
.tk-check[aria-pressed="true"] span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tk-row.just-done .tk-check span { animation: hrPop .25s var(--ease-out); }
.tk-body { flex: 1; min-width: 0; min-height: var(--hit); display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 4px; border: 0; background: none; color: var(--tx); font: inherit; text-align: left; cursor: pointer; }
.tk-body b { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-row.done .tk-body b { text-decoration: line-through; color: var(--tx-3); }
.tk-details { font-size: 13px; color: var(--tx-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tk-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--tx-2); }
.tk-chip.late { color: #c4453c; border-color: color-mix(in srgb, #c4453c 40%, var(--line)); }
.tk-star { flex: none; width: 44px; height: var(--hit); border: 0; background: none; color: var(--tx-3); font-size: 18px; cursor: pointer; }
.tk-star.on { color: var(--accent); }
.tk-grip { flex: none; width: 32px; height: var(--hit); display: grid; place-items: center; color: var(--tx-3); letter-spacing: -2px; cursor: grab; touch-action: none; user-select: none; }
.tk-empty { padding: 48px 0; text-align: center; color: var(--tx-3); }
.tk-empty b { color: var(--tx); display: block; margin-bottom: 4px; }
.tk-completed { margin-top: 14px; }
.tk-completed summary { min-height: var(--hit); display: flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--tx-2); cursor: pointer; }
.tk-list-delete { display: block; margin: 28px auto 0; min-height: var(--hit); border: 0; background: none; color: var(--tx-3); font: inherit; font-size: 13px; cursor: pointer; }
.tk-fab {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 30;
  width: 56px; height: 56px; border-radius: 18px; border: 0; background: var(--accent); color: var(--on-accent);
  font-size: 28px; font-weight: 400; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.18); transition: transform .15s var(--ease-out);
}
.tk-fab:active { transform: scale(.94); }
.tk-today { margin-top: 18px; }
.tk-today-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.tk-today-head h2 { margin: 0; font-size: 20px; }
.tk-top3 { margin: 0 0 14px; padding: 10px 14px 4px; border: 1px solid var(--accent-line); border-radius: 16px; background: var(--card); }
.tk-top3 .tk-today-head h2 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.tk-top3 .tk-row { background: var(--card); }
.tk-top3 .tk-row:last-child { border-bottom: 0; }
.tk-today-empty { color: var(--tx-3); font-size: 14px; margin: 6px 0; }
.tk-quick { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; border: 0; background: none; color: var(--tx-3); font: inherit; font-size: 15px; cursor: pointer; padding: 0; }
.tk-quick span { width: 22px; text-align: center; font-size: 20px; color: var(--accent); }
.tk-more { margin-top: 4px; }
.tk-sheet { display: flex; flex-direction: column; gap: 12px; }
.tk-sheet-parent { margin: 0; font-size: 12px; color: var(--tx-3); }
.tk-title-input { padding-right: 52px !important; border: 0; background: none; color: var(--tx); font: inherit; font-size: 20px; font-weight: 600; padding: 4px 0; outline: none; }
.tk-details-input { border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--tx); font: inherit; font-size: 15px; padding: 4px 0 10px; resize: none; outline: none; }
.tk-sheet-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tk-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--tx-3); }
.tk-field input, .tk-field select { min-height: var(--hit); padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--tx); font: inherit; font-size: 15px; font-weight: 500; }
.tk-toggle { display: flex; align-items: center; justify-content: space-between; min-height: var(--hit); font-weight: 600; cursor: pointer; }
.tk-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.tk-toggle i { width: 44px; height: 26px; border-radius: 13px; background: var(--card-2); position: relative; transition: background .2s; }
.tk-toggle i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s var(--ease-out); }
.tk-toggle input:checked + i { background: var(--accent); }
.tk-toggle input:checked + i::after { transform: translateX(18px); }
.tk-toggle input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.tk-area-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-subs h3 { margin: 4px 0 4px; font-size: 13px; color: var(--tx-3); }
.tk-sub-line { display: flex; align-items: center; min-height: var(--hit); border-bottom: 1px solid var(--line); }
.tk-sub-line.done span:last-child { text-decoration: line-through; color: var(--tx-3); }
.tk-sub-add { display: flex; gap: 8px; margin-top: 8px; }
.tk-sub-add input { flex: 1; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--tx); font: inherit; }
.tk-sheet-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.tk-sheet-actions .btn { min-width: 132px; }
.tk-delete { min-height: var(--hit); border: 0; background: none; color: #c4453c; font: inherit; font-weight: 600; cursor: pointer; }

.arc-snackbar {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 200; transform: translate(-50%, 20px); opacity: 0;
  display: flex; align-items: center; gap: 18px; min-height: var(--hit); max-width: calc(100vw - 32px); padding: 0 8px 0 18px;
  border-radius: 12px; background: var(--tx); color: var(--bg); font-size: 14px; font-weight: 500; pointer-events: none;
  transition: transform .2s var(--ease-out), opacity .2s;
}
.arc-snackbar.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.arc-snackbar button { min-height: 40px; padding: 0 12px; border: 0; background: none; color: var(--accent-2, var(--accent)); font: inherit; font-weight: 700; cursor: pointer; }
[data-theme="light"] .arc-snackbar button { color: #b3dfbd; }
[data-theme="dark"] .arc-snackbar button { color: #28613c; }

/* ---------- check-ins ---------- */
.ck-sheet { display: flex; flex-direction: column; }
.ck-head { margin-bottom: 6px; }
.ck-head h2 { margin: 2px 0 0; }
.ck-kicker { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.ck-q { display: flex; align-items: baseline; justify-content: space-between; margin: 16px 0 8px; font-size: 14px; font-weight: 700; color: var(--tx); }
.ck-q small { font-size: 12px; font-weight: 500; color: var(--tx-3); }
.ck-chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ck-chips-2 { grid-template-columns: 1fr 1fr; }
.ck-rating { grid-template-columns: repeat(5, 1fr); }
.ck-areas { grid-template-columns: 1fr 1fr; }
.ck-chips button {
  min-height: var(--hit); border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--tx);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, transform .15s var(--ease-out);
}
.ck-chips button small { font-size: 11px; color: var(--tx-3); margin-left: 1px; }
.ck-chips button:active, .ck-icons button:active { transform: scale(.95); }
.ck-chips button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.ck-areas button { justify-content: center; border-radius: 12px; }
.ck-two { display: grid; grid-template-columns: 1fr; gap: 0; }
.ck-icons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ck-icons button { min-height: 52px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--tx-3); cursor: pointer; transition: color .15s, border-color .15s, background .15s, transform .15s var(--ease-out); }
.ck-icons button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.ck-task-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ck-task-chips button { min-height: 40px; max-width: 100%; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--tx); font: inherit; font-size: 14px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-task-chips button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.ck-quick-add input { min-height: 40px; width: 150px; padding: 0 12px; border: 1px dashed var(--line-2); border-radius: 999px; background: none; color: var(--tx); font: inherit; font-size: 14px; }
.ck-dump { display: flex; gap: 8px; }
.ck-dump input, .ck-line { flex: 1; min-height: var(--hit); padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--tx); font: inherit; font-size: 15px; width: 100%; box-sizing: border-box; }
.ck-sorted { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; animation: ckIn .2s var(--ease-out); }
.ck-sorted-item { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--card-2); font-size: 13px; }
.ck-sorted-item em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; }
@keyframes ckIn { from { opacity: 0; transform: translateY(4px); } }
.ck-habits { display: flex; flex-direction: column; }
.ck-habits button { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--tx); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.ck-habits small { margin-left: auto; color: var(--tx-3); font-size: 12px; }
.ck-habit-mark { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1.6px solid var(--tx-3); color: var(--on-accent); font-weight: 700; flex: none; transition: background .15s, border-color .15s; }
.ck-habit-mark svg { width: 13px; height: 13px; }
.ck-habits button[data-state="done"] .ck-habit-mark { background: var(--accent); border-color: var(--accent); }
.ck-habits button[data-state="skip"] .ck-habit-mark { background: var(--card-2); border-color: var(--line-2); color: var(--tx-2); }
.ck-allclear { color: var(--tx-2); margin: 10px 0 0; }
.ck-submit { margin-top: 22px; width: 100%; min-height: 52px; }
.ck-done { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; pointer-events: none; background: color-mix(in srgb, var(--bg) 40%, transparent); animation: ckFade .2s ease-out; }
.ck-done.out { opacity: 0; transition: opacity .25s; }
.ck-done-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 34px; border-radius: 22px; background: var(--card); box-shadow: 0 14px 40px rgba(0,0,0,.18); animation: ckPop .25s var(--ease-out); }
.ck-done svg { width: 56px; height: 56px; }
.ck-done circle { fill: var(--accent); }
.ck-done path { fill: none; stroke: var(--on-accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; animation: ckDraw .25s .12s var(--ease-out) forwards; }
@keyframes ckFade { from { opacity: 0; } }
@keyframes ckPop { from { transform: scale(.88); opacity: 0; } }
@keyframes ckDraw { to { stroke-dashoffset: 0; } }

/* ---------- radar ---------- */
.ar-view { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--card-2); margin-bottom: 4px; }
.ar-view button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--tx-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ar-view button[aria-pressed="true"] { background: var(--card); color: var(--tx); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ar-radar { display: block; width: 100%; max-width: 320px; margin: 0 auto; overflow: visible; }
.ar-grid { fill: none; stroke: var(--line); stroke-width: 1; }
.ar-prev { fill: none; stroke: var(--tx-3); stroke-width: 1.2; stroke-dasharray: 3 3; }
.ar-fill { fill: color-mix(in srgb, var(--accent) 18%, transparent); stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; transform-box: view-box; animation: arGrow .25s var(--ease-out) both; }
.ar-point { transform-box: view-box; animation: ckFade .25s .1s both; }
@keyframes arGrow { from { transform: scale(0); opacity: 0; } }
.ar-radar text { font-size: 12px; font-weight: 700; fill: var(--tx); }
.ar-pct { font-size: 11px; font-weight: 600; fill: var(--tx-3); }
.ar-axis { cursor: pointer; outline: none; }
.ar-axis:focus-visible text { fill: var(--accent); text-decoration: underline; }
.ar-mini text { font-size: 11px; }
.ar-rings { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.ar-ring-card { display: flex; align-items: center; gap: 10px; min-height: 76px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--tx); font: inherit; text-align: left; cursor: pointer; }
.ar-ring-card svg { width: 52px; height: 52px; flex: none; transform: rotate(-90deg); }
.ar-ring-card circle { fill: none; stroke-width: 5; }
.ar-ring-track { stroke: var(--card-2); }
.ar-ring-fill { stroke-linecap: round; animation: arRing .25s var(--ease-out) both; }
@keyframes arRing { from { stroke-dashoffset: var(--ring-c); } }
.ar-ring-card span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ar-ring-card small { font-size: 12px; color: var(--tx-3); }
.ar-axis-sheet h2 { display: flex; align-items: center; gap: 10px; }
.ar-axis-sheet h2 .area-dot { width: 10px; height: 10px; }
.ar-axis-sheet h3 { margin: 16px 0 4px; font-size: 13px; color: var(--tx-3); }
.ar-feed { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--tx); font: inherit; text-align: left; cursor: pointer; }
div.ar-feed { cursor: default; }
.ar-feed span { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ar-feed small { font-size: 12px; color: var(--tx-3); }
.ar-feed em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- onboarding: areas ---------- */
.ob-radar { display: flex; justify-content: center; margin: -4px 0 10px; }
.ob-radar .ar-radar { max-width: 220px; }
.ob-area-card { margin-bottom: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); border-left: 4px solid var(--area); }
.ob-area-card header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ob-area-card header .area-dot { width: 10px; height: 10px; }
.ob-area-card h3 { margin: 0; flex: 1; font-size: 18px; }
.ob-area-card header span { font-size: 12px; font-weight: 600; color: var(--tx-3); }
.ob-area-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-chip { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--tx); font: inherit; font-size: 14px; cursor: pointer; transition: background .15s, border-color .15s, transform .15s var(--ease-out); }
.ob-chip:active { transform: scale(.96); }
.ob-chip.on { border-color: var(--area); background: color-mix(in srgb, var(--area) 14%, var(--card)); font-weight: 600; }
.ob-area-add { display: flex; gap: 8px; margin-top: 10px; }
.ob-area-add input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--tx); font: inherit; font-size: 14px; }

/* ---------- journal ---------- */
.arc-workspace-tabs-2 { grid-template-columns: 1fr 1fr; }
.jr-feed { display: flex; flex-direction: column; gap: 10px; }
.jr-day { padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.jr-day header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.jr-day h3 { margin: 0; font-size: 15px; }
.jr-stats { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--tx-2); }
.jr-stats span { display: inline-flex; align-items: center; gap: 4px; }
.jr-stats b { color: var(--tx); }
.jr-stats svg { color: var(--tx-2); }
.jr-win { margin: 10px 0 0; font-size: 15px; }
.jr-win span { color: var(--accent); }
.jr-text { display: block; width: 100%; margin: 8px 0 0; padding: 0; border: 0; background: none; color: var(--tx-2); font: inherit; font-size: 14px; line-height: 1.5; text-align: left; white-space: pre-wrap; }
.jr-editable { cursor: text; min-height: 32px; }
.jr-input { width: 100%; box-sizing: border-box; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--tx); font: inherit; font-size: 15px; line-height: 1.5; resize: vertical; }
.jr-hint { color: var(--tx-3); font-size: 13px; text-align: center; margin: 8px 0; }

@media (prefers-reduced-motion: reduce) {
  .ar-fill, .ar-point, .ar-ring-fill, .ck-done, .ck-done-card, .ck-done path, .ck-sorted, .hr-row.just-done .hr-check svg, .tk-row.just-done .tk-check span, .tr-tile.running .tr-ring-fill, .hr-dot.flagged { animation: none !important; }
  .ck-done path { stroke-dashoffset: 0; }
}
[data-motion="reduced"] .ar-fill, [data-motion="reduced"] .ar-point, [data-motion="reduced"] .ar-ring-fill, [data-motion="reduced"] .hr-dot.flagged, [data-motion="reduced"] .tr-tile.running .tr-ring-fill { animation: none !important; }

/* ---------- settings ---------- */
.ck-settings .rem-time-row > span { flex: 1; min-width: 0; }
.ck-settings select, .ck-settings input[type="time"] { flex: none; width: auto; max-width: 128px; min-height: 44px; }
.swipe-tray { visibility: hidden; }
.hr-row.swiping .swipe-tray, .hr-row.revealed .swipe-tray { visibility: visible; }

/* ============================================================
   Today redesign: compact header, one progress card,
   quiet trackers, habits above the fold.
   ============================================================ */
.today-header { align-items: center; margin-bottom: 14px; }
.today-head-main { min-width: 0; }
.today-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--tx-3); letter-spacing: .01em; }
.today-eyebrow > * { margin: 0 !important; }
.today-eyebrow .today-moon { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; }
.today-eyebrow .today-moon::before { content: '·'; margin-right: 4px; }
.today-eyebrow .today-moon svg { width: 13px; height: 13px; }
.today-header h1 { margin: 2px 0 0; font-size: 24px !important; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }   /* a long name wraps rather than losing its end (v246) */
.today-tasks-entry { position: relative; width: var(--hit); min-width: var(--hit); height: var(--hit); padding: 0; justify-content: center; margin: 0; border-radius: 50%; }
.today-tasks-entry svg { width: 20px; height: 20px; }
.today-tasks-badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-sizing: border-box; }

.hero-card.hero-v2 { margin: 0 0 12px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.hero-v2 .hero { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; }
.hero-v2 .ring-wrap, .hero-v2 .ring-wrap svg { width: 76px; height: 76px; flex: 0 0 76px; }
.hero-v2 .ring-track { stroke: var(--card-2); }
.hero-v2 .ring-center .big-num { font-size: 19px !important; font-weight: 700; letter-spacing: -.02em; }
.hero-v2 .hero-stats { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 36px; }
.hero-v2 .eyebrow { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.hero-count { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--tx); }
.hero-v2 .hero-goal-line { font-size: 13px; color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-momentum { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--tx-3); }
.hero-momentum b { color: var(--tx); font-weight: 700; }
.hero-momentum .metric-context::before { content: '·'; margin-right: 6px; }
.hero-momentum .mom-delta { font-size: 12px; }
.hero-v2 .hero-share { position: absolute; top: -4px; right: -4px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--tx-3); font-size: 16px; }
.hero-v2 .today-meta { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.arc-progress { flex: 1; height: 4px; border-radius: 2px; background: var(--card-2); overflow: hidden; }
.arc-progress i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.hero-v2 .day-chip { padding: 0; font-size: 12px; font-weight: 600; color: var(--tx-2); white-space: nowrap; }
.hero-v2 .day-mode-trigger { min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--tx); display: inline-flex; align-items: center; gap: 4px; }

/* quieter tracker tiles */
.tr-strip { gap: 8px; margin-bottom: 12px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 24px; }
.tr-tile { flex-basis: 70px; min-height: 84px; padding: 10px 2px 8px; gap: 5px; border-color: transparent; background: var(--card); }
.tr-tile.kept, .tr-tile.running { border-color: transparent; }
.tr-ring-wrap, .tr-ring { width: 44px; height: 44px; }
.tr-tile.running .tr-label::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--area); vertical-align: 1px; animation: trPulse 1.4s ease-in-out infinite; }
.tr-tile.running .tr-label { color: var(--tx-2); }
[data-theme="light"] .tr-tile, [data-theme="light"] .hero-card.hero-v2 { box-shadow: 0 1px 2px rgba(20, 30, 25, .04); }

/* lighter top 3 */
.tk-top3 { margin-bottom: 12px; padding: 4px 4px 4px 14px; border: 0; border-left: 3px solid var(--accent); border-radius: 4px 16px 16px 4px; }
.tk-top3 .tk-today-head { margin: 8px 0 0; }
.tk-top3 .tk-today-head h2 { font-size: 11px; letter-spacing: .08em; }
.tk-top3 .tk-row { min-height: 50px; }

/* habits header */
.hr-section { margin-top: 18px; }
.hr-edit-link { min-height: var(--hit); padding: 0 4px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.hero-momentum { flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
.hero-momentum .metric-context { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hero-momentum .mom-delta { margin-left: auto; padding-left: 6px; font-weight: 700; }
.hero-v2 .hero-stats { padding-right: 0; }
.hero-v2 .hero-count { padding-right: 32px; }
.hero-momentum .metric-context { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================
   Tasks: quick add + motion
   ============================================================ */
.tk-add-wrap { margin: 4px 0 6px; }
.tk-add {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 6px 0 14px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--card); cursor: text;
  transition: border-color .2s, box-shadow .2s, transform .2s var(--ease-out);
}
.tk-add-wrap.focused .tk-add { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft); }
.tk-add-plus { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 17px; font-weight: 600; line-height: 1; flex: none; transition: transform .25s var(--ease-out); }
.tk-add-wrap.focused .tk-add-plus { transform: rotate(90deg); }
.tk-add-input { flex: 1; min-width: 0; height: 50px; border: 0; background: none; color: var(--tx); font: inherit; font-size: 16px; outline: none; }
.tk-add-input::placeholder { color: var(--tx-3); }
.tk-add-more { width: 40px; height: 40px; border: 0; border-radius: 12px; background: none; color: var(--tx-3); font-size: 18px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s; }
.tk-add-wrap.focused .tk-add-more { opacity: 1; pointer-events: auto; }
.tk-add-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; padding: 0 4px; transition: min-height .2s; }
.tk-add-wrap.focused .tk-add-chips:not(:empty) { min-height: 34px; padding-top: 8px; }
.tk-add-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 10px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--tx); font-size: 12.5px; }
.tk-add-chip i { font-style: normal; font-size: 12px; color: var(--accent); }
.tk-add-chip b { font-weight: 600; }
.tk-add-chip button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(127,127,127,.15); color: var(--tx-2); font-size: 13px; line-height: 1; cursor: pointer; }
.tk-add-chip:not(:has(button)) { padding-right: 10px; }
.tk-add-chip.pop { animation: chipPop .26s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes chipPop { from { opacity: 0; transform: scale(.6) translateY(4px); } }
.tk-add-hint { font-size: 12px; color: var(--tx-3); padding: 4px 2px; animation: ckFade .2s both; }
.tk-today .tk-add-wrap { margin-top: 8px; }
.tk-quick { display: none; }

/* check: circle fills, tick draws */
.tk-check svg { width: 24px; height: 24px; overflow: visible; }
.tk-check circle { fill: none; stroke: var(--tx-3); stroke-width: 1.6; transition: fill .2s, stroke .2s; }
.tk-check path { fill: none; stroke: var(--on-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .22s var(--ease-out) .06s; }
.tk-check[aria-pressed="true"] circle, .tk-row.completing .tk-check circle { fill: var(--accent); stroke: var(--accent); }
.tk-check[aria-pressed="true"] path, .tk-row.completing .tk-check path { stroke-dashoffset: 0; }
.tk-row.completing .tk-check svg { animation: hrPop .3s var(--ease-out); }
.tk-check:hover circle { stroke: var(--accent); }

/* title strike draws across, then the row folds away */
.tk-body b span { background: linear-gradient(currentColor, currentColor) no-repeat 0 58% / 0% 1.5px; transition: background-size .28s var(--ease-out), color .28s; }
.tk-row.completing .tk-body b span { background-size: 100% 1.5px; color: var(--tx-3); }
.tk-row.done .tk-body b { text-decoration: none; }
.tk-row.done .tk-body b span { background-size: 100% 1.5px; color: var(--tx-3); }
.tk-row.completing .tk-star, .tk-row.completing .tk-chips { opacity: .4; transition: opacity .2s; }
.tk-row { overflow: hidden; }

/* new rows drop in */
.tk-row.enter { animation: tkEnter .34s cubic-bezier(.2,.9,.25,1.05) both; }
@keyframes tkEnter { from { opacity: 0; transform: translateY(-12px) scale(.97); background: var(--accent-soft); } 60% { background: var(--accent-soft); } }

/* list switch slides */
.tk-pane.slide-left { animation: tkSlideL .24s var(--ease-out) both; }
.tk-pane.slide-right { animation: tkSlideR .24s var(--ease-out) both; }
@keyframes tkSlideL { from { opacity: 0; transform: translateX(28px); } }
@keyframes tkSlideR { from { opacity: 0; transform: translateX(-28px); } }
.tk-lists button { display: inline-flex; align-items: center; gap: 6px; transition: background .2s, color .2s; }
.tk-lists button small { font-size: 11px; font-weight: 700; opacity: .7; }
.tk-lists button small:empty { display: none; }
.tk-list-menu { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--tx-2); font-size: 20px; cursor: pointer; }

/* date sections */
.tk-group { display: flex; align-items: center; justify-content: space-between; margin: 16px 2px 2px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }
.tk-group:first-child { margin-top: 6px; }
.tk-group b { font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--card-2); color: var(--tx-2); letter-spacing: 0; }
.tk-group-overdue { color: #e0604f; }
.tk-group-today { color: var(--accent); }

/* sheet date chips */
.tk-date-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 2px; }
.tk-date-chips::-webkit-scrollbar { display: none; }
.tk-date-chips button { flex: none; min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--tx); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, transform .15s; }
.tk-date-chips button:active { transform: scale(.95); }
.tk-date-chips button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tk-list-sheet h2 { margin: 0 0 6px; }

.tk-empty-mark { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 24px; animation: chipPop .4s cubic-bezier(.2,1.4,.4,1) both; }
.tk-fab:active { transform: scale(.92) rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  .tk-row.enter, .tk-pane.slide-left, .tk-pane.slide-right, .tk-add-chip.pop, .tk-empty-mark { animation: none !important; }
}
[data-motion="reduced"] .tk-row.enter, [data-motion="reduced"] .tk-pane[class*="slide-"], [data-motion="reduced"] .tk-add-chip.pop { animation: none !important; }

/* ============================================================
   Tasks — minimal pass
   ============================================================ */
.tk-top { gap: 4px; }
.tk-sort, .tk-list-menu { width: 40px; height: 40px; min-width: 40px; padding: 0; border: 0 !important; border-radius: 50% !important; background: none !important; color: var(--tx-3) !important; font-size: 18px; box-shadow: none !important; }
.tk-lists { gap: 18px; margin: 2px 0 6px; padding: 0 0 0; border-bottom: 1px solid var(--line); }
.tk-lists button { position: relative; min-height: 40px; padding: 0 !important; border-radius: 0 !important; background: none !important; color: var(--tx-3) !important; font-weight: 500; box-shadow: none !important; }
.tk-lists button[aria-current="page"] { color: var(--tx) !important; font-weight: 600; }
.tk-lists button[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); animation: tkLine .22s var(--ease-out); }
@keyframes tkLine { from { transform: scaleX(.2); opacity: 0; } }
.tk-lists .tk-list-new { font-size: 18px; font-weight: 400; }

.tk-add, [data-skin="ember"] .tk-add { min-height: 52px; padding: 0 2px; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tk-add-wrap.focused .tk-add, [data-skin="ember"] .tk-add-wrap.focused .tk-add { border-bottom-color: var(--accent) !important; box-shadow: none !important; }
.tk-add-plus, [data-skin="ember"] .tk-add-plus { width: 24px; height: 24px; background: none !important; box-shadow: none !important; color: var(--accent); font-size: 22px; font-weight: 300; }
.tk-add-input { font-size: 15.5px; }
.tk-add-chips { gap: 12px; }
.tk-add-chip, [data-skin="ember"] .tk-add-chip { height: 24px; padding: 0 !important; border: 0 !important; background: none !important; color: var(--tx-2); font-size: 12.5px; }
.tk-add-chip b { font-weight: 500; }
.tk-add-chip i { color: var(--accent); }
.tk-add-chip button { width: 18px; height: 18px; background: none; color: var(--tx-3); font-size: 14px; }
.tk-add-hint { letter-spacing: .01em; }

.tk-row { border-bottom: 0; min-height: 52px; }
.tk-sub { padding-left: 32px; }
.tk-star { color: transparent; font-size: 16px; transition: color .2s; }
.tk-row:hover .tk-star, .tk-star.on { color: var(--accent); }
@media (hover: none) { .tk-star { color: color-mix(in srgb, var(--tx-3) 45%, transparent); } .tk-star.on { color: var(--accent); } }
.tk-grip { opacity: .25; }
.tk-chip, [data-skin="ember"] .tk-chip { padding: 0; border: 0; background: none; color: var(--tx-3); font-size: 12px; }
.tk-chip.late { color: #e0604f; }
.tk-group { margin-top: 18px; font-size: 11px; letter-spacing: .08em; }
.tk-group b, [data-skin="ember"] .tk-group b { padding: 0; background: none; color: var(--tx-3); font-weight: 500; }
.tk-completed summary { font-size: 13px; font-weight: 500; color: var(--tx-3); }
.tk-empty { padding: 56px 0; font-size: 14px; }
.tk-empty b { font-weight: 500; color: var(--tx-3); }
.tk-fab { display: none; }
[data-skin="ember"] .tk-lists button[aria-current="page"] { background: none !important; color: #fff !important; }
[data-skin="ember"] .tk-sort, [data-skin="ember"] .tk-list-menu { background: none !important; border: 0 !important; }
.tk-row, [data-skin="ember"] .tk-row { background: transparent; }
.tk-row.dragging { background: var(--card); }
.tk-add-input:focus, .tk-add-input:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; }

/* ---------------- v175 details ---------------- */

/* Habit sheet: today's status as three tiles, first thing in the sheet */
.hs-today { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hs-act {
  --hs: var(--accent);
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 98px; padding: 12px 12px 11px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--card); color: var(--tx); text-align: left;
  transition: background-color .2s ease, border-color .2s ease, transform .16s var(--spring, ease);
}
.hs-act:active { transform: scale(.97); }
.hs-done { --hs: var(--mint); }
.hs-skip { --hs: var(--amber); }
.hs-ico { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 8px; border-radius: 10px; color: var(--hs); background: color-mix(in srgb, var(--hs) 15%, transparent); transition: background-color .2s ease, color .2s ease; }
.hs-ico svg { width: 17px; height: 17px; }
.hs-act b { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.hs-act small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: 11.5px; line-height: 1.3; color: var(--tx-3); }
.hs-act.on { border-color: color-mix(in srgb, var(--hs) 60%, transparent); background: color-mix(in srgb, var(--hs) 12%, var(--card)); }
.hs-act.on .hs-ico { background: var(--hs); color: var(--on-accent, #111); }
.hs-clear { display: block; min-height: 40px; margin: 8px auto 0; padding: 0 14px; border-radius: 999px; color: var(--tx-3); font-size: 13px; font-weight: 600; }
.field .habit-purpose-path { margin: 7px 2px 0; }

/* Today trackers settings: one aligned grid instead of rows that shift with label length */
.tr-settings .tr-set-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px auto; gap: 6px; }
.tr-set-main { gap: 10px; font-size: 15px; }
.tr-set-main span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-settings select { width: 100%; }
.tr-set-main input {
  -webkit-appearance: none; appearance: none; flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; border-radius: 7px; border: 1.5px solid var(--line-2); background: transparent; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
.tr-set-main input::after {
  content: ''; width: 10px; height: 5px; margin-top: -2px;
  border: solid var(--on-accent, #fff); border-width: 0 0 2px 2px;
  transform: rotate(-45deg) scale(0); transition: transform .22s cubic-bezier(.3, 1.5, .5, 1);
}
.tr-set-main input:checked { background: var(--accent); border-color: var(--accent); }
.tr-set-main input:checked::after { transform: rotate(-45deg) scale(1); }
.tr-set-main input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tr-set-row:has(input:not(:checked)) .tr-set-main span { color: var(--tx-3); }

/* Reminder times: wide enough for "08:00 AM" plus the picker icon */
.rem-time-row input[type="time"] { width: 136px; max-width: 136px; flex: none; }

/* Week strip: the peek bubble for a tapped day */
.ember-day { position: relative; }
.ember-day-tip {
  position: absolute; left: 50%; bottom: calc(100% + 2px); z-index: 3;
  padding: 4px 9px; border-radius: 999px; background: var(--blue-grad); color: #fff;
  font-size: 11.5px; font-weight: 650; font-style: normal; white-space: nowrap; pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  opacity: 0; transform: translate(-50%, 6px) scale(.9); transform-origin: 50% 100%;
  transition: opacity .18s ease, transform .3s cubic-bezier(.3, 1.4, .5, 1);
}
.ember-day-tip::after { content: ''; position: absolute; left: 50%; top: 100%; width: 7px; height: 7px; margin: -4px 0 0 -3.5px; background: inherit; border-radius: 1.5px; transform: rotate(45deg); }
.ember-day.peek .ember-day-tip { opacity: 1; transform: translate(-50%, 0) scale(1); }
.ember-day:first-child .ember-day-tip { left: 0; transform: translate(0, 6px) scale(.9); transform-origin: 20% 100%; }
.ember-day:first-child.peek .ember-day-tip { transform: none; }
.ember-day:first-child .ember-day-tip::after { left: 23px; }
.ember-day:last-child .ember-day-tip { left: auto; right: 0; transform: translate(0, 6px) scale(.9); transform-origin: 80% 100%; }
.ember-day:last-child.peek .ember-day-tip { transform: none; }
.ember-day:last-child .ember-day-tip::after { left: auto; right: 19.5px; margin-right: 0; }

/* Ember: the hero button already offers the pending check-in, so the banner above it steps aside */
[data-skin="ember"] .screen:has(.ember-cta[data-id="morning"]) .ck-banner[data-id="morning"],
[data-skin="ember"] .screen:has(.ember-cta[data-id="night"]) .ck-banner[data-id="night"] { display: none; }

/* Fused Today list: task titles line up with habit names (habit rows carry a 4px gap) */
.hr-section .tk-row.tk-inline .tk-body { margin-left: 4px; }

/* v176 brand mark: Tangent Nine. Overrides the old arc-mark paint in approved-design.css.
   The knob is a hole in the background colour on the Light/Dark themes; Ember paints it white (ember.css). */
.arc90-logo-track,
.arc90-logo-arc { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.arc90-logo-track { stroke:var(--line-2); stroke-width:8.4; }
.arc90-logo-arc { stroke:currentColor; stroke-width:9; }
.arc90-logo-start { fill:currentColor; }
.arc90-logo-core { fill:var(--bg); }

/* v177: sharing is back on Ember Today, top-right of the gauge card */
.ember-gauge { position: relative; }
.ember-share { position: absolute; top: -4px; right: -4px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(175, 195, 255, .06); border: 1px solid var(--line); color: var(--tx-2); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.ember-share:active { background: rgba(175, 195, 255, .12); color: var(--tx); }
.ember-share svg { width: 17px; height: 17px; }

/* v179 share sheet: four story designs, a tall 9:16 preview and a privacy switch */
.sc-sheet { text-align: center; }
.sc-title { margin: 4px 0 14px; }
.sc-styles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.sc-style { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 66px; padding: 10px 4px 9px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--tx-2); font-size: 12.5px; font-weight: 600; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .16s ease; }
.sc-style svg { width: 22px; height: 22px; }
.sc-style:active { transform: scale(.95); }
.sc-style.on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--tx); }
.sc-style.on svg { color: var(--accent); }
.sc-details { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 14px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); text-align: left; cursor: pointer; }
.sc-details b { display: block; font-size: 14px; font-weight: 600; color: var(--tx); }
.sc-details small { display: block; margin-top: 2px; font-size: 12px; color: var(--tx-3); }
.sc-details input { flex: none; -webkit-appearance: none; appearance: none; position: relative; width: 46px; height: 28px; margin: 0; padding: 0; min-height: 0; border-radius: 999px; border: 0; background: var(--line-2); cursor: pointer; transition: background-color .2s ease; }
.sc-details input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .22s cubic-bezier(.3, 1.4, .5, 1); }
.sc-details input:checked { background: var(--accent); }
.sc-details input:checked::after { transform: translateX(18px); }
.sc-sheet .story-send { gap: 8px; }
.sc-sheet .story-send svg { width: 18px; height: 18px; }
/* ---------------- v180: Ascent + Purpose Blueprint, simplified ---------------- */
.pa3-stats, .pb3-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 2px 0 16px; }
.pa3-stats > div, .pb3-stats > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pa3-stats b, .pb3-stats b { color: var(--tx); font-size: 24px; font-weight: 300; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-skin="ember"] .pa3-stats b, [data-skin="ember"] .pb3-stats b { color: var(--accent-3); }
.pa3-stats b i, .pb3-stats b i { color: var(--tx-3); font-size: 14px; font-style: normal; }
.pa3-stats small, .pb3-stats small { color: var(--tx-3); font-size: 11.5px; }

/* the trail: six stages, base camp to summit, filled as far as you have walked */
.pa3-trail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.pa3-seg { position: relative; display: block; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; }
.pa3-seg i { position: absolute; left: 0; right: 0; top: 11px; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--tx) 10%, transparent); overflow: hidden; }
.pa3-seg i b { position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform-origin: left center; transform: scaleX(var(--walked)); }
[data-skin="ember"] .pa3-seg i b { background: linear-gradient(90deg, #ff5a14, #ff8a3d 60%, #ffc39a); }
.pa3-seg.is-now i { box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 40%, transparent); }
.pa3-seg.is-picked i { outline: 2px solid color-mix(in srgb, var(--tx) 70%, transparent); outline-offset: 3px; }
.pa3-seg:disabled { cursor: default; opacity: .55; }
.pa3-ends { display: flex; justify-content: space-between; margin: 4px 1px 14px; color: var(--tx-3); font-size: 11.5px; }

/* one stage card */
.pa3-card { padding: 14px; border-radius: 20px; border: 1px solid var(--line); background: color-mix(in srgb, var(--tx) 3%, transparent); }
.pa3-card.is-now { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%); }
.pa3-card.is-reached { border-color: rgba(245, 201, 122, .5); }
.pa3-head { display: flex; align-items: center; gap: 12px; }
.pa3-ring { position: relative; flex: none; width: 48px; height: 48px; }
.pa3-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pa3-ring circle { fill: none; stroke-width: 4; }
.pa3-ring-track { stroke: color-mix(in srgb, var(--tx) 10%, transparent); }
.pa3-ring-fill { stroke: var(--accent); stroke-linecap: round; }
.pa3-ring b, .pb3-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--tx); }
.pa3-ring b small, .pb3-ring b small { margin-left: 1px; font-size: 9px; font-weight: 600; color: var(--tx-3); }
.pa3-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pa3-titles small { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--accent); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pa3-titles small i { font-style: normal; }
.pa3-titles b { color: var(--tx); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.pa3-titles em { color: var(--tx-3); font-size: 12px; font-style: normal; }
.pa3-chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); font-style: normal; letter-spacing: .1em; }
.pa3-chip.is-gold { border-color: rgba(245, 201, 122, .55); color: #f5c97a; }
.pa3-beacon { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: pa3Beacon 2s ease-in-out infinite; }
@keyframes pa3Beacon { 50% { opacity: .4; box-shadow: 0 0 2px var(--accent); } }
.pa3-days { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 4px; margin: 14px 0 0; }
.pa3-day { position: relative; display: block; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.pa3-day i, .pa3-day.is-future { position: absolute; inset: 0; display: block; border-radius: 6px; background: color-mix(in srgb, var(--tx) 8%, transparent); overflow: hidden; }
.pa3-day.is-future { position: relative; background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tx) 12%, transparent); }
.pa3-day i::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--p) * 100%); background: var(--accent); }
.pa3-day.is-kept i::after { box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent); }
.pa3-day.is-rest i { background: color-mix(in srgb, var(--tx) 4%, transparent); }
.pa3-day.is-today i { box-shadow: inset 0 0 0 2px var(--tx); }
.pa3-day[aria-pressed="true"] i { box-shadow: inset 0 0 0 2px var(--accent-3); }
.pa3-meta { margin: 10px 0 0; color: var(--tx-2); font-size: 12.5px; }
.pa3 .pd-day-detail { margin-top: 12px; }

/* Blueprint: flat goal cards */
.pb3 { margin-top: 14px; }
.pb3-goals { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pb3-goal { min-width: 0; padding: 14px; border-radius: 20px; border: 1px solid var(--line); background: color-mix(in srgb, var(--tx) 3%, transparent); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--tone) 80%, transparent); }
.pb3-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pb3-ring { position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--tx); cursor: pointer; }
.pb3-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pb3-ring circle { fill: none; stroke-width: 4; }
.pb3-ring-track { stroke: color-mix(in srgb, var(--tx) 10%, transparent); }
.pb3-ring-fill { stroke: var(--tone); stroke-linecap: round; }
.pb3-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.pb3-titles small { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--tone); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pb3-titles small i { font-style: normal; padding: 0 7px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent-3, var(--accent)); }
.pb3-titles b { color: var(--tx); font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb3-titles em { color: var(--tx-3); font-size: 12px; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb3-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pb3-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 32px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--tx) 4%, transparent); color: var(--tx); font-size: 13px; cursor: pointer; }
.pb3-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb3-chip b { color: var(--tx-3); font-size: 12px; font-weight: 600; }
.pb3-chip.is-ghost b { color: var(--accent); }
.pb3-next { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); min-width: 0; }
.pb3-check { flex: none; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.pb3-check svg { width: 20px; height: 20px; fill: none; stroke: color-mix(in srgb, var(--tx) 45%, transparent); stroke-width: 1.6; }
.pb3-check svg path { opacity: 0; }
.pb3-task { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0; border: 0; background: none; color: var(--tx); font-size: 14px; text-align: left; cursor: pointer; }
.pb3-task span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb3-task small { flex: none; color: var(--tx-3); font-size: 12px; }
.pb3-task small.late { color: #ff7d6b; }
.pb3-more { flex: none; min-height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--tx-2); font-size: 12px; cursor: pointer; }
.pb3-empty { margin: 10px 0 0; color: var(--tx-3); font-size: 13px; }
.pb3-empty button { border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; padding: 0; }
.pb3-unlinked { margin-top: 14px; }
.pb3-unlinked > small { color: var(--tx-3); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pb3-unlinked .pb3-chips { margin-top: 8px; }

/* intros: one calm cascade, the rings and trail fill once */
.pa3.in-view:not(.no-intro) .pa3-stats > div, .pb3.in-view:not(.no-intro) .pb3-stats > div { animation: v180Up .5s cubic-bezier(.22, 1, .36, 1) both; }
.pa3.in-view:not(.no-intro) .pa3-stats > div:nth-child(2), .pb3.in-view:not(.no-intro) .pb3-stats > div:nth-child(2) { animation-delay: .05s; }
.pa3.in-view:not(.no-intro) .pa3-stats > div:nth-child(3), .pb3.in-view:not(.no-intro) .pb3-stats > div:nth-child(3) { animation-delay: .1s; }
.pa3.in-view:not(.no-intro) .pa3-seg i b { animation: v180Fill .7s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(.15s + var(--i) * 90ms); }
.pa3.in-view:not(.no-intro) .pa3-card, .pb3.in-view:not(.no-intro) .pb3-goal { animation: v180Up .55s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(.2s + var(--i, 0) * 70ms); }
.pa3.in-view:not(.no-intro) .pa3-ring-fill, .pb3.in-view:not(.no-intro) .pb3-ring-fill { animation: v180Ring 1.1s cubic-bezier(.22, 1, .36, 1) both; animation-delay: .35s; }
.pa3.in-view:not(.no-intro) .pa3-day i::after { animation: v180Bar .45s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(.45s + var(--k) * 30ms); }
@keyframes v180Up { from { opacity: 0; transform: translateY(10px); } }
@keyframes v180Fill { from { transform: scaleX(0); } }
@keyframes v180Ring { from { stroke-dashoffset: var(--c); } }
@keyframes v180Bar { from { height: 0; } }
@media (prefers-reduced-motion: reduce) { .pa3 *, .pb3 * { animation: none !important; } }
[data-motion="reduced"] .pa3 *, [data-motion="reduced"] .pb3 * { animation: none !important; }

/* v180: the Today tracker strip fits the width when it has five tiles or fewer */

/* v180 share sheet: swipeable previews, Story / Sticker format */
.sc-carousel { display: flex; gap: 14px; margin: 0 -18px 10px; padding: 6px 18px 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sc-carousel::-webkit-scrollbar { display: none; }
.sc-slide { flex: 0 0 min(60%, 228px); margin: 0; scroll-snap-align: center; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; border: 1px solid var(--line-2); transform: scale(.92); opacity: .55; transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .35s ease, box-shadow .35s ease; }
.sc-slide:first-child { margin-left: calc(50% - min(30%, 114px)); }
.sc-slide:last-child { margin-right: calc(50% - min(30%, 114px)); }
.sc-slide.on { transform: none; opacity: 1; box-shadow: 0 28px 60px -24px rgba(0, 0, 0, .85), 0 0 40px -10px color-mix(in srgb, var(--accent) 35%, transparent); }
.sc-slide img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.sc-carousel.is-sticker .sc-slide { aspect-ratio: 1000 / 1630; border: 0; border-radius: 26px; background:
  radial-gradient(circle at 30% 20%, rgba(255, 190, 140, .35), transparent 45%),
  linear-gradient(160deg, #6b8aa6, #2f3d4f 55%, #1b2230); }
.sc-carousel.is-sticker .sc-slide img { object-fit: contain; padding: 10px; }
.sc-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 14px; }
.sc-dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--line-2); transition: width .3s ease, background-color .3s ease; }
.sc-dots i.on { width: 18px; background: var(--accent); }
.sc-format { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--tx) 5%, transparent); }
.sc-format button { min-height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--tx-2); font-size: 13px; font-weight: 600; cursor: pointer; }
.sc-format button[aria-pressed="true"] { background: var(--blue-grad, #fff); color: #fff; box-shadow: 0 6px 18px rgba(47, 93, 242, .42); }
:root:not([data-skin="ember"]) .sc-format button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.sc-hint { margin: 8px auto 14px; max-width: 300px; color: var(--tx-3); font-size: 12.5px; line-height: 1.4; }
.sc-styles { margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .sc-slide, .sc-dots i { transition: none; } }

/* v182: calmer Today list. Finished items fold into one line per group. */
.hr-done-fold { margin: 2px 0 4px; }
.hr-done-fold > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px 0 5px; list-style: none; cursor: pointer; color: var(--tx-3); font-size: 13.5px; font-weight: 600; }
.hr-done-fold > summary::-webkit-details-marker { display: none; }
.hr-done-fold > summary i { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.hr-done-fold > summary i::after { content: ''; position: absolute; left: 7px; top: 6px; width: 7px; height: 4px; border: solid var(--accent); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.hr-done-fold > summary::after { content: ''; width: 7px; height: 7px; margin-left: auto; margin-right: 6px; border: solid var(--tx-3); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .25s ease; }
.hr-done-fold[open] > summary::after { transform: rotate(-135deg); }
.hr-done-fold[open] > .hr-row, .hr-done-fold[open] > .tk-row { animation: v182In .3s ease both; }
@keyframes v182In { from { opacity: 0; transform: translateY(-4px); } }
.hr-group.all-done .hr-group-head b { color: var(--accent); }
/* a group with everything done is one line (v245): its header is the fold, a tap shows what was kept */
.hr-done-all { margin: 0; }
.hr-done-all > summary { display: block; min-height: 0; padding: 0; list-style: none; cursor: pointer; }
.hr-done-all > summary::after { display: none; }
.hr-done-all > summary .hr-group-head { min-height: 44px; margin: 4px 0 0; padding: 12px 2px 8px; }
.hr-done-all > summary .hr-group-head b { display: inline-flex; align-items: center; gap: 12px; }
.hr-done-all > summary .hr-group-head b::after { content: ''; width: 6px; height: 6px; margin: -3px 4px 0 0; border: solid var(--tx-3); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .25s ease; }
.hr-done-all[open] > summary .hr-group-head b::after { margin-top: 3px; transform: rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .hr-done-all > summary .hr-group-head b::after { transition: none; } }
@media (prefers-reduced-motion: reduce) { .hr-done-fold > summary::after { transition: none; } .hr-done-fold[open] > * { animation: none; } }

/* ---------------- v183: Today as a grid of rings ---------------- */
.dg-count { margin-left: 10px; color: var(--tx-3); font-size: 15px; font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.dg-view { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--tx-2); cursor: pointer; }
.dg-view svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.dg-view svg circle { fill: currentColor; stroke: none; }
.dg-view:has(svg circle[r="3.2"]) svg circle { fill: none; stroke: currentColor; stroke-width: 1.8; }
.dg-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 16px; }
.dg-legend span { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; color: var(--tx-2); font-size: 12.5px; }
.dg-legend i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 8px color-mix(in srgb, var(--tone) 60%, transparent); }
.dg-legend b { color: var(--tx-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.dg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 6px; margin-bottom: 8px; }
.dg-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.dg-tile .dg-ring.hr-check { position: relative; width: 66px; height: 66px; margin: 0; padding: 0; border-radius: 50%; color: var(--tone); }
.dg-tile .dg-ring svg.dg-svg { position: absolute; inset: 0; width: 66px; height: 66px; transform: rotate(-90deg); overflow: visible; }
.dg-tile .dg-ring svg.dg-svg circle { fill: none; stroke-width: 4.5; }
.dg-tile .dg-ring .dg-track { stroke: color-mix(in srgb, var(--tx) 10%, transparent); fill: color-mix(in srgb, var(--tx) 3%, transparent) !important; }
.dg-tile .dg-ring .dg-fill { stroke: var(--tone); stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.22, 1, .36, 1); }
.dg-tile .dg-ring .dg-tick { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; transform: rotate(90deg); transform-origin: 32px 32px; transition: stroke-dashoffset .3s ease .15s; }
.dg-tile .dg-ring[aria-pressed="true"] circle.dg-fill { fill: none; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--tone) 70%, transparent)); }
.dg-tile .dg-ring[aria-pressed="true"] circle.dg-track { fill: color-mix(in srgb, var(--tone) 22%, transparent) !important; }
.dg-tile.done:not(.min) .dg-ring .dg-tick { stroke-dashoffset: 0; }
.dg-ico { position: relative; display: grid; place-items: center; width: 26px; height: 26px; color: var(--tx); transition: opacity .2s ease, transform .3s ease; }
.dg-ico svg { width: 24px; height: 24px; }
.dg-tile.done .dg-ico { opacity: 0; transform: scale(.6); }
.dg-streak { position: absolute; top: -3px; right: -4px; min-width: 22px; padding: 1px 6px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line-2); color: var(--tx-2); font-size: 10.5px; font-weight: 700; font-style: normal; font-variant-numeric: tabular-nums; }
.dg-name { display: block; max-width: 100%; padding: 0 2px; border: 0; background: none; color: var(--tx); font-size: 12px; font-weight: 500; line-height: 1.25; text-align: center; cursor: pointer; }
/* the two-line clamp sits on the inner span, so the button's taller tap area never shows a third line */
.dg-name > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dg-tile.done .dg-name { color: var(--tx-3); }
.dg-tile.skipped { opacity: .45; }
.dg-tile.just-done .dg-ring { animation: dgPop .5s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes dgPop { 40% { transform: scale(1.12); } }
.dg-tasks { margin-top: 18px; }
.dg-tasks-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 4px; padding: 0 2px 8px; border-bottom: 1px solid var(--line); color: var(--tx-2); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.dg-tasks-head b { color: var(--tx-3); font-weight: 600; }
.screen.anim .dg-tile { animation: v180Up .5s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(.1s + var(--k) * 35ms); }
@media (prefers-reduced-motion: reduce) { .dg-tile, .dg-tile .dg-ring, .dg-fill, .dg-tick { animation: none !important; transition: none !important; } }
/* the habit icon inside a ring is drawn with the text colour, not the check-mark styling of .hr-check */
.dg-tile .dg-ring .dg-ico svg * { fill: none; stroke: currentColor; stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
.dg-tile .dg-ring .dg-ico svg [fill="currentColor"] { fill: currentColor; stroke: none; }
:root .dg-tile .dg-ring[aria-pressed] circle.dg-fill { stroke: var(--tone); }
:root .dg-tile .dg-ring[aria-pressed] circle.dg-track { stroke: color-mix(in srgb, var(--tx) 10%, transparent); }
:root .dg-tile .dg-ring[aria-pressed="true"] circle.dg-track { fill: color-mix(in srgb, var(--tone) 24%, var(--card)) !important; }
/* v184: rings in the app accent; Ember paints them with the gauge gradient */
.dg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
[data-skin="ember"] .dg-tile .dg-ring circle.dg-fill { stroke: url(#dgEmber); }
[data-skin="ember"] .dg-tile .dg-ring[aria-pressed="true"] circle.dg-fill { filter: drop-shadow(0 0 8px rgba(255, 106, 26, .55)); }
[data-skin="ember"] .dg-tile .dg-ring[aria-pressed="true"] circle.dg-track { fill: rgba(255, 122, 47, .18) !important; }
.dg-legend span svg { flex: none; width: 15px; height: 15px; transform: rotate(-90deg); }
.dg-legend span svg circle { fill: none; stroke: color-mix(in srgb, var(--tx) 14%, transparent); stroke-width: 2.6; }
.dg-legend span svg circle.on { stroke: var(--accent); stroke-linecap: round; }

/* v186: account deletion (App Store 5.1.1(v)) */
.auth-delete { display: block; width: 100%; min-height: 46px; margin-top: 10px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--red, #ff6b6b) 35%, transparent); background: color-mix(in srgb, var(--red, #ff6b6b) 8%, transparent); color: var(--red, #ff6b6b); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.auth-delete.armed { background: var(--red, #ff6b6b); color: #fff; }
.auth-delete-note { margin: 6px 2px 0; color: var(--tx-3); font-size: 12px; line-height: 1.4; }

/* v186: Apple Health card (You, Vitals, Sleep) */
.you-anchor, #youHealth { scroll-margin-top: calc(64px + env(safe-area-inset-top, 0px)); }
.ah-card { display: flex; flex-direction: column; gap: 12px; }
.ah-head { display: flex; align-items: center; gap: 12px; }
.ah-logo { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 55, 95, .14); color: #ff5f7a; border: 1px solid rgba(255, 95, 122, .3); }
.ah-logo svg { width: 22px; height: 22px; }
.ah-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ah-title b { font-size: 15px; font-weight: 600; color: var(--tx); }
.ah-title small { font-size: 12px; color: var(--tx-3); }
.ah-dot { width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 4px rgba(61, 220, 132, .16); }
.ah-copy { margin: 0; font-size: 13px; line-height: 1.45; color: var(--tx-2); }
.ah-reads { display: flex; flex-wrap: wrap; gap: 6px; }
.ah-reads span { padding: 5px 10px; border-radius: 999px; font-size: 11.5px; color: var(--tx-2); background: color-mix(in srgb, var(--tx) 6%, transparent); border: 1px solid var(--line); }
.ah-actions { display: flex; align-items: center; gap: 10px; }
.ah-actions .ah-btn { flex: 1; }
.ah-btn { width: 100%; min-height: 48px; }
.ah-pause { min-height: 48px; padding: 0 18px; }
.ah-note { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--tx-3); }

/* v186: AI consent, native paywall note, line icons in Data & privacy */
.ai-consent { margin: 10px 0; padding: 14px; border-radius: 16px; border: 1px solid var(--accent-line); background: var(--accent-soft); }
[data-skin="ember"] .ai-consent { border-color: var(--blue-line); background: var(--blue-soft); }
.ai-consent b { display: block; font-size: 14px; color: var(--tx); }
.ai-consent p { margin: 6px 0 12px; font-size: 12.5px; line-height: 1.45; color: var(--tx-2); }
.ai-consent-actions { display: flex; gap: 10px; align-items: center; }
.ai-consent-actions .btn { flex: 1; min-height: 44px; }
.ai-consent-actions .mini-act { min-height: 44px; padding: 0 16px; }
.pay-native-note { margin-top: 8px; text-align: center; font-size: 12.5px; color: var(--tx-3); }
.prow .pe svg { width: 20px; height: 20px; display: block; color: var(--accent); }
[data-skin="ember"] .prow .pe svg { color: var(--blue-2); }

/* ============================================================
   Tasks screen (tkx). Calm glass cards, ring checks, group labels.
   The Today list keeps the older .tk-row rules above; everything
   below is scoped to .tkx / .tkx-sheet and uses theme tokens only.
   ============================================================ */
.tkx { --tkx-r: 22px; --tkx-ease: cubic-bezier(.22, 1, .36, 1); --tkx-red: var(--red, #f25c75); }
.tkx button, .tkx-sheet button { -webkit-tap-highlight-color: transparent; }
.tkx svg.tki, .tkx-sheet svg.tki { width: 20px; height: 20px; flex: none; }

/* header */
.tkx-top { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.tkx-title { flex: 1; min-width: 0; }
.tkx-title h1 { margin: 0; }
.tkx-count { margin: 4px 0 0; font-size: 13px; line-height: 1.2; color: var(--tx-3); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.tkx-ib { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--tx-2); transition: background .2s, color .2s, scale .15s; }
.tkx-ib:active { scale: .92; }
.tkx-back { width: 38px; height: 44px; margin-left: -10px; border-radius: 14px; color: var(--tx); }
.tkx-back svg.tki { width: 24px; height: 24px; }
.tkx-menu { position: relative; flex: none; }
.tkx-menu-btn { background: var(--m-surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.tkx-menu-btn[aria-expanded="true"] { background: var(--blue-soft, var(--accent-soft)); color: var(--blue-2, var(--accent)); box-shadow: inset 0 0 0 1px var(--blue-line, var(--accent-line)); }
.tkx-scrim { position: fixed; inset: 0; z-index: 40; border: 0; background: transparent; cursor: default; }
.tkx-pop { position: absolute; z-index: 41; right: 0; top: calc(100% + 8px); min-width: 188px; padding: 6px; border-radius: 20px; border: 1px solid var(--line-2); background: var(--p-menu, var(--card-2)); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 20px 48px rgba(0, 0, 0, .4); transform-origin: 90% 0; animation: tkxPop .22s var(--tkx-ease); }
.tkx-pop button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 12px; border: 0; border-radius: 14px; background: none; color: var(--tx); font-size: 15px; font-weight: 500; text-align: left; }
.tkx-pop button span { flex: 1; }
.tkx-pop button svg.tki { color: var(--tx-3); }
.tkx-pop button[aria-checked="true"] { color: var(--blue-2, var(--accent)); }
.tkx-pop button[aria-checked="true"] svg.tki:last-child, .tkx-pop button[aria-checked="true"] svg.tki:first-child { color: currentColor; }
.tkx-pop button:active { background: var(--m-surface-2); }
.tkx-pop hr { height: 1px; margin: 4px 8px; border: 0; background: var(--line); }
@keyframes tkxPop { from { opacity: 0; scale: .9; translate: 0 -6px; } }

/* list pills */
.tkx-pills { display: flex; gap: 8px; overflow-x: auto; margin: 0 -18px 2px; padding: 2px 18px 16px; scrollbar-width: none; scroll-padding: 0 18px; }
.tkx-pills::-webkit-scrollbar { display: none; }
.tkx-pill { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 17px; border: 1px solid var(--line); border-radius: 999px; background: var(--m-surface); color: var(--tx-2); font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .25s, color .25s, border-color .25s, box-shadow .25s, scale .15s; }
.tkx-pill:active { scale: .95; }
.tkx-pill[aria-current="page"] { border-color: transparent; background: var(--blue-grad, var(--accent)); color: var(--p-on-action, #fff); box-shadow: 0 8px 20px -8px var(--blue, var(--accent)); }
.tkx-pill.pop { animation: chipPop .32s cubic-bezier(.2,1.4,.4,1) both; }
.tkx-pill-new { width: 38px; padding: 0; color: var(--tx-3); }
.tkx-pill-new svg.tki { width: 18px; height: 18px; }

/* quick add */
.tkx-addw { margin: 0 0 6px; }
.tkx-add { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 9px 0 18px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--m-surface-2); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); cursor: text; transition: border-color .25s, box-shadow .25s; }
.tkx-addw.focused .tkx-add { border-color: var(--blue-line, var(--accent-line)); box-shadow: 0 0 0 4px var(--blue-soft, var(--accent-soft)), 0 12px 32px -14px var(--blue, var(--accent)); }
.tkx-add-plus { flex: none; display: grid; place-items: center; width: 22px; height: 22px; color: var(--blue-2, var(--accent)); transition: rotate .35s var(--tkx-ease); }
.tkx-addw.focused .tkx-add-plus { rotate: 90deg; }
.tkx-add-plus svg.tki { width: 22px; height: 22px; }
.tkx .tkx-add .tk-add-input { flex: 1; min-width: 0; width: auto; height: 52px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--tx); font-size: 16px; outline: none; }
.tkx .tkx-add .tk-add-input::placeholder { color: var(--tx-3); }
.tkx-add-more, .tkx-add-go { flex: none; display: grid; place-items: center; height: 38px; padding: 0; border: 0; border-radius: 50%; }
.tkx-add-more { width: 38px; background: none; color: var(--tx-3); opacity: 0; pointer-events: none; transition: opacity .2s; }
.tkx-addw.focused .tkx-add-more { opacity: 1; pointer-events: auto; }
.tkx-add-go { width: 0; margin-left: -10px; overflow: hidden; background: var(--blue-grad, var(--accent)); color: var(--p-on-action, #fff); opacity: 0; pointer-events: none; transition: width .25s var(--tkx-ease), margin .25s var(--tkx-ease), opacity .2s; }
.tkx-add-go svg.tki { width: 19px; height: 19px; stroke-width: 2.2; }
.tkx-addw.has-text .tkx-add-go { width: 38px; margin-left: 0; opacity: 1; pointer-events: auto; }
.tkx-chipbox { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 6px; }
.tkx-chipbox:not(:empty) { margin-top: 10px; }
.tkx-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 5px 0 11px; border: 1px solid var(--blue-line, var(--accent-line)); border-radius: 999px; background: var(--blue-soft, var(--accent-soft)); color: var(--tx); font-size: 13px; }
.tkx-chip:not(:has(button)) { padding-right: 12px; }
.tkx-chip > svg.tki { width: 14px; height: 14px; color: var(--blue-2, var(--accent)); }
.tkx-chip b { font-weight: 600; }
.tkx-chip button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--tx) 10%, transparent); color: var(--tx-2); }
.tkx-chip button svg.tki { width: 11px; height: 11px; stroke-width: 2.4; }
.tkx-chip.pop { animation: chipPop .26s cubic-bezier(.2, 1.4, .4, 1) both; }
.tkx .tki-star.on path, .tkx-chip .tki-star.on path { fill: currentColor; }

/* groups and cards */
.tkx-pane { margin-top: 6px; }
.tkx-pane.slide-left { animation: tkSlideL .26s var(--tkx-ease) both; }
.tkx-pane.slide-right { animation: tkSlideR .26s var(--tkx-ease) both; }
.tkx-gh { display: flex; align-items: baseline; gap: 8px; margin: 22px 6px 9px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.tkx-group:first-child .tkx-gh { margin-top: 12px; }
.tkx-gh b { font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.tkx-g-overdue .tkx-gh { color: var(--tkx-red); }
.tkx-g-today .tkx-gh span { color: var(--tx-2); }
.tkx-list { margin-top: 12px; }
.tkx-card { border: 1px solid var(--line); border-radius: var(--tkx-r); background: var(--m-surface); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
.tkx-item { position: relative; overflow: hidden; transition: transform .22s var(--tkx-ease); }
.tkx-item + .tkx-item { border-top: 1px solid var(--line); }
.tkx-item:first-child { border-radius: calc(var(--tkx-r) - 1px) calc(var(--tkx-r) - 1px) 0 0; }
.tkx-item:last-child { border-radius: 0 0 calc(var(--tkx-r) - 1px) calc(var(--tkx-r) - 1px); }
.tkx-item:only-child { border-radius: calc(var(--tkx-r) - 1px); }
.tkx-item.in { animation: tkxIn .46s var(--tkx-ease) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.tkx-item.new { animation: tkxNew .55s var(--tkx-ease); }
@keyframes tkxIn { from { opacity: 0; transform: translateY(12px); } }
@keyframes tkxNew { from { opacity: 0; transform: translateY(-10px) scale(.98); background: var(--accent-soft); } 55% { background: var(--accent-soft); } }
.tkx-item.dragging { z-index: 5; scale: 1.025; border-radius: 18px; background: var(--card); box-shadow: 0 16px 38px rgba(0, 0, 0, .38), 0 0 0 1px var(--line-2); transition: scale .18s var(--tkx-ease), box-shadow .18s; }
.tkx-item.dragging .tkx-grip { opacity: 1; color: var(--accent); }

/* row */
.tkx-row { position: relative; z-index: 1; display: flex; align-items: center; min-height: 62px; padding: 0 4px 0 14px; touch-action: pan-y; transition: transform .24s var(--tkx-ease), opacity .2s, background .25s; }
.tkx-row.swiping { transition: none; background: var(--card); }
.tkx-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 46px; padding: 9px 4px 9px 0; border: 0; background: none; color: var(--tx); text-align: left; }
.tkx-tw { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 16px; font-weight: 500; line-height: 1.28; letter-spacing: -.005em; overflow-wrap: anywhere; }
.tkx-t { background: linear-gradient(currentColor, currentColor) no-repeat 0 62% / 0% 1.5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .32s var(--tkx-ease), color .3s; }
.tkx-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 11px; font-size: 12.5px; line-height: 1.2; color: var(--tx-3); font-variant-numeric: tabular-nums; }
.tkx-when.late { color: var(--tkx-red); font-weight: 600; }
.tkx-mi { display: inline-flex; align-items: center; gap: 4px; }
.tkx-mi svg.tki { width: 13px; height: 13px; stroke-width: 2; }
.tkx-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--area-c, var(--tx-3)); }

/* the round check: track, ring that draws, fill that pops, tick */
.tkx .tkx-check.tk-check { flex: none; display: grid; place-items: center; width: 46px; height: 46px; margin: 0 0 0 -6px; padding: 0; border: 0; background: none; }
.tkx .tkx-check.tk-check svg { width: 26px; height: 26px; overflow: visible; }
.tkx .tkx-check.tk-check svg :is(circle, rect), .tkx .tkx-check.tk-check svg path { transition: none; }
.tkx .tkx-check.tk-check svg .rb { fill: none; stroke: color-mix(in srgb, var(--tx-3) 85%, transparent); stroke-width: 1.6; transition: stroke .2s; }
.tkx .tkx-check.tk-check:hover svg .rb { stroke: var(--accent); }
.tkx .tkx-check.tk-check svg .rr { fill: none; stroke: var(--accent); stroke-width: 2.3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transform-box: fill-box; }
.tkx .tkx-check.tk-check svg .rf { fill: var(--accent); stroke: none; transform: scale(0); transform-origin: 50% 50%; transform-box: fill-box; }
.tkx .tkx-check.tk-check svg path, .tkx-sheet .tkx-check.tk-check svg path { fill: none; stroke: var(--on-accent); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; }
.tkx .tkx-check.tk-check[aria-pressed="true"] svg .rb { stroke: var(--accent); }
.tkx .tkx-check.tk-check[aria-pressed="true"] svg .rf { transform: scale(1); }
.tkx .tkx-check.tk-check[aria-pressed="true"] svg path { stroke-dashoffset: 0; }
.tkx-item.completing .tkx-check svg .rr { animation: tkxRing .28s var(--tkx-ease) both; }
.tkx-item.completing .tkx-check svg .rf { animation: tkxFill .3s cubic-bezier(.3, 1.4, .5, 1) .2s both; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 65%, transparent)); }
.tkx-item.completing .tkx-check svg path { animation: tkxTick .22s var(--tkx-ease) .3s both; }
.tkx-item.completing .tkx-check svg { animation: tkxBump .34s var(--tkx-ease) .3s; }
.tkx-item.completing .tkx-t { background-size: 100% 1.5px; color: var(--tx-3); }
.tkx-item.completing .tkx-row { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.tkx-item.completing .tkx-star, .tkx-item.completing .tkx-meta { opacity: .35; transition: opacity .25s; }
.tkx-item.leaving .tkx-row { transform: translateX(28px); opacity: 0; transition: transform .22s cubic-bezier(.4, 0, 1, 1), opacity .2s; }
@keyframes tkxRing { from { stroke-dashoffset: 1; opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes tkxFill { from { transform: scale(0); } 60% { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes tkxTick { to { stroke-dashoffset: 0; } }
@keyframes tkxBump { 45% { scale: 1.22; } }

/* star and grip */
.tkx .tkx-star.tk-star { flex: none; display: grid; place-items: center; width: 42px; height: 46px; padding: 0; border: 0; background: none; color: color-mix(in srgb, var(--tx-3) 60%, transparent); font-size: 0; transition: color .2s, filter .3s; }
.tkx .tkx-star.tk-star svg { width: 21px; height: 21px; }
.tkx .tkx-star.tk-star svg path { fill: transparent; transition: fill .2s; }
.tkx .tkx-star.tk-star.on { color: var(--accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)); }
.tkx .tkx-star.tk-star.on svg path { fill: currentColor; }
.tkx-grip { flex: none; display: grid; place-items: center; width: 34px; height: 46px; color: var(--tx-3); opacity: .5; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: opacity .2s, color .2s; }
.tkx-grip svg.tki { width: 18px; height: 18px; }

/* swipe backdrop: complete on the left, delete on the right */
.tkx-sw { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; opacity: 0; transition: opacity .15s; }
.tkx-sw svg.tki { width: 22px; height: 22px; stroke-width: 2.2; }
.tkx-sw-r { left: 0; right: 40%; padding-left: 22px; background: var(--accent); color: var(--on-accent); }
.tkx-sw-l { right: 0; left: 40%; justify-content: flex-end; padding-right: 22px; background: var(--tkx-red); color: #fff; }
.tkx-item:has(.tkx-row.swiping[data-swipe-dir="right"]) .tkx-sw-r, .tkx-item:has(.tkx-row.swiping[data-swipe-dir="left"]) .tkx-sw-l { opacity: 1; }

/* completed */
.tkx-done { margin-top: 22px; }
.tkx-done > summary { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--m-surface); color: var(--tx-2); font-size: 14px; font-weight: 600; list-style: none; cursor: pointer; }
.tkx-done > summary::-webkit-details-marker { display: none; }
.tkx-done > summary svg.tki { width: 18px; height: 18px; color: var(--tx-3); transition: rotate .3s var(--tkx-ease); }
.tkx-done[open] > summary svg.tki { rotate: 180deg; }
.tkx-done[open] > .tkx-card { margin-top: 8px; animation: tkxIn .34s var(--tkx-ease); }
.tkx-item.done .tkx-row { opacity: .6; }
.tkx-item.done .tkx-t { background-size: 100% 1.5px; color: var(--tx-3); }

/* empty */
.tkx-empty { padding: 44px 0 24px; text-align: center; animation: tkxIn .5s var(--tkx-ease) .1s backwards; }
.tkx-empty p { margin: 0; font-size: 15px; color: var(--tx-3); }
.tkx-clear { display: grid; place-items: center; color: var(--accent); opacity: .55; }
.tkx-clear svg.tki { width: 36px; height: 36px; stroke-width: 1.6; }

/* sheet */
.tkx-sheet { display: flex; flex-direction: column; gap: 14px; }
.tkx-sheet h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--tx-3); }
.tkx-sheet-parent { margin: 0; padding-right: 48px; font-size: 12.5px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tkx-sheet .tkx-sheet-title { width: 100%; padding: 6px 48px 6px 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--tx); font-size: 22px; font-weight: 600; letter-spacing: -.01em; outline: none; }
.tkx-sheet .tkx-sheet-notes { width: 100%; min-height: 44px; padding: 2px 0 10px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; color: var(--tx); font-size: 16px; resize: none; outline: none; }
.tkx-dchips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -22px; padding: 2px 22px; scrollbar-width: none; }
.tkx-dchips::-webkit-scrollbar { display: none; }
.tkx-dchips button { flex: none; height: 38px; padding: 0 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--m-surface); color: var(--tx); font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .2s, color .2s, scale .15s; }
.tkx-dchips button:active { scale: .95; }
.tkx-dchips button[aria-pressed="true"] { border-color: transparent; background: var(--blue-grad, var(--accent)); color: var(--p-on-action, #fff); }
.tkx-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tkx-f { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; height: 50px; padding: 0 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--m-surface); color: var(--tx-2); }
.tkx-f:focus-within { border-color: var(--blue-line, var(--accent-line)); }
.tkx-f svg.tki { width: 18px; height: 18px; }
.tkx-sheet .tkx-f input, .tkx-sheet .tkx-f select { flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--tx); font-size: 15px; font-weight: 500; text-overflow: ellipsis; -webkit-appearance: none; appearance: none; outline: none; }
.tkx-sheet .tkx-f select:disabled { opacity: .5; }
.tkx-f.is-empty input { color: transparent; }
.tkx-f-ph { position: absolute; inset: 0 14px 0 42px; display: none; align-items: center; color: var(--tx-3); font-size: 15px; pointer-events: none; }
.tkx-f.is-empty .tkx-f-ph { display: flex; }
.tkx-f input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
:root[data-theme="dark"] .tkx-sheet input, :root[data-theme="dark"] .tkx-sheet select { color-scheme: dark; }
.tkx-opts { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tkx-areas { display: flex; gap: 10px; }
.tkx-areas button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1.5px solid transparent; border-radius: 50%; background: var(--m-surface-2); transition: border-color .2s, background .2s, scale .15s; }
.tkx-areas button:active { scale: .92; }
.tkx-areas button i { width: 13px; height: 13px; border-radius: 50%; background: var(--area-c, var(--tx-3)); }
.tkx-areas button[aria-pressed="true"] { border-color: var(--area-c, var(--accent)); background: color-mix(in srgb, var(--area-c, var(--accent)) 16%, transparent); }
.tkx-bell { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--m-surface); color: var(--tx-3); transition: color .2s, background .2s, border-color .2s; }
.tkx-bell input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.tkx-bell:has(input:checked) { border-color: var(--blue-line, var(--accent-line)); background: var(--blue-soft, var(--accent-soft)); color: var(--blue-2, var(--accent)); }
.tkx-bell:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tkx-subs { display: flex; flex-direction: column; padding-top: 2px; }
.tkx-sub { display: flex; align-items: center; gap: 2px; min-height: 48px; border-bottom: 1px solid var(--line); font-size: 15px; }
.tkx-sub span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tkx-sub.done span { color: var(--tx-3); text-decoration: line-through; }
.tkx-sheet .tkx-check.tk-check { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 0 0 -8px; padding: 0; border: 0; background: none; }
.tkx-sheet .tkx-check.tk-check svg { width: 24px; height: 24px; overflow: visible; }
.tkx-sheet .tkx-check.tk-check svg :is(circle, rect) { transition: none; }
.tkx-sheet .tkx-check.tk-check svg .rb { fill: none; stroke: color-mix(in srgb, var(--tx-3) 85%, transparent); stroke-width: 1.6; }
.tkx-sheet .tkx-check.tk-check svg .rr { display: none; }
.tkx-sheet .tkx-check.tk-check svg .rf { fill: var(--accent); stroke: none; transform: scale(0); transform-origin: 50% 50%; transform-box: fill-box; transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.tkx-sheet .tkx-check.tk-check[aria-pressed="true"] svg .rb { stroke: var(--accent); }
.tkx-sheet .tkx-check.tk-check[aria-pressed="true"] svg .rf { transform: scale(1); }
.tkx-sheet .tkx-check.tk-check[aria-pressed="true"] svg path { stroke-dashoffset: 0; transition: stroke-dashoffset .22s var(--tkx-ease) .06s; }
.tkx-sub-x { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--tx-3); }
.tkx-sub-x svg.tki { width: 15px; height: 15px; }
.tkx-sub-add { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.tkx-sheet .tkx-sub-add input { flex: 1; min-width: 0; width: auto; height: 46px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--m-surface); box-shadow: none; color: var(--tx); font-size: 16px; outline: none; }
.tkx-sub-add .tkx-ib { width: 46px; height: 46px; background: var(--m-surface-2); color: var(--blue-2, var(--accent)); box-shadow: inset 0 0 0 1px var(--line); }
.tkx-foot { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.tkx-grow { flex: 1; }
.tkx-foot .tkx-ib { width: 46px; height: 46px; background: var(--m-surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.tkx-foot .tkx-ib svg.tki { width: 21px; height: 21px; }
.tkx-ib-danger { color: var(--tkx-red); }
.tkx-foot .tkx-ib.armed { width: auto; gap: 8px; padding: 0 16px; border-radius: 999px; background: color-mix(in srgb, var(--tkx-red) 14%, transparent); font-size: 14px; font-weight: 600; }
.tkx-foot .btn { min-width: 120px; }

/* motion off */
@media (prefers-reduced-motion: reduce) {
  .tkx *, .tkx *::before, .tkx-sheet * { animation: none !important; transition: none !important; }
}
[data-motion="reduced"] .tkx *, [data-motion="reduced"] .tkx *::before, [data-motion="reduced"] .tkx-sheet * { animation: none !important; transition: none !important; }

/* task editor: the goal row spans the grid; a task from a note links back to it */
.tkx-f-wide { grid-column: 1 / -1; }
.tkx-from { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin: 0 0 4px; padding: 0 12px 0 10px; border: 0; border-radius: 999px; background: var(--m-surface); color: var(--tx-2); font: inherit; font-size: 13px; cursor: pointer; }
.tkx-from svg.tki { width: 16px; height: 16px; }

/* Device matrix 2026-10-19, touch targets. The habit name under a Today ring is 15 to 30px tall. Its
   padding grows, with equal negative margins so nothing moves, into half of each gap (3px toward the
   ring, 8px toward the next row), never into the ring itself. The clamp lives on the inner span, so the
   padding never reveals a third line. The Tasks "new list" pill and the add-more button are 38px: 44px
   with the halo. */
.dg-name { padding: 3px 5px 8px; margin: -3px -3px -8px; }
.tkx-pill-new, .tkx-add-more { position: relative; }
.tkx-pill-new::after, .tkx-add-more::after { content: ''; position: absolute; inset: -3px; border-radius: 999px; }


/* ---- audit fixes (v246) ---- */
/* toasts take the width of their words, up to the screen */
.arc-snackbar { width: max-content; }
/* onboarding: only a new step rises in; a tap on the same step redraws still */
.ob:not(.enter) { animation: none; }
.ob-consent a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
/* the habits flag banner's dot stays a dot */
.hr-flag-banner .hp-flag-dot { flex: none; }
/* quit history: the disclosure marker in the page's own colour */
.quit-history summary::marker, .quit-tuning summary::marker { color: var(--tx-3); }
/* "Suggested" stays readable inside the chosen day mode and never breaks mid-word */
.adaptive-modes button small { overflow-wrap: normal; white-space: nowrap; }
.adaptive-modes button[aria-pressed="true"] small { color: inherit; opacity: .8; }
/* the steps sheet: room between its fields and above Save */
.tr-sheet .tk-field + .tk-field { margin-top: 12px; }
.tr-sheet .tk-field + .btn { margin-top: 16px; }
/* the empty Today's one action looks like an action */
.hr-empty { display: inline-flex; align-items: center; min-height: 44px; margin: 8px 0; padding: 0 18px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 999px; color: var(--tx); font-weight: 600; }
/* long words without spaces wrap instead of running off the screen */
.contract-card .line, .ob-sub b, .ck-habits button, .you-hub h1, .you-hub h2, #youArcTitle, .you-hero-why { overflow-wrap: anywhere; min-width: 0; }
/* onboarding's small controls are full tap targets */
.ob-back { min-height: 44px; }
.ob-pay-x { min-width: 44px; min-height: 44px; }
/* "Not scheduled today" reads as a fold, with the same chevron as "N done" */
.hr-rest > summary { list-style: none; }
.hr-rest > summary::-webkit-details-marker { display: none; }
.hr-rest > summary::after { content: ''; width: 7px; height: 7px; margin-left: auto; margin-right: 6px; border: solid var(--tx-3); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .25s ease; }
.hr-rest[open] > summary::after { transform: rotate(-135deg); }
/* onboarding fills the screen exactly: no phantom scroll below a short step */
#app:has(> .ob) { padding-bottom: 0; }
/* the top bar's buttons and the avatar answer a full 44px tap */
.brand-btn { position: relative; }
.brand-btn::before { content: ''; position: absolute; inset: -1px; border-radius: 50%; }
.brand-avatar::before { inset: -6px; }
/* buttons on the accent use the accent's own label colour in the plain Dark and Light themes (white on mint was unreadable) */
:root:not([data-skin="ember"]):not([data-palette]) :is(.m-btn:not(.m-btn-ghost), .m-chip[aria-pressed="true"], .m-chip.on, .tkx-pill[aria-current="page"], .ft-pill) { color: var(--on-accent); }
/* ghost buttons stay ghost in the Sky and Grey Black looks (the palette's label colour is for filled buttons) */
:root[data-palette] .m-btn-ghost { color: var(--tx) !important; }
/* the habits flag banner: dot, two lines of text, chevron at the edge */
.hr-flag-banner .hp-flag-dot, .hr-flag-banner .m-row-go { flex: none; display: block; }
.hr-flag-banner .m-row-txt { flex: 1; min-width: 0; }
/* the sleep player is a dark room in every theme, its close button included */
.sheet[data-sheet-type="sleep"] { --card-2: rgba(175, 195, 255, .12); }
/* a toast never swallows taps on the top bar under it; its own buttons still work */
.nudge { pointer-events: none; }
.nudge button, .nudge a { pointer-events: auto; }
/* the Calendar section lands below the sticky bar, as Settings and Health do */
#youCalendar { scroll-margin-top: 64px; }
/* 320px: the task sheet's date and time fields stack so the date is never clipped */
@media (max-width: 340px) { .tkx-fields { grid-template-columns: 1fr !important; } }
/* long habit names take two lines in the Habits list, as tasks do */
.hr-open b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
/* a task on Today reads like a habit: two lines before anything is cut, the strike drawn across both (v247) */
.tk-inline .tk-body b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tk-inline .tk-body b span { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* long words in a Journal entry or a habit's title wrap inside their sheet */
.jns-title, .pd-focus-head h2, .pd-focus-head h3 { min-width: 0; overflow-wrap: anywhere; }
/* the paywall's check circles are circles (the chart card padding no longer reaches them) */
.pay-stack-row .pc { padding: 0; }
/* the rings card keeps "18% · 2/11" on one line */
.ar-ring-card small span { display: inline; }
/* overdue dates stay readable on the light look */
[data-theme="light"] .pb3-task small.late { color: #b4382a; }
/* the page under the menu or a sheet stays put while it is open */
html:has(.side-shell), html:has(.sheet-wrap) { overflow: hidden; }
/* area pills share their rows evenly, so no pill sits alone on the last one */
.area-pills { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.area-pills button { justify-content: center; }