/* Data Vandals kit — shared look for every DV mobile app.
   Copied into each app as public/dv/ by sync.mjs. Edit HERE, then re-sync; never edit an app's copy.
   Colors: Data Vandals Color Token System (Logo/data-vandals-color-token-diagram.png). */

@font-face {
  font-family: 'Futura DV';
  src: url('assets/futura.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* brand core */
  --dv-yellow: #fff200;   /* hero */
  --dv-red: #ed1c24;      /* signal / emphasis only */
  --dv-ink: #231f20;      /* brand black: ink on yellow */
  --dv-night: #0a0a0a;    /* app background (Old Maps, Opinionizer) */
  --dv-white: #ffffff;

  /* 9-color spectrum — data categories, topic colors */
  --dv-violet: #8c00ff;  --dv-indigo: #4418b5;  --dv-blue: #0056a6;
  --dv-cyan: #00a5ff;    --dv-teal: #009b8f;    --dv-lime: #8ccf00;
  --dv-orange: #ff9b1a;  --dv-red-s: #ed1c24;   --dv-yellow-s: #fff200;

  /* secondary: light / deep (base = spectrum) */
  --dv-violet-light: #f0e5ff;  --dv-violet-deep: #4a0088;
  --dv-indigo-light: #e6e3f6;  --dv-indigo-deep: #260c67;
  --dv-blue-light: #e1ecf7;    --dv-blue-deep: #003463;
  --dv-cyan-light: #e0f5ff;    --dv-cyan-deep: #005b8f;
  --dv-teal-light: #e0f6f3;    --dv-teal-deep: #00534a;
  --dv-lime-light: #eff8dd;    --dv-lime-deep: #4f7400;
  --dv-orange-light: #ffead4;  --dv-orange-deep: #a65300;
  --dv-red-light: #ffe0e2;     --dv-red-deep: #9c111a;

  /* type */
  --dv-futura: 'Futura DV', 'Futura', 'Century Gothic', sans-serif;   /* display, CAPS ONLY */
  --dv-sans: 'Neue Haas Grotesk Display Pro', 'Neue Haas Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* shape + motion */
  --dv-radius: 14px;
  --dv-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- header bar (yellow, rat logo left, one action right) ---------- */
.dv-bar {
  flex: 0 0 auto;
  height: calc(var(--dv-bar-h, 72px) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 16px 0 12px;
  background: var(--dv-yellow);
  color: var(--dv-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dv-logo { background: none; border: 0; padding: 0; display: block; cursor: pointer; }
.dv-logo img { height: calc(var(--dv-bar-h, 72px) - 18px); width: auto; display: block; }
.dv-bar-btn {
  font-family: var(--dv-futura); text-transform: uppercase; letter-spacing: .04em;
  background: none; border: 0; font-size: 19px; padding: 10px 2px; color: var(--dv-ink); cursor: pointer;
}
.dv-bar-btn.boxed { background: var(--dv-white); border-radius: 12px; padding: 11px 30px; box-shadow: 0 4px 0 rgba(0,0,0,.18), 0 6px 10px rgba(0,0,0,.15); }
.dv-bar-btn.dark { background: var(--dv-night); color: var(--dv-yellow); border-radius: 12px; padding: 11px 30px; }

/* ---------- bottom sheet (Old Maps style: black, yellow top rule, grab handle) ---------- */
.dv-scrim {
  position: absolute; inset: 0; z-index: 800; background: rgba(0,0,0,.6);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.dv-scrim.open { opacity: 1; pointer-events: auto; }
.dv-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 810;
  background: var(--dv-night); color: #e8e6df;
  border-radius: 22px 22px 0 0; border-top: 3px solid var(--dv-yellow);
  padding: 20px 22px calc(env(safe-area-inset-bottom) + 26px);
  transform: translateY(110%); visibility: hidden;
  transition: transform .32s var(--dv-ease), visibility 0s linear .32s;
  max-height: 86%; overflow: auto; overscroll-behavior: contain; touch-action: pan-y;
  box-shadow: 0 -8px 30px rgba(0,0,0,.5);
  font-family: var(--dv-sans); text-transform: none; user-select: text; -webkit-user-select: text;
}
.dv-sheet.open { transform: translateY(0); visibility: visible; transition: transform .32s var(--dv-ease); }
.dv-grab { width: 110px; height: 30px; margin: -8px auto 6px; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; }
.dv-grab::before { content: ''; width: 46px; height: 5px; border-radius: 3px; background: var(--dv-yellow); }
.dv-sheet h2 { font-family: var(--dv-futura); font-weight: 400; margin: .1em 0; font-size: 24px; color: var(--dv-yellow); letter-spacing: .3px; text-transform: uppercase; }
.dv-sheet .dv-sub { color: #c9c7bf; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 14px; }
.dv-sheet p { font-size: 14px; line-height: 1.55; color: #d8d6ce; margin: .6em 0; }
.dv-sheet a { color: var(--dv-yellow); }
.dv-sheet .dv-section { margin-top: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.6px; font-size: 12px; color: #fff; }

/* ---------- buttons ---------- */
.dv-btn {
  display: block; width: 100%; box-sizing: border-box; padding: 15px 16px; border: none; border-radius: var(--dv-radius);
  font-family: var(--dv-sans); font-weight: 700; font-size: 16px; text-align: center; text-decoration: none;
  cursor: pointer; margin: 9px 0; touch-action: manipulation;
}
.dv-btn.primary { background: var(--dv-yellow); color: #000; text-transform: uppercase; letter-spacing: .03em; }
.dv-btn.ghost { background: transparent; color: #e8e6df; border: 1.5px solid rgba(255,255,255,.28); }
.dv-sheet a.dv-btn.primary { color: #000; }

/* ---------- "more from Data Vandals" app list ---------- */
.dv-apps { display: grid; gap: 0; margin-top: 8px; }
.dv-app {
  display: flex; align-items: center; gap: 13px; padding: 11px 4px;
  border-bottom: 1px solid rgba(255,255,255,.09); text-decoration: none; color: inherit;
}
.dv-app img { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 11px; }
.dv-app .dv-app-name { display: block; font-family: var(--dv-futura); text-transform: uppercase; color: #fff; font-size: 18px; line-height: 1.05; }
.dv-app .dv-app-line { display: block; color: #adaba3; font-size: 12.5px; margin-top: 2px; line-height: 1.35; }
.dv-app .dv-app-go { margin-left: auto; color: var(--dv-yellow); font-family: var(--dv-futura); font-size: 22px; }
.dv-sheet a.dv-app { color: inherit; }

/* ---------- toast ---------- */
.dv-toast {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 900;
  background: var(--dv-night); color: #fff; padding: 14px 20px; border-radius: 16px; border: 1.5px solid var(--dv-yellow);
  font-family: var(--dv-sans); font-size: 14px; max-width: 80%; text-align: center; line-height: 1.45;
  box-shadow: 0 6px 24px rgba(0,0,0,.45); opacity: 0; transition: opacity .3s; pointer-events: none; text-transform: none;
}
.dv-toast.show { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .dv-sheet, .dv-scrim, .dv-toast { transition-duration: 1ms !important; }
}