/* The spread preview SVG (layouts/preview.py).

   Shared surface: the layouts and readings list pages, the reading editor's
   deck/layout pickers, and the admin list cells that layouts/layout/models_ui.py
   and readings/reading/models_ui.py render. Those last two come from a
   models_ui widget configuration rather than a widget class, which is why both
   tables declare this file through the `admin_styles` hook. */

/* --- spread preview (layouts/preview.py) --------------------------- */

/* The SVG carries a viewBox and no width/height of its own, so it has an
   intrinsic ratio and no intrinsic size: give it a box and the default
   preserveAspectRatio="xMidYMid meet" scales the drawing to fit inside it
   and centres it. Sizing the box is therefore the whole job — and it has to
   be a *definite* height. A max-height with overflow:hidden crops a tall
   spread (Card of the Day is 290x440, taller than it is wide) instead of
   shrinking it, which is what this used to do. */
.spread-preview {
    display: block;
    width: 100%;
    height: 100%;
}

/* currentColor throughout, so the placeholder tracks the theme's text
   colour instead of vanishing when Tabler switches to dark. */
.spread-preview-slot {
    fill: none;
    stroke: currentColor;
    stroke-width: 6;
    stroke-dasharray: 18 12;
    opacity: .45;
}

.spread-preview-index {
    fill: currentColor;
    opacity: .55;
    font-size: 120px;
    font-weight: 600;
}

.spread-preview .is-significator .spread-preview-slot {
    stroke-dasharray: none;
    opacity: .8;
}

/* The admin table cell. Both dimensions fixed: the column has no header to
   size it, and a wide Celtic Cross would otherwise push every other column
   off the page. */
.spread-preview-cell {
    width: 8rem;
    height: 5rem;
}

/* The list card's header. One height for every card in the grid, so the
   row lines up: a Card of the Day is a single tall card and a Celtic Cross
   is a wide block, and letterboxing both into the same box is exactly what
   keeps the list readable. */
.spread-preview-frame {
    display: block;
    height: 16rem;
    padding: .75rem;
    border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
    /* It is an <a> — the picture opens what the Open button opens — so the
       anchor's own colour and underline have to be undone, and display
       block because an inline anchor ignores the height above. */
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s ease-in-out;
}

/* The only thing that says the picture is clickable, since it carries no
   label of its own. */
.spread-preview-frame:hover,
.spread-preview-frame:focus {
    background-color: var(--tblr-bg-surface-secondary, #f1f5f9);
}

/* The cross-arm arrows, drawn only on the profile's Celtic Cross swatches
   (layouts/preview.py, deal_order). Three per swatch, chaining the four arms
   dealt 4th to 7th: the variants are the same eleven boxes in the same eleven
   places and only those four change order, so the arrows are the control's
   actual content — hence a colour of their own rather than more currentColor,
   which would blend into the slots and the numerals they run between.

   Fat on purpose: at 8rem wide a hairline is invisible, and the line has to
   be followable at a glance for the swatch to do its job. The alpha keeps
   the numbers legible underneath where a segment crosses the centre pair. */
.spread-preview-arrow {
    fill: var(--tblr-primary, #0054a6);
    stroke: var(--tblr-primary, #0054a6);
    opacity: .62;
}

.spread-preview-arrow-shaft {
    stroke-width: 36;
    stroke-linecap: round;
}

/* The head is a filled triangle, so it must not also be stroked — an
   outlined triangle at this weight reads as a diamond. */
.spread-preview-arrow-head {
    stroke: none;
}

/* The swatch's own box, rather than the admin cell it started as. A Celtic
   Cross is 1200x1640 — taller than it is wide — and the admin cell is
   landscape, so borrowing it letterboxed the drawing into half the width it
   was given and made the arrows smaller than they need to be. These are the
   spread's own proportions, so the picture fills the box. */
.celtic-swatch-preview {
    width: 6.5rem;
    height: 8.9rem;
    margin: 0 auto;
}