/* The office: Casey's side and each client's side of my.bunkerbookkeeping.com.
   Same colours, type and manners as the website (../../../public/assets/css/site.css), set for
   an app that is used every day on a phone: compact, calm, nothing that has to be learned.

   In the order things appear: tokens, base, the frame (top bar, tab bar), shared pieces
   (cards, lists, buttons, chips, forms), pages (today, client, packet, books, portal), and
   after dark. Pages never carry inline styles (the security policy forbids them), so every
   width and colour a page needs has a class here. */

/* ---------- Tokens ---------- */

@font-face {
  font-family: "Noto Serif";
  src: url("/assets/fonts/noto-serif-400-700.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --green-50: #f3f8f2;
  --green-100: #e2f0e1;
  --green-200: #c4e1c4;
  --green-300: #94d19a;
  --green-400: #4bb050;
  --green-600: #2c7d36;
  --green-700: #22682b;
  --green-900: #12301f;
  --green-text: var(--green-700);
  --green-mark: var(--green-600);
  --green-ink: var(--green-900);
  --amber-50: #fdf3df;
  --amber-600: #a35f08;
  --amber-ink: #6b3e05;
  --red-50: #fcebea;
  --red-600: #b3261e;

  --ink: #0f1712;
  --ink-soft: #3c4740;
  --ink-mute: #5f6b63;
  --paper: #faf9f5;
  --white: #fff;
  --band: var(--white);
  --surface: var(--white);
  --raised: var(--white);
  --field: var(--white);
  --line: #e1e4dc;
  --field-line: #c9cfc6;
  --ring: rgb(44 125 54 / 0.16);
  --bar: rgb(250 249 245 / 0.86);

  --serif: "Noto Serif", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(1rem, 4vw, 2rem);
  --radius: 16px;
  --shadow-small: 0 1px 2px rgb(15 23 18 / 0.06), 0 4px 12px -4px rgb(15 23 18 / 0.1);
  --shadow-large: 0 1px 2px rgb(15 23 18 / 0.05), 0 24px 48px -20px rgb(15 23 18 / 0.25);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --tabbar: 0px;

  color-scheme: light;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --green-50: #132017;
    --green-100: #1a3722;
    --green-200: #274f31;
    --green-700: #30863b;
    --green-900: #102b1c;
    --green-text: #89d292;
    --green-mark: #5bc267;
    --green-ink: #cbebce;
    --amber-50: #302410;
    --amber-600: #e1a647;
    --amber-ink: #f3d39b;
    --red-50: #34171a;
    --red-600: #f1867e;

    --ink: #ebf1e9;
    --ink-soft: #b4c0b6;
    --ink-mute: #8a998c;
    --paper: #0b100d;
    --band: #101612;
    --surface: #1b231e;
    --raised: #222c26;
    --field: #0e1410;
    --line: rgb(255 255 255 / 0.09);
    --field-line: rgb(255 255 255 / 0.16);
    --ring: rgb(91 194 103 / 0.24);
    --bar: rgb(11 16 13 / 0.82);
    --shadow-small: 0 1px 2px rgb(0 0 0 / 0.24), 0 4px 12px -4px rgb(0 0 0 / 0.4);
    --shadow-large: 0 1px 2px rgb(0 0 0 / 0.3), 0 24px 48px -20px rgb(0 0 0 / 0.7);
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink-soft);
  font: 1rem/1.55 var(--sans);
  accent-color: var(--green-600);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
  text-wrap: balance;
}

h1 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

h1 em {
  color: var(--green-mark);
  font-weight: 400;
}

h2 {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.3;
}

h3 {
  font-size: 1rem;
  font-weight: 600;
}

p {
  margin: 0;
  text-wrap: pretty;
}

/* Anything hidden stays hidden, whatever its own display. */
[hidden] {
  display: none !important;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--green-text);
  text-underline-offset: 0.2em;
}

a,
button,
summary,
label {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--green-mark);
  outline-offset: 2px;
  border-radius: 6px;
}

/* After a page change the office moves focus to the new page's heading, so a screen reader starts
   reading there (office.js, show). The heading is not something to press, so it never shows the
   ring: Safari draws one on it after a click as well as after a key. */
[tabindex="-1"]:focus {
  outline: none;
}

.money,
.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mute {
  color: var(--ink-mute);
}

.small {
  font-size: 0.875rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Page changes slide and fade like an app's screens, where the browser can (Safari 18.2,
   Chrome 126 and later); elsewhere pages simply change. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  ::view-transition-old(root) {
    animation: 0.18s var(--ease-out) both fade-out;
  }
  ::view-transition-new(root) {
    animation: 0.26s var(--ease-out) both rise-in;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    translate: 0 8px;
  }
}

/* ---------- The frame ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  view-transition-name: top;
  border-bottom: 1px solid var(--line);
  background: var(--bar);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
}

.top-in {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 70rem;
  min-height: 3.5rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
  padding-top: env(safe-area-inset-top);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}

.brand img {
  display: block;
  width: auto;
  height: 1.35rem;
}

.brand .logo-night {
  display: none;
}

.nav {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
}

.nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem;
  border-radius: 10px;
  color: var(--ink-soft);
  font-weight: 500;
  text-decoration: none;
}

.nav a[aria-current="page"] {
  background: var(--green-50);
  color: var(--green-ink);
}

@media (hover: hover) {
  .nav a:hover {
    color: var(--ink);
  }
}

.nav .count {
  min-width: 1.35rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--green-600);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35rem;
  text-align: center;
}

.icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

main {
  max-width: 70rem;
  margin: 0 auto;
  padding: 1.5rem var(--gutter) calc(3rem + var(--tabbar) + env(safe-area-inset-bottom));
}

.narrow {
  max-width: 40rem;
}

/* On a phone, the office's sections are a tab bar at the bottom, where a thumb reaches. */
.tabbar {
  display: none;
}

@media (max-width: 44em) {
  :root {
    --tabbar: 4.25rem;
  }

  .top .nav {
    display: none;
  }

  .tabbar {
    position: fixed;
    z-index: 10;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-around;
    padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--bar);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
    view-transition-name: tabbar;
  }

  .tabbar a {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.4rem 0;
    color: var(--ink-mute);
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
  }

  .tabbar a[aria-current="page"] {
    color: var(--green-text);
  }

  .tabbar .icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .tabbar .count {
    position: absolute;
    top: 0.1rem;
    left: calc(50% + 0.4rem);
    min-width: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--green-600);
    color: var(--white);
    font-size: 0.65rem;
    line-height: 1.1rem;
    text-align: center;
  }

  .top-in {
    min-height: 3rem;
  }

  main {
    padding-top: 1.1rem;
  }
}

/* ---------- Page heading ---------- */

.hello {
  display: grid;
  gap: 0.5rem;
  margin: 0.5rem 0 1.75rem;
}

.hello p {
  max-width: 38rem;
  font-size: 1.0625rem;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
  color: var(--ink-mute);
  font-size: 0.875rem;
}

.crumbs a {
  color: inherit;
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--ink);
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.5rem;
}

.page-head .sub {
  margin-top: 0.35rem;
  color: var(--ink-mute);
}

/* ---------- Cards and sections ---------- */

.section {
  margin-top: 2rem;
}

.section > h2,
.section-head {
  margin-bottom: 0.75rem;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.section-head a {
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-small);
}

.card-pad {
  padding: 1.1rem 1.2rem;
}

.grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 56em) {
  .split {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* A list of rows inside a card: items for Casey, clients, documents, history. */
.rows > li + li {
  border-top: 1px solid var(--line);
}

.row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.1rem;
  color: inherit;
  text-decoration: none;
}

a.row {
  transition: background-color 0.15s;
}

@media (hover: hover) {
  a.row:hover {
    background: var(--green-50);
  }
}

a.row:active {
  background: var(--green-50);
}

/* A row's hover and press colour keeps to the card's rounded corners: the first row is rounded
   at the top like the card, the last at the bottom (one pixel less, inside the card's border). */
.card > :is(ul, ol):first-child > li:first-child > a,
.card > :is(ul, ol):first-child > li:first-child > details > summary {
  border-top-left-radius: calc(var(--radius) - 1px);
  border-top-right-radius: calc(var(--radius) - 1px);
}

.card > :is(ul, ol):last-child > li:last-child > a,
.card > :is(ul, ol):last-child > li:last-child > details:not([open]) > summary {
  border-bottom-left-radius: calc(var(--radius) - 1px);
  border-bottom-right-radius: calc(var(--radius) - 1px);
}

.row-main {
  flex: 1;
  min-width: 0;
}

.row-title {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-weight: 600;
  text-overflow: ellipsis;
}

.row-sub {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-mute);
  font-size: 0.875rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.split-form {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.split-form .place input {
  width: 7rem;
  padding: 0.4rem 0.5rem;
  font-size: 0.875rem;
}

details.split > summary {
  margin-top: 0.4rem;
  color: var(--green-text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.row-side {
  flex: none;
  max-width: 45%;
  color: var(--ink-mute);
  font-size: 0.875rem;
  text-align: right;
}

/* A chevron, wherever a row or step opens something. */
.chev,
.row .chev {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--ink-mute);
}

.empty {
  padding: 1.5rem 1.2rem;
  color: var(--ink-mute);
  text-align: center;
}

/* How a client is doing, as a dot: green nothing needed, amber waiting on the client,
   ringed green something for Casey. */
.dot {
  flex: none;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--green-400);
}

.dot-waiting {
  background: var(--amber-600);
}

.dot-casey {
  background: var(--green-600);
  box-shadow: 0 0 0 3px var(--green-200);
}

.dot-quiet {
  background: var(--field-line);
}

/* ---------- Chips ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-ink);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5rem;
  white-space: nowrap;
}

.chip-amber {
  background: var(--amber-50);
  color: var(--amber-ink);
}

.chip-red {
  background: var(--red-50);
  color: var(--red-600);
}

.chip-quiet {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-mute);
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--green-600);
  border-radius: 12px;
  background: var(--green-600);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 1px 2px rgb(18 48 31 / 0.18);
  color: var(--white);
  font: 600 1rem/1.3 var(--sans);
  text-decoration: none;
  /* A long label (Spanish often is) wraps onto balanced lines rather than running off a phone. */
  max-width: 100%;
  text-align: center;
  text-wrap: balance;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.2s, translate 0.2s var(--ease-out), scale 0.1s;
}

@media (hover: hover) {
  .button:hover {
    border-color: var(--green-700);
    background: var(--green-700);
    translate: 0 -1px;
  }
}

.button:active {
  translate: none;
  scale: 0.98;
}

.button[disabled],
.button[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

.button-quiet {
  border-color: var(--field-line);
  background: var(--raised);
  box-shadow: 0 1px 2px rgb(15 23 18 / 0.05);
  color: var(--ink);
}

@media (hover: hover) {
  .button-quiet:hover {
    border-color: var(--green-mark);
    background: var(--raised);
  }
}

.button-large {
  width: 100%;
  padding: 0.95rem 1.4rem;
  font-size: 1.0625rem;
}

.button-small {
  padding: 0.4rem 0.75rem;
  border-radius: 10px;
  font-size: 0.875rem;
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--green-text);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

/* The choices on an item for Casey or a question for the client: big, easy to hit. */
.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.choices form {
  display: contents;
}

.choice {
  padding: 0.6rem 1rem;
  border: 1px solid var(--green-200);
  border-radius: 999px;
  background: var(--surface);
  color: var(--green-ink);
  font: 600 0.95rem/1.3 var(--sans);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, scale 0.1s;
}

@media (hover: hover) {
  .choice:hover {
    border-color: var(--green-mark);
    background: var(--green-50);
  }
}

.choice:active {
  scale: 0.97;
}

/* ---------- Forms ---------- */

.field {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.field label,
.field .label {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
}

.field .hint {
  color: var(--ink-mute);
  font-size: 0.85rem;
}

input:not([type]),
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="month"],
input[type="url"],
select,
textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--field-line);
  border-radius: 10px;
  background: var(--field);
  color: var(--ink);
  font: 1rem/1.4 var(--sans);
  transition: border-color 0.15s, box-shadow 0.15s;
}

textarea {
  min-height: 4.75rem;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--green-mark);
  box-shadow: 0 0 0 4px var(--ring);
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  color: var(--ink-soft);
}

.check input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
}

.two {
  display: grid;
  gap: 0 1rem;
}

@media (min-width: 36em) {
  .two {
    grid-template-columns: 1fr 1fr;
  }
}

.note {
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: var(--green-50);
  color: var(--green-ink);
  font-size: 0.95rem;
}

.note-amber {
  background: var(--amber-50);
  color: var(--amber-ink);
}

.note-red {
  background: var(--red-50);
  color: var(--red-600);
}

.flash {
  margin-bottom: 1.25rem;
}

/* ---------- Today ---------- */

.calm {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 1.2rem;
}

.calm svg {
  flex: none;
  width: 3rem;
  height: 3rem;
}

.calm-ring {
  fill: var(--green-50);
  stroke: var(--green-200);
}

.calm-mark {
  fill: none;
  stroke: var(--green-mark);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: draw 0.6s 0.15s var(--ease-out) forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .calm-mark {
    animation: none;
    stroke-dashoffset: 0;
  }
}

.item-kind {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  background: var(--green-50);
  color: var(--green-mark);
}

.item-kind.urgent {
  background: var(--amber-50);
  color: var(--amber-600);
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 48em) {
  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stat {
  padding: 0.95rem 1.05rem;
}

.stat-value {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.stat-label {
  color: var(--ink-mute);
  font-size: 0.85rem;
}

.banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--amber-50);
  color: var(--amber-ink);
}

.banner .icon {
  margin-top: 0.15rem;
}

/* ---------- A client ---------- */

.who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin-top: 0.4rem;
  color: var(--ink-mute);
  font-size: 0.925rem;
}

.who a {
  color: inherit;
}

/* Where the month is: five steps along a line. */
.track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0.25rem 0 0.9rem;
}

.track li {
  position: relative;
  padding-top: 1.35rem;
  color: var(--ink-mute);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}

.track li::before {
  content: "";
  position: absolute;
  top: 0.35rem;
  left: 50%;
  width: 0.7rem;
  height: 0.7rem;
  margin-left: -0.35rem;
  border: 2px solid var(--field-line);
  border-radius: 50%;
  background: var(--surface);
}

.track li::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0.65rem;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--line);
}

.track li:first-child::after {
  display: none;
}

.track .done {
  color: var(--ink-soft);
}

.track .done::before {
  border-color: var(--green-mark);
  background: var(--green-mark);
}

.track .done::after,
.track .now::after {
  background: var(--green-mark);
}

.track .now {
  color: var(--green-text);
}

.track .now::before {
  border-color: var(--green-mark);
  box-shadow: 0 0 0 4px var(--ring);
}

.track-isolate {
  position: relative;
  z-index: 0;
}

.checks li {
  display: flex;
  gap: 0.6rem;
  padding: 0.45rem 0;
  font-size: 0.925rem;
}

.checks li + li {
  border-top: 1px dashed var(--line);
}

.checks .icon {
  margin-top: 0.15rem;
}

.ok .icon {
  color: var(--green-mark);
}

.not-ok .icon {
  color: var(--amber-600);
}

.accounts .row-side {
  color: var(--ink);
}

.timeline li {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  gap: 0.65rem;
  padding: 0.7rem 1.1rem;
  font-size: 0.925rem;
}

.timeline li + li {
  border-top: 1px solid var(--line);
}

.who-tag {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--green-50);
  color: var(--green-ink);
  font-size: 0.65rem;
  font-weight: 700;
}

.who-tag.ai {
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-mute);
}

.who-tag.client {
  background: var(--amber-50);
  color: var(--amber-ink);
}

.timeline time {
  color: var(--ink-mute);
  font-size: 0.8rem;
  white-space: nowrap;
}

details.more > summary {
  padding: 0.75rem 1.1rem;
  color: var(--green-text);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

details.more > summary::-webkit-details-marker {
  display: none;
}

/* ---------- The month's packet ---------- */

.figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.figure {
  padding: 0.85rem 0.95rem;
  border-radius: 12px;
  background: var(--green-50);
}

.figure-label {
  color: var(--green-ink);
  font-size: 0.8rem;
  font-weight: 600;
}

.figure-value {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 0.9rem + 1.2vw, 1.55rem);
  font-variant-numeric: tabular-nums;
}

/* Bars comparing a figure with earlier months. Widths come in fives (.w-0 to .w-100). */
.bars li {
  display: grid;
  grid-template-columns: 5.5rem 1fr 6rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0;
  font-size: 0.85rem;
}

.bar {
  height: 0.6rem;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green-mark);
  transform-origin: left;
  animation: grow 0.6s var(--ease-out) both;
}

.bar.now span {
  background: var(--green-600);
}

@keyframes grow {
  from {
    scale: 0 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bar span {
    animation: none;
  }
}

.w-0 { width: 0; }
.w-5 { width: 5%; }
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }

.points li {
  display: flex;
  gap: 0.6rem;
  padding: 0.55rem 0;
}

.points li + li {
  border-top: 1px solid var(--line);
}

.lanes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.unit-place {
  margin-top: 0.4rem;
}

.unit-place select {
  max-width: 12rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
}

.unit-edit {
  flex-wrap: wrap;
  width: 100%;
}

.unit-edit input {
  flex: 1 1 7rem;
  width: auto;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  font-size: 0.9rem;
}

.payee {
  display: grid;
  gap: 0.35rem;
  padding: 0.85rem 1.1rem;
}

.payee-top {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  color: var(--ink);
}

.payee-amount {
  margin-left: auto;
}

.payee .place select {
  flex: 1;
  min-width: 0;
}

.approve-bar {
  position: sticky;
  bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 0.75rem);
  z-index: 5;
  margin-top: 1.5rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bar);
  box-shadow: var(--shadow-large);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
}

/* ---------- Tables (the books) ---------- */

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.925rem;
}

th {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-mute);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

tr:last-child td {
  border-bottom: 0;
}

td.money,
th.money {
  text-align: right;
}

.in {
  color: var(--green-text);
}

.desc {
  max-width: 22rem;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
}

.desc small {
  display: block;
  overflow: hidden;
  color: var(--ink-mute);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.place {
  display: flex;
  gap: 0.4rem;
}

.place select {
  min-width: 0;
  max-width: 100%;
  padding: 0.4rem 0.5rem;
  font-size: 0.875rem;
}

/* On a phone, the books are a list of cards instead of a wide table. */
@media (max-width: 44em) {
  .books thead {
    display: none;
  }

  .books tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.15rem 0.75rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--line);
  }

  .books td {
    padding: 0;
    border: 0;
  }

  .books .when {
    grid-row: 2;
    color: var(--ink-mute);
    font-size: 0.8rem;
  }

  .books .desc {
    grid-column: 1;
    max-width: none;
  }

  .books td.money {
    grid-row: 1;
    grid-column: 2;
  }

  .books .cat {
    grid-column: 1 / -1;
    margin-top: 0.35rem;
  }
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.filters select,
.filters input {
  width: auto;
  min-width: 9rem;
  padding: 0.5rem 0.65rem;
  font-size: 0.9rem;
}

.tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs a {
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.tabs a[aria-current="page"] {
  background: var(--ink);
  color: var(--paper);
}

/* ---------- Statements of figures (reports) ---------- */

.statement td:first-child {
  color: var(--ink);
}

.statement .total td {
  border-top: 1px solid var(--field-line);
  color: var(--ink);
  font-weight: 700;
}

.statement .group td {
  padding-top: 1rem;
  color: var(--ink-mute);
  font-size: 0.8rem;
  font-weight: 600;
}

.disclaimer {
  margin-top: 1rem;
  color: var(--ink-mute);
  font-size: 0.8rem;
}

/* ---------- The client's side ---------- */

.casey {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.face {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  overflow: hidden;
  border-radius: 50%;
  background: var(--green-600);
  box-shadow: 0 0 0 3px var(--green-100);
  color: var(--white);
  font-family: var(--serif);
  font-size: 1.15rem;
}

.face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.face-small {
  width: 2rem;
  height: 2rem;
  box-shadow: none;
  font-size: 0.8rem;
}

.casey-note {
  position: relative;
  padding: 1.1rem 1.2rem;
  border-radius: 4px 18px 18px;
  background: var(--surface);
  box-shadow: var(--shadow-small);
  color: var(--ink);
  font-size: 1.0625rem;
}

.casey-note p + p {
  margin-top: 0.6rem;
}

.signature {
  margin-top: 0.6rem;
  color: var(--ink-mute);
  font-family: var(--serif);
  font-style: italic;
}

.question {
  padding: 1.1rem 1.2rem;
}

.question p {
  margin-bottom: 0.85rem;
  color: var(--ink);
  font-weight: 500;
}

.question + .question {
  border-top: 1px solid var(--line);
}

.drop {
  display: grid;
  gap: 0.6rem;
  place-items: center;
  padding: 1.75rem 1.2rem;
  border: 2px dashed var(--field-line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
  transition: border-color 0.15s, background-color 0.15s;
}

.drop.over {
  border-color: var(--green-mark);
  background: var(--green-50);
}

.drop input[type="file"] {
  max-width: 100%;
}

.uploads li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  font-size: 0.9rem;
}

.progress {
  flex: 1;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--green-mark);
  transition: width 0.2s;
}

.address {
  display: inline-block;
  max-width: 100%;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  background: var(--green-50);
  color: var(--green-ink);
  font-family: var(--mono);
  font-size: 0.9em;
  white-space: nowrap;
}

/* On the narrowest phone an address breaks rather than widening the page. */
@media (max-width: 22.5em) {
  .address {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

.thread li {
  /* Never wider than the screen, and a long address or link breaks rather than widening it. */
  max-width: min(34rem, 100%);
  overflow-wrap: anywhere;
  margin-bottom: 0.75rem;
  padding: 0.75rem 0.95rem;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-small);
  white-space: pre-wrap;
}

.thread li.mine {
  margin-left: auto;
  background: var(--green-600);
  color: var(--white);
}

.thread time {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  opacity: 0.7;
}

.thread strong {
  display: block;
  margin-bottom: 0.2rem;
}

.thread .thread-meta {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  opacity: 0.75;
}

.thread .thread-meta time {
  display: inline;
  margin: 0;
  font-size: inherit;
  opacity: 1;
}

.thread-long > summary {
  list-style: none;
  cursor: pointer;
}

.thread-long > summary::-webkit-details-marker {
  display: none;
}

.thread-long[open] > summary {
  display: none;
}

.thread-more {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

/* ---------- Sign-in ---------- */

.door {
  display: grid;
  /* One column no wider than the screen: the card shrinks to fit a phone, never past its edge. */
  grid-template-columns: minmax(0, 1fr);
  min-height: 100dvh;
  place-items: center;
  padding: 1.5rem var(--gutter);
}

.door-card {
  width: 100%;
  max-width: 25rem;
  padding: 1.75rem 1.5rem;
}

.door-card .brand {
  margin-bottom: 1.5rem;
}

.door-card h1 {
  font-size: 1.6rem;
}

.door-card p {
  margin: 0.5rem 0 1.25rem;
}

.or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
  color: var(--ink-mute);
  font-size: 0.85rem;
}

.or::before,
.or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ---------- After dark ---------- */

@media screen and (prefers-color-scheme: dark) {
  .brand .logo-day {
    display: none;
  }

  .brand .logo-night {
    display: block;
  }

  .thread li.mine {
    background: var(--green-200);
    color: var(--ink);
  }

  .tabs a[aria-current="page"] {
    background: var(--green-200);
    color: var(--ink);
  }
}

/* ---------- Print: a report prints as a clean page ---------- */

@media print {
  .top,
  .actions,
  .approve-bar,
  .no-print {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .card {
    border: 0;
    box-shadow: none;
  }
}

/* ---------- Signing up: the proposal ---------- */

.door-top {
  place-items: start center;
}

.door-wide {
  max-width: 40rem;
}

.from {
  display: grid;
  margin: 0 !important;
}

.chip-green {
  background: var(--green-600);
  color: var(--white);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

a.chip {
  line-height: 2rem;
  padding: 0.1rem 0.8rem;
  font-size: 0.85rem;
  text-decoration: none;
}

/* A choice too long for the screen takes two lines, the same height on one. */
.chips > a.chip {
  max-width: 100%;
  padding-block: 0.55rem;
  border-radius: 1.1rem;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
  text-wrap: balance;
}

.included {
  margin: 0.25rem 0 1rem;
  padding-left: 1.25rem;
}

.included li + li {
  margin-top: 0.35rem;
}

.price {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: var(--green-50);
}

.price > div {
  display: grid;
}

.price-label {
  color: var(--ink-mute);
  font-size: 0.8rem;
  font-weight: 600;
}

.price-value {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--ink);
}

.letter {
  max-height: 26rem;
  overflow: auto;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--field);
  font-size: 0.9rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overscroll-behavior: contain;
}

.letter:focus-visible {
  outline: 2px solid var(--green-mark);
  outline-offset: 2px;
}

.letter-edit {
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.5;
}

.accept {
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.accept .button-large {
  width: 100%;
  margin-top: 0.75rem;
}

.not-yet .icon {
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  border: 1.5px dashed var(--field-line);
  border-radius: 50%;
}

@media print {
  .letter {
    max-height: none;
    overflow: visible;
    border: 0;
  }
}

/* A rental property: its name and occupancy tax details, stacked. */
.unit-property {
  flex: 1;
  min-width: 0;
}

.unit-property .field {
  margin-bottom: 0.6rem;
}

.rows .row:has(> .unit-property) {
  align-items: flex-start;
}

/* ---------- W-9s and the people a client pays ---------- */

.facts {
  display: grid;
  grid-template-columns: minmax(8rem, auto) 1fr;
  gap: 0.45rem 1rem;
  margin: 0;
}

.facts dt {
  color: var(--ink-mute);
  font-size: 0.85rem;
}

.facts dd {
  margin: 0;
}

@media (max-width: 34rem) {
  .facts {
    grid-template-columns: 1fr;
  }

  .facts dd {
    margin-bottom: 0.4rem;
  }
}

.cert {
  white-space: pre-line;
}

.certification {
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.certification .button-large {
  width: 100%;
  margin-top: 0.5rem;
}

.note-amber-text {
  color: var(--amber-ink);
}

.payee-row {
  flex-wrap: wrap;
}

.payee-row .place {
  flex: 1 1 16rem;
}

input[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--red-600);
}

/* Drop-downs look like the text boxes beside them in every browser (Safari ignores padding on
   its own drop-down style), with a quiet arrow drawn here. */
select {
  -webkit-appearance: none;
  appearance: none;
  min-height: 2.95rem;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a867e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 1rem;
}

select[multiple] {
  background-image: none;
  padding-right: 0.8rem;
}

input[type="date"],
input[type="month"],
input[type="time"] {
  min-height: 2.95rem;
}

/* The small drop-downs in rows (placing a line, filters) stay small, with room for the arrow. */
.unit-place select,
.place select,
.filters select {
  min-height: 0;
  padding-right: 1.9rem;
  background-position: right 0.5rem center;
  background-size: 0.85rem;
}

/* ---------- Help: the (i) and explained terms ---------- */

.tip,
.term {
  position: relative;
  outline: none;
}

.tip {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.3rem;
  vertical-align: -0.2rem;
  border-radius: 50%;
  color: var(--ink-mute);
  cursor: help;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.tip .icon {
  width: 1.05rem;
  height: 1.05rem;
}

.tip:hover,
.tip:focus-visible,
.tip:focus {
  background: var(--green-50);
  color: var(--green-text);
}

.term {
  text-decoration: underline dotted var(--ink-mute);
  text-underline-offset: 0.2em;
  cursor: help;
}

.tip-body {
  position: absolute;
  z-index: 30;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  width: max-content;
  max-width: min(19rem, 80vw);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--raised);
  box-shadow: var(--shadow-large);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.5;
  text-align: left;
  text-transform: none;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Moved sideways to stay inside the window (office.js) by a margin, not the transform, so
     where it lands can be measured while it is still fading in. */
  margin-left: var(--nudge, 0px);
  transform: translate(-50%, 0.25rem);
  transition: opacity 0.15s ease, transform 0.15s var(--ease-out), visibility 0.15s;
}

/* Too near the top of the screen to open above: it opens below instead (office.js). */
.tip-below .tip-body {
  top: calc(100% + 0.5rem);
  bottom: auto;
  transform: translate(-50%, -0.25rem);
}

.tip:hover .tip-body,
.tip:focus .tip-body,
.term:hover .tip-body,
.term:focus .tip-body,
.tip.open .tip-body,
.term.open .tip-body {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* On a phone there is no hover and little room beside the (i): a tap opens the explanation as a
   card above the tab bar, the full width of the screen, and a tap anywhere else closes it. */
@media (hover: none), (max-width: 40em) {
  .tip-body {
    position: fixed;
    right: var(--gutter);
    bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 0.75rem);
    left: var(--gutter);
    width: auto;
    max-width: none;
    transform: translateY(0.5rem);
    font-size: 0.95rem;
  }

  .tip:hover .tip-body,
  .term:hover .tip-body {
    opacity: 0;
    visibility: hidden;
  }

  .tip:focus .tip-body,
  .term:focus .tip-body,
  .tip.open .tip-body,
  .term.open .tip-body {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.form-intro h2 {
  margin: 0;
  font-size: 1.15rem;
}

.form-intro p {
  margin: 0.25rem 0 0.9rem;
  color: var(--ink-mute);
  font-size: 0.92rem;
}

/* ---------- Adding a client (and other long forms) ---------- */

.lead {
  max-width: 40rem;
  margin: 0.35rem 0 1.5rem;
  color: var(--ink-soft);
  font-size: 1.02rem;
}

.client-form {
  display: grid;
  gap: 1rem;
}

.form-section {
  margin: 0;
  padding: 1.25rem 1.25rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-small);
}

.form-section[hidden] {
  display: none;
}

.form-section-head {
  display: block;
  margin: 0 0 0.9rem;
  padding: 0;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
}

legend.form-section-head {
  float: left;
  width: 100%;
}

legend.form-section-head + * {
  clear: both;
}

.field-group {
  margin: 0.25rem 0 0.75rem;
}

.field-group-head {
  margin: 1rem 0 0.55rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 650;
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 0.15rem;
  margin-bottom: 0.65rem;
}

.check-row .check {
  margin: 0;
}

.check-row .tip {
  margin-top: 0.15rem;
}

/* The kind of client: cards in a grid, one chosen. */
.kind-picker {
  display: grid;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.kind-group-head {
  margin: 0 0 0.5rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 600;
}

.kind-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: 0.6rem;
}

.kind-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--field);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s var(--ease-out);
}

.kind-card:hover {
  border-color: var(--field-line);
}

.kind-card:active {
  transform: scale(0.99);
}

.kind-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.kind-card:has(input:focus-visible) {
  outline: 2px solid var(--green-mark);
  outline-offset: 2px;
}

.kind-card:has(input:checked) {
  border-color: var(--green-mark);
  background: var(--green-50);
  box-shadow: 0 0 0 3px var(--ring);
}

.kind-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  background: var(--green-50);
  color: var(--green-text);
}

.kind-card:has(input:checked) .kind-icon {
  background: var(--green-600);
  color: var(--white);
}

.kind-text {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.kind-name {
  font-weight: 650;
  line-height: 1.3;
}

.kind-desc {
  color: var(--ink-mute);
  font-size: 0.84rem;
  line-height: 1.4;
}

/* The buttons stay in reach at the bottom of a long form on a phone. */
.form-actions {
  position: sticky;
  z-index: 4;
  bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 0.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bar);
  box-shadow: var(--shadow-large);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}

.form-actions {
  flex-wrap: nowrap;
  align-items: center;
}

.form-actions .button {
  flex: 1 1 auto;
  width: auto;
}

@media (min-width: 40em) {
  .form-actions .button {
    flex: 0 0 auto;
    min-width: 14rem;
  }
}

/* A month, where the browser has no month picker of its own (Safari on a Mac): month and year
   side by side (office.js). */
.month-pick {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 0.5rem;
}

.form-actions .link-button {
  flex: none;
  align-self: center;
  padding: 0 0.5rem;
}

.next-steps {
  margin-top: 1.5rem;
}

.next-steps h2 {
  font-size: 1.05rem;
}

.next-steps ol {
  margin: 0.5rem 0 0;
  padding-left: 1.3rem;
  color: var(--ink-soft);
  list-style: decimal;
}

.next-steps li + li {
  margin-top: 0.4rem;
}

/* ---------- A client's pages: their name, and the tabs between their pages ---------- */

.client-name {
  margin: 0;
}

/* The tabs run edge to edge on a phone and scroll sideways; the one open is underlined. */
.subnav {
  margin: 0.85rem calc(var(--gutter) * -1) 1.25rem;
  border-bottom: 1px solid var(--line);
}

.subnav-track {
  position: relative;
  display: flex;
  gap: 0.15rem;
  padding: 0 calc(var(--gutter) - 0.7rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
}

.subnav-track::-webkit-scrollbar {
  display: none;
}

.subnav a {
  position: relative;
  flex: none;
  padding: 0.7rem 0.7rem 0.75rem;
  color: var(--ink-mute);
  font-size: 0.925rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}

.subnav a::after {
  content: "";
  position: absolute;
  right: 0.7rem;
  bottom: 0;
  left: 0.7rem;
  height: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background-color 0.15s;
}

@media (hover: hover) {
  .subnav a:hover {
    color: var(--ink);
  }
}

.subnav a[aria-current="page"] {
  color: var(--ink);
}

.subnav a[aria-current="page"]::after {
  background: var(--green-mark);
}

/* Under the tabs: who they are, and the page's own buttons. */
.client-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  margin-bottom: 1.5rem;
}

.client-strip .who {
  flex: 1 1 18rem;
  margin: 0;
}

.client-strip .actions {
  margin: 0;
}

/* A heading with an (i) keeps the (i) beside its words. */
.section-head:has(> .tip) {
  justify-content: flex-start;
  gap: 0;
}

/* Two cards side by side on a wide screen (writing to a client, and asking them something). */
@media (min-width: 52em) {
  .two-up {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.two-up .form-section-head {
  font-size: 1.05rem;
}

/* ---------- Rows that open to be changed: deadlines, accounts ---------- */

.deadline > details > summary {
  list-style: none;
  cursor: pointer;
  transition: background-color 0.15s;
}

.deadline > details > summary::-webkit-details-marker {
  display: none;
}

.deadline > details > summary::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 0.2rem 0.2rem 0.1rem;
  border-right: 2px solid var(--ink-mute);
  border-bottom: 2px solid var(--ink-mute);
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease-out);
}

.deadline > details[open] > summary::after {
  margin-bottom: -0.2rem;
  transform: rotate(-135deg);
}

@media (hover: hover) {
  .deadline > details > summary:hover {
    background: var(--green-50);
  }
}

.deadline > details[open] > summary {
  background: var(--green-50);
}

.deadline-edit {
  padding: 1rem 1.1rem 1.1rem;
  border-top: 1px solid var(--line);
}

.deadline-edit .explain {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.deadline-edit .actions {
  align-items: center;
  margin-top: 0.25rem;
}

/* A sorting rule: the payee, where it goes (changed in place), and delete. */
.rule-row {
  flex-wrap: wrap;
}

.rule-row .row-main {
  flex: 1 1 12rem;
}

.rule-row .place {
  flex: 0 1 15rem;
}

.rule-row select {
  padding-block: 0.45rem;
  font-size: 0.9rem;
}

/* ---------- Choosing a file ---------- */

.file-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
}

input[type="file"] {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.4rem;
  border: 1px dashed var(--field-line);
  border-radius: 12px;
  background: var(--field);
  color: var(--ink-mute);
  font: 0.9rem/1.4 var(--sans);
  cursor: pointer;
}

input[type="file"]:focus-visible {
  outline: none;
  border-color: var(--green-mark);
  box-shadow: 0 0 0 4px var(--ring);
}

input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--field-line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: 600 0.875rem/1.2 var(--sans);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

input[type="file"]::-webkit-file-upload-button {
  margin-right: 0.75rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--field-line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: 600 0.875rem/1.2 var(--sans);
  cursor: pointer;
}

@media (hover: hover) {
  input[type="file"]:hover::file-selector-button {
    border-color: var(--green-mark);
    background: var(--green-50);
  }
}

/* ---------- Getting the office ready (Today, until it's done) ---------- */

.guide {
  padding: 1.1rem 0 0.5rem;
}

.guide-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0 1.2rem;
}

.guide-head h2 {
  margin: 0;
  font-size: 1.15rem;
}

.guide-count {
  color: var(--ink-mute);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.guide-bar {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 4px;
  margin: 0.75rem 1.2rem 0.5rem;
}

.guide-bar span {
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}

.guide-bar span.done {
  background: var(--green-mark);
}

.guide-steps a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1.2rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s;
}

@media (hover: hover) {
  .guide-steps a:hover {
    background: var(--green-50);
  }
}

.guide-n {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1.5px solid var(--field-line);
  border-radius: 50%;
  color: var(--ink-mute);
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.guide-steps .next .guide-n {
  border-color: var(--green-mark);
  background: var(--green-mark);
  color: var(--white);
}

.guide-steps .done .guide-n {
  border-color: transparent;
  background: var(--green-50);
  color: var(--green-text);
}

.guide-text {
  flex: 1;
  min-width: 0;
}

.guide-title {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

.guide-steps .done .guide-title {
  color: var(--ink-mute);
  font-weight: 500;
}

.guide-why {
  display: block;
  color: var(--ink-mute);
  font-size: 0.875rem;
}

.guide-hide {
  padding: 0.25rem 1.2rem 0.6rem;
  text-align: right;
}

.client-find {
  max-width: 24rem;
  margin: 0 0 0.5rem;
}

/* ---------- Business miles (a gig driver's vehicles) ---------- */

.miles-unit + .miles-unit {
  border-top: 1px solid var(--line);
}

.miles-unit p {
  margin: 0;
}

.miles-form {
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
}

.miles-form select,
.miles-form input {
  flex: 1 1 8rem;
  width: auto;
}

/* A group of questions that folds away (a kind of client with many). */
.field-fold > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0 0.6rem;
  list-style: none;
  cursor: pointer;
}

.field-fold > summary::-webkit-details-marker {
  display: none;
}

.field-fold > summary::after {
  content: "";
  flex: none;
  align-self: center;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.25rem;
  border-right: 2px solid var(--ink-mute);
  border-bottom: 2px solid var(--ink-mute);
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease-out);
}

.field-fold[open] > summary::after {
  transform: rotate(-135deg);
}

.fold-count {
  margin-left: auto;
  color: var(--ink-mute);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
}

/* A question shown once, wherever it belongs (no border or spacing of its own). */
.field-plain {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Spending over its budget. */
.statement td.over {
  color: var(--red-600);
}

/* The kind of client on a client's Details tab: one line until it is to be changed. */
.kind-change > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding-bottom: 0.75rem;
  list-style: none;
  cursor: pointer;
}

.kind-change > summary::-webkit-details-marker {
  display: none;
}

.kind-change > summary .form-section-head {
  margin: 0;
}

.kind-now {
  flex: 1;
  color: var(--ink-soft);
  font-weight: 600;
}

.kind-change[open] > summary .link-button {
  visibility: hidden;
}

/* ---------- New clients: spam ---------- */

/* Under the list of people who got in touch: the way to the Spam list, quiet until needed. */
.list-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

.list-foot-left {
  justify-content: flex-start;
  color: var(--ink-mute);
  font-size: 0.85rem;
}

.link-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink-mute);
  font-weight: 500;
  text-decoration: none;
}

@media (hover: hover) {
  .link-quiet:hover {
    color: var(--ink);
  }
}

/* Why a message is in Spam, on its row and at the top of its page. */
.row-why {
  display: block;
  margin: 0.1rem 0 0.15rem;
  color: var(--amber-ink);
  font-size: 0.85rem;
  font-weight: 500;
}

.spam-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: 1.25rem;
}

.spam-note p {
  flex: 1 1 18rem;
}

.spam-note form {
  flex: none;
}

/* "Spam" sits apart from the buttons that move a person along. */
.actions form:has(> .button-spam) {
  margin-left: auto;
}

.button-spam {
  color: var(--ink-mute);
}

/* ---------- Adding a client: the kind, then everything for it (pages/addclient.js) ---------- */

/* Step one: what kind of client. A search box and cards that lead on. */
.kind-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 40rem;
  margin: 0 0 1.5rem;
}

.kind-search > .icon {
  position: absolute;
  left: 0.95rem;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--ink-mute);
  pointer-events: none;
}

.kind-search input {
  padding: 0.85rem 1rem 0.85rem 2.8rem;
  border-radius: 14px;
  font-size: 1.05rem;
}

/* Searching works as you type; the button is for a page without its script. */
.js .kind-search-go {
  display: none;
}

.kind-group + .kind-group {
  margin-top: 1.5rem;
}

.kind-group-head {
  margin: 0 0 0.6rem;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
}

.kind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 0.6rem;
}

.kind-tile {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  height: 100%;
  padding: 0.9rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-small);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.2s, translate 0.2s var(--ease-out);
}

@media (hover: hover) {
  .kind-tile:hover {
    border-color: var(--green-mark);
    translate: 0 -1px;
  }
}

.kind-tile:active {
  translate: none;
  scale: 0.99;
}

.kind-tile .chev {
  align-self: center;
  margin-left: auto;
}

.kind-tile .kind-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink);
}

.kind-tile .kind-desc {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.kind-suggested {
  border-color: var(--green-mark);
  box-shadow: 0 0 0 3px var(--ring), var(--shadow-small);
}

.kind-none {
  max-width: 40rem;
  padding: 1.25rem 0;
  text-align: left;
}

.kind-help {
  max-width: 40rem;
  margin-top: 1.75rem;
  color: var(--ink-mute);
  font-size: 0.92rem;
}

.lead-card {
  max-width: 40rem;
  margin: 0 0 1.25rem;
}

.lead-card-head {
  color: var(--ink);
  font-weight: 600;
}

.lead-card-text {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 0.3rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  white-space: pre-line;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.lead-card-hint {
  margin-top: 0.6rem;
  font-weight: 500;
}

/* Step two: the form, with what it sets up beside it on a wide screen. */
.setup-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.kind-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.8rem 0.3rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s;
}

.kind-chip .kind-icon {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
}

.kind-chip .kind-icon .icon {
  width: 1.1rem;
  height: 1.1rem;
}

.kind-chip-change {
  color: var(--green-text);
  font-size: 0.85rem;
  font-weight: 500;
}

@media (hover: hover) {
  .kind-chip:hover {
    border-color: var(--green-mark);
  }
}

.setup-lead {
  max-width: 44rem;
}

.explain-toggle {
  margin-left: 0.4rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

.setup {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}

.setup-main {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

@media (min-width: 62em) {
  .setup {
    grid-template-columns: minmax(0, 1fr) 21.5rem;
    gap: 1.5rem;
  }

  .setup-side {
    position: sticky;
    top: 4.75rem;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0.75rem;
    max-height: calc(100dvh - 10rem);
  }

  .setup-side .plan {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .setup-summary {
    color: var(--ink-mute);
    font-size: 0.85rem;
    text-align: center;
    text-decoration: none;
    pointer-events: none;
  }

  .setup-summary:empty {
    display: none;
  }

  .setup-submit {
    display: grid;
    gap: 0.5rem;
    justify-items: center;
  }

  .setup-submit .button {
    width: 100%;
  }
}

/* On a phone and a narrow window: the plan comes after the questions, and the button to add
   them stays at the bottom of the screen, over the tab bar. */
@media (max-width: 61.99em) {
  .setup-side {
    display: contents;
  }

  .setup-submit {
    position: sticky;
    z-index: 4;
    bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 0.5rem);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bar);
    box-shadow: var(--shadow-large);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
  }

  .setup-submit .button {
    flex: 1 1 12rem;
    width: auto;
  }

  .setup-summary {
    flex: 1 1 100%;
    color: var(--ink-soft);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
  }

  .setup-cancel {
    flex: none;
    padding: 0 0.25rem;
  }
}

/* A step: a numbered card. */
.step {
  margin: 0;
  padding: 1.15rem 1.2rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-small);
  scroll-margin-top: 4.5rem;
}

.step-head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}

.step-n {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  margin-top: 0.05rem;
  border-radius: 50%;
  background: var(--green-50);
  color: var(--green-text);
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.2s, color 0.2s;
}

/* A step with everything answered (office.js marks it). */
.step-done > .step-head .step-n {
  background: var(--green-600);
  color: var(--white);
}

.step-title {
  flex: 1;
  min-width: 0;
}

.step-title h2,
.step-title .step-h {
  display: block;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.3;
}

.step-sub {
  margin-top: 0.25rem;
  color: var(--ink-mute);
  font-size: 0.9rem;
}

.step-action {
  flex: none;
  align-self: center;
  font-size: 0.875rem;
}

.step-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

.step-count {
  color: var(--ink-mute);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

/* The optional step folds away, its summary looking like any other step's heading. */
.step-more > summary {
  margin: 0;
  list-style: none;
  cursor: pointer;
}

.step-more > summary::-webkit-details-marker {
  display: none;
}

.step-more[open] > summary {
  margin-bottom: 1.1rem;
}

.step-chev {
  flex: none;
  align-self: center;
  width: 0.6rem;
  height: 0.6rem;
  margin: 0 0.35rem 0.3rem 0.5rem;
  border-right: 2px solid var(--ink-mute);
  border-bottom: 2px solid var(--ink-mute);
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease-out);
}

.step-more[open] .step-chev {
  margin-bottom: -0.2rem;
  transform: rotate(-135deg);
}

/* A group of questions under a small heading. */
.q-group + .q-group {
  margin-top: 1.1rem;
}

.q-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.15rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.step .q-group:first-of-type .q-group-head {
  padding-top: 0;
  border-top: 0;
}

.q-group-head h3 {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 650;
}

.q-group-head .link-button {
  flex: none;
  font-size: 0.85rem;
}

/* An essential question: what it is, why it's asked, and its answers. */
.q {
  min-width: 0;
  margin: 0;
  padding: 0.8rem 0 0.25rem;
  border: 0;
}

.q-label {
  float: left;
  width: 100%;
  padding: 0;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.4;
}

/* Everything after the floated title starts below it, whichever lines are hidden (the
   explanation under it can be). */
.q-label ~ * {
  clear: both;
}

.q-why {
  margin: 0.2rem 0 0;
  color: var(--ink-mute);
  font-size: 0.875rem;
  line-height: 1.45;
}

.setup.explain-off .q-why,
.setup.explain-off .send-why {
  display: none;
}

.answers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.answer {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.95rem;
  border: 1.5px solid var(--field-line);
  border-radius: 999px;
  background: var(--field);
  color: var(--ink);
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s, box-shadow 0.15s, scale 0.1s;
}

.answer input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) {
  .answer:hover {
    border-color: var(--green-mark);
  }
}

.answer:active {
  scale: 0.97;
}

.answer:has(input:focus-visible) {
  outline: 2px solid var(--green-mark);
  outline-offset: 2px;
}

.answer:has(input:checked) {
  border-color: var(--green-mark);
  background: var(--green-50);
  box-shadow: 0 0 0 3px var(--ring);
  color: var(--green-ink);
}

.answer-unsure {
  border-style: dashed;
  color: var(--ink-soft);
  font-weight: 500;
}

/* "Not sure": amber, the colour of something waiting on the client. */
.answer-unsure:has(input:checked) {
  border-style: solid;
  border-color: var(--amber-600);
  background: var(--amber-50);
  box-shadow: none;
  color: var(--amber-ink);
}

/* Answers that need a line of their own to say what they mean (the legal forms). */
.answers-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.answer-card {
  display: grid;
  align-content: start;
  gap: 0.2rem;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
}

.answer-hint {
  color: var(--ink-mute);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.4;
}

.answer-card:has(input:checked) .answer-hint {
  color: var(--green-ink);
}

.answers-select select {
  max-width: 24rem;
}

/* What an answer brings up, tied to it by a line. */
.q-children {
  display: grid;
  margin: 0.75rem 0 0.25rem 0.55rem;
  padding-left: 1rem;
  border-left: 2px solid var(--green-100);
}

.q-children > .q:first-child {
  padding-top: 0.1rem;
}

.q-children > .field {
  margin: 0.4rem 0 0.6rem;
}

/* Brought in by an answer: a short fade, where motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .appear {
    animation: appear 0.28s var(--ease-out);
  }
}

@keyframes appear {
  from {
    opacity: 0;
    translate: 0 -4px;
  }
}

/* Any other question: a label, its (i), and "Ask them" for what the client will know. */
.f-optional {
  color: var(--ink-mute);
  font-weight: 400;
}

.ask-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-self: end;
  margin-top: 0.05rem;
  padding: 0.12rem 0.6rem;
  border: 1px dashed var(--field-line);
  border-radius: 999px;
  color: var(--ink-mute);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.ask-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ask-chip:has(input:focus-visible) {
  outline: 2px solid var(--green-mark);
  outline-offset: 2px;
}

.ask-chip:has(input:checked) {
  border-style: solid;
  border-color: var(--amber-600);
  background: var(--amber-50);
  color: var(--amber-ink);
}

.ask-chip:has(input:checked) span::before {
  content: "✓ ";
}

.field.f:has(.ask-chip input:checked) > :is(input, select) {
  border-style: dashed;
}

.f-check {
  margin: 0.35rem 0 0.75rem;
}

.f-line {
  display: flex;
  align-items: flex-start;
  gap: 0.15rem;
}

.f-line .check {
  margin: 0;
}

.f-problem {
  color: var(--red-600);
  font-size: 0.875rem;
  font-weight: 500;
}

.f-warn {
  color: var(--amber-ink);
  font-size: 0.875rem;
}

.f-note {
  color: var(--ink-mute);
  font-size: 0.85rem;
}

input[aria-invalid="true"] {
  border-color: var(--red-600);
}

/* The accounts: kind, bank, last four, a row each. */
.acct-rows {
  display: grid;
  gap: 0.5rem;
}

.acct-row {
  display: grid;
  grid-template-columns: minmax(9rem, 0.8fr) minmax(0, 1.4fr) 6.5rem;
  gap: 0.5rem;
}

.acct-row .field {
  margin: 0;
}

@media (max-width: 30em) {
  .acct-row {
    grid-template-columns: minmax(0, 1fr) 6.5rem;
  }

  .acct-row .field:first-child {
    grid-column: 1 / -1;
  }

  .acct-row + .acct-row {
    padding-top: 0.6rem;
    border-top: 1px solid var(--line);
  }
}

[data-add-row] {
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

/* A property, location, truck or vehicle. */
.unit-rows {
  display: grid;
  gap: 0.75rem;
}

.unit-block {
  min-width: 0;
  margin: 0;
  padding: 0.95rem 1rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}

.unit-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: 0 1rem;
}

.unit-fields .f-check {
  grid-column: 1 / -1;
}

/* The welcome and the questions: two clear choices. */
.send-choices {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.send-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0.95rem;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--field);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.send-choice input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
}

.send-choice > span {
  display: grid;
  gap: 0.2rem;
}

.send-choice:has(input:checked) {
  border-color: var(--green-200);
  background: var(--green-50);
}

.send-why {
  color: var(--ink-mute);
  font-size: 0.875rem;
  line-height: 1.45;
}

.send-choice:has(input:checked) .send-why {
  color: var(--green-ink);
}

/* What the office will set up. */
.plan {
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-small);
  transition: opacity 0.2s;
}

.plan[aria-busy="true"] {
  opacity: 0.75;
}

.plan-head h2 {
  font-size: 1.1rem;
}

.plan-sub {
  margin-top: 0.15rem;
  color: var(--ink-mute);
  font-size: 0.85rem;
}

.plan-block {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.plan-block h3 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
  font-size: 0.92rem;
}

.plan-block > p {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.plan-count {
  min-width: 1.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-ink);
  font-size: 0.75rem;
  line-height: 1.4rem;
  text-align: center;
}

.plan-asking .plan-count {
  background: var(--amber-50);
  color: var(--amber-ink);
}

.plan-list {
  display: grid;
  gap: 0.1rem;
}

.plan-list li {
  display: grid;
  gap: 0.05rem;
  margin: 0 -0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
}

.plan-what {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
}

.plan-when {
  color: var(--ink-mute);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

/* A deadline an answer has just added: it glows green for a moment. */
@media (prefers-reduced-motion: no-preference) {
  .plan-list li.is-new {
    animation: just-added 2.4s var(--ease-out);
  }
}

@keyframes just-added {
  0%,
  35% {
    background: var(--green-100);
  }
}

.plan-empty,
.plan-note {
  margin-top: 0.4rem;
  color: var(--ink-mute);
  font-size: 0.82rem;
}

.plan-docs {
  display: grid;
  gap: 0.35rem;
  padding-left: 1.1rem;
  color: var(--ink-soft);
  font-size: 0.86rem;
  list-style: disc;
}

.plan-docs li::marker {
  color: var(--ink-mute);
}

/* ---------- Fields: the label inside the box ----------

   A field's label sits inside its box, where a placeholder would, and rises to the top edge,
   small, the moment the box is chosen or has something in it. Pure CSS, from the markup every
   page already writes (<div class="field"><label>…</label><input>…</div>): :has() finds the
   fields this fits, and :placeholder-shown says a box is empty (pages/layout.js gives every text
   box a placeholder for it). A browser without :has() shows the label above the box, as before.
   Left as they are: the W-9 (the IRS's own long wording), search boxes, and labels kept for
   screen readers only.

   The selector for "a field this fits", repeated in each rule below (plain CSS, no nesting, so
   older phones read it):
     .field:not(.w9 .field):has(> label:first-child:not(.visually-hidden) + :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="search"]), select, textarea))
   and, for a month picked from two lists where the browser has no month box of its own:
     .field:has(> label:first-child + input[type="hidden"] + .month-pick) */

:root {
  --field-h: 3.5rem;
  --field-x: 0.95rem;
}

input,
textarea {
  caret-color: var(--green-mark);
}

::selection {
  background: color-mix(in srgb, var(--green-mark) 26%, transparent);
}

/* Every box: a touch taller and rounder, lighter on hover, green when chosen. */
input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"]),
select,
textarea {
  border-radius: 12px;
}

@media (hover: hover) {
  input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"]):hover:not(:focus, :disabled),
  select:hover:not(:focus, :disabled),
  textarea:hover:not(:focus, :disabled) {
    border-color: color-mix(in srgb, var(--field-line), var(--ink) 30%);
  }
}

/* The box and its label, together. */
.field:not(.w9 .field):has(> label:first-child:not(.visually-hidden) + :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="search"]), select, textarea)),
.field:has(> label:first-child + input[type="hidden"] + .month-pick) {
  position: relative;
}

.field:not(.w9 .field):has(> label:first-child:not(.visually-hidden) + :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="search"]), select, textarea)) > label:first-child,
.field:has(> label:first-child + input[type="hidden"] + .month-pick) > label:first-child {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  height: var(--field-h);
  padding: 0 calc(var(--field-x) + 1px);
  color: var(--ink-mute);
  font-size: 0.75rem;
  font-weight: 550;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  translate: 0 -0.8rem;
  pointer-events: none;
  transition:
    translate 0.22s var(--ease-out),
    font-size 0.22s var(--ease-out),
    color 0.15s ease;
}

/* The label's parts: "(optional)" quieter, and the (i) still answers a hover or a tap. Pressing
   the (i) chooses the box too (office.js), so it is part of the box: the box lights up under
   the pointer with it. */
.field > label:first-child .f-optional {
  font-weight: 400;
}

.field:not(.w9 .field):has(> label:first-child:not(.visually-hidden) + :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="search"]), select, textarea)) > label:first-child .tip,
.field:has(> label:first-child + input[type="hidden"] + .month-pick) > label:first-child .tip {
  position: static;
  margin-left: 0.15rem;
  pointer-events: auto;
}

.field:not(.w9 .field):has(> label:first-child:not(.visually-hidden) + :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="search"]), select, textarea)) > label:first-child .tip .icon {
  width: 1.15em;
  height: 1.15em;
}

@media (hover: hover) {
  .field:has(> label:first-child .tip:hover) > :is(input, select, textarea):not(:focus, :disabled),
  .field:has(> label:first-child .tip:hover) > .month-pick > select:not(:focus, :disabled) {
    border-color: color-mix(in srgb, var(--field-line), var(--ink) 30%);
  }
}

/* Its explanation opens just above the box, lined up with its left edge (below it, near the top
   of the screen), and no wider than the box unless the box is narrow. A phone too: there the
   keyboard covers the foot of the screen, where other explanations open. The label (the
   width of the box) is what it is placed against, and it comes above the boxes around it
   while it shows. */
.field:not(.w9 .field):has(> label:first-child:not(.visually-hidden) + :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="search"]), select, textarea)) > label:first-child .tip-body,
.field:has(> label:first-child + input[type="hidden"] + .month-pick) > label:first-child .tip-body {
  position: absolute;
  top: auto;
  right: auto;
  bottom: calc(100% + 0.5rem);
  left: 0;
  width: max-content;
  max-width: min(100%, 26rem);
  transform: translateY(0.25rem);
  /* Hidden, it is no wider than its box, so a narrow box at the edge of a phone never makes the
     page wider than the screen; it widens as it opens (where it is kept inside the window), and
     narrows again only once it has faded out. */
  transition:
    opacity 0.15s ease,
    transform 0.15s var(--ease-out),
    visibility 0.15s,
    max-width 0s 0.15s;
}

.field:not(.w9 .field):has(> label:first-child:not(.visually-hidden) + :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="search"]), select, textarea)) > label:first-child .tip-below .tip-body,
.field:has(> label:first-child + input[type="hidden"] + .month-pick) > label:first-child .tip-below .tip-body {
  top: calc(100% + 0.5rem);
  bottom: auto;
  transform: translateY(-0.25rem);
}

.field:not(.w9 .field):has(> label:first-child:not(.visually-hidden) + :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="search"]), select, textarea)) > label:first-child .tip:is(:hover, :focus, .open) .tip-body,
.field:has(> label:first-child + input[type="hidden"] + .month-pick) > label:first-child .tip:is(:hover, :focus, .open) .tip-body {
  transform: translateY(0);
}

.field:not(.w9 .field):has(> label:first-child:not(.visually-hidden) + :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="search"]), select, textarea)) > label:first-child .tip:is(:focus, .open) .tip-body,
.field:has(> label:first-child + input[type="hidden"] + .month-pick) > label:first-child .tip:is(:focus, .open) .tip-body {
  max-width: max(min(100%, 26rem), min(17rem, 100vw - 2rem));
  transition:
    opacity 0.15s ease,
    transform 0.15s var(--ease-out),
    visibility 0.15s,
    max-width 0s;
}

@media (hover: hover) and (min-width: 40.01em) {
  .field:not(.w9 .field):has(> label:first-child:not(.visually-hidden) + :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="search"]), select, textarea)) > label:first-child .tip:hover .tip-body,
  .field:has(> label:first-child + input[type="hidden"] + .month-pick) > label:first-child .tip:hover .tip-body {
    max-width: max(min(100%, 26rem), min(17rem, 100vw - 2rem));
    transition:
      opacity 0.15s ease,
      transform 0.15s var(--ease-out),
      visibility 0.15s,
      max-width 0s;
  }
}

.field:not(.w9 .field):has(> label:first-child:not(.visually-hidden) + :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="search"]), select, textarea)) > label:first-child:has(.tip:is(:hover, :focus, .open)),
.field:has(> label:first-child + input[type="hidden"] + .month-pick) > label:first-child:has(.tip:is(:hover, :focus, .open)) {
  z-index: 3;
}

/* Empty and not chosen: the label is the placeholder, full size, in the middle of the box. (Two
   rules, not one list: a browser drops a whole rule over one selector it can't read.) */
.field:not(.w9 .field):has(> label:first-child:not(.visually-hidden) + :is(input, textarea):placeholder-shown:not(:focus)) > label:first-child {
  translate: 0 0;
  color: var(--ink-mute);
  font-size: 1rem;
  font-weight: 450;
  letter-spacing: 0;
  /* A long label on a narrow phone takes two lines while it is the placeholder; risen, it is
     small enough for one. */
  white-space: normal;
  text-wrap: balance;
}

.field:not(.w9 .field):has(> label:first-child:not(.visually-hidden) + select:not(:focus) > option[value=""]:checked) > label:first-child {
  translate: 0 0;
  color: var(--ink-mute);
  font-size: 1rem;
  font-weight: 450;
  letter-spacing: 0;
  /* A long label on a narrow phone takes two lines while it is the placeholder; risen, it is
     small enough for one. */
  white-space: normal;
  text-wrap: balance;
}

/* Chosen: the label in green. */
.field:not(.w9 .field):has(> label:first-child:not(.visually-hidden) + :is(input, select, textarea):focus) > label:first-child,
.field:has(> label:first-child + input[type="hidden"] + .month-pick:focus-within) > label:first-child {
  color: var(--green-text);
}

/* The boxes: room at the top for the risen label. */
.field:not(.w9 .field):has(> label:first-child:not(.visually-hidden) + :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="search"]), select)) > :is(input, select),
.field:has(> label:first-child + input[type="hidden"] + .month-pick) > .month-pick > select {
  height: var(--field-h);
  min-height: var(--field-h);
  padding: 1.45rem var(--field-x) 0.4rem;
  line-height: 1.35;
}

.field:not(.w9 .field):has(> label:first-child:not(.visually-hidden) + :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="search"]), select)) > select,
.field:has(> label:first-child + input[type="hidden"] + .month-pick) > .month-pick > select {
  padding-right: 2.4rem;
  background-position: right 0.85rem center;
}

/* An example in a box (“Lopez Trucking LLC”) shows once the box is chosen, under the risen label. */
.field:not(.w9 .field) > :is(input, textarea)::placeholder {
  color: var(--ink-mute);
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.field:not(.w9 .field):has(> label:first-child:not(.visually-hidden)) > :is(input, textarea):not(:focus)::placeholder {
  opacity: 0;
}

/* A list with nothing chosen yet shows its label, not "Choose", until it is opened. */
.field:not(.w9 .field):has(> label:first-child:not(.visually-hidden)) > select:not(:focus):has(> option[value=""]:checked) {
  color: transparent;
}

/* A date, month or time box shows its format (mm/dd/yyyy) faintly while it is empty (office.js
   keeps the value attribute in step as it changes). */
.field:not(.w9 .field) > :is(input[type="date"], input[type="month"], input[type="time"])[value=""]:not(:focus) {
  color: var(--ink-mute);
}

/* Chrome and Safari draw a date box's parts themselves: the same faint colour for them. */
.field:not(.w9 .field) > :is(input[type="date"], input[type="month"], input[type="time"])[value=""]:not(:focus)::-webkit-datetime-edit {
  color: var(--ink-mute);
}

/* A longer text: the label rests where the first line goes, and rises to the top edge. */
.field:not(.w9 .field):has(> label:first-child:not(.visually-hidden) + textarea) > label:first-child {
  align-items: flex-start;
  height: auto;
  padding-top: 0.6rem;
  translate: 0 0;
}

.field:not(.w9 .field):has(> label:first-child:not(.visually-hidden) + textarea:placeholder-shown:not(:focus)) > label:first-child {
  translate: 0 0.55rem;
}

.field:not(.w9 .field):has(> label:first-child:not(.visually-hidden) + textarea) > textarea {
  padding: 1.6rem var(--field-x) 0.65rem;
  min-height: 6rem;
  line-height: 1.5;
}

/* It grows with what is written, where the browser can (and can still be dragged taller). */
@supports (field-sizing: content) {
  .field > textarea:not(.letter-edit) {
    field-sizing: content;
    max-height: 24rem;
  }
}

/* A month from two lists: the label sits over the first. */
.field:has(> label:first-child + input[type="hidden"] + .month-pick) > label:first-child {
  right: auto;
  width: 61%;
}

/* What the browser fills in by itself keeps the office's colours. */
input:autofill,
textarea:autofill,
select:autofill {
  box-shadow: inset 0 0 0 100px var(--field);
  -webkit-text-fill-color: var(--ink);
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  box-shadow: inset 0 0 0 100px var(--field);
  -webkit-text-fill-color: var(--ink);
  transition: background-color 600000s 0s;
}

input:-webkit-autofill:focus {
  box-shadow: inset 0 0 0 100px var(--field), 0 0 0 4px var(--ring);
}

/* Something to fix, only once someone has tried (never on a page just opened). */
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  border-color: var(--red-600);
}

.field:not(.w9 .field):has(> label:first-child:not(.visually-hidden) + :is(input, select, textarea):user-invalid) > label:first-child {
  color: var(--red-600);
}

.field:has(> [aria-invalid="true"]) > label:first-child {
  color: var(--red-600);
}

/* Boxes to tick: drawn here, the same in every browser, with a tick that draws itself in. */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-grid;
  flex: none;
  place-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.1rem 0 0;
  border: 1.5px solid var(--field-line);
  border-radius: 6px;
  background: var(--field);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  background: var(--white);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  scale: 0.4;
  opacity: 0;
  transition:
    scale 0.2s var(--ease-out),
    opacity 0.12s ease;
}

input[type="checkbox"]:checked {
  border-color: var(--green-600);
  background: var(--green-600);
}

input[type="checkbox"]:checked::before {
  scale: 1;
  opacity: 1;
}

@media (hover: hover) {
  input[type="checkbox"]:hover:not(:checked, :disabled) {
    border-color: var(--green-mark);
  }
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--green-mark);
  outline-offset: 2px;
}

input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* The narrowest phones (320 wide: an iPhone SE, or a larger one with its display zoomed): a
   little less room around the boxes, so the longest labels still fit inside them. */
@media (max-width: 22.5em) {
  :root {
    --field-x: 0.8rem;
  }

  .step {
    padding-inline: 0.9rem;
  }

  .unit-block {
    padding-inline: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .field > label:first-child,
  input[type="checkbox"],
  input[type="checkbox"]::before {
    transition: none;
  }
}