/* The studio's own tokens and manner: paper and ink, hairlines, wide-tracked labels in the accent, a
   Cormorant display, and pill controls that invert on hover — the same page, with a tool on it. */
#darkroom {
  --ink: #0e0e10;
  --paper: #f5f1ea;
  --muted: #6b6760;
  --line: rgba(14, 14, 16, .14);
  --accent: #8b6f47;
  --accent-light: #d7b584;
  --stage: #17171a;
  --ease: cubic-bezier(.19, 1, .22, 1);

  /* On the dark chrome that floats over an image. */
  --glass: rgba(14, 14, 16, .62);
  --glass-line: rgba(245, 241, 234, .16);
  --glass-text: rgba(245, 241, 234, .92);
  --glass-muted: rgba(245, 241, 234, .5);

  --sheet-height: 46vh;
  --rail-width: 232px;
  --panel-width: 312px;
  --toolbar-height: 56px;
}
#darkroom, #darkroom * { box-sizing: border-box; }
#darkroom [hidden] { display: none !important; }
#darkroom {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
#darkroom button,
#darkroom select,
#darkroom input { font: inherit; color: inherit; }
#darkroom .kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 22px;
  font-weight: 400;
}


/* The hairline the studio puts before a label. */
#darkroom .kicker::before {
  content: "";
  width: 52px;
  height: 1px;
  background: currentColor;
  flex: none;
}
#darkroom .link {
  background: none;
  border: none;
  border-bottom: 1px solid currentColor;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--accent);
  transition: opacity .45s var(--ease);
}
#darkroom .link:hover { opacity: .65; }
#darkroom .link.small { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }


/* The page around the tool ---------------------------------------------- */

#darkroom .masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 30px clamp(20px, 4vw, 56px) 0;
}
#darkroom .wordmark {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  letter-spacing: .01em;
  text-decoration: none;
  color: var(--ink);
}
#darkroom .wordmark span { color: var(--muted); }
#darkroom .masthead nav a {
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
#darkroom .masthead nav a:hover { color: var(--ink); border-color: var(--line); }
#darkroom .intro { padding: clamp(40px, 7vw, 84px) clamp(20px, 4vw, 56px) 30px; max-width: 900px; }
#darkroom .intro h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(54px, 9vw, 132px);
  line-height: .9;
  letter-spacing: -.028em;
  margin: 0 0 26px;
}
#darkroom .lede { margin: 0; max-width: 58ch; font-size: 15px; line-height: 1.75; color: var(--muted); }
#darkroom .colophon {
  margin: 40px clamp(20px, 4vw, 56px) 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 62ch;
}
#darkroom .colophon a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--line); }


/* Until an image is open, the page is an invitation to drop one and nothing else. Once one is open but
   the editing view has been left, the toolbar stays with the page so the way back is one click. */
body:not(.has-image) #darkroom .toolbar,
body:not(.editing) #darkroom .sheet { display: none; }


/* The workspace --------------------------------------------------------- */

#darkroom .workspace { padding: 0 clamp(20px, 4vw, 56px); }
#darkroom .stage {
  position: relative;
  background: var(--stage);
  min-height: 64vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
#darkroom .dropzone { text-align: center; padding: clamp(40px, 8vw, 86px) 28px; color: var(--glass-text); max-width: 520px; }
#darkroom .dropzone .kicker { color: var(--accent-light); justify-content: center; }
#darkroom .drop-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 300;
  line-height: 1.15;
  margin: 0 0 18px;
}
#darkroom .drop-title em { font-style: italic; color: var(--accent-light); }
#darkroom .drop-note { font-size: 12px; line-height: 1.85; color: rgba(245, 241, 234, .48); margin: 0 0 8px; }
#darkroom .dropzone .link { color: var(--accent-light); }
#darkroom .stage.dragging { outline: 1px solid var(--accent-light); outline-offset: -10px; }
#darkroom .viewer { position: relative; margin: auto; line-height: 0; }
#darkroom .viewer canvas { display: block; max-width: 100%; height: auto; }

/* Centring an image larger than the window would put its top-left corner out of reach: a flex container
   cannot be scrolled back past a centred child. Zoomed, it is aligned to the corner and centred by auto
   margins instead, which centre it along a side where it is smaller than the view and fall to nothing
   along a side where it is larger — so every edge can still be scrolled to. */
#darkroom .stage.actual { align-items: flex-start; justify-content: flex-start; }
#darkroom .viewer.actual { margin: auto; }
#darkroom .viewer.actual canvas { max-width: none; }
#darkroom .stage { overscroll-behavior: contain; }
body.editing #darkroom .stage.actual { cursor: grab; }
#darkroom .stage.sliding { cursor: grabbing; }
#darkroom .viewer canvas.panning { cursor: grabbing; }

/* A finger on the image belongs to the tool. Without this the browser takes the gesture for a scroll a few
   pixels in, cancels it, and the divider stops where the finger was. In the page a vertical swipe still
   scrolls the page; over the whole window, or at 100% where the tool pans, nothing is left to the browser. */
#darkroom .viewer canvas { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.editing #darkroom .viewer canvas,
#darkroom .viewer.actual canvas { touch-action: none; }
#darkroom .busy {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(23, 23, 26, .5);
  pointer-events: none;
  z-index: 6;
}
#darkroom .busy span {
  width: 26px; height: 26px;
  border: 1px solid rgba(245, 241, 234, .25);
  border-top-color: var(--accent-light);
  border-radius: 50%;
  animation: spin .9s linear infinite;
}


@keyframes spin { to { transform: rotate(360deg); } }


/* Crop ------------------------------------------------------------------ */

#darkroom .crop-overlay { position: absolute; inset: 0; cursor: crosshair; }
#darkroom .crop-rect {
  position: absolute;
  border: 1px dashed rgba(245, 241, 234, .92);
  box-shadow: 0 0 0 9999px rgba(14, 14, 16, .6);
  display: none;
  cursor: move;
}


/* Thirds, as a camera's grid. */
#darkroom .crop-rect .third { position: absolute; background: rgba(245, 241, 234, .22); pointer-events: none; }
#darkroom .crop-rect .third.v { top: 0; bottom: 0; width: 1px; }
#darkroom .crop-rect .third.h { left: 0; right: 0; height: 1px; }


/* The whole side is a handle, not only the square on it: the square is what you see, the strip along the
   side is what you can grab. */
#darkroom .crop-edge { position: absolute; }
#darkroom .crop-edge.n { left: 0; right: 0; top: 0; height: 15px; margin-top: -7px; cursor: ns-resize; }
#darkroom .crop-edge.s { left: 0; right: 0; bottom: 0; height: 15px; margin-bottom: -7px; cursor: ns-resize; }
#darkroom .crop-edge.w { top: 0; bottom: 0; left: 0; width: 15px; margin-left: -7px; cursor: ew-resize; }
#darkroom .crop-edge.e { top: 0; bottom: 0; right: 0; width: 15px; margin-right: -7px; cursor: ew-resize; }
#darkroom .crop-handle { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; }
#darkroom .crop-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  margin: -6px 0 0 -6px;
  background: var(--paper);
  border: 1px solid rgba(14, 14, 16, .55);
  border-radius: 1px;
}
#darkroom .crop-handle.nw { left: 0; top: 0; cursor: nwse-resize; }
#darkroom .crop-handle.n { left: 50%; top: 0; cursor: ns-resize; }
#darkroom .crop-handle.ne { left: 100%; top: 0; cursor: nesw-resize; }
#darkroom .crop-handle.w { left: 0; top: 50%; cursor: ew-resize; }
#darkroom .crop-handle.e { left: 100%; top: 50%; cursor: ew-resize; }
#darkroom .crop-handle.sw { left: 0; top: 100%; cursor: nesw-resize; }
#darkroom .crop-handle.s { left: 50%; top: 100%; cursor: ns-resize; }
#darkroom .crop-handle.se { left: 100%; top: 100%; cursor: nwse-resize; }
#darkroom .crop-actions {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--glass);
  backdrop-filter: blur(18px);
  border: 1px solid var(--glass-line);
  border-radius: 40px;
  padding: 10px 10px 10px 22px;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--glass-text);
  z-index: 7;
}


/* Editing: the image fills the window, and the chrome floats over it ------ */

body.editing { overflow: hidden; background: #17171a; }
body.editing #darkroom .masthead,
body.editing #darkroom .intro,
body.editing #darkroom .colophon { display: none; }
body.editing #darkroom { position: relative; z-index: 9000; }
body.editing #darkroom .workspace { position: fixed; inset: 0; padding: 0; z-index: 3; }
body.editing #darkroom .stage {
  position: absolute;
  inset: 0;
  min-height: 0;
  padding: 0;
}


/* Zoomed, the scrolled area reaches past the floating chrome, so any edge of the picture can be brought out
   from under the toolbar and the panels; a picture smaller than that room sits in the middle of it. */
body.editing #darkroom .stage.actual {
  padding: calc(var(--toolbar-height) + 16px) calc(var(--panel-width) + 32px) 16px calc(var(--rail-width) + 32px);
}
body.editing.panel-hidden #darkroom .stage.actual { padding: calc(var(--toolbar-height) + 16px) 16px 16px; }
#darkroom .sheet { display: contents; }
body.editing #darkroom .panel,
body.editing #darkroom .inspector {
  position: absolute;
  top: calc(var(--toolbar-height) + 16px);
  bottom: 16px;
  overflow: auto;
  color: var(--glass-text);
  background: linear-gradient(180deg, rgba(30, 30, 34, .68), rgba(12, 12, 14, .66));
  backdrop-filter: blur(22px);
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(245, 241, 234, .06);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  z-index: 4;
}
body.editing #darkroom .panel { left: 16px; width: var(--rail-width); }
body.editing #darkroom .inspector { right: 16px; width: var(--panel-width); }
body.editing.panel-hidden #darkroom .panel,
body.editing.panel-hidden #darkroom .inspector { opacity: 0; pointer-events: none; }
body.editing.panel-hidden #darkroom .panel { transform: translateX(-16px); }
body.editing.panel-hidden #darkroom .inspector { transform: translateX(16px); }


/* Panels ---------------------------------------------------------------- */

/* The chooser stays put while the list of filters scrolls under it. */
#darkroom .panel-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 16px 14px 14px;
  border-bottom: 1px solid var(--glass-line);
  border-radius: 13px 13px 0 0;
  background: linear-gradient(180deg, rgba(31, 31, 35, .96), rgba(24, 24, 27, .92));
  backdrop-filter: blur(8px);
}
#darkroom .panel-head .kicker { margin: 0 0 11px; color: var(--accent-light); font-size: 9.5px; }
#darkroom .panel-head .kicker::before { width: 22px; }


/* The look chooser: one control, with the chevron drawn rather than left to the platform. */
#darkroom .chooser { position: relative; }
#darkroom .chooser select {
  width: 100%;
  appearance: none;
  background: rgba(245, 241, 234, .05);
  border: 1px solid var(--glass-line);
  border-radius: 9px;
  padding: 11px 34px 11px 13px;
  font-size: 13px;
  letter-spacing: .01em;
  color: var(--glass-text);
  cursor: pointer;
  transition: border-color .45s var(--ease), background .45s var(--ease);
}
#darkroom .chooser select:hover { border-color: rgba(215, 181, 132, .5); background: rgba(245, 241, 234, .08); }
#darkroom .chooser select:focus-visible { outline: 1px solid var(--accent-light); outline-offset: 1px; }
#darkroom .chooser .chevron {
  position: absolute;
  right: 13px;
  top: 50%;
  width: 10px;
  height: 6px;
  margin-top: -3px;
  fill: none;
  stroke: var(--accent-light);
  stroke-width: 1.4;
  pointer-events: none;
}
#darkroom select { appearance: none; background: transparent; border: 1px solid var(--glass-line); border-radius: 8px;
         padding: 8px 11px; font-size: 12.5px; color: inherit; cursor: pointer;
         transition: border-color .45s var(--ease); }
#darkroom select:hover { border-color: rgba(245, 241, 234, .38); }
#darkroom select option { color: var(--ink); }


/* There is more below: a fade and a chevron, and nothing at all when everything fits. */
#darkroom .more {
  position: sticky;
  bottom: 0;
  height: 34px;
  margin-top: -34px;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 7px;
  pointer-events: none;
  background: linear-gradient(to top, rgba(12, 12, 14, .92), rgba(12, 12, 14, 0));
  border-radius: 0 0 13px 13px;
}
#darkroom .panel.has-more .more,
#darkroom .inspector-scroll.has-more .more { display: flex; }
#darkroom .more svg { width: 12px; height: 7px; fill: none; stroke: var(--accent-light); stroke-width: 1.4; opacity: .85; }
#darkroom .filters { padding: 8px 8px 18px; }
#darkroom .group-label {
  font-size: 9.5px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--accent-light);
  opacity: .85;
  padding: 18px 8px 8px;
}
#darkroom .filter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: background .45s var(--ease), border-color .45s var(--ease);
}
#darkroom .filter:hover { background: rgba(245, 241, 234, .06); }
#darkroom .filter.selected { background: rgba(215, 181, 132, .13); border-color: rgba(215, 181, 132, .34); }
#darkroom .filter input { accent-color: var(--accent-light); margin: 0; cursor: pointer; }
#darkroom .filter span { font-size: 12px; letter-spacing: .01em; color: rgba(245, 241, 234, .74); }
#darkroom .filter.selected span { color: var(--glass-text); }
#darkroom .filter.on span { font-weight: 500; color: var(--glass-text); }
#darkroom .controls { padding: 18px 16px 6px; }
#darkroom .controls .summary {
  font-size: 12px;
  line-height: 1.8;
  color: var(--glass-muted);
  margin: 0 0 20px;
}
#darkroom .controls.disabled .control { opacity: .34; pointer-events: none; }
#darkroom .control { margin-bottom: 16px; }
#darkroom .control-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 11.5px;
}
#darkroom .control-head b { font-weight: 400; letter-spacing: .04em; }
#darkroom .control-head output { font-variant-numeric: tabular-nums; font-size: 11px; color: var(--glass-muted); }
#darkroom input[type=range] { width: 100%; accent-color: var(--accent-light); height: 18px; }
#darkroom .control-heading {
  font-size: 9.5px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--accent-light);
  opacity: .85;
  margin: 24px 0 12px;
}
#darkroom .control-note { font-size: 11px; line-height: 1.7; color: var(--glass-muted); margin: -8px 0 16px; }
#darkroom .panel-foot { padding: 6px 16px 20px; }
#darkroom .panel-foot .link.small { color: var(--glass-muted); }


/* Toolbar --------------------------------------------------------------- */

#darkroom .toolbar {
  position: fixed;
  inset: 0 0 auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 10px 16px;
  color: var(--glass-text);
  background: var(--glass);
  backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--glass-line);
  z-index: 5;
}
#darkroom .tools,
#darkroom .save { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }


/* The studio's mark, first in the toolbar, back to the site. */
#darkroom .toolbar .brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: 8px;
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
  transition: color .45s var(--ease), opacity .45s var(--ease);
}
#darkroom .toolbar .brand svg { width: 28px; height: 28px; display: block; }
#darkroom .toolbar .brand:hover { color: var(--accent-light); }

/* In the site's page its header already carries the mark; it is needed once the tool has the window. */
body:not(.editing) #darkroom[data-chrome="page"] .brand { display: none; }


/* Beside Save: the file opened, and the file Save will write. */
#darkroom .sizes {
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--glass-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#darkroom .sizes b { font-weight: 500; color: var(--glass-text); letter-spacing: .06em; }
#darkroom .sizes:empty { display: none; }
body:not(.editing) #darkroom .sizes { color: var(--muted); }
body:not(.editing) #darkroom .sizes b { color: var(--ink); }
#darkroom .toolbar button {
  background: transparent;
  border: 1px solid rgba(245, 241, 234, .26);
  border-radius: 40px;
  padding: 8px 17px;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
#darkroom .toolbar button:hover:not(:disabled) { background: var(--paper); color: var(--ink); border-color: var(--paper); }
#darkroom .toolbar button:disabled { opacity: .3; cursor: default; }
#darkroom .toolbar button.active {
  background: rgba(215, 181, 132, .16);
  border-color: var(--accent-light);
  color: var(--paper);
}
#darkroom .toolbar button.strong {
  border-color: rgba(245, 241, 234, .55);
  color: var(--paper);
  font-weight: 500;
}
#darkroom .toolbar button.close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 13px;
}
#darkroom .toolbar button.close svg {
  width: 9px;
  height: 9px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
#darkroom .toolbar button.quiet { border-color: transparent; color: var(--glass-muted); }
#darkroom .toolbar button.quiet:hover:not(:disabled) { background: transparent; color: var(--paper); border-color: var(--glass-line); }
#darkroom .toolbar button.primary,
#darkroom .crop-actions button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
#darkroom .toolbar button.primary:hover:not(:disabled) { background: var(--paper); color: var(--ink); border-color: var(--paper); }
#darkroom .crop-actions button {
  background: transparent;
  border: 1px solid var(--glass-line);
  border-radius: 40px;
  padding: 8px 17px;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
#darkroom .crop-actions button:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
#darkroom .save select { width: auto; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 8px 12px; }
#darkroom .quality {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--glass-muted);
}
#darkroom .quality input { width: 92px; }
#darkroom .quality output { font-variant-numeric: tabular-nums; width: 22px; letter-spacing: 0; font-size: 11px; }


/* Every label that has a short form for a narrow screen carries both. */
#darkroom .short { display: none; }
#darkroom .status {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--glass-muted);
  font-variant-numeric: tabular-nums;
}


/* The page view keeps the toolbar, in the studio's light manner. */
body:not(.editing) #darkroom .toolbar {
  position: static;
  margin: 16px clamp(20px, 4vw, 56px) 0;
  padding: 16px 0;
  color: var(--ink);
  background: none;
  backdrop-filter: none;
  border-bottom: 0;
  border-top: 1px solid var(--line);
}
body:not(.editing) #darkroom .toolbar button { border-color: var(--line); }
body:not(.editing) #darkroom .toolbar button.strong { color: var(--ink); border-color: var(--ink); }
body:not(.editing) #darkroom .toolbar button.active {
  color: var(--ink);
  background: rgba(139, 111, 71, .14);
  border-color: var(--accent);
}
body:not(.editing) #darkroom .toolbar button:hover:not(:disabled) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
body:not(.editing) #darkroom .toolbar button.quiet { color: var(--muted); }
body:not(.editing) #darkroom .toolbar button.primary { background: var(--accent); border-color: var(--accent); color: var(--paper); }
body:not(.editing) #darkroom .toolbar select { border-color: var(--line); }
body:not(.editing) #darkroom .status,
body:not(.editing) #darkroom .quality { color: var(--muted); }


/* Narrow screens: the two panels become one sheet along the bottom ------- */

@media (max-width: 1080px) {body.editing #darkroom .sheet {
    display: block;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-height: var(--sheet-height);
    overflow: auto;
    color: var(--glass-text);
    background: linear-gradient(180deg, rgba(30, 30, 34, .78), rgba(12, 12, 14, .74));
    backdrop-filter: blur(22px);
    border: 1px solid var(--glass-line);
    border-radius: 14px;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(245, 241, 234, .06);
    transition: opacity .45s var(--ease), transform .45s var(--ease);
    z-index: 4;
  }


  /* The sheet must not sit on the picture: the picture ends where the sheet begins. */
  body.editing:not(.panel-hidden) #darkroom .stage { padding-bottom: calc(var(--sheet-height) + 26px); }


  /* One scroller, so one hint at most — and the sheet's own edge already shows there is more. */
  #darkroom .more { display: none !important; }
#darkroom .panel-head { border-radius: 13px 13px 0 0; }
body.editing #darkroom .panel,
body.editing #darkroom .inspector {
    position: static;
    width: auto;
    background: none;
    backdrop-filter: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
    transition: none;
    opacity: 1;
    transform: none;
  }
body.editing #darkroom .inspector { border-top: 1px solid var(--glass-line); }
body.editing.panel-hidden #darkroom .sheet { opacity: 0; transform: translateY(14px); pointer-events: none; }
#darkroom .status { display: none; }
#darkroom .quality input { width: 68px; }
#darkroom .toolbar { padding: 9px 12px; gap: 10px; }

}


/* A narrow window: the chrome gets out of the way — short labels, small pills, tight rows. */
@media (max-width: 860px) {#darkroom .long { display: none; }
#darkroom .short { display: inline; }
#darkroom .toolbar { padding: 7px 8px; gap: 6px; }
#darkroom .tools,
#darkroom .save { gap: 5px; }
#darkroom .toolbar button {
    padding: 6px 11px;
    font-size: 9px;
    letter-spacing: .14em;
  }
#darkroom .toolbar button.close { padding: 6px 10px; gap: 0; }
#darkroom .toolbar button.close span { display: none; }
#darkroom .toolbar button.close svg { width: 10px; height: 10px; }
#darkroom .save select { padding: 6px 8px; font-size: 9px; letter-spacing: .1em; }
#darkroom .quality { gap: 5px; }
#darkroom .quality input { width: 52px; }
#darkroom .quality output { font-size: 10px; width: 18px; }
#darkroom { --sheet-height: 42vh; }
body.editing #darkroom .sheet { left: 8px; right: 8px; bottom: 8px; }
#darkroom .crop-actions { bottom: 16px; padding: 8px 8px 8px 16px; font-size: 10px; gap: 10px; }

}


/* The loupe ------------------------------------------------------------ */

/* The inspector is a column: the settings on top, scrolling on their own when they are tall, and under them
   the loupe, taking whatever height is left but never less than its own — so it is always in view. */
body.editing #darkroom .inspector { display: flex; flex-direction: column; overflow: hidden; }
body.editing #darkroom .inspector-scroll { flex: 0 1 auto; min-height: 0; overflow: auto; }
#darkroom .loupe {
  display: none;
  position: relative;
  flex: 1 0 200px;
  margin: 0 16px 16px;
  min-height: 200px;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  background: #0e0e10;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
body.editing #darkroom .loupe { display: block; }
#darkroom .loupe.looking { cursor: grabbing; }
#darkroom .loupe canvas { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; }
#darkroom .loupe figcaption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 10px 7px;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, .82);
  background: linear-gradient(transparent, rgba(0, 0, 0, .55));
  pointer-events: none;
}


/* On the picture: where the loupe is looking. */
#darkroom .loupe-mark {
  position: absolute;
  border: 1px solid rgba(245, 241, 234, .9);
  box-shadow: 0 0 0 1px rgba(14, 14, 16, .45);
  border-radius: 2px;
  pointer-events: none;
}
body:not(.editing) #darkroom .loupe-mark { display: none; }


/* On a narrow screen the settings are a sheet over the picture and there is no room for a second view. */
@media (max-width: 1080px) {body.editing #darkroom .loupe,
#darkroom .loupe-mark { display: none !important; }
body.editing #darkroom .inspector { display: block; }
body.editing #darkroom .inspector-scroll { overflow: visible; }
#darkroom .sizes .long { display: none; }

}