/* Talk - AAC. Calm: soft colours, no animation beyond a short press state. */
:root{
  --bg:#EAF4FF; --ink:#1B2740; --line:#2B3A55; --soft:#B9C6DA; --card:#fff;
  /* modified Fitzgerald key */
  --pron:#FFE680; --verb:#A8E0A0; --adj:#A9D4FF; --prep:#FFC4D9; --social:#FFC4D9;
  --q:#D5C2F5; --adv:#E3C9A6; --neg:#FF9C94; --det:#D9DEE6; --conj:#fff; --noun:#FFC98A;
  --key:#fff; --keyfn:#ABB3C0; --blue:#3A6FC4;
  --next:#EAF6EC; --sent:#FFF6E3;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
html{overflow:hidden}
/* --vvh: the height above the device's keyboard (app.js fitView), so the page ends where the keys begin */
body{
  display:flex;flex-direction:column;height:var(--vvh,100dvh);overflow:hidden;
  background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  -webkit-user-select:none;user-select:none;touch-action:manipulation;overscroll-behavior:none;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
button,select{font:inherit;color:inherit;touch-action:manipulation;cursor:pointer}
[hidden]{display:none!important}

/* ---- top: Home, who is talking, gear; then the three tabs; then the message ---- */
#top{flex:none;display:flex;flex-direction:column;gap:6px;padding:6px 8px 0}
#head{display:flex;align-items:center;gap:8px;min-height:44px}
#head .grow{flex:1}
#bHome{display:flex;align-items:center;justify-content:center;flex:none;min-width:44px;height:44px;padding:0 12px;
  border:2px solid var(--soft);border-radius:12px;background:var(--card);color:inherit;font-size:17px;font-weight:600;text-decoration:none;white-space:nowrap}
#bHome span{white-space:pre}
#playerSel{
  flex:0 1 220px;min-width:0;height:44px;padding:0 34px 0 12px;border:2px solid var(--soft);border-radius:12px;
  background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%232B3A55' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance:none;appearance:none;font-size:18px;font-weight:700;color:var(--ink);
}
#bGear{flex:none;width:44px;height:44px;padding:0;border:2px solid var(--soft);border-radius:12px;background:var(--card);font-size:22px;opacity:.6}

#tabs{display:flex;gap:6px}
#tabs button{
  flex:1 1 0;min-width:0;height:52px;padding:0 4px;border:2px solid var(--soft);border-radius:14px;
  background:var(--card);font-size:19px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#tabs button[aria-pressed="true"]{background:var(--line);border-color:var(--line);color:#fff}
#tabs button:active,.tool:active{background:#D5E3F5}

/* ---- the message and its tools ---- */
/* The message is a real text field: on Typing it takes the device's own keyboard; elsewhere it only shows the message. */
/* Its height is the same on every tab, so the tools under it never move. 16px or more, or iOS zooms in on it. */
#bar{display:flex;flex-direction:column;gap:6px}
#msg{
  display:flex;height:clamp(56px,var(--vvh,100dvh) - 776px,150px);background:var(--card);border:2px solid var(--line);border-radius:14px;cursor:text;
}
#msgInput{
  flex:1;min-width:0;width:100%;height:100%;margin:0;padding:6px 12px;border:0;border-radius:12px;background:transparent;resize:none;outline:none;
  font:600 28px/1.25 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;color:var(--ink);
  -webkit-user-select:text;user-select:text;overflow-y:auto;caret-color:var(--blue);
}
#msgInput::placeholder{color:#8A94A6;font-weight:400;font-size:20px}
body:not([data-tab="type"]) #msgInput{cursor:pointer;caret-color:transparent;-webkit-user-select:none;user-select:none}
#tools{display:flex;gap:6px}
.tool{
  flex:1 1 0;min-width:0;height:48px;padding:0 6px;background:var(--card);border:2px solid var(--soft);border-radius:12px;
  font-size:18px;font-weight:700;white-space:nowrap;
}
/* Speak: its own dock at the bottom of the visible page (the body is as tall as the part above the keyboard), centred
   and wide with the keyboard down. With the iPhone keyboard up, Safari puts its autofill pill (passwords, cards,
   location, about 145px wide, 12px in) on the left and a keyboard button (about 46px, 13px in) on the right, over the
   bottom of the page: Speak sits in the space between them, where Josh pointed. The Letter board has its own Speak key. */
#speakDock{flex:none;display:flex;justify-content:center;padding:6px 16px calc(8px + env(safe-area-inset-bottom))}
#bSpeak{width:min(100%,440px);height:56px;padding:0 12px;border:0;border-radius:28px;background:var(--blue);color:#fff;
  font-size:24px;font-weight:800;letter-spacing:.3px;box-shadow:0 3px 10px rgba(30,60,110,.28)}
#bSpeak:active{background:#2D5AA3}
body[data-tab="letter"] #speakDock{display:none}
body.kbup #speakDock{padding-bottom:10px}
@media (max-width:699px){
  body.kbup #speakDock{padding:4px 67px 10px 165px}
  body.kbup #bSpeak{width:100%;height:50px;font-size:22px}
}

/* ---- prediction: two rows of 3 big buttons, always three places each, so nothing below moves ---- */
/* A small label down the left side; the two rows keep their own colours. --cell is a Next word button's height,
   --scell a Sentences button's (room for two lines). */
#preds{display:flex;flex-direction:column;gap:6px;--cell:56px;--scell:60px;--cg:5px}
.pbox{display:flex;align-items:stretch;gap:3px;padding:3px;border-radius:12px;border:1px solid var(--soft)}
#nextBox{background:var(--next)}
#sentBox{background:var(--sent)}
.plabel{flex:none;width:15px;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;font-size:11px;font-weight:700;line-height:15px;color:#56627A;white-space:nowrap;overflow:hidden}
.chips{flex:1;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:var(--cell);gap:var(--cg)}
#sentBox .chips{grid-template-rows:var(--scell)}
.chip{
  min-width:0;height:100%;padding:0 4px;border:1px solid var(--soft);border-radius:12px;background:#fff;
  font-size:22px;font-weight:600;line-height:1.1;overflow:hidden;white-space:nowrap;
}
/* a sentence may take two lines, a little smaller */
#sentBox .chip{font-size:16px;line-height:1.15;white-space:normal;text-align:left;padding:1px 6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.chip.empty{background:rgba(255,255,255,.35);border-style:dashed;border-color:#D3DBE6}
.chip:active{background:#DCE6F2}
body[data-tab="phrases"] #preds,body[data-tab="words"] #preds,body[data-tab="feel"] #preds{display:none}
/* the core grid and the Feel page (opened from Grown-ups) need the height for their 10 rows */
body[data-tab="words"] #msg,body[data-tab="feel"] #msg{height:64px}
body[data-tab="words"] #msgInput,body[data-tab="feel"] #msgInput{font-size:24px}

#editBanner{margin-top:6px;padding:8px 10px;background:#FFF3C4;border:2px solid var(--line);border-radius:12px;font-size:16px}
#editBanner button{margin-left:8px;min-height:36px;padding:0 14px;border:2px solid var(--line);border-radius:10px;background:#fff;font-weight:600}

main{flex:1;min-height:0;display:flex;flex-direction:column}

/* ---- core-word grid: 60 slots, column-major. A slot's index is its place and never changes. ---- */
/* The Feel page is a second grid with the same 60 slots; a free slot keeps its place empty. */
#grid,#grid2{
  flex:1;min-height:0;display:grid;gap:5px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));
  grid-auto-flow:column;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));
}
/* iPhone held upright: the same order turned on its side, so each word class becomes a row */
@media (max-width:600px) and (orientation:portrait){
  #grid,#grid2{grid-auto-flow:row;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(10,minmax(0,1fr));gap:4px}
  #grid .w,#grid2 .w{font-size:16px}
  #grid .w.long,#grid2 .w.long{font-size:12.5px;letter-spacing:-.2px}
  #grid2 .w.mid{font-size:14px;letter-spacing:-.2px}
}
.w{
  min-width:0;min-height:0;padding:0 2px;border:2px solid var(--line);border-radius:10px;
  font-size:clamp(15px,2.3vw,26px);font-weight:600;line-height:1.05;overflow:hidden;
}
.w.long{font-size:clamp(12.5px,1.85vw,22px);padding:0}
.w:active{filter:brightness(.88)}
.w.pron{background:var(--pron)} .w.verb{background:var(--verb)} .w.adj{background:var(--adj)}
.w.prep{background:var(--prep)} .w.social{background:var(--social)} .w.q{background:var(--q)}
.w.adv{background:var(--adv)} .w.neg{background:var(--neg)} .w.det{background:var(--det)} .w.conj{background:var(--conj)}
.w.noun{background:var(--noun)}
/* a colour word: white, with a stripe of the colour along the bottom */
.w.color{background:#fff;box-shadow:inset 0 -9px 0 var(--sw),inset 0 -11px 0 var(--line)}
.free{visibility:hidden}
.w.off{visibility:hidden}
body.editing .w.off{visibility:visible;opacity:.3;border-style:dashed}

body:not([data-tab="words"]) #grid{display:none}
body:not([data-tab="feel"]) #grid2{display:none}
body:not([data-tab="phrases"]) #phrases{display:none}
body:not([data-tab="letter"]) #kb{display:none}

/* ---- Phrases: Finder columns (categories, subcategories, phrases) ---- */
#phrases{flex:1;min-height:0;display:flex;flex-direction:column;gap:4px;padding:4px 8px calc(8px + env(safe-area-inset-bottom))}
.crumb{flex:none;padding:2px 4px;font-size:15px;font-weight:600;color:#4a5070;min-height:22px}
.finder{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr 1.5fr;grid-template-rows:minmax(0,1fr);gap:8px}
.finder .col{min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff;border:1px solid var(--soft);border-radius:14px;padding:6px;display:flex;flex-direction:column;gap:5px}
.finder .col button{flex:none;min-height:52px;text-align:left;padding:8px 12px;border-radius:12px;border:0;background:#F1F5FB;font-size:18px;font-weight:600;line-height:1.2}
.finder .col button[aria-pressed="true"]{background:var(--blue);color:#fff}
.finder .col button:active{filter:brightness(.92)}
#phraseListCol button{background:#FFF8E1;font-size:19px}
/* phone: categories over subcategories on the left, the phrases on the right */
@media (max-width:600px){
  .finder{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:minmax(0,1.6fr) minmax(0,1fr);gap:6px}
  #phraseCats{grid-column:1;grid-row:1} #phraseSubs{grid-column:1;grid-row:2} #phraseListCol{grid-column:2;grid-row:1/3}
  .finder .col button{min-height:48px;padding:6px 10px;font-size:16px}
  #phraseListCol button{font-size:18px}
}

/* ---- Letter board: a to z in its own keys (Typing uses the device's keyboard). Rows share the height that is left. ---- */
#kb{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;--kg:6px;--kr:9px;background:#D6DAE1;padding:8px 3px calc(8px + env(safe-area-inset-bottom));margin-top:6px}
.krow{flex:1 1 0;min-height:0;max-height:100px;display:flex;justify-content:center;gap:var(--kg);margin:0 auto var(--kr);width:100%;max-width:880px}
.krow:last-child{margin-bottom:0}
.k{
  flex:1 1 0;min-width:0;height:100%;padding:0;border:0;border-radius:8px;
  background:var(--key);box-shadow:0 1px 0 #898A8D;font-size:30px;font-weight:600;
}
.k:active{background:#B9BEC8}
.k.fn{background:var(--keyfn);font-size:19px}
.k.fn:active{background:#fff}
.k.wide{flex:1 1 0}
.k.space{flex:5 1 0;font-size:18px}
.k.go{flex:2.4 1 0;background:var(--blue);color:#fff;font-size:19px;font-weight:700}
.k.gap{visibility:hidden;flex:1 1 0;box-shadow:none}
@media (min-width:700px){
  #kb{--kg:9px} .k{font-size:38px} .k.fn,.k.space,.k.go{font-size:22px}
}

/* ---- Greetings: a Finder of its own over the page, as tall as the part above the keyboard ---- */
/* Two columns side by side (situations, then what to say); on a very narrow screen one at a time, with Back. */
#bGreet{flex:1.8 1 0}
#bClear{flex:.6 1 0}
#greet{position:fixed;left:0;right:0;top:0;height:var(--vvh,100dvh);z-index:25;background:var(--bg);display:flex;flex-direction:column;gap:8px;
  padding:calc(6px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left))}
.ghead{flex:none;display:flex;align-items:center;gap:8px}
.ghead h2{flex:1;min-width:0;margin:0;text-align:center;font-size:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ghead button{flex:none;min-width:84px;height:56px;padding:0 10px;border:2px solid var(--line);border-radius:16px;background:#fff;font-size:19px;font-weight:700}
.ghead button:active{background:#D5E3F5}
#greetCols{flex:1;min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);grid-template-rows:minmax(0,1fr)}
#greetCols .col button{min-height:56px;font-size:18px}
#greetList button{background:#FFF8E1;font-size:20px}
#greet.drill #greetCols{grid-template-columns:minmax(0,1fr)}
#greet.drill.inlist #greetCats,#greet.drill:not(.inlist) #greetList{display:none}
@media (min-width:700px){
  .ghead h2{font-size:30px}
  .ghead button{height:64px;min-width:120px;font-size:24px}
  #greetCols{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:12px}
  #greetCols .col button{min-height:64px;font-size:22px}
  #greetList button{font-size:24px}
}

/* ---- Show: the message large, for talking without sound ---- */
#show{position:fixed;inset:0;z-index:20;background:#fff;display:flex;align-items:center;justify-content:center;padding:6vmin}
#showText{margin:0;font-size:clamp(40px,11vmin,140px);font-weight:700;line-height:1.15;text-align:center;word-break:break-word}

/* ---- grown-ups sheet and activity ---- */
.modal{position:fixed;inset:0;z-index:30;background:rgba(27,39,64,.45);display:flex;align-items:center;justify-content:center;padding:12px}
.modal .card{background:#fff;border-radius:16px;padding:16px;width:min(460px,100%);max-height:100%;overflow:auto;-webkit-user-select:text;user-select:text}
.modal h2{margin:0 0 8px;font-size:22px}
.modal fieldset{border:1px solid #C9D2E0;border-radius:12px;margin:0 0 10px;padding:8px 12px 12px;display:flex;flex-direction:column;gap:8px}
.modal legend{font-weight:700;padding:0 4px}
.modal label{font-size:17px;min-height:32px;display:flex;align-items:center;gap:8px}
.modal .row{display:flex;align-items:center;gap:8px;justify-content:space-between}
.modal select,.modal input[type=range]{flex:1;max-width:60%;font:inherit;min-height:36px}
.modal input[type=text]{flex:1;min-width:0;min-height:44px;padding:0 10px;border:2px solid var(--line);border-radius:12px;font:inherit}
.modal button,.modal .filebtn{min-height:44px;padding:0 14px;border:2px solid var(--line);border-radius:12px;background:#fff;font-size:17px;font-weight:600;justify-content:center}
.modal .filebtn input{display:none}
.modal .primary{width:100%;background:var(--line);color:#fff}
.modal .note{margin:0;font-size:14px;color:#5A667A}
#phraseList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
#phraseList li{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:17px}
#stats .card{display:flex;flex-direction:column;gap:8px;width:min(560px,100%)}
#statsBody h3{margin:10px 0 2px;font-size:17px}
#statsBody p{margin:0 0 2px;font-size:16px;line-height:1.35}

/* ---- parent gate ---- */
#gate .card{width:min(340px,100%);display:flex;flex-direction:column;gap:8px;text-align:center}
#gateQ{margin:0;font-size:30px;font-weight:700}
#gateA{display:block;min-height:48px;border:2px solid var(--line);border-radius:12px;font-size:30px;font-weight:700;line-height:44px}
#gatePad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#gatePad button{font-size:22px;min-height:48px;padding:0}
#gatePad .primary{width:auto}



/* ---- sizes ---- */
@media (max-width:600px){
  #tabs button{font-size:17px;letter-spacing:-.2px;padding:0 2px}
}
@media (max-width:380px){
  #tabs button{font-size:16px}
  .tool{font-size:16px}
  .chip{font-size:17px}
}
/* iPad */
@media (min-width:700px){
  #top{padding:10px 12px 0;gap:8px}
  #head{min-height:52px}
  #bHome,#playerSel,#bGear{height:52px}
  #playerSel{flex-basis:260px;font-size:20px}
  #tabs button{height:60px;font-size:23px}
  #msg{height:clamp(96px,var(--vvh,100dvh) - 1000px,200px)}
  #msgInput{font-size:36px;padding:8px 14px}
  .krow{max-height:130px}
  .tool{height:56px;font-size:21px}
  #preds{--cell:66px;--scell:70px;--cg:8px;gap:8px}
  .pbox{padding:4px;gap:4px}
  .chip{font-size:28px;padding:0 6px}
  #sentBox .chip{font-size:21px;padding:2px 10px}
  .plabel{width:18px;font-size:13px;line-height:18px}
  #phrases{padding:6px 12px 12px}
  .finder .col button{min-height:58px;font-size:20px}
  #phraseListCol button{font-size:22px}
}
/* iPad held sideways: the two prediction boxes side by side */
@media (min-width:1000px) and (orientation:landscape){
  #preds{flex-direction:row}
  #preds .pbox{flex:1 1 0;min-width:0}
  #msg{height:clamp(80px,var(--vvh,100dvh) - 720px,160px)}
}

/* ---- less height: set by app.js from the visible height (fitView), so it also follows the device's keyboard ---- */
/* compact: under 720px. A little less everywhere; suggestions stay 44px tall. */
body.compact #top{gap:4px;padding-top:4px}
body.compact #bar{gap:4px}
body.compact #tabs button{height:44px}
body.compact .tool{height:44px}
body.compact #msg{height:56px}
body.compact #msgInput{font-size:22px;padding:4px 10px}
body.compact #preds{--cell:48px;--scell:52px;--cg:4px;gap:4px}
body.compact .pbox{padding:2px}
body.compact #kb{margin-top:4px;padding-top:4px;padding-bottom:calc(4px + env(safe-area-inset-bottom));--kr:3px}
/* short: a short screen (iPhone SE), or the keyboard up on one. Off Typing, the message and its tools share one row. */
body.short:not([data-tab="type"]) #bar{flex-direction:row;align-items:stretch}
body.short:not([data-tab="type"]) #msg{flex:1;min-width:0;height:48px}
body.short:not([data-tab="type"]) #msgInput{font-size:18px;line-height:1.2;padding:3px 8px}
body.short:not([data-tab="type"]) #tools{flex:none;gap:4px}
body.short:not([data-tab="type"]) .tool{flex:none;height:48px;padding:0 9px;font-size:15px}
body.short:not([data-tab="type"]) #bDelWord,body.short:not([data-tab="type"]) #bClear{width:44px;padding:0}
body.short:not([data-tab="type"]) .tool .more{display:none}
/* tiny: the keyboard up on a small phone. The message and both boxes are what matter; the header and tabs come back
   when the keyboard goes down. */
body.tiny #head,body.tiny #tabs{display:none}

/* ---- Typing: the typing bar (Josh, Oct 19 2026), Messages-style; no empty bands (Josh, Oct 20 2026) ---- */
/* A full-width rounded field with large text at the top (app.js sizeField grows it with the text), the tools right
   under it, then the two rows of 3, which grow to take the height down to Speak: no dead space above the field or
   between the rows and Speak, with the keyboard up or down. Their words grow with them (cqh). When the rows are as
   tall as they usefully get, what is left goes to the field. */
body[data-tab="type"] main{display:none}
body[data-tab="type"] #top{flex:1;min-height:0;padding-bottom:6px}
body[data-tab="type"] #bar{flex:1 1 auto;min-height:0;gap:8px}
body[data-tab="type"] #msg{flex:1 1 auto}
body[data-tab="type"] #preds{flex:60 1 0;min-height:0;max-height:440px}
body[data-tab="type"] #preds .pbox{flex:1 1 0;min-height:0}
body[data-tab="type"] #sentBox{flex-grow:1.15}
body[data-tab="type"] .chips{grid-template-rows:minmax(var(--cell),1fr);container-type:size}
body[data-tab="type"] #sentBox .chips{grid-template-rows:minmax(var(--scell),1fr)}
body[data-tab="type"] #nextBox .chip{font-size:clamp(22px,34cqh,40px)}
body[data-tab="type"] #sentBox .chip{font-size:clamp(16px,19cqh,26px)}
body.compact[data-tab="type"] #bar{gap:6px}
body[data-tab="type"] #msg{
  height:auto;min-height:76px;align-items:center;padding:6px 8px;border-radius:30px;border-width:2px;border-color:var(--blue);
  box-shadow:0 2px 12px rgba(30,60,110,.12);
}
body[data-tab="type"] #msgInput{height:auto;max-height:136px;padding:6px 14px;font-size:30px;line-height:1.25}
body[data-tab="type"] #msgInput::placeholder{font-size:24px}
body.compact[data-tab="type"] #msg{min-height:60px;padding:4px 6px;border-radius:26px}
body.compact[data-tab="type"] #msgInput{max-height:84px;font-size:24px;padding:4px 12px}
body.compact[data-tab="type"] #msgInput::placeholder{font-size:20px}
@media (min-width:700px){
  body[data-tab="type"] #top{padding-bottom:8px}
  body[data-tab="type"] #preds{max-height:520px}
  #bSpeak{height:64px;border-radius:32px;font-size:28px}
  body[data-tab="type"] #nextBox .chip{font-size:clamp(28px,30cqh,52px)}
  body[data-tab="type"] #sentBox .chip{font-size:clamp(21px,18cqh,34px)}
  body[data-tab="type"] #msg{min-height:96px;padding:8px 12px;border-radius:40px}
  body[data-tab="type"] #msgInput{max-height:200px;font-size:40px;padding:8px 18px}
  body[data-tab="type"] #msgInput::placeholder{font-size:30px}
}
.modal .seg{display:inline-flex;gap:4px}
.modal .seg button{min-height:44px;padding:6px 10px}
.modal .seg button[aria-pressed="true"]{background:var(--blue);color:#fff;border-color:var(--blue)}