/* Higher Self - build 1342. Fereastra de Info a uneltelor (tiOpen din js/09), incarcata ultima ca sa bata stilurile vechi din css/22 si css/24. */
/* 1342 [stated]: fereastra de Info redesenata. Card inchis in culoarea sectiunii, poza uneltei sus,
   tipografie clara (titlu serif mare, intro mai mare, sectiuni cu separator), tutorial ca un card media. */
.tiOv .tiSheet.tiV2{padding:0 !important; overflow:hidden auto; max-height:88vh; border-radius:30px !important; color:#f5efe4 !important;
  background:linear-gradient(180deg, color-mix(in srgb, var(--catFelt,#cfc6ee) 18%, #0f1a16) 0, color-mix(in srgb, var(--catFelt,#cfc6ee) 9%, #0b1210) 100%) !important;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.08) !important; scrollbar-width:none;
  --tiAcc:color-mix(in srgb, var(--catFelt,#cfc6ee) 85%, #ffffff)}
.tiSheet.tiV2::-webkit-scrollbar{display:none}
.tiV2 .tiTop{position:relative; height:190px; background-size:cover; background-position:center 62%; background-color:color-mix(in srgb, var(--catFelt,#cfc6ee) 30%, #0f1a16)}
.tiV2 .tiTop::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,16,14,0) 35%, color-mix(in srgb, var(--catFelt,#cfc6ee) 18%, #0f1a16) 100%)}
.tiV2.noHero .tiTop{height:64px; background:none}
.tiV2.noHero .tiTop::after{content:none}
.tiV2 .tiX{position:absolute; top:12px; right:12px; z-index:2; width:38px; height:38px; border:0; border-radius:50%; padding:0; display:grid; place-items:center;
  background:rgba(8,14,12,.5); color:#f5efe4; cursor:pointer; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.tiV2 .tiIn{position:relative; padding:0 22px 22px; margin-top:-34px; text-align:center}
.tiV2.noHero .tiIn{margin-top:-20px}
.tiV2 .tiEy{display:inline-block; font:700 10.5px/1 var(--font-body); letter-spacing:.2em; text-transform:uppercase; color:var(--tiAcc); padding:7px 12px; border-radius:99px;
  background:rgba(8,14,12,.55); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.tiV2 .tiH{margin:12px 0 0 !important; font-family:var(--font-title) !important; font-style:italic; font-weight:700; font-size:32px !important; line-height:1.1; color:#fff !important; text-align:center}
.tiV2 .tiRead{margin:14px auto 0 !important}
.tiV2 .tiLead{margin:14px auto 0; max-width:320px; font-size:16.5px; line-height:1.6; color:rgba(245,239,228,.92); text-align:center}
.tiV2 .tiSec{margin-top:26px}
.tiV2 .tiLbl{display:flex !important; align-items:center; gap:12px; margin:0 0 12px !important; font:700 11px/1 var(--font-body) !important; letter-spacing:.18em; text-transform:uppercase; color:var(--tiAcc) !important; text-align:center}
.tiV2 .tiLbl i{flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.22))}
.tiV2 .tiLbl i:last-child{background:linear-gradient(90deg, rgba(255,255,255,.22), transparent)}
.tiV2 ul{list-style:none; padding:0; margin:0; display:grid; gap:8px; text-align:left}
.tiV2 li{display:flex !important; align-items:center; gap:12px; margin:0 !important; padding:12px 14px !important; border-radius:16px; font-size:15px; line-height:1.45}
.tiV2 li::before{content:none !important; display:none !important}
.tiV2 li p{margin:0; color:#f5efe4}
.tiV2 li span{flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center}
.tiV2 .tiWhenL li{background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.tiV2 .tiWhenL li span{background:rgba(255,255,255,.08); color:var(--tiAcc)}
.tiV2 .tiGivesL li{padding:6px 4px !important}
.tiV2 .tiGivesL li span{width:26px; height:26px; background:var(--tiAcc); color:#13201a}
.tiV2 .tiClose{margin-top:26px !important; width:100%; height:52px; border:0 !important; border-radius:999px !important; background:#f5efe4 !important; color:#13201a !important;
  font:700 15px var(--font-body) !important; box-shadow:0 10px 24px -10px rgba(0,0,0,.6) !important; cursor:pointer}
/* tutorialul: card media, coperta patrata ca in Audio */
.tiTut{position:relative; display:flex; align-items:center; gap:14px; width:100%; margin:22px 0 0; padding:10px 12px 10px 10px; border:0; border-radius:22px; cursor:pointer; text-align:left;
  background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 14px 30px -16px rgba(0,0,0,.7);
  color:#f5efe4; font-family:var(--font-body); -webkit-tap-highlight-color:transparent; transition:transform .15s ease}
.tiTut:active{transform:scale(.985)}
.tiTutPic{flex:none; width:84px; height:84px; border-radius:16px; background-size:cover; background-position:center; box-shadow:0 8px 18px -6px rgba(0,0,0,.6)}
.tiTutTx{flex:1; display:flex; flex-direction:column; gap:3px; min-width:0}
.tiTutTx small{font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--tiAcc,#d9e8b5)}
.tiTutTx b{font-family:var(--font-title); font-size:18px; line-height:1.2; font-weight:700; color:#fff}
.tiTutTx em{font-style:normal; font-size:13.5px; opacity:.8}
.tiTutGo{flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:#f5efe4; color:#13201a; box-shadow:0 6px 16px -4px rgba(0,0,0,.5)}
.tiTutGo svg{margin-left:2px}
.tiV2 li p{text-align:left !important; flex:1}
.tiV2 .tiLbl{text-transform:uppercase !important; letter-spacing:.18em !important; font-size:11px !important}
.tiV2 .tiTop{height:210px; background-position:center 58%}

/* 1344 [stated]: poza de sus se topeste in card, sus si jos (masca, fara margine vizibila) */
.tiV2 .tiTop{background:none !important}
.tiV2 .tiTop::after{content:none}
.tiV2 .tiTopImg{position:absolute; inset:0; background-size:cover; background-position:center 58%;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.25) 0, #000 26%, #000 58%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(180deg, rgba(0,0,0,.25) 0, #000 26%, #000 58%, rgba(0,0,0,0) 100%)}
.tiV2 .tiTop::before{content:''; position:absolute; inset:0 0 auto; height:70px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--catFelt,#cfc6ee) 14%, #0f1a16) 0, rgba(15,26,22,0) 100%); opacity:.55}
/* 1344 [stated]: "Walkthrough" incape intre poza si butonul de play pe orice ecran */
.tiTut{container-type:inline-size}
.tiTutPic{width:clamp(58px, 24cqi, 84px); height:clamp(58px, 24cqi, 84px)}
.tiTutTx b{font-size:clamp(14px, 6.2cqi, 18px); overflow-wrap:normal; word-break:keep-all; hyphens:none}
.tiTutTx small{font-size:clamp(9.5px, 3.4cqi, 10.5px); letter-spacing:.14em}
.tiTutTx em{font-size:clamp(12px, 4.4cqi, 13.5px)}
.tiTutGo{width:clamp(36px, 12cqi, 44px); height:clamp(36px, 12cqi, 44px)}
.tiTut{gap:clamp(8px, 3.4cqi, 14px)}
@media (max-width:360px){ .tiV2 .tiIn{padding:0 16px 18px} }