/* ===========================================================================
   Module 01 — practice workbook.
   The presenter's element ids are unchanged so its logic binds as written; all
   that changed is how those elements look. The pgAdmin skin (dark chrome, icon
   rail, window title bar) is gone in favour of the site's shared theme.
   =========================================================================== */

.wb{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;
  height:100%; min-height:0;   /* the .fillhost archetype sizes it */
}
.wb:fullscreen{border:0; border-radius:0; height:100vh; max-height:none}

/* ------------------------------------------------------------------ toolbar */
.wb-top{
  display:flex; align-items:center; gap:8px; padding:9px 14px;
  border-bottom:1px solid var(--line); background:var(--ground); flex-shrink:0; flex-wrap:wrap;
}
.wb-views{display:flex; background:var(--white); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.wb-views .tab{
  padding:6px 15px; font-size:14.5px; color:var(--ink-2); border:none; background:none;
}
.wb-views .tab.active{background:var(--accent-wash); color:var(--accent-deep); font-weight:700}
#counter{font-family:var(--mono); font-size:14px; color:var(--ink-2)}
#counter b{color:var(--ink)}
.wb-top .fill{flex:1}
.wb-top kbd{
  font-family:var(--mono); font-size:11px; color:var(--ink-3); background:var(--white);
  border:1px solid var(--line); border-radius:3px; padding:1px 4px; margin-left:5px;
}
#btnExecute.ready{
  background:var(--good-wash); border-color:var(--good-line); color:var(--good); font-weight:700;
  animation:wbpulse 1.5s infinite;
}
@keyframes wbpulse{0%,100%{box-shadow:0 0 0 0 rgba(10,107,67,.22)}50%{box-shadow:0 0 0 5px rgba(10,107,67,.08)}}

/* -------------------------------------------------------------------- body */
.wb-body{flex:1; display:flex; min-height:0}
.scratch{
  width:430px; flex-shrink:0; border-right:1px solid var(--line);
  display:flex; flex-direction:column; min-height:0; background:var(--white);
}
.scratch-hdr{
  padding:9px 15px; border-bottom:1px solid var(--line); background:var(--ground);
  font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-2);
}
#scratchBody{padding:17px 18px; overflow-y:auto; flex:1; font-size:15.5px}

.sc-num{
  display:inline-block; font-family:var(--mono); font-size:13px; font-weight:700;
  background:var(--accent-solid); color:#fff; padding:2px 7px; border-radius:var(--r-sm);
}
.sc-unit{font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); margin-top:9px}
.sc-title{font-size:20px; font-weight:600; color:var(--ink); margin-top:3px; line-height:1.3}
.sc-sec{
  display:flex; align-items:center; gap:8px; margin:18px 0 7px;
  font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3);
}
.sc-sec .d{width:5px; height:5px; border-radius:50%; background:var(--accent); flex-shrink:0}
.sc-sec::after{content:""; flex:1; height:1px; background:var(--line)}
.sch-phase{font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink-3)}
.sch-phase.after{color:var(--good)}
.sc-quest{font-size:16px; line-height:1.55; color:var(--ink-2)}
.sc-quest b{
  font-family:var(--mono); font-size:14px; color:var(--accent-deep);
  background:var(--accent-wash); padding:0 4px; border-radius:3px; font-weight:700;
}
.sc-given{
  font-family:var(--mono); font-size:13px; white-space:pre; overflow-x:auto;
  background:var(--ground); border:1px solid var(--line); border-radius:var(--r);
  padding:10px 11px; color:var(--ink-2); line-height:1.45;
}
.sc-given .arrow{color:var(--good); font-weight:700}
.sc-given .errline{color:var(--bad)}
.sc-hints{position:relative}
.sc-hints ol{margin:0; padding-left:21px; font-size:15px; color:var(--ink-2); line-height:1.5}
.sc-hints li{margin-bottom:5px}
.sc-hints .lock{display:none}
.sc-hints.locked ol{filter:blur(4px); opacity:.42; pointer-events:none; user-select:none}
.sc-hints.locked .lock{
  display:flex; align-items:center; justify-content:center; position:absolute; inset:0;
  font-size:13.5px; color:var(--ink-3);
}
.sc-hints kbd{
  font-family:var(--mono); font-size:11.5px; background:var(--white);
  border:1px solid var(--line); border-radius:3px; padding:1px 5px;
}

/* --------------------------------------------------------- schema preview */
.sch-none{font-size:14px; color:var(--ink-3); font-style:italic}
.sch-table{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  margin-bottom:9px; background:var(--white);
}
.sch-th{
  padding:6px 10px; background:var(--ground); border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:13.5px; font-weight:700; color:var(--ink);
  display:flex; align-items:center; gap:6px;
}
.sch-th .ti2{color:var(--accent)}
.sch-table.tdrop{opacity:.55}
.sch-table.tdrop .sch-th{color:var(--bad); text-decoration:line-through}
.sch-col{
  display:flex; align-items:center; gap:7px; padding:4px 10px;
  border-bottom:1px solid var(--line-soft); font-family:var(--mono); font-size:13px;
}
.sch-col:last-child{border-bottom:none}
.sch-col .cn{flex:1; color:var(--ink); display:flex; align-items:center; gap:4px; min-width:0}
.sch-col .key{font-size:11px}
.sch-col .ct{color:var(--sql-type)}
.sch-col .bd{display:flex; gap:3px}
.sch-col.add{background:var(--good-wash)}
.sch-col.add .cn{color:var(--good); font-weight:700}
.sch-col.mod{background:var(--warn-wash)}
.sch-col.mod .cn{color:var(--warn); font-weight:700}
.sch-col.drop{background:var(--bad-wash); opacity:.72}
.sch-col.drop .cn{color:var(--bad); text-decoration:line-through}
.sch-col .bd span{
  font-size:10px; font-weight:700; letter-spacing:.04em; padding:1px 5px;
  border-radius:3px; background:var(--ground); border:1px solid var(--line); color:var(--ink-2);
}
.sch-col .b-PK{background:var(--warn-wash); border-color:var(--warn-line); color:var(--warn)}
.sch-col .b-NN{background:var(--bad-wash); border-color:var(--bad-line); color:var(--bad)}
.sch-col .b-UQ,.sch-col .b-FK{background:var(--accent-wash); border-color:var(--accent-line); color:var(--accent-deep)}
.sch-col .b-CHK,.sch-col .b-SER{background:var(--note-wash); border-color:var(--note-line); color:var(--note)}
.sch-note{font-size:13.5px; color:var(--ink-2); margin-top:7px; line-height:1.45}
.sch-note b{color:var(--ink)}

/* ------------------------------------------------------------------ editor */
.wb-main{flex:1; display:flex; flex-direction:column; min-width:0; min-height:0}
#editorCol{flex:1; display:flex; flex-direction:column; min-height:0}
.qeditor{flex:1; display:flex; min-height:0; position:relative; background:var(--white)}
#editorCol.psql .qeditor{display:none}
#gutter{
  padding:16px 11px 16px 16px; text-align:right; font-family:var(--mono); font-size:16.5px;
  line-height:1.62; color:var(--ink-3); background:var(--ground);
  border-right:1px solid var(--line); white-space:pre; user-select:none; flex-shrink:0;
}
#codewrap{flex:1; overflow:auto; padding:14px 16px; cursor:text; min-width:0}
pre.code{
  font-family:var(--mono); font-size:16.5px; line-height:1.62; color:var(--ink);
  white-space:pre-wrap; word-break:break-word; margin:0;
}
.cursor{
  display:inline-block; width:7px; height:1.02em; background:var(--accent);
  vertical-align:text-bottom; animation:wbblink 1.05s steps(1) infinite;
}
.cursor.hidden{display:none}
@keyframes wbblink{50%{opacity:0}}
.edit-hint{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  font-size:14px; color:var(--ink-3); background:var(--white);
  border:1px dashed var(--line); border-radius:99px; padding:5px 14px; white-space:nowrap;
}
.edit-hint kbd{font-family:var(--mono); font-size:10.5px; border:1px solid var(--line); border-radius:3px; padding:0 4px}

#psqlTerm{
  display:none; flex:1; min-height:0; overflow:auto; padding:14px 16px;
  font-family:var(--mono); font-size:16px; line-height:1.62;
  white-space:pre-wrap; word-break:break-word; cursor:text;
  background:var(--ground); color:var(--ink);
}
#editorCol.psql #psqlTerm{display:block}
.pq-dim{color:var(--ink-3)}
.pq-prompt{color:var(--good); font-weight:700}
.pq-out{color:var(--ink-2)}
.pq-cursor{
  display:inline-block; width:7px; height:1.02em; background:var(--accent);
  vertical-align:text-bottom; animation:wbblink 1.05s steps(1) infinite;
}

/* ------------------------------------------------------------------ output */
#vsplit{height:6px; background:var(--ground); border-top:1px solid var(--line); border-bottom:1px solid var(--line); cursor:row-resize; flex-shrink:0}
#vsplit:hover,#vsplit.drag{background:var(--accent-wash)}
#bottom{height:44%; min-height:170px; display:flex; flex-direction:column; flex-shrink:0; min-height:80px}
.outtabs{display:flex; border-bottom:1px solid var(--line); background:var(--ground); flex-shrink:0}
.outtab{padding:8px 17px; font-size:14px; color:var(--ink-2); position:relative; background:none; border:none}
.outtab.active{color:var(--accent-deep); font-weight:700}
.outtab.active::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent)}
.outbody{flex:1; overflow:auto; min-height:0}
.out-pane{display:none; padding:12px 14px}
.out-pane.active{display:block}
.out-empty{font-size:14.5px; color:var(--ink-3); padding:8px 0}
.out-note{
  font-family:var(--mono); font-size:14px; white-space:pre-wrap; color:var(--ink-2);
  line-height:1.5; margin-top:8px;
}
.out-note .arrow{color:var(--good); font-weight:700}
.out-note .errline{color:var(--bad)}
.msg-ok{font-family:var(--mono); font-size:14px; white-space:pre-wrap; color:var(--good); line-height:1.55}
.msg-ok .cmd{
  display:inline-block; background:var(--good-wash); border:1px solid var(--good-line);
  border-radius:3px; padding:1px 7px; font-weight:700; color:var(--good);
}
.newtag{color:var(--good); font-weight:700}
.fade{animation:wbfade .22s ease}
@keyframes wbfade{from{opacity:0; transform:translateY(3px)}to{opacity:1; transform:none}}
.spinner{
  display:inline-block; width:11px; height:11px; border:2px solid var(--line);
  border-top-color:var(--accent); border-radius:50%; animation:wbspin .7s linear infinite;
  vertical-align:-1px; margin-right:6px;
}
@keyframes wbspin{to{transform:rotate(360deg)}}
.out-pane td.rownum,.out-pane th.rownum{
  background:var(--ground); color:var(--ink-3); text-align:right;
  width:34px; font-size:11px; user-select:none;
}

/* -------------------------------------------------------------- status bar */
.wb-status{
  display:flex; align-items:center; gap:18px; padding:6px 14px; flex-shrink:0;
  border-top:1px solid var(--line); background:var(--ground);
  font-family:var(--mono); font-size:13px; color:var(--ink-2);
}
.wb-status .sright{margin-left:auto; display:flex; gap:16px; align-items:center}
#stRuntime{color:var(--good)}

/* ---------------------------------------------------------------- welcome */
#welcomeView{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px 24px; gap:14px;
}
#welcomeView h2{font-size:30px}
#welcomeView p{max-width:62ch; color:var(--ink-2)}
#welcomeView .stats{display:flex; gap:34px; margin:10px 0 4px; flex-wrap:wrap; justify-content:center}
#welcomeView .stat .k{font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3)}
#welcomeView .stat .v{font-size:17px; font-weight:600; color:var(--ink); margin-top:2px}
#welcomeView .stat .v span{color:var(--accent-deep)}
#queryView{flex:1; display:flex; flex-direction:column; min-height:0}

/* ------------------------------------------------------- contents overlay */
#overlay{
  position:fixed; inset:0; background:rgba(14,17,22,.97); z-index:80;
  display:none; flex-direction:column; padding:26px 30px;
}
#overlay.open{display:flex}
.ov-head{display:flex; align-items:center; gap:14px; margin-bottom:20px; flex-shrink:0}
.ov-head h2{font-size:21px}
.ov-close{margin-left:auto; font-size:24px; color:var(--ink-2); line-height:1; padding:0 8px}
.ov-grid{
  flex:1; overflow-y:auto; display:grid; gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); align-content:start;
}
.ov-unit h3{
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-deep); margin-bottom:7px; padding-bottom:5px; border-bottom:1px solid var(--line);
}
.ov-item{
  display:flex; gap:10px; padding:6px 9px; border-radius:var(--r-sm);
  cursor:pointer; font-size:15px; color:var(--ink-2); align-items:baseline;
}
.ov-item:hover{background:var(--accent-wash); color:var(--ink)}
.ov-item.current{background:var(--accent-solid); color:#fff}
.ov-item .n{font-family:var(--mono); font-size:13px; color:var(--ink-3); flex-shrink:0; width:32px}
.ov-item.current .n{color:var(--accent-wash)}

@media (max-width:900px), (max-height:600px){
  .wb{height:auto; min-height:0}
  .wb-body{flex-direction:column}
  .scratch{width:auto; border-right:none; border-bottom:1px solid var(--line); max-height:340px}
  .qeditor{min-height:240px}
  #bottom{height:auto; max-height:320px; min-height:0}
  #vsplit{display:none}
}

/* Result grids read at the workbook's larger scale; the reference page keeps
   the theme's default so its 459-row list stays compact. */
.wb table.grid{font-size:15px}
.wb table.grid th{font-size:12.5px}
.wb .rowcount{font-size:13px}