/* Pope Technologies Brand Guide v2.0, laid out like pope-technologies.com:
   a white page, a navy header band with the logo on its white tile, white
   tiles with the website's 12px corners, one navy section for the tile grid,
   teal only as the accent (buttons, edges, small caps labels), and the teal
   bar along the bottom edge. DM Sans everywhere, Playfair Display for the one
   headline per screen. On field screens, readability in sunlight beats
   decoration: dark text on light backgrounds, nothing thin or faint.
   Components use the role tokens below; dark mode only redefines the tokens. */
:root {
  color-scheme: light;
  /* Brand colors */
  --navy: #22314e;
  --teal: #2dbaa3;
  --teal-dark: #26a892;
  --ink: #172033;
  --deep: #0f2338;
  --paper: #edf4fa;
  --light: #c8dbea;
  --slate: #869cb8;
  --white: #fff;
  --warning: #fff4cf;
  --red: #b42318;
  /* The website's faint triangle pattern for navy sections. */
  /* Data URIs stay on one line: exempt from the 120-character rule so no parser has to rejoin them. */
  --triangles: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='140' viewBox='0 0 160 140'><g fill='%23ffffff' fill-opacity='0.045'><polygon points='30,10 60,62 0,62'/><polygon points='110,40 140,92 80,92'/><polygon points='70,90 100,142 40,142'/></g></svg>");
  /* Shape */
  --radius: 12px;
  --radius-control: 8px;
  --shadow: 0 6px 20px rgba(23, 32, 51, .06);
  /* Rhythm: .75rem between things inside a card, 1.25rem between cards and screen blocks;
     text lines stop near 70 characters, and form screens use one readable column. */
  --space-in: .75rem;
  --space-between: 1.25rem;
  --measure: 48ch;
  --column: 48rem;
  /* Roles */
  --page-bg: var(--white);
  --surface: var(--white);
  --panel: var(--paper);
  --note-bg: var(--paper);
  --text: var(--ink);
  --text-muted: var(--navy);
  --heading: var(--navy);
  --line: rgba(134, 156, 184, .45);
  --line-strong: var(--slate);
  --tile-bg: var(--white);
  --tile-text: var(--navy);
  --tile-border: rgba(134, 156, 184, .35);
  --tile-hover: var(--paper);
  --control-text: var(--navy);
  --control-bg: var(--white);
  --control-border: var(--navy);
  --control-hover: var(--paper);
  --selected-bg: var(--navy);
  --selected-text: var(--white);
  --on-teal: var(--navy);
  --disabled-bg: var(--paper);
  --disabled-text: var(--navy);
  --input-bg: var(--white);
  /* The drawn chevron on selects, in the text color. */
  /* One line on purpose (see --triangles). */
  --select-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23172033' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  --accent-icon: var(--teal-dark);
  --tag-bg: var(--navy); --tag-text: var(--white);
  --sun: #b26b00;
  --ok-bg: #e3f4ec; --ok-ink: #145c38;
  --due-bg: #fff1cc; --due-ink: #6b4500;
  --bad-bg: #fde8e6; --bad-ink: #8e1b12;
  --neutral-bg: var(--paper); --neutral-ink: var(--navy);
  --cal-cell: var(--white);
  --cal-cell-other: var(--paper);
  --cal-cell-weekend: #f6f9fc;
  --cal-cell-border: rgba(134, 156, 184, .45);
  --dot-done: #1f8a50;
  --error-bg: #fff3f3; --error-ink: #9b1c1c;
  --focus: var(--deep); --focus-inner: var(--white);
  /* Edges the dark theme draws (status chips, red marks, link underlines). In light
     mode they are invisible or equal to the plain colors, so light mode renders exactly as before. */
  --chip-edge-width: 0px; --chip-accent-width: 0px;
  --ok-edge: transparent;
  --due-edge: transparent;
  --bad-edge: transparent;
  --neutral-edge: transparent;
  --filed-edge: transparent;
  --dot-missed: var(--red); --flag: var(--red); --report-edge: var(--red);
  --link-underline: currentColor;
  /* The header (the website's white top bar) and the one navy section per screen */
  --header-bg: var(--white); --header-text: var(--navy); --header-rule: var(--navy);
  --section-bg: var(--deep); --section-text: var(--white);
  --section-tile-bg: var(--white); --section-tile-text: var(--navy); --section-tile-border: var(--teal);
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--page-bg);
}

/* Dark mode: the website's fully dark version (Brand Guide, website look), built on three
   deliberate surface levels, each a step lighter, so every block reads as its own shape:
     page    #0F2338 deep navy over the faint triangle texture (body::before, kept subtle)
     card    #22314E navy: cards, the quick access panel, the Report box, the header band
     raised  #2C3E60 lighter navy: calendar days, menu and quick tiles, controls, notes in cards
   Fills this close can't reach 3:1 against each other, so the edge carries the boundary
   (WCAG 1.4.11): every card, tile and control has a solid slate #869CB8 border, measured at
   3:1 or better against the card, the raised tile and the lightest point of the texture.
   Text: white headings, paper body, light-blue secondary; slate is never text. Links are
   white with a teal underline. Teal stays an accent: today, the quick access label, the
   active language, primary buttons. The logo tile is the only white thing in the header. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: var(--deep);
  --surface: var(--navy);           /* card */
  --panel: var(--navy);             /* card */
  --note-bg: #2c3e60;               /* raised: a note inside a card stands off it */
  --text: var(--paper);
  --text-muted: var(--light);
  --heading: var(--white);
  --line: rgba(134, 156, 184, .55); /* hairline dividers inside a card (not a boundary) */
  --line-strong: var(--slate);
  --shadow: none;
  --tile-bg: #2c3e60;               /* raised */
  --tile-text: var(--white);
  --tile-border: var(--slate);      /* the edge: 3:1+ on page, card and raised */
  --tile-hover: #364b72;            /* one more step up */
  --control-text: var(--white);
  --control-bg: #2c3e60;            /* raised */
  --control-border: var(--light);   /* controls get the stronger edge */
  --control-hover: #364b72;
  --selected-bg: var(--white);
  --selected-text: var(--navy);
  --on-teal: var(--deep);
  --disabled-bg: var(--deep);
  --disabled-text: var(--light);
  --input-bg: var(--deep);          /* inputs sit in, not on */
  /* One line on purpose (see --triangles). */
  --select-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23edf4fa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  --accent-icon: var(--teal);
  --tag-bg: var(--deep); --tag-text: var(--white);
  --sun: #ffc857;
  /* Status chips: a tinted fill, a 1 px edge in the status color (3:1+ against any day cell)
     and a 3 px accent bar on the left; text 8:1 or better on its fill. Same meanings as light:
     green done, red missed, yellow due or today, gray to do, solid red you filed a report. */
  --chip-edge-width: 1px; --chip-accent-width: 3px;
  --ok-bg: #173f2e; --ok-ink: #b7f2cf; --ok-edge: #4cc38a;
  --due-bg: #4a3a10; --due-ink: #ffe08a; --due-edge: #f2c14e;
  --bad-bg: #4a1d1a; --bad-ink: #ffc2ba; --bad-edge: #ff7b6b;
  --neutral-bg: #34425a; --neutral-ink: var(--white); --neutral-edge: #aab7c9;
  --filed-edge: #ff9c90;
  /* Calendar days are raised tiles; weekends and other months a step dimmer; today a teal ring. */
  --cal-cell: #2c3e60; --cal-cell-weekend: #26375a; --cal-cell-other: #1c2b47; --cal-cell-border: var(--slate);
  --dot-done: #4cc38a; --dot-missed: #ff7b6b;
  --flag: #ff8a7a; --report-edge: #ff8a7a;  /* red marks that must stand out on navy */
  --error-bg: #3d1513; --error-ink: #ffb4ab;
  --focus: var(--white); --focus-inner: var(--deep);
  --link-underline: var(--teal);
  --header-bg: var(--navy); --header-text: var(--white); --header-rule: rgba(134, 156, 184, .4);
  --section-bg: var(--navy); --section-text: var(--white);
  --section-tile-bg: #2c3e60; --section-tile-text: var(--white); --section-tile-border: var(--slate);
}
:root[data-theme="dark"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 88% 8%, rgba(45, 186, 163, .08), transparent 32%),
    linear-gradient(105deg, rgba(15, 35, 56, .98) 0%, rgba(15, 35, 56, .95) 56%, rgba(28, 43, 70, .9) 100%),
    url("../assets/brand/triangle-bg-dark.jpg") center / cover;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 300px; line-height: 1.5; background: var(--page-bg); }
/* In dark mode the page shows the texture layer, so body itself stays clear. */
:root[data-theme="dark"] body { background: transparent; }
button, select, input { font: inherit; }
button, select, input[type="text"], input[type="number"], input[type="date"], input[type="time"] { min-height: 48px; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
/* A 3px outline with a 2px inner ring of the opposite color, so the indicator
   keeps 3:1 on white pages, navy sections and the footer alike. */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-inner); }
:root[data-theme="dark"] .app-header :focus-visible,
.quick :focus-visible,
footer :focus-visible {
  outline-color: var(--white);
  box-shadow: 0 0 0 2px var(--deep);
}
/* After each screen change the app moves focus to <main> (tabindex=-1) so a screen reader
   announces the new screen. It is not a control and can't be tabbed to, so it draws no ring;
   every button, link and field keeps the full indicator above. */
main:focus, main:focus-visible { outline: none; box-shadow: none; }

.sample-banner {
  padding: .55rem 1rem;
  color: #201700;
  background: var(--warning);
  font-weight: 700;
  text-align: center;
}
/* The header is pope-technologies.com's top bar, measured on the live site: the teal line
   along the top edge (5 px), the navy rule under it (4 px), 48 px side padding and a 68 px
   logo; under 768 px wide, 20 px and a 50 px logo. Light mode is the site's white bar: the
   full-color logo straight on white (phones get the short logo so the row fits), the app
   name in navy, and controls that read like the site's nav. */
.app-header {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  min-height: 92px;
  padding: .35rem 48px;
  border-top: 5px solid var(--teal);
  border-bottom: 4px solid var(--header-rule);
  color: var(--header-text);
  background: var(--header-bg);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0;
  border: 0;
  color: var(--navy);
  background: none;
  font-size: 1.2rem;
  font-weight: 700;
}
.brand picture { display: block; }
.brand img { display: block; width: auto; height: 68px; }
/* The app name, set off from the logo by a hairline. */
.brand span { padding-left: 1rem; border-left: 1px solid var(--line); }
.header-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.language-switch { display: flex; align-items: center; gap: .25rem; color: var(--header-text); font-weight: 600; }
.language-switch > span { margin-right: .4rem; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
/* Like the site's nav: navy words, a teal underline on hover, the active language as a teal pill
   (navy on teal, never white on teal). Still 48 px tap targets. */
.language-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  color: var(--header-text);
  background: transparent;
  font-weight: 600;
  text-underline-offset: 6px;
}
.language-switch button:hover { text-decoration: underline 2px var(--teal); }
.language-switch button[aria-pressed="true"] { color: var(--navy); background: var(--teal); text-decoration: none; }
/* Like the site's phone-number pill: a quiet navy tint. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 48px;
  padding: 0 1rem;
  border: 1px solid rgba(34, 49, 78, .2);
  border-radius: var(--radius-control);
  color: var(--header-text);
  background: rgba(34, 49, 78, .06);
  font-weight: 600;
}
.theme-toggle:hover { background: rgba(34, 49, 78, .12); }
.lang-short { display: none; }
/* Dark mode keeps the navy band with the faint triangle pattern. The logo sits on its white
   tile with a teal left edge (Brand Guide v2.0, logo on navy); the app name sits beside the
   tile in white, straight on the band. */
:root[data-theme="dark"] .app-header {
  border-bottom-width: 1px;
  background: var(--triangles) 0 0 / 160px 140px, var(--header-bg);
}
:root[data-theme="dark"] .brand { gap: .75rem; color: var(--white); }
:root[data-theme="dark"] .brand picture {
  padding: .15rem .6rem .15rem .45rem;
  border-left: 5px solid var(--teal);
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
:root[data-theme="dark"] .brand img { height: 52px; }
:root[data-theme="dark"] .brand span { padding-left: 0; border-left: 0; }
:root[data-theme="dark"] .language-switch button,
:root[data-theme="dark"] .theme-toggle {
  border: 2px solid var(--light);
  border-radius: var(--radius-control);
  background: transparent;
}
:root[data-theme="dark"] .language-switch button:hover,
:root[data-theme="dark"] .theme-toggle:hover {
  background: #2c3e60;
  text-decoration: none;
}
/* The active language is the teal pill, as in light mode; the dark-mode switch shows "on" with a
   teal edge, not a white fill, so the logo tile stays the only white element in the header. */
:root[data-theme="dark"] .language-switch button[aria-pressed="true"] {
  border-color: var(--teal);
  color: var(--deep);
  background: var(--teal);
}
:root[data-theme="dark"] .theme-toggle[aria-pressed="true"] {
  border-color: var(--teal);
  color: var(--white);
  background: transparent;
}
@media (max-width: 767px) {
  .app-header { min-height: 78px; padding-inline: 20px; }
  .brand img { height: 50px; }
}
/* Short laptop screens (768 px tall) keep the home screen in one view: the bar drops to 72 px
   with the site's 50 px phone logo (the most the 1024×768 fit check allows), on every screen,
   so it never changes size between screens. */
@media (min-width: 768px) and (max-height: 780px) {
  .app-header { min-height: 72px; }
  .brand img { height: 50px; }
  :root[data-theme="dark"] .brand img { height: 46px; }
}
/* The outbox status line: what hasn't reached the office yet. In the header from
   480 px up; on phones a slim bar just under it, so the header keeps its one row. Waiting and
   failed use the "due" yellow (red belongs to Report something); failed adds a heavier edge. */
.sync-status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-width: 48px;
  min-height: 48px;
  padding: 0 .6rem;
  border: 1px solid var(--due-ink);
  border-radius: var(--radius-control);
  color: var(--due-ink);
  background: var(--due-bg);
  font-weight: 700;
  text-align: left;
}
.sync-status[data-state="failed"] { border-width: 3px; }
.sync-status[data-state="sent"] { border-color: var(--ok-ink); color: var(--ok-ink); background: var(--ok-bg); }
.sync-status[hidden] { display: none !important; }
.sync-status .icon { width: 20px; height: 20px; }
.sync-status--bar { display: none; }
@media (max-width: 479px) {
  .sync-status--header { display: none; }
  .sync-status--bar { display: flex; width: 100%; border-width: 0 0 1px; border-radius: 0; padding: 0 20px; }
  .sync-status--bar[data-state="failed"] { border-width: 0 0 3px; }
}
/* No signal: one small word next to the outbox line while the browser is offline, and
   a quiet line under the header when a newer build is live. Neither is a button or a popup. */
.offline-tag {
  display: inline-flex;
  align-items: center;
  padding: .15rem .5rem;
  border: 1px solid var(--header-text);
  border-radius: 999px;
  color: var(--header-text);
  font-size: .9rem;
  font-weight: 700;
}
.offline-tag[hidden], .app-update[hidden] { display: none !important; }
.status-row { display: contents; }
.offline-tag--bar { display: none; }
@media (max-width: 479px) {
  /* Phones: the header keeps its one row; the word sits at the end of the outbox bar instead. */
  .offline-tag--header { display: none; }
  .status-row { display: flex; align-items: center; justify-content: flex-end; }
  .status-row .sync-status--bar { flex: 1 1 auto; width: auto; }
  .offline-tag--bar { display: inline-flex; margin: .35rem 20px; color: var(--text); border-color: var(--text); }
}
.app-update {
  margin: 0;
  padding: .5rem 20px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  background: var(--note-bg);
  font-weight: 600;
  text-align: center;
}
.sync-tag[data-state="pending"],
.sync-tag[data-state="failed"] {
  border-left-color: var(--due-ink);
  color: var(--due-ink);
  background: var(--due-bg);
}
.sync-tag[data-state="sent"] { border-left-color: var(--ok-ink); color: var(--ok-ink); background: var(--ok-bg); }
.outbox-list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.outbox-item p { margin: 0; }
.outbox-item[data-state="failed"] { box-shadow: inset 4px 0 0 var(--due-ink); }
/* Send to the office: the two choices are big toggles with a drawn box, never tiny
   checkboxes; the summary box shows only when copying did not work. */
.export-option { display: flex; align-items: center; gap: .6rem; text-align: left; }
.export-box {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 2px solid currentColor;
  border-radius: 4px;
}
.export-box .icon { width: 20px; height: 20px; }
.outbox-export textarea {
  width: 100%;
  min-height: 10rem;
  padding: .65rem;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-control);
  color: var(--text);
  background: var(--input-bg);
  font: inherit;
  font-weight: 400;
  resize: vertical;
}
main { width: min(100% - 2rem, 76rem); min-height: 65vh; margin: 0 auto; padding: 1.25rem 0 2.5rem; }
footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  align-items: center;
  justify-content: center;
  padding: .4rem 1rem;
  border-bottom: 8px solid var(--teal);
  color: var(--white);
  background: var(--deep);
  text-align: center;
  font-weight: 600;
}
/* App feedback: quiet on purpose, a footer link rather than a button on every screen. */
.footer-link {
  min-height: 48px;
  padding: 0 .25rem;
  border: 0;
  color: var(--white);
  background: none;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-underline-offset: 3px;
}
.button.report { border-color: var(--red); color: var(--white); background: var(--red); }
.button.report:hover { border-color: #8f1c13; background: #8f1c13; }
:root[data-theme="dark"] footer { border-top: 1px solid var(--line); }
/* Back and Home end every screen but home (navbar.js): full width side by side on
   phones, in the screen's own column on wider screens, just above the footer. The screen's own
   Back is hidden while the bar shows; the bar's Back does the same thing. */
.screen-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  width: min(100% - 2rem, var(--column));
  margin: 0 auto;
  padding: 0 0 1.5rem;
}
.screen-nav[hidden] { display: none; }
.screen-nav .button { width: 100%; }
body.has-screen-nav main { padding-bottom: 1.5rem; }
body.has-screen-nav #app [data-screen-back],
body.has-screen-nav #app div:has(> [data-screen-back]:only-child) {
  display: none;
}
@media (min-width: 768px) {
  .screen-nav { grid-template-columns: repeat(2, minmax(0, 14rem)); }
}
@media print { .screen-nav { display: none; } }

/* "Sections" on screens that scroll a long way (sections.js): a navy pill at the
   bottom right, like the program pages' Contents control, lifted above the Back/Home bar when
   the bar is in view. It opens a list of the screen's sections just above itself. Navy with a
   white edge in both themes: white text 12:1 on the fill, and the edge or the fill 3:1 or more
   on the white page and on the dark page. The list has the controls' edge (navy, or light blue
   in dark mode) and a teal top. Never printed. */
.sections { --sections-bottom: 16px; }
/* While the button shows, the screen ends with a strip as tall as the button and its gaps, so
   at the bottom the button sits in that strip and covers no control (a form's Print). */
body.has-sections main { padding-bottom: 5rem; }
/* And a box brought into view at the foot of the screen (a tap, a jump, typing in a JSA step's
   Hazards) stops above the button, so the button never sits on the text being typed. */
:root:has(body.has-sections) { scroll-padding-bottom: 5rem; }
.sections-button {
  position: fixed;
  z-index: 20;
  right: 16px;
  bottom: var(--sections-bottom);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-width: 48px;
  min-height: 48px;
  padding: 0 1.1rem;
  border: 2px solid var(--white);
  border-radius: 999px;
  color: var(--white);
  background: var(--navy);
  box-shadow: 0 6px 18px rgba(15, 35, 56, .3);
  font-weight: 700;
}
.sections-button[hidden] { display: none; }
/* Phones: a round 48 px button with the icon only (the word stays for screen readers),
   16 px in from the right edge, so it covers only the right end of a full-width control (a JHA
   task, the forklift check's N/A column, the JSA's address box) and never its middle. */
@media (max-width: 767px) {
  .sections-button {
    right: max(16px, env(safe-area-inset-right));
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    gap: 0;
  }
  .sections-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
  }
}
.sections-button:hover { background: var(--deep); }
.sections-button:focus-visible { outline-color: var(--deep); box-shadow: 0 0 0 2px var(--white); }
:root[data-theme="dark"] .sections-button:focus-visible {
  outline-color: var(--white);
  box-shadow: 0 0 0 2px var(--deep);
}
/* The list: a native popover placed above the button (the browser's own centering is undone),
   or the hidden-attribute fallback with the same look. Display is left to the browser so a
   closed popover stays closed. */
.sections-menu {
  position: fixed;
  z-index: 21;
  inset: auto 16px calc(var(--sections-bottom) + 56px) auto;
  width: min(22rem, calc(100vw - 32px));
  max-height: min(70vh, calc(100vh - var(--sections-bottom) - 88px));
  margin: 0;
  padding: .35rem;
  overflow: auto;
  border: 1px solid var(--control-border);
  border-top: 4px solid var(--teal);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(15, 35, 56, .25);
}
.sections-menu ul { margin: 0; padding: 0; list-style: none; }
.sections-menu li + li { border-top: 1px solid var(--line); }
.sections-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: .5rem .75rem;
  border: 0;
  border-radius: var(--radius-control);
  color: var(--control-text);
  background: transparent;
  font-weight: 700;
  text-align: left;
}
.sections-item.is-sub { padding-left: 1.75rem; font-weight: 600; }
.sections-item:hover { background: var(--control-hover); }
/* A heading the list jumps to takes focus for screen readers; like <main>, it is not a control
   and draws no ring. */
#app [tabindex="-1"]:is(h2, h3, h4):focus { outline: none; box-shadow: none; }
@media print { .sections, .sections-button, .sections-menu { display: none !important; } }

/* Playfair for the screen's one headline, with a short teal line under it. */
h1 {
  margin: 0 0 .75rem;
  color: var(--heading);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.005em;
}
h1::after { content: ""; display: block; width: 48px; height: 3px; margin-top: .55rem; background: var(--teal); }
h2, h3 { color: var(--heading); font-weight: 700; }
h2 { margin: 1.25rem 0 .5rem; font-size: 1.3rem; }
.status, .note, .error, .label-contract { margin: 0; padding: .75rem 1rem; border-radius: var(--radius-control); }
.status, .note { background: var(--note-bg); }
.error { border: 2px solid var(--error-ink); color: var(--error-ink); background: var(--error-bg); font-weight: 700; }
.label-contract {
  border-left: 5px solid var(--teal);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  background: var(--note-bg);
  font-weight: 700;
}
/* The grid gap does the spacing, so children drop their own top and bottom margins. */
.stack { display: grid; gap: var(--space-between); }
.stack > * { margin-block: 0; }
/* Form screens (everything but home) sit in one column, so cards and answer rows keep a readable width. */
main > .stack { max-width: var(--column); margin-inline: auto; }
.stack p:not([class]), .stack li, .talk-copy { max-width: var(--measure); }
.cluster { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.card {
  display: grid;
  gap: var(--space-in);
  padding: 1rem;
  border: 1px solid var(--tile-border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.card > *, .card.stack > * { margin-block: 0; }
.card.stack, .card .stack { gap: var(--space-in); }
/* A card's first heading is its title; later headings in the same card are subsections. */
.card > h2:not(:first-child) { margin-top: .5rem; font-size: 1.1rem; }
.choice-grid, .record-grid, .folder-list { display: grid; gap: .75rem; }

/* Buttons, as on the website: teal with navy text, or a navy outline. Never white on teal. */
.button,
.choice,
.attendee-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 48px;
  padding: .7rem 1.15rem;
  border: 2px solid var(--teal);
  border-radius: var(--radius-control);
  color: var(--on-teal);
  background: var(--teal);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.button:hover { border-color: var(--teal-dark); background: var(--teal-dark); }
.button.secondary { border-color: var(--control-border); color: var(--control-text); background: var(--control-bg); }
.button.secondary:hover { background: var(--control-hover); }
.button.danger { border-color: var(--error-ink); color: var(--error-ink); background: var(--control-bg); }
/* Picker choices are the website's tiles: white, 12px corners, a hairline
   border, a soft shadow and a teal edge on the left. */
.choice {
  width: 100%;
  justify-content: flex-start;
  min-height: 56px;
  border: 1px solid var(--tile-border);
  border-left: 5px solid var(--teal);
  border-radius: var(--radius);
  color: var(--tile-text);
  background: var(--tile-bg);
  box-shadow: var(--shadow);
  text-align: left;
}
.choice:hover { background: var(--tile-hover); }
.choice > span { flex: 1; }
.choice[aria-pressed="true"] { border-color: var(--teal); color: var(--on-teal); background: var(--teal); }
.choice small { margin-left: .8rem; font-weight: 500; }
.choice span > small { display: block; margin: 2px 0 0; }   /* a second line under a row's name */
.choice.folder { border-left-color: var(--navy); }
:root[data-theme="dark"] .choice.folder { border-left-color: var(--light); }
.region-line { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
.breadcrumb { margin: 0; color: var(--text-muted); font-weight: 700; }
.archived { border-style: dashed; }
.choice[disabled] {
  border-left-color: var(--slate);
  color: var(--disabled-text);
  background: var(--disabled-bg);
  box-shadow: none;
  opacity: 1;
}
.tag {
  padding: .1rem .45rem;
  border-left: 3px solid var(--teal);
  border-radius: 4px;
  color: var(--tag-text);
  background: var(--tag-bg);
  font-size: .85rem;
  font-weight: 700;
}
label { display: grid; gap: .35rem; font-weight: 700; }
select,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
.form-screen textarea {
  width: 100%;
  padding: .65rem;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-control);
  color: var(--text);
  background: var(--input-bg);
}
/* Selects draw their own box: WebKit (iPhone, iPad) ignores min-height on a native
   select and drew the lift check's Equipment Type 31 px tall. With appearance none the box is
   ours, 48 px at least, with a chevron in the text color. */
select {
  -webkit-appearance: none;
  appearance: none;
  min-height: 48px;
  padding-right: 2.75rem;
  background: var(--select-chevron) no-repeat right .8rem center / 20px 20px, var(--input-bg);
}
.talk-copy { white-space: pre-line; font-size: 1.08rem; }
.talk-subtitle { margin: 0; color: var(--heading); font-size: 1.4rem; font-weight: 700; }
.talk-lead { margin: 0; font-size: 1.08rem; }
.read-label { margin: 0; color: var(--heading); font-weight: 700; }
.attendee-list { display: grid; gap: .65rem; padding: 0; list-style: none; }
.attendee-button {
  width: 100%;
  justify-content: space-between;
  border: 1px solid var(--tile-border);
  border-radius: var(--radius);
  color: var(--tile-text);
  background: var(--tile-bg);
  box-shadow: var(--shadow);
  text-align: left;
}
.attendee-button[aria-pressed="true"] {
  border-color: var(--selected-bg);
  color: var(--selected-text);
  background: var(--selected-bg);
}
.save-row { display: grid; gap: .75rem; padding-top: .75rem; border-top: 1px solid var(--line); }
/* The note above Save and the line under it ("Mark at least one person…") keep a gap. */
.save-notes { display: grid; gap: .5rem; }
.meta { margin: 0; color: var(--text-muted); }
.record-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }
.record-head h2 { margin: 0; }
.record-list { margin: .5rem 0 0; padding-left: 1.25rem; }

/* The week's talk: its written program's quick reference, read from the program page */
.program-embed h3 { margin: 0; color: var(--heading); font-size: 1.05rem; }
.program-quick {
  display: grid;
  gap: .5rem;
  padding: .75rem 1rem;
  border-left: 5px solid var(--teal);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  color: var(--text);
  background: var(--note-bg);
}
.program-quick > *, .program-quick li > * { margin: 0; }
.program-quick ul { padding-left: 1.25rem; }
.program-quick li + li { margin-top: .25rem; }
.program-quick table { width: 100%; border-collapse: collapse; }
.program-quick th,
.program-quick td {
  padding: .4rem .5rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.program-quick thead th { color: var(--heading); }
/* The plan's own drawings: an icon at the start of a line, and the heat index scale. Both
   draw in currentColor, so they follow light and dark. */
.program-quick svg.ic { width: 1.3em; height: 1.3em; margin-right: .4em; vertical-align: -.3em; color: var(--heading); }
.program-quick ul:has(> li > svg.ic:first-child) { padding-left: 0; list-style: none; }
.program-quick li:has(> svg.ic:first-child) { padding-left: 1.75em; text-indent: -1.75em; }
.program-quick li > svg.ic:first-child { margin-right: .45em; }
.program-quick svg.band-scale { display: block; width: 100%; max-width: 22rem; height: auto; color: var(--text); }
.program-quick figcaption { margin-top: .35rem; color: var(--text-muted); font-size: .95rem; }
.program-open { margin: 0; }
.program-open a,
.program-sections a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--control-text);
  font-weight: 700;
  text-decoration-color: var(--link-underline);
  text-underline-offset: 3px;
}
/* list-item keeps the open/closed triangle, so it reads as something to tap (as "Why we ask" does). */
.program-sections summary {
  display: list-item;
  min-height: 48px;
  padding: .7rem 0;
  color: var(--control-text);
  font-weight: 700;
  cursor: pointer;
}
.program-sections ul { margin: 0; padding-left: 1.25rem; }

/* Attendance: confirm in the app, or the paper sheet and its photo */
/* A talk's attendee row: the name as text, then both ways to attend as buttons; once marked,
   how the person attended and a "Change" button. */
.attendee-row {
  display: grid;
  gap: .6rem;
  padding: .75rem;
  border: 1px solid var(--tile-border);
  border-radius: var(--radius);
  color: var(--tile-text);
  background: var(--tile-bg);
  box-shadow: var(--shadow);
}
.attendee-row.is-marked { grid-template-columns: 1fr auto; align-items: center; border-left: 5px solid var(--teal); }
.attendee-name {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .15rem .75rem;
  margin: 0;
}
.attendee-state { font-weight: 600; }
.attendee-ways { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.attendee-change { padding-inline: 1rem; }
.paper-sheet h2 { margin: 0; }
.sheet-photo { display: grid; gap: .35rem; margin: 0; }
.sheet-photo img {
  display: block;
  width: 100%;
  max-width: 28rem;
  height: auto;
  border: 1px solid var(--tile-border);
  border-radius: var(--radius-control);
}
.meta.warn, .meta.ok { padding: .35rem .6rem; border-radius: var(--radius-control); font-weight: 700; }
.meta.warn { color: var(--due-ink); background: var(--due-bg); }
.meta.ok { color: var(--ok-ink); background: var(--ok-bg); }

/* Missed talks: exceptions only, with a drafted nudge to copy */
.missed-crew { align-content: start; }   /* a card next to an open draft stays compact */
.missed-crew h2 { font-size: 1.15rem; }
.nudge-draft textarea {
  width: 100%;
  min-height: 12rem;
  padding: .75rem;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-control);
  color: var(--text);
  background: var(--input-bg);
  font: inherit;
  font-weight: 400;
  line-height: 1.45;
  resize: vertical;
}
.source { color: var(--text-muted); font-size: .92rem; }
.jha-task-grid { display: grid; gap: .65rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
/* Answers share one row when the words fit (Yes / No / N/A on a phone); a long word takes its own row
   rather than spilling. */
.jha-answer-grid { display: flex; flex-wrap: wrap; gap: .65rem; }
.jha-answer-grid .jha-answer { flex: 1 1 5.5rem; }
.jha-task,
.jha-answer,
.pick {
  min-height: 48px;
  padding: .7rem;
  border: 2px solid var(--control-border);
  border-radius: var(--radius-control);
  color: var(--control-text);
  background: var(--control-bg);
  font-weight: 700;
}
.jha-task[aria-pressed="true"],
.jha-answer[aria-pressed="true"],
.pick[aria-pressed="true"] {
  color: var(--selected-text);
  background: var(--selected-bg);
}
/* A JHA rule note: collapsed under the question, opened with a full-size tap target. */
/* Also the folded "Details added by the app" on the feedback form. */
.rule-note summary,
.feedback-details summary {
  display: list-item;
  min-height: 48px;
  padding: .7rem 0;
  color: var(--control-text);
  font-weight: 700;
  cursor: pointer;
}
.rule-note p { max-width: var(--measure); margin: .25rem 0 0; color: var(--text-muted); }
/* A hazard card: the hazard as a bold lead line, each question right under it as the
   largest text, its answers right after, then the quieter lines. */
.jha-control { display: grid; gap: .5rem; padding-top: var(--space-in); border-top: 1px solid var(--line); }
.jha-hazard { margin: 0; color: var(--heading); font-size: 1rem; font-weight: 700; line-height: 1.35; }
.jha-q { display: grid; gap: .5rem; }
.jha-q + .jha-q { margin-top: .25rem; padding-top: var(--space-in); border-top: 1px dashed var(--line); }
.jha-line .meta { font-weight: 400; }
.jha-forecast { margin: 0; color: var(--heading); font-size: 1.125rem; font-weight: 700; }
.jha-question {
  max-width: var(--measure);
  margin: 0;
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}
/* Named roles: one line, "First-aid card holder: Name · Change" or "…: not set · Set"; the
   picker (the job's crew as big buttons, no dropdowns) opens only on that tap. */
.role-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 .75rem;
  margin: 0;
  color: var(--text);
}
.role-line .link-button { justify-self: end; min-width: 48px; }
/* Phones: the Change / Set button goes under the role, at the left, so the round Sections button
   at the right edge never sits on it. */
@media (max-width: 767px) {
  .role-line { grid-template-columns: minmax(0, 1fr); }
  .role-line .link-button { justify-self: start; }
}
.role-name { white-space: nowrap; }
.card > .role-line + .role-line { padding-top: .5rem; border-top: 1px solid var(--line); }
.role-pick {
  display: grid;
  gap: .5rem;
  padding: .75rem;
  border: 1px solid var(--tile-border);
  border-left: 5px solid var(--teal);
  border-radius: var(--radius-control);
  background: var(--note-bg);
}
.role-pick-label { margin: 0; color: var(--heading); font-weight: 700; }
.role-choices { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.role-type { display: grid; gap: .5rem; }
.role-type label { font-weight: 600; }
.role-list {
  display: grid;
  gap: .5rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.role-list li { display: grid; max-width: none; }
.role-label { color: var(--text-muted); font-size: .9rem; font-weight: 600; }
.jha-review {
  padding: .65rem;
  border-left: 5px solid #9a6700;
  color: #201700;
  background: var(--warning);
  font-weight: 700;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.link-button {
  min-height: 48px;
  padding: 0 .25rem;
  border: 0;
  color: var(--control-text);
  background: none;
  font-weight: 700;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-underline-offset: 3px;
}
.pill {
  flex: none;
  margin-left: auto;
  padding: .1rem .55rem;
  border-radius: .4rem;
  font-size: .9rem;
  font-weight: 700;
  white-space: nowrap;
}
.pill.done,
.chip.done,
.witem.done {
  color: var(--ok-ink);
  background: var(--ok-bg);
  border: var(--chip-edge-width) solid var(--ok-edge);
  border-left-width: var(--chip-accent-width);
}
.pill.due,
.chip.due,
.witem.due {
  color: var(--due-ink);
  background: var(--due-bg);
  border: var(--chip-edge-width) solid var(--due-edge);
  border-left-width: var(--chip-accent-width);
}
.pill.missed,
.chip.missed,
.witem.missed {
  color: var(--bad-ink);
  background: var(--bad-bg);
  border: var(--chip-edge-width) solid var(--bad-edge);
  border-left-width: var(--chip-accent-width);
}
.pill.filed,
.chip.filed,
.witem.filed {
  color: var(--white);
  background: var(--red);
  border: var(--chip-edge-width) solid var(--filed-edge);
  border-left-width: var(--chip-accent-width);
}
.pill.neutral,
.chip.neutral,
.witem.neutral {
  color: var(--neutral-ink);
  background: var(--neutral-bg);
  border: var(--chip-edge-width) solid var(--neutral-edge);
  border-left-width: var(--chip-accent-width);
}

/* ---------- Home: schedule on top, menu below ---------- */
.home { display: grid; gap: .75rem; }
.who { display: flex; gap: .75rem; align-items: flex-start; justify-content: space-between; }
.who p { margin: 0; }
.who-name {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .4rem;
  align-items: center;
  color: var(--heading);
  font-size: 1.15rem;
  font-weight: 700;
}
.who-name .link-button { font-size: 1rem; }
.who-role { color: var(--text-muted); font-weight: 500; }
.who-place { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; color: var(--text); }
.who-place .icon { flex: none; width: 20px; height: 20px; color: var(--accent-icon); }
/* Phones: the pin stays on the line with the place name; a long name wraps beside it. */
.who-main .who-place > span { flex: 1 1 10rem; min-width: 0; }
.cal { display: grid; gap: .5rem; }
/* Phones: ‹ Day Month › (no Week on phones, the day cards already scroll through it). */
.cal-bar {
  display: grid;
  grid-template-columns: 48px repeat(2, minmax(0, 1fr)) 48px;
  overflow: hidden;
  border: 2px solid var(--control-border);
  border-radius: var(--radius-control);
  background: var(--control-bg);
}
.cal-bar button {
  min-height: 48px;
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--control-text);
  background: var(--control-bg);
  font-weight: 700;
}
.cal-bar button:last-child { border-right: 0; }
.cal-bar button[aria-pressed="true"] { color: var(--selected-text); background: var(--selected-bg); }
.cal-arrow { display: grid; place-items: center; }

.strip {
  position: relative;
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  padding: .15rem 7% .6rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.strip::-webkit-scrollbar { display: none; }
.day {
  flex: 0 0 86%;
  min-height: 14.5rem;
  padding: .7rem .9rem;
  border: 1px solid var(--tile-border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  scroll-snap-align: center;
  cursor: pointer;
}
.day.is-today { border: 3px solid var(--teal); }
.day-head { margin: 0 0 .25rem; color: var(--heading); font-family: inherit; font-size: 1rem; text-wrap: balance; }
.day-empty { margin: 1.5rem 0 0; color: var(--text-muted); }
.day-note { margin: .5rem 0 0; color: var(--text-muted); font-size: .9rem; }
.item {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  min-height: 48px;
  padding: .35rem .1rem;
  border: 0;
  border-top: 1px solid var(--line);
  color: var(--text);
  background: none;
  font-weight: 600;
  text-align: left;
}
button.item:hover { background: var(--control-hover); }
.item .icon { flex: none; color: var(--heading); }
/* A long status (Spanish "Para el viernes") drops under the name instead of squeezing it to
   one word a line. */
.item { flex-wrap: wrap; }
.item-label { flex: 1 1 5rem; min-width: 0; }

.month { display: grid; gap: .35rem; }
.month-title { margin: 0; color: var(--heading); font-size: 1.15rem; font-weight: 700; }
.mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mhead { padding: .1rem 0; color: var(--text-muted); font-size: .85rem; font-weight: 700; text-align: center; }
.mcell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  min-height: 52px;
  padding: .25rem .15rem;
  border: 1px solid var(--cal-cell-border);
  border-radius: var(--radius-control);
  color: var(--text);
  background: var(--cal-cell);
  font-weight: 700;
}
.mcell.is-other { color: var(--text-muted); background: var(--cal-cell-other); }
.mcell.is-today { border: 3px solid var(--teal); }
.mcell.is-focus:not(.is-today) { border: 2px solid var(--control-border); }
.mdot { width: 9px; height: 9px; border-radius: 50%; }
.mdot.done { background: var(--dot-done); }
.mdot.missed { background: var(--dot-missed); }
.mdot.open { background: var(--line-strong); }
.mflag { position: absolute; top: 2px; right: 2px; color: var(--flag); }
.mflag .icon { width: 14px; height: 14px; stroke-width: 2.5; }
.chip {
  display: block;
  width: 100%;
  overflow: hidden;
  padding: .05rem .3rem;
  border-radius: .3rem;
  font-size: .8rem;
  font-weight: 600;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip-more { color: var(--text-muted); font-size: .8rem; }
.month-legend { margin: 0; color: var(--text-muted); font-size: .9rem; }
/* On phones the month borrows most of the side gutter so each day stays 48px wide. */
.home--phone .mgrid { gap: 2px; margin-inline: -.75rem; }

/* The menu is a stack of tiles on white; Report something is the one red tile. */
.menu { display: grid; gap: .5rem; }
.menu-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 56px;
  padding: 0 1rem;
  border: 1px solid var(--tile-border);
  border-radius: var(--radius);
  color: var(--tile-text);
  background: var(--tile-bg);
  box-shadow: var(--shadow);
  font-size: 1.1rem;
  font-weight: 700;
  text-align: left;
}
.menu-item span { flex: 1; }
.menu-item:hover { background: var(--tile-hover); }
.menu-item.menu-report { border-color: var(--report-edge); color: var(--white); background: var(--red); }
.menu-item.menu-report:hover { border-color: #8f1c13; background: #8f1c13; }

/* Quick access is the screen's navy section: the triangle pattern, a teal
   caps label, and tiles with a teal border (the website's tile sections). */
.quick {
  display: grid;
  gap: .75rem;
  padding: .85rem 1rem 1rem;
  border-radius: var(--radius);
  color: var(--section-text);
  background: var(--triangles) 0 0 / 160px 140px, var(--section-bg);
}
.quick-head { display: flex; align-items: center; justify-content: space-between; }
.quick-head h2 { margin: 0; color: var(--teal); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.quick .link-button { color: var(--section-text); }
.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.quick-tile {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 64px;
  padding: .5rem .75rem;
  border: 1px solid var(--section-tile-border);
  border-radius: var(--radius-control);
  color: var(--section-tile-text);
  background: var(--section-tile-bg);
  font-weight: 700;
  text-align: left;
}
.quick-tile:hover { border-width: 2px; padding: calc(.5rem - 1px) calc(.75rem - 1px); }
:root[data-theme="dark"] .day.is-today {
  background: radial-gradient(circle at 88% 8%, rgba(45, 186, 163, .14), transparent 32%), var(--surface);
}

.pick-grid { display: grid; gap: .65rem; }
.report-where { display: flex; gap: .4rem; align-items: center; margin: 0; font-weight: 700; }
.cert h2 { font-size: 1.15rem; }

/* Phones: keep the header to one row so the schedule and menu fit the screen. */
@media (max-width: 479px) {
  /* The role stays on phones too: the signed-in person sees which account they picked. */
  :root[data-theme="dark"] .brand picture { padding-right: .45rem; }
  :root[data-theme="dark"] .brand img { height: 46px; }
  .header-tools { gap: .35rem; }
  .brand span,
  .language-switch > span,
  .lang-long,
  .theme-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
  }
  .lang-short { display: inline; }
  .language-switch button, .theme-toggle { min-width: 48px; padding: 0 .6rem; }
}

/* Up to small laptops, the header stays one row: the "Language" word is for
   screen readers only (the nav keeps its label), the buttons say the rest. */
@media (max-width: 1099px) {
  .language-switch > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
  }
}

/* Tablets in portrait: the month sits on top, the menu below in two columns. */
@media (min-width: 700px) {
  .day { flex-basis: 40%; min-height: 17rem; }
  .strip { padding-inline: 30%; }
  .mcell { align-items: stretch; min-height: 5.25rem; }
  .mnum { padding-left: .15rem; text-align: left; }
  .home--tablet .menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home--tablet .menu-report { grid-column: 1 / -1; }
  /* 48 px tiles, so an upright iPad's month and menu fit one view without the month running
     under the menu. */
  .home--tablet .menu-item { min-height: 48px; }
  .pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Tablets and laptops: the whole home screen in one view ---------- */
body.fit { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
body.fit .sample-banner { padding-block: .2rem; }
body.fit .app-header { padding-block: 0; }
body.fit .brand { padding-block: 0; }
/* If a screen is too short for everything, the middle scrolls; nothing hides under the footer. */
body.fit main { flex: 1; min-height: 0; padding: .5rem 0; overflow-y: auto; }
body.fit footer { padding: 0 1rem; font-size: .9rem; }
body.fit .home { height: 100%; }

.who--wide { display: flex; flex-wrap: wrap; gap: 0 2rem; align-items: center; }
.who--wide .who-place .link-button { margin-left: .75rem; }
/* Foremen and managers: crews that haven't finished this week's talk, as a slim bar over the
   calendar. The due (yellow) status color, not red: red belongs to Report something. */
.missed-bar {
  display: flex;
  flex: none;
  gap: .5rem;
  align-items: center;
  width: 100%;
  min-height: 48px;
  margin-bottom: .3rem;
  padding: 0 .9rem;
  border: 1px solid var(--due-ink);
  border-radius: var(--radius-control);
  color: var(--due-ink);
  background: var(--due-bg);
  font-weight: 700;
  text-align: left;
}
.missed-bar > span { flex: 1; }
.missed-bar .icon { flex: none; width: 20px; height: 20px; }
.missed-bar:hover { box-shadow: inset 0 0 0 1px var(--due-ink); }
/* Before the talk is due the bar is a quiet line, not a warning. */
.missed-bar.quiet {
  border-color: var(--control-border);
  color: var(--neutral-ink);
  background: var(--neutral-bg);
  font-weight: 600;
}
.missed-bar.quiet:hover { box-shadow: inset 0 0 0 1px var(--neutral-ink); }
/* The calendar row never gets shorter than the calendar needs (min-content), so on a tight screen
   (an upright iPad with the missed-talks bar) the menu moves down and the page scrolls; it never
   sits under the last week row (rule 9: Report something is always reachable). */
.home--tablet { grid-template-rows: auto minmax(min-content, 1fr) auto; }
/* A day square adds nothing to that minimum (its chips are clipped, as on laptops); the week rows'
   own 4.5rem minimum is what counts. */
.home--tablet .cal--wide .mcell { contain: size; }
.home-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* Upright tablets: today's items and their buttons in one row above the month, so
   Start for today's JHA is on the home screen. Each item is a 48 px button with its name on one
   line (the whole name is in the button's text, the month square and the day view). The month
   rows give up the height the row needs (4.1rem still holds two lines per square, as on short
   laptops), so the upright iPad still fits one view. */
.today-bar { display: flex; flex: none; gap: .5rem; align-items: center; margin-bottom: .25rem; }
.today-bar-head { flex: none; margin: 0 .25rem 0 0; color: var(--heading); font-family: inherit; font-size: 1.05rem; }
.today-items {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .35rem;
  min-width: 0;
}
.witem.today-item {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: .3rem;
  min-width: 0;
  height: 48px;
}
.today-text { display: grid; flex: 1; min-width: 0; }
.today-item .icon { width: 20px; height: 20px; }
.today-item .witem-label, .today-item .witem-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-more {
  min-height: 48px;
  padding: 0 .75rem;
  border: 2px solid var(--control-border);
  border-radius: .4rem;
  color: var(--control-text);
  background: var(--control-bg);
  font-weight: 700;
}
.today-more:hover { background: var(--control-hover); }
.today-empty { margin: 0; color: var(--text-muted); }
.home--tablet .home-main:has(.today-bar) .cal--wide .mgrid {
  grid-template-rows: auto repeat(var(--weeks), minmax(4.1rem, 1fr));
}
.home--tablet .home-main:has(.today-bar) .mcell { padding-block: .15rem; }
.home--tablet .home-main:has(.today-bar) .mnum { line-height: 1.05; }
.home--tablet .home-main:has(.today-bar) .mcell .chip { line-height: 1.25; }
.home--tablet .home-main:has(.today-bar) .cal--wide { gap: .35rem; }
.home--tablet:has(.today-bar) { gap: .5rem; }
.home--tablet:has(.today-bar) .menu { gap: .35rem; }
.home--tablet:has(.today-bar) .month-legend { line-height: 1.3; }

/* Landscape: calendar on the left; quick access on top and the menu in the
   bottom-right corner, their edges lined up with the calendar's. */
.home--split {
  grid-template-columns: minmax(0, 1fr) clamp(21rem, 36vw, 26rem);
  grid-template-rows: auto minmax(0, 1fr);
  gap: .75rem 1.25rem;
}
.home--split .who { grid-column: 1 / -1; }
.home--split .home-side { display: flex; flex-direction: column; gap: .35rem; min-height: 0; }
.home--split .home-side > * { flex-shrink: 0; }
.home--split .menu { gap: .2rem; }
/* Report something in its own box, pinned to the bottom so it ends flush with the calendar grid. */
.report-box {
  margin-top: auto;
  padding: .3rem;
  border: 1px solid var(--tile-border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.report-box .menu-item { width: 100%; }
.home--split .menu-item { min-height: 48px; padding-block: .2rem; font-size: 1.05rem; line-height: 1.2; }
.home--split .quick { gap: .35rem; padding: .5rem .75rem .55rem; }
.home--split .quick-tile { min-height: 48px; padding: .3rem .6rem; font-size: .95rem; line-height: 1.2; }
.home--split .quick-tile:hover { padding: calc(.3rem - 1px) calc(.6rem - 1px); }
/* Shorter laptop screens (up to 820 px tall, e.g. 1024×768 and 1280×800): the side column
   tightens a little so quick access, the menu and the Report box still fit beside the
   calendar with room to spare. Tap targets stay 48 px. */
@media (min-width: 768px) and (max-height: 820px) {
  .home--split .home-side { gap: .2rem; }
  .home--split .quick { padding-block: .35rem .4rem; }
  .report-box { padding: .2rem; }
}
/* One toolbar row: ‹ Today ›, the title, and Day / Week / Month. */
.cal--wide { display: flex; flex: 1; flex-direction: column; gap: .5rem; min-height: 0; }
.cal-toolbar { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; }
.cal-title { flex: 1; margin: 0; font-size: 1.25rem; white-space: nowrap; }
.seg {
  display: flex;
  overflow: hidden;
  border: 2px solid var(--control-border);
  border-radius: var(--radius-control);
  background: var(--control-bg);
}
.seg button {
  min-width: 48px;
  min-height: 48px;
  padding: 0 1rem;
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--control-text);
  background: var(--control-bg);
  font-weight: 700;
}
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--control-hover); }
.seg button[aria-pressed="true"] { color: var(--selected-text); background: var(--selected-bg); }
.seg .cal-arrow { display: grid; place-items: center; padding: 0; }

/* Month and week share one seven-column grid and stretch to the space left.
   Monday to Friday get the width; Saturday and Sunday stay readable but narrower. */
.cal--wide { --week-columns: minmax(0, .7fr) repeat(5, minmax(0, 1fr)) minmax(0, .7fr); }
.cal--wide .month { display: flex; flex: 1; flex-direction: column; gap: .35rem; min-height: 0; }
.cal--wide .mgrid {
  flex: 1;
  min-height: 0;
  grid-template-columns: var(--week-columns);
  grid-template-rows: auto repeat(var(--weeks), minmax(4.5rem, 1fr));
}
.cal--wide .mcell.is-weekend:not(.is-other), .wday.is-weekend { background: var(--cal-cell-weekend); }
.cal--wide .mcell { align-items: stretch; min-height: 0; overflow: hidden; }
/* On short screens the missed-talks bar takes its height from the month rows. */
@media (min-width: 768px) and (max-height: 820px) {
  .home-main:has(.missed-bar) .cal--wide .mgrid { grid-template-rows: auto repeat(var(--weeks), minmax(4.1rem, 1fr)); }
}
.wgrid { display: grid; flex: 1; grid-template-columns: var(--week-columns); gap: 4px; min-height: 0; }
.wday {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
  min-height: 0;
  padding: .3rem;
  overflow-y: auto;
  border: 1px solid var(--cal-cell-border);
  border-radius: var(--radius-control);
  background: var(--cal-cell);
}
.wday.is-today { border: 3px solid var(--teal); }
.wday.is-focus:not(.is-today) { border: 2px solid var(--control-border); }
.wday-head {
  flex: none;
  min-height: 48px;
  padding: 0 .35rem;
  border: 0;
  border-radius: .35rem;
  color: var(--heading);
  background: transparent;
  font-weight: 700;
  text-align: left;
}
.wday-head:hover { background: var(--control-hover); }
.wday-empty {
  margin: .2rem .35rem;
  color: var(--text-muted);
  font-size: .9rem;
  overflow-wrap: break-word;
  hyphens: auto;
}
.witem {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: .1rem;
  min-height: 48px;
  padding: .35rem .45rem;
  border: 0;
  border-radius: .4rem;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  overflow-wrap: anywhere;
}
.witem-status { font-size: .8rem; font-weight: 700; }
.cal--wide .strip { flex: 1; min-height: 0; }
.cal--wide .strip .day { min-height: 0; overflow-y: auto; }

/* Day view on tablets and laptops: one day fills the calendar area. On phones the day cards keep
   their neighbours peeking in at the edges, which shows they swipe. */
.home .cal--wide .strip.is-day { padding-inline: 0; }
.home .cal--wide .strip.is-day .day { flex-basis: 100%; }

@media (min-width: 768px) {
  main { padding-top: 1.5rem; }
  .card { padding: 1.5rem; }
  .choice-grid, .record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .save-row { grid-template-columns: 1fr auto; align-items: center; }
}

/* Forms engine: one card per section, big inputs, big choice buttons. */
.form-screen textarea { min-height: 7rem; font: inherit; font-weight: 400; resize: vertical; }
.form-screen fieldset { display: grid; gap: .6rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.form-screen legend { padding: 0; margin-bottom: .35rem; font-weight: 700; }
.form-screen label input, .form-screen label textarea { font-weight: 400; }
.form-rows ol { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.form-rows li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .4rem; align-items: center; }
.form-row-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .4rem; }
.form-screen .save-row.form-print { grid-template-columns: 1fr; }
.form-screen .form-print .cluster { justify-content: flex-start; }
.form-row-n { color: var(--text-muted); font-weight: 700; text-align: right; }
.form-rows li.is-over input, .form-rows li.is-over textarea { border-style: dashed; }
/* A line with long text: a card per line, "Step 1" over it, each box with its label
   above it at full width; the long-text boxes grow with their text (js/forms.js fitBox). */
.form-rows .form-cards { gap: .75rem; }
.stack .form-rows .form-card {
  display: block;
  max-width: none;
  padding: .75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
}
.form-card-body { gap: .6rem; }
.form-screen .form-card-title { margin-bottom: .1rem; color: var(--heading); font-size: 1.1rem; }
.form-screen .form-card textarea { min-height: 0; overflow-y: auto; line-height: 1.4; }
.form-card-field { display: grid; gap: .3rem; margin: 0; font-weight: 700; }
/* Which machine: a dropdown by the owner's choice, kept 48 px tall with large text. */
.form-screen select[data-variant] { min-height: 48px; font-size: 1.125rem; font-weight: 700; }
/* A weekly sheet's day: seven short buttons, four a row on a phone. */
.form-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
/* A checklist: All pass, then one line per item with OK / Needs repair / N/A. */
.form-checklist .check-list { display: grid; margin: 0; padding: 0; list-style: none; }
.stack .check-row { max-width: none; padding: .6rem 0; border-top: 1px solid var(--line); }
.stack .check-row.is-repair { padding-left: .75rem; box-shadow: inset 4px 0 0 var(--due-ink); }
.check-body { display: grid; gap: .45rem; align-items: center; min-width: 0; }
.check-label { margin: 0; font-weight: 700; }
.check-answers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.check-answers .pick { padding: .5rem .35rem; line-height: 1.15; }
@media (min-width: 600px) { .form-days { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .check-body { grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem); }
  .check-body > input[data-check-part="remarks"] { grid-column: 1 / -1; }
}

/* Signing on the screen. The pad opens as a dialog over the screen: full width on a
   phone, a white box to draw in (like paper, in both themes), and 48 px buttons. A drawn
   signature always shows on a white tile so the dark ink reads in dark mode too. */
.sig-dialog {
  width: min(36rem, calc(100vw - 16px));
  max-width: none;
  max-height: calc(100vh - 16px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--control-border);
  border-top: 4px solid var(--teal);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(15, 35, 56, .3);
}
.sig-dialog::backdrop { background: rgba(15, 35, 56, .6); }
.sig-panel { padding: 1rem; }
.sig-panel h2 { margin: 0; }
.sig-statement { margin: 0; font-size: 1.1rem; font-weight: 700; }
.sig-canvas {
  display: block;
  width: 100%;
  height: 180px;
  border: 2px dashed var(--control-border);
  border-radius: var(--radius-control);
  background: #fff linear-gradient(to top, transparent 2.4rem, #869cb8 2.4rem, #869cb8 calc(2.4rem + 1px),
    transparent calc(2.4rem + 1px));
  touch-action: none;
  cursor: crosshair;
}
.sig-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.sig-panel > .button, .sig-buttons .button { width: 100%; }
.sig-view { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; }
.sig-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: 3rem;
  padding: .2rem .5rem;
  border: 1px solid var(--tile-border);
  border-radius: var(--radius-control);
  background: #fff;
  object-fit: contain;
}
.sig-typed { font-style: italic; font-weight: 600; }
.attendee-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.attendee-signed { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; grid-column: 1 / -1; margin: 0; }
.ack-row { display: grid; gap: .5rem; }
.ack-row .attendee-signed, .attendee-sign { padding: 0 .75rem; }
.record-sig { margin-top: .35rem; }
.lock-box {
  padding: .75rem 1rem;
  border: 2px solid var(--control-border);
  border-left: 5px solid var(--teal);
  border-radius: var(--radius);
  background: var(--note-bg);
}
.lock-box p, .correction-note p { margin: 0; }
.lock-box .note { padding: 0; background: none; }
.correction-form textarea {
  width: 100%;
  min-height: 6rem;
  padding: .65rem;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-control);
  color: var(--text);
  background: var(--input-bg);
  font: inherit;
  resize: vertical;
}
.warn-note { color: var(--due-ink); background: var(--due-bg); font-weight: 700; }
.form-signature { display: grid; gap: .6rem; margin: 0; padding: 0; border: 0; }
.form-signature legend { margin-bottom: .4rem; padding: 0; font-weight: 700; }
.form-row-sig {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 .65rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-control);
  color: var(--text-muted);
  font-weight: 600;
}
.form-row-sig.is-signed {
  border-style: solid;
  border-color: var(--ok-edge);
  color: var(--ok-ink);
  background: var(--ok-bg);
}
@media (max-width: 479px) {
  .attendee-row.is-marked.can-sign { grid-template-columns: 1fr; }
  .attendee-row.can-sign .attendee-actions { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 479px) { .sig-panel { padding: .75rem; } }

/* App problem or idea: a short form; Send is a mailto: link styled as a button. */
.feedback-form textarea {
  width: 100%;
  min-height: 6rem;
  padding: .65rem;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-control);
  color: var(--text);
  background: var(--input-bg);
  font: inherit;
  font-weight: 400;
  line-height: 1.45;
  resize: vertical;
}
.feedback-form textarea[readonly] { min-height: 12rem; }
.feedback-form fieldset { display: grid; gap: .6rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.feedback-form legend { padding: 0; margin-bottom: .35rem; font-weight: 700; }
.feedback-kind .pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feedback-facts { display: grid; gap: .5rem; margin: 0; }
.feedback-facts > div { display: grid; gap: .1rem; }
.feedback-facts dt { color: var(--text-muted); font-size: .9rem; }
.feedback-facts dd { margin: 0; overflow-wrap: anywhere; }
.feedback-actions .button { flex: 1 1 12rem; }

/* Placeholder sign-in: the logo on its own white tile (the full-color logo always sits
   on white, as the brand guide asks, in dark mode too), the Microsoft button shown but not
   usable yet, the placeholder accounts as 48 px rows, and the short name form. */
.signin { max-width: 40rem; }
.signin-logo {
  justify-self: start;
  padding: .5rem .9rem;
  border-left: 5px solid var(--teal);
  border-radius: 10px;
  background: var(--white);
  box-shadow: var(--shadow);
}
.signin-logo img { display: block; width: auto; height: 56px; }
.signin-microsoft { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.signin-ms[disabled] {
  border-style: dashed;
  border-color: var(--slate);
  color: var(--disabled-text);
  background: var(--disabled-bg);
  opacity: 1;
  cursor: not-allowed;
}
.signin-accounts .choice { min-height: 56px; }
.signin-as { margin: 0; color: var(--heading); font-size: 1.15rem; font-weight: 700; }
.signin-form input {
  width: 100%;
  min-height: 48px;
  padding: .65rem;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-control);
  color: var(--text);
  background: var(--input-bg);
  font: inherit;
  font-weight: 400;
}
.signin-form input[aria-invalid="true"] { border-color: var(--error-ink); }
.check-body input[aria-invalid="true"] { border: 2px solid var(--error-ink); background: var(--error-bg); }

/* the optional "Questions or concerns raised" box on the talk screen. */
.talk-concerns textarea {
  width: 100%;
  min-height: 6rem;
  padding: .65rem;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-control);
  color: var(--text);
  background: var(--input-bg);
  font: inherit;
  font-weight: 400;
  line-height: 1.45;
  resize: vertical;
}