/*
 * School design layer
 * Loaded after the learning plugin styles to keep every learning screen,
 * game and language page inside one visual system.
 */

.qstudy-app,
.qstudy-login,
.qworld-app,
.qlang-app{
  --qs-primary:var(--accent-color);
  --qs-secondary:var(--school-blue);
  --qs-gold:var(--gold-color);
  --qs-bg:var(--card-bg);
  --qs-text:var(--text-color);
  --qs-muted:var(--text-muted);
  --qs-border:var(--border-color);
  --qs-danger:var(--danger-color);
  --qs-success:var(--success-color);
}

.qstudy-app,
.qstudy-login{
  width:min(1180px,calc(100% - 32px));
  max-width:none;
  margin:32px auto 82px;
  padding:0;
}

/* Chalkboard welcome */
.qstudy-hero{
  isolation:isolate;
  min-height:210px;
  padding:36px 40px;
  border:7px solid #b88a52;
  border-radius:9px;
  background:
    radial-gradient(circle at 16% 18%,rgba(255,255,255,.06),transparent 24%),
    radial-gradient(circle at 80% 88%,rgba(255,255,255,.045),transparent 28%),
    linear-gradient(125deg,#1c5c4c,#17483e 62%,#123d34);
  color:#fffdf1;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.12),
    inset 0 -14px 35px rgba(0,0,0,.12),
    0 8px 0 #8e653c,
    0 22px 48px rgba(42,56,49,.15);
}
.qstudy-hero:before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:15px;
  border:1px dashed rgba(255,255,255,.18);
  pointer-events:none;
}
.qstudy-hero:after{
  content:"× ÷ + =";
  z-index:-1;
  inset:auto auto 2px 20px;
  width:auto;
  height:auto;
  border-radius:0;
  background:none;
  color:rgba(255,255,255,.09);
  font-family:Georgia,serif;
  font-size:56px;
  font-weight:900;
  letter-spacing:8px;
  transform:rotate(-4deg);
}
.qstudy-hero h1,
.qstudy-hero h2{
  max-width:720px;
  margin:7px 0 10px;
  color:#fffdf1;
  text-shadow:0 2px 0 rgba(0,0,0,.18);
}
.qstudy-hero h1{font-size:clamp(30px,4vw,50px)}
.qstudy-hero p{
  max-width:650px;
  color:rgba(255,253,241,.78);
}
.qstudy-hero .qstudy-kicker{
  position:relative;
  padding-inline-start:23px;
  color:#f6d97f;
}
.qstudy-hero .qstudy-kicker:before{
  content:"";
  position:absolute;
  top:50%;
  inset-inline-start:0;
  width:15px;
  height:3px;
  border-radius:99px;
  background:#f6d97f;
  transform:translateY(-50%) rotate(-5deg);
}
.qstudy-hero>.qstudy-btn-primary,
.qstudy-hero .qstudy-btn-primary{
  border-color:#f1c756;
  background:#f1c756;
  color:#173b34;
  box-shadow:0 7px 0 #bd8f28,0 14px 28px rgba(0,0,0,.16);
}
.qstudy-hero>.qstudy-btn-primary:hover,
.qstudy-hero .qstudy-btn-primary:hover{
  border-color:#ffe08a;
  background:#ffe08a;
  transform:translateY(-2px);
}

/* Subject tabs */
.qstudy-tabs{
  display:grid;
  grid-template-columns:repeat(6,minmax(105px,1fr));
  width:100%;
  margin:29px 0 25px;
  padding:7px 7px 0;
  overflow:visible;
  border:1px solid var(--qs-border);
  border-radius:17px;
  background:var(--qs-bg);
  box-shadow:0 11px 28px rgba(45,60,64,.07);
}
.qstudy-tabs button,
.qstudy-tabs>a{
  position:relative;
  display:grid;
  place-items:center;
  min-height:48px;
  padding:10px 16px 13px;
  border:0;
  border-radius:11px 11px 0 0;
  background:none;
  color:var(--qs-muted);
  font:inherit;
  font-weight:750;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
}
.qstudy-tabs button:after,
.qstudy-tabs>a:after{
  content:"";
  position:absolute;
  right:12px;
  bottom:0;
  left:12px;
  height:4px;
  border-radius:6px 6px 0 0;
  background:var(--school-blue);
  opacity:.26;
}
.qstudy-tabs button:nth-child(2):after{background:var(--school-yellow)}
.qstudy-tabs button:nth-child(3):after{background:var(--school-red)}
.qstudy-tabs button:nth-child(4):after{background:var(--accent-color)}
.qstudy-tabs>a:nth-child(5):after{background:#6f73b8}
.qstudy-tabs>a:nth-child(6):after{background:#b76888}
.qstudy-tabs button.is-active{
  background:var(--accent-soft);
  color:var(--accent-color);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-color) 14%,transparent);
}
.qstudy-tabs button.is-active:after{height:5px;opacity:1}
.qstudy-tabs>a:hover{background:color-mix(in srgb,var(--school-blue) 8%,var(--qs-bg));color:var(--school-blue)}

/* Typography and section labels */
.qstudy-section-head{margin:34px 0 18px}
.qstudy-section-head h2,
.qstudy-path-title h2{
  position:relative;
  color:var(--qs-text);
  font-weight:950;
}
.qstudy-section-head h2{
  padding-inline-start:18px;
  font-size:25px;
}
.qstudy-section-head h2:before{
  content:"";
  position:absolute;
  top:.25em;
  bottom:.25em;
  inset-inline-start:0;
  width:6px;
  border-radius:99px;
  background:linear-gradient(var(--school-red) 0 34%,var(--school-yellow) 34% 67%,var(--accent-color) 67%);
}
.qstudy-section-head p{font-size:12px}
.qstudy-kicker{
  color:var(--accent-color);
  font-weight:900;
  letter-spacing:0;
}

/* Paper cards */
.qstudy-grid{gap:20px}
.qstudy-card,
.qstudy-panel,
.qstudy-map,
.qstudy-plan,
.qstudy-progress-list article,
.qstudy-activity,
.qstudy-game-feature,
.qstudy-game-picker,
.qstudy-join-card,
.qstudy-session-source,
.qstudy-source-modal>div{
  border-color:var(--qs-border);
  background-color:var(--qs-bg);
  box-shadow:var(--paper-shadow);
}
.qstudy-card{
  position:relative;
  overflow:hidden;
  min-height:235px;
  padding:25px 24px 22px;
  border-radius:8px 18px 18px 8px;
  background-image:
    linear-gradient(90deg,color-mix(in srgb,var(--school-red) 13%,transparent) 1px,transparent 1px),
    repeating-linear-gradient(0deg,transparent 0,transparent 30px,color-mix(in srgb,var(--school-blue) 7%,transparent) 30px,color-mix(in srgb,var(--school-blue) 7%,transparent) 31px);
  background-position:34px 0,0 0;
}
.qstudy-card:before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:6px;
  background:var(--card-accent,var(--school-blue));
}
.qstudy-card:after{
  content:"";
  position:absolute;
  top:28px;
  bottom:20px;
  inset-inline-start:8px;
  width:7px;
  background:radial-gradient(circle,var(--surface) 0 3px,transparent 3.5px) 0 0/7px 25px;
  opacity:.9;
}
.qstudy-card:nth-child(4n+2){--card-accent:var(--school-red)}
.qstudy-card:nth-child(4n+3){--card-accent:var(--school-yellow)}
.qstudy-card:nth-child(4n+4){--card-accent:var(--accent-color)}
.qstudy-card h3{color:var(--qs-text);font-weight:950}
.qstudy-card>p{min-height:52px}
.qstudy-card-top{align-items:flex-start}
.qstudy-badge{
  border:1px solid color-mix(in srgb,currentColor 18%,transparent);
  background:color-mix(in srgb,var(--qs-muted) 8%,var(--qs-bg));
}
.qstudy-badge.is-active{background:color-mix(in srgb,var(--qs-success) 11%,var(--qs-bg))}
.qstudy-panel,
.qstudy-map,
.qstudy-plan,
.qstudy-activity{
  border-radius:18px;
  background-image:linear-gradient(180deg,color-mix(in srgb,var(--school-blue) 3%,transparent),transparent 100px);
}
.qstudy-panel{border-top:5px solid var(--school-blue)}
.qstudy-map{border-top:5px solid var(--accent-color)}
.qstudy-plan{border-top:5px solid var(--school-yellow)}

/* Controls */
.qstudy-btn{
  border-radius:10px;
  font-weight:850;
  box-shadow:0 3px 0 color-mix(in srgb,var(--qs-border) 85%,transparent);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;
}
.qstudy-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 5px 0 color-mix(in srgb,var(--qs-border) 85%,transparent);
}
.qstudy-btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--qs-border)}
.qstudy-btn-primary{
  border-color:var(--qs-primary);
  background:var(--qs-primary);
  box-shadow:0 4px 0 color-mix(in srgb,var(--qs-primary) 68%,#000);
}
.qstudy-btn-primary:hover{box-shadow:0 6px 0 color-mix(in srgb,var(--qs-primary) 68%,#000)}
.qstudy-btn-soft{
  border-color:color-mix(in srgb,var(--qs-primary) 18%,var(--qs-border));
  background:var(--accent-soft);
}
.qstudy-form input,
.qstudy-form select,
.qstudy-form textarea,
.qstudy-match select,
.qstudy-spy-describe-form textarea,
.qstudy-spy-private input{
  min-height:46px;
  border-radius:9px;
  background-color:var(--qs-bg);
  box-shadow:inset 0 1px 2px rgba(35,54,58,.06);
}
.qstudy-form textarea{min-height:120px}
.qstudy-form label,
.qstudy-form fieldset{color:var(--qs-text)}
.qstudy-form fieldset{
  padding:18px;
  border:1px dashed color-mix(in srgb,var(--school-blue) 36%,var(--qs-border));
  border-radius:14px;
  background:color-mix(in srgb,var(--school-blue) 3%,var(--qs-bg));
}
.qstudy-form fieldset legend{padding:0 8px;color:var(--school-blue);font-weight:900}
.qstudy-days span{border-radius:8px}
.qstudy-drop{
  border-color:color-mix(in srgb,var(--school-blue) 45%,var(--qs-border));
  border-radius:12px;
  background:
    repeating-linear-gradient(-45deg,transparent 0 12px,color-mix(in srgb,var(--school-blue) 3%,transparent) 12px 24px),
    var(--qs-bg);
}

/* Learning path and daily dose */
.qstudy-path-head{padding-top:8px}
.qstudy-path-title{
  padding:24px;
  border:1px solid var(--qs-border);
  border-radius:18px;
  background:var(--qs-bg);
  box-shadow:var(--paper-shadow);
}
.qstudy-path-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.qstudy-stats{
  overflow:hidden;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(42,59,62,.06);
}
.qstudy-stats div{
  position:relative;
  background:var(--qs-bg);
}
.qstudy-stats div:after{
  content:"";
  position:absolute;
  right:24%;
  bottom:0;
  left:24%;
  height:3px;
  border-radius:99px 99px 0 0;
  background:var(--school-blue);
}
.qstudy-stats div:nth-child(2):after{background:var(--school-red)}
.qstudy-stats div:nth-child(3):after{background:var(--school-yellow)}
.qstudy-stats div:nth-child(4):after{background:var(--accent-color)}
.qstudy-stats strong{color:var(--accent-color)}
.qstudy-concepts article{
  border-radius:11px;
  background:color-mix(in srgb,var(--school-blue) 2%,var(--qs-bg));
}
.qstudy-concepts article>span{
  border-radius:8px;
  background:var(--accent-soft);
}
.qstudy-calendar div{border-radius:9px;background:var(--qs-bg)}
.qstudy-session header{
  padding:10px 13px;
  border:1px solid var(--qs-border);
  border-radius:12px;
  background:var(--qs-bg);
}
.qstudy-activity{
  border-top:6px solid var(--accent-color);
  box-shadow:0 18px 45px rgba(44,60,64,.11);
}
.qstudy-options span,
.qstudy-sort li{
  border-radius:10px;
  background:color-mix(in srgb,var(--school-blue) 2%,var(--qs-bg));
}
.qstudy-options span:hover{border-color:var(--school-blue)}
.qstudy-options input:checked+span{
  border-color:var(--accent-color);
  background:var(--accent-soft);
}
.qstudy-empty,
.qstudy-processing-screen,
.qstudy-finish,
.qstudy-login{
  border:1px dashed color-mix(in srgb,var(--accent-color) 48%,var(--qs-border));
  border-radius:18px;
  background:
    repeating-linear-gradient(0deg,transparent 0,transparent 31px,color-mix(in srgb,var(--school-blue) 6%,transparent) 31px,color-mix(in srgb,var(--school-blue) 6%,transparent) 32px),
    var(--qs-bg);
  box-shadow:var(--paper-shadow);
}

/* Games become a shelf of colourful workbooks */
.qstudy-game-feature{
  position:relative;
  overflow:hidden;
  border-radius:12px 22px 22px 12px;
  border-inline-start:9px solid var(--game-spine,var(--school-blue));
  background-image:linear-gradient(125deg,color-mix(in srgb,var(--game-spine,var(--school-blue)) 7%,var(--qs-bg)),var(--qs-bg) 58%);
}
.qstudy-game-feature:after{
  content:"";
  position:absolute;
  inset-inline-start:9px;
  top:16px;
  bottom:16px;
  width:3px;
  border-radius:99px;
  background:rgba(255,255,255,.45);
  pointer-events:none;
}
.qstudy-game-feature:nth-of-type(3n+2){--game-spine:var(--school-red)}
.qstudy-game-feature:nth-of-type(3n+3){--game-spine:var(--school-yellow)}
.qstudy-game-feature.is-spy{--game-spine:#269b90}
.qstudy-game-feature.is-match{--game-spine:#3d87bd}
.qstudy-game-feature.is-secret{--game-spine:#c47a31}
.qstudy-game-feature h2,
.qstudy-game-feature h3{font-weight:950}
.qstudy-game-title>span,
.qstudy-game-card>span{
  border:1px solid color-mix(in srgb,currentColor 15%,transparent);
  border-radius:10px;
}
.qstudy-game-grid{gap:17px}
.qstudy-game-card{
  border-radius:12px;
  box-shadow:0 10px 24px rgba(42,58,63,.07);
}
.qstudy-join-card{
  border-style:dashed;
  border-radius:15px;
  background-image:repeating-linear-gradient(-45deg,transparent 0 12px,color-mix(in srgb,var(--school-blue) 3%,transparent) 12px 24px);
}

/* World and languages */
.qworld-app,
.qlang-app{color:var(--qs-text)}
.qworld-hero,
.qlang-shell-hero{
  border-color:#b88a52;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.06),transparent 26%),
    linear-gradient(125deg,#225f50,#153f36);
}
.qworld-main-tabs,
.qlang-main-tabs{grid-template-columns:repeat(4,minmax(120px,1fr))}
.qworld-card,
.qworld-panel,
.qlang-language-card,
.qlang-course-title,
.qlang-level-card,
.qlang-daily-card,
.qlang-skills-strip,
.qlang-lessons,
.qlang-vocabulary,
.qlang-quiz-card,
.qlang-complete{
  border-color:var(--qs-border);
  background-color:var(--qs-bg);
  box-shadow:var(--paper-shadow);
}
.qlang-language-card,
.qworld-card{
  border-radius:10px 18px 18px 10px;
  border-inline-start:6px solid var(--school-blue);
}
.qlang-language-card:nth-child(2n){border-inline-start-color:var(--school-red)}
.qlang-language-card:nth-child(3n){border-inline-start-color:var(--school-yellow)}
.qlang-daily-card{
  border-top:5px solid var(--school-blue);
  background-image:linear-gradient(135deg,color-mix(in srgb,var(--school-blue) 7%,var(--qs-bg)),var(--qs-bg));
}
.qlang-lesson-card,
.qlang-word-grid article,
.qlang-quiz-options button{
  border-radius:10px;
  background-color:color-mix(in srgb,var(--school-blue) 2%,var(--qs-bg));
}

/* Dialogs and notices */
.qstudy-modal>div,
.qstudy-source-modal>div{
  border:1px solid var(--qs-border);
  border-top:6px solid var(--accent-color);
  border-radius:18px;
}
.qstudy-notice{
  border:1px solid rgba(255,255,255,.22);
  border-radius:10px;
  background:var(--accent-strong);
  box-shadow:0 14px 34px rgba(20,45,40,.25);
}

html[data-theme="dark"] .qstudy-hero,
html[data-theme="dark"] .qworld-hero,
html[data-theme="dark"] .qlang-shell-hero{
  border-color:#8d6842;
  background:
    radial-gradient(circle at 16% 18%,rgba(255,255,255,.055),transparent 24%),
    linear-gradient(125deg,#245b4e,#123c34);
}
html[data-theme="dark"] .qstudy-app,
html[data-theme="dark"] .qstudy-login,
html[data-theme="dark"] .qworld-app,
html[data-theme="dark"] .qlang-app{
  --qs-bg:var(--card-bg);
  --qs-text:var(--text-color);
  --qs-muted:var(--text-muted);
  --qs-border:var(--border-color);
}
html[data-theme="dark"] .qstudy-card:after{
  background:radial-gradient(circle,var(--surface) 0 3px,transparent 3.5px) 0 0/7px 25px;
}
html[data-theme="dark"] .qstudy-game-feature:after{background:rgba(255,255,255,.12)}

@media(max-width:900px){
  .qstudy-app,
  .qstudy-login{width:min(100% - 24px,1180px);margin-top:24px}
  .qstudy-hero{min-height:190px;padding:30px 27px}
  .qstudy-tabs,
  .qworld-main-tabs,
  .qlang-main-tabs{grid-template-columns:repeat(6,minmax(105px,1fr));overflow:auto}
  .qstudy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qstudy-path-title{align-items:flex-start;flex-direction:column}
  .qstudy-path-actions{justify-content:flex-start}
}

@media(max-width:640px){
  .qstudy-app,
  .qstudy-login{width:calc(100% - 20px);margin:18px auto 72px}
  .qstudy-hero{
    align-items:stretch;
    flex-direction:column;
    gap:20px;
    min-height:0;
    padding:25px 19px;
    border-width:5px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 6px 0 #8e653c,0 18px 35px rgba(42,56,49,.14);
  }
  .qstudy-hero:before{inset:10px}
  .qstudy-hero:after{font-size:38px}
  .qstudy-hero h1{font-size:29px}
  .qstudy-hero p{font-size:13px}
  .qstudy-hero>.qstudy-btn{width:100%}
  .qstudy-tabs,
  .qworld-main-tabs,
  .qlang-main-tabs{
    display:flex;
    gap:4px;
    margin:22px 0 18px;
    padding:5px 5px 0;
    overflow:auto;
  }
  .qstudy-tabs button,
  .qstudy-tabs>a{min-width:max-content;min-height:44px;padding-inline:14px}
  .qstudy-grid{grid-template-columns:1fr;gap:14px}
  .qstudy-card{min-height:0;padding:23px 21px 20px}
  .qstudy-card>p{min-height:0}
  .qstudy-section-head{align-items:flex-start;margin:27px 0 14px}
  .qstudy-section-head h2{font-size:21px}
  .qstudy-panel{padding:22px 16px}
  .qstudy-form-row{grid-template-columns:1fr}
  .qstudy-form fieldset{padding:14px 10px}
  .qstudy-path-title{padding:18px 15px}
  .qstudy-path-title h2{font-size:27px}
  .qstudy-path-actions{display:grid;width:100%}
  .qstudy-path-actions .qstudy-btn{width:100%}
  .qstudy-stats{grid-template-columns:repeat(2,1fr)}
  .qstudy-stats div:nth-child(3){border-inline-start:0;border-top:1px solid var(--qs-border)}
  .qstudy-stats div:nth-child(4){border-top:1px solid var(--qs-border)}
  .qstudy-concepts article{grid-template-columns:38px minmax(0,1fr)}
  .qstudy-concepts article>small{grid-column:2}
  .qstudy-activity{padding:25px 15px}
  .qstudy-game-feature{border-inline-start-width:6px;border-radius:10px 17px 17px 10px}
}