/* Nihongo is dark only. color-scheme tells the browser to draw its own controls (inputs, buttons, scrollbars, the camera permission prompt where it can) in their dark style, and the meta tag in the page says the same before this file has loaded. There is deliberately no light theme and no prefers-color-scheme switch. */
:root {
    color-scheme: dark;

    --background-page: #0e0f13;
    --background-raised: #181a21;
    --border-subtle: #2a2d38;
    --text-main: #ececf1;
    --text-muted: #9a9cab;
    --accent: #ff6b81;
    --right-answer: #3ddc84;

    --font-main: "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic", system-ui, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--background-page);
    color: var(--text-main);
    font-family: var(--font-main);
}

/* One layout for portrait and landscape: a single centred column whose width is capped by both the screen's width and its height, so the square camera view always fits whichever way the phone is held. */
/* The log in pages. The safe-area insets keep the column clear of the status bar and the navigation buttons when the app is installed, where it is drawn edge to edge (see app_shell.php). */
.app-column {
    width: min(100%, 640px);
    margin: 0 auto;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

/* The line height leaves room above each line for the kana readings (ruby), so they never touch the line before. */
.home-phrase {
    margin: 24px 0 8px;
    font-size: clamp(1.2rem, 5.5vw, 1.5rem);
    font-weight: 600;
    line-height: 2.2;
    text-align: center;
    text-wrap: balance;
}

/* A chunk never breaks inside, so lines only wrap between chunks. Example: これは日本語で then 何と言いますか？ on the next line, never 言 on one line and いますか？ on the next. */
.home-phrase-chunk {
    display: inline-block;
    white-space: nowrap;
}

ruby rt {
    font-size: 0.5em;
    font-weight: 400;
    color: var(--text-muted);
}

/* Where the typed word will go: a dashed box holding a hint of what to type. Example: 「word」 on the English question. */
.home-phrase-slot {
    display: inline-block;
    min-width: 4em;
    padding: 0 0.4em;
    border: 1px dashed var(--text-muted);
    border-radius: 6px;
    color: var(--text-muted);
    font-weight: 400;
    line-height: 1.6;
}

.home-note {
    margin: 0;
    color: var(--text-muted);
    text-align: center;
}

/* Accounts: log in, sign up, forgot password, set a new password, log out. */
.account-panel {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.account-status {
    margin: 0;
    text-align: center;
}

.panel-switcher {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    overflow: hidden;
}

.panel-switcher-button {
    padding: 12px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    cursor: pointer;
}

.panel-switcher-button[aria-selected="true"] {
    background: var(--background-raised);
    color: var(--text-main);
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.account-form[hidden] {
    display: none;
}

.account-form-title {
    margin: 0;
    font-size: 1.2rem;
    text-align: center;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* 16px text stops iPhones zooming the page in when an input is tapped. */
.field input {
    padding: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--background-raised);
    color: var(--text-main);
    font: inherit;
    font-size: 16px;
}

.field input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.button-primary,
.button-secondary {
    padding: 14px;
    border-radius: 10px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.button-primary {
    border: none;
    background: var(--accent);
    color: #1a0b0f;
}

.button-secondary {
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-main);
}

/* Delete. The first tap arms it ("Tap again to delete", filled red); a second tap within 3 seconds deletes. */
.button-danger {
    padding: 14px;
    border: 1px solid var(--accent);
    border-radius: 10px;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.button-danger-armed {
    background: var(--accent);
    color: #1a0b0f;
}

.button-primary:disabled,
.button-secondary:disabled,
.button-danger:disabled {
    opacity: 0.5;
    cursor: wait;
}

.button-link {
    border: none;
    background: none;
    color: var(--text-muted);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.form-message {
    margin: 0;
    min-height: 1.4em;
    color: var(--text-muted);
    text-align: center;
}

.form-message-error {
    color: var(--accent);
}

/* The logged-out pages: the app name and what it is, above the forms. */
.landing-header {
    margin: 32px 0 8px;
    text-align: center;
}

.landing-title {
    margin: 0 0 8px;
    font-size: 2rem;
    letter-spacing: 0.05em;
}

/* The logged-in app is exactly one screen tall and never scrolls. The body is locked, and the screen is a column: the bar, the viewfinder area taking whatever height is left, then the controls or the word card.
 *
 * The screen is pinned to the edges of the viewport (position: fixed; inset: 0) rather than given a height of 100dvh. In the installed app on Android, Chrome makes 100dvh taller than the area actually visible, so a 100dvh screen put the shutter row behind the navigation buttons; the pinned box's bottom edge sits exactly above them (measured on the phone). Pinned to the edges, it also shrinks when the keyboard opens (interactive-widget=resizes-content), so the frozen photo gets smaller instead of the word card being pushed off screen. The safe-area insets keep everything clear of notches and system bars where the phone reports them. */
body.fixed-screen {
    overflow: hidden;
    overscroll-behavior: none;
}

.app-screen {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(100%, 640px);
    margin: 0 auto;
    padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.app-bar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
}

.app-bar-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.app-name {
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* In the bar the name is a link home to the camera, looking exactly like the plain name. */
.app-name-link {
    color: inherit;
    text-decoration: none;
}

.app-screen-title {
    color: var(--text-muted);
}

.menu-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: none;
    background: none;
    cursor: pointer;
}

.menu-button-line {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: var(--text-main);
}

/* Takes all the height the bar and the controls (or the word card) leave, and is a size container, so the viewfinder inside can be the largest square that fits: min(100cqw, 100cqh) is the smaller of the area's width and height. Example: on a 390 × 844 portrait phone the viewfinder is about 358 px square; in landscape it is as tall as the space allows. */
.viewfinder-area {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    container-type: size;
}

.viewfinder {
    position: relative;
    width: min(100cqw, 100cqh);
    height: min(100cqw, 100cqh);
    border-radius: 16px;
    overflow: hidden;
    background: var(--background-raised);
}

.viewfinder-picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.viewfinder-picture[hidden] {
    display: none;
}

.viewfinder-message {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 24px;
    color: var(--text-muted);
    text-align: center;
}

.viewfinder-message[hidden] {
    display: none;
}

/* A short message floating over the bottom of the viewfinder, e.g. "Saved れいぞうこ". It takes no room of its own, so it never moves anything. */
.viewfinder-toast {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    margin: 0;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(14, 15, 19, 0.85);
    white-space: nowrap;
}

.viewfinder-toast[hidden] {
    display: none;
}

/* Last saved photo, shutter, files: three equal columns, so the shutter sits in the exact centre whether or not there is a last photo yet. */
.camera-controls {
    display: grid;
    flex: none;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.camera-controls[hidden] {
    display: none;
}

/* The last saved photo is also the way to the words screen, like the gallery thumbnail in a phone's camera app. */
.last-word-link {
    justify-self: start;
    display: block;
}

.last-word-link[hidden] {
    display: none;
}

.last-word-photo {
    display: block;
    width: 52px;
    height: 52px;
    border: 2px solid var(--border-subtle);
    border-radius: 10px;
    object-fit: cover;
}

.shutter-button {
    grid-column: 2;
    width: 72px;
    height: 72px;
    border: 4px solid var(--text-main);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: inset 0 0 0 4px var(--background-page);
    cursor: pointer;
}

.shutter-button:active {
    transform: scale(0.94);
}

.shutter-button:disabled {
    opacity: 0.4;
    cursor: default;
}

.files-button {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    color: var(--text-main);
    cursor: pointer;
}

/* Compact, so the frozen photo above keeps as much of the screen as possible. */
.word-card {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 8px;
}

.word-card[hidden] {
    display: none;
}

.word-card .field {
    gap: 2px;
}

.word-card .field-label {
    font-size: 0.8rem;
}

.word-card .field input {
    padding: 9px 12px;
}

.word-card-buttons {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 12px;
}

.word-card-buttons .button-primary,
.word-card-buttons .button-secondary {
    padding: 11px;
}

.word-card .form-message {
    min-height: 0;
}

.word-card .form-message:empty {
    display: none;
}

/* The menu covers the whole screen. Its content may scroll on a very small screen, which is the one place scrolling is allowed. */
.app-menu {
    /* Pinned to the viewport's edges like .app-screen, never 100dvh (see there). Width and height auto with all four edges at 0 fill the viewport exactly; the max- limits undo the browser's own dialog sizing. */
    position: fixed;
    inset: 0;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0;
    padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    border: none;
    background: var(--background-page);
    color: var(--text-main);
}

.app-menu[open] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.app-menu::backdrop {
    background: var(--background-page);
}

.app-menu-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
}

.app-menu-questions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(100%, 560px);
    margin: 0 auto;
}

.app-menu-question {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 4px 12px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    background: var(--background-raised);
    color: inherit;
    font: inherit;
    text-align: center;
}

button.app-menu-question {
    cursor: pointer;
}

.app-menu-question .home-phrase {
    margin: 0;
    font-size: clamp(1.1rem, 5vw, 1.35rem);
}

.app-menu-question-note {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.app-menu-account {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(100%, 560px);
    margin: auto auto 0;
    text-align: center;
}

.app-menu-email {
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.app-menu-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(100%, 560px);
    margin: 0 auto;
}

.app-menu-link {
    display: block;
    width: 100%;
    padding: 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    background: var(--background-raised);
    color: var(--text-main);
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

a.app-menu-question {
    color: inherit;
    text-decoration: none;
}

/* The words screen. The area under the bar is a size container, and each tile is a third of the smaller of its width and height, so 3 × 3 tiles always fit without scrolling. Example: on a 390 × 844 portrait phone each tile is about 114 px; in landscape the tiles shrink to fit the height. */
.word-pages-area {
    flex: 1;
    min-height: 0;
    container-type: size;
    --word-grid-gap: 8px;
    --word-tile-side: calc((min(100cqw, 100cqh) - 2 * var(--word-grid-gap)) / 3);
}

.word-pages-empty {
    margin: 0;
    padding: 24px;
    color: var(--text-muted);
    text-align: center;
}

.word-pages-empty a {
    color: var(--text-main);
}

/* Pages side by side; a swipe snaps exactly one page. The scrollbar is hidden because the pager below shows where you are. */
.word-pages {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.word-pages::-webkit-scrollbar {
    display: none;
}

.word-page {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.word-page .word-grid {
    display: grid;
    grid-template-columns: repeat(3, var(--word-tile-side));
    grid-auto-rows: var(--word-tile-side);
    gap: var(--word-grid-gap);
    align-content: start;
    width: auto;
    height: calc(3 * var(--word-tile-side) + 2 * var(--word-grid-gap));
    margin: 0;
    padding: 0;
    list-style: none;
}

.word-grid-cell {
    min-width: 0;
}

.word-tile {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    background: var(--background-raised);
    cursor: pointer;
}

.word-tile .word-tile-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* The word across the bottom of its photo, on a dark fade so it reads on any photo. */
.word-tile-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 6px 5px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.word-pager {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.word-pager[hidden] {
    display: none;
}

.word-pager-button {
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    background: none;
    color: var(--text-main);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.word-pager-button:disabled {
    opacity: 0.3;
    cursor: default;
}

.word-pager-position {
    min-width: 4em;
    color: var(--text-muted);
    text-align: center;
}

/* The word editor: full screen like the menu, the photo shrinking to whatever height the fields leave. */
.word-editor {
    /* Pinned to the viewport's edges like .app-screen, never 100dvh (see there). Width and height auto with all four edges at 0 fill the viewport exactly; the max- limits undo the browser's own dialog sizing. */
    position: fixed;
    inset: 0;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0;
    padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    border: none;
    background: var(--background-page);
    color: var(--text-main);
}

.word-editor[open] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.word-editor::backdrop {
    background: var(--background-page);
}

.word-editor .word-card {
    width: min(100%, 608px);
    margin: 0 auto;
}

.editor-photo-area {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    container-type: size;
}

/* The photo frame is the largest square that fits, like the camera's viewfinder; the replace button floats over its bottom edge. */
.editor-photo-frame {
    position: relative;
    width: min(100cqw, 100cqh);
    height: min(100cqw, 100cqh);
}

.editor-photo {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    object-fit: cover;
    background: var(--background-raised);
}

.editor-photo[hidden] {
    display: none;
}

.editor-replace-photo {
    border: none;
    font: inherit;
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(14, 15, 19, 0.85);
    color: var(--text-main);
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
}

.editor-replace-photo[hidden] {
    display: none;
}

/* While the editor's camera is open: Cancel, the shutter and the folder button in a row over the bottom of the viewfinder. */
.editor-camera-controls {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.editor-camera-controls[hidden] {
    display: none;
}

.editor-camera-cancel {
    justify-self: start;
    padding: 8px 14px;
    border: none;
    border-radius: 999px;
    background: rgba(14, 15, 19, 0.85);
    color: var(--text-main);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.editor-shutter {
    grid-column: 2;
    width: 60px;
    height: 60px;
}

.editor-files-button {
    grid-column: 3;
    justify-self: end;
    width: 44px;
    height: 44px;
    background: rgba(14, 15, 19, 0.85);
}

/* While the new photo uploads, it shows dimmed and the button cannot be pressed again. */
.editor-photo-frame-saving .editor-photo {
    opacity: 0.4;
}

.editor-photo-frame-saving .editor-replace-photo {
    pointer-events: none;
    opacity: 0.5;
}

/* Groups. A chip is a rounded pill; aria-pressed="true" (ticked, chosen) or aria-current="page" (the group being shown) fills it with the accent. */
.group-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--background-raised);
    color: var(--text-main);
    font: inherit;
    font-size: 0.9rem;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.group-chip[aria-pressed="true"],
.group-chip[aria-current="page"] {
    border-color: var(--accent);
    background: var(--accent);
    color: #1a0b0f;
    font-weight: 600;
}

.group-chip-new {
    border-style: dashed;
    color: var(--text-muted);
}

/* The words screen's group chips: one row that swipes sideways when there are more groups than fit, like the pages below it. */
.group-filter {
    display: flex;
    flex: none;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.group-filter::-webkit-scrollbar {
    display: none;
}

/* The groups row on a word form: chosen groups, then "＋ Groups". Swipes sideways rather than growing taller, so the form never gets pushed off screen. */
.group-field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
}

.group-field-chips {
    display: flex;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.group-field-chips::-webkit-scrollbar {
    display: none;
}

.group-field-chips .group-chip {
    padding: 5px 10px;
    font-size: 0.85rem;
}

.group-field-open-picker {
    flex: none;
    padding: 5px 10px;
    border: 1px dashed var(--border-subtle);
    border-radius: 999px;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
}

/* The group picker: full screen like the menu, every group as a chip that wraps onto as many lines as it needs, and the new group box underneath. */
.group-picker {
    position: fixed;
    inset: 0;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0;
    padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    border: none;
    background: var(--background-page);
    color: var(--text-main);
}

.group-picker[open] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.group-picker::backdrop {
    background: var(--background-page);
}

.group-picker-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
    overflow-y: auto;
}

.group-picker-empty[hidden] {
    display: none;
}

.group-picker-new {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 10px;
    margin-top: auto;
}

.group-picker-new .button-secondary {
    padding: 12px 18px;
}

/* Small dialogs (new group, group manager): a card in the middle of the screen over a dimmed backdrop. */
.small-dialog {
    width: min(100% - 32px, 420px);
    padding: 20px;
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    background: var(--background-page);
    color: var(--text-main);
}

.small-dialog::backdrop {
    background: rgba(0, 0, 0, 0.7);
}

.small-dialog .button-primary,
.small-dialog .button-secondary,
.small-dialog .button-danger {
    display: block;
    text-align: center;
    text-decoration: none;
}

/* Choosing words for a group: the reminder and Done, in place of the group chips. */
.choose-bar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.choose-bar-hint {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.choose-bar-hint strong {
    color: var(--text-main);
}

.choose-bar-done {
    flex: none;
    padding: 10px 22px;
    text-decoration: none;
}

/* A ticked tile while choosing: an accent border and a tick in the corner. Unticked tiles are dimmed, so it is clear at a glance which are in the group. */
.word-tile-tick {
    display: none;
}

.word-pages[data-choosing-for-group-id] .word-tile {
    opacity: 0.45;
}

.word-pages[data-choosing-for-group-id] .word-tile[aria-pressed="true"] {
    opacity: 1;
    outline: 3px solid var(--accent);
    outline-offset: -3px;
}

.word-tile[aria-pressed="true"] .word-tile-tick {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    color: #1a0b0f;
    font-size: 0.85rem;
    font-weight: 700;
}

/* The lookup page. The question keeps its home-page look, with the typing box sitting in the slot where "word" or ことば was. */
.lookup-question {
    flex: none;
}

.lookup-question .home-phrase {
    margin: 0;
}

.lookup-input {
    width: 6.5em;
    padding: 0 0.3em;
    border: none;
    border-bottom: 2px solid var(--accent);
    border-radius: 0;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
}

.lookup-input:focus {
    outline: none;
    background: var(--background-raised);
}

.lookup-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

/* Results, as many to a page as fit (lookup.js sets --results-per-page, 1 to 4): the area is split into that many equal rows, so the cards always fit whatever the screen's height, keyboard open or not. */
.lookup-results-area {
    flex: 1;
    min-height: 0;
    display: flex;
}

.lookup-status {
    margin: auto;
    color: var(--text-muted);
    text-align: center;
}

.lookup-status[hidden] {
    display: none;
}

.lookup-pages {
    display: flex;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.lookup-pages[hidden] {
    display: none;
}

.lookup-pages::-webkit-scrollbar {
    display: none;
}

.lookup-page {
    flex: 0 0 100%;
    display: grid;
    grid-template-rows: repeat(var(--results-per-page, 4), minmax(0, 1fr));
    gap: 8px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.lookup-result {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 0;
    padding: 8px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    background: var(--background-raised);
    overflow: hidden;
}

/* The words take all the card's width the two buttons leave, and are a link to the camera like the camera button. */
.lookup-result-link {
    flex: 1;
    min-width: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.lookup-result-words {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
}

.lookup-result-japanese {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.9;
}

.lookup-result-note {
    color: var(--text-muted);
}

.lookup-result-badge {
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(255, 107, 129, 0.15);
    color: var(--accent);
    font-size: 0.75rem;
}

/* At most two lines of meanings; the rest is cut with an ellipsis. */
.lookup-result-meanings {
    flex-basis: 100%;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.lookup-result-camera {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent);
    color: #1a0b0f;
}

.dictionary-credit {
    flex: none;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.7rem;
    text-align: center;
}

.dictionary-credit a {
    color: inherit;
}

/* On the camera: which looked-up word the next photo is for, across the top of the viewfinder. */
.prefilled-word-banner {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 6px 6px 14px;
    border-radius: 999px;
    background: rgba(14, 15, 19, 0.85);
    font-size: 0.9rem;
}

.prefilled-word-clear {
    flex: none;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--background-raised);
    color: var(--text-main);
    font-size: 1.1rem;
    cursor: pointer;
}

/* Dictionary suggestions on a word form: one sideways row of matches above the boxes. */
.suggestion-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.suggestion-strip[hidden] {
    display: none;
}

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

.suggestion {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 11em;
    padding: 2px 12px 6px;
    border: 1px solid var(--accent);
    border-radius: 12px;
    background: var(--background-raised);
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.suggestion-japanese {
    font-weight: 700;
    line-height: 1.9;
    white-space: nowrap;
}

.suggestion-meaning {
    max-width: 100%;
    color: var(--text-muted);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-menu-account .dictionary-credit {
    margin-top: 4px;
}

/* The display mode switch in the menu: three options side by side, the chosen one filled with the accent. Each option shows itself the way it shows words, with a few English words underneath. */
.display-mode-switch {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: min(100%, 560px);
    margin: 0 auto;
}

.display-mode-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    padding: 4px 6px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--background-raised);
    color: var(--text-main);
    font: inherit;
    cursor: pointer;
}

.display-mode-option[aria-pressed="true"] {
    border-color: var(--accent);
    background: var(--accent);
    color: #1a0b0f;
}

.display-mode-option[aria-pressed="true"] rt,
.display-mode-option[aria-pressed="true"] .display-mode-option-english {
    color: #1a0b0f;
}

.display-mode-option-label {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 2;
}

.display-mode-option-english {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* Readings above a word on a photo tile: room for them above the caption's line, and kept legible on the dark fade. */
.word-tile-caption {
    line-height: 1.9;
    padding-top: 16px;
}

.word-tile-caption rt {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.6em;
}

/* 🔊: a round outlined button, beside the kana box on the word forms and on each lookup result. */
.speak-button {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    background: var(--background-raised);
    color: var(--text-main);
    cursor: pointer;
}

.speak-button[hidden] {
    display: none;
}

.speak-button:active {
    background: var(--accent);
    color: #1a0b0f;
}

/* A box with a button beside it, such as the kana box and its 🔊. */
.field-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.field-input-row input {
    flex: 1;
    min-width: 0;
}

.word-card .field-input-row .speak-button {
    width: 38px;
    height: 38px;
}

/* The quiz. Its three parts (start, question, done) each take the screen's height under the bar, and none of them scrolls. */
.quiz-start,
.quiz-question,
.quiz-done {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quiz-start[hidden],
.quiz-question[hidden],
.quiz-done[hidden] {
    display: none;
}

.quiz-start-heading {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.quiz-answer-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.quiz-start-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
}

.quiz-start-status {
    margin: 0;
    color: var(--text-muted);
    text-align: center;
}

.quiz-start-status strong {
    color: var(--text-main);
    font-size: 1.3rem;
}

.quiz-progress {
    flex: none;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
}

/* The prompt takes the height the answers leave, and is a size container so a photo in it can be the largest square that fits. */
.quiz-prompt-area {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    container-type: size;
}

.quiz-answers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.quiz-choice {
    border: 2px solid var(--border-subtle);
    border-radius: 14px;
    background: var(--background-raised);
    color: var(--text-main);
    font: inherit;
    cursor: pointer;
}

.quiz-choice:disabled {
    cursor: default;
}

.quiz-choice-right {
    border-color: var(--right-answer);
    background: rgba(61, 220, 132, 0.15);
}

.quiz-choice-wrong {
    border-color: var(--accent);
    background: rgba(255, 107, 129, 0.15);
}

/* Photo to word: a big photo, then four words in a 2 × 2 grid. */
.quiz-question[data-direction="photo_to_word"] .quiz-prompt-area {
    flex: 1;
}

.quiz-prompt-photo {
    width: min(100cqw, 100cqh);
    height: min(100cqw, 100cqh);
    border-radius: 16px;
    object-fit: cover;
}

.quiz-question[data-direction="photo_to_word"] .quiz-answers {
    flex: none;
}

.quiz-choice-word {
    min-height: 60px;
    padding: 6px 8px;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.9;
}

/* Word to photo: the word, then four photos in a 2 × 2 grid as large as the space allows. The answers area is the size container here, and the grid inside it makes each photo half the smaller of the area's width and height. */
.quiz-question[data-direction="word_to_photo"] .quiz-prompt-area {
    flex: none;
    container-type: normal;
}

.quiz-prompt-word {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 2rem;
    font-weight: 700;
    line-height: 2;
}

.quiz-question[data-direction="word_to_photo"] .quiz-answers {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    container-type: size;
}

.quiz-question[data-direction="word_to_photo"] .quiz-answers-grid {
    grid-template-columns: repeat(2, calc((min(100cqw, 100cqh) - 8px) / 2));
    grid-auto-rows: calc((min(100cqw, 100cqh) - 8px) / 2);
}

.quiz-choice-photo {
    padding: 0;
    overflow: hidden;
}

.quiz-choice-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quiz-choice-photo.quiz-choice-right,
.quiz-choice-photo.quiz-choice-wrong {
    border-width: 4px;
}

/* Typing the word: the box and Check side by side. */
.quiz-typing {
    flex: none;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.quiz-typing[hidden] {
    display: none;
}

.quiz-typing input {
    padding: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--background-raised);
    color: var(--text-main);
    font: inherit;
    font-size: 18px;
}

/* After answering: right or wrong with the word, 🔊, and Next. */
.quiz-feedback {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.quiz-feedback[hidden] {
    display: none;
}

.quiz-feedback-text {
    flex: 1;
    min-width: 0;
    margin: 0;
    line-height: 1.9;
}

.quiz-feedback-right {
    color: var(--right-answer);
}

.quiz-feedback-wrong {
    color: var(--accent);
}

.quiz-feedback .button-primary {
    flex: none;
    padding: 12px 22px;
}

.quiz-done {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.quiz-done-heading {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
}

.quiz-done-summary,
.quiz-done-next {
    margin: 0;
    color: var(--text-muted);
}

.quiz-done .button-primary,
.quiz-done .button-secondary {
    width: min(100%, 320px);
    text-align: center;
    text-decoration: none;
}