/* TalkBoard: tablet-first layout for the communicate screen.
 *
 * The page is a column: top bar (sentence strip + tools), the symbol grid,
 * and a bottom bar (Home / Back). The grid fills whatever height is left and
 * sizes itself from the --rows and --cols custom properties set per board.
 */

/* ---- Theme tokens ---------------------------------------------------- */

:root {
  --bar-height: 88px;
  --gap: 8px;
  --radius: 14px;
  --tap-min: 80px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --bg: #f4f1ea;
  --surface: #ffffff;
  --bar-bg: #e7e2d8;
  --text: #1c1b19;
  --text-muted: #5b574f;
  --border: #c9c2b4;
  --focus: #1a5fd0;
  --accent: #1f7a4d;
  --accent-text: #ffffff;
  --pressed-shade: rgb(0 0 0 / 0.12);
  --cell-empty: transparent;

  /* Modified Fitzgerald Key: a soft fill with a stronger border. */
  --fk-neutral-bg: #ffffff;  --fk-neutral-border: #9a9489;
  --fk-yellow-bg: #fff3b0;   --fk-yellow-border: #d4a900;
  --fk-green-bg: #d4f0cf;    --fk-green-border: #3c9a3a;
  --fk-blue-bg: #d2e6fb;     --fk-blue-border: #2f74c0;
  --fk-orange-bg: #ffdcb8;   --fk-orange-border: #e07a10;
  --fk-purple-bg: #e6d7f5;   --fk-purple-border: #7c4bb3;
  --fk-pink-bg: #fbd6e6;     --fk-pink-border: #d1498a;
  --fk-red-bg: #fbd0cc;      --fk-red-border: #cc2f24;
  --fk-white-bg: #ffffff;    --fk-white-border: #d9d4ca;
}

[data-theme="high_contrast"] {
  --bg: #000000;
  --surface: #000000;
  --bar-bg: #111111;
  --text: #ffffff;
  --text-muted: #e0e0e0;
  --border: #ffffff;
  --focus: #ffd400;
  --accent: #ffd400;
  --accent-text: #000000;
  --pressed-shade: rgb(255 255 255 / 0.25);

  /* Black cells, thick saturated borders: color still carries meaning. */
  --fk-neutral-bg: #000; --fk-neutral-border: #ffffff;
  --fk-yellow-bg: #000;  --fk-yellow-border: #ffe14d;
  --fk-green-bg: #000;   --fk-green-border: #4ee06a;
  --fk-blue-bg: #000;    --fk-blue-border: #5cb2ff;
  --fk-orange-bg: #000;  --fk-orange-border: #ff9d3b;
  --fk-purple-bg: #000;  --fk-purple-border: #c792ff;
  --fk-pink-bg: #000;    --fk-pink-border: #ff7ab8;
  --fk-red-bg: #000;     --fk-red-border: #ff5a4d;
  --fk-white-bg: #000;   --fk-white-border: #bdbdbd;
}

/* ---- Base ------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* No zoom, selection, callouts or double-tap delay on anything tappable. */
button,
a,
.symbol,
.tool,
.chip {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

button {
  font: inherit;
  color: inherit;
}

img {
  -webkit-user-drag: none;
}

:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 2px;
}

/* ---- App shell ------------------------------------------------------- */

body.app {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  height: 100vh; /* fallback for browsers without dvh */
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

.topbar,
.bottombar {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: var(--bar-height);
  background: var(--bar-bg);
  padding-left: max(var(--gap), env(safe-area-inset-left));
  padding-right: max(var(--gap), env(safe-area-inset-right));
}

.topbar {
  padding-top: max(var(--gap), env(safe-area-inset-top));
  padding-bottom: var(--gap);
  border-bottom: 2px solid var(--border);
}

.bottombar {
  padding-top: var(--gap);
  padding-bottom: max(var(--gap), env(safe-area-inset-bottom));
  border-top: 2px solid var(--border);
  justify-content: space-between;
}

.bottombar__title {
  flex: 1;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Sentence strip: a scrolling row of chips, filled in by strip.js. */
.strip {
  flex: 1;
  align-self: stretch;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--gap);
  overflow-x: auto;
  padding: 4px 12px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.strip::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 56px;
  height: 100%;
  max-height: calc(var(--bar-height) - 4 * var(--gap));
  padding: 2px 8px;
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius) / 2);
  cursor: pointer;
}

.chip:active {
  box-shadow: inset 0 0 0 100vmax var(--pressed-shade);
}

.chip__img {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 40px;
  width: auto;
  object-fit: contain;
}

.chip__label {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}

/* A chip without a picture shows its word large, like a text-only symbol. */
.chip:not(:has(.chip__img)) .chip__label {
  font-size: 1.4rem;
}

/* ---- Tool buttons (top and bottom bars) ------------------------------ */

.tool {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: var(--tap-min);
  min-height: calc(var(--bar-height) - 2 * var(--gap));
  padding: 6px 12px;
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.tool svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool--speak {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  min-width: calc(var(--tap-min) * 1.4);
}

.tool--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}

/* ---- Symbol grid ----------------------------------------------------- */

.grid {
  --rows: 4;
  --cols: 5;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(var(--tap-min), 1fr));
  grid-template-rows: repeat(var(--rows), minmax(var(--tap-min), 1fr));
  gap: var(--gap);
  padding: var(--gap);
  padding-left: max(var(--gap), env(safe-area-inset-left));
  padding-right: max(var(--gap), env(safe-area-inset-right));
  min-height: 0;
  /* Only scrolls if the screen is too small for 80px cells (e.g. a phone). */
  overflow: auto;
}

.symbol {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 0;
  padding: 6px;
  background: var(--fk-neutral-bg);
  border: 4px solid var(--fk-neutral-border);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  transition: transform 60ms ease-out;
}

.symbol__img {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  pointer-events: none;
}

.symbol__label {
  flex: none;
  max-width: 100%;
  font-size: clamp(0.95rem, 1.2vw + 0.6rem, 1.6rem);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  overflow-wrap: anywhere;
}

/* No picture: the label is the whole button. */
.symbol--text .symbol__label {
  font-size: clamp(1.2rem, 2vw + 0.6rem, 2.4rem);
}

/* Profile.show_labels = False hides labels on buttons that have a picture. */
.hide-labels .symbol:not(.symbol--text) .symbol__label {
  display: none;
}

/* Visible pressed state; .is-pressed is for JS-driven presses later. */
.symbol:active,
.symbol.is-pressed,
.tool:active {
  transform: scale(0.96);
  box-shadow: inset 0 0 0 100vmax var(--pressed-shade);
}

/* Folder buttons (they open another board) get a file-folder tab: the top
 * border thickens into a tab on the left, in the button's own border color. */
.symbol--folder::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  width: 38%;
  height: 0;
  border-top: 12px solid;
  border-top-color: inherit;
  border-right: 10px solid transparent;
  pointer-events: none;
}

.cell-empty {
  background: var(--cell-empty);
  border-radius: var(--radius);
}

.fk-neutral { background: var(--fk-neutral-bg); border-color: var(--fk-neutral-border); }
.fk-yellow  { background: var(--fk-yellow-bg);  border-color: var(--fk-yellow-border); }
.fk-green   { background: var(--fk-green-bg);   border-color: var(--fk-green-border); }
.fk-blue    { background: var(--fk-blue-bg);    border-color: var(--fk-blue-border); }
.fk-orange  { background: var(--fk-orange-bg);  border-color: var(--fk-orange-border); }
.fk-purple  { background: var(--fk-purple-bg);  border-color: var(--fk-purple-border); }
.fk-pink    { background: var(--fk-pink-bg);    border-color: var(--fk-pink-border); }
.fk-red     { background: var(--fk-red-bg);     border-color: var(--fk-red-border); }
.fk-white   { background: var(--fk-white-bg);   border-color: var(--fk-white-border); }

[data-theme="high_contrast"] .symbol {
  border-width: 6px;
}

/* Phones aren't the target, but keep the page from scrolling sideways. */
@media (max-width: 600px) {
  :root {
    --bar-height: 72px;
    --gap: 6px;
  }

  .tool {
    min-width: 56px;
    padding: 4px 8px;
  }

  .tool--speak {
    min-width: 72px;
  }

  .tool svg {
    width: 28px;
    height: 28px;
  }

  .tool span {
    font-size: 0.85rem;
  }
}

/* ---- Empty state and login ------------------------------------------- */

.empty-state,
.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem max(1rem, env(safe-area-inset-left));
  text-align: center;
  font-size: 1.25rem;
}

.empty-state a {
  color: var(--focus);
}

.login {
  min-height: 100dvh;
}

.login form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: min(100%, 24rem);
  text-align: left;
}

.login label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-weight: 600;
}

.login input {
  font: inherit;
  padding: 0.75rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}

.login button {
  min-height: 64px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-text);
  font-size: 1.25rem;
  font-weight: 700;
}

.login__error {
  margin: 0;
  color: var(--fk-red-border);
  font-weight: 600;
}