/* =========================================================================
   Proxsea — THE OCEAN VARIANTS: styles
   =========================================================================
   The instrument panels, the control deck, the water column and the dark
   descent that the three ocean pages (variant-ocean-a/b/c.html) share.
   ========================================================================= */

/* ---------- the instrument panel (top right) ---------- */
.od-panel{position:absolute;right:clamp(14px,3vw,36px);top:clamp(14px,3vh,34px);width:min(380px,calc(100% - 28px));
  background:rgba(6,20,48,.5);border:1px solid rgba(176,216,228,.28);border-radius:4px;backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:0 10px 40px rgba(0,0,0,.3);font-family:var(--mono);color:var(--mist);transition:opacity .3s}
.od-tabs{display:flex;border-bottom:1px solid rgba(176,216,228,.22)}
.od-tabs button{flex:1;appearance:none;background:none;border:0;padding:10px 6px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(176,216,228,.55);cursor:pointer;border-bottom:2px solid transparent}
.od-tabs button[aria-pressed="true"]{color:var(--cyan);border-bottom-color:var(--cyan)}
.od-chart{display:block;width:100%;height:276px}
.od-foot{display:flex;justify-content:space-between;gap:10px;padding:6px 10px 8px;border-top:1px solid rgba(176,216,228,.18);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#E0A32E}
.od-foot span:last-child{color:var(--on-dark-2)}
@media (max-width:760px){.od-panel{left:12px;right:12px;top:auto;bottom:12px;width:auto}.od-chart{height:210px}.od-panel.deck .od-chart{height:150px}.od-deck{max-height:150px}
  .px-copy.od-copy{bottom:300px}.od-panel.deck ~ .px-copy.od-copy{bottom:360px}
  .od-copy .lede,.od-copy .px-layer-hint,.od-copy .btn-ghost{display:none}.od-copy h1{font-size:32px;max-width:none}.od-copy .px-layers button{font-size:24px}.od-copy .ctas{margin-top:14px}.px-demo{display:none}}

/* ---------- the control deck (variant b) ---------- */
.od-deck{display:grid;gap:0;padding:0 12px 10px;max-height:min(60vh,520px);overflow:auto}
.od-group{padding:8px 0 4px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.od-field{display:grid;grid-template-columns:minmax(0,1fr) 64px;gap:6px 10px;align-items:center;padding:4px 0}
.od-field label{font-size:11px;color:var(--on-dark-2);grid-column:1/-1}
.od-field input[type=range]{width:100%;accent-color:var(--cyan);margin:0}
.od-field output{font-size:11.5px;color:var(--white);text-align:right;font-variant-numeric:tabular-nums}
.od-toggle{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--on-dark-2);padding:6px 0}
.od-toggle input{accent-color:var(--cyan)}
.od-seg{display:flex;gap:4px;padding:4px 0}
.od-seg button{appearance:none;background:none;border:1px solid rgba(176,216,228,.3);border-radius:2px;color:var(--on-dark-2);font-family:var(--mono);font-size:10.5px;padding:4px 8px;cursor:pointer}
.od-seg button[aria-pressed="true"]{border-color:var(--cyan);color:var(--cyan)}
.od-panel.deck .od-chart{height:196px}

/* ---------- the water column (variant c) ---------- */
.od-column{position:absolute;right:clamp(14px,3vw,36px);top:clamp(14px,3vh,30px);bottom:clamp(14px,3vh,30px);width:min(340px,calc(100% - 28px));
  background:rgba(6,20,48,.5);border:1px solid rgba(176,216,228,.28);border-radius:4px;backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  display:grid;grid-template-rows:auto 1fr auto;font-family:var(--mono);color:var(--mist);box-shadow:0 10px 40px rgba(0,0,0,.3)}
.od-column .od-chart{height:100%;min-height:0}
.od-column .od-head{padding:10px 12px 8px;border-bottom:1px solid rgba(176,216,228,.22);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);display:flex;justify-content:space-between}
@media (max-width:860px){.od-column{top:auto;bottom:12px;left:12px;right:12px;width:auto;height:min(56vh,440px)}.od-c .px-copy{display:none}}

/* ---------- the stage grid: the definition in the sky, then the title and the panel at one height ---------- */
.px-stage{--define-top:40px;--stage-top:108px}
.od-define{position:absolute;left:0;right:0;top:var(--define-top);pointer-events:none}
@media (min-width:761px){
  .od-panel.od-stack ~ .px-copy.od-copy{top:var(--stage-top);bottom:auto;padding-bottom:0}
  /* the panel runs from the definition's line to the bottom of the copy block:
     the page measures the copy and sets --panel-h; the three charts share the height */
  .od-panel.od-stack{height:var(--panel-h,610px);grid-template-rows:0.78fr 1fr 1fr;box-sizing:border-box}
  .od-copy .wrap{box-sizing:content-box;width:calc((100% - 2 * var(--margin) - 2 * var(--col-gap)) * 2 / 3 + var(--col-gap))}
  /* the headline's longest line is about 10.4 em in Barlow Condensed; the size
     is what fits that line in the two columns beside the panel, up to 64 px */
  .od-copy h1{font-size:clamp(30px,calc(((100vw - 2 * var(--margin) - 2 * var(--col-gap)) * 2 / 3 + var(--col-gap)) / 10.8),64px);max-width:none;text-wrap:wrap}  /* not balanced: the lines are set by the <br>s */
}
@media (max-height:780px) and (min-width:761px){.od-panel.od-stack .od-chart{height:188px}.od-panel.od-stack .od-map{height:148px}}
.od-define .definition{border:0;padding:0;margin:0;font-size:15px;color:var(--on-dark);row-gap:4px;column-gap:18px}
.od-define .definition .pr,.od-copy .definition .pr{color:var(--cyan);font-size:18px}
@media (min-width:761px){.od-define .definition{max-width:calc(100% - 360px)}.od-copy .definition{display:none}}
@media (max-width:760px){.od-define{display:none}}

/* ---------- the readout strip and descent captions ---------- */
.od-strip{position:absolute;left:clamp(16px,4vw,40px);bottom:18px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--on-dark-2);display:flex;gap:18px;flex-wrap:wrap;pointer-events:none}
.od-strip b{color:var(--white);font-weight:500}
/* two clean charts side by side: wind on the left, waves on the right */
.od-panel.od-two{width:min(700px,calc(100% - 28px));display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px}
.od-panel.od-two .od-chart{height:264px}
/* the two charts stacked, wind over waves, small and at the far right so the sea stays in view */
.od-panel.od-stack{width:min(400px,calc((100% - 2 * var(--margin) - 2 * var(--col-gap)) / 3));display:grid;grid-template-columns:1fr;gap:2px;padding:4px;right:var(--margin);top:var(--define-top);left:auto;z-index:5}   /* above the hero copy, whose box spans the width and would take the wave chart's pointer events */
.od-panel.od-stack .od-chart{height:214px}
.od-panel.od-stack .od-map{height:168px}
/* on a phone: the definition at the very top left, the headline and the button directly beneath it,
   and the three instruments side by side in a row along the foot of the screen, each a third of the
   width (the size they had in a column). The page measures the definition and sets --phone-copy-top */
/* the row is placed from the top: the frame is a full screen tall but starts under the banner, and a phone's
   full screen is measured with its toolbars hidden, so it sits a banner (69 px), its own height (158 px) and a
   margin (56 px, clear of the host's badge) above the bottom of the smallest visible screen */
@media (max-width:760px){.od-panel.od-stack{left:12px !important;right:12px;top:calc(100vh - 283px);top:calc(100svh - 283px);bottom:auto;width:auto;height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding:3px}
  .od-panel.od-stack .od-map{display:block}
  .od-panel.od-stack #chartWind{display:block}
  .od-panel.od-stack .od-chart,.od-panel.od-stack .od-map{height:150px;min-height:0}
  .od-define{display:block;top:14px}
  .od-define .definition{font-size:13.5px;row-gap:2px}
  .od-define .definition .pr{font-size:16px}
  .od-copy .definition{display:none}
  .od-panel.od-stack ~ .px-copy.od-copy{top:var(--phone-copy-top,110px);bottom:auto;padding-bottom:0}
  .od-copy h1{font-size:min(30px,calc((100vw - 48px) / 10.8))}   /* the longest line held on one line */
  .od-copy .ctas{margin-top:14px}}
@media (max-width:760px){.od-panel.od-two{grid-template-columns:1fr;gap:2px}.od-panel.od-two .od-chart{height:190px}.od-panel.od-two ~ .px-copy.od-copy{bottom:400px}}
.od-foot button{background:none;border:0;padding:0 1px;margin:0;font:inherit;letter-spacing:inherit;color:var(--mist);cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.od-foot button[aria-pressed="true"]{color:var(--cyan);text-decoration:none}
.od-strip i{color:#E0A32E;font-style:normal}
.od-depth{position:absolute;left:clamp(16px,4vw,40px);top:50%;transform:translateY(-50%);max-width:min(44%,440px);opacity:0;transition:opacity .4s;pointer-events:none}
.od-depth.on{opacity:1}
.od-depth .k{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--cyan);display:block;margin-bottom:12px}
.od-depth h2{font-size:clamp(30px,3.6vw,52px);line-height:1.04}
.od-depth p{margin-top:14px;color:var(--on-dark-2);font-size:17px;max-width:40ch}
.od-depth .m{margin-top:16px;font-family:var(--mono);font-size:12px;color:var(--mist)}
@media (max-width:760px){.od-depth{top:90px;transform:none;max-width:none;right:16px}.od-depth h2{font-size:28px}.od-depth p{font-size:14.5px}.od-strip{display:none}}

/* ---------- the page goes dark as you go down ---------- */
body.od-deep{background:#0A1F47;transition:background-color .2s linear}
.od-deep .light,.od-deep .dark-2{background:var(--abyss);color:var(--on-dark)}
.od-deep .light.alt{background:var(--deep)}
.od-deep .proof{background:transparent;color:var(--on-dark)}
.od-deep .proof{border-bottom-color:var(--rule-dark)}
.od-deep .light .lede,.od-deep .light p,.od-deep .light li{color:var(--on-dark-2)}
.od-deep .light .eyebrow{color:var(--cyan)}
.od-deep .light em,.od-deep .cs-block h4,.od-deep .figs .k,.od-deep .proxies li:last-child,.od-deep .proxies li:last-child .to{color:var(--cyan)}
.od-deep .light h2,.od-deep .light h3,.od-deep .light h4,.od-deep .light .sec-head h2,.od-deep .story blockquote,.od-deep .signoff,.od-deep .service h3,.od-deep .feature h3,.od-deep .quote p,.od-deep .quote footer b,.od-deep .cs-block p,.od-deep .cs-block li,.od-deep .toolkit-grid li,.od-deep .sectors span{color:var(--on-dark)}
.od-deep .light .btn-ghost{border-color:rgba(176,216,228,.4);color:var(--on-dark)}
.od-deep .light .btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.od-deep .proxies,.od-deep .proxies li,.od-deep .service ul,.od-deep .service li,.od-deep .toolkit-grid ul,.od-deep .toolkit-grid li{border-color:var(--rule-dark)}
.od-deep .proxies li .to,.od-deep .service .tag,.od-deep .service p,.od-deep .feature .sub,.od-deep .figs .v,.od-deep .cap,.od-deep .quote footer,.od-deep .svc-key{color:var(--on-dark-2)}
.od-deep .services,.od-deep .figs{background:var(--rule-dark);border-color:var(--rule-dark)}
.od-deep .service,.od-deep .feature,.od-deep .quote,.od-deep .toolkit-figure,.od-deep .toolkit-embed,.od-deep .figs div,.od-deep .sectors span{background:rgba(6,20,48,.55);border-color:var(--rule-dark)}
.od-deep .service li.measured::before,.od-deep .svc-key i.measured,.od-deep .toolkit-grid li::before{border-top-color:var(--cyan)}
.od-deep .chip{background:rgba(6,20,48,.6);border-color:var(--rule-dark);color:var(--on-dark-2)}
.od-deep .chip.ok{color:#5FCDA2;border-color:rgba(95,205,162,.4)} .od-deep .chip.draft{color:var(--mist);border-color:rgba(176,216,228,.4)} .od-deep .chip.hist{color:var(--cyan);border-color:rgba(98,214,232,.4)}
.od-deep #rest > section#contact,.od-deep.od-rise #rest > section#contact{background:linear-gradient(180deg,transparent 0%,var(--night) 100%)}   /* from the page's blue into night at the footer, as on the About page; the id outweighs the later transparent rule for the risen sections */
.od-deep footer.site{background:var(--band)}
.od-deep .nav{background:var(--band)}

/* phone overrides for the deck, after the deck rules they must beat */
@media (max-width:760px){.od-panel.deck .od-chart{height:150px}.od-deck{max-height:150px}}

/* the stacked panel's charts share its height (set from the copy block on the home page); last, so it wins */
@media (min-width:761px){.od-panel.od-stack .od-chart,.od-panel.od-stack .od-map{height:100%;min-height:0}}
/* the home page's newer components on the blues */
.od-deep .ticks li{color:var(--on-dark);border-color:var(--rule-dark)}
.od-deep .ticks li::before{border-color:var(--cyan)}
.od-deep .pull{color:var(--on-dark);border-color:var(--cyan)}
.od-deep .prob-points > div,.od-deep .prob-points .stakes,.od-deep .study-part{border-color:var(--rule-dark)}
.od-deep .prob-points p,.od-deep .study-part p,.od-deep .ext-row p,.od-deep .cols3 p{color:var(--on-dark-2)}
.od-deep .prob-points .stakes,.od-deep .prob-points .close{color:var(--on-dark)}
.od-deep .study-part h4,.od-deep .cols3 .tail,.od-deep .ext-option{color:var(--cyan)}
.od-deep .fig .cap{color:var(--on-dark-2)}
.od-deep .ph-empty{border-color:var(--rule-dark);color:var(--on-dark-2);background:rgba(6,20,48,.4)}
.od-deep .logos.panel{background:rgba(6,20,48,.55);border-color:var(--rule-dark)}
.od-deep .split .fig .ph-live{border-color:var(--rule-dark)}
.od-deep .signoff.big{color:var(--on-dark)}
/* the first section below the sea is drawn up over the held sea, so it fades in at the top of the
   screen as the words and panel fade out; the page's scroll handler sets its opacity */
.od-deep #rest > section{opacity:calc(var(--enter,1) * var(--exit,1))}   /* each fades in as it rises into view and out as it leaves (site.js, sectionFades) */
.od-deep #rest > section:first-child{position:relative;z-index:3;margin-top:-100vh;background:var(--night);opacity:calc(var(--handover,0) * var(--exit,1))}
/* the first section's fill is the water's own colour at the end of the descent (--water, set by ocean.js), opaque over the sea, and it dissolves over the section's last stretch into the water rising behind the page */
.od-deep.od-rise #rest > section:first-child{background:linear-gradient(to bottom,var(--water,var(--night)) 0,var(--water,var(--night)) calc(100% - 80vh),transparent 100%)}

/* the sections after the first carry no fill of their own on the home page: the water behind them rises from night to blue as the page is scrolled (site.js, sectionFades) */
.od-deep.od-rise #rest > section:not(:first-child){background:transparent}
.od-deep.od-rise footer.site{background:var(--band);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--rule-dark)}   /* the footer stays distinct, in the header's own band */