/* ==========================================================================
   ProjectHive — Design System
   A hive is a network of specialists trading effort for value: the hexagon
   (skills, categories, avatar frames, plan cards) is the one recurring
   signature shape across the whole product, not just the marketing page.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* Color */
  --ink:        #14213D;   /* primary dark — nav, headings, text-on-light */
  --ink-700:    #1C2A4A;
  --paper:      #F5F7FA;   /* app background */
  --surface:    #FFFFFF;   /* cards */
  --line:       #E1E6ED;   /* hairline borders */
  --text:       #1C2530;
  --text-mute:  #5B6779;
  --amber:      #F2A93B;   /* bids, value, primary CTA */
  --amber-700:  #D98E1B;
  --teal:       #1B998B;   /* escrow / verified / success */
  --teal-100:   #E4F5F2;
  --coral:      #E4572E;   /* disputes / destructive */
  --coral-100:  #FCE9E3;
  --amber-100:  #FEF3DF;
  --ink-100:    #E9ECF3;

  /* Type */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, Segoe UI, sans-serif;
  --font-mono: 'IBM Plex Mono', Menlo, monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-card: 0 1px 2px rgba(20,33,61,.06), 0 8px 24px -12px rgba(20,33,61,.12);
  --shadow-pop: 0 20px 60px -20px rgba(20,33,61,.35);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--font-body); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); margin:0 0 .4em; font-weight:600; letter-spacing:-.01em; }
h1{ font-size:2.6rem; font-weight:700; }
h2{ font-size:1.9rem; }
h3{ font-size:1.3rem; }
p{ margin:0 0 1em; }
a{ color:var(--ink); text-decoration:none; }
img{ max-width:100%; display:block; }
.mono{ font-family:var(--font-mono); }
.muted{ color:var(--text-mute); }

:focus-visible{ outline:2px solid var(--amber-700); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

.container{ max-width:1160px; margin:0 auto; padding:0 24px; }
.container-narrow{ max-width:760px; margin:0 auto; padding:0 24px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:11px 20px; border-radius:var(--radius-sm); font-weight:600; font-size:.92rem;
  border:1px solid transparent; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
  font-family:var(--font-body);
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--amber); color:var(--ink); box-shadow:0 6px 16px -6px rgba(242,169,59,.6); }
.btn-primary:hover{ background:var(--amber-700); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:var(--ink-700); }
.btn-outline{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-outline:hover{ border-color:var(--ink); }
.btn-danger{ background:var(--coral-100); color:var(--coral); }
.btn-danger:hover{ background:var(--coral); color:#fff; }
.btn-sm{ padding:7px 14px; font-size:.82rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------- Nav ---------- */
.nav{ background:var(--ink); position:sticky; top:0; z-index:50; }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1160px; margin:0 auto; }
.brand{ display:flex; align-items:center; gap:10px; color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.25rem; }
.brand .hex{ width:26px; height:26px; }
.nav-links{ display:flex; align-items:center; gap:22px; }
.nav-links a{ color:#C9D1E3; font-weight:500; font-size:.9rem; }
.nav-links a:hover{ color:#fff; }
.nav-links a.active{ color:var(--amber); }
.pill-count{ background:var(--amber); color:var(--ink); border-radius:20px; font-size:.7rem; padding:1px 7px; font-weight:700; margin-left:4px; }
.nav-toggle{ display:none; background:none; border:none; color:#fff; font-size:1.4rem; cursor:pointer; }

@media(max-width:860px){
  .nav-links{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--ink-700); flex-direction:column; padding:16px 24px; gap:14px; }
  .nav-links.open{ display:flex; }
  .nav-toggle{ display:block; }
}

/* ---------- Hex signature component ---------- */
.hex-badge{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:auto; min-width:64px; height:34px; padding:0 14px;
  background:var(--ink-100); color:var(--ink); font-size:.76rem; font-weight:600;
  clip-path: polygon(12% 0%, 88% 0%, 100% 50%, 88% 100%, 12% 100%, 0% 50%);
}
.hex-badge.amber{ background:var(--amber-100); color:var(--amber-700); }
.hex-badge.teal{ background:var(--teal-100); color:var(--teal); }
.hex-avatar{
  width:56px; height:62px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.2rem; flex-shrink:0;
}
.hex-grid-bg{
  background-image:
    radial-gradient(circle at 20% 20%, rgba(242,169,59,.10) 0, transparent 40%),
    radial-gradient(circle at 80% 0%, rgba(27,153,139,.12) 0, transparent 45%);
}

/* ---------- Cards ---------- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-card); }
.card-pad{ padding:22px; }
.card-hover{ transition:box-shadow .15s ease, transform .15s ease; }
.card-hover:hover{ box-shadow:var(--shadow-pop); transform:translateY(-2px); }

/* ---------- Status pills ---------- */
.status{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:20px; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.status::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.status.open{ background:var(--teal-100); color:var(--teal); }
.status.pending{ background:var(--amber-100); color:var(--amber-700); }
.status.closed{ background:var(--ink-100); color:var(--text-mute); }
.status.disputed{ background:var(--coral-100); color:var(--coral); }
.status.awarded{ background:#E8ECFB; color:#3B4EBF; }

/* ---------- Forms ---------- */
label{ display:block; font-weight:600; font-size:.84rem; margin-bottom:6px; color:var(--ink); }
.field{ margin-bottom:18px; }
.hint{ font-size:.78rem; color:var(--text-mute); margin-top:5px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=tel],
select, textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:.92rem; background:#fff; color:var(--text);
  transition:border-color .12s ease;
}
input:focus, select:focus, textarea:focus{ border-color:var(--amber-700); outline:none; }
textarea{ resize:vertical; min-height:110px; }
.error-box{ background:var(--coral-100); color:var(--coral); padding:12px 16px; border-radius:var(--radius-sm); margin-bottom:18px; font-size:.88rem; }
.success-box{ background:var(--teal-100); color:var(--teal); padding:12px 16px; border-radius:var(--radius-sm); margin-bottom:18px; font-size:.88rem; }
.radio-role{ display:flex; gap:14px; }
.radio-role label{ flex:1; border:1.5px solid var(--line); border-radius:var(--radius-md); padding:16px; cursor:pointer; font-weight:600; text-align:center; }
.radio-role input{ display:none; }
.radio-role input:checked + span{ color:var(--amber-700); }
.radio-role label:has(input:checked){ border-color:var(--amber); background:var(--amber-100); }

/* ---------- Tables ---------- */
table{ width:100%; border-collapse:collapse; }
th{ text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-mute); padding:10px 14px; border-bottom:1px solid var(--line); }
td{ padding:14px; border-bottom:1px solid var(--line); font-size:.88rem; vertical-align:middle; }
tr:last-child td{ border-bottom:none; }

/* ---------- Layout shells ---------- */
.app-shell{ display:grid; grid-template-columns:220px 1fr; min-height:calc(100vh - 62px); }
.sidebar{ background:var(--surface); border-right:1px solid var(--line); padding:24px 14px; }
.sidebar a{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--radius-sm); color:var(--text); font-weight:500; font-size:.88rem; margin-bottom:4px; }
.sidebar a:hover{ background:var(--paper); }
.sidebar a.active{ background:var(--ink); color:#fff; }
.main{ padding:32px; }
@media(max-width:760px){ .app-shell{ grid-template-columns:1fr; } .sidebar{ display:flex; overflow-x:auto; border-right:none; border-bottom:1px solid var(--line); padding:12px; } .sidebar a{ white-space:nowrap; margin-bottom:0; } .main{ padding:18px; } }

.page-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.empty-state{ text-align:center; padding:60px 20px; color:var(--text-mute); }
.empty-state h3{ color:var(--ink); }

.chat-bubble{ max-width:70%; padding:11px 15px; border-radius:14px; margin-bottom:10px; font-size:.9rem; }
.chat-bubble.me{ background:var(--ink); color:#fff; margin-left:auto; border-bottom-right-radius:3px; }
.chat-bubble.them{ background:var(--ink-100); color:var(--ink); border-bottom-left-radius:3px; }
.chat-bubble .masked{ color:var(--coral); font-style:italic; }

footer.site-footer{ background:var(--ink); color:#9fb0d1; padding:40px 0; font-size:.85rem; margin-top:60px; }
footer.site-footer a{ color:#C9D1E3; }