/* Launcher and demo hub: tiles. Built on tokens.css and components.css (Publication Layer language):
   outlined, unfilled, 4 px corners, no shadows. */
.page > .view { align-content: start; }
[hidden] { display: none !important; }
.lede { margin: 0; font-size: var(--text-body); color: var(--ink-body); max-width: 720px; }
.page-title { display: grid; gap: var(--space-2); }
.page-title h1 { margin: 0; font-family: var(--font-bold); font-weight: 700; font-size: var(--text-h1); color: var(--ink-strong); }

.tiles > li { display: grid; }
.tiles { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-7); }
.tile { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-4); padding: var(--space-7); border: var(--rule-w) solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; min-height: 236px; }
a.tile:hover, .tile:has(a.tile-link:hover) { border-color: var(--ink); background: var(--surface-hover); }
a.tile:focus-visible, .tile-link:focus-visible { outline: var(--accent-w) solid var(--ink); outline-offset: 2px; }
.tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.tile img { width: 64px; height: 64px; display: block; }
.tile-name { margin: 0; font-family: var(--font-medium); font-weight: 400; font-size: var(--text-body); color: var(--ink); }
.tile-desc { margin: 0; font-size: var(--text-ui); color: var(--ink-body); }
.tile-note { margin: 0; padding-top: var(--space-4); border-top: var(--rule-w) solid var(--rule); font-size: var(--text-small); color: var(--muted); }
.tile-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-top: var(--space-2); }
.tile-actions a.link { font-size: var(--text-ui); color: var(--ink); text-underline-offset: 3px; }

.empty { display: grid; justify-items: center; text-align: center; gap: var(--space-4); padding: 72px 0; }
.empty h2 { margin: 0; font-family: var(--font); font-weight: 400; font-size: 26px; }
.empty p { margin: 0; color: var(--ink-body); max-width: 560px; }

/* Local preview control (left cell of the bottom bar): only on a local copy without sign-in. */
.mock { justify-self: start; display: inline-flex; align-items: center; gap: var(--space-3); padding: 6px 10px; border: 1px dashed var(--muted); border-radius: var(--radius); font-size: var(--text-small); color: var(--muted); }
.mock select { height: 30px; padding: 0 28px 0 8px; line-height: 1.2; font-size: var(--text-small); }

@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tiles { grid-template-columns: minmax(0, 1fr); } .tile { min-height: 0; } }
@media (max-width: 900px) { .mock { justify-self: center; } }