/* Page compositions. Foundation components and tokens live in style.css. */
.home-main,.workspace-main { padding-top:var(--space-5); }
.welcome { position:relative; isolation:isolate; display:flex; align-items:center; min-height:320px; border-bottom:1px solid var(--color-border); overflow:hidden; background:var(--hero-bg); border-radius:var(--radius-lg); }
.welcome-art { position:absolute; left:0; top:-14%; width:54%; height:135%; object-fit:cover; object-position:center top; mask-image:linear-gradient(to right,black 76%,transparent); }
.welcome-copy { position:relative; z-index:1; width:58%; padding:var(--space-6); margin-inline-end:auto; }
.welcome h1 { font-size:clamp(30px,3.3vw,48px); color:var(--color-heading); line-height:1.3; margin-block:var(--space-3); }
.welcome-sub { color:var(--color-muted); font-size:var(--text-lg); margin-bottom:var(--space-5); }
.semester-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4); }
.semester-tile { position:relative; display:flex; align-items:center; justify-content:space-between; min-height:154px; overflow:hidden; padding:var(--space-5); }
.semester-tile img { position:absolute; left:0; bottom:0; width:42%; height:100%; object-fit:contain; pointer-events:none; }
.semester-tile>div { position:relative; z-index:1; padding-left:var(--space-6); }
.semester-tile h3 { font-size:var(--text-lg); margin-block:var(--space-2) var(--space-1); }
.semester-no { font:var(--text-lg)/1.3 Georgia,serif; color:var(--color-secondary-ink); }
.semester-tile.is-current { background:var(--banner-bg); color:var(--color-on-petrol); border-color:transparent; }
.semester-tile.is-current .semester-no { color:var(--color-on-petrol-muted); }
.semester-tile.is-current .badge { background:var(--color-surface); color:var(--color-petrol-strong); margin-inline-start:var(--space-2); }
.semester-tile:hover { box-shadow:var(--shadow-md); }
.resume-card { display:flex; align-items:center; gap:var(--space-5); padding:var(--space-5); position:relative; overflow:hidden; }
.resume-card>img { width:22%; max-height:150px; object-fit:contain; }
.resume-copy { flex:1; min-width:0; }
.resume-copy h2 { font-size:var(--text-lg); margin-bottom:var(--space-3); }
.resume-copy h3 { font-family:Inter,var(--font-body); font-size:var(--text-md); }
.resume-copy p { color:var(--color-muted); margin-block:var(--space-2); }
.resume-copy .bar { max-width:400px; }
.latest-stack { display:grid; gap:var(--space-3); }
.latest-stack .latest-item { border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); }
.pdf-icon { display:grid; place-items:center; flex:none; background:var(--color-danger-soft); color:var(--color-danger); width:var(--control-h); height:var(--control-h); font-family:Inter,sans-serif; font-size:var(--text-xs); font-weight:700; border-radius:var(--radius-sm); }
.tool-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4); }
.tool-tile { display:flex; align-items:center; gap:var(--space-4); padding:var(--space-5); }
.tool-tile h3 { font-size:var(--text-base); }
.tool-tile p { color:var(--color-muted); font-size:var(--text-sm); margin-top:var(--space-1); }
.workspace-heading { position:relative; display:flex; align-items:center; justify-content:space-between; min-height:190px; margin-bottom:var(--space-5); border-bottom:1px solid var(--color-border); overflow:hidden; }
.workspace-heading h1 { font-size:var(--text-2xl); color:var(--color-heading); margin-block:var(--space-2); }
.workspace-heading p { color:var(--color-muted); }
.workspace-heading>div { position:relative; z-index:1; max-width:70%; }
.workspace-art { width:28%; height:190px; object-position:center 20%; object-fit:cover; opacity:.85; mask-image:linear-gradient(black 65%,transparent); }
.workspace-main { min-height:75vh; }
.workspace-toolbar { display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center; margin-block:var(--space-4); }
.workspace-toolbar .field { flex:1; min-width:180px; }
.workspace-toolbar select.field { flex:0 1 220px; }
.workspace-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:var(--space-5); align-items:start; }
.workspace-card { padding:var(--space-5); }
.workspace-card h2 { font-size:var(--text-lg); margin-bottom:var(--space-4); }
.subtle { color:var(--color-muted); font-size:var(--text-sm); }
.local-note { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-4); margin-top:var(--space-4); background:var(--color-secondary-soft); border-radius:var(--radius-md); color:var(--color-secondary-ink); font-size:var(--text-sm); }
.faculty-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4); }
.faculty-card { display:grid; gap:var(--space-3); padding:var(--space-5); }
.faculty-card .prof-avatar { width:var(--space-7); height:var(--space-7); }
.faculty-card h2 { font:600 var(--text-base)/1.4 Inter,sans-serif; }
.faculty-card a { display:block; color:var(--color-secondary-ink); font-size:var(--text-sm); padding-block:var(--space-1); }
.planner-header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-4); }
.planner-actions { display:flex; align-items:center; gap:var(--space-2); }
.week-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); min-height:280px; overflow:hidden; }
.day-column { min-width:0; padding:var(--space-3) var(--space-2); border-inline-end:1px solid var(--color-border); }
.day-column:last-child { border:0; }
.day-column.is-today { background:var(--color-secondary-soft); }
.day-label { font-size:var(--text-sm); color:var(--color-muted); text-align:center; margin-bottom:var(--space-4); }
.day-label strong { display:block; color:var(--color-heading); font-family:Inter,sans-serif; font-size:var(--text-lg); }
.session { padding:var(--space-3); margin-bottom:var(--space-2); background:var(--color-surface); border:1px solid var(--color-border); border-inline-start:3px solid var(--color-secondary); border-radius:var(--radius-sm); overflow-wrap:anywhere; }
.session.is-done { opacity:.6; }
.session.is-done strong { text-decoration:line-through; }
.session.is-exam { border-inline-start-color:var(--color-danger); }
.session strong { display:block; font-size:var(--text-sm); }
.session small { color:var(--color-muted); font-size:var(--text-xs); }
.session-tools { display:flex; gap:var(--space-1); margin-top:var(--space-2); flex-wrap:wrap; }
.session-tools button { display:grid; place-items:center; border:1px solid var(--color-border); border-radius:var(--radius-sm); min-width:var(--space-6); min-height:var(--space-6); background:var(--color-surface); color:var(--color-secondary-ink); }
.planner-extras { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); margin-top:var(--space-5); }
.focus-clock { direction:ltr; font:600 3rem/1.3 Inter,sans-serif; font-variant-numeric:tabular-nums; color:var(--color-heading); margin-block:var(--space-4); }
.focus-options { display:flex; gap:var(--space-2); flex-wrap:wrap; }
.task-form { display:flex; gap:var(--space-2); }
.task-list { display:grid; gap:var(--space-2); margin-top:var(--space-4); }
.task-row { display:flex; gap:var(--space-3); align-items:center; padding:var(--space-2); border-bottom:1px solid var(--color-border); }
.task-row label { flex:1; display:flex; align-items:center; gap:var(--space-2); overflow-wrap:anywhere; }
.task-row input:checked+span { text-decoration:line-through; color:var(--color-muted); }
.task-row button { border:0; background:transparent; color:var(--color-muted); min-width:var(--control-h); min-height:var(--control-h); }
.edit-dialog { width:min(560px,calc(100vw - var(--space-6))); padding:var(--space-5); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); color:var(--color-text); box-shadow:var(--shadow-md); max-height:90dvh; overflow:auto; }
.edit-dialog::backdrop { background:var(--nav-scrim); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.form-grid .wide { grid-column:1/-1; }
.form-label { display:grid; gap:var(--space-2); font-size:var(--text-sm); font-weight:500; }
.form-actions { display:flex; gap:var(--space-3); justify-content:flex-end; margin-top:var(--space-5); }
.question-hero { display:flex; align-items:center; gap:var(--space-5); }
.question-hero img { width:32%; height:180px; object-fit:contain; }
.question-hero h2 { font-family:Inter,var(--font-body); }
.question-body { max-width:880px; margin-inline:auto; }
.question-meta { display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); margin-bottom:var(--space-5); }
.quiz-statement { direction:ltr; text-align:left; font:600 var(--text-lg)/1.6 Inter,sans-serif; margin-block:var(--space-5); }
.quiz-options { display:grid; gap:var(--space-3); }
.quiz-option { display:flex; align-items:center; gap:var(--space-3); direction:ltr; text-align:left; width:100%; padding:var(--space-4); background:var(--color-surface); border:1px solid var(--color-border-strong); border-radius:var(--radius-md); line-height:1.5; }
.quiz-option b { display:grid; place-items:center; min-width:var(--space-6); height:var(--space-6); border-radius:var(--radius-sm); background:var(--color-surface-alt); }
.quiz-option:hover:not(:disabled) { border-color:var(--color-secondary); }
.quiz-option.is-correct { border-color:var(--color-success); background:var(--color-success-soft); opacity:1; }
.quiz-option.is-wrong { border-color:var(--color-danger); background:var(--color-danger-soft); opacity:1; }
.quiz-feedback { margin-top:var(--space-4); padding:var(--space-4); background:var(--color-secondary-soft); border-radius:var(--radius-md); }
.score-number { font:700 4rem/1.2 Inter,sans-serif; color:var(--color-secondary-ink); text-align:center; margin-block:var(--space-5); }
.results-list { display:grid; gap:var(--space-3); }
.result-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-4); }
.settings-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); padding-block:var(--space-4); border-bottom:1px solid var(--color-border); }
.settings-row>div { flex:1; min-width:0; }
.settings-row .field { width:180px; max-width:45%; }
.settings-row strong { display:block; }
.settings-row input[type=checkbox] { width:var(--space-5); height:var(--space-5); accent-color:var(--color-petrol); }
.help-questions { display:grid; gap:var(--space-3); }
.help-questions details { padding:var(--space-4) var(--space-5); }
.help-questions summary { cursor:pointer; font-weight:600; }
.help-questions p { color:var(--color-muted); margin-top:var(--space-3); }
.privacy-state { display:grid; justify-items:start; gap:var(--space-3); }
.privacy-state .tile { width:var(--space-8); height:var(--space-8); }
.btn-danger { border-color:var(--color-danger); color:var(--color-danger); background:var(--color-surface); }
html[dir=ltr] .welcome-art { left:auto; right:0; mask-image:linear-gradient(to left,black 76%,transparent); }
html[dir=ltr] .semester-tile img { left:auto; right:0; }
html[dir=ltr] .semester-tile>div { padding-left:0; padding-right:var(--space-6); }
@media(min-width:721px) and (max-width:1279px) { .faculty-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .tool-tile { padding:var(--space-4); gap:var(--space-2); } }
@media(max-width:1080px) { .welcome { min-height:300px; } .workspace-grid { grid-template-columns:1fr; } }
@media(max-width:720px) {
 .home-main,.workspace-main { padding-top:var(--space-3); }
 .welcome { min-height:230px; }
 .welcome-art { width:62%; left:-12%; top:-4%; height:110%; opacity:.75; }
 .welcome-copy { width:74%; padding:var(--space-4); }
 .welcome h1 { font-size:var(--text-2xl); }
 .welcome .eyebrow { max-width:90%; font-size:var(--text-xs); }
 .welcome-sub { font-size:var(--text-sm); margin-bottom:var(--space-4); }
 .welcome .btn { padding-inline:var(--space-3); font-size:var(--text-sm); }
 .section-head { margin-bottom:var(--space-3); }
 .section-head h2 { font-size:var(--text-lg); }
 .semester-tiles { grid-template-columns:1fr; gap:var(--space-3); }
 .semester-tile { min-height:118px; padding:var(--space-4) var(--space-5); }
 .semester-tile img { width:34%; }
 .semester-tile h3 { font-size:var(--text-lg); }
 .resume-card { gap:var(--space-3); padding:var(--space-4); flex-wrap:wrap; }
 .resume-card>img { width:25%; max-height:110px; }
 .resume-copy { min-width:60%; }
 .resume-copy h2 { font-size:var(--text-base); }
 .resume-copy h3 { font-size:var(--text-sm); }
 .resume-card>.btn { width:100%; }
 .tool-tiles { grid-template-columns:1fr; gap:var(--space-3); }
 .tool-tile { padding:var(--space-4); }
 .workspace-heading { min-height:145px; margin-bottom:var(--space-4); }
 .workspace-heading>div { max-width:78%; }
 .workspace-heading h1 { font-size:var(--text-xl); }
 .workspace-heading p { font-size:var(--text-sm); }
 .workspace-art { position:absolute; left:0; width:30%; height:150px; opacity:.45; }
 .workspace-toolbar { gap:var(--space-2); }
 .workspace-toolbar .field { min-width:0; flex-basis:100%; }
 .workspace-toolbar select.field { flex-basis:48%; }
 .faculty-grid { grid-template-columns:1fr; }
 .faculty-card { padding:var(--space-4); }
 .week-grid { grid-template-columns:1fr; min-height:0; }
 .day-column { display:grid; grid-template-columns:64px minmax(0,1fr); gap:var(--space-3); border-inline-end:0; border-bottom:1px solid var(--color-border); padding:var(--space-3); }
 .day-label { grid-row:1/20; margin:0; }
 .session { margin:0; }
 .planner-extras { grid-template-columns:1fr; }
 .planner-header { gap:var(--space-3); }
 .planner-header h2 { font-size:var(--text-base); }
 .planner-actions .btn { padding-inline:var(--space-3); }
 .workspace-card { padding:var(--space-4); }
 .quiz-statement { font-size:var(--text-md); }
 .settings-row { gap:var(--space-3); }
 .form-grid { grid-template-columns:1fr; }
 .question-hero { gap:var(--space-3); }
 .question-hero h2 { font-size:var(--text-md); }
 .question-hero img { height:130px; }
 html[dir=ltr] .welcome-art { left:auto; right:-12%; }
}