/* =========================================================
   mbrd - fences: a region drawn on the board, not a card lying on it.
   After items.css (same-weight selectors win by order), before
   item-chrome.css (far-zoom exemptions live beside the rules they exempt).
   Pairs with fences.ts, commands.ts and canvas/items.ts (paintStack).
   ========================================================= */

/* A fence is large — often 2000 world units — so it is an outline, not a sheet.
   No fill (a wall), no shadow (items.ts skips it), dashed edge ("drawn on").
   The face keeps .item's paper; paintStack() sinks the fence band below both
   shadow underlays so cards cast onto it. --paper-2 is the palette's well tone. */
.item[data-type="fence"] { background: var(--fence-tint, var(--paper-2)); }

/* A fence's own colour (meta.tint, the Colour row of its menu): the four note
   sheets, so a tinted region and a sticky on it come off one pad. */
.item[data-type="fence"][data-tint="1"] { --fence-tint: var(--note-1); }
.item[data-type="fence"][data-tint="2"] { --fence-tint: var(--note-2); }
.item[data-type="fence"][data-tint="3"] { --fence-tint: var(--note-3); }
.item[data-type="fence"][data-tint="4"] { --fence-tint: var(--note-4); }
.fence-card {
  background: none;
  border: 2px dashed var(--rule-2);
  border-radius: var(--radius);
  box-shadow: none;
}

/* Grain: the board's own paper texture. Same tile, blend and dials as #grain
   (base.css); size is in world units (no per-frame update needed inside the
   transform). mix-blend-mode blends against the tint only — .item's z-index
   makes it a stacking context, so tint is on .item and texture is on the card. */
.fence-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: url("../img/paper-grain.webp");
  background-repeat: repeat;
  /* 1.4x the board's 512 at full weight: a region reads as a surface, so
     coarser and heavier is the same paper held closer. */
  background-size: 717px 717px;
  mix-blend-mode: multiply;
  opacity: calc(var(--grain) * var(--grain-fade, 1));
}

/* Softish: a region becomes a cork board. Tile laid over the tint (not
   multiplied), --grain-fade fades to --cork (the tile's mean) so zooming out
   gives a cork-coloured rectangle, not a colour jump. */
:root[data-whimsy="0"] .item[data-type="fence"] { background: var(--fence-tint, var(--cork)); }
:root[data-whimsy="0"] .fence-card::after {
  background-image: url("../img/cork-board.webp");
  /* Half the grain pitch — cork has chips, and at 512 they read as a print. */
  background-size: 256px 256px;
  mix-blend-mode: normal;
  /* Half strength: scales chip contrast against --cork (the tile's own mean).
     --grain stays out (cork is not more or less cork); --grain-fade stays
     (chips below resolution fade to their mean). */
  opacity: calc(var(--grain-fade, 1) * 0.5);
}
.item[data-type="fence"].is-selected .fence-card { border-color: var(--select); }

/* Rolled up (meta.rolled): only the name bar is left, a tab that holds the
   region's place. The face, its grain and the grips go, and the cards inside
   go with it (.is-rolled-away, written by paintRolled() in canvas/items.ts).
   :root so it outranks the cork rule above on specificity's tie, by order. */
:root .item[data-type="fence"].is-rolled { background: none; }
.item[data-type="fence"].is-rolled .fence-card,
.item[data-type="fence"].is-rolled .grip { display: none; }
.item[data-type="fence"].is-rolled .item-bar {
  background: var(--fence-tint, var(--paper-2));
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
}
/* The ring would outline the whole region, which is not on screen. The bar's
   own edge takes the selection colour instead. */
.item[data-type="fence"].is-rolled.is-selected::before { border-width: 0; }
.item[data-type="fence"].is-rolled.is-selected .item-bar { border-color: var(--select); }
.item.is-rolled-away,
.item-shadow.is-rolled-away { visibility: hidden; pointer-events: none; }

/* The interior refuses the pointer so presses fall through to cards or the
   board. Without this, a fence swallows pan/marquee over its entire area.
   Must be on .item, not .item-body (which already refuses in favour of .item).
   The caption bar and resize grips opt back in with `auto`. */
.item[data-type="fence"] { pointer-events: none; }
.item[data-type="fence"] .item-bar { pointer-events: auto; }

/* No lean: a drawn line does not arrive crooked, and at 2000 units the corners
   travel visibly. `rotate` outright because tilt tokens can be set inline on
   :root, which no selector can outrank. */
.item[data-type="fence"] { rotate: 0deg; }

/* No grow on hover: a 3% scale moves the corner of a 2000-unit fence ~30px,
   pulling the border away from the cards it holds. The lift (translate) is
   identical for everybody and survives. */
.item[data-type="fence"].is-hover { --grow: 1; }

/* Label on the top edge: a caption over a region names everything below it.
   Same .item-bar every card carries, moved. */
.item[data-type="fence"] .item-bar {
  top: 0;
  bottom: auto;
  border-top: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: var(--radius) var(--radius) 0 0;
  /* Hit-area floor for unnamed fences. */
  min-height: 22px;
  cursor: grab;
}
.item[data-type="fence"].is-dragging .item-bar { cursor: grabbing; }

/* Label sized to the region via container query, not a fixed card size.
   Clamp: floor keeps small fences legible, ceiling stops enormous ones from
   setting foot-high type. Padding in em so the plate scales with the type.
   The far-zoom exemption lives beside the hide rule in item-chrome.css. */
.item[data-type="fence"] { container-type: inline-size; }
.item[data-type="fence"] .item-label {
  font-size: clamp(10.5px, 2.8cqi, 30.8px);
  padding: 0.45em 0.6em 0.5em;
  color: var(--ink);
}