/* SAO Activities additions on top of the shared SAO stylesheet (style.css, from SAO Weekly / SAO Clubs). */
/* Students: one narrow column, phone first. */
.student{min-height:100vh;display:flex;flex-direction:column}
.student-top{background:var(--navy);color:#fff;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.student-top .brand{font-size:16px}
.student-top .who{display:flex;flex-direction:column;align-items:flex-end;font-size:13px}
.student-top .who .muted{color:#cfe2f3}
.student-top .text-button{color:#dce9f5;font-size:12px;padding:0}
.student-main{width:100%;max-width:720px;margin:0 auto;padding:22px 16px 50px;flex:1}
.student-main>*+*{margin-top:18px}
.student-foot{text-align:center;font-size:10px;letter-spacing:.14em;color:var(--muted);padding:18px}
.hero h1{font-size:30px}
.button.big{min-height:52px;font-size:16px;width:100%}
.event-card h3{margin-bottom:4px}
.link-card{display:block;color:inherit;text-decoration:none}
.link-card:hover{border-color:var(--sky)}
.slots{margin:8px 0 10px;padding-left:18px}
.slots li{margin-bottom:4px}
.slot-row{gap:10px;margin-bottom:10px;flex-wrap:wrap;align-items:end}
.slot-row select{flex:1.4;min-width:160px}
.slot-row label{display:flex;flex-direction:column;font-size:12px;color:var(--muted);flex:1;min-width:110px}
.slot-row .remove,.question .qremove{background:none;border:0;color:var(--red);font-size:20px;line-height:1;padding:6px}
.question .qremove{font-size:13px}
fieldset.field{border:0;padding:0;margin:0 0 17px}
fieldset.field legend{font-weight:600;margin-bottom:6px;padding:0}
.choice{flex-direction:column;align-items:flex-start;text-align:left;width:100%;min-height:58px}
.choice small{font-weight:400;color:var(--muted)}
.attend h1,.done h1{font-size:26px}
/* The student's registration after the ID step (Tarek 2026-11-03). */
.reg-card{margin:0;display:grid;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.reg-card div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:10px 14px;border-top:1px solid var(--line)}
.reg-card div:first-child{border-top:0}
.reg-card dt{color:var(--muted);font-size:13px;margin:0}
.reg-card dd{margin:0;overflow-wrap:anywhere}
@media (max-width:420px){.reg-card div{grid-template-columns:1fr;gap:2px}}
.done{text-align:center}
.tick{width:64px;height:64px;border-radius:50%;background:#e9f4ee;color:#1f9d55;font-size:36px;line-height:64px;margin:0 auto}
.pre{white-space:pre-wrap}
.text-button{background:none;border:0;color:var(--navy2);padding:4px 6px;font-size:12px;text-decoration:underline;cursor:pointer}
.danger-text{color:var(--red)}
/* Staff */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap}
.tab{padding:10px 14px;text-decoration:none;color:var(--muted);font-weight:600;font-size:13px;border-bottom:3px solid transparent;margin-bottom:-1px}
.tab.active{color:var(--navy);border-bottom-color:var(--orange)}
.clickable tbody tr{cursor:pointer}
.clickable tbody tr:hover td{background:#f6f9fc}
tr.cancelled td{opacity:.55}
td.actions{white-space:nowrap}
.slot-line{white-space:nowrap}
.day-pick{display:flex;align-items:center;gap:8px;font-size:13px}
.day-pick select{width:auto}
.question{padding:16px;background:#fbfcfd}
.divider{border:0;border-top:1px solid var(--line);margin:22px 0}
.pill.pending{background:#fff3dc;color:#8b6025}
.qr-box{text-align:center}
.qr-box canvas{display:block;width:min(340px,76vw);height:auto;margin:6px auto 10px;image-rendering:pixelated}
.qr-code{font:700 1.9rem/1.2 ui-monospace,Consolas,monospace;letter-spacing:.28em;color:#132b44}
.scan-box{margin:4px 0 12px}
.scan-box video[hidden]{display:none}
.scan-box video{display:block;width:100%;max-height:55vh;object-fit:cover;background:#0d1b2a;border-radius:10px}
.code-form{gap:10px;flex-wrap:nowrap}
.code-form input{flex:1;min-width:0}
#codeForm input{text-transform:uppercase;letter-spacing:.12em}
#codeForm input::placeholder{text-transform:none;letter-spacing:0}
@media(max-width:640px){.grid2,.grid3{grid-template-columns:1fr}.stat-grid{grid-template-columns:1fr 1fr}}
@media print{.sidebar,.topbar,.no-print,.page-head{display:none!important}.shell{display:block}.poster{border:0}.poster .qr-box canvas{width:12cm}}
.field[hidden]{display:none}
td.nowrap{white-space:nowrap}