/* Tokens from the design mockups (Main/Entry/PrintLog.dc.html). */
:root
{
	--navy: #1B2A57;
	--navy-hover: #0F1A3A;
	--sky: #C9D9EC;
	--bg: #F4F6FA;
	--surface: #FFFFFF;
	--border: #D5DDEA;
	--field-border: #B7C3D8;
	--rule: #E3E9F3;
	--dashed: #8C9BB8;
	--muted: #4A5878;
	--accent: #4F78B0;
	--warn: #9A4508;
	--warn-bg: #FDEEDF;
	--ok: #1E6B45;
	--ok-bg: #E2F2E8;
	--ink: #141B2E;
	--ink-soft: #2E3A55;
	--error: #A3242B;
	--error-bg: #FBE9EA;

	--sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--serif: "Source Serif 4", Georgia, serif;

	color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body
{
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--bg);
	color: var(--navy);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.4;
}

a { color: var(--navy); }
a:hover { color: var(--navy-hover); }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.visually-hidden
{
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- app shell ---------- */

.screen
{
	max-width: 560px;
	margin: 0 auto;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

.screen-main
{
	flex: 1;
	padding: 20px 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.hero
{
	background: var(--navy);
	color: #FFFFFF;
	padding: 28px 16px 24px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.hero-kicker
{
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sky);
}
.hero h1
{
	margin: 4px 0 0;
	font-family: var(--serif);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
}
.hero .icon-button { color: #FFFFFF; }
.hero .icon-button:hover { background: rgba(255,255,255,0.12); color: #FFFFFF; }

.bar
{
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	padding: 16px 8px 12px;
	display: flex;
	align-items: center;
	gap: 4px;
	position: sticky;
	top: 0;
	z-index: 2;
}
.bar h1
{
	margin: 0;
	font-family: var(--serif);
	font-size: 22px;
	font-weight: 700;
}

.icon-button
{
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--navy);
	cursor: pointer;
	text-decoration: none;
}
.icon-button:hover { background: var(--rule); }

.footer-actions
{
	position: sticky;
	bottom: 0;
	padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
	background: var(--bg);
	display: flex;
	gap: 10px;
}

/* ---------- buttons ---------- */

.btn
{
	flex: 1;
	min-height: 52px;
	padding: 0 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 12px;
	border: 1px solid var(--navy);
	background: var(--navy);
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.btn:hover { background: var(--navy-hover); color: #FFFFFF; }
.btn-outline { background: transparent; color: var(--navy); }
.btn-outline:hover { background: var(--rule); color: var(--navy); }
.btn-small { flex: 0 0 auto; min-height: 44px; padding: 0 14px; border-radius: 10px; font-size: 14px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-danger { background: transparent; border-color: var(--error); color: var(--error); }
.btn-danger:hover { background: var(--error-bg); color: var(--error); }

.link-button
{
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 0 4px;
	border: 0;
	background: transparent;
	color: var(--navy);
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

/* ---------- cards ---------- */

.card
{
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.meter { display: flex; flex-direction: column; gap: 8px; }
.meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; }
.meter-head span:first-child { font-weight: 600; }
.meter-head strong { font-family: var(--serif); font-size: 22px; }
.track { height: 10px; background: var(--rule); border-radius: 5px; overflow: hidden; }
.fill { height: 100%; background: var(--navy); border-radius: 5px; }
.fill.accent { background: var(--accent); }
.meter-note { font-size: 12px; color: var(--muted); }

.stat-row
{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	border-top: 1px solid var(--rule);
	padding-top: 14px;
}
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat span { font-size: 12px; color: var(--muted); }
.stat strong { font-size: 17px; }

.callout
{
	background: var(--sky);
	border-radius: 14px;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.callout-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.callout-kicker { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.callout-text { font-size: 14px; }
.callout.warn { background: var(--warn-bg); color: var(--warn); }
.callout.warn .btn { background: var(--warn); border-color: var(--warn); }
.callout.error { background: var(--error-bg); color: var(--error); }

.section-title
{
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
}

.week-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }

.week
{
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 14px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	color: inherit;
	text-decoration: none;
}
.week:hover { border-color: var(--dashed); color: inherit; }
.week.unsigned { border-left: 4px solid var(--warn); padding-left: 11px; }
.week-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.week-head strong { font-size: 15px; }
.week-hours { font-size: 13px; color: var(--muted); }
.week-flag { font-size: 13px; color: var(--warn); display: flex; align-items: center; gap: 6px; }

.badge
{
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 999px;
	white-space: nowrap;
}
.badge.ok { color: var(--ok); background: var(--ok-bg); }
.badge.warn { color: var(--warn); background: var(--warn-bg); }
.badge.muted { color: var(--muted); background: var(--rule); }

.empty
{
	padding: 28px 18px;
	text-align: center;
	color: var(--muted);
	background: var(--surface);
	border: 1px dashed var(--dashed);
	border-radius: 12px;
	font-size: 14px;
}

/* ---------- forms ---------- */

.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field-label { font-size: 13px; font-weight: 600; }
.field-hint { font-size: 12px; color: var(--muted); }
.field-error { font-size: 13px; color: var(--error); font-weight: 600; }

.input
{
	min-height: 48px;
	width: 100%;
	padding: 0 12px;
	border: 1px solid var(--field-border);
	border-radius: 10px;
	background: var(--surface);
	color: var(--navy);
	font-size: 16px; /* 16px stops iOS zooming on focus */
}
textarea.input { min-height: 84px; padding: 10px 12px; resize: vertical; }
.input[aria-invalid="true"] { border-color: var(--error); }

.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; min-height: 44px; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--navy); }

.hours { padding: 0; gap: 0; overflow: hidden; }
.hour-row
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--rule);
}
.hour-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hour-label label { font-size: 15px; font-weight: 600; }
.hour-label .ok { color: var(--ok); }
.hour-label .warn { color: var(--warn); }
.stepper { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.stepper button
{
	width: 44px;
	height: 44px;
	border: 1px solid var(--field-border);
	border-radius: 10px;
	background: var(--surface);
	color: var(--navy);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.stepper button:hover:not(:disabled) { background: var(--rule); }
.stepper button:disabled { opacity: 0.4; cursor: not-allowed; }
.stepper input
{
	width: 56px;
	height: 44px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	-moz-appearance: textfield;
}
.stepper input:hover:not(:disabled), .stepper input:focus { border-color: var(--field-border); background: var(--surface); }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:disabled { color: var(--navy); opacity: 1; }
.total-row
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px;
	background: var(--sky);
}
.total-row span { font-size: 15px; font-weight: 700; }
.total-row strong { font-family: var(--serif); font-size: 24px; }

.sig-head { display: flex; justify-content: space-between; align-items: center; }
.sig-pad
{
	position: relative;
	height: 120px;
	background: var(--surface);
	border: 1px dashed var(--dashed);
	border-radius: 12px;
	overflow: hidden;
}
.sig-pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.sig-pad .sig-placeholder
{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: var(--muted);
	pointer-events: none;
}
.sig-signed
{
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.sig-signed img { max-width: 100%; max-height: 72px; align-self: flex-start; }
.sig-meta { font-size: 13px; color: var(--muted); }
.lock-note
{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--ok);
	background: var(--ok-bg);
	border-radius: 10px;
	padding: 10px 12px;
}

.toast
{
	position: fixed;
	left: 50%;
	bottom: calc(96px + env(safe-area-inset-bottom));
	transform: translateX(-50%);
	max-width: calc(100% - 32px);
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--ink);
	color: #FFFFFF;
	font-size: 14px;
	box-shadow: 0 6px 24px rgba(20,27,46,0.25);
	z-index: 10;
}

.row-gap { display: flex; flex-wrap: wrap; gap: 8px; }

.period-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.period
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface);
	cursor: pointer;
	font-size: 14px;
	width: 100%;
	text-align: left;
}
.period[aria-pressed="true"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }

/* ---------- printable log (PrintLog.dc.html) ---------- */

.print-stage { overflow: hidden; }
.print-scale { transform-origin: top left; }

.sheet
{
	width: 816px;
	min-height: 1056px;
	padding: 56px 56px 48px;
	background: #FFFFFF;
	color: var(--ink);
	font-family: var(--sans);
	display: flex;
	flex-direction: column;
	gap: 18px;
	box-shadow: 0 2px 16px rgba(20,27,46,0.12);
}
.sheet + .sheet { margin-top: 24px; }
.sheet-meta { display: flex; justify-content: space-between; gap: 16px; font-size: 11px; color: var(--muted); }
.sheet-title { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.seal
{
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--navy);
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--serif);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
}
.sheet h1 { margin: 0; font-size: 19px; font-weight: 700; color: var(--navy); }
.sheet-sub { margin: 0; font-size: 11.5px; font-style: italic; color: var(--ink-soft); }
.sheet-who { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; font-size: 12px; margin-top: 4px; }

.log { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.log th, .log td { border: 1px solid var(--dashed); }
.log thead th
{
	background: var(--navy);
	color: #FFFFFF;
	border-color: var(--navy);
	padding: 8px 4px;
	font-weight: 600;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}
.log thead th.left { text-align: left; padding: 8px 6px; }
.log tbody tr { height: 34px; }
.log tbody td { padding: 4px; text-align: center; }
.log tbody td.date { text-align: left; padding: 4px 6px; }
.log tbody td.total { font-weight: 600; }
.log tbody td.sig { text-align: left; padding: 3px 6px; font-size: 10.5px; color: var(--ink-soft); }
.log td.sig .sig-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.log td.sig img { max-height: 26px; max-width: 45%; flex-shrink: 0; }
.log td.sig .unsigned { color: var(--warn); font-weight: 600; }
.log tfoot .labels td
{
	background: var(--sky);
	padding: 8px 4px;
	text-align: center;
	font-weight: 600;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}
.log tfoot .minimums td { padding: 3px; text-align: center; font-size: 10.5px; color: var(--muted); }
.log tfoot .minimums td:first-child { text-align: left; padding: 3px 6px; }
.log tfoot .sums { height: 44px; }
.log tfoot .sums th { padding: 6px; text-align: left; font-size: 14px; }
.log tfoot .sums td { text-align: center; font-size: 15px; font-weight: 700; }
.log tfoot .blackout
{
	background: var(--ink);
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}
.sheet-footer { margin: 0; font-size: 11.5px; font-weight: 700; font-style: italic; color: var(--ink-soft); }
.sheet-page { margin-top: auto; text-align: right; font-size: 10.5px; color: var(--muted); }

@media print
{
	@page { size: letter; margin: 0; }
	body { background: #FFFFFF; }
	.no-print { display: none !important; }
	.screen { max-width: none; min-height: 0; display: block; }
	.screen-main { padding: 0; display: block; }
	.print-stage { overflow: visible; width: auto !important; height: auto !important; }
	.print-scale { transform: none !important; }
	.sheet { box-shadow: none; width: 8.5in; height: 11in; min-height: 0; break-after: page; page-break-after: always; }
	.sheet:last-child { break-after: auto; page-break-after: auto; }
	.sheet + .sheet { margin-top: 0; }
}