/* Host styles for the v22 ("Ledger B") package, added by tools/prepare_site.py to every page after the
   package's own stylesheets (the v16 package used assets/fixes.css instead). No wording.

   1. One dialog style for the contact / readiness form (assets/forms.js: .modal > .gate) and the
      walkthrough gate (tools/v22_gate.js: #ixgate > .ixg): paper and ink like the pages. The package
      styled only its own gate, dark, with !important - hence the !important here.
   2. The cookie notice: Decline beside Accept, the same size.
   3. Contrast fixes (WCAG AA) where the paper theme keeps colours made for its dark theme.
   4. The /watch library labels.
   5. The cookie notice: bottom-right card on desktop, bottom strip on phones. */

.modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(18,26,34,.55);backdrop-filter:blur(6px)}
.modal.on{display:flex}
#ixgate{background:rgba(18,26,34,.55)!important;backdrop-filter:blur(6px)}
.modal .gate,#ixgate>.ixg{position:relative;box-sizing:border-box;width:100%;max-width:470px;max-height:calc(100vh - 40px);overflow:auto;
  background:#FFFCF5!important;color:#121A22!important;border:1px solid rgba(18,26,34,.42)!important;border-radius:4px!important;
  padding:28px!important;box-shadow:0 30px 80px -24px rgba(18,26,34,.5)!important;text-align:left}
.modal .gate .k,#ixgate .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#8F4A00;margin:0 0 10px}
.modal .gate h3,#ixgate #ixg_t{font-family:var(--serif);font-weight:400;font-size:30px!important;line-height:1.08;letter-spacing:-.02em;margin:0 0 10px;color:#121A22}
.modal .gate p,#ixgate #ixg_s,#ixgate #ixg_done p{font-size:14.5px;line-height:1.55;color:#3B4651;margin:0 0 16px}
.modal .gate input,.modal .gate textarea,#ixgate input{display:block;box-sizing:border-box;width:100%;margin:0 0 10px!important;padding:12px 13px!important;
  font:15px/1.4 var(--body)!important;color:#121A22!important;background:#fff!important;border:1px solid rgba(18,26,34,.42)!important;border-radius:3px!important}
.modal .gate input::placeholder,.modal .gate textarea::placeholder,#ixgate input::placeholder{color:#5C6670}
.modal .gate input:focus,.modal .gate textarea:focus,#ixgate input:focus{outline:2px solid #9A4A0E!important;outline-offset:1px}
.modal .gate .err,#ixgate #ixg_err{color:#A12A1C!important;font-size:13.5px;min-height:18px;margin:2px 0 8px}
.modal .gate .row,#ixgate .ixg_row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.modal .gate .row .btn{flex:1 1 auto;justify-content:center}
#ixgate #ixg_go{flex:1 1 auto;background:#121A22!important;color:#FFFCF5!important;border:1px solid #121A22!important;border-radius:3px!important;
  padding:13px 18px!important;font:600 12.5px var(--mono)!important;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
#ixgate #ixg_go:hover{background:#9A4A0E!important;border-color:#9A4A0E!important}
#ixgate #ixg_go:disabled{opacity:.55;cursor:wait}
#ixgate #ixg_x{background:transparent!important;color:#121A22!important;border:1px solid #121A22!important;border-radius:3px!important;
  padding:13px 18px!important;font:600 12.5px var(--mono)!important;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
#ixgate #ixg_open{display:inline-flex;margin:0 0 12px}

/* 2. Cookie notice */
#ck .ckb{display:flex;gap:8px;flex:none}
#ck .ckb .ckno{background:transparent;color:inherit;border:1px solid currentColor}

/* 3. Contrast (WCAG AA). On the cookie notice's dark card the paper theme's rust (#9A4A0E) was 2.8 : 1
      for the link and 3.0 : 1 under the Accept label: the logo orange instead. On the paper sections,
      ixf-light.css's accent #A65800 was 4.25 : 1 for small text (labels, "Week 1", links): the Ledger
      theme's own darker accent. The green of the home tile's "seconds" / "minutes" (#0B8F76, 4.0 : 1): darker. */
#ck a{color:#F0A860}
#ck [data-ck-accept]{background:#E08A2B}
.lb .light{--ac:#8F4A00}
html.lb,.lb .dark,.lb .light{--ok:#08735F}
.lb .tile .ba b{color:#08735F}

/* 4. /watch library: the use-case label (.lib .uc, a small mono label) also met the generic card rule
      `.uc{padding:24px;border;background}` meant for other pages, so each label sat in an empty box. */
.lib .uc{padding:0;border:0;background:none;border-radius:0;margin:0 0 10px}
.lib .uc:hover{transform:none}

/* 5. Cookie notice position: the package centred a 720px card at the bottom, over the home hero's
      "Start a free three-week shadow run". A compact card in the bottom-right corner on desktop, a
      small strip along the bottom on phones (as on the v16 site). It appears at once where it covers
      no heading, lede or call to action in the first screen, otherwise on the first scroll (ixf.js
      measures it where it will stand: .ckm). */
#ck{left:auto;right:16px;bottom:16px;transform:translateY(24px);width:min(390px,calc(100% - 32px));flex-direction:column;
  align-items:stretch;gap:10px;padding:13px 15px;font-size:12px;line-height:1.45}
#ck.on{transform:none}
#ck .ckb button{padding:7px 14px;font-size:12.5px}
@media (max-width:600px){
  #ck{left:0;right:0;bottom:0;width:auto;transform:translateY(100%);border-radius:10px 10px 0 0;border-width:1px 0 0;
    flex-direction:row;align-items:center;gap:10px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));font-size:10.5px;line-height:1.35}
  #ck.on{transform:none}
  #ck>span{flex:1}
  #ck .ckb{width:auto;flex-direction:column;gap:6px}
  #ck .ckb button{flex:none;padding:6px 12px;font-size:12px}
}
#ck.ckm{transform:none!important;transition:none!important}

/* 6. Phones and tablets (the package's menu layout, max-width 1040px): the closed menu is hidden with
      visibility:hidden + opacity:0, but the package sets its dropdown panels visibility:visible inside it,
      and a child's visibility overrides its parent's - so the closed menu's invisible links sat over the
      page and took taps meant for the buttons under them (the home hero's "Watch it decide", 2026-11-06).
      The panels now follow the menu. */
@media (max-width:1040px){.dd .panel{visibility:inherit}}

/* 7. "Go deeper" / related links (.rl, .rel): the package draws them as pills on inline links, so on a
      phone a long one ("Next: ...") wrapped across two lines and its pill lay over the first row - a tap
      on "Next" opened "Find" or "Prove". A wrapping row of whole pills instead. */
.rl,.rel{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rl a,.rel a{display:inline-flex;align-items:center;max-width:100%;line-height:1.3}

/* 8. The smallest phones (320px, iPhone SE): two grids were wider than the screen - the home page's role
      cards (a 1fr column cannot shrink below its content: 330px) and the careers cards (minmax(320px,…)
      on a 280px column: 340px). A page wider than the screen is scrolled sideways and WebKit then offsets
      the sticky header, whose invisible area took taps meant for the footer links and buttons. */
@media (max-width:1040px){.doors,.roles3,.brp,.stats3{grid-template-columns:minmax(0,1fr)}}
.rcol,.job,.door{min-width:0;overflow-wrap:anywhere}
.jobs{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.lib{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.docs{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}

/* 9. The video window (tools/v22_gate.js, founder 2026-11-06): every video plays over the page, never in
      a new tab. Dark like the players themselves; the window is as wide as the screen allows while the
      16:9 picture and its controls still fit its height. */
#ixplay{position:fixed;inset:0;z-index:9990;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(4,6,12,.86);backdrop-filter:blur(6px)}
#ixplay[hidden]{display:none}
html.ixp-open{overflow:hidden}
#ixplay .ixp{position:relative;width:min(1180px,calc(100vw - 32px),calc((100vh - 120px)*16/9),calc((100dvh - 120px)*16/9));background:#04060c;border:1px solid rgba(255,255,255,.14);border-radius:6px;overflow:hidden;box-shadow:0 40px 120px -30px rgba(0,0,0,.9)}
#ixplay .ixp_bar{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-bottom:1px solid rgba(255,255,255,.1)}
#ixplay .ixp_t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:600 11.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#F5B069}
#ixplay .ixp_bar button{background:transparent;color:#E8EEF6;border:1px solid rgba(255,255,255,.22);border-radius:3px;cursor:pointer;font:600 12px var(--mono);letter-spacing:.06em;padding:6px 10px}
#ixplay #ixp_x{font:400 22px/1 var(--body);padding:2px 10px 5px;border-color:transparent}
#ixplay .ixp_bar button:hover,#ixplay .ixp_bar button:focus-visible{border-color:#F5B069;color:#fff}
#ixplay .ixp_fr iframe{display:block;width:100%;height:56.25vw;border:0;background:#04060c}
#ixplay .ixp_fr iframe:fullscreen{height:100%}
#ixplay .ixp_end{position:absolute;left:0;right:0;top:41px;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px;text-align:center;background:rgba(4,6,12,.9)}
#ixplay .ixp_end[hidden]{display:none}
#ixplay .ixp_k{margin:0;font:700 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#F5B069}
#ixplay .ixp_h{margin:4px 0 14px;font-family:var(--serif);font-size:clamp(20px,3.2vw,34px);line-height:1.1;color:#fff}
#ixplay .ixp_acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
#ixplay .ixp_acts button,#ixplay .ixp_acts .ixp_btn{display:inline-flex;align-items:center;background:transparent;color:#E8EEF6;border:1px solid rgba(255,255,255,.35);border-radius:3px;padding:11px 16px;font:600 12.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;text-decoration:none}
#ixplay .ixp_acts .ixp_pri{background:#E08A2B;border-color:#E08A2B;color:#0b1220}
#ixplay .ixp_acts button:hover,#ixplay .ixp_acts .ixp_btn:hover{border-color:#F5B069;color:#fff}
#ixplay .ixp_acts .ixp_pri:hover{background:#F5B069;color:#0b1220}
@media (max-width:600px){#ixplay{padding:8px}#ixplay .ixp{width:calc(100vw - 16px)}#ixplay .ixp_h{font-size:19px;margin-bottom:10px}#ixplay .ixp_acts button,#ixplay .ixp_acts .ixp_btn{padding:9px 12px;font-size:11.5px}}

/* 10. Walkthrough access codes (tools/v22_gate.js, founder 2026-11-06): the code field, the bot check in
       the code request, the confirmation and the "Already have a code? / Request one" line. */
#ixgate #ixg_ci{font:600 20px/1.3 var(--mono)!important;letter-spacing:.12em;text-transform:uppercase;text-align:center}
#ixgate .ixg_ts{margin:4px 0 10px;min-height:0}
#ixgate #ixg_ok{background:#EAF4EF;border:1px solid #08735F;color:#06493D;border-radius:3px;padding:10px 12px;font-size:14px;line-height:1.5;margin:0 0 12px}
#ixgate .ixg_alt{margin:14px 0 0;font-size:13.5px;color:#3B4651}
#ixgate .ixg_alt:empty{display:none}
#ixgate .ixg_alt a,#ixgate #ixg_err a{color:#8F4A00;font-weight:600;text-decoration:underline}