/* plucky_newsroom_design.css — single source of truth for cross-page chrome.
 *
 * Loaded once from base.html (after Bootstrap, so the --bs-* overrides win).
 * Page-specific styles (landing hero/board, form-filler) stay in their own
 * places. Anything used on more than one page lives here.
 *
 * Sections:
 *   1. Tokens                      (palette, fonts, Bootstrap remap)
 *   2. Body baseline
 *   3. Page chrome                 (header, eyebrow, accent rail, attention wash)
 *   4. In-app buttons              (.pw-btn / -outline / -ghost / -danger / -sm)
 *   5. Inbox card / table overrides
 *   6. Detail-page components      (.pw-detail__*, .pw-fill__*, .pw-form-panel*)
 *   7. Activity log
 *   8. Messaging thread            (.pw-thread__*)
 *   9. Wizard stepper              (.pw-stepper*)
 *  10. Wizard review summary       (.pw-review*)
 *  11. Navbar / footer chrome
 *  12. Badges & filter chips       (.pw-badge*, .pw-filter-chip, .pw-inbox-filter*)
 */

/* =========================================================================
 * 1. Tokens
 * ========================================================================= */
:root {
    --plucky-primary:         #A72536;
    --plucky-primary-hover:   #7A1A27;
    --plucky-primary-light:   #FDE9EC;

    --plucky-secondary:       #1F2A44;
    --plucky-secondary-hover: #16203A;
    --plucky-secondary-soft:  #3E5168;
    --plucky-secondary-light: #DDE3F0;

    --plucky-tertiary:        #E8B85B;
    --plucky-tertiary-light:  #FBF1D9;

    --plucky-paper:           #FAF4E8;
    --plucky-paper-soft:      #F4EDDC;
    --plucky-neutral:         #ECE6D6;

    --plucky-text:            #2A2522;
    --plucky-text-strong:     #161311;
    --plucky-text-muted:      #6B6259;
    --plucky-border-soft:     #E0D9C7;
    --plucky-border-soft-2:   #D6CDB6;

    --plucky-after-bg:        #E5EFE3;

    --font-sans:    'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-serif:   'Crimson Pro', ui-serif, Georgia, Cambria, 'Times New Roman', serif;

    /* Map Bootstrap utility tokens onto Plucky brand colors so existing
       .btn-primary, .border-primary, .bg-danger, .text-secondary, etc.
       land on-brand without rewriting markup. */
    --bs-primary:               #A72536;
    --bs-primary-rgb:           167, 37, 54;
    --bs-danger:                #A72536;
    --bs-danger-rgb:            167, 37, 54;
    --bs-link-color:            #A72536;
    --bs-link-color-rgb:        167, 37, 54;
    --bs-link-hover-color:      #7A1A27;
    --bs-link-hover-color-rgb:  122, 26, 39;
    --bs-secondary-color:       #6B6259;
}

/* =========================================================================
 * 2. Body baseline
 * ========================================================================= */
body {
    font-family: var(--font-sans);
    color: var(--plucky-text);
}

/* Alpine cloak: elements with x-cloak stay hidden until Alpine initializes,
   preventing flash of unstyled content on page load. */
[x-cloak] { display: none !important; }

/* =========================================================================
 * 3. Page chrome
 * ========================================================================= */
.pw-page-header {
    border-bottom: 1px solid var(--plucky-border-soft);
}
.pw-page-title {
    font-family: var(--font-serif);
    font-weight: 700;
    color: var(--plucky-secondary);
    letter-spacing: -.012em;
    font-size: clamp(1.85rem, 3.4vw, 2.35rem);
    line-height: 1.1;
    margin: 0;
}
.pw-page-subtitle {
    color: var(--plucky-text-muted);
    font-size: .95rem;
    margin-top: .35rem;
}

/* Page lede — short, practical helper text under the page title that tells
   the reader what they can do on this page. Sits inside .pw-page-header,
   below the count subtitle. Width is governed by its containing column. */
.pw-page-lede {
    color: var(--plucky-secondary-soft);
    font-size: 1rem;
    line-height: 1.5;
    margin: .75rem 0 0 0;
}

/* In-app eyebrow — uppercase Figtree. Editorial small-caps serif variant
   used by the landing page is named .pw-eyebrow-editorial in landing.html. */
.pw-eyebrow {
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    font-size: .78rem;
    color: var(--plucky-secondary-soft);
    margin: 0;
}
.pw-eyebrow--inherit { color: inherit; }
.pw-eyebrow-count {
    font-family: var(--font-sans);
    font-size: .8rem;
    color: var(--plucky-text-muted);
}

/* Section card accent rail — ink-blue (editorial) instead of Bootstrap primary */
.pw-accent-rail {
    border-left: 4px solid var(--plucky-secondary) !important;
}

/* Attention wash — brick at low alpha. Single source of truth: previously
   defined in both navbar.css (Bootstrap red) and inbox.html (brick); brick
   is the brand intent. */
.pw-section-attention {
    background-color: rgba(167, 37, 54, .055);
    border: 1px solid rgba(167, 37, 54, .18);
    border-radius: .75rem;
    padding: 1rem 1.25rem;
}

/* =========================================================================
 * 4. In-app buttons — 8px radius rounded rect, four variants:
 *    primary (ink fill), secondary (ink outline), ghost (label only),
 *    danger (brick outline). Same shape across all; escalating weight.
 * ========================================================================= */
.pw-btn,
.pw-btn-outline,
.pw-btn-ghost,
.pw-btn-danger {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1.15rem;
    font-family: var(--font-sans);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: .5rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
    cursor: pointer;
}
/* Primary — ink fill */
.pw-btn {
    border: 1.5px solid var(--plucky-secondary);
    background: var(--plucky-secondary);
    color: #fff;
}
.pw-btn:hover,
.pw-btn:focus-visible {
    background: var(--plucky-secondary-hover);
    border-color: var(--plucky-secondary-hover);
    color: #fff;
}
/* Secondary — ink outline */
.pw-btn-outline {
    border: 1.5px solid var(--plucky-secondary);
    background: transparent;
    color: var(--plucky-secondary);
}
.pw-btn-outline:hover,
.pw-btn-outline:focus-visible {
    background: var(--plucky-secondary);
    color: #fff;
}
/* Ghost — label only (no border, no fill); ink text. Subtle hover bg. */
.pw-btn-ghost {
    border: 1.5px solid transparent;
    background: transparent;
    color: var(--plucky-secondary);
}
.pw-btn-ghost:hover,
.pw-btn-ghost:focus-visible {
    background: rgba(31, 42, 68, .06);
    color: var(--plucky-secondary);
}
/* Danger — brick outline */
.pw-btn-danger {
    border: 1.5px solid var(--plucky-primary);
    background: transparent;
    color: var(--plucky-primary);
}
.pw-btn-danger:hover,
.pw-btn-danger:focus-visible {
    background: var(--plucky-primary);
    color: #fff;
}
/* Disabled — applies uniformly across all variants */
.pw-btn[disabled], .pw-btn-outline[disabled],
.pw-btn-ghost[disabled], .pw-btn-danger[disabled],
.pw-btn:disabled, .pw-btn-outline:disabled,
.pw-btn-ghost:disabled, .pw-btn-danger:disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}
/* Size variant — table rows / inline actions */
.pw-btn-sm {
    padding: .32rem .85rem;
    font-size: .82rem;
    gap: .35rem;
    border-radius: .4rem;
}
/* Bootstrap dropdown caret — keep, just tighten spacing */
.pw-btn.dropdown-toggle::after {
    margin-left: .35rem;
}

/* =========================================================================
 * 6. Inbox card / table overrides
 * ========================================================================= */
.pw-inbox-card a.fw-semibold,
.pw-section-attention a.fw-semibold {
    color: var(--plucky-secondary);
}
.pw-inbox-card a.fw-semibold:hover,
.pw-section-attention a.fw-semibold:hover {
    color: var(--plucky-primary);
    text-decoration: underline !important;
}
.pw-inbox-card table.table tbody td,
.pw-section-attention table.table tbody td {
    border-color: var(--plucky-border-soft);
}
.pw-inbox-card table.table thead,
.pw-section-attention table.table thead {
    color: var(--plucky-text-muted);
}

/* Posting list — fixed-grid action cell so every row aligns regardless of
 * which buttons render. Three equal slots: Create assignment | Edit | Delete.
 * For non-manual rows, an italic note spans the Edit + Delete slots. */
.pw-posting-actions-cell {
    width: 1%;
    white-space: nowrap;
}
.pw-posting-actions {
    display: grid;
    grid-template-columns: minmax(8.5rem, max-content) 5rem 5.5rem;
    gap: .5rem;
    align-items: center;
    justify-content: end;
}
.pw-posting-actions > .pw-btn-sm,
.pw-posting-actions > a.pw-btn-sm,
.pw-posting-actions > form > .pw-btn-sm {
    width: 100%;
    text-align: center;
    justify-content: center;
}
.pw-posting-actions__note {
    grid-column: 2 / span 2;
    text-align: center;
    font-size: .72rem;
    letter-spacing: .02em;
}

/* =========================================================================
 * 7. Detail-page components
 * ========================================================================= */
.pw-detail__eyebrow {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bs-secondary-color);
    margin-bottom: .25rem;
}
.pw-detail__section { margin-bottom: 1.5rem; }
.pw-detail__section + .pw-detail__section {
    padding-top: 1.25rem;
    border-top: 1px solid var(--bs-border-color);
}
.pw-detail__section-title {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bs-secondary-color);
    margin-bottom: 1rem;
}
.pw-detail__meta dl { margin-bottom: 0; }
.pw-detail__meta dt {
    font-size: .6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bs-secondary-color);
    padding-top: .35rem;
}
.pw-detail__meta dd {
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--bs-body-color);
    line-height: 1.4;
}
.pw-detail__sub {
    display: block;
    margin-top: .15rem;
    font-size: .8125rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
}
.pw-detail__unassigned {
    font-style: italic;
    font-weight: 400;
    color: var(--bs-secondary-color);
}
.pw-detail__offers tbody td { vertical-align: middle; }
.pw-detail__offers-name { font-weight: 500; }
.pw-detail__offers-contact {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .9rem;
    margin-top: .15rem;
}
.pw-detail__offers-contact a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8125rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
}
.pw-detail__offers-contact a:hover {
    color: var(--bs-link-hover-color);
    text-decoration: underline;
}
.pw-detail__offers-contact img { opacity: .7; }

.pw-detail__offers-list { margin: 0; }
.pw-detail__offers-list-item {
    padding: .65rem 0;
    border-top: 1px solid var(--bs-border-color);
}
.pw-detail__offers-list-item:first-child {
    border-top: 0;
    padding-top: 0;
}
.pw-detail__offers-meta {
    margin-top: .15rem;
    font-variant-numeric: tabular-nums;
}

.pw-detail__form-card { border-color: var(--bs-border-color); }
.pw-detail__form-card .card-body { padding: 1.25rem 1.25rem .25rem; }
.pw-detail__form-field { padding-bottom: 1.25rem; }
.pw-detail__form-field + .pw-detail__form-field {
    border-top: 1px solid var(--bs-border-color);
    padding-top: 1.25rem;
}
.pw-detail__form-prompt {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: .15rem;
}
.pw-detail__form-example {
    font-size: .8125rem;
    color: var(--bs-secondary-color);
    margin-bottom: .65rem;
}
.pw-detail__form-example::before {
    content: "Example";
    display: inline-block;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-right: .4rem;
    opacity: .85;
}
.pw-detail__form-upload {
    border: 1px dashed var(--bs-border-color);
    border-radius: .5rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    background: var(--bs-tertiary-bg);
}
.pw-detail__form-upload-label {
    font-size: .9375rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
}
.pw-detail__form-footer {
    border-top: 1px solid var(--bs-border-color);
    padding: .85rem 1.25rem;
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}
@media (max-width: 575.98px) {
    .pw-detail__form-footer { justify-content: stretch; }
    .pw-detail__form-footer .btn { flex: 1 1 auto; }
}

/* Two-column freelancer-fill layout: a "Brief" panel beside the
   input "Worksheet". Collapses to a single column under lg. */
.pw-fill__brief {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: 1.25rem 1.25rem 1rem;
}
.pw-fill__brief-eyebrow {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin: 0 0 .9rem;
}
.pw-fill__brief-list { margin: 0; }
.pw-fill__brief-item {
    padding: .75rem 0;
    border-top: 1px solid var(--bs-border-color);
}
.pw-fill__brief-item:first-child {
    padding-top: 0;
    border-top: 0;
}
.pw-fill__brief-label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin: 0 0 .15rem;
}
.pw-fill__brief-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--bs-body-color);
    line-height: 1.35;
    margin: 0;
    word-wrap: break-word;
}
.pw-fill__brief-value--lead {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
}
.pw-fill__brief-sub {
    display: block;
    margin-top: .15rem;
    font-size: .8125rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
}
.pw-fill__brief-unassigned {
    font-style: italic;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

/* Reporting-form "panel": the friendly, paper-cream wrapper that lifts the
   reporting form out of the page so it reads as the actual document — same
   surface for the editor's preview, the freelancer's fillable worksheet,
   and the submitted transcript. */
.pw-form-panel {
    background: var(--plucky-paper);
    border: 1px solid var(--plucky-border-soft);
    border-radius: .75rem;
    padding: 1.75rem 1.75rem 1.5rem;
    box-shadow: 0 1px 2px rgba(60, 40, 0, .04), 0 6px 24px -12px rgba(60, 40, 0, .12);
}
@media (max-width: 575.98px) {
    .pw-form-panel { padding: 1.15rem 1.15rem .9rem; border-radius: .5rem; }
}
.pw-form-panel__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--plucky-border-soft);
}
.pw-form-panel__eyebrow {
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--plucky-secondary-soft);
    margin: 0 0 .35rem;
}
.pw-form-panel__title {
    font-family: var(--font-serif);
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--plucky-secondary);
    margin: 0;
    line-height: 1.15;
    letter-spacing: -.012em;
}
.pw-form-panel__hint {
    font-family: var(--font-sans);
    font-size: .85rem;
    color: var(--plucky-text-muted);
    margin: .4rem 0 0;
}
.pw-form-panel__meta {
    font-family: var(--font-sans);
    font-size: .78rem;
    color: var(--plucky-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* In the fillable variant the worksheet status (autosave / unsaved changes
   alerts) sits directly under the header, before the first field. */
.pw-form-panel__alerts > * { margin-bottom: 1rem; }
.pw-form-panel__alerts:empty { display: none; }

.pw-form-panel__field {
    padding: 1.25rem 0 1.4rem;
    border-top: 1px dashed var(--plucky-border-soft-2);
}
.pw-form-panel__field:first-of-type {
    border-top: 0;
    padding-top: .35rem;
}

/* Numbered variant — used by the freelancer-fillable worksheet so each
   field gets a small editorial counter on the left. */
.pw-form-panel__field--numbered {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: .25rem 1rem;
}
@media (max-width: 575.98px) {
    .pw-form-panel__field--numbered {
        grid-template-columns: 1fr;
        gap: .35rem;
    }
}
.pw-form-panel__field-num {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    font-variant-caps: all-small-caps;
    letter-spacing: .04em;
    color: var(--plucky-secondary-soft);
    line-height: 1;
    padding-top: .35rem;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 575.98px) {
    .pw-form-panel__field-num {
        font-size: 1rem;
        padding-top: 0;
    }
}
.pw-form-panel__field-body { min-width: 0; }

.pw-form-panel__field-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .45rem;
}
.pw-form-panel__field-prompt {
    font-family: var(--font-sans);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--plucky-secondary);
    line-height: 1.3;
    margin: 0;
    letter-spacing: -.005em;
}
/* Small Phosphor glyph next to the prompt — gives a quick visual cue for the
   field type (text / audio / image / video) so the freelancer can scan the
   form instead of reading every header. */
.pw-form-panel__field-icon {
    width: 1.05em;
    height: 1.05em;
    aspect-ratio: 1 / 1;
    vertical-align: -.12em;
    margin-right: .4em;
    opacity: .7;
}
.pw-form-panel__field-required {
    flex-shrink: 0;
    font-family: var(--font-sans);
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--plucky-primary);
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: .18rem .55rem;
    line-height: 1;
    margin-top: .35rem;
}
.pw-form-panel__field-example {
    border-left: 2px solid var(--plucky-border-soft-2);
    padding: .15rem 0 .15rem .75rem;
    margin: .25rem 0 .85rem;
    font-family: var(--font-sans);
    font-size: .95rem;
    color: var(--plucky-text-muted);
    line-height: 1.5;
}
.pw-form-panel__field-example::before {
    content: "Sample submission";
    display: block;
    font-family: var(--font-sans);
    font-style: normal;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--plucky-secondary-soft);
    opacity: .9;
    margin-bottom: .25rem;
}
/* In the read-only preview, the example label reads "Example". */
.pw-form-panel:not(.pw-form-panel--fillable) .pw-form-panel__field-example::before {
    content: "Example";
}

.pw-form-panel__field-response {
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--plucky-text);
    margin: 0;
    white-space: pre-wrap;
}
.pw-form-panel__field-response--empty {
    color: var(--plucky-text-muted);
    font-style: italic;
}

.pw-form-panel__placeholder {
    border: 1px dashed var(--plucky-border-soft-2);
    border-radius: .5rem;
    padding: 1rem;
    text-align: center;
    color: var(--plucky-text-muted);
    background: var(--plucky-paper-soft);
    font-family: var(--font-sans);
    font-size: .875rem;
}
/* Variant for media-upload placeholders (audio / image / video). Stacks a
   larger Phosphor icon above the label so the upload region reads as a
   visual affordance instead of a bare line of text. */
.pw-form-panel__placeholder--media {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1.4rem 1rem;
}
.pw-form-panel__placeholder-icon {
    width: 2rem;
    height: 2rem;
    aspect-ratio: 1 / 1;
    opacity: .55;
}

/* Active inputs lift onto white so they read as a writable surface against
   the cream paper canvas. */
.pw-form-panel textarea.form-control,
.pw-form-panel input.form-control {
    background: #fff;
    border-color: var(--plucky-border-soft);
    border-radius: .5rem;
    line-height: 1.55;
    font-family: var(--font-sans);
}
.pw-form-panel textarea.form-control:focus,
.pw-form-panel input.form-control:focus {
    border-color: var(--plucky-secondary);
    box-shadow: 0 0 0 .2rem rgba(31, 42, 68, .15);
}
.pw-form-panel fieldset[disabled] textarea.form-control,
.pw-form-panel fieldset[disabled] input.form-control {
    background: var(--plucky-paper-soft);
    color: var(--plucky-text-muted);
}

.pw-form-panel__form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.25rem;
    margin-top: .5rem;
    border-top: 1px solid var(--plucky-border-soft);
}
.pw-form-panel__form-footer .small,
.pw-form-panel__form-footer .text-muted {
    font-family: var(--font-sans);
    color: var(--plucky-text-muted) !important;
}
@media (max-width: 575.98px) {
    .pw-form-panel__form-footer {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
    }
    .pw-form-panel__form-footer > .pw-btn,
    .pw-form-panel__form-footer > .pw-btn-outline {
        width: 100%;
        justify-content: center;
    }
}

/* Form template builder — editor surface for the form-template editor.
   Sibling to .pw-form-panel: the panel is the *display* surface (preview /
   freelancer fill / submitted transcript); .pw-builder__* is the *edit*
   surface, where each field is a manipulable card with prompt / example /
   required inputs and reorder controls. Field types are named (icon + label)
   rather than color-coded, keeping the page on a single editorial palette. */
.pw-builder__field {
    display: grid;
    grid-template-columns: minmax(5.5rem, auto) 1fr;
    gap: .85rem;
    background: #fff;
    border: 1px solid var(--plucky-border-soft);
    border-radius: .5rem;
    padding: .65rem .9rem .75rem;
    margin-bottom: .55rem;
    box-shadow: 0 1px 2px rgba(60, 40, 0, .04);
}
.pw-builder__field-side {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .35rem;
    padding-right: .85rem;
    border-right: 1px dashed var(--plucky-border-soft-2);
}
.pw-builder__field-side-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
    margin-right: -.35rem;
}
.pw-builder__field-num {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 500;
    font-variant-caps: all-small-caps;
    letter-spacing: .04em;
    color: var(--plucky-secondary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.pw-builder__field-type {
    display: inline-flex;
    align-self: center;
    align-items: center;
    gap: .45rem;
    margin-top: auto;
    margin-bottom: auto;
    padding: .35rem .85rem;
    font-family: var(--font-sans);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--plucky-secondary);
    background-color: var(--plucky-paper-soft);
    border: 1px solid var(--plucky-border-soft);
    border-radius: 999px;
    white-space: nowrap;
}
.pw-builder__field-type-icon {
    width: 16px;
    height: 16px;
    aspect-ratio: 1 / 1;
}
.pw-builder__field-actions {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
}
.pw-builder__field-actions .pw-btn-sm {
    padding-left: .4rem;
    padding-right: .4rem;
}
.pw-builder__field-delete {
    align-self: stretch;
    justify-content: center;
}
@media (max-width: 575.98px) {
    .pw-builder__field {
        grid-template-columns: 1fr;
        gap: .65rem;
    }
    .pw-builder__field-side {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding-right: 0;
        padding-bottom: .55rem;
        border-right: 0;
        border-bottom: 1px dashed var(--plucky-border-soft-2);
    }
    .pw-builder__field-side-top {
        flex: 1 1 auto;
    }
    .pw-builder__field-type {
        margin-top: 0;
        margin-bottom: 0;
    }
    .pw-builder__field-delete {
        align-self: auto;
        margin-left: auto;
    }
}
.pw-builder__field-body .form-control {
    background: #fff;
    border-color: var(--plucky-border-soft);
    border-radius: .35rem;
    font-family: var(--font-sans);
    font-size: .9rem;
    padding: .3rem .6rem;
    line-height: 1.4;
}
.pw-builder__field-body .form-control:focus {
    border-color: var(--plucky-secondary);
    box-shadow: 0 0 0 .2rem rgba(31, 42, 68, .15);
}
.pw-builder__field-body .form-label {
    color: var(--plucky-secondary-soft);
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: .15rem;
}
.pw-builder__field-body .form-check {
    margin-top: .15rem;
    min-height: auto;
    font-size: .85rem;
}
.pw-builder__field-body .form-check-label {
    color: var(--plucky-text);
}

/* Empty state — quiet dashed card on the paper canvas. */
.pw-builder__empty {
    background: var(--plucky-paper);
    border: 1px dashed var(--plucky-border-soft-2);
    border-radius: .5rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--plucky-text-muted);
    font-family: var(--font-sans);
}
.pw-builder__empty-title {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--plucky-secondary);
    line-height: 1.2;
}

/* Add-field dropdown menu — neutral rows, ink-blue text, soft hover.
   Each row: 22px Phosphor icon, name (semibold ink), hint (muted). */
.pw-builder__menu {
    min-width: 280px;
    padding: .35rem;
    border-radius: .5rem;
    border: 1px solid var(--plucky-border-soft);
    z-index: 1030;
}
.pw-builder__menu-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .65rem .75rem;
    border-radius: .35rem;
}
.pw-builder__menu-item:hover,
.pw-builder__menu-item:focus,
.pw-builder__menu-item:focus-visible {
    background-color: rgba(31, 42, 68, .06);
    color: inherit;
}
.pw-builder__menu-icon {
    width: 22px;
    height: 22px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}
.pw-builder__menu-label {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.pw-builder__menu-name {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--plucky-secondary);
    line-height: 1.2;
}
.pw-builder__menu-hint {
    font-family: var(--font-sans);
    font-size: .78rem;
    color: var(--plucky-text-muted);
    margin-top: .15rem;
    line-height: 1.3;
    white-space: normal;
}
.pw-builder__menu .pw-builder__menu-item + .pw-builder__menu-item {
    margin-top: .15rem;
}

/* Tighten the outline-button caret spacing the same way .pw-btn does so the
   "Add field" trigger reads as a single unit. */
.pw-btn-outline.dropdown-toggle::after {
    margin-left: .35rem;
}

/* Right-column preview stage on the form builder. Hosts the same
   server-rendered .pw-form-panel that the assignment detail page and
   wizard use. When `dirty` flips on (Alpine), the panel blurs and a
   small overlay card explains the preview will regenerate on save —
   the rerender happens on the server after a successful save. */
.pw-builder__preview-stage {
    position: relative;
    height: 100%;
}
.pw-builder__preview-stage > .pw-form-panel,
.pw-builder__preview-stage > .pw-builder__preview-empty {
    transition: filter .15s ease, opacity .15s ease;
}
.pw-builder__preview-stage--dirty > .pw-form-panel,
.pw-builder__preview-stage--dirty > .pw-builder__preview-empty {
    filter: blur(4px);
    opacity: .55;
    pointer-events: none;
    user-select: none;
}
.pw-builder__preview-empty {
    background: var(--plucky-paper);
    border: 1px dashed var(--plucky-border-soft-2);
    border-radius: .5rem;
    padding: 2.75rem 1.5rem;
    text-align: center;
    color: var(--plucky-text-muted);
    font-family: var(--font-sans);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.pw-builder__preview-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.pw-builder__preview-stage--dirty .pw-builder__preview-overlay {
    display: flex;
}
.pw-builder__preview-overlay-card {
    background: #fff;
    border: 1px solid var(--plucky-border-soft);
    border-radius: .5rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 4px 16px rgba(60, 40, 0, .14);
    text-align: center;
    max-width: 22rem;
    font-family: var(--font-sans);
    color: var(--plucky-text);
}

/* =========================================================================
 * 8. Activity log — subtle stacked entries that match the Offers section.
 * ========================================================================= */
.pw-detail__activity-list { margin: 0; }
.pw-detail__activity-item {
    padding: .55rem 0;
    border-top: 1px solid var(--bs-border-color);
}
.pw-detail__activity-item:first-child {
    border-top: 0;
    padding-top: 0;
}
.pw-detail__activity-meta {
    font-size: .75rem;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}
.pw-detail__activity-headline {
    font-size: .9rem;
    font-weight: 500;
    color: var(--bs-body-color);
    line-height: 1.35;
}
.pw-detail__activity-detail {
    font-size: .8125rem;
    color: var(--bs-secondary-color);
    line-height: 1.4;
    margin-top: .1rem;
}

/* =========================================================================
 * 9. Messaging thread — used by _thread.html / _message.html. Lives at the
 *    base level so threads render correctly anywhere they're embedded.
 * ========================================================================= */
.pw-thread__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .65rem;
}
.pw-thread__unread {
    font-family: var(--font-sans);
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--plucky-text-muted);
}
.pw-thread__list {
    max-height: 320px;
    max-width: 520px;
    overflow-y: auto;
    padding: .65rem .75rem;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
}
.pw-thread__row {
    display: flex;
    justify-content: flex-start;
    margin-bottom: .4rem;
}
.pw-thread__row--self { justify-content: flex-end; }
.pw-thread__row:last-child { margin-bottom: 0; }
.pw-thread__bubble {
    max-width: 78%;
    padding: .35rem .6rem;
    border-radius: .45rem;
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--plucky-text);
    font-size: .8125rem;
    line-height: 1.4;
}
.pw-thread__bubble--self {
    background: #fff;
    border-color: var(--bs-border-color);
}
.pw-thread__author {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--plucky-text-muted);
    margin-bottom: .1rem;
}
.pw-thread__body { white-space: pre-wrap; }
.pw-thread__time {
    font-size: .65rem;
    color: var(--plucky-text-muted);
    margin-top: .15rem;
    font-variant-numeric: tabular-nums;
}
.pw-thread__tag {
    display: inline-block;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--plucky-text-muted);
    border: 1px solid var(--plucky-border-soft-2);
    border-radius: .25rem;
    padding: .05rem .35rem;
    margin-bottom: .2rem;
}
.pw-thread__form {
    margin-top: .5rem;
    max-width: 520px;
}
.pw-thread__textarea {
    font-size: .8125rem;
    line-height: 1.4;
    border-color: var(--plucky-border-soft);
}
.pw-thread__form-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: .4rem;
}
.pw-thread__closed {
    font-size: .75rem;
    color: var(--plucky-text-muted);
    margin: .5rem 0 0;
    max-width: 520px;
}

/* =========================================================================
 * 10. Wizard stepper
 * ========================================================================= */
.pw-stepper {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    align-items: flex-start;
}
.pw-stepper__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    text-align: center;
    padding: 0 .25rem;
}
.pw-stepper__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(1rem - 1px);
    left: calc(50% + 1.25rem);
    right: calc(-50% + 1.25rem);
    height: 2px;
    background-color: var(--bs-border-color);
    z-index: 0;
    transition: background-color .15s ease;
}
.pw-stepper__item.is-completed:not(:last-child)::after {
    background-color: var(--bs-success);
}
.pw-stepper__bubble {
    position: relative;
    z-index: 1;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-body-bg);
    border: 2px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-weight: 600;
    font-size: .875rem;
    line-height: 1;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.pw-stepper__item.is-completed .pw-stepper__bubble {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
}
.pw-stepper__item.is-active .pw-stepper__bubble {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .15);
}
.pw-stepper__label {
    margin-top: .5rem;
    font-size: .8125rem;
    line-height: 1.25;
    color: var(--bs-secondary-color);
}
.pw-stepper__item.is-active .pw-stepper__label {
    color: var(--bs-body-color);
    font-weight: 600;
}
.pw-stepper__label a {
    color: var(--bs-body-color);
    text-decoration: none;
}
.pw-stepper__label a:hover {
    text-decoration: underline;
}
.pw-stepper__sublabel {
    display: block;
    margin-top: .15rem;
    font-size: .7rem;
    line-height: 1.2;
    color: var(--bs-secondary-color);
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
@media (max-width: 575.98px) {
    .pw-stepper__label {
        font-size: .75rem;
    }
    .pw-stepper__sublabel {
        font-size: .65rem;
    }
}

/* =========================================================================
 * 11. Wizard review summary
 * ========================================================================= */
.pw-review__section { margin-bottom: 1.5rem; }
.pw-review__section + .pw-review__section {
    padding-top: 1.25rem;
    border-top: 1px solid var(--bs-border-color);
}
.pw-review__section-title {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 1rem;
}
.pw-review__section-title-aside {
    font-weight: 400;
    font-size: .75rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--bs-secondary-color);
    margin-left: .4rem;
}
.pw-review dl { margin-bottom: 0; }
.pw-review dt {
    font-size: .6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bs-secondary-color);
    padding-top: .35rem;
}
.pw-review dd {
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--bs-body-color);
    line-height: 1.4;
}
.pw-review__sub {
    display: block;
    margin-top: .15rem;
    font-size: .8125rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
}
.pw-review__unit {
    font-size: .8125rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
    margin-left: .15rem;
}
.pw-review__withdrawal-choice {
    display: block;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--bs-body-color);
}
.pw-review__withdrawal-explain {
    color: var(--bs-secondary-color);
    margin: .25rem 0 0;
}

/* =========================================================================
 * 12. Navbar / footer chrome — visual style mirrors Plucky Wire's chrome
 *     (fixed-top white bar with pill-style links).
 * ========================================================================= */
.pw-navbar-shell {
    height: 75px;
    background-color: #ffffff;
    z-index: 1021;
}
.pw-navbar-brand-img {
    height: 2.4em;
}
/* Pill-style neutral button used for top-level nav links. */
.pw-pill {
    position: relative;
    color: #495057;
    background-color: transparent;
    border: 1px solid transparent;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.pw-pill:hover,
.pw-pill:focus {
    background-color: #f1f3f5;
    color: #212529;
    text-decoration: none;
}
.pw-pill.active {
    background-color: #e9ecef;
    color: #212529;
    font-weight: 600;
}
/* Legacy class kept for tests/templates already on the older selector. */
.nav-link.active-tab {
    font-weight: 600;
}
/* Push page content below the fixed navbar. */
.pw-main-offset {
    padding-top: 75px;
}
/* Secondary in-app subnav. Sits under the 75px primary navbar and reads as
   chrome-of-chrome: shorter, paper-soft canvas (one stop off the main bar),
   sentence-case Figtree labels, ink-blue underline on the active tab.
   Brick red is reserved for action, so we never use it here. */
.pw-subnav {
    position: sticky;
    top: 75px;
    z-index: 1020;
    background-color: #f4eddc;
    border-bottom: 1px solid #e0d9c7;
}
.pw-subnav .nav {
    gap: 0.25rem;
    margin: 0;
    padding: 0;
}
.pw-subnav .nav-item {
    list-style: none;
}
.pw-subnav .nav-link {
    --pw-subnav-active: #1f2a44;
    position: relative;
    padding: 0.625rem 0.875rem;
    border-radius: 0;
    color: #6b6259;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    background-color: transparent;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.pw-subnav .nav-link:hover,
.pw-subnav .nav-link:focus {
    color: #1f2a44;
    background-color: rgba(31, 42, 68, 0.06);
}
.pw-subnav .nav-link.active {
    color: var(--pw-subnav-active);
    background-color: transparent;
    font-weight: 600;
}
.pw-subnav .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0.875rem;
    right: 0.875rem;
    bottom: -1px;
    height: 2px;
    background-color: var(--pw-subnav-active);
    border-radius: 2px 2px 0 0;
}
/* Footer chrome (mirrors plucky_wire footer layout). */
.pw-footer {
    background-color: #ffffff;
}

/* =========================================================================
 * 13. Badges & filter chips — mirror of the Plucky brand badge spec.
 *
 * Two families:
 *
 *   SOFT (default for any in-app status). Calm, palette-aligned, sentence
 *   case. Use these for everything. Optionally add the .pw-badge--dot
 *   modifier on active in-app states (e.g. Pending review, Verified) to
 *   prepend a colored status dot — the dot is omitted on plain category
 *   labels (role, "Volunteer", "feed", filter chips).
 *
 *     pw-badge-success     Sage   — positive / free.
 *                                   Accepted, Published, Stripe configured,
 *                                   OK, Ready, On, Late work accepted.
 *     pw-badge-attention   Brick  — restricted / needs action / blocked.
 *                                   Submitted (needs review), Revision
 *                                   requested, Awaiting response, Expired,
 *                                   Read only, On hold, manual signups.
 *     pw-badge-danger      Brick  — terminal failure (visual alias of
 *                                   attention; brand keeps the soft brick
 *                                   for both "blocked" and "failed").
 *                                   Rejected, Missed deadline, Error, Failed.
 *     pw-badge-info        Ink    — role / informational.
 *                                   Assigned, Active, Editor, Group admin,
 *                                   Platform-wide, Private, "feed".
 *     pw-badge-progress    Gold   — featured / in-flight milestone.
 *                                   Pending offer, Uploading, Transcoding.
 *     pw-badge-clay        Clay   — embargoed / time-restricted.
 *     pw-badge-neutral     Cream  — default / inactive / past states.
 *                                   Draft, Archived, Withdrawn, Cancelled,
 *                                   Declined, Removed, Queued, Idle, Off,
 *                                   Volunteer, asset categories.
 *
 *   SOLID (use sparingly — for "now-ness" only). Live updates, breaking
 *   news, hot stories. Treat as expensive ink. Currently unused inside
 *   plucky_write, but defined here for parity with the brand library:
 *
 *     pw-badge-solid-danger   Solid brick   — Breaking.
 *     pw-badge-solid-ink      Solid ink     — Live.
 *     pw-badge-solid-gold     Solid gold    — Trending today.
 *
 * Plus support classes:
 *   pw-badge--dot       Modifier — prepends a colored status dot, sized
 *                       to the variant. Used on active in-app statuses.
 *   pw-badge-count      Numeric counter beside a label.
 *                       Add pw-badge-count--attention for the brick nav count.
 *   pw-filter-chip      Removable active-filter chip in search results.
 * ========================================================================= */
.pw-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .6rem;
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .01em;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
    vertical-align: middle;
}
/* Status dot — colored circle that takes its color from the parent variant
   via currentColor, so each variant just paints the badge text + dot. */
.pw-badge.pw-badge--dot::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}

/* Neutral — warm cream bg, ink text. Default fallback. */
.pw-badge-neutral {
    background-color: var(--plucky-paper-soft);
    color: var(--plucky-secondary);
    border-color: var(--plucky-border-soft);
}
/* Info — ink-blue subtle. Role / informational. */
.pw-badge-info {
    background-color: var(--plucky-secondary-light);
    color: var(--plucky-secondary);
    border-color: rgba(31, 42, 68, .12);
}
/* Progress — gold subtle. Featured / in-flight milestone. */
.pw-badge-progress {
    background-color: var(--plucky-tertiary-light);
    color: #7A5A1F;
    border-color: rgba(232, 184, 91, .35);
}
/* Attention — brick blush. Restricted / needs action / blocked. */
.pw-badge-attention {
    background-color: var(--plucky-primary-light);
    color: var(--plucky-primary);
    border-color: rgba(167, 37, 54, .18);
}
/* Danger — visual alias of attention (soft brick). Terminal failure
   semantics; brand keeps soft-brick for both "blocked" and "failed". */
.pw-badge-danger {
    background-color: var(--plucky-primary-light);
    color: var(--plucky-primary);
    border-color: rgba(167, 37, 54, .18);
}
/* Success — sage subtle. Positive / verified / completed. */
.pw-badge-success {
    background-color: var(--plucky-after-bg);
    color: #2F6334;
    border-color: rgba(47, 99, 52, .18);
}
/* Clay — peach. Embargoed / time-restricted. */
.pw-badge-clay {
    background-color: var(--plucky-before-bg);
    color: #8A4A2C;
    border-color: rgba(138, 74, 44, .18);
}

/* Solid variants — reserve for "now-ness" content. */
.pw-badge-solid-danger {
    background-color: var(--plucky-primary);
    color: #fff;
    border-color: var(--plucky-primary);
}
.pw-badge-solid-ink {
    background-color: var(--plucky-secondary);
    color: #fff;
    border-color: var(--plucky-secondary);
}
.pw-badge-solid-gold {
    background-color: var(--plucky-tertiary);
    color: var(--plucky-secondary);
    border-color: var(--plucky-tertiary);
}

/* Numeric counter beside a section label. Smaller, tabular. */
.pw-badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: .15rem .45rem;
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    background-color: var(--plucky-paper-soft);
    color: var(--plucky-secondary);
    border: 1px solid var(--plucky-border-soft);
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}
/* Brick variant for navbar attention count and unread-message dots. */
.pw-badge-count--attention {
    background-color: var(--plucky-primary);
    color: #fff;
    border-color: var(--plucky-primary);
}

/* Standard table header. Replaces the ad-hoc
   `text-uppercase small text-muted` + inline `letter-spacing:.08em` pattern. */
.pw-thead {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: var(--font-sans);
    font-size: .75rem;
    color: var(--plucky-text-muted);
}
.pw-thead th { font-weight: 600; }

/* Group header — the "Assignments" / "Events" rule on the editor dashboard.
   A pw-eyebrow with a quiet hairline rule under it. */
.pw-group-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--plucky-border-soft);
}

/* Quiet "back" breadcrumb above an edit/new header. Ink-blue with a chevron. */
.pw-back-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-sans);
    font-size: .85rem;
    color: var(--plucky-text-muted);
    text-decoration: none;
    margin-bottom: .5rem;
}
.pw-back-link:hover,
.pw-back-link:focus-visible {
    color: var(--plucky-secondary);
    text-decoration: underline;
}

/* Inbox empty-state title — serif editorial cue inside the empty card. */
.pw-empty-title {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.35rem;
    color: var(--plucky-secondary);
    line-height: 1.2;
}

/* Notification banner stack — sits inside .pw-section-attention. Each row
   is a hairline-separated alert; rows behave like quiet links until hover. */
.pw-notif-stack__list {
    max-height: 14rem;
    overflow-y: auto;
    /* Reserve space for the scrollbar so it never overlaps the close (X)
       button at the right edge of each row. `scrollbar-gutter` keeps the
       gutter even when content doesn't overflow; padding gives the X
       breathing room from the scrollbar track when it does. */
    scrollbar-gutter: stable;
    padding-right: .75rem;
}
.pw-notif {
    padding: .5rem 0;
    border-top: 1px solid rgba(167, 37, 54, .15);
}
.pw-notif:first-of-type {
    border-top: 0;
    padding-top: .25rem;
}
.pw-notif__link {
    color: var(--plucky-secondary);
    line-height: 1.4;
}
.pw-notif__link:hover,
.pw-notif__link:focus-visible {
    color: var(--plucky-primary);
    text-decoration: underline;
}
.pw-notif__close {
    flex-shrink: 0;
    font-size: .55rem;
    opacity: .55;
    margin-top: .15rem;
}

/* Activity feed list — caps the height so the dashboard sidebar doesn't
   grow with the event log; mirrors .pw-notif-stack__list. Stable gutter
   keeps the scrollbar from jumping content when it appears. */
.pw-activity-list {
    max-height: 18rem;
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding-right: .5rem;
}

/* Subtle neutral panel for the collapsed "past offers" list on the
   assignments inbox. Reads as quietly secondary content — paper-soft
   wash with a hairline border instead of the white card + shadow used
   for primary surfaces. */
.pw-past-offers-panel {
    background: var(--plucky-paper-soft);
    border: 1px solid var(--plucky-border-soft);
    border-radius: 10px;
    padding: .25rem .5rem;
}

/* Offer inbox row — hairline-separated list inside a pw-inbox-card. Used by
   the freelancer offer inbox. The first row drops its top border so it sits
   flush with the card padding. */
.pw-offer-row {
    padding: .85rem 1.15rem;
    border-top: 1px solid var(--plucky-border-soft);
}
.pw-offer-row:first-of-type { border-top: 0; }
.pw-offer-row__title {
    font-weight: 600;
    color: var(--plucky-secondary);
    text-decoration: none;
    line-height: 1.3;
}
.pw-offer-row__title:hover,
.pw-offer-row__title:focus-visible {
    color: var(--plucky-primary);
    text-decoration: underline;
}
.pw-offer-row__meta {
    font-size: .82rem;
    color: var(--plucky-text-muted);
    margin-top: .15rem;
}
.pw-offer-row__amount {
    font-variant-numeric: tabular-nums;
    color: var(--plucky-secondary);
    font-weight: 500;
}
.pw-offer-row__aside {
    text-align: right;
    font-size: .8rem;
    color: var(--plucky-text-muted);
    white-space: nowrap;
}
.pw-offer-row__aside-meta {
    margin-top: .25rem;
    font-variant-numeric: tabular-nums;
}

/* Quiet empty-state inside a pw-inbox-card — italic muted line, centered. */
.pw-inbox-empty {
    padding: 1.6rem 1.25rem;
    text-align: center;
    color: var(--plucky-text-muted);
    font-style: italic;
    margin: 0;
}

/* Active search / filter chip — visually a badge but interactive
   (a link or button that removes the filter when clicked). */
.pw-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .7rem;
    font-family: var(--font-sans);
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.2;
    border-radius: 999px;
    background-color: var(--plucky-paper-soft);
    color: var(--plucky-secondary);
    border: 1px solid var(--plucky-border-soft);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease;
}
.pw-filter-chip:hover,
.pw-filter-chip:focus-visible {
    background-color: var(--plucky-neutral);
    border-color: var(--plucky-border-soft-2);
    color: var(--plucky-secondary);
}

/* Persona switch in the /assignments/ header — renders only when the
   user wears both editor and freelancer hats (vm.persona_switch). Two
   underlined text links; the active one carries weight + ink color so
   it reads as the current persona without needing a background. */
.pw-persona-switch {
    display: inline-flex;
    align-items: baseline;
    gap: 1.25rem;
}
.pw-persona-switch__option {
    font-family: var(--font-sans);
    font-size: .9rem;
    font-weight: 500;
    color: var(--plucky-text-muted);
    text-decoration: none;
    border-bottom: 1.5px solid transparent;
    padding: .15rem 0 .2rem;
    transition: color .12s ease, border-color .12s ease;
}
.pw-persona-switch__option:hover,
.pw-persona-switch__option:focus-visible {
    color: var(--plucky-secondary);
}
.pw-persona-switch__option.is-active {
    color: var(--plucky-secondary);
    font-weight: 600;
    border-bottom-color: var(--plucky-secondary);
}

/* Unified "Needs your attention" priority surface on /assignments/.
   Heterogeneous priority items (review submissions, expired offers,
   pending offers awaiting freelancer response) all share one row
   template. Brick accent runs through the eyebrow, the action label,
   and the urgent time signal so the surface reads as priority at a
   glance without dominating the page. */
.pw-attention {
    background: linear-gradient(180deg, var(--plucky-primary-light) 0%, var(--plucky-paper) 100%);
    border: 1px solid #F2C9CF;
    border-radius: 14px;
    padding: .4rem .4rem .6rem;
}
.pw-attention__head {
    padding: .65rem 1rem .5rem;
}
.pw-attention__title {
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--plucky-primary);
    font-weight: 700;
    margin: 0;
}
.pw-attention__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.pw-attention__row {
    display: grid;
    grid-template-columns: 8.5rem 1fr auto;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid #F2C9CF;
    border-radius: 10px;
    padding: .85rem 1rem;
    color: var(--plucky-text);
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.pw-attention__row:hover,
.pw-attention__row:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(31, 42, 68, .07);
    border-color: #E59FA9;
    color: var(--plucky-text);
    text-decoration: none;
}
.pw-attention__action {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--plucky-primary);
}
.pw-attention__action::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 99px;
    background: var(--plucky-primary);
    box-shadow: 0 0 0 4px var(--plucky-primary-light);
}
.pw-attention__body {
    display: block;
    min-width: 0;
}
.pw-attention__row-title {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--plucky-secondary);
    line-height: 1.2;
    letter-spacing: -.005em;
    margin: 0 0 .15rem;
}
.pw-attention__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    font-size: .82rem;
    color: var(--plucky-text-muted);
}
.pw-attention__dot {
    color: var(--plucky-border-soft-2);
}
.pw-attention__time {
    text-align: right;
    font-size: .82rem;
    font-weight: 700;
    color: var(--plucky-text);
    min-width: 7rem;
}
.pw-attention__row--urgent .pw-attention__time {
    color: var(--plucky-primary);
}

@media (max-width: 575.98px) {
    .pw-attention__row {
        grid-template-columns: 1fr;
        gap: .4rem;
    }
    .pw-attention__time {
        text-align: left;
        min-width: 0;
    }
}

/* Inbox filter-pill bar — sits above the section groups on the
   /assignments/ page and toggles which sections render via Alpine.
   One pill per status bucket plus an "All" pill on the left. The
   "Needs attention" pill takes the brick accent on its count when non-zero
   so the priority bucket reads as priority even at rest. */
.pw-inbox-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}
.pw-inbox-filter {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--font-sans);
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.2;
    padding: .32rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--plucky-border-soft);
    background: transparent;
    color: var(--plucky-text);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pw-inbox-filter:hover,
.pw-inbox-filter:focus-visible {
    background-color: #fff;
    border-color: var(--plucky-border-soft-2);
}
.pw-inbox-filter.is-active {
    background-color: var(--plucky-secondary);
    border-color: var(--plucky-secondary);
    color: #fff;
}
.pw-inbox-filter__count {
    font-size: .72rem;
    color: var(--plucky-text-muted);
}
.pw-inbox-filter.is-active .pw-inbox-filter__count {
    color: rgba(255, 255, 255, .78);
}
.pw-inbox-filter--attention .pw-inbox-filter__count {
    color: var(--plucky-primary);
    font-weight: 700;
}
.pw-inbox-filter--attention.is-active .pw-inbox-filter__count {
    color: #fff;
}
.pw-inbox-filter__divider {
    display: inline-block;
    width: 1px;
    height: 1.1rem;
    background: var(--plucky-border-soft);
    margin: 0 .25rem;
}

/* =========================================================================
 * 14. Freelancer dashboard — compact assignment rows
 *
 * Each assignment is a thin row anchored by a tear-off calendar date block:
 * brick month abbrev + ink day numeral. Three pieces only — headline,
 * deadline, editor — the section grouping carries status. Header gets a
 * .pw-desk-nav row of quick links so freelancers can jump to the full
 * lists (assignments / offers / pitches) without leaving the dashboard.
 * ========================================================================= */

.pw-desk-nav__link {
    font-family: var(--font-sans);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--plucky-secondary-soft);
    padding: .35rem .8rem;
    border-radius: .4rem;
    border: 1px solid var(--plucky-border-soft);
    background: transparent;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pw-desk-nav__link:hover,
.pw-desk-nav__link:focus-visible {
    color: var(--plucky-primary);
    border-color: var(--plucky-primary);
    background: var(--plucky-primary-light);
}

/* The compact row card. Grid: tear-off date | body. */
.pw-assign-row {
    display: grid;
    grid-template-columns: 4.25rem 1fr;
    gap: 1rem;
    align-items: center;
    padding: .75rem 1rem;
    border: 1px solid var(--plucky-border-soft);
    border-radius: .5rem;
    background: #fff;
    color: var(--plucky-text);
    transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
}
.pw-assign-row:hover,
.pw-assign-row:focus-visible {
    border-color: var(--plucky-secondary-soft);
    background: var(--plucky-paper);
    transform: translateY(-1px);
    color: var(--plucky-text);
    text-decoration: none;
}

.pw-assign-row__date {
    text-align: center;
    border-right: 1px solid var(--plucky-border-soft);
    padding-right: 1rem;
    line-height: 1.05;
}
.pw-assign-row__date-month {
    font-family: var(--font-sans);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--plucky-primary);
    font-weight: 700;
    margin: 0 0 .15rem;
}
.pw-assign-row__date-day {
    font-family: var(--font-serif);
    font-size: 1.7rem;
    line-height: 1;
    color: var(--plucky-secondary);
    font-weight: 700;
    margin: 0;
}
.pw-assign-row__date-time {
    font-family: var(--font-sans);
    font-size: .7rem;
    color: var(--plucky-text-muted);
    margin: .2rem 0 0;
    letter-spacing: .01em;
}

.pw-assign-row__title {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--plucky-secondary);
    font-size: 1.1rem;
    line-height: 1.25;
    letter-spacing: -.005em;
    margin: 0 0 .2rem;
}
.pw-assign-row__byline {
    font-family: var(--font-sans);
    font-size: .85rem;
    color: var(--plucky-text);
    margin: 0;
    line-height: 1.35;
}
.pw-assign-row__byline strong {
    color: var(--plucky-secondary);
    font-weight: 700;
    letter-spacing: .01em;
}
.pw-assign-row__email {
    color: var(--plucky-text-muted);
    font-size: .78rem;
}
.pw-assign-row__deadline {
    font-family: var(--font-sans);
    font-size: .85rem;
    color: var(--plucky-text);
    margin: 0 0 .15rem;
    line-height: 1.35;
}
.pw-assign-row__deadline strong {
    color: var(--plucky-secondary);
    font-weight: 700;
    letter-spacing: .01em;
}
.pw-assign-row__pitch-status {
    color: var(--plucky-secondary);
    font-weight: 600;
}
.pw-assign-row__sep {
    color: var(--plucky-border-soft-2);
    margin: 0 .15rem;
}

@media (max-width: 575.98px) {
    .pw-assign-row {
        grid-template-columns: 3.5rem 1fr;
        gap: .75rem;
        padding: .65rem .8rem;
    }
    .pw-assign-row__date {
        padding-right: .75rem;
    }
    .pw-assign-row__date-day { font-size: 1.4rem; }
    .pw-assign-row__title { font-size: 1rem; }
    .pw-assign-row__email { display: block; }
}

/* =========================================================================
 * Dense inbox row — shared list-row template for editor sections and
 * freelancer dashboard sections on /assignments/. Replaces the verbose
 * editor table and the tear-off-calendar freelancer card grid with one
 * single-line row anchored by a 3px status rail on the left.
 * ========================================================================= */

.pw-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--plucky-border-soft);
    border-radius: 12px;
    overflow: hidden;
}
.pw-row {
    display: grid;
    grid-template-columns: 3px 1fr auto;
    align-items: center;
    column-gap: 1rem;
    padding: 0;
    border-top: 1px solid var(--plucky-border-soft);
    transition: background-color .12s ease;
}
.pw-row:first-child { border-top: 0; }
.pw-row:hover { background: var(--plucky-paper-soft); }
.pw-row__rail {
    align-self: stretch;
    width: 3px;
    background: var(--plucky-border-soft-2);
}
.pw-row--attention .pw-row__rail { background: var(--plucky-primary); }
.pw-row--offered   .pw-row__rail { background: var(--plucky-secondary-soft, #3E5168); }
.pw-row--inflight  .pw-row__rail { background: var(--plucky-tertiary, #E8B85B); }
.pw-row--completed .pw-row__rail { background: #6E8C5B; }
.pw-row--archive   .pw-row__rail { background: var(--plucky-border-soft-2); }
.pw-row--muted .pw-row__title { color: var(--plucky-text-muted); font-weight: 500; }

.pw-row__body {
    display: block;
    min-width: 0;
    padding: .75rem 0 .75rem 1rem;
    color: inherit;
    text-decoration: none;
}
.pw-row__body:hover { color: inherit; text-decoration: none; }
.pw-row__title {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height: 1.25;
    font-weight: 600;
    color: var(--plucky-secondary);
    letter-spacing: -.003em;
    margin: 0 0 .1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pw-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    color: var(--plucky-text-muted);
}
.pw-row__status {
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--plucky-secondary);
}
.pw-row--attention .pw-row__status { color: var(--plucky-primary); }
.pw-row--inflight  .pw-row__status { color: #8a6a18; }
.pw-row--completed .pw-row__status { color: #3a5a2c; }
.pw-row--archive   .pw-row__status { color: var(--plucky-text-muted); }
.pw-row__person { color: var(--plucky-text); font-weight: 600; }
.pw-row__outlet { color: var(--plucky-secondary); font-weight: 600; }
.pw-row__dot { color: var(--plucky-border-soft-2); }
.pw-row__when {
    font-size: .82rem;
    color: var(--plucky-text);
    padding-right: 1rem;
    text-align: right;
    white-space: nowrap;
}
.pw-row__actions {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding-right: 1rem;
}

@media (max-width: 575.98px) {
    .pw-row { grid-template-columns: 3px 1fr; }
    .pw-row__when { display: none; }
}

/* =========================================================================
 * 13. Posting preview (event moderation detail, right column)
 *
 * The shared `.pw-detail__*` defaults render section titles (Description,
 * When, Where, Details) and field labels (Start, End, Format, Cost) with
 * near-identical styling — both small uppercase Figtree gray. That makes
 * the right column hard to skim. Scoping these overrides to
 * `.pw-posting-preview` differentiates the two so the eye can lock onto
 * section markers and skip from datum to datum without re-reading labels.
 * ========================================================================= */
.pw-posting-preview .pw-detail__section { margin-bottom: 1.5rem; }
.pw-posting-preview .pw-detail__section + .pw-detail__section {
    border-top: 1px solid var(--plucky-border-soft);
    padding-top: 1.5rem;
    margin-top: 0;
}
.pw-posting-preview .pw-detail__section-title {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
    color: var(--plucky-secondary);
    margin: 0 0 .85rem;
}
.pw-posting-preview .pw-detail__lede {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--plucky-text-strong);
    margin: 0 0 1.5rem;
}
.pw-posting-preview .pw-detail__meta dt {
    font-family: var(--font-sans);
    font-size: .8125rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--plucky-text-muted);
    padding-top: 0;
    margin-bottom: .15rem;
}
.pw-posting-preview .pw-detail__meta dd {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    color: var(--plucky-text);
    line-height: 1.4;
    margin-bottom: 0;
}