/* SayCompute Support: the look of SayCompute Field (Relancy.Field.Web/wwwroot/css/tech.css): its colours, Open Sans, its cards, buttons, fields and bottom tabs. Light and dark
   follow the device. Every page draws from these colours, so a page's own stylesheet needs no dark-mode rules of its own. */
@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;
  --fill: var(--primary);
  --link: #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;
  --good-soft: #E7F6F0;
  --danger-soft: #FDECEA;
  --waiting-soft: #FFF6E5;
  --info-soft: #EEF1FA;
}
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #9AAEEA;
    --link: #9AAEEA;
    --page: #1B1C1E;
    --card: #2E3135;
    --line: #404040;
    --text: #F2F3F5;
    --muted: #ACACAC;
    --danger: #F2B8B5;
    --good: #2FDAAA;
    --waiting: #F9C46B;
    --on-primary: #25272A;
    --bar: #25272A;
    --good-soft: #173D33;
    --danger-soft: #4A1F1B;
    --waiting-soft: #3D2E12;
    --info-soft: #262D45;
  }
}

* { 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.45;
  overflow-wrap: anywhere;
}
h1 { margin: 4px 0 12px; font-size: 22px; font-weight: 600; line-height: 1.25; }
h2 { margin: 20px 0 8px; font-size: 16px; font-weight: 600; }
h3 { margin: 12px 0 4px; font-size: 15px; font-weight: 600; }
p { margin: 0 0 10px; }
ul, ol { margin: 0 0 10px; padding-left: 20px; }
li { margin: 4px 0; }
a { color: var(--link); }
strong { font-weight: 600; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 6px 8px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
thead th { font-size: 12px; color: var(--muted); }
fieldset { margin: 12px 0; padding: 8px 12px 12px; border: 1px solid var(--line); border-radius: 10px; }
legend { padding: 0 4px; font-weight: 600; }
details > summary { cursor: pointer; }
code { font-size: 13px; }
img { max-width: 100%; height: auto; }

/* 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-brand { display: flex; align-items: center; min-width: 0; color: inherit; text-decoration: none; }
.bar-name { font-size: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-logo { display: block; height: auto; width: auto; max-height: 40px; max-width: 240px; object-fit: contain; }
.page { max-width: 760px; margin: 0 auto; padding: 16px 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; text-decoration: none; }
.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-support { -webkit-mask-image: url("/images/tab_support.svg"); mask-image: url("/images/tab_support.svg"); }
.tab-jobs { -webkit-mask-image: url("/images/tab_jobs.svg"); mask-image: url("/images/tab_jobs.svg"); }
.tab-account { -webkit-mask-image: url("/images/tab_account.svg"); mask-image: url("/images/tab_account.svg"); }
.tab-help { -webkit-mask-image: url("/images/tab_help.svg"); mask-image: url("/images/tab_help.svg"); }
.foot { margin-top: 32px; text-align: center; }
.foot p { margin: 4px 0; }
.is-embed { background: var(--card); }

/* 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; margin: 0 0 12px; padding: 0; list-style: none; }
.list > li { margin: 0; }
.row { display: flex; align-items: center; gap: 8px; }
.wrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.grow { flex: 1 1 auto; min-width: 0; }
.gap-top { margin-top: 16px; }
.inline-form { display: inline; }
.inline-form label { display: inline; }
.pre { white-space: pre-wrap; }

/* Words. */
.kicker { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--primary); }
.muted, .legal { font-size: 13px; color: var(--muted); }
.muted a, .legal a { color: inherit; }
.card-title { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.problem { color: var(--danger); }
.good { color: var(--good); }
.status-note { display: inline-block; padding: 2px 10px; border-radius: 12px; background: var(--info-soft); color: var(--primary); font-size: 12px; font-weight: 600; white-space: nowrap; }

/* Messages on a page. */
.notice, .msg { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--danger-soft); color: var(--danger); }
.notice a, .msg a { color: inherit; }
.notice.is-good, .msg.is-good { background: var(--good-soft); color: var(--good); }

/* Cards. */
.card, .panel, .how-card { display: block; margin: 0 0 12px; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; color: inherit; }
.how-card > h2, .panel > h2, .card > h2 { margin-top: 0; }
.how-card > :last-child, .panel > :last-child, .card > :last-child { margin-bottom: 0; }
a.card { text-decoration: none; }
.how-grid { display: flex; flex-direction: column; gap: 0; margin: 0 0 12px; }

/* A list of things to open: tickets, articles, estimate lines. */
.ticket-list, .article-list, .messages { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.ticket-list > li, .article-list > li { display: block; margin: 0; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.ticket-list > li > a, .article-list > li > a { font-weight: 600; text-decoration: none; }
.ticket-list > li > span:not(.status-note), .article-list > li > span { display: block; font-size: 13px; color: var(--muted); }
.ticket-list > li.ticket-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ticket-list > li.ticket-row > .status-note { flex: none; }
.messages > li { margin: 0; }
.message-mine { border-left: 4px solid var(--primary); }
.invoice-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.invoice-amount { font-size: 18px; font-weight: 600; white-space: nowrap; }
.pay-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 4px; }
.pay-actions .inline-form { display: block; }
.pay-tip { margin-top: 8px; }

/* Buttons: the app's Go, Quiet and Danger, and its filled default. A plain button on a form is the filled one. */
button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 10px 0 0;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--fill);
  color: var(--on-primary);
  font: inherit;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  overflow-wrap: normal;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:disabled, .btn:disabled { opacity: .55; cursor: default; }
.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-plain-link { display: block; min-height: 0; padding: 0; border: 0; background: none; color: var(--link); text-decoration: underline; }

/* Fields: Android's underlined boxes. 16px, so an iPhone does not zoom the page on every tap. */
label { display: block; margin-top: 12px; font-size: 14px; }
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), 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; }
select option { background: var(--card); color: var(--text); }
textarea { border: 1px solid var(--muted); border-radius: 8px; padding: 8px; }
input:focus, select:focus, textarea:focus { outline: none; border-bottom: 2px solid var(--primary); }
textarea:focus { border: 1px solid var(--primary); box-shadow: 0 0 0 1px var(--primary); }
input::placeholder, textarea::placeholder { color: var(--muted); }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; margin: 0 6px 0 0; vertical-align: middle; accent-color: var(--primary); }
input[type=file] { display: block; max-width: 100%; margin-top: 6px; font: inherit; font-size: 14px; }
.help-search { margin-bottom: 16px; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* An article a business wrote. */
.shop-article h1, .shop-article h2, .shop-article h3 { margin-top: 16px; }
.shop-article iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; }

/* A page that stands alone, with no bar: a request form, an invoice, a signup. */
.page-narrow { max-width: 560px; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
label.check { display: flex; gap: 8px; align-items: flex-start; }
label.check input { margin: 0; flex: none; }