/* ==========================================================================
   Proper Tools — Commons calmoji page
   Sibling to the Friend Protocol: same civic-liturgical frame, with the
   calmoji palette (from the playbook) carried in quietly.

   Structural accent is Ocean (#3575A2), the colour of claimed commitments
   in the playbook. Links stay site green, set in main.css.
   ========================================================================== */

:root {
  /* Playbook palette */
  --cj-fern:     #63B84E;   /* 🌗 Seasons            */
  --cj-soil:     #524740;   /* 🧠 Focus — Open        */
  --cj-forest:   #448533;   /* 🕒 Meetings — Open     */
  --cj-cobalt:   #2C3DAB;   /* 🧿 Emoji Clock         */
  --cj-ocean:    #3575A2;   /* 🎯 Focus — Claimed     */
  --cj-night:    #16141B;   /* the calendar's own dark background */
}


/* ---------- Card ---------- */

.calmoji-page.section-card {
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.985), rgba(255,255,255,0.968)),
    radial-gradient(circle at top center, rgba(53,117,162,0.035), transparent 48%);
  border-left: 3px solid rgba(53,117,162,0.26);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.05),
    0 1px 0 rgba(255,255,255,0.92) inset;
  padding-top: var(--sp-5);
}

.essay.calmoji-text {
  max-width: 66ch;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  font-size: 1.14rem;
  line-height: 1.72;
  color: rgba(17,17,17,0.96);
}


/* ---------- Kicker, title, subtitles, meta ---------- */

.calmoji-text .cj-kicker {
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.50);
  margin-bottom: var(--sp-1);
}

.calmoji-text h1 {
  font-family: "Doves Headline", Georgia, serif;
  font-size: clamp(2.6rem, 6vw, 3.8rem);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-1);
  max-width: none;
}

.calmoji-text h1 .cj-eye {
  font-size: 0.62em;
  vertical-align: 0.18em;
  margin-left: 0.18em;
}

.calmoji-text .cj-subtitle {
  font-size: var(--fs-md);
  font-style: italic;
  color: rgba(0,0,0,0.76);
  margin-top: 0;
  margin-bottom: var(--sp-1);
  line-height: 1.4;
}

.calmoji-text .cj-subtitle-secondary {
  font-size: 1.04rem;
  font-style: italic;
  color: rgba(0,0,0,0.66);
  margin-top: 0;
  line-height: 1.55;
  max-width: 54ch;
}

.calmoji-text .cj-meta {
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-5);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--fs-sm);
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.56);
}


/* ---------- Body ---------- */

.calmoji-text p {
  margin: var(--sp-2) 0 0;
  max-width: none;
  text-wrap: pretty;
}

.calmoji-text .cj-lede {
  font-size: 1.2rem;
  line-height: 1.62;
}

.calmoji-text .cj-short {
  font-family: "Doves Headline", Georgia, serif;
  font-size: 1.22rem;
  line-height: 1.45;
  color: rgba(17,17,17,0.9);
}

.calmoji-text code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.86em;
  padding: 0.08em 0.36em;
  border-radius: 4px;
  background: rgba(0,0,0,0.045);
  white-space: nowrap;
}


/* ---------- Actions ---------- */

.calmoji-text .cj-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  margin-top: var(--sp-3);
}

.calmoji-text .cj-actions .btn {
  margin-top: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.95rem;
  line-height: 1.4;
}

.calmoji-text .cj-actions .btn small {
  font-size: 0.78em;
  opacity: 0.85;
  margin-left: 0.3em;
}

.calmoji-text .cj-status {
  margin-top: var(--sp-3);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.52);
}


/* ---------- Table of contents ---------- */

.calmoji-text .cj-toc {
  margin: var(--sp-5) 0;
  padding: var(--sp-2) var(--sp-3);
  border-left: 2px solid rgba(53,117,162,0.2);
  background: rgba(53,117,162,0.03);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.calmoji-text .cj-toc-heading {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.48);
  font-size: var(--fs-xs);
  margin-bottom: var(--sp-1);
}

.calmoji-text .cj-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: var(--sp-3);
}

.calmoji-text .cj-toc li {
  padding: 2px 0;
  break-inside: avoid;
}

.calmoji-text .cj-toc a {
  color: rgba(0,0,0,0.72);
  border-bottom: 1px dotted transparent;
}

.calmoji-text .cj-toc a:hover {
  color: var(--pt-green);
  text-decoration: none;
  border-bottom-color: rgba(76,125,74,0.4);
}


/* ---------- Headings and anchors ---------- */

.calmoji-text h2 {
  font-family: "Doves Headline", Georgia, serif;
  font-size: var(--fs-lg);
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-2);
  color: var(--pt-ink);
  scroll-margin-top: var(--sp-5);
}

.calmoji-text .cj-anchor {
  margin-left: 0.4em;
  color: rgba(53,117,162,0);
  text-decoration: none;
  font-weight: normal;
  font-size: 0.8em;
  transition: color 150ms ease;
}

.calmoji-text h2:hover .cj-anchor,
.calmoji-text h2:focus-within .cj-anchor,
.calmoji-text h3:hover .cj-anchor,
.calmoji-text h3:focus-within .cj-anchor {
  color: rgba(53,117,162,0.55);
}

.calmoji-text .cj-anchor:hover {
  color: var(--cj-ocean);
  text-decoration: none;
}


/* ---------- The Map legend ---------- */

.calmoji-text .cj-legend {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-1);
}

.calmoji-text .cj-legend li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75em;
  align-items: start;
  padding: 0.7em 0.9em;
  border-radius: 6px;
  background: rgba(0,0,0,0.022);
  line-height: 1.5;
}

.calmoji-text .cj-swatch {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-top: 0.38em;
  border-radius: 3px;
  background: var(--swatch, #999);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}

.calmoji-text .cj-legend strong {
  font-weight: 600;
}

.calmoji-text .cj-legend .cj-legend-name {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
}


/* ---------- Figures (calendar screenshots) ---------- */

.calmoji-text .cj-figure {
  margin: var(--sp-5) 0;
}

.calmoji-text .cj-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: var(--cj-night);
  border: 1px solid rgba(0,0,0,0.28);
  box-shadow:
    0 18px 40px rgba(17,17,17,0.16),
    0 2px 6px rgba(17,17,17,0.10);
}

.calmoji-text .cj-figure.cj-narrow img {
  max-width: 360px;
  margin: 0 auto;
}

.calmoji-text .cj-figure.cj-slim img {
  max-width: 250px;
  margin: 0 auto;
}

.calmoji-text .cj-figure figcaption {
  margin-top: var(--sp-2);
  text-align: center;
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.5;
  color: rgba(0,0,0,0.62);
}


/* ---------- Claim, don't edit: events drawn as calendar chips ---------- */

.calmoji-text .cj-claim {
  margin: var(--sp-5) 0;
  padding: var(--sp-3);
  border-radius: 8px;
  background: rgba(53,117,162,0.05);
  border-left: 3px solid rgba(53,117,162,0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.calmoji-text .cj-event {
  display: block;
  width: min(100%, 300px);
  padding: 0.5em 0.9em 0.5em 0.8em;
  border-radius: 6px;
  border-left: 5px solid rgba(0,0,0,0.18);
  background: var(--cj-ocean);
  color: #fff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 4px 10px rgba(17,17,17,0.12);
}

.calmoji-text .cj-event small {
  display: block;
  font-weight: 400;
  font-size: 0.8em;
  opacity: 0.85;
}

.calmoji-text .cj-event.cj-open {
  background: var(--cj-soil);
}

.calmoji-text .cj-arrow {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.5);
}


/* ---------- The rule underneath ---------- */

.calmoji-text .cj-rule {
  margin: var(--sp-5) 0;
  padding: var(--sp-3);
  text-align: center;
  font-family: "Doves Headline", Georgia, serif;
  font-size: 1.32rem;
  line-height: 1.5;
  color: rgba(17,17,17,0.9);
  border-top: 1px solid rgba(53,117,162,0.18);
  border-bottom: 1px solid rgba(53,117,162,0.18);
}

.calmoji-text .cj-rule p {
  margin: 0.15em 0;
}


/* ---------- Quotes (steward prompt) ---------- */

.calmoji-text blockquote {
  margin: var(--sp-3) 0;
  padding: var(--sp-2) var(--sp-3);
  border-left: 2px solid rgba(53,117,162,0.34);
  background: rgba(53,117,162,0.04);
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.55;
  color: rgba(0,0,0,0.84);
}

.calmoji-text blockquote p {
  margin: 0;
}


/* ---------- EBI48 quick reference ---------- */

.calmoji-text .cj-quickref {
  list-style: none;
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2) 20px;
  columns: 3;
  column-gap: var(--sp-3);
  column-rule: 1px solid rgba(44,61,171,0.10);
  border-radius: var(--pt-radius);
  background: rgba(44,61,171,0.035);
  border: 1px solid rgba(44,61,171,0.12);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.86rem;
  line-height: 1.3;
}

.calmoji-text .cj-quickref li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  padding: 3px 0;
  break-inside: avoid;
  white-space: nowrap;
}

/* A faint rule at each hour, pairing :05 with :35 */
.calmoji-text .cj-quickref li:nth-child(odd) {
  border-top: 1px solid rgba(44,61,171,0.07);
}

.calmoji-text .cj-quickref li:nth-child(16n+1) {
  border-top-color: transparent;
}

.calmoji-text .cj-qr-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.82em;
  letter-spacing: 0.02em;
  color: rgba(0,0,0,0.55);
}

.calmoji-text .cj-qr-glyph {
  width: 1.4em;
  text-align: center;
  font-size: 1.12em;
}

.calmoji-text .cj-qr-name {
  color: rgba(0,0,0,0.84);
}

.calmoji-text .cj-qr-caption {
  margin-top: var(--sp-1);
  text-align: center;
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(0,0,0,0.62);
}


/* ---------- Notes (cultural, Proton) ---------- */

.calmoji-text .cj-note {
  margin: var(--sp-3) 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--pt-radius);
  border: 1px dashed rgba(53,117,162,0.35);
  background: rgba(53,117,162,0.035);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(0,0,0,0.78);
}

.calmoji-text .cj-note p {
  margin: var(--sp-1) 0 0;
}

.calmoji-text .cj-note p:first-child {
  margin-top: 0;
}


/* ---------- Divider and coda ---------- */

.calmoji-text hr {
  margin: var(--sp-8) 0 var(--sp-5);
  overflow: visible;
  height: 0;
  border: none;
  border-top: 1px solid rgba(53,117,162,0.18);
}

.calmoji-text hr::after {
  content: "🧿";
  position: relative;
  top: -0.85em;
  display: block;
  width: 2.4em;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  font-size: 0.95rem;
}

.calmoji-text .cj-epigraph {
  margin: var(--sp-5) auto var(--sp-3);
  max-width: 46ch;
  text-align: center;
}

.calmoji-text .cj-epigraph blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.calmoji-text .cj-epigraph blockquote p {
  margin: 0;
  font-family: "Doves Headline", Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: rgba(17,17,17,0.78);
}

.calmoji-text .cj-epigraph figcaption {
  margin-top: var(--sp-2);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  font-variant: small-caps;
  color: rgba(0,0,0,0.5);
}

.calmoji-text .cj-coda {
  text-align: center;
  color: rgba(0,0,0,0.66);
}

.calmoji-text .cj-coda .cj-envoi {
  font-family: "Doves Headline", Georgia, serif;
  font-size: 1.4rem;
  line-height: 1.4;
  color: rgba(17,17,17,0.9);
  margin: 0;
}

.calmoji-text .cj-license {
  margin: var(--sp-5) auto 0;
  padding-top: var(--sp-2);
  border-top: 1px solid rgba(53,117,162,0.12);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--fs-sm);
  color: rgba(0,0,0,0.56);
  max-width: 52ch;
}

.calmoji-text .cj-license p {
  margin: 0.3em 0;
}

.calmoji-text .cj-signoff {
  margin-top: var(--sp-3);
  font-style: italic;
  font-size: 1rem;
  color: rgba(0,0,0,0.62);
}

.calmoji-text .cj-version {
  margin-top: var(--sp-2);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.42);
}


/* ---------- Mobile ---------- */

@media (max-width: 720px) {
  .essay.calmoji-text {
    font-size: 1.06rem;
    line-height: 1.68;
  }

  .calmoji-text h1 {
    font-size: clamp(2.2rem, 11vw, 2.9rem);
  }

  .calmoji-text h2 {
    font-size: 1.4rem;
    margin-top: var(--sp-5);
  }

  .calmoji-text .cj-lede {
    font-size: 1.1rem;
  }

  .calmoji-text .cj-toc ol {
    columns: 1;
  }

  .calmoji-text .cj-quickref {
    columns: 2;
    column-gap: var(--sp-3);
  }

  .calmoji-text .cj-quickref li:nth-child(16n+1) {
    border-top-color: rgba(44,61,171,0.07);
  }

  .calmoji-text .cj-quickref li:nth-child(24n+1) {
    border-top-color: transparent;
  }

  .calmoji-text .cj-figure {
    margin: var(--sp-3) 0;
  }

  .calmoji-text .cj-rule {
    font-size: 1.16rem;
  }

  /* No hover on touch: keep anchors faintly visible */
  .calmoji-text .cj-anchor {
    color: rgba(53,117,162,0.35);
  }
}

@media (max-width: 420px) {
  .calmoji-text .cj-quickref {
    padding: var(--sp-1) 10px;
    column-gap: 12px;
    column-rule-color: transparent;
    font-size: 0.76rem;
  }

  .calmoji-text .cj-quickref li {
    gap: 0.25em;
  }

  .calmoji-text .cj-qr-glyph {
    width: 1.25em;
  }

  /* Narrow screens: "Dog" rather than "Dog Face" */
  .calmoji-text .cj-qr-face {
    display: none;
  }

  .calmoji-text .cj-actions .btn {
    width: 100%;
    text-align: center;
  }

  .calmoji-text .cj-actions .btn small {
    display: block;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .calmoji-text .cj-anchor {
    transition: none;
  }
}


/* ---------- Screen-reader-only text ---------- */

.calmoji-text .cj-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}