/* PCCS HPV survey: shared design system for the Android app (mobile/www) and the web platform (web). Keep both copies identical.
   Offline first: system fonts only (Roboto on Android), no web fonts or icon libraries. Status colours: ok = approved/done,
   info = under review, warn = draft or changes requested, error = rejected or a problem. Messages: .warn (red) only for a
   problem or a refusal; .tip (amber) for guidance. --edge: the outline of boxes to fill and answers to tap, at least 3:1
   on any background so it stays visible outdoors (design review, 20 Oct 2026). */
:root {
  --bg: #F2F5F4; --surface: #FFFFFF; --surface-2: #F7FAF9; --ink: #13221F; --muted: #5A6B67; --line: #E1E8E6; --line-strong: #C7D3D0; --edge: #7A8B87;
  --brand: #0B6B66; --brand-strong: #075450; --brand-ink: #FFFFFF; --brand-soft: #E2F2EF;
  --mark: #D98E04; --mark-soft: #FFF4DB;
  --ok: #1D7A4C; --ok-soft: #E2F4EA; --info: #2556A6; --info-soft: #E7EEFB; --warn: #8F5600; --warn-soft: #FFF1D6; --error: #B3261E; --error-soft: #FDECEA;
  --teal: var(--brand);
  --shadow: 0 1px 2px rgba(17, 34, 31, .04), 0 6px 22px rgba(17, 34, 31, .06);
  --shadow-lg: 0 12px 36px rgba(17, 34, 31, .18);
  --r-sm: 8px; --r: 12px; --r-lg: 16px;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --font: Roboto, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D1614; --surface: #15201E; --surface-2: #1A2725; --ink: #E3ECEA; --muted: #9AACA8; --line: #24332F; --line-strong: #34463F; --edge: #5E726D;
    --brand: #4FC1B7; --brand-strong: #7AD3CB; --brand-ink: #062420; --brand-soft: #123330;
    --mark: #F2B33D; --mark-soft: #392B10;
    --ok: #6FCF97; --ok-soft: #13301F; --info: #8DB4F5; --info-soft: #17243A; --warn: #F2B33D; --warn-soft: #33270F; --error: #FF8A80; --error-soft: #3A1A18;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 3px 12px rgba(0, 0, 0, .25); --shadow-lg: 0 10px 32px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0D1614; --surface: #15201E; --surface-2: #1A2725; --ink: #E3ECEA; --muted: #9AACA8; --line: #24332F; --line-strong: #34463F; --edge: #5E726D;
  --brand: #4FC1B7; --brand-strong: #7AD3CB; --brand-ink: #062420; --brand-soft: #123330;
  --mark: #F2B33D; --mark-soft: #392B10;
  --ok: #6FCF97; --ok-soft: #13301F; --info: #8DB4F5; --info-soft: #17243A; --warn: #F2B33D; --warn-soft: #33270F; --error: #FF8A80; --error-soft: #3A1A18;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 3px 12px rgba(0, 0, 0, .25); --shadow-lg: 0 10px 32px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--font); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
main { max-width: 1240px; margin: 0 auto; padding: 32px 20px 56px; }
h1 { font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; margin: 0 0 6px; }
h2 { letter-spacing: -.005em; }
h3 { font-size: 15px; font-weight: 700; margin: 20px 0 8px; }
.lead { color: var(--muted); margin: 0 0 22px; max-width: 70ch; }
.narrow { max-width: 760px; }
.muted { color: var(--muted); }
a { color: var(--brand); }
#r-table td, #r-table th, #c-table td, #c-table th { white-space: nowrap; }

/* ---- Buttons ---- */
.btn { font: inherit; font-weight: 600; font-size: 15px; min-height: 44px; padding: 10px 18px; border-radius: 10px; cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; transition: background .15s, border-color .15s, transform .45s var(--spring); -webkit-tap-highlight-color: transparent; }
.btn:hover { background: var(--surface-2); }
/* Spring feedback: pressed controls shrink a little and bounce back when released */
.btn:active, .chip:active { transform: scale(.95); transition-duration: .08s; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; cursor: pointer; width: 100%; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn:focus-visible, .btn:focus-within, input[type="search"]:focus-visible, .chip:focus-visible, summary:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 2px; box-shadow: 0 0 0 2px var(--brand); }
.small-btn { min-height: 34px !important; padding: 5px 12px !important; font-size: 13px !important; border-radius: 8px !important; margin: 2px 4px 2px 0; }
.linkish { background: none; border: 0; color: var(--brand); font: inherit; font-weight: 600; cursor: pointer; padding: 4px 0; min-height: 24px; text-decoration: underline; }
.nowrap { white-space: nowrap; }

/* ---- Text and messages ---- */
.info { margin: 10px 0 0; color: var(--muted); font-size: 15px; }
.info strong { color: var(--ink); }
.error { color: var(--error); }
.info.error { color: var(--error); }
.warn { color: var(--error); font-size: 14px; margin: 8px 0 0; background: var(--error-soft); border-radius: var(--r-sm); padding: 8px 12px; }
.tip { color: var(--ink); font-size: 14px; margin: 8px 0 0; background: var(--warn-soft); border-left: 4px solid var(--mark); border-radius: var(--r-sm); padding: 8px 12px; }
.tip-tx { color: var(--warn); }
.note { background: var(--mark-soft); color: var(--ink); border-radius: var(--r-sm); padding: 10px 12px; font-size: 14px; margin: 12px 0 0; }
.summary { color: var(--muted); font-size: 14px; margin: 4px 0 0; }
.store-note { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.place { color: var(--muted); margin: 2px 0 0; font-size: 14px; }
.count { margin: 16px 0 0; font-size: 15px; }

/* ---- Fields ---- */
.search { display: flex; gap: 10px; margin-top: 20px; }
.search input { flex: 1; min-width: 0; font: inherit; font-size: 16px; min-height: 46px; padding: 10px 14px; border: 1px solid var(--edge); border-radius: 10px; background: var(--surface); color: var(--ink); text-transform: uppercase; }
.search input::placeholder { text-transform: none; }
.search input:disabled { opacity: .5; }
.setup { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; padding: 14px; border: 1px dashed var(--line-strong); border-radius: var(--r); }
.setup label, .f label.q, .f span.q { display: block; font-size: 15px; font-weight: 600; margin-bottom: 6px; line-height: 1.35; }
.setup input, .f input[type=text], .f input[type=number], .f input[type=date], .f input[type=time], .f input[type=tel], .f textarea,
select.sel, input.inp, .form-grid input, .form-grid select, .login input {
  width: 100%; font: inherit; font-size: 16px; min-height: 46px; padding: 10px 12px; border: 1px solid var(--edge); border-radius: 10px; background: var(--surface); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
select.sel, input.inp { width: auto; max-width: 100%; min-height: 40px; padding: 7px 10px; font-size: 15px; }
.f textarea { min-height: 84px; resize: vertical; }
.setup input:focus-visible, .f input:focus-visible, .f textarea:focus-visible, select.sel:focus-visible, input.inp:focus-visible, .form-grid input:focus-visible, .form-grid select:focus-visible, .login input:focus-visible {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
input:disabled, textarea:disabled, select:disabled { opacity: .6; }
details { margin-top: 14px; }
summary { cursor: pointer; font-weight: 600; font-size: 15px; color: var(--brand); }

/* ---- Cards and panels ---- */
.card { margin-top: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow); }
.card h2 { font-size: 19px; margin: 0; }
.card .btn.primary { width: 100%; margin-top: 16px; font-size: 16px; min-height: 50px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 4px 18px 16px; margin-top: 16px; box-shadow: var(--shadow); }
.panel > h2 { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 16px 0 2px; color: var(--brand); }
.f { padding: 16px 0; border-bottom: 1px solid var(--line); }
.f:last-child { border-bottom: 0; }
.f .code { color: var(--brand); font-weight: 700; margin-right: 6px; font-size: 13px; background: var(--brand-soft); border-radius: 6px; padding: 1px 6px; }
.f .hint { font-size: 13px; color: var(--muted); margin: -2px 0 10px; }
.f.pre input { background: var(--mark-soft); border-color: var(--mark); }
.pre-tag { font-size: 13px; font-weight: 700; color: var(--warn); background: var(--mark-soft); border-radius: 99px; padding: 2px 8px; margin-left: 6px; white-space: nowrap; vertical-align: 1px; }

/* Answer options as tiles */
.opts { display: flex; flex-direction: column; gap: 8px; }
.opts label { display: flex; gap: 12px; align-items: center; min-height: 48px; padding: 10px 14px; border: 1px solid var(--edge); border-radius: 10px; background: var(--surface); cursor: pointer; font-size: 15px; line-height: 1.35; transition: background .15s, border-color .15s; -webkit-tap-highlight-color: transparent; }
.opts label { transition: background .15s, border-color .15s, transform .45s var(--spring); }
.opts label:hover { background: var(--surface-2); }
.opts label:active { transform: scale(.98); transition-duration: .08s; }
.opts label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); animation: chosen .35s var(--spring); }
/* the same for a WebView older than 105, which does not know :has (class set by app.js); a separate rule, or it would be ignored */
.opts label.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.opts label:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
@keyframes chosen { 40% { transform: scale(1.015); } }
.opts label:has(input:disabled) { cursor: default; }
.opts input { margin: 0; accent-color: var(--brand); width: 20px; height: 20px; flex: none; }
.opts .c { color: var(--muted); font-size: 13px; margin-left: auto; padding-left: 8px; font-variant-numeric: tabular-nums; }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.pair span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.computed table { margin-top: 4px; max-width: 420px; }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; margin-top: 10px; max-height: 420px; overflow-y: auto; border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--muted); font-size: 13px; letter-spacing: .03em; text-transform: uppercase; position: sticky; top: 0; background: var(--surface-2); }
td.n { text-align: right; white-space: nowrap; }
th.n { text-align: right; }
td.blank { color: var(--muted); font-style: italic; }
tr.picked td { background: var(--mark-soft); }
.result-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; }
.act { white-space: nowrap; }
.act .btn { padding: 6px 11px; font-size: 13px; margin-right: 6px; min-height: 34px; }

/* ---- Status pills ---- */
.st { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; line-height: 1.4; padding: 3px 10px; border-radius: 99px; margin: 2px 6px 2px 0; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.st.done { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.st.part { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.st.off { background: var(--error-soft); color: var(--error); border-color: transparent; }
.st.info { background: var(--info-soft); color: var(--info); border-color: transparent; }

/* ---- Forms on the phone ---- */
#form-view { display: none; }
body.in-form #form-view { display: block; }
body.in-form #list-view { display: none; }
.form-top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.form-top h1 { margin: 0; flex: 1; min-width: 200px; font-size: 22px; }
.form-actions { position: sticky; bottom: 0; z-index: 4; background: var(--bg); background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 18px; }
.form-actions .btn { flex: 1 1 140px; }
.girls-list { margin-top: 10px; }
.girls-list .row { display: flex; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.girls-list .row:last-child { border-bottom: 0; }
.girls-list .row .nm { flex: 1; min-width: 160px; }

/* ---- Header and navigation ---- */
header.top { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; box-shadow: 0 1px 0 rgba(0, 0, 0, .02); }
header.top .in { max-width: 1240px; margin: 0 auto; padding: 10px 20px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
header.top .brand { font-weight: 700; font-size: 16px; flex: 1; min-width: 180px; display: flex; flex-direction: column; }
header.top .brand small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
.who { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.who img { width: 28px; height: 28px; border-radius: 50%; }
.role { font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--brand-soft); color: var(--brand); }
nav.tabs { max-width: 1240px; margin: 0 auto; padding: 0 16px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
nav.tabs button { font: inherit; font-weight: 600; font-size: 14px; background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 12px; color: var(--muted); cursor: pointer; white-space: nowrap; }
nav.tabs button:hover { color: var(--ink); }
nav.tabs button[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }
nav.tabs button:focus-visible { outline: 3px solid var(--brand-soft); }
.view[hidden] { display: none !important; }

/* ---- Dashboard ---- */
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow); }
.kpi b { display: block; font-size: 28px; line-height: 1.1; letter-spacing: -.02em; }
.kpi span { font-size: 13px; color: var(--muted); }
.kpi.hi { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand), var(--shadow); }
/* Boxes that open the records behind them (owner, 15 Oct 2026: every box and alert can be clicked) */
.kpi-btn { font: inherit; text-align: left; color: var(--ink); cursor: pointer; width: 100%; transition: border-color .15s, transform .45s var(--spring); }
.kpi-btn:hover { border-color: var(--brand); }
.kpi-btn:active { transform: scale(.97); transition-duration: .08s; }
.kpi.alert b { color: var(--error); }
.w-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--error); color: #fff; font-size: 11px; font-weight: 700; text-decoration: none; }
.prog { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; min-width: 80px; }
.prog i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.bars .b { display: grid; grid-template-columns: minmax(140px, 260px) 1fr 44px; gap: 10px; align-items: center; font-size: 14px; padding: 4px 0; }
.bars .b .bar { height: 12px; background: var(--mark); border-radius: 99px; }
.row-gap { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { font: inherit; font-size: 14px; font-weight: 600; min-height: 36px; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .45s var(--spring); }
.chip.locked { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.gate { max-width: 560px; margin: 60px auto; }

/* ---- Log in ---- */
.login { max-width: 420px; margin: 7vh auto; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 28px 24px; box-shadow: var(--shadow); }
.login h1 { font-size: 24px; }
.login label { display: block; font-weight: 600; font-size: 14px; margin: 14px 0 6px; }
.login .btn.primary { width: 100%; margin-top: 22px; min-height: 50px; font-size: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.form-grid label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }

/* ---- Toast and questions ---- */
/* Toasts slide up from the bottom, stay about 3 seconds, then fade out (class "out") */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); max-width: calc(100% - 32px); background: var(--ink); color: var(--surface); padding: 12px 18px; border-radius: 14px; font-size: 15px; z-index: 30; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 10px; animation: toast-in .4s var(--spring); transition: opacity .25s, transform .25s; }
.toast.out { opacity: 0; transform: translate(-50%, 30%); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 120%); } }
.toast .ti { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--ok-soft); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.toast.err .ti { stroke: var(--error-soft); }
.toast .ti path { stroke-dasharray: 22; stroke-dashoffset: 22; animation: draw-tick .4s .15s ease-out forwards; }
@keyframes draw-tick { to { stroke-dashoffset: 0; } }
.toast .ta { font: inherit; font-weight: 700; font-size: 14px; color: var(--brand-soft); background: none; border: 0; padding: 6px 4px 6px 10px; margin-left: 4px; cursor: pointer; white-space: nowrap; }
[hidden] { display: none !important; }
/* Questions shown inside the page (ask() in app.js): browser confirm()/prompt() pop-ups are blocked in some windows */
.ask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 16, 14, .55); }
.ask-box { width: 100%; max-width: 440px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: var(--shadow-lg); }
.ask-box p { margin: 0 0 16px; white-space: pre-line; line-height: 1.5; }
.ask-box .inp { width: 100%; }
.ask-box .row-gap { justify-content: flex-end; }

/* ---- Loading placeholders: pulsing grey shapes like the content that is coming ---- */
.skel { display: block; background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%); background-size: 300% 100%; animation: skel 1.3s ease-in-out infinite; border-radius: 8px; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: 0 0; } }
.sk-card { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.sk-card:last-child { border-bottom: 0; }
.sk-card > div { flex: 1; }
.sk-dot { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.sk-line { height: 12px; margin: 6px 0; width: 72%; }
.sk-line.short { width: 42%; }
.sk-tile { height: 74px; border-radius: var(--r); }

/* ---- Floating labels: the label sits inside the box and moves up onto its border when the box is used ---- */
.fl { position: relative; margin-top: 16px; }
.fl, .fl input { box-sizing: border-box; }   /* set here too: inside <details> the inherited value does not reach */
.fl input { width: 100%; font: inherit; font-size: 16px; min-height: 54px; padding: 14px; border: 1px solid var(--edge); border-radius: 12px; background: var(--surface); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.fl label { position: absolute; left: 10px; top: 14px; margin: 0; padding: 0 5px; font-size: 16px; font-weight: 500; line-height: 26px; color: var(--muted); background: var(--surface); border-radius: 4px; pointer-events: none;
  transform-origin: left center; transition: transform .2s cubic-bezier(.2, .8, .3, 1), color .15s; }
.fl input::placeholder { color: transparent; }
.fl input:focus::placeholder { color: var(--muted); }
.fl input:focus + label, .fl input:not(:placeholder-shown) + label, .fl input:-webkit-autofill + label { transform: translateY(-27px) scale(.8); font-weight: 600; }
.fl input:focus + label { color: var(--brand); }
.fl input:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.login .fl label, .form-grid .fl label { display: block; margin: 0; font-size: 16px; font-weight: 500; }
.form-grid .fl { margin-top: 0; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }