/* 4nic.today — Look E. True black base, Blackhawks red accent, Cowboys silver for secondary text and
   borders, Cowboys royal blue for links and secondary buttons, white text, amber for money warnings.
   Type (Lexend version, 2026-10-28): Lexend everywhere, self-hosted (SIL OFL), for easier reading with dyslexia and
   dyscalculia: text a touch larger, roomier line height and letter spacing, left-aligned, no italics, no all-caps,
   and amounts lined up on the right in a steadier, slightly heavier figure. Flat panels, hairline borders, 3px corners.
   Same layout every day. Nothing readable below 16px. No red for warnings. */
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/assets/fonts/lexend-latin-variable.woff2) format("woff2"); }

:root {
  --bg: #000000;            /* true black */
  --panel: #0a0a0b;         /* flat panel, barely lifted */
  --panel-2: #121214;       /* inputs, pressed states */
  --line: #869397;          /* Cowboys silver: hairline borders */
  --line-soft: rgba(134, 147, 151, .38);
  --text: #ffffff;
  --muted: #869397;         /* Cowboys silver: secondary text */
  --accent: #CF0A2C;        /* Blackhawks red: main accent */
  --accent-ink: #ffffff;    /* text on red */
  --blue: #003594;          /* Cowboys royal blue: links, secondary buttons */
  --blue-2: #0a49bf;        /* royal blue, pressed / focus */
  --warn: #d9ad62;          /* money warnings: amber, never red */
  --radius: 3px;
  --sans: "Lexend", Verdana, Arial, sans-serif;
  --serif: var(--sans);     /* headings and figures use the same face now */
  --num: 600;               /* weight for amounts, times and dates */
}

* { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; font-size: 100%; }
@media (max-width: 600px) { html { font-size: 125%; } }
body {
  margin: 0; min-height: 100dvh; background: var(--bg);
  color: var(--text); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.55; text-align: left;
  letter-spacing: .015em; word-spacing: .06em; font-style: normal; text-transform: none;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
/* form controls do not inherit type by default */
input, button, select, textarea, option, datalist { font-family: inherit; font-size: inherit; letter-spacing: inherit; word-spacing: inherit; font-style: normal; text-transform: none; }
/* figures: lining, tabular where the face has them, a touch heavier, lined up on the right */
.num, .bill-amt, .v-amt, .venmo-grid dd, .help-big, .venmo-table td, .bills-table tbody td + td, .bills-table tfoot td, .ev-time, .week-table td + td,
.venmo-table tbody th:not(:first-child) { font-variant-numeric: tabular-nums lining-nums; font-weight: var(--num); letter-spacing: .01em; }
a { color: var(--text); text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover, a:focus-visible { text-decoration-color: var(--blue-2); }
p, li, .muted, .notice p { max-width: 70ch; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; font-style: normal; line-height: 1.3; letter-spacing: .01em; margin: 0 0 .4em; color: var(--text); }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.1rem; }
em, i { font-style: normal; font-weight: 700; }
strong { font-weight: 700; }
code { font-family: ui-monospace, Menlo, monospace; font-size: 1em; background: var(--panel-2); padding: .1em .35em; border-radius: var(--radius); }
[hidden] { display: none !important; }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 4px; max-width: 640px; margin: 0 auto; }
.brand { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; color: var(--text); text-decoration: none; }
.brand .accent, .auth h1 .accent { color: var(--accent); font-style: normal; }
.mark { color: var(--accent); width: 1.15em; height: 1.15em; vertical-align: -0.2em; }
.nav { white-space: nowrap; flex: 0 0 auto; }
.nav a { color: var(--muted); text-decoration: none; margin-left: 10px; padding: 10px 3px; display: inline-block; font-size: 0.95rem; letter-spacing: 0; }
.nav a[aria-current="page"] { color: var(--text); border-bottom: 2px solid var(--accent); }

.wrap { max-width: 640px; margin: 0 auto; padding: 8px 16px calc(100px + env(safe-area-inset-bottom)); }
.greet { font-size: 1.6rem; margin: 10px 0 20px; line-height: 1.25; }
.greet .date { display: block; font-size: 0.95rem; line-height: 1.5; font-family: var(--sans); color: var(--muted); font-weight: 400; margin-top: 2px; }
.layer { margin: 0 0 22px; }
.layer h2 { margin-bottom: 8px; padding-left: 10px; border-left: 3px solid var(--accent); line-height: 1.3; }
.muted { color: var(--muted); }
.small { font-size: 0.95rem; }
.warn { color: var(--warn); }

/* flat panels, hairline borders, 3px corners */
.panel { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 12px; }
.panel p { margin: .35em 0; }
.panel.placeholder p:first-child { margin-top: 0; }
.panel.placeholder p:last-child { margin-bottom: 0; }
.notice p { margin: .4em 0; }

/* buttons + forms: big, thumb-friendly, flat */
.btn { display: inline-block; min-height: 48px; padding: 11px 18px; border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--panel-2); color: var(--text); font: inherit; font-weight: 700; text-decoration: none; text-align: center; cursor: pointer; line-height: 1.3; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.secondary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn.secondary:hover, .btn.secondary:focus-visible { background: var(--blue-2); border-color: var(--blue-2); }
.btn.ghost { background: transparent; color: var(--muted); }
.btn.wide { width: 100%; }
.btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid var(--blue-2); outline-offset: 2px; }
.btn:active { transform: translateY(1px); }
.form label { display: block; margin: 0 0 12px; color: var(--muted); font-size: 0.95rem; }
.form input:not([type="checkbox"]), .form select, .form textarea { display: block; width: 100%; margin-top: 4px; min-height: 48px; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; }
.row { display: flex; gap: 10px; margin-top: 6px; }
.row .btn { flex: 1; }
.auth { max-width: 440px; margin: 6vh auto 0; }
.auth h1 { text-align: center; margin-bottom: 16px; }
.auth h2 { margin-top: 4px; }
.soft-error { background: var(--panel-2); border-left: 3px solid var(--warn); padding: 10px 12px; border-radius: var(--radius); color: var(--text); margin: 0 0 12px; }
.install.on-login { max-width: 440px; margin: 1rem auto 0; }

/* quick add: fixed in the bottom corner, same place every day */
.fab { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); width: 60px; height: 60px; border-radius: var(--radius); border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font-size: 32px; line-height: 56px; text-align: center; text-decoration: none; font-weight: 400; z-index: 5; }
.fab:focus-visible { outline: 3px solid var(--blue-2); outline-offset: 2px; }
.fab:active { transform: translateY(1px); }
/* + chooser: two big choices, as a sheet (JS) or the /add page (no JS) */
.add-choices { display: grid; gap: 10px; margin: 0 0 12px; }
.add-choices .btn { min-height: 60px; font-size: 1.15rem; }
.add-sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; margin: 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); box-sizing: border-box; background: var(--panel); color: var(--text); border: 1px solid var(--line-soft); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
.add-sheet::backdrop { background: rgba(0, 0, 0, .7); }
.add-sheet h2 { margin: 0 0 12px; }

/* ---- calendar: Today on home + the Events tab. Tight rows like jeannie.today's Can't move list ---- */
.calm { color: var(--muted); margin: 4px 0 8px; }
.toast { background: var(--panel-2); border-left: 3px solid var(--blue-2); padding: 10px 12px; border-radius: var(--radius); margin: 0 0 14px; }
.ev-row { display: flex; gap: 10px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line-soft); border-left: 3px solid var(--stripe, var(--line)); border-radius: var(--radius); padding: 7px 10px 7px 11px; margin: 0 0 6px; color: var(--text); text-decoration: none; }
a.ev-row:hover, a.ev-row:focus-visible { background: var(--panel-2); }
.ev-row.live { background: var(--panel-2); }
.ev-time { flex: 0 0 64px; font-size: 1.15rem; font-weight: 700; line-height: 1.3; white-space: nowrap; padding-top: 1px; }
.ev-time small { font-size: 0.8rem; font-weight: 500; margin-left: 2px; color: var(--muted); }
.ev-time.anyt { font-size: 0.95rem; font-weight: 600; color: var(--muted); padding-top: 3px; }
.ev-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ev-title { font-size: 1.05rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ev-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ev-chip { display: inline-block; font-size: 0.78rem; font-weight: 600; line-height: 1.4; padding: 0 7px; border-radius: 999px; border: 1px solid var(--stripe, var(--line-soft)); color: var(--stripe, var(--muted)); background: transparent; white-space: nowrap; }
.ev-where { color: var(--muted); font-size: 0.9rem; flex-basis: 100%; overflow-wrap: anywhere; }
.see-more { margin: 4px 0 0; } .see-more a { font-weight: 600; }
.ev-day { margin: 0 0 16px; }
.day-label { font-size: 1rem; color: var(--muted); border-left-color: var(--line-soft); margin-bottom: 6px; }

/* settings: calendars */
.feed { border-left: 4px solid var(--stripe, var(--line)); padding: 4px 0 4px 12px; margin: 14px 0 18px; }
.feed .form label { margin-bottom: 8px; }
.feed form + form { margin-top: 8px; }
.colors { border: 0; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.colors legend { color: var(--muted); font-size: 0.95rem; margin-bottom: 6px; }
.swatch { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px 6px 8px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--panel-2); cursor: pointer; font-size: 0.95rem; }
.swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch .dot { width: 18px; height: 18px; border-radius: 50%; background: var(--stripe); border: 1px solid rgba(255,255,255,.25); }
.swatch:has(input:checked) { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.swatch:has(input:focus-visible) { outline: 3px solid var(--blue-2); outline-offset: 2px; }
details summary { cursor: pointer; color: var(--text); font-weight: 700; min-height: 44px; display: flex; align-items: center; }
details .form { margin-top: 10px; }

/* ---- tasks (steps 6-7): one box per task, three buttons, same every day ---- */
.wx { margin: 0 0 10px; }
/* tasks: lean rows matching ev-row density */
.task-row { display: flex; gap: 8px; align-items: center; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 7px 10px; margin: 0 0 6px; }
.task-row.rest { padding: 6px 10px; }
.task-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.task-title { font-size: 1.05rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.task-acts { flex: 0 0 auto; display: flex; gap: 4px; align-items: center; }
.btn-t { font: inherit; font-size: 0.8rem; font-weight: 600; line-height: 1; padding: 5px 8px; border-radius: var(--radius); border: 1px solid var(--line-soft); background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; }
.btn-t.done { color: var(--text); border-color: var(--line); }
.btn-t.done:hover, .btn-t.done:focus-visible { border-color: var(--accent); }
.btn-t.swap:hover, .btn-t.swap:focus-visible { border-color: var(--blue-2); color: var(--text); }
.btn-t.skip { border-color: transparent; }
.btn-t.skip:hover, .btn-t.skip:focus-visible { color: var(--text); }

.one-more { margin-top: 4px; }
.one-more .btn { flex: 0 1 auto; }
.effort { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.effort legend { color: var(--muted); font-size: 0.95rem; margin-bottom: 6px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.check input { width: 24px; height: 24px; accent-color: var(--accent); }
.pool { list-style: none; margin: 0; padding: 0; }
.pool li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.pool li:first-child { border-top: 0; }
.pool li > span:first-child { flex: 1 1 60%; }
.pool form { flex: 1 1 100%; }
.btn.small { min-height: 36px; padding: 4px 10px; font-weight: 400; font-size: 0.95rem; }

/* ---- money (steps 4-5): shared bills + the Venmo box; negatives amber, never red ---- */
.bills h3, .venmo h3 { margin-bottom: 6px; }
.bill-list, .venmo-list { list-style: none; margin: 0; padding: 0; }
.bill-list li, .venmo-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.bill-list li:first-child, .venmo-list li:first-child { border-top: 0; }
.bill-amt, .v-amt { font-family: var(--serif); font-size: 1.15rem; text-align: right; }
.bill-due, .v-dir { grid-column: 1 / -1; font-size: 0.95rem; }
a.venmo { display: block; color: var(--text); text-decoration: none; }
a.venmo:hover, a.venmo:focus-visible { background: var(--panel-2); }
.venmo-grid { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; }
.venmo-grid dt { color: var(--muted); }
.venmo-grid dd { margin: 0; text-align: right; font-family: var(--serif); font-size: 1.15rem; }
.venmo-grid .bal { font-size: 1.35rem; color: var(--text); padding-top: 6px; border-top: 1px solid var(--line-soft); }
.venmo-grid dd.bal.warn { color: var(--warn); }
.venmo p.small { margin: 8px 0 0; }

/* ---- job pricing: project price up front, hourly kept small ---- */
.pricing-set { border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; margin: 14px 0; }
.pricing-set legend { padding: 0 6px; font-weight: 600; }
.pricing-pick { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.pricing-pick .check { min-height: 36px; }
.pricing-pick .check input { width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; display: inline-block; flex: none; }
.pricing-pick label.check { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.pricing-set [hidden] { display: none; }

/* ---- job settings: each nudge with its own switch + time, ways to pay ---- */
.nudge-set, .pay-set { border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; margin: 14px 0; }
.nudge-set legend, .pay-set legend { padding: 0 6px; font-weight: 600; }
.nudge-row { border-top: 1px solid var(--line-soft); padding: 10px 0 4px; }
.nudge-row:first-of-type { border-top: 0; }
.nudge-row p.small { margin: 0 0 6px; }

/* ---- money: one combined "Helping out" box at the top of home (lean layout 2026-10-28) ---- */
.money-box h3 { margin-bottom: 8px; }
.money-box h4 { margin: 16px 0 6px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 1.05rem; }
.help-head { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 8px; }
.help-head > div { display: flex; flex-direction: column; }
.help-big { font-family: var(--serif); font-size: 1.6rem; line-height: 1.2; }
.help-list { list-style: none; margin: 0; padding: 0; }
.help-list li { display: grid; grid-template-columns: 1fr 1.4em minmax(5.5em, auto); gap: 0 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line-soft); }
.help-share { font-size: 0.9rem; text-align: right; }
.venmo-table { width: 100%; border-collapse: collapse; }
.venmo-table th, .venmo-table td { padding: 6px 0; text-align: right; font-weight: 400; }
.venmo-table tbody th { font-weight: 400; }
.venmo-table thead th { color: var(--muted); font-size: 0.9rem; padding: 0 0 4px 12px; white-space: nowrap; }
.venmo-table tbody th { text-align: left; color: var(--muted); padding-right: 8px; }
.venmo-table td { font-family: var(--serif); font-size: 1.1rem; padding-left: 10px; white-space: nowrap; }
.venmo-table tr.bal th, .venmo-table tr.bal td { border-top: 1px solid var(--line-soft); color: var(--text); }
.venmo-table tr.sum th, .venmo-table tr.sum td { border-top: 1px dashed var(--line-soft); color: var(--text); }
.venmo-table td.warn, .venmo-table tr.bal td.warn { color: var(--warn); }
.help-since { margin: 8px 0 0; }

/* ---- Money tab: bills, a week and a month (2026-10-28) ---- */
.bills-table { width: 100%; border-collapse: collapse; }
.bills-table th, .bills-table td { padding: 8px 0; text-align: right; font-weight: 400; border-top: 1px solid var(--line-soft); }
.bills-table thead th { color: var(--muted); font-size: 0.9rem; border-top: 0; padding-bottom: 4px; }
.bills-table th:first-child, .bills-table td:first-child { text-align: left; padding-right: 10px; }
.bills-table td + td, .bills-table th + th, .bills-table th + td { padding-left: 12px; white-space: nowrap; }
.bills-table tbody td + td { font-family: var(--serif); font-size: 1.05rem; }
.bills-table tfoot th, .bills-table tfoot td { font-weight: 700; border-top: 2px solid var(--line); font-family: var(--serif); font-size: 1.1rem; }
.bills-table tfoot td { font-weight: 700; }
.money-links { margin: 10px 0 0; }
/* phones up to 440px: the bills table keeps its three columns inside its box without sideways scrolling */
@media (max-width: 440px) {
  .bills-table th, .bills-table td { font-size: 0.95rem; }
  .bills-table td + td, .bills-table th + th, .bills-table th + td { padding-left: 4px; }
  .bills-table th:first-child, .bills-table td:first-child { padding-right: 6px; }
  .bills-table tbody td + td, .bills-table tfoot th, .bills-table tfoot td { font-size: 0.9rem; }
  .panel:has(.bills-table) { padding-left: 10px; padding-right: 10px; }
  .bills-table td:first-child { overflow-wrap: break-word; hyphens: manual; }
}

/* ---- Jobs (job log, 2026-10-28) ---- */
.btn.big { min-height: 52px; font-size: 1.05rem; }
.job-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.job-list li { margin: 0; }
.job-card { display: flex; flex-direction: column; gap: 4px; min-height: 48px; text-decoration: none; color: var(--text); margin: 0; }
a.job-card:hover, a.job-card:focus-visible { background: var(--panel-2); }
.job-title { font-weight: 700; font-size: 1.05rem; }
.status-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line-soft); font-size: 0.85rem; color: var(--muted); white-space: nowrap; vertical-align: middle; }
.status-chip.s-working { color: var(--text); border-color: var(--blue-2); }
.status-chip.s-parts, .status-chip.s-done, .status-chip.s-billed { color: var(--warn); border-color: var(--warn); }
.status-chip.s-paid { color: var(--muted); }
.job-head p { margin: 4px 0; }
.job-notes { white-space: pre-wrap; }
.job-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; }
.job-actions form { margin: 0; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.inline-form .row { margin: 0; }
.parts-list { list-style: none; margin: 0; padding: 0; }
.parts-list li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.parts-list li:first-child { border-top: 0; }
.part-name { font-weight: 700; }
.part-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.part-btns form { margin: 0; }
.part-btns .btn.small { min-height: 44px; }
.job-now { border-left: 3px solid var(--blue-2); }
.week-table td:first-child { white-space: normal; }
/* job log polish: centered button text, stacked inline forms, part buttons on their own line */
.btn.big, .row .btn, .job-actions .btn { display: inline-flex; align-items: center; justify-content: center; }
.inline-form { display: block; }
.inline-form label { margin-bottom: 8px; }
.inline-form .row .btn { flex: 0 1 auto; }
.parts-list li > .muted, .parts-list .part-btns { grid-column: 1 / -1; }
.parts-list .part-btns { justify-content: flex-start; }
.part-btns .btn.small { min-height: 48px; display: inline-flex; align-items: center; }
.job-actions + .inline-form { margin-top: 16px; }

/* ---- Phone layout fixes (fn-v20, checked at 360px and 412px) ---- */
/* Task rows: on phones the title gets the full width and the buttons sit on their own line underneath,
   big enough for a thumb. On wider screens the buttons stay on the right of the title. */
@media (max-width: 600px) {
  .task-row { flex-wrap: wrap; row-gap: 6px; }
  .task-text { flex: 1 1 100%; }
  .task-acts { flex: 1 1 100%; gap: 8px; }
  .btn-t { font-size: 0.85rem; padding: 10px 14px; min-height: 40px; }
  .btn-t.skip { border-color: var(--line-soft); }
}
/* Narrow phones: the header nav fits next to the brand without pushing the page sideways */
@media (max-width: 400px) {
  .top { padding-left: 12px; padding-right: 12px; }
  .nav a { margin-left: 6px; padding-left: 2px; padding-right: 2px; font-size: 0.9rem; }
}
/* Narrow phones: the Money box figures stay inside their box */
@media (max-width: 400px) {
  .panel:has(.venmo-table) { padding-left: 10px; padding-right: 10px; }
  .venmo-table td { font-size: 1rem; padding-left: 6px; }
  .venmo-table thead th { padding-left: 6px; }
  .venmo-table tbody th { padding-right: 4px; }
}
/* Add a task: the Repeat choices (fn-v21). The days box inside "Every ___ days" stays a real, visible input. */
.swatch.every-n input[type="number"] { position: static; opacity: 1; width: 4.2em; height: auto; min-height: 36px; padding: 4px 6px; margin: 0; font: inherit; text-align: center; }

/* weather: today's row at the top of Today, and the 5-day list on New job */
.wx-row { border-left-color: var(--line); }
.wx-row .wx-hi { font-size: 1.3rem; }
.wx-days { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 8px 10px 4px; margin: 0 0 14px; }
.wx-head { margin: 0 0 4px; font-size: 0.95rem; color: var(--muted); font-weight: 600; }
.wx-day { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr) auto; gap: 6px; align-items: start; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.wx-day:first-of-type { border-top: 0; }
.wx-dname { font-weight: 700; font-size: 0.95rem; line-height: 1.25; }
.wx-dname small, .wx-cond small, .wx-hl small { display: block; font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.wx-cond { line-height: 1.25; overflow-wrap: normal; word-break: normal; min-width: 0; }
.wx-hl { text-align: right; line-height: 1.25; white-space: nowrap; }
.wx-hl b { font-size: 1.1rem; }

/* Today is a rolling 24 hours: tomorrow's part sits under a small divider */
.day-split { margin: 10px 0 6px; font-size: 0.9rem; font-weight: 600; color: var(--muted); border-top: 1px solid var(--line-soft); padding-top: 6px; }

/* events already on the picked day (New job / Add a task) */
.day-events:empty{display:none}
.day-events{margin:-.25rem 0 .5rem}
.day-ev-head{margin:0 0 .35rem;font-weight:600}
.day-ev-none{margin:0}
.day-ev-list{display:flex;flex-direction:column;gap:.4rem}

/* v25: effort dots (same colors as jeannie.today) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.task-title .dot { display: inline-block; position: relative; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 2px; }
.dot-l { background: #8bc28b; }
.dot-m { background: #e8b96a; }
.dot-h { background: #e0705a; }

/* v29: homeowner / tenant per job; a dot on each job card (black = homeowner, landlord's own color = tenant) */
.job-title .occ-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; flex: none; }
.occ-home { background: #000; box-shadow: 0 0 0 1.5px #9a9a9a; }
.occ-tenant { background: #6b6b6b; }
.occupant-set [hidden] { display: none; }
.occupant-line { color: var(--muted); margin: 2px 0; }

/* paynic.online: the public pay page */
.pay-body { padding-bottom: env(safe-area-inset-bottom); }
.pay { padding-top: 22px; padding-bottom: 40px; }
.pay-brand { font-size: 1.5rem; font-weight: 500; margin: 0 0 16px; }
.pay-brand .accent { color: var(--accent); }
.pay-amt { font-size: 1.6rem; margin: 0 0 18px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--line-soft); padding-bottom: 12px; }
.pay-amt .muted { font-size: 1rem; }
.pay-ways { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; }
.pay-btn { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 60px; font-size: 1.1rem; padding: 12px 16px; flex-wrap: wrap; }
.pay-handle { font-weight: 500; overflow-wrap: anywhere; }
.pay-venmo { background: #008CFF; border-color: #008CFF; color: #fff; }
.pay-cashapp { background: #00A651; border-color: #00A651; color: #fff; }
.pay-zelle { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 12px 16px; }
.pay-zelle-row { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; font-size: 1.1rem; font-weight: 700; }
.pay-zelle .pay-copy { width: 100%; }
.pay-zelle .pay-open { display: block; margin-top: 10px; text-align: center; }
.pay-zelle .small { margin: 8px 0 0; }
.pay-none { font-size: 1.2rem; }
.pay-thanks { margin-top: 22px; font-size: 1.2rem; }