/* GENERATED FILE -- do not edit.
   tools/gen_screens.py writes this from tools/screens/detail.css.
   Edit that source and re-run the generator. */

/* --------------------------------------------------------------- product sheet */
.a-table { border: var(--u) solid var(--appline); }

.a-thead,
.a-trow {
  display: grid;
  grid-template-columns: 1.3fr 1fr 0.7fr 0.5fr;
  gap: calc(6 * var(--u));
}

.a-thead {
  padding: calc(8 * var(--u)) calc(11 * var(--u));
  background: var(--appaccsoft);
  font-size: calc(9 * var(--u));
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--appmut);
}

.a-trow {
  padding: calc(9 * var(--u)) calc(11 * var(--u));
  border-top: var(--u) solid var(--appline);
  font-size: calc(12 * var(--u));
  line-height: 1;
  color: var(--appink);
}

.a-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  background: var(--appcard);
  border: var(--u) solid var(--appline);
}

.a-alt-n {
  font-size: calc(12 * var(--u));
  font-weight: 500;
  line-height: 1;
  color: var(--appink);
}

.a-alt-s {
  font-size: calc(10 * var(--u));
  font-weight: 500;
  line-height: 1;
  color: var(--appgrn);
}

/* --------------------------------------------------------------- journal */
.a-jhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.a-jdate {
  font-size: calc(12 * var(--u));
  font-weight: 600;
  line-height: 1;
  color: var(--appink);
}

.a-pill {
  display: inline-flex;
  align-items: center;
  font-size: calc(10 * var(--u));
  font-weight: 500;
  line-height: 1;
  padding: calc(5 * var(--u)) calc(8 * var(--u));
}

.a-pill.is-ready {
  color: var(--appgrn);
  background: color-mix(in srgb, var(--appgrn) 13%, transparent);
}

.a-pill.is-wait {
  color: var(--appacc);
  background: var(--appaccsoft);
}

.a-jrow .a-mut { margin-top: calc(9 * var(--u)); line-height: 1; }

.a-jprod {
  margin-top: calc(5 * var(--u));
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: calc(14 * var(--u));
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--appink);
}

.a-jrow .a-jprod + .a-mut { margin-top: calc(4 * var(--u)); }

.a-export { margin: calc(10 * var(--u)) calc(14 * var(--u)) 0; }

.a-export .a-lbl { font-size: calc(11 * var(--u)); }

.a-btns {
  margin-top: calc(9 * var(--u));
  display: flex;
  gap: calc(8 * var(--u));
}

.a-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(9 * var(--u));
  border: var(--u) solid var(--appline);
  font-size: calc(12 * var(--u));
  font-weight: 500;
  line-height: 1;
  color: var(--appink);
}

/* --------------------------------------------------------------- dose calculator */
.a-cprod {
  margin-top: calc(5 * var(--u));
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: calc(16 * var(--u));
  font-weight: 600;
  line-height: 1;
  color: var(--appink);
}

.a-cprod + .a-mut {
  margin-top: calc(5 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: 1;
}

.a-seg {
  display: flex;
  border: var(--u) solid var(--appline);
}

.a-seg-o {
  flex: 1;
  text-align: center;
  padding: calc(9 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: 1;
  color: var(--appmut);
}

.a-seg-o.is-on {
  font-weight: 500;
  background: var(--appfill);
  color: var(--onacc);
}

.a-fval {
  margin-top: calc(5 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(2 * var(--u));
  font-size: calc(18 * var(--u));
  font-weight: 500;
  line-height: 1;
  color: var(--appink);
}

.a-fval .a-caret { height: calc(18 * var(--u)); }

.a-result {
  padding: calc(15 * var(--u));
  background: var(--appfill);
  color: var(--onacc);
}

.a-rlabel {
  font-size: calc(10 * var(--u));
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--onacc);
  opacity: 0.72;
}

.a-rval {
  margin-top: calc(7 * var(--u));
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: calc(38 * var(--u));
  font-weight: 600;
  line-height: 1;
  color: var(--onacc);
}

.a-runit {
  font-size: calc(19 * var(--u));
  opacity: 0.75;
}

.a-rnote {
  margin-top: calc(6 * var(--u));
  font-size: calc(11 * var(--u));
  line-height: 1.4;
  color: var(--onacc);
  opacity: 0.74;
}

.a-hist {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(11 * var(--u)) calc(13 * var(--u));
}

.a-hist-n {
  display: block;
  font-size: calc(12 * var(--u));
  font-weight: 600;
  line-height: 1;
  color: var(--appink);
}

.a-hist .a-item-s { margin-top: calc(4 * var(--u)); line-height: 1; }

.a-hist-v {
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: calc(14 * var(--u));
  font-weight: 600;
  line-height: 1;
  color: var(--appacc);
}

/* --------------------------------------------------------------- settings */
.a-set {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(12 * var(--u)) calc(13 * var(--u));
}

.a-set-k {
  font-size: calc(12 * var(--u));
  line-height: 1;
  color: var(--appink);
}

.a-set-v {
  font-size: calc(11 * var(--u));
  font-weight: 500;
  line-height: 1;
  color: var(--appmut);
}

.a-set-h {
  margin-top: calc(6 * var(--u));
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: calc(14 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--appink);
}

.a-set-h + .a-mut { margin-top: calc(3 * var(--u)); }

.a-syncbtn {
  margin-top: calc(10 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(7 * var(--u));
  padding: calc(9 * var(--u));
  background: var(--appfill);
  color: var(--onacc);
  font-size: calc(12 * var(--u));
  font-weight: 500;
  line-height: 1;
}

.a-syncbtn .a-ico {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}

.a-toggle {
  position: relative;
  display: inline-block;
  width: calc(34 * var(--u));
  height: calc(19 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--appgrn);
}

.a-toggle-k {
  position: absolute;
  right: calc(2 * var(--u));
  top: calc(2 * var(--u));
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  border-radius: 50%;
  background: var(--appcard);
}

.a-danger {
  padding: calc(12 * var(--u)) calc(13 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: 1;
  color: var(--warn);
}

/* --------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  .a-caret { animation: none; }
}