/* ===========================================================================
   My Circle — the member area (v3, 2026-09-08).
   Mobile first. Tokens mirror styles.css: vellum ground, soferim ink, ochre
   gold. Nothing here depends on styles.css, so the page stands on its own.
   =========================================================================== */

:root {
  --parch: #faf6ed;         /* page ground */
  --card: #f0e6d2;          /* vellum card */
  --gold: #a8884a;          /* ochre — illumination */
  --gold-d: #8a6e34;        /* ochre, ink-weight */
  --ink: #1a1612;           /* soferim ink */
  --ink-2: #5a4c38;         /* secondary ink */
  --rule: #d9cbab;          /* hairline */
  --white: #fffdf8;
  --err: #8b2b1c;
  --ok: #3d6b2f;
  /* relationship hues — muted, never candy */
  --rel-partner: #8a6e34;
  --rel-parent: #4a5c6a;
  --rel-child: #6b7f52;
  --rel-sibling: #7c5f74;
  --rel-friend: #a8884a;
  --rel-other: #7a7263;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--parch); color: var(--ink);
  font-family: 'Cormorant Garamond', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  font-size: 17px; line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3, .ci-name, .ci-tab { font-family: 'Cinzel', 'Frank Ruhl Libre', Georgia, serif; }
a { color: var(--gold-d); }
[hidden] { display: none !important; }

.ci-wrap { max-width: 760px; margin: 0 auto; padding: 20px 16px 72px; }
.ci-eyebrow { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-d); text-align: center; }
.ci-h1 { font-size: clamp(26px, 6vw, 36px); line-height: 1.15; text-align: center; margin: 8px 0 6px; font-weight: 600; }
.ci-lede { font-size: 16px; line-height: 1.6; text-align: center; color: var(--ink-2); margin: 0 auto 18px; max-width: 560px; }
.ci-rule { height: 1px; background: var(--rule); border: 0; margin: 22px 0; }

/* ---- cards, rows, buttons ------------------------------------------------ */
.ci-card { background: var(--card); border: 1px solid var(--gold); border-radius: 6px; padding: 18px 18px 16px; margin: 14px 0; }
.ci-card > h2 { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-d); margin: 0 0 10px; font-weight: 600; }
.ci-card p { margin: 0 0 10px; }
.ci-sub { background: var(--white); border: 1px solid var(--rule); border-radius: 6px; padding: 14px 16px; margin: 10px 0; }
.ci-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ci-row.tight { gap: 6px; }
.ci-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 11px 18px; border: 0; border-radius: 4px;
  background: var(--gold-d); color: #fff; font: inherit; font-size: 15px;
  cursor: pointer; text-decoration: none; text-align: center;
}
.ci-btn.secondary { background: transparent; color: var(--gold-d); border: 1px solid var(--gold); }
.ci-btn.quiet { background: transparent; color: var(--ink-2); border: 1px solid var(--rule); }
.ci-btn.danger { background: transparent; color: var(--err); border: 1px solid #d8b6ae; }
.ci-btn.block { display: flex; width: 100%; }
.ci-btn:disabled { opacity: .5; cursor: default; }
.ci-btn:focus-visible, .ci-tab:focus-visible, .ci-node:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold-d); outline-offset: 2px;
}
.ci-input, .ci-select, .ci-textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; background: var(--white);
  border: 1px solid var(--gold); border-radius: 4px; font: inherit; font-size: 16px; color: var(--ink);
}
.ci-textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.ci-field { margin: 0 0 12px; }
.ci-field label, .ci-label { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-d); margin: 0 0 4px; }
.ci-hint { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin: 4px 0 0; }
.ci-msg { font-size: 14px; color: var(--ink-2); margin: 8px 0 0; line-height: 1.5; min-height: 1.2em; }
.ci-msg.is-error { color: var(--err); }
.ci-msg.is-success { color: var(--ok); }
.ci-empty { font-size: 15px; color: var(--ink-2); font-style: italic; margin: 8px 0; }
.ci-note { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.ci-ai { border-left: 3px solid var(--gold); background: var(--white); padding: 10px 14px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin: 12px 0; }

/* ---- tabs ---------------------------------------------------------------- */
.ci-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--rule); margin: 18px 0 0; -webkit-overflow-scrolling: touch; }
.ci-tab {
  flex: 0 0 auto; min-height: 44px; padding: 10px 14px; border: 0; background: transparent;
  color: var(--ink-2); font: inherit; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap;
}
.ci-tab[aria-selected="true"] { color: var(--gold-d); border-bottom-color: var(--gold-d); }
.ci-panel { padding-top: 6px; }

/* ---- the relationship map ------------------------------------------------ */
.ci-mapwrap { background: var(--white); border: 1px solid var(--rule); border-radius: 6px; padding: 8px; margin: 12px 0; }
.ci-map { display: block; width: 100%; height: auto; }
.ci-map .ci-spoke { stroke: var(--rule); stroke-width: 1; }
.ci-map .ci-ring { fill: none; stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 5; }
.ci-map .ci-you circle { fill: var(--card); stroke: var(--gold-d); stroke-width: 1.6; }
.ci-map .ci-you text { fill: var(--ink); }
.ci-map .ci-node circle { fill: var(--white); stroke-width: 1.6; }
.ci-map .ci-node text.n { fill: var(--ink); }
.ci-map .ci-node text.r { fill: var(--ink-2); }
.ci-map .ci-node { cursor: pointer; }
.ci-map .ci-node:hover circle, .ci-map .ci-node:focus circle { fill: #fff6e2; }
.ci-map text { font-family: 'Cormorant Garamond', Georgia, serif; text-anchor: middle; }
.ci-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: var(--ink-2); margin: 8px 2px 0; }
.ci-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ci-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.15); }

/* ---- people list --------------------------------------------------------- */
.ci-people { list-style: none; margin: 10px 0 0; padding: 0; }
.ci-people li { border-bottom: 1px solid var(--rule); }
.ci-person {
  display: flex; width: 100%; gap: 10px; align-items: baseline; min-height: 44px;
  padding: 12px 4px; background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; color: var(--ink);
}
.ci-person .nm { font-size: 17px; }
.ci-person .rl { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.ci-person .tag { margin-left: auto; font-size: 12px; color: var(--gold-d); }

/* ---- growing tree -------------------------------------------------------- */
.ci-treewrap { text-align: center; background: var(--white); border: 1px solid var(--rule); border-radius: 6px; padding: 14px; }
.ci-tree { display: block; margin: 0 auto; width: 100%; max-width: 280px; height: auto; }
.ci-tree .bark { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.ci-tree .fine { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; }
.ci-tree .root { fill: none; stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2 3; stroke-linecap: round; }
.ci-tree .leaf { fill: none; stroke: var(--gold-d); stroke-width: 1.2; }
.ci-tree .fruit { fill: var(--gold); stroke: none; }
.ci-tree .ground { stroke: var(--rule); stroke-width: 1; }
.ci-stage { font-size: 22px; margin: 10px 0 2px; }
.ci-meter { height: 6px; background: var(--card); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; margin: 10px 0 6px; }
.ci-meter i { display: block; height: 100%; background: var(--gold); }
.ci-stats { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; font-size: 14px; color: var(--ink-2); margin: 8px 0 0; }
.ci-stats b { display: block; font-size: 20px; color: var(--ink); font-weight: 600; }
.ci-badges { list-style: none; margin: 10px 0 0; padding: 0; }
.ci-badges li { border-top: 1px solid var(--rule); padding: 10px 0; font-size: 15px; }
.ci-badges li.not-yet { color: var(--ink-2); }
.ci-badges b { display: block; font-size: 15px; }
.ci-badges .how { font-size: 13.5px; color: var(--ink-2); }

/* ---- journal ------------------------------------------------------------- */
.ci-moods { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.ci-mood {
  min-height: 44px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 20px;
  background: var(--white); font: inherit; font-size: 15px; color: var(--ink-2); cursor: pointer;
}
.ci-mood[aria-pressed="true"] { border-color: var(--gold-d); background: #fff6e2; color: var(--ink); }
.ci-entries { list-style: none; margin: 12px 0 0; padding: 0; }
.ci-entry { border-top: 1px solid var(--rule); padding: 12px 0; }
.ci-entry .meta { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-d); }
.ci-entry .body { margin: 4px 0 6px; white-space: pre-wrap; }
.ci-growth { border-left: 3px solid var(--gold); background: #fff6e2; padding: 10px 14px; margin: 12px 0; font-size: 15px; }
.ci-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin: 10px 0 4px; max-width: 320px; }
.ci-cal i { display: block; aspect-ratio: 1; border-radius: 2px; background: var(--card); border: 1px solid var(--rule); }
.ci-cal i.on { background: var(--gold); border-color: var(--gold-d); }

/* ---- credits + links ----------------------------------------------------- */
.ci-balance { font-size: 34px; font-weight: 600; line-height: 1; }
.ci-links { list-style: none; margin: 10px 0 0; padding: 0; }
.ci-links li { border-top: 1px solid var(--rule); padding: 10px 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.ci-links code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--ink-2); word-break: break-all; }

/* ---- sharing toggles ----------------------------------------------------- */
.ci-toggle { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--rule); }
.ci-toggle input { width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--gold-d); }
.ci-toggle .t { font-size: 15.5px; }
.ci-toggle .d { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }

/* ---- modal --------------------------------------------------------------- */
.ci-backdrop { position: fixed; inset: 0; background: rgba(26,22,18,.5); display: flex; align-items: flex-end; justify-content: center; padding: 0; z-index: 50; }
@media (min-width: 620px) { .ci-backdrop { align-items: center; padding: 24px; } }
.ci-modal {
  background: var(--parch); border: 1px solid var(--gold); border-radius: 8px 8px 0 0;
  width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; padding: 20px 18px 24px;
}
@media (min-width: 620px) { .ci-modal { border-radius: 8px; } }
.ci-modal h2 { font-size: 20px; margin: 0 0 4px; }
.ci-modal .close { float: right; }

/* ---- misc ---------------------------------------------------------------- */
.ci-foot { font-size: 12px; color: #8a8064; text-align: center; margin-top: 36px; line-height: 2.1; }
.ci-foot a { color: #8a8064; }
.ci-banner { background: #fff6e2; border: 1px solid var(--gold); border-radius: 6px; padding: 12px 14px; margin: 12px 0; font-size: 15px; }
.ci-spinner { font-size: 14px; color: var(--ink-2); font-style: italic; }

@media (prefers-reduced-motion: no-preference) {
  .ci-growth { animation: ciRise .5s ease-out; }
  @keyframes ciRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}