/* Grid mechanics Bootstrap can't express, plus the few Pawpaw Analytics brand
   helpers the pages share. Component theming (buttons, cards, inputs, colors,
   Comfortaa/Solway type) comes from theme_ppa_orgs.css; this file only adds what
   the BS theme doesn't cover. The grid scrolls horizontally for multi-week
   spans, with a sticky time-axis and sticky header so labels stay put. */

/* Brand header — logo lock-up shared by the builder, respond, and results pages.
   Eyebrow is the all-caps Comfortaa label the design system reserves for tiny
   labels (letter-spacing 0.04em); the mark is the cyan-fill logo on white. */
.brand-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.brand-head .brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.eyebrow {
  font-family: "Comfortaa", cursive;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bs-secondary);
  margin-bottom: 0.1rem;
}

.grid-scroll {
  overflow-x: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  max-height: 70vh;
}

.grid-table {
  border-collapse: collapse;
  user-select: none; /* no text selection while drag-painting */
  font-size: 0.8rem;
}

.grid-table th {
  position: sticky;
  background: var(--bs-light);
  font-weight: 500;
  text-align: center;
  z-index: 1;
}

.grid-table thead th {
  top: 0;
  padding: 0.35rem 0.5rem;
  white-space: nowrap;
}

.grid-table th.time {
  left: 0;
  padding: 0 0.5rem;
  text-align: right;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

.grid-table th.corner {
  left: 0;
  top: 0;
  z-index: 2;
}

.grid-table td {
  width: 2.4rem;
  height: 1.4rem;
  border: 1px solid var(--bs-border-color);
}

/* Candidate cells carry a live density shade (green, opacity ∝ others free) as an
   inline background-color; selection (.on) clears it and paints solid blue. */
.grid-table td.cell {
  cursor: pointer;
  background: var(--bs-body-bg);
}

.grid-table td.cell:hover {
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
}

/* Touch "Drag to select" (paint) mode: claim the gesture so a finger drag over
   cells paints instead of scrolling. Off by default, a finger scrolls normally
   (set per-cell, so headers/gutters stay scrollable as an escape hatch). */
.grid-table.paint-on td.cell {
  touch-action: none;
}

.grid-table td.cell.on {
  background: var(--bs-primary);
}

/* Cells outside the proposed set: inert gaps (sparse grid). */
.grid-table td.gap {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    var(--bs-light) 4px,
    var(--bs-light) 8px
  );
}

/* Results mode: heat cells carry the availability count; their green opacity is
   set inline (count / peak), so no per-level classes. */
.grid-table td.heat {
  text-align: center;
  vertical-align: middle;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  background: var(--bs-body-bg);
  cursor: cell; /* afford drag-selecting a section */
}

/* The drag-selection outline is drawn per-cell as an inline box-shadow on just
   the block's outer edges (see paintSelection in grid.js), so no static rule is
   needed here. */

/* Results hover tooltip: names of who is free in a cell. Floats at the cursor
   (fixed position set inline in grid.js) above everything, including the grid's
   own scroll container. */
.grid-tip {
  position: fixed;
  z-index: 1080;
  max-width: 18rem;
  padding: 0.35rem 0.55rem;
  font-size: 0.78rem;
  line-height: 1.3;
  color: #fff;
  background: rgba(27, 47, 51, 0.96); /* --ppa-space-cadet, the design system's tooltip surface */
  border-radius: var(--bs-border-radius);
  pointer-events: none; /* never let the tip eat the hover it describes */
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
}

/* Share footer: keep the rendered QR tidy regardless of the library's output. */
.share-qr {
  line-height: 0;
}

.share-qr img,
.share-qr canvas {
  display: block;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

/* Marginal bars: per-day along the top, per-time along the side. Bars are sized
   inline against a fixed pixel/percent track (see TRACK_PX in grid.js). */
.grid-table td.marg {
  padding: 2px;
  background: var(--bs-body-bg);
}

.grid-table tr.marg-col-row td.marg {
  height: 44px;
  vertical-align: bottom;
}

.grid-table .marg-col-bar {
  width: 0.8rem;
  margin: 0 auto;
  background: var(--bs-primary); /* Pacific Cyan — focal series, per the design system's data-viz rule */
  border-radius: 2px 2px 0 0;
}

.grid-table td.marg-row {
  width: 3.4rem;
  text-align: left;
  vertical-align: middle;
}

.grid-table .marg-row-bar {
  height: 0.8rem;
  min-width: 1px;
  background: var(--bs-primary); /* Pacific Cyan — matches the column marginals */
  border-radius: 0 2px 2px 0;
}