/* ChuckTrack, on screen.
   The palette is Chuck's workshop: milled wood, cream paper, rust plaid, olive
   canvas, and a red marker for the one thing on the page that matters. */

:root {
  --paper:      #FBF6EC;
  --paper-warm: #F3E9D7;
  --rule:       #DFD0B8;
  --rule-hard:  #C4AF92;
  --ink:        #3B2A1D;
  --ink-soft:   #7A6653;
  --wood:       #7A4A22;
  --wood-dark:  #5C3618;
  --plaid:      #C1622F;
  --olive:      #6B7A4A;
  --marker:     #C0392B;
  --shadow:     0 1px 0 rgba(59, 42, 29, .07), 0 6px 18px rgba(59, 42, 29, .06);
  --radius:     6px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.5 "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Header ------------------------------------------------------------------ */

header.chrome {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: .7rem 1.4rem;
  background: linear-gradient(180deg, #8A5628 0%, var(--wood-dark) 100%);
  color: #F6E9D6;
  box-shadow: var(--shadow);
}

/* Chuck is the product's face, so he is drawn at a size you notice rather than
   tucked into a 42px circle. The cut-out sits on the wood gradient with no
   plate behind it, and hangs a little below the header's own line, which is
   what makes him look placed rather than pasted. */
.brand { display: flex; align-items: flex-end; gap: .9rem; }
.brand .mark {
  width: 78px;
  height: auto;
  margin: -.55rem 0 -1.05rem;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .28));
}
.wordmark { font-size: 1.5rem; font-weight: 700; letter-spacing: .01em; line-height: 1.1; }
.property { font-size: .82rem; opacity: .82; }

@media (max-width: 720px) {
  .brand .mark { width: 54px; margin: -.3rem 0 -.7rem; }
  .wordmark { font-size: 1.2rem; }
}

header.chrome nav { display: flex; align-items: center; gap: .2rem; }
header.chrome nav a,
header.chrome nav .linky {
  color: #F6E9D6;
  text-decoration: none;
  padding: .35rem .7rem;
  border-radius: var(--radius);
  font-size: .9rem;
}
header.chrome nav a:hover,
header.chrome nav .linky:hover { background: rgba(255, 255, 255, .13); }
header.chrome nav a.here { background: rgba(0, 0, 0, .22); font-weight: 600; }

main { padding: 1.4rem; max-width: 1180px; margin: 0 auto; }
main.solo, main.login { max-width: 640px; text-align: center; padding-top: 3rem; }

footer {
  padding: 2rem 1.4rem 3rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: .8rem;
}

h1 { font-size: 1.5rem; margin: 0 0 .6rem; color: var(--wood); }
h2 { font-size: 1.1rem; margin: 1.6rem 0 .5rem; color: var(--wood); }
p.lede { color: var(--ink-soft); max-width: 62ch; }
p.lede.success { color: var(--olive); font-weight: 600; }
p.hint { color: var(--ink-soft); font-size: .84rem; margin: .3rem 0 .6rem; }

/* Banners ----------------------------------------------------------------- */

.banner {
  margin: 0;
  padding: .6rem 1.4rem;
  font-size: .9rem;
  border-bottom: 1px solid var(--rule);
}
.banner.notice  { background: #EAF0DE; color: #3E4A26; }
.banner.problem { background: #F8DED9; color: #8A2C1E; }
main .banner { border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 1rem; }

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

button, .primary, .secondary, .step {
  font: inherit;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid var(--rule-hard);
  background: var(--paper-warm);
  color: var(--ink);
  padding: .4rem .8rem;
  text-decoration: none;
  display: inline-block;
}
button:hover, .secondary:hover, .step:hover { background: #EADFC8; }

.primary {
  background: var(--wood);
  border-color: var(--wood-dark);
  color: #FDF6EA;
  font-weight: 600;
}
.primary:hover { background: var(--wood-dark); }
.primary.disabled, button:disabled {
  background: var(--paper-warm);
  color: var(--ink-soft);
  border-color: var(--rule);
  cursor: default;
  font-weight: 400;
}

.linky {
  border: none;
  background: none;
  color: var(--wood);
  padding: 0 .3rem;
  text-decoration: underline;
  font-size: .85rem;
}
form.inline { display: inline; }

input[type="text"], input[type="email"], input[type="password"],
input[type="date"], select {
  font: inherit;
  padding: .35rem .5rem;
  border: 1px solid var(--rule-hard);
  border-radius: var(--radius);
  background: #FFFDF8;
  color: var(--ink);
}
input:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--plaid);
  outline-offset: 1px;
}

label { display: block; margin: .5rem 0; }
label > span { display: block; font-size: .82rem; color: var(--ink-soft); margin-bottom: .15rem; }
label.check { display: flex; align-items: center; gap: .5rem; }
label.check > span { margin: 0; font-size: .9rem; color: var(--ink); }

/* Login ------------------------------------------------------------------- */

.login .hero {
  width: 100%;
  max-width: 560px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  margin-bottom: 1.5rem;
}
.login .chuck-big, main.solo .chuck-big { width: 230px; margin-bottom: 1rem; }
p.tagline { margin-top: 2.2rem; color: var(--ink-soft); font-size: .9rem; }
.key-form { display: flex; gap: .5rem; justify-content: center; align-items: stretch; }
.key-form input {
  flex: 1 1 22rem;
  min-width: 0;
  text-align: center;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .6rem;
}
/* One field, one arrow. The length of what was typed says whether it is a key
   or an invite code, so there is nothing here for anyone to choose. */
.key-form .go {
  flex: 0 0 auto;
  width: 3rem;
  background: var(--wood);
  border-color: var(--wood-dark);
  color: #FDF6EA;
  font-size: 1.3rem;
  line-height: 1;
  padding: 0;
}
.key-form .go:hover { background: var(--wood-dark); }
form.stacked { text-align: left; max-width: 26rem; margin: 0 auto; }
form.stacked input { width: 100%; }
form.stacked button, form.stacked .secondary { margin-top: .8rem; margin-right: .4rem; }

p.key {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.15rem;
  letter-spacing: .12em;
  word-break: break-all;
  background: var(--paper-warm);
  border: 1px dashed var(--rule-hard);
  border-radius: var(--radius);
  padding: .9rem;
}

.change-summary {
  font-family: inherit;
  white-space: pre-wrap;
  background: var(--paper-warm);
  border: 1px dashed var(--rule-hard);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  margin: 0 0 .8rem;
}

/* The week bar ------------------------------------------------------------ */

.weekbar { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .9rem; }
.weekbar .spacer { flex: 1; }
.step { font-size: .85rem; padding: .3rem .7rem; }
.step.copy-last-week { background: var(--olive); color: #FDF6EA; border-color: var(--olive); }
.step.copy-last-week:hover { background: #5A6A3C; }

/* Grid or Coverage: two steps joined into one control. */
.view-switch { display: inline-flex; margin-left: .5rem; }
.view-switch .step { border-radius: 0; }
.view-switch .step:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.view-switch .step:last-child { border-radius: 0 var(--radius) var(--radius) 0; margin-left: -1px; }
.view-switch .step.here { background: var(--wood); border-color: var(--wood); color: #FDF6EA; }

.print-menu { position: relative; }
.print-menu summary { list-style: none; }
.print-menu summary::-webkit-details-marker { display: none; }
.print-menu[open] summary { background: #EADFC8; }
.print-options {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: .3rem;
  background: var(--paper);
  border: 1px solid var(--rule-hard);
  border-radius: var(--radius);
  padding: .4rem;
  z-index: 5;
  white-space: nowrap;
}
.print-options a {
  font-size: .85rem;
  padding: .25rem .4rem;
  border-radius: 4px;
  color: var(--wood);
  font-weight: 600;
  text-decoration: none;
}
.print-options a:hover { background: var(--paper-warm); }
.print-options .print-scope {
  margin: .35rem .4rem .1rem;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);
}
.print-options .print-scope:first-child { margin-top: .1rem; }
.print-options .print-row { display: flex; align-items: center; gap: .2rem; }
.print-options .print-row span { flex: 1; font-size: .85rem; padding: .25rem .4rem; margin-right: .6rem; }

.week-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.week-title { margin: 0 0 .5rem; }
.week-state { display: flex; gap: .35rem; flex-wrap: wrap; }

.chip {
  font-size: .72rem;
  padding: .16rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--rule-hard);
  background: var(--paper-warm);
  color: var(--ink-soft);
}
/* Bright yellow, the same one a changed cell gets. Both mean "this is not
   settled yet", and using one colour for that idea is what makes it legible. */
.chip.draft { background: #FFFF66; border-color: #C9A21E; color: #5C4708; font-weight: 600; }
.chip.clean { background: #E7EFDA; border-color: #A9BE85; color: #46572B; }
.chip.locked { background: #E9E4DA; }
.chip.read { background: var(--paper-warm); }
.chip.stale { background: #F6B7AC; border-color: var(--marker); color: #7A1E12; font-weight: 600; }
.chip.unpublished { background: #F8DED9; border-color: #D8A79C; color: #8A2C1E; }

/* The grid ---------------------------------------------------------------- */

table.grid {
  border-collapse: collapse;
  width: 100%;
  background: #FFFDF8;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  overflow: hidden;
}

table.grid th, table.grid td {
  border: 1px solid var(--rule);
  padding: .3rem .4rem;
  text-align: center;
  font-size: .88rem;
}

table.grid thead th {
  background: var(--paper-warm);
  color: var(--ink-soft);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  padding: .45rem .4rem;
}

table.grid th.who {
  text-align: left;
  width: 10.5rem;
  background: var(--paper-warm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.grid td.hours, table.grid th.hours { width: 3.2rem; white-space: nowrap; color: var(--ink-soft); }
table.grid td.hours.over { color: var(--marker); font-weight: 600; }

table.grid th.who.clickable { cursor: pointer; }
table.grid th.who.clickable:hover { outline: 2px solid var(--plaid); outline-offset: -2px; }
table.grid th.who.clickable.open { outline: 2px solid var(--marker); outline-offset: -2px; }

td.cell { min-width: 5.5rem; height: 2.1rem; position: relative; }
td.cell.blank { background: #FFFDF8; }
td.cell.editable { cursor: pointer; }
td.cell.editable:hover,
td.cell.editable:focus-visible { outline: 2px solid var(--plaid); outline-offset: -2px; }

/* Today's column, on screen only: the header goes marker-red and the whole
   column gets a rule down each side, so the eye lands on the right day
   without the cells themselves changing colour. */
table.grid th.day.today { color: var(--marker); }
table.grid th.day.today,
table.grid td.today { border-left: 2px solid var(--plaid); border-right: 2px solid var(--plaid); }
td.cell.open { outline: 2px solid var(--marker); outline-offset: -2px; }
td.cell.saving { opacity: .45; }
td.cell.labelled .entry { font-style: italic; }

tr.events td.event { background: var(--paper-warm); padding: .2rem; height: auto; }
.event-tag {
  display: inline-block;
  font-size: .68rem;
  padding: .1rem .4rem;
  border-radius: 999px;
  margin: .05rem;
  background: #E7EFDA;
  border: 1px solid #A9BE85;
  color: #46572B;
}
.event-tag.closure { background: #F8DED9; border-color: #D8A79C; color: #8A2C1E; }
.event-tag.holiday { background: #FBF0C8; border-color: #D9C271; color: #6B5510; }

tr.notes td.note { background: var(--paper-warm); cursor: pointer; height: 1.4rem; }
tr.notes td.note.has-note .note-mark { color: var(--marker); font-weight: 700; }

ol.footnotes { margin: .7rem 0 0; padding-left: 1.2rem; font-size: .85rem; color: var(--ink-soft); }
ol.footnotes .footnote-day { font-weight: 600; color: var(--ink); margin-right: .4rem; }

/* The cell menu ----------------------------------------------------------- */

.cellmenu {
  position: absolute;
  z-index: 40;
  background: #FFFDF8;
  border: 1px solid var(--rule-hard);
  border-radius: var(--radius);
  box-shadow: 0 8px 26px rgba(59, 42, 29, .22);
  padding: .5rem;
  width: 20rem;
}
.cellmenu[hidden] { display: none; }
.cellmenu-row { display: flex; gap: .35rem; margin-bottom: .35rem; }
.cellmenu-row[hidden] { display: none; }
.cellmenu-row button { flex: 1; font-size: .82rem; padding: .3rem .4rem; }
.cellmenu-row input { flex: 1; min-width: 0; }
.cellmenu-other summary { cursor: pointer; font-size: .82rem; color: var(--wood); }
.cellmenu .labels { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .4rem; }
.cellmenu .labels button { flex: 0 0 auto; font-size: .78rem; padding: .2rem .5rem; }
.cellmenu .swatches { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .35rem; }
.cellmenu .swatches button {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.cellmenu .swatches button:hover { border-color: var(--wood); }

/* Actions ----------------------------------------------------------------- */

.actions { margin-top: 1.2rem; display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.actions .commit { margin-bottom: .2rem; }
.drawer {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .5rem .8rem;
  background: #FFFDF8;
  width: 100%;
  max-width: 34rem;
}
.drawer summary { cursor: pointer; font-weight: 600; color: var(--wood); }
.drawer form { margin-top: .5rem; }
ul.banks { list-style: none; padding: 0; margin: .6rem 0 0; font-size: .88rem; }
ul.banks li { padding: .2rem 0; border-top: 1px solid var(--rule); }

/* Tables on the other pages ----------------------------------------------- */

table.people, table.events-table, table.tokens { border-collapse: collapse; width: 100%; margin-bottom: .8rem; }
table.people th, table.people td,
table.events-table td, table.tokens td {
  border-bottom: 1px solid var(--rule);
  padding: .4rem .5rem;
  text-align: left;
  vertical-align: middle;
}
table.people th { font-size: .78rem; text-transform: uppercase; color: var(--ink-soft); }
table.people th a { color: inherit; text-decoration: underline dotted; }
table.people input { width: 100%; max-width: 18rem; }
td.tick.order { width: 5rem; }
.order-handle {
  cursor: grab;
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 .3rem;
}
tr.draggable.dragging { opacity: .4; }
.order-buttons { display: inline-flex; flex-direction: column; gap: 1px; vertical-align: middle; }
.order-buttons button {
  font-size: .6rem;
  line-height: 1;
  padding: .15rem .3rem;
  background: none;
  border: 1px solid var(--rule-hard);
}
.order-buttons button:disabled { opacity: .3; cursor: default; }
.full-name { font-weight: 600; }
.position { font-size: .8rem; color: var(--ink-soft); }
td.when { white-space: nowrap; font-variant-numeric: tabular-nums; width: 14rem; }
td.row-action { text-align: right; width: 6rem; }

.panel {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: #FFFDF8;
  padding: .9rem 1.1rem;
  margin-bottom: 1rem;
}
.panel h2 { margin-top: 0; }
.add-event { display: flex; gap: .7rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1.2rem; }
.add-event label { margin: 0; }

@media (max-width: 720px) {
  table.grid th.who { width: 5.5rem; }
  td.cell { min-width: 3.6rem; font-size: .78rem; }
  main { padding: .8rem; }
  /* Nine columns do not fit a phone. The grid scrolls sideways inside its
     own section, so the week bar and the actions below stay put. The cell
     menu is positioned against the document, not the section, so it still
     lands on the cell that was tapped. */
  section.week { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Rows for people working elsewhere in the hotel this week. Shown because a
   person on another department's shift is not available for one here, greyed
   because nothing about them can be changed from this schedule. */
tr.person.elsewhere th.who,
tr.person.elsewhere td { color: var(--ink-soft); font-style: italic; }
tr.person.elsewhere { opacity: .78; }
tr.person.elsewhere th.who { font-weight: 400; }

/* Bright yellow is reserved for a cell that differs from the same weekday of
   the week before. Nothing else in the palette is allowed to use it, which is
   what makes it readable at a glance. */
p.legend { display: flex; align-items: center; gap: .4rem; margin: .6rem 0 0;
           font-size: .82rem; color: var(--ink-soft); }
p.legend .swatch { display: inline-block; width: 1.6rem; height: .9rem;
                   border: 1px solid var(--rule-hard); border-radius: 2px; }

/* Named shifts in the cell menu ------------------------------------------- */

.cellmenu-row.shifts { flex-wrap: wrap; }
.cellmenu-row.shifts button {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .05rem;
  padding: .25rem .3rem;
  line-height: 1.15;
}
.shift-name { font-weight: 600; font-size: .82rem; }
.shift-times { font-size: .7rem; color: var(--ink-soft); }

/* People and Shifts tables ------------------------------------------------ */

th.tick, td.tick { text-align: center; width: 4.5rem; }
table.shifts-table { border-collapse: collapse; width: 100%; max-width: 34rem; margin-bottom: .8rem; }
table.shifts-table th, table.shifts-table td {
  border-bottom: 1px solid var(--rule);
  padding: .35rem .5rem;
  text-align: left;
}
table.shifts-table th { font-size: .78rem; text-transform: uppercase; color: var(--ink-soft); }
table.shifts-table input[type="text"] { width: 100%; }
table.shifts-table input[type="time"] {
  font: inherit;
  padding: .3rem .4rem;
  border: 1px solid var(--rule-hard);
  border-radius: var(--radius);
  background: #FFFDF8;
  color: var(--ink);
}

.shifts-layout { display: flex; align-items: center; gap: 1rem; }
.shifts-main { flex: 0 0 auto; max-width: 34rem; min-width: 0; }
.shifts-chuck { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.chuck-chops { width: 220px; max-width: 100%; height: auto; }
@media (max-width: 900px) {
  .shifts-chuck { display: none; }
}

/* First run ---------------------------------------------------------------- */

.welcome .steps {
  list-style: none;
  margin: 1.6rem auto 0;
  padding: 0;
  max-width: 26rem;
  text-align: left;
}
.welcome .steps li {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .45rem .2rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
}
.welcome .steps li:last-child { border-bottom: none; }
.step-mark {
  flex: 0 0 1.2rem;
  text-align: center;
  font-weight: 700;
  color: var(--rule-hard);
}
.step-detail { margin-left: auto; font-size: .8rem; font-variant-numeric: tabular-nums; }
.welcome .step-running { color: var(--ink); }
.welcome .step-running .step-mark { color: var(--plaid); }
.welcome .step-done { color: var(--ink); }
.welcome .step-done .step-mark { color: var(--olive); }
.welcome .step-failed { color: var(--marker); }
.welcome .step-failed .step-mark { color: var(--marker); }
/* Chuck breathes while he works, which is the only thing on the page that
   says this is still going rather than stuck. */
.welcome .chuck-big { animation: chuck-breathe 3.4s ease-in-out infinite; }
@keyframes chuck-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
  .welcome .chuck-big { animation: none; }
}

/* Help pages: a screenshot with a caption above it, and a plain header for a
   visitor who has no session yet - the login page's whole audience. */
.help-index { list-style: none; margin: 0; padding: 0; }
.help-index li { padding: .9rem 0; border-bottom: 1px solid var(--rule); }
.help-index li:first-child { padding-top: 0; }
.help-index a { font-weight: 600; font-size: 1.05rem; }
.help-index p { margin: .25rem 0 0; color: var(--ink-soft); }
p.help-shot { margin: 1rem 0 1.4rem; }
p.help-shot img {
  max-width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
p.help-back { margin-top: 2rem; }
p.help-link { margin-top: .6rem; }
p.help-link a { font-size: .9rem; }
header.help-anon {
  padding: 1rem 1.4rem;
  background: linear-gradient(180deg, var(--wood) 0%, var(--wood-dark) 100%);
}
header.help-anon .brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
header.help-anon .mark { width: 44px; height: 44px; }
header.help-anon .wordmark { color: var(--paper); font-size: 1.2rem; font-weight: 700; }

/* The marketing landing page (chucktrack.com, signed out) --------------- */

header.marketing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.4rem;
  background: linear-gradient(180deg, var(--wood) 0%, var(--wood-dark) 100%);
}
header.marketing-header .brand { display: flex; align-items: center; gap: .7rem; }
header.marketing-header .mark { width: 44px; height: 44px; }
header.marketing-header .wordmark { color: var(--paper); font-size: 1.2rem; font-weight: 700; }
header.marketing-header .secondary { background: none; border-color: rgba(255, 255, 255, .4); color: var(--paper); }
header.marketing-header .secondary:hover { background: rgba(255, 255, 255, .13); }

main.marketing { max-width: 860px; }

.hero {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 1.5rem 0 2.5rem;
}
.hero-art { width: 260px; max-width: 40%; height: auto; flex: 0 0 auto; }
.hero-copy { flex: 1 1 22rem; min-width: 0; }
.hero-copy h1 { font-size: 2rem; margin-top: 0; }

.marketing-section { padding: 2rem 0; border-top: 1px solid var(--rule); }
.marketing-section h2 { margin-top: 0; }
.marketing-section.screenshot { text-align: center; }
.screenshot-caption { color: var(--ink-soft); font-size: .85rem; margin: -.6rem 0 0; }
.marketing-facts { padding-left: 1.2rem; color: var(--ink-soft); }
.marketing-facts li { margin-bottom: .6rem; }

.marketing-quote {
  position: relative;
  margin: 1.5rem 0;
  padding: 1.2rem 1.5rem 1.1rem 3.2rem;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--marker);
  background: var(--paper-warm);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow);
}
.marketing-quote::before {
  content: "\201C";
  position: absolute;
  left: .6rem;
  top: -.15rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--marker);
  opacity: .8;
}
.marketing-quote p {
  margin: 0 0 .5rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
  font-style: italic;
  color: var(--ink);
}
.marketing-quote cite {
  display: block;
  font-size: .78rem;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--wood);
}

.waitlist .key-form { justify-content: flex-start; max-width: 30rem; }
.waitlist .key-form input { flex: 1 1 18rem; text-transform: none; letter-spacing: normal; font-family: inherit; }

.marketing-footer { text-align: center; }
.marketing-fine-print { font-size: .85rem; }
.marketing-fine-print a { margin: 0 .5rem; }

@media (max-width: 720px) {
  .hero { flex-direction: column; text-align: center; }
  .hero-art { max-width: 60%; }
}

/* Coverage ---------------------------------------------------------------- */

/* The week as a timeline: a strip per day, midnight to midnight, a bar per
   shift with the name in it. Yellow and red bands behind the bars mean one
   person on and nobody on. They are a different yellow from the changed-cell
   one: this page never shows that mark, and the two should not be confused. */
.coverage-summary { margin-bottom: .7rem; }
.coverage-summary p { margin: 0 0 .35rem; font-size: .9rem; }
.coverage-summary p.covered { color: var(--olive); font-weight: 600; }
.coverage-summary p.gaps strong { color: var(--marker); }

.timeline {
  background: #FFFDF8;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.tl-row { display: flex; border-top: 1px solid var(--rule); }
.tl-row:first-child { border-top: none; }
.tl-day {
  flex: 0 0 4.2rem;
  padding: .3rem .5rem;
  background: var(--paper-warm);
  border-right: 1px solid var(--rule);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.tl-row.today .tl-day { color: var(--marker); }
/* Heights and bar positions are set inline in em of this font size
   (`CoverageView.lane`), so the print sheet can reuse them at its own size. */
.tl-track {
  position: relative;
  flex: 1;
  font-size: 12px;
  /* An hour line every hour, a darker one every three. */
  background-image:
    repeating-linear-gradient(to right, var(--rule-hard) 0 1px, transparent 1px 12.5%),
    repeating-linear-gradient(to right, #EFE5D3 0 1px, transparent 1px 4.1667%);
}
.tl-axis .tl-day { background: var(--paper-warm); }
.tl-axis .tl-track { height: 2em; background-image: none; background: var(--paper-warm); }
.tl-tick {
  position: absolute;
  top: .3rem;
  padding-left: .25rem;
  border-left: 1px solid var(--rule-hard);
  font-size: .72rem;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1;
}
.tl-band { position: absolute; top: 0; bottom: 0; }
.tl-band.thin, .swatch.cover-thin { background: #FFE98A; }
.tl-band.gap, .swatch.cover-gap { background: #F6B7AC; }
.tl-bar {
  position: absolute;
  height: 1.6em;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: 0 .4rem;
  overflow: hidden;
  white-space: nowrap;
  background: var(--olive);
  color: #FDF6EA;
  border: 1px solid #56633A;
  border-radius: 4px;
  line-height: 1;
}
/* A manager's start-time marker, drawn at its assumed length: same shape,
   striped, so it reads as cover but not as a shift anyone entered. */
.tl-bar.assumed, .swatch.cover-assumed {
  background: repeating-linear-gradient(135deg, #8A9866 0 6px, #7A8858 6px 12px);
  border-style: dashed;
}
p.legend .swatch.cover-assumed { margin-left: .8rem; }
.tl-bar.continued { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0; }
.tl-bar.continues { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-width: 0; }
.tl-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.tl-times { opacity: .8; font-size: .92em; }
p.legend .swatch.cover-gap { margin-left: .8rem; }

@media (max-width: 720px) {
  .timeline { overflow-x: auto; }
  .tl-row { min-width: 44rem; }
}