/* =========================================================
     InfyBooks Help Center — builds on style.css tokens.
     No-JS: every article is visible as one long page.
     With JS (html.js): one article shows at a time, routed by #hash.
     ========================================================= */

  .nav-links a.is-current{ color:var(--primary); }

  /* ---------- Hero / search band ---------- */
  .help-hero{
    background:linear-gradient(160deg, var(--primary) 0%, var(--primary-700) 100%);
    padding:64px 0 72px;
    position:relative;
  }
  .help-hero-inner{ text-align:center; max-width:760px; margin:0 auto; }
  .help-hero .eyebrow{ color:var(--teal); justify-content:center; }
  .help-hero .eyebrow::before{ background:var(--teal); }
  .help-hero h1{ color:#fff; font-size:clamp(30px,4vw,46px); line-height:1.1; margin-top:18px; }
  .help-hero p{ color:rgba(255,255,255,0.78); font-size:17px; line-height:1.6; margin:16px auto 0; max-width:600px; }
  .help-hero-tags{
    margin-top:22px; display:flex; flex-wrap:wrap; gap:8px 10px; justify-content:center; align-items:center;
    font-size:13px; color:rgba(255,255,255,0.6);
  }
  .help-hero-tags a{
    color:#fff; border:1px solid rgba(255,255,255,0.28); border-radius:999px; padding:5px 12px;
    transition:border-color .15s var(--ease), background .15s var(--ease);
  }
  .help-hero-tags a:hover{ border-color:var(--teal); background:rgba(83,193,174,0.12); }

  /* compact band on article routes */
  body.on-article .help-hero{ padding:22px 0; }
  body.on-article .help-hero .eyebrow,
  body.on-article .help-hero h1,
  body.on-article .help-hero p,
  body.on-article .help-hero-tags{ display:none; }
  body.on-article .help-search{ margin-top:0; }

  /* ---------- Search ---------- */
  .help-search{ position:relative; margin:30px auto 0; max-width:640px; text-align:left; }
  .help-search .hs-icon{
    position:absolute; left:18px; top:50%; transform:translateY(-50%);
    width:19px; height:19px; color:var(--muted-2); pointer-events:none;
  }
  .help-search input{
    width:100%; font-family:'Sora',sans-serif; font-size:15.5px; color:var(--ink);
    background:#fff; border:none; border-radius:999px;
    padding:16px 60px 16px 50px;
    box-shadow:0 18px 40px -18px rgba(0,0,0,0.45);
  }
  .help-search input::placeholder{ color:var(--muted-2); }
  .help-search input:focus{ outline:3px solid var(--teal); outline-offset:2px; }
  .help-search input::-webkit-search-cancel-button{ -webkit-appearance:none; }
  .help-search kbd{
    position:absolute; right:18px; top:50%; transform:translateY(-50%);
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--muted-2);
    border:1px solid var(--line-strong); border-radius:6px; padding:2px 8px; background:var(--paper-soft);
  }
  .search-results{
    display:none;
    position:absolute; left:0; right:0; top:calc(100% + 10px); z-index:40;
    background:#fff; border:1px solid var(--line); border-radius:var(--radius-m);
    box-shadow:0 30px 60px -20px rgba(0,20,40,0.35);
    max-height:min(460px, 60vh); overflow-y:auto; padding:8px;
  }
  .search-results.show{ display:block; }
  .sr-item{
    display:block; padding:11px 14px; border-radius:10px; color:var(--ink);
  }
  .sr-item:hover, .sr-item.active{ background:var(--primary-100); }
  .sr-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
  .sr-title{ font-weight:600; font-size:14.5px; }
  .sr-group{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--teal-600); white-space:nowrap; }
  .sr-snippet{ font-size:13px; color:var(--muted); margin-top:3px; line-height:1.5; }
  .sr-snippet mark, .sr-title mark{ background:rgba(83,193,174,0.28); color:inherit; border-radius:3px; padding:0 2px; }
  .sr-empty{ padding:18px 14px; font-size:14px; color:var(--muted); }

  /* ---------- Three-column layout ---------- */
  .help-layout{
    max-width:1320px; margin:0 auto; padding:0 32px;
    display:grid; grid-template-columns:250px minmax(0,1fr) 210px; gap:48px;
    align-items:start;
  }
  html:not(.js) .help-layout{ grid-template-columns:250px minmax(0,1fr); }
  html:not(.js) .help-toc{ display:none; }

  /* ---------- Left navigation ---------- */
  .help-nav{
    position:sticky; top:74px;
    max-height:calc(100vh - 74px); overflow-y:auto;
    padding:32px 6px 40px 0;
    scrollbar-width:thin;
  }
  .nav-group + .nav-group{ margin-top:22px; }
  .nav-group-title{
    font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--muted-2); font-weight:500; margin:0 0 8px 12px;
  }
  .help-nav ul{ display:flex; flex-direction:column; gap:1px; }
  .help-nav a{
    display:block; padding:7px 12px; border-radius:8px;
    font-size:14px; color:var(--muted); line-height:1.35;
    border-left:2px solid transparent;
    transition:background .15s var(--ease), color .15s var(--ease);
  }
  .help-nav a:hover{ background:var(--paper-soft); color:var(--ink); }
  .help-nav a.active{ background:var(--primary-100); color:var(--primary); font-weight:600; border-left-color:var(--teal); border-radius:0 8px 8px 0; }

  .nav-drawer-btn{ display:none; }
  .nav-drawer-close{ display:none; }
  /* fixed-position, so it never takes a grid cell */
  .nav-scrim{ display:none; position:fixed; inset:0; z-index:110; background:rgba(10,15,20,0.45); }

  /* ---------- Main article column ---------- */
  .help-main{ padding:36px 0 80px; min-width:0; }
  .crumbs{
    display:flex; flex-wrap:wrap; align-items:center; gap:6px;
    font-size:13px; color:var(--muted-2); margin-bottom:18px; min-height:20px;
  }
  .crumbs a{ color:var(--muted); }
  .crumbs a:hover{ color:var(--primary); }
  .crumbs .sep{ color:var(--line-strong); }
  body:not(.on-article) .crumbs{ display:none; }

  html.js .doc{ display:none; }
  html.js .doc.active{ display:block; animation:fadeInUp .35s var(--ease) both; }
  html:not(.js) .doc + .doc{ margin-top:72px; padding-top:48px; border-top:1px solid var(--line); }

  .doc-kicker{
    font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--teal-600); font-weight:500;
  }
  .doc h1{ font-size:clamp(28px,3vw,36px); line-height:1.15; margin-top:10px; }
  .doc-lead{ font-size:17.5px; line-height:1.65; color:var(--muted); margin:16px 0 0; }
  .doc-meta{
    display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:18px; padding-bottom:26px; border-bottom:1px solid var(--line);
    font-size:12.5px; color:var(--muted-2); font-family:'IBM Plex Mono',monospace;
  }
  .doc-meta span{ display:inline-flex; align-items:center; gap:6px; }
  .doc-meta svg{ width:14px; height:14px; }

  .doc h2{
    font-size:23px; line-height:1.25; margin:48px 0 0; padding-top:4px;
    scroll-margin-top:96px;
  }
  .doc h3{ font-size:17px; margin:30px 0 0; letter-spacing:-0.01em; scroll-margin-top:96px; }
  .doc h4{ font-size:15px; margin:22px 0 0; }
  .doc p{ font-size:15.5px; line-height:1.75; color:#26323C; margin:14px 0 0; }
  .doc a:not(.btn):not(.card):not(.flow-step){ color:var(--primary); font-weight:500; text-decoration:underline; text-decoration-color:rgba(0,82,137,0.3); text-underline-offset:3px; }
  .doc a:not(.btn):not(.card):not(.flow-step):hover{ text-decoration-color:var(--primary); }
  .doc ul:not(.plain), .doc ol:not(.steps):not(.plain){
    margin:14px 0 0; padding-left:22px; font-size:15.5px; line-height:1.75; color:#26323C;
  }
  .doc ul:not(.plain){ list-style:disc; }
  .doc ol:not(.steps):not(.plain){ list-style:decimal; }
  .doc li + li{ margin-top:6px; }
  .doc li::marker{ color:var(--teal-600); }
  .doc strong{ font-weight:600; color:var(--ink); }

  /* UI labels, menu paths, inline code */
  .ui{
    font-weight:600; color:var(--ink);
    background:var(--paper-soft); border:1px solid var(--line); border-radius:6px;
    padding:1px 7px; font-size:0.93em; white-space:nowrap;
  }
  .path{
    font-family:'IBM Plex Mono',monospace; font-size:0.86em; font-weight:500;
    color:var(--primary); background:var(--primary-100); border-radius:6px; padding:2px 8px;
    white-space:nowrap;
  }
  .doc code{
    font-family:'IBM Plex Mono',monospace; font-size:0.88em; background:var(--paper-soft);
    border:1px solid var(--line); border-radius:5px; padding:1px 6px;
  }

  /* Numbered steps */
  .steps{ counter-reset:step; margin:20px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:0; }
  .steps > li{
    counter-increment:step; position:relative;
    padding:0 0 20px 50px; font-size:15.5px; line-height:1.7; color:#26323C;
  }
  .steps > li::before{
    content:counter(step);
    position:absolute; left:0; top:-1px;
    width:30px; height:30px; border-radius:50%;
    background:var(--primary); color:#fff;
    font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600;
    display:flex; align-items:center; justify-content:center;
  }
  .steps > li::after{
    content:""; position:absolute; left:14.5px; top:34px; bottom:4px; width:1.5px; background:var(--line);
  }
  .steps > li:last-child{ padding-bottom:0; }
  .steps > li:last-child::after{ display:none; }
  .steps > li + li{ margin-top:0; }

  /* Callouts */
  .callout{
    display:flex; gap:14px; align-items:flex-start;
    margin:24px 0 0; padding:16px 18px; border-radius:12px;
    border:1px solid var(--line); background:var(--paper-soft);
    font-size:14.5px; line-height:1.65; color:#26323C;
  }
  .callout svg{ width:20px; height:20px; flex-shrink:0; margin-top:2px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .callout p{ margin:0; font-size:14.5px; }
  .callout p + p{ margin-top:8px; }
  .callout .ct{ font-weight:700; display:block; margin-bottom:2px; }
  .callout.note{ background:var(--primary-100); border-color:#CFE0EC; }
  .callout.note svg{ color:var(--primary); }
  .callout.tip{ background:var(--teal-100); border-color:#C9EDE5; }
  .callout.tip svg{ color:var(--teal-600); }
  .callout.warn{ background:#FFF7E8; border-color:#F6E2B8; }
  .callout.warn svg{ color:#B7791F; }

  /* Screenshots */
  .shot{ margin:26px 0 0; }
  .shot-frame{
    border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--paper-soft);
    box-shadow:var(--shadow-card); cursor:zoom-in; position:relative;
    transition:box-shadow .2s var(--ease), transform .2s var(--ease);
  }
  .shot-frame:hover{ box-shadow:0 1px 2px rgba(10,15,20,0.04), 0 22px 44px -16px rgba(10,15,20,0.22); }
  .shot-frame img{ width:100%; height:auto; }
  .shot figcaption{ font-size:13px; color:var(--muted-2); margin-top:10px; text-align:center; }
  .shot.narrow{ max-width:560px; }

  /* Field reference tables */
  .table-wrap{ margin:20px 0 0; overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
  .doc table{ width:100%; border-collapse:collapse; font-size:14px; line-height:1.55; }
  .doc th{
    text-align:left; background:var(--paper-soft); font-weight:600; color:var(--ink);
    padding:11px 14px; border-bottom:1px solid var(--line); font-size:12.5px;
    font-family:'IBM Plex Mono',monospace; letter-spacing:0.04em; text-transform:uppercase;
  }
  .doc td{ padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; color:#26323C; }
  .doc tr:last-child td{ border-bottom:none; }
  .doc td:first-child{ font-weight:600; color:var(--ink); white-space:nowrap; }
  .req{ color:#B5443A; font-weight:700; margin-left:2px; }

  /* Status chips */
  .status{
    display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;
    letter-spacing:0.03em; text-transform:uppercase; padding:3px 9px; border-radius:999px; white-space:nowrap;
    background:#EEF1F4; color:#4B5A66;
  }
  .status.s-blue{ background:var(--primary-100); color:var(--primary); }
  .status.s-purple{ background:#F0ECFB; color:#6546C3; }
  .status.s-green{ background:var(--teal-100); color:var(--teal-600); }
  .status.s-amber{ background:#FFF3DC; color:#A2651A; }
  .status.s-red{ background:#FBEAEA; color:#B5443A; }

  /* Formula block */
  .formula{
    margin:20px 0 0; padding:18px 20px; border-radius:12px;
    background:var(--primary-700); color:#fff;
    font-family:'IBM Plex Mono',monospace; font-size:13.5px; line-height:1.9;
    overflow-x:auto;
  }
  .formula .c{ color:var(--teal); }
  .formula .m{ color:rgba(255,255,255,0.55); }

  /* Flow diagram (welcome + workflow sections) */
  .flow{ margin:22px 0 0; padding:22px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--paper-soft); }
  .flow + .flow{ margin-top:14px; }
  .flow-label{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--teal-600); margin-bottom:14px; }
  .flow-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
  .flow-step{
    display:inline-flex; align-items:center; gap:8px;
    background:#fff; border:1px solid var(--line-strong); border-radius:10px;
    padding:9px 14px; font-size:13.5px; font-weight:600; color:var(--ink);
    transition:border-color .15s var(--ease), color .15s var(--ease);
  }
  a.flow-step:hover{ border-color:var(--primary); color:var(--primary); }
  .flow-step .n{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--teal-600); }
  .flow-arrow{ color:var(--muted-2); font-size:16px; }

  /* Cards (welcome page) */
  .card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px; }
  .card{
    display:flex; flex-direction:column; gap:10px;
    background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px;
    transition:border-color .15s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
  }
  .card:hover{ border-color:var(--primary); box-shadow:var(--shadow-card); transform:translateY(-2px); }
  .card-icon{
    width:38px; height:38px; border-radius:10px; background:var(--primary-100); color:var(--primary);
    display:flex; align-items:center; justify-content:center;
  }
  .card-icon svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  .card.teal .card-icon{ background:var(--teal-100); color:var(--teal-600); }
  .card h4{ margin:0; font-size:15px; font-weight:600; color:var(--ink); }
  .card p{ margin:0; font-size:13.3px; line-height:1.55; color:var(--muted); }
  .card-big{ padding:22px; }
  .card-big h4{ font-size:16px; }
  .card .go{ margin-top:auto; font-size:12.5px; font-weight:600; color:var(--primary); font-family:'IBM Plex Mono',monospace; }

  /* Related + article footer */
  .related{ margin-top:48px; padding:22px; border:1px solid var(--line); border-radius:var(--radius-m); }
  .related h5{ margin:0 0 12px; font-size:12px; font-family:'IBM Plex Mono',monospace; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted-2); font-weight:500; }
  .related ul{ display:flex; flex-wrap:wrap; gap:8px; }
  .related a{
    display:inline-block; font-size:13.5px; font-weight:500; color:var(--ink) !important; text-decoration:none !important;
    border:1px solid var(--line-strong); border-radius:999px; padding:6px 14px;
    transition:border-color .15s var(--ease), color .15s var(--ease);
  }
  .related a:hover{ border-color:var(--primary); color:var(--primary) !important; }

  .pager{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:40px; }
  .pager a{
    display:flex; flex-direction:column; gap:4px; padding:16px 18px;
    border:1px solid var(--line); border-radius:14px;
    transition:border-color .15s var(--ease), box-shadow .2s var(--ease);
  }
  .pager a:hover{ border-color:var(--primary); box-shadow:var(--shadow-card); }
  .pager .lbl{ font-size:11.5px; font-family:'IBM Plex Mono',monospace; color:var(--muted-2); text-transform:uppercase; letter-spacing:0.08em; }
  .pager .ttl{ font-size:15px; font-weight:600; color:var(--ink); }
  .pager .next{ text-align:right; grid-column:2; }
  html:not(.js) .pager{ display:none; }

  .help-cta{
    margin-top:24px; padding:22px 24px; border-radius:var(--radius-m);
    background:var(--primary); color:#fff;
    display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  }
  .help-cta h5{ margin:0; font-size:16px; font-weight:700; }
  .help-cta p{ margin:4px 0 0; font-size:13.5px; color:rgba(255,255,255,0.75); }
  .help-cta .btn-primary{ background:var(--teal); color:var(--ink); box-shadow:none; }
  .help-cta .btn-primary:hover{ background:#67d0bd; }

  /* FAQ accordion */
  .faq{ margin-top:18px; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
  .faq details + details{ border-top:1px solid var(--line); }
  .faq summary{
    list-style:none; cursor:pointer; padding:16px 50px 16px 18px; position:relative;
    font-weight:600; font-size:15px; color:var(--ink);
  }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary::after{
    content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%);
    font-family:'IBM Plex Mono',monospace; font-size:18px; color:var(--teal-600);
  }
  .faq details[open] summary::after{ content:"–"; }
  .faq details[open] summary{ background:var(--paper-soft); }
  .faq .ans{ padding:4px 18px 18px; }
  .faq .ans p:first-child{ margin-top:8px; }

  /* ---------- Right "On this page" ---------- */
  .help-toc{ position:sticky; top:74px; padding:40px 0; max-height:calc(100vh - 74px); overflow-y:auto; }
  .help-toc h6{
    margin:0 0 12px; font-size:11px; font-family:'IBM Plex Mono',monospace; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--muted-2); font-weight:500;
  }
  .help-toc ul{ border-left:1px solid var(--line); display:flex; flex-direction:column; }
  .help-toc a{
    display:block; padding:5px 0 5px 14px; margin-left:-1px; border-left:2px solid transparent;
    font-size:13px; color:var(--muted); line-height:1.4;
    transition:color .15s var(--ease), border-color .15s var(--ease);
  }
  .help-toc a:hover{ color:var(--ink); }
  .help-toc a.active{ color:var(--primary); border-left-color:var(--teal); font-weight:600; }
  .help-toc.empty{ visibility:hidden; }

  /* ---------- Lightbox ---------- */
  .lightbox{
    display:none; position:fixed; inset:0; z-index:300;
    background:rgba(10,15,20,0.82); padding:32px;
    align-items:center; justify-content:center; cursor:zoom-out;
  }
  .lightbox.show{ display:flex; }
  .lightbox img{ max-width:min(1500px,100%); max-height:100%; border-radius:12px; box-shadow:0 40px 90px -20px rgba(0,0,0,0.6); animation:fadeInUp .25s var(--ease) both; }
  .lightbox-close{
    position:absolute; top:18px; right:18px; width:40px; height:40px; border-radius:50%;
    border:1px solid rgba(255,255,255,0.3); background:rgba(255,255,255,0.08); color:#fff;
    display:flex; align-items:center; justify-content:center;
  }
  .lightbox-close svg{ width:16px; height:16px; }

  .back-top{
    position:fixed; right:22px; bottom:22px; z-index:45;
    width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); background:#fff;
    display:flex; align-items:center; justify-content:center; color:var(--ink);
    box-shadow:var(--shadow-card); opacity:0; pointer-events:none; transform:translateY(8px);
    transition:opacity .2s var(--ease), transform .2s var(--ease), border-color .15s var(--ease);
  }
  .back-top.show{ opacity:1; pointer-events:auto; transform:none; }
  .back-top:hover{ border-color:var(--primary); color:var(--primary); }
  .back-top svg{ width:18px; height:18px; }

  /* ---------- Responsive ---------- */
  @media (max-width:1200px){
    .help-layout{ grid-template-columns:240px minmax(0,1fr); gap:40px; }
    .help-toc{ display:none; }
  }
  @media (max-width:1000px){
    .help-layout{ grid-template-columns:minmax(0,1fr); padding:0 24px; }
    html:not(.js) .help-layout{ grid-template-columns:minmax(0,1fr); }
    .nav-drawer-btn{
      display:inline-flex; align-items:center; gap:8px;
      margin:22px 0 0; padding:9px 16px; border-radius:999px;
      border:1px solid var(--line-strong); background:#fff; font-size:13.5px; font-weight:600; color:var(--ink);
    }
    .nav-drawer-btn svg{ width:16px; height:16px; }
    html:not(.js) .nav-drawer-btn{ display:none; }
    html.js .help-nav{
      position:fixed; top:0; left:0; bottom:0; z-index:120; width:min(320px, 86vw);
      max-height:none; background:#fff; padding:20px 16px 40px;
      box-shadow:20px 0 60px -20px rgba(0,20,40,0.35);
      transform:translateX(-105%); transition:transform .28s var(--ease);
    }
    html.js .help-nav.open{ transform:none; }
    html:not(.js) .help-nav{ position:static; max-height:none; padding:28px 0 0; }
    .nav-drawer-close{
      display:flex; align-items:center; justify-content:space-between;
      margin:0 0 18px 12px; font-weight:700; font-size:15px;
    }
    .nav-drawer-close button{
      width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:#fff;
      display:flex; align-items:center; justify-content:center; color:var(--muted);
    }
    .nav-drawer-close svg{ width:15px; height:15px; }
    .nav-scrim.show{ display:block; }
    .help-main{ padding-top:20px; }
    .card-grid{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:640px){
    .help-layout{ padding:0 16px; }
    .help-hero{ padding:48px 0 56px; }
    .card-grid{ grid-template-columns:1fr; }
    .pager{ grid-template-columns:1fr; }
    .pager .next{ grid-column:auto; }
    .doc td:first-child{ white-space:normal; }
    .help-search kbd{ display:none; }
    .help-search input{ padding-right:20px; font-size:15px; }
    .steps > li{ padding-left:44px; }
    .help-cta{ flex-direction:column; align-items:flex-start; }
  }
  @media print{
    header, .help-hero, .help-nav, .help-toc, .pager, .help-cta, footer, .back-top, .nav-drawer-btn{ display:none !important; }
    .help-layout{ display:block; }
  }