/* A-027 fixes (loaded last). */

/* Labs (Ref Verdicts row 48): neutral range status. Grey outline pill, no red/green, no icons. */
.pill.neutral{background:transparent;color:var(--text);border:1px solid var(--border-strong,var(--border));font-weight:600;}
.lab-range-help{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:0 0 18px;border-radius:50%;border:1px solid var(--border-strong,var(--border));color:var(--text-dim);font:italic 700 11px/1 Georgia,serif;cursor:help;vertical-align:middle;}
.lab-range-help:focus-visible{outline:2px solid var(--accent,#1f9d74);outline-offset:2px;}
.lab-range-provenance{font-size:12px;color:var(--text-dim);margin:2px 0 0;}
#lab-compare-chart .dashboard-style-lab.lab-status-neutral,.lab-deep-dive-card.lab-status-neutral{background:var(--panel);}

/* Inventory list on phones: give the item name its own full-width row so it is readable, and keep the
   status pill on the second row where it has room (was: 4 fixed columns, name squeezed to ~0px, pill clipped). */
@media(max-width:700px){
  #table-inventory tbody tr:not(.mobile-expanded){
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) auto !important;
    grid-template-areas:"name name name" "remain containers status" !important;
    row-gap:6px !important;
  }
  #table-inventory tbody tr:not(.mobile-expanded) td:nth-child(1){min-width:0 !important;width:auto !important;max-width:none !important;}
  #table-inventory tbody tr:not(.mobile-expanded) td:nth-child(1) input{width:100% !important;max-width:none !important;}
  #table-inventory tbody tr:not(.mobile-expanded) td:nth-child(5){justify-self:end !important;min-width:0 !important;}
  #table-inventory tbody tr:not(.mobile-expanded) .pill{max-width:none !important;overflow:visible !important;}
}

/* Dark mode on phones: the deep-dive cards and their item pickers were hard-coded white, so the light dark-mode text
   ('Comparison deep dive', the card title, 'Choose data to compare') was nearly invisible (about 1.3:1). Use the dark panel colour. */
@media(max-width:700px){
  html:not([data-theme="light"]) #measurement-weight-chart .progress-deep-dive-card,
  html:not([data-theme="light"]) #levels-deep-dive-workspace .levels-deep-dive-card,
  html:not([data-theme="light"]) #lab-compare-chart .lab-deep-dive-card,
  html:not([data-theme="light"]) #tab-track .card.vnext-secondary-surface{background:var(--panel)!important;}
  /* A-037: the bubble heads/selectors and the Progress secondary card now read --pp-c-surface (css/pp-tokens.css). */
}

/* Keep chart disclaimers/footnotes clear of fixed controls: the phone bottom nav + floating + button, and the desktop
   Feedback button. Page-end spacing includes the iPhone home-indicator inset, and scroll-padding keeps in-page jumps
   (e.g. View Cost Forecast) from landing underneath them. */
@media(max-width:700px){
  html{scroll-padding-bottom:calc(112px + env(safe-area-inset-bottom,0px));}
  body#app-shell main{padding-bottom:calc(128px + env(safe-area-inset-bottom,0px))!important;}
  .pp-chart .pp-footnote{margin-bottom:6px;}
}
@media(min-width:701px){
  html{scroll-padding-bottom:72px;}
  body#app-shell main{padding-bottom:max(80px,calc(64px + env(safe-area-inset-bottom,0px)))!important;}
}
@media(max-width:360px){
  #table-inventory tbody tr:not(.mobile-expanded) td:nth-child(1) input{font-size:14px !important;}
}
/* Desktop: the inventory table was squeezed into half the page (long names cut, Status pill clipped behind a sideways
   scroll). Give it the full width; Mixed Vials & Expirations moves below it. */
@media(min-width:701px){
  #tab-inventory > .split{grid-template-columns:minmax(0,1fr) !important;}
  #table-inventory tbody td:first-child{min-width:300px !important;}
  #table-inventory tbody td:first-child input{width:100%;}
}
@media(max-width:340px){
  #table-inventory tbody tr:not(.mobile-expanded) td:nth-child(1) input{font-size:13px !important;}
}

/* A-027 (5) Home > Daily check-in: each marker card stacks its name above its dropdown, so the name is always visible and the
   dropdown (and its arrow) stays inside the card. Cards wrap onto new rows instead of overflowing when 3+ markers are selected. */
#app-shell #dashboard-checkin-panel .dashboard-checkin-fields{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,120px),1fr))!important;gap:8px!important;min-width:0!important;}
#app-shell #dashboard-checkin-panel .dashboard-checkin-field{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:5px!important;min-width:0!important;box-sizing:border-box!important;grid-template-columns:none!important;min-height:0!important;}
#app-shell #dashboard-checkin-panel .dashboard-checkin-field label{display:block!important;visibility:visible!important;position:static!important;height:auto!important;width:auto!important;margin:0!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere!important;line-height:1.25!important;font-size:11px!important;font-weight:700!important;color:var(--text)!important;}
#app-shell #dashboard-checkin-panel .dashboard-checkin-field select{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;margin:0!important;}

/* A-027 r2: "(optional)" inside a Settings field label matches the label size (R6 markup) */
#tab-settings .field label>.muted{font-size:inherit;font-weight:inherit;}

/* A-031: under-18 date-of-birth notice. Neutral like the 18+ gate: no red, no icon, not an error style. */
#app-shell .pp-age-notice{margin:6px 0 10px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:transparent;color:var(--text-dim);font-size:12px;line-height:1.5;}
#app-shell .pp-age-notice[hidden]{display:none;}
#app-shell .toast.notice{border-left-color:var(--border);}
#app-shell .toast.notice .toast-icon{display:none;}
/* A-031 Ref S1: on phones the Lab profile status line sits on its own row under the Save button (long N1 text wraps cleanly). */
@media(max-width:700px){#app-shell #lab-profile-status{display:block;margin:8px 0 0!important;}}