/* ============================================================================
   ValiantAge — the WordPress build's own rules.

   Small on purpose. v0.5's two stylesheets are carried across untouched (D-021)
   so a difference between the prototype and the live site is always visible as
   a rule in THIS file, never as a quiet edit to one of those.
   ============================================================================ */

/* The player is a Bunny Stream iframe now, not a <video>. va-core.css sizes
   `.vbox video`; this gives the iframe and its wrapper the identical box. */
.vbox .vplayer{position:absolute;inset:0;border-radius:16px;overflow:hidden;background:#000}
.vbox .vplayer iframe{width:100%;height:100%;display:block;border:0}

/* A video with no Bunny id yet. It should be impossible to reach — the Ready?
   column exists to catch it in wp-admin first — but a black box with no
   explanation is the worst possible way to find out. */
.vbox .vbox-none{display:flex;align-items:center;justify-content:center;height:100%;
  margin:0;padding:0 28px;color:#fff;text-align:center;font-size:17px;line-height:1.5}

/* A card whose video has no thumbnail. Keeps the grid's rhythm rather than
   collapsing the row to the height of its text. */
.vcard .vcard-noimg{display:block;width:100%;height:100%;
  background:linear-gradient(160deg,#2F5D7E,#1F2A37)}

/* The cards are anchors now rather than buttons, so that every video can be
   opened in a new tab and shared. Everything v0.5's CSS gave .vcard still
   applies; these three only undo what a browser adds to a link. */
a.vcard{text-decoration:none;color:inherit;display:block}
a.vcard:focus-visible{outline:3px solid #2F5D7E;outline-offset:3px}

/* Rows arriving from the server after a topic is picked. Without this the
   panel jumps from its old height to nothing to the new height. */
#rows[aria-busy="true"]{min-height:240px;opacity:.45;transition:opacity .15s}

/* The page's own text, when somebody has written some into a space page. */
.spacebody{padding:8px 0 40px}
.spacebody p{max-width:70ch;margin:0 auto 16px;font-size:17px;line-height:1.65}

/* ---------- the video page ---------- */
/* v0.5 sized `.vp-player video`; the player is a Bunny iframe now. Same box. */
.vp-player{position:relative;width:100%;aspect-ratio:9/16;background:#000;
  border-radius:14px;overflow:hidden}
.vp-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vp-player .vp-none{display:flex;align-items:center;justify-content:center;height:100%;
  margin:0;padding:0 24px;color:#fff;text-align:center;font-size:17px;line-height:1.5}

/* The two headings in "Looking for something else?" were inline styles in the
   prototype. They belong in a stylesheet. */
.nodeadend .nde-h{margin:0;font-size:20px}
.nodeadend .nde-p{margin:6px 0 0;color:#53616F}

.vp-more{padding-top:6px}

/* ---------- search results as a real page ---------- */
.searchtop{padding-bottom:6px}
.searchtop .searchrow{max-width:640px;margin:18px auto 0}
.sresults-page{padding:4px 0 48px}
.sresults-page .s-list{max-width:760px;margin:0 auto}
/* The two doors under an empty result. Inline here rather than in the sheet,
   which only ever drew them inside the My Resources panel. */
.sb-doors-inline{max-width:620px;margin:26px auto 0}

.navigation.pagination{display:flex;justify-content:center;gap:10px;margin:26px 0 0}
.navigation.pagination .page-numbers{padding:8px 13px;border-radius:8px;
  border:1px solid rgba(31,42,55,.18);text-decoration:none;color:#1F2A37}
.navigation.pagination .current{background:#2F5D7E;border-color:#2F5D7E;color:#fff}

/* ---------- an ordinary page ---------- */
.pagebody{padding:26px 0 56px}
.pagebody .pb-title{font-size:clamp(28px,4vw,40px);line-height:1.15;margin:0 0 20px;
  max-width:22ch}
.pagebody .pb-copy{max-width:68ch;font-size:17.5px;line-height:1.7}
.pagebody .pb-copy h2{font-size:24px;margin:34px 0 10px}
.pagebody .pb-copy h3{font-size:19px;margin:26px 0 8px}
.pagebody .pb-copy p{margin:0 0 16px}
.pagebody .pb-copy ul,.pagebody .pb-copy ol{margin:0 0 16px 22px}
.pagebody .pb-copy li{margin:0 0 8px}
.pagebody .pb-copy a{color:#2F5D7E}

/* ---------- the written pages (About, Privacy) ----------
   `.a-narrow` in v0.5 set the type sizes for a reading column but never made
   one: it caps paragraphs at 66ch and leaves them hard against the left of a
   1100px wrap, with the green summary box spanning the full width above them.
   On the prototype's narrower shell that passed. On a real screen it reads as
   text shoved into a corner.

   A privacy policy is the page a cautious person reads most carefully. It
   should look composed. So the column itself is narrowed and centred, and the
   paragraph cap then does what it was always meant to do — set the measure —
   rather than doing the centring's job as well. */
.a-narrow{max-width:780px;margin-left:auto;margin-right:auto}
.a-narrow p{max-width:none}
.a-narrow .goodtoknow{margin-bottom:26px}

/* The privacy page's own hero sits tighter than a space page's. */
.spacetop + .a-band{border-top:0}

/* ---------- the closed-beta door ----------
   The first thing the first cohort ever sees, so it is a designed page rather
   than a password box: the mark, a sentence, Molly, and one field. Nothing to
   read, nothing to decide, nowhere else to go. */
body.va-gate{background:var(--cream,#F7F5EF);margin:0}
.gate{min-height:100dvh;min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:40px 16px}
.gate-in{width:100%;max-width:560px;text-align:center}
.gate-logo{height:54px;width:auto;margin:0 0 28px}
.gate-h{font-size:clamp(28px,4.4vw,40px);line-height:1.15;margin:0 0 12px;text-wrap:balance}
.gate-lede{font-size:17.5px;line-height:1.6;color:#3d4856;margin:0 auto 28px;max-width:46ch;
  text-wrap:pretty}

/* The video is 9:16, so it is capped by HEIGHT — a portrait video given free
   rein on a laptop pushes the code box off the bottom of the screen, which is
   the one thing this page must never do. */
.gate-video{width:min(240px,46vh);margin:0 auto 28px;aspect-ratio:9/16;
  border-radius:14px;overflow:hidden;background:#000;
  box-shadow:0 18px 44px rgba(31,42,55,.22)}
.gate-video iframe{width:100%;height:100%;border:0;display:block}

.gate-form{margin:0 auto;max-width:420px;text-align:left}
.gate-form label{display:block;font-weight:600;font-size:15px;margin:0 0 7px}
.gate-row{display:flex;gap:9px}
.gate-row input{flex:1;min-width:0;padding:13px 14px;font-size:17px;
  border:1.5px solid rgba(31,42,55,.28);border-radius:10px;background:#fff}
.gate-row input:focus{outline:3px solid rgba(47,93,126,.35);outline-offset:1px;
  border-color:#2F5D7E}
.gate-row .sb-go{flex:0 0 auto;padding:13px 22px;font-size:16px}
.gate-err{margin:11px 0 0;color:#8C2F2F;font-size:15px;font-weight:600}
.gate-foot{margin:26px auto 0;max-width:44ch;font-size:14px;line-height:1.55;color:#53616F}

@media (max-width:420px){
  .gate-video{width:min(200px,38vh)}
  .gate-row{flex-direction:column}
  .gate-row .sb-go{width:100%}
}

/* ---------- the badge is a button now (D-105) ----------
   v0.5's badge was decoration with `pointer-events:none`. It is pressable, so
   it has to look and behave pressable — and carry a focus ring, because a
   control a keyboard cannot see is not a control. */
.vbox .vbadge,
.vp-badge{
  border:0;font-family:inherit;cursor:pointer;pointer-events:auto;
  -webkit-appearance:none;appearance:none}
.vbox .vbadge:hover,
.vp-badge:hover{filter:brightness(1.14)}
.vbox .vbadge:focus-visible,
.vp-badge:focus-visible{outline:3px solid #fff;outline-offset:3px}
.vp-badge:focus-visible{outline-color:#2F5D7E}
/* A hairline ring so it reads as pressable rather than as a sticker. */
.vp-badge{box-shadow:0 0 0 1.5px rgba(31,42,55,.18)}

/* ---------- the disclosures panel ----------
   Reuses the send-sheet shell, so it is the same object the site already uses
   for Share and My Resources rather than a third kind of panel. */
.discbox{max-width:620px}
.disc-who{margin:0 0 20px;font-size:17px;line-height:1.6;color:#1F2A37}
.disc-body{max-height:46vh;overflow-y:auto;padding-right:6px;
  border-top:1px solid rgba(31,42,55,.14)}
.disc-body h4{margin:18px 0 6px;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;color:#53616F}
.disc-body .legal{margin:0;font-size:14.5px;line-height:1.6;color:#3d4856}

/* ---------- panels must sit ABOVE the shadow box ----------
   v0.5 set .sendwrap to 120 and .vmodal to 200, which was right when the only
   panel was My Resources and it never opened over a playing video. Now that
   Share and the disclosures open FROM INSIDE the shadow box (D-105, D-106),
   120 puts them behind the thing that opened them.

   320 clears the modal at 200 and v0.5's feedback widgets at 290/300, and stays
   under the cookie/consent layer at 400. A panel is the most recent thing the
   person asked for, so it belongs on top of everything except a legal notice. */
.sendwrap{z-index:320}

/* ---------------------------------------------------------------------------
   WHERE TO LEARN MORE

   Deliberately the same shape as the transcript box — a closed <details> under
   it — because it is the same kind of thing: more, if you want it, and silent
   if you do not. The page's job is one video and one next step, and neither a
   transcript nor a reading list is allowed to compete with that.

   Links are underlined and set in the body colour rather than a bright blue.
   This audience reads on phones in bad light; underline is the signal that
   survives both (Finding 2 in the mobile evidence).
   --------------------------------------------------------------------------- */
details.sources{border:1px solid #E2DDD3;border-radius:14px;background:#fff;margin:0 0 8px}
details.sources summary{padding:15px 18px;font-weight:600;cursor:pointer;
  min-height:52px;display:flex;align-items:center}
details.sources .sbody{padding:0 18px 18px;color:#53616F;line-height:1.65}
details.sources .s-note{margin:0 0 10px;font-size:.92rem;color:#6B7684}
details.sources ul{margin:0;padding-left:20px}
details.sources li{margin:0 0 10px}
details.sources a{color:#2F5D7E;text-decoration:underline;text-underline-offset:2px}
details.sources a:hover,details.sources a:focus{text-decoration-thickness:2px}

@media print{
  /* A page somebody carries into an appointment should carry the addresses
     with it — a link that only exists as a tap is lost the moment it is on
     paper, so the URL is printed after the name. */
  .sources{border:0;padding:0;margin:12pt 0 0;break-inside:avoid}
  .sources summary{list-style:none;font-size:13pt;font-weight:700;margin:0 0 6pt}
  .sources summary::-webkit-details-marker{display:none}
  .sources .sbody{display:block!important}
  .sources .s-note{display:none}
  .sources a{color:#000;text-decoration:none}
  .sources a::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
}