/* ===== product page interactive components (shared) ===== */
/* Used by: mysql-backup, mariadb-backup, mongodb-backup, postgresql-backup */
/* Relies on the design-system variables defined in home.css */

/* ---- interactive hero product window (clean, frameless) ---- */
.pw{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 44px 84px -44px rgba(20,40,90,.55);}
.pw-shots{position:relative;aspect-ratio:16/9;background:#eef1f6;overflow:hidden;}
.pw-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transform:scale(1.015);transition:opacity .5s ease,transform .6s ease;}
.pw-shot.on{opacity:1;transform:none;}
.pw-tabs{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;}
.pw-tab{flex:1 1 0;min-width:104px;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--card);border:1px solid var(--line);color:var(--tx-soft);border-radius:11px;padding:9px 10px;font-size:.8rem;font-weight:700;cursor:pointer;transition:.2s;font-family:var(--font);box-shadow:0 8px 20px -16px rgba(20,40,90,.5);}
.pw-tab:hover{border-color:#b9ccf5;color:var(--tx);transform:translateY(-1px);}
.pw-tab.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 10px 22px -10px rgba(79,70,229,.6);}
.pw-tab i{font-size:.95rem;}

/* ---- interactive how-to walkthrough ---- */
.htu{display:grid;grid-template-columns:.82fr 1.18fr;gap:34px;align-items:start;}
.htu-steps{display:flex;flex-direction:column;gap:10px;}
.htu-step{text-align:left;width:100%;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 17px;cursor:pointer;display:flex;gap:14px;align-items:flex-start;transition:transform .2s,border-color .2s,background .2s,box-shadow .2s;box-shadow:0 10px 30px -24px rgba(20,40,90,.5);font-family:var(--font);}
.htu-step:hover{border-color:#b9ccf5;transform:translateX(3px);}
.htu-step.on{border-color:var(--blue);background:#f3f7ff;box-shadow:0 16px 40px -26px rgba(37,99,235,.55);}
.htu-num{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-family:var(--mono);font-size:.88rem;background:#eef4ff;color:var(--blue);border:1px solid var(--line);transition:.2s;}
.htu-step.on .htu-num{background:var(--grad);color:#fff;border-color:transparent;}
.htu-step .tx h4{margin:0 0 3px;font-size:1rem;font-weight:800;color:var(--tx);}
.htu-step .tx p{margin:0;font-size:.85rem;color:var(--tx-soft);line-height:1.5;}
.htu-stage{position:sticky;top:88px;}
.htu-frame{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 40px 84px -44px rgba(20,40,90,.55);background:#eef1f6;}
.htu-shotwrap{position:relative;aspect-ratio:16/9;background:#eef1f6;overflow:hidden;}
.htu-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transition:opacity .45s ease;}
.htu-shot.on{opacity:1;}
@media(max-width:860px){.htu{grid-template-columns:1fr;gap:22px;}.htu-stage{position:static;order:-1;}}

/* ---- byline / freshness bar (E-E-A-T) ---- */
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 20px;box-shadow:0 12px 34px -26px rgba(20,40,90,.5);}
.byline .bl-av{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:1.15rem;background:linear-gradient(135deg,#2563eb,#7c3aed);flex:none;}
.byline .bl-main{font-size:.9rem;color:var(--tx);}
.byline .bl-main b{font-weight:800;}
.byline .bl-main span{color:var(--tx-mut);}
.byline .bl-tags{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px;}
.byline .bl-tags span{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;color:var(--tx-soft);background:var(--paper-2);border:1px solid var(--line);border-radius:100px;padding:5px 12px;}
.byline .bl-tags i{color:var(--green);}

/* ---- references (authoritativeness) ---- */
.refs{max-width:900px;margin:36px auto 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:24px 26px;box-shadow:0 16px 44px -30px rgba(20,40,90,.5);}
.refs h4{margin:0 0 6px;font-size:1rem;font-weight:800;display:flex;align-items:center;gap:8px;}
.refs p{margin:0 0 14px;font-size:.86rem;color:var(--tx-mut);}
.refs ul{margin:0;padding-left:20px;display:grid;gap:8px;}
.refs li{font-size:.9rem;color:var(--tx-soft);}
.refs a{color:var(--blue);font-weight:600;}
.refs a:hover{text-decoration:underline;}

/* ---- other databases ---- */
/* auto-fit, so adding an engine to includes/other-databases.php needs no CSS change */
.odb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:16px;max-width:1120px;margin:0 auto;}
.odb-card{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;transition:transform .2s,border-color .2s,box-shadow .2s;box-shadow:0 10px 30px -24px rgba(20,40,90,.5);}
a.odb-card:hover{transform:translateY(-3px);border-color:#b9ccf5;box-shadow:0 18px 40px -24px rgba(37,99,235,.5);}
.odb-card.is-here{background:var(--paper-2);border-style:dashed;}
.odb-logo{width:44px;height:44px;border-radius:11px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;padding:8px;flex:none;}
.odb-logo img{width:100%;height:100%;object-fit:contain;}
.odb-card h4{margin:0 0 2px;font-size:1rem;font-weight:800;color:var(--tx);}
.odb-tool{font-size:.8rem;font-weight:600;color:var(--tx-mut);font-family:var(--mono);display:inline-flex;align-items:center;gap:5px;}
a.odb-card:hover .odb-tool{color:var(--blue);}
@media(max-width:820px){.odb-grid{grid-template-columns:repeat(2,1fr);}}
/* at phone width two cards leave ~70px for the label, so "PostgreSQL" breaks
   mid-word — one per row keeps every name and tool on one line */
@media(max-width:600px){.odb-grid{grid-template-columns:1fr;gap:12px;}.odb-card{padding:14px 16px;}}

/* ---- security console: sticky left panel + Windows-style window controls ---- */
/* top-align the grid so the shorter console can stick within the taller text column */
.enc-wrap{align-items:start;}
.enc-console{position:sticky;top:88px;}
@media(max-width:880px){.enc-console{position:static;}}

/* the app is a Windows tool, so use Windows title-bar controls instead of macOS dots */
.enc-bar .t{margin-left:0;}
.win-ctrls{margin-left:auto;display:inline-flex;align-items:center;gap:18px;}
.enc-bar .win-ctrls i{width:auto;height:auto;border-radius:0;font-size:.72rem;line-height:1;color:var(--tx-on-mut);}
.enc-bar .win-ctrls i:last-child:hover{color:#ff5f57;}

/* ---- connection panel facsimile ----------------------------------------
   The app is a GUI, so these blocks show the fields you fill in, not a config
   file you write. Everything stays real text (no screenshots) so it indexes. */
.ui-panel{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:inset 0 1px 0 #fff;}
.ui-bar{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-mut);margin:2px 2px 12px;}
.ui-bar .ui-step{background:var(--blue);color:#fff;border-radius:6px;font-size:.66rem;padding:2px 7px;letter-spacing:.04em;}
.ui-fields{display:flex;flex-direction:column;gap:8px;}
.ui-field{display:grid;grid-template-columns:104px 1fr;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 12px;}
.ui-field .lab{font-size:.76rem;font-weight:700;color:var(--tx-mut);}
.ui-field .val{font-family:var(--mono);font-size:.82rem;color:var(--tx);overflow-wrap:anywhere;}
.ui-field .val.mut{color:var(--tx-mut);font-style:italic;font-family:inherit;}
.ui-field.tick .val{display:flex;align-items:center;gap:7px;font-family:inherit;font-weight:600;}
.ui-field .box{width:15px;height:15px;border-radius:4px;background:var(--blue);color:#fff;display:inline-grid;place-items:center;font-size:.62rem;flex:none;}
.ui-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;}
.ui-btn{display:inline-flex;align-items:center;gap:7px;background:var(--blue);color:#fff;border-radius:9px;font-size:.8rem;font-weight:700;padding:8px 14px;box-shadow:0 8px 18px -12px rgba(37,99,235,.9);}
.ui-ok{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:#15803d;}
.ui-note{margin:10px 2px 0;font-size:.76rem;color:var(--tx-mut);}
@media(max-width:520px){.ui-field{grid-template-columns:1fr;gap:2px;}}