@import url("./colors_and_type.css");
@page { size: letter; margin: 0; }
* { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
html, body { margin: 0; padding: 0; background: #e9e7e4; }
body { font-family: var(--font-body); color: var(--color-on-surface); font-size: 11pt; line-height: 1.4; }
.page {
  width: 8.5in; height: 11in; padding: 0.45in 0.5in 0.4in; background: #fff; margin: 0 auto 0.3in;
  position: relative; overflow: hidden; display: flex; flex-direction: column; page-break-after: always; break-after: page;
}
.page:last-child { page-break-after: auto; break-after: auto; }
@media print { html, body { background: #fff; } .page { margin: 0; } }
h1, h2, h3 { font-family: var(--font-display); color: var(--color-primary-ink); margin: 0; line-height: 1.15; }

.brandbar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; }
.brandbar img { height: 34px; width: auto; }
.brandbar .eyebrow { font-family: var(--font-display); font-size: 8pt; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--color-primary-deep); }
.titlerow { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.titlerow h1 { font-size: 22pt; font-weight: 800; letter-spacing: -0.01em; }
.titlerow .sub { font-size: 10pt; color: #4a5361; margin-top: 4px; }
.accent { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--color-primary) 0 78%, var(--color-coral) 78% 100%); margin: 10px 0 12px; }

.fields { display: grid; gap: 8px 14px; margin-bottom: 12px; }
.fields.f4 { grid-template-columns: 2.2fr 0.8fr 1.6fr 1.6fr; }
.fields.f3 { grid-template-columns: 2fr 1.4fr 1.4fr; }
.field { font-size: 7.5pt; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6b7480; font-family: var(--font-display); }
.field .line { height: 22px; border-bottom: 1.25px solid #9aa4b1; }
.field.big .line { height: 34px; }

.mode { display: flex; gap: 18px; align-items: center; font-size: 9.5pt; background: var(--surface-container-low); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
.mode strong { font-family: var(--font-display); color: var(--color-primary-ink); }
.box { display: inline-block; width: 12px; height: 12px; border: 1.5px solid var(--color-primary-ink); border-radius: 3px; vertical-align: -2px; margin-right: 6px; }

.q { display: flex; flex-direction: column; background: var(--surface-blue-low, #F2F6FA); border-radius: 14px; padding: 12px 14px 12px; flex: 1; min-height: 0; }
.q + .q { margin-top: 10px; }
.qhead { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; }
.num { width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 13pt; }
.qtext { font-family: var(--font-display); font-weight: 700; font-size: 11pt; color: var(--color-primary-ink); line-height: 1.3; }
.jots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; flex: 1; }
.jot { background: #fff; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.jot .lbl { font-family: var(--font-display); font-weight: 800; font-size: 7.5pt; letter-spacing: .12em; text-transform: uppercase; color: var(--color-primary-deep); }
.jot .hint { font-size: 8pt; color: #7a838f; margin-top: 2px; }
.jot .rule { flex: 1; background-image: repeating-linear-gradient(to bottom, transparent 0 21px, #dfe5ec 21px 22px); margin-top: 4px; }

.foot { display: flex; justify-content: space-between; align-items: center; font-size: 8pt; color: #7a838f; padding-top: 8px; margin-top: 8px; }
.foot b { color: var(--color-primary-ink); font-family: var(--font-display); }

/* elementary */
.eq { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.eq .qtext { font-size: 15pt; line-height: 1.3; }
.eq .readaloud { font-size: 8.5pt; color: #6b7480; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-family: var(--font-display); }
.draw { flex: 1; border-radius: 16px; border: 2px dashed var(--color-light-blue-deep); position: relative; background: #fff; }
.draw .lbl { position: absolute; top: 10px; left: 14px; font-family: var(--font-display); font-weight: 800; color: var(--color-light-blue-deep); font-size: 12pt; }
.cues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cue { background: var(--surface-blue-low, #F2F6FA); border-radius: 12px; padding: 10px 12px; }
.cue .ct { font-family: var(--font-display); font-weight: 800; font-size: 12pt; color: var(--color-primary-ink); }
.cue .rule { height: 46px; background-image: repeating-linear-gradient(to bottom, transparent 0 21px, #c9d6e4 21px 22.5px); }

/* teacher pages */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { background: var(--surface-blue-low, #F2F6FA); border-radius: 12px; padding: 12px 14px; }
.tile.ink { background: var(--color-primary-ink); color: #e5edf6; }
.tile.ink h3 { color: #fff; }
.tile.ink p { color: #dbe6f2; }
.page > .cols { flex: 1; align-content: stretch; }
.page > .cols .tile ol, .page > .cols .tile p { font-size: 10pt; }
.tile.coral { background: #FDEDEB; }
.tile h3 { font-size: 12pt; font-weight: 800; }
.tile .tag { font-family: var(--font-display); font-weight: 800; font-size: 7.5pt; letter-spacing: .14em; text-transform: uppercase; color: var(--color-coral-deep); }
.tile ol, .tile ul { margin: 6px 0 0; padding-left: 16px; font-size: 9.5pt; }
.tile li + li { margin-top: 3px; }
.tile p { font-size: 9.5pt; margin: 6px 0 0; }
.say { font-family: var(--font-display); font-weight: 600; color: var(--color-primary-ink); border-left: 3px solid var(--color-coral); padding: 4px 0 4px 10px; margin: 8px 0; font-size: 10.5pt; }

table.log { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
table.log th { text-align: left; font-family: var(--font-display); font-size: 7pt; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--color-primary-ink); padding: 6px 6px; }
table.log th:first-child { border-top-left-radius: 8px; } table.log th:last-child { border-top-right-radius: 8px; }
table.log td { height: 25px; border-bottom: 1px solid #dfe5ec; padding: 0 6px; }
table.log tr:nth-child(even) td { background: #F7F9FB; }
table.log td.c { text-align: center; color: #b4bcc7; }

.poster { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; }
.poster h1 { font-size: 38pt; font-weight: 800; line-height: 1.05; }
.poster h1 em { font-style: normal; color: var(--color-coral); }
.poster .qr { width: 3.6in; height: 3.6in; padding: 0.18in; background: #fff; border-radius: 22px; box-shadow: 0 0 0 6px var(--color-light-blue); }
.poster .qr svg, .poster .qr img { width: 100%; height: 100%; }
.poster .url { font-family: var(--font-display); font-weight: 800; font-size: 16pt; color: var(--color-primary-deep); }
.poster .es { font-size: 13pt; color: #4a5361; font-style: italic; }
.poster .need { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 6in; }
.poster .need span { background: var(--surface-blue-low, #F2F6FA); border-radius: 999px; padding: 6px 14px; font-family: var(--font-display); font-weight: 700; font-size: 11pt; color: var(--color-primary-ink); }