/* ============================================================================
   Vidastu — components that were in the markup with no CSS behind them.
   Added 19 October 2026.

   WHY THIS IS A SEPARATE SHEET AND NOT MORE OF cine.css
   cine.css is loaded by 260 pages. Only 54 of them carry markup for the
   classes below, and several of the other 206 already define some of these
   class names themselves, for a different component, in their own inline
   <style>. A page's inline rule wins on the properties it declares, but NOT
   on the properties it leaves out: a global note{background;border-left;
   padding} rule would have put a box around a page whose own note is one
   quiet sentence. So this sheet is linked only into the pages that need it,
   immediately after the cine.css link and before each page's own <style>, so
   a page's own rule still wins wherever it has one.

   Every value here is taken from the host's existing vocabulary — cine.css
   (src, fine, btn-ghost, faq-q, faq-a, fp-card) or the dominant inline
   convention for the same class name elsewhere on this site. No new colour,
   no token changed, no layout touched. Gold #C9A961 is the accent throughout.

   NOT STYLED, on purpose: faq-answer and faq-speak (speakable markers that
   always sit beside an already-styled answer div), q-text (a layout wrapper
   inside an already-styled summary), faqs (a bare container whose children
   are fully styled), keyfact (the host has two incompatible treatments for
   it), privnote (three synthetic /deal/ demo pages that load neither this
   sheet nor cine.css).
   ========================================================================== */

/* --- monospace figure runs ------------------------------------------------
   Matches the host's own bare mono rule. Pages that scope mono to one table
   keep their own size and colour; this supplies the face and tabular figures. */
.mono{font-family:var(--f-mono);font-size:.92em;letter-spacing:.01em;
  font-variant-numeric:tabular-nums}

/* --- source credit under a table or a claim ------------------------------
   The same object as the src rule in cine.css, in the spelling 53 pages use.
   Values are the host's dominant src-note block, unchanged. */
.src-note{margin:1.5rem 0 0;font-family:var(--f-mono);font-size:.62rem;
  letter-spacing:.03em;line-height:1.7;color:var(--cream-faint)}
.src-note a{color:var(--cream-soft);text-decoration:underline;text-underline-offset:2px}
.src-note a:hover{color:var(--gold)}

/* --- the registration number under a project name in a register table ---- */
.tiny{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.01em;
  color:var(--cream-faint)}

/* --- the row the page is about -------------------------------------------
   Deliberately low specificity (one class, two type selectors) so the
   ctable-scoped rule that 51 other pages carry keeps winning where it exists. */
tr.hl>td,tr.hl>th{background:rgba(201,169,97,.07)}

/* --- a quiet aside beside the main line ----------------------------------
   Kept as prose, not a box: on this site the same class name means a short
   caveat on some pages and a tinted callout on others, and a box would have
   been imposed on the pages that meant the first. Links get the house
   treatment because on /jaypee-greens/ a whole aside paragraph is one link
   and had no affordance at all. */
.note{max-width:66ch;margin-top:1.1rem;font-size:.94rem;line-height:1.75;
  color:var(--cream-faint)}
.note strong{color:var(--cream)}
.note a{color:var(--gold);border-bottom:1px solid rgba(201,169,97,.35)}
.note a:hover{color:var(--cream);border-color:var(--gold)}

/* --- icon chip in a glance list ------------------------------------------
   The svg children carry no fill or stroke attribute, so with no rule they
   painted as solid black shapes on the dark ground, i.e. invisible. */
.ico-pill{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:10px;
  background:rgba(247,244,238,.04);border:1px solid rgba(201,169,97,.16)}
.ico-pill svg{width:20px;height:20px;fill:none;stroke:var(--gold);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* --- a short card beside the prose ---------------------------------------
   The same box as the fp-card rule in cine.css. The heading rule is a child
   selector on purpose: these cards also contain nested h4s inside a list. */
.aside-card{padding:1.3rem 1.4rem;border:1px solid rgba(201,169,97,.2);
  border-radius:4px;background:rgba(247,244,238,.025)}
.aside-card>h4{margin:0 0 .85rem;font-family:var(--f-mono);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cream-faint)}

/* --- consent row on a lead form ----------------------------------------- */
.consent{display:flex;gap:.6rem;align-items:flex-start;margin:.3rem 0 .9rem;
  font-size:.78rem;line-height:1.45;color:var(--cream-faint)}
.consent input[type=checkbox]{flex:none;margin-top:.15rem;accent-color:var(--gold)}

/* --- full-width deadline band -------------------------------------------
   Exactly the property set the host's own version of this band declares, so
   on the four pages that already have it this rule changes nothing. */
.dl-callout{background:rgba(201,169,97,.045);
  border-top:1px solid rgba(201,169,97,.18);
  border-bottom:1px solid rgba(201,169,97,.18);
  padding:clamp(1.8rem,4vw,2.6rem) var(--pad)}

/* --- section heading on a reader page ------------------------------------
   The host's article h2 face. No ::before rule: a khead kicker with its own
   terracotta rule already sits directly above every one of these. */
.s-title{margin:0 0 1rem;font-family:var(--f-display);font-weight:340;
  font-size:clamp(1.7rem,1.3rem + 1.4vw,2.35rem);line-height:1.12;
  letter-spacing:-.02em;color:var(--cream)}

/* --- FAQ accordion where the details carry no class ----------------------
   The same accordion cine.css draws for faq-item and faq-q, scoped to this
   container, because inside it the <details> and <summary> are bare. The
   answer div is faq-a, which cine.css already styles. */
.faq-block details{border-bottom:1px solid rgba(247,244,238,.1)}
.faq-block details:first-of-type{border-top:1px solid rgba(247,244,238,.1)}
.faq-block summary{display:flex;align-items:flex-start;justify-content:space-between;
  gap:1.5rem;padding:1.15rem 0;cursor:pointer;list-style:none;
  font-size:1.02rem;font-weight:500;line-height:1.5;color:var(--cream);
  transition:color .25s var(--ease)}
.faq-block summary::-webkit-details-marker{display:none}
.faq-block summary:hover{color:var(--gold)}
.faq-block summary::after{content:"";flex:none;width:10px;height:10px;margin-top:.42rem;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);transition:transform .3s var(--ease)}
.faq-block details[open] summary::after{transform:rotate(-135deg)}

/* --- the quotable answer above the lede ----------------------------------
   Matched to the host's own answer block. The selector is an exact class
   match on purpose: on ten pages this is a second class on an element that
   another class already boxes, and a plain single-class rule would have
   boxed those twice. Only the bare ones, nine elements across seven pages,
   have nothing behind them. */
[class="direct-answer"]{margin:0 0 1.4rem;padding:1.5rem 1.7rem;
  background:rgba(201,169,97,.05);border:1px solid rgba(201,169,97,.28);
  border-left:3px solid var(--gold);border-radius:12px}

/* --- the quieter of two buttons -----------------------------------------
   cine.css already carries btn, btn-primary and btn-ghost; the markup on
   these pages asks for btn-secondary, which is the btn-ghost treatment. */
.btn-secondary{color:var(--cream);border:1px solid rgba(247,244,238,.26)}
.btn-secondary:hover{border-color:var(--gold);color:var(--gold)}