/* ====================================================================
   srk-editor — on top of Editage's stylesheet (editage.css, synced).
   Only what srk-editor does differently lives here: the print behind,
   the window's size, the marks in the corner, the empty window, calm.
   ==================================================================== */

/* ---- the print behind ---- */
body{background:#20262a}
#backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;background:#20262a;isolation:isolate}
#backdrop img{position:absolute;max-width:none;opacity:0;transition:opacity 2.8s ease-in-out;
  transform-origin:50% 50%;will-change:opacity}
#backdrop img.on{opacity:1}
/* 899:9574 — the veil over the print while editing. Three layers straight
   in #backdrop (an isolated stacking context), so each blends with the
   print under it; each fades on its own, because fading a wrapper would
   isolate them and the blend would jump. Calm lifts them as the window
   draws in, and they settle back as it returns. */
#backdrop .veil{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity 1.1s cubic-bezier(.65,0,.35,1)}
#backdrop .mono{background:#293B3C;mix-blend-mode:color}
#backdrop .shade{background:#293B3C;opacity:.5}
#backdrop .paper{background:#D9D7D2;mix-blend-mode:multiply}
body.unveiled #backdrop .veil{opacity:0}
@media (prefers-reduced-motion:reduce){#backdrop .veil{transition:none}}
/* While calm the print breathes: a slow push in and back, too slow to watch. */
body.calm #backdrop img.on{animation:srk-drift 70s ease-in-out infinite alternate}
@keyframes srk-drift{from{transform:scale(1)}to{transform:scale(1.06) translate(-1%,-.6%)}}
@media (prefers-reduced-motion:reduce){body.calm #backdrop img.on{animation:none}#backdrop img{transition:none}}

/* ---- the window ---- */
/* 892:7611 / 892:7050 / 896:9567: the window over the print, and the row
   of recent edits 8 under it — 32 clear above and at the sides and 16 below
   at 1200 x 800 (a 1136 x 696 window), then 80% of the screen, never past
   1680 x 1080; beyond that the print simply shows more. The window and the
   row are one block, centred. */
#flyout{z-index:10;padding:32px 32px 16px;background:none;flex-direction:column;gap:var(--3);
  --win-w:min(calc(100vw - 64px), max(1136px, 80vw), 1680px)}
#flyout.editing .panel{
  width:var(--win-w);
  height:min(calc(100vh - 104px), max(696px, 80vh), 1080px);flex:none;
  box-shadow:0 18px 60px rgba(20,26,30,.28);
  transition:box-shadow var(--fade, .26s) ease-out}

/* ---- the marks: the logogram and the lotus, where Editage has Back ---- */
/* 892:7705 — the two marks hold the ends of the row, 18 each, with nothing
   between them: no bumper, no label. */
#flyout .editor .top .bumper{display:none}
#flyout .editor .marks{display:flex;align-items:center;justify-content:space-between;flex:1 1 auto;width:100%}
#flyout .editor .marks img{width:18px;height:18px}
/* 846:21472, as Editage's zoom bar (892:7699): under the pointer the icon
   takes a ground of its own, one step brighter, reaching 4 past it while
   the marks keep the spacing they are drawn with. The ground is the
   button's own — padding out, an equal negative margin back — because a
   spread shadow rounds its corners to 8 (radius + spread) and everything
   here is drawn at 4. */
#flyout .editor .lotus{display:flex;width:18px;height:18px;box-sizing:content-box;padding:4px;margin:-4px;
  color:var(--100);border-radius:var(--r);transition:background .12s ease-out}
#flyout .editor .lotus .i{width:18px;height:18px}
#flyout .editor .lotus:hover{background:var(--500)}

/* ---- the empty window (918:4854) ---- */
/* With nothing open there is nothing to edit: both columns go and the
   window is bare paper, with 36:655's drop zone at its centre and the lotus
   alone in the corner. Everything comes back with the first picture. */
#flyout .panel{position:relative}
/* .hist.open too: on a phone Editage opens the column, and that rule is the
   more specific one. */
#flyout.empty .hist,#flyout.empty .hist.open,#flyout.empty .side{display:none}
#flyout.empty .img{background:var(--300);padding:var(--8) var(--8) 64px}
/* 918:4939 — the wallpaper fills the window, washed into the paper as it
   goes up so the card at the centre always has quiet ground behind it. */
#flyout .srk-plate{display:none}
#flyout.empty .srk-plate{position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none;background:var(--300)}
#flyout.empty .srk-plate img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;
  opacity:0;transition:opacity .9s ease-out}
#flyout.empty .srk-plate img.on{opacity:1}
#flyout.empty .srk-plate .wash{position:absolute;inset:0;background:linear-gradient(to top,rgba(217,215,210,0),var(--300))}
@media (prefers-reduced-motion:reduce){#flyout.empty .srk-plate img{transition:none}}
/* 998:5784 — the card: what this is, the logogram, the drop zone; 16 in,
   48 between. */
#flyout .srk-card{display:none}
#flyout.empty .srk-card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  gap:var(--8);max-width:100%;padding:var(--5);border-radius:var(--r);background:var(--400);overflow:hidden}
#flyout.empty .srk-card .says{width:348px;max-width:100%;margin:0;font-family:'Platypi',Georgia,serif;font-weight:300;
  font-size:18px;line-height:1.25;letter-spacing:-.18px;text-align:center;color:var(--100)}
#flyout.empty .srk-card .mark{width:24px;height:24px;display:block}
#flyout .img .srk-drop{display:none}
#flyout.empty .img .srk-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:348px;max-width:100%;height:140px;padding:var(--6);border:1px dashed var(--100-35);border-radius:var(--r);
  background:rgba(229,226,221,.9);color:var(--100);font-size:14px;letter-spacing:-.14px;line-height:normal;cursor:pointer;
  transition:background .15s,border-color .15s}
#flyout.empty .img .srk-drop:hover,body.dropping #flyout.empty .img .srk-drop{background:var(--500);border-color:var(--100-50)}
#flyout .img .srk-drop .dim{color:var(--100-50)}
#flyout .img .srk-drop.bad [data-t="note"]{color:#9a3b2c}
/* The lotus, where the editor's marks would be: 16 in from the corner,
   a 24 tile of paper with the 16 icon in it. */
#flyout .calm-empty{display:none}
#flyout.empty .calm-empty{position:absolute;top:var(--5);right:var(--5);z-index:2;
  display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;
  border-radius:var(--r);background:var(--400);color:var(--100);
  transition:background .12s ease-out,box-shadow .12s ease-out,opacity var(--fade, .26s) ease-out}
/* The tile is already 24 with the 4 radius: under the pointer it changes
   only its ground. */
#flyout.empty .calm-empty:hover{background:var(--500)}
#flyout.empty .calm-empty .i{width:16px;height:16px}
#flyout.empty.calm-fade .calm-empty{opacity:0;pointer-events:none}
#flyout.empty .viewctl{opacity:0;pointer-events:none}
body.dropping:not(:has(#flyout.empty)) #flyout .panel{outline:2px dashed var(--accent);outline-offset:6px}

/* ---- calm mode ---- */
/* The contents' fade, the clip and the pill are one move on one clock, so
   shell.js owns all three (opacity here would win over them: a CSS
   transition outranks an animation). Left here: what does not move. */
#flyout.calm-fade .panel > .body{pointer-events:none}
#flyout.calm-fade .panel{box-shadow:none}
/* Faded out, the contents are no longer painted — so every frame of the
   clip repaints a flat rectangle instead of the whole editor under it.
   visibility, not content-visibility: the contents keep their boxes, so the
   editor's ResizeObserver never sees the picture area go to nothing and the
   zoom and pan come back exactly as they were left. */
#flyout.calm-blank .panel > .body{visibility:hidden}
#flyout.calm-gone{visibility:hidden}
#flyout.calm-gone .panel{visibility:hidden}

/* 926:16580 / 892:9462 — the pill: three 18px marks on --300, 120 x 34, 8
   and 12 in, with the bottom stroke every panel has (1px, 15% ink). The
   picture mark opens the wallpaper on Editage; the lotus comes back. */
#calm{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;pointer-events:none}
#calm[hidden]{display:none}
#calm .pill{display:flex;align-items:center;justify-content:space-between;width:120px;height:34px;
  padding:var(--3) var(--4);border-radius:var(--r);
  background:var(--300);color:var(--100);border-bottom:1px solid var(--100-15);
  opacity:0;pointer-events:none}                /* its arrival is animated in shell.js */
#calm.on .pill{opacity:1;pointer-events:auto}
#calm .pill .mark{flex:none;width:18px;height:18px;display:block}
#calm .pill a,#calm .pill button{flex:none;display:flex;width:18px;height:18px;box-sizing:content-box;
  padding:4px;margin:-4px;border-radius:var(--r);
  color:var(--100);transition:background .12s ease-out}
#calm .pill .i{width:18px;height:18px}
/* The same ground under the pointer as everywhere else, and the same 4. */
#calm .pill a:hover,#calm .pill button:hover{background:var(--500)}

/* ---- the files: recent edits under the window (896:9567) ---- */
#files{display:flex;gap:var(--3);width:var(--win-w);max-width:100%;height:48px;flex:none;overflow:hidden;
  transition:opacity var(--fade, .26s) ease-out}
#files .file{position:relative;flex:none;width:48px;height:48px;border:1px solid var(--300);border-radius:var(--r);
  overflow:hidden;background:var(--editor-ground)}
#files .file-open{display:block;width:100%;height:100%;padding:0}
#files .file-open img{width:100%;height:100%;object-fit:cover;border-radius:3px;display:block}
#files .file:not(.on) .file-open img{opacity:.88;transition:opacity .15s}
#files .file:hover .file-open img{opacity:1}
/* The file in the window: its frame drawn in the lightest ink, twice. */
#files .file.on{border-color:var(--500);box-shadow:0 0 0 1px var(--500)}
#files .file-open:focus-visible{outline:1px solid var(--accent);outline-offset:-2px}
#files .file-rm{position:absolute;top:2px;right:2px;display:flex;align-items:center;justify-content:center;
  width:16px;height:16px;padding:0;border-radius:2px;background:rgba(217,215,210,.92);color:var(--100);opacity:0;transition:opacity .12s}
#files .file-rm .i{width:12px;height:12px}
#files .file:hover .file-rm,#files .file:focus-within .file-rm{opacity:1}
/* 896:9570 — the +: 48 square on --300 at 90%, a 24px plus. */
#files .file-new{flex:none;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;
  border:1px solid var(--300);border-radius:var(--r);background:rgba(217,215,210,.9);color:var(--100);transition:background .15s}
#files .file-new .i{width:24px;height:24px}
#files .file-new:hover{background:var(--400)}
#flyout.calm-fade #files{opacity:0;pointer-events:none}