/* InspoDesk share viewer — matches the app's design language exactly
   (app/src/theme/tokens.ts): cream/ink light scheme, deep-ink dark
   scheme built on the same slate-blue family. No inline styles anywhere
   in the HTML/JS (CSP style-src 'self') — everything lives here. */

:root {
  --canvas: #FBF9F8;
  --card-bg: #FFFFFF;
  --ink: #2C3E50;
  --text-secondary: #4A5E6D;
  /* --text-muted, --accent, --eyebrow below are darkened (ink-blended)
     from the original design-language values per the 2026-08-05 review's
     measured WCAG failures in light mode: --accent (.example-link) was
     2.41:1, --eyebrow 3.03:1, --text-muted (.copy-status) 3.24:1 against
     white/#FBF9F8 — all below the 4.5:1 AA text minimum. New values
     measured (WCAG relative-luminance formula) at: --accent #5C7489 =
     4.64:1 vs canvas / 4.87:1 vs white; --eyebrow #627483 = 4.60:1 vs
     canvas / 4.83:1 vs white; --text-muted #627480 = 4.62:1 vs canvas /
     4.85:1 vs white. Dark mode already passed and is untouched. */
  --text-muted: #627480;
  --accent: #5C7489;
  --card-border: #D9E0EA;
  --hairline: #EDE9E4;
  --pill-bg: #EEF1F4;
  --eyebrow: #627483;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #151D26;
    --card-bg: #1E2832;
    --ink: #ECF1F4;
    --text-secondary: #BAC7D1;
    --text-muted: #8294A0;
    --accent: #9BBBD0;
    --card-border: #2A3540;
    --hairline: #33414D;
    --pill-bg: #26323D;
    --eyebrow: #9AACB6;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 680px;
  margin: 0 auto;
  padding: 56px 20px 80px;
}

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--eyebrow);
  margin: 0 0 8px;
}

.board-header {
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--hairline);
}

.board-title,
.state-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}

.state-title {
  margin-bottom: 12px;
}

.state-body {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 8px;
  max-width: 52ch;
}

.state-loading {
  opacity: 0.65;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media (max-width: 520px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

.card {
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 6px 14px rgba(44, 62, 80, 0.07);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pill {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: var(--pill-bg);
  border-radius: 14px;
  padding: 5px 12px;
}

.example-link {
  align-self: flex-start;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 1px;
}

.example-link:hover,
.example-link:focus-visible {
  opacity: 0.8;
}

.retry-button,
.copy-button {
  align-self: flex-start;
  margin-top: 8px;
  background: var(--ink);
  color: var(--canvas);
  border: none;
  border-radius: 14px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.retry-button:hover,
.copy-button:hover {
  opacity: 0.85;
}

.retry-button:disabled,
.copy-button:disabled {
  opacity: 0.5;
  cursor: default;
}

.invite-card {
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 6px 14px rgba(44, 62, 80, 0.07);
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.copy-status {
  font-size: 13px;
  color: var(--text-muted);
  min-height: 18px;
  margin: 10px 0 0;
}