/* glass.css: the one global stylesheet for every glass card on the site. Mobile first. Link it from any page:
   <link rel="stylesheet" href="glass.css">   and wrap content in <div class="g-wrap"> ... <section class="g-card"> ... </section> ... </div>
   Nothing in a card should carry its own colours or sizes; change them here and every card follows. */
:root {
  --g-bg1: #dfe9ff; --g-bg2: #f6e4ff; --g-bg3: #ffe9d6;
  --g-text: #1b2233; --g-soft: #4b566e; --g-accent: #4757e6; --g-accent-text: #ffffff;
  --g-glass: rgba(255, 255, 255, .58); --g-glass-strong: rgba(255, 255, 255, .78); --g-edge: rgba(255, 255, 255, .85); --g-shadow: 0 8px 28px rgba(40, 52, 110, .16);
  --g-good: #1f7a46; --g-warn: #9a5b00; --g-bad: #a32d2d; --g-blur: 18px; --g-radius: 20px; --g-gap: 14px;
  --g-font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --g-bg1: #0d1330; --g-bg2: #2a1448; --g-bg3: #10303a;
    --g-text: #eef1fb; --g-soft: #b3bbd6; --g-accent: #8c9bff; --g-accent-text: #0d1330;
    --g-glass: rgba(255, 255, 255, .09); --g-glass-strong: rgba(255, 255, 255, .15); --g-edge: rgba(255, 255, 255, .22); --g-shadow: 0 8px 30px rgba(0, 0, 0, .45);
    --g-good: #7ee0a5; --g-warn: #ffcf7a; --g-bad: #ff9c9c;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--g-text); font-family: var(--g-font); font-size: 16px; line-height: 1.5;
  background: var(--g-bg1); background-image: radial-gradient(circle at 12% 8%, var(--g-bg2) 0, transparent 46%), radial-gradient(circle at 92% 22%, var(--g-bg3) 0, transparent 44%), linear-gradient(160deg, var(--g-bg1), var(--g-bg2));
  background-attachment: fixed; padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
.g-wrap { width: 100%; max-width: 980px; margin: 0 auto; display: grid; gap: var(--g-gap); grid-template-columns: 1fr; }
.g-card {
  background: var(--g-glass); border: 1px solid var(--g-edge); border-radius: var(--g-radius); box-shadow: var(--g-shadow); padding: 16px 16px 14px;
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(140%); backdrop-filter: blur(var(--g-blur)) saturate(140%); min-width: 0;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .g-card { background: var(--g-glass-strong); } }
.g-card h1, .g-card h2, .g-card h3 { margin: 0 0 6px; line-height: 1.25; }
.g-card h1 { font-size: 1.45rem; } .g-card h2 { font-size: 1.15rem; } .g-card h3 { font-size: 1rem; }
.g-card p { margin: 6px 0; } .g-small { font-size: .88rem; color: var(--g-soft); } .g-big { font-size: 1.2rem; font-weight: 700; }
.g-grid { display: grid; gap: var(--g-gap); grid-template-columns: 1fr; }
.g-row { padding: 6px 0; border-top: 1px solid var(--g-edge); } .g-row:first-of-type { border-top: 0; }
.g-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.g-chip, .g-tag { display: inline-block; font-size: .8rem; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--g-edge); background: var(--g-glass-strong); color: var(--g-text); }
.g-tag.sun { color: var(--g-warn); } .g-tag.moon { color: var(--g-accent); } .g-tag.both { color: var(--g-good); }
.g-good { color: var(--g-good); } .g-warn { color: var(--g-warn); } .g-bad { color: var(--g-bad); }
.g-note { font-size: .85rem; color: var(--g-soft); } .g-err { color: var(--g-bad); font-weight: 600; } .g-ok { color: var(--g-good); font-weight: 600; }
.g-nav { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
/* form controls */
.g-card label { display: block; font-size: .88rem; color: var(--g-soft); margin: 8px 0 3px; }
.g-card input[type=text], .g-card input[type=email], .g-card input[type=date], .g-card input[type=search], .g-card select, .g-card textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; font: inherit; color: var(--g-text); background: var(--g-glass-strong); border: 1px solid var(--g-edge); border-radius: 12px;
}
.g-card input:focus, .g-card select:focus, .g-card textarea:focus, .g-btn:focus-visible, .g-card button:focus-visible, .g-card a:focus-visible { outline: 3px solid var(--g-accent); outline-offset: 2px; }
.g-card button, .g-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 18px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  color: var(--g-accent-text); background: var(--g-accent); border: 1px solid transparent; border-radius: 14px; -webkit-tap-highlight-color: transparent;
}
.g-card button.g-ghost, .g-btn.g-ghost { color: var(--g-text); background: var(--g-glass-strong); border-color: var(--g-edge); }
.g-card a { color: var(--g-accent); }
/* the button rail: five buttons a page, swipe or use the arrows */
.g-rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 12px; margin: 8px -4px 0; padding: 4px; }
.g-rail::-webkit-scrollbar { display: none; }
.g-slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; gap: 10px; align-content: start; }
.g-slide .g-btn { justify-content: flex-start; min-height: 54px; width: 100%; color: var(--g-text); background: var(--g-glass-strong); border-color: var(--g-edge); text-align: left; }
.g-slide .g-btn .g-ico { font-size: 1.35rem; width: 1.6em; text-align: center; }
.g-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.g-dots button { min-height: 0; width: 12px; height: 12px; padding: 0; border-radius: 50%; background: var(--g-edge); border: 0; }
.g-dots button[aria-current=true] { background: var(--g-accent); transform: scale(1.25); }
.g-dots .g-arrow { width: 40px; height: 40px; border-radius: 50%; color: var(--g-text); background: var(--g-glass-strong); border: 1px solid var(--g-edge); }
table.g-table { width: 100%; border-collapse: collapse; font-size: .92rem; } .g-table th, .g-table td { text-align: left; padding: 6px 4px; border-top: 1px solid var(--g-edge); vertical-align: top; }
.g-scroll { overflow-x: auto; }
details.g-more > summary { cursor: pointer; font-weight: 600; min-height: 36px; display: flex; align-items: center; }
@media (min-width: 720px) {
  body { padding-top: 24px; } .g-wrap { gap: 18px; } .g-card { padding: 20px 22px 18px; }
  .g-grid.g-2 { grid-template-columns: 1fr 1fr; } .g-card h1 { font-size: 1.7rem; }
  .g-slide { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .g-rail { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

/* existing site header/footer wrapped in a glass strip */
.g-site { max-width: 980px; margin: 0 auto 14px; } footer.g-site { margin: 14px auto 0; } .g-site img { max-width: 100%; height: auto; } .g-site nav a, .g-site a { color: var(--g-accent); }