/* assistant.css: the AI coworker page (assistant.html) and its section on the landing.
   Identity: a fresh olive-lime ("celadon's greener cousin"), calm, over the same Opal family. */
.page--ai { --id: #4f6f10; --id-soft: #d6e7a0; --id-wash: #eaf2d6; --id-tint: #f5f9ea; }
:root[data-theme="dark"] .page--ai { --id: #cfe58a; --id-soft: #4f6f10; --id-wash: #171d0d; --id-tint: #11160a; }
.page--ai .lead strong, .page--ai .opal-text { color: var(--id); }
.ai-head { background: radial-gradient(70% 80% at 12% 20%, var(--id-wash) 0%, transparent 70%), var(--bg); }

/* ---------- the plan card: the app's own checklist, ticking itself off ---------- */
.plan { display: grid; gap: 4px; padding: clamp(18px, 2.4vw, 30px); border-radius: var(--r-surface); background: var(--glass); box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
.plan__k { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); padding-bottom: 10px; }
.plan__i { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: center; padding: 9px 0; font-size: clamp(15px, 1.4vw, 18px); color: var(--text); border-top: 1px solid var(--line, rgba(23, 49, 61, 0.1)); }
.plan__i::before { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 1.6px solid var(--text-3); box-sizing: border-box; transition: background 0.5s var(--ease), border-color 0.5s var(--ease); }
.plan.is-in .plan__i::before { animation: plan-tick 0.6s var(--ease) forwards; animation-delay: calc(0.5s + var(--n, 0) * 0.65s); }
@keyframes plan-tick {
  to { border-color: var(--id); background: var(--id) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 14px no-repeat; }
}
:root[data-theme="dark"] .plan__i::before { }
:root[data-theme="dark"] .plan.is-in .plan__i::before { }
@media (prefers-reduced-motion: reduce) { .plan.is-in .plan__i::before { animation-duration: 0.01s; animation-delay: 0s; } }

/* ---------- three steps: plan, part, checked ---------- */
.ai-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); counter-reset: ai; }
.ai-step { display: grid; gap: 14px; align-content: start; }
.ai-step__n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; color: var(--id); text-transform: uppercase; }
.ai-step h3 { font-family: var(--font-display); font-weight: 300; font-size: clamp(26px, 2.6vw, 40px); letter-spacing: -0.02em; line-height: 1.08; }
.ai-step h3 strong { font-weight: 600; }
.ai-step p { color: var(--text-2); }
.ai-step .media { margin-top: 4px; }
@media (max-width: 900px) { .ai-steps { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- jobs drifting past: what it does in the other workspaces ---------- */
.ai-jobs { display: flex; flex-wrap: wrap; gap: 10px; }
.ai-jobs span { padding: 10px 18px; border-radius: 999px; background: var(--id-wash); color: var(--text); font-size: 15px; }
.page--ai .ai-jobs span, .ai-sec .ai-jobs span { background: var(--glass); box-shadow: var(--shadow-card); }

/* ---------- the model: where it runs ---------- */
.ai-models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.ai-model { display: grid; gap: 10px; align-content: start; padding: clamp(20px, 2.4vw, 32px); border-radius: var(--r-surface); background: var(--glass); box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.ai-model:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }
.ai-model__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--id); }
.ai-model h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2vw, 30px); line-height: 1.1; letter-spacing: -0.01em; }
.ai-model ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ai-model li { padding: 5px 12px; border-radius: 999px; background: var(--id-wash); font-size: 13.5px; color: var(--text); }
@media (max-width: 900px) { .ai-models { grid-template-columns: 1fr; } }

/* ---------- steer it: real calls, set like a margin note, not a terminal ---------- */
.call { position: relative; padding: clamp(18px, 2.4vw, 30px) clamp(18px, 2.4vw, 32px) clamp(18px, 2.4vw, 30px) clamp(22px, 2.8vw, 38px); border-radius: var(--r-surface);
  background: var(--glass); box-shadow: var(--shadow-card); font-family: var(--font-mono); font-size: clamp(12px, 1.05vw, 14.5px); line-height: 1.7; color: var(--text); overflow: hidden;
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
.call::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: var(--id-soft); }
.call__row { display: grid; grid-template-columns: minmax(0, 1fr); padding: 5px 0; opacity: 0; transform: translateY(8px); }
.call.is-in .call__row { animation: call-in 0.7s var(--ease) forwards; animation-delay: calc(0.2s + var(--n, 0) * 0.5s); }
@keyframes call-in { to { opacity: 1; transform: none; } }
.call__c { overflow-wrap: anywhere; }
.call__c b { color: var(--id); font-weight: 600; }
.call__c i { font-style: normal; color: var(--text-3); }
.call__r { color: var(--text-2); padding-left: 1.4em; overflow-wrap: anywhere; }
.call__r::before { content: "\2192\00a0"; color: var(--id); }
.call__note { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line, rgba(23, 49, 61, 0.1)); color: var(--text-3); font-size: 0.92em; }
@media (prefers-reduced-motion: reduce) { .call__row { opacity: 1; transform: none; animation: none !important; } }
.cmd { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: var(--id-wash); font-family: var(--font-mono); font-size: clamp(12px, 1.05vw, 14px); overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.cmd::-webkit-scrollbar { display: none; }
.cmd i { font-style: normal; color: var(--id); }

/* ---------- the landing's section ---------- */
.ai-sec { position: relative; overflow: clip; background: radial-gradient(60% 70% at 85% 30%, var(--id-wash, #eaf2d6) 0%, transparent 70%); }
:root[data-theme="dark"] .ai-sec { --id-wash: #171d0d; --id: #cfe58a; --id-soft: #4f6f10; }
.ai-sec { --id: #4f6f10; --id-soft: #d6e7a0; --id-wash: #eaf2d6; }
:root[data-theme="dark"] .ai-sec { --id: #cfe58a; --id-soft: #4f6f10; --id-wash: #171d0d; }
.ai-sec .sta__k { color: var(--id); }
.ai-sec .lead strong { color: var(--id); }
a.ai-model { color: inherit; text-decoration: none; }
a.ai-model h3 { transition: color 0.4s var(--ease); }
a.ai-model:hover h3 { color: var(--id); }
.ai-sec .ai-models { margin-top: 8px; }

.page--ai .feat > *, .ai-sec .feat > * { min-width: 0; }
.call { max-width: 100%; }