/* /repo - UI-only repository preview skeleton.
 * Reuses Tinker writing chrome (.writing, .writing-input) and Lindow Labs
 * tokens from styles.css / design-tokens.css.
 */

html, body.repo-page {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-background);
}

/* Write page: continuous document scroll (page scrolls, not an inner box). */
html:has(body.repo-page--write),
body.repo-page--write {
  height: auto;
  min-height: 100%;
  min-height: 100svh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 18% 8%, rgba(123, 196, 122, 0.08), transparent 38%),
    radial-gradient(circle at 88% 4%, rgba(165, 180, 252, 0.10), transparent 38%),
    var(--color-background);
  /* Top safe area for titlebar / notch; JS may refine --repo-write-safe-top. */
  --repo-write-safe-top: calc(16px + env(safe-area-inset-top, 0px));
  --repo-write-fade: 48px;
  --repo-write-safe-inset-top: env(safe-area-inset-top, 0px);
}

/* Electron hiddenInset: clear traffic lights + drag strip before pad text. */
html[data-tinker-desktop] body.repo-page--write,
html.tinker-desktop body.repo-page--write {
  --repo-write-safe-top: calc(64px + env(safe-area-inset-top, 0px));
  --repo-write-fade: 56px;
}

@media (max-width: 800px) {
  html:has(body.repo-page--write),
  body.repo-page--write {
    --repo-write-safe-top: calc(48px + env(safe-area-inset-top, 0px));
    --repo-write-fade: 48px;
  }
}

/* Files page keeps the older contained shell. */
body.repo-page--files {
  height: 100%;
  overflow: hidden;
}

.repo-top {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  /* +16px top so header sits a little lower; safe-area for notched phones. */
  padding: calc(28px + env(safe-area-inset-top, 0px)) 20px 12px 20px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-background);
}

/* Write page: auth-only strip - Sign in / account on the right, no wordmark. */
.repo-top--auth {
  justify-content: flex-end;
  gap: 10px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 8px 16px;
  border-bottom: 0;
  background: transparent;
  min-height: 0;
}

/* Shared top nav (desktop + mobile): tinker mark left, past-essays hamburger right.
 * Transparent so nav + writing surface read as one continuous page wash
 * (including iOS safe-area / status bar). Icons stay pointer-events: auto. */
.repo-top--labs {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 50;
  isolation: isolate;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-height: calc(44px + env(safe-area-inset-top, 0px));
  height: auto;
  max-height: none;
  padding: calc(10px + env(safe-area-inset-top, 0px))
    calc(10px + env(safe-area-inset-right, 0px))
    8px
    calc(10px + env(safe-area-inset-left, 0px));
  border: 0;
  border-bottom: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  box-sizing: border-box;
  overflow: visible;
}

/* Shared compose dock: FAB and writing-status island share one bottom-right anchor
 * so the circle can stretch into the pill (and reverse) without jumping. */
body.repo-page--write {
  /* Legacy bottom essays panel is gone on write; do not inherit :root 35vh. */
  --repo-panel-height: 0px;
  /* Overridable in visual harnesses (Chromium has no real env(safe-area-*)). */
  --repo-safe-right: env(safe-area-inset-right, 0px);
  --repo-safe-bottom: env(safe-area-inset-bottom, 0px);
  --repo-compose-dock-right: calc(16px + var(--repo-safe-right));
  --repo-compose-dock-bottom: calc(
    var(--repo-foot-floor, max(48px, 8vh))
      + var(--repo-safe-bottom)
      + var(--repo-keyboard-inset, 0px)
  );
  --repo-compose-morph-ms: 300ms;
  --repo-compose-morph-ease: ease-out;
}

@media (min-width: 801px) {
  body.repo-page--write:has(.repo-layout--write.is-essays-open) {
    --repo-compose-dock-right: calc(16px + 280px + var(--repo-safe-right, env(safe-area-inset-right, 0px)));
  }
}

/* New essay FAB: circular, bottom-right, desktop + mobile/PWA.
 * Same action as the old centered top-nav pencil. Morphs into .repo-surface__foot. */
.repo-fab-new {
  position: fixed;
  z-index: 40;
  right: var(--repo-compose-dock-right, calc(16px + var(--repo-safe-right, env(safe-area-inset-right, 0px))));
  bottom: var(--repo-compose-dock-bottom, calc(20px + var(--repo-safe-bottom, env(safe-area-inset-bottom, 0px))));
  left: auto;
  top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  min-width: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface, #fff);
  color: var(--color-foreground);
  cursor: pointer;
  box-shadow:
    0 6px 20px rgba(28, 25, 23, 0.10),
    0 1px 3px rgba(28, 25, 23, 0.06);
  -webkit-tap-highlight-color: transparent;
  -webkit-app-region: no-drag;
  app-region: no-drag;
  pointer-events: auto;
  opacity: 1;
  transform: none;
  transition:
    opacity var(--repo-compose-morph-ms, 300ms) var(--repo-compose-morph-ease, ease-out),
    transform var(--repo-compose-morph-ms, 300ms) var(--repo-compose-morph-ease, ease-out);
}

.repo-fab-new:hover,
.repo-fab-new:focus-visible {
  color: var(--color-foreground);
  background: color-mix(in srgb, var(--color-surface, #fff) 88%, var(--color-accent, #a5b4fc) 12%);
}

.repo-fab-new:focus-visible {
  outline: none;
  box-shadow:
    var(--focus-ring),
    0 6px 20px rgba(28, 25, 23, 0.10),
    0 1px 3px rgba(28, 25, 23, 0.06);
}

.repo-fab-new__icon {
  display: block;
}

/* Hidden once the island owns the dock (or while code editor is open). */
.repo-fab-new.is-docked-away,
body.repo-code-open .repo-fab-new,
.repo-layout--write.is-code-open ~ .repo-fab-new,
body.repo-page--write:has(.repo-layout--write.is-code-open) .repo-fab-new {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
}

body.repo-code-open .repo-fab-new,
.repo-layout--write.is-code-open ~ .repo-fab-new,
body.repo-page--write:has(.repo-layout--write.is-code-open) .repo-fab-new {
  display: none;
}

/* Over mobile essay drawers: restore the FAB even if compose docked to island
 * (the island itself is hidden with the writing surface). */
body.repo-page--write[data-repo-essays-list="1"] .repo-fab-new,
body.repo-page--write[data-repo-tech-essays-list="1"] .repo-fab-new {
  z-index: 60;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  body.repo-page--write {
    --repo-compose-morph-ms: 0ms;
  }
  .repo-fab-new {
    transition: opacity 160ms ease;
    transform: none;
  }
}

.repo-top__past-essays {
  display: inline-flex;
  pointer-events: auto;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-app-region: no-drag;
  app-region: no-drag;
}

.repo-top__past-essays:hover,
.repo-top__past-essays:focus-visible {
  color: var(--color-foreground);
  background: color-mix(in srgb, var(--color-accent, #a5b4fc) 14%, transparent);
}

.repo-top__past-essays:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.repo-top__past-essays-icon {
  display: block;
}

body.repo-page--write[data-repo-essays-list="1"] .repo-top__past-essays {
  color: var(--color-accent-strong, #4f46e5);
}

body.repo-page--write[data-repo-essays-list="1"] .repo-top--labs {
  z-index: 55;
  background: transparent;
  box-shadow: none;
  border: 0;
}

/* Tab bar: open-file tabs only (mark control lives in the shared top bar). */
.repo-ide-tabbar {
  display: none;
}

/* Tinker mark matches hamburger: 44px hit target, 20px icon, same spacing. */
.repo-top--labs .repo-top__labs,
.repo-top__labs {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-app-region: no-drag;
  app-region: no-drag;
}

.repo-top__labs-icon {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  opacity: 1;
  object-fit: contain;
}

.repo-top__labs:hover,
.repo-top__labs:focus-visible {
  color: var(--color-foreground);
  background: color-mix(in srgb, var(--color-accent, #a5b4fc) 14%, transparent);
}

.repo-top__labs:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.repo-layout--write.is-tech-essays-open .repo-top__labs,
body.repo-page--write[data-repo-tech-essays-list="1"] .repo-top__labs {
  color: var(--color-accent-strong, #4f46e5);
}

body.repo-page--write[data-repo-tech-essays-list="1"] .repo-top--labs {
  z-index: 55;
  background: transparent;
  box-shadow: none;
  border: 0;
}

/* Tinker mark stays visible on desktop + mobile (left drawer toggle). */

.repo-top--auth .repo-top__back {
  margin-right: auto;
}

.repo-top--auth .repo-top__actions {
  margin-left: 0;
}

.repo-top--auth:not(:has(.repo-top__back)):not(:has(.repo-top__actions:not(:empty))) {
  /* Keep a slim hit area when only Sign in / account is present. */
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  padding-bottom: 4px;
}

/* Mac desktop: clear traffic lights (same inset as the main shell). */
html[data-tinker-desktop] .repo-top,
html.tinker-desktop .repo-top {
  padding-left: var(--tinker-desktop-traffic-inset, 78px);
  -webkit-app-region: drag;
}

html[data-tinker-desktop] .repo-top a,
html[data-tinker-desktop] .repo-top button,
html[data-tinker-desktop] .repo-top input,
html[data-tinker-desktop] .repo-top textarea,
html[data-tinker-desktop] .repo-top select,
html[data-tinker-desktop] .repo-top [role="button"],
html.tinker-desktop .repo-top a,
html.tinker-desktop .repo-top button,
html.tinker-desktop .repo-top input,
html.tinker-desktop .repo-top textarea,
html.tinker-desktop .repo-top select,
html.tinker-desktop .repo-top [role="button"] {
  -webkit-app-region: no-drag;
}

.repo-top__back,
.repo-top__nav {
  color: var(--color-muted);
  text-decoration: none;
  font-size: 13px;
  flex-shrink: 0;
}

.repo-top__back:hover,
.repo-top__nav:hover { color: var(--color-foreground); }

.repo-top__nav {
  font-weight: 600;
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button, 10px);
  background: var(--color-card, var(--color-surface));
  box-shadow: var(--shadow-button);
}

.repo-top__nav:hover {
  border-color: var(--color-accent);
}

.repo-top__nav--signin {
  color: var(--color-foreground);
  border-color: var(--color-foreground);
  background: var(--color-background);
}

.repo-top__nav--signin:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-strong, #4f46e5);
}

.repo-top__account {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.repo-top__account[hidden] {
  display: none !important;
}

.repo-top__account-label {
  font-size: 12px;
  color: var(--color-muted);
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.repo-top__name {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: var(--font-display-settings);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--color-foreground);
}

.repo-top__branch {
  margin: 0;
  font-size: 12px;
  color: var(--color-muted);
  padding: 2px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.repo-top__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

.repo-top__action {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-foreground);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.repo-top__action:hover {
  border-color: var(--color-accent);
}

.repo-file__path {
  margin: 0;
  font-size: 12px;
  color: var(--color-muted);
  word-break: break-all;
}

.repo-file__place {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--color-muted);
}

.repo-mobile__body {
  margin: 0;
  white-space: pre-wrap;
  font-family: var(--font-body, inherit);
  font-size: 14px;
  color: var(--color-foreground);
}

/* Location = floating island over the writing surface (globe + place field).
 * Shrink-wrapped and centered in the editor column (not the full page /
 * sidebar). Safe-area top clears the iPhone notch without an auth header. */
.repo-location {
  position: sticky;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: auto;
  right: auto;
  z-index: 12;
  align-self: center;
  justify-self: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 8px;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(280px, calc(100% - 32px));
  max-width: min(280px, calc(100% - 32px));
  pointer-events: none;
}

/* Author display:flex beats the UA [hidden] rule; hide explicitly when
 * the exercise code editor owns the surface. */
.repo-location[hidden] {
  display: none !important;
}

.repo-location__globe {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
  background: transparent;
  border: 0;
  box-shadow: none;
  object-fit: contain;
  pointer-events: none;
}

.repo-location__caption {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}

.repo-location__field {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: min(280px, 100%);
  max-width: 280px;
  min-width: 0;
  height: 36px;
  padding: 0 4px 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  box-shadow: 0 6px 20px rgba(28, 25, 23, 0.08), 0 1px 3px rgba(28, 25, 23, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.repo-location__field:focus-within {
  border-color: var(--color-accent-strong);
  box-shadow:
    0 6px 20px rgba(28, 25, 23, 0.1),
    0 0 0 3px var(--color-accent-dim, rgba(45, 90, 61, 0.14));
}

.repo-location__input {
  flex: 1;
  min-width: 0;
  width: auto;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-foreground);
  -webkit-appearance: none;
  appearance: none;
}

.repo-location__input:focus,
.repo-location__input:focus-visible {
  outline: none;
  border: 0;
  box-shadow: none;
}

.repo-location__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-foreground);
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.repo-location__value {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.repo-location__chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--color-muted);
  transition: transform 0.15s ease;
}

.repo-location__btn:hover {
  background: var(--color-accent-dim, rgba(45, 90, 61, 0.1));
}

.repo-location__btn:focus-visible {
  outline: none;
  background: var(--color-accent-dim, rgba(45, 90, 61, 0.1));
}

.repo-location__btn[aria-expanded="true"] .repo-location__chevron {
  transform: rotate(180deg);
}

.repo-location__panel {
  pointer-events: auto;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  right: auto;
  z-index: 20;
  width: min(280px, calc(100vw - 24px));
  max-height: min(420px, 70vh);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: 0 14px 34px rgba(28, 25, 23, 0.12);
  scrollbar-width: thin;
  transform: translateX(-50%);
}

.repo-location__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.repo-location__list:focus {
  outline: none;
}

.repo-location__section {
  margin: 0;
  padding: 0;
  list-style: none;
}

.repo-location__section-label {
  margin: 6px 10px 2px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.repo-location__option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 13px;
  color: var(--color-foreground);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.repo-location__remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.repo-location__remove:hover,
.repo-location__remove:focus-visible {
  background: rgba(28, 25, 23, 0.06);
  color: var(--color-foreground);
  outline: none;
}

.repo-location__check {
  width: 14px;
  flex-shrink: 0;
  color: var(--color-accent-strong);
  font-size: 13px;
  text-align: center;
}

.repo-location__option-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.repo-location__option-type,
.repo-location__option-badge {
  flex-shrink: 0;
  padding: 1px 7px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.repo-location__option-detail {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--color-muted);
}

.repo-location__option:hover,
.repo-location__option.is-active {
  background: var(--color-accent-dim, rgba(45, 90, 61, 0.1));
}

.repo-location__option[aria-selected="true"] {
  font-weight: 650;
}

.repo-location__option--custom,
.repo-location__option--storage {
  color: var(--color-muted);
}

.repo-location__option--custom {
  position: relative;
  margin-top: 7px;
}

.repo-location__option--custom::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 8px;
  right: 8px;
  border-top: 1px solid var(--color-border);
}

.repo-location__custom {
  padding: 8px 6px 6px;
}

.repo-location__label {
  display: block;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.repo-location__hint,
.repo-location__error {
  margin: 6px 2px 0;
  font-size: 12px;
  color: var(--color-muted);
}

.repo-location__error {
  color: #b42318;
}

.repo-location__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.repo-location__choose,
.repo-location__save {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-cream, #f5f3ef);
  color: var(--color-foreground);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.repo-location__save {
  background: var(--color-accent-dim, rgba(45, 90, 61, 0.12));
  border-color: var(--color-accent);
}

.repo-location__choose:hover,
.repo-location__save:hover {
  border-color: var(--color-accent-strong);
}

/* Saved in (Files page): disk / cloud root picker */
.repo-saved-in {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.repo-saved-in__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.repo-saved-in__custom {
  margin-top: 10px;
  padding: 8px 2px 0;
}

.repo-saved-in__label {
  display: block;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.repo-saved-in__input {
  width: 100%;
  height: 38px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-background);
  font: inherit;
  font-size: 16px; /* iOS: avoid focus zoom */
  color: var(--color-foreground);
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.repo-saved-in__input:focus {
  outline: none;
  border-color: var(--color-accent-strong);
  box-shadow: 0 0 0 3px var(--color-accent-dim, rgba(45, 90, 61, 0.14));
}

.repo-saved-in__hint,
.repo-saved-in__error {
  margin: 6px 2px 0;
  font-size: 12px;
  color: var(--color-muted);
}

.repo-saved-in__error {
  color: #b42318;
}

.repo-saved-in__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.repo-saved-in__save {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  background: var(--color-accent-dim, rgba(45, 90, 61, 0.12));
  color: var(--color-foreground);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.repo-saved-in__save:hover {
  border-color: var(--color-accent-strong);
}

/* Storage section (legacy / fallback panel) */
.repo-storage {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.repo-storage__heading {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.repo-storage__current {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--color-foreground);
  word-break: break-word;
}

.repo-storage__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.repo-storage__option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-background);
  color: var(--color-foreground);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.repo-storage__option:hover:not(:disabled) {
  border-color: var(--color-accent);
}

.repo-storage__option.is-selected {
  border-color: var(--color-accent-strong);
}

.repo-storage__option.is-disabled,
.repo-storage__option:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.repo-storage__option-label {
  font-weight: 600;
}

.repo-storage__option-hint {
  font-size: 11px;
  color: var(--color-muted);
}

.repo-storage__note,
.repo-storage__error {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-muted);
}

.repo-storage__error {
  color: #9a3412;
}

.repo-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr minmax(220px, 260px);
  overflow: hidden;
}

.repo-layout--write {
  /* Shared structure: technical essays | writing | essays sidebar. */
  --repo-tech-essays-rail: 0px;
  --repo-panel-height: 0px;
  --repo-tabs-height: 40px;
  --repo-essays-rail: 0px;
  /* Sticky labs top bar: 6px + 44px icons + 6px (+ safe-area in padding-top). */
  --repo-top-bar: calc(56px + env(safe-area-inset-top, 0px));
  grid-template-columns:
    var(--repo-tech-essays-rail, 0px)
    minmax(0, 1fr)
    var(--repo-essays-rail, 0px);
  grid-template-rows: minmax(0, 1fr);
  min-height: calc(100vh - var(--repo-top-bar));
  min-height: calc(100dvh - var(--repo-top-bar));
  height: auto;
  overflow: visible;
  align-items: stretch;
  padding-top: var(--repo-top-bar);
  box-sizing: border-box;
}

.repo-layout--write.is-tech-essays-open {
  --repo-tech-essays-rail: minmax(240px, 300px);
}

.repo-layout--write.is-essays-open {
  --repo-essays-rail: minmax(240px, 300px);
}

.repo-layout--write.is-panel-collapsed {
  --repo-panel-height: 0px;
}

/* IDE center column: tabs + pad + bottom panel. */
.repo-ide-center {
  grid-column: 2;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Opaque so pad text cannot show through under the explorer rail. */
  background: var(--color-background);
  position: relative;
  z-index: 1;
}

/* Desktop tab bar: scrolling tabs + reserved Exercises labs slot (same 40px row). */
@media (min-width: 801px) {
  .repo-ide-tabbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    flex: 0 0 auto;
    flex-shrink: 0;
    box-sizing: border-box;
    min-height: var(--repo-tabs-height, 40px);
    height: var(--repo-tabs-height, 40px);
    border-bottom: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-background) 88%, var(--color-accent, #a5b4fc) 12%);
    -webkit-app-region: no-drag;
    app-region: no-drag;
    position: relative;
    z-index: 14;
    overflow: hidden;
  }

  .repo-ide-tabbar .repo-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    min-height: var(--repo-tabs-height, 40px);
    height: var(--repo-tabs-height, 40px);
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 0;
    background: transparent;
    /* Do not stack above the labs slot. */
    position: relative;
    z-index: 0;
    isolation: auto;
    scrollbar-width: thin;
  }

  .repo-ide-tabbar .repo-tabs[hidden] {
    display: flex !important;
    visibility: hidden;
    pointer-events: none;
  }

  /* Beaker moved to the shared top bar; keep the class inert if present. */
  .repo-ide-tabbar__labs {
    display: none !important;
  }

  /* Electron: tab bar sits below the 36px titlebar; clear traffic lights when
     the explorer is collapsed so the first tab is not under the lights. */
  html[data-tinker-desktop] .repo-layout--write.is-explorer-collapsed .repo-ide-tabbar,
  html.tinker-desktop .repo-layout--write.is-explorer-collapsed .repo-ide-tabbar {
    padding-left: var(--tinker-desktop-traffic-inset, 78px);
  }
}

.repo-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  flex: 0 0 auto;
  flex-shrink: 0;
  box-sizing: border-box;
  min-height: var(--repo-tabs-height);
  height: var(--repo-tabs-height);
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-background) 88%, var(--color-accent, #a5b4fc) 12%);
  -webkit-app-region: no-drag;
  position: relative;
  z-index: 1;
  scrollbar-width: thin;
}

.repo-tabs[hidden] {
  display: none !important;
}

/* Electron: shared top bar already clears traffic lights; keep layout box model. */
html[data-tinker-desktop] .repo-layout--write,
html.tinker-desktop .repo-layout--write {
  box-sizing: border-box;
}

html[data-tinker-desktop] .repo-layout--write .repo-explorer,
html.tinker-desktop .repo-layout--write .repo-explorer {
  /* Layout already reserved the titlebar band. */
  padding-top: 12px;
}

/* Essays list sits in the right sidebar (hamburger). */

html[data-tinker-desktop] .repo-explorer__expand,
html.tinker-desktop .repo-explorer__expand {
  top: calc(48px + 36px + env(safe-area-inset-top, 0px));
}

html[data-tinker-desktop] .repo-top--labs,
html.tinker-desktop .repo-top--labs {
  padding-left: calc(10px + var(--tinker-desktop-traffic-inset, 78px));
}


.repo-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  max-width: 240px;
  min-width: 120px;
  min-height: var(--repo-tabs-height, 40px);
  height: var(--repo-tabs-height, 40px);
  box-sizing: border-box;
  padding: 0 8px 0 0;
  border-right: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-muted);
  white-space: nowrap;
}

.repo-tabs__tab:hover {
  color: var(--color-foreground);
  background: color-mix(in srgb, var(--color-accent, #a5b4fc) 18%, transparent);
}

.repo-tabs__tab.is-active {
  color: var(--color-foreground);
  background: var(--color-background);
  box-shadow: inset 0 -2px 0 var(--color-accent-strong, #6366f1);
}

.repo-tabs__label-btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--repo-tabs-height, 40px);
  max-width: 200px;
  min-width: 0;
  flex: 1 1 auto;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  cursor: pointer;
}

.repo-tabs__label-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.repo-tabs__label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.repo-tabs__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 0 2px 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-icon, 8px);
  background: transparent;
  color: var(--color-muted);
  line-height: 1;
  cursor: pointer;
}

.repo-tabs__close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.repo-icon {
  display: block;
  flex: 0 0 auto;
  pointer-events: none;
}

.repo-tabs__close:hover,
.repo-tabs__close:focus-visible {
  color: var(--color-foreground);
  background: color-mix(in srgb, var(--color-accent-strong, #6366f1) 16%, transparent);
}

.repo-explorer {
  grid-column: 1;
  box-sizing: border-box;
  width: var(--repo-explorer-rail, 280px);
  /* Keep steps / titles / file names readable; match expanded-drawer comfort. */
  min-width: 280px;
  max-width: 360px;
  min-height: 0;
  /* Clip chrome; the gated body is the scrollport (see .repo-explorer__gated).
     Non-visible overflow is required for CSS resize to activate. */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 10px 24px;
  border-right: 1px solid var(--color-border);
  background: var(--color-background);
  resize: horizontal;
  /* Above .repo-panel (z-index 12) so writing never paints over the rail. */
  position: relative;
  z-index: 20;
  isolation: isolate;
}

.repo-layout--write.is-explorer-collapsed .repo-explorer {
  display: none;
}

/* Desktop: explorer never overlays the editor - auto track + width push. */
@media (min-width: 801px) {
  .repo-layout--write.is-explorer-open .repo-explorer,
  .repo-layout--write:not(.is-explorer-collapsed) .repo-explorer {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    inset: auto;
  }
}

/* Mobile/phone overlay scrim (Exercises drawer). Hidden on desktop. */
.repo-explorer-scrim {
  display: none;
}

.repo-explorer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  padding: 0 4px;
}

.repo-explorer__head .repo-sidebar__heading {
  margin: 0;
}

.repo-explorer__collapse,
.repo-explorer__expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button, 10px);
  background: var(--color-card, var(--color-surface, var(--color-background)));
  color: var(--color-muted);
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-button);
  -webkit-app-region: no-drag;
}

.repo-explorer__collapse:hover,
.repo-explorer__expand:hover {
  color: var(--color-accent-strong, #6366f1);
  border-color: var(--color-accent, #a5b4fc);
  box-shadow: var(--shadow-button-hover);
}

.repo-explorer__collapse:focus-visible,
.repo-explorer__expand:focus-visible {
  outline: none;
  color: var(--color-accent-strong, #6366f1);
  border-color: var(--color-accent, #a5b4fc);
  box-shadow: var(--focus-ring);
}

.repo-explorer__expand {
  position: fixed;
  top: calc(48px + env(safe-area-inset-top, 0px));
  left: 8px;
  z-index: 35;
}

.repo-explorer__expand[hidden] {
  display: none !important;
}

.repo-explorer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.repo-explorer__group {
  margin: 0 0 12px;
}

.repo-explorer__group-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 4px;
}

.repo-explorer__group-btn {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 32px;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-foreground);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.repo-explorer__group-btn:hover,
.repo-explorer__group-btn:focus-visible {
  background: color-mix(in srgb, var(--color-accent, #a5b4fc) 16%, transparent);
}

.repo-explorer__group-btn.is-selected {
  background: color-mix(in srgb, var(--color-accent, #a5b4fc) 22%, transparent);
  color: var(--color-accent-strong, #4f46e5);
}

.repo-explorer__chevron {
  flex: 0 0 auto;
  width: 12px;
  color: var(--color-muted);
  font-size: 11px;
}

.repo-explorer__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.repo-explorer__remove {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.repo-explorer__remove:hover,
.repo-explorer__remove:focus-visible {
  color: #b42318;
  background: rgba(180, 35, 24, 0.08);
}

.repo-explorer__files {
  list-style: none;
  margin: 0;
  padding: 0 0 0 18px;
}

.repo-explorer__file {
  display: block;
  width: 100%;
  min-height: 30px;
  padding: 4px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.repo-explorer__file:hover,
.repo-explorer__file:focus-visible {
  color: var(--color-foreground);
  background: color-mix(in srgb, var(--color-accent, #a5b4fc) 14%, transparent);
}

.repo-explorer__file.is-selected {
  color: var(--color-accent-strong, #4f46e5);
  background: color-mix(in srgb, var(--color-accent, #a5b4fc) 20%, transparent);
  font-weight: 600;
}

.repo-explorer__section-label {
  margin: 14px 4px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.repo-explorer__tool {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button, 10px);
  background: var(--color-card, var(--color-surface, var(--color-background)));
  color: var(--color-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-button);
}

.repo-explorer__tool:hover {
  color: var(--color-accent-strong, #6366f1);
  border-color: var(--color-accent, #a5b4fc);
  box-shadow: var(--shadow-button-hover);
}

.repo-explorer__tool:focus-visible {
  outline: none;
  color: var(--color-accent-strong, #6366f1);
  border-color: var(--color-accent, #a5b4fc);
  box-shadow: var(--focus-ring);
}

.repo-explorer__hint {
  flex: 0 0 auto;
  margin: 0;
  padding: 4px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--color-muted);
}

.repo-ex-tree {
  margin: 0 0 10px;
}

.repo-ex-tree__empty {
  margin: 0;
  padding: 4px 8px 8px 26px;
  font-size: 12px;
  color: var(--color-muted);
}

.repo-ex-node {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 28px;
}

.repo-ex-node.is-dragging {
  opacity: 0.55;
}

.repo-ex-node.is-drop,
.repo-explorer__group.is-drop {
  outline: 1px dashed var(--color-accent-strong, #6366f1);
  background: color-mix(in srgb, var(--color-accent, #a5b4fc) 14%, transparent);
}

.repo-ex-node__btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 28px;
  padding: 2px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.repo-ex-node__btn--file {
  padding-left: 18px;
}

.repo-ex-node__btn:hover,
.repo-ex-node__btn:focus-visible,
.repo-ex-node__btn.is-selected {
  color: var(--color-accent-strong, #4f46e5);
  background: color-mix(in srgb, var(--color-accent, #a5b4fc) 16%, transparent);
}

.repo-ex-node__icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.repo-ex-node__icon:hover,
.repo-ex-node__icon:focus-visible {
  color: var(--color-foreground);
  background: color-mix(in srgb, var(--color-accent, #a5b4fc) 14%, transparent);
}

.repo-ex-node__icon--danger:hover,
.repo-ex-node__icon--danger:focus-visible {
  color: #b42318;
  background: rgba(180, 35, 24, 0.08);
}

.repo-code {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  padding: 0;
  box-sizing: border-box;
}

.repo-code[hidden] {
  display: none !important;
}

.repo-code__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}

.repo-code__path {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.repo-code__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.repo-code__save,
.repo-code__refactor,
.repo-code__refactor-ask,
.repo-code__refactor-accept,
.repo-code__evaluate-accept {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button, 10px);
  background: var(--color-card, var(--color-background));
  color: var(--color-foreground);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-button);
}

.repo-code__save:hover,
.repo-code__refactor:hover,
.repo-code__refactor-ask:hover,
.repo-code__refactor-accept:hover,
.repo-code__evaluate-accept:hover {
  border-color: var(--color-accent, #a5b4fc);
  box-shadow: var(--shadow-button-hover);
}

.repo-code__save:focus-visible,
.repo-code__refactor:focus-visible,
.repo-code__refactor-ask:focus-visible,
.repo-code__refactor-accept:focus-visible,
.repo-code__evaluate-accept:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* That's everything stays the writing-surface primary action chip on the code bar. */
.repo-code__thats-everything.repo-surface__action {
  min-height: 32px;
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
  box-shadow: var(--shadow-button);
}

.repo-code__thats-everything[hidden],
.repo-code__evaluate-panel[hidden],
.repo-code__evaluate-status[hidden],
.repo-code__evaluate-diff[hidden],
.repo-code__refactor[hidden],
.repo-code__refactor-panel[hidden],
.repo-code__refactor-status[hidden],
.repo-code__refactor-diff[hidden] {
  display: none !important;
}

.repo-code__evaluate-panel {
  flex: 0 0 auto;
  padding: 10px 14px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  background: color-mix(in srgb, var(--color-background) 92%, var(--color-accent, #a5b4fc) 8%);
}

.repo-code__evaluate-feedback {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-ink, #2d2a26);
  white-space: pre-wrap;
}

.repo-code__evaluate-status {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--color-muted);
}

.repo-code__evaluate-diff {
  margin-top: 10px;
}

.repo-code__evaluate-summary,
.repo-code__evaluate-path {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink, #2d2a26);
}

.repo-code__evaluate-path {
  font-weight: 500;
  color: var(--color-muted);
}

.repo-code__evaluate-before,
.repo-code__evaluate-after {
  margin: 0 0 8px;
  padding: 8px 10px;
  max-height: 140px;
  overflow: auto;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.repo-code__evaluate-before {
  background: color-mix(in srgb, #b91c1c 10%, var(--color-background));
  border: 1px solid color-mix(in srgb, #b91c1c 28%, transparent);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, #b91c1c 55%, transparent);
}

.repo-code__evaluate-after {
  background: color-mix(in srgb, #15803d 10%, var(--color-background));
  border: 1px solid color-mix(in srgb, #15803d 28%, transparent);
}

.repo-code__evaluate-decide {
  display: flex;
  gap: 8px;
}

.repo-code__evaluate-reject {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-button, 10px);
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
}

.repo-code__evaluate-reject:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.repo-code__refactor-panel {
  flex: 0 0 auto;
  padding: 10px 14px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  background: color-mix(in srgb, var(--color-background) 92%, var(--color-accent, #a5b4fc) 8%);
}

.repo-code__refactor-label {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
}

.repo-code__refactor-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.repo-code__refactor-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button, 10px);
  background: var(--color-background);
  color: var(--color-foreground, #2d2a26);
  font: inherit;
  font-size: 13px;
  box-shadow: none;
}

.repo-code__refactor-input:focus,
.repo-code__refactor-input:focus-visible {
  outline: none;
  border-color: var(--color-accent-strong, #6366f1);
  box-shadow: var(--focus-ring);
}

.repo-code__refactor-cancel,
.repo-code__refactor-reject {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-button, 10px);
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
}

.repo-code__refactor-cancel:focus-visible,
.repo-code__refactor-reject:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.repo-code__refactor-status {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--color-muted);
}

.repo-code__refactor-diff {
  margin-top: 10px;
}

.repo-code__refactor-summary {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink, #2d2a26);
}

.repo-code__refactor-before,
.repo-code__refactor-after {
  margin: 0 0 8px;
  padding: 8px 10px;
  max-height: 140px;
  overflow: auto;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.repo-code__refactor-before {
  background: color-mix(in srgb, #b91c1c 10%, var(--color-background));
  border: 1px solid color-mix(in srgb, #b91c1c 28%, transparent);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, #b91c1c 55%, transparent);
}

.repo-code__refactor-after {
  background: color-mix(in srgb, #15803d 10%, var(--color-background));
  border: 1px solid color-mix(in srgb, #15803d 28%, transparent);
}

.repo-code__refactor-decide {
  display: flex;
  gap: 8px;
}

/* Desktop lesson-step preview: rendered markdown, read-only, no line numbers. */
.repo-code__preview {
  flex: 1 1 auto;
  min-height: 0;
  max-width: 100%;
  margin: 0;
  padding: 20px 28px 32px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  user-select: text;
  -webkit-user-select: text;
}

.repo-code__preview[hidden] {
  display: none !important;
}

.repo-code__preview.is-markdown {
  white-space: normal;
  overflow-wrap: anywhere;
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-foreground, #1a1a1a);
}

.repo-code__preview.is-markdown > :first-child { margin-top: 0; }
.repo-code__preview.is-markdown h1,
.repo-code__preview.is-markdown h2,
.repo-code__preview.is-markdown h3,
.repo-code__preview.is-markdown h4 {
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 1.25em 0 0.5em;
}
.repo-code__preview.is-markdown h1 { font-size: 1.7em; }
.repo-code__preview.is-markdown h2 { font-size: 1.35em; }
.repo-code__preview.is-markdown h3 { font-size: 1.15em; }
.repo-code__preview.is-markdown p { margin: 0 0 1em; }
.repo-code__preview.is-markdown ul,
.repo-code__preview.is-markdown ol {
  margin: 0 0 1em;
  padding-left: 1.35em;
}
.repo-code__preview.is-markdown li { margin: 0.25em 0; }
.repo-code__preview.is-markdown blockquote {
  margin: 0.75em 0 1em;
  padding: 0.15em 0 0.15em 1em;
  border-left: 3px solid var(--color-border, rgba(45, 90, 61, 0.28));
  color: color-mix(in srgb, var(--color-foreground) 82%, var(--color-muted, #6b6b6b));
}
.repo-code__preview.is-markdown code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-accent-dim, rgba(45, 90, 61, 0.1)) 55%, transparent);
}
.repo-code__preview.is-markdown pre {
  margin: 0 0 1em;
  padding: 12px 14px;
  overflow: auto;
  border-radius: 10px;
  white-space: pre;
  background: color-mix(in srgb, var(--color-accent-dim, rgba(45, 90, 61, 0.1)) 70%, transparent);
}
.repo-code__preview.is-markdown pre code {
  padding: 0;
  background: transparent;
}
.repo-code__preview.is-markdown a {
  color: var(--color-accent-strong, #2d5a3d);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.repo-code__preview.is-markdown strong { font-weight: 700; }
.repo-code__preview.is-markdown em { font-style: italic; }

/* Full-column CodeMirror surface - no bordered textarea chrome. */
.repo-code__surface {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

.repo-code__surface[hidden] {
  display: none !important;
}

.repo-code__surface .cm-editor {
  height: 100%;
  max-height: 100%;
  background: transparent;
  outline: none;
  border: 0;
  box-shadow: none;
}

.repo-code__surface .cm-editor.cm-focused {
  outline: none;
}

.repo-code__editor[hidden] {
  display: none !important;
}

/* Code editor fills the top pane; essay writing stays in the bottom panel. */
body.repo-code-open #repo-editor-main,
.repo-layout--write.is-code-open #repo-editor-main {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow: hidden;
}

body.repo-code-open .repo-code-host,
.repo-layout--write.is-code-open .repo-code-host {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.repo-code-open .repo-editor-empty,
.repo-layout--write.is-code-open .repo-editor-empty {
  display: none !important;
}

/* Fade overlay must not cover tabs or the code editor. */
body.repo-code-open #repo-editor-main.repo-write-safe-top::before,
.repo-layout--write.is-code-open #repo-editor-main.repo-write-safe-top::before {
  display: none !important;
}

/* When the open-file strip is showing (essay or code tabs), keep the fixed
   write-safe fade below it so labels / close are never masked. */
body.repo-page--write:has(.repo-tabs:not([hidden])) .repo-center.repo-write-safe-top::before {
  top: var(--repo-tabs-height, 40px);
}

html[data-tinker-desktop] body.repo-page--write:has(.repo-tabs:not([hidden])) .repo-center.repo-write-safe-top::before,
html.tinker-desktop body.repo-page--write:has(.repo-tabs:not([hidden])) .repo-center.repo-write-safe-top::before {
  /* Layout padding-top (36px) + tab strip height. */
  top: calc(36px + var(--repo-tabs-height, 40px));
}

@media (min-width: 801px) {
  .repo-layout--write.is-code-open .repo-ide-center {
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .repo-layout--write.is-code-open .repo-ide-center > #repo-editor-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
}

.repo-code__status {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--color-muted);
}

/* Desktop write page: explorer + essays rails fill the IDE shell.
   Tree scrolls on its own; Essay preview stays below the list (never overlaps). */
@media (min-width: 801px) {
  html:has(body.repo-page--write),
  body.repo-page--write {
    height: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
  }

  .repo-layout--write {
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    align-items: stretch;
  }

  .repo-layout--write .repo-explorer {
    height: 100%;
    max-height: 100%;
  }

  .repo-layout--write .repo-ide-center {
    height: 100%;
    max-height: 100%;
  }

  .repo-layout--write .repo-ide-center > #repo-editor-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
}

/* Panel head structure shared by desktop panel + mobile essays sheet. */
.repo-panel__head-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.repo-panel__head-row--title {
  flex: 0 1 auto;
  justify-content: flex-start;
}

.repo-panel__close {
  display: none;
}

/* ===== Writing pane (center) + right essays sidebar ===== */
.repo-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  /* Keep the wash inside the center column only (never over the explorer). */
  background:
    radial-gradient(circle at 18% 8%, rgba(123, 196, 122, 0.08), transparent 38%),
    radial-gradient(circle at 88% 4%, rgba(165, 180, 252, 0.10), transparent 38%),
    var(--color-background);
  overflow: hidden;
  position: relative;
  /* Below .repo-explorer (20) and .repo-essays-sidebar (30). */
  z-index: 1;
  border: 0;
}

.repo-panel__resize,
.repo-panel__collapse,
.repo-panel__expand {
  display: none !important;
}

.repo-panel__body--write {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.repo-panel__write {
  --repo-panel-foot-clearance: 64px;
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.repo-panel__write .repo-surface.writing {
  /* Beat global .writing absolute inset from styles.css so the essay pad
     stays in the center grid column and cannot cover the rail. */
  position: relative;
  inset: auto;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px 20px var(--repo-panel-foot-clearance);
}

.repo-panel__write .repo-location {
  position: relative;
  top: auto;
}

.repo-panel__write .repo-pad {
  flex: 0 0 auto;
  min-height: 0;
  height: auto;
  padding-bottom: 0;
}

.repo-panel__write .repo-pad__turn:last-of-type {
  flex: 0 0 auto;
  min-height: 6rem;
}

.repo-panel__write .repo-pad__q {
  position: static;
  flex: 0 0 auto;
  scroll-margin-top: 8px;
  scroll-margin-bottom: var(--repo-panel-foot-clearance);
}

/* Keep the island on the shared fixed dock with the FAB on every viewport
 * (desktop Electron + iPhone PWA). Absolute left/right/bottom:0 pinned the
 * pill to the panel's bottom-LEFT and sat on the home indicator (#545 regression). */
.repo-panel__write > .repo-surface__foot {
  position: fixed;
  left: auto;
  right: var(--repo-compose-dock-right, calc(16px + var(--repo-safe-right, env(safe-area-inset-right, 0px))));
  bottom: var(--repo-compose-dock-bottom, calc(20px + var(--repo-safe-bottom, env(safe-area-inset-bottom, 0px))));
  top: auto;
  margin: 0;
  align-self: auto;
  z-index: 41;
  transform: none;
}

/* Right essays sidebar (hamburger). Closed by default. */
.repo-essays-sidebar,
.repo-right.repo-essays-sidebar {
  grid-column: 3;
  display: none;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-left: 1px solid var(--color-border);
  background: var(--color-background);
  padding: 0;
  position: relative;
  z-index: 30;
}

.repo-layout--write.is-essays-open .repo-essays-sidebar,
.repo-layout--write.is-essays-open .repo-right.repo-essays-sidebar,
body.repo-page--write[data-repo-essays-list="1"] .repo-essays-sidebar,
body.repo-page--write[data-repo-essays-list="1"] .repo-right.repo-essays-sidebar {
  display: flex;
}

.repo-essays-sidebar .repo-panel__head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  flex: 0 0 auto;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-background) 90%, var(--color-accent, #a5b4fc) 10%);
  -webkit-app-region: no-drag;
}

.repo-essays-sidebar .repo-panel__title {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-foreground);
}

.repo-essays-sidebar .repo-panel__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: 0;
}

.repo-essays-sidebar .repo-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-button, 10px);
  background: transparent;
  color: var(--color-muted);
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

.repo-essays-sidebar .repo-panel__close:hover {
  color: var(--color-foreground);
  background: color-mix(in srgb, var(--color-accent, #a5b4fc) 14%, transparent);
}

.repo-essays-sidebar .repo-panel__close:focus-visible {
  outline: none;
  color: var(--color-foreground);
  background: color-mix(in srgb, var(--color-accent, #a5b4fc) 14%, transparent);
  box-shadow: var(--focus-ring);
}

.repo-essays-sidebar .repo-tree {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 10px 12px 0;
}

.repo-essays-sidebar .repo-tree__head--mobile {
  display: none;
}

.repo-essays-sidebar .repo-tree__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.repo-essays-sidebar .repo-changes {
  flex: 0 0 auto;
  padding: 8px 12px 12px;
  border-top: 1px solid var(--color-border);
}

/* Left Technical essays sidebar (tinker mark). Closed by default. */
.repo-tech-essays-sidebar,
.repo-left.repo-tech-essays-sidebar {
  grid-column: 1;
  display: none;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid var(--color-border);
  background: var(--color-background);
  padding: 0;
  position: relative;
  z-index: 30;
}

.repo-layout--write.is-tech-essays-open .repo-tech-essays-sidebar,
.repo-layout--write.is-tech-essays-open .repo-left.repo-tech-essays-sidebar,
body.repo-page--write[data-repo-tech-essays-list="1"] .repo-tech-essays-sidebar,
body.repo-page--write[data-repo-tech-essays-list="1"] .repo-left.repo-tech-essays-sidebar {
  display: flex;
}

.repo-tech-essays-sidebar .repo-panel__head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  flex: 0 0 auto;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-background) 90%, var(--color-accent, #a5b4fc) 10%);
  -webkit-app-region: no-drag;
}

.repo-tech-essays-sidebar .repo-panel__title {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-foreground);
}

.repo-tech-essays-sidebar .repo-tree {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 10px 12px 0;
}

.repo-tech-essays-sidebar .repo-tree__head--mobile {
  display: none;
}

.repo-tech-essays-sidebar .repo-tree__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.repo-tech-essays-sidebar .repo-changes {
  flex: 0 0 auto;
  padding: 8px 12px 12px;
  border-top: 1px solid var(--color-border);
}

/* Learning sign-in gate inside the exercises explorer. */
.repo-explorer-signin {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 14px;
}

.repo-explorer-signin[hidden] {
  display: none !important;
}

.repo-explorer-signin__copy {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-muted);
}

.repo-explorer-signin__btn {
  appearance: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button, 10px);
  background: var(--color-accent-press, #4f46e5);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: var(--shadow-button);
}

.repo-explorer-signin__btn:hover {
  background: var(--color-accent-strong, #6366f1);
  box-shadow: var(--shadow-button-hover);
}

.repo-explorer-signin__btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Flex child between explorer chrome and the file tree. Without min-height:0
   the tree grows past the viewport and .repo-explorer (overflow:hidden) clips
   it with no scrollport. */
.repo-explorer__gated {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.repo-explorer__gated[hidden] {
  display: none !important;
}

.repo-explorer__gated > .repo-changes__empty {
  flex: 0 0 auto;
}

/* Attached exercise context chip in the essay terminal. */
.repo-exercise-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 4px 8px 4px 10px;
  max-width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-background) 90%, var(--color-accent, #a5b4fc) 10%);
  color: var(--color-foreground);
  font-size: 12px;
  line-height: 1.2;
}

.repo-exercise-chip[hidden] {
  display: none !important;
}

.repo-exercise-chip.is-pending {
  border-color: var(--color-accent, #a5b4fc);
}

.repo-exercise-chip.is-error {
  border-color: var(--color-danger, #b91c1c);
}

.repo-exercise-chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.repo-exercise-chip__spinner,
.repo-ex-transform-spinner {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border: 1.5px solid color-mix(in srgb, var(--color-muted) 55%, transparent);
  border-top-color: var(--color-accent-strong, #4f46e5);
  border-radius: 50%;
  animation: tinker-spin 0.8s linear infinite;
}

.repo-exercise-chip__spinner[hidden] {
  display: none !important;
}

.repo-exercise-chip__retry,
.repo-ex-transform-retry {
  margin: 0;
  padding: 2px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button, 10px);
  background: var(--color-card, var(--color-surface, var(--color-background)));
  color: var(--color-foreground);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-button);
}

.repo-exercise-chip__retry:hover,
.repo-ex-transform-retry:hover {
  border-color: var(--color-accent-strong, #6366f1);
  color: var(--color-accent-strong, #6366f1);
}

.repo-exercise-chip__retry:focus-visible,
.repo-ex-transform-retry:focus-visible {
  outline: none;
  border-color: var(--color-accent-strong, #6366f1);
  color: var(--color-accent-strong, #6366f1);
  box-shadow: var(--focus-ring);
}

.repo-exercise-chip__retry[hidden] {
  display: none !important;
}

.repo-exercise-chip__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-icon, 8px);
  background: transparent;
  color: var(--color-muted);
  line-height: 1;
  cursor: pointer;
}

.repo-exercise-chip__clear:hover {
  color: var(--color-foreground);
}

.repo-exercise-chip__clear:focus-visible {
  outline: none;
  color: var(--color-foreground);
  box-shadow: var(--focus-ring);
}

.repo-explorer__group.is-transforming .repo-explorer__name,
.repo-explorer__group.is-transform-error .repo-explorer__name {
  font-weight: 650;
}

.repo-ex-write-about {
  display: block;
  width: calc(100% - 16px);
  margin: 6px 8px 10px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button, 10px);
  background: var(--color-card, var(--color-surface, var(--color-background)));
  color: var(--color-foreground);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-button);
}

.repo-ex-write-about:hover {
  border-color: var(--color-accent, #a5b4fc);
  color: var(--color-accent-strong, #6366f1);
  box-shadow: var(--shadow-button-hover);
}

.repo-ex-write-about:focus-visible {
  outline: none;
  border-color: var(--color-accent, #a5b4fc);
  color: var(--color-accent-strong, #6366f1);
  box-shadow: var(--focus-ring);
}

.repo-ex-steps {
  margin: 0 8px 10px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card, 12px);
  background: color-mix(in srgb, var(--color-background) 92%, var(--color-accent, #a5b4fc) 8%);
  box-shadow: none;
}

.repo-ex-steps.is-updated {
  border-color: var(--color-accent-strong, #4f46e5);
  box-shadow: inset 3px 0 0 var(--color-accent-strong, #4f46e5);
}

.repo-ex-steps__label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.repo-ex-steps.is-updated .repo-ex-steps__label {
  color: var(--color-accent-strong, #4f46e5);
}

.repo-ex-steps__list {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-foreground);
}

.repo-ex-steps__list li {
  margin: 0 0 4px;
}

.repo-ex-steps-banner {
  margin: 0 12px 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--color-accent, #a5b4fc);
  background: color-mix(in srgb, var(--color-accent, #a5b4fc) 16%, transparent);
  color: var(--color-foreground);
  font-size: 12px;
  line-height: 1.4;
}

.repo-ex-steps-banner[hidden] {
  display: none !important;
}

/* Learning module card - ordered steps, not a file/folder tree. */
.repo-ex-module {
  margin: 0 0 10px;
  padding: 0 0 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}

.repo-ex-module__head {
  margin: 0;
}

.repo-ex-module__btn {
  font-weight: 650;
}

.repo-ex-module__title {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.repo-ex-module__progress {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 8px 8px;
  padding: 0;
}

.repo-ex-module__empty {
  margin: 8px 12px;
  font-size: 12px;
  color: var(--color-muted);
}

.repo-ex-step {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.repo-ex-step__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 7px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-foreground);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.repo-ex-step__btn:hover,
.repo-ex-step__btn:focus-visible {
  background: color-mix(in srgb, var(--color-accent, #a5b4fc) 12%, transparent);
}

.repo-ex-step__btn.is-selected,
.repo-ex-step.is-current .repo-ex-step__btn {
  background: color-mix(in srgb, var(--color-accent, #a5b4fc) 18%, transparent);
  color: var(--color-accent-strong, #4f46e5);
  font-weight: 600;
}

.repo-ex-step.is-done .repo-ex-step__btn {
  color: var(--color-muted);
}

.repo-ex-step.is-next .repo-ex-step__btn {
  color: color-mix(in srgb, var(--color-foreground) 72%, var(--color-muted));
}

.repo-ex-step__mark {
  flex: 0 0 auto;
  min-width: 1.5rem;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 650;
  color: var(--color-muted);
}

.repo-ex-step.is-done .repo-ex-step__mark {
  color: var(--color-accent-strong, #4f46e5);
}

.repo-ex-step.is-current .repo-ex-step__mark {
  color: var(--color-accent-strong, #4f46e5);
}

.repo-ex-step__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.repo-ex-step__state {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.repo-ex-step.is-current .repo-ex-step__state {
  color: var(--color-accent-strong, #4f46e5);
}

.repo-ex-step__answer {
  margin: 0 0 4px 28px;
}

.repo-ex-step__answer-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 6px 8px;
  border: 1px dashed color-mix(in srgb, var(--color-border) 80%, var(--color-accent, #a5b4fc));
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-background) 94%, var(--color-accent, #a5b4fc) 6%);
  color: var(--color-foreground);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.repo-ex-step__answer-btn:hover,
.repo-ex-step__answer-btn:focus-visible,
.repo-ex-step__answer-btn.is-selected {
  border-style: solid;
  border-color: var(--color-accent, #a5b4fc);
  color: var(--color-accent-strong, #4f46e5);
}

.repo-ex-module-placeholder {
  margin: 8px 10px 12px;
  padding: 12px 12px;
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-background) 96%, var(--color-muted) 4%);
  color: var(--color-muted);
}

.repo-ex-module-placeholder__title {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 650;
  color: color-mix(in srgb, var(--color-foreground) 55%, var(--color-muted));
}

.repo-ex-module-placeholder__copy {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
}

@media (min-width: 801px) {
  .repo-code-host {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background:
      radial-gradient(circle at 18% 8%, rgba(123, 196, 122, 0.08), transparent 38%),
      radial-gradient(circle at 88% 4%, rgba(165, 180, 252, 0.10), transparent 38%),
      var(--color-background);
  }

  .repo-layout--write:not(.is-code-open) .repo-code-host,
  .repo-layout--write:not(.is-code-open) #repo-editor-main {
    display: none;
  }

  .repo-layout--write.is-code-open .repo-panel--write {
    flex: 0 0 42%;
    max-height: 48%;
    border-top: 1px solid var(--color-border);
  }

  .repo-editor-empty {
    margin: auto;
    padding: 24px;
    max-width: 28rem;
    text-align: center;
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.5;
  }

  #repo-editor-main {
    display: flex;
    flex-direction: column;
  }

  #repo-editor-main .repo-code {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
  }
}

.repo-layout--files {
  grid-template-columns: 1fr;
}

.repo-layout--files .repo-sidebar {
  border-right: 0;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

.repo-sidebar,
.repo-right {
  min-height: 0;
  overflow: auto;
  background: var(--color-background);
  padding: 16px 14px 24px;
}

.repo-sidebar {
  border-right: 1px solid var(--color-border);
}

.repo-right {
  border-left: 1px solid var(--color-border);
}

.repo-center {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 18% 8%, rgba(123, 196, 122, 0.08), transparent 38%),
    radial-gradient(circle at 88% 4%, rgba(165, 180, 252, 0.10), transparent 38%),
    var(--color-background);
}

/* Soft top fade on the writing column. Fixed (not sticky): .repo-center uses
   overflow:hidden, which would clip sticky descendants. Covers the titlebar /
   traffic-light band so earlier text dissolves instead of hard-slicing. */
body.repo-page--write .repo-center.repo-write-safe-top,
body.repo-page--write .repo-surface.repo-write-safe-top {
  position: relative;
  overflow: visible;
}

body.repo-page--write .repo-center.repo-write-safe-top::before,
body.repo-page--write .repo-surface.repo-write-safe-top::before {
  content: "";
  position: fixed;
  /* Start under the fixed labs header so the dissolve never covers
   * the Technical essays mark (header paints above at z-index 50). */
  top: calc(52px + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  /* Prefer % over 100vw so a scrollbar gutter cannot widen the page and
   * clip the fixed top bar past the left edge. */
  width: auto;
  max-width: none;
  height: var(--repo-write-fade, 48px);
  /* Below .repo-location (z-index 12) and well below .repo-top--labs (50). */
  z-index: 8;
  pointer-events: none;
  /* Same wash as html/body (fixed so radials align). Mask soft-dissolves
     scrolled text; flat cream no longer seams nav and the location pill. */
  background:
    radial-gradient(circle at 18% 8%, rgba(123, 196, 122, 0.08), transparent 38%),
    radial-gradient(circle at 88% 4%, rgba(165, 180, 252, 0.10), transparent 38%),
    var(--color-background);
  background-attachment: fixed;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 72%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 72%,
    transparent 100%
  );
}

body.repo-page--write .repo-center {
  min-height: calc(100dvh - 72px);
  height: auto;
  overflow: visible;
  /* Same wash as the page - no seam where a short tinted box used to end. */
  background: transparent;
}

.repo-sidebar__heading {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.repo-reflections {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}

.repo-reflections__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.repo-reflections__item,
.repo-tree__piece,
.repo-history__item,
.repo-changes__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-foreground);
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
}

/* Essay rows: title + muted preview; soft card separation (not a dense stack). */
.repo-tree__pieces > li {
  margin: 0;
  padding: 0;
}

.repo-tree__pieces > li + li {
  margin-top: 8px;
}

.repo-tree__piece-row {
  display: flex;
  align-items: stretch;
  gap: 2px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border-bottom: 0;
}

.repo-tree__piece-row .repo-tree__piece {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding: 14px 14px;
  border-radius: 12px;
  overflow: hidden;
  white-space: normal;
  background: color-mix(in srgb, var(--color-foreground) 3.5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border) 92%, var(--color-foreground) 8%);
}

.repo-tree__piece-title {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 560;
  letter-spacing: -0.015em;
  line-height: 1.35;
}

.repo-tree__piece-sub {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--color-muted);
}

.repo-reflections__item:hover,
.repo-history__item:hover {
  background: rgba(45, 90, 61, 0.05);
}

.repo-tree__piece:hover {
  background: color-mix(in srgb, var(--color-foreground) 5.5%, transparent);
}

.repo-reflections__item.is-selected,
.repo-history__item.is-selected {
  background: var(--color-accent-dim);
  color: var(--color-accent-strong);
}

/* Selected essay row: intentional tint + edge, not a flat blue slab. */
.repo-tree__piece.is-selected {
  background: color-mix(in srgb, var(--color-accent, #a5b4fc) 16%, var(--color-background));
  color: var(--color-accent-strong);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-accent-strong) 28%, transparent);
}

.repo-tree__piece.is-selected .repo-tree__piece-sub {
  color: color-mix(in srgb, var(--color-accent-strong) 55%, var(--color-muted));
}

.repo-tree__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  min-width: 0;
  flex-wrap: nowrap;
}

.repo-tree__head .repo-sidebar__heading {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.repo-tree__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.repo-tree__new {
  flex-shrink: 0;
  min-height: 44px;
  height: auto;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-foreground);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.repo-tree__new:hover,
.repo-tree__new:focus-visible {
  border-color: var(--color-accent);
}

.repo-tree__folder {
  margin: 0 0 4px;
}

.repo-tree__folder-row {
  display: flex;
  align-items: stretch;
  gap: 2px;
  min-height: 44px;
}

.repo-tree__folder-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  min-height: 44px;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-foreground);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.repo-tree__folder-btn:hover,
.repo-tree__folder-btn:focus-visible {
  background: rgba(45, 90, 61, 0.04);
}

.repo-tree__folder-btn.is-selected {
  background: var(--color-accent-dim);
  color: var(--color-accent-strong);
}

.repo-tree__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 12px;
  color: var(--color-muted);
  flex-shrink: 0;
  cursor: pointer;
}

.repo-tree__chevron:hover,
.repo-tree__chevron:focus-visible {
  background: rgba(45, 90, 61, 0.08);
  color: var(--color-foreground);
}

.repo-tree__folder-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.repo-tree__type {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding: 2px 6px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.repo-tree__icon-btn {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.repo-tree__icon-btn:hover,
.repo-tree__icon-btn:focus-visible {
  background: rgba(45, 90, 61, 0.06);
  color: var(--color-foreground);
}

.repo-tree__more {
  position: relative;
  flex-shrink: 0;
}

.repo-tree__more-btn {
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.repo-tree__more-btn[aria-expanded="true"] {
  background: rgba(45, 90, 61, 0.08);
  color: var(--color-foreground);
}

.repo-tree__more-pop {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  z-index: 30;
  list-style: none;
  margin: 0;
  padding: 6px;
  min-width: 148px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  box-shadow: 0 10px 24px rgba(28, 25, 23, 0.10);
}

.repo-tree__more-pop[hidden] {
  display: none;
}

.repo-tree__more-item {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-foreground);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.repo-tree__more-item:hover,
.repo-tree__more-item:focus-visible {
  background: rgba(45, 90, 61, 0.06);
  outline: none;
}

.repo-tree__more-item--danger {
  color: #b42318;
}

.repo-tree__more-item--danger:hover,
.repo-tree__more-item--danger:focus-visible {
  background: rgba(180, 35, 24, 0.08);
}

.repo-tree__pieces {
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
}

.repo-tree__folder[data-open="false"] > .repo-tree__pieces {
  display: none;
}

.repo-tree__piece-row .repo-tree__icon-btn {
  flex: 0 0 auto;
}

.repo-reflections__item,
.repo-history__item,
.repo-changes__item {
  min-height: 44px;
  padding: 10px 10px;
}

.repo-tree__piece {
  min-height: 44px;
}

.repo-tree__inline {
  margin: 4px 0 8px;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
}

.repo-tree__inline-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.repo-tree__inline-input,
.repo-tree__inline-select {
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-background);
  font: inherit;
  font-size: 14px;
  color: var(--color-foreground);
}

.repo-tree__inline-input:focus,
.repo-tree__inline-select:focus {
  outline: none;
  border-color: var(--color-accent-strong);
}

.repo-tree__inline-error {
  margin: 0;
  font-size: 12px;
  color: #b42318;
}

.repo-tree__inline-error[hidden] {
  display: none;
}

.repo-file__type {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--color-muted);
}

.repo-sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.repo-sheet[hidden] {
  display: none;
}

.repo-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 25, 23, 0.35);
}

.repo-sheet__panel {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  max-height: min(80vh, 640px);
  overflow: auto;
  padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border-radius: 16px 16px 0 0;
  background: var(--color-surface);
  box-shadow: 0 -8px 28px rgba(28, 25, 23, 0.12);
}

.repo-sheet__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 650;
}

.repo-sheet__hint {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--color-muted);
}

.repo-sheet__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.repo-sheet__option,
.repo-sheet__cancel,
.repo-sheet__primary,
.repo-sheet__danger {
  min-height: 44px;
  width: 100%;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-background);
  color: var(--color-foreground);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.repo-sheet__option.is-current {
  border-color: var(--color-accent);
  background: var(--color-accent-dim);
}

.repo-sheet__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.repo-sheet__primary {
  background: var(--color-accent-dim, rgba(45, 90, 61, 0.12));
  border-color: var(--color-accent);
  text-align: center;
}

.repo-sheet__danger {
  color: #b42318;
  text-align: center;
}

.repo-sheet__cancel {
  text-align: center;
  color: var(--color-muted);
}

@media (min-width: 801px) {
  /* Desktop: give the centered location picker breathing room under the top edge. */
  .repo-location {
    top: calc(56px + env(safe-area-inset-top, 0px));
    margin-top: 44px;
  }

  .repo-sheet {
    align-items: center;
  }

  .repo-sheet__panel {
    border-radius: 16px;
    max-height: min(70vh, 560px);
  }

  .repo-tree__new {
    min-height: 32px;
    height: 32px;
  }

  .repo-tree__folder-row,
  .repo-tree__piece-row,
  .repo-tree__folder-btn,
  .repo-tree__icon-btn,
  .repo-reflections__item,
  .repo-tree__piece {
    min-height: 36px;
  }

  .repo-tree__icon-btn {
    min-width: 36px;
  }

  .repo-tree__more-item {
    min-height: 36px;
  }
}

.repo-surface.writing {
  /* Override global .writing absolute inset from styles.css. */
  position: relative;
  inset: auto;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: 100%;
  max-width: 100%;
  flex: 1;
  min-width: 0;
  min-height: calc(100vh - 56px);
  min-height: calc(100dvh - 56px);
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: visible;
  background: transparent;
  /* No auth header - clear the notch / status bar; location sits in this pad. */
  padding: calc(12px + env(safe-area-inset-top, 0px)) 24px 96px;
  /* Room for fixed action island + New essay FAB (~56px) so text never sits under them. */
  padding-bottom: calc(
    var(--repo-foot-floor, max(48px, 8vh)) + 72px + 64px + env(safe-area-inset-bottom, 0px)
  );
}

.repo-surface.writing .repo-pad {
  padding-bottom: calc(var(--repo-foot-floor, max(48px, 8vh)) + 56px);
}

/* Quiet growth-edge label above the read view (starting screen). */
.repo-growth-edge {
  margin: 0 auto 10px;
  padding: 0 4px;
  max-width: 720px;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body, "Instrument Sans", sans-serif);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--color-ink-muted, rgba(42, 36, 28, 0.48));
  text-align: left;
}

.repo-growth-edge[hidden] {
  display: none !important;
}

/* Saved-essay read view (rendered Markdown). Pad stays for new writing. */
.repo-essay-view {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 4px 48px;
  box-sizing: border-box;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.repo-essay-view[hidden] {
  display: none !important;
}

.repo-surface--reading .repo-pad,
.repo-surface--reading .repo-pad__mirror {
  display: none !important;
}

.repo-surface--reading .repo-surface__foot,
.repo-panel__write:has(.repo-surface--reading) > .repo-surface__foot {
  display: none !important;
}

.essay-read {
  width: 100%;
}

.essay-read__toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
}

.essay-read__questions-toggle {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--color-border, rgba(45, 90, 61, 0.22));
  background: color-mix(in srgb, var(--color-background, #fffdf7) 88%, var(--color-accent-dim, rgba(45, 90, 61, 0.12)));
  color: var(--color-foreground, #1a1a1a);
  font-family: var(--font-sans, "Instrument Sans", sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.essay-read__questions-toggle:hover {
  border-color: color-mix(in srgb, var(--color-accent-strong, #2d5a3d) 40%, var(--color-border));
}

.essay-read__questions-toggle[aria-pressed="true"] {
  background: color-mix(in srgb, var(--color-accent-dim, rgba(45, 90, 61, 0.18)) 80%, var(--color-background, #fffdf7));
  border-color: var(--color-accent-strong, #2d5a3d);
}

.essay-read__body {
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-size: 18px;
  line-height: 1.75;
  color: var(--color-foreground, #1a1a1a);
}

.essay-read__prose > :first-child {
  margin-top: 0;
}

.essay-read__prose h1,
.essay-read__prose h2,
.essay-read__prose h3,
.essay-read__prose h4 {
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 1.25em 0 0.5em;
  color: var(--color-foreground, #1a1a1a);
}

.essay-read__prose h1 { font-size: 1.85em; }
.essay-read__prose h2 { font-size: 1.45em; }
.essay-read__prose h3 { font-size: 1.2em; }

.essay-read__prose p {
  margin: 0 0 1em;
}

.essay-read__prose ul,
.essay-read__prose ol {
  margin: 0 0 1em;
  padding-left: 1.35em;
}

.essay-read__prose li {
  margin: 0.25em 0;
}

.essay-read__prose blockquote {
  margin: 0.75em 0 1em;
  padding: 0.15em 0 0.15em 1em;
  border-left: 3px solid var(--color-border, rgba(45, 90, 61, 0.28));
  color: color-mix(in srgb, var(--color-foreground) 82%, var(--color-muted, #6b6b6b));
}

.essay-read__prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-accent-dim, rgba(45, 90, 61, 0.1)) 55%, transparent);
}

.essay-read__prose pre {
  margin: 0 0 1em;
  padding: 12px 14px;
  overflow: auto;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-accent-dim, rgba(45, 90, 61, 0.1)) 70%, transparent);
}

.essay-read__prose pre code {
  padding: 0;
  background: transparent;
}

.essay-read__prose a {
  color: var(--color-accent-strong, #2d5a3d);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.essay-read__prose strong {
  font-weight: 700;
}

.essay-read__prose em {
  font-style: italic;
}

.essay-read__q-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.essay-read__q-list li {
  margin: 0 0 8px;
  padding: 10px 14px 10px 16px;
  border-left: 3px solid var(--color-accent-strong, #2d5a3d);
  border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--color-accent-dim, rgba(45, 90, 61, 0.12)) 70%, transparent);
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.essay-read .repo-pad__q {
  margin: 14px 0 10px;
}

/* Legacy follow-up slot kept hidden; questions insert into the pad. */
.repo-followup[hidden] {
  display: none !important;
}

.repo-pad-error {
  position: fixed;
  left: 50%;
  /* Above the fixed action island (z-index 30). */
  z-index: 40;
  transform: translateX(-50%);
  bottom: calc(
    var(--repo-foot-floor, max(48px, 8vh)) + 60px + env(safe-area-inset-bottom, 0px)
  );
  top: auto;
}

.repo-pad-error.repo-pad-error--ok {
  border-color: color-mix(in srgb, var(--color-accent, #4f46e5) 45%, var(--color-border));
  background: color-mix(in srgb, var(--color-background) 92%, var(--color-accent, #4f46e5));
}

@supports (height: 100dvh) {
  .repo-pad-error {
    bottom: auto;
    top: calc(
      100dvh - var(--repo-foot-floor, max(48px, 8dvh)) - 60px - env(safe-area-inset-bottom, 0px)
    );
    transform: translate(-50%, -100%);
  }
}

@supports (height: 100svh) {
  .repo-pad-error {
    top: calc(
      100svh - var(--repo-foot-floor, max(48px, 8svh)) - 60px - env(safe-area-inset-bottom, 0px)
    );
  }
}

.repo-pad-error {
  /* continue shared pad-error styles below */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(360px, calc(100% - 24px));
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card, 12px);
  background: var(--color-card, #fff9f0);
  /* House rule: no shadow on panels - hairline border only. */
  box-shadow: none;
  pointer-events: auto;
}

.repo-pad-error[hidden] {
  display: none !important;
}

.repo-pad-error__text {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var(--color-foreground);
}

.repo-pad-error__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.repo-pad-error__retry,
.repo-pad-error__signin {
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-button, 10px);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.repo-pad-error__retry {
  border: 1px solid var(--color-border);
  background: var(--color-card, var(--color-background));
  color: var(--color-foreground);
  box-shadow: var(--shadow-button);
}

.repo-pad-error__retry:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.repo-pad-error__signin {
  border: 0;
  background: var(--color-accent-press, #4f46e5);
  color: #fff;
  box-shadow: var(--shadow-button);
}

.repo-pad-error__signin:hover {
  background: var(--color-accent-strong, #6366f1);
}

.repo-pad-error__signin:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Keep crafting / This is everything.
   Desktop (≥768px): fixed to the visual viewport with a real floor -
   bottom of the pill sits at least max(48px, 8vh) above the window
   bottom (works in browser and Electron; uses dvh when available).
   Horizontally: anchored to the editor column - right edge clears the
   essays rail by --repo-foot-gutter (same as #456 sticky + pad padding),
   never overlapping .repo-right. When the rail is hidden (≤800px),
   --repo-essays-rail collapses to 0.
   Phone (≤767px): fixed above the home indicator / keyboard (#453). */
:root {
  --repo-foot-floor: max(48px, 8vh);
  --repo-foot-floor: max(48px, 8dvh);
  /* No right essays rail on desktop - essays live in the bottom panel. */
  --repo-essays-rail: 0px;
  --repo-explorer-rail: 280px;
  --repo-foot-gutter: 24px;
  --repo-panel-height: 35vh;
  --repo-panel-height: 35dvh;
}

.repo-surface__foot {
  position: fixed;
  align-self: auto;
  margin: 0;
  margin-left: auto;
  /* Same dock as .repo-fab-new so the circle can stretch into this pill. */
  right: var(--repo-compose-dock-right, var(--repo-foot-gutter));
  left: auto;
  z-index: 41;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface, #fff);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* Mode-nav style chrome chip: rest shadow only, no product-layer motion. */
  box-shadow:
    0 6px 20px rgba(28, 25, 23, 0.10),
    0 1px 3px rgba(28, 25, 23, 0.06);
  opacity: 0;
  pointer-events: none;
  -webkit-app-region: no-drag;
  bottom: var(
    --repo-compose-dock-bottom,
    calc(var(--repo-foot-floor) + var(--repo-panel-height, 0px) + env(safe-area-inset-bottom, 0px))
  );
  top: auto;
  transform: none;
  transition:
    width var(--repo-compose-morph-ms, 300ms) var(--repo-compose-morph-ease, ease-out),
    min-width var(--repo-compose-morph-ms, 300ms) var(--repo-compose-morph-ease, ease-out),
    height var(--repo-compose-morph-ms, 300ms) var(--repo-compose-morph-ease, ease-out),
    min-height var(--repo-compose-morph-ms, 300ms) var(--repo-compose-morph-ease, ease-out),
    border-radius var(--repo-compose-morph-ms, 300ms) var(--repo-compose-morph-ease, ease-out),
    padding var(--repo-compose-morph-ms, 300ms) var(--repo-compose-morph-ease, ease-out),
    opacity 160ms var(--repo-compose-morph-ease, ease-out),
    background var(--repo-compose-morph-ms, 300ms) var(--repo-compose-morph-ease, ease-out),
    box-shadow var(--repo-compose-morph-ms, 300ms) var(--repo-compose-morph-ease, ease-out);
}

/* Expanded island: stretch to pill; contents fade in after width settles. */
.repo-surface__foot.is-visible {
  opacity: 1;
  pointer-events: auto;
  width: max-content;
  min-width: max-content;
  height: auto;
  min-height: 52px;
  padding: 6px;
  border-radius: var(--radius-pill, 999px);
  background: color-mix(in srgb, var(--color-background) 92%, transparent);
  box-shadow: var(--shadow-button);
}

.repo-surface__foot .repo-surface__action {
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity 160ms var(--repo-compose-morph-ease, ease-out),
    transform 160ms var(--repo-compose-morph-ease, ease-out);
  transition-delay: 0ms;
}

.repo-surface__foot.is-visible.is-content-ready .repo-surface__action {
  opacity: 1;
  transform: none;
  transition-delay: 40ms;
}

.repo-surface__foot.is-visible.is-morphing-to-fab {
  width: 56px;
  min-width: 56px;
  height: 56px;
  min-height: 56px;
  padding: 0;
  border-radius: 50%;
  background: var(--color-surface, #fff);
  box-shadow:
    0 6px 20px rgba(28, 25, 23, 0.10),
    0 1px 3px rgba(28, 25, 23, 0.06);
}

.repo-surface__foot.is-morphing-to-fab .repo-surface__action {
  opacity: 0;
  transition-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  .repo-surface__foot {
    transition: opacity 160ms ease;
  }
  .repo-surface__foot .repo-surface__action {
    transform: none;
    transition: opacity 160ms ease;
  }
  .repo-surface__foot.is-visible .repo-surface__action {
    opacity: 1;
  }
}

.repo-surface__action {
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.repo-surface__action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.repo-surface__action--secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-card, var(--color-background));
  color: var(--color-foreground);
  box-shadow: var(--shadow-button);
}

.repo-surface__action--secondary:not(:disabled):hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-button-hover);
}

.repo-surface__kbd {
  display: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-muted);
  opacity: 0.85;
}

/* Keyboard shortcut hint: desktops/laptops with a mouse or trackpad only.
   Phones and touch-only tablets never show ⌘↵ / Ctrl↵. */
@media (hover: hover) and (pointer: fine) {
  .repo-surface__kbd {
    display: inline;
  }
}

.repo-surface__action--primary {
  border: 0;
  background: var(--color-accent-press, #4f46e5);
  color: #fff;
  box-shadow: var(--shadow-button);
}

.repo-surface__action--primary:not(:disabled):hover {
  background: var(--color-accent-strong, #6366f1);
  box-shadow: var(--shadow-button-hover);
}

.repo-surface__action:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Canonical Markdown mirror (includes "> " blockquotes). Visual pad is separate. */
.repo-pad__mirror {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.repo-pad {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-height: calc(100dvh - 160px);
  margin: 0;
  padding: 8px 4px 0;
}

/* Same [hidden] vs display:flex trap as .repo-location - without this the
 * pad keeps eating the center column while an exercise file is open. */
.repo-pad[hidden] {
  display: none !important;
}

.repo-pad__turn {
  display: block;
  width: 100%;
  min-height: 8rem;
  margin: 0;
  padding: 4px 12px 12px;
  resize: none;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-foreground);
  caret-color: var(--color-foreground);
}

.repo-pad__turn:last-of-type {
  flex: 1 1 auto;
  min-height: min(62vh, 36rem);
}

.repo-pad__turn:hover,
.repo-pad__turn:focus,
.repo-pad__turn:focus-visible {
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
}

/* Styled question line - Markdown stores "> …"; the editor never shows the marker. */
.repo-pad__q {
  margin: 10px 12px 4px;
  padding: 10px 14px 10px 16px;
  border-left: 3px solid var(--color-accent-strong, #2d5a3d);
  border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--color-accent-dim, rgba(45, 90, 61, 0.12)) 70%, transparent);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--color-foreground);
  user-select: text;
  -webkit-user-select: text;
  /* Keep scroll/focus targets below the titlebar safe area. */
  scroll-margin-top: var(--repo-write-safe-top, 64px);
}

.repo-pad__q-text {
  display: block;
}

.repo-surface__input.writing-input {
  /* Legacy single-textarea class kept for shared writing-input resets if reused. */
  flex: 1;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  resize: none;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-foreground);
  caret-color: var(--color-foreground);
}

.repo-surface__input.writing-input:hover,
.repo-surface__input.writing-input:focus,
.repo-surface__input.writing-input:focus-visible {
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
}

.repo-changes__note-label {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.repo-changes__list,
.repo-history__list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.repo-changes__item {
  color: var(--color-muted);
  cursor: default;
  font-size: 13px;
}

.repo-changes__item.is-dirty {
  color: var(--color-foreground);
}

.repo-changes__empty {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--color-muted);
}

.repo-changes__note {
  width: 100%;
  height: 36px;
  margin: 0 0 10px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  font: inherit;
  font-size: 13px;
}

.repo-changes__save {
  width: 100%;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-cream, #f5f3ef);
  color: var(--color-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: not-allowed;
  opacity: 0.65;
}

.repo-changes__hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--color-muted);
}

.repo-history {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}

.repo-history__meta {
  display: block;
  font-size: 11px;
  color: var(--color-muted);
  margin-top: 2px;
}

@media (max-width: 800px) {
  :root {
    /* Essays rail hidden - action island uses the narrow right gutter. */
    --repo-essays-rail: 0px;
    --repo-explorer-rail: 0px;
  }

  .repo-top {
    flex-wrap: wrap;
    gap: 10px;
    padding: calc(26px + env(safe-area-inset-top, 0px)) 12px 10px 12px;
  }

  /* Beat the generic .repo-top mobile padding above (same specificity,
   * later source order). Keep the mark inside the safe area and clear of
   * the left screen edge at 375–430px. Transparent - same wash as the pad. */
  .repo-top.repo-top--labs {
    flex-wrap: nowrap;
    gap: 8px;
    padding:
      calc(10px + env(safe-area-inset-top, 0px))
      max(12px, calc(10px + env(safe-area-inset-right, 0px)))
      8px
      max(12px, calc(10px + env(safe-area-inset-left, 0px)));
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    z-index: 50;
  }

  .repo-top--labs .repo-top__labs {
    width: 44px;
    max-width: 44px;
    min-width: 44px;
    gap: 0;
    padding: 0;
    justify-content: center;
    box-sizing: border-box;
    color: var(--color-foreground);
  }

  .repo-top--labs .repo-top__past-essays {
    color: var(--color-foreground);
  }

  .repo-ide-tabbar {
    display: none !important;
  }

  .repo-top__branch,
  .repo-top__badge {
    display: none;
  }

  /* Breathing room under the opaque labs header + notch. */
  .repo-location {
    top: calc(56px + env(safe-area-inset-top, 0px));
    left: auto;
    right: auto;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
    width: min(260px, calc(100% - 24px));
    max-width: min(260px, calc(100% - 24px));
  }

  .repo-location__field {
    height: 34px;
  }

  .repo-location__panel {
    width: min(260px, calc(100vw - 24px));
    max-height: 50vh;
  }

  .repo-location__option {
    min-height: 44px;
    font-size: 15px;
  }

  .repo-layout,
  .repo-layout--write {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
    min-height: 0;
    height: auto;
  }

  /* Mobile: writing is primary; code is not editable (hidden). Explorer
     opens as an overlay when Exercises is used while signed in. */
  .repo-tabs,
  .repo-code,
  .repo-code-host,
  #repo-editor-main,
  .repo-editor-empty,
  .repo-explorer__expand,
  .repo-code__save,
  #repo-code-save,
  .repo-ide-tabbar,
  .repo-layout--write.is-code-open #repo-editor-main,
  .repo-layout--write.is-code-open .repo-code-host,
  body.repo-code-open #repo-editor-main,
  body.repo-code-open .repo-code {
    display: none !important;
  }

  .repo-layout--write {
    display: flex;
    flex-direction: column;
    --repo-explorer-rail: 0px;
    --repo-essays-rail: 0px;
    padding-top: var(--repo-top-bar, calc(56px + env(safe-area-inset-top, 0px)));
  }

  .repo-ide-center {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }

  .repo-layout--write .repo-center,
  body.repo-page--write .repo-center {
    width: 100%;
    max-width: none;
    align-self: stretch;
  }

  .repo-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
    max-height: none;
    padding: 12px;
  }

  .repo-panel {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
  }

  .repo-panel__body,
  .repo-panel__write {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  .repo-tree__head--mobile {
    display: none;
  }

  /* Mobile exercises overlay (Exercises): starts below sticky top bar.
     Overlay is OK under ~800px only - with scrim + tap-outside-to-close. */
  .repo-explorer {
    display: none;
    grid-column: auto;
    position: fixed;
    top: var(--repo-top-bar, calc(56px + env(safe-area-inset-top, 0px)));
    left: 0;
    bottom: 0;
    width: min(320px, 92vw);
    min-width: 0;
    max-width: min(320px, 92vw);
    z-index: 36;
    border-right: 1px solid var(--color-border);
    background: var(--color-background);
    /* Prefer the gated body scrollport; keep overflow hidden so wheel/touch
       hit the flex child with overflow-y:auto (same as desktop). */
    overflow: hidden;
    resize: none;
  }

  .repo-explorer-scrim {
    display: none;
    position: fixed;
    top: var(--repo-top-bar, calc(56px + env(safe-area-inset-top, 0px)));
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(31, 29, 26, 0.45);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .repo-layout--write.is-explorer-open .repo-explorer-scrim {
    display: block;
  }

  .repo-layout--write.is-explorer-open .repo-explorer {
    display: flex;
    flex-direction: column;
  }

  .repo-layout--write.is-explorer-open .repo-explorer__gated {
    flex: 1 1 auto;
    min-height: 0;
  }

  .repo-layout--write .repo-ide-center {
    grid-column: auto;
  }

  .repo-layout--write.is-explorer-open .repo-explorer__head {
    flex: 0 0 auto;
    position: relative;
    z-index: auto;
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 8px;
  }

  /* Mobile essays sidebar: sheet below the sticky top bar (hamburger). */
  .repo-layout--write .repo-right,
  body.repo-page--write .repo-right {
    display: none;
  }

  /* Sheet starts at viewport top so the wash continues under the transparent
   * top nav — no tint seam / hard rule between nav and "Founder Source". */
  body.repo-page--write[data-repo-essays-list="1"] .repo-layout--write .repo-right,
  body.repo-page--write[data-repo-essays-list="1"] .repo-right,
  .repo-layout--write.is-essays-open .repo-right {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    border: 0;
    box-sizing: border-box;
    gap: 0;
    padding:
      var(--repo-top-bar, calc(56px + env(safe-area-inset-top, 0px)))
      calc(16px + env(safe-area-inset-right, 0px))
      calc(24px + env(safe-area-inset-bottom, 0px))
      calc(16px + env(safe-area-inset-left, 0px));
    background:
      radial-gradient(circle at 18% 8%, rgba(123, 196, 122, 0.08), transparent 38%),
      radial-gradient(circle at 88% 4%, rgba(165, 180, 252, 0.10), transparent 38%),
      var(--color-background);
    overflow: hidden;
  }

  /* Mobile technical essays sidebar: same sheet as Essays (mark toggle). */
  .repo-layout--write .repo-left,
  body.repo-page--write .repo-left {
    display: none;
  }

  body.repo-page--write[data-repo-tech-essays-list="1"] .repo-layout--write .repo-left,
  body.repo-page--write[data-repo-tech-essays-list="1"] .repo-left,
  .repo-layout--write.is-tech-essays-open .repo-left {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    border: 0;
    box-sizing: border-box;
    gap: 0;
    padding:
      var(--repo-top-bar, calc(56px + env(safe-area-inset-top, 0px)))
      calc(16px + env(safe-area-inset-right, 0px))
      calc(24px + env(safe-area-inset-bottom, 0px))
      calc(16px + env(safe-area-inset-left, 0px));
    background:
      radial-gradient(circle at 18% 8%, rgba(123, 196, 122, 0.08), transparent 38%),
      radial-gradient(circle at 88% 4%, rgba(165, 180, 252, 0.10), transparent 38%),
      var(--color-background);
    overflow: hidden;
  }

  body.repo-page--write[data-repo-tech-essays-list="1"] .repo-tech-essays-sidebar .repo-panel__head,
  .repo-layout--write.is-tech-essays-open .repo-tech-essays-sidebar .repo-panel__head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: auto;
    flex: 0 0 auto;
    height: auto;
    gap: 4px;
    margin: 0 -16px;
    padding: 4px 16px 14px;
    overflow: visible;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
  }

  body.repo-page--write[data-repo-tech-essays-list="1"] .repo-panel__title,
  .repo-layout--write.is-tech-essays-open .repo-panel__title {
    font-family: var(--font-display, "Fraunces", Georgia, serif);
    font-size: 26px;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-transform: none;
  }

  body.repo-page--write[data-repo-tech-essays-list="1"] .repo-left .repo-tree,
  .repo-layout--write.is-tech-essays-open .repo-left .repo-tree {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  body.repo-page--write[data-repo-tech-essays-list="1"] .repo-left .repo-tree__body,
  .repo-layout--write.is-tech-essays-open .repo-left .repo-tree__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.repo-page--write[data-repo-tech-essays-list="1"] .repo-left .repo-changes,
  .repo-layout--write.is-tech-essays-open .repo-left .repo-changes {
    display: none;
  }

  body.repo-page--write[data-repo-tech-essays-list="1"] .repo-panel__write,
  body.repo-page--write[data-repo-tech-essays-list="1"] #repo-surface,
  .repo-layout--write.is-tech-essays-open .repo-panel__write,
  .repo-layout--write.is-tech-essays-open #repo-surface {
    visibility: hidden;
    pointer-events: none;
  }

  body.repo-page--write[data-repo-tech-essays-list="1"] .repo-surface__foot,
  body.repo-page--write[data-repo-tech-essays-list="1"] .repo-pad-error,
  body.repo-page--write[data-repo-tech-essays-list="1"] .repo-location,
  .repo-layout--write.is-tech-essays-open .repo-surface__foot,
  .repo-layout--write.is-tech-essays-open .repo-pad-error,
  .repo-layout--write.is-tech-essays-open .repo-location {
    display: none !important;
  }

  /* Section header sits on the same wash — spacing + type, no rule / gray band. */
  body.repo-page--write[data-repo-essays-list="1"] .repo-essays-sidebar .repo-panel__head,
  .repo-layout--write.is-essays-open .repo-essays-sidebar .repo-panel__head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: auto;
    flex: 0 0 auto;
    height: auto;
    gap: 4px;
    margin: 0 -16px;
    padding: 4px 16px 14px;
    overflow: visible;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
  }

  body.repo-page--write[data-repo-essays-list="1"] .repo-panel__head-row--title,
  .repo-layout--write.is-essays-open .repo-panel__head-row--title {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    min-height: 36px;
    gap: 12px;
  }

  body.repo-page--write[data-repo-essays-list="1"] .repo-panel__title,
  .repo-layout--write.is-essays-open .repo-panel__title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-display, "Fraunces", Georgia, serif);
    font-size: 26px;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-transform: none;
    color: var(--color-foreground);
  }

  body.repo-page--write[data-repo-essays-list="1"] .repo-panel__close,
  .repo-layout--write.is-essays-open .repo-panel__close {
    width: 44px;
    height: 44px;
    font-size: 28px;
  }

  body.repo-page--write[data-repo-essays-list="1"] .repo-panel__actions,
  .repo-layout--write.is-essays-open .repo-panel__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  body.repo-page--write[data-repo-essays-list="1"] .repo-panel__actions .repo-tree__new,
  .repo-layout--write.is-essays-open .repo-panel__actions .repo-tree__new {
    min-height: 40px;
    padding: 0 14px;
  }

  body.repo-page--write[data-repo-essays-list="1"] .repo-right .repo-tree,
  .repo-layout--write.is-essays-open .repo-right .repo-tree {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  body.repo-page--write[data-repo-essays-list="1"] .repo-right .repo-tree__body,
  .repo-layout--write.is-essays-open .repo-right .repo-tree__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Clear the New essay FAB so the last rows stay tappable. */
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  body.repo-page--write[data-repo-essays-list="1"] .repo-right .repo-changes,
  .repo-layout--write.is-essays-open .repo-right .repo-changes {
    display: none;
  }

  body.repo-page--write[data-repo-essays-list="1"] .repo-panel__write,
  body.repo-page--write[data-repo-essays-list="1"] #repo-surface,
  .repo-layout--write.is-essays-open .repo-panel__write,
  .repo-layout--write.is-essays-open #repo-surface {
    visibility: hidden;
    pointer-events: none;
  }

  body.repo-page--write[data-repo-essays-list="1"] .repo-surface__foot,
  body.repo-page--write[data-repo-essays-list="1"] .repo-pad-error,
  body.repo-page--write[data-repo-essays-list="1"] .repo-location,
  .repo-layout--write.is-essays-open .repo-surface__foot,
  .repo-layout--write.is-essays-open .repo-pad-error,
  .repo-layout--write.is-essays-open .repo-location {
    display: none !important;
  }

  body.repo-page--write .repo-center {
    min-height: calc(100vh - 56px);
    min-height: calc(100svh - 56px);
    min-height: calc(100dvh - 56px);
  }

  .repo-surface.writing {
    /* Match location sticky top so the pad text starts below the pill. */
    padding: calc(56px + env(safe-area-inset-top, 0px)) 12px 88px;
    /* Room for action island + New essay FAB + home indicator + keyboard. */
    padding-bottom: calc(
      96px + 64px + env(safe-area-inset-bottom, 0px) + var(--repo-keyboard-inset, 0px)
    );
    min-height: calc(100vh - 56px);
    min-height: calc(100svh - 56px);
    min-height: calc(100dvh - 56px);
    min-height: -webkit-fill-available;
  }

  .repo-pad {
    min-height: calc(100svh - 160px);
    min-height: calc(100dvh - 160px);
  }

  .repo-pad__turn {
    font-size: 16px;
    padding: 4px 8px 12px;
  }

  .repo-pad__turn:last-of-type {
    /* Tall tap target for “tap blank space to type”, but not so tall that
       content alone pushes past one phone screen without scrolling. */
    min-height: min(55svh, 22rem);
  }

  .repo-pad__q {
    margin: 8px 8px 4px;
    font-size: 17px;
  }

  .repo-followup {
    margin: 44px 12px 0;
    font-size: 17px;
  }

  /* Fixed to the visual viewport so the island is on screen on load,
     while scrolling, and above the iOS home indicator / keyboard.
     Phone (<768px) keeps the tight #453 floor; wider viewports keep the
     desktop max(48px, 8vh) floor from the base rule.
     right/bottom come from --repo-compose-dock-* (shared with the FAB). */
  .repo-surface__foot {
    position: fixed;
    right: var(--repo-compose-dock-right, calc(16px + var(--repo-safe-right, env(safe-area-inset-right, 0px))));
    left: auto;
    margin: 0;
    align-self: auto;
    z-index: 30;
    top: auto;
  }

  /* Phone foot sits lower; keep pad notices just above it. */
  .repo-pad-error {
    bottom: calc(
      64px + env(safe-area-inset-bottom, 0px) + var(--repo-keyboard-inset, 0px)
    );
    top: auto;
    transform: translateX(-50%);
  }

  @supports (height: 100dvh) {
    .repo-pad-error {
      bottom: auto;
      top: calc(
        100dvh - 64px - env(safe-area-inset-bottom, 0px) - var(--repo-keyboard-inset, 0px)
      );
      transform: translate(-50%, -100%);
    }
  }

  @supports (height: 100svh) {
    .repo-pad-error {
      top: calc(
        100svh - 64px - env(safe-area-inset-bottom, 0px) - var(--repo-keyboard-inset, 0px)
      );
    }
  }
}

/* Phone: #453 - above the home bar with safe-area + keyboard inset. */
@media (max-width: 767px) {
  :root {
    --repo-foot-floor: 12px;
  }

  body.repo-page--write {
    --repo-compose-dock-right: calc(16px + var(--repo-safe-right, env(safe-area-inset-right, 0px)));
    --repo-compose-dock-bottom: calc(
      12px
        + var(--repo-safe-bottom, env(safe-area-inset-bottom, 0px))
        + var(--repo-keyboard-inset, 0px)
    );
  }

  .repo-surface__foot {
    right: var(--repo-compose-dock-right, calc(16px + var(--repo-safe-right, env(safe-area-inset-right, 0px))));
    left: auto;
    bottom: var(--repo-compose-dock-bottom, calc(12px + var(--repo-safe-bottom, env(safe-area-inset-bottom, 0px))));
  }

  .repo-surface.writing {
    padding-bottom: calc(
      96px + env(safe-area-inset-bottom, 0px) + var(--repo-keyboard-inset, 0px)
    );
  }

  .repo-surface.writing .repo-pad {
    padding-bottom: 72px;
  }
}

/* Narrow phone (e.g. 390px): keep the island centered and clear of pad text. */
@media (max-width: 430px) {
  .repo-location {
    top: calc(56px + env(safe-area-inset-top, 0px));
    left: auto;
    right: auto;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
    width: min(240px, calc(100% - 20px));
    max-width: min(240px, calc(100% - 20px));
  }

  .repo-location__field {
    height: 32px;
    gap: 6px;
    padding-left: 10px;
  }

  .repo-location__globe {
    width: 12px;
    height: 12px;
  }

  .repo-surface.writing {
    padding: calc(56px + env(safe-area-inset-top, 0px)) 10px 84px;
    padding-bottom: calc(
      96px + env(safe-area-inset-bottom, 0px) + var(--repo-keyboard-inset, 0px)
    );
  }

  .repo-pad__turn {
    font-size: 16px;
  }

  .repo-pad__q {
    font-size: 16px;
    padding: 9px 12px 9px 14px;
  }

  .repo-followup {
    margin: 40px 10px 0;
    font-size: 16px;
  }

  .repo-surface__foot {
    right: var(--repo-compose-dock-right, calc(16px + var(--repo-safe-right, env(safe-area-inset-right, 0px))));
    left: auto;
    bottom: var(--repo-compose-dock-bottom, calc(12px + var(--repo-safe-bottom, env(safe-area-inset-bottom, 0px))));
    gap: 4px;
  }

  .repo-surface__foot.is-visible {
    padding: 5px;
  }

  .repo-surface__action {
    height: 36px;
    padding: 0 12px;
    font-size: 12px;
  }
}

/* ── Labs drawer (Exercises → left iframe panel) ─────────────────────────── */
.labs-drawer {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
}

.labs-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(45, 42, 38, 0.32);
  pointer-events: auto;
  opacity: 1;
}

.labs-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(420px, 100%);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-background, #fffdf7);
  border-right: 1px solid var(--color-border, #ede8e0);
  box-shadow: none;
  pointer-events: auto;
  transform: none;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  box-sizing: border-box;
}

.labs-drawer__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 44px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-border, rgba(31, 29, 26, 0.12));
}

.labs-drawer__close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-button, 10px);
  background: transparent;
  color: var(--color-muted);
  line-height: 1;
  cursor: pointer;
}

.labs-drawer__close:hover {
  color: var(--color-foreground);
  background: color-mix(in srgb, var(--color-accent, #a5b4fc) 14%, transparent);
}

.labs-drawer__close:focus-visible {
  outline: none;
  color: var(--color-foreground);
  background: color-mix(in srgb, var(--color-accent, #a5b4fc) 14%, transparent);
  box-shadow: var(--focus-ring);
}

.labs-drawer__frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  display: block;
  background: var(--color-background, #fffdf7);
}

@media (max-width: 800px) {
  .labs-drawer__panel {
    width: 100%;
  }
}

html.labs-drawer-open,
html.labs-drawer-open body {
  overflow: hidden;
}


/* A separate text reader keeps the desktop editor out of mobile browsing.
 * Label stays hidden on desktop; phone media query below reveals it. */
.repo-top__labs-label { display: none !important; }
.repo-ex-reader { display: none; }

/* Write empty state: visible when no place is selected and the pad is blank. */
.repo-write-empty {
  display: block;
  margin: 28px 12px 0;
  padding: 0 4px;
  max-width: 28rem;
  align-self: center;
  text-align: center;
  color: var(--color-muted);
  font-family: var(--font-sans, "Instrument Sans", sans-serif);
  font-size: 15px;
  line-height: 1.55;
}
.repo-write-empty[hidden] { display: none !important; }
.repo-write-empty__title {
  margin: 0 0 6px;
  color: var(--color-foreground);
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.repo-write-empty__copy { margin: 0; }

/* Installed iPhone PWA: keep labs chrome fully below the notch and
 * readable against any page glow. display-mode standalone covers Add to
 * Home Screen; -webkit-fill-available alone is not enough. */
@media (display-mode: standalone) {
  .repo-top.repo-top--labs {
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    padding-bottom: 10px;
    background: transparent;
    border: 0;
    box-shadow: none;
    z-index: 50;
  }

  .repo-top--labs .repo-top__labs,
  .repo-top--labs .repo-top__past-essays {
    color: var(--color-foreground);
    opacity: 1;
  }

  body.repo-page--write .repo-center.repo-write-safe-top::before {
    top: calc(56px + env(safe-area-inset-top, 0px));
  }
}

@media (max-width: 800px) {
  .repo-top__labs-label {
    display: none;
  }
  .repo-layout--write.is-explorer-open .repo-explorer {
    width: 100%; max-width: 100%;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .repo-ex-node__icon,
  .repo-ex-write-about,
  .repo-ex-transform-retry { display: none !important; }
  .repo-ex-reader:not([hidden]) {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
    overflow: hidden;
  }
  .repo-explorer__body[hidden] { display: none; }
  .repo-ex-reader__back {
    flex: 0 0 auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 14px;
    border: 0;
    border-radius: var(--radius-button, 10px);
    background: transparent;
    color: var(--color-foreground);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
  }
  .repo-ex-reader__back:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }
  .repo-ex-reader__path {
    flex: 0 0 auto; margin: 0; padding: 8px 14px;
    font-size: 14px; overflow-wrap: anywhere;
  }
  .repo-ex-reader__content {
    flex: 1 1 auto; min-height: 0; max-width: 100%; margin: 0; padding: 16px;
    overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    white-space: pre; font: 14px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace;
    tab-size: 2; user-select: text; -webkit-user-select: text;
  }
  /* Formatted .md in the mobile reader - match essay-read prose, not monospace. */
  .repo-ex-reader__content.is-markdown {
    white-space: normal;
    overflow-wrap: anywhere;
    font-family: var(--font-display, Fraunces, Georgia, serif);
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-foreground, #1a1a1a);
  }
  .repo-ex-reader__content.is-markdown > :first-child { margin-top: 0; }
  .repo-ex-reader__content.is-markdown h1,
  .repo-ex-reader__content.is-markdown h2,
  .repo-ex-reader__content.is-markdown h3,
  .repo-ex-reader__content.is-markdown h4 {
    font-family: var(--font-display, Fraunces, Georgia, serif);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 1.25em 0 0.5em;
  }
  .repo-ex-reader__content.is-markdown h1 { font-size: 1.7em; }
  .repo-ex-reader__content.is-markdown h2 { font-size: 1.35em; }
  .repo-ex-reader__content.is-markdown h3 { font-size: 1.15em; }
  .repo-ex-reader__content.is-markdown p { margin: 0 0 1em; }
  .repo-ex-reader__content.is-markdown ul,
  .repo-ex-reader__content.is-markdown ol {
    margin: 0 0 1em;
    padding-left: 1.35em;
  }
  .repo-ex-reader__content.is-markdown li { margin: 0.25em 0; }
  .repo-ex-reader__content.is-markdown blockquote {
    margin: 0.75em 0 1em;
    padding: 0.15em 0 0.15em 1em;
    border-left: 3px solid var(--color-border, rgba(45, 90, 61, 0.28));
    color: color-mix(in srgb, var(--color-foreground) 82%, var(--color-muted, #6b6b6b));
  }
  .repo-ex-reader__content.is-markdown code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
    padding: 0.1em 0.35em;
    border-radius: 4px;
    background: color-mix(in srgb, var(--color-accent-dim, rgba(45, 90, 61, 0.1)) 55%, transparent);
  }
  .repo-ex-reader__content.is-markdown pre {
    margin: 0 0 1em;
    padding: 12px 14px;
    overflow: auto;
    border-radius: 10px;
    white-space: pre;
    background: color-mix(in srgb, var(--color-accent-dim, rgba(45, 90, 61, 0.1)) 70%, transparent);
  }
  .repo-ex-reader__content.is-markdown pre code {
    padding: 0;
    background: transparent;
  }
  .repo-ex-reader__content.is-markdown a {
    color: var(--color-accent-strong, #2d5a3d);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }
  .repo-ex-reader__content.is-markdown strong { font-weight: 700; }
  .repo-ex-reader__content.is-markdown em { font-style: italic; }
  .repo-ex-node__btn, .repo-explorer__group-btn { min-height: 44px; }

  /* Learning loop chrome (explorer/tabs) stays off on narrow widths. */
  .repo-layout--learning .repo-tabs,
  .repo-layout--learning .repo-ide-tabbar,
  .repo-layout--learning .repo-explorer,
  .repo-layout--learning .repo-explorer__expand,
  .repo-layout--learning .repo-explorer-scrim {
    display: none !important;
  }

  /* Prompt + practice file only after Exercises opens the loop (is-code-open).
   * Without that gate, mobile first paint stays essay writing. */
  .repo-layout--learning.is-code-open .repo-panel--write,
  body.repo-code-open .repo-layout--learning .repo-panel--write {
    display: none !important;
  }

  .repo-layout--learning.is-code-open #repo-editor-main,
  body.repo-code-open .repo-layout--learning #repo-editor-main,
  .repo-layout--learning.is-code-open .repo-code-host,
  body.repo-code-open .repo-layout--learning .repo-code-host,
  .repo-layout--learning.is-code-open .repo-code:not([hidden]),
  body.repo-code-open .repo-layout--learning .repo-code:not([hidden]) {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }

  .repo-layout--learning.is-code-open .repo-learning,
  body.repo-code-open .repo-layout--learning .repo-learning {
    padding: 12px 14px 10px;
  }

  .repo-layout--learning.is-code-open .repo-learning__prompt,
  body.repo-code-open .repo-layout--learning .repo-learning__prompt {
    padding: 14px 14px;
  }

  .repo-layout--learning.is-code-open .repo-code__bar,
  body.repo-code-open .repo-layout--learning .repo-code__bar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .repo-layout--learning.is-code-open .repo-code__actions,
  body.repo-code-open .repo-layout--learning .repo-code__actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ===== Learning loop (ZPD): one prompt + one file =====
 * Desktop: practice surface opens when signed in. Mobile: essay writing first;
 * no Exercises nav — reconstruct from technical essays updates progress. */
.repo-layout--learning {
  /* Keep Technical (left) + Business (right) rails; no Exercises explorer rail. */
  --repo-explorer-rail: 0px;
  grid-template-columns:
    var(--repo-tech-essays-rail, 0px)
    minmax(0, 1fr)
    var(--repo-essays-rail, 0px);
}

.repo-layout--learning .repo-explorer,
.repo-layout--learning .repo-explorer-scrim,
.repo-layout--learning .repo-explorer__expand,
.repo-layout--learning .repo-ide-tabbar,
.repo-layout--learning .repo-tabs {
  display: none !important;
}

.repo-layout--learning .repo-ide-center {
  grid-column: 2;
}

.repo-learning {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  background: color-mix(in srgb, var(--color-background) 94%, var(--color-accent-dim, #dfe8e2) 6%);
}

.repo-mcp-context {
  margin: 0 0 8px;
  padding: 0 2px;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: color-mix(in srgb, var(--color-muted) 90%, transparent);
}

.repo-mcp-context[hidden] {
  display: none !important;
}

.repo-learning__empty {
  margin: 0;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--color-muted);
}

.repo-learning__goal {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 15px;
  font-weight: 560;
  letter-spacing: -0.01em;
  color: var(--color-muted);
  line-height: 1.35;
}

.repo-learning__source {
  margin: -4px 0 0;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--color-muted) 85%, transparent);
  line-height: 1.35;
}

.repo-learning__prompt {
  margin: 0;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  background: var(--color-card, var(--color-background));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-foreground) 4%, transparent);
}

.repo-learning__empty[hidden],
.repo-learning__goal[hidden],
.repo-learning__source[hidden],
.repo-learning__prompt[hidden],
.repo-learning__zpd[hidden],
.repo-learning__done[hidden] {
  display: none !important;
}

.repo-learning__prompt-text {
  margin: 0;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--color-foreground);
}

.repo-learning__zpd {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0 2px;
}

.repo-learning__zpd-row {
  margin: 0;
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-muted);
}

.repo-learning__zpd-label {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 11px;
  color: color-mix(in srgb, var(--color-muted) 85%, var(--color-foreground));
}

.repo-learning__zpd-text {
  color: var(--color-foreground);
  opacity: 0.85;
}

.repo-learning__done {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--color-accent, #2d5a3d) 28%, var(--color-border));
  background: color-mix(in srgb, var(--color-background) 88%, #c8e0d0 12%);
}

.repo-learning__done-copy {
  margin: 0;
  flex: 1 1 12rem;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-foreground);
}

.repo-learning__next-goal {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button, 10px);
  background: var(--color-card, var(--color-background));
  color: var(--color-foreground);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-button);
}

.repo-learning__next-goal:hover,
.repo-learning__next-goal:focus-visible {
  border-color: var(--color-accent, #2d5a3d);
  box-shadow: var(--shadow-button-hover);
}

.repo-learning__next-goal:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.repo-code__undo {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button, 10px);
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.repo-code__undo:hover,
.repo-code__undo:focus-visible {
  color: var(--color-foreground);
  border-color: color-mix(in srgb, var(--color-border) 60%, var(--color-foreground));
}

.repo-code__undo:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.repo-code__undo[hidden] {
  display: none !important;
}

/* Subtle tint after Claude applies revisedContent (not stacked red/green diffs). */
.repo-code.is-just-applied .repo-code__surface,
.repo-code__surface.is-just-applied {
  box-shadow: inset 0 0 0 9999px color-mix(in srgb, #b7d8c2 16%, transparent);
  animation: repo-applied-fade 2.2s ease-out forwards;
}

@keyframes repo-applied-fade {
  0% {
    box-shadow: inset 0 0 0 9999px color-mix(in srgb, #b7d8c2 22%, transparent);
  }
  55% {
    box-shadow: inset 0 0 0 9999px color-mix(in srgb, #e8d9a8 12%, transparent);
  }
  100% {
    box-shadow: inset 0 0 0 9999px transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .repo-code.is-just-applied .repo-code__surface,
  .repo-code__surface.is-just-applied {
    animation: none;
    box-shadow: inset 0 0 0 9999px color-mix(in srgb, #b7d8c2 12%, transparent);
  }
}

/* Learning loop: hide legacy Accept/Reject evaluate chrome even if present. */
.repo-layout--learning .repo-code__evaluate-diff,
.repo-layout--learning .repo-code__evaluate-decide,
.repo-layout--learning .repo-code__evaluate-accept,
.repo-layout--learning .repo-code__evaluate-reject,
.repo-layout--learning .repo-code__evaluate-before,
.repo-layout--learning .repo-code__evaluate-after,
.repo-layout--learning .repo-code__save,
.repo-layout--learning .repo-code__refactor,
.repo-layout--learning .repo-code__refactor-panel {
  display: none !important;
}