/* ---------- THE KEEP: its own sheet ----------
   plans/KEEP-WINDOW.md. One feature, one sheet, the same rule glass.css keeps.
   Loaded for every room because the keep icon stands in every banner.

   Every colour here is a token. The window's own frame comes from the shared
   .panel classes it wears (components.css) exactly as the listening window's
   does; what is written here is only what is this window's own. The camera's
   body inside the wing keeps camera.css — a mount does not restyle the
   machine it mounts. */

/* THE WINDOW. `.panel-col` already makes it a flex column with the house gap;
   this gives it its width, its ceiling, and the min-height:0 that lets the
   body below it scroll instead of pushing the window past the ceiling.

   THE WIDTH IS THE SLIDE. The wing shoots out to the left by widening the
   window, and the transition is what makes it read as a movement rather than
   a jump. One class on the window, CSS doing the moving, exactly as the plan
   asks — and lib/drag.js measures the box after every render, so a window
   somebody has already dragged holds its corner while it grows. */
.keep{width:100%; max-width:560px; max-height:min(82vh, 780px);
  display:flex; flex-direction:column; min-height:0;
  transition:max-width .22s ease;}
.keep.keep-wide{max-width:1060px;}

/* Nothing in this app animates for a person who asked it not to. */
@media (prefers-reduced-motion: reduce){
  .keep{transition:none;}
}

/* The head, and it is the grab handle: lib/drag.js takes the window anywhere
   that is not an interactive control, and the cursor says where to expect it. */
.keep-head{display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s5); flex:none; cursor:move;}
.keep-name{display:flex; flex-direction:column; gap:var(--s1); min-width:0;}
.keep-title{font-size:var(--t-lead); font-weight:var(--w-semi); color:var(--ink);}

/* THE TWO COLUMNS. The wing on the left, the faces on the right — Mark's own
   geometry ("shoots out left of the modal"). With no wing there is one column
   and the row costs nothing. */
.keep-cols{display:flex; gap:var(--s6); flex:1; min-height:0;}
.keep-main{flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; gap:var(--s5);}

/* THE WING: the camera, mounted. Its own scroller, because the body is tall
   and the actions row under it must stay reachable without scrolling the
   whole window. */
.keep-wing{flex:none; width:min(430px, 46vw); min-height:0;
  display:flex; flex-direction:column; gap:var(--s5);
  padding-right:var(--s6); border-right:var(--bd) solid var(--edge);}
.keep-wing-body{flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column; gap:var(--s5);}
.keep-wing-actions{flex:none; display:flex; align-items:center;
  justify-content:flex-end; gap:var(--s4); flex-wrap:wrap;}
.keep-wing-cancel{padding:10px 13px; border:0; border-radius:var(--r-md);
  background:none; color:inherit; cursor:pointer;
  font-family:"IBM Plex Mono",monospace; font-size:var(--t-label); letter-spacing:var(--ls-wide);}
.keep-wing-cancel:hover{background:var(--inset);}
.keep-wing-go{padding:12px 18px; border:0; border-radius:var(--r-md); cursor:pointer;
  background:var(--accent); color:var(--onAccent);
  font-family:"IBM Plex Mono",monospace; font-size:var(--t-tiny); letter-spacing:var(--ls-wide);}
.keep-wing-go[disabled]{opacity:.45; cursor:default;}

/* THE TAB ROW wears the HOUSE PILL (Mark, 2026-08-31: "the tabs need to
   follow the house design") — the same track and segment values the
   Assistant / Tool Box pair wears in house-shell.css, said here because this
   is a modal and the shell's selectors are the shell's. On is the selection
   colour, off reads ink4, the pill and the colour say which is on. */
.keep-tabs{display:flex; align-items:center; gap:0; padding:3px; flex:none;
  border:var(--bd) solid var(--edge); border-radius:999px; background:var(--chrome);}
.keep-tab{flex:1; padding:6px 0; border:0; border-radius:999px; cursor:pointer; text-align:center;
  background:transparent; color:var(--ink4);
  font-size:var(--t-small); line-height:20px; font-weight:var(--w-med);}
.keep-tab:hover{color:var(--text);}
.keep-tab.on{background:var(--sel); color:var(--text);}
/* The camera is a SWITCH standing at the row's left (Mark: "make it a camera
   icon to the LEFT of clipboard"): it opens the wing beside a face rather
   than instead of one, so it is an icon set apart by a rule, not a fifth
   name in the row. */
.keep-tab-camera{flex:none; display:grid; place-items:center; width:38px; padding:6px 0;
  margin-right:var(--s2); border-right:var(--bd) solid var(--edge);
  border-radius:999px 0 0 999px;}
.keep-tab-camera.on{background:var(--sel); color:var(--accent);}

/* ---------- THE CHARACTERS FACE (slugline camera, slice 2) ---------- */
.keep-cast{flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:var(--s4); padding-right:2px;}
.keep-hint{margin:0; color:var(--muted); font-size:var(--t-label); line-height:var(--lh-body);}
.keep-cast-row{display:flex; flex-direction:column; gap:var(--s2); padding-top:var(--s3); border-top:var(--bd) solid var(--edge);}
.keep-cast-head{display:flex; align-items:center; gap:var(--s3);}
.keep-cast-face{flex:none; width:34px; height:34px; border-radius:50%; overflow:hidden; border:var(--bd) solid var(--edge); background:var(--inset);}
.keep-cast-face img{width:100%; height:100%; object-fit:cover;}
.keep-cast-blank{display:grid; place-items:center; width:100%; height:100%; color:var(--muted); font-weight:var(--w-semi);}
.keep-cast-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--t-small); font-weight:var(--w-semi);}
.keep-cast-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.keep-cast-none{padding:var(--s2) 0;}

/* ---------- THE PROMPTS FACE (slugline camera, slice 3) ---------- */
.keep-prompts{flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:var(--s3);}
.keep-prompt-head{display:flex; justify-content:flex-end;}
.keep-prompt-list{display:flex; flex-direction:column; gap:var(--s2);}
.keep-prompt-row{display:flex; align-items:center; gap:var(--s3); padding:var(--s2) 0; border-top:var(--bd) solid var(--edge);}
.keep-prompt-words{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.keep-prompt-name{font-size:var(--t-small); font-weight:var(--w-semi);}
.keep-prompt-line{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:var(--t-label);}
.keep-prompt-head [disabled]{opacity:.5; cursor:default;}
.keep-prompt-kind{flex:none; padding:2px 6px; border:var(--bd) solid var(--edge); border-radius:var(--r-pill);
  color:var(--muted); font-family:"IBM Plex Mono",monospace; font-size:var(--t-nano,9px); letter-spacing:var(--ls-wide);}
.keep-kind-pill{flex:none; padding:5px 9px; border:var(--bd) solid var(--edge); border-radius:var(--r-pill); cursor:pointer;
  background:none; color:var(--muted); font-family:"IBM Plex Mono",monospace; font-size:var(--t-label); letter-spacing:var(--ls-wide);}
.keep-kind-pill.on{background:var(--sel); color:var(--text); border-color:var(--accent-line);}

/* The body is the only thing that scrolls, and the panel inside it keeps its
   own scroller (.clip-body, camera.css) — so min-height:0 has to reach all
   the way down or the inner scroller never gets a height to work against. */
.keep-body{flex:1; min-height:0; display:flex; flex-direction:column;}
.keep-panel{flex:1; min-height:0; display:flex; flex-direction:column; gap:8px;}
.keep-empty{font-size:var(--t-body); color:var(--muted); padding:var(--s5) 0;}

/* BELOW ~900px THE WING FOLDS ABOVE rather than collapsing behind a second
   toggle — the camera's own answer to the same width (camera.css), and for
   the same reason: the window already scrolls, and hiding half of it from
   the person who opened it is not a fix. */
@media (max-width: 900px){
  .keep.keep-wide{max-width:96vw;}
  .keep-cols{flex-direction:column;}
  .keep-wing{width:auto; padding-right:0; padding-bottom:var(--s5);
    border-right:0; border-bottom:var(--bd) solid var(--edge);}
  .keep-wing-body{overflow-y:visible;}
}

/* ---------- THE FILES FACE: THE DRAWER, MOUNTED (lane 5) ----------
   WORLD-PROJECT-WORKS.md section 1: the Keep shows only the active project's
   files, through the SAME machinery the Projects room mounts. What is written
   here is only this window's PLACEMENT of it: the kicker above, the narrow
   rail beside the canvas, and what scrolls. The drawer's own looks are the
   `.dr-` half of projects.css, which is deliberately not keyed to `.pj-` so
   the same markup looks the same inside a floating window as it does on the
   canvas. A mount does not restyle the machine it mounts.

   THE WINDOW IS ALREADY WIDER for this face, through the one keep-wide class
   the camera wing uses (rooms/modals/keep.js). */
.keep-files{flex:1; min-height:0; display:flex; flex-direction:column; gap:var(--s3);}
/* THE KICKER NAMES WHOSE FILES THESE ARE. It is the house kicker: quiet,
   spaced, uppercase, and in the BODY face, because Mark's ruling for panels of
   rows takes the mono type off surfaces like this one. */
.keep-files-kicker{margin:0; flex:none; color:var(--muted);
  font-size:var(--t-tiny); font-weight:var(--w-semi); letter-spacing:var(--ls-label);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* THE TREE GETS A FIXED NARROW COLUMN AND THE CANVAS THE REST. A map you
   cannot read the names on is not a map, and a map that grows with the window
   is a canvas that never does. */
.keep-files-cols{flex:1; min-height:0; display:grid; grid-template-columns:190px minmax(0,1fr); gap:var(--s5);}
.keep-files-rail{min-width:0; min-height:0; overflow:auto;
  padding-right:var(--s4); border-right:var(--bd) solid var(--edge);}
.keep-files-main{min-width:0; min-height:0; display:flex; flex-direction:column; gap:var(--s2);}
/* THE CANVAS IS THE ONLY THING THAT SCROLLS UNDER THE TOOLBAR, and it is
   positioned so the veil and the busy overlay have something to sit inside. */
.keep-files-canvas{position:relative; flex:1; min-height:0; overflow:auto;}

/* A NARROW WINDOW DROPS THE RAIL rather than squeezing it, which is the
   Projects room's own answer at the same width and for the same reason. */
@media (max-width: 900px){
  .keep-files-cols{grid-template-columns:minmax(0,1fr);}
  .keep-files-rail{display:none;}
}

/* ---------- THE TOOL BOX'S SHELF ----------
   These are the folder column and the clip list rows/keep-faces.js draws, and
   they are the Tool Box in Image Forge's whole face. THIS WINDOW NO LONGER
   DRAWS THEM: its files face is the drawer (lane 5). They stay in this
   feature's own sheet because the Tool Box is the Keep's shelf seen twice, and
   because the prompts face still wears the naming row.

   Each column scrolls on its own: a long folder list must never push the
   contents off the bottom, and a long folder must never push the folder list
   off with it. */
.keep-folders{flex:none; width:190px; min-height:0; display:flex; flex-direction:column; gap:var(--s3);
  padding-right:var(--s5); border-right:var(--bd) solid var(--edge);}
.keep-folder-list{flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:2px;}
.keep-folder{display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  width:100%; padding:6px 8px; border:0; border-radius:var(--r-md); cursor:pointer;
  background:none; color:var(--ink2); font-size:var(--t-small); text-align:left;}
.keep-folder:hover{background:var(--inset);}
.keep-folder.on{background:var(--inset); color:var(--accent);}
.keep-folder-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.keep-folder-n{flex:none; font-size:var(--t-label); color:var(--muted);}
.keep-new-row{display:flex; align-items:center; gap:var(--s2); flex:none;}
.keep-new-name{min-width:0; flex:1; font-size:var(--t-small); padding:5px 8px;}

.keep-folder-body{flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; gap:var(--s4);}
.keep-col-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); flex:none;}
.keep-clip-list{flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:2px;}

/* ---------- THE CLIP ROW ----------
   The Tool Box in Image Forge draws these (rooms/keep-faces.js) and this
   window no longer does: its files face is the drawer now. The rules stay
   here, in this feature's own sheet, because the row is the Keep's row and the
   Tool Box is the Keep's own shelf seen twice.

   ONE ROW, TWO ELEMENTS. A picture is a button onto the house picture window;
   words are an anchor straight at the file door. They are the same row and
   they are styled as one, because what a person sees is a list of things they
   kept, not two kinds of control. */
.keep-clip{display:flex; align-items:center; gap:var(--s4);
  width:100%; padding:6px 8px; border:0; border-radius:var(--r-md); cursor:pointer;
  background:none; color:var(--ink2); font-size:var(--t-small);
  text-align:left; text-decoration:none;}
.keep-clip:hover{background:var(--inset); color:var(--ink);}
.keep-clip-thumb{flex:none; width:34px; height:34px; border-radius:var(--r-sm);
  overflow:hidden; background:var(--inset); display:flex;}
.keep-clip-thumb img{width:100%; height:100%; object-fit:cover;}
.keep-clip-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.keep-clip-meta{flex:none; font-size:var(--t-label); color:var(--muted); letter-spacing:.04em;}

.keep-clip-wrap{display:flex; align-items:center; gap:var(--s1);}
.keep-clip-wrap .keep-clip{flex:1; min-width:0;}
.keep-clip-x{flex:none;}