:root{
    --scale:1;
    /* JHACAL Dark Palette */
    --bg:#1a1d21;
    --ink:#e5e7eb;
    --panel:#1f2328;
    --border:#3a3f48;
    --card-bg:#272b31;

    /* JHACAL Gold & Accent */
    --jhacal-gold:#f6c177;
    --jhacal-orange:#ff9800;
    --jhacal-gold-dim:#c9a84c;

    /* Category Sets — warm, earthy JHACAL tones */
    --set-1:#c9a84c;   /* Answers — muted green */
    --set-2:#c97b3a;   /* Care — earthy orange */
    --set-3:#3d8a8a;   /* Food & Drink — teal */
    --set-4:#1e1433;   /* Comfort — deep black-purple */
    --set-5:#b07a3a;   /* User pages cycle — warm amber */
    --set-6:#b05070;   /* rose */
    --set-7:#4a8bbf;   /* blue */
    --set-8:#4d8c50;   /* green */
    --set-9:#c88820;   /* gold-amber */
    --emergency:#DC2626; /* Emergency tiles */

    --tile-radius:20px;
    --tile-min:140px;
    --g:calc(12px * var(--scale));

    /* JHACAL Settings variables */
    --jhacal-primary-font-scale:1;
    --jhacal-interface-font-scale:1;
  }

  /* High contrast toggle */
  body.jhacal-high-contrast {
    --bg:#000; --ink:#fff; --panel:#111; --border:#fff;
    --set-1:#c9a84c; --set-2:#ff0; --set-3:#0ff; --set-4:#f0f;
    --set-5:#f6c177; --set-6:#f00; --set-7:#5af; --set-8:#0f0; --set-9:#ff0;
    --emergency:#ff4444;
  }

  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{height:100%}
  body{
    margin:0;background:var(--bg);color:var(--ink);
    font:700 calc(18px*var(--scale)*var(--jhacal-interface-font-scale))/1.2 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    display:flex;align-items:center;justify-content:center;
    /* Prevent iOS Safari overriding font sizes when accessibility text size is set */
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }
  .app{
    width:100%;max-width:1024px;
    /* iOS safe: 100vh fallback, then dynamic viewport height */
    height:100dvh;
    height:100dvh;
    max-height:768px;
    padding:var(--g);
    /* Safe area insets: keeps content clear of notch, Dynamic Island, home bar */
    padding-top:max(var(--g), env(safe-area-inset-top));
    padding-bottom:max(var(--g), env(safe-area-inset-bottom));
    padding-left:max(var(--g), env(safe-area-inset-left));
    padding-right:max(var(--g), env(safe-area-inset-right));
    display:grid;grid-template-rows:auto auto 1fr auto;gap:var(--g);
    position:relative;
  }

  /* Header */
  .head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--g)}
  .brand{display:flex;align-items:center;gap:10px}
  .brand img{height:42px;width:auto;min-width:42px;flex-shrink:0;display:block;}
  .title{font-weight:900;font-size:calc(26px * var(--scale) * var(--jhacal-primary-font-scale));background:linear-gradient(135deg,var(--jhacal-gold),var(--jhacal-orange));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
  .headTools{display:flex;gap:6px;align-items:center;position:relative;flex-wrap:wrap;justify-content:flex-end}
  .iconBtn{
    background:var(--card-bg);border:1px solid rgba(245,166,35,0.50);border-radius:10px;
    width:44px;height:44px;font-size:1.25rem;cursor:pointer;display:grid;place-items:center;
    transition:all 0.2s ease;color:var(--ink);flex-shrink:0;
  }
  .iconBtn:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.25);}
  .iconBtn.emergency{
    background:var(--emergency);color:#fff;border-color:var(--emergency);
    animation:emergencyPulse 2s infinite;
  }
  
  @keyframes emergencyPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }

  /* Settings dropdown */
  .settingsMenu{
    position:absolute;top:48px;right:0;display:none;z-index:1000;
    background:var(--card-bg);border:2px solid var(--border);border-radius:12px;
    box-shadow:0 10px 28px rgba(0,0,0,.5); padding:8px; min-width:240px; color:var(--ink);
  }
  body.jhacal-high-contrast .settingsMenu{background:var(--panel);color:var(--ink)}
  .settingsMenu.show{display:block}
  .settingsMenu .row{display:flex;gap:8px;margin:6px 0; align-items:center}
  .settingsMenu .btn{
    flex:1 1 auto;border:2px solid var(--border);border-radius:10px;background:var(--panel);
    font-weight:900;padding:10px 12px;cursor:pointer;font-size:16px;color:var(--ink);
    transition:all 0.1s ease;
  }
  .settingsMenu .btn:hover{transform:scale(1.02)}
  body.jhacal-high-contrast .settingsMenu .btn{background:var(--panel);color:var(--ink)}
/* Status indicators */
.statusBar{
  position:absolute;top:0;left:0;right:0;height:4px;z-index:1001;
  background:linear-gradient(90deg, var(--set-1) 0%, var(--set-2) 100%);
  opacity:0;transition:opacity 0.3s ease;
}
.statusBar.show{opacity:1}
.statusBar.offline{background:#666}
.statusBar.error{background:var(--emergency)}
.statusBar.speaking{
  background:linear-gradient(90deg, var(--set-1), var(--set-2), var(--set-3), var(--set-1));
  background-size:200% 100%;
  animation:speakingPulse 1.5s ease-in-out infinite;
}

@keyframes speakingPulse {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Voice activity indicator — hidden: spoken tile text display not needed [D-SS-4 S15] */
.voiceIndicator{
  position:fixed;bottom:20px;left:20px;display:none;
  background:var(--set-1);color:#fff;padding:8px 12px;border-radius:20px;
  font-size:14px;font-weight:600;box-shadow:0 4px 12px rgba(0,0,0,0.15);
  z-index:1000;animation:voiceBounce 0.6s ease-in-out infinite alternate;
}
.voiceIndicator.show{display:none;} /* D-SS-4 S15 — keep display:none even when active */

@keyframes voiceBounce {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

  /* Page Tabs */
  /* D-SS-2: horizontal scroll on iPhone — momentum scrolling + hide scrollbar */
  .pageBar{position:relative;display:flex;gap:8px;overflow-x:auto;padding:12px 0 4px 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .pageBar::-webkit-scrollbar{display:none}
  .tab{
    position:relative;
    flex:0 0 auto;padding:6px 14px;background:var(--panel);border:2px solid var(--border);
    border-radius:999px;font-weight:900;cursor:pointer;white-space:nowrap;user-select:none;
    color:var(--ink);
    transition:transform .05s ease;
  }
  .tab:active{transform:scale(.98)}
  .tab:hover{transform:scale(1.02);border-color:var(--jhacal-gold-dim);}
  .tab.set-1{border-color:var(--set-1);color:var(--set-1)}
  .tab.set-1.active{background:var(--set-1);color:#fff}
  .tab.set-2{border-color:var(--set-2);color:var(--set-2)}
  .tab.set-2.active{background:var(--set-2);color:#fff}
  .tab.set-3{border-color:var(--set-3);color:var(--set-3)}
  .tab.set-3.active{background:var(--set-3);color:#fff}
  .tab.set-4{border-color:var(--set-4);color:var(--set-4)}
  .tab.set-4.active{background:var(--set-4);color:#fff}
  .tab.set-5{border-color:var(--set-5);color:var(--set-5)}
  .tab.set-5.active{background:var(--set-5);color:#fff}
  .tab.set-6{border-color:var(--set-6);color:var(--set-6)}
  .tab.set-6.active{background:var(--set-6);color:#fff}
  .tab.set-7{border-color:var(--set-7);color:var(--set-7)}
  .tab.set-7.active{background:var(--set-7);color:#fff}
  .tab.set-8{border-color:var(--set-8);color:var(--set-8)}
  .tab.set-8.active{background:var(--set-8);color:#fff}
  .tab.set-9{border-color:var(--set-9);color:var(--set-9)}
  .tab.set-9.active{background:var(--set-9);color:#fff}
  .tab.emergency{border-color:var(--emergency);color:var(--emergency)}
  .tab.emergency.active{background:var(--emergency);color:#fff}

.tab .iconBar{
  position:absolute;top:-22px;right:2px;display:none;gap:2px;align-items:center;z-index:10;
}
.tab.active .iconBar, .tab:hover .iconBar{display:flex}
.tab .iconBar .icon{
  background:var(--card-bg);
  border:2px solid var(--border);border-radius:4px;
  font-size:12px;line-height:1;padding:3px 5px;cursor:pointer;user-select:none;
  box-shadow:0 2px 4px rgba(0,0,0,0.4);color:var(--ink);
  min-width:16px;text-align:center;
}
.tab .iconBar .icon:hover{
  background:var(--panel);transform:scale(1.1);
}
/* Tiles */
.grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:calc(16px * var(--scale));height:100%}

/* Small phones: 2-column grid so tiles are large enough to tap accurately */
@media (max-width:480px){
  .grid{grid-template-columns:repeat(2,1fr);gap:calc(10px * var(--scale));}
  :root{--tile-min:100px;}
  .pageBar{padding:8px 0 2px 0;gap:6px;}
}

/* Compact height (iPhone SE, short phones): shrink tile minimum so 2x2 grid fits the screen */
@media (max-width:480px) and (max-height:700px){
  :root{--tile-min:80px;}
  .controls{height:calc(72px * var(--scale));}
}
/* Very small height (landscape or 4" class): further reduce */
@media (max-width:480px) and (max-height:550px){
  :root{--tile-min:60px;}
  .controls{height:calc(56px * var(--scale));}
}

/* Landscape on small phones */
@media (max-height:500px) and (orientation:landscape){
  .grid{grid-template-columns:repeat(3,1fr);}
  :root{--tile-min:80px;}
  .app{gap:6px;}
  .pageBar{padding:6px 0 2px 0;gap:4px;}
}

.tile{
  position:relative;
  min-height:var(--tile-min);background:var(--panel);
  border:3px solid var(--border);border-radius:var(--tile-radius);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;font-weight:900;gap:calc(6px * var(--scale));padding:calc(8px * var(--scale));
  cursor:pointer;transition:all 0.1s ease;user-select:none;
  /* overflow:hidden was clipping descenders (j,g,p,y) — use clip on pseudo only */
  overflow:visible;
}
.tile.dragging{
  opacity:0.5;transform:scale(0.95);z-index:1000;
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
}
.tile.drag-over{
  background:var(--set-1);color:#fff;transform:scale(1.05);
}
  .tile:hover{transform:scale(1.02);box-shadow:inset 0 0 0 2px rgba(246,193,119,0.25);}
  .tile:active{transform:scale(0.98)}
  .tile.pressed{
    background:var(--set-1);color:#fff;transform:scale(0.95);
  }
  /* No ::before shimmer — was causing shadow bleed between tiles with overflow:visible */
  .tile.emergency{
    border-color:var(--emergency);
    background:rgba(220, 38, 38, 0.1);
  }
  .tile.emergency.pressed{
    background:var(--emergency);color:#fff;
  }
  .tile .main{font-size:calc(32px * var(--scale) * var(--jhacal-primary-font-scale));white-space:normal;overflow-wrap:break-word;word-break:break-word;overflow:hidden;text-align:center;line-height:1.25}
  .tile .sub{font-size:calc(16px * var(--scale) * var(--jhacal-primary-font-scale));line-height:1.3;opacity:.9}
  .tile .iconBar{position:absolute;top:6px;right:6px;display:flex;gap:6px}
  .tile .icon{
    background:var(--card-bg);border:2px solid var(--border);border-radius:10px;padding:4px 6px;
    font-size:14px;line-height:1;cursor:pointer;user-select:none;color:var(--ink);
  }
  body.jhacal-high-contrast .tile .icon{background:var(--panel);color:var(--ink)}

  /* Controls */
  .controls{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(16px * var(--scale));height:calc(96px * var(--scale))}
  .btn{background:var(--card-bg);border:3px solid var(--border);border-radius:16px;font-size:calc(20px * var(--scale));font-weight:900;cursor:pointer;transition:all 0.1s ease;color:var(--ink);}
  .btn:hover{transform:scale(1.02)}
  .btn:active{transform:scale(0.98)}
  body.jhacal-high-contrast .btn{background:var(--panel);color:var(--ink)}

  /* Per-set tile accent colors */
  .set-1 .tile{color:var(--set-1)} .set-2 .tile{color:var(--set-2)}
  .set-3 .tile{color:var(--set-3)} .set-4 .tile{color:var(--set-4)}
  .set-5 .tile{color:var(--set-5)} .set-6 .tile{color:var(--set-6)}
  .set-7 .tile{color:var(--set-7)} .set-8 .tile{color:var(--set-8)}
  .set-9 .tile{color:var(--set-9)}
  .emergency .tile{color:var(--emergency)}

  /* set-4 (deep black-purple) needs special treatment — dark bg, light contrast text */
  .set-4 .tile{
    background:#1e1433;
    border-color:#4a2d7a;
    color:#c9b8f0;
  }
  .set-4 .tile.pressed{
    background:#2d1b4e;
    color:#fff;
  }
  .tab.set-4{border-color:#4a2d7a;color:#c9b8f0}
  .tab.set-4.active{background:#1e1433;color:#c9b8f0;border-color:#4a2d7a}

  /* Tutor overlay */
  .tutorOverlay{
    position:fixed;inset:0;display:none;align-items:flex-start;justify-content:center;
    background:rgba(0,0,0,0.35);backdrop-filter:blur(2px);z-index:9999;padding:20px;
  }
  .tutorOverlay.show{display:flex}
  .tutorPanel{
    width:min(960px,96vw);margin-top:8px;
    background:var(--card-bg);color:var(--ink);border:2px solid var(--border);border-radius:16px;
    box-shadow:0 12px 36px rgba(0,0,0,.5);padding:16px 16px 12px
  }
  .tutorPanel h2{margin:0 0 8px 0;font-size:24px;background:linear-gradient(135deg,var(--jhacal-gold),var(--jhacal-orange));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
  .tutorPanel h3{margin:14px 0 6px 0;font-size:18px;color:var(--jhacal-gold-dim);}
  .tutorPanel p{margin:6px 0;font:600 15px/1.35 system-ui;color:var(--ink);}
  .tutorActions{display:flex;gap:10px;justify-content:flex-end;margin-top:10px;flex-wrap:wrap}
  .chip{background:var(--card-bg);border:2px solid var(--border);color:var(--ink);border-radius:12px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 14px;cursor:pointer;transition:all 0.1s ease;}
  .chip:hover{transform:scale(1.02)}

  /* Generic modal shell */
  .modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);align-items:center;justify-content:center;z-index:70}
  .modal.open{display:flex}
  .dialog{background:var(--card-bg);color:var(--ink);padding:14px;border-radius:12px;width:min(900px,92vw);max-height:88vh;overflow:auto;box-shadow:0 10px 30px rgba(0,0,0,.5);border:2px solid var(--border);}
  .dialog h3{margin:0 0 8px 0} .dialog p{margin:0 0 8px 0;color:#9ca3af}
  body.jhacal-high-contrast .dialog{background:var(--panel);color:var(--ink)}

  /* Emergency Alert Modal */
  .emergencyAlert{
    position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);
    background:var(--emergency);color:#fff;padding:20px;border-radius:16px;
    font-size:24px;font-weight:900;text-align:center;z-index:10000;
    box-shadow:0 20px 60px rgba(220, 38, 38, 0.4);
    animation:emergencyAlert 0.3s ease-out;
    display:none;
  }
  .emergencyAlert.show{display:block}
  
  @keyframes emergencyAlert {
    from { transform:translate(-50%, -50%) scale(0.8); opacity:0; }
    to { transform:translate(-50%, -50%) scale(1); opacity:1; }
  }