/* Red Folder ATL — shared look, matching the ATL Site Sign-In app:
   warm off-white page, charcoal primary actions, white cards with a thin
   line and soft shadow, pill-shaped chips and secondary buttons.
   The second half of this file restyles the class names tool.js already
   renders (.section, .grid2, .check, .attRow, .btn…), so the forms pick up
   the new look without any change to the PDF engine. */
* { box-sizing: border-box; }
:root {
  --bg: #f5f4f0;
  --card: #ffffff;
  --panel: #ffffff;
  --red: #ba1f1f;
  --red-dark: #951717;
  --text: #101014;
  --muted: #5e5e66;
  --line: #d9d9de;
  --yellow: #f6d40b;
  --green: #146b38;
  --charcoal: linear-gradient(165deg, #27272c, #18181b);
  --shadow-sm: 0 1px 3px rgba(16, 16, 20, 0.08), 0 1px 2px rgba(16, 16, 20, 0.05);
  --shadow-card: 0 2px 8px rgba(16, 16, 20, 0.1), 0 1px 2px rgba(16, 16, 20, 0.05);
  --radius-card: 20px;
  --radius: 20px;

  /* status colours tool.js reads through var() in showBanner() */
  --okBg: #e4f6ec;  --okBd: #b7e4c9;  --okTx: #146b38;
  --badBg: #fdeaea; --badBd: #f3c3c3; --badTx: #951717;
  --warnBg: #fff6d5; --warnBd: #f0deac; --warnTx: #7a5600;
}

html { background: var(--bg); margin: 0; overflow-x: hidden; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
:focus-visible { outline: 3px solid #1a56db; outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.shell-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  animation: fade-in 220ms ease both;
}
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
[hidden] { display: none !important; }

/* ===== Top bar ===== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin-bottom: 22px;
}
.topbar-end { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo { height: 34px; width: auto; display: block; flex-shrink: 0; user-select: none; -webkit-user-drag: none; mix-blend-mode: multiply; }
.brand-logo.tp { height: 38px; }
.brand-name { font-weight: 700; font-size: 0.95rem; white-space: nowrap; }

.page-title {
  margin: 8px 0 4px;
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.page-sub { margin: 0 0 18px; color: var(--muted); font-size: 0.98rem; }

.pill-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 16px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.pill-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.pill-chip:empty { display: none; }
.site-selector { min-height: 44px; max-width: 60vw; gap: 8px; cursor: pointer; }
.site-selector-label { overflow: hidden; text-overflow: ellipsis; }
.site-selector svg { width: 20px; height: 20px; flex-shrink: 0; }
.site-selector:active { background: #eeedf0; }
@media (hover: hover) { .site-selector:hover { border-color: #92929b; } }

/* ===== Buttons ===== */
.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  min-height: 44px;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 100ms ease, background 120ms ease;
}
.pill-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
/* Back / Home: white with a border, like the sign-in app */
.pill-btn-muted { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
@media (hover: hover) { .pill-btn-muted:hover { border-color: #c7c7cc; } }

.btn-black {
  border: none;
  border-radius: 14px;
  padding: 14px 18px;
  min-height: 50px;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  background: var(--charcoal);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-block { width: 100%; }
button:active:not(:disabled), a.pill-btn:active { transform: scale(0.97); }
button:disabled { background: #e2e2e6 !important; color: #9a9aa2 !important; cursor: not-allowed; box-shadow: none !important; }

/* ===== Site picker ===== */
.site-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
@media (max-width: 480px) { .site-list { grid-template-columns: repeat(2, 1fr); } }
.site-card {
  position: relative;
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: var(--radius-card);
  padding: 20px 14px;
  min-height: 130px;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  animation: pop-in 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: var(--pop-delay, 0ms);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.site-icon-badge { width: 48px; height: 48px; border-radius: 50%; background: #f0f0f2; display: flex; align-items: center; justify-content: center; }
.site-icon-badge svg { width: 24px; height: 24px; }
.site-check {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--text); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700;
  opacity: 0; transform: scale(0.4);
  transition: opacity 150ms ease, transform 150ms ease;
}
@media (hover: hover) { .site-card:hover { border-color: #c7c7cc; transform: translateY(-2px); box-shadow: var(--shadow-card); } }
.site-card.selected { border-color: var(--text); background: #f6f6f7; box-shadow: var(--shadow-card); }
.site-card.selected .site-icon-badge { background: var(--text); color: #fff; }
.site-card.selected .site-check { opacity: 1; transform: scale(1); }
#btn-site-continue { margin-top: 18px; }
.view-site { justify-content: center; }

/* ===== Home ===== */
.intro h1 { margin: 0; font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.intro-clock { margin: 6px 0 10px; display: flex; align-items: baseline; gap: 8px; font-size: 17px; }
.clock-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.clock-date { color: #6e6e73; }

.check-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
@media (max-width: 760px) { .check-choices { grid-template-columns: 1fr; gap: 12px; } }
.action-card {
  position: relative;
  border: 1.5px solid var(--line);
  border-radius: 28px;
  padding: 20px 24px;
  min-height: 170px;
  background: #fff;
  color: #1c1c1e;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 14px 36px rgba(0, 0, 0, 0.06);
  transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1), border-color 150ms ease;
}
.action-card.primary {
  background: var(--charcoal);
  border-color: #18181b;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 14px 36px rgba(0, 0, 0, 0.18);
}
.action-card-icon {
  width: 50px; height: 50px;
  border-radius: 14px;
  background: rgba(28, 28, 30, 0.06);
  border-top: 5px solid var(--red);
  display: flex; align-items: center; justify-content: center;
}
.action-card.primary .action-card-icon { background: rgba(255, 255, 255, 0.12); }
.cal-num { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.action-card-text { display: flex; flex-direction: column; gap: 4px; }
.action-card-title { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.action-card-desc { font-size: 15px; font-weight: 500; color: #6e6e73; }
.action-card.primary .action-card-desc { color: rgba(255, 255, 255, 0.62); }
.action-card-arrow { position: absolute; top: 22px; right: 22px; width: 22px; height: 22px; opacity: 0.55; }
.action-card:active { transform: scale(0.98); }
@media (hover: hover) {
  .action-card:hover { transform: translateY(-2px); }
  .action-card:not(.primary):hover { border-color: #c7c7cc; }
}
@media (max-width: 760px) {
  .action-card { min-height: 0; flex-direction: row; align-items: center; padding: 18px 20px; }
  .action-card-title { font-size: 22px; }
  .action-card-arrow { position: static; margin-left: auto; }
}

/* ===== Forms list ===== */
.list-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
.list-item:last-child { border-bottom: none; }
.list-item:active { background: #f6f6f7; }
@media (hover: hover) { .list-item:hover { background: #fafafa; } }
.list-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: #f0f0f2; color: var(--muted);
  font-size: 0.85rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.list-item.ready .list-num { background: var(--text); color: #fff; }
.list-tag {
  margin-left: auto;
  font-size: 0.75rem; font-weight: 600;
  color: var(--muted); background: #f0f0f2;
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.list-item.ready .list-tag { background: #e4f6ec; color: var(--green); }
.list-chevron { width: 18px; height: 18px; color: #9a9aa2; flex-shrink: 0; }
.list-ref { display: block; margin-top: 2px; font-size: 0.78rem; font-weight: 500; color: var(--muted); }

.empty-card {
  background: #fff;
  border: 1px dashed #c7c7cc;
  border-radius: var(--radius-card);
  padding: 32px 20px;
  text-align: center;
  color: var(--muted);
}
.empty-card strong { display: block; color: var(--text); font-size: 1.05rem; margin-bottom: 6px; }

/* =====================================================================
   Form pages (tool.html). Everything below targets markup produced by
   tool.js — keep the class names in sync with it.
   ===================================================================== */
#app.card { background: transparent; border: 0; padding: 0; }

/* Form header: the same card as the sign-in screens (logo, title, subtitle), plus the BMS document reference */
.head {
  display: grid; justify-items: center; gap: 12px; text-align: center;
  padding: 22px 22px 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.head::before { content: ''; width: 116px; height: 40px; background: url(atl-logo.png) center / contain no-repeat; }
.head h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.sub { margin: 6px 0 0; color: var(--muted); font-size: 0.95rem; line-height: 1.4; }
.head .sub { margin: 6px auto 0; max-width: 62ch; font-size: 0.98rem; line-height: 1.45; }

.pillRow { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center; }
/* old forms' PDF engine / template status: for testing, not for site agents */
#pillLib, #pillTpl { display: none; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line);
  background: #f7f7f8; color: var(--muted);
  font-weight: 700; font-size: 0.78rem; letter-spacing: 0.02em; white-space: nowrap;
}
.pill.ok { background: var(--okBg); color: var(--okTx); }
.pill.bad { background: var(--badBg); color: var(--badTx); }
.pill.warn { background: var(--warnBg); color: var(--warnTx); }

.banner {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--warnBd);
  background: var(--warnBg);
  color: var(--warnTx);
  font-weight: 600;
  font-size: 0.92rem;
  display: none;
}

.section {
  margin-top: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 20px 22px 22px;
  box-shadow: var(--shadow-card);
}
.sectionTitle {
  margin: 0 0 16px;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
}

#app label { display: block; font-size: 0.92rem; font-weight: 600; color: var(--text); margin: 0 0 6px; }
#app input, #app select, #app textarea, .modal input {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1px solid #d6d6db;
  border-radius: 14px;
  background: #fff;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
}
#app input::placeholder, #app textarea::placeholder { color: #a5a5ac; }
#app input:focus, #app select:focus, #app textarea:focus {
  outline: 2px solid var(--text);
  outline-offset: 1px;
  border-color: var(--text);
}
#app textarea { min-height: 110px; resize: vertical; }

.grid1 { display: grid; grid-template-columns: 1fr; gap: 14px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid3auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }

#app .check {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  min-height: 52px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
#app .check:has(input:checked) { border-color: var(--text); background: #f6f6f7; }
#app .check input, #app input[type='checkbox'], #app input[type='radio'] {
  width: 24px; height: 24px; min-height: 0; padding: 0; margin: 0;
  flex-shrink: 0; accent-color: var(--red); cursor: pointer;
}

.attTop { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.attRow {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fcfcfb;
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr auto;
  grid-template-areas: "name date sig remove";
  gap: 12px;
  align-items: end;
}
.attName { grid-area: name; }
.attDate { grid-area: date; }
.attSig { grid-area: sig; }
.attRemove { grid-area: remove; }

.sigPreview {
  height: 56px;
  border: 1.5px dashed #c7c7cc;
  border-radius: 12px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: pointer;
}
.sigPreview img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.sigPreview span { color: var(--muted); font-weight: 600; font-size: 0.85rem; }

/* Form buttons, as on the sign-in screens: .btn (and .btnYellow) = black
   main action, .btnGhost = white secondary, .btnDanger = remove,
   #btnFinish = red (closes a permit) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid #18181b;
  border-radius: 14px;
  background: var(--charcoal);
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  box-shadow: var(--shadow-sm);
  transition: transform 100ms ease, border-color 120ms ease;
}
.btnGhost { background: #fff; color: var(--text); border: 1px solid #d6d6db; box-shadow: none; }
.btnDanger { background: #fff; color: var(--red-dark); border: 1px solid #efc9c9; box-shadow: none; }
#btnFinish { background: linear-gradient(165deg, #c62828, var(--red-dark)); border-color: var(--red-dark); }
@media (hover: hover) {
  .btnGhost:hover { border-color: #c7c7cc; }
  .btnDanger:hover { border-color: #e2a6a6; }
}
.btnRow { display: flex; gap: 8px; flex-wrap: wrap; }

.stickyBar {
  position: sticky;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  margin-top: 16px;
  z-index: 5;
}
.actionBar {
  display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 10px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 6px 22px rgba(16, 16, 20, 0.14), 0 1px 3px rgba(16, 16, 20, 0.06);
}
.note { margin-top: 10px; color: var(--muted); font-size: 0.85rem; line-height: 1.4; }

.pdfWrap { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.pdfFrame { width: 100%; height: 78vh; border: 0; display: block; background: #fff; }

/* Signature modal */
.modalOverlay {
  position: fixed; inset: 0;
  background: rgba(16, 16, 20, 0.45);
  display: none; align-items: center; justify-content: center;
  padding: 14px; z-index: 50;
}
.modal {
  width: min(760px, 100%);
  background: #fff;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.modalHead { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.modalHead strong { font-size: 1.15rem; font-weight: 700; }
.modalBody { padding: 14px 16px; }
.sigCanvasWrap { border: 1.5px dashed #c7c7cc; border-radius: 16px; overflow: hidden; background: #fff; touch-action: none; }
.sigCanvasWrap canvas { width: 100%; height: 260px; display: block; background: #fff; }
.modalFoot { padding: 12px 16px 16px; border-top: 1px solid var(--line); display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.modalHelp { color: var(--muted); font-weight: 600; font-size: 0.85rem; }

@media (max-width: 900px) {
  .grid2 { grid-template-columns: 1fr; }
  .attRow { grid-template-columns: 1fr; grid-template-areas: "name" "date" "sig" "remove"; }
  .sigCanvasWrap canvas { height: 220px; }
  .pillRow { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .head { flex-direction: column; }
  .brand-logo.tp { height: 32px; }
}

/* Install prompt */
.install-banner {
  position: fixed; left: 16px; right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  max-width: 560px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 18px;
  background: var(--text); color: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(16, 16, 20, 0.25);
  font-weight: 600; font-size: 0.92rem;
}
.install-banner span { flex: 1; }
.install-banner button { border: 0; border-radius: 999px; padding: 10px 16px; min-height: 40px; font: inherit; font-weight: 700; cursor: pointer; }
.install-banner .install-yes { background: #fff; color: var(--text); }
.install-banner .install-no { background: transparent; color: rgba(255, 255, 255, 0.75); }

/* ===== BMS form engine (form.html) ===== */
.choice-field, .sign-field { display: flex; flex-direction: column; gap: 6px; }
.choice-label { font-size: 0.92rem; font-weight: 600; }
.choice-row { display: flex; flex-wrap: wrap; gap: 6px; }
.choice-pill {
  min-width: 48px; min-height: 44px; padding: 8px 16px;
  border: 1.5px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--text);
  font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer;
}
.choice-pill.on { background: var(--text); border-color: var(--text); color: #fff; }
.table-row { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); grid-template-areas: none; position: relative; padding-top: 30px; }
.row-num { position: absolute; top: 8px; left: 14px; font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.rows .attRow:first-child { margin-top: 4px; }
.sigPreview { width: 100%; font: inherit; }
.sketchPreview { height: 180px; }
/* checklists: question and its answer buttons on one row */
.grid1 > .choice-field {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.grid1 > .choice-field:last-child { border-bottom: 0; }
.grid1 > .choice-field .choice-label { font-weight: 500; }
@media (max-width: 600px) { .grid1 > .choice-field { grid-template-columns: 1fr; } }

/* Log in */
.login-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px; display: grid; gap: 14px; box-shadow: var(--shadow-sm); }
.login-card label { display: grid; gap: 6px; font-weight: 600; font-size: 0.95rem; }
.login-card input { font: inherit; padding: 14px 16px; border: 1px solid #d6d6db; border-radius: 14px; background: #fff; }
.login-card input:focus { outline: 2px solid var(--text); outline-offset: 1px; }
.login-error { margin: 0; padding: 10px 14px; border-radius: 12px; background: #fdecec; color: #a4161a; font-weight: 600; font-size: 0.9rem; }
.account-line { margin-top: 22px; text-align: center; color: var(--muted); font-size: 0.85rem; }
.link-btn { background: none; border: 0; padding: 4px; font: inherit; font-weight: 700; color: var(--text); text-decoration: underline; cursor: pointer; }
.login-card > .link-btn { justify-self: center; min-height: 44px; }
.login-card[hidden] { display: none; }
.password-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.password-row .link-btn { min-width: 64px; min-height: 44px; font-weight: 600; }
.login-reason { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: #fff6dd; color: #6b4b00; font-weight: 600; font-size: 0.92rem; }
.login-done { margin: 0; padding: 10px 14px; border-radius: 12px; background: #e8f5ec; color: #1d5b32; font-weight: 600; font-size: 0.9rem; line-height: 1.4; }
.login-help { text-align: center; }

/* Login ended while a page is open */
.session-banner { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px;
  padding: 12px 16px; background: #fff6dd; color: #6b4b00; border-bottom: 1px solid #ecd9a0; font-weight: 600; font-size: 0.92rem; text-align: center; }
.session-banner-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--text); color: #fff; text-decoration: none; }
.session-banner-btn[hidden] { display: none; }

/* People picker (names of people signed in on site) */
.people-body { max-height: min(60vh, 520px); overflow: auto; display: grid; gap: 10px; }
.people-list { display: grid; gap: 4px; }
.people-row { display: flex; align-items: center; gap: 14px; padding: 10px 6px; border-bottom: 1px solid var(--line); min-height: 48px; font-weight: 600; cursor: pointer; }
.people-row input { width: 24px; height: 24px; margin: 0; flex-shrink: 0; accent-color: var(--text); }
.people-row.done { color: var(--muted); }

.people-status { margin: 4px 0 10px; }
.people-status:empty { display: none; }

/* In-progress list: tap the form name to continue; smaller secondary actions */
.draft-open { cursor: pointer; }
.draft-hidden { display: none !important; }
.draft-actions .draft-action.draft-action-remove { color: #a4161a; border-color: #f0c9c9; background: #fff; }
.draft-more { margin: 8px 0 0; background: none; border: 0; padding: 8px 4px; font: inherit; font-weight: 700; color: var(--text); text-decoration: underline; cursor: pointer; }
.draft-recovery:focus-within, .draft-recovery-title:focus { outline: none; }
.draft-recovery-title:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 8px; }
.action-card-icon-plain { border-top-width: 0; color: var(--red); }
.action-card-icon-plain svg { width: 26px; height: 26px; }

/* Weekly checklist */
.chk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 12px; flex-wrap: wrap; }
.chk-week { display: grid; text-align: center; gap: 2px; }
.chk-week span { color: var(--muted); font-size: 0.85rem; }
.chk-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.chk-table th, .chk-table td { border-bottom: 1px solid var(--line); padding: 4px; text-align: center; }
.chk-table thead th { font-size: 0.8rem; color: var(--muted); padding: 8px 2px; }
.chk-table thead th span { display: block; font-weight: 700; color: var(--text); }
.chk-table th.is-today, .chk-table td.is-today { background: #fbf6e3; }
.chk-name { text-align: left !important; font-weight: 600; font-size: 0.92rem; padding-left: 12px !important; min-width: 180px; }
.chk-name a { color: var(--text); text-decoration: none; border-bottom: 1px dashed #bbb; }
.chk-hint { color: var(--muted); font-weight: 500; }
.chk-group th { text-align: left; background: #f3f3f5; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 6px 12px; }
.chk-cell { width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid #d6d6db; background: #fff; font: inherit; font-size: 1.1rem; font-weight: 800; cursor: pointer; }
.chk-cell.is-fixed { cursor: default; }
.chk-cell.is-done { background: #e4f6ec; border-color: #9fd8b6; color: var(--green); }
.chk-cell.is-na { color: var(--muted); background: #f3f3f5; }
.chk-cell.is-due { border-color: var(--text); }
.chk-cell.is-progress { background: var(--warnBg); border-color: var(--warnBd); color: var(--warnTx); }
.chk-cell.has-record { cursor: pointer; }
.chk-cell.is-missed { background: #f3f3f5; border-color: var(--line); color: var(--muted); }   /* not done: quiet grey, not an alarm */
.chk-span { text-align: left !important; }
.chk-span .chk-cell { margin-right: 10px; vertical-align: middle; }
.chk-note { color: var(--muted); font-size: 0.85rem; }
tr.is-off .chk-name { opacity: 0.55; }
.chk-toggle { display: flex; gap: 10px; align-items: center; }
.chk-toggle input { width: 22px; height: 22px; accent-color: var(--text); }
.chk-actions { margin-top: 14px; }
.print-only { display: none; }
@media (max-width: 700px) { .chk-name { min-width: 120px; font-size: 0.82rem; } .chk-cell { width: 32px; height: 32px; font-size: 0.95rem; } }
@media print {
  .no-print, .topbar, .page-sub, .chk-legend { display: none !important; }
  .print-only { display: flex !important; gap: 24px; }
  .print-head { align-items: center; margin-bottom: 8px; } .print-head img { height: 34px; }
  .chk-sign { margin-top: 24px; justify-content: space-between; }
  body { background: #fff; } .chk-table { border-radius: 0; } .chk-cell { border-width: 1px; }
  .chk-table th.is-today, .chk-table td.is-today { background: none; }
}
.chk-day { background: none; border: 0; font: inherit; cursor: pointer; padding: 2px 4px; color: inherit; }
.chk-day span { display: block; font-weight: 700; color: var(--text); }
.chk-table th.is-closed { color: var(--muted); }
.details-prompt { display: grid; gap: 2px; margin: 0 0 14px; padding: 14px 16px; border-radius: 16px; background: #fbf6e3; border: 1px solid #efd98a; color: var(--text); text-decoration: none; }
.details-prompt span { color: var(--muted); font-size: 0.9rem; }
.details-prompt[hidden] { display: none; }

/* Home reminder (shared checklist) */
.today-reminder { display: grid; gap: 8px; margin: 0 0 14px; padding: 16px 18px; border-radius: var(--radius-card); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none; }
.today-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.today-top strong { font-size: 1.05rem; }
.today-count { color: var(--muted); font-weight: 600; font-size: 0.92rem; white-space: nowrap; }
.today-bar { display: block; height: 8px; border-radius: 999px; background: #ecebee; overflow: hidden; }
.today-bar i { display: block; height: 100%; border-radius: inherit; background: var(--text); transition: width 300ms ease; }
.today-next { color: var(--muted); font-size: 0.92rem; }
.today-later { color: var(--muted); font-size: 0.85rem; }
.today-reminder.is-clear .today-top strong::before { content: '✓ '; color: var(--green); }
.today-reminder.is-clear .today-bar i { background: var(--green); }
.today-reminder[hidden] { display: none; }
/* Sites overview */
.ov-wrap { overflow-x: auto; }
.ov-table { min-width: 640px; }
.ov-chip { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 9px; font-weight: 800; color: var(--muted); }
.ov-chip.is-done { background: #e4f6ec; color: var(--green); }
.ov-chip.is-missed { background: #f3f3f5; color: var(--muted); }
.ov-chip.is-due { border: 1.5px solid var(--text); color: var(--text); }
.ov-chip.is-na { background: #f3f3f5; }
.ov-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.ov-count.is-done { color: var(--green); } .ov-count.is-missed { color: var(--muted); }
.ov-missed td { text-align: left !important; padding: 4px 12px 10px !important; }
.ov-missed ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); }
.chk-sync { margin-top: 4px; }
.library-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.library-actions .list-tag { margin-left: 0; text-decoration: none; }
button.library-view { border: 0; cursor: pointer; font: inherit; font-size: 0.75rem; font-weight: 600; background: #e4f6ec; color: var(--green); }
.select-field { display: grid; gap: 8px; align-content: start; }
.select-field select { font: inherit; padding: 12px 14px; border: 1px solid #d6d6db; border-radius: 12px; background: #fff; width: 100%; }
.select-read { justify-self: start; text-decoration: none; }
.select-read[hidden] { display: none; }

/* PDF preview drawn in Red Folder (Android has no PDF viewer) */
.pdf-open, .pdf-open body { overflow: hidden; }
.pdf-viewer { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: #3a3a40; }
.pdf-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); background: #fff; border-bottom: 1px solid var(--line); }
.pdf-title { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-pages { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px; }
.pdf-page { display: block; max-width: 100%; height: auto; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.pdf-status { margin: 24px 0; color: #fff; font-weight: 600; text-align: center; }
.pdf-btn { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--text); color: #fff; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pdf-btn-ghost { background: #efeff2; color: var(--text); }
.pdf-toast { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 110; width: min(560px, calc(100% - 32px));
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); font-weight: 600; }
.pdf-toast span { flex: 1; min-width: 160px; }
.pdf-bar .pdf-btn { padding: 0 14px; }
@media (max-width: 600px) { .pdf-bar { flex-wrap: wrap; } .pdf-title { flex-basis: 100%; order: -1; } }
.pdf-fallback { margin: 40px auto; max-width: 460px; display: grid; gap: 10px; padding: 24px; background: #fff; border-radius: var(--radius-card); text-align: center; }
.pdf-fallback strong { font-size: 1.15rem; }
.pdf-fallback span { color: var(--muted); }
.pdf-fallback-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }

/* Printing a PDF: only its page images go to the printer */
.pdf-print-root { display: none; }
@media print {
  @page { margin: 0; }
  html.pdf-printing body > *:not(.pdf-print-root) { display: none !important; }
  html.pdf-printing, html.pdf-printing body { background: #fff !important; margin: 0; padding: 0; }
  html.pdf-printing .pdf-print-root { display: block; }
  .pdf-print-root img { display: block; width: 100%; height: auto; break-after: page; page-break-after: always; }
  .pdf-print-root img:last-child { break-after: auto; page-break-after: auto; }
}
.saved-more { display: inline-block; margin: 10px 0 18px; }
.saved-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.saved-head .draft-heading { margin: 0; }
.saved-toggle { min-height: 40px; }
.pdf-why { color: var(--muted); font-size: 0.78rem; word-break: break-word; }