/* Claude tools. Built on the field guide's own palette and field-* components. */
.cl-page{--cl-glow:#9ecfb5;--cl-warm:#eac38b;--cl-ink:var(--text,#f0f1e7);--cl-dim:var(--muted,#b1bfb3);--cl-line:var(--border,#30403a)}
.field-small{font-size:.86rem;line-height:1.45;color:var(--muted,#b1bfb3);margin:0}
.cl-page h2{margin:0}
.cl-page .panel>h2{font-size:1.08rem;display:flex;align-items:center;gap:8px;margin:0 0 12px}
.cl-page .panel>h2 svg{color:var(--cl-glow);width:18px;height:18px}
.cl-sends{display:flex;align-items:start;gap:9px;margin:0;padding:11px 13px;border:1px dashed #49685a;border-radius:10px;color:var(--cl-dim);font-size:.87rem;line-height:1.45}
.cl-sends svg{color:var(--cl-warm);width:17px;height:17px;margin-top:2px}
.cl-off{display:flex;gap:12px;align-items:start;background:#24261d;border-color:#5d5a3e}
.cl-off svg{color:var(--cl-warm);margin-top:2px}
.cl-off p{margin:4px 0 0;color:var(--cl-dim);font-size:.9rem}
.cl-busy{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-color:#4d6f5f;background:#18302a}
.cl-busy>div{flex:1 1 180px;min-width:0;display:grid;gap:2px}
.cl-busy small{color:var(--cl-dim);font-size:.82rem}
.cl-dot{width:12px;height:12px;border-radius:50%;background:var(--cl-glow);box-shadow:0 0 0 0 #9ecfb580;animation:cl-pulse 1.6s ease-out infinite;flex:none}
@keyframes cl-pulse{0%{box-shadow:0 0 0 0 #9ecfb580}80%,100%{box-shadow:0 0 0 12px #9ecfb500}}
@media (prefers-reduced-motion:reduce){.cl-dot{animation:none}}
.cl-checks ul{list-style:none;padding:0 0 12px;margin:0;display:grid;gap:5px}
.cl-checks li{display:flex;gap:8px;align-items:center;font-size:.87rem}
.cl-checks li svg{width:15px;height:15px;color:var(--cl-glow)}
.cl-checks li.bad{color:#ffc9bf}
.cl-checks li.bad svg{color:#ff9d8f}
.cl-priv{display:flex;gap:10px;align-items:start;background:#1a302d;border:1px solid #456056;border-radius:10px;padding:12px}
.cl-priv>svg{color:var(--cl-glow);margin-top:3px}
.cl-priv>div{display:grid;gap:8px;min-width:0}
.cl-priv p{margin:0}
.cl-flag{display:inline-block;padding:1px 7px;border-radius:6px;background:#3b2a24;border:1px solid #7a5546;color:#ffd9c9;font-size:.84rem;margin:0 3px 3px 0}
.cl-priv .btn{justify-self:start;min-height:40px}
.cl-stop-steps{display:grid;gap:10px;padding-top:4px;border-top:1px solid #80535388}
.cl-stop-steps h2{font-size:1.1rem;color:#ffd7cf}
.cl-stop-steps .field-list{color:#fff1ee}
.cl-stop-steps .field-disclosure{border-color:#80535388;color:#f5d9d3}
.cl-stop-steps .field-disclosure summary{color:#fff1ee}
.cl-stop-steps .field-small{color:#f2cfc8}
.cl-stop-after{margin:0;color:#ffe2db;font-weight:600}
.cl-inline-stop{display:flex;gap:10px;align-items:start;background:#321f22;border:1px solid #805353;border-radius:12px;padding:14px;color:#fff1ee}
.cl-inline-stop>svg{color:#ffbdb5;margin-top:2px}
.cl-inline-stop p{margin:6px 0 0}
.cl-ask-link{display:flex;align-items:center;gap:8px;margin:0;color:var(--cl-dim);font-size:.9rem}
.cl-ask-link svg{color:var(--cl-warm);width:17px;height:17px}
.cl-ask-link .field-link{min-height:0;font-size:inherit;font-weight:650}
.cl-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0}
.cl-fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:9px}
.cl-fieldset legend{font-weight:650;font-size:.95rem;margin:0 0 9px;padding:0}
.cl-chips{margin:0}
.cl-switch-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--cl-line);border-bottom:1px solid var(--cl-line)}
.cl-switch-row strong{display:block;font-size:.95rem}
.cl-switch-row small{display:block;color:var(--cl-dim);font-size:.84rem}
.cl-menus{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px}
.cl-menu{border:1px solid var(--cl-line);border-radius:11px;padding:12px;background:#17221e;min-width:0}
.cl-menu h3{font-size:.8rem;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cl-glow);margin:0 0 8px}
.cl-menu ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cl-menu li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;align-items:start}
.cl-menu li small{grid-column:1/-1;color:var(--cl-dim);font-size:.82rem;line-height:1.4}
.cl-watch{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cl-watch li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px}
.cl-watch time{font-family:var(--mono);font-size:.82rem;color:var(--cl-warm);padding-top:2px}
.cl-watch p{margin:2px 0 0;color:var(--cl-dim);font-size:.9rem}
.cl-invent-out{display:grid;gap:12px}
.cl-invented{border-color:#5b7a69}
.cl-tabs{margin:0}
.cl-ratio-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 8px}
.cl-ratio-btn{min-height:118px;border-radius:14px;border:1px solid #4d6f5f;background:#1c3a30;color:var(--cl-ink);display:grid;place-items:center;gap:2px;padding:12px}
.cl-ratio-btn.neg{background:#2b2620;border-color:#6a5a42}
.cl-ratio-btn b{font-size:2.3rem;line-height:1;font-family:var(--serif);font-weight:400}
.cl-ratio-btn span{font-size:.86rem;color:var(--cl-dim)}
.cl-ratio-btn svg{color:var(--cl-glow)}
.cl-ratio-btn.neg svg{color:var(--cl-warm)}
.cl-ratio-btn:active{transform:scale(.98)}
.cl-ratio-line{font-weight:650;margin:6px 0 0}
.cl-next{margin:10px 0 4px}
.cl-next b{font-family:var(--mono)}
.cl-quote{margin:0 0 12px;padding-left:12px;border-left:3px solid var(--cl-warm);font-family:var(--serif);font-size:1.15rem}
.cl-gen{display:grid;gap:12px}
.cl-gen>h2{margin:0!important}
.cl-gen-out{display:grid;gap:12px;border-top:1px solid var(--cl-line);padding-top:12px}
.cl-ideas{margin:0 0 12px;padding-left:22px;display:grid;gap:8px}
.cl-ideas strong{display:block}
.cl-ideas span{color:var(--cl-dim);font-size:.92rem}
.cl-ok{display:flex;align-items:center;gap:8px;margin:0;color:#cfecd9;font-size:.9rem}
.cl-ok svg{color:var(--cl-glow);width:17px}
.cl-wording{background:#2b2620;border:1px solid #6a5a42;border-radius:10px;padding:12px}
.cl-wording p{margin:0 0 6px}
.cl-wording ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:.9rem}
.cl-note-out{white-space:pre-wrap;background:#14201b;border:1px solid var(--cl-line);border-radius:10px;padding:13px;line-height:1.55;margin:0 0 10px}
.cl-speed{display:flex;gap:4px;flex-wrap:wrap}
.cl-speed button{min-height:40px;border-radius:8px;border:1px solid #435449;background:#1e2a24;color:var(--cl-ink);padding:6px 11px;font-size:.85rem}
.cl-speed button[aria-pressed=true]{background:#23483d;border-color:#78aa92;color:#cfecd9}
.cl-home .support-links{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:8px}
.cl-home .support-links svg:first-child{color:var(--cl-warm,#eac38b)}
.cl-busy,.cl-spice,.cl-plan,.cl-invent-out,.cl-gen-out,.cl-gen{scroll-margin-top:84px}
.cl-spice:focus,.cl-plan:focus,.cl-invent-out:focus,.cl-gen-out:focus,.cl-gen:focus,.cl-busy:focus{outline:none}
.cl-sub{font-family:var(--serif);font-weight:400;font-size:1.5rem;letter-spacing:-.03em;margin:4px 0 0}
.cl-spice{display:grid;gap:12px}
.cl-idea{display:grid;gap:10px}
.cl-idea h3{margin:0;font-size:1.12rem;display:flex;align-items:center;gap:10px}
.cl-idea h3 svg{color:var(--cl-warm)}
.cl-idea-n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#23483d;border:1px solid #78aa92;color:#cfecd9;font-size:.85rem;flex:none}
.cl-idea .field-list{margin:0}
.cl-uses{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.cl-uses span{border:1px solid #526147;border-radius:15px;font-size:.76rem;padding:3px 9px;color:#cad4b4}
.cl-switch{border-style:dashed}
.cl-runaway summary span::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff9d8f;margin-right:9px;vertical-align:middle}
@media (max-width:820px){.cl-home .support-links{grid-template-columns:1fr}}
@media (max-width:560px){
  .cl-ratio-btn{min-height:100px}
  .cl-watch li{grid-template-columns:64px minmax(0,1fr)}
  .cl-switch-row{align-items:start}
}
/* ---------- Enhancements: quick starts, follow-ups, Pattern Finder, Skill Builder, Practice, Color System Lab ---------- */
.cl-starters{display:grid;gap:8px}
.cl-starters .field-chips{margin:0}
.cl-after-line{display:flex;align-items:start;gap:9px;margin:0;color:var(--cl-dim);font-size:.92rem;line-height:1.45}
.cl-after-line svg{color:var(--cl-warm);width:17px;height:17px;margin-top:2px}
.cl-after-line strong{color:var(--cl-ink)}
.cl-follow{display:grid;gap:12px;border-color:#4d6f5f;background:#18261f}
.cl-follow>h2{margin:0!important}
.cl-follow .field-chips{margin:0}
.cl-follow .field-card{background:#1b2a24}
.cl-msg{scroll-margin-top:84px}
.cl-msg:focus{outline:none}
.cl-lead{font-family:var(--serif);font-size:1.18rem;line-height:1.4;margin:0;max-width:56ch;color:var(--cl-ink)}
.cl-dl{margin:0;display:grid;gap:10px}
.cl-dl>div{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--cl-line);border-radius:10px;background:#17221e;min-width:0}
.cl-dl dt{font-weight:650;font-size:.95rem}
.cl-dl dd{margin:0;color:var(--cl-dim);font-size:.92rem;line-height:1.45}
.cl-words dd{color:#dceee1;font-size:1rem}
.cl-guide{display:grid;gap:12px}
.cl-guide>h2{margin:0!important}
.cl-pattern .field-result-group .btn{justify-self:start}
.cl-lesson .eyebrow{margin:0}
.cl-lesson-title,.cl-version-title,.cl-page .panel>.cl-lesson-title,.cl-page .panel>.cl-version-title{display:block;font-family:var(--serif);font-weight:400;font-size:1.7rem;letter-spacing:-.03em;margin:2px 0 12px;line-height:1.15;color:var(--cl-ink)}
.cl-practice-list{margin:0;padding-left:22px;display:grid;gap:8px}
.cl-practice-list strong{display:block;font-weight:600}
.cl-practice-list span{color:var(--cl-dim);font-size:.93rem}
.cl-practice-list span::before{content:'Try: ';color:var(--cl-glow);font-weight:600}
.cl-practice-card{display:grid;gap:12px}
.cl-practice-card>h2{margin:0!important}
.cl-chat{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cl-scene{display:flex;align-items:start;gap:8px;color:var(--cl-dim);font-size:.92rem;font-style:italic;margin:0;line-height:1.45}
.cl-scene svg{width:16px;height:16px;color:var(--cl-warm);margin-top:2px;flex:none}
.cl-bubble{max-width:min(520px,88%);padding:10px 14px;border:1px solid #3b5146;background:#22302b;border-radius:16px 16px 16px 5px;justify-self:start}
.cl-bubble small{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--cl-warm);margin-bottom:3px}
.cl-bubble p{margin:0;font-size:1rem;line-height:1.45}
.cl-bubble.staff{justify-self:end;background:#23483d;border-color:#78aa92;border-radius:16px 16px 5px 16px}
.cl-bubble.staff small{color:#cfecd9}
.cl-bubble.end{border-style:dashed}
.cl-bubble:focus{outline:2px solid #e6ce90;outline-offset:3px}
.cl-feedback{display:block}
.cl-coach{border:1px dashed #52707a;background:#1a272c;border-radius:12px;padding:12px 14px;display:grid;gap:8px}
.cl-coach p{margin:0;display:grid;gap:2px;font-size:.93rem;line-height:1.45}
.cl-coach strong{display:flex;align-items:center;gap:6px;font-size:.8rem;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cl-glow)}
.cl-coach strong svg{width:15px;height:15px}
.cl-coach .cl-stronger span{font-family:var(--serif);font-size:1.08rem;color:#e7f3e9}
.cl-reply{display:grid;gap:10px}
.cl-round{margin:0;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cl-warm)}
.cl-wrap{display:grid;gap:12px;border-color:#78aa92}
.cl-wrap>h2{margin:0!important}
.cl-wrap:focus,.cl-gen:focus{outline:none}
.cl-ver-tabs button{flex:1 1 150px}
.cl-version{display:grid;gap:12px}
.cl-version .eyebrow{margin:0}
.cl-page .panel>.cl-version-title{margin:0}
.cl-colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cl-color{border:1px solid;border-radius:12px;padding:12px 14px;min-width:0;display:grid;gap:6px;align-content:start}
.cl-color h3{margin:0;display:flex;align-items:center;gap:9px;font-size:1.05rem}
.cl-swatch{width:16px;height:16px;border-radius:50%;flex:none;border:2px solid #0006}
.cl-color-means{margin:0;font-weight:650}
.cl-color-sub{margin:4px 0 0;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cl-dim)}
.cl-color .field-list{margin:0;padding-left:18px;font-size:.92rem}
.cl-color p{margin:0;font-size:.92rem;line-height:1.45}
.cl-color.green{border-color:#4fae7f;background:#13281f}
.cl-color.green .cl-swatch{background:#3dbb84}
.cl-color.green h3{color:#cdeedd}
.cl-color.yellow{border-color:#b59a3c;background:#28251a}
.cl-color.yellow .cl-swatch{background:#e9c84d}
.cl-color.yellow h3{color:#f6e7b0}
.cl-color.red{border-color:#b35a5a;background:#2c1c1e}
.cl-color.red .cl-swatch{background:#e07272}
.cl-color.red h3{color:#f8d3cf}
.cl-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:10px;margin:0}
.cl-tier{border:1px solid var(--cl-line);border-radius:11px;padding:12px;background:#17221e;min-width:0}
.cl-tier h3{margin:0;font-size:.98rem}
.cl-tier small{display:block;color:var(--cl-warm);font-size:.8rem;margin:2px 0 6px}
.cl-tier .field-list{margin:6px 0 0;padding-left:18px;font-size:.92rem}
.cl-fine{margin:12px 0 0;padding-left:18px;display:grid;gap:4px;color:var(--cl-dim);font-size:.86rem}
.cl-ref{padding:0!important}
.cl-ref summary{cursor:pointer;min-height:52px;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:650;list-style:none}
.cl-ref summary::-webkit-details-marker{display:none}
.cl-ref summary>span{display:flex;align-items:center;gap:9px}
.cl-ref summary>span svg{color:var(--cl-glow);width:18px;height:18px}
.cl-ref summary>svg{width:16px;height:16px;color:var(--cl-dim);transition:transform .15s}
.cl-ref[open] summary>svg{transform:rotate(180deg)}
.cl-ref-body{padding:0 18px 18px;display:grid;gap:10px}
.cl-ref-body .field-list{margin:0}
.cl-ref-body .field-buttons{margin-top:4px}
.cl-color-out .cl-version-title{margin-top:0}
.cl-color-out .eyebrow{margin:0}
.cl-idea-more{display:flex}
.cl-idea-more .btn{min-height:40px;padding:7px 12px;font-size:.9rem}
.cl-focus{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:13px 16px;border:1px solid #5d5a3e;background:#24261d;border-radius:12px}
.cl-focus svg{color:var(--cl-warm,#eac38b);width:22px;height:22px;flex:none}
.cl-focus span{display:grid;gap:2px;font-size:1rem;line-height:1.4}
.cl-focus small{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--cl-warm,#eac38b)}
.cl-home-group{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#94a99c;margin:16px 0 0;font-weight:600}
.cl-home .cl-home-group+.support-links{margin-top:8px}
.cl-pattern,.cl-color-out,.cl-wrap,.cl-latest,#cl-color-ai,#cl-skill-fit{scroll-margin-top:84px}
.cl-pattern:focus,.cl-color-out:focus,.cl-latest:focus-visible{outline:none}
/* Proposal and lesson pages (print and PDF): white paper, color named in text as well as shown. */
.cl-paper-colors{display:grid;gap:8px;margin:6px 0}
.cl-paper-color{border:1px solid #b9c4bc;border-left:7px solid;padding:6px 10px;border-radius:4px;break-inside:avoid}
.cl-paper-color.green{border-left-color:#2e8b57}
.cl-paper-color.yellow{border-left-color:#c9a227}
.cl-paper-color.red{border-left-color:#b23b3b}
.cl-paper-color p{margin:3px 0 0}
.cl-paper-fine{font-size:10pt;color:#3a5145}
@media (max-width:820px){.cl-colors{grid-template-columns:1fr}}
@media (max-width:560px){
  .cl-bubble{max-width:94%}
  .cl-ref summary{padding:12px 14px}
  .cl-ref-body{padding:0 14px 14px}
  .cl-lesson-title,.cl-version-title,.cl-page .panel>.cl-lesson-title,.cl-page .panel>.cl-version-title{font-size:1.45rem}
}