/* SayCompute Tech: the Android app's look (Relancy.Field.App/Resources/Styles): its colours, Open Sans, its cards, buttons and bottom tabs. Light and dark follow the phone. */
@font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans-Semibold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: light dark;
  --primary: #3953A4;
  --accent: #2FDAAA;
  --ink: #25272A;
  --page: #F4F5F7;
  --card: #FFFFFF;
  --line: #E1E1E1;
  --text: #25272A;
  --muted: #6E6E6E;
  --danger: #B3261E;
  --good: #137A55;
  --waiting: #8A5A00;
  --on-primary: #FFFFFF;
  --bar: #FFFFFF;
  --status: #4285f4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #9AAEEA;
    --page: #1B1C1E;
    --card: #2E3135;
    --line: #404040;
    --text: #F2F3F5;
    --muted: #ACACAC;
    --danger: #F2B8B5;
    --good: #2FDAAA;
    --waiting: #F9C46B;
    --on-primary: #25272A;
    --bar: #25272A;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: "Open Sans", -apple-system, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
h1, h2, p { margin: 0; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 600; }

/* The header and the tabs, as Android draws them. */
.bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: calc(env(safe-area-inset-top) + 8px) 16px 8px;
  background: var(--bar);
  box-shadow: 0 1px 0 var(--line);
}
.bar h1 { font-size: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-back { font-size: 24px; line-height: 1; padding: 4px 8px 4px 0; }
.status-strip { padding: 8px 16px; background: var(--waiting); color: var(--page); font-size: 13px; }
.page { max-width: 680px; margin: 0 auto; padding: 12px 16px 24px; }
.page-tabs { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
.tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  background: var(--bar);
  box-shadow: 0 -1px 0 var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px; font-size: 12px; color: var(--muted); text-align: center; }
.tab.is-on { color: var(--primary); font-weight: 600; }
.tab-icon { display: block; width: 26px; height: 26px; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.tab-day { -webkit-mask-image: url("/images/tab_day.svg"); mask-image: url("/images/tab_day.svg"); }
.tab-clock { -webkit-mask-image: url("/images/tab_clock.svg"); mask-image: url("/images/tab_clock.svg"); }
.tab-van { -webkit-mask-image: url("/images/tab_van.svg"); mask-image: url("/images/tab_van.svg"); }
.tab-pay { -webkit-mask-image: url("/images/tab_pay.svg"); mask-image: url("/images/tab_pay.svg"); }
.tab-more { -webkit-mask-image: url("/images/tab_more.svg"); mask-image: url("/images/tab_more.svg"); }

/* Layout. */
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-tight { display: flex; flex-direction: column; gap: 6px; }
.list { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 8px; }
.wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grow { flex: 1 1 auto; min-width: 0; }
.line { display: flex; align-items: center; gap: 8px; }
.block { display: block; }
.center { text-align: center; }
.self-center { align-self: center; }
.self-start { align-self: flex-start; }
.gap-top { margin-top: 16px; }
.gap-top-s { margin-top: 6px; }
.break { word-break: break-all; }
.pre { white-space: pre-wrap; }
.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Words. */
.title { font-size: 22px; font-weight: 600; }
.brand { color: var(--primary); }
.card-title { font-size: 16px; font-weight: 600; }
.muted { font-size: 13px; color: var(--muted); }
.problem { color: var(--danger); }
.good { color: var(--good); }
.waiting { color: var(--waiting); }
.small { font-size: 12px; }
.strong { font-weight: 600; }
.big { font-size: 20px; }
.msg { color: var(--danger); }
.msg.is-good { color: var(--good); }
.pull-hint { text-align: center; padding: 8px; color: var(--muted); font-size: 13px; }

/* Cards. */
.card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px; color: inherit; }
.card.stack-tight { display: flex; }
.card.line { display: flex; padding: 8px 12px; }
.card.is-selected { border: 2px solid var(--accent); }
.visit-card { display: flex; padding: 0; overflow: hidden; }
.visit-bar { flex: 0 0 6px; background: var(--status); }
.visit-body { display: flex; flex-direction: column; gap: 3px; padding: 12px; min-width: 0; }
.day-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.pill { background: var(--status); color: #fff; font-weight: 600; border-radius: 12px; padding: 4px 10px; }
.pick { display: flex; align-items: center; gap: 8px; padding: 10px; width: 100%; text-align: left; font: inherit; cursor: pointer; }
.notice { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.photo-row { display: flex; align-items: center; gap: 10px; }
.thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; flex: none; background: var(--line); }
.receipt-photo { max-width: 100%; max-height: 220px; object-fit: contain; align-self: center; }
.qr { width: 284px; max-width: 100%; align-self: center; background: #fff; padding: 12px; border-radius: 8px; image-rendering: pixelated; }
.article-page { margin: -12px -16px -24px; }
.article-frame { display: block; width: 100%; height: calc(100dvh - 56px - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border: 0; background: var(--card); }
.sign-pad { width: 100%; height: 130px; background: #fff; border: 1px solid #ACACAC; touch-action: none; }

/* Buttons: the app's Go, Quiet and Danger, and its filled default. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--primary);
  color: var(--on-primary);
  font: inherit;
  font-size: 14px;
  text-align: center;
  overflow-wrap: normal; /* a button breaks between words, never inside "Find" */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.row > .btn, .day-head > .btn { flex: none; }
.btn:disabled { opacity: .55; }
.btn-go { min-height: 52px; background: var(--accent); color: var(--ink); font-size: 16px; font-weight: 600; }
.btn-quiet { background: transparent; border-color: var(--primary); color: var(--primary); }
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-wide { width: 100%; }
.btn-small { min-height: 34px; padding: 4px 8px; }
summary.btn { list-style: none; }
summary.btn::-webkit-details-marker { display: none; }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.btn:has(.file-input) { position: relative; }

/* Fields: Android's underlined boxes. 16px, so an iPhone does not zoom the page on every tap. */
label { font-size: 15px; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 8px 4px;
  border: 0;
  border-bottom: 1px solid var(--muted);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}
select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 22px; }
input:focus, select:focus, textarea:focus { outline: none; border-bottom: 2px solid var(--primary); }
input::placeholder, textarea::placeholder { color: var(--muted); }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.check input { width: 22px; height: 22px; accent-color: var(--primary); }
.signin { padding-top: calc(env(safe-area-inset-top) + 36px); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }