/* The calm redesign (Oct 16, 2026): Brandon's Home (today/owner-today.js, money-clear.js). Loaded after styles.css, so a rule here wins over the same rule there.
   Docs/Hub design standard.md has the rules (Motion; Calm and focus). Colours only from the tokens in styles.css.
   Order: the greeting and its status line, the hero (the one most urgent thing, or All clear), then smaller and quieter: the
   rest of Needs you in a fold, today's stops, Money. Nothing here animates (motion is the foundation's job). */

/* ---------- The greeting: the hello and "?" on one line, then the date and the status ---------- */
.owner-today { gap: 18px; }
.owner-today .greet { display: flex; flex-direction: column; gap: 0; }
.greet-row { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.owner-today .greet h1, .has-side .owner-today .greet h1 { flex: 1; min-width: 0; font: 800 1.875rem/1.05 var(--rt-cond); letter-spacing: .01em; color: var(--heading); overflow-wrap: anywhere; }
@media (min-width: 720px) { .owner-today .greet h1, .has-side .owner-today .greet h1 { font-size: 2.125rem; } }
.owner-today .greet-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: .9375rem; color: var(--text-3); }
.greet-status { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; margin-block: -6px; padding: 0 2px; border: 0; background: none; color: var(--text-2);
  font: inherit; font-size: .9375rem; cursor: pointer; }
.greet-status:hover { color: var(--text); }
.greet-status .gs-dot { display: none; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--alert); }
.greet-status.bad .gs-dot { display: inline-block; }
.greet-status .go { width: 14px; height: 14px; flex: none; color: var(--text-3); transform: rotate(-90deg); }
body.big-text .owner-today .greet-sub { font-size: 1.0625rem; }

/* ---------- The hero: the most urgent thing that needs him ---------- */
.home-hero .hero-v { font-size: 2.375rem; line-height: 1.04; }
@media (min-width: 900px) { .home-hero .hero-v { font-size: 3rem; } }
body.big-text .home-hero .hero-v { font-size: 2.625rem; }
.home-hero .hero-l { overflow-wrap: anywhere; }
.home-hero .hero-a .btn { min-height: 44px; }
.hero-calm .ichip { flex: none; }

/* ---------- The rest of Needs you: one quiet fold, then short flat rows ---------- */
.ot-needs { gap: 0; }
.ot-needs > .more { border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--border); }
.ot-needs > .more > .more-s { padding: 0 16px; color: var(--text); }
.ot-needs > .more > .more-b { padding: 0 6px 6px; }
.ot-needs .need-rows { gap: 0; }
.ot-needs .need-rows > li + li { border-top: 1px solid var(--border); }
.ot-needs .need-row { min-height: 52px; padding: 6px 10px; border-radius: var(--r-box); background: transparent; }
.ot-needs button.need-row:hover { background: var(--surface-2); }
.ot-needs .need-row .ichip { width: 32px; height: 32px; border-radius: 50%; background: transparent; color: var(--text-2); }
.ot-needs .need-row .ichip .ic { width: 20px; height: 20px; }
.ot-needs .nr-t { font: 600 .9375rem/1.3 var(--rt-body); }
.ot-needs .nr-n { font: 700 1.125rem/1 var(--rt-cond); color: var(--text-2); }

/* ---------- Today's stops: quieter heading, the same cards ---------- */
.ot-stops .sec-h { align-items: center; }
.owner-today .ot-stops .eb { font: 600 .9375rem/1.25 var(--rt-body); color: var(--text-2); }
.ot-stops .btn.link.push { min-height: 44px; margin-block: -8px; }
.ot-wrapup .ot-ws { text-transform: none; }

/* ---------- Money: the switch, two small boxes, then quiet folds ---------- */
.money { display: flex; flex-direction: column; gap: 12px; }
.money-h { gap: 0; }
.money-h .mp { margin-inline: auto; }
.money-tiles { gap: 10px; }
.money-tiles .tile { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-box); }
.money-tiles .tl { font-size: .8125rem; }
.money-tiles .tn { font-size: 1.875rem; }
.money .money-list { border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.money .money-list > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 16px; cursor: pointer; list-style: none; }
.money .money-list > summary::-webkit-details-marker { display: none; }
.money .money-list > summary .sub-h { flex: 1; min-width: 0; margin: 0; padding: 0; font: 600 .9375rem/1.3 var(--rt-body); color: var(--text); }
.money .money-list > summary .chev { margin-left: auto; width: 20px; height: 20px; color: var(--text-3); }
.money .money-empty { padding: 12px 16px; }
.money .money-empty .sub-h { padding: 0; font: 600 .9375rem/1.3 var(--rt-body); color: var(--text-2); }
.money .money-empty > .meta { padding: 2px 0 0; }
/* The quiet folds (Today's payments, Deposits, Waiting on a deposit) are the foundation's "more" row inside a card. */
.money .more.money-list > .more-s { padding: 0 16px; color: var(--text); }
.money .more.money-list > .more-b { padding: 0 16px 12px; }
.money .more-b .need-list { padding: 0; }
/* Balances owed: heading then rows with Clear at the right. */
.owed-card .owed-list .owed-row { padding: 6px 8px 6px 16px; }
.owed-card .owed-w .who { font-size: .9375rem; }
.owed-card .owed-w .m { font-size: .8125rem; }
.owed-card .owed-row > .amt { font-size: 1.25rem; }
.owed-card .more-rows > summary { padding: 12px 16px; min-height: 44px; }
.owed-card > .meta, .owed-card .owed-cleared { padding: 8px 16px 12px; }
/* Nobody owes anything: the same quiet box as an empty Deposits (the shared .money-list paddings left out). */
.money .money-list.owed-none { padding: 12px 16px; }
.money .money-list.owed-none .sub-h { padding: 0; font: 600 .9375rem/1.3 var(--rt-body); color: var(--text); }
.money .money-list.owed-none > .meta { padding: 2px 0 0; }
.owed-cleared-list .owed-row { padding-left: 0; }
.owed-cleared-list .owed-row .ib { flex: none; }
.money > .meta[data-money-updated] { padding: 0 4px; font-size: .8125rem; color: var(--text-3); }

/* ---------- On a computer: Needs you and the stops on the left, Money down the right ---------- */
@media screen and (min-width: 1000px) {
  .ot-grid { --ot-head: 0px; align-items: start; }
  .ot-grid > .ot-needs { grid-column: 1; grid-row: 1; }
  .ot-grid > .ot-stops.ot-stops { grid-column: 1; grid-row: 2; }
  .ot-grid > .ot-stops.ot-stops:first-child { grid-row: 1; }
  .ot-grid > .ot-stops.ot-stops:last-child { grid-column: 1 / -1; }
  .ot-grid > .money { grid-column: 2; grid-row: 1 / span 2; }
  .ot-grid > .money > .money-h { height: auto; justify-content: flex-start; }
}