/* ============================================================
   THE ORDER - Mobile-first hardening
   ------------------------------------------------------------
   Load this AFTER style.css. Adds:
   - iOS safe-area handling
   - 44pt minimum tap targets (Apple HIG)
   - Skeleton loaders + empty/error states
   - Pull-to-refresh hooks
   - Focus-visible (WCAG AA)
   - prefers-reduced-motion
   - Native-feel tap behavior
   - PWA standalone-display tweaks
   ============================================================ */

:root {
  /* Fallback chain: env() -> 0; iOS 11.2+ supplies the value */
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-right:  env(safe-area-inset-right,  0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);

  --tap-min: 44px;

  /* Phase 1 derives stronger contrast where current tokens fall short of WCAG AA */
  --text-1: var(--text);       /* 4.5:1 against bg */
  --bg-2: rgba(255, 255, 255, 0.04);

  /* Brand status colors with on-color counterparts */
  --status-ok:    #84a87a;
  --status-warn:  var(--gold);
  --status-err:   #d68a8a;
}

/* ------------------------------------------------------------
   GLOBAL: native-feel base
   ------------------------------------------------------------ */
html {
  -webkit-text-size-adjust: 100%;        /* iOS Safari rotation re-zoom */
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
}
html, body {
  overscroll-behavior-y: contain;        /* kills the white flash on rubber-band */
}
body {
  /* Respect safe areas at the page edges */
  padding-top:    var(--safe-top);
  padding-left:   var(--safe-left);
  padding-right:  var(--safe-right);
  padding-bottom: var(--safe-bottom);
}

/* When running as an installed PWA, drop the browser-chrome assumption */
@media (display-mode: standalone), (display-mode: fullscreen) {
  body { padding-bottom: max(var(--safe-bottom), 16px); }
}

/* Sticky / fixed nav lives inside the safe area too */
.nav {
  padding-top: var(--safe-top);
}

/* ------------------------------------------------------------
   TAP TARGETS - 44pt minimum per Apple HIG
   ------------------------------------------------------------ */
button,
a.nav-tab,
.tier-filter-btn,
.community-cat,
.sort-btn,
.chat-channel,
.cal-toggle-btn,
.cal-arrow,
.event-subscribe-btn,
.btn-primary,
.btn-secondary,
.skill-share-btn,
.create-worktable-btn,
.community-create-btn,
.nav-icon-btn,
.nav-avatar,
.chat-msg-action,
.chat-compose-btn,
.chat-compose-send,
.reaction-pill,
.feature-toggle,
.toggle {
  min-height: var(--tap-min);
  touch-action: manipulation;            /* removes the 300ms tap delay */
}

/* Icon-only buttons square out cleanly */
.nav-icon-btn,
.nav-avatar,
.chat-msg-action,
.chat-compose-btn,
.cal-arrow {
  min-width: var(--tap-min);
}

/* Tappable list items need elbow room on small screens */
@media (max-width: 720px) {
  .chat-channel,
  .community-cat,
  .tier-filter-btn {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* ------------------------------------------------------------
   FOCUS-VISIBLE - WCAG AA keyboard + screen reader navigation
   ------------------------------------------------------------ */
:focus { outline: none; }                /* kill default */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Inputs get a glow rather than an outline to avoid clipping */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--gold-glow), 0 0 0 1px var(--gold);
  border-color: var(--gold);
}

/* Skip-to-main link for screen readers */
.skip-link {
  position: absolute;
  top: -100px; left: 16px;
  padding: 10px 18px;
  background: var(--surface);
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  z-index: 9999;
  transition: top 0.15s ease;
}
.skip-link:focus { top: calc(var(--safe-top) + 8px); }

/* ------------------------------------------------------------
   SKELETON LOADERS - replace plain "Loading..." text
   ------------------------------------------------------------ */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
  display: block;
}
.skeleton.line     { height: 14px; margin: 8px 0; }
.skeleton.line.sm  { height: 10px; }
.skeleton.line.lg  { height: 22px; }
.skeleton.line.w-75 { width: 75%; }
.skeleton.line.w-50 { width: 50%; }
.skeleton.line.w-30 { width: 30%; }
.skeleton.circle   { width: 44px; height: 44px; border-radius: 50%; }
.skeleton.card     { height: 120px; border-radius: var(--radius); margin-bottom: 16px; }
.skeleton.row      { display: flex; gap: 12px; align-items: center; padding: 12px 0; }

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ------------------------------------------------------------
   EMPTY STATE / ERROR STATE - reusable patterns
   ------------------------------------------------------------ */
.empty-state,
.error-state {
  text-align: center;
  padding: 64px 24px;
  max-width: 480px;
  margin: 0 auto;
}
.empty-state .icon,
.error-state .icon {
  font-size: 2.4rem;
  opacity: 0.4;
  margin-bottom: 12px;
  display: block;
}
.empty-state h3,
.error-state h3 {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--text-1);
  margin-bottom: 8px;
}
.empty-state p,
.error-state p {
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.65;
  margin-bottom: 18px;
}
.error-state .icon { color: var(--status-err); }
.empty-state .cta,
.error-state .cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap-min);
  padding: 10px 20px;
  background: var(--surface);
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.empty-state .cta:hover,
.error-state .cta:hover { background: var(--gold-dim); }

/* ------------------------------------------------------------
   PULL-TO-REFRESH - visual scaffolding (JS will wire actuality)
   ------------------------------------------------------------ */
.ptr-indicator {
  position: absolute;
  top: -56px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--gold-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 50;
}
.ptr-indicator.pulling   { opacity: 1; }
.ptr-indicator.refreshing { opacity: 1; animation: ptr-spin 0.8s linear infinite; }
@keyframes ptr-spin {
  to { transform: translateX(-50%) rotate(360deg); }
}

/* ------------------------------------------------------------
   PREFERS-REDUCED-MOTION - WCAG 2.3.3
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .orb-1, .orb-2 { animation: none !important; }
  .skeleton { animation: none !important; background: rgba(255,255,255,0.06); }
  .ptr-indicator.refreshing { animation: none !important; }
}

/* ------------------------------------------------------------
   PREFERS-COLOR-SCHEME - we are dark-only, but lock it
   ------------------------------------------------------------ */
:root { color-scheme: dark; }

/* ------------------------------------------------------------
   INPUTS - mobile-friendly sizing + no iOS zoom-on-focus
   ------------------------------------------------------------ */
input, textarea, select, button {
  font-size: max(16px, 0.92rem);          /* iOS will not zoom inputs >= 16px */
}
textarea { min-height: 88px; }
input[readonly] { opacity: 0.65; cursor: not-allowed; }

/* ------------------------------------------------------------
   TOAST - safe-area aware
   ------------------------------------------------------------ */
.toast {
  bottom: calc(24px + var(--safe-bottom)) !important;
}

/* ------------------------------------------------------------
   MOBILE NAV - collapse + hamburger
   ------------------------------------------------------------ */
@media (max-width: 880px) {
  .nav-tabs {
    display: none;
    position: fixed;
    inset: var(--nav-h, 64px) 0 0 0;
    padding: 32px 24px max(40px, var(--safe-bottom));
    background: var(--bg);
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    z-index: 100;
  }
  .nav-tabs.open { display: flex; }
  .nav-tabs .nav-tab {
    width: 100%;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 1rem;
  }
  .nav-burger {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: var(--tap-min); height: var(--tap-min);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-1);
    cursor: pointer;
  }
}
.nav-burger { display: none; }

/* ------------------------------------------------------------
   CHAT - mobile-first tweaks
   ------------------------------------------------------------ */
@media (max-width: 880px) {
  .chat-shell {
    grid-template-columns: 1fr;
  }
  .chat-channels {
    position: fixed;
    inset: 0;
    width: 86vw;
    max-width: 320px;
    transform: translateX(-100%);
    transition: transform 0.24s ease;
    z-index: 90;
    background: var(--surface);
    padding-top: max(72px, calc(var(--safe-top) + 72px));
  }
  .chat-channels.open { transform: translateX(0); }
  .chat-channels-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 85;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .chat-channels-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }
  .chat-main { width: 100%; }
  .chat-msg-actions { display: none; }   /* surface via long-press instead */
  .chat-compose { padding-bottom: max(16px, var(--safe-bottom)); }
}

/* ------------------------------------------------------------
   ACCESSIBILITY - higher-contrast where current colors fall short
   ------------------------------------------------------------ */
.post-time, .seat-meta, .pct, .note, .num-label {
  color: var(--text-2);                  /* lift from text-3 -> text-2 for AA */
}

/* visually-hidden helper for screen-reader labels */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   NETWORK STATUS BANNER - shows when offline
   ------------------------------------------------------------ */
.net-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: calc(var(--safe-top) + 8px) 16px 8px;
  background: var(--status-warn);
  color: #1c1812;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  z-index: 1000;
  transform: translateY(-100%);
  transition: transform 0.24s ease;
}
.net-banner.show { transform: translateY(0); }