/* Drook Studio: styles for edit, messages, numbers, history, business, account, admin views
   and the charts. Uses the tokens from app.css (--bg --s1 --s2 --s3 --ink --ink2 --ink3 --ring
   --ring2 --paper --radius-card --radius-panel --ease). Shared building blocks are wrapped in
   :where() so app.css always wins when it defines the same class. */

/* ---------- shared fallbacks (zero specificity) ---------- */
/* .btn and friends set display, which would otherwise beat the hidden attribute */
[hidden] { display: none !important; }
:where(.vh) { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
:where(.view-head) { margin: 0 0 1.2632rem; }
:where(.view-head h1) { font-size: clamp(1.5789rem, 5vw, 2.2105rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.4211rem; }
:where(.lede) { color: var(--ink2); margin: 0; max-width: 62ch; }
:where(.muted) { color: var(--ink2); }
:where(.small) { font-size: 0.86em; }
:where(.block) { display: block; }
:where(.card) { background: var(--s1); border: 1px solid var(--ring); border-radius: var(--radius-card, 1.4737rem); padding: 1.1579rem; }
:where(.btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5263rem;
  min-height: 2.7368rem; padding: 0 1.1579rem; border-radius: 52.5789rem; border: 1px solid var(--ring2);
  background: var(--s2); color: var(--ink); font: inherit; font-weight: 500; cursor: pointer;
  text-decoration: none; transition: box-shadow .3s var(--ease, ease), background .3s var(--ease, ease);
}
:where(.btn:hover) { box-shadow: 0 0 0 0.2105rem rgba(255,255,255,.06), 0 0 1.4737rem rgba(255,255,255,.08); }
.pill:focus-visible, .choice:focus-within, .chart-svg:focus-visible { outline: 0.1579rem solid var(--ink); outline-offset: 0.1579rem; }
:where(.btn[disabled]) { opacity: .5; cursor: not-allowed; box-shadow: none; }
:where(.btn.primary) { background: var(--ink); color: var(--bg); border-color: var(--ink); }
:where(.btn.ghost) { background: transparent; }
:where(.btn.small) { min-height: 2.7368rem; padding: 0 0.8421rem; font-size: .9em; }
.pill {
  display: inline-flex; align-items: center; gap: 0.4211rem; min-height: 2.7368rem; padding: 0 1.0526rem; border-radius: 52.5789rem;
  border: 1px solid var(--ring2); background: transparent; color: var(--ink); font: inherit; cursor: pointer;
  transition: box-shadow .3s var(--ease, ease), background .3s var(--ease, ease); white-space: nowrap;
}
.pill:hover { box-shadow: 0 0 1.1579rem rgba(255,255,255,.08); }
.pill[aria-pressed="true"], .pill[aria-selected="true"] { background: var(--accent, var(--ink)); color: var(--accent-ink, var(--bg)); border-color: var(--ink); font-weight: 500; }
:where(.tag) { display: inline-flex; align-items: center; gap: 0.3158rem; font-size: .82em; color: var(--ink2); border: 1px solid var(--ring2); border-radius: 52.5789rem; padding: 0.2105rem 0.6316rem; margin: 0 0 0.5263rem; }
:where(.note) { display: flex; gap: 0.5263rem; align-items: flex-start; color: var(--ink2); border: 1px solid var(--ring); border-radius: 1.0526rem; padding: 0.7368rem 0.9474rem; margin: 0 0 0.9474rem; }
:where(.ic) { display: inline-flex; width: 1.15em; height: 1.15em; flex: none; }
:where(.ic svg) { width: 100%; height: 100%; }
:where(.dot-online) { width: 0.5263rem; height: 0.5263rem; border-radius: 50%; background: #3ecf8e; box-shadow: 0 0 0.5263rem rgba(62,207,142,.6); display: inline-block; }

/* form bits */
:where(.field) { margin: 0 0 0.9474rem; }
:where(.field-label) { display: block; font-weight: 500; margin: 0 0 0.4211rem; }
:where(.field-error), :where(.edit-error) { color: var(--ink); font-weight: 500; margin: 0.4211rem 0 0; padding-left: 0.7368rem; border-left: 0.1579rem solid var(--ink); }
:where(.edit-input) {
  display: block; width: 100%; box-sizing: border-box; min-height: 2.9474rem; padding: 0.7368rem 0.9474rem;
  background: var(--s2); color: var(--ink); border: 1px solid var(--ring2); border-radius: 0.9474rem;
  font: inherit; line-height: 1.5;
}
:where(textarea.edit-input) { resize: vertical; }
:where(select.edit-input) { appearance: none; padding-right: 2.3158rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.2632rem) 50%, calc(100% - 0.9474rem) 50%; background-size: 0.3158rem 0.3158rem; background-repeat: no-repeat; }
:where(.edit-input:focus) { outline: 0.1579rem solid var(--ink); outline-offset: 0.1053rem; }
:where(.edit-input[disabled]) { opacity: .65; }

/* big radio choices */
.edit-choices { display: grid; gap: 0.5263rem; margin: 0 0 0.8421rem; }
.choice {
  display: flex; align-items: center; gap: 0.6316rem; min-height: 2.9474rem; padding: 0.6316rem 0.9474rem; border-radius: 1.0526rem;
  border: 1px solid var(--ring2); background: var(--s2); cursor: pointer;
  transition: box-shadow .3s var(--ease, ease);
}
.choice:hover { box-shadow: 0 0 1.2632rem rgba(255,255,255,.07); }
.choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.choice:has(input:checked)::after { content: "Picked"; margin-left: auto; font-size: .8em; color: var(--ink2); }
.choice-text { display: flex; flex-direction: column; gap: 0.1053rem; }

/* ---------- edit ---------- */
.edit-tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6316rem; margin: 0 0 0.8421rem; }
.edit-pages { display: flex; gap: 0.5263rem; overflow-x: auto; padding: 0.2105rem 0.1053rem 0.4211rem; scrollbar-width: thin; max-width: 100%; }
.edit-devices { display: flex; align-items: center; gap: 0.4211rem; }
.edit-devices-label { color: var(--ink2); }
.edit-frame { margin: 0; }
.edit-parts { margin: 0.9474rem 0 0; }
.edit-parts summary { display: flex; align-items: center; gap: 0.5263rem; min-height: 2.7368rem; cursor: pointer; font-weight: 500; list-style: none; }
.edit-parts summary::-webkit-details-marker { display: none; }
.edit-parts-group { font-size: 1em; color: var(--ink2); font-weight: 500; margin: 0.9474rem 0 0.4211rem; }
.edit-parts-ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4211rem; }
.edit-parts-ul li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5263rem; }
.edit-parts-ul .tag { margin: 0; }
.edit-part { justify-content: flex-start; text-align: left; }
.edit-sheet { display: grid; gap: 0.7368rem; }
.edit-sheet > * { margin-top: 0; margin-bottom: 0; }
.edit-sheet-actions { display: flex; flex-wrap: wrap; gap: 0.5263rem; margin-top: 0.3158rem; }
.edit-count { margin: 0.4211rem 0 0; color: var(--ink2); font-size: .9em; }
.edit-count.over { color: var(--ink); font-weight: 700; }
.edit-count.over::before { content: "Too long: "; }
.edit-rich { min-height: 9.4737rem; max-height: 50vh; overflow-y: auto; }
.edit-rich p { margin: 0 0 .8em; }
.edit-rich a { color: var(--ink); text-decoration: underline; }
.edit-rich-tools { display: flex; flex-wrap: wrap; gap: 0.4211rem; margin: 0 0 0.5263rem; }
.edit-linkrow { display: flex; flex-wrap: wrap; gap: 0.4211rem; margin: 0 0 0.5263rem; }
.edit-linkrow .edit-input { flex: 1 1 11.5789rem; }
.edit-linkrow[hidden] { display: none; }
.edit-ai { margin-top: 0.7368rem; }
.edit-ai-row { display: flex; flex-wrap: wrap; gap: 0.5263rem; }
.edit-ai-menu { display: flex; flex-wrap: wrap; gap: 0.4211rem; margin: 0.5263rem 0 0; }
.edit-ai-menu[hidden] { display: none; }
.edit-ai-status { margin: 0.4211rem 0 0; min-height: 1.5em; }
.edit-photo { display: block; width: 100%; max-height: 15.7895rem; object-fit: contain; background: var(--s2); border-radius: 1.0526rem; border: 1px solid var(--ring); }
.edit-choose { width: 100%; min-height: 3.3684rem; font-size: 1.05em; cursor: pointer; }
/* the file input sits inside the label: show the focus ring on the label */
.edit-choose:focus-within { outline: 0.1579rem solid var(--ink); outline-offset: 0.1579rem; }
.edit-list { list-style: none; margin: 0 0 0.6316rem; padding: 0; display: grid; gap: 0.6316rem; }
.edit-list-row { display: grid; gap: 0.4211rem; padding: 0.6316rem; border: 1px solid var(--ring); border-radius: 1.0526rem; }
.edit-list-btns { display: flex; flex-wrap: wrap; gap: 0.6316rem; } /* room between Up, Down and Remove */
.edit-readonly { white-space: pre-wrap; }

/* ---------- messages ---------- */
.num-ranges { display: flex; flex-wrap: wrap; gap: 0.5263rem; margin: 0 0 0.9474rem; }

/* ---------- numbers ---------- */
.num-card h2, .num-ask h2, .biz-section h2 { font-size: 1.2em; margin: 0 0 0.7368rem; font-weight: 700; display: flex; align-items: center; gap: 0.5263rem; }
.num-ask { margin: 0.8421rem 0 0; display: grid; gap: 0.6316rem; }
.num-ask-row { display: flex; gap: 0.5263rem; }
.num-chips { display: flex; flex-wrap: wrap; gap: 0.4211rem; }
.num-answer-text { margin: 0; padding: 0.9474rem 1.0526rem; border-radius: 1.0526rem; background: var(--s2); border: 1px solid var(--ring); white-space: pre-wrap; }

/* chart */
.chart { position: relative; }
.chart-stage { position: relative; width: 100%; min-height: 11.5789rem; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; border-radius: 0.6316rem; }
.chart-grid line { stroke: var(--ring); stroke-width: 1; }
.chart-ylab, .chart-xlab text { fill: var(--ink2); }
.chart-tick { stroke: var(--ring2); }
.chart-line { stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-area { fill: var(--ink); opacity: .07; }
.chart-dot { fill: var(--ink); }
.chart-cross line { stroke: var(--ink2); stroke-width: 1; stroke-dasharray: 3 4; }
.chart-cross circle { fill: var(--bg); stroke: var(--ink); stroke-width: 2.5; }
.chart-tip {
  position: absolute; z-index: 2; pointer-events: none; display: grid; gap: 0.1053rem; min-width: 7.3684rem;
  padding: 0.5263rem 0.7368rem; border-radius: 0.8421rem; background: var(--s3); border: 1px solid var(--ring2);
  box-shadow: 0 0.4211rem 1.5789rem rgba(0,0,0,.4); font-size: .9em; white-space: nowrap;
}
.chart-tip[hidden] { display: none; }
.chart-tip span { color: var(--ink2); }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7368rem; }
.bars-head { display: flex; justify-content: space-between; gap: 0.6316rem; margin: 0 0 0.3158rem; }
.bars-label { overflow-wrap: anywhere; }
.bars-value { color: var(--ink2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bars-track { height: 0.5263rem; border-radius: 52.5789rem; background: var(--s3); overflow: hidden; }
.bars-fill { height: 100%; border-radius: 52.5789rem; background: var(--ink); opacity: .85; }
.bars-hint { color: var(--ink3); font-size: .85em; }
.bars-empty { color: var(--ink2); margin: 0; }
.spark { display: inline-block; vertical-align: middle; }
.spark-line { stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.spark-dot { fill: var(--ink); }


/* ---------- business ---------- */
.biz-form { display: grid; gap: 0.8421rem; }
.biz-section { display: grid; gap: 0.2105rem; }
.biz-hours { display: grid; gap: 0.6316rem; margin: 0 0 0.6316rem; }
.biz-row { display: grid; grid-template-columns: minmax(9.4737rem, 1.2fr) 2fr; gap: 0.6316rem 0.8421rem; align-items: end; background: var(--s2); padding: 0.8421rem; }
.biz-days, .biz-time { display: block; }
.biz-times { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6316rem; }
.biz-closed-note { margin: 0; min-height: 2.9474rem; display: flex; align-items: center; color: var(--ink2); }
.biz-row-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5263rem; }
.biz-toggle { display: inline-flex; align-items: center; gap: 0.6316rem; min-height: 2.7368rem; cursor: pointer; }
.biz-check { width: 1.4737rem; height: 1.4737rem; accent-color: var(--ink); flex: none; margin: 0; }
.biz-save { position: sticky; bottom: 0.6316rem; z-index: 4; display: flex; justify-content: flex-end; }
.biz-save .btn { box-shadow: 0 0.5263rem 2.1053rem rgba(0,0,0,.45); }

/* ---------- account rows (admin.js uses these; the account screen lives in css/account.css) ---------- */
.acc-list { list-style: none; margin: 0 0 0.6316rem; padding: 0; display: grid; gap: 0.5263rem; }
.acc-person { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5263rem; padding: 0.6316rem 0.8421rem; border: 1px solid var(--ring); border-radius: 1.0526rem; }
.acc-person p { margin: 0; overflow-wrap: anywhere; }

/* ---------- admin ---------- */

/* ---------- light mode tweaks ---------- */
:root[data-theme="light"] :root[data-theme="light"] .chart-tip, :root[data-theme="light"] .biz-save .btn { box-shadow: 0 0.5263rem 1.5789rem rgba(0,0,0,.12); }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .num-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .num-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :where(.card) { padding: 0.9474rem; }
  .edit-tools { flex-direction: column; }
  .num-tiles { gap: 0.5263rem; }
  .num-big { font-size: 1.7895rem; }
  .biz-row { grid-template-columns: 1fr; }
  .biz-save .btn, .edit-sheet-actions .btn { flex: 1 1 100%; }
}

/* above the phone tab bar (same breakpoint and height as the bar) */
@media (max-width: 760px) {
  .biz-save { bottom: calc(var(--tab) + 0.6316rem + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .pill, .choice, :where(.btn), .pill { transition: none; }
}

/* ================ home (home.js) : owned by the home view, start ================ */
/* Home: greeting + health, the lit ask panel (the one .paper and .lightring), this week as an
   asymmetric 7/5 split (visitors chart left, how people reached you + funnel right), online
   sales row, newest messages, watchdog notes. Glow only on hover, nothing moves. */

/* greeting */
.home-greet { margin: 0.4211rem 0 1.6842rem; }
.home-greet .home-date { margin-bottom: 0.7368rem; }
.home-greet h1 { font-size: clamp(2.4rem, 1.5rem + 3vw, 3.6rem); letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance; }
.home-greet-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.7368rem 1.2632rem; flex-wrap: wrap; margin-top: 0.8421rem; }
.home-sub { color: var(--ink2); font-size: 1.12rem; margin: 0; }
.home-health {
  display: inline-flex; align-items: center; gap: 0.3158rem 0.7368rem; flex-wrap: wrap;
  padding: 0 0.3158rem 0 1.0526rem; min-height: 3.1579rem; border-radius: var(--r-pill);
  background: var(--glass), var(--s1); box-shadow: var(--edge);
}
.home-health .status { font-weight: 700; }
.home-health-sub { color: var(--ink3); font-size: var(--fs-small); }
.home-health .btn-quiet { padding: 0 0.8421rem; }

/* the lit panel */
.home-ask { padding: 2.3158rem 2.3158rem 2.1053rem; }
.home-ask-head { display: flex; align-items: center; gap: 0.9474rem; }
.home-ask-mark {
  width: 2.7368rem; height: 2.7368rem; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper-ink); color: var(--paper);
  box-shadow: 0 0 0 0.3158rem color-mix(in srgb, var(--paper-ink) 6%, transparent);
}
.home-ask-mark .icon { width: 1.2632rem; height: 1.2632rem; }
.home-ask .ask-label { font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.15rem); letter-spacing: -0.03em; line-height: 1.12; margin: 0; text-wrap: balance; }
.home-ask-promise { color: var(--paper-ink2); font-size: 1.05rem; margin: 0.7368rem 0 1.1579rem; max-width: 60ch; }
.home-ask textarea { min-height: 6.7368rem; font-size: 1.15rem; }
.home-ask .ask-try { margin-top: 1.0526rem; }
.home-ask .btn-row { margin-top: 1.4737rem; }
/* the light ring: a quiet turn at rest, full light while they are typing in the box */
.home .home-ask.lightring::before { opacity: .5; transition: opacity .6s var(--ease); }
.home .home-ask.lightring:focus-within::before { opacity: 1; }
.home .home-ask { transition: box-shadow .6s var(--ease); }
.home .home-ask:focus-within { box-shadow: 0 0 0 1px rgba(255,255,255,.7) inset, 0 2.1053rem 5.7895rem -1.8947rem rgba(255,255,255,.42), 0 0 3.6842rem -0.9474rem rgba(255,255,255,.3); }
:root[data-theme="light"] .home .home-ask:focus-within { box-shadow: 0 1.5789rem 4.2105rem -1.5789rem rgba(0,0,0,.55); }
/* the dock owns the light ring while it shows: the panel only lights when it is being used */
body:has(.dock) .home .home-ask.lightring:not(:focus-within)::before { opacity: 0; }

/* this week */
.home-week { margin-top: 2.9474rem; }
.home-week > .section-head { margin-top: 0; align-items: center; }
.home-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.0526rem; align-items: start; }
.home-split > .card { min-width: 0; }
.home-visits { padding: 1.6842rem 1.6842rem 1.3684rem; }
.home-visits-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.6316rem 1.2632rem; flex-wrap: wrap; }
.home-visits-num .eyebrow, .home-reach .eyebrow { margin: 0 0 0.6316rem; }
.home-big { font-size: clamp(3.4rem, 2.4rem + 3.2vw, 4.8rem); font-weight: 700; letter-spacing: -0.05em; line-height: .95; font-variant-numeric: tabular-nums; }
.home-big-label { font-size: 1.12rem; font-weight: 500; margin-top: 0.5263rem; }
.home-visits-cmp { padding-bottom: 0.3158rem; }
.home-visits-cmp .delta { font-size: 1rem; padding: 0.4211rem 0.7368rem; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--ring2); }
.home-chart { margin: 1.3684rem -0.3158rem 0; min-height: 12.1053rem; }
.home-legend { margin-top: 0.4211rem; }
.home-verdict { color: var(--ink2); margin-top: 0.7368rem; }
.home-quiet { color: var(--ink2); margin-top: 1.1579rem; padding: 1.3684rem; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--ring); }

.home-reach { display: flex; flex-direction: column; padding: 1.5789rem 1.5789rem 1.4737rem; }
.home-reach-list { list-style: none; margin: 0; padding: 0; }
.home-reach-row { display: flex; gap: 0.8421rem; align-items: flex-start; padding: 0.8421rem 0; }
.home-reach-row + .home-reach-row { box-shadow: 0 -1px 0 var(--ring); }
.home-reach-row:first-child { padding-top: 0.2105rem; }
.home-reach-row .round { margin-top: 0.2105rem; }
.home-reach-main { display: grid; gap: 0.2105rem; min-width: 0; }
.home-reach-num { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.home-reach-label { font-weight: 500; }
.home-reach-say { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.2105rem 0.8421rem; margin-top: auto; padding-top: 0.9474rem; box-shadow: 0 -1px 0 var(--ring); font-weight: 700; font-size: 1.05rem; text-wrap: balance; }
.home-reach-more { display: inline-flex; align-items: center; gap: 0.4211rem; min-height: 2.7368rem; color: var(--ink2); font-weight: 500; text-decoration: none; border-radius: var(--r-pill); padding: 0 0.2105rem; transition: color var(--t) var(--ease), text-shadow var(--t) var(--ease); }
.home-reach-more:hover { color: var(--ink); text-shadow: 0 0 0.9474rem var(--glow); }

/* online sales */
.home-money-wrap:empty, .home-inbox-wrap:empty, .home-notes-wrap:empty { display: none; }
.home-money-wrap { margin-top: 1.0526rem; }
a.card.home-money, .card.home-money {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .95fr) auto;
  align-items: center; gap: 1.0526rem 1.6842rem; padding: 1.4737rem 1.5789rem;
}
.home-money-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4211rem 0.6316rem; margin: 0 0 0.4211rem; }
.home-money-label { white-space: nowrap; }
.home-money-eyebrow .badge { letter-spacing: .01em; text-transform: none; }
.home-money-line { font-size: clamp(1.45rem, 1.1rem + 1vw, 1.85rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.home-money-num { font-variant-numeric: tabular-nums; }
.home-money-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3158rem 0.8421rem; margin-top: 0.4211rem; color: var(--ink2); font-size: var(--fs-small); }
.home-money-spark { min-width: 0; height: 4.8421rem; }
.home-money-side { display: grid; gap: 0.6316rem; }
.home-money-side p { display: grid; gap: 1px; line-height: 1.35; }
.home-money-side .faint { font-size: var(--fs-small); }
.home-money .skel { grid-column: 1 / -1; }

/* newest messages */
.home-inbox-wrap { margin-top: 1.0526rem; }
.card.home-inbox { padding: 1.3684rem 0.9474rem 0.7368rem; box-shadow: var(--edge), var(--e1), 0 0 4.2105rem -1.7895rem var(--glow); }
.home-inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6316rem 0.8421rem; flex-wrap: wrap; padding: 0 0.6316rem 0.7368rem; }
.home-inbox-head h2 { font-size: var(--fs-2); letter-spacing: -0.02em; }
.home-msg { align-items: flex-start; padding: 0.9474rem 0.8421rem; }
.home-initials { width: 2.7368rem; height: 2.7368rem; font-weight: 700; font-size: 1rem; letter-spacing: .02em; color: var(--ink); }
.home-msg .row-main { display: grid; gap: 0.2105rem; }
.home-msg-top { display: flex; align-items: center; gap: 0.5263rem; flex-wrap: wrap; }
.home-msg-top .row-title { font-size: 1.08rem; }
.home-msg-gist { color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-msg-go { align-self: center; color: var(--ink3); transition: color var(--t) var(--ease); }
.home-msg:hover .home-msg-go { color: var(--ink); }
.home-msg:hover .home-initials { box-shadow: inset 0 0 0 1px var(--ring3), 0 0 1.1579rem -0.2105rem var(--glow); }
.home-inbox-empty {
  display: flex; align-items: center; gap: 0.9474rem; min-height: 4.4211rem; padding: 0.8421rem 1.1579rem;
  border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--ring); color: inherit; text-decoration: none;
  transition: box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
.home-inbox-empty:hover { background: var(--hi); box-shadow: inset 0 0 0 1px var(--ring2), 0 0 2.1053rem -0.7368rem var(--glow); }
.home-inbox-empty-text { flex: 1; display: grid; gap: 0.1053rem; }
.home-inbox-empty-text span { color: var(--ink3); font-size: var(--fs-small); }
.home-inbox-empty-go { color: var(--ink3); }

/* things we noticed */
.home-notes-wrap { margin-top: 2.9474rem; }
.home-notes-wrap > .section-head { margin-top: 0; margin-bottom: 0.3158rem; }
.home-notes-sub { color: var(--ink2); margin-bottom: 0.9474rem; }
.home-notes { list-style: none; margin: 0; padding: 0; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--ring); }
.home-note { display: flex; gap: 0.9474rem; align-items: flex-start; padding: 1.2632rem 1.3684rem; }
.home-note + .home-note { box-shadow: 0 -1px 0 var(--ring); }
.home-note-light { width: 0.5263rem; height: 0.5263rem; border-radius: 50%; flex: none; margin-top: 0.4737rem; background: var(--ink3); box-shadow: 0 0 0 0.2632rem var(--hi); }
.home-note-light.is-warn { background: var(--ink); box-shadow: 0 0 0 0.2632rem var(--hi), 0 0 0.8421rem var(--glow); }
.home-note-main { flex: 1; min-width: 0; }
.home-note-label { color: var(--ink3); font-size: var(--fs-small); font-weight: 700; }
.home-note-issue { font-size: 1.08rem; font-weight: 500; margin-top: 0.1053rem; }
.home-note-sugg { margin-top: 0.5263rem; padding: 0.6316rem 0.8421rem; border-radius: var(--r-md); background: var(--s2); box-shadow: inset 0 0 0 1px var(--ring); }
.home-note-actions { display: flex; flex-wrap: wrap; gap: 0.5263rem; margin-top: 0.7368rem; }

/* in between sizes */
@media (max-width: 1180px) {
  a.card.home-money, .card.home-money { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .home-money-side { grid-column: 1; }
  .home-money-go { grid-column: 2; justify-self: end; align-self: end; }
  /* the rail leaves too little room for two columns here: stack, and lay the reach rows out side by side */
  .home-split { grid-template-columns: 1fr; }
  .home-reach-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.4737rem; }
  .home-reach-row, .home-reach-row:first-child { flex-direction: column; gap: 0.6316rem; padding: 0.3158rem 0 1.0526rem; }
  .home-reach-row .round { margin-top: 0; }
  .home-reach-row + .home-reach-row { box-shadow: none; }
}

/* phone */
@media (max-width: 760px) {
  .home-greet { margin: 0.2105rem 0 1.2632rem; }
  .home-greet-foot { flex-direction: column; align-items: flex-start; }
  .home-health { padding: 0.5263rem 0.5263rem 0.5263rem 0.9474rem; border-radius: var(--r-lg); width: 100%; }
  .home-health .btn-quiet { margin-left: -0.8421rem; }
  .home-ask { padding: 1.3684rem 1.0526rem 1.1579rem; }
  .home-ask-head { align-items: flex-start; gap: 0.7368rem; }
  .home-ask-mark { width: 2.3158rem; height: 2.3158rem; }
  .home-ask .btn-row { flex-direction: column-reverse; align-items: stretch; }
  .home-ask .btn-row > .btn, .home-ask .ask-actions, .home-ask .ask-actions .btn { width: 100%; }
  .home-ask .ask-actions { flex-direction: column-reverse; }
  .home-week { margin-top: 2.3158rem; }
  .home-visits, .home-reach { padding: 1.2632rem 1.0526rem 1.1579rem; }
  .home-reach-list { grid-template-columns: 1fr; }
  .home-reach-row, .home-reach-row:first-child { flex-direction: row; gap: 0.8421rem; padding: 0.8421rem 0; }
  .home-reach-row:first-child { padding-top: 0.2105rem; }
  .home-reach-row + .home-reach-row { box-shadow: 0 -1px 0 var(--ring); }
  .home-chart { margin: 1.0526rem -0.2105rem 0; min-height: 11.5789rem; }
  /* plain words with the arrow, not a pill that wraps into a lozenge */
  .home-visits-cmp .delta { padding: 0; border-radius: 0; box-shadow: none; }
  a.card.home-money, .card.home-money { grid-template-columns: 1fr; gap: 0.9474rem; padding: 1.2632rem 1.0526rem; }
  .home-money-side, .home-money-go { grid-column: auto; justify-self: stretch; }
  .home-money-go { width: 100%; }
  .card.home-inbox { padding: 1.1579rem 0.3158rem 0.4211rem; }
  .home-msg { padding: 0.8421rem 0.6316rem; gap: 0.7368rem; }
  .home-initials { width: 2.3158rem; height: 2.3158rem; }
  .home-msg-go { display: none; }
  .home-note { padding: 1.0526rem 0.9474rem; gap: 0.7368rem; }
  .home-note-actions .btn { flex: 1 1 auto; }
}
/* ================ home (home.js) : end ================ */