/* BE work wall. Visual design from belovedecosystem.com (parchment + ink + ox-blood; IBM Plex Sans +
   Instrument Serif, self-hosted under /fonts, SIL OFL). Layout of task pictures and tasks from the old
   wall at relay.belovedecosystem.com/tasks (big status words with counts, chips + search + Gallery/List,
   masonry tiles with a status badge on the picture, picture-left / text-right detail). */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/ibm-plex-sans-latin.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif-latin.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif-italic-latin.woff2) format("woff2"); }

:root {
  --burgundy: #6B0F1A; --burgundy-dark: #4A0000; --white: #ffffff;
  --parchment: #f3efe6; --parchment-deep: #e8e2d4; --paper: #faf8f3;
  --ink: #1c1914; --ink-soft: #3d3830; --muted: #6f675b; --hairline: rgba(28, 25, 20, 0.12);
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wrap: min(92vw, 1600px);
  /* status dots (old wall's badge idea, in BE-compatible tones) */
  --s-staking: #C08A2E; --s-assigned: #3F6E8C; --s-judging: #6B4F8A; --s-done: #3D6B4F;
  --s-failed: var(--burgundy); --s-closed: #8A8173; --s-draft: #B9B0A0;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; } /* design review S1: scrolled-to content clears the sticky header */
html, body { overflow-x: clip; }
body { margin: 0; font-family: var(--font-sans); background: var(--parchment); color: var(--ink); -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.5; }
img { max-width: 100%; display: block; }
a { color: var(--burgundy); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Design review M6 (WCAG 1.4.1): links inside text are underlined. */
#app p a:not(.btn), #app li a:not(.btn), .auth-card p a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button, input, select { font: inherit; color: inherit; }
code { font: 0.82em/1.3 var(--font-mono); background: var(--parchment-deep); padding: 1px 5px; border-radius: 3px; color: var(--ink-soft); }
:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; }
.skip-link { position: absolute; left: 1rem; top: -3rem; background: var(--ink); color: var(--parchment); padding: 0.5rem 1rem; z-index: 100; border-radius: 4px; }
.skip-link:focus { top: 0.5rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* safety label: unchanged meaning, kept loud */
.dev-banner { background: repeating-linear-gradient(45deg, #8A1C1C, #8A1C1C 12px, #A02626 12px, #A02626 24px); color: #fff; text-align: center; font-weight: 600; padding: 8px; font-size: 13px; position: relative; z-index: 70; }

/* ---------------------------------------------------------------- header (BE site) */
.page { width: var(--wrap); margin: 0 auto; min-height: 70vh; }
.site-header { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 1rem; padding: 0.9rem 0; background: var(--parchment); transition: padding 0.3s var(--ease); }
.site-header::before { content: ""; position: absolute; top: -100vh; bottom: 0; left: -100vmax; right: -100vmax; z-index: -1; background: var(--parchment); border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease); }
.site-header.is-scrolled { padding: 0.6rem 0; }
.site-header.is-scrolled::before { border-bottom-color: var(--hairline); }
.wordmark a { font-family: var(--font-sans); font-weight: 600; font-size: 1.75rem; line-height: 1.05; letter-spacing: 0.04em; color: var(--burgundy); display: grid; align-items: center; min-width: 5.35em; position: relative; }
.wordmark a:hover { text-decoration: none; }
.wm-full, .wm-mark { grid-area: 1 / 1; transition: opacity 0.3s var(--ease), transform 0.35s var(--ease); }
.wm-full { transform-origin: left center; }
.wm-mark { width: 3.1rem; height: auto; opacity: 0; transform: scale(0.85); transform-origin: left center; pointer-events: none; }
.site-header.is-scrolled .wm-full { opacity: 0; transform: scale(0.7); pointer-events: none; position: absolute; left: 0; top: 50%; translate: 0 -50%; }
.site-header.is-scrolled .wm-mark { opacity: 1; transform: none; }
.primary-nav { display: flex; align-items: center; gap: 1.75rem; margin-left: clamp(2rem, 14vw, 12rem); margin-right: auto; min-height: 2.4rem; }
.nav-link { font-size: 0.95rem; color: var(--ink); padding: 0.65rem 0; border-bottom: 1px solid transparent; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.nav-link:hover, .nav-link.is-current { color: var(--burgundy); border-bottom-color: var(--burgundy); text-decoration: none; }
.account-nav { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.net { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--hairline); border-radius: 999px; padding: 0.3rem 0.7rem; white-space: nowrap; }
.me { display: flex; align-items: center; gap: 0.6rem; }
.who { display: flex; flex-direction: column; font-size: 0.9rem; font-weight: 500; text-align: right; line-height: 1.25; color: var(--ink); }
.who small { color: var(--muted); font-weight: 400; font-size: 0.8rem; }
.who.dev { color: #8A1C1C; }

/* ---------------------------------------------------------------- buttons (BE site) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font-family: var(--font-sans); font-weight: 500; font-size: 0.95rem; line-height: 1; padding: 0.7rem 1.15rem; border-radius: 3px; border: 1px solid var(--burgundy); background: var(--burgundy); color: var(--white); cursor: pointer; white-space: nowrap; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.btn:hover { background: var(--burgundy-dark); border-color: var(--burgundy-dark); text-decoration: none; }
.btn:disabled { opacity: 0.5; cursor: wait; }
.btn-outline, .btn.ghost { background: transparent; color: var(--burgundy); }
.btn-outline:hover, .btn.ghost:hover { background: rgba(107, 15, 26, 0.07); border-color: var(--burgundy); }
.btn.small { padding: 0.45rem 0.75rem; font-size: 0.82rem; }
.btn.warn-btn { background: #8A1C1C; border-color: #8A1C1C; display: flex; width: 100%; margin: 6px 0; }

/* ---------------------------------------------------------------- list page: hero + old wall's status words */
main { padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(4rem, 8vw, 6rem); }
.hero { max-width: 64rem; }
.eyebrow { margin: 0 0 0.9rem; font-size: 0.95rem; color: var(--burgundy); letter-spacing: 0.04em; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.hero h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.6rem, 6.5vw, 5.5rem); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 1.1rem; text-wrap: balance; }
.hero h1 .accent { color: var(--burgundy); }
.hero-sub { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--ink-soft); max-width: 46rem; margin: 0; }
nav.status { display: flex; flex-wrap: wrap; gap: 0.1rem 1.9rem; margin: clamp(2rem, 5vw, 3.5rem) 0 1.4rem; }
nav.status button { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.1rem, 5vw, 4.2rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--muted); display: inline-flex; align-items: flex-start; gap: 0.1em; transition: color 0.2s var(--ease); min-height: 44px; }
nav.status button sup { font-family: var(--font-sans); font-size: 0.3em; font-weight: 500; letter-spacing: 0; margin-top: 0.5em; }
nav.status button:hover, nav.status button[aria-pressed="true"] { color: var(--ink); }
nav.status button[aria-pressed="true"] span { text-decoration: underline; text-decoration-color: var(--burgundy); text-decoration-thickness: 0.06em; text-underline-offset: 0.14em; }
.tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 0 24px; border-top: 1px solid var(--hairline); }
.chip { border: 1px solid var(--hairline); background: transparent; border-radius: 999px; padding: 0.3rem 0.85rem; cursor: pointer; font-size: 0.88rem; color: var(--ink-soft); }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--parchment); border-color: var(--ink); }
.tools .spacer { flex: 1; }
.tools input[type=search] { border: 1px solid var(--hairline); background: var(--paper); border-radius: 3px; padding: 0.5rem 0.8rem; min-width: 220px; }
.viewtoggle { display: inline-flex; border: 1px solid var(--hairline); border-radius: 3px; overflow: hidden; }
.viewtoggle button { border: 0; background: none; padding: 0.5rem 0.9rem; cursor: pointer; font-size: 0.9rem; min-height: 44px; }
.viewtoggle button[aria-pressed="true"] { background: var(--ink); color: var(--parchment); }

/* ---------------------------------------------------------------- gallery: a square-tile grid built around the 350x350 portraits
   4 columns on wide screens, 3, 2, then 1 on phones. Each column is at most 350px, so a portrait is shown at
   350x350 or smaller, never upscaled; rows stretch so every tile in a row has the same height. */
/* Bigger art (Chinedu 2026-10-08 11:06): 3 columns on wide screens (about 410px tiles at 1400), 2 on tablets, 1 full-width
   column on phones. The portraits are 350x350, so tiles above 350px are upscaled (slightly soft; see .pic img). */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; row-gap: 0; }
@media (max-width: 1000px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; } }
@media (max-width: 600px) { .gallery { grid-template-columns: minmax(0, 1fr); } }
/* a tile spans 6 rows of the gallery and shares them with its row-mates (subgrid), so every tile in a row has the
   same height and its picture, label, title, success line, terms and footer line up with the others */
.tile { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 6px; margin-bottom: 32px; padding-bottom: 16px; min-width: 0; background: var(--paper); border: 1px solid var(--hairline); border-radius: 6px; overflow: hidden; color: var(--ink); box-shadow: 0 1px 2px rgba(28, 25, 20, 0.06); transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.tile > :not(.pic) { padding: 0 16px; min-width: 0; }
.tile:hover { text-decoration: none; border-color: var(--burgundy); box-shadow: 0 10px 28px -16px rgba(28, 25, 20, 0.4); }
.tile.is-demo { border-style: dashed; }
.pic { position: relative; aspect-ratio: 1; width: 100%; background: var(--parchment-deep); overflow: hidden; }
/* square source in a square box: no crop, no stretch. Upscaling 350px art by a non-integer factor (about 1.2-1.5x):
   smooth scaling ("auto", Chrome/Safari's high-quality filter) looks crisper than nearest-neighbour ("pixelated" /
   "crisp-edges"), which doubles some pixel rows and not others. Still a little soft; sharper needs larger source files. */
.pic img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.badge { position: absolute; left: 10px; top: 10px; background: var(--paper); color: var(--ink); border-radius: 999px; padding: 2px 10px 2px 8px; font-size: 0.78rem; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; box-shadow: 0 1px 2px rgba(28, 25, 20, 0.15); }
.badge i { width: 9px; height: 9px; border-radius: 50%; background: var(--dot, var(--s-draft)); display: inline-block; flex: none; }
.badge.static { position: static; box-shadow: none; border: 1px solid var(--hairline); }
.badge.s-staking { --dot: var(--s-staking); } .badge.s-assigned { --dot: var(--s-assigned); } .badge.s-judging { --dot: var(--s-judging); }
.badge.s-done { --dot: var(--s-done); } .badge.s-failed { --dot: var(--s-failed); } .badge.s-closed { --dot: var(--s-closed); } .badge.s-draft { --dot: var(--s-draft); }
.badge.s-demo { --dot: transparent; } .badge.s-demo i { border: 1.5px dashed var(--ink-soft); }
.tile .label { margin: 8px 0 0; display: flex; align-items: center; gap: 8px; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--burgundy); }
.tile .listbadge { display: none; }
.tile h3 { margin: 0; font-family: var(--font-sans); font-weight: 500; font-size: 1.02rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tile .measure { margin: 0; font-size: 0.84rem; line-height: 1.35; color: var(--ink-soft); }
.mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 4px 16px 0; padding: 10px 0 0 !important; border-top: 1px solid var(--hairline); align-content: start; }
.mini div { min-width: 0; } .mini dt { font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini dd { margin: 1px 0 0; font-size: 0.86rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-foot { margin: 4px 0 0; font-size: 0.8rem; line-height: 1.35; color: var(--muted); align-self: end; }

/* List view: one row per task with a small square thumbnail */
.list { display: grid; gap: 12px; }
.list .tile { grid-row: auto; grid-template-rows: none; grid-template-columns: 112px minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "pic label mini" "pic title mini" "pic measure mini" "pic foot mini"; column-gap: 0; row-gap: 2px; margin: 0; padding: 0; align-content: center; }
.list .pic { grid-area: pic; width: 112px; height: 112px; align-self: start; }
.list .pic .badge { display: none; }
.list .tile .label { grid-area: label; margin: 10px 0 0; padding-left: 18px; }
.list .tile .listbadge { display: inline-flex; position: static; box-shadow: none; padding: 0 6px 0 0; background: transparent; text-transform: none; letter-spacing: 0; color: var(--ink); }
.list .tile h3 { grid-area: title; -webkit-line-clamp: 2; padding-left: 18px; }
.list .tile .measure { grid-area: measure; padding-left: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .tile-foot { grid-area: foot; margin: 0 0 10px; padding-left: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .mini { grid-area: mini; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px 18px 12px 24px; padding: 0 0 0 20px !important; border-top: 0; border-left: 1px solid var(--hairline); align-content: center; }
@media (max-width: 820px) {
  .list .tile { grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "pic label" "pic title" "pic measure" "pic foot"; }
  .list .pic { width: 84px; height: 84px; }
  .list .mini { display: none; }
}
.empty { max-width: 60ch; padding: 40px 0; color: var(--muted); }
.empty h2 { font-family: var(--font-serif); font-weight: 400; font-size: 2.2rem; margin: 0 0 8px; color: var(--ink); }
.source { margin-top: 2.5rem; color: var(--muted); font-size: 0.85rem; }

/* how staking works (list page) */
.how-section { margin-top: clamp(3rem, 8vw, 6rem); padding-top: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--hairline); max-width: 64rem; scroll-margin-top: 6rem; }
.how-section h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 1.5rem; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem 2rem; counter-reset: step; }
.steps li { counter-increment: step; border-top: 1px solid var(--hairline); padding-top: 1rem; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.55; }
.steps li::before { content: counter(step); display: block; font-family: var(--font-serif); font-size: 2.2rem; line-height: 1; color: var(--burgundy); margin-bottom: 0.5rem; }
.steps li b { color: var(--ink); font-weight: 500; }


/* ---------------------------------------------------------------- detail: composed around the 350x350 portrait
   Portrait (with its NFT heading and caption) on the left; title, terms and the Stake box on the right, set to the
   square's height; the long panels below in balanced columns. */
.detail-nav { display: flex; gap: 8px; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.detail-nav .pill { border: 1px solid var(--hairline); background: transparent; border-radius: 999px; padding: 0.3rem 0.9rem; cursor: pointer; font-size: 0.9rem; color: var(--ink); min-height: 44px; }
.detail-nav .pill:hover:not(:disabled) { border-color: var(--ink); }
.detail-nav .pill:disabled { opacity: 0.35; cursor: default; }
.detail { --art: 500px; display: grid; grid-template-columns: var(--art) minmax(0, 1fr); gap: 0 44px; align-items: start; }
@media (max-width: 1240px) { .detail { --art: 420px; } }
.portrait { margin: 0; width: var(--art); }
.portrait .pic { width: var(--art); height: var(--art); border-radius: 6px; box-shadow: 0 1px 2px rgba(28, 25, 20, 0.08), 0 12px 30px -18px rgba(28, 25, 20, 0.5); }
.summary { min-height: var(--art); display: flex; flex-direction: column; gap: 16px; }
.summary header { display: flex; flex-direction: column; gap: 6px; }
.summary .eyebrow { margin: 0; }
.detail h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.8rem, 2.6vw, 2.5rem); line-height: 1.05; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.detail .lead { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 20px; margin: 0; padding: 14px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.terms div { min-width: 0; }
.terms dt { font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.terms dd { margin: 2px 0 0; font-size: 0.92rem; font-weight: 500; }
.terms dd small { display: block; font-weight: 400; font-size: 0.75rem; color: var(--muted); line-height: 1.3; }
.stakebox { margin-top: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: baseline; padding: 14px 18px; background: var(--paper); border: 1px solid var(--hairline); border-left: 3px solid var(--burgundy); border-radius: 6px; }
.stakebox h2, .stakebox h3 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 1.6rem; line-height: 1; }
.stake-body > p { margin: 0 0 0.5em; } .stake-body > p:last-child { margin-bottom: 0; }
.stake-body .btn { margin-top: 2px; }
.detail.is-demo .portrait .pic { outline: 2px dashed var(--ink-soft); outline-offset: 4px; }
.note { border-left: 2px solid var(--burgundy); padding: 2px 0 2px 12px; font-size: 0.9rem; color: var(--ink-soft); margin: 0; }
@media (max-width: 960px) {
  .detail { grid-template-columns: 1fr; gap: 22px; }
  .portrait { width: 100%; max-width: 560px; margin: 0 auto; }
  .portrait .pic { width: 100%; height: auto; }
  .summary { min-height: 0; }
  .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stakebox { grid-template-columns: 1fr; }
}

/* panels: BE cards */
.panel { background: var(--paper); border: 1px solid var(--hairline); border-radius: 6px; padding: 1.25rem 1.4rem; margin-bottom: 24px; box-shadow: 0 1px 2px rgba(28, 25, 20, 0.06); }
.panel h3 { margin: 0 0 0.8rem; font-family: var(--font-serif); font-weight: 400; font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.01em; }
.big-measure { font-family: var(--font-serif); font-style: italic; font-size: 1.6rem; line-height: 1.2; margin: 0 0 6px; color: var(--burgundy); }
.cq h4 { margin: 14px 0 4px; font-size: 0.95rem; font-weight: 500; color: var(--burgundy); }
.cq ul { margin: 0; padding-left: 18px; color: var(--ink-soft); } .cq li { margin: 3px 0; }
.cq li.temp { color: #7a5200; font-style: italic; }
.checks, .kv, .stakers, .timeline { list-style: none; padding: 0; margin: 0; }
.checks li { display: flex; gap: 8px; margin: 6px 0; font-size: 0.9rem; } .ci { width: 18px; flex: none; text-align: center; font-weight: 600; color: #3D6B4F; }
.viol { font-size: 0.8rem; color: var(--burgundy); }
.kv li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hairline); font-size: 0.9rem; } .kv li:last-child { border: 0; }
.kv span { color: var(--muted); } .kv b { font-weight: 500; text-align: right; }
/* stand-in / temporary labels (kept from the previous wall, restyled) */
.ph { color: #6b4a00; font-style: italic; font-weight: 400; font-size: 0.8rem; background: #efe2bf; padding: 1px 6px; border-radius: 3px; }
.stakers li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: 0.9rem; }
.stakers li.picked { background: rgba(61, 107, 79, 0.08); border-radius: 4px; padding: 10px; }
.stakers li .muted.small { display: block; flex-basis: 100%; margin-top: 2px; }
.timeline li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding: 8px 0 8px 14px; border-left: 2px solid var(--burgundy); font-size: 0.9rem; }
.tag { display: inline-block; font-size: 0.75rem; font-weight: 500; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--ink-soft); }
.tag.locked { border-color: var(--s-staking); color: #7a5200; } .tag.picked { border-color: var(--s-assigned); color: var(--s-assigned); } .tag.released { color: var(--muted); }
.muted { color: var(--muted); font-size: 0.85rem; } .hint { color: var(--muted); font-size: 0.85rem; margin: 8px 0 0; }
.small { font-size: 0.82em; }
.stake-row { display: flex; gap: 8px; align-items: center; margin: 10px 0 4px; }
.stake-row input { width: 120px; padding: 0.6rem 0.7rem; border: 1px solid var(--hairline); border-radius: 3px; background: var(--white); }

/* toast, dialog */
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: min(680px, 92vw); background: var(--ink); color: var(--parchment); padding: 12px 16px; border-radius: 4px; box-shadow: 0 12px 32px -12px rgba(28, 25, 20, 0.45); font-size: 0.92rem; z-index: 80; }
#toast[data-kind="error"] { background: var(--burgundy); } #toast[data-kind="ok"] { background: #3D6B4F; }
dialog.auth-card { border: 1px solid var(--hairline); border-radius: 6px; padding: 1.5rem 1.75rem; max-width: 34rem; background: var(--paper); color: var(--ink); box-shadow: 0 18px 40px -18px rgba(28, 25, 20, 0.45); }
dialog::backdrop { background: rgba(28, 25, 20, 0.28); backdrop-filter: blur(5px); }
dialog h2 { margin: 0 0 0.6rem; font-family: var(--font-serif); font-weight: 400; font-size: 2.4rem; line-height: 1.05; }
dialog ol { padding-left: 20px; color: var(--ink-soft); } dialog li { margin: 6px 0; }
.dev-box { border: 2px dashed #8A1C1C; border-radius: 4px; padding: 10px 14px; margin: 14px 0; } .dev-box h3 { margin: 0 0 4px; color: #8A1C1C; font-size: 0.95rem; font-weight: 600; } .dev-box p { font-size: 0.82rem; margin: 0 0 6px; }
.loading, .error { color: var(--muted); } .error { color: var(--burgundy); }
/* Design review M8: the page keeps a screen's height while it loads, so the footer doesn't jump when the content comes. */
#app:has(> .loading) { min-height: 100vh; }
.not-found .entry { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ---------------------------------------------------------------- footer (BE site: ox-blood band) */
.site-footer { background: var(--burgundy); color: var(--parchment); padding: clamp(3rem, 6vw, 5rem) 1rem 2rem; }
.footer-inner { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(12rem, 1fr) 3fr; gap: 3rem 2rem; }
.footer-wordmark { font-family: var(--font-sans); font-weight: 600; font-size: 1.75rem; line-height: 1.05; letter-spacing: 0.01em; color: var(--parchment); }
.footer-wordmark:hover { text-decoration: none; }
.footer-social { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; gap: 1rem; }
.footer-social a { display: inline-flex; align-items: center; height: 22px; color: var(--parchment); opacity: 0.85; transition: opacity 0.2s var(--ease); box-sizing: content-box; padding: 10px; margin: -10px; }
.footer-social a:hover { opacity: 1; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 2rem; }
.footer-heading { margin: 0 0 1rem; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(243, 239, 230, 0.6); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.footer-col a, .footer-col span { font-size: 0.95rem; color: var(--parchment); border-bottom: 1px solid transparent; transition: border-color 0.2s var(--ease); }
.footer-col a { display: inline-block; padding: 0.6rem 0 0.1rem; margin: -0.6rem 0 -0.1rem; } /* S14: 44 px tap targets, same spacing */
.footer-col a:hover { border-bottom-color: var(--parchment); text-decoration: none; }
.site-footer a:focus-visible { outline: 2px solid var(--parchment); outline-offset: 3px; }
.footer-legal { grid-column: 1 / -1; margin: 1rem 0 0; padding-top: 1.5rem; border-top: 1px solid rgba(243, 239, 230, 0.2); font-size: 0.85rem; line-height: 1.6; color: rgba(243, 239, 230, 0.75); }
.footer-copy { display: block; margin-top: 0.4rem; }
@media (min-width: 1100px) { .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .footer-inner { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { order: 2; } .footer-legal { order: 3; }
}
@media (max-width: 959px) {
  .site-header { flex-wrap: wrap; } .wordmark a { font-size: 1.45rem; } .wm-mark { width: 2.6rem; }
  .primary-nav { margin-left: auto; gap: 1.1rem; }
  /* S1/P6: as on the members home, the external link (also in the footer) and the testnet pill are left out on
     smaller screens, and the nav stays on one line (scrolling sideways if it must). */
  .nav-ext, .net { display: none; }
  .primary-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .primary-nav::-webkit-scrollbar { display: none; }
  .nav-link { white-space: nowrap; }
}
@media (max-width: 640px) {
  .site-header { row-gap: 0; padding: 0.6rem 0 0.2rem; }
  /* every link visible on a phone: the one-line sideways-scrolling nav hid "Post a task" and "Sign-ups" off-screen */
  .primary-nav { order: 3; width: 100%; margin-left: 0; min-height: 0; flex-wrap: wrap; overflow-x: visible; row-gap: 0; column-gap: 1.1rem; } .account-nav { margin-left: auto; }
  .site-header.is-scrolled .primary-nav { display: none; }
  .tools input[type=search] { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .tile:hover .pic img { transform: none; }
}

/* Task page, member view (Chinedu 2026-10-08): only what a member needs to decide and act */
.testnet-chip { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--hairline); border-radius: 999px; padding: 1px 8px; }
.summary .posted { margin: 4px 0 0; font-size: 0.85rem; color: var(--muted); }
.summary .lead { margin-top: 10px; }
.success { margin: 0; padding: 12px 0 0; border-top: 1px solid var(--hairline); }
.success span { font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.success p { margin: 2px 0 0; font-family: var(--font-serif); font-style: italic; font-size: 1.35rem; line-height: 1.25; color: var(--burgundy); }
.success small { color: var(--muted); font-size: 0.8rem; }
.terms .wide { grid-column: 1 / -1; }
.terms .wide dd { font-size: 1.05rem; }
.happens { margin: 32px 0 0; padding: 18px 0 0; border-top: 1px solid var(--hairline); }
.happens h2, .owner-box h2, .happens h3, .owner-box h3 { margin: 0 0 12px; font-family: var(--font-serif); font-weight: 400; font-size: 1.6rem; }
.happens ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; }
.happens li { background: var(--paper); border: 1px solid var(--hairline); border-radius: 6px; padding: 14px 16px; }
.happens li b { display: block; font-weight: 500; color: var(--burgundy); margin-bottom: 4px; }
.happens li span { color: var(--ink-soft); }
.owner-box { margin: 28px 0 0; padding: 16px 18px; background: var(--paper); border: 1px solid var(--hairline); border-left: 3px solid var(--burgundy); border-radius: 6px; max-width: 720px; }
.owner-box p { margin: 0 0 10px; }
.pick-list { list-style: none; margin: 0 0 10px; padding: 0; }
.pick-list li { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-top: 1px solid var(--hairline); }
.pick-list li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-list li .tag { flex: none; } /* the "picked" tag is a span too: without this it took half the row and clipped the npub on phones (live-test 41) */
@media (max-width: 960px) { .happens ul { grid-template-columns: 1fr; gap: 10px; } }
/* Bigger art: keep the right column within the portrait's height on wide screens (title to Stake box = the square) */
@media (min-width: 961px) {
  .summary { gap: 12px; }
  .summary .lead { margin-top: 4px; }
  .terms { padding: 10px 0; gap: 8px 20px; }
  .success { padding-top: 10px; }
  /* signed out: the sentence and the button on one row */
  .stake-body:has(> #btn-signin2) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
  .stake-body:has(> #btn-signin2) > p { margin: 0; flex: 1 1 260px; }
  .stake-body:has(> #btn-signin2) .btn { margin: 0; }
  .stakebox { align-items: center; }
}
.success span small { text-transform: none; letter-spacing: 0; font-size: 0.78rem; }
@media (min-width: 961px) { .summary header { gap: 4px; } }

/* The members page (only the approver): pending sign-ups and the read-only roster */
.member-list { list-style: none; margin: 8px 0 0; padding: 0; max-width: 980px; }
.member-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 18px; padding: 12px 0; border-top: 1px solid var(--hairline); }
.member-row .who-col { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.member-row .who-col b { font-weight: 500; }
.member-row .who-col .noname { color: var(--muted); font-weight: 400; font-style: italic; }
.member-row code { font-size: 0.78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-row .priv { font-size: 0.8rem; color: var(--burgundy); font-weight: 500; }
.signups { margin: 8px 0 28px; max-width: 980px; }
.signup-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.signup-actions .btn { margin: 0; min-width: 6.5rem; }
.signup-item .hint { margin: 0 0 8px; }
.approver-box { margin: 18px 0; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: 6px; }
.approver-box h3 { margin: 0 0 6px; }
.approver-box p { margin: 0 0 10px; }
@media (max-width: 640px) { .signup-actions .btn { min-width: 5.5rem; } }
/* Approve/Decline: the question and the outcome are in the page, full width, in readable type */
.signup-meta { font-size: 0.85rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.signup-tag { font-size: 0.78rem; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--muted); }
.signup-tag.is-you { border-color: #3D6B4F; color: #3D6B4F; }
.signup-confirm { margin: 4px 0 14px; padding: 14px 16px; border: 2px solid var(--burgundy); border-radius: 6px; background: var(--paper); }
.signup-confirm p { margin: 0 0 12px; font-size: 1.05rem; line-height: 1.45; color: var(--ink); }
.signup-confirm-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.signup-confirm-actions .btn { margin: 0; min-height: 44px; font-size: 1rem; }
.signup-note { margin: 4px 0 14px; padding: 12px 14px; border-radius: 6px; font-size: 1.02rem; line-height: 1.45; color: var(--parchment); background: var(--ink); overflow-wrap: anywhere; }
.signup-note[data-kind="error"] { background: var(--burgundy); } .signup-note[data-kind="ok"] { background: #3D6B4F; }
@media (max-width: 640px) {
  .signup-item .member-row { grid-template-columns: minmax(0, 1fr); }
  .signup-actions { justify-content: stretch; } .signup-actions .btn { flex: 1; min-height: 44px; font-size: 1rem; }
  .signup-confirm-actions .btn { flex: 1; }
  /* toast: full width, readable, wraps */
  #toast { left: 8px; right: 8px; bottom: 12px; transform: none; max-width: none; font-size: 1rem; line-height: 1.45; padding: 14px 16px; overflow-wrap: anywhere; }
}
/* one-tap relay add (typed-cspo 0.5.15): Buzz-1's answer under an approved application */
.relay-line { margin: 2px 0 12px; font-size: 0.95rem; line-height: 1.5; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.relay-badge { font-size: 0.78rem; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--hairline); }
.relay-line[data-kind="ok"] .relay-badge { border-color: #3D6B4F; color: #3D6B4F; }
.relay-line[data-kind="error"] .relay-badge { border-color: #9a3b2e; color: #9a3b2e; }
.relay-why { color: var(--muted); font-size: 0.85rem; }
.relay-line .btn.small { padding: 4px 10px; font-size: 0.85rem; }

/* ---------------------------------------------------------------- member task posting (typed-cspo 0.5.17, decision 44) */
:root { --s-funding: #3F6E8C; }
.badge.s-funding { --dot: var(--s-funding); }
.post-form { max-width: 760px; display: grid; gap: 18px; margin: 0 0 36px; }
.post-form fieldset { border: 1px solid var(--hairline); border-radius: 6px; background: var(--paper); padding: 14px 18px 6px; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; }
.post-form legend { font-family: var(--font-serif); font-size: 1.35rem; padding: 0 6px; margin-left: -6px; }
.post-form legend small, .post-form label small { font-family: var(--font-sans); font-size: 0.78rem; color: var(--muted); font-weight: 400; }
.post-form fieldset > .hint { grid-column: 1 / -1; margin: 0 0 8px; }
.post-form .field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; min-width: 0; }
.post-form .field[data-field="title"], .post-form .field[data-field="note"] { grid-column: 1 / -1; }
.post-form label { font-weight: 500; font-size: 0.92rem; }
.post-form input, .post-form textarea { width: 100%; padding: 0.6rem 0.7rem; border: 1px solid rgba(28, 25, 20, 0.28); border-radius: 3px; background: var(--white); font: inherit; min-height: 44px; }
.post-form textarea { resize: vertical; min-height: 64px; }
.post-form .field .hint { margin: 0; font-size: 0.8rem; color: var(--muted); }
.post-form .has-error input, .post-form .has-error textarea { border-color: var(--burgundy); box-shadow: 0 0 0 1px var(--burgundy); }
.field-error { margin: 0; color: var(--burgundy); font-size: 0.85rem; font-weight: 500; }
.ok-line { margin: 0; color: var(--s-done); font-weight: 500; }
.post-next { border-left: 3px solid var(--s-funding); padding: 4px 0 4px 16px; }
.post-next h2 { font-family: var(--font-serif); font-weight: 400; font-size: 1.35rem; margin: 0 0 6px; }
.post-next ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 4px; color: var(--ink-soft); }
.post-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.post-done h1 { color: var(--s-judging); }
.my-posts { max-width: 760px; margin: 8px 0 40px; }
.my-posts h2, .post-review h2 { font-family: var(--font-serif); font-weight: 400; font-size: 1.6rem; margin: 0 0 8px; }
.post-review h2 sup { font-family: var(--font-sans); font-size: 0.8rem; color: var(--muted); }
.my-posts ul, .post-cards, .owed-list { list-style: none; margin: 0; padding: 0; }
.my-posts li a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hairline); color: var(--ink); text-decoration: none !important; }
.my-posts li img, .my-posts .ph { width: 56px; height: 56px; border-radius: 4px; background: var(--parchment-deep); object-fit: cover; }
.my-posts li span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.my-posts li b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-posts li small { color: var(--muted); }
.post-review { max-width: 980px; margin: 8px 0 30px; }
.post-card { border: 1px solid var(--hairline); border-radius: 6px; background: var(--paper); padding: 14px 16px; margin: 0 0 12px; }
.post-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 0 0 6px; }
.post-card header b { font-weight: 600; font-size: 1.05rem; }
.post-card p { margin: 0 0 6px; }
.post-card .post-from { font-size: 0.85rem; color: var(--muted); overflow-wrap: anywhere; }
.post-card .private { background: var(--parchment-deep); padding: 0 4px; border-radius: 3px; }
.post-card .row-actions { display: flex; gap: 10px; margin: 10px 0 0; }
.post-card.compact pre { margin: 6px 0 0; overflow-x: auto; }
.owed-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--hairline); }
.owed-row img { border-radius: 4px; }
.owed-row small { color: var(--muted); }
.owed-row code { word-break: break-all; }
.owed-row .links { margin: 6px 0 0; display: flex; gap: 14px; font-size: 0.88rem; }
.owed-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; max-width: 180px; }
.owed-row > .signup-note { grid-column: 1 / -1; }
.calldata { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; margin: 8px 0 0; font-size: 0.82rem; }
.calldata dt { color: var(--muted); } .calldata dd { margin: 0; }
code.wrap { display: block; white-space: normal; word-break: break-all; }
details summary { cursor: pointer; color: var(--burgundy); font-size: 0.88rem; margin-top: 6px; }
.portrait-cap { display: flex; flex-direction: column; gap: 2px; margin: 10px 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.portrait-cap b { font-weight: 600; color: var(--ink); }
.portrait-cap .links { display: flex; gap: 14px; margin-top: 2px; }
.funding { border-left-color: var(--s-funding); }
.fund-steps { margin: 0 0 10px; padding-left: 1.2rem; display: grid; gap: 4px; }
@media (max-width: 640px) {
  .owed-row { grid-template-columns: 56px minmax(0, 1fr); }
  .owed-row img { width: 56px; height: 56px; }
  .owed-actions { grid-column: 1 / -1; align-items: stretch; text-align: left; max-width: none; }
  .post-card header { flex-direction: column; }
}

/* ---------------------------------------------------------------- the task privilege on the members page (decisions 38, 45) */
.member-row .priv-col { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; text-align: right; }
.member-row .priv-col .priv { font-size: 0.85rem; }
.member-row .priv-none { font-size: 0.85rem; color: var(--muted); }
.member-row.has-priv { box-shadow: inset 3px 0 0 var(--burgundy); padding-left: 12px; }
.member-row .priv-ask { grid-column: 1 / -1; justify-content: space-between; text-align: left; padding: 10px 12px; border: 2px solid var(--burgundy); border-radius: 6px; background: var(--paper); }
.member-row .priv-ask p { margin: 0; flex: 1 1 260px; }
.member-row > .signup-note { grid-column: 1 / -1; margin: 0; }
.priv-intro { max-width: 760px; }
@media (max-width: 640px) {
  .member-row { grid-template-columns: minmax(0, 1fr); }
  .member-row .priv-col { justify-content: space-between; }
}

/* Phones: every button and filter chip is at least 44px tall (Apple's minimum tap size); desktop is unchanged. */
@media (pointer: coarse), (max-width: 640px) { .btn, .chip { min-height: 44px; } }