/* ==========================================================
   FMRG Theme: AOA — Abyssal Observation Authority
   深渊观测局
   "We Monitor the Deep."

   Usage: add class="theme-aoa" to .page
   DEEP-SEA — contour lines, ripples, depth gauge, cold teal
   ========================================================== */

.theme-aoa{
  /* — Color System (cold sea-fog white, deep teal accent) — */
  --ink:          #10181e;
  --muted:        #6a7e88;
  --line:         #2a3e4a;
  --thin:         rgba(42,62,74,.14);
  --bg:           #f3f6f7;
  --accent:       #2e7a7e;          /* deep teal, low saturation */
  --accent-light: rgba(46,122,126,.05);
  --accent-mid:   rgba(46,122,126,.18);

  /* — Tint — */
  --tint:         rgba(46,122,126,.025);

  /* — Borders (firm, slightly softened) — */
  --b1: 1.5px solid var(--line);
  --b0: 1px solid var(--thin);

  /* — Letterhead — */
  --lh-h:       126px;
  --lh-logo-h:  72px;
  --lh-pad-x:   22px;
  --lh-gap:     12px;

  /* — Background Texture — */
  --contour-opacity:  .030;
  --ripple-opacity:   .022;
  --scale-opacity:    .06;

  /* — Watermark — */
  --wm-opacity:      .035;
  --wm-color:        var(--line);
  --wm-rotate:       -8deg;
  --wm-letterspace:  .35em;

  /* — Stamp — */
  --stamp-size:      132px;
  --stamp-ink:       var(--accent);
  --stamp-opacity:   .40;
  --stamp-rotate:    -8deg;
  --stamp-x:         0px;
  --stamp-y:         0px;

  /* — Footer Banner — */
  --fb-bg:       rgba(46,122,126,.035);
  --fb-border:   rgba(46,122,126,.16);
}


/* ==========================================================
   LETTERHEAD — deep-sea gradient + double-line separator
   ========================================================== */
.page.theme-aoa .letterhead{
  background:
    linear-gradient(to bottom,
      rgba(42,62,74,.05) 0%,
      rgba(46,122,126,.02) 40%,
      transparent 100%
    );
  border-bottom: none;
  /* double line: thick top + thin bottom via box-shadow */
  box-shadow:
    inset 0 -2.5px 0 0 var(--line),
    inset 0 -4.5px 0 0 var(--bg),
    inset 0 -5.5px 0 0 var(--thin);
}


/* ==========================================================
   BACKGROUND — contour lines + water ripples
   ========================================================== */
.page.theme-aoa::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;

  background:
    /* L1 — large concentric contour ellipses (chart feel) */
    radial-gradient(
      ellipse 600px 500px at 35% 45%,
      transparent 180px,
      rgba(46,122,126,var(--contour-opacity)) 181px,
      transparent 183px,
      transparent 240px,
      rgba(46,122,126,var(--contour-opacity)) 241px,
      transparent 243px,
      transparent 320px,
      rgba(46,122,126,var(--contour-opacity)) 321px,
      transparent 323px,
      transparent 420px,
      rgba(46,122,126,var(--contour-opacity)) 421px,
      transparent 423px
    ),
    /* L2 — offset secondary contour set */
    radial-gradient(
      ellipse 500px 420px at 68% 60%,
      transparent 140px,
      rgba(46,122,126,calc(var(--contour-opacity) * .7)) 141px,
      transparent 143px,
      transparent 220px,
      rgba(46,122,126,calc(var(--contour-opacity) * .7)) 221px,
      transparent 223px,
      transparent 310px,
      rgba(46,122,126,calc(var(--contour-opacity) * .7)) 311px,
      transparent 313px
    ),
    /* L3 — large water-pressure ripple halo */
    radial-gradient(
      ellipse 700px 650px at 50% 50%,
      rgba(46,122,126,var(--ripple-opacity)) 0%,
      transparent 55%
    ),
    /* L4 — secondary ripple (offset, smaller) */
    radial-gradient(
      ellipse 350px 300px at 25% 30%,
      rgba(42,62,74,calc(var(--ripple-opacity) * .6)) 0%,
      transparent 60%
    ),
    /* L5 — overall sea-fog tint */
    linear-gradient(
      to bottom,
      var(--tint) 0%,
      transparent 35%,
      transparent 75%,
      var(--tint) 100%
    );
}


/* ==========================================================
   DEPTH GAUGE — right-side scale bar (pseudo-element)
   ========================================================== */
.page.theme-aoa::after{
  content:"";
  position:absolute;
  top: 120px;
  right: 14px;
  width: 3px;
  height: 260px;
  z-index:0;
  pointer-events:none;

  background:
    /* vertical bar */
    linear-gradient(
      to bottom,
      rgba(46,122,126,var(--scale-opacity)),
      rgba(46,122,126,calc(var(--scale-opacity) * .3))
    );
  /* tick marks via box-shadow */
  box-shadow:
    -6px 0     0 0 rgba(46,122,126,calc(var(--scale-opacity) * .5)),
    -6px 43px  0 0 rgba(46,122,126,calc(var(--scale-opacity) * .5)),
    -6px 86px  0 0 rgba(46,122,126,calc(var(--scale-opacity) * .5)),
    -6px 130px 0 0 rgba(46,122,126,calc(var(--scale-opacity) * .5)),
    -6px 173px 0 0 rgba(46,122,126,calc(var(--scale-opacity) * .5)),
    -6px 216px 0 0 rgba(46,122,126,calc(var(--scale-opacity) * .5)),
    -6px 260px 0 0 rgba(46,122,126,calc(var(--scale-opacity) * .5)),
    /* shorter intermediate ticks */
    -4px 22px  0 0 rgba(46,122,126,calc(var(--scale-opacity) * .3)),
    -4px 65px  0 0 rgba(46,122,126,calc(var(--scale-opacity) * .3)),
    -4px 108px 0 0 rgba(46,122,126,calc(var(--scale-opacity) * .3)),
    -4px 152px 0 0 rgba(46,122,126,calc(var(--scale-opacity) * .3)),
    -4px 195px 0 0 rgba(46,122,126,calc(var(--scale-opacity) * .3)),
    -4px 238px 0 0 rgba(46,122,126,calc(var(--scale-opacity) * .3));
}


/* ==========================================================
   WATERMARK — steady, wide-spaced, faint
   ========================================================== */
.page.theme-aoa .watermark .wm-text{
  letter-spacing: var(--wm-letterspace);
  transform: rotate(var(--wm-rotate));
}


/* ==========================================================
   CHIP — monitoring tag
   ========================================================== */
.page.theme-aoa .chip{
  border-color: var(--accent-mid);
  color: var(--accent);
  background: var(--accent-light);
}


/* ==========================================================
   SECTION TITLE accent
   ========================================================== */
.page.theme-aoa .section-title .small{
  color: var(--accent);
}


/* ==========================================================
   TABLE HEADER — observation log header
   ========================================================== */
.page.theme-aoa .items-table th{
  background: var(--accent-light);
}


/* ==========================================================
   STAMP — monitoring seal (cold, thin lines)
   ========================================================== */
.page.theme-aoa .stamp{
  border-color: var(--accent);
  color: var(--accent);
}


/* ==========================================================
   FOOTER BANNER — monitoring status bar
   ========================================================== */
.page.theme-aoa .footer-banner{
  background: var(--fb-bg);
  border-color: var(--fb-border);
}
.page.theme-aoa .fb-badge{
  border-color: var(--accent-mid);
  color: var(--accent);
}


/* ==========================================================
   LH-TAG — accent tint
   ========================================================== */
.page.theme-aoa .lh-meta .lh-tag{
  border-color: var(--accent-mid);
  color: var(--accent);
}