.chiosa-bed {
  display: inline;
}

.chiosa-bed:has(.chiosa-copy:not(:empty)) .chiosa-item {
  color: inherit;
  text-decoration: underline dotted rgba(25, 23, 20, 0.5999);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: help;
  transition: text-decoration-color 120ms linear;
}

.chiosa-bed:has(.chiosa-copy:not(:empty)) .chiosa-item:hover,
.chiosa-bed[data-chiosa-went='open'] .chiosa-item {
  text-decoration-color: rgba(25, 23, 20, 1);
}

.chiosa-bed .chiosa-copy {
  opacity: 0.7500;
}

.chiosa-bed .chiosa-copy:not(:empty)::before { content: ' (\2009'; }
.chiosa-bed .chiosa-copy:not(:empty)::after { content: '\2009)'; }

.chiosa-bed[data-chiosa-done] .chiosa-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.chiosa-bed[data-chiosa-done] .chiosa-copy::before,
.chiosa-bed[data-chiosa-done] .chiosa-copy::after { content: none; }

.chiosa-core {
  position: fixed;
  z-index: 60;
  display: block;
  box-sizing: border-box;
  max-width: min(30ch, calc(100vw - 12px * 2));
  width: max-content;
  margin: 0;
  padding: 7px 13px;
  color: #191714;
  background-color: #f4f2ec;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4500;
  text-align: left;
  hyphens: auto;
  pointer-events: none;
  transform-origin: var(--chiosa-anchorX, 50%) 0;
}

.chiosa-core[data-chiosa-flip='above'] {
  transform-origin: var(--chiosa-anchorX, 50%) 100%;
}

.chiosa-core strong,
.chiosa-core b {
  font-weight: 600;
}

.chiosa-core a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

@media print {
  .chiosa-core { display: none !important; }

  .chiosa-bed[data-chiosa-done] .chiosa-copy {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }

  .chiosa-bed[data-chiosa-done] .chiosa-copy::before { content: ' (\2009'; }
  .chiosa-bed[data-chiosa-done] .chiosa-copy::after { content: '\2009)'; }
}

.chiosa-core {
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2797);
}

.chiosa-core::after {
  content: '';
  position: absolute;
  left: var(--chiosa-anchorX, 50%);
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background-color: inherit;
  border-radius: 0 0 3px 0;
}

.chiosa-core[data-chiosa-flip='below']::after {
  top: 0;
  transform: translateY(-45%) rotate(-135deg);
}

.chiosa-core[data-chiosa-flip='above']::after {
  bottom: 0;
  transform: translateY(45%) rotate(45deg);
}

/* progressive-reveal/index — mechanics and the fold cue, without the chrome.
   The recipe styles each row as a tinted rounded card with a border, which is a
   look; this register's rows ARE the site's leader-dot entries and that look was
   overwriting them. What is kept is what the widget needs to work: `hidden` means
   absent, the rail is the grid the register already declares, the control only
   exists once the script has mounted, and the print rule puts the folded tail
   back. The `edge-brace` cue stays but is redrawn as the register's own rule
   rather than a floating chevron. */

.falda-stage .falda-rail {
  position: relative;
}

.falda-pip[hidden] {
  display: none;
}

.falda-stage.falda-sorting .falda-rail {
  overflow: hidden;
}

/* the cut: a short rule under the last visible entry, in the ink of the sheet */
.falda-pip:has(+ .falda-pip[hidden])::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.55rem;
  height: 0;
  border-bottom: var(--filo-forte, 2px) dotted var(--inchiostro-tenue, #57524a);
  pointer-events: none;
}

.falda-stage:not([data-falda-bound]) .falda-action {
  display: none;
}

.falda-stage .falda-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--tipo-etichetta, inherit);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.15;
  margin-top: 1.5rem;
  padding: 0.6rem 1.1rem;
  color: inherit;
  background: none;
  border: var(--filo-forte, 2px) solid var(--inchiostro, #191714);
  cursor: pointer;
  transition: background-color 140ms linear, color 140ms linear;
}

.falda-stage .falda-action:hover {
  background-color: var(--inchiostro, #191714);
  color: var(--carta-piena, #f4f2ec);
}

.falda-stage .falda-action:disabled {
  cursor: default;
}

.falda-stage .falda-action:focus-visible {
  outline: var(--filo-forte, 2px) solid var(--viola, #4b2e83);
  outline-offset: 2px;
}

.falda-count {
  font-family: var(--tipo-etichetta, inherit);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--inchiostro-tenue, #57524a);
  margin: 1.2rem 0 0;
}

@media print {
  .falda-stage .falda-action { display: none; }
  .falda-stage .falda-pip[hidden] { display: block !important; }
  .falda-pip::after { display: none; }
}

/* The recipe makes the index itself sticky, which is right when the index is the
   whole side column. Here the column also carries related entries and references,
   and a sticky FIRST child stays put while its own siblings scroll up underneath
   it — the index was drawn on top of them. The stickiness moved to the column in
   tavola.css; the index is an ordinary block inside it, and the rail no longer
   needs its own scroller because the column has one. */
.filza-ground {
  position: static;
  --filza-phase: 0;
  --filza-current: 0;
  --filza-allOf: 0;
}

.filza-ground .filza-count {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.5200;
}

.filza-ground .filza-rail {
  position: relative;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  padding-inline: 8px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.filza-ground .filza-tile {
  position: relative;
}

.filza-ground .filza-meter {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  transition: transform 207ms cubic-bezier(0.16, 1, 0.3, 1), height 207ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 160ms linear;
}

.filza-ground .filza-rail:has(a[aria-current]) .filza-meter {
  opacity: 1;
}

.filza-ground .filza-tile > a {
  display: block;
  padding: 5px 10px;
  font-size: 13px;
  line-height: 1.4000;
  color: inherit;
  text-decoration: none;
  transition: color 160ms linear, opacity 160ms linear, background-color 160ms linear;
  opacity: 0.5433;
}

.filza-ground .filza-tile > a:hover {
  opacity: 1;
}

.filza-ground .filza-tile > a:focus-visible {
  outline: 2px solid rgba(25, 23, 20, 0.9);
  outline-offset: 1px;
}

.filza-ground .filza-tile > a[aria-current] {
  opacity: 1;
  color: rgba(25, 23, 20, 1);
}

.filza-ground .filza-tile::before {
  content: '';
  position: absolute;
  left: calc(10px * -0.5 - 2px);
  top: calc(5px + 13px * 1.4000 * 0.5 - 10px * 0.5);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(119, 116, 109, 0.55);
  background-color: transparent;
  transition: background-color 180ms linear, border-color 180ms linear, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.filza-ground .filza-tile:has(> a[aria-current])::before {
  background-color: rgba(25, 23, 20, 1);
  border-color: rgba(25, 23, 20, 1);
  transform: scale(1.3265);
}

.filza-ground .filza-tile > a {
  padding-inline-start: calc(10px + 10px);
}

.filza-ground .filza-meter {
  left: calc(10px * -0.5 - 2px);
  width: 10px;
  border-radius: 10px;
  background-color: rgba(25, 23, 20, 0.85);
}

@media (prefers-reduced-motion: reduce) {
  .filza-ground .filza-meter {
    transition: none;
  }
}

@media (max-width: 780px) {
  .filza-ground {
    position: static;
  }

  .filza-ground .filza-rail {
    max-height: none;
    overflow: visible;
    padding-inline: 0;
  }
}

@media print {
  .filza-ground {
    display: none;
  }
}

/* edge-draw/schematic — mechanics only.
   The recipe's own stylesheet forces `fill: none` and one stroke colour and width
   on every shape in the svg, which is right for a single line-art mark authored
   for it and wrong here: these plates are drawn by hand with deliberate fills,
   three ink weights and two accent colours, and the blanket rule flattened all of
   it to near-white on white paper. What the effect actually IS lives in the
   script — it measures each shape, dashes it to its own length and releases it on
   scroll. That works on the plates exactly as authored.
   The accent variant is dropped with the blanket: it animates a fill onto one or
   two shapes, and every shape here that carries meaning already has the fill the
   drawing wants. */

.harbour-bed {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .harbour-bed svg * {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}

/* disclose/ledger — behavioural half only.
   The recipe's own summary chrome (border, padding, cross marker) is dropped: this
   site already has a designed FAQ row in tavola.css, and two markers on one
   ::after render on top of each other. What is left is what the script needs —
   the panel has to be a box it can clip while it animates the height. */

.plica-detail {
  box-sizing: border-box;
}

.plica-well.plica-on .plica-detail {
  overflow: hidden;
  will-change: height;
}

/* The survey the sheet is pinned over. The host is fixed behind everything and
   the chart sheet is opaque, so the field is only ever seen in the ground either
   side of the paper — the lines run on under it rather than stopping at its edge.

   Hidden until there IS a ground to see: below 84rem the sheet fills the width and
   the only bands left are the 1rem strips above and below it. Not worth a canvas.
   The script reads this back — it tests getClientRects() and skips the canvas
   entirely while the host is display:none, so a phone pays nothing for the layer. */
.rilievo-fondo {
  display: none;
}

@media (min-width: 84rem) {
  .rilievo-fondo {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }
}

.rilievo-fondo .rilievo-piano {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rilievo-fondo.rilievo-attivo .rilievo-piano {
  opacity: 1;
}

/* No prefers-reduced-motion rule: the ground is drawn once and never moves, so
   there is nothing for that query to switch off. */

.thicket-bed {
  position: relative;
  overflow: clip;
  isolation: isolate;
  background-color: #eae6da;
}

.thicket-bed::after {
  content: '';
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.thicket-bed::after {
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n9'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.2484' numOctaves='5' seed='9' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n9)'/%3E%3C/svg%3E"),
    radial-gradient(140% 120% at 22% 14%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.3752) 100%);
  background-size: 220px 220px, 100% 100%;
  background-repeat: repeat, no-repeat;
  background-blend-mode: multiply;
  mix-blend-mode: soft-light;
  opacity: 0.2792;
}

.thicket-fore {
  position: relative;
  z-index: 1;
}

@media print {
  .thicket-bed::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .thicket-bed::after { animation: none; }
}