/* Brand (Bart, 7 Nov call: "logo and colour only, that's as far as I go"). --accent = Tango Orange #CF7236, colour 1 of
   his brand guide; --brand-ink = its Midnight Blue #152A4C, for accent TEXT on the light background. Contrast (WCAG):
   white on #CF7236 is 3.4:1, which passes only for large text, so every orange button carries text of at least 19px bold
   (AA "large", 3:1). Orange text on the light background (3.3:1) is not used; on the dark background it is 5.4:1. */
:root { --ink: #1d1d1f; --muted: #6b6b70; --line: #e3e3e6; --bg: #fafaf8; --accent: #cf7236; --brand-ink: #152a4c; --ok: #15803d; }
@media (prefers-color-scheme: dark) { :root { --ink: #f2f2f3; --muted: #a1a1a8; --line: #333338; --bg: #141416; --brand-ink: #cf7236; } }
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* .btn sets display:flex, which would otherwise beat the hidden attribute */
body { margin: 0; font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); }
main { max-width: 560px; margin: 0 auto; padding: 20px 16px calc(32px + env(safe-area-inset-bottom)); }
.brand { margin: 0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
h1 { margin: 4px 0 2px; font-size: 26px; }
.job { margin: 0; font-weight: 600; }
.who { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.wide { width: 100%; margin-top: 16px; }
.btn:disabled { opacity: .5; }
.list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
.item { display: grid; grid-template-columns: 72px 1fr auto; gap: 10px; align-items: start; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.item img, .item .ph { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; background: var(--line); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); }
.item .name { font-size: 13px; color: var(--muted); word-break: break-all; margin-bottom: 6px; }
.item textarea { width: 100%; min-height: 44px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 15px; background: transparent; color: var(--ink); resize: vertical; }
.item .x { border: 0; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; padding: 4px 6px; cursor: pointer; }
.item .state { font-size: 13px; color: var(--muted); }
.status { min-height: 1.4em; color: var(--muted); font-size: 14px; }
.notice { padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.notice.ok strong { color: var(--ok); }
.stack { display: grid; gap: 10px; }
.stack label { font-weight: 600; font-size: 14px; }
.stack input { min-height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 17px; background: transparent; color: var(--ink); }
.link { border: 0; background: none; color: var(--muted); text-decoration: underline; font: inherit; font-size: 14px; padding: 6px 0; cursor: pointer; justify-self: start; }
/* v2 (7 Nov 2026): home list, big buttons, carousel, files */
h2 { font-size: 17px; margin: 28px 0 10px; }
.muted { color: var(--muted); font-size: 14px; margin: 0; }
.jobs { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.jobcard { width: 100%; min-height: 64px; padding: 14px 16px; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: transparent; color: var(--ink); font: inherit; font-size: 18px; font-weight: 600; cursor: pointer; }
.big { display: grid; gap: 12px; margin-top: 8px; }
.btn.huge { min-height: 84px; font-size: 21px; border-radius: 16px; }
.link.small { display: inline-block; margin-top: 8px; }
.carousel { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.carousel figure { margin: 0; flex: 0 0 auto; scroll-snap-align: start; }
.carousel img, .carousel .ph { width: 112px; height: 112px; object-fit: cover; border-radius: 10px; background: var(--line); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); }
.files { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.files li { display: grid; padding: 12px 0; border-bottom: 1px solid var(--line); }
.files a, .files span { font-weight: 600; color: var(--ink); word-break: break-word; }
.files small { color: var(--muted); }
/* 7 Nov 2026 (Krystof's phone test): prominent "All jobs", no gap under the buttons, previews, the viewer */
.btn.back { min-height: 48px; margin: 0 0 12px; padding: 0 16px; font-size: 17px; justify-content: flex-start; width: 100%; }
.link.small { margin-top: 6px; }
.list:empty { display: none; }
h2 { margin-top: 20px; }
.carousel figure { cursor: pointer; }
.files li { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; }
.files li.tap { cursor: pointer; }
.fthumb { width: 56px; height: 56px; border-radius: 8px; background: var(--line); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); overflow: hidden; position: relative; }
.fthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fname { font-weight: 600; word-break: break-word; display: block; }
/* 7 Nov 2026 (Bart's call): the brand. The logo replaces the "BoruStructures" text label; orange marks what you press. */
/* Clear space (brand check, 7 Nov 2026): Brand guide p.9 keeps 2x free round the logo, x being the gap between the mark and
   the wordmark (38 of the logo's 166.5 units, so 8.3px at 36px tall): 2x = 17px. The 14px gap to the heading (the h1's 4px
   top margin collapses into it) was inside that zone, so 18px. */
.logo { display: block; margin: 0 0 18px; }
.logo img { display: block; height: 36px; width: auto; } /* the guide's web minimum is 32px */
.btn.primary { font-size: 19px; font-weight: 700; } /* white on orange needs AA large text: 19px bold (see :root) */
.btn:focus-visible, .jobcard:focus-visible, .link:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1 { color: var(--brand-ink); }
/* The note sheet (Krystof, 10 Nov 2026: Add note = dictation into text, then edit, then Submit). Full screen above the job;
   the banner on top is the brand's orange with 19px bold white text (AA large, see :root), the Stop button 84px tall. */
.sheet { position: fixed; inset: 0; z-index: 9; background: var(--bg); overflow: auto; padding: calc(16px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); }
.listen, .edit { max-width: 560px; margin: 0 auto; display: grid; gap: 14px; }
.banner { margin: 0; display: flex; align-items: center; gap: 12px; padding: 18px 16px; border-radius: 14px; background: var(--accent); color: #fff; font-size: 19px; font-weight: 700; line-height: 1.3; }
.banner strong { font-weight: 800; }
.dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 7px; background: #fff; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }
.live { margin: 0; min-height: 30vh; padding: 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 20px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.live:empty { display: none; }
.center { text-align: center; justify-self: center; }
.btn.stop { min-height: 84px; font-size: 24px; }
.edithead { margin: 4px 0 0; font-size: 19px; }
.hint { margin: 0; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--accent); font-size: 17px; font-weight: 600; }
.edit textarea { width: 100%; min-height: 200px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; font: inherit; font-size: 18px; background: transparent; color: var(--ink); resize: vertical; }
.editbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.editbtns .btn { min-height: 60px; font-size: 18px; }
/* A note in the "Sent today" carousel: a text card the height of a photo, the date and the sender on top, the text cut
   after four lines (tap = the whole text in the viewer). */
.carousel figure.notecard { width: 196px; height: 112px; padding: 9px 11px; border-radius: 10px; background: var(--line); display: flex; flex-direction: column; gap: 2px; overflow: hidden; color: var(--ink); }
.notewhen { font-size: 12px; color: var(--muted); font-weight: 600; }
.notefrom { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notetext { font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; white-space: pre-line; }
.notecard .notefrom + .notetext { -webkit-line-clamp: 3; line-clamp: 3; }
.fname.clamp { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; }
.notefull { align-self: start; width: 100%; padding: 8px 20px 40px; color: #f2f2f3; font-size: 19px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.notefull .notemeta { color: #a1a1a8; font-size: 15px; margin: 0 0 10px; }
/* The viewer (7 Nov 2026; Bart's call: zoom inside it, and a close button that is ALWAYS visible). */
.viewer { position: fixed; inset: 0; z-index: 10; background: #000; display: grid; grid-template-rows: auto minmax(0, 1fr); touch-action: pan-x pan-y; }
/* The bar leaves room on the right for the close button, which is NOT in it (see .vclose). */
.vbar { display: flex; gap: 12px; align-items: center; min-height: calc(72px + env(safe-area-inset-top)); padding: calc(10px + env(safe-area-inset-top)) calc(80px + env(safe-area-inset-right)) 10px calc(14px + env(safe-area-inset-left)); color: #fff; font-size: 15px; }
.vbar span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vlink { color: #fff; font-weight: 600; padding: 12px 4px; }
/* position: fixed, on top of everything, inside the phone's safe area (notch, rounded corners), 56px across (above the
   44–48px minimum tap target), white ring on a dark disc so it shows on a white drawing and on a black photo alike. */
.vclose { position: fixed; top: calc(8px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right)); z-index: 11; width: 56px; height: 56px; border-radius: 28px; border: 2px solid rgba(255,255,255,.9); background: rgba(0,0,0,.65); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.vclose:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* The scrolling box. touch-action: one-finger panning only, so the browser never zooms the page (which would push the
   close button off screen); the app's own pinch handles zoom (app.js). */
.vbody { overflow: auto; touch-action: pan-x pan-y; overscroll-behavior: contain; position: relative; }
.vzoom { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.vzoom.image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vzoom.pdf { display: block; height: auto; padding: 8px; }
.pdfpage { width: 100%; background: #fff; margin: 0 0 8px; }
.pdfpage canvas { display: block; width: 100%; height: 100%; }
.vbody iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.vbody .status { color: #ddd; padding: 0 20px; text-align: center; }
/* Where dictation does not work the "Dictate again" button is hidden: Submit then takes the whole row. The empty status
   line under the buttons takes no space until it says something. */
#redictate[hidden] + #noteSubmit { grid-column: 1 / -1; }
.edit .status:empty { display: none; }