/* ─────────────────────────────────────────────────────────────
   無限脳 / Brain Infinity — the legal pages
   Shared by privacy-policy.html and disclaimer.html so the two
   cannot drift apart; edit the look here, once.

   The pages borrow the app's own surface rather than inventing a
   second look: the cosmic backdrop from CosmicBackdrop at
   `utility` intensity (the one Settings uses), instrument panels
   from CosmicPanel, and the grouped-section layout from
   GroupedSettingsSection — a heading outside the panel, the
   content inside it.
   Tokens are the app's: AppRadius, AppSpacing, AppContentWidth,
   Palette.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Palette — cosmic surface */
  --cosmic-navy:        #020a39;
  --chrome-surface:     #050b24;
  --chrome-raised:      #0a1538;
  --energy-cyan:        #48d9ff;
  --energy-violet:      #a675ff;
  --cosmic-foreground:  #f7f8ff;
  --cosmic-muted:       #c8d7ff;
  --chrome-muted:       #9aabd4;

  /* AppRadius */
  --radius-small:   12px;
  --radius-control: 16px;
  --radius-card:    20px;
  --radius-feature: 24px;
  --radius-pill:    999px;

  /* AppSpacing */
  --space-2:  2px;
  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;

  /* AppContentWidth.page */
  --content-width: 720px;

  /* CosmicPanel */
  --panel-fill:           rgba(10, 21, 56, 0.86);
  --panel-border:         rgba(72, 217, 255, 0.46);
  --panel-fill-feature:   rgba(10, 21, 56, 0.92);
  --panel-border-feature: rgba(72, 217, 255, 0.68);
  --panel-border-width:   1px;
  --divider:              rgba(72, 217, 255, 0.28);

  /* The circular icon well from CosmicMetricRoute's nodes. */
  --icon-well-fill:   var(--chrome-surface);
  --icon-well-border: rgba(72, 217, 255, 0.5);

  /* OutlinedButton on a cosmic panel. */
  --outline-button-border: rgba(72, 217, 255, 0.72);

  /* The level selector's chosen / unchosen tiles. */
  --segment-track:     rgba(5, 11, 36, 0.72);
  --segment-on-fill:   rgba(72, 217, 255, 0.16);
  --segment-on-border: rgba(72, 217, 255, 0.72);
}

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

html {
  /* The gradient lives here so overscroll on iOS shows sky, not white. */
  background: var(--cosmic-navy);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
               Meiryo, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.75;
  color: var(--cosmic-foreground);
  /* CosmicBackdrop's ground: the same four stops, same direction. */
  background:
    radial-gradient(circle at 13% 23%,
      rgba(72, 217, 255, 0.101) 0%,
      rgba(72, 217, 255, 0.029) 45%,
      transparent 78%),
    radial-gradient(circle at 86% 72%,
      rgba(166, 117, 255, 0.092) 0%,
      rgba(166, 117, 255, 0.025) 42%,
      transparent 72%),
    linear-gradient(135deg,
      #010521 0%,
      #031047 38%,
      #10093d 72%,
      #020a39 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ── The star field ──────────────────────────────────────────
   Fixed behind the content, exactly as the app paints the screen
   surface and scrolls content over it. Star and constellation
   coordinates are the app's own.                              */
.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.sky svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky .orbits { transform-box: view-box; transform-origin: 50% 36%; rotate: -9.7deg; }

/* ── Page frame ──────────────────────────────────────────────
   AppPageSurface: safe-area inset, a 16 pt gutter that widens to
   20 pt once the window has room, and a 720 pt content ceiling.
   A wide window gets margin, not longer lines.                */
.page {
  position: relative;
  z-index: 1;
  max-width: var(--content-width);
  margin-inline: auto;
  padding:
    calc(var(--space-32) + env(safe-area-inset-top))
    calc(var(--space-16) + env(safe-area-inset-right))
    calc(var(--space-32) + env(safe-area-inset-bottom))
    calc(var(--space-16) + env(safe-area-inset-left));
}
@media (min-width: 600px) {
  .page {
    padding-inline:
      calc(var(--space-20) + env(safe-area-inset-left))
      calc(var(--space-20) + env(safe-area-inset-right));
    padding-block: calc(var(--space-32) * 1.5 + env(safe-area-inset-top))
                   calc(var(--space-32) + env(safe-area-inset-bottom));
  }
}

/* ── Masthead ───────────────────────────────────────────────── */
.masthead__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.brand {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0;
  padding-inline-start: var(--space-4);
  font-size: 1.0625rem;   /* hierarchicalTitle */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.02em;
}
.brand .latin {
  font-size: 0.75rem;     /* caption */
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--cosmic-muted);
  text-transform: uppercase;
}

/* ── Language switch ─────────────────────────────────────────
   The level selector's shape: concentric rounding, a filled and
   outlined chosen tile, a quiet unchosen one. Hidden until the
   script can drive it, so a visitor without JavaScript gets a
   complete Japanese page rather than a dead control.          */
.lang-switch {
  display: inline-flex;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--panel-border-width) solid var(--panel-border);
  border-radius: var(--radius-control);
  background: var(--segment-track);
}
.lang-switch[hidden] { display: none; }
.lang-switch button {
  min-height: 40px;
  padding-inline: var(--space-16);
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  background: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cosmic-muted);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease,
              border-color 120ms ease;
}
.lang-switch button:hover { color: var(--cosmic-foreground); }
.lang-switch button[aria-pressed="true"] {
  border-color: var(--segment-on-border);
  background: var(--segment-on-fill);
  color: var(--cosmic-foreground);
}
.lang-switch button:focus-visible {
  outline: 2px solid var(--energy-cyan);
  outline-offset: 2px;
}

h1 {
  margin: 0 0 var(--space-8);
  padding-inline-start: var(--space-4);
  font-size: 2rem;        /* screenTitle — 32 pt, w800 */
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.updated {
  margin: 0 0 var(--space-24);
  padding-inline-start: var(--space-4);
  font-size: 0.75rem;     /* caption */
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cosmic-muted);
}

/* ── CosmicPanel ─────────────────────────────────────────────
   A readable instrument surface embedded in the painted
   universe: a dark scrim, a luminous hairline, concentric
   corners.                                                    */
.panel {
  position: relative;
  overflow: hidden;
  padding: var(--space-20);
  border: var(--panel-border-width) solid var(--panel-border);
  border-radius: var(--radius-card);
  background: var(--panel-fill);
}
@media (min-width: 600px) {
  .panel { padding: var(--space-24); }
}

/* The hero surface — CosmicPanel(feature: true). */
.panel--feature {
  padding: var(--space-24);
  border-width: 1.5px;
  border-color: var(--panel-border-feature);
  border-radius: var(--radius-feature);
  background: var(--panel-fill-feature);
  box-shadow: 0 2px 8px rgba(72, 217, 255, 0.06);
}
.panel--feature .circuit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── Grouped sections ────────────────────────────────────────
   GroupedSettingsSection: the heading sits outside the panel and
   says what the group is for; the panel holds the content.    */
.group { margin-top: var(--space-32); }

.group > h2 {
  margin: 0 0 var(--space-8);
  padding-inline: var(--space-16);
  font-size: 1.0625rem;   /* hierarchicalTitle — 17 pt, w700 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.group > h2 .n {
  color: var(--energy-cyan);
  font-variant-numeric: tabular-nums;
  margin-inline-end: 0.3em;
}

/* ── Prose inside a panel ────────────────────────────────────── */
.panel p { margin: 0 0 var(--space-16); }
.panel p:last-child { margin-bottom: 0; }

/* A platform heading. The dot takes that platform's accent: cyan
   for the app, violet for the browser. */
.panel h3 {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: var(--space-24) 0 var(--space-8);
  font-size: 0.9375rem;   /* titleSmall — 15 pt, w600 */
  font-weight: 700;
  line-height: 1.3;
  color: var(--cosmic-foreground);
}
.panel h3:first-child { margin-top: 0; }
.panel h3::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--energy-cyan);
  box-shadow: 0 0 8px rgba(72, 217, 255, 0.6);
}
.panel h3.for-web::before {
  background: var(--energy-violet);
  box-shadow: 0 0 8px rgba(166, 117, 255, 0.6);
}
/* Applies to both builds, so it takes neither platform's accent. */
.panel h3.for-both::before {
  background: var(--cosmic-muted);
  box-shadow: none;
}

.panel ul {
  margin: 0 0 var(--space-16);
  padding: 0;
  list-style: none;
}
.panel ul:last-child { margin-bottom: 0; }
.panel li {
  position: relative;
  margin-bottom: var(--space-8);
  padding-inline-start: var(--space-16);
  font-size: 0.875rem;    /* secondary — 14 pt */
  line-height: 1.7;
}
.panel li:last-child { margin-bottom: 0; }
.panel li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--energy-cyan);
}

.panel--feature p {
  font-size: 1.0625rem;
  line-height: 1.8;
}

.muted { color: var(--cosmic-muted); }

strong { font-weight: 700; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

a {
  color: var(--energy-cyan);
  text-decoration: underline;
  text-decoration-color: rgba(72, 217, 255, 0.45);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  border-radius: 3px;
}
a:hover { text-decoration-color: var(--energy-cyan); }
a:focus-visible {
  outline: 2px solid var(--energy-cyan);
  outline-offset: 3px;
  text-decoration: none;
}

/* ── Contact card ────────────────────────────────────────────
   A settings-style row: an icon well, a label, a value.       */
.contact {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid var(--divider);
}
.contact:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.contact__icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--energy-cyan);
  border: var(--panel-border-width) solid var(--icon-well-border);
  border-radius: var(--radius-pill);
  background: var(--icon-well-fill);
  box-shadow: 0 0 12px rgba(72, 217, 255, 0.18);
}
.contact__icon svg { width: 20px; height: 20px; display: block; }
.contact__body { min-width: 0; }
.contact__label {
  display: block;
  margin: 0 0 var(--space-2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--cosmic-muted);
}
.contact__value {
  display: block;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}
/* An address is one long unbreakable token; it gets the next size down so it
   fits a phone column, and is allowed to wrap rather than overflow. */
.contact__value--address {
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

/* ── Footer ──────────────────────────────────────────────────
   OutlinedButton on a cosmic panel: the accent as both label and
   hairline, a 48 pt minimum target, control radius.           */
.site-footer {
  margin-top: var(--space-32);
  padding-inline: var(--space-16);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
  justify-content: space-between;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 48px;
  padding-inline: var(--space-16);
  border: var(--panel-border-width) solid var(--outline-button-border);
  border-radius: var(--radius-control);
  color: var(--energy-cyan);
  font-size: 1.0625rem;   /* buttonLabel — 17 pt, w700 */
  font-weight: 700;
  text-decoration: none;
}
.back-link:hover {
  background: rgba(72, 217, 255, 0.08);
  text-decoration: none;
}
.back-link svg { width: 18px; height: 18px; flex: none; }
.colophon {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--chrome-muted);
}

/* ── Language visibility ─────────────────────────────────────
   Both documents ship in the markup and the root's `data-lang`
   decides which is shown, so switching never refetches and a
   visitor without JavaScript still gets a complete page.      */
[data-lang="en"] .doc[lang="ja"] { display: none; }
[data-lang="ja"] .doc[lang="en"] { display: none; }
:root:not([data-lang]) .doc[lang="en"] { display: none; }

/* ── High contrast ───────────────────────────────────────────
   Mirrors Palette's high-contrast mode: the painted universe,
   the translucency and the glow all go; surfaces become opaque
   and every border is a solid 2 px white line.                */
@media (prefers-contrast: more) {
  :root {
    --panel-fill:           #000000;
    --panel-fill-feature:   #000000;
    --panel-border:         #ffffff;
    --panel-border-feature: #ffffff;
    --panel-border-width:   2px;
    --divider:              #ffffff;
    --cosmic-foreground:    #ffffff;
    --cosmic-muted:         #ffffff;
    --chrome-muted:         #ffffff;
    --energy-cyan:          #ffffff;
    --energy-violet:        #ffffff;
    --icon-well-fill:       #000000;
    --icon-well-border:     #ffffff;
    --outline-button-border:#ffffff;
    --segment-track:        #000000;
    --segment-on-fill:      #ffffff;
    --segment-on-border:    #ffffff;
  }
  html, body { background: #000000; }
  .sky { display: none; }
  .panel--feature { border-width: 2px; box-shadow: none; }
  .panel--feature .circuit { display: none; }
  .panel h3::before,
  .panel h3.for-web::before,
  .contact__icon { box-shadow: none; }
  .lang-switch button[aria-pressed="true"] { color: #000000; }
  a { text-decoration-color: currentColor; }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --panel-fill:         #0a1538;
    --panel-fill-feature: #0a1538;
    --segment-track:      #050b24;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lang-switch button { transition: none; }
}

@media print {
  .sky, .site-footer, .lang-switch { display: none; }
  body { background: #fff; color: #111; }
  .panel { border-color: #999; background: #fff; }
  .brand, h1, .group > h2, .panel h3, .contact__value { color: #111; }
  a { color: #111; }
}