/* style — shot tabs above the gallery grid.
   One section of the old style.css. The pieces load in filename order
   and that order is the cascade, so do not rearrange them. */
/* ---------- shot tabs: folder-style tabs above the gallery grid ---------- */
/* A LITTLE BIGGER, A LITTLE MORE AIR, NOT BOLD. Simon: "Make it so the size
   of the tabs in the gallery is slightly larger, and they've got a bit more
   space around them, so they feel less squashed together. Make it so the
   text used for them isn't bold." */
#shot-tabs {
  display: flex; align-items: flex-end; gap: 4px; flex-wrap: wrap;
  margin: 0 0 8px; padding: 0 3px;
  border-bottom: 1px solid var(--border);
}
#shot-tabs.hidden { display: none; }
.shot-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px 7px; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); border-bottom: none;
  border-radius: 4px 4px 0 0;
  color: var(--text-dim); font-size: 11.5px; font-weight: 400;
  position: relative; top: 1px;
}
.shot-tab:hover { border-color: var(--accent); color: var(--text); }
.shot-tab.active {
  background: var(--bg); color: var(--accent);
  border-bottom: 1px solid var(--bg);   /* "open folder" — merges into the grid */
}
.shot-tab.dragover { border-color: var(--accent); background: var(--accent-soft); }
/* Reordering by drag (js/panel/38-shots.js): the tab in flight, and where it
   will land. */
.shot-tab.dragging { opacity: .45; }
.shot-tab.drop-before { box-shadow: -3px 0 0 0 var(--accent); }
.shot-tab.drop-after { box-shadow: 3px 0 0 0 var(--accent); }
/* NEW WORK HERE. A folder a generation just landed in, not yet opened. */
/* Taken off on 28 Sep with the Shots list's ("remove the outlines and dots to
   say when a render is ready") and BACK IN THE GALLERY ONLY on 29 Sep (Simon:
   "add back in the generation ready circle and outline system but just in the
   gallery"). The Create Shots list stays without them (simple.js). */
.shot-tab.fresh { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; color: var(--text); }
.shot-tab .st-new { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.shot-tab .st-x {
  border: none; background: none; color: inherit; cursor: pointer;
  font-size: 12px; line-height: 1; padding: 0 0 0 2px; opacity: .7;
}
.shot-tab .st-x:hover { color: #ff6b6b; opacity: 1; }
.st-rename { width: 90px; font-size: 10.5px; padding: 1px 5px; }
/* THE TICK BESIDE THE FIELD. Enter and Escape are shortcuts; this is the
   control. A rename box whose only way out is a keystroke is a box somebody
   can be stuck in - see the note on lab.ondblclick in js/panel/38-shots.js. */
.st-edit { display: inline-flex; align-items: center; gap: 3px; }
.st-ok {
  border: 1px solid var(--border); background: var(--card); color: var(--text-dim);
  border-radius: 3px; width: 19px; height: 19px; padding: 0; cursor: pointer;
  font-size: 11px; line-height: 1; flex: none;
}
.st-ok:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
/* IT SAYS WHAT IT DOES.

   This was a bare dashed "+" at 12px, at the end of a row that wraps — and
   the report that came back was "we need to be able to create shot folders",
   about a button that had been there all along. A mark you have to already
   know the meaning of, in the place a row happens to end, is not a control
   anybody finds. Same size and weight as the tabs beside it now, so it reads
   as one of them rather than as punctuation.

   Still dashed, and still last: it is the empty slot at the end of the row,
   not a shot. */
.st-add {
  border: 1px dashed var(--border-dash); border-bottom: none;
  background: none; color: var(--text-dim);
  border-radius: 3px 3px 0 0; padding: 4px 11px 5px; cursor: pointer;
  font-size: 10.5px; font-weight: 600; line-height: 1.25;
  flex: none; position: relative; top: 1px; white-space: nowrap;
}
.st-add:hover { color: var(--accent); border-color: var(--accent); }