/* The Pianonator: TeachSmarts App Design Constitution tokens (section 3). Only the colour
   block is app-specific; every structural token is the family's own. */
:root{
  --primary-color:#0F7C8A;
  --primary-hover:#0B6570;
  --secondary-color:#95a5a6;
  --secondary-hover:#7f8c8d;
  --success-color:#34A853;
  --success-hover:#2e8a4a;
  --danger-color:#e74c3c;
  --danger-hover:#c0392b;
  --text-dark:#2c3e50;
  --text-light:#34495e;
  --text-muted:#8b929a;
  --input-bg:#ecf0f1;
  --container-bg-color:#ffffff;
  --main-bg-color:#f0f2f5;
  --gradient-start:#e7f5f6;
  --gradient-end:#fdfefe;
  --border-soft:#d5deec;
  --border-input:#ccc;
  --font-sans:'Google Sans','Roboto Flex','Inter','Roboto','Segoe UI',sans-serif;

  --radius-input:8px;
  --radius-button:8px;
  --radius-card:16px;
  --radius-modal:18px;
  --radius-pill:999px;

  --space-xs:6px;
  --space-sm:10px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-2xl:48px;

  --control-height:44px;
  --width-app-max:960px;
  --width-wizard-max:900px;
  --width-landing-max:1320px;
  --width-legal-max:860px;

  --shadow-card:0 12px 36px rgba(0,0,0,.08);
  --shadow-card-soft:0 4px 20px rgba(0,0,0,.06);
  --shadow-hover-lift:0 6px 14px rgba(0,0,0,.08);
  --shadow-modal:0 28px 80px rgba(15,23,42,.28);

  --font-size-page-title:2rem;
  --font-size-section:1.5rem;
  --font-size-card-title:1.125rem;
  --font-size-body:1rem;
  --font-size-control:1em;
  --font-size-helper:0.875rem;

  --transition-fast:0.2s ease;
  --transition-lift:0.15s ease;

  --z-dropdown:10;
  --z-sticky-nav:100;
  --z-modal:9999;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:var(--font-sans);
  font-size:var(--font-size-body);
  color:var(--text-dark);
  background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));
  background-attachment:fixed;
  min-height:100vh;
}
button{font-family:var(--font-sans)}
.hidden{display:none !important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Layout model (§6): .page-frame > .app-container */
/* The card always sits in the middle of the window, and grows downwards from there when tall */
.page-frame{
  min-height:100vh;box-sizing:border-box;padding:var(--space-xl) var(--space-md);
  display:flex;flex-direction:column;justify-content:center;
}
.app-container{
  width:100%;box-sizing:border-box;
  background:var(--container-bg-color);
  border:1px solid rgba(15,23,42,.08);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  padding:var(--space-lg);
  max-width:var(--width-app-max);
  margin:0 auto;
}

.app-header{
  display:flex;align-items:center;gap:var(--space-md);
  padding-bottom:var(--space-md);margin-bottom:var(--space-sm);
  border-bottom:1px solid var(--border-soft);
}
.app-header-logo{flex:none;width:var(--control-height);height:var(--control-height);display:block}
.app-header-title{margin:0;font-size:var(--font-size-card-title);font-weight:700;color:var(--text-dark)}
.app-header-tagline{margin:0;font-size:var(--font-size-helper);color:var(--text-muted)}

/* Wizard page (§5) */
.wizard-page{display:none;width:100%;padding:var(--space-md) var(--space-sm)}
.wizard-page.active{display:block;animation:fadeIn .5s}
.wizard-page.center-content{max-width:var(--width-wizard-max);margin:0 auto}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.step-title{margin:0 0 var(--space-sm);font-size:var(--font-size-page-title);font-weight:700;color:var(--text-dark)}
.helper{margin:0 0 var(--space-lg);font-size:var(--font-size-body);color:var(--text-light);line-height:1.5}
.group-label{margin:var(--space-lg) 0 var(--space-sm);font-weight:700;color:var(--text-light)}
.step-title + .group-label,.helper + .group-label{margin-top:0}

.wizard-nav-row{
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);
  margin-top:var(--space-lg);padding:var(--space-md) var(--space-sm) 0;
  border-top:1px solid var(--border-soft);
}

/* Buttons (§5) */
.btn{
  background:var(--primary-color);color:#fff;font-weight:bold;font-size:var(--font-size-control);
  border:none;border-radius:var(--radius-button);padding:15px 30px;min-height:var(--control-height);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background-color var(--transition-fast);
}
.btn:hover:not([disabled]){background:var(--primary-hover)}
.btn[disabled]{background:#bdc3c7;cursor:not-allowed}
.btn.btn-secondary{background:var(--secondary-color)}
.btn.btn-secondary:hover:not([disabled]){background:var(--secondary-hover)}
.btn.btn-secondary[disabled]{background:#bdc3c7}
.btn.btn-compact{padding:var(--space-xs) var(--space-md);min-height:0;height:var(--control-height);white-space:nowrap}

.link-btn{
  background:none;border:none;color:var(--primary-color);font-weight:bold;font-size:0.9em;
  text-decoration:underline;padding:5px;cursor:pointer;
}
.link-btn[disabled]{color:var(--text-muted);cursor:not-allowed;text-decoration:none}

.icon-btn{
  flex:none;width:var(--control-height);height:var(--control-height);border:none;cursor:pointer;
  border-radius:var(--radius-pill);background:#eef3f8;display:inline-flex;align-items:center;justify-content:center;
  transition:background-color var(--transition-fast);
}
.icon-btn:hover:not([disabled]){background:#dbe6f2}
.icon-btn[disabled]{opacity:.4;cursor:not-allowed}
.icon-btn svg{width:var(--space-lg);height:var(--space-lg);fill:var(--text-light)}

/* Button group + selectable button (§5) */
.button-group{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:stretch;width:100%}
.selectable-btn{
  flex:1 1 200px;background:var(--input-bg);color:var(--text-light);
  border:2px solid #bdc3c7;border-radius:var(--radius-button);padding:var(--space-lg);
  text-align:center;cursor:pointer;transition:all var(--transition-fast);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);
}
.selectable-btn:hover{border-color:var(--primary-color)}
.selectable-btn.checked{background:var(--primary-color);color:#fff;border-color:var(--primary-hover)}
.selectable-btn-title{font-weight:bold;font-size:var(--font-size-control)}
.selectable-btn-detail{font-size:var(--font-size-helper);line-height:1.4}
.output-group .selectable-btn{flex-basis:calc(50% - var(--space-sm))}
.mode-group .selectable-btn{padding:var(--space-xl) var(--space-lg)}
.mode-group .selectable-btn-title{font-size:var(--font-size-card-title)}
.mode-icon{
  width:var(--space-2xl);height:var(--space-2xl);border-radius:var(--radius-pill);margin-bottom:var(--space-xs);
  display:inline-flex;align-items:center;justify-content:center;background:var(--gradient-start);
  transition:background-color var(--transition-fast);
}
.mode-icon svg{width:var(--space-lg);height:var(--space-lg);fill:none;stroke:var(--primary-color);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.selectable-btn.checked .mode-icon{background:rgba(255,255,255,.18)}
.selectable-btn.checked .mode-icon svg{stroke:#fff}

/* Section heading + table (§5 Table) */
.section-heading-row{display:flex;justify-content:space-between;align-items:center;margin:var(--space-lg) 0 var(--space-xs)}
.section-heading{margin:0;font-size:var(--font-size-card-title);color:var(--text-dark);display:flex;align-items:center;gap:var(--space-sm)}
.count-badge{
  display:inline-flex;align-items:center;justify-content:center;min-width:var(--space-lg);height:var(--space-lg);
  padding:0 var(--space-xs);border-radius:var(--radius-pill);background:var(--gradient-start);
  color:var(--primary-hover);font-size:var(--font-size-helper);font-weight:bold;
}
.table-wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse}
.data-table th{
  font-size:var(--font-size-helper);font-weight:600;text-align:left;color:var(--text-light);
  padding:var(--space-sm) var(--space-md);border-bottom:2px solid var(--border-soft);
}
.data-table td{
  font-size:var(--font-size-body);padding:var(--space-sm) var(--space-md);
  border-bottom:1px solid var(--border-soft);color:var(--text-dark);vertical-align:middle;
}
.data-table tr:hover td{background:var(--input-bg)}
.data-table .cell-sub{display:block;font-size:var(--font-size-helper);color:var(--text-muted)}
.data-table .col-action{width:var(--control-height)}
.data-table .col-results{width:1%;white-space:nowrap}
.data-table:has(tbody:empty) thead{display:none}
.remove-btn{
  width:32px;height:32px;border:none;background:transparent;color:var(--text-light);font-size:1.3rem;
  border-radius:var(--radius-pill);cursor:pointer;
}
.remove-btn:hover{background:var(--input-bg)}
.empty-state{margin:0;padding:var(--space-lg);text-align:center;color:var(--text-muted);background:var(--input-bg);border-radius:var(--radius-input)}

.status-text{font-weight:bold}
.status-text.state-done{color:var(--success-hover)}
.status-text.state-error{color:var(--danger-hover)}
.status-text.state-working{color:var(--primary-color)}
.status-text.state-waiting,.status-text.state-skipped,.status-text.state-cancelled{color:var(--text-muted)}
.result-links{display:flex;gap:var(--space-xs)}

/* Text inputs (§5) */
.form-group{margin-bottom:var(--space-md)}
.form-group label{display:block;margin-bottom:var(--space-xs);font-weight:700;color:var(--text-light)}
input[type="text"]{
  width:100%;box-sizing:border-box;padding:15px;
  border:1px solid var(--border-input);border-radius:var(--radius-input);
  background:var(--input-bg);font-size:var(--font-size-body);font-family:var(--font-sans);color:var(--text-dark);
}
input[type="text"]:focus{outline:2px solid var(--primary-color);outline-offset:1px;background:var(--container-bg-color)}
.field-help{margin:var(--space-xs) 0 0;font-size:var(--font-size-helper);color:var(--text-muted)}
.title-table-wrap{max-height:360px;overflow-y:auto}
.data-table input.title-input{padding:var(--space-sm) var(--space-sm)}

select{
  width:100%;box-sizing:border-box;padding:var(--space-sm) var(--space-md);min-height:var(--control-height);
  border:1px solid var(--border-input);border-radius:var(--radius-input);
  background:var(--input-bg);font-size:var(--font-size-body);font-family:var(--font-sans);color:var(--text-dark);
  cursor:pointer;
}
select:focus{outline:2px solid var(--primary-color);outline-offset:1px}

/* Choose Parts: player and lanes */
.player{
  display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-md);
  margin-bottom:var(--space-sm);background:var(--gradient-start);border-radius:var(--radius-input);
}
.player .icon-btn{background:var(--primary-color)}
.player .icon-btn:hover:not([disabled]){background:var(--primary-hover)}
.player .icon-btn svg{fill:#fff}
.player-time{font-size:var(--font-size-helper);color:var(--text-light);font-variant-numeric:tabular-nums;white-space:nowrap}
.player-seek{flex:1;min-width:0;accent-color:var(--primary-color);cursor:pointer}
.parts-table .col-keep{width:1%}
.parts-table .col-strip{width:30%}
.parts-table .col-listen{width:1%}
.parts-table td{vertical-align:middle}
.parts-table input[type="checkbox"]{width:20px;height:20px;accent-color:var(--primary-color);cursor:pointer}
.parts-table tr.is-off .lane-name,.parts-table tr.is-off .lane-strip{opacity:.4}
.parts-table select{min-height:0;padding:var(--space-xs) var(--space-sm);width:auto}
.parts-table .cell-sub{direction:ltr;max-width:260px;white-space:normal;overflow:visible}
.lane-name{font-weight:600}
.lane-strip{
  position:relative;display:flex;align-items:flex-end;gap:1px;height:28px;min-width:160px;
  background:var(--input-bg);border-radius:4px;padding:2px;cursor:pointer;
}
.lane-strip span{flex:1;background:var(--primary-color);border-radius:1px;opacity:.75}
.lane-playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--danger-color);left:0;pointer-events:none}
.lane-buttons{display:flex;gap:var(--space-xs)}
.toggle-btn{
  border:1px solid var(--border-input);background:var(--container-bg-color);color:var(--text-light);
  border-radius:var(--radius-pill);padding:4px 12px;font-size:var(--font-size-helper);font-weight:bold;cursor:pointer;
  transition:all var(--transition-fast);
}
.toggle-btn:hover{border-color:var(--primary-color)}
.toggle-btn.active{background:var(--primary-color);border-color:var(--primary-hover);color:#fff}
.toggle-btn.active.is-mute{background:var(--secondary-hover);border-color:var(--secondary-hover)}

/* Status box (§5) */
.status-box{margin-top:var(--space-md);padding:var(--space-md);border-radius:var(--radius-input);text-align:center;font-size:1.1em;background:var(--input-bg);color:var(--text-light)}
.status-box.error{background:#fdedec;border:1px solid #fadbd8;color:var(--danger-hover)}

/* Confirmation modal (§5) */
.confirm-modal-overlay{
  position:fixed;inset:0;z-index:var(--z-modal);background:rgba(17,24,39,.42);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:var(--space-lg);
}
.confirm-modal-content{
  position:relative;background:#fff;border-radius:var(--radius-modal);box-shadow:var(--shadow-modal);
  border-top:6px solid var(--primary-color);padding:var(--space-lg);
  width:min(480px,100%);max-height:88vh;overflow-y:auto;
}
.modal-close-btn{
  position:absolute;top:12px;right:12px;width:32px;height:32px;border:none;background:transparent;
  color:var(--text-light);font-size:1.3rem;border-radius:var(--radius-pill);cursor:pointer;
}
.modal-close-btn:hover{background:var(--input-bg)}
.confirm-modal-title{margin:0 0 10px;font-size:1.5rem;font-weight:700;color:var(--text-dark);text-align:center}
.confirm-modal-copy{margin:0;color:var(--text-light);font-size:1.05rem;line-height:1.6;text-align:center}
.confirm-modal-actions{display:flex;justify-content:center;gap:var(--space-sm);margin-top:var(--space-lg)}
.confirm-modal-actions .btn{min-width:160px}

/* ---- The Pianonator ---- */
.app-header-text{flex:1;min-width:0}
label.selectable-btn{position:relative}
.selectable-btn:focus-within{outline:2px solid var(--primary-color);outline-offset:2px}
.wide-slider{width:100%;height:var(--control-height);accent-color:var(--primary-color);cursor:pointer}
.slider-ends{display:flex;justify-content:space-between;font-size:var(--font-size-helper);color:var(--text-muted)}
.preview-canvas{display:block;width:100%;height:150px;border-radius:var(--radius-input)}
.note-counts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);margin:var(--space-sm) 0 var(--space-lg);color:var(--text-light)}
.hand-chip{
  display:inline-flex;align-items:center;gap:var(--space-xs);padding:4px 12px;border-radius:var(--radius-pill);
  font-size:var(--font-size-helper);color:var(--text-dark);border-left:6px solid transparent;background:var(--input-bg);
}
.hand-chip.is-right{border-left-color:#35c2d3}
.hand-chip.is-left{border-left-color:#f2a541}
.settings-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}
.library-list{list-style:none;margin:0;padding:0;border:1px solid var(--border-soft);border-radius:var(--radius-input);max-height:280px;overflow-y:auto}
.library-item{display:flex;align-items:center;gap:var(--space-sm);padding:0 var(--space-sm);border-bottom:1px solid var(--border-soft)}
.library-item:last-child{border-bottom:none}
.library-open{
  flex:1;min-width:0;min-height:var(--control-height);padding:var(--space-sm);background:none;border:none;text-align:left;
  font-size:var(--font-size-body);font-weight:600;color:var(--text-dark);cursor:pointer;overflow-wrap:anywhere;
}
.library-open:hover{color:var(--primary-color)}
.library-best{font-size:var(--font-size-helper);color:var(--text-muted);white-space:nowrap}
.library-item .remove-btn{width:var(--control-height);height:var(--control-height)}
.install-hint{margin:var(--space-md) 0 0;font-size:var(--font-size-helper);color:var(--text-muted)}
.legal-links{display:flex;justify-content:center;gap:var(--space-md);margin-top:var(--space-lg);font-size:var(--font-size-helper)}
.legal-links a,.legal-page a{color:var(--primary-color)}
.legal-page h2{font-size:var(--font-size-card-title);margin:var(--space-lg) 0 var(--space-xs)}
.legal-page p{line-height:1.6;color:var(--text-light)}
.parts-table td,.parts-table th{white-space:normal}
.parts-table .col-keep,.parts-table .col-listen{width:1%}
.parts-table .toggle-btn{min-height:36px}
.parts-table input[type="checkbox"]{width:24px;height:24px}

/* Step 4 fills the screen */
body.in-player{overflow:hidden;background:#12181f;overscroll-behavior:none}
.player-screen{
  position:fixed;inset:0;display:flex;flex-direction:column;background:#12181f;color:#e7ecf0;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.player-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs) var(--space-sm);padding:var(--space-xs) var(--space-sm);background:#1b232c}
.player-bar .icon-btn{background:#2c3743}
.player-bar .icon-btn:hover:not([disabled]){background:#3a4755}
.player-bar .icon-btn svg{fill:#e7ecf0}
.player-bar .icon-btn.is-primary{background:var(--primary-color)}
.player-bar .icon-btn.is-primary:hover:not([disabled]){background:var(--primary-hover)}
.bar-field{display:flex;flex-direction:column;gap:2px;font-size:0.75rem;color:#aab6c2}
.bar-field select{min-height:36px;padding:2px 8px;width:auto;background:#2c3743;color:#e7ecf0;border-color:#46535f;font-size:0.9rem}
.bar-speed{min-width:130px;flex:0 1 180px}
.bar-speed strong{color:#fff}
.bar-speed input{width:100%;height:36px;accent-color:#35c2d3;cursor:pointer}
.player-bar .toggle-btn,.loop-bar select{background:#2c3743;color:#e7ecf0;border-color:#46535f}
.player-bar .toggle-btn{min-height:var(--control-height);padding:4px 14px}
.player-bar .toggle-btn.active{background:var(--primary-color);border-color:#35c2d3;color:#fff}
.hud{display:flex;align-items:center;gap:var(--space-sm);margin-left:auto;min-height:var(--control-height);font-size:0.9rem}
.hud-input{color:#aab6c2;font-size:0.8rem;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud-score{font-size:1.4rem;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;min-width:58px;text-align:right}
.hud-verdict{min-width:84px;font-weight:700}
.hud-verdict[data-verdict="perfect"]{color:#34c759}
.hud-verdict[data-verdict="early"],.hud-verdict[data-verdict="late"]{color:#f5c542}
.hud-verdict[data-verdict="wrong"],.hud-verdict[data-verdict="missed"]{color:#ff7a70}
.loop-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-md);background:#17202a;font-size:0.9rem}
.loop-bar select{width:auto;min-height:36px;padding:2px 8px;margin-left:4px}
.loop-note{color:#aab6c2}
.seek-row{display:flex;align-items:center;gap:var(--space-sm);padding:2px var(--space-md);background:#17202a}
.seek-row .player-time{color:#aab6c2;min-width:44px}
.player-seek{flex:1;min-width:0;height:28px;accent-color:#35c2d3;cursor:pointer}
.stage{position:relative;flex:1;min-height:0}
#stage-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none}
.stage-tip{
  position:absolute;left:50%;top:var(--space-lg);transform:translateX(-50%);margin:0;padding:var(--space-sm) var(--space-md);
  max-width:90%;width:max-content;background:rgba(18,24,31,.85);border:1px solid #3a4755;border-radius:var(--radius-input);
  font-size:0.95rem;text-align:center;pointer-events:none;
}

/* Settings and results */
.settings-content{width:min(560px,100%)}
.settings-content .form-group{margin-top:var(--space-md)}
.check-row{display:flex;align-items:center;gap:var(--space-sm);min-height:var(--control-height);color:var(--text-light);cursor:pointer}
.check-row input{width:24px;height:24px;accent-color:var(--primary-color);flex:none}
.results-percent{margin:0;text-align:center;font-size:4rem;font-weight:800;line-height:1.1;color:var(--primary-color)}
.results-sign{font-size:2rem;margin-left:2px}
.results-best{margin:var(--space-xs) 0 var(--space-md);text-align:center;font-size:var(--font-size-helper);color:var(--text-muted)}
.results-chips,.results-hands{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-xs);margin-bottom:var(--space-sm)}
.result-chip{padding:4px 12px;border-radius:var(--radius-pill);font-size:var(--font-size-helper);background:var(--input-bg);color:var(--text-dark)}
.result-chip.is-good strong{color:var(--success-hover)}
.result-chip.is-off strong{color:#b7860b}
.result-chip.is-bad strong{color:var(--danger-hover)}
.results-tips{list-style:none;margin:var(--space-md) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-sm)}
.results-tips li{padding:var(--space-sm) var(--space-md);background:var(--gradient-start);border-radius:var(--radius-input);line-height:1.45;color:var(--text-dark)}
.results-tips .link-btn{display:block;margin-top:2px;padding:6px 0;min-height:32px}

@media (max-width:600px){
  .settings-row{grid-template-columns:1fr}
  .hud-input{display:none}
}

@media (max-width:768px){
  .app-container{padding:var(--space-md)}
  .output-group .selectable-btn{flex-basis:100%}
  .step-title{font-size:var(--font-size-section)}
}