/* Small, semantic extensions to the existing learning workspace. */
.sf-editor-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 18px 0 10px; }
.sf-editor-heading .sf-label { margin: 0; }
.sf-editor-heading .sf-button { font-size: 12px; }
.sf-code-workspace { position: relative; padding-left: 3.5em; display: flex; min-width: 0; max-width: 100%; border: 1px solid var(--study-line); border-radius: 12px; overflow: hidden; background: var(--study-surface); }
.sf-code-workspace .sf-code-lines { position: absolute; inset: 0 auto 0 0; flex: none; width: 3.5em; margin: 0; padding: 16px 10px 16px 6px; border: 0; border-radius: 0; background: var(--study-soft); color: var(--study-muted); text-align: right; font: 400 14px/1.75 var(--font-mono,monospace); overflow: hidden; white-space: pre; max-height: none; user-select: none; }
.sf-code-workspace .sf-code-editor { flex: 1; width: 0; min-width: 0; border: 0; border-radius: 0; margin: 0; height: 280px; min-height: 240px; resize: vertical; padding: 16px; font: 400 14px/1.75 var(--font-mono,monospace); outline-offset: -3px !important; }
.sf-code-workspace .sf-code-editor:focus-visible { outline: none !important; }
.sf-code-workspace:focus-within { outline: 2px solid var(--study-accent); outline-offset: 2px; }
#sf-editor-position { font-variant-numeric: tabular-nums; margin: 8px 0; }
.sf-draft-status { min-height: 1.65em; }
.sf-runtime-error { margin: 12px 0; }
.sf-conflict, .sf-data-health { margin: 22px 0; padding: 20px; border: 1px solid var(--study-line); border-radius: 14px; background: var(--study-soft); color: var(--study-ink); }
.sf-conflict { border-left: 3px solid var(--study-accent); }
.sf-conflict p { font-size: 13px; }
.sf-storage-warning { padding: 12px 14px; border-left: 3px solid var(--study-accent); background: var(--study-selected); color: var(--study-ink); font-size: 13px !important; }
.sf-data-health dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 14px 0 20px; }
.sf-data-health dl > div { min-width: 0; padding-top: 10px; border-top: 1px solid var(--study-line); }
.sf-data-health dt { font: 600 13px/1.5 var(--font-body,sans-serif); }
.sf-data-health dd { margin: 4px 0 0; color: var(--study-muted); font: 400 12px/1.6 var(--font-body,sans-serif); }
@media(max-width:600px) {
  .sf-code-workspace .sf-code-editor, .sf-code-workspace .sf-code-lines { font-size: 13px; }
  .sf-code-workspace { padding-left: 3em; }
  .sf-code-workspace .sf-code-editor { padding-inline: 10px; }
  .sf-code-workspace .sf-code-lines { width: 3em; padding-inline: 4px; }
  .sf-conflict, .sf-data-health { padding: 18px 14px; }
}
@media(max-width:359px) { .sf-data-health dl { grid-template-columns: 1fr; } }
@media(forced-colors:active) { .sf-code-workspace, .sf-conflict, .sf-data-health { border-color: ButtonText; } }

/* Download availability is a checked state, not an inferred completion label. */
.sf-offline-state { display: inline-block; padding: 4px 9px; margin-bottom: 8px; border: 1px solid var(--study-line); border-radius: 9px; color: var(--study-muted); background: var(--study-soft); font: 600 11px/1.5 var(--font-body,sans-serif); }
.sf-offline-state[data-available="true"] { color: var(--study-success); }
.sf-offline-state[data-available="false"] { color: var(--study-error); }
.sf-offline-cost { margin-top: 18px; padding: 16px; border: 1px solid var(--study-line); border-radius: 14px; }
.sf-offline-cost summary { padding: 10px 0; min-height: 44px; cursor: pointer; color: var(--study-ink); font: 600 14px/1.6 var(--font-body,sans-serif); }
.sf-cache-breakdown { margin: 16px 0; }
.sf-cache-breakdown > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--study-line); font: 500 13px/1.6 var(--font-body,sans-serif); }
.sf-cache-breakdown dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--study-ink); }
.sf-cache-breakdown dt { color: var(--study-muted); }
.sf-download-form { scroll-margin-top: calc(var(--bar-h,80px) + 16px); }
.sf-download > .sf-button { flex-shrink: 0; }
@media (max-width:600px) { .sf-download > div { flex-basis: 100%; } .sf-download > .sf-button { flex: 1; } }
.sf-practice-source{position:relative;flex:1;min-width:0;isolation:isolate;--syntax-comment:#626a76;--syntax-keyword:#7c3daf;--syntax-string:#226630;--syntax-number:#915015;--syntax-function:#075c9e;--syntax-operator:#864700}
:root[data-theme="dark"] .sf-practice-source{--syntax-comment:#9ca6b5;--syntax-keyword:#c5a0ef;--syntax-string:#a7d787;--syntax-number:#efbd81;--syntax-function:#88c8f9;--syntax-operator:#f0ae70}
.sf-code-workspace .sf-practice-source :is(.sf-code-editor,.sf-practice-highlight){box-sizing:border-box;margin:0;padding:16px;border:0;border-radius:0;font:400 14px/1.75 var(--font-mono,monospace);font-variant-ligatures:none;letter-spacing:normal;word-spacing:normal;tab-size:4;white-space:pre;overflow-wrap:normal;word-break:normal;text-align:left;text-transform:none;text-shadow:none}
.sf-code-workspace .sf-practice-source .sf-code-editor{display:block;position:relative;z-index:1;width:100%;background:transparent;caret-color:var(--study-ink)}
.sf-code-workspace .sf-practice-highlight{display:none;position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;user-select:none;background:transparent;color:var(--study-ink)}
.sf-code-workspace .has-syntax .sf-practice-highlight{display:block}
.sf-code-workspace .has-syntax .sf-code-editor{color:transparent;-webkit-text-fill-color:transparent}
.sf-code-workspace .has-syntax .sf-code-editor::selection{background:#8aaaf34d;color:transparent}
.sf-practice-source .token{font:inherit;letter-spacing:inherit;text-decoration:none;background:none;text-shadow:none;color:inherit}
.sf-practice-source .token:is(.comment,.prolog,.doctype,.cdata){color:var(--syntax-comment)}
.sf-practice-source .token:is(.keyword,.boolean,.atrule){color:var(--syntax-keyword)}
.sf-practice-source .token:is(.string,.char,.attr-value){color:var(--syntax-string)}
.sf-practice-source .token:is(.number,.constant,.symbol){color:var(--syntax-number)}
.sf-practice-source .token:is(.function,.builtin,.class-name){color:var(--syntax-function)}
.sf-practice-source .token:is(.operator,.punctuation){color:var(--syntax-operator)}
.sf-output-heading{margin:24px 0 8px}.sf-output-heading+.sf-code-output{margin-top:0}
@media(max-width:600px){.sf-code-workspace .sf-practice-source :is(.sf-code-editor,.sf-practice-highlight){font-size:16px;padding:16px 10px}.sf-code-workspace .sf-code-lines{font-size:16px}}
@media(forced-colors:active){.sf-code-workspace .has-syntax .sf-practice-highlight{display:none}.sf-code-workspace .has-syntax .sf-code-editor{color:CanvasText;-webkit-text-fill-color:CanvasText;caret-color:CanvasText}.sf-code-workspace .has-syntax .sf-code-editor::selection{background:Highlight;color:HighlightText;-webkit-text-fill-color:HighlightText}}