/* Glance in the paper style (the same look as board.daelok.tech and the tool sites): a warm
   off-white ground with a faint ruled grid, ink type, hairline borders, squared 10px corners,
   mono micro-labels, and a film grain over the whole page. The palette itself is set in
   glance.yml's theme block (light, background 40 21 95, primary 240 8 9); this file carries what
   the theme keys cannot say. Served from /assets (the stack mounts ./assets). */

@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  --border-radius: 10px;
  --widget-gap: 18px;
  --paper-bg: #f4f2ee;
  --paper-card: #fbfaf8;
  --paper-ink: #16161a;
  --paper-muted: #6a6a72;
  --paper-line: rgba(22, 22, 26, 0.13);
  --paper-line-strong: rgba(22, 22, 26, 0.34);
  --paper-surface: rgba(22, 22, 26, 0.035);
  --paper-surface-2: rgba(22, 22, 26, 0.07);
  --paper-mono: "JetBrains Mono", ui-monospace, monospace;
  --paper-body: "Inter Tight", system-ui, sans-serif;

  --color-widget-background: var(--paper-card);
  --color-widget-content-border: var(--paper-line);
  --color-separator: var(--paper-line);
  --color-widget-background-highlight: var(--paper-surface-2);
  --color-popover-background: var(--paper-card);
  --color-popover-border: var(--paper-line-strong);
  --color-text-highlight: var(--paper-ink);
  --color-text-paragraph: #2a2a30;
  --color-text-base: #3a3a42;
  --color-text-base-muted: var(--paper-muted);
  --color-text-subdue: var(--paper-muted);
  --color-progress-border: var(--paper-line-strong);
  --color-progress-value: var(--paper-surface-2);
  --color-graph-gridlines: var(--paper-line);
}

body {
  font-family: var(--paper-body);
  font-variant-ligatures: normal;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background-color: var(--paper-bg);
  background-image:
    linear-gradient(rgba(22, 22, 26, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 22, 26, 0.045) 1px, transparent 1px);
  background-size: 100% 46px, 46px 100%;
}

/* ---- the frames: hairline, 10px, a whisper of shadow instead of the 3px drop ---- */

.widget-content:not(.widget-content-frameless),
.widget-content-frame {
  border: 1px solid var(--paper-line);
  border-radius: var(--border-radius);
  box-shadow: 0 1px 2px rgba(22, 22, 26, 0.05);
}

/* ---- micro-labels: widget titles, group tabs, small text in mono ---- */

.widget-header h2,
.widget-header .uppercase,
.widget-group-title,
.size-h6,
.list-horizontal-text,
.color-subdue.size-h6 {
  font-family: var(--paper-mono);
}
.widget-header {
  margin-bottom: 0.8rem;
}
.widget-header h2 {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-muted);
}
.widget-group-title {
  font-family: var(--paper-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
}
.widget-group-title-current { border-bottom-color: var(--paper-ink); color: var(--paper-ink); }
.list-horizontal-text {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-muted);
}

/* ---- the header and navigation ---- */

.header {
  align-items: center;
}
.logo {
  font-family: var(--paper-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--paper-ink);
  border-right-color: var(--paper-line);
}
.nav-item {
  font-family: var(--paper-body);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--paper-muted);
  border-bottom-width: 2px;
}
.nav-item.nav-item-current { color: var(--paper-ink); border-bottom-color: var(--paper-ink); }
.nav-item:not(.nav-item-current):hover { border-bottom-color: var(--paper-line-strong); color: var(--paper-ink); }

.mobile-navigation {
  background-color: var(--paper-card);
  border-color: var(--paper-line);
  box-shadow: 0 -6px 24px rgba(22, 22, 26, 0.08);
}
.mobile-navigation-pill { background: var(--paper-line-strong); }
.mobile-navigation-input:checked + .mobile-navigation-pill { background: var(--paper-ink); }

/* ---- the popovers ---- */

.popover-frame {
  border-radius: 8px;
  --shadow-color: rgba(22, 22, 26, 0.16);
}

/* ---- widgets that come with their own colours ---- */

.monitor-site { padding-block: 0.3rem; }
.monitor-site-icon { filter: none; opacity: 0.9; }
.monitor-site-status-icon { opacity: 0.85; }
a.color-highlight:hover { text-decoration: underline; text-underline-offset: 3px; }
.expand-toggle-button {
  font-family: var(--paper-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-muted);
}

/* the launchpad tiles (an html widget) and the board feed (an extension) */
.lp-sec {
  font-family: var(--paper-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  color: var(--paper-muted) !important;
  font-weight: 500 !important;
}
.lp-tile {
  background: var(--paper-surface) !important;
  border: 1px solid var(--paper-line);
  border-radius: 8px !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}
.lp-tile:hover { background: var(--paper-surface-2) !important; border-color: var(--paper-line-strong); }
.lp-tile span { color: var(--paper-ink) !important; font-size: 12.5px !important; }
.board-project + .board-project { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--paper-line); }
.board-project > a { display: block; margin-bottom: 0.6rem; font-family: var(--paper-mono); font-size: 11px; letter-spacing: 0.14em; }

/* ---- the grain: one fixed layer over everything, multiplied into the paper like tooth ---- */

body::after {
  content: "";
  position: fixed;
  inset: -60px;
  z-index: 90;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 220px 220px;
  mix-blend-mode: multiply;
  opacity: 0.17;
}
@media (prefers-reduced-motion: no-preference) {
  body::after { animation: paper-jitter 0.7s steps(1) infinite; }
}
@keyframes paper-jitter {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-13px, 8px); }
  40% { transform: translate(9px, -14px); }
  60% { transform: translate(-7px, -6px); }
  80% { transform: translate(14px, 11px); }
}