/* Coaster and tile sets (/gifts/tiles/). Builds on the Map Art Studio
   layout (/art/art.css): the set lies on the same green cutting mat. */

.tls-stage { --cm: 20px; }
.tls-sheet { position: relative; display: flex; align-items: center; justify-content: center; }
.tls-sheet canvas { display: block; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.45)); }
.ats-stage.is-loading .tls-sheet canvas { opacity: 0.72; transition: opacity 0.3s; }
.tls-stage[data-mode="3d"] .tls-sheet, .tls-stage[data-mode="laser"] .tls-sheet { display: none; }
.tls-stage[data-mode="3d"] .tls-3d { display: block; }
.tls-stage[data-mode="laser"] .ats-laser { display: block; }
.tls-poses { position: absolute; right: 12px; bottom: 12px; z-index: 2; background: rgba(20, 23, 22, 0.82); }

.tls-statusbar { display: flex; align-items: center; gap: 12px; padding-right: 14px; }
.tls-statusbar .ats-status { flex: 1; }
.tls-labels { margin: 0; font-size: 0.8rem; color: rgba(232, 244, 236, 0.7); white-space: nowrap; }

.tls-mt { margin-top: 12px; }
.tls-mt0 { margin-top: 0; }
.tls .ats-sec .ats-sub:first-of-type { margin-top: 12px; }

/* style chips */
.tls-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 12px 0 4px; }
.tls-style {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent;
    background: var(--field); color: var(--muted); font: inherit; font-size: 0.82rem; cursor: pointer; text-align: left;
}
.tls-style:hover { color: var(--ink); }
.tls-style[aria-pressed="true"] { color: var(--ink); border-color: var(--accent); font-weight: 600; }
.tls-style i {
    width: 20px; height: 20px; flex: none; border-radius: 5px;
    background: linear-gradient(135deg, var(--a) 0 40%, var(--b) 40% 52%, var(--c) 52% 76%, var(--d) 76%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.tls-style:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tls .ats-layer input[type="color"] { flex: none; }
.tls-license a { color: var(--ink); }

@media (max-width: 900px) {
    .tls-stage { padding: 20px 0; }
    .tls-stage[data-mode="3d"], .tls-stage[data-mode="laser"] { padding: 0; }
    .tls-3d { position: relative; inset: auto; height: 420px; }
}
@media (max-width: 420px) {
    .tls-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tls-statusbar { flex-wrap: wrap; padding: 0 14px 8px 0; }
}

.tls [hidden] { display: none !important; }