/* =========================================================================
   QALadder — Interview prep pages  (loads AFTER theme.css)

   Serves the three generated pages: interview-manual, -automation, -sdet.
   Every colour, radius and space comes from a theme.css token — nothing here
   introduces a new one.

   The whole page is readable with JavaScript off: filters hide nodes that are
   already rendered, so nothing below depends on a script having run.
   ========================================================================= */

/* Visually hidden but reachable by screen readers. The filter <select>s and the
   search box carry real labels; sighted users get the placeholder and the
   obvious control, so the labels are hidden rather than dropped. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* A reading column, narrower than the default shell. The nav follows --shell,
   so the logo lines up with the questions rather than floating out to the left. */
:root{--shell:900px;}
.ip-wrap{max-width:var(--shell);margin:0 auto;padding:34px var(--shell-pad) 90px;}

/* ===== HEAD ============================================================= */
.ip-head{margin-bottom:26px;}
.ip-head h1{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(26px,4.4vw,38px);letter-spacing:-.02em;line-height:1.12;
  margin:0 0 10px;
}
.ip-intro{font-size:15px;line-height:1.68;color:var(--text-soft);margin:0 0 20px;max-width:64ch;}

/* category switcher */
.ip-tabs{display:flex;gap:8px;flex-wrap:wrap;}
.ip-tab{
  font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:700;letter-spacing:.01em;
  padding:9px 15px;border-radius:999px;text-decoration:none;
  border:1px solid var(--border);background:var(--surface);color:var(--text-soft);
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast),background var(--t-fast);
}
.ip-tab:hover{color:var(--accent-deep);border-color:var(--accent);}
.ip-tab.active{background:var(--accent-soft);color:var(--accent-deep);border-color:transparent;}
.ip-tab b{font-weight:700;opacity:.65;margin-left:2px;}

/* ===== FILTERS ========================================================== */
/* Sticky so the controls stay reachable 50 questions down the page. */
.ip-filters{
  position:sticky;top:60px;z-index:10;
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  padding:12px;margin-bottom:18px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
}
.ip-search{flex:1 1 240px;}
.ip-search input,.ip-selects select{
  width:100%;font-family:var(--font-body);font-size:14px;
  padding:10px 12px;border-radius:var(--r-btn);
  border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.ip-search input:focus,.ip-selects select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.ip-selects{display:flex;gap:8px;flex:1 1 auto;}
.ip-selects select{cursor:pointer;}
.ip-count{
  flex:0 0 auto;margin:0;font-family:var(--font-mono);font-size:var(--fs-xs);
  color:var(--text-faint);white-space:nowrap;
}

/* ===== QUESTION ========================================================= */
.ip-list{display:flex;flex-direction:column;gap:10px;}
.q{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-sm);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.q:hover{border-color:var(--border-strong);}
.q details[open]{border-radius:var(--r);}
.q details[open] summary{border-bottom:1px solid var(--border);}
/* the deep-linked question gets a marker, so a shared /#q-042 lands obviously */
.q:target{border-color:var(--accent);box-shadow:var(--shadow);}

/* Grid, not flex: the summary holds a heading, a meta row and a preview line
   stacked in the first column, with the +/× toggle pinned to the second. The
   question is a real <h2> now (crawlers read the page as 50 sections instead
   of one), so the heading is re-sized down to the row it lives in. */
.q summary{
  list-style:none;cursor:pointer;padding:15px 17px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:12px;row-gap:7px;align-items:start;
  transition:background var(--t-fast);
}
.q summary::-webkit-details-marker{display:none;}
.q summary:hover{background:var(--surface-2);}
.q summary::after{
  content:"+";grid-column:2;grid-row:1;
  font-family:var(--font-mono);font-size:19px;font-weight:400;line-height:1;
  color:var(--accent);transition:transform var(--t-fast) var(--ease);
}
.q details[open] summary::after{transform:rotate(45deg);}

.q-q{
  grid-column:1;margin:0;
  font-family:var(--font-display);font-size:15px;font-weight:600;line-height:1.45;color:var(--text);
}
/* The answer's first sentence, visible without opening the question. Doubles
   as the answer-shaped text a snippet crawler wants next to the heading. */
.q-snip{
  grid-column:1 / -1;margin:0;
  font-size:var(--fs-sm);line-height:1.55;color:var(--text-soft);
}
.q details[open] .q-snip{display:none;}
.q-meta{grid-column:1;display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.q-topic{
  font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent-deep);background:var(--accent-soft);
  border-radius:5px;padding:3px 8px;
}
/* Seniority reuses the career-level tokens, so a "senior" chip here is the same
   colour as the senior rung on the roadmap. */
.q-lvl{
  font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:700;
  border-radius:5px;padding:3px 8px;text-transform:capitalize;
}
.q-lvl-junior{color:var(--jr);background:var(--jr-bg);}
.q-lvl-mid{color:var(--mid);background:var(--mid-bg);}
.q-lvl-senior{color:var(--sr);background:var(--sr-bg);}

/* ===== ANSWER =========================================================== */
.q-body{padding:16px 17px 17px;animation:fadeIn .22s var(--ease) both;}
.q-answer p{font-size:14px;line-height:1.72;color:var(--text-soft);margin:0 0 11px;}
.q-answer p:last-child{margin-bottom:0;}
.q-answer strong{color:var(--text);font-weight:700;}
.q-answer em{color:var(--text);font-style:italic;}
.q-answer pre{
  margin:12px 0;padding:13px;overflow-x:auto;
  background:var(--code-bg);border:1px solid var(--code-line);border-radius:var(--r-sm);
}
.q-answer pre code{
  font-family:var(--font-mono);font-size:12px;line-height:1.65;color:var(--code-text);
  background:none;padding:0;
}

.q-block{margin-top:15px;padding-top:13px;border-top:1px dashed var(--border);}
.q-block-lbl{
  display:block;font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px;
}
.q-key,.q-follow{margin:0;padding:0;list-style:none;}
.q-key li,.q-follow li{
  position:relative;padding-left:19px;margin-bottom:7px;
  font-size:13.5px;line-height:1.6;color:var(--text-soft);
}
.q-key li:last-child,.q-follow li:last-child{margin-bottom:0;}
.q-key li::before{content:"▸";position:absolute;left:3px;color:var(--accent);font-weight:700;}
.q-follow li::before{content:"→";position:absolute;left:2px;color:var(--text-faint);}

/* The trap is the one block worth interrupting for — it is what loses offers. */
.q-trap{
  border-top:none;margin-top:15px;padding:12px 14px;
  background:var(--warn-bg);border-radius:var(--r-sm);border-left:3px solid var(--warn);
}
.q-trap .q-block-lbl{color:var(--warn);}
.q-trap p{margin:0;font-size:13.5px;line-height:1.62;color:var(--text-soft);}
.q-trap strong{color:var(--text);}

.q-link{
  display:inline-block;margin-top:15px;
  font-family:var(--font-mono);font-size:var(--fs-xs);
  color:var(--text-faint);text-decoration:none;
  border-bottom:1px solid transparent;transition:color var(--t-fast),border-color var(--t-fast);
}
.q-link:hover{color:var(--accent-deep);border-bottom-color:var(--accent);}

/* ===== EMPTY + CTA ====================================================== */
.ip-empty{
  padding:30px 22px;margin:0;text-align:center;
  font-size:14px;line-height:1.65;color:var(--text-soft);
  background:var(--surface-2);border:1px dashed var(--border-strong);border-radius:var(--r-lg);
}

.ip-cta{
  margin-top:34px;padding:26px 24px;text-align:center;
  background:var(--grad-brand-soft);border:1px solid var(--border);border-radius:var(--r-lg);
}
.ip-cta h2{font-family:var(--font-display);font-size:19px;font-weight:700;margin:0 0 7px;letter-spacing:-.01em;}
.ip-cta p{font-size:14px;line-height:1.65;color:var(--text-soft);margin:0 auto 16px;max-width:52ch;}

/* ===== RESPONSIVE ======================================================= */
@media(max-width:700px){
  .ip-wrap{padding:24px var(--shell-pad) 70px;}
  /* Unstuck on a phone: 50%-height sticky chrome costs more than it saves. */
  .ip-filters{position:static;padding:11px;}
  .ip-selects{flex-wrap:wrap;}
  .ip-selects select{flex:1 1 100%;}
  .ip-count{width:100%;text-align:right;}
  .ip-search input,.ip-selects select{font-size:16px;}   /* 16px stops iOS zoom */
  .q summary{padding:14px;}
  .q-body{padding:14px;}
  .q-q{font-size:14.5px;}
}

@media(hover:none){
  .q:hover{border-color:var(--border);}
  .q summary:hover{background:none;}
  .q summary:active{background:var(--surface-2);}
}