/* ============================================================
   SALIVARY FLOW RATE — component stylesheet.

   Lifted VERBATIM from the approved prototype. Every rule is prefixed
   with the root class `.sflow` so nothing here leaks onto a page and no
   page rule reaches in. Scoping is the ONLY change: not one colour,
   size, radius or font-size has been altered.

   The prototype's `body` rule carried the font stack and ink colour for
   its content; those move onto `.sflow` itself, which is the component
   root — same values, same effect. Its `margin`/`padding` are dropped
   because the component is not the page.

   One addition, required by §4.3 of the build prompt and marked below:
   the contact-bar width transition is disabled under
   prefers-reduced-motion. It is the component's only motion.
   ============================================================ */

.sflow, .sflow * { box-sizing: border-box; }

.sflow {
    background: #FFFFFF; color: #111111;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.sflow .wrap { max-width: 980px; margin: 0 auto; }
.sflow h1 { font-size: 21px; margin: 0 0 4px; }
.sflow .sub { font-size: 14px; margin: 0 0 20px; }

.sflow .panel { border: 2px solid #D8D2C7; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.sflow svg.plot { width: 100%; height: auto; display: block; }

.sflow .controlrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sflow .controlrow .lab { font-size: 13px; font-weight: 700; white-space: nowrap; }
.sflow input[type=range] { flex: 1 1 320px; accent-color: #2E7C9A; }
.sflow .rate { font-size: 30px; font-weight: 700; min-width: 132px; text-align: right; }
.sflow .rate small { font-size: 13px; font-weight: 700; }

.sflow .contact { margin-top: 16px; }
.sflow .contact .k { font-size: 11px; font-weight: 700; margin-bottom: 6px; }
.sflow .track { height: 22px; border: 2px solid #B8B8B8; border-radius: 7px; overflow: hidden; background: #FFFFFF; }
.sflow .fill { height: 100%; background: #E8F4F8; border-right: 2px solid #2E7C9A; transition: width .12s linear; }
.sflow .contact .note { font-size: 12px; margin-top: 6px; }

.sflow .presets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.sflow button.preset {
    font: inherit; font-size: 13px; font-weight: 700;
    padding: 7px 14px; border-radius: 8px; cursor: pointer;
    background: #FFF1D2; color: #111111; border: 2px solid #C9922A;
}
.sflow button.toggle {
    font: inherit; font-size: 13px; font-weight: 700;
    padding: 7px 14px; border-radius: 8px; cursor: pointer;
    background: #FFFFFF; color: #111111; border: 2px solid #B4362F;
}
.sflow button.toggle.on { background: #FAEDEC; }

.sflow .ions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 760px) { .sflow .ions { grid-template-columns: 1fr 1fr; } }
.sflow .ion { border: 2px solid #B8B8B8; border-left-width: 6px; border-radius: 10px; padding: 11px 13px; }
.sflow .ion .n { font-size: 17px; font-weight: 700; }
.sflow .ion .v { font-size: 23px; font-weight: 700; margin-top: 3px; }
.sflow .ion .c { font-size: 11px; font-weight: 700; margin-top: 2px; }

.sflow .explain { border: 2px solid #C9922A; background: #FFF1D2; border-radius: 10px; padding: 13px 15px; margin-top: 16px; }
.sflow .explain .h { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.sflow .explain .b { font-size: 14px; }

.sflow .locked { border: 2px solid #B4362F; background: #FAEDEC; border-radius: 10px; padding: 13px 15px; margin-top: 20px; }
.sflow .locked .h { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.sflow .locked ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.sflow .locked li { margin-bottom: 5px; }
.sflow .foot { font-size: 12px; margin-top: 8px; }

/* --- §4.3 ONLY ADDITION: the contact bar is the component's only
       motion, so its transition is removed under reduced motion. --- */
@media (prefers-reduced-motion: reduce) {
    .sflow .fill { transition: none; }
}