/* =========================================================================
   Personal plans · growth tracks · together
   ========================================================================= */
.craft-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 30px; border-radius: var(--r-xl); background: var(--hero); color: var(--hero-ink); margin-bottom: 26px; }
.craft-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 320px at 85% 0%, var(--copper-glow), transparent 60%); opacity: .6; pointer-events: none; }
.craft-hero > * { position: relative; z-index: 1; }
.craft-hero .eyebrow { color: rgba(255,255,255,.55); display: inline-flex; gap: 6px; align-items: center; }
.craft-hero .eyebrow svg, .why-card .eyebrow svg, .together-strip .eyebrow svg, .together-card .eyebrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.craft-hero h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 500; letter-spacing: -0.045em; line-height: 1.05; margin: 10px 0; max-width: 620px; }
.craft-hero p { color: rgba(255,255,255,.6); max-width: 560px; margin: 0; line-height: 1.55; }
.k-crafted { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.k-track .pt-kicker { color: #2f8a52; }
.invites { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.invite-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; }
.invite-card > div { flex: 1; min-width: 180px; }
.craft-card { max-width: 720px; padding: 28px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.craft-q { font-size: clamp(26px, 4vw, 36px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.1; margin: 0 0 10px; }
.craft-card textarea { width: 100%; margin-top: 16px; padding: 16px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface-2); font: inherit; font-size: 17px; line-height: 1.55; color: var(--ink); outline: none; resize: vertical; }
.craft-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }
.ob-chips.light .ob-chip { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.ob-chips.light .ob-chip.on { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.ob-mins.light .ob-min { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.ob-mins.light .ob-min span { color: var(--muted); }
.ob-mins.light .ob-min.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.ob-spinner.dark { border-color: var(--line-2); border-top-color: var(--accent); }
.ob-steps.dark li { color: var(--ink-2); }
.craft-building { padding: 10px 0; }
.why-card { margin-bottom: 16px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.why-card p { font-size: 17px; line-height: 1.6; margin: 8px 0 0; }
.track-chart { margin-bottom: 16px; }
.tc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px; max-width: 420px; }
.tc { aspect-ratio: 1; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); display: block; }
.tc.read { border-color: var(--line-2); }
.tc.yes { background: #3fb56b; border-color: transparent; }
.tc.partly { background: #f1c94b; border-color: transparent; }
.tc.no { background: color-mix(in srgb, #d0493a 35%, var(--surface)); border-color: transparent; }
.tc-legend { display: flex; gap: 14px; margin-top: 12px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.tc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tc-legend .tc { width: 12px; height: 12px; border-radius: 4px; }
.together-card { margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
.tg-row { display: flex; align-items: center; gap: 10px; }
.tg-row b { font-weight: 500; min-width: 80px; }
.tg-bar { flex: 1; height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; max-width: 260px; }
.tg-bar i { display: block; height: 100%; background: var(--copper-grad); }
.together-strip { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: var(--r-lg); background: color-mix(in srgb, #7fb6ea 10%, var(--surface)); border: 1px solid var(--line); margin: 16px 0; }
.together-strip .eyebrow { display: inline-flex; gap: 6px; align-items: center; }
.tg-person { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.tg-person span { color: var(--muted); font-size: 13px; }
.tg-person.done b::after { content: " \2713"; color: #2f8a52; }
.invite-list { display: flex; flex-direction: column; gap: 8px; }
.person.pick { width: 100%; text-align: left; }
.person.pick > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.person.pick > span:nth-child(2) span { font-size: 13px; color: var(--muted); }
.pd-focus { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 720px; margin: 0 0 8px; padding-left: 16px; border-left: 3px solid var(--accent); }
.pd-card.passage .scripture { font-size: var(--reading-size); line-height: 1.65; }
.pd-card.passage sup { font-size: .55em; color: var(--accent); font-weight: 600; margin: 0 3px 0 6px; font-family: var(--sans); }
.pd-mynote { padding: 18px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border: 1px solid var(--line); }
.guide { margin: 14px 0; max-width: 760px; }
.guide h3 { font-size: 22px !important; }
.guide textarea { width: 100%; margin-top: 10px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface-2); font: inherit; font-size: 16px; line-height: 1.55; color: var(--ink); outline: none; resize: vertical; }
.pd-saved { font-size: 12px; display: block; margin-top: 6px; min-height: 16px; }
.guide.action { border-left: 4px solid var(--accent); }
.guide.action.did { border-left-color: #3fb56b; background: color-mix(in srgb, #3fb56b 6%, var(--surface)); }
.guide.action .btn { margin-top: 6px; }
.guide.prayer { background: var(--hero); color: var(--hero-ink); border: none; }
.guide.prayer .eyebrow { color: rgba(255,255,255,.5); }
.guide.prayer p { font-size: 18px; line-height: 1.6; font-style: italic; margin: 8px 0 12px; }
.guide.prayer .t-link { color: rgba(255,255,255,.7); }
.guide.memory .scripture { font-size: 20px; line-height: 1.5; margin: 8px 0 12px; }
.guide-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.guide-row .ref { color: var(--accent); font-weight: 600; font-size: 14px; margin-right: auto; }
.check-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.check-row button { padding: 12px 18px; border-radius: 999px; border: 1.5px solid var(--line-2); font-weight: 500; transition: all var(--fast); }
.check-row button.on[data-check="yes"] { background: #3fb56b; color: #fff; border-color: #3fb56b; }
.check-row button.on[data-check="partly"] { background: #f1c94b; color: #111; border-color: #f1c94b; }
.check-row button.on[data-check="no"] { background: var(--surface-2); border-color: var(--ink); }
@media (max-width: 760px) { .craft-hero { padding: 24px; } .craft-card { padding: 20px; } .guide h3 { font-size: 19px !important; } }
.note-back-body .eyebrow { display: block; margin-bottom: 4px; }
/* verse-by-verse studies + Studio */
.study-card { margin: 14px 0; max-width: 760px; border-left: 4px solid var(--accent); }
.study-card.ai { border-left-color: #b8a3ea; }
.sc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ai-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, #b8a3ea 22%, transparent); color: #6a52b5; }
.ai-pill svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.study-card .note-body p { font-size: 17px; line-height: 1.65; margin: 0 0 12px; }
.studio-hint { margin-bottom: 16px; }
.studio-hint .eyebrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; vertical-align: -2px; }
.studio-actions { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.studio-progress { height: 34px; border-radius: 999px; background: var(--surface-2); position: relative; overflow: hidden; }
.studio-progress i { position: absolute; inset: 0 auto 0 0; width: 0; background: color-mix(in srgb, var(--accent) 30%, transparent); transition: width var(--med); }
.studio-progress span { position: relative; display: block; line-height: 34px; padding: 0 14px; font-size: 13px; }
.studio-table { width: 100%; border-collapse: collapse; margin-bottom: 26px; font-size: 14.5px; }
.studio-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line-2); }
.studio-table td { padding: 10px; border-bottom: 1px solid var(--line); }
.studio-table .miss { color: var(--accent); }
.btn.sm { height: 34px; padding: 0 14px; font-size: 13px; }
.study-card .sv { color: var(--ink-2); font-size: 15px; margin: 0 0 10px; }
@media (max-width: 760px) { .studio-table th:nth-child(3), .studio-table td:nth-child(3) { display: none; } }