/* Run 28c (KRT-1): the ONE design-object card — <x-ds.card>, rendered by
   DesignObjectPreview::card(). Design hub, design library and delete sidebar
   (KRT-1), styling picker (KRT-2) and node panel (KRT-3) load this file.
   Grids (DesignObjectPreview::gridClass()), the card frame, the ground per
   data-tile-bg (DesignObjectPreview::tileGround(), r.308–313) and the tile
   internals of DesignObjectPreview::render(). Colours only via tokens. */

/* ── Grids ─────────────────────────────────────────────────────────── */
.ds-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 15px;
}
.ds-cards-colors { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
/* Nafix 28c (N-10): minmax(0, …) so a long title sample never widens the row past the panel. */
.ds-cards-rows { grid-template-columns: minmax(0, 1fr); }
/* Library title/text styles: one column, plate above, title below (G2). */
.ds-cards-stack { grid-template-columns: minmax(0, 1fr); }

/* ── Card ──────────────────────────────────────────────────────────── */
/* isolation: every card is its own stacking context, so the primary dot and
   the layout labels never paint over a sticky toolbar (r.254). */
.ds-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--sc-color-panel-bg);
    border: 1px solid var(--sc-color-border);
    border-radius: 6px;
    transition: transform .12s ease, border-color .12s ease;
}
.ds-card:hover {
    transform: translateY(-1px);
    border-color: var(--sc-color-border-strong);
}
.ds-card-main { cursor: pointer; flex: 1; }
.ds-card-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 84px;
    padding: 10px;
    overflow: hidden;
    border-bottom: 1px solid var(--sc-color-border);
}

/* Ground: theme = black in dark, white in light; light/dark are the
   theme-independent sample plates; checker only for transparency. */
.ds-card-visual,
[data-tile-bg="theme"] .ds-card-visual {
    background: var(--sc-color-tile-ground);
    color: var(--sc-color-tile-ink);
    --np-sample-ink: var(--sc-color-tile-ink);
}
[data-tile-bg="light"] .ds-card-visual {
    background: var(--sc-color-sample-light);
    color: var(--sc-color-sample-dark);
    --np-sample-ink: var(--sc-color-sample-dark);
}
[data-tile-bg="dark"] .ds-card-visual {
    background: var(--sc-color-sample-dark);
    color: var(--sc-color-sample-light);
    --np-sample-ink: var(--sc-color-sample-light);
}
[data-tile-bg="checker"] .ds-card-visual {
    background: repeating-conic-gradient(var(--sc-checker-a) 0% 25%, var(--sc-checker-b) 0% 50%) 0 0 / 16px 16px;
    color: var(--sc-color-text);
    --np-sample-ink: var(--sc-color-text);
}
/* Fix 28c (krt-02): a sample inside a hub card follows the card ground, not its own plate.
   Nafix 28c (N-2): --np-sample-ink above feeds the !important ink of .np-sample--text
   (np-cardgrid.css), so a light ground gets dark ink and a dark ground light ink. */
.ds-card-visual > .np-sample { background: none; color: inherit; }

/* Title left, usage right, the sub line on its own row (r140). */
.ds-card-body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    padding: 10px 12px;
}
.ds-card-body > .siteclick-title-6 { flex: 1 1 auto; min-width: 0; }
.ds-card-sub {
    display: block;
    flex: 0 0 100%;
    overflow: hidden;
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0.6;
}

/* The default color of a title/text style as a dot behind the title. */
.ds-card-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 4px 0 6px;
    border-radius: var(--sc-radius-full);
    box-shadow: inset 0 0 0 1px var(--sc-color-border);
    vertical-align: baseline;
}

/* Usage count: plain text next to the title, on hover only. */
.ds-card-usage {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--sc-color-text-muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .12s ease;
}
/* Cards without a body: the count sits in the bottom-right corner. */
.ds-card-main > .ds-card-usage {
    position: absolute;
    right: 8px;
    bottom: 6px;
    margin-left: 0;
}
.ds-card:hover .ds-card-usage,
.ds-card:focus-within .ds-card-usage { opacity: 1; }

/* Primary: a dot on the card (r140). */
.ds-card-primary {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 1;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sc-color-primary);
    box-shadow: 0 0 0 2px var(--sc-color-panel-bg);
    pointer-events: none;
}

/* ── Grid variants ─────────────────────────────────────────────────── */
/* Colors: a round swatch next to the hex. */
.ds-cards-colors .ds-card { flex-direction: row; align-items: center; }
.ds-cards-colors .ds-card-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px;
}
.ds-cards-colors .ds-card-visual {
    flex: 0 0 auto;
    height: auto;
    padding: 0;
    border-bottom: 0;
    border-radius: 50%;
}
.ds-cards-colors .ds-card:not([data-tile-bg="checker"]) .ds-card-visual { background: none; }
.ds-cards-colors .ds-card-visual-swatch {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    /* Fix31 (A95): a 1 px ring, so #000 on a dark card and #FFF on a light one stay visible. */
    box-shadow: inset 0 0 0 1px var(--sc-color-border-strong);
}
.ds-cards-colors .ds-card-body { padding: 0; min-width: 0; }

/* Title/text rows: name left, sample right (DOM: visual first). */
.ds-cards-rows .ds-card { flex-direction: row; align-items: center; }
.ds-cards-rows .ds-card-main {
    display: flex;
    flex: 1;
    flex-direction: row-reverse;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.ds-cards-rows .ds-card-visual {
    flex: 1;
    justify-content: flex-start;
    min-width: 0;
    height: auto;
    min-height: 58px;
    padding: 10px 16px;
    border-bottom: 0;
}
.ds-cards-rows .ds-card-visual:has(.ds-card-visual-typo-text) { min-height: 0; }
.ds-cards-rows .ds-card-body { flex: 0 1 200px; min-width: 0; }

/* Stacked title/text cards: the plate grows with the sample. */
.ds-cards-stack .ds-card-visual {
    justify-content: flex-start;
    height: auto;
    min-height: 84px;
}

/* Layout visuals (layout-visual.css draws them): square, centred, own ground. */
.ds-card-visual:has(.ds-lv) {
    height: 84px;
    padding: 8px;
    border-bottom: 0;
    background: none;
}
.ds-card-visual .ds-lv {
    width: auto;
    height: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    overflow: visible;
}
.ds-card-visual .ds-lv-label { font-size: 10px; padding: 0 3px; }
.ds-card-visual .ds-lv-label-v { padding: 3px 0; }

/* ── Tile internals (DesignObjectPreview::render()) ────────────────── */
/* The scope wrapper .sc-dl-{id} carries the per-object css only. */
.sc-dl { display: contents; }

.ds-card-visual-swatch { width: 100%; height: 100%; border-radius: 4px; }
.ds-card-visual-typo {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ds-card-visual-typo-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
}
.ds-card-visual-box {
    width: 64px;
    height: 64px;
    background: var(--sc-color-sample-light);
}
.ds-card-visual-radius {
    background: var(--sc-color-primary-soft);
    border: 1px solid var(--sc-color-primary);
}
.ds-card-visual-mask {
    width: 56px;
    height: 56px;
    /* Run 29d (DSH-2, r.230): masks on a flat primary plane, like the stage. */
    background: var(--sc-color-primary);
}
.ds-card-visual-filter {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    background: var(--np-sample-photo, url('../../images/design/sample-photo.jpg') center / cover no-repeat);
}
.ds-card-visual-ratio {
    display: block;
    max-width: 56px;
    max-height: 56px;
    margin: 0 auto;
}
.ds-card-visual-easing { width: 100%; height: 100%; overflow: visible; }
.ds-card-visual-easing line { stroke: var(--sc-color-border-strong); stroke-width: 1; }
.ds-card-visual-easing path { fill: none; stroke: var(--sc-color-blue); stroke-width: 4; }

/* List: the real WYSIWYG markup (ul > li) with its token class; the base
   rules in :where() so the token css always wins. The site's primary text
   size keeps the px bullets in their page ratio (M15-1c). */
.ds-card-visual-list {
    width: 100%;
    padding: 4px 10px;
    font-size: var(--sc-dl-list-fs, 11px);
    line-height: 1.5;
    text-align: left;
}
:where(.ds-card-visual-list) ul {
    list-style: none;
    margin: 0;
    padding: 0 0 0 var(--sc-list-indent, 0px);
}
:where(.ds-card-visual-list) ul > li {
    position: static;
    padding-left: var(--sc-list-pad, 20px);
    text-indent: calc(-1 * var(--sc-list-pad, 20px));
}
:where(.ds-card-visual-list) ul > li::before {
    content: "";
    display: inline-block;
    width: var(--sc-list-w, 10px);
    height: var(--sc-list-h, 10px);
    margin-right: calc(var(--sc-list-pad, 20px) - var(--sc-list-w, 10px));
    vertical-align: middle;
    background-color: var(--sc-list-bullet, currentColor);
    border-radius: var(--sc-list-r, 50%);
}

/* Slider navigation: the .slnav-{n} rules set the look, these only the layout. */
.ds-card-visual-arrows { display: flex; align-items: center; gap: 10px; }
.ds-card-visual-arrows > span { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ds-card-visual-dots { display: flex; align-items: center; }
.ds-card-visual-dots-center { justify-content: center; }
.ds-card-visual-dots > span { display: inline-block; }
.ds-card-visual-slnav { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.ds-card-visual-slnav > .ds-card-visual-arrows { justify-content: center; }
.ds-card-visual-dots.sc-slider-dots { gap: var(--sc-sld-gap, 8px); }
.ds-card-visual-slnav > .sc-slider-progress { display: block; overflow: hidden; }
.ds-card-visual-slnav .sc-slider-progress-bar { display: block; width: 40%; height: 100%; }

/* Button (run 32a, BTN-1): the card is the stage in card mode, an iframe that
   fills the plate; the plate stays the ground (the frame is transparent). */
.ds-card-visual .sc-dl-btn { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; background: transparent; }

/* Timing: the values are the tile. */
.sc-dl-timing {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* Form: one field row + one checkbox, scaled to the tile; colours, borders
   and typography come from the generated .form-new-{id} rules. */
.sc-dl-form-in {
    flex: none;
    width: 210px;
    font-size: 11px;
    line-height: 1.2;
    text-align: left;
    transform: scale(0.5);
}
.sc-dl-form-in .form-text-in { position: relative; }
.sc-dl-form-in .form-text-in .label {
    position: absolute;
    top: 0;
    left: 1rem;
    line-height: 0.7em;
    font-size: 0.7em;
}
.sc-dl-form-in .form-text-in input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid;
    background: var(--sc-color-sample-light);
    padding: 1.6rem 1rem 0.6rem;
    font: inherit;
    outline: none;
}
.sc-dl-form-in .form-check {
    display: block;
    position: relative;
    padding: 5px 0 0 34px;
    min-height: 20px;
    margin-top: 8px;
}
.sc-dl-form-in .form-check input { position: absolute; opacity: 0; height: 0; width: 0; }
.sc-dl-form-in .form-checkmark {
    position: absolute;
    top: 50%;
    left: 0;
    height: 20px;
    width: 20px;
    border: 2px solid;
    border-radius: 2px;
    transform: translate(0, -50%);
}
.sc-dl-form-in .form-checkmark::after {
    content: " ";
    position: absolute;
    left: 50%;
    top: 2px;
    width: 5px;
    height: 10px;
    margin-left: -3px;
    border: solid var(--sc-color-sample-light);
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
/* Run 39a (MSC-3, H8.1): fallback for LastPass builds that ignore data-lpignore. */
.sc-dl-form-in [data-lastpass-icon-root],
.sc-dl-form-in [data-lastpass-root] { display: none !important; }

/* Font decoration: the declarations sit inline on the sample text. */
.ds-card-visual-fd {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* Videoplayer: a mini player in the colours of the object. */
.ds-card-visual-vp {
    position: relative;
    width: 112px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--sc-color-dark-soft), var(--sc-color-black));
}
.ds-card-visual-vp-play {
    position: absolute;
    top: 42%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.ds-card-visual-vp-play svg { width: 100%; height: 100%; }
.ds-card-visual-vp-bar {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 12px;
}
.ds-card-visual-vp-progress {
    position: absolute;
    top: 5px;
    left: 6px;
    width: 45%;
    height: 2px;
    border-radius: 1px;
}

/* ── Timing (run 29d, DSH-2, r.226–228) ────────────────────────────────
   The one Timing card (DesignObjectPreview::timingTile()) in hub, library,
   picker and panel: track over the full width, the block clipped to the
   track, the two label lines below. The card grows with its content. */
.ds-card-visual:has(.np-sample--timing) {
    height: auto;
    min-height: 84px;
}
.ds-card-visual .sc-dl:has(> .np-sample--timing) {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.ds-card-visual .np-sample--timing {
    position: relative;
    display: block;
    flex: none;
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    padding: 8px 12px;
    overflow: hidden;
    border-radius: var(--sc-radius-sm);
    background: var(--sc-color-surface-alt);
}
/* The block travels over the track minus its own width. */
.ds-card-visual .np-sample--timing .np-timing {
    position: relative;
    display: block;
    height: 24px;
    margin-right: 24px;
    overflow: visible;
}
.ds-card-visual .np-sample--timing .np-timing i {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    margin: 0;
    border-radius: 3px;
    background: var(--sc-color-primary);
    animation: none;
}
.sc-dl-timing {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 16px;
    max-width: 100%;
}
.sc-dl-t {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    max-width: 100%;
    white-space: normal;
    text-align: center;
}
.sc-dl-t-ico {
    flex: none;
    width: 12px;
    height: 12px;
}
.sc-dl-t.is-run {
    font-weight: 700;
    color: var(--sc-color-text-strong);
}

/* ── Styling picker (KRT-2) ────────────────────────────────────────── */
/* The picker button (.siteclick-ve-styling-card) is a bare frame around the
   card; the chosen card gets the primary ring. */
.siteclick-ve-styling-list.ds-cards .siteclick-ve-styling-card {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    box-shadow: none;
    text-align: left;
}
.siteclick-ve-styling-list.ds-cards .siteclick-ve-styling-card.is-active .ds-card {
    border-color: var(--sc-color-primary);
    box-shadow: 0 0 0 1px var(--sc-color-primary);
}