/* tile-launcher.css — MIRRORS the EXISTING JNY tile spec (do NOT invent).
 * SOURCE: technical/dev/JNY/_build/S0_l0_seam/_live/panels/l3-home-next.js embedded CSS
 *   (~L2030 .grid · ~L2037 .app · ~L2040 .ic · ~L2059 .app.folder .ic).
 * Same values: 4-col grid, gap 12px 6px; icon 90% width / aspect 1 / max 104px /
 * radius 23%; tile = vertical flex, gap 4px; folder = 2x2 mini-grid. Navy-Luxe LIGHT
 * surface (ink on pearl), phone-first, no reverse type (FOUNDATIONAL #1). */

.tl-board { padding: 6px 16px 24px; }
.tl-title { font-size: 15px; font-weight: 700; color: #14171f; margin: 8px 4px; }
.tl-folder-h { font-size: 12.5px; font-weight: 700; color: #14171f; margin: 14px 4px 6px; }

/* grid — EXACT JNY spec (l3-home-next .grid) */
.tl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 6px; }

/* tile — EXACT JNY spec (.app) */
.tl-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: 0; cursor: pointer; padding: 0;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}

/* icon — EXACT JNY spec (.ic): 90% width, square, max 104px, radius 23%, navy gradient */
.tl-glyph {
  width: 90%; aspect-ratio: 1; max-width: 104px; display: grid; place-items: center;
  font-size: clamp(24px, 8vw, 40px); border-radius: 23%; overflow: hidden; color: #fff;
  background: linear-gradient(160deg, #3a5f97, #2a3f7a);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 -4px 8px rgba(0,0,0,.2) inset,
              0 12px 24px -8px rgba(18,44,79,.5);
  pointer-events: none;
}

/* the vendored line-icon painted ON the navy tile — white on navy (WCAG: ~8:1, well
 * above the 3:1 non-text floor). Centered by the parent's place-items:center. The mini
 * inlines the SVG (fill=currentColor); .tl-glyph's color:#fff tints it white. */
.tl-glyph .tl-svg {
  width: 54%; height: 54%; display: block; fill: currentColor; color: #fff;
  pointer-events: none;
}

/* label — light surface, ink text (NO reverse type) */
.tl-label {
  font-size: 12px; font-weight: 600; color: #14171f; text-align: center;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tl-locked { opacity: .55; }
.tl-lock { position: absolute; top: 2px; right: 8px; color: #556; font-size: 14px; }
.tl-empty { color: #556; font-size: 12.5px; padding: 8px 4px; }
.tl-preview-bar {
  display: flex; align-items: center; gap: 8px; margin: 12px 4px 0; padding: 8px 12px;
  border-radius: 10px; background: color-mix(in srgb, #d9a441 16%, #fff);
  border: 1px solid color-mix(in srgb, #d9a441 45%, #e6e2cf);
  color: #14171f; font-size: 12.5px; font-weight: 600;
}
.tl-preview-off { margin-left: auto; }

/* ─── TABLET (>=768px): let tiles grow into the centered column ────────────────
   Phone (<768px) grid is UNCHANGED (this block is additive). Inside the centered
   ~720px content column (styles.css tablet block), the fixed 4-col phone grid left
   104px icons stranded in 190px cells. Switch to auto-fill so tiles size to a
   comfortable tablet target and the board FILLS the column instead of clustering
   top-left; bigger icon cap + roomier gaps for iPad. Navy-Luxe LIGHT, no reverse
   type (FOUNDATIONAL #1); labels stay ink-on-pearl. */
@media (min-width: 768px){
  .tl-board { padding: 12px 20px 32px; }
  .tl-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px 14px; }
  .tl-glyph { max-width: 132px; }
  .tl-label { font-size: 13px; }
}