/* WSOS 0.8: one dense vocabulary for panoramas and their native surfaces. */
html.wsos-studio { --wb-gap: 14px; --wb-panel-width: 390px; }
html.wsos-studio[data-density="compact"] { --wb-gap: 10px; --wb-panel-width: 360px; }
html.wsos-studio[data-view="workbench"] .app-shell { max-width: none; }
html.wsos-studio[data-view="workbench"] #main-content { max-width: none; padding-top: 16px; }
.wb-selector { min-width: 0; margin-top: 12px; }
.wb-selector > label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 650; }
.wb-selector > div { display: flex; align-items: center; gap: 4px; }
.wb-selector select { min-width: 0; width: 100%; font-size: 14px; font-weight: 600; }
.wb-selector .icon-button { flex: 0 0 32px; width: 32px; height: 32px; }
.wb-view { min-width: 0; width: 100%; }
.wb-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.wb-heading h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 620; letter-spacing: -.03em; margin: 2px 0; }
.wb-heading-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.wb-context { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; background: var(--primary-container); border-radius: var(--shape-sm); margin-bottom: 12px; color: var(--on-primary-container); flex-wrap: wrap; }
.wb-context > span { font-size: 11px; text-transform: uppercase; font-weight: 650; letter-spacing: .04em; }
.wb-context small { font-size: 11px; opacity: .8; }
.wb-context .entity-link { padding: 0; font-weight: 650; }
.wb-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.wb-actions:not(:empty) { margin-bottom: 12px; }
.wb-panel-navigation { display: flex; align-items: stretch; gap: 4px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
.wb-panel-navigation > .icon-button { flex: 0 0 32px; font-size: 24px; height: 42px; }
#wb-panel-tabs { display: flex; align-items: stretch; flex: 1; min-width: 0; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
#wb-panel-tabs button { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; white-space: nowrap; padding: 8px 12px; font-weight: 600; }
#wb-panel-tabs button[aria-current="true"] { color: var(--accent); border-color: var(--accent); }
#wb-panel-tabs button:hover { background: var(--surface-low); color: var(--text); }
.wb-track { position: relative; contain: layout paint; display: flex; align-items: stretch; gap: var(--wb-gap); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 0; padding: 0 0 10px; min-height: 300px; scrollbar-width: thin; scrollbar-color: var(--control-border) transparent; }
.wb-track::after { content: ''; flex: 0 0 max(0px, calc(100% - var(--wb-panel-width) - var(--wb-gap))); }
.wb-panel { flex: 0 0 var(--wb-panel-width); min-width: 0; max-width: 100%; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; scroll-snap-align: start; display: flex; flex-direction: column; }
.wb-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; background: var(--surface-low); border-bottom: 1px solid var(--border); min-height: 47px; }
.wb-panel-heading h3 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.wb-panel-heading .kicker { font-size: 9px; margin-bottom: 2px; }
.wb-panel-heading .text-button { padding: 4px 8px; min-height: 24px; }
.wb-panel-body { padding: 14px; overflow-y: auto; overflow-x: auto; max-height: calc(100dvh - 280px); min-height: 220px; scrollbar-width: thin; }
.wb-panel-body:has(.wb-mounted[data-view="calendar"]) { min-width: min(760px, 88vw); }
.wb-panel:has(.wb-mounted[data-view="calendar"]) { flex-basis: 760px; }
.wb-panel:has(.wb-mounted[data-view="map"]), .wb-panel:has(.wb-mounted[data-view="matrix"]) { flex-basis: 650px; }
.wb-panel-body > .view.wb-mounted { display: block !important; opacity: 1; animation: none; padding: 0; min-width: 0; }
.wb-mounted > .section-heading { align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.wb-mounted > .section-heading > div:first-child { display: none; }
.wb-mounted > .section-heading:has(> div:only-child) { display: none; }
.wb-mounted > .section-heading > button { width: 100%; }
.wb-mounted .studio-view-description { display: none; }
.wb-mounted .studio-tabs { overflow-x: auto; flex-wrap: nowrap; }
.wb-mounted .studio-tabs button { white-space: nowrap; }
.wb-mounted .studio-launchpad { display: none; }
.wb-panel-body .workshop-overview, .wb-panel-body .workshop-overview-grid,
.wb-panel-body .workshop-entity-grid, .wb-panel-body .inventory-entity-grid,
.wb-panel-body .money-action-grid, .wb-panel-body .today-balance-row,
.wb-panel-body .repair-detail-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wb-panel-body .workshop-repair-list, .wb-panel-body .workshop-repair-grid { display: flex; flex-direction: column; }
.wb-panel-body .repair-card, .wb-panel-body .workshop-card { min-width: 0; }
.wb-panel-body .workshop-toolbar { flex-wrap: wrap; }
.wb-panel-body .workshop-tabs, .wb-panel-body .segmented-control { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
.wb-panel-body .workshop-tabs > *, .wb-panel-body .segmented-control > * { flex-shrink: 0; }
.wb-panel-body .workshop-search { width: 100%; }
.wb-panel-body .repair-detail-section { margin: 0 0 18px; padding: 0; border: 0; }
.wb-panel-body .repair-detail-section h3 { font-size: 15px; }
.wb-panel-body .repair-detail-hero { padding: 0; display: block; margin-bottom: 12px; }
.wb-panel-body .repair-detail-amount { margin-top: 10px; align-items: flex-start; text-align: left; }
.wb-panel-body .repair-detail-facts { margin: 12px 0; }
.wb-panel-body .repair-detail-facts article { padding: 10px; }
.wb-panel-body .repair-status-form, .wb-panel-body .custody-move-form { display: flex; flex-direction: column; gap: 8px; }
.wb-panel-body .repair-status-form > *, .wb-panel-body .custody-move-form > * { width: 100%; min-width: 0; }
.wb-panel-body .workflow-workspace { min-width: 0; }
#repair-detail-content[data-panorama="true"] { display: contents; }
.wb-selected-record { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--primary-container) !important; }
.wb-empty { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 180px; padding: 14px; color: var(--muted); }
.wb-empty strong { color: var(--text); font-size: 16px; }
.wb-empty p { line-height: 1.5; font-size: 13px; }
.wb-status { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 8px 0; }
.wb-panel-error { background: var(--error-container); color: var(--error); padding: 12px; border-radius: 8px; }
.wb-draft-note { padding: 9px 12px; background: var(--warning-container); color: var(--warning); border-radius: 8px; font-size: 12px; }
.wb-draft-note .text-button { font-size: inherit; padding: 0 4px; min-height: 0; }
.wb-editor { width: min(780px, calc(100vw - 24px)); max-width: 780px; max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 16px; }
.wb-editor::backdrop { background: #10171980; backdrop-filter: blur(3px); }
.wb-editor-heading { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; position: sticky; top: 0; z-index: 1; background: var(--surface); border-bottom: 1px solid var(--border); }
.wb-editor-heading h2 { font-size: 23px; margin: 3px 0 0; font-weight: 600; }
#wb-editor-body { padding: 20px 24px; }
.wb-editor label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.wb-editor input:not([type="checkbox"]), .wb-editor select { width: 100%; color: var(--text); background: var(--surface); border: 1px solid var(--control-border); border-radius: 7px; padding: 9px 10px; font: inherit; font-size: 14px; }
.wb-editor-basics { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 12px; }
.wb-editor-panels { display: flex; flex-direction: column; gap: 9px; margin: 18px 0; }
.wb-editor-panel { display: grid; grid-template-columns: 32px minmax(0,1fr) 32px; gap: 10px; padding: 12px; background: var(--surface-low); border: 1px solid var(--border); border-radius: 10px; }
.wb-editor-panel > div:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.wb-editor-panel > div:nth-child(2) > small { grid-column: 1/-1; grid-row: 2; color: var(--muted); font-size: 11px; }
.wb-editor-panel details { grid-column: 1/-1; font-size: 12px; }
.wb-editor-order { display: flex; flex-direction: column; }
.wb-editor .icon-button { width: 30px; height: 30px; }
.wb-editor-add { display: flex; gap: 12px; align-items: flex-end; }
.wb-editor-add label { flex: 1; min-width: 0; }
.wb-editor-add button { flex-shrink: 0; }
.wb-editor-extras { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 14px; }
.wb-editor-extras summary { font-weight: 600; cursor: pointer; margin-bottom: 12px; }
.wb-editor-action { display: grid; grid-template-columns:minmax(0,1fr) minmax(70px,130px) 30px; gap: 8px; align-items: center; margin-bottom: 8px; }
.wb-editor-action small { color: var(--muted); font-size: 11px; max-width: 130px; }
.wb-editor .wb-check { flex-direction: row; align-items: center; gap: 8px; margin: 10px 0; }
.wb-roles { display: flex; flex-wrap: wrap; gap: 0 14px; }
.wb-editor-footer { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--border); position: sticky; bottom: 0; background: var(--surface); }
#wb-editor-status { flex: 1 1 100%; font-size: 12px; color: var(--muted); }
.wb-revision { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 6px 0; }
html.wsos-studio[data-density="compact"] .wb-panel-body { padding: 11px; }
html.wsos-studio[data-density="compact"] .wb-panel-heading { padding: 10px 12px; }
html.wsos-studio[data-density="compact"] .wb-panel-body :is(.workshop-repair-card, .workshop-entity-card, .task-card, .transaction-card) { padding: 10px 12px; }
:is(.wb-panel-navigation, .wb-editor, .wb-heading, .wb-selector) button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media(min-width:1440px) { html.wsos-studio[data-view="workbench"] { --sidebar-width:224px; } }
@media(max-width:1023px) {
  .wb-selector { margin-top: 0; min-width: 125px; flex: 1; }
  #studio-mobile-workspace .workspace-strip { display: flex; align-items: center; gap: 12px; }
  #studio-mobile-workspace .workspace-field { flex: 1; min-width: 0; }
  .wb-panel-body { max-height: calc(100dvh - 325px); }
  .wb-heading { align-items: flex-start; gap: 8px; }
  .wb-heading-actions { gap: 3px; justify-content: flex-end; }
  .wb-heading-actions button { font-size: 12px; }
}
@media(max-width:600px) {
  html.wsos-studio { --wb-panel-width:calc(100vw - 48px); --wb-gap:9px; }
  html.wsos-studio[data-density="compact"] { --wb-panel-width:calc(100vw - 48px); --wb-gap:9px; }
  html.wsos-studio[data-view="workbench"] #main-content { padding-inline: 12px; }
  .wb-heading { display: block; margin-bottom: 10px; }
  .wb-heading h2 { font-size: 24px; }
  .wb-heading-actions { margin-top: 7px; justify-content: flex-start; }
  .wb-context { padding: 9px 10px; gap: 5px 8px; }
  .wb-context small { display: none; }
  .wb-panel-body { max-height: calc(100dvh - 350px); min-height: 260px; }
  .wb-panel-heading { padding: 10px 12px; }
  .wb-panel-navigation { margin-right: -6px; margin-left: -6px; }
  #wb-panel-tabs button { font-size: 14px; padding-inline: 10px; }
  .wb-track { scroll-snap-type: x mandatory; padding-right: 16px; }
  .wb-panel:has(.wb-mounted[data-view="calendar"]), .wb-panel:has(.wb-mounted[data-view="map"]), .wb-panel:has(.wb-mounted[data-view="matrix"]) { flex-basis: var(--wb-panel-width); }
  .wb-panel-body:has(.wb-mounted[data-view="calendar"]) { min-width: 0; }
  .wb-editor-heading { padding: 14px; }
  .wb-editor-heading h2 { font-size: 21px; }
  #wb-editor-body { padding: 14px; }
  .wb-editor-basics { grid-template-columns: 1fr 1fr; }
  .wb-editor-basics label:first-child { grid-column: 1/-1; }
  .wb-editor-panel { padding: 9px; gap: 6px; }
  .wb-editor-panel > div:nth-child(2) { grid-template-columns: 1fr; }
  .wb-editor-panel > div:nth-child(2) > small { grid-row: auto; }
  .wb-editor-add { align-items: stretch; flex-direction: column; }
  .wb-editor-footer { padding: 12px 14px; }
  .wb-editor-footer button { font-size: 12px; padding-inline: 10px; }
}
@media(prefers-reduced-motion:reduce) { .wb-track, #wb-panel-tabs { scroll-behavior: auto; } }
.wb-action-context { grid-column:1/-1; display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin:4px 0 10px; padding:12px; border:1px solid var(--border); border-radius:8px; }
.wb-action-context legend { font-size:12px; color:var(--muted); padding:0 5px; }

/* Native 0.7 surfaces also use html.wsos-studio selectors. Match that scope so
   their standalone spacing does not override a composed, narrower panel. */
html.wsos-studio #studio-workspace .workspace-strip { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
html.wsos-studio #studio-workspace .workspace-field, html.wsos-studio #studio-workspace .wb-selector { width: 100%; }
html.wsos-studio .wb-context .entity-link { display: inline; width: auto; min-height: 0; border: 0; background: transparent; padding: 0; color: inherit; }
html.wsos-studio .wb-context { display: flex; }
html.wsos-studio .wb-panel-body .repair-detail-section { margin: 0 0 18px; padding: 0; border: 0; min-height: 0; box-shadow: none; }
html.wsos-studio .wb-panel-body .repair-detail-section .compact-heading { margin-bottom: 9px; }
html.wsos-studio .wb-panel-body .repair-detail-hero { padding: 0; display: block; margin-bottom: 12px; background: transparent; }
html.wsos-studio .wb-panel-body .repair-detail-hero > div > strong { font-size: 20px; }
html.wsos-studio .wb-panel-body .repair-detail-amount { margin-top: 10px; align-items: flex-start; text-align: left; }
html.wsos-studio .wb-panel-body .repair-detail-facts { grid-template-columns: repeat(2,minmax(0,1fr)); margin: 12px 0; }
html.wsos-studio .wb-panel-body .repair-detail-facts article { padding: 9px; }
html.wsos-studio .wb-panel-body .compact-notice { margin: 8px 0; padding: 10px; font-size: 12px; }
html.wsos-studio .wb-panel-body .repair-detail-section h3 { font-size: 15px; }
html.wsos-studio .wb-panel-body .workshop-overview { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
html.wsos-studio .wb-panel-body .workshop-stat-card { min-height:0; padding:10px; }
html.wsos-studio .wb-panel-body .workshop-stat-card strong { font-size:23px; }
html.wsos-studio .wb-panel-body .workshop-toolbar { flex-wrap:wrap; }
html.wsos-studio .wb-panel-body .workshop-repair-card { padding:12px; }
html.wsos-studio .wb-panel-body .studio-view-description { display:none; }
html.wsos-studio .wb-panel-body .section-heading { margin-bottom:12px; }
html.wsos-studio .wb-panel-body .wb-empty { background:transparent; padding:10px; }
html.wsos-studio .wb-panel-body { max-height:var(--wb-available-height,calc(100dvh - 300px)); }

/* The demonstration uses the same shell; its accent distinguishes fictitious data. */
html.wsos-studio .learning-context-bar { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin:0 0 16px; padding:10px 14px; background:var(--warning-container); color:var(--warning); border:1px solid color-mix(in srgb,var(--warning) 20%,transparent); border-radius:10px; }
html.wsos-studio .learning-context-bar strong { font-size:13px; }
html.wsos-studio .learning-context-bar span { font-size:12px; flex:1; }
html.wsos-studio .learning-context-bar button { padding:6px 10px; min-height:30px; font-size:12px; }
html.wsos-studio .learning-intro, html.wsos-studio .learning-session { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px; }
html.wsos-studio .learning-intro > h2, html.wsos-studio .learning-heading h2 { font-weight:620; font-size:clamp(23px,3vw,30px); margin:6px 0 12px; }
html.wsos-studio .learning-intro > p { max-width:780px; color:var(--muted); line-height:1.6; }
html.wsos-studio .learning-mode-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:24px 0; }
html.wsos-studio .learning-mode-grid article { padding:18px; background:var(--surface-low); border:1px solid var(--border); border-radius:12px; }
html.wsos-studio .learning-mode-grid h3 { margin:0 0 9px; font-size:16px; }
html.wsos-studio .learning-mode-grid p { margin:0; font-size:13px; color:var(--muted); line-height:1.6; }
html.wsos-studio .learning-mode { display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted); max-width:270px; }
html.wsos-studio .learning-mode select { min-height:40px; }
html.wsos-studio .learning-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:16px 0; }
html.wsos-studio .learning-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
html.wsos-studio .learning-progress { color:var(--accent); font-size:14px; font-weight:650; }
html.wsos-studio .learning-progress progress { accent-color:var(--accent); width:100%; }
html.wsos-studio .learning-brief { display:flex; flex-wrap:wrap; gap:10px; padding:14px; background:var(--surface-low); border-radius:10px; font-size:13px; margin:16px 0; }
html.wsos-studio .learning-next { padding:18px; background:var(--primary-container); color:var(--on-primary-container); border-radius:12px; margin:20px 0; }
html.wsos-studio .learning-next h3 { margin:0 0 8px; }
html.wsos-studio .learning-route { list-style:none; padding:0; margin:20px 0; display:grid; gap:10px; }
html.wsos-studio .learning-step { padding:16px; border:1px solid var(--border); border-radius:12px; }
html.wsos-studio .learning-step.is-complete { border-color:color-mix(in srgb,var(--success) 25%,var(--border)); background:var(--success-container); }
html.wsos-studio .learning-step-number { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--surface-high); font-size:12px; font-weight:650; margin-right:8px; }
html.wsos-studio .learning-step-state { color:var(--muted); font-size:12px; }
html.wsos-studio .learning-evidence { font-size:12px; color:var(--muted); padding-top:10px; }
html.wsos-studio .learning-evidence-list { display:grid; gap:6px; }
html.wsos-studio .learning-notice { padding:18px; border-radius:12px; background:var(--surface-low); color:var(--muted); }
html.wsos-studio .learning-notice.is-error { color:var(--error); background:var(--error-container); }
html.wsos-studio .learning-restart { border-top:1px solid var(--border); padding-top:18px; margin-top:22px; }
@media(max-width:600px) {
  html.wsos-studio .learning-intro, html.wsos-studio .learning-session { padding:16px; }
  html.wsos-studio .learning-mode-grid { grid-template-columns:1fr; gap:8px; margin:16px 0; }
  html.wsos-studio .learning-mode-grid article { padding:12px; }
  html.wsos-studio .learning-heading { display:block; }
  html.wsos-studio .learning-actions > button { flex:1 1 auto; font-size:12px; }
  html.wsos-studio .learning-context-bar span { flex-basis:100%; }
}