/* ─────────────────────────────────────────────
   IT Interview Revision — stylesheet
   Matches aayushacharya.com.au design system
   ───────────────────────────────────────────── */

/* --- 1. RESET & VARIABLES --- */
:root {
  --bg-main:    #0a0a0a;
  --bg-card:    #171717;
  --bg-hover:   #262626;
  --text-main:  #ededed;
  --text-muted: #a1a1aa;
  --accent:     #3b82f6;
  --accent-glow: rgba(59, 130, 246, 0.15);
  --accent-dim:  rgba(59, 130, 246, 0.10);
  --accent-border: rgba(59, 130, 246, 0.30);
  --border:     #333333;
  --border2:    #444444;

  /* semantic colour aliases */
  --green:      #22c55e;
  --green-dim:  rgba(34, 197, 94, 0.12);
  --green-border: rgba(34, 197, 94, 0.30);
  --amber:      #f59e0b;
  --amber-dim:  rgba(245, 158, 11, 0.12);
  --amber-border: rgba(245, 158, 11, 0.30);
  --purple:     #a78bfa;
  --purple-dim: rgba(167, 139, 250, 0.12);
  --purple-border: rgba(167, 139, 250, 0.30);
  --teal:       #2dd4bf;
  --teal-dim:   rgba(45, 212, 191, 0.12);
  --teal-border: rgba(45, 212, 191, 0.30);
  --red:        #f87171;
  --red-dim:    rgba(248, 113, 113, 0.12);
  --red-border: rgba(248, 113, 113, 0.30);

  --mono:   'Courier New', monospace;
  --sans:   'Inter', sans-serif;
  --radius: 12px;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { font-size: 15px; scroll-behavior: smooth; }
body  { font-family: var(--sans); background: var(--bg-main); color: var(--text-main);
        line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; }
a     { text-decoration: none; color: inherit; transition: color .2s; }
a:hover { color: var(--accent); }


/* --- 2. TOPBAR / NAVBAR --- */
.topbar {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem;
}

.topbar-brand {
  font-family: var(--mono); font-size: 13px; color: var(--text-muted);
  display: flex; align-items: center; gap: 8px;
}
.topbar-brand .prompt { color: var(--accent); }

.cursor {
  display: inline-block; width: 7px; height: 14px;
  background: var(--accent);
  animation: blink 1.1s step-end infinite;
  vertical-align: middle; margin-left: 1px;
}
@keyframes blink { 50% { opacity: 0; } }

.topbar-nav { display: flex; gap: 20px; align-items: center; }
.topbar-nav a {
  font-size: 13px; color: var(--text-muted); font-family: var(--mono);
  transition: color .15s;
}
.topbar-nav a:hover { color: var(--accent); }


/* --- 3. PAGE LAYOUT --- */
.page {
  max-width: 1000px; margin: 0 auto;
  padding: 32px 20px 80px;
}


/* --- 4. HEADER --- */
.header { margin-bottom: 8px; }

.header-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.header-eyebrow::before {
  content: ''; display: inline-block; width: 24px; height: 1px;
  background: var(--accent);
}

.header h1 {
  font-size: clamp(20px, 3vw, 28px); font-weight: 700;
  color: var(--text-main); letter-spacing: -0.4px; margin-bottom: 4px;
}
.header p { color: var(--text-muted); font-size: 13px; font-family: var(--mono); }

.badges { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.badge {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  padding: 3px 10px; border-radius: 50px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-muted);
}
.badge-blue   { background: var(--accent-dim);   color: var(--accent);  border-color: var(--accent-border); }
.badge-green  { background: var(--green-dim);     color: var(--green);   border-color: var(--green-border); }
.badge-amber  { background: var(--amber-dim);     color: var(--amber);   border-color: var(--amber-border); }


/* --- 5. PROGRESS BAR --- */
.progress-wrap {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px;
  margin: 20px 0; display: flex; align-items: center; gap: 14px;
}
.progress-label {
  font-family: var(--mono); font-size: 11px; color: var(--text-muted);
  white-space: nowrap; letter-spacing: .06em; text-transform: uppercase;
}
.progress-bar-bg {
  flex: 1; background: var(--border); border-radius: 99px; height: 4px;
}
.progress-bar-fill {
  height: 4px; border-radius: 99px; background: var(--accent);
  transition: width 0.4s; box-shadow: 0 0 8px var(--accent-glow);
}
.progress-count {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: var(--accent); white-space: nowrap;
}
.reset-btn {
  font-family: var(--mono); font-size: 11px; color: var(--text-muted);
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 10px; cursor: pointer; transition: all .15s;
}
.reset-btn:hover { color: var(--red); border-color: var(--red-border); }


/* --- 6. TABS --- */
.tabs {
  display: flex; gap: 4px; margin-bottom: 28px;
  background: var(--bg-card); border: 1px solid var(--border);
  padding: 4px; border-radius: var(--radius);
  width: fit-content; flex-wrap: wrap;
}
.tab {
  padding: 7px 16px; border-radius: 8px; border: none;
  background: transparent; cursor: pointer;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  color: var(--text-muted); transition: all 0.15s; letter-spacing: .03em;
}
.tab.active {
  background: var(--bg-hover); color: var(--accent);
  border: 1px solid var(--accent-border);
}
.tab:hover:not(.active) { color: var(--text-main); background: var(--bg-hover); }

.panel { display: none; }
.panel.active { display: block; }


/* --- 7. SECTION LABELS --- */
.section-label-bar {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 24px 0 12px; display: flex; align-items: center; gap: 10px;
}
.section-label-bar:first-child { margin-top: 0; }
.section-label-bar::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.panel-intro {
  color: var(--text-muted); font-size: 12px; font-family: var(--mono);
  margin-bottom: 20px; line-height: 1.6;
  border-left: 3px solid var(--border2); padding-left: 12px;
}


/* --- 8. RAPID FIRE CARDS --- */
.rf-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start;
}
@media (max-width: 620px) { .rf-grid { grid-template-columns: 1fr; } }

.rf-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .2s, border-color .2s;
}
.rf-card:hover { transform: translateY(-2px); border-color: var(--border2); }

.rf-header {
  padding: 10px 14px; font-family: var(--mono); font-size: 10px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.rf-header.blue   { color: var(--accent); border-left: 3px solid var(--accent); background: var(--accent-dim); }
.rf-header.green  { color: var(--green);  border-left: 3px solid var(--green);  background: var(--green-dim); }
.rf-header.amber  { color: var(--amber);  border-left: 3px solid var(--amber);  background: var(--amber-dim); }
.rf-header.purple { color: var(--purple); border-left: 3px solid var(--purple); background: var(--purple-dim); }
.rf-header.red    { color: var(--red);    border-left: 3px solid var(--red);    background: var(--red-dim); }
.rf-header.teal   { color: var(--teal);   border-left: 3px solid var(--teal);   background: var(--teal-dim); }

.rf-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; border-bottom: 1px solid var(--border); gap: 12px;
}
.rf-row:last-child { border-bottom: none; }
.rf-q { color: var(--text-muted); font-size: 12px; flex: 1; }
.rf-a {
  font-family: var(--mono); font-weight: 600; font-size: 12px;
  text-align: right; color: var(--text-main);
}
.rf-a code {
  background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 6px;
  font-family: var(--mono); font-size: 11px; color: var(--accent);
}


/* --- 9. INTERVIEW Q&A --- */
.qa-list { display: flex; flex-direction: column; gap: 10px; }

.qa-item {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; transition: border-color 0.2s;
}
.qa-item.reviewed { border-color: rgba(34,197,94,.4); }
.qa-item.reviewed::before { content: ''; display: block; height: 2px; background: var(--green); }

.qa-q {
  padding: 14px 16px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.qa-q:hover { background: var(--bg-hover); }

.qa-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.qa-text  { font-size: 14px; font-weight: 600; color: var(--text-main); }

.qa-arrow {
  font-family: var(--mono); font-size: 16px; color: var(--text-muted);
  transition: transform 0.2s; flex-shrink: 0; margin-top: 2px;
}
.qa-item.open .qa-arrow { transform: rotate(90deg); color: var(--accent); }

.qa-body { display: none; padding: 0 16px 16px; border-top: 1px solid var(--border); }
.qa-item.open .qa-body { display: block; }

.qa-answer {
  background: var(--accent-dim); border-left: 3px solid var(--accent);
  padding: 12px 14px; border-radius: 0 6px 6px 0;
  margin: 12px 0 8px; font-size: 13px; line-height: 1.7; color: var(--text-main);
}
.qa-answer.amber { background: var(--amber-dim); border-left-color: var(--amber); }
.qa-answer.green { background: var(--green-dim); border-left-color: var(--green); }

.qa-body p  { margin-top: 8px; font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.qa-body strong { color: var(--text-main); font-weight: 600; }
.qa-body ul { margin: 8px 0 0 16px; font-size: 13px; color: var(--text-muted); }
.qa-body ul li { margin-bottom: 4px; }

/* tags */
.tag {
  display: inline-block; font-family: var(--mono); font-size: 10px;
  font-weight: 600; padding: 2px 8px; border-radius: 4px; border: 1px solid transparent;
}
.tag-common { background: var(--red-dim);    color: var(--red);    border-color: var(--red-border); }
.tag-tech   { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-border); }
.tag-behav  { background: var(--amber-dim);  color: var(--amber);  border-color: var(--amber-border); }
.tag-trap   { background: var(--purple-dim); color: var(--purple); border-color: var(--purple-border); }

.mark-btn {
  margin-top: 12px; font-family: var(--mono); font-size: 11px;
  padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg-hover); cursor: pointer; color: var(--text-muted); transition: all .15s;
}
.mark-btn:hover { border-color: var(--green-border); color: var(--green); }
.qa-item.reviewed .mark-btn {
  background: var(--green-dim); border-color: var(--green-border); color: var(--green);
}

.short-tip {
  background: var(--amber-dim); border-left: 3px solid var(--amber);
  padding: 8px 12px; border-radius: 0 6px 6px 0;
  margin-top: 8px; font-size: 12px; color: var(--amber);
}


/* --- 10. TROUBLESHOOTING --- */
.ts-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start;
}
@media (max-width: 640px) { .ts-grid { grid-template-columns: 1fr; } }

.ts-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.ts-title {
  padding: 12px 14px; font-weight: 600; font-size: 13px; color: var(--text-main);
  border-bottom: 1px solid transparent; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  transition: background .15s;
}
.ts-title:hover { background: var(--bg-hover); }
.ts-card.open .ts-title { border-bottom-color: var(--border); color: var(--accent); }
.ts-card.open .ts-arrow { transform: rotate(90deg); color: var(--accent); }

.ts-body { display: none; padding: 14px; }
.ts-card.open .ts-body { display: block; }
.ts-arrow { font-family: var(--mono); transition: transform 0.2s; color: var(--text-muted); }

.step { display: flex; gap: 10px; margin-bottom: 8px; align-items: flex-start; }
.step-num {
  background: var(--accent-dim); color: var(--accent);
  border: 1px solid var(--accent-border); border-radius: 50%;
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; font-weight: 700; flex-shrink: 0; margin-top: 1px;
}
.step-text { font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.step-text strong { color: var(--text-main); }
.step-text code {
  background: var(--bg-hover); border: 1px solid var(--border2); border-radius: 4px;
  padding: 0 5px; font-family: var(--mono); font-size: 11px; color: var(--accent);
}

.tip  { background: var(--green-dim); border-left: 3px solid var(--green);
        padding: 8px 12px; border-radius: 0 6px 6px 0; margin-top: 10px; font-size: 12px; color: var(--green); }
.warn { background: var(--amber-dim); border-left: 3px solid var(--amber);
        padding: 8px 12px; border-radius: 0 6px 6px 0; margin-top: 10px; font-size: 12px; color: var(--amber); }


/* --- 11. REFERENCE TABLES --- */
.ref-section { margin-bottom: 24px; }
.ref-title {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}

.ref-table {
  width: 100%; border-collapse: collapse; background: var(--bg-card);
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border);
}
.ref-table th {
  background: var(--bg-hover); padding: 9px 12px; text-align: left;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); border-bottom: 1px solid var(--border);
}
.ref-table td {
  padding: 8px 12px; font-size: 13px; border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
.ref-table tr:last-child td { border-bottom: none; }
.ref-table tr:hover td { background: var(--bg-hover); }
.ref-table td:first-child { font-family: var(--mono); font-size: 11px; color: var(--accent); }

.cmd-table   td:first-child { color: var(--purple); }
.port-table  td:first-child { font-weight: 700; color: var(--amber); }
.sla-table   td:first-child { font-family: var(--sans); font-size: 13px; }
.plain-table td:first-child { font-family: var(--sans); color: var(--text-main); font-size: 13px; }

.p1 { color: var(--red)    !important; font-weight: 700; }
.p2 { color: var(--amber)  !important; font-weight: 600; }
.p3 { color: var(--accent) !important; font-weight: 600; }
.p4 { color: var(--green)  !important; }


/* --- 12. TIMELINE (Day in a Life) --- */
.timeline { position: relative; padding: 4px 0; }
.timeline-event { display: flex; gap: 16px; margin-bottom: 14px; align-items: flex-start; }

.timeline-left {
  display: flex; flex-direction: column; align-items: flex-end;
  min-width: 80px; padding-top: 12px;
}
.timeline-time {
  font-family: var(--mono); font-weight: 700; color: var(--accent);
  font-size: 11px; white-space: nowrap;
}

.timeline-content {
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--border2);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 12px 14px; flex: 1; transition: border-left-color .2s;
}
.timeline-content:hover { border-left-color: var(--accent); }
.timeline-content strong {
  font-size: 13px; font-weight: 700; color: var(--text-main);
  display: block; margin-bottom: 4px;
}
.timeline-content p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }


/* --- 13. ONBOARDING / OFFBOARDING --- */
.ob-section-title {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-main);
  margin: 24px 0 12px; display: flex; align-items: center; gap: 8px;
}
.ob-section-title:first-child { margin-top: 0; }

.checklist-wrap {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.checklist-phase { border-bottom: 1px solid var(--border); }
.checklist-phase:last-child { border-bottom: none; }
.checklist-phase-title {
  padding: 10px 14px; background: var(--bg-hover);
  font-family: var(--mono); font-weight: 600; font-size: 11px;
  color: var(--text-muted); border-bottom: 1px solid var(--border); letter-spacing: .04em;
}
.checklist-items  { padding: 12px 14px; }
.checklist-item   { display: flex; gap: 10px; margin-bottom: 8px; font-size: 13px; align-items: flex-start; }
.checklist-item:last-child { margin-bottom: 0; }
.check-icon { color: var(--green); font-weight: 700; flex-shrink: 0; line-height: 1.6; font-family: var(--mono); }
.check-text { color: var(--text-muted); line-height: 1.6; }
.check-text strong { color: var(--text-main); }


/* --- 14. TOOLS --- */
.tool-section-title {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted);
  margin: 28px 0 12px; display: flex; align-items: center; gap: 10px;
}
.tool-section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.tool-section-title:first-child { margin-top: 0; }

.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 640px) { .tool-grid { grid-template-columns: 1fr; } }

.tool-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  transition: border-color .2s, transform .15s;
}
.tool-card:hover { border-color: var(--border2); transform: translateY(-2px); }

.tool-category {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px;
}
.tool-name { font-weight: 700; font-size: 14px; color: var(--text-main); margin-bottom: 6px; }
.tool-desc {
  font-size: 12px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.55;
  border-bottom: 1px solid var(--border); padding-bottom: 10px;
}
.tool-uses { font-size: 12px; }
.tool-uses strong {
  color: var(--accent); font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; display: block; margin-bottom: 6px;
}
.tool-uses ul { margin-left: 16px; }
.tool-uses ul li { color: var(--text-muted); margin-bottom: 4px; line-height: 1.5; }
.tool-uses ul li code {
  font-family: var(--mono); font-size: 10px; color: var(--accent);
  background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: 3px; padding: 0 4px;
}


/* --- 15. PHONE SCREEN & POST-INTERVIEW helpers --- */
.two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px;
}
@media (max-width: 640px) { .two-col { grid-template-columns: 1fr; } }

.info-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
}
.info-card-accent-left  { border-left: 3px solid var(--amber); }
.info-card-accent-green { border-left: 3px solid var(--green); }
.info-card-accent-blue  { border-left: 3px solid var(--accent); }
.info-card-accent-amber { border-left: 3px solid var(--amber); }
.info-card-eyebrow {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 10px;
}
.info-card-eyebrow.blue   { color: var(--accent); }
.info-card-eyebrow.amber  { color: var(--amber); }
.info-card-eyebrow.green  { color: var(--green); }
.info-card-eyebrow.purple { color: var(--purple); }

.info-card ul { font-size: 13px; color: var(--text-muted); margin-left: 16px; line-height: 1.8; }

.prose-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 20px;
  font-size: 13px; color: var(--text-muted); line-height: 1.8; margin-bottom: 24px;
}
.prose-card p { margin-bottom: 8px; }
.prose-card p:last-child { margin-bottom: 0; }
.prose-card em { color: var(--text-main); font-style: normal; }

.offer-template {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 24px;
}
.offer-template-header {
  background: var(--bg-hover); border-bottom: 1px solid var(--border);
  padding: 10px 16px; font-family: var(--mono); font-size: 10px;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em;
}
.offer-template-subject {
  font-family: var(--mono); font-size: 13px; color: var(--text-muted);
  padding: 12px 18px 0; margin-bottom: 8px;
}
.offer-template-body {
  font-size: 13px; color: var(--text-muted); line-height: 1.9;
  border-left: 3px solid var(--green-border); padding: 0 14px 16px 14px; margin: 0 18px 0;
}
.offer-template-footer {
  border-top: 1px solid var(--border); padding: 10px 16px;
  font-size: 12px; color: var(--amber); font-family: var(--mono);
}

/* step-num variant for warnings */
.step-num.warn-num {
  background: var(--red-dim); color: var(--red); border-color: var(--red-border);
}


/* --- 16. SCROLLBAR --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }


/* --- 17. RESPONSIVE --- */
@media (max-width: 600px) {
  .topbar { padding: 0 1rem; }
  .topbar-nav { gap: 12px; }
  .page { padding: 20px 14px 60px; }
  .tabs { gap: 2px; }
  .tab { padding: 6px 10px; font-size: 10px; }
}