/* Tabe's page. Koyomi's shared styles are in koyomi.css; this file sets Tabe's
   persimmon and the parts only this page has. The colours are Tabe's colour
   sets; the bands use a slightly lighter and darker pair so small text on them
   stays readable. */

:root {
  --accent: light-dark(#BF4500, #FF8C5C);
  --accent-soft: light-dark(#FFE6DD, #6C3924);
  --on-accent-soft: light-dark(#872E00, #FFDBCE);
  --band-bg: light-dark(#BF4500, #61301C);
  --band-fg: light-dark(#FFFFFF, #FFDBCE);
  --band-on: light-dark(#FFEDE7, #FF8C5C);
  --band-off: light-dark(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));

  /* Macros, as in the app: protein indigo, carbs ochre, fat Kitae's mauve. */
  --protein: light-dark(#435FAE, #99AEF2);
  --carbs: light-dark(#B28000, #FFCB27);
  --fat: light-dark(#70576B, #D8B8D0);
}

/* Hero */

.status {
  margin: 0 0 1.2rem;
  color: var(--accent);
}
.status,
.today-head,
.sources .tag {
  font-size: 0.9rem;
}

@media (max-width: 859px) {
  .icon-art {
    max-width: 280px;
  }
}

.icon-art .sticks {
  transform-box: view-box;
}
@media (prefers-reduced-motion: no-preference) {
  .serve .bowl {
    animation: settle 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both;
  }
  .serve .sticks {
    animation: rest 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s both;
  }
  @keyframes settle {
    0% {
      opacity: 0;
      transform: translateY(60px);
    }
    60% {
      opacity: 1;
      transform: translateY(-4px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes rest {
    0% {
      opacity: 0;
      transform: translate(90px, -70px);
    }
    60% {
      opacity: 1;
      transform: translate(-5px, 4px);
    }
    100% {
      opacity: 1;
      transform: translate(0, 0);
    }
  }
}

/* An early look at Today */

.today-fig {
  margin: 0;
}
.today {
  padding: clamp(20px, 3.4vw, 34px);
  border-radius: 28px;
  background: var(--paper);
  color: var(--ink);
}
.band .today p {
  max-width: none;
  margin: 0;
}
.today-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--accent);
}
.today-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-top: 0.4rem;
}
.band .today .kcal {
  color: var(--accent);
  font-size: clamp(3.6rem, 2.6rem + 3.4vw, 5.2rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.band .today .kcal-note {
  margin-top: 0.35rem;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 400;
}
.ring {
  display: block;
  width: clamp(104px, 9vw + 40px, 150px);
  height: auto;
}
.ring .track {
  fill: none;
  stroke: var(--field);
}
.ring .arc {
  fill: none;
  stroke: var(--accent);
}
.ring .eaten {
  fill: var(--ink);
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
}
.ring .eaten-label {
  fill: var(--ink-soft);
  font-family: var(--mono);
  font-size: 12px;
}

.macros {
  display: grid;
  gap: 12px;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 400;
}
.macros li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
}
.macros .val {
  color: var(--ink-soft);
}
.macros .bar {
  grid-column: 1 / -1;
  height: 10px;
  border-radius: 5px;
  background: var(--field);
  overflow: hidden;
}
.macros .bar i {
  display: block;
  height: 100%;
  border-radius: 5px;
}
.macros .p i {
  width: 66%;
  background: var(--protein);
}
.macros .c i {
  width: 63%;
  background: var(--carbs);
}
.macros .f i {
  width: 56%;
  background: var(--fat);
}

.meals {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}
.meals li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-block: 10px;
  border-top: 2px solid var(--rule);
  font-size: 1.3rem;
  font-weight: 700;
}
.meals .kc {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 400;
  align-self: center;
}
.meals .add {
  color: var(--accent);
}

/* Where the food comes from */

.sources {
  margin: 0;
  padding: clamp(28px, 5vw, 48px);
  border-radius: 28px;
  background: var(--card);
}
.sources ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sources li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 12px;
  padding-block: 12px;
  border-top: 2px solid var(--rule);
}
.sources li:first-child {
  border-top: 0;
  padding-top: 0;
}
.sources .tag {
  color: var(--accent);
}
.sources figcaption {
  margin-top: 1.2rem;
  color: var(--ink-soft);
}

/* Your diary is a file */

.formats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 400;
}
.formats li {
  padding: 4px 12px;
  border: 2px solid currentColor;
  border-radius: 999px;
}

/* Kind by design */

.kind .head {
  max-width: 12em;
}
.kind-lede {
  max-width: 27em;
  margin: 1.2rem 0 clamp(32px, 5vw, 56px);
  font-size: 1.1em;
}
.kind dl {
  display: grid;
  gap: 32px;
  margin: 0;
}
@media (min-width: 640px) {
  .kind dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px clamp(28px, 4vw, 56px);
  }
}
@media (min-width: 980px) {
  .kind dl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.kind .item {
  padding-top: 18px;
  border-top: 2px solid currentColor;
}
.kind dt {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 400;
}
.kind dd {
  max-width: 22em;
  margin: 0.7rem 0 0;
}

/* Coming in stages */

.plan {
  padding-block: clamp(56px, 9vw, 112px);
}
.plan .head {
  margin-bottom: clamp(32px, 5vw, 56px);
}
.stages {
  display: grid;
  gap: 36px;
}
@media (min-width: 860px) {
  .stages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 56px);
  }
}
.stage {
  padding-top: 18px;
  border-top: 2px solid var(--rule);
}
.stage .tag {
  margin: 0;
  color: var(--accent);
  font-size: 1rem;
}
.stage ul {
  display: grid;
  gap: 0.55rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}
.stage li {
  max-width: 22em;
}
.plan-note {
  max-width: 30em;
  margin: clamp(32px, 5vw, 48px) 0 0;
  color: var(--ink-soft);
  font-size: 1.1rem;
}

@media (max-width: 480px) {
  .sources li {
    grid-template-columns: minmax(0, 1fr);
  }
}