/* ════════════════════════════════════════════════════════════════
   btw_engine.css — shared cell + treatment styles for nav sketches
   Paper/editorial language, ported from tools/workspace.html.
   ════════════════════════════════════════════════════════════════ */

/* ── swap cell ── */
.swcell{
  position:relative;
  aspect-ratio:1;
  overflow:hidden;
  background:#888;
  container-type:inline-size;   /* text scales to the cell, not the viewport */
}
.sw-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.sw-media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.sw-word{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:rgba(20,18,16,0.5);
  color:#F4F1EA;
  font-family:'Frank Ruhl Libre',serif;font-weight:500;
  font-size:clamp(11px,12cqw,18px);
  text-align:center;
  padding:3px 2px;
  direction:rtl;line-height:1.15;letter-spacing:0.01em;
  pointer-events:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.swcell.no-label .sw-word{display:none}

/* archive name tag — retired (Lee 2026-07-20): the top-right corner belongs to ♡ */
.sw-tag{display:none}

/* swap arrows — left/right, only on hover */
.sw-nav{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:4;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 1px;direction:ltr;
  opacity:0;transition:opacity .15s;pointer-events:none;
}
.swcell:hover .sw-nav{opacity:1}
.sw-arrow{
  pointer-events:all;
  background:rgba(20,18,16,0.42);
  color:#F4F1EA;border:none;cursor:pointer;
  font-family:'Times New Roman',serif;
  font-size:clamp(16px,18cqw,26px);line-height:1;
  width:clamp(19px,22cqw,30px);height:clamp(28px,40cqw,54px);
  display:flex;align-items:center;justify-content:center;
  transition:background .14s;
}
.sw-arrow:hover{background:rgba(20,18,16,0.82)}

/* ── per-cell tools: ♡ like top-RIGHT · ✎ edit top-LEFT (Lee 2026-07-20) ── */
.sw-tools{
  position:absolute;top:0;left:0;right:0;z-index:5;
  display:flex;direction:rtl;justify-content:space-between;align-items:flex-start;
  gap:2px;padding:3px;pointer-events:none;
  opacity:0;transition:opacity .15s;
}
.swcell:hover .sw-tools{opacity:1}
.swcell.liked .sw-tools{opacity:1}      /* keep the heart visible once liked */
.sw-edit{margin-inline-start:auto}      /* rtl row: pushes the ✎ to the far LEFT */
.sw-like,.sw-edit{
  pointer-events:all;cursor:pointer;border:none;
  width:clamp(24px,24cqw,40px);height:clamp(24px,24cqw,40px);
  display:flex;align-items:center;justify-content:center;
  background:rgba(244,241,234,0.92);color:#1A1A18;
  font-size:clamp(15px,15cqw,24px);line-height:1;
  font-family:'Times New Roman',serif;
  transition:background .14s, color .14s, transform .14s;
}
.sw-like:hover,.sw-edit:hover{background:#1A1A18;color:#F4F1EA;transform:scale(1.06)}
.swcell.liked .sw-like{background:#1A1A18;color:#F4F1EA}
/* loved cell gets a thin ink frame */
.swcell.liked{outline:2px solid #1A1A18;outline-offset:-2px;z-index:1}

/* ── white-margin (passe-partout) variant — used by the grid view ── */
.swcell.margin{background:#FFFFFF}
.swcell.margin .sw-media{inset:7%}
.swcell.margin .sw-word{display:none}

/* ── poem-word treatment ── */
.wordcard{
  position:absolute;inset:0;background:transparent;
  display:flex;align-items:center;justify-content:center;
  direction:rtl;padding:13%;
}
.wordcard span{
  text-align:center;white-space:nowrap;
  font-family:'Frank Ruhl Libre',serif;font-weight:500;
  font-size:clamp(10px,26cqw,28px);line-height:1.06;
  color:#1A1A18;letter-spacing:0;
}

/* ── emoji treatment ── */
.emojicard{
  position:absolute;inset:0;background:transparent;
  display:flex;align-items:center;justify-content:center;padding:8%;
}
.emojicard span{
  line-height:1;font-size:clamp(20px,58cqw,140px);
  filter:drop-shadow(0 1px 2px rgba(40,38,33,0.12));
}

/* ── dictionary treatment ── */
.dictcard{
  position:absolute;inset:0;background:#F2EFE8;
  direction:rtl;text-align:right;
  display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;
  /* gap 0.3→0.12em (Lee 2026-07-26): tighter פועל→definition, so the
     definition ends clear of the word label at the card's foot */
  padding:8% 8% 7%;overflow:hidden;gap:0.12em;
}
.dictcard .drow{display:flex;flex-direction:row;align-items:baseline;gap:0.4em;max-width:100%}
.dictcard .dp{
  font-family:'Heebo',sans-serif;font-weight:300;
  font-size:clamp(6px,9cqw,13px);color:#1A1A1A;opacity:0.6;white-space:nowrap;
}
.dictcard .dw{
  font-family:'Frank Ruhl Libre',serif;font-weight:700;
  font-size:clamp(13px,30cqw,46px);line-height:0.92;color:#1A1A1A;letter-spacing:-0.01em;
}
/* 3 lines, not 4 (Lee 2026-07-24): the word label sits at the foot of the card
   in the poem + line spreads, and the 4th line ran underneath it. */
.dictcard .dd{
  font-family:'Heebo',sans-serif;font-weight:400;
  /* leading 1.4→1.25 (Lee 2026-07-26): the 3 clamped lines end higher,
     clearing the word label on every cell size */
  font-size:clamp(7px,12cqw,17px);line-height:1.25;color:#1A1A1A;min-height:0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}

/* ── abstract dissolve sketch ── */
.sk-04f{position:absolute;inset:0;background:var(--c);overflow:hidden}
.sk-04f .ch{position:absolute;inset:-15%;background-size:cover;background-position:center}
.sk-04f .ch-r{mix-blend-mode:screen;transform:translate(-13%,-4%) scale(1.20);filter:blur(6px) saturate(3.2) hue-rotate(-18deg) contrast(1.3);opacity:0.75}
.sk-04f .ch-g{mix-blend-mode:hard-light;transform:translate(0,3%) scale(1.17);filter:blur(8px) saturate(3.5) hue-rotate(8deg) contrast(1.25);opacity:0.65}
.sk-04f .ch-b{mix-blend-mode:screen;transform:translate(13%,-5%) scale(1.24);filter:blur(9px) saturate(3.2) hue-rotate(28deg) contrast(1.3);opacity:0.75}
.sk-04f .depth{position:absolute;inset:0;mix-blend-mode:multiply;pointer-events:none}
.sk-04f .glow{position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at var(--glow-x,40%) var(--glow-y,35%),rgba(255,255,255,0.08) 0%,transparent 60%);mix-blend-mode:overlay;pointer-events:none}
.sk-04f .tint{position:absolute;inset:0;background:var(--c);mix-blend-mode:overlay;opacity:0.5}
.sk-04f .veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,var(--c) 100%);mix-blend-mode:color;opacity:0.4}