/* Porcelain and Petrol, the app's own system, carried to the web.
   Every value here is copied from ios/Emollient/DesignSystem/Theme.swift.
   There is no colour for "bad" on this site either: no red, amber or green
   severity scale. Two colours carry meaning and both are a date or the
   reader's own judgement, never ours. */

:root {
  --porcelain: #F4F6F5;
  --sheet:     #FFFFFF;
  --well:      #E6EAE8;
  --hairline:  #DCE2DF;
  --ink:       #131817;
  --ink-soft:  #4B5552;
  --muted:     #626C69;
  --petrol:    #0F5257;
  --petrol-deep:#0A3C40;
  --on-petrol: #FFFFFF;
  --amber:     #8A5A0B;
  --madder:    #9B3A2E;

  --measure: 34rem;
  --gutter: 1.5rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --porcelain: #0F1413;
    --sheet:     #181F1D;
    --well:      #232B29;
    --hairline:  #2C3532;
    --ink:       #ECF0EE;
    --ink-soft:  #B6C0BC;
    --muted:     #8D9793;
    --petrol:    #5CC3BC;
    --petrol-deep:#3E9E98;
    --on-petrol: #0F1413;
    --amber:     #E0AE4E;
    --madder:    #E48A7C;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--porcelain);
  color: var(--ink);
  font: 400 1rem/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

/* One family, the system face, exactly as the app. The type treatment is
   carried by scale and by the marker gutter, not by a novelty display face. */

main, header, footer { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }

a { color: var(--petrol); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--petrol-deep); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--petrol); outline-offset: 3px; border-radius: 3px;
}

h1 {
  font-size: clamp(1.75rem, 7vw, 2.4rem);
  line-height: 1.16; font-weight: 600; letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
}
h2 {
  font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em;
  margin: 2.75rem 0 0.6rem;
}
h3 { font-size: 1rem; font-weight: 600; margin: 1.5rem 0 0.35rem; }
p  { margin: 0 0 1rem; color: var(--ink-soft); }
p.lead { color: var(--ink); font-size: 1.06rem; }

header { padding-top: 2.5rem; padding-bottom: 0.5rem; }

.wordmark {
  display: inline-block; font-weight: 600; letter-spacing: 0.01em;
  color: var(--ink); text-decoration: none; font-size: 0.95rem;
  min-height: 44px; line-height: 44px;
}
.wordmark .dot { color: var(--petrol); }

/* The signature: an ingredient list with the app's own marker gutter.
   A / § / ? / ◷ / × each encode a category the app can cite. They are the
   app's structure, not decoration, so the page is built out of them. */

.label-card {
  background: var(--sheet);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 1.1rem 1rem 0.6rem;
  margin: 1.5rem 0 0.75rem;
}
.label-card .cap {
  font-size: 0.78rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 0 0 0.85rem;
}
ol.inci { list-style: none; margin: 0; padding: 0; }
ol.inci li {
  display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.5rem;
  padding: 0.3rem 0; border-top: 1px solid var(--hairline);
  font-size: 0.95rem;
}
ol.inci li:first-child { border-top: 0; }
ol.inci .mark {
  color: var(--muted); font-weight: 600; text-align: center;
  font-variant-numeric: tabular-nums;
}
ol.inci .name { color: var(--ink); }
ol.inci li.plain .name { color: var(--ink-soft); }
ol.inci .says {
  grid-column: 2; color: var(--muted); font-size: 0.83rem;
  margin: 0.1rem 0 0.25rem;
}

/* The one moment of motion on the site, and it is the app's own: a line
   resolving from unread to read, 0.18s, staggered down the list. */
@media (prefers-reduced-motion: no-preference) {
  ol.inci li { animation: resolve 0.18s ease-out backwards; }
}
@keyframes resolve {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

dl.key { margin: 1rem 0 0; }
dl.key div {
  display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.5rem;
  padding: 0.45rem 0; border-top: 1px solid var(--hairline);
  font-size: 0.9rem;
}
dl.key dt { color: var(--muted); font-weight: 600; text-align: center; margin: 0; }
dl.key dd { margin: 0; color: var(--ink-soft); }
dl.key .dated dt { color: var(--amber); }
dl.key .avoided dt { color: var(--madder); }

ul.plain { list-style: none; margin: 0 0 1rem; padding: 0; }
ul.plain li {
  padding: 0.5rem 0; border-top: 1px solid var(--hairline);
  color: var(--ink-soft); font-size: 0.95rem;
}

.price {
  border: 1px solid var(--hairline); border-radius: 14px;
  background: var(--sheet); padding: 0.4rem 1rem; margin: 1rem 0;
}
.price div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0; border-top: 1px solid var(--hairline);
  font-size: 0.95rem;
}
.price div:first-child { border-top: 0; }
.price .amount { color: var(--ink); font-variant-numeric: tabular-nums; }
.price .what { color: var(--ink-soft); }

.status {
  display: inline-block; font-size: 0.85rem; color: var(--muted);
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 0.3rem 0.75rem; margin: 0.25rem 0 1.25rem;
}

details {
  border-top: 1px solid var(--hairline);
  padding: 0.25rem 0;
}
details summary {
  cursor: pointer; list-style: none; padding: 0.7rem 0;
  font-weight: 600; font-size: 0.95rem; min-height: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; color: var(--petrol); font-weight: 400; }
details[open] summary::after { content: "\2212"; }
details p { font-size: 0.93rem; margin-bottom: 0.9rem; }

footer {
  margin-top: 3.5rem; padding-top: 1.25rem; padding-bottom: 3rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.85rem; color: var(--muted);
}
/* The 44px touch target belongs to the footer NAV links, not to links inside
   footer prose, where inline-block plus a right margin pushed the following
   full stop away from the word. */
footer nav a { margin-right: 1rem; display: inline-block; min-height: 44px; line-height: 44px; }
footer p { font-size: 0.85rem; color: var(--muted); }

.doc h2 { margin-top: 2rem; }
.doc p, .doc li { font-size: 0.95rem; }
.doc ul { padding-left: 1.1rem; color: var(--ink-soft); }
.doc li { margin-bottom: 0.4rem; }
.updated { font-size: 0.85rem; color: var(--muted); }