/* ══════════════════════════════════════════════════════
   chart.css — NautEdu shared design system
   Admiralty chart aesthetic: parchment background,
   aged typography, clipped-corner cards, sepia palette.
══════════════════════════════════════════════════════ */

/* ── Reset & Base ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; min-height:100vh; overflow-x:hidden; }

body {
  font-family: 'IM Fell English', Georgia, serif;
  color: #2a1f0e;
  background: #c8b07a;
  cursor: default;
}

/* ══════════════════════════════════════════════════════
   CHART PAPER BACKGROUND
   Layered to simulate aged, printed admiralty chart
══════════════════════════════════════════════════════ */
.chart-bg {
  position: fixed; inset: 0; z-index: 0;
  background-color: #d4bc88;
  background-image:
    /* Grain / foxing texture */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"),
    /* Large chart grid lines */
    repeating-linear-gradient(0deg,   transparent, transparent 59px, rgba(100,70,20,0.12) 60px),
    repeating-linear-gradient(90deg,  transparent, transparent 59px, rgba(100,70,20,0.12) 60px),
    /* Faint diagonal contour lines */
    repeating-linear-gradient(28deg,  transparent, transparent 119px, rgba(120,80,20,0.05) 120px),
    repeating-linear-gradient(152deg, transparent, transparent 119px, rgba(120,80,20,0.05) 120px),
    /* Base parchment gradient */
    radial-gradient(ellipse 120% 100% at 30% 20%, #ddd0a0 0%, #c8a860 40%, #b89040 100%);
}

/* Aged vignette overlay */
.chart-vignette {
  position: fixed; inset: 0; z-index: 1;
  background: radial-gradient(
    ellipse 90% 90% at 50% 50%,
    transparent 40%,
    rgba(60,30,5,0.25) 75%,
    rgba(40,20,5,0.55) 100%
  );
  pointer-events: none;
}

/* Chart border frame */
.chart-frame {
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none;
  border: 12px solid transparent;
  border-image: repeating-linear-gradient(
    90deg,
    #5a3a10 0px, #5a3a10 8px,
    #8a6030 8px, #8a6030 10px,
    #5a3a10 10px, #5a3a10 18px,
    #c8a060 18px, #c8a060 20px
  ) 12;
}

/* Page content sits above all backgrounds */
.page { position: relative; z-index: 10; min-height: 100vh; }

/* ══════════════════════════════════════════════════════
   INK FADE ANIMATION
══════════════════════════════════════════════════════ */
@keyframes inkFade {
  from { opacity:0; transform: translateY(-12px); }
  to   { opacity:1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════
   DECORATIVE RULES (horizontal dividers)
══════════════════════════════════════════════════════ */
.rule-ornament {
  display: flex; align-items: center; gap: 12px;
  justify-content: center;
}
.rule-ornament::before,
.rule-ornament::after {
  content: '';
  flex: 1; max-width: 120px; height: 1px;
  background: linear-gradient(90deg, transparent, #5a3a10, transparent);
}
.rule-ornament span {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.58rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: #6a4a20; opacity: 0.8;
}

.rule-ornament-wide {
  display: flex; align-items: center; justify-content: center;
}
.rule-ornament-wide::before,
.rule-ornament-wide::after {
  content: '';
  flex: 1; max-width: 200px; height: 1.5px;
  background: linear-gradient(90deg, transparent, #8a5a20);
}
.rule-ornament-wide::after {
  background: linear-gradient(90deg, #8a5a20, transparent);
}
.rule-ornament-wide span {
  margin: 0 10px;
  color: #8a5a20; font-size: 1rem;
}

.section-rule {
  width: 240px; height: 1px; margin: 0 auto;
  background: linear-gradient(90deg, transparent, #8a5a20, transparent);
}

/* ══════════════════════════════════════════════════════
   TOOL CARDS (shared card component)
   Used on landing page and reusable across subpages.
══════════════════════════════════════════════════════ */
.tool-card {
  width: 220px;
  background: rgba(210,185,130,0.55);
  border: 1px solid rgba(90,58,16,0.35);
  padding: 24px 22px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: all 0.25s;
  position: relative;
  backdrop-filter: blur(2px);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.tool-card::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,240,200,0.0);
  transition: background 0.25s;
  clip-path: inherit;
}
.tool-card:hover {
  transform: translateY(-5px);
  border-color: rgba(90,58,16,0.7);
  box-shadow: 4px 8px 24px rgba(60,30,5,0.3);
}
.tool-card:hover::before {
  background: rgba(255,240,200,0.25);
}

.tool-card .card-icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 10px;
  filter: sepia(60%);
}
.tool-card .card-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: #7a5020; margin-bottom: 6px;
}
.tool-card .card-name {
  font-family: 'Cinzel', serif;
  font-size: 1rem; font-weight: 600;
  color: #2a1a05;
  margin-bottom: 8px;
  line-height: 1.3;
}
.tool-card .card-desc {
  font-family: 'IM Fell English', Georgia, serif;
  font-style: italic;
  font-size: 0.82rem;
  color: #5a3a15;
  line-height: 1.5;
}
.tool-card .card-arrow {
  display: block;
  margin-top: 14px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.15em;
  color: #8a5a20;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════
   CHART-STYLE CARD (generic content card)
   Clipped corners, parchment fill — used across pages.
══════════════════════════════════════════════════════ */
.chart-card {
  background: rgba(210,185,130,0.45);
  border: 1px solid rgba(90,58,16,0.3);
  backdrop-filter: blur(2px);
  transition: all 0.25s;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

.chart-card:hover {
  transform: translateY(-3px);
  border-color: rgba(90,58,16,0.6);
  box-shadow: 3px 6px 20px rgba(60,30,5,0.25);
}

/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
.chart-footer {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}

.coord-line {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: #7a5a30; opacity: 0.7;
}

.chart-footer-rule {
  width: 300px; height: 1px;
  background: linear-gradient(90deg, transparent, #8a5a20, transparent);
  margin: 4px 0;
}

.private-notice {
  font-family: 'IM Fell English', Georgia, serif;
  font-style: italic;
  font-size: 0.78rem;
  color: #6a4a20; opacity: 0.75;
  text-align: center;
  max-width: 360px;
  line-height: 1.6;
}

/* Minimal footer variant (for subpages) */
.site-footer { text-align: center; padding: 12px 20px 28px; }

.footer-rule {
  width: 200px; height: 1px; margin: 0 auto 8px;
  background: linear-gradient(90deg, transparent, #8a5a20, transparent);
}

.footer-text {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  color: #7a5a30; opacity: 0.6;
}
.footer-text a { color: inherit; text-decoration: none; }

/* ══════════════════════════════════════════════════════
   SHARED BUTTON
══════════════════════════════════════════════════════ */
.btn {
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 0.88rem;
  padding: 8px 22px;
  border: 1px solid rgba(90,58,16,0.35);
  background: rgba(210,185,130,0.4);
  color: #2a1a05;
  cursor: pointer;
  transition: all 0.2s;
}
.btn:hover {
  background: rgba(210,185,130,0.6);
  border-color: rgba(90,58,16,0.6);
}
.btn:disabled { opacity: 0.3; cursor: default; }

/* ══════════════════════════════════════════════════════
   COMPASS ROSE LAYER (shared across pages)
══════════════════════════════════════════════════════ */
.compass-layer {
  position: fixed;
  width: min(640px, 60vmin);
  height: min(640px, 60vmin);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  opacity: 0.32;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE (shared)
══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .tool-card { width: 280px; }
}