/*
 * Manuscript-detail palette + components.
 *
 * The `.md-*` classes are reused beyond the manuscript detail page itself
 * (e.g. the document drawer rendered from /submissions, the log-submission
 * modal). The design tokens therefore live on :root rather than being scoped
 * under `.manuscript-detail`, so any surface that loads this stylesheet picks
 * them up. The `.manuscript-detail` selector below still owns the page-level
 * layout container; individual `.md-*` rules are unscoped and can be applied
 * from any surrounding element.
 */

/* =================== DESIGN TOKENS =================== */
:root {
    --md-green-deep: #2d4a35;
    --md-green-mid: #4a7c59;
    --md-green-soft: #6b9e7a;
    --md-green-quiet: #c9dcce;
    --md-green-pale: #e8f0ea;
    --md-green-wash: #f4f8f5;
    --md-olive: #8b9a6b;
    --md-cream: #fdfbf7;
    --md-warm-white: #faf8f4;
    --md-text-dark: #2a2a25;
    --md-text-mid: #5a5a52;
    --md-text-light: #8a8a80;
    --md-warm-gray: #9b9688;
    --md-border: #e5e2db;
    --md-border-warm: #c8bfa8;
    --md-gold-accent: #b8965a;
}

.manuscript-detail {
    max-width: 1080px;
    margin: 0 auto;
    padding: 32px 32px 120px;
    position: relative;
    z-index: 1;
    font-family: "DM Sans", sans-serif;
    color: var(--md-text-dark);
    background-color: var(--md-cream);
    -webkit-font-smoothing: antialiased;
}

/* =================== BACK LINK =================== */
.md-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--md-text-light);
    text-decoration: none;
    margin-bottom: 28px;
    transition: color 0.2s;
}

.md-back-link:hover {
    color: var(--md-green-deep);
}
.md-back-link svg {
    width: 14px;
    height: 14px;
}

/* =================== HERO ZONE =================== */
.md-hero {
    position: relative;
    padding: 40px 0 48px;
    margin-bottom: 8px;
    overflow: visible;
}

.md-hero-botanical {
    position: absolute;
    right: -40px;
    top: -20px;
    width: 320px;
    height: 380px;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}

.md-hero-content {
    position: relative;
    z-index: 1;
    max-width: 700px;
}

.md-hero-utility {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
}

/*
 * Intention trigger + dropdown (hero, top-right)
 *
 * The intention affordance is now a self-standing element that lives
 * next to (but separate from) the kebab. It has two visual states:
 *
 *   1. Active — `.md-intention-tag.<variant>` renders as a colored pill
 *      with a dot, label, and a chevron that fades in on hover.
 *   2. Empty  — `.md-intention-trigger.md-intention-trigger--empty`
 *      renders as an icon-only mini-button (same footprint as the kebab).
 *
 * Both share `.md-intention-host` as their positioning context, so the
 * dropdown anchors below-and-right-of-the-trigger regardless of state.
 *
 * Variants for the active pill:
 *   .revising .ready-to-send .on-submission .resting .wip
 * Each sets its own background / text / border per the design spec.
 *
 * The colored dot (`.md-intention-dot`) is reused inside the menu items
 * so the picker visually matches the resulting tag.
 */
.md-intention-host {
    position: relative;
}

/* ---- Active state: colored pill --------------------------------------- */
.md-intention-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    background: var(--md-green-pale);
    color: var(--md-green-mid);
    border: 1px solid #c5dbc9;
    cursor: default;
    transition:
        background 0.2s,
        border-color 0.2s,
        color 0.2s,
        transform 0.15s;
    font-family: "DM Sans", sans-serif;
}

.md-intention-tag-label {
    /* Lets the chevron sit at the right edge without nudging the label
     when it appears on hover. */
    display: inline-block;
}

/* Clickable hero pill */
.md-intention-tag--clickable {
    cursor: pointer;
}
.md-intention-tag--clickable:hover,
.md-intention-host.is-open > .md-intention-tag--clickable {
    filter: brightness(0.97);
    transform: translateY(-1px);
}

/*
 * Chevron — always visible at rest now that the menu opens on click only.
 * Faintly muted so it reads as a hint rather than competing with the
 * label, and rotates 180° while the menu is open.
 */
.md-intention-chevron {
    width: 12px;
    height: 12px;
    opacity: 0.65;
    flex-shrink: 0;
    transition:
        transform 0.15s ease,
        opacity 0.15s ease;
}

.md-intention-tag--clickable:hover .md-intention-chevron {
    opacity: 1;
}

.md-intention-host.is-open .md-intention-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

/* Variant: Revising (amber) */
.md-intention-tag.revising {
    background: #fff8ed;
    color: #9a7b4f;
    border-color: #e8d5b5;
}

/* Variant: Ready to send (green) */
.md-intention-tag.ready-to-send {
    background: var(--md-green-pale);
    color: var(--md-green-mid);
    border-color: #c5dbc9;
}

/* Variant: On submission (slate blue) */
.md-intention-tag.on-submission {
    background: #eaf0f5;
    color: #4a6a8a;
    border-color: #c2d4e4;
}

/* Variant: Resting / archived (warm gray) */
.md-intention-tag.resting {
    background: #f4f2ed;
    color: var(--md-warm-gray);
    border-color: var(--md-border);
}

/* Variant: WIP — olive/sage from the existing palette */
.md-intention-tag.wip {
    background: #f2f1e6;
    color: var(--md-olive);
    border-color: #d8d6be;
}

/* ---- Empty state: icon-only mini-button ------------------------------- */
/*
 * Sized to match the kebab (32px square) so the two read as a paired set
 * when no intention is set. Neutral palette — this is a quiet affordance,
 * not a CTA. Hovers a touch greener to telegraph that it's interactive.
 */
.md-intention-trigger {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--md-border);
    background: transparent;
    color: var(--md-text-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        border-color 0.2s,
        background 0.2s,
        color 0.2s,
        transform 0.15s;
    font-family: "DM Sans", sans-serif;
}
.md-intention-trigger > .md-intention-trigger-icon {
    color: inherit;
}

.md-intention-trigger:hover,
.md-intention-host.is-open > .md-intention-trigger {
    border-color: var(--md-green-soft);
    background: var(--md-warm-white);
    color: var(--md-green-deep);
    transform: translateY(-1px);
}

.md-intention-trigger svg {
    width: 14px;
    height: 14px;
}

/* ---- Colored dot (shared by pill and menu items) ---------------------- */
.md-intention-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.md-intention-dot.revising {
    background: #c9a660;
}
.md-intention-dot.ready-to-send {
    background: var(--md-green-mid);
}
.md-intention-dot.on-submission {
    background: #6a8fa5;
}
.md-intention-dot.resting {
    background: var(--md-warm-gray);
}
.md-intention-dot.wip {
    background: var(--md-olive);
}

/* Overflow button */
.md-overflow-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--md-border);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.md-overflow-btn:hover {
    border-color: var(--md-green-soft);
    background: var(--md-warm-white);
}
.md-overflow-btn svg {
    width: 16px;
    height: 16px;
    color: var(--md-text-mid);
}

/* Overflow dropdown menu */
.md-overflow-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--md-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    min-width: 180px;
    z-index: 100;
    padding: 4px;
}

.md-overflow-menu.active {
    display: block;
}

.md-overflow-menu a,
.md-overflow-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    font-family: "DM Sans", sans-serif;
    color: var(--md-text-mid);
    text-decoration: none;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}

.md-overflow-menu a:hover,
.md-overflow-menu button:hover {
    background: var(--md-green-wash);
    color: var(--md-green-deep);
}

.md-overflow-menu .danger:hover {
    background: #fef2f2;
    color: #b91c1c;
}

.md-overflow-menu form {
    margin: 0;
}

.md-overflow-menu-divider {
    border: none;
    border-top: 1px solid var(--md-border);
    margin: 2px 0;
}

.md-overflow-menu svg {
    width: 14px;
    height: 14px;
}

/*
 * Wrapping element that anchors the overflow (kebab) dropdown. Replaces
 * the previous inline `style="position: relative"` so the menu's absolute
 * positioning resolves predictably.
 */
.md-overflow-host {
    position: relative;
}

/*
 * Intention dropdown panel
 *
 * Anchored below `.md-intention-host`, right-aligned to the trigger so
 * it stays inside the hero on narrow viewports. Same surface treatment
 * as the kebab menu (white card, soft shadow, warm border) so the two
 * dropdowns read as siblings.
 */
.md-intention-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: white;
    border: 1px solid var(--md-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    min-width: 220px;
    padding: 4px;
    z-index: 110;
}

.md-intention-menu.active {
    display: block;
}

.md-intention-menu-form {
    margin: 0;
}

.md-intention-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    font-family: "DM Sans", sans-serif;
    color: var(--md-text-mid);
    text-decoration: none;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
    text-align: left;
}

.md-intention-menu-item:hover,
.md-intention-menu-item:focus-visible {
    background: var(--md-green-wash);
    color: var(--md-green-deep);
    outline: none;
}

.md-intention-menu-item.is-active {
    color: var(--md-green-deep);
    font-weight: 500;
}

.md-intention-menu-item-label {
    flex: 1;
    min-width: 0;
}

.md-intention-menu-check {
    width: 14px;
    height: 14px;
    color: var(--md-green-mid);
    flex-shrink: 0;
}

.md-intention-menu-divider {
    border: none;
    border-top: 1px solid var(--md-border);
    margin: 4px 0;
}

/* "Clear intention" — italic, no dot, slightly muted. */
.md-intention-menu-item--clear {
    font-style: italic;
    color: var(--md-text-light);
}

.md-intention-menu-item--clear:hover {
    color: var(--md-text-dark);
}

/* Title */
.md-hero-title {
    font-family: "Instrument Serif", serif;
    font-size: clamp(42px, 5vw, 58px);
    font-weight: 400;
    color: var(--md-text-dark);
    line-height: 1.05;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.md-hero-title-edit {
    margin-left: 10px;
    font-size: 14px;
    color: var(--md-text-light);
    vertical-align: middle;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: "DM Sans", sans-serif;
    text-decoration: none;
}

.md-hero-title-edit:hover {
    color: var(--md-green-deep);
    background: var(--md-green-wash);
}
.md-hero-title-edit svg {
    width: 12px;
    height: 12px;
}

/* Type + amount row — keeps the type badge and the intrinsic word/page
   count visually paired, since both describe the work itself rather than
   user-applied labels (those live in .md-hero-meta below the logline). */
.md-hero-type-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    margin-left: 0.25rem;
    margin-top: -2px;
}

/* First line / description */
.md-hero-firstline {
    font-family: "Instrument Serif", serif;
    font-size: 21px;
    font-style: italic;
    color: var(--md-text-mid);
    line-height: 1.4;
    margin-bottom: 1rem;
    margin-left: 0.25rem;
    max-width: 600px;
}

.md-hero-firstline--muted {
    color: var(--md-text-light);
}

/* Meta row — amount + user-tag chips inline. Tighter bottom margin since
   the bundles row (when present) sits directly below it. */
.md-hero-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

/* Bundles row sits below the meta row. Each bundle pill is interactive
   (link to its folio) so the row gets its own block of vertical space. */
.md-hero-bundles {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.md-meta-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--md-warm-white);
    border: 1px solid var(--md-border);
    border-radius: 100px;
    font-size: 12.5px;
    color: var(--md-text-mid);
    font-weight: 400;
    text-decoration: none;
    transition: all 0.2s;
}

.md-meta-tag:hover {
    border-color: var(--md-green-soft);
    color: var(--md-green-deep);
}

/* User-tag chips are non-interactive (display only). Slightly muted ground
   so they read as labels next to the clickable bundle pills, and the hover
   state from .md-meta-tag is suppressed since they don't go anywhere. */
.md-meta-tag--user-tag {
    background: transparent;
    border-style: dashed;
    cursor: default;
}

.md-meta-tag--user-tag:hover {
    border-color: var(--md-border);
    color: var(--md-text-mid);
}

/* Bundle/folio pill in the hero meta row.
   Distinct from .md-meta-tag because bundles do something different:
   they're containers (clickable, lead to a folio of grouped manuscripts),
   not labels. Lead with the same "folders" phosphor icon used on bundle
   cards (app/views/bundles/_bundle.html.erb), green-leaning palette so
   the affordance reads as interactive against the neutral tag chips, and
   a slight darken-and-lift on hover. */
.md-meta-bundle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 10px;
    background: var(--md-green-wash);
    border: 1px solid var(--md-green-pale);
    border-radius: 100px;
    font-size: 12.5px;
    color: var(--md-green-deep);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
}

.md-meta-bundle:hover {
    background: var(--md-green-pale);
    border-color: var(--md-green-soft);
}

.md-meta-bundle-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--md-green-mid);
}

.md-meta-bundle:hover .md-meta-bundle-icon {
    color: var(--md-green-deep);
}

.md-meta-bundle-name {
    line-height: 1;
}

.md-meta-divider {
    color: var(--md-border-warm);
    font-weight: 300;
}

.md-meta-text {
    font-size: 13px;
    color: var(--md-text-light);
    font-weight: 300;
}

.md-meta-type {
    font-size: 13px;
    color: var(--md-text-mid);
    font-weight: 600;
}

/* Activity indicator */
.md-hero-activity {
    font-family: "DM Sans", sans-serif;
    font-size: 15px;
    color: var(--md-text-mid);
    font-weight: 300;
    line-height: 1.5;
    margin: 1em;
    margin-left: 0.25em;
}

.md-hero-activity strong {
    font-weight: 500;
    color: var(--md-green-deep);
}

.md-hero-activity-time {
    color: var(--md-text-light);
    font-weight: 300;
}

/* Primary action row */
.md-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.md-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    background: var(--md-green-deep);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition:
        background 0.2s,
        transform 0.15s,
        box-shadow 0.2s;
    text-decoration: none;
}

.md-btn-primary:hover {
    background: var(--md-green-mid);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(45, 74, 53, 0.15);
}

.md-btn-primary svg {
    width: 16px;
    height: 16px;
}

.md-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    background: transparent;
    color: var(--md-text-mid);
    border: 1px solid var(--md-border-warm);
    border-radius: 6px;
    font-size: 14.5px;
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.md-btn-secondary:hover {
    border-color: var(--md-green-soft);
    color: var(--md-green-deep);
    background: var(--md-warm-white);
}

.md-btn-secondary svg {
    width: 15px;
    height: 15px;
}

/* =================== STICKY SUB-NAV =================== */
.md-sub-nav {
    position: sticky;
    top: 64px;
    z-index: 15;
    background: rgba(253, 251, 247, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--md-border);
    border-bottom: 1px solid var(--md-border);
    margin: 24px -32px 0;
    padding: 0 32px;
}

.md-sub-nav-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.md-sub-nav-inner::-webkit-scrollbar {
    display: none;
}

.md-sub-nav-link {
    position: relative;
    padding: 14px 18px;
    font-size: 13.5px;
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    color: var(--md-text-mid);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
    border: none;
    background: transparent;
    cursor: pointer;
}

.md-sub-nav-link:hover {
    color: var(--md-green-deep);
}

.md-sub-nav-link.active {
    color: var(--md-green-deep);
    font-weight: 500;
}

.md-sub-nav-link.active::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: -1px;
    height: 2px;
    background: var(--md-green-deep);
}

.md-sub-nav-link.grayed {
    color: var(--md-text-light);
    opacity: 0.5;
    cursor: default;
}

.md-sub-nav-count {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    color: var(--md-text-light);
    font-weight: 400;
}

/* =================== WORKING ZONE SECTIONS =================== */
.md-section {
    padding: 56px 0 16px;
    scroll-margin-top: 140px;
}

.md-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 24px;
}

.md-section-title {
    font-family: "Instrument Serif", serif;
    font-size: 32px;
    font-weight: 400;
    color: var(--md-text-dark);
    letter-spacing: -0.01em;
}

.md-section-desc {
    font-size: 14px;
    font-weight: 300;
    color: var(--md-text-light);
    margin-top: 4px;
    font-style: italic;
}

.md-section-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--md-border);
    border-radius: 6px;
    font-size: 13px;
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    color: var(--md-text-mid);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.md-section-add-btn:hover {
    border-color: var(--md-green-soft);
    color: var(--md-green-deep);
    background: var(--md-warm-white);
}

.md-section-add-btn svg {
    width: 13px;
    height: 13px;
}

/* =================== PATHS SECTION =================== */
.md-paths-empty {
    background: var(--md-warm-white);
    border: 1px dashed var(--md-border-warm);
    border-radius: 8px;
    padding: 40px 32px;
    text-align: center;
}

.md-paths-empty h3 {
    font-family: "Instrument Serif", serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--md-text-dark);
    margin-bottom: 8px;
}

.md-paths-empty p {
    font-size: 14.5px;
    color: var(--md-text-mid);
    font-weight: 300;
    line-height: 1.6;
    max-width: 440px;
    margin: 0 auto 20px;
}

.md-path-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.md-tier-card {
    background: var(--md-warm-white);
    border: 1px solid var(--md-border);
    border-radius: 6px;
    padding: 18px 20px;
    transition: border-color 0.2s;
    text-decoration: none;
    display: block;
    color: inherit;
}

.md-tier-card:hover {
    border-color: var(--md-border-warm);
}

.md-tier-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.md-tier-label.ideal {
    color: var(--md-green-mid);
}
.md-tier-label.good {
    color: #7d9a5c;
}
.md-tier-label.acceptable {
    color: var(--md-olive);
}

.md-tier-count {
    font-family: "Instrument Serif", serif;
    font-size: 28px;
    color: var(--md-text-dark);
    line-height: 1;
    margin-bottom: 8px;
}

.md-tier-preview {
    font-size: 12.5px;
    color: var(--md-text-mid);
    font-weight: 300;
    line-height: 1.5;
}

.md-tier-preview-item {
    display: block;
    margin-bottom: 2px;
}
.md-tier-preview-more {
    color: var(--md-text-light);
    font-style: italic;
}

/* =================== SUBMISSIONS SECTION =================== */
.md-submissions-list {
    background: var(--md-warm-white);
    border: 1px solid var(--md-border);
    border-radius: 8px;
    overflow: hidden;
}

.md-submission-row {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--md-border);
    text-decoration: none;
    color: inherit;
}

.md-submission-row:last-child {
    border-bottom: none;
}

/* Summary row \u2014 the always-visible, clickable top portion. The hover tint
   is scoped here (not the whole row) so the expanded panel underneath
   doesn't flash green while the user is reading/copying text from it. */
.md-sub-summary {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 18px 24px;
    cursor: pointer;
    transition: background 0.15s;
}

.md-sub-summary:hover {
    background: rgba(232, 240, 234, 0.3);
}

.md-sub-status {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.md-sub-status svg {
    width: 20px;
    height: 20px;
}

.md-sub-main {
    min-width: 0;
}

.md-sub-venue {
    font-family: "Instrument Serif", serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--md-text-dark);
    line-height: 1.3;
    margin-bottom: 3px;
}

.md-sub-meta {
    font-size: 12.5px;
    color: var(--md-text-light);
    font-weight: 300;
    line-height: 1.5;
}

.md-sub-dates {
    font-size: 12px;
    color: var(--md-text-light);
    font-weight: 300;
    text-align: right;
    white-space: nowrap;
}

/* Row states */
.md-submission-row.took-root {
    background: linear-gradient(
        to right,
        rgba(232, 240, 234, 0.4),
        transparent 70%
    );
}

.md-submission-row.took-root .md-sub-venue {
    color: var(--md-green-deep);
}

.md-submission-row.not-this-time {
    opacity: 0.78;
}

.md-submission-row.not-this-time .md-sub-venue {
    color: var(--md-text-mid);
}

.md-submission-row.withdrawn {
    opacity: 0.6;
}

/* Hidden/expanded submissions */
.md-submission-row.sub-hidden {
    display: none;
}
.md-submissions-list.expanded .md-submission-row.sub-hidden {
    display: grid;
}

.md-show-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 10px 18px;
    background: transparent;
    border: 1px solid var(--md-border);
    border-radius: 6px;
    font-size: 13px;
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    color: var(--md-text-mid);
    cursor: pointer;
    transition: all 0.2s;
}

.md-show-more-btn:hover {
    border-color: var(--md-green-soft);
    color: var(--md-green-deep);
    background: var(--md-warm-white);
}

.md-show-more-btn svg {
    width: 13px;
    height: 13px;
    transition: transform 0.25s;
}

.md-show-more-btn.expanded svg {
    transform: rotate(180deg);
}

/* ---- Expanded submission panel ---- */
.md-sub-expanded {
    display: none;
    cursor: default;
    padding: 4px 0 14px;
}

.md-submission-row.expanded > .md-sub-expanded {
    display: block;
}

.md-sub-expanded-section {
    padding: 14px 24px 0;
}

.md-sub-expanded-section:first-of-type {
    padding-top: 18px;
    border-top: 1px dashed var(--md-border);
}

.md-sub-expanded-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--md-green-mid);
    margin-bottom: 8px;
}

/* Header row that pairs the section label with inline affordances
   (currently the private-note popover trigger). */
.md-sub-expanded-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.md-sub-expanded-label-row .md-sub-expanded-label {
    margin-bottom: 0;
}

/* ---- Private note popover ---- */
.md-private-note {
    position: relative;
    display: inline-flex;
    line-height: 0;
}

.md-private-note-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--md-green-mid);
    cursor: pointer;
    transition:
        background-color 0.15s,
        color 0.15s;
}

.md-private-note-trigger:hover,
.md-private-note.open .md-private-note-trigger {
    background: var(--md-green-pale);
    color: var(--md-green-deep);
}

.md-private-note-trigger:focus-visible {
    outline: 2px solid var(--md-green-soft);
    outline-offset: 2px;
}

.md-private-note-icon {
    width: 14px;
    height: 14px;
}

/* Popover. `position: fixed` lets it escape the submissions list's
   `overflow: hidden` clipping. Coordinates are set by the Stimulus
   controller on open (hover or click). Pops out to the right of the trigger,
   vertically centered to it. */
.md-private-note-popover {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: max-content;
    min-width: 220px;
    max-width: min(360px, calc(100vw - 32px));
    max-height: 240px;
    overflow-y: auto;
    padding: 10px 12px 12px;
    background: var(--md-cream);
    border: 1px solid var(--md-border);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(42, 42, 37, 0.08);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.12s,
        visibility 0.12s;
    pointer-events: none;
}

.md-private-note.open .md-private-note-popover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.md-private-note-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    font-family: "DM Sans", sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--md-text-light);
}

.md-private-note-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--md-text-light);
    cursor: pointer;
    /* Only show the close button when pinned — hover-peek doesn't need it. */
    visibility: hidden;
}

.md-private-note.pinned .md-private-note-close {
    visibility: visible;
}

.md-private-note.pinned .md-private-note-popover {
    /* Pinned popovers don't need to dismiss when the cursor leaves the
     trigger \u2014 the controller manages the `open` class lifecycle. */
}

.md-private-note-close:hover {
    background: var(--md-border);
    color: var(--md-text-dark);
}

.md-private-note-close-icon {
    width: 12px;
    height: 12px;
}

.md-private-note-body {
    font-family: "Instrument Serif", serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--md-text-dark);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.md-private-note-body > *:first-child {
    margin-top: 0;
}
.md-private-note-body > *:last-child {
    margin-bottom: 0;
}

.md-sub-pill-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.md-sub-expanded-empty {
    font-family: "Instrument Serif", serif;
    font-size: 13.5px;
    font-style: italic;
    color: var(--md-text-light);
}

/* `.md-sub-expanded-actions` and `.md-sub-add-response` were removed
   when the "Attach correspondence" affordance moved into the Other
   Materials section header (next to the pencil) as a small "+". The
   bottom-of-row action bar is no longer rendered. */

/* ---- Document filename pill ---- */
.md-doc-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: #fff;
    border: 1px solid var(--md-border);
    border-radius: 5px;
    font-family: "DM Sans", sans-serif;
    font-size: 12.5px;
    color: var(--md-text-mid);
    text-decoration: none;
    max-width: 100%;
    transition:
        border-color 0.15s,
        color 0.15s;
}

.md-doc-pill:hover {
    border-color: var(--md-green-soft);
    color: var(--md-green-deep);
}

.md-doc-pill--text-only {
    cursor: default;
}

.md-doc-pill--text-only:hover {
    cursor: default;
    border: 1px solid var(--md-border);
    color: var(--md-text-mid);
}

.md-doc-pill-icon {
    width: 13px;
    height: 13px;
    color: var(--md-green-mid);
    flex-shrink: 0;
}

.md-doc-pill-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

/* ---- Bordered serif query/response block ---- */
.md-query-block {
    background: #fff;
    border: 1px solid var(--md-border);
    border-radius: 6px;
    padding: 14px 18px;
}

.md-query-block-text {
    font-family: "Instrument Serif", serif;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--md-text-mid);
    max-height: 180px;
    overflow-y: auto;
}

.md-query-block-text > * {
    margin: 0 0 6px;
}
.md-query-block-text > *:last-child {
    margin-bottom: 0;
}

.md-query-block-attached {
    margin-top: 8px;
}

/* =================== NOTES SECTION =================== */
.md-notes-area {
    background: var(--md-cream);
    border: 1px solid var(--md-border-warm);
    border-radius: 8px;
    padding: 36px 40px;
    min-height: 200px;
    position: relative;
}

/* Trix editor used for the Notes section, backed by Manuscript#description.
   Trix renders <trix-toolbar> + <trix-editor>; we style the editor surface
   to match the original textarea look (serif body, transparent ground, no
   visible border) and let the toolbar sit above it. */
.md-notes-trix {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 240px;
    font-family: "Instrument Serif", serif;
    font-size: 17px;
    line-height: 1.75;
    color: var(--md-text-dark);
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    overflow-y: auto;
    max-height: 300px;
}

.md-notes-trix::placeholder,
trix-editor.md-notes-trix:empty::before {
    color: var(--md-text-light);
    font-style: italic;
    opacity: 0.6;
}

.md-notes-indicator {
    position: absolute;
    bottom: 12px;
    right: 16px;
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    letter-spacing: 0.02em;
    transition:
        opacity 0.2s,
        color 0.2s;
}

.md-notes-indicator--saved {
    color: var(--md-text-light);
    opacity: 0.6;
}

.md-notes-indicator--saving {
    color: var(--md-green-mid);
    opacity: 1;
}

.md-notes-indicator--error {
    color: #991b1b;
    opacity: 1;
}

.md-notes-indicator--faded {
    opacity: 0;
    transition: opacity 1s ease;
}

/* =================== COMING SOON OVERLAY =================== */
.md-section.coming-soon {
    position: relative;
}

.md-section.coming-soon > *:not(.md-section-header) {
    opacity: 0.35;
    pointer-events: none;
    filter: grayscale(0.3);
}

.md-coming-soon-banner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--md-warm-white);
    border: 1px dashed var(--md-border-warm);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 400;
    color: var(--md-text-light);
    margin-left: 12px;
    font-style: italic;
}

.md-coming-soon-placeholder {
    background: var(--md-warm-white);
    border: 1px dashed var(--md-border-warm);
    border-radius: 8px;
    padding: 48px 32px;
    text-align: center;
}

.md-coming-soon-placeholder p {
    font-size: 14.5px;
    color: var(--md-text-light);
    font-weight: 300;
    line-height: 1.6;
    font-style: italic;
    max-width: 400px;
    margin: 0 auto;
}

/* =================== ANIMATIONS =================== */
@keyframes mdFadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.md-hero-content > * {
    animation: mdFadeInUp 0.5s ease both;
}
.md-hero-content > *:nth-child(1) {
    animation-delay: 0.05s;
}
.md-hero-content > *:nth-child(2) {
    animation-delay: 0.1s;
}
.md-hero-content > *:nth-child(3) {
    animation-delay: 0.15s;
}
.md-hero-content > *:nth-child(4) {
    animation-delay: 0.2s;
}
.md-hero-content > *:nth-child(5) {
    animation-delay: 0.25s;
}
.md-hero-content > *:nth-child(6) {
    animation-delay: 0.3s;
}

/* =================== RESPONSIVE =================== */
@media (max-width: 900px) {
    .md-sub-nav {
        top: 56px;
    }
    .md-hero-title {
        font-size: 38px;
    }
    .md-hero-botanical {
        opacity: 0.05;
        width: 220px;
        height: 260px;
        right: -30px;
    }
    .md-submission-row {
        grid-template-columns: auto 1fr;
        row-gap: 6px;
    }
    .md-sub-dates {
        grid-column: 2;
        text-align: left;
    }
}

@media (max-width: 640px) {
    .manuscript-detail {
        padding: 20px 16px 80px;
    }
    .md-hero {
        padding: 24px 0 32px;
    }
    .md-hero-title {
        font-size: 32px;
    }
    .md-hero-firstline {
        font-size: 18px;
    }
    .md-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .md-btn-primary,
    .md-btn-secondary {
        justify-content: center;
    }
    .md-section {
        padding: 40px 0 8px;
    }
    .md-section-title {
        font-size: 26px;
    }
    .md-sub-nav {
        margin: 24px -16px 0;
        padding: 0 16px;
    }
}

/* =================== INLINE EDIT FORM =================== */
.md-hero--editing {
    padding-bottom: 40px;
    /* Lift the editing hero above the sticky sub-nav (z-index: 15) so
     the tag combobox dropdown — trapped in .md-hero-content's stacking
     context (z-index: 1) — can escape upward. */
    position: relative;
    z-index: 20;
}

.md-hero--editing .md-hero-content {
    z-index: auto;
}

.md-inline-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
    animation: mdFadeInUp 0.3s ease both;
}

/* Error display */
.md-inline-form-errors {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 16px 20px;
    font-size: 13.5px;
    color: #991b1b;
    line-height: 1.5;
}

.md-inline-form-errors strong {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.md-inline-form-errors ul {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
}

.md-inline-form-errors li {
    margin-bottom: 2px;
}

/* Fields */
.md-inline-field {
    position: relative;
}

.md-inline-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--md-green-mid);
    margin-bottom: 8px;
}

/* "optional" hint sitting next to a label, e.g. FIRST LINE OR LOGLINE optional */
.md-inline-label-optional {
    margin-left: 6px;
    font-family: "Instrument Serif", serif;
    font-size: 13px;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0;
    text-transform: none;
    color: var(--md-text-light);
}

/* Title input - large, matching the hero title style */
.md-inline-input--title {
    width: 100%;
    font-family: "Instrument Serif", serif;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 400;
    color: var(--md-text-dark);
    line-height: 1.1;
    letter-spacing: -0.01em;
    border: none;
    border-bottom: 2px solid var(--md-border-warm);
    background: transparent;
    padding: 4px 0 8px;
    outline: none;
    transition: border-color 0.2s;
}

.md-inline-input--title:focus {
    border-bottom-color: var(--md-green-mid);
}

.md-inline-input--title::placeholder {
    color: var(--md-text-light);
    opacity: 0.5;
}

/* Thin horizontal rule sub-divider between form sections */
.md-inline-divider {
    border: none;
    border-top: 1px solid var(--md-border);
    margin: 0;
}

/* Row of smaller fields */
.md-inline-fields-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.md-inline-field--type {
    flex: 1;
    min-width: 180px;
}
.md-inline-field--amount {
    flex: 1;
    min-width: 240px;
}

/* Select inputs */
.md-inline-select {
    width: 100%;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    color: var(--md-text-dark);
    background: var(--md-warm-white);
    border: 1px solid var(--md-border);
    border-radius: 6px;
    padding: 10px 14px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%238A8A80' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.md-inline-select:focus {
    border-color: var(--md-green-mid);
}

/* Compact "Length" affordance: small number input followed by a small
   unit select. Sized to content rather than full-width so the row reads
   as inline metadata (e.g. "79  lines") rather than a heavy form box. */
.md-inline-join {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.md-inline-input--amount {
    width: 88px;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    color: var(--md-text-dark);
    background: var(--md-warm-white);
    border: 1px solid var(--md-border);
    border-radius: 6px;
    padding: 8px 10px;
    outline: none;
    transition: border-color 0.2s;
}

.md-inline-input--amount:focus {
    border-color: var(--md-green-mid);
}

.md-inline-input--amount::placeholder {
    color: var(--md-text-light);
    opacity: 0.6;
}

.md-inline-select--unit {
    width: auto;
    min-width: 0;
    padding: 6px 26px 6px 10px;
    font-size: 13px;
    color: var(--md-text-mid);
    background-color: transparent;
    border-color: transparent;
    background-position: right 6px center;
}

.md-inline-select--unit:hover {
    border-color: var(--md-border);
    background-color: var(--md-warm-white);
}

.md-inline-select--unit:focus {
    border-color: var(--md-green-mid);
    background-color: var(--md-warm-white);
}

/* Type select rendered as a soft warm pill — echoes the type badge in
   the read-only hero so the editing affordance feels continuous with
   the resting view. Sized to its content rather than full-width. */
.md-inline-select--type {
    display: inline-flex;
    width: auto;
    min-width: 260px;
    padding: 8px 36px 8px 16px;
    font-weight: 500;
    background-color: var(--md-warm-white);
    border-radius: 100px;
    border-color: var(--md-border-warm);
}

/* Logline input — single-line, italic to match hero firstline preview.
   Borderless except for a warm underline so it reads as inline body
   text, matching the title input's affordance. */
.md-inline-input--logline {
    width: 100%;
    font-family: "Instrument Serif", serif;
    font-size: 20px;
    font-style: italic;
    color: var(--md-text-dark);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--md-border-warm);
    border-radius: 0;
    padding: 6px 0 10px;
    outline: none;
    transition: border-color 0.2s;
}

.md-inline-input--logline:focus {
    border-bottom-color: var(--md-green-mid);
}

.md-inline-input--logline::placeholder {
    color: var(--md-text-light);
    opacity: 0.7;
    font-style: italic;
}

/* Age range input */
.md-inline-input--age-range {
    width: 100%;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    color: var(--md-text-dark);
    background: var(--md-warm-white);
    border: 1px solid var(--md-border);
    border-radius: 6px;
    padding: 10px 14px;
    outline: none;
    transition: border-color 0.2s;
}

.md-inline-input--age-range:focus {
    border-color: var(--md-green-mid);
}

.md-inline-input--age-range::placeholder {
    color: var(--md-text-light);
    opacity: 0.6;
}

/* Tags field within inline form */
.md-inline-field--tags {
    min-width: 0;
}

/* Combobox overrides scoped to the manuscript inline form. The shared
   `possibilities/tag_input` partial is reused across other possibility
   forms that rely on the default combobox chrome, so all rules below
   are namespaced under `.md-inline-field--tags` to leave those alone. */

/* Borderless wrapper; `position: relative` anchors the listbox below.
   Applies to both single- and multi-select modes so the chrome is
   killed even before the first chip is added (the gem only flips
   `--multiple` on in some states). */
.md-inline-field--tags .hw-combobox__main__wrapper {
    position: relative;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    gap: 10px;
    min-height: 0;
}

/* Outlined warm-pill chips. */
.md-inline-field--tags .hw-combobox__chip {
    padding: 5px 4px 5px 14px;
    background: transparent;
    border: 1px solid var(--md-border-warm);
    color: var(--md-text-dark);
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    transition:
        border-color 0.2s,
        background-color 0.2s;
}

.md-inline-field--tags .hw-combobox__chip:hover {
    background: var(--md-warm-white);
    border-color: var(--md-green-soft);
}

.md-inline-field--tags .hw-combobox__chip__remover {
    width: 18px;
    height: 18px;
    margin-left: 4px;
    color: var(--md-text-light);
    opacity: 0.9;
    font-size: 16px;
}

.md-inline-field--tags .hw-combobox__chip__remover:hover {
    opacity: 1;
    color: var(--md-green-deep);
}

/* Borderless input with italic serif placeholder. */
.md-inline-field--tags .hw-combobox__input {
    flex: 1 1 140px;
    min-width: 140px;
    width: auto !important;
    padding: 4px 4px 5px !important;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    color: var(--md-text-dark);
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.md-inline-field--tags .hw-combobox__input:focus,
.md-inline-field--tags .hw-combobox__input:focus-visible,
.md-inline-field--tags .hw-combobox__input[data-queried] {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.md-inline-field--tags .hw-combobox__input::placeholder {
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-size: 16px;
    color: var(--md-text-light);
    opacity: 0.85;
}

/* Helper line under the chip row (see _form.html.erb). */
.md-inline-tags-hint {
    margin-top: 10px;
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-size: 15px;
    color: var(--md-text-light);
}

/* Listbox: full-width of the tags field, anchored below the input row.
   The duplicate `.hw-combobox-bottom` selectors override the gem's
   upward-flip rule so the dropdown never floats mid-form. z-index sits
   above the sticky sub-nav (z-index: 15) whose stacking context would
   otherwise trap the base combobox's z-index: 50. */
.md-inline-field--tags .hw-combobox__listbox,
.md-inline-field--tags.hw-combobox-bottom .hw-combobox__listbox,
.md-inline-field--tags .hw-combobox-bottom .hw-combobox__listbox {
    top: 100%;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    margin-top: 4px;
    z-index: 1000;
    background-color: var(--md-cream);
    border: 1px solid var(--md-border-warm);
    border-radius: 10px;
    box-shadow: 0 12px 28px -16px rgba(45, 74, 53, 0.22);
    padding: 6px;
    opacity: 1;
}

.md-inline-field--tags .hw-combobox__option {
    border: none;
    background: transparent;
    border-radius: 8px;
    padding: 12px 16px;
    font-family: "DM Sans", sans-serif;
    font-size: 15px;
    color: var(--md-text-dark);
    width: auto;
    margin-bottom: 2px;
    cursor: pointer;
}

.md-inline-field--tags .hw-combobox__option:hover {
    background: var(--md-green-wash);
    color: var(--md-green-deep);
}

/* Already-applied option: muted, with a ✓ added via ::after since the
   gem doesn't render a checkmark element. */
.md-inline-field--tags .hw-combobox__option--selected {
    background: transparent;
    color: var(--md-text-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.md-inline-field--tags .hw-combobox__option--selected::after {
    content: "✓";
    color: var(--md-text-light);
    font-size: 14px;
    margin-left: 12px;
}

.md-inline-field--tags .hw-combobox__option--selected:hover {
    background: var(--md-warm-white);
    color: var(--md-text-mid);
}

.md-inline-field--tags .hw-combobox__option--blank {
    color: var(--md-text-light);
    font-style: italic;
}

/* Rich textarea / description */
.md-inline-field--description {
    margin-top: 4px;
}

.md-inline-textarea {
    width: 100%;
    min-height: 140px;
    font-family: "Instrument Serif", serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--md-text-dark);
    background: var(--md-cream);
    border: 1px solid var(--md-border-warm);
    border-radius: 8px;
    padding: 20px 24px;
    outline: none;
    resize: vertical;
    transition: border-color 0.2s;
}

.md-inline-textarea:focus {
    border-color: var(--md-green-mid);
}

/* Trix editor styling within the inline form */
.md-inline-form trix-editor {
    font-family: "Instrument Serif", serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--md-text-dark);
    background: var(--md-cream);
    border: 1px solid var(--md-border-warm);
    border-radius: 8px;
    padding: 20px 24px;
    min-height: 140px;
    outline: none;
    transition: border-color 0.2s;
}

.md-inline-form trix-editor:focus {
    border-color: var(--md-green-mid);
}

.md-inline-form trix-toolbar {
    border-bottom: 1px solid var(--md-border);
    margin-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: var(--md-warm-white);
    padding: 6px 8px;
}

.md-inline-form trix-toolbar + trix-editor {
    border-radius: 0 0 8px 8px;
}

/* Action buttons row */
.md-inline-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 8px;
}

/* Collapsible details toggle (new manuscript page) */
.md-inline-details {
    margin-top: 4px;
}

.md-inline-details-toggle {
    font-size: 13px;
    font-weight: 500;
    color: var(--md-text-light);
    cursor: pointer;
    transition: color 0.2s;
    list-style: none;
    user-select: none;
}

.md-inline-details-toggle::-webkit-details-marker {
    display: none;
}
.md-inline-details-toggle::marker {
    display: none;
    content: "";
}

.md-inline-details-toggle:hover {
    color: var(--md-green-mid);
}

.md-inline-details[open] .md-inline-details-toggle {
    color: var(--md-green-deep);
}

/* =================== INLINE FORM RESPONSIVE =================== */
@media (max-width: 640px) {
    .md-inline-fields-row {
        flex-direction: column;
        gap: 16px;
    }
    .md-inline-input--title {
        font-size: 28px;
    }
    .md-inline-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .md-inline-actions .md-btn-primary,
    .md-inline-actions .md-btn-secondary {
        justify-content: center;
        text-align: center;
    }
}

/* =================== LOG SUBMISSION MODAL =================== */
/*
 * Modal chrome for the "Log a submission" flow. The overlay is position:fixed
 * so it escapes the .manuscript-detail container visually, but CSS variables
 * from .manuscript-detail cascade into it via the turbo_frame placement.
 */
.md-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(42, 42, 37, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    overflow-y: auto;
    font-family: "DM Sans", sans-serif;
    color: var(--md-text-dark);
    animation: mdModalOverlayIn 0.2s ease;
}

/* Draft modals can be opened from inside the log-submission modal,
   so they need to stack above it. */
turbo-frame#draft_modal .md-modal-overlay,
turbo-frame#remove_draft_modal .md-modal-overlay,
turbo-frame#draft_preview_modal .md-modal-overlay {
    z-index: 300;
}

@keyframes mdModalOverlayIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.md-modal {
    background: var(--md-cream);
    border: 1px solid var(--md-border-warm);
    border-radius: 10px;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 80px);
    margin-top: 4rem;
    position: relative;
    box-shadow: 0 24px 80px rgba(42, 42, 37, 0.2);
    animation: mdModalIn 0.3s ease;
    display: flex;
    flex-direction: column;
}

@keyframes mdModalIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.md-modal-header {
    padding: 28px 32px 4px;
    position: relative;
}

.md-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--md-text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.2s,
        color 0.2s;
}

.md-modal-close:hover {
    background: var(--md-warm-white);
    color: var(--md-text-dark);
}

.md-modal-close svg {
    width: 18px;
    height: 18px;
}

.md-modal-title {
    font-family: "Instrument Serif", serif;
    font-size: 26px;
    font-weight: 400;
    color: var(--md-text-dark);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.md-modal-subtitle {
    font-size: 14px;
    font-weight: 300;
    color: var(--md-text-light);
    font-style: italic;
    margin: 0 0 10px;
}

.md-modal-body {
    padding: 12px 32px 24px;
    overflow-y: auto;
}

.md-modal-footer {
    padding: 0 32px 28px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.md-modal-errors {
    background: #fbebeb;
    border: 1px solid #e0c0c0;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13.5px;
    color: #7a3333;
}

.md-modal-errors ul {
    margin: 6px 0 0 18px;
    padding: 0;
}
.md-modal-errors li {
    margin: 2px 0;
}

/*
 * "Let it rest" confirmation modal
 *
 * A narrower, warmer variant of the .md-modal shell. Adds a botanical
 * leaf icon centered above the title at 25% opacity, generous body copy
 * spacing, and a centered footer to fit the contemplative tone of the
 * spec ("Some pieces need time...").
 */
.md-modal--rest {
    max-width: 460px;
    text-align: center;
}

.md-modal--rest .md-modal-header {
    padding: 36px 32px 0;
}

.md-rest-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    opacity: 0.25;
}

.md-rest-icon svg {
    width: 100%;
    height: 100%;
}

.md-modal--rest .md-modal-title {
    font-size: 28px;
}

.md-modal-body--rest {
    padding: 12px 36px 28px;
}

.md-rest-body {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--md-text-mid);
}

.md-modal--rest .md-modal-footer {
    justify-content: center;
    padding: 0 32px 32px;
}

.md-rest-confirm-form {
    margin: 0;
}

/*
 * Danger variant of the centered confirmation modal (used by the delete
 * dialog). Reuses the rest layout — narrow centered card, large icon at
 * 25% opacity above the title — but recolors the icon and primary button
 * to a muted burgundy that telegraphs destructive action without
 * shouting.
 *
 * Custom property `--md-danger` is scoped to the modal so the muted-red
 * tint is reusable across icon + button without literal hex copy.
 *
 * The actual `.md-modal-save--danger` and `--rest` button overrides live
 * with the rest of the modal-save block further down so they reliably
 * override the base `.md-modal-save` rule (same specificity, source order
 * decides — keep the variants AFTER the base).
 */
.md-modal--danger {
    --md-danger: #8b4f4f;
}

/*
 * The icon inherits its color via `currentColor` from `.md-rest-icon` so
 * the danger variant only needs to set the color — no SVG edits.
 * Opacity stays at 0.25 to match the rest-modal botanical icon, per spec.
 */
.md-rest-icon--danger {
    color: var(--md-danger);
}

/* ---- Form fields ---- */
.md-form-group {
    margin-bottom: 20px;
}

.md-form-group--bordered {
    border-top: 1px solid var(--md-border);
    padding-top: 20px;
    border-bottom: 1px solid var(--md-border);
    padding-bottom: 5px;
}

.md-form-group--indent {
    margin-top: 20px;
    margin-left: 20px;
}

.md-form-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--md-green-mid);
    margin-bottom: 8px;
}

.md-form-label-hint {
    font-weight: 300;
    text-transform: none;
    letter-spacing: 0;
    color: var(--md-text-light);
    font-style: italic;
    margin-left: 6px;
}

.md-form-input,
.md-form-select {
    width: 100%;
    padding: 11px 16px;
    border: 1px solid var(--md-border);
    border-radius: 6px;
    background: #fff;
    font-size: 15px;
    font-family: "DM Sans", sans-serif;
    color: var(--md-text-dark);
    outline: none;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.md-form-input:focus,
.md-form-select:focus {
    border-color: var(--md-green-soft);
    box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.08);
}

.md-form-input::placeholder {
    color: var(--md-text-light);
    font-weight: 300;
}

/* Italic-placeholder modifier — suggesting-text styling on inputs. */
.md-form-input--italic-placeholder::placeholder {
    font-style: italic;
}

/* Same treatment on Trix editors for empty-state placeholder text. */
trix-editor.md-form-richtext--italic-placeholder::before {
    font-style: italic;
}
trix-editor.md-form-richtext--italic-placeholder[placeholder]:empty::before {
    content: attr(placeholder);
    color: var(--md-text-light);
    font-weight: 300;
    font-style: italic;
}

.md-form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238A8A80' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}

.md-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Trix renders <trix-toolbar> as a SIBLING of <trix-editor>, not a parent or
   child. The `.md-form-richtext` class lives on the <trix-editor> itself,
   so target the editor directly and reach the adjacent toolbar via :has(). */
trix-editor.md-form-richtext {
    display: block;
    min-height: 80px;
    padding: 11px 16px;
    border: 1px solid var(--md-border);
    border-radius: 6px;
    background: #fff;
    font-family: "Instrument Serif", serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--md-text-dark);
}

trix-editor.md-form-richtext--tall {
    min-height: 160px;
}

trix-editor.md-form-richtext:focus {
    border-color: var(--md-green-soft);
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.06);
}

/* Toolbar precedes the editor: scope styles to a toolbar whose parent
   contains an .md-form-richtext editor. */
trix-toolbar:has(+ trix-editor.md-form-richtext) {
    margin-bottom: 4px;
}

/* Hide undo/redo to keep the toolbar narrow enough to fit on one row in the
   drawer and the modal. The browser's own undo/redo (Ctrl/Cmd+Z) still works. */
trix-toolbar:has(+ trix-editor.md-form-richtext)
    [data-trix-button-group="history-tools"] {
    display: none;
}

/* ---- Materials checkboxes ---- */
.md-materials-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.md-material-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid var(--md-border);
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    color: var(--md-text-mid);
    cursor: pointer;
    transition:
        border-color 0.2s,
        color 0.2s,
        background 0.2s;
    user-select: none;
}

.md-material-check:hover {
    border-color: var(--md-green-soft);
    color: var(--md-green-deep);
}

.md-material-check input[type="checkbox"],
.md-material-check input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.md-material-check:has(input:checked) {
    background: var(--md-green-pale);
    border-color: var(--md-green-soft);
    color: var(--md-green-deep);
    font-weight: 500;
}

.md-check-icon {
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--md-border-warm);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.2s,
        border-color 0.2s;
    flex-shrink: 0;
    color: #fff;
}

.md-check-icon svg {
    width: 10px;
    height: 10px;
    display: none;
}

.md-material-check:has(input:checked) .md-check-icon,
.md-upload-check:has(input:checked) .md-check-icon {
    background: var(--md-green-mid);
    border-color: var(--md-green-mid);
}

.md-material-check:has(input:checked) .md-check-icon svg,
.md-upload-check:has(input:checked) .md-check-icon svg {
    display: block;
}

/* ---- Upload toggle ---- */
.md-upload-toggle {
    background: var(--md-warm-white);
    border: 1px solid var(--md-border);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 0;
}

.md-upload-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--md-text-dark);
    user-select: none;
}

.md-upload-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.md-upload-check .md-check-icon {
    margin-top: 2px;
}

.md-upload-check strong {
    display: block;
    font-weight: 500;
    color: var(--md-text-dark);
}

.md-upload-check-desc {
    display: block;
    font-size: 12.5px;
    color: var(--md-text-light);
    font-weight: 300;
    margin-top: 2px;
}

/* ---- Footer buttons ---- */
.md-modal-cancel {
    padding: 11px 22px;
    background: transparent;
    border: 1px solid var(--md-border);
    border-radius: 6px;
    font-size: 14px;
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    color: var(--md-text-mid);
    cursor: pointer;
    transition:
        border-color 0.2s,
        color 0.2s;
}

.md-modal-cancel:hover {
    border-color: var(--md-border-warm);
    color: var(--md-text-dark);
}

.md-modal-save {
    padding: 11px 28px;
    background: var(--md-green-deep);
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    transition:
        background 0.2s,
        transform 0.15s,
        box-shadow 0.2s;
}

.md-modal-save:hover {
    background: var(--md-green-mid);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(45, 74, 53, 0.15);
}

/*
 * Variants of the primary modal button. These MUST live after the base
 * `.md-modal-save` rule above — they have the same specificity (one
 * class), so source order decides who wins.
 */

/* Rest confirmation: primary green that lifts on hover. */
.md-modal-save--rest {
    background: var(--md-green-mid);
}

.md-modal-save--rest:hover {
    background: var(--md-green-deep);
}

/* Delete confirmation: muted burgundy. The hover darkens (#6F3E3E)
   instead of brightening to keep the destructive action restrained. */
.md-modal-save--danger {
    background: var(--md-danger);
}

.md-modal-save--danger:hover {
    background: #6f3e3e;
    box-shadow: 0 6px 20px rgba(139, 79, 79, 0.2);
}

/* ---- Step 2: submission packet ---- */
.md-step2-intro {
    font-size: 14.5px;
    color: var(--md-text-mid);
    font-weight: 300;
    margin: 0 0 16px;
    line-height: 1.5;
}

.md-step2-intro strong {
    color: var(--md-green-deep);
    font-weight: 500;
}

.md-step2-loading {
    text-align: center;
    padding: 20px;
    font-size: 13px;
    color: var(--md-text-light);
    font-style: italic;
}

.md-packet {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.md-packet-form-card {
    background: var(--md-warm-white);
    border: 1px solid var(--md-border);
    border-radius: 8px;
    padding: 18px 20px;
}

.md-packet-form-title {
    font-family: "Instrument Serif", serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--md-text-dark);
    margin: 0 0 14px;
    letter-spacing: -0.005em;
}

.md-packet-list-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}

.md-packet-list-title {
    font-family: "Instrument Serif", serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--md-text-dark);
    margin: 0;
    letter-spacing: -0.005em;
}

.md-packet-list-count {
    font-size: 12px;
    color: var(--md-text-light);
    font-weight: 300;
    font-style: italic;
}

.md-packet-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---- Document card ---- */
.md-doc-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--md-border);
    border-radius: 8px;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.md-doc-card:hover {
    border-color: var(--md-border-warm);
    box-shadow: 0 2px 8px rgba(45, 74, 53, 0.04);
}

.md-doc-card-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.md-doc-card-headline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--md-text-dark);
    min-width: 0;
}

.md-doc-card-paperclip {
    width: 14px;
    height: 14px;
    color: var(--md-green-mid);
    flex-shrink: 0;
}

.md-doc-card-filename-link {
    color: var(--md-text-dark);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.15s;
}

.md-doc-card-filename-link:hover {
    color: var(--md-green-deep);
    text-decoration: underline;
}

.md-doc-card-filename-link--missing {
    color: var(--md-text-light);
    font-weight: 400;
    font-style: italic;
}

.md-doc-card-text-only {
    color: var(--md-text-dark);
    font-weight: 500;
}

/* Small kind chip in the corner of a document card. Uses the same pill shape
   as the form's chip-strip but at a smaller scale. */
.md-doc-card-kind-chip {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    flex-shrink: 0;
}

.md-doc-card-kind-chip--initial_submission {
    background: var(--md-green-pale);
    color: var(--md-green-deep);
}

.md-doc-card-kind-chip--material {
    background: #f2ebd9;
    color: #8c6f2a;
}

.md-doc-card-kind-chip--correspondence {
    background: #ece5f2;
    color: #6e4f8c;
}

.md-doc-card-details {
    font-family: "Instrument Serif", serif;
    font-size: 13.5px;
    font-style: italic;
    color: var(--md-text-mid);
    line-height: 1.5;
}

.md-doc-card-details > * {
    margin: 0;
}

.md-doc-card-meta {
    font-size: 11.5px;
    color: var(--md-text-light);
    font-weight: 300;
}

.md-doc-card-actions {
    display: flex;
    gap: 4px;
    opacity: 0.5;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.md-doc-card:hover .md-doc-card-actions {
    opacity: 1;
}

.md-doc-card-action {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: var(--md-text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.15s,
        color 0.15s;
    text-decoration: none;
}

.md-doc-card-action:hover {
    background: var(--md-green-wash);
    color: var(--md-green-deep);
}

.md-doc-card-action--danger:hover {
    background: #fbebeb;
    color: #b55;
}

.md-doc-card-action-icon {
    width: 14px;
    height: 14px;
}

.md-doc-card-delete-form {
    display: contents;
}

/* ---- Document form (used in modal + drawer) ---- */
.md-doc-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.md-doc-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* trix-editor renders as block-level but doesn't constrain itself in narrow
   flex columns. Force it to respect parent width. */
.md-doc-form trix-editor,
.md-doc-form .trix-content {
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
}

/* Secondary fields (e.g. the small "attach a file too" affordance under the
   primary textarea on initial-submission/correspondence forms) sit slightly
   indented and muted to keep visual hierarchy. */
.md-doc-form-field--secondary {
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.015);
    border-radius: 6px;
    margin-top: 4px;
}

.md-doc-form-field--secondary .md-doc-form-label {
    color: var(--md-text-light);
}

.md-doc-form-label {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--md-green-mid);
}

.md-doc-form-file {
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    color: var(--md-text-mid);
    padding: 8px 12px;
    background: #fff;
    border: 1px solid var(--md-border);
    border-radius: 6px;
    cursor: pointer;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.md-doc-form-file:hover,
.md-doc-form-file:focus {
    border-color: var(--md-green-soft);
    box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.06);
    outline: none;
}

.md-doc-form-file::file-selector-button {
    margin-right: 12px;
    padding: 5px 12px;
    border: 1px solid var(--md-border-warm);
    border-radius: 5px;
    background: var(--md-warm-white);
    font-family: "DM Sans", sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--md-text-mid);
    cursor: pointer;
    transition:
        border-color 0.2s,
        color 0.2s,
        background 0.2s;
}

.md-doc-form-file::file-selector-button:hover {
    border-color: var(--md-green-soft);
    color: var(--md-green-deep);
    background: #fff;
}

.md-doc-form-current-file {
    font-size: 12px;
    color: var(--md-text-light);
    font-weight: 300;
    margin: 0;
}

.md-doc-form-current-file strong {
    color: var(--md-text-mid);
    font-weight: 500;
}

.md-doc-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

/* Quiet chip-strip selector for picking a Document kind. */
.md-doc-form-kind {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    background: rgba(0, 0, 0, 0.025);
    border-radius: 999px;
    align-self: flex-start;
}

.md-doc-form-chip {
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--md-text-light);
    padding: 5px 12px;
    border: none;
    background: transparent;
    border-radius: 999px;
    cursor: pointer;
    transition:
        color 0.15s,
        background 0.15s;
    letter-spacing: 0.01em;
    text-decoration: none;
}

.md-doc-form-chip:hover {
    color: var(--md-green-deep);
}

.md-doc-form-chip.is-selected {
    background: #fff;
    color: var(--md-green-deep);
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(45, 74, 53, 0.06);
}

/* Compact variant of the green save button used in nested forms. */
.md-modal-save--sm {
    padding: 8px 18px;
    font-size: 13px;
}

/* ---- Empty state ---- */
.md-doc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
    gap: 8px;
}

.md-doc-empty-icon {
    width: 48px;
    height: 48px;
    color: var(--md-border-warm);
}

.md-doc-empty-text {
    font-family: "Instrument Serif", serif;
    font-size: 14.5px;
    font-style: italic;
    color: var(--md-text-light);
    margin: 0;
}

/* ---- Initial submission card (file upload + paste-text expandable) ---- */
.md-init-card {
    background: var(--md-warm-white);
    border: 1px solid var(--md-border);
    border-radius: 10px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.md-init-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.md-init-card-title {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--md-green-mid);
}

.md-init-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid var(--md-border);
    border-radius: 6px;
    font-family: "DM Sans", sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--md-text-mid);
    cursor: pointer;
    transition:
        border-color 0.15s,
        color 0.15s,
        background 0.15s;
}

.md-init-upload-btn:hover {
    border-color: var(--md-green-soft);
    color: var(--md-green-deep);
    background: var(--md-warm-white);
}

.md-init-upload-btn-icon {
    width: 12px;
    height: 12px;
}

/* The actual <input type="file"> stays in the DOM (so the form serializes it
   normally) but is visually hidden. Click and drop interactions are routed
   through the drop zone via Stimulus. */
.md-init-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.md-init-drop-zone {
    border: 1.5px dashed var(--md-border-warm);
    border-radius: 8px;
    padding: 28px 20px;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition:
        border-color 0.15s,
        background 0.15s;
}

.md-init-drop-zone:hover,
.md-init-drop-zone.is-dragover {
    border-color: var(--md-green-soft);
    background: var(--md-green-wash);
}

.md-init-drop-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    pointer-events: none; /* clicks pass through to the drop zone */
}

.md-init-drop-icon {
    width: 28px;
    height: 28px;
    color: var(--md-border-warm);
}

.md-init-drop-prompt {
    font-family: "Instrument Serif", serif;
    font-size: 14.5px;
    font-style: italic;
    color: var(--md-text-light);
    margin: 0;
}

.md-init-drop-filled {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    min-width: 0;
}

.md-init-drop-filled-icon {
    width: 16px;
    height: 16px;
    color: var(--md-green-mid);
}

.md-init-drop-filled-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--md-text-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

.md-init-drop-clear {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--md-text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.15s,
        color 0.15s;
}

.md-init-drop-clear:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--md-text-dark);
}

.md-init-drop-clear-icon {
    width: 12px;
    height: 12px;
}

.md-init-paste {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.md-init-paste-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    border: none;
    background: transparent;
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    color: var(--md-text-light);
    cursor: pointer;
    transition: color 0.15s;
    align-self: flex-start;
}

.md-init-paste-toggle:hover {
    color: var(--md-green-deep);
}

.md-init-paste-caret {
    width: 12px;
    height: 12px;
    transition: transform 0.2s;
}

.md-init-paste.is-expanded .md-init-paste-caret {
    transform: rotate(90deg);
}

/* Always-visible notes inside the kind card (used by Material + Correspondence
   sub-forms; Initial Submission uses .md-init-paste with a toggle). */
.md-init-notes {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .md-modal-overlay {
        padding: 24px 12px;
    }
    .md-modal {
        max-width: 100%;
    }
    .md-modal-header {
        padding: 22px 20px 4px;
    }
    .md-modal-body {
        padding: 12px 20px 20px;
    }
    .md-modal-footer {
        padding: 0 20px 20px;
    }
    .md-form-row {
        grid-template-columns: 1fr;
    }
    .md-modal-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .md-modal-cancel,
    .md-modal-save {
        justify-content: center;
        text-align: center;
    }
}

/* ===========================================================================
 * COMPS SECTION
 *
 * Two stacked sub-sections inside one .md-section: the "Comparable works"
 * list of comps and the "How this piece converses" list of comp paragraphs.
 * The link between them is data-driven (comp ids on each side) and
 * visualised by the .is-active / .is-related / .is-dimmed states. The
 * Stimulus actions on each row/card toggle those classes on the *whole
 * comps section* so the dim/highlight is a coordinated read across both
 * sub-sections. See manuscript_detail_controller.js#highlightFromComp.
 * =========================================================================== */

.md-comps-section {
    /* Used as a positioning context so future absolutely-positioned
     decorations (e.g. a botanical motif behind the section heading) can
     anchor without affecting the layout. Also gives the highlight states
     a single ancestor to scope under. */
    position: relative;
}

.md-comps-subhead-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0 14px;
}

/* Generous extra space between the two sub-sections — they're related but
   distinct. Without this they read as one continuous list. */
.md-comps-subhead-row--with-spacing {
    margin-top: 36px;
}

.md-comps-subhead {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--md-green-mid);
    margin: 0;
}

/* ---- Comparable works list ---- */
.md-comps-list {
    background: var(--md-warm-white);
    border: 1px solid var(--md-border);
    border-radius: 8px;
    overflow: hidden;
}

.md-comp-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: start;
    padding: 16px 22px;
    border-bottom: 1px solid var(--md-border);
    /* Transition both background and opacity so the highlight states feel
     coherent (one easing curve for the whole effect rather than two
     stutters). */
    transition:
        background 0.15s ease,
        opacity 0.15s ease,
        border-color 0.15s ease;
}

.md-comp-row:last-child {
    border-bottom: none;
}
.md-comp-row:hover {
    background: rgba(232, 240, 234, 0.3);
}

.md-comp-main {
    min-width: 0;
}

.md-comp-title {
    font-family: "Instrument Serif", serif;
    font-size: 16.5px;
    font-weight: 400;
    color: var(--md-text-dark);
    line-height: 1.3;
    margin-bottom: 3px;
}

.md-comp-author {
    font-size: 12.5px;
    color: var(--md-text-light);
    font-weight: 300;
    margin-bottom: 6px;
}

.md-comp-note {
    font-family: "Instrument Serif", serif;
    font-size: 14px;
    font-style: italic;
    color: var(--md-text-mid);
    font-weight: 400;
    line-height: 1.5;
}

/* Single right-column slot — actions and confirm share it; only one
   shows at a time. */
.md-comp-actions-slot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.md-comp-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    /* Hidden at rest so the list reads as content. */
    opacity: 0;
    transition: opacity 0.2s ease;
}

.md-comp-row:hover .md-comp-actions,
.md-comp-row:focus-within .md-comp-actions {
    opacity: 1;
}

/* form_with wraps the X in a <form>; squash margins. */
.md-comp-actions form,
.md-comp-actions .md-comp-remove-form {
    margin: 0;
    display: inline-flex;
}

/* Labeled Edit button — matches the pitch card's action-btn shape. */
.md-comp-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--md-border);
    border-radius: 5px;
    font-size: 11.5px;
    line-height: 1;
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    color: var(--md-text-mid);
    cursor: pointer;
    text-decoration: none;
    transition:
        border-color 0.2s,
        color 0.2s,
        background 0.2s;
}

.md-comp-edit-btn:hover {
    border-color: var(--md-green-soft);
    color: var(--md-green-deep);
    background: #fff;
}

.md-comp-edit-btn svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* X-only — the inline confirm step carries the verbal ask. */
.md-comp-remove-btn {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--md-text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.2s,
        color 0.2s,
        border-color 0.2s;
    padding: 0;
}

.md-comp-remove-btn:hover {
    background: #fbebeb;
    border-color: #e0c0c0;
    color: #9a5555;
}

.md-comp-remove-btn svg {
    width: 13px;
    height: 13px;
}

/* Inline "Remove this comp?" — swaps in for the actions in the same slot. */
.md-comp-remove-confirm {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    justify-self: end;
}

.md-comp-remove-confirm-text {
    color: var(--md-text-mid);
    font-weight: 500;
}

.md-comp-remove-confirm-cancel,
.md-comp-remove-confirm-yes {
    padding: 5px 10px;
    height: 28px;
    border-radius: 5px;
    font-size: 11.5px;
    line-height: 1;
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition:
        border-color 0.2s,
        color 0.2s,
        background 0.2s;
}

.md-comp-remove-confirm-cancel {
    background: transparent;
    border: 1px solid var(--md-border);
    color: var(--md-text-mid);
}

.md-comp-remove-confirm-cancel:hover {
    border-color: var(--md-green-soft);
    color: var(--md-green-deep);
    background: #fff;
}

.md-comp-remove-confirm-yes {
    background: #fbebeb;
    border: 1px solid #e0c0c0;
    color: #9a5555;
}

.md-comp-remove-confirm-yes:hover {
    background: #f4d9d9;
    border-color: #c99c9c;
    color: #7a3f3f;
}

/* Brief fade-out while the DELETE submits. */
.md-comp-row.is-removing {
    opacity: 0;
    transform: translateY(-4px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

/* ---- Empty state (shared for both sub-sections) ---- */
.md-comps-empty {
    background: var(--md-warm-white);
    border: 1px dashed var(--md-border-warm);
    border-radius: 8px;
    padding: 24px 28px;
    text-align: center;
    color: var(--md-text-light);
    font-size: 14px;
    font-weight: 300;
}

.md-comps-empty p {
    margin: 0;
}

/* ---- Comp paragraphs list ---- */
.md-comp-paragraphs-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.md-comp-paragraph-card {
    background: var(--md-warm-white);
    border: 1px solid var(--md-border);
    border-radius: 8px;
    padding: 22px 26px;
    transition:
        background 0.15s ease,
        opacity 0.15s ease,
        border-color 0.15s ease;
}

.md-comp-paragraph-card:hover {
    border-color: var(--md-border-warm);
}

.md-comp-paragraph-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.md-comp-paragraph-meta {
    min-width: 0;
}

.md-comp-paragraph-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--md-green-mid);
    margin-bottom: 2px;
}

.md-comp-paragraph-wordcount {
    font-size: 12px;
    color: var(--md-text-light);
    font-weight: 300;
}

.md-comp-paragraph-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.md-comp-paragraph-card:hover .md-comp-paragraph-actions,
.md-comp-paragraph-card:focus-within .md-comp-paragraph-actions {
    opacity: 1;
}

/* Labeled action button (Copy / Edit) — shape matches .md-pitch-card-action-btn. */
.md-comp-paragraph-action-btn,
.md-comp-paragraph-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--md-border);
    border-radius: 5px;
    font-size: 11.5px;
    line-height: 1;
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    color: var(--md-text-mid);
    cursor: pointer;
    text-decoration: none;
    transition:
        border-color 0.2s,
        color 0.2s,
        background 0.2s;
}

.md-comp-paragraph-action-btn:hover,
.md-comp-paragraph-edit-btn:hover {
    border-color: var(--md-green-soft);
    color: var(--md-green-deep);
    background: #fff;
}

.md-comp-paragraph-action-btn svg,
.md-comp-paragraph-edit-btn svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Copy's label is a span so the controller can swap icon + text together. */
.md-comp-paragraph-action-btn [data-comp-paragraph-card-target="copyLabel"] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}

/* Copied state — green tint + checkmark for 1.5s. */
.md-comp-paragraph-action-btn.is-copied,
.md-comp-paragraph-action-btn.is-copied:hover {
    border-color: var(--md-green-mid);
    color: var(--md-green-deep);
    background: #eef5ee;
}

.md-comp-paragraph-remove-btn {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--md-text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.2s,
        color 0.2s,
        border-color 0.2s;
    padding: 0;
}

.md-comp-paragraph-remove-btn:hover {
    background: #fbebeb;
    border-color: #e0c0c0;
    color: #9a5555;
}

.md-comp-paragraph-remove-btn svg {
    width: 13px;
    height: 13px;
}

/* form_with wraps the X in a <form>; squash margins. */
.md-comp-paragraph-actions form,
.md-comp-paragraph-actions .md-comp-paragraph-remove-form {
    margin: 0;
    display: inline-flex;
}

/* Inline "Remove this paragraph?" — swaps in for the actions. */
.md-comp-paragraph-remove-confirm {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
}

.md-comp-paragraph-remove-confirm-text {
    color: var(--md-text-mid);
    font-weight: 500;
}

.md-comp-paragraph-remove-confirm-cancel,
.md-comp-paragraph-remove-confirm-yes {
    padding: 5px 10px;
    height: 28px;
    border-radius: 5px;
    font-size: 11.5px;
    line-height: 1;
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition:
        border-color 0.2s,
        color 0.2s,
        background 0.2s;
}

.md-comp-paragraph-remove-confirm-cancel {
    background: transparent;
    border: 1px solid var(--md-border);
    color: var(--md-text-mid);
}

.md-comp-paragraph-remove-confirm-cancel:hover {
    border-color: var(--md-green-soft);
    color: var(--md-green-deep);
    background: #fff;
}

.md-comp-paragraph-remove-confirm-yes {
    background: #fbebeb;
    border: 1px solid #e0c0c0;
    color: #9a5555;
}

.md-comp-paragraph-remove-confirm-yes:hover {
    background: #f4d9d9;
    border-color: #c99c9c;
    color: #7a3f3f;
}

/* Brief fade-out while the DELETE submits. */
.md-comp-paragraph-card.is-removing {
    opacity: 0;
    transform: translateY(-4px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.md-comp-paragraph-body {
    font-family: "Instrument Serif", serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--md-text-dark);
    font-weight: 400;
}

.md-comp-paragraph-body p {
    margin: 0 0 0.6em;
}
.md-comp-paragraph-body p:last-child {
    margin-bottom: 0;
}

/* ---- "References" footer on each paragraph card ---- */
.md-comp-paragraph-refs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed var(--md-border);
}

.md-comp-paragraph-refs-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--md-text-light);
    margin-right: 4px;
}

.md-comp-paragraph-ref-chip {
    display: inline-block;
    padding: 2px 10px;
    background: var(--md-green-wash);
    border: 1px solid var(--md-border);
    border-radius: 100px;
    font-family: "Instrument Serif", serif;
    font-size: 13px;
    color: var(--md-text-mid);
    transition:
        border-color 0.15s ease,
        color 0.15s ease,
        background 0.15s ease;
}

.md-comp-paragraph-ref-chip em {
    font-style: italic;
}

/* ---- Highlight states (driven by Stimulus on hover) ----
 *
 * Three classes, applied to the section element by the controller:
 *   .md-highlighting       — at least one element is being hovered
 *   .is-active             — the element under the cursor (comp or card)
 *   .is-related            — the *other-side* elements linked to the active one
 *   .is-dimmed             — everything else (only visible when highlighting)
 *
 * The dimming is opacity-only so the dimmed cards remain laid-out and
 * scrollable; clicking a dimmed comp card still works (and re-anchors the
 * highlight). Active gets a tinted background + a left border accent so
 * it reads as the *source* of the highlight. Related gets the same accent
 * at half-strength + a slight bg lift so it reads as receiving the link.
 */
.md-comps-section.md-highlighting .md-comp-row,
.md-comps-section.md-highlighting .md-comp-paragraph-card {
    /* Default state during a highlight: dimmed unless explicitly marked
     active or related. Cheaper than tagging every non-match. */
    opacity: 0.4;
}

.md-comps-section.md-highlighting .md-comp-row.is-active,
.md-comps-section.md-highlighting .md-comp-row.is-related,
.md-comps-section.md-highlighting .md-comp-paragraph-card.is-active,
.md-comps-section.md-highlighting .md-comp-paragraph-card.is-related {
    opacity: 1;
}

.md-comp-row.is-active,
.md-comp-paragraph-card.is-active {
    background: var(--md-green-wash);
    border-color: var(--md-green-soft);
    box-shadow: inset 3px 0 0 0 var(--md-green-mid);
}

.md-comp-row.is-related,
.md-comp-paragraph-card.is-related {
    background: rgba(232, 240, 234, 0.55);
    border-color: var(--md-green-soft);
    box-shadow: inset 3px 0 0 0 var(--md-green-pale);
}

/* When the section is in highlight mode, the chip in the active card's
   References footer for the hovered comp gets a small accent — a subtle
   confirmation of "yes, this is the one being linked". Targeted via a
   CSS-only attribute selector so we don't need extra Stimulus targets. */
.md-comp-paragraph-card.is-active .md-comp-paragraph-ref-chip[data-comp-id] {
    /* Default chip styling stays — only the chip matching the active comp
     is recolored, via a JS-set `data-active="true"` attribute. */
}

.md-comp-paragraph-ref-chip[data-active="true"] {
    background: #fff;
    border-color: var(--md-green-mid);
    color: var(--md-green-deep);
}

/* ---- Reference checkbox grid (in the paragraph form modal) ---- */
.md-comp-checkbox-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.md-comp-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--md-border);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition:
        border-color 0.2s,
        background 0.2s;
}

.md-comp-checkbox:hover {
    border-color: var(--md-green-soft);
}

.md-comp-checkbox input[type="checkbox"] {
    margin-top: 4px;
}

.md-comp-checkbox
    input[type="checkbox"]:checked
    ~ .md-comp-checkbox-label
    .md-comp-checkbox-meta {
    color: var(--md-green-mid);
}

.md-comp-checkbox-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
    color: var(--md-text-dark);
}

.md-comp-checkbox-label em {
    font-family: "Instrument Serif", serif;
    font-style: italic;
}

.md-comp-checkbox-meta {
    font-size: 12px;
    color: var(--md-text-light);
    font-weight: 300;
}

/* Form hint shown above grouped controls (e.g. "Tick the comps..."). */
.md-form-hint {
    font-size: 12.5px;
    color: var(--md-text-light);
    font-weight: 300;
    font-style: italic;
    margin: -4px 0 8px;
}

.md-form-textarea {
    font-family: "Instrument Serif", serif;
    font-size: 15.5px;
    line-height: 1.65;
    resize: vertical;
}

/* =============================================================
 * PITCHES & SUMMARIES section
 *
 * Visually mirrors the comp-paragraph cards (same warm card chrome,
 * uppercase green-mid label, serif body, faded actions on hover) but
 * adds two affordances comp paragraphs don't have:
 *   1. A Copy button with an "is-copied" success state.
 *   2. An inline edit panel (textarea swap), driven by the
 *      `pitch-card` Stimulus controller toggling `[hidden]` on the
 *      view body / edit panel.
 *
 * Remove fade-out is the `.is-removing` class — the controller adds
 * it just before the DELETE form submits so the card has time to
 * visually transition before the turbo_stream replaces the list.
 * ============================================================= */

.md-pitches-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.md-pitches-empty {
    background: var(--md-warm-white);
    border: 1px dashed var(--md-border-warm);
    border-radius: 8px;
    padding: 24px 28px;
    text-align: center;
    color: var(--md-text-light);
    font-size: 14px;
    font-weight: 300;
}

.md-pitches-empty p {
    margin: 0;
}

.md-pitch-card {
    background: var(--md-warm-white);
    border: 1px solid var(--md-border);
    border-radius: 8px;
    padding: 22px 26px;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        border-color 0.15s ease;
    /* Animate-in for newly-added cards. The .md-pitches-list re-renders
     wholesale on add, so all cards run this — the effect is subtle
     enough that re-running it on existing cards isn't disruptive. */
    animation: md-pitch-fade-in 0.35s ease-out;
}

.md-pitch-card:hover {
    border-color: var(--md-border-warm);
}

/* Fade-out applied just before the DELETE submits, so the card has
   visible feedback before the turbo_stream replaces the list. */
.md-pitch-card.is-removing {
    opacity: 0;
    transform: translateY(-4px);
}

@keyframes md-pitch-fade-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.md-pitch-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.md-pitch-card-meta {
    min-width: 0;
}

.md-pitch-card-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--md-green-mid);
    margin-bottom: 2px;
}

.md-pitch-card-wordcount {
    font-size: 12px;
    color: var(--md-text-light);
    font-weight: 300;
}

.md-pitch-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.md-pitch-card:hover .md-pitch-card-actions,
.md-pitch-card:focus-within .md-pitch-card-actions {
    opacity: 1;
}

.md-pitch-card-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--md-border);
    border-radius: 5px;
    font-size: 11.5px;
    line-height: 1;
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    color: var(--md-text-mid);
    cursor: pointer;
    text-decoration: none;
    transition:
        border-color 0.2s,
        color 0.2s,
        background 0.2s;
}

.md-pitch-card-action-btn:hover {
    border-color: var(--md-green-soft);
    color: var(--md-green-deep);
    background: #fff;
}

.md-pitch-card-action-btn svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Copy's content sits inside a <span data-pitch-card-target="copyLabel">
   so the controller can swap label+icon together for the "Copied" state.
   Without an explicit flex layout the span renders inline and the SVG
   wraps below the text — match the parent button's row layout so the
   icon and label align with Edit's icon+label. */
.md-pitch-card-action-btn [data-pitch-card-target="copyLabel"] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}

/* Copied state — green tint with a check icon. The text is replaced
   client-side in the Stimulus controller, but the color cue here
   gives the visual "yes, it worked" beat. */
.md-pitch-card-action-btn.is-copied,
.md-pitch-card-action-btn.is-copied:hover {
    border-color: var(--md-green-mid);
    color: var(--md-green-deep);
    background: #eef5ee;
}

.md-pitch-card-remove-btn {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--md-text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.2s,
        color 0.2s,
        border-color 0.2s;
    padding: 0;
}

.md-pitch-card-remove-btn:hover {
    background: #fbebeb;
    border-color: #e0c0c0;
    color: #9a5555;
}

.md-pitch-card-remove-btn svg {
    width: 13px;
    height: 13px;
}

/* `form_with` wraps the X button in a <form>; reset the form's default
   margin so the action row doesn't pick up extra trailing space. */
.md-pitch-card-actions form {
    margin: 0;
    display: inline-flex;
}

/* Inline "Remove this pitch?" confirmation that swaps in for the
   actions row. Sits in the same top-right slot of the card header
   so the eye doesn't have to track to a modal. */
.md-pitch-card-remove-confirm {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
}

.md-pitch-card-remove-confirm-text {
    color: var(--md-text-mid);
    font-weight: 500;
}

.md-pitch-card-remove-confirm-cancel,
.md-pitch-card-remove-confirm-yes {
    padding: 5px 10px;
    height: 28px;
    border-radius: 5px;
    font-size: 11.5px;
    line-height: 1;
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition:
        border-color 0.2s,
        color 0.2s,
        background 0.2s;
}

.md-pitch-card-remove-confirm-cancel {
    background: transparent;
    border: 1px solid var(--md-border);
    color: var(--md-text-mid);
}

.md-pitch-card-remove-confirm-cancel:hover {
    border-color: var(--md-green-soft);
    color: var(--md-green-deep);
    background: #fff;
}

.md-pitch-card-remove-confirm-yes {
    background: #fbebeb;
    border: 1px solid #e0c0c0;
    color: #9a5555;
}

.md-pitch-card-remove-confirm-yes:hover {
    background: #f4d9d9;
    border-color: #c99c9c;
    color: #7a3f3f;
}

.md-pitch-card-body {
    font-family: "Instrument Serif", serif;
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--md-text-dark);
    font-weight: 400;
    /* Cap how much vertical real estate a single pitch can claim — long
     synopses scroll inside the card instead of pushing every other
     section off the page. ~10 lines at the body line-height. */
    max-height: 140px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.md-pitch-card-body p {
    margin: 0 0 0.6em;
}
.md-pitch-card-body p:last-child {
    margin-bottom: 0;
}

/* ---- Inline edit panel ----
 * When the per-card turbo-frame holds the loaded edit form, hide the
 * read-only sections so the card visually "becomes" the form.
 */
.md-pitch-card:has(turbo-frame > form.md-pitch-card-edit) .md-pitch-card-body,
.md-pitch-card:has(turbo-frame > form.md-pitch-card-edit)
    .md-pitch-card-header {
    display: none;
}

.md-pitch-card-edit {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Label row sits above the body editor — small uppercase tag like the
   read-mode label, then a roomy text input. */
.md-pitch-card-edit-label-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.md-pitch-card-edit-label-tag {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--md-green-mid);
    flex-shrink: 0;
}

.md-pitch-card-edit-label-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--md-border);
    border-radius: 6px;
    background: #fff;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    color: var(--md-text-dark);
    outline: none;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.md-pitch-card-edit-label-input:focus {
    border-color: var(--md-green-soft);
    box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.08);
}

.md-pitch-card-edit-textarea {
    width: 100%;
    min-height: 140px;
    /* Mirror the view-mode body cap so a long edit doesn't blow the
     card out vertically — content scrolls inside the textarea. */
    max-height: 320px;
    padding: 14px 16px;
    border: 1px solid var(--md-border-warm);
    border-radius: 6px;
    background: #fff;
    font-family: "Instrument Serif", serif;
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--md-text-dark);
    resize: vertical;
}

.md-pitch-card-edit-textarea:focus {
    outline: none;
    border-color: var(--md-green-mid);
    box-shadow: 0 0 0 3px rgba(116, 145, 110, 0.15);
}

.md-pitch-card-edit-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.md-pitch-card-edit-cancel,
.md-pitch-card-edit-save {
    padding: 6px 14px;
    border-radius: 5px;
    font-family: "DM Sans", sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition:
        background 0.2s,
        color 0.2s,
        border-color 0.2s;
}

.md-pitch-card-edit-cancel {
    background: transparent;
    border: 1px solid var(--md-border);
    color: var(--md-text-mid);
}

.md-pitch-card-edit-cancel:hover {
    border-color: var(--md-border-warm);
    color: var(--md-text-dark);
}

.md-pitch-card-edit-save {
    background: var(--md-green-deep);
    border: 1px solid var(--md-green-deep);
    color: #fff;
}

.md-pitch-card-edit-save:hover {
    background: var(--md-green-mid);
    border-color: var(--md-green-mid);
}

.md-pitch-card-edit-save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Force-show the textarea-only variant with serif placeholder so
   the modal "Add a pitch" textarea matches the inline edit one. */
.md-form-textarea--serif {
    font-family: "Instrument Serif", serif;
    font-size: 16.5px;
    line-height: 1.7;
    min-height: 160px;
}

/* =============================================================
 * DRAFTS section
 *
 * Visually parallel to the pitches section: same warm card chrome,
 * hover-revealed action row, soft fade-out on remove. Differences
 * specific to drafts:
 *   - A persistent "Current" badge on the active version (small green
 *     pill in the card header).
 *   - "Set as current" pill on non-current cards, which sits in the
 *     same hover-revealed action row as Preview/Download/X.
 *   - File metadata line (filename + size + attached date) below the
 *     name / change-summary, since the card represents an actual file.
 *
 * Remove flow uses the `remove_draft_modal` confirm modal (mirrors the
 * resting/delete confirm modals) rather than the inline two-stage
 * popover Pitches uses, because the reassurance copy about submission
 * history needs the room.
 * ============================================================= */

.md-drafts-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.md-drafts-list .draft-hidden {
    display: none;
}
.md-drafts-list.expanded .draft-hidden {
    display: block;
}

.md-drafts-empty {
    background: var(--md-warm-white);
    border: 1px dashed var(--md-border-warm);
    border-radius: 8px;
    padding: 24px 28px;
    text-align: center;
    color: var(--md-text-light);
    font-size: 14px;
    font-weight: 300;
}

.md-drafts-empty p {
    margin: 0;
}

.md-draft-card {
    background: var(--md-warm-white);
    border: 1px solid var(--md-border);
    border-radius: 8px;
    padding: 22px 26px;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        border-color 0.15s ease;
    animation: md-pitch-fade-in 0.35s ease-out;
}

.md-draft-card:hover {
    border-color: var(--md-border-warm);
}

/* Current draft gets a soft green left-edge so the active version
   reads at a glance even when the row's actions aren't being hovered. */
.md-draft-card.is-current {
    border-color: var(--md-green-quiet);
    background: linear-gradient(
        to right,
        var(--md-green-pale),
        var(--md-warm-white) 60%
    );
}

.md-draft-card.is-current .md-draft-card-icon {
    background: var(--md-green-pale);
    color: var(--md-text-mid);
}

.md-draft-card.is-removing {
    opacity: 0;
    transform: translateY(-4px);
}

.md-draft-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.md-draft-card-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--md-green-wash);
    color: var(--md-green-deep);
}

.md-draft-card-icon svg {
    width: 18px;
    height: 18px;
}

.md-draft-card-meta {
    min-width: 0;
    flex: 1;
}

.md-draft-card-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.md-draft-card-name {
    font-family: "Instrument Serif", serif;
    font-size: 18px;
    color: var(--md-text-dark);
    line-height: 1.3;
}

.md-draft-card-current-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #eef5ee;
    color: var(--md-green-deep);
    font-family: "DM Sans", sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.md-draft-card-current-badge svg {
    width: 11px;
    height: 11px;
}

.md-draft-in-use-list {
    list-style: disc;
    padding-left: 22px;
    margin: 8px 0 14px;
    color: var(--md-text-mid);
    font-size: 14px;
}

.md-draft-in-use-list li {
    margin-bottom: 4px;
}

.md-draft-in-use-date {
    color: var(--md-text-light);
    font-weight: 300;
}

.md-draft-card-variant-badge,
.md-step2-draft-variant-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--md-warm-white);
    border: 1px solid var(--md-border);
    color: var(--md-text-mid);
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.md-draft-card-summary {
    font-size: 13.5px;
    color: var(--md-text-mid);
    font-style: italic;
    font-weight: 300;
    margin-bottom: 6px;
    line-height: 1.4;
}

.md-draft-card-fileinfo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    color: var(--md-text-light);
    font-weight: 300;
}

.md-draft-card-filename {
    color: var(--md-text-mid);
    font-weight: 400;
    word-break: break-all;
}

.md-draft-card-filemeta {
    white-space: nowrap;
}

.md-draft-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.md-draft-card:hover .md-draft-card-actions,
.md-draft-card:focus-within .md-draft-card-actions {
    opacity: 1;
}

.md-draft-card-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--md-border);
    border-radius: 5px;
    font-size: 11.5px;
    line-height: 1;
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    color: var(--md-text-mid);
    cursor: pointer;
    text-decoration: none;
    transition:
        border-color 0.2s,
        color 0.2s,
        background 0.2s;
}

.md-draft-card-action-btn:hover {
    border-color: var(--md-green-soft);
    color: var(--md-green-deep);
    background: #fff;
}

.md-draft-card-action-btn svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Promote (Set as current) stands out a touch with a green tint, since
   it's the most consequential of the row's affordances. */
.md-draft-card-action-btn--promote {
    color: var(--md-green-deep);
    border-color: var(--md-green-soft);
}

.md-draft-card-action-btn--promote:hover {
    background: #eef5ee;
}

.md-draft-card-set-current-form {
    margin: 0;
    display: inline-flex;
}

.md-draft-card-remove-btn {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--md-text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.2s,
        color 0.2s,
        border-color 0.2s;
    padding: 0;
    text-decoration: none;
}

.md-draft-card-remove-btn:hover {
    background: #fbebeb;
    border-color: #e0c0c0;
    color: #9a5555;
}

.md-draft-card-remove-btn svg {
    width: 13px;
    height: 13px;
}

.md-modal--preview {
    max-width: 960px;
    width: calc(100vw - 64px);
    height: calc(100vh - 80px);
    max-height: calc(100vh - 80px);
}

.md-draft-preview-body {
    flex: 1;
    min-height: 0;
    padding: 0;
    background: var(--md-warm-white);
    display: flex;
    flex-direction: column;
}

.md-draft-preview-iframe {
    flex: 1;
    width: 100%;
    border: 0;
    background: var(--md-warm-white);
}

.md-draft-preview-image-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--md-warm-white);
}

.md-draft-preview-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.md-draft-preview-docx {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: auto;
    padding: 24px;
    background: var(--md-warm-white);
}

.md-draft-preview-docx-container {
    max-width: 820px;
    margin: 0 auto;
}

.md-draft-preview-docx-container .md-docx {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.md-draft-preview-loading,
.md-draft-preview-fallback {
    padding: 32px 24px;
    text-align: center;
    color: var(--md-text-muted);
    font-size: 14px;
}

.md-draft-preview-fallback p {
    margin: 0 0 8px;
}

/* Pen-edit affordance next to DRAFT SENT / SUBMISSION PACKET / QUERY
   LETTER labels. All three open the same edit_materials modal — the
   icon's "title" attribute carries the section-specific label so a11y
   tooltips read meaningfully. Always visible (not hover-revealed) so
   the writer can see the editing surface at a glance. Subtle in the
   default state; lifts to green on hover. */
.md-sub-edit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    color: var(--md-text-light);
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease;
    text-decoration: none;
    padding: 0;
    margin-left: 4px;
}

.md-sub-edit-icon:hover {
    background: #eef5ee;
    color: var(--md-green-deep);
}

.md-sub-edit-icon-svg {
    width: 13px;
    height: 13px;
}

/* =============================================================
 * STEP 2 DRAFTS ZONE — log-submission "Materials" modal
 *
 * Sits above the existing kind-chip documents frame inside step 2.
 * Lets the writer pick which manuscript draft was the version sent
 * with this submission (provenance only — no file clone).
 *
 * Visually distinct from the manuscript-page draft cards: tighter
 * padding, no hover-reveal action row (always-visible Use/Selected
 * affordances since the drafts zone is itself a transient surface
 * inside a modal).
 * ============================================================= */

.md-step2-drafts {
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--md-border);
}

.md-step2-drafts-header {
    margin-bottom: 12px;
}

.md-step2-drafts-title {
    font-family: "Instrument Serif", serif;
    font-size: 18px;
    color: var(--md-text-dark);
    margin: 0 0 4px;
}

.md-step2-drafts-desc {
    font-size: 13px;
    color: var(--md-text-light);
    font-weight: 300;
    margin: 0;
}

.md-step2-drafts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 4px;
}

.md-step2-drafts-empty {
    background: var(--md-warm-white);
    border: 1px dashed var(--md-border-warm);
    border-radius: 6px;
    padding: 14px 18px;
    text-align: center;
    color: var(--md-text-light);
    font-size: 13px;
    font-weight: 300;
}

.md-step2-drafts-empty p {
    margin: 0;
}

.md-step2-draft-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--md-border);
    border-radius: 6px;
    background: #fff;
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}

.md-step2-draft-row:hover {
    border-color: var(--md-border-warm);
}

.md-step2-draft-row.is-selected {
    border-color: var(--md-green-mid);
    background: #f6faf6;
}

.md-step2-draft-meta {
    min-width: 0;
    flex: 1;
}

.md-step2-draft-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.md-step2-draft-name {
    font-family: "Instrument Serif", serif;
    font-size: 15.5px;
    color: var(--md-text-dark);
    line-height: 1.3;
}

.md-step2-draft-current-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    background: #eef5ee;
    color: var(--md-green-deep);
    font-family: "DM Sans", sans-serif;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.md-step2-draft-summary {
    font-size: 12.5px;
    color: var(--md-text-mid);
    font-style: italic;
    font-weight: 300;
    margin-bottom: 3px;
    line-height: 1.4;
}

.md-step2-draft-fileinfo {
    font-family: "DM Sans", sans-serif;
    font-size: 11.5px;
    color: var(--md-text-light);
    font-weight: 300;
}

.md-step2-draft-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.md-step2-draft-form {
    margin: 0;
    display: inline-flex;
}

.md-step2-draft-pick-btn {
    padding: 6px 12px;
    height: 30px;
    background: transparent;
    border: 1px solid var(--md-green-soft);
    border-radius: 5px;
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--md-green-deep);
    cursor: pointer;
    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}

.md-step2-draft-pick-btn:hover {
    background: #eef5ee;
}

.md-step2-draft-selected-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    height: 30px;
    background: var(--md-green-mid);
    color: #fff;
    border-radius: 5px;
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 500;
}

.md-step2-draft-selected-pill svg {
    width: 12px;
    height: 12px;
}

.md-step2-draft-clear-btn {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--md-text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
    padding: 0;
}

.md-step2-draft-clear-btn:hover {
    background: #fbebeb;
    border-color: #e0c0c0;
    color: #9a5555;
}

.md-step2-draft-clear-btn svg {
    width: 13px;
    height: 13px;
}

.md-step2-drafts-attach {
    margin-top: 10px;
}

.md-step2-drafts-attach-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: "DM Sans", sans-serif;
    font-size: 12.5px;
    color: var(--md-green-deep);
    text-decoration: none;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 5px;
    transition: background 0.15s ease;
}

.md-step2-drafts-attach-link:hover {
    background: #eef5ee;
}

.md-step2-drafts-attach-link svg {
    width: 12px;
    height: 12px;
}

/* =============================================================
 * STEP 2 MATERIALS PACKET (Slice C)
 *
 * Per-material upload slots + a chip strip for not-yet-ticked
 * materials. Lives below the drafts zone in the step-2 modal.
 *
 * Three states per material; one affordance per transition:
 *   - chip in strip   →  click → empty slot appears
 *   - empty slot      →  drop file → filled slot
 *   - empty slot      →  click X → chip returns to strip
 *   - filled slot     →  click X → file deleted, chip returns
 * ============================================================= */

.md-step2-materials {
    padding-top: 22px;
    border-top: 1px solid var(--md-border);
}

.md-step2-materials-header {
    margin-bottom: 14px;
}

.md-step2-materials-title {
    font-family: "Instrument Serif", serif;
    font-size: 18px;
    color: var(--md-text-dark);
    margin: 0 0 4px;
}

.md-step2-materials-desc {
    font-size: 13px;
    color: var(--md-text-light);
    font-weight: 300;
    margin: 0;
}

.md-step2-drafts-variants {
    padding-bottom: 20px;
}

.md-step2-slots {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 50px;
}

.md-step2-slot {
    background: #fff;
    border: 1px solid var(--md-border);
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}

.md-step2-slot.is-filled {
    border-color: var(--md-green-soft);
    background: #f6faf6;
}

.md-step2-slot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.md-step2-slot-label {
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--md-green-mid);
}

.md-step2-slot-remove-form {
    margin: 0;
    display: inline-flex;
}

.md-step2-slot-remove-btn {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--md-text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
    padding: 0;
}

.md-step2-slot-remove-btn:hover {
    background: #fbebeb;
    border-color: #e0c0c0;
    color: #9a5555;
}

.md-step2-slot-remove-btn svg {
    width: 11px;
    height: 11px;
}

/* Filled state: filename + size, no drop zone. */
.md-step2-slot-filled {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "DM Sans", sans-serif;
    font-size: 12.5px;
    min-width: 0;
}

.md-step2-slot-filled-icon {
    width: 14px;
    height: 14px;
    color: var(--md-green-mid);
    flex-shrink: 0;
}

.md-step2-slot-filename {
    color: var(--md-text-dark);
    text-decoration: none;
    border-bottom: 1px dotted var(--md-green-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    transition:
        border-color 0.15s ease,
        color 0.15s ease;
}

.md-step2-slot-filename:hover {
    color: var(--md-green-deep);
    border-bottom-color: var(--md-green-mid);
}

.md-step2-slot-size {
    font-size: 11px;
    color: var(--md-text-light);
    font-weight: 300;
    flex-shrink: 0;
}

/* Empty state: drop zone + auto-submitting hidden file input. */
.md-step2-slot-upload-form {
    margin: 0;
    display: block;
}

.md-step2-slot-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.md-step2-slot-drop {
    border: 1.5px dashed var(--md-border);
    border-radius: 5px;
    padding: 14px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    color: var(--md-text-light);
    width: 60%;
    max-width: 480px;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .md-step2-slot-drop {
        width: 100%;
    }
}

.md-step2-slot-drop:hover,
.md-step2-slot-drop.is-dragover {
    border-color: var(--md-green-soft);
    background: #f6faf6;
    color: var(--md-green-deep);
}

.md-step2-slot-drop-icon,
.md-step2-slot-drop-filled-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.md-step2-slot-drop-empty,
.md-step2-slot-drop-filled {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.md-step2-slot-drop-filename {
    color: var(--md-text-dark);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

/* Chip strip: not-yet-ticked materials. Click adds to packet. */
.md-step2-chip-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 6px;
    padding-bottom: 20px;
}

.md-step2-chip-form {
    margin: 0;
    display: inline-flex;
}

.md-step2-chip-add {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    height: 28px;
    background: transparent;
    border: 1px dashed var(--md-border);
    border-radius: 999px;
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--md-text-light);
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        color 0.15s ease,
        background 0.15s ease;
}

.md-step2-chip-add:hover {
    border-style: solid;
    border-color: var(--md-green-soft);
    color: var(--md-green-deep);
    background: #f6faf6;
}

.md-step2-chip-add svg {
    width: 11px;
    height: 11px;
}

.md-step2-slot-form {
    margin: 0;
}

.md-step2-slot-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.md-step2-slot trix-toolbar {
    display: none;
}

.md-step2-slot-trix {
    min-height: 80px;
}

.md-step2-slot-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--md-text-light);
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    margin: 2px 0;
}

.md-step2-slot-divider::before,
.md-step2-slot-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--md-border);
}

.md-step2-slot-divider:not(:empty)::before {
    margin-right: 10px;
}
.md-step2-slot-divider:not(:empty)::after {
    margin-left: 10px;
}

.md-step2-slot-actions {
    display: flex;
    justify-content: center;
}

.md-modal-save--sm {
    padding: 6px 14px;
    font-size: 12.5px;
    height: auto;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .md-comp-row {
        grid-template-columns: 1fr;
        row-gap: 8px;
    }
    .md-comp-actions {
        opacity: 1;
    } /* touch: no hover trigger */
    .md-comp-paragraph-actions {
        opacity: 1;
    }
    .md-comp-paragraph-card {
        padding: 18px 20px;
    }
    .md-pitch-card {
        padding: 18px 20px;
    }
    .md-pitch-card-actions {
        opacity: 1;
    }
    .md-draft-card {
        padding: 18px 20px;
    }
    .md-draft-card-actions {
        opacity: 1;
    }
    .md-draft-card-header {
        flex-direction: column;
        gap: 10px;
    }
    .md-step2-draft-row {
        flex-direction: column;
    }
    .md-step2-draft-actions {
        align-self: flex-end;
    }
    .md-reflection-card {
        padding: 18px 20px;
    }
    .md-reflection-card-actions {
        opacity: 1;
    }
}

/* =============================================================
 * REFLECTION section — card chrome mirrors .md-pitch-card.
 * ============================================================= */

.md-reflections-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.md-reflections-list .reflection-hidden {
    display: none;
}
.md-reflections-list.expanded .reflection-hidden {
    display: block;
}

/* ---- Card ---- */

.md-reflection-card {
    background: var(--md-warm-white);
    border: 1px solid var(--md-border);
    border-radius: 8px;
    padding: 22px 26px;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        border-color 0.15s ease;
    animation: md-pitch-fade-in 0.35s ease-out;
}

.md-reflection-card:hover {
    border-color: var(--md-border-warm);
}

.md-reflection-card.is-removing {
    opacity: 0;
    transform: translateY(-4px);
}

.md-reflection-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    position: relative; /* anchor for the remove-confirm popover */
}

.md-reflection-card-meta {
    min-width: 0;
}

.md-reflection-card-date {
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--md-text-light);
}

.md-reflection-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.md-reflection-card:hover .md-reflection-card-actions,
.md-reflection-card:focus-within .md-reflection-card-actions,
.md-reflection-card.is-confirming-remove .md-reflection-card-actions {
    opacity: 1;
}

.md-reflection-card-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--md-text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.2s,
        color 0.2s,
        border-color 0.2s;
    padding: 0;
}

.md-reflection-card-action-btn:hover {
    background: #fff;
    border-color: var(--md-border);
    color: var(--md-green-deep);
}

.md-reflection-card-action-btn svg {
    width: 13px;
    height: 13px;
}

.md-reflection-card-remove-btn {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--md-text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.2s,
        color 0.2s,
        border-color 0.2s;
    padding: 0;
}

.md-reflection-card-remove-btn:hover {
    background: #fbebeb;
    border-color: #e0c0c0;
    color: #9a5555;
}

.md-reflection-card-remove-btn svg {
    width: 13px;
    height: 13px;
}

.md-reflection-card-remove-form {
    margin: 0;
    display: inline-flex;
}

/* Anchored to .md-reflection-card-header (position: relative above). */
.md-reflection-card-remove-confirm {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--md-warm-white);
    border: 1px solid var(--md-border-warm);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(42, 42, 37, 0.08);
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
}

.md-reflection-card-remove-confirm-cancel {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 4px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--md-text-light);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.2s,
        color 0.2s,
        border-color 0.2s;
}

.md-reflection-card-remove-confirm-cancel:hover {
    background: var(--md-cream);
    border-color: var(--md-border);
    color: var(--md-text-dark);
}

.md-reflection-card-remove-confirm-cancel svg {
    width: 11px;
    height: 11px;
}

.md-reflection-card-remove-confirm-yes {
    padding: 4px 10px;
    height: 22px;
    border-radius: 4px;
    background: transparent;
    border: 1px solid transparent;
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--md-text-dark);
    cursor: pointer;
    transition:
        background 0.2s,
        color 0.2s,
        border-color 0.2s;
    line-height: 1;
}

.md-reflection-card-remove-confirm-yes:hover {
    background: #fbebeb;
    border-color: #e0c0c0;
    color: #9a5555;
}

.md-reflection-card-body {
    font-family: "Instrument Serif", serif;
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--md-text-dark);
    font-weight: 400;
}

.md-reflection-card-body p {
    margin: 0 0 0.6em;
}
.md-reflection-card-body p:last-child {
    margin-bottom: 0;
}

/* ---- Inline edit panel ---- Mirrors the pitch-card pattern. */
.md-reflection-card:has(turbo-frame > form.md-reflection-card-edit)
    .md-reflection-card-body,
.md-reflection-card:has(turbo-frame > form.md-reflection-card-edit)
    .md-reflection-card-header {
    display: none;
}

.md-reflection-card-edit {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Selector specificity (trix-editor + class) has to beat the shared
   `trix-editor.md-form-richtext` and its `:focus` rule. */
trix-editor.md-reflection-card-edit-trix,
trix-editor.md-reflection-card-edit-trix:focus {
    font-family: "Instrument Serif", serif;
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--md-text-dark);
    border: 1px solid var(--md-green-soft);
    border-radius: 6px;
    background: #fff;
    padding: 14px 16px;
    min-height: 96px;
    outline: none;
    box-shadow: none;
}

trix-editor.md-reflection-card-edit-trix:focus {
    border-color: var(--md-green-mid);
    box-shadow: 0 0 0 3px rgba(116, 145, 110, 0.15);
}

.md-reflection-card-edit-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.md-reflection-card-edit-cancel,
.md-reflection-card-edit-save {
    padding: 6px 14px;
    border-radius: 5px;
    font-family: "DM Sans", sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition:
        background 0.2s,
        color 0.2s,
        border-color 0.2s;
}

.md-reflection-card-edit-cancel {
    background: transparent;
    border: 1px solid var(--md-border);
    color: var(--md-text-mid);
}

.md-reflection-card-edit-cancel:hover {
    border-color: var(--md-border-warm);
    color: var(--md-text-dark);
}

.md-reflection-card-edit-save {
    background: var(--md-green-deep);
    border: 1px solid var(--md-green-deep);
    color: #fff;
}

.md-reflection-card-edit-save:hover {
    background: var(--md-green-mid);
    border-color: var(--md-green-mid);
}

.md-reflection-card-edit-save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ---- Quick-add box (bottom of list) ---- */

/* margin-top, not list gap, so the cards above stay tight together. */
.md-reflection-quick-add {
    background: inherit;
    margin-top: 14px;
}

.md-reflection-quick-add-resting {
    display: block;
    width: 100%;
    background: var(--md-warm-white);
    border: 1px dashed var(--md-border-warm);
    border-radius: 8px;
    padding: 22px 28px;
    text-align: left;
    font-family: "Instrument Serif", serif;
    font-size: 16.5px;
    font-style: italic;
    color: var(--md-text-light);
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        color 0.2s ease,
        background 0.2s ease;
}

.md-reflection-quick-add-resting:hover,
.md-reflection-quick-add-resting:focus-visible {
    border-color: var(--md-green-mid);
    color: var(--md-green-deep);
    background: linear-gradient(
        to right,
        var(--md-warm-white),
        var(--md-green-pale) 80%
    );
    outline: none;
}

/* Padding + gap matches .md-reflection-card-edit so the writing surface
   feels identical in both places — only the chrome differs. */
.md-reflection-quick-add-writing {
    border: 1px solid var(--md-gold-accent);
    border-radius: 8px;
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 1px 3px rgba(184, 150, 90, 0.08);
}

.md-reflection-quick-add-date-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
}

.md-reflection-quick-add-date-label {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.08em;
}

/* Borderless — the gold writing-state box is the boundary. Selector
   specificity has to beat the shared `trix-editor.md-form-richtext`. */
trix-editor.md-reflection-quick-add-trix,
trix-editor.md-reflection-quick-add-trix:focus {
    font-family: "Instrument Serif", serif;
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--md-text-dark);
    border: none;
    background: transparent;
    padding: 0;
    min-height: 96px;
    outline: none;
    box-shadow: none;
}

/* Hide the Trix toolbar across all three reflection surfaces. Cmd+I /
   Cmd+B etc still work via Trix's keyboard shortcuts. */
#reflection_modal trix-toolbar,
.md-reflection-card-edit trix-toolbar,
.md-reflection-quick-add-writing trix-toolbar {
    display: none;
}

.md-reflection-quick-add-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--md-border);
    padding-top: 12px;
}

.md-reflection-quick-add-cancel,
.md-reflection-quick-add-save {
    padding: 6px 14px;
    border-radius: 5px;
    font-family: "DM Sans", sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition:
        background 0.2s,
        color 0.2s,
        border-color 0.2s;
}

.md-reflection-quick-add-cancel {
    background: transparent;
    border: 1px solid var(--md-border);
    color: var(--md-text-mid);
}

.md-reflection-quick-add-cancel:hover {
    border-color: var(--md-border-warm);
    color: var(--md-text-dark);
}

.md-reflection-quick-add-save {
    background: var(--md-green-deep);
    border: 1px solid var(--md-green-deep);
    color: #fff;
}

.md-reflection-quick-add-save:hover {
    background: var(--md-green-mid);
    border-color: var(--md-green-mid);
}

/* ---- Date field (modal + quick-add) ---- */

.md-reflection-date-field {
    font-family: "Instrument Serif", serif;
    font-size: 16px;
    font-weight: 400;
    padding: 0.25rem;
    padding-left: 0.5rem;
    border-radius: 6px;
    width: auto;
    min-width: 180px;
    letter-spacing: 0.04em;
}

.md-reflection-date-field::-webkit-calendar-picker-indicator {
    opacity: 0.4;
    cursor: pointer;
}

.md-reflection-date-field:hover::-webkit-calendar-picker-indicator {
    opacity: 0.7;
}

/* =====================================================================
   Submission Journey
   Row treatments, inline log form, vertical timeline.
   ===================================================================== */

/* ---- New row state classes (Submission Journey stages) ---- */

/* In-progress positive stages: like the existing .pending/.full-request
   treatments — green status label, full opacity, no muting. */
/* R&R: warm highlight per spec. */
.md-submission-row.revise-and-resubmit {
    background: linear-gradient(
        to right,
        rgba(250, 243, 224, 0.5),
        transparent 70%
    );
}
/* Promising stages: subtle warm tint, leaf-outline read. */
.md-submission-row.honorable-mention,
.md-submission-row.shortlist-finalist {
    background: linear-gradient(
        to right,
        rgba(245, 238, 222, 0.45),
        transparent 70%
    );
}
/* "Not this time" family: muted opacity + olive label. */
.md-submission-row.form-response,
.md-submission-row.closed-no-response,
.md-submission-row.closed-no-response-policy,
.md-submission-row.released-by-type {
    opacity: 0.78;
}
/* Encouraging note: slightly less muted, warmer. */
.md-submission-row.encouraging-note {
    opacity: 0.88;
}
.md-submission-row.completed {
    opacity: 0.9;
}
/* ---- Journey timeline ---- */

/* Journey block lives inside an .md-sub-expanded-section now, which
   already supplies horizontal + top padding. The inner .md-sub-journey
   wrapper just keeps the label and list grouped. */
.md-sub-journey-section {
    padding-bottom: 14px;
}

.md-sub-journey-section .md-sub-log {
    margin-bottom: 4px;
}

/* Lightly dashed divider between the "Log what happened next" CTA
   and the journey timeline. Same color token as the other dashed
   borders in the expanded panel for consistency. */
.md-sub-journey-separator {
    border: 0;
    border-top: 1px dashed var(--md-border);
    margin: 14px 0;
}

.md-sub-journey {
    padding: 0;
}

.md-sub-journey-label {
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--md-text-light);
    margin-bottom: 10px;
}

.md-stage-timeline {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 0 18px;
}

.md-stage-timeline::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 4px;
    bottom: 4px;
    width: 1.5px;
    background: var(--md-border);
}

.md-stage-event {
    position: relative;
    padding: 6px 0;
}

.md-stage-event-dot {
    position: absolute;
    left: -18px;
    top: 10px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #b9b6ac;
    border: 1.5px solid #fff;
    box-shadow: 0 0 0 1px var(--md-border);
}

.md-stage-event-dot--positive,
.md-stage-event-dot--current {
    background: var(--md-green-mid);
    box-shadow: 0 0 0 1px var(--md-green-soft);
}

.md-stage-event-dot--muted {
    background: #b9b6ac;
}

.md-stage-event-label {
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--md-text-mid, #5c5a52);
}

.md-stage-event-date {
    font-family: "DM Sans", sans-serif;
    font-size: 11.5px;
    color: var(--md-text-light);
    margin-top: 1px;
}

/* Wrapper around the prose + read-more toggle. */
.md-stage-event-note {
    margin-top: 6px;
}

/* The prose container itself. Action Text injects trix-content, which
   we lean on for inline styling (links, headings, lists). The wrapper
   gives us a clamp toggle. */
.md-stage-event-note-content {
    font-family: "Instrument Serif", serif;
    font-size: 13px;
    font-style: italic;
    color: var(--md-text-mid, #5c5a52);
    line-height: 1.45;
}

.md-stage-event-note-content.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.md-stage-event-note-content p {
    margin: 0;
}

.md-stage-event-note-content p + p {
    margin-top: 6px;
}

.md-stage-event-note-toggle {
    margin-top: 4px;
    padding: 0;
    background: transparent;
    border: 0;
    font-family: "DM Sans", sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--md-green-mid);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.md-stage-event-note-toggle:hover {
    color: var(--md-green-deep);
}

/* Attachment icon pills, rendered at the top of an event's body
   (above the prose) so files surface as a discrete affordance. */
.md-stage-event-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.md-stage-event-attachment-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 8px;
    background: #fff;
    border: 1px solid var(--md-border);
    border-radius: 999px;
    font-family: "DM Sans", sans-serif;
    font-size: 11.5px;
    color: var(--md-text-mid, #5c5a52);
    text-decoration: none;
    transition:
        border-color 0.12s,
        color 0.12s,
        background 0.12s;
}

.md-stage-event-attachment-pill:hover {
    border-color: var(--md-green-soft);
    color: var(--md-green-deep);
    background: var(--md-green-wash);
}

.md-stage-event-attachment-pill--text {
    background: var(--md-green-wash);
    cursor: default;
}

.md-stage-event-attachment-icon {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

.md-stage-event-attachment-name {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Inline "Log what happened next" form ---- */

.md-sub-log {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* Hide the CTA when the lazy turbo-frame holds the loaded form. */
.md-sub-log:has(turbo-frame > form.md-sub-log-form) .md-sub-log-cta {
    display: none;
}

.md-sub-log-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px dashed var(--md-border-warm);
    border-radius: 6px;
    background: transparent;
    font-family: "Instrument Serif", serif;
    font-size: 14px;
    font-style: italic;
    color: var(--md-text-light);
    cursor: pointer;
    align-self: flex-start;
    transition:
        border-color 0.15s,
        color 0.15s,
        background 0.15s;
}

.md-sub-log-cta:hover {
    border-color: var(--md-green-soft);
    color: var(--md-green-mid);
    background: var(--md-green-wash);
}

.md-sub-log-cta-icon {
    width: 13px;
    height: 13px;
}

.md-sub-log-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    background: var(--md-green-wash);
    border: 1px solid var(--md-border);
    border-radius: 8px;
}

.md-sub-log-form[hidden] {
    display: none;
}

.md-sub-log-form-title {
    font-family: "Instrument Serif", serif;
    font-size: 18px;
    color: var(--md-text-mid, #5c5a52);
    margin: 0;
}

.md-stage-selector {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition:
        border-color 0.15s,
        background 0.15s;
}

.md-stage-selector.missing-stage {
    border-color: #c77b5a;
    background: rgba(199, 123, 90, 0.06);
}

.md-stage-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.md-stage-group-label {
    font-family: "DM Sans", sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--md-text-light);
}

.md-stage-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.md-stage-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: #fff;
    border: 1px solid var(--md-border);
    border-radius: 999px;
    font-family: "DM Sans", sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--md-text-mid, #5c5a52);
    cursor: pointer;
    transition:
        border-color 0.12s,
        background 0.12s,
        color 0.12s,
        font-weight 0.12s;
}

.md-stage-option:hover {
    border-color: var(--md-green-soft);
    color: var(--md-green-deep);
}

.md-stage-option.selected {
    background: var(--md-green-pale);
    border-color: var(--md-green-mid);
    color: var(--md-green-deep);
    font-weight: 600;
}

.md-stage-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b9b6ac;
}
.md-stage-dot--green {
    background: var(--md-green-mid);
}
.md-stage-dot--gold {
    background: #c9a85a;
}
.md-stage-dot--olive {
    background: #8b9a6b;
}
.md-stage-dot--gray {
    background: #b0aea5;
}

.md-sub-log-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0.25rem 0rem;
}

.md-sub-log-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.md-sub-log-label {
    font-family: "DM Sans", sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--md-green-mid);
}

.md-sub-log-hint {
    margin-left: 6px;
    font-weight: 400;
    font-style: italic;
    color: var(--md-text-light);
}

.md-sub-log-date,
.md-sub-log-note {
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    padding: 7px 10px;
    border: 1px solid var(--md-border);
    border-radius: 5px;
    background: #fff;
    color: var(--md-text-mid, #5c5a52);
}

.md-sub-log-note {
    resize: vertical;
    min-height: 70px;
}

.md-sub-log-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.md-sub-log-cancel,
.md-sub-log-save {
    padding: 7px 14px;
    border-radius: 5px;
    font-family: "DM Sans", sans-serif;
    font-size: 12.5px;
    cursor: pointer;
    transition:
        background 0.12s,
        color 0.12s,
        border-color 0.12s;
}

.md-sub-log-cancel {
    background: transparent;
    border: 1px solid var(--md-border);
    color: var(--md-text-light);
}

.md-sub-log-cancel:hover {
    border-color: var(--md-text-mid, #5c5a52);
    color: var(--md-text-mid, #5c5a52);
}

.md-sub-log-save {
    background: var(--md-green-mid);
    border: 1px solid var(--md-green-mid);
    color: #fff;
    font-weight: 500;
}

.md-sub-log-save:hover {
    background: var(--md-green-deep);
    border-color: var(--md-green-deep);
}

/* ---- Journey timeline: per-event edit/delete affordances ---- */

.md-stage-event-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.md-stage-event-actions {
    display: inline-flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
}

.md-stage-event:hover .md-stage-event-actions,
.md-stage-event:focus-within .md-stage-event-actions {
    opacity: 1;
}

.md-stage-event-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--md-text-light);
    cursor: pointer;
    transition:
        background 0.12s,
        color 0.12s;
}

.md-stage-event-action-btn:hover {
    background: var(--md-green-wash);
    color: var(--md-green-mid);
}

.md-stage-event-action-btn--danger:hover {
    background: rgba(199, 123, 90, 0.1);
    color: #c77b5a;
}

.md-stage-event-action-icon {
    width: 12px;
    height: 12px;
}

/* Inline edit form sits at full row width below the dot. */
.md-stage-event-edit {
    margin-top: 8px;
}

.md-sub-log-form--edit {
    background: #fff;
    border: 1px solid var(--md-border);
}

/* Compact selector variant used inside the edit form. */
.md-stage-selector--compact {
    padding: 4px;
}

.md-stage-selector--compact .md-stage-group {
    gap: 2px;
}

.md-stage-selector--compact .md-stage-option {
    padding: 4px 8px;
    font-size: 12px;
}

/* Brief highlight applied by the `focus_into_view` Turbo Stream action
   to the element a writer just saved. The animation fades a soft
   green wash in and out so the eye finds the saved entity without it
   feeling like a flash of alarm. Auto-removed by JS after ~2.2s, but
   we cap the animation duration in CSS as a defensive backstop. */
@keyframes md-just-saved-pulse {
    0% {
        background-color: rgba(74, 124, 89, 0);
    }
    15% {
        background-color: rgba(74, 124, 89, 0.16);
    }
    100% {
        background-color: rgba(74, 124, 89, 0);
    }
}

.is-just-saved {
    animation: md-just-saved-pulse 2.2s ease-out;
    border-radius: 6px;
}

/* When the highlight lands on a timeline event, the green wash reads
   as a bit muddy against the existing dot+rail. Use an outline pulse
   there instead. */
.md-stage-event.is-just-saved {
    animation: md-just-saved-outline 2.2s ease-out;
}

@keyframes md-just-saved-outline {
    0% {
        box-shadow: 0 0 0 0 rgba(74, 124, 89, 0);
    }
    15% {
        box-shadow: 0 0 0 4px rgba(74, 124, 89, 0.18);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(74, 124, 89, 0);
    }
}