/* ICsg QP(S) Team Clock. Design rule: built for older, low-tech users.
   Text 20 px or more, buttons 60 px or more and full width, contrast 7:1 (WCAG AAA) for text,
   IN and OUT always shown as big words as well as colour. */
:root {
  --in: #075a1c;         /* white on it 8.3:1 */
  --out: #a00016;        /* white on it 8.4:1 */
  --teal: #2fbebc;       /* ICsg logo ring: borders and decoration only */
  --teal-dark: #0a5755;  /* white on it 8.1:1 */
  --ink: #000000;
  --paper: #ffffff;
  --grey: #333333;       /* 12.6:1 on white */
  --link: #0040c8;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0 auto;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 21px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  max-width: 640px;
  overflow-wrap: break-word;
}
[hidden] { display: none !important; }
img, svg, video { max-width: 100%; }
.screen { padding: 0 16px 8px; }
.screen-cam { padding: 0; }
.pad { padding: 0 16px; }
.center { text-align: center; }
.big { font-size: 24px; }
h1, .t { font-size: 30px; font-weight: bold; text-align: center; margin: 16px 0 10px; line-height: 1.2; }
h2 { font-size: 25px; margin: 18px 0 10px; line-height: 1.25; }
p { margin: 12px 0; }
a { color: var(--link); }
.logo { display: block; width: 78%; max-width: 360px; height: auto; margin: 16px auto 0; }
.who { font-size: 24px; font-weight: bold; margin: 12px 0; }
.err { color: var(--out); font-weight: bold; font-size: 21px; }
.err:empty, .msg:empty, .preview:empty { display: none; }
.msg { font-weight: bold; }

/* brand header and footer on every screen */
.brandbar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--paper); border-bottom: 4px solid var(--teal); }
.brandbar img { width: 40px; height: 40px; flex: 0 0 40px; }
.brandbar span { font-size: 22px; font-weight: bold; color: var(--teal-dark); }
.foot { margin-top: 28px; padding: 14px 16px; text-align: center; font-size: 20px; font-weight: bold; color: #fff; background: var(--teal-dark); }

/* form */
label { display: block; font-weight: bold; margin: 18px 0 8px; font-size: 24px; }
input[type=text] {
  width: 100%;
  font: inherit;
  font-size: 28px;
  padding: 14px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  min-height: 64px;
}
input[type=text]:focus { outline: 5px solid var(--teal); outline-offset: 2px; }
input[type=text]::placeholder { color: #595959; opacity: 1; font-size: 20px; } /* grey hint, 7:1 on white; never a value */
/* Full Name: the hint is drawn by .ph so it WRAPS on narrow screens and at 150% zoom (a placeholder cannot wrap).
   Same text as the placeholder attribute, which stays for screen readers; .ph hides as soon as a letter is typed. */
.namebox { display: grid; }
.namebox > input, .namebox > .ph { grid-area: 1 / 1; }
.namebox > input::placeholder { color: transparent; }
.namebox > .ph { align-self: center; padding: 10px 17px; font-size: 20px; line-height: 1.3; color: #595959; pointer-events: none; }
.namebox > input:not(:placeholder-shown) + .ph { visibility: hidden; }
.preview { font-size: 20px; color: var(--grey); }

/* buttons: full width, at least 60 px tall */
.btn {
  display: block;
  width: 100%;
  min-height: 64px;
  margin: 14px 0;
  padding: 16px;
  font: inherit;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.btn:focus-visible { outline: 5px solid var(--teal); outline-offset: 3px; }
.btn-main { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; font-size: 27px; min-height: 80px; }
.btn-main:disabled { background: #d6d6d6; border: 3px dashed #333; color: #222; cursor: not-allowed; }
.btn-in { background: var(--in); border-color: var(--in); color: #fff; }
.btn-out { background: var(--out); border-color: var(--out); color: #fff; }
.btn-big { font-size: 28px; min-height: 90px; }
.btn-huge { font-size: 56px; min-height: 150px; padding-top: 36px; letter-spacing: 6px; }

body.mode-IN #btn-send:not(:disabled) { background: var(--in); border-color: var(--in); }
body.mode-OUT #btn-send:not(:disabled) { background: var(--out); border-color: var(--out); }

.banner {
  margin: 0 -16px 12px;
  padding: 14px 16px;
  font-size: 60px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  background: var(--teal-dark);
  letter-spacing: 6px;
  line-height: 1.1;
}
.screen-cam .banner { margin: 0; }
body.mode-IN .banner { background: var(--in); }
body.mode-OUT .banner { background: var(--out); }

/* camera */
.cam { position: relative; background: #555; min-height: 46vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#video { display: block; width: 100%; max-height: 62vh; object-fit: cover; background: #000; }
#video.mirror { transform: scaleX(-1); }
.gear { position: absolute; top: 10px; right: 10px; min-height: 52px; min-width: 52px; padding: 8px 14px; border-radius: 26px; border: 3px solid #fff; background: rgba(0, 0, 0, 0.8); color: #fff; font: bold 20px Arial, sans-serif; cursor: pointer; }
.camctl { min-height: 140px; background: #111; display: flex; align-items: center; justify-content: space-around; padding: 8px 0; }
.ic, .shutwrap { min-height: 48px; min-width: 48px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; color: #fff; cursor: pointer; font: bold 20px Arial, sans-serif; padding: 4px; }
.ic-sym { display: flex; width: 64px; height: 64px; border-radius: 50%; background: #333; border: 3px solid #aaa; align-items: center; justify-content: center; font-size: 32px; }
.shut { display: block; width: 90px; height: 90px; border-radius: 50%; background: #fff; border: 8px solid #999; }
.ic, .ic-spacer { flex: 1 1 0; text-align: center; line-height: 1.15; }
.shutwrap { flex: 0 0 auto; }
.ic:focus-visible, .shutwrap:focus-visible, .gear:focus-visible { outline: 5px solid var(--teal); outline-offset: 3px; }

/* check and send */
#chk-img { display: block; width: 100%; height: auto; border: 3px solid var(--ink); border-radius: 6px; }
.capbox { margin: 12px 0; padding: 14px; font-size: 22px; font-weight: bold; border: 3px solid #333; border-radius: 10px; background: #f6f6f6; -webkit-user-select: all; user-select: all; }
.capbox:empty { display: none; }
.warn { background: #fff3c4; border: 3px solid #7a5a00; padding: 12px; font-weight: bold; }
.tip { font-size: 20px; color: var(--grey); }

/* setup steps: phone choice, then one step at a time */
.plat-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 170px; font-size: 30px; }
.pico { color: var(--teal-dark); }
.plat-btn .likely { display: none; font-size: 20px; font-weight: bold; color: var(--teal-dark); }
.plat-btn.is-likely { border: 6px solid var(--teal-dark); background: #e8f8f7; }
.plat-btn.is-likely .likely { display: block; }
.plat-now { font-weight: bold; color: var(--teal-dark); font-size: 22px; margin-bottom: 0; }
.stepno { display: inline-block; margin: 8px 0 0; padding: 4px 14px; border-radius: 20px; background: var(--teal-dark); color: #fff; font-weight: bold; font-size: 21px; }
.stepcard h2 { margin-top: 12px; }
.howto { margin: 8px 0; text-align: center; }
.howto img { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; border: 3px solid var(--teal-dark); border-radius: 12px; }
.done-pic { display: block; width: 80%; max-width: 300px; height: auto; margin: 8px auto; border: 3px solid var(--teal-dark); border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .replay { display: none; } }
.steps { padding-left: 1.5em; font-size: 23px; }
.steps li { margin: 0 0 18px; }
.steps li::marker { font-weight: bold; color: var(--teal-dark); }
.ico { vertical-align: middle; }
.wab { background: #fde2e2; border: 3px solid var(--out); border-radius: 10px; padding: 12px; font-weight: bold; color: #5c0000; margin: 12px 0; }
.wab p { margin: 0 0 8px; }
.wab-amber { background: #fff3c4; border-color: #7a5a00; color: #3d2d00; }
.chk { background: #e3f6e7; border: 3px solid var(--in); border-radius: 10px; padding: 12px; }
.note { border: 3px solid var(--teal-dark); border-radius: 10px; padding: 4px 16px 10px; margin-top: 24px; }
.add-icon { display: block; margin: 10px auto; border-radius: 22px; }
body.plat-ios .only-and, body.plat-and .only-ios { display: none !important; }

.tick { width: 140px; height: 140px; border-radius: 50%; background: var(--in); color: #fff; font-size: 92px; display: flex; align-items: center; justify-content: center; margin: 36px auto 10px; }
.sheet-fig { margin: 16px auto; text-align: center; }
.sheet-fig svg { width: 100%; max-width: 360px; height: auto; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* One primary per screen: everything else is a plain text link, still 48 px tall to tap */
.link {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 4px 0;
  padding: 12px 8px;
  font: inherit;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  color: var(--link);
  text-decoration: underline;
  background: none;
  border: 0;
  cursor: pointer;
}
.link:focus-visible { outline: 5px solid var(--teal); outline-offset: 2px; }
.screen-cam label.link { color: var(--link); }

/* header and footer are navigation to this team's main page: no new call to action, just a pressed state */
.navhome { display: flex; min-height: 48px; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a.foot { display: block; color: #fff; }
.navhome:active { filter: brightness(0.88); }
.navhome:focus-visible { outline: 5px solid var(--teal); outline-offset: -5px; }
.place { font-size: 22px; font-weight: bold; color: var(--teal-dark); margin-top: 0; }

/* HOME hub: yellow line, then IN and OUT as two big equal tiles (one decision) */
.yline { margin: 14px 0; padding: 12px 14px; background: #ffd84d; color: #000; font-size: 24px; font-weight: bold; text-align: center; border-radius: 10px; border: 3px solid #7a5a00; }
.yline:empty { display: none; }
.hub { display: flex; flex-direction: column; gap: 16px; margin: 8px 0; }
.hub .btn-huge { margin: 0; min-height: 26vh; display: flex; align-items: center; justify-content: center; padding: 16px; font-size: 64px; }
.hub-more { margin: 12px 0; }   /* FUTURE FEATURE TILES go here (hidden for now) */
.link-small { font-size: 20px; font-weight: normal; }