/* Shipfolks - one stylesheet. Warm paper light mode, ink text, signal green. */

/* ---------- fonts (self-hosted) ---------- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/space-grotesk-500.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/space-grotesk-700.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2'); }

/* ---------- tokens ---------- */
:root {
  --bg: #FAF9F6;
  --surface: #FFFFFF;
  --ink: #1C1C19;
  --muted: #6F6D64;
  --faint: #A6A49B;
  --line: #E8E6E0;
  --line-strong: #D9D6CD;
  --green: #16A34A;
  --green-deep: #15803D;
  --green-dot: #22C55E;
  --green-soft: #E4F5E9;
  --green-ring: rgba(34, 197, 94, .55);
  --danger: #C93030;
  --danger-soft: #FBEBEB;
  --gold: #9A6A15;
  --gold-soft: #F7EDD8;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(28, 28, 25, .05), 0 4px 16px rgba(28, 28, 25, .05);
  --shadow-pop: 0 4px 10px rgba(28, 28, 25, .08), 0 12px 32px rgba(28, 28, 25, .10);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.site-main { flex: 1 0 auto; padding-bottom: 64px; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p a, .prose a, td a { color: var(--green-deep); }
p a:hover, .prose a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -0.015em; }
h1 { font-size: clamp(1.9rem, 5.5vw, 2.7rem); }
h2 { font-size: clamp(1.35rem, 3.6vw, 1.7rem); }
h3 { font-size: 1.12rem; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.mono { font-family: var(--font-mono); font-size: .82em; letter-spacing: .01em; }
.small { font-size: .87rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }

.container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 18px; }
.container.narrow { max-width: 560px; }
.container.mid { max-width: 780px; }
.center-block { text-align: center; padding-top: 9vh; }
.err-code { color: var(--faint); font-size: .95rem; margin-bottom: 6px; }

/* ---------- nav ---------- */
.site-nav { border-bottom: 1px solid var(--line); background: rgba(250, 249, 246, .92); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 50; }
.nav-inner { display: flex; align-items: center; gap: 20px; height: 58px; }
.wordmark { font-family: var(--font-head); font-weight: 700; font-size: 1.22rem; letter-spacing: -0.02em; display: inline-flex; align-items: baseline; }
.wordmark-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-dot); margin-left: 3px; display: inline-block; }
.wordmark-sm { font-size: 1.05rem; }
.nav-links { display: flex; gap: 4px; margin-right: auto; }
.nav-links a { padding: 7px 11px; border-radius: 8px; color: var(--muted); font-weight: 500; font-size: .93rem; }
.nav-links a:hover { color: var(--ink); background: rgba(28, 28, 25, .045); }
.nav-links a.active { color: var(--ink); }
.badge-unread { background: var(--green); color: #fff; border-radius: 99px; font-size: .68rem; font-weight: 700; padding: 2px 7px; vertical-align: 2px; font-family: var(--font-mono); }
.nav-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.nav-user { position: relative; }
.nav-avatar-btn { border: 0; background: none; padding: 2px; cursor: pointer; border-radius: 50%; display: grid; }
.nav-avatar-btn:hover { outline: 2px solid var(--line-strong); }
.nav-menu { position: absolute; right: 0; top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); min-width: 172px; padding: 6px; z-index: 60; }
.nav-menu a, .nav-menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 7px; font-size: .9rem; border: 0; background: none; cursor: pointer; font-family: inherit; color: var(--ink); }
.nav-menu a:hover, .nav-menu button:hover { background: var(--bg); }
.nav-menu form { margin: 0; border-top: 1px solid var(--line); padding-top: 4px; margin-top: 4px; }
.nav-burger { display: none; border: 0; background: none; cursor: pointer; padding: 8px; }
.nav-burger span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 2px; transition: .18s; }

/* ---------- buttons & forms ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-body); font-weight: 600; font-size: .93rem; padding: 10px 18px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: .14s; line-height: 1.2; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; transform: translateY(-1px); }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-deep); transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-danger { background: transparent; border-color: var(--line-strong); color: var(--danger); }
.btn-danger:hover { border-color: var(--danger); background: var(--danger-soft); }
.btn-sm { padding: 6px 12px; font-size: .85rem; border-radius: 8px; }
.btn-lg { padding: 13px 26px; font-size: 1rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; }
.btn.is-loading::before { content: ""; width: .9em; height: .9em; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spin .6s linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-loading::before { animation-duration: 1.5s; } }

/* admin notice modal */
.modal-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(28, 28, 25, .5); }
.modal-overlay[hidden] { display: none; }
.modal { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); max-width: 440px; width: 100%; padding: 26px; }
.modal h3 { margin: 0 0 10px; font-family: var(--font-head); font-size: 1.15rem; }
.modal .modal-body { margin: 0 0 20px; color: var(--muted); line-height: 1.55; }
.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (prefers-reduced-motion: no-preference) { .modal { animation: modal-in .18s ease-out; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.btn-block { width: 100%; }
/* Google sign-in: Google's brand guidance wants a white button, its own logo,
   and the wording left alone */
.btn-google { background: var(--surface); border-color: var(--line-strong); color: var(--ink); gap: 10px; padding: 11px 18px; }
.btn-google:hover { border-color: var(--ink); background: var(--surface); }
.btn-google .g-logo { width: 18px; height: 18px; flex: none; }
.or-rule { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--faint); font-size: .82rem; }
.or-rule::before, .or-rule::after { content: ""; height: 1px; background: var(--line); flex: 1; }

form { margin: 0; }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; }
.field .hint { font-size: .8rem; color: var(--faint); margin-top: 5px; }
input[type=text], input[type=email], input[type=password], input[type=url], select, textarea {
  width: 100%; font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 10px 12px; outline: none; transition: border-color .14s, box-shadow .14s;
}
input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(34, 197, 94, .16); }
textarea { min-height: 120px; resize: vertical; }
/* a file input's intrinsic width ("Choose File" + filename) will not shrink on its
   own and was pushing narrow screens into horizontal scroll */
input[type=file] { width: 100%; max-width: 100%; font: inherit; font-size: .9rem; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236F6D64' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px; }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; }
.checkbox-row input { width: auto; margin-top: 3px; accent-color: var(--green); }
.checkbox-row label { font-weight: 500; margin: 0; }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow); }
.form-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 20px; flex-wrap: wrap; }
.field-error { color: var(--danger); font-size: .82rem; margin-top: 5px; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 42px; }
.pw-toggle {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer; color: var(--faint);
  padding: 6px; border-radius: 6px; display: grid; place-items: center;
}
.pw-toggle:hover { color: var(--ink); }
.checklist-row { display: flex; gap: 9px; align-items: baseline; padding: 3px 0; font-size: .92rem; }
.checklist-row.check-ok { color: var(--green-deep); }
.checklist-row.check-no { color: var(--muted); }
.checklist-row a { color: var(--green-deep); font-weight: 600; }
.pw-toggle:focus-visible { outline: 2px solid var(--green); }

/* ---------- flash & banners ---------- */
.flash-stack { padding-top: 14px; display: grid; gap: 8px; }
.flash { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-radius: var(--radius); padding: 11px 14px; font-size: .92rem; font-weight: 500; border: 1px solid; }
.flash-success { background: var(--green-soft); border-color: #C4E8CF; color: var(--green-deep); }
.flash-error { background: var(--danger-soft); border-color: #F2CFCF; color: var(--danger); }
.flash-info { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.flash-x { border: 0; background: none; font-size: 1.15rem; cursor: pointer; color: inherit; opacity: .6; padding: 0 2px; }
.flash-x:hover { opacity: 1; }
.verify-banner { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--gold-soft); border: 1px solid #EBD9B4; color: var(--gold); border-radius: var(--radius); padding: 10px 14px; font-size: .92rem; font-weight: 500; }
.pause-banner { background: var(--surface); border-color: var(--line-strong); color: var(--muted); }

/* ---------- pill: the signature freelance badge ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green-soft); color: var(--green-deep);
  border: 1px solid rgba(22, 163, 74, .22);
  border-radius: 999px; padding: 5px 13px 5px 10px;
  font-size: .8rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}
.pill-sm { padding: 3px 10px 3px 8px; font-size: .72rem; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-dot); position: relative; flex: none; }
.pill-sm .dot { width: 7px; height: 7px; }
.dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--green-dot); opacity: 0; animation: dot-pulse 2.2s ease-out infinite; }
@keyframes dot-pulse {
  0% { transform: scale(.6); opacity: .8; }
  70% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .dot::after { animation: none; } }

/* tags & badges */
.tag { display: inline-block; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 3px 9px; font-family: var(--font-mono); font-size: .74rem; color: var(--muted); white-space: nowrap; }
/* "Agency", beside the handle. Deliberately quiet: it tells a hirer whether
   they are writing to a person or a company, it is not a rank. */
.tag-agency { padding: 1px 6px; font-size: .66rem; border-color: var(--line-strong); color: var(--ink); }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.badge-featured { display: inline-block; background: var(--gold-soft); color: var(--gold); border: 1px solid #EBD9B4; border-radius: 6px; padding: 2px 8px; font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .04em; }
.badge-boosted { display: inline-block; background: var(--green-soft); color: var(--green-deep); border: 1px solid rgba(22,163,74,.22); border-radius: 6px; padding: 2px 8px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; }
/* the first builders who listed here - earned once, never expires, never sold */
.badge-early { display: inline-block; align-self: flex-start; background: var(--bg); color: var(--muted); border: 1px solid var(--line-strong); border-radius: 6px; padding: 2px 8px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; }

/* One badge per paid tier, so Partner does not read as the $9 plan. Wired to the
   admin preview only - live code still labels every tier 'featured'. */
.badge-spotlight { display: inline-block; background: #EDE9FB; color: #5B4AB8; border: 1px solid #D5CCF3; border-radius: 6px; padding: 2px 8px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; }
.badge-partner { display: inline-block; background: #E0A340; color: #1B2033; border: 1px solid #E0A340; border-radius: 6px; padding: 2px 8px; font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .04em; }

/* One sand card for Boost, Featured and Spotlight: the badge names the plan and
   the running order ranks them (Spotlight, then Featured, then Boost), so colour
   is not asked to carry the hierarchy as well. */
.b-card.paid-boosted, .b-card.paid-featured, .b-card.paid-spotlight {
  background: #EADFC5; border-color: #D3C29C;
}
/* Partner: the same card as everyone else, in the only dark treatment on the
   site, sitting in its own row above the results. A slow sheen crosses it -
   enough to catch the eye without the card having to shout. */
.partner-slot { margin-bottom: 20px; }
.b-card.paid-partner {
  overflow: hidden;
  background: linear-gradient(135deg, #1B2033, #262C48 55%, #1D2338);
  border-color: #39406B; color: #F3F2ED;
}
.b-card.paid-partner:hover { border-color: #4A5384; box-shadow: 0 10px 30px rgba(27, 32, 51, .32); }
/* light text throughout, since it is the one dark card on the site */
.b-card.paid-partner .b-card-name { color: #fff; }
.b-card.paid-partner .b-card-headline { color: #C4C9DF; }
.b-card.paid-partner .b-card-user, .b-card.paid-partner .b-card-meta { color: #A4ABCB; }
.b-card.paid-partner .tag { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .17); color: #DDE1F0; }
.b-card.paid-partner .pill { background: rgba(34, 197, 94, .17); border-color: rgba(34, 197, 94, .42); color: #6EE7A0; }
/* one pass, then a long rest, so it reads as a material and not a gif */
.b-card.paid-partner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .10) 46%,
              rgba(255, 255, 255, .26) 50%, rgba(255, 255, 255, .10) 54%, transparent 64%);
  transform: translateX(-130%);
  animation: partner-sheen 5s ease-in-out infinite;
}
@keyframes partner-sheen { 0% { transform: translateX(-130%); } 45%, 100% { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) { .b-card.paid-partner::after { animation: none; } }

/* An unsold slot: the same card outline, dashed and empty, so it reads as space
   for sale and never as a member who bought one. Links to /pricing. .b-card sets
   its border and background further down the file, so the two rules below have
   to out-specify it rather than rely on order. */
.b-card.b-card-open { border-style: dashed; background: transparent; gap: 12px; }
.b-card.b-card-open:hover { border-color: var(--gold); box-shadow: none; }
.card-grid .b-card-open { justify-self: center; width: 100%; max-width: 340px; }
.open-slot-main { display: flex; flex-direction: column; gap: 4px; }
.open-slot-title { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; }
.open-slot-what { font-size: .86rem; color: var(--muted); }
.open-slot-side { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: auto; }
.open-slot-price { font-family: var(--font-mono); font-size: .78rem; white-space: nowrap; }
.open-slot-count { font-family: var(--font-mono); font-size: .72rem; color: var(--faint); white-space: nowrap; }
.open-slot-cta { font-family: var(--font-mono); font-size: .74rem; color: var(--gold); white-space: nowrap; }
/* Nothing sold in that tier yet, so the slot is the whole row: a strip across it
   rather than one card-shaped hole with three empty columns beside it. Once a
   member is in the row, the slot drops back to a card their size. */
.card-grid .b-card-open.is-wide {
  grid-column: 1 / -1; max-width: none;
  flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.b-card-open.is-wide .open-slot-side { flex-direction: row; align-items: center; gap: 14px; margin-top: 0; }
.b-card-open.open-partner { border-color: #B9BEDA; background: rgba(27, 32, 51, .03); }
.b-card-open.open-partner:hover { border-color: #39406B; }
.b-card-open.open-partner .open-slot-cta { color: #39406B; }
/* browse: Spotlight has no row of its own there, so its slot gets a band */
.slot-band { margin-bottom: 20px; }

/* Early members: a warm grey wash, deliberately quieter than the gold Featured
   treatment. Gold is what people pay for; this is earned, so it must not compete.
   An early member who buys a plan drops this and wears the plan's colour. */
.b-card.early-tint, .b-row.early-tint { background: linear-gradient(100deg, #EDEAE0, #F4F2EA 62%, transparent); border-color: var(--line-strong); }
.badge-tier { display: inline-block; background: var(--ink); color: #fff; border-radius: 6px; padding: 2px 8px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .05em; }
.badge-status { display: inline-block; border-radius: 6px; padding: 2px 8px; font-family: var(--font-mono); font-size: .7rem; border: 1px solid var(--line-strong); color: var(--muted); }

/* ---------- avatars ---------- */
.avatar { border-radius: 50%; object-fit: cover; background: var(--line); flex: none; }
.avatar-fallback { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; color: var(--ink); background: hsl(var(--h, 90) 38% 86%); }
.avatar-28 { width: 28px; height: 28px; font-size: .66rem; }
.avatar-44 { width: 44px; height: 44px; font-size: .86rem; }
.avatar-56 { width: 56px; height: 56px; font-size: 1.05rem; }
.avatar-96 { width: 96px; height: 96px; font-size: 1.7rem; }
.avatar-ring { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--green-ring); }
.logo-sq { border-radius: 12px; object-fit: cover; background: var(--line); flex: none; }
.logo-44 { width: 44px; height: 44px; }
.logo-56 { width: 56px; height: 56px; }
.logo-fallback { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; background: hsl(var(--h, 200) 38% 88%); }

/* ---------- home hero (centered, scales with viewport) ---------- */
/* keep the .container gutter - the padding shorthand would otherwise zero it */
.hero { padding: clamp(48px, 7vh, 88px) 18px 52px; text-align: center; }
.hero h1 {
  font-size: clamp(2.3rem, 4.6vw, 4.1rem);
  max-width: 1000px; margin-left: auto; margin-right: auto;
  letter-spacing: -0.025em; text-wrap: balance;
}
.hero .lede { font-size: clamp(1.05rem, 1.35vw, 1.28rem); color: var(--muted); max-width: 700px; margin: 18px auto 30px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center; }
.hero-stats { display: flex; gap: 34px; margin-top: 40px; flex-wrap: wrap; justify-content: center; }
.hero-stat { text-align: center; }
.hero-stat b { font-family: var(--font-mono); font-weight: 400; font-size: 1.25rem; display: block; }
.hero-stat span { color: var(--faint); font-size: .8rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 40px 0 16px; }
.section-head h2 { margin: 0; }
.section-head a:not(.btn) { font-size: .88rem; color: var(--muted); font-weight: 500; }
.section-head a:not(.btn):hover { color: var(--ink); }

/* ---------- "Open to work" marquee, docked to the viewport bottom ---------- */
.hire-section { margin-top: 44px; }
.hire-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0;
  background: rgba(250, 249, 246, .93); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px rgba(28, 28, 25, .07);
  padding-top: 10px;
}
.dock-head { margin: 0 0 6px; padding: 0 18px; } /* full-bleed: title left, link right */
.hire-dock h2 { font-size: 1rem; }
.hire-dock .section-head a { font-size: .8rem; }
.hire-dock .hire-track { padding: 2px 18px 14px; }
/* dock mode (narrow + mid screens): pad content by the dock's height, hide footer */
@media (max-width: 1439.98px) {
  body.has-dock .site-main { padding-bottom: calc(var(--dock-h, 330px) + 24px); }
  body.has-dock .site-footer { display: none; }
}
/* ...except on phones and short (landscape) viewports, where a pinned dock ate a
   third of the screen and took the footer - incl. privacy/terms - down with it.
   There it sits in normal page flow: still swipeable, no auto-scroll (see app.js) */
@media (max-width: 640px), (max-height: 560px) {
  .hire-dock {
    position: static; z-index: auto; margin: 32px 0 0;
    background: none; backdrop-filter: none; border-top: 0; box-shadow: none; padding-top: 0;
  }
  body.has-dock .site-main { padding-bottom: 64px; }
  body.has-dock .site-footer { display: block; }
}

/* ---------- vertical side rails (wide screens), 3-image cards ---------- */
.side-rail { display: none; position: fixed; top: 76px; bottom: 18px; width: 332px; z-index: 30; flex-direction: column; }
.side-rail-left { left: 22px; }
.side-rail-right { right: 22px; }
.rail-head { display: flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 700; font-size: .9rem; margin-bottom: 10px; }
.rail-head:hover { color: var(--green-deep); }
.side-rail-right .rail-head { justify-content: flex-end; }
.rail-head-arrow { margin-left: 2px; }
.rail-strip {
  flex: 1; overflow-y: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(transparent, #000 26px, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(transparent, #000 26px, #000 calc(100% - 26px), transparent);
}
.rail-strip::-webkit-scrollbar { display: none; }
.rail-track { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 26px; }
.side-rail .hire-card { width: 100%; }
/* rails activate whenever the side margins can hold a 3-image card;
   --rail-w flexes 240-332px and the center column narrows to make room */
@media (min-width: 1440px) {
  body.has-dock { --rail-w: clamp(240px, calc((100vw - 1220px) / 2), 332px); }
  .side-rail { display: flex; width: var(--rail-w, 332px); }
  body.has-dock .hire-dock { display: none; }
  body.has-dock .container { max-width: min(1280px, calc(100vw - 2 * var(--rail-w, 332px) - 112px)); }
}
/* while rails are narrower than full size, the tiny tiles drop their corner labels */
@media (min-width: 1440px) and (max-width: 1799.98px) {
  .side-rail .hire-tile-label { display: none; }
}
.hire-strip { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hire-strip::-webkit-scrollbar { display: none; }
.hire-track { display: flex; gap: 14px; width: max-content; padding: 6px 18px 18px; }
.hire-card {
  width: 332px; flex: none; display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 14px; transition: .15s;
}
.hire-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.hire-card:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.hire-card-head { display: flex; align-items: center; gap: 9px; }
.hire-card-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hire-card-name { font-family: var(--font-head); font-weight: 700; font-size: .93rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hire-card-stats { display: flex; gap: 6px; }
.hire-stat { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; font-size: .64rem; color: var(--faint); text-align: center; }
.hire-stat b { display: block; font-family: var(--font-mono); font-weight: 400; font-size: .78rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hire-tiles { display: flex; gap: 8px; }
.hire-tile { position: relative; flex: 1; min-width: 0; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: var(--line); display: block; }
.hire-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hire-tile-person { object-position: 50% 22%; }
/* Single-image card (web project, or a project with one screenshot): website
   proportions, so the card keeps roughly the height the 9:16 strip had. */
.hire-tile-wide { aspect-ratio: 16 / 10; }
.hire-tile-wide img { object-position: 50% 0; }
.hire-tile-wide.is-tall img { object-fit: contain; position: relative; }
.hire-tile-bg { position: absolute; inset: -6%; background-size: cover; background-position: center;
  filter: blur(16px) brightness(.74) saturate(1.1); }
.hire-tile-fallback { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--ink); background: hsl(var(--h, 90) 34% 86%); }
.hire-tile-label {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  background: rgba(28, 28, 25, .72); color: #fff; border-radius: 5px; padding: 2px 6px;
  font-family: var(--font-mono); font-size: .56rem; letter-spacing: .07em; text-transform: uppercase;
}
.hire-tile-cap {
  position: absolute; inset: auto 0 0 0; z-index: 2; padding: 18px 7px 6px;
  background: linear-gradient(transparent, rgba(28, 28, 25, .78));
  color: #fff; font-family: var(--font-mono); font-size: .6rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hire-tile-cta {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  background: var(--green-soft); border: 1px dashed rgba(22, 163, 74, .45);
  color: var(--green-deep); font-weight: 600; font-size: .74rem; text-align: center; line-height: 1.35;
}

/* ---------- cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
/* 250px min so a full row of four fits the 1080px container instead of orphaning
   the fourth card onto a line of its own */
.card-grid.centered { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); justify-content: center; }
.view-switch { display: inline-flex; border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.view-switch label, .view-switch a { padding: 8px 13px; font-size: .87rem; font-weight: 500; cursor: pointer; user-select: none; color: var(--muted); }
.view-switch label:hover, .view-switch a:hover { color: var(--ink); }
.view-switch label.on, .view-switch a.on { background: var(--green-soft); color: var(--green-deep); }
.view-switch input { position: absolute; opacity: 0; pointer-events: none; }
/* admin-only preview switch: dashed, so it never looks like a shipped control */
.admin-switch { border-style: dashed; align-items: center; }
.admin-switch-tag { padding: 0 10px; font-family: var(--font-mono); font-size: .68rem; color: var(--faint); border-right: 1px dashed var(--line-strong); align-self: stretch; display: flex; align-items: center; }
.b-row-count { font-family: var(--font-mono); font-size: .78rem; color: var(--faint); white-space: nowrap; }
.b-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; display: flex; flex-direction: column; gap: 11px; transition: .15s; position: relative; }
.b-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.b-card-top { display: flex; align-items: center; gap: 12px; }
.b-card-name { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; line-height: 1.2; }
.b-card-user { font-family: var(--font-mono); font-size: .74rem; color: var(--faint); }
.b-card-headline { font-size: .88rem; color: var(--muted); min-height: 2.6em; }
.b-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.b-card-meta { font-family: var(--font-mono); font-size: .72rem; color: var(--faint); }
.p-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: .15s; position: relative; }
.p-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.p-card-shot { aspect-ratio: 16 / 9; background: linear-gradient(160deg, #F1EFE9, #E7E4DC); object-fit: cover; width: 100%; }
.p-card-shot.shot-top { object-position: 50% 0; }   /* portrait shots: crop from the app's top */
.p-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.p-card-top { display: flex; align-items: center; gap: 10px; }
.p-card-name { font-family: var(--font-head); font-weight: 700; font-size: .98rem; }
.p-card-tagline { font-size: .86rem; color: var(--muted); }
.p-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; }
.card-badge { position: absolute; top: 10px; right: 10px; z-index: 2; }
/* the badge floats over the card corner, so the name has to leave room for it
   or a Featured builder's name sits underneath the label */
/* On a builder card the badge shares the top with the name, and padding alone
   could never fit every badge width and every name, so it sits in the flow
   instead of floating over it. Project cards keep the overlay - there it sits on
   the screenshot, with no text to collide with. */
.b-card .card-badge { position: static; align-self: flex-end; margin-bottom: -6px; }

/* ---------- browse ---------- */
/* padding-block, not the shorthand: this sits on a .container, and a shorthand
   would reset its 18px inline gutter to 0 (same trap .hero fell into) */
.browse-head { padding-block: 30px 8px; }
.browse-tabs { display: flex; gap: 2px; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 3px; background: var(--surface); width: max-content; }
.browse-tabs a { padding: 7px 16px; border-radius: 7px; font-weight: 600; font-size: .88rem; color: var(--muted); }
.browse-tabs a.active { background: var(--ink); color: #fff; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0 8px; }
.filter-bar input[type=text] { flex: 1 1 190px; min-width: 0; }
.filter-bar select { width: auto; flex: 0 1 auto; font-size: .87rem; padding: 8px 28px 8px 10px; }
.filter-toggle { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--radius); padding: 8px 12px; font-size: .87rem; font-weight: 500; cursor: pointer; user-select: none; }
.filter-toggle input { accent-color: var(--green); margin: 0; }
.filter-toggle.on { border-color: var(--green); background: var(--green-soft); color: var(--green-deep); }
.result-count { font-family: var(--font-mono); font-size: .76rem; color: var(--faint); margin: 10px 0 12px; }
#browse-results { transition: opacity .12s ease; }
#browse-results.is-loading { opacity: .5; pointer-events: none; }
.browse-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.b-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--line); transition: background .12s; }
.b-row:last-child { border-bottom: 0; }
.b-row:hover { background: var(--bg); }
.b-row-main { min-width: 0; flex: 1; }
.b-row-name { font-weight: 600; font-size: .96rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.b-row-name .b-card-user { font-weight: 400; }
.b-row-sub { color: var(--muted); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-row-side { display: flex; align-items: center; gap: 12px; flex: none; }
.b-row-loc { font-family: var(--font-mono); font-size: .72rem; color: var(--faint); }
.b-row.pinned { background: linear-gradient(90deg, rgba(247, 237, 216, .5), transparent 70%); }
.empty-state { text-align: center; padding: 56px 20px; color: var(--muted); }
.empty-state h3 { color: var(--ink); }
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 22px; }
.pagination a, .pagination span { padding: 7px 13px; border-radius: 8px; border: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: .8rem; }
.pagination a:hover { border-color: var(--ink); }
.pagination .current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- profile page ---------- */
.breadcrumb { padding-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--green-deep); }
.breadcrumb-sep { color: var(--faint); }
.profile-head { padding-top: 18px; padding-bottom: 10px; display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
.profile-id { flex: 1; min-width: 240px; }
.profile-name-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.profile-head h1 { margin-bottom: 2px; }
.profile-username { font-family: var(--font-mono); color: var(--green-deep); font-size: .92rem; }
.profile-headline { font-size: 1.06rem; color: var(--muted); margin: 10px 0 0; max-width: 560px; }
.profile-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stat-row { display: flex; gap: 24px; margin: 26px 0 6px; flex-wrap: wrap; }
.stat b { font-family: var(--font-mono); font-weight: 400; font-size: 1.15rem; display: block; }
.stat span { font-size: .78rem; color: var(--faint); }
.profile-links { display: flex; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.profile-links a { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; }
.profile-links a:hover { color: var(--ink); border-color: var(--ink); }

/* person links behind the hiring-mode gate: name what is locked, not just the lock */
.links-locked { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding: 11px 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--bg); }
.links-locked-what { display: flex; align-items: center; gap: 7px; font-size: .85rem; }
.links-locked-what b { font-weight: 600; }
.links-locked form { margin: 0; }
.lock-ico { width: 15px; height: 15px; color: var(--faint); flex: none; }
.prose { max-width: 640px; color: var(--ink); }
.prose p { margin: 0 0 1em; }
.profile-section { margin-top: 36px; }

/* ---------- project page ---------- */
.project-head { padding-top: 16px; padding-bottom: 6px; display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.project-head-main { flex: 1; min-width: 260px; display: flex; gap: 18px; align-items: flex-start; }
.project-title h1 { margin-bottom: 4px; }
.project-tagline { color: var(--muted); font-size: 1.02rem; margin: 0; }
.project-meta-row { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
/* mixed-orientation gallery: fixed row height, natural width per image */
.gallery { display: flex; gap: 12px; margin: 26px 0; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
.gallery a { flex: none; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); display: block; height: clamp(300px, 56vw, 460px); scroll-snap-align: start; }
.gallery img { height: 100%; width: auto; display: block; transition: .2s; }
.gallery a:hover img { transform: scale(1.02); }
@media (max-width: 640px) {
  .gallery { gap: 8px; }
}
.builder-card { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; margin-top: 30px; flex-wrap: wrap; }
.builder-card-main { flex: 1; min-width: 180px; }
.builder-card-label { font-family: var(--font-mono); font-size: .7rem; color: var(--faint); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }

/* ---------- inbox ---------- */
.inbox-list { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.thread-row { display: flex; gap: 13px; padding: 14px 16px; border-bottom: 1px solid var(--line); align-items: center; }
.thread-row:last-child { border-bottom: 0; }
.thread-row:hover { background: var(--bg); }
.thread-row-main { flex: 1; min-width: 0; }
.thread-row-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.thread-row-name { font-weight: 600; font-size: .95rem; }
.thread-row-time { font-family: var(--font-mono); font-size: .72rem; color: var(--faint); flex: none; }
.thread-row-preview { color: var(--muted); font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-row.unread .thread-row-name::after { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--green-dot); border-radius: 50%; margin-left: 7px; vertical-align: 2px; }
.thread-row.unread .thread-row-preview { color: var(--ink); font-weight: 500; }
.thread-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 0 14px; flex-wrap: wrap; }
.thread-head-user { display: flex; align-items: center; gap: 12px; }
.thread-context { font-size: .85rem; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 13px; margin-bottom: 14px; }
.msg-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.msg { max-width: 78%; padding: 10px 14px; border-radius: 14px; font-size: .93rem; white-space: pre-wrap; overflow-wrap: break-word; }
.msg-them { background: var(--surface); border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg-me { background: var(--green-deep); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg-time { font-family: var(--font-mono); font-size: .66rem; color: var(--faint); margin-top: 5px; }
.msg-me .msg-time { color: rgba(255,255,255,.7); }
.reply-form { display: flex; gap: 9px; align-items: flex-end; }
.reply-form textarea { min-height: 52px; flex: 1; }
.thread-tools { display: flex; gap: 8px; }

/* ---------- pricing ---------- */
.pricing-banner { background: var(--green-soft); border: 1px solid rgba(22,163,74,.22); color: var(--green-deep); border-radius: var(--radius); padding: 12px 18px; text-align: center; font-weight: 600; font-size: .95rem; margin: 26px 0; }
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; align-items: stretch; }
.plan-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.plan-card.highlight { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), var(--shadow); }
.plan-name { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; display: flex; justify-content: space-between; align-items: center; }
.plan-price { font-family: var(--font-mono); font-size: 1.5rem; }
.plan-price small { font-size: .8rem; color: var(--faint); }
.plan-alt { font-family: var(--font-mono); font-size: .74rem; color: var(--faint); margin-top: -8px; }
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: .88rem; color: var(--muted); }
.plan-list li { padding-left: 20px; position: relative; }
.plan-list li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.plan-cta { margin-top: auto; }
.slot-counter { font-family: var(--font-mono); font-size: .74rem; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; }
.slot-counter.full { color: var(--gold); background: var(--gold-soft); border-color: #EBD9B4; }

/* ---------- settings ---------- */
.settings-wrap { display: grid; grid-template-columns: 190px 1fr; gap: 30px; padding-top: 34px; }
.settings-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 78px; align-self: start; }
.settings-nav a { padding: 8px 12px; border-radius: 8px; color: var(--muted); font-weight: 500; font-size: .92rem; }
.settings-nav a:hover { color: var(--ink); background: rgba(28,28,25,.045); }
.settings-nav a.active { color: var(--ink); background: var(--surface); border: 1px solid var(--line); }
.avatar-edit { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.preview-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.preview-thumb { width: 96px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-strong); }
.preview-note { display: inline-flex; align-items: center; justify-content: center; text-align: center; font-size: .62rem; color: var(--muted); background: var(--bg); padding: 4px; width: 96px; }
.logo-edit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* the upload side must be allowed to collapse and wrap under its thumbnail,
   otherwise the file input's min-content sets the whole settings grid track's
   width. min-width:0 on every direct child, since some are .field and some are
   plain divs carrying an inline flex:1 */
.avatar-edit > *, .logo-edit > * { min-width: 0; }
.avatar-edit > .field, .logo-edit > .field { flex: 1 1 190px; }
.shots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 10px 0; }
.shot-item { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.shot-item img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.shot-item form { position: absolute; top: 6px; right: 6px; }
.shot-del { background: rgba(28,28,25,.75); color: #fff; border: 0; border-radius: 6px; font-size: .72rem; padding: 3px 8px; cursor: pointer; }
.project-row { display: flex; align-items: center; gap: 13px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.project-row:last-child { border-bottom: 0; }

/* ---------- share screen ---------- */
.share-hero { text-align: center; padding-top: 7vh; }
.share-og { max-width: 560px; margin: 26px auto; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-pop); }
.share-og img { width: 100%; height: auto; }
.share-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- admin ---------- */
.admin-wrap { padding-top: 30px; }
.admin-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 22px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.admin-tabs a { padding: 7px 13px; border-radius: 8px; font-weight: 500; font-size: .9rem; color: var(--muted); }
.admin-tabs a.active { background: var(--ink); color: #fff; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 28px; }
.stat-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; }
.stat-tile b { font-family: var(--font-mono); font-weight: 400; font-size: 1.55rem; display: block; }
.stat-tile span { font-size: .78rem; color: var(--muted); }
.stat-tile.north b { color: var(--green-deep); }
.stat-tile .delta { font-family: var(--font-mono); font-size: .7rem; color: var(--faint); }
.admin-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.admin-table th { text-align: left; font-family: var(--font-mono); font-weight: 400; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); padding: 10px 13px; border-bottom: 1px solid var(--line); }
.admin-table td { padding: 11px 13px; border-bottom: 1px solid var(--line); font-size: .89rem; vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table .actions { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-table tr[hidden] { display: none; }
.reveal-controls { display: flex; gap: 8px; margin-top: 12px; }
.reveal-controls[hidden], .btn[hidden] { display: none; }
.table-scroll { overflow-x: auto; border-radius: var(--radius-lg); }
.bar-rows { display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 74px 1fr 46px; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: .74rem; color: var(--muted); }
.bar-track { background: var(--line); border-radius: 4px; height: 10px; overflow: hidden; }
.bar-fill { background: var(--green); height: 100%; border-radius: 4px; min-width: 2px; }
.bar-row .bar-num { text-align: right; color: var(--ink); }
.admin-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 18px; }

/* ---------- analytics ---------- */
.spark-row { display: flex; align-items: flex-end; gap: 2px; height: 64px; margin: 10px 0 4px; }
.spark-col { flex: 1; background: var(--green); opacity: .85; border-radius: 2px 2px 0 0; min-height: 2px; }
.spark-labels { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .66rem; color: var(--faint); }

/* inline field feedback (username availability) */
.field-hint { font-size: .78rem; color: var(--faint); margin: 7px 0 0; font-family: var(--font-mono); }
.field-hint.is-ok { color: var(--green-deep); }
.field-hint.is-bad { color: var(--danger); }

/* viewer count on cards */
.views-chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: .72rem; color: var(--muted); }
.views-chip svg { width: 13px; height: 13px; opacity: .65; }
.p-card-foot .views-chip { margin-left: auto; }

/* ---------- public stat band (profile + project pages) ---------- */
.statband { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px 13px; margin: 22px 0 2px; }
.statband-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.statband-lead { display: flex; align-items: baseline; gap: 10px; }
.statband-lead b { font-family: var(--font-mono); font-weight: 400; font-size: 1.9rem; line-height: 1; color: var(--green-deep); }
.statband-lead span { color: var(--muted); font-size: .92rem; }
.statband-rank { font-family: var(--font-mono); font-size: .72rem; color: var(--green-deep); background: var(--green-soft); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
.statband-spark { display: flex; align-items: flex-end; gap: 3px; height: 40px; margin: 15px 0 5px; }
.statband-spark i { flex: 1; background: var(--green); opacity: .18; border-radius: 2px 2px 0 0; min-height: 2px; }
.statband-spark i.on { opacity: .8; }
.statband-axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .64rem; color: var(--faint); }
.statband-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: .71rem; color: var(--muted); }
.statband-foot span + span::before { content: '·'; color: var(--line-strong); margin-right: 14px; }
@media (max-width: 640px) {
  .statband-lead b { font-size: 1.6rem; }
  .statband-lead span { font-size: .85rem; }
  .statband-spark { gap: 2px; height: 34px; }
}

/* ---------- onboarding wizard ---------- */
.onb-wrap { max-width: 640px; padding-top: 34px; }
.onb-steps { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 0 0 24px; }
.onb-step { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 500; color: var(--faint); }
.onb-step-num { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: .72rem; flex: none; }
.onb-step.is-current { color: var(--ink); }
.onb-step.is-current .onb-step-num { background: var(--ink); border-color: var(--ink); color: #fff; }
.onb-step.is-done { color: var(--green-deep); }
.onb-step.is-done .onb-step-num { background: var(--green-soft); border-color: var(--green); color: var(--green-deep); }
a.onb-step:hover { color: var(--ink); }
.onb-preview { font-size: .8rem; color: var(--gold); background: var(--gold-soft); border: 1px solid rgba(154, 106, 21, .25); border-radius: var(--radius); padding: 9px 12px; margin-bottom: 16px; }
.onb-preview a { text-decoration: underline; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); padding: 30px 0; margin-top: auto; }
.footer-inner { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.footer-tag { margin: 4px 0 0; color: var(--faint); font-size: .74rem; }
/* wrap: six links in one unwrapped row overflowed the page on narrow screens,
   which gave every page a couple of px of horizontal scroll */
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-left: auto; }
.footer-links a { color: var(--muted); font-size: .88rem; }
.footer-links a:hover { color: var(--ink); }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .settings-wrap { grid-template-columns: 1fr; gap: 14px; }
  .settings-nav { flex-direction: row; overflow-x: auto; position: static; padding-bottom: 4px; }
  .settings-nav a { white-space: nowrap; }
  .form-split { grid-template-columns: 1fr; }
  .msg { max-width: 92%; }
  .b-row-loc { display: none; }
  .profile-head { padding-top: 12px; }
  .hero { padding: 40px 22px 30px; }
}
@media (max-width: 640px) {
  .nav-links { display: none; position: absolute; top: 58px; left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--line); flex-direction: column; padding: 10px 14px 14px; gap: 2px; box-shadow: var(--shadow-pop); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 11px 12px; font-size: 1rem; }
  .nav-burger { display: block; }

  /* compact "Open to work" rail: shorter tiles, no stat chips */
  .hire-section { margin-top: 32px; }
  .hire-track { gap: 10px; padding: 4px 18px 12px; } /* 18px = container gutter, so cards line up with the page */
  .hire-card { width: 224px; padding: 11px; gap: 8px; }
  .hire-card-name { font-size: .86rem; }
  .hire-card-stats { display: none; }
  .hire-tile { border-radius: 8px; }
  .hire-tile-label { display: none; }
  .hire-tile-cap { font-size: .55rem; padding: 12px 5px 4px; }
  .hire-tile-fallback { font-size: 1.1rem; }
  .hire-dock .section-head { margin-bottom: 8px; }
}

/* ---- support chat widget (floating, every page) ---- */
.sw { position: fixed; right: 20px; bottom: 20px; z-index: 940; }
.sw-toggle { position: relative; width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--green); color: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 22px rgba(22,163,74,.38), 0 2px 6px rgba(0,0,0,.12); transition: transform .15s ease, background .15s ease; }
.sw-toggle:hover { background: var(--green-deep); transform: translateY(-2px); }
.sw-ico { position: absolute; transition: opacity .18s ease, transform .18s ease; }
.sw-ico-close { opacity: 0; transform: rotate(-40deg) scale(.5); }
.sw.sw-open .sw-ico-chat { opacity: 0; transform: rotate(40deg) scale(.5); }
.sw.sw-open .sw-ico-close { opacity: 1; transform: none; }
.sw-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--green-ring);
  pointer-events: none; animation: sw-pulse 2.1s ease-out 3; }
.sw.has-unread .sw-ring { animation-iteration-count: infinite; }
.sw.sw-open .sw-ring { display: none; }
@keyframes sw-pulse { 0% { transform: scale(1); opacity: .75; } 70% { transform: scale(1.9); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sw-ring { animation: none; } }
.sw-badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: #E11D48; color: #fff; font: 700 .7rem/20px var(--font-mono); text-align: center;
  box-shadow: 0 0 0 2px var(--bg); }
.sw-panel { position: absolute; right: 0; bottom: 72px; width: 360px; max-width: calc(100vw - 32px);
  height: 500px; max-height: calc(100vh - 120px); background: var(--bg); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,.18); display: flex; flex-direction: column; overflow: hidden; }
.sw-panel[hidden] { display: none; }
.sw-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; background: var(--ink); color: #fff; }
.sw-head-t { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; }
.sw-live { width: 8px; height: 8px; border-radius: 50%; background: var(--green-dot); box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
.sw-x { background: none; border: none; color: rgba(255,255,255,.72); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.sw-x:hover { color: #fff; }
.sw-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; padding: 14px; }
.sw-intro { font-size: .84rem; color: var(--muted); background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 13px; margin-bottom: 12px; }
.sw-stack { flex: 1; overflow-y: auto; margin: 0; padding-right: 4px; }
.sw-stack .msg { max-width: 86%; font-size: .88rem; }
.sw-foot { border-top: 1px solid var(--line); padding: 10px; }
.sw-form { display: flex; align-items: flex-end; gap: 8px; }
.sw-input { flex: 1; resize: none; border: 1px solid var(--line-strong); border-radius: 12px; padding: 9px 12px;
  font: inherit; font-size: .9rem; max-height: 120px; background: var(--bg); color: var(--ink); }
.sw-input:focus { outline: none; border-color: var(--green); }
.sw-send { flex: none; width: 40px; height: 40px; border-radius: 10px; border: none; background: var(--green);
  color: #fff; cursor: pointer; display: grid; place-items: center; }
.sw-send:hover { background: var(--green-deep); }
.sw-gate { text-align: center; }
.sw-gate p { font-size: .87rem; color: var(--muted); margin: 2px 0 10px; }
.sw-gate-alt { display: inline-block; margin-top: 9px; font-size: .82rem; color: var(--muted); }
@media (max-width: 480px) {
  .sw { right: 14px; bottom: 14px; }
  .sw-panel { width: calc(100vw - 24px); height: calc(100vh - 96px); }
}

/* ---- admin chat console (/admin/chats) ---- */
/* minmax(0,1fr) + min-height:0 below: without them the row sizes to the tallest
   message and the stack never gets a scrollbar - it just overflows into the
   clipped area and takes the reply box with it. */
.chat-console { display: grid; grid-template-columns: 300px 1fr; grid-template-rows: minmax(0, 1fr);
  border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; height: 620px; min-height: 420px; max-height: calc(100vh - 260px); background: var(--bg); }
.chat-list { border-right: 1px solid var(--line); overflow-y: auto; min-height: 0; }
.chat-list-item { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--ink); }
.chat-list-item:hover { background: var(--surface); }
.chat-list-item.active { background: var(--green-soft); }
.chat-list-main { flex: 1; min-width: 0; }
.chat-list-top { display: flex; justify-content: space-between; gap: 8px; }
.chat-list-name { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-list-time { font-family: var(--font-mono); font-size: .68rem; color: var(--faint); flex: none; }
.chat-list-snip { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.chat-unread { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--green);
  color: #fff; font: 700 .7rem/20px var(--font-mono); text-align: center; }
.chat-view { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-empty { flex: 1; display: grid; place-items: center; padding: 30px; text-align: center; }
.chat-view-head { flex: none; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.chat-view-user { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.chat-stack { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; margin: 0; }
.chat-reply { flex: none; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface); }
@media (max-width: 720px) {
  .chat-console { grid-template-columns: 1fr; grid-template-rows: auto auto; height: auto; min-height: 0; max-height: none; }
  .chat-list { max-height: 240px; border-right: none; border-bottom: 1px solid var(--line); }
  .chat-stack { max-height: 52vh; }
}

/* ---------- join: which side are you on ---------- */
.join-pick { padding-top: 56px; text-align: center; }
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px 0 8px; }
.role-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.role-card:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: var(--shadow); }
/* the Google flow submits its choice, so the cards are buttons there */
.role-grid form { margin: 0; display: flex; }
button.role-card { font: inherit; cursor: pointer; width: 100%; text-align: center; }
.role-icon { display: grid; place-items: center; width: 100%; aspect-ratio: 1.35; margin-bottom: 12px;
  border-radius: var(--radius); background: linear-gradient(135deg, var(--green-soft), #F3F7E4); color: var(--ink); }
.role-icon svg { width: 46%; height: auto; }
.role-name { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; }
.role-sub { color: var(--muted); font-size: .85rem; }
@media (max-width: 560px) {
  .role-grid { grid-template-columns: 1fr; }
  .role-icon { aspect-ratio: 2.4; margin-bottom: 8px; }
  .role-icon svg { width: 62px; }
}

/* mode switcher at the top of the account menu */
.nav-mode { padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.nav-mode-label { display: block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 3px; }
.nav-menu .nav-mode form { border-top: 0; padding-top: 0; margin: 0; }
.nav-menu .nav-mode-switch { padding: 0; font-size: .88rem; font-weight: 600; color: var(--green-deep); width: auto; }
.nav-menu .nav-mode-switch:hover { background: none; text-decoration: underline; }

/* ---------- admin: opportunity radar (internal tool, /admin/radar) ---------- */
.radar-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.radar-bar form { margin: 0; }
.radar-note { font-family: var(--font-mono); font-size: .72rem; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; }
.radar-note.is-warn { color: var(--gold); background: var(--gold-soft); border-color: transparent; }

.radar-subtabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 18px 0 14px; }
.radar-subtabs a { padding: 6px 13px; border-radius: 999px; font-size: .85rem; font-weight: 500;
  color: var(--muted); border: 1px solid var(--line); }
.radar-subtabs a.active { background: var(--ink); border-color: var(--ink); color: #fff; }

.radar-list { display: grid; gap: 10px; }
.radar-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 16px; }
.radar-item.is-reject { background: #FCFBF9; border-style: dashed; }
.radar-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.radar-age { font-family: var(--font-mono); font-size: .95rem; color: var(--green-deep); font-weight: 500; }
.radar-age.is-old { color: var(--faint); }
.radar-src { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); }
.radar-src b { font-weight: 400; color: var(--ink); }
.radar-title { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; line-height: 1.25; margin: 2px 0 6px; }
.radar-title a:hover { text-decoration: underline; }
.radar-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--font-mono);
  font-size: .72rem; color: var(--muted); margin-bottom: 8px; }
.radar-facts b { font-weight: 400; color: var(--green-deep); }
.radar-reason { font-family: var(--font-mono); font-size: .74rem; color: var(--danger); margin-bottom: 8px; }

.radar-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.radar-chip { font-family: var(--font-mono); font-size: .68rem; padding: 3px 8px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
/* the hiring marker is why an item is in the tab at all - give it the weight */
.radar-chip.k-marker { background: var(--green); border-color: transparent; color: #fff; font-weight: 500; }
.radar-chip.k-positive { background: var(--green-soft); border-color: transparent; color: var(--green-deep); }
.radar-chip.k-reject, .radar-chip.k-direction, .radar-chip.k-blocklist { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.radar-chip.k-budget { background: var(--gold-soft); border-color: transparent; color: var(--gold); }
.radar-chip.k-age, .radar-chip.k-gate { background: var(--danger-soft); border-color: transparent; color: var(--danger); }

.radar-matches { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 9px; border-top: 1px solid var(--line); }
.radar-matches-label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--faint); }
.radar-stack { display: flex; align-items: center; }
.radar-stack .radar-match + .radar-match { margin-left: -9px; }
.radar-match { position: relative; display: inline-flex; cursor: pointer; border-radius: 50%; }
.radar-match .avatar { box-shadow: 0 0 0 2px var(--surface); }
.radar-match:hover { z-index: 3; }
.radar-match:hover .avatar { transform: translateY(-2px); }
.radar-pop { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  display: none; z-index: 20; min-width: 190px; max-width: 300px; padding: 9px 11px;
  background: var(--ink); color: #fff; border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.radar-match:hover .radar-pop, .radar-match:focus .radar-pop, .radar-match:focus-within .radar-pop { display: block; }
.radar-pop b { display: block; font-size: .82rem; margin-bottom: 3px; }
.radar-pop span { display: block; font-family: var(--font-mono); font-size: .68rem; color: #C9C7BF; line-height: 1.5; }
.radar-match-names { font-size: .8rem; color: var(--muted); }
.radar-match-names a { color: var(--green-deep); }
.radar-match-names a:hover { text-decoration: underline; }

.radar-raw { margin-top: 9px; }
.radar-raw summary { font-family: var(--font-mono); font-size: .7rem; color: var(--faint); cursor: pointer; }
.radar-raw pre { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 13px; overflow-x: auto; font-family: var(--font-mono); font-size: .7rem;
  line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 340px; margin: 8px 0 0; }
.radar-cfg { width: 100%; min-height: 420px; font-family: var(--font-mono); font-size: .78rem; line-height: 1.5; }
.radar-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.radar-chip.k-location { background: #EEF2FF; border-color: transparent; color: #4338CA; }

/* ============================================================================
   PROFILE THEMES  (admin-only preview -- src/profile_themes.php)

   Alternate renderings of a builder profile, reachable only via ?theme= and only
   for an admin. Everything is prefixed:
     .theme-tabs  the switcher
     .pfp-*       theme "Portfolio"
   Nothing in here restyles an existing class, so deleting the block removes the
   themes and touches nothing else.
   ============================================================================ */

/* ---------- the switcher ---------- */
.theme-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px;
  padding: 7px 9px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.theme-tabs-label { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--faint); margin-right: 4px; }
.theme-tab { padding: 5px 11px; border-radius: 7px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.theme-tab:hover { background: rgba(28, 28, 25, .05); color: var(--ink); }
.theme-tab.active { background: var(--ink); color: #fff; }
.theme-tab.is-soon { color: var(--faint); cursor: not-allowed; text-decoration: line-through; font-weight: 500; }
.theme-tabs-note { margin-left: auto; font-size: .72rem; color: var(--faint); }
@media (max-width: 620px) { .theme-tabs-note { display: none; } }

/* ========================= theme: Portfolio ========================= */
.pfp { padding-top: 20px; }
.pfp-shell { --violet: #7C6BD8; --mint: #A6DBCD; --sun: #F3C570; --inkbox: #45454B;
  background: #F1F0EE; border-radius: 30px; padding: 20px;
  display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; align-items: stretch; }

/* --- identity card --- */
.pfp-hero { position: relative; overflow: hidden; background: var(--violet); color: #fff;
  border-radius: 24px; padding: 20px 22px 24px; display: flex; flex-direction: column;
  /* the notch under the "About me" chip, as in the reference */
  clip-path: polygon(0 0, 62% 0, 62% 0, 100% 0, 100% 100%, 0 100%); }
.pfp-hero-top { display: flex; }
.pfp-chip { display: inline-flex; align-items: center; gap: 7px; background: #fff; color: var(--ink);
  border-radius: 99px; padding: 6px 13px; font-weight: 600; font-size: .82rem; }
.pfp-chip svg { width: 15px; height: 15px; }
/* The frame keeps its own background circular but does NOT clip its children --
   the cutout has to be able to break out of the top. Each child clips itself
   instead, because the two image kinds want opposite treatment.
   Top margin buys room for the head that escapes, so it clears the chip above. */
.pfp-portrait { position: relative; width: min(250px, 78%); aspect-ratio: 1; margin: 96px auto 0;
  border-radius: 50%; background: #E7A9F2;
  border: 5px solid rgba(255, 255, 255, .95); }
/* Nothing escapes when the portrait cannot break out, so it needs no headroom. */
.pfp-portrait:not(.can-break) { margin-top: 22px; }

/* Default: the cutout stays inside the ring, masked to the circle. The mask
   rather than overflow:hidden, because the frame has to stay unclipped for the
   break-out variant below. 46.5% leaves the white ring showing. */
.pfp-cut { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom; padding: 7% 7% 0;
  filter: grayscale(1) contrast(1.06);
  -webkit-mask-image: radial-gradient(ellipse 46.5% 46.5% at 50% 50%, #000 99.5%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-image: radial-gradient(ellipse 46.5% 46.5% at 50% 50%, #000 99.5%, transparent 100%);
  mask-repeat: no-repeat; }

/* Head out of the circle, shoulders inside it. Applied only when the portrait
   has room above the head (`can-break`) -- on a photo whose crop already sliced
   the hair flat, this escapes as a rectangular slab instead of a silhouette.
   87% of members qualify; see cutout_has_headroom().

   The image grows to 136% of the frame and sits ON its bottom edge -- no gap
   under the chin, the shoulders run past the bottom of the circle and get cut
   by its arc -- so it overhangs the top by 36% of the circle's diameter.
   Geometry with the image bottom-aligned at 136%: the disc's centre lands at
   0.86/1.36 = 63.2% of the image, its radius at 0.5/1.36 = 36.8%, trimmed to
   35.8% so the ring still shows under the shoulders.

   The mask is the UNION of two circles (mask-composite defaults to `add`):
     1. the disc itself -- clips the shoulders to its arc and hides the flat
        bottom edge the square avatar crop leaves behind;
     2. a second, larger circle sitting higher, which is where the head escapes.

   The two MUST meet on the disc's centre line, 63.2%, and nowhere else: that is
   the one row where the disc is at its widest, so at the join the escape circle
   is no wider than the disc and the boundary continues instead of jumping. Any
   other join is a step, and a step cuts a straight line through whoever is
   standing in it -- this used to be a rectangle ending at 44%, which on a tight
   face crop sliced across the eyes.
   So the escape circle is the one through (50% +/- 35.8%, 63.2%) with its
   centre 35% of the image above that line: centre 28.2%, radius
   sqrt(.358^2 + .35^2) = 50.1%. It is 40% wider than the disc where it bulges,
   which is the room the head and hair get, and its top clears the image
   entirely (28.2 - 50.1 < 0) so it can never cut across the crown. */
.pfp-portrait.can-break .pfp-cut { inset: auto; left: 50%; bottom: 0; transform: translateX(-50%);
  /* max-width:none is load-bearing: the global `img { max-width: 100% }` caps the
     width at the frame while the height still grows, which distorts the box and
     makes object-fit shrink the portrait straight back inside the circle. */
  width: 136%; height: 136%; max-width: none; padding: 0;
  -webkit-mask-image: radial-gradient(ellipse 35.8% 35.8% at 50% 63.2%, #000 99.5%, transparent 100%),
                      radial-gradient(ellipse 50.1% 50.1% at 50% 28.2%, #000 99.5%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-image: radial-gradient(ellipse 35.8% 35.8% at 50% 63.2%, #000 99.5%, transparent 100%),
              radial-gradient(ellipse 50.1% 50.1% at 50% 28.2%, #000 99.5%, transparent 100%);
  mask-size: 100% 100%;
  mask-position: center center;
  mask-repeat: no-repeat;
  mask-composite: add; }

/* An opaque square photo cannot break out -- it would show as a rectangle of
   background above the ring -- so it stays clipped inside, filling the circle. */
.pfp-plain { position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.04); }
.pfp-initials { display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: hsl(var(--h, 40) 35% 82%); color: #35353A;
  font-family: var(--font-head); font-weight: 700; font-size: 3rem; filter: none; }
.pfp-hero-foot { margin-top: auto; padding-top: 20px; position: relative; }
.pfp-im { font-size: 1.5rem; line-height: 1; opacity: .92; font-family: var(--font-head); }
/* break-word, not anywhere: `anywhere` split "Muhammad" across two lines mid-word.
   This only breaks a word that cannot fit on a line of its own. */
.pfp-name { font-family: var(--font-head); font-weight: 700; color: #fff;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.04; letter-spacing: -.03em; margin: 2px 0 0;
  overflow-wrap: break-word; }
.pfp-headline { margin: 10px 0 0; font-size: .88rem; line-height: 1.5;
  color: rgba(255, 255, 255, .78); max-width: 68%; }
/* Skills sit under the name and description, not alongside the photo. */
/* Same 68% as the headline and contact line: the rotating stamp sits bottom-right
   and this is the column that keeps text clear of it. */
.pfp-hero-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; max-width: 68%; }
.pfp-hero-skills span { border: 1px solid rgba(255, 255, 255, .48); border-radius: 99px;
  padding: 3px 10px; font-size: .72rem; color: rgba(255, 255, 255, .92); white-space: nowrap; }
.pfp-contact { margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, .45); max-width: 68%; }
/* White on the violet card, because the site's green button reads as a third
   colour here. Same shape as .pfp-unlock below, one size up: this is the only
   thing a visitor is meant to press on the page. */
.pfp-msg { display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  background: #fff; color: #17171A; border: 1px solid transparent; border-radius: 99px;
  padding: 9px 17px; font-size: .85rem; font-weight: 600; line-height: 1.2;
  overflow-wrap: anywhere; transition: .16s; }
.pfp-msg:hover { background: #EDEBFF; transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(23, 23, 26, .22); }
.pfp-msg svg { width: 16px; height: 16px; flex: none; }
/* The owner's own view. Nobody needs steering to their settings page. */
.pfp-msg.is-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.pfp-msg.is-ghost:hover { background: rgba(255, 255, 255, .14); box-shadow: none; }
.pfp-stamp { position: absolute; right: 0; bottom: 4px; width: 92px; height: 92px;
  border-radius: 50%; background: #1B1B20; display: grid; place-items: center; }
.pfp-stamp svg { width: 100%; height: 100%; animation: pfp-spin 22s linear infinite; }
.pfp-stamp text { fill: #fff; font-family: var(--font-mono); font-size: 8.4px; letter-spacing: .06em; }
.pfp-stamp-dot { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: #fff; }
@keyframes pfp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pfp-stamp svg { animation: none; } }

/* --- portfolio side --- */
.pfp-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pfp-title { font-family: var(--font-head); font-weight: 700; letter-spacing: -.045em;
  font-size: clamp(2.6rem, 7vw, 5rem); line-height: .92; margin: 4px 0 0; color: #17171A; }
.pfp-title-mark { display: inline-block; width: .28em; height: .28em; margin-left: .12em;
  border-top: 3px solid #17171A; border-right: 3px solid #17171A; vertical-align: super; }
.pfp-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(104px, auto); gap: 12px; grid-auto-flow: dense; }
.pfp-box { position: relative; overflow: hidden; border-radius: 18px; padding: 14px 15px;
  display: flex; flex-direction: column; gap: 5px; background: #fff; color: #17171A;
  min-width: 0; transition: .16s; }
a.pfp-box:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(23, 23, 26, .16); }
.pfp-box-label { font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase;
  letter-spacing: .1em; opacity: .72; }
.pfp-box-big { font-family: var(--font-head); font-weight: 700; font-size: 1.22rem;
  line-height: 1.12; letter-spacing: -.02em; overflow-wrap: anywhere; }
.pfp-box-sub { font-size: .78rem; line-height: 1.4; opacity: .82; }
.pfp-box-foot { margin-top: auto; font-family: var(--font-mono); font-size: .66rem; opacity: .75; }
.pfp-box-text { margin: 2px 0 0; font-size: .84rem; line-height: 1.5; opacity: .9; }
.pfp-box-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.pfp-box-chips span { border: 1px solid currentColor; border-radius: 99px; padding: 2px 9px;
  font-size: .68rem; opacity: .85; }
.pfp-box-wide { grid-column: span 2; }
.pfp-box-stat { align-items: flex-start; justify-content: center; }
.pfp-box-stat b { font-family: var(--font-head); font-weight: 700; font-size: 2.5rem;
  line-height: 1; letter-spacing: -.04em; }
.pfp-box-stat span { font-size: .8rem; opacity: .8; }
.pfp-mint   { background: var(--mint); }
.pfp-violet { background: var(--violet); color: #fff; }
.pfp-ink    { background: var(--inkbox); color: #fff; }
.pfp-sun    { background: var(--sun); }

/* aspect-ratio, not just the two rows it spans: the rows are sized by whatever
   text happens to sit beside them, and on a member with short tiles that left
   the screenshot 134px tall inside a 226px box -- a product shown too small to
   read. This gives the picture a shape of its own and the neighbours stretch to
   it. It is a floor, not a cap: a talkative tile alongside still grows the rows
   and the screenshot takes the extra room with them. */
.pfp-box-feature { grid-column: span 2; grid-row: span 2; aspect-ratio: 16 / 11;
  padding: 0; background: #2A2A31; }
.pfp-feature-blank { position: absolute; inset: 0;
  background: linear-gradient(140deg, hsl(var(--h, 260) 55% 84%), hsl(var(--h, 260) 45% 66%)); }

/* Blurred copy of the first screenshot, filling the tile behind the real ones.
   Containing an image normally leaves dead bars either side; this turns them
   into a colour wash taken from the product itself. Inset past the edges so the
   blur has pixels to sample and does not fade out at the border. */
.pfp-feature-bg { position: absolute; inset: -10%;
  background-size: cover; background-position: center;
  filter: blur(26px) brightness(.52) saturate(1.15); }

/* The screenshots themselves, whole and side by side. max-width:none matters --
   the global `img { max-width: 100% }` would otherwise shrink each one to the
   width of the whole row.
   The bottom padding keeps them clear of the caption TEXT, not of the caption
   box: the box's own top 26px is the fade, which is there to sit over the
   picture. Reserving the whole 76px just shrank the picture to pay for empty
   gradient. */
.pfp-feature-shots { position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; gap: 10px; padding: 12px 12px 54px; }
.pfp-feature-shots img { max-width: none; max-height: 100%; width: auto; height: auto;
  object-fit: contain; border-radius: 10px; box-shadow: 0 8px 22px rgba(0, 0, 0, .32); }
.pfp-feature-shots.is-tall img { height: 100%; width: auto; }
.pfp-feature-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 15px 13px;
  display: flex; flex-direction: column; gap: 2px; color: #fff;
  background: linear-gradient(to top, rgba(10, 10, 12, .82), transparent); }
.pfp-feature-cap b { font-family: var(--font-head); font-size: 1.05rem; letter-spacing: -.015em; }
.pfp-feature-cap span { font-size: .78rem; opacity: .88; }

@media (max-width: 940px) {
  .pfp-shell { grid-template-columns: 1fr; }
  .pfp-hero { clip-path: none; }
  .pfp-name, .pfp-headline, .pfp-contact { max-width: none; }
  .pfp-stamp { width: 78px; height: 78px; }
}
@media (max-width: 620px) {
  .pfp-shell { padding: 12px; border-radius: 22px; }
  .pfp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pfp-box-feature { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 10; }
  .pfp-box-wide { grid-column: span 2; }
  .pfp-portrait { width: min(206px, 64%); margin-top: 44px; }
  .pfp-hero-skills { max-width: none; }
}

/* ---------- reorderable project list (settings/projects) ---------- */
.browse-list.is-sortable .project-row { position: relative; background: var(--surface); }
.drag-handle { flex: none; width: 26px; height: 34px; margin-left: -6px; display: grid; place-items: center;
  color: var(--faint); cursor: grab; touch-action: none; border-radius: 6px; }
.drag-handle:hover { color: var(--ink); background: rgba(28, 28, 25, .05); }
.drag-handle svg { width: 18px; height: 18px; }
.project-row.is-dragging { position: fixed; z-index: 80; cursor: grabbing; pointer-events: none;
  box-shadow: var(--shadow-pop); border-color: var(--line-strong); border-radius: var(--radius); }
.project-row-gap { border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: rgba(28, 28, 25, .02); }
body.is-reordering { user-select: none; cursor: grabbing; }
.reorder-status { font-family: var(--font-mono); font-size: .72rem; }
.reorder-status.is-ok { color: var(--green-deep); }
.reorder-status.is-bad { color: var(--danger); }

/* ---------- page-design picker (settings) ---------- */
.theme-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.theme-opt { position: relative; display: block; cursor: pointer; padding: 12px 13px 13px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface);
  transition: .14s; }
.theme-opt:hover { border-color: var(--ink); }
.theme-opt.is-on { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.theme-opt input { position: absolute; opacity: 0; pointer-events: none; }
.theme-opt b { display: block; margin-top: 9px; font-size: .95rem; }
.theme-opt .small { display: block; line-height: 1.45; margin-top: 2px; }
/* Tiny abstract of each layout -- cheaper and clearer than a screenshot. */
.theme-opt-art { display: block; position: relative; height: 74px; border-radius: 10px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line); }
.theme-opt-art i { position: absolute; border-radius: 3px; }
.theme-art-portfolio { background: #EFEFEE; }
.theme-art-portfolio .a { left: 6px; top: 6px; width: 30%; bottom: 6px; background: #7C6BD8; }
.theme-art-portfolio .b { left: 42%; top: 6px; right: 26%; height: 42px; background: #45454B; }
.theme-art-portfolio .c { right: 6px; top: 6px; width: 18%; height: 42px; background: #A6DBCD; }
.theme-art-portfolio .d { left: 42%; bottom: 6px; right: 6px; height: 20px; background: #F3C570; }
.theme-art-classic .a { left: 8px; top: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--line-strong); }
.theme-art-classic .b { left: 36px; top: 12px; right: 8px; height: 6px; background: var(--line-strong); }
.theme-art-classic .c { left: 8px; top: 40px; right: 8px; bottom: 8px; background: var(--line); }

/* contact links inside the portfolio identity card */
.pfp-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; max-width: 68%; }
.pfp-links a { font-size: .8rem; color: rgba(255, 255, 255, .82); }
.pfp-links a:hover { color: #fff; text-decoration: underline; }
.pfp-locked { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px;
  max-width: 68%; font-size: .76rem; color: rgba(255, 255, 255, .78); }
.pfp-locked svg { width: 14px; height: 14px; flex: none; }
.pfp-locked b { font-weight: 600; color: #fff; }
.pfp-locked form { margin: 0; }
.pfp-unlock { display: inline-block; background: #fff; color: #17171A; border: 0; border-radius: 99px;
  padding: 5px 12px; font-family: inherit; font-size: .74rem; font-weight: 600; cursor: pointer; }
.pfp-unlock:hover { background: #EDEBFF; }
@media (max-width: 940px) { .pfp-links, .pfp-locked { max-width: none; } }

/* ---------- blog ---------- */
/* padding-block, not the shorthand: this sits on a .container and the shorthand
   would wipe its 18px inline gutter (same trap .browse-head documents above) */
.blog-head { padding-block: 34px 6px; }
.blog-head .lede { font-size: 1.05rem; color: var(--muted); max-width: 640px; margin: 0 0 22px; }
.blog-tabrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.blog-tabs { display: flex; align-items: center; gap: 2px; border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 3px; background: var(--surface); width: max-content; max-width: 100%; flex-wrap: wrap; }
.blog-tabs a { padding: 7px 15px; border-radius: 7px; font-weight: 600; font-size: .88rem; color: var(--muted); }
.blog-tabs a:hover { color: var(--ink); }
.blog-tabs a.active { background: var(--ink); color: #fff; }
.blog-feed { font-family: var(--font-mono); font-size: .72rem; color: var(--faint); letter-spacing: .06em; }
.blog-feed:hover { color: var(--ink); }
.blog-filter { margin: 14px 0 0; font-size: .8rem; color: var(--muted); }
.blog-lead { margin-top: 26px; }
.blog-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 4px; }

.post-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column; transition: .15s; }
.post-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.post-card-thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg); }
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* no cover art: a tinted plate carrying the topic, same hue trick as the avatars */
.post-thumb-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  background: linear-gradient(145deg, hsl(var(--h) 46% 93%), hsl(var(--h) 32% 87%)); }
.post-thumb-fallback span { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .06em;
  text-transform: uppercase; color: hsl(var(--h) 32% 34%); padding: 0 14px; text-align: center; }
.post-card-body { padding: 15px 17px 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.post-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.post-card-read { font-size: .72rem; color: var(--faint); }
.post-card-title { font-size: 1.06rem; margin: 0; line-height: 1.24; }
.post-card-dek { font-size: .88rem; color: var(--muted); margin: 0; }
.post-card:hover .post-card-title { color: var(--green-deep); }
.tag-draft { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.tag-on { border-color: var(--ink); color: var(--ink); }

.post-card-lead { flex-direction: row; }
.post-card-lead .post-card-thumb { flex: 0 0 46%; aspect-ratio: auto; }
.post-card-lead .post-card-body { padding: 28px 30px; justify-content: center; gap: 12px; }
.post-card-lead .post-card-title { font-size: clamp(1.35rem, 2.6vw, 1.85rem); }
.post-card-lead .post-card-dek { font-size: .97rem; }
@media (max-width: 720px) {
  .post-card-lead { flex-direction: column; }
  .post-card-lead .post-card-thumb { flex: none; aspect-ratio: 16 / 9; }
  .post-card-lead .post-card-body { padding: 16px 18px 20px; }
}

.blog-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; }
.blog-tagrail { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 40px;
  padding-top: 20px; border-top: 1px solid var(--line); }
.blog-tagrail a.tag:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- a post ---------- */
.post { padding-bottom: 10px; }
.post-head { padding-top: 12px; }
.post-kicker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; font-size: .78rem; }
.post-head h1 { font-size: clamp(1.85rem, 4.6vw, 2.6rem); margin-bottom: 14px; }
.post-dek { font-size: 1.1rem; line-height: 1.5; color: var(--muted); margin: 0 0 22px; }
.post-byline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.post-author { display: inline-flex; align-items: center; gap: 9px; font-size: .9rem; font-weight: 600; }
a.post-author:hover { color: var(--green-deep); }
.post-cover { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--line); margin: 26px 0 0; }

.post-toc { margin: 28px 0 4px; padding: 16px 20px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); }
.post-toc ol { margin: 8px 0 0; padding-left: 20px; }
.post-toc li { margin: 5px 0; font-size: .9rem; }
.post-toc a { color: var(--muted); }
.post-toc a:hover { color: var(--green-deep); text-decoration: underline; }

/* the article body: everything below is rendered from Markdown by src/blog.php */
.post-body { font-size: 1.055rem; line-height: 1.72; margin-top: 26px; }
.post-body h2 { font-size: clamp(1.3rem, 2.8vw, 1.62rem); margin: 2em 0 .5em; scroll-margin-top: 78px; }
.post-body h3 { font-size: 1.16rem; margin: 1.7em 0 .45em; scroll-margin-top: 78px; }
.post-body h4 { font-size: 1.02rem; margin: 1.5em 0 .4em; scroll-margin-top: 78px; }
.post-body p { margin: 0 0 1.15em; }
.post-body strong { font-weight: 650; }
.post-body a { color: var(--green-deep); text-decoration: underline; text-underline-offset: 2px; }
.post-body hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.post-list { margin: 0 0 1.2em; padding-left: 22px; }
.post-list li { margin: .45em 0; }
.post-list li::marker { color: var(--faint); }
.post-quote { margin: 1.6em 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--green-dot);
  color: var(--muted); font-size: 1.06rem; }
.post-quote p:last-child { margin-bottom: 0; }
.post-body code { font-family: var(--font-mono); font-size: .84em; background: #F1EFE9;
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }
.post-code { background: #1C1C19; color: #EDEBE4; border-radius: var(--radius); padding: 16px 18px;
  overflow-x: auto; margin: 1.5em 0; font-size: .86rem; line-height: 1.6; }
.post-code code { background: none; border: 0; padding: 0; color: inherit; font-size: 1em; }
.post-img { border-radius: var(--radius); border: 1px solid var(--line); margin: 1.6em 0; }
.post-table-wrap { overflow-x: auto; margin: 1.6em 0; }
.post-table { border-collapse: collapse; width: 100%; font-size: .93rem; }
.post-table th, .post-table td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.post-table th { font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); font-weight: 400; border-bottom-color: var(--line-strong); }

.post-callout { margin: 1.7em 0; padding: 16px 20px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--surface); font-size: .98rem; }
.post-callout p:last-child, .post-callout .post-list:last-child { margin-bottom: 0; }
.post-callout-tip { border-color: rgba(22, 163, 74, .3); background: var(--green-soft); }
.post-callout-warn { border-color: rgba(201, 48, 48, .28); background: var(--danger-soft); }

.post-tags { margin: 34px 0 0; }
.post-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.post-foot a { color: var(--muted); }
.post-foot a:hover { color: var(--green-deep); }

/* the close of every post: which half shows follows the post's audience */
.post-cta-wrap { margin-top: 48px; }
.post-cta { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.post-cta-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 26px; }
.post-cta-col h2 { font-size: 1.25rem; margin-bottom: 8px; }
.post-cta-col p { font-size: .92rem; margin: 0 0 16px; }
.post-cta-solo { max-width: 780px; }

/* ---------- tools ---------- */
.tool { padding-bottom: 10px; }
.tool-head { padding-top: 14px; }
.tool-head .tag { margin-bottom: 14px; }
.tool-head h1 { font-size: clamp(1.85rem, 4.6vw, 2.6rem); margin-bottom: 14px; }

.tool-list { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.tool-row { display: flex; align-items: center; gap: 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 22px; transition: .15s; }
a.tool-row:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.tool-row-main { flex: 1; min-width: 0; }
.tool-row-top { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tool-row h2 { font-size: 1.14rem; margin: 0 0 6px; }
.tool-row p { font-size: .9rem; margin: 0; }
.tool-row-go { font-size: .78rem; color: var(--faint); flex: none; }
a.tool-row:hover .tool-row-go { color: var(--green-deep); }
.tool-row.is-soon { background: var(--bg); border-style: dashed; }
.tool-row.is-soon h2 { color: var(--muted); }

/* the calculator form: a plain GET, so it works with scripting off */
.calc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px 24px; margin-top: 28px; }
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.calc-field { display: flex; flex-direction: column; gap: 7px; }
.calc-field > span { font-size: .88rem; font-weight: 600; display: flex; flex-direction: column; gap: 2px; }
.calc-field small { font-weight: 400; font-size: .78rem; color: var(--muted); }
.calc-input { display: flex; align-items: stretch; gap: 6px; }
.calc-input input { flex: 1; min-width: 0; font-family: var(--font-mono); }
.calc-input select { width: auto; flex: none; font-size: .85rem; padding-right: 26px; }
.calc-unit { display: flex; align-items: center; font-family: var(--font-mono); font-size: .84rem; color: var(--faint); }
.calc-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

.calc-out { margin-top: 18px; padding: 24px; border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--green-soft), var(--surface) 78%); border: 1px solid rgba(22, 163, 74, .22); }
.calc-out-label { font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--green-deep); margin: 0 0 8px; }
.calc-headline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.calc-headline b { font-family: var(--font-head); font-size: clamp(2.2rem, 7vw, 3.2rem); line-height: 1; letter-spacing: -.02em; }
.calc-headline span { color: var(--muted); font-size: .95rem; }
.calc-secondary { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(22, 163, 74, .18); }
.calc-secondary b { display: block; font-family: var(--font-mono); font-size: 1.08rem; font-weight: 400; }
.calc-secondary span { font-size: .76rem; color: var(--muted); }
/* the arithmetic, printed. the point of the tool is that it can be checked */
.calc-working { margin: 20px 0 6px; padding: 11px 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); font-size: .78rem;
  color: var(--muted); overflow-x: auto; white-space: nowrap; }

.calc-share { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.calc-share input { flex: 1; min-width: 220px; font-family: var(--font-mono); font-size: .76rem;
  color: var(--muted); background: var(--bg); }
.post-table tr.is-current { background: var(--green-soft); }
.post-table tr.is-current td { font-weight: 600; }

.calc-ask h3 { font-size: 1.05rem; margin-bottom: 8px; }
.calc-ask-form { margin-top: 16px; }
.calc-ask-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.calc-ask-row label { display: flex; flex-direction: column; gap: 5px; }
.calc-ask-row input, .calc-ask-row select { font-size: .88rem; }
.calc-warn { margin: 20px 0 0; padding: 11px 14px; border-radius: var(--radius);
  background: var(--danger-soft); border: 1px solid rgba(201, 48, 48, .28); color: var(--ink); }
/* headings that sit directly in the tool section (outside .post-body) need their
   own top margin -- the base rule only sets a bottom one */
.tool > h2 { margin-top: 2em; }
.calc-share { margin-bottom: 4px; }

/* estimator: option grids. checkbox/radio stays in the DOM for no-JS submits */
.calc-block { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.calc-block:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.calc-block-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; align-items: end; }
.calc-legend { font-size: .88rem; font-weight: 600; margin: 0 0 10px; }
.calc-legend small { font-weight: 400; color: var(--muted); }
.calc-radios, .calc-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-opt { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong);
  background: var(--surface); border-radius: var(--radius); padding: 8px 13px; font-size: .87rem;
  cursor: pointer; user-select: none; transition: .12s; }
.calc-opt:hover { border-color: var(--ink); }
.calc-opt input { accent-color: var(--green); margin: 0; flex: none; }
.calc-opt.on { border-color: var(--green); background: var(--green-soft); color: var(--green-deep); font-weight: 600; }
.calc-norate span { font-size: .8rem; color: var(--muted); line-height: 1.5; display: block; }

.tool-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: space-between;
  margin-top: 30px; padding: 24px 26px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); }
.tool-cta > div { flex: 1; min-width: 260px; }
.tool-cta h2 { font-size: 1.2rem; margin: 0 0 8px; }
.tool-cta p { font-size: .92rem; margin: 0; }

/* brief builder: the output is plain text on purpose, so it stays a textarea */
.brief-out { margin-top: 4px; }
.brief-out textarea { width: 100%; font-family: var(--font-mono); font-size: .8rem;
  line-height: 1.65; background: var(--surface); resize: vertical; }
.brief-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.calc-block input[type=text], .calc-block textarea { width: 100%; }
.tag-scheduled { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }