/* The month plan describes group pacing, never inferred student completion. */
.app-layout .course-months { color:#35261c; margin:0 0 36px; font:400 20px/1.6 Manrope,sans-serif; }
.app-layout .course-months-heading { display:flex; align-items:center; justify-content:space-between; gap:22px; margin-bottom:22px; }
.app-layout .course-months-heading h2 { margin:0; color:#35261c; font:750 28px/1.35 Manrope,sans-serif; }
.app-layout .course-months-heading p { margin:6px 0 0; color:#624735; font-size:19px; }
/* Illustrated month covers make the course browsable without a long programme. */
.app-layout .course-month-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.app-layout .course-month-card { display:flex; flex-direction:column; min-width:0; overflow:hidden; border-radius:16px; background:#fffaf4; color:#35261c; text-decoration:none; box-shadow:0 8px 20px -13px #684c34; }
.app-layout .course-month-card:hover { box-shadow:0 10px 25px -11px #684c34; }
.app-layout .course-month-card--current { outline:2px solid #80583c; outline-offset:0; }
.app-layout .course-month-cover { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:1.6; min-height:160px; overflow:hidden; }
.app-layout .course-month-cover--peach { background:#e8bfa1; }
.app-layout .course-month-cover--sand { background:#e5d9c6; }
.app-layout .course-month-cover--cream { background:#f0ddc9; }
.app-layout .course-month-cover img { display:block; width:88%; height:100%; min-height:0; max-height:240px; object-fit:contain; filter:drop-shadow(0 10px 8px rgb(62 39 23 / 12%)); }
.app-layout .course-month-object { display:block; width:80%; height:90%; background:url('assets/study-objects-3d.png') left center / 300% 100% no-repeat; filter:drop-shadow(0 10px 8px rgb(62 39 23 / 12%)); }
.app-layout .course-month-object--repeat { background-position:center; }
.app-layout .course-month-object--writing { background-position:right center; }
.app-layout .course-month-current-badge { position:absolute; top:16px; left:16px; right:auto; max-width:calc(100% - 32px); padding:6px 11px; border-radius:6px; background:#3c291e; color:#fff9ef; font-size:16px; font-weight:700; line-height:1.5; }
.app-layout .course-month-card-copy { display:flex; flex-direction:column; flex:1; padding:22px; }
.app-layout .course-month-card-title { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; }
.app-layout .course-month-card-title h3 { margin:0; color:#35261c; font:750 26px/1.35 Manrope,sans-serif; }
.app-layout .course-month-card-title>span { color:#624735; font-size:17px; white-space:nowrap; }
.app-layout .course-month-card-copy>p { margin:12px 0 0; color:#624735; font-size:19px; line-height:1.55; }
.app-layout .course-month-current-topic { display:block; margin-top:10px; color:#4b3323; font-size:17px; line-height:1.5; }
.app-layout .course-month-card-action { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; margin-top:auto; padding-top:22px; font-size:18px; font-weight:750; color:#4b3323; }
.app-layout .course-month-card-action .icon { flex:none; }
.app-layout .course-month-back { display:inline-flex; align-items:center; gap:10px; min-height:44px; margin-bottom:16px; font-size:18px; color:#624735; text-decoration:none; }
.app-layout .course-month-back:hover { text-decoration:underline; text-underline-offset:4px; }
.app-layout .course-month-back>.icon { transform:rotate(180deg); }
.app-layout .course-months--detail .course-months-heading h2>span { margin-left:7px; font-size:22px; font-weight:500; color:#624735; }
.app-layout .course-month-content>header { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:19px; }
.app-layout .course-month-content h3 { margin:0; font:750 25px/1.4 Manrope,sans-serif; color:#35261c; }
.app-layout .course-month-content h3 span { margin-left:6px; font-size:19px; font-weight:500; color:#624735; }
.app-layout .course-month-content>header p { margin:5px 0 0; color:#624735; font-size:18px; }
.app-layout .course-plan-dates { flex:none; color:#624735; font-size:16px; }
.app-layout .course-week-list { list-style:none; display:grid; gap:18px; padding:0; margin:0; }
.app-layout .course-week-list li { border:1px solid #d7c6b6; border-radius:16px; background:#fffdf9; overflow:hidden; box-shadow:0 5px 16px -12px #513520; }
.app-layout .course-week-list a { display:grid; grid-template-columns:155px minmax(0,1fr) auto; align-items:center; gap:24px; min-height:142px; padding:26px; color:#35261c; text-decoration:none; }
.app-layout .course-week-list a:hover { background:#faf2e9; }
.app-layout .course-week-date { display:grid; gap:4px; align-self:start; }
.app-layout .course-week-date>span { font-size:18px; color:#624735; }
.app-layout .course-week-date time { font-size:20px; line-height:1.5; font-weight:750; }
.app-layout .course-week-copy { min-width:0; }
.app-layout .course-week-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 13px; color:#624735; font-size:18px; line-height:1.5; }
.app-layout .course-week-meta>span:first-child { padding:4px 10px; border-radius:6px; background:#efddcc; font-weight:750; color:#4b3323; }
.app-layout .course-week-meta strong { font-size:15px; font-weight:750; background:#3c291e; color:#fff9ef; padding:3px 9px; border-radius:5px; }
.app-layout .course-week-copy h3 { margin:10px 0 0; font:750 24px/1.4 Manrope,sans-serif; color:#35261c; }
.app-layout .course-week-action { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:54px; padding:13px 18px; border-radius:10px; background:#3c291e; color:#fffaf3; font-size:18px; font-weight:750; white-space:nowrap; }
.app-layout .course-week-list li.course-week-current { border:2px solid #80583c; background:#f7e7d7; }
.app-layout .course-week-current a:hover { background:#f2dfcd; }
.app-layout .course-week-list .icon { width:22px; height:22px; flex:none; }
.app-layout .course-month-repeat { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:22px; padding-top:20px; border-top:1px solid #d7c6b6; }
.app-layout .course-month-repeat strong { display:block; font-size:18px; line-height:1.5; }
.app-layout .course-month-repeat p { margin:4px 0 0; color:#624735; font-size:17px; }
.app-layout .course-month-repeat>a { display:inline-flex; align-items:center; gap:12px; min-height:46px; color:#4b3323; font-size:17px; font-weight:700; text-underline-offset:5px; }
.app-layout .course-month-repeat .icon { flex:none; }
.app-layout .course-months a:focus-visible { outline:3px solid #855d27; outline-offset:3px; }
.app-layout .course-week-list a:focus-visible { outline-offset:-4px; }
@media(max-width:1000px) {
  .app-layout .course-months-heading { align-items:flex-start; }
  .app-layout .course-month-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .app-layout .course-week-list a { grid-template-columns:140px minmax(0,1fr); gap:17px; padding:21px; }
  .app-layout .course-week-action { grid-column:2; justify-self:start; }
  .app-layout .course-month-repeat { align-items:flex-start; flex-direction:column; gap:8px; }
}
@media(max-width:620px) {
  .app-layout .course-months { font-size:16px; margin-bottom:28px; }
  .app-layout .course-months-heading { flex-direction:column; gap:16px; }
  .app-layout .course-months-heading h2 { font-size:24px; }
  .app-layout .course-months-heading p { font-size:16px; }
  .app-layout .course-month-grid { grid-template-columns:minmax(0,1fr); gap:20px; }
  .app-layout .course-month-cover { aspect-ratio:1.65; min-height:170px; }
  .app-layout .course-month-cover img { max-height:220px; }
  .app-layout .course-month-card-copy { padding:20px; }
  .app-layout .course-month-card-title h3 { font-size:24px; }
  .app-layout .course-month-card-title>span { font-size:15px; }
  .app-layout .course-month-card-copy>p { font-size:16px; }
  .app-layout .course-month-current-badge { font-size:14px; }
  .app-layout .course-month-current-topic { font-size:16px; }
  .app-layout .course-month-card-action { font-size:16px; padding-top:18px; }
  .app-layout .course-month-back { font-size:16px; }
  .app-layout .course-months--detail .course-months-heading h2>span { font-size:18px; }
  .app-layout .course-month-content>header { display:block; }
  .app-layout .course-month-content h3 { font-size:22px; }
  .app-layout .course-month-content h3 span { font-size:16px; }
  .app-layout .course-month-content>header p { font-size:16px; }
  .app-layout .course-plan-dates { display:block; margin-top:8px; font-size:14px; }
  .app-layout .course-week-list a { grid-template-columns:minmax(0,1fr); gap:16px; padding:20px; }
  .app-layout .course-week-date { grid-column:1; display:flex; align-items:baseline; flex-wrap:wrap; gap:5px 12px; }
  .app-layout .course-week-date>span { font-size:16px; }
  .app-layout .course-week-date time { font-size:16px; }
  .app-layout .course-week-copy { grid-column:1; }
  .app-layout .course-week-list a>.icon { grid-column:2; grid-row:1/3; align-self:center; }
  .app-layout .course-week-meta { font-size:16px; gap:8px 10px; }
  .app-layout .course-week-meta strong { font-size:14px; }
  .app-layout .course-week-copy h3 { font-size:20px; margin-top:10px; }
  .app-layout .course-week-action { grid-column:1; justify-self:stretch; justify-content:space-between; min-height:48px; font-size:16px; }
  .app-layout .course-month-repeat { margin-top:18px; padding-top:18px; }
  .app-layout .course-month-repeat strong { font-size:16px; }
  .app-layout .course-month-repeat p,.app-layout .course-month-repeat>a { font-size:16px; }
}