/* Public fictional demo only. Both routes use this same shell and original artwork. */
.mitarka-demo-shell{container:demo-shell / inline-size;min-width:0;margin:0 0 24px}
.mitarka-demo-shell .demo-header-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.8fr) minmax(0,1fr);gap:24px;align-items:start;padding:20px 0 12px}
.mitarka-demo-shell .demo-logo{width:250px;max-width:100%;aspect-ratio:1605 / 479;overflow:hidden;align-self:center}
/* Crop only transparent margins: original PNG 2048x682, artwork bounds (272,22)-(1877,501). */
.mitarka-demo-shell .demo-logo img{display:block;width:127.60125%;max-width:none;height:auto;transform:translate(-13.28125%,-3.22581%)}
.mitarka-demo-shell .demo-person{text-align:center;min-width:0;display:grid;gap:6px;overflow-wrap:anywhere}
.mitarka-demo-shell .demo-person h1{font:750 1.3rem/1.35 Avenir,"Avenir Next",system-ui,sans-serif;margin:0}
.mitarka-demo-shell .demo-person p{margin:0;max-width:none;justify-self:stretch}
.mitarka-demo-shell .demo-fictional,.mitarka-demo-shell .demo-scope{font-size:.85rem;line-height:1.5;color:#46566b!important}
.mitarka-demo-shell .demo-tools{min-width:0;display:grid;justify-items:end;gap:14px}
.mitarka-demo-shell .demo-header-top{position:relative;isolation:isolate}
.mitarka-demo-shell .demo-header-top::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('/assets/mitarka-woven-outline.svg') repeat-x center 85%;background-size:80px 70px;opacity:.09;mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent)}
.mitarka-demo-shell .demo-logo,.mitarka-demo-shell .demo-person>*,.mitarka-demo-shell .demo-utility-actions{background:#f2f5fa;box-shadow:0 0 12px 7px #f2f5fa}
.mitarka-demo-shell .demo-person :is(h1,p){justify-self:center;width:fit-content;max-width:100%}
.mitarka-demo-shell .demo-tools{align-self:start;align-content:start}
.mitarka-demo-shell .demo-tools::after{display:none}
.mitarka-demo-shell .demo-utility-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;align-items:center;min-width:0}
.mitarka-demo-shell :is(button,.demo-primary-nav a){display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 18px;margin:0;border:1px solid #aab8c9;border-radius:10px;background:#fff;color:#245bd7;font:inherit;line-height:1.4;text-decoration:none;white-space:normal;max-width:100%;text-align:center;cursor:pointer}
.mitarka-demo-shell .demo-primary-nav{display:flex;flex-wrap:wrap;gap:16px;margin:24px 0 0;padding:0 0 18px;border-bottom:1px solid #c8d3e0}
.mitarka-demo-shell .demo-primary-nav [aria-current=page]{border-color:#245bd7;background:#edf3ff;font-weight:750}
.mitarka-demo-shell .demo-session-panel{padding:24px;margin:20px 0;background:#fff;border:1px solid #c8d3e0;border-radius:14px}
.mitarka-demo-shell .demo-session-panel p{margin:0}
.mitarka-demo-shell .demo-session-panel>a{margin-top:16px;min-height:44px}
.mitarka-demo-shell [hidden],.brief-setup [hidden],.demo-qa [hidden]{display:none!important}
body.public-demo-work>header.mitarka-demo-shell{display:block!important}
body.public-demo-work>main{margin:0}
@container demo-shell (max-width:54em){
 .mitarka-demo-shell .demo-header-top{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:16px}
 .mitarka-demo-shell .demo-logo{width:230px;justify-self:center}
 .mitarka-demo-shell .demo-tools{grid-row:2;justify-items:center}
 .mitarka-demo-shell .demo-utility-actions{justify-content:center}
 .mitarka-demo-shell .demo-header-top::before{display:none}
 .mitarka-demo-shell .demo-person{grid-row:3}
}
/* One reusable action row; the gap leaves room for both focus outlines. */
body:has(#demo-screen) .demo-actions,.public-demo-work .demo-actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:16px;margin-top:24px;min-width:0}
body:has(#demo-screen) .demo-actions>* ,.public-demo-work .demo-actions>*{min-width:0;max-width:100%;margin:0}
body:has(#demo-screen) .guided-card>.demo-actions{margin-top:8px}
body:has(#demo-screen) details>.demo-actions{margin-top:24px}
body:has(#demo-screen) .guided-card{padding:24px}
.public-demo-work .question-card{padding:24px}
body:has(#demo-screen) .demo-actions button,.public-demo-work .demo-actions button{min-height:48px}
@media(max-width:760px){body:has(#demo-screen) .demo-actions,.public-demo-work .demo-actions{flex-direction:column}body:has(#demo-screen) .demo-actions>*,.public-demo-work .demo-actions>*{width:100%}}
.priority-prompt{font-size:.9rem;color:#812319;margin:8px 0;line-height:1.5}
/* Visible perspective and evidence steps, separate from an existing saved brief. */
.brief-setup{display:grid;gap:24px;min-width:0;margin-top:8px}
.brief-setup .perspective-group{border:0;padding:0;margin:0;min-width:0}
.brief-setup .perspective-group legend{float:none;padding:0;margin-bottom:12px;font-size:1.15rem;font-weight:750}
.brief-setup .perspective-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
.brief-setup .perspective-card{display:flex;align-items:flex-start;gap:12px;padding:20px;margin:0;border:2px solid #dbe3ee;border-radius:14px;cursor:pointer;background:white;font-weight:400;min-width:0}
.brief-setup .perspective-card:has(:checked){border-color:#245bd7;background:#edf3ff}
.brief-setup :is(.perspective-card,.response-selection-toggle) input{width:22px;height:22px;min-height:0;padding:0;margin:4px 0 0;flex:none;accent-color:#245bd7}
.brief-setup .perspective-copy{display:grid;gap:12px;min-width:0}
.brief-setup .perspective-title{font-size:1.15rem;font-weight:750}
.brief-setup .perspective-subtitle{font-size:.93rem;font-weight:650}
.brief-setup .perspective-description{font-size:.9rem;line-height:1.55;font-weight:400}
.brief-setup .brief-scope-note{font-size:.9rem;margin-top:16px}
.brief-setup .brief-audience{padding:16px 20px;border-left:3px solid #c8d3e0;background:#f3f6fa;display:grid;gap:6px;font-size:.9rem}
.brief-setup .evidence-heading{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.brief-setup .selection-count{font-size:.85rem;color:#245bd7;background:#edf3ff;border-radius:20px;padding:6px 14px}
.brief-setup .response-selections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;min-width:0}
.brief-setup .response-selection{padding:20px;border:1px solid #dbe3ee;border-radius:14px;min-width:0;align-self:start;background:#fff}
.brief-setup .response-selection-toggle{display:flex;align-items:flex-start;gap:12px;margin:0;cursor:pointer;font-weight:400}
.brief-setup .response-selection-toggle>span{display:grid;gap:8px;min-width:0}
.brief-setup .response-meta{font-size:.85rem;line-height:1.5;color:#46566b}
.brief-setup .response-title{font-size:1rem;line-height:1.5;font-weight:650}
.brief-setup .submitted-source{margin-top:16px;padding-top:12px}
.brief-setup .submitted-source summary{font-size:.9rem}
.brief-setup .submitted-source p{font-size:.95rem;margin:12px 0}
.brief-setup .example-availability{font-size:.95rem}
.brief-setup .selection-notice:empty{display:none}
body:has(#demo-screen) .brief-setup>.demo-actions{margin-top:0}
@media(max-width:1100px){.brief-setup .perspective-cards{grid-template-columns:1fr}.brief-setup .response-selections{grid-template-columns:1fr}}
@container (max-width:45em){.brief-setup .perspective-cards,.brief-setup .response-selections{grid-template-columns:1fr}}
/* Themes and questions remain separate native disclosures with independent state. */
.demo-qa{display:grid;gap:18px;min-width:0}
.demo-qa .qa-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:12px}
.demo-qa .qa-heading>div{display:grid;gap:10px;flex:1 1 28rem}
.demo-qa .qa-heading>button{flex:none}
.demo-qa .qa-theme{padding:0!important;margin:0!important;border:1px solid #ced9e7!important;background:#edf1f7;border-radius:14px;min-width:0;display:block!important}
.demo-qa .qa-theme>summary{display:flex;gap:20px;align-items:center;list-style:none;padding:22px 24px;cursor:pointer;min-height:48px;margin:0}
.demo-qa summary::-webkit-details-marker{display:none}
.demo-qa .qa-theme-title{display:grid;gap:6px;flex:1;min-width:0}
.demo-qa .qa-kicker{font-size:.7rem;font-weight:750;color:#245bd7;letter-spacing:.06em}
.demo-qa .qa-theme-name{font-size:1.18rem;font-weight:750;line-height:1.4}
.demo-qa .qa-theme-cue{font-size:.85rem;font-weight:400;color:#245bd7}
.demo-qa .qa-chevron{font-size:1.25rem;color:#245bd7}
.demo-qa .qa-questions{margin:0 24px 24px;padding:0 22px;background:#fff;border:1px solid #dbe3ee;border-radius:12px}
.demo-qa .qa-question{border:0;border-bottom:1px solid #dbe3ee;padding:0;margin:0}
.demo-qa .qa-question:last-child{border-bottom:0}
.demo-qa .qa-question>summary{display:flex;align-items:center;justify-content:space-between;gap:18px;list-style:none;padding:18px 0;min-height:48px;font-size:1rem;font-weight:400;cursor:pointer;line-height:1.5}
.demo-qa .qa-question[open]>summary{font-weight:650}
.demo-qa .qa-question-icon{font-weight:400;font-size:1.4rem;color:#245bd7;flex:none}
.demo-qa .qa-answer{padding:0 34px 22px 0}
.demo-qa .qa-answer p{font-size:1rem;font-weight:400;line-height:1.65;max-width:75ch;margin:0}
@media(max-width:760px){.demo-qa .qa-theme>summary{padding:20px;gap:12px;flex-wrap:wrap}.demo-qa .qa-theme-title{flex-basis:calc(100% - 40px)}.demo-qa .qa-theme-cue{order:3;flex-basis:100%}.demo-qa .qa-questions{margin:0 14px 14px;padding:0 16px}.demo-qa .qa-answer{padding-right:0}}

.public-demo-work #app.demo-preparation{row-gap:24px}
.public-demo-work #app .demo-actions{gap:16px;margin-top:24px}
.public-demo-work #app.demo-preparation>.demo-actions{margin-top:0}
/* A checkbox and its associated text share the first line, including at 200% text.
   Reset generic input sizing/margins locally; continuation lines stay in the text column. */
body:has(#demo-screen) label.demo-check,.public-demo-work label.demo-check{
 display:grid;grid-template-columns:24px minmax(0,1fr);align-items:start;
 column-gap:12px;row-gap:0;margin:0;line-height:1.5;cursor:pointer;min-width:0
}
body:has(#demo-screen) .demo-check>input[type=checkbox],.public-demo-work .demo-check>input[type=checkbox]{
 appearance:auto;display:block;width:24px;min-width:24px;max-width:24px;
 height:24px;min-height:24px;max-height:24px;padding:0;
 margin: max(0px,calc((1.5em - 24px)/2)) 0 0;align-self:start;
 font:inherit;accent-color:#245bd7;border-radius:0
}
.demo-check>.demo-check-copy{min-width:0;line-height:1.5;overflow-wrap:anywhere}
/* Separate the question selection label from its wording without moving the checkbox. */
.public-demo-work #app.demo-preparation[data-stage="1"]>section>label.demo-check+.question-text{margin-block-start:10px}
/* Completion, preview navigation and links use the same wrapping action layout. */
body:has(#demo-screen) .demo-actions>:is(button,a.button){display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;min-height:48px;line-height:1.4;text-align:center;box-sizing:border-box;border:1px solid #aab8c9;border-radius:10px;text-decoration:none;background:#fff;color:#245bd7;overflow-wrap:anywhere}
#demo-screen>.role-directory,#demo-screen>.role-preview{container:role-panel / inline-size}
.role-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;min-width:0}
.role-card{display:flex;flex-direction:column;gap:12px;border:1px solid #dbe3ee;border-radius:12px;padding:20px;min-width:0;background:#fff}
.role-card h3{font-size:1.08rem;line-height:1.4}
.role-card .role-kind{font-size:.78rem;font-weight:650;color:#46566b}
.role-card p{font-size:.95rem;line-height:1.55}
.role-card>button{margin-top:auto;min-height:48px;width:100%;text-align:center}
.role-preview-label{justify-self:start;padding:6px 12px;border-radius:8px;background:#edf3ff;color:#245bd7!important;font-size:.85rem;font-weight:750}
.role-preview-section{display:grid;gap:12px;padding:20px;border:1px solid #dbe3ee;border-radius:12px;min-width:0;background:#fff}
.membership-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;min-width:0}
.publisher-route{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0;margin:8px 0}
.publisher-route li{padding:8px 12px;border-bottom:3px solid #dbe3ee}
.publisher-route [aria-current=step]{background:#edf3ff;border-color:#245bd7;font-weight:750}
@container role-panel (max-width:50em){.role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container role-panel (max-width:34em){.role-grid,.membership-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.role-grid,.membership-grid{grid-template-columns:minmax(0,1fr)}.role-card,.role-preview-section{padding:18px}}
body:has(#demo-screen) .response-selection-toggle.demo-check>input{margin-top:max(0px,calc((1.275rem - 24px)/2))}
.prepared-example{display:inline-block;justify-self:start;font-size:.9rem!important;line-height:1.5!important;
 font-weight:650;padding:6px 12px;border-radius:8px;background:#edf3ff;color:#245bd7}

/* One writing surface, with source excerpts kept as reference. */
.update-writing{min-width:0}.update-writing h2{scroll-margin-top:24px}.update-writing-field{margin:28px 0;padding:24px 0;border-top:1px solid #d6dfec}.update-writing-field>label{display:block;font-weight:750;margin-bottom:10px}.update-writing textarea{display:block;width:100%;min-height:150px;max-height:none!important;overflow-y:hidden;resize:vertical;box-sizing:border-box;font:inherit;line-height:1.6;padding:16px;color:#17273e;background:#fff;border:1px solid #9aaac0;border-radius:10px}.update-writing .demo-check{margin-top:16px}.update-writing .demo-actions{margin:24px 0;gap:16px}.update-writing .field-help{color:#46566b}.update-writing .update-saved-identity,.update-selection-notice{padding:16px;background:#edf3ff;border-radius:10px}.update-writing details{margin-top:24px}.update-writing details p{white-space:pre-wrap;overflow-wrap:anywhere}.update-writing .update-another{padding:20px;border:1px solid #c8d3e0;border-radius:10px;margin-top:16px}.update-writing [hidden],.brief-setup [hidden]{display:none!important}

body:has(#demo-screen) .leadership-overview>.demo-actions{margin:0;padding:0 24px 24px}

/* Header utilities keep intrinsic height instead of filling the identity grid row. */
body:is(.public-demo-work,:has(#demo-screen)) .mitarka-demo-shell .demo-utility-actions button{min-height:44px;padding:6px 12px;font-size:.95em;align-self:center}
.public-demo-work .assignment-error{margin:0 0 16px;line-height:1.5;color:#812319}
.public-demo-work .assignment-error[hidden]{display:none}

/* Focus policy shared by the guided journey and its preparation/overview pages.
   Navigation headings keep DOM focus for announcements, without a field-like box.
   Only editable text controls use the blue active-field ring, for pointer AND keyboard.
   Other controls retain a neutral keyboard-only cue; selected/invalid styles are separate. */
body:is(.public-demo-work,:has(#demo-screen)) :is([tabindex],button,a[href],summary,select,input,textarea,[contenteditable]):focus{
 outline:none
}
body:is(.public-demo-work,:has(#demo-screen)) :is(button,a[href],summary,select,input,textarea,[role=button],[role=link],[tabindex]:not([tabindex="-1"])):focus-visible{
 outline:2px dotted #536277;outline-offset:3px
}
body:is(.public-demo-work,:has(#demo-screen)) :is(textarea,input:not([type]),input[type=text],input[type=search],input[type=email],input[type=url],input[type=tel],input[type=password],input[type=number],[contenteditable=""],[contenteditable=true],[contenteditable=plaintext-only]):not([readonly],[disabled]):focus{
 outline:2px solid var(--blue,#245bd7);outline-offset:2px
}
/* Standalone secondary actions keep compact sizing within the preparation grid. */
.public-demo-work #app.demo-preparation>:is(.demo-back-to-source,.demo-add-question){
 justify-self:start;align-self:start;width:fit-content;max-width:100%;min-width:0;flex:none
}
/* The narrow block layout does not supply the desktop grid's row gap. */
.public-demo-work #app.demo-preparation>.demo-add-question{margin-block-end:24px}
@container(min-width:54em){.public-demo-work #app.demo-preparation>.demo-add-question{margin-block-end:0}}