/* Visual language adapted from the supplied SQLLab MVP, without its learning/auth flows. */
:root{--bg:#f2f5f9;--panel:#f2f6fb;--border:#dce3ec;--text:#182636;--muted:#64748b;--accent:#235ad5;--shadow:0 3px 10px #12345604}
*{box-sizing:border-box}body{font-size:16px;line-height:1.5}
.topbar{min-height:76px;padding:14px 36px;gap:16px;position:relative}
.brand{display:flex;align-items:center;gap:4px;font-size:25px;font-weight:800;letter-spacing:-1px;color:#17283e}
.brand-icon{background:#193b6a;color:#fff;font-size:17px;padding:8px 9px;border-radius:8px;letter-spacing:0}
.brand-context{margin-left:24px;font-size:12px;font-weight:700;letter-spacing:2px;color:var(--muted)}
.top-actions{font-size:14px}.badge{font-size:13px;color:#32558f;background:#edf3fd;border-radius:5px;padding:4px 8px}
.container{margin:auto;padding:28px 36px}
.grid,.coach-grid{grid-template-columns:minmax(0,1fr) 340px;gap:24px}.grid>*{min-width:0}
.workspace-main,.right-split{display:flex;flex-direction:column;gap:20px}
.card{border-radius:12px;overflow:hidden}.card-h{padding:18px 22px;border-bottom:1px solid #edf1f6}.card-b,.right-top,.right-bottom{padding:22px}
.card-title,.sql-title,.result-title{font-size:16px;font-weight:750}.subtle,.request-meta,.result-meta,.muted{font-size:14px;color:var(--muted)}
.exercise-card{border-top:3px solid var(--accent)}.request-box{padding:0;border:0}.request-text{font-size:18px;line-height:1.65;color:var(--text)}
.request-controls{margin-top:20px;gap:14px}.request-controls-left{min-width:0;flex:1}.request-controls select{min-width:0;max-width:100%;flex:1}
button{font:inherit;font-size:14px;font-weight:650;border-radius:7px;padding:10px 16px;color:#334155;background:#f8fafc;border-color:#ccd6e4}
button:not(:disabled):hover{background:#edf3fd;border-color:#a6bddc}button.primary:not(:disabled):hover{background:#1c49b2;color:#fff}
input,select,textarea{font:inherit;font-size:14px;color:inherit;border-radius:6px;background:#fff;max-width:100%}
textarea{font:15px/1.8 var(--mono);background:#f7faff;min-height:250px}
:focus-visible{outline:3px solid #82afff;outline-offset:3px}
.divider{height:1px;border:0;background:var(--border)}
.feedback-box{background:#f0f5fd;border:0;border-left:3px solid #6792d4;border-radius:5px;line-height:1.65}
.feedback-error-code{margin-top:.625rem;color:var(--muted);font-size:.875rem}
.feedback-card{min-width:0;overflow-wrap:anywhere}
.coach-feedback-card:not(:has(.feedback-box:not(.hidden),.ai-feedback-panel:not(.hidden),#coach-ai-quota:not(.hidden))){display:none}
.ai-feedback-panel{border-color:#dce3ec;background:#f8faff;line-height:1.65}
th,td{padding:10px 12px;font-size:14px;border:0;border-bottom:1px solid #e3e9f0;text-align:left}
th{background:#f2f6fb;color:#43546c}tr:nth-child(even) td{background:#fafbfd}
.schema-table{border-bottom:1px solid var(--border);padding:10px 0}.schema-table:last-child{border-bottom:0}
.schema-table summary{cursor:pointer;font-size:14px;font-weight:650;overflow-wrap:anywhere}
.schema-count{float:right;font-size:12px;font-weight:400;color:var(--muted);padding-left:8px}
.schema-column{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:8px 0 4px 16px}
.schema-column code{font:14px var(--mono);color:#254f86;overflow-wrap:anywhere}.schema-column small{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.schema-help{margin:0 0 10px}.right-top,.coach-reference .right-top{max-height:520px;overflow:auto}
.sql-editor-host{min-width:0;max-width:100%;margin-top:10px}.editor-shortcuts{margin-top:8px;font-size:13px;color:var(--muted)}
.cm-editor .cm-tooltip-autocomplete ul{max-width:min(400px,80vw)}
.login-wrap{max-width:560px}.login-card{padding:30px;border-top:3px solid var(--accent)}
#home-view{max-width:1100px;padding-top:48px}#home-view .card-b{padding:32px}
.mode-card{background:#f8faff;border:1px solid #d4e0f0;padding:24px;min-height:140px;white-space:normal;text-decoration:none;display:block}
.mode-card strong{color:#214eaa;font-size:18px}.mode-card span{font-size:14px;color:var(--muted)}
@media(max-width:1100px){.grid,.coach-grid{grid-template-columns:minmax(0,1fr) 280px}.container{padding:24px 20px}.topbar{padding:14px 20px}.brand-context{display:none}}
@media(max-width:800px){.grid,.coach-grid{grid-template-columns:minmax(0,1fr)}.container{padding:18px 14px}.card-h,.card-b,.right-top,.right-bottom{padding:17px}.topbar{padding:14px}.request-text{font-size:16px}.request-controls-left{flex-wrap:wrap}.request-controls select{flex-basis:100%}.top-actions{gap:6px}.mode-grid{grid-template-columns:1fr}.login-wrap{margin:24px auto}.login-card{padding:22px}.login-card input{min-width:0!important;width:100%}#home-view .card-b{padding:22px}}

/* Responsive working surface: same content order at every window size. */
:root{
  --workspace-gutter:clamp(.875rem,2vw,2.5rem);
  --workspace-gap:clamp(.75rem,1vw,1.25rem);
  --workspace-padding:clamp(1rem,1.3vw,1.5rem);
  --editor-height:clamp(15rem,29vh,19rem);
}
@supports(height:100dvh){:root{--editor-height:clamp(15rem,29dvh,19rem)}}
#app-view,#coach-view{width:100%;max-width:none;padding:clamp(1rem,2vh,1.75rem) var(--workspace-gutter)}
.grid,.coach-grid{grid-template-columns:minmax(0,1fr) clamp(16rem,22vw,25rem);gap:var(--workspace-gap)}
.workspace-main,.right-split{gap:var(--workspace-gap)}
.card-h{padding:clamp(.75rem,1.4vh,1.125rem) var(--workspace-padding);flex-wrap:wrap}
.card-b,.right-top,.right-bottom{padding:var(--workspace-padding)}
.topbar{padding:.75rem var(--workspace-gutter);min-height:4rem}
.top-actions{min-width:0;max-width:100%;justify-content:flex-end;gap:.625rem}
#locale-note{max-width:48ch;overflow-wrap:anywhere;font-size:.8125rem}
.top-actions label,.top-actions select,.top-actions button,.brand{flex-shrink:0}
button,select{min-height:2.75rem}
.request-controls-left{flex-wrap:wrap}
#question-select,#trainer-question-select{width:100%;min-width:0;flex:1 1 16rem}
.sql-editor-host .cm-editor{font-size:.9375rem}
.sql-editor-host .cm-editor .cm-scroller{height:var(--editor-height);min-height:0;max-height:none;overflow:auto}
#sql-editor,#coach-sql-editor{height:var(--editor-height);min-height:0;font-size:.9375rem}
.workspace-main .sql-editor-host{margin-top:0}
.editor-shortcuts{font-size:.8125rem;overflow-wrap:anywhere}
.right-split,.coach-reference{position:sticky;top:1rem;align-self:start}
.right-top,.coach-reference .right-top{max-height:calc(100vh - 9rem);max-height:calc(100dvh - 9rem);overflow:auto;overscroll-behavior:contain}
.schema-count{float:right;display:inline;padding-left:.5rem;text-align:right}
.schema-table summary{position:relative;padding-right:.25rem}
.feedback-card .feedback-box,.feedback-card .ai-feedback-panel{line-height:1.6}
.workspace-main .feedback-card .card-h{padding:.625rem var(--workspace-padding)}
.workspace-main .feedback-card .card-b{padding:.75rem var(--workspace-padding)}
.workspace-main .feedback-card .card-b:not(:has(.feedback-box:not(.hidden),.ai-feedback-panel:not(.hidden),.feedback-actions button:not(.hidden),.muted:not(.hidden))){display:none}
#structured-result-card .card-h,#coach-result-card .card-h{padding:.625rem var(--workspace-padding)}
#structured-result-card .card-b,#coach-result-card .card-b{padding:.75rem var(--workspace-padding)}
#app-view .exercise-card .card-h{padding:.625rem var(--workspace-padding)}
#app-view .structured-form-progress{padding:.625rem var(--workspace-padding)}
#app-view .structured-form-progress-count{margin-top:.5rem}
#app-view .structured-form-progress-track{margin-top:.375rem}
#app-view .exercise-card .card-b{padding:.75rem var(--workspace-padding)}
#app-view .request-controls{margin-top:.75rem}
#structured-result-card table,#coach-result-card table{min-width:100%;width:max-content}
#structured-result-card th,#coach-result-card th{white-space:nowrap}
@media(max-width:60rem){
  .grid,.coach-grid{grid-template-columns:minmax(0,1fr)}
  .right-split,.coach-reference{position:static}
  .right-top,.coach-reference .right-top{max-height:24rem}
  #locale-note{flex-basis:100%;max-width:none;order:1}
  .top-actions{flex:1 1 18rem}
}
@media(max-width:40rem){
  :root{--editor-height:clamp(13rem,30vh,17rem)}
  .topbar{align-items:flex-start;gap:.75rem}
  .top-actions{justify-content:flex-start;flex-basis:100%}
  .card-h,.card-b,.right-top,.right-bottom{padding:1rem}
  .request-controls-left{width:100%}
  #question-select,#trainer-question-select{flex-basis:100%}
  .schema-column{padding-left:.5rem}
  .feedback-reactions{display:flex;flex-wrap:wrap;gap:.5rem}
}
@media(max-height:44rem) and (min-width:60.01rem){
  :root{--workspace-padding:1rem;--workspace-gap:.75rem;--editor-height:clamp(13rem,28vh,16rem)}
  .topbar{min-height:3.5rem;padding-top:.5rem;padding-bottom:.5rem}
}

/* SQL Trainer experiment: six-line editor and a shared Schema/Feedback side panel. */
.trainer-editor .sql-editor-host .cm-editor .cm-scroller{
  height:11.875rem;
  min-height:11.875rem;
  max-height:11.875rem;
  overflow:auto;
}
#trainer-sql-editor{height:11.875rem;min-height:11.875rem}
.trainer-query-header{justify-content:space-between;align-items:flex-end;gap:.75rem}
.trainer-query-copy{min-width:0}
.trainer-query-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:.5rem;margin-left:auto;min-width:0}
.trainer-query-actions #trainer-result-status{max-width:24rem;overflow-wrap:anywhere;text-align:right}
.trainer-query-actions #trainer-feedback-start-error{flex-basis:100%;text-align:right}
.trainer-panel-header{align-items:center}
.trainer-tabs{display:flex;min-width:0;gap:.25rem;padding:.1875rem;border:1px solid var(--border);border-radius:.5rem;background:#f2f6fb}
.trainer-tab{min-height:2.25rem;padding:.375rem .75rem;border:0;background:transparent;color:var(--muted)}
.trainer-tab[aria-selected="true"]{background:#fff;color:var(--accent);box-shadow:0 1px 3px #12345618}
.trainer-tab-panel{max-height:calc(100vh - 9rem);max-height:calc(100dvh - 9rem);overflow:auto;overscroll-behavior:contain}
.trainer-feedback-placeholder{margin:0}
.trainer-feedback-conversation{display:flex;flex-direction:column;align-items:stretch;gap:.75rem;min-width:0}
.trainer-tutor-message{align-self:flex-start;width:min(100%,32rem);box-sizing:border-box;padding:.875rem 1rem;border:1px solid #cbd8ea;border-radius:.25rem 1rem 1rem 1rem;background:#f0f5fd;color:var(--text);box-shadow:0 1px 3px #12345612;overflow-wrap:anywhere;word-break:break-word}
.trainer-student-message{align-self:flex-end;width:min(88%,28rem);box-sizing:border-box;padding:.75rem .875rem;border:1px solid #d6dce5;border-radius:1rem .25rem 1rem 1rem;background:#f7f8fa;color:var(--text);overflow-wrap:anywhere;word-break:break-word}
.trainer-student-sender{text-align:right;margin-bottom:.375rem;color:var(--muted);font-size:.75rem;font-weight:800}
.trainer-student-text{white-space:pre-wrap;line-height:1.5}
.trainer-tutor-sender{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;color:#1e4f91;font-size:.8125rem;font-weight:800}
.trainer-tutor-avatar{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:50%;background:#dbeafe;color:#1e40af;font-size:.625rem;letter-spacing:.02em}
.trainer-tutor-text{white-space:pre-wrap;line-height:1.55}
.trainer-tutor-message .feedback-error-code{margin-top:.625rem;padding-top:.5rem;border-top:1px solid #cbd8ea;font-size:.75rem}
.trainer-tutor-details{margin-top:.625rem;font-size:.8125rem}
.trainer-tutor-details .subtle{margin-top:.375rem;white-space:pre-wrap;overflow-wrap:anywhere}
.trainer-tutor-actions{margin-top:0}
.trainer-tutor-actions:has(button.hidden){display:none}
.trainer-followup-action{min-height:0;padding:.25rem .125rem;border:0;border-radius:.25rem;background:transparent;color:var(--accent);font-weight:700;text-align:left;text-decoration:none}
.trainer-followup-action::before{content:"↳";margin-right:.375rem;color:var(--muted)}
.trainer-followup-action:hover{text-decoration:underline}
.trainer-followup-action:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.trainer-tutor-reactions{display:flex;gap:.25rem}
.trainer-tutor-reactions button{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;min-height:2rem;padding:.25rem;border-radius:999px;background:transparent;font-size:1rem;line-height:1}
.trainer-tutor-reactions button[aria-pressed="true"]{text-decoration:none}
#trainer-ai-quota{margin-top:.75rem;overflow-wrap:anywhere}
@media(max-width:60rem){
  .trainer-tab-panel{max-height:24rem}
}
@media(max-width:40rem){
  .trainer-query-header{align-items:stretch}
  .trainer-query-copy{width:100%}
  .trainer-query-actions{width:100%;margin-left:0}
  .trainer-query-actions #trainer-result-status{flex:1 1 10rem;text-align:left}
  .trainer-query-actions #trainer-feedback-start-error{text-align:left}
  .trainer-query-actions #btn-trainer-run{margin-left:auto}
  .trainer-panel-header{align-items:stretch}
  .trainer-tabs{width:100%}
  .trainer-tab{flex:1 1 0}
  .trainer-tutor-message{width:100%;padding:.75rem .875rem}
  .trainer-student-message{width:min(92%,28rem)}
}