/* =========================================================================
   Lighthouse — the report a teacher writes home after a class.
   Enqueued from inc/class-report.php, only on pages using [lh_teacher_report]
   or [lh_student_reports].

   House rules: one declaration per line, semicolon on every one, closing brace
   on its own line, colours from the --awb-* globals.

   NOTHING HERE IS UNDER 14px except two badges (the Homework tag and the tick
   glyph, neither of which is a run of prose). The sweep caught this file shipping
   12px hint text on 2026-09-12 — the same fault being reported on other pages at
   the time — so every label and every hint was lifted to 14px. Do not shrink them.

   ONE RULE APPLIED HERE BEFORE IT WAS ASKED FOR: jade (--awb-color5) and amber
   (--awb-color4) are used as FILLS and BORDERS only, never as text. Measured
   against white, jade #72c9c1 is 1.94:1 and amber #ffb710 is 1.75:1, where a
   reader needs 4.5:1 — so the existing site uses them as label text in 200+
   places and should not. Nothing new here repeats that.
   (Navy on those same two as BADGE fills is 7.24:1 and 8.04:1, which is why
   the tick and the Homework tag are perfectly legible — their only fault was
   being 11px, and that is deliberate: neither is a run of prose.)
   ========================================================================= */

.lh-rep,
.lh-reps
{
	--lh-rep-line: rgba( 1, 47, 70, 0.14 );
	--lh-rep-soft: rgba( 1, 47, 70, 0.04 );
	--lh-rep-ink: var( --awb-custom_color_1 );
	--lh-rep-quiet: var( --awb-custom_color_12 );
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
	/* NO max-width here, on purpose.
	   The first attempt at "the content should not be 100% width" capped this at 1100px and
	   centred it, which fixed the full-bleed and broke the alignment: every other teacher page
	   sits in an Avada container whose row runs 160.4 -> 1439.6 at a 1600px viewport, and 1100px
	   centred runs 250 -> 1350. It lined up with nothing.
	   The real fault was that the Reports page was the ONLY one of the six with no container at
	   all — which is also why it had no top or bottom padding. The page now carries the same
	   container as Homework, so the width and the 60px padding come from where every other page
	   gets them, and this file does not need to know about either. */
}

/* -------------------------------------------------------------------------
   The teacher's form
   ------------------------------------------------------------------------- */

.lh-rep-top
{
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lh-rep-title
{
	margin: 0;
	font-weight: 800;
	color: var( --lh-rep-ink );
}

.lh-rep-sub
{
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var( --lh-rep-quiet );
}

.lh-rep-msg
{
	margin: 0;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 15px;
}

.lh-rep-msg--good
{
	background: var( --awb-custom_color_10 );
	color: var( --lh-rep-ink );
}

.lh-rep-msg--bad
{
	background: rgba( 210, 59, 47, 0.10 );
	color: #8f241b;
}

.lh-rep-empty
{
	margin: 0;
	padding: 24px 22px;
	border: 1px dashed var( --lh-rep-line );
	border-radius: 12px;
	font-size: 15px;
	line-height: 1.6;
	color: var( --lh-rep-quiet );
}

/* ---- class and student chips ---- */

.lh-rep-chips
{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

.lh-rep-chip
{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 38px;
	padding: 6px 14px;
	border: 1px solid var( --lh-rep-line );
	border-radius: 999px;
	font-size: 14px;
	text-decoration: none;
	color: var( --lh-rep-ink );
	background: var( --awb-color1 );
}

.lh-rep-chip:hover
{
	border-color: var( --awb-color5 );
	background: var( --awb-custom_color_10 );
}

.lh-rep-chip.is-on
{
	border-color: transparent;
	background: var( --awb-custom_color_1 );
	color: var( --awb-color1 );
}

/* A tick means "already written for this date" — the teacher's own progress through
   the class, which is the question she has every evening. */
.lh-rep-tick
{
	display: inline-grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var( --awb-color5 );
	color: var( --awb-custom_color_1 );
	font-size: 11px;
	font-weight: 800;
}

.lh-rep-chip.is-done:not( .is-on )
{
	background: var( --awb-custom_color_10 );
}

/* ---- the form itself ---- */

.lh-rep-form
{
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.lh-rep-row
{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px 20px;
	min-width: 0;
}

.lh-rep-field
{
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.lh-rep-lbl
{
	font-size: 14px;
	font-weight: 700;
	color: var( --lh-rep-ink );
}

.lh-rep-lbl em
{
	font-style: normal;
	font-weight: 400;
	color: var( --lh-rep-quiet );
}

.lh-rep-hint
{
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var( --lh-rep-quiet );
}

.lh-rep-note
{
	margin: 0;
	flex: 1 1 260px;
	padding: 10px 14px;
	border-radius: 8px;
	background: var( --awb-custom_color_11 );
	font-size: 14px;
	line-height: 1.5;
	color: var( --lh-rep-ink );
}

.lh-rep-text,
.lh-rep-ta,
.lh-rep-field input[ type="date" ],
.lh-rep-field input[ type="number" ]
{
	width: 100%;
	max-width: 100%;
	padding: 10px 13px;
	border: 1px solid var( --lh-rep-line );
	border-radius: 9px;
	background: var( --awb-color1 );
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	color: var( --lh-rep-ink );
}

.lh-rep-ta
{
	resize: vertical;
}

.lh-rep-text:focus,
.lh-rep-ta:focus,
.lh-rep-field input:focus
{
	outline: 2px solid var( --awb-color5 );
	outline-offset: 1px;
	border-color: transparent;
}

/* Three sentence boxes stack with a gap rather than each carrying a margin. */
.lh-rep-field .lh-rep-text + .lh-rep-text
{
	margin-top: 8px;
}

.lh-rep-field--date input[ type="date" ]
{
	width: auto;
	min-width: 170px;
}

.lh-rep-score-in
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.lh-rep-score-in input
{
	width: 82px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.lh-rep-score-in em
{
	font-style: normal;
	font-size: 14px;
	color: var( --lh-rep-quiet );
}

.lh-rep-auto
{
	font-style: normal;
	font-size: 14px;
	line-height: 1.5;
	color: var( --lh-rep-quiet );
}

/* ---- one book's section, in the form ---- */

.lh-rep-subject-in,
.lh-rep-overall-in
{
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 18px 20px;
	border: 1px solid var( --lh-rep-line );
	border-radius: 14px;
	background: var( --awb-color1 );
	min-width: 0;
}

.lh-rep-book-in
{
	padding: 0 8px;
	font-size: 15px;
	font-weight: 800;
	color: var( --lh-rep-ink );
}

.lh-rep-actions
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
}

.lh-rep-closing
{
	flex: 1 1 260px;
	font-size: 14px;
	line-height: 1.5;
	color: var( --lh-rep-quiet );
}

.lh-rep-closing em
{
	font-style: normal;
}

/* ---- the fold of recent reports, on the teacher side ---- */

.lh-rep-recent
{
	border-top: 1px solid var( --lh-rep-line );
	padding-top: 14px;
}

.lh-rep-recent-s,
.lh-reps-sum
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	cursor: pointer;
	list-style: none;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --lh-rep-quiet );
}

.lh-rep-recent-s::-webkit-details-marker,
.lh-reps-sum::-webkit-details-marker
{
	display: none;
}

.lh-rep-recent-s:hover,
.lh-reps-sum:hover
{
	color: var( --lh-rep-ink );
}

.lh-rep-recent-i,
.lh-reps-i
{
	width: 9px;
	height: 9px;
	flex: 0 0 auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg );
	transform-origin: 70% 70%;
	transition: transform 0.15s ease;
}

.lh-rep-recent[ open ] .lh-rep-recent-i,
.lh-reps-item[ open ] .lh-reps-i
{
	transform: rotate( -135deg );
}

/* -------------------------------------------------------------------------
   A report, as a parent reads it. Same markup on both dashboards.
   ------------------------------------------------------------------------- */

.lh-rep-card
{
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 14px;
	padding: 22px 24px;
	border: 1px solid var( --lh-rep-line );
	border-radius: 14px;
	background: var( --awb-color1 );
	min-width: 0;
}

.lh-rep-head
{
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-bottom: 14px;
	border-bottom: 1px solid var( --lh-rep-line );
}

.lh-rep-when
{
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --lh-rep-quiet );
}

.lh-rep-hello
{
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	color: var( --lh-rep-ink );
}

.lh-rep-intro
{
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var( --lh-rep-ink );
}

.lh-rep-subject
{
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 18px;
	border-radius: 12px;
	background: var( --lh-rep-soft );
	min-width: 0;
}

.lh-rep-book
{
	margin: 0;
	font-size: 16px;
	font-weight: 800;
	color: var( --lh-rep-ink );
}

.lh-rep-label
{
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --lh-rep-quiet );
}

.lh-rep-score
{
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	font-size: 17px;
	color: var( --lh-rep-ink );
	font-variant-numeric: tabular-nums;
}

.lh-rep-overview
{
	font-size: 15px;
	line-height: 1.6;
	color: var( --lh-rep-ink );
	overflow-wrap: anywhere;
}

.lh-rep-overview > :first-child
{
	margin-top: 0;
}

.lh-rep-overview > :last-child
{
	margin-bottom: 0;
}

/* The child's own sentences. Quoted, because they are the child's words and a parent
   should be able to see that at a glance. */
.lh-rep-sentences
{
	margin: 0;
	padding-left: 22px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 15px;
	line-height: 1.55;
	color: var( --lh-rep-ink );
}

.lh-rep-sentences li
{
	overflow-wrap: anywhere;
}

.lh-rep-overall
{
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.lh-rep-overall-t
{
	margin: 0;
	font-size: 16px;
	font-weight: 800;
	color: var( --lh-rep-ink );
}

.lh-rep-list
{
	margin: 0 0 6px;
	padding-left: 22px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: 15px;
	line-height: 1.55;
	color: var( --lh-rep-ink );
}

.lh-rep-homework
{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	padding: 12px 16px;
	border-radius: 10px;
	background: var( --awb-custom_color_11 );
	font-size: 15px;
	line-height: 1.55;
	color: var( --lh-rep-ink );
}

.lh-rep-hw-tag
{
	padding: 2px 10px;
	border-radius: 999px;
	background: var( --awb-color4 );
	color: var( --awb-custom_color_1 );
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.lh-rep-foot
{
	padding-top: 14px;
	border-top: 1px solid var( --lh-rep-line );
}

.lh-rep-foot p
{
	margin: 0 0 4px;
	font-size: 14px;
	line-height: 1.55;
	color: var( --lh-rep-quiet );
}

.lh-rep-foot p:last-child
{
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   The family's list of reports
   ------------------------------------------------------------------------- */

.lh-reps-head
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.lh-reps-title
{
	font-weight: 800;
	color: var( --lh-rep-ink );
}

.lh-reps-count
{
	display: inline-grid;
	place-items: center;
	min-width: 26px;
	height: 26px;
	padding: 0 9px;
	border-radius: 999px;
	background: var( --awb-color2 );
	color: var( --lh-rep-ink );
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.lh-reps-empty
{
	margin: 0;
	padding: 24px 22px;
	border: 1px solid var( --lh-rep-line );
	border-radius: 12px;
	font-size: 15px;
	line-height: 1.6;
	color: var( --lh-rep-quiet );
}

.lh-reps-item
{
	border-top: 1px solid var( --lh-rep-line );
	padding-top: 10px;
}

.lh-reps-item:first-of-type
{
	border-top: 0;
	padding-top: 0;
}

/* -------------------------------------------------------------------------
   Two things that only show up once it is on a real page
   ------------------------------------------------------------------------- */

/* The date twice. The family's list already puts it in the fold's summary, so the card
   repeating it underneath reads as a mistake. The card keeps its own date everywhere else
   (the teacher's "last 3 you wrote" fold has no date in its summary). */
.lh-reps-item .lh-rep-when
{
	display: none;
}

/* .lh-td-btn carries `text-transform: capitalize`, which turned "Save the report" into
   "Save The Report". Reusing the dashboard button is right — it should look like every other
   button on these pages — but the sentence case has to survive. */
.lh-rep-actions .lh-td-btn
{
	text-transform: none;
}

/* -------------------------------------------------------------------------
   Tablets, which is what this is written on
   ------------------------------------------------------------------------- */

@media ( max-width: 782px )
{
	.lh-rep-card
	{
		padding: 18px 16px;
	}

	.lh-rep-subject
	{
		padding: 14px 14px;
	}

	.lh-rep-subject-in,
	.lh-rep-overall-in
	{
		padding: 16px 14px;
	}

	.lh-rep-score-in input
	{
		width: 72px;
	}
}

@media ( prefers-reduced-motion: reduce )
{
	.lh-rep-recent-i,
	.lh-reps-i
	{
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   Sending it to the family
   Added 2026-09-14. Saving and sending are two decisions — Ben: "they could
   save and not be ready to send it yet" — so this is its own block below the
   form, and it names the address rather than leaving a teacher to assume it.
   Jade as a FILL behind navy is 7.24:1; jade lettering would be 1.94:1.
   ------------------------------------------------------------------------- */

.lh-rep-send
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 20px;
	margin: 22px 0 0;
	padding: 18px 20px;
	border: 1px solid var( --awb-color5 );
	border-radius: 12px;
	background: var( --awb-custom_color_10 );
}

.lh-rep-send-t
{
	min-width: 0;
	flex: 1 1 320px;
}

.lh-rep-send-h
{
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var( --awb-custom_color_1 );
}

.lh-rep-send-b
{
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var( --awb-custom_color_12 );
	overflow-wrap: anywhere;
}

.lh-rep-send-b b
{
	color: var( --awb-custom_color_1 );
}

/* No address to send to is a fact, not a failure: the report is still saved and still on the
   dashboard. Stated in the body colour, not in red. */
.lh-rep-send-b--no
{
	font-weight: 500;
	color: var( --awb-custom_color_1 );
}

.lh-rep-send-f
{
	margin: 0;
	/* Half the box. Ben, 2026-09-21: "widen the email input field - the parent column should be
	   50% width". It was flex: none, which sized this column to its widest line -- the uppercase
	   label -- so it sat at ~800px whatever the screen, and inside it the address field, after a
	   330px button, had 433px: a 28-character address was clipped. */
	flex: 0 0 50%;
	max-width: 50%;
}

.lh-rep-send-go
{
	background: var( --awb-custom_color_1 );
	color: var( --awb-color1 );
}

/* Full width once the screen is narrow; the button does NOT stretch -- it lives inside the shell,
   and stretching it there would push the address field to nothing. 800 rather than 640: the shell
   cannot go below ~345px (its button is 330px and does not shrink), and half of a box on an
   800px screen is less than that. */
@media ( max-width: 800px )
{
	.lh-rep-send-f
	{
		flex-basis: 100%;
		max-width: none;
	}
}

/* The one-off address. Empty means the account above; typed means there, once. */

/* A COLUMN, not a row. This was a wrapping row back when the form held a label-shaped column
   and a loose button; now it holds the label and the shell, and a row lays those side by side.
   The label's own margin does the 5px, so no gap here. */
.lh-rep-send-f
{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

/* The address box and its button are ONE control, the same shape as the file input on the
   homework form -- Ben, 2026-09-15: "make the field rounded and attached just like image 2".
   The shell carries the border, the radius and the focus ring; the input inside is bare, so
   there is never a box drawn inside a box. */
.lh-rep-send-alt
{
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 280px;
	padding: 5px;
	padding-left: 0;
	border: 1px solid rgba( 1, 47, 70, .14 );
	border-radius: 12px;
	background: var( --awb-color1 );
}

/* :focus-within, not :focus on the input — the ring belongs to the shell now, or the input
   would light up inside a shell that stays grey and the two would read as separate again. */
.lh-rep-send-alt:focus-within
{
	outline: 2px solid var( --awb-color5 );
	outline-offset: 1px;
	border-color: transparent;
}

.lh-rep-send-alt-l
{
	display: block;
	margin-bottom: 5px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var( --awb-custom_color_12 );
}

.lh-rep-send-alt-i
{
	flex: 1 1 auto;
	min-width: 0;
	min-height: 40px;
	padding: 0 14px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var( --awb-custom_color_1 );
	font-family: inherit;
	font-size: 15px;
}

.lh-rep-send-alt-i:focus
{
	outline: none;
}

/* The button is a flex item now, so it must not stretch or shrink with the field. */
.lh-rep-send-alt .lh-td-btn
{
	flex: 0 0 auto;
}

@media ( max-width: 640px )
{
	.lh-rep-send-alt
	{
		width: 100%;
		min-width: 0;
	}
}