/* Device-test pages only. Does not replace /styles.css or brand-r2.css. */

.g00-brand-r2 .header-inner,
.g00-brand-r2 .primary-nav,
.g00-brand-r2 .footer-inner,
.g00-brand-r2 .footer-bottom {
  min-width: 0;
  max-width: 100%;
}

.g00-brand-r2 .primary-nav a {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 751px) {
  .g00-brand-r2 .primary-nav {
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 18px;
  }
}

.test-main {
  padding: 20px 0 64px;
  min-width: 0;
}

.g00-brand-r2 .test-main h1 {
  font-size: clamp(28px, 8vw, 48px);
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

.test-lead,
.test-section p,
.test-section li,
.crumbs,
.test-list p {
  overflow-wrap: anywhere;
}

.test-lead {
  margin: 0 0 12px;
  color: var(--text-soft);
  max-width: 68ch;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 0 0 10px;
  color: #6d5848;
  font-size: 13px;
}

.crumbs a,
.test-main a {
  color: var(--copper);
}

.tool-card {
  min-width: 0;
  max-width: 100%;
  margin: 0 0 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 10px 28px rgba(92, 62, 39, 0.04);
}

.controls,
.choice-row,
.share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.test-page button {
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid #cbb29b;
  background: #fffaf3;
  color: #332a24;
  font-weight: 700;
  touch-action: manipulation;
}

.test-page button.primary,
.test-page button[aria-pressed="true"] {
  background: #332a24;
  border-color: #332a24;
  color: #fffaf3;
}

.readout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 10px;
}

.readout div {
  min-width: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: #fffaf3;
  border: 1px solid #eadbcc;
}

.readout strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(22px, 7vw, 36px);
  font-weight: 520;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.readout span,
.fine,
#tool-status,
.key-log,
.ghost-hint {
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#tool-status {
  min-height: 1.4em;
  margin: 8px 0 0;
}

.tool-pad,
.type-prompt,
.ufo-track,
.scroll-pad {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.tool-pad,
.scroll-pad {
  min-height: 148px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 12px;
  border-radius: 16px;
  border: 1px dashed #c9a383;
  background: #fffaf3;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(28px, 8vw, 52px);
  letter-spacing: -0.03em;
  user-select: none;
  touch-action: none;
}

.tool-pad.wait { background: #f6d9cf; }
.tool-pad.go { background: #d7e6cf; border-color: #6d8a62; }
.tool-pad.soon { background: #f3e4c4; }

.type-prompt {
  min-height: 4.6em;
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fffaf3;
  border: 1px solid #eadbcc;
  font-size: 16px;
  line-height: 1.55;
}

.type-prompt mark {
  background: #f1e2d0;
  color: var(--ink);
  border-radius: 4px;
  padding: 0 2px;
}

.type-input {
  width: 100%;
  max-width: 100%;
  min-height: 64px;
  margin: 0 0 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #d8c4ae;
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.4;
  resize: vertical;
}

.share-card {
  max-width: 100%;
  margin-top: 8px;
}

.share-card canvas {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
  border-radius: 12px;
}

.key-map { display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0; }
.key-row { display: flex; gap: 2px; width: 100%; min-width: 0; }
.test-page button.key {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  height: 28px;
  min-height: 0;
  padding: 0;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 650;
  line-height: 1;
  overflow: hidden;
}
.key.grow-2 { flex-grow: 2.2; }
.key.grow-4 { flex-grow: 4; }
.key.grow-6 { flex-grow: 6; }
.key.is-down { background: #935f3e; border-color: #935f3e; color: #fffaf3; }

.ufo-track {
  position: relative;
  height: 84px;
  overflow: hidden;
  border-radius: 12px;
  background: #2c2723;
  box-shadow: inset 0 0 0 1px #d8bba0;
}

.ufo {
  position: absolute;
  top: 32px;
  left: 0;
  width: 42px;
  height: 18px;
  border-radius: 40% 50% 50% 40%;
  background: #f4ece1;
}

.pad-buttons { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.pad-btn {
  flex: 1 1 36px;
  max-width: 52px;
  min-height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid #d8c4ae;
  background: #fffaf3;
  font-size: 12px;
}
.pad-btn.is-down { background: #935f3e; color: #fffaf3; border-color: #935f3e; }

.axis { margin: 0 0 8px; min-width: 0; }
.axis span { display: block; font-size: 12px; color: var(--text-soft); }
.axis b {
  position: relative;
  display: block;
  height: 28px;
  border-radius: 99px;
  background: #fffaf3;
  border: 1px solid #eadbcc;
  overflow: hidden;
}
.axis i {
  position: absolute;
  top: 4px;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: #935f3e;
}

.test-section { margin: 28px 0 0; min-width: 0; }
.test-section h2 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.03em;
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1.15;
  margin: 0 0 8px;
}
.test-section h3 { font-size: 16px; margin: 14px 0 4px; }
.test-section p { margin: 0 0 8px; color: #5e4b3d; line-height: 1.65; max-width: 68ch; }

.faq-item { border-top: 1px solid var(--line); padding: 10px 0; }
.faq-item h3 { margin: 0 0 4px; }

.related-list,
.test-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.related-list a,
.test-list li {
  min-width: 0;
  border: 1px solid #dcc5ad;
  border-radius: 12px;
  background: #fffaf3;
}

.related-list a,
.test-list a {
  display: block;
  min-height: 44px;
  padding: 12px 14px;
  text-decoration: none;
  font-weight: 720;
}

.test-list a { padding-bottom: 0; }
.test-list p { margin: 4px 14px 12px; }

@media (min-width: 700px) {
  .readout { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 390px) {
  .test-main { padding-top: 12px; }
  .tool-card { padding: 10px; }
  .g00-brand-r2 .test-main h1 { font-size: 28px; }
  .test-page button.key { height: 26px; font-size: 8px; }
  .tool-pad, .scroll-pad { min-height: 128px; }
}

@media (prefers-reduced-motion: reduce) {
  .test-page * { scroll-behavior: auto; }
}