/* Shared touch controls on login, review and the layer editor. */
@media (max-width: 820px), (max-width: 1000px) and (max-height: 500px) and (pointer: coarse) {
  body { -webkit-text-size-adjust: 100%; }
  .top { position: static; }
  body input:not([type=checkbox]), body select, body textarea { font-size: 16px; min-height: 44px; }
  body button, body .button-link, body header a, body .toolbar a { min-height: 44px !important; min-width: 44px; touch-action: manipulation; }
  header a, .toolbar a { display: inline-flex; align-items: center; }
  header { padding-left: max(9px, env(safe-area-inset-left)); padding-right: max(9px, env(safe-area-inset-right)); padding-top: max(9px, env(safe-area-inset-top)); }
  header strong { min-width: 0; overflow-wrap: anywhere; }
  header select { min-width: 0; }
  body .toolbar { min-width: 0; }
  .toolbar button, .toolbar a { white-space: normal; }
  .matrix-scroll { max-width: 100%; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
  .matrix { grid-template-columns: repeat(var(--columns), minmax(230px, 70vw)); }
  .card { scroll-snap-align: start; }
  .card textarea { min-height: 76px; font-size: 16px; }
  .actions button { white-space: normal; }
  .source-images figure { min-width: 0; }
  .source-images figcaption { overflow-wrap: anywhere; }
  .archive-dialog, dialog { max-height: calc(100dvh - 24px); overflow: auto; }
  .archive-item, .dialog-actions { flex-wrap: wrap; }
  .editor { min-width: 0; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .editor > *, .grid > *, .field { min-width: 0; }
  .editor input[type=color] { height: 44px; }
  .login-shell { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .password-field .password-toggle { width: 44px; height: 44px; top: 0; right: 0; }
  .password-field input { padding-right: 48px; }
}
@media (max-width: 560px) {
  header #scene { flex: 1 1 100%; max-width: none; }
  .login-shell { padding-top: max(16px, env(safe-area-inset-top)); }
  .login-brand { margin-bottom: 16px; }
}
@media (max-height: 500px) and (pointer: coarse) {
  .top { position: static; }
  .login-shell { padding-top: max(12px, env(safe-area-inset-top)); }
  .login-brand { margin-bottom: 12px; }
  .login-card { padding: 18px; }
}

/* Keep controls touch sized while reducing repeated rows and surrounding space. */
@media (max-width: 820px), (max-width: 1000px) and (max-height: 500px) and (pointer: coarse) {
  header { gap: 4px; padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 4px max(6px, env(safe-area-inset-left)); }
  .top header > strong, body:has(.editor) header > strong { display: none; }
  body .top header .product-home.button-link, body:has(.editor) header .product-home.button-link { width: 44px; justify-content: center; gap: 0; padding: 6px; font-size: 0; }
  .top { --gutter: 6px; }
  .top header select { margin: 0; }
  .top .toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px 6px; }
  .top .toolbar > span { grid-column: 1 / -1; width: auto; font-size: 11px; }
  .top .status { padding: 0 6px 4px; font-size: 11px; }
  #variants { padding: 6px; }
  .matrix { grid-template-columns: repeat(var(--columns), minmax(210px, min(280px, 64vw))); gap: 6px; }
  .card { padding: 6px; border-radius: 8px; }
  .card canvas { max-height: 180px; }
  .card textarea { min-height: 64px; height: 64px; margin-top: 4px; padding: 6px; }
  .card .actions { flex-direction: row; gap: 4px; padding-top: 4px; }
  .card .actions button { padding: 6px 4px; font-size: 11px; }
  .project-overview, #preparation { width: calc(100% - 12px); margin: 6px auto 0; padding: 7px; border-radius: 8px; }
  .project-stages { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 3px; margin: 6px 0; }
  .project-stages li { padding: 3px 4px; font-size: 10px; }
  .project-next, #preparation p { font-size: 11px; }
  .source-frames { gap: 6px; }
  .source-frame { padding: 6px; }
  .source-images { gap: 4px; }
  .source-images img { max-height: 170px; }
  .editor { gap: 6px; padding: 6px; }
  .editor aside { padding: 7px; border-radius: 8px; }
  .editor h2 { margin-bottom: 6px; }
  .layers { gap: 2px; }
  .editor .field { gap: 3px; margin: 6px 0; }
  .editor .grid { gap: 5px; }
  .editor .grid .field { margin: 0; }
  .editor canvas { max-height: min(42dvh, 320px); }
  body header #scene { flex: 1 1 110px; width: 110px; max-width: none; }
  body header #locale { flex: 0 0 80px; width: 80px; }
  body header #addLocale { padding: 6px; font-size: 11px; }
  body header:has(#scene) .toolbar { display: grid; grid-template-columns: 44px minmax(90px, 1fr) 44px minmax(100px, 1fr); width: 100%; gap: 3px; }
  body header #save { min-width: 0; }
  body header #undo { font-size: 0; padding: 6px; }
  #undo::after { content: '↶'; font-size: 22px; line-height: 1; }
  body header #previewHtml, body header #export { padding: 6px 3px; font-size: 11px; }
  .login-shell { width: min(100% - 24px, 410px); padding-top: max(12px, env(safe-area-inset-top)); }
  .login-brand { margin-bottom: 10px; font-size: 16px; gap: 8px; }
  .login-mark { width: 36px; height: 36px; border-radius: 10px; }
  .login-mark img { width: 20px; height: 30px; }
  .login-card { padding: 16px; border-radius: 12px; }
  .login-card h1 { margin: 6px 0; font-size: 24px; }
  .login-description { margin-bottom: 12px; font-size: 12px; }
  .login-field { gap: 4px; margin-bottom: 10px; }
  .login-card .login-submit { margin-top: 12px; }
  .login-session { margin-top: 10px; }
  .login-footer { margin-top: 12px; }
}

.source-edit { display: grid; gap: 6px; margin-top: 10px; }
.source-edit select, .source-edit textarea { width: 100%; max-width: 100%; }
.source-edit textarea { min-height: 72px; resize: vertical; }
.source-edit-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.source-edit-actions button { flex: 1 1 120px; }
.source-edit .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding-top: 0; }
.source-comparison { margin-top: 6px; font-size: 11px; }
.source-comparison summary { cursor: pointer; }
.preview-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.preview-pair figure { min-width: 0; margin: 0; }
.preview-pair figcaption { margin-bottom: 4px; color: var(--muted); font-size: 10px; }
.preview-pair img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: contain; border-radius: 7px; }
.mark-surface { position: relative; min-width: 0; }
.region-box { position: absolute; pointer-events: none; border: 2px solid #54b9ff; background: rgb(84 185 255 / 14%); box-sizing: border-box; }
.region-overlays { position: absolute; inset: 0; pointer-events: none; }
.region-box[data-number]::before { content: attr(data-number); position: absolute; top: -2px; left: -2px; min-width: 19px; padding: 1px 4px; border-radius: 3px; color: #102438; background: #54b9ff; font: 700 11px/17px var(--font); }
.region-box.active { border-color: #fff; background: rgb(84 185 255 / 22%); }
.region-notes { flex: none; width: auto; font-size: 11px; }
.region-notes[open] { flex-basis: 100%; width: 100%; }
.region-notes > summary { cursor: pointer; min-height: 44px; align-content: center; color: var(--muted); }
.region-notes ol { margin: 0; padding-left: 25px; max-height: 180px; overflow-y: auto; }
.region-notes li button { width: 100%; text-align: left; font-size: 11px; min-height: 44px; overflow-wrap: anywhere; }
.region-list { display: flex; gap: 4px; flex: none; min-height: 0; overflow-x: auto; overscroll-behavior-x: contain; }
.region-list:empty { display: none; }
.region-list button { flex: none; min-width: 44px; min-height: 44px; }
.region-edit-actions { display: flex; gap: 4px; flex: none; }
.region-edit-actions button { flex: 1; min-height: 44px; font-size: 11px; }
.region-editor .region-hint { min-height: 16px; }
.region-toolbar { display: flex; flex-wrap: wrap; gap: 4px; }
.region-expired { flex-basis: 100%; color: var(--warn); font-size: 11px; }
.region-toolbar .mark-target { flex: 1; }
.region-toolbar .clear-region { flex: none; min-width: 44px; }
.region-toolbar button { min-height: 44px; font-size: 12px; }
.region-editor { width: min(720px, calc(100vw - 16px)); height: min(800px, calc(100dvh - 16px)); max-height: calc(100dvh - 16px); color: var(--text); }
.region-editor[open] { display: flex; flex-direction: column; gap: 6px; }
.region-controls { display: flex; align-items: center; gap: 8px; flex: none; }
.region-controls strong { font-size: 13px; }
.region-controls select { flex: 1; min-width: 0; max-width: none; min-height: 44px; font-size: 16px; }
.region-editor .region-hint { margin: 0; color: var(--muted); font-size: 12px; flex: none; }
.region-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--soft); }
.region-editor .region-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; cursor: crosshair; touch-action: none; user-select: none; -webkit-touch-callout: none; }
.region-editor textarea { flex: none; width: 100%; height: 56px; min-height: 56px; margin: 0; resize: none; font-size: 16px; }
.region-dialog-actions { display: flex; gap: 6px; flex: none; }
.region-dialog-actions button { flex: 1; min-height: 44px; }
.matrix.horizontal { grid-template-columns: repeat(var(--frames), minmax(240px, 1fr)); }
.matrix.horizontal > .matrix-head { position: static; }
.matrix-scroll.horizontal-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.control-review { margin-top: 10px; }
.control-review > summary { cursor: pointer; padding-block: 8px; }
.control-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 8px; margin-top: 6px; overflow-x: auto; overscroll-behavior-x: contain; }
#continueDraft { margin: 8px 0 12px 6px; }
@media (max-width: 820px), (max-width: 1000px) and (max-height: 500px) and (pointer: coarse) {
  .matrix.horizontal { grid-template-columns: repeat(var(--frames), clamp(240px, calc(100vw - 48px), 340px)); }
  .preview-pair img { max-height: 180px; }
  .source-edit select, .source-edit textarea { font-size: 16px; }
  .source-edit select, .source-edit-actions button { min-height: 44px; }
  #continueDraft { margin-left: 0; }
}

/* Review: one test picker, one status surface and contextual primary actions. */
.review-page .top { position: static; }
.review-page .review-header { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 44px; gap: 6px; max-width: 1272px; margin: auto; padding: 8px 16px; }
.review-page .review-header .product-home { width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; padding: 0; }
.review-page .review-header #package { order: initial; width: 100%; max-width: none; height: 44px; font-size: 14px; text-overflow: ellipsis; }
.review-page .review-header .review-chat { display: flex; align-items: center; justify-content: center; height: 44px; }
.review-page .review-menu { position: relative; min-width: 0; }
.review-page .review-menu > summary { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 7px; background: var(--soft); font-size: 24px; line-height: 1; cursor: pointer; touch-action: manipulation; }
.review-page .review-menu > summary::-webkit-details-marker { display: none; }
.review-page .review-menu > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.review-page .review-menu[open] > summary { border-color: var(--green); background: var(--green-soft); }
.review-page .review-menu-items { position: absolute; z-index: 30; right: 0; top: calc(100% + 6px); display: grid; gap: 4px; width: 236px; max-width: calc(100vw - 12px); padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow-pop); }
.review-page .review-menu-items :is(button, a) { display: flex; align-items: center; justify-content: flex-start; text-align: left; min-height: 44px; }
.review-page #archiveTest { margin-top: 4px; color: var(--red); }
.review-page #status { max-width: 1272px; margin: auto; padding: 0 16px 6px; }
.review-page #status:empty { padding: 0; }
.review-page .project-overview { margin-top: 8px; padding: 12px; }
.review-page .project-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.review-page .project-heading strong { font-size: 14px; }
.review-page #summary { color: var(--muted); font-size: 11px; text-align: right; }
.review-page .project-stages { display: flex; gap: 8px; margin: 10px 0 0; }
.review-page .project-stages li { padding: 5px 0; border: 0; border-bottom: 2px solid var(--line-soft); border-radius: 0; background: transparent; font-size: 11px; }
.review-page .project-stages li.current { color: var(--text); border-color: var(--green); background: transparent; }
.review-page .project-stages li.done { color: var(--green); border-color: var(--green-line); }
.review-page .project-overview.running .project-stages li.current { color: var(--yellow); border-color: var(--yellow-line); background: transparent; }
.review-page .project-next:not([hidden]) { margin-top: 8px; }
.review-page .review-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; margin-top: 10px; }
.review-page .review-actions:not(:has(> :not([hidden]))) { display: none; }
.review-page .review-actions > button, .review-page #preparation > button { min-height: 44px; }
.review-page #preparation { flex: 0 1 auto; width: auto; max-width: 100%; margin: 0; padding: 0; border: 0; background: transparent; }
.review-page #preparation :is(#continueDraft, #continueSource) { margin: 0; }
.review-page .source-notice { margin-top: 6px; font-size: 11px; }
.review-page .project-history { border-top: 1px solid var(--line-soft); margin-top: 10px; }
.review-page .project-history > summary { display: list-item; width: fit-content; min-height: 44px; align-content: center; color: var(--muted); font-size: 11px; }
.review-page .project-history #projectMeta { margin: 0 0 6px; }
.review-page #projectResult { margin-top: 10px; font-size: 12px; }
.review-page #projectResult > strong { font-size: 11px; color: var(--label); }
.review-page #projectResultText { margin: 4px 0 0; }
.review-page .project-history .task-banner { padding: 0; margin: 0 0 6px; border: 0; background: transparent; }
.review-page .project-history .task-banner span { flex-basis: auto; }
.review-page #projectLive .task-banner.running { background: transparent; border: 0; margin: 8px 0 0; padding: 0; }
@media (max-width: 820px), (max-width: 1000px) and (max-height: 500px) and (pointer: coarse) {
  .review-page .review-header { padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 4px max(6px, env(safe-area-inset-left)); gap: 4px; }
  .review-page .review-header #package { font-size: 16px; }
  .review-page .project-overview { width: calc(100% - 12px); margin-top: 6px; padding: 9px; }
  .review-page .project-heading strong { font-size: 13px; }
  .review-page #summary { max-width: 108px; font-size: 10px; }
  .review-page .project-stages { gap: 6px; margin-top: 7px; }
  .review-page .project-stages li { font-size: 10px; }
  .review-page .project-history { margin-top: 6px; }
  .review-page #status { padding-inline: 6px; }
}

/* Compact project status: two rows; stages and complete activity stay in the disclosure. */
.review-page.compact-project .project-overview { display: grid; grid-template-columns: minmax(0, 1fr) 44px; column-gap: 6px; padding: 4px 8px; }
.review-page.compact-project .project-heading { grid-column: 1; grid-row: 1; min-width: 0; min-height: 44px; gap: 6px; }
.review-page.compact-project .project-heading strong { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.review-page.compact-project #summary { max-width: none; white-space: nowrap; font-size: 11px; }
.review-page.compact-project #projectLive { display: contents; }
.review-page.compact-project #projectLive .task-banner:is(.running, .waiting) { display: contents; }
.review-page.compact-project #projectLive .task-banner:is(.running, .waiting)::before { content: none; }
.review-page.compact-project #projectLive .task-status-text { grid-column: 1; grid-row: 2; min-width: 0; display: block; height: 44px; line-height: 44px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }
.review-page.compact-project #projectLive .running .task-status-text::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: currentColor; }
.review-page.compact-project #cancelTask { grid-column: 2; grid-row: 1; width: 44px; height: 44px; padding: 0; font-size: 0; }
.review-page.compact-project #cancelTask::after { content: '■'; font-size: 14px; }
.review-page.compact-project #cancelTask:disabled::after { content: '…'; }
.review-page.compact-project #projectLive [role=alert] { grid-column: 1 / -1; grid-row: 3; font-size: 12px; }
.review-page.compact-project #projectLive .task-banner.failed { grid-column: 1 / -1; grid-row: 3; margin: 4px 0; }
.review-page.compact-project #projectLive .task-banner.failed .task-status-text { height: auto; line-height: 1.4; white-space: normal; }
.review-page.compact-project .review-actions { grid-column: 1; grid-row: 2; align-items: center; margin: 0; }
.review-page.compact-project .project-overview.running .review-actions { grid-column: 1 / -1; grid-row: 4; }
.review-page.compact-project .project-overview.running #preparation > button { display: none; }
.review-page.compact-project .project-history { grid-column: 2; grid-row: 2; margin: 0; border: 0; }
.review-page.compact-project .project-history > summary { display: flex; justify-content: center; align-items: center; width: 44px; height: 44px; list-style: none; font-size: 0; }
.review-page.compact-project .project-history > summary::-webkit-details-marker { display: none; }
.review-page.compact-project .project-history > summary::after { content: '⌄'; font-size: 22px; }
.review-page.compact-project .project-overview:not(:has(#cancelTask:not([hidden]))) .project-history:not([open]) { grid-row: 1; }
.review-page.compact-project .project-overview:not(.running):not(:has(#projectLive .waiting:not([hidden]))) .review-actions { grid-column: 1 / -1; }
.review-page.compact-project .project-overview:has(#projectLive .waiting:not([hidden])) .review-actions { grid-column: 1 / -1; grid-row: 4; }
.review-page.compact-project .project-overview:has(#projectLive .waiting:not([hidden])) #preparation > button { display: none; }
.review-page.compact-project .project-history > summary:focus-visible { outline: 2px solid var(--focus); border-radius: 6px; }
.review-page.compact-project .project-history[open] { grid-column: 1 / -1; grid-row: 5; border-top: 1px solid var(--line-soft); }
.review-page.compact-project .project-history[open] > summary { width: auto; justify-content: flex-start; gap: 6px; font-size: 11px; }
.review-page.compact-project .project-history[open] > summary::after { content: '⌃'; font-size: 16px; }
.review-page.compact-project .project-task-detail { margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--label); }
.review-page.compact-project #projectNext { grid-column: 1 / -1; grid-row: 4; }
.review-page.compact-project #projectConnection { grid-column: 1 / -1; grid-row: 6; }
@media (min-width: 821px) and (min-height: 501px) {
  .review-page.compact-project .project-overview { grid-template-columns: minmax(220px, 320px) minmax(0, 1fr) 44px 44px; }
  .review-page.compact-project #projectLive .task-status-text { grid-column: 2; grid-row: 1; }
  .review-page.compact-project #cancelTask { grid-column: 3; }
  .review-page.compact-project .project-history:not([open]) { grid-column: 4; grid-row: 1; }
  .review-page.compact-project .project-overview:not(.running):not(:has(#projectLive .waiting:not([hidden]))) .review-actions { grid-column: 2; grid-row: 1; }
}