/* NestFlo condo booking. One stylesheet, no build step, nothing loaded
   from anywhere else.

   MOBILE FIRST. Residents arrive by scanning a QR code, so the base rules
   below ARE the phone layout (designed at 375px wide). Wider screens only
   add to it, in the min-width blocks at the bottom.

   Held on every resident page, and checked by simulate.py and
   mobile_check.py:
     * one column, no tables, no sideways scroll
     * every tap target at least 44px tall
     * every input at 16px, so iOS does not zoom when one is tapped
     * nothing depends on hover (hover rules live inside @media (hover: hover)) */

/* The colours and the type are nestflo.ca's own, so a booking page reads
   as part of the same site. Poppins is served from this app's own files. */
@font-face { font-family: Poppins; font-weight: 600; font-display: swap; src: url(/static/fonts/Poppins-600-latin.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-weight: 800; font-display: swap; src: url(/static/fonts/Poppins-800-latin.woff2) format("woff2"); }

:root {
  --navy: #0F2D59;
  --navy-deep: #0A2447;
  --teal: #2BB0A3;
  --teal-strong: #0F8579;
  --teal-light: #7FE6D9;
  --teal-wash: #D8EFEC;
  --bg: #F4F7FB;
  --panel: #FFFFFF;
  --ink: #14284B;
  --muted: #48597A;
  --line: #E5EAF3;
  --edge: #CCD6E6;
  --amber: #B7791F;
  --amber-ink: #8A5A12;
  --amber-wash: #FDF3DC;
  --red: #B42318;
  --red-wash: #FDECEA;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(15,27,42,.04), 0 6px 20px rgba(15,27,42,.05);
  --display: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

h1, h2, h3 { font-family: var(--display); color: var(--navy); }
h1 { font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; margin: 6px 0 4px; }
h2 { font-size: 18px; font-weight: 600; line-height: 1.25; margin: 0 0 10px; }
h3 { font-size: 15px; font-weight: 600; margin: 18px 0 8px; }
p { margin: 8px 0; }
a { color: var(--navy); }

.wrap { max-width: 480px; margin: 0 auto; padding: 16px 16px 40px; }
.resident { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.resident > main { flex: 1 0 auto; }

/* ----------------------------------------------------------------- the bar */

.bar {
  background: var(--navy);
  color: #fff;
  border-bottom: 4px solid var(--teal);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.bar .logo { display: block; height: 24px; width: auto; }
.bar .where { font-size: 14px; font-weight: 600; color: var(--teal-light); text-align: right; }

/* What a customer sees: the site's light header, a navy band under it
   that the first card rides up onto, and the site's dark footer. */
.top { background: #fff; border-bottom: 1px solid var(--line); }
.top .in, .pagehead .in { max-width: 480px; margin: 0 auto; }
.top .in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.top .logo { display: block; height: 28px; width: auto; }
.top .where { font-size: 14px; font-weight: 600; color: var(--muted); text-align: right; }
.pagehead { padding: 18px 16px 52px; background: var(--navy-deep); }
.pagehead h1 { margin: 0; color: #fff; }
.pagehead .lede { color: #C3D0E6; }
.pagehead + .wrap { margin-top: -36px; padding-top: 0; }
.pagehead + .wrap > :first-child { margin-top: 0; }
.sitefoot { padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--navy-deep); color: #B5C3DB; font-size: 14px; text-align: center; }
.sitefoot img { display: block; height: 24px; width: auto; margin: 0 auto 8px; }
.sitefoot p { margin: 0; }

/* ----------------------------------------------------------------- pieces */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin: 16px 0;
}

.lede { color: var(--muted); margin: 4px 0 0; }
.hint { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.empty { color: var(--muted); padding: 8px 0; }
.muted { color: var(--muted); }
.textbrent { font-size: 15px; margin: 12px 0 0; color: var(--muted); }
.textbrent a { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy); font-weight: 600; }

.label { display: block; font-weight: 600; font-size: 15px; color: var(--navy); margin: 18px 0 6px; }
.card > .label:first-child, .col > .label:first-child { margin-top: 0; }

input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
select,
textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;          /* under 16px, iOS zooms the page on focus */
  -webkit-appearance: none;
  appearance: none;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--teal-light); outline-offset: 0; border-color: var(--teal); }
input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--navy); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 18px;
  border: 1px solid var(--navy);
  border-radius: 12px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn.primary { background: var(--navy); color: #fff; }
.btn.quiet { border-color: transparent; background: transparent; color: var(--muted); text-decoration: underline; }
.btn.small { min-height: 44px; padding: 8px 14px; font-size: 14px; border-radius: 10px; }
.btn:focus-visible, .chip:focus-visible, summary:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 2px; }
.btn:active { opacity: .85; }

.note { border-radius: 12px; padding: 12px 14px; margin: 14px 0; font-weight: 600; }
.note.err { background: var(--red-wash); color: var(--red); }
.note.ok { background: var(--teal-wash); color: var(--navy); }
.note.warn { background: var(--amber-wash); color: var(--amber-ink); }
.note.areastop { margin: 8px 0 0; }

/* The field no person sees (the public form's honeypot). Off the page, out of the tab order. */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ask { margin-top: 28px; }
.democode { border-top: 1px solid var(--line); padding: 12px 0; }
.democode:first-of-type { border-top: 0; }
.democode p { margin: 0 0 4px; overflow-wrap: anywhere; }

.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #E3EAF3;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.pill.teal { background: var(--teal-wash); color: #0B5F57; }
.pill.amber { background: var(--amber-wash); color: var(--amber-ink); white-space: normal; }
.pill.grey { background: var(--bg); color: var(--muted); }
.pill.navy { background: var(--navy); color: #fff; }

/* ---------------------------------------------------------- the resident */

.resident .btn { width: 100%; margin-top: 14px; }

/* The day chips and the times. Three across at 375px; each one a full tap target. */
.chips, .times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.chip {
  min-height: 48px;
  padding: 6px 4px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.dayname { margin: 16px 0 8px; }

.time { position: relative; display: block; }
.time input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.time span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: #fff;
  color: var(--navy);
  font-weight: 600;
}
.time input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.time input:focus-visible + span { outline: 3px solid var(--teal-light); outline-offset: 2px; }
.time.taken span { background: var(--bg); border-style: dashed; color: #8793A1; font-weight: 500; text-decoration: line-through; }

/* The Book button sits at the end of the form. Once a time is picked
   (app.js marks the form `picked`) it rides the bottom of the screen and
   says the time, so it never has to be hunted for. Before that it stays
   out of the way of the name and number fields. */
.sticky { margin: 18px 0 0; }
.picked .sticky {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  margin: 12px -16px -16px;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
}
.resident .sticky .btn { margin-top: 0; }

.done { text-align: center; }
.tick {
  width: 56px;
  height: 56px;
  margin: 4px auto 10px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 30px;
  line-height: 56px;
}
.when { font-size: 18px; font-weight: 600; color: var(--navy); }

details.change { padding: 16px; }
details.change > summary { list-style: none; width: 100%; }
details.change > summary::-webkit-details-marker { display: none; }
details.change[open] > summary { margin-bottom: 6px; }
.cancel { text-align: center; }

/* ---------------------------------------------------------- the operator */

.bar.op { flex-wrap: wrap; }
.bar.op nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.bar.op nav a, .linkish {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.linkish { border: 0; background: none; color: var(--teal-light); cursor: pointer; }
.count { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--teal); color: var(--navy); font-size: 12px; font-weight: 700; }

.op .wrap, .print .wrap { max-width: 1040px; }
.crumbs { margin: 0 0 4px; font-size: 13px; }
.crumbs a { color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.inline { display: inline-flex; margin: 0; }
.units { line-height: 1.9; font-variant-numeric: tabular-nums; }
code { padding: 2px 6px; border-radius: 6px; background: #fff; border: 1px solid var(--line); font-size: 13px; }

.row, .rowform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.moderow { justify-content: space-between; }
.moderow p { margin: 0; flex: 1 1 200px; }
.row > input, .rowform > input { flex: 1 1 160px; width: auto !important; }
.rowform { margin: 0 0 8px; }
.rowform > .narrow { flex: 0 1 90px; }
.stack .btn { margin-top: 12px; }

.dayform { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; align-items: end; }
.dayform label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); }
.dayform label > input, .dayform label > select { margin-top: 4px; }
.dayform .check { display: flex; align-items: center; gap: 10px; min-height: 48px; font-weight: 500; }

.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.grid { width: 100%; border-collapse: collapse; }
.grid th {
  padding: 8px 10px;
  border-bottom: 2px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.grid td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }

.text .sms { margin: 10px 0; padding: 12px 14px; border-radius: 12px; background: var(--bg); white-space: pre-wrap; }

/* The day sheet and the board's record are tables on a wide screen and a
   stack of rows on a phone: no sideways scroll in a hallway. */
.daysheet thead, .record-sheet thead { display: none; }
.daysheet, .daysheet tbody, .record-sheet .grid, .record-sheet tbody { display: block; }
.daysheet tr, .record-sheet tbody tr {
  display: grid;
  gap: 0 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.daysheet td, .record-sheet tbody td { display: block; padding: 0; border: 0; }
.daysheet td:empty, .record-sheet tbody td:empty { display: none; }

.daysheet { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 14px; }
.daysheet tr { grid-template-columns: 76px minmax(0, 1fr); }
.daysheet tr:last-child { border-bottom: 0; }
.daysheet td { grid-column: 2; margin-bottom: 4px; }
.daysheet td.t { grid-column: 1; grid-row: 1 / span 6; font-weight: 700; color: var(--navy); white-space: nowrap; }
.daysheet td.u { font-size: 18px; }
.daysheet td.u strong::before { content: "Unit "; font-weight: 600; color: var(--muted); font-size: 13px; }
.daysheet .state { margin: 2px 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }

.record-sheet tbody tr { grid-template-columns: 64px auto minmax(0, 1fr); align-items: center; }
.record-sheet tbody td:nth-child(3) { color: var(--muted); font-size: 14px; }
.record-sheet tbody td:nth-child(4) { grid-column: 2 / -1; font-size: 14px; }

/* ------------------------------------------------- the notice and the record */

.sheet {
  max-width: 7.5in;
  margin: 16px auto;
  padding: 0 18px 28px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.sheet .topbar { height: 14px; margin: 0 -18px 24px; background: var(--teal); }
.sheetlogo { display: block; height: auto; max-width: 60%; }
.kicker { margin: 18px 0 0; color: var(--muted); font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.notice-sheet { text-align: center; }
.notice-sheet .sheetlogo { margin: 0 auto; }
.notice-sheet h1 { font-size: 34px; margin: 6px 0 12px; }
.notice-sheet h2 { font-size: 26px; margin: 14px 0 4px; }
.notice-sheet .place .pill { padding: 6px 18px; font-size: 16px; }
.notice-sheet .sub, .notice-sheet .url { font-size: 17px; }
.notice-sheet .sub, .notice-sheet .questions { color: var(--muted); }
.qr { display: inline-block; margin: 18px 0 4px; padding: 12px; border: 6px solid var(--teal); border-radius: 24px; line-height: 0; }
.qr svg { display: block; width: min(64vw, 3.2in); height: auto; }

.record-sheet h1 { font-size: 24px; }
.asof { margin: 0; color: var(--muted); }
.headline { margin: 14px 0 8px; color: var(--navy); font-size: 28px; font-weight: 700; line-height: 1.15; }
.totals { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.foot { margin-top: 20px; color: var(--muted); font-size: 14px; }

/* ------------------------------------------- the Board's page and the demo */

.sample {
  margin: 0; padding: 8px 16px;
  background: var(--amber-wash); color: var(--amber-ink);
  font-size: 14px; font-weight: 700; text-align: center;
}
.codebox, .code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.codebox { font-size: 20px; text-align: center; }
.board .headline { font-size: 24px; }
.board .pill, .record-sheet .pill { font-size: 14px; }   /* the Board reads these on a phone */
.board h2 { margin: 0; }
.daylist { list-style: none; margin: 0 0 4px; padding: 0; }
.daylist li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px;
}
.daylist li:last-child { border-bottom: 0; }
.board .actions .btn { width: auto; margin-top: 0; }
.board .sheet { margin-top: 0; }
.steps { list-style: none; counter-reset: step; margin: 16px 0 4px; padding: 0; }
.steps li {
  counter-increment: step; position: relative;
  margin: 0 0 10px; padding: 14px 14px 14px 58px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.steps li::before {
  content: counter(step); position: absolute; left: 14px; top: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--teal-wash); color: #0B5F57; font-weight: 700; line-height: 32px; text-align: center;
}
.steps strong, .steps span { display: block; }
.steps strong { color: var(--navy); }
.steps span { color: var(--muted); }
.bubble {
  margin: 0 0 4px; padding: 12px 14px; border-radius: 18px 18px 18px 4px;
  background: var(--bg); overflow-wrap: anywhere;
}
.boardcode { margin: 6px 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.boardcode .code { font-size: 17px; color: var(--navy); }

/* ----------------------------------------------------------- wider screens */

@media (min-width: 420px) {
  .chips, .times { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 760px) {
  h1 { font-size: 28px; }
  .wrap { padding: 24px 24px 56px; }
  .card { padding: 20px; }
  .btn.small { min-height: 38px; padding: 6px 12px; }
  .picked .sticky { margin: 14px -20px -20px; padding: 12px 20px 16px; }
  .sheet { padding: 0 40px 40px; }
  .sheet .topbar { margin: 0 -40px 32px; }
  .notice-sheet h1 { font-size: 44px; }
  .notice-sheet h2 { font-size: 30px; }

  .daysheet { display: table; padding: 0; border-radius: 0; border: 0; background: transparent; }
  .daysheet thead, .record-sheet thead { display: table-header-group; }
  .daysheet tbody, .record-sheet tbody { display: table-row-group; }
  .record-sheet .grid { display: table; }
  .daysheet tr, .record-sheet tbody tr { display: table-row; }
  .daysheet td, .record-sheet tbody td,
  .daysheet td:empty, .record-sheet tbody td:empty { display: table-cell; padding: 10px; border-bottom: 1px solid var(--line); }
  .daysheet td { background: var(--panel); }
  .daysheet td.u { font-size: 17px; }
  .daysheet td.u strong::before { content: none; }
  .record-sheet tbody td:nth-child(3), .record-sheet tbody td:nth-child(4) { color: inherit; font-size: inherit; }
}

/* A computer. Only the pages that ask for it (body class `wide`): the
   booking page puts who on the left and when on the right. The
   walkthrough and the Board's page have their own sheet, site.css.
   Everything else stays the phone column, centred. */
@media (min-width: 900px) {
  .wide .wrap, .wide .top .in, .wide .pagehead .in { max-width: 1000px; }
  .wide .wrap { padding-top: 40px; }
  .wide .top .in { padding: 16px 24px; }
  .wide .top .logo { height: 34px; }
  .wide .pagehead { padding: 44px 24px 84px; }
  .wide .pagehead + .wrap { margin-top: -60px; padding-top: 0; }
  .wide h1 { font-size: 38px; }
  .wide .lede { font-size: 18px; }
  .wide .kicker { margin-top: 0; }

  .wide .bookform { padding: 32px 36px 36px; margin-top: 24px; box-shadow: 0 18px 50px rgba(10,36,71,.14); }
  .cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .col.you { padding-right: 36px; }
  .col.when { padding-left: 36px; border-left: 1px solid var(--line); }
  .col.when .picker > .label:first-child { margin-top: 0; }
  .wide .sticky, .wide .picked .sticky {
    position: static; margin: 24px 0 0; padding: 0;
    background: none; border: 0; border-radius: 0;
  }
}

@media (hover: hover) {
  .btn:hover { filter: brightness(.96); }
  .btn.primary:hover { filter: brightness(1.2); }
  .chip:hover, .time input:not(:checked) + span:hover { border-color: var(--navy); }
}

/* ------------------------------------------------------- the site header */

/* The logo leads home on every page. On the public pages the header is
   pages.site_top(): it stays at the top of the screen and carries the
   site's links on a computer. Its rules sit here, not in site.css, so the
   house-call form wears it without loading that sheet, and below the
   `wide` block so its own widths win. */
.top .brand { display: flex; align-items: center; min-height: 44px; margin: -8px 0; }
.site-top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(244, 247, 251, .92);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
}
.top.site-top .in { max-width: 1120px; padding: 6px 12px; gap: 8px; }
.site-top .brand { margin: 0; }
.top.site-top .logo { height: 24px; }
.site-top .nav { display: none; }
.site-top .login {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.site-top .login:focus-visible, .top .brand:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
@media (min-width: 760px) {
  .top.site-top .in { padding: 10px 24px; gap: 24px; }
  .top.site-top .logo { height: 30px; }
  .site-top .login { padding: 0 16px; }
}
@media (min-width: 900px) {
  .wide .top .brand { margin: -5px 0; }
  .wide .site-top .brand { margin: 0; }
  .site-top .nav { display: flex; gap: 28px; margin: 0 auto 0 12px; }
  .site-top .nav a { color: var(--muted); font-size: 15px; font-weight: 500; text-decoration: none; }
  .site-top .nav a[aria-current] { color: var(--navy); font-weight: 600; }
  .site-top .where { margin-left: auto; }
}
@media (hover: hover) {
  .site-top .nav a:hover { color: var(--navy); }
  .site-top .login:hover { background: var(--navy-deep); }
}

/* ------------------------------------------------------------------ print */

@media print {
  @page { margin: 0.5in; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; }
  .noprint, .bar, .top, .sitefoot, .note { display: none !important; }
  .resident { display: block; min-height: 0; }
  .wrap { max-width: none; padding: 0; }
  .sheet { max-width: none; margin: 0; border: 0; border-radius: 0; }
  .qr svg { width: 3.4in; }
  .grid tr { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }

  .daysheet { display: table; padding: 0; border: 0; }
  .daysheet thead, .record-sheet thead { display: table-header-group; }
  .daysheet tbody, .record-sheet tbody { display: table-row-group; }
  .record-sheet .grid { display: table; }
  .daysheet tr, .record-sheet tbody tr { display: table-row; }
  .daysheet td, .record-sheet tbody td,
  .daysheet td:empty, .record-sheet tbody td:empty { display: table-cell; padding: 8px; border-bottom: 1px solid var(--line); }
  .daysheet td.u strong::before { content: none; }
}

/* residential additions */

/* The two questions on /book: the vent is a three-across row of chips; the
   type of home, four answers, sits two by two so "Townhouse" never wraps. */
.times.asks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.times.asks.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.asks .time span { padding: 6px 4px; font-size: 14px; line-height: 1.25; text-align: center; overflow-wrap: normal; word-break: normal; }