/* Communication board: calm colors, large targets, nothing moves unless the user acts. */

/* Hidden always wins over a button's or row's own display. */
[hidden] { display: none !important; }

:root {
    --bg: #F4F1EA;
    --surface: #FFFFFF;
    --ink: #1F2328;
    --muted: #6B6F76;
    --edge: rgba(0, 0, 0, 0.14);
    --focus: #1F2328;
    --accent: #2F6F4F;
    --accent-ink: #FFFFFF;
    --radius: 14px;
    --gap: 8px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--bg);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

button { font: inherit; color: inherit; }

/* Minimalist line icons: one color (the text color), sized by font-size. */
.ico {
    display: inline-block; flex: none;
    width: 1em; height: 1em;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
/* Color words: a plain dot of that color. */
.swatch {
    display: inline-block; flex: none;
    width: 0.9em; height: 0.9em; border-radius: 50%;
    border: 2px solid rgba(31, 35, 40, 0.35);
}
.tile .swatch { font-size: clamp(1.4rem, min(6vh, 5vw), 3.8rem); }
.strip-word .swatch, .quick .swatch { font-size: 1.5rem; }
/* Theme 3: flat color drawings, sized like the emoji they replace. */
img.flat { width: 1.05em; height: 1.05em; object-fit: contain; pointer-events: none; }
.tile img.flat { max-height: none; }
/* Numbers tab: the numeral itself instead of a picture. */
.numeral { font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.tile .numeral { font-size: clamp(2rem, min(8vh, 6vw), 4.6rem); }
.strip-word .numeral { font-size: 1.6rem; }
/* Pictures on the board buttons */
[data-control] { display: inline-flex; }
.ctrl-pic { font-size: 1.5rem; line-height: 1; }

/* ---------- Look panel ---------- */
.look-dialog {
    width: min(560px, calc(100vw - 32px));
    padding: 22px; border: 3px solid var(--edge); border-radius: 18px;
    background: var(--surface); color: var(--ink);
}
.look-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.look-dialog h2 { margin: 0 0 6px; font-size: 1.4rem; }
.look-heading { margin: 14px 0 8px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.look-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.look-option {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 8px; border-radius: var(--radius);
    background: var(--bg); border: 3px solid var(--edge); cursor: pointer;
}
.look-option[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.look-option strong { font-size: 1rem; }
.look-name { font-size: 0.85rem; color: var(--muted); }
.look-sample {
    display: grid; place-items: center; width: 64px; height: 64px; border-radius: 12px;
    background: #FFD8B0; color: #1F2328; border: 2px solid rgba(0, 0, 0, 0.12);
}
.look-pic { font-size: 2.4rem; line-height: 1; }
/* Mini previews of each screen theme */
.look-screen {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; align-content: center;
    width: 64px; height: 64px; padding: 8px; border-radius: 12px; border: 2px solid rgba(0, 0, 0, 0.12);
}
.look-screen span { height: 14px; border-radius: 4px; }
.look-screen-light { background: #F4F1EA; }
.look-screen-light span:nth-child(1) { background: #FFF3B0; } .look-screen-light span:nth-child(2) { background: #C8F0C8; } .look-screen-light span:nth-child(3) { background: #FFD1E3; }
.look-screen-dark { background: #12161B; border-color: #333; }
.look-screen-dark span:nth-child(1) { background: #C2B886; } .look-screen-dark span:nth-child(2) { background: #98B898; } .look-screen-dark span:nth-child(3) { background: #C29FAD; }
.look-screen-contrast { background: #000; border-color: #000; }
.look-screen-contrast span { background: #FFF3B0; outline: 2px solid #FFF; }
.look-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.look-reset { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- ➕ Add panel ---------- */
.add-dialog form { display: grid; gap: 14px; }
.add-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg); border: 2px solid var(--edge); }
.add-kind label { position: relative; }
.add-kind input { position: absolute; opacity: 0; inset: 0; }
.add-kind span { display: block; padding: 10px; border-radius: 9px; text-align: center; font-weight: 700; color: var(--muted); cursor: pointer; }
.add-kind input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.add-kind input:focus-visible + span { outline: 3px solid var(--focus); }
.add-field { display: grid; gap: 6px; font-weight: 700; }
.add-field[hidden] { display: none; }
.add-field small { font-weight: 400; color: var(--muted); }
.add-field input[type="text"], .add-field select {
    width: 100%; padding: 12px; font: inherit; font-weight: 400; font-size: 1.05rem;
    border: 2px solid var(--edge); border-radius: 10px; background: var(--surface); color: var(--ink);
}
.add-picture { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.add-picture [hidden] { display: none; }
.add-chosen {
    display: flex; align-items: center; gap: 8px; min-height: 48px; min-width: 9rem; padding: 4px 12px;
    border: 2px dashed var(--edge); border-radius: 10px; color: var(--muted); font-weight: 600;
}
.add-chosen-pic { font-size: 2rem; line-height: 1; color: var(--ink); }
.add-choose { flex-direction: row; min-height: 48px; }

/* Icon picker */
.icon-picker { margin-top: 8px; padding: 10px; border: 2px solid var(--edge); border-radius: 12px; background: var(--bg); }
.icon-picker[hidden] { display: none; }
.icon-search {
    width: 100%; padding: 10px 12px; margin-bottom: 8px; font: inherit; font-weight: 400;
    border: 2px solid var(--edge); border-radius: 10px; background: var(--surface); color: var(--ink);
}
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; max-height: 260px; overflow-y: auto; }
.icon-group { grid-column: 1 / -1; margin: 6px 0 0; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.icon-choice {
    display: grid; place-items: center; height: 52px; padding: 4px;
    background: var(--surface); border: 2px solid var(--edge); border-radius: 10px; color: var(--ink); cursor: pointer;
}
.icon-choice.on { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.icon-pic { font-size: 1.8rem; line-height: 1; }
img.flat.icon-pic, img.flat.add-chosen-pic { width: 1em; height: 1em; }
.add-or { color: var(--muted); font-weight: 400; }
.add-photo { flex-direction: row; min-height: 48px; cursor: pointer; }
.add-photo-name { font-weight: 400; color: var(--muted); }
.add-actions { gap: 8px; }
.look-reset .ctrl { min-height: 48px; }

/* ---------- Board page ---------- */

.board-page {
    height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    overscroll-behavior: none;       /* no pull-to-refresh */
    touch-action: manipulation;      /* no double-tap zoom */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;     /* no long-press menu */
    -webkit-tap-highlight-color: transparent;
}

.topbar { padding: var(--gap) var(--gap) 0; display: grid; gap: var(--gap); }

.strip-row { display: flex; gap: var(--gap); }
.strip-row[hidden] { display: none; }

.strip {
    flex: 1; min-width: 0; min-height: 84px;
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px; overflow-x: auto;
    background: var(--surface); border: 3px solid var(--edge); border-radius: var(--radius);
    text-align: left; cursor: pointer;
}
.strip-placeholder { color: var(--muted); font-size: 1.1rem; padding-left: 6px; }
.strip-word {
    flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 64px; height: 68px; padding: 2px 8px;
    border-radius: 10px; border: 2px solid var(--edge);
    font-size: 0.95rem; font-weight: 600;
}
.strip-word .sym { font-size: 1.8rem; line-height: 1.1; }
.strip-word img.photo { height: 38px; width: auto; }

.controls { display: flex; align-items: center; gap: var(--gap); }
.board-name { flex: 1; margin: 0; text-align: center; font-size: 1.3rem; font-weight: 700; }

.ctrl {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-width: 76px; min-height: 60px; padding: 6px 10px;
    background: var(--surface); border: 3px solid var(--edge); border-radius: var(--radius);
    font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.ctrl > span[aria-hidden] { font-size: 1.5rem; line-height: 1; }
a.ctrl { color: inherit; text-decoration: none; } /* Switch is a link but looks like the other buttons */
.ctrl-form { display: contents; } /* Log out is a form; its button sits in the row like the others */
.ctrl:disabled { opacity: 0.4; cursor: default; }
.ctrl-speak { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); min-width: 96px; }

.workspace { display: flex; min-height: 0; }
/* Right of the sidebar: the picture grid with the phrase rows under it. */
.board-col { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

/* Category tabs down the left side. */
.tabs {
    flex: none; width: 112px;
    /* Fixed-height buttons from the top; extra tabs scroll instead of shrinking the board. */
    display: grid; grid-template-columns: 1fr; grid-auto-rows: 72px; align-content: start;
    gap: var(--gap);
    padding: var(--gap) 0 var(--gap) var(--gap);
    overflow-y: auto;
}
/* Many tabs: two columns; any that don't fit scroll. */
.tabs.tabs-2col { width: 212px; grid-template-columns: 1fr 1fr; }
.tabs[hidden] { display: none; }
.tab {
    min-height: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 6px 4px;
    background: var(--surface); border: 3px solid var(--edge); border-radius: var(--radius);
    font-size: 0.95rem; font-weight: 700; cursor: pointer;
}

/* ---------- Outside this person's plan (see Benefits): faded, with a small lock ---------- */
.tab-locked, .ctrl.is-locked, .look-option.is-locked { position: relative; }
.tab-locked > :not(.tab-lock), .ctrl.is-locked > *, .look-option.is-locked > * { opacity: 0.4; }
.tab-lock, .ctrl.is-locked::after, .look-option.is-locked::after {
    position: absolute; top: 3px; right: 4px; font-size: 0.85rem; line-height: 1;
}
.ctrl.is-locked::after, .look-option.is-locked::after { content: "🔒"; }
.tab-icon { font-size: 1.9rem; line-height: 1; }
.tab-name { text-align: center; line-height: 1.1; overflow-wrap: break-word; max-width: 100%; }
/* Long names (Directions, Sensory Needs…) shrink to fit the box instead of breaking mid-word. */
.tab-name-long { font-size: 0.85rem; }
.tab-name-xlong { font-size: 0.78rem; }
.tab.active {
    background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
    box-shadow: inset 0 0 0 3px var(--accent-ink);
}
.tab:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }

.grid {
    flex: 1; min-width: 0;
    display: grid;
    gap: var(--gap);
    padding: var(--gap);
    min-height: 0;
}

.tile {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-width: 0; min-height: 0; padding: 6px;
    border: 3px solid var(--edge); border-radius: var(--radius);
    color: #1F2328; cursor: pointer; overflow: hidden;
}
.tile .sym { font-size: clamp(1.6rem, min(7vh, 6vw), 4.5rem); line-height: 1; }
.tile .ico { font-size: clamp(1.5rem, min(6.4vh, 5.4vw), 4rem); }
.tile img { max-width: 100%; max-height: 62%; object-fit: contain; pointer-events: none; }
.tile .label {
    font-size: clamp(0.85rem, min(2.6vh, 2.2vw), 1.6rem); font-weight: 700;
    text-align: center; line-height: 1.1; overflow-wrap: anywhere;
}
/* Folder tiles get a thick top edge so they read as "opens a board". */
.tile.opens { border-top-width: 10px; border-top-color: rgba(0, 0, 0, 0.35); }
.tile:active, .tile.pressed { outline: 4px solid var(--focus); outline-offset: -4px; }
.tile:focus-visible, .ctrl:focus-visible, .strip:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }

.cell-empty { visibility: hidden; }

/* A tile plus its favorite star. */
.cell { position: relative; display: flex; min-width: 0; min-height: 0; }
.cell > .tile { flex: 1; min-width: 0; }
/* Just the star: no circle behind it. The button keeps a comfortable tap area. */
.star {
    position: absolute; right: 4px; bottom: 4px;
    display: grid; place-items: center;
    width: 32px; height: 32px; padding: 0;
    border: 0; background: none; color: #6B6F76;
    font-size: 24px; line-height: 1; cursor: pointer;
}
.star.on { color: #E8A400; }
.star:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-radius: 6px; }

/* In-app confirm / message window */
.confirm-dialog { width: min(500px, calc(100vw - 32px)); }
.confirm-dialog p { margin: 0; font-size: 1.05rem; line-height: 1.45; color: var(--ink); }
.confirm-actions { gap: 8px; flex-wrap: wrap; }
.confirm-actions [hidden] { display: none; }
/* Wide, short buttons here (not the square board buttons). */
.confirm-actions .ctrl {
    flex-direction: row; gap: 6px; min-width: 0; min-height: 38px;
    padding: 6px 14px; border-radius: 10px; font-size: 0.92rem; border-width: 2px;
}
/* The main way forward (Log in / Upgrade) stands out. */
/* Not now + See Benefits on the left, Log in / Upgrade on the right. */
.confirm-actions [data-confirm-extra] { margin-left: auto; }
.confirm-actions .ctrl-main { font-weight: 800; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.ctrl.ctrl-danger { background: #B42318; border-color: #B42318; color: #FFF; }

/* ✕ on words and phrases this person added (top-right; the star is bottom-right). */
.del {
    position: absolute; right: 4px; top: 4px;
    display: grid; place-items: center;
    width: 30px; height: 30px; padding: 0;
    border: 0; background: none; color: #B42318;
    font-size: 18px; font-weight: 800; line-height: 1; cursor: pointer;
}
.del:focus-visible { outline: 3px solid var(--focus); border-radius: 6px; }
.theme-dark .del, .theme-contrast .del { color: #FF8A80; }
.quick-cell { position: relative; display: flex; min-width: 0; }
.quick-cell > .quick { flex: 1; min-width: 0; }
.quick-cell > .del { top: 2px; right: 2px; width: 24px; height: 24px; font-size: 14px; }

/* Favorites: grows downwards and scrolls once it has more than fits. */
.grid.grid-scroll { overflow-y: auto; }
.favorites-empty {
    grid-column: 1 / -1; align-self: center; margin: 0;
    text-align: center; font-size: 1.3rem; font-weight: 600; color: var(--muted);
}

/* Common conversation along the bottom, visible on every tab. */
.quickbar {
    /* Five phrases per row, all columns equal width so every row lines up. */
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 54px;
    gap: var(--gap);
    padding: 0 var(--gap) var(--gap);
    overflow-x: auto;
}
.quickbar[hidden] { display: none; }
.quick {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 100%; padding: 3px 8px;
    border: 3px solid var(--edge); border-radius: var(--radius);
    color: #1F2328; font-weight: 700; font-size: 0.95rem; cursor: pointer;
}
.quick .sym { font-size: 1.5rem; line-height: 1; }
.quick img.photo { height: 40px; width: auto; }
.quick .label { line-height: 1.1; text-align: center; }
.quick:active { outline: 4px solid var(--focus); outline-offset: -4px; }
.quick:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }
.labels-above .tile { flex-direction: column-reverse; }
.labels-hidden .tile .label { display: none; }

/* ---------- Themes (switched with the theme button) ---------- */

/* Dark: calm dark surroundings; the colored tiles keep their color code, just deeper. */
.theme-dark {
    --bg: #12161B; --surface: #1E242B; --ink: #E8ECEF; --muted: #9AA3AD;
    --edge: rgba(255, 255, 255, 0.16); --focus: #FFD400;
    --accent: #3E8E66; --accent-ink: #FFFFFF;
}
.theme-dark .tile, .theme-dark .quick, .theme-dark .strip-word { position: relative; border-color: rgba(0, 0, 0, 0.5); }
/* A soft shade over each colored tile, under its picture and word. */
.theme-dark .tile::before, .theme-dark .quick::before, .theme-dark .strip-word::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: rgba(10, 14, 18, 0.24); pointer-events: none;
}
.theme-dark .tile > *, .theme-dark .quick > *, .theme-dark .strip-word > * { position: relative; z-index: 1; }
.theme-dark .tile.opens { border-top-color: rgba(0, 0, 0, 0.75); }
.theme-dark .strip { border-color: rgba(255, 255, 255, 0.12); }

/* High contrast: black background, strong white borders. */
.theme-contrast { --bg: #000; --surface: #111; --ink: #FFF; --muted: #BBB; --edge: #FFF; --focus: #FFD400; }
.theme-contrast .tile { border-width: 4px; border-color: #FFF; }
.theme-contrast .quick { border-width: 4px; border-color: #FFF; }
.theme-contrast .strip-word { color: #1F2328; }
.theme-contrast .tab { border-color: #FFF; }
.theme-contrast .tab.active { background: #FFD400; color: #000; border-color: #FFD400; box-shadow: none; }

/* No transitions or animations anywhere when reduce-motion is on. */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
}

.pin-error { color: #B42318; font-weight: 600; margin: 10px 0 0; }

/* ---------- Log in pop-up (email + code) ---------- */
/* Register: the form on the left, the survey on the right (stacked on narrow screens). */
.code-form .register-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.code-form .register-col { display: grid; gap: 12px; min-width: 0; }
.code-form .register-survey { border: 1px solid var(--border, #ddd); border-radius: 12px; padding: 14px 16px 16px; margin: 0; }
.code-form .register-survey legend { font-weight: 800; padding: 0 6px; }
.code-form textarea { width: 100%; padding: 10px 12px; font: inherit; border: 1px solid var(--border, #ccc); border-radius: 10px; background: #fff; color: #1F2328; resize: vertical; box-sizing: border-box; }
.code-form .field small { font-weight: 400; color: var(--muted, #6b6b6b); }
/* Ask for access (tapping something locked while logged in) */
.request-dialog { width: min(900px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.request-dialog .login-sub { margin: 4px 0 14px; }
.request-dialog .rq-radio, .request-dialog .rq-right, .request-dialog .rq-how { border-width: 2px; }
.request-dialog .request-done p { margin: 0 0 10px; }
.request-dialog [hidden] { display: none; }
.code-form .register-survey .check { font-weight: 400; }
.code-form [hidden] { display: none; }
.code-form select { width: 100%; padding: 10px 12px; font: inherit; border: 1px solid var(--border, #ccc); border-radius: 10px; background: #fff; }
@media (max-width: 720px) { .code-form .register-cols { grid-template-columns: 1fr; } }
.code-form .register-step { display: grid; gap: 12px; }
.code-form .register-step[hidden] { display: none; }
.code-form .register-step-title { margin: 0; font-size: 1.1rem; }
.login-dialog { width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.login-dialog h2 { margin: 0; }
.login-sub { margin: 4px 0 14px; color: var(--muted); }
.code-form { display: grid; gap: 12px; }
.code-form .field { display: grid; gap: 6px; font-weight: 700; }
.code-form input:not([type="checkbox"]) {
    width: 100%; padding: 12px; font: inherit; font-weight: 400; font-size: 1.05rem;
    border: 2px solid var(--edge); border-radius: 10px; background: var(--surface); color: var(--ink);
}
.code-form .code-input { font-size: 1.3rem; letter-spacing: 0.25em; text-transform: uppercase; }
.code-form .code-input::placeholder { letter-spacing: 0.1em; text-transform: none; }
.code-form .error { color: #B42318; font-weight: 600; margin: 0; }
.code-form .check { display: flex; justify-content: flex-start; align-items: center; gap: 10px; font-weight: 400; }
.code-form .check input { width: 18px; height: 18px; padding: 0; flex: none; accent-color: var(--accent); }
.code-form .field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.code-form .field-head a { font-weight: 600; font-size: 0.85rem; }
.code-actions { display: flex; justify-content: space-between; gap: 8px; } /* Not now left, Log in right */
.code-actions .ctrl { flex-direction: row; min-width: 0; min-height: 38px; padding: 6px 14px; border-radius: 10px; font-size: 0.92rem; border-width: 2px; }
.code-actions .ctrl-main { font-weight: 800; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.code-help { border: 2px solid var(--edge); border-radius: 10px; padding: 10px 14px; font-size: 0.95rem; line-height: 1.45; }
.code-help summary { cursor: pointer; font-weight: 700; color: var(--accent); }
.code-help p { margin: 8px 0 0; }
.code-help a { color: var(--accent); font-weight: 700; }
.code-plans { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; }

/* Phones: tighter chrome so the grid keeps most of the screen. */
@media (max-width: 600px) {
    :root { --gap: 5px; --radius: 10px; }
    .strip { min-height: 64px; }
    .strip-word { height: 52px; min-width: 52px; }
    .strip-word .sym { font-size: 1.4rem; }
    .ctrl { min-width: 0; flex: none; padding: 4px 8px; min-height: 52px; }
    .ctrl > span:not([aria-hidden]):not([data-control]) { display: none; }
    .ctrl-speak > span:not([aria-hidden]):not([data-control]) { display: inline; }
    .board-name { font-size: 1rem; }
    .tile { border-width: 2px; padding: 3px; }
    .star { right: 2px; bottom: 2px; width: 24px; height: 24px; font-size: 17px; }
    .tabs, .tabs.tabs-2col { width: 64px; grid-template-columns: 1fr; grid-auto-rows: 56px; }
    .tab { padding: 4px 2px; border-width: 2px; font-size: 0.7rem; }
    .tab-icon { font-size: 1.4rem; }
    .tab-name-long { font-size: 0.6rem; }
    .tab-name-xlong { font-size: 0.55rem; }
    .quickbar { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 50px; }
    .quick { gap: 4px; padding: 2px 6px; border-width: 2px; font-size: 0.72rem; }
    .quick .sym { font-size: 1.3rem; }
}

/* Facebook pages with logos, and how the code is sent (login pop-up). */
.fb-pages { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.code-help .fb-page {
    display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px;
    border: 2px solid #1877F2; border-radius: 999px; color: #1877F2; text-decoration: none;
}
.fb-page img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #fff; }
.code-help .code-delivery { padding: 8px 10px; border-radius: 8px; background: rgba(47, 111, 79, 0.12); font-weight: 600; }

/* ---------- Support / Inquiry pop-up ---------- */
.info-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.info-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.info-head h2 { margin: 0; }
.info-close { min-width: 40px; min-height: 40px; padding: 4px; font-size: 1.1rem; }
.info-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.info-actions .ctrl {
    flex-direction: row; gap: 6px; min-width: 0; min-height: 38px; padding: 6px 14px;
    border-radius: 10px; border-width: 2px; font-size: 0.92rem; color: inherit; text-decoration: none;
}
.info-actions .ctrl-main { font-weight: 800; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }

.support-body { display: grid; gap: 12px; margin: 12px 0 4px; line-height: 1.5; }
.support-body p { margin: 0; }
.support-body .fb-page {
    font-weight: 700; border: 2px solid #1877F2; color: #1877F2; text-decoration: none; background: #fff;
    /* Equal rectangles, logo above the name, even spacing. */
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    aspect-ratio: 16 / 9; padding: 14px; border-radius: 14px; text-align: center; line-height: 1.25; font-size: 0.95rem;
}
.support-body .fb-pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 4px 0 0; }
.support-body .fb-page img { width: 72px; height: 72px; }


/* Benefits (beside Apps): lifts and lights up on hover, the bulb gives a little wiggle. */
#benefits { transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; }
#benefits:hover, #benefits:focus-visible {
    transform: translateY(-3px); border-color: var(--accent);
    background: #FFF3CC; color: #1F2328; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}
#benefits:hover [data-control] { animation: bulb-wiggle 0.6s ease; }
@keyframes bulb-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@media (prefers-reduced-motion: reduce) {
    #benefits:hover, #benefits:focus-visible { transform: none; }
    #benefits:hover [data-control] { animation: none; }
}

/* ➕ Add: how many words/phrases are left on this plan */
.add-count { margin: -4px 0 12px; padding: 6px 10px; border-radius: 8px; background: rgba(47, 111, 79, 0.12); font-size: 0.9rem; font-weight: 600; }

/* Facebook page names in "How to get a code?": highlighted links */
.code-help .page-link { padding: 0 4px; border-radius: 4px; background: #E7F0FE; color: #1877F2; font-weight: 700; text-decoration: none; white-space: nowrap; }

/* Paid: 📷 on People pictures to use a real photo */
.photo-btn {
    position: absolute; left: 4px; top: 4px; display: grid; place-items: center;
    width: 32px; height: 32px; padding: 0; border: 2px solid var(--edge); border-radius: 50%;
    background: var(--surface); font-size: 16px; line-height: 1; cursor: pointer;
}
.photo-btn:hover { border-color: var(--accent); }
.photo-btn:focus-visible { outline: 3px solid var(--focus); }

/* Log in / Register pop-ups: two fields per row (one column on phones). */
.code-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .code-form .form-row { grid-template-columns: 1fr; } }
.code-form .form-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; font-size: 0.9rem; }
.code-form .form-meta a { font-weight: 600; }
.code-form .form-meta .muted { color: var(--muted, #6b6b6b); font-weight: 400; }
.code-form input[type="url"] { width: 100%; }

/* Support tickets (in the Support pop-up) */
.ticket-form { display: grid; gap: 10px; }
.ticket-form .field { display: grid; gap: 4px; font-weight: 700; }
.ticket-form input, .ticket-form textarea { font: inherit; padding: 10px 12px; border: 2px solid var(--edge); border-radius: 10px; background: var(--surface); color: inherit; }
.ticket-actions { display: flex; justify-content: flex-end; }
.ticket-login { margin: 0; }
.ticket-login a { color: var(--accent); font-weight: 700; }

/* ---------- Tablets ---------- */

/* The board is never wider than the screen. */
.board-page, .topbar { grid-template-columns: minmax(0, 1fr); }
.controls { min-width: 0; }
:root { --tile-min: 100px; }          /* the smallest a picture row gets before the pictures scroll */

/* A tablet held upright: a small hint to turn it sideways (the board is made for that). It can be dismissed. */
.rotate-hint { display: none; }
@media (min-width: 601px) and (orientation: portrait) {
    .rotate-hint:not([hidden]) {
        display: flex; align-items: center; justify-content: center; gap: 10px;
        min-height: 44px; padding: 6px 14px; font: inherit; font-size: 1rem; font-weight: 700;
        color: var(--ink); background: var(--accent-soft, #E4F2E9); border: 2px solid var(--accent, #2F6F4F); border-radius: var(--radius);
        cursor: pointer;
    }
}

/* ---------- The picture grid scrolls ---------- */
.grid.grid-scroll { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* ---------- The menu (☰) holds Apps, Help, Benefits, Add, Download, Look, Switch and Log in ---------- */
.menu-wrap { position: relative; flex: none; }
.ctrl-menu .menu-icon { font-size: 1.5rem; line-height: 1; }
.board-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
    display: grid; gap: 6px; width: min(250px, calc(100vw - 24px)); max-height: 72vh; overflow-y: auto; padding: 8px;
    background: var(--surface); border: 3px solid var(--edge); border-radius: var(--radius); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}
.board-menu[hidden] { display: none; }
.board-menu .ctrl { flex-direction: row; justify-content: flex-start; gap: 12px; width: 100%; min-width: 0; min-height: 54px; padding: 6px 14px; font-size: 1.05rem; text-align: left; }
.board-menu .ctrl > span[data-control], .board-menu .ctrl > .ctrl-pic { flex: none; width: 36px; display: grid; place-items: center; font-size: 1.5rem; }
/* the words always show inside the menu, even on a phone */
.board-menu .ctrl > span:not([aria-hidden]):not([data-control]) { display: inline; }

/* ---------- Smaller boxes on the left (the categories) and the top (the sentence and buttons) ---------- */
@media (min-width: 601px) {
    :root { --gap: 8px; }
    .tabs { width: 92px; grid-auto-rows: 58px; }
    .tabs.tabs-2col { width: 176px; }
    .tab { padding: 4px 3px; font-size: 0.82rem; }
    .tab-icon { font-size: 1.5rem; }
    .tab-name-long { font-size: 0.74rem; }
    .tab-name-xlong { font-size: 0.68rem; }
    .strip { min-height: 62px; padding: 4px 8px; }
    .strip-word { height: 52px; min-width: 52px; }
    .strip-word .sym { font-size: 1.5rem; }
    .ctrl { min-width: 64px; min-height: 48px; padding: 4px 8px; font-size: 0.8rem; }
    .ctrl > span[aria-hidden], .ctrl > span[data-control] { font-size: 1.3rem; }
    .ctrl-speak { min-width: 84px; }
    .board-name { font-size: 1.15rem; }
}

/* ---------- Phrase rows under the pictures: every category has them, except Chat (board.js hides them there) ---------- */
.quickbar[hidden] { display: none; }
/* ---------- The pictures and phrase rows sit in their own bordered panel, apart from the category tabs ---------- */
.workspace { padding-right: var(--gap); padding-bottom: var(--gap); }
.board-col {
    margin: var(--gap) 0 0 var(--gap);
    padding: var(--gap);
    background: color-mix(in srgb, var(--ink) 8%, var(--bg));
    border: 3px solid color-mix(in srgb, var(--ink) 38%, transparent);
    border-radius: calc(var(--radius) + 4px);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.08);
}
.board-col .grid { padding: 0 0 var(--gap); }
.board-col .quickbar { padding: 0; }
.tabs { padding-top: 0; margin-top: var(--gap); } /* first tab (Favorites) lines up with the panel's top border */

/* Rows have a fixed size (board.js fitRows), so every category's pictures match; spare room stays empty at the bottom. */
.grid { align-content: start; }

/* ---------- Left category buttons: breathing room around and inside them ---------- */
.tabs { padding: 0 10px 12px 12px; gap: 10px; scrollbar-width: thin; }
.tab { padding: 8px 6px; }
@media (min-width: 601px) {
    .tabs { width: 108px; grid-auto-rows: 62px; }
    .tabs.tabs-2col { width: 200px; }
}
@media (max-width: 600px) {
    .tabs, .tabs.tabs-2col { width: 72px; padding: 0 6px 8px 6px; gap: 6px; }
}

/* ---------- Edit mode: tools on the words and phrases this person added ---------- */
.ctrl[hidden] { display: none; }
.edit-tools {
    position: absolute; top: 3px; left: 3px; right: 3px; z-index: 3;
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px;
    pointer-events: none;
}
.etool {
    pointer-events: auto;
    display: grid; place-items: center;
    width: 28px; height: 28px; padding: 0;
    border: 2px solid var(--ink); border-radius: 8px;
    background: var(--surface); color: var(--ink);
    font-size: 13px; line-height: 1; cursor: pointer;
}
.etool:disabled { opacity: 0.35; cursor: default; }
.etool:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.etool-del { color: #B42318; font-weight: 800; }
.theme-dark .etool-del, .theme-contrast .etool-del { color: #FF8A80; }
/* Phrase rows while editing: the same height as usual, and every phrase is reachable by scrolling. */
.editing .quickbar { max-height: calc(2 * 54px + var(--gap)); overflow-y: auto; }
/* The tools sit in a slim column beside each phrase, not over it. */
.editing .quick-cell { align-items: stretch; gap: 2px; }
.editing .quick-cell > .edit-tools {
    position: static; inset: auto; flex: 0 0 22px; width: 22px;
    flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 0;
}
.editing .quick-cell > .edit-tools .etool { width: 22px; height: 22px; font-size: 15px; }

/* The chosen photo, shown before it is used. */
.photo-preview { display: block; max-width: 100%; max-height: 200px; margin: 8px auto 0; border-radius: 12px; object-fit: contain; }
.photo-preview[hidden] { display: none; }

/* Dragging in Edit mode */
.etool-drag { cursor: grab; touch-action: none; }
.etool-drag:active { cursor: grabbing; }
.cell.dragging, .quick-cell.dragging { opacity: 0.4; }
.cell.drop-target, .quick-cell.drop-target { outline: 4px dashed var(--focus); outline-offset: 2px; border-radius: 12px; }

/* Cropping a photo to the face */
.crop-hint { margin: 0 0 10px; text-align: center; font-size: 0.95rem; }
.crop-frame {
    position: relative; width: 280px; height: 280px; margin: 0 auto; overflow: hidden;
    border-radius: 12px; background: #222; touch-action: none; user-select: none;
}
.crop-frame canvas { display: block; width: 280px; height: 280px; cursor: grab; }
.crop-frame.is-dragging canvas { cursor: grabbing; }
/* The circle for the face; everything outside it is dimmed. */
.crop-guide {
    position: absolute; inset: 28px; border-radius: 50%; pointer-events: none;
    border: 3px solid #FFF; box-shadow: 0 0 0 400px rgba(0, 0, 0, 0.5);
}
.crop-zoom { display: flex; align-items: center; gap: 8px; width: 280px; margin: 12px auto 0; }
.crop-zoom input { flex: 1; min-width: 0; }

/* Edit mode: the picture itself is dragged, so its button must not catch the mouse (✕ and ✏️ still work). */
.editing .cell.draggable, .editing .quick-cell.draggable { cursor: grab; }
.editing .cell.draggable .tile, .editing .quick-cell.draggable .quick { pointer-events: none; }

/* Edit tools are just the mark: no border, no box. */
.etool { border: 0; background: none; width: 26px; height: 26px; font-size: 18px; font-weight: 800; text-shadow: 0 0 3px #FFF, 0 0 3px #FFF; }
.etool-del { font-size: 20px; }
.theme-dark .etool, .theme-contrast .etool { text-shadow: 0 0 3px #000, 0 0 3px #000; }

/* A message with several lines (the Edit instructions) keeps its line breaks, one bullet per line. */
#confirm-message { white-space: pre-line; text-align: left; }