/* Production adjustments shared by the public seller pages (WBS 3-8). styles.css stays identical
   to the approved demo; every rule here is a documented difference (plans/…-3-8-…/plan.md). */

/* Below 360 px (e.g. iPhone SE 1st gen) the header row (logo, two links, 無料相談する) is 18 px
   wider than the screen. Tighten the gaps and the button padding only on those screens. */
@media (max-width: 359px) {
  .site-nav { padding-left: 14px; padding-right: 14px; }
  .site-nav nav { gap: 6px; }
  .site-nav nav a { font-size: 0.74rem; }
  .site-nav nav a.cta-ghost { padding: 6px 8px; font-size: 0.74rem; }
}

/* Listing approval page (4-6): the comment box looks like the form inputs of styles.css. */
.field textarea {
  font-family: var(--font-body);
  font-size: 0.98rem;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  resize: vertical;
}
.field textarea:focus { outline: 1px solid var(--gold); }
/* iOS Safari zooms the page when a focused field is below 16 px; the approval comment and the
   unsold note are textareas, which apply-form.css (inputs only) did not cover. */
@media (max-width: 768px) {
  .field textarea { font-size: 16px; }
}
#ap-actions .field { margin-bottom: 8px; }
.ap-photo { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto 18px; border-radius: var(--radius); }

/*
 * The `hidden` attribute must beat layout rules: `.btn-row` in the demo stylesheet is
 * `display: flex`, so a hidden button row stayed on screen — an invalid login link (4-1) still
 * showed 「ログインする」, and the 5-8 confirmation page showed both buttons at once.
 */
[hidden] { display: none !important; }

/* ---------- Web interface guidelines review (2026-09-21) ---------- */

/* The browser matches the page (theme-color meta); no dark rendering of form controls either. */
:root { color-scheme: light; }

/* No double-tap-to-zoom delay on anything a thumb presses. */
a, button, input, select, textarea, label, summary { touch-action: manipulation; }

/*
 * A visible keyboard focus everywhere. The demo styled only `.field input:focus`, so a button on
 * the ink background showed only the browser's own ring, hard to see. Keyboard only
 * (:focus-visible): a tap or a click shows nothing new, so the approved look is unchanged.
 */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.btn-primary:focus-visible,
.do-card.you a:focus-visible { outline-color: var(--ink); }

/* 本文へ移動: off-screen until a keyboard user reaches it, then above the header. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--ivory);
  border-radius: var(--radius);
  font-size: 0.9rem;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* People who asked their system for less motion get none. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/*
 * Headings a screen reader needs and the eye does not (UI review 2026-09-21): the demo jumps from
 * h1 to h3 on service-flow and unsold-choice, so each group gets a hidden h2 above it.
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * Safe areas (viewport-fit=cover on every page): on a phone held sideways the page may run under
 * the notch and the home indicator, so it pads itself back out of them. Every inset is 0 on a
 * screen without one, so nothing moves anywhere else.
 */
body {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}


/* Option cards as a list (client-approved 2026-09-20): the list keeps the demo's grid and spacing. */
ul.choice-grid { list-style: none; padding: 0; }

/* ---------- 取り扱いブランド (ADR-075) ----------
   Text chips, no logos, no links. The block is `hidden` until js/brands-block.js has names. */

.brands-block[hidden] { display: none; }
.brand-chips {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 720px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.brand-chips li {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font-size: 0.92rem;
  color: var(--ink);
}
.brands-more { margin: 14px 0 0; text-align: center; font-size: 0.92rem; }
.brands-more a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.brands-note {
  margin: 18px 0 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
}

/* 取り扱いブランド一覧 (ADR-079): every brand, A-Z, grouped by initial; text only. */
.brands-status { text-align: center; color: var(--muted); font-size: 0.92rem; }
.brands-status[hidden] { display: none; }
.brand-index { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 0 auto 24px; max-width: 720px; }
.brand-index[hidden] { display: none; }
.brand-index a { color: var(--ink); text-decoration: none; font-weight: 600; padding: 4px 6px; }
.brand-index a:hover, .brand-index a:focus-visible { text-decoration: underline; }
.brand-group h2 { margin: 28px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 1.1rem; scroll-margin-top: 16px; }
.brand-list { list-style: none; margin: 0; padding: 0; columns: 3 220px; column-gap: 24px; }
.brand-list li { padding: 3px 0; font-size: 0.92rem; break-inside: avoid; overflow-wrap: anywhere; }

/* 精算書 block of mypage/settlement.html: paid months with a PDF download; absent (hidden) without data. */
.mp-statement-list { list-style: none; margin: 0; padding: 0; }
.mp-statement-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.mp-statement-link {
  appearance: none;
  border: 0;
  background: none;
  padding: 8px 0;
  font: inherit;
  font-size: 0.85rem;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  text-align: right;
}
.mp-statement-link:hover { opacity: 0.7; }
.mp-statement-link:disabled { opacity: 0.5; cursor: progress; }
.mp-statement-error { margin: 10px 0 0; font-size: 0.85rem; color: #b3261e; text-wrap: pretty; }

/* Footer links (ADR-080): the legal and help pages, under the line every page already had. */
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 14px; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover, .footer-links a:focus-visible { text-decoration: underline; }
.footer-links a[hidden] { display: none; }

/* Pages made of the client's texts (ADR-080): terms, fees, FAQ, eligible items, cookie policy. */
.site-text { max-width: 780px; margin: 0 auto 32px; line-height: 1.9; overflow-wrap: anywhere; }
.site-text h1 { font-size: 1.6rem; margin: 0 0 20px; }
.site-text h2 { font-size: 1.2rem; margin: 32px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.site-text h3 { font-size: 1.02rem; margin: 22px 0 6px; }
.site-text ul, .site-text ol { padding-left: 1.4em; }
.site-text table { width: 100%; border-collapse: collapse; margin: 14px 0 20px; font-size: 0.92rem; }
.site-text th, .site-text td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.site-text th { background: var(--card, #f3efe8); font-weight: 600; }
@media (max-width: 600px) { .site-text table { display: block; overflow-x: auto; } }