/* ==========================================================================
   CAPACITY CHART
   --------------------------------------------------------------------------
   Ten rooms by eight columns. Dense tabular data is the one thing a page like
   this genuinely needs to be a table, so it stays a table — and the work here
   is making a wide table survive a phone without throwing the data away.

   Two mechanisms, at one breakpoint:

     >= 48em   a real table. The room column is sticky so a name stays visible
               while the layout columns scroll under it, and the header is
               sticky so the column you are reading stays labelled.

     <  48em   each row becomes a card. The cells keep their labels through
               `content: attr(data-label)`, which is why every <td> carries one
               in the markup. Nothing is hidden; the same ten rooms and the same
               eight numbers are present at both sizes.

   The table is NEVER allowed to make the page scroll sideways — the scroll
   lives in .skagit-capacity__scroll, which is the pattern the rest of the site
   uses for wide content.
   ========================================================================== */

.skagit-capacity {
  --cap-navy: var(--sk-navy-700, #16354F);
  --cap-gold: var(--sk-gold-500, #C9A227);
  --cap-ink: var(--sk-text, #2B3038);
  --cap-line: rgba(11, 61, 104, 0.12);
  --cap-zebra: rgba(11, 61, 104, 0.032);

  margin-block: clamp(1.75rem, 4vw, 3rem);
}

.skagit-capacity__title {
  margin: 0 0 0.4rem;
}

.skagit-capacity__intro {
  margin: 0 0 1.25rem;
  max-width: 62ch;
  color: var(--cap-ink);
}

/* ---- the filter, injected by JS ---------------------------------------- */

.skagit-capacity__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--cap-line);
  border-radius: var(--sk-radius-sm, 8px);
  background: rgba(11, 61, 104, 0.035);
}

.skagit-capacity__filter label {
  font-weight: 600;
  color: var(--cap-navy);
}

.skagit-capacity__filter input[type="number"] {
  /* 6.5rem clipped its own placeholder ("e.g. 120") and left no room for a
     three-digit entry beside the spinner. */
  width: 9.5rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--cap-line);
  border-radius: 6px;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.skagit-capacity__filter button {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--cap-navy);
  border-radius: 999px;
  background: transparent;
  color: var(--cap-navy);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.skagit-capacity__filter button:hover,
.skagit-capacity__filter button:focus-visible {
  background: var(--cap-navy);
  color: #fff;
}

.skagit-capacity__count {
  margin-inline-start: auto;
  font-size: 0.88rem;
  color: #50575e;
}

/* ---- scroll container --------------------------------------------------- */

.skagit-capacity__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--cap-line);
  border-radius: var(--sk-radius-sm, 8px);
  background: #fff;
}

/* The container is focusable so it can be scrolled from the keyboard; give
   that focus somewhere visible to land. */
.skagit-capacity__scroll:focus-visible {
  outline: 3px solid var(--cap-gold);
  outline-offset: 2px;
}

.skagit-capacity__table {
  width: 100%;
  border-collapse: separate;   /* separate, or sticky cells lose their borders */
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* ---- header -------------------------------------------------------------- */

.skagit-capacity__table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.7rem 0.75rem;
  background: var(--cap-navy);
  color: #fff;
  text-align: center;
  vertical-align: bottom;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.25;
  border-bottom: 2px solid var(--cap-gold);
}

.skagit-capacity__table thead th.is-room {
  left: 0;
  z-index: 3;                 /* above both the sticky row and the sticky head */
  text-align: start;
  min-width: 12rem;
}

.skagit-capacity__ico {
  display: block;
  margin: 0 auto 0.3rem;
  width: 22px;
  height: 22px;
  color: var(--cap-gold);
}

.skagit-capacity__ico svg {
  width: 100%;
  height: 100%;
  display: block;
}

.skagit-capacity__lab {
  display: block;
}

/* The plain-language explanation of a trade term. Present for everyone, but
   quiet — it is help, not a heading. */
.skagit-capacity__hint {
  display: block;
  margin-top: 0.25rem;
  max-width: 11rem;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.66);
}

/* ---- body ---------------------------------------------------------------- */

.skagit-capacity__table tbody th,
.skagit-capacity__table tbody td {
  padding: 0.72rem 0.75rem;
  border-bottom: 1px solid var(--cap-line);
  color: var(--cap-ink);
}

.skagit-capacity__table tbody tr:nth-child(even) th,
.skagit-capacity__table tbody tr:nth-child(even) td {
  background: var(--cap-zebra);
}

.skagit-capacity__table tbody tr:nth-child(odd) th,
.skagit-capacity__table tbody tr:nth-child(odd) td {
  background: #fff;
}

.skagit-capacity__table tbody th.is-room {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: start;
  font-weight: 600;
  /* A right edge so the sticky column reads as a column once it overlaps. */
  box-shadow: 1px 0 0 var(--cap-line);
}

.skagit-capacity__room {
  display: block;
  color: var(--cap-navy);
}

.skagit-capacity__note {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.76rem;
  font-weight: 400;
  color: #5c6470;
}

/* Sub-divisions of a larger room, indented so the hierarchy is visible. */
.skagit-capacity__table tbody tr.is-sub th.is-room .skagit-capacity__room {
  padding-inline-start: 0.9rem;
  font-weight: 500;
}

.skagit-capacity__table tbody tr.is-sub th.is-room .skagit-capacity__room::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.75rem;
  top: 1.15rem;
  width: 0.45rem;
  height: 1px;
  background: var(--cap-gold);
  opacity: 0.8;
}

.skagit-capacity__table tbody th.is-room {
  position: sticky;   /* repeated for the ::before positioning context below */
}

.skagit-capacity__table tbody tr.is-sub th.is-room {
  position: sticky;
}

.skagit-capacity__table .is-num {
  text-align: center;
  white-space: nowrap;
}

.skagit-capacity__table .is-na {
  color: #9aa2ad;
}

/* ---- filter states ------------------------------------------------------- */

/* Dimmed, never removed: a planner is comparing rooms, and taking rows out of
   a table they are mid-comparison on is more disorienting than greying them. */
.skagit-capacity__table tbody tr.is-under th,
.skagit-capacity__table tbody tr.is-under td {
  opacity: 0.34;
}

.skagit-capacity__table tbody td.is-fits {
  position: relative;
  background: rgba(201, 162, 39, 0.16) !important;
  font-weight: 700;
  color: var(--cap-navy);
}

.skagit-capacity__foot {
  margin: 0.9rem 0 0;
  font-size: 0.86rem;
  color: #5c6470;
}

.skagit-capacity__foot a {
  color: var(--cap-navy);
}

/* ==========================================================================
   PHONES — the table becomes cards
   ========================================================================== */

@media (max-width: 47.99em) {

  .skagit-capacity__scroll {
    overflow-x: visible;
    border: 0;
    background: transparent;
  }

  .skagit-capacity__table,
  .skagit-capacity__table tbody,
  .skagit-capacity__table tbody tr,
  .skagit-capacity__table tbody th,
  .skagit-capacity__table tbody td {
    display: block;
    width: auto;
  }

  /* The header row is meaningless once cells carry their own labels. It stays
     in the DOM for assistive technology; only the visual row is dropped. */
  .skagit-capacity__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .skagit-capacity__table tbody tr {
    margin: 0 0 0.85rem;
    border: 1px solid var(--cap-line);
    border-radius: var(--sk-radius-sm, 8px);
    overflow: hidden;
    background: #fff;
  }

  .skagit-capacity__table tbody th.is-room {
    position: static;
    box-shadow: none;
    padding: 0.75rem 0.9rem;
    background: var(--cap-navy) !important;
    border-bottom: 2px solid var(--cap-gold);
  }

  .skagit-capacity__table tbody th.is-room .skagit-capacity__room {
    color: #fff;
    padding-inline-start: 0 !important;
  }

  .skagit-capacity__table tbody th.is-room .skagit-capacity__room::before {
    content: none;
  }

  .skagit-capacity__table tbody th.is-room .skagit-capacity__note {
    color: rgba(255, 255, 255, 0.75);
  }

  .skagit-capacity__table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    text-align: end;
    padding: 0.5rem 0.9rem;
    background: #fff !important;
  }

  .skagit-capacity__table tbody tr:nth-child(even) td {
    background: #fff !important;
  }

  .skagit-capacity__table tbody td::before {
    content: attr(data-label);
    font-size: 0.8rem;
    font-weight: 600;
    color: #5c6470;
    text-align: start;
  }

  .skagit-capacity__table tbody td.is-fits {
    background: rgba(201, 162, 39, 0.16) !important;
  }

  .skagit-capacity__count {
    margin-inline-start: 0;
    width: 100%;
  }
}

/* ==========================================================================
   PRINT — a planner will print this
   ========================================================================== */

@media print {

  .skagit-capacity__filter,
  .skagit-capacity__foot a {
    display: none;
  }

  .skagit-capacity__scroll {
    overflow: visible;
    border: 0;
  }

  .skagit-capacity__table thead th {
    position: static;
    background: #fff !important;
    color: #000;
    border-bottom: 2px solid #000;
  }

  .skagit-capacity__hint,
  .skagit-capacity__ico {
    display: none;
  }

  .skagit-capacity__table tbody th.is-room {
    position: static;
    box-shadow: none;
  }

  .skagit-capacity__table tbody tr.is-under th,
  .skagit-capacity__table tbody tr.is-under td {
    opacity: 1;   /* never print a half-visible number */
  }
}

/* ==========================================================================
   INSIDE A WIDE SECTION CARD
   --------------------------------------------------------------------------
   Wide cards flow their body in CSS multi-column (`columns: 480px`), which is
   right for prose and catastrophic for a table: the browser would fragment the
   chart down two columns and the rows would stop lining up with the header.

   `column-span: all` takes the chart out of the column flow and spans it across
   the whole card, which is the one job that property exists for. Belt and
   braces on the parent too, because column-span on a descendant only applies
   when the ancestor is the multi-column container itself.
   ========================================================================== */

.skagit-section-card--wide .skagit-capacity,
.skagit-section-card__body .skagit-capacity {
  column-span: all;
  break-inside: avoid;
}

.skagit-section-card__body:has(.skagit-capacity) {
  columns: auto;
  column-count: 1;
}

/* ==========================================================================
   INHERITED TEXT-TRANSFORM
   --------------------------------------------------------------------------
   Something upstream (the section-card heading treatment) uppercases text in
   this position, which turned the room names into PACIFIC SHOWROOM and — worse
   — the notes into THE SKAGIT HOTEL, SECOND FLOOR. STAGE AND FULL A/V. A run of
   all-caps sentence text is measurably slower to read and loses the shape of
   the words. Reset explicitly rather than hunting the ancestor, so this holds
   wherever the chart is placed.
   ========================================================================== */

.skagit-capacity__room,
.skagit-capacity__note,
.skagit-capacity__hint,
.skagit-capacity .is-num,
.skagit-capacity__foot {
  text-transform: none;
  letter-spacing: normal;
}

.skagit-capacity__room {
  font-size: 0.95rem;
}

/* The hints are genuinely useful but they were setting the column width and
   pushing four of the eight layouts off screen. Cap them, and drop them below
   the width where the table is already tight — the icon and the label carry the
   meaning on their own. */
.skagit-capacity__hint {
  max-width: 8.5rem;
}

@media (max-width: 74.99em) {
  .skagit-capacity__hint {
    display: none;
  }
}

.skagit-capacity__table thead th {
  vertical-align: middle;
}

/* ==========================================================================
   FEATURED SPACES — photograph left, description right
   --------------------------------------------------------------------------
   The shape production uses, and the right one: each space is a thing you are
   choosing between, and the photograph does more selling than the first
   sentence does.

   Grid rather than float, so the text column can never wrap under a tall image
   and leave a ragged step — the two columns are declared, not emergent.
   ========================================================================== */

.skagit-spaces {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-block: clamp(1.5rem, 3vw, 2.5rem);
}

.skagit-spaces__row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: center;
  padding: clamp(0.85rem, 2vw, 1.25rem);
  border: 1px solid rgba(11, 61, 104, 0.12);
  border-radius: var(--sk-radius-sm, 10px);
  background: #fff;
  transition: box-shadow 220ms ease, transform 220ms ease, border-color 220ms ease;
}

.skagit-spaces__media {
  overflow: hidden;                 /* clips the zoom below */
  border-radius: calc(var(--sk-radius-sm, 10px) - 3px);
  aspect-ratio: 4 / 3;
  background: rgba(11, 61, 104, 0.06);
}

.skagit-spaces__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.skagit-spaces__title {
  margin: 0 0 0.5rem;
  color: var(--sk-navy-700, #16354F);
}

/* The headline numbers, read from the capacity data so they cannot drift. */
.skagit-spaces__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.skagit-spaces__stats li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: rgba(11, 61, 104, 0.055);
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: normal;
}

.skagit-spaces__stats b {
  color: var(--sk-navy-700, #16354F);
  font-variant-numeric: tabular-nums;
}

.skagit-spaces__stats span {
  color: #5c6470;
}

.skagit-spaces__body {
  margin: 0;
  max-width: 62ch;
  text-transform: none;
}

/* ---- motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  .skagit-spaces__row:hover,
  .skagit-spaces__row:focus-within {
    transform: translateY(-2px);
    border-color: rgba(201, 162, 39, 0.55);
    box-shadow: 0 10px 26px -14px rgba(11, 39, 68, 0.45);
  }

  .skagit-spaces__row:hover .skagit-spaces__img,
  .skagit-spaces__row:focus-within .skagit-spaces__img {
    transform: scale(1.05);
  }

  /* NO load-time animation here any more.
     The rows are now revealed on scroll by the site's own IntersectionObserver
     layer (skagit-motion.js / skagit-motion.css, class `sk-in`), which is what
     every other revealed block on this site uses. Animating on load as well
     meant the rows further down the page had already played their entrance
     before anyone scrolled to them. --sk-space-i is still set inline and still
     staggers the reveal. */
  .skagit-spaces__row {
    transition-delay: calc(var(--sk-space-i, 0) * 70ms);
  }
}

/* ---- phones: image on top ----------------------------------------------- */

@media (max-width: 47.99em) {

  .skagit-spaces__row {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  /*
   * 3:2, not 16:9.
   * Every one of these room photographs is 3:2, so a 16:9 frame was cropping
   * about 15% off each one — measured as a 324x182 box holding a 324x215
   * image, with the difference silently clipped. The container matches the
   * source instead, which costs ~34px of card height and shows the whole
   * photograph. Revisit only if a 16:9 room shot is ever added.
   */
  .skagit-spaces__media {
    aspect-ratio: 3 / 2;
  }
}

/* ==========================================================================
   THE CHART SHOULD NOT NEED A SCROLLBAR ON A DESKTOP
   --------------------------------------------------------------------------
   Eight columns did not fit the card, so the container scrolled sideways —
   which works, but reads as something that did not fit rather than something
   designed. Two changes give it the room:

     1. It breaks out of the card's padding to the full width of the container,
        using the margin trick rather than 100vw (100vw includes the scrollbar
        and causes its own overflow).
     2. Tighter cells and a slightly smaller face above 62em.

   The scroll container STAYS. It is what keeps a genuinely narrow window — or a
   200% browser zoom, which is an accessibility requirement, not an edge case —
   from pushing the whole page sideways.
   ========================================================================== */

@media (min-width: 62em) {

  /* No negative margin. The chart used to break out of the card padding to buy
     width for its eight columns; with the wrapper's padding gone that pulled it
     WIDER than every other block on the site and it stopped lining up with the
     page. It sits on the same measure as everything else now — the columns fit
     without it. */

  .skagit-capacity__table thead th,
  .skagit-capacity__table tbody th,
  .skagit-capacity__table tbody td {
    padding-inline: 0.55rem;
  }

  .skagit-capacity__table {
    font-size: 0.92rem;
  }

  .skagit-capacity__table thead th.is-room {
    min-width: 10.5rem;
  }
}

/* Five pixels over at 1600px — borders plus the sticky column's box-shadow.
   Shave the room column and the cell padding so the eight columns land inside
   the container instead of triggering a scrollbar for a sliver. */
@media (min-width: 62em) {
  .skagit-capacity__table thead th.is-room { min-width: 9.5rem; }
  .skagit-capacity__table thead th,
  .skagit-capacity__table tbody th,
  .skagit-capacity__table tbody td { padding-inline: 0.45rem; }
}

/* The Featured Spaces need the same escape from the wide card's multi-column
   flow as the chart does — without it the rows are laid into ~380px columns and
   the text breaks to one character per line. */
.skagit-section-card--wide .skagit-spaces,
.skagit-section-card__body .skagit-spaces {
  column-span: all;
  break-inside: avoid;
}

.skagit-section-card__body:has(.skagit-spaces) {
  columns: auto;
  column-count: 1;
}

/* ==========================================================================
   ===  REDESIGN, 30 July 2026  =============================================
   ==========================================================================
   The page was a uniform grid of white cards, and the two components that
   carry the most weight — the room photography and the capacity chart — were
   sitting in 903px of a 1368px three-column grid with a stranded column beside
   them. Nothing led, everything competed, and the most useful thing on the page
   was the least attractive.

   THE DIRECTION: refined luxury with editorial rhythm. The resort's own navy
   and brass, generous space, photography doing the selling, and exactly ONE
   dark inversion — the capacity chart — so the page has a centre of gravity.
   The Rewards Club page uses the same discipline: invert once and it means
   something; invert twice and it means nothing.
   ========================================================================== */

/* ---- 1. THE TWO BIG COMPONENTS TAKE THE WHOLE ROW ------------------------
   `--wide` spans two of three columns, which is right for prose and wrong for
   a 4:3 photograph beside a paragraph, or for eight columns of numbers. The
   :has() targets the content rather than the card, so this cannot drift if the
   grid or the card classes change. */

.skagit-sections > .skagit-section-card:has(.skagit-capacity),
.skagit-sections > .skagit-section-card:has(.skagit-spaces) {
  grid-column: 1 / -1;
}

/* ---- 2. THE CHART STAYS LIGHT -------------------------------------------
   It was inverted to navy to give the page a centre of gravity. It did — and it
   was harder to read, which is the wrong trade for a reference table somebody
   scans ten rows of small numerals in. Reverted. The chart earns attention by
   being the most useful thing on the page, not by being the darkest.
   ------------------------------------------------------------------------- */

/* ---- 3. FEATURED SPACES: EDITORIAL RHYTHM -------------------------------- */

/*
 * >>> THIS MUST STAY INSIDE A min-width QUERY. <<<
 * It was written unconditionally and sits LATER in the file than the
 * `max-width: 47.99em` block that collapses the row to one column, so it won
 * the cascade on phones: the grid stayed two columns, the text column computed
 * to 0px, and each row rendered 6,000-7,700px tall with the copy one character
 * wide. A later unconditional rule always beats an earlier media query.
 */
@media (min-width: 48em) {
  .skagit-spaces__row {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
  }
}

.skagit-spaces__row {
  padding: clamp(1rem, 2vw, 1.5rem);
}

/* Alternate the photograph side. Four identical rows read as a spreadsheet;
   alternating gives the eye a reason to travel down the page. */
@media (min-width: 48em) {
  .skagit-spaces__row:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  }
  .skagit-spaces__row:nth-child(even) .skagit-spaces__media { order: 2; }
  .skagit-spaces__row:nth-child(even) .skagit-spaces__text  { order: 1; }
}

@media (min-width: 48em) {
  .skagit-spaces__media { aspect-ratio: 3 / 2; }
}

.skagit-spaces__title {
  font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.6rem);
  letter-spacing: 0.01em;
}

/* A short brass rule under each title, the site's own signature. */
.skagit-spaces__title::after {
  content: "";
  display: block;
  width: 2.75rem;
  height: 2px;
  margin-top: 0.5rem;
  background: linear-gradient(90deg, #C9A227, rgba(201, 162, 39, 0));
}

.skagit-spaces__body { font-size: 1.02rem; line-height: 1.65; }

/* ---- 4. THE ANCHOR ACTUALLY LANDS SOMEWHERE ----------------------------- */

/* The header is sticky, so an anchor jump would put the target under it.
   scroll-margin-top reserves the header's height; smooth scrolling is opt-in
   for anyone who has not asked for reduced motion. */
#enquiry { scroll-margin-top: 6.5rem; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ==========================================================================
   NO CARD AROUND THE CARDS
   --------------------------------------------------------------------------
   Featured Spaces sat inside a section card, and each space is itself a card —
   a bordered box holding four bordered boxes, with the outer one's padding
   making the inner ones look inset and accidental. The outer wrapper is
   stripped back to nothing but its heading, so the four space cards sit
   directly on the page and read as a set.
   ========================================================================== */

/* Superseded by .skagit-section-card--bare in skagit-place.css, which the
   section builder now applies to ANY wrapper around a self-contained block —
   gallery, form, chart, menu, room funnel — on every page rather than to this
   one component on this one page. Kept only as the full-row rule. */
.skagit-sections > .skagit-section-card:has(.skagit-spaces) {
  grid-column: 1 / -1;
}

/* ==========================================================================
   LAYOUT LEGEND
   ========================================================================== */

.skagit-capacity__legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.55rem 1.5rem;
  margin: 1.1rem 0 0;
  padding: 1rem 1.1rem;
  list-style: none;
  border: 1px solid rgba(11, 61, 104, 0.12);
  border-radius: var(--sk-radius-sm, 8px);
  background: rgba(11, 61, 104, 0.028);
}

.skagit-capacity__legend li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #5c6470;
  text-transform: none;
  letter-spacing: normal;
}

.skagit-capacity__legend .skagit-capacity__ico {
  flex: 0 0 auto;
  margin: 0.1rem 0 0;
  width: 18px;
  height: 18px;
  color: var(--sk-gold-500, #C9A227);
}

.skagit-capacity__legend b {
  color: var(--sk-navy-700, #16354F);
  font-weight: 700;
}

/* With the hints gone from the headers, the columns are compact enough that
   nothing needs hiding at any width. */
.skagit-capacity__hint { display: none; }

/* ==========================================================================
   DELIBERATE COLUMN WIDTHS
   --------------------------------------------------------------------------
   The table filled its container, but `table-layout: auto` sized every column
   to its contents: the room names took whatever they wanted and the six
   numeric columns shared what was left, so the numbers bunched to the left and
   the whole thing read as though it had failed to fit rather than been laid
   out.

   `fixed` makes the proportions a decision instead of an accident. It also
   stops the columns reflowing as the filter dims rows — with `auto`, changing
   which cells are emphasised can re-measure the whole table and shift every
   column sideways mid-interaction.

   The six layout columns are equal because they hold equivalent values; a
   planner compares across them, and equal width is what makes that scan work.
   ========================================================================== */

@media (min-width: 48em) {

  .skagit-capacity__table {
    table-layout: fixed;
  }

  .skagit-capacity__table thead th.is-room { width: 26%; min-width: 0; }
  .skagit-capacity__table thead th:nth-child(2) { width: 8%; }   /* Sq ft */
  .skagit-capacity__table thead th.is-layout { width: 11%; }     /* six equal */

  /* Long room names wrap rather than forcing a column wider than its share. */
  .skagit-capacity__table tbody th.is-room {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}