/* ==========================================================================
   layout.css — site shell: header, nav, footer, page frames, rail
   --------------------------------------------------------------------------
   Breakpoints (mobile-first min-width). Values are hard-coded because
   custom properties do not work inside @media conditions; they are also
   listed in tokens.css so they cannot drift silently.

       600px   chip groups 2-up, deadline strip on one line
       900px   controls inline rather than a sheet, card interior splits
      1200px   right rail appears
   ========================================================================== */

/* ==========================================================================
   SITE HEADER
   On mobile the header scrolls away — it steals scarce vertical space, and
   the control bar is the thing worth sticking. See board.css.
   ========================================================================== */

.tcg-siteheader {
  position: relative;
  z-index: var(--tcg-z-header);
  background: var(--tcg-color-surface);
  border-bottom: 1px solid var(--tcg-color-border);
}

.tcg-siteheader__inner {
  display: flex;
  align-items: center;
  gap: var(--tcg-space-sm);
  max-width: calc(var(--tcg-width-content) + 2 * var(--tcg-space-sm));
  margin: 0 auto;
  padding: var(--tcg-space-xs) var(--tcg-space-sm);
  min-height: 56px;
}

/* --------------------------------------------------------------------------
   WORDMARK
   The site name is supplied by the owner and is currently a placeholder.
   Swap cost must stay at one line: change the text in the partial, and
   --tcg-logo-mark below if the glyph changes. Nothing else.
   -------------------------------------------------------------------------- */

.tcg-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--tcg-space-2xs);
  font-size: var(--tcg-fs-lg);
  font-weight: 700;
  letter-spacing: var(--tcg-ls-tight);
  color: var(--tcg-color-text);
  text-decoration: none;
  white-space: nowrap;
}

.tcg-logo__mark {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

/* SVG wordmark (550x127 viewBox): the dots overhang the letters, so 32px tall
   puts the letters level with the 28px mark. ~139px wide, crisp at any density. */
.tcg-logo__img {
  display: block;
  width: auto;
  height: 32px;
}

.tcg-logo__sub {
  font-size: var(--tcg-fs-2xs);
  font-weight: 500;
  color: var(--tcg-color-text-faint);
  letter-spacing: var(--tcg-ls-eyebrow);
  text-transform: uppercase;
}
@media (max-width: 599px) { .tcg-logo__sub { display: none; } }

/* --------------------------------------------------------------------------
   HEADER NAV
   Flat, no submenus. Must hold board / articles / map / ranking / my page
   without a redesign when feature #2 lands.
   -------------------------------------------------------------------------- */

.tcg-headernav {
  display: none;
  margin-left: auto;
  gap: var(--tcg-space-2xs);
}

@media (min-width: 900px) {
  .tcg-headernav { display: flex; align-items: center; }
}

.tcg-headernav a {
  display: inline-flex;
  align-items: center;
  gap: var(--tcg-space-3xs);
  min-height: 44px;
  padding: 0 var(--tcg-space-sm);
  border-radius: var(--tcg-radius-sm);
  color: var(--tcg-color-text);
  font-size: var(--tcg-fs-sm);
  font-weight: 700;
  text-decoration: none;
}
.tcg-headernav a:hover { background: var(--tcg-color-surface-2); }
.tcg-headernav a[aria-current="page"] {
  color: var(--tcg-color-brand);
  background: var(--tcg-color-brand-soft);
}

.tcg-headernav__soon {
  font-size: var(--tcg-fs-2xs);
  font-weight: 700;
  color: var(--tcg-color-text-faint);
}

/* Menu button: mobile only. Opens the drawer — it never expands in place. */
.tcg-menubtn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--tcg-space-2xs);
  min-height: 44px;
  padding: 0 var(--tcg-space-sm);
  border: 1px solid var(--tcg-color-border-strong);
  border-radius: var(--tcg-radius-sm);
  background: var(--tcg-color-surface);
  font-size: var(--tcg-fs-sm);
  font-weight: 700;
}
/* The メニュー button is present at every width.

   It used to be hidden above 900px, on the assumption that a desktop header
   has room for everything. It did not: the drawer holds マイページ, the
   roadmap items and the site-info links, and all of it was simply unreachable
   on a desktop with nothing to say so. */

/* ==========================================================================
   PAGE FRAMES
   ========================================================================== */

/* Every page gets the same content column. This used to default to the full
   1120px shell, which meant any page nobody had explicitly styled — search,
   the archive, 404 — rendered text on ~68-character lines. The board was the
   only page with a deliberate width, so the board is what the rest now match. */
.tcg-shell {
  /* The padding is ADDED to the cap, so --tcg-width-content means the content
     itself — not the box around it. Without this, box-sizing:border-box eats
     the gutter and a page renders 736 while the board's grid track renders a
     true 760. A 24px near-miss is worse than an obvious difference: it reads
     as sloppiness rather than intent, and it is exactly what this change set
     out to remove. */
  max-width: calc(var(--tcg-width-content) + 2 * var(--tcg-space-sm));
  margin: 0 auto;
  padding: var(--tcg-space-md) var(--tcg-space-sm) var(--tcg-space-3xl);
}

/* --- side ad rails --------------------------------------------------------
   Two 160x600 skyscrapers either side of the content, PC only.

   The middle track is pinned to exactly the content width and the whole grid
   is centred, so turning the rails on cannot narrow the content by a pixel.
   Below the breakpoint the rails are display:none and this is inert.

   Deliberately NOT sticky: align-items:start lets the ad scroll away with
   the page. Nothing here is position:fixed, so it also stays clear of the
   overlay and scroll-lock machinery.

   1360px, not 1280: the tracks and gaps need 1248px, so 1280 would leave the
   ads 16px from the window edge. 1360 leaves 56px and still catches the very
   common 1366px laptop. */
.tcg-siderail { display: none; }

@media (min-width: 1360px) {
  .tcg-pagegrid {
    display: grid;
    grid-template-columns:
      var(--tcg-width-sky)
      minmax(0, calc(var(--tcg-width-content) + 2 * var(--tcg-space-sm)))
      var(--tcg-width-sky);
    justify-content: center;
    gap: var(--tcg-space-xl);
    align-items: start;
  }

  /* Inside the grid, the shell must FILL its track, so its centring margin
     has to go: an auto inline margin on a grid item switches the item from
     stretch to shrink-to-fit, and a sparse page (search results, 404)
     collapses to the width of its longest line while header and footer -
     outside the grid - stay full width. The board never showed it because
     its cards happen to fill the track anyway. The track is already the
     shell's own max-width and the grid centres the track, so nothing is
     lost with the margin gone. */
  .tcg-pagegrid > .tcg-shell {
    margin-inline: 0;
    width: 100%;
  }

  .tcg-siderail {
    display: block;
    /* Matches .tcg-shell's top padding so the ad's top edge lines up with
       the first line of content rather than floating above it. */
    padding-top: var(--tcg-space-md);
  }
}

/* Break one section out to the full shell, for grids that genuinely want the
   room. Deliberately the same mechanism as .alignwide, which the theme has to
   support anyway — one technique, not two. Clamped against the viewport so it
   can never introduce horizontal scroll. */
.tcg-wide {
  width: min(var(--tcg-width-shell), 100vw - 2 * var(--tcg-space-sm));
  margin-left: 50%;
  transform: translateX(-50%);
  max-width: none;
}

/* ==========================================================================
   PAGE HEADER (the h1 block on each page, not the site header)
   ========================================================================== */

.tcg-pagehead {
  margin-bottom: var(--tcg-space-lg);
}

.tcg-pagehead__title { margin-bottom: var(--tcg-space-xs); }

.tcg-pagehead__lead {
  font-size: var(--tcg-fs-sm);
  color: var(--tcg-color-text-muted);
  line-height: var(--tcg-lh-base);
  margin-bottom: var(--tcg-space-xs);
}

.tcg-pagehead__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tcg-space-xs);
  font-size: var(--tcg-fs-xs);
  color: var(--tcg-color-text-faint);
  margin-bottom: var(--tcg-space-xs);
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */

.tcg-section { margin-bottom: var(--tcg-space-xl); }

/* Skip layout and paint for sections below the fold. Ctrl+F and indexing
   still work. Our sort only appends existing nodes, so it never needs
   layout inside a skipped subtree — the two are compatible. */
.tcg-section--offscreen {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

/* ==========================================================================
   SITE FOOTER
   ========================================================================== */

.tcg-sitefooter {
  border-top: 1px solid var(--tcg-color-border);
  background: var(--tcg-color-surface);
  /* Vertical padding only. The horizontal gutter belongs to __inner, the
     same as .tcg-shell and the header — otherwise the inner centres inside
     an already-inset box and the columns land 12px off everything else. */
  padding: var(--tcg-space-xl) 0;
  margin-top: var(--tcg-space-2xl);
}

.tcg-sitefooter__inner {
  max-width: calc(var(--tcg-width-content) + 2 * var(--tcg-space-sm));
  margin: 0 auto;
  padding-inline: var(--tcg-space-sm);
  display: grid;
  gap: var(--tcg-space-lg);
}

@media (min-width: 600px) {
  .tcg-sitefooter__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .tcg-sitefooter__inner { grid-template-columns: 2fr 1fr 1fr; }
}

.tcg-sitefooter h2 {
  font-size: var(--tcg-fs-sm);
  margin-bottom: var(--tcg-space-xs);
  color: var(--tcg-color-text-muted);
}

.tcg-sitefooter ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tcg-space-2xs);
}

.tcg-sitefooter a {
  font-size: var(--tcg-fs-sm);
  color: var(--tcg-color-text);
  text-decoration: none;
}
.tcg-sitefooter a:hover { color: var(--tcg-color-brand); text-decoration: underline; }

.tcg-sitefooter__note {
  font-size: var(--tcg-fs-xs);
  color: var(--tcg-color-text-faint);
  line-height: var(--tcg-lh-base);
}

.tcg-sitefooter__legal {
  max-width: calc(var(--tcg-width-content) + 2 * var(--tcg-space-sm));
  margin: var(--tcg-space-lg) auto 0;
  padding-inline: var(--tcg-space-sm);
  padding-top: var(--tcg-space-md);
  border-top: 1px solid var(--tcg-color-border);
  font-size: var(--tcg-fs-xs);
  color: var(--tcg-color-text-faint);
}

/* ==========================================================================
   GRIDS — used by the hub homepage and archive pages
   ========================================================================== */

.tcg-grid {
  display: grid;
  gap: var(--tcg-space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .tcg-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .tcg-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .tcg-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* NOTE: there is deliberately no grid variant for the entry list. A
   deadline-ordered list is read top to bottom; a two-up grid destroys the
   "sorted by urgency" reading, which is the whole product. */