/* JoeLearns brand refresh v0.12.0. Layered over the tested v0.11.1
   Troubleshooter layout; diagnostic and feedback logic are unchanged. */
:root {
  --bg: #030817;
  --bg2: #071328;
  --surface: #10182c;
  --surface2: #0c1529;
  --surface3: #060e20;
  --border: #27324e;
  --text: #f2f7ff;
  --muted: #b3c1d8;
  --soft: #8fa3c2;
  --blue: #38d6fb;
  --blue2: #127dd2;
  --green: #4de0ac;
  --red: #ff7e87;
  --amber: #f8c76f;
  --radius: 20px;
}
html { scroll-behavior: smooth; }
body {
  color: var(--text);
  background:
    radial-gradient(ellipse 54% 30% at 68% 2%, rgba(23,191,213,.115), transparent 78%),
    radial-gradient(ellipse 43% 35% at 100% 18%, rgba(101,67,203,.135), transparent 72%),
    radial-gradient(ellipse 35% 35% at -12% 80%, rgba(24,92,199,.095), transparent 85%),
    #030817;
}
.app-shell { max-width: 1540px; }
.topbar {
  border-bottom: 1px solid rgba(136,159,198,.15);
  background: rgba(3,9,24,.83);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter:blur(18px);
  padding: 19px 34px;
}
.brand-logo { filter:drop-shadow(0 0 13px rgba(56,211,244,.32)); }
.brand-title {font-size:19px; letter-spacing:.05px;}
.brand-title span {color:#5fe7fc}
.brand-sub {color:#87b9ce;letter-spacing:2.4px}
.toplinks a {color:#b8cbe0}
.toplinks a:hover {color:#7beafe}
.beta-pill {
  border-color:rgba(65,218,244,.27);
  background:rgba(16,137,167,.13);
  color:#9ceafa;
  box-shadow: inset 0 0 18px rgba(29,152,200,.08);
  letter-spacing:1.4px;
}
.pulse {background:#4ce4aa;}
.panel, .card {
  background:linear-gradient(157deg,rgba(17,26,48,.96),rgba(11,19,37,.98));
  border:1px solid rgba(133,159,196,.20);
  border-radius:20px;
  box-shadow:0 13px 35px rgba(0,0,0,.13);
}
.side-panel,.notes-panel{top:22px}
.panel .section-title,.card-title,.right-heading{color:#80e6ff;letter-spacing:1.45px}
.section-pad{padding:21px}
.workspace{gap:19px;padding:27px 23px}
.launcher {
  position:relative;
  overflow:hidden;
  padding:29px 32px;
  background:
   radial-gradient(ellipse 52% 30% at 80% 1%, rgba(55,211,236,.07), transparent),
   radial-gradient(ellipse 35% 32% at 100% 88%, rgba(131,86,229,.08), transparent),
   linear-gradient(148deg,rgba(17,25,46,.985),rgba(10,18,37,.99));
  border-color:rgba(106,184,219,.21)
}
.launcher::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,rgba(42,219,242,.83),rgba(96,161,255,.5),rgba(149,91,243,.7));pointer-events:none}
.launcher-intro .eyebrow{letter-spacing:2.1px;font-size:12px;color:#84e9fc}
.launcher-intro h1{font-size:38px;font-weight:850;letter-spacing:-1.1px;max-width:950px;line-height:1.16}
.launcher-intro p{color:#bdcce1;max-width:720px}
.launcher-grid{gap:14px}
.launcher-card {
  border:1px solid rgba(107,143,190,.24);
  background:linear-gradient(135deg,rgba(19,31,57,.86),rgba(14,23,45,.95));
  border-radius:18px;
  padding:20px;
  box-shadow:0 9px 24px rgba(0,0,0,.10);
  transition:background .18s,transform .18s,border-color .18s,box-shadow .18s;
}
.launcher-card:hover,.launcher-card:focus-visible {
  border-color:rgba(62,215,245,.65);
  background:linear-gradient(140deg,rgba(21,49,73,.92),rgba(24,26,60,.95));
  box-shadow:0 0 0 1px rgba(30,204,239,.08),0 14px 32px rgba(0,0,0,.2),0 0 25px rgba(31,160,231,.07);
  transform:translateY(-3px)
}
.launcher-card strong{font-size:17px;letter-spacing:-.2px}
.launcher-group{color:#7ae5ff;letter-spacing:1.3px;font-weight:800}
.launcher-icon{filter:drop-shadow(0 0 9px rgba(75,206,250,.24))}
.launcher-description{color:#b4c4dc}
.launcher-go{color:#7beaff;font-weight:750}
.launcher-go::after{content:""}
.tool-box-placeholder{border:1px solid rgba(31,189,237,.34)}
.side-panel .toolbox-details,.toolbox-details {
  background:rgba(5,15,32,.62);
  border:1px solid rgba(57,195,231,.23);
  border-radius:13px;
}
.toolbox-details>summary{color:#c2edff}
.launcher-bottom{border-top:1px solid rgba(141,160,199,.14);padding-top:12px}
.hero{
  background:linear-gradient(115deg,rgba(11,44,66,.93),rgba(17,28,52,.91) 60%,rgba(37,28,66,.7));
  border:1px solid rgba(57,199,235,.35);
  border-left:4px solid #44ddf2;
  border-radius:17px;
  box-shadow:0 10px 30px rgba(0,0,0,.10);
}
.hero h1 {font-size:26px;letter-spacing:-.65px}
.eyebrow,.card-title{color:#80e8fc}
.progress-track,.phase-track{background:#182946;border-color:#283d61}
.progress-bar,.phase-unit.current .phase-track{background:linear-gradient(90deg,#41def0,#5ea1ff);border-color:#45cde8}
.phase-unit.done .phase-track{background:linear-gradient(90deg,#28a686,#49cebb);border-color:#35b79d}
.phase-progress .current {color:#93edff}
.card{border-radius:18px}
.command-box,.example-output{background:#050e1d;border:1px solid #273757;border-radius:13px}
.command-box{color:#64e9b4}
.accordion {background:rgba(6,17,34,.74);border-color:#2d4161;border-radius:12px}
.option-answer,.select-control,textarea {border-color:#334b6c;background:#09172e;border-radius:12px}
.option-answer:hover,.select-control:focus-visible,textarea:focus-visible{border-color:#4ce0fa}
.btn {border-radius:12px;border-color:#355070;background:rgba(30,52,78,.9)}
.btn-primary{background:linear-gradient(125deg,#50dce8,#4d9fff);border-color:#58c2ee;color:#061522;box-shadow:0 5px 22px rgba(35,161,205,.12)}
.btn-primary:hover:not(:disabled){filter:brightness(1.07)}
/* Keep decision-state colors distinct and semantic. */
.answer.yes{background:#153d35;border-color:#246b53;color:#70f2c1}
.answer.no{background:#492c3a;border-color:#7b4555;color:#ff9ca5}
.answer.unsure{background:#172f55;border-color:#36649c;color:#a5d6ff}
.workspace .section-title,.workspace .card-title{font-size:12px}
.notes-panel{background:linear-gradient(154deg,#121a30,#0b1428)}
.footer{border-top-color:rgba(123,152,197,.18);color:#8197b9}
@media (max-width: 1200px){.workspace{padding:20px}.launcher{padding:23px}}
@media (max-width: 780px){.workspace{padding:14px}.topbar{background:rgba(3,9,24,.93)}.launcher{padding:23px}.launcher-intro h1{font-size:31px}}
@media(prefers-reduced-motion:reduce){.launcher-card{transition:none}.launcher-card:hover{transform:none}}

/* Matching JoeLearns.com’s "Join the Journey" gradient-outline CTA. */
.toplinks .main-site-link-frame {
  display: inline-flex;
  flex-shrink: 0;
  padding: 1px;
  background: linear-gradient(100deg, rgba(34,211,238,.84), rgba(59,130,246,.72), rgba(168,85,247,.86));
  border-radius: 17px;
  box-shadow: 0 0 14px rgba(34,211,238,.20), 0 0 22px rgba(168,85,247,.16);
}
.toplinks .main-site-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 11px 20px;
  background: #030817;
  border-radius: 16px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.toplinks .main-site-link:hover {background: #122039; color: #fff;}
.toplinks .main-site-link:focus-visible {outline: 2px solid #8ce7fc; outline-offset: 4px;}
.toplinks .main-site-link span {font-size: 12px; color: #cad5e6;}
@media(max-width:780px) {
  .topbar {flex-wrap:wrap;}
  .toplinks .main-site-link {display:inline-flex;}
}
@media(max-width:540px) {
  .toplinks {width:100%; justify-content:space-between;}
  .topbar {gap: 13px;}
  .toplinks .main-site-link {min-height:38px;padding:10px 14px;}
}
@media(prefers-reduced-motion:reduce){.toplinks .main-site-link{transition:none}}

/* v0.13 — prominent, keyboard-friendly investigation search and categorized discovery. */
.launcher-intro{margin-bottom:22px}
.launcher-discovery{
  border:1px solid rgba(74,191,226,.20);
  border-radius:18px;
  padding:21px 21px 17px;
  margin:0 0 22px;
  background:linear-gradient(125deg,rgba(6,24,44,.92),rgba(19,18,44,.74));
  box-shadow:inset 0 1px 0 rgba(186,225,255,.035),0 10px 28px rgba(0,0,0,.12);
}
.launcher-search-label{display:block;font-size:13px;font-weight:800;letter-spacing:.07em;color:#a7eafe;margin-bottom:10px;text-transform:uppercase}
.launcher-search-box{display:flex;align-items:center;gap:12px;border:1px solid rgba(90,169,211,.46);border-radius:13px;background:#071427;min-height:55px;padding:0 14px;transition:border-color .16s,box-shadow .16s}
.launcher-search-box:focus-within{border-color:#53deee;box-shadow:0 0 0 3px rgba(70,211,236,.13)}
.launcher-search-icon{color:#6ee5f7;font-size:29px;line-height:1;min-width:20px;text-align:center;transform:rotate(-15deg)}
.launcher-search-box input{width:100%;min-width:0;flex:1;border:0;outline:none;background:transparent;color:#f0faff;padding:14px 0;font:inherit;font-size:16px;line-height:1.4}
.launcher-search-box input::placeholder{color:#839ab7;opacity:1}
.launcher-search-box input:focus{outline:none}
.launcher-search-box input::-webkit-search-cancel-button{-webkit-appearance:none}
.launcher-search-clear{flex:none;background:rgba(78,179,214,.13);color:#acf2ff;border:1px solid rgba(70,209,238,.24);padding:7px 10px;border-radius:9px;font-size:12px;font-weight:750}
.launcher-search-clear[hidden]{display:none}
.launcher-search-clear:hover{background:rgba(78,179,214,.23)}
.launcher-search-help{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 0 18px;color:#a7b8d1;font-size:13px}
.quick-search{font-size:12px;line-height:1.1;padding:7px 10px;border-radius:999px;background:rgba(40,79,114,.37);border:1px solid rgba(84,144,191,.29);color:#b8eafb;font-weight:740}
.quick-search:hover,.quick-search:focus-visible{color:#fff;border-color:#57cbec;background:rgba(44,137,175,.29)}
.launcher-filter-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between;border-top:1px solid rgba(141,160,199,.14);padding-top:15px}
.launcher-categories{display:flex;flex-wrap:wrap;gap:7px;max-width:100%}
.launcher-filter{padding:9px 11px;border-radius:10px;color:#acbfd9;background:rgba(18,30,53,.72);border:1px solid rgba(101,127,173,.3);font-size:12px;font-weight:750;line-height:1.25;min-height:36px}
.launcher-filter:hover{border-color:#5cbbd5;color:#edfbff}
.launcher-filter.active,.launcher-filter[aria-pressed="true"]{background:linear-gradient(115deg,rgba(19,82,108,.78),rgba(36,41,88,.55));color:#d5faff;border-color:#42cce9;box-shadow:inset 0 0 0 1px rgba(33,183,221,.06)}
.launcher-sort-label{display:flex;align-items:center;gap:9px;color:#a8b8d0;font-size:12px;font-weight:700;white-space:nowrap}
.launcher-sort-label select{color:#e0f4ff;background:#09182d;border:1px solid rgba(105,145,195,.4);border-radius:9px;padding:9px 12px;min-height:38px;font:inherit;font-weight:700}
.launcher-results-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:19px}
.launcher-results-heading h2{font-size:17px;letter-spacing:-.2px;margin:0;color:#eaf8ff;font-weight:800}
.launcher-results-heading span{font-size:13px;color:#9fb2cd;font-weight:650}
.launcher-card-bottom{width:100%;margin-top:auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px}
.difficulty-badge{font-size:11px;letter-spacing:.025em;font-weight:800;color:#c3d4e9;background:rgba(109,132,184,.11);border:1px solid rgba(129,153,205,.24);padding:5px 9px;border-radius:99px;white-space:nowrap}
.launcher-card .launcher-go{margin-top:0}
.launcher-card .launcher-group{font-size:10px;line-height:1.4;letter-spacing:1px}
.launcher-card{min-height:205px}
.launcher-empty{grid-column:1/-1;text-align:center;padding:40px 20px;border-radius:15px;border:1px dashed rgba(90,163,205,.42);background:rgba(5,15,31,.6);color:#dcefff}
.launcher-empty strong{font-size:18px}
.launcher-empty p{color:#a8bcd4;font-size:14px}
.launcher-empty .btn{margin-top:6px}
@media(max-width:990px){.launcher-discovery{padding:18px}.launcher-filter-toolbar{align-items:flex-start}}
@media(max-width:780px){.launcher-filter{font-size:11px}.launcher-discovery{padding:16px}.launcher-search-box input{font-size:15px}.launcher-card{min-height:192px}}
@media(max-width:540px){.launcher-filter-toolbar{display:block}.launcher-sort-label{margin-top:14px;justify-content:space-between}.launcher-sort-label select{flex:0 0 auto}.launcher-search-box{min-height:52px}.launcher-search-icon{font-size:23px}.launcher-search-box input{font-size:15px}.launcher-search-box input::placeholder{font-size:13px}.launcher-results-heading h2{font-size:16px}.launcher-results-heading span{font-size:12px}.launcher-discovery{margin-bottom:17px}.launcher-card{min-height:158px}}
@media(prefers-reduced-motion:reduce){.launcher-search-box{transition:none}}

/* v0.14: caution displays only at an actionable change-control checkpoint. */
.change-control-note{margin-top:15px;display:flex;flex-direction:column;gap:5px;padding:13px 15px;
  color:#ffe9bd;background:rgba(153,95,21,.14);border:1px solid rgba(248,199,111,.40);
  border-left:4px solid #f8c76f;border-radius:12px;line-height:1.5}
.change-control-note strong{font-size:14px;letter-spacing:.1px}
.change-control-note span{font-size:14px;color:#e0cda9}
.launcher-card-bottom{justify-content:flex-end}
.launcher-filter-toolbar .launcher-categories{flex-wrap:wrap}

/* v0.15 JoeLearns proportions; remains non-sticky */
.topbar{position:static;top:auto;z-index:auto;padding:16px 24px;background:rgba(2,6,23,.75);border-bottom:1px solid rgba(255,255,255,.10);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.brand-lockup{gap:12px}
.brand-logo{width:56px;height:56px;border-radius:16px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(34,211,238,.6))}
.brand-title{font-size:18px;letter-spacing:0;line-height:1.3}
.brand-sub{font-size:12px;letter-spacing:.25em;color:rgba(103,232,249,.8)}
@media(max-width:600px){.topbar{padding:16px 20px;gap:12px}.brand-logo{width:56px;height:56px}}

/* v0.16 persistent right-hand workbench and integrated notes */
.workspace,.workspace.landing{display:grid;grid-template-columns:minmax(0,1fr) 326px;gap:20px;align-items:start;padding:23px;min-height:0}
.workspace .main-area,.workspace.landing .main-area{grid-column:1;grid-row:1;min-width:0;width:auto;order:unset}
.workspace .side-panel,.workspace.landing .side-panel{grid-column:2;grid-row:1;width:auto;min-width:0;order:unset;position:sticky;top:16px;max-height:calc(100dvh - 32px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#365470 transparent;overscroll-behavior:contain}
.workspace .workbench-panel{background:linear-gradient(150deg,rgba(16,27,46,.96),rgba(8,18,36,.96))}
.workspace .workbench-panel .section-pad{padding:17px 18px}
.workspace .workbench-panel .section-title{font-size:12px}
.workbench-current{display:flex;flex-direction:column;gap:5px;margin-top:11px;padding:12px;background:rgba(14,39,60,.76);border:1px solid rgba(77,184,220,.22);border-radius:10px}
.workbench-current-label{font-size:10px;letter-spacing:1.3px;color:#7bcce7;font-weight:800}
.workbench-current strong{font-size:13px;line-height:1.35;overflow-wrap:anywhere;color:#eef8ff}
.workbench-current>span:last-child{font-size:12px;color:#acbfd4}
.workbench-resource{padding-top:0!important}
.workbench-panel .toolbox-details>summary{font-size:13px}
.handbook-topic{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px;border:1px solid rgba(49,192,235,.32);border-radius:9px;text-decoration:none;color:#ebf9ff;background:rgba(15,46,71,.54)}
.handbook-topic:hover{border-color:#38d6fb;background:rgba(25,73,104,.62)}
.handbook-topic span:first-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.handbook-topic strong{font-size:13px}.handbook-topic small{font-size:11px;line-height:1.35;color:#a5bad2}
.handbook-more{font-size:11px;color:#93acc5;margin-bottom:0}
.workbench-notes{padding:0 1px 14px}
.workbench-notes .section-pad{padding:17px 17px 8px!important}
.workbench-notes .notes-column{min-width:0}
.workbench-notes .right-heading{display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:space-between}
.workbench-notes #technician-notes{min-height:118px;width:100%}
.workbench-notes .notes-actions{display:flex;flex-wrap:wrap}
.workbench-notes .history-item{overflow-wrap:anywhere}
@media(max-width:1090px){.workspace,.workspace.landing{grid-template-columns:minmax(0,1fr) 305px;gap:14px;padding:17px}.workspace .workbench-panel{top:10px;max-height:calc(100dvh - 20px)}}
@media(max-width:860px){.workspace,.workspace.landing{display:flex;flex-direction:column;padding:14px;gap:16px}.workspace .main-area,.workspace.landing .main-area{order:0;width:100%}.workspace .side-panel,.workspace.landing .side-panel{position:static;max-height:none;overflow:visible;order:1;width:100%}}

/* v0.18: single-click Command Handbook */
.workbench-panel .handbook-launch{display:flex;align-items:center;gap:12px;padding:13px 12px;border:1px solid rgba(52,201,238,.35);background:rgba(8,29,48,.68);border-radius:11px;text-decoration:none;color:#ecf9ff;transition:background .15s,border-color .15s}
.workbench-panel .handbook-launch:hover{background:rgba(13,58,82,.83);border-color:#52dff5}
.handbook-launch-icon{font-size:20px}.handbook-launch-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}.handbook-launch-copy strong{font-size:13px}.handbook-launch-copy small{font-size:11px;color:#a3c1d9}.handbook-launch-arrow{color:#7dddf4;font-size:18px}

/* JoeLearns unified full-width header (final brand layer) */
.topbar {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  width: min(100vw, 1920px);
  max-width: 1920px;
  padding-inline: clamp(22px, 2.5vw, 34px);
}
@media (max-width: 780px) {
  .topbar { padding-inline: 15px; }
}