/* Support page for teachers and School Administrators (public/support-center.js).
 * A help workspace that fits the screen: topics, the guide list and the open
 * guide sit side by side and scroll on their own, and the contact form opens
 * in a dialog. It uses the app's card, tint and radius language, but stays
 * flat: no gradients, shadows or glows, in any state, and no glyph icons.
 * test/support-center-style.test.js keeps it that way. */

/* The admin workspace paints a soft wash behind its tabs. The Support tab sits
   on plain paper instead; the other tabs keep the wash. */
#schoolAdminScreen.support-mode,
:root[data-theme="dark"] #schoolAdminScreen.support-mode{background:var(--paper);}

/* The page wrapper caps content at 1180px; the workspace uses the full width. */
.page[data-page="support"] > .section > .wrap,
#schoolAdminScreen.support-mode .section > .wrap{max-width:1760px; padding-inline:clamp(16px,2.4vw,40px);}
/* The workspace fills the screen, so the page around it gets tighter padding. */
.page[data-page="support"] > .section{padding-top:24px; padding-bottom:24px;}
#schoolAdminScreen.support-mode .section{padding-top:24px; padding-bottom:24px;}

.sc{
  --sc-accent:var(--green-deep);
  --sc-off:258px;
  --sc-h:clamp(440px, calc(100vh - var(--sc-off)), 900px);
  max-width:none; margin:0 auto; padding:0;
  color:var(--ink); font-family:var(--font-sans);
}
#schoolAdminScreen .sc{--sc-off:198px;}
.sc--embedded{--sc-h:auto; max-width:none; margin:0; padding:0;}
.sc *{box-sizing:border-box;}
:where(.sc) :is(h2,h3,h4,p,ul,ol,dl,dd){margin:0;}
:where(.sc) :is(ul,ol){padding:0; list-style:none;}
:where(.sc) button{font-family:inherit;}
.sc .sc-ico{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.sc button:focus-visible,.sc a:focus-visible,.sc .sc-input:focus-visible{outline:2px solid var(--sc-accent); outline-offset:2px;}
.sc mark{background:transparent; color:var(--sc-accent); font-weight:700;}

/* ---- shared bits ---- */
.sc-eyebrow{margin-bottom:14px; font:700 .8rem/1.3 var(--font-sans); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft);}
.sc-link{display:inline-flex; align-items:center; gap:6px; padding:0; border:0; background:none; color:var(--sc-accent); font:600 1rem/1.5 var(--font-sans); cursor:pointer;}
.sc-link:hover{text-decoration:underline; text-underline-offset:3px;}
.sc-btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:0 22px; border:1.5px solid transparent; border-radius:12px; font:600 .98rem/1 var(--font-sans); white-space:nowrap; cursor:pointer; transition:background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);}
.sc-btn--primary{background:var(--sc-accent); color:var(--paper);}
.sc-btn--primary:hover{background:var(--ink);}
.sc-btn--quiet{background:var(--paper-raised); border-color:var(--line); color:var(--ink);}
.sc-btn--quiet:hover{border-color:var(--ink-soft);}
.sc-btn:disabled{opacity:.5; cursor:not-allowed;}
.sc-tile{display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:11px;}
.sc-tile .sc-ico{width:20px; height:20px;}
.sc-tint-green{background:var(--green-pale); color:var(--green-deep);}
.sc-tint-violet{background:var(--violet-pale); color:var(--violet-deep);}
.sc-tint-gold{background:var(--gold-pale); color:color-mix(in srgb,var(--gold) 62%,var(--ink));}
.sc-tint-coral{background:var(--coral-pale); color:var(--coral-deep);}

/* ---- top bar ---- */
.sc-bar{display:flex; align-items:center; gap:20px; margin-bottom:16px;}
.sc-bar-title h2{font:700 1.7rem/1.2 var(--font-display); letter-spacing:-.015em;}
.sc-bar-title p{margin-top:3px; color:var(--ink-soft); font-size:.95rem;}
.sc-search{display:flex; align-items:center; gap:10px; flex:1 1 360px; max-width:560px; min-height:52px; margin-left:12px; padding:0 14px; border:1.5px solid var(--line); border-radius:12px; background:var(--paper-raised); color:var(--ink-soft); transition:border-color var(--dur-fast);}
.sc-search:hover{border-color:var(--ink-soft);}
.sc-search:focus-within{border-color:var(--sc-accent); outline:2px solid var(--sc-accent); outline-offset:2px;}
.sc .sc-search .sc-search-input{flex:1; min-width:0; min-height:50px; padding:0; border:0; border-radius:0; outline:0; background:transparent; color:var(--ink); font:500 1.02rem/1.4 var(--font-sans);}
.sc .sc-search .sc-search-input::placeholder{color:var(--ink-faint);}
.sc-kbd{padding:1px 8px; border:1px solid var(--line); border-radius:6px; color:var(--ink-soft); font:600 .85rem/1.6 var(--font-sans);}
.sc-bar-actions{display:flex; align-items:center; gap:12px; margin-left:auto;}
.sc-tour{margin-right:6px;}

/* ---- the workspace ---- */
.sc-shell{display:grid; grid-template-columns:clamp(250px,20vw,310px) clamp(340px,29vw,440px) minmax(0,1fr); height:var(--sc-h); overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--paper-raised);}
.sc-rail,.sc-listpane,.sc-reader{min-width:0; min-height:0; overflow-y:auto; overscroll-behavior:contain;}
.sc-rail{padding:16px 14px; border-right:1px solid var(--line); background:var(--paper);}
.sc-listpane{padding:24px 16px 28px; border-right:1px solid var(--line);}
.sc-reader{padding:clamp(32px,4vw,56px) clamp(28px,4.5vw,72px) 64px;}

/* topics */
.sc-rail ul{display:grid; gap:2px;}
.sc-topic{display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:14px; width:100%; min-height:58px; padding:8px 12px; border:0; border-radius:12px; background:none; color:var(--ink-soft); text-align:left; cursor:pointer; transition:background-color var(--dur-fast),color var(--dur-fast);}
.sc-topic:hover{background:var(--paper-dim); color:var(--ink);}
.sc-topic.is-active{background:var(--paper-raised); color:var(--ink); border:1px solid var(--line); padding:7px 11px;}
.sc-topic-name{font:600 1.02rem/1.3 var(--font-sans);}
.sc-topic-n{color:var(--ink-faint); font:600 .9rem/1 var(--font-sans); font-variant-numeric:tabular-nums;}

/* guide list */
.sc-pane-head{padding:0 10px 18px;}
.sc-pane-head h3{font:700 1.3rem/1.3 var(--font-display); letter-spacing:-.01em;}
.sc-pane-head p{margin-top:4px; color:var(--ink-soft); font-size:.98rem; line-height:1.45;}
.sc-group + .sc-group{margin-top:26px;}
.sc-group h4{padding:0 10px 8px; color:var(--ink-soft); font:700 .78rem/1.3 var(--font-sans); letter-spacing:.09em; text-transform:uppercase;}
.sc-rows{display:grid; gap:4px;}
.sc-row{display:grid; gap:5px; width:100%; min-height:48px; padding:14px 14px; border:0; border-radius:12px; background:none; color:var(--ink); text-align:left; cursor:pointer; transition:background-color var(--dur-fast);}
.sc-row:hover{background:var(--paper-dim);}
.sc-row.is-current{background:var(--green-pale);}
.sc-row-title{font:600 1.08rem/1.35 var(--font-sans);}
.sc-row-sum{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--ink-soft); font-size:.98rem; line-height:1.5;}
.sc-row.is-current .sc-row-sum{color:var(--ink);}
.sc-empty{padding:4px 10px;}
.sc-empty p{margin-bottom:18px; color:var(--ink-soft); font-size:1.05rem; line-height:1.6;}

/* reader: overview */
.sc-home,.sc-guide{max-width:880px;}
.sc-home{display:grid; gap:48px;}
.sc-tasks{display:grid; gap:12px;}
.sc-task{display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:16px; width:100%; min-height:74px; padding:14px 20px; border:1px solid var(--line); border-radius:16px; background:var(--paper-raised); color:var(--ink); text-align:left; cursor:pointer; transition:border-color var(--dur-fast);}
.sc-task:hover{border-color:var(--sc-accent);}
.sc-task-num{display:grid; place-items:center; width:40px; height:40px; border-radius:11px; background:var(--green-pale); color:var(--green-deep); font:700 1.1rem/1 var(--font-display);}
.sc-task-label{font:600 1.15rem/1.35 var(--font-sans);}
.sc-task .sc-ico{color:var(--ink-faint);}
.sc-task:hover .sc-ico{color:var(--sc-accent);}
.sc-faq{display:grid;}
.sc-faq > div{padding:20px 0; border-top:1px solid var(--line-soft);}
.sc-faq > div:first-child{border-top:0; padding-top:0;}
.sc-faq dt{margin-bottom:6px; font:600 1.1rem/1.4 var(--font-sans);}
.sc-faq dd{color:var(--ink-soft); font-size:1.05rem; line-height:1.65;}
.sc-faq .sc-link{display:flex; margin-top:8px; font-size:1rem;}
.sc-person{display:flex; align-items:center; gap:20px; padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--paper);}
.sc-person > div{flex:1; min-width:0;}
.sc-person h3{font:700 1.15rem/1.3 var(--font-sans);}
.sc-person p{margin-top:4px; color:var(--ink-soft); font-size:1rem; line-height:1.55;}

/* reader: a guide */
.sc-back{margin-bottom:24px; min-height:40px;}
.sc-guide-topic{display:flex; align-items:center; gap:12px; margin-bottom:18px; color:var(--ink-soft); font:600 1rem/1.3 var(--font-sans);}
.sc-guide-title{margin-bottom:14px; font:700 clamp(1.9rem,3vw,2.5rem)/1.2 var(--font-display); letter-spacing:-.02em; outline:none;}
.sc-guide-lead{margin-bottom:36px; color:var(--ink-soft); font-size:1.25rem; line-height:1.6;}
.sc-steps{counter-reset:sc-step; display:grid; gap:8px;}
.sc-steps li{counter-increment:sc-step; display:grid; grid-template-columns:40px minmax(0,1fr); gap:20px; align-items:start; padding:14px 0;}
.sc-steps li::before{content:counter(sc-step); display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--green-pale); color:var(--green-deep); font:700 1rem/1 var(--font-sans); font-variant-numeric:tabular-nums;}
.sc-step-text{padding-top:6px; font-size:1.2rem; line-height:1.65;}
.sc-note{margin-top:32px; padding:22px 26px; border-radius:16px; background:var(--green-pale); color:var(--ink);}
.sc-note strong{display:block; margin-bottom:8px; color:var(--green-deep); font:700 .85rem/1.3 var(--font-sans); letter-spacing:.06em; text-transform:uppercase;}
.sc-note p{font-size:1.12rem; line-height:1.65;}
.sc-action{margin-top:32px;}
.sc-related{margin-top:44px;}
.sc-related li + li{margin-top:10px;}
.sc-stuck{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:52px; padding-top:28px; border-top:1px solid var(--line);}
.sc-stuck > span{margin-right:8px; color:var(--ink-soft); font-size:1.05rem; font-weight:600;}

/* ---- contact dialog ---- */
.sc-modal{position:fixed; inset:0; z-index:400; display:flex; align-items:flex-start; justify-content:center; padding:48px 16px; overflow-y:auto; background:rgba(20,21,42,.55);}
.sc-modal[hidden]{display:none;}
.sc-dialog{position:relative; width:100%; max-width:680px; padding:36px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--paper-raised);}
.sc-dialog h3{margin-bottom:8px; padding-right:40px; font:700 1.5rem/1.25 var(--font-display); letter-spacing:-.01em;}
.sc-dialog-sub{margin-bottom:26px; color:var(--ink-soft); font-size:1rem; line-height:1.6;}
.sc-dialog-close{position:absolute; top:16px; right:16px; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:10px; background:none; color:var(--ink-soft); cursor:pointer;}
.sc-dialog-close:hover{background:var(--paper-dim); color:var(--ink);}

/* ---- contact form ---- */
.sc-form-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;}
.sc-wide{grid-column:1 / -1;}
.sc-field label{display:block; margin-bottom:8px; color:var(--ink); font:600 .98rem/1.4 var(--font-sans);}
.sc .sc-form .sc-input{display:block; width:100%; min-height:50px; margin:0; padding:12px 16px; border:1.5px solid var(--line); border-radius:11px; background:var(--paper-raised); color:var(--ink); font:500 1.02rem/1.4 var(--font-sans); letter-spacing:0; transition:border-color var(--dur-fast);}
.sc .sc-form textarea.sc-input{min-height:140px; resize:vertical; line-height:1.55;}
.sc .sc-form .sc-input:hover{border-color:var(--ink-soft);}
.sc .sc-form .sc-input:focus-visible{border-color:var(--sc-accent);}
.sc .sc-form .sc-input::placeholder{color:var(--ink-faint);}
.sc-select{position:relative;}
.sc .sc-form select.sc-input{padding-right:42px; appearance:none; -webkit-appearance:none; cursor:pointer;}
.sc-select .sc-ico{position:absolute; top:50%; right:14px; width:16px; height:16px; margin-top:-8px; color:var(--ink-soft); pointer-events:none;}
.sc-form-foot{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-top:18px;}
.sc-attach{display:grid; gap:8px; justify-items:start; min-width:0;}
.sc-hint{color:var(--ink-soft); font-size:.9rem; line-height:1.5;}
.sc-files{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;}
.sc-files[hidden]{display:none;}
.sc-file{display:flex; align-items:center; gap:10px; max-width:100%; padding:6px; border:1px solid var(--line); border-radius:10px;}
.sc-file-thumb{width:36px; height:36px; flex:none; border-radius:6px; object-fit:cover; background:var(--line-soft);}
.sc-file-meta{display:grid; min-width:0;}
.sc-file-name{max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 .82rem/1.4 var(--font-sans);}
.sc-file-size{color:var(--ink-soft); font-size:.75rem;}
.sc-file-remove{display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:8px; background:none; color:var(--ink-soft); cursor:pointer;}
.sc-file-remove:hover{color:var(--coral-deep);}
.sc-status{min-height:1.5em; margin-top:14px; color:var(--ink-soft); font-size:1rem; line-height:1.5;}
.sc-status.is-success{color:var(--green-deep); font-weight:600;}
.sc-status.is-error{color:var(--coral-deep);}

/* ---- Futura Support on this page: opened from the top bar, flat and bordered ---- */
.sc .futura-support-launcher{display:none; box-shadow:none;}
.sc .futura-support-panel{bottom:24px; box-shadow:none; border:1px solid var(--ink-soft);}

/* ---- narrower screens ---- */
/* Below about 1500px three columns leave the guide too narrow, so the topics
   become a row across the top and the list and reader share the rest. */
@media (min-width:901px) and (max-width:1499px){
  .sc-shell{grid-template-columns:clamp(320px,30vw,400px) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); grid-template-areas:"rail rail" "list reader";}
  .sc-rail{grid-area:rail; padding:10px 14px; overflow:visible; border-right:0; border-bottom:1px solid var(--line);}
  .sc-rail ul{display:flex; flex-wrap:wrap; gap:4px;}
  .sc-topic{display:flex; width:auto; min-height:46px; gap:8px; padding:0 12px; border:1px solid transparent; white-space:nowrap;}
  .sc-topic.is-active{padding:0 11px;}
  .sc-topic-name{font-size:.97rem;}
  .sc-topic .sc-tile{display:none;}
  .sc-topic-n{display:none;}
  .sc-listpane{grid-area:list;}
  .sc-reader{grid-area:reader;}
}
@media (max-width:900px){
  .sc{--sc-h:auto;}
  .sc-bar{flex-wrap:wrap; gap:12px;}
  .sc-search{order:3; flex:1 1 100%; max-width:none; margin-left:0;}
  .sc-bar-actions{margin-left:auto;}
  .sc-shell{display:block; height:auto; overflow:visible; border:0; border-radius:0; background:none;}
  .sc-rail,.sc-listpane,.sc-reader{overflow:visible;}
  .sc-rail{padding:0 0 4px; border:0; background:none; margin:0 -16px;}
  .sc-rail ul{display:flex; gap:8px; overflow-x:auto; padding:0 16px 8px; scrollbar-width:thin;}
  .sc-rail li{flex:none;}
  .sc-topic{display:flex; width:auto; min-height:44px; padding:6px 14px 6px 8px; border:1px solid var(--line); background:var(--paper-raised); white-space:nowrap;}
  .sc-topic.is-active{padding:6px 14px 6px 8px; border-color:var(--sc-accent);}
  .sc-topic-n{display:none;}
  .sc-listpane{padding:16px 0; border:0;}
  .sc-reader{padding:24px 0 8px; border-top:1px solid var(--line);}
  .sc-shell[data-view="read"] .sc-rail,
  .sc-shell[data-view="read"] .sc-listpane{display:none;}
  .sc-shell[data-view="read"] .sc-reader{padding-top:4px; border-top:0;}
}
@media (max-width:560px){
  .sc-bar-title{flex:1 1 auto;}
  .sc-bar-actions{flex:1 1 100%; margin-left:0;}
  .sc-bar-actions .sc-btn{flex:1;}
  .sc-bar-actions{flex-wrap:wrap;}
  .sc-tour{flex:1 1 100%;min-height:44px;}
  .sc-kbd{display:none;}
  .sc-person{flex-wrap:wrap;}
  .sc-person .sc-btn{flex:1 1 100%;}
  .sc-task{padding:12px;}
  .sc-form-grid{grid-template-columns:minmax(0,1fr);}
  .sc-form-foot{flex-direction:column; align-items:stretch;}
  .sc-form-foot .sc-btn--primary{width:100%;}
  .sc-dialog{padding:24px 18px;}
  .sc-modal{padding:16px 10px;}
  .sc-stuck .sc-btn{flex:1 1 100%;}
}
@media (prefers-reduced-motion:reduce){
  .sc *,.sc *::before,.sc *::after{transition:none !important; animation:none !important;}
}