/* Course modes: generic setup and personal focus room */

.course-mode-sheet{width:min(720px,calc(100vw - 20px));max-height:min(88vh,840px);overflow:auto;padding-bottom:max(20px,env(safe-area-inset-bottom))}
.course-mode-sheet>.entity-sheet-head{position:sticky;top:0;z-index:4;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(18px);padding-bottom:14px}
.course-mode-sheet>.entity-sheet-head small{display:block;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.course-type-grid{display:grid;gap:10px;padding:4px 2px 8px}
.course-type-card{display:grid;grid-template-columns:50px minmax(0,1fr) 26px;gap:14px;align-items:center;text-align:start;width:100%;border:1px solid color-mix(in srgb,var(--border) 88%,transparent);background:var(--surface);border-radius:22px;padding:16px;cursor:pointer;color:var(--text);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.course-type-card:hover,.course-type-card:focus-visible{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 48%,var(--border));box-shadow:0 16px 40px rgba(15,23,42,.10);outline:0}
.course-type-card>span{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));font:800 20px/1 Manrope,sans-serif}
.course-type-card.personal>span{background:color-mix(in srgb,#8b5cf6 14%,var(--surface))}
.course-type-card.teaching>span{background:color-mix(in srgb,#0f766e 14%,var(--surface))}
.course-type-card strong{display:block;font:800 16px/1.2 Manrope,sans-serif}
.course-type-card p{margin:5px 0 0;color:var(--muted);line-height:1.45;font-size:13px}
.course-type-card>b{font-size:22px;color:var(--muted)}
.course-private-lock{border:1px solid var(--border);background:var(--surface-2);border-radius:14px;padding:12px 14px;color:var(--muted);font-size:12px;line-height:1.45}

.personal-focus-page{width:min(1180px,calc(100% - 28px));margin:0 auto;padding:20px 0 130px}
.personal-focus-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:28px;border-radius:30px;border:1px solid var(--border);background:linear-gradient(145deg,color-mix(in srgb,#7c3aed 11%,var(--surface)),var(--surface));box-shadow:0 18px 48px rgba(15,23,42,.07)}
.personal-focus-hero small,.personal-focus-timer small,.personal-focus-card small{color:var(--muted);font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.1em}
.personal-focus-hero h1{margin:6px 0 5px;font:900 clamp(34px,5vw,52px)/1 Manrope,sans-serif;letter-spacing:-.045em}
.personal-focus-hero p{margin:0;color:var(--muted);line-height:1.5}
.personal-focus-stat{display:grid;justify-items:end;gap:2px}.personal-focus-stat strong{font:900 42px/1 Manrope,sans-serif}.personal-focus-stat span{color:var(--muted);font-size:12px}
.personal-focus-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:14px;margin-top:14px}
.personal-focus-timer,.personal-focus-card{border:1px solid var(--border);border-radius:26px;background:var(--surface);padding:22px}
.personal-focus-card.wide{grid-column:1/-1}
#personal-focus-clock{font:900 clamp(48px,8vw,72px)/1 Manrope,sans-serif;letter-spacing:-.06em;margin:12px 0 18px}
.personal-focus-timer>div:nth-of-type(2){display:flex;gap:8px}.personal-focus-timer button,.personal-focus-card button{border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:13px;padding:10px 14px;font-weight:850;cursor:pointer}
.personal-focus-timer label{display:grid;gap:6px;margin-top:18px;color:var(--muted);font-size:12px}.personal-focus-timer input,.personal-focus-card textarea{border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:14px;padding:12px}
.personal-focus-card h2{margin:6px 0 12px}.personal-focus-card textarea{width:100%;resize:vertical}.personal-focus-card button{margin-top:10px}

@media(max-width:720px){
  .course-mode-sheet{width:min(100%,calc(100vw - 8px))}
  .personal-focus-hero{align-items:flex-start;flex-direction:column}
  .personal-focus-stat{justify-items:start}
  .personal-focus-grid{grid-template-columns:1fr}
  .personal-focus-card.wide{grid-column:auto}
}