/* ============================================================
   INKTRACK — Design Tokens, v3
   Subject: flash art and stencil carbon, not a spreadsheet.
   Halftone shading, bold condensed display lettering, ink
   colors pulled from a classic American Traditional palette.

   v3 adds: safe-area insets for notched phones, larger tap
   targets (44px minimum per Apple/WCAG guidance), momentum
   scrolling, and tap/active states since hover doesn't exist
   on touch devices.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --skin: #1B1614;          /* near-black, warm like old leather */
  --skin-deep: #120F0E;
  --panel: #221B18;
  --panel-raised: #2B2220;
  --paper: #F3ECDC;         /* aged stencil paper */
  --ink-red: #B8392F;       /* classic flash red */
  --ink-red-bright: #D8492F;
  --ink-red-dim: #8A2A22;
  --ink-teal: #2E6E64;      /* faded flash green/teal */
  --ink-teal-bright: #4A9A8A;
  --ink-gold: #C9A246;      /* flash gold accent, used sparingly */
  --pencil: #9C8F80;
  --pencil-dim: #635A4F;
  --line: rgba(243, 236, 220, 0.08);
  --line-bright: rgba(243, 236, 220, 0.16);

  /* iOS/Android safe-area insets, default to 0 on devices without notches */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

* { -webkit-tap-highlight-color: transparent; }

html {
  -webkit-text-size-adjust: 100%; /* iOS Safari won't auto-zoom text */
}

body {
  background-color: var(--skin);
  color: var(--paper);
  font-family: 'Inter', sans-serif;
  background-image:
    radial-gradient(circle at 15% 0%, rgba(184, 57, 47, 0.07), transparent 40%),
    radial-gradient(circle at 85% 100%, rgba(46, 110, 100, 0.06), transparent 45%);
  -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
  overscroll-behavior-y: none;       /* no rubber-band into browser chrome */
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

.font-display { font-family: 'Anton', sans-serif; letter-spacing: 0.015em; }
.font-accent { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.06em; }
.font-mono { font-family: 'Space Mono', monospace; }

/* Halftone dot texture */
.halftone { position: relative; }
.halftone::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(243,236,220,0.5) 0.7px, transparent 0.7px);
  background-size: 7px 7px;
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Subtle paper-grain on dark surfaces */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
}

.panel {
  background-color: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.panel-raised {
  background-color: var(--panel-raised);
  border: 1px solid var(--line-bright);
  border-radius: 10px;
}

.stencil-card {
  background-color: var(--panel-raised);
  border-radius: 4px;
  box-shadow: 0 14px 34px -10px rgba(0,0,0,0.55), 0 2px 0 rgba(243,236,220,0.04) inset;
}

.needle-divider {
  position: relative;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line-bright) 15%, var(--line-bright) 85%, transparent);
}

input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--ink-red-bright);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--skin); }
::-webkit-scrollbar-thumb { background: var(--panel-raised); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--pencil-dim); }

@keyframes tick { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.tick-dot { animation: tick 1.6s ease-in-out infinite; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.rise { animation: rise 0.55s ease-out both; }

.style-pill {
  border: 1px solid var(--line-bright);
  background: var(--panel);
  color: var(--pencil);
  transition: all 0.15s ease;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
}
.style-pill:hover { border-color: var(--pencil); color: var(--paper); }
.style-pill:active { transform: scale(0.96); }
.style-pill.active { background: var(--ink-red); border-color: var(--ink-red); color: var(--paper); }

input[type="date"], input[type="number"] { color-scheme: dark; }

/* Session cards inside the Audit Modal */
.session-row {
  background: var(--skin-deep);
  border-left: 2px solid var(--line-bright);
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.session-row:hover { border-left-color: var(--ink-teal-bright); }

/* ============================================================
   MOBILE ERGONOMICS
   - 44px minimum tap target (Apple HIG / WCAG 2.5.5)
   - :active states everywhere a :hover exists, since touch
     devices fire neither :hover nor :focus reliably
   - safe-area padding on sticky bars and modals so content
     never sits under a notch, home-indicator, or punch-hole
   ============================================================ */

@media (max-width: 767px) {
  button, a, input, .style-pill, [role="button"] {
    min-height: 44px;
  }
  /* Inputs already have py-2.5/p-3 from Tailwind, which is close;
     this guarantees the floor even on smaller font scales. */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="date"] {
    font-size: 16px; /* prevents iOS Safari auto-zoom-on-focus */
  }
}

button:active, a:active, .style-pill:active {
  transform: scale(0.97);
}

/* Sticky mobile top bar respects the status bar / notch */
.mobile-topbar {
  padding-top: calc(0.875rem + var(--safe-top));
}

/* Bottom-anchored elements (none currently, but kept for any
   future fixed bottom nav/action bar) respect the home indicator */
.safe-bottom {
  padding-bottom: calc(1rem + var(--safe-bottom));
}

/* Modal: full-bleed on small screens, with safe-area padding,
   so the close button is never under a notch and content never
   sits under a home-indicator gesture bar */
@media (max-width: 640px) {
  #analytics-modal {
    padding: 0;
  }
  #analytics-modal > div {
    max-height: 100dvh;
    height: 100%;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    padding-top: calc(1.25rem + var(--safe-top));
    padding-bottom: calc(1.25rem + var(--safe-bottom));
    padding-left: calc(1.25rem + var(--safe-left));
    padding-right: calc(1.25rem + var(--safe-right));
  }
}

/* Larger, easier-to-hit close button on touch */
#close-modal-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Table → stacked cards on narrow viewports so nothing
   requires horizontal scrolling on a phone */
@media (max-width: 639px) {
  #table-wrapper table,
  #table-wrapper thead,
  #table-wrapper tbody,
  #table-wrapper th,
  #table-wrapper td,
  #table-wrapper tr {
    display: block;
    width: 100%;
  }
  #table-wrapper thead { display: none; }
  #table-wrapper tr {
    background: var(--skin-deep);
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 12px 14px;
  }
  #table-wrapper td {
    padding: 4px 0;
    border: none !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #table-wrapper td::before {
    content: attr(data-label);
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pencil);
  }
}