:root{--color-brand-maroon: #8A100B;--color-bg-taupe: #736357;--color-action-link: #0055A2;--color-action-hover: #003d73;--color-bg-app: #D0CDC7;--color-surface: #E3E0DA;--color-surface-alt: #D9D6D0;--color-border: #BDBAB3;--color-text-main: #333333;--color-text-inverse: #FFFFFF;--color-text-muted: #666666}#root{margin:0;padding:0;height:100%;width:100%;background-color:var(--color-bg-app);color:var(--color-text-main);font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:#b0ada6;border-radius:10px;border:2px solid var(--color-surface)}::-webkit-scrollbar-thumb:hover{background-color:#9a978f}.dashboard-container{display:grid;grid-template-columns:3fr 2fr 1.5fr;gap:20px;padding:20px;height:100%;box-sizing:border-box}.panel{background-color:var(--color-surface);border-radius:4px;padding:20px;box-shadow:0 1px 3px #0000001a;border:1px solid var(--color-border);display:flex;flex-direction:column;position:relative;min-height:0;overflow:hidden}h2{background-color:var(--color-brand-maroon);color:var(--color-text-inverse);margin:-20px -20px 20px;padding:12px 20px;font-size:16px;font-weight:500;border-bottom:none;border-radius:4px 4px 0 0}.plan-panel h2{background-color:var(--color-brand-maroon)}.search-bar{width:100%;padding:10px 12px;border-radius:4px;border:1px solid var(--color-border);background-color:var(--color-surface);color:var(--color-text-main);font-size:14px;margin-bottom:10px;box-sizing:border-box}.search-bar::placeholder{color:#999}.search-row{display:flex;gap:10px;margin-bottom:15px}.search-row .search-bar{margin-bottom:0;flex-grow:1}.filter-toggle-btn{background-color:var(--color-surface-alt);color:var(--color-text-main);border:1px solid var(--color-border);padding:0 15px;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;transition:all .2s;display:flex;align-items:center;gap:6px}.filter-toggle-btn:hover,.filter-toggle-btn.active{background-color:var(--color-border)}.filter-panel{background-color:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:4px;padding:15px;margin-bottom:15px;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:20px}.filter-group{display:flex;flex-direction:column;gap:8px}.filter-group h4{margin:0;font-size:13px;color:var(--color-text-main);border-bottom:1px solid var(--color-border);padding-bottom:6px}.filter-options{display:flex;flex-direction:column;gap:6px;max-height:140px;overflow-y:auto;padding-right:5px}.filter-options::-webkit-scrollbar{width:4px}.filter-options::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}.filter-label{font-size:12px;color:var(--color-text-main);display:flex;align-items:flex-start;text-align:left;gap:6px;cursor:pointer;line-height:1.3}.filter-label input[type=checkbox]{accent-color:var(--color-action-link);cursor:pointer;margin:1px 0 0;flex-shrink:0}.results-count{font-size:12px;color:var(--color-text-muted);margin-top:0;margin-bottom:10px}.course-list{display:flex;flex-direction:column;gap:10px;flex-grow:1;min-height:0;overflow-y:auto;padding-right:8px}.course-card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:4px;padding:12px;display:flex;flex-direction:column;gap:6px;cursor:grab;transition:box-shadow .2s}.course-card:hover{box-shadow:0 2px 6px #0000000d}.course-card:active{cursor:grabbing;opacity:.8}.course-card-header{display:flex;justify-content:center;align-items:center;gap:10px}.course-id{font-weight:700;color:var(--color-brand-maroon);font-size:18px}.course-credits{font-size:11px;background-color:var(--color-bg-app);border:1px solid var(--color-border);color:var(--color-text-muted);font-weight:700;padding:2px 6px;border-radius:4px}.course-title{margin:0;font-size:14px;color:var(--color-text-main);text-align:center}.course-prereqs{margin:0;font-size:11px;color:var(--color-text-muted);text-align:center}.section-selector{margin-top:8px;display:flex;flex-direction:column;gap:4px}.section-selector select{width:100%;padding:6px;background-color:var(--color-surface);color:var(--color-text-main);border:1px solid var(--color-border);border-radius:4px;font-size:12px;cursor:pointer;outline:none}.planner-layout{display:flex;flex-direction:column;gap:20px;flex-grow:1;min-height:0;overflow-y:auto;padding-right:10px}.year-wrapper{display:flex;flex-direction:column}.year-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.custom-resizer{height:24px;display:flex;justify-content:center;align-items:center;cursor:ns-resize;opacity:.4;transition:opacity .2s;margin-bottom:5px}.custom-resizer:hover{opacity:1}.resizer-dash{width:50px;height:4px;background-color:var(--color-border);border-radius:4px}.semester-box{background-color:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:4px;padding:10px;height:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;overflow-y:auto}.semester-box::-webkit-scrollbar{width:4px}.semester-box::-webkit-scrollbar-track{background:transparent}.semester-box::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:10px}.semester-box h3{margin:0 0 5px;font-size:13px;color:var(--color-text-muted);border-bottom:none;text-transform:uppercase;letter-spacing:.5px;text-align:center}.empty-text{color:#aaa;font-size:12px;font-style:italic;text-align:center;margin:auto}.planned-course{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:4px;padding:8px;display:flex;justify-content:space-between;align-items:flex-start;font-size:13px;cursor:grab;box-shadow:0 1px 2px #00000008}.planned-course:active{cursor:grabbing;opacity:.6}.planned-course.has-manual{border-left:3px solid #d97706}.planned-course.has-error{border-left:3px solid #dc2626}.planned-course-header-left{display:flex;align-items:center;gap:6px}.course-warning-icon{font-size:14px;cursor:help;filter:drop-shadow(0px 1px 2px rgba(0,0,0,.2))}.planned-course-info{display:flex;flex-direction:column;align-items:center;gap:0;width:100%;overflow:hidden}.planned-course-header{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}.planned-course-header strong{color:var(--color-brand-maroon);font-size:16px}.planned-credits{font-size:10px;background-color:var(--color-bg-app);border:1px solid var(--color-border);color:var(--color-text-muted);font-weight:700;padding:2px 6px;border-radius:4px;line-height:1;display:inline-flex;align-items:center;height:fit-content}.planned-title{color:var(--color-text-main);font-size:12px;font-weight:500;text-align:center;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.planned-section{color:var(--color-text-muted);font-size:10px}.trash-panel{background-color:var(--color-surface-alt);border:2px dashed var(--color-border);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--color-text-muted);transition:all .2s ease}.trash-panel.active{background-color:#fef2f2;border:2px solid #dc2626;color:#dc2626;transform:scale(1.02)}.trash-panel h2{background:none;color:inherit;margin:0 0 5px;padding:0}.trash-icon{font-size:40px;margin-bottom:10px}.paused-audit-message p{color:var(--color-text-muted)!important}.pagination-controls{display:flex;justify-content:space-between;align-items:center;background-color:var(--color-surface-alt);padding:6px 10px;border-radius:4px;border:1px solid var(--color-border);margin-bottom:10px}.pagination-btn{background-color:var(--color-surface);color:var(--color-action-link);border:1px solid var(--color-border);padding:4px 10px;border-radius:4px;cursor:pointer;font-weight:500;font-size:12px;transition:all .2s}.pagination-btn:hover:not(:disabled){background-color:var(--color-bg-app)}.pagination-btn:disabled{color:var(--color-text-muted);opacity:.5;cursor:not-allowed}.page-jump{font-size:12px;color:var(--color-text-main);display:flex;align-items:center;gap:6px}.page-jump select{background-color:var(--color-surface);color:var(--color-text-main);border:1px solid var(--color-border);padding:2px 6px;border-radius:4px;outline:none;cursor:pointer;font-size:12px}.req-panel{display:flex;flex-direction:column}.audit-controls{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;background-color:var(--color-surface-alt);padding:12px;border-radius:4px;border:1px solid var(--color-border)}.audit-label{font-size:12px;font-weight:700;color:var(--color-text-main)}.audit-select{width:100%;padding:8px;background-color:var(--color-surface);color:var(--color-text-main);border:1px solid var(--color-border);border-radius:4px;font-size:13px;cursor:pointer;outline:none}.audit-select:disabled{opacity:.6;cursor:not-allowed}.audit-instructions{font-size:11px;color:var(--color-text-muted);text-align:center;font-style:italic;margin-bottom:10px}.audit-checklist{display:flex;flex-direction:column;gap:10px;overflow-y:auto;flex-grow:1;min-height:0;padding-right:8px}.audit-req-item{display:flex;align-items:flex-start;gap:12px;padding:12px;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:4px;cursor:pointer;transition:all .2s ease}.audit-req-item:hover{background-color:var(--color-surface-alt)}.req-checkbox{width:20px;height:20px;min-width:20px;flex-shrink:0;box-sizing:border-box;border:2px solid var(--color-border);border-radius:4px;display:flex;justify-content:center;align-items:center;font-weight:700;color:var(--color-surface);transition:all .2s}.req-text{display:flex;flex-direction:column;flex-grow:1;text-align:left;gap:4px}.req-title{font-size:13px;font-weight:700;color:var(--color-action-link)}.req-desc{font-size:11px;color:var(--color-text-muted)}.audit-req-item.completed{opacity:.5;background-color:transparent;border-color:transparent}.audit-req-item.completed .req-checkbox{background-color:var(--color-action-link);border-color:var(--color-action-link);color:#fff}.audit-req-item.completed .req-title,.audit-req-item.completed .req-desc{text-decoration:line-through;color:var(--color-text-muted)}.audit-add-row{display:flex;gap:8px}.audit-add-btn{background-color:var(--color-action-link);color:#fff;border:none;border-radius:4px;padding:0 12px;font-weight:700;cursor:pointer;transition:background-color .2s}.audit-add-btn:hover:not(:disabled){background-color:var(--color-action-hover)}.audit-add-btn:disabled{background-color:var(--color-border);color:var(--color-text-muted);cursor:not-allowed}.active-programs-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}.active-program-pill{background-color:var(--color-bg-app);border:1px solid var(--color-border);color:var(--color-text-main);font-size:11px;font-weight:700;padding:4px 8px;border-radius:12px;display:flex;align-items:center;gap:6px}.remove-program-btn{background:none;border:none;color:var(--color-text-muted);font-size:14px;font-weight:700;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}.remove-program-btn:hover{color:#dc2626}.audit-program-group{margin-bottom:15px;display:flex;flex-direction:column;gap:8px}.audit-program-header{margin:0;font-size:14px;color:var(--color-brand-maroon);border-bottom:1px solid var(--color-border);padding-bottom:4px}.searchable-select{position:relative;width:100%;flex-grow:1}.select-trigger{background-color:var(--color-surface);color:var(--color-text-main);border:1px solid var(--color-border);border-radius:4px;padding:8px 12px;font-size:13px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.searchable-select.disabled .select-trigger{opacity:.6;background-color:var(--color-surface-alt);cursor:not-allowed}.select-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.select-arrow{font-size:10px;color:var(--color-text-muted)}.select-menu{position:absolute;top:calc(100% + 4px);left:0;width:100%;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:4px;box-shadow:0 4px 12px #00000026;z-index:1000;display:flex;flex-direction:column}.select-search-box{margin:8px;padding:8px;border:1px solid var(--color-border);border-radius:4px;font-size:12px;background-color:var(--color-bg-app);color:var(--color-text-main);outline:none}.select-search-box:focus{border-color:var(--color-action-link)}.select-options-list{max-height:200px;overflow-y:auto;padding-bottom:4px}.select-option{padding:8px 12px;font-size:13px;cursor:pointer;color:var(--color-text-main);transition:background-color .1s}.select-option:hover{background-color:var(--color-surface-alt)}.select-option.selected{font-weight:700;color:var(--color-action-link);background-color:var(--color-surface-alt)}.no-results{padding:8px 12px;font-size:12px;color:var(--color-text-muted);font-style:italic;text-align:center}.filter-inline-search{width:100%;padding:6px 8px;margin-bottom:8px;border:1px solid var(--color-border);border-radius:4px;background-color:var(--color-surface);color:var(--color-text-main);font-size:12px;box-sizing:border-box;outline:none}.filter-inline-search:focus{border-color:var(--color-action-link)}.panel-header-row{display:flex;justify-content:space-between;align-items:center;background-color:var(--color-brand-maroon);margin:-20px -20px 20px;padding:10px 20px;border-radius:4px 4px 0 0;color:var(--color-text-inverse);box-sizing:border-box}.panel-header-row h2{margin:0!important;background:none!important;padding:0!important;font-size:16px;font-weight:500;color:inherit}.audit-toggle-row{display:flex;align-items:center}.toggle-controls-btn{background-color:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-muted);font-size:11px;font-weight:700;padding:4px 8px;border-radius:4px;cursor:pointer;transition:all .2s ease;white-space:nowrap}.toggle-controls-btn:hover{background-color:var(--color-surface-alt);color:var(--color-text-main)}.course-card.expanded{background-color:var(--color-surface-alt);border-color:var(--color-text-muted)}.course-card-header{display:flex;justify-content:space-between;align-items:center;width:100%;position:relative}.course-header-center{position:absolute;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px}.course-id{font-weight:700;font-size:14px;color:var(--color-brand-maroon)}.course-credits-box{background-color:var(--color-surface-alt);border:1px solid var(--color-border);padding:2px 6px;border-radius:4px;font-size:10px;font-weight:700;color:var(--color-text-muted)}.header-spacer{width:24px}.course-expand-btn{background:none;border:1px solid var(--color-border);color:var(--color-text-muted);font-size:10px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .2s ease;z-index:2}.course-expand-btn:hover{background-color:var(--color-border);color:var(--color-text-main)}.course-card-details{margin-top:12px;padding-top:12px;border-top:1px dashed var(--color-border);font-size:12px;color:var(--color-text-main);display:flex;flex-direction:column;gap:6px;cursor:text;text-align:left}.detail-row{line-height:1.4;text-align:left}.detail-intro{margin-top:6px;padding:10px;background-color:#fff6;border-radius:4px;border-left:3px solid var(--color-brand-maroon);text-align:left;font-size:14px}.detail-label{font-weight:700;color:var(--color-brand-maroon);margin-right:4px}.plan-controls{display:flex;align-items:center;gap:8px}.plan-dropdown{padding:4px 8px;max-width:120px;margin-bottom:0;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:4px;color:var(--color-text-main);font-size:12px;outline:none}.plan-delete-btn{width:24px;height:24px;display:flex;justify-content:center;align-items:center;background-color:#8a100b1a;color:var(--color-brand-maroon);border:1px solid rgba(138,16,11,.3);border-radius:4px;cursor:pointer;font-weight:700;font-size:16px;transition:all .2s ease}.plan-delete-btn:hover{background-color:var(--color-brand-maroon);color:#fff}.add-plan-inline{display:flex;align-items:center;gap:6px}.plan-cancel-btn{background-color:transparent;border-color:transparent;color:var(--color-brand-maroon)}.plan-cancel-btn:hover{background-color:#8a100b1a;border-color:#8a100b33}.planned-course.has-conflict{border:1px solid #dc2626!important;background-color:#dc26260d!important;animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}.calendar-view-container{display:flex;flex-direction:column;height:100%;overflow:hidden;background-color:var(--color-surface);border-radius:4px}.calendar-header-row{display:flex;background-color:var(--color-surface-alt);border-bottom:2px solid var(--color-border);font-weight:600;font-size:13px;text-align:center}.calendar-corner{width:60px;flex-shrink:0;border-right:1px solid var(--color-border)}.calendar-day-header{flex:1;padding:8px 0;border-right:1px solid var(--color-border);color:var(--color-text-main)}.calendar-day-header:last-child{border-right:none}.calendar-body-scroll{flex-grow:1;overflow-y:auto;position:relative;display:flex}.calendar-time-col{width:60px;flex-shrink:0;border-right:1px solid var(--color-border);background-color:var(--color-surface-alt);display:flex;flex-direction:column}.calendar-time-cell{height:50px;font-size:11px;color:var(--color-text-muted);text-align:right;padding-right:6px;line-height:20px;border-bottom:1px dashed var(--color-border);box-sizing:border-box}.calendar-grid-overlay{flex-grow:1;display:flex;position:relative;height:600px}.calendar-day-col{flex:1;position:relative;border-right:1px solid var(--color-border);height:100%;box-sizing:border-box}.calendar-day-col:last-child{border-right:none}.calendar-hour-grid-cell{height:50px;border-bottom:1px dashed var(--color-border);box-sizing:border-box}.calendar-course-block{position:absolute;left:4px;right:4px;padding:6px;border-radius:4px;background-color:#8a100b1f;border-left:4px solid var(--color-brand-maroon);font-size:11px;line-height:1.3;overflow:hidden;box-shadow:0 1px 3px #00000014;transition:all .2s ease;z-index:10}.calendar-course-block.has-conflict{background-color:#dc262626;border-left-color:#dc2626;animation:pulse-border 2s infinite}.calendar-course-block-id{font-weight:700;color:var(--color-brand-maroon);display:flex;justify-content:space-between}.calendar-course-block.has-conflict .calendar-course-block-id{color:#dc2626}.calendar-course-block-title{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--color-text-main)}.calendar-course-block-room{color:var(--color-text-muted);font-size:10px;margin-top:2px}.calendar-unscheduled-list{background-color:var(--color-surface-alt);border-top:2px solid var(--color-border);padding:10px 20px;max-height:120px;overflow-y:auto}.calendar-unscheduled-list h4{margin:0 0 6px;font-size:12px;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.calendar-unscheduled-items{display:flex;flex-wrap:wrap;gap:8px}.calendar-unscheduled-pill{background-color:var(--color-surface);border:1px solid var(--color-border);padding:4px 10px;border-radius:4px;font-size:11px;display:flex;align-items:center;gap:6px;color:var(--color-text-main)}.calendar-unscheduled-pill.has-conflict{border-color:#dc2626;background-color:#dc26260d}@keyframes pulse-border{0%{box-shadow:0 0 #dc262666}70%{box-shadow:0 0 0 4px #dc262600}to{box-shadow:0 0 #dc262600}}.tutorial-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000000a6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:10000;animation:fadeIn .25s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.tutorial-modal-card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;width:100%;max-width:460px;padding:30px;box-shadow:0 10px 30px #00000040;position:relative;text-align:center;box-sizing:border-box;animation:slideUp .3s cubic-bezier(.16,1,.3,1)}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.tutorial-close-x{position:absolute;top:15px;right:18px;background:none;border:none;font-size:24px;color:var(--color-text-muted);cursor:pointer;line-height:1;transition:color .2s}.tutorial-close-x:hover{color:var(--color-brand-maroon)}.tutorial-emoji-hero{font-size:64px;margin-bottom:20px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));animation:pulse-emoji 2s infinite ease-in-out}@keyframes pulse-emoji{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.tutorial-step-title{font-size:20px;font-weight:700;color:var(--color-brand-maroon);margin:0 0 12px;text-align:center}.tutorial-step-desc{font-size:13px;color:var(--color-text-main);line-height:1.5;margin:0 0 24px;min-height:60px}.tutorial-dots-row{display:flex;justify-content:center;gap:8px;margin-bottom:24px}.tutorial-dot{width:8px;height:8px;border-radius:50%;background-color:var(--color-border);cursor:pointer;transition:all .2s}.tutorial-dot.active{background-color:var(--color-brand-maroon);transform:scale(1.3)}.tutorial-buttons-row{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed var(--color-border);padding-top:18px}.tutorial-nav-buttons{display:flex;gap:8px}.tutorial-btn-primary{background-color:var(--color-brand-maroon);color:#fff;border:none;font-size:12px;font-weight:700;padding:6px 14px;border-radius:4px;cursor:pointer;transition:background-color .2s}.tutorial-btn-primary:hover{background-color:#6e0c08}.tutorial-btn-secondary{background-color:transparent;color:var(--color-text-muted);border:1px solid var(--color-border);font-size:12px;font-weight:700;padding:5px 12px;border-radius:4px;cursor:pointer;transition:all .2s}.tutorial-btn-secondary:hover{background-color:var(--color-surface-alt);color:var(--color-text-main)}.tutorial-spotlight{position:relative;z-index:10001!important;box-shadow:0 0 25px 8px #8a100b73!important;border:1px solid var(--color-brand-maroon)!important;transform:scale(1.01);transition:all .3s ease;pointer-events:none}

.planner-page-context {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.75rem 1.25rem 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-brand-maroon);
    border-radius: 0.45rem;
    background: var(--color-surface);
    box-shadow: 0 1px 3px rgba(51, 51, 51, 0.08);
}

.planner-page-context-copy {
    min-width: 0;
}

.planner-page-context h1 {
    margin: 0;
    color: var(--color-brand-maroon);
    font-size: 1.15rem;
    font-weight: 750;
    line-height: 1.2;
}

.planner-page-context p {
    margin: 0.25rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

.planner-data-meta {
    display: grid;
    min-width: min(23rem, 42vw);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
}

.planner-data-meta div {
    min-width: 0;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 0.35rem;
    background: var(--color-surface-alt);
}

.planner-data-meta dt {
    color: var(--color-text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.planner-data-meta dd {
    overflow: hidden;
    margin: 0.12rem 0 0;
    color: var(--color-text-main);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planner-page-footer {
    flex: 0 0 auto;
    margin-top: 0 !important;
    padding-block: 0.65rem;
}

.planner-page-footer p {
    margin: 0;
}

body{height:100vh;overflow:hidden}
main{overflow:hidden}

.mobile-planner-toolbar{display:none}

/* Mobile layout: stack the three work areas and keep every control touch-friendly. */
@media (max-width: 767.98px) {

    html {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body {
        overflow: visible !important;
    }

    body {
        display: flex !important;
        flex-direction: column !important;
    }

    .mobile-planner-toolbar {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr 1fr 1.25fr;
        gap: 0.4rem;
        position: sticky;
        top: 4rem;
        z-index: 150;
        width: 100%;
        margin-top: 4rem;
        padding: 0.5rem 0.6rem;
        background: rgba(227, 224, 218, 0.96);
        border-bottom: 1px solid var(--color-border);
        box-shadow: 0 0.35rem 1rem rgba(51, 51, 51, 0.14);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .mobile-planner-shortcut {
        display: flex;
        min-width: 0;
        min-height: 3.15rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        padding: 0.35rem 0.2rem;
        border: 1px solid var(--color-border);
        border-radius: 0.55rem;
        background: var(--color-surface);
        color: var(--color-text-main);
        font-size: 0.7rem;
        font-weight: 700;
        line-height: 1.1;
        text-align: center;
        box-shadow: 0 1px 3px rgba(51, 51, 51, 0.08);
        touch-action: manipulation;
    }

    .mobile-planner-shortcut span[aria-hidden="true"] {
        font-size: 1rem;
        line-height: 1;
    }

    .mobile-planner-guide {
        border-color: var(--color-brand-maroon);
        background: var(--color-brand-maroon);
        color: var(--color-text-inverse);
    }

    .plan-panel,
    .pool-panel,
    .req-panel {
        scroll-margin-top: 8.25rem;
    }
    html,
    body {
        width: 100%;
        min-height: 100dvh;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    main {
        flex: none !important;
        min-height: calc(100dvh - 4rem);
        height: auto !important;
        overflow: visible !important;
        padding-top: 0.5rem !important;
    }

    .planner-page-context {
        align-items: stretch;
        flex-direction: column;
        gap: 0.6rem;
        margin: 0.45rem 0.75rem 0;
        padding: 0.7rem;
    }

    .planner-page-context h1 {
        font-size: 1.05rem;
    }

    .planner-page-context p {
        font-size: 0.78rem;
    }

    .planner-data-meta {
        width: 100%;
        min-width: 0;
    }

    .planner-data-meta dt {
        font-size: 0.68rem;
    }

    .planner-data-meta dd {
        font-size: 0.78rem;
    }

    #root {
        flex: none !important;
        min-height: calc(100dvh - 4rem);
        height: auto;
        overflow: visible;
    }

    .dashboard-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        min-height: 0;
        gap: 0.85rem;
        padding: 0.75rem;
        overflow: visible;
    }

    .panel {
        width: 100%;
        min-height: 30rem;
        max-height: none;
        padding: 1rem;
        overflow: hidden;
    }

    h2,
    .panel-header-row {
        margin-left: -1rem;
        margin-right: -1rem;
    }

    h2 {
        margin-top: -1rem;
        padding: 0.75rem 1rem;
    }

    .panel-header-row {
        margin-top: -1rem;
        padding: 0.65rem 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .search-row,
    .audit-add-row,
    .tutorial-buttons-row {
        flex-wrap: wrap;
    }

    .search-row {
        flex-direction: column;
    }

    .filter-toggle-btn,
    .pagination-btn,
    .toggle-controls-btn,
    .tutorial-btn-primary,
    .tutorial-btn-secondary,
    .audit-add-btn,
    .select-trigger,
    .plan-dropdown {
        min-height: 2.75rem;
    }

    .filter-toggle-btn {
        justify-content: center;
        padding: 0.65rem 1rem;
    }

    .filter-panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .course-list,
    .planner-layout,
    .audit-checklist {
        max-height: 62dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .year-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
    }

    .semester-box {
        min-height: 11rem;
    }

    .trash-panel {
        min-height: 10rem;
    }

    .plan-controls,
    .add-plan-inline {
        width: 100%;
        flex-wrap: wrap;
    }

    .plan-dropdown {
        flex: 1 1 9rem;
        max-width: none;
    }

    .calendar-view-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .calendar-header-row,
    .calendar-body-scroll {
        min-width: 38rem;
    }

    .calendar-unscheduled-list {
        min-width: 38rem;
    }

    .tutorial-overlay {
        align-items: flex-start;
        padding: 1rem;
        overflow-y: auto;
    }

    .tutorial-modal-card {
        max-height: calc(100dvh - 2rem);
        margin: 0;
        padding: 1.5rem 1.15rem;
        overflow-y: auto;
    }

    .tutorial-emoji-hero {
        font-size: 3rem;
        margin-bottom: 0.75rem;
    }
    html {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body {
        overflow: visible !important;
    }
}

/* The React tutorial overlay and card are siblings, so the card must own its viewport position. */
html:has(.tutorial-overlay),
body:has(.tutorial-overlay) {
    overflow: hidden !important;
    overscroll-behavior: none;
}

.tutorial-modal-card {
    position: fixed;
    inset: 1rem;
    z-index: 10005;
    height: fit-content;
    max-height: calc(100dvh - 2rem);
    margin: auto;
    overflow-y: auto;
}


/* Mobile interaction pass: persistent tutorial controls and larger touch targets. */
@media (max-width: 767.98px) {
    .tutorial-overlay {
        inset: 0;
        width: 100%;
        height: 100dvh;
        padding: 0;
        overscroll-behavior: contain;
    }

    .tutorial-modal-card {
        position: fixed;
        top: max(0.5rem, env(safe-area-inset-top));
        right: max(0.5rem, env(safe-area-inset-right));
        bottom: auto;
        left: max(0.5rem, env(safe-area-inset-left));
        display: flex;
        width: auto;
        max-width: none;
        max-height: calc(100dvh - max(1rem, env(safe-area-inset-top)) - max(1rem, env(safe-area-inset-bottom)));
        margin: 0;
        flex-direction: column;
        padding: 0 1.15rem 1.25rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .tutorial-buttons-row {
        position: sticky;
        top: 0;
        order: -1;
        z-index: 6;
        min-height: 3.75rem;
        margin: 0 -1.15rem 1rem;
        padding: 0.5rem 3.45rem 0.5rem 0.75rem;
        flex-wrap: nowrap;
        gap: 0.5rem;
        border-top: 0;
        border-bottom: 1px solid var(--color-border);
        background: rgba(227, 224, 218, 0.98);
        box-shadow: 0 0.3rem 0.8rem rgba(51, 51, 51, 0.12);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .tutorial-nav-buttons {
        margin-left: auto;
        gap: 0.5rem;
    }

    .tutorial-btn-primary,
    .tutorial-btn-secondary {
        min-width: 4.5rem;
        min-height: 2.75rem;
        padding: 0.65rem 0.9rem;
        font-size: 0.875rem;
        line-height: 1.1;
        touch-action: manipulation;
    }

    .tutorial-close-x {
        position: fixed;
        top: calc(max(0.5rem, env(safe-area-inset-top)) + 0.45rem);
        right: calc(max(0.5rem, env(safe-area-inset-right)) + 0.45rem);
        z-index: 10008;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        border-radius: 50%;
        background: var(--color-surface);
        touch-action: manipulation;
    }

    .tutorial-emoji-hero {
        margin-top: 0.25rem;
    }

    .tutorial-step-desc {
        min-height: 0;
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .tutorial-dots-row {
        gap: 0;
        margin-bottom: 0.5rem;
    }

    .tutorial-dot {
        position: relative;
        width: 2.25rem;
        height: 2.25rem;
        flex: 0 0 2.25rem;
        background: transparent;
        transform: none;
        touch-action: manipulation;
    }

    .tutorial-dot::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0.55rem;
        height: 0.55rem;
        border-radius: 50%;
        background: var(--color-border);
        transform: translate(-50%, -50%);
        transition: transform 0.2s, background-color 0.2s;
    }

    .tutorial-dot.active {
        background: transparent;
        transform: none;
    }

    .tutorial-dot.active::after {
        background: var(--color-brand-maroon);
        transform: translate(-50%, -50%) scale(1.35);
    }

    .tab-btn,
    .select-option,
    .select-search-box,
    .filter-inline-search,
    .search-bar,
    .view-selector-tabs button,
    .planner-actions button,
    .course-expand-btn,
    .remove-program-btn,
    .section-selector select,
    .page-jump select,
    .audit-select,
    .calendar-semester-selector-row select {
        min-width: 2.75rem;
        min-height: 2.75rem;
        font-size: 0.875rem;
        touch-action: manipulation;
    }

    .select-option {
        display: flex;
        align-items: center;
    }

    .calendar-view-container {
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
    }

    .calendar-corner,
    .calendar-time-col {
        position: sticky;
        left: 0;
        z-index: 25;
        background: var(--color-surface-alt);
    }

    .filter-label {
        min-height: 2.75rem;
        align-items: center;
        gap: 0.7rem;
        padding: 0.5rem 0.25rem;
        font-size: 0.875rem;
        line-height: 1.3;
        touch-action: manipulation;
    }

    .filter-label input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
        margin: 0;
    }

    .filter-options {
        max-height: 18rem;
        gap: 0.15rem;
    }

    .pagination-controls {
        display: grid;
        grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
        gap: 0.35rem;
        padding: 0.35rem;
    }

    .page-jump {
        min-height: 2.75rem;
        justify-content: center;
        margin: 0;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    .pagination-btn {
        width: 2.75rem;
        min-width: 2.75rem;
        overflow: hidden;
        padding: 0;
        font-size: 0;
    }

    .pagination-btn:first-child::before,
    .pagination-btn:last-child::before {
        font-size: 1.1rem;
        line-height: 1;
    }

    .pagination-btn:first-child::before {
        content: "←";
    }

    .pagination-btn:last-child::before {
        content: "→";
    }

    .page-jump select {
        max-width: 4.5rem;
    }
}

/* BC official academic shortcuts */
.planner-official-shortcuts {
    flex: 0 0 auto;
    margin: 0.75rem 1.25rem 0;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 0.65rem;
    background: var(--color-surface);
    box-shadow: 0 1px 3px rgba(51, 51, 51, 0.08);
}

.planner-official-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
    color: var(--color-text-muted);
    font-size: 0.72rem;
}

.planner-official-heading strong {
    color: var(--color-brand-maroon);
    font-size: 0.88rem;
}

.planner-official-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
}

.planner-official-link {
    display: flex;
    min-width: 0;
    min-height: 3.45rem;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 0.55rem;
    background: var(--color-surface-alt);
    color: var(--color-text-main);
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    touch-action: manipulation;
}

.planner-official-link:hover {
    border-color: var(--color-brand-maroon);
    box-shadow: 0 0.2rem 0.55rem rgba(138, 16, 11, 0.12);
    transform: translateY(-1px);
}

.planner-official-link:focus-visible {
    outline: 3px solid rgba(0, 85, 162, 0.32);
    outline-offset: 2px;
}

.planner-official-link-primary {
    border-color: var(--color-brand-maroon);
    background: var(--color-brand-maroon);
    color: var(--color-text-inverse);
}

.planner-official-link-primary:hover {
    color: var(--color-text-inverse);
}

.planner-official-icon {
    flex: 0 0 auto;
    font-size: 1.2rem;
    line-height: 1;
}

.planner-official-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.15rem;
}

.planner-official-copy strong,
.planner-official-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
}

.planner-official-copy strong {
    font-size: 0.78rem;
    line-height: 1.2;
}

.planner-official-copy small {
    color: var(--color-text-muted);
    font-size: 0.64rem;
    line-height: 1.25;
}

.planner-official-link-primary .planner-official-copy small {
    color: rgba(255, 255, 255, 0.82);
}

.planner-official-arrow {
    flex: 0 0 auto;
    font-weight: 800;
}

.planner-official-shortcuts + #root {
    height: auto;
    min-height: 0;
    flex: 1 1 0;
}

/* Tablet layout follows the site's 1280px navigation breakpoint. Keeping the
   work areas in one column prevents the three desktop panels from being
   clipped at common iPad widths. */
@media (min-width: 768px) and (max-width: 1279.98px) {
    html {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body {
        overflow: visible !important;
    }

    html,
    body {
        width: 100%;
        min-height: 100dvh;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    main {
        flex: none !important;
        height: auto !important;
        min-height: calc(100dvh - 4rem);
        overflow: visible !important;
    }

    #root {
        flex: none !important;
        width: 100%;
        height: auto;
        min-height: 0;
    }

    .dashboard-container {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        min-height: 0;
    }

    .panel {
        min-width: 0;
        height: 48rem;
        min-height: 34rem;
        overflow: hidden;
    }

    .panel-header-row,
    .plan-controls,
    .planner-toolbar,
    .planner-actions,
    .add-plan-inline {
        flex-wrap: wrap;
    }

    .panel-header-row {
        gap: 0.65rem;
    }

    .plan-controls {
        justify-content: flex-end;
    }

    .planner-layout,
    .course-list,
    .audit-checklist {
        min-height: 0;
        overflow-y: auto;
    }

    .calendar-view-container {
        min-width: 42rem;
    }

    .planner-layout {
        overflow-x: auto;
    }

    html {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body {
        overflow: visible !important;
    }
}

@media (max-width: 767.98px) {
    .planner-official-shortcuts {
        margin: 0.45rem 0.75rem 0;
        padding: 0.6rem;
    }

    .planner-official-heading {
        margin-bottom: 0.45rem;
        font-size: 0.66rem;
    }

    .planner-official-heading > span:last-child {
        display: none;
    }

    .planner-official-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .planner-official-link {
        min-height: 3.55rem;
        gap: 0.45rem;
        padding: 0.5rem 0.55rem;
    }

    .planner-official-copy strong {
        font-size: 0.74rem;
    }

    .planner-official-copy small {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
        text-overflow: ellipsis;
    }
}