/* One screen, no scrolling, nothing moves when you touch it.
   Cell colours are the modified Fitzgerald Key, the colour code AAC users already read. */
[hidden]{display:none!important}   /* a display rule elsewhere must never outrank hidden */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
:root{
  --gap:6px; --radius:14px;
  --p:#FFD93D;  /* person  */ --v:#78C850;  /* verb    */ --d:#4FA3E3; /* describe */
  --q:#B07BE0;  /* ask     */ --pl:#F58CB4; /* place   */ --s:#FFFFFF; /* social   */
  --n:#F5A623;  /* noun    */
  --bg:#EEF1F4; --panel:#FFFFFF; --ink:#12161A; --dim:#6A737C; --line:#C9D1D9;
  --barbg:#FFFFFF; --shadow:0 1px 0 rgba(0,0,0,.18);
}
body[data-theme=night]{--bg:#0E1216;--panel:#171D23;--ink:#EDF2F7;--dim:#93A1AE;--line:#2B343D;--barbg:#171D23;
  --p:#C8A72B;--v:#4F8F38;--d:#2E6EA0;--q:#7A54A0;--pl:#A85D7C;--s:#3A434C;--n:#A8711A;--shadow:0 1px 0 rgba(0,0,0,.5)}
body[data-theme=contrast]{--bg:#000;--panel:#000;--ink:#FFF;--dim:#FFF;--line:#FFF;--barbg:#000;
  --p:#FFE600;--v:#00E05A;--d:#00C8FF;--q:#E06BFF;--pl:#FF7AB8;--s:#FFF;--n:#FFA000;--shadow:none}
body[data-theme=calm]{--bg:#F3EFE7;--panel:#FBF8F2;--ink:#2B2721;--dim:#7A7266;--line:#DED6C7;--barbg:#FBF8F2;
  --p:#E9CE86;--v:#9FBF8A;--d:#9FB8CE;--q:#BFA6CE;--pl:#DCA8B8;--s:#FBF8F2;--n:#DFB183}

html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font:600 16px/1.15 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  touch-action:manipulation;overscroll-behavior:none;user-select:none;-webkit-user-select:none}
#app{position:fixed;inset:0;display:flex;flex-direction:column;gap:var(--gap);padding:var(--gap);
  padding-top:max(var(--gap),env(safe-area-inset-top));padding-bottom:max(var(--gap),env(safe-area-inset-bottom))}

/* ---------- the sentence bar ---------- */
#bar{flex:0 0 auto;height:15vh;min-height:74px;display:flex;gap:var(--gap);align-items:stretch}
.barbtn{flex:0 0 auto;width:13vh;min-width:64px;border:2px solid var(--line);background:var(--panel);
  color:var(--ink);border-radius:var(--radius);font-size:clamp(20px,4vh,34px);box-shadow:var(--shadow)}
#speak{background:var(--v);border-color:transparent;color:#0C1A06}
#strip{flex:1 1 auto;display:flex;gap:4px;align-items:center;padding:4px;overflow:hidden;
  background:var(--barbg);border:2px solid var(--line);border-radius:var(--radius)}
#strip .w{flex:0 0 auto;height:100%;aspect-ratio:1;border-radius:10px;background:var(--panel);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;overflow:hidden;border:2px solid var(--line)}
#strip .w img{width:100%;height:100%;object-fit:contain;min-height:0}
#strip .w b{font-size:clamp(9px,1.6vh,14px);line-height:1.2;padding-bottom:2px}
#strip.empty::after{content:attr(data-hint);color:var(--dim);font-weight:600;padding-left:10px}

/* ---------- the word grid ---------- */
#grid{flex:1 1 auto;display:grid;gap:var(--gap);min-height:0;
  grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:repeat(var(--rows),1fr)}
.cell{display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  border:none;border-radius:var(--radius);background:var(--panel);color:#12161A;overflow:hidden;
  padding:4px 2px 0;box-shadow:var(--shadow);position:relative;min-height:0}
.cell .pic{flex:1 1 auto;width:100%;min-height:0;background:#fff;border-radius:9px;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.cell .pic img{width:100%;height:100%;object-fit:contain;pointer-events:none}
body[data-theme=contrast] .cell .pic{background:#000}
.cell .lbl{flex:0 0 auto;width:100%;padding:2px 2px 3px;font-size:clamp(10px,1.9vh,19px);
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell.person{background:var(--p)} .cell.verb{background:var(--v)} .cell.describe{background:var(--d)}
.cell.ask{background:var(--q)} .cell.place{background:var(--pl)} .cell.social{background:var(--s)}
.cell.noun{background:var(--n)}
body[data-theme=night] .cell,body[data-theme=contrast] .cell{color:#fff}
body[data-theme=contrast] .cell{outline:2px solid #fff;outline-offset:-2px}
/* pressing never moves the layout: a transform and an inner ring only */
.cell:active{transform:scale(.965)}
.cell.hit{box-shadow:inset 0 0 0 5px #12161A,var(--shadow)}
.cell.scan{box-shadow:inset 0 0 0 6px #1E90FF,var(--shadow)}
.rowscan{box-shadow:inset 0 0 0 6px #1E90FF}
.cell.empty{background:transparent;box-shadow:none;pointer-events:none}
body.editing .cell.empty{background:repeating-linear-gradient(45deg,transparent,transparent 7px,var(--line) 7px,var(--line) 8px);
  pointer-events:auto;box-shadow:inset 0 0 0 2px var(--line)}
body.editing .cell::after{content:"✎";position:absolute;top:3px;right:5px;font-size:12px;color:#12161A;opacity:.7}

/* ---------- folder rail + tray ---------- */
#rail{flex:0 0 auto;height:11vh;min-height:58px;display:grid;gap:var(--gap);
  grid-template-columns:repeat(var(--rcols),1fr)}
.fold{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:3px 2px 0;
  border:none;border-radius:var(--radius);background:var(--n);color:#12161A;box-shadow:var(--shadow);overflow:hidden}
.fold img{flex:1 1 auto;width:80%;height:100%;object-fit:contain;min-height:0;pointer-events:none}
.fold .lbl{font-size:clamp(9px,1.6vh,15px);padding-bottom:3px}
.fold:active{transform:scale(.965)}
#tray{flex:0 0 auto;height:5.5vh;min-height:34px;display:flex;gap:var(--gap);justify-content:flex-end}
.tray{display:flex;align-items:center;gap:6px;padding:0 12px;border:2px solid var(--line);background:var(--panel);
  color:var(--dim);border-radius:10px;font-size:12px}
.tray .glyph{font-size:15px;color:var(--ink)}

/* ---------- folder / keyboard overlays ---------- */
#folder,#kb{position:absolute;left:var(--gap);right:var(--gap);
  top:calc(15vh + var(--gap)*2 + env(safe-area-inset-top));bottom:calc(16.5vh + var(--gap)*3 + env(safe-area-inset-bottom));
  background:var(--bg);border-radius:var(--radius);display:flex;flex-direction:column;gap:var(--gap);z-index:5}
#folder .fgrid{flex:1 1 auto;display:grid;gap:var(--gap);min-height:0;
  grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr)}
#folder .fhead,#kb .fhead{flex:0 0 auto;display:flex;align-items:center;gap:var(--gap);height:7vh;min-height:40px}
.fhead .name{font-size:clamp(14px,2.4vh,22px);flex:1 1 auto;padding-left:6px}
.fhead button{height:100%;padding:0 18px;border:2px solid var(--line);background:var(--panel);color:var(--ink);
  border-radius:10px;font-size:clamp(13px,2vh,18px)}
#kb .keys{flex:1 1 auto;display:grid;gap:4px;grid-template-columns:repeat(10,1fr);min-height:0}
#kb .keys button{border:none;border-radius:8px;background:var(--panel);color:var(--ink);
  font-size:clamp(12px,2.6vh,24px);box-shadow:var(--shadow)}
#kb .keys button:active{transform:scale(.95)}
#kb .typed{flex:0 0 auto;height:8vh;min-height:44px;display:flex;align-items:center;padding:0 12px;
  background:var(--panel);border:2px solid var(--line);border-radius:10px;font-size:clamp(16px,3vh,28px);
  white-space:nowrap;overflow:hidden}
#kb .pred{flex:0 0 auto;height:7vh;min-height:38px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
#kb .pred button{border:none;border-radius:8px;background:var(--d);color:#fff;font-size:clamp(12px,2.2vh,20px)}

/* ---------- adult sheet ---------- */
#scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:20}
#sheet{position:fixed;inset:5% 5% auto;max-height:90%;overflow:auto;background:var(--panel);color:var(--ink);
  border-radius:18px;z-index:21;padding:18px;font-weight:500;-webkit-overflow-scrolling:touch}
#sheet h2{font-size:20px;margin-bottom:4px}
#sheet h3{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);margin:18px 0 8px}
#sheet .row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
#sheet .row:last-child{border-bottom:none}
#sheet label{font-size:15px}
#sheet .hint{font-size:12px;color:var(--dim);font-weight:500;margin-top:2px}
#sheet select,#sheet input[type=text],#sheet input[type=number],#sheet input[type=password]{
  font:inherit;font-size:15px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg);color:var(--ink);min-width:110px}
#sheet button{font:inherit;font-size:15px;padding:9px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);color:var(--ink)}
#sheet button.go{background:var(--v);border-color:transparent;color:#0C1A06;font-weight:700}
#sheet .seg{display:flex;gap:6px}
#sheet .seg button.on{background:var(--ink);color:var(--panel);border-color:var(--ink)}
#sheet table{width:100%;border-collapse:collapse;font-size:14px;font-weight:500}
#sheet td{padding:5px 0;border-bottom:1px solid var(--line)}
#sheet td:last-child{text-align:right;color:var(--dim)}
#sheet .close{position:sticky;bottom:0;display:flex;gap:8px;padding-top:14px;background:var(--panel)}

/* Media queries live at the END of this file. A rule declared later wins, so a query placed
   next to the code it modifies would be overruled by the base rules below it. */
@media (max-width:560px){
  .barbtn{width:56px;min-width:56px;font-size:22px}
  #bar{height:12vh;min-height:64px}
  #strip .w b{font-size:10px}
  .tray{padding:0 9px;font-size:11px}
}
@media (max-height:480px){
  #bar{height:18vh}
  #rail{height:14vh}
  #tray{height:7vh}
}