/* =============================================
   THE POTTER'S TEENS — portal.css
   ============================================= */

/* ── AUTH ────────────────────────────────────── */
.portal-auth-body{background:var(--navy);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem;}
.portal-login-wrap{width:100%;max-width:420px;display:flex;flex-direction:column;gap:1.25rem;}
.portal-login-logo{display:flex;align-items:center;gap:.75rem;text-decoration:none;}
.portal-login-logo img{width:48px;height:48px;object-fit:contain;}
.portal-login-brand{font-family:var(--font-display);font-size:1.1rem;letter-spacing:3px;color:var(--yellow);}
.portal-login-sub{font-size:.72rem;font-weight:800;letter-spacing:2px;color:rgba(255,255,255,.4);}
.portal-login-box{background:var(--white);border:4px solid var(--white);box-shadow:8px 8px 0 var(--yellow);padding:2rem;}
.portal-login-box h1{font-family:var(--font-display);font-size:2rem;letter-spacing:2px;color:var(--navy);margin-bottom:1.25rem;}
.portal-login-box label{display:flex;flex-direction:column;gap:.3rem;font-family:var(--font-display);font-size:.82rem;letter-spacing:1.5px;color:var(--navy);margin-bottom:.85rem;}
.portal-login-box label small{font-family:var(--font-body);font-size:.72rem;font-weight:700;color:#888;letter-spacing:0;}
.portal-login-box input,.portal-login-box select,.portal-login-box textarea{font-family:var(--font-body);font-weight:700;font-size:.9rem;padding:10px 12px;border:3px solid var(--navy);width:100%;background:#fff;}
.portal-login-box button{width:100%;font-family:var(--font-display);font-size:1.1rem;letter-spacing:2px;padding:12px;background:var(--navy);color:var(--yellow);border:none;cursor:pointer;margin-top:.25rem;}
.portal-login-box button:hover{background:var(--orange);color:#fff;}
.portal-forgot{text-align:center;font-size:.78rem;font-weight:700;color:#888;margin-top:1rem;}
.portal-forgot a,.portal-back-link{color:var(--orange);text-decoration:none;}
.portal-login-note{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.35);text-align:center;line-height:1.6;}

/* ── ALERTS ── */
.portal-alert{padding:.85rem 1rem;font-size:.85rem;font-weight:800;line-height:1.5;margin-bottom:1rem;border:3px solid;}
.portal-alert--error{background:#fff5f5;border-color:#c62828;color:#b71c1c;}
.portal-alert--success{background:#e8f5e9;border-color:#2e7d32;color:#1b5e20;}

/* ── PORTAL HEADER ── */
.portal-header{background:var(--navy);border-bottom:4px solid var(--yellow);padding:0 1.5rem;height:68px;display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:100;}
.portal-header--tutor{border-bottom-color:var(--orange);}
.portal-header-logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex-shrink:0;}
.portal-header-logo img{width:36px;height:36px;object-fit:contain;}
.portal-header-brand{font-family:var(--font-display);font-size:.9rem;letter-spacing:2px;color:var(--yellow);}
.portal-header--tutor .portal-header-brand{color:var(--orange);}
.portal-header-sub{font-size:.62rem;font-weight:800;letter-spacing:1px;color:rgba(255,255,255,.4);}
.portal-nav{display:flex;gap:2px;}
.portal-nav a{display:flex;align-items:center;gap:.3rem;font-family:var(--font-display);font-size:.8rem;letter-spacing:1px;color:rgba(255,255,255,.5);padding:6px 12px;text-decoration:none;border:2px solid transparent;transition:color .15s,border-color .15s;}
.portal-nav a:hover,.portal-nav a.active{color:var(--yellow);border-color:var(--yellow);}
.portal-header--tutor .portal-nav a:hover,.portal-header--tutor .portal-nav a.active{color:var(--orange);border-color:var(--orange);}
.portal-header-right{margin-left:auto;display:flex;align-items:center;gap:.75rem;}
.portal-whoami{font-size:.78rem;font-weight:800;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:.35rem;}
.tutor-track-chip{font-family:var(--font-display);font-size:.6rem;letter-spacing:1px;background:var(--orange);color:#fff;padding:1px 7px;}
.portal-logout-btn{font-family:var(--font-display);font-size:.75rem;letter-spacing:1px;color:rgba(255,255,255,.5);border:2px solid rgba(255,255,255,.25);padding:5px 12px;text-decoration:none;transition:all .15s;}
.portal-logout-btn:hover{color:#fff;border-color:#fff;}

/* ── MAIN ── */
.portal-body{background:var(--cream);}
.portal-main{max-width:1100px;margin:0 auto;padding:2.5rem 2rem;}

/* ── WELCOME ── */
.portal-welcome{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;flex-wrap:wrap;gap:.75rem;}
.portal-welcome-eyebrow{font-family:var(--font-display);font-size:.75rem;letter-spacing:3px;color:var(--orange);margin-bottom:.25rem;}
.portal-welcome-name{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.2rem);letter-spacing:2px;color:var(--navy);line-height:1;margin:0;}
.portal-track-badge{font-family:var(--font-display);font-size:.85rem;letter-spacing:2px;background:var(--navy);color:var(--yellow);padding:8px 20px;border:4px solid var(--navy);box-shadow:5px 5px 0 var(--yellow);}
.portal-section-title{font-family:var(--font-display);font-size:1.3rem;letter-spacing:2px;color:var(--navy);margin:2rem 0 1rem;display:flex;align-items:center;gap:.4rem;padding-bottom:.5rem;border-bottom:3px solid var(--navy);}

/* ── PROGRESS CARD ── */
.portal-progress-card{background:var(--navy);border:4px solid var(--navy);box-shadow:6px 6px 0 var(--yellow);padding:1.5rem 1.75rem;margin-bottom:2rem;}
.portal-progress-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem;}
.portal-progress-label{font-family:var(--font-display);font-size:.72rem;letter-spacing:2px;color:var(--teal);margin-bottom:.25rem;}
.portal-progress-title{font-family:var(--font-display);font-size:1.4rem;letter-spacing:2px;color:var(--white);}
.portal-progress-pct{font-family:var(--font-display);font-size:2.8rem;letter-spacing:2px;color:var(--yellow);line-height:1;}
.portal-progress-bar-wrap{height:12px;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.25);margin-bottom:.6rem;}
.portal-progress-bar{height:100%;background:var(--teal);transition:width .4s ease;}
.portal-progress-meta{font-size:.78rem;font-weight:800;color:rgba(255,255,255,.45);}

/* ── LESSON LIST ── */
.portal-lessons-list{display:flex;flex-direction:column;gap:.5rem;}
.portal-lesson-row{display:flex;align-items:center;gap:1rem;padding:.9rem 1.25rem;background:var(--white);border:3px solid var(--navy);text-decoration:none;color:var(--navy);transition:transform .12s,box-shadow .12s;box-shadow:4px 4px 0 var(--navy);}
.portal-lesson-row:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--navy);}
.portal-lesson-row--done{border-color:var(--teal);box-shadow:4px 4px 0 var(--teal);}
.portal-lesson-num{width:32px;height:32px;background:var(--navy);color:var(--yellow);font-family:var(--font-display);font-size:1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.portal-lesson-row--done .portal-lesson-num{background:var(--teal);}
.portal-lesson-info{flex:1;min-width:0;}
.portal-lesson-title{font-weight:900;font-size:.95rem;color:var(--navy);}
.portal-lesson-desc{font-size:.78rem;font-weight:700;color:#777;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.portal-lesson-right{display:flex;align-items:center;gap:.5rem;flex-shrink:0;}
.portal-lesson-dur{font-size:.75rem;font-weight:800;color:#aaa;}
.portal-lesson-check{color:var(--teal);font-size:1.4rem;}
.portal-lesson-progress{font-size:.75rem;font-weight:800;color:var(--orange);}

/* ── WATCH PAGE ── */
.portal-watch-body .portal-main{max-width:none;padding:0;}
.portal-watch-main{display:grid;grid-template-columns:1fr 300px;height:calc(100vh - 68px);overflow:hidden;}
.portal-watch-video-col{overflow-y:auto;padding:1.5rem 2rem;}
.portal-watch-breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:700;color:#888;margin-bottom:1rem;}
.portal-watch-breadcrumb a{color:var(--orange);text-decoration:none;}
.portal-watch-title{font-family:var(--font-display);font-size:1.8rem;letter-spacing:2px;color:var(--navy);margin-bottom:1rem;}
.portal-video-wrap{position:relative;padding-bottom:56.25%;height:0;background:#000;border:4px solid var(--navy);box-shadow:6px 6px 0 var(--navy);margin-bottom:1.5rem;overflow:hidden;}
.portal-video-processing{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#111;color:rgba(255,255,255,.5);font-size:1.5rem;gap:1rem;}
.portal-video-processing p{font-size:.88rem;font-weight:700;}
.portal-watch-desc{margin-bottom:1.5rem;}
.portal-watch-desc h3{font-family:var(--font-display);font-size:1rem;letter-spacing:2px;color:var(--navy);margin-bottom:.5rem;}
.portal-watch-desc p{font-size:.88rem;font-weight:700;color:#555;line-height:1.65;}
.portal-watch-nav{display:flex;justify-content:space-between;gap:1rem;padding-bottom:2rem;}
.portal-watch-nav-btn{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.25rem;border:3px solid var(--navy);text-decoration:none;color:var(--navy);font-weight:800;font-size:.85rem;background:var(--white);transition:background .15s;flex:1;max-width:260px;}
.portal-watch-nav-btn:hover{background:var(--cream);}
.portal-watch-nav-btn--next{justify-content:flex-end;text-align:right;}
.portal-watch-nav-btn small{display:block;font-size:.65rem;font-weight:900;letter-spacing:2px;color:var(--orange);margin-bottom:2px;}
.portal-watch-sidebar{border-left:4px solid var(--navy);background:var(--white);overflow-y:auto;}
.portal-watch-sidebar-title{font-family:var(--font-display);font-size:.9rem;letter-spacing:2px;color:var(--navy);padding:1rem 1.25rem;border-bottom:3px solid var(--navy);display:flex;align-items:center;gap:.4rem;position:sticky;top:0;background:var(--white);z-index:1;}
.portal-sidebar-lesson{display:flex;align-items:flex-start;gap:.65rem;padding:.75rem 1.25rem;border-bottom:2px solid var(--cream);text-decoration:none;color:var(--navy);font-size:.82rem;font-weight:700;transition:background .1s;}
.portal-sidebar-lesson:hover{background:var(--cream);}
.portal-sidebar-lesson--active{background:var(--navy);color:var(--yellow);}
.portal-sidebar-num{width:22px;height:22px;background:rgba(13,13,43,.15);font-family:var(--font-display);font-size:.75rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.portal-sidebar-lesson--active .portal-sidebar-num{background:var(--yellow);color:var(--navy);}

/* ── NOTICE ── */
.portal-notice{display:flex;align-items:center;gap:.75rem;background:var(--cream);border:3px solid var(--navy);padding:1.25rem 1.5rem;font-size:.88rem;font-weight:800;color:#555;}
.portal-notice i{font-size:1.3rem;color:var(--orange);flex-shrink:0;}

/* ── TUTOR STATS & ACTIONS ── */
.portal-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2rem;}
.portal-stat-card{background:var(--navy);border:4px solid var(--navy);box-shadow:5px 5px 0 var(--yellow);padding:1.25rem;text-align:center;}
.portal-stat-num{font-family:var(--font-display);font-size:2.5rem;letter-spacing:2px;color:var(--yellow);line-height:1;margin-bottom:.25rem;}
.portal-stat-label{font-size:.75rem;font-weight:800;color:rgba(255,255,255,.5);letter-spacing:1px;}
.portal-quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2rem;}
.portal-action-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:1.5rem 1rem;background:var(--white);border:4px solid var(--navy);box-shadow:5px 5px 0 var(--navy);text-decoration:none;color:var(--navy);font-family:var(--font-display);font-size:.9rem;letter-spacing:1px;text-align:center;transition:transform .12s,box-shadow .12s;}
.portal-action-card i{font-size:1.8rem;color:var(--orange);}
.portal-action-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--navy);}

/* ── PORTAL FORMS ── */
.portal-form{display:flex;flex-direction:column;gap:.85rem;}
.portal-form label{display:flex;flex-direction:column;gap:.35rem;font-family:var(--font-display);font-size:.82rem;letter-spacing:1.5px;color:var(--navy);}
.portal-form label small{font-family:var(--font-body);font-size:.72rem;font-weight:700;color:#888;letter-spacing:0;}
.portal-form input,.portal-form textarea,.portal-form select{font-family:var(--font-body);font-size:.9rem;font-weight:700;padding:9px 12px;border:3px solid var(--navy);background:var(--white);width:100%;}
.portal-form textarea{resize:vertical;}

/* ── UPLOAD ── */
.portal-upload-info{background:var(--cream);border:3px solid var(--navy);padding:.85rem 1.25rem;margin-bottom:1.25rem;font-size:.85rem;font-weight:700;color:#555;line-height:1.55;}
.portal-file-drop{position:relative;border:3px dashed var(--navy);padding:2.5rem 1.5rem;text-align:center;background:var(--cream);cursor:pointer;transition:border-color .15s;}
.portal-file-drop p{font-size:.88rem;font-weight:700;color:#777;margin-top:.5rem;}
.portal-file-drop:hover{border-color:var(--orange);}
.portal-file-selected{display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:700;color:var(--navy);padding:.6rem .75rem;background:#e8f5e9;border:2px solid #2e7d32;}
.portal-upload-progress-label{display:flex;justify-content:space-between;font-size:.82rem;font-weight:800;color:var(--navy);margin-bottom:.35rem;}
.portal-upload-progress-bar-wrap{height:14px;background:#eee;border:2px solid var(--navy);}
.portal-upload-progress-bar{height:100%;background:var(--teal);transition:width .3s;}

/* ── LESSON MANAGE ── */
.portal-lesson-manage-list{display:flex;flex-direction:column;gap:.75rem;}
.portal-manage-card{background:var(--white);border:3px solid var(--navy);box-shadow:4px 4px 0 var(--navy);padding:1rem 1.25rem;}
.portal-manage-top{display:flex;align-items:flex-start;gap:1rem;margin-bottom:.75rem;}
.portal-manage-order{width:36px;height:36px;background:var(--navy);color:var(--yellow);font-family:var(--font-display);font-size:1.1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.portal-manage-title{font-weight:900;font-size:.95rem;color:var(--navy);margin-bottom:.35rem;}
.portal-manage-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.portal-manage-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;}

/* ── RESPONSIVE ── */
@media(max-width:1024px){.portal-watch-main{grid-template-columns:1fr;height:auto;}.portal-watch-sidebar{border-left:none;border-top:4px solid var(--navy);height:300px;}.portal-quick-actions{grid-template-columns:repeat(2,1fr);}.portal-stats-row{grid-template-columns:repeat(2,1fr);}}
@media(max-width:680px){.portal-main{padding:1.5rem 1rem;}.portal-nav a span{display:none;}.portal-stats-row{grid-template-columns:1fr;}.portal-header{padding:0 .75rem;gap:.5rem;}.portal-header-logo .portal-header-sub{display:none;}}

/* ── WATCH PANELS (Assignment + Discussion) ── */
.watch-panel{border:3px solid var(--navy);background:var(--white);margin-bottom:1rem;overflow:hidden;}
.watch-panel-header{display:flex;align-items:center;gap:.6rem;padding:.9rem 1.25rem;cursor:pointer;user-select:none;font-family:var(--font-display);font-size:.92rem;letter-spacing:1.5px;color:var(--navy);background:var(--cream);border-bottom:3px solid transparent;transition:background .15s;}
.watch-panel-header:hover{background:#ece9df;}
.watch-panel--open .watch-panel-header{border-bottom-color:var(--navy);}
.watch-panel-header>span:first-child{flex:1;}
.watch-panel-badge{font-size:.65rem;letter-spacing:1px;padding:2px 10px;border:2px solid currentColor;font-family:var(--font-display);}
.watch-panel-badge--pending{color:var(--orange);}
.watch-panel-badge--submitted{color:var(--teal);}
.watch-panel-badge--graded{color:#2e7d32;}
.watch-panel-count{font-size:.72rem;font-weight:800;color:#888;}
.watch-panel-caret{font-size:1rem;color:#aaa;transition:transform .2s;flex-shrink:0;}
.watch-panel--open .watch-panel-caret{transform:rotate(180deg);}
.watch-panel-body{display:none;padding:1.25rem 1.5rem;border-top:none;}
.watch-panel--open .watch-panel-body{display:block;}
.watch-panel-desc{font-size:.88rem;font-weight:700;color:#555;line-height:1.65;margin-bottom:.75rem;}
.watch-panel-due{font-size:.8rem;font-weight:800;color:var(--orange);margin-bottom:1rem;display:flex;align-items:center;gap:.35rem;}

/* Assignment form in watch panel */
.asgn-form{display:flex;flex-direction:column;gap:.85rem;}
.asgn-form label{display:flex;flex-direction:column;gap:.35rem;font-family:var(--font-display);font-size:.78rem;letter-spacing:1.5px;color:var(--navy);}
.asgn-form textarea,.asgn-form input[type=url]{font-family:var(--font-body);font-size:.9rem;font-weight:700;padding:9px 12px;border:3px solid var(--navy);background:var(--white);width:100%;resize:vertical;}
.asgn-file-drop{position:relative;border:3px dashed var(--navy);padding:1.75rem 1rem;text-align:center;background:var(--cream);cursor:pointer;transition:border-color .15s;}
.asgn-file-drop:hover{border-color:var(--orange);}
.asgn-file-drop p{font-size:.82rem;font-weight:700;color:#888;margin-top:.4rem;}
.asgn-file-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;font-size:.82rem;font-weight:800;color:var(--teal);text-decoration:none;border-bottom:2px solid var(--teal);}
.asgn-submitted-notice{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:#e8f5e9;border:2px solid #2e7d32;color:#1b5e20;font-size:.85rem;font-weight:800;}
.asgn-grade-box{background:var(--navy);padding:1.25rem 1.5rem;border:4px solid var(--navy);box-shadow:5px 5px 0 var(--yellow);margin-bottom:1rem;}
.asgn-grade-score{font-family:var(--font-display);font-size:3.5rem;letter-spacing:2px;color:var(--yellow);line-height:1;}
.asgn-grade-score span{font-size:1.5rem;color:rgba(255,255,255,.5);}
.asgn-feedback{margin-top:.75rem;font-size:.85rem;font-weight:700;color:rgba(255,255,255,.8);line-height:1.6;}

/* Discussion thread */
.disc-form{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.25rem;padding-bottom:1.25rem;border-bottom:3px solid var(--cream);}
.disc-form textarea{font-family:var(--font-body);font-size:.88rem;font-weight:700;padding:9px 12px;border:3px solid var(--navy);width:100%;resize:vertical;}
.disc-thread{display:flex;flex-direction:column;gap:.75rem;}
.disc-post{background:var(--cream);border:2px solid #ddd;padding:.9rem 1rem;}
.disc-post--pinned{border-color:var(--yellow);background:#fffde7;}
.disc-post-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;flex-wrap:wrap;}
.disc-author{font-family:var(--font-display);font-size:.78rem;letter-spacing:1px;color:var(--navy);display:flex;align-items:center;gap:.25rem;}
.disc-author--tutor{color:var(--orange);}
.disc-pin-badge{font-size:.65rem;font-weight:900;letter-spacing:1px;background:var(--yellow);color:var(--navy);padding:1px 7px;display:flex;align-items:center;gap:.2rem;}
.disc-time{margin-left:auto;font-size:.7rem;font-weight:800;color:#aaa;}
.disc-post-body{font-size:.85rem;font-weight:700;color:#333;line-height:1.65;margin-bottom:.6rem;}
.disc-replies{margin-top:.5rem;padding-left:1rem;border-left:3px solid #ddd;display:flex;flex-direction:column;gap:.5rem;}
.disc-reply{padding:.6rem .75rem;background:#fff;border:1px solid #eee;}
.disc-reply-body{font-size:.82rem;font-weight:700;color:#444;line-height:1.6;margin-top:.35rem;}
.disc-reply-btn{background:none;border:none;cursor:pointer;font-size:.75rem;font-weight:800;color:#999;padding:0;display:inline-flex;align-items:center;gap:.25rem;margin-top:.25rem;transition:color .15s;}
.disc-reply-btn:hover{color:var(--orange);}
.disc-reply-form{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem;padding:.75rem;background:#f5f5f5;border:2px solid #ddd;}
.disc-reply-form textarea{font-family:var(--font-body);font-size:.85rem;font-weight:700;padding:7px 10px;border:2px solid var(--navy);width:100%;resize:none;}
.disc-empty{text-align:center;padding:2rem 1rem;color:#bbb;font-size:.88rem;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:.5rem;}
.disc-empty i{font-size:2rem;}

/* ── ASSIGNMENTS PAGE ── */
.asgn-page-grid{display:grid;grid-template-columns:1fr 420px;gap:2rem;align-items:start;}
.asgn-list{display:flex;flex-direction:column;gap:.75rem;}
.asgn-card{background:var(--white);border:3px solid var(--navy);box-shadow:4px 4px 0 var(--navy);}
.asgn-card summary{display:flex;align-items:center;gap:.9rem;padding:.9rem 1.25rem;cursor:pointer;list-style:none;transition:background .12s;}
.asgn-card summary::-webkit-details-marker{display:none;}
.asgn-card summary:hover{background:var(--cream);}
.asgn-card[open] summary{border-bottom:3px solid var(--navy);background:var(--cream);}
.asgn-card-status-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;}
.asgn-card-status-dot--pending{background:var(--orange);}
.asgn-card-status-dot--submitted{background:var(--teal);}
.asgn-card-status-dot--graded{background:#2e7d32;}
.asgn-card-info{flex:1;min-width:0;}
.asgn-card-title{font-weight:900;font-size:.95rem;color:var(--navy);}
.asgn-card-meta{font-size:.75rem;font-weight:700;color:#888;margin-top:2px;}
.asgn-status-pill{font-family:var(--font-display);font-size:.7rem;letter-spacing:1px;padding:3px 12px;border:2px solid currentColor;flex-shrink:0;}
.asgn-status-pill--pending{color:var(--orange);}
.asgn-status-pill--submitted{color:var(--teal);}
.asgn-status-pill--graded{color:#2e7d32;}
.asgn-card-body{padding:1.25rem 1.5rem;}
.asgn-create-wrap{margin-bottom:1.5rem;}
.asgn-create-wrap summary{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background:var(--navy);color:var(--yellow);font-family:var(--font-display);font-size:.9rem;letter-spacing:2px;cursor:pointer;list-style:none;border:4px solid var(--navy);box-shadow:4px 4px 0 var(--yellow);}
.asgn-create-wrap summary::-webkit-details-marker{display:none;}
.asgn-create-body{padding:1.25rem;border:3px solid var(--navy);border-top:none;background:var(--white);}

/* Tutor grading panel */
.grade-panel{background:var(--white);border:3px solid var(--navy);box-shadow:5px 5px 0 var(--orange);position:sticky;top:80px;}
.grade-panel-head{padding:1rem 1.25rem;background:var(--navy);color:var(--yellow);font-family:var(--font-display);font-size:1rem;letter-spacing:2px;border-bottom:3px solid var(--orange);}
.grade-panel-body{padding:1.25rem;}
.sub-card{border:2px solid #ddd;margin-bottom:.75rem;padding:.9rem 1rem;background:var(--cream);}
.sub-card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:.5rem;gap:.5rem;}
.sub-card-name{font-weight:900;font-size:.92rem;color:var(--navy);}
.sub-card-email{font-size:.72rem;font-weight:700;color:#888;}
.sub-card-date{font-size:.7rem;font-weight:800;color:#aaa;white-space:nowrap;}
.sub-status-pill{font-family:var(--font-display);font-size:.65rem;letter-spacing:1px;padding:2px 9px;border:2px solid currentColor;}
.sub-status--submitted{color:var(--teal);}
.sub-status--graded{color:#2e7d32;}
.sub-content{font-size:.82rem;font-weight:700;color:#555;line-height:1.6;max-height:80px;overflow:hidden;margin:.5rem 0;}
.sub-content.expanded{max-height:none;}
.sub-expand-btn{background:none;border:none;cursor:pointer;font-size:.72rem;font-weight:900;color:var(--orange);padding:0;}
.grade-form{margin-top:.75rem;padding-top:.75rem;border-top:2px solid #ddd;display:flex;flex-direction:column;gap:.5rem;}
.grade-form input[type=number],.grade-form textarea{font-family:var(--font-body);font-size:.88rem;font-weight:700;padding:7px 10px;border:2px solid var(--navy);width:100%;}
.grade-score-row{display:flex;align-items:center;gap:.5rem;}
.grade-score-row label{font-family:var(--font-display);font-size:.75rem;letter-spacing:1px;color:var(--navy);white-space:nowrap;}
.grade-badge{font-family:var(--font-display);font-size:1.8rem;letter-spacing:2px;color:#2e7d32;}

/* Responsive */
@media(max-width:900px){.asgn-page-grid{grid-template-columns:1fr;}.grade-panel{position:static;}}
@media(max-width:680px){.asgn-card summary{flex-wrap:wrap;gap:.5rem;}.watch-panel-body{padding:.9rem 1rem;}}

/* ══════════════════════════════════════════════
   MOBILE RESPONSIVE — Portal & Tutor Dashboard
   ══════════════════════════════════════════════ */

/* ── Hamburger button ── */
.portal-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: .5rem;
  flex-shrink: 0;
}
.portal-hamburger span {
  display: block;
  width: 24px; height: 3px;
  background: var(--yellow);
  transition: transform .25s, opacity .25s;
  transform-origin: center;
}
/* Animated X when open */
.portal-hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.portal-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.portal-hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── Backdrop ── */
.portal-nav-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 98;
}
.portal-nav-backdrop.open { display: block; }

/* ── Mobile footer inside nav ── */
.portal-nav-mobile-foot { display: none; }

/* ── Desktop-only elements ── */
.portal-desktop-only { /* visible by default */ }

@media (max-width: 768px) {

  /* Header layout */
  .portal-header {
    padding: 0 1rem;
    height: 60px;
    position: sticky; top: 0; z-index: 100;
  }
  .portal-header-sub { display: none; }
  .portal-whoami-name { display: none; }
  .portal-whoami { gap: .2rem; }
  .tutor-track-chip { font-size: .55rem; padding: 1px 5px; }
  .portal-desktop-only { display: none !important; }
  .portal-hamburger { display: flex; }

  /* Nav drawer — slides in from top */
  .portal-nav {
    position: fixed;
    top: 60px; left: 0; right: 0;
    background: var(--navy);
    border-bottom: 4px solid var(--orange);
    flex-direction: column;
    gap: 0;
    padding: .5rem 0 1rem;
    z-index: 99;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .portal-nav.open {
    max-height: 100vh;
    overflow-y: auto;
  }
  .portal-nav a {
    padding: .85rem 1.5rem;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
    font-size: .95rem;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    gap: .6rem;
  }
  .portal-nav a:hover,
  .portal-nav a.active {
    background: rgba(255,107,0,.15);
    color: var(--orange);
    border-color: transparent;
  }
  .portal-nav a i { font-size: 1.1rem; }

  /* Mobile footer inside nav */
  .portal-nav-mobile-foot {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: .5rem;
    border-top: 2px solid rgba(255,255,255,.1);
    padding-top: .5rem;
  }
  .portal-nav-mobile-foot a {
    padding: .75rem 1.5rem;
    font-size: .85rem;
    color: rgba(255,255,255,.4);
    text-decoration: none;
    font-family: var(--font-display);
    letter-spacing: 1px;
    display: flex; align-items: center; gap: .5rem;
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: color .15s;
  }
  .portal-nav-mobile-foot a:hover { color: rgba(255,255,255,.8); }

  /* Main content padding */
  .portal-main { padding: 1.5rem 1rem; }

  /* Welcome section */
  .portal-welcome { margin-bottom: 1.25rem; gap: .5rem; }
  .portal-welcome-name { font-size: 1.8rem !important; }
  .portal-track-badge { font-size: .75rem; padding: 5px 14px; box-shadow: 3px 3px 0 var(--yellow); }

  /* Stats row */
  .portal-stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .65rem;
    margin-bottom: 1.25rem;
  }
  .portal-stat-card { padding: 1rem; }
  .portal-stat-num { font-size: 2rem; }

  /* Manage cards (lessons page) */
  .portal-manage-card { padding: .9rem 1rem; }
  .portal-manage-top { gap: .6rem; }
  .portal-manage-title { font-size: .88rem; }
  .portal-manage-actions {
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .6rem;
  }
  .portal-manage-actions .btn,
  .portal-manage-actions button,
  .portal-manage-actions form { font-size: .7rem !important; }

  /* Progress card */
  .portal-progress-card { padding: 1.1rem 1.25rem; }
  .portal-progress-top { flex-direction: column; gap: .35rem; }
  .portal-progress-pct { font-size: 2rem; }

  /* Lesson rows */
  .portal-lesson-row { padding: .75rem 1rem; gap: .75rem; }
  .portal-lesson-title { font-size: .88rem; }
  .portal-lesson-desc { font-size: .72rem; }

  /* Watch page */
  .portal-watch-main { flex-direction: column !important; }
  .portal-watch-video-col,
  .portal-watch-sidebar { width: 100% !important; max-width: 100% !important; }
  .portal-watch-sidebar { border-left: none !important; border-top: 4px solid var(--navy); }

  /* Discussion panels */
  .disc-post { padding: .85rem 1rem; }

  /* Assignment cards */
  .asgn-card summary { padding: .75rem 1rem; gap: .65rem; }
  .asgn-card-body { padding: 1rem; }
  .asgn-status-pill { font-size: .65rem; padding: 2px 8px; }

  /* Forms */
  .portal-form label { font-size: .72rem; }
  .portal-form input,
  .portal-form textarea,
  .portal-form select { font-size: .88rem; padding: 8px 10px; }

  /* Students table */
  .portal-students-table { font-size: .78rem; }
  .portal-students-table th,
  .portal-students-table td { padding: .5rem .6rem; }

  /* Section title */
  .portal-section-title { font-size: 1.1rem; margin: 1.5rem 0 .75rem; }

  /* Notice */
  .portal-notice { font-size: .85rem; padding: 1.1rem 1rem; }
}

@media (max-width: 480px) {
  .portal-stats-row { grid-template-columns: 1fr 1fr !important; }
  .portal-manage-actions { flex-direction: column; align-items: flex-start; }
  .portal-manage-actions form,
  .portal-manage-actions button { width: 100%; }
  .asgn-page-grid { grid-template-columns: 1fr; }
  .portal-header-logo img { width: 28px; height: 28px; }
  .portal-header-brand { font-size: .78rem; }
}