/* Screen and dialog layouts (dp values from ios-spec/08 and the screenshot kit). */

/* ---------------------------------------------------------------- frame */
#screens { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#screens > .screen { position: absolute; inset: 0; }
.screen.pushed { transform: translateX(24px); opacity: 0; transition: transform .18s ease-out, opacity .18s ease-out; z-index: 5; }
.screen.pushed.in { transform: none; opacity: 1; }
.boot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #fff; z-index: 20; }
.boot img { width: 200px; height: auto; }

/* ---------------------------------------------------------------- Home */
.home-header { position: relative; z-index: 3; flex: none; background: var(--primary); }
.home-header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; pointer-events: none;
  background: linear-gradient(rgba(0,0,0,.245), rgba(0,0,0,.13) 40%, rgba(0,0,0,.037) 70%, rgba(0,0,0,0));
}
.home-logo-row { display: flex; align-items: center; padding: 5px; }
.home-logo { width: 40px; height: auto; margin-left: 5px; }
.home-wordmark { height: 30px; width: auto; margin-left: 5px; min-width: 0; object-fit: contain; object-position: left; flex: 0 1 auto; max-width: calc(100% - 160px); }
.lang-chip { display: flex; align-items: center; margin-left: auto; margin-right: 10px; flex: none; }
.lang-chip img { width: 25px; height: 25px; }
.lang-chip .label { height: 30px; padding: 0 10px 0 5px; font-size: 12px; line-height: 30px; color: #fff; white-space: nowrap; }

.home-bar { display: flex; background: #fff; }
.hb {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 2px; min-width: 0;
  color: #fff; font-size: 12px; line-height: 16px; text-align: center;
  white-space: pre-line;
}
.hb:active { filter: brightness(.9); }
.hb-message, .hb-location { background: var(--message); }
.hb-data { background: var(--data); }
.hb-search { background: var(--search); flex-grow: 3; font-size: 18px; line-height: 24px; }
.hb-download { background: var(--print); }
.hb-photo { background: var(--purple); }
.hb-logout { background: var(--exit); }

.home-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: var(--safe-bottom); }
.home-message {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  padding: 0 16px; text-align: center; white-space: pre-line;
  font-size: 18px; color: var(--text-secondary);
}

/* ---------------------------------------------------------------- voter grid */
.vgrid { position: relative; flex: 1 1 auto; min-height: 0; background: var(--window-bg); color: var(--grid-text); font-size: 13px; }
.vg-scroll {
  position: absolute; inset: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; scrollbar-width: none;
}
.vg-scroll::-webkit-scrollbar { display: none; }
.vg-sizer { position: relative; }
.vg-head { position: sticky; top: 0; z-index: 2; height: 38px; }
.vg-corner {
  position: sticky; left: 0; z-index: 3; height: 38px;
  background: var(--grid-header-bg);
  border-right: var(--hair) solid var(--grid-line); border-bottom: var(--hair) solid var(--grid-line);
}
.vg-hcells { position: absolute; left: 0; top: 0; height: 38px; }
.vg-h {
  position: absolute; top: 0; height: 38px; padding: 0 10px;
  line-height: 38px; white-space: nowrap; overflow: hidden;
  background: var(--grid-header-bg);
  border-right: var(--hair) solid var(--grid-line); border-bottom: var(--hair) solid var(--grid-line);
  cursor: pointer;
}
.vg-rows { position: absolute; left: 0; top: 0; }
.vg-row { position: absolute; left: 0; top: 0; height: 38px; will-change: transform; }
.vg-rn {
  position: sticky; left: 0; z-index: 1; height: calc(38px + var(--hair));
  line-height: 38px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--grid-header-bg);
  border-right: var(--hair) solid var(--grid-line); border-bottom: var(--hair) solid var(--grid-line);
  cursor: pointer;
}
.vg-c {
  position: absolute; top: 0; height: calc(38px + var(--hair)); padding: 0 10px;
  line-height: 38px; white-space: nowrap; overflow: hidden;
  background: var(--grid-cell-bg);
  border-right: var(--hair) solid var(--grid-line); border-bottom: var(--hair) solid var(--grid-line);
  cursor: pointer;
}
.vg-c.al, .vg-h.al { text-align: left; }
.vg-c.ac, .vg-h.ac { text-align: center; }
.vg-img { padding: 0; background-position: center; background-repeat: no-repeat; background-size: 28px 28px; }
.vg-img.tick { background-image: url("../assets/img/ic_tick.png"); }
.vg-img.blank { background-image: url("../assets/img/ic_blank.png"); }
.vg-c.sel, .vg-h.sel, .vg-rn.sel { background-color: var(--grid-selected-bg); color: #292727; }
.vg-h.shadow, .vg-rn.shadow { background-color: #BAB7B7; }

/* ---------------------------------------------------------------- Home dialogs */
.alert-btn.primary { color: var(--primary); }

.vad { display: flex; flex-direction: column; padding: 10px; }
.vad-title { text-align: center; font-size: 18px; font-weight: 700; color: var(--primary); padding: 2px 0; }
.vad .edittext { margin: 10px; width: auto; }
.vad .edittext.msg { margin: 10px 10px 15px; }
.vad .pill-row > .pill { min-width: 0; }

.btn-row { display: flex; justify-content: flex-end; gap: 10px; margin: 0 20px 25px 10px; }
.pill.small { height: 35px; min-width: 88px; padding: 0 12px; }

.um-message { padding: 18px 24px; font-size: 16px; color: var(--text-primary); }
.um-field { margin: 15px 10px; }
.sm { display: flex; flex-direction: column; }
.sm .edittext { margin: 10px 10px 15px; width: auto; }
.sm .btn-row { margin-bottom: 10px; }

.ex { padding: 15px; }
.ex-title { font-size: 18px; font-weight: 700; color: var(--primary); }
.ex-sub { margin: 4px 0 25px; font-size: 12px; color: var(--primary); }
.ex-row { display: flex; }
.ex-half { flex: 1 1 0; display: flex; justify-content: center; }
.ex-btn { font-size: 12px; }

.bn { position: relative; }
.bn-close { position: absolute; top: 0; right: 0; padding: 10px; z-index: 1; }
.bn-close img, .pop-close img { width: 35px; height: 35px; }
.bn-col { display: flex; flex-direction: column; align-items: stretch; padding: 24px; text-align: center; }
.bn-title { font-size: 20px; font-weight: 700; color: #222; padding: 0 30px; }
.bn-sub { margin-top: 8px; font-size: 14px; color: #777; }
.bn-choose { margin-top: 24px; min-height: 60px; font-size: 14px; font-weight: 500; color: #2196F3; box-shadow: 0 1px 5px rgba(0,0,0,.12), 0 2px 2px rgba(0,0,0,.2); }
.bn-preview { margin-top: 10px; width: 100%; max-height: 40vh; object-fit: contain; }
.bn-upload { margin-top: 10px; width: 100%; }
.bn-progress { padding: 12px; }
.bn-progress-text { margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.bn-bar { height: 8px; display: flex; align-items: center; }
.bn-bar::before { content: ""; position: absolute; }
.bn-bar { position: relative; background: transparent; }
.bn-bar::after { content: ""; position: absolute; left: 0; right: 0; height: 4px; background: rgba(221,221,221,.3); }
.bn-bar-fill { position: relative; z-index: 1; height: 4px; width: 0; background: #2196F3; transition: width .15s; }

.pop { position: relative; }
.pop-img { width: 100%; height: auto; max-height: 80vh; object-fit: contain; padding: 4px; margin-bottom: -1px; }
.pop-close { position: absolute; top: 0; right: 0; padding: 5px; }

.dialog-bg { background: #fff; border: 1px solid var(--dark-gray); border-radius: 10px; padding: 25px; }
.lang-title { margin-bottom: 7px; font-size: 16px; font-weight: 700; color: #000; }
.lang-options { display: flex; flex-direction: column; gap: 10px; padding: 10px; }
.lang-options .radio { font-size: 14px; }

.tg-message { padding-top: 12px; }
.tg-links { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 24px 8px; }
.tg-link { font-size: 15px; color: var(--primary); text-decoration: underline; }

/* Search sheet */
.fs-head { display: flex; justify-content: flex-end; }
.fs-pills { display: flex; margin: 5px; padding: 0 5px 0 10px; }
.fs-pill { height: auto; margin: 5px; padding: 6px 15px; border: 0; font-size: 15px; font-weight: 400; line-height: 20px; }
.fs-divider { height: 1px; margin: 0 10px; background: var(--gray); }
.fs-form { padding: 10px; }
.fs-group + .fs-group { margin-top: 5px; }
.fs-label { display: block; padding: 2px 10px 0; font-size: 17px; font-weight: 700; line-height: 22px; color: var(--text-dark); }
.fs-group + .fs-group .fs-label { padding-top: 7px; }
.fs-field { padding: 10px; }
.edit-filter.picker { padding: 0; display: flex; align-items: stretch; }
.edit-filter.picker .spinner { flex: 1 1 auto; min-width: 0; min-height: 0; }
.edit-filter.picker .spinner select { min-height: 0; height: 100%; padding-left: 18px; }

/* ---------------------------------------------------------------- Login */
.screen.login { background: var(--login-bg); }
.login-scroll { display: flex; flex-direction: column; padding-bottom: calc(var(--safe-bottom) + 16px); }
.login-logo { width: 200px; height: auto; margin: 25px auto; }
.login-form { display: flex; flex-direction: column; padding: 0 24px; max-width: 520px; width: 100%; margin: 0 auto; }
.tf { position: relative; padding-top: 18px; margin-top: 6px; display: flex; flex-direction: column; }
.tf-box { position: relative; display: flex; align-items: center; background: #fff; border: 1px solid var(--gray); border-radius: 10px; }
.tf-input { flex: 1 1 auto; min-width: 0; padding: 15px; border: 0; background: transparent; outline: none; font-size: 18px; line-height: 22px; color: var(--text-dark); caret-color: var(--text-dark); border-radius: 10px; }
.tf-label {
  position: absolute; left: 15px; top: 18px; z-index: 1; height: 54px; line-height: 54px;
  font-size: 18px; color: var(--text-dark); pointer-events: none; white-space: nowrap;
  transition: top .167s cubic-bezier(.4,0,.2,1), font-size .167s cubic-bezier(.4,0,.2,1), line-height .167s cubic-bezier(.4,0,.2,1);
}
.tf.float .tf-label,
.tf:focus-within .tf-label,
.tf:has(.tf-input:not(:placeholder-shown)) .tf-label { top: 0; height: 18px; line-height: 18px; font-size: 12px; }
.tf-eye { flex: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.tf-eye::before {
  content: ""; width: 24px; height: 24px; background: var(--text-dark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.7 7.6 1 12c1.7 4.4 6 7.5 11 7.5s9.3-3.1 11-7.5c-1.7-4.4-6-7.5-11-7.5zM12 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3Cpath d='M2 3.3 3.3 2 22 20.7 20.7 22z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.7 7.6 1 12c1.7 4.4 6 7.5 11 7.5s9.3-3.1 11-7.5c-1.7-4.4-6-7.5-11-7.5zM12 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3Cpath d='M2 3.3 3.3 2 22 20.7 20.7 22z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tf-eye.on::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.7 7.6 1 12c1.7 4.4 6 7.5 11 7.5s9.3-3.1 11-7.5c-1.7-4.4-6-7.5-11-7.5zM12 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.7 7.6 1 12c1.7 4.4 6 7.5 11 7.5s9.3-3.1 11-7.5c-1.7-4.4-6-7.5-11-7.5zM12 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E");
}
.tf.has-error .tf-box { border-color: #D32F2F; }
.tf.has-error .tf-box::after {
  content: "!"; flex: none; width: 20px; height: 20px; margin-right: 12px; border-radius: 50%;
  background: #D32F2F; color: #fff; font-size: 14px; font-weight: 700; line-height: 20px; text-align: center;
}
.tf-error {
  align-self: flex-end; margin: 6px 0 0 auto; width: fit-content; max-width: 90%;
  padding: 6px 10px; border-radius: 4px; background: #fff; color: #D32F2F; font-size: 13px;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.tf-error:not([hidden]) { display: block; margin-left: auto; }
.accept { display: flex; align-items: flex-start; gap: 10px; margin-top: 24px; font-size: 14px; color: var(--text-dark); cursor: pointer; }
.accept-box {
  appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0;
  border: 2px solid var(--text-dark); border-radius: 3px; background: transparent; cursor: pointer;
}
.accept-box:checked {
  border-color: var(--primary);
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23fff'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.accept.error { color: #D32F2F; }
.accept.error .accept-box { border-color: #D32F2F; }
.accept a { color: var(--primary); text-decoration: underline; }
.login-btn { margin: 24px 0; height: auto; min-height: 48px; padding: 12px; font-size: 18px; width: 100%; }
.privacy-link { align-self: center; font-size: 12px; color: var(--primary); text-decoration: underline; }
.footer { margin-top: 20px; text-align: center; color: var(--text-dark); }
.powered { margin-top: 10px; font-size: 12px; }
.dp { margin-top: 5px; font-size: 15px; }

.install-card {
  display: flex; align-items: center; gap: 12px;
  margin: 24px 16px 0; padding: 12px 8px 12px 12px; max-width: 520px; align-self: center;
  background: #fff; border-radius: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.15);
}
.install-icon { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.install-text { flex: 1 1 auto; min-width: 0; }
.install-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.install-body { margin-top: 2px; font-size: 13px; color: var(--text-dark); }
.share-glyph {
  display: inline-block; width: 16px; height: 18px; vertical-align: -3px; background: #0a84ff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M8 0 3.8 4.2l1 1L7.3 2.7V13h1.4V2.7l2.5 2.5 1-1zM2 7h3v1.4H2.4v10.2h11.2V8.4H11V7h3a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M8 0 3.8 4.2l1 1L7.3 2.7V13h1.4V2.7l2.5 2.5 1-1zM2 7h3v1.4H2.4v10.2h11.2V8.4H11V7h3a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.install-close { flex: none; width: 36px; height: 36px; font-size: 22px; color: var(--text-secondary); }

/* ---------------------------------------------------------------- Voter slip */
.slip-scroll { background: #fff; }
.slip-holder { min-height: 320px; display: flex; justify-content: center; }
.slip-holder canvas { display: block; }
.send-btn:disabled { opacity: .7; }
.slip-bottom { height: calc(80px + var(--safe-bottom)); }

/* ---------------------------------------------------------------- Survey */
.survey-form { padding: 10px 10px 16px; }
.sv-sec { display: flex; flex-direction: column; }
.sv-sec.pt20 { padding-top: 20px; }
.sv-label { margin-bottom: 2px; font-size: 15px; font-weight: 700; color: #000; }
.sv-sub { margin-bottom: 2px; font-size: 12px; font-weight: 700; color: #000; }
.sv-box { margin-top: 5px; }
.sv-input { display: block; width: 100%; border: 0; outline: none; background: transparent; padding: 0; resize: none; overflow: hidden; font-size: 18px; line-height: 23px; color: var(--text-primary); }
.sv-input::placeholder { color: var(--hint); }
.survey-submit { flex: none; display: flex; justify-content: center; padding: 10px 10px calc(10px + var(--safe-bottom)); background: var(--window-bg); }
.survey-submit .pill { width: 200px; height: auto; min-height: 44px; padding: 10px; border: 0; font-size: 18px; font-weight: 400; }

/* ---------------------------------------------------------------- Map */
.map-canvas { position: relative; flex: 1 1 auto; min-height: 0; background: #e5e3df; }
.pin { width: 24px; height: 40px; cursor: pointer; }
.pin svg { display: block; }
.me-dot { width: 16px; height: 16px; border-radius: 50%; background: #1A73E8; border: 2px solid #fff; box-shadow: 0 0 0 6px rgba(26,115,232,.2); }
.pin-pop { display: flex; align-items: center; gap: 10px; font: 15px var(--font); color: var(--text-primary); }
.pin-call { width: 34px; height: 34px; border-radius: 50%; background: var(--call); color: #fff; font-size: 18px; }
.maplibregl-popup-content { padding: 8px 12px; border-radius: 8px; }