/* ===========================================================================
   THE PUBLIC SITE, dressed in the shell.  TEST LAYER.

   One adapter for all twenty public pages, because they already share a
   vocabulary even though each carries its own inline <style>: nav-links,
   nav-cta, btn-primary, btn-ghost, callout, related-card, comparison-table,
   cta-form, hag-hero, coven-* and the footer are defined the same way on every
   one of them. That is what makes a single file possible here where the app
   pages each needed their own.

   TO REVERT: delete the two <link> tags from the page, just after </style>.
   Originals in _private (never upload)/backups/pre-ui-20261009-164506/.

   The rule is the same as the app pages: flat fills, one-pixel metal lines
   seated on black, brass for the one thing that matters on a screen, and
   square. The art on these pages is the colour; the furniture is not.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   NAVIGATION.
   --------------------------------------------------------------------------- */
.nav-links > li > a { color: var(--rv-text-dim); }
.nav-links > li > a:hover,
.nav-links > li > a.on { color: var(--rv-brass-400); }

.nav-dropdown {
  background: var(--p-panel);
  border: 1px solid var(--p-line);
  box-shadow: 0 0 0 1px var(--p-seat), 0 10px 26px -12px #000;
}
.nav-dropdown a { color: var(--rv-text-dim); }
.nav-dropdown a:hover { color: var(--rv-brass-400); background: var(--p-face); }

/* the one red thing in the chrome stays red: it is the call to action, and on
   a page this neutral a single saturated control is the whole point */
.nav-cta, .btn-primary {
  background: var(--rv-ember-500);
  border: 1px solid var(--p-seat);
  color: #f3ece2;
}
.nav-cta:hover, .btn-primary:hover { background: var(--rv-ember-400); }

.btn-ghost {
  background: var(--p-face);
  border: 1px solid var(--p-line);
  color: var(--rv-text-dim);
}
.btn-ghost:hover { background: var(--p-face-hi); color: var(--rv-brass-400); }

/* ---------------------------------------------------------------------------
   PANELS, CARDS AND CALLOUTS. Flat face, thin line, black seat: the same three
   rules the play sheet uses, so the site and the tools look like one product.
   --------------------------------------------------------------------------- */
.callout,
.related-card,
.coven-teaser,
.coven-step,
.inline-cta,
.article-cta,
.placeholder-art {
  background: var(--p-face);
  border: 1px solid var(--p-line);
  box-shadow: 0 0 0 1px var(--p-seat);
}
.related-card:hover,
.coven-step:hover { background: var(--p-face-hi); }

/* a callout earns the brass edge; it is the pulled-out thing on the page */
.callout { border-left: 3px solid var(--rv-brass-500); }

/* ---------------------------------------------------------------------------
   TABLES.
   --------------------------------------------------------------------------- */
.comparison-table { border: 1px solid var(--p-line); }
.comparison-table th {
  background: var(--p-face-hi);
  color: var(--rv-brass-400);
  border-bottom: 1px solid var(--p-line);
}
.comparison-table td { border-top: 1px solid rgba(129, 129, 138, .14); }
.comparison-table tr:hover td { background: var(--p-face); }

/* ---------------------------------------------------------------------------
   FORMS.
   --------------------------------------------------------------------------- */
.cta-form input,
.cta-form select,
.cta-form textarea,
input[type="email"],
input[type="text"] {
  background: var(--p-panel);
  border: 1px solid var(--p-line);
  color: var(--rv-text);
}
.cta-form input:focus,
input[type="email"]:focus,
input[type="text"]:focus {
  outline: none;
  border-color: var(--rv-brass-500);
}

/* dropdown arrows in brass, as on the creator: a <select> cannot carry a
   pseudo-element so the arrow is its only place to say "this opens" */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-color: var(--p-face);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9a45f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  border: 1px solid var(--p-line);
  color: var(--rv-text);
}

/* ---------------------------------------------------------------------------
   SECTION HEADINGS get the same thin rule with brass end studs as the sheet.
   --------------------------------------------------------------------------- */
.section-title,
.abilities-header {
  position: relative;
  border-bottom: 0;
  padding-bottom: 9px;
  color: var(--rv-text);
}
.section-title::after,
.abilities-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background:
    linear-gradient(var(--rv-brass-500), var(--rv-brass-500)) left  center / 6px 2px no-repeat,
    linear-gradient(var(--rv-brass-500), var(--rv-brass-500)) right center / 6px 2px no-repeat,
    var(--p-line);
}

/* ---------------------------------------------------------------------------
   THE FOOTER.

   The candle ledge from rollevil-ui.css is FIXED to the viewport foot, and
   these pages have a real footer of their own with links in it. Two footers at
   the bottom of the screen is one too many, so the ledge is suppressed on the
   site and the page's own footer gets the stone treatment instead. It stays on
   the app pages, which have no footer to compete with it.
   --------------------------------------------------------------------------- */
body::after { display: none; }
body { padding-bottom: 0; }

.site-footer, footer {
  background: var(--p-panel);
  border-top: 1px solid var(--p-line);
  box-shadow: 0 -1px 0 0 var(--p-seat);
}
.site-footer a, footer a { color: var(--rv-text-dim); }
.site-footer a:hover, footer a:hover { color: var(--rv-brass-400); }

/* ===========================================================================
   THE CLASS PAGE: each class is its own room.

   Chan, 10 Oct: under the banner a bar with candles, chains running down the
   sides, a footer at the end of the class, then the next class starts the same
   way.

   So an <article class="cls"> is enclosed on three sides:
     top    the rod with a candle at each end, standing at the banner's foot
     sides  the chains, as the left and right edge runs of ui_frame_chain
     bottom the stone ledge, the same three pieces as the page footer

   The sides are a border-image with width 0 on the top and bottom, so only the
   two edge runs draw and the corners never appear. That is what lets the room
   be any height without the masonry corners showing up where they are not
   wanted.
   =========================================================================== */
.cls {
  position: relative;
  border-top: 0;
  border-bottom: 0;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-image-slice: 72;
  border-image-width: 0 22px;
  border-image-repeat: round;
  border-image-source: image-set(
    url("images/ui/ui_frame_chain.webp?v=20261014b") type("image/webp"),
    url("images/ui/ui_frame_chain.png?v=20261014b") type("image/png"));
  /* breathing room: the text was running right up against the chains.
     --cls-gap is the inset from the chain's inner edge, and the banner and the
     ledge both cancel it with a negative margin so only the TEXT is inset. */
  --cls-gap: clamp(18px, 3vw, 34px);
  padding: 34px var(--cls-gap) 0;
}

/* THE BANNER RUNS FREE.

   Chan, 10 Oct: "remove chains from the segment of the banner, it should be
   free". The chains are a border on .cls, so they run its whole height,
   including alongside the picture.

   Rather than split the article in two, the banner escapes the border box with
   a negative margin equal to the border plus the gap. Descendant content paints
   above its parent's border, so the picture simply covers the chains for its
   own height and they resume below it. The candle bar then marks where they
   start. */
.cls-art {
  position: relative;
  overflow: visible;
  border: 0;
  margin-left: calc(-22px - var(--cls-gap));
  margin-right: calc(-22px - var(--cls-gap));
}
.cls-art::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 78px;
  pointer-events: none;
  z-index: 2;
  background-image:
    image-set(url("images/ui/ui_candles_left.webp?v=20261014b") type("image/webp"),
              url("images/ui/ui_candles_left.png?v=20261014b") type("image/png")),
    image-set(url("images/ui/ui_candles_right.webp?v=20261014b") type("image/webp"),
              url("images/ui/ui_candles_right.png?v=20261014b") type("image/png")),
    image-set(url("images/ui/ui_bar_rod.webp?v=20261014b") type("image/webp"),
              url("images/ui/ui_bar_rod.png?v=20261014b") type("image/png"));
  background-position: left 14px bottom 9px, right 14px bottom 9px, left bottom;
  background-size: auto 62px, auto 62px, 100% 11px;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

/* the ledge that closes the class off before the next one starts */
.cls::after {
  content: '';
  display: block;
  height: clamp(96px, 13vw, 168px);
  margin: 34px calc(-22px - var(--cls-gap)) 0;
  pointer-events: none;
  background-image:
    image-set(url("images/ui/ui_footer_left.webp?v=20261014b") type("image/webp"),
              url("images/ui/ui_footer_left.png?v=20261014b") type("image/png")),
    image-set(url("images/ui/ui_footer_right.webp?v=20261014b") type("image/webp"),
              url("images/ui/ui_footer_right.png?v=20261014b") type("image/png")),
    image-set(url("images/ui/ui_footer_mid.webp?v=20261014b") type("image/webp"),
              url("images/ui/ui_footer_mid.png?v=20261014b") type("image/png"));
  background-position: left bottom, right bottom, left bottom;
  background-size: auto 100%, auto 100%, auto 100%;
  background-repeat: no-repeat, no-repeat, repeat-x;
}

/* ---------------------------------------------------------------------------
   SUBCLASS CARDS wear the crown, concentric with their accent, exactly as the
   hag cards do. The accent is drawn INSIDE the crown rather than left as a
   border, so the stud sits over it and the colour drops from the stud's centre
   instead of running up behind it.

   Geometry in border-box pixels (border-left 3, border-top 1):
     element origin  x -7, y -6   -> left -10px, top -7px
     stud    x -7..10   y -6..11   centre (1.5, 2.5)
     accent  x 0..3     from y 2.5 down
     rod     x 1.5..right  y -3..8   covers the top border
   --------------------------------------------------------------------------- */
.sub {
  position: relative;
  overflow: visible;
  background: var(--p-face);
  border: 1px solid var(--p-line);
  border-left: 3px solid transparent;
  border-top-color: transparent;
  box-shadow: 0 0 0 1px var(--p-seat);
}
.sub::after {
  content: '';
  position: absolute;
  top: -7px;
  bottom: 0;
  left: -10px;
  right: 0;
  pointer-events: none;
  z-index: 3;
  background-image:
    image-set(url("images/ui/ui_stud_diamond.webp?v=20261014b") type("image/webp"),
              url("images/ui/ui_stud_diamond.png?v=20261014b") type("image/png")),
    linear-gradient(var(--ac, var(--rv-brass-500)), var(--ac, var(--rv-brass-500))),
    image-set(url("images/ui/ui_bar_rod.webp?v=20261014b") type("image/webp"),
              url("images/ui/ui_bar_rod.png?v=20261014b") type("image/png"));
  background-position: 0 0, 7px 8.5px, 8.5px 3px;
  background-size: 17px 17px, 3px calc(100% - 8.5px), calc(100% - 8.5px) 11px;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
.sub h3 { color: var(--rv-text); }
.sub p { color: var(--rv-text-dim); }

/* on a phone the chains would eat a third of the line length */
@media (max-width: 720px) {
  .cls {
    border-left-width: 11px;
    border-right-width: 11px;
    border-image-width: 0 11px;
    --cls-gap: 12px;
  }
  .cls-art {
    margin-left: calc(-11px - var(--cls-gap));
    margin-right: calc(-11px - var(--cls-gap));
  }
  .cls::after { margin: 26px calc(-11px - var(--cls-gap)) 0; }
}