/* Shared base layout and component styling.
   Visual identities are provided by themes/theme-example-1.css and themes/theme-example-2.css. */

* {
  box-sizing: border-box;
}

/* Page foundation and token-driven background/typography. */
body {
  padding: 10px;
  margin: 0;
  font-family: var(--font-body, "MS PGothic", sans-serif);
  font-size: var(--font-size-body, 1rem);
  color: var(--text, #222);
  background-color: var(--gradientTop, #f1f1f1);
  background-image: var(--page-background, linear-gradient(180deg, #f1f1f1 0%, #dcdcdc 100%));
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.corner-rei {
  position: fixed;
  right: var(--corner-right, -122px);
  bottom: 0;
  width: var(--corner-width, clamp(540px, 90vw, 1260px));
  height: auto;
  max-height: var(--corner-max-height, 100vh);
  object-fit: contain;
  pointer-events: none;
  z-index: 0;
  filter: var(--corner-filter, drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5)));
  opacity: var(--corner-opacity, 1);
}

/* Full-viewport decorative rain layer managed by drip-randomizer.js. */
.lines {
  position: fixed;
  inset: 0;
  margin: 0;
  pointer-events: none;
  z-index: 0;
}

/* Individual rain line; animation variables are customized per element by JS. */
.line {
  position: absolute;
  top: 0;
  left: var(--line-left, 50%);
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  overflow: hidden;
  --line-color: var(--drip1, #434371);
  --drop-delay-a: -0.6s;
  --drop-delay-b: 0.8s;
  --drop-duration-a: 5.2s;
  --drop-duration-b: 6.4s;
  --drop-start: -45%;
  --drop-end: 110%;
}

.line::before,
.line::after {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  background: linear-gradient(to bottom, transparent 0%, var(--line-color) 75%, var(--line-color) 100%);
  animation: drip-drop var(--drop-duration-b) infinite;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}

.line::before {
  top: var(--drop-start);
  height: 12vh;
  --drop-start: -72%;
  animation-name: drip-drop, drip-flicker;
  animation-duration: var(--drop-duration-a), 2.3s;
  animation-delay: var(--drop-delay-a), 0s;
  animation-iteration-count: infinite, infinite;
  animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97), ease-in-out;
}

.line::after {
  top: var(--drop-start);
  height: 18vh;
  --drop-start: -45%;
  animation-delay: var(--drop-delay-b);
}

@keyframes drip-drop {
  0% { top: var(--drop-start, -45%); }
  100% { top: var(--drop-end, 110%); }
}

@keyframes drip-flicker {
  0%, 100% { opacity: 0.92; }
  50% { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .line::before,
  .line::after {
    animation: none;
    top: 20%;
  }
}

/* Main bordered frame that wraps page content columns/cards. */
.container {
  max-width: 55rem;
  margin: 5vw auto 12px auto;
  border: var(--frame-border, 6px ridge #ccc);
  outline: var(--frame-outline, 3px solid #f1f1f1);
  outline-offset: 4px;
  border-radius: var(--frame-radius, 10px);
  box-shadow: var(--frame-shadow, none);
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  gap: 5px;
  background-color: var(--gradientBottom, rgba(241, 241, 241, 0.9));
  background-image: var(--container-background, repeating-radial-gradient(circle at 0 0, transparent 0, rgba(241, 241, 241, 0.9) 9px), repeating-linear-gradient(#f1f1f1, #f1f1f1));
  position: relative;
  z-index: 1;
}

/* Shared column width helpers used by all pages. */
.small {
  flex: 1 1 13rem;
  min-width: 13rem;
}

.large {
  flex: 3 1 28rem;
  min-width: 18rem;
}

.full {
  flex: 1 1 100%;
}

.half {
  flex: 1 1 22rem;
  min-width: 16rem;
}

/* Top banner area with site title and theme toggle. */
header {
  background: var(--header-background, linear-gradient(120deg, #f1f1f1 0%, #afafdc 45%, #434371 100%));
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 120px;
  border: var(--panel-border, 2px ridge #ccc);
  border-radius: var(--panel-radius, 5px);
  box-shadow: var(--panel-shadow, none);
  position: relative;
}

header span {
  font-family: var(--font-display, inherit);
  font-size: var(--font-size-display, 2.5rem);
  position: absolute;
  bottom: 0;
  right: 12px;
  max-width: calc(100% - 24px);
  margin: 10px;
  font-weight: bold;
  text-shadow: var(--header-text-shadow, 1px 1px var(--text), -1px 1px var(--text), 1px -1px var(--accent), -1px -1px var(--accent));
  color: var(--header-text, var(--gradientTop, #f1f1f1));
  text-align: right;
  line-height: 1;
}

.theme-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  border: var(--panel-border, 2px ridge #ccc);
  border-radius: var(--control-radius, 5px);
  padding: 3px 8px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text, #222);
  background: var(--control-bg, linear-gradient(var(--gradientTop, #fff), var(--gradientBottom, #ddd)));
  cursor: pointer;
  transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.theme-toggle:hover,
.theme-toggle:focus {
  background: var(--control-bg-hover, linear-gradient(to right, var(--bg, #f1f1f1), var(--gradientBottom, #ddd), var(--gradientTop, #fff)));
}

.theme-toggle:active {
  transform: translateY(1px);
}

.theme-toggle:focus-visible,
nav a:focus-visible {
  outline: 2px solid var(--focus, var(--accent, #ff007f));
  outline-offset: 2px;
}

nav {
  border: var(--panel-border, 2px ridge #ccc);
  border-radius: var(--panel-radius, 5px);
  box-shadow: var(--panel-shadow, none);
  padding: 5px;
  background: var(--panel-bg, linear-gradient(var(--gradientTop, #fff), var(--gradientBottom, #ddd)));
}

nav .nav-title {
  text-align: center;
  font-size: 1.25rem;
  margin: 5px 5px 10px 5px;
  font-weight: normal;
}

nav a {
  display: block;
  margin: 5px;
  background: var(--nav-item-bg, linear-gradient(to right, var(--bg, #f1f1f1), var(--gradientBottom, #ddd)));
  border-radius: var(--control-radius, 5px);
  padding: 2px 7px;
  text-decoration: none;
  border: var(--nav-item-border, 0 solid transparent);
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

nav a:link,
nav a:visited {
  color: var(--nav-link, var(--text, #222));
}

nav a[aria-current="page"] {
  box-shadow: inset 0 0 0 1px var(--border, #afafdc);
  font-weight: bold;
}

nav a:hover,
nav a:focus {
  background: var(--nav-item-bg-hover, linear-gradient(to right, var(--bg, #f1f1f1), var(--gradientBottom, #ddd), var(--gradientTop, #fff)));
}

div.small > img {
  display: block;
  margin: 5px auto;
  border: var(--panel-border, 2px ridge #ccc);
  border-radius: var(--panel-radius, 5px);
  box-shadow: var(--panel-shadow, none);
}

/* Generic panel style for content blocks. */
section {
  border: var(--panel-border, 2px ridge #ccc);
  border-radius: var(--panel-radius, 5px);
  box-shadow: var(--panel-shadow, none);
  background: var(--panel-bg, linear-gradient(var(--gradientTop, #fff), var(--gradientBottom, #ddd)));
  padding: 5px;
}

/* Generic form control styling so future forms inherit theme tokens. */
input,
select,
textarea,
button {
  font: inherit;
}

input,
select,
textarea {
  color: var(--text, #222);
  background: var(--panel-bg, linear-gradient(var(--gradientTop, #fff), var(--gradientBottom, #ddd)));
  border: var(--panel-border, 2px ridge #ccc);
  border-radius: var(--control-radius, 5px);
  padding: 0.35rem 0.45rem;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus, var(--accent, #ff007f));
  outline-offset: 2px;
}

.stats {
  margin-top: 5px;
}

.stats h2 {
  font-size: 1rem;
}

.stats-list {
  margin: 5px 0 3px 18px;
  padding: 0;
}

.stats-list li {
  margin: 4px 0;
  line-height: 1.2;
}

.stats-loading,
.stats-error {
  margin: 5px;
  font-size: 0.9rem;
}

footer {
  text-align: center;
  margin-bottom: 5vw;
  font-size: 0.8rem;
  position: relative;
  z-index: 1;
}

footer a {
  text-decoration: none;
}

/* Base typography rhythm. */
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 5px;
  line-height: 1.2;
}

h1 {
  font-size: 1.4rem;
  letter-spacing: 2px;
  font-weight: normal;
  text-align: center;
  border-bottom: var(--section-heading-rule, 2px ridge #ccc);
  padding-bottom: 5px;
}

h2 {
  font-size: 1.25rem;
  font-weight: normal;
  text-align: center;
}

h3 {
  font-size: 1.1rem;
}

h4 {
  font-size: 1rem;
  color: var(--accent, #ff007f);
  padding-left: 12px;
}

@media (max-width: 760px) {
  .small,
  .large,
  .half {
    flex: 1 1 100%;
    min-width: 0;
  }

  header span {
    font-size: var(--font-size-display-mobile, 1.9rem);
    right: 8px;
    max-width: calc(100% - 16px);
  }

  .corner-rei {
    right: var(--corner-right-mobile, -74px);
    width: var(--corner-width-mobile, clamp(435px, 100vw, 720px));
    max-height: var(--corner-max-height-mobile, 90vh);
  }
}

/* Media/link safety styles shared by all themes. */
img {
  max-width: 100%;
}

pre {
  overflow-x: auto;
}

a:hover,
a:focus {
  font-style: italic;
}

a:link {
  color: var(--link, #434371);
}

a:visited {
  color: var(--visitedLink, #8b0053);
}