/*
 * The Classical Liberal Arts Academy — the one stylesheet (SPEC §XII).
 *
 * STANDING PRESENTATION LAW: all presentation is controlled from this file and
 * nowhere else — no inline style attributes, no per-page <style> blocks, no
 * second stylesheet. Templates provide plain semantic HTML, structure, and
 * classes only. No design work until the Headmaster directs it; this is the
 * minimal working dress for legibility, nothing decorative.
 */

/* The one typeface — Times New Roman (the Headmaster's dress ruling): a serif face present on the
   reader's own system, so no web font is loaded; the generic `serif` fallback covers any device
   without it. It draws everything — Latin, Greek, and mathematics — from the platform's serif.
   (The self-hosted monospace font files remain under public/fonts/ should a fixed-width surface ever
   be carved out for column-aligned paradigm tables.) */

/* All text: Times New Roman, black. Font SIZE and WEIGHT are deliberately NOT forced here — the base
   size is set on the root below (18px) and headings carry their own role-appropriate sizes and their
   normal bold weight. Forcing them on * would flatten the whole document to one size and no weight. */
* {
	font-family: "Times New Roman", Times, serif;
	color: #000000;
	text-decoration: none;
}

/* Running text is read at 1.5 line-height site-wide (dress ruling), on the body so it reaches all
   body copy: lessons, pages, posts, instruction lines. The 18px base size is set on the root (html)
   below and inherited here. */
body {
	line-height: 1.5;
}

/* Body copy: every user-visible body renders in Times New Roman (the site's one family, set on *
   above) with spacing preserved — each space and line break as typed, long prose lines wrapping
   naturally, identically on screen and in print. Markup is shown as typed (escaped in the templates),
   never interpreted. NOTE: Times is proportional, so text laid out as fixed-width columns (grammar
   paradigm tables) no longer aligns character-by-character; ordinary prose is unaffected. */
.body {
	white-space: pre-wrap;
}

/* A study-task video player (Vimeo/YouTube): a 16:9 frame that scales to the column so the embedded
   iframe is not left at its tiny default size. Functional sizing, not dress. */
.video {
	width: 100%;
	max-width: 40rem;
	aspect-ratio: 16 / 9;
	margin: 0 0 1rem;
}
.video iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* Headings in their normal style (Headmaster's dress ruling): real bold weight and role-appropriate
   sizes, largest to smallest, on a tight display line-height. No uppercase. Sizes are in rem, so they
   scale from the 18px root. */
h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	line-height: 1.25;
	margin: 1.2rem 0 0.6rem;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.15rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9rem; }

/* The page title (h1) is left-aligned like every heading (Headmaster's ruling), with generous space
   above and below to set it apart from the content that follows. */
h1 {
	text-align: left;
	margin: 2rem 0;
}

p.hint {
    font-weight: normal;
    font-size: inherit;
    color: #000000;
}

span.hint {
    font-weight: normal;
    font-size: inherit;
    color: #000000;

}

input[type="text"] {
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    color: #000000;
}

textarea {
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    color: #000000;
	}

label {
    font-weight: normal;
}


/* Links: #ae0e36 in every state — and `a *` so content nested inside an anchor (a <strong>, a
   <span>) takes the link colour too, since the universal `* { color }` rule paints a nested element
   directly and would otherwise beat the anchor's own colour. */
a,
a:link,
a:visited,
a:hover,
a:active,
a:focus,
a * {
	color: #ae0e36 !important;
	text-decoration: none;
}

/* Roster links (the guardian's My Students names): bold, the standing link colour, underline
   on hover. A named class is required because the universal `* { color: #333 }` rule matches any
   element nested inside an anchor directly (a direct match beats the anchor's inherited colour),
   so a bolded name wrapped in <strong> renders near-black. Setting the colour on the anchor with
   no nested element to catch — bold supplied here — restores the link colour. */
a.roster-link {
	color: #ae0e36;
	font-weight: normal;
	text-decoration: none;
}
a.roster-link:hover {
	text-decoration: none;
}

/* One consistent width site-wide (dress ruling, Amendment LXVIII): every page renders
   full-width with sensible margins — public pages, catalogs, the study layer, account,
   admin, reports, all of it. The centered reading measure is retired; a reader preferring
   narrower text sizes his own window or device. Set nowhere else, per-page or otherwise. */
html {
	margin: 50px;
	background-color: #fcfcfc;
	font-size: 18px; /* the default text size — the root all rem sizes and inherited copy read from */
}

main {
    min-height: 750px;
}
  
nav.breadcrumb {
    font-size: 12px !important;
}

button, .btn {
    font-size: inherit;
    color: #ae0e36;
    text-decoration: none !important;
    background: #f2f2f2;
    border: 1px solid #dddddd;
    border-radius: 4px;
    padding: 2px 5px 2px 5px;
    margin: 0;
    cursor: pointer;
    margin-bottom: 10px;
}

/* The standing "link button": a form-submit button (a POST act) that must read as a plain
   text link — Sign out, Remove, Revoke, Cancel, and the like. It sheds the box and wears the
   link's dress, underlining on hover. Primary buttons (plain <button>/.btn) stay boxed. */
.linkbtn {
    font-size: inherit;
    color: #ae0e36;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-decoration: none;
}
.linkbtn:hover {
    text-decoration: underline;
}

/* A speaker's name in a conversation transcript is structural to the dialogue —
   not "meta", which is information about content (dates, categories, attribution).
   It reads in bold; meta styling is unaffected (SPEC §XII, Amendment XXVII). */
.speaker {
	font-weight: normal;
}

p.speaker {
    line-height: 1.0rem;
    color: #ae0e36;
}

/* A question stem on an assessment reads in bold; its answer choices are normal
   weight (the browser default). Questions are separated by <hr>, not boxes. */
.question {
	font-weight: normal;
}

/* Horizontal rules separate sections with even space above and below. */
hr {
	margin: 30px 0px 30px 0px;
}

/* The masthead is centered; presentation lives here, never inline
   (SPEC §XII, Amendment XIII). */
.masthead {
	text-align: center;
}

/* The wordmark — the title link direct-child of the masthead (not the nested identity links) —
   reads at double the body size. */
.masthead > a {
	font-size: 36px;
}

/* The persistent identity indicator (Amendment LXVII): its own quiet, centered row above the
   masthead — first thing on the page, in normal document flow at every width, one line that never
   wraps (so its dot separators never break), a hairline of space to the logo below. Signed in:
   "Signed in as [name] · Sign out"; signed out: "Sign in". */
.identity {
	text-align: center;
	font-size: 16px;
	white-space: nowrap;
	margin-bottom: 4px;
}
.identity form {
	display: inline;
}

/* Form controls (inputs, selects, textareas) stay browser-default. */

/* Form convention (SPEC §XII, Amendment XVI): each field presents vertically —
   the field name, then the input, then the hint (if any) on its own line below
   the input. One field per block, blocks stacked down the page, the action link
   at the bottom. Structure only — legibility, not design. A flex column with
   explicit order lays the parts out without depending on their markup order (the
   field name is the label's leading text). */
form.entry label {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 0.9rem;
}
form.entry label > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
form.entry label > select,
form.entry label > textarea {
	order: 1;
	margin-top: 0.15rem;
}
form.entry label > .hint {
	order: 2;
	margin-top: 0.15rem;
}
/* Checkbox/radio rows keep their control inline with its own text. An option label
   is a choice, not a field name: it stays normal weight even where a broader label
   rule sets bold (Amendment XXVIII — quiz answer choices are normal weight). */
form.entry .checkbox label {
	display: inline;
	margin: 0;
	font-weight: normal;
}
form.entry .checkbox {
	margin-bottom: 0.5rem;
}
form.entry .actions {
	margin-top: 1rem;
}

input[type="text"] {
    width: 600px;
    padding: 10px;
}
input[type="number"] {
    width: 600px;
    padding: 10px;
}
textarea {
    width: 600px;
	min-height: 300px;
    padding: 10px;
}

input[type="date"] {
	width: 600px;
    padding: 10px;
}

input[type="email"] {
	width: 600px;
    padding: 10px;
}

input[type="password"] {
	width: 600px;
    padding: 10px;
}
select {
	width: 600px;
    padding: 10px;
}

footer.site-foot {
    font-size: inherit;
    text-align: center;
}

/* The site menu is centered wherever it appears — under the masthead and in the footer — so the
   upper copy matches the footer's centering. */
nav.foot-menu {
    text-align: center;
}

p.admin-tools {
    line-height: 2.0;
}

/* A course block on "My Studies": the course name reads in bold, and the progress line sits directly
   under the current-lesson link (no blank line between). One rule for the studies rows only. */
.study {
    margin-bottom: 1rem;
}
.study .title {
    font-weight: bold;
}
.study p.meta {
    margin: 0;
}
/* Graded-work feedback (parent/tutor/standing views): each item is a summary line that discloses its
   full grading report. The report is generated one element per line (App\Examiner\GradingRubric), so it
   is shown verbatim with its own line breaks kept — the working monospace dress suits the plain report.
   Classes only. */
details.feedback > summary {
    cursor: pointer;
}
.feedback-report {
    white-space: pre-wrap;
    margin: 0.5rem 0 1rem 1rem;
}
/* The current-lesson link is tinted by how long since the student last COMPLETED a lesson — a nudge to
   keep working (the Headmaster's Moodle mechanic): within a week green, within two weeks orange, older
   red. No tint keeps the standing link colour. The higher specificity wins over the a:link !important.
   Carried on the student's My Studies (.study) and a guardian's My Students (.contents) alike. */
.study a.age-recent,
.contents a.age-recent {
    color: #157f3c !important;
}
.study a.age-week,
.contents a.age-week {
    color: #c25e00 !important;
}
.study a.age-stale,
.contents a.age-stale {
    color: #cc0000 !important;
}
/*
span.title {
    font-weight: normal;
}
*/
/* A student's course names on a guardian's My Students page read in bold, as they do on the student's
   own My Studies page — so a course stands out from the lesson and progress line beneath it. */
.course-title {
    font-weight: bold;
}
/* The marker on an Examiner draft's correct choice — uppercase, green, bold, so
   the right answer reads at a glance (Headmaster's dress ruling). */
.correct-mark {
    text-transform: uppercase;
    font-weight: normal;
    color: #157f3c;
}

/* The course gradebook (Amendment XLIII) — a read-only grid on the wide admin
   layout. Structural legibility only: borders, a header band, the student and
   average columns in bold. Classes only. */
.gradebook {
    border-collapse: collapse;
}
.gradebook th,
.gradebook td {
    border: 1px solid #000000;
    padding: 3px 6px;
    text-align: left;
    vertical-align: top;
}
.gradebook thead th {
    background: #eeeeee;
}

/* Academic reports (Amendment XLII) — a printable block at parity with the transcript plugin;
   this replaces the plugin's embedded CSS (SPECIFICATION-REPORTS.md §3). Classes only. */
.report {
    font-family: "Times New Roman", Times, serif;
    font-size: 12pt;
    color: #000000;
    background: #ffffff;
}
.report-header {
    text-align: center;
}
.report-academy,
.report-title {
    font-weight: normal;
}
.report-line {
    margin: 0.15rem 0;
}
/* Academic-year, subject, course and summary headings ride at the report's own
   12pt bold with the grey band — one uniform printed document, not page-heading
   scale (Amendment XLII, presentation ruling). */
.report-course,
.report-subject,
.report-course-name {
    text-align: left;
    font-size: 12pt;
    font-weight: normal;
    background: #eeeeee;
    padding: 3px 6px;
    margin: 0.75rem 0 0.35rem;
}
.report-empty {
    text-align: center;
    margin: 0.5rem 0;
}
.report-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}
.report-table th,
.report-table td {
    border: 1px solid #000000;
    padding: 3px 6px;
    text-align: left;
    vertical-align: top;
}
.report-table thead th,
.report-table .report-band td {
    background: #eeeeee;
    font-weight: normal;
}
.report-table.cols-3 th:nth-child(1) { width: 60%; }
.report-table.cols-3 th:nth-child(2),
.report-table.cols-3 th:nth-child(3) { width: 20%; }
.report-table.cols-5 th:nth-child(1) { width: 40%; }
.report-table.cols-5 th:nth-child(n+2) { width: 12%; }
.report-summary {
    text-align: center;
    font-weight: normal;
    margin: 0.15rem 0;
}

/* The selector is one compact control row — picker, From, To, Show and Print
   side by side, wrapping on small screens, buttons in the standing dress
   (Amendment XLII, presentation ruling). Each label stacks over its field (the
   standing vertical form convention, Amendment XVI) so controls of unequal
   height line up cleanly along the bottom. Excluded from print below. */
.report-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.report-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}
.report-selector label {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
}

/* The honeypot trap (registration and contact): hidden from human sight and from assistive tech by
   moving it off-screen — NOT display:none, which a sophisticated bot can detect and skip, defeating
   the trap; off-screen also survives the `form.entry label { display: flex }` rule that would
   otherwise reveal it. It stays in the markup (with aria-hidden and tabindex=-1) so a bot still fills
   it and is turned away. Presentation stays here, never inline. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Curriculum lesson print (Amendment LXXV) — the chrome-free lesson sheet, one print treatment with
   the reports: the identity line, the body whole, and the Academy's name small at the foot. These base
   rules sit ABOVE the print block on purpose: both apply when printing (this rule is not media-scoped),
   so the @media print overrides below must come later to win on equal specificity — otherwise the
   sheet's screen margin and padding stack inside the @page inch and print a double margin. Classes
   only; the print page itself carries no chrome (no masthead, nav, breadcrumbs, or actions). */
.print-sheet {
    max-width: 46rem;
    margin: 1rem auto;
    padding: 0 1rem;
    color: #000000;
    background: #ffffff;
}
/* The print head (the Academy's name, at the top of the first page) and the foot (the site address,
   below the document) are small, centered chrome; the title between them is the page's own <h1>. The
   head is pinned to the top of the sheet (no top margin) so it sits at the @page margin. */
.print-head {
    margin: 0 0 2rem;
    text-align: center;
}
.print-foot {
    margin-top: 2rem;
    text-align: center;
}

/* THE one set of print rules — every print view (lessons, reports, and packets to come) obeys this
   block and no other. Independent of the screen sizes, which stand unchanged. */
@media print {
    @page { margin: 1in; }

    /* The screen page margin (html { margin: 50px }) is an all-media rule, so it would otherwise stack
       on top of @page's inch and print a double margin. @page owns the print margin; zero the document's
       own margin here so only the inch remains. */
    html, body { margin: 0; }

    /* Only the printable content shows; site chrome, the report selectors, and the print button
       vanish. The report is pulled to the top-left; the chrome-free lesson sheet stays in normal flow
       so a long body paginates across pages (absolute would clip it to page one). Without the
       .print-sheet re-show the sheet inherits `body *`'s hidden state and prints blank. */
    body * { visibility: hidden; }
    .report, .report *,
    .print-sheet, .print-sheet * { visibility: visible; }
    .report { position: absolute; left: 0; top: 0; width: 100%; max-width: none; }
    .report-controls { display: none; }
    .print-sheet { max-width: none; margin: 0; padding: 0; }

    /* Print typography, uniform across views, in the site's Times New Roman (inherited): body text
       11pt / 1.4 — the standard document size — and the chrome (a lesson's identity line and footer, a
       report's header) 9pt. !important overrides the inherited screen sizes (the 18px root and heading
       sizes); the chrome rule follows the body rule so it wins on equal specificity. Transcript columns
       hold because the report is laid out in real tables, not fixed-width text. */
    .print-sheet, .print-sheet *,
    .report, .report * { font-size: 11pt !important; line-height: 1.4; }

    /* The print title (the sheet's <h1>) stands larger than the 11pt body — it is the document's
       heading. `.print-sheet h1` outranks the `.print-sheet *` body rule above, so it wins even
       though both carry !important. */
    .print-sheet h1 { font-size: 18pt !important; line-height: 1.25; }

    .print-head, .print-foot,
    .report-header, .report-header * { font-size: 9pt !important; }
}

/* Phone width (dress ruling): the site's one set of small-screen proportion rules, at the
   stylesheet's end. It applies only at ≤480px — desktop rendering is untouched. Side padding is
   reduced; the display type (wordmark and headings) scales to proportion while body text stays 18px;
   and every form control is bounded to its container so nothing forces sideways scroll at 380px. */
@media (max-width: 480px) {
	html {
		margin: 15px;
	}
	.masthead > a {
		font-size: 24px;
	}
	h1 {
		font-size: 28px;
	}
	h2 {
		font-size: 22px;
	}
	input[type="text"],
	input[type="number"],
	input[type="date"],
	input[type="email"],
	input[type="password"],
	select,
	textarea {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}
}
/* Progressive Web App — the install invitation (shown/hidden by js/pwa.js). A slim, dismissible
   bar fixed to the foot of the page, in the Academy's plain dress. Structure lives in the partial;
   this is its only styling (SPEC §XII). */
.pwa-install {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	background: #ffffff;
	border-top: 1px solid #000000;
	padding: 8px 12px;
}
.pwa-install[hidden] {
	display: none;
}
.pwa-install-body {
	max-width: 40rem;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 16px;
}
.pwa-install-lead {
	margin: 0;
	font-weight: bold;
}
.pwa-install-note {
	margin: 0;
}
.pwa-install-actions,
.pwa-install-ios {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-left: auto;
}
.pwa-install-actions[hidden],
.pwa-install-ios[hidden] {
	display: none;
}

/* The Academy app section on My Account — persistent install access. The button and the "installed"
   note stay hidden until js/pwa.js reveals them (guarded so no inherited display overrides [hidden]). */
.app-install-offer[hidden],
.app-installed[hidden] {
	display: none;
}

/* Push opt-in state paragraphs on My Account — toggled by js/pwa.js (guarded [hidden]). */
.app-notify-on[hidden],
.app-notify-off[hidden],
.app-notify-blocked[hidden] {
	display: none;
}

/* The CLAA Assistant conversation — each turn a distinct block so the dialogue reads easily. The
   speaker name in the accent, the Assistant's turns on a faint ground and yours on white, and a left
   rule marking each turn. Plain dress (Amendment XIII) — no chat-bubble figuring. */
.msg {
	padding: 0.5rem 0.75rem;
	margin: 0 0 0.75rem;
	border-left: 3px solid #cccccc;
}
.msg .speaker {
	display: block;
	margin-bottom: 0.25rem;
	color: #ae0e36;
	font-weight: bold;
}
.msg.from-assistant {
	background: #f5f5f5;
	border-left-color: #ae0e36;
}