/* ============================================================================
   Pediatras — design system.

   Hand-written, no build step, no Tailwind. DosiPed shipped a Tailwind build
   artifact (app.built.css) that had to be regenerated with npx every time a
   class changed, which is a toolchain in front of a 2.000-line app. The warm
   pediatric look this brand needs is a dozen custom properties and about six
   components, so it is written once, here, and read directly by the browser.

   Tone: warm and welcoming, because the audience spends its day with children
   and their parents. NOT childish: the numbers on these screens are drug doses,
   so type stays large and legible, contrast stays high, and the playful part is
   colour and roundness, never the data.
   ========================================================================= */

/* ------------------------------------------------------------------ tokens */
:root {
  /* Brand palette. Plum carries authority, lavender carries warmth, yellow
     carries the joy, and the ground is cream rather than white so nothing on
     the page is ever pure #fff against pure #fff. */
  --cream:      #fffcf7;
  --cream-deep: #fff4ea;
  --surface:    #ffffff;
  --line:       #ece3f2;
  --line-soft:  #f6f1f9;
  --ink:        #39204f;
  --body:       #60506e;
  --muted:      #9a8aa8;

  /* pillar colours, one per tool, used as the only wayfinding device.
     All five are drawn from the brand family so the app reads as one thing,
     with two deliberate exceptions: emergenze stays red because red means
     emergency everywhere in medicine and a house style is not worth a moment's
     hesitation at a resuscitation, and strumenti's yellow needs --sole-deep for
     text because #ffbd59 on cream is about 1.7:1 and fails every contrast bar. */
  --plum:       #39204f;   --plum-deep:  #2a1739;  --plum-soft:  #efe9f4;
  --lav:        #9672b8;   --lav-deep:   #7a58a0;  --lav-soft:   #f1eaf8;
  --acqua:      #5f7fc9;   --acqua-deep: #42609f;  --acqua-soft: #e9eefa;
  --rosso:      #d1495b;   --rosso-deep: #ad3448;  --rosso-soft: #fbe6e9;
  --sole:       #ffbd59;   --sole-deep:  #a9711a;  --sole-soft:  #fff3df;
  --pesca:      #ffe2d1;   --pesca-deep: #b2663c;  --pesca-soft: #fff1e7;

  --primary:      var(--plum);
  --primary-deep: var(--plum-deep);
  --primary-soft: var(--plum-soft);

  --radius:    18px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(57,32,79,.05);
  --shadow:    0 2px 4px rgba(57,32,79,.04), 0 12px 28px -16px rgba(57,32,79,.22);
  --shadow-lg: 0 4px 8px rgba(57,32,79,.06), 0 28px 56px -24px rgba(57,32,79,.28);

  --font-display: "Baloo 2", "Nunito Sans", system-ui, sans-serif;
  --font-body:    "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}


/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  background: var(--cream);
  background-image:
    radial-gradient(1100px 520px at 12% -8%,  rgba(255,189,89,.13), transparent 62%),
    radial-gradient(900px 480px at 92% 2%,   rgba(150,114,184,.11), transparent 60%),
    radial-gradient(800px 520px at 50% 108%, rgba(57,32,79,.10), transparent 62%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 .4em;
  font-weight: 700;
  letter-spacing: -.01em;
}
p { margin: 0 0 1em; }
a { color: var(--primary-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
::-webkit-scrollbar { width: 0; height: 0; }

/* ------------------------------------------------------------------ layout */
.wrap     { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.wrap-mid { max-width: 820px;  margin: 0 auto; padding: 0 20px; }
.app      { max-width: 620px;  margin: 0 auto; padding: 20px 16px 120px; }
.stack > * + * { margin-top: 1rem; }
.center   { text-align: center; }
.muted    { color: var(--muted); }
.small    { font-size: .86rem; }
.tiny     { font-size: .76rem; }
.kicker {
  font-size: .72rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--primary-deep);
}
.grid { display: grid; gap: 18px; }
@media (min-width: 680px)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* ------------------------------------------------------------------ cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px;
}
.card-tight { padding: 16px; border-radius: var(--radius); }
.card-flat  { box-shadow: var(--shadow-sm); }

/* a feature card carries its pillar colour as a top rule and a soft icon chip */
.feature { position: relative; overflow: hidden; }
.feature::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: var(--accent, var(--primary));
}
.feature .chip-icon {
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center; color: var(--accent, var(--primary));
  background: var(--accent-soft, var(--primary-soft));
  margin-bottom: 14px;
}
.feature h3 { font-size: 1.4rem; margin-bottom: .25em; }
.feature .lead { color: var(--ink); font-weight: 600; margin-bottom: .8em; }
.feature ul { margin: 0; padding: 0; list-style: none; }
.feature li {
  position: relative; padding-left: 26px; margin-bottom: .45em;
  font-size: .93rem; line-height: 1.5;
}
.feature li::before {
  content: ""; position: absolute; left: 6px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent, var(--primary));
}

/* pillar accents, applied on the element */
.a-plum { --accent: var(--plum); --accent-soft: var(--plum-soft); }
.a-lav  { --accent: var(--lav);  --accent-soft: var(--lav-soft); }
.a-acqua   { --accent: var(--acqua);   --accent-soft: var(--acqua-soft); }
.a-rosso { --accent: var(--rosso); --accent-soft: var(--rosso-soft); }
.a-sole { --accent: var(--sole); --accent-soft: var(--sole-soft); }
.a-pesca  { --accent: var(--pesca);  --accent-soft: var(--pesca-soft); }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  padding: 13px 26px; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: var(--primary); color: #fff; box-shadow: var(--shadow);
}
.btn-primary:hover { background: var(--primary-deep); }
.btn-ghost {
  background: var(--surface); color: var(--ink); border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { border-color: var(--primary); color: var(--primary-deep); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 16px; font-size: .88rem; }
.btn-danger { background: var(--rosso); color: #fff; }
.btn-ok     { background: var(--lav);  color: #fff; }

/* ------------------------------------------------------------------ forms */
label.lbl {
  display: block; font-size: .78rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.input, select.input, textarea.input {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}
.input::placeholder { color: var(--muted); }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a28d82' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.field + .field { margin-top: 14px; }
.hint { font-size: .8rem; color: var(--muted); margin-top: 6px; }

/* ------------------------------------------------------------------ chips / badges */
.chip {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: .82rem; font-weight: 700; padding: 6px 14px;
  border-radius: var(--radius-pill); border: 1.5px solid var(--line);
  background: var(--surface); color: var(--body); cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.chip:hover { text-decoration: none; border-color: var(--primary); }
.chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }

.badge {
  display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-pill);
}
.badge-draft    { background: var(--pesca-soft);  color: var(--sole-deep); }
.badge-approved { background: var(--lav-soft);  color: var(--lav-deep); }
.badge-rejected { background: var(--rosso-soft); color: var(--rosso-deep); }
.badge-pending  { background: var(--line-soft);  color: var(--body); }

/* ------------------------------------------------------------------ header */
.site-head {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,252,247,.88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head .bar { display: flex; align-items: center; gap: 14px; height: 68px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand:hover { text-decoration: none; }
/* The logo is one image, not type plus an emoji. Width is left to the aspect
   ratio so the intrinsic 974x240 in the markup reserves the right box and the
   header does not jump while the PNG loads. */
.brand img { height: 38px; width: auto; display: block; }
@media (max-width: 560px) { .brand img { height: 32px; } }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.nav-link { color: var(--body); font-weight: 600; font-size: .95rem; }
.nav-link:hover { color: var(--primary-deep); text-decoration: none; }
.icon-btn {
  background: none; border: 0; cursor: pointer; font-size: 1.05rem;
  color: var(--muted); padding: 4px; line-height: 1; text-decoration: none;
}
.icon-btn:hover { color: var(--primary); text-decoration: none; }

/* ------------------------------------------------------------------ hero */
.hero { padding: 72px 0 56px; text-align: center; position: relative; }
.hero h1 {
  font-size: clamp(2.6rem, 7vw, 4.3rem);
  line-height: 1.05; margin: 18px 0 0;
}
.hero h1 em { font-style: normal; color: var(--primary); }
.hero .sub {
  font-size: clamp(1.05rem, 2.3vw, 1.25rem);
  max-width: 640px; margin: 22px auto 0; color: var(--body);
}
.hero .cta { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero .note { margin-top: 18px; font-size: .88rem; color: var(--muted); }
.trust {
  margin-top: 34px; display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 9px 20px;
  font-size: .84rem; font-weight: 600; color: var(--body);
  box-shadow: var(--shadow-sm);
}
.trust .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lav); }

/* section headings */
.section { padding: 56px 0; }
.section-head { text-align: center; max-width: 660px; margin: 0 auto 36px; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.section-head p  { font-size: 1.05rem; color: var(--body); margin: 0; }

/* numbered steps */
.steps { counter-reset: step; }
.step { position: relative; padding-left: 62px; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem;
  background: var(--primary-soft); color: var(--primary-deep);
}
.step h3 { font-size: 1.2rem; margin-bottom: .2em; }
.step p  { margin: 0; font-size: .95rem; }

/* why list */
.why-item { display: flex; gap: 14px; }
.why-item .ico {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center; color: var(--accent, var(--primary));
  background: var(--accent-soft, var(--primary-soft));
}
.why-item h3 { font-size: 1.08rem; margin-bottom: .15em; }
.why-item p  { margin: 0; font-size: .93rem; }

/* ------------------------------------------------------------------ patient bar */
.patient-bar {
  position: sticky; top: 68px; z-index: 20;
  background: rgba(255,252,247,.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.patient-bar .inner {
  max-width: 620px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
}
.patient-bar .pb-field { display: flex; align-items: center; gap: 6px; flex: 1; }
.patient-bar .pb-field.narrow { flex: 0 0 116px; }
.patient-bar input {
  width: 100%; text-align: center; font-weight: 800; font-size: 1.05rem;
  color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line); border-radius: 14px; padding: 9px 8px; outline: none;
}
.patient-bar input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.patient-bar .unit { font-size: .85rem; font-weight: 700; color: var(--muted); }

/* ------------------------------------------------------------------ bottom nav */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: rgba(255,255,255,.95); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar .inner { max-width: 620px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); }
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 0 8px; color: var(--muted); font-size: .68rem; font-weight: 700;
  text-decoration: none;
}
.tab:hover { text-decoration: none; }
.tab .ico { display: grid; place-items: center; line-height: 1; }
.tab.on { color: var(--accent, var(--primary)); }
.tab.on .ico { transform: translateY(-1px); }
.tab .dotmark { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* ------------------------------------------------------------------ results */
.result {
  background: linear-gradient(140deg, var(--accent-soft, var(--primary-soft)), var(--surface) 70%);
  border: 1.5px solid var(--accent, var(--primary));
  border-radius: var(--radius-lg); padding: 22px; text-align: center;
}
.result .big {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.2rem, 9vw, 3rem); color: var(--ink); line-height: 1.05;
}
.result .unit-lg { font-size: 1.1rem; color: var(--body); font-weight: 700; }
.result .sub { font-size: .92rem; color: var(--body); margin-top: 6px; }
.readout { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.readout:last-child { border-bottom: 0; }
.readout .k { color: var(--muted); font-size: .9rem; }
.readout .v { color: var(--ink); font-weight: 800; }
.source {
  margin-top: 12px; font-size: .78rem; color: var(--muted);
  border-top: 1px solid var(--line); padding-top: 10px;
}
.warnbox {
  background: var(--rosso-soft); border: 1px solid var(--rosso);
  color: var(--rosso-deep); border-radius: var(--radius);
  padding: 11px 14px; font-size: .88rem; font-weight: 700;
}
.notice {
  background: var(--pesca-soft); border: 1px solid rgba(255,189,89,.45);
  border-radius: var(--radius); padding: 14px 16px; font-size: .92rem; color: var(--sole-deep);
}
.empty { text-align: center; padding: 42px 20px; color: var(--muted); }
/* Icons are SVG now, not glyphs: they take their colour from the element they
   sit in, which is what lets one <svg> serve all six pillar accents. */
.icn { display: block; flex: 0 0 auto; }
.empty .ico, .mark-lg { color: var(--accent, var(--muted)); display: grid; place-items: center; }
.empty .ico { margin-bottom: 10px; }
.mark-lg { color: var(--primary); margin-bottom: 4px; }
.icon-btn .icn { display: inline-block; vertical-align: -3px; }
.chip .icn, .kicker .icn { display: inline-block; vertical-align: -2px; }

/* ------------------------------------------------------------------ tables */
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th {
  text-align: left; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); padding: 8px 10px; border-bottom: 1.5px solid var(--line);
}
.table td { padding: 10px; border-bottom: 1px solid var(--line-soft); color: var(--ink); }
.table tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }

/* ------------------------------------------------------------------ modals / toast */
.modal {
  position: fixed; inset: 0; z-index: 60; display: none;
  align-items: center; justify-content: center; padding: 18px;
  background: rgba(57,32,79,.45); backdrop-filter: blur(4px);
}
.modal.open { display: flex; }
.modal .panel {
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); max-width: 420px; width: 100%; padding: 28px;
}
.toast {
  position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%);
  z-index: 70; background: var(--ink); color: #fff;
  border-radius: var(--radius-pill); padding: 10px 20px;
  font-size: .9rem; font-weight: 700; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.toast.show { opacity: 1; }

/* ------------------------------------------------------------------ auth pages */
.auth-wrap { max-width: 420px; margin: 0 auto; padding: 48px 20px 80px; }
.auth-wrap .card { padding: 30px; }
.auth-wrap h1 { font-size: 2rem; text-align: center; }
.auth-wrap .intro { text-align: center; color: var(--body); font-size: .95rem; }
.alert {
  border-radius: var(--radius); padding: 11px 14px; font-size: .9rem;
  font-weight: 600; margin-bottom: 16px;
}
.alert-bad { background: var(--rosso-soft); color: var(--rosso-deep); }
.alert-ok  { background: var(--lav-soft);  color: var(--lav-deep); }

/* ------------------------------------------------------------------ footer */
.site-foot { border-top: 1px solid var(--line); margin-top: 40px; background: rgba(255,255,255,.5); }
.site-foot .inner {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  justify-content: space-between; padding: 30px 0;
}
.site-foot .disclaimer { font-size: .8rem; color: var(--muted); max-width: 520px; margin: 0; }

/* ------------------------------------------------------------------ a11y */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}