/* ZB2 visual identity restoration — the frozen engine.html is unchanged. */
:root {
  --zb2-navy: #06294b;
  --zb2-ink: #092c50;
  --zb2-gold: #ffd46b;
  --zb2-gold-deep: #b66b00;
  --zb2-panel: rgba(6, 37, 76, .76);
  /* Match the approved calculator's synchronized ASTM light-sweep cycle. */
  --zb2-laser-cycle: 5.6s;
}

.auth-screen,
#app-view {
  background-image: linear-gradient(180deg, rgba(5, 25, 51, .21), rgba(5, 25, 51, .36)), url("lab-background.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.auth-screen {
  position: relative;
  min-height: 100dvh;
  padding: 30px 15px;
  isolation: isolate;
}

.auth-card {
  width: min(100%, 510px);
  padding: clamp(20px, 4vw, 34px);
  background: var(--zb2-panel);
  border: 1px solid rgba(220, 237, 255, .48);
  border-radius: 23px;
  color: #fff;
  box-shadow: 0 20px 65px rgba(0, 15, 35, .46), inset 0 1px rgba(255, 255, 255, .19);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.lab-brand-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  min-height: 92px;
  padding: 8px 16px;
  margin: 0 auto 10px;
  border-radius: 20px;
  background: linear-gradient(140deg, rgba(239, 246, 253, .85), rgba(233, 239, 249, .54));
  box-shadow: inset 0 1px 1px #fff8, 0 6px 22px #00192b52;
}

.lab-brand-lockup img:first-child { width: clamp(43px, 11vw, 67px); height: 74px; object-fit: contain; }
.lab-brand-lockup img:last-child { width: clamp(160px, 43vw, 270px); max-height: 70px; object-fit: contain; }

/* The approved golden laser effect on login, signup and pending screens.
   Keep it independent from the byte-for-byte frozen ASTM 53A engine. */
.auth-screen .lab-brand-lockup {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  animation: zb2-logo-laser-halo var(--zb2-laser-cycle) ease-in-out infinite;
}
.auth-screen .lab-brand-lockup::after {
  content: '';
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -65%;
  width: 35%;
  transform: skewX(-22deg);
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), rgba(255, 255, 255, .97), rgba(255, 246, 206, .27), transparent);
  animation: zb2-auth-laser-sweep var(--zb2-laser-cycle) ease-in-out infinite;
}
.auth-screen .lab-brand-lockup img:first-child {
  animation: zb2-drop-laser-flash var(--zb2-laser-cycle) ease-in-out infinite;
}
.auth-screen .lab-brand-lockup img:last-child {
  animation: zb2-wordmark-laser-flash var(--zb2-laser-cycle) ease-in-out infinite;
}

/* Animate the actual gold action button, not only the logo's surrounding card. */
.auth-screen .primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  animation: zb2-button-laser-halo var(--zb2-laser-cycle) ease-in-out infinite;
}
.auth-screen .primary::before {
  content: '';
  position: absolute;
  top: -45%;
  bottom: -45%;
  left: -65%;
  width: 35%;
  transform: skewX(-24deg);
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), rgba(255, 255, 255, .98), rgba(255, 255, 255, .2), transparent);
  animation: zb2-auth-laser-sweep var(--zb2-laser-cycle) ease-in-out infinite;
}
.auth-screen .primary:active { transform: translateY(1px); filter: brightness(1.12); }
.auth-screen .primary:focus-visible { box-shadow: 0 0 0 4px #ffecc8, 0 0 25px 7px #ffbd49; }

@keyframes zb2-auth-laser-sweep {
  0%, 23% { left: -65%; }
  64%, 100% { left: 145%; }
}
@keyframes zb2-logo-laser-halo {
  0%, 20%, 85%, 100% { box-shadow: inset 0 1px 1px #fff8, 0 6px 22px #00192b52, 0 0 7px 1px rgba(255, 190, 45, .29); }
  52% { box-shadow: inset 0 1px 1px #fff8, 0 6px 22px #00192b52, 0 0 25px 7px rgba(255, 193, 39, .83); }
}
@keyframes zb2-drop-laser-flash {
  0%, 20%, 85%, 100% { filter: brightness(1) drop-shadow(0 0 3px #dfa431); }
  52% { filter: brightness(1.29) saturate(1.2) drop-shadow(0 0 13px #ffca38) drop-shadow(0 0 5px #fff7be); }
}
@keyframes zb2-wordmark-laser-flash {
  0%, 20%, 85%, 100% { filter: brightness(1); }
  52% { filter: brightness(1.18) drop-shadow(0 0 7px rgba(255, 204, 72, .7)); }
}
@keyframes zb2-button-laser-halo {
  0%, 20%, 85%, 100% { box-shadow: 0 4px 0 rgba(105, 61, 1, .75), 0 6px 18px rgba(238, 159, 24, .3); }
  52% { box-shadow: 0 4px 0 rgba(105, 61, 1, .75), 0 0 0 4px rgba(255, 224, 122, .49), 0 0 26px 9px rgba(255, 191, 30, .78); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-screen .lab-brand-lockup,
  .auth-screen .lab-brand-lockup::after,
  .auth-screen .lab-brand-lockup img,
  .auth-screen .primary,
  .auth-screen .primary::before { animation: none !important; }
}

.auth-card .eyebrow { color: #ffe3a2; letter-spacing: .05em; font-size: 11px; }
.auth-card h1 { color: var(--zb2-gold); font-size: clamp(19px, 4.7vw, 27px); line-height: 1.5; text-shadow: 0 2px 4px #001b3a; }
.auth-card h2.auth-subtitle { font-size: clamp(17px, 4vw, 21px); color: white; margin: 12px 0 3px; }
.auth-card p { color: #e5eef6; font-size: 13px; }
.auth-card label { color: #f7fbff; font-size: 14px; text-align: right; }
.auth-card input,
.auth-card select {
  min-height: 51px;
  background: rgba(239, 247, 255, .95);
  border: 1px solid rgba(255, 255, 255, .62);
  color: #082c4d;
  border-radius: 13px;
  font-weight: 650;
}
.auth-card input::placeholder { color: #6c8195; font-weight: 400; }
.auth-card input:focus-visible,
.auth-card select:focus-visible { outline: 3px solid #ffc74b; outline-offset: 2px; }
.auth-card .form-stack { margin: 18px 0; gap: 13px; }
.auth-card .quiet,
.auth-card .form-note { color: #dce9f5 !important; line-height: 1.9; }
.auth-footer {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 218, 134, .35);
  color: #ffe4ab;
  font-size: 11px;
  line-height: 1.7;
  text-align: center;
}

.primary {
  background: linear-gradient(110deg, #a75e06 0%, #f0b934 37%, #ffe17b 54%, #ba770d 100%);
  color: #14243a;
  border: 1px solid #ffebac;
  box-shadow: 0 4px 0 rgba(105, 61, 1, .75), 0 6px 18px rgba(238, 159, 24, .3);
  font-weight: 900;
}
.primary:hover { background: linear-gradient(110deg, #bf7c11, #ffe27e 53%, #bc790f); }
.primary:focus-visible,
.secondary:focus-visible,
.tab:focus-visible { outline: 3px solid #ffe27e; outline-offset: 2px; }
.secondary { background: rgba(8, 42, 78, .63); color: #fff1c2; border: 1px solid rgba(255, 220, 144, .75); }
.secondary:hover { background: rgba(19, 64, 111, .95); }
.auth-card .secondary { margin-top: 12px; }
#signup-view .auth-card { max-height: calc(100dvh - 28px); overflow: auto; scrollbar-color: #dfac46 #07294c; }
#signup-view .auth-card h1 { margin-bottom: 5px; }
#signup-view .auth-card .form-stack { margin: 13px 0; }
#pending-view .auth-card { max-height: calc(100dvh - 28px); overflow: auto; }

#app-view { min-height: 0; padding-bottom: 0; color: #f3f7fc; }
/* Keep the copyright immediately under the content on every viewport,
   without stretching the workspace to a full screen and creating an empty gap. */
#app-view:not([hidden]) { display: block; }
#app-view .app-header {
  background: rgba(4, 31, 61, .92);
  border-bottom: 1px solid rgba(255, 208, 101, .4);
  box-shadow: 0 7px 25px #041b329c;
}
.header-approved-logo {
  display: block;
  flex: 0 0 auto;
  width: 53px;
  height: 53px;
  border-radius: 11px;
  object-fit: contain;
  box-shadow: 0 2px 9px rgba(0, 11, 30, .2);
}
/* Hide the supervisor's on-screen signature preview; storage and report approval remain active. */
#app-view .seal-preview-container { display: none !important; }
#app-view .main-tabs {
  background: rgba(4, 31, 61, .93);
  border-bottom: 1px solid #ffd57061;
  box-shadow: 0 7px 18px #041b325e;
  backdrop-filter: blur(5px);
}
#app-view .tab { color: #e5f0f8; }
#app-view .tab.active { background: rgba(255, 212, 107, .18); color: #ffe2a0; border: 1px solid #e0aa4f; }
#app-view .workspace { width: 100%; max-width: 1390px; padding: 17px clamp(10px, 2vw, 25px) 0; }
.site-footer {
  width: 100%;
  margin-top: 0;
  padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px));
  background: rgba(4, 28, 56, .92);
  border-top: 1px solid rgba(255, 210, 113, .62);
  color: #ffe2a2;
  font-size: clamp(11px, 2.7vw, 13px);
  line-height: 1.8;
  text-align: center;
  box-shadow: 0 -5px 20px rgba(0, 12, 27, .25);
}
#toast.validation-notice {
  background: #593205;
  color: #fff8e7;
  border: 2px solid #ffcb6c;
  box-shadow: 0 10px 32px rgba(23, 16, 0, .35);
  font-weight: 800;
  text-align: center;
  width: max-content;
  max-width: min(92vw, 480px);
}
#report-modal .field-needs-input,
#calc-form .field-needs-input {
  outline: 3px solid #c76d13 !important;
  outline-offset: 2px;
  border-color: #d77d23 !important;
}
#app-view input[type="date"],
.report-fields input[type="date"] {
  direction: ltr;
  text-align: left;
}
/* Android's native date rendering follows device locale even with dir=ltr.
   Keep the real ISO calendar field for storage, but always show DD/MM/YYYY
   in English numerals using a separate, editable, left-to-right text field. */
.english-date-control {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  isolation: isolate;
  direction: ltr;
}
.english-date-control .english-date-text {
  width: 100%;
  padding-inline-end: 54px;
  text-align: left !important;
  direction: ltr !important;
  unicode-bidi: isolate;
  font-variant-numeric: lining-nums tabular-nums;
}
.english-date-control .calendar-symbol {
  position: absolute;
  right: 10px;
  width: 32px;
  text-align: center;
  z-index: 1;
  pointer-events: none;
}
.english-date-control .english-date-native {
  position: absolute;
  right: 0;
  top: 0;
  width: 51px;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  min-height: 0;
  padding: 0;
}
#app-view .page:not(#page-calc) { max-width: 1100px; margin-inline: auto; }
#app-view .section-heading h2 { color: #fff; text-shadow: 0 2px 4px #001c33; }
#app-view .section-heading .eyebrow { color: #ffe0a1; }
#app-view .shift-chip,
#app-view .hint-tag { background: rgba(8, 40, 77, .84); color: #ffe4ae; border: 1px solid #ddad64b3; }

.original-science {
  display: block;
  width: 100%;
  height: 600px; /* Temporary fallback until the embedded calculator measures itself. */
  min-height: 320px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#page-calc { position: relative; }
.science-shift-badge { position: absolute; top: 15px; left: 14px; z-index: 2; }

#app-view .panel,
#app-view .results-panel {
  background: rgba(6, 37, 76, .83);
  border: 1px solid #c3d8e780;
  color: #fff;
  backdrop-filter: blur(6px);
}
#app-view .card-title b { background: #ffe1a1; color: #0b355b; }
#app-view .result-metric { background: rgba(224, 240, 251, .94); }
#app-view .result-metric strong { color: #0b355b; }
#app-view .results-panel { margin-top: 16px; max-width: 1100px; margin-inline: auto; scroll-margin-top: 85px; }
#app-view .results-panel .card-title { color: #ffe1a1; }
#app-view .folder,
#app-view .archive-item {
  background: rgba(8, 41, 78, .87);
  color: #f6f9fe;
  border: 1px solid rgba(219, 236, 250, .32);
  backdrop-filter: blur(5px);
}
#app-view .folder.selected { background: rgba(134, 90, 22, .8); border-color: #ffd978; }
#app-view .archive-mode-switch { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
#app-view .archive-mode-switch .secondary { background: rgba(5, 36, 70, .91); color: #ffebc3; }
#app-view .archive-mode-switch .secondary.selected { border: 2px solid #ffd879; background: rgba(139, 94, 28, .92); }
#app-view .archive-mode-caption { color: #ffebc3; padding: 12px; border-radius: 10px; background: rgba(4, 35, 69, .84); }
#app-view .archive-actions .danger-action { color: #fff; background: #85343a; border: 1px solid #eaa5aa; border-radius: 11px; padding: 9px 13px; }
#app-view .archive-actions .restore-action { color: #0b3521; background: #b5f2c8; border: 1px solid #5bbb83; border-radius: 11px; padding: 9px 13px; }
#app-view .archive-trash-audit-list { max-height: 220px; overflow-y: auto; }
#app-view .archive-trash-audit-list p { margin: 8px 0; font-size: 12px; color: #e2eef9; }
#app-view .archive-item p { color: #d0dfea; }
#app-view .archive-tools label,
#app-view .panel label { color: #f4faff; }
#app-view .panel .form-note { color: #dfebf5 !important; }
#app-view .registration-card { background: #eff6fb; }
#app-view .registration-card label { color: #173449; }
#app-view .member-row { background: #e7f1f9; color: #123952; }
.member-signature-card { margin-bottom: 10px; border-radius: 13px; overflow: hidden; }
.member-signature-card .member-row { align-items: center; flex-wrap: wrap; }
.member-signature-card .member-row small { display: block; margin-top: 6px; }
.member-signature-editor {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  padding: 13px;
  border: 1px solid #ecd197;
  border-top: 0;
  background: #f1f7fb;
  color: #173449;
}
.member-signature-editor label { display: grid; gap: 7px; flex: 1 1 270px; font-weight: 750; }
.member-signature-editor input { background: #fff; }
.member-signature-editor button { min-width: 190px; }

@media(max-width: 720px) {
  .auth-screen { padding: 14px 9px; background-attachment: scroll; }
  .auth-card { border-radius: 18px; padding: 21px 15px; }
  .lab-brand-lockup { min-height: 70px; margin-bottom: 9px; padding: 4px 10px; }
  .lab-brand-lockup img:first-child { height: 59px; }
  .lab-brand-lockup img:last-child { max-height: 54px; }
  /* Keep the lab photo sized to the mobile viewport, not to the tall results page.
     A fixed image layer also avoids background zoom when results change height. */
  #app-view {
    position: relative;
    isolation: isolate;
    background: transparent;
  }
  #app-view::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100lvh;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(5, 25, 51, .21), rgba(5, 25, 51, .36)), url('lab-background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }
  #app-view .app-header { min-height: 61px; }
  .header-approved-logo { width: 44px; height: 44px; }
  #app-view .workspace { padding: 12px 7px 0; }
  .science-shift-badge { top: 10px; left: 8px; }
  #app-view .results-panel { padding: 16px 10px; }
  #app-view .tab { padding: 7px 2px; }
  .member-signature-editor button { width: 100%; }

  /* Compact report entry on phones: adjacent cards wherever two can fit,
     falling back to one column only on genuinely narrow screens. */
  #report-modal .report-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
    gap: 9px;
    margin: 10px 8px;
    padding: 9px;
    max-width: none;
    background: #e9f0f5;
    border: 1px solid #c9d8e2;
    border-radius: 14px;
  }
  #report-modal .report-fields > label {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 7px;
    min-width: 0;
    margin: 0;
    padding: 10px 9px;
    border: 1px solid #d3e0e8;
    border-radius: 12px;
    background: #fff;
    color: #213c50;
    box-shadow: 0 2px 7px rgba(20, 57, 81, .06);
    font-size: 12px;
    line-height: 1.4;
  }
  #report-modal .report-fields > label > input,
  #report-modal .report-fields > label > select,
  #report-modal .english-date-text {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 8px;
    border-radius: 9px;
    font-size: 14px;
  }
  #report-modal .english-date-control .english-date-text { padding-inline-end: 38px; font-size: 12px; }
  #report-modal .english-date-control .english-date-native { width: 36px; }
  #report-modal .english-date-control .calendar-symbol { right: 2px; width: 27px; }
  #report-modal .report-fields > label:last-child { grid-column: 1 / -1; }
}
@media print {
  .auth-screen,
  #app-view { background: none !important; }
  .auth-footer,
  .site-footer { display: none !important; }
}