/* ==========================================================================
   base.css — shared by every site, byte-identical. Do not edit per site.
   Reset, accessibility and a few layout primitives. No colours, fonts or
   spacing opinions: everything visual lives in theme.css, which loads after
   this file and may override any variable or rule below.
   ========================================================================== */

:root {
  /* Neutral defaults. Override in theme.css. */
  --focus-color: currentColor;      /* colour of the keyboard focus ring */
  --focus-width: 2px;
  --focus-offset: 3px;
  --tap-min: 44px;                  /* minimum touch target size */
  --scroll-offset: 0px;             /* height of a sticky header, if any */
  --actionbar-height: 3.5rem;       /* height of the mobile action bar (without safe area) */
  --ja-line-height: 1.8;            /* Japanese body text (html[lang="ja"]) */
  --ja-letter-spacing: 0.02em;
  --demo-bg: #1d1d1d;               /* demo badge (content.json "demo") */
  --demo-fg: #ffffff;
  --demo-font: inherit;
  --demo-font-size: 0.8125rem;
  --demo-radius: 999px;
  --demo-gap: 0.5rem;               /* distance from the edge / action bar */
}

/* ---- Reset -------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--scroll-offset);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  line-height: 1.5;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  text-wrap: balance;
}

ul, ol {
  padding: 0;
  list-style: none;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
}

address {
  font-style: normal;
}

table {
  border-collapse: collapse;
}

/* ---- Japanese text ------------------------------------------------------ */

/* Japanese has no spaces, so a browser may break a line inside a word.
   auto-phrase keeps phrases together where supported (Chromium). Elsewhere
   site.js puts zero-width spaces between phrases (BudouX, from
   js/vendor/budoux-ja.js) and marks the element data-phrased; keep-all then
   allows breaks only there. overflow-wrap: anywhere is the safety net: a
   phrase longer than the line breaks instead of overflowing.
   Headings keep the line-height their theme gives them. */
html[lang="ja"] body {
  line-height: var(--ja-line-height);
  letter-spacing: var(--ja-letter-spacing);
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

html[lang="ja"] [data-phrased] {
  word-break: keep-all;
}

/* The hidden attribute always wins, whatever display a theme sets.
   site.js uses it for data-if / data-if-not. */
[hidden] {
  display: none !important;
}

/* ---- Before the first render -------------------------------------------- */

/* site.js sets data-ready on <html> after the first render. Until then the
   skeleton is kept invisible so no empty or wrong-language content flashes.
   The <noscript> message and the load error box stay visible. */
html:not([data-ready]) body > :not(noscript, #site-error) {
  visibility: hidden;
}

/* Plain, readable fallback for the <noscript> message and the error box. */
.site-message,
#site-error {
  max-width: 34rem;
  margin: 3rem auto;
  padding: 0 1.25rem;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

/* ---- Accessibility ------------------------------------------------------ */

.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Skip link: off screen until it receives keyboard focus. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 0.75rem 1rem;
  background: Canvas;
  color: CanvasText;
  transform: translateY(-120%);
}

.skip-link:focus {
  transform: none;
}

:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

/* Programmatically focused targets (e.g. <main tabindex="-1">) need no ring. */
[tabindex="-1"]:focus {
  outline: none;
}

/* Anchor targets clear a sticky header. */
[id] {
  scroll-margin-top: var(--scroll-offset);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Helpers ------------------------------------------------------------ */

/* Minimum 44px touch target for links and buttons. */
.tap-target {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
}

/* ---- Mobile action bar -------------------------------------------------- */

/* Fixed to the bottom on phones, removed on wide screens. The safe-area
   padding keeps the buttons above the iPhone home indicator (needs
   viewport-fit=cover in the viewport meta tag). */
#actionbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 100;
  min-height: calc(var(--actionbar-height) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* Room at the end of the page so the bar never covers the footer. */
body {
  padding-bottom: calc(var(--actionbar-height) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 48em) {
  #actionbar {
    display: none;
  }

  body {
    padding-bottom: 0;
  }
}

/* ---- Demo badge --------------------------------------------------------- */

/* <a class="demo-badge" data-if="demo"> with a .demo-badge__label inside.
   Bottom right, above the mobile action bar (and the safe area), so it
   never covers the bar. The link is a 44px tall hit area; only the label
   is drawn. Themes may restyle it through the --demo-* variables. */
.demo-badge {
  position: fixed;
  right: calc(var(--demo-gap) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--actionbar-height) + env(safe-area-inset-bottom, 0px) + var(--demo-gap));
  z-index: 99;
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  text-decoration: none;
}

.demo-badge__label {
  padding: 0.3rem 0.7rem;
  border-radius: var(--demo-radius);
  background: var(--demo-bg);
  color: var(--demo-fg);
  font-family: var(--demo-font);
  font-size: var(--demo-font-size);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.25);
}

@media (min-width: 48em) {
  .demo-badge {
    bottom: calc(var(--demo-gap) + env(safe-area-inset-bottom, 0px));
  }
}

@media print {
  #actionbar,
  .skip-link,
  .demo-badge {
    display: none;
  }

  body {
    padding-bottom: 0;
  }
}