/* Neuropreneur hub extension — Video-Review page styles (moved out of the hub shell 2026-09-25).
   Loaded by hubs/build-hub.sh via EXT_CSS in _hub/hub.conf. */
/* the Home drawer shows the cut itself when the item has one */
.dbody .rvpeek{ height:min(46vh,420px); aspect-ratio:9/16; width:auto; margin:0 auto;
  border-radius:var(--r); overflow:hidden; background:var(--ink); border:1px solid var(--line); }
.dbody .rvpeek video{ width:100%; height:100%; display:block; object-fit:contain; background:var(--ink); }

  /* ── video review (section 4) ──────────────────────────────────
     The comment layer itself is /hub/review.js, lifted from the Almedia
     variant-explorer. It reads --surface/--ink/--ink-2/--ink-3/--line/--bg/
     --navy/--green/--green-soft, so it skins itself off the tokens mapped
     below, and it takes its strings from window.AV_REVIEW_STRINGS.

     PHONE IS THE PRIMARY DEVICE HERE. review.js's own small-screen rule pins
     the panel over the player as a floating card; on a 9:16 cut that buries
     the video and its controls. window.AV_REVIEW_INLINE turns that rule off
     (.rv-inline) and the layout below takes over:
       · wide  — player and panel side by side, both capped to the viewport so
                 the composer is never below the fold
       · phone — the player keeps the screen; the panel is a bottom sheet that
                 opens from a fixed action bar and closes again after a note */
/* ── Fassungs-Umschalter (2026-09-09, two cuts) ─────────────────────────────
   Two equal-weight buttons, not a dropdown: both cuts should be visible as choices
   without a click, and on a phone a select would hide the second one behind the OS
   picker. aria-pressed is the state — no separate .is-on class to fall out of sync. */
.rvpick{ display:flex; gap:.5rem; margin:0 0 1rem; flex-wrap:wrap }
.rvpick-b{ flex:1 1 15rem; text-align:left; cursor:pointer; padding:.6rem .8rem;
  border:1px solid var(--line); border-radius:10px; background:var(--surface);
  color:var(--ink-2); font:inherit; line-height:1.25; transition:border-color .12s, background .12s }
.rvpick-b:hover{ border-color:var(--ink-3) }
.rvpick-b .l{ display:block; font-weight:650; color:var(--ink) }
.rvpick-b .t{ display:block; font-size:.82rem; color:var(--ink-3); margin-top:.15rem }
.rvpick-b[aria-pressed="true"]{ border-color:var(--navy); background:var(--green-soft) }
.rvpick-b[aria-pressed="true"] .l{ color:var(--navy) }
@media (max-width:820px){ .rvpick-b{ flex:1 1 100% } }
  .rvstage{ display:flex; align-items:stretch; gap:1.4rem; margin-top:1.1rem;
    --surface:var(--card); --bg:var(--paper); --ink-2:var(--grey); --ink-3:var(--grey-light);
    --navy:var(--ink); --green:var(--brand); --green-soft:var(--brand-wash);
    --fail:#c0392b; --fail-bg:#fdeceb; }
  .rvplayer{ flex:none; display:flex; flex-direction:column; gap:.9rem; }
  .rvframe{ height:min(58vh,540px); aspect-ratio:9/16; width:auto; border-radius:var(--r-lg);
    overflow:hidden; background:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow-lg); }
  .rvframe video{ width:100%; height:100%; display:block; object-fit:contain; background:var(--ink); }
  .rvhow{ background:var(--card); border:1px solid var(--line); border-radius:var(--r);
    padding:.85rem 1rem .9rem; box-shadow:var(--shadow); max-width:34ch; }
  .rvhow ol{ margin:.15rem 0 0; padding-left:1.05rem; color:var(--grey); font-size:.8rem; line-height:1.5; }
  .rvhow li{ margin-bottom:.24rem; } .rvhow li:last-child{ margin-bottom:0; }
  .rvhow b{ color:var(--ink); font-weight:600; }
  .rvhow kbd{ font:600 .74rem/1 var(--mono,ui-monospace,monospace); background:var(--paper);
    border:1px solid var(--line-2); border-radius:5px; padding:.15em .34em; color:var(--ink); }
  .rvhow .qn{ margin-top:.55rem; padding-top:.5rem; border-top:1px solid var(--line);
    font-size:.76rem; color:var(--grey-light); line-height:1.45; }

  /* component overrides — host-side only */
  .rvstage .rv-panel{ width:clamp(290px,26vw,360px);
    max-height:min(58vh,540px);              /* the composer must stay on screen */
    border:1px solid var(--line); box-shadow:var(--shadow); border-radius:var(--r); }
  .rvstage .rv-panel button{ border:0; }   /* no global button reset in this app */
  .rvstage .rv-panel .rv-head{ display:grid; grid-template-columns:1fr auto; gap:0 .6rem;
    grid-template-areas:"t x" "v x"; align-items:start; }
  .rvstage .rv-panel .rv-head .rv-t{ grid-area:t; }
  .rvstage .rv-panel .rv-head .rv-v{ grid-area:v; }
  .rvstage .rv-panel .rv-head .rvx{ grid-area:x; align-self:center; }
  .rvstage .rv-panel .rv-head .rv-t{ color:var(--brand); }
  .rvstage .rv-panel .rv-time-cap{ background:var(--brand); color:#fff; }
  .rvstage .rv-panel .rv-item-time{ background:var(--brand-wash); color:var(--brand); }
  .rvstage .rv-panel .rv-item-time:hover{ background:var(--brand); color:#fff; }
  /* no endpoint by design — the rail's "Send to Avlana" is the only way out */
  body .rv-submit-fab, .rvstage .rv-panel .rv-panel-submit,
  .rvstage .rv-panel .rv-attach-row{ display:none !important; }

  /* the sheet's own close button + scrim + action bar: phone only, hidden here */
  .rvx{ display:none; width:34px; height:34px; flex:none; border-radius:50%; border:0;
        background:var(--paper); color:var(--grey); font-size:1rem; cursor:pointer; }
  .rvbar, .rvscrim{ display:none; }
  /* the how-to names real buttons, and the two devices have different ones */
  .rvhow li.onphone{ display:none; }

  @media (max-width:820px){
    /* the player keeps the screen; nothing floats over it */
    .rvstage{ flex-direction:column; gap:.8rem; margin-top:.8rem; }
    .rvplayer{ gap:.7rem; }
    /* The player must be the first thing on the screen, not the fourth. The page
       title repeats the nav tab and the lede repeats the how-to, so on a phone
       both shrink out of the way and the cut comes up under the thumb. */
    body.rvpage .wrap > h1.display{ font-size:1.35rem; margin-bottom:.1rem; }
    body.rvpage .wrap > .lede{ font-size:.84rem; line-height:1.45; margin:.25rem 0 0; }
    body.rvpage #reviewstage{ margin-top:.9rem !important; }
    #reviewstage .head{ margin-bottom:.4rem; display:block; }
    #reviewstage .head h2{ font-size:.98rem; }
    #reviewstage .head .meta{ display:block; margin-top:.15rem; font-size:.72rem; }
    /* once she has scrolled to the cut it stays on screen while she reads on */
    .rvframe{ height:min(46vh,430px); margin:0 auto; position:sticky; top:.4rem; z-index:5; }
    .rvhow{ max-width:none; }
    .rvhow li.onphone{ display:list-item; } .rvhow li.ondesk{ display:none; }

    /* the panel is a bottom sheet, closed until she asks for it */
    .rvstage .rv-panel{
      position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; max-width:none;
      z-index:130; max-height:min(86vh,660px); border-radius:20px 20px 0 0;
      border:0; box-shadow:0 -18px 60px rgba(14,13,26,.28);
      padding-bottom:env(safe-area-inset-bottom,0);
      transform:translateY(103%); visibility:hidden;
      transition:transform .26s var(--ease), visibility .26s;
      /* iOS does not resize the layout viewport for the keyboard, so a bottom:0
         sheet ends up behind it. --kb is fed from visualViewport (see openSheet). */
      bottom:var(--kb,0px); max-height:calc(min(86vh,660px) - var(--kb,0px)); }
    .rvstage .rv-panel.rvsheet{ transform:none; visibility:visible; }
    .rvstage .rv-panel .rv-head{ padding:14px 14px 10px; }
    .rvstage .rv-panel .rv-list{ padding:10px 14px; }
    .rvstage .rv-panel .rv-compose{ padding:12px 14px calc(14px + env(safe-area-inset-bottom,0px)); gap:10px; }
    .rvx{ display:flex; align-items:center; justify-content:center; }

    /* thumb-sized targets */
    .rvstage .rv-panel .rv-time-cap{ font-size:.86rem; padding:0 16px; min-height:42px; border-radius:99px; }
    .rvstage .rv-panel .rv-time-val{ font-size:16px; min-height:42px; width:88px; }  /* 16px = no iOS zoom */
    .rvstage .rv-panel .rv-text{ font-size:16px; min-height:88px; padding:11px 12px; }
    .rvstage .rv-panel .rv-add{ font-size:1rem; min-height:50px; border-radius:12px; }
    .rvstage .rv-panel .rv-item-time{ min-height:30px; display:inline-flex; align-items:center; padding:0 12px; }
    .rvstage .rv-panel .rv-item-del{ width:32px; height:32px; font-size:15px;
      display:flex; align-items:center; justify-content:center; }
    .rvstage .rv-panel .rv-item-text{ font-size:.88rem; }

    .rvscrim{ display:block; position:fixed; inset:0; z-index:125; background:rgba(14,13,26,.45);
      opacity:0; pointer-events:none; transition:opacity .26s var(--ease); }
    .rvscrim.on{ opacity:1; pointer-events:auto; }

    /* the fixed action bar — the only way into the sheet, always under her thumb */
    /* clear of the action bar */
    body.rvpage:not(.drawer-open) .toast{ bottom:calc(80px + env(safe-area-inset-bottom,0px)); }
    .rvbar{ display:flex; gap:.5rem; align-items:center;
      position:fixed; left:0; right:0; bottom:0; z-index:120;
      padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom,0px));
      background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
      border-top:1px solid var(--line); }
    .rvbar button{ border:0; font-family:var(--sans); cursor:pointer; }
    .rvbar .rvbar-add{ flex:1; min-height:48px; border-radius:12px; background:var(--brand); color:#fff;
      font:700 .92rem/1.2 var(--sans); display:flex; align-items:center; justify-content:center; gap:.4rem; }
    .rvbar .rvbar-add .t{ font-variant-numeric:tabular-nums; font-weight:800; opacity:.85; }
    .rvbar .rvbar-list{ min-height:48px; padding:0 .9rem; border-radius:12px;
      background:var(--brand-wash); color:var(--brand); font:700 .84rem/1 var(--sans); flex:none; }
    /* the bar owns the bottom of the screen — keep the page clear of it */
    body.rvpage .wrap{ padding-bottom:7.5rem; }
    /* ...but the drawer owns the whole screen. The bar sits above the drawer in
       the stack, so left alone it covers "Open in Gmail" / "Copy" / "Mark as
       sent" — the very buttons that get the notes out. */
    body.drawer-open .rvbar, body.drawer-open .rvscrim{ display:none; }
  }

/* ── CW40 Video-Review: Fokus / Baum (2026-09-25) ── */
.rvtop{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.rvmode{ display:flex; background:var(--brand-wash); border-radius:11px; padding:3px }
.rvmode button{ border:0; background:none; cursor:pointer; font:inherit; font-size:.85rem; color:var(--grey);
  padding:.4rem 1rem; border-radius:9px }
.rvmode button[aria-pressed="true"]{ background:var(--card); color:var(--brand); font-weight:600;
  box-shadow:0 1px 4px rgba(14,13,26,.1) }
.rvpieces{ display:flex; flex-direction:column; gap:.45rem; margin-top:1rem }
.rvpieces-g{ display:flex; flex-wrap:wrap; gap:.35rem; align-items:center }
.rvpieces-l{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-light); min-width:7.5rem }
.rvpiece{ border:1px solid var(--line-2); background:var(--card); border-radius:999px; padding:.32rem .75rem;
  font:inherit; font-size:.8rem; color:var(--ink); cursor:pointer; display:inline-flex; gap:.35rem; align-items:center }
.rvpiece:hover{ border-color:var(--brand-soft) }
.rvpiece[aria-pressed="true"]{ border-color:var(--brand); background:var(--brand-wash); color:var(--brand); font-weight:600 }
.rvcount{ background:var(--brand); color:#fff; border-radius:999px; font-size:.68rem; font-weight:700;
  min-width:1.15rem; height:1.15rem; display:inline-flex; align-items:center; justify-content:center; padding:0 .3rem }
.rvcount[hidden]{ display:none }
.rvdrive{ display:flex; gap:.8rem; align-items:center; flex-wrap:wrap }
.rvdrive .btn{ text-decoration:none }
.rvdrive-f{ font-size:.8rem; color:var(--brand) }
@media (max-width:820px){ .rvpieces-g{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:.2rem }
  .rvpieces-l{ min-width:auto; white-space:nowrap } .rvpiece{ white-space:nowrap } }

.rvtree-scroll{ overflow-x:auto; margin-top:1.4rem; padding-bottom:1rem }
.rvtree{ position:relative; width:max-content; min-width:100%; padding:0 .5rem }
.rvwires{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0 }
.rvwires path{ fill:none; stroke:var(--line-2); stroke-width:2 }
.rvt-rootrow{ display:flex; justify-content:center; margin-bottom:3rem; position:relative; z-index:1 }
.rvt-root{ background:var(--brand); color:#fff; border-radius:16px; padding:.7rem 1.4rem; text-align:center;
  display:flex; flex-direction:column; gap:.1rem; box-shadow:0 6px 18px rgba(44,21,186,.2) }
.rvt-root b{ font-size:1.05rem } .rvt-root span{ font-size:.75rem; opacity:.85 }
.rvt-groups{ display:flex; gap:1.1rem; justify-content:center; align-items:flex-start; position:relative; z-index:1 }
.rvt-group{ display:flex; flex-direction:column; align-items:center }
.rvt-pill{ background:var(--brand-wash); color:var(--brand); border-radius:999px; padding:.35rem 1.1rem;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; margin-bottom:2.4rem }
.rvt-nodes{ display:flex; gap:.5rem; align-items:flex-start }
.rvt-node{ width:74px; text-align:center }
.rvt-node .fr{ position:relative; display:block; width:74px; aspect-ratio:9/16; border-radius:12px; overflow:hidden;
  border:2.5px solid var(--ink); background:var(--ink); padding:0; cursor:pointer;
  box-shadow:0 5px 16px rgba(14,13,26,.14); transition:transform .25s, border-color .25s }
.rvt-node .fr img{ width:100%; height:100%; object-fit:cover; display:block }
.rvt-node .fr:hover, .rvt-node.sel .fr{ border-color:var(--brand); transform:translateY(-3px) }
.rvt-node .fr .rvcount{ position:absolute; top:5px; right:5px }
.rvt-node .cap{ margin-top:.4rem; font-size:.68rem; line-height:1.3; font-weight:600; color:var(--ink) }
.rvt-vars{ display:flex; flex-direction:column; gap:.2rem; margin-top:.4rem }
.rvt-var{ border:1px solid var(--line-2); background:var(--card); border-radius:7px; font:inherit; font-size:.62rem;
  color:var(--grey); padding:.18rem .3rem; cursor:pointer }
.rvt-var:hover{ border-color:var(--brand); color:var(--brand) }
.rvt-drive{ display:inline-block; margin-top:.35rem; font-size:.68rem; color:var(--brand) }
/* the tree is wider than the reading column: let it use the whole main area on a desktop */
@media (min-width:821px){ .rvtree-scroll{ width:calc(100vw - 290px); margin-left:50%; transform:translateX(-50%) } }
/* phone: no wide canvas — groups stack, each group's pieces scroll sideways, no wires */
.rvpieces, .rvpieces-g{ min-width:0; max-width:100% }
@media (max-width:820px){
  .rvtree-scroll{ overflow:visible; margin-top:1rem }
  .rvtree{ width:auto; min-width:0; padding:0 }
  .rvwires{ display:none }
  .rvt-rootrow{ justify-content:flex-start; margin-bottom:1.2rem }
  .rvt-groups{ flex-direction:column; align-items:stretch; gap:1.4rem }
  .rvt-group{ align-items:flex-start; min-width:0 }
  .rvt-pill{ margin-bottom:.7rem }
  .rvt-nodes{ max-width:100%; overflow-x:auto; padding-bottom:.4rem }
  .rvt-node{ flex:none }
}

/* ── Carousel in the review (kind:"slides", 2026-09-26) ── */
.rvslides{ align-items:flex-start }
.rvslide{ position:relative; height:min(58vh,540px); aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden;
  background:var(--ink); box-shadow:0 10px 30px rgba(14,13,26,.18) }
.rvslide img{ width:100%; height:100%; object-fit:contain; display:block }
.rvsnav{ position:absolute; top:50%; transform:translateY(-50%); width:2.4rem; height:2.4rem; border-radius:50%; border:0;
  background:rgba(255,255,255,.9); color:var(--ink); font-size:1.4rem; line-height:1; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.2) }
.rvsnav.prev{ left:.6rem } .rvsnav.next{ right:.6rem }
.rvsn{ position:absolute; bottom:.6rem; right:.7rem; background:rgba(14,13,26,.7); color:#fff; font-size:.72rem;
  padding:.15rem .5rem; border-radius:999px }
.rvstrip{ display:flex; gap:.35rem; overflow-x:auto; max-width:calc(min(58vh,540px) * .8) }
.rvstrip button{ flex:none; width:3rem; aspect-ratio:4/5; padding:0; border:2px solid transparent; border-radius:6px;
  overflow:hidden; cursor:pointer; background:var(--ink) }
.rvstrip button[aria-pressed="true"]{ border-color:var(--brand) }
.rvstrip img{ width:100%; height:100%; object-fit:cover; display:block }
.rvsnotebox{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1rem;
  width:clamp(290px,26vw,360px); display:flex; flex-direction:column; gap:.55rem }
.rvsnotes{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem; font-size:.84rem }
.rvsnotes li{ display:flex; gap:.5rem; align-items:flex-start } .rvsnotes li span{ flex:1 }
.rvsnotes li.empty{ color:var(--grey-light) }
.rvsnotes .rv-item-time{ border:0; background:var(--brand-wash); color:var(--brand); border-radius:6px;
  font:600 .72rem/1.6 inherit; padding:0 .45rem; cursor:pointer; white-space:nowrap }
.rvsn-del{ border:0; background:none; color:var(--grey-light); cursor:pointer }
.rvsnote-l{ font-size:.75rem; font-weight:600; color:var(--brand) }
.rvsnotebox textarea{ font:inherit; font-size:.88rem; border:1px solid var(--line-2); border-radius:8px; padding:.5rem; resize:vertical }
.rvsnotebox .qn{ font-size:.74rem; color:var(--grey-light) }
@media (max-width:820px){ .rvslide{ height:auto; width:100% } .rvstrip{ max-width:100% } .rvsnotebox{ width:100% } }