/* MEDPAC Screen — dark clinical base, one accent, status colour only on results. */

:root {
  --bg:       #0A0D12;
  --surface:  #111721;
  --raised:   #161E2A;
  --line:     #202B3A;
  --text:     #E7ECF3;
  --muted:    #8494A8;
  --accent:   #7B6CF6;

  --ok:       #3FCF8E;
  --warn:     #F2B441;
  --neutral:  #7D8CA3;

  --status:   var(--accent);
  --radius:   18px;
  --ease:     cubic-bezier(0.32, 0.72, 0, 1);

  /* Fluid gutter: 18px on a 320px phone, 24px from ~430px up. */
  --gutter:   clamp(18px, 5vw, 24px);
  --gap:      26px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Several elements below set an explicit display, which would otherwise beat
   the UA stylesheet's rule for the hidden attribute. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;   /* no reflow when an iPhone is rotated */
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* A single soft bloom behind the content — the only decoration in the app. */
body::before {
  content: "";
  position: fixed;
  inset: -20% 0 auto;
  height: 60vh;
  background: radial-gradient(58% 52% at 50% 0%,
              rgba(123, 108, 246, 0.16), transparent 70%);
  pointer-events: none;
}

/* The page is one centred column. Horizontal padding lives on the shell rather
   than a width calc so notch/home-indicator insets can be added to it. */
.shell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: calc(460px + var(--gutter) * 2);
  min-height: 100dvh;
  margin-inline: auto;
  padding:
    calc(28px + env(safe-area-inset-top))
    calc(var(--gutter) + env(safe-area-inset-right))
    calc(32px + env(safe-area-inset-bottom))
    calc(var(--gutter) + env(safe-area-inset-left));
}

/* ---- masthead ---------------------------------------------------------- */

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: inherit;
  text-decoration: none;
}

.wordmark__mark { width: 22px; height: 22px; color: var(--accent); }

.wordmark__text {
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.wordmark__text b { font-weight: 700; }

.wordmark__text i {
  font-style: normal;
  font-weight: 400;
  color: var(--muted);
  margin-left: 0.42em;
}

/* ---- stage ------------------------------------------------------------- */

.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  animation: rise 320ms var(--ease) both;
}

.intro__title {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 7vw, 2.15rem);
  font-weight: 600;
  letter-spacing: -0.026em;
  line-height: 1.15;
  text-wrap: balance;
}

.intro__lede {
  margin: 0;
  max-width: 34ch;
  color: var(--muted);
  font-size: 0.95rem;
}

.alert {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(242, 180, 65, 0.28);
  border-radius: 12px;
  background: rgba(242, 180, 65, 0.08);
  color: var(--warn);
  font-size: 0.875rem;
}

/* ---- uploader ---------------------------------------------------------- */

.uploader {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dropzone {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  /* Keep the whole flow on one screen: the hero shrinks before it pushes the
     button and the disclaimer below the fold on a short phone. */
  min-height: 180px;
  max-height: 46dvh;
  padding: 20px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
  touch-action: manipulation;
  transition: border-color 180ms var(--ease), background 180ms var(--ease),
              transform 180ms var(--ease);
}

.dropzone:focus-within { border-color: #33405480; background: var(--raised); }

/* Hover states only where a pointer can actually hover, so they do not stick
   after a tap on touch devices. */
@media (hover: hover) {
  .dropzone:hover { border-color: #33405480; background: var(--raised); }
}

.dropzone.is-dragging {
  border-color: var(--accent);
  background: rgba(123, 108, 246, 0.07);
  transform: scale(1.008);
}

.dropzone.has-file { border-style: solid; padding: 0; }

.dropzone__input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.dropzone__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.dropzone__icon {
  width: 34px; height: 34px;
  margin-bottom: 10px;
  color: var(--muted);
  opacity: 0.75;
}

.dropzone__prompt { font-size: 1rem; font-weight: 500; }
.dropzone__hint   { font-size: 0.85rem; color: var(--muted); }

.dropzone__preview {
  position: absolute;
  inset: 0;
  display: block;
}

.dropzone__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Scanning sweep — only visible while the screen is being analysed. */
.scanline {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 34%;
  opacity: 0;
  background: linear-gradient(to bottom,
              transparent, rgba(123, 108, 246, 0.32), transparent);
  box-shadow: 0 0 26px rgba(123, 108, 246, 0.34);
}

.is-scanning .dropzone { border-color: var(--accent); }

.is-scanning .scanline {
  opacity: 1;
  animation: sweep 1150ms var(--ease) infinite;
}

.filename {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- button ------------------------------------------------------------ */

.button {
  display: block;
  width: 100%;
  min-height: 50px;              /* comfortable thumb target */
  padding: 15px 20px;
  border: 0;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity 180ms var(--ease), transform 180ms var(--ease),
              filter 180ms var(--ease);
}

.button:active:not(:disabled) { transform: translateY(1px); }

@media (hover: hover) {
  .button:hover:not(:disabled) { filter: brightness(1.09); }
}

.button:disabled {
  background: var(--raised);
  color: var(--muted);
  cursor: not-allowed;
}

.button--ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
}

@media (hover: hover) {
  .button--ghost:hover { background: var(--raised); filter: none; }
}

.is-scanning .button { pointer-events: none; opacity: 0.5; }

/* ---- result ------------------------------------------------------------ */

.result {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.result--consistent   { --status: var(--ok); }
.result--suspicious   { --status: var(--warn); }
.result--insufficient { --status: var(--neutral); }

.pill {
  align-self: flex-start;
  justify-self: start;   /* the result becomes a grid on wide screens */
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 9px 16px 9px 13px;
  border: 1px solid color-mix(in srgb, var(--status) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--status) 11%, transparent);
  color: var(--status);
  font-size: clamp(1.05rem, 4.4vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.012em;
}

.pill__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--status) 18%, transparent);
}

.result__summary {
  margin: 0;
  max-width: 40ch;
  color: var(--muted);
  font-size: 0.95rem;
}

.result__figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  max-height: 34dvh;
  background: var(--surface);
}

.result__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }

.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
}

.check + .check { border-top: 1px solid var(--line); }

.check__icon { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.check--pass .check__icon { color: var(--ok); }
.check--fail .check__icon { color: var(--neutral); }
.result--suspicious .check--fail .check__icon { color: var(--warn); }

.check__body { display: flex; flex-direction: column; gap: 2px; }
.check__name { font-size: 0.92rem; font-weight: 500; }
.check__detail { font-size: 0.82rem; color: var(--muted); }

/* ---- disclaimer -------------------------------------------------------- */

.disclaimer {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: #64748B;
  font-size: 0.75rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---- responsive -------------------------------------------------------- */

/* Small phones (iPhone SE and narrower Androids): tighten the rhythm so the
   dropzone, button and disclaimer still share one screen. */
@media (max-width: 380px) {
  :root { --gap: 20px; }
  .shell { gap: 24px; }
  .intro__lede { font-size: 0.9rem; }
  .check { padding: 12px 14px; }
}

/* Short viewports — landscape phones, or a portrait phone with the browser
   chrome expanded. Vertical space is the scarce resource here. */
/* Covers the common 667px-tall phones (iPhone SE 2/3, 7, 8) as well as smaller. */
@media (max-height: 700px) {
  :root { --gap: 16px; }
  .shell { gap: 16px; padding-block: calc(18px + env(safe-area-inset-top))
                                     calc(16px + env(safe-area-inset-bottom)); }
  /* A wider hero costs less height, which is what is scarce here. */
  .dropzone { aspect-ratio: 3 / 2; min-height: 150px; max-height: 30dvh; }
  .intro__lede { font-size: 0.875rem; }
  .disclaimer { padding-top: 12px; font-size: 0.72rem; }
}

/* Desktop: a proper two-column hero — drop zone on the left, the copy and the
   action beside it — instead of a narrow strip down the middle of a monitor. */
@media (min-width: 900px) {
  :root { --gap: 28px; }

  .shell {
    max-width: calc(1080px + var(--gutter) * 2);
    gap: 40px;
    padding-block: 36px 40px;
  }

  /* `display: contents` lets the form's children join the stage grid, so the
     intro can sit in the same column as the button. The form still submits.
     Scoped to the upload page: the result page lays itself out instead. */
  .stage--upload {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 48px;
    row-gap: 16px;
    align-content: center;
  }

  .uploader { display: contents; }

  /* dvh term keeps a short, wide window (1000x500) from overflowing. */
  .dropzone { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 4 / 3;
              max-height: min(500px, 62dvh); align-self: center; }
  .intro    { grid-column: 2; grid-row: 1; align-self: end; }
  .filename { grid-column: 2; grid-row: 2; text-align: left; }
  .button   { grid-column: 2; grid-row: 2; align-self: start; }
  .alert    { grid-column: 2; grid-row: 1; align-self: start; }

  .intro__title { font-size: clamp(2.2rem, 3vw, 2.8rem); }
  .intro__lede  { font-size: 1.05rem; max-width: none; }

  .dropzone__icon { width: 42px; height: 42px; }
  .dropzone__prompt { font-size: 1.15rem; }

  /* Results: photo on the left, the checks and the next action on the right.
     Rows are explicit — auto-placement lets the button backfill an earlier
     row and jump above the summary. */
  .result {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    grid-template-rows: auto auto auto 1fr;
    column-gap: 40px;
    row-gap: 18px;
    align-items: start;
  }

  .pill            { grid-column: 1 / -1; grid-row: 1; }
  .result__summary { grid-column: 1 / -1; grid-row: 2; }
  .result__figure  { grid-column: 1; grid-row: 3 / span 2; aspect-ratio: 4 / 3;
                     max-height: min(400px, 55dvh); }
  .checks          { grid-column: 2; grid-row: 3; }
  .button--ghost   { grid-column: 2; grid-row: 4; align-self: start;
                     justify-self: start; width: auto; min-width: 260px; }

  /* No preview came back (browser could not decode the photo): let the checks
     use the full width rather than leaving a hole where the image would be. */
  .result--nophoto .checks        { grid-column: 1 / -1; }
  .result--nophoto .button--ghost { grid-column: 1; }

  .result__summary { font-size: 1.02rem; max-width: 68ch; }
  .check__name { font-size: 0.98rem; }
  .check__detail { font-size: 0.86rem; }
  .disclaimer { font-size: 0.8rem; }
}

/* Landscape phones and small tablets: two columns, everything tightened down.
   Capped below 900px so it never overlaps the desktop layout above. */
@media (orientation: landscape) and (max-height: 560px)
       and (min-width: 640px) and (max-width: 899px) {
  .shell { min-height: 0; max-width: calc(880px + var(--gutter) * 2); }
  .intro__title { font-size: 1.5rem; }
  .intro__lede { max-width: none; }

  .uploader {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 20px;
    row-gap: 10px;
  }

  .dropzone { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 4 / 3;
              max-height: 52dvh; }
  .filename { grid-column: 2; grid-row: 1; text-align: left; }
  .button   { grid-column: 2; grid-row: 2; }

  .result {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    column-gap: 22px;
    row-gap: 14px;
    align-items: start;
  }

  .pill, .result__summary { grid-column: 1 / -1; }
  .result__figure { grid-column: 1; aspect-ratio: 4 / 3; max-height: 46dvh; }
  .checks         { grid-column: 2; }
  .button--ghost  { grid-column: 2; }
}

/* ---- motion ------------------------------------------------------------ */

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes sweep {
  from { top: -34%; }
  to   { top: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}