/* The crew suite is the House Kit in an editorial workspace. Theme, palette,
   spacing, radii, type and weights all come from kit.css on the html element.
   The --s-* aliases below are the only mapping; guided.css reads three of them,
   so they stay. Nothing in this file re-invents a value or keys off the body. */
.suite-demo{
  --s-surface:var(--bg);
  --s-raised:var(--surface);
  --s-paper:var(--surface);
  --s-field:var(--surface);
  --s-line:var(--line);
  --s-ink:var(--ink);
  --s-muted:var(--muted);
  --s-purple:var(--accent);
  --s-soft-purple:var(--accent-soft);
  --s-green:var(--success);
  --s-soft-green:var(--success-soft);
  background:var(--s-surface);
  color:var(--s-ink);
}
.suite-demo *{box-sizing:border-box}
.suite-demo button,.suite-demo textarea{font:inherit}
.suite-demo button{border:0;background:none;color:inherit;cursor:pointer}
.suite-demo button:disabled{cursor:not-allowed;opacity:.5}
.suite-demo button:focus-visible,.suite-demo input:focus-visible,.suite-demo textarea:focus-visible,.suite-demo summary:focus-visible,.suite-demo a:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.suite-demo .g-app,.suite-demo .g-header{background:var(--s-raised)}

/* Crew / Operations, on the kit segmented geometry. */
.suite-demo .s-nav{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2) var(--s-4);padding:var(--s-3) var(--s-6);border-bottom:1px solid var(--s-line)}
.suite-demo .k-segment{max-width:100%;flex-wrap:wrap}
.suite-demo .s-nav a{display:inline-flex;align-items:center;gap:var(--s-2);margin-left:auto;min-height:var(--control-h-compact);color:var(--s-muted);font-size:var(--fs-ui);text-decoration:none;white-space:nowrap}
.suite-demo .s-nav a:hover{color:var(--s-purple)}
.suite-demo .s-nav a svg{width:var(--icon-sm);height:var(--icon-sm)}

.suite-demo .s-main{flex:1;min-width:0;padding:var(--s-5) var(--s-7) var(--s-6)}
/* The home screen: headline, three portraits, one line of wit, one action. */
.suite-demo .s-intro{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-5);padding-bottom:var(--s-6);border-bottom:1px solid var(--s-line)}
.suite-demo .s-eyebrow{display:block;margin-bottom:var(--s-3);color:var(--s-purple);font-size:var(--fs-small);font-weight:var(--fw-semibold);letter-spacing:var(--track-eyebrow);text-transform:uppercase}
.suite-demo h1{max-width:680px;margin:0;font-size:var(--fs-display);font-weight:var(--fw-semibold);letter-spacing:var(--track-display);line-height:var(--lh-display);text-wrap:balance}
.suite-demo .s-intro h1 span{color:var(--faint)}
/* Primary: a 44px capsule, no shadow. Secondary: plain text. */
.suite-demo .s-primary{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-3);min-height:var(--control-h);padding:12px 22px;border-radius:var(--r-pill);background:var(--primary-bg);color:var(--primary-fg);font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:20px;text-align:center;text-decoration:none}
.suite-demo .s-primary:hover{background:var(--primary-hover)}
.suite-demo .s-primary svg{width:var(--icon-sm);height:var(--icon-sm)}
.suite-demo .s-secondary{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--control-h-compact);padding:6px 0;background:none;color:var(--s-muted);font-size:var(--fs-ui);text-align:center;text-decoration:none}
.suite-demo .s-secondary:hover{color:var(--s-purple)}
.suite-demo .s-secondary svg{width:var(--icon-sm);height:var(--icon-sm)}
.suite-demo .s-note{display:block;margin-top:var(--s-3);color:var(--s-muted);font-size:var(--fs-small);line-height:var(--lh-body)}
.suite-demo .s-intro>.s-note{margin-top:0}
/* The demo ending: book a call, or go back to the list. */
.suite-demo .s-ending{display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap;margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--s-line)}

/* Three 56px phone portraits, name and role under each. */
.suite-demo .s-crew-members{display:flex;flex-wrap:wrap;gap:var(--s-5)}
.suite-demo .s-character{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);width:96px;min-width:0;text-align:center}
.suite-demo .s-portrait{display:block;width:56px;height:56px;border-radius:50%;background:var(--surface-2);stroke:none}
.suite-demo .s-character strong{display:block;overflow-wrap:anywhere}
.suite-demo .s-character strong{font-size:var(--fs-ui);font-weight:var(--fw-semibold);line-height:var(--lh-ui)}
.suite-demo .s-dispatch-note{max-width:420px;margin:0;color:var(--s-muted);font-size:var(--fs-ui);line-height:var(--lh-body)}
.suite-demo .s-dispatch-note strong,.suite-demo .s-dispatch-note span{display:block}
.suite-demo .s-dispatch-note strong{color:var(--s-ink);font-size:var(--fs-heading);font-weight:var(--fw-semibold)}
.suite-demo .s-dispatch-note span{margin-top:var(--s-1)}

.suite-demo .s-library-head{display:flex;align-items:end;justify-content:space-between;gap:var(--s-5);margin:0 0 var(--s-5)}
.suite-demo .s-library-head h2,.suite-demo .s-task-group h2{margin:0;font-size:var(--fs-title);font-weight:var(--fw-semibold);letter-spacing:var(--track-title);line-height:1.2}
.suite-demo .s-library-head p{max-width:450px;margin:0;color:var(--s-muted);font-size:var(--fs-ui);line-height:var(--lh-body);text-align:right}
/* Nine circular badges, monochrome line icons. The symbols in crew-icons.svg
   draw in currentColor and knock their detail out with --crew-detail, so the
   badge sets both to one ground and one ink. No tint, no shadow. */
.suite-demo .s-task-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-5);padding:var(--s-2) 0 var(--s-4)}
.suite-demo .s-task-group{margin-top:var(--s-6)}
.suite-demo .s-task{display:flex;flex-direction:column;align-items:center;gap:var(--s-3);min-width:0;min-height:136px;padding:var(--s-2) var(--s-1);border-radius:var(--r-card);text-align:center}
.suite-demo .s-task:focus-visible{outline:none}
.suite-demo .s-task:focus-visible .s-task-icon{outline:3px solid var(--focus);outline-offset:4px}
.suite-demo .s-task-icon{display:grid;place-items:center;width:var(--s-6);height:var(--s-6);border-radius:50%;background:var(--surface-2);color:var(--s-ink);font-size:var(--fs-heading)}
.suite-demo .s-task .s-task-icon{--crew-detail:var(--surface-2);position:relative;width:80px;height:80px;transition:transform var(--t-fast) var(--ease-out)}
.suite-demo .s-task .s-task-icon::before{content:'';position:absolute;inset:var(--s-1);border:1px solid currentColor;border-radius:50%;opacity:.14;pointer-events:none}
.suite-demo .s-task:hover .s-task-icon{transform:translateY(-2px)}
.suite-demo .s-task .s-task-icon>svg{width:48px;height:48px;stroke:none}
.suite-demo .s-task>strong{max-width:150px;font-size:var(--fs-ui);font-weight:var(--fw-semibold);line-height:var(--lh-ui)}
.suite-demo .s-task-progress{position:absolute;right:0;bottom:0;display:grid;place-items:center;width:var(--s-5);height:var(--s-5);border:2px solid var(--s-raised);border-radius:50%;background:var(--s-soft-green);color:var(--s-green)}
.suite-demo .s-task-progress svg{width:12px;height:12px}

.suite-demo .s-work-head{max-width:640px;margin:0 0 var(--s-4)}
.suite-demo .s-main>.s-secondary+.s-work-head{margin-top:var(--s-5)}
.suite-demo .s-work-head p{max-width:640px;margin:var(--s-3) 0 0;color:var(--s-muted);font-size:var(--fs-heading);line-height:var(--lh-body)}
/* One column, phone width first: the result, then the brief behind a summary. */
.suite-demo .s-work-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5);max-width:640px;align-items:start}
/* Above 980px the brief and sources sit beside the workbench instead of under it. One 640px column left 45 percent of a 1280 window empty (F11). The content tool handoff spans both. */
@media(min-width:980px){.suite-demo .s-work-grid{grid-template-columns:minmax(0,640px) minmax(240px,320px);gap:var(--s-6);max-width:none}.suite-demo .s-work-grid .s-tool-handoff{grid-column:1/-1}}
.suite-demo .s-context{min-width:0;padding:0;border:0}
.suite-demo .s-brief{padding-bottom:var(--s-5);border-bottom:1px solid var(--s-line)}
.suite-demo .s-brief h2,.suite-demo .s-workbench h2{margin:0 0 var(--s-2);font-size:var(--fs-heading);font-weight:var(--fw-semibold);letter-spacing:var(--track-title)}
.suite-demo .s-brief p{margin:0;color:var(--s-muted);font-size:var(--fs-ui);line-height:var(--lh-body)}
.suite-demo .s-sources{margin-top:var(--s-4);border-bottom:1px solid var(--s-line)}
.suite-demo .s-sources summary{display:flex;align-items:center;min-height:var(--control-h-compact);color:var(--s-ink);font-size:var(--fs-ui);font-weight:var(--fw-semibold);cursor:pointer;list-style:none}
.suite-demo .s-sources summary::-webkit-details-marker{display:none}
.suite-demo .s-sources summary::after{content:'+';margin-left:auto;color:var(--s-purple);font-size:var(--fs-title);font-weight:var(--fw-regular)}
.suite-demo .s-sources[open] summary::after{content:'−'}
.suite-demo .s-sources article{padding:var(--s-1) 0 var(--s-4)}
.suite-demo .s-sources article+article{padding-top:var(--s-3);border-top:1px solid var(--s-line)}
.suite-demo .s-sources article>strong{display:block;margin:0 0 var(--s-1);font-size:var(--fs-small);font-weight:var(--fw-semibold)}
.suite-demo .s-sources p{margin:0;color:var(--s-muted);font-size:var(--fs-small);line-height:var(--lh-body)}

.suite-demo .s-workbench{min-width:0}
.suite-demo .s-activity{margin:var(--s-3) 0 var(--s-5);padding:0;list-style:none}
.suite-demo .s-activity li{display:grid;grid-template-columns:var(--s-6) minmax(0,1fr);gap:var(--s-3);position:relative;padding:0 0 var(--s-4)}
.suite-demo .s-activity li::after{content:'';position:absolute;top:calc(var(--s-6) + var(--s-1));bottom:1px;left:calc(var(--s-6) / 2);width:1px;background:var(--s-line)}
.suite-demo .s-activity li:last-child{padding-bottom:0}.suite-demo .s-activity li:last-child::after{display:none}
.suite-demo .s-activity li:not([data-complete]){opacity:.54}.suite-demo .s-activity li[aria-current]{opacity:1}
.suite-demo .s-avatar{display:grid;place-items:center;width:var(--s-6);height:var(--s-6);overflow:hidden;border-radius:50%;background:var(--surface-2);color:var(--s-purple);font-size:var(--fs-small);font-weight:var(--fw-semibold)}
.suite-demo .s-avatar img,.suite-demo .s-avatar .s-portrait{width:100%;height:100%;margin:0;border-radius:0;object-fit:cover}
/* The result's landing: who drafted it and from which answer, one row above the card, arriving with the kit's curve (F12). The 44px portrait is the run's 32px avatar grown to the touch size, the same face a size up. */
.suite-demo .s-result-lead{display:flex;align-items:center;gap:var(--s-3);margin:var(--s-4) 0 var(--s-5)}
.suite-demo .s-avatar-lg{width:44px;height:44px;flex:none}
.suite-demo .s-result-lead strong{display:block;font-size:var(--fs-heading);font-weight:var(--fw-semibold);line-height:var(--lh-ui)}
.suite-demo .s-result-lead>div>span{display:block;margin-top:var(--s-1);color:var(--s-muted);font-size:var(--fs-ui);line-height:var(--lh-ui)}
.suite-demo .s-inline-action{display:inline;min-height:0;padding:0;background:none;color:var(--s-purple);font:inherit;text-decoration:underline;text-underline-offset:3px}
.suite-demo .s-inline-action:hover{color:var(--ink)}
.suite-demo .s-stage-copy{min-width:0;padding-top:var(--s-1)}
.suite-demo .s-stage-copy strong{display:block;font-size:var(--fs-ui);font-weight:var(--fw-semibold)}
.suite-demo .s-stage-copy p{margin:var(--s-1) 0 0;color:var(--s-muted);font-size:var(--fs-small);line-height:var(--lh-body)}

/* Tonal decision rows: a hairline at rest, an accent tint when chosen. */
.suite-demo .s-decision{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2);min-width:0;margin:var(--s-5) 0 0;padding:var(--s-5) 0;border:0;border-top:1px solid var(--s-line);border-bottom:1px solid var(--s-line)}
.suite-demo .s-decision legend,.suite-demo .s-decision>.s-note{grid-column:1/-1}
.suite-demo .s-decision legend{margin-bottom:var(--s-1);font-size:var(--fs-heading);font-weight:var(--fw-semibold)}
.suite-demo .s-decision>.s-note{margin:0 0 var(--s-1)}
.suite-demo button.s-choice{display:grid;grid-template-columns:minmax(0,1fr) var(--icon-sm);align-content:center;column-gap:var(--s-3);min-width:0;min-height:var(--s-8);padding:var(--s-3) var(--s-4);border:1px solid var(--s-line);border-radius:var(--r-field);background:var(--s-raised);color:var(--s-muted);text-align:left}
.suite-demo button.s-choice:hover{border-color:var(--accent-line);background:var(--s-soft-purple);color:var(--s-ink)}
.suite-demo button.s-choice[aria-pressed=true]{border-color:var(--accent-line);background:var(--s-soft-purple);color:var(--s-ink)}
.suite-demo .s-choice strong,.suite-demo .s-choice span{display:block;grid-column:1;overflow-wrap:anywhere}
.suite-demo .s-choice strong{color:var(--s-ink);font-size:var(--fs-ui);font-weight:var(--fw-semibold)}
.suite-demo .s-choice span{margin-top:var(--s-1);font-size:var(--fs-small);line-height:var(--lh-ui)}
.suite-demo .s-choice svg{grid-row:1/span 2;grid-column:2;align-self:center;width:var(--icon-sm);height:var(--icon-sm);color:var(--s-purple)}

/* Cards keep the soft shadow the kit gives them; controls never do. */
.suite-demo .s-artifact{position:relative;min-width:0;margin-top:var(--s-5);padding:var(--s-5);overflow:hidden;border:1px solid var(--s-line);border-radius:var(--r-card);background:var(--s-paper);color:var(--s-ink);box-shadow:var(--shadow-card)}
.suite-demo .s-artifact>*{position:relative;z-index:1}
.suite-demo .s-document-title{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin:0 0 var(--s-4);padding-bottom:var(--s-3);border-bottom:1px solid var(--s-line);font-size:var(--fs-ui);font-weight:var(--fw-semibold)}
.suite-demo .s-document-body{font-size:var(--fs-body);line-height:var(--lh-body);overflow-wrap:anywhere}
.suite-demo .s-document-body,.suite-demo .s-document-body *{white-space:pre-wrap}
.suite-demo .s-draft{margin:0;color:var(--s-ink);font:inherit;white-space:pre-wrap}
.suite-demo .s-editor{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--s-line)}
.suite-demo .s-editor label{display:block;margin-bottom:var(--s-2);color:var(--s-muted);font-size:var(--fs-small);font-weight:var(--fw-semibold)}
.suite-demo .s-editor textarea,.suite-demo .s-editor input,.suite-demo textarea.s-draft{display:block;width:100%;min-height:var(--control-h);padding:var(--s-3);border:1px solid var(--line-strong);border-radius:var(--r-field);background:var(--s-field);color:var(--s-ink);font-size:var(--fs-body);line-height:var(--lh-body);resize:vertical}
.suite-demo .s-editor textarea,.suite-demo textarea.s-draft{min-height:148px}.suite-demo .s-editor input{resize:none}
.suite-demo .s-status{display:flex;align-items:center;gap:var(--s-2);min-height:var(--s-6);margin-top:0;color:var(--s-muted);font-size:var(--fs-small);line-height:var(--lh-ui)}
.suite-demo .s-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-4)}
.suite-demo .s-approval-actions{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;margin-top:var(--s-5)}
/* Breathing room for the reveal after an action, read from the computed value
   by revealNext in suite.mjs. A token, not an inline style: the demo CSP
   refuses a style attribute. */
.suite-demo .s-approval-actions [data-action="approve"]{scroll-margin-block:var(--s-5)}
.suite-demo .s-error{min-height:var(--s-4);margin-top:var(--s-3);color:var(--danger);font-size:var(--fs-small);line-height:var(--lh-ui)}
.suite-demo .s-error:empty{display:none}

.suite-demo .s-refine{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--s-line)}
.suite-demo .s-refine h2{margin:0;font-size:var(--fs-heading);font-weight:var(--fw-semibold)}
.suite-demo .s-refine p{margin:var(--s-2) 0 0;color:var(--s-muted);font-size:var(--fs-small);line-height:var(--lh-body)}
.suite-demo .s-before{margin-top:var(--s-3);padding:var(--s-3);border-left:1px solid var(--accent-line);background:var(--surface-2);color:var(--s-ink);white-space:pre-wrap;font-size:var(--fs-small);line-height:var(--lh-body)}
.suite-demo .s-evidence{display:grid;gap:var(--s-3);margin-top:var(--s-4)}
.suite-demo .s-evidence article{padding-top:var(--s-3);border-top:1px solid var(--s-line)}
.suite-demo .s-evidence article>strong{display:block;margin:0 0 var(--s-1);font-size:var(--fs-small);font-weight:var(--fw-semibold)}
.suite-demo .s-evidence p{margin:0;color:var(--s-muted);font-size:var(--fs-small);line-height:var(--lh-body)}

.suite-demo .s-carousel{position:relative;min-height:292px;margin-top:var(--s-5);padding:var(--s-5);overflow:hidden;border:1px solid var(--s-line);border-radius:var(--r-card);background:var(--surface-2);color:var(--s-ink)}
.suite-demo .s-slide{display:flex;flex-direction:column;justify-content:flex-end;position:relative;z-index:1;min-height:205px;padding:var(--s-5);border:1px solid var(--s-line);border-radius:var(--r-card);background:var(--s-paper);box-shadow:var(--shadow-card)}
.suite-demo .s-slide h2{max-width:390px;margin:0;font-size:var(--fs-title);font-weight:var(--fw-semibold);letter-spacing:var(--track-title);line-height:1.2}
.suite-demo .s-slide p{max-width:430px;margin:var(--s-3) 0 0;color:var(--s-muted);font-size:var(--fs-ui);line-height:var(--lh-body)}
.suite-demo .s-slide-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);position:relative;z-index:1;margin-top:var(--s-3)}
.suite-demo .s-slide-controls button{display:grid;place-items:center;width:var(--control-h-compact);min-height:var(--control-h-compact);padding:0;border-radius:50%;background:none;color:var(--s-muted)}
.suite-demo .s-slide-controls button:hover{background:var(--surface-3);color:var(--s-ink)}
.suite-demo .s-slide-controls span{color:var(--s-muted);font-size:var(--fs-small);font-variant-numeric:tabular-nums}

.suite-demo .s-dashboard-head{display:flex;align-items:end;justify-content:space-between;gap:var(--s-5);margin-bottom:var(--s-5)}
.suite-demo .s-dashboard-head p{max-width:420px;margin:var(--s-4) 0 0;color:var(--s-muted);font-size:var(--fs-ui);line-height:var(--lh-body);text-align:left}
.suite-demo .s-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:var(--s-5);border-top:1px solid var(--s-line);border-bottom:1px solid var(--s-line)}
.suite-demo .s-stats>div{min-width:0;padding:var(--s-4) var(--s-5)}
.suite-demo .s-stats>div+div{border-left:1px solid var(--s-line)}
.suite-demo .s-stats strong,.suite-demo .s-stats span{display:block}
.suite-demo .s-stats strong{font-size:var(--fs-title);font-weight:var(--fw-semibold);letter-spacing:var(--track-title);font-variant-numeric:tabular-nums}
.suite-demo .s-stats span{margin-top:var(--s-1);color:var(--s-muted);font-size:var(--fs-small);line-height:var(--lh-ui)}
.suite-demo .s-job-list{margin-top:var(--s-5);border-top:1px solid var(--s-line)}
.suite-demo .s-job-row{display:grid;grid-template-columns:minmax(0,1fr) auto var(--icon-sm);align-items:center;gap:var(--s-3);width:100%;min-height:var(--s-8);padding:var(--s-3) var(--s-1);border-bottom:1px solid var(--s-line);text-align:left}
.suite-demo .s-job-row:hover{color:var(--s-purple)}
.suite-demo .s-job-row strong,.suite-demo .s-job-row small{display:block;overflow-wrap:anywhere}
.suite-demo .s-job-row strong{font-size:var(--fs-ui);font-weight:var(--fw-semibold)}
.suite-demo .s-job-row small{margin-top:var(--s-1);color:var(--s-muted);font-size:var(--fs-small)}
.suite-demo .s-empty{padding:var(--s-6) 0;color:var(--s-muted);font-size:var(--fs-ui);text-align:center}
.suite-demo .s-empty h2{margin:var(--s-3) 0 var(--s-2);color:var(--s-ink);font-size:var(--fs-heading);font-weight:var(--fw-semibold)}
.suite-demo .s-empty p{margin:0 0 var(--s-4)}
.suite-demo .s-schedule-list{margin:var(--s-5) 0 0;padding:0;border-top:1px solid var(--s-line)}
.suite-demo .s-schedule-list h2{margin:var(--s-5) 0 var(--s-1);font-size:var(--fs-heading);font-weight:var(--fw-semibold);letter-spacing:var(--track-title)}
.suite-demo .s-schedule-list>p{margin:0 0 var(--s-3);color:var(--s-muted);font-size:var(--fs-small);line-height:var(--lh-body)}
.suite-demo .s-schedule-list article{display:grid;grid-template-columns:var(--s-5) 82px minmax(0,1fr) auto;gap:var(--s-3);align-items:start;padding:var(--s-4) 0;border-bottom:1px solid var(--s-line);font-size:var(--fs-small);line-height:var(--lh-ui)}
.suite-demo .s-schedule-list article>svg{width:var(--icon-sm);height:var(--icon-sm);color:var(--s-purple)}
.suite-demo .s-schedule-list article>span,.suite-demo .s-schedule-list article>small{color:var(--s-muted);font-size:var(--fs-small)}
.suite-demo .s-schedule-list article>small{white-space:nowrap}
.suite-demo .s-schedule-list article strong{display:block;font-weight:var(--fw-semibold);overflow-wrap:anywhere}
.suite-demo .s-schedule-list article p{margin:var(--s-1) 0 0;color:var(--s-muted)}
.suite-demo .s-pill{display:inline-flex;align-items:center;justify-content:center;min-height:var(--s-5);padding:var(--s-1) var(--s-2);border:1px solid var(--accent-line);border-radius:var(--r-pill);background:var(--s-soft-purple);color:var(--s-purple);font-size:var(--fs-small);font-weight:var(--fw-semibold);line-height:1.1;white-space:nowrap}
.suite-demo .s-pill[data-approved=true]{border-color:var(--s-green);background:var(--s-soft-green);color:var(--s-green)}

.suite-demo .s-offer{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--s-line)}
.suite-demo .s-offer summary{min-height:var(--control-h-compact);color:var(--s-ink);font-size:var(--fs-heading);font-weight:var(--fw-semibold);cursor:pointer}
.suite-demo .s-offer h2{margin:var(--s-3) 0 var(--s-1);font-size:var(--fs-title);font-weight:var(--fw-semibold);letter-spacing:var(--track-title)}
.suite-demo .s-offer h2 span{color:var(--s-muted);font-size:var(--fs-small);font-weight:var(--fw-regular);letter-spacing:0}
.suite-demo .s-offer>p:not(.s-note){margin:0 0 var(--s-3);color:var(--s-muted);font-size:var(--fs-small);line-height:var(--lh-body)}
.suite-demo .s-offer>a{margin:var(--s-2) var(--s-4) 0 0}
.suite-demo .s-tour{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-5);padding:var(--s-4);border:1px solid var(--accent-line);border-radius:var(--r-card);background:var(--s-soft-purple);box-shadow:var(--shadow-card)}
.suite-demo .s-tour-copy{min-width:0}
.suite-demo .s-tour-copy strong,.suite-demo .s-tour-copy p{display:block}
.suite-demo .s-tour-copy strong{font-size:var(--fs-ui);font-weight:var(--fw-semibold)}
.suite-demo .s-tour-copy p{margin:var(--s-1) 0 0;color:var(--s-muted);font-size:var(--fs-small);line-height:var(--lh-body)}
.suite-demo .s-tour button{flex:none}
.suite-demo .s-handoff{margin-top:var(--s-5);padding:var(--s-4) 0;border-top:1px solid var(--s-line);border-bottom:1px solid var(--s-line)}
.suite-demo .s-handoff>strong{display:block;font-size:var(--fs-ui);font-weight:var(--fw-semibold)}
.suite-demo .s-handoff .s-note{margin:var(--s-1) 0 var(--s-3);color:var(--s-muted)}
.suite-demo .s-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);margin-top:auto;padding:var(--s-4) var(--s-6);border-top:1px solid var(--s-line);color:var(--s-muted);font-size:var(--fs-small);line-height:var(--lh-ui)}
.suite-demo .s-footer a{color:var(--s-muted);text-decoration:none}
.suite-demo .s-footer a:hover{color:var(--s-purple)}
.suite-demo .s-footer svg{width:var(--icon-sm);height:var(--icon-sm);vertical-align:middle}
.suite-demo .s-toast{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.suite-demo .s-checklist h2,.suite-demo .s-data-artifact h2{margin:0 0 var(--s-2);font-size:var(--fs-heading);font-weight:var(--fw-semibold);line-height:1.3}
.suite-demo .s-checklist>.s-note{color:var(--s-muted)}
.suite-demo .s-checklist>strong{display:block;margin:var(--s-3) 0;font-size:var(--fs-small);font-weight:var(--fw-semibold)}
.suite-demo .s-checklist label{display:flex;align-items:center;gap:var(--s-3);min-height:var(--control-h);padding:var(--s-2) 0;border-top:1px solid var(--s-line);font-size:var(--fs-ui);line-height:var(--lh-body)}
.suite-demo .s-checklist input{width:20px;height:20px;flex:none;accent-color:var(--accent)}
.suite-demo .s-checklist input:checked+span{color:var(--s-muted);text-decoration:line-through}
.suite-demo .s-data-artifact{min-width:0;margin-top:var(--s-5)}
.suite-demo .s-table-scroll{max-width:100%;margin-top:var(--s-3);overflow:auto;border:1px solid var(--s-line);border-radius:var(--r-field)}
.suite-demo .s-table-scroll table{width:100%;min-width:640px;border-collapse:collapse;font-size:var(--fs-small);line-height:var(--lh-body);text-align:left}
.suite-demo .s-table-scroll caption{padding:var(--s-3);font-weight:var(--fw-semibold);text-align:left}
.suite-demo .s-table-scroll th,.suite-demo .s-table-scroll td{padding:var(--s-3);border-top:1px solid var(--s-line);vertical-align:top}
.suite-demo .s-table-scroll th{color:var(--s-muted);font-weight:var(--fw-semibold)}
.suite-demo .s-table-status{font-weight:var(--fw-semibold)}

.suite-demo .s-owner{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-3);color:var(--s-muted);font-size:var(--fs-ui)}
.suite-demo .s-context .s-sources{margin-top:0}
.suite-demo .s-context .s-brief{margin-bottom:var(--s-4);padding:var(--s-3) 0 var(--s-4)}
.suite-demo .s-sources summary>span{margin-left:var(--s-2);color:var(--s-muted);font-weight:var(--fw-regular)}
.suite-demo .s-step-detail{margin-top:var(--s-2)}
.suite-demo .s-step-detail summary{display:flex;align-items:center;gap:var(--s-2);min-height:var(--s-6);color:var(--s-muted);font-size:var(--fs-small);cursor:pointer}
.suite-demo .s-step-detail summary::before{content:'+';color:var(--s-purple)}
.suite-demo .s-step-detail[open] summary::before{content:'−'}
.suite-demo .s-status .s-eyebrow{margin-bottom:0}

.suite-demo .s-tool-handoff{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4);border:1px solid var(--s-line);border-radius:var(--r-card);background:var(--s-paper);box-shadow:var(--shadow-card)}
.suite-demo .s-tool-handoff>.s-task-icon{flex:none}
.suite-demo .s-tool-handoff>div{flex:1;min-width:0}
.suite-demo .s-tool-handoff strong{font-size:var(--fs-ui);line-height:var(--lh-ui)}
.suite-demo .s-tool-handoff p{margin:var(--s-1) 0 0;color:var(--s-muted);font-size:var(--fs-small);line-height:var(--lh-body)}
.suite-demo .s-tool-handoff>a{flex:none}

@media(max-width:760px){
  .suite-demo .s-nav{padding:var(--s-2) var(--s-4)}
  .suite-demo .k-segment>button,.suite-demo .s-secondary,.suite-demo .s-nav a{min-height:var(--control-h)}
  .suite-demo .s-main{padding:var(--s-5) var(--s-5) var(--s-6)}
  .suite-demo .s-intro{gap:var(--s-4)}
  .suite-demo .s-crew-members{gap:var(--s-4)}
  .suite-demo .s-library-head,.suite-demo .s-dashboard-head{display:block}
  .suite-demo .s-library-head p,.suite-demo .s-dashboard-head p{margin-top:var(--s-2);text-align:left}
  .suite-demo .s-dashboard-head .s-primary{margin-top:var(--s-4)}
  .suite-demo .s-task-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4) var(--s-2)}
  .suite-demo .s-task{min-height:108px;padding:var(--s-2) var(--s-1)}
  .suite-demo .s-task .s-task-icon{width:72px;height:72px}
  .suite-demo .s-task .s-task-icon>svg{width:44px;height:44px}
  .suite-demo .s-work-head{margin-bottom:var(--s-5)}
  .suite-demo .s-sources summary,.suite-demo .s-offer summary{min-height:var(--control-h)}
  .suite-demo .s-artifact{padding:var(--s-4)}
  .suite-demo .s-controls{align-items:stretch}
  /* Stacked, as the content demo's review row is. Sharing the row, the primary was 151px wide at 375 and "Approve this version" ran to three lines inside an 84px pill. Full width takes the field radius: a pill that wide reads as a bar, not a button. */
  .suite-demo .s-approval-actions{width:100%;flex-direction:column;align-items:stretch;gap:var(--s-2)}
  .suite-demo .s-approval-actions .s-primary{width:100%;border-radius:var(--r-field)}
  .suite-demo .s-approval-actions .s-secondary{min-height:var(--control-h)}
  .suite-demo .s-carousel{min-height:268px;padding:var(--s-4)}
  .suite-demo .s-slide{min-height:197px;padding:var(--s-4)}
  .suite-demo .s-slide-controls button{width:var(--control-h);min-height:var(--control-h)}
  .suite-demo .s-stats>div{padding:var(--s-3) var(--s-2)}
  .suite-demo .s-schedule-list article{grid-template-columns:var(--s-5) 60px minmax(0,1fr);gap:var(--s-2)}
  .suite-demo .s-schedule-list article>small{grid-column:3}
  .suite-demo .s-tour{align-items:flex-start;flex-direction:column}
  .suite-demo .s-tour button{width:100%}
  .suite-demo .s-footer{align-items:flex-start;flex-direction:column;gap:var(--s-1);padding:var(--s-4)}
  .suite-demo .s-footer a{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--control-h)}
  .suite-demo .s-work-grid[data-stage="review"] .s-context{order:2}
}
@media(min-width:361px) and (max-width:460px){.suite-demo .s-task-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
  .suite-demo .s-tool-handoff{flex-wrap:wrap}
  .suite-demo .s-tool-handoff>div{flex-basis:calc(100% - 56px)}
}
@media(max-width:360px){
  .suite-demo .s-main{padding-inline:var(--s-4)}
  .suite-demo .s-nav{padding-inline:var(--s-3)}
  .suite-demo .s-task-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .suite-demo .s-crew-members{gap:var(--s-2)}
  .suite-demo .s-character{width:80px}
  .suite-demo .s-nav a{margin-left:0}
  .suite-demo .s-artifact{padding:var(--s-3)}
  .suite-demo .s-document-title{align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  .suite-demo *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
  .suite-demo button:active{transform:none}
  .suite-demo .s-task:hover .s-task-icon{transform:none}
}