/* =========================================================================
   Lighthouse — homework files, the traffic light, the viewer, the writing box.

   ONE stylesheet for both dashboards, enqueued from inc/homework-files.php
   wherever a homework shortcode appears. The teacher uploads the marked page
   and the student reads it; two stylesheets would drift, and the half that
   drifted would be the child's.

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

   NO RUN OF PROSE HERE IS UNDER 14px, and the exceptions are named. On
   2026-09-12 the editor's label, hint and toolbar buttons (13/12/13px) and the
   traffic light, group titles and paste instructions (12/12/13px) were all
   lifted to 14px, because wiring this stylesheet to the reports page would
   otherwise have carried 12px prose onto it. Do not shrink them.

   Four rules stay below 14px on purpose, and every one is a badge or a single
   token rather than something anybody reads a sentence of:
       .lh-hw-thumb--marked::after  10px  the word "Marked" stamped on a thumbnail
       .lh-hw-group-n               11px  a count digit in a pill
       .lh-hw-chip                  12px  a pasted file's name in a pill
       .lh-hw-ext                   13px  "PDF"
       .lh-hw-paste kbd             12px  a single key cap

   THE ONE EXCEPTION, stated rather than hidden: Fran asked for a traffic
   light, and this site's Avada palette has no red in it — amber (color4) and
   jade (color5) are there, red is not. So red is defined ONCE below, scoped
   to this component, exactly as .lh-sh scopes its own --lh-sh-line. If a red
   is ever added to Avada's palette, this is the single line to repoint.
   ========================================================================= */

.lh-hw-files,
.lh-hw-light,
.lh-hw-ed,
.lh-hw-paste,
.lh-hw-lb
{
	--lh-hw-red: #d23b2f;
	--lh-hw-red-soft: rgba( 210, 59, 47, 0.10 );
	--lh-hw-line: rgba( 1, 47, 70, 0.14 );
	--lh-hw-soft: rgba( 1, 47, 70, 0.04 );
}

/* -------------------------------------------------------------------------
   The traffic light
   ------------------------------------------------------------------------- */

.lh-hw-light
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px 4px 10px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.lh-hw-dot
{
	width: 10px;
	height: 10px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: currentColor;
}

.lh-hw-light--waiting
{
	color: var( --lh-hw-red );
	background: var( --lh-hw-red-soft );
}

.lh-hw-light--working
{
	color: #8a5c00;
	background: var( --awb-custom_color_11 );
}

.lh-hw-light--done
{
	color: #1f6f68;
	background: var( --awb-custom_color_10 );
}

.lh-hw-light--note
{
	color: var( --awb-custom_color_12 );
	background: var( --lh-hw-soft );
}

/* -------------------------------------------------------------------------
   The files on one piece of work
   ------------------------------------------------------------------------- */

.lh-hw-files
{
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.lh-hw-group
{
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.lh-hw-group-t
{
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --awb-custom_color_12 );
}

.lh-hw-group--marked .lh-hw-group-t
{
	color: #1f6f68;
}

.lh-hw-group-n
{
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var( --lh-hw-soft );
	color: var( --awb-custom_color_1 );
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

/* A row of pictures never widens the page: it scrolls inside itself. */
.lh-hw-strip
{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	min-width: 0;
	overflow-x: auto;
	padding-bottom: 2px;
}

.lh-hw-thumb
{
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 128px;
	height: 128px;
	border-radius: 10px;
	border: 2px solid var( --lh-hw-line );
	background: var( --lh-hw-soft );
	overflow: hidden;
	text-decoration: none;
}

.lh-hw-thumb img
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The teacher's marking, told apart by a FULL border and a badge — never a
   single coloured edge on a rounded card. */
.lh-hw-thumb--marked
{
	border-color: var( --awb-color5 );
}

.lh-hw-thumb--marked::after
{
	content: "Marked";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 3px 6px;
	background: var( --awb-color5 );
	color: var( --awb-custom_color_1 );
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
}

.lh-hw-zoom
{
	position: absolute;
	top: 6px;
	right: 6px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba( 1, 47, 70, 0.62 );
	opacity: 0;
	transition: opacity 0.15s ease;
}

/* A magnifying glass, not a plus. The badge opens the picture bigger, and a "+" reads as
   "add another one" — which is a different control three inches away on the same screen.
   ::before is the lens, ::after the handle. Both in white on the navy disc. */

.lh-hw-zoom::before
{
	content: "";
	position: absolute;
	top: 8px;
	left: 7px;
	width: 9px;
	height: 9px;
	border: 2px solid #ffffff;
	border-radius: 50%;
}

.lh-hw-zoom::after
{
	content: "";
	position: absolute;
	top: 14px;
	left: 14px;
	width: 6px;
	height: 2px;
	border-radius: 1px;
	background: #ffffff;
	transform: rotate( 45deg );
	transform-origin: left center;
}

.lh-hw-thumb:hover .lh-hw-zoom,
.lh-hw-thumb:focus-visible .lh-hw-zoom
{
	opacity: 1;
}

.lh-hw-thumb--doc
{
	display: grid;
	place-items: center;
}

.lh-hw-ext
{
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var( --awb-custom_color_12 );
}

.lh-hw-none
{
	margin: 0;
	font-size: 14px;
	color: var( --awb-custom_color_12 );
}

/* -------------------------------------------------------------------------
   The viewer
   ------------------------------------------------------------------------- */

.lh-hw-lb
{
	width: min( 94vw, 1100px );
	max-width: 94vw;
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: 14px;
	background: var( --awb-custom_color_1 );
	color: #ffffff;
	overflow: visible;
}

.lh-hw-lb::backdrop
{
	background: rgba( 1, 47, 70, 0.82 );
}

.lh-hw-lb-img
{
	display: block;
	width: 100%;
	max-height: 78vh;
	object-fit: contain;
	border-radius: 14px 14px 0 0;
	background: #000000;
}

.lh-hw-lb-cap
{
	margin: 0;
	padding: 12px 18px 14px;
	font-size: 14px;
	text-align: center;
	color: rgba( 255, 255, 255, 0.86 );
}

.lh-hw-lb-x,
.lh-hw-lb-nav
{
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba( 1, 47, 70, 0.72 );
	color: #ffffff;
	cursor: pointer;
	line-height: 1;
}

.lh-hw-lb-x
{
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	font-size: 26px;
}

.lh-hw-lb-nav
{
	top: 50%;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	font-size: 32px;
}

.lh-hw-lb-prev
{
	left: 10px;
}

.lh-hw-lb-next
{
	right: 10px;
}

.lh-hw-lb-x:hover,
.lh-hw-lb-nav:hover
{
	background: var( --awb-color5 );
	color: var( --awb-custom_color_1 );
}

/* -------------------------------------------------------------------------
   Pasting a screenshot — hidden until the script proves it works
   ------------------------------------------------------------------------- */

.lh-hw-paste
{
	display: none;
}

.lh-hw-paste.is-live
{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	margin-top: 10px;
}

/* Full width under the button, not squeezed beside it — a chip carries a thumbnail and a
   filename and there can be several. */
.lh-hw-paste-list
{
	align-self: stretch;
}

/* ONE button, used twice. "Choose files" and "Paste from clipboard" are the two ways into the
   same field and sit one above the other, so they are the same control wearing two labels — a
   native ::file-selector-button could never match this, which is why the file input's own chrome
   is hidden and a <label> wears this class instead. */

.lh-hw-btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 46px;
	padding: 0 22px;
	border: 2px solid var( --awb-custom_color_1 );
	border-radius: 999px;
	background: var( --awb-color1 );
	color: var( --awb-custom_color_1 );
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s ease;
}

.lh-hw-btn:hover,
.lh-hw-btn:focus-visible
{
	background: var( --awb-custom_color_10 );
	outline: none;
}

/* The chooser: what is on it at the left edge, the way in at the right. */

.lh-hw-pick
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 8px 8px 8px 16px;
	border: 1px solid var( --lh-hw-line );
	border-radius: 12px;
	background: var( --awb-color1 );
}

.lh-hw-pick-n
{
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 15px;
	color: var( --awb-custom_color_12 );
}

/* Hidden from sight, not from the keyboard: the label needs a real input to point at, and a
   `display: none` input cannot be focused when the label is tabbed to. */
.lh-hw-pick-i
{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

.lh-hw-pick-i:focus-visible + .lh-hw-btn
{
	outline: 2px solid var( --awb-color5 );
	outline-offset: 2px;
}

/* A clipboard, drawn rather than fetched: ::before is the board, ::after the clip. */

.lh-hw-paste-go-i
{
	position: relative;
	width: 15px;
	height: 18px;
	flex: none;
	border: 2px solid var( --awb-custom_color_1 );
	border-radius: 3px;
}

.lh-hw-paste-go-i::after
{
	content: "";
	position: absolute;
	top: -4px;
	left: 50%;
	width: 9px;
	height: 5px;
	border: 2px solid var( --awb-custom_color_1 );
	border-radius: 2px;
	background: var( --awb-color1 );
	transform: translateX( -50% );
}

/* -------------------------------------------------------------------------
   The paste window
   One dialog for the page, not one per card. Everything staged inside it is
   thrown away unless "Add" is pressed, and "Add" only queues the files — the
   card's own Save is still what writes them.
   ------------------------------------------------------------------------- */

.lh-hw-pb
{
	width: min( 760px, calc( 100vw - 32px ) );
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: var( --awb-color1 );
	color: var( --awb-custom_color_1 );
}

.lh-hw-pb::backdrop
{
	background: rgba( 1, 47, 70, 0.55 );
}

.lh-hw-pb-in
{
	padding: 26px 28px 22px;
}

.lh-hw-pb-h
{
	margin: 0 0 16px;
	font-size: 21px;
	font-weight: 700;
	color: var( --awb-custom_color_1 );
}

.lh-hw-pb-drop
{
	display: grid;
	place-items: center;
	min-height: 108px;
	padding: 18px;
	border: 2px dashed var( --lh-hw-line );
	border-radius: 12px;
	text-align: center;
	cursor: text;
}

.lh-hw-pb-drop:focus,
.lh-hw-pb-drop:focus-visible
{
	border-color: var( --awb-color5 );
	background: var( --awb-custom_color_10 );
	outline: none;
}

.lh-hw-pb-drop-t
{
	font-size: 15px;
	color: var( --awb-custom_color_12 );
}

.lh-hw-pb kbd,
.lh-hw-paste kbd
{
	padding: 1px 6px;
	border: 1px solid var( --lh-hw-line );
	border-radius: 4px;
	background: var( --awb-color1 );
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var( --awb-custom_color_1 );
}

.lh-hw-pb-grid
{
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 118px, 1fr ) );
	gap: 12px;
	margin-top: 16px;
	max-height: 46vh;
	overflow-y: auto;
}

.lh-hw-pb-cell
{
	position: relative;
	aspect-ratio: 4 / 3;
	border: 1px solid var( --lh-hw-line );
	border-radius: 10px;
	overflow: hidden;
	background: var( --awb-color2 );
}

.lh-hw-pb-cell img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* White disc, navy glyph, and a ring — the button sits ON the screenshot, and a screenshot
   can be any colour. A translucent navy disc vanished against a dark image, which is exactly
   the one case where a teacher needs to find it. */

.lh-hw-pb-x
{
	position: absolute;
	top: 6px;
	right: 6px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 0 0 2px rgba( 1, 47, 70, 0.35 ), 0 2px 6px rgba( 0, 0, 0, 0.3 );
	color: var( --awb-custom_color_1 );
	font-family: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

/* Hover keeps a light disc and darkens the mark. A red fill with a white glyph vanished
   against a dark screenshot the moment the pointer was on it — the one instant the button
   has to be visible. Ben, 2026-09-14: "when i hover over the x for an image it turns white
   and can't see it". */
.lh-hw-pb-x:hover,
.lh-hw-pb-x:focus-visible
{
	background: #ffffff;
	box-shadow: 0 0 0 3px var( --lh-hw-red ), 0 2px 8px rgba( 0, 0, 0, 0.4 );
	color: var( --lh-hw-red );
	outline: none;
}

.lh-hw-pb-note
{
	margin: 14px 0 0;
	min-height: 21px;
	font-size: 15px;
	color: var( --awb-custom_color_12 );
}

.lh-hw-pb-row
{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 18px;
}

.lh-hw-pb-b
{
	min-height: 46px;
	padding: 0 24px;
	border: 2px solid var( --lh-hw-line );
	border-radius: 999px;
	background: var( --awb-color1 );
	color: var( --awb-custom_color_1 );
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
}

.lh-hw-pb-b.is-go
{
	border-color: var( --awb-custom_color_1 );
	background: var( --awb-custom_color_1 );
	color: var( --awb-color1 );
}

.lh-hw-pb-b:disabled
{
	opacity: 0.45;
	cursor: not-allowed;
}

@media ( max-width: 640px )
{
	.lh-hw-pb-row
	{
		flex-direction: column-reverse;
	}

	.lh-hw-pb-b
	{
		width: 100%;
	}
}

.lh-hw-paste-list
{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
}

/* A chip shows the picture, not just its name. "pasted-20260914-090819-n1nr.png" tells a
   teacher nothing about which screenshot it is, and she can paste several in a row. The
   remove button is a real <button> so it is reachable by keyboard; 28px square clears the
   24px minimum for a target this small sits inside a larger one. */

.lh-hw-chip
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	padding: 4px 4px 4px 4px;
	border-radius: 999px;
	background: var( --awb-custom_color_10 );
	color: var( --awb-custom_color_1 );
	font-size: 12px;
	overflow-wrap: anywhere;
}

.lh-hw-chip-img
{
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	background: var( --awb-color1 );
	flex: none;
}

.lh-hw-chip-n
{
	min-width: 0;
	padding-left: 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 200px;
}

.lh-hw-chip-x
{
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --awb-custom_color_12 );
	font-family: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.lh-hw-chip-x:hover,
.lh-hw-chip-x:focus-visible
{
	background: var( --awb-color1 );
	color: var( --lh-hw-red );
	outline: none;
}

/* -------------------------------------------------------------------------
   The writing box
   ------------------------------------------------------------------------- */

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

.lh-hw-ed-label
{
	font-size: 14px;
	font-weight: 700;
	color: var( --awb-custom_color_1 );
}

.lh-hw-ed-hint
{
	margin: 0;
	font-size: 14px;
	color: var( --awb-custom_color_12 );
}

/* The textarea is the real field. It only hides once the editor is running. */
.lh-hw-ed.is-live .lh-hw-ed-src
{
	display: none;
}

.lh-hw-ed-bar
{
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.lh-hw-ed-b
{
	min-width: 34px;
	min-height: 34px;
	padding: 0 9px;
	border: 1px solid var( --lh-hw-line );
	border-radius: 7px;
	background: var( --awb-color1 );
	color: var( --awb-custom_color_1 );
	font-family: inherit;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}

.lh-hw-ed-b:hover
{
	border-color: var( --awb-color5 );
	background: var( --awb-custom_color_10 );
}

.lh-hw-ed-b.is-b
{
	font-weight: 800;
}

.lh-hw-ed-b.is-i
{
	font-style: italic;
}

.lh-hw-ed-b.is-u
{
	text-decoration: underline;
}

.lh-hw-ed-b.is-red
{
	color: var( --lh-hw-red );
	font-weight: 700;
}

/* 96px was a slot, not a box. The grading box replaces a Google Doc — a teacher writes three
   headed sections into it, and at 96px the first scrolled out of sight while she wrote the
   second. The height now follows the `rows` the caller asked for (--lh-hw-ed-rows, set in
   lh_hw_editor), so the grading box opens at 14 rows and the reports page's per-subject
   boxes stay at 4. 3 is the fallback for a caller that sets nothing. The drag handle lets
   a teacher go bigger still. */

.lh-hw-ed-area
{
	min-height: calc( var( --lh-hw-ed-rows, 3 ) * 1.55em + 32px );
	max-height: 70vh;
	overflow-y: auto;
	resize: vertical;
	padding: 16px 18px;
	border: 1px solid var( --lh-hw-line );
	border-radius: 9px;
	background: var( --awb-color1 );
	color: var( --awb-custom_color_1 );
	font-size: 15px;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.lh-hw-ed-area:focus
{
	border-color: var( --awb-color5 );
	outline: none;
}

.lh-hw-ed-area:empty::before
{
	content: attr( data-ph );
	color: var( --awb-custom_color_12 );
}

.lh-hw-ed-area p
{
	margin: 0 0 8px;
}

.lh-hw-ed-area ul,
.lh-hw-ed-area ol
{
	margin: 0 0 8px;
	padding-left: 22px;
}

/* What a written note looks like once it is saved and shown back. */
.lh-hw-said
{
	margin: 10px 0 0;
	padding: 12px 16px;
	border-radius: 8px;
	background: var( --lh-hw-soft );
	font-size: 15px;
	line-height: 1.55;
	color: var( --awb-custom_color_1 );
	overflow-wrap: anywhere;
}

.lh-hw-said > :first-child
{
	margin-top: 0;
}

.lh-hw-said > :last-child
{
	margin-bottom: 0;
}

.lh-hw-said ul,
.lh-hw-said ol
{
	padding-left: 22px;
}

/* -------------------------------------------------------------------------
   Tablets, which is what this is actually used on
   ------------------------------------------------------------------------- */

@media ( max-width: 1024px )
{
	.lh-hw-thumb
	{
		width: 116px;
		height: 116px;
	}
}

@media ( max-width: 782px )
{
	.lh-hw-thumb
	{
		width: 104px;
		height: 104px;
	}

	.lh-hw-strip
	{
		flex-wrap: nowrap;
	}

	.lh-hw-lb-nav
	{
		width: 42px;
		height: 42px;
		margin-top: -21px;
	}
}

/* A finger is not a mouse: on touch the zoom badge has no hover to appear on,
   so it is simply always there. */
@media ( hover: none )
{
	.lh-hw-zoom
	{
		opacity: 1;
	}
}

@media ( prefers-reduced-motion: reduce )
{
	.lh-hw-zoom,
	.lh-hw-paste.is-live
	{
		transition: none;
	}
}

/* A chosen file is stated, not muted: once there is something on the field the line stops
   being a placeholder and becomes a fact. */
.lh-hw-pick-n.has-file
{
	color: var( --awb-custom_color_1 );
	font-weight: 500;
}

/* -------------------------------------------------------------------------
   The strip on a collapsed row
   Pictures only, at a glance. It lives inside a <summary>, so nothing here is
   clickable on its own — a link in there would swallow the click that opens
   the card.
   ------------------------------------------------------------------------- */

.lh-hw-mini
{
	display: flex;
	gap: 5px;
	flex: none;
}

.lh-hw-mini-i
{
	width: 46px;
	height: 34px;
	border-radius: 6px;
	border: 1px solid var( --lh-hw-line );
	object-fit: cover;
	background: var( --awb-color2 );
	display: block;
}

/* A marked-up page is the one a teacher is looking for, so it is ringed. */
.lh-hw-mini-i--marked
{
	border-color: var( --awb-color5 );
	box-shadow: 0 0 0 1px var( --awb-color5 );
}

.lh-hw-mini-none
{
	display: grid;
	place-items: center;
	width: 46px;
	height: 34px;
	border-radius: 6px;
	border: 1px solid var( --lh-hw-line );
	background: var( --awb-color2 );
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var( --awb-custom_color_12 );
}