/* =========================================================
   Tag Me Maybe — Global Themes 5.10a
   Shared six-theme shell for landing/public pages and app chrome.
   The same localStorage key is used by Annotation: tmmBackgroundTheme.
   ========================================================= */

:root {
  --tmm-page-bg: #f7f9fc;
  --tmm-surface: #ffffff;
  --tmm-surface-soft: #f8fafc;
  --tmm-surface-elevated: rgba(255,255,255,.965);
  --tmm-border: #d9e1ec;
  --tmm-border-strong: #c6d1df;
  --tmm-ink: #172033;
  --tmm-ink-soft: #40506a;
  --tmm-muted: #68778e;
  --tmm-toolbar-bg: rgba(255,255,255,.90);
  --tmm-footer-bg: rgba(255,255,255,.55);
  --tmm-grid-line: rgba(61,82,112,.055);
  --tmm-grid-opacity: .72;
  --tmm-theme-accent: #3a63ff;
  --tmm-theme-accent-soft: #edf3ff;
  --tmm-theme-accent-ink: #244fcf;
  --tmm-shadow-soft: 0 1px 3px rgba(15,23,42,.045);
  --tmm-shadow-card: 0 12px 32px rgba(15,23,42,.065);
}

html.bg-white, body.bg-white {
  --tmm-page-bg: #f7f9fc;
  --tmm-surface: #ffffff;
  --tmm-surface-soft: #f8fafc;
  --tmm-surface-elevated: rgba(255,255,255,.965);
  --tmm-border: #d9e1ec;
  --tmm-border-strong: #c6d1df;
  --tmm-ink: #172033;
  --tmm-ink-soft: #40506a;
  --tmm-muted: #68778e;
  --tmm-toolbar-bg: rgba(255,255,255,.91);
  --tmm-footer-bg: rgba(255,255,255,.62);
  --tmm-grid-line: rgba(61,82,112,.045);
  --tmm-theme-accent-soft: #edf3ff;
  --tmm-theme-accent-ink: #244fcf;
}

html.bg-paper, body.bg-paper {
  --tmm-page-bg: #eee4d3;
  --tmm-surface: #fffaf0;
  --tmm-surface-soft: #f8efdf;
  --tmm-surface-elevated: rgba(255,250,240,.965);
  --tmm-border: #dccfb8;
  --tmm-border-strong: #cdbd9f;
  --tmm-ink: #342e25;
  --tmm-ink-soft: #625746;
  --tmm-muted: #786b5a;
  --tmm-toolbar-bg: rgba(245,236,220,.91);
  --tmm-footer-bg: rgba(248,240,226,.70);
  --tmm-grid-line: rgba(120,102,78,.085);
  --tmm-theme-accent-soft: #efe3cc;
  --tmm-theme-accent-ink: #745522;
  --tmm-shadow-card: 0 12px 32px rgba(81,64,39,.07);
}

html.bg-mist, body.bg-mist {
  --tmm-page-bg: #e9eff1;
  --tmm-surface: #f8fbfc;
  --tmm-surface-soft: #eef4f5;
  --tmm-surface-elevated: rgba(248,251,252,.968);
  --tmm-border: #cbd9dd;
  --tmm-border-strong: #b7cbd0;
  --tmm-ink: #17323a;
  --tmm-ink-soft: #405f68;
  --tmm-muted: #637a81;
  --tmm-toolbar-bg: rgba(232,240,242,.91);
  --tmm-footer-bg: rgba(235,242,244,.72);
  --tmm-grid-line: rgba(52,88,98,.065);
  --tmm-theme-accent-soft: #e0ecef;
  --tmm-theme-accent-ink: #285966;
  --tmm-shadow-card: 0 12px 32px rgba(35,66,76,.065);
}

html.bg-sage, body.bg-sage {
  --tmm-page-bg: #edf1e9;
  --tmm-surface: #fbfcf8;
  --tmm-surface-soft: #f0f4ed;
  --tmm-surface-elevated: rgba(251,252,248,.968);
  --tmm-border: #ccd7c9;
  --tmm-border-strong: #b8c8b5;
  --tmm-ink: #25352c;
  --tmm-ink-soft: #4d6154;
  --tmm-muted: #6c7b70;
  --tmm-toolbar-bg: rgba(234,240,230,.92);
  --tmm-footer-bg: rgba(237,242,234,.72);
  --tmm-grid-line: rgba(74,102,82,.06);
  --tmm-theme-accent-soft: #e3ece0;
  --tmm-theme-accent-ink: #486151;
  --tmm-shadow-card: 0 12px 32px rgba(43,64,49,.06);
}

html.bg-stone, body.bg-stone {
  --tmm-page-bg: #ece8e1;
  --tmm-surface: #faf8f4;
  --tmm-surface-soft: #f1ede7;
  --tmm-surface-elevated: rgba(250,248,244,.97);
  --tmm-border: #d5cec4;
  --tmm-border-strong: #c2b8aa;
  --tmm-ink: #312f2b;
  --tmm-ink-soft: #5b5750;
  --tmm-muted: #716c64;
  --tmm-toolbar-bg: rgba(234,230,223,.92);
  --tmm-footer-bg: rgba(237,233,226,.72);
  --tmm-grid-line: rgba(92,82,69,.052);
  --tmm-theme-accent-soft: #e8e2d9;
  --tmm-theme-accent-ink: #665e52;
  --tmm-shadow-card: 0 12px 32px rgba(58,52,44,.06);
}

html.bg-lavender, body.bg-lavender {
  --tmm-page-bg: #efedf5;
  --tmm-surface: #fbfaff;
  --tmm-surface-soft: #f1eff7;
  --tmm-surface-elevated: rgba(251,250,255,.97);
  --tmm-border: #d4d0df;
  --tmm-border-strong: #bfb8d0;
  --tmm-ink: #302f45;
  --tmm-ink-soft: #57546e;
  --tmm-muted: #726e84;
  --tmm-toolbar-bg: rgba(237,235,244,.92);
  --tmm-footer-bg: rgba(240,238,246,.72);
  --tmm-grid-line: rgba(84,75,112,.05);
  --tmm-theme-accent-soft: #e6e2f0;
  --tmm-theme-accent-ink: #62577d;
  --tmm-shadow-card: 0 12px 32px rgba(53,48,75,.06);
}

/* Public/information pages use the theme softly: same palette, quieter canvas. */
body.tmm-soft-theme {
  color: var(--tmm-ink);
  background-color: var(--tmm-page-bg);
  background-image:
    radial-gradient(900px 520px at 8% -10%, rgba(255,255,255,.58), transparent 66%),
    radial-gradient(760px 500px at 96% 0%, color-mix(in oklab, var(--tmm-border-strong) 22%, transparent), transparent 70%),
    linear-gradient(color-mix(in oklab, var(--tmm-grid-line) 72%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--tmm-grid-line) 72%, transparent) 1px, transparent 1px);
  background-size: auto, auto, 26px 26px, 26px 26px;
  background-attachment: fixed;
}

/* Common chrome follows the selected global theme. */
body:not(.presentation-page) #toolbar {
  background: var(--tmm-toolbar-bg);
  border-bottom-color: var(--tmm-border);
  backdrop-filter: blur(14px);
}
body:not(.presentation-page) footer,
body:not(.presentation-page) .guide-footer {
  border-color: var(--tmm-border);
  color: var(--tmm-muted);
}

body:not(.presentation-page) #toolbar .tab-button,
body:not(.presentation-page) #toolbar .toolbar-button,
body:not(.presentation-page) #toolbar .lang-btn,
body:not(.presentation-page) #toolbar .guide-lang-btn {
  border-color: var(--tmm-border);
}

/* ================= Global compact theme picker ================= */
.tmm-theme-control {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

.tmm-theme-trigger {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--tmm-border);
  border-radius: 11px;
  background: color-mix(in oklab, var(--tmm-surface) 94%, transparent);
  color: var(--tmm-ink-soft);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--tmm-shadow-soft);
  white-space: nowrap;
}
.tmm-theme-trigger:hover {
  background: var(--tmm-surface-soft);
  border-color: var(--tmm-border-strong);
  color: var(--tmm-ink);
}
.tmm-theme-trigger-icon { font-size: 1rem; line-height: 1; }

.tmm-theme-popover[hidden] { display:none !important; }
.tmm-theme-popover {
  position:absolute;
  z-index:16000;
  top:calc(100% + 9px);
  right:0;
  width:286px;
  padding:13px;
  border:1px solid var(--tmm-border);
  border-radius:15px;
  background:var(--tmm-surface-elevated);
  color:var(--tmm-ink);
  box-shadow:0 18px 46px rgba(15,23,42,.17);
  backdrop-filter:blur(14px);
}
.tmm-theme-popover-title {
  margin:1px 2px 10px;
  color:var(--tmm-muted);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.tmm-theme-options {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.tmm-theme-option {
  appearance:none;
  min-width:0;
  min-height:70px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 6px;
  border:1px solid var(--tmm-border);
  border-radius:11px;
  background:var(--tmm-surface);
  color:var(--tmm-ink-soft);
  font:inherit;
  font-size:.76rem;
  font-weight:720;
  cursor:pointer;
  box-shadow:var(--tmm-shadow-soft);
}
.tmm-theme-option:hover { background:var(--tmm-surface-soft); border-color:var(--tmm-border-strong); color:var(--tmm-ink); }
.tmm-theme-option.is-active {
  border-color:var(--tmm-border-strong);
  background:var(--tmm-theme-accent-soft);
  color:var(--tmm-theme-accent-ink);
  box-shadow:inset 0 0 0 1px color-mix(in oklab, currentColor 15%, transparent);
}
.tmm-theme-swatch {
  width:28px;
  height:28px;
  flex:0 0 28px;
  border-radius:50%;
  border:1px solid rgba(15,23,42,.13);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
}
.tmm-theme-swatch--white { background:linear-gradient(135deg,#fff 0 58%,#eef5ff 58% 100%); }
.tmm-theme-swatch--paper { background:linear-gradient(rgba(120,102,78,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(120,102,78,.10) 1px,transparent 1px),#efe6d6;background-size:7px 7px; }
.tmm-theme-swatch--mist { background:linear-gradient(rgba(52,88,98,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(52,88,98,.08) 1px,transparent 1px),linear-gradient(135deg,#f8fbfc 0 52%,#e6eef1 52% 100%);background-size:7px 7px,7px 7px,100% 100%; }
.tmm-theme-swatch--sage { background:linear-gradient(rgba(74,102,82,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(74,102,82,.07) 1px,transparent 1px),linear-gradient(135deg,#fbfcf8 0 52%,#e5ebe1 52% 100%);background-size:7px 7px,7px 7px,100% 100%; }
.tmm-theme-swatch--stone { background:linear-gradient(135deg,#fbf9f5 0 50%,#e5e0d8 50% 100%); }
.tmm-theme-swatch--lavender { background:radial-gradient(circle at 28% 30%,rgba(255,255,255,.72) 0 18%,transparent 19%),linear-gradient(135deg,#fcfbff 0 52%,#e9e5f2 52% 100%); }

/* Public header layout: allow the extra theme control without crowding. */
body.home-page #toolbar .toolbar-inner,
body.about-page #toolbar .toolbar-inner { gap:18px; }
body.home-page #toolbar .toolbar-inner nav,
body.about-page #toolbar .toolbar-inner nav { min-width:0; }

/* Guide uses its own right action wrapper. */
.guide-toolbar-actions { display:flex; align-items:center; gap:9px; }
.guide-toolbar-actions .tmm-theme-popover { right:0; }

@media (max-width: 780px) {
  .tmm-theme-trigger .tmm-theme-trigger-label { display:none; }
  .tmm-theme-trigger { width:36px; padding:0; }
  .tmm-theme-popover { width:min(286px,calc(100vw - 28px)); }
}

/* Feed the shared theme into pages that already use global.css variables. */
body:not(.presentation-page) {
  --bg: var(--tmm-page-bg);
  --panel: var(--tmm-surface);
  --text: var(--tmm-ink);
  --muted: var(--tmm-muted);
  --border: var(--tmm-border);
}

body:not(.presentation-page) #toolbar .tab-bar .tab-button:not(.active):not([aria-current="page"]),
body:not(.presentation-page) #toolbar .toolbar-button,
body:not(.presentation-page) #toolbar .lang-btn:not(.active):not([aria-pressed="true"]),
body:not(.presentation-page) #toolbar .guide-lang-btn:not(.active),
body:not(.presentation-page) #toolbar .file-indicator {
  background:color-mix(in oklab,var(--tmm-surface) 94%,transparent);
  border-color:var(--tmm-border);
  color:var(--tmm-ink-soft);
}
body:not(.presentation-page) #toolbar .tab-bar .tab-button:not(.active):not([aria-current="page"]):hover,
body:not(.presentation-page) #toolbar .toolbar-button:hover,
body:not(.presentation-page) #toolbar .lang-btn:not(.active):hover,
body:not(.presentation-page) #toolbar .guide-lang-btn:not(.active):hover {
  background:var(--tmm-surface-soft);
  border-color:var(--tmm-border-strong);
  color:var(--tmm-ink);
}

/* =========================================================
   Global Themes 5.10a.1 — public landing header flow fix
   global.css makes #toolbar fixed for application screens. The landing page
   uses a taller public header, so keep it sticky *in document flow* instead
   of overlaying the hero.
   ========================================================= */
body.home-page #toolbar {
  position: sticky;
  inset: auto;
  top: 0;
  height: auto;
  padding: 0;
  display: block !important;
}

body.home-page main {
  padding-top: 0;
}


/* =========================================================
   TMM GLOBAL GRID FIDELITY 1.0
   One grid language across TMM. Geometry is copied exactly
   from Annotation's original Paper background:
   1px line / 16px cell / opacity .04.
   Only the line hue follows the selected interface theme.
   Presentation is excluded here because it keeps its own
   dedicated seven-theme system.
   ========================================================= */

html.bg-white, body.bg-white {
  --tmm-annotation-grid-line: rgba(61, 82, 112, 0.04);
}
html.bg-paper, body.bg-paper {
  --tmm-annotation-grid-line: rgba(120, 102, 78, 0.04);
}
html.bg-mist, body.bg-mist {
  --tmm-annotation-grid-line: rgba(52, 88, 98, 0.04);
}
html.bg-sage, body.bg-sage {
  --tmm-annotation-grid-line: rgba(74, 102, 82, 0.04);
}
html.bg-stone, body.bg-stone {
  --tmm-annotation-grid-line: rgba(92, 82, 69, 0.04);
}
html.bg-lavender, body.bg-lavender {
  --tmm-annotation-grid-line: rgba(84, 75, 112, 0.04);
}

/* Exact Annotation grid on every non-Presentation TMM page.
   !important is intentional: module styles may define their own legacy
   backgrounds later in the cascade, but the grid must remain global. */
body:not(.presentation-page) {
  background-color: var(--tmm-page-bg) !important;
  background-image:
    repeating-linear-gradient(
      0deg,
      var(--tmm-annotation-grid-line) 0,
      var(--tmm-annotation-grid-line) 1px,
      transparent 1px,
      transparent 16px
    ),
    repeating-linear-gradient(
      90deg,
      var(--tmm-annotation-grid-line) 0,
      var(--tmm-annotation-grid-line) 1px,
      transparent 1px,
      transparent 16px
    ) !important;
  background-size: auto !important;
  background-position: 0 0 !important;
  background-attachment: fixed !important;
}

/* Theme previews use the same line rhythm in miniature; they do not invent
   another grid style. */
.tmm-theme-swatch--paper,
.tmm-theme-swatch--mist,
.tmm-theme-swatch--sage,
.tmm-theme-swatch--stone,
.tmm-theme-swatch--lavender,
.tmm-theme-swatch--white {
  background-size: 8px 8px, 8px 8px, auto;
}