/* HYBRI8 Recovery V3 — premium visual layer */
.recovery-v3-screen{
  --recovery-copper:#d5a173;
  --recovery-copper-hi:#f0c49d;
  --recovery-ink:#071016;
  --recovery-glass:rgba(13,23,29,.82);
  background:
    radial-gradient(circle at 78% 0,rgba(231,185,143,.16),transparent 28rem),
    radial-gradient(circle at 4% 42%,rgba(126,164,177,.055),transparent 24rem),
    linear-gradient(180deg,#0a1318 0%,#071016 42%,#05090b 100%);
}
.recovery-v3-screen .shell{width:min(1040px,100%)}
.recovery-v3-screen .top{
  border-bottom:1px solid rgba(231,185,143,.12);
  background:linear-gradient(180deg,rgba(7,16,22,.94),rgba(7,16,22,.72),rgba(7,16,22,0));
}
.recovery-v3-screen .brand{letter-spacing:.075em}
.recovery-v3-screen .mark{
  border-color:rgba(240,196,157,.38);
  background:linear-gradient(145deg,#2b2119,#171411 74%);
  box-shadow:0 14px 36px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.06);
}
.recovery-v3-screen .back{
  min-height:44px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.075);background:rgba(255,255,255,.025);
}

/* Editorial recovery hero */
.recovery-v3-screen .hero{
  min-height:320px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(26px,5vw,48px);border-radius:32px;border-color:rgba(231,185,143,.24);
  background:
    linear-gradient(180deg,rgba(255,255,255,.02),transparent 28%),
    radial-gradient(circle at 82% 18%,rgba(240,196,157,.17),transparent 20rem),
    linear-gradient(142deg,#171a1b 0%,#10191d 56%,#0a1013 100%);
  box-shadow:0 32px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.045);
}
.recovery-v3-screen .hero:before{
  content:"RECOVER / ADAPT / RETURN";position:absolute;top:28px;right:30px;
  color:rgba(240,196,157,.46);font-size:10px;font-weight:900;letter-spacing:.18em;
}
.recovery-v3-screen .hero:after{right:-8px;bottom:-102px;font-size:300px;color:rgba(240,196,157,.045)}
.recovery-v3-screen .hero .kicker{color:var(--recovery-copper-hi);letter-spacing:.22em}
.recovery-v3-screen .hero h1{
  max-width:820px;margin:13px 0 16px;font-size:clamp(44px,8.2vw,76px);line-height:.91;
  letter-spacing:-.065em;text-wrap:balance;text-shadow:0 12px 36px rgba(0,0,0,.26);
}
.recovery-v3-screen .hero p{max-width:690px;font-size:15px;line-height:1.65;color:#cbd2ce}

/* Protocol gallery */
.recovery-v3-screen .grid.two{gap:16px;margin-top:20px}
.recovery-v3-screen .card{
  position:relative;min-height:210px;padding:24px;border-radius:26px;overflow:hidden;
  border-color:rgba(231,185,143,.17);
  background:
    radial-gradient(circle at 100% 0,rgba(213,161,115,.1),transparent 15rem),
    linear-gradient(145deg,rgba(19,29,34,.97),rgba(8,14,18,.98));
  box-shadow:0 20px 56px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.035);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.recovery-v3-screen .card:before{
  content:"";position:absolute;inset:0 auto 0 0;width:2px;
  background:linear-gradient(180deg,transparent,rgba(240,196,157,.72),transparent);opacity:.7;
}
.recovery-v3-screen .card:nth-child(2n){
  background:radial-gradient(circle at 100% 0,rgba(139,171,181,.07),transparent 15rem),linear-gradient(145deg,rgba(17,27,32,.97),rgba(8,14,18,.98));
}
.recovery-v3-screen .card .kicker{display:inline-flex;align-items:center;gap:8px;color:#dcb28e;letter-spacing:.18em}
.recovery-v3-screen .card .kicker:before{content:"";width:18px;height:1px;background:currentColor;opacity:.55}
@media(hover:hover) and (pointer:fine){
  .recovery-v3-screen .card:hover{transform:translateY(-3px);border-color:rgba(240,196,157,.34);box-shadow:0 28px 68px rgba(0,0,0,.34)}
}

/* Protocol output / result readability */
.recovery-v3-screen #bodymap,
.recovery-v3-screen #flow,
.recovery-v3-screen #prerace,
.recovery-v3-screen #sleep{
  position:relative;margin-top:18px;padding:18px 18px 18px 20px;min-height:112px;
  border:1px solid rgba(255,255,255,.075);border-radius:18px;
  background:linear-gradient(145deg,rgba(4,10,13,.62),rgba(13,22,27,.7));
  color:#eef2ef;font-size:13px;font-weight:700;line-height:1.75;letter-spacing:-.01em;
  overflow-wrap:anywhere;box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.recovery-v3-screen #bodymap:before,
.recovery-v3-screen #flow:before,
.recovery-v3-screen #prerace:before,
.recovery-v3-screen #sleep:before{
  content:"LIVE PROTOCOL";display:block;margin-bottom:10px;color:rgba(240,196,157,.68);
  font-size:10px;font-weight:950;line-height:1;letter-spacing:.17em;
}
.recovery-v3-screen #flow{color:#f2d2b7}
.recovery-v3-screen #prerace{color:#dde6e1}
.recovery-v3-screen #sleep{color:#c9d7d0}

/* Quiet protocol indexing */
.recovery-v3-screen .card:after{
  position:absolute;right:20px;top:18px;color:rgba(240,196,157,.16);
  font-size:34px;font-weight:950;line-height:1;letter-spacing:-.06em;pointer-events:none;
}
.recovery-v3-screen .card:nth-child(1):after{content:"01"}
.recovery-v3-screen .card:nth-child(2):after{content:"02"}
.recovery-v3-screen .card:nth-child(3):after{content:"03"}
.recovery-v3-screen .card:nth-child(4):after{content:"04"}
.recovery-v3-screen .card:nth-child(3),.recovery-v3-screen .card:nth-child(4){margin-top:2px}


/* RECOVERY DESKTOP WORKSPACE X22 — asymmetric protocol gallery, mobile chronology unchanged */
@media(min-width:1180px){
  .recovery-v3-screen .shell{
    width:min(1240px,calc(100% - 210px));
    padding-bottom:56px;
  }
  .recovery-v3-screen .hero{
    min-height:360px;
    padding:40px 42px;
  }
  .recovery-v3-screen .hero h1{
    max-width:780px;
    font-size:clamp(58px,5.6vw,78px);
  }
  .recovery-v3-screen .grid.two{
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:18px;
  }
  .recovery-v3-screen .grid.two>.card:nth-child(1){grid-column:span 7}
  .recovery-v3-screen .grid.two>.card:nth-child(2){grid-column:span 5}
  .recovery-v3-screen .grid.two>.card:nth-child(3){grid-column:span 5}
  .recovery-v3-screen .grid.two>.card:nth-child(4){grid-column:span 7}
  .recovery-v3-screen .grid.two>.card{
    min-height:290px;
    padding:28px;
  }
  .recovery-v3-screen :is(#bodymap,#flow,#prerace,#sleep){
    min-height:150px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    font-size:14px;
  }
}