/* Self-contained, static demo. Uses the public site's colour and font tokens. */
.ws-body { background:var(--color-bg); font-size:var(--text-sm); }
.ws-body h1 { font:700 var(--text-xl)/1.12 var(--font-display); letter-spacing:-.025em; }
.ws-body h2 { font:700 var(--text-lg)/1.2 var(--font-body); }
.ws-body h3 { font:700 var(--text-base)/1.3 var(--font-body); }
.ws-body p { margin:0; }
.ws-body a { color:inherit; }
.ws-body button, .ws-body a, .ws-body input, .ws-body select, .ws-body textarea { -webkit-tap-highlight-color:transparent; }
.ws-body button:disabled { cursor:wait; opacity:.6; }
.ws-body [hidden] { display:none!important; }
.ws-body :focus-visible { outline:3px solid var(--color-primary); outline-offset:3px; }
.ws-shell { display:grid; grid-template-columns:238px minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); height:100dvh; overflow:hidden; }
.ws-banner { grid-column:1/-1; background:#1f4a52; color:#f3efe6; padding:10px 24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 24px; font-size:var(--text-xs); }
.ws-banner strong { font-weight:700; letter-spacing:.025em; }
.ws-banner span { color:#e0e7e2; }
.ws-sidebar { display:flex; flex-direction:column; min-height:0; padding:30px 20px 22px; border-right:1px solid var(--color-divider); background:var(--color-surface); overflow-y:auto; overscroll-behavior:contain; }
.ws-brand { display:flex; align-items:center; gap:8px; width:fit-content; min-height:44px; text-decoration:none; font:700 26px/1 var(--font-display); color:var(--color-primary)!important; }
.ws-brand svg { width:36px; height:36px; }
.ws-brand span span { font-weight:400; }
.ws-side-label { margin:36px 12px 12px!important; color:var(--color-text-muted); font-size:var(--text-xs); letter-spacing:.09em; text-transform:uppercase; }
.ws-nav { display:grid; gap:6px; }
.ws-nav button { min-height:46px; display:flex; align-items:center; gap:12px; text-align:left; padding:10px 12px; border-radius:5px; color:var(--color-text-muted); }
.ws-nav button:hover { background:var(--color-surface-offset); color:var(--color-text); }
.ws-nav button[aria-current="page"] { background:var(--color-primary-highlight); color:var(--color-primary); font-weight:700; }
.ws-nav-number { font-size:var(--text-xs); font-variant-numeric:tabular-nums; opacity:.7; }
.ws-side-bottom { margin-top:auto; padding-top:32px; }
.ws-side-note { padding:16px 12px; border-top:1px solid var(--color-divider); color:var(--color-text-muted); font-size:var(--text-xs); }
.ws-side-note strong { display:block; color:var(--color-text); margin-bottom:5px; }
.ws-home { display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 12px; font-size:var(--text-xs); text-decoration:none; }
.ws-home:hover { color:var(--color-primary); text-decoration:underline; }
.ws-column { min-width:0; display:flex; flex-direction:column; min-height:0; }
.ws-topbar { padding:16px 36px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-bottom:1px solid var(--color-divider); }
.ws-role { display:flex; align-items:center; gap:12px; }
.ws-role-label { font-size:var(--text-xs); color:var(--color-text-muted); }
.ws-segment { display:flex; border:1px solid var(--color-border); border-radius:6px; padding:3px; background:var(--color-surface); }
.ws-segment button { padding:9px 14px; border-radius:3px; min-height:42px; }
.ws-segment button[aria-pressed="true"] { background:var(--color-primary); color:var(--color-text-inverse); font-weight:700; }
.ws-tools { display:flex; gap:8px; align-items:center; }
.ws-tool { min-height:44px; padding:8px 10px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--color-border); border-radius:5px; font-size:var(--text-xs); text-decoration:none; white-space:nowrap; }
.ws-tool:hover { background:var(--color-surface-offset); }
.ws-main { overflow-y:auto; overscroll-behavior:contain; padding:30px 36px 50px; min-height:0; }
.ws-inner { max-width:1150px; margin-inline:auto; }
.ws-demo-detail { margin-bottom:26px!important; color:var(--color-text-muted); font-size:var(--text-xs); max-width:none; }
.ws-page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:28px; }
.ws-kicker { font-size:var(--text-xs); font-weight:700; color:var(--color-primary); letter-spacing:.11em; text-transform:uppercase; margin-bottom:10px!important; }
.ws-subtitle { color:var(--color-text-muted); margin-top:10px!important; max-width:58ch; }
.ws-button { min-height:44px; display:inline-flex; justify-content:center; align-items:center; gap:10px; padding:11px 17px; border:1px solid var(--color-border); border-radius:5px; font-weight:700; line-height:1.4; text-decoration:none; }
.ws-button:hover { background:var(--color-surface-offset); border-color:var(--color-primary); }
.ws-button-primary { background:var(--color-primary); border-color:var(--color-primary); color:var(--color-text-inverse); }
.ws-button-primary:hover { background:var(--color-primary-hover); color:var(--color-text-inverse); }
.ws-page-head>.ws-button { flex-shrink:0; }
.ws-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-block:1px solid var(--color-divider); margin-bottom:30px; padding-block:20px; gap:20px; }
.ws-stat { display:flex; gap:14px; align-items:center; }
.ws-stat strong { font:700 var(--text-xl)/1 var(--font-display); color:var(--color-primary); font-variant-numeric:tabular-nums; }
.ws-stat span { color:var(--color-text-muted); font-size:var(--text-xs); max-width:17ch; }
.ws-toolbar { display:flex; align-items:flex-end; gap:16px; margin-bottom:22px; }
.ws-field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.ws-field label { font-weight:700; font-size:var(--text-xs); }
.ws-field input, .ws-field select, .ws-field textarea { width:100%; min-height:44px; border:1px solid var(--color-border); border-radius:5px; background:var(--color-surface-2); padding:10px 12px; font-size:var(--text-sm); }
.ws-field textarea { resize:vertical; min-height:100px; }
.ws-field input::placeholder, .ws-field textarea::placeholder { color:var(--color-text-muted); opacity:.85; }
.ws-search { flex:1; }
.ws-filter { min-width:190px; }
.ws-results { margin-bottom:12px!important; color:var(--color-text-muted); font-size:var(--text-xs); }
.ws-project-list { display:grid; gap:14px; }
.ws-project { display:grid; grid-template-columns:154px minmax(0,1fr) auto; gap:24px; align-items:center; padding:12px; background:var(--color-surface); border:1px solid var(--color-divider); border-radius:7px; }
.ws-project-image { position:relative; height:132px; overflow:hidden; border-radius:3px; background:var(--color-surface-offset); }
.ws-project-image img { width:100%; height:100%; object-fit:cover; }
.ws-image-label { position:absolute; bottom:8px; left:8px; padding:3px 7px; background:#f3efe6; color:#1f4a52; font-size:12px; border-radius:2px; }
.ws-project-info { min-width:0; overflow-wrap:anywhere; }
.ws-project-info h2 { margin:7px 0; }
.ws-project-info>p { color:var(--color-text-muted); font-size:var(--text-xs); }
.ws-project-action { padding-right:12px; display:grid; justify-items:end; gap:12px; }
.ws-tag { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; background:var(--color-surface-offset); border-radius:3px; color:var(--color-text-muted); font-size:var(--text-xs); width:fit-content; }
.ws-tag-accent { background:var(--color-primary-highlight); color:var(--color-primary); }
.ws-tag-dot { width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; }
.ws-mini-progress { height:4px; background:var(--color-surface-offset-2); width:145px; max-width:100%; margin-top:10px; border-radius:4px; overflow:hidden; }
.ws-mini-progress span { height:100%; display:block; background:var(--color-primary); }
.ws-progress-text { font-size:var(--text-xs); color:var(--color-text-muted); }
.ws-footnote { margin-top:24px!important; color:var(--color-text-muted); font-size:var(--text-xs); }
.ws-project-switch { max-width:380px; margin-bottom:25px; }
.ws-project-switch select { font-weight:500; }
.ws-dossier-heading { margin-bottom:22px; }
.ws-overview { display:flex; justify-content:space-between; gap:24px; align-items:center; margin:22px 0; padding:18px 20px; border:1px solid var(--color-divider); background:var(--color-surface); border-radius:5px; }
.ws-overview .ws-mini-progress { width:100%; margin-top:12px; }
.ws-overview-main { width:55%; }
.ws-overview strong { font-weight:700; }
.ws-overview p { font-size:var(--text-xs); color:var(--color-text-muted); }
.ws-stage-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; align-items:start; }
.ws-stages { display:grid; gap:8px; }
.ws-stage-button { display:flex; text-align:left; gap:12px; padding:14px 12px; border:1px solid var(--color-divider); border-radius:5px; min-height:75px; align-items:flex-start; background:var(--color-surface); }
.ws-stage-button[aria-pressed="true"] { background:var(--color-primary-highlight); border-color:var(--color-primary); }
.ws-stage-button:hover { border-color:var(--color-primary); }
.ws-stage-number { color:var(--color-primary); font-size:var(--text-xs); margin-top:3px; font-variant-numeric:tabular-nums; }
.ws-stage-button strong { display:block; font-size:var(--text-sm); }
.ws-stage-button small { display:block; margin-top:5px; color:var(--color-text-muted); font-size:var(--text-xs); }
.ws-stage-content { min-width:0; }
.ws-stage-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin:2px 0 14px; }
.ws-stage-heading h2 { margin-top:5px; }
.ws-stage-heading .ws-button { font-size:var(--text-xs); padding:10px 12px; flex-shrink:0; }
.ws-prompt { color:var(--color-text-muted); margin-bottom:20px!important; }
.ws-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.ws-photo { border:1px solid var(--color-divider); background:var(--color-surface); border-radius:6px; overflow:hidden; min-width:0; }
.ws-photo-visual { position:relative; width:100%; background:var(--color-surface-offset); }
button.ws-photo-visual { display:block; text-align:left; }
.ws-photo-visual img { width:100%; height:200px; object-fit:cover; }
.ws-photo-visual:hover img { opacity:.88; }
.ws-photo-body { padding:15px; }
.ws-photo-body .ws-tag { margin-bottom:10px; }
.ws-record-note { overflow-wrap:anywhere; white-space:pre-wrap; }
.ws-record-empty { color:var(--color-text-muted); font-size:var(--text-xs); }
.ws-photo-actions { border-top:1px solid var(--color-divider); padding:10px 15px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ws-check { display:flex; gap:9px; align-items:center; min-height:44px; font-size:var(--text-xs); cursor:pointer; }
.ws-check input { width:18px; height:18px; accent-color:var(--color-primary); flex-shrink:0; }
.ws-text-button { min-height:44px; color:var(--color-primary); text-decoration:underline; text-underline-offset:3px; font-size:var(--text-xs); }
.ws-empty { padding:32px 24px; background:var(--color-surface); border:1px dashed var(--color-border); border-radius:5px; grid-column:1/-1; }
.ws-empty h3 { margin-bottom:8px; }
.ws-empty p { color:var(--color-text-muted); margin-bottom:18px; }
.ws-empty .ws-button { margin-top:4px; }
.ws-questions { margin-top:30px; padding-top:24px; border-top:1px solid var(--color-divider); }
.ws-questions h2 { margin-bottom:10px; }
.ws-questions>p { color:var(--color-text-muted); margin-bottom:18px; }
.ws-question-form { display:grid; gap:12px; max-width:650px; }
.ws-question-form .ws-button { justify-self:start; }
.ws-question-item { border-bottom:1px solid var(--color-divider); padding:16px 0; }
.ws-question-item small { color:var(--color-text-muted); display:block; margin-bottom:7px; font-size:var(--text-xs); }
.ws-question-item p { overflow-wrap:anywhere; white-space:pre-wrap; }
.ws-question-item .ws-question-form { margin-top:14px; }
.ws-answer { margin-top:12px; padding:14px 16px; background:var(--color-surface-offset); border-radius:6px; }
.ws-answer small { margin-bottom:7px; }
.ws-thread-audio, .ws-voice-player { display:block; width:100%; max-width:420px; margin-top:10px; height:40px; }
.ws-voice { display:grid; gap:8px; }
.ws-voice-help, .ws-voice-status { color:var(--color-text-muted); font-size:var(--text-xs); }
.ws-voice-actions { display:flex; flex-wrap:wrap; gap:8px; }
.ws-voice-actions .ws-button { justify-self:start; font-size:var(--text-xs); padding:10px 12px; }
.ws-voice[data-recording="true"] .ws-voice-status { color:var(--color-primary); font-weight:700; }
.ws-report { background:var(--color-surface-2); border:1px solid var(--color-divider); border-radius:5px; padding:30px; }
.ws-report-top { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; border-bottom:1px solid var(--color-divider); padding-bottom:24px; }
.ws-report-top h2 { margin-bottom:10px; overflow-wrap:anywhere; }
.ws-report-section { padding-top:28px; }
.ws-report-section>p { color:var(--color-text-muted); margin:10px 0 16px; font-size:var(--text-xs); }
.ws-report-section h3 { display:flex; gap:10px; }
.ws-report-section h3 span { color:var(--color-primary); font-variant-numeric:tabular-nums; }
.ws-notice { padding:12px 15px; background:var(--color-primary-highlight); border:1px solid var(--color-primary); border-radius:5px; color:var(--color-primary); margin-bottom:18px; font-size:var(--text-xs); }
.ws-feedback:empty { display:none; }
.ws-feedback { margin-top:8px!important; font-size:var(--text-xs); color:var(--color-primary); }
.ws-error { color:var(--color-error)!important; font-size:var(--text-xs); margin:8px 0!important; }
.ws-dialog { width:min(560px,calc(100% - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:26px; border:1px solid var(--color-border); border-radius:9px; color:var(--color-text); background:var(--color-surface-2); box-shadow:var(--shadow-lg); overflow-y:auto; overscroll-behavior:contain; }
.ws-dialog::backdrop { background:rgba(12,24,27,.65); }
.ws-dialog-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:12px; }
.ws-dialog-head h2 { margin-top:9px; }
.ws-dialog-close { padding:10px; min-height:44px; text-decoration:underline; color:var(--color-text-muted); font-size:var(--text-xs); }
.ws-dialog-intro { color:var(--color-text-muted); font-size:var(--text-xs); margin-bottom:20px!important; }
.ws-dialog form { display:grid; gap:18px; }
.ws-dialog .ws-field small { font-size:var(--text-xs); color:var(--color-text-muted); }
.ws-dialog-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:6px; }
.ws-upload-input { padding:16px!important; border-style:dashed!important; font-size:var(--text-xs)!important; }
.ws-upload-input::file-selector-button { border:1px solid var(--color-border); background:var(--color-surface-offset); color:var(--color-text); border-radius:3px; padding:9px 10px; margin-right:10px; font:inherit; cursor:pointer; }
.ws-image-dialog { width:min(850px,calc(100% - 32px)); }
.ws-image-dialog img { width:100%; max-height:58dvh; object-fit:contain; background:var(--color-surface-offset); }
.ws-image-dialog .ws-record-note { margin:16px 0!important; }
.ws-image-fallback { display:flex; min-height:132px; align-items:center; justify-content:center; padding:20px; background:var(--color-surface-offset); color:var(--color-text-muted); font-size:var(--text-xs); }
.ws-noscript { padding:40px; }
@media(min-width:1500px) { .ws-main { padding-top:40px; } .ws-project { grid-template-columns:178px minmax(0,1fr) auto; } .ws-project-image { height:146px; } }
@media(max-width:1150px) {
  .ws-shell { grid-template-columns:202px minmax(0,1fr); }
  .ws-sidebar { padding-inline:14px; }
  .ws-topbar { padding:14px 24px; }
  .ws-main { padding:24px; }
  .ws-role-label { display:none; }
  .ws-project { grid-template-columns:122px minmax(0,1fr); gap:16px; }
  .ws-project-action { grid-column:2; padding-right:0; display:flex; align-items:center; justify-content:space-between; margin-top:-8px; }
  .ws-project-image { grid-row:1/3; height:170px; }
  .ws-stage-layout { grid-template-columns:1fr; }
  .ws-stages { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
  .ws-stage-button { flex-direction:column; gap:5px; padding:10px; height:100%; }
}
@media(max-width:760px) {
  .ws-shell { grid-template-columns:1fr; grid-template-rows:auto auto minmax(0,1fr); }
  .ws-banner { padding:9px 12px; text-align:center; line-height:1.5; }
  .ws-banner span { display:none; }
  .ws-sidebar { flex-direction:row; align-items:center; justify-content:space-between; padding:10px 16px; gap:15px; border-right:0; border-bottom:1px solid var(--color-divider); overflow:visible; }
  .ws-brand { font-size:22px; gap:2px; }
  .ws-brand svg { width:29px; height:29px; }
  .ws-side-label,.ws-side-bottom,.ws-nav-number { display:none; }
  .ws-nav { display:flex; gap:3px; }
  .ws-nav button { min-height:44px; font-size:var(--text-xs); padding:8px 9px; }
  .ws-topbar { padding:10px 16px; gap:8px; }
  .ws-role { gap:0; }
  .ws-segment button { font-size:var(--text-xs); padding:7px 11px; min-height:44px; }
  .ws-tools { gap:5px; }
  .ws-tool { padding:7px 8px; }
  .ws-main { padding:20px 18px 36px; }
  .ws-demo-detail { margin-bottom:22px!important; }
  .ws-page-head { margin-bottom:22px; flex-wrap:wrap; gap:16px; }
  .ws-page-head>.ws-button { font-size:var(--text-xs); }
  .ws-summary { gap:12px; padding-block:17px; margin-bottom:22px; }
  .ws-stat { flex-direction:column; align-items:flex-start; gap:8px; }
  .ws-stat strong { font-size:26px; }
  .ws-stat span { line-height:1.4; }
  .ws-toolbar { gap:12px; }
  .ws-filter { min-width:0; width:43%; }
  .ws-project { padding:12px; grid-template-columns:85px minmax(0,1fr); gap:14px; }
  .ws-project-image { height:125px; }
  .ws-project-info h2 { font-size:var(--text-base); }
  .ws-project-action { gap:10px; flex-wrap:wrap; }
  .ws-project-action .ws-button { padding:9px 11px; font-size:var(--text-xs); width:100%; }
  .ws-project-action .ws-progress-text { display:none; }
  .ws-image-label { left:5px; bottom:5px; padding:2px 4px; }
  .ws-overview { padding:16px; flex-wrap:wrap; gap:12px; }
  .ws-overview-main { width:100%; }
  .ws-stages { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ws-stage-button { flex-direction:row; min-height:84px; }
  .ws-stage-heading { flex-wrap:wrap; }
  .ws-gallery { gap:12px; }
  .ws-photo-visual img { height:160px; }
  .ws-photo-actions { flex-wrap:wrap; gap:0; padding:8px 12px; }
  .ws-photo-body { padding:12px; }
  .ws-report { padding:20px 16px; }
  .ws-report-top { flex-direction:column; gap:14px; }
  .ws-dialog { padding:20px; }
}
@media(max-width:430px) {
  .ws-sidebar { padding-inline:10px; gap:5px; }
  .ws-nav button { padding-inline:7px; }
  .ws-brand { font-size:20px; }
  .ws-brand svg { width:25px; height:25px; }
  .ws-topbar { padding-inline:12px; }
  .ws-segment button { padding-inline:9px; }
  .ws-tools { gap:4px; }
  .ws-gallery { grid-template-columns:1fr; }
  .ws-photo-visual img { height:220px; }
}