/* front.css — the Index sheet (front-sheet.js): small windows on a clean
   sheet. They keep their places; the one being looked at grows over its
   neighbours and plays. */

:root { --fs-t: .4s cubic-bezier(.3, .7, .2, 1); }

.fs { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--nk-bg-cell); }

/* ── Headers: the column letters spell a phrase ────────── */
/* The headers and the sheet sit in layers that are scaled by the zoom (see layout() in
   front-sheet.js). --inv is 1 / zoom: it keeps hairlines and the open window's chrome a
   constant size on screen. */
.fs-colh { position: relative; flex-shrink: 0; overflow: hidden; background: var(--nk-bg-header); border-bottom: 1px solid var(--nk-border-header); }
.fs-colh-in { position: absolute; left: 0; top: 0; transform-origin: 0 0; border-bottom: 0; }
.fs-colh-in .corner { position: relative; z-index: 2; }
.fs-cols { flex: none; display: flex; }
.fs-cols span { flex: none !important; width: var(--cw, 29px); }
.fs-cols span {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center;
  font-size: var(--nk-font-size-xs); color: var(--nk-text-faint);
  border-right: 1px solid var(--nk-border-col-header);
  transition: background .3s, color .3s;
}
.fs-cols span.on { background: #d3f0e0; color: var(--nk-primary-dark); font-weight: 600; box-shadow: inset 0 -2px 0 var(--nk-primary); }

.fs-body { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.fs-main { flex: 1; min-width: 0; min-height: 0; position: relative; display: flex; }
/* The scrollbar's track is always there, so the sheet's width never changes when content grows or
   shrinks. (A track that came and went resized the sheet, which resized the windows, in a loop.) */
.fs-scroll { flex: 1; min-width: 0; overflow-x: auto; overflow-y: scroll; scrollbar-width: thin; }
.fs-zoom { position: relative; overflow: hidden; }
.fs-sheet { position: absolute; left: 0; top: 0; display: flex; transform-origin: 0 0; }

.fs-rows {
  width: var(--nk-w-row-header); flex-shrink: 0; position: relative; z-index: 1500; overflow: hidden;
  background: var(--nk-bg-header); border-right: 1px solid var(--nk-border-header);
}
.fs-rows span {
  height: var(--nk-h-row, 21px); display: flex; align-items: center; justify-content: center;
  font-size: var(--nk-font-size-xs); color: var(--nk-text-faint);
  border-bottom: 1px solid var(--nk-border-row-header);
  transition: background .3s, color .3s;
}
.fs-rows span.on { background: #d3f0e0; color: var(--nk-primary-dark); font-weight: 600; box-shadow: inset -2px 0 0 var(--nk-primary); }

/* ── The sheet ─────────────────────────────────────────── */
.fs-grid {
  position: relative; flex: none; overflow: hidden;
  background-color: var(--nk-bg-cell);
  background-image:
    linear-gradient(to right, transparent calc(100% - 1px * var(--inv, 1)), var(--nk-border-cell) calc(100% - 1px * var(--inv, 1))),
    linear-gradient(to bottom, transparent calc(100% - 1px * var(--inv, 1)), var(--nk-border-cell) calc(100% - 1px * var(--inv, 1)));
}

/* where the open window came from: a dashed outline, like a cut selection */
.fs-ghost {
  position: absolute; z-index: 0; pointer-events: none;
  border: calc(1px * var(--inv, 1)) dashed var(--nk-primary); background: rgba(33, 115, 70, .05);
}
.fs-ghost[hidden] { display: none; }
.fs-in .fs-ghost { display: none; }

/* ── Windows ───────────────────────────────────────────── */
.fs-win {
  position: absolute; z-index: var(--z, 1); display: flex; flex-direction: column; overflow: hidden;
  touch-action: pan-y; -webkit-touch-callout: none;
  background: #fff; border: 1px solid #8f8f8f; box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
  cursor: pointer; outline: none;
  transition: left var(--fs-t), top var(--fs-t), width var(--fs-t), height var(--fs-t), opacity .25s, box-shadow .3s, border-color .3s, z-index 0s linear .4s;
}
.fs-still .fs-win { transition: none; }
.fs-win.dragging {
  z-index: 1001; cursor: grabbing; border-color: var(--nk-primary); box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
  transition: width var(--fs-t), height var(--fs-t), box-shadow .2s;
}
.fs-dragging, .fs-dragging .fs-win { cursor: grabbing; }
.fs-win:hover, .fs-win:focus-visible { border-color: var(--nk-primary); }
.fs-win.on {
  z-index: 1000; border-color: var(--nk-primary); box-shadow: 0 8px 30px rgba(0, 0, 0, .34);
  transition: left var(--fs-t), top var(--fs-t), width var(--fs-t), height var(--fs-t), opacity .25s, box-shadow .3s, border-color .3s, z-index 0s;
}

.fs-wbar {
  height: calc(18px * var(--fs, 1)); flex-shrink: 0; display: flex; align-items: center; gap: 5px; padding: 0 6px; overflow: hidden;
  background: var(--nk-primary); color: #fff; font-size: calc(10.5px * var(--fs, 1)); white-space: nowrap;
  transition: height var(--fs-t);
}
.fs-wbar b { font-weight: 600; }
.fs-wtitle { opacity: .85; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.fs-wpic { position: relative; flex: 1; min-height: 0; background: #1b1b1b; overflow: hidden; }
.fs-win:not(.has-video) .fs-wbar { background: #5f6b63; }
.fs-img, .fs-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fs-vid { opacity: 0; transition: opacity .3s; }
.fs-win.playing .fs-vid { opacity: 1; }

.fs-wstat {
  height: 0; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 0 8px;
  background: var(--nk-bg-ribbon); color: var(--nk-text-dim); font-size: calc(11px * var(--fs, 1)); line-height: 1.3;
  border-top: 0 solid var(--nk-border-major);
  transition: height var(--fs-t);
}
.fs-wstat span { flex: 1; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.fs-wstat em { flex-shrink: 0; font-style: normal; font-weight: 600; color: var(--nk-primary-dark); white-space: nowrap; }
.fs-win.on .fs-wstat { height: calc(34px * var(--fs, 1) * var(--inv, 1)); border-top-width: calc(1px * var(--inv, 1)); font-size: calc(11px * var(--fs, 1) * var(--inv, 1)); gap: calc(12px * var(--inv, 1)); padding: 0 calc(8px * var(--inv, 1)); }
.fs-win.on { border-width: calc(1px * var(--inv, 1)); }
.fs-win.on .fs-wbar { height: calc(18px * var(--fs, 1) * var(--inv, 1)); font-size: calc(10.5px * var(--fs, 1) * var(--inv, 1)); gap: calc(5px * var(--inv, 1)); padding: 0 calc(6px * var(--inv, 1)); }

/* the corner grip: drag it to resize a resting window */
.fs-grip {
  position: absolute; right: 0; bottom: 0; z-index: 6; width: calc(16px * var(--inv, 1)); height: calc(16px * var(--inv, 1));
  cursor: nwse-resize; touch-action: none; opacity: 0; transition: opacity .15s;
  background: linear-gradient(135deg, transparent 50%, #fff 50%, #fff 58%, var(--nk-primary) 58%);
}
.fs-win:hover .fs-grip, .fs-win.dragging .fs-grip { opacity: 1; }
.fs-win.on .fs-grip, .fs-trash-armed .fs-grip { display: none; }
@media (hover: none) { .fs-grip { opacity: .55; } }
.fs-sizing, .fs-sizing .fs-win { cursor: nwse-resize; }

.fs-win.to-trash { opacity: .55; transform: scale(.7); transition: transform .15s, opacity .15s; }
.fs-win.gone { opacity: 0; transform: scale(.15); transition: transform .17s ease-in, opacity .17s ease-in; }
.fs-win.fresh { animation: fs-fresh 1.3s ease-out; }
@keyframes fs-fresh { 0%, 60% { box-shadow: 0 0 0 4px rgba(33, 115, 70, .45), 0 1px 5px rgba(0, 0, 0, .2); } 100% { box-shadow: 0 0 0 0 rgba(33, 115, 70, 0), 0 1px 5px rgba(0, 0, 0, .2); } }

/* ── Add and trash, the catalogue, the empty sheet ─────── */
.fs-tools { position: absolute; right: 16px; bottom: 14px; z-index: 30; display: flex; gap: 8px; }
.fs-tool {
  width: calc(36px * var(--fs, 1)); height: calc(36px * var(--fs, 1)); padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: #fff; border: 1px solid #a6a6a6; color: var(--nk-primary); font: 400 calc(24px * var(--fs, 1))/1 var(--nk-font);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18); transition: transform .15s, background .15s, border-color .15s, color .15s;
}
.fs-tool svg { width: calc(18px * var(--fs, 1)); height: calc(18px * var(--fs, 1)); fill: currentColor; }
.fs-tool:hover, .fs-tool:focus-visible { background: #e8f5e9; border-color: var(--nk-primary); outline: none; }
.fs-tool.active { background: var(--nk-primary); border-color: var(--nk-primary); color: #fff; }
#fsTrash { color: var(--nk-text-dim); }
.fs-dragging #fsTrash { border-color: #c0392b; color: #c0392b; border-style: dashed; }
#fsTrash.hot { background: #fde7e9; border: 1px solid #e81123; color: #e81123; transform: scale(1.25); }
#fsTrash.hint { animation: fs-hint .45s 2; }
/* Armed trash: the next work clicked leaves the sheet */
#fsTrash.armed { background: #e81123; border-color: #e81123; color: #fff; }
.fs-trash-armed .fs-grid { cursor: crosshair; }
.fs-trash-armed .fs-win:hover { outline: 2px solid #e81123; outline-offset: 2px; opacity: .8; }
@keyframes fs-hint { 50% { transform: translateX(-4px) rotate(-8deg); border-color: #e81123; color: #e81123; } }

.fs-cat {
  position: absolute; right: 16px; bottom: calc(22px + 36px * var(--fs, 1)); z-index: 31; display: flex; flex-direction: column;
  width: min(330px, calc(100% - 32px)); max-height: min(440px, calc(100% - 72px));
  background: #f9f9f9; border: 1px solid #a0a0a0; box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  font: calc(11.5px * var(--fs, 1)) var(--nk-font); color: var(--nk-text);
}
.fs-cat[hidden] { display: none; }
.fs-cat-head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 2px 10px; border-bottom: 1px solid #d6d6d6; background: var(--nk-bg-ribbon); }
.fs-cat-head b { font-size: calc(12.5px * var(--fs, 1)); }
.fs-cat-head span { color: var(--nk-text-ghost); }
.fs-cat-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0 8px 8px; border: 1px solid #b4b4b4; background: #fff; }
.fs-cat-item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 8px 4px 4px; text-align: left; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--nk-border-cell); background: none; font: inherit; color: inherit;
}
.fs-cat-item:hover, .fs-cat-item:focus-visible { background: #e8f5e9; outline: none; }
.fs-cat-item img { width: calc(54px * var(--fs, 1)); height: calc(38px * var(--fs, 1)); object-fit: cover; flex-shrink: 0; background: #eee; border: 1px solid #d0d0d0; }
.fs-cat-item span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fs-cat-item b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-cat-item i { font-style: normal; color: var(--nk-text-ghost); font-size: calc(10.5px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-cat-item em { font-style: normal; font-size: calc(16px * var(--fs, 1)); color: var(--nk-primary); }
.fs-cat-none { padding: 14px 10px; color: var(--nk-text-ghost); font-style: italic; }

.fs-empty {
  position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0 24px; pointer-events: none;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: calc(17px * var(--fs, 1)); font-style: italic; color: var(--nk-text-dim);
}
.fs-empty[hidden] { display: none; }
.fs-in .fs-tools, .fs-in .fs-cat { display: none; }

/* ── A work opened: it takes the whole sheet ───────────── */
.fs-in .fs-win:not(.is-in) { opacity: 0; pointer-events: none; }
.fs-in .fs-win.is-in { box-shadow: none; border-color: #8f8f8f; }
.fs-in .is-in .fs-wbar, .fs-in .is-in .fs-wstat { height: 0; border-top-width: 0; }

.fs-prog { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: calc(12px * var(--inv, 1)); z-index: 4; cursor: pointer; }
.fs-prog::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(3px * var(--inv, 1)); background: rgba(255, 255, 255, .35); }
.fs-prog i { position: absolute; left: 0; bottom: 0; height: calc(3px * var(--inv, 1)); width: 0; background: var(--nk-primary); }
.fs-in .is-in.has-video .fs-prog { display: block; }

.fs-info {
  width: 360px; flex-shrink: 0; min-height: 0; display: flex; flex-direction: column;
  background: #fff; border-left: 1px solid var(--nk-border-major); user-select: text;
}
.fs-info[hidden] { display: none; }
.fs-info h2 { font-size: calc(19px * var(--fs, 1)); font-weight: 700; margin: 0 0 12px; color: var(--nk-text); line-height: 1.25; }
.fs-info .desc { font-size: calc(13px * var(--fs, 1)); line-height: 1.6; color: var(--nk-text-secondary); white-space: pre-line; margin: 0 0 18px; }
.fs-info .open-link {
  display: inline-block; text-decoration: none; padding: 7px 16px;
  background: var(--nk-primary); color: #fff; border: 1px solid var(--nk-primary);
  font-size: calc(10px * var(--fs, 1)); font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
}
.fs-info .open-link:hover { background: var(--nk-primary-hover); }

/* ── Buttons beside the sheet tabs ─────────────────────── */
.fs-btn { display: none; }
body.sheet-front #btnRandom { display: none; }
body.sheet-front #fsSound { display: inline-block; }
body.sheet-front.fs-moved:not(.fs-entered) #fsReset { display: inline-block; }
body.sheet-front.fs-moved:not(.fs-entered) #fsArrange { display: inline-block; }
body.fs-entered #fsClose, body.fs-entered.fs-has-video #fsPlay { display: inline-block; }
body.fs-entered .sheet-tab.add { display: none; }
.sheet-tab.fs-back { color: var(--nk-primary-dark); white-space: nowrap; }
body.fs-entered .sheet-tab { white-space: nowrap; }
body.fs-entered .sheet-tab-list { overflow-x: auto; scrollbar-width: none; min-width: 0; }
body.fs-entered .mode-buttons { flex-shrink: 0; padding-left: 8px; }

/* ── Small screens: two columns, the sheet scrolls ─────── */
.fs-sm .fs-cols span { font-size: calc(9px * var(--fs, 1)); border-right-color: transparent; }
.fs-sm .fs-wstat em { display: none; }
.fs-in .fs-scroll { overflow: hidden; }
.fs-sm.fs-in .fs-body { flex-direction: column; }
.fs-sm.fs-in .fs-main { flex: 0 0 42%; }
.fs-sm.fs-in .fs-info { flex: 1; width: auto; border-left: 0; border-top: 1px solid var(--nk-border-major); }

@media (prefers-reduced-motion: reduce) {
  :root { --fs-t: .01s; }
}

/* ── Zoom control in the status bar ────────────────────── */
.status-bar .zoom.fs-zoomer { display: inline-flex; align-items: center; gap: 4px; }
.fs-zoomer button {
  width: 18px; height: 18px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  font: 400 calc(14px * var(--fs, 1))/1 var(--nk-font); opacity: .85;
}
.fs-zoomer button:hover, .fs-zoomer button:focus-visible { opacity: 1; background: rgba(255, 255, 255, .18); outline: none; }
.fs-zoomer input[type="range"] { width: 96px; height: 14px; margin: 0; accent-color: #fff; cursor: pointer; }
.fs-zoom-val { min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
body.fs-entered .fs-zoomer { visibility: hidden; }