/* LoomiTV — installation-guide page styles */

:root{
    --radius:10px; --maxw:1160px;
  }

:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.page-head{ padding:150px 0 60px; text-align:center;}

.page-head h1{ font-size:clamp(34px,5vw,54px); margin-bottom:14px;}

.page-head p.sub{ color:var(--muted); max-width:520px; margin:0 auto; line-height:1.6;}

/* ===================== Two-column docs layout ===================== */

.docs-layout{
  display:grid; grid-template-columns:260px 1fr; gap:52px; align-items:start;
  padding-bottom:100px;
}

/* ---- Sidebar ---- */

.docs-sidebar{
  position:sticky; top:100px; max-height:calc(100vh - 130px); overflow-y:auto;
  padding-right:4px;
}

.sidebar-search{
  display:flex; align-items:center; gap:10px;
  background:var(--bg-card); border:1px solid var(--line); border-radius:8px;
  padding:11px 14px; margin-bottom:24px;
  transition:border-color .2s ease;
}

.sidebar-search:focus-within{ border-color:var(--gold); }

.sidebar-search svg{ width:15px; height:15px; stroke:var(--muted-2); flex-shrink:0; }

.sidebar-search input{ background:none; border:none; color:var(--fg); font-size:13.5px; width:100%; font-family:inherit; }

.sidebar-search input:focus{ outline:none; }

.sidebar-group{ margin-bottom:22px; }

.sidebar-group h4{
  font-family:'Inter',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:10px; padding-left:12px;
}

.sidebar-group ul{ display:flex; flex-direction:column; gap:2px; }

.sidebar-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:1px solid transparent; border-radius:8px;
  padding:9px 12px; font-family:inherit; font-size:13.5px; color:var(--muted);
  cursor:pointer; transition:background .2s ease, border-color .2s ease, color .2s ease;
}

.sidebar-item:hover{ background:var(--bg-warm); color:var(--fg); }

.sidebar-item.selected{
  background:rgba(227,166,62,0.1); border-color:rgba(227,166,62,0.4); color:var(--fg); font-weight:600;
}

.sidebar-item-icon{ width:15px; height:15px; flex-shrink:0; stroke:var(--muted-2); }

.sidebar-item.selected .sidebar-item-icon{ stroke:var(--gold); }

.sidebar-empty{ color:var(--muted-2); font-size:13px; padding:8px 12px; }

/* ---- Mobile device-drawer toggle (hidden on desktop) ---- */

.docs-mobile-bar{ display:none; }

.device-drawer-toggle{
  display:flex; align-items:center; gap:10px; width:100%;
  background:var(--bg-card); border:1px solid var(--line); border-radius:10px;
  padding:13px 16px; margin-bottom:24px; cursor:pointer; font-family:inherit; color:var(--fg);
  transition:border-color .2s ease;
}

.device-drawer-toggle:hover{ border-color:var(--line-strong); }

.device-drawer-toggle svg{ width:17px; height:17px; stroke:var(--muted-2); flex-shrink:0; }

.ddt-text{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; flex:1; min-width:0; }

.ddt-label{ font-size:10.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted-2); }

.ddt-current{ font-size:14.5px; font-weight:600; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

.ddt-chevron{ transform:rotate(90deg); }

/* ---- Mobile device drawer (off-canvas panel) ---- */

.device-drawer-backdrop{
  position:fixed; inset:0; z-index:200; background:rgba(0,0,0,0.5);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}

.device-drawer-backdrop.open{ opacity:1; pointer-events:auto; }

.device-drawer{
  position:fixed; top:0; left:0; bottom:0; z-index:201;
  width:85%; max-width:340px;
  background:var(--bg-card); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:20px;
  transform:translateX(-100%); transition:transform .3s cubic-bezier(.2,.7,.3,1);
}

.device-drawer.open{ transform:translateX(0); }

.drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }

.drawer-head h2{ font-size:18px; }

.drawer-close{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:var(--bg-warm); border:none; color:var(--muted); cursor:pointer;
  position:relative;
}

.drawer-close::before{ content:''; position:absolute; inset:-6px; }

.drawer-close svg{ width:15px; height:15px; }

.drawer-search{ margin-bottom:20px; }

.drawer-nav{ flex:1; overflow-y:auto; }

body.drawer-locked{ overflow:hidden; }

/* ---- Content ---- */

.docs-content{ min-width:0; opacity:0; transform:translateY(8px); }

.docs-content.content-in{ animation:contentIn .4s cubic-bezier(.2,.7,.3,1) forwards; }

@keyframes contentIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

.doc-header{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }

.doc-header-icon{
  width:52px; height:52px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(150deg, rgba(227,166,62,0.22), rgba(227,166,62,0.05));
  border:1px solid rgba(227,166,62,0.25);
  display:flex; align-items:center; justify-content:center;
}

.doc-header-icon svg{ width:24px; height:24px; stroke:var(--gold); }

.doc-header h2{ font-size:30px; margin-bottom:4px; }

.doc-compat{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--muted-2); }

.doc-meta{
  display:flex; flex-wrap:wrap; gap:14px;
  padding:20px; margin-bottom:40px;
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
}

.meta-item{ display:flex; align-items:center; gap:10px; flex:1; min-width:150px; }

.meta-item svg{ width:18px; height:18px; stroke:var(--gold); flex-shrink:0; }

.meta-item span{ display:flex; flex-direction:column; gap:2px; }

.meta-item strong{
  font-size:11px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted-2);
}

.diff-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; background:var(--muted-2); }

.diff-easy .diff-dot{ background:#4CD97B; }

.diff-moderate .diff-dot{ background:var(--gold); }

.doc-section{ margin-bottom:48px; }

.doc-section h3{
  display:flex; align-items:center; gap:9px;
  font-family:'Fraunces',serif; font-weight:600; letter-spacing:-0.01em;
  font-size:20px; margin-bottom:22px; padding-bottom:14px; border-bottom:1px solid var(--line);
}

.doc-section h3 svg{ width:17px; height:17px; stroke:#E2685E; }

/* -- Requirements -- */

.need-list{ display:flex; flex-direction:column; gap:12px; }

.need-list li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--muted); line-height:1.55; }

.need-check{ width:16px; height:16px; flex-shrink:0; stroke:var(--gold); margin-top:2px; }

/* -- Steps -- */

.doc-steps{ display:flex; flex-direction:column; }

.doc-step{ display:flex; gap:20px; padding-bottom:34px; position:relative; }

.doc-step::before{
  content:''; position:absolute; left:17px; top:38px; bottom:0; width:2px; background:var(--line);
}

.doc-step:last-child{ padding-bottom:0; }

.doc-step:last-child::before{ display:none; }

.doc-step-num{
  flex-shrink:0; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-warm); border:2px solid var(--gold); color:var(--gold);
  font-size:14px; font-weight:700; z-index:1;
}

.doc-step-body{ padding-top:5px; min-width:0; flex:1; }

.doc-step-body h4{
  font-family:'Fraunces',serif; font-weight:600; letter-spacing:-0.01em;
  font-size:16.5px; margin-bottom:14px; line-height:1.4;
}

.doc-step-body p{ color:var(--muted); font-size:13.5px; line-height:1.6; margin-top:14px; }

.step-shot{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  aspect-ratio:16/8; max-width:440px; overflow:hidden; position:relative;
  background:linear-gradient(150deg, var(--bg-warm), var(--bg-card));
  border:1px dashed var(--line-strong); border-radius:10px;
}

/* Real screenshot, filling the same placeholder box the dashed border
   was already reserving — overflow:hidden above clips it to the box's
   own border-radius. Falls back to the icon+label placeholder below
   (unchanged) if every known extension 404s, see handleStepImageError
   in installation-guide.js. */
.step-shot img{ width:100%; height:100%; object-fit:cover; display:block; }

.step-shot-icon{ width:26px; height:26px; stroke:var(--muted-2); }

.step-shot span{ font-size:11.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted-2); }

/* -- FAQ -- */

.faq-list{ display:flex; flex-direction:column; gap:18px; }

.faq-item{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px; }

.faq-q{ font-size:14.5px; font-weight:600; margin-bottom:6px; }

.faq-a{ color:var(--muted); font-size:13.5px; line-height:1.6; }

/* -- Troubleshooting -- */

.issue-list{ display:flex; flex-direction:column; gap:18px; }

.issue-name{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--fg); margin-bottom:5px; }

.issue-icon{ width:14px; height:14px; stroke:#E2685E; flex-shrink:0; }

.issue-fix{ font-size:13.5px; color:var(--muted); line-height:1.6; padding-left:22px; }

/* -- Support card -- */

.support-card{
  display:flex; gap:20px; align-items:flex-start;
  background:linear-gradient(150deg, rgba(227,166,62,0.09), var(--bg-card));
  border:1px solid rgba(227,166,62,0.25); border-radius:16px; padding:32px;
}

.support-icon{
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  background:rgba(227,166,62,0.14); border:1px solid rgba(227,166,62,0.3);
  display:flex; align-items:center; justify-content:center;
}

.support-icon svg{ width:22px; height:22px; stroke:var(--gold); }

.support-body h3{ font-size:20px; margin-bottom:8px; border:none; padding:0; }

.support-body p{ color:var(--muted); font-size:14px; line-height:1.6; margin-bottom:18px; max-width:480px; }

.support-body .btn-trial{ margin-bottom:16px; }

.support-response{ font-size:12.5px; color:var(--muted-2); margin-bottom:0 !important; }

.support-response strong{ color:var(--muted); }

/* ===================== Responsive ===================== */

@media (max-width:900px){
  .docs-layout{ grid-template-columns:1fr; gap:0; }

  /* The desktop sidebar is fully replaced on mobile by the drawer below —
     not shrunk, not turned sideways. */
  .docs-sidebar{ display:none; }

  .docs-mobile-bar{ display:block; }

  /* ---- Compact inline badges instead of the tall info card ---- */
  .doc-meta{
    background:none; border:none; padding:0; gap:8px; margin-bottom:28px;
  }

  .meta-item{
    flex:0 1 auto; min-width:0; gap:6px;
    background:var(--bg-card); border:1px solid var(--line); border-radius:20px;
    padding:7px 12px;
  }

  .meta-item svg{ width:14px; height:14px; }

  .meta-item span{ flex-direction:row; align-items:baseline; gap:5px; }

  .meta-item strong{ font-size:10px; }
}

@media (max-width:768px){
  body{ overflow-x:hidden; }
  .page-head{ padding:110px 0 40px; }
  .docs-layout{ padding-bottom:56px; }

  .doc-header{ gap:12px; margin-bottom:18px; }
  .doc-header-icon{ width:44px; height:44px; }
  .doc-header-icon svg{ width:20px; height:20px; }
  .doc-header h2{ font-size:24px; }

  .doc-section{ margin-bottom:32px; }
  .doc-section h3{ font-size:17px; margin-bottom:16px; padding-bottom:10px; }

  .need-list{ gap:10px; }

  .doc-step{ gap:14px; padding-bottom:22px; }
  .doc-step::before{ left:13px; }
  .doc-step-num{ width:28px; height:28px; font-size:12.5px; }
  .doc-step-body h4{ font-size:15px; margin-bottom:10px; }
  .step-shot{ max-width:100%; aspect-ratio:16/7; gap:6px; }
  .doc-step-body p{ margin-top:10px; }

  .faq-item{ padding:14px 16px; }
  .faq-list{ gap:12px; }

  .issue-list{ gap:14px; }

  .support-card{ flex-direction:column; padding:20px; gap:14px; }
  .support-body h3{ font-size:18px; }
}

@media (max-width:480px){
  .sidebar-search{ padding:10px 12px; }
  .device-drawer{ width:88%; }
}