@jjlmoya/utils-aquarium 1.68.0 → 1.70.0

package/src/tool/aquariumNitrateDilutionCalculator/aquarium-nitrate-dilution-calculator.css

@@ -0,0 +1,887 @@
+:root {
+  --n-ink: #162a31;
+  --n-ink-soft: #38515a;
+  --n-paper: #f0f3ee;
+  --n-surface: #fffdf8;
+  --n-line: #c9d6d1;
+  --n-water: #087f8d;
+  --n-water-light: #d3edef;
+  --n-coral: #e26543;
+  --n-coral-light: #f8ded1;
+  --n-lime: #b6c84d;
+  --n-danger: #a33d32;
+  --n-header-bg: #162a31;
+  --n-header-ink: #f3f1e8;
+  --n-header-copy: #f0f3ee;
+  --n-header-line: #38515a;
+  --n-selected-ink: #162a31;
+}
+
+.theme-dark {
+  --n-ink: #f3f1e8;
+  --n-ink-soft: #c3d0ca;
+  --n-paper: #161c1e;
+  --n-surface: #20292b;
+  --n-line: #4b5e60;
+  --n-water: #64d0d2;
+  --n-water-light: #21494d;
+  --n-coral: #ff9978;
+  --n-coral-light: #543329;
+  --n-lime: #d2df62;
+  --n-danger: #ff9d91;
+  --n-header-bg: #0b171b;
+  --n-header-ink: #f7fbf8;
+  --n-header-copy: #d9e7e3;
+  --n-header-line: #728a8d;
+  --n-selected-ink: #162a31;
+}
+
+.and-tool {
+  --n-ink: #162a31;
+  --n-ink-soft: #38515a;
+  --n-paper: #f0f3ee;
+  --n-surface: #fffdf8;
+  --n-line: #c9d6d1;
+  --n-water: #087f8d;
+  --n-water-light: #d3edef;
+  --n-coral: #e26543;
+  --n-coral-light: #f8ded1;
+  --n-lime: #b6c84d;
+  --n-danger: #a33d32;
+  --n-header-bg: #162a31;
+  --n-header-ink: #f3f1e8;
+  --n-header-copy: #f0f3ee;
+  --n-header-line: #38515a;
+  --n-selected-ink: #162a31;
+
+  color: var(--n-ink);
+  background: transparent;
+}
+
+.theme-dark .and-tool {
+  --n-ink: #f3f1e8;
+  --n-ink-soft: #c3d0ca;
+  --n-paper: #161c1e;
+  --n-surface: #20292b;
+  --n-line: #4b5e60;
+  --n-water: #64d0d2;
+  --n-water-light: #21494d;
+  --n-coral: #ff9978;
+  --n-coral-light: #543329;
+  --n-lime: #d2df62;
+  --n-danger: #ff9d91;
+  --n-header-bg: #0b171b;
+  --n-header-ink: #f7fbf8;
+  --n-header-copy: #d9e7e3;
+  --n-header-line: #728a8d;
+  --n-selected-ink: #162a31;
+}
+
+.and-surface {
+  width: 100%;
+  box-sizing: border-box;
+  max-width: 960px;
+  margin: 0 auto;
+  overflow: hidden;
+  border-radius: 2rem;
+  background: var(--n-surface);
+}
+
+.and-topline {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 2rem;
+  align-items: center;
+  padding: 1.2rem 1.4rem;
+  border-radius: 2rem 2rem 0 0;
+  color: var(--n-header-ink);
+  background: var(--n-header-bg);
+}
+
+.and-identity {
+  display: flex;
+  gap: 0.8rem;
+  align-items: center;
+}
+
+.and-no3-mark {
+  display: grid;
+  width: 3.1rem;
+  height: 3.1rem;
+  flex: 0 0 3.1rem;
+  place-items: center;
+  border: 2px solid var(--n-lime);
+  color: var(--n-lime);
+  font-size: 0.82rem;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  transform: rotate(-4deg);
+}
+
+.and-kicker,
+.and-section-note,
+.and-intro,
+.and-reading-copy,
+.and-reading-copy small,
+.and-unit-switch legend,
+.and-unit-options small,
+.and-answer-label,
+.and-answer-unit,
+.and-answer-copy,
+.and-metrics span,
+.and-scenario-heading small,
+.and-scenario-list span,
+.and-scenario-list small,
+.and-error {
+  margin: 0;
+}
+
+.and-kicker {
+  font-size: 0.72rem;
+  font-weight: 900;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.and-intro {
+  max-width: 38rem;
+  margin-top: 0.35rem;
+  color: var(--n-ink-soft);
+  font-size: 0.92rem;
+  line-height: 1.4;
+}
+
+.and-topline .and-intro {
+  color: var(--n-header-copy);
+}
+
+.and-unit-switch {
+  min-width: 13rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.and-unit-switch legend {
+  margin-bottom: 0.45rem;
+  color: var(--n-lime);
+  font-size: 0.66rem;
+  font-weight: 900;
+  letter-spacing: 0.13em;
+  text-align: right;
+  text-transform: uppercase;
+}
+
+.and-unit-options {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  border: 1px solid var(--n-header-line);
+  border-radius: 1rem;
+  overflow: hidden;
+}
+
+.and-unit-options button {
+  display: grid;
+  gap: 0.12rem;
+  min-width: 6rem;
+  border: 0;
+  border-right: 1px solid var(--n-header-line);
+  padding: 0.55rem 0.65rem;
+  color: var(--n-header-copy);
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.and-unit-options button:last-child {
+  border-right: 0;
+}
+
+.and-unit-options button[aria-pressed='true'] {
+  color: var(--n-selected-ink);
+  background: var(--n-lime);
+}
+
+.and-unit-options strong {
+  font-size: 0.74rem;
+  font-weight: 900;
+}
+
+.and-unit-options small {
+  font-size: 0.64rem;
+  line-height: 1.2;
+}
+
+.and-workspace {
+  display: grid;
+  grid-template-columns: minmax(16rem, 0.78fr) minmax(0, 1.22fr);
+}
+
+.and-readings,
+.and-decision {
+  padding: 1.35rem;
+}
+
+.and-readings {
+  border-right: 1px solid var(--n-line);
+  background: var(--n-paper);
+}
+
+.and-section-heading,
+.and-decision-heading,
+.and-scenario-heading {
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.and-section-heading,
+.and-decision-heading {
+  justify-content: flex-start;
+}
+
+.and-section-index {
+  color: var(--n-coral);
+  font-size: 0.72rem;
+  font-weight: 900;
+  letter-spacing: 0.1em;
+}
+
+.and-section-note {
+  margin-top: 0.3rem;
+  color: var(--n-ink-soft);
+  font-size: 0.84rem;
+  line-height: 1.4;
+}
+
+.and-reading-list {
+  display: grid;
+  gap: 0.5rem;
+  margin-top: 1.35rem;
+}
+
+.and-reading-row {
+  display: grid;
+  grid-template-columns: 1.25rem minmax(0, 1fr) 5.3rem auto;
+  gap: 0.55rem;
+  align-items: center;
+  min-height: 3.4rem;
+  border-top: 1px solid var(--n-line);
+  padding: 0.55rem 0;
+}
+
+.and-reading-index {
+  color: var(--n-water);
+  font-size: 0.72rem;
+  font-weight: 900;
+}
+
+.and-reading-copy {
+  display: grid;
+  gap: 0.18rem;
+  min-width: 0;
+}
+
+.and-reading-copy strong {
+  font-size: 0.83rem;
+  line-height: 1.2;
+}
+
+.and-reading-copy small {
+  overflow: hidden;
+  color: var(--n-ink-soft);
+  font-size: 0.65rem;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.and-reading-row input {
+  width: 100%;
+  box-sizing: border-box;
+  border: 2px solid var(--n-line);
+  border-radius: 0.85rem;
+  padding: 0.62rem 0.5rem;
+  color: var(--n-ink);
+  background: var(--n-surface);
+  font: inherit;
+  font-size: 1rem;
+  font-weight: 800;
+}
+
+.and-reading-row input:focus {
+  outline: 3px solid var(--n-coral-light);
+  border-color: var(--n-coral);
+}
+
+.and-reading-row em {
+  min-width: 3.3rem;
+  color: var(--n-water);
+  font-size: 0.64rem;
+  font-style: normal;
+  font-weight: 900;
+  line-height: 1.1;
+  text-align: right;
+}
+
+.and-reset {
+  margin-top: 1.1rem;
+  border: 0;
+  border-bottom: 2px solid var(--n-coral);
+  padding: 0 0 0.18rem;
+  color: var(--n-coral);
+  background: transparent;
+  font: inherit;
+  font-size: 0.72rem;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.and-decision {
+  background: var(--n-surface);
+}
+
+.and-decision-heading {
+  align-items: center;
+}
+
+.and-decision-heading > div {
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-start;
+}
+
+.and-status {
+  margin-left: auto;
+  border-left: 3px solid var(--n-lime);
+  padding-left: 0.55rem;
+  color: var(--n-ink-soft);
+  font-size: 0.68rem;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  text-align: right;
+  text-transform: uppercase;
+}
+
+.and-answer-block {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 0.55rem;
+  align-items: baseline;
+  margin-top: 1.3rem;
+}
+
+.and-safety-note {
+  display: grid;
+  gap: 0.3rem;
+  margin-top: 1rem;
+  border: 1px solid #c98b00;
+  border-left-width: 0.35rem;
+  border-radius: 0.8rem;
+  padding: 0.8rem 0.95rem;
+  color: #4a3300;
+  background: #fff0bd;
+  font-size: 0.78rem;
+  line-height: 1.4;
+}
+
+.and-safety-note strong {
+  font-size: 0.72rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.and-tool.is-critical-change .and-safety-note {
+  border-color: var(--n-danger);
+  color: #4f1c14;
+  background: #ffe0d8;
+}
+
+.and-tool.is-high-change .and-answer-number {
+  color: #b47500;
+}
+
+.and-tool.is-critical-change .and-answer-number {
+  color: var(--n-danger);
+}
+
+.and-answer-label {
+  width: 100%;
+  color: var(--n-coral);
+  font-size: 0.72rem;
+  font-weight: 900;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.and-answer-number {
+  color: var(--n-water);
+  font-size: clamp(4rem, 9vw, 7rem);
+  line-height: 0.82;
+  letter-spacing: -0.08em;
+}
+
+.and-answer-unit {
+  max-width: 8rem;
+  color: var(--n-ink-soft);
+  font-size: 0.88rem;
+  font-weight: 800;
+  line-height: 1.15;
+}
+
+.and-flow-scene {
+  display: grid;
+  grid-template-columns: minmax(10rem, 1fr) minmax(5rem, 0.7fr) 4.5rem;
+  gap: 0.8rem;
+  align-items: center;
+  margin-top: 1.45rem;
+}
+
+.and-vessel {
+  position: relative;
+  padding: 0 0.55rem;
+}
+
+.and-vessel-lid,
+.and-vessel-foot {
+  display: block;
+  height: 0.45rem;
+  border: 2px solid var(--n-ink);
+  background: var(--n-coral);
+}
+
+.and-vessel-lid {
+  width: 72%;
+  margin: 0 auto 0.35rem;
+  border-radius: 0.6rem;
+}
+
+.and-vessel-foot {
+  width: 82%;
+  margin: 0 auto;
+  border-radius: 0 0 0.5rem 0.5rem;
+  background: var(--n-ink);
+}
+
+.and-vessel-body {
+  position: relative;
+  height: 10rem;
+  overflow: hidden;
+  border: 2px solid var(--n-ink);
+  border-radius: 1.25rem 1.25rem 0.75rem 0.75rem;
+  background: var(--n-water-light);
+}
+
+.and-water-fill {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: var(--n-after-level, 40%);
+  background: var(--n-water);
+  opacity: 0.9;
+  transition: height 0.25s ease;
+}
+
+.and-marker {
+  position: absolute;
+  right: 0.35rem;
+  left: 0.35rem;
+  display: flex;
+  gap: 0.3rem;
+  align-items: center;
+  color: var(--n-ink);
+  font-size: 0.6rem;
+  font-weight: 900;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.and-marker i {
+  display: block;
+  width: 0.5rem;
+  height: 0.5rem;
+  flex: 0 0 0.5rem;
+  border: 2px solid var(--n-surface);
+  background: var(--n-coral);
+}
+
+.and-marker-current {
+  bottom: var(--n-current-level, 40%);
+}
+
+.and-marker-target {
+  bottom: var(--n-target-level, 20%);
+  color: var(--n-coral);
+}
+
+.and-flow-arrow {
+  display: grid;
+  gap: 0.55rem;
+  justify-items: center;
+  color: var(--n-ink-soft);
+  font-size: 0.63rem;
+  font-weight: 900;
+  line-height: 1.2;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.and-flow-arrow i {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 0.15rem;
+  background: var(--n-coral);
+}
+
+.and-flow-arrow i::after {
+  position: absolute;
+  top: -0.28rem;
+  right: 0;
+  width: 0.55rem;
+  height: 0.55rem;
+  border-top: 0.15rem solid var(--n-coral);
+  border-right: 0.15rem solid var(--n-coral);
+  content: '';
+  transform: rotate(45deg);
+}
+
+.and-new-water {
+  display: grid;
+  justify-items: center;
+}
+
+.and-new-water-cap {
+  width: 2.2rem;
+  height: 0.55rem;
+  border: 2px solid var(--n-ink);
+  border-radius: 0.6rem;
+  background: var(--n-lime);
+}
+
+.and-new-water-body {
+  position: relative;
+  width: 3.6rem;
+  height: 6.4rem;
+  overflow: hidden;
+  border: 2px solid var(--n-ink);
+  border-top: 0;
+  border-radius: 0 0 1rem 1rem;
+  background: var(--n-water-light);
+}
+
+.and-new-water-fill {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: var(--n-source-level, 5%);
+  background: var(--n-lime);
+}
+
+.and-new-water small {
+  margin-top: 0.4rem;
+  color: var(--n-ink-soft);
+  font-size: 0.6rem;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.and-answer-copy {
+  max-width: 38rem;
+  margin-top: 1rem;
+  color: var(--n-ink-soft);
+  font-size: 0.78rem;
+  line-height: 1.45;
+}
+
+.and-metrics {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.8rem;
+  margin: 1.2rem 0 0;
+  border-top: 1px solid var(--n-line);
+  padding-top: 0.9rem;
+}
+
+.and-metrics div {
+  display: grid;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.and-metrics span {
+  color: var(--n-ink-soft);
+  font-size: 0.62rem;
+  line-height: 1.2;
+}
+
+.and-metrics strong {
+  overflow-wrap: anywhere;
+  font-size: 0.92rem;
+  line-height: 1.2;
+}
+
+.and-scenarios {
+  border-top: 2px solid var(--n-ink);
+  padding: 1.1rem 1.35rem 1.3rem;
+  background: var(--n-paper);
+}
+
+.and-scenario-heading {
+  align-items: baseline;
+}
+
+.and-scenario-heading > div {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.and-scenario-heading small {
+  color: var(--n-ink-soft);
+  font-size: 0.72rem;
+  line-height: 1.35;
+  text-align: right;
+}
+
+.and-scenario-choices {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.and-scenario-choices button {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--n-line);
+  border-radius: 999px;
+  padding: 0.7rem 0.5rem;
+  color: var(--n-ink);
+  background: var(--n-surface);
+  font: inherit;
+  font-size: 0.76rem;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.and-scenario-choices button i {
+  display: block;
+  width: 0.5rem;
+  height: 0.5rem;
+  border: 1px solid var(--n-coral);
+  background: var(--n-coral-light);
+}
+
+.and-scenario-choices button[aria-pressed='true'] {
+  border-color: var(--n-ink);
+  color: var(--n-surface);
+  background: var(--n-water);
+}
+
+.and-scenario-choices button[aria-pressed='true'] i {
+  border-color: var(--n-lime);
+  background: var(--n-lime);
+}
+
+.and-scenario-list {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin: 0.9rem 0 0;
+  border-top: 1px solid var(--n-line);
+  padding: 0;
+  list-style: none;
+}
+
+.and-scenario-list li {
+  display: grid;
+  gap: 0.3rem;
+  min-width: 0;
+  border-right: 1px solid var(--n-line);
+  padding: 0.75rem 0.7rem 0.15rem;
+}
+
+.and-scenario-list li:last-child {
+  border-right: 0;
+}
+
+.and-scenario-list span,
+.and-scenario-list small {
+  color: var(--n-ink-soft);
+  font-size: 0.64rem;
+  line-height: 1.25;
+}
+
+.and-scenario-list strong {
+  font-size: 0.86rem;
+  line-height: 1.2;
+}
+
+.and-plan {
+  margin-top: 1rem;
+  border-top: 1px solid var(--n-line);
+  border-bottom: 1px solid var(--n-line);
+  padding: 0.85rem 0;
+}
+
+.and-plan summary {
+  color: var(--n-ink);
+  font-size: 0.76rem;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.and-plan > p {
+  max-width: 42rem;
+  margin: 0.7rem 0 0;
+  color: var(--n-ink-soft);
+  font-size: 0.72rem;
+  line-height: 1.4;
+}
+
+.and-plan-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
+  gap: 0.6rem;
+  margin: 0.8rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.and-plan-list li {
+  display: grid;
+  gap: 0.25rem;
+  border-left: 2px solid var(--n-water);
+  padding-left: 0.65rem;
+}
+
+.and-plan-list span {
+  color: var(--n-ink-soft);
+  font-size: 0.64rem;
+}
+
+.and-plan-list strong {
+  font-size: 0.82rem;
+}
+
+.and-biology-note {
+  margin: 0.9rem 0 0;
+  color: var(--n-ink-soft);
+  font-size: 0.7rem;
+  line-height: 1.4;
+}
+
+.and-error {
+  padding: 0 1.35rem 1.25rem;
+  color: var(--n-danger);
+  font-size: 0.8rem;
+  line-height: 1.4;
+}
+
+.and-error:empty {
+  display: none;
+}
+
+@media (max-width: 760px) {
+  .and-topline,
+  .and-workspace {
+    grid-template-columns: 1fr;
+  }
+
+  .and-topline {
+    gap: 1.2rem;
+  }
+
+  .and-unit-switch {
+    width: 100%;
+  }
+
+  .and-unit-switch legend {
+    text-align: left;
+  }
+
+  .and-readings {
+    border-right: 0;
+    border-bottom: 1px solid var(--n-line);
+  }
+
+  .and-flow-scene {
+    grid-template-columns: minmax(9rem, 1fr) minmax(4rem, 0.7fr) 4rem;
+  }
+}
+
+@media (max-width: 520px) {
+  .and-surface {
+    border-radius: 1.3rem;
+  }
+
+  .and-topline,
+  .and-readings,
+  .and-decision {
+    padding: 1rem;
+  }
+
+  .and-reading-row {
+    grid-template-columns: 1.1rem minmax(0, 1fr) 4.8rem;
+  }
+
+  .and-reading-row em {
+    grid-column: 3;
+    grid-row: 2;
+    text-align: left;
+  }
+
+  .and-reading-row input {
+    grid-column: 3;
+    grid-row: 1;
+  }
+
+  .and-reading-copy {
+    grid-column: 2;
+    grid-row: 1 / span 2;
+  }
+
+  .and-flow-scene {
+    grid-template-columns: minmax(7rem, 1fr) minmax(3.5rem, 0.55fr) 3.7rem;
+    gap: 0.45rem;
+  }
+
+  .and-vessel-body {
+    height: 8.5rem;
+  }
+
+  .and-new-water-body {
+    width: 3rem;
+    height: 5.3rem;
+  }
+
+  .and-scenario-heading {
+    display: block;
+  }
+
+  .and-scenario-heading small {
+    display: block;
+    margin: 0.5rem 0 0 1.5rem;
+    text-align: left;
+  }
+
+  .and-scenario-choices,
+  .and-scenario-list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .and-scenario-list li:nth-child(2) {
+    border-right: 0;
+  }
+
+  .and-scenario-list li:nth-child(n + 3) {
+    border-top: 1px solid var(--n-line);
+  }
+}