/* Small app-specific styles on top of PicoCSS.
   Everything lives here (no inline style attributes) so the strict
   Content-Security-Policy (style-src 'self') holds. */

/* ---- Brand palette ----
   Colors sampled directly from the At Home logo (navy + light-blue
   accent bar). Overrides Pico's CSS variables so every component that
   already reads var(--pico-primary...) — buttons, links, focus rings,
   the tab bar — picks up the brand colors for free. The selectors here
   intentionally mirror Pico's own light/dark selectors so specificity
   ties and the later cascade position (this file loads after
   pico.min.css) let these win. */
:root:not([data-theme=dark]),
[data-theme=light] {
  --pico-primary: #0c3776;
  --pico-primary-background: #0c3776;
  --pico-primary-underline: rgba(12, 55, 118, 0.5);
  --pico-primary-hover: #082a5c;
  --pico-primary-hover-background: #0a2f66;
  --pico-primary-hover-underline: var(--pico-primary-hover);
  --pico-primary-focus: rgba(145, 197, 244, 0.5);
  --pico-primary-inverse: #fff;
}
[data-theme=dark] {
  --pico-primary: #91c5f4;
  --pico-primary-background: #0c3776;
  --pico-primary-underline: rgba(145, 197, 244, 0.5);
  --pico-primary-hover: #b7d9f8;
  --pico-primary-hover-background: #123f85;
  --pico-primary-hover-underline: var(--pico-primary-hover);
  --pico-primary-focus: rgba(145, 197, 244, 0.375);
  --pico-primary-inverse: #fff;
}
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pico-primary: #91c5f4;
    --pico-primary-background: #0c3776;
    --pico-primary-underline: rgba(145, 197, 244, 0.5);
    --pico-primary-hover: #b7d9f8;
    --pico-primary-hover-background: #123f85;
    --pico-primary-hover-underline: var(--pico-primary-hover);
    --pico-primary-focus: rgba(145, 197, 244, 0.375);
    --pico-primary-inverse: #fff;
  }
}

/* Echoes the light-blue divider bar under the wordmark in the logo.
   flex-wrap so "Signed in as X" + Sign out can drop to their own row
   instead of squeezing or overflowing next to the logo on narrow phones. */
main.container > nav:first-of-type {
  border-bottom: 3px solid #91c5f4;
  padding-bottom: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

/* ---- Feed-style page chrome ----
   Rounder corners everywhere (cards, buttons, inputs, tiles) for a
   friendlier, less boxy feel. A light gray canvas behind the white,
   shadowed cards (article/section) makes content "float" the way a
   social feed does. Cards already come from Pico's --pico-card-*
   variables, which sit *lighter* than the page background in dark mode
   by default — so that contrast already exists there and this is
   light-mode only. */
:root {
  --pico-border-radius: 0.6rem;
}
:root:not([data-theme=dark]),
[data-theme=light] {
  --page-background: #f0f2f5;
}
/* html gets the same background as body: on short pages (little content,
   tall viewport) body's box is shorter than the viewport, and without
   this the html root's default white background shows through as a
   stray white strip below the card. min-height belt-and-suspenders it. */
html,
body {
  background-color: var(--page-background, var(--pico-background-color));
}
body {
  min-height: 100vh;
}

.auth-card {
  max-width: 26rem;
  margin: 8vh auto 0;
}
/* Short mobile viewports (landscape phones, or once the keyboard is up):
   8vh of top margin can shove the form toward the bottom of the screen. */
@media (max-height: 700px) {
  .auth-card {
    margin-top: 2rem;
  }
}

/* Welcome heading above the home panel's action cards. */
.dash-welcome {
  margin-bottom: 2rem;
}
.dash-welcome-title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.dash-welcome-sub {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: #64748b;
}

/* Home panel: the two action cards, as an even two-column grid that
   collapses to one column on narrow screens. */
.home-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.home-links > * {
  margin: 0;
}

@media (max-width: 700px) {
  .home-links {
    grid-template-columns: 1fr;
  }
}

.home-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: auto;
  padding: 1.5rem;
  text-align: left;
  font-size: 0.85rem;
  line-height: 1.35;
  background-color: #fff;
  color: inherit;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.home-card:hover,
.home-card:focus {
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
}

/* Decorative accent circle tucked behind the content, bottom-right. */
.home-card-blob {
  position: absolute;
  right: -1.5rem;
  bottom: -1.5rem;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  z-index: 0;
  transition: transform 0.25s ease;
}
.home-card:hover .home-card-blob {
  transform: scale(1.1);
}

.home-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.home-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  color: #fff;
  margin-bottom: 1.1rem;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}
.home-card-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.home-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  transition: color 0.15s ease;
}
.home-card-desc {
  font-size: 0.82rem;
  font-weight: 400;
  color: #64748b;
  margin-top: 0.5rem;
  line-height: 1.5;
}

.home-card-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
}
.home-card-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.home-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 1rem 1rem;
  color: #fff;
  font-weight: 500;
  font-size: 0.82rem;
  white-space: nowrap;
  border-radius: 0.65rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  transition: background-color 0.15s ease;
}
.home-card-cta-arrow {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Each card gets its own accent color instead of Pico's grayscale
   primary/secondary/contrast — a feed of colorful shortcut icons reads
   livelier than three shades of the same brand navy. */
.home-card-blue .home-card-icon,
.home-card-blue .home-card-cta {
  background-color: #2563eb;
}
.home-card-blue .home-card-blob {
  background-color: #eff6ff;
}
.home-card-blue .home-card-eyebrow {
  color: #2563eb;
}
.home-card-blue:hover,
.home-card-blue:focus {
  border-color: #93c5fd;
}
.home-card-blue:hover .home-card-title {
  color: #2563eb;
}
.home-card-blue:hover .home-card-cta {
  background-color: #1d4ed8;
}

.home-card-emerald .home-card-icon,
.home-card-emerald .home-card-cta {
  background-color: #059669;
}
.home-card-emerald .home-card-blob {
  background-color: #ecfdf5;
}
.home-card-emerald .home-card-eyebrow {
  color: #059669;
}
.home-card-emerald:hover,
.home-card-emerald:focus {
  border-color: #6ee7b7;
}
.home-card-emerald:hover .home-card-title {
  color: #059669;
}
.home-card-emerald:hover .home-card-cta {
  background-color: #047857;
}

@media (max-width: 480px) {
  .home-card {
    padding: 1.1rem 1.1rem 1.25rem;
  }
}

/* Storefront promo banner: sits under the two action tiles, spanning
   their full combined width. Dark navy gradient sets it apart from the
   white action cards above, echoing the brand's own navy accent (see
   the brand palette comment above) instead of repeating it. */
.shop-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  margin-top: 1.5rem;
  padding: 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #0f172a, #0c3776 55%, #0f172a);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.shop-banner:hover,
.shop-banner:focus {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.25);
}

/* Text on top, CTA below it; product photo takes the other half of the
   row. flex-basis splits the row evenly rather than sizing the photo to
   its intrinsic size. */
.shop-banner-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  flex: 1 1 55%;
  min-width: 0;
}

.shop-banner-text {
  display: flex;
  flex-direction: column;
  max-width: 34rem;
}
/* The logo's navy wordmark needs a light backdrop to read against the
   banner's dark gradient — a small white badge, not the bare image. */
.shop-banner-logo-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-bottom: 0.75rem;
  padding: 0.3rem 0.65rem;
  border-radius: calc(var(--pico-border-radius) - 0.2rem);
  background-color: #fff;
}
.shop-banner-logo {
  display: block;
  height: 1.3rem;
}
.shop-banner-title {
  font-size: 1.3rem;
  font-weight: 700;
}
.shop-banner-desc {
  margin-top: 0.5rem;
  color: #cbd5e1;
  font-size: 0.85rem;
  line-height: 1.5;
}

.shop-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.65rem 1.25rem;
  border-radius: 0.75rem;
  background-color: #fff;
  color: #0f172a;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  transition: background-color 0.15s ease;
}
.shop-banner:hover .shop-banner-cta {
  background-color: #eff6ff;
}
.shop-banner-cta-arrow {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Product photo: the other half of the row, height following its own
   aspect ratio (it's a wide product-lineup shot, not a square) so it's
   never cropped or stretched. */
.shop-banner-product {
  flex: 1 1 40%;
  width: 100%;
  max-width: 16rem;
  height: auto;
  min-width: 0;
  object-fit: contain;
}

@media (max-width: 640px) {
  .shop-banner {
    flex-direction: column;
    align-items: stretch;
  }
  .shop-banner-cta {
    width: 100%;
    justify-content: center;
  }
  .shop-banner-product {
    max-width: 14rem;
    align-self: center;
  }
}

/* Brand doubles as the link home; shouldn't look like body copy. */
.brand,
.brand:hover {
  color: inherit;
  text-decoration: none;
}

.brand-logo {
  height: 2.75rem;
  vertical-align: middle;
}

.auth-logo {
  display: block;
  height: 4.5rem;
  margin: 0 auto 0.5rem;
}

.inline-form {
  display: inline;
  margin: 0;
}
.inline-form button {
  width: auto;
  margin: 0;
  padding: 0.25rem 0.75rem;
}

/* ---- Sticky dashboard header ----
   White bar with the brand on the left, the tab strip in the middle, and
   the signed-in user + sign out on the right — sits above the swapped
   panel rather than each panel re-rendering its own tab strip below it. */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: #fff;
  border-bottom: 1px solid #e2e8f0;
  margin: 0 0 1.5rem;
}

.app-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  min-height: 4rem;
  padding: 0.6rem 1.5rem;
}

.app-header-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.app-header-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  padding-left: 0.9rem;
  border-left: 1px solid #e2e8f0;
}

.user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #e2e8f0;
  color: #334155;
  font-size: 0.85rem;
  font-weight: 700;
  border: 1px solid #cbd5e1;
}

.user-info {
  line-height: 1.25;
}
.user-info-label {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 500;
  color: #94a3b8;
}
.user-info-name {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1e293b;
}

.signout-btn {
  width: auto;
  margin: 0;
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
  background-color: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 0.6rem;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.signout-btn:hover,
.signout-btn:focus {
  color: #e11d48;
  background-color: #fff1f2;
  border-color: #fecdd3;
}

/* ---- Page-style tabs, now living in the sticky header ----
   Pill buttons rather than an underlined strip: the active tab reads as
   a soft-filled chip instead of relying on a border baseline that no
   longer spans full-width content here. */
.header-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
}

.header-tab {
  width: auto;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0.6rem;
  padding: 0.55rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  color: #475569;
  cursor: pointer;
  transition: color 0.12s ease, background-color 0.12s ease;
}

.header-tab:hover:not([aria-current="page"]) {
  color: #0f172a;
  background-color: #f1f5f9;
}

.header-tab[aria-current="page"] {
  color: #2563eb;
  background-color: #eff6ff;
  cursor: default;
}

.header-tab:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}

/* Below 480px the pill row has no room to breathe (three pills either
   wrap raggedly or crowd the brand/user blocks either side of them), so
   it's swapped for this <details>-based dropdown instead — same tab
   buttons, just listed vertically under a toggle naming the active tab.
   Native <details> gives open/close and outside-click-to-close for free;
   app.js only closes it after picking a tab so the click doesn't leave
   the menu hanging open under the panel that just loaded. */
.header-tabs-menu {
  display: none;
  position: relative;
}

.header-tabs-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: auto;
  margin: 0;
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 0.6rem;
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
  list-style: none;
}
.header-tabs-menu-toggle::-webkit-details-marker {
  display: none;
}
.header-tabs-menu-toggle::after {
  content: "\25BE";
  font-size: 0.7rem;
  color: #94a3b8;
}
.header-tabs-menu[open] .header-tabs-menu-toggle::after {
  content: "\25B4";
}
.header-tabs-menu-toggle:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}

.header-tabs-menu-list {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.6rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  padding: 0.35rem;
  gap: 0.15rem;
  z-index: 60;
}
.header-tabs-menu-list .header-tab {
  width: 100%;
  text-align: left;
}

@media (max-width: 480px) {
  .header-tabs {
    display: none;
  }
  .header-tabs-menu {
    display: block;
  }
}

@media (max-width: 700px) {
  .app-header-inner {
    justify-content: center;
  }
  .app-header-user {
    border-left: none;
    padding-left: 0;
  }
}

/* The pastel notice/status colors below assume a light background; on a
   dark background they'd read as glary, low-contrast highlighter marks.
   Each rule reads its color through a variable that only gets a dark-mode
   value inside the blocks above (mirroring the --pico-primary pattern) —
   the literal here is just the var()'s light-mode fallback. */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --notice-ok-bg: rgba(74, 222, 128, 0.12);   --notice-ok-fg: #86efac;   --notice-ok-border: rgba(134, 239, 172, 0.4);
    --notice-err-bg: rgba(248, 113, 113, 0.12); --notice-err-fg: #fca5a5;  --notice-err-border: rgba(252, 165, 165, 0.4);
    --status-pending-bg: rgba(250, 204, 21, 0.15);  --status-pending-fg: #fde68a;
    --status-received-bg: rgba(96, 165, 250, 0.15); --status-received-fg: #93c5fd;
    --status-confirmed-bg: rgba(74, 222, 128, 0.15); --status-confirmed-fg: #86efac;
    --status-rejected-bg: rgba(248, 113, 113, 0.15); --status-rejected-fg: #fca5a5;
  }
}
[data-theme=dark] {
  --notice-ok-bg: rgba(74, 222, 128, 0.12);   --notice-ok-fg: #86efac;   --notice-ok-border: rgba(134, 239, 172, 0.4);
  --notice-err-bg: rgba(248, 113, 113, 0.12); --notice-err-fg: #fca5a5;  --notice-err-border: rgba(252, 165, 165, 0.4);
  --status-pending-bg: rgba(250, 204, 21, 0.15);  --status-pending-fg: #fde68a;
  --status-received-bg: rgba(96, 165, 250, 0.15); --status-received-fg: #93c5fd;
  --status-confirmed-bg: rgba(74, 222, 128, 0.15); --status-confirmed-fg: #86efac;
  --status-rejected-bg: rgba(248, 113, 113, 0.15); --status-rejected-fg: #fca5a5;
}

.notice {
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
}
.notice-ok {
  background: var(--notice-ok-bg, #e7f6ec);
  color: var(--notice-ok-fg, #14532d);
  border: 1px solid var(--notice-ok-border, #86efac);
}
.notice-err {
  background: var(--notice-err-bg, #fdecec);
  color: var(--notice-err-fg, #7f1d1d);
  border: 1px solid var(--notice-err-border, #fca5a5);
}

.status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.8em;
  font-weight: 500;
  text-transform: capitalize;
}
.status-pending          { background: var(--status-pending-bg, #fef9c3); color: var(--status-pending-fg, #713f12); }
.status-pending_receipt  { background: var(--status-pending-bg, #fef9c3); color: var(--status-pending-fg, #713f12); }
.status-received         { background: var(--status-received-bg, #dbeafe); color: var(--status-received-fg, #1e3a8a); }
.status-confirmed        { background: var(--status-confirmed-bg, #dcfce7); color: var(--status-confirmed-fg, #14532d); }
.status-rejected         { background: var(--status-rejected-bg, #fee2e2); color: var(--status-rejected-fg, #7f1d1d); }

/* ---- Submit wizard: 3-step progress indicator ----
   A connecting line behind evenly-spaced circles, each punched through by
   the step's own background so the line reads as passing behind it. */
.wizard-stepper {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.75rem;
}
.wizard-stepper::before {
  content: "";
  position: absolute;
  top: 1rem;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #e2e8f0;
  z-index: 0;
}
.wizard-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.5rem;
  background-color: var(--pico-card-background-color, #fff);
}
.wizard-step-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #e2e8f0;
  color: #64748b;
  font-size: 0.85rem;
  font-weight: 700;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.wizard-step-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
}
.wizard-step-active .wizard-step-circle {
  background-color: var(--pico-primary, #0c3776);
  color: #fff;
}
.wizard-step-active .wizard-step-label {
  color: var(--pico-primary, #0c3776);
  font-weight: 700;
}
.wizard-step-done .wizard-step-circle {
  background-color: #42b72a;
  color: #fff;
}

/* Step 1: what to have on hand before starting. */
.checklist-box {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid #e2e8f0;
  border-radius: var(--pico-border-radius);
  background-color: #f8fafc;
}
.checklist-box h4 {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.checklist-box ul {
  margin: 0;
  padding-left: 1.1rem;
}
.checklist-box li + li {
  margin-top: 0.35rem;
}

/* Step 2: shipping-responsibility agreement. A plain required checkbox —
   the browser's own validation blocks submission until it's checked, so
   this needs no JS to gate the button. */
.terms-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 1.25rem 0;
  padding: 1rem 1.1rem;
  border-radius: var(--pico-border-radius);
  background-color: #f1f5f9;
  font-size: 0.88rem;
  line-height: 1.45;
  cursor: pointer;
}
.terms-checkbox input {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
}

/* Confirmation screen: a celebratory centered hero (checkmark + heading +
   specimen ID) instead of the heading reading as plain left-aligned copy
   above a centered block. */
.success-hero {
  text-align: center;
}

.success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.5rem;
  border-radius: 50%;
  background-color: #42b72a;
  color: #fff;
}
.success-icon svg {
  width: 1.9rem;
  height: 1.9rem;
}

/* Specimen ID + status, centered as their own focal block rather than
   left-aligned body copy. */
.specimen-highlight {
  text-align: center;
  margin: 1rem 0 1.5rem;
}

/* "What to do next": set off in its own tinted panel so it reads as a
   distinct instructions callout rather than continuing body copy. */
.next-steps {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--pico-border-radius);
  /* A subtle neutral overlay, not a pico color variable: those resolve to
     solid, fairly saturated colors (e.g. --pico-secondary-background is a
     solid slate), which washed out the muted heading/body text here. */
  background-color: rgba(127, 127, 127, 0.08);
}
.next-steps h4 {
  margin-top: 0;
}
/* Download button: centered and matched to the same width as the "Go to
   See Results" button below (.submit-done-actions), even though the two
   now live in separate containers. */
.next-steps > [role="button"] {
  display: block;
  width: 100%;
  max-width: 18rem;
  margin: 1.25rem auto 0;
  text-align: center;
}

/* "What to do next", as numbered instruction cards instead of a plain
   ordered list — each step reads as its own scannable row. */
.instruction-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.instruction-card {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: var(--pico-border-radius);
  background-color: var(--pico-card-background-color, #fff);
}
.instruction-number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background-color: #edf2f7;
  color: #1e293b;
  font-size: 0.78rem;
  font-weight: 700;
}
.instruction-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
}

.specimen-id {
  display: inline-block;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 3px;
  font-family: ui-monospace, monospace;
  margin: 0.25rem 0 1rem;
  padding: 0.4rem 1.25rem;
  border-radius: var(--pico-border-radius);
  background-color: #d6ebfd;
  color: #0c3776;
}

/* Specimen ID + its "Copy" affordance, side by side. */
.id-box {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.copy-btn {
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--pico-primary, #0c3776);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.copy-btn:hover,
.copy-btn:focus {
  color: var(--pico-primary-hover, #082a5c);
}

/* Confirmation screen: download + "go to results" actions, centered and
   matched to the same width instead of each sizing to its own text. */
.submit-done-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  text-align: center;
}
.submit-done-actions > [role="button"],
.submit-done-actions > button {
  width: 100%;
  max-width: 18rem;
}

.details-cell {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Data tables (admin) scroll horizontally inside .overflow-auto rather
   than squeeze columns unreadably; tightening cell padding on small
   phones shrinks how much of that scroll is actually needed. */
@media (max-width: 480px) {
  .overflow-auto table {
    font-size: 0.9rem;
  }
  .overflow-auto th,
  .overflow-auto td {
    padding: 0.5rem 0.6rem;
    white-space: nowrap;
  }
}

/* ---- Results table ----
   Specimen ID as a monospace chip, PDF as a plain link, "View report" as
   a filled brand-navy pill button instead of Pico's default button
   chrome (which reads too heavy repeated once per row). */
.id-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.4rem;
  background-color: #f1f5f9;
  color: #64748b;
  font-size: 0.8rem;
  font-family: ui-monospace, monospace;
}

.pdf-link {
  color: #2563eb;
  text-decoration: underline;
  font-weight: 500;
}

.btn-view {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0.4rem 1rem;
  border: none;
  border-radius: 0.5rem;
  background-color: var(--pico-primary, #0c3776);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.btn-view:hover,
.btn-view:focus {
  background-color: var(--pico-primary-hover, #082a5c);
}

/* Desktop: a plain table. Below 640px each row becomes its own card with
   label:value pairs instead of squeezing five columns into a phone
   width — every cell's data-label attr supplies the label via ::before. */
.responsive-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.responsive-table th {
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #4a5568;
  border-bottom: 1px solid #e2e8f0;
}
.responsive-table td {
  padding: 0.85rem 1rem;
  font-size: 0.85rem;
  vertical-align: middle;
  border-bottom: 1px solid #edf2f7;
}

@media (max-width: 640px) {
  .responsive-table thead {
    display: none;
  }
  .responsive-table,
  .responsive-table tbody,
  .responsive-table tr,
  .responsive-table td {
    display: block;
    width: 100%;
  }
  .responsive-table tr {
    margin-bottom: 1rem;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  .responsive-table tr:last-child {
    margin-bottom: 0;
  }
  .responsive-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    text-align: right;
    border-bottom: 1px solid #f1f5f9;
  }
  .responsive-table td:last-child {
    border-bottom: none;
  }
  .responsive-table td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    text-align: left;
  }
}

/* ---- Lab report ---- */

.report-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  font-size: 0.9em;
}

.report-table td,
.report-table th {
  padding: 0.3rem 0.5rem;
}

/* Drug class: uppercase in the CSV, bold, never carries a value. */
.report-class td {
  font-weight: 700;
}

/* Positive class header: highlighted red. */
.report-table tr.report-positive td {
  background: #fdecec;
  color: #7f1d1d;
}

/* Analyte: non-bold, indented slightly beneath its class, highlighted
   yellow (analytes are only reported for positive findings). */
.report-analyte td {
  font-weight: 400;
  background: #fef9c3;
  color: #713f12;
}
.report-analyte td:first-child {
  padding-left: 1.75rem;
}

.report-comments {
  margin-top: 1rem;
  font-size: 0.9em;
}
.report-comments p {
  margin: 0.25rem 0 0;
  white-space: pre-line;
}

/* Breathing room between the comments and the action buttons, and a flex
   row (wrapping on narrow screens) so the download/back controls don't
   rely on inline-element whitespace for their gap. */
.report-actions {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.report-actions > * {
  margin: 0;
}