/* Tables on the plan: the dining room of a small made-up restaurant, Lume, drawn like an architect's plan on warm
   paper. Thin lines, the numbers in Instrument Sans (a variable sans, weight 400 to 700 and width 75 to 100), one
   electric blue for the table in hand. The script draws the plan inside the SVG. */
:root {
  --paper: #f3f0e8;               /* the page and the inside of the furniture */
  --ink: #141414;                 /* the lines and the numbers */
  --grey: #a39d92;                /* the walls' details, the small texts and the booked tables */
  --accent: #2446ff;              /* the table under the pointer */
  --tint: rgba(36, 70, 255, 0.07); /* the inside of the chosen table */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow: hidden;
}

body {
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Instrument Sans Variable', 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  --pad: clamp(16px, 6vw, 96px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100svh;
  padding: clamp(18px, 3.4vw, 40px) var(--pad) clamp(18px, 3vw, 36px);
  user-select: none;
  -webkit-user-select: none;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 14px;
}

.top__name {
  font-weight: 640;
}

.top__note {
  color: var(--grey);
  font-weight: 420;
  text-align: right;
}

/* ---------------------------------------------------------------- the plan */
.room {
  position: relative;
  min-height: 0;
  margin: clamp(10px, 3vh, 28px) 0;
  touch-action: none;
}

.plan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wall {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: square;
}

.fine {
  fill: none;
  stroke: var(--grey);
  stroke-width: 1;
}

.furn {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.chair {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.hatch {
  stroke: var(--grey);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.num {
  fill: var(--ink);
  font-size: 15px;
  text-anchor: middle;
  dominant-baseline: central;
  font-variation-settings: 'wght' 460, 'wdth' 100;
}

.label {
  fill: var(--grey);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-anchor: middle;
  dominant-baseline: central;
}

.table {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.table.is-booked .chair,
.table.is-booked .furn {
  stroke: var(--grey);
}

.table.is-booked .num {
  fill: var(--grey);
}

.room:focus-visible {
  outline: none;
}

.room:focus-visible .table.is-on .furn {
  stroke-dasharray: 3 3;
}

/* ---------------------------------------------------------------- the reading */
.read {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(20, 20, 20, 0.12);
  font-size: 15px;
}

.read__win {
  display: inline-block;
  overflow: hidden;
  min-width: 0;
  height: 1.35em;
  line-height: 1.35em;
}

.read__what,
.read__when {
  display: inline-block;
  white-space: nowrap;
}

.read__when {
  color: var(--grey);
}

@media (max-width: 640px) {
  .top {
    font-size: 13px;
  }

  .read {
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
  }
}