/* ═══════════════════════════════════════════════════════════════════════
   css/base/home_tiles.css — entity homepage section tiles · 2026-06-11

   ONE SHARED PLACE for the homepage tile design (each __<entity>/index.php
   links this file — edit here, every homepage follows).

   Design: the tile face adopts the TOP-NAV HEADER BUTTON style (dark
   entity chrome, thin gold border, mono uppercase label, gold number).
   Behind each face sits an 83×83 px BACKING SQUARE in the entity's darker
   tone — the face is centred in it with 5 px padding all round, and the
   square wears a 3 px FEATHERED border (blurred gold ring).
   All colours come from the entity skin tokens (--nav-bg / --nav-gold /
   --nav-text…), so the same file renders correctly on every site.
   ═══════════════════════════════════════════════════════════════════════ */

/* Entity background extends to the scrollbar track — prevents a white strip
   on the right edge when the page height exceeds the viewport. */
html { background: var(--page-bg); }   /* DEEP entity bg — matches the library / portals */

/* The hero starts at the TOP of the page (title right under the nav) —
   overrides each page's vertical centering, shared for ALL homepages. */
main[class*="-hero"] {
  justify-content: flex-start;
  min-height: 0;
  padding-top: 34px;
}

.portal-tiles {
  margin-top: 44px; display: grid;
  grid-template-columns: repeat(4, 83px);   /* cell = the 83px backing square */
  gap: 16px; justify-content: center; width: 100%;
}
@media (max-width: 460px) { .portal-tiles { grid-template-columns: repeat(2, 83px); } }

/* ── TOOL ROW — the FIRST row (above the section grid): the entity's
   Skin Manager + its own Site Map. Same face + backing design. */
.tool-row {
  margin-top: 44px; display: grid; grid-template-columns: repeat(2, 83px);
  gap: 16px; justify-content: center; width: 100%;
}
.tool-row + .portal-tiles { margin-top: 16px; }   /* section grid follows at the grid gap */
.tool-row .ptile-ico { color: var(--nav-gold, #B8832A); height: 20px; }
.tool-row .ptile-ico svg { width: 20px; height: 20px; display: block; }
.tool-row .ptile-name { text-transform: none; letter-spacing: 0.03em; }

/* The FACE — same recipe as the header nav buttons (.darx-nav-link). The
   5px margin centres the 73px face inside the 83px grid cell. */
.portal-tiles .ptile,
.tool-row .ptile {
  position: relative; width: 73px; height: 73px; margin: 5px;
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 6px 4px; text-align: center;
  border-radius: var(--tile-radius, 6px); text-decoration: none;
  /* RECOLOURABLE + emboss-preserving (skin group "Bands & Tiles"). The bevel is a
     light-top / dark-bottom mix off the chosen --tile-color, scaled by
     --emboss-strength, so the 3-D survives at ANY luminance; the halo = --glow-color
     × --glow-strength. Inner-ring width/colour + radius + border are skin controls too.
     Leave a colour field blank → inherits the nav colours. 2026-06-24 user. */
  --_tile: var(--tile-color, var(--nav-bg, #23282F));
  --_es:   var(--emboss-strength, 100);
  --_gc:   var(--glow-color, var(--nav-gold, #B8832A));
  --_gs:   var(--glow-strength, 100);
  --_ring: var(--tile-ring, 5px);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--_tile), #fff calc(var(--_es) * 0.4%)) 0%,
    color-mix(in srgb, var(--_tile), #000 calc(var(--_es) * 0.32%)) 100%);
  border: var(--tile-border, 1px) solid color-mix(in srgb, var(--_gc) 50%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, transparent, #fff calc(var(--_es) * 0.56%)),
    inset 0 -1px 0 color-mix(in srgb, transparent, #000 calc(var(--_es) * 0.44%));
  transition: border-color .15s ease, background .15s ease, transform .12s ease, box-shadow .15s ease;
}

/* The BACKING SQUARE — 83×83 (face 73 + 5px padding), darker tone + the gold halo,
   both from the skin controls (so recolouring keeps the ring). */
.portal-tiles .ptile::before,
.tool-row .ptile::before {
  content: ''; position: absolute; inset: calc(-1 * var(--_ring)); z-index: -1;
  border-radius: calc(var(--tile-radius, 6px) + var(--_ring));
  /* ring fill = the skin "Tile inner-ring colour", or derived darker tile if blank */
  background: var(--tile-ring-color, color-mix(in srgb, var(--_tile), #000 calc(var(--_es) * 0.6%)));
  box-shadow:
    0 0 4px 3px color-mix(in srgb, transparent, var(--_gc) calc(var(--_gs) * 0.38%)),
    0 6px 16px -5px rgba(0, 0, 0, 0.5);
}

.portal-tiles .ptile:hover,
.tool-row .ptile:hover {
  border-color: var(--_gc);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--_tile), #fff calc(var(--_es) * 0.68%)) 0%,
    color-mix(in srgb, var(--_tile), #fff calc(var(--_es) * 0.2%)) 100%);
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--_gc) 60%, transparent),
    inset 0 1px 0 color-mix(in srgb, transparent, #fff calc(var(--_es) * 0.72%)),
    0 0 20px -6px color-mix(in srgb, transparent, var(--_gc) calc(var(--_gs) * 0.50%));
}
.portal-tiles .ptile:active,
.tool-row .ptile:active { transform: translateY(0); }

.portal-tiles .ptile-num {
  font-family: var(--font-mono); font-size: var(--ui-fs-value); font-weight: 500;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--nav-gold, #B8832A) 65%, transparent);
}
.portal-tiles .ptile-name,
.tool-row .ptile-name {
  font-family: var(--font-mono); font-size: var(--ui-fs-label); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.25;
  /* normal = Nav button text; HIGHLIGHTED on hover = Nav button text (highlighted) */
  color: var(--nav-text, #F1E9D8);
  transition: color .16s ease;
}
.portal-tiles .ptile:hover .ptile-name,
.portal-tiles .ptile:focus-visible .ptile-name,
.tool-row .ptile:hover .ptile-name,
.tool-row .ptile:focus-visible .ptile-name {
  color: var(--nav-text-hover, #F1E9D8);
  /* skin --shadow-strong token + a SHARP near-black core: a wide *soft* shadow is
     invisible on the dark platform tile, so the sharp layer is what actually reads. */
  text-shadow:
    var(--shadow-strong, 0 6px 18px rgba(0,0,0,.4)),
    0 2px 4px rgba(0,0,0,.97),
    0 5px 16px rgba(0,0,0,.85);
}
/* logotype (icon) gets the same layered drop shadow on hover */
.portal-tiles .ptile-ico,
.tool-row .ptile-ico { transition: filter .16s ease, transform .16s ease, color .16s ease; }
.portal-tiles .ptile:hover .ptile-ico,
.portal-tiles .ptile:focus-visible .ptile-ico,
.tool-row .ptile:hover .ptile-ico,
.tool-row .ptile:focus-visible .ptile-ico {
  filter:
    drop-shadow(var(--shadow-strong, 0 6px 16px rgba(0,0,0,.4)))
    drop-shadow(0 2px 4px rgba(0,0,0,.92))
    drop-shadow(0 5px 14px rgba(0,0,0,.7));
}
/* Live document count — corner chip. Roboto, NOT JetBrains Mono: the mono
   dotted zero reads like an 8 at this size. */
.portal-tiles .ptile-count {
  position: absolute; right: 3px; bottom: 3px;
  font-family: var(--font-sans); font-size: var(--ui-fs-micro); font-weight: 600;
  letter-spacing: 0.03em; padding: 0 4px; border-radius: 999px;
  color: var(--nav-gold, #B8832A);
  border: 1px solid color-mix(in srgb, var(--nav-gold, #B8832A) 55%, transparent);
  background: rgba(0, 0, 0, 0.28);
}

/* Index badge — top-left corner number for the page-hub tiles (12/index.php).
   Opt-in: only renders where a .ptile-num span exists, so other tile pages are
   untouched. Mirrors .ptile-count. 2026-06-25 user. */
.ptile .ptile-num {
  position: absolute; top: 4px; left: 6px; z-index: 3;
  font-family: var(--font-sans); font-size: var(--ui-fs-micro); font-weight: 700;
  line-height: 1; letter-spacing: 0.02em; padding: 2px 5px; border-radius: 999px;
  color: var(--nav-gold, #B8832A);
  border: 1px solid color-mix(in srgb, var(--nav-gold, #B8832A) 55%, transparent);
  background: rgba(0, 0, 0, 0.28);
}

/* ── TOOL TILES — subtly different material from section tiles.
   Muted border + deeper background reads as "admin control", not content. */
.tool-row .ptile-tool {
  /* same recolour + emboss vars as .ptile (defined there, same element). 2026-06-24 user. */
  border-color: color-mix(in srgb, var(--_gc) 28%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--_tile), #fff calc(var(--_es) * 0.32%)) 0%,
    color-mix(in srgb, var(--_tile), #000 calc(var(--_es) * 0.36%)) 100%);
}
.tool-row .ptile-tool::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, transparent, var(--_gc) calc(var(--_gs) * 0.65%)) 30%,
    color-mix(in srgb, transparent, var(--_gc) calc(var(--_gs) * 0.65%)) 70%,
    transparent 100%);
  border-radius: 6px 6px 0 0;
  pointer-events: none;
}
.tool-row .ptile-tool:hover {
  border-color: color-mix(in srgb, var(--_gc) 70%, transparent);
}