/* DeeDee go component layer (2026-10-25). Loaded last on every page.
   One set of tokens, two moods built from it:
   - Staff (management): crisp 12px cards, flat borders, list rows, 10px controls. Built for scanning and quick handling.
   - Students (learning): softer 20px cards with one shared shadow, pill buttons, sprout-green progress. Built for encouragement.
   Each area keeps a single primary (filled) action; rare or destructive actions go to the "More" menu. */
:root{
 --c-brand:#215c48;--c-brand-strong:#193d36;--c-brand-soft:#e8f2ec;--c-ink:#1f3a31;--c-muted:#4a5f56;
 --c-line:#d7e2db;--c-canvas:#f5f8f5;--c-surface:#fff;--c-danger:#a4333c;--c-danger-soft:#fbeeee;--c-sprout:#4f9a5d;
 --r-control:10px;--r-card:12px;--r-sheet:18px;--r-student:20px;--r-pill:999px;
 --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;
 --shadow-student:0 4px 18px rgba(33,92,72,.08);--shadow-sheet:0 18px 48px rgba(25,61,54,.18);
}

/* ---------- Buttons: secondary (default), primary, danger, quiet text ---------- */
:is(.content,.learning-shell,.public-shell,.public-admin,dialog,.modal) :is(button,a.button):not(.linkbutton):not([data-attendance]):not(.roster-classes):not(.student-bottom-nav *):not(.learning-header *):not(.public-header *):not(.student-shell *){border-radius:var(--r-control);font-weight:600}
:is(.content,.learning-shell,.public-shell,.public-admin,dialog,.modal) :is(button,a.button).primary{background:var(--c-brand);border-color:var(--c-brand);color:#fff}
:is(.content,.learning-shell,.public-shell,.public-admin,dialog,.modal) :is(button,a.button).primary:hover{background:var(--c-brand-strong);border-color:var(--c-brand-strong)}
:is(.content,.learning-shell,.public-shell,.public-admin,dialog,.modal) button.danger:not(.linkbutton){background:var(--c-surface);color:var(--c-danger);border:1px solid #e3c3c6}
:is(.content,.learning-shell,.public-shell,.public-admin,dialog,.modal) button.danger:not(.linkbutton):hover{background:var(--c-danger-soft)}
button.small{min-height:40px;padding:6px 14px;font-size:14px}
.linkbutton{border-radius:var(--r-control)}

/* ---------- People are always shown as circles ---------- */
.avatar,.avatar.large,.identity-avatar,.mini-avatar,.candidate-row img,.candidate-avatar{border-radius:50%}

/* ---------- Chips are tags: always pill-shaped ---------- */
.chip,.public-status,.class-chips .chip{border-radius:var(--r-pill)}

/* ---------- Form controls ---------- */
:is(.content,.learning-shell,.public-shell,.public-admin,dialog,.modal) :is(input:not([type=checkbox]):not([type=radio]),select,textarea){border-radius:var(--r-control)}

/* ---------- Overflow ("More") menu ---------- */
.row-more{position:relative;display:inline-block}
.row-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-ink);font-weight:600;font-size:15px}
.row-more>summary::-webkit-details-marker{display:none}
.row-more>summary::after{content:"";width:6px;height:6px;margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.row-more[open]>summary{background:var(--c-brand-soft)}
.row-more-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:180px;display:grid;gap:4px;padding:6px;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-card);box-shadow:var(--shadow-sheet)}
.row-more-menu button{width:100%;justify-content:flex-start;text-align:left;border:0!important;background:transparent!important}
.row-more-menu button:hover{background:var(--c-brand-soft)!important}
.row-more-menu button.danger:hover{background:var(--c-danger-soft)!important}

/* ======================= Staff (management) ======================= */
.content .panel,.content .stat,.content .attendance-row,.content .reward-card,.content .exam-card{border-radius:var(--r-card)}
.content .panel,.content .attendance-row{box-shadow:none;border:1px solid var(--c-line)}
.learning-shell:not(.student-shell) .panel,.learning-shell:not(.student-shell) .learning-card{border-radius:var(--r-card);box-shadow:none;border:1px solid var(--c-line)}
.public-admin .panel,.public-admin article{border-radius:var(--r-card)}

/* Student roster: one list, one row per student */
.roster{list-style:none;margin:16px 0 0;padding:0;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-card)}
.roster-row{display:grid;grid-template-columns:minmax(200px,1.4fr) minmax(180px,1.3fr) 90px auto;gap:12px 18px;align-items:center;padding:14px 18px;border-top:1px solid var(--c-line)}
.roster-row:first-child{border-top:0}
.roster-who{display:flex;align-items:center;gap:12px;min-width:0}
.roster-who>div{min-width:0;display:grid;gap:2px}
.roster-who strong{font-size:17px;overflow-wrap:anywhere}
.roster-who small{color:var(--c-muted);font-size:14px;overflow-wrap:anywhere}
.roster-classes{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:44px;padding:6px 8px;margin:0;border:1px dashed transparent;border-radius:var(--r-control);background:transparent;text-align:left;color:var(--c-ink);cursor:pointer;font-weight:400}
button.roster-classes:hover,button.roster-classes:focus-visible{border-color:var(--c-line);background:var(--c-brand-soft)}
.roster-classes .class-chips{display:contents}
.roster-edit{display:inline-flex;align-items:center;gap:4px;color:var(--c-brand);font-size:14px;font-weight:600}
.roster-edit .icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.roster-points{text-align:right;line-height:1.2}
.roster-points strong{display:block;font-size:20px}
.roster-points small{color:var(--c-muted);font-size:14px}
.roster-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
@media(max-width:900px){
 .roster-row{grid-template-columns:1fr auto;padding:14px}
 .roster-who{grid-column:1}.roster-points{grid-column:2;grid-row:1}
 .roster-classes{grid-column:1/-1;margin:0 -8px}
 .roster-actions{grid-column:1/-1;justify-content:stretch}
 .roster-actions>button{flex:1}
}

/* Attendance: note and save sit on one line */
.attendance-note{display:flex;gap:8px;align-items:center}
.attendance-note input{flex:1;min-width:0}

/* Staff learning tabs read as tabs, not as a row of equal buttons */
.learning-shell:not(.student-shell) .learning-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:4px;margin:8px 0 12px;background:var(--c-brand-soft);border-radius:var(--r-control);width:fit-content;max-width:100%}
.learning-shell:not(.student-shell) .learning-tabs button{border:0;background:transparent;color:var(--c-ink);min-height:40px;padding:6px 14px;font-weight:600}
.learning-shell:not(.student-shell) .learning-tabs button[aria-current=page]{background:var(--c-surface);color:var(--c-brand);box-shadow:0 1px 3px rgba(25,61,54,.15)}
.learning-shell:not(.student-shell) .secondary-actions{margin:0 0 12px}

/* Sidebar: the binding page link looks and behaves like the other sections */
.nav a.nav-link{display:flex;gap:13px;align-items:center;padding:13px 15px;border-radius:var(--r-control);color:#65796e;text-decoration:none;font-size:inherit}
.nav a.nav-link:hover{background:var(--c-brand-soft);color:var(--c-brand)}
.nav a.nav-link .icon{flex:none}
/* Settings: delete account sits apart from everyday settings */
.content .panel.danger-zone{border-color:#e3c3c6}
.content .panel.danger-zone h2{color:var(--c-danger)}
.form-grid:has(.delete-hint){grid-template-columns:1fr}
.delete-confirm{display:flex;gap:10px;align-items:flex-start}
.delete-confirm input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--c-danger)}
:is(dialog,.modal) button.danger-solid{background:var(--c-danger);border:1px solid var(--c-danger);color:#fff}
:is(dialog,.modal) button.danger-solid:hover{background:#86262f}

/* Manage behaviours: built-in attendance items above custom ones */
.behavior-group{margin:8px 0 0;font-size:15px;color:var(--c-muted)}
.behavior-btn.behavior-default:disabled{opacity:1;cursor:default;background:var(--c-canvas)}

/* Rankings: the balance opens that student's points records */
.rank .balance-button{display:inline-flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:64px;min-height:48px;padding:6px 10px;border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-ink);font-size:17px;font-weight:650;line-height:1.1;cursor:pointer}
.rank .balance-button small{font-size:14px;font-weight:400;color:var(--c-muted)}
.rank .balance-button:hover{background:var(--c-brand-soft);border-color:var(--c-brand)}
.ledger-list{list-style:none;margin:0;padding:0;display:grid}
.ledger-list li{display:grid;grid-template-columns:1fr auto 56px;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--c-line)}
.ledger-list li:first-child{border-top:0}
.ledger-what{display:grid;gap:2px;min-width:0;overflow-wrap:anywhere}
.ledger-what small{color:var(--c-muted);font-size:14px}
.ledger-date{color:var(--c-muted);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
td.ledger-date{text-align:left}

/* Dialogs share one sheet radius */
dialog,.modal,.center-dialog,.taxonomy-dialog{border-radius:var(--r-sheet)}

/* ======================= Students (learning) ======================= */
.student-shell .panel,.student-shell .learning-card,.student-shell .student-continue{border-radius:var(--r-student);box-shadow:var(--shadow-student);border:1px solid #e3ece6}
.student-shell .student-welcome{border-radius:var(--r-student)}
.student-shell :is(button,a.button):not(.student-bottom-nav *):not(.learning-header *):not([data-action=buddy]):not([data-action=motion]){border-radius:var(--r-pill)}
.student-shell .learning-placeholder,.student-shell .learning-cover{border-radius:calc(var(--r-student) - 6px)}
.student-shell progress{height:10px;border-radius:var(--r-pill);overflow:hidden;accent-color:var(--c-sprout)}
.student-shell progress::-webkit-progress-bar{background:#e4ece6;border-radius:var(--r-pill)}
.student-shell progress::-webkit-progress-value{background:var(--c-sprout);border-radius:var(--r-pill)}
.student-shell progress::-moz-progress-bar{background:var(--c-sprout);border-radius:var(--r-pill)}
.student-shell .student-balance{display:inline-flex;gap:6px;align-items:center;padding:8px 14px;border-radius:var(--r-pill);background:var(--c-brand-soft)}
/* Course cards in one row line up: actions sit at the bottom whatever the title length */
.learning-grid{align-items:stretch}
.learning-card{display:flex;flex-direction:column}
.learning-card>.actions{margin-top:auto;padding-top:var(--s-3)}
/* The sprout accompanies "continue learning" without moving */
.student-continue{position:relative}
.continue-buddy{width:72px;height:72px;object-fit:contain;flex:none;align-self:center}
@media(max-width:600px){.continue-buddy{position:absolute;right:14px;top:10px;width:56px;height:56px}.student-continue>div{padding-right:60px}}
/* Student "My" tab (replaces the header menu) */
.student-my{display:grid;gap:18px}
.student-my h2{margin:0}
.my-identity{display:grid;gap:4px}
.my-identity strong{font-size:20px}
.my-identity small{color:var(--c-muted);font-size:15px}
.my-row{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:12px 16px;border:1px solid var(--c-line);border-radius:16px;color:var(--c-ink);text-decoration:none;background:var(--c-surface)}
.my-row span{display:grid;gap:2px}
.my-row small{color:var(--c-muted);font-size:14px}
.my-row>span[aria-hidden]{font-size:24px;color:var(--c-muted)}
.my-group{display:grid;gap:10px}
.my-group h3{margin:0;font-size:16px;color:var(--c-muted);font-weight:600}
.my-group select{min-height:48px;width:100%}
.my-buttons{display:flex;flex-wrap:wrap;gap:8px}
.my-buttons button[aria-pressed=true]{background:var(--c-brand-soft);border-color:var(--c-brand);color:var(--c-brand)}
.my-actions{grid-template-columns:1fr 1fr}
.my-actions button{width:100%}
.my-actions button[data-action=logout]{color:var(--c-danger)}

/* ======================= Inside the app (html[data-in-app]) =======================
   The native bar keeps back / title / refresh; the web header keeps identity and menu only. */
html[data-in-app] :is(.public-header,.learning-header) .public-brand>span{display:none}
html[data-in-app] :is(.public-header,.learning-header) .public-brand img{width:32px;height:32px}
html[data-in-app] :is(.public-header,.learning-header){padding-top:6px;padding-bottom:6px;margin-bottom:12px}
html[data-in-app] .student-shell .learning-header{padding-top:6px;padding-bottom:6px}
html[data-in-app] .topbar{padding-top:6px;padding-bottom:6px}
html[data-in-app] .topbar .brand-logo{display:none}
@media(prefers-reduced-motion:reduce){.row-more>summary::after{transition:none}}

/* Student mascot motion (owner request 2026-10-25: "动作幅度加大100%").
   The original float was ±2deg / 7px and had been switched off by experience.css; it now runs again at twice the
   amplitude (±4deg / 14px, sparks 10px, completion nod 12px / 6deg). The motion switch and reduced-motion still stop it. */
@keyframes buddy-float-strong{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(4deg)}}
@keyframes buddy-spark-strong{0%,100%{transform:translateY(0) scale(1);opacity:.45}50%{transform:translateY(-10px) scale(1.15);opacity:1}}
@keyframes completion-nod-strong{50%{transform:translateY(-12px) rotate(6deg)}}
.student-shell .student-welcome .buddy-art{animation:buddy-float-strong 4s ease-in-out infinite!important;transform-origin:50% 85%}
.student-shell .student-welcome .buddy-spark{animation:buddy-spark-strong 3s ease-in-out infinite!important}
.student-shell .student-welcome .spark-two{animation-delay:-1.5s!important}
.student-shell .student-result .buddy-art{animation:completion-nod-strong .6s ease-out 1!important}
.student-shell[data-motion=off] :is(.buddy-art,.buddy-spark){animation:none!important}
@media(prefers-reduced-motion:reduce){.student-shell :is(.buddy-art,.buddy-spark){animation:none!important}}
/* Student header: institution-set photo only (no name, no menu). */
.student-header-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--surface-2,#e4eee7);box-shadow:0 0 0 2px #fff,0 1px 4px #0001;flex:none}
.student-header-me{display:inline-flex;align-items:center;gap:8px;min-width:0}
.student-header-me .account-identity{min-width:0}