/* Data sculptures (/gifts/data/). Builds on the Map Art Studio layout
   (/art/art.css): the model sits on the same green cutting mat. */

.dts-stage { --cm: 20px; }
.dts-stage[data-mode="3d"] .dts-3d { display: block; }
.dts-flat, .dts-table { display: none; position: absolute; inset: 0; }
.dts-stage[data-mode="flat"] .dts-flat { display: flex; align-items: center; justify-content: center; padding: 24px; }
.dts-flat svg { width: 100%; height: 100%; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.45)); }
.dts-stage[data-mode="table"] { background: var(--panel); background-image: none; }
.dts-stage[data-mode="table"] .dts-table { display: block; overflow: auto; padding: 14px 16px; }
.ats-stage.is-loading .dts-3d canvas { opacity: 0.75; transition: opacity 0.3s; }

/* table view */
.dts-table table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.dts-table th, .dts-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.dts-table td.num, .dts-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.dts-table th { position: sticky; top: -14px; background: var(--panel); color: var(--muted); font-weight: 600; cursor: pointer; user-select: none; }
.dts-table th[aria-sort="ascending"]::after { content: ' ▲'; font-size: 0.7em; }
.dts-table th[aria-sort="descending"]::after { content: ' ▼'; font-size: 0.7em; }
.dts-table td i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.dts-table .is-nd td { color: var(--muted); }
.dts-table h3 { font-size: 0.95rem; margin: 18px 0 8px; }
.dts-table p { color: var(--muted); font-size: 0.85rem; margin: 0 0 8px; }

/* data input */
.dts-mt { margin-top: 12px; }
.dts-mt0 { margin-top: 0; }
.dts-mt-rg { margin-top: 0; }
.dts .ats-sec .ats-seg + .dts-mt-rg { margin-top: 12px; }
.dts-own { margin: 4px 0 6px; }
.dts-own textarea {
    width: 100%; min-width: 0; box-sizing: border-box; resize: vertical; background: var(--field); color: var(--ink);
    border: 1px solid transparent; border-radius: 8px; padding: 8px 10px; font: 0.8rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; margin-top: 8px;
}
.dts-own textarea:focus { outline: none; border-color: var(--accent); }
.dts-filerow { display: flex; gap: 8px; margin: 8px 0 4px; flex-wrap: wrap; }
.dts-file { position: relative; overflow: hidden; }
.dts-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dts-file:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.dts-cols { margin-top: 10px; }
.dts-match { margin: 10px 0 0; font-size: 0.84rem; line-height: 1.45; }
.dts-match p { margin: 0 0 6px; }
.dts-match .is-ok { color: #8fd6a8; }
.dts-match .is-bad { color: #ffb36b; }
.dts-match details { margin: 4px 0; color: var(--muted); }
.dts-match summary { cursor: pointer; color: var(--ink); }
.dts-match ul { margin: 6px 0 0; padding-left: 1.1rem; max-height: 160px; overflow: auto; font-size: 0.8rem; }
.dts-private { margin-top: 12px; }
.dts-private strong { color: var(--ink); font-weight: 600; }
.dts-ex i { background: var(--b); }

/* palettes and classes */
.dts-pals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 12px 0 10px; }
.dts-pal {
    display: flex; flex-direction: column; gap: 5px; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent;
    background: var(--field); color: var(--muted); font: inherit; font-size: 0.8rem; cursor: pointer; text-align: left;
}
.dts-pal:hover { color: var(--ink); }
.dts-pal[aria-pressed="true"] { color: var(--ink); border-color: var(--accent); font-weight: 600; }
.dts-pal i { display: block; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.dts-pal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dts-classes .ats-layer-name small { color: var(--muted); font-size: 0.78rem; margin-left: 4px; }
.dts .ats-layer input[type="color"] { flex: none; }
.dts-license a { color: var(--ink); }
.dts .ats-dl + .ats-dl { margin-top: 8px; }

@media (max-width: 900px) {
    .dts-stage { padding: 0; }
    .dts-3d, .dts-flat, .dts-table { position: relative; inset: auto; height: 420px; }
    .dts-stage[data-mode="flat"] .dts-flat { padding: 14px; box-sizing: border-box; }
}
@media (max-width: 420px) {
    .dts-pals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dts .ats-row2 { grid-template-columns: 1fr; gap: 0; }
    .dts-3d, .dts-flat, .dts-table { height: 340px; }
}

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