/* Microtool pages. Layout and controls only — colour, type and the
   readability scrims come from app/shared/base.css. */

.t-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 1.6em;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--faint);
  margin-top: 1.2rem;
}

.t-subtitle {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(0.78rem, 1.5vw, 0.95rem);
  color: var(--dim);
  margin-top: 0.7rem;
}

/* ------------------------------------------------------- workspace + form */

/* An engineer changes a value, looks, changes it back. Input and result have
   to share one working area, so the result stays put while the form is
   edited rather than sitting a screen below it. */
.t-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: start;
  margin-top: clamp(1.6rem, 4vh, 2.6rem);
}

@media (max-width: 1080px) {
  .t-workspace { grid-template-columns: 1fr; }
}

.t-live { position: sticky; top: 4.5rem; }

/* The headline number scales to the viewport everywhere else; inside the
   sticky panel it has to scale to the panel, or "68.51 bar a" breaks across
   two lines. */
.t-live .t-primary { font-size: clamp(2rem, 3.5vw, 3.5rem); }

@media (max-width: 1080px) {
  .t-live { position: static; }
}

/* Grouping the fields by what they describe turns seven equal boxes into a
   model of a machine: nameplate, operating point, loss data, thermal. */
.t-group { border: 0; margin: 0 0 1.9rem; padding: 0; min-width: 0; }

.t-group legend {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--faint);
  padding: 0;
  margin-bottom: 0.2rem;
}

.t-group-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: clamp(1rem, 2.2vw, 1.8rem);
}

/* -------------------------------------------------------------- schematic */

/* The drawn schematics live in content/tools/<slug>.svg and carry the same
   data-schem hooks as the flow chain, so one paint routine serves both. */
/* The model belongs across the page, not squeezed into the input column: it
   describes the whole system, and at column width the labels crowd. Capped so
   the type inside it scales with the drawing rather than becoming a banner. */
.t-model { margin-top: clamp(1.4rem, 3.5vh, 2.2rem); }

.t-schem {
  width: 100%;
  max-width: 62rem;
  height: auto;
  display: block;
  overflow: visible;
}

.t-schem .s-line { stroke: rgba(255, 255, 255, 0.38); stroke-width: 1; fill: none; }
.t-schem .s-box { stroke: rgba(255, 255, 255, 0.6); stroke-width: 1; fill: none; }
.t-schem .s-node { fill: rgba(255, 255, 255, 0.9); }

.t-schem .s-val {
  fill: #fff;
  font-family: var(--display);
  font-size: 16px;
}

.t-schem .s-lab {
  fill: var(--faint);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ flow */

/* The chain a value travels, with the numbers live on it. Seven independent
   inputs read as a form; the same seven on a chain read as a model. */
.t-flow {
  list-style: none;
  max-width: 62rem;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem 0.6rem;
  margin: 0;
  padding: 0;
}

.t-flow-step {
  flex: 1 1 6rem;
  min-width: 0;
  border-top: 1px solid var(--line);
  padding-top: 0.6em;
}

.t-flow-step.is-result { border-top-color: var(--fg); }

.t-flow-step b {
  display: block;
  font-family: var(--display);
  font-size: 0.98rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.t-flow-step.is-result b { font-size: 1.15rem; }

.t-flow-step span {
  display: block;
  margin-top: 0.35em;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: 1.35;
}

.t-flow-link {
  flex: 0 0 auto;
  font-size: 0.75rem;
  align-self: center;
  color: var(--faint);
  font-size: 0.85rem;
  padding-top: 0.6em;
}

@media (max-width: 560px) {
  .t-flow-link { display: none; }
  .t-flow-step { flex: 1 1 45%; }
}

.t-try {
  font-size: 0.86rem;
  color: var(--dim);
  margin-bottom: 1.6rem;
}

.t-field { border-top: 1px solid var(--line); padding-top: 0.9em; }

.t-field label {
  display: block;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
}

.t-row { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.7em; }

.t-field input[type="number"],
.t-field select {
  font: inherit;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  padding: 0.5em 0.7em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.t-field input[type="number"] { width: 100%; min-width: 0; }
.t-field select { flex: 0 0 auto; }

.t-field input[type="number"]:focus-visible,
.t-field select:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

.t-field input.is-bad { border-color: #c66; }

/* the slider is the visual half of the input: type an exact figure, or drag
   to watch the marker travel along the curve */
.t-field input[type="range"] {
  width: 100%;
  margin-top: 0.9em;
  accent-color: var(--fg);
  background: transparent;
}

.t-help { color: var(--faint); font-size: 0.82rem; margin-top: 0.6em; line-height: 1.5; }

.t-errors {
  margin-top: 1.4rem;
  color: #e59a9a;
  font-size: 0.9rem;
}

/* --------------------------------------------------------------- results */

.t-live {
  border-top: 1px solid var(--fg);
  padding-top: 1.2em;
}

.t-result {
  margin-top: clamp(2rem, 6vh, 3.5rem);
  border-top: 1px solid var(--line);
  padding-top: 1.4em;
}

.t-live-list {
  list-style: none;
  margin-top: 1.6rem;
  display: grid;
  gap: 1rem;
}

.t-live-list li { border-top: 1px solid var(--line); padding-top: 0.6em; }

.t-live-list b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  line-height: 1.1;
}

.t-live-list span {
  display: block;
  margin-top: 0.35em;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.t-primary {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.95;
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  overflow-wrap: anywhere;
}

.t-primary-label {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--faint);
}

.t-note { color: var(--dim); font-size: 0.9rem; margin-top: 0.8em; max-width: 44rem; }

/* the model saying "not this case", as distinct from a bad entry above */
.t-warning {
  margin-top: 1.1em;
  border-left: 2px solid #d8b26a;
  padding-left: 1.1em;
  color: #e8d5a8;
  max-width: 44rem;
  line-height: 1.55;
}

.t-values {
  list-style: none;
  margin-top: 1.8rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.2rem 2rem;
}

.t-values li { border-top: 1px solid var(--line); padding-top: 0.7em; }

.t-values b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  line-height: 1.1;
}

.t-values span {
  display: block;
  margin-top: 0.4em;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ----------------------------------------------------------------- chart */

.t-chart { margin-top: clamp(2rem, 5vh, 3rem); }
.t-chart-svg { width: 100%; height: auto; display: block; }

.t-grid { stroke: rgba(255, 255, 255, 0.09); stroke-width: 1; }
.t-axis-line { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; }
.t-curve { fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 1.4; }
.t-node { fill: rgba(255, 255, 255, 0.85); }
.t-marker { fill: #fff; }
.t-marker-line { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; stroke-dasharray: 3 4; }

.t-axis {
  fill: var(--faint);
  font-family: var(--sans);
  font-size: 12px;
}

.t-axis-y { text-anchor: end; }
.t-axis-x { text-anchor: middle; }
.t-axis-title { text-anchor: middle; letter-spacing: 0.12em; text-transform: uppercase; font-size: 10px; }

/* --------------------------------------------------- method & assumptions */

.t-steps { list-style: none; counter-reset: step; margin-top: 1.4rem; max-width: 46rem; }

.t-steps li {
  counter-increment: step;
  border-left: 1px solid var(--line);
  padding-left: 1.3em;
  margin-bottom: 1.1em;
}

.t-steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--display);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--faint);
  margin-bottom: 0.35em;
}

.t-steps code {
  font-family: var(--sans);
  color: var(--dim);
  font-size: 0.94em;
}

.t-steps b { display: block; margin-top: 0.35em; }

.t-list { list-style: none; margin-top: 1.2rem; max-width: 46rem; }

.t-list li {
  border-top: 1px solid var(--line);
  padding: 0.75em 0;
  color: var(--dim);
  font-size: 0.94em;
  line-height: 1.6;
}

.t-scope {
  margin-top: 1.4rem;
  border-left: 1px solid var(--line);
  padding-left: 1.4em;
  color: var(--fg);
  max-width: 46rem;
  line-height: 1.6;
}

/* readability over the moving field, as on the rest of the site */
.t-model, .t-inputs, .t-result, .t-chart, .t-steps, .t-list, .t-scope, .t-meta, .t-examples {
  position: relative;
}

/* .t-live is deliberately absent above: it is sticky, which is already a
   positioned value, and re-declaring relative here would silently undo it. */

.t-inputs::before, .t-live::before, .t-result::before, .t-chart::before, .t-steps::before,
.t-list::before, .t-scope::before, .t-meta::before, .t-examples::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1.4rem -2rem;
  pointer-events: none;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 55%, transparent 99%);
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 55%, transparent 99%);
}

.t-examples { list-style: none; margin-top: 1.2rem; }
.t-examples li { border-top: 1px solid var(--line); padding: 0.8em 0; }
.t-examples a { display: inline-block; margin-top: 0.4em; }

/* -------------------------------------------------- interpretation & actions */

.t-interpret {
  margin-top: 1.1em;
  border-left: 1px solid var(--fg);
  padding-left: 1.1em;
  color: var(--fg);
  line-height: 1.55;
  font-size: 0.95rem;
}

.t-interpret:empty { display: none; }

.t-actions { margin-top: clamp(2rem, 5vh, 3rem); }

.t-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.2rem;
}

.t-action-row .sg-btn { cursor: pointer; font: inherit; }

.t-toast {
  position: fixed;
  left: 50%;
  bottom: 5.5rem;
  transform: translateX(-50%);
  z-index: 500;
  max-width: min(90vw, 34rem);
  padding: 0.8em 1.3em;
  border-radius: 2em;
  background: #fff;
  color: #000;
  font-size: 0.85rem;
  text-align: center;
  overflow-wrap: anywhere;
}

.t-production { margin-top: clamp(2.5rem, 7vh, 4.5rem); }

/* ------------------------------------------------------- folded reference */

/* Method and limitations stay in the markup — search engines index inside a
   details element — but they no longer compete with the result for the eye. */
.t-fold {
  margin-top: clamp(1.6rem, 4vh, 2.4rem);
  border-top: 1px solid var(--line);
  padding-top: 1em;
}

.t-fold summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.2rem;
}

.t-fold summary::-webkit-details-marker { display: none; }

.t-fold summary b {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--dim);
  font-weight: 500;
}

.t-fold[open] summary b { color: var(--faint); }
.t-fold summary:hover b { color: var(--fg); }
.t-fold summary:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }

.t-actions, .t-production, .t-fold { position: relative; }

.t-actions::before, .t-production::before, .t-fold::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1.4rem -2rem;
  pointer-events: none;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 55%, transparent 99%);
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 55%, transparent 99%);
}

/* ------------------------------------------------------------------ print */

/* What an engineer prints goes into a project folder and travels further than
   any share button, so it has to read as a document: one column, black on
   white, method and limitations included whether or not they were unfolded. */
@media print {
  #sg-field, .sg-bar, .t-chart, .t-actions, .t-production, .t-try, .t-flow-link,
  .sg-foot nav, .sg-consent, input[type="range"] { display: none !important; }

  /* the site paints text shadows to stay readable over the moving field;
     on paper they are halos */
  *, *::before, *::after {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html, body { background: #fff !important; }
  .sg-main, .sg-wrap { padding: 0 !important; max-width: none !important; }

  .t-workspace { display: block !important; }
  .t-live { position: static !important; border-top: 2px solid #000 !important;
            margin-top: 1.5rem; padding-top: 0.8rem; }
  .t-primary { font-size: 2.2rem !important; }
  .sg-display { font-size: 1.5rem !important; }
  .t-subtitle, .t-meta { font-size: 0.7rem !important; }

  .t-group-fields { display: block !important; }
  .t-field { border-top: 1px solid #bbb !important; padding-top: 0.5em; margin-bottom: 0.6em; }
  .t-row { justify-content: flex-start; }
  .t-field input[type="number"] { width: 9rem !important; flex: 0 0 auto !important; }
  .t-field input, .t-field select {
    border: 1px solid #999 !important;
    padding: 0.2em 0.4em !important;
  }
  .t-help { font-size: 0.72rem !important; }

  /* a closed details element hides its content through the shadow slot, which
     no colour rule reaches — the script opens them before the dialog appears */
  details.t-fold { border-top: 1px solid #000 !important; }
  .t-fold summary { list-style: none; }

  /* the schematic is drawn in white strokes; on paper that is nothing at all */
  .t-schem .s-line, .t-schem .s-box { stroke: #000 !important; }
  .t-schem .s-node, .t-schem .s-val { fill: #000 !important; }
  .t-schem .s-lab { fill: #555 !important; }
  .t-schem { max-width: 150mm; margin-bottom: 1.2rem; }

  .t-values, .t-live-list { display: block !important; }
  .t-values li, .t-live-list li { border-top: 1px solid #ddd !important; padding: 0.35em 0 !important; }
  .t-values b, .t-live-list b { display: inline !important; font-size: 1rem !important; }
  .t-values span, .t-live-list span { display: inline !important; margin-left: 0.6em; }

  .t-print-mark { display: block !important; border-top: 1px solid #000; margin-top: 1.5rem;
                  padding-top: 0.6rem; font-size: 0.72rem; }

  section, .t-fold, .t-field { break-inside: avoid; }
  @page { margin: 14mm; }
}

.t-print-mark { display: none; }