/* The playground's stylesheet.
 *
 * The palette, the pixel buttons and the colour band are copied from the
 * tutorial page (webdocs/DRAFT_WEBPAGE.HTML) so the two feel like one site.
 * Copied, not imported: the tutorial page is a single self-contained file that
 * belongs to another track, and this page must not depend on it or change it.
 * The token colours also appear in src/cql-mode.js, where CodeMirror needs them
 * as JavaScript rather than CSS.
 */

:root{
  --c-royalblue:#4169E1; --c-yellow:#FFD23F; --c-magenta:#F03FB0;
  --c-green:#35D461; --c-purple:#7B2FBE; --c-orange:#FF8C1A;
  --c-turquoise:#2CD5C4; --c-red:#FF3B3B; --c-indigo:#5D3FD3; --c-burgundy:#B4204A;
  --panel:#0e0b14; --panel-inset:#070510;
  --bar:#171223; --bar-2:#100c1a;
  --ink:#ffffff; --ink-dim:#9a93b5;
  --shadow:#08060e; --hair:rgba(150,140,180,0.22);
  --s-code:#e4e2f0; --s-str:#fc6a5d; --s-com:#74838f;
  --head:#a76a84; --subhead:#8b7ba8;
  --soft:#ffffff;
}

*{box-sizing:border-box;}
html,body{overflow-x:hidden;}
html,body{height:100%;}

body{
  margin:0; font-family:"Courier New",Courier,monospace; color:var(--ink);
  background:
    radial-gradient(1200px 600px at 50% -10%, #1b1430 0%, transparent 60%),
    linear-gradient(180deg,#0b0813 0%,#0a0711 100%);
  display:flex; flex-direction:column; min-height:100%;
}

/* --- the site's header ---------------------------------------------------- */

.bar{background:linear-gradient(180deg,var(--bar) 0%,var(--bar-2) 100%);
  border-bottom:2px solid var(--hair);}
.bar-inner{max-width:1400px;margin:0 auto;padding:14px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;}
/* The wordmark is stretched 1.5x, so its layout box understates its width and
   the nav would crowd it. This reserves the difference. */
.bar-inner > .logo{flex:0 0 auto;margin-right:6%;}

.stripe{height:6px;
  background:linear-gradient(90deg,var(--c-royalblue) 0 10%,var(--c-yellow) 10% 20%,
    var(--c-magenta) 20% 30%,var(--c-green) 30% 40%,var(--c-purple) 40% 50%,
    var(--c-orange) 50% 60%,var(--c-turquoise) 60% 70%,var(--c-red) 70% 80%,
    var(--c-indigo) 80% 90%,var(--c-burgundy) 90% 100%);
  box-shadow:0 2px 0 var(--shadow);}

/* The wordmark, matching the tutorial page.
 *
 * The font family alone was NOT the difference — Jersey 20 loads on both pages.
 * What was missing is the rest of the treatment: the skew, the 1.5x horizontal
 * stretch, and the layered text-shadow that gives the letters their depth.
 * Without those it read as an entirely different typeface at a glance.
 *
 * Only the size differs from the tutorial, and deliberately: that page uses
 * clamp(46px,11.5vw,120px) for a hero, while this one sits in a slim bar. The
 * transform-origin is left rather than center so the 1.5x stretch grows into the
 * bar instead of off the edge of it. */
.logo{font-family:"Jersey 20","Rubik Mono One",monospace;font-weight:400;
  font-size:clamp(26px,3.4vw,40px);line-height:1;letter-spacing:0;
  display:inline-flex;
  transform:skewX(-8deg) scaleX(1.5);transform-origin:left center;
  filter:drop-shadow(4px 5px 0 var(--shadow));}
.logo span{display:inline-block;
  text-shadow:2px 2px 0 rgba(0,0,0,.9),3px 3px 0 rgba(0,0,0,.82),
    4px 4px 0 rgba(0,0,0,.72),5px 5px 0 rgba(0,0,0,.6);}
.l1{color:var(--c-royalblue);} .l2{color:var(--c-yellow);} .l3{color:var(--c-magenta);}
.l4{color:var(--c-green);} .l5{color:var(--c-purple);} .l6{color:var(--c-orange);}
.l7{color:var(--c-turquoise);} .l8{color:var(--c-red);} .l9{color:var(--c-indigo);}

/* --- the buttons, copied rule-for-rule from the tutorial page ------------- */
/* Including the dark ink and the 3px border: the playground previously used
   white text on a thinner border, which read as a different site. */
.nav{display:flex;gap:10px;flex-wrap:wrap;}
.pixel-btn{font-family:"Rubik Mono One","Courier New",monospace;font-weight:400;
  font-size:16px;text-transform:lowercase;
  color:#0d0b12;text-decoration:none;padding:12px 20px;min-height:58px;
  border:3px solid #0d0b12;border-radius:2px;box-shadow:6px 6px 0 #0d0b12;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  cursor:pointer;transition:transform .07s steps(2),box-shadow .07s steps(2);}
.pixel-btn:hover,.pixel-btn:focus-visible{transform:translate(3px,3px);
  box-shadow:3px 3px 0 #0d0b12;outline:none;}
.pixel-btn:focus-visible{outline:3px dashed #fff;outline-offset:4px;}
.b-soon{font-size:8px;letter-spacing:1px;opacity:.8;text-transform:uppercase;}
/* the coming-soon buttons press like the real ones; they simply lead nowhere */
.is-soon{cursor:pointer;opacity:.62;}
.btn-tutorial{background:#320633;}
.btn-playground{background:var(--c-magenta);}
.btn-github{background:var(--c-green);}
.btn-download{background:#0000ff;}

/* The in-page controls are smaller than the nav: they sit inside a panel header,
   not a site header, and at 58px tall they would dominate it. */
.panel-tools .pixel-btn{font-size:13px;padding:8px 14px;min-height:0;
  border-width:2px;box-shadow:4px 4px 0 #0d0b12;}
.panel-tools .pixel-btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #0d0b12;}
/* Run is a deep crimson-burgundy — a darker relative of the palette's
   --c-burgundy (#B4204A), which is too bright to sit next to the editor. Light
   text here, because the ink used on the nav's brighter fills is unreadable
   on it. */
.btn-run{background:#8A1538;color:#fff5f7;}
.btn-clear{background:#241d38;color:#cfc9e0;}
.pixel-btn:disabled{opacity:.5;cursor:default;transform:none;
  box-shadow:4px 4px 0 #0d0b12;}

.region-label{font-family:"Rubik Mono One","Courier New",monospace;font-size:12px;
  letter-spacing:3px;text-transform:uppercase;color:var(--c-magenta);
  max-width:1400px;margin:16px auto 10px;padding:0 24px;width:100%;}
.region-label .rl-slashes{color:var(--c-turquoise);}

/* --- layout -------------------------------------------------------------- */

.wrap{max-width:1400px;width:100%;margin:0 auto;padding:0 22px 22px;
  flex:1;display:flex;flex-direction:column;gap:16px;min-height:0;}

.panel{background:var(--panel);border:2px solid var(--soft);
  box-shadow:6px 6px 0 var(--shadow);}

.intro{padding:16px 20px;}
.intro h1{font-family:"Courier New",Courier,monospace;font-size:22px;margin:0 0 10px;
  color:#7c95f7;border-bottom:2px dashed var(--hair);padding-bottom:10px;}
.intro p{margin:0;font-size:14px;line-height:1.7;color:#d6d2e6;}
.intro strong{color:var(--c-yellow);}
kbd{font-family:inherit;font-size:12.5px;background:var(--bar);border:1px solid var(--hair);
  border-bottom-width:2px;padding:1px 6px;color:var(--ink);}

/* Two columns on a wide screen, stacked on a narrow one. min-height:0 on the
   flex children is what lets the inner panes scroll instead of the page. */
.cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:16px;flex:1;min-height:420px;}
@media (max-width:900px){
  .cols{grid-template-columns:1fr;}
  .col-editor,.col-output{min-height:340px;}
}

.col-editor,.col-output{display:flex;flex-direction:column;min-height:0;}

.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 12px;background:linear-gradient(180deg,var(--bar) 0%,var(--bar-2) 100%);
  border-bottom:2px solid var(--hair);flex-wrap:wrap;}
.panel-title{font-size:13px;letter-spacing:1px;color:var(--ink-dim);
  text-transform:uppercase;}
.panel-tools{display:flex;align-items:center;gap:10px;}

/* --- the examples picker --------------------------------------------------
 *
 * A listbox in markup we control, not a <select>. The reason is the HIGHLIGHT:
 * a native select's popup is rendered by the operating system, and while option
 * backgrounds can be set, the highlight on the focused row cannot — so it could
 * not be made to match the page. Everything below is therefore ordinary CSS.
 *
 * The three colours asked for:
 *   the closed button   deep purple  #2E0B45   (as before)
 *   THE LIST            #7B2FBE, the palette's --c-purple — the same colour as
 *                       the thin border around the button
 *   THE HIGHLIGHT       #8A1538, the same deep crimson-burgundy as Run
 */

.picker{position:relative;}

.picker-btn{font-family:"Courier New",Courier,monospace;font-size:12.5px;
  display:inline-flex;align-items:center;gap:10px;
  background-color:#2E0B45;color:#ffffff;
  border:2px solid var(--c-purple);padding:8px 12px;border-radius:0;
  cursor:pointer;min-width:210px;text-align:left;}
.picker-btn:hover{border-color:var(--c-magenta);}
.picker-btn:focus-visible{outline:2px solid var(--c-magenta);outline-offset:1px;}
#picker-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.picker-arrow{width:0;height:0;flex:0 0 auto;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid #ffffff;}
.picker-btn[aria-expanded="true"] .picker-arrow{
  border-top:0;border-bottom:6px solid #ffffff;}

/* The list. Anchored to the button and allowed to scroll: twenty-odd entries in
   eight groups is taller than the panel. */
.picker-list{position:absolute;z-index:40;top:calc(100% + 4px);left:0;
  min-width:100%;width:max-content;max-width:min(92vw,420px);
  max-height:min(60vh,420px);overflow-y:auto;
  margin:0;padding:4px 0;list-style:none;
  background:var(--c-purple);color:#ffffff;
  border:2px solid #0d0b12;box-shadow:6px 6px 0 var(--shadow);}
.picker-list[hidden]{display:none;}

.picker-group{font-family:"Rubik Mono One","Courier New",monospace;
  font-size:9px;letter-spacing:2px;text-transform:uppercase;
  color:var(--c-yellow);padding:9px 12px 5px;
  border-top:1px solid rgba(255,255,255,.22);}
.picker-group:first-child{border-top:0;}

.picker-item{font-family:"Courier New",Courier,monospace;font-size:12.5px;
  color:#ffffff;padding:7px 14px;cursor:pointer;white-space:nowrap;}
/* ONE mechanism owns the highlight: the .is-active class, which JS sets on both
   mouseenter and arrow-key movement.
   There is deliberately NO `:hover` rule. With one, a visitor who hovers a row
   and then presses the down arrow sees TWO rows lit — CSS still matches :hover
   on the row the pointer physically rests on, while the class has moved. Driving
   hover through mouseenter instead keeps exactly one row current, whichever
   input the visitor is using. */
.picker-item.is-active{background:#8A1538;color:#fff5f7;}
.picker-item[aria-selected="true"]{font-weight:700;}
.picker-item[aria-selected="true"]::after{content:" \2022";color:var(--c-yellow);}

.editor-host{flex:1;min-height:0;overflow:hidden;background:var(--panel-inset);
  border-bottom:2px solid var(--hair);}
.editor-host .cm-editor{height:100%;}
.editor-host .cm-editor.cm-focused{outline:none;}
.editor-host .cm-scroller{overflow:auto;}

.stdin-block{padding:10px 12px;background:var(--panel);}
.stdin-label{display:block;font-size:11.5px;letter-spacing:1px;
  text-transform:uppercase;color:var(--ink-dim);margin-bottom:6px;}
.stdin-label .hint{text-transform:none;letter-spacing:0;color:#6f6885;}
.stdin-label code{color:var(--s-str);}
.stdin{width:100%;resize:vertical;font-family:"Courier New",Courier,monospace;
  font-size:13px;line-height:1.5;color:var(--s-code);background:var(--panel-inset);
  border:2px solid var(--hair);padding:8px 10px;border-radius:0;}
.stdin:focus{outline:none;border-color:var(--c-royalblue);}

/* --- output --------------------------------------------------------------- */

.output{flex:1;min-height:0;margin:0;padding:14px 16px;overflow:auto;
  background:var(--panel-inset);color:var(--s-code);
  font-family:"Courier New",Courier,monospace;font-size:13.5px;line-height:1.55;
  white-space:pre-wrap;word-break:break-word;tab-size:4;}
.out-stdout{color:var(--s-code);}
/* stderr is where a panic and a compile error arrive, so it is the thing the
   visitor most needs to find. */
.out-stderr{color:#ff8a80;}
.out-quiet{color:var(--s-com);font-style:italic;}

.status{font-size:12px;letter-spacing:.5px;color:var(--ink-dim);}
.status.good{color:var(--c-green);}
.status.bad{color:#ff8a80;}
.status.warn{color:var(--c-yellow);}
.status.busy{color:var(--c-turquoise);}

/* --- footer -------------------------------------------------------------- */

.foot{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;
  font-size:11.5px;color:#6f6885;padding:4px 0 0;}

.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;}