/* Study workspace chrome. Inside the canvas it uses Excalidraw's own theme variables; dialogs outside it use the tokens below. */
:root { --sw-bg: #ffffff; --sw-text: #1b1b1f; --sw-muted: #6b6f76; --sw-line: #e3e3e8; --sw-accent: #6965db; --sw-warn: #b35c00; color-scheme: light; }
:root[data-theme="dark"] { --sw-bg: #232329; --sw-text: #e3e3e8; --sw-muted: #a7a7b0; --sw-line: #3d3d45; --sw-accent: #a8a5ff; --sw-warn: #ffb35c; color-scheme: dark; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--sw-bg); }
#app, .sw-root { height: 100vh; height: 100dvh; width: 100vw; }

.sw-top { display: flex; align-items: center; gap: 6px; }
.sw-pickers { display: flex; gap: 6px; }
.sw-pickers select { max-width: 220px; height: 36px; border-radius: 8px; border: 1px solid var(--default-border-color, #ddd); background: var(--island-bg-color, #fff); color: var(--text-primary-color, #1b1b1f); font: 13px/1.2 Assistant, system-ui, sans-serif; padding: 0 8px; box-shadow: var(--shadow-island); }
.sw-trigger { white-space: nowrap; }

.sw-footer { display: flex; align-items: center; gap: 12px; pointer-events: auto; }
.sw-stepper { display: flex; align-items: center; gap: 4px; background: var(--island-bg-color, #fff); border-radius: 10px; box-shadow: var(--shadow-island); padding: 3px; max-width: min(560px, 60vw); }
.sw-stage-title { font: 13px/1.3 Assistant, system-ui, sans-serif; color: var(--text-primary-color, #1b1b1f); padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sw-icon { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--text-primary-color, #1b1b1f); font-size: 20px; line-height: 1; cursor: pointer; flex: none; }
.sw-icon:hover:not(:disabled) { background: var(--button-hover-bg, #f1f0ff); }
.sw-icon:disabled { opacity: .35; cursor: default; }
.sw-pill { border: 1px solid var(--color-primary, #6965db); color: var(--color-primary, #6965db); background: transparent; border-radius: 999px; padding: 4px 10px; font: 12px Assistant, system-ui, sans-serif; cursor: pointer; flex: none; }
.sw-save { font: 11px Assistant, system-ui, sans-serif; color: var(--color-gray-50, #6b6f76); white-space: nowrap; }

.sw-sidebar-title { font: 600 13px Assistant, system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-panel { padding: 4px 14px 24px; font: 13px/1.55 Assistant, system-ui, sans-serif; color: var(--text-primary-color, #1b1b1f); overflow-wrap: anywhere; }
.sw-panel h2 { font-size: 17px; line-height: 1.3; margin: 2px 0 10px; }
.sw-section { border-top: 1px solid var(--default-border-color, #e3e3e8); margin-top: 12px; padding-top: 8px; }
.sw-section h3 { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-gray-50, #6b6f76); margin: 0 0 4px; }
.sw-section p { margin: 4px 0; }
.sw-eyebrow { font-size: 11px; letter-spacing: .08em; color: var(--color-gray-50, #6b6f76); margin: 8px 0 2px; }
.sw-list { margin: 4px 0; padding-left: 18px; }
.sw-muted, .sw-note { color: var(--color-gray-50, #6b6f76); }
.sw-note { font-size: 12px; margin-top: 16px; }
.sw-warning { color: var(--sw-warn); }
.sw-code { margin: 8px 0; }
.sw-code figcaption { font-size: 11px; color: var(--color-gray-50, #6b6f76); }
.sw-code pre, .sw-panel pre { white-space: pre-wrap; font: 12px/1.5 Cascadia, ui-monospace, monospace; background: var(--color-gray-10, #f5f5f7); border-radius: 8px; padding: 8px; margin: 4px 0; }
.sw-case { border-left: 3px solid var(--default-border-color, #e3e3e8); padding: 2px 0 2px 10px; margin: 8px 0; }
.sw-case p { margin: 2px 0; }
.sw-evidence { display: inline-block; font-size: 11px; color: var(--color-gray-50, #6b6f76); }
.sw-evidence.tested { color: #2f9e44; }
.sw-shape { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 4px 0; font-size: 12px; }
.sw-shape dt { font-family: Cascadia, ui-monospace, monospace; }
.sw-shape dd { margin: 0; color: var(--color-gray-50, #6b6f76); }
.sw-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; }
.sw-legend .added, .sw-change.added, .sw-change.merged { color: #1971c2; }
.sw-legend .changed, .sw-change.changed { color: #9c36b5; }
.sw-legend .removed { color: #868e96; }
.sw-change { font-size: 12px; text-transform: capitalize; }
.sw-check { display: flex; gap: 6px; align-items: center; font-size: 12px; margin-top: 6px; }
.sw-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.sw-stack { display: grid; gap: 8px; margin-top: 12px; }
.sw-button { border: 1px solid var(--default-border-color, #d6d6dc); background: var(--island-bg-color, #fff); color: inherit; border-radius: 8px; padding: 7px 12px; font: 13px Assistant, system-ui, sans-serif; cursor: pointer; text-align: left; }
.sw-button:hover { border-color: var(--color-primary, #6965db); }
.sw-button.primary { background: var(--color-primary, #6965db); border-color: var(--color-primary, #6965db); color: #fff; }
.sw-button.block { display: block; width: 100%; margin: 6px 0; }
.sw-sidebar-controls { padding: 8px 14px 0; }
.sw-sidebar-controls .sw-pickers { flex-direction: column; }
.sw-sidebar-controls .sw-pickers select { max-width: none; width: 100%; box-shadow: none; }
.sw-mobile-only { display: none; }
.sw-mobile-only .sw-stepper { max-width: none; margin-top: 8px; }

.sw-dialog { max-width: min(520px, calc(100vw - 32px)); border: 1px solid var(--sw-line); border-radius: 12px; background: var(--sw-bg); color: var(--sw-text); font: 14px/1.55 system-ui, sans-serif; padding: 20px; }
.sw-dialog::backdrop { background: rgba(0, 0, 0, .35); }
.sw-dialog h2 { font-size: 17px; margin: 0 0 10px; }
.sw-dialog .sw-button { background: var(--sw-bg); border-color: var(--sw-line); }
.sw-dialog .sw-button.primary { background: var(--sw-accent); border-color: var(--sw-accent); color: #fff; }
.sw-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }

@media (max-width: 730px) {
  .sw-mobile-only { display: block; }
  .sw-trigger { min-width: 0; }
}
.sw-sidebar .sidebar-triggers { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 8px; }
.sw-sidebar .sidebar-tab-trigger { font: 13px Assistant, system-ui, sans-serif; padding: 4px 8px; }
.sw-sidebar .sidebar-tab-trigger[data-state="active"] { color: var(--color-primary, #6965db); box-shadow: inset 0 -2px 0 var(--color-primary, #6965db); }

.sw-stepper .sw-icon { width: auto; gap: 4px; padding-inline: 7px; }
.sw-key-hint { font: 10px/1.2 Assistant, system-ui, sans-serif; opacity: .7; }
@media (max-width: 640px) { .sw-key-hint { display: none; } }

/* Study text is deliberately independent of Excalidraw's decorative/disabled grey tokens. */
.sw-root { --sw-study-width: 480px; --sw-panel-bg:#ffffff; --sw-panel-text:#202735; --sw-panel-muted:#475569; --sw-tab-bg:#eef1f7; --sw-tab-active:#4338ca; --sw-tab-ink:#ffffff; --sw-success:#166534; }
:root[data-theme="dark"] .sw-root { --sw-panel-bg:#232329; --sw-panel-text:#eef1f7; --sw-panel-muted:#bac5d6; --sw-tab-bg:#343841; --sw-tab-active:#c7c4ff; --sw-tab-ink:#19172f; --sw-success:#86efac; }
.sw-root:has(.sw-sidebar) .excalidraw { --right-sidebar-width: min(var(--sw-study-width), calc(100vw - 16px)) !important; }
.excalidraw .sw-sidebar { background:var(--sw-panel-bg); color:var(--sw-panel-text); }
.sw-sidebar .sw-panel { font-size:14px; line-height:1.6; color:var(--sw-panel-text); padding-inline:20px; }
.sw-sidebar .sw-panel h2 { font-size:20px; line-height:1.35; }
.sw-sidebar .sw-section h3 { font-size:12px; font-weight:700; color:var(--sw-panel-muted); }
.sw-sidebar .sw-panel :is(.sw-muted,.sw-note,.sw-eyebrow,.sw-evidence,.sw-code figcaption,.sw-shape dd) { color:var(--sw-panel-muted); }
.sw-sidebar .sw-evidence.tested { color:var(--sw-success); }
.sw-sidebar .sw-panel pre { font-size:13px; line-height:1.6; color:var(--sw-panel-text); background:var(--sw-tab-bg); }
.sw-sidebar .sw-shape { font-size:13px; grid-template-columns:minmax(70px,auto) 1fr; }
.sw-sidebar .sw-sidebar-title { font-size:14px; color:var(--sw-panel-text); }
.sw-sidebar .sidebar-tab-trigger { background:var(--sw-tab-bg); color:var(--sw-panel-text); border:1px solid transparent; border-radius:6px; font-weight:600; padding:7px 11px; }
.sw-sidebar .sidebar-tab-trigger[data-state="active"] { background:var(--sw-tab-active); color:var(--sw-tab-ink); box-shadow:none; }
.sw-sidebar .sidebar-tab-trigger:focus-visible { outline:2px solid var(--sw-tab-active); outline-offset:2px; }
.sw-root canvas.excalidraw__canvas { image-rendering:auto; }
.sw-mode-toggle { border:1px solid var(--sw-line); border-radius:8px; background:var(--sw-panel-bg); color:var(--sw-panel-text); font:600 13px/1.2 Assistant,system-ui,sans-serif; padding:8px 12px; cursor:pointer; }
.sw-mode-toggle[aria-pressed="true"] { color:var(--sw-tab-ink); background:var(--sw-tab-active); border-color:var(--sw-tab-active); }
.sw-guide-wrap { position:fixed; z-index:4; bottom:68px; left:50%; transform:translateX(-50%); width:min(880px,calc(100vw - 32px)); background:var(--sw-panel-bg); color:var(--sw-panel-text); border:1px solid var(--sw-line); border-radius:12px; box-shadow:0 3px 18px #00000018; padding:8px; box-sizing:border-box; }
.sw-guide-wrap .sw-stepper { max-width:none; background:transparent; box-shadow:none; padding:0 0 5px; }
.sw-guide-wrap .sw-stage-title { color:var(--sw-panel-text); font-size:14px; font-weight:600; }
.sw-guide-stages { display:flex; gap:5px; overflow-x:auto; padding:3px 1px 6px; scrollbar-width:thin; }
.sw-guide-stages button { flex:0 0 110px; display:flex; gap:6px; align-items:flex-start; min-height:48px; text-align:left; border:1px solid var(--sw-line); border-radius:7px; background:var(--sw-tab-bg); color:var(--sw-panel-text); padding:7px; font:12px/1.35 Assistant,system-ui,sans-serif; cursor:pointer; }
.sw-guide-stages button[aria-current="step"] { background:var(--sw-tab-active); color:var(--sw-tab-ink); border-color:var(--sw-tab-active); }
.sw-guide-stages button:focus-visible { outline:2px solid var(--sw-tab-active); outline-offset:1px; }
.sw-guide-number { font-weight:700; }
.sw-guide-name { overflow-wrap:anywhere; }
.sw-guide-explanation { margin:4px 3px 2px; font:14px/1.45 Assistant,system-ui,sans-serif; color:var(--sw-panel-text); max-height:7.5em; overflow-y:auto; overscroll-behavior:contain; }
.sw-root:has(.sw-sidebar) .sw-guide-wrap { left:calc((100% - min(var(--sw-study-width),calc(100vw - 16px))) / 2); width:min(880px,calc(100vw - min(var(--sw-study-width),calc(100vw - 16px)) - 32px)); }
@media (max-width:1200px) { .sw-save { display:none; } }
@media (max-width:730px) {
 .sw-sidebar .sw-panel { padding-inline:16px; }
 .sw-guide-wrap { bottom:68px; width:calc(100vw - 16px); }
 .sw-guide-stages button { flex-basis:104px; }
 .sw-guide-explanation { font-size:13px; max-height:6em; }
 .sw-root:has(.sw-sidebar) .sw-guide-wrap { display:none; }
}

.sw-guide-wrap.sw-footer { display:block; }
.sw-guide-wrap .sw-icon { color:var(--sw-panel-text); }
@media (max-width:730px) { .sw-root:has(.sw-sidebar) .sw-guide-wrap.sw-footer { display:none; } }

.excalidraw .sw-footer { min-height:36px; margin-left:8px; }
.sw-mode-toggle { height:36px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.sw-footer .sw-save { overflow:hidden; text-overflow:ellipsis; max-width:min(420px,30vw); }
.sw-guide-explanation a { color:var(--sw-panel-text); text-decoration:underline; text-underline-offset:2px; }
.sw-guide-explanation:focus-visible { outline:2px solid var(--sw-tab-active); outline-offset:2px; }
.sw-theme-control { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:8px 12px; font:14px Assistant,system-ui,sans-serif; color:var(--sw-panel-text); }
.sw-theme-control select { font:inherit; color:inherit; background:var(--sw-panel-bg); border:1px solid var(--sw-line); border-radius:6px; padding:5px 8px; }

.sw-guide-explanation { scrollbar-width:thin; scrollbar-color:var(--sw-tab-active) transparent; padding-right:6px; }