/* ============================================================
   PACKET 10 · "The Care Map" — BOOK-SPECIFIC PARTS
   ------------------------------------------------------------
   Home pillar: Community Advocacy (warm gray). Sharp 6–8.
   Reuses tokens, pages, book-common. Community-specific only.
   ============================================================ */

/* the draw-your-block care map */
.caremap { position: relative; width: 100%; height: 4.0in; background-color: #fff; background-image:
    linear-gradient(var(--pillar-8) 1px, transparent 1px),
    linear-gradient(90deg, var(--pillar-8) 1px, transparent 1px);
  background-size: 28px 28px; border: 2px solid var(--pillar-bd); border-radius: var(--r-md); overflow: hidden; }
.caremap .cm-compass { position: absolute; top: 12px; right: 12px; width: 52px; height: 52px; color: var(--pillar); opacity: 0.7; }
.caremap .cm-pin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.caremap .cm-pin .pin-dot { width: 16px; height: 16px; border-radius: 50% 50% 50% 0; background: var(--pillar); border: 1.5px solid var(--ink); transform: rotate(-45deg); }
.caremap .cm-pin .pin-label { font-family: var(--font-sans); font-weight: 700; font-size: 11px; color: var(--ink); background: var(--cream); padding: 1px 7px; border-radius: var(--r-pill); border: 1px solid var(--pillar-bd); white-space: nowrap; }
.caremap .cm-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--ink-faint); }
.caremap .cm-you { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.caremap .cm-you svg { width: 30px; height: 30px; color: var(--pillar); }
.caremap .cm-you span { font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pillar-ink); }

/* care-act idea cards */
.care-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.care-card { padding: 16px 14px; background: var(--pillar-8); border: 1.5px solid var(--pillar-bd); border-radius: var(--r-md); text-align: center; }
.care-card .cc-act { font-family: var(--font-serif); font-weight: 600; font-size: 17px; line-height: 1.25; color: var(--ink); }
.care-card .cc-who { font-family: var(--font-sans); font-size: 12px; color: var(--ink-mute); margin-top: 6px; }

/* one-small-act commitment */
.commit { padding: 22px 26px; background: var(--pillar-8); border: 2px dashed var(--pillar-bd); border-radius: var(--r-md); }
.commit .cm-label { font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pillar-ink); margin: 0 0 14px; }
.commit .cm-line { font-family: var(--font-serif); font-weight: 600; font-size: 22px; color: var(--ink); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.commit .cm-line .blank { display: inline-block; min-width: 220px; flex: 1; border-bottom: 3px dotted var(--pillar); height: 30px; }
.commit .cm-line + .cm-line { margin-top: 14px; }