/* ---- Drive's editors (pages/editor-shell.js + image-editor.js, video-editor.js, pdf-editor.js) ----
   The phone draws the same: components/editors/*. The stage and its bars are
   dark whatever the theme (colours are judged against black); the editor's
   own candy colour arrives as --ed-c. */

.ed-shell {
  --ed-stage: #0B0B0C; --ed-bar: #141416; --ed-raised: #1F1F23; --ed-border: rgba(255,255,255,0.14);
  --ed-ink: #F2F2F2; --ed-dim: rgba(242,242,242,0.62); --ed-faint: rgba(242,242,242,0.38);
  /* In the Media editor's pop-up, in the page's place: the row and the box stay under it (21 Oct 2026). */
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--ed-stage); color: var(--ed-ink); overflow: hidden;
}
.ed-shell svg, .ed-pick svg { stroke: currentColor; fill: none; stroke-width: 36; }
.ed-top {
  display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
  background: var(--ed-bar); flex: none;
}
.ed-btn {
  width: 44px; height: 44px; flex: none; border-radius: 16px; border: 1px solid var(--ed-border);
  background: var(--ed-raised); color: var(--ed-ink); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 90ms ease-out, background 120ms;
}
.ed-btn svg { width: 22px; height: 22px; }
.ed-btn:hover:not(:disabled) { background: #2A2A30; }
.ed-btn:active:not(:disabled) { transform: scale(0.95); }
.ed-btn:disabled { opacity: 0.35; cursor: default; }
.ed-btn.on { background: var(--ed-c); border-color: var(--ed-c); color: #fff; }
.ed-btn:focus-visible, .ed-tool:focus-visible { outline: 2px solid var(--ed-c); outline-offset: 2px; }
.ed-titlebox { flex: 1; min-width: 0; }
.ed-title { font-size: 15px; line-height: 1.25; font-weight: 800; overflow-wrap: break-word; }
.ed-sub { font-size: 12.5px; color: var(--ed-dim); overflow-wrap: break-word; }
.ed-sub:empty { display: none; }
.ed-extra { display: flex; gap: 6px; }
.ed-savebox { flex: none; min-width: 92px; display: flex; justify-content: flex-end; align-items: center; }
.ed-save.arc-candy { min-height: 44px; padding: 0 20px; font-size: 15px; margin-bottom: 5px; }
.ed-save.arc-candy:disabled { opacity: 0.45; cursor: default; transform: none; }
.ed-saving { width: 22px; height: 22px; margin-right: 30px; }

/* Save, opened in place under the top bar */
/* The stage and what stands over its top: Save's choice and the "Saved" note (UI review, 21 Oct 2026: opening Save
   shrank the picture to a few pixels on a short phone, and the note covered the new name). */
.ed-stagebox { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.ed-ask {
  position: absolute; left: 0; right: 0; top: 0; z-index: 6; box-shadow: 0 10px 18px rgba(0,0,0,0.35);
  display: grid; grid-template-rows: 0fr; background: var(--ed-bar); padding: 0 12px;
  transition: grid-template-rows 160ms ease-in, padding 160ms ease-in;
}
.ed-ask > * { overflow: hidden; }
.ed-ask.open { grid-template-rows: 1fr; padding-bottom: 10px; transition: grid-template-rows 220ms cubic-bezier(.2,.9,.3,1.2), padding 220ms; }
.ed-ask-btns { display: flex; gap: 10px; padding-top: 4px; min-height: 0; }
.ed-ask-btns .arc-candy { flex: 1; min-height: 44px; font-size: 15px; }
.ed-ask-btns .plainish { box-shadow: 0 5px 0 rgba(255,255,255,0.14); border: 1px solid var(--ed-border); }
.ed-ask-line { text-align: center; color: var(--ed-dim); font-size: 12.5px; min-height: 0; }
.ed-ask:not(.open) .ed-ask-line { height: 0; }
.ed-ask:not(.open) { box-shadow: none; }
.ed-ask.open .ed-ask-line { padding-top: 4px; }
.ed-flash {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 18px;
  background: var(--ed-raised); border: 1px solid var(--ed-border); font-weight: 700; font-size: 14px; white-space: nowrap;
  animation: ed-pop 220ms cubic-bezier(.2,.9,.3,1.3);
}
.ed-flash svg { width: 18px; height: 18px; color: #1FC98F; stroke-width: 48; }
@keyframes ed-pop { from { transform: translate(-50%, -6px) scale(0.92); opacity: 0; } to { transform: translate(-50%, 0) scale(1); opacity: 1; } }

.ed-stage { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.ed-panel { flex: none; background: var(--ed-bar); border-top: 1px solid var(--ed-border); padding: 10px 12px 4px; }
.ed-tools {
  flex: none; display: flex; justify-content: center; gap: 10px; padding: 8px 12px 10px;
  background: var(--ed-bar);
}
.ed-tool {
  width: 56px; height: 44px; border-radius: 16px; border: 1px solid var(--ed-border); background: var(--ed-raised);
  color: var(--ed-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform 90ms ease-out, background 120ms;
}
.ed-tool svg { width: 22px; height: 22px; }
.ed-tool.on { background: var(--ed-c); border-color: var(--ed-c); color: #fff; }
.ed-tool:active { transform: scale(0.95); }

/* small shared parts for the panels */
/* A row of chips wraps onto a second line rather than running past the panel's edge with half a label showing and no
   way to reach the rest with a mouse (UI review, 21 Oct 2026). */
.ed-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-bottom: 6px; }
.ed-chip {
  flex: none; height: 44px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--ed-border);
  background: var(--ed-raised); color: var(--ed-ink); font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.ed-chip.on { background: var(--ed-ink); color: var(--ed-stage); border-color: var(--ed-ink); }
.ed-swatch {
  flex: none; width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25); cursor: pointer; padding: 0;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.25);
}
.ed-swatch.on { outline: 3px solid var(--ed-ink); outline-offset: 2px; }
.ed-slider { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.ed-slider label { width: 92px; flex: none; font-size: 13.5px; font-weight: 700; color: var(--ed-dim); }
.ed-slider input[type=range] { flex: 1; accent-color: var(--ed-c); height: 28px; }
.ed-slider output { width: 40px; text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ed-dim); }
.ed-note { color: var(--ed-dim); font-size: 13px; text-align: center; padding: 4px 0 6px; }

/* the picker (no file yet) */
.ed-pick { position: relative; flex: 1; min-height: 0; overflow-y: auto; color: var(--ink); }
.ed-pick-top { display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 16px 6px; max-width: 980px; margin: 0 auto; }
/* On the theme's page (the picker): its surface on a lip, so it reads as a button in dark themes too. */
.ed-btn.light { background: var(--surface-solid, var(--surface)); border-color: var(--border-strong, var(--border)); border-bottom-width: 3px; color: var(--ink); }
.ed-btn.light svg { stroke-width: 44; }
.ed-btn.light:hover { background: var(--tint, var(--accent-soft)); }
.ed-pick-title { margin: 0; font-size: 22px; font-weight: 800; font-family: var(--font-display, inherit); }
.ed-pick-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px;
  padding: 12px 16px calc(40px + env(safe-area-inset-bottom)); max-width: 980px; margin: 0 auto;
}
.ed-pick-cell { display: flex; flex-direction: column; gap: 2px; border: none; background: none; padding: 0; text-align: left; cursor: pointer; color: var(--ink); min-width: 0; }
.ed-pick-art {
  position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.ed-pick-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ed-pick-cell:hover .ed-pick-art { outline: 2px solid var(--ed-c); outline-offset: 1px; }
.ed-pick-play { position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; border-radius: 12px; background: rgba(0,0,0,0.55); color: #fff; display: flex; align-items: center; justify-content: center; }
.ed-pick-play svg { width: 13px; height: 13px; fill: #fff; stroke: none; }
.ed-pick-name { font-size: 12.5px; font-weight: 700; margin-top: 4px; overflow-wrap: break-word; }
.ed-pick-sub { font-size: 11.5px; color: var(--ink-muted); }
.ed-pick-wait, .ed-pick-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 60px 20px; text-align: center; }
.ed-pick-empty-title { font-size: 18px; font-weight: 800; }
.ed-pick-empty-line { color: var(--ink-muted); font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .ed-ask, .ed-ask.open { transition: none; }
  .ed-flash { animation: none; }
}

/* The editor's bars meet the screen's edges as they are: no faded top or foot over them. The row and the box
   stay under it (21 Oct 2026, the owner: a page "without the whole bottom bar and text box thing … should never
   happen in app"). */
/* The picker scrolls like every page, so it keeps the screen's faded top under the rail's menu key. */
.app-shell:has(> .screen > .ed-shell) > .screen { -webkit-mask-image: none; mask-image: none; }
/* A <button> does not stretch what is in it: the picker's squares (and the
   names under them, wrapped in the cell) are as wide as the cell by saying so. */
.ed-pick-cell { align-items: stretch; overflow: hidden; }
.ed-pick-art { width: 100%; }

/* ---- the Media editor (pages/media-editor.js): the picker's chips, a kind's badge, a file it cannot open ---- */
.md-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 16px 4px; max-width: 980px; margin: 0 auto; }
.md-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 22px;
  border: 1px solid var(--border-strong, var(--border)); background: var(--surface-solid, var(--surface)); color: var(--ink);
  font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 90ms ease-out, background 120ms;
}
.md-chip svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 40; }
.md-chip:hover:not(.on) { background: var(--tint, var(--accent-soft)); }
.md-chip:active { transform: scale(0.96); }
.md-chip.on { background: var(--k); border-color: var(--k); color: #fff; }
.md-chip:focus-visible { outline: 2px solid var(--k); outline-offset: 2px; }
.md-badge { position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; border-radius: 12px; background: var(--k); color: #fff; display: flex; align-items: center; justify-content: center; }
.md-badge svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 48; }
.ed-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 0 32px; text-align: center; }
.ed-lost { font-size: 16px; font-weight: 700; }

/* In the app's page (the Media editor's pop-up): the editor starts below the rail's menu key, like every page
   (shell.css; 52px + the notch), its top corners rounded where the page's backdrop meets it. */
.app-shell > .screen > .ed-shell { margin-top: calc(52px + env(safe-area-inset-top)); border-radius: 18px 18px 0 0; }
.app-shell > .screen > .ed-shell > .ed-top { padding-top: 8px; }
.app-shell > .screen > .ed-pick > .ed-pick-top { padding-top: calc(52px + env(safe-area-inset-top)); }
/* A narrow window: the file's name has a line of its own under Back, Undo, Redo and Save, so it shows whole
   across the width instead of four words deep beside them (the phone's EditorShell does the same). */
@media (max-width: 519px) {
  .ed-top { flex-wrap: wrap; row-gap: 4px; }
  .ed-titlebox { order: 9; flex: 1 0 100%; padding: 0 4px 2px; }
  .ed-savebox { margin-left: auto; }
}
/* A PDF shows its page from the top left (its title), not a crop of the middle. */
.ed-pick-art.md-page img { object-position: left top; }
.md-empty-btn.arc-candy { margin-top: 8px; min-height: 46px; min-width: 180px; }