/* Steel Yard — the public site's .paw-* layer, copied from src/app/globals.css
   in pup-id/Collr. This is what the homepage, the community directory, auth,
   the legal pages and public profiles are made of.

   Three motifs make it Steel Yard: the hazard stripe, the stamp shadow, and
   the taped label. Square corners (2px), Anton uppercase display, mono spec
   labels, one accent — the Collr red. No gradients, no secondary accents,
   no entrance animations, nothing moves on hover. */

/* ── Motifs ───────────────────────────────────────────────────────────── */

/* Hi-vis diagonal. 10px at the top of a page, 6px on mobile and narrow panels. */
.paw-hazard{height:10px;background:repeating-linear-gradient(-45deg,var(--paw-signal) 0 14px,var(--paw-ink) 14px 28px)}
.paw-hazard-sm{height:6px;background:repeating-linear-gradient(-45deg,var(--paw-signal) 0 10px,var(--paw-ink) 10px 20px)}

/* One sheet of film grain over the viewport at 4%: it breaks up the large flat
   blacks that band on cheap panels and takes the digital sheen off the page. */
.paw-grain::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E")}
.light .paw-grain::after{opacity:0.015}

/* Halftone dot field, behind heroes, auth panels and profile pages. */
.paw-dot-grid{background-image:radial-gradient(rgba(255,255,255,0.16) 1px,transparent 1px);background-size:18px 18px}

/* Engineer's grid paper, the quieter texture. */
.paw-grid-paper{background-image:linear-gradient(to right,rgba(255,255,255,0.045) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,0.045) 1px,transparent 1px);background-size:28px 28px}

/* Taped label: a small rotated block sticker, used sparingly. Two variants —
   paper on ink, and red on white text. */
.paw-taped{display:inline-block;padding:6px 12px;font-family:var(--font-paw-mono);font-weight:700;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;background:var(--paw-paper);color:var(--paw-ink);transform:rotate(-5deg)}
.paw-taped-wide{transform:rotate(-1.5deg);letter-spacing:0.14em}
.paw-taped-signal{background:var(--paw-signal);color:#fff}

/* ── Type ─────────────────────────────────────────────────────────────── */

.paw-display{font-family:var(--font-paw-display);font-weight:400;text-transform:uppercase;letter-spacing:0.005em;line-height:1.02}
.paw-heading{font-family:var(--font-paw-display);font-weight:400;text-transform:uppercase;letter-spacing:0.005em;line-height:1.06}
.paw-eyebrow{font-family:var(--font-paw-mono);font-size:0.625rem;font-weight:400;text-transform:uppercase;letter-spacing:0.18em;color:var(--paw-signal)}

/* ── Surfaces ─────────────────────────────────────────────────────────── */

.paw-panel{background:var(--paw-panel);border:1px solid var(--paw-line-strong);border-radius:2px}
.paw-card-accent{position:relative;overflow:hidden}
.paw-card-accent::before{content:"";position:absolute;inset:0 0 0 0;width:3px;background:var(--paw-signal)}

/* A panel's titled header bar: red-on-red for the primary panel on a page… */
.paw-panel-head{background:var(--paw-signal);color:#fff;font-family:var(--font-paw-mono);font-weight:700;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;padding:9px 16px}
/* …or bordered, for every other panel. */
.paw-panel-head-quiet{font-family:var(--font-paw-mono);font-weight:700;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--paw-signal);padding:14px 18px;border-bottom:1px solid var(--paw-line)}

/* Product screenshots get a hairline frame with a 14px mat — a plate the photo
   sits inside, not a phone bezel. */
.paw-shot-frame{border:1px solid var(--paw-line-strong);background:var(--paw-panel);padding:14px}

/* ── Controls ─────────────────────────────────────────────────────────── */

.paw-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;background:var(--paw-signal);color:#fff;border-radius:2px;font-family:var(--font-paw-mono);font-weight:700;font-size:0.6875rem;text-transform:uppercase;letter-spacing:0.12em;padding:0.8125rem 1.25rem;transition:transform 160ms ease,background-color 160ms ease}
.paw-btn:hover{background:var(--paw-signal-deep)}
.paw-btn:active{transform:scale(0.97)}
.paw-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;background:transparent;color:var(--paw-steel-dim);border:1px solid var(--paw-line-strong);border-radius:2px;font-family:var(--font-paw-mono);font-weight:700;font-size:0.6875rem;text-transform:uppercase;letter-spacing:0.12em;padding:0.8125rem 1.25rem;transition:border-color 160ms ease,color 160ms ease}
.paw-btn-ghost:hover{border-color:var(--paw-signal);color:var(--paw-paper);background:var(--paw-panel)}

.paw-field{width:100%;height:2.75rem;background:var(--paw-ink);border:1px solid var(--paw-line-strong);border-radius:2px;padding:0 0.75rem;font-family:var(--font-paw-mono);font-size:0.8125rem;color:var(--paw-paper);transition:border-color 160ms ease}
.paw-field::placeholder{color:var(--paw-steel-faint)}
.paw-field:focus{outline:none;border-color:var(--paw-signal)}
.paw-label{font-family:var(--font-paw-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.16em;color:var(--paw-steel-faint)}

/* Checkboxes and radios follow the accent. */
input[type="checkbox"],input[type="radio"]{accent-color:var(--paw-signal)}

/* The one emphasised input on the site: the handle claim. 2px red border, a
   mono collr.app/ prefix, submit flush inside the border on desktop and
   stacked full-width below 640px. */
.paw-handle-claim{display:flex;align-items:stretch;border:2px solid var(--paw-signal);border-radius:2px;background:var(--paw-ink)}
.paw-handle-claim input{min-width:0;flex:1;background:transparent;border:0;outline:none;color:var(--paw-paper);font-family:var(--font-paw-mono);font-size:15px;padding:16px 0}
.paw-handle-claim input::placeholder{color:var(--paw-steel-faint)}
@media (max-width:639px){.paw-handle-claim{flex-wrap:wrap}.paw-handle-claim input{flex-basis:100%}.paw-handle-claim button{flex:1 1 100%;border-top:2px solid var(--paw-signal);padding-top:14px;padding-bottom:14px}}

/* ── Badges, chips, states ────────────────────────────────────────────── */

/* Square outlined box, replacing every rounded-full pill. Colour and wash are
   set per instance with --paw-badge-color / --paw-badge-wash. */
.paw-badge-box{display:inline-flex;align-items:center;border:1px solid var(--paw-badge-color,var(--paw-steel-dim));background:var(--paw-badge-wash,transparent);padding:5px 9px;font-family:var(--font-paw-mono);font-weight:700;font-size:0.625rem;text-transform:uppercase;letter-spacing:0.14em;color:var(--paw-badge-color,var(--paw-steel-dim));transition:color 160ms ease}
.paw-badge-box:hover{color:var(--paw-paper)}
/* Solid fill — the profile page's own role stamp. */
.paw-badge-stamp{display:inline-flex;align-items:center;background:var(--paw-badge-color,var(--paw-signal));color:#fff;padding:5px 10px;font-family:var(--font-paw-mono);font-weight:700;font-size:0.625rem;text-transform:uppercase;letter-spacing:0.14em}
.paw-role-chip{display:inline-flex;align-items:center;border:1px solid var(--paw-line-strong);border-radius:2px;padding:0.3rem 0.75rem;font-family:var(--font-paw-mono);font-size:0.625rem;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--paw-steel);transition:border-color 160ms ease,color 160ms ease}
.paw-role-chip:hover{border-color:var(--paw-signal);color:var(--paw-paper)}

.paw-empty-state{border:1px dashed var(--paw-line-strong);background:#0f0f0f;padding:2.125rem 1.5rem;text-align:center}
.paw-empty-state p{margin:0;font-family:var(--font-paw-mono);font-size:0.6875rem;line-height:1.8;letter-spacing:0.14em;text-transform:uppercase;color:var(--paw-steel-faint)}

/* ── Member profile link buttons ──────────────────────────────────────── */

/* Load-bearing for the member theme system: the style a member picks in
   Design → Buttons. --paw-link-accent is set per theme; the base class only
   points it at the site red. Stamp is Steel Yard's default. */
.paw-link-btn{--paw-link-accent:var(--paw-signal)}
.paw-link-btn--solid{border-color:var(--paw-line-strong);background:rgba(19,17,16,0.75)}
.paw-link-btn--solid:hover{border-color:color-mix(in srgb,var(--paw-link-accent) 55%,transparent);background:var(--paw-ink-raised)}
.paw-link-btn--solid-highlight{border-color:color-mix(in srgb,var(--paw-link-accent) 60%,transparent);background:color-mix(in srgb,var(--paw-link-accent) 15%,transparent)}
.paw-link-btn--solid-highlight:hover{border-color:color-mix(in srgb,var(--paw-link-accent) 85%,transparent);background:color-mix(in srgb,var(--paw-link-accent) 25%,transparent)}
.paw-link-btn--outline{border-color:var(--paw-line-strong);background:transparent}
.paw-link-btn--outline:hover{border-color:var(--paw-link-accent);background:color-mix(in srgb,var(--paw-link-accent) 8%,transparent)}
.paw-link-btn--stamp{border:1.5px solid var(--paw-link-accent);background:transparent;box-shadow:3px 3px 0 color-mix(in srgb,var(--paw-link-accent) 35%,transparent);transition:transform 120ms ease,box-shadow 120ms ease,background-color 120ms ease}
.paw-link-btn--stamp:hover{background:color-mix(in srgb,var(--paw-link-accent) 12%,transparent)}
.paw-link-btn--stamp:active{transform:translate(3px,3px);box-shadow:0 0 0 color-mix(in srgb,var(--paw-link-accent) 35%,transparent)}
.paw-link-btn--stamp-highlight{border:1.5px solid color-mix(in srgb,var(--paw-link-accent) 80%,black);background:var(--paw-link-accent);box-shadow:3px 3px 0 color-mix(in srgb,var(--paw-link-accent) 65%,black);transition:transform 120ms ease,box-shadow 120ms ease,filter 120ms ease}
.paw-link-btn--stamp-highlight:hover{filter:brightness(1.08)}
.paw-link-btn--stamp-highlight:active{transform:translate(3px,3px);box-shadow:0 0 0 color-mix(in srgb,var(--paw-link-accent) 65%,black)}

/* ── Accordion ────────────────────────────────────────────────────────── */

.paw-accordion{border:1px solid var(--paw-line-strong)}
.paw-accordion-item{background:var(--paw-ink-raised);border-bottom:1px solid var(--paw-line)}
.paw-accordion-item:last-child{border-bottom:0}
.paw-accordion-item.active{background:#0f0f0f}
.paw-accordion-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:1rem;padding:1.125rem 1.25rem;text-align:left;font-family:var(--font-paw-display);font-weight:400;font-size:1.1875rem;text-transform:uppercase;letter-spacing:0.005em;color:var(--paw-paper)}
.paw-accordion-toggle:hover{color:var(--paw-signal)}
.paw-accordion-item.active .paw-accordion-toggle{color:#fff}
.paw-accordion-chevron{color:var(--paw-steel-faint);transition:transform 160ms ease}
.paw-accordion-item.active .paw-accordion-chevron{transform:rotate(180deg);color:var(--paw-signal)}
.paw-accordion-body{padding:0 1.25rem 1.125rem;max-width:42rem;font-size:0.875rem;line-height:1.6;color:var(--paw-steel-dim)}

/* ── Site nav (mobile) ────────────────────────────────────────────────── */

.paw-nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:2px;border:1px solid var(--paw-line-strong);color:var(--paw-steel);transition:border-color 160ms ease,color 160ms ease}
.paw-nav-toggle:hover,.paw-nav-toggle.open{border-color:var(--paw-signal);color:#fff}
.paw-nav-mobile{display:none;flex-direction:column;border-top:1px solid var(--paw-line)}
.paw-nav-mobile.open{display:flex}
.paw-nav-mobile-link{padding:14px 18px;border-bottom:1px solid var(--paw-line);font-family:var(--font-paw-mono);font-size:0.75rem;letter-spacing:0.12em;color:var(--paw-steel-dim);transition:color 160ms ease}
.paw-nav-mobile-link:hover{color:var(--paw-paper)}

/* Links, where a page has not styled them itself. */
a.paw-link{color:var(--paw-signal-text,#ff5c62);text-decoration:underline;text-underline-offset:2px}
a.paw-link:hover{color:var(--paw-paper)}