/* ==========================================================================
   Pixel Counsel — front-of-site design system
   --------------------------------------------------------------------------
   The monochrome editorial language used by the home page, the marketplace
   (Find Talent / Post a Gig), the submission forms and the talent profile.

   Every selector is `pc-` prefixed on purpose. layouts/app.blade.php carries a
   large block of inline CSS for the header and footer, and several pages
   define their own `.btn-primary`, `.feature-card` and friends. The prefix is
   what lets this file load alongside all of it without touching any of it.

   Sections
     1. Tokens
     2. Layout primitives
     3. Type
     4. Buttons and links
     5. Surfaces: cards, bands, media
     6. Chips, pills, stats, stars
     7. Forms
     8. Navigation: sub-nav, tabs, steps
     9. Modal
    10. Responsive
   ========================================================================== */

/* -- 1. Tokens ----------------------------------------------------------- */

:root {
    /* Ink runs from near-black to the faint grey used for meta lines. Four
       steps, not a continuum — more than this and the page stops reading as
       one system. */
    --pc-ink: #101010;
    --pc-ink-soft: #3d3d3d;
    --pc-muted: #6e6e6e;
    --pc-faint: #9a9a9a;

    --pc-line: #e4e4e0;
    --pc-line-soft: #efefec;

    --pc-surface: #ffffff;
    --pc-surface-alt: #f6f6f3;
    --pc-surface-sunk: #fafaf8;

    /* The single accent: the pale sage behind the "Post a gig" band and the
       reassurance box in the hire modal. Used sparingly and never for text
       on white — --pc-accent-deep is the readable form. */
    --pc-accent: #e2e8d5;
    --pc-accent-soft: #eef2e7;
    --pc-accent-deep: #5f6f48;

    --pc-danger: #b42318;
    --pc-success: #2f6b43;

    --pc-radius-sm: 6px;
    --pc-radius: 10px;
    --pc-radius-lg: 16px;
    --pc-radius-pill: 999px;

    --pc-shell: 1280px;
    --pc-gutter: 2rem;

    --pc-shadow-sm: 0 1px 2px rgba(16, 16, 16, .05);
    --pc-shadow: 0 8px 24px rgba(16, 16, 16, .07);
    --pc-shadow-lg: 0 24px 64px rgba(16, 16, 16, .16);

    --pc-ease: cubic-bezier(.2, .7, .3, 1);
}

/* -- 2. Layout primitives ------------------------------------------------ */

.pc-shell {
    max-width: var(--pc-shell);
    margin: 0 auto;
    padding: 0 var(--pc-gutter);
}

.pc-shell-narrow {
    max-width: 1080px;
}

/* Vertical rhythm. The design breathes: sections are generously spaced and
   the scale steps down on small screens rather than collapsing. */
.pc-section {
    padding: 4.5rem 0;
}

.pc-section-tight {
    padding: 3rem 0;
}

.pc-section-alt {
    background: var(--pc-surface-alt);
}

.pc-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.pc-section-head > div {
    min-width: 0;
}

.pc-stack > * + * {
    margin-top: 1rem;
}

.pc-grid {
    display: grid;
    gap: 1.25rem;
}

.pc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* The recurring "form on the left, helper rail on the right" shape shared by
   Submit and Post a Gig. */
.pc-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1.5rem;
    align-items: start;
}

.pc-split-wide {
    grid-template-columns: minmax(0, 1fr) 22.5rem;
}

.pc-divider {
    height: 1px;
    background: var(--pc-line);
    border: 0;
    margin: 2rem 0;
}

/* -- 3. Type ------------------------------------------------------------- */

/* Small uppercase label above a heading. The design uses it on nearly every
   section, which is what ties the pages together. */
.pc-eyebrow {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--pc-muted);
    margin-bottom: .875rem;
}

.pc-display,
.pc-h1,
.pc-h2,
.pc-h3 {
    color: var(--pc-ink);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.08;
}

.pc-display {
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    letter-spacing: -.035em;
}

.pc-h1 {
    font-size: clamp(2.125rem, 4vw, 3rem);
    letter-spacing: -.03em;
}

.pc-h2 {
    font-size: clamp(1.625rem, 2.6vw, 2.125rem);
    letter-spacing: -.025em;
}

.pc-h3 {
    font-size: 1.125rem;
    line-height: 1.3;
    letter-spacing: -.01em;
}

/* The second line of a two-tone headline: "Find creative talent / for your
   next gig." — same size, lighter ink. */
.pc-display-soft,
.pc-h1-soft {
    color: var(--pc-faint);
}

.pc-lead {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--pc-muted);
    max-width: 44rem;
}

.pc-body {
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--pc-ink-soft);
}

.pc-meta {
    font-size: .8125rem;
    color: var(--pc-muted);
}

.pc-muted { color: var(--pc-muted); }
.pc-faint { color: var(--pc-faint); }

/* The handwritten accents ("Great creatives. Greater tomorrows."). Caveat is
   loaded by layouts/app.blade.php; the fallbacks keep the line readable and
   roughly the right width if it fails. */
.pc-script {
    font-family: 'Caveat', 'Segoe Script', cursive;
    font-size: 1.75rem;
    line-height: 1.15;
    color: var(--pc-ink);
    transform: rotate(-3deg);
}

.pc-script-underline {
    display: block;
    width: 4.5rem;
    height: 2px;
    background: var(--pc-ink);
    border-radius: 2px;
    margin-top: .25rem;
}

/* -- 4. Buttons and links ------------------------------------------------ */

.pc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    padding: .875rem 1.5rem;
    border: 1px solid var(--pc-ink);
    border-radius: var(--pc-radius-sm);
    background: var(--pc-ink);
    color: #fff;
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s var(--pc-ease), color .2s var(--pc-ease),
                border-color .2s var(--pc-ease), transform .2s var(--pc-ease);
}

.pc-btn:hover {
    background: #2b2b2b;
    border-color: #2b2b2b;
    color: #fff;
}

.pc-btn:active { transform: translateY(1px); }

.pc-btn:focus-visible {
    outline: 2px solid var(--pc-ink);
    outline-offset: 2px;
}

.pc-btn[disabled],
.pc-btn[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

.pc-btn-ghost {
    background: transparent;
    color: var(--pc-ink);
    border-color: var(--pc-line);
}

.pc-btn-ghost:hover {
    background: var(--pc-surface-alt);
    border-color: var(--pc-ink);
    color: var(--pc-ink);
}

.pc-btn-light {
    background: #fff;
    color: var(--pc-ink);
    border-color: #fff;
}

.pc-btn-light:hover {
    background: var(--pc-surface-alt);
    border-color: var(--pc-surface-alt);
    color: var(--pc-ink);
}

/* On a dark band: outlined in white rather than filled. */
.pc-btn-outline-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .5);
}

.pc-btn-outline-light:hover {
    background: rgba(255, 255, 255, .1);
    border-color: #fff;
    color: #fff;
}

.pc-btn-sm {
    padding: .625rem 1.125rem;
    font-size: .875rem;
}

.pc-btn-lg {
    padding: 1rem 1.75rem;
    font-size: 1rem;
}

.pc-btn-block {
    display: flex;
    width: 100%;
}

/* The small square icon button used for Share / Save / carousel arrows. */
.pc-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-pill);
    background: #fff;
    color: var(--pc-ink);
    cursor: pointer;
    transition: background .2s var(--pc-ease), border-color .2s var(--pc-ease);
}

.pc-icon-btn:hover {
    background: var(--pc-surface-alt);
    border-color: var(--pc-ink);
}

.pc-icon-btn[disabled] {
    opacity: .35;
    cursor: not-allowed;
}

/* "View all talent →" — a quiet text link that gains an underline on hover. */
.pc-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--pc-ink);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.pc-link:hover { text-decoration: underline; }

.pc-link-quiet {
    color: var(--pc-muted);
    font-weight: 500;
}

.pc-link-quiet:hover { color: var(--pc-ink); }

/* -- 5. Surfaces --------------------------------------------------------- */

.pc-card {
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius);
    padding: 1.5rem;
}

.pc-card-flush { padding: 0; overflow: hidden; }
.pc-card-alt { background: var(--pc-surface-alt); border-color: transparent; }
.pc-card-sunk { background: var(--pc-surface-sunk); }

/* Only interactive cards lift. A card that is not a link must not imply it is
   one by moving under the cursor. */
a.pc-card,
.pc-card-hover {
    transition: border-color .2s var(--pc-ease), box-shadow .2s var(--pc-ease),
                transform .2s var(--pc-ease);
}

a.pc-card:hover,
.pc-card-hover:hover {
    border-color: var(--pc-ink);
    box-shadow: var(--pc-shadow);
    transform: translateY(-2px);
}

.pc-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pc-ink);
    letter-spacing: -.01em;
    margin-bottom: .25rem;
}

/* The full-bleed pale-sage band ("Post a gig and get the right talent"). */
.pc-band {
    background: var(--pc-accent);
    border-radius: var(--pc-radius);
    padding: 2.5rem;
    overflow: hidden;
    position: relative;
}

.pc-band-dark {
    background: var(--pc-ink);
    color: #fff;
}

.pc-band-dark .pc-h2,
.pc-band-dark .pc-h3 { color: #fff; }

.pc-band-dark .pc-eyebrow { color: rgba(255, 255, 255, .6); }
.pc-band-dark .pc-lead,
.pc-band-dark .pc-body { color: rgba(255, 255, 255, .75); }

.pc-band-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
}

/* The reassurance box in the hire modal. */
.pc-note {
    display: flex;
    gap: .875rem;
    background: var(--pc-accent-soft);
    border-radius: var(--pc-radius-sm);
    padding: 1rem 1.125rem;
}

.pc-note svg { flex-shrink: 0; color: var(--pc-accent-deep); }
.pc-note-title { font-size: .875rem; font-weight: 600; color: var(--pc-ink); margin-bottom: .1875rem; }
.pc-note-body { font-size: .8125rem; line-height: 1.55; color: var(--pc-ink-soft); margin: 0; }

.pc-note-plain { background: var(--pc-surface-alt); }
.pc-note-plain svg { color: var(--pc-muted); }

/* Images. The design's photography is uniformly duotone-grey; media boxes
   carry the placeholder tone so a missing image never leaves a white hole. */
.pc-media {
    background: var(--pc-surface-alt);
    overflow: hidden;
    position: relative;
}

.pc-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pc-media-4x3 { aspect-ratio: 4 / 3; }
.pc-media-16x9 { aspect-ratio: 16 / 9; }
.pc-media-1x1 { aspect-ratio: 1 / 1; }

.pc-avatar {
    border-radius: var(--pc-radius-pill);
    object-fit: cover;
    background: var(--pc-surface-alt);
    display: block;
    flex-shrink: 0;
}

/* A dotted outline for a section with nothing in it yet. Reads as "this will
   fill in", not as a broken layout. */
.pc-empty {
    border: 1px dashed var(--pc-line);
    border-radius: var(--pc-radius);
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--pc-muted);
    font-size: .9375rem;
}

.pc-empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pc-ink-soft);
    margin-bottom: .375rem;
}

/* -- 6. Chips, pills, stats, stars --------------------------------------- */

.pc-chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .375rem .75rem;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-sm);
    background: var(--pc-surface-alt);
    color: var(--pc-ink-soft);
    font-size: .8125rem;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
}

a.pc-chip:hover { border-color: var(--pc-ink); color: var(--pc-ink); }

.pc-chip-solid {
    background: var(--pc-ink);
    border-color: var(--pc-ink);
    color: #fff;
}

.pc-chip-outline { background: transparent; }

.pc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* The "Available for work" badge that overlaps the profile avatar. */
.pc-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    padding: .375rem .75rem;
    border-radius: var(--pc-radius-pill);
    background: #fff;
    border: 1px solid var(--pc-line);
    box-shadow: var(--pc-shadow-sm);
    font-size: .75rem;
    font-weight: 600;
    color: var(--pc-ink);
    white-space: nowrap;
}

.pc-status-dot {
    width: .4375rem;
    height: .4375rem;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.pc-status-available { color: var(--pc-success); }
.pc-status-open_to_offers { color: #1f6f8b; }
.pc-status-not_available { color: var(--pc-faint); }

/* The icon + number + caption strip under the hero. */
.pc-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    border-top: 1px solid var(--pc-line);
    border-bottom: 1px solid var(--pc-line);
}

.pc-stat {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: 1.5rem 1.25rem;
}

.pc-stat + .pc-stat { border-left: 1px solid var(--pc-line); }
.pc-stat svg { color: var(--pc-ink); flex-shrink: 0; }
.pc-stat-value { font-size: 1.125rem; font-weight: 700; color: var(--pc-ink); line-height: 1.2; }
.pc-stat-label { font-size: .8125rem; color: var(--pc-muted); line-height: 1.35; }

/* The bigger figures on the home hero (5K+ / 10K+ / 200+ / 1K+). */
.pc-figure-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 1.5rem;
}

.pc-figure-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--pc-ink);
    letter-spacing: -.02em;
    line-height: 1.1;
}

.pc-figure-label {
    font-size: .8125rem;
    color: var(--pc-muted);
    margin-top: .1875rem;
}

.pc-stars {
    display: inline-flex;
    align-items: center;
    gap: .125rem;
    color: var(--pc-ink);
    line-height: 1;
}

.pc-stars svg { display: block; }
.pc-star-empty { color: var(--pc-line); }

.pc-rating {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .875rem;
    color: var(--pc-ink);
}

.pc-rating-count { color: var(--pc-muted); }

/* -- 7. Forms ------------------------------------------------------------ */

.pc-field { margin-bottom: 1.25rem; }

.pc-label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pc-ink);
    margin-bottom: .5rem;
}

.pc-label .pc-req { color: var(--pc-ink); }
.pc-label .pc-opt { color: var(--pc-muted); font-weight: 400; }

.pc-input,
.pc-select,
.pc-textarea {
    display: block;
    width: 100%;
    padding: .75rem .875rem;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-sm);
    background: #fff;
    color: var(--pc-ink);
    font: inherit;
    font-size: .9375rem;
    line-height: 1.5;
    transition: border-color .2s var(--pc-ease), box-shadow .2s var(--pc-ease);
}

.pc-input::placeholder,
.pc-textarea::placeholder { color: var(--pc-faint); }

.pc-input:focus,
.pc-select:focus,
.pc-textarea:focus {
    outline: none;
    border-color: var(--pc-ink);
    box-shadow: 0 0 0 3px rgba(16, 16, 16, .07);
}

.pc-textarea {
    min-height: 8.5rem;
    resize: vertical;
}

/* Native arrow off, ours on — otherwise the control does not match the rest
   of the form on Windows. */
.pc-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e6e6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .875rem center;
    padding-right: 2.5rem;
}

.pc-input-invalid,
.pc-select-invalid,
.pc-textarea-invalid { border-color: var(--pc-danger); }

.pc-error {
    display: block;
    font-size: .8125rem;
    color: var(--pc-danger);
    margin-top: .375rem;
}

.pc-hint {
    display: block;
    font-size: .8125rem;
    color: var(--pc-muted);
    margin-top: .375rem;
}

/* The "0/1000" counter sitting inside the bottom-right of a textarea. */
.pc-counter-wrap { position: relative; }

.pc-counter {
    position: absolute;
    right: .75rem;
    bottom: .625rem;
    font-size: .75rem;
    color: var(--pc-faint);
    background: #fff;
    padding-left: .375rem;
    pointer-events: none;
}

.pc-counter-over { color: var(--pc-danger); }

.pc-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.pc-field-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* An input with a leading icon (search, date, location). */
.pc-input-icon { position: relative; }

.pc-input-icon svg {
    position: absolute;
    left: .875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pc-muted);
    pointer-events: none;
}

.pc-input-icon .pc-input { padding-left: 2.625rem; }

.pc-checkbox {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: .875rem;
    color: var(--pc-ink-soft);
    line-height: 1.5;
    cursor: pointer;
}

.pc-checkbox input {
    width: 1.125rem;
    height: 1.125rem;
    margin: .125rem 0 0;
    accent-color: var(--pc-ink);
    flex-shrink: 0;
    cursor: pointer;
}

.pc-checkbox a { color: var(--pc-ink); text-decoration: underline; }

/* Segmented choice, e.g. Project Type on the gig wizard. */
.pc-segment {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.pc-segment label { display: inline-flex; }

.pc-segment input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pc-segment span {
    display: inline-block;
    padding: .625rem 1.125rem;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-pill);
    background: #fff;
    color: var(--pc-ink-soft);
    font-size: .875rem;
    cursor: pointer;
    user-select: none;
    transition: background .2s var(--pc-ease), border-color .2s var(--pc-ease), color .2s var(--pc-ease);
}

.pc-segment span:hover { border-color: var(--pc-ink); }

.pc-segment input:checked + span {
    background: var(--pc-ink);
    border-color: var(--pc-ink);
    color: #fff;
}

.pc-segment input:focus-visible + span {
    outline: 2px solid var(--pc-ink);
    outline-offset: 2px;
}

/* Upload well. The whole block is the drop target and the click target. */
.pc-upload {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1.25rem;
    border: 1px dashed var(--pc-line);
    border-radius: var(--pc-radius-sm);
    background: var(--pc-surface-sunk);
    color: var(--pc-ink);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color .2s var(--pc-ease), background .2s var(--pc-ease);
}

.pc-upload:hover,
.pc-upload.is-dragging {
    border-color: var(--pc-ink);
    background: var(--pc-surface-alt);
}

.pc-upload-stack {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: .625rem;
    padding: 2.25rem 1.25rem;
}

.pc-upload svg { color: var(--pc-ink); flex-shrink: 0; }
.pc-upload-title { font-size: .9375rem; font-weight: 600; color: var(--pc-ink); }
.pc-upload-hint { font-size: .8125rem; color: var(--pc-muted); margin-top: .125rem; }

/* Chosen-file row, revealed once something is picked. */
.pc-file {
    display: none;
    align-items: center;
    gap: .625rem;
    margin-top: .625rem;
    padding: .625rem .75rem;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-sm);
    background: #fff;
    font-size: .8125rem;
    color: var(--pc-ink-soft);
}

.pc-file.is-set { display: flex; }
.pc-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pc-file-clear {
    border: 0;
    background: none;
    color: var(--pc-muted);
    cursor: pointer;
    padding: .125rem;
    line-height: 0;
}

.pc-file-clear:hover { color: var(--pc-danger); }

/* The inline "Sign in to continue" strip above a form. */
.pc-signin-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--pc-surface-alt);
    border-radius: var(--pc-radius-sm);
    margin-bottom: 1.75rem;
}

.pc-signin-bar svg { color: var(--pc-muted); flex-shrink: 0; }
.pc-signin-bar > div { flex: 1; min-width: 0; }
.pc-signin-title { font-size: .9375rem; font-weight: 600; color: var(--pc-ink); }
.pc-signin-body { font-size: .8125rem; color: var(--pc-muted); margin: .125rem 0 0; }

/* Feedback after a submit. */
.pc-alert {
    padding: .875rem 1.125rem;
    border-radius: var(--pc-radius-sm);
    border: 1px solid var(--pc-line);
    background: var(--pc-surface-alt);
    font-size: .875rem;
    color: var(--pc-ink-soft);
    margin-bottom: 1.5rem;
}

.pc-alert ul { margin: 0; padding-left: 1.125rem; }
.pc-alert-success { border-color: rgba(47, 107, 67, .35); background: rgba(47, 107, 67, .07); color: var(--pc-success); }
.pc-alert-error { border-color: rgba(180, 35, 24, .3); background: rgba(180, 35, 24, .05); color: var(--pc-danger); }

/* The reviewed-before-publishing footnote beside a submit button. */
.pc-submit-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.pc-submit-note {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--pc-muted);
    max-width: 22rem;
}

.pc-submit-note svg { flex-shrink: 0; margin-top: .125rem; }

/* -- 8. Navigation ------------------------------------------------------- */

/* The marketplace strip that sits under the site header on the Gigs pages.
   This is page furniture, not the site nav — it changes per section. */
.pc-subnav {
    border-bottom: 1px solid var(--pc-line);
    background: var(--pc-surface-alt);
}

.pc-subnav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 3.25rem;
}

.pc-subnav-links {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.pc-subnav-links::-webkit-scrollbar { display: none; }

.pc-subnav-links a {
    display: block;
    padding: 1rem 0;
    color: var(--pc-muted);
    font-size: .875rem;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .2s var(--pc-ease), border-color .2s var(--pc-ease);
}

.pc-subnav-links a:hover { color: var(--pc-ink); }

.pc-subnav-links a.is-active {
    color: var(--pc-ink);
    font-weight: 600;
    border-bottom-color: var(--pc-ink);
}

/* Underlined tab row, used on the talent profile. */
.pc-tabs {
    display: flex;
    align-items: center;
    gap: 2rem;
    border-bottom: 1px solid var(--pc-line);
    overflow-x: auto;
    scrollbar-width: none;
}

.pc-tabs::-webkit-scrollbar { display: none; }

.pc-tab {
    display: block;
    padding: 1rem 0;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: none;
    font: inherit;
    font-size: .9375rem;
    color: var(--pc-muted);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s var(--pc-ease), border-color .2s var(--pc-ease);
}

.pc-tab:hover { color: var(--pc-ink); }

.pc-tab.is-active {
    color: var(--pc-ink);
    font-weight: 600;
    border-bottom-color: var(--pc-ink);
}

.pc-tabpanel[hidden] { display: none; }

/* Numbered progress: (1) Details — (2) Budget — (3) Review. */
.pc-steps {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.pc-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .375rem;
    min-width: 3.75rem;
}

.pc-step-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    border: 1px solid var(--pc-line);
    background: #fff;
    color: var(--pc-faint);
    font-size: .8125rem;
    font-weight: 600;
}

.pc-step-label { font-size: .75rem; color: var(--pc-faint); white-space: nowrap; }

.pc-step.is-active .pc-step-dot,
.pc-step.is-done .pc-step-dot {
    background: var(--pc-ink);
    border-color: var(--pc-ink);
    color: #fff;
}

.pc-step.is-active .pc-step-label { color: var(--pc-ink); font-weight: 600; }
.pc-step.is-done .pc-step-label { color: var(--pc-ink-soft); }

.pc-step-line {
    flex: 1;
    min-width: 1.5rem;
    height: 1px;
    background: var(--pc-line);
    margin-bottom: 1.25rem;
}

.pc-step-line.is-done { background: var(--pc-ink); }

/* The ticked "what to have ready" list in the right rail. */
.pc-checklist { list-style: none; margin: 0; padding: 0; }

.pc-checklist li {
    display: flex;
    gap: .75rem;
    padding: .75rem 0;
}

.pc-checklist li + li { border-top: 1px solid var(--pc-line-soft); }
.pc-checklist svg { flex-shrink: 0; margin-top: .125rem; color: var(--pc-ink); }
.pc-checklist-title { font-size: .875rem; font-weight: 600; color: var(--pc-ink); }
.pc-checklist-body { font-size: .8125rem; line-height: 1.5; color: var(--pc-muted); margin: .125rem 0 0; }

/* Back link above a page title. */
.pc-back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--pc-muted);
    font-size: .875rem;
    text-decoration: none;
}

.pc-back:hover { color: var(--pc-ink); }

/* Horizontal scroller with snap, for the logo strip and testimonials. */
.pc-rail {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: .25rem;
}

.pc-rail::-webkit-scrollbar { display: none; }
.pc-rail > * { scroll-snap-align: start; flex: 0 0 auto; }

.pc-rail-controls { display: flex; gap: .5rem; }

/* -- 9. Modal ------------------------------------------------------------ */

.pc-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.pc-modal.is-open { display: flex; }

.pc-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 16, 16, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.pc-modal-dialog {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    width: min(64rem, 100%);
    max-height: calc(100vh - 3rem);
    background: #fff;
    border-radius: var(--pc-radius-lg);
    box-shadow: var(--pc-shadow-lg);
    overflow: hidden;
}

.pc-modal-body {
    padding: 2.5rem;
    overflow-y: auto;
}

.pc-modal-aside {
    background: var(--pc-surface-alt);
    padding: 2.5rem 2rem;
    overflow-y: auto;
}

.pc-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--pc-ink);
    cursor: pointer;
}

.pc-modal-close:hover { background: rgba(16, 16, 16, .07); }

/* Reason strip in the modal aside: icon, title, caption. */
.pc-reasons { list-style: none; margin: 0; padding: 0; }
.pc-reasons li { display: flex; gap: .875rem; padding: .75rem 0; }
.pc-reasons svg { flex-shrink: 0; margin-top: .125rem; color: var(--pc-ink); }
.pc-reason-title { font-size: .875rem; font-weight: 600; color: var(--pc-ink); }
.pc-reason-body { font-size: .8125rem; color: var(--pc-muted); margin: .0625rem 0 0; }

/* Locks background scroll while a modal is open. */
body.pc-modal-open { overflow: hidden; }

/* -- 10. Responsive ------------------------------------------------------ */

@media (max-width: 1100px) {
    .pc-split,
    .pc-split-wide { grid-template-columns: minmax(0, 1fr); }
    .pc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    :root { --pc-gutter: 1.5rem; }

    .pc-section { padding: 3rem 0; }
    .pc-section-tight { padding: 2rem 0; }
    .pc-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .pc-band-split { grid-template-columns: minmax(0, 1fr); }
    .pc-band { padding: 2rem 1.5rem; }

    .pc-modal { padding: 0; }

    .pc-modal-dialog {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        max-height: 100vh;
        height: 100%;
        border-radius: 0;
    }

    /* The aside is supporting material; on a phone the form comes first and
       the reasons follow it rather than pushing it below the fold. */
    .pc-modal-body { order: 1; padding: 3.5rem 1.5rem 2rem; }
    .pc-modal-aside { order: 2; padding: 2rem 1.5rem; }
}

@media (max-width: 640px) {
    :root { --pc-gutter: 1.25rem; }

    .pc-section { padding: 2.25rem 0; }
    .pc-grid-2,
    .pc-grid-3,
    .pc-grid-4 { grid-template-columns: minmax(0, 1fr); }

    .pc-field-row,
    .pc-field-row-3 { grid-template-columns: minmax(0, 1fr); gap: 0; }

    .pc-section-head { flex-direction: column; align-items: flex-start; gap: .75rem; }

    .pc-stat + .pc-stat { border-left: 0; border-top: 1px solid var(--pc-line); }
    .pc-stat { padding: 1rem .25rem; }

    .pc-card { padding: 1.25rem; }
    .pc-btn { padding: .8125rem 1.25rem; }
    .pc-submit-row .pc-btn { width: 100%; }
    .pc-submit-note { max-width: none; }

    .pc-signin-bar { flex-wrap: wrap; }
    .pc-script { font-size: 1.375rem; }
}

/* Honour a reduced-motion preference: transforms and transitions are polish,
   never the only signal that something changed. */
@media (prefers-reduced-motion: reduce) {
    .pc-btn,
    .pc-icon-btn,
    .pc-card,
    a.pc-card,
    .pc-card-hover,
    .pc-tab,
    .pc-subnav-links a,
    .pc-segment span,
    .pc-upload,
    .pc-input,
    .pc-select,
    .pc-textarea {
        transition: none;
    }

    a.pc-card:hover,
    .pc-card-hover:hover,
    .pc-btn:active { transform: none; }

    .pc-rail { scroll-behavior: auto; }
}

/* ==========================================================================
   Shared components
   --------------------------------------------------------------------------
   Pieces used by more than one page. Anything that appears on exactly one
   page stays in that page's own @section('styles').
   ========================================================================== */

/* -- Verified tick ------------------------------------------------------- */

.pc-verified {
    display: inline-flex;
    vertical-align: middle;
    color: var(--pc-ink);
    margin-left: .1875rem;
}

/* -- Save control -------------------------------------------------------- */

.pc-save { color: var(--pc-ink); }
.pc-save.is-saved { color: var(--pc-danger); border-color: var(--pc-danger); }

.pc-icon-btn-sm { width: 2rem; height: 2rem; }

/* -- Token input (skills, tags) ------------------------------------------ */

.pc-tokens {
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-sm);
    background: #fff;
    padding: .5rem;
}

.pc-tokens:focus-within {
    border-color: var(--pc-ink);
    box-shadow: 0 0 0 3px rgba(16, 16, 16, .07);
}

.pc-tokens-list:not(:empty) {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-bottom: .5rem;
}

.pc-tokens .pc-input {
    border: 0;
    padding: .25rem .375rem;
    box-shadow: none;
}

.pc-tokens .pc-input:focus { box-shadow: none; }
.pc-tokens .pc-input:disabled { background: transparent; color: var(--pc-faint); }

.pc-token-remove {
    border: 0;
    background: none;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0 0 .25rem;
    cursor: pointer;
    opacity: .7;
}

.pc-token-remove:hover { opacity: 1; }

/* -- Talent card --------------------------------------------------------- */

.pc-talent-card {
    position: relative;
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius);
    overflow: hidden;
    transition: border-color .2s var(--pc-ease), box-shadow .2s var(--pc-ease), transform .2s var(--pc-ease);
}

.pc-talent-card:hover {
    border-color: var(--pc-ink);
    box-shadow: var(--pc-shadow);
    transform: translateY(-2px);
}

/* Above the card link, not inside it — a button nested in an anchor is
   invalid, and it needs its own hit area. */
.pc-talent-save {
    position: absolute;
    top: .625rem;
    right: .625rem;
    z-index: 2;
    background: rgba(255, 255, 255, .92);
}

.pc-talent-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.pc-talent-photo { display: block; border-radius: 0; }

.pc-talent-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    padding: .875rem 1rem 1rem;
}

.pc-talent-name {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--pc-ink);
    letter-spacing: -.01em;
    line-height: 1.3;
}

.pc-talent-role { font-size: .8125rem; color: var(--pc-muted); }

.pc-talent-meta {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    font-size: .8125rem;
    color: var(--pc-muted);
}

.pc-talent-meta strong { color: var(--pc-ink); font-weight: 600; }
.pc-talent-chip { margin-top: .375rem; }

/* -- Category tile ------------------------------------------------------- */

.pc-tile {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    padding: 1.25rem;
    min-height: 8.25rem;
    background: var(--pc-surface-alt);
    border: 1px solid transparent;
    border-radius: var(--pc-radius);
    color: var(--pc-ink);
    text-decoration: none;
    transition: background .2s var(--pc-ease), border-color .2s var(--pc-ease);
}

.pc-tile:hover { background: #fff; border-color: var(--pc-ink); }
.pc-tile svg { color: var(--pc-ink); }
.pc-tile-label { font-size: .9375rem; font-weight: 600; line-height: 1.35; margin-top: auto; }
.pc-tile-sub { display: block; font-weight: 400; color: var(--pc-muted); }

/* -- Reason / value strip ------------------------------------------------ */

.pc-value {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.pc-value-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--pc-surface-alt);
    color: var(--pc-ink);
    flex-shrink: 0;
}

.pc-value-title { font-size: .9375rem; font-weight: 600; color: var(--pc-ink); margin-bottom: .25rem; }
.pc-value-body { font-size: .8125rem; line-height: 1.55; color: var(--pc-muted); margin: 0; }

/* -- Review card --------------------------------------------------------- */

.pc-review {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    background: var(--pc-surface);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius);
    padding: 1.25rem;
    height: 100%;
}

.pc-review-head { display: flex; align-items: center; gap: .75rem; }
.pc-review-name { font-size: .875rem; font-weight: 600; color: var(--pc-ink); }
.pc-review-role { font-size: .75rem; color: var(--pc-muted); }
.pc-review-body { font-size: .875rem; line-height: 1.65; color: var(--pc-ink-soft); margin: 0; flex: 1; }

.pc-review-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    font-size: .75rem;
    color: var(--pc-faint);
}

/* -- Timeline (work history, education) ---------------------------------- */

.pc-timeline { list-style: none; margin: 0; padding: 0; }

.pc-timeline > li {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 1.25rem;
    padding-bottom: 1.5rem;
}

.pc-timeline > li:last-child { padding-bottom: 0; }

.pc-timeline-period {
    font-size: .8125rem;
    color: var(--pc-muted);
    padding-top: .125rem;
}

.pc-timeline-title { font-size: .9375rem; font-weight: 600; color: var(--pc-ink); }
.pc-timeline-org { font-size: .875rem; color: var(--pc-ink-soft); margin: .125rem 0 .5rem; }

.pc-timeline-points {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .8125rem;
    line-height: 1.65;
    color: var(--pc-muted);
}

.pc-timeline-points li { position: relative; padding-left: .875rem; }

.pc-timeline-points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .6875rem;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--pc-faint);
}

@media (max-width: 640px) {
    .pc-timeline > li { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
}

/* -- Work / portfolio tile ----------------------------------------------- */

.pc-work {
    position: relative;
    display: block;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius);
    overflow: hidden;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s var(--pc-ease), box-shadow .2s var(--pc-ease);
}

.pc-work:hover { border-color: var(--pc-ink); box-shadow: var(--pc-shadow); }

.pc-work-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .875rem 1rem;
}

.pc-work-title { font-size: .875rem; font-weight: 600; color: var(--pc-ink); }
.pc-work-sub { font-size: .75rem; color: var(--pc-muted); margin-top: .125rem; }
.pc-work-out { color: var(--pc-faint); flex-shrink: 0; margin-top: .125rem; }
.pc-work:hover .pc-work-out { color: var(--pc-ink); }

/* -- Detail rail (location / languages / rates) -------------------------- */

.pc-detail-list { list-style: none; margin: 0; padding: 0; }

.pc-detail-list > li {
    display: flex;
    gap: .875rem;
    padding: .875rem 0;
}

.pc-detail-list > li + li { border-top: 1px solid var(--pc-line-soft); }
.pc-detail-list svg { color: var(--pc-muted); flex-shrink: 0; margin-top: .125rem; }
.pc-detail-label { font-size: .75rem; color: var(--pc-muted); }
.pc-detail-value { font-size: .875rem; color: var(--pc-ink); margin-top: .0625rem; }