/* Gabe: one stylesheet for every page. Old money: linen and evergreen,
   because Gabe hates black: no black backgrounds anywhere, the
   celebration included. */

:root {
  color-scheme: light;
  --bg: #e7ddc4;
  --nav: #1d3626;
  --card: #faf6ea;
  --card2: #f1e9d2;
  --line: rgba(29, 54, 38, .18);
  --text: #1d3626;
  --dim: rgba(29, 54, 38, .62);
  --ok: #2f5d42;
  --ok2: #4a7a59;
  --bad: #8c3a2e;
  --accent: #b08d57;
  --gold: #b08d57;
  --gold2: #c9a96a;
  --blue: #1e88e5;
  --violet: #8e5bd6;
  --shadow: 0 18px 48px rgba(29, 54, 38, .22), 0 2px 6px rgba(29, 54, 38, .12);
}

* { box-sizing: border-box; }

/* iOS Safari auto-zooms the page when a focused input's font-size is under 16px - keep every
   form field at 16px+ on narrow screens so tapping into one never triggers that zoom. */
@media (max-width: 600px) {
  input, select, textarea { font-size: 16px !important; }
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 600;
  /* a quiet linen room, not a sunburst */
  background:
    radial-gradient(1200px 700px at 50% -12%, rgba(255, 255, 255, .4), transparent 62%),
    linear-gradient(180deg, #efe7d1 0%, var(--bg) 55%, #ddd0ac 100%);
  background-attachment: fixed;
}

a { color: inherit; }

/* ---- the nav bar ---- */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 22px;
  background: linear-gradient(180deg, #24472f, var(--nav));
  box-shadow: 0 2px 0 rgba(255, 255, 255, .1) inset, 0 6px 22px rgba(12, 28, 18, .35);
  color: #f1e9d2;
}
.brand {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: "Playfair Display", serif; font-size: 19px; font-weight: 700; letter-spacing: .4px; text-decoration: none; color: inherit;
}
.brand .mark { flex: none; }

/* the tool switcher: the tool's name and a small ▼; hover (or a tap, which focuses it) drops open every tool */
.switch { position: relative; z-index: 2; }
.switch > .brand { padding: 4px 0; cursor: default; }
.switch > .brand:focus { outline: none; }
.switch > .brand:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 6px; }
.caret { font-size: 10px; opacity: .7; }
.switch .panel { display: none; position: absolute; left: 0; top: 100%; padding-top: 7px; }
.switch:hover .panel, .switch:focus-within .panel { display: block; }
.switch nav {
  min-width: 190px; padding: 5px 0; overflow: hidden;
  background: var(--card); border: 1px solid rgba(61, 43, 0, .14); border-radius: 11px;
  box-shadow: 0 10px 30px rgba(18, 92, 38, .3);
}
.switch nav a {
  display: flex; align-items: center; gap: 9px; padding: 8px 14px; white-space: nowrap;
  color: var(--text); text-decoration: none; font-size: 13px; font-weight: 650;
}
.switch nav a:hover, .switch nav a:focus { background: rgba(61, 43, 0, .1); outline: none; }
.switch nav a.here { background: rgba(61, 43, 0, .07); }
.switch .dot { flex: none; width: 8px; height: 8px; border-radius: 99px; }
.switch .tag { margin-left: auto; padding-left: 12px; font-size: 10px; font-weight: 500; opacity: .6; }
.grow { flex: 1; }
/* dead center of the nav, whatever is on either side */
.love {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 18px; font-weight: 800; pointer-events: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.heart { font-size: 30px; line-height: 1; color: #e0245e; animation: heartbeat 1.6s ease-in-out infinite; }
/* Ad Astra, Bment, Script Editor: that tab's own daily quote takes this spot instead - always
   shown in full, wrapping onto its own row (and multiple lines there) rather than ever truncating */
.love-quote {
  position: static; transform: none; pointer-events: auto;
  order: 3; flex: 1 1 100%;
  font-size: 15px; font-weight: 600; font-style: italic; letter-spacing: 0;
  white-space: normal; max-width: none; overflow: visible; text-overflow: unset;
  text-align: center; justify-content: center; margin-top: 4px;
}
.nav:has(.love-quote) { flex-wrap: wrap; }
@keyframes heartbeat { 0%, 40%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 28% { transform: scale(1.04); } }
.nav form { margin: 0; }
.pill {
  border: 0; border-radius: 99px; padding: 6px 12px; cursor: pointer;
  background: rgba(241, 233, 210, .16); color: rgba(241, 233, 210, .9);
  font: inherit; font-size: 12px; font-weight: 700;
}
.pill:hover { background: rgba(241, 233, 210, .28); color: #fff; }

/* Home's mode switch: Get Organized / Get Shit Done */
.mode { display: flex; gap: 2px; padding: 3px; border-radius: 99px; background: rgba(241, 233, 210, .14); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25); }
.mode button {
  border: 0; border-radius: 99px; padding: 6px 13px; background: none; cursor: pointer; white-space: nowrap;
  color: rgba(241, 233, 210, .78); font: inherit; font-size: 12px; font-weight: 800; transition: background .2s, color .2s, box-shadow .2s;
}
.mode button:hover { color: #fff; }
body:not(.gsd) .mode [data-mode="org"] { background: var(--card); color: var(--text); box-shadow: 0 2px 8px rgba(12, 28, 18, .3); }
body.gsd .mode [data-mode="gsd"] {
  background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .4), 0 0 18px rgba(176, 141, 87, .7);
}

/* a phone: smaller, still dead center; the mode switch gets a row of its own */
@media (max-width: 760px) {
  .nav { flex-wrap: wrap; row-gap: 8px; }
  .love:not(.love-quote) { top: 10px; height: 30px; }
  .mode { order: 5; flex: 1 1 100%; justify-content: center; }
  .mode button { flex: 1; }
}
@media (max-width: 560px) {
  .nav { padding: 10px 14px; gap: 10px; }
  .brand { font-size: 15px; }
  .love { gap: 6px; font-size: 15px; }
  .heart { font-size: 22px; }
  .love-quote { font-size: 13px; }
}
@media (max-width: 400px) { .brand .mark { display: none; } .love { font-size: 14px; } }

/* ---- page ---- */
main { max-width: 1100px; margin: 0 auto; padding: 22px clamp(16px, 3.5vw, 40px) 60px; }
.page-home main { max-width: 1560px; }

.card {
  background: linear-gradient(165deg, #f8fff8 0%, var(--card) 45%, var(--card2) 100%);
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 18px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .9);
  padding: 14px 10px 10px;
  /* a closed <details> card still sizes itself by its (invisible) content's min-content width
     in some browsers - min-width:0 lets it shrink to the page instead of forcing a scrollbar */
  min-width: 0;
}
.card.wide { max-width: 760px; }
.card.narrow { max-width: 380px; margin: 40px auto; }
.card p { padding: 0 6px; }

.head { display: flex; align-items: baseline; gap: 8px; padding: 0 6px 10px; }
/* every titled box opens and shuts by tapping its title (CARD_TOGGLE_SCRIPT in app/layout.php) */
.head-toggle { cursor: pointer; user-select: none; -webkit-user-select: none; }
.head-toggle::before { content: "\25BE"; margin-right: 2px; font-size: 11px; color: var(--dim); transition: transform .2s; }
.head-toggle:focus { outline: none; }
.head-toggle:focus-visible { outline: 2px solid var(--ok); outline-offset: 2px; border-radius: 6px; }
.collapsed > .head-toggle::before { transform: rotate(-90deg); }
.card.collapsed > :not(.head), .mvp-section.collapsed > :not(.mvp-section-head) { display: none; }
.card.collapsed > .head { padding-bottom: 0; }
.title { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-family: "Playfair Display", serif; }

ul { list-style: none; margin: 0; padding: 4px 0 0; border-top: 1px solid var(--line); }

/* a one-line form: the sign-in box */
.add { display: flex; gap: 6px; margin-top: 8px; padding: 0 2px; }
.add input {
  flex: 1; min-width: 0; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #f5fff5; color: var(--text); font: inherit; font-size: 14px;
}
.add input:focus { outline: none; border-color: rgba(61, 43, 0, .35); }
.add button {
  border: 0; border-radius: 10px; padding: 0 14px; cursor: pointer;
  background: rgba(61, 43, 0, .1); color: var(--text); font: inherit; font-size: 13px; font-weight: 700;
}
.add button:hover { background: var(--accent); color: var(--text); }

/* ---- status ---- */
.badge { margin-left: auto; font-size: 11.5px; font-weight: 800; padding: 2px 10px; border-radius: 99px; }
.badge.ok { background: rgba(46, 158, 79, .15); color: var(--ok); }
.badge.bad { background: rgba(210, 59, 42, .15); color: var(--bad); }
.status { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line); }
.status th, .status td { text-align: left; vertical-align: top; padding: 9px 6px; border-bottom: 1px solid var(--line); font-size: 14px; }
.status th { width: 130px; color: var(--dim); font-weight: 600; }
.status td { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.error { color: var(--bad); font-size: 14px; }


/* ---- KTLO: the tabs, one board's card at a time (public/ktlo.js draws them) ---- */
.ktlo { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ktlo [hidden] { display: none !important; }
.md-tabs {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 4px;
  background: linear-gradient(165deg, #f8fff8, var(--card2)); border: 1px solid rgba(255, 255, 255, .75); border-radius: 16px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .9);
}
@media (max-width: 560px) { .md-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.md-tabs button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0;
  border: 0; border-radius: 12px; padding: 7px 7px 8px; background: none; cursor: pointer; text-align: left;
  color: var(--dim); font: inherit;
}
.md-tabs button:hover { color: var(--text); background: rgba(61, 43, 0, .06); }
.md-tabs button.on { color: var(--text); background: #fff; box-shadow: 0 2px 10px rgba(18, 92, 38, .2); }
.md-tabs .t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 800; }
.md-tabs .c { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-variant-numeric: tabular-nums; }
.md-tabs i { display: block; width: 100%; height: 4px; margin-top: 3px; border-radius: 2px; background: rgba(61, 43, 0, .12); overflow: hidden; }
.md-tabs i b { display: block; width: 0; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--ok), var(--ok2)); transition: width .5s; }
.md-tabs button.won i b { box-shadow: 0 0 8px var(--ok); }
.md-tabs button.won .c { color: var(--ok); font-weight: 700; }

.myday { padding: 16px 14px 12px; transition: box-shadow .5s, border-color .5s; }
.myday.won {
  border-color: #fff3b0;
  box-shadow: 0 0 0 3px rgba(255, 196, 0, .5), 0 0 46px rgba(255, 196, 0, .45), var(--shadow);
  background: linear-gradient(165deg, #fffbe0 0%, #fff1a8 50%, #ffe27a 100%);
}
.myday.won .md-ring .bar { stroke: var(--gold); }
.md-head { display: flex; gap: 14px; align-items: center; padding: 0 4px 14px; cursor: pointer; user-select: none; }
.md-head::after { content: "\25BE"; flex: none; align-self: flex-start; margin-top: 8px; font-size: 11px; color: rgba(61, 43, 0, .4); }
.myday.folded .md-head::after { content: "\25B8"; }
.myday.folded > :not(.md-head) { display: none !important; }
.myday.folded .md-head { padding-bottom: 0; }

.md-ring { flex: none; position: relative; width: 68px; height: 68px; }
.md-ring svg { display: block; width: 68px; height: 68px; transform: rotate(-90deg); filter: drop-shadow(0 0 6px rgba(46, 158, 79, .45)); }
.md-ring .trk { stroke: rgba(61, 43, 0, .12); }
.md-ring .bar { stroke: var(--ok2); transition: stroke-dashoffset .6s cubic-bezier(.3, 1.4, .5, 1); }
.md-count { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.md-count b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.md-count span { margin-top: 3px; font-size: 10.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.md-title { flex: 1; min-width: 0; }
.md-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.md-msg { margin: 3px 0 6px; font-size: 18px; font-weight: 700; text-wrap: balance; }
.md-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--dim); }
.md-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 99px; background: rgba(61, 43, 0, .07); white-space: nowrap; }
.md-chip.hot { background: linear-gradient(90deg, #ffb300, #ff7a00); color: #fff; box-shadow: 0 0 10px rgba(255, 122, 0, .45); }
.md-chip.bad { background: var(--bad); color: #fff; font-weight: 700; }
.md-chip svg { width: 12px; height: 12px; }
.md-btn {
  flex: none; align-self: flex-start; display: grid; place-items: center; width: 32px; height: 32px;
  border: 0; border-radius: 10px; background: rgba(61, 43, 0, .08); color: var(--text); cursor: pointer;
}
.md-btn:hover { background: var(--accent); }
.md-btn svg { width: 16px; height: 16px; }

/* the last fourteen periods */
.md-strip { display: flex; gap: 5px; align-items: center; padding: 0 4px 12px; }
.md-strip i { position: relative; flex: 1; height: 6px; border-radius: 3px; background: rgba(61, 43, 0, .1); overflow: hidden; }
.md-strip i b { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: rgba(46, 158, 79, .55); }
.md-strip i.full b { background: var(--ok); box-shadow: 0 0 6px rgba(46, 158, 79, .7); }
.md-strip i.today { outline: 1px solid rgba(61, 43, 0, .45); outline-offset: 1px; }

.md-list { list-style: none; margin: 0; padding: 4px 0 0; border-top: 1px solid var(--line); }
.md-sec { padding: 14px 8px 5px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.md-empty { padding: 10px 8px; font-size: 13.5px; color: rgba(61, 43, 0, .5); }
.md-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; cursor: pointer; user-select: none; transition: background .15s; }
.md-row:hover { background: rgba(255, 255, 255, .7); }
.md-row.next { background: linear-gradient(90deg, rgba(67, 196, 99, .22), rgba(67, 196, 99, .04) 80%); box-shadow: inset 3px 0 0 var(--ok2); }
.md-row.next .md-name::after {
  content: "next"; margin-left: 8px; vertical-align: 1px;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ok);
}
.md-chk {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; cursor: pointer;
  border: 2px solid rgba(61, 43, 0, .4); border-radius: 50%; background: #fff; color: #fff;
  transition: background .2s, border-color .2s;
}
.md-chk svg { width: 13px; height: 13px; opacity: 0; transform: scale(.4); transition: opacity .15s, transform .3s cubic-bezier(.3, 1.8, .5, 1); }
.md-row.done .md-chk { background: linear-gradient(180deg, var(--ok2), var(--ok)); border-color: var(--ok); box-shadow: 0 0 10px rgba(46, 158, 79, .5); animation: md-pop .4s cubic-bezier(.3, 1.8, .5, 1); }
.md-row.done .md-chk svg { opacity: 1; transform: scale(1); }
.md-row:not(.done):hover .md-chk { border-color: var(--ok); }
.md-name { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.md-name a { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(61, 43, 0, .45); }
.md-name a:hover { border-bottom-style: solid; }
.md-row.done .md-name { color: var(--dim); text-decoration: line-through; }
.md-at { flex: none; font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.md-when {
  flex: none; padding: 2px 7px; border-radius: 99px; background: rgba(61, 43, 0, .08); color: var(--dim);
  font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.md-when.today { background: rgba(255, 159, 28, .3); color: #7a4200; }
.md-when.late { background: rgba(210, 59, 42, .16); color: var(--bad); }
.md-row.done .md-when { opacity: .5; }
@keyframes md-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* the pencil's editor */
.md-edit li { display: flex; gap: 6px; align-items: flex-start; padding: 5px 2px; border-bottom: 1px solid var(--line); }
.md-edit .f { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.md-edit input, .md-edit select {
  border: 1px solid var(--line); border-radius: 8px; background: #f5fff5; color: var(--text); font: inherit;
}
.md-edit input { width: 100%; padding: 7px 9px; font-size: 14px; }
.md-edit input:focus, .md-edit select:focus { outline: none; border-color: var(--ok); }
.md-edit input.lnk { padding: 5px 9px; font-size: 12px; color: var(--dim); }
.md-edit li.sec input.ttl { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.md-edit .whenrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.md-edit .whenrow span { font-size: 11.5px; color: var(--dim); }
.md-edit select { padding: 5px 7px; font-size: 12px; }
.md-edit .tools { display: flex; gap: 2px; }
.md-edit .tools button { width: 26px; height: 30px; border: 0; border-radius: 7px; background: none; color: var(--dim); cursor: pointer; font-size: 14px; }
.md-edit .tools button:hover { background: rgba(61, 43, 0, .1); color: var(--text); }
.md-edit .tools button:disabled { opacity: .25; cursor: default; background: none; }
.md-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 2px 4px; }
.md-foot button {
  border: 0; border-radius: 10px; padding: 8px 12px; cursor: pointer;
  background: rgba(61, 43, 0, .1); color: var(--text); font: inherit; font-size: 13px; font-weight: 700;
}
.md-foot button:hover { background: rgba(61, 43, 0, .18); }
.md-foot .go { margin-left: auto; background: var(--ok); color: #fff; }
.md-foot .go:hover { background: #258a42; }
.md-help { margin: 0; padding: 10px 4px 0 !important; font-size: 12px; color: var(--dim); }
.md-note { margin: 0; padding: 8px 6px 0 !important; font-size: 12.5px; color: var(--bad); }

/* What's left: every board's open tasks in one card */
.kn-sec { display: flex; align-items: center; gap: 8px; padding: 12px 8px 4px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.kn-sec .kn-name { flex: none; }
.kn-sec .kn-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(61, 43, 0, .1); overflow: hidden; }
.kn-sec .kn-bar b { display: block; height: 100%; border-radius: 3px; background: var(--ok); transition: width .6s cubic-bezier(.3, 1.4, .5, 1); }
.kn-sec.clear .kn-bar b { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.kn-sec .kn-ct { flex: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.kn-done { padding: 2px 8px 4px 10px; font-size: 13px; font-weight: 900; color: var(--ok); text-shadow: 0 0 10px rgba(67, 196, 99, .5); }
.kn-big { flex: none; text-align: right; line-height: 1; }
.kn-big b { display: block; font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; }
.kn-big span { font-size: 11px; color: var(--dim); }
.kn-all { height: 12px; margin: 0 4px 10px; border-radius: 99px; background: rgba(61, 43, 0, .08); overflow: hidden; box-shadow: inset 0 1px 3px rgba(61, 43, 0, .15); }
.kn-all i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--ok), #3fa9f5); box-shadow: 0 0 12px rgba(46, 158, 79, .6);
  transition: width .6s cubic-bezier(.3, 1.4, .5, 1); }
.md-now.won .kn-all i { background: linear-gradient(90deg, var(--gold), var(--gold2)); box-shadow: 0 0 14px rgba(255, 179, 0, .8); }
.kn-later { padding: 2px 8px 6px 40px; font-size: 11.5px; color: var(--dim); }

/* the word that floats up from a tick, and the confetti */
.md-pop {
  position: fixed; z-index: 330; transform: translate(-50%, 0); pointer-events: none; white-space: nowrap;
  font-size: 18px; font-weight: 900; color: var(--accent);
  text-shadow: 0 0 10px rgba(255, 159, 28, .6), 0 1px 2px rgba(61, 43, 0, .5);
  animation: md-float 1.1s ease-out forwards;
}
@keyframes md-float {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(.6); }
  20% { opacity: 1; transform: translate(-50%, -6px) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -48px) scale(1); }
}
#md-confetti { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ktlo *, .md-pop { animation: none !important; transition: none !important; } }

/* ---- Training: clients and the week at a glance (app/training.php) ---- */
.clients li, .week li { padding: 6px; border-radius: 10px; }
.clients summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; cursor: pointer; list-style: none; }
.clients summary::-webkit-details-marker { display: none; }
.clients summary::before { content: "\25B8"; font-size: 11px; color: rgba(61, 43, 0, .4); }
.clients details[open] summary::before { content: "\25BE"; }
@media (hover: hover) { .clients li:not(.mvp-step):hover { background: rgba(61, 43, 0, .05); } } /* not on a phone: a thumb scrolling past isn't a hover */
.cname { font-weight: 700; }
.client-edit { display: grid; gap: 10px; padding: 12px 4px 4px 18px; }
.client-edit label, .client-edit legend { display: grid; gap: 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.client-edit fieldset { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.client-edit input, .client-edit select, .client-edit textarea {
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px;
  background: #f5fff5; color: var(--text); font: inherit; font-size: 14px; letter-spacing: 0; text-transform: none;
}
.client-edit textarea { resize: vertical; }
.client-edit input:focus, .client-edit select:focus, .client-edit textarea:focus { outline: none; border-color: var(--ok); }
.slot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.slot span { font-size: 12px; color: var(--dim); }
.client-edit .md-foot { padding: 0; }
.client-del { margin: 0; padding: 4px 4px 4px 18px; }
.client-del button { border: 0; background: none; padding: 0; cursor: pointer; color: var(--dim); font: inherit; font-size: 12px; text-decoration: underline; }
.client-del button:hover { color: var(--bad); }
.week li { display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: baseline; }
.week li.today { background: rgba(255, 159, 28, .16); }
.dname { font-size: 13px; font-weight: 700; }
.week .md-chip { color: var(--text); text-decoration: none; white-space: normal; }
.week a.md-chip:hover { background: rgba(255, 159, 28, .3); }

/* ---- Devour's Book Club: a monthly 2-book goal, highlights always visible (app/topics.php) ---- */
.hint { color: var(--dim); font-size: 14px; }
.devour-month { margin-bottom: 14px; }
.devour-month-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 6px 4px; border-bottom: 1px solid var(--line); }
.devour-month-name { font-family: "Playfair Display", serif; font-weight: 700; font-size: 15px; }
.devour-goal { font-size: 12px; font-weight: 700; color: var(--dim); }
.devour-goal.hit { color: var(--ok); }
.devour-flow { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.devour-flow li { padding: 8px; border-radius: 8px; }
@media (hover: hover) { .devour-flow li:not(.mvp-step):hover { background: rgba(29, 54, 38, .05); } }
/* an exercise's color says only where it is in the session: a thumb touching it on the way past (scrolling)
   never changes it - only checking it off does */
.mvp-step { -webkit-tap-highlight-color: transparent; }
.devour-grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.devour-info { min-width: 0; }
.devour-title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.devour-byline { font-style: italic; color: var(--dim); font-size: 14px; }
.devour-edit { font-size: 12px; margin-top: 2px; }
.devour-edit summary { cursor: pointer; color: var(--dim); text-decoration: underline; list-style: none; }
.devour-edit summary::-webkit-details-marker { display: none; }
.devour-edit[open] summary { margin-bottom: 8px; }
.devour-highlights { display: flex; flex-direction: column; gap: 6px; }
.devour-highlights textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--text); font: inherit; font-size: 14px; resize: vertical;
}
.devour-highlights textarea:focus { outline: none; border-color: var(--ok); }
.devour-highlights button {
  align-self: flex-end; padding: 5px 14px; border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(47, 93, 66, .12); color: var(--text); font: inherit; font-size: 12px; font-weight: 700;
}
.devour-highlights button:hover { background: var(--ok); color: #fff; }
.devour-add { flex-wrap: wrap; }
.devour-add input[name="author"], .devour-add input[name="year"] { flex: none; width: 140px; }
.devour-add input[name="year"] { width: 70px; }
@media (max-width: 700px) { .devour-grid { grid-template-columns: 1fr; } }

/* ---- the topic tabs: a simple checklist per topic (app/topics.php) ---- */
.clients li.done .cname { text-decoration: line-through; color: var(--dim); font-weight: 400; }
.md-check { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px;
  font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text) !important; }
.md-check input { width: auto; }

/* ---- a narrow page of one or more plain cards (topics.php, vehicles.php) ---- */
.narrow-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 420px; margin: 40px auto; } /* a wide row never stretches a box past the screen */
.narrow-page.wide { max-width: 780px; }
.veh-desc { margin: -4px 0 10px; padding: 0 6px; font-size: 12px; color: var(--dim); }

/* ---- MVP: client programs, steps and PRs (app/mvp.php) ---- */
.mvp-clients > li { padding: 8px 6px; display: flex; align-items: flex-start; gap: 8px; }
.mvp-clients > li > details.client { flex: 1; min-width: 0; }
.mvp-today-check { display: flex; align-items: center; height: 30px; }
.mvp-today-check input { width: 16px; height: 16px; accent-color: var(--ok); cursor: pointer; }
/* the pick's place in today's order (1, 2, 3...), beside its box */
.mvp-today-check { gap: 4px; }
.mvp-today-check[data-pick]:not([data-pick=""])::after {
  content: attr(data-pick); display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; box-sizing: border-box;
  border-radius: 99px; background: #2f5e43; color: #f6efd9; font: 700 11px/1 Arial, sans-serif; /* a plain 1, not a serif I */
}
.mvp-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 8px 4px 4px 14px; } /* never wider than the screen */
.mvp-step .devour-grid { grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.mvp-rename { display: flex; flex-wrap: wrap; gap: 6px; }
.mvp-rename input { flex: 1 1 120px; min-width: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); font: inherit; font-size: 14px; }
.mvp-rename button, .mvp-photo-form button {
  padding: 6px 12px; border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(47, 93, 66, .12); color: var(--text); font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.mvp-rename button:hover, .mvp-photo-form button:hover { background: var(--ok); color: #fff; }
.mvp-photo-block { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mvp-photo { width: 90px; height: 90px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.mvp-photo-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mvp-photo-form input[type="file"] { font-size: 12px; max-width: 200px; }
.mvp-progress { position: relative; height: 10px; border-radius: 99px; overflow: hidden; background: rgba(29, 54, 38, .12); }
.mvp-progress i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, var(--ok), var(--ok2)); transition: width .4s; }
.mvp-steps { gap: 8px; }
.mvp-step { background: rgba(255, 255, 255, .5); border-radius: 10px; transition: background .3s; }
.mvp-step.done .cname { color: var(--dim); }
/* the session at a glance (mvp_tiers() in app/mvp.php): done is cream like the page, still to do is
   a medium green, and the one I'm on now (tier 1) a deeper green with a gold edge */
.mvp-step.done { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.mvp-step.tier-1 { background: linear-gradient(165deg, #2f5e43, #264d37); box-shadow: 0 0 0 2px var(--gold2), 0 4px 14px rgba(12, 28, 18, .25); }
.mvp-step.tier-2 { background: linear-gradient(165deg, #5f9272, #527f63); }
/* a superset still to come: between the two - darker than the rest still to do, lighter than the one I'm on */
.mvp-step.tier-2.superset { background: linear-gradient(165deg, #467a5a, #3c6a4e); }
.mvp-step.tier-1 .mvp-complete, .mvp-step.tier-2 .mvp-complete { background: var(--card); color: var(--text); }
.mvp-step.tier-1 .mvp-complete:hover, .mvp-step.tier-2 .mvp-complete:hover { background: #fff; }
.mvp-step.tier-1 .farrell-move button:not(:disabled), .mvp-step.tier-2 .farrell-move button:not(:disabled) { background: rgba(255, 255, 255, .2); color: #fff; }
.mvp-step.tier-1 .farrell-move button:disabled, .mvp-step.tier-2 .farrell-move button:disabled { background: rgba(255, 255, 255, .12); color: #fff; }
/* an open edit form sits on a cream panel, so its labels stay readable on the green */
.mvp-step.tier-1 .devour-edit[open] > form, .mvp-step.tier-2 .devour-edit[open] > form { padding: 8px; border-radius: 8px; background: var(--card); }
.mvp-step.tier-1 .cname, .mvp-step.tier-1 .devour-byline, .mvp-step.tier-1 .budget-note,
.mvp-step.tier-2 .cname, .mvp-step.tier-2 .devour-byline, .mvp-step.tier-2 .budget-note { color: rgba(255, 255, 255, .92); }
.mvp-step.tier-1 .devour-edit summary, .mvp-step.tier-2 .devour-edit summary { color: rgba(255, 255, 255, .7); }
.mvp-step.tier-1 .md-chip.hot, .mvp-step.tier-2 .md-chip.hot { background: #fff; color: var(--text); }
/* the done/complete control always keeps its own look, never swallowed by the row's background */
.mvp-step.tier-1 .mvp-complete, .mvp-step.tier-2 .mvp-complete { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.md-chip.pr { background: linear-gradient(90deg, #b08d57, #8a6d3b); color: #fff; }
.mvp-complete {
  margin-top: 6px; padding: 5px 14px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--ok); color: #fff; font: inherit; font-size: 12px; font-weight: 700;
}
.mvp-complete:hover { background: var(--ok2); }
.mvp-add { flex-wrap: wrap; }
.mvp-add-client { max-width: 420px; margin-top: 4px; }

.mvp-drag-handle { cursor: grab; color: var(--dim); font-size: 14px; flex: none; }
.mvp-client-li[draggable="true"] { cursor: default; }
.mvp-client-li.mvp-drag-over { box-shadow: 0 0 0 2px var(--ok) inset; }

.mvp-goals { display: grid; gap: 8px; padding: 10px; border-radius: 10px; background: rgba(176, 141, 87, .08); }
.mvp-goals label { display: grid; gap: 3px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.mvp-goals textarea {
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text);
  font: inherit; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 500; resize: vertical;
}
.mvp-goals .md-foot { padding: 0; }

.mvp-program { border: 1px dashed var(--line); border-radius: 12px; padding: 10px; }
.mvp-program-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.mvp-program-head .mvp-drag-handle { cursor: grab; }

/* MVP's folds (mvp_fold()): everything that isn't the workout, one tap away */
.mvp-fold { margin: 6px 0; min-width: 0; }
.mvp-fold > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  padding: 4px 12px; border-radius: 99px; background: rgba(47, 93, 66, .08);
  font-size: 12px; font-weight: 700; color: var(--dim);
}
.mvp-fold > summary::-webkit-details-marker { display: none; }
.mvp-fold > summary::before { content: "\25B8"; font-size: 10px; transition: transform .15s; }
.mvp-fold[open] > summary::before { transform: rotate(90deg); }
.mvp-fold[open] > summary { margin-bottom: 8px; }
.mvp-fold-body { min-width: 0; }
.mvp-fold-dot { color: var(--ok); font-size: 9px; } /* a fold with something in it (Brainstorming) */
.mvp-brainstorm textarea { width: 100%; box-sizing: border-box; min-height: 9em; resize: vertical; }
.mvp-brainstorm .md-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
/* the program's name is the fold's own label: it reads as the title, and opens to rename it */
.mvp-fold-titlelike { flex: 1; margin: 0; }
.mvp-fold-titlelike > summary { background: none; padding: 2px 0; font-family: "Playfair Display", serif; font-size: 18px; color: var(--text); }
.mvp-day-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.mvp-day-top .mvp-fold { margin: 0; }
.mvp-day-top .mvp-fold[open] { flex-basis: 100%; }
.mvp-complete-session .mvp-fold-pain { margin: 0; }
.mvp-complete-session .mvp-fold-pain[open] { flex-basis: 100%; }
.mvp-program-title { display: flex; gap: 6px; flex: 1; }
.mvp-program-title input {
  flex: 1; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text);
  font: inherit; font-size: 15px; font-weight: 700; font-family: "Playfair Display", serif;
}
.mvp-program-title button { padding: 6px 12px; border: 0; border-radius: 8px; cursor: pointer; background: rgba(47, 93, 66, .12); color: var(--text); font: inherit; font-size: 12px; font-weight: 700; }
.mvp-program-title button:hover { background: var(--ok); color: #fff; }

.mvp-day-tablist { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.mvp-day-tab {
  padding: 5px 12px; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; cursor: pointer;
  background: rgba(176, 141, 87, .08); color: var(--dim); font: inherit; font-size: 12px; font-weight: 700;
}
.mvp-day-tab.active { background: var(--card); color: var(--text); border-color: var(--accent); }
.mvp-day-panels { border-top: 1px solid var(--line); padding-top: 8px; }
.mvp-day-panel[hidden] { display: none; }

.mvp-day { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.mvp-day:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.mvp-day-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; } /* the ✓ count / In Process tags wrap below on a phone */
.mvp-day-name input { min-width: 0; }
.mvp-day-name input {
  flex: 1; max-width: 220px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  color: var(--text); font: inherit; font-size: 13px; font-weight: 700;
}
.mvp-day-name button { padding: 5px 10px; border: 0; border-radius: 8px; cursor: pointer; background: rgba(47, 93, 66, .1); color: var(--text); font: inherit; font-size: 11px; font-weight: 700; }
.mvp-add-day { max-width: 320px; margin-top: 4px; }

.mvp-section { margin-bottom: 8px; }
.mvp-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.mvp-section-head.head-toggle { padding: 3px 0; border-radius: 8px; }
.mvp-section-head.head-toggle:hover { background: rgba(176, 141, 87, .08); }
.mvp-section.collapsed { margin-bottom: 4px; }
.mvp-section-count { font-size: 11px; font-weight: 700; color: var(--dim); }
.mvp-section-name {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
  padding: 2px 8px; border-radius: 99px; background: rgba(176, 141, 87, .14);
}
.mvp-del-section { margin: 0; }
.mvp-del-section button { border: 0; background: none; padding: 0 2px; cursor: pointer; color: var(--dim); font-size: 13px; line-height: 1; }
.mvp-del-section button:hover { color: var(--bad); }
.mvp-section-head .mvp-del-section { margin-left: auto; } /* far from the name: tapping the title folds, never deletes */
.mvp-section-head .mvp-del-section button { padding: 4px 8px; }
.mvp-del-section button.armed { color: #fff; background: var(--bad); border-radius: 99px; font-size: 11px; font-weight: 700; padding: 3px 9px; }
.mvp-synopsis-actions button.pill { border: 0; font: inherit; cursor: pointer; }
.mvp-add-section { max-width: 260px; margin: 2px 0 10px; }
.mvp-add-section input { padding: 4px 8px; font-size: 12px; }
.mvp-add-section button { padding: 4px 10px; font-size: 11px; }

.mvp-step-form label > input, .mvp-step-form label > textarea { width: 100%; }
.mvp-sets-label { max-width: 110px; }
.mvp-set-rows { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.mvp-set-row { display: flex; align-items: flex-end; gap: 6px; }
.mvp-set-row[hidden] { display: none; }
.mvp-set-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 30px;
  font-size: 11px; font-weight: 800; color: var(--dim);
}
.mvp-set-row label { flex: 1; min-width: 62px; }
.mvp-add .mvp-set-row { align-items: center; }
.mvp-add .mvp-set-num { height: auto; }
.mvp-add.mvp-step-form { display: grid; gap: 6px; }
.mvp-add.mvp-step-form > label { display: grid; gap: 3px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.mvp-add.mvp-step-form input, .mvp-add.mvp-step-form textarea {
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text);
  font: inherit; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 500;
}
.mvp-add.mvp-step-form > button { justify-self: start; padding: 7px 14px; border: 0; border-radius: 8px; cursor: pointer; background: rgba(47, 93, 66, .12); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; }
.mvp-add.mvp-step-form > button:hover { background: var(--ok); color: #fff; }
.mvp-add-toggle { margin-top: 4px; }
.mvp-add-toggle summary {
  display: inline-flex; align-items: center; cursor: pointer; list-style: none;
  padding: 7px 14px; border-radius: 8px; background: var(--ok); color: #fff; font-size: 13px; font-weight: 700;
}
.mvp-add-toggle summary::-webkit-details-marker { display: none; }
.mvp-add-toggle[open] summary { margin-bottom: 8px; background: rgba(61, 43, 0, .12); color: var(--text); }

#mvp-today summary.head, #mvp-clients summary.head, #mvp-archive summary.head, #mvp-trash summary.head { cursor: pointer; list-style: none; }
#mvp-today summary.head::-webkit-details-marker, #mvp-clients summary.head::-webkit-details-marker,
#mvp-archive summary.head::-webkit-details-marker, #mvp-trash summary.head::-webkit-details-marker { display: none; }

.mvp-clients-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 8px 0 12px; }
.mvp-settings summary { cursor: pointer; list-style: none; font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 8px; color: var(--dim); }
.mvp-settings summary::-webkit-details-marker { display: none; }
.mvp-settings summary:hover { background: rgba(61, 43, 0, .07); color: var(--text); }
.mvp-sort-form { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; padding: 10px; border-radius: 10px; background: rgba(176, 141, 87, .1); }
.mvp-sort-form label { display: grid; gap: 3px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.mvp-sort-form select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); font: inherit; font-size: 13px; }
.mvp-sort-form button { padding: 6px 14px; border: 0; border-radius: 8px; cursor: pointer; background: rgba(47, 93, 66, .12); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; }
.mvp-sort-form button:hover { background: var(--ok); color: #fff; }
.mvp-show-all { padding: 7px 14px; border: 0; border-radius: 8px; cursor: pointer; background: var(--accent); color: #fff; font: inherit; font-size: 13px; font-weight: 700; }
.mvp-show-all:hover { background: #8a6d3b; }
.mvp-show-all[hidden] { display: none; }
.md-chip.mvp-session-count { background: rgba(47, 93, 66, .14); color: var(--ok); font-weight: 700; }
.md-chip.mvp-last-session { background: rgba(61, 43, 0, .07); color: var(--dim); font-weight: 700; }

/* MVP wants density over whitespace: the top-level boxes sit right against each other */
.page-mvp .narrow-page.wide { gap: 4px; }
.page-mvp .card { border-radius: 10px; padding: 10px 8px 8px; }
.page-mvp .mvp-clients > li { padding: 5px 6px; }

/* every button green (.go's classy dark green, not the neon), except Delete/Remove and Complete/Finish -
   !important because plenty of older per-button rules here already set their own muted background,
   at a specificity this would otherwise lose to */
.page-mvp .go { background: var(--ok) !important; color: #fff !important; }
.page-mvp .go:hover { background: #258a42 !important; }

.mvp-rename-toggle summary { cursor: pointer; list-style: none; font-size: 11px; font-weight: 700; color: var(--dim); padding: 2px 4px; }
.mvp-rename-toggle summary::-webkit-details-marker { display: none; }
.mvp-rename-toggle[open] summary { margin-bottom: 4px; }

.mvp-export-menu { margin: 10px 0 0; }
.mvp-export-menu summary {
  cursor: pointer; list-style: none; display: inline-block; padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 700;
  color: var(--text); background: rgba(176, 141, 87, .16);
}
.mvp-export-menu summary::-webkit-details-marker { display: none; }
.mvp-export-menu summary:hover { background: var(--accent); color: #fff; }
.mvp-export-menu a {
  display: block; margin: 4px 0 0 4px; padding: 5px 10px; font-size: 12px; text-decoration: none; color: var(--text);
  background: rgba(176, 141, 87, .08); border-radius: 8px; max-width: max-content;
}
.mvp-export-menu a:hover { background: rgba(176, 141, 87, .22); }

.mvp-stats-link {
  font: inherit; font-size: 10.5px; font-weight: 700; text-decoration: none; color: var(--dim); padding: 2px 6px;
  border-radius: 99px; background: rgba(176, 141, 87, .12); border: 0; cursor: pointer;
}
.mvp-stats-link:hover { background: var(--accent); color: #fff; }

/* ---- MVP: "Open client" + the solo one-client screen (mvp_client_page() in app/mvp.php) ---- */
.mvp-open-client {
  font: inherit; font-size: 11px; font-weight: 700; text-decoration: none; color: #fff; padding: 4px 10px;
  border-radius: 99px; background: var(--ok);
}
.mvp-open-client:hover { background: var(--ok2); }
/* the way back from a deeper MVP page (mvp_back_bar()): round buttons across the top, the whole row wide */
.mvp-back-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; grid-column: 1 / -1; }
.mvp-back-btn {
  display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 99px; text-decoration: none;
  font-weight: 700; font-size: 14px; background: linear-gradient(160deg, #2f5e43, #264d37); color: #f6efd9; box-shadow: 0 3px 8px rgba(29, 54, 38, .15);
}
.mvp-back-btn.quiet { background: rgba(47, 93, 66, .1); color: var(--text); box-shadow: none; }
.mvp-back-btn:hover { filter: brightness(1.1); }
.mvp-solo .mvp-clients > li { padding: 0; }
.mvp-solo .mvp-open-client { display: none; }
@media (max-width: 640px) {
  .mvp-solo { padding-left: 4px; padding-right: 4px; }
}
.mvp-step.tier-1 .mvp-stats-link, .mvp-step.tier-2 .mvp-stats-link { background: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .85); }
.mvp-remove-exercise { display: inline; margin: 0; }
.mvp-step-drag-handle { cursor: grab; color: var(--dim); font-size: 13px; flex: none; margin-right: 2px; }
.mvp-step.tier-1 .mvp-step-drag-handle, .mvp-step.tier-2 .mvp-step-drag-handle { color: rgba(255, 255, 255, .7); }
.mvp-step[draggable="true"] { cursor: default; }
.mvp-remove-exercise .mvp-stats-link:hover { background: var(--bad); color: #fff; }
.mvp-remove-exercise .mvp-stats-link.armed { background: var(--bad); color: #fff; }
.mvp-stats-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 14px; }
.mvp-stats-tabs a {
  padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; text-decoration: none;
  color: var(--text); background: rgba(176, 141, 87, .1);
}
.mvp-stats-tabs a.active { background: var(--ok); color: #fff; }
.mvp-weight-graph { width: 100%; height: auto; background: rgba(255, 255, 255, .5); border-radius: 10px; padding: 6px; }

/* ---- Parking Lot quick-capture widget (app/parking.php), shown on every page under the nav ---- */
.parking-widget { flex: 1; min-width: 0; }
.parking-widget summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 7px 18px; font-size: 13px; font-weight: 700; color: var(--text); max-width: 900px; margin: 0 auto;
}
.parking-widget summary::-webkit-details-marker { display: none; }
.parking-widget-body { max-width: 900px; margin: 0 auto; padding: 0 18px 14px; display: grid; gap: 8px; }
.parking-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 240px; overflow-y: auto;
  -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; }
.parking-row { display: flex; align-items: center; gap: 8px; }
.parking-toggle { margin: 0; }
.parking-check {
  flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--line); background: #fff;
  cursor: pointer; color: var(--ok); font-size: 12px; line-height: 1; padding: 0;
}
.parking-row.done .parking-check { background: var(--ok); color: #fff; border-color: var(--ok); }
.parking-title { flex: 1; min-width: 0; font-size: 13px; }
.parking-row.done .parking-title { text-decoration: line-through; color: var(--dim); }
.parking-add { display: flex; gap: 6px; }
.parking-send { position: relative; flex: none; font-size: 13px; }
.parking-send summary {
  display: block; width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--line); background: #fff;
  cursor: pointer; color: var(--dim); text-align: center; line-height: 18px; list-style: none; padding: 0; margin: 0;
}
.parking-send summary::-webkit-details-marker { display: none; }
.parking-send[open] summary { background: var(--accent); color: #fff; border-color: transparent; }
.parking-send-list {
  position: absolute; right: 0; z-index: 20; margin-top: 2px; padding: 6px; display: grid; gap: 2px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 16px rgba(12, 28, 18, .18);
  max-height: 220px; overflow-y: auto; min-width: 150px;
}
.parking-send-opt { margin: 0; }
.parking-send-opt button {
  display: block; width: 100%; text-align: left; border: 0; border-radius: 6px; padding: 5px 8px; cursor: pointer;
  background: none; color: var(--text); font: inherit; font-size: 12px; white-space: nowrap;
}
.parking-send-opt button:hover { background: rgba(47, 93, 66, .1); }
.parking-widget.drag-over summary { background: rgba(47, 93, 66, .18); border-radius: 6px; }

/* ---- Drag any card's title onto the Parking Lot (PARKING_DRAG_SCRIPT, app/layout.php) ---- */
.card > .head, .card > summary.head { touch-action: pan-y; }
.parking-full-link { font-size: 12px; color: var(--dim); text-decoration: underline; }
.mvp-stats-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mvp-stats-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, .5);
}
.mvp-stats-row .devour-byline:first-child { min-width: 90px; font-weight: 700; color: var(--text); }

.mvp-empty-trash { margin-top: 10px; }

#mvp-exercise-library { margin-top: 0; }
.mvp-arsenal-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; max-height: 340px; overflow-y: auto; }
.mvp-arsenal-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .5); }
.mvp-add-library { max-width: 320px; }
.mvp-export-textarea {
  width: 100%; min-height: 260px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
  color: var(--text); font: 14px/1.5 ui-monospace, Menlo, Consolas, monospace; resize: vertical;
}

#mvp-today { border: 1px solid var(--accent); }
#mvp-today .head { justify-content: flex-start; gap: 10px; }
.mvp-finish-day { margin-top: 10px; }
.mvp-finish-day button {
  width: 100%; padding: 10px 16px; border: 0; border-radius: 10px; cursor: pointer;
  background: #39ff14; color: #0a2e0a; font: inherit; font-size: 14px; font-weight: 800;
  box-shadow: 0 0 10px rgba(57, 255, 20, .6);
}
.mvp-finish-day button:hover { background: #5cff3d; }
.mvp-archive-group { margin-bottom: 16px; }
.mvp-archive-group:last-child { margin-bottom: 0; }
.mvp-archive-client { font-family: "Playfair Display", serif; font-weight: 700; font-size: 14px; padding: 0 2px 6px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.mvp-archive-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.mvp-archive-card { padding: 10px 12px; border-radius: 10px; background: rgba(176, 141, 87, .1); cursor: grab; }
.mvp-archive-title { font-family: "Playfair Display", serif; font-weight: 700; font-size: 14px; }
.mvp-archive-meta { margin-top: 3px; font-size: 11px; color: var(--dim); }
/* View on an Archive card (mvp_archive_view()): its workouts, read-only; an open one takes the whole row */
.mvp-archive-card:has(.mvp-archive-view[open]) { grid-column: 1 / -1; cursor: default; }
.mvp-archive-view { margin-top: 6px; }
.mvp-archive-view > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--accent); }
.mvp-archive-day { margin-top: 10px; }
.mvp-archive-day-name { font-family: "Playfair Display", serif; font-weight: 700; font-size: 16px; border-bottom: 1px solid var(--line); padding-bottom: 3px; margin-bottom: 4px; }
.mvp-archive-day ul { list-style: none; margin: 0; padding: 0; }
.mvp-archive-day li { padding: 3px 0; font-size: 13px; overflow-wrap: anywhere; }
.mvp-archive-day .budget-note { margin: 1px 0 0; font-size: 12px; }
.mvp-drop-hover { box-shadow: 0 0 0 3px var(--ok) inset !important; background: rgba(47, 93, 66, .12) !important; }

/* Undo on an Archive card: back where it came from (mvp_undo_archive() in app/mvp.php) */
.mvp-archive-undo { margin: 6px 0 0; }
.mvp-archive-undo button {
  padding: 4px 12px; border: 0; border-radius: 99px; cursor: pointer;
  background: rgba(47, 93, 66, .12); color: var(--text); font: inherit; font-size: 12px; font-weight: 700;
}
.mvp-archive-undo button:hover { background: var(--ok); color: #fff; }
.mvp-trash-row { display: flex; align-items: center; gap: 10px; padding: 6px; }
.mvp-trash-row .devour-byline { flex: 1; }
.mvp-trash-row button { padding: 5px 12px; border: 0; border-radius: 8px; cursor: pointer; background: rgba(47, 93, 66, .12); color: var(--text); font: inherit; font-size: 12px; font-weight: 700; }
.mvp-trash-row button:hover { background: var(--ok); color: #fff; }

.mvp-danger { margin-top: 10px; padding: 7px 14px; border: 0; border-radius: 8px; cursor: pointer; background: var(--bad); color: #fff; font: inherit; font-size: 12px; font-weight: 700; }
.mvp-danger:hover { background: #a84232; }

.mvp-undo-banner {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px 16px; border-radius: 10px;
  background: rgba(176, 141, 87, .25); font-size: 13px;
}
.mvp-undo-banner button { padding: 5px 14px; border: 0; border-radius: 8px; cursor: pointer; background: var(--text); color: var(--card); font: inherit; font-size: 12px; font-weight: 700; }

/* "Complete Session" is deliberately a different, brighter green than everything else on the page */
.mvp-complete-session { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.mvp-complete-session button {
  padding: 8px 18px; border: 0; border-radius: 8px; cursor: pointer;
  background: #39ff14; color: #0a2e0a; font: inherit; font-size: 13px; font-weight: 800;
  box-shadow: 0 0 10px rgba(57, 255, 20, .6);
}
.mvp-complete-session button:hover { background: #5cff3d; }
.md-chip.mvp-unlogged { background: rgba(255, 159, 28, .25); color: #a15d00; font-weight: 700; }
.md-chip.mvp-stale { background: rgba(229, 72, 77, .18); color: #b0141e; font-weight: 700; animation: ls-pulse 2.4s ease-in-out infinite; }

.mvp-uncomplete { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.mvp-uncomplete button { padding: 6px 14px; border: 0; border-radius: 8px; cursor: pointer; background: rgba(61, 43, 0, .12); color: var(--text); font: inherit; font-size: 12px; font-weight: 700; }
.mvp-uncomplete button:hover { background: rgba(140, 58, 46, .2); color: var(--bad); }

.mvp-auto-banner { flex-direction: column; align-items: stretch; gap: 8px; }
.mvp-auto-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mvp-auto-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mvp-auto-undo-form { margin: 0; }
.mvp-auto-undo-form button { padding: 5px 14px; border: 0; border-radius: 8px; cursor: pointer; background: var(--ok); color: #fff; font: inherit; font-size: 12px; font-weight: 700; }

/* a quiet reference to what was logged last time - stays grayed out, never looks "done" */
.mvp-last-session { display: block; margin-top: 2px; font-size: 12px; color: var(--dim); }
.mvp-last-session i { font-style: normal; opacity: .8; }
.mvp-step.tier-1 .mvp-last-session, .mvp-step.tier-2 .mvp-last-session { color: rgba(255, 255, 255, .7); }

/* ---- MVP: the Complete Session synopsis (app/mvp.php mvp_synopsis_card()) ---- */
.mvp-synopsis-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.mvp-synopsis-row { padding: 10px; border-radius: 10px; background: rgba(61, 43, 0, .05); }
.mvp-synopsis-row.pr { background: linear-gradient(90deg, rgba(176, 141, 87, .18), rgba(176, 141, 87, .06)); }
.mvp-synopsis-delta { margin: 4px 0 0; font-size: 13px; color: var(--dim); }
.mvp-synopsis-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.mvp-synopsis-actions .pill { background: rgba(61, 43, 0, .1); color: var(--text); }
.mvp-synopsis-actions .pill:hover { background: rgba(61, 43, 0, .18); }

/* ---- Ad Astra Society (app/ad_astra.php) ---- */
.add-cat-form { display: flex; gap: 6px; flex-wrap: wrap; }
.add-cat-form input[type="text"] { flex: 1; min-width: 160px; }
.add-cat-form select {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); font: inherit; font-size: 13px;
}
.ad-astra-ring-hint { margin: -6px 0 8px; text-align: center; }
/* the little circle by each item's title: tap it and it's done (off to Archived) */
.ad-astra-item { display: flex; align-items: flex-start; gap: 8px; }
.ad-astra-item > details { flex: 1; min-width: 0; }
.ad-astra-check { margin: 0; flex: none; padding-top: 1px; }
.ad-astra-check button {
  display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 2px solid var(--ok); border-radius: 50%;
  background: transparent; cursor: pointer; touch-action: manipulation; transition: background .15s;
}
.ad-astra-check button::after { content: "\2713"; font-size: 11px; font-weight: 800; line-height: 1; color: var(--ok); opacity: 0; transition: opacity .15s; }
.ad-astra-check button:hover { background: rgba(47, 93, 66, .12); }
.ad-astra-check button:hover::after { opacity: .6; }
.ad-astra-check button:active { background: var(--ok); }
.ad-astra-check button:active::after { color: #fff; opacity: 1; }
@media (max-width: 640px) { .ad-astra-check button { width: 24px; height: 24px; } }
.ad-astra-undo { margin: 0 0 0 auto; flex: none; }
.ad-astra-undo button {
  padding: 4px 12px; border: 0; border-radius: 99px; cursor: pointer;
  background: rgba(47, 93, 66, .1); color: var(--text); font: inherit; font-size: 12px; font-weight: 700;
}
.ad-astra-undo button:hover { background: var(--ok); color: #fff; }
.ad-astra-edit-cat { margin: 2px 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ad-astra-edit-cat summary {
  cursor: pointer; list-style: none; display: inline-block; font-size: 12px; font-weight: 700;
  color: var(--text); padding: 4px 10px; border-radius: 99px; background: rgba(176, 141, 87, .14);
}
.ad-astra-edit-cat summary:hover { background: rgba(176, 141, 87, .26); }
.ad-astra-edit-cat summary::-webkit-details-marker { display: none; }
.ad-astra-edit-cat[open] summary { margin-bottom: 8px; }
.ad-astra-edit-cat .add-cat-form { margin-top: 2px; }
.ad-astra-archived-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ad-astra-archived-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: 8px; }
.ad-astra-archived-row:hover { background: rgba(61, 43, 0, .05); }
.ad-astra-archived-row .cname { text-decoration: line-through; color: var(--dim); font-weight: 400; }

/* ---- Relationships: under Holly, REL_BOARDS under tabs (app/relationships.php) ---- */
.rel-banner {
  margin-bottom: 20px; padding: 34px 24px; border-radius: 18px; text-align: center;
  background: linear-gradient(165deg, rgba(47, 93, 66, .08), rgba(176, 141, 87, .12)), var(--card);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.rel-banner p {
  margin: 0; font-family: "Playfair Display", serif; font-style: italic; font-weight: 700;
  font-size: clamp(20px, 3vw, 30px); line-height: 1.4; color: var(--text);
}
.rel-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.rel-tabs button {
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 99px; cursor: pointer;
  background: var(--card); color: var(--dim); font: inherit; font-size: 13px; font-weight: 700;
}
.rel-tabs button:hover { color: var(--text); }
.rel-tabs button.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.rel-count { opacity: .75; font-size: 11px; }
.rel-add { flex-wrap: wrap; }
.rel-add select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #f5fff5; color: var(--text); font: inherit; font-size: 13px; }
.rel-tag { background: rgba(29, 54, 38, .1); }
.rel-tag-local { background: rgba(47, 93, 66, .18); }
.rel-tag-drive { background: rgba(201, 162, 39, .22); }
.rel-tag-day { background: rgba(176, 141, 87, .25); }
.rel-tag-flight { background: rgba(142, 91, 214, .18); }
/* how long / how much (effort_cost_chips() in app/stewardship.php): each a three-step scale -
   green (Very Quick / Free), light blue (Not Too Long / Not Too Much), blue (Long / Save For It) */
.ec-chip { white-space: nowrap; }
.ec-1 { background: rgba(47, 158, 79, .2); color: #1f5a33; }
.ec-2 { background: #d6eafb; color: #1f5a8a; }
.ec-3 { background: #2f6fb3; color: #fff; }

/* ---- Home Stewardship: every category open at once, each its own <details> ---- */
.stew-page.wide { max-width: 1320px; }
.stew-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.stew-cat { margin-bottom: 0; }
@media (max-width: 760px) { .stew-grid { grid-template-columns: 1fr; } }
.stew-cat summary.head { cursor: pointer; list-style: none; user-select: none; }
.stew-cat summary.head::-webkit-details-marker { display: none; }
.stew-cat summary.head::before {
  content: "\25BE"; margin-right: 2px; font-size: 11px; color: var(--dim); transition: transform .2s;
}
.stew-cat:not([open]) summary.head::before { transform: rotate(-90deg); }
.stew-ring-wrap { display: flex; justify-content: center; margin: 2px 0 12px; }
.stew-ring { width: 80px; height: 80px; }
.stew-track { fill: none; stroke: rgba(29, 54, 38, .1); stroke-width: 9; }
.stew-arc {
  fill: none; stroke: var(--ok); stroke-width: 9; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 45px 45px; transition: stroke-dasharray .4s ease;
}
.stew-pct { font-family: "Playfair Display", serif; font-size: 17px; font-weight: 700; fill: var(--text); }
.stew-list { display: flex; flex-direction: column; gap: 2px; }
.stew-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; border-radius: 8px; }
.stew-row:hover { background: rgba(29, 54, 38, .05); }
.stew-row.done .cname { text-decoration: line-through; color: var(--dim); font-weight: 400; }
.stew-check { margin: 0; display: contents; }
.stew-check input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--ok); cursor: pointer; }
.stew-row .cname { cursor: pointer; flex: 1; min-width: 80px; }
.stew-row .devour-edit { margin-left: auto; }
.stew-add { flex-wrap: wrap; }
.stew-add input[type="text"] { flex: 1 1 100%; } /* the task gets its own line; how long / how much / Add go under it */
.stew-add select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #f5fff5; color: var(--text); font: inherit; font-size: 12px; flex: 1; min-width: 110px; }

/* ---- Wealth and Education's category lists (app/wealth.php, app/education.php) ---- */
.cat-list { display: grid; gap: 8px; padding-top: 4px; }
.cat-row a {
  display: grid; grid-template-columns: 1fr 52px; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .5); text-decoration: none; color: var(--text);
  transition: background .2s;
}
.cat-row a:hover { background: rgba(255, 255, 255, .85); }
.cat-name { font-family: "Playfair Display", serif; font-weight: 700; font-size: 16px; }
.cat-name small { display: block; margin-top: 2px; font-family: inherit; font-weight: 500; font-size: 12px; color: var(--dim); font-style: normal; letter-spacing: 0; text-transform: none; }
.cat-ring { width: 52px; height: 52px; }
.cat-ring-pct { font-family: "Playfair Display", serif; font-size: 24px; font-weight: 700; fill: var(--text); }

/* ---- Script Editor: each card its own <details> - click the title to shrink or expand it ---- */
.se-cat summary.head { cursor: pointer; list-style: none; user-select: none; }
.se-cat summary.head::-webkit-details-marker { display: none; }
.se-cat summary.head::before { content: "\25BE"; margin-right: 2px; font-size: 11px; color: var(--dim); transition: transform .2s; }
.se-cat:not([open]) summary.head::before { transform: rotate(-90deg); }

/* ---- Script Editor: the Dopamine Budget ring (app/script_editor.php) ---- */
.dopamine-layout { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; padding-top: 6px; }
.dope-ring-wrap { position: sticky; top: 80px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dope-ring { width: 220px; height: 220px; }
.dope-track { fill: none; stroke: rgba(29, 54, 38, .1); stroke-width: 16; }
.dope-arc { fill: none; stroke-width: 16; stroke-linecap: butt; transform: rotate(-90deg); transform-origin: 100px 100px; transition: stroke-dasharray .4s ease, stroke-dashoffset .4s ease; }
.dope-total { font-family: "Playfair Display", serif; font-size: 32px; font-weight: 700; fill: var(--text); }
.dope-total-label { font-size: 10px; fill: var(--dim); letter-spacing: .1em; text-transform: uppercase; }
.dope-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; width: 100%; font-size: 12px; }
.dope-legend li { display: flex; align-items: center; gap: 7px; }
.dope-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.dope-legend b { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--dim); }
.dope-form { display: grid; gap: 6px; }
.dope-row { display: grid; grid-template-columns: 1fr 86px; gap: 8px; align-items: center; }
.dope-row input[type="text"] {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); font: inherit; font-size: 14px;
}
.dope-pct { display: flex; align-items: center; gap: 4px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.dope-pct input { width: 100%; border: 0; background: none; padding: 7px 0; font: inherit; font-size: 14px; color: var(--text); text-align: right; }
.dope-pct input:focus, .dope-row input[type="text"]:focus { outline: none; border-color: var(--ok); }
.dope-pct input:focus { outline: none; }
.dope-pct span { color: var(--dim); font-size: 13px; }
@media (max-width: 700px) { .dopamine-layout { grid-template-columns: 1fr; } .dope-ring-wrap { position: static; } }

/* ---- Script Editor: Flow State (app/script_editor.php flow_state_card()) ---- */
.flow-layout { display: grid; grid-template-columns: 1fr 1fr 170px; gap: 20px; align-items: start; padding-top: 6px; }
.flow-columns { display: contents; }
.flow-col { min-width: 0; }
.flow-col-title { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.flow-item-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.flow-item { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 8px; }
.flow-item:hover { background: rgba(61, 43, 0, .05); }
.flow-item-label { flex: 1; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.flow-item-stepper { display: flex; align-items: center; gap: 4px; flex: none; }
.flow-item-stepper form { margin: 0; }
.flow-item-stepper button {
  width: 20px; height: 20px; border: 0; border-radius: 6px; cursor: pointer;
  background: rgba(176, 141, 87, .16); color: var(--text); font-size: 10px; line-height: 1;
}
.flow-item-stepper button:hover { background: var(--accent); color: #fff; }
.flow-item-value { min-width: 18px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.flow-item-del { margin: 0; flex: none; }
.flow-item-del button { border: 0; background: none; cursor: pointer; color: var(--dim); font-size: 15px; line-height: 1; padding: 0 2px; }
.flow-item-del button:hover { color: var(--bad); }
.flow-ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.flow-ring { width: 150px; height: 150px; }
.flow-track { fill: none; stroke: rgba(230, 184, 0, .14); stroke-width: 14; }
.flow-arc { fill: none; stroke: #e6b800; stroke-width: 14; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 80px 80px; transition: stroke-dasharray .4s ease; }
.flow-pct { font-family: "Playfair Display", serif; font-size: 26px; font-weight: 700; fill: var(--text); }
.flow-ring-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
#flow-state .quote-banner { margin-top: 16px; padding: 14px 0 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }
@media (max-width: 700px) { .flow-layout { grid-template-columns: 1fr 1fr; } .flow-ring-wrap { grid-column: 1 / -1; } }

/* ---- Aware That I'm Aware Timer (app/script_editor.php) ---- */
.aware-layout { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; padding-top: 6px; }
.aware-ring-wrap { flex: none; }
.aware-ring { width: 180px; height: 180px; }
.aware-track { fill: none; stroke: rgba(29, 54, 38, .1); stroke-width: 14; }
.aware-arc {
  fill: none; stroke: var(--ok); stroke-width: 14; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 100px 100px;
  transition: stroke-dashoffset 1s linear;
}
.aware-arc.done { stroke: var(--gold); }
.aware-readout { font-family: "Playfair Display", serif; font-size: 30px; font-weight: 700; fill: var(--text); font-variant-numeric: tabular-nums; }
.aware-controls { display: grid; gap: 12px; }
.aware-inputs { display: flex; gap: 10px; }
.aware-inputs label { display: grid; gap: 3px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.aware-inputs input {
  width: 80px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); font: inherit; font-size: 14px;
}
.aware-buttons { display: flex; gap: 8px; }
.aware-buttons button { padding: 8px 16px; border: 0; border-radius: 8px; cursor: pointer; background: rgba(47, 93, 66, .12); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; }
.aware-buttons button:hover { background: rgba(47, 93, 66, .22); }
.aware-buttons button.go:hover { background: #258a42; }

/* ---- Daily quote banner (quote_banner() in app/layout.php) ---- */
.quote-of-day { margin: 2px 0 10px; padding: 0 2px; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 19px; line-height: 1.4; color: var(--text); }
.quote-manage summary { cursor: pointer; list-style: none; font-size: 11px; font-weight: 700; color: var(--dim); padding: 2px 4px; }
.quote-manage summary::-webkit-details-marker { display: none; }
.quote-manage[open] summary { margin-bottom: 8px; }
.quote-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; max-height: 180px; overflow-y: auto; }
.quote-list li { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; }
.quote-list li:hover { background: rgba(61, 43, 0, .05); }
.quote-list-text { flex: 1; font-size: 13px; }
.quote-del { margin: 0; }
.quote-del button { border: 0; background: none; cursor: pointer; color: var(--dim); font-size: 15px; line-height: 1; padding: 0 2px; }
.quote-del button:hover { color: var(--bad); }

/* ---- Script Editor: Daily Affirmations (affirmations_card() in app/script_editor.php) ---- */
.affirm-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px; }
.affirm-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 14px 16px; border-radius: 10px; background: rgba(176, 141, 87, .06); border: 1px solid var(--line);
}
.affirm-text {
  margin: 0; flex: 1; font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 21px; line-height: 1.45; color: var(--text);
}
.affirm-archive, .affirm-archive-actions { display: flex; gap: 6px; flex: none; margin: 0; }
.affirm-archive button, .affirm-archive-actions button {
  border: 0; border-radius: 8px; padding: 6px 12px; cursor: pointer; white-space: nowrap;
  background: rgba(61, 43, 0, .1); color: var(--text); font: inherit; font-size: 12px; font-weight: 700;
}
.affirm-archive button:hover, .affirm-archive-actions button:hover { background: var(--accent); }
.affirm-archived { margin-top: 4px; }
.affirm-archived summary { cursor: pointer; list-style: none; font-size: 11px; font-weight: 700; color: var(--dim); padding: 2px 4px; }
.affirm-archived summary::-webkit-details-marker { display: none; }
.affirm-archived[open] summary { margin-bottom: 8px; }
.affirm-archived .affirm-text { font-size: 16px; color: var(--dim); }

/* ---- MVP Phone View / Desktop View (app/mvp.php) ---- */

/* the same rules, twice: once for the manual toggle (any width), once automatically under 640px */
.page-mvp.mvp-phone-view .cname { font-size: 16px; }
.page-mvp.mvp-phone-view .mvp-day-tablist { flex-wrap: wrap; }
.page-mvp.mvp-phone-view .mvp-day-tab { padding: 10px 16px; font-size: 14px; }
.page-mvp.mvp-phone-view .go, .page-mvp.mvp-phone-view .md-foot button, .page-mvp.mvp-phone-view .mvp-add-toggle summary { padding: 11px 18px; font-size: 14px; }
.page-mvp.mvp-phone-view .mvp-complete { padding: 9px 16px; font-size: 14px; }
.page-mvp.mvp-phone-view .client-del button, .page-mvp.mvp-phone-view .mvp-stats-link { padding: 4px 2px; font-size: 13px; }

@media (max-width: 640px) {
  .page-mvp .cname { font-size: 16px; }
  .page-mvp .mvp-day-tablist { flex-wrap: wrap; }
  .page-mvp .mvp-day-tab { padding: 10px 16px; font-size: 14px; }
  .page-mvp .go, .page-mvp .md-foot button, .page-mvp .mvp-add-toggle summary { padding: 11px 18px; font-size: 14px; }
  .page-mvp .mvp-complete { padding: 9px 16px; font-size: 14px; }
  .page-mvp .client-del button, .page-mvp .mvp-stats-link { padding: 4px 2px; font-size: 13px; }
}

/* ---- pain scale, logged with Complete Session (app/mvp.php) ---- */
.mvp-pain-box { display: grid; gap: 8px; padding: 10px; margin-bottom: 8px; border-radius: 10px; background: rgba(140, 58, 46, .06); }
.mvp-pain-label { display: grid; gap: 4px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.mvp-pain-row { display: flex; align-items: center; gap: 10px; }
.mvp-pain-slider { flex: 1; accent-color: var(--bad); }
.mvp-pain-row output { font-family: "Playfair Display", serif; font-size: 16px; font-weight: 700; color: var(--bad); min-width: 18px; text-align: right; }
.mvp-pain-note {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text);
  font: inherit; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 500;
}

/* ---- Budget: income and spending by area (app/budget.php) ---- */
.budget-page.wide { max-width: 1400px; }
.budget-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.budget-cat summary.head { justify-content: space-between; }
.budget-net { font-family: "Playfair Display", serif; font-weight: 700; font-size: 16px; color: var(--ok); }
.budget-net.neg { color: var(--bad); }
.budget-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.budget-row { padding: 8px 6px; border-radius: 8px; }
.budget-row:hover { background: rgba(29, 54, 38, .05); }
.budget-row-main { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.budget-income { color: var(--ok); font-weight: 700; font-variant-numeric: tabular-nums; }
.budget-expense { color: var(--bad); font-weight: 700; font-variant-numeric: tabular-nums; }
.budget-row-meta { display: flex; align-items: center; gap: 10px; margin-top: 2px; font-size: 12px; color: var(--dim); }
.budget-file-link { color: var(--dim); text-decoration: underline; }
.budget-note { margin: 4px 0 0; padding-left: 2px; font-size: 13px; color: var(--dim); }
.budget-del { margin-left: auto; }
.budget-del button { border: 0; background: none; cursor: pointer; color: var(--dim); font-size: 15px; line-height: 1; padding: 0 2px; }
.budget-del button:hover { color: var(--bad); }
.budget-add { display: grid; gap: 6px; }
.budget-add input[type="text"] {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); font: inherit; font-size: 14px;
}
.budget-add-row { display: flex; gap: 6px; flex-wrap: wrap; }
.budget-add-row select, .budget-add-row input[type="number"], .budget-add-row input[type="date"] {
  flex: 1; min-width: 90px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); font: inherit; font-size: 13px;
}
.budget-file { display: grid; gap: 2px; font-size: 11px; color: var(--dim); text-transform: none; letter-spacing: 0; font-weight: 600; }
.budget-file input { font-size: 12px; }
.budget-add button { padding: 8px; border: 0; border-radius: 8px; cursor: pointer; background: rgba(47, 93, 66, .12); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; }
.budget-add button:hover { background: var(--ok); color: #fff; }

/* ---- InBody scans (app/scans.php) ---- */
.today { max-width: 780px; margin: 16px auto -6px; padding: 0 4px; font-size: 13px; color: var(--dim); }
.today a { color: inherit; font-weight: 700; }
.scans-link { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--dim); text-decoration: none; white-space: nowrap; }
.scans-link:hover { color: var(--text); text-decoration: underline; }
main > .card { margin-bottom: 14px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; padding: 0 4px; }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: rgba(61, 43, 0, .05); }
.tile b { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tile b small { font-size: 13px; font-weight: 600; color: var(--dim); }
.tile-note { font-size: 12px; color: var(--dim); line-height: 1.5; }
.better { color: #1d7a3a; font-weight: 700; }
.worse { color: #b0321f; font-weight: 700; }
.better::before { content: "\25B2\00a0"; font-size: .8em; }
.worse::before { content: "\25BC\00a0"; font-size: .8em; }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 14px; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .grid { stroke: rgba(61, 43, 0, .12); stroke-width: 1; }
.chart .ytick { font-size: 9.5px; fill: var(--dim); text-anchor: end; font-variant-numeric: tabular-nums; }
.chart .xtick { font-size: 9.5px; fill: var(--dim); text-anchor: middle; }
.chart .line { fill: none; stroke: #1f6fb2; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { fill: #1f6fb2; stroke: var(--card); stroke-width: 2; }
.chart .dot.hollow { fill: var(--card); stroke: #1f6fb2; stroke-width: 1.5; stroke-dasharray: 2 1.5; }
.chart .hit { fill: transparent; cursor: default; }
.chart .pt:hover .dot { r: 6; }
.scroll { overflow-x: auto; border-top: 1px solid var(--line); }
.scans { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.scans th { position: sticky; top: 0; padding: 8px 6px; text-align: right; font-size: 11px; font-weight: 800; color: var(--dim); white-space: nowrap; border-bottom: 1px solid var(--line); }
.scans th small { display: block; font-weight: 500; }
.scans th:first-child, .scans td.d { text-align: left; }
.scans td { padding: 7px 6px; text-align: right; vertical-align: top; border-bottom: 1px solid var(--line); white-space: nowrap; }
.scans td small { display: block; font-size: 10.5px; color: var(--dim); }
.scans td small.better::before, .scans td small.worse::before { content: none; }
.scans td.d { font-weight: 700; }
.scans .note { max-width: 220px; white-space: normal; font-size: 11.5px; font-weight: 400; color: var(--dim); }
.scans tr.missing td { background: rgba(61, 43, 0, .03); }
.scans tr:hover td { background: rgba(61, 43, 0, .05); }
.scans form { margin: 0; }
.scans .del { opacity: .5; }
.scans tr:hover .del { opacity: 1; }
#add summary { cursor: pointer; list-style: none; }
#add summary::-webkit-details-marker { display: none; }
#add summary .title::after { content: " \25B8"; }
#add details[open] summary .title::after { content: " \25BE"; }
.scan-add { padding-left: 4px; }
.scan-add .fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.scan-add small { font-weight: 500; text-transform: none; letter-spacing: 0; }

/* ==== Home: the banner across the top left, the lists under it, KTLO down the right ==== */
.home {
  display: grid; gap: 16px 18px; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  grid-template-areas: "focus ktlo" "lists ktlo";
}
.home > .do-now { grid-area: focus; }
.home-lists { grid-area: lists; min-width: 0; }
.ktlo-col { grid-area: ktlo; display: grid; gap: 14px; align-items: start; min-width: 0; }
/* no banner: the lists start at the top */
.home:has(> .do-now[hidden]) { grid-template-areas: "lists ktlo" "lists ktlo"; grid-template-rows: auto 1fr; }

/* ==== "Do this now": the day's #1 ==== */
.do-now {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 5px;
  padding: 12px 18px 13px; border-radius: 20px; color: #3d2b00;
  background:
    radial-gradient(500px 160px at 0% 0%, rgba(255, 255, 255, .7), transparent 60%),
    linear-gradient(120deg, #ffe680 0%, #ffd23f 40%, #ffb300 100%);
  border: 2px solid #fff3b0;
  box-shadow: 0 0 0 6px rgba(255, 196, 0, .22), 0 22px 60px rgba(160, 100, 0, .35), 0 0 60px rgba(255, 210, 63, .55);
  animation: fc-glow 2.6s ease-in-out infinite;
}
.do-now[hidden] { display: none; }
.do-now::after {   /* a sheen that sweeps across now and then */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  background-size: 250% 100%; animation: fc-sheen 5s ease-in-out infinite;
}
.do-now.red {
  color: #fff; border-color: #ffc2b8;
  background: radial-gradient(500px 160px at 0% 0%, rgba(255, 255, 255, .3), transparent 60%), linear-gradient(120deg, #ff8a65 0%, #ff5a46 45%, #e0245e 100%);
  box-shadow: 0 0 0 6px rgba(255, 90, 70, .22), 0 22px 60px rgba(160, 30, 20, .35), 0 0 60px rgba(255, 90, 70, .5);
  animation-name: fc-glow-red;
}
@keyframes fc-glow { 50% { box-shadow: 0 0 0 11px rgba(255, 196, 0, .1), 0 22px 60px rgba(160, 100, 0, .35), 0 0 95px rgba(255, 210, 63, .8); } }
@keyframes fc-glow-red { 50% { box-shadow: 0 0 0 11px rgba(255, 90, 70, .1), 0 22px 60px rgba(160, 30, 20, .35), 0 0 95px rgba(255, 90, 70, .75); } }
@keyframes fc-sheen { 0%, 60% { background-position: 150% 0; } 100% { background-position: -60% 0; } }
.fc-eye { position: relative; display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: #7a4200; }
.do-now.red .fc-eye { color: #fff; }
.fc-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: fc-ping 1.6s ease-out infinite; }
@keyframes fc-ping { 0% { box-shadow: 0 0 0 0 rgba(122, 66, 0, .6); } 100% { box-shadow: 0 0 0 12px rgba(122, 66, 0, 0); } }
.fc-row { position: relative; display: flex; align-items: center; gap: 16px; }
.fc-title {
  flex: 1; min-width: 0; font-size: clamp(22px, 2.3vw, 34px); font-weight: 900; line-height: 1.1; letter-spacing: -.02em;
  text-wrap: balance; overflow-wrap: anywhere; text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.do-now.red .fc-title { text-shadow: 0 2px 12px rgba(120, 0, 0, .35); }
.fc-go {
  position: relative; flex: none; border: 0; border-radius: 12px; padding: 10px 18px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 900; letter-spacing: .02em;
  background: linear-gradient(180deg, #3ccf62, var(--ok)); color: #fff;
  box-shadow: 0 6px 0 #1f7a3a, 0 12px 24px rgba(18, 92, 38, .4); transition: transform .12s, box-shadow .12s;
}
.fc-go:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #1f7a3a, 0 16px 28px rgba(18, 92, 38, .45); }
.fc-go:active { transform: translateY(4px); box-shadow: 0 2px 0 #1f7a3a, 0 6px 12px rgba(18, 92, 38, .4); }
.do-now.red .fc-go { background: #fff; color: #c0182f; box-shadow: 0 6px 0 #ffc2b8, 0 12px 24px rgba(120, 0, 0, .35); }
.fc-sub { position: relative; font-size: 13.5px; font-weight: 750; }
.fc-note { position: relative; font-size: 12.5px; line-height: 1.4; opacity: .8; white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fc-next { position: relative; font-size: 12.5px; opacity: .7; }
@media (max-width: 600px) { .fc-row { flex-direction: column; align-items: stretch; gap: 12px; } .do-now { padding: 16px; } }

/* ==== the lists: two stacks ==== */
.lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.ls-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ls-card {
  --hue: var(--ok);
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, #f8fff8 0%, var(--card) 45%, var(--card2) 100%);
  border: 1px solid rgba(255, 255, 255, .75); border-radius: 18px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .9);
  padding: 16px 10px 10px; transition: border-color .15s, box-shadow .25s, transform .25s;
}
/* each list its own colour: a glowing bar along the top and a dot by the title */
.ls-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, var(--hue), color-mix(in srgb, var(--hue) 45%, #fff)); box-shadow: 0 0 14px var(--hue); }
.ls-top { --hue: var(--gold); }
.ls-today { --hue: var(--ok2); }
.ls-tomorrow { --hue: var(--blue); }
.ls-parking { --hue: var(--violet); }
.ls-waiting { --hue: var(--accent); }
.ls-card.over { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(46, 158, 79, .35), var(--shadow); transform: scale(1.01); }
.ls-head { display: flex; align-items: center; gap: 8px; padding: 0 6px 10px; cursor: pointer; user-select: none; }
.ls-title { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); line-height: 1.35; }
.ls-head .ls-title::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; vertical-align: 0;
  background: var(--hue); box-shadow: 0 0 8px var(--hue); }
.ls-n { flex: none; min-width: 22px; padding: 1px 7px; border-radius: 99px; text-align: center; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: #fff; background: var(--hue); }
.ls-n:empty { display: none; }
.ls-head::after, .ls-phead::after { content: "\25BE"; flex: none; font-size: 11px; color: rgba(61, 43, 0, .4); align-self: center; }
.ls-card.folded .ls-head::after, .ls-card.folded .ls-phead::after { content: "\25B8"; }
.ls-card.folded > :not(.ls-head):not(.ls-phead) { display: none !important; }
.ls-card.folded .ls-head, .ls-card.folded .ls-phead { padding-bottom: 0; }
.ls-up { flex: none; border: 0; border-radius: 99px; padding: 3px 10px; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 11px; font-weight: 800; color: #fff; background: var(--blue); box-shadow: 0 3px 10px rgba(30, 136, 229, .35); }
.ls-up:hover { filter: brightness(1.1); transform: translateY(-1px); }

.ls-list { list-style: none; margin: 0; padding: 4px 0 0; min-height: 8px; border-top: 1px solid var(--line); }
/* Parking lot has no cap: its box grows to show every item (fold it from its title to tuck it away) */
.ls-card[data-list="waiting"] .ls-list {
  max-height: 440px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(61, 43, 0, .25) transparent; }
.ls-empty { padding: 10px 8px; font-size: 13px; color: rgba(61, 43, 0, .45); font-style: italic; }
.ls-row {
  position: relative; display: flex; align-items: flex-start; gap: 8px; padding: 7px 6px; border-radius: 11px;
  user-select: none; touch-action: none; cursor: grab; outline: none; transition: background .15s, box-shadow .15s;
}
.ls-row:hover, .ls-row:focus-visible { background: rgba(255, 255, 255, .7); box-shadow: 0 2px 10px rgba(18, 92, 38, .1); }
.ls-row:focus-visible { box-shadow: inset 0 0 0 2px rgba(46, 158, 79, .5); }
/* a phone: a vertical swipe scrolls; start a drag sideways */
@media (pointer: coarse) { .ls-row { touch-action: pan-y; } }
.ls-chk {
  flex: none; margin-top: -1px; width: 21px; height: 21px; padding: 0; cursor: pointer;
  display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(61, 43, 0, .4);
  background: #fff; color: #fff; transition: background .2s, border-color .2s, box-shadow .2s;
}
.ls-chk svg { width: 12px; height: 12px; opacity: 0; transform: scale(.4); transition: opacity .15s, transform .3s cubic-bezier(.3, 1.8, .5, 1); }
.ls-row.done .ls-chk { background: linear-gradient(180deg, var(--ok2), var(--ok)); border-color: var(--ok); box-shadow: 0 0 10px rgba(46, 158, 79, .55); animation: md-pop .4s cubic-bezier(.3, 1.8, .5, 1); }
.ls-row.done .ls-chk svg { opacity: 1; transform: scale(1); }
.ls-row:not(.done) .ls-chk:hover { border-color: var(--ok); box-shadow: 0 0 0 4px rgba(46, 158, 79, .18); }
.ls-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ls-name { font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.ls-row.done .ls-name { color: var(--dim); text-decoration: line-through; text-decoration-color: rgba(61, 43, 0, .35); }
.ls-name input { width: 100%; padding: 4px 7px; border: 1.5px solid var(--ok); border-radius: 7px; background: #fff; color: var(--text); font: inherit; }
.ls-rank { flex: none; min-width: 18px; line-height: 19px; font-size: 13px; font-weight: 900; color: var(--dim); text-align: right; font-variant-numeric: tabular-nums; }
.ls-row.done .ls-rank { opacity: .5; }
.ls-note { font-size: 12.5px; line-height: 1.4; color: var(--dim); white-space: pre-wrap; overflow-wrap: anywhere; cursor: text;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ls-note.open { display: block; overflow: visible; cursor: auto; }
.ls-note textarea { display: block; width: 100%; min-height: 54px; resize: vertical; padding: 5px 7px; border: 1.5px solid var(--ok); border-radius: 7px;
  background: #fff; color: var(--text); font: inherit; font-size: 12.5px; line-height: 1.4; }
.ls-tools { position: absolute; top: 4px; right: 4px; display: flex; gap: 1px; padding: 1px; border-radius: 8px;
  background: #fff; box-shadow: 0 2px 10px rgba(18, 92, 38, .2); opacity: 0; pointer-events: none; transition: opacity .15s; }
.ls-row:hover .ls-tools, .ls-row:focus-within .ls-tools { opacity: 1; pointer-events: auto; }
@media (hover: none) { .ls-tools { position: static; opacity: 1; pointer-events: auto; background: none; box-shadow: none; } }
.ls-nb, .ls-del { flex: none; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--dim); cursor: pointer; font-size: 12px; }
.ls-nb svg { width: 13px; height: 13px; }
.ls-nb:hover { background: rgba(46, 158, 79, .15); color: var(--ok); }
.ls-nb.has { color: var(--ok); }
.ls-del:hover { background: rgba(210, 59, 42, .12); color: var(--bad); }
.ls-ph { margin: 2px 0; border: 2px dashed rgba(46, 158, 79, .6); border-radius: 11px; background: rgba(46, 158, 79, .1); }
.ls-drag { position: fixed; z-index: 300; pointer-events: none; background: #fff; border-radius: 11px;
  box-shadow: 0 18px 40px rgba(18, 92, 38, .4), 0 0 0 2px var(--ok); transform: rotate(1.5deg); cursor: grabbing; }
body.ls-dragging, body.ls-dragging * { cursor: grabbing !important; }
.ls-add { display: block; width: 100%; margin-top: 6px; padding: 8px 10px; border: 1.5px solid transparent; border-radius: 10px;
  background: rgba(255, 255, 255, .75); color: var(--text); font: inherit; font-size: 13.5px; box-shadow: inset 0 1px 3px rgba(61, 43, 0, .1); }
.ls-add::placeholder { color: rgba(61, 43, 0, .45); }
.ls-add:focus { outline: none; border-color: var(--hue); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--hue) 20%, transparent); }
.ls-addw { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.ls-addw .ls-add { margin-top: 0; }
.ls-foot { display: flex; justify-content: flex-end; padding: 4px 4px 0; }
.ls-clear { border: 0; background: none; color: var(--dim); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; padding: 2px 4px; }
.ls-clear:hover { color: var(--text); text-decoration: underline; }
.ls-err { grid-column: 1 / -1; margin: 0; padding: 8px 12px; border-radius: 10px; background: #fff3f0; color: var(--bad); font-size: 13px; font-weight: 600; }

/* High impact: 1 to 3 the focus, the rest on deck */
.ls-row.focus .ls-name { font-weight: 750; }
.ls-row.focus .ls-rank { min-width: 21px; height: 21px; line-height: 21px; margin-top: -1px; border-radius: 50%; text-align: center; font-size: 12px;
  color: #3d2b00; background: linear-gradient(180deg, var(--gold2), var(--gold)); box-shadow: 0 0 10px rgba(255, 179, 0, .6); }
.ls-row.focus.first { background: linear-gradient(90deg, rgba(255, 210, 63, .35), rgba(255, 210, 63, .06) 75%); }
.ls-row.focus.first .ls-name { font-size: 15.5px; }
.ls-row.deck { opacity: .6; }
.ls-row.deck:hover { opacity: 1; }
.ls-deck { padding: 10px 6px 3px; margin-top: 4px; border-top: 1px dashed var(--line);
  font-size: 10.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.ls-age { align-self: flex-start; font-size: 10.5px; font-weight: 750; color: var(--dim); }
.ls-age.amber { color: #b85f00; }
.ls-age.red { color: var(--bad); }

/* Today: the promise */
.ls-card.promise.late { box-shadow: 0 0 0 2px rgba(229, 72, 77, .45), var(--shadow); }
.ls-card.promise.won {
  background: linear-gradient(165deg, #fffbe0 0%, #fff1a8 50%, #ffe27a 100%);
  box-shadow: 0 0 0 3px rgba(255, 196, 0, .55), 0 0 50px rgba(255, 196, 0, .55), var(--shadow);
}
.ls-card.promise.won { --hue: var(--gold); }
.ls-phead { display: flex; gap: 12px; align-items: center; padding: 0 4px 10px; cursor: pointer; user-select: none; }
.ls-phead .ls-title { color: var(--text); font-size: 12.5px; }
.ls-ring { flex: none; position: relative; width: 52px; height: 52px; }
.ls-ring svg { display: block; width: 52px; height: 52px; transform: rotate(-90deg); filter: drop-shadow(0 0 6px rgba(46, 158, 79, .45)); }
.ls-ring .trk { stroke: rgba(61, 43, 0, .1); }
.ls-ring .bar { stroke: var(--ok2); transition: stroke-dashoffset .6s cubic-bezier(.3, 1.4, .5, 1), stroke .4s; }
.ls-card.won .ls-ring .bar { stroke: var(--gold); }
.ls-card.won .ls-ring svg { filter: drop-shadow(0 0 8px rgba(255, 179, 0, .8)); }
.ls-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; }
.ls-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.ls-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; white-space: nowrap;
  background: rgba(61, 43, 0, .07); color: var(--dim); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ls-chip.hot { background: linear-gradient(90deg, #ffb300, #ff7a00); color: #fff; box-shadow: 0 0 10px rgba(255, 122, 0, .45); }
.ls-chip.amber { background: rgba(255, 159, 28, .25); color: #8a4b00; }
.ls-chip.red { background: rgba(229, 72, 77, .18); color: #b0141e; animation: ls-pulse 2s ease-in-out infinite; }
.ls-chip.good { background: linear-gradient(90deg, var(--ok2), var(--ok)); color: #fff; box-shadow: 0 0 10px rgba(46, 158, 79, .45); }
@keyframes ls-pulse { 50% { opacity: .6; } }
.ls-late { align-self: flex-start; padding: 1px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: #e5484d; animation: ls-pulse 1.6s ease-in-out infinite; }
.ls-row.carried { background: rgba(229, 72, 77, .1); box-shadow: inset 3px 0 0 #e5484d; }
/* Today/Tomorrow: how long an item will take - two tiny up/down steppers (hours, 5-minute steps),
   tap to nudge once, hold to race (public/lists.js). Muted until something's actually set. */
.ls-size { flex: none; align-self: center; display: flex; align-items: center; gap: 4px; margin: 0 2px; }
.ls-size-unit {
  display: flex; align-items: center; gap: 1px; padding: 2px 3px; border: 1px solid var(--line); border-radius: 8px;
  background: rgba(61, 43, 0, .05); color: var(--dim); user-select: none; -webkit-user-select: none;
}
.ls-size.set .ls-size-unit { background: rgba(176, 141, 87, .18); color: #7a5a1e; border-color: transparent; }
.ls-size-unit b { font-size: 11px; font-weight: 700; min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.ls-size-arrow {
  width: 15px; height: 15px; border: 0; border-radius: 4px; cursor: pointer; padding: 0;
  background: none; color: inherit; font-size: 8px; line-height: 1; touch-action: manipulation;
}
.ls-size-arrow:hover { background: rgba(61, 43, 0, .12); }
.ls-size-arrow:active { background: var(--ok); color: #fff; }
.ls-row.hi .ls-size-unit, .ls-row.carried .ls-size-unit { background: rgba(255, 255, 255, .5); }
/* a High impact item on Today / Tomorrow: lit gold, with its rank */
.ls-row.hi { background: linear-gradient(90deg, rgba(255, 210, 63, .5), rgba(255, 210, 63, .1) 75%); box-shadow: inset 3px 0 0 var(--gold), 0 0 16px rgba(255, 196, 0, .25); }
.ls-row.hi:hover { background: linear-gradient(90deg, rgba(255, 210, 63, .65), rgba(255, 210, 63, .18) 75%); }
.ls-row.hi .ls-name { font-weight: 800; }
.ls-row.hi.done { background: none; box-shadow: inset 3px 0 0 rgba(255, 179, 0, .4); }
.ls-hi { align-self: flex-start; padding: 1px 8px; border-radius: 99px; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  color: #3d2b00; background: linear-gradient(180deg, var(--gold2), var(--gold)); box-shadow: 0 0 8px rgba(255, 179, 0, .5); }
.ls-row.hi.done .ls-hi { opacity: .5; }

/* Waiting on: who, By person / By thing */
.ls-seg { display: flex; gap: 2px; margin: 0 4px 10px; padding: 3px; border-radius: 10px; background: rgba(61, 43, 0, .08); }
.ls-seg button { flex: 1; border: 0; border-radius: 8px; padding: 5px 8px; background: none; color: var(--dim); font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; }
.ls-seg button:hover { color: var(--text); }
.ls-seg button.on { background: #fff; color: var(--text); box-shadow: 0 1px 4px rgba(18, 92, 38, .2); }
.ls-grp { display: flex; align-items: center; gap: 8px; padding: 12px 6px 5px; border-radius: 8px; cursor: pointer; user-select: none; font-size: 13px; font-weight: 800; }
.ls-grp:first-child { padding-top: 4px; }
.ls-grp:hover { background: rgba(255, 255, 255, .5); }
.ls-grp .ls-av { width: 22px; height: 22px; font-size: 11px; }
.ls-grp .cv { flex: none; width: 10px; font-size: 10px; color: var(--dim); }
.ls-grp .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-grp .nm.none, .ls-grp.shut .nm { color: var(--dim); }
.ls-grp .n { flex: none; font-size: 11px; font-weight: 700; color: var(--dim); font-variant-numeric: tabular-nums; }
.ls-row.ing { margin-left: 10px; border-left: 3px solid var(--pc, rgba(61, 43, 0, .2)); border-radius: 0 11px 11px 0; }
.ls-av { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  font-size: 10px; font-weight: 900; text-transform: uppercase; color: #3d2b00; box-shadow: 0 1px 3px rgba(61, 43, 0, .25); }
.ls-whos { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ls-whos .also { font-size: 11px; color: var(--dim); }
.ls-who { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 8px 2px 2px; border: 0; border-radius: 99px; cursor: pointer;
  background: #fff; color: var(--text); font: inherit; font-size: 12px; font-weight: 700; box-shadow: 0 1px 3px rgba(61, 43, 0, .15); }
.ls-who:hover { box-shadow: 0 0 0 2px var(--accent); }
.ls-who.none { padding: 2px 8px; color: var(--dim); font-weight: 600; }
.ls-who span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-whoin { width: 100%; padding: 4px 7px; border: 1.5px solid var(--ok); border-radius: 7px; background: #fff; color: var(--text); font: inherit; font-size: 12.5px; }
.ls-wage { flex: none; align-self: flex-start; margin-top: 1px; padding: 1px 8px; border-radius: 99px; white-space: nowrap;
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; background: rgba(61, 43, 0, .08); color: var(--dim); }
.ls-wage.amber { background: rgba(255, 159, 28, .3); color: #8a4b00; }
.ls-wage.red { background: #e5484d; color: #fff; box-shadow: 0 0 8px rgba(229, 72, 77, .5); }
.ls-row:hover .ls-wage, .ls-row:focus-within .ls-wage { visibility: hidden; }
@media (hover: none) { .ls-row:hover .ls-wage { visibility: visible; } }

/* ==== Get Shit Done, the game: the scoreboard on Today (only in Get Shit Done) ==== */
.gm {
  display: none; margin: 0 4px 12px; padding: 11px 13px 10px; border-radius: 15px; color: #fff;
  background: radial-gradient(300px 120px at 100% 0%, rgba(255, 255, 255, .18), transparent 60%), linear-gradient(135deg, #1f8a42, #146b31 70%, #0f5a29);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 26px rgba(18, 92, 38, .35);
}
body.gsd .gm { display: block; }
.gm-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.gm-lv { font-size: 14px; font-weight: 900; letter-spacing: .04em; color: #fff; text-shadow: 0 0 12px var(--gm), 0 0 2px var(--gm); }
.gm-combo { padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 900; color: #3d2b00; background: var(--gold2); box-shadow: 0 0 12px rgba(255, 210, 63, .8);
  animation: gm-pulse .9s ease-in-out infinite; }
@keyframes gm-pulse { 50% { transform: scale(1.08); } }
.gm-sc { margin-left: auto; font-size: 12px; color: rgba(255, 255, 255, .75); }
.gm-sc b { font-size: 24px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 14px rgba(255, 255, 255, .45); }
.gm-bar { position: relative; height: 18px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, .14); box-shadow: inset 0 2px 4px rgba(0, 40, 10, .35); }
.gm-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, var(--gm), color-mix(in srgb, var(--gm) 40%, #fff));
  box-shadow: 0 0 16px var(--gm); transition: width .6s cubic-bezier(.3, 1.4, .5, 1); }
.gm-bar i::after { content: ""; position: absolute; inset: 0; border-radius: 99px; background-size: 200% 100%;
  background-image: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); animation: gm-shine 2.2s linear infinite; }
@keyframes gm-shine { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.gm-bar span { position: relative; display: block; text-align: center; font-size: 11px; font-weight: 900; line-height: 18px; color: #fff; text-shadow: 0 1px 3px rgba(0, 40, 10, .7); }
.gm-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; font-size: 11px; color: rgba(255, 255, 255, .78); }
.gm-pop {
  position: fixed; z-index: 330; transform: translate(-50%, 0); pointer-events: none; white-space: nowrap;
  font-size: 20px; font-weight: 900; color: var(--gold2);
  text-shadow: 0 0 12px rgba(255, 179, 0, .9), 0 2px 0 #7a4200, 0 3px 6px rgba(61, 43, 0, .5);
  animation: gm-float 1.1s ease-out forwards;
}
@keyframes gm-float {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(.6); }
  20% { opacity: 1; transform: translate(-50%, -6px) scale(1.25); }
  100% { opacity: 0; transform: translate(-50%, -52px) scale(1); }
}

/* ==== the celebration: LET'S FUCKING GO BABY (flashing black/white, inverted on the beat) ==== */
.hype {
  position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  overflow: hidden; padding: 40px; cursor: pointer; text-align: center;
  background: #000; color: #fff;
  animation: hy-in .12s ease-out, hy-out .5s ease-in 4.1s forwards, hy-flash .476s infinite;
}
.hype .hy-beam {
  position: absolute; bottom: -10vh; left: 50%; width: 6px; height: 150vh; transform-origin: 50% 100%; pointer-events: none; opacity: .85;
  mix-blend-mode: screen; filter: blur(1.5px) drop-shadow(0 0 14px currentColor);
  background: linear-gradient(0deg, currentColor, transparent 85%); animation: hy-sweep 1.9s ease-in-out infinite alternate;
}
.hype .hy-beam:nth-child(3n) { color: #ff2bd6; }
.hype .hy-beam:nth-child(3n+1) { color: #29f0ff; }
.hype .hy-beam:nth-child(3n+2) { color: #ffe45e; }
.hy-pic { position: relative; width: clamp(180px, 20vw, 320px); height: clamp(180px, 20vw, 320px); object-fit: cover; border-radius: 50%;
  border: 6px solid #fff; box-shadow: 0 0 0 6px #ff2bd6, 0 0 60px 10px rgba(41, 240, 255, .6), 0 20px 50px rgba(0, 50, 20, .5);
  animation: hy-slam .5s cubic-bezier(.2, 1.6, .4, 1) both, hy-bounce .476s ease-out .5s infinite; }
@keyframes hy-bounce { 0% { transform: scale(1.1) rotate(3deg); } 45% { transform: scale(1) rotate(-2deg); } 100% { transform: scale(1) rotate(-2deg); } }
.hy-eye { position: relative; font-size: clamp(16px, 1.6vw, 24px); font-weight: 900; letter-spacing: .3em; text-transform: uppercase; color: inherit;
  text-shadow: 0 0 18px currentColor; animation: hy-thump .476s ease-out infinite; }
.hy-big {
  position: relative; margin: 0; font-size: clamp(64px, 10.5vw, 210px); font-weight: 900; font-style: italic; line-height: .86; letter-spacing: -.04em;
  text-transform: uppercase; color: inherit;
  filter: drop-shadow(0 0 30px currentColor);
  animation: hy-slam .45s cubic-bezier(.2, 1.6, .4, 1) both, hy-thump .476s ease-out .45s infinite, hy-shake .476s linear .45s infinite;
}
.hy-baby { position: relative; display: block; font-size: .62em; letter-spacing: .02em; }
.hy-what { position: relative; max-width: 1100px; font-size: clamp(22px, 2.4vw, 38px); font-weight: 800; line-height: 1.15; text-wrap: balance; color: inherit; animation: hy-rise .5s ease-out .35s both; }
.hy-what b { color: inherit; text-decoration: underline; }
.hy-next { position: relative; font-size: clamp(14px, 1.2vw, 18px); font-weight: 700; color: inherit; opacity: .8; animation: hy-rise .5s ease-out .6s both; }
.hy-snd { position: absolute; top: 18px; right: 22px; z-index: 2; padding: 8px 14px; border: 0; border-radius: 99px; cursor: pointer;
  background: rgba(128, 128, 128, .35); color: inherit; font: inherit; font-size: 13px; font-weight: 800; }
.hy-snd:hover { background: rgba(128, 128, 128, .5); }
.hy-tap { position: absolute; bottom: 20px; left: 0; right: 0; font-size: 12px; color: inherit; opacity: .6; }
@keyframes hy-in { from { opacity: 0; } }
@keyframes hy-out { to { opacity: 0; visibility: hidden; } }
@keyframes hy-flash { 0%, 49.9% { background: #000; color: #fff; } 50%, 100% { background: #fff; color: #000; } }
@keyframes hy-sweep { from { transform: translateX(-50%) rotate(var(--a0)); } to { transform: translateX(-50%) rotate(var(--a1)); } }
@keyframes hy-slam { from { transform: scale(3.2) rotate(-6deg); opacity: 0; } to { transform: scale(1) rotate(-3deg); opacity: 1; } }
@keyframes hy-thump { 0% { transform: scale(1.07) rotate(-3deg); } 40% { transform: scale(1) rotate(-3deg); } 100% { transform: scale(1) rotate(-3deg); } }
@keyframes hy-shake { 0%, 100% { translate: 0 0; } 10% { translate: -5px 3px; } 20% { translate: 4px -3px; } 30% { translate: -2px 2px; } 40% { translate: 0 0; } }
@keyframes hy-rise { from { opacity: 0; transform: translateY(24px); } }

/* ==== Get Shit Done: the banner (when it shows), then Today, the Parking lot and KTLO · what's left, three equal columns ==== */
body.gsd .home { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "focus focus" "lists ktlo"; }
body.gsd .home:has(> .do-now[hidden]) { grid-template-areas: "lists ktlo"; grid-template-rows: auto; }
body.gsd .ls-top, body.gsd .ls-waiting, body.gsd .ls-tomorrow { display: none !important; }
body.gsd .md-tabs, body.gsd .ktlo .myday:not(#ktlo-left) { display: none !important; }
body.gsd .ktlo #ktlo-left { display: block !important; }
/* one type size across the three columns */
body.gsd .ls-card, body.gsd #ktlo-left { padding: 18px 14px 12px; }
body.gsd .ls-name, body.gsd #ktlo-left .md-name { font-size: 16px; line-height: 1.35; }
body.gsd .ls-row, body.gsd #ktlo-left .md-row { padding: 9px 8px; }
body.gsd .ls-chk, body.gsd #ktlo-left .md-chk { width: 24px; height: 24px; }
body.gsd #ktlo-left .kn-sec, body.gsd .ls-head .ls-title { font-size: 11.5px; }
body.gsd .ls-add { font-size: 14.5px; padding: 9px 11px; }
body.gsd #ktlo-left .md-msg { font-size: 17px; }
body.gsd .ls-today .ls-ring, body.gsd .ls-today .ls-ring svg { width: 60px; height: 60px; }
body.gsd .ls-today .ls-phead .ls-title { font-size: 14px; }
body.gsd .ls-today { box-shadow: 0 0 0 3px rgba(67, 196, 99, .45), 0 0 50px rgba(67, 196, 99, .35), var(--shadow); }

/* ==== narrower screens ==== */
@media (max-width: 1250px) {
  .lists { grid-template-columns: minmax(0, 1fr); }
  body.gsd .lists { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .home, body.gsd .home, .home:has(> .do-now[hidden]), body.gsd .home:has(> .do-now[hidden]) {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "focus" "lists" "ktlo"; grid-template-rows: none;
  }
  body.gsd .lists { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .do-now, .do-now::after, .fc-dot, .heart, .ls-chip.red, .ls-late, .gm-bar i::after, .gm-combo, .gm-pop { animation: none !important; }
  .hype .hy-beam { display: none; }
  .hy-big, .hy-eye, .hy-pic { animation: none; }
  .hype { animation: hy-in .12s ease-out !important; background: #000 !important; color: #fff !important; }
}

/* ---- HollyJMakeup (app/holly.php): her own palette, lavender and mauve, not Gabe's evergreen ---- */
.page-holly {
  --h-lav: #ead9f0; --h-mauve: #ba84a6; --h-mauve-dark: #9a6485; --h-ink: #3a2f36; --h-line: rgba(186, 132, 166, .3);
}
.page-holly main { background: #fff; }
.holly-page { max-width: 980px; margin: 0 auto; }
.holly-hero { padding: 48px 20px; text-align: center; background: var(--h-lav); border-radius: 0 0 24px 24px; }
.holly-logo {
  font-family: "Playfair Display", serif; font-size: 26px; font-weight: 800; letter-spacing: .25em;
  color: var(--h-ink); display: flex; align-items: center; justify-content: center; gap: 14px;
}
.holly-brow { font-size: 20px; opacity: .5; }
.holly-nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 14px 10px; border-bottom: 1px solid var(--h-line);
  font-family: "Cormorant Garamond", serif; font-size: 15px;
}
.holly-nav a { padding: 6px 12px; border-radius: 8px; text-decoration: none; color: var(--h-ink); font-weight: 600; }
.holly-nav a:hover { background: rgba(186, 132, 166, .12); }
.holly-nav a.active { color: var(--h-mauve-dark); text-decoration: underline; text-underline-offset: 4px; }

.holly-section { padding: 36px 20px; border-bottom: 1px solid var(--h-line); }
.holly-section:last-of-type { border-bottom: 0; }
.holly-title { font-family: "Playfair Display", serif; font-size: 28px; color: var(--h-mauve-dark); text-align: center; margin: 0 0 18px; }
.holly-h2 { font-family: "Playfair Display", serif; font-size: 21px; color: var(--h-mauve-dark); margin: 0 0 10px; }
.holly-eyebrow {
  text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--h-mauve); margin: 0 0 20px; padding-bottom: 10px; border-bottom: 1px solid var(--h-line);
}
.holly-lede { font-family: "Cormorant Garamond", serif; font-size: 17px; color: var(--h-ink); text-align: center; }
.holly-page p { font-family: "Cormorant Garamond", serif; font-size: 17px; line-height: 1.6; color: var(--h-ink); }

.holly-intro { display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: start; max-width: 760px; margin: 0 auto; }
@media (max-width: 640px) { .holly-intro { grid-template-columns: 1fr; } }
.holly-portrait img { width: 100%; border-radius: 14px; box-shadow: var(--shadow); }
.holly-portrait-empty {
  display: grid; place-items: center; aspect-ratio: 4/5; border-radius: 14px; background: rgba(186, 132, 166, .1);
  color: var(--h-mauve); font-family: "Cormorant Garamond", serif; font-size: 14px; text-align: center; padding: 10px;
}
.holly-photo-form { margin-top: 8px; display: grid; gap: 6px; }
.holly-photo-form input[type="file"] { font-size: 11px; }
.holly-intro-text h2, .holly-intro-text h3 { font-family: "Playfair Display", serif; color: var(--h-mauve-dark); }

.holly-cta { text-align: center; background: rgba(186, 132, 166, .06); border-radius: 18px; margin: 0 20px 20px; }
.holly-btn, .holly-btn-outline {
  display: inline-block; margin: 6px 8px; padding: 12px 26px; border-radius: 99px; text-decoration: none;
  font-family: "Cormorant Garamond", serif; font-size: 16px; font-weight: 700;
}
.holly-btn { background: var(--h-mauve); color: #fff; }
.holly-btn:hover { background: var(--h-mauve-dark); }
.holly-btn-outline { background: transparent; color: var(--h-mauve-dark); border: 1.5px solid var(--h-mauve); }
.holly-btn-outline:hover { background: rgba(186, 132, 166, .1); }

.holly-packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.holly-package { padding: 18px; border-radius: 14px; background: rgba(186, 132, 166, .06); border: 1px solid var(--h-line); }
.holly-package h3 { font-family: "Playfair Display", serif; color: var(--h-mauve-dark); margin: 0 0 2px; font-size: 17px; }
.holly-package-who { font-size: 12px; color: var(--h-mauve); margin: 0 0 10px; }
.holly-price { font-family: "Playfair Display", serif; font-size: 24px; color: var(--h-ink); margin: 0 0 12px; }
.holly-package-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--h-mauve); margin: 10px 0 4px; }
.holly-package ul { margin: 0; padding-left: 18px; font-family: "Cormorant Garamond", serif; font-size: 14.5px; color: var(--h-ink); }
.holly-package ul li { margin-bottom: 3px; }
.holly-package-note { font-size: 12px; font-style: italic; color: var(--h-mauve); margin-top: 10px; }

.holly-addons { display: grid; gap: 2px; }
.holly-addon-row {
  display: flex; justify-content: space-between; gap: 14px; padding: 9px 12px; border-radius: 8px;
  font-family: "Cormorant Garamond", serif; font-size: 15.5px; color: var(--h-ink);
}
.holly-addon-row:nth-child(odd) { background: rgba(186, 132, 166, .05); }
.holly-addon-price { font-weight: 700; color: var(--h-mauve-dark); white-space: nowrap; }
.holly-note { font-size: 12.5px; color: var(--h-mauve); margin-top: 10px; }

.holly-gallery-add { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 22px; }
.holly-gallery-add input[type="text"] { padding: 7px 10px; border: 1px solid var(--h-line); border-radius: 8px; font: inherit; }
.holly-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.holly-gallery-item { position: relative; border-radius: 12px; overflow: hidden; background: rgba(186, 132, 166, .06); }
.holly-gallery-item img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.holly-gallery-caption { margin: 0; padding: 8px 10px; font-family: "Cormorant Garamond", serif; font-size: 13px; color: var(--h-ink); }
.holly-gallery-del {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 99px; cursor: pointer;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 15px; line-height: 1;
}
.holly-gallery-del:hover { background: var(--bad); }

.holly-contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; }
@media (max-width: 640px) { .holly-contact-grid { grid-template-columns: 1fr; } }
.holly-form { display: grid; gap: 12px; max-width: 440px; }
.holly-form-narrow { margin: 0 auto; }
.holly-form label { display: grid; gap: 4px; font-family: "Cormorant Garamond", serif; font-size: 13px; font-weight: 700; color: var(--h-mauve-dark); }
.holly-form input, .holly-form textarea {
  padding: 9px 11px; border: 1px solid var(--h-line); border-radius: 9px; background: #fff; color: var(--h-ink); font: inherit; font-size: 15px;
}
.holly-form button.go, .holly-gallery-add button.go, .holly-photo-form button.go {
  justify-self: start; border: 0; border-radius: 99px; padding: 10px 22px; cursor: pointer;
  background: var(--h-mauve); color: #fff; font: inherit; font-size: 14px; font-weight: 700;
}
.holly-form button.go:hover, .holly-gallery-add button.go:hover, .holly-photo-form button.go:hover { background: var(--h-mauve-dark); }
.holly-contact-info a { color: var(--h-mauve-dark); }
.holly-sent { padding: 10px 14px; border-radius: 10px; background: rgba(186, 132, 166, .12); color: var(--h-mauve-dark); font-weight: 700; text-align: center; }

.holly-inbox { margin: 0 20px 20px; }
.holly-inbox-row { padding: 8px 10px; }
.holly-inbox-head { display: flex; justify-content: space-between; gap: 10px; }

.holly-footer {
  text-align: center; padding: 26px 20px 40px; font-family: "Cormorant Garamond", serif; font-size: 12.5px; color: var(--h-mauve);
}
.holly-social { display: flex; justify-content: center; gap: 14px; margin-top: 8px; }
.holly-social a { color: var(--h-mauve-dark); text-decoration: none; font-weight: 700; }
.holly-empty { text-align: center; font-family: "Cormorant Garamond", serif; color: var(--h-mauve); }

/* Website To-Dos: a floating box on every Holly page, planning notes for the real site - not
   part of it, so it's styled in Gabe's own app chrome (evergreen/serif), not Holly's lavender
   palette, to read unmistakably as a tool and not as content. */
.holly-todo-float { position: fixed; right: 18px; bottom: 18px; z-index: 40; font-family: "Cormorant Garamond", Georgia, serif; }
.holly-todo-float summary {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; white-space: nowrap;
  padding: 10px 16px; border-radius: 99px; background: var(--ok); color: #fff; font-weight: 700; font-size: 13px; box-shadow: var(--shadow);
}
.holly-todo-float summary::-webkit-details-marker { display: none; }
.holly-todo-float summary:hover { background: var(--ok2); }
.holly-todo-float summary .md-chip { background: rgba(255, 255, 255, .3); color: #fff; }
.holly-todo-panel {
  position: absolute; right: 0; bottom: calc(100% + 8px); width: 320px; max-width: calc(100vw - 36px);
  max-height: 70vh; overflow-y: auto; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow); padding: 14px;
}
.holly-todo-panel .hint { margin: 0 0 10px; font-size: 12.5px; color: var(--dim); }
.holly-todo-panel .clients { margin-bottom: 10px; }
@media (max-width: 480px) { .holly-todo-float { right: 10px; bottom: 10px; } }

/* ---- H's Masterclass (app/masterclass.php): a baseline mimic of Holly's Thinkific course page ---- */
.page-masterclass {
  --mc-navy: #182544; --mc-rose: #c49a85; --mc-rose-dark: #a67b64; --mc-ink: #2b2420; --mc-cream: #f3e6e2; --mc-line: rgba(196, 154, 133, .3);
}
.page-masterclass main { background: #fff; }
.mc-page { max-width: 1040px; margin: 0 auto; }
.mc-page p { font-family: "Cormorant Garamond", serif; font-size: 17px; line-height: 1.6; }
.mc-page h1, .mc-page h2, .mc-page h3 { font-family: "Playfair Display", serif; }

.mc-hero { padding: 40px 20px; background: #e9e1d8; border-radius: 0 0 24px 24px; }
.mc-hero-inner { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr 200px; gap: 20px; align-items: center; }
@media (max-width: 640px) { .mc-hero-inner { grid-template-columns: 1fr; text-align: center; } }
.mc-hero-text h1 { font-size: 40px; letter-spacing: .06em; text-transform: uppercase; color: #211a14; margin: 0 0 14px; }
@media (max-width: 480px) { .mc-hero-text h1 { font-size: 30px; } }
.mc-hero-sub { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 19px; color: #4a4038; margin: 0; }
.mc-hero-art { position: relative; height: 160px; display: grid; place-items: center; }
.mc-hero-phone { font-size: 64px; }
.mc-bubble { position: absolute; font-size: 22px; }
.mc-bubble-1 { top: 6px; left: 20%; } .mc-bubble-2 { top: 40%; right: 4%; } .mc-bubble-3 { bottom: 10%; left: 6%; }

.mc-section { padding: 36px 20px; }
.mc-intro-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; max-width: 960px; margin: 0 auto; align-items: start; }
@media (max-width: 640px) { .mc-intro-grid { grid-template-columns: 1fr; } }
.mc-intro-text h2 { font-size: 26px; color: var(--mc-rose-dark); margin: 0 0 12px; }
.mc-intro-text p { color: #7d6a5c; }
.mc-enroll-card { background: var(--mc-navy); color: #fff; border-radius: 14px; padding: 22px; box-shadow: var(--shadow); }
.mc-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin: 0 0 4px; }
.mc-enroll-card h3 { font-size: 22px; margin: 0 0 14px; }
.mc-price { font-family: "Cormorant Garamond", serif; font-size: 16px; color: rgba(255, 255, 255, .85); margin: 0 0 16px; }
.mc-btn {
  display: block; text-align: center; padding: 12px; border-radius: 10px; background: var(--mc-rose); color: #241c17;
  font-weight: 700; text-decoration: none; font-size: 15px;
}
.mc-btn:hover { background: var(--mc-rose-dark); color: #fff; }
.mc-enroll-meta { display: flex; justify-content: center; gap: 18px; font-size: 13px; color: rgba(255, 255, 255, .7); margin: 14px 0 0; }

.mc-syllabus-box { max-width: 900px; margin: 0 auto; border: 1px solid var(--mc-line); border-radius: 12px; overflow: hidden; }
.mc-syllabus-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--mc-line); }
.mc-syllabus-head h3 { font-size: 19px; margin: 0; color: var(--mc-ink); }
.mc-syllabus-meta { font-family: "Cormorant Garamond", serif; color: var(--mc-rose-dark); margin: 2px 0 0; font-size: 14px; }
.mc-expand-all { border: 0; background: none; color: var(--mc-rose-dark); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.mc-chapter { border-top: 1px solid var(--mc-line); }
.mc-chapter summary { display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; list-style: none; font-weight: 700; color: var(--mc-ink); }
.mc-chapter summary::-webkit-details-marker { display: none; }
.mc-chapter-num { color: var(--mc-rose); font-family: "Playfair Display", serif; }
.mc-lesson { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 20px 10px 52px; color: var(--mc-rose-dark); font-size: 15px; border-top: 1px solid var(--mc-line); }

.mc-band { background: var(--mc-cream); border-radius: 18px; margin: 0 20px; text-align: center; }
.mc-band h2 { color: #211a14; font-size: 26px; margin: 0 0 14px; }
.mc-about p { max-width: 760px; margin: 0 auto; color: var(--mc-navy); }

.mc-band-dark { background: var(--mc-navy); border-radius: 18px; margin: 20px 20px 0; color: #fff; }
.mc-bio-grid { display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: center; max-width: 900px; margin: 0 auto; }
@media (max-width: 640px) { .mc-bio-grid { grid-template-columns: 1fr; text-align: center; } }
.mc-bio-art { aspect-ratio: 4/5; border-radius: 14px; background: rgba(255, 255, 255, .08); display: grid; place-items: center; font-size: 72px; }
.mc-bio-text h2 { color: #fff; font-size: 26px; margin: 0 0 12px; }
.mc-bio-text p { color: var(--mc-rose); }

.mc-results { text-align: center; }
.mc-results h2 { color: var(--mc-rose-dark); font-size: 24px; margin: 0 0 20px; }
.mc-dash { max-width: 760px; margin: 0 auto; background: var(--mc-cream); border-radius: 14px; padding: 20px; }
.mc-dash-head { font-weight: 700; color: var(--mc-navy); margin: 0 0 14px; }
.mc-dash-head span { display: block; font-weight: 400; font-size: 13px; color: var(--mc-rose-dark); margin-top: 2px; }
.mc-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.mc-tile { background: var(--mc-navy); color: #fff; border-radius: 10px; padding: 12px; }
.mc-tile-value { display: block; font-family: "Playfair Display", serif; font-size: 18px; }
.mc-tile-label { display: block; font-size: 11px; color: rgba(255, 255, 255, .6); margin-top: 2px; }
.mc-caption { font-family: "Cormorant Garamond", serif; font-style: italic; color: var(--mc-rose-dark); margin: 14px 0 0; }

.mc-testimonials { text-align: center; }
.mc-testimonials h2 { color: var(--mc-rose-dark); font-size: 24px; margin: 0 0 6px; }
.mc-sub { font-family: "Cormorant Garamond", serif; color: #7d6a5c; margin: 0 0 24px; }
.mc-quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; max-width: 900px; margin: 0 auto; text-align: left; }
.mc-quote { background: var(--mc-navy); color: #fff; border-radius: 12px; padding: 20px; }
.mc-quote-mark { font-family: "Playfair Display", serif; font-size: 32px; color: var(--mc-rose); line-height: 1; }
.mc-quote p { color: rgba(255, 255, 255, .85); font-size: 15px; margin: 8px 0 14px; }
.mc-quote-name { font-weight: 700; margin: 0; }
.mc-quote-role { font-size: 12.5px; color: var(--mc-rose); margin: 2px 0 0; font-family: "Cormorant Garamond", serif; }

.mc-footer { text-align: center; padding: 30px 20px 44px; font-family: "Cormorant Garamond", serif; font-size: 13px; color: #7d6a5c; }
.mc-footer a { color: var(--mc-rose-dark); }

/* ---- Bment (app/bment.php) ---- */
.bment-sublist { margin: 10px 0 10px 4px; }
.bment-mindset-add textarea {
  flex: 1; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); font: inherit; font-size: 14px; resize: vertical;
}
.bment-mindset-add { align-items: flex-start; }
.bment-mindset-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.bment-mindset-entry { padding: 10px; border-radius: 8px; background: rgba(61, 43, 0, .04); }
.bment-mindset-text { font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.bment-mindset-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.bment-mindset-foot .hint { font-size: 11.5px; }
.bment-mindset-foot .client-del { padding: 0; }

/* ---- Script Editor: an all-yellow-and-white theme for this tab only, banner included
   (still gold/cream, never black - CLAUDE.md's rule) ---- */
body.page-script-editor {
  --card: #fffdf0;
  --card2: #fff6d6;
  --line: rgba(176, 141, 87, .4);
  --text: #4a3b00;
  --dim: rgba(74, 59, 0, .6);
  --ok: #c79400;
  --ok2: #e6b800;
  --accent: #ffd23f;
  --gold: #e6b800;
  --gold2: #ffd23f;
  --shadow: 0 18px 48px rgba(176, 141, 87, .25), 0 2px 6px rgba(176, 141, 87, .12);
  background: linear-gradient(180deg, #fffdf0 0%, #fff 55%, #fff8dc 100%);
  background-attachment: fixed;
}
body.page-script-editor .nav {
  background: linear-gradient(180deg, #e6b800, #ffd23f);
  color: #4a3b00;
  box-shadow: 0 2px 0 rgba(255, 255, 255, .5) inset, 0 6px 22px rgba(176, 141, 87, .35);
}
body.page-script-editor .nav .love { text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
body.page-script-editor .pill { background: rgba(74, 59, 0, .1); color: #4a3b00; }
body.page-script-editor .pill:hover { background: rgba(74, 59, 0, .2); color: #2c2300; }
body.page-script-editor .switch nav { box-shadow: 0 10px 30px rgba(176, 141, 87, .35); }
body.page-script-editor .add input { background: #fffdf0; }
body.page-script-editor .md-foot .go:hover, body.page-script-editor .aware-buttons button.go:hover { background: #a87d00; }

/* ---- MVP's tools bar: Stopwatch A and B, then Timer A and B (mvp_tools() in app/mvp.php). It sits in the
   page above everything else and stays just under the nav as the page scrolls (its top is set to the nav's
   height), so it never covers the day tabs or anything else. Four across a phone, so everything's compact. ---- */
.mvp-tools {
  position: sticky; top: 54px; z-index: 9; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
  margin: -10px 0 12px; padding: 6px; border: 1px solid var(--line); border-radius: 16px;
  background: rgba(241, 233, 210, .97); box-shadow: 0 6px 16px rgba(12, 28, 18, .14);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
body.view-desktop .mvp-tools { max-width: 760px; margin-left: auto; margin-right: auto; }
/* an edit saving in place (in_place_script() in layout.php, MVP and Farrell Fitness): the page dims a touch until it's back */
main.saving-in-place > :not(.mvp-tools) { opacity: .6; transition: opacity .15s .1s; pointer-events: none; }
.mvp-sw, .mvp-tm {
  display: grid; justify-items: center; align-content: start; gap: 3px; min-width: 0;
  padding: 4px 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); transition: background .25s;
}
/* running: the deep green with the gold edge (the exercise you're on); not running: the page's tan */
.mvp-sw.running, .mvp-tm.running {
  background: linear-gradient(165deg, #2f5e43, #264d37); border-color: var(--gold2); box-shadow: 0 0 0 1px var(--gold2), 0 3px 10px rgba(12, 28, 18, .25);
}
.mvp-sw.running .mvp-tool-label, .mvp-tm.running .mvp-tool-label { color: rgba(255, 255, 255, .75); }
.mvp-sw.running .mvp-sw-time, .mvp-tm.running .mvp-tm-min, .mvp-tm.running .mvp-tm-sec, .mvp-tm.running .mvp-tm-colon { color: #fff; }
.mvp-tm.running .mvp-tm-arrow, .mvp-tm.running .mvp-tm-reset { background: rgba(255, 255, 255, .18); color: #fff; }
.mvp-tool-label { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.mvp-sw-time, .mvp-tm-min, .mvp-tm-sec, .mvp-tm-colon {
  font-family: "Playfair Display", serif; font-size: 20px; font-weight: 800; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums;
}
.mvp-sw { align-content: center; }
.mvp-tool-go {
  width: 100%; max-width: 76px; padding: 5px 4px; border: 0; border-radius: 99px; cursor: pointer; touch-action: manipulation;
  background: var(--ok); color: #fff; font: inherit; font-size: 12px; font-weight: 800;
}
.mvp-sw.running .mvp-tool-go { background: var(--bad); }                                   /* Stop */
.mvp-sw.stopped .mvp-tool-go { background: rgba(47, 93, 66, .14); color: var(--text); }   /* Reset */
/* a timer: each number with its ▲ and ▼ stacked right under it */
.mvp-tm-clock { display: flex; align-items: flex-start; gap: 1px; }
.mvp-tm-col { display: grid; justify-items: center; gap: 2px; }
.mvp-tm-arrow {
  width: 28px; height: 20px; padding: 0; border: 0; border-radius: 7px; cursor: pointer; touch-action: manipulation;
  background: rgba(47, 93, 66, .1); color: var(--ok); font-size: 10px; line-height: 1;
}
.mvp-tm-arrow:hover { background: rgba(47, 93, 66, .2); }
.mvp-tm-arrow:active { background: var(--ok); color: #fff; }
.mvp-tm-buttons { display: flex; gap: 3px; width: 100%; justify-content: center; }
.mvp-tm-buttons .mvp-tool-go { flex: 1; }
.mvp-tm-reset {
  flex: none; width: 28px; padding: 0; border: 0; border-radius: 99px; cursor: pointer; touch-action: manipulation;
  background: rgba(47, 93, 66, .1); color: var(--text); font-size: 15px; line-height: 1;
}
.mvp-tm.running .mvp-tool-go { background: var(--gold); }
.mvp-tm.ringing { animation: mvp-timer-flash .5s steps(1) infinite; border-color: var(--bad); }
.mvp-tm.ringing .mvp-tool-go { background: var(--bad); }
@keyframes mvp-timer-flash { 50% { background: #ffd9d2; } }
@media (max-width: 640px) { .mvp-tools { margin-top: -14px; padding: 4px; gap: 4px; } }
body.view-phone .mvp-tools { padding: 4px; gap: 4px; }

/* ---- Farrell Fitness: ▲/▼ on exercises and sections, program purpose, Archive (app/farrell.php) ---- */
.farrell-move { display: inline-flex; gap: 2px; margin: 0 4px 0 0; flex: none; vertical-align: middle; }
.farrell-move button {
  width: 26px; height: 22px; padding: 0; border: 0; border-radius: 6px; cursor: pointer; touch-action: manipulation;
  background: rgba(47, 93, 66, .1); color: var(--ok); font-size: 10px; line-height: 1;
}
.farrell-move button:hover:not(:disabled) { background: var(--ok); color: #fff; }
.farrell-move button:disabled { opacity: .3; cursor: default; }
@media (max-width: 640px) { .farrell-move button { width: 32px; height: 28px; font-size: 12px; } }
.farrell-purpose { margin: 0 0 8px; white-space: pre-wrap; }

/* ▲ Up / ▼ Down at the top of an MVP exercise's edit fold (mvp_move_step_form()) */
.mvp-move-step { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.mvp-move-step span { font-size: 13px; color: var(--dim); }
.mvp-move-step button {
  min-width: 84px; min-height: 40px; padding: 0 14px; border: 1px solid rgba(47, 93, 66, .3); border-radius: 99px; cursor: pointer;
  touch-action: manipulation; background: rgba(47, 93, 66, .1); color: var(--ok); font: inherit; font-size: 14px;
}
.mvp-move-step button:hover:not(:disabled) { background: var(--ok); color: #fff; }
.mvp-move-step button:disabled { opacity: .35; cursor: default; }
.farrell-program-form { margin-top: 6px; }
.farrell-client-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.farrell-client-foot form { margin: 0; }
.farrell-archived { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 6px; }
.farrell-archived-text { flex: 1 1 220px; }
.farrell-archived form { margin: 0; }
.farrell-archived .go {
  padding: 7px 14px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--ok); color: #fff; font: inherit; font-size: 13px; font-weight: 700;
}
.farrell-archived .go:hover { background: #258a42; }
.farrell-archived .budget-note { white-space: pre-wrap; }

/* ==== Phone View / Desktop View, on every tab (VIEW_SCRIPT and view_switch() in app/layout.php) ==== */
/* the strip under the nav: the switch top left, then the Parking Lot */
.subbar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 10px; padding-left: 12px; background: var(--card2); border-bottom: 1px solid var(--line); }
/* Parking Lot, opened, takes a full line of its own under the switch, so its list and form fit a phone */
.subbar .parking-widget[open] { flex-basis: 100%; margin-left: -12px; }
.parking-widget-body .add input { min-width: 0; }
.view-switch { display: flex; flex: none; gap: 2px; margin: 4px 0; padding: 2px; border-radius: 99px; background: rgba(47, 93, 66, .1); }
.view-switch button {
  padding: 3px 10px; border: 0; border-radius: 99px; cursor: pointer; touch-action: manipulation; white-space: nowrap;
  background: none; color: var(--dim); font: inherit; font-size: 12px; font-weight: 700;
}
.view-switch button:hover { color: var(--text); }
.view-switch button[aria-pressed="true"] { background: var(--ok); color: #fff; }
.subbar:not(:has(.parking-widget)) { padding-bottom: 0; }

/* Desktop: the boxes run across the screen, side by side, instead of one narrow column down the middle.
   The big ones (a client list, a program, a quote, a form across the top) keep the whole width. */
body.view-desktop main { max-width: 1480px; }
body.view-desktop .narrow-page, body.view-desktop .narrow-page.wide {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 18px; max-width: none; margin: 28px auto;
}
body.view-desktop .narrow-page > * { flex: 1 1 380px; max-width: 560px; min-width: 0; margin: 0; }
body.view-desktop .narrow-page > :not(.card), body.view-desktop .narrow-page > .card.quote-banner,
body.view-desktop .narrow-page > :is(#mvp-todo, #mvp-today, #mvp-clients, .mvp-synopsis, #farrell-programs, #dopamine, #flow-state, #delayed-calendar, #budget-calendar, #wealth-lux,
  .ad-astra-add-cat, #ad-astra-archived, #edu-cats, #wealth-cats, #events-list) { flex-basis: 100%; max-width: 1180px; }
body.view-desktop .narrow-page > datalist { display: none; }
/* Training: the client list gets its column to itself */
body.view-desktop.page-training .lists { grid-template-columns: minmax(0, 1fr); }

/* Phone: one column, phone width, everything stacked - on a computer too, to see it the way a phone does */
body.view-phone main { max-width: 480px; padding-left: 12px; padding-right: 12px; }
body.view-phone .narrow-page, body.view-phone .narrow-page.wide { max-width: none; margin: 16px auto; }
body.view-phone .home, body.view-phone.gsd .home, body.view-phone .home:has(> .do-now[hidden]), body.view-phone.gsd .home:has(> .do-now[hidden]) {
  grid-template-columns: minmax(0, 1fr); grid-template-areas: "focus" "lists" "ktlo"; grid-template-rows: none;
}
body.view-phone .lists, body.view-phone.gsd .lists, body.view-phone .stew-grid, body.view-phone .devour-grid,
body.view-phone .dopamine-layout, body.view-phone .holly-intro, body.view-phone .holly-contact-grid,
body.view-phone .mc-hero-inner, body.view-phone .mc-intro-grid, body.view-phone .mc-bio-grid { grid-template-columns: minmax(0, 1fr); }
body.view-phone .flow-layout { grid-template-columns: 1fr 1fr; }
body.view-phone .flow-ring-wrap { grid-column: 1 / -1; }
body.view-phone .dope-ring-wrap { position: static; }
body.view-phone .md-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.view-phone .mvp-step .devour-grid { grid-template-columns: 1fr auto; }

/* ---- Script Editor: the Delayed Gratification Calendar / Dopamine Calendar (delay_calendar_card() in app/script_editor.php) ---- */
#delayed-calendar .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: middle; }
/* fixed colors, not var(--ok): Script Editor's yellow theme turns that gold */
#delayed-calendar .dot.kind-s { background: #b5651d; } /* holding off / saving for: copper */
#delayed-calendar .dot.kind-g { background: #2f8a4f; } /* working towards: green */
/* calendar on the left, the picked day and what's coming up on the right; stacked in Phone View or on a narrow screen */
.delay-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 24px; align-items: start; }
body.view-phone .delay-layout { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) { .delay-layout { grid-template-columns: minmax(0, 1fr); } }
.delay-cal { margin: 4px 0 12px; }
.delay-nav { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.delay-nav button, .delay-day-head button {
  min-width: 34px; height: 32px; padding: 0 8px; border: 0; border-radius: 8px; cursor: pointer; touch-action: manipulation;
  background: rgba(176, 141, 87, .14); color: var(--text); font: inherit; font-size: 16px; font-weight: 800; line-height: 1;
}
.delay-nav button:hover, .delay-day-head button:hover { background: #2f5d42; color: #fff; }
.delay-nav .delay-today { margin-left: auto; font-size: 12px; }
.delay-month { flex: 1; text-align: center; font-family: "Playfair Display", serif; font-size: 17px; font-weight: 700; }
.delay-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.delay-dow { text-align: center; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--dim); padding-bottom: 2px; }
.delay-d {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; min-height: 42px; padding: 5px 0 4px;
  border: 1px solid transparent; border-radius: 9px; cursor: pointer; touch-action: manipulation;
  background: rgba(255, 255, 255, .55); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 700;
}
.delay-d:hover { border-color: var(--line); background: #fff; }
.delay-d .dots { display: flex; gap: 2px; min-height: 7px; }
.delay-d.is-today { box-shadow: inset 0 0 0 2px #b5651d; }
.delay-d.is-picked { background: #2f5d42; color: #fff; }
#delayed-calendar .delay-d.is-picked .dot { box-shadow: 0 0 0 1.5px #fff; }
.delay-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; color: var(--dim); }
.delay-legend .dot.kind-g { margin-left: 8px; }
.delay-day { margin: 6px 0 12px; padding-top: 10px; border-top: 1px solid var(--line); }
body.view-desktop .delay-layout .delay-day { margin-top: 4px; padding-top: 0; border-top: 0; }
@media (max-width: 760px) { body.view-desktop .delay-layout .delay-day { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); } }
.delay-day-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.delay-day-label { flex: 1; text-align: center; font-weight: 800; font-size: 15px; }
.delay-entry[hidden], .delay-none[hidden] { display: none; }
.delay-entry summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.delay-time { flex: none; min-width: 52px; font-size: 12px; font-weight: 800; color: var(--dim); }
.delay-entry.kind-s .delay-kind { background: rgba(181, 101, 29, .16); color: #7a3f0c; }
.delay-entry.kind-g .delay-kind { background: rgba(47, 138, 79, .16); color: #1f5a33; }
.delay-countdown { font-size: 12px; font-weight: 700; color: var(--dim); }
.delay-entry.done .cname { text-decoration: line-through; color: var(--dim); }
.delay-done { background: rgba(47, 158, 79, .2); color: #1f5a33; }
.delay-sub { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.delay-upcoming { margin-bottom: 12px; }
.delay-up-list { list-style: none; margin: 0; padding: 0; border: 0; display: grid; gap: 4px; }
.delay-up {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; width: 100%; padding: 7px 10px; border: 0; border-radius: 9px; cursor: pointer;
  text-align: left; background: rgba(255, 255, 255, .55); color: var(--text); font: inherit; font-size: 14px;
}
.delay-up:hover { background: #fff; }
.delay-up .cname { flex: 1; min-width: 0; }
.delay-up-when { font-size: 12px; font-weight: 700; color: var(--dim); }
.delay-add { padding-top: 10px; border-top: 1px solid var(--line); }
.delay-fields { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr); gap: 8px; }
body.view-phone .delay-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body.view-phone .delay-fields label:first-child { grid-column: 1 / -1; }
@media (max-width: 560px) { .delay-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .delay-fields label:first-child { grid-column: 1 / -1; } }

/* both calendars: the full day names, or Sun-Sat where there's no room (weeks start on Sunday) */
.delay-dow .dow-short { display: none; }
body.view-phone .delay-dow .dow-long { display: none; }
body.view-phone .delay-dow .dow-short { display: inline; }
@media (max-width: 760px) { .delay-dow .dow-long { display: none; } .delay-dow .dow-short { display: inline; } }
.delay-dow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .02em; }

/* ---- Budget: the Bills & Goals Calendar (budget_calendar_card() in app/budget.php) ---- */
#budget-calendar { max-width: none; }
/* a dated goal's card down each side, the calendar in the middle; stacked (goals first) in Phone View or a narrow screen */
.bcal-layout { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2.2fr) minmax(200px, 1fr); gap: 16px; align-items: start; }
.bcal-goals { display: grid; gap: 12px; }
.bcal-goals:empty { display: none; }
/* one goal: just the left side; none: just the calendar (wide screens only - a phone always stacks) */
@media (min-width: 961px) {
  body:not(.view-phone) .bcal-layout:has(> .bcal-goals:last-child:empty) { grid-template-columns: minmax(220px, 1fr) minmax(0, 2.6fr); }
  body:not(.view-phone) .bcal-layout:has(> .bcal-goals:first-child:empty):has(> .bcal-goals:last-child:empty) { grid-template-columns: minmax(0, 1fr); }
}
body.view-phone .bcal-layout { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 960px) { .bcal-layout { grid-template-columns: minmax(0, 1fr); } }
.bcal-account { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.bcal-account select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); font: inherit; font-size: 14px; letter-spacing: 0; text-transform: none; }
#budget-calendar .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: middle; }
#budget-calendar .dot.bill { background: var(--bad); }
#budget-calendar .dot.income { background: #2f8a4f; }
#budget-calendar .dot.goal { background: #c9962a; }
#budget-calendar .delay-legend .dot.income, #budget-calendar .delay-legend .dot.goal { margin-left: 8px; }
.bcal-grid .delay-d { min-height: 54px; }
.bcal-cell-bal { font-size: 10.5px; font-weight: 700; color: var(--dim); font-variant-numeric: tabular-nums; }
.bcal-cell-bal.low { color: #a86a00; }
.bcal-cell-bal.neg { color: var(--bad); }
.bcal-grid .delay-d.is-picked .bcal-cell-bal { color: rgba(255, 255, 255, .85); }
.bcal-day { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.bcal-at { display: flex; justify-content: center; margin-bottom: 8px; font-size: 13px; color: var(--dim); }
.bcal-at input { margin-left: 6px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; }
.bcal-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.bcal-totals > div { display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .6); text-align: center; }
.bcal-totals span { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.bcal-totals b { font-family: "Playfair Display", serif; font-size: 19px; color: var(--ok); font-variant-numeric: tabular-nums; }
.bcal-totals b.neg { color: var(--bad); }
.bcal-totals .bcal-aside { color: #a86a00; }
.bcal-items { list-style: none; margin: 0; padding: 0; border: 0; display: grid; gap: 4px; }
.bcal-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 7px 10px; border-radius: 9px; background: rgba(255, 255, 255, .55); }
.bcal-item[tabindex] { cursor: pointer; }
.bcal-item[tabindex]:hover { background: #fff; }
.bcal-item .cname { flex: 1; min-width: 0; }
.bcal-item-area { font-size: 11.5px; color: var(--dim); }
.bcal-item.goal { box-shadow: inset 3px 0 0 #c9962a; }
.bcal-item-amt { font-weight: 700; color: #a86a00; }
/* a goal's card: the "game" for it */
.bcal-goal {
  display: grid; gap: 6px; padding: 12px; border-radius: 16px; cursor: pointer;
  background: linear-gradient(165deg, #fffdf3, #fbf1d6); box-shadow: 0 0 0 2px rgba(201, 150, 42, .35), var(--shadow);
}
.bcal-goal.full { box-shadow: 0 0 0 3px rgba(47, 138, 79, .55), 0 0 26px rgba(47, 138, 79, .3), var(--shadow); }
.bcal-goal.done { opacity: .7; }
.bcal-goal-top { display: flex; align-items: center; gap: 10px; }
.bcal-goal-top .cat-ring { width: 58px; height: 58px; flex: none; }
.bcal-goal-title { font-family: "Playfair Display", serif; font-weight: 700; font-size: 16px; line-height: 1.2; }
.bcal-goal-when { font-size: 12px; color: var(--dim); }
.bcal-goal-amt { font-size: 15px; }
.bcal-goal-amt b { font-family: "Playfair Display", serif; font-size: 20px; color: var(--ok); }
.bcal-goal-split { font-size: 12px; color: var(--dim); }
.bcal-goal-status { font-size: 13px; padding: 6px 8px; border-radius: 9px; background: rgba(201, 150, 42, .14); }
.bcal-goal.full .bcal-goal-status { background: rgba(47, 138, 79, .16); }
.budget-goal-money { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.budget-goal-money input { flex: 1 1 70px; min-width: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; font-size: 13px; }
.budget-goal-money button { padding: 6px 9px; border: 0; border-radius: 8px; cursor: pointer; background: rgba(47, 93, 66, .12); color: var(--text); font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; }
.budget-goal-money button:hover { background: var(--ok); color: #fff; }
.budget-goal-edit .budget-add, .budget-goal-edit .client-del { margin-top: 6px; }
.bcal-forms { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.bcal-forms > details { flex: 1 1 280px; }
.budget-goal-add summary, .bcal-plans summary, .budget-statements summary {
  cursor: pointer; list-style: none; display: inline-block; padding: 6px 12px; border-radius: 99px; font-size: 13px; font-weight: 700;
  background: rgba(47, 93, 66, .1); color: var(--text);
}
.budget-goal-add summary::-webkit-details-marker, .bcal-plans summary::-webkit-details-marker, .budget-statements summary::-webkit-details-marker { display: none; }
.budget-goal-add summary:hover, .bcal-plans summary:hover, .budget-statements summary:hover { background: var(--ok); color: #fff; }
.budget-goal-add[open] summary, .bcal-plans[open] summary, .budget-statements[open] summary { margin-bottom: 8px; }
.bcal-plans { margin-top: 10px; }
.budget-add select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #f5fff5; color: var(--text); font: inherit; font-size: 13px; }
.budget-add input[type="time"] { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #f5fff5; font: inherit; font-size: 13px; }
/* an area's own bits: where its balance comes from, Saving Towards, statement balances */
.budget-basis { margin: -4px 0 8px; font-size: 11.5px; color: var(--dim); }
.budget-saving { margin-bottom: 12px; padding: 10px; border-radius: 12px; background: rgba(201, 150, 42, .1); }
.budget-saving-title { margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.budget-jars { list-style: none; margin: 0 0 8px; padding: 0; border: 0; display: grid; gap: 8px; }
.budget-jar { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 10px; align-items: center; }
.budget-jar > .budget-goal-money, .budget-jar > .budget-goal-edit { grid-column: 1 / -1; }
.budget-jar.done { opacity: .65; }
.budget-jar-text { display: grid; }
.budget-jar-amt { font-size: 12px; color: var(--dim); }
.budget-statements { margin-top: 10px; }
.budget-statement-amt { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- Wealth: Top 5 Opportunities for a Luxurious Lifestyle (wealth_lux_card() in app/wealth.php) ---- */
.lux-list { list-style: none; margin: 0 0 10px; padding: 6px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; } /* an open edit box never pushes the page wider */
.lux-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: 12px; background: rgba(255, 255, 255, .55); }
.lux-item > details { flex: 1; min-width: 0; }
.lux-item > .farrell-move { padding-top: 3px; }
.lux-rank {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(160deg, var(--gold2), var(--gold)); color: #fff; box-shadow: 0 2px 8px rgba(176, 141, 87, .45);
  font-family: "Playfair Display", serif; font-size: 15px; font-weight: 800;
}
.lux-item:first-child .lux-rank { width: 34px; height: 34px; font-size: 17px; box-shadow: 0 0 0 2px #fff3c4, 0 0 16px rgba(201, 169, 106, .8); }
.lux-open { align-items: center; background: none; border: 1px dashed var(--line); }
.lux-open .lux-rank { background: rgba(176, 141, 87, .2); box-shadow: none; color: var(--dim); }
.lux-empty { font-size: 13px; color: var(--dim); font-style: italic; }
.lux-add textarea { width: 100%; }

/* ---- MVP: a day's ◀ Earlier / Later ▶, and Paste a workout (mvp_move_day_form(), mvp_import_form() in app/mvp.php) ---- */
.mvp-move-day { display: flex; gap: 6px; margin: -2px 0 8px; }
.mvp-move-day button {
  padding: 4px 10px; border: 0; border-radius: 99px; cursor: pointer; touch-action: manipulation;
  background: rgba(47, 93, 66, .1); color: var(--ok); font: inherit; font-size: 11.5px; font-weight: 700;
}
.mvp-move-day button:hover:not(:disabled) { background: var(--ok); color: #fff; }
.mvp-move-day button:disabled { opacity: .35; cursor: default; }
.mvp-import { margin: 4px 0 8px; }
.mvp-import textarea { width: 100%; }

/* ---- ⚙️ Settings, top left under the nav on every page (settings_menu() in app/layout.php) ---- */
.settings { position: relative; flex: none; }
.settings > summary {
  list-style: none; cursor: pointer; margin: 4px 0; padding: 3px 10px; border-radius: 99px; white-space: nowrap;
  background: rgba(47, 93, 66, .1); color: var(--text); font-size: 12px; font-weight: 700; touch-action: manipulation;
}
.settings > summary::-webkit-details-marker { display: none; }
.settings[open] > summary { background: var(--ok); color: #fff; }
.settings-panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; display: grid; gap: 12px; width: min(300px, calc(100vw - 24px));
  padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 12px 30px rgba(12, 28, 18, .25);
}
.settings-row { display: grid; gap: 6px; }
.settings-label { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.settings .view-switch { margin: 0; justify-self: start; }
.settings-alerts { display: flex; flex-wrap: wrap; gap: 6px; }
.settings-bell, .settings-test {
  padding: 6px 12px; border: 0; border-radius: 99px; cursor: pointer; touch-action: manipulation;
  background: rgba(176, 141, 87, .16); color: var(--text); font: inherit; font-size: 13px; font-weight: 700;
}
.settings-bell.on { background: rgba(47, 138, 79, .16); color: #1f5a33; }
.settings-test { background: rgba(47, 93, 66, .1); }
.settings-hint { margin: 0; font-size: 12px; color: var(--dim); }

/* ---- The round look (MVP and Farrell Fitness): round ✓ buttons, pill tabs and chips, softer cards, a
   progress ring by the program's name. Same colors as everywhere else; it only changes shapes. */
.mvp-day-tablist { gap: 8px; border-bottom: 0; }
body .mvp-day-tablist .mvp-day-tab { border-radius: 99px; padding: 8px 18px; border: 1px solid rgba(47, 93, 66, .25); box-shadow: 0 2px 6px rgba(29, 54, 38, .08); }
body .mvp-day-tablist .mvp-day-tab.active { background: linear-gradient(160deg, #2f5e43, #264d37); color: #f6efd9; border-color: var(--gold2); }
body .mvp-steps .mvp-step { border-radius: 22px; }
body .mvp-steps .mvp-step:not(.done) { box-shadow: 0 6px 16px rgba(29, 54, 38, .14); }
body .mvp-steps .mvp-step.tier-1 { box-shadow: 0 0 0 2px var(--gold2), 0 6px 16px rgba(12, 28, 18, .25); }
.mvp-step .devour-grid { align-items: center; }
/* the ✓: a big round button, easy to hit with a thumb */
body .mvp-steps .mvp-step .mvp-complete {
  width: 64px; height: 64px; min-width: 64px; padding: 0; border-radius: 50%; font-size: 0;
  display: grid; place-items: center; box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
}
body .mvp-steps .mvp-step .mvp-complete::before { content: "\2713"; font-size: 28px; line-height: 1; }
body .mvp-steps .mvp-step:is(.tier-1, .tier-2) .mvp-complete { border: 3px solid rgba(255, 255, 255, .65); }
body .mvp-steps .mvp-step:is(.tier-1, .tier-2) .mvp-complete::before { color: #2f5e43; }
body .mvp-step .mvp-stats-link { border-radius: 99px; padding: 3px 10px; }
.mvp-section-name { border-radius: 99px; padding: 3px 12px; }
.mvp-fold > summary { padding: 6px 14px; box-shadow: 0 1px 3px rgba(29, 54, 38, .08); }
.mvp-program { border: 0; border-radius: 26px; background: rgba(255, 255, 255, .35); box-shadow: 0 8px 24px rgba(29, 54, 38, .08); padding: 12px; }
.mvp-tools > div { border-radius: 26px; }
.mvp-tool-go, .mvp-tm-reset, .mvp-export-menu > summary { border-radius: 99px; }
body .mvp-complete-session button[type=submit] { border-radius: 99px; padding: 12px 26px; box-shadow: 0 6px 16px rgba(60, 255, 30, .35); }
/* the progress ring: a conic gradient filled to --p percent, with the number in the middle */
.mvp-ring {
  flex: none; margin-left: auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(#2f5e43 calc(var(--p) * 1%), rgba(47, 93, 66, .15) 0); box-shadow: 0 3px 8px rgba(29, 54, 38, .15);
}
.mvp-ring b { width: 42px; height: 42px; border-radius: 50%; background: var(--card); display: grid; place-items: center; font-size: 12px; color: #2f5e43; }

.mvp-fold-titlelike > summary { box-shadow: none; padding: 2px 0; } /* the program name reads as a title, not a pill */
.mvp-program-head { flex-wrap: wrap; }
.mvp-day-top .mvp-ring { width: 48px; height: 48px; } /* each day's ring, at the right end of its top row */
.mvp-day-top .mvp-ring b { width: 37px; height: 37px; font: 700 11px/1 Arial, sans-serif; }
.mvp-day-top .mvp-day-name { margin-bottom: 0; flex: 1; min-width: 0; }
/* the session summary's exercise numbers (1, 2, 3...), matching the numbered text it shares */
.mvp-synopsis-num { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #2f5e43; color: #f6efd9; font-size: 12px; font-weight: 700; margin-right: 6px; }
/* the ↺ on a checked-off exercise (undo_step): the same round button, quieter, so ✓ still stands out */
.mvp-undo-form { margin: 0; }
body .mvp-steps .mvp-step .mvp-complete.mvp-undo { background: transparent; border: 2px solid var(--line); box-shadow: none; color: var(--dim); width: 52px; height: 52px; min-width: 52px; }
body .mvp-steps .mvp-step .mvp-complete.mvp-undo::before { content: "\21BA"; font-size: 24px; color: var(--dim); }
body .mvp-steps .mvp-step .mvp-complete.mvp-undo:hover { background: rgba(47, 93, 66, .08); }
/* the lb | kg switch next to an exercise's Weight boxes (mvp_unit_toggle()) */
.mvp-unit-toggle { display: flex; align-items: center; gap: 6px; margin: 4px 0 2px; font-size: 13px; color: var(--dim); }
.mvp-unit-toggle label { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.mvp-unit-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mvp-unit-toggle b { padding: 4px 14px; border: 1px solid rgba(47, 93, 66, .3); font: 700 13px/1.2 Arial, sans-serif; color: var(--text); background: var(--card); }
.mvp-unit-toggle label:first-of-type b { border-radius: 99px 0 0 99px; }
.mvp-unit-toggle label:last-of-type b { border-radius: 0 99px 99px 0; border-left: 0; }
.mvp-unit-toggle input:checked + b { background: #2f5e43; color: #f6efd9; border-color: #2f5e43; }
.mvp-unit-toggle input:focus-visible + b { outline: 2px solid var(--gold2); outline-offset: 1px; }
.mvp-toggles { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; } /* lb | kg and Time | Distance side by side */
.mvp-toggles .mvp-unit-toggle { margin: 4px 0 2px; }
.mvp-unit-toggle b { text-transform: none; letter-spacing: 0; } /* "lb", not "LB" */

/* ---- an exercise's sets, compact (mvp_set_rows_html(), MVP and Farrell): the column names once, then one row per
   set - Set | Reps | Weight (lb | kg) | Time | Distance - side by side on a phone too, so it all fits on one screen */
.mvp-set-rows { display: grid; gap: 4px; margin: 4px 0; }
.mvp-set-head, .mvp-step-form .mvp-set-row {
  display: grid; grid-template-columns: 22px repeat(4, minmax(0, 1fr)); gap: 4px; align-items: center;
}
.mvp-step-form .mvp-set-row[hidden] { display: none; }
.mvp-set-head > span { font: 700 10px/1.2 Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.mvp-set-head-weight { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.mvp-step-form .mvp-set-num { width: auto; height: auto; justify-content: center; font: 800 12px/1 Arial, sans-serif; }
.mvp-step-form .mvp-set-row input { width: 100%; min-width: 0; box-sizing: border-box; padding: 6px 6px; font-size: 14px; text-align: center; }
.mvp-step-form .mvp-set-row input::placeholder { color: rgba(29, 54, 38, .3); }
.mvp-unit-toggle.small { margin: 0; }
/* ▲ / ▼ under each Sets, Reps, Weight, Time and Distance box (mvp_stepper()): tap for one step, hold to keep going */
/* the box on top, then its ▲, then its ▼ - stacked, right under the box they change */
.mvp-stepper { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "box" "up" "down"; gap: 2px; min-width: 0; }
.mvp-stepper > input { grid-area: box; }
.mvp-stepper > .mvp-stepper-btn[data-dir="1"] { grid-area: up; }
.mvp-stepper > .mvp-stepper-btn[data-dir="-1"] { grid-area: down; }
.mvp-stepper-btn {
  height: 26px; padding: 0; border: 0; border-radius: 8px; cursor: pointer; font-size: 11px; line-height: 1;
  background: rgba(47, 93, 66, .1); color: var(--ok);
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
/* lit only when it actually changes the number (STEPPER_SCRIPT), never just because a scrolling thumb touched it */
.mvp-stepper-btn.pressed { background: var(--ok); color: #fff; }
@media (hover: hover) { .mvp-stepper-btn:hover { background: rgba(47, 93, 66, .2); } }
.mvp-set-row[hidden] .mvp-stepper-btn { display: none; }
.mvp-sets-label .mvp-stepper { max-width: 110px; }
.mvp-sets-label .mvp-stepper input { text-align: center; }
.mvp-unit-toggle.small b { padding: 1px 6px; font-size: 10px; }
/* while an exercise's edit box is open it gets the card's whole width (the round ✓ drops below it) */
.mvp-step:has(.devour-edit[open]) .devour-grid { display: block; }
.mvp-step:has(.devour-edit[open]) .devour-grid > .mvp-complete, .mvp-step:has(.devour-edit[open]) .devour-grid > .mvp-undo-form { margin: 10px 0 0 auto; }
/* the edit box itself, condensed: Exercise on top, Section and Sets side by side, then the sets, then Notes */
.client-edit.mvp-step-form, .mvp-add.mvp-step-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; }
.mvp-step-form > * { grid-column: 1 / -1; }
.mvp-step-form > label:has(select[name=section]), .mvp-step-form > .mvp-sets-label { grid-column: auto; max-width: none; }
.mvp-set-head { align-items: end; }

/* ---- Event Planning (app/events.php) ---- */
.event-card { margin-bottom: 14px; }

/* every box an event is broken into: Itinerary, Guest List, RSVPs, Prep, Sign-up & Buy, Planning,
   Complete, Rename/Delete - each its own .card nested inside the event's <details>, so it opens
   and shuts by its own title (CARD_TOGGLE_SCRIPT) independently of the others */
.event-boxes { display: grid; gap: 12px; margin-top: 6px; }
.event-box { margin: 0; }
.event-box .head { flex-wrap: wrap; }
.event-box-body { padding: 0 6px; }
.event-box-check { margin: 0 0 0 auto; }
.event-box-check-btn {
  border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px; cursor: pointer; background: #fff;
  color: var(--text); font: inherit; font-size: 11px; font-weight: 700; white-space: nowrap;
}
.event-box-check-btn:hover { background: var(--accent); color: #fff; border-color: transparent; }
.event-box-check-btn.checked { background: var(--ok); color: #fff; border-color: var(--ok); }
.event-box-checked { box-shadow: inset 3px 0 0 var(--ok), var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .9); }
.event-box-admin .head { color: var(--dim); }

.event-complete-box .event-box-body p { margin: 0 0 8px; font-size: 13px; }
.event-complete-box form { margin: 0; }
.event-complete-box button[disabled] { opacity: .45; cursor: not-allowed; }
.event-complete-box-done { box-shadow: inset 3px 0 0 var(--ok), var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .9); }
.event-complete-box-done .head { color: var(--ok); }
.event-complete-chip { background: var(--ok); color: #fff; }

/* Itinerary: a picker on the left, Before / During / After on the right */
.event-itin-grid { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; align-items: start; }
.event-itin-left { display: grid; gap: 10px; align-content: start; }
.event-itin-right { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.event-phase-col {
  min-width: 0; padding: 8px; border-radius: 12px; background: rgba(61, 43, 0, .035); border: 1px solid var(--line);
}
.event-phase-col h4 { margin: 0 0 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.event-phase-before { border-left: 3px solid #6a8fd8; }
.event-phase-during { border-left: 3px solid var(--accent); }
.event-phase-after { border-left: 3px solid #b5843a; }
.event-field-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; min-height: 28px; }
.event-field-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; padding: 4px 2px; border-radius: 8px; }
.event-field-row:hover { background: rgba(61, 43, 0, .05); }
.event-field-move { display: flex; flex-direction: column; gap: 1px; flex: none; }
.event-field-move form { margin: 0; }
.event-field-move button {
  width: 20px; height: 16px; border: 0; border-radius: 4px; cursor: pointer; padding: 0;
  background: rgba(61, 43, 0, .08); color: var(--text); font-size: 8px; line-height: 1;
}
.event-field-move button:hover { background: var(--accent); color: #fff; }
.event-field-form { flex: 1; min-width: 160px; margin: 0; display: flex; align-items: flex-end; gap: 6px; }
.event-field-form label { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 11px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: .03em; }
.event-field-form input[type="text"] { padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--text); font: inherit; font-size: 14px; text-transform: none; }
.event-field-form button { flex: none; padding: 6px 10px; font-size: 12px; }
.event-maps-link { flex: none; font-size: 12px; font-weight: 700; color: var(--ok); text-decoration: none; white-space: nowrap; }
.event-maps-link:hover { text-decoration: underline; }
.event-field-phase-form { margin: 0; }
.event-field-phase-form select {
  padding: 4px 6px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--text); font: inherit; font-size: 11px;
}
.event-field-del { margin: 0; flex: none; }
.event-field-del button { border: 0; background: none; cursor: pointer; color: var(--dim); font-size: 16px; line-height: 1; padding: 0 2px; }
.event-field-del button:hover { color: var(--bad); }
.event-copy { margin-top: 10px; }
.event-copy-locked { margin: 10px 0 0; }
.event-picker { font-size: 12px; }
.event-picker-head { margin: 0 0 6px; font-size: 11px; color: var(--dim); }
.event-picker-cat { margin-top: 8px; }
.event-picker-cat:first-child { margin-top: 0; }
.event-picker-cat-name { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
.event-picker-row { display: flex; flex-wrap: wrap; gap: 6px; }
.event-picker-chip { margin: 0; }
.event-picker-chip button {
  border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px; cursor: pointer; background: #fff;
  color: var(--text); font: inherit; font-size: 12px; font-weight: 700;
}
.event-picker-chip button:hover { background: var(--accent); color: #fff; border-color: transparent; }
.event-preset { margin: 0; }
.event-preset button {
  border: 1px dashed var(--accent); border-radius: 10px; padding: 8px 12px; cursor: pointer; background: rgba(61, 43, 0, .04);
  color: var(--text); font: inherit; font-size: 13px; font-weight: 700; width: 100%;
}
.event-preset button:hover { background: var(--accent); color: #fff; border-style: solid; }

.event-suggestion {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: rgba(216, 142, 20, .12); border: 1px solid rgba(216, 142, 20, .35);
}
.event-suggestion p { margin: 0 0 8px; font-size: 13px; font-weight: 700; }
.event-suggestion form { margin: 0; }

/* Guest List, RSVPs */
.event-guest-list, .event-rsvp-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.event-guest-row, .event-rsvp-row { display: flex; align-items: center; gap: 6px; }
.event-guest-form, .event-rsvp-form { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.event-guest-form input[name="name"], .event-rsvp-form input[name="name"] { flex: 2; min-width: 120px; }
.event-guest-form input[name="age"] { flex: 1; min-width: 0; max-width: 70px; }
.event-guest-form input, .event-rsvp-form input, .event-rsvp-form select {
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--text); font: inherit; font-size: 14px;
}
.event-rsvp-yes .event-rsvp-form select { color: var(--ok); font-weight: 700; }
.event-rsvp-no .event-rsvp-form select { color: var(--bad); }

/* Prep checklist */
.event-prep-cat { margin-top: 10px; }
.event-prep-cat:first-child { margin-top: 0; }
.event-prep-cat h4 { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.event-prep-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; }
.event-prep-row { display: flex; align-items: center; gap: 8px; }
.event-prep-toggle { margin: 0; }
.event-prep-check {
  flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line); background: #fff;
  cursor: pointer; color: var(--ok); font-size: 12px; line-height: 1; touch-action: manipulation;
}
.event-prep-row.done .event-prep-check { background: var(--ok); color: #fff; border-color: var(--ok); }
.event-prep-title { flex: 1; font-size: 13px; }
.event-prep-row.done .event-prep-title { text-decoration: line-through; color: var(--dim); }
.event-prep-add { display: flex; gap: 6px; margin-top: 2px; }

/* Sign-up & Buy List */
.event-signup-panel, .event-buy-panel { margin-top: 10px; }
.event-signup-panel:first-child { margin-top: 0; }
.event-signup-panel h4, .event-buy-panel h4 { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.event-signup-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.event-signup-row { display: flex; align-items: center; gap: 6px; }
.event-signup-form { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.event-signup-form input[type="text"], .event-signup-form select,
.event-signup-add input[type="text"], .event-signup-add select {
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--text); font: inherit; font-size: 13px;
}
.event-signup-form input[name="title"] { flex: 2; min-width: 110px; }
.event-signup-form select { flex: 1; min-width: 110px; }
.event-signup-form input[name="claimed_by"] { flex: 1; min-width: 110px; }
.event-signup-add { display: flex; flex-wrap: wrap; gap: 6px; }
.event-signup-add input[name="title"] { flex: 2; min-width: 120px; }
.event-buy-preview { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.event-buy-preview li.done { color: var(--dim); text-decoration: line-through; }
.event-grocery-link { display: inline-block; }

/* Planning */
.event-planning-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.event-planning-form label { display: grid; gap: 2px; font-size: 11px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: .03em; }
.event-planning-form input[type="number"], .event-planning-form input[type="text"] {
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--text); font: inherit; font-size: 14px; text-transform: none;
}
.event-planning-form input[type="number"] { width: 80px; }
.event-planning-form .md-check { flex-direction: row; align-items: center; gap: 6px; text-transform: none; font-size: 13px; font-weight: 600; color: var(--text); }

@media (max-width: 760px) {
  .event-itin-grid { grid-template-columns: minmax(0, 1fr); }
  .event-itin-right { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .event-field-form, .event-field-row, .event-signup-form, .event-signup-add { flex-wrap: wrap; }
  .event-maps-link { margin-left: 26px; }
}

/* ---- Event Planning: the Grocery List page (/events/grocery) ---- */
.event-grocery-page .hint { margin-top: 2px; }
.event-grocery-cat { margin-top: 16px; }
.event-grocery-cat h3 { margin: 0 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
.event-grocery-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.event-grocery-row { display: flex; align-items: center; gap: 10px; }
.event-grocery-toggle { margin: 0; }
.event-grocery-check {
  flex: none; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: #fff;
  cursor: pointer; color: var(--ok); font-size: 14px; line-height: 1; touch-action: manipulation;
}
.event-grocery-row.done .event-grocery-check { background: var(--ok); color: #fff; border-color: var(--ok); }
.event-grocery-title { font-size: 15px; }
.event-grocery-row.done .event-grocery-title { text-decoration: line-through; color: var(--dim); }
.event-grocery-back { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--dim); text-decoration: underline; }

/* ---- Event Planning: drag and drop, mouse or touch (events_drag_script()) ---- */
.event-drag-ghost {
  position: fixed; z-index: 400; transform: translate(-50%, -140%); pointer-events: none;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 99px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25); white-space: nowrap;
}
.event-drag-handle {
  touch-action: none; cursor: grab; flex: none; align-self: center; color: var(--dim); font-size: 14px; line-height: 1;
  padding: 4px 2px; -webkit-user-select: none; user-select: none;
}
.event-picker-chip { touch-action: none; }
body.event-dragging { cursor: grabbing; -webkit-user-select: none; user-select: none; }
.event-field-row.dragging-source { opacity: .35; }
.event-field-row.drag-over { box-shadow: inset 0 2px 0 var(--accent); }
.event-field-row.drag-over-after { box-shadow: inset 0 -2px 0 var(--accent); }

/* the fitness tabs (MVP and Farrell Fitness): an exercise's "edit" is a proper button, big enough for a thumb */
.mvp-step .devour-edit { font-size: 15px; margin-top: 6px; }
.mvp-step .devour-edit > summary {
  display: inline-flex; align-items: center; justify-content: center; min-width: 88px; min-height: 40px; padding: 0 18px;
  border-radius: 99px; text-decoration: none; font-weight: 700; letter-spacing: .02em;
  background: rgba(47, 93, 66, .1); color: var(--ok); border: 1px solid rgba(47, 93, 66, .3);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.mvp-step:is(.tier-1, .tier-2) .devour-edit > summary { background: rgba(255, 255, 255, .18); color: #fff; border-color: rgba(255, 255, 255, .45); }
.mvp-step .devour-edit[open] > summary { background: var(--ok); color: #fff; border-color: var(--ok); }

/* the fitness tabs: a checked-off exercise folds down to one compact row - ✓, its name, what was logged (sets x reps /
   weight) - with the ↺ to uncheck it. Tapping the row opens it for editing again (STEPPER_SCRIPT in app/layout.php). */
.mvp-step.done:not(:has(.devour-edit[open])) { padding-top: 8px; padding-bottom: 8px; cursor: pointer; }
.mvp-step.done:not(:has(.devour-edit[open])) :is(.budget-note, .mvp-last-session, a.mvp-stats-link, .mvp-remove-exercise,
  .farrell-move, .mvp-step-drag-handle, .devour-edit > summary, .md-chip.hot) { display: none; }
.mvp-step.done:not(:has(.devour-edit[open])) .devour-edit { margin: 0; }
.mvp-step.done:not(:has(.devour-edit[open])) .cname::before { content: "\2713\00a0"; color: var(--ok); font-weight: 800; }
body .mvp-steps .mvp-step.done:not(:has(.devour-edit[open])) .mvp-complete { width: 44px; height: 44px; min-width: 44px; }

/* Complete Program, under a client's program (mvp_complete_program_box()): asks first, right there */
.mvp-complete-program { margin: 12px 0 4px; }
.mvp-complete-program > summary {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 99px; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--ok); background: rgba(47, 93, 66, .08); border: 1px solid rgba(47, 93, 66, .35); touch-action: manipulation;
}
.mvp-complete-program > summary::-webkit-details-marker { display: none; }
.mvp-complete-program[open] > summary { display: none; }
.mvp-complete-program-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--gold2); }
.mvp-complete-program-ask p { flex-basis: 100%; margin: 0 0 4px; font-weight: 700; }
.mvp-complete-program-ask form { margin: 0; }
.mvp-completed-chip { background: rgba(47, 93, 66, .14); color: var(--ok); }

/* yellow: this client's program was completed and they need a new one - the whole name row, in Today's Clients and
   All Clients (MVP) and Farrell's list */
.mvp-client-li > details.client > summary.mvp-needs-program { background: #fff3b0; border-radius: 16px; box-shadow: inset 0 0 0 2px #e8c53a; }
summary.mvp-needs-program .cname { background: #ffe066; color: #4a3b00; border-radius: 99px; padding: 2px 12px; box-shadow: 0 0 0 2px #e8c53a; }
.mvp-needs-chip { background: #ffe066; color: #4a3b00; font-weight: 800; }
.mvp-complete-program-ask button {
  min-height: 40px; padding: 0 20px; border-radius: 99px; font: inherit; font-weight: 700; cursor: pointer; touch-action: manipulation;
  border: 1px solid rgba(47, 93, 66, .35); background: rgba(47, 93, 66, .08); color: var(--ok);
}
.mvp-complete-program-ask button.go { background: var(--ok); border-color: var(--ok); color: #fff; }

/* a circuit's rounds next to its section name (mvp_rounds_html()): − □□□□ + 2/4 - tap the next box as each round's done */
.mvp-rounds { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 0 6px; }
.mvp-round {
  width: 32px; height: 32px; padding: 0; border-radius: 8px; cursor: pointer; touch-action: manipulation; font: 800 17px/1 Arial, sans-serif;
  background: var(--card); border: 2px solid rgba(47, 93, 66, .45); color: #fff; -webkit-tap-highlight-color: transparent;
}
.mvp-round.on { background: var(--ok); border-color: var(--ok); }
/* the circuit's Sets box: the number, with ▲ and ▼ stacked under it (mvp_stepper()), like an exercise's Sets */
.mvp-rounds-sets { display: inline-flex; flex-direction: column; align-items: stretch; gap: 2px; margin-right: 4px; }
.mvp-rounds-sets > span { font: 700 10px/1 Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); text-align: center; }
.mvp-rounds-sets .mvp-stepper { width: 56px; }
.mvp-rounds-input { width: 100%; box-sizing: border-box; padding: 6px 4px; text-align: center; font: inherit; font-size: 15px; font-weight: 700;
  color: var(--text); background: #f6fbf4; border: 1px solid rgba(47, 93, 66, .35); border-radius: 10px; }
.mvp-rounds { align-items: flex-start; }
.mvp-rounds .mvp-round, .mvp-rounds .mvp-rounds-count { margin-top: 18px; }
.mvp-rounds-count { font: 700 11px/1 Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
/* the rounds get their own line under the circuit's name, so − □□□□ + always sits in one row */
.mvp-section-head:has(.mvp-rounds) { flex-wrap: wrap; }
.mvp-section-head .mvp-rounds { order: 10; flex-basis: 100%; flex-wrap: nowrap; margin: 6px 0 2px; overflow-x: auto; }
/* ✓ Circuit done: the whole circuit checked off in one tap (mvp_circuit_done_form()) */
.mvp-section-head .mvp-circuit-done { order: 11; flex-basis: 100%; margin: 2px 0 4px; }
.mvp-circuit-done button {
  min-height: 40px; padding: 0 18px; border-radius: 99px; font: inherit; font-weight: 700; cursor: pointer; touch-action: manipulation;
  border: 1px solid var(--ok); background: var(--ok); color: #fff;
}
.mvp-circuit-done button.undo { background: rgba(47, 93, 66, .08); color: var(--ok); border-color: rgba(47, 93, 66, .35); }

/* Session Complete: every number that went up since last time, highlighted (mvp_synopsis_card()) */
.mvp-synopsis-ups { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.md-chip.mvp-up { background: #d8f5c8; color: #1f5a2c; font-weight: 800; box-shadow: inset 0 0 0 1.5px #57b36a; }

/* ---- Session Complete, the summary sheet (mvp_synopsis_card()): clean and compact, made to be screenshotted or shared -
   fine hairlines, the numbers right-aligned, green only for what went up ---- */
.mvp-synopsis .syn-sheet { background: #fffdf6; border: 1px solid rgba(29, 54, 38, .14); border-radius: 14px; padding: 14px 14px 6px; }
.syn-top { padding-bottom: 10px; border-bottom: 1px solid rgba(29, 54, 38, .22); }
.syn-client { font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 700; line-height: 1.2; color: var(--text); }
.syn-sub { margin-top: 2px; font-size: 14px; color: var(--dim); }
.syn-tally { margin-top: 6px; font: 700 10.5px/1 Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #8a6d3b; }
.syn-list { list-style: none; margin: 0; padding: 0; }
.syn-row { padding: 9px 0 8px; border-bottom: 1px solid rgba(29, 54, 38, .1); }
.syn-row:last-child { border-bottom: 0; }
.syn-line { display: flex; align-items: baseline; gap: 8px; }
.syn-n { flex: none; width: 16px; font: 700 11px/1 Arial, sans-serif; color: rgba(29, 54, 38, .45); }
.syn-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--text); }
.syn-pr { font-size: 13px; }
.syn-nums { flex: none; max-width: 52%; text-align: right; font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.syn-up, .syn-down, .syn-same { margin: 3px 0 0 24px; font-size: 13.5px; line-height: 1.35; }
.syn-up { color: #237a3b; font-weight: 700; }
.syn-down { color: rgba(29, 54, 38, .55); }
.syn-same { color: rgba(29, 54, 38, .45); font-style: italic; }
.mvp-synopsis .mvp-synopsis-actions { margin-top: 12px; }
.mvp-synopsis .syn-sheet, .mvp-synopsis .mvp-synopsis-actions { max-width: 560px; } /* stays a tidy sheet on a wide screen too */

/* the skinny set counter between the stopwatches and the timers (mvp_set_counter()): the timers keep their width,
   the stopwatches give up the room */
.mvp-tools:has(.mvp-setc) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px minmax(0, 1.3fr) minmax(0, 1.3fr); }
.mvp-setc {
  display: grid; justify-items: center; align-content: start; gap: 3px; min-width: 0;
  padding: 4px 2px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
}
.mvp-setc .mvp-tool-label { letter-spacing: .02em; }
.mvp-setc-n { font-family: "Playfair Display", serif; font-size: 22px; font-weight: 800; line-height: 1.05; color: var(--text); font-variant-numeric: tabular-nums; }
.mvp-setc.counting { background: linear-gradient(165deg, #2f5e43, #264d37); border-color: var(--gold2); }
.mvp-setc.counting .mvp-setc-n { color: #fff; }
.mvp-setc.counting .mvp-tool-label { color: rgba(255, 255, 255, .75); }
.mvp-setc-btn, .mvp-setc-reset {
  width: 32px; height: 22px; padding: 0; border: 0; border-radius: 7px; cursor: pointer; touch-action: manipulation;
  background: rgba(47, 93, 66, .1); color: var(--ok); font-size: 10px; line-height: 1; -webkit-tap-highlight-color: transparent;
}
.mvp-setc-reset { font-size: 14px; color: var(--text); border-radius: 99px; }
.mvp-setc.counting :is(.mvp-setc-btn, .mvp-setc-reset) { background: rgba(255, 255, 255, .18); color: #fff; }
.mvp-tools > .mvp-setc { border-radius: 16px; }
.mvp-tools:has(.mvp-setc) .mvp-sw .mvp-tool-label { font-size: 8px; letter-spacing: .01em; } /* "STOPWATCH A" still fits, narrower */

/* the timers' buttons, bigger for a thumb: the ▲ / ▼ under each number, Start, and ↺ */
.mvp-tm .mvp-tm-arrow { width: 36px; height: 30px; font-size: 13px; border-radius: 9px; }
.mvp-tm .mvp-tm-col { gap: 3px; }
.mvp-tm .mvp-tm-clock { gap: 0; }
.mvp-tm .mvp-tool-go { padding: 9px 4px; font-size: 13px; max-width: none; }
.mvp-tm .mvp-tm-reset { width: 34px; font-size: 17px; }
.mvp-tm .mvp-tm-buttons { gap: 4px; }
/* the set counter now sits left of the stopwatches, and its buttons fill the bar's whole height (easier to press) */
.mvp-tools:has(.mvp-setc) { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.3fr); }
.mvp-tools > .mvp-setc { display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 4px 3px; }
.mvp-setc > .mvp-tool-label, .mvp-setc > .mvp-setc-n { text-align: center; }
.mvp-setc .mvp-setc-btn { flex: 1 1 0; width: auto; height: auto; min-height: 30px; font-size: 13px; border-radius: 9px; }
.mvp-setc .mvp-setc-reset { flex: 0 0 auto; width: auto; height: 28px; }

/* the celebration's build-up (lists.js edmDrop()): the headline slams in and swells, still - then on the drop it
   thumps and shakes on the beat (128 bpm) */
.hype.hy-building .hy-big { animation: hy-slam .45s cubic-bezier(.2, 1.6, .4, 1) both, hy-build-grow 3.3s ease-in .45s forwards; }
.hype.hy-building .hy-eye { animation: none; }
@keyframes hy-build-grow { from { transform: scale(1); } to { transform: scale(1.12); } }
.hype.hy-dropped .hy-big { animation: hy-thump .469s ease-out infinite, hy-shake .469s linear infinite; }
.hype.hy-dropped .hy-eye { animation: hy-thump .469s ease-out infinite; }
/* an exercise added to the session since last time: a celebration of its own, in gold */
.syn-new { display: inline-block; vertical-align: 2px; padding: 1px 7px; border-radius: 99px; font: 800 10px/1.4 Arial, sans-serif; letter-spacing: .05em;
  text-transform: uppercase; color: #fff; background: linear-gradient(90deg, #c9a96a, #a8803f); }
.syn-added { margin: 3px 0 0 24px; font-size: 13.5px; font-weight: 700; color: #8a6d3b; }
.mvp-back-bar:has(a[href*="todayopen"]) { flex-direction: column; align-items: flex-start; } /* Back to All Clients above Back to Today's Clients */

/* a superset's rounds (mvp_superset_box()): a little dropdown at the top of its first exercise */
.mvp-ss-fold { margin: -2px 0 8px; }
.mvp-ss-fold > summary {
  display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; padding: 6px 10px; border-radius: 12px;
  background: rgba(255, 255, 255, .5); border: 1px solid rgba(47, 93, 66, .25); font-size: 13px; touch-action: manipulation;
}
.mvp-ss-fold > summary::-webkit-details-marker { display: none; }
.mvp-ss-mark { flex: none; font: 800 10.5px/1 Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--ok); }
.mvp-ss-names { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.mvp-ss-body { padding: 8px 4px 2px; }
.mvp-ss-body .mvp-rounds { margin: 0; flex-wrap: wrap; }
.mvp-ss-body .mvp-circuit-done { margin-top: 6px; }
.mvp-step:is(.tier-1, .tier-2) .mvp-ss-fold > summary { background: rgba(255, 255, 255, .9); }

/* ---- a circuit or a superset is ONE box (mvp_rounds_html() / mvp_superset_box()): its title line with the round boxes
   to check off and "Sets ▾", then its exercises as rows inside - each still opens, edits and checks off on its own ---- */
.mvp-section-head .mvp-rounds { order: 0; flex-basis: auto; flex-wrap: nowrap; margin: 0; overflow: visible; }
.mvp-section-head:has(.mvp-rounds) { flex-wrap: wrap; row-gap: 4px; }
.mvp-round-boxes { gap: 4px; align-items: center; }
.mvp-round-boxes .mvp-round { width: 28px; height: 28px; margin: 0; font-size: 15px; }
.mvp-round-boxes .mvp-rounds-count { margin: 0 0 0 2px; }
.mvp-ss-fold { position: relative; margin: 0; }
.mvp-ss-fold > summary {
  display: inline-flex; align-items: center; gap: 4px; list-style: none; cursor: pointer; padding: 4px 10px; border-radius: 99px;
  background: rgba(47, 93, 66, .08); border: 1px solid rgba(47, 93, 66, .25); font: 700 11px/1.2 Arial, sans-serif; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ok); touch-action: manipulation;
}
.mvp-ss-fold > summary::-webkit-details-marker { display: none; }
.mvp-ss-fold[open] > summary { background: var(--ok); color: #fff; }
.mvp-ss-fold > .mvp-ss-body { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 8px 2px 4px; }
.mvp-ss-body .mvp-rounds { margin: 0; }
.mvp-ss-body .mvp-circuit-done { margin: 0; }
/* the circuit's box */
.mvp-section.mvp-circuit > .mvp-steps {
  gap: 0; padding: 2px 12px; border-radius: 18px; background: rgba(255, 253, 246, .92); border: 1.5px solid rgba(47, 93, 66, .35);
}
.mvp-section.mvp-circuit > .mvp-circuit-done { margin: 8px 0 4px; }
/* a superset's box: its exercises' rows framed together, the first one carrying the title line */
.mvp-steps > .mvp-step.mvp-in-ss { background: rgba(255, 253, 246, .92); border: 1.5px solid rgba(47, 93, 66, .35); }
.mvp-steps > .mvp-step.ss-first { border-bottom: 0; border-radius: 18px 18px 0 0; }
.mvp-steps > .mvp-step.ss-mid { border-top: 0; border-bottom: 0; border-radius: 0; margin-top: -8px; }
.mvp-steps > .mvp-step.ss-last { border-top: 0; border-radius: 0 0 18px 18px; margin-top: -8px; }
.mvp-ss-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 2px 0 8px; margin-bottom: 6px; border-bottom: 1px solid rgba(29, 54, 38, .12); }
.mvp-ss-mark { flex: none; font: 800 11px/1 Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--ok); }
/* rows inside a box: no box of their own - a hairline between them; the one you're on marked with a green bar */
:is(.mvp-section.mvp-circuit > .mvp-steps > .mvp-step, .mvp-steps > .mvp-step.mvp-in-ss) {
  box-shadow: none !important; border-radius: 0; padding-left: 4px; padding-right: 4px;
}
.mvp-section.mvp-circuit > .mvp-steps > .mvp-step { background: none !important; border-bottom: 1px solid rgba(29, 54, 38, .1); }
.mvp-section.mvp-circuit > .mvp-steps > .mvp-step:last-child { border-bottom: 0; }
.mvp-steps > .mvp-step.mvp-in-ss { background: rgba(255, 253, 246, .92) !important; }
.mvp-steps > .mvp-step.ss-first { border-radius: 18px 18px 0 0 !important; }
.mvp-steps > .mvp-step.ss-last { border-radius: 0 0 18px 18px !important; }
.mvp-steps > .mvp-step.ss-mid, .mvp-steps > .mvp-step.ss-last { box-shadow: inset 0 1px 0 rgba(29, 54, 38, .1) !important; }
:is(.mvp-circuit > .mvp-steps, .mvp-steps) > .mvp-step:is(.mvp-in-ss, .mvp-in-ss.tier-1, .mvp-in-ss.tier-2),
.mvp-section.mvp-circuit > .mvp-steps > .mvp-step:is(.tier-1, .tier-2) {
  --row-text: var(--text);
}
:is(.mvp-section.mvp-circuit > .mvp-steps > .mvp-step, .mvp-steps > .mvp-step.mvp-in-ss):is(.tier-1, .tier-2)
  :is(.cname, .devour-byline, .budget-note, .mvp-last-session, .mvp-step-drag-handle) { color: var(--text) !important; }
:is(.mvp-section.mvp-circuit > .mvp-steps > .mvp-step, .mvp-steps > .mvp-step.mvp-in-ss):is(.tier-1, .tier-2) a.mvp-stats-link,
:is(.mvp-section.mvp-circuit > .mvp-steps > .mvp-step, .mvp-steps > .mvp-step.mvp-in-ss):is(.tier-1, .tier-2) .mvp-remove-exercise button {
  background: rgba(47, 93, 66, .1) !important; color: var(--ok) !important; }
:is(.mvp-section.mvp-circuit > .mvp-steps > .mvp-step, .mvp-steps > .mvp-step.mvp-in-ss):is(.tier-1, .tier-2) .devour-edit > summary {
  background: rgba(47, 93, 66, .1); color: var(--ok); border-color: rgba(47, 93, 66, .3); }
:is(.mvp-section.mvp-circuit > .mvp-steps > .mvp-step, .mvp-steps > .mvp-step.mvp-in-ss):is(.tier-1, .tier-2) .farrell-move button:not(:disabled) {
  background: rgba(47, 93, 66, .1); color: var(--ok); }
:is(.mvp-section.mvp-circuit > .mvp-steps > .mvp-step, .mvp-steps > .mvp-step.mvp-in-ss):is(.tier-1, .tier-2) .mvp-complete {
  background: var(--ok) !important; border-color: var(--ok) !important; }
:is(.mvp-section.mvp-circuit > .mvp-steps > .mvp-step, .mvp-steps > .mvp-step.mvp-in-ss):is(.tier-1, .tier-2) .mvp-complete::before { color: #fff !important; }
:is(.mvp-section.mvp-circuit > .mvp-steps > .mvp-step, .mvp-steps > .mvp-step.mvp-in-ss).tier-1 .devour-info { box-shadow: inset 4px 0 0 var(--gold2); padding-left: 10px; }
/* inside a circuit's or superset's box the exercises have no ✓ / ↺ of their own: the box checks them all off (its last
   round box, or ✓ Circuit / Superset done) and ↺ Uncheck takes them back */
:is(.mvp-section.mvp-circuit > .mvp-steps > .mvp-step, .mvp-steps > .mvp-step.mvp-in-ss) > .devour-grid > :is(.mvp-complete, .mvp-undo-form) { display: none; }
:is(.mvp-section.mvp-circuit > .mvp-steps > .mvp-step, .mvp-steps > .mvp-step.mvp-in-ss) > .devour-grid { grid-template-columns: 1fr; }

/* ---- Script Editor: Quotes & Ponders (ponder_card()) ---- */
.ponder-add { display: grid; gap: 6px; margin-bottom: 10px; }
.ponder-add textarea, .ponder-add input[type=text] { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; }
.ponder-kinds { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ponder-kinds .go { margin-left: auto; }
.ponder-kind input, .ponder-filter input { position: absolute; opacity: 0; pointer-events: none; }
.ponder-kind b, .ponder-filter b {
  display: inline-block; padding: 6px 14px; border-radius: 99px; cursor: pointer; font: 700 12px/1.2 Arial, sans-serif; letter-spacing: .03em;
  background: rgba(47, 93, 66, .08); color: var(--ok); border: 1px solid rgba(47, 93, 66, .25);
}
.ponder-kind input:checked + b, .ponder-filter input:checked + b { background: var(--ok); color: #fff; border-color: var(--ok); }
.ponder-filter { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; }
.ponder-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ponder-item { padding: 14px 4px 12px; border-bottom: 1px solid rgba(29, 54, 38, .1); }
.ponder-item:last-child { border-bottom: 0; }
.ponder-text { font-family: 'Cormorant Garamond', serif; font-size: 21px; font-style: italic; line-height: 1.3; color: var(--text); }
.ponder-item[data-kind="ponder"] .ponder-text { font-style: normal; }
.ponder-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ponder-who { font-size: 14px; color: var(--dim); }
.ponder-chip { font-size: 11px; }
.ponder-item[data-kind="ponder"] .ponder-chip { background: rgba(176, 141, 87, .2); color: #6e5426; }
.ponder-foot .devour-edit { flex-basis: 100%; }
.ponder-form textarea { width: 100%; box-sizing: border-box; font: inherit; }
/* All / Quotes / Ponders: no reload, just which ones show */
.ponder-card:has(input[name="ponder-show"][value="quote"]:checked) .ponder-item[data-kind="ponder"],
.ponder-card:has(input[name="ponder-show"][value="ponder"]:checked) .ponder-item[data-kind="quote"] { display: none; }
.ponder-add textarea, .ponder-add input[type=text], .ponder-form textarea, .ponder-form input[type=text] {
  padding: 9px 12px; border: 1px solid rgba(47, 93, 66, .3); border-radius: 12px; background: rgba(255, 255, 255, .75); color: var(--text); outline: none;
}
.ponder-add textarea:focus, .ponder-add input[type=text]:focus { border-color: var(--ok); }
.ponder-add .go { padding: 8px 22px; border: 0; border-radius: 99px; background: var(--ok); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }