/* page.css — styling for the standalone pages that cannot use bank.css.
 *
 * Served publicly at /l/page.css (no session, no capability) because these pages render
 * where the VIEW-gated /v/file/bank.css cannot be loaded: the login and invite pages
 * (pre-auth), the login-failed / locked-out / signed-out / shutdown / Epic-status
 * confirmations, the styled error pages (SimpleHttpServer.sendErrorHtml), the
 * upload-helper landing (ADD-only role, no VIEW), and the guest share view. Embedded
 * <style> blocks are NOT an option — the strict CSP (style-src 'self') blocks them —
 * so every such page links this file instead.
 *
 * Kept deliberately small and high-contrast (large legible text, visible focus states)
 * per the accessibility direction. Page-specific layouts are scoped under body classes
 * (p-card, p-upload, p-shared) so the shared base rules cannot collide.
 *
 * Dark mode: the prefers-color-scheme block at the end of this file. These pages render
 * before sub.js (and its localStorage theme choice) is available, so they follow the
 * DEVICE theme — the same thing the app's "Auto" setting does. The guest share view
 * (p-shared) stays deliberately light: it renders record content, including stored
 * snapshot HTML, as a light document — the same principle bank.css applies to snapshots.
 */

/* ── Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: #f0f4f8; color: #222;
       font-size: 112.5%; line-height: 1.5; }
input:focus-visible, button:focus-visible, a:focus-visible {
       outline: 3px solid #2d6a9f; outline-offset: 2px; }

/* ── Centered-card pages (login, invite, confirmations, error pages) ── */
body.p-card { display: flex; flex-direction: column; justify-content: center;
       align-items: center; min-height: 100vh; padding: 1rem; }
.card { background: #fff; border-radius: 8px; padding: 2rem 2.5rem;
       box-shadow: 0 2px 8px rgba(0,0,0,.12); width: 100%; max-width: 480px;
       text-align: center; }
.card h2 { margin: 0 0 1rem 0; font-size: 1.4rem; }
.card p  { color: #444; margin: 0 0 1rem 0; }
.tone-ok   { color: #1e8449; }   /* success headings */
.tone-err  { color: #c0392b; }   /* error / warning headings */
.tone-info { color: #2d6a9f; }

/* Forms on the card pages (login, invite) */
.card form { text-align: left; margin-top: .5rem; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; color: #333; margin-bottom: .35rem; }
input[type=text], input[type=password] { width: 100%; padding: .65rem .8rem;
       font-size: 1rem; border: 1px solid #999; border-radius: 4px; background: #fff; }
button.primary { width: 100%; padding: .8rem; font-size: 1.05rem; background: #2d6a9f;
       color: #fff; border: none; border-radius: 4px; cursor: pointer; margin-top: .25rem; }
button.primary:hover { background: #1f5080; }
.msg { min-height: 1.4rem; margin-top: 1rem; color: #c0392b; }

/* Utility: toggled by script (the strict CSP forbids inline style attributes). */
.hidden { display: none; }

/* Error pages (SimpleHttpServer.sendErrorHtml) */
.code { font-size: 4rem; font-weight: 700; line-height: 1; margin-bottom: .4rem; }
.code-3xx { color: #e67e22; }
.code-4xx { color: #c0392b; }
.code-5xx { color: #8e44ad; }
.reason  { font-size: 1.3rem; color: #333; margin-bottom: 1rem; }
.detail  { font-size: .95rem; color: #555; margin-bottom: 2rem; line-height: 1.5; }
.actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.btn { display: inline-block; padding: .6rem 1.4rem; border-radius: 4px; font-size: .95rem;
       text-decoration: none; cursor: pointer; border: none; }
.btn-back { background: #2d6a9f; color: #fff; }
.btn-home { background: #fff; color: #2d6a9f; border: 1px solid #2d6a9f; }
.btn:hover { opacity: .85; }

/* ── Upload-helper landing (banner + card + footer) ───────────────── */
body.p-upload { display: flex; flex-direction: column; min-height: 100vh; }
.banner { background: #2d6a9f; color: #fff; padding: 1rem 2rem; display: flex;
       justify-content: space-between; align-items: center; }
.banner h1 { margin: 0; font-size: 1.2rem; }
.banner form { margin: 0; }
.banner button { background: transparent; border: 1px solid #cde; color: #fff;
       padding: .3rem .8rem; border-radius: 4px; cursor: pointer; font-size: .9rem; }
body.p-upload main { flex: 1; display: flex; justify-content: center;
       align-items: flex-start; padding: 3rem 1rem; }
body.p-upload .card { text-align: left; max-width: 520px; }
input[type=file] { display: block; width: 100%; padding: .6rem; border: 1px solid #999;
       border-radius: 4px; margin-bottom: 1rem; font-size: 1rem; background: #fafcff; }
.status-line { margin-top: 1.2rem; color: #2d6a9f; min-height: 1.4rem; }
footer.page-foot { text-align: center; padding: .75rem; font-size: .8rem; color: #555; }

/* ── Guest share view ─────────────────────────────────────────────── */
body.p-shared { background: #fff; color: #111; padding: 1em; font-size: 118%; }
body.p-shared h1 { font-size: 1.5em; }
body.p-shared h2 { font-size: 1.2em; margin-top: 1.2em; border-bottom: 1px solid #ccc; }
body.p-shared section { margin-bottom: 1.5em; }
body.p-shared .block { white-space: pre-wrap; }
/* Emergency-file snapshot content uses bank.css class names (it also renders inside the
   app); mirror the two it needs so a guest sees the same line breaks and muted fallbacks. */
body.p-shared .noteDisplay { white-space: pre-wrap; padding: 0.8rem 1rem;
		border-left: 4px solid #2d6a9f; background: #f4f8fc; }
body.p-shared .muted-note { color: #555; }
body.p-shared table { border-collapse: collapse; }
body.p-shared td, body.p-shared th { padding: 3px 8px; }
.muted { color: #555; }

/* ── Emergency guest view (the standing link, read under pressure) ───
 * Whoever opens this is often a stranger, on a phone, in a hurry, about someone who
 * cannot speak for themselves. Everything here buys legibility at arm's length: larger
 * base type, headings that separate the sections at a glance, and the patient's name and
 * the file's age stated before any content. Layered on top of p-shared, not instead of it. */
body.p-emergency { font-size: 128%; padding: 1em 1.1em 2em 1.1em; }
body.p-emergency h1 { font-size: 1.6em; margin: 0 0 .15em 0; }
body.p-emergency .patientName { font-size: 1.4em; font-weight: 700; margin: 0 0 .15em 0; }
body.p-emergency .preparedOn { font-weight: 600; color: #333; margin: .2em 0 1em 0; }
body.p-emergency h2 { font-size: 1.35em; margin-top: 1em; }
body.p-emergency h3 { font-size: 1.15em; margin: 1.1em 0 .3em 0; }
body.p-emergency .noteDisplay { border-left-width: 6px; padding: .9rem 1.1rem;
       margin: 0 0 .8em 0; }
body.p-emergency section { margin-bottom: 1.2em; }
.preparedOn { color: #333; }

/* ── Dark mode (follows the device — see the header comment) ──────────
 * Values mirror the html.themeDark palette in bank.css (warm dark family,
 * #2c5eb3 accent fills, brightened tone colours) so login → app does not jar. */
@media (prefers-color-scheme: dark) {
	body { background: #1d1a15; color: #eae6da; color-scheme: dark; }
	input:focus-visible, button:focus-visible, a:focus-visible {
	       outline-color: #b7cdf7; }

	.card { background: #26221a; box-shadow: 0 2px 8px rgba(0,0,0,.6); }
	.card p { color: #cfc8b4; }
	.tone-ok   { color: #5fd08a; }
	.tone-err  { color: #ff8a8a; }
	.tone-info { color: #a9c3f2; }

	.field label { color: #d6d0c0; }
	input[type=text], input[type=password] { background: #1d1a15; color: #eae6da;
	       border-color: #564e39; }
	button.primary { background: #2c5eb3; }
	button.primary:hover { background: #244e96; }
	.msg { color: #ff8a8a; }

	.code-3xx { color: #f0a860; }
	.code-4xx { color: #ff8a8a; }
	.code-5xx { color: #b19bf5; }
	.reason  { color: #eae6da; }
	.detail  { color: #b3ab90; }
	.btn-back { background: #2c5eb3; }
	.btn-home { background: #26221a; color: #a9c3f2; border-color: #6b9ef5; }

	input[type=file] { background: #1d1a15; color: #eae6da; border-color: #564e39; }
	.status-line { color: #a9c3f2; }
	footer.page-foot { color: #b3ab90; }

	/* Light island: the guest share view renders record content (including stored
	 * snapshot HTML) as a light document, like viewing a PDF. Its own background/
	 * colour rules above already out-rank the plain body override; re-assert
	 * color-scheme so native controls and scrollbars stay light with it. */
	body.p-shared { color-scheme: light; }
}

/* ── Printing the guest share view ───────────────────────────────────
 * A shared record — an emergency file above all — gets printed: taped inside a cupboard
 * door, handed to a relative, put in a chart. Without these rules it prints the screen
 * layout, with sections split across page breaks and tinted panels wasting toner. Only
 * p-shared is styled; the app's own pages link bank.css, which carries its own print rules. */
@media print {
	body.p-shared { background: #fff; color: #000; padding: 0; font-size: 11pt; }
	body.p-emergency { font-size: 12pt; padding: 0; }
	/* Keep a section whole where it fits, and never leave a heading stranded at the foot
	   of a page — a contacts heading on one page and the numbers on the next is exactly
	   the failure this page cannot afford. */
	body.p-shared section { break-inside: avoid; page-break-inside: avoid; }
	body.p-shared h1, body.p-shared h2, body.p-shared h3 {
	       break-after: avoid; page-break-after: avoid; }
	body.p-shared .noteDisplay { background: transparent; border-left: 3px solid #000; }
	body.p-shared .muted, body.p-shared .muted-note, body.p-shared .preparedOn { color: #000; }
	/* The URL behind a link is meaningless on paper, and underlines cost legibility. */
	body.p-shared a { color: #000; text-decoration: none; }
}