/* Mosaic components: Button, Tag, DataTile. From the Mosaic design system. */
.mo-btn{appearance:none;border:0;cursor:pointer;font-family:var(--font-sans);font-weight:600;font-size:15px;line-height:20px;padding:var(--space-3) var(--space-6);border-radius:var(--radius-sm);display:inline-flex;align-items:center;gap:var(--space-2)}
.mo-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mo-btn[disabled]{opacity:.4;cursor:not-allowed}
.mo-btn-primary{background:var(--brass);color:var(--on-brass)}
.mo-btn-primary:hover:not([disabled]){box-shadow:inset 0 0 0 1px var(--ink)}
.mo-btn-outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.mo-btn-outline:hover:not([disabled]){box-shadow:inset 0 0 0 1px var(--ink)}
.mo-btn-quiet{background:transparent;color:var(--brass-strong);padding-left:0;padding-right:0}
.mo-btn-quiet::after{content:"→"}
.mo-btn-quiet{text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.mo-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;line-height:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border-radius:var(--radius-sm);background:var(--surface-sunken);color:var(--ink-muted);box-shadow:inset 0 0 0 1px var(--line)}
.mo-tag::before{content:"";width:8px;height:8px;border-radius:1px;background:var(--stone)}
.mo-tag-brass{color:var(--brass-strong)} .mo-tag-brass::before{background:var(--brass)}
.mo-tag-teal{color:var(--teal-strong)} .mo-tag-teal::before{background:var(--teal);border-radius:50%}
.mo-tag-flag{color:var(--flag-strong)} .mo-tag-flag::before{background:var(--flag);clip-path:polygon(0 0,100% 0,0 100%)}
.mo-tile{position:relative;background:var(--surface-raised);border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px var(--line);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.mo-tile.is-key{background:var(--brass);box-shadow:none;color:var(--on-brass)}
.mo-tile.is-flagged::after{content:"";position:absolute;top:0;right:0;width:14px;height:14px;background:var(--flag);clip-path:polygon(0 0,100% 0,100% 100%)}
.mo-tile-head{display:flex;justify-content:space-between;gap:var(--space-2);font-family:var(--font-mono);font-size:11px;line-height:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.mo-tile.is-key .mo-tile-head,.mo-tile.is-key .mo-tile-foot{color:var(--on-brass)}
.mo-tile-value{font-family:var(--font-serif);font-weight:500;font-size:48px;line-height:52px;letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums;color:var(--ink)}
.mo-tile-foot{font-family:var(--font-serif);font-size:15px;line-height:22px;color:var(--ink-muted);display:flex;align-items:center;gap:6px}
.mo-tile-foot .live{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.mo-tile.is-key .mo-tile-value{color:var(--on-brass)}
.mo-btn-quiet:hover{text-decoration-color:currentColor}
/* Tile-assembly fade: 40 ms stagger; set style="--i:N" on each child */
.mo-assemble>*{opacity:0;animation:mo-in .4s ease forwards;animation-delay:calc(var(--i,0) * 40ms)}
@keyframes mo-in{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.mo-assemble>*{opacity:1;animation:none}}