/* styles.css  (FULL)
   ============================================================
   FONT: NewGardiner (PUA-only) + Noto for Unicode hieroglyphs
   UI: Noto Sans for transliteration characters ꜣ ꜥ ʾ etc.
   ============================================================ */

/* NewGardiner PUA (BMP) */
@font-face{
  font-family:"NewGardiner";
  src:url("https://cdn.jsdelivr.net/gh/mitsof/NewGardiner@main/NewGardinerBMP.ttf") format("truetype");
  font-display:swap;
  unicode-range: U+E000-E42E;
}

/* Noto: hieroglyphs + UI */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Egyptian+Hieroglyphs&family=Noto+Sans:wght@400;700;800&display=swap");

:root{
  --unitH: 64px;
  --pad: 6px;
  --gap: 8px;
  --uiFont: "Noto Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

body{
  margin:0;
  font-family: var(--uiFont);
  background:#fff;
}

/* =======================
   TOP DOCK (sticky: output + tools)
======================= */

.topDock{
  position: sticky;
  top: 0;
  z-index: 1200;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(1.2) blur(2px);
  border-bottom: 1px solid rgba(0,0,0,.18);
}

/* =======================
   OUTPUT (max 4 rows + internal scroll)
   NOTE: extra top padding so OUTSIDE badges don't clip
======================= */

#outputBox{
  width: 100%;
  box-sizing: border-box;

  padding: 10px;
  padding-top: 18px; /* ✅ allow badge to sit above tile without clipping */
  padding-left: calc(10px + env(safe-area-inset-left, 0px));
  padding-right: calc(10px + env(safe-area-inset-right, 0px));

  border-bottom: 1px solid rgba(0,0,0,.18);

  min-height: 130px;

  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  align-items: flex-start;

  user-select: none;

  max-height: calc(
    (var(--unitH) + (var(--pad) * 2)) * 4 +
    (var(--gap) * 3) +
    20px
  );

  overflow-y: auto;
  overscroll-behavior: contain;
}

/* body content */
.controlsWrap{ padding: 12px; }

/* =======================
   COLLAPSIBLE SECTIONS (Tools / Pinned)
======================= */

.sec{
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.secHead{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding: 8px 12px;
  border:0;
  background: transparent;

  font-family: var(--uiFont);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .02em;
  opacity: .85;

  cursor:pointer;
  user-select:none;
}

.secHead:active{ transform: scale(0.99); }

.secChevron{
  font-size: 14px;
  opacity: .75;
  transition: transform .15s ease;
}

.sec.collapsed .secChevron{
  transform: rotate(-90deg);
}

.secBody{
  padding: 0 12px 10px;
}

.sec.collapsed .secBody{
  display:none;
}

/* =======================
   SPECIAL KEYS (COMPACT)
======================= */

.special-keys{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin: 6px 0 0;
}

.key-row{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(42px, 1fr));
  gap:6px;
}

.skey{
  font-family: var(--uiFont);
  border-radius:10px;
  border:1px solid rgba(0,0,0,.2);
  background:rgba(255,255,255,.7);

  padding:6px 4px;
  min-height:40px;

  font-weight:900;
  font-size:11px;
  line-height:1;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  white-space:nowrap;

  cursor:pointer;
  user-select:none;
}

.skey .icon{ font-size:14px; line-height:1; }
.skey:active{ transform:scale(0.97); }
.skey:disabled{ opacity:.5; cursor:not-allowed; }

/* =======================
   TABS STRIP
======================= */

.tabs{
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding:6px 0 10px;
  margin:8px 0 6px;
  -webkit-overflow-scrolling: touch;
}

.tab{
  flex:0 0 auto;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.2);
  background:rgba(255,255,255,.7);
  font-weight:900;
  font-size:12px;
  cursor:pointer;
  user-select:none;
  line-height:1;
  font-family: var(--uiFont);
}

.tab.active{ background:rgba(0,0,0,.12); }

/* =======================
   SEARCH BAR (+ Uniliterals toggle)
======================= */

.searchWrap{
  display:flex;
  gap:6px;
  align-items:center;
  margin: 6px 0 8px;
}

.searchInput{
  flex:1 1 auto;
  min-width: 0;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.2);
  background:rgba(255,255,255,.7);
  font-weight:700;
  font-size:13px;
  outline:none;
  font-family: var(--uiFont);
}

.searchInput:focus{
  background:rgba(255,255,255,.95);
}

.searchClear{
  flex:0 0 auto;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.2);
  background:rgba(255,255,255,.7);
  cursor:pointer;
  font-weight:900;
  line-height:1;
  font-family: var(--uiFont);
}

.searchClear:active{ transform:scale(0.97); }
.searchClear.active{ background: rgba(0,0,0,.12); }

/* =======================
   OPTIONS ROW
======================= */

.optsRow{
  display:flex;
  gap:14px;
  align-items:center;
  margin: 0 0 10px;
}

.optToggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:900;
  opacity:.75;
  user-select:none;
  font-family: var(--uiFont);
}

.optToggle input{ transform: scale(1.1); }

/* =======================
   HINT
======================= */

.hint{
  font-size:12px;
  opacity:.75;
  margin:6px 0 12px;
  line-height:1.3;
  font-family: var(--uiFont);
}

/* =======================
   FAVORITES BAR
======================= */

.favBar{
  display:flex;
  gap:4px;
  overflow-x:auto;
  padding:6px 0 2px;
  margin:0;
  -webkit-overflow-scrolling: touch;
}
.favBar:empty{
  padding: 6px 0 0;
  opacity: .65;
}
.favBar:empty::before{
  content: "No pinned glyphs yet.";
  font-size: 12px;
}

/* =======================
   MAIN GLYPH GRID
======================= */

.glyph-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(42px, 1fr));
  gap:14px 6px;
  margin-bottom:10px;
}

.glyphKey{
  position: relative;
  width: 100%;
  min-height: 40px;
  padding-top: 12px;     /* room for phonetic above */
  padding-right: 10px;   /* space for pin right */
}

.glyphKey .glyph-btn{
  width:100%;
  font-family: "NewGardiner","Noto Sans Egyptian Hieroglyphs","Segoe UI Historic",serif;
  font-size:26px;
  line-height:1;
  padding:6px 4px;
  min-height:40px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.2);
  background:rgba(255,255,255,.7);
  cursor:pointer;
  user-select:none;
}

.glyph-btn:active{ transform:scale(0.97); }

/* PIN outside key */
.pinBtn{
  position:absolute;
  top:0;
  right:0;
  transform: translate(30%, -30%);
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(0,0,0,.25);
  border-radius:999px;
  cursor:pointer;
  opacity:0;
  transition: opacity .12s ease;
}

.glyphKey.pinned .pinBtn{ opacity:1; }
@media (hover:hover){
  .glyphKey:hover .pinBtn{ opacity:.75; }
}
.glyphKey:active .pinBtn{ opacity:.75; }

.glyphKey.pinned .glyph-btn{
  background: rgba(255, 240, 245, .95);
  border-color: rgba(0,0,0,.35);
}

/* Favorites compact chips */
.favBar .glyphKey{
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;

  padding-top: 10px !important;
  padding-right: 0 !important;
  min-height: 32px !important;

  display: inline-flex !important;
  align-items: center !important;
}

.favBar .glyphKey .glyph-btn{
  width: auto !important;
  min-width: 34px !important;

  min-height: 32px !important;
  padding: 4px 8px !important;
  font-size: 22px !important;
  border-radius: 999px !important;
}

.favBar .glyphKey .pinBtn{
  width: 18px !important;
  height: 18px !important;
  font-size: 11px !important;
  transform: translate(20%, -20%) !important;
  opacity: .85 !important;
}

/* Gardiner code + phonetic labels */
.keyCode{
  position:absolute;
  left:-2px;
  bottom:-10px;
  font-size:9px;
  font-weight:900;
  opacity:.7;
  pointer-events:none;
  white-space:nowrap;
  font-family: var(--uiFont);
}

.keyPhon{
  position:absolute;
  top:0px;
  left:6px;
  font-size:10px;
  font-weight:900;
  opacity:.75;
  pointer-events:none;
  white-space:nowrap;
  font-family: var(--uiFont);
}

.keyCode.hidden,
.keyPhon.hidden{ display:none; }

/* =======================
   OUTPUT TILES
======================= */

.tile{
  border:1px solid rgba(0,0,0,.20);
  border-radius:12px;
  padding:var(--pad);
  height: calc(var(--unitH) + (var(--pad) * 2));
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.65);
  box-sizing:border-box;
  position:relative;
}

.tile.selected{
  outline:3px solid rgba(0,0,0,.55);
  outline-offset:1px;
  background:rgba(255,255,255,.9);
}

/* If an old inside-badge element still exists somewhere, hide it */
.tile .badge{ display:none !important; }

/* ✅ Badge OUTSIDE tile top-right via data-badge (matches render.js) */
.tile[data-badge]::after{
  content: attr(data-badge);
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 10;
  pointer-events: none;

  font-size: 12px;
  font-weight: 900;
  opacity: .75;
  font-family: var(--uiFont);

  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.25);
  border-radius: 999px;
  padding: 2px 6px;
  line-height: 1;
}

/* =======================
   STACKING BLOCKS
======================= */

.blkOuter{ position:relative; display:inline-block; }

.blkInner{
  position:absolute;
  top:0; left:0;
  transform-origin: top left;
  display:inline-flex;
  align-items:center;
}

.blkInner.v{ flex-direction:column; }
.blkInner.h{ flex-direction:row; }
.blkInner svg{ display:block; }

svg text{
  font-family: "NewGardiner","Noto Sans Egyptian Hieroglyphs","Segoe UI Historic",serif !important;
}

/* =======================
   CARTOUCHE
======================= */

.cartOuter{ position: relative; display: inline-block; height: var(--unitH); }
.cartSvg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.cartContent{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }

/* =======================
   TOAST
======================= */

.toast{
  position:fixed;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  background:rgba(0,0,0,.82);
  color:#fff;
  padding:10px 12px;
  border-radius:999px;
  font-size:12px;
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
  z-index:10000;
  font-family: var(--uiFont);
}
.toast.show{ opacity:1; }
```0