/* Lisbon, in October — a printed itinerary.

   One idea, all the way down: this page is a timetable, not a scrapbook. A
   strip of day stubs across the top, a time-ruled schedule under it, three
   ruled ledgers under that. Everything is cool, tabular and precise; the only
   ornament on the page is a band of azulejo drawn in gradients.

   Naming is itinerary-shaped and this app's own: block__element--modifier.
   .strip__day, .sched__slot, .ledger__row. Nothing here is shared with
   anywhere else, and nothing is loaded from anywhere else. */

:root {
  color-scheme: light;

  --ground: #f4f7f9;
  --paper: #fff;
  --azul: #1f4e79;
  --azul-lite: #3c7fb1;
  --ink: #16232c;
  --ink-2: #5e717c;
  --rule: #d3dde4;
  --terra: #c0603e;
  --terra-ink: #a64e30;

  --sans: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Consolas, 'Andale Mono',
    'DejaVu Sans Mono', monospace;

  /* A deliberate scale. Nothing is sized by hand outside this list. */
  --t-micro: 0.625rem;
  --t-small: 0.75rem;
  --t-body: 0.875rem;
  --t-lead: 1rem;
  --t-head: 1.375rem;
  --t-title: clamp(1.5rem, 5vw, 2rem);
  --t-numeral: 1.5rem;

  --sheet: 46rem;
  --hour: 4.5rem;
  --skip: 2.375rem;
  --axis: 3rem;
  --tile: 21px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
  margin: 0;
}

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

a {
  color: var(--azul);
}

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}

.caps {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ---- the masthead, and its one ornament ---------------------------- */

.mast {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.mast__inner {
  width: min(100% - 2rem, var(--sheet));
  margin-inline: auto;
  padding: 1.75rem 0 1.25rem;
}

.mast__name {
  font-size: var(--t-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* Azulejo: interlocking circles with a dot at each tile's heart, drawn in
   gradients so it costs no bytes and no request. */
.mast__tiles {
  height: calc(var(--tile) * 2);
  margin: 0.875rem 0 0.875rem;
  border-block: 1px solid var(--rule);
  background-color: var(--paper);
  background-image:
    radial-gradient(
      circle at 0 0,
      transparent 8.4px,
      var(--azul-lite) 8.4px 9.7px,
      transparent 9.8px
    ),
    radial-gradient(
      circle at 100% 0,
      transparent 8.4px,
      var(--azul-lite) 8.4px 9.7px,
      transparent 9.8px
    ),
    radial-gradient(
      circle at 0 100%,
      transparent 8.4px,
      var(--azul-lite) 8.4px 9.7px,
      transparent 9.8px
    ),
    radial-gradient(
      circle at 100% 100%,
      transparent 8.4px,
      var(--azul-lite) 8.4px 9.7px,
      transparent 9.8px
    ),
    radial-gradient(circle at 50% 50%, var(--azul) 0 2px, transparent 2.1px);
  background-size: var(--tile) var(--tile);
}

.mast__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  color: var(--ink-2);
  font-size: var(--t-small);
}

.mast__dates {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.mast__dot {
  color: var(--rule);
}

/* ---- the day strip: a row of stubs off a printed ticket ------------ */

.strip {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  scrollbar-width: thin;
}

.strip__rail {
  display: flex;
  gap: 0.375rem;
  width: min(100%, calc(var(--sheet) + 2rem));
  min-width: max-content;
  margin-inline: auto;
  padding: 0.75rem 1rem 0.875rem;
}

.strip__day {
  flex: 0 0 auto;
  display: grid;
  gap: 0.125rem;
  justify-items: center;
  min-width: 3.25rem;
  padding: 0.4rem 0.55rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink-2);
  text-decoration: none;
}

.strip__day:hover {
  border-color: var(--azul-lite);
  color: var(--azul);
}

.strip__dow {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.strip__date {
  font-family: var(--mono);
  font-size: var(--t-numeral);
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.strip__day--on {
  border-color: var(--azul);
  background: var(--azul);
  color: #fff;
}

.strip__day--on .strip__date,
.strip__day--on:hover {
  color: #fff;
}

.strip__day--on:hover {
  border-color: var(--azul);
}

/* ---- the sheet ------------------------------------------------------ */

.sheet {
  width: min(100% - 2rem, var(--sheet));
  margin-inline: auto;
  padding: 1.75rem 0 2.5rem;
  display: grid;
  gap: 2.25rem;
}

.stand {
  display: grid;
  gap: 0.4rem;
}

.stand__when {
  color: var(--ink-2);
}

.stand__what {
  font-size: var(--t-head);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-wrap: balance;
}

.stand__body {
  max-width: 34rem;
  color: var(--ink-2);
  font-size: var(--t-lead);
  line-height: 1.55;
  text-wrap: pretty;
}

.stand__body + .stand__body {
  margin-top: 0.5rem;
}

/* ---- the time-ruled schedule ---------------------------------------- */

.sched {
  display: grid;
  grid-template-columns: var(--axis) 1fr;
  grid-auto-rows: minmax(var(--hour), auto);
  border: 1px solid var(--rule);
  border-top: 0;
  background: var(--paper);
}

.sched__hour {
  border-top: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  padding: 0.3rem 0.5rem 0 0;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.sched__lane {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  border-top: 1px solid var(--rule);
  padding: 0.3rem 0.75rem 0.55rem;
}

/* A long empty stretch, folded to one band: the hours it swallowed are still
   named, so the gap stays legible without swallowing the page. */
.sched__hour--skip {
  border-right-style: dotted;
}

.sched__gap {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--rule);
  padding: 0 0.75rem;
  background: var(--ground);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.sched__slot {
  padding: 0.05rem 0.35rem 0.1rem 0.6rem;
  border-left: 3px solid var(--azul);
}

.sched__slot--open {
  border-left: 2px dashed var(--terra);
  padding-left: calc(0.6rem + 1px);
}

.sched__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.55rem;
}

.sched__at {
  font-family: var(--mono);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  color: var(--azul);
  letter-spacing: 0.02em;
}

.sched__slot--open .sched__at {
  color: var(--ink-2);
}

.sched__what {
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1.3;
}

/* A rubber stamp lands slightly askew, and a little proud of the corner. */
.sched__stamp {
  margin: -0.3rem -0.15rem 0 auto;
  transform: rotate(-3.5deg);
  padding: 0.1rem 0.35rem;
  border: 2px solid var(--azul);
  border-radius: 2px;
  color: var(--azul);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sched__note {
  margin-top: 0.15rem;
  max-width: 32rem;
  color: var(--ink-2);
  font-size: var(--t-small);
  text-wrap: pretty;
}

.sched__link {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: var(--t-small);
  color: var(--azul-lite);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.sched__link:hover {
  color: var(--azul);
}

/* ---- ledgers -------------------------------------------------------- */

.ledger {
  display: grid;
  gap: 0.75rem;
}

.ledger__name {
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--ink);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ledger__empty {
  color: var(--ink-2);
  font-size: var(--t-small);
}

/* who is coming: a small gantt over the trip's own days */

.gantt {
  --gname: 7.5rem;
  display: grid;
  align-items: center;
  gap: 0.35rem 0;
}

.gantt__corner {
  grid-column: 1;
}

.gantt__axis {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  text-align: center;
  padding-bottom: 0.2rem;
}

.gantt__who {
  grid-column: 1;
  padding-right: 0.75rem;
}

.gantt__name {
  font-weight: 700;
  line-height: 1.2;
}

.gantt__flight {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ink-2);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.gantt__track {
  grid-column: 2 / -1;
  display: grid;
  align-items: center;
  min-height: 1.5rem;
  background-image: linear-gradient(90deg, var(--rule) 0 1px, transparent 1px);
  background-size: calc(100% / var(--cols)) 100%;
  border-right: 1px solid var(--rule);
}

.gantt__bar {
  height: 0.75rem;
  border-radius: 1px;
  background: var(--azul);
}

.gantt__bar--late {
  background: var(--azul-lite);
}

/* what to pack: columns of drawn ticks */

.pack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 1.25rem 1.5rem;
}

.pack__who {
  margin-bottom: 0.4rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.pack__list {
  display: grid;
  gap: 0.1rem;
}

.pack__item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  padding: 0.3rem 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
}

button.pack__item {
  cursor: pointer;
  min-height: 2.25rem;
}

.pack__box {
  flex: 0 0 auto;
  position: relative;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.15rem;
  border: 1.5px solid var(--ink-2);
  border-radius: 1px;
}

.pack__item--on .pack__box {
  border-color: var(--azul);
  background: var(--azul);
}

/* the tick, drawn */
.pack__item--on .pack__box::after {
  content: '';
  position: absolute;
  left: 3.5px;
  top: 0.5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
}

.pack__item--on .pack__what {
  color: var(--ink-2);
}

.pack__what {
  font-size: var(--t-small);
  line-height: 1.4;
}

button.pack__item:hover .pack__box {
  border-color: var(--azul);
}

/* what it cost: a right-aligned currency ledger */

.money {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.15rem 1rem;
}

.money__what {
  padding: 0.35rem 0;
  font-size: var(--t-small);
  line-height: 1.4;
}

.money__who {
  margin-left: 0.5rem;
  color: var(--ink-2);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.money__sum {
  padding: 0.35rem 0;
  font-family: var(--mono);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.money__due,
.money__due .money__who {
  color: var(--terra-ink);
}

.money__rule {
  grid-column: 1 / -1;
  height: 0;
  margin: 0.35rem 0 0.1rem;
  border-top: 1px solid var(--ink);
}

.money__sumline .money__what {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.money__sumline .money__sum {
  font-size: var(--t-body);
  font-weight: 700;
}

/* ---- the member's form, and the reader's line ----------------------- */

.add {
  display: grid;
  gap: 0.5rem;
  padding: 0.875rem 1rem 1rem;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.add__name {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.add__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.add__field {
  flex: 1 1 9rem;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.add__field--time {
  flex: 0 0 7rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.add__tick {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

.add__go {
  padding: 0.5rem 1.1rem;
  border: 0;
  border-radius: 2px;
  background: var(--azul);
  color: #fff;
  font: inherit;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 2.5rem;
}

.add__go:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Said for a screen reader only: the drawn tick has no text of its own. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.say {
  padding: 0.75rem 0.9rem;
  border-left: 2px solid var(--rule);
  color: var(--ink-2);
  font-size: var(--t-small);
  text-wrap: pretty;
}

.say--bad {
  border-left-color: var(--terra);
  color: var(--terra-ink);
}

/* ---- the foot ------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--rule);
  background: var(--paper);
}

.foot__inner {
  width: min(100% - 2rem, var(--sheet));
  margin-inline: auto;
  padding: 1.5rem 0 2.5rem;
  display: grid;
  gap: 0.5rem;
  color: var(--ink-2);
  font-size: var(--t-small);
  text-wrap: pretty;
}

.foot__say {
  justify-self: start;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--azul-lite);
  border-radius: 2px;
  background: var(--paper);
  color: var(--azul);
  font-family: var(--mono);
  font-size: var(--t-small);
  text-align: left;
  cursor: pointer;
  min-height: 2.5rem;
}

.foot__say:hover {
  border-style: solid;
}

/* ---- small screens --------------------------------------------------- */

@media (max-width: 30rem) {
  :root {
    --axis: 2.5rem;
    --hour: 4rem;
  }

  .gantt {
    --gname: 5.25rem;
  }

  .gantt__who {
    padding-right: 0.5rem;
  }

  .money__who {
    display: block;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}