/* The carbon calculator only. Loaded after base.css and answers.css, which hold
   the tokens and the answer page layout. Nothing here appears on another page.
   Everything that folds uses <details>, so the whole text is in the HTML source
   whether it is open or shut, and no crawler loses any of it. */

.calc {
  margin: 2.5rem 0 3rem;
  padding: 1.6rem 1.7rem 2rem;
  background:
    linear-gradient(180deg, #151c2a 0%, #101725 45%, #0b1220 100%) padding-box,
    linear-gradient(180deg, #3a4560 0%, #262f42 38%, #171d2b 72%, #2b3448 100%) border-box;
  border: 8px solid transparent;
  border-radius: 28px;
  box-shadow: 0 0 0 1px #05080f,
              inset 0 0 0 1px rgba(0, 0, 0, 0.8),
              inset 0 2px 0 rgba(255, 255, 255, 0.05),
              inset 0 -3px 12px rgba(0, 0, 0, 0.65),
              0 4px 0 rgba(0, 0, 0, 0.55),
              0 28px 60px rgba(0, 0, 0, 0.6);
}

.calc-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 1.3rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}

.calc-brand span {
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #6f7480;
}

/* Sector and headcount, the two fields every line will be worked out from.
   Enabled, but nothing is calculated from them yet. */
.calc-setup {
  display: inline-flex;
  flex-direction: column;
  gap: 0.45rem;
  max-width: 100%;
  margin: 0 1.5rem 1.5rem 0;
  vertical-align: top;
}

.calc-setup select,
.calc-setup input {
  max-width: 100%;
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--text);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 3px;
  padding: 0.5rem 0.6rem;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}

.calc-setup input { width: 6.5rem; text-align: right; }

/* Space between the digits and the up-down arrows Chrome and Safari draw at
   the right of a number field. */
.calc-setup input::-webkit-inner-spin-button { margin-left: 0.6rem; }

.calc-setup option { background: var(--bg-mid); color: var(--text); }

.calc-notice {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--accent2);
  border: 1px solid rgba(200, 169, 110, 0.35);
  background: rgba(200, 169, 110, 0.07);
  border-radius: 3px;
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.75rem;
}

.calc-headline {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  align-items: flex-start;
  justify-content: space-between;
}

.calc-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin: 0;
}

.calc-figure {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.9rem;
  margin: 0.6rem 0 0;
  padding: 0.9rem 1.2rem 1rem;
  background: #050a10;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8);
  min-width: 15rem;
}

.calc-total {
  font-family: var(--display);
  font-size: clamp(3.4rem, 10vw, 5rem);
  line-height: 0.95;
  color: var(--text);
  text-shadow: 0 0 18px rgba(232, 228, 216, 0.25);
}

.calc-unit {
  font-family: var(--mono);
  font-size: 1.1rem;
  color: var(--text);
}

.calc-unit span {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
}

.works-icon {
  flex: none;
  display: inline-block;
  vertical-align: -0.2em;
}

.calc-info {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  white-space: nowrap;
  margin-left: 0.5em;
}

.calc-info svg {
  flex: none;
}

.calc-headline > div { flex: 1 1 18rem; }

.calc-assumes {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.2rem 1.4rem;
  flex: 0 1 20rem;
  min-width: 16rem;
}

.calc-assumes ul {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
}

.calc-assumes li {
  font-size: 0.9rem;
  margin: 0 0 0.6rem;
}

.calc-bar {
  display: flex;
  height: 1.5rem;
  gap: 3px;
  margin: 2.25rem 0 0;
  padding: 4px;
  background: #050a10;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 4px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.calc-bar span { border-radius: 1px; }

.calc-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
  margin: 0.75rem 0 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: #6f7480;
}

.calc-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.calc-swatch {
  width: 11px;
  height: 11px;
  flex: none;
}

.calc-hatch {
  background-image: repeating-linear-gradient(45deg,
    rgba(232, 228, 216, 0.55) 0 2px, rgba(232, 228, 216, 0) 2px 5px);
}

.calc-lines-head {
  padding: 0 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  margin: 2.5rem 0 0.9rem;
}

/* Type scale inside the calculator: nameplate 1.3rem in Space Mono capitals,
   the one place capitals are used; section heading 1.3rem and row names
   1.1rem in Nunito bold; labels, units and small print 0.75rem Space Mono in
   sentence case. Space Mono otherwise means a figure. */
.calc-lines-head .calc-label {
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--text);
}

.calc-assumes > summary {
  text-transform: none;
  letter-spacing: 0.02em;
}

.calc-headline > div > .calc-label {
  font-family: var(--sans);
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--text);
}

/* The note belongs to the heading above it: directly beneath, smaller, in
   sentence case, and joined to it by a rule down its left edge. */
.calc-fields-note {
  padding-left: 0.75rem;
  border-left: 2px solid rgba(200, 169, 110, 0.45);
}

.calc-fields-note > summary {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: none;
}

.calc-fields-note p {
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.7;
  color: #6f7480;
  max-width: 46ch;
  margin: 0.7rem 0 0;
}

.calc-lines {
  list-style: none;
  margin: 0;
  padding: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-radius: 10px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.6);
}

.calc-line {
  margin: 0;
  padding: 1rem 1.2rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10),
              0 2px 3px rgba(0, 0, 0, 0.45);
}

.calc-line.is-estimate {
  padding-left: 1.9rem;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(232, 228, 216, 0.30) 0 3px, rgba(232, 228, 216, 0) 3px 7px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
  background-size: 7px 100%, auto;
  background-repeat: no-repeat, repeat;
  background-position: left top, left top;
}

/* icon | name and marker | entry field | result */
.calc-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  gap: 0.7rem 1.3rem;
  align-items: center;
}

.calc-icon { flex: none; }

.calc-name {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
}

.calc-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 2px;
  padding: 0.25rem 0.5rem;
}

/* The entry field each line will get. Disabled until its sprint builds it,
   and holding the figure the published average assumes. */
.calc-field {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  justify-self: end;
}

.calc-field input {
  width: 6.5rem;
  font-family: var(--mono);
  font-size: 0.95rem;
  text-align: right;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.28);
  border: 1px dashed rgba(255, 255, 255, 0.20);
  border-radius: 3px;
  padding: 0.5rem 0.6rem;
  cursor: not-allowed;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
  opacity: 1;
  -webkit-text-fill-color: var(--muted);
}

.calc-uom {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: #6f7480;
  white-space: nowrap;
  width: 5.5rem;
}

/* A unit label too long for one line, on a field that is fixed. */
.calc-uom-fixed { white-space: normal; line-height: 1.35; }

.calc-val {
  font-family: var(--mono);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: right;
  min-width: 5.5rem;
  padding: 0.45rem 0.7rem;
  background: #050a10;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 4px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7);
}

.calc-valunit {
  display: block;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* Per line explanation, folded. */
.calc-why {
  margin: 0.4rem 0 0 calc(34px + 1.3rem);
}

.calc-why > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  list-style: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: #6f7480;
  padding: 0.4rem 0.7rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 1px 2px rgba(0, 0, 0, 0.4);
}

.calc-why > summary:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.calc-why > summary::-webkit-details-marker { display: none; }

.calc-why > summary::after {
  content: "\25BE";
  color: var(--accent2);
  transition: transform 0.15s ease;
}

.calc-why[open] > summary::after { transform: rotate(180deg); }

.calc-why > summary:hover .calc-whytext { color: var(--text); }

.calc-why > summary:hover .calc-chip {
  border-color: rgba(200, 169, 110, 0.5);
}

.calc-why p {
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0.4rem 0 0;
  max-width: 62ch;
}

/* Scope, conversion factor and footnote, always visible under the field and
   result, aligned with the row name. The calculator's label size, in the
   muted grey that keeps small text readable on the dark row. */
.calc-src {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin: 0.7rem 0 0 calc(34px + 1.3rem);
  max-width: 62ch;
}

/* Folded page sections. The heading is the control; nothing is removed from
   the document, only from view. */
.fold {
  border-top: 1px solid var(--border);
}

.fold + .fold { border-top: 1px solid var(--border); }

.fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
  cursor: pointer;
}

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

.fold > summary::after {
  content: "\25BE";
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--accent2);
  flex: none;
  transition: transform 0.15s ease;
}

.fold[open] > summary::after { transform: rotate(180deg); }

.fold > summary h2,
.fold > summary h3 {
  margin: 1.15rem 0;
}

.fold > summary:hover h2 { color: var(--text); }
.fold > summary:hover h3 { color: var(--accent2); }

.fold > p,
.fold > table,
.fold > ul {
  margin-bottom: 1.5rem;
}

.fold-q > summary h3 { margin: 0.95rem 0; }

/* Numbered sources, and the terms used above. */
abbr[title] {
  text-decoration: underline dotted rgba(232, 228, 216, 0.5);
  text-underline-offset: 0.25em;
  cursor: help;
}

.notes-intro {
  font-size: 0.9rem;
  max-width: 62ch;
}

.notes-list {
  font-size: 0.88rem;
  margin-left: 1.5rem;
}

.notes-list li {
  margin-bottom: 0.7rem;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
}

.notes-list li:target {
  background: rgba(200, 169, 110, 0.12);
}

.notes-back {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.notes-defs {
  margin: 1.5rem 0 2rem;
}

.notes-defs dt:target,
.notes-defs dt:target + dd {
  background: rgba(200, 169, 110, 0.12);
}

.notes-defs dt {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-top: 1.1rem;
}

.notes-defs dd {
  margin: 0.35rem 0 0;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-size: 0.9rem;
  line-height: 1.55;
  max-width: 62ch;
}

@media (max-width: 44rem) {
  .calc {
    padding: 1.1rem 1rem 1.5rem;
    border-width: 5px;
    border-radius: 20px;
  }
  .calc-figure { min-width: 0; width: 100%; }
  /* Icon, name and result share the first row, and the entry field takes
     the whole second row, so the field never runs under the result. */
  .calc-head {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    row-gap: 0.9rem;
  }
  .calc-icon { grid-column: 1; grid-row: 1; }
  .calc-name { grid-column: 2; grid-row: 1; }
  .calc-val { grid-column: 3; grid-row: 1; white-space: nowrap; }
  .calc-field {
    grid-column: 2 / -1;
    grid-row: 2;
    justify-self: start;
    flex-wrap: wrap;
  }
  .calc-why { margin-left: 0; }
  .calc-why p { margin-left: 0; }
  .calc-src { margin-left: 0; }
}

/* Phones: the name takes the whole first row, and the entry field and the
   result share the second, so neither runs under the other. */
@media (max-width: 34rem) {
  /* The explanation button loses its box: the chip, then the label with the
     arrow on its last word, so a wrapped label reads as one line of text. */
  .calc-why > summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    letter-spacing: 0.06em;
  }
  .calc-why > summary::after { content: none; }
  .calc-whytext::after {
    content: " \25BE";
    color: var(--accent2);
  }
  .calc-why[open] .calc-whytext::after { content: " \25B4"; }
  .calc-head { column-gap: 0.8rem; }
  .calc-name { grid-column: 2 / -1; grid-row: 1; }
  .calc-field { grid-column: 1 / 3; grid-row: 2; }
  .calc-val { grid-column: 3; grid-row: 2; min-width: 4.5rem; }
  .calc-uom { width: auto; }
  .calc-field input { width: 5.5rem; }
}

/* The smallest phones: too narrow for field and result side by side, so the
   result takes a row of its own. */
@media (max-width: 22rem) {
  .calc-field { grid-column: 1 / -1; }
  .calc-val { grid-column: 1 / -1; grid-row: 3; justify-self: end; }
}

/* Terms that link down to their definition. Tapping works the same as
   hovering, which a title attribute on its own does not. */
.calc-src a,
.notes-list a,
.calc-unit a {
  color: inherit;
  text-decoration: underline dotted rgba(232, 228, 216, 0.5);
  text-underline-offset: 0.25em;
}

.calc-src a:hover,
.notes-list a:hover,
.calc-unit a:hover { color: var(--accent); }

.notes-back {
  color: var(--accent);
  text-decoration: none;
}