/* Soma public demo layout additions ONLY. Production Soma visual tokens,
   typography, shell, topbar, nav, overview, cards, metrics and trend chart
   come from the pinned soma-design.css reference. */
.soma-demo-shell { max-width:1180px; }
.soma-demo-shell .soma-primary-nav { list-style:none; margin-top:0; padding-left:0; }
.soma-demo-shell .demo-progress { display:flex; align-items:stretch; gap:0; border-bottom:1px solid var(--soma-line); }
.soma-demo-shell .demo-progress li {
  flex:0 0 auto; margin:0; padding:13px 18px 12px; border-radius:0;
  background:transparent; border-bottom:2px solid transparent;
  color:var(--muted); font-size:13px; font-weight:650; cursor:default; user-select:none;
}
.soma-demo-shell .demo-progress li[aria-current="step"] {
  background:transparent; color:var(--soma-sage-deep);
  border-bottom-color:var(--soma-sage-deep); font-weight:800;
}
.soma-demo-shell .demo-heading { margin-top:0; }
.soma-demo-shell .demo-heading h2 { font-size:clamp(1.6rem,2.7vw,2.4rem); }
.soma-demo-shell .demo-heading .surface-id { align-self:flex-start; font-size:10px; }
.soma-demo-shell .demo-safety { margin:16px 0 28px; }
.soma-demo-shell .demo-safety strong { white-space:normal; min-width:210px; }
.soma-demo-shell .demo-safety span { flex:1; font-size:13px; }
.soma-demo-shell .demo-section-heading { margin:0 0 18px; }
.soma-demo-shell .demo-section-heading p:last-child { color:var(--muted); margin:6px 0 0; }
.soma-demo-shell .demo-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.soma-demo-shell .demo-choice {
  appearance:none; cursor:pointer; text-align:left; gap:9px; justify-content:flex-end;
  border:1px solid var(--soma-line); border-top:3px solid var(--signal);
  min-height:212px; border-radius:16px; padding:22px; font:inherit;
  color:var(--ink); background:var(--soma-surface-ivory);
}
.soma-demo-shell .demo-choice:hover,.soma-demo-shell .demo-choice:focus-visible {
  border-color:var(--soma-sage-deep); background:var(--soma-sage-wash);
}
.soma-demo-shell .demo-choice strong { font-size:clamp(1.35rem,2.2vw,1.8rem); letter-spacing:-.03em; }
.soma-demo-shell .demo-choice-index { color:var(--signal-ui); font-size:10px; font-weight:800; letter-spacing:.13em; }
.soma-demo-shell .demo-choice > span:not(.demo-choice-index) { display:block; color:var(--muted); max-width:320px; font-size:13px; line-height:1.6; }
.soma-demo-shell .demo-choice em { font-style:normal; margin-top:10px; color:var(--signal-ui); font-weight:800; font-size:12px; }
.soma-demo-shell .demo-form { border-top:3px solid var(--signal); margin-top:14px; }
.soma-demo-shell .demo-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.soma-demo-shell .demo-form label { display:grid; gap:5px; }
.soma-demo-shell .demo-form label>span,.soma-demo-shell .demo-form-workspace>span {
  display:block; font-weight:700; margin-bottom:7px;
}
.soma-demo-shell .demo-form input[type="text"],.soma-demo-shell .demo-form select,.soma-demo-shell .demo-request select {
  width:100%; min-height:42px; padding:9px 12px; color:var(--ink); border:1px solid var(--line-strong);
  background:var(--soma-surface-ivory); border-radius:9px; font:inherit;
}
.soma-demo-shell .demo-form-workspace { padding:12px 16px; border-radius:12px; border:1px solid var(--soma-line); background:var(--soma-sage-wash); }
.soma-demo-shell .demo-form-workspace strong { display:block; margin:8px 0; font-size:18px; color:var(--soma-sage-deep); }
.soma-demo-shell .demo-form-workspace small { color:var(--muted); }
.soma-demo-shell .demo-note { color:var(--muted); font-size:12px; margin:19px 0 0; }
.soma-demo-shell .demo-actions { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-top:24px; }
.soma-demo-shell .demo-actions .primary { text-align:center; }
.soma-demo-shell .demo-text-button { border:1px solid var(--line-strong); border-radius:9px; padding:11px 14px; background:var(--soma-surface-ivory); color:var(--ink); font-weight:650; text-decoration:none; }
.soma-demo-shell .demo-text-button:hover { border-color:var(--soma-sage-deep); }
.soma-demo-shell .demo-dashboard-head { align-items:center; padding:18px 2px; }
.soma-demo-shell .demo-dashboard-head h2 { margin:0 0 6px; }
.soma-demo-shell .demo-dashboard-head p:not(.eyebrow) { color:var(--muted); }
.soma-demo-shell .demo-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
.soma-demo-shell .demo-metrics .metric-card { background:var(--soma-surface-ivory); border-color:var(--soma-line); }
.soma-demo-shell .demo-dashboard-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.soma-demo-shell .demo-dashboard-grid>.card { min-width:0; }
.soma-demo-shell .demo-panel-head { gap:10px; align-items:flex-start; flex-wrap:wrap; }
.soma-demo-shell .demo-panel-head h3 { margin:0; font-size:20px; letter-spacing:-.025em; }
.soma-demo-shell .demo-panel-head span { color:var(--muted); font-size:12px; }
.soma-demo-shell .demo-chart { height:270px; margin:10px 0 0; display:block; }
.soma-demo-shell .demo-chart svg { width:100%; height:100%; overflow:visible; }
.soma-demo-shell .demo-chart .axis-text { fill:var(--muted); font-size:11px; }
.soma-demo-shell .demo-caption { font-size:12px; line-height:1.5; color:var(--muted); margin:10px 0 0; }
.soma-demo-shell .demo-activity { list-style:none; padding:0; margin:12px 0 0; }
.soma-demo-shell .demo-activity li { display:flex; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid var(--soma-line); font-size:13px; }
.soma-demo-shell .demo-activity li strong { font-weight:650; }
.soma-demo-shell .demo-activity li span { color:var(--muted); text-align:right; }
.soma-demo-shell .demo-action-panel { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; margin-top:16px; border-top:3px solid var(--signal); }
.soma-demo-shell .demo-action-panel h3 { font-size:20px; margin:5px 0; }
.soma-demo-shell .demo-action-panel p:not(.eyebrow) { color:var(--muted); font-size:13px; }
.soma-demo-shell .demo-action-controls { display:flex; flex-direction:column; gap:11px; align-items:flex-start; min-width:min(100%,260px); }
.soma-demo-shell .demo-action-controls input[type=range] { width:100%; accent-color:var(--signal-ui); }
.soma-demo-shell .demo-action-controls output { font-size:24px; font-weight:800; color:var(--signal-ui); }
.soma-demo-shell .demo-action-controls .primary { max-width:100%; }
.soma-demo-shell #action-feedback { margin:0; flex:1 1 100%; color:var(--soma-sage-deep); font-size:13px; }
.soma-demo-shell .demo-request { max-width:840px; background:var(--soma-surface); border-top:3px solid var(--signal); }
.soma-demo-shell .demo-request h2 { font-size:clamp(1.6rem,2.8vw,2.3rem); }
.soma-demo-shell .demo-request>p:not(.eyebrow) { color:var(--muted); max-width:680px; line-height:1.6; }
.soma-demo-shell .demo-request-label { display:block; font-weight:700; margin:24px 0 8px; }
.soma-demo-shell .demo-request select { max-width:420px; }
.soma-demo-shell .demo-request-disclaimer,.soma-demo-shell .demo-contact { font-size:12px; }
.soma-demo-shell .demo-contact a { color:var(--signal-ui); }
.soma-demo-shell #copy-feedback { min-height:1.5em; font-size:13px; }
.soma-demo-shell .footer-note a { color:var(--signal-ui); }
.soma-demo-shell .sr-only { position:absolute!important; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
[hidden] { display:none!important; }
@media(max-width:760px){
 .soma-demo-shell .demo-choices,.soma-demo-shell .demo-form-grid { grid-template-columns:1fr; }
 .soma-demo-shell .demo-dashboard-grid { grid-template-columns:1fr; }
 .soma-demo-shell .demo-dashboard-grid .span-2 { grid-column:auto; }
 .soma-demo-shell .demo-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .soma-demo-shell .demo-progress li { flex:1 1 0; text-align:center; font-size:11px; padding:9px 6px; }
 .soma-demo-shell .demo-safety { flex-direction:column; }
 .soma-demo-shell .demo-choice { min-height:160px; }
}
@media(max-width:480px){
 .soma-demo-shell .demo-metrics { grid-template-columns:1fr; }
 .soma-demo-shell .demo-actions { align-items:stretch; flex-direction:column; }
 .soma-demo-shell .demo-actions>* { width:100%; text-align:center; }
 .soma-demo-shell .demo-progress li { font-size:10px; }
 .soma-demo-shell .demo-dashboard-head { flex-direction:column; align-items:flex-start; }
}


/* Two original Soma watercolor Monstera leaves, cropped from the existing
   first-party 1586x992 public Soma screenshot. Only decorative edge crops;
   no duplicate UI, new art, external fetch, or authenticated assets. */
body[data-surface^="soma-"]::before,
body[data-surface^="soma-"]::after {
  content:""; position:fixed; z-index:0; pointer-events:none;
  background-image:url("../../assets/soma-lua-dashboard-screenshot.png");
  background-size:1586px 992px; background-repeat:no-repeat; opacity:.88;
}
body[data-surface^="soma-"]::before {
  width:285px; height:435px; left:0; top:145px;
  background-position:left -145px;
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 73%,transparent 100%);
  mask-image:linear-gradient(to right,#000 0%,#000 73%,transparent 100%);
}
body[data-surface^="soma-"]::after {
  width:280px; height:310px; right:0; top:0;
  background-position:right top;
  -webkit-mask-image:linear-gradient(to left,#000 0%,#000 73%,transparent 100%);
  mask-image:linear-gradient(to left,#000 0%,#000 73%,transparent 100%);
}
.soma-demo-shell { position:relative; z-index:1; }
@media(max-width:1050px) {
  body[data-surface^="soma-"]::before { opacity:.44; width:220px; }
  body[data-surface^="soma-"]::after { opacity:.44; width:200px; }
}
@media(max-width:680px) {
  body[data-surface^="soma-"]::before,
  body[data-surface^="soma-"]::after { opacity:.20; }
  body[data-surface^="soma-"]::before { top:235px; width:150px; }
  body[data-surface^="soma-"]::after { width:145px; }
  .soma-demo-shell .demo-progress li { font-size:11px; padding:11px 8px 10px; }
}

/* Shared website accessibility: bypass product header/progress and focus content. */
.soma-demo-shell main:focus { outline:none; }
.skip-link {
  position:fixed; top:12px; left:16px; z-index:9999;
  padding:12px 18px; background:var(--soma-surface-ivory);
  color:var(--ink); border:2px solid var(--soma-sage-deep);
  border-radius:9px; font-weight:750; text-decoration:none;
  transform:translateY(calc(-100% - 30px));
}
.skip-link:focus,.skip-link:focus-visible {
  transform:translateY(0);
  outline:3px solid var(--ink); outline-offset:2px;
}
.soma-demo-shell .demo-home-link { font-weight:700; text-decoration:none; }
.soma-demo-shell .demo-home-link:hover { text-decoration:underline; text-underline-offset:3px; }