/* Clarity layer — loaded last. Keeps the approved three-column layout and copy;
   raises legibility, says whose turn it is, and makes every next step obvious
   for people who read slowly, are new to the web, or are easily overloaded. */

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- Type: nothing a reader needs is smaller than 13px ---------- */
body{font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.card p,.active-panel p{font-size:15px;line-height:1.6}
.eyebrow{font-size:12px;letter-spacing:1.2px}
.step-title{font-size:15px;align-items:flex-start}
.step-title small,.counter,.owner,.center-footer,footer,.availability,.resource-status{font-size:13px}
.search-title{font-size:14px}
.search-filters button{font-size:14px}
.search-filters span{font-size:13px}
.text-button{font-size:14px}
.primary{font-size:15px;padding:11px 18px;border-radius:12px}
dialog p,#modal-content p{font-size:16px;line-height:1.65}
#faq-panel .answer p,.search-results .answer{font-size:15px}
.search-results summary{font-size:15px;line-height:1.5}
.intro p{font-size:17px}

/* Quiet the header: one status pill, one labelled theme switch. */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:auto;border-radius:22px;padding:0 14px 0 12px;font-size:13px;font-weight:600;color:var(--ink)}
.theme-toggle svg{width:18px;height:18px;flex:none}
@media(max-width:600px){.theme-toggle{padding:0;width:44px}.theme-label{display:none}}

/* The search box stays inviting but still: no endless pulse. */
.search-hub>.search-field::before{animation:none;opacity:.3}

/* ---------- Whose turn: one chip, same words everywhere ---------- */
.turn-chip{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;padding:7px 13px 7px 10px;border-radius:999px;font-size:14px;font-weight:650;line-height:1.3;margin:0 0 14px}
.turn-chip svg{width:17px;height:17px;flex:none}
.turn-chip.you{background:var(--blue);color:#fff}
.turn-chip.team{background:#f3ead7;color:#6b4d12;border:1px solid #e0cda6}
.turn-chip.done{background:#e3f4ea;color:#1f6b45;border:1px solid #b9dfc9}
.turn-then{font-weight:500;opacity:.92}
.dark .turn-chip.you{color:#15213c}
.dark .turn-chip.team{background:#3b3222;color:#f1d9a8;border-color:#5c4b2c}
.dark .turn-chip.done{background:#1f3a2c;color:#a6e3c1;border-color:#2f5a43}
#right-now-card .turn-chip{margin:2px 0 4px}
#right-now-card .owner:empty,.owner:empty{display:none}
#right-now-card h2{margin-top:10px}

/* ---------- Timeline: every upcoming stage says what it is ---------- */
.step-title>span{display:flex;flex-direction:column;gap:3px}
.step-preview{font-size:14px;font-weight:400;line-height:1.5;color:var(--muted)}
.step-title small{flex:none;padding-top:1px}
.step.future .step-title>span{color:var(--ink)}
.step.future .node{font-weight:600}
.step{min-height:0;padding-bottom:22px}
.step.done .step-title{color:var(--ink)}
.active-panel h3{font-size:22px}

/* ---------- Kickoff checklist ---------- */
.checklist{margin:20px 0 4px;border-top:1px solid var(--line);padding-top:18px}
.checklist-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:15px;font-weight:650;margin-bottom:12px}
.checklist-count{font-size:13px;font-weight:600;color:var(--blue);white-space:nowrap}
.checklist ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.task{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 14px 14px 12px;transition:border-color .2s,background-color .2s}
.task-check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;min-height:44px}
.task-check input{position:absolute;opacity:0;width:1px;height:1px}
.box{flex:none;width:28px;height:28px;border-radius:9px;border:2px solid var(--control-border,var(--line));display:grid;place-items:center;color:#fff;background:var(--card);transition:background-color .2s,border-color .2s,transform .15s}
.box svg{width:16px;height:16px;opacity:0;transform:scale(.6);transition:opacity .15s,transform .2s}
.task-check input:checked+.box{background:#2f8a5e;border-color:#2f8a5e}
.task-check input:checked+.box svg{opacity:1;transform:none}
.task-check input:focus-visible+.box{outline:3px solid var(--blue);outline-offset:3px}
.task-check:active .box{transform:scale(.92)}
.task-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.task-num{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.task-text strong{font-size:16px;line-height:1.35}
.task-text>span:last-child{font-size:14px;line-height:1.55;color:var(--muted)}
.task.done{background:transparent;border-color:#b9dfc9}
.task.done .task-text strong{color:var(--muted);font-weight:600}
.dark .task.done{border-color:#2f5a43}
.task-extra{margin:10px 0 0 40px}
.task-links{display:flex;flex-wrap:wrap;gap:6px 16px}
.task-link{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:15px;font-weight:600;color:var(--blue);text-decoration:none}
.task-link:hover{text-decoration:underline;text-underline-offset:3px}
.checklist-done{margin:14px 0 0!important;padding:12px 14px;border-radius:12px;background:#e3f4ea;color:#1f6b45!important;font-weight:600;font-size:14px!important}
.dark .checklist-done{background:#1f3a2c;color:#a6e3c1!important}
.checklist-note{font-size:13px!important;margin-top:10px!important}

/* Unfinished steps keep their links; finished steps fold away. The next step is highlighted. */
.task.done .task-extra{display:none}
.task.done .task-text>span:last-child{display:none}
.task.current{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.task.done .task-check{min-height:44px;align-items:center}
.task.done .task-num{color:#2f8a5e}
.dark .task.done .task-num{color:#8ad3aa}

/* Ticket message + copy button (checklist and guide dialog). */
.ticket-example{display:flex;flex-direction:column;gap:10px;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.ticket-text{margin:0!important;font-size:15px!important;line-height:1.6!important;color:var(--ink)!important}
.copy-button{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border-radius:11px;border:1px solid var(--control-border,var(--line));background:var(--card);color:var(--ink);font-size:14px;font-weight:600}
.copy-button svg{width:17px;height:17px}
.copy-button.copied{border-color:#2f8a5e;color:#1f6b45;background:#e3f4ea}
.dark .copy-button.copied{color:#a6e3c1;background:#1f3a2c}

/* ---------- Locked resources say why, on the card ---------- */
.lock-reason{margin-top:10px!important;font-size:14px!important;font-weight:550;color:var(--ink)!important}
.dark .lock-reason{font-weight:500}

/* ---------- Dialogs: a close ✕ where people look for it ---------- */
.modal-x{position:absolute;top:14px;right:14px;z-index:2;font-size:16px}
#modal-content{padding-right:64px}
#modal-content h2{padding-right:0}
@media(max-width:600px){#modal-content{padding-right:58px}.modal-x{top:12px;right:12px}}

/* ---------- Motion: calm, quick, and only where it explains something ---------- */
@media(prefers-reduced-motion:no-preference){
 .primary,.text-button,.copy-button,.store-badge,.search-filters button,.icon-button,.task-link{transition:transform .15s ease,filter .15s ease,background-color .2s,border-color .2s,box-shadow .2s}
 .primary:hover{filter:brightness(1.07);box-shadow:0 6px 16px #3569ec33}
 .primary:active,.copy-button:active,.search-filters button:active,.icon-button:active{transform:scale(.97)}
 .column>.card{transition:transform .25s ease,box-shadow .25s ease}
 .column>.card:has(a,button:not([disabled])):hover{transform:translateY(-2px);box-shadow:0 18px 40px -24px #39446a55}
 .active-panel.enter{animation:panel-in .35s cubic-bezier(.2,.8,.2,1) both}
 @keyframes panel-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

/* ---------- Phones: one story, top to bottom ---------- */
@media(max-width:850px){
 /* The journey's active panel already says exactly this, with the same turn chip. */
 #right-now-card{display:none}
}
@media(max-width:600px){
 .card p,.active-panel p{font-size:16px}
 .step-preview{font-size:14px}
 .task-extra{margin-left:0}
 .copy-button{align-self:stretch;justify-content:center}
 .checklist-head{flex-direction:column;gap:2px}
 .turn-chip{font-size:14px}
 .header-right>.pill{display:inline-flex}
 .task{border:0;border-top:1px solid var(--line);border-radius:0;background:none;padding:14px 0}
 .task.current{box-shadow:none;border-color:var(--line)}
 .task:first-child{border-top:0;padding-top:4px}
 .checklist ol{gap:0}
}

/* ---------- Review round 1 (accessibility audit) ---------- */
.checklist.expanded .task-extra{display:block}
.checklist.expanded .task.done .task-text>span:last-child{display:block}
#modal-content .checklist{border-top:0;padding-top:0}
.task-check input:focus-visible+.box{outline:3px solid var(--blue);outline-offset:2px;box-shadow:0 0 0 6px var(--card)}
.page-pending{margin-top:16px;padding:14px 16px;border:1px dashed var(--control-border,var(--line));border-radius:14px}
.page-pending-title{display:flex;align-items:center;gap:8px;margin:0!important;font-weight:650;color:var(--ink)!important;font-size:15px!important}
.page-pending-title svg{width:18px;height:18px;flex:none}
.page-pending p#page-link-note{font-size:14px!important;margin-top:6px!important}
.panel-hint{display:none;margin-top:10px!important;font-weight:550;color:var(--ink)!important}
.store-badge{height:auto;min-height:44px}
.scroll-hint{font-size:13px}
@media(max-width:850px){.panel-hint{display:block}}
@media(max-width:600px){.counter,.center-footer{font-size:13px}#faq-panel .answer p,#faq-panel .answer{font-size:15px}.store-badge{min-height:48px}}

/* ---------- Review round 1 (interaction QA) ---------- */
/* Kickoff's checklist makes the journey tall; side cards keep their natural
   height there instead of stretching into empty space. Other stages keep the
   approved equal-height columns. */
@media(min-width:851px){body[data-stage="2"] .column>.card{flex:0 0 auto}}
#modal-content{padding-bottom:40px}
/* Very wide displays (e.g. 6K at 90%): scale the whole page up rather than
   leaving a small column in a sea of margin. */
@media(min-width:2200px){.shell{zoom:1.3}}
@media(min-width:2900px){.shell{zoom:1.5}}

/* Search: strongest answers first, looser matches under a quiet divider. */
.also-related{margin:18px 0 2px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.result-count{font-size:13px}
.search-results .source{font-size:12px}

/* ---------- Real-data modes ---------- */
html[data-loading] .grid{opacity:.35;pointer-events:none;transition:opacity .2s}
#right-now-card .eyebrow+#next-turn:empty{display:none}
#next-desc a{color:var(--blue);font-weight:600}
.center-footer:empty{display:none}

/* Home (no personal link): the question, the answers, and one way to apply. */
body[data-stage="home"] .intro{padding-bottom:18px}
body[data-stage="home"] h1{max-width:22ch}
.apply-card{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;padding:26px 28px;
 --mx:50%;--my:50%;transition:border-color .25s,box-shadow .3s,transform .3s cubic-bezier(.2,.8,.2,1)}
/* A soft light that follows the pointer, and a glowing edge on hover. */
.apply-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;
 background:radial-gradient(420px circle at var(--mx) var(--my),#6b8cff26,#9b73ee14 40%,transparent 70%)}
.apply-card:hover::before,.apply-card:focus-within::before{opacity:1}
.apply-card:hover,.apply-card:focus-within{border-color:#8fa6f5;box-shadow:0 0 0 1px #8b9fff33,0 18px 44px -26px #4b64d977}
.dark .apply-card:hover,.dark .apply-card:focus-within{border-color:#6f86d6}
.apply-glyph{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;
 background:linear-gradient(140deg,#2f5fe0,#7d63ea 60%,#3aa6d8);box-shadow:0 8px 20px -10px #4b5fd9aa}
.apply-glyph svg{width:26px;height:26px}
.apply-copy h2{margin:0 0 4px;font-size:21px;letter-spacing:-.4px}
.apply-copy p{margin:0!important;font-size:15px}
.apply-steps{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;padding:0;font-size:13px;font-weight:600;color:var(--ink)}
.apply-steps li{display:flex;align-items:center;gap:7px;position:relative}
.apply-steps li:not(:last-child)::after{content:"";position:absolute;right:-12px;width:6px;height:6px;border-top:1.6px solid var(--muted);border-right:1.6px solid var(--muted);transform:rotate(45deg);opacity:.7}
.apply-steps span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--soft);color:var(--blue);font-size:11px;font-weight:700}
/* The button: gradient, a sheen that sweeps across on hover, an arrow that nudges, a gentle press. */
.apply-button{position:relative;overflow:hidden;margin:0;min-height:52px;min-width:170px;padding:0 22px;gap:10px;font-size:16px;font-weight:700;border-radius:14px;
 background:linear-gradient(120deg,#2553d4,#5a55e0 55%,#7a5ee8);color:#fff;box-shadow:0 10px 24px -12px #3b4fd1cc}
.dark .apply-button{color:#fff;background:linear-gradient(120deg,#3a67ea,#6a62ee 55%,#8a6cf0)}
.apply-button::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,#ffffff55 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.apply-arrow{width:20px;height:20px;flex:none}
.apply-spinner{display:none;width:18px;height:18px;border-radius:50%;border:2.2px solid #ffffff66;border-top-color:#fff}
.apply-button.is-loading{pointer-events:none;filter:saturate(.9)}
.apply-button.is-loading .apply-arrow{display:none}
.apply-button.is-loading .apply-spinner{display:block;animation:apply-spin .8s linear infinite}
.apply-button:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
@keyframes apply-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:no-preference){
 .apply-card:hover{transform:translateY(-2px)}
 .apply-button{transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .25s,filter .2s}
 .apply-button:hover{transform:translateY(-1px);box-shadow:0 14px 30px -12px #3b4fd1ee}
 .apply-button:hover::after{transition:transform .7s ease;transform:translateX(120%)}
 .apply-button:active{transform:scale(.97)}
 .apply-arrow{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
 .apply-button:hover .apply-arrow,.apply-button:focus-visible .apply-arrow{transform:translateX(4px)}
 .apply-glyph{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
 .apply-card:hover .apply-glyph{transform:rotate(-8deg) scale(1.06)}
}
@media(prefers-reduced-motion:reduce){.apply-button.is-loading .apply-spinner{animation:none;border-top-color:#ffffff66}}
@media(max-width:700px){
 .apply-card{grid-template-columns:auto 1fr;padding:22px 20px;gap:16px}
 .apply-button{grid-column:1/-1;width:100%;min-height:54px}
 .apply-glyph{width:46px;height:46px;border-radius:14px;align-self:start}
}

/* The creator's name: bigger, bolder, a gradient that shimmers twice and settles
   (the funded portal's hello-name, in this portal's blue/violet/cyan). */
.creator-name{display:inline-block;font-weight:800;font-size:1.14em;letter-spacing:-.02em;padding:0 .04em .08em;
 background:linear-gradient(105deg,#2553d4 0%,#6b5ae6 30%,#9b73ee 45%,#3aa6d8 62%,#2553d4 100%);background-size:240% 100%;
 -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
 filter:drop-shadow(0 3px 14px #587aeb40);animation:name-shimmer 5.5s ease-in-out .3s 2 both}
.dark .creator-name{background-image:linear-gradient(105deg,#7fa2ff 0%,#b9a4ff 30%,#e7ddff 45%,#8fe3f2 62%,#7fa2ff 100%);filter:drop-shadow(0 3px 16px #8fb0ff40)}
@keyframes name-shimmer{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
@media(prefers-reduced-motion:reduce){.creator-name{animation:none}}