/* =========================================================
   New Hire Setup Guide — page-specific styles.
   Only linked from new-hire-setup.html. Ported from the
   former Apps Script Index.html with two changes:
   1. Every rule is now scoped under .setup-guide (wrap the
      app's markup in <div class="setup-guide">) so generic
      names like .header/.card/.btn/.field/.notice can't leak
      into or collide with other pages' styles.
   2. The page's own <body> reset is gone — layout.css owns
      that — and the inline "support" block is dropped since
      the shared footer already covers that.
   3. #lightbox is gone from here — it now lives in css/guide.css,
      shared with the standalone "All Guides" step-guide pages.
      Also link css/guide.css and js/guide.js on this page.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap');

.setup-guide, .setup-guide *, .setup-guide *::before, .setup-guide *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.setup-guide {
  --bg:#f5f6f8;--surface:#fff;--border:#e2e5ea;--border-strong:#cfd5df;
  --text:#111827;--muted:#6b7280;--accent:#3b6ef0;--accent-light:#eef2fd;
  --success:#16a34a;--danger:#dc2626;--warning:#ca8a04;--sub-bg:#f9fafb;--r:10px;
  font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);font-size:16px;line-height:1.6;
}

.setup-guide .header{background:var(--surface);border-bottom:1px solid var(--border);padding:15px 20px 14px}
.setup-guide .brand{display:flex;align-items:center;gap:9px;min-width:0}
.setup-guide .hicon{width:32px;height:32px;background:var(--accent);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.setup-guide .header h1{font-size:18px;font-weight:700;line-height:1.25}
.setup-guide .header p{font-size:13px;color:var(--muted);margin-left:41px}
.setup-guide .main{padding:16px 20px 28px}
.setup-guide .view{display:none}
.setup-guide .view.active{display:block}
.setup-guide .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px;margin-bottom:14px;box-shadow:0 1px 2px rgba(17,24,39,.04);max-width:820px;margin-left:auto;margin-right:auto}
.setup-guide .card-title{font-size:17px;font-weight:700;margin-bottom:5px}
.setup-guide .card-sub{font-size:14px;color:var(--muted);margin-bottom:14px}

.setup-guide .field{margin-bottom:12px}
.setup-guide .field label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:5px}
.setup-guide .field select{width:100%;padding:11px 34px 11px 12px;border:1.5px solid var(--border);border-radius:var(--r);font-family:inherit;font-size:15px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 9px center;appearance:none;color:var(--text)}
.setup-guide .field select:focus{outline:none;border-color:var(--accent)}

.setup-guide .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 14px;border-radius:var(--r);border:1.5px solid var(--border);background:#fff;color:var(--text);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:.15s;white-space:nowrap}
.setup-guide .btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.setup-guide .btn:disabled{opacity:.5;cursor:not-allowed}
.setup-guide .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.setup-guide .btn-primary:hover:not(:disabled){background:#2d5cd9;color:#fff}
.setup-guide .btn-block{width:100%}

.setup-guide .back-link{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:600;color:var(--accent);cursor:pointer;background:none;border:none;font-family:inherit;padding:0;margin-bottom:12px}
.setup-guide .guide-title{font-size:20px;font-weight:700;margin-bottom:3px}
.setup-guide .guide-subtitle{font-size:13.5px;color:var(--muted);margin-bottom:14px}
.setup-guide .progress-wrap{background:var(--border);border-radius:99px;height:5px;margin-bottom:3px;overflow:hidden}
.setup-guide .progress-bar{height:100%;background:var(--accent);border-radius:99px;transition:width .3s ease}
.setup-guide .progress-label{font-size:12.5px;color:var(--muted);margin-bottom:14px;text-align:right}

.setup-guide .check-item{border:1.5px solid var(--border);border-radius:var(--r);background:var(--surface);margin-bottom:7px;transition:border-color .15s,background .15s}
.setup-guide .check-item.checked{border-color:var(--success);background:#f0fdf4}
.setup-guide .check-head{display:flex;align-items:flex-start;gap:10px;padding:12px 14px}
.setup-guide .check-left{display:flex;align-items:flex-start;gap:11px;cursor:pointer;flex:1;min-width:0}
.setup-guide .cbox{width:22px;height:22px;flex-shrink:0;margin-top:2px;border:1.5px solid var(--border);border-radius:6px;background:var(--surface);display:flex;align-items:center;justify-content:center;transition:all .15s;cursor:pointer;padding:0}
.setup-guide .cbox:hover{border-color:var(--accent)}
.setup-guide .check-item.checked .cbox{background:var(--success);border-color:var(--success)}
.setup-guide .cbox svg{display:none}
.setup-guide .check-item.checked .cbox svg{display:block}
.setup-guide .item-name{font-size:16px;font-weight:700;line-height:1.4;padding-top:1px}
.setup-guide .check-item.checked .item-name{color:var(--muted);text-decoration:line-through}
.setup-guide .item-note{font-size:13px;color:var(--muted);font-weight:500;margin-top:4px;line-height:1.45}
.setup-guide .check-item.checked .item-note{text-decoration:none}
.setup-guide .steps-btn{flex-shrink:0;padding:7px 10px;border-radius:7px;font-size:13px;font-weight:700;color:var(--accent);background:var(--accent-light);border:none;cursor:pointer;font-family:inherit;white-space:nowrap;margin-top:1px}
.setup-guide .steps-btn:hover,.setup-guide .steps-btn.open{background:#d4e0fb}
.setup-guide .steps-panel{display:none;margin:0 12px 11px;padding:10px 12px;background:#f8f9fe;border:1px solid #dde5fa;border-radius:var(--r)}
.setup-guide .steps-panel.open{display:block}
.setup-guide .step-row{display:flex;gap:9px;padding:6px 0;border-bottom:1px solid #edf1fc;line-height:1.5}
.setup-guide .step-row:last-child{border-bottom:none;padding-bottom:0}
.setup-guide .step-num{flex-shrink:0;width:22px;height:22px;background:var(--accent);color:#fff;border-radius:50%;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px}
.setup-guide .step-text{flex:1;font-size:14px;color:var(--text)}
.setup-guide .step-img-wrap{margin-top:6px}
.setup-guide .step-img{display:block;max-width:82%;max-height:220px;width:auto;height:auto;border-radius:6px;border:1px solid var(--border);object-fit:contain;cursor:zoom-in}
.setup-guide .step-img:hover{opacity:.92}
.setup-guide .img-fallback{font-size:10.5px;color:var(--muted);font-style:italic;display:none;margin-top:2px}

.setup-guide .complete-banner{display:none;background:#f0fdf4;border:1.5px solid #86efac;border-radius:var(--r);padding:12px 14px;font-size:15px;font-weight:700;color:var(--success);text-align:center;margin-top:12px}
.setup-guide .complete-banner.visible{display:block}
.setup-guide .notice{padding:10px 12px;border:1px solid var(--border);background:#f8fafc;border-radius:var(--r);font-size:12px;color:var(--muted)}
.setup-guide .notice strong{color:var(--text)}
/* Department notes — the sheet's newHireNotes column */
.setup-guide .notice-notes{border-color:#dde5fa;background:#f8f9fe;color:var(--text);font-size:13px;line-height:1.55}
.setup-guide .notes-title{font-weight:700;font-size:12.5px;color:var(--accent);margin-bottom:4px}
.setup-guide .notes-text{white-space:pre-line;overflow-wrap:anywhere}
.setup-guide .notes-text a{color:var(--accent)}

.setup-guide .hidden{display:none!important}

/* Center the active view in the leftover vertical space instead of
   leaving it stranded at the top with a gap above the footer (the
   sticky-footer pattern in layout.css stretches .page-content to
   fill the viewport on short pages, e.g. before a department is
   picked). Scoped to this page only. */
body[data-page="new-hire-setup"] .page-content{display:flex;flex-direction:column}
.setup-guide{display:flex;flex-direction:column;flex:1}
.setup-guide .main{flex:1;display:flex;flex-direction:column;justify-content:center}

/* #lightbox rules now live in css/guide.css, shared with the standalone guide pages */

@media(max-width:600px){
  .setup-guide .step-img{max-width:100%}
}

/* Data source line + refresh link under the department picker */
.setup-guide .source-line{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--muted)}
.setup-guide .source-line a{color:var(--muted);text-decoration:none;font-weight:600;white-space:nowrap}
.setup-guide .source-line a:hover{color:var(--accent)}