/* ==========================================================================
   The table grid. Geometry and colours are carried over unchanged from the
   original index.html so the interactive and poster versions stay identical.

   Two additions over the original:
   - cells are <a> elements, so each tile links to its grape page
   - the tooltip also opens on :focus-visible, so keyboard and touch users can
     reach it; the original was :hover only, which does nothing on a phone
   ========================================================================== */

.table-shell { overflow-x: auto; padding-block: 8px 20px; -webkit-overflow-scrolling: touch; }

.ptw-table {
  display: grid;
  grid-template-columns: repeat(18, var(--cell-w));
  grid-auto-rows: var(--cell-h);
  gap: var(--gap);
  min-width: calc(18 * var(--cell-w) + 17 * var(--gap));
  margin: 0 auto;
  padding-inline: var(--pad);
  width: max-content;
}

/* --- group headers ------------------------------------------------------- */
.group-header {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  border-radius: 3px; padding: 5px 8px; text-align: center;
  border-bottom: 2px solid;
}
.group-header .gh-label {
  font-family: var(--serif); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: #fff; line-height: 1.1;
}
.group-header .gh-note {
  font-size: 0.42rem; color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.1em; text-transform: uppercase; margin-top: 3px;
}
.group-header.narrow .gh-label { font-size: 0.52rem; letter-spacing: 0.08em; }
.group-header.narrow .gh-note { font-size: 0.36rem; }

.group-header.spark { background: linear-gradient(135deg, #0D2D45 0%, #09202F 100%); border-bottom-color: #4A7FA5; }
.group-header.red   { background: linear-gradient(135deg, #3D0E0E 0%, #280808 100%); border-bottom-color: #8B1A1A; }
.group-header.rose  { background: linear-gradient(135deg, #4A1428 0%, #2E0A18 100%); border-bottom-color: #C4607A; }
.group-header.white { background: linear-gradient(135deg, #3A2C0A 0%, #251C05 100%); border-bottom-color: #C8A84B; }
.group-header.sweet { background: linear-gradient(135deg, #402A00 0%, #291800 100%); border-bottom-color: #C07020; }
.group-header.fort  { background: linear-gradient(135deg, #20103A 0%, #130822 100%); border-bottom-color: #7A5CAC; }

/* --- column sub-labels --------------------------------------------------- */
.sublabel {
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 0.42rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim); line-height: 1.3; padding: 2px;
}

/* --- cells --------------------------------------------------------------- */
.cell {
  position: relative; width: var(--cell-w); height: var(--cell-h);
  border-radius: 3px; padding: 4px 3px;
  cursor: pointer; text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex; flex-direction: column; justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.06); overflow: visible;
}
.cell::before {
  content: ''; position: absolute; inset: 0; border-radius: 3px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, transparent 60%);
  pointer-events: none;
}
.cell:hover, .cell:focus-visible {
  transform: scale(1.18) translateY(-5px);
  z-index: 100;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.15);
  outline: none;
}
.cell:focus-visible { box-shadow: 0 14px 36px rgba(0, 0, 0, 0.75), 0 0 0 2px var(--gold); }
.cell:hover .tooltip, .cell:focus-visible .tooltip {
  opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}

.cell .num      { font-size: 0.44rem; color: rgba(255, 255, 255, 0.4); line-height: 1; align-self: flex-end; }
.cell .symbol   { font-family: var(--serif); font-size: 1rem; font-weight: 700; line-height: 1; text-align: center; color: #fff; letter-spacing: -0.02em; }
.cell .name     { font-size: 0.36rem; text-align: center; color: rgba(255, 255, 255, 0.68); letter-spacing: 0.02em; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cell .style-tag{ font-size: 0.33rem; text-align: center; color: rgba(255, 255, 255, 0.35); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1; }

.cell.red    { background: linear-gradient(160deg, #6B1515 0%, #3A0808 100%); }
.cell.white  { background: linear-gradient(160deg, #7A6020 0%, #3A2C0A 100%); }
.cell.rose   { background: linear-gradient(160deg, #8C3050 0%, #4A1028 100%); }
.cell.spark  { background: linear-gradient(160deg, #1A4A68 0%, #0A2035 100%); }
.cell.fort   { background: linear-gradient(160deg, #3A2060 0%, #1A0C35 100%); }
.cell.sweet  { background: linear-gradient(160deg, #7A4A10 0%, #3A2005 100%); }
.cell.orange { background: linear-gradient(160deg, #9A5A18 0%, #4A2408 100%); }
.cell.rare   { background: linear-gradient(160deg, #1E4A38 0%, #0C2018 100%); }

/* --- rare-earth block ---------------------------------------------------- */
.rare-label {
  display: flex; flex-direction: column; justify-content: center;
  padding: 4px 6px; text-align: right;
  border-right: 2px solid rgba(200, 168, 75, 0.25);
}
.rare-label .rl-title {
  font-family: var(--serif); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
}
.rare-label .rl-note {
  font-size: 0.4rem; color: var(--text-dim);
  letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px;
}
.rare-divider {
  grid-column: 1 / 19; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 168, 75, 0.3), transparent);
  margin: 14px 0 6px;
}

/* --- tooltip ------------------------------------------------------------- */
.tooltip {
  position: absolute; bottom: calc(100% + 10px);
  left: 50%; transform: translateX(-50%) translateY(6px);
  background: #1A1410; border: 1px solid rgba(200, 168, 75, 0.45);
  border-radius: 6px; padding: 10px 13px; width: 210px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 500;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.85);
}
.tooltip::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%); border: 5px solid transparent;
  border-top-color: rgba(200, 168, 75, 0.45);
}
/* Tooltip children are spans (they live inside an <a>), so they need
   explicit block display to stack the way the original divs did. */
.tooltip .t-name, .tooltip .t-style, .tooltip .t-region, .tooltip .t-go { display: block; }
.tooltip .t-name   { font-family: var(--serif); font-size: 0.85rem; font-weight: 700; color: var(--gold); margin-bottom: 4px; }
.tooltip .t-style  { font-size: 0.55rem; color: rgba(200, 168, 75, 0.55); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 4px; }
.tooltip .t-region { font-size: 0.58rem; color: rgba(200, 168, 75, 0.7); margin-bottom: 5px; }
.tooltip p         { font-size: 0.6rem; color: var(--text-dim); line-height: 1.55; }
.tooltip .t-go     { display: block; margin-top: 7px; font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }

/* Cells in the top two rows would push their tooltip off-screen — flip it. */
.cell.flip .tooltip { bottom: auto; top: calc(100% + 10px); }
.cell.flip .tooltip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: rgba(200, 168, 75, 0.45); }

/* --- table page furniture ------------------------------------------------ */
.table-head { text-align: center; padding: 30px 20px 4px; }
.table-head h1 {
  font-family: var(--serif); font-size: clamp(1.8rem, 4.5vw, 3.5rem); font-weight: 900;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.1;
  /* Solid gold first. Gradient-clipped text has no fallback of its own: if
     the clip is unsupported or a browser rewrites the gradient, the fill
     stays transparent and the heading vanishes. Painting a real colour
     underneath means the worst case is a plain gold heading, not none. */
  color: #E0B840;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .table-head h1 {
    background: linear-gradient(135deg, #B8940A 0%, #F0D060 35%, #E0B840 65%, #A07020 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
}
/* High-contrast modes replace the palette wholesale; the gradient must go. */
@media (forced-colors: active) {
  .table-head h1 { background: none; -webkit-text-fill-color: currentColor; }
}
.table-head .sub {
  color: var(--text-dim); font-size: 0.75rem;
  letter-spacing: 0.25em; text-transform: uppercase; margin-top: 6px;
}
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 16px 20px; max-width: 1400px; margin: 0 auto; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.legend-swatch { width: 12px; height: 12px; border-radius: 2px; }

.scroll-hint {
  text-align: center; font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim); padding-bottom: 6px;
}
@media (min-width: 1180px) { .scroll-hint { display: none; } }

.table-foot {
  text-align: center; padding: 18px 20px;
  color: var(--text-dim); font-size: 0.58rem;
  letter-spacing: 0.15em; text-transform: uppercase;
}

/* --- food pairing search -------------------------------------------------- */
.pair { max-width: 1180px; margin: 0 auto; padding: 4px var(--pad) 18px; }

.pair-control {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
}
.pair-control label {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--text-dim);
}

/* A styled wrapper rather than a styled <select>: browsers will not restyle
   the native arrow consistently, so the arrow is drawn on the wrapper and the
   control's own is removed. */
.pair-select-wrap { position: relative; }
.pair-select-wrap::after {
  content: ''; position: absolute; right: 16px; top: 50%;
  width: 7px; height: 7px; margin-top: -5px; pointer-events: none;
  border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg);
}
.pair-select-wrap select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--serif); font-size: 1.15rem; font-weight: 700;
  color: var(--gold); background: transparent;
  border: none; border-bottom: 1px solid var(--gold-dim);
  padding: 8px 40px 8px 4px; min-width: 290px; cursor: pointer;
  text-align: left;
}
.pair-select-wrap select:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.pair-select-wrap select option { background: var(--paper); color: var(--text); font-family: var(--mono); font-size: 0.9rem; }

.pair-status {
  text-align: center; font-size: 0.72rem; color: var(--text-mid);
  min-height: 1.4em; margin-top: 14px; letter-spacing: 0.04em;
}
.pair-status b { color: var(--gold); font-weight: 700; }

.pair-key {
  display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
  margin-top: 10px; font-size: 0.58rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-dim);
}
.pair-key span { display: flex; align-items: center; gap: 7px; }
.pair-key i { width: 13px; height: 13px; border-radius: 2px; flex: none; }
.pair-key .k-good    { background: linear-gradient(160deg, #6B1515, #3A0808); box-shadow: 0 0 0 2px var(--gold); }
.pair-key .k-clash   { background: #2A1210; box-shadow: inset 0 0 0 1.5px rgba(192, 40, 30, 0.9); }
.pair-key .k-neutral { background: #2A2724; opacity: 0.5; }

/* --- tile states ----------------------------------------------------------
   Colour alone does not carry the message: the good tiles also lift and gain
   a ring, so the distinction survives a colour-blind reading. */
.ptw-table.pairing .cell {
  transition: opacity 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.ptw-table.pairing .cell.pair-neutral {
  opacity: 0.16;
  filter: grayscale(1);
}

.ptw-table.pairing .cell.pair-clash {
  opacity: 0.5;
  filter: brightness(0.45) saturate(1.2);
  box-shadow: inset 0 0 0 1.5px rgba(192, 40, 30, 0.9);
}

/* The answer to "what should I drink" is these, so they are the loudest thing
   on the page while a dish is selected. */
.ptw-table.pairing .cell.pair-good {
  opacity: 1;
  filter: none;
  transform: scale(1.06);
  z-index: 30;
  box-shadow: 0 0 0 2px var(--gold), 0 0 18px 2px rgba(200, 168, 75, 0.45),
              0 8px 20px rgba(0, 0, 0, 0.7);
}
.ptw-table.pairing .cell.pair-good:hover { z-index: 100; }

@media (prefers-reduced-motion: reduce) {
  .ptw-table.pairing .cell { transition: none; }
  .ptw-table.pairing .cell.pair-good { transform: none; }
}

/* ==========================================================================
   Phones — reflow the grid instead of scrolling it sideways

   The table is eighteen columns wide. On a 390px screen that is 1152px of
   grid: you see a third of it, the band headings sit off-screen above the
   tiles they name, and the arrangement — the entire point of a periodic
   table — cannot be read at all. Sideways scrolling does not fix that, it
   just hides it.

   So below 860px the explicit placement is dropped and the grid reflows into
   bands: each style heading full width, its own grapes wrapping underneath.
   The columns are lost, which is the honest trade — they cannot survive this
   width — but every grape is reachable with a thumb and nothing is off-screen.
   templates/table.mjs emits in band order specifically so this reads.
   ========================================================================== */
@media (max-width: 860px) {
  .table-shell { overflow-x: visible; padding-inline: 12px; }

  .ptw-table {
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    grid-auto-rows: auto;
    gap: 6px;
    min-width: 0;
    width: auto;
    padding-inline: 0;
  }

  /* Inline styles carry the desktop placement, so overriding needs !important.
     Everything then falls into DOM order, which is why that order is band-major. */
  .ptw-table > * { grid-column: auto !important; grid-row: auto !important; }

  .group-header,
  .rare-label,
  .rare-divider { grid-column: 1 / -1 !important; }

  .group-header {
    height: auto; padding: 9px 12px; margin-top: 18px;
    text-align: left; align-items: flex-start;
  }
  .group-header .gh-label { font-size: 0.92rem; letter-spacing: 0.14em; }
  .group-header.narrow .gh-label { font-size: 0.92rem; letter-spacing: 0.14em; }

  /* The band notes describe the columns — "Col 1: Traditional · Col 2: Tank
     & Pét-Nat", "← lighter · fuller body →". There are no columns here and
     the arrows point across an axis that no longer exists, so the note is
     not merely redundant, it is wrong. Every tile already carries its own
     sub-style underneath its name, which is what the note was pointing at. */
  .group-header .gh-note { display: none; }
  .group-header { justify-content: center; }

  /* Column labels describe columns. There are none here. */
  .sublabel { display: none; }

  .rare-label {
    flex-direction: row; align-items: baseline; gap: 8px;
    text-align: left; border-right: 0; padding: 0; margin-top: 18px;
  }
  .rare-label .rl-title { font-size: 0.92rem; }
  .rare-label .rl-note  { font-size: 0.74rem; margin-top: 0; }
  .rare-divider { margin: 18px 0 0; }

  /* A tile is now a tap target, so it gets tap-target height and type that
     can be read at arm's length rather than poster-detail sizes. */
  .cell {
    width: auto; height: auto; min-height: 82px;
    padding: 7px 5px; border-radius: 4px;
  }
  .cell .num       { font-size: 0.66rem; }
  .cell .symbol    { font-size: 1.5rem; margin: 3px 0; }
  .cell .name      { font-size: 0.8rem; line-height: 1.25; }
  .cell .style-tag { font-size: 0.64rem; letter-spacing: 0.03em; }

  /* Hover tooltips are meaningless on a touch screen: there is no hover, and
     a tap navigates. The tile already shows name and style. */
  .cell .tooltip { display: none; }

  .scroll-hint { display: none; }

  /* Every band now carries its own heading in its own colour, directly above
     its grapes. The legend says the same eight things again, a screenful
     before you reach the first tile. */
  .legend { display: none; }

  /* The dish picker is the whole point of the pairing page; its label should
     not be the smallest text on the screen. */
  .pair-control label { font-size: 0.82rem; }
  .pair-control select { font-size: 1rem; }

  /* Same problem as the band notes: "rows within each style column" describes
     a layout this width does not have. "In vino veritas" and the pairing link
     below it both stay. */
  .table-foot:not(.veritas):not(.pair-cta) { display: none; }
}

/* Very narrow phones: two columns rather than cramming three. */
@media (max-width: 400px) {
  .ptw-table { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* The table's own way into the pairing page. Sits under "In vino veritas",
   deliberately louder than the two notes above it: those explain the table,
   this one is the thing to do next. */
.table-foot.pair-cta { margin-top: 18px; }
.table-foot.pair-cta a {
  display: inline-block;
  font-family: var(--serif); font-size: 1.05rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: none;
  color: var(--gold); text-decoration: none;
  padding: 12px 26px;
  border: 1px solid var(--gold-dim); border-radius: 3px;
  background: rgba(200, 168, 75, 0.06);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.table-foot.pair-cta a:hover,
.table-foot.pair-cta a:focus-visible {
  background: rgba(200, 168, 75, 0.15); border-color: var(--gold);
}
@media (max-width: 860px) {
  .table-foot.pair-cta a { font-size: 1rem; padding: 14px 22px; }
}