/* Brand tokens. Look "a" is the site as it was on Netlify in October 2026. Looks "b" and "c" are
   options for Dr. Nick to compare in the teacher preview. Once he picks one, make it the default
   here and delete the other two blocks at the bottom of this file. */
:root {
  --page: #EFE8DC;
  --card: #FBF9F3;
  --panel: #fff;
  --navy: #1F2E3D;
  --terra: #C75A3C;
  --terra-2: #E08E6E;
  --terra-tint: #F3DCD2;
  --ink: #2C2C2C;
  --mute: #7A8896;
  --line: rgba(31, 46, 61, 0.12);
  --line-soft: rgba(31, 46, 61, 0.07);
  --on-navy: #EFE8DC;
  --serif: 'Cormorant Garamond', serif;
  --sans: 'Sora', sans-serif;
  --r: 6px;
  --r-btn: 5px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { min-height: 100vh; background: var(--page); font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; font-feature-settings: "lnum" 1; }
::selection { background: var(--terra); color: var(--on-navy); }
a { color: var(--terra); }
a:hover { color: var(--navy); }
button { font-family: var(--sans); }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 40; background: rgba(239, 232, 220, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-in { max-width: 1120px; margin: 0 auto; padding: 15px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { font-family: var(--serif); font-weight: 700; font-size: 27px; line-height: 1; color: var(--navy); letter-spacing: -0.01em; text-decoration: none; }
.brand i { color: var(--terra); }
.who { display: flex; align-items: center; gap: 14px; position: relative; }
/* The account button: the student's name and a square with their initials. It opens a short menu. */
.who-btn { display: flex; align-items: center; gap: 14px; padding: 4px; margin: -4px; border: 0; background: none; font: inherit; cursor: pointer; border-radius: 4px; }
.who-btn:hover .who-dot, .who.open .who-dot { box-shadow: 0 0 0 2px rgba(239, 232, 220, 0.55); }
.who-btn:focus-visible { outline: 2px solid var(--terra-2, #E08A6D); outline-offset: 2px; }
.acct-menu { display: none; position: absolute; right: 0; top: calc(100% + 12px); z-index: 60; min-width: 250px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--navy); box-shadow: 0 10px 28px rgba(31, 46, 61, 0.2); text-align: left; }
.who.open .acct-menu { display: block; }
.acct-head { padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.acct-head b { display: block; font-size: 15px; font-weight: 600; color: var(--navy); }
.acct-head span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: #55606B; }
.acct-menu a, .acct-menu button { display: block; width: 100%; padding: 10px 12px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--navy); text-align: left; text-decoration: none; cursor: pointer; border-radius: 3px; }
.acct-menu a:hover, .acct-menu button:hover, .acct-menu a:focus-visible, .acct-menu button:focus-visible { background: rgba(31, 46, 61, 0.07); color: var(--navy); outline: none; }
.acct-menu button { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0; padding-top: 12px; color: #8c3a25; }
.who-name { font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; color: var(--mute); text-transform: uppercase; text-align: right; line-height: 1.5; }
.who-dot { width: 34px; height: 34px; border-radius: 4px; background: var(--navy); color: var(--on-navy); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; letter-spacing: 0.02em; }
.link-btn { background: none; border: 0; padding: 0; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--navy); border-bottom: 1px solid rgba(31, 46, 61, 0.25); text-decoration: none; }
.link-btn:hover { color: var(--terra); border-color: var(--terra); }

.preview-bar { background: var(--navy); color: var(--on-navy); font-size: 12.5px; }
.preview-bar div { max-width: 1120px; margin: 0 auto; padding: 9px 32px; display: flex; gap: 8px 18px; align-items: center; flex-wrap: wrap; }
.preview-bar a { color: var(--terra-2); }
.preview-bar button { background: transparent; color: var(--on-navy); border: 1px solid rgba(239, 232, 220, 0.32); border-radius: 4px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.preview-bar button.on { background: var(--terra); border-color: var(--terra); color: #fff; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 40px 32px 88px; }
.rise { animation: rise .5s ease both; }

/* ---------- top of the page ---------- */
.hero-meta { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.hero-meta .count { font-size: 12px; font-weight: 500; color: var(--mute); letter-spacing: 0.02em; }
.bar { width: 148px; height: 5px; background: var(--line); border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--terra); border-radius: 999px; }

.thisweek { display: none; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.card.accent { border-left: 3px solid var(--terra); }
.card-row { padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.card-main { display: flex; align-items: center; gap: 16px; flex: 1 1 260px; min-width: 0; }
.tile { flex: none; width: 50px; height: 50px; border-radius: 11px; background: var(--navy); color: var(--terra-2); display: flex; align-items: center; justify-content: center; }
.tile svg { width: 24px; height: 24px; }
.card-title { font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: 1.05; color: var(--navy); }
.card-sub { font-size: 13.5px; line-height: 1.6; color: var(--ink); margin-top: 4px; }
.card-sub.soft { color: #6b6256; margin-top: 2px; }
.btn { flex: none; display: inline-block; background: var(--terra); color: #fff; text-decoration: none; font-family: var(--sans); font-size: 13.5px; font-weight: 600; padding: 13px 24px; border-radius: var(--r-btn); border: 0; cursor: pointer; text-align: center; }
.btn:hover { color: #fff; filter: brightness(0.94); }
.btn.navy { background: var(--navy); color: var(--on-navy); }
.btn.block { display: block; width: 100%; padding: 12px 14px; font-size: 13px; border-radius: 4px; }
.questions { margin-bottom: 16px; }
.top-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch; }
.top-col { flex: 1.3 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.refs { flex: 1 1 300px; min-width: 0; padding: 20px 24px; }
.refs-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.refs .tile { width: 46px; height: 46px; }
.ref { display: flex; align-items: center; gap: 11px; padding: 10px 2px; border-top: 1px solid rgba(31, 46, 61, 0.08); text-decoration: none; color: var(--ink); }
.ref .ico { flex: none; width: 30px; height: 30px; border-radius: 7px; background: var(--page); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.ref .ico svg { width: 15px; height: 15px; }
.ref .nm { flex: 1; font-size: 14.5px; font-weight: 500; color: var(--navy); }
.ref .go { font-size: 12.5px; color: var(--mute); font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; }

/* ---------- schedule ---------- */
.sched { margin-top: 40px; overflow: hidden; }
.sched-bar { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; background: transparent; border: 0; cursor: pointer; text-align: left; }
.sched-bar .tile { width: 44px; height: 44px; border-radius: 10px; }
.sched-bar .tile svg { width: 21px; height: 21px; }
.sched-title { font-family: var(--serif); font-weight: 700; font-size: 30px; line-height: 1.1; letter-spacing: -0.01em; color: var(--navy); }
.sched-more { flex: none; font-size: 13px; font-weight: 600; color: var(--terra); white-space: nowrap; }
.sched-body { padding: 18px 22px 22px; border-top: 1px solid rgba(31, 46, 61, 0.1); animation: rise .25s ease both; }
.sched-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.st { border-radius: 5px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; background: var(--panel); border: 1px solid rgba(31, 46, 61, 0.1); }
.st b { font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: 1.05; color: var(--navy); }
.st span { font-size: 12.5px; white-space: nowrap; color: var(--mute); }
.st.past { opacity: 0.5; }
.st.now { background: rgba(199, 90, 60, 0.1); border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--terra); }
.st.now b, .st.now span { color: var(--terra); }
.st.now span { font-weight: 600; }
.st.off { background: rgba(31, 46, 61, 0.05); border: 0; border-left: 3px solid var(--terra-2); border-radius: 0 5px 5px 0; justify-content: center; }
.st.off span { font-size: 13px; font-weight: 600; color: var(--navy); white-space: normal; }
.legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(31, 46, 61, 0.14); font-size: 12.5px; color: var(--mute); }
.legend span { display: flex; align-items: center; gap: 7px; }
.legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; background: var(--terra); }
.legend i.done { background: rgba(31, 46, 61, 0.16); }

/* ---------- units and weeks ---------- */
.sect { margin-top: 48px; }
.sect-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.sect-head h2 { font-family: var(--serif); font-weight: 700; font-size: 30px; margin: 0; color: var(--navy); letter-spacing: -0.01em; }
.sect-head .rule { flex: 1; height: 1px; min-width: 20px; background: rgba(31, 46, 61, 0.14); }
.sect-head .hint { font-size: 12px; color: var(--mute); }
.units { display: flex; flex-direction: column; gap: 14px; }
.unit { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.unit-bar { width: 100%; display: flex; align-items: center; gap: 14px; padding: 15px 18px; background: var(--navy); border: 0; text-align: left; cursor: pointer; }
.unit-bar .chev { flex: none; color: var(--terra-2); transition: transform .2s; display: flex; }
.unit-bar .chev svg { width: 14px; height: 14px; }
.unit.shut .unit-bar .chev { transform: rotate(-90deg); }
.unit-name { flex: 1; min-width: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-navy); }
.unit-name em { font-style: normal; }
.unit-meta { flex: none; font-size: 11px; color: rgba(239, 232, 220, 0.6); white-space: nowrap; }
.unit-body { background: var(--page); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.week { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; scroll-margin-top: 84px; }
.week-bar { width: 100%; display: flex; align-items: center; gap: 20px; padding: 18px 24px; background: none; border: 0; text-align: left; cursor: pointer; }
.week-num { flex: none; width: 52px; font-family: var(--serif); font-weight: 700; font-size: 30px; color: var(--navy); line-height: 1; }
.week.current .week-num { color: var(--terra); }
.week.locked .week-num { color: #C3BCAE; }
.week-info { flex: 1; min-width: 0; }
.week-ced { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terra); margin-bottom: 5px; }
.week-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.week-title { font-size: 16px; font-weight: 600; color: var(--ink); }
.pill { flex: none; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 9px; border-radius: 4px; background: rgba(122, 136, 150, 0.16); color: #5C6770; }
.week.current .pill { background: var(--terra); color: #fff; }
.week.locked .pill { background: rgba(122, 136, 150, 0.14); color: #9AA4AD; }
.week-topics { display: block; font-size: 13px; color: var(--mute); margin-top: 3px; }
.week-bar .chev { flex: none; color: var(--mute); transition: transform .2s; display: flex; }
.week-bar .chev svg { width: 18px; height: 18px; }
.week.is-open .week-bar .chev { transform: rotate(180deg); }
.week-body { border-top: 1px solid rgba(31, 46, 61, 0.1); padding: 24px; background: var(--panel); animation: rise .25s ease both; }
.locked-note { display: flex; align-items: center; gap: 12px; color: var(--mute); font-size: 13.5px; }
.locked-note svg { width: 17px; height: 17px; flex: none; }
.week-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; }
.week-grid.solo { grid-template-columns: 1fr; }
.eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; color: var(--terra); text-transform: uppercase; margin-bottom: 14px; }
.eyebrow.soft { color: var(--mute); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.tab { font-size: 13px; font-weight: 600; border: 0; border-radius: var(--r-btn); padding: 7px 15px; cursor: pointer; background: var(--line-soft); color: var(--navy); }
.tab.on { background: var(--navy); color: var(--on-navy); }
.mat { display: flex; align-items: center; gap: 13px; padding: 12px 2px; border-bottom: 1px solid var(--line-soft); text-decoration: none; color: var(--ink); }
.mat .ico { flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--page); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.mat .ico svg { width: 16px; height: 16px; }
.mat.widget .ico { background: var(--terra-tint); color: var(--terra); }
.mat .txt { flex: 1; min-width: 0; }
.mat .txt b { display: block; font-size: 15px; font-weight: 500; color: var(--navy); }
.mat .txt small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #9a988f; margin-top: 1px; }
.mat .go { font-size: 14px; color: var(--mute); font-weight: 600; white-space: nowrap; }
.mat.widget .go { color: var(--terra); }
.mat:hover .txt b { color: var(--terra); }
.none { font-size: 13.5px; color: var(--mute); padding: 12px 2px; }
.hw { padding: 22px; align-self: start; }
.due { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.due .ico { flex: none; width: 38px; height: 38px; border-radius: 8px; background: var(--page); color: var(--navy); display: flex; align-items: center; justify-content: center; }
.due .ico svg { width: 18px; height: 18px; }
.due small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; color: var(--mute); text-transform: uppercase; }
.due b { font-family: var(--serif); font-weight: 700; font-size: 21px; line-height: 1.1; color: var(--navy); }
.hw p { font-size: 11.5px; line-height: 1.5; color: var(--mute); margin: 12px 0 0; text-align: center; }
.empty-note { padding: 40px 28px; text-align: center; }
.empty-note h2 { font-family: var(--serif); font-size: 30px; margin: 0 0 8px; color: var(--navy); }
.empty-note p { margin: 0; color: var(--mute); font-size: 14.5px; line-height: 1.6; }

/* ---------- video library ---------- */
.lib-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.lib-head h1 { font-family: var(--serif); font-weight: 700; font-size: 44px; line-height: 1; margin: 6px 0 0; color: var(--navy); letter-spacing: -0.01em; }
.lib-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 16px 18px; margin-bottom: 20px; }
.lib-tools input { flex: 1 1 300px; min-width: 220px; background: var(--page); border: 1px solid rgba(31, 46, 61, 0.2); border-radius: 5px; padding: 12px 14px; font-family: var(--sans); font-size: 14px; color: var(--ink); }
.lib-tools input::placeholder { color: var(--mute); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-size: 12px; font-weight: 600; padding: 9px 14px; border-radius: 5px; cursor: pointer; white-space: nowrap; border: 1px solid rgba(31, 46, 61, 0.2); background: transparent; color: var(--navy); }
.chip.on { background: var(--terra); border-color: var(--terra); color: #fff; }
.vid-count { font-size: 12px; color: var(--mute); margin-bottom: 12px; }
.vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.vid { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); overflow: hidden; }
.vid .thumb { aspect-ratio: 16 / 9; background: var(--navy) center / cover no-repeat; position: relative; }
.vid .thumb::after { content: ""; position: absolute; inset: 0; background: rgba(31, 46, 61, 0); transition: background .15s; }
.vid:hover .thumb::after { background: rgba(31, 46, 61, 0.18); }
.vid .meta { padding: 14px 16px 16px; }
.vid .meta b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--navy); }
.vid .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.vid .tags span { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 4px; background: var(--line-soft); color: #5C6770; }

/* ---------- video player ---------- */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(20, 29, 39, 0.82); display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-box { width: min(1040px, 100%); background: var(--navy); border-radius: 8px; overflow: hidden; }
.modal-bar { display: flex; align-items: center; gap: 16px; padding: 12px 16px; color: var(--on-navy); font-size: 13.5px; font-weight: 600; }
.modal-bar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-bar a { color: var(--terra-2); font-size: 12.5px; white-space: nowrap; }
.modal-bar button { background: transparent; color: var(--on-navy); border: 1px solid rgba(239, 232, 220, 0.32); border-radius: 4px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.modal-frame { aspect-ratio: 16 / 9; background: #000; }
.modal-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- sign-in ---------- */
.signin { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
/* The trademark note under the sign-in card. teacher.html does not load practice.css, so the size is set here too. */
.signin .foot.legal { margin: 26px auto 0; padding: 0 12px; max-width: 420px; font-size: 11px; }
.t-wrap + .foot.legal { margin: 0 auto; padding: 0 24px 34px; max-width: 760px; font-size: 11px; }
.signin-box { width: min(420px, 100%); padding: 36px 34px 32px; }
.signin-box .brand, .signin-box .brand:hover { font-size: 34px; display: block; color: var(--navy); } /* on the cream card, not on the navy header */
.signin-box .brand i { color: var(--terra); }
.signin-box .by { font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; color: var(--mute); margin: 10px 0 26px; }
.field { display: block; margin-bottom: 14px; }
.field span { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; background: var(--panel); border: 1px solid rgba(31, 46, 61, 0.2); border-radius: 5px; padding: 12px 13px; font-family: var(--sans); font-size: 15px; color: var(--ink); }
.msg { font-size: 13px; line-height: 1.5; color: var(--terra); min-height: 20px; margin: 4px 0 10px; }
.signin-box .help { font-size: 12px; color: var(--mute); text-align: center; margin: 16px 0 0; }

.foot { margin-top: 44px; font-size: 12px; line-height: 1.6; color: var(--mute); text-align: center; }

@media (max-width: 760px) {
  .wrap { padding: 24px 16px 64px; }
  .top-in { padding: 13px 16px; gap: 12px; }
  .preview-bar div { padding: 9px 16px; }
  .brand { font-size: 21px; }
  .who-name { display: none; }
  .card-row { padding: 20px 20px; }
  .week-grid { grid-template-columns: 1fr; gap: 22px; }
  .sched-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
  .sched-title, .sect-head h2 { font-size: 25px; }
  .week-bar { padding: 16px 16px; gap: 14px; }
  .week-body { padding: 18px 16px; }
  .tab { padding: 10px 16px; }
  .lib-head h1 { font-size: 34px; }
}
@media (max-width: 420px) {
  .week-num { width: 38px; font-size: 24px; }
}

/* ============================================================================================
   Look B, "Paper". Lighter page, white cards, no heavy navy blocks. Navy for buttons, terracotta
   kept for this week and for links.
   ============================================================================================ */

/* ============================================================================================
   Look C, "Masthead". A navy band across the top that states this week, its class date, and its
   homework date. Everything below is the current look with rounder corners.
   ============================================================================================ */
.top { background: var(--navy); border-bottom: 0; backdrop-filter: none; }
.brand, .brand:hover { color: var(--on-navy); }   /* the title in the header does not change color under the pointer */
.brand i { color: var(--terra-2); }
.who-name { color: rgba(239, 232, 220, 0.6); }
.who-dot { background: var(--terra); color: #fff; }
.top .link-btn { color: var(--on-navy); border-color: rgba(239, 232, 220, 0.35); }
.preview-bar { background: #162230; }
.thisweek { display: block; background: var(--navy); color: var(--on-navy); }
.thisweek-in { max-width: 1120px; margin: 0 auto; padding: 30px 32px 40px; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.thisweek .eyebrow { color: var(--terra-2); margin-bottom: 10px; }
.thisweek h1 { font-family: var(--serif); font-weight: 700; font-size: 46px; line-height: 1.02; letter-spacing: -0.01em; margin: 0; max-width: 640px; }
.thisweek .facts { display: flex; gap: 10px 30px; flex-wrap: wrap; margin-top: 18px; font-size: 13.5px; color: rgba(239, 232, 220, 0.72); }
.thisweek .facts b { color: var(--on-navy); font-weight: 600; }
.thisweek .acts { display: flex; gap: 10px; flex-wrap: wrap; }
.thisweek .btn.ghost { background: transparent; color: var(--on-navy); box-shadow: inset 0 0 0 1px rgba(239, 232, 220, 0.4); }
.has-thisweek .hero-meta, .has-thisweek .card-zoom { display: none; }
.has-thisweek .wrap { padding-top: 28px; }
.card.accent { border-left: 1px solid var(--line); }
.unit-bar { padding: 17px 22px; }
.signin-box { border-top: 5px solid var(--navy); }
@media (max-width: 760px) {
  .thisweek-in { padding: 22px 16px 28px; }
  .thisweek h1 { font-size: 32px; }
}

/* The look is settled (Nick, October 12, 2026): "Masthead, square". A navy header, a navy band across
   the top of the Course page that states this week, and square buttons. The rules above this line that
   style .top, .brand, and .thisweek are that look. The other looks and the switcher are gone. */

/* ============================================================================================
   Ways to arrange the Course page, for Nick to choose from (teacher preview bar, October 12, 2026).
   When he picks one, keep its rules and delete the rest, with the CLAYS list in app.js.
   ============================================================================================ */
.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.res { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--ink); }
.res:hover { border-color: var(--navy); color: var(--ink); }
.res .ico { flex: none; width: 38px; height: 38px; border-radius: var(--r); background: var(--navy); color: var(--on-navy); display: flex; align-items: center; justify-content: center; }
.res .ico svg { width: 18px; height: 18px; }
.res .txt { flex: 1; min-width: 0; }
.res .txt b { display: block; font-size: 14.5px; font-weight: 600; color: var(--navy); }
.res .txt small { display: block; font-size: 12.5px; color: var(--mute); margin-top: 1px; }
.res .go { color: var(--terra); font-weight: 600; }
.res-refs { margin-top: 14px; padding: 18px 22px 8px; }
.res-refs .ref:first-of-type { border-top: 0; }
.sect.first { margin-top: 0; }
.week.solo > .week-bar { cursor: default; }
.week.solo > .week-bar .chev { display: none; }
/* The Course page sidebar. It reuses the Practice sidebar's panel and its unit and topic rows. */
.clay-d .side-topic.wk { width: 100%; background: none; border: 0; text-align: left; cursor: pointer; font-family: var(--sans); }
.clay-d .side-topic.wk.none b, .clay-d .side-topic.wk.none { color: #a3a8ae; }
.clay-d .side-unit-head a { cursor: pointer; }
.clay-d .dot.now { background: var(--terra); }
.clay-d .week.solo > .week-bar { display: none; }
.clay-d .week.solo { border-top: 0; }
.week-dates { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; font-size: 14.5px; color: #4d5560; margin: -8px 0 18px; }
/* a link row in the sidebar: an icon tile and a label, large enough to find */
.side-res { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer; font: 600 14px var(--sans); color: var(--navy); text-decoration: none; text-align: left; }
.side-res:hover, .side-refs > summary:hover { background: rgba(31, 46, 61, 0.06); color: var(--navy); }
.side-res.on { background: var(--navy); color: var(--on-navy); }
.side-res .ico, .side-refs > summary .ico { flex: none; width: 32px; height: 32px; border-radius: 7px; background: var(--navy); color: var(--on-navy); display: flex; align-items: center; justify-content: center; }
.side-res.on .ico { background: var(--terra); }
.side-res .ico svg, .side-refs > summary .ico svg { width: 16px; height: 16px; }
.side-refs > summary { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; cursor: pointer; list-style: none; font: 600 14px var(--sans); color: var(--navy); }
.side-refs > summary::-webkit-details-marker { display: none; }
.side-refs > summary i { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; background: var(--terra-tint); color: #8A341C; border-radius: 4px; padding: 2px 8px; }
.side-refs[open] > summary i { background: var(--navy); color: var(--on-navy); }
.side-refs .ref, .side-reflist .ref { padding: 9px 10px 9px 14px; font-size: 13.5px; }
.side-reflist .ref:first-child { border-top: 0; }
/* the three sections of the Course sidebar, each of which opens and closes */
.side-sec { margin-bottom: 10px; }
.side-sec > summary { list-style: none; cursor: pointer; padding: 11px 14px; border-radius: 8px; background: var(--navy); color: var(--on-navy); font: 600 12px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.side-sec > summary::-webkit-details-marker { display: none; }
.side-sec > summary::after { content: "+"; font-size: 16px; letter-spacing: 0; }
.side-sec[open] > summary::after { content: "−"; }
/* the Widgets tab of a week: the interactive panels from the Learn pages, one at a time */
.week-grid.wide { grid-template-columns: 1fr; }
/* The list of a week's interactives sits under the Widgets tab and belongs to it, so it is set smaller and plainer than
   the tabs above it: indented behind a rule, text only, with a line under the one that is showing. */
.wpick { display: flex; align-items: baseline; gap: 4px 18px; flex-wrap: wrap; margin: 2px 0 8px 6px; padding: 4px 0 4px 16px; border-left: 2px solid rgba(31, 46, 61, 0.2); }
.wpick-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin-right: 2px; }
.wtab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 4px 0; font: 500 13px var(--sans); color: #4d5560; cursor: pointer; }
.wtab:hover { color: var(--navy); }
.wtab.on { color: var(--navy); font-weight: 600; border-bottom-color: var(--terra); }
.week-panel { max-width: 760px; }
.week-panel .explore { margin-top: 18px; }
.week-panel-from { font-size: 13.5px !important; color: #4d5560 !important; }

/* Dr. Nick's name on the site (his choices of October 11, 2026) */
.brand-by { font-size: 0.62em; font-weight: 600; font-style: normal; color: rgba(239, 232, 220, 0.72); letter-spacing: 0; white-space: nowrap; }
.signin-box .brand-by { color: var(--mute); }
.foot.byline { margin: 44px auto 0; padding: 0 24px 6px; max-width: 760px; font-size: 12px; text-align: center; }
.foot.byline + .foot.legal { margin-top: 0; }
.foot.byline a { color: #55606B; text-decoration: none; }
.foot.byline a:hover { color: var(--navy); text-decoration: underline; }
.prog-line { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--terra); }
@media (max-width: 560px) { .brand-by { display: none; } }

/* Limits on full practice exams (AP Exam Practice): what is left, and the request for another attempt */
.lim-line { margin: 18px 0 0; font-size: 15px; font-weight: 600; color: var(--navy); }
.lim-line + .pr-btns { margin-top: 10px; }
.lim-none { margin-top: 18px; padding: 16px 20px; border: 1px solid var(--line); border-left: 4px solid var(--terra); border-radius: var(--r); background: var(--card); }
.lim-none p { margin: 0; font-size: 15px; line-height: 1.6; }
.lim-none .btn { margin-top: 12px; }
.lim-msg { margin: 10px 0 0; font-size: 13.5px; color: #8A341C; }

/* AI scoring: the step "Submit your written answers", after the timed work, and the AI's marks beside the scoring notes */
.sub-q { border-top: 1px solid var(--line-soft); margin-top: 18px; padding-top: 16px; }
.sub-head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.sub-head b { font-family: var(--serif); font-size: 22px; color: var(--navy); }
.sub-head .t-dim { font-size: 12.5px; color: var(--mute); }
.sub-state { margin-left: auto; font-size: 12.5px; font-weight: 600; color: #5C6770; }
.sub-state.ok { color: #235A43; }
.sub-show { margin: 8px 0 4px; font-size: 13.5px; }
.sub-show summary, .ai-typed summary { cursor: pointer; font-weight: 600; color: var(--navy); }
.sub-show[open] summary { margin-bottom: 10px; }
.ai-photos { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 12px; }
.ai-thumb { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.ai-thumb img { display: block; height: 96px; max-width: 140px; object-fit: cover; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.ai-thumb button { background: none; border: 0; padding: 0; cursor: pointer; font: 600 12px var(--sans); color: #8A341C; text-decoration: underline; text-underline-offset: 3px; }
.ai-add { cursor: pointer; }
.ai-note { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: #4d5560; max-width: 640px; }
.ai-typed { margin-top: 10px; font-size: 13.5px; }
.ai-typed label { display: block; margin-top: 10px; }
.ai-typed label span { display: block; font-size: 12px; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.ai-typed textarea { width: 100%; max-width: 640px; padding: 10px 12px; border: 1px solid rgba(31, 46, 61, 0.22); border-radius: 5px; font: 14px/1.5 var(--sans); color: var(--ink); background: #fff; resize: vertical; }
.ai-said { margin-bottom: 16px; padding: 14px 18px; border: 1px solid var(--line); border-left: 4px solid var(--navy); border-radius: var(--r); background: var(--card); }
.ai-said p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; }
.ai-mark { flex: none; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 4px; white-space: nowrap; }
.ai-mark.ok { background: #C9DFD3; color: #235A43; }
.ai-mark.no { background: var(--terra-tint); color: #8A341C; }
.ai-why { display: block; margin-top: 6px; padding-left: 12px; border-left: 2px solid rgba(31, 46, 61, 0.2); font-size: 13.5px; line-height: 1.5; color: #4d5560; }
@media (max-width: 860px) { .sub-state { margin-left: 0; flex-basis: 100%; } .ai-mark { margin-left: 36px; } }

/* Free-response answers: the choice between typing and photos, and the typed-answer editor (mathbox.js, MathLive) */
.way-pick { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; color: var(--ink); }
.way { margin-top: 12px; }
.way-head { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; font-size: 14.5px; color: var(--navy); }
.mb-part { margin-top: 14px; max-width: 760px; }
.mb-label { display: block; font: 600 12px var(--sans); letter-spacing: 0.04em; color: var(--navy); margin-bottom: 5px; }
.mathbox { border: 1px solid rgba(31, 46, 61, 0.22); border-radius: 6px; background: #fff; padding: 10px 12px 8px; }
.mb-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mb-modes { display: inline-flex; }
.mb-mode, .mb-add { font: 600 12.5px var(--sans); padding: 7px 14px; border: 1px solid rgba(31, 46, 61, 0.3); background: #fff; color: var(--navy); cursor: pointer; border-radius: 0; }
.mb-mode + .mb-mode { border-left: 0; }
.mb-mode.on { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
.mb-add { border-radius: var(--r-btn, 4px); }
.mb-add:disabled { opacity: 0.5; cursor: default; }
.mb-line { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.mb-line math-field { flex: 1 1 0; min-width: 0; display: block; font-size: 20px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); }
.mb-line math-field:focus-within { outline: 2px solid var(--navy); outline-offset: 1px; }
/* Words in an answer are set in the site's reading font, with no tint behind them (MathLive tints the text it is in). */
.mb-line math-field { --text-font-family: 'Source Serif 4', Georgia, serif; --contains-highlight-background-color: transparent; }
.mb-line math-field::part(menu-toggle) { display: none; }
.mb-del { flex: none; background: none; border: 0; padding: 0; cursor: pointer; font: 600 12px var(--sans); color: #8A341C; text-decoration: underline; text-underline-offset: 3px; }
.mb-how, .mb-hint, .mb-off { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: #4d5560; }
.mb-hint, .mb-off { color: #8A341C; }
@media (max-width: 560px) { .mb-line math-field { font-size: 18px; } .mathbox { padding: 8px 8px 6px; } }

/* A trial account: one quiet line under the header on every page. It says what the trial includes and when it ends. */
.trial-note { background: var(--card); border-bottom: 1px solid var(--line); }
.trial-note > div { max-width: 1120px; margin: 0 auto; padding: 9px 32px; font-size: 13.5px; line-height: 1.5; color: #4d5560; }
/* The tag on a unit or a set that the trial does not open */
.full-tag { flex: none; display: inline-block; font: 600 10px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: rgba(122, 136, 150, 0.16); color: #5C6770; white-space: nowrap; }
@media (max-width: 560px) { .trial-note > div { padding: 8px 16px; font-size: 13px; } }

/* The rule about names on photographed work, set apart so that it is not missed (Nick, October 12). */
.no-name { margin: 12px 0 0; padding: 10px 14px; max-width: 640px; border-left: 4px solid var(--terra); background: rgba(199, 90, 60, 0.09); border-radius: 0 6px 6px 0; font-size: 14.5px; line-height: 1.5; color: #1f2a35; }
.no-name b { font-weight: 700; color: #1f2a35; }