/* =========================================================
   A11y Base CSS (no-reset version)
   - Use with your reset.css
   ========================================================= */

/* ---------- 1) Design tokens ---------- */
:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;

  --text-color: #111;
  --bg-color: #fff;

  --focus-color: #4f46e5;
  --focus-outline: 2px solid var(--focus-color);
  --focus-offset: 3px;

  --tap-min-size: 44px;

  --radius: 10px;
  --line-height: 1.75;
}

/* ---------- 2) Base typography (optional if already in base.css) ---------- */
body {
  font-family: var(--font-sans);
  line-height: var(--line-height);
  color: var(--text-color);
  background: var(--bg-color);
}

/* ---------- 3) Skip link ---------- */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-120%);
  background: #fff;
  color: #000;
  padding: 10px 12px;
  border: 2px solid #000;
  border-radius: 8px;
  z-index: 9999;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(8px);
}

/* ---------- 4) Focus styles ---------- */
/* NOTE: Don't do :focus{outline:none;} globally (can break a11y). */
:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* ---------- 5) Link styling ---------- */
a {
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
a:hover {
  text-decoration-thickness: 0.12em;
}
a:visited {
  opacity: 0.95;
}

a.is-external::after {
  content: "↗";
  display: inline-block;
  margin-left: 0.25em;
  font-size: 0.9em;
  line-height: 1;
}

/* ---------- 6) Buttons / tap target ---------- */
button {
  cursor: pointer;
}
button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}

.tap-target {
  min-height: var(--tap-min-size);
  min-width: var(--tap-min-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}

/* ---------- 7) Form basics ---------- */
label {
  display: inline-block;
  margin-bottom: 6px;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: #fff;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  opacity: 0.7;
}

[aria-invalid="true"] {
  border-color: #b91c1c;
}
.form-help {
  font-size: 0.9rem;
  opacity: 0.85;
}
.form-error {
  font-size: 0.9rem;
  color: #b91c1c;
}

/* ---------- 8) Details/Summary ---------- */
details {
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: var(--radius);
  padding: 10px 12px;
}
summary {
  cursor: pointer;
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}

/* ---------- 9) Visually hidden ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 10) Anchor offset ---------- */
html {
  scroll-padding-top: 0px; /* fixed header があるなら高さ入れる */
}

/* ---------- 11) Utility ---------- */
.prose {
  max-width: 70ch;
}