/* ==========================================================================
   app-workspace.css — how a file that is actually here looks when it opens.

   js/render.js draws the two thousand files that are not here. This is for
   the ones that are. A document goes behind glass: sunk into the pane with
   the bevel running the wrong way round, because on this machine anything
   recessed is something the machine is holding rather than something the
   machine drew. Under every one of them, in the same place, is the row with
   the Save button in it — the single control that makes this a filesystem
   and not a diorama.
   ========================================================================== */

/* -------------------------------------------------------------- the pane
   A PDF has no intrinsic width. Dropped into a flex row it will happily
   agree to be forty pixels wide, so the document region is told what it is
   allowed to be at both ends, and the column strip is told to give it room
   before it gives itself any. */
.browser-wrap > .inspector {
  flex: 1 1 420px;
  min-width: 320px;
}
.browser-wrap > .browser { max-width: calc(100% - 320px); }

/* Under about 760px the two regions stop being side by side at all: the
   columns become a short strip along the top and the document takes the
   rest. Below that width the split leaves the document around 280px, which
   is a PDF nobody can read next to columns nobody can read either. */
@media (max-width: 760px) {
  .browser-wrap { flex-direction: column; }
  .browser-wrap > .browser {
    /* a definite share of the pane, not a content height: the columns inside
       divide it, and a flex basis of auto would collapse the lot to nothing */
    max-width: 100%; flex: 0 0 36%; max-height: 36%;
    overflow-y: auto;
    border-bottom: 1px solid var(--lo);
  }
  .browser-wrap > .inspector {
    flex: 1 1 auto; min-width: 0;
    border-left: 0; box-shadow: inset 0 1px 0 var(--hi);
  }
  /* stacked, the columns divide the strip between them instead of each
     taking a third of it and leaving a band of nothing underneath */
  .browser-wrap > .browser > .col { flex: 1 1 0; max-height: none; min-height: 0; }
}

/* ------------------------------------------------------------ the header
   The synthesiser's head strip says "page 1 of 12" on the right. A real
   file says where it came from, in the same place, in the same amber the
   extracted documents use — that colour means "this is not a drawing". */
.doc-disk .doc-src { color: var(--amber-dim); }

/* --------------------------------------------------------------- staging
   Everything the browser itself renders — the PDF, the picture, the
   transport — sits in one of these: recessed, hard-edged, on the dark
   ground that makes a lit document read as lit. */
.stage {
  margin: 0; padding: 4px;
  background: var(--gray-dk);
  border-top: 1px solid var(--lo); border-left: 1px solid var(--lo);
  border-right: 1px solid var(--hi); border-bottom: 1px solid var(--hi);
  min-width: 0; max-width: 100%;
}
.stage .media { display: block; border: 0; }

/* -------------------------------------------------------------------- pdf */
.pdf-stage {
  /* tall enough to read a page, short enough that the row with the Save
     button in it is still on screen in a 540px window */
  height: clamp(230px, 42vh, 600px);
  min-width: 180px;
  background: #3a342c;
}
.pdf-stage > .pdf-view {
  width: 100%; height: 100%;
  background: var(--paper);
  border: 1px solid #1d1913;
}

/* the panel for a browser that will not draw a PDF in a pane. It is a
   panel, not an empty rectangle: it says what the file is and offers the
   two things that are left to do with it. */
.alt-panel {
  display: block; height: 100%; box-sizing: border-box;
  padding: 18px 16px;
  background: var(--paper); color: var(--ink);
  direction: ltr;
  border: 1px solid var(--lo);
}
.alt-kind {
  font-family: var(--mono); font-size: 9px; letter-spacing: .2em;
  color: var(--lo); margin: 0 0 6px;
}
.alt-name { font-size: 13px; font-weight: 700; margin: 0 0 6px; word-break: break-word; }
.alt-panel .meta { font-size: 11px; margin: 0 0 12px; }
.alt-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.alt-acts .btn { text-decoration: none; display: inline-block; }

/* ------------------------------------------------------------------ image */
.img-stage {
  max-height: 320px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-in;
}
.img-stage > .shot {
  max-width: 100%; max-height: 312px; width: auto; height: auto;
  box-shadow: 3px 4px 0 rgba(0,0,0,.35);
  background: var(--paper);
}
/* clicked: the real pixels, scrollable inside the pane */
.img-stage.zoom {
  max-height: min(70vh, 560px); overflow: auto; cursor: zoom-out;
  align-items: flex-start; justify-content: flex-start;
  direction: rtl;                          /* the scrollbar belongs on the left */
}
.img-stage.zoom > .shot { direction: ltr; max-width: none; max-height: none; }
.img-stage.small { cursor: default; }
.img-hint {
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--lo);
  margin: 4px 0 0 !important; min-height: 11px;
}

/* ------------------------------------------------------------ audio, video
   The transport is the browser's own, because a drawn one would not play
   anything. What this can do is drain the colour out of it and sink it into
   a strip that belongs to the machine. */
.transport {
  padding: 6px;
  background: var(--gray);
  display: block;
}
.transport > audio {
  display: block; width: 100%; min-width: 0; height: 36px;
  filter: grayscale(1) sepia(.22) saturate(.55) contrast(1.02);
}
audio::-webkit-media-controls-enclosure,
video::-webkit-media-controls-enclosure { border-radius: 0; }
audio::-webkit-media-controls-panel { background: var(--gray-lt); }

.video-stage { background: #100d0a; }
.video-stage > video {
  width: 100%; height: auto;
  max-height: clamp(200px, 46vh, 520px);
  background: #100d0a;
  filter: saturate(.86) contrast(1.02);
}

/* ------------------------------------------------------------------- text */
.text-doc .sheet { max-height: 460px; }
.text-doc .sheet > pre.file {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
  margin: 0; max-width: 72ch;
}
.text-doc .sheet > .p.cut { margin-top: 12px; }

/* -------------------------------------------------------------- the action row
   Same place under every file on the machine. A raised strip — this one is
   the machine's, not the document's — holding the button that hands the
   bytes over and the number of them there are. */
.actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 8px 0 0; padding: 6px 8px;
  background: var(--gray);
  border-top: 1px solid var(--hi); border-left: 1px solid var(--hi);
  border-right: 1px solid var(--lo); border-bottom: 1px solid var(--lo);
  /* a long document must not push the one control that matters off the
     bottom of the pane: it docks there until its own place comes up */
  position: sticky; bottom: 0; z-index: 2;
}
.actions .btn { text-decoration: none; display: inline-block; }
.actions .act-note {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--lo);
  margin-left: auto; text-align: right;
}

@media (max-width: 420px) {
  .pdf-stage { height: clamp(220px, 40vh, 380px); }
  .img-stage { max-height: 220px; }
  .img-stage > .shot { max-height: 212px; }
  .actions .act-note { margin-left: 0; text-align: left; }
}