/* Booking: the job sheet.
 *
 * The page is a shop counter in daylight; the booking is one sheet off a
 * duplicate pad. Everything PREPRINTED (labels, rules, section numbers) is set
 * in Archivo / Archivo Narrow in the page's spot colour. Everything FILLED IN
 * (your choices, your details, the serial) is Courier Prime ink. Picking a day
 * circles it in pen; finishing stamps the sheet.
 *
 * Pages set the material palette on .booking. Defaults below are Mullins IT:
 * putty counter, white pad, olive preprint. The plumber demo overrides to
 * concrete / manila / copper. */

.booking {
  /* counter + pad */
  --board:      #e2e0d2;
  --board-ink:  #3a3d31;
  --board-line: #c6c4b2;
  --paper:      #fcfbf5;
  --paper-2:    #f0d98b;   /* the duplicate copy peeking underneath */
  --paper-edge: #d9d5c3;
  --rule:       #cfd2b4;   /* printed rules on the sheet */
  --rule-soft:  #e3e5cf;

  /* inks */
  --ink:        #23231c;   /* what gets filled in */
  --ink-soft:   #6a685a;
  --ink-faint:  #b3b0a0;
  --pre:        #5a6a33;   /* preprinted labels, the spot colour */
  --mark:       #46551f;   /* the pen that circles and ticks */
  --mark-wash:  rgba(90, 106, 51, .1);
  --btn:        #3c4a21;
  --btn-ink:    #f6f5ea;
  --serial:     #b23a2a;   /* red serial numbers, stamps gone wrong */
  --stamp:      #46551f;

  --f-pre:  'Archivo', system-ui, sans-serif;          /* printed matter */
  --f-lbl:  'Archivo Narrow', 'Archivo', sans-serif;   /* small printed labels */
  --f-fill: 'Courier Prime', 'Courier New', monospace; /* typed fill-ins */

  color: var(--ink);
  font-family: var(--f-pre);
  font-size: 16px;
  line-height: 1.5;
}

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

.booking :is(button, a, input, textarea, select):focus-visible {
  outline: 2px dashed var(--mark);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- the pad -- */

.sh-wrap { max-width: 44rem; margin: 0 auto; padding: 2.6rem 1rem 4.5rem; }

/* No isolation here on purpose: the duplicate copy (::after, z-index -1) must
   escape into the parent stacking context to paint UNDER this sheet's paper;
   inside an isolated context a negative child sits above the background. */
.sheet {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  box-shadow: 0 12px 28px rgba(35, 35, 28, .13);
  padding: 2.1rem 2rem 1.9rem;
}
@media (max-width: 34rem) { .sheet { padding: 1.5rem 1.1rem 1.3rem; } }

/* torn off the pad */
.sheet::before {
  content: ''; position: absolute; left: -1px; right: -1px; top: -7px; height: 8px;
  background: radial-gradient(circle at 5px 8px, transparent 4.5px, var(--paper) 5px) 0 0 / 10px 8px repeat-x;
}

/* the yellow duplicate underneath */
.sheet::after {
  content: ''; position: absolute; z-index: -1;
  left: 14px; right: -10px; top: 18px; bottom: -11px;
  background: var(--paper-2);
  border: 1px solid rgba(35, 35, 28, .12);
  transform: rotate(.5deg);
}

/* ------------------------------------------------------------ title block -- */

.sh-titleblock { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }

.sh-brand {
  font-family: var(--f-lbl); font-weight: 600; font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--pre);
  margin: 0 0 .3rem;
}
.sh-sub {
  font-family: var(--f-lbl); font-weight: 500; font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 .35rem;
}
.sh-kind {
  font-family: var(--f-pre); font-weight: 700; font-size: 1.3rem;
  letter-spacing: .03em; text-transform: uppercase; line-height: 1.1; margin: 0;
}

.sh-serial {
  font-family: var(--f-fill); font-weight: 700; font-size: .88rem;
  color: var(--serial); white-space: nowrap; text-align: right; margin: 0;
}
.sh-serial .blank {
  display: inline-block; width: 4.2rem; vertical-align: baseline;
  border-bottom: 2px dotted var(--serial); opacity: .55;
}

/* the classic thick-thin ledger rule */
.sh-doublerule {
  height: 6px; margin: .85rem 0 1.15rem;
  border-top: 2.5px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

/* ---------------------------------------------------------------- sections -- */

.sh-sec { border-top: 1px solid var(--rule); }
.sh-sec:last-of-type { border-bottom: 1px solid var(--rule); }

.sh-sec-head {
  display: flex; align-items: baseline; gap: .6rem; width: 100%;
  padding: .95rem 0; margin: 0; text-align: left;
  background: none; border: 0; font: inherit; color: inherit;
}
button.sh-sec-head { cursor: pointer; }
button.sh-sec-head:hover .sh-sec-title { color: var(--mark); }

.sh-sec-n {
  font-family: var(--f-fill); font-weight: 700; font-size: .82rem; color: var(--pre);
  flex: none; width: 1.2rem;   /* section titles line up whatever the number */
}
.sh-sec-title {
  font-family: var(--f-lbl); font-weight: 600; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.sh-leader { flex: 1; border-bottom: 2px dotted var(--rule); transform: translateY(-3px); }
.sh-sec-fill {
  font-family: var(--f-fill); font-size: .88rem; color: var(--ink);
  text-align: right; max-width: 55%;
}
.sh-sec-fill.is-blank { color: var(--ink-faint); }
.sh-sec-edit {
  font-family: var(--f-lbl); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pre); white-space: nowrap;
}

.sh-sec-body { padding: .2rem 0 1.3rem; }

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

.sv-list { display: grid; }
.sv-row {
  display: flex; align-items: baseline; gap: .8rem; width: 100%;
  padding: .6rem .2rem; text-align: left; cursor: pointer;
  background: none; border: 0;
  font: inherit; color: var(--ink);
}
.sv-row:hover { background: var(--mark-wash); }

.sv-box {
  flex: none; width: 15px; height: 15px; position: relative; top: 2px;
  border: 1.5px solid var(--pre); background: var(--paper);
}
.sv-box svg { position: absolute; inset: -4px; width: 21px; height: 21px; overflow: visible; }
.sv-box path {
  fill: none; stroke: var(--mark); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 0;
}
.sv-row[aria-pressed="true"] .sv-box path { animation: sh-draw .28s ease-out backwards; }
.sv-row[aria-pressed="true"] .sv-box path:last-child { animation-delay: .12s; }

.sv-main { flex: 1; min-width: 0; }
.sv-name { font-weight: 600; font-size: .97rem; }
.sv-blurb { display: block; font-size: .84rem; color: var(--ink-soft); margin-top: .1rem; }
.sv-time {
  font-family: var(--f-fill); font-size: .78rem; color: var(--ink-soft); white-space: nowrap;
}
.sv-row[data-urgent="1"] .sv-name::after {
  content: ' (jumps the line)'; font-weight: 400; font-size: .8rem; color: var(--serial);
}

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

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

.cal-head { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; margin: .3rem 0 .6rem; }
.cal-month {
  font-family: var(--f-pre); font-weight: 700; font-size: 1rem;
  letter-spacing: .06em; text-transform: uppercase; margin: 0;
}
.cal-nav { display: flex; gap: .3rem; }
.cal-nav button {
  width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
  font: inherit; line-height: 1; cursor: pointer;
  background: none; color: var(--ink-soft); border: 1px solid var(--rule); border-radius: 0;
}
.cal-nav button:hover:not(:disabled) { color: var(--mark); border-color: var(--mark); }
.cal-nav button:disabled { opacity: .3; cursor: not-allowed; }

.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dow span {
  font-family: var(--f-lbl); font-weight: 600; font-size: .6rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--pre);
  text-align: center; padding: .3rem 0 .35rem;
}

.cal-grid { border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.cal-day {
  position: relative; min-height: 3rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem;
  font: inherit; cursor: pointer; background: none; color: var(--ink);
  border: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.cal-day-n { font-family: var(--f-fill); font-size: .95rem; }
.cal-day-c { font-family: var(--f-fill); font-size: .58rem; color: var(--pre); }

.cal-day[data-empty="1"] { cursor: default; pointer-events: none; }
.cal-day:disabled { cursor: not-allowed; }
.cal-day:disabled .cal-day-n { color: var(--ink-faint); }
.cal-day:not(:disabled):not([data-empty="1"]):hover { background: var(--mark-wash); }
.cal-day[data-today="1"] .cal-day-n { border-bottom: 1.5px solid var(--ink-soft); }
.cal-day[aria-pressed="true"] .cal-day-n { font-weight: 700; }

/* the pen circle around the chosen day */
.cal-ring { position: absolute; inset: 1px 4px; pointer-events: none; }
.cal-ring path {
  fill: none; stroke: var(--mark); stroke-width: 2.1; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 0;
}
.cal-day[aria-pressed="true"] .cal-ring path { animation: sh-draw .4s ease-out backwards; }

.cal-foot { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; align-items: baseline; margin-top: .7rem; }
.sh-link {
  font: inherit; font-size: .82rem; cursor: pointer; padding: 0;
  background: none; border: 0; color: var(--pre);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.sh-link:hover { color: var(--mark); }

/* ------------------------------------------------------------------ times -- */

.tm-block { margin-top: 1.2rem; }
.tm-label {
  font-family: var(--f-lbl); font-weight: 500; font-size: .66rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--pre); margin: 0 0 .5rem;
}
.tm-group { margin-bottom: .9rem; }
.tm-group h4 {
  font-family: var(--f-lbl); font-weight: 500; font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .4rem;
}
.tm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: .35rem; }
.tm-chip {
  font-family: var(--f-fill); font-size: .84rem; cursor: pointer;
  background: none; color: var(--ink);
  border: 1px solid var(--rule); padding: .5rem .2rem; text-align: center;
}
.tm-chip:hover { border-color: var(--mark); color: var(--mark); }
.tm-chip[aria-pressed="true"] {
  border: 2px solid var(--mark); background: var(--mark-wash); font-weight: 700; padding: calc(.5rem - 1px) .2rem;
}

.tm-empty { font-size: .88rem; color: var(--ink-soft); padding: .6rem 0; }
.tm-tz { font-size: .78rem; color: var(--ink-soft); margin-top: .9rem; }
.tm-tz select {
  font: inherit; font-size: .78rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); padding: .2rem .3rem;
}

.sh-skel { height: 2.2rem; background: var(--rule-soft); animation: sh-pulse 1.3s ease-in-out infinite; }
@keyframes sh-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ----------------------------------------------------------------- fields -- */

.fd-pair { display: grid; gap: 0 1.4rem; }
@media (min-width: 34rem) { .fd-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.fd { margin-bottom: 1rem; }
.fd label {
  display: block; font-family: var(--f-lbl); font-weight: 500;
  font-size: .64rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--pre); margin-bottom: .15rem;
}
.booking .fd :is(input, textarea) {
  width: 100%; font-family: var(--f-fill); font-size: .95rem; color: var(--ink);
  background: none; border: 0; border-bottom: 1.5px solid var(--rule);
  border-radius: 0; padding: .35rem 0 .3rem;
}
.booking .fd :is(input, textarea):focus {
  outline: none; border-bottom-color: var(--mark); box-shadow: 0 1.5px 0 var(--mark);
}
.booking .fd textarea { min-height: 4.6rem; resize: vertical; line-height: 1.45; }
.fd-hint { font-size: .76rem; color: var(--ink-soft); margin: .3rem 0 0; }
.sh-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- buttons -- */

.sh-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.1rem; }

.sh-btn {
  font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer;
  background: var(--btn); color: var(--btn-ink);
  border: 1px solid var(--btn); border-radius: 0;
  padding: .72rem 1.35rem;
}
.sh-btn:hover:not(:disabled) { filter: brightness(1.15); }
.sh-btn:active:not(:disabled) { transform: translateY(1px); }
.sh-btn:disabled { opacity: .5; cursor: not-allowed; }

.sh-btn-quiet { background: none; color: var(--ink-soft); border: 1px solid var(--rule); }
.sh-btn-quiet:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-soft); filter: none; }

.sh-btn-stop { background: none; color: var(--serial); border: 1px solid var(--serial); }
.sh-btn-stop:hover:not(:disabled) { background: rgba(178, 58, 42, .08); filter: none; }

.sh-alert {
  font-family: var(--f-fill); font-size: .85rem; color: var(--serial);
  border-left: 3px solid var(--serial); padding: .4rem 0 .4rem .8rem; margin: .2rem 0 1rem;
}

/* ------------------------------------------------------------------- done -- */

.sh-done { padding: 1.2rem 0 .4rem; }
.sh-stamp {
  display: inline-block; font-family: var(--f-pre); font-weight: 700;
  font-size: 1.05rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--stamp); border: 3px solid var(--stamp); padding: .4rem .9rem .4rem 1.15rem;
  transform: rotate(-5deg); opacity: .85; margin-bottom: 1.1rem;
  animation: sh-stamp .3s cubic-bezier(.2, 1.5, .5, 1) both;
}
.sh-stamp[data-kind="cancelled"] { color: var(--serial); border-color: var(--serial); }
@keyframes sh-stamp {
  from { transform: rotate(-14deg) scale(1.6); opacity: 0; }
  to   { transform: rotate(-5deg) scale(1); opacity: .85; }
}

.sh-done-when { font-family: var(--f-fill); font-size: 1rem; color: var(--ink); margin: 0 0 1.1rem; }

.sh-keep {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: .7rem 0; margin-bottom: .9rem;
  display: flex; flex-wrap: wrap; gap: .3rem 1.3rem; align-items: baseline;
}
.sh-keep-label {
  font-family: var(--f-lbl); font-weight: 600; font-size: .64rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--pre);
}
.sh-keep a {
  font-size: .86rem; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pre);
}
.sh-keep a:hover { color: var(--mark); }

.sh-note { font-size: .82rem; color: var(--ink-soft); margin: .4rem 0 0; }
.sh-note a { color: var(--pre); }

@media (prefers-reduced-motion: reduce) {
  .booking *, .booking *::before, .booking *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}