/* =========================================================================
   Layers
   The shapes, images and text a user drags onto their own page. Loaded by
   every theme, and by the studio canvas on top of it.

   Geometry is percentages of the zone a layer sits in, and type is sized in
   container-query units of the same box, so a decoration keeps its place and
   its proportions at every screen width without one media query — and keeps
   them when the user changes template.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Zones
   A zone is an overlay the size of the section it was dropped into, so the
   section has to be a positioned box. Nothing in the four bundled themes
   depends on those sections being static — every absolutely positioned piece
   already has a nearer relative parent of its own.
   ------------------------------------------------------------------------- */
:is(section, header, footer, article, aside, div):has(> .bl-zone) { position: relative; }

.bl-zone {
    position: absolute;
    inset: 0;

    /* Makes this the containing block for the layers inside it, and the
       reference box for their `cqw` type sizes. */
    container-type: inline-size;

    /* Decorations are decorations: they never eat a click meant for the page.
       Layers that carry a link switch this back on for themselves. */
    pointer-events: none;

    /* Bleeding a shape off the edge of a section is a thing the geometry
       deliberately allows — x and w are held a little outside 0–100 for exactly
       that. What it must not do is make the page wider: a decoration hanging
       past the right edge added its overhang to the document, and the whole
       page could be dragged sideways to look at empty paper. `html` carries
       `overflow-x: clip` already and does not stop this, because the layer's
       containing block is the section, not the document.

       `clip` rather than `hidden`: hidden would make this a scroll container,
       and a scroll container between a sticky header and the viewport stops it
       sticking. Both axes, because clipping one and leaving the other visible
       makes the visible one `auto` — which is a scrollbar down the side of
       every decorated section.

       This applies in the studio too, so what is being arranged is what gets
       published. A layer dragged so far out that none of it is left to grab is
       still in the Layers tab, which is where it can be selected and brought
       back. */
    overflow: clip;
}

/* Behind the words, and in front of them. */
.bl-zone--back  { z-index: 0; }
.bl-zone--front { z-index: 12; }

/* Only when something is actually parked behind the content does the content
   need lifting over it — so a page that never used the feature is untouched.

   `:not(.bl-zone)` is load-bearing. The front zone is a following sibling of
   the back one, so without it this rule caught the front zone too and made it
   `position: relative` — which strips the meaning from its own `inset: 0` and
   collapses it to nothing, because everything inside it is absolutely
   positioned. A zero-height zone is a zone you cannot draw in: the studio sizes
   a new shape as a percentage of it, and every percentage of zero is zero. The
   shape was created, added to the document and saved; it simply had no height,
   which looks exactly like the tool being broken.

   Nobody hit it for as long as back layers were something you had to go and
   make yourself. The first theme to ship its own decorations put one behind
   every section, and the drawing tools stopped working. */
.bl-zone--back:not(:empty) ~ *:not(.bl-zone) { position: relative; z-index: 1; }

/* -------------------------------------------------------------------------
   A layer
   ------------------------------------------------------------------------- */
.bl-layer {
    position: absolute;
    left: var(--x, 0%);
    top: var(--y, 0%);
    width: var(--w, 20%);
    height: var(--h, auto);
    transform: rotate(var(--rot, 0deg));
    transform-origin: 50% 50%;
    opacity: var(--op, 1);
    pointer-events: none;
}

/* The house shadow: hard, offset, no blur. drop-shadow rather than box-shadow
   so it follows the silhouette of a star or an arrow, not its bounding box. */
.bl-layer.is-shadow { filter: drop-shadow(6px 6px 0 var(--ink)); }

/* A layer whose shape is pinned — pictures, since the fix. Its height is a
   consequence of its width and the stored ratio, never a percentage of the
   section: a section is as tall as its content, which does not scale with the
   viewport, and a photo sized against it keeps changing shape between the
   studio, the preview and a phone. */
.bl-layer--fixed {
    height: auto;
    aspect-ratio: var(--ar, 1);
}

/* -------------------------------------------------------------------------
   Shapes
   ------------------------------------------------------------------------- */
.bl-layer__svg {
    display: block;
    width: 100%;
    height: 100%;

    /* A stroke sits astride the path, so half of it falls outside the box. */
    overflow: visible;
}

/* Stretching a 0–100 viewBox to an arbitrary rectangle would stretch the
   outline with it. This keeps every edge the same weight. */
.bl-layer__svg > * { vector-effect: non-scaling-stroke; }

/* -------------------------------------------------------------------------
   Images
   ------------------------------------------------------------------------- */
.bl-layer--image {
    overflow: hidden;
    border: var(--sw, 0px) solid var(--stroke, transparent);
    border-radius: var(--radius, 0%);
    background: var(--paper-2);
}

.bl-layer__img {
    width: 100%;
    height: 100%;
    object-fit: var(--fit, cover);
}

/* An image layer with nothing chosen yet. */
.bl-layer__gap {
    display: block;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(
            45deg,
            transparent 0 10px,
            rgba(20, 18, 16, 0.14) 10px 20px
        );
}

/* -------------------------------------------------------------------------
   Text
   ------------------------------------------------------------------------- */
.bl-layer--text {
    /* Proportional to the section width, with a floor so a caption on a phone
       never falls below something you can read. */
    font-size: max(11px, calc(var(--size, 4) * 1cqw));
    font-weight: var(--weight, 900);
    line-height: 1.08;
    color: var(--color, currentColor);
    text-wrap: balance;
}

.bl-text--display { font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; }
.bl-text--body    { font-family: var(--font-body); line-height: 1.35; }
.bl-text--serif   { font-family: var(--font-serif); line-height: 1.3; }
.bl-text--mono    { font-family: var(--font-mono); letter-spacing: -0.02em; }

.bl-text--left   { text-align: left; }
.bl-text--center { text-align: center; }
.bl-text--right  { text-align: right; }

/* -------------------------------------------------------------------------
   A layer someone linked
   ------------------------------------------------------------------------- */
.bl-layer__link { pointer-events: auto; }
.bl-layer__link > .bl-layer { pointer-events: auto; cursor: pointer; }

/* -------------------------------------------------------------------------
   Stranded layers
   Only ever drawn in the studio: work pinned to a part of the page the current
   template does not have. Better to show it and say so than to quietly lose it.
   ------------------------------------------------------------------------- */
.bl-orphan {
    position: relative;
    min-height: 44vh;
    padding: 1.5rem 0 0;
    border-top: 4px dashed var(--ink);
    background:
        repeating-linear-gradient(
            -45deg,
            transparent 0 14px,
            rgba(20, 18, 16, 0.05) 14px 28px
        );
}

.bl-orphan__note {
    position: relative;
    z-index: 30;
    width: min(100% - 2.5rem, 42rem);
    margin-inline: auto;
    padding: 0.7rem 0.9rem;
    background: var(--yellow);
    border: var(--border);
    box-shadow: var(--sh-sm);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: none;
}