/*
 * The kitchen order page, in the look of the Valio Aimo web shop (pikatukku.valioaimo.fi):
 * petrol #005670, lime band #ecf6bc, mist #f2f6f8, line #dee4e6, condensed headlines, pill chips.
 *
 * It is a working tool, not a shop: three steps like a checkout (recipes, stock, order), compact tables,
 * the signing steps always on the left, and Aimo Personal Assistant on the right.
 *
 * Fonts. The shop uses "National 2 Compressed" (headlines, tags, buttons) and "Matter" (text).
 * Both are commercial fonts we have no licence for, so they are named first and the page
 * falls back to the closest open fonts stored in fonts/ (no internet needed):
 * Sofia Sans Extra Condensed and Figtree.
 */

@font-face {
  font-family: "Sofia Sans Extra Condensed";
  src: url("fonts/sofia-sans-extra-condensed.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --petrol: #005670;
  --petrol-deep: #003747;
  --lime-band: #ecf6bc;
  --lime: #c0e021;
  --mist: #f2f6f8;
  --line: #dee4e6;
  --ink: #14293a;
  --grey: #5d6670;

  --done: #256f3a;
  --done-soft: #f0fbe4;
  --waiting: #9a4300;
  --waiting-soft: #fff5df;
  --refused: #aa0808;
  --refused-soft: #fff1f1;

  --focus: #1f3a93;

  --font-display: "National 2 Compressed", "National2Compressed", "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --font-text: "Matter", "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --side: 48px;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 17px;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-text);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ol,
ul,
dl,
dd {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

button:disabled {
  cursor: default;
}

input {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.site__top :focus-visible,
.demo :focus-visible {
  outline-color: #fff;
}

.wrap {
  width: 100%;
  max-width: 1880px;
  margin: 0 auto;
  padding: 0 var(--side);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.display {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--petrol);
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.85em;
}

.muted {
  color: var(--grey);
}

.icon {
  flex: none;
  vertical-align: -4px;
}

/* ---------- Header ---------- */

.site__top {
  background: var(--petrol);
  color: #fff;
}

.site__top .wrap {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.account {
  position: relative;
}

.account__btn {
  min-height: 36px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
}

.account__btn:hover,
.account__btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.14);
}

.account__chevron {
  transition: transform 0.15s ease;
}

.account__btn[aria-expanded="true"] .account__chevron {
  transform: rotate(180deg);
}

.account__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 10;
  min-width: 260px;
  padding: 8px;
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--line);
}

.account__who {
  padding: 10px 12px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--grey);
}

.account__who strong {
  display: block;
  font-size: 0.95rem;
  color: var(--petrol);
}

.account__item {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--petrol);
  text-align: left;
}

.account__item:hover {
  background: var(--mist);
}

.site__band {
  background: var(--lime-band);
}

.site__band .wrap {
  height: 76px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.logo {
  flex: none;
  display: block;
  border-radius: 4px;
}

.logo img {
  display: block;
  height: 40px;
  width: auto;
}

.band__title {
  padding-left: 28px;
  border-left: 2px solid rgba(0, 86, 112, 0.25);
  font-size: 2.1rem;
  line-height: 1;
  white-space: nowrap;
}

/* The dates to cook for. The first one is the date that matters: the goods must be there. */
.planning {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.needby {
  padding: 6px 16px 7px;
  border-radius: 6px;
  background: var(--lime);
  line-height: 1.05;
}

.needby span {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--petrol-deep);
}

.needby b {
  font-size: 1.7rem;
  color: var(--petrol-deep);
  white-space: nowrap;
}

.days {
  display: flex;
  gap: 8px;
}

.day {
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 6px;
  background: #fff;
}

.day__date {
  font-size: 1.5rem;
  line-height: 1;
  white-space: nowrap;
}

.day__covers {
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--grey);
  white-space: nowrap;
}

.day__covers b {
  color: var(--ink);
}

.planning__src {
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--petrol-deep);
}

/* ---------- Under the header: who signs (left), the work (middle), the assistant (right) ---------- */

.shell {
  padding-top: 14px;
  padding-bottom: 12px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 350px;
  gap: 24px;
  align-items: start;
}

/* ---------- Who signs: a panel that stays on the left ---------- */

.trail {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  padding: 14px 14px 12px;
  border-radius: 8px;
  background: var(--mist);
  overflow: hidden auto;
}

/* While the signatures are checked, a band of light runs down the panel, like a scan. */
.trail::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 90px;
  background: linear-gradient(180deg, rgba(192, 224, 33, 0), rgba(192, 224, 33, 0.3), rgba(192, 224, 33, 0));
  opacity: 0;
  pointer-events: none;
}

.trail.is-running::after {
  opacity: 1;
  animation: scan 1.3s linear infinite;
}

@keyframes scan {
  from {
    transform: translateY(-90px);
  }
  to {
    transform: translateY(920px);
  }
}

.trail__title {
  font-size: 1.7rem;
  line-height: 1;
}

.limit {
  position: relative;
  margin-top: 10px;
  padding: 9px 12px 10px;
  border-radius: 6px;
  background: #fff;
}

.limit__label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey);
}

.limit__value {
  font-size: 1.75rem;
  line-height: 1.1;
}

.limit__value span {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 0.76rem;
  color: var(--grey);
}

.limit__text {
  font-size: 0.72rem;
  color: var(--grey);
}

.limit__btn {
  position: absolute;
  top: 8px;
  right: 8px;
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--mist);
  color: var(--petrol);
  font-weight: 700;
  font-size: 0.76rem;
}

.limit__btn:not(:disabled):hover {
  background: var(--lime-band);
}

.limit__btn:disabled {
  opacity: 0.5;
}

.steps {
  position: relative;
  margin-top: 14px;
}

.step {
  position: relative;
  padding-bottom: 7px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
}

/* The line from one step down to the next: grey, then petrol once the next step is signed. */
.step:not(:last-child)::before,
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 30px;
  bottom: 0;
  width: 2px;
  background: var(--line);
}

.step:not(:last-child)::after {
  background: var(--petrol);
  transform: scaleY(0);
  transform-origin: top;
}

.step--through::after {
  transform: scaleY(1) !important;
}

.step--link::after {
  animation: grow 0.3s ease-out both;
}

.step__dot {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--line);
  color: var(--grey);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
}

.step__dot .icon {
  width: 16px;
  height: 16px;
  vertical-align: 0;
}

.step__title {
  min-height: 22px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 8px;
  font-weight: 700;
  font-size: 0.84rem;
  line-height: 1.2;
  color: var(--grey);
}

/* The name of the step in the AP2 protocol, small, under the chef's words */
.step__term {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 10px;
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--grey);
}

.step__signer {
  padding: 1px 8px 2px;
  border-radius: 999px;
  background: var(--petrol);
  color: #fff;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
}

.step__detail {
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.72rem;
  line-height: 1.3;
}

.step__proof {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.62rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--done);
}

.step__proof .icon {
  width: 11px;
  height: 11px;
}

.step--done .step__dot {
  background: var(--petrol);
  box-shadow: none;
  color: #fff;
}

.step--done .step__title {
  color: var(--petrol);
}

.step--waiting .step__dot {
  background: var(--waiting);
  box-shadow: none;
  color: #fff;
  animation: pulse 1.4s ease-in-out infinite;
}

.step--waiting .step__title {
  color: var(--waiting);
}

.step--waiting .step__signer {
  background: var(--waiting);
}

.step--refused .step__dot {
  background: var(--refused);
  box-shadow: none;
  color: #fff;
}

.step--refused .step__title {
  color: var(--refused);
}

.step--refused .step__signer {
  background: var(--refused);
}

.step--skipped .step__detail {
  color: var(--grey);
}

/* The step that has just been signed: the dot is stamped, a ring goes out, the text slides in. */
.step--fresh .step__dot {
  animation: stamp 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
}

.step--fresh .step__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: ring 0.42s ease-out both;
}

.step--fresh .step__body {
  animation: slidein 0.32s ease-out both;
}

.step--refused.step--fresh .step__dot {
  animation: shake 0.4s ease-in-out both;
}

@keyframes stamp {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes ring {
  from {
    box-shadow: 0 0 0 0 rgba(0, 86, 112, 0.5);
  }
  to {
    box-shadow: 0 0 0 14px rgba(0, 86, 112, 0);
  }
}

@keyframes slidein {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
}

@keyframes grow {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

/* Under the steps: where the chain of signatures stands, in one line. */
.seal {
  margin-top: 2px;
  min-height: 44px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  background: #fff;
  color: var(--grey);
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 1.25;
}

.seal--running {
  color: var(--petrol);
}

.seal--running .icon {
  animation: pulse 0.9s ease-in-out infinite;
}

.seal--done {
  background: var(--done);
  color: #fff;
  animation: sealin 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}

.seal--waiting {
  background: var(--waiting-soft);
  color: var(--waiting);
  box-shadow: inset 0 0 0 2px var(--waiting);
}

.seal--refused {
  background: var(--refused);
  color: #fff;
  animation: sealin 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}

@keyframes sealin {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
}

/* ---------- The chef's three steps and the button: they stay at the top of the work area ---------- */

.work {
  min-width: 0;
}

.flow {
  position: sticky;
  top: 0;
  z-index: 5;
  margin-bottom: 12px;
  padding: 4px 0 8px;
  min-height: 62px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.flow__steps {
  display: flex;
  align-items: center;
}

.flow__steps li {
  display: flex;
  align-items: center;
}

/* The line between two steps */
.flow__steps li + li::before {
  content: "";
  width: 24px;
  height: 2px;
  margin: 0 4px;
  background: var(--line);
}

.flow__step {
  min-height: 50px;
  padding: 4px 14px 4px 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  text-align: left;
}

.flow__step:not(:disabled):hover {
  background: var(--mist);
}

.flow__n {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--line);
  color: var(--grey);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
}

.flow__text b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--grey);
}

.flow__text span {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--grey);
  white-space: nowrap;
}

.flow__step[aria-current="step"] {
  background: var(--mist);
}

.flow__step[aria-current="step"] .flow__n {
  border-color: var(--petrol);
  background: var(--petrol);
  color: #fff;
}

.flow__step[aria-current="step"] .flow__text b,
.flow__step.is-done .flow__text b {
  color: var(--petrol);
}

/* A confirmed step: a green tick and the time it was confirmed */
.flow__step.is-done .flow__n {
  border-color: var(--done);
  background: var(--done);
  color: #fff;
}

.flow__step.is-done .flow__text span {
  color: var(--done);
  font-weight: 700;
}

.flow__step:disabled {
  opacity: 0.6;
}

.flow__cta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.flow__cta .btn:not(.btn--go) {
  padding: 0 16px;
  font-size: 1.2rem;
}

.btn {
  min-height: 46px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 4px;
  background: var(--petrol);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn:hover {
  background: var(--petrol-deep);
}

/* The button that sends or signs the order: the shop's highlighted button, and bigger. */
.btn--go {
  min-height: 50px;
  padding: 0 28px;
  background: var(--lime);
  color: var(--petrol-deep);
  font-size: 1.4rem;
  box-shadow: 0 6px 18px -6px rgba(96, 120, 0, 0.7);
}

.btn--go:hover {
  background: #cfee2c;
}

.btn--quiet {
  background: #fff;
  color: var(--petrol);
  box-shadow: inset 0 0 0 2px var(--petrol);
}

.btn--quiet:hover {
  background: var(--mist);
}

/* Reject: always within reach at the top while a signature is asked, and never the loudest button. */
.btn--reject {
  background: #fff;
  color: var(--refused);
  box-shadow: inset 0 0 0 2px var(--refused);
}

.btn--reject:hover {
  background: var(--refused-soft);
}

.btn--wide {
  width: 100%;
  margin-top: 12px;
  justify-content: center;
}

.btn:disabled {
  opacity: 0.5;
  box-shadow: none;
}

.cta__status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--petrol);
  white-space: nowrap;
}

.cta__status--waiting_for_human {
  color: var(--waiting);
}
.cta__status--refused {
  color: var(--refused);
}
.cta__status--done {
  color: var(--done);
}

/* ---------- Work area ---------- */

.loading {
  color: var(--grey);
}

.problem {
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--refused-soft);
  font-size: 0.9rem;
}

.problem strong {
  color: var(--refused);
}

.head {
  margin-bottom: 10px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.head h2 {
  font-size: 2rem;
  line-height: 1.1;
}

.head__meta {
  font-size: 0.85rem;
  color: var(--grey);
}

.chips {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chip {
  min-height: 36px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--mist);
  color: var(--petrol);
  font-weight: 700;
  font-size: 0.85rem;
}

.chip span {
  color: var(--grey);
  font-weight: 400;
}

.chip[aria-pressed="true"] {
  background: var(--petrol);
  color: #fff;
}

.chip[aria-pressed="true"] span {
  color: #fff;
}

.link {
  min-height: 28px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--petrol);
  font-weight: 700;
  font-size: 0.84rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A line above a table that says where things stand: locked, changed, or to correct */
.note {
  margin-bottom: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  border-radius: 6px;
  background: var(--mist);
  color: var(--petrol-deep);
  font-size: 0.84rem;
}

.note .icon {
  width: 15px;
  height: 15px;
}

.note--refused {
  background: var(--refused-soft);
  color: var(--ink);
}

.head .note {
  margin-bottom: 0;
  padding: 4px 10px;
  align-self: center;
}

/* A number the chef can change in the stock table */
.field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.field__input {
  width: 78px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.field__input:not(:disabled):hover {
  border-color: var(--petrol);
}

.field__input:disabled {
  border-color: transparent;
  background: transparent;
  color: inherit;
}

.field__unit {
  width: 34px;
  text-align: left;
  font-size: 0.78rem;
  color: var(--grey);
}

.is-short .field__input[data-cell$="to_order"] {
  border-color: transparent;
  background: var(--lime-band);
  color: var(--petrol-deep);
  font-weight: 700;
}

.is-short .field__input[data-cell$="to_order"]:not(:disabled):hover {
  border-color: var(--petrol);
}

/* A number that is not the counted one any more: changed by the chef or by the assistant */
.field.is-changed .field__input {
  border-color: var(--petrol);
  box-shadow: inset 3px 0 0 var(--petrol);
  font-weight: 700;
}

/* Tables: compact, like a back-office tool */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.tbl th {
  padding: 7px 12px;
  background: var(--mist);
  color: var(--petrol);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.tbl td {
  padding: 5px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.tbl .num {
  text-align: right;
  white-space: nowrap;
}

.tbl--quote th,
.tbl--quote td {
  padding-left: 8px;
  padding-right: 8px;
}

.tbl--quote td:last-child {
  font-size: 0.8rem;
  color: var(--grey);
}

.tbl tfoot td {
  padding: 9px 12px;
  border-bottom: 0;
  background: var(--mist);
  font-weight: 700;
}

.tbl--stock td {
  height: 31px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.is-covered td {
  color: var(--grey);
}

.is-short td:first-child {
  font-weight: 700;
  box-shadow: inset 4px 0 0 var(--lime);
}

.short {
  padding: 2px 8px;
  border-radius: 2px;
  background: var(--lime-band);
  color: var(--petrol-deep);
}

.covered {
  font-size: 0.8rem;
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 1px;
  background: var(--lime-band);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tag--warn {
  background: var(--waiting-soft);
  color: var(--waiting);
}

/* Step 1: the list of recipes and, beside it, what goes into the chosen one */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.pick td {
  padding-top: 0;
  padding-bottom: 0;
}

.pick__btn {
  width: 100%;
  min-height: 60px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.pick__btn b {
  display: block;
  font-size: 1rem;
  color: var(--petrol);
}

.pick__btn span {
  display: block;
  font-size: 0.8rem;
  color: var(--grey);
}

.pick:hover td {
  background: var(--mist);
}

.pick.is-chosen td {
  background: var(--lime-band);
}

.panel {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.panel__title {
  padding: 12px 14px;
  font-size: 1.05rem;
  color: var(--petrol);
}

.tbl--tight td {
  padding-top: 4px;
  padding-bottom: 4px;
}

.panel .tbl tr:last-child td {
  border-bottom: 0;
}

/* Step 3: the quote on the left, what was decided about it on the right */
.order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 20px;
  align-items: start;
}

.order__side {
  display: grid;
  gap: 12px;
}

.working {
  margin-top: 14px;
  color: var(--grey);
  font-size: 0.9rem;
}

.card {
  padding: 14px 16px 15px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--petrol);
  border-radius: 6px;
  background: #fff;
}

.card--fresh {
  animation: arrive 0.3s ease both;
}

@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.card--human {
  border-left-color: var(--waiting);
}
.card--deny {
  border-left-color: var(--refused);
}
.card--done {
  border-left-color: var(--done);
}

.card__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey);
}

.card__label--gap {
  margin-top: 12px;
}

.card__lead {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.98rem;
}

.card--done .card__lead {
  color: var(--done);
}

.card__note {
  margin-top: 6px;
  font-size: 0.85rem;
}

.badge {
  flex: none;
  padding: 2px 10px;
  border-radius: 2px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge--auto {
  background: var(--done-soft);
  color: var(--done);
}
.badge--human {
  background: var(--waiting-soft);
  color: var(--waiting);
}
.badge--deny {
  background: var(--refused-soft);
  color: var(--refused);
}

.reasons {
  margin-top: 4px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--waiting);
}

.versus {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.versus__side {
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--mist);
}

.versus__name {
  margin: 2px 0 6px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--petrol);
}

.facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 12px;
  font-size: 0.8rem;
}

.facts dt {
  color: var(--grey);
}

.card--done .facts {
  margin-top: 8px;
}

.judges {
  margin-top: 4px;
  display: grid;
  gap: 4px;
}

.judge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 44px;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
}

.judge__bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--line);
}

.judge__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: var(--waiting);
}

.judge__fill--auto {
  background: var(--done);
}

/* The threshold above which the agent may sign alone */
.judge__mark {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--ink);
}

.judge__p {
  text-align: right;
  font-weight: 700;
}

.sign {
  margin-top: 12px;
  padding-top: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid var(--line);
}

.sign__deadline {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--waiting);
}

.sign__deadline .icon {
  width: 16px;
  height: 16px;
}

.sign__done {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--refused);
}

.sign__done--approved {
  color: var(--done);
}

.attacks {
  margin-top: 6px;
  display: grid;
  gap: 8px;
}

.attack {
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--refused-soft);
}

.attack__title {
  display: flex;
  gap: 6px;
  font-weight: 700;
  font-size: 0.9rem;
}

.attack__title .icon {
  color: var(--refused);
}

.attack__status {
  margin: 2px 0 0 26px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--refused);
}

.attack--accepted {
  background: var(--refused);
  color: #fff;
}

.attack--accepted .attack__status,
.attack--accepted .icon {
  color: #fff;
}

.attack__problems {
  margin: 2px 0 0 26px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--grey);
  overflow-wrap: anywhere;
}

/* The safety checks: one plain line for each rule of the harness */
.checks {
  margin-top: 8px;
}

.check {
  padding: 4px 0;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
}

.check .icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  vertical-align: 0;
  color: var(--done);
}

.check__value {
  margin-left: 8px;
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--grey);
}

.check__out {
  padding-top: 2px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--done);
}

.check--human {
  font-weight: 700;
}

.check--human .icon,
.check--human .check__out {
  color: var(--waiting);
}

.check--deny {
  font-weight: 700;
}

.passed {
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
}

.passed summary {
  padding: 6px 0;
  color: var(--done);
  font-weight: 700;
  cursor: pointer;
}

.check--deny .icon,
.check--deny .check__out {
  color: var(--refused);
}

/* A substitute: what was asked, what Valio proposes, and the three things to look at. The rest is behind the switch. */
.swap {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
}

.swap p {
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--mist);
  color: var(--petrol);
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.25;
}

.swap p .card__label {
  display: block;
  margin-bottom: 2px;
}

.swap p.swap__to {
  background: var(--lime-band);
}

.swap__arrow {
  align-self: center;
  color: var(--grey);
}

.keys {
  margin-top: 8px;
  display: grid;
  gap: 4px;
  font-size: 0.84rem;
}

.key {
  padding-left: 22px;
  position: relative;
}

.key .icon {
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  vertical-align: 0;
  color: var(--done);
}

.key--human .icon {
  color: var(--waiting);
}

.toggle {
  margin-top: 10px;
  min-height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: none;
  color: var(--petrol);
  font-weight: 700;
  font-size: 0.82rem;
}

.toggle__track {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #b9c2c7;
}

.toggle__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.toggle[aria-checked="true"] .toggle__track {
  background: var(--petrol);
}

.toggle[aria-checked="true"] .toggle__knob {
  left: 18px;
}

.attack__more {
  margin: 2px 0 0 26px;
  font-size: 0.74rem;
}

.attack__more summary {
  color: var(--grey);
  cursor: pointer;
}

.attack__more .attack__problems {
  margin-left: 0;
}

/* ---------- Right column: the week's menu (with the recipes only) and Aimo Personal Assistant ---------- */

.side {
  position: sticky;
  top: 12px;
  height: calc(100vh - 182px);
  min-height: 440px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.side__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.4rem;
  line-height: 1;
}

.menu {
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--petrol);
  color: #fff;
}

.menu .side__title {
  color: #fff;
}

.menu__list {
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 700;
}

.menu__list li {
  padding: 3px 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: baseline;
}

.menu__course {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--lime);
}

.agent {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.agent .side__title {
  padding: 12px 16px;
  background: var(--mist);
}

/* Is the assistant's service there? */
.dot {
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-radius: 50%;
  background: #b5bcc2;
}

.dot--on {
  background: #3fa35a;
}

.talk {
  flex: 1;
  min-height: 0;
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.say {
  max-width: 92%;
  padding: 8px 12px 9px;
  border-radius: 14px 14px 14px 4px;
  background: var(--mist);
  font-size: 0.84rem;
}

.say:last-child {
  animation: arrive 0.25s ease both;
}

.say__who {
  display: block;
  margin-bottom: 1px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--petrol);
}

.say__proof {
  display: block;
  margin-top: 3px;
  color: var(--grey);
  font-size: 0.68rem;
}

/* What really changed in the stock table after the assistant answered: written by the page, not by the assistant */
.say__change {
  margin-top: 5px;
  padding-top: 5px;
  display: flex;
  gap: 5px;
  border-top: 1px solid rgba(0, 86, 112, 0.18);
  color: var(--petrol);
  font-size: 0.74rem;
  font-weight: 700;
}

.say__change .icon {
  width: 13px;
  height: 13px;
  margin-top: 2px;
  vertical-align: 0;
}

.say--chef {
  align-self: flex-end;
  border-radius: 14px 14px 4px 14px;
  background: var(--petrol);
  color: #fff;
}

.say--chef .say__who,
.say--chef .say__proof {
  color: rgba(255, 255, 255, 0.85);
}

.say--waiting {
  background: var(--waiting-soft);
}
.say--refused {
  background: var(--refused-soft);
}

.say__dots {
  display: inline-flex;
  gap: 4px;
  padding: 4px 0;
}

.say__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--petrol);
  animation: blink 1s infinite ease-in-out;
}

.say__dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.say__dots i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes blink {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
}

.ask {
  padding: 10px 12px 6px;
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--line);
}

.ask__text {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.86rem;
}

.ask__text:disabled {
  background: var(--mist);
}

.ask__send {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--petrol);
  color: #fff;
}

.ask__send .icon {
  vertical-align: 0;
}

.ask__send:disabled {
  opacity: 0.4;
}

.ask__note {
  padding: 0 16px 10px;
  font-size: 0.68rem;
  color: var(--grey);
}

/* ---------- The window that asks before a signature, and the short confirmation ---------- */

.dialog {
  width: min(480px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(0, 30, 40, 0.35);
}

.dialog::backdrop {
  background: rgba(0, 40, 52, 0.55);
}

.dialog[open] {
  animation: arrive 0.2s ease both;
}

.dialog__box {
  padding: 22px 24px 20px;
}

.dialog__title {
  font-size: 2.1rem;
  line-height: 1.05;
}

.dialog__body {
  margin-top: 10px;
  display: grid;
  gap: 10px;
  font-size: 0.9rem;
}

.dialog__lines {
  max-height: 176px;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow-y: auto;
  font-size: 0.84rem;
}

.dialog__lines li {
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.dialog__lines li + li {
  border-top: 1px solid var(--line);
}

.dialog__lines b {
  white-space: nowrap;
}

.dialog__facts {
  font-size: 0.88rem;
}

.dialog__field {
  display: grid;
  gap: 4px;
  font-weight: 700;
  font-size: 0.84rem;
}

.dialog__field input {
  height: 46px;
  padding: 0 12px;
  border: 2px solid var(--petrol);
  border-radius: 6px;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

.dialog__error {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--refused-soft);
  color: var(--refused);
  font-size: 0.84rem;
  font-weight: 700;
}

.dialog__actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.dialog .btn--reject {
  background: var(--refused);
  color: #fff;
  box-shadow: none;
}

.dialog .btn--reject:hover {
  background: #8c0606;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 54px;
  z-index: 20;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  background: var(--petrol-deep);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast .icon {
  color: var(--lime);
}

/* ---------- Demo strip: for the team, drawn so that it does not look like the customer's page ---------- */

.demo {
  padding: 5px var(--side);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  background: #1c2126;
  border-top: 2px dashed #6b7680;
  color: #c9d1d9;
  font-family: var(--font-mono);
  font-size: 11px;
}

.demo__label {
  padding: 2px 6px;
  border-radius: 3px;
  background: #c9d1d9;
  color: #1c2126;
  font-weight: 700;
  text-transform: uppercase;
}

.demo__btn {
  min-height: 24px;
  padding: 2px 10px;
  border: 1px solid #6b7680;
  border-radius: 3px;
  background: transparent;
  color: #fff;
}

.demo__btn:hover {
  background: #2c343b;
}

.demo__btn[aria-pressed="true"] {
  background: #c9d1d9;
  border-color: #c9d1d9;
  color: #1c2126;
}

.demo__src {
  margin-left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
}

/* Is each service there? Green when it answers. */
.demo__light::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: #6b7680;
}

.demo__light--on::before {
  background: #7ee08f;
}

.demo__note {
  margin-left: auto;
}

/* ---------- Smaller screens ---------- */

@media (max-width: 1500px) {
  .planning__src {
    display: none;
  }

  .shell {
    grid-template-columns: 270px minmax(0, 1fr) 320px;
    gap: 18px;
  }

  .order {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1180px) {
  :root {
    --side: 24px;
  }

  /* The assistant goes under the work, the signing steps stay on the left. */
  .shell {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .side {
    grid-column: 2;
    position: static;
    height: 460px;
  }

  .site__band .wrap {
    height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    flex-wrap: wrap;
  }

  .planning {
    margin-left: 0;
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  :root {
    --side: 14px;
  }

  .shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .trail,
  .flow {
    position: static;
    max-height: none;
  }

  .side {
    grid-column: 1;
  }

  .band__title {
    padding-left: 0;
    border-left: 0;
  }

  .days,
  .split,
  .versus,
  .swap {
    grid-template-columns: minmax(0, 1fr);
  }

  .swap__arrow {
    display: none;
  }

  .days {
    display: grid;
    width: 100%;
  }

  .flow__steps li + li::before {
    width: 8px;
    margin: 0 2px;
  }

  .flow__text span {
    display: none;
  }

  .flow__step {
    padding-right: 8px;
    gap: 6px;
  }

  .flow__cta {
    margin-left: 0;
    width: 100%;
    flex-wrap: wrap;
  }

  .flow__cta .btn {
    flex: 1;
    justify-content: center;
  }

  .tbl {
    font-size: 0.8rem;
  }

  .tbl th,
  .tbl td {
    padding-left: 6px;
    padding-right: 6px;
  }

  .tbl--stock td:nth-child(2),
  .tbl--stock th:nth-child(2),
  .tbl--quote td:nth-child(5),
  .tbl--quote th:nth-child(5) {
    display: none;
  }

  .tbl--quote th,
  .tbl--quote td {
    padding-left: 4px;
    padding-right: 4px;
    overflow-wrap: anywhere;
  }

  .field__input {
    width: 62px;
  }

  .field__unit {
    width: 26px;
  }

  .judge {
    grid-template-columns: minmax(0, 1fr) 80px 40px;
  }

  .demo__src,
  .demo__note {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* Under the quote: Valio gave no stock count on some lines. Informative, not a warning: the order is not blocked. */
.stock-note {
  margin: 10px 0 0;
  padding: 8px 12px;
  background: var(--mist);
  border-left: 4px solid var(--grey);
  color: var(--ink);
  font-size: 0.86rem;
}

<<<<<<< HEAD
/* The greener check: a button on a line Valio has a greener product for, the mark of a swapped line,
   the weekly card beside the order and the estimated footprint under it. Green is the "done" green of the page. */
.eco-btn {
  margin-left: 6px;
  min-height: 28px;
  padding: 2px 10px 2px 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--done);
  border-radius: 14px;
  background: var(--done-soft);
  color: var(--done);
  font-weight: 700;
  font-size: 0.8rem;
  vertical-align: middle;
}

.eco-btn:hover {
  background: #fff;
}

.eco-btn .icon,
.eco-total .icon {
  width: 15px;
  height: 15px;
}

.tag--eco {
  margin-left: 6px;
  background: var(--done-soft);
  color: var(--done);
}

.card--eco {
  border-left-color: var(--done);
}

.card--eco .card__lead {
  color: var(--done);
}

.eco-offer + .eco-offer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.eco-offer__actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.eco-total {
  margin-top: 12px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  border-radius: 6px;
  background: var(--done-soft);
  color: var(--ink);
  font-size: 0.86rem;
}

.eco-total .icon {
  color: var(--done);
}

.eco-total__saved {
  color: var(--done);
  font-weight: 700;
}

.eco-total .muted {
  flex-basis: 100%;
  font-size: 0.78rem;
}

.eco-total--off {
  background: var(--mist);
  color: var(--grey);
}

/* Proactive Trend Recommendation */
.trend-card {
  margin-top: 16px;
}

.trend-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line, #e2dfd7);
}

.trend-card__headline,
.trend-card__prompt,
.trend-card__loading,
.trend-recipe__with,
.trend-recipe__why {
  margin: 4px 0 0;
  font-size: 0.84rem;
  color: var(--ink-muted, #5c636a);
}

.trend-card__prompt,
.trend-card__loading {
  padding: 14px 16px;
}

.trend-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line, #e2dfd7);
}

.trend-card__pills .chip.is-active {
  font-weight: 700;
  border-color: var(--petrol, #005670);
}

.trend-recipe__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 6px;
}

.trend-recipe__title {
  margin: 4px 0 0;
  font-size: 1rem;
  font-weight: 700;
}

.trend-recipe__why {
  padding: 0 16px 10px;
}

.trend-ing-meta {
  font-size: 0.74rem;
  color: var(--ink-muted, #5c636a);
}

.trend-recipe__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line, #e2dfd7);
}

.trend-portions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 600;
}

.trend-portions .field__input {
  width: 82px;
}

.head--with-spotlight {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.spotlight-bubble {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line, #d8d4ca);
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--ink, #1f2428);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.spotlight-bubble:hover,
.spotlight-bubble.is-open {
  border-color: var(--petrol, #005670);
  background: var(--mist, #f6f4ee);
}

.spotlight-bubble__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--petrol, #005670);
}

.trend-card {
  margin-top: 0;
  margin-bottom: 16px;
}

.trend-source-tiny {
  font-size: 0.65rem;
  color: var(--ink-muted, #5c636a);
  opacity: 0.6;
  white-space: nowrap;
}