/* Image editor (/editor). The website's dark palette and controls; every switch is the
   extension's segmented pill (orientation picker, All | Boards), with the active pill
   sliding between options. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink:          #f0ebe3;
  --ink-muted:    #8a8070;
  --accent:       #013FF4;
  --accent-light: #8FBEF7;
  --error-text:   #ff8c80;
  --bg:           #0d0b09;
  --bg2:          #111009;
  --bg-card:      #161410;
  --border:       rgba(240,235,227,0.07);
  --border-hi:    rgba(240,235,227,0.14);
  --pill-fill:    rgba(240,235,227,0.11);
  --pill-edge:    rgba(240,235,227,0.08);
  --radius-card:  16px;
  --radius-field: 10px;
  --nav-gutter:   52px;
  --tray-width:   clamp(360px, 24vw, 440px);
  --ease:         cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* One light scrollbar for every scrolling area (same look as the desktop app's panel): thin rounded thumb, transparent
   track, a little brighter on hover. Firefox gets the standard properties; Chromium the ::-webkit-scrollbar set. */
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: rgba(240,235,227,0.3) transparent; } }
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb { min-height: 42px; border: 3px solid transparent; border-radius: 999px; background: rgba(240,235,227,0.3); background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(240,235,227,0.5); background-clip: padding-box; }
/* The page's own scrollbar runs along the window's edge: a wider gutter keeps its thumb 5px off the edge. */
body::-webkit-scrollbar { width: 16px; }   /* Chromium styles the window's scrollbar from body */
body::-webkit-scrollbar-thumb { border-width: 5px; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ── Nav: the account page's bar ─────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-height); padding: 0 var(--nav-gutter);
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(13,11,9,0.88);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
}
.nav-logo img { height: var(--logo-height); width: auto; display: block; }

/* ── Page and header ─────────────────────────────────────────────────── */
.editor-page {
  /* Controls one step larger than the site's chrome. */
  --text-ui: 15px;
  --text-13: 14px;
  --text-12: 13px;
  --control-height: 44px;
  /* Full width and aligned with the nav, like the Library. On a laptop and up the editor fills
     the window: no page scroll, a bigger screen gives a bigger image. */
  display: flex;
  flex-direction: column;
  height: max(100vh, 640px);
  height: max(100dvh, 640px);
  /* 24px below the cards: the same as the gap between the image card and the right panel. */
  padding: calc(var(--nav-height) + var(--space-6)) var(--nav-gutter) var(--space-6);
}
.picker { --text-ui: 15px; --text-13: 14px; --text-12: 13px; }
.editor-header {
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);   /* 24px of air between the title and the cards / buttons row */
}
.editor-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--text-app-title);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.editor-title em, .editor-signin em, .picker-title em { font-style: italic; color: var(--accent-light); }
.editor-header-actions { display: flex; align-items: center; gap: var(--space-2); }
/* The header buttons are as tall as the active Original / Edited segment (36px) plus 2px of block padding each side. */
.editor-header-actions .editor-button { min-height: 40px; height: 40px; padding-block: 2px; }

/* Buttons: the Library toolbar's pill (secondary) and its blue primary. */
.editor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: var(--control-pad-y) var(--control-pad-x);
  border: 1px solid var(--border-hi);
  border-radius: var(--control-radius);
  background: rgba(240,235,227,0.04);
  color: var(--ink-muted);
  font-size: var(--text-ui);
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.15s, opacity 0.2s;
}
.editor-button svg, .editor-link svg, .pill-action svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
@media (hover: hover) { .editor-button:hover:not(:disabled) { border-color: var(--ink-muted); color: var(--ink); transform: translateY(-1px); } }
.editor-button.primary {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
  font-weight: 500;
  box-shadow: 0 6px 24px rgba(1,63,244,0.26);
}
@media (hover: hover) { .editor-button.primary:hover:not(:disabled) { border-color: transparent; color: #fff; opacity: 0.88; } }
.editor-button:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.editor-button:focus-visible, .editor-link:focus-visible, .pill-action:focus-visible,
.editor-submit:focus-visible, .seg-option:focus-visible, .picker-close:focus-visible, .picker-tile:focus-visible,
.picker-board:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }

/* Quiet text actions (Undo, Clear, Reset). */
.editor-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-muted);
  font-size: var(--text-13);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s;
}
@media (hover: hover) { .editor-link:hover:not(:disabled) { color: var(--ink); } }
.editor-link:disabled { opacity: 0.4; cursor: default; }
/* Undo edit sits beside the Original / Edited switch, so it takes the switch's type. */
.stage-tools .editor-link { font-size: var(--text-ui); font-weight: 400; }

/* Upload image / From Library: the extension's From image pills. */
.pill-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(240,235,227,0.14);
  border-radius: 20px;
  background: rgba(240,235,227,0.07);
  color: var(--ink);   /* at rest it must read as live, not like the tray's dimmed controls */
  font-size: var(--text-13);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
@media (hover: hover) { .pill-action:hover:not(:disabled) { background: rgba(240,235,227,0.16); border-color: rgba(240,235,227,0.32); } }
.pill-action:disabled { opacity: 0.5; cursor: progress; }

/* ── Segmented pill: the extension's orientation picker and the Library's All | Boards ── */
.seg {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(240,235,227,0.03);
}
.seg::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: var(--seg-w, 0);
  border-radius: 999px;
  background: var(--pill-fill);
  box-shadow: inset 0 0 0 1px var(--pill-edge);
  opacity: 0;
  transform: translateX(var(--seg-x, 0));
  transition: transform 0.25s ease, width 0.25s ease, opacity 0.2s;
}
.seg.has-indicator::before { opacity: 1; }
.seg.no-slide::before { transition: none; }
.seg-option {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  min-height: 36px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-muted);
  font-size: var(--text-ui);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
@media (hover: hover) { .seg-option:hover:not(:disabled) { color: var(--ink); } }
.seg-option.is-active { background: var(--pill-fill); color: var(--ink); box-shadow: inset 0 0 0 1px var(--pill-edge); }
.seg.has-indicator .seg-option.is-active { background: transparent; box-shadow: none; }
.seg-option:disabled { cursor: default; opacity: 0.45; }
.seg-wide { display: flex; width: 100%; }
.seg-wide .seg-option { flex: 1 1 0; }

/* ── Workspace ───────────────────────────────────────────────────────── */
.editor-workspace {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--tray-width);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: stretch;
  animation: rise-in 0.35s var(--ease) both;
}
.editor-stage-card, .editor-tray, .editor-signin {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg-card);
}
.editor-stage-card { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.stage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  flex: none;
  /* 16px round the Original / Edited switch, like the tray's bar above Adjust / Edit an area,
     so the two bars (and their bottom borders) sit on one line. */
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.stage-meta { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; }
.stage-name {
  font-size: var(--text-ui);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 36ch;
}
.stage-size { font-size: var(--text-13); color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stage-tools { position: relative; display: flex; align-items: center; gap: var(--space-4); }

.stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  flex-direction: column;   /* the image, then the caption of what it was edited with */
  gap: var(--space-2);
  min-height: 0;
  overflow: hidden;
  padding: var(--space-6);
  background:
    linear-gradient(45deg, rgba(240,235,227,0.025) 25%, transparent 25%, transparent 75%, rgba(240,235,227,0.025) 75%) 0 0 / 24px 24px,
    linear-gradient(45deg, rgba(240,235,227,0.025) 25%, transparent 25%, transparent 75%, rgba(240,235,227,0.025) 75%) 12px 12px / 24px 24px;
}
.stage.is-dragging { box-shadow: inset 0 0 0 2px var(--accent-light); }

/* Empty: the extension's From image drop zone. */
.stage-empty {
  width: min(100%, 440px);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  border: 1px dashed rgba(240,235,227,0.16);
  border-radius: var(--radius-card);
  background: rgba(240,235,227,0.018);
  color: var(--ink-muted);
  font-size: var(--text-13);
  line-height: 1.5;
  text-align: center;
  animation: fade-in 0.3s ease both;
}
.stage-empty-copy { max-width: 32ch; color: var(--ink); font-size: var(--text-ui); }
.stage-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.stage-empty-hint { font-size: var(--text-12); }

/* "Edited with: “…”" under the image: muted, one line with an ellipsis; a small Show more opens the whole
   prompt (and Show less closes it) when it doesn't fit. The prompt is also in the line's title. */
.stage-foot {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);   /* 16px on all four sides, like the header above */
  border-top: 1px solid var(--border);
}
.stage-foot[hidden] { display: none; }
.edit-caption {
  max-width: 100%;
  max-height: 1.5em;   /* one line; opened, the script sets the whole text's height so it can slide */
  min-width: 0;
  color: var(--ink-muted);
  font-size: var(--text-13);
  line-height: 1.5;
  text-align: left;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
  transition: max-height 0.2s var(--ease, ease);
}
.edit-caption.is-open { -webkit-line-clamp: unset; }
.caption-toggle {
  padding: 0 var(--space-1, 4px);
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: var(--text-12);
  line-height: 1.75;   /* on the caption's first line */
  white-space: nowrap;
  flex: none;
  cursor: pointer;
  transition: color 0.15s;
}
@media (hover: hover) { .caption-toggle:hover { color: var(--ink); } }
.caption-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--accent-light); }
@media (prefers-reduced-motion: reduce) { .edit-caption { transition: none; } }

.canvas-wrap {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}
.canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.canvas-wrap.is-revealing { animation: reveal 0.6s var(--ease) both; }
#selection-canvas { touch-action: none; }
.canvas-wrap.is-painting #selection-canvas { cursor: none; }
.brush-cursor {
  position: absolute;
  pointer-events: none;
  border: 1.5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(0,0,0,0.35);
  transform: translate(-50%, -50%);
  transition: width 0.12s, height 0.12s;
}

/* Working: the stage dims, a ring turns, the step and time below it. */
.stage-busy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: rgba(13,11,9,0.72);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  text-align: center;
  animation: fade-in 0.25s ease both;
}
/* The Tack dots, the same loader as the extension's: the logo's four dots twinkling in turn. */
.brand-loader { display: block; position: relative; width: 20px; height: 28px; margin-bottom: var(--space-2); }
.brand-loader-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.42;
  transform: scale(0.92);
  will-change: transform, opacity;
  animation: tack-dot-twinkle 3.2s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
.brand-loader-dot:nth-child(1) { top: 0; left: 0; animation-delay: -1.6s; }
.brand-loader-dot:nth-child(2) { top: 14px; left: 0; animation-delay: 0s; }
.brand-loader-dot:nth-child(3) { top: 6px; left: 12px; animation-delay: -0.8s; }
.brand-loader-dot:nth-child(4) { top: 20px; left: 12px; background: #81c0fc; animation-delay: -2.4s; }
@keyframes tack-dot-twinkle {
  0%, 100% { opacity: 0.28; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1); }
}
.busy-title { font-size: var(--text-16); font-weight: 400; animation: fade-in 0.3s ease both; }
.busy-detail { font-size: var(--text-13); color: var(--ink-muted); font-variant-numeric: tabular-nums; min-height: 1.4em; }
.busy-cancel { margin-top: var(--space-2); min-height: 36px; padding: 6px 18px; }

/* ── Tray ────────────────────────────────────────────────────────────── */
.editor-tray {
  position: relative;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0 var(--space-4) var(--space-6);
}
/* Hover hint while no image is loaded: disabled controls get no pointer events, so the tray listens. */
.editor-tray.is-waiting { cursor: not-allowed; }
.editor-tray.is-waiting :disabled { cursor: not-allowed; }
.tray-hint {
  position: absolute;
  left: var(--space-2);
  width: max-content;   /* as wide as its words, like the hint under Original / Edited, not the whole tray */
  max-width: min(260px, calc(100% - 16px));
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  border-radius: 8px;
  background: var(--bg2);
  box-shadow: inset 0 0 0 1px var(--border-hi), 0 8px 24px rgba(0,0,0,0.5);
  color: var(--ink);
  font-size: var(--text-12);
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}
.tray-hint { text-wrap: balance; }   /* two even lines, never a word alone on the second */
.tray-hint.is-shown { opacity: 1; }
/* The same hint under the Original | Edited switch, which sits over the stage, outside the tray. */
#view-seg.is-waiting { cursor: not-allowed; }
#view-seg.is-waiting :disabled { cursor: not-allowed; }
.view-hint { top: calc(100% + var(--space-2)); left: auto; right: 0; width: max-content; max-width: 260px; }
@media (hover: none) { .tray-hint { display: none; } }
.tray-panel { display: flex; flex-direction: column; gap: var(--space-4); }
.tray-panel.is-active { animation: panel-in 0.28s var(--ease) both; }
.tray-note { font-size: var(--text-13); line-height: 1.5; color: var(--ink-muted); text-wrap: pretty; }
/* The tray's top is a header bar like the stage card's (.stage-bar): the same 16px padding round the 46px switcher, the
   same 1px bottom border and card background, so the two bars' bottom borders line up across the cards. The bar runs
   edge to edge (-16px margins cancel the tray's side padding; the tray's rounded overflow clips its top corners). The
   controls start 24px below it, where the image's top sits under the stage bar (the stage's 24px inner padding). */
.tray-bar { flex: none; margin: 0 calc(var(--space-4) * -1) var(--space-2); padding: var(--space-4); background: var(--bg-card); border-bottom: 1px solid var(--border); }
/* Side by side the tray is a fixed-height column: the bar on top and the tab's button at the bottom always show, and the
   tab's controls (.tray-scroll) scroll between them when the window is short. */
@media (min-width: 961px) { .editor-tray { overflow: hidden; } }
/* Each tab's Undo / Reset row (with Reset to original on the left, moved in by the script) sits right after the tab's
   last control, one 16px gap like the rows above it. The tab's big button (Save adjustments / Apply change) is pinned
   at the tray's bottom, the same place in both tabs: the panels fill the tray and the button takes the free space
   above it, with never less than 48px (16px gap + 32px) between the controls and the button. A short window
   scrolls the tray instead. */
.tray-panel { flex: 1 1 auto; min-height: 0; }
/* The scroll area runs out to the tray's right edge (the -16px / +16px pair cancels the tray's side padding), so its
   scrollbar sits in the tray's gutter, clear of the slider values, while the content keeps its exact position and width. */
.tray-scroll { display: flex; flex-direction: column; gap: var(--space-4); flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 calc(var(--space-4) * -1); padding: 0 var(--space-4); }
.tray-scroll > * { flex: none; }
.tray-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-8); }
.tray-actions, .tray-foot { display: flex; justify-content: flex-end; gap: var(--space-4); }
.tray-end .tray-actions { margin-left: auto; white-space: nowrap; }
.tray-foot { padding: 0; }
.tray-foot:not(:has(:not([hidden]))) { display: none; }
.tray-panel .editor-submit { margin-top: auto; flex: none; }
.tray-actions .editor-link, .tray-foot .editor-link { min-height: 24px; }

/* The label and value sit close over the line with a little air (4px), and the range is only as tall as its thumb needs. */
.slider { display: flex; flex-direction: column; gap: var(--space-1, 4px); }
.slider-row { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-ui); line-height: 1.3; }
/* Eight sliders stack tighter than the tray's usual rhythm, so the Adjust tab is shorter. */
#adjust-panel { gap: var(--space-4); }
.slider-row label { color: var(--ink); font-weight: 400; }
.slider-row output { color: var(--ink-muted); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; transition: color 0.15s; }
.slider.is-changed output { color: var(--accent-light); }
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  --fill: 50%;
}
input[type="range"]:disabled { cursor: default; opacity: 0.45; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--accent) var(--fill), rgba(240,235,227,0.12) var(--fill));
}
input[type="range"]::-moz-range-track { height: 5px; border-radius: 999px; background: rgba(240,235,227,0.12); }
input[type="range"]::-moz-range-progress { height: 5px; border-radius: 999px; background: var(--accent); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 4px rgba(1,63,244,0.18);
  transition: transform 0.15s, box-shadow 0.15s;
}
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px rgba(1,63,244,0.18); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(1,63,244,0.24); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--accent-light); }

/* A short hint for the next step; gone once an area is brushed. */
.area-status { font-size: var(--text-13); line-height: 1.5; color: var(--ink-muted); }
.field-label { font-size: var(--text-ui); font-weight: 400; color: var(--ink); margin-bottom: calc(var(--space-2) * -1); }
/* The label with a quiet Clear at the row's end, a text button like the panel's prompt Clear. */
.field-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: calc(var(--space-2) * -1); }
.field-head .field-label { margin-bottom: 0; }
.field-clear { padding: 0; border: 0; background: none; color: var(--ink-muted); font: inherit; font-size: var(--text-13); cursor: pointer; transition: color 0.2s; }
.field-clear[hidden] { display: none; }
@media (hover: hover) { .field-clear:hover { color: var(--ink); } }
.field-clear:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; border-radius: 4px; }

/* "What to change": the extension's From image direction field. */
.editor-textarea {
  display: block;
  width: 100%;
  min-height: 96px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-field);
  background: var(--bg2);
  color: var(--ink);
  font-size: var(--text-ui);
  font-weight: 300;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.editor-textarea::placeholder { color: var(--ink-muted); }
.editor-textarea:focus { border-color: rgba(240,235,227,0.22); box-shadow: 0 0 0 3px rgba(1,63,244,0.12); }
.editor-textarea:disabled { opacity: 0.5; }
.char-count-row { display: flex; justify-content: flex-end; margin-top: calc(var(--space-3) * -1); font-size: 12px; color: var(--ink-muted); }
.char-count { font-variant-numeric: tabular-nums; }

/* Apply change: the extension's Generate button. The filled accent button with a sparkle: it spends
   a generation. Save adjustments (Adjust tab) is the outlined one. */
.editor-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-shadow: 0 6px 24px rgba(1,63,244,0.26);
  width: 100%;
  min-height: 44px;   /* the right panel's main button (Add references / Generate): same height, side by side in the app */
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-field);
  background: var(--accent);
  color: #fff;
  font-size: var(--text-15);
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}
@media (hover: hover) { .editor-submit:hover:not(:disabled) { opacity: 0.88; } }
.editor-submit:active:not(:disabled) { transform: scale(0.99); }
.editor-submit svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.editor-submit:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
/* Apply change after a failed edit: the same button reads Retry, with the reset arrow. */
.editor-submit .retry-icon, .editor-submit.is-retry .apply-icon { display: none; }
.editor-submit.is-retry .retry-icon { display: block; }

/* Save adjustments is the same button as Apply change: each tab ends on its own main action. Saving is a
   local download and uses no generation. */

/* Working: the Tack dots in miniature (as the site's busy buttons) in place of the icon, lighting up in turn. */
@keyframes tack-mini-dots {
  0%, 100% { background-color: currentColor; box-shadow: 0 7px 0 var(--dot-dim), 6px 3px 0 var(--dot-dim), 6px 10px 0 var(--dot-dim); }
  25% { background-color: var(--dot-dim); box-shadow: 0 7px 0 var(--dot-dim), 6px 3px 0 currentColor, 6px 10px 0 var(--dot-dim); }
  50% { background-color: var(--dot-dim); box-shadow: 0 7px 0 currentColor, 6px 3px 0 var(--dot-dim), 6px 10px 0 var(--dot-dim); }
  75% { background-color: var(--dot-dim); box-shadow: 0 7px 0 var(--dot-dim), 6px 3px 0 var(--dot-dim), 6px 10px 0 currentColor; }
}
.is-working { cursor: progress; }
.is-working svg { display: none; }
.is-working::before {
  --dot-dim: color-mix(in srgb, currentColor 30%, transparent);
  content: '';
  flex: none;
  width: 4px; height: 4px;
  margin: 0 6px 10px 0;   /* the dots span 10 × 14px */
  border-radius: 50%;
  animation: tack-mini-dots 1.6s ease-in-out infinite;
}
.editor-submit.is-working:disabled, .editor-button.is-working:disabled { opacity: 0.7; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .is-working::before { animation: none; background-color: currentColor; box-shadow: 0 7px 0 currentColor, 6px 3px 0 currentColor, 6px 10px 0 currentColor; } }

.editor-message { font-size: var(--text-13); line-height: 1.5; color: var(--ink-muted); }
.editor-message:empty { display: none; }
.editor-message.is-error { color: var(--error-text); }
.editor-message.is-new { animation: fade-in 0.3s ease both; }
.editor-message a { color: var(--accent-light); text-underline-offset: 3px; }

/* ── Save ────────────────────────────────────────────────────────────── */
.save-menu { position: relative; }
.save-panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 260px;
  padding: var(--space-4);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-card);
  background: #1a1814;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  transform-origin: top right;
  animation: pop-in 0.2s var(--ease) both;
}
.save-panel .seg { display: flex; }
.save-note { font-size: var(--text-12); color: var(--ink-muted); line-height: 1.5; }
.save-confirm { width: 100%; }

/* ── Signed out ──────────────────────────────────────────────────────── */
.editor-signin {
  max-width: 480px;
  margin: var(--space-12) auto 0;
  padding: var(--space-10) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  animation: rise-in 0.35s var(--ease) both;
}
.editor-signin h2 { font-family: 'Cormorant Garamond', serif; font-size: 40px; font-weight: 300; letter-spacing: -0.02em; }
.editor-signin p { color: var(--ink-muted); font-size: var(--text-ui); margin-bottom: var(--space-3); }

/* ── Out of generations: the extension's "You're on a roll" card ─────── */
.upgrade-card {
  position: fixed;
  width: min(420px, calc(100vw - 32px));
  max-height: 90vh;
  max-height: 90dvh;
  margin: auto;
  padding: var(--space-8) var(--space-6);   /* 32px above the ✦ and under the last buttons */
  border: 1px solid var(--border-hi);
  border-radius: 20px;
  background: var(--bg-card);
  color: var(--ink);
  box-shadow: 0 32px 120px rgba(0,0,0,0.7);
  text-align: center;
  overflow-y: auto;
}
.upgrade-card[open] { display: flex; flex-direction: column; align-items: center; animation: pop-in 0.24s var(--ease) both; }
.upgrade-card::backdrop { background: rgba(5,4,3,0.72); backdrop-filter: blur(4px); animation: fade-in 0.24s ease both; }
html:has(.upgrade-card[open]) { overflow: hidden; scrollbar-gutter: stable; }
.upgrade-close {
  position: absolute; top: var(--space-2); right: var(--space-2);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.upgrade-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (hover: hover) { .upgrade-close:hover { color: var(--ink); background: rgba(240,235,227,0.08); } }
.upgrade-star { font-size: 28px; line-height: 21px;   /* the ✦'s own height, so the 32px above it is what shows */ color: var(--accent-light); margin-bottom: var(--space-4); animation: upgrade-pulse 2s ease-in-out infinite; }
@keyframes upgrade-pulse { 50% { opacity: 0.7; transform: scale(1.08); } }
.upgrade-title { font-family: 'Cormorant Garamond', serif; font-size: 44px; font-weight: 300; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: var(--space-2); text-wrap: balance; }
.upgrade-title em { font-style: italic; color: var(--accent-light); }
.upgrade-sub { color: var(--ink-muted); font-size: var(--text-15); line-height: 1.6; margin-bottom: var(--space-6); text-wrap: balance; }
.upgrade-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--space-6);
  border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: var(--text-16); font-weight: 500; text-decoration: none;
  transition: opacity 0.15s, transform 0.15s;
}
@media (hover: hover) { .upgrade-cta:hover { opacity: 0.88; transform: translateY(-1px); } }
/* The second plan reads as a link, one step below the main button. */
.upgrade-secondary {
  margin-top: var(--space-4);
  color: var(--ink); font-size: var(--text-14); line-height: 1;
  text-decoration: underline; text-decoration-color: rgba(240,235,227,0.32); text-underline-offset: 4px;
  transition: color 0.15s, text-decoration-color 0.15s;
}
@media (hover: hover) { .upgrade-secondary:hover { color: var(--accent-light); text-decoration-color: currentColor; } }
.upgrade-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-6); }
.upgrade-pill {
  padding: 10px var(--space-4);
  border: 1px solid var(--border-hi); border-radius: 999px;
  background: transparent; color: var(--ink-muted);
  font-family: inherit; font-size: var(--text-13); line-height: 1; text-decoration: none;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
@media (hover: hover) { .upgrade-pill:hover { color: var(--ink); border-color: rgba(240,235,227,0.36); } }
.upgrade-close:focus-visible, .upgrade-cta:focus-visible, .upgrade-secondary:focus-visible, .upgrade-pill:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.upgrade-card [hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .upgrade-star { animation: none; } }

/* ── Picker: the Library's board modal ───────────────────────────────── */
.picker {
  width: min(720px, calc(100vw - 32px));
  max-height: 90vh;
  max-height: 90dvh;
  margin: auto;
  padding: var(--space-6);
  border: 1px solid var(--border-hi);
  border-radius: 20px;
  background: var(--bg-card);
  color: var(--ink);
  box-shadow: 0 32px 120px rgba(0,0,0,0.7);
  overflow: hidden;
}
.picker[open] { display: flex; flex-direction: column; gap: var(--space-4); animation: pop-in 0.24s var(--ease) both; }
/* Never shorter than two rows of loading placeholders, so loading
   and short content never shrink it. More content grows it up to 90% of the window; only then
   does the list scroll inside. */
.picker[open] { min-height: min(496px, 90vh); min-height: min(496px, 90dvh); }
/* While the picker is open the page behind it does not scroll (the gutter stays, so nothing shifts). */
html:has(.picker[open]) { overflow: hidden; scrollbar-gutter: stable; }
.picker::backdrop { background: rgba(5,4,3,0.72); backdrop-filter: blur(4px); animation: fade-in 0.24s ease both; }
.picker-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.picker-title { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 300; letter-spacing: -0.02em; line-height: 1; }
.picker-close {
  width: 36px; height: 36px;
  border: 0; border-radius: 999px;
  background: transparent;
  color: var(--ink-muted);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
@media (hover: hover) { .picker-close:hover { color: var(--ink); background: rgba(240,235,227,0.08); } }
.picker > .seg { align-self: flex-start; }
.picker-body { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.picker-pane.is-active { flex: 1 0 auto; display: flex; flex-direction: column; }
/* A fade, not a slide: moving content inside the scrolling list would show a scrollbar for a moment. */
.picker-pane.is-active { animation: fade-in 0.28s ease both; }
.picker-drop { width: 100%; flex: 1; }
.picker-drop.is-dragging { border-color: var(--accent-light); background: rgba(143,190,247,0.06); }
.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-2);
}
.picker-tile {
  position: relative;
  aspect-ratio: 1;
  max-width: 100%;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(240,235,227,0.04);
  overflow: hidden;
  cursor: pointer;
  animation: tile-in 0.35s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 25ms);
  transition: border-color 0.2s, transform 0.2s;
}
.picker-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s var(--ease); }
@media (hover: hover) { .picker-tile:hover { border-color: var(--border-hi); transform: translateY(-2px); } .picker-tile:hover img { transform: scale(1.04); } }
.picker-tile.is-loading { background: linear-gradient(90deg, rgba(240,235,227,0.03) 0%, rgba(240,235,227,0.08) 50%, rgba(240,235,227,0.03) 100%) 0 0 / 200% 100%; animation: shimmer 1.2s linear infinite; cursor: default; }
.picker-boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-2); }
.picker-board {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(240,235,227,0.03);
  text-align: left;
  cursor: pointer;
  animation: tile-in 0.35s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 30ms);
  transition: border-color 0.2s, background 0.2s;
}
@media (hover: hover) { .picker-board:hover { border-color: var(--border-hi); background: rgba(240,235,227,0.06); } }
.picker-board.is-loading { cursor: default; }
.picker-board.is-loading .picker-board-copy { flex: 1; gap: var(--space-2); }
.picker-board.is-loading .picker-board-cover,
.skeleton-line { background: linear-gradient(90deg, rgba(240,235,227,0.03) 0%, rgba(240,235,227,0.08) 50%, rgba(240,235,227,0.03) 100%) 0 0 / 200% 100%; animation: shimmer 1.2s linear infinite; }
.skeleton-line { display: block; width: 70%; height: 12px; border-radius: 6px; }
.skeleton-line.is-short { width: 40%; }
@media (hover: hover) { .picker-board.is-loading:hover { border-color: var(--border); background: rgba(240,235,227,0.03); } }
.picker-board-cover { width: 64px; height: 48px; flex: none; border-radius: 8px; background: rgba(240,235,227,0.06) center / cover no-repeat; }
.picker-board-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.picker-board-name { font-size: var(--text-ui); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-board-count { font-size: var(--text-13); color: var(--ink-muted); }
.picker-back { margin-bottom: var(--space-2); }
.picker-more { margin: var(--space-4) auto 0; display: flex; }
.picker-status { font-size: var(--text-13); color: var(--ink-muted); padding-top: var(--space-3); text-align: center; }
.picker-status:empty { display: none; }
/* An empty list or a failed load: the pane has nothing to show, so the text takes the body's free
   space and sits in its middle, both ways, instead of at the top under an empty pane. */
.picker-body:has(.picker-status:not(:empty)) .picker-pane.is-active { flex: 0 0 auto; }
.picker-status:not(:empty) { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding-top: 0; }
.picker-status.is-error { color: var(--error-text); }

/* ── Motion ──────────────────────────────────────────────────────────── */
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.97); } }
@keyframes tile-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
@keyframes reveal { from { opacity: 0.25; filter: blur(6px); transform: scale(0.995); } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .brand-loader-dot { animation: none !important; opacity: 1; transform: none; }
}

/* ── Narrow screens: image first, tools under it ─────────────────────── */
@media (max-width: 960px) {
  .editor-page { display: block; height: auto; padding-bottom: var(--space-12); }
  .editor-workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .editor-tray { overflow: visible; }
  .tray-scroll { overflow: visible; }
  .stage { flex: none; height: clamp(300px, 62vh, 640px); }
}
@media (max-width: 600px) {
  :root { --nav-gutter: 16px; }
  .editor-page { padding-top: calc(var(--nav-height) + var(--space-6)); }
  .editor-header { align-items: flex-start; flex-direction: column; }
  .editor-header-actions { width: 100%; }
  .editor-header-actions > * { flex: 1 1 0; }
  .editor-header-actions .editor-button { width: 100%; }
  /* The stage takes the image's shape, so a wide photo has no empty band around it. */
  .stage { padding: var(--space-3); height: auto; aspect-ratio: var(--image-ratio, 4 / 3); min-height: 240px; max-height: 70vh; }
  .stage-bar { padding: var(--space-2) var(--space-3); }
  /* Undo edit / Redo edit stay on one line under the image name; when the
     Original / Edited switch doesn't fit beside them it takes a line of its own, on the right. */
  .stage-tools { width: 100%; flex-wrap: wrap; column-gap: var(--space-4); row-gap: var(--space-2); }
  .stage-tools .editor-link { white-space: nowrap; }
  .stage-tools .seg { margin-left: auto; }
  .editor-textarea { font-size: var(--text-16); }
  .stage-name { max-width: 20ch; }
  .picker { padding: var(--space-4); }
  .picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .save-panel { width: min(260px, calc(100vw - 32px)); }
}
/* 320px: the three buttons still fit on one line at 13px, 12px apart. */
@media (max-width: 360px) {
  .stage-tools { column-gap: var(--space-3); }
  .stage-tools .editor-link { font-size: var(--text-13); gap: var(--space-1); }
}