/* Mobile-first refinements, student color palettes, and fast attendance controls. */
.auth-visual{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center 52%;border-radius:18px;margin-top:24px;box-shadow:0 18px 40px #17255422}
.register-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 8px}
.appearance-preview{display:block;width:100%;max-height:340px;object-fit:cover;border-radius:14px;border:1px solid var(--line);background:var(--paper);margin:14px 0}
.register-toolbar strong{margin-right:auto}
.register-toolbar button,.save-register{min-height:48px}
.attendance-register{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:14px 0 18px;background:var(--white)}
.register-head,.attendance-row{display:grid;grid-template-columns:minmax(190px,.75fr) minmax(350px,1.25fr);align-items:center;gap:14px;padding:12px 16px}
.register-head{background:#edf1fa;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.attendance-row+.attendance-row{border-top:1px solid var(--line)}
.student-cell strong,.student-cell small{display:block}.student-cell small{color:var(--muted);font-size:12px}
.status-options{border:0;padding:0;margin:0;display:flex;gap:7px;min-width:0}
.status-choice{display:block;margin:0;cursor:pointer;flex:1;min-width:86px}
.status-choice input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;margin:0}
.status-choice span{display:grid;place-items:center;min-height:42px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font-size:12px;font-weight:700}
.status-present input:checked+span{background:#e8f7ee;border-color:#7bc99b;color:#17653b}
.status-absent input:checked+span{background:#fff0ed;border-color:#efad9e;color:#963b28}
.status-late input:checked+span{background:#fff7df;border-color:#e8cd7d;color:#755916}
.status-choice input:focus-visible+span{outline:3px solid #f9731680;outline-offset:2px}
.people-table .compact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;min-width:0}
.people-table .compact input,.people-table .compact select{min-width:0;width:100%;margin:0}
.report-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
body[data-theme="pink"][data-theme-day="0"]{--navy:#9d174d;--orange:#e84e9a;--paper:#fff7fb;--line:#f0d7e4}
body[data-theme="pink"][data-theme-day="1"]{--navy:#762b78;--orange:#c45add;--paper:#fcf7ff;--line:#eadcf0}
body[data-theme="pink"][data-theme-day="2"]{--navy:#a82d68;--orange:#f06b9f;--paper:#fff8fa;--line:#f3d9e2}
body[data-theme="pink"][data-theme-day="3"]{--navy:#8b3b64;--orange:#d982b1;--paper:#fff9fc;--line:#f0dce8}
body[data-theme="blue"][data-theme-day="0"]{--navy:#17376f;--orange:#329be7;--paper:#f4f9ff;--line:#d8e6f5}
body[data-theme="blue"][data-theme-day="1"]{--navy:#14535f;--orange:#20a5a8;--paper:#f1fbfb;--line:#d3ebeb}
body[data-theme="blue"][data-theme-day="2"]{--navy:#304778;--orange:#658ce2;--paper:#f5f7ff;--line:#dfe4f4}
body[data-theme="blue"][data-theme-day="3"]{--navy:#20506d;--orange:#45a9c8;--paper:#f2faff;--line:#d7eaf2}
body[data-theme="pink"] .eyebrow,body[data-theme="blue"] .eyebrow{color:var(--navy)}
body[data-theme="pink"] .notice,body[data-theme="blue"] .notice{border-color:color-mix(in srgb,var(--orange) 35%,white)}
@media(max-width:850px){.auth-main{gap:28px;padding:32px 20px}.auth-intro{max-width:none}.auth-visual{max-height:260px}.people-table .compact{grid-template-columns:1fr}.report-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){
  header{align-items:center}.brand{white-space:normal}.website{margin-left:auto}
  nav{gap:18px;padding:12px 16px}
  main{padding-left:14px;padding-right:14px}
  .auth-main{display:flex;flex-direction:column;align-items:stretch;gap:22px;min-height:0;padding:24px 14px 40px}
  .auth-intro{margin:0}.auth-intro h1{font-size:clamp(31px,9vw,42px)}.auth-intro>p:not(.eyebrow){font-size:15px}
  .auth-visual{aspect-ratio:16/9;max-height:230px;margin-top:18px}
  .auth-card{width:100%;padding:24px 20px}
  input,select,textarea{min-height:48px;font-size:16px}button,.button{min-height:48px}
  .register-head{display:none}.attendance-row{grid-template-columns:1fr;gap:9px;padding:13px 12px}
  .status-options{gap:6px}.status-choice{min-width:0}.status-choice span{min-height:46px}
  .register-toolbar{align-items:stretch}.register-toolbar strong{flex-basis:100%}.register-toolbar button{flex:1;padding:9px 10px}
  .people-table,.people-table tbody,.people-table tr,.people-table td{display:block;width:100%}.people-table thead{display:none}
  .people-table tr{border:1px solid var(--line);border-radius:12px;padding:13px;margin:0 0 12px;background:#fff}
  .people-table td{border:0;padding:5px 0}.people-table td:nth-child(2)::before{content:"Role";display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.6px;font-weight:700}
  .people-table td:nth-child(3)::before{content:"Class, theme and status";display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin:2px 0 6px}
  .people-table td:nth-child(4)::before{content:"Password";display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.6px;font-weight:700}
  .people-table .compact{grid-template-columns:1fr;gap:9px}.people-table .compact button{width:100%}
  .report-stats{grid-template-columns:1fr 1fr}.report-stats>div:last-child{grid-column:1/-1}
  .report-table{min-width:760px}
  .inline-form{display:grid;grid-template-columns:1fr;align-items:stretch}.inline-form label{min-width:0;margin:0}.inline-form button,.inline-form .button{width:100%;margin:0}
  .grid.two,.builder{grid-template-columns:1fr}
}
@media(max-width:380px){.role-pills{gap:6px}.role-pills span{padding:6px 9px}.register-toolbar{gap:7px}.register-toolbar button{font-size:12px}.status-choice span{font-size:11px}}

/* Director-assigned fashion-doll room theme. The artwork is loaded only for students on the pink theme. */
body[data-theme="pink"]{background-color:#fff7fb;background-image:linear-gradient(rgba(255,250,253,.48),rgba(255,250,253,.58)),url("fashion-doll-study-room.webp");background-position:center top;background-size:cover;background-repeat:no-repeat;background-attachment:fixed}
body[data-theme="pink"] .page-heading{padding:18px 22px;border:1px solid #f2d6e5;border-radius:15px;background:rgba(255,252,254,.91);backdrop-filter:blur(8px)}
body[data-theme="pink"] .panel,body[data-theme="pink"] .stats>div,body[data-theme="pink"] .notice{background:rgba(255,252,254,.94);backdrop-filter:blur(7px)}
body[data-theme="pink"] .stats>div{border-top-color:var(--orange)}
body[data-theme="pink"] nav{background:var(--navy)}
body[data-theme="pink"] .attendance-month-wrap{background:rgba(255,252,254,.96)}
.attendance-month-controls{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.attendance-month-controls label{flex:1;min-width:170px}
.attendance-month-wrap{overflow:auto;max-height:72vh;border:1px solid var(--line);border-radius:12px}
.attendance-month{border-collapse:separate;border-spacing:0;min-width:max-content;width:100%;font-size:12px}
.attendance-month th,.attendance-month td{padding:8px 7px;text-align:center;white-space:nowrap}
.attendance-month thead th{position:sticky;top:0;z-index:2;background:#edf1fa}
.attendance-month th:first-child,.attendance-month td:first-child{position:sticky;left:0;z-index:1;text-align:left;min-width:150px;background:#fff}
.attendance-month thead th:first-child{z-index:3;background:#edf1fa}
.attendance-month .month-day{min-width:34px;padding-inline:4px}
.attendance-month td.month-present{color:#17653b;background:#e8f7ee;font-weight:800}
.attendance-month td.month-absent{color:#963b28;background:#fff0ed;font-weight:800}
.attendance-month td.month-late{color:#755916;background:#fff7df;font-weight:800}
.attendance-month td.month-off{color:#64748b;background:#f1f3f7;font-size:10px}
.attendance-month td.month-holiday{color:#7042a2;background:#f2eaff;font-size:10px}
.attendance-month td.month-empty{color:#b2b8c4}
.attendance-month td.month-extra{box-shadow:inset 0 -2px #df4d98}
.attendance-legend{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.attendance-legend span{padding:4px 8px;border-radius:20px;background:#f3f5f9;font-size:11px}
@media(max-width:600px){body[data-theme="pink"]{background-attachment:scroll;background-size:auto 560px;background-position:left top}body[data-theme="pink"] .page-heading{padding:15px}.attendance-month-controls{display:grid;grid-template-columns:1fr}.attendance-month-controls label{min-width:0}.attendance-month-wrap{max-height:65vh}.attendance-month th,.attendance-month td{padding:7px 6px}.attendance-month th:first-child,.attendance-month td:first-child{min-width:118px}.attendance-month .month-day{min-width:32px}}


.span-two{grid-column:1/-1}
@media(max-width:650px){.span-two{grid-column:1}}
/* Question-level work tracking and weekly notebook pilot */
.work-question{border-left:4px solid #f39a24;background:#fbfcfe}
.work-student{padding:14px;border:1px solid #dfe6f0;border-radius:12px;background:#fff;min-width:0}
.work-checklist{display:grid;gap:8px;margin:14px 0;padding:14px;border:1px solid #dfe6f0;border-radius:12px}
.work-checklist .choice{display:flex;align-items:flex-start;gap:10px}
.notebook-roster{margin-top:18px}
.notebook-roster table{min-width:850px}
.notebook-roster td{vertical-align:top}
.notebook-roster input,.notebook-roster select{min-width:125px}
@media(max-width:600px){.work-student{padding:12px}.work-checklist{padding:11px}.notebook-roster table{min-width:760px}.notebook-roster .table-wrap{overflow-x:auto;overscroll-behavior-x:contain}}