/*
  The screens themselves: the day's work list, the planner calendar, customer services and the
  pickers.
*/

@layer screens {
  /* Dashboard -------------------------------------------------------------- */

  /* The three numbers that describe the business, set large enough to read at arm's length. */
  .figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0;
    border-top: 1px solid var(--rule-strong);
  }

  .figures__item {
    padding: var(--s-4) 0 var(--s-5);
    border-bottom: 1px solid var(--rule);
  }

  @media (min-width: 48em) {
    .figures__item { padding-inline: var(--s-5); border-bottom: 0; }
    .figures__item:first-child { padding-inline-start: 0; }
    .figures__item + .figures__item { border-inline-start: 1px solid var(--rule); }
  }

  .figures__label {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--ink-2);
  }

  .figures__value {
    display: block;
    font-family: var(--face-display);
    margin-block: var(--s-1);
    font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }

  .figures__value--money { color: var(--money); }

  .figures__note { font-size: var(--text-sm); color: var(--ink-3); }

  .notice {
    padding: var(--s-4);
    border: 1px solid var(--rule);
    border-inline-start: 3px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface-sunk);
    margin-bottom: var(--s-5);
  }

  .notice h2 { font-size: var(--text-lg); margin-bottom: var(--s-2); }
  .notice p { margin: 0; }

  /* Work list -------------------------------------------------------------- */

  .work-day-navigator {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
  }

  .work-day-navigator h2 {
    flex: 1 1 auto;
    text-align: center;
    font-size: var(--text-xl);
  }

  .work-day-navigator h2 a {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0.25em;
  }

  /* The bank holiday the day falls on, under the date rather than beside it, so the date stays the
     thing read first. */
  .work-day-navigator__bank-holiday {
    display: block;
    /* Clear of the dotted underline on the month link, which the tight heading leading puts on
       top of this line otherwise. */
    margin-top: var(--s-2);
    font-family: var(--face);
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--ink-2);
  }

  .work-day-navigator__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap);
    min-height: var(--tap);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
  }

  .work-day-navigator__btn:hover { background: var(--surface-sunk); }

  .work-lists {
    display: flex;
    gap: var(--s-4);
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: var(--s-3);
  }

  .work-lists__real-lists {
    display: flex;
    gap: var(--s-4);
    align-items: flex-start;
  }

  .work-lists__placeholder-list__inner {
    width: 16rem;
    border: 1px dashed var(--rule-strong);
    border-radius: var(--radius-lg);
  }

  .work-list {
    width: 22rem;
    max-width: calc(100vw - var(--s-6));
    background: var(--surface-sunk);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
  }

  @media (max-width: 35.99em) {
    .work-list { width: min(22rem, calc(100vw - var(--s-6))); }
  }

  .work-list__heading {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-4) var(--s-3) var(--s-3);
  }

  .work-list__heading h3 {
    flex: 1 1 auto;
    font-size: var(--text-lg);
    user-select: none;
  }

  /* Three figures for the day: what it is worth, what has been done, what has been paid for. */
  .work-list__totals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-4);
    padding: 0 var(--s-3) var(--s-3);
    font-size: var(--text-sm);
    color: var(--ink-2);
  }

  .work-list__totals strong {
    font-family: var(--face-display);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
  }

  /* Only money actually collected takes the money colour; the rest is ink. */
  .work-list__totals__item--paid strong { color: var(--money); }

  .work-list__entries {
    max-height: min(60vh, 40rem);
    overflow-y: auto;
    padding: var(--s-1) var(--s-3);
  }

  .work-list__entry {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: var(--s-3);
    margin-bottom: var(--s-2);
    cursor: pointer;
  }

  .work-list__entry:hover { border-color: var(--rule-strong); }

  /* A spine down the left edge carries the state, the way a round book carries a tick column. */
  .work-list__entry::before {
    content: "";
    position: absolute;
    inset-block: -1px;
    inset-inline-start: -1px;
    width: 3px;
    border-start-start-radius: var(--radius);
    border-end-start-radius: var(--radius);
    background: transparent;
  }

  .work-list__entry:has(.work-list__entry__tap--on)::before { background: var(--ink-3); }
  .work-list__entry:has(.work-list__entry__tap--paid.work-list__entry__tap--on)::before { background: var(--money); }

  .work-list__entry__head {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: start;
    gap: var(--s-1) var(--s-2);
  }

  .work-list__entry__address {
    display: block;
    font-weight: 600;
    line-height: 1.25;
  }

  .work-list__entry__name {
    display: block;
    font-size: var(--text-sm);
    color: var(--ink-2);
  }

  /* The price sits in its own column so a list of houses reads down the figures. */
  .work-list__entry__price {
    font-family: var(--face-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .work-list__entry__taps {
    display: flex;
    gap: var(--s-2);
    margin-top: var(--s-2);
  }

  .work-list__entry__tap {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    min-height: 2rem;
    padding: 2px var(--s-2);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink-2);
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: none;
    user-select: none;
  }

  .work-list__entry__tap svg { width: 14px; height: 14px; }

  .work-list__entry__tap:hover {
    color: var(--ink);
    border-color: var(--ink-3);
    text-decoration: none;
  }

  .work-list__entry__tap--on {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }

  .work-list__entry__tap--collecting {
    color: var(--money);
    border-style: dashed;
  }

  .work-list__entry__tap--paid.work-list__entry__tap--on {
    background: var(--money);
    border-color: var(--money);
    color: var(--money-ink);
  }

  .work-list__entry__tap--on:hover {
    background: color-mix(in oklab, var(--ink) 88%, var(--paper));
    border-color: color-mix(in oklab, var(--ink) 88%, var(--paper));
    color: var(--paper);
  }

  .work-list__entry__tap--paid.work-list__entry__tap--on:hover {
    background: color-mix(in oklab, var(--money) 88%, black);
    border-color: color-mix(in oklab, var(--money) 88%, black);
    color: var(--money-ink);
  }

  /* Removing an entry is the one destructive control here, so it is narrow, set apart, and rust. */
  .work-list__entry__tap--remove {
    flex: 0 0 auto;
    min-width: 2rem;
    padding-inline: var(--s-2);
    color: var(--owing);
    border-color: color-mix(in oklab, var(--owing) 40%, var(--rule-strong));
  }

  .work-list__entry__tap--remove:hover {
    background: var(--owing);
    border-color: var(--owing);
    color: var(--owing-ink);
  }

  .work-list__entry__collapse.show { display: flex; }
  .work-list__entry__collapse { gap: var(--s-3); }
  .work-list__entry__customer { flex: 1 1 auto; padding-top: var(--s-2); font-size: var(--text-sm); }
  .work-list__entry__actions { display: flex; flex-direction: column; gap: var(--s-1); }

  .work-list__empty {
    padding: var(--s-4) var(--s-2);
    font-size: var(--text-sm);
    color: var(--ink-3);
  }

  /* A rule marks where the scrolling list ends, so the action below it is not read as another row. */
  .work-list__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-top: 1px solid var(--rule);
  }

  /* button_to wraps its button in a form, which would otherwise take a row of its own. */
  .work-list__footer .button_to { display: contents; }

  .btn-work-list {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-width: 2rem;
    min-height: 2rem;
    padding: var(--s-1) var(--s-2);
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--ink-2);
    cursor: pointer;
  }

  .btn-work-list:hover { background: var(--surface-sunk); color: var(--ink); }

  /* The heading and the footer sit on the panel, which is already the sunk colour, so a button
     there has to lift off it instead. Without this its hover state is the colour it sits on. */
  .work-list__heading .btn-work-list:hover,
  .work-list__footer .btn-work-list:hover { background: var(--surface); }

  .sortable-drag { rotate: 2deg; box-shadow: var(--shadow-sheet); }
  .sortable-ghost { opacity: 0; }
  [draggable="true"] { cursor: pointer; }

  /* The entry editor is one column on a phone; two only when there is room for two. */
  .entry-editor { display: grid; gap: var(--s-4); }

  .entry-editor__customer { display: grid; gap: var(--s-1); }

  .entry-editor__address {
    font-family: var(--face-display);
    font-size: var(--text-lg);
    font-weight: 700;
    margin: 0;
  }

  .entry-editor__name {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--ink-2);
    margin: 0 0 var(--s-2);
  }

  .entry-editor__map { color: var(--ink-3); line-height: 0; }
  .entry-editor__map:hover { color: var(--accent); }

  .entry-editor .section-heading { margin-block: 0 var(--s-2); }

  .entry-editor__open {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    justify-self: start;
    font-size: var(--text-sm);
  }

  .entry-editor .form-group:last-child { margin-bottom: 0; }
  .entry-editor__panel { display: grid; gap: var(--s-2); align-content: start; }
  .entry-editor__panel .form-group { margin-bottom: var(--s-2); }
  .entry-editor__note { font-size: var(--text-sm); color: var(--ink-2); margin: 0; }
  /* The label column is as wide as its longest label and never more than half, so a phone number or a date stays on one line. */
  .entry-editor .datum-row { grid-template-columns: fit-content(50%) 1fr; }

  /* The same three actions as the card, kept quiet because the card is where they belong. */
  .entry-editor__quick {
    display: grid;
    gap: var(--s-2);
    padding-top: var(--s-3);
    border-top: 1px solid var(--rule);
  }

  .entry-editor__quick-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

  .quick--on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .quick--on:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

  .quick--paid.quick--on,
  .quick--paid.quick--on:hover {
    background: var(--money);
    border-color: var(--money);
    color: var(--money-ink);
  }

  .quick--remove { color: var(--owing); border-color: color-mix(in oklab, var(--owing) 40%, var(--rule-strong)); }
  .quick--remove:hover { background: var(--owing); border-color: var(--owing); color: var(--owing-ink); }

  @media (min-width: 36em) {
    .entry-editor { grid-template-columns: 1fr 1fr; align-items: start; }
    .entry-editor__customer,
    .entry-editor__quick { grid-column: 1; }
    .entry-editor__panel { grid-column: 2; grid-row: 1 / span 2; }
  }

  /* Planner calendar ------------------------------------------------------- */

  .calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .calendar .heading {
    padding: var(--s-2);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--ink-2);
    text-align: end;
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--rule);
  }

  .calendar .day {
    min-height: 5rem;
    border-inline-start: 1px solid var(--rule);
    border-block-start: 1px solid var(--rule);
  }

  .calendar .day:nth-child(7n + 1) { border-inline-start: 0; }
  .calendar .heading + .heading { border-inline-start: 1px solid var(--rule); }

  /* A bank holiday goes on a different ground, so the days most customers are in show up before
     the round is filled. The ground is --rule because it steps away from the surface in both
     themes, where --surface-sunk is all but the surface itself in the dark one. Today keeps the
     accent, so its rule comes after this one. */
  .calendar .day.bank-holiday { background: var(--rule); }
  .calendar .day.bank-holiday a:hover { background: var(--rule-strong); }

  .calendar .day.today { background: var(--accent-soft); }

  .calendar .day a {
    display: block;
    height: 100%;
    padding: var(--s-2);
    text-align: end;
    text-decoration: none;
    color: var(--ink);
  }

  .calendar .day a:hover { background: var(--surface-sunk); }

  .calendar .day p {
    margin-top: var(--s-1);
    text-align: start;
    font-size: var(--text-xs);
    line-height: var(--leading-tight);
    color: var(--ink-2);
  }

  .calendar__bank-holiday { font-weight: 600; }

  /* Seven columns on a phone leave a cell about six characters wide, which no bank holiday name
     fits into: "Easter Monday" comes out broken across four lines. Below the breakpoint the
     shaded ground marks the day on its own and the name is read out on the day itself, so it is
     taken out of the picture but left for a screen reader. */
  @media (max-width: 47.99em) {
    .calendar .day .calendar__bank-holiday {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  /* The month's bank holidays written out, for the phone, where a cell is too narrow to hold a
     name. On a wider screen each name is already in its own cell, so this is not shown. */
  .calendar-key {
    display: none;
    margin-top: var(--s-4);
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    color: var(--ink);
  }

  .calendar-key li {
    display: flex;
    gap: var(--s-3);
    padding: var(--s-2) 0;
    border-top: 1px solid var(--rule);
  }

  .calendar-key__date {
    min-width: 3.5rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
  }

  @media (max-width: 47.99em) {
    .calendar-key { display: block; }
  }

  /* Filters ---------------------------------------------------------------- */

  /* Two selects beside a search box leave no room on a phone, so they fold away behind a toggle.
     On a wider screen the wrapper disappears and they sit in the row as before. */
  .filterbar__toggle { display: none; }

  @media (min-width: 48em) {
    .filterbar__more.filterbar__more { display: contents; }
  }

  @media (max-width: 47.99em) {
    .filterbar__toggle { display: inline-flex; }

    .filterbar__more {
      flex-basis: 100%;
      display: grid;
      gap: var(--s-3);
    }

    .filterbar__more.collapse:not(.show) { display: none; }
    .filterbar__field, .filterbar__field--wide { min-width: 0; }
  }

  /* Customer list ---------------------------------------------------------- */

  /* Five columns do not fit a phone, so each customer becomes two lines: the address and what
     they are worth, then the round, the name and when they were added. */
  @media (max-width: 47.99em) {
    .customer-table thead { display: none; }

    /* Placed explicitly so a long address cannot pull the round up onto the first line. */
    .customer-table tbody tr {
      display: grid;
      grid-template-columns: auto auto 1fr auto;
      column-gap: var(--s-3);
      row-gap: var(--s-1);
      align-items: baseline;
      padding-block: var(--s-3);
      border-bottom: 1px solid var(--rule);
    }

    .customer-table tbody tr:hover { background: none; }

    .customer-table td { display: block; border: 0; padding: 0; }

    .customer-table td:nth-child(1) { grid-row: 1; grid-column: 1 / 4; font-weight: 600; }
    .customer-table td:nth-child(5) { grid-row: 1; grid-column: 4; }
    .customer-table td:nth-child(2) { grid-row: 2; grid-column: 1; }
    .customer-table td:nth-child(3) { grid-row: 2; grid-column: 2; }
    .customer-table td:nth-child(4) { grid-row: 2; grid-column: 3; }

    .customer-table td:nth-child(2),
    .customer-table td:nth-child(3),
    .customer-table td:nth-child(4) {
      font-size: var(--text-sm);
      color: var(--ink-2);
    }
  }

  /* Rounds ----------------------------------------------------------------- */

  /* Wide enough for Plan round and Edit round to sit side by side. */
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--s-4);
  }

  .round-card + .round-card { margin-top: 0; }

  .round-card__name {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--text-lg);
  }

  .round-card__count { margin-block: var(--s-2) var(--s-4); color: var(--ink-2); }

  .round-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }

  .roundtags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    list-style: none;
    padding: 0;
    margin: var(--s-2) 0 0;
  }

  .roundtag {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-3);
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    font-size: var(--text-sm);
    color: var(--ink);
    text-decoration: none;
  }

  .roundtag:hover {
    background: color-mix(in oklab, var(--round-color, var(--ink)) 12%, transparent);
    border-color: var(--round-color, var(--rule-strong));
    text-decoration: none;
  }

  /* Each round carries its own colour, so a dot is enough to tell them apart at a glance. */
  .roundtag__dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--round-color, var(--ink-3));
    flex: none;
  }

  .round-card__dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--round-color, var(--ink-3));
    flex: none;
  }

  .round-card { border-inline-start: 3px solid var(--round-color, var(--rule)); }

  .colorfield__picker {
    inline-size: 3.5rem;
    block-size: 2.25rem;
    padding: 2px;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
  }


  /* Customer services ------------------------------------------------------ */

  .customer-service {
    background: var(--surface-sunk);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    margin-inline: 0;
    margin-bottom: var(--s-4);
    padding: var(--s-3);
  }

  .customer-service__display {
    padding: 0;
    background: none;
    border: 0;
    margin: 0;
  }

  /* Each service is one block in a ruled list, separated rather than boxed. */
  .customer-service__display + .customer-service__display {
    margin-top: var(--s-5);
    padding-top: var(--s-5);
    border-top: 1px solid var(--rule-strong);
  }
  .customer-service .rrule .interval { max-width: 80%; }

  /* A service in a Tom Select list: name and price on one line, description and repeat under them.
     The chosen one in the control is the first line only. */
  .service-option { display: grid; grid-template-columns: 1fr auto; column-gap: var(--s-3); align-items: baseline; }
  .service-option__name { font-weight: 700; }
  .service-option__price { font-variant-numeric: tabular-nums; color: var(--ink-2); }
  .service-option__details { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--ink-2); }
  .service-option--item { display: inline-flex; gap: var(--s-2); }

  .report-hint { font-size: var(--text-sm); color: var(--ink-2); margin: 0; }

  /* Under the services: the total, then what to record about payment, then Save, all on the right edge. */
  .job-form__summary { display: grid; justify-items: end; gap: var(--s-2); padding-top: var(--s-3); }
  .job-form__summary .form-group, .job-form__summary .custom-control { margin: 0; }
  .job-form__summary .custom-control { min-height: 0; }
  .job-form__summary .custom-control-label { white-space: nowrap; }
  .job-form__total { display: flex; gap: var(--s-4); margin: 0; font-size: var(--text-lg); }

  @media (max-width: 35.99em) {
    .job-form-table .table thead { display: none; }
    .job-form-table .table td { padding: var(--s-2) var(--s-1); }
  }

  /* Messages --------------------------------------------------------------- */

  .message__meta {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--text-xs);
    color: var(--ink-2);
  }

  .message__body {
    display: block;
    max-width: 40rem;
    overflow-wrap: anywhere;
  }

  /* Who gets what when messaging a whole list: one row per customer, stacked on small screens. */
  .recipients { border-top: 1px solid var(--rule); margin-bottom: var(--s-4); }

  .recipient {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto;
    gap: var(--s-2) var(--s-4);
    align-items: start;
    padding-block: var(--s-3);
    border-bottom: 1px solid var(--rule);
  }

  .recipient__who { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); }
  .recipient__by { font-size: var(--text-sm); color: var(--ink-2); }
  .recipient__body { margin: 0; max-width: 40rem; overflow-wrap: anywhere; }
  .recipient__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-2); white-space: nowrap; }
  .recipient__actions[hidden] { display: none; }
  .recipient__actions .button_to { display: contents; }

  @media (max-width: 48em) {
    .recipient { grid-template-columns: minmax(0, 1fr); }
  }

  /* Composing a message: the choices in one row, then the words. */
  .compose__choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    align-items: flex-start;
    margin-bottom: var(--s-4);
  }

  .compose__choice { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; margin: 0; padding: 0; border: 0; }
  .compose__choice > span:not(.compose__channels), .compose__choice legend { font-size: var(--text-sm); font-weight: 700; color: var(--ink-2); }
  .compose__choice legend { float: none; width: auto; margin: 0; padding: 0; }
  .compose__channels { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; min-height: var(--tap); }
  .compose__channel { display: inline-flex; align-items: center; gap: var(--s-1); margin: 0; }
  .compose__message { max-width: 40rem; }
  .compose__count { margin: calc(-1 * var(--s-2)) 0 var(--s-3); font-size: var(--text-sm); }

  .tokens { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-1) var(--s-3); font-size: var(--text-sm); margin: 0 0 var(--s-4); }
  .tokens dt code { font-size: inherit; }
  .tokens dd { margin: 0; color: var(--ink-2); }

  .reminder-schedule { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0 var(--s-4); }

  /* Message settings: sentences with the control inside them, sized to the line so the text keeps its rhythm. */
  .section-heading--iconed { display: flex; align-items: center; gap: var(--s-2); }
  .section-heading--iconed .icon { color: var(--ink-3); }
  .section-heading__action { margin-inline-start: auto; }
  .setting--plain .setting__box { color: var(--ink-3); padding-top: 0.35rem; }
  .setting--ruled { grid-template-columns: var(--tap) 1fr auto; padding-block: var(--s-3); border-bottom: 1px solid var(--rule); }
  .setting--ruled:last-of-type { border-bottom: 0; }
  .setting--ruled p { color: var(--ink-2); }
  .setting--nested { margin-inline-start: calc(var(--tap) + var(--s-3)); }
  .setting__inline {
    display: inline-block;
    width: auto;
    font: inherit;
    line-height: 1.3;
    padding: 0 0.4em;
    margin: 0;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    vertical-align: baseline;
  }
  .setting__inline:disabled { color: var(--ink-2); background: var(--surface-sunk); }
  .setting__inline--days { width: 3.2rem; text-align: center; }
  .setting__inline--money { width: 4.5rem; }
  .setting__inline--sender { width: 9rem; }

  /* The template editor: the form on the left, the preview beside it from tablet width up. */
  .compose__message--previewed { max-width: none; display: grid; gap: 0 var(--s-6); grid-template-columns: minmax(0, 40rem) minmax(16rem, 22rem); }
  .compose__message--previewed > * { grid-column: 1; }
  .compose__message--previewed > .btn { justify-self: start; }
  .compose__message--previewed .template-preview { grid-column: 2; grid-row: 1 / span 20; }
  @media (max-width: 48em) {
    .compose__message--previewed { grid-template-columns: 1fr; }
    .compose__message--previewed .template-preview { grid-column: 1; grid-row: auto; }
  }

  /* The customer's messages as a thread: newest at the bottom, each one opening in full. */
  .thread { display: flex; flex-direction: column; gap: var(--s-4); width: 75%; max-width: none; margin-inline: auto; }
  @media (max-width: 48em) { .thread { width: 100%; } }
  .thread__day { align-self: center; font-size: var(--text-xs); font-weight: 700; color: var(--ink-3); }
  .thread__item { display: flex; flex-direction: column; align-items: flex-end; color: inherit; text-decoration: none; }
  .thread__item:hover .as-received__bubble, .thread__item:focus-visible .as-received__bubble { filter: brightness(1.08); }
  .thread__item:hover .thread__sheet, .thread__item:focus-visible .thread__sheet { outline: 2px solid var(--accent); outline-offset: 2px; }
  .thread__kind { font-size: var(--text-xs); color: var(--ink-2); margin-bottom: var(--s-1); }
  .thread__item .as-received__bubble { margin: 0; max-width: min(100%, 36rem); }
  .thread__sheet { display: block; width: min(100%, 36rem); padding: var(--s-3) var(--s-4); }
  .thread__subject { display: block; font-family: var(--face-display); font-weight: 700; margin-bottom: var(--s-1); }
  .thread__excerpt { display: block; color: var(--ink-2); font-size: var(--text-sm); }

  /* Texts sent by month: thin columns in one hue, values on the caps, a hairline baseline. */
  .usage { margin: var(--s-2) 0 0; max-width: 22rem; }
  .usage__chart { display: block; width: 100%; height: auto; }
  .usage__bar { fill: var(--accent); }
  .usage__bar--emails { fill: var(--ink-3); }
  .usage__legend { display: flex; gap: var(--s-3); margin-top: var(--s-1); font-size: var(--text-xs); color: var(--ink-2); }
  .usage__legend span { display: inline-flex; align-items: center; gap: var(--s-1); }
  .usage__legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--accent); }
  .usage__legend i.usage__bar--emails { background: var(--ink-3); }
  .usage__baseline { stroke: var(--rule-strong); stroke-width: 1; }
  .usage__value, .usage__month-name { font-family: var(--face); font-size: 11px; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
  .usage__caption { margin-top: var(--s-1); font-size: var(--text-xs); color: var(--ink-3); }

  /* Services, each row a form that saves as it is edited: a mark, a grid of named fields, and Delete at the end. */
  .service-row {
    display: grid;
    grid-template-columns: var(--tap) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.6fr) auto;
    grid-template-areas:
      "mark name price repeat delete"
      "mark description description description delete";
    gap: var(--s-3) var(--s-4);
    align-items: start;
    padding-block: var(--s-5);
    border-bottom: 1px solid var(--rule);
  }

  .service-row:last-child { border-bottom: 0; }
  .service-row__mark { grid-area: mark; display: flex; justify-content: center; align-self: start; padding-top: 1.9rem; color: var(--ink-3); }
  .service-row__name { grid-area: name; }
  .service-row__price { grid-area: price; }
  .service-row__repeat { grid-area: repeat; }
  .service-row__description { grid-area: description; }
  .service-row__delete { grid-area: delete; align-self: start; padding-top: 1.6rem; }
  .service-row__interval { display: none; }
  .service-row__interval:not(.d-none) { display: inline-flex; }

  @media (max-width: 48em) {
    .service-row {
      grid-template-columns: var(--tap) minmax(0, 1fr);
      grid-template-areas:
        "mark name"
        "mark description"
        "mark price"
        "mark repeat"
        "mark delete";
    }
    .service-row__delete { padding-top: 0; justify-self: start; }
  }

  /* A named field: a small label over a full-size control, units set beside the control. */
  .field { display: flex; flex-direction: column; gap: var(--s-1); margin: 0; min-width: 0; }
  .field__label { font-size: var(--text-sm); font-weight: 700; color: var(--ink-2); }
  .field__input { width: 100%; }
  .field__input--display { font-family: var(--face-display); font-weight: 700; font-size: var(--text-lg); }
  .field__input--short { width: 4.5rem; text-align: center; }
  .field__row, .field__money { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
  .field__money .field__input { width: 7rem; }
  .field__unit { color: var(--ink-2); }
  .field__row > .field__input { width: auto; min-width: 8rem; }

  /* One message, read in full. */
  .message-page { max-width: 36rem; }
  .message-page .as-received { margin-top: var(--s-4); }
  .message-page__facts { margin: var(--s-3) 0 0; color: var(--ink-2); font-size: var(--text-sm); max-width: var(--measure); }

  /* Dates ------------------------------------------------------------------ */
  /* flatpickr, recoloured with the tokens so the calendar follows the theme. Its own sheet is vendor/flatpickr.css. */

  .flatpickr-calendar { background: var(--surface); color: var(--ink); border: 1px solid var(--rule); box-shadow: var(--shadow-sheet); }
  .flatpickr-calendar.arrowTop::before { border-bottom-color: var(--rule); }
  .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--surface); }
  .flatpickr-calendar.arrowBottom::before { border-top-color: var(--rule); }
  .flatpickr-calendar.arrowBottom::after { border-top-color: var(--surface); }
  .flatpickr-months .flatpickr-month, .flatpickr-current-month, .flatpickr-current-month input.cur-year { color: var(--ink); fill: var(--ink); }
  .flatpickr-current-month .flatpickr-monthDropdown-months { background: var(--surface); color: var(--ink); }
  .flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: var(--ink-2); }
  .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--accent); }
  .flatpickr-weekdays, .flatpickr-weekday { background: transparent; color: var(--ink-2); }
  .flatpickr-day { color: var(--ink); border-color: transparent; }
  .flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.inRange { background: var(--surface-sunk); border-color: var(--surface-sunk); color: var(--ink); }
  .flatpickr-day.today { border-color: var(--ink-3); }
  .flatpickr-day.today:hover { background: var(--surface-sunk); color: var(--ink); }
  .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--ink-3); }
  .flatpickr-current-month .numInputWrapper span.arrowUp::after { border-bottom-color: var(--ink-2); }
  .flatpickr-current-month .numInputWrapper span.arrowDown::after { border-top-color: var(--ink-2); }
  .flatpickr-time, .flatpickr-time input, .flatpickr-time .flatpickr-time-separator { color: var(--ink); background: var(--surface); }

  /* Pickers ---------------------------------------------------------------- */
  /* Tom Select, restyled with the form tokens. Its own sheet is vendor/tom-select.css; these selectors
     carry the wrapper so they outrank its two-class rules such as .full .ts-control. */

  .ts-wrapper.form-control, .ts-wrapper.form-control-sm, .ts-wrapper.single, .ts-wrapper.multi { padding: 0; border: 0; height: auto; background: none; box-shadow: none; }

  .ts-wrapper .ts-control {
    min-height: var(--tap);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    box-shadow: none;
    gap: var(--s-1);
  }

  .ts-wrapper.focus .ts-control { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 1px; }
  .ts-wrapper .ts-control > input { color: var(--ink); font: inherit; min-width: 6rem; }
  .ts-wrapper .ts-control > input::placeholder { color: var(--ink-3); }

  .ts-wrapper.multi .ts-control > .item {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: 1px var(--s-2);
    border-radius: var(--radius);
    background: var(--surface-sunk);
    color: var(--ink);
    font-size: var(--text-sm);
  }

  .ts-wrapper.multi .ts-control > .item.active { background: var(--accent-soft); color: var(--ink); }
  .ts-wrapper.plugin-remove_button .item .remove { border-inline-start: 0; padding: 0 var(--s-1); color: var(--ink-2); }
  .ts-wrapper.plugin-remove_button .item .remove:hover { background: none; color: var(--owing); }

  /* body > .ts-dropdown is a list opened on the body, for a select inside a scrolling table. */
  .ts-wrapper .ts-dropdown, body > .ts-dropdown {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--rule-strong);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-sheet);
    font: inherit;
  }

  .ts-wrapper .ts-dropdown .option, .ts-wrapper .ts-dropdown .create, body > .ts-dropdown .option, body > .ts-dropdown .create { padding: var(--s-2) var(--s-3); cursor: pointer; color: var(--ink); }
  .ts-wrapper .ts-dropdown .active, body > .ts-dropdown .active { background: var(--surface-sunk); color: var(--ink); }
  .ts-wrapper .ts-dropdown .no-results, .ts-wrapper .ts-dropdown .create, body > .ts-dropdown .no-results, body > .ts-dropdown .create { color: var(--ink-2); }
  /* Adding a customer to a day's list ---------------------------------------- */
  /* The search box takes the room and the round select keeps its width; both are the same height. */

  .add-customer__search { display: flex; gap: var(--s-2); }
  .add-customer__search .search-field { flex: 1; }
  .add-customer__search select { flex: 0 0 12rem; }
  .add-customer__search .form-control { height: var(--tap); }
  /* With its native look off, the select sets its text from the top of the padding box, so the
     line is made the height of the box to centre it. */
  .add-customer__search select { padding-block: 0; line-height: calc(var(--tap) - 2px); }

  .stack > .customer-results { margin-block-start: var(--s-4); }

  .customer-results {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule-strong);
  }

  .customer-result { border-bottom: 1px solid var(--rule); }

  .customer-result__head {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8rem 9rem var(--tap) auto;
    gap: var(--s-3);
    align-items: center;
    padding: var(--s-3) 0;
  }

  /* The row itself opens the customer. The toggle is a button, so it takes the keyboard and reads
     as one, and its face is stretched over the whole row. */
  .customer-result__toggle {
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-3);
    cursor: pointer;
  }

  .customer-result__toggle::after { content: ""; position: absolute; inset: 0; }
  .customer-result__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
  .customer-result__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }

  .customer-result__details, .customer-result__add { position: relative; z-index: 1; }

  /* A small way out to the customer's own page, beside the address. */
  .customer-result__details {
    display: inline-flex;
    vertical-align: -1px;
    margin-inline-start: var(--s-1);
    color: var(--ink-3);
  }

  .customer-result__details:hover { color: var(--accent); }

  .customer-result__address { display: block; font-weight: 600; line-height: 1.25; }
  .customer-result__name { display: block; font-size: var(--text-sm); color: var(--ink-2); }

  .customer-result__rounds { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--text-sm); color: var(--ink-2); }
  .customer-result__rounds .cell-with-mark { white-space: nowrap; }

  .customer-result__due {
    font-size: var(--text-sm);
    color: var(--ink-2);
    text-align: end;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .customer-result__due--overdue { color: var(--owing); font-weight: 700; }
  .customer-result__due small { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--ink-3); }

  .customer-result__add { white-space: nowrap; }

  /* Open, the row shows the customer's phone and note beside the services to tick. Everything in
     it is set at the row's second size, the one the name, round and due date use. */
  .customer-result__body.show {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-5);
    padding-bottom: var(--s-4);
    font-size: var(--text-sm);
  }

  .customer-result__body .form-check-label { font-size: var(--text-sm); }
  .customer-result__facts p { margin: 0 0 var(--s-2); }

  .customer-result__datum {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: var(--s-3);
  }

  .customer-result__fact { color: var(--ink-2); font-weight: 700; }

  @media (max-width: 47.99em) {
    .add-customer__search { flex-wrap: wrap; }
    .add-customer__search select { flex-basis: 100%; }
    /* The address keeps the width and the due date takes a line of its own beneath it. */
    .customer-result__head {
      grid-template-columns: minmax(0, 1fr) var(--tap) auto;
      grid-template-areas: "who toggle add" "due due due";
      row-gap: var(--s-1);
    }

    .customer-result__who { grid-area: who; }
    .customer-result__rounds { display: none; }
    .customer-result__due { grid-area: due; text-align: start; }
    .customer-result__due small { display: inline; margin-inline-start: var(--s-2); }
    .customer-result__toggle { grid-area: toggle; }
    .customer-result__add { grid-area: add; }
    .customer-result__body.show { grid-template-columns: minmax(0, 1fr); }
  }
}