/* Clerky - Custom Styles */

/* ===== Admin Multi-View: Board ===== */
.board-col {
    min-height: 300px;
}
.board-col-cards {
    background: #f9fafb;
}
.board-col-drag-over > .board-col-cards,
.board-col.board-col-drag-over .board-col-cards {
    background: #dff2c5;
    outline: 2px dashed #5a9326;
    outline-offset: -2px;
}
.board-card {
    transition: box-shadow 0.15s, opacity 0.15s;
    line-clamp: 2;
    -webkit-line-clamp: 2;
}
.board-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.board-card[draggable="true"]:active {
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* ===== Admin Multi-View: Table ===== */
#req-admin-table-view table tbody tr:last-child {
    border-bottom: none;
}


.nav-btn {
    color: #6b7280;
    font-size: 13px;
    display: flex;
    align-items: center;
}

.nav-btn:hover {
    background-color: #f3f4f6;
    color: #111827;
}

.nav-btn.active {
    background-color: #f1f5f9;
    color: #0f172a;
    font-weight: 600;
}

/* Active indicator dot — shown only on active nav items */
.nav-active-dot {
    display: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3d6b1c;
    flex-shrink: 0;
    margin-left: 4px;
}
.nav-btn.active .nav-active-dot {
    display: none;
}

/* ── Meetings sub-items tree connector ──────────────────────── */
.nav-sub-group {
    margin-left: 22px;
    padding-left: 12px;
    border-left: 1px dashed #d1d5db;
    margin-top: 1px;
    margin-bottom: 2px;
}

.nav-sub-item {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 12px;
    color: #6b7280;
    transition: background-color 0.15s, color 0.15s;
    text-align: left;
    cursor: pointer;
    background: transparent;
    border: none;
}

.nav-sub-item::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    width: 8px;
    height: 1px;
    background: #e5e7eb;
}

.nav-sub-item:hover {
    background-color: #f3f4f6;
    color: #111827;
}

.nav-sub-item.active {
    background-color: #f0f7ed;
    color: #1d4730;
    font-weight: 600;
}

/* Sub-item icons only render in the collapsed icon rail */
.nav-sub-icon {
    display: none;
}

/* Collapsed sidebar — hide labels, keep meeting steps as an icon rail */
#main-sidebar.sidebar-collapsed .sidebar-text {
    display: none;
}
/* Drop the tree indent/connector so sub-icons line up under the main nav icons */
#main-sidebar.sidebar-collapsed .nav-sub-group {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}
#main-sidebar.sidebar-collapsed .nav-sub-item {
    padding: 6px 10px;
}
#main-sidebar.sidebar-collapsed .nav-sub-item::before {
    display: none;
}
#main-sidebar.sidebar-collapsed .nav-sub-icon {
    display: inline-block;
}
/* Stack the logo over the chevron when collapsed (56px is too narrow for a row) */
#main-sidebar.sidebar-collapsed .brand-header {
    flex-direction: column;
    gap: 6px;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

/* Agenda Preview Formatting - matches Ellis County style */
.agenda-preview {
    max-width: 700px;
    margin: 0 auto;
    font-family: Calibri, Arial, sans-serif !important;
    font-size: 12px;
    line-height: 1.5;
    color: #000;
}

.agenda-preview .header {
    text-align: center;
    margin-bottom: 20px;
}

.agenda-preview .header h1 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 4px;
}

.agenda-preview .header h2 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 12px;
}

.agenda-preview .members-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 4px;
}

.agenda-preview .notice {
    font-size: 12px;
    margin-bottom: 16px;
    text-align: justify;
}

.agenda-preview .section-title {
    font-weight: bold;
    font-size: 13px;
    margin-top: 16px;
    margin-bottom: 8px;
    text-transform: uppercase;
    border-bottom: 1px solid #000;
    padding-bottom: 2px;
}

.agenda-preview .agenda-item {
    margin-bottom: 8px;
    padding-left: 20px;
}

.agenda-preview .item-number {
    font-weight: bold;
}

.agenda-preview .item-official {
    font-style: italic;
    font-size: 11px;
}

/* Minutes Preview Formatting — Ellis County Style */
.minutes-preview {
    max-width: 720px;
    margin: 0 auto;
    font-family: Calibri, Arial, sans-serif !important;
    font-size: 12px;
    line-height: 1.5;
    color: #000;
    font-variant: small-caps;
}

.minutes-preview .minutes-seal {
    display: block;
    width: 60px;
    height: 60px;
    max-width: 60px;
    max-height: 60px;
    object-fit: contain;
    margin: 0 auto 8px;
}

.minutes-preview .header {
    text-align: center;
    margin-bottom: 24px;
}

.minutes-preview .header h1 {
    font-size: 16px;
    font-weight: normal;
    font-variant: small-caps;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.minutes-preview .header h2 {
    font-size: 13px;
    font-weight: normal;
    font-variant: small-caps;
    margin-bottom: 0;
}

.minutes-preview .minute-order-ref {
    text-align: right;
    font-size: 11px;
    font-variant: normal;
    margin-bottom: 16px;
    color: #333;
}

.minutes-preview .section-title {
    font-weight: bold;
    font-variant: small-caps;
    text-decoration: underline;
    font-size: 12px;
    margin-top: 20px;
    margin-bottom: 8px;
}

.minutes-preview .section-title .mo-number {
    text-decoration: none;
    float: right;
    font-weight: bold;
}

.minutes-preview .subsection-title {
    font-weight: bold;
    font-variant: small-caps;
    text-decoration: underline;
    font-size: 11px;
    margin-top: 12px;
    margin-bottom: 6px;
    padding-left: 12px;
}

.minutes-preview .minutes-item {
    margin-bottom: 10px;
    padding-left: 48px;
    text-indent: -28px;
}

.minutes-preview .minutes-item .item-num {
    font-weight: bold;
    font-variant: small-caps;
    display: inline-block;
    width: 28px;
}

.minutes-preview .minutes-item .item-presenter {
    font-style: italic;
    font-variant: normal;
}

.minutes-preview .vote-record {
    font-variant: small-caps;
    font-weight: normal;
    margin: 4px 0 4px 20px;
    font-size: 11px;
}

.minutes-preview .mo-label {
    font-weight: bold;
    font-variant: small-caps;
}

.minutes-preview .members-section {
    margin-bottom: 16px;
}

.minutes-preview .members-section .members-label {
    font-weight: bold;
    font-variant: small-caps;
    text-decoration: underline;
    display: inline-block;
    min-width: 140px;
}

.minutes-preview .members-section .member-line {
    padding-left: 20px;
    margin: 2px 0;
}

.minutes-preview .signature-block {
    margin-top: 40px;
    page-break-inside: avoid;
}

.minutes-preview .sig-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 40px;
    margin-top: 20px;
}

.minutes-preview .sig-item {
    text-align: left;
}

.minutes-preview .sig-line {
    border-bottom: 1px solid #000;
    width: 240px;
    margin-top: 30px;
    margin-bottom: 4px;
}

.minutes-preview .attestation {
    margin-top: 30px;
    font-variant: small-caps;
}

.minutes-preview .attestation .seal-and-clerk {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 16px;
}

.minutes-preview .attestation .seal-img {
    width: 70px;
    height: 70px;
    max-width: 70px;
    max-height: 70px;
    object-fit: contain;
}

/* Drag & Drop */
.drag-over {
    border-color: #7c3aed !important; /* violet-600 — drop zone active */
    background-color: #ede9fe !important; /* violet-100 */
}

/* Meeting mode item cards */
.meeting-item-card {
    transition: all 0.2s;
}

.meeting-item-card.voted {
    border-left: 4px solid #94a3b8; /* slate-400 — generic "voted" marker; JS classes paint result color over it */
}

.meeting-item-card.no-action {
    border-left: 4px solid #9ca3af;
}

/* Vote buttons */
.vote-btn {
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.vote-btn.motion {
    background-color: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #93c5fd;
}
.vote-btn.motion:hover { background-color: #bfdbfe; }

.vote-btn.second {
    background-color: #e0e7ff;
    color: #4338ca;
    border: 1px solid #a5b4fc;
}
.vote-btn.second:hover { background-color: #c7d2fe; }

.vote-btn.carried {
    background-color: #dff2c5;
    color: #1d4730;
    border: 1px solid #cef17b;
}
.vote-btn.carried:hover { background-color: #cdedb3; }

.vote-btn.failed {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}
.vote-btn.failed:hover { background-color: #fecaca; }

.vote-btn.no-action-btn {
    background-color: #f3f4f6;
    color: #4b5563;
    border: 1px solid #d1d5db;
}
.vote-btn.no-action-btn:hover { background-color: #e5e7eb; }

.vote-btn.active {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

/* Hides the scrollbar track on a scrollable element while keeping it scrollable
   (drag, trackpad, wheel, or JS scrollLeft) — for carousels with their own
   visible prev/next controls, where a second scrollbar is redundant. */
.no-scrollbar {
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* old Edge/IE */
}
.no-scrollbar::-webkit-scrollbar {
    display: none;               /* Chrome, Safari, new Edge */
}

/* Status badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
}

.badge-pending {
    background-color: #fef3c7;
    color: #92400e;
}

.badge-approved {
    background-color: #dff2c5;
    color: #1d4730;
}

.badge-deferred {
    background-color: #e0e7ff;
    color: #3730a3;
}

.badge-rejected {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Dropdown menu - keep visible on hover */
.group:hover .group-hover\:block {
    display: block !important;
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.view:not(.hidden) {
    animation: fadeIn 0.2s ease-out;
}

/* Editable minutes */
.minutes-editable:focus {
    outline: none;
}
.minutes-editable [contenteditable]:hover,
.minutes-editable div:hover,
.minutes-editable span:hover {
    background-color: #fefce8;
    cursor: text;
}
.minutes-editable::selection,
.minutes-editable *::selection {
    background-color: #bfdbfe;
}

/* Minutes Quill Editor */
#minutes-editor .ql-editor {
    min-height: 600px;
    max-height: calc(100vh - 300px);
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 12px;
    line-height: 1.7;
    padding: 40px;
    overflow-y: auto;
}

#minutes-editor .ql-editor h1,
#minutes-editor .ql-editor h2 {
    font-family: 'Arial', sans-serif;
    text-transform: uppercase;
    border-bottom: 1px solid #000;
    padding-bottom: 4px;
    margin-top: 16px;
}

#minutes-editor .ql-editor h3 {
    font-family: 'Arial', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    margin-top: 14px;
}

#minutes-editor .ql-editor ul,
#minutes-editor .ql-editor ol {
    padding-left: 24px;
}

#minutes-editor .ql-editor li {
    margin-bottom: 4px;
}

#minutes-editor .ql-toolbar.ql-snow {
    border-color: #e5e7eb;
    border-radius: 0.75rem 0.75rem 0 0;
    background: #f9fafb;
}

#minutes-editor .ql-container.ql-snow {
    border-color: #e5e7eb;
    border-radius: 0 0 0.75rem 0.75rem;
}

/* Print styles */
@media print {
    nav, aside, .no-print { display: none !important; }
    main { padding: 0 !important; }
    /* Public minutes print */
    #public-minutes-viewer > div:first-child { display: none !important; }
    #public-minutes-viewer > div:last-child > div:last-child { display: none !important; }
    #public-minutes-viewer { background: white !important; }
    #public-minutes-body { border: none !important; box-shadow: none !important; padding: 0 !important; }
}

/* --- COLLAPSIBLE SECTIONS --- */
.section-collapse-btn {
    cursor: pointer;
    border: none;
    background: none;
    line-height: 1;
}
.section-collapse-btn i {
    display: inline-block;
    transition: transform 0.25s ease;
}
.section-collapse-btn.collapsed i {
    transform: rotate(-90deg);
}

/* --- QUILL RICH TEXT EDITOR (text sections) --- */
.text-section-editor .ql-toolbar {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-color: #e5e7eb;
    background: #f9fafb;
}
.text-section-editor .ql-container {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-color: #e5e7eb;
    min-height: 80px;
    font-size: 14px;
    font-family: inherit;
}
.text-section-editor .ql-editor {
    min-height: 80px;
    max-height: 320px;
    overflow-y: auto;
}
.text-section-editor .ql-editor.ql-blank::before {
    color: #9ca3af;
    font-style: italic;
}

/* Text section preview in agenda HTML */
.text-section-preview {
    padding-left: 8px;
    line-height: 1.6;
}
.text-section-preview p { margin: 2px 0; }
.text-section-preview ul, .text-section-preview ol {
    padding-left: 20px;
    margin: 4px 0;
}
.text-section-preview li { margin: 2px 0; }

/* --- Minutes Builder: Hover Insertion Zones --- */
.mb-insert-zone {
    height: 0;
    position: relative;
    z-index: 20;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible;
}

/* Hover target — covers full bar height (22px) plus a little extra */
.mb-insert-zone .mb-insert-hover-target {
    position: absolute;
    left: 0; right: 0;
    top: -13px;
    height: 26px;
    z-index: 25;
    cursor: default;
}

/* Hairline — two-tone gradient (blue left, amber right) */
.mb-insert-zone:hover::before {
    content: '';
    position: absolute;
    left: 8px; right: 8px;
    top: 0;
    height: 2px;
    background: linear-gradient(to right, #93c5fd 0%, #93c5fd 50%, #fcd34d 50%, #fcd34d 100%);
    border-radius: 1px;
    pointer-events: none;
}

/* Bar: centered on the hairline, full-width split */
.mb-insert-zone .mb-insert-bar {
    position: absolute;
    left: 8px; right: 8px;
    top: 0;
    height: 22px;
    transform: translateY(-50%);
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.13s ease;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    z-index: 30;
}
.mb-insert-zone:hover .mb-insert-bar,
.mb-insert-zone .mb-insert-bar:hover {
    opacity: 1;
    pointer-events: auto;
}

/* Left / right halves — text centered inside */
.mb-insert-left, .mb-insert-right {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: filter 0.1s ease;
}
.mb-insert-left:hover  { filter: brightness(0.94); }
.mb-insert-right:hover { filter: brightness(0.94); }
.mb-insert-left  { background: #ede9fe; color: #5b21b6; border-right: 1px solid rgba(196,181,253,0.5); } /* violet-100 / violet-800 — primary insert */
.mb-insert-right { background: #f1f5f9; color: #334155; } /* slate-100 / slate-700 — secondary insert */

/* --- Agenda Builder: Single-pill insert zone (no sub-items) --- */
.mb-insert-single {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    background: #dbeafe;
    color: #1d4ed8;
    border-radius: 6px;
    transition: filter 0.1s ease;
}
.mb-insert-single:hover { filter: brightness(0.94); }

/* ── Minutes Story View ───────────────────────────────────── */
.mb-story-sent {
    border-radius: 2px;
    transition: background 0.12s;
}
.mb-story-sent--linked {
    border-radius: 2px;
    transition: background 0.12s;
}
/* Underline + hover only when section has sources toggled on */
[data-sources="true"] .mb-story-sent--linked {
    cursor: help;
    border-bottom: 1px dashed #c7d2fe;
}
[data-sources="true"] .mb-story-sent--linked:hover,
[data-sources="true"] .mb-story-header-wrap.mb-story-sent--linked:hover,
[data-sources="true"] .mb-story-sub-wrap.mb-story-sent--linked:hover {
    background: #eef2ff;
    border-bottom-color: #6366f1;
}
.mb-story-header-edit {
    display: block;
    min-height: 1.25rem;
    cursor: text;
    padding: 2px 6px;
    margin-left: -6px;
    border-radius: 6px;
    transition: background-color 0.12s, box-shadow 0.12s;
}
.mb-story-header-edit:hover { background: #f8fafc; }
.mb-story-header-edit:focus { background: #fff; box-shadow: 0 0 0 2px #c7d2fe; }

/* The item body: one text box per item. It reads as a surface you can write on —
   a whole clickable rectangle with room to breathe — rather than as the row of
   one-line fields it used to be. */
.mb-body-wrap { position: relative; }
.mb-body-box {
    display: block;
    cursor: text;
    min-height: 3.25rem;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #374151;
    background: #fbfcfd;
    transition: background-color 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.mb-body-box:hover { border-color: #e5e7eb; background: #fff; }
.mb-body-box:focus {
    outline: none;
    background: #fff;
    border-color: #c7d2fe;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 0 0 3px rgba(99, 102, 241, 0.12);
}
/* Even spacing between lines, whichever tag the browser reached for. */
.mb-body-box > p,
.mb-body-box > div { margin: 0 0 0.5em 0; }
.mb-body-box > p:last-child,
.mb-body-box > div:last-child { margin-bottom: 0; }
.mb-body-box > ul,
.mb-body-box > ol { margin: 0.35em 0 0.5em 0; }
/* The action taken. Ruled off from the narrative above it, labelled in the
   gutter, and bold — the same three things the PDF does, so the editor and the
   printed page say the same thing. The label is drawn, not typed, so it cannot
   be half-deleted and it never lands in the saved text. Each action gets its own
   rule, so two or three of them read as separate actions. */
.mb-body-box > p.mb-action,
.mb-body-box > div.mb-action {
    position: relative;
    margin-top: 0.6em;
    padding-top: 0.55em;
    padding-left: 3.4rem;
    border-top: 1px solid #e5e7eb;
    font-weight: 600;
    color: #1f2937;
}
.mb-body-box > p.mb-action::before,
.mb-body-box > div.mb-action::before {
    content: 'Action';
    position: absolute;
    left: 0;
    top: 0.55em;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    /* Sit the small label on the same baseline as the bigger text beside it. */
    line-height: 1;
    padding-top: 0.42em;
    pointer-events: none;
}
/* "+ Add action" — quiet until you hover the item, the way it was before. It also
   stays up while the caret is in the box, so it doesn't vanish out from under the
   mouse as you start writing. */
.mb-add-action {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 5px 0 0 1px;
    padding: 2px 2px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #cbd5e1;
    opacity: 0;
    transition: opacity 0.12s, color 0.12s;
}
.mb-item-hover:hover .mb-add-action,
.mb-body-box:focus + .mb-add-action,
.mb-add-action:focus-visible { opacity: 1; }
.mb-add-action:hover { color: #6366f1; }

.mb-body-box.is-empty::before {
    content: attr(data-placeholder);
    color: #cbd5e1;
    pointer-events: none;
    position: absolute;
    padding: 1px 0;
}
.mb-body-box.is-empty:focus::before { color: #e2e8f0; }
.mb-story-item-group {
    padding: 0;
}

/* Solid blue hairline for agenda (overrides blue/amber gradient) */
.agenda-insert-zone:hover::before {
    background: #93c5fd !important;
}

/* Inline title input for newly inserted agenda items */
.agenda-item-title-input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.875rem;
    color: #111827;
    width: 100%;
    min-width: 0;
    padding: 0;
}
.agenda-item-title-input::placeholder { color: #9ca3af; font-style: italic; }

/* --- Minutes Builder: New Item Animation --- */
@keyframes mbItemSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mb-item-new {
    animation: mbItemSlideIn 0.25s ease-out forwards;
}

/* Placeholder for empty contenteditable elements that supply data-placeholder */
[contenteditable="true"][data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: #9ca3af;
    font-style: italic;
    pointer-events: none;
}

/* Section drop preview — animated placeholder shown while dragging from the
   sidebar tray onto the agenda or minutes container. */
@keyframes sectionDropPulse {
    0%   { opacity: 0; transform: translateY(-6px) scaleY(0.95); }
    40%  { opacity: 1; transform: translateY(0) scaleY(1); }
    70%  { opacity: 0.85; }
    100% { opacity: 1; }
}
.section-drop-placeholder {
    margin: 6px 0;
    animation: sectionDropPulse 0.25s ease-out forwards;
    pointer-events: none;
}
@keyframes sectionDropFlash {
    0%   { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55); }
    50%  { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.18); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}
.section-drop-flash {
    animation: sectionDropFlash 1.2s ease-out;
}


/* =============================================================================
   VIDEO PORTAL & ORG PUBLIC PORTAL
   ============================================================================= */

/* Video portal two-column grid — player width is user-controlled via size class */
.video-portal-grid {
    display: grid;
    grid-template-columns: 1fr var(--portal-player-width, 560px);
    gap: 1.5rem;
    align-items: start;
}
.video-portal-grid.size-s  { --portal-player-width: 380px; }
.video-portal-grid.size-m  { --portal-player-width: 560px; }
.video-portal-grid.size-l  { --portal-player-width: 760px; }
.video-portal-grid.size-xl { grid-template-columns: 1fr 1fr; }
@media (max-width: 768px) {
    .video-portal-grid,
    .video-portal-grid.size-s,
    .video-portal-grid.size-m,
    .video-portal-grid.size-l,
    .video-portal-grid.size-xl {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    /* Video panel ALWAYS visible — sits above the agenda and sticks under the header while you scroll */
    .video-portal-grid > .video-portal-sticky {
        order: -1;
        position: sticky;
        top: 56px; /* portal header height */
        z-index: 20;
        margin: 0 -1rem 0.5rem; /* bleed to viewport edges so it feels anchored */
        padding: 0.5rem 1rem;
        background: linear-gradient(135deg, rgba(8,71,52,0.97) 0%, rgba(10,90,64,0.97) 100%);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    /* Hide the secondary info card on mobile — it eats vertical space without adding info */
    .video-portal-sticky > .portal-glass-panel:nth-of-type(2) {
        display: none;
    }
}

.portal-size-btn {
    padding: 3px 9px; font-size: 11px; font-weight: 500;
    border-radius: 6px; border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.75); background: transparent;
    cursor: pointer; transition: all 0.15s;
}
.portal-size-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }
.portal-size-btn.active { color: #084734; background: #cef17b; border-color: #cef17b; }

/* Make YouTube IFrame fill its 16:9 wrapper exactly */
#yt-player-wrap, #yt-player-wrap iframe, #rec-player, #rec-player iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* Sticky video column */
.video-portal-sticky {
    position: sticky;
    top: 4.5rem;
}

/* Glass card used on both portals */
.portal-glass-panel {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 24px rgba(8, 71, 52, 0.12);
}

/* Agenda item rows in video portal */
.portal-item {
    border-radius: 0.5rem;
    transition: background 0.12s, border-left-color 0.12s;
    border-left: 3px solid transparent;
}
.portal-item:hover {
    background: rgba(206, 241, 123, 0.15);
    border-left-color: rgba(206, 241, 123, 0.5);
}
.portal-item-active {
    background: rgba(206, 241, 123, 0.25) !important;
    border-left-color: #cef17b !important;
}

/* LIVE badge pulsing dot */
.live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    animation: livePulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.75); }
}
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Org portal header */
.org-portal-header {
    background: linear-gradient(135deg, #084734 0%, #0d6647 100%);
}

/* Meeting card in org portal */
.meeting-card {
    background: white;
    border-radius: 1rem;
    border: 1px solid #e5e7eb;
    padding: 1.25rem;
}

/* Timestamp badge in video portal */
.portal-ts-badge {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* Min height for left panel so it scrolls independently */
.max-h-screen-minus-header {
    max-height: calc(100vh - 5rem);
}

@keyframes rec-progress {
    0%   { transform: translateX(-100%); width: 30%; }
    50%  { width: 60%; }
    100% { transform: translateX(250%); width: 30%; }
}

/* =============================================================================
   PUBLIC MEETING VIEW — "Fusion" design (Direction D)
   Used by /public/minutes/{docId} and /public/portal/{orgId}
   Inter font + B-style cards + gray-boxed header & agenda + emerald accent
   ============================================================================= */

.pm-page { background: #fff; color: #0f1614; min-height: 100vh; font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
.pm-wrap { max-width: 1200px; margin: 0 auto; padding: 16px; }
@media (min-width: 768px) { .pm-wrap { padding: 24px; } }

.pm-header { background: #f4f5f6; border: 1px solid #e6e8e7; border-radius: 16px; position: sticky; top: 8px; z-index: 30; backdrop-filter: blur(8px); margin-bottom: 20px; }
.pm-header-inner { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (min-width: 768px) { .pm-header-inner { padding: 12px 20px; } }

.pm-seal { width: 60px; height: 60px; border-radius: 50%; background: #fff; border: 2px solid #084734; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: #084734; letter-spacing: 0.05em; box-shadow: 0 1px 2px rgba(8,71,52,0.08); object-fit: cover; overflow: hidden; flex-shrink: 0; }
.pm-seal img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pm-title-seal { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid #e6e8e7; box-shadow: 0 2px 8px rgba(8,71,52,0.10); display: block; }

.pm-org { font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; color: #7a857f; }
.pm-meeting-title { font-size: 14px; font-weight: 600; color: #0f1614; line-height: 1.3; }

.pm-tabs { display: flex; gap: 6px; }
.pm-tab-btn { padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 500; transition: all 0.15s; color: #4b5651; border: none; background: transparent; cursor: pointer; }
.pm-tab-btn:hover { background: rgba(8,71,52,0.05); color: #0f1614; }
.pm-tab-btn.active { background: #084734; color: #fff; font-weight: 600; }

/* The video column is fixed, so the width freed by dropping the left rail would
   all have gone to the text. Split it: the video gets bigger too. */
.pm-grid { display: grid; grid-template-columns: 1fr 620px; gap: 24px; align-items: start; }
.pm-grid.no-video { grid-template-columns: 1fr; max-width: 880px; margin: 0 auto; }
.pm-video-col { position: sticky; top: 92px; align-self: start; }
@media (max-width: 900px) {
    .pm-grid { grid-template-columns: 1fr; }
    .pm-video-col { position: sticky; top: 76px; z-index: 20; }
}

.pm-agenda-box { background: #f4f5f6; border: 1px solid #e6e8e7; border-radius: 16px; padding: 8px; }

/* Meeting view switcher — a tab strip across the top, aligned right.
   It used to be a 200px left rail, which cost the content 228px of width for
   four or five words. Sticky so switching views stays reachable down a
   three-hour transcript. */
.pm-layout { margin-top: 14px; }
/* The tabs sit on the title's own line, bottom-aligned so they run with the
   date/time rather than opening a band of their own between the title and the
   content. The rule under them belongs to the row now, not to the title. */
.pm-title-row {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px 32px; flex-wrap: wrap;
    border-bottom: 1px solid #e6e8e7; margin-bottom: 10px;
}
.pm-sidenav {
    flex: 0 0 auto;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px;
    padding-bottom: 22px;
}
.pm-sidenav-item { display: inline-flex; align-items: center; gap: 9px; font-size: 0.9rem; font-weight: 600; color: #4b5651; background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 8px 14px; cursor: pointer; text-align: left; white-space: nowrap; transition: 0.15s; }
.pm-sidenav-item:hover { background: #eef1ef; color: #084734; }
.pm-sidenav-item.active { background: #084734; color: #fff; }
.pm-sidenav-item:focus-visible { outline: 2px solid #084734; outline-offset: 2px; }
.pm-sidenav-item i { width: 16px; text-align: center; font-size: 0.82rem; }
.pm-sidenav-sep { width: 1px; align-self: stretch; background: #e3e6e5; margin: 4px 8px; }
.pm-download-btn { display: inline-flex; align-items: center; gap: 9px; font-size: 0.86rem; font-weight: 600; color: #084734; background: #cef17b; border: none; border-radius: 10px; padding: 8px 14px; cursor: pointer; white-space: nowrap; transition: 0.15s; }
.pm-download-btn:hover { filter: brightness(0.96); }
.pm-download-btn i { width: 16px; text-align: center; }
/* Count badge on the Files nav item */
.pm-sidenav-badge { font-size: 0.72rem; font-weight: 700; background: #eef1ef; color: #4b5651; border-radius: 999px; padding: 1px 8px; }
.pm-sidenav-item.active .pm-sidenav-badge { background: rgba(255, 255, 255, 0.22); color: #fff; }
/* Files view rows */
.pm-file-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid #eef1ef; text-decoration: none; transition: 0.15s; }
.pm-file-row:last-child { border-bottom: none; }
.pm-file-row:hover { background: #f7faf3; }
.pm-file-icon { font-size: 1.05rem; color: #7a857f; width: 20px; text-align: center; flex-shrink: 0; }
.pm-file-row:hover .pm-file-icon { color: #084734; }
.pm-file-body { flex: 1; min-width: 0; }
.pm-file-name { font-size: 0.9rem; font-weight: 600; color: #0f1614; word-break: break-word; }
.pm-file-letter { display: inline-block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #084734; background: #cef17b; border-radius: 5px; padding: 2px 7px; margin-right: 8px; vertical-align: 1px; }
.pm-file-context { font-size: 0.76rem; color: #7a857f; margin-top: 2px; }
.pm-file-size { font-size: 0.76rem; color: #7a857f; flex-shrink: 0; white-space: nowrap; }
.pm-file-action { font-size: 0.78rem; color: #c2cbc6; flex-shrink: 0; }
.pm-file-row:hover .pm-file-action { color: #084734; }
.pm-main { min-width: 0; }
/* Full width, same as the Recording view and the header above it. This used to
   cap at 880px, which left the Agenda and Minutes as a narrow column pinned to
   the left of a much wider page. */
.pm-doc { max-width: none; }
/* Written minutes (the minutes-tool output), rendered as a document */
/* Full width, same as the Agenda. .pm-doc's cap came off with the left rail, but
   the minutes document carried its own and stayed a narrow column. */
.pm-minutes-doc { background: #fff; border: 1px solid #e6e8e7; border-radius: 16px; padding: 30px 34px; font-size: 0.9rem; line-height: 1.72; color: #1a2420; box-shadow: 0 1px 3px rgba(16,22,20,.05); }
.pm-minutes-doc .section-title { font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.82rem; color: #084734; margin: 20px 0 8px; }
.pm-minutes-doc h1, .pm-minutes-doc h2, .pm-minutes-doc h3, .pm-minutes-doc h4 { font-weight: 700; color: #0f1614; margin: 18px 0 8px; line-height: 1.3; }
.pm-minutes-doc p { margin-bottom: 11px; }
.pm-minutes-doc ul, .pm-minutes-doc ol { margin: 8px 0 12px 22px; }
.pm-minutes-doc li { margin-bottom: 5px; }
.pm-minutes-doc table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.pm-minutes-doc td, .pm-minutes-doc th { padding: 5px 8px; }
.pm-minutes-doc img { max-width: 100%; height: auto; }
.pm-minutes-doc .header, .pm-minutes-doc h1:first-child { text-align: center; }
/* Nodes of the published minutes document (minutesDoc) */
.pm-md-header { padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid #eef1ef; }
.pm-md-header p { margin-bottom: 4px; }
.pm-md-section { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #084734; margin: 26px 0 10px; padding-bottom: 5px; border-bottom: 1px solid #e6e8e7; }
.pm-md-body { margin-bottom: 9px; }
.pm-md-body p:last-child { margin-bottom: 0; }
.pm-md-body ul, .pm-md-action ul { list-style-type: disc; padding-left: 1.4em; margin: 5px 0; }
.pm-md-body ol, .pm-md-action ol { list-style-type: decimal; padding-left: 1.4em; margin: 5px 0; }
.pm-md-body li, .pm-md-action li { margin-bottom: 3px; }
.pm-md-body u, .pm-md-action u, .pm-md-item-head u { text-decoration: underline; }
.pm-md-body p.mb-action {
    position: relative;
    margin-top: 10px;
    padding-top: 9px;
    padding-left: 3.6rem;
    border-top: 1px solid #eef1ef;
    font-weight: 600;
    color: #1a2420;
}
.pm-md-body p.mb-action::before {
    content: 'Action';
    position: absolute;
    left: 0;
    top: 9px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7a857f;
}
.pm-md-item { margin: 0 0 20px; }
.pm-md-item-head { font-weight: 700; color: #0f1614; margin-bottom: 6px; display: flex; gap: 10px; align-items: baseline; }
.pm-md-num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; color: #7a857f; flex-shrink: 0; }
.pm-md-mo { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #7a857f; text-align: right; margin-bottom: 2px; }
.pm-md-motion { font-style: italic; color: #3a443f; margin: 14px 0 4px; }
.pm-md-action { display: flex; gap: 10px; align-items: baseline; margin-top: 9px; padding-top: 9px; border-top: 1px solid #eef1ef; font-weight: 600; color: #1a2420; }
.pm-md-action-tag { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #7a857f; flex-shrink: 0; }
.pm-md-exref { font-size: 0.8rem; font-style: italic; color: #7a857f; margin-top: 5px; }
.pm-md-exhibits { border: 1px solid #e6e8e7; border-radius: 12px; overflow: hidden; }
.pm-md-exhibit { display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-bottom: 1px solid #eef1ef; text-decoration: none; transition: 0.15s; }
.pm-md-exhibit:last-child { border-bottom: none; }
.pm-md-exhibit:hover { background: #f7faf3; }
.pm-md-exhibit:hover .pm-file-icon, .pm-md-exhibit:hover .pm-file-action { color: #084734; }
.pm-md-sign { margin-top: 30px; padding-top: 18px; border-top: 1px solid #e6e8e7; }
.pm-md-approval { font-style: italic; margin-bottom: 22px; }
.pm-md-sign-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 24px; }
.pm-md-sign-line { border-top: 1px solid #4b5651; padding-top: 6px; font-size: 0.82rem; color: #3a443f; }
@media (max-width: 640px) {
    .pm-minutes-doc { padding: 22px 18px; }
    .pm-md-sign-grid { grid-template-columns: 1fr; }
}
.pm-transcript-card { margin-top: 22px; background: #fff; border: 1px solid #e6e8e7; border-radius: 16px; padding: 18px 20px; }
.pm-transcript-card h3 { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #7a857f; margin-bottom: 10px; }
.pm-transcript-body { font-size: 0.86rem; line-height: 1.7; color: #3a443f; white-space: pre-wrap; max-height: 540px; overflow: auto; }

/* ── Public transcript view ─────────────────────────────────────────────────
   Searchable, click-to-seek meeting transcript on the citizen portal. The
   search bar sticks to the top of the panel because the point of it is finding
   a word in a six-hour meeting — it has to stay reachable while scrolling. */
.pt-panel { background: #fff; border: 1px solid #e6e8e7; border-radius: 16px; overflow: hidden; }
.pt-toolbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border-bottom: 1px solid #eceeed; }
.pt-search-wrap { position: relative; flex: 1; min-width: 0; }
.pt-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 0.78rem; color: #66706b; pointer-events: none; }
.pt-search { width: 100%; font-size: 0.88rem; color: #23302b; background: #f6f8f7; border: 1px solid #e2e6e4; border-radius: 10px; padding: 9px 12px 9px 34px; outline: none; transition: 0.15s; }
.pt-search:focus { background: #fff; border-color: #084734; box-shadow: 0 0 0 3px rgba(8, 71, 52, 0.1); }
.pt-search::-webkit-search-cancel-button { cursor: pointer; }
.pt-search-nav { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pt-search-nav > span:last-child:not(:empty) { display: inline-flex; align-items: center; gap: 6px; }
.pt-count { font-size: 0.76rem; font-weight: 600; color: #66706b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-count:empty { display: none; }
.pt-count.pt-none { color: #b04a3a; }
.pt-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; border: 1px solid #e2e6e4; background: #fff; color: #4b5651; font-size: 0.68rem; cursor: pointer; transition: 0.15s; }
.pt-nav-btn:hover { background: #084734; border-color: #084734; color: #fff; }
.pt-nav-btn:focus-visible { outline: 2px solid #084734; outline-offset: 2px; }

/* A scrollable region has to be reachable by keyboard, so it carries tabindex=0
   and needs a focus ring to show where the caret went. */
.pt-body { max-height: calc(100vh - 220px); overflow-y: auto; padding: 6px 0 14px; }
.pt-body:focus-visible { outline: 2px solid #084734; outline-offset: -2px; }
.pt-note { padding: 40px 20px; text-align: center; font-size: 0.86rem; color: #66706b; }

.pt-seg { padding: 2px 16px; border-left: 3px solid transparent; transition: background 0.15s, border-color 0.15s; }
.pt-seg.playing { background: #f2f8ec; border-left-color: #084734; }
.pt-speaker { margin-top: 14px; margin-bottom: 2px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #084734; }
.pt-line { display: flex; align-items: baseline; gap: 10px; }
.pt-time { flex-shrink: 0; width: 52px; text-align: right; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; font-variant-numeric: tabular-nums; color: #66706b; background: none; border: none; padding: 0; cursor: pointer; transition: color 0.15s; }
.pt-time:hover { color: #084734; text-decoration: underline; }
.pt-time:focus-visible { outline: 2px solid #084734; outline-offset: 2px; border-radius: 3px; color: #084734; }
.pt-time-none { cursor: default; }
.pt-text { flex: 1; min-width: 0; margin: 0; font-size: 0.88rem; line-height: 1.65; color: #3a443f; }
.pt-seg.seekable .pt-text { cursor: pointer; }
.pt-seg.seekable .pt-text:hover { color: #084734; }

.pt-hit { background: #fdf0a8; color: inherit; border-radius: 2px; padding: 0 1px; }
.pt-hit.current { background: #f6c344; box-shadow: 0 0 0 2px rgba(246, 195, 68, 0.45); }

/* "Jump to an item" — under the video, once the transcript has taken over the
   reading column. Only items the timeline placed appear here. */
.pm-jump-card { margin-top: 12px; max-height: 340px; overflow-y: auto; background: #fff; border: 1px solid #e6e8e7; border-radius: 14px; }
.pm-jump-head { position: sticky; top: 0; background: #fff; padding: 10px 14px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #66706b; border-bottom: 1px solid #eceeed; }
.pm-jump-row { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 8px 14px; background: none; border: none; border-bottom: 1px solid #f2f4f3; text-align: left; cursor: pointer; transition: background 0.15s; }
.pm-jump-row:last-child { border-bottom: none; }
.pm-jump-row:hover { background: #f2f8ec; }
.pm-jump-row:focus-visible { outline: 2px solid #084734; outline-offset: -2px; }
.pm-jump-num { flex-shrink: 0; min-width: 20px; font-size: 0.74rem; font-weight: 700; color: #66706b; font-variant-numeric: tabular-nums; }
.pm-jump-title { flex: 1; min-width: 0; font-size: 0.84rem; line-height: 1.45; color: #3a443f; }
.pm-jump-time { flex-shrink: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; font-variant-numeric: tabular-nums; color: #66706b; }

@media (max-width: 820px) {
    .pt-body { max-height: none; }
    .pt-time { width: 44px; }
}

@media (max-width: 820px) {
    /* Narrow enough that right-aligning would strand the tabs away from a
       thumb, and the divider before Download PDF has no room to read as one.
       Not sticky either: the header wraps to three lines here, so a second
       pinned bar would collide with it and eat a phone screen. */
    .pm-sidenav { position: static; justify-content: flex-start; gap: 6px; }
    .pm-sidenav-item { padding: 8px 11px; }
    .pm-sidenav-sep { display: none; }
}

/* Live status / chips */
.pm-live-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; padding: 3px 9px; border-radius: 999px; background: #fee2e2; color: #b91c1c; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.pm-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; animation: pm-pulse 1.4s ease-in-out infinite; }
@keyframes pm-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }

.pm-status-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 3px 9px; border-radius: 999px; background: #f4f5f6; color: #4b5651; font-weight: 500; }

.pm-members { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; }
.pm-member-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: #fff; border: 1px solid #e6e8e7; border-radius: 999px; font-size: 12px; color: #0f1614; }
.pm-member-chip.absent { color: #9ca3af; text-decoration: line-through; background: #fafbfa; }
.pm-member-chip .pm-member-title { color: #7a857f; font-size: 11px; }

.pm-section-label { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #084734; padding: 16px 4px 8px; display: flex; align-items: center; gap: 8px; }
.pm-section-label::after { content: ''; flex: 1; height: 1px; background: #e6e8e7; }
.pm-section-label-icon { color: #084734; opacity: 0.6; }

/* Agenda items */
.pm-item { background: #fff; border: 1px solid transparent; border-radius: 10px; padding: 12px 14px; cursor: pointer; transition: all 0.15s; }
.pm-item:hover { border-color: #e6e8e7; }
.pm-item.expanded { background: #ecf7d2; border-color: #cef17b; cursor: default; }
.pm-item.live-active { background: #fef3c7; border-color: #facc15; }
.pm-item + .pm-item { margin-top: 4px; }

.pm-item-row { display: flex; align-items: center; gap: 14px; }
.pm-item-num { font-weight: 700; font-size: 13px; color: #084734; min-width: 32px; }
.pm-item-title { flex: 1; font-size: 14px; color: #0f1614; overflow: hidden; text-overflow: ellipsis; }
.pm-item.expanded .pm-item-title { font-weight: 600; color: #084734; }
.pm-expand-chevron { font-size: 10px; color: #b0b8b4; transition: transform 0.2s; flex-shrink: 0; }
.pm-item.expanded .pm-expand-chevron { transform: rotate(180deg); color: #084734; }

/* Agenda item description rich-text editor */
.ag-desc-wrap { flex: 1; min-width: 0; }
.ag-desc-toolbar { display: none; align-items: center; gap: 2px; padding: 2px 3px; background: #fff; border: 1px solid #e2e8f0; border-radius: 4px; margin-bottom: 3px; flex-wrap: wrap; }
.ag-desc-wrap:focus-within .ag-desc-toolbar { display: flex; }
.ag-desc-btn { min-width: 20px; height: 20px; border-radius: 3px; font-size: 10px; display: flex; align-items: center; justify-content: center; color: #64748b; cursor: pointer; padding: 0 3px; border: none; background: transparent; line-height: 1; }
.ag-desc-btn:hover { background: #f1f5f9; color: #1e293b; }
.ag-desc-sep { width: 1px; height: 12px; background: #e2e8f0; margin: 0 1px; flex-shrink: 0; }
.ag-desc-content ul { list-style-type: disc; padding-left: 1.25em; margin: 2px 0; }
.ag-desc-content ol { list-style-type: decimal; padding-left: 1.25em; margin: 2px 0; }
.ag-desc-content li { margin-bottom: 1px; }

/* Minutes body boxes — restore the formatting the Tailwind reset strips, so what
   the clerk applies is what the clerk sees. Every editable box in the minutes
   document carries .mb-rich. */
.mb-rich ul { list-style-type: disc; padding-left: 1.25em; margin: 3px 0; }
.mb-rich ol { list-style-type: decimal; padding-left: 1.25em; margin: 3px 0; }
.mb-rich li { margin-bottom: 2px; }
.mb-rich strong, .mb-rich b { font-weight: 600; }
.mb-rich em, .mb-rich i { font-style: italic; }
.mb-rich u { text-decoration: underline; }
.mb-rich p { margin: 0 0 4px 0; }
.mb-rich p:last-child { margin-bottom: 0; }

/* The formatting toolbar. One per document, tucked into the top-right corner of
   the box being edited (position is set from JS — see mbPositionFormatBar).
   Deliberately quiet: pale, small, and never over the text. */
#mb-format-bar {
    position: fixed; z-index: 60; display: none; align-items: center; gap: 1px;
    padding: 2px; border-radius: 8px;
    background: #fff; border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07);
    animation: mbFmtIn 0.12s ease-out;
}
@keyframes mbFmtIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.mb-fmt-btn {
    width: 24px; height: 22px; border: none; border-radius: 5px; cursor: pointer;
    background: transparent; color: #94a3b8; font-size: 10px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color 0.12s, color 0.12s;
}
.mb-fmt-btn:hover { background: #f1f5f9; color: #334155; }
.mb-fmt-btn.is-on { background: #eef2ff; color: #4f46e5; }
.mb-fmt-sep { width: 1px; height: 12px; background: #e5e7eb; margin: 0 2px; }

/* Transcript item-start row transitions */
.ts-segrow { transition: box-shadow .12s ease, background-color .12s ease; }
@keyframes tsBoundaryDrop {
  0%   { transform: translateY(-8px); opacity: .3; background-color: #c7d2fe; }
  60%  { background-color: #e0e7ff; }
  100% { transform: none; opacity: 1; }
}
.ts-boundary-justmoved { animation: tsBoundaryDrop .3s ease-out; }

@keyframes tsMotionFlash {
  0%   { background-color: #fef08a; }
  100% { background-color: transparent; }
}
.ts-motion-flash { animation: tsMotionFlash 1.6s ease-out; }

/* Speakers tab — the per-voice breakdown panel under each speaker card.
   Single-open accordion: opening one voice collapses the others (see
   tsMicCloseOthers). max-height is driven from JS (0 → scrollHeight → none) so
   both directions animate; it's released to `none` once open so the inner
   scroll list and the reassign menus are never clipped by this container. */
.ts-mic {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .24s ease, opacity .16s ease;
}
.ts-mic.ts-mic-open { opacity: 1; }

/* The inline "Add to board? → Voting member?" prompts slide in as each answer
   advances the flow. */
@keyframes tsStepSlide {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}
.ts-step-slide { animation: tsStepSlide .18s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .ts-mic { transition-duration: 1ms; }
  .ts-step-slide { animation-duration: 1ms; }
}

.pm-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; padding: 2px 8px; border-radius: 4px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.pm-chip-action { background: #084734; color: #fff; }
.pm-chip-info { background: #fff; color: #7a857f; border: 1px solid #e6e8e7; }
.pm-chip-timed { background: #cef17b; color: #084734; }
.pm-chip-exec { background: #ede9fe; color: #5b21b6; }
.pm-chip-carried { background: #d1fae5; color: #065f46; }
.pm-chip-failed { background: #fee2e2; color: #991b1b; }
.pm-chip-tabled { background: #fed7aa; color: #9a3412; }
.pm-chip-noaction { background: #e5e7eb; color: #4b5563; }

.pm-ts-pill { font-feature-settings: "tnum"; font-weight: 600; color: #084734; background: #fff; border: 1px solid #e6e8e7; padding: 3px 10px; border-radius: 6px; font-size: 11px; min-width: 56px; text-align: center; }
.pm-item.expanded .pm-ts-pill { background: #084734; color: #fff; border-color: #084734; }
.pm-ts-empty { color: #7a857f; background: #f4f5f6; border-style: dashed; }

.pm-speakers-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 3px 10px; border-radius: 6px; background: #ede9fe; color: #5b21b6; border: 1px solid #ddd6fe; font-weight: 600; cursor: pointer; }
.pm-speakers-btn:hover { background: #ddd6fe; }

/* Expanded packet */
.pm-packet { background: #fff; border-top: 1px solid #cef17b; margin-top: 10px; border-radius: 0 0 8px 8px; padding: 16px 18px; }
.pm-packet-grid { display: grid; grid-template-columns: 130px 1fr; gap: 10px 24px; font-size: 12.5px; line-height: 1.55; }
.pm-packet-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #7a857f; padding-top: 2px; }
.pm-packet-value { color: #0f1614; }

.pm-attach { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; padding: 6px 11px; background: #f4f5f6; border: 1px solid #e6e8e7; border-radius: 8px; color: #084734; font-weight: 500; transition: all 0.15s; text-decoration: none; }
.pm-attach:hover { background: #ecf7d2; border-color: #cef17b; }
.pm-attach-size { color: #7a857f; font-weight: 400; }

/* Vote result block */
.pm-vote { padding: 12px 14px; background: #fafbfa; border: 1px solid #e6e8e7; border-radius: 8px; margin-top: 10px; }
.pm-vote-result { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pm-vote-narrative { font-size: 13px; color: #4b5651; line-height: 1.5; margin-bottom: 8px; }
.pm-member-votes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; font-size: 12px; }
.pm-member-vote { display: flex; align-items: center; gap: 6px; }
.pm-member-vote-icon { width: 14px; height: 14px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 9px; color: #fff; font-weight: 700; }
.pm-mv-yea { background: #10b981; }
.pm-mv-nay { background: #ef4444; }
.pm-mv-abstain { background: #9ca3af; }

/* Video card */
.pm-video-card { background: #fff; border: 1px solid #e6e8e7; border-radius: 16px; overflow: hidden; }
.pm-video-info { padding: 12px 16px; border-top: 1px solid #e6e8e7; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pm-info-card { background: #f4f5f6; border: 1px solid #e6e8e7; border-radius: 12px; padding: 14px; font-size: 12px; line-height: 1.6; color: #4b5651; margin-top: 12px; }

/* PDF preview card */
.pm-pdf-card { background: #fff; border: 1px solid #e6e8e7; border-radius: 16px; overflow: hidden; margin-top: 12px; }
.pm-pdf-header { padding: 10px 14px; border-bottom: 1px solid #e6e8e7; display: flex; align-items: center; gap: 8px; background: #fafbfa; }
.pm-pdf-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: #0f1614; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-pdf-open-link { flex-shrink: 0; font-size: 11px; color: #084734; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; padding: 3px 8px; border: 1px solid #e6e8e7; border-radius: 6px; transition: all 0.15s; white-space: nowrap; }
.pm-pdf-open-link:hover { background: #ecf7d2; border-color: #cef17b; }
.pm-pdf-close-btn { flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px; border: 1px solid #e6e8e7; background: #f4f5f6; color: #7a857f; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 10px; transition: all 0.15s; }
.pm-pdf-close-btn:hover { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.pm-pdf-frame-wrap { width: 100%; height: 480px; background: #f4f5f6; }
.pm-pdf-iframe { width: 100%; height: 100%; border: none; display: block; }

/* Attachment button / active state */
.pm-attach { cursor: pointer; background: none; font-family: inherit; }
.pm-attach-preview-icon { font-size: 9px; color: #7a857f; margin-left: 2px; }
.pm-attach.pm-attach-active { background: #ecf7d2; border-color: #cef17b; color: #084734; }
.pm-attach.pm-attach-active .pm-attach-preview-icon { color: #084734; }

/* Footer */
.pm-footer { margin-top: 40px; padding: 24px 8px; border-top: 1px solid #e6e8e7; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 11px; color: #7a857f; }
.pm-footer a { color: #084734; font-weight: 600; }

/* Mobile sticky video */
@media (max-width: 900px) {
    .pm-grid > .pm-video-col {
        order: -1;
        margin: 0 -16px 12px;
        padding: 8px 16px;
        background: rgba(255,255,255,0.96);
        backdrop-filter: blur(8px);
        border-bottom: 1px solid #e6e8e7;
    }
}

/* Org portal hub — same visual language */
.pm-org-hero { background: linear-gradient(135deg, #084734 0%, #0d6647 100%); border-radius: 20px; color: #fff; padding: 28px; margin-bottom: 24px; }
.pm-meeting-card { background: #f4f5f6; border: 1px solid #e6e8e7; border-radius: 14px; padding: 18px; transition: all 0.15s; cursor: pointer; }
.pm-meeting-card:hover { background: #fff; border-color: #cef17b; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(8,71,52,0.08); }
.pm-meeting-tab { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 4px 10px; border-radius: 6px; font-weight: 500; background: #fff; color: #4b5651; border: 1px solid #e6e8e7; transition: all 0.15s; }
.pm-meeting-tab:hover { background: #084734; color: #fff; border-color: #084734; }
.pm-meeting-tab.live { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.pm-meeting-tab.live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #ef4444; animation: pm-pulse 1.4s ease-in-out infinite; }

/* Public meeting page — editorial title block */
/* The rule below the title belongs to .pm-title-row now, so that it runs the
   full width under the tabs too rather than stopping where the title stops. */
.pm-title-block { flex: 1 1 320px; min-width: 0; padding: 32px 4px 22px; }
.pm-breadcrumb { font-size: 12px; color: #7a857f; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-breadcrumb a { color: #084734; font-weight: 500; text-decoration: none; transition: opacity 0.15s; }
.pm-breadcrumb a:hover { opacity: 0.7; }
.pm-breadcrumb-sep { color: #d1d5db; }
.pm-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #084734; margin-bottom: 10px; }
.pm-headline { font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; color: #0f1614; margin: 0; }
@media (min-width: 768px) { .pm-headline { font-size: 36px; } }
.pm-meta-row { font-size: 14px; color: #4b5651; margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pm-meta-row span { display: inline-flex; align-items: center; }
.pm-meta-row i { color: #084734; margin-right: 6px; font-size: 13px; }
.pm-meta-sep { color: #d1d5db; }

/* ===== PDF AGENDA IMPORT ===== */
.import-drop-zone {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 36px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: #fafafa;
}
.import-drop-zone.drag-over {
    border-color: #3b5bdb;
    background: #eef2ff;
}
.import-drop-zone:hover { border-color: #9ca3af; }

.import-spreadsheet-table { border-collapse: collapse; }
.import-spreadsheet-table .import-th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.import-spreadsheet-table td { border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.import-spreadsheet-table tbody tr:last-child td { border-bottom: none; }

.import-section-row td { background: #f8fafc; border-bottom: 2px solid #e2e8f0 !important; }
.import-section-row:hover td { background: #f1f5f9; }

.import-item-row:hover td { background: #fafafa; }

.import-cell[contenteditable="true"] {
    outline: none;
    cursor: text;
    min-height: 20px;
    display: block;
    padding: 6px 8px;
    border-radius: 4px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}
.import-cell[contenteditable="true"]:focus {
    background: #eff6ff;
    box-shadow: 0 0 0 2px #3b82f6;
}

.import-type-low { border-color: #f59e0b !important; }
.import-badge-warn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #f59e0b;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    margin-left: 4px;
    cursor: default;
    flex-shrink: 0;
}

.import-drag-handle {
    cursor: grab;
    color: #cbd5e1;
    padding: 4px 6px;
    font-size: 12px;
    line-height: 1;
}
.import-drag-handle:active { cursor: grabbing; }

.import-delete-row {
    background: none;
    border: none;
    color: #d1d5db;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1;
    transition: color 0.1s, background 0.1s;
}
.import-delete-row:hover { color: #ef4444; background: #fef2f2; }

.import-section-name-input {
    font-weight: 600;
    font-size: 13px;
    border: none;
    background: transparent;
    outline: none;
    padding: 2px 4px;
    border-radius: 4px;
    color: #1e293b;
    min-width: 200px;
}
.import-section-name-input:focus { background: #eff6ff; box-shadow: 0 0 0 2px #3b82f6; }

.import-type-select {
    font-size: 11px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 2px 6px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    outline: none;
}
.import-type-select:focus { border-color: #3b82f6; }

/* editable cells + drag handle for the unified builder */
.u-cell {
    outline: none;
    border-radius: 4px;
    padding: 2px 4px;
    min-height: 1.2em;
}
.u-cell[contenteditable="true"]:hover { background: #f8fafc; }
.u-cell[contenteditable="true"]:focus { background: #eff6ff; box-shadow: 0 0 0 2px #3b82f6; }
.u-drag-handle { cursor: grab; padding: 2px 3px; font-size: 11px; }
.u-drag-handle:active { cursor: grabbing; }
.u-add-row td { border-top: 1px dashed #e2e8f0; }

/* subtle convert (item <-> header) toggle for the unified builder */
.u-convert-btn {
    background: none;
    border: none;
    color: #cbd5e1;
    cursor: pointer;
    padding: 3px 6px;
    font-size: 12px;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.1s, background 0.1s;
}
.u-convert-btn:hover { color: #475569; background: #f1f5f9; }

/* Per-item "action item" (votable) toggle in the agenda builder */
.import-action-item-toggle {
    background: none;
    border: none;
    color: #cbd5e1;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.1s, background 0.1s;
}
.import-action-item-toggle:hover { background: #f1f5f9; color: #64748b; }
.import-action-item-toggle.is-on { color: #b45309; }
.import-action-item-toggle.is-on:hover { color: #92400e; background: #fef3c7; }

/* indent / outdent controls for nested agenda items */
.import-indent-controls { white-space: nowrap; }
.import-indent-btn {
    background: none;
    border: none;
    color: #cbd5e1;
    cursor: pointer;
    padding: 2px 3px;
    font-size: 11px;
    line-height: 1;
    border-radius: 3px;
    transition: color 0.1s, background 0.1s;
}
.import-indent-btn:hover { color: #475569; background: #f1f5f9; }

/* nested item rows get a subtle left guide so depth reads at a glance */
.import-item-row[data-depth="1"] .import-cell[data-field="title"],
.import-item-row[data-depth="2"] .import-cell[data-field="title"],
.import-item-row[data-depth="3"] .import-cell[data-field="title"] {
    border-left: 2px solid #e2e8f0;
    padding-left: 8px;
}

/* sortable ghost/drag states */
.sortable-ghost { opacity: 0.4; background: #e0f2fe !important; }
.sortable-chosen { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }

.import-prefix-input {
    width: 38px;
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 2px 4px;
    background: #fff;
    color: #475569;
    outline: none;
}
.import-prefix-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.2); }
.import-spreadsheet-table th:first-child,
.import-spreadsheet-table td:first-child { min-width: 70px; }

/* ============================================================
   REQUEST FORM — Phase 2
   Notion-style full-page submission form (view-request-form)
   ============================================================ */

/* Design tokens scoped to the form */
.rf-page {
  --rf-emerald-800: #1d4730;
  --rf-emerald-700: #3d6b1c;
  --rf-emerald-600: #5a9326;
  --rf-emerald-100: #dff2c5;
  --rf-emerald-50:  #f5fbe6;
  --rf-ink-900: #111827;
  --rf-ink-700: #374151;
  --rf-ink-500: #6b7280;
  --rf-ink-400: #9ca3af;
  --rf-ink-200: #e5e7eb;
  --rf-ink-100: #f3f4f6;
  --rf-ink-50:  #f9fafb;
  --rf-radius:  8px;
  --rf-font-doc: 'Source Serif 4', Georgia, serif;
  --rf-font-ui:  system-ui, -apple-system, sans-serif;

  min-height: 100%;
  background: #fff;
}

/* Top bar — breadcrumb + actions */
.rf-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--rf-ink-200);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.rf-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-family: var(--rf-font-ui);
  color: var(--rf-ink-500);
  background: none;
  border: none;
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.rf-back:hover { color: var(--rf-ink-900); background: var(--rf-ink-100); }

.rf-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Status pill */
.rf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--rf-font-ui);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.rf-pill--draft     { background: var(--rf-ink-100); color: var(--rf-ink-500); }
.rf-pill--submitted { background: #dbeafe; color: #1e40af; }
.rf-pill--review    { background: #fef3c7; color: #92400e; }
.rf-pill--returned  { background: #ffedd5; color: #9a3412; }
.rf-pill--approved  { background: #d1fae5; color: #065f46; }
.rf-pill--placed    { background: #d1fae5; color: #065f46; }
.rf-pill--rejected  { background: #fee2e2; color: #991b1b; }
.rf-pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
}

/* Buttons */
.rf-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--rf-font-ui);
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
  white-space: nowrap;
  border: 1px solid transparent;
}
.rf-btn--ghost {
  background: #fff;
  border-color: var(--rf-ink-200);
  color: var(--rf-ink-700);
}
.rf-btn--ghost:hover { background: var(--rf-ink-100); }
.rf-btn--primary {
  background: var(--rf-emerald-800);
  color: #fff;
  border-color: var(--rf-emerald-800);
}
.rf-btn--primary:hover { background: var(--rf-emerald-700); }
.rf-btn--danger {
  background: #fff;
  border-color: #fca5a5;
  color: #b91c1c;
}
.rf-btn--danger:hover { background: #fef2f2; }
.rf-btn--sm { padding: 5px 11px; font-size: 12px; }
.rf-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Document canvas */
.rf-doc {
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 48px 80px;
}

/* Banners */
.rf-info-banner, .rf-exec-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--rf-radius);
  font-size: 13px;
  font-family: var(--rf-font-ui);
  line-height: 1.5;
  margin-bottom: 20px;
}
.rf-info-banner {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}
.rf-exec-banner {
  background: #fdf4ff;
  color: #6b21a8;
  border: 1px solid #e9d5ff;
}
.rf-exec-banner svg, .rf-info-banner svg { flex-shrink: 0; margin-top: 1px; }

/* Large document title */
.rf-doc-title {
  width: 100%;
  font-family: var(--rf-font-doc);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--rf-ink-900);
  border: none;
  outline: none;
  resize: none;
  padding: 0;
  margin-bottom: 4px;
  background: transparent;
  overflow: hidden;
}
.rf-doc-title::placeholder { color: var(--rf-ink-200); }
.rf-doc-title:focus { outline: none; }

.rf-field-err {
  font-size: 12px;
  color: #dc2626;
  font-family: var(--rf-font-ui);
  margin-top: 4px;
  margin-bottom: 8px;
}

/* Properties table (Notion-style) */
.rf-props {
  margin: 20px 0 28px;
  border: 1px solid var(--rf-ink-200);
  border-radius: var(--rf-radius);
  overflow: hidden;
  background: var(--rf-ink-50);
}
.rf-prop-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  border-bottom: 1px solid var(--rf-ink-200);
}
.rf-prop-row:last-child { border-bottom: none; }
.rf-prop-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--rf-font-ui);
  color: var(--rf-ink-500);
  background: var(--rf-ink-50);
  border-right: 1px solid var(--rf-ink-200);
  white-space: nowrap;
}
.rf-prop-value {
  padding: 6px 10px;
  background: #fff;
}
.rf-prop-input, .rf-prop-select {
  width: 100%;
  font-size: 13px;
  font-family: var(--rf-font-ui);
  color: var(--rf-ink-900);
  background: transparent;
  border: none;
  outline: none;
  padding: 3px 0;
}
.rf-prop-select { cursor: pointer; }
.rf-prop-readonly { font-size: 13px; color: var(--rf-ink-900); padding: 3px 0; display: block; }
.rf-req-star { color: #dc2626; margin-left: 2px; }
.rf-optional { color: var(--rf-ink-400); font-size: 11px; font-weight: 400; }

/* Content blocks */
.rf-block {
  margin-bottom: 28px;
}
.rf-block-head {
  font-size: 15px;
  font-weight: 600;
  font-family: var(--rf-font-ui);
  color: var(--rf-ink-900);
  margin: 0 0 8px;
  letter-spacing: -.01em;
}
.rf-block-textarea {
  width: 100%;
  font-size: 14px;
  font-family: var(--rf-font-ui);
  line-height: 1.65;
  color: var(--rf-ink-900);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 10px;
  resize: vertical;
  background: var(--rf-ink-50);
  transition: border-color .15s, background .15s, box-shadow .15s;
  min-height: 80px;
}
.rf-block-textarea:hover { background: var(--rf-ink-100); }
.rf-block-textarea:focus {
  background: #fff;
  border-color: var(--rf-emerald-600);
  outline: none;
  box-shadow: 0 0 0 3px var(--rf-emerald-50);
}
.rf-block-textarea--short { min-height: 56px; resize: none; }

/* Attachment zone */
.rf-attach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.rf-attach-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--rf-ink-200);
  border-radius: 7px;
  background: var(--rf-ink-50);
  font-size: 12px;
  font-family: var(--rf-font-ui);
}
.rf-attach-tile .rf-file-icon {
  width: 28px; height: 34px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700; letter-spacing: .03em;
  flex-shrink: 0;
}
.rf-file-icon--pdf  { background: #fee2e2; color: #991b1b; }
.rf-file-icon--xlsx { background: #dcfce7; color: #14532d; }
.rf-file-icon--xls  { background: #dcfce7; color: #14532d; }
.rf-file-icon--docx { background: #dbeafe; color: #1e3a8a; }
.rf-file-icon--doc  { background: #dbeafe; color: #1e3a8a; }
.rf-file-icon--pptx { background: #ffedd5; color: #9a3412; }
.rf-file-icon--ppt  { background: #ffedd5; color: #9a3412; }
.rf-file-icon--img  { background: #fef3c7; color: #78350f; }
.rf-attach-tile .rf-tile-meta { flex: 1; min-width: 0; }
.rf-attach-tile .rf-tile-name {
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--rf-ink-900);
}
.rf-attach-tile .rf-tile-size { color: var(--rf-ink-400); font-size: 10px; }
.rf-attach-remove {
  background: none; border: none; cursor: pointer;
  color: var(--rf-ink-400); padding: 2px; border-radius: 4px;
  flex-shrink: 0;
  line-height: 1;
}
.rf-attach-remove:hover { color: #dc2626; background: #fee2e2; }

.rf-drop-zone {
  border: 1.5px dashed var(--rf-ink-200);
  border-radius: var(--rf-radius);
  padding: 20px;
  text-align: center;
  background: var(--rf-ink-50);
  transition: border-color .15s, background .15s;
}
.rf-drop-zone.rf-drag-over {
  border-color: var(--rf-emerald-600);
  background: var(--rf-emerald-50);
}
.rf-drop-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-family: var(--rf-font-ui);
  color: var(--rf-ink-700);
  padding: 0; margin-bottom: 4px;
}
.rf-link { color: var(--rf-emerald-700); font-weight: 500; }
.rf-drop-hint { font-size: 11px; color: var(--rf-ink-400); font-family: var(--rf-font-ui); }

/* Bottom actions (legacy, kept for compatibility) */
.rf-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--rf-ink-200);
  margin-top: 8px;
}

/* ── New two-column request form layout ─────────────────────────── */

.rf-body {
  padding: 28px 32px 60px;
  background: #f9fafb;
  overflow-y: auto;
}

.rf-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.rf-page-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--rf-ink-900);
  margin: 0 0 3px;
  font-family: var(--rf-font-ui);
}
.rf-page-sub {
  font-size: 13px;
  color: var(--rf-ink-500);
  margin: 0;
  font-family: var(--rf-font-ui);
}
.rf-user-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.rf-user-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #064e3b;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  font-family: var(--rf-font-ui);
  flex-shrink: 0;
}
.rf-user-name { font-size: 13px; font-weight: 600; color: var(--rf-ink-900); font-family: var(--rf-font-ui); }
.rf-user-role { font-size: 11px; color: var(--rf-ink-500); font-family: var(--rf-font-ui); }

/* Pipeline strip */
.rf-pipeline {
  display: grid;
  background: #fff;
  border: 1px solid var(--rf-ink-200);
  border-radius: 10px;
  padding: 13px 16px;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  overflow-x: auto;
}
.rf-pipeline-step {
  display: flex; flex-direction: column; gap: 3px;
  position: relative;
  padding-right: 20px;
  min-width: 0;
}
.rf-pipeline-step:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 10px;
  width: 20px; height: 2px;
  background: var(--rf-ink-200);
}
.rf-pipeline-step--current:not(:last-child)::after { background: #10b981; }
.rf-pipeline-step__head { display: flex; align-items: center; gap: 7px; }
.rf-pipeline-step__circle {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--rf-ink-100); color: var(--rf-ink-500);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; font-family: var(--rf-font-ui);
  flex-shrink: 0;
}
.rf-pipeline-step--done .rf-pipeline-step__circle { background: #10b981; color: #fff; }
.rf-pipeline-step--current .rf-pipeline-step__circle {
  background: #fff; border: 2px solid #10b981; color: #065f46;
  box-shadow: 0 0 0 3px #d1fae5;
}
.rf-pipeline-step__label {
  font-size: 12px; font-weight: 600; color: var(--rf-ink-700);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--rf-font-ui);
}
.rf-pipeline-step__sub {
  font-size: 11px; color: var(--rf-ink-500);
  margin-left: 29px; white-space: nowrap;
  font-family: var(--rf-font-ui);
}

/* Two-column grid */
.rf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) { .rf-grid { grid-template-columns: 1fr; } }

/* Form card */
.rf-form-card {
  background: #fff;
  border: 1px solid var(--rf-ink-200);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  overflow: hidden;
}
.rf-form-card-head {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--rf-ink-200);
}
/* The title is the one field people miss — borderless, it reads as text that's
   already there rather than something to fill in. Give it the same box every
   other field has, just larger. */
.rf-card-title {
  width: 100%; resize: none; overflow: hidden;
  border: 1px solid var(--rf-ink-200); border-radius: var(--rf-radius);
  padding: 11px 13px; margin: 0 0 6px; background: #fff;
  font-size: 17px; font-weight: 600; line-height: 1.4;
  font-family: var(--rf-font-ui); color: var(--rf-ink-900);
  transition: border-color .15s, box-shadow .15s;
}
.rf-card-title:hover { border-color: var(--rf-ink-300); }
.rf-card-title:focus {
  outline: none;
  border-color: var(--rf-emerald-600);
  box-shadow: 0 0 0 3px var(--rf-emerald-50);
}
.rf-card-title::placeholder { color: var(--rf-ink-400); font-weight: 400; }
.rf-card-sub { font-size: 12px; color: var(--rf-ink-400); font-family: var(--rf-font-ui); }
.rf-form-fields { padding: 20px 24px; }
.rf-field { margin-bottom: 18px; }
.rf-field:last-child { margin-bottom: 0; }
.rf-field > label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--rf-ink-700); margin-bottom: 5px;
  letter-spacing: 0.01em; font-family: var(--rf-font-ui);
}
.rf-input-std, .rf-select-std {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--rf-ink-200); border-radius: 7px;
  font-size: 14px; font-family: var(--rf-font-ui);
  background: #fff; color: var(--rf-ink-900);
  transition: border-color .15s, box-shadow .15s;
}
.rf-select-std { cursor: pointer; }
.rf-input-std:focus, .rf-select-std:focus {
  outline: none; border-color: #10b981;
  box-shadow: 0 0 0 3px #d1fae5;
}
.rf-textarea-std {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--rf-ink-200); border-radius: 7px;
  font-size: 13px; font-family: var(--rf-font-ui);
  background: #fff; color: var(--rf-ink-900);
  resize: vertical; line-height: 1.55; min-height: 72px;
  transition: border-color .15s, box-shadow .15s;
}
.rf-textarea-std:focus {
  outline: none; border-color: #10b981;
  box-shadow: 0 0 0 3px #d1fae5;
}
.rf-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.rf-row-2 .rf-field { margin-bottom: 0; }
.rf-form-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--rf-ink-200);
  background: var(--rf-ink-50);
}

/* Sidebar */
.rf-side-card {
  background: #fff; border: 1px solid var(--rf-ink-200);
  border-radius: 10px; padding: 16px 18px; margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.rf-side-card:last-child { margin-bottom: 0; }
.rf-side-card h3 {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--rf-ink-500); margin: 0 0 12px;
  font-family: var(--rf-font-ui);
}
.rf-timeline { display: flex; flex-direction: column; gap: 14px; }
.rf-timeline-event { position: relative; padding-left: 20px; }
.rf-timeline-event::before {
  content: ''; position: absolute; left: 4px; top: 5px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--rf-ink-200);
}
.rf-timeline-event--done::before { background: #10b981; }
.rf-timeline-event:not(:last-child)::after {
  content: ''; position: absolute; left: 7px; top: 14px;
  width: 2px; bottom: -14px; background: var(--rf-ink-100);
}
.rf-te-title { font-size: 13px; font-weight: 500; color: var(--rf-ink-900); font-family: var(--rf-font-ui); }
.rf-te-meta { font-size: 11px; color: var(--rf-ink-500); margin-top: 1px; font-family: var(--rf-font-ui); }
.rf-mini-list { display: flex; flex-direction: column; gap: 8px; }
.rf-mini-card {
  padding: 9px 11px; border: 1px solid var(--rf-ink-100); border-radius: 8px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.rf-mini-card:hover { border-color: var(--rf-ink-200); background: var(--rf-ink-50); }
.rf-mini-card__head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px;
}
.rf-mini-badge { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; font-family: var(--rf-font-ui); }
.rf-mini-date { font-size: 11px; color: var(--rf-ink-400); font-family: var(--rf-font-ui); }
.rf-mini-title { font-size: 12px; font-weight: 500; color: var(--rf-ink-900); line-height: 1.35; margin-bottom: 2px; font-family: var(--rf-font-ui); }
.rf-mini-meta { font-size: 11px; color: var(--rf-ink-500); font-family: var(--rf-font-ui); }
.rf-tips-text { font-size: 12px; color: var(--rf-ink-500); margin: 0; line-height: 1.6; font-family: var(--rf-font-ui); }

/* AI Summary card */
.rf-ai-card { border-color: #d1fae5; background: #f0fdf4; }
.rf-ai-card h3 { color: #065f46; display: flex; align-items: center; gap: 5px; }
.rf-ai-summary-text { font-size: 13px; color: var(--rf-ink-800); line-height: 1.6; margin: 0; font-family: var(--rf-font-ui); }
.rf-ai-loading { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--rf-ink-400); font-family: var(--rf-font-ui); }
.rf-ai-loading::before {
  content: ''; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #a7f3d0; border-top-color: #065f46;
  animation: rf-spin .8s linear infinite; flex-shrink: 0;
}
@keyframes rf-spin { to { transform: rotate(360deg); } }

/* Review comments thread */
.rf-comments-thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.rf-comment { padding: 9px 11px; border-radius: 8px; background: var(--rf-ink-50); }
.rf-comment--mine { background: #f0fdf4; }
.rf-comment-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; gap: 8px; }
.rf-comment-author { font-size: 11px; font-weight: 700; color: var(--rf-ink-700); font-family: var(--rf-font-ui); }
.rf-comment-time { font-size: 10px; color: var(--rf-ink-400); font-family: var(--rf-font-ui); white-space: nowrap; }
.rf-comment-body { font-size: 13px; color: var(--rf-ink-800); line-height: 1.5; margin: 0; font-family: var(--rf-font-ui); white-space: pre-wrap; }
.rf-comment-empty { font-size: 12px; color: var(--rf-ink-400); font-family: var(--rf-font-ui); }
.rf-comment-composer { display: flex; flex-direction: column; gap: 7px; }
.rf-comment-input {
  width: 100%; border: 1px solid var(--rf-ink-200); border-radius: 7px;
  padding: 8px 10px; font-size: 13px; font-family: var(--rf-font-ui);
  color: var(--rf-ink-900); resize: none; outline: none;
  transition: border-color .15s; box-sizing: border-box;
}
.rf-comment-input:focus { border-color: #084734; }

/* Sidebar attachments */
.rf-sidebar-attach-list { display: flex; flex-direction: column; gap: 7px; }
.rf-sidebar-attach-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: 7px; border: 1px solid var(--rf-ink-100);
  text-decoration: none; color: var(--rf-ink-800); background: var(--rf-ink-50);
  transition: border-color .15s, background .15s;
}
.rf-sidebar-attach-item:hover { border-color: var(--rf-ink-200); background: #fff; }
.rf-sidebar-attach-name { font-size: 12px; font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--rf-font-ui); }
.rf-sidebar-attach-size { font-size: 11px; color: var(--rf-ink-400); white-space: nowrap; font-family: var(--rf-font-ui); }

/* Agenda preview accordion */
.rf-live-preview {
  margin-top: 20px; background: var(--rf-ink-50);
  border: 1px dashed var(--rf-ink-200); border-radius: 8px; overflow: hidden;
}
.rf-live-preview.open { background: #fff; border-style: solid; border-color: var(--rf-ink-200); }
.rf-live-preview__head {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 12px 16px; cursor: pointer;
  background: transparent; border: 0; text-align: left; color: inherit;
  font-family: var(--rf-font-ui);
}
.rf-live-preview__head:hover { background: rgba(0,0,0,0.02); }
.rf-live-preview__chev { color: var(--rf-ink-400); transition: transform .2s; flex-shrink: 0; }
.rf-live-preview.open .rf-live-preview__chev { transform: rotate(90deg); color: #065f46; }
.rf-live-preview__label { font-size: 12px; font-weight: 600; color: var(--rf-ink-700); font-family: var(--rf-font-ui); }
.rf-live-preview.open .rf-live-preview__label { color: #065f46; }
.rf-live-preview__hint { margin-left: auto; font-size: 11px; color: var(--rf-ink-400); font-family: var(--rf-font-ui); }
.rf-live-preview__body { display: none; padding: 4px 16px 16px; }
.rf-live-preview.open .rf-live-preview__body { display: block; }
.rf-preview-num { font-family: var(--rf-font-ui); font-size: 11px; color: #065f46; font-weight: 600; margin-bottom: 3px; }
.rf-preview-title { font-family: var(--rf-font-doc); font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.rf-preview-details { font-family: var(--rf-font-doc); font-size: 13px; color: var(--rf-ink-700); }

/* =====================================================================
   AGENDA REVIEW PAGE
   ===================================================================== */

/* Top bar */
.agr-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #084734;
    color: #fff;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.agr-topbar-title { font-size: 15px; font-weight: 600; }
.agr-topbar-meta { font-size: 12px; color: #cef17b; font-weight: 500; }
.agr-topbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Decision banner shown after reviewer acts */
.agr-decided-banner {
    background: #f0fdf4;
    border-bottom: 2px solid #16a34a;
    color: #15803d;
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.agr-decided-banner.changes { background: #fffbeb; border-color: #f59e0b; color: #92400e; }

/* Agenda content area */
.agr-body { max-width: 860px; margin: 0 auto; padding: 28px 20px 120px; }

/* Section header */
.agr-section-header {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #084734;
    padding: 10px 0 6px;
    border-bottom: 2px solid #084734;
    margin-bottom: 6px;
}

/* Item card */
.agr-item {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: border-color .15s;
}
.agr-item.flagged { border-color: #f59e0b; }
.agr-item-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    cursor: default;
}
.agr-item-num { font-size: 11px; font-weight: 700; color: #9ca3af; flex-shrink: 0; padding-top: 2px; min-width: 22px; }
.agr-item-text { flex: 1; min-width: 0; }
.agr-item-title { font-size: 14px; font-weight: 600; color: #111827; line-height: 1.4; }
.agr-item-dept { font-size: 11px; color: #6b7280; margin-top: 2px; }
.agr-item-details { font-size: 13px; color: #374151; margin-top: 6px; line-height: 1.5; }

/* Flag button */
.agr-flag-btn {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 6px;
    border: 1.5px solid #e5e7eb;
    background: #f9fafb;
    color: #d1d5db;
    font-size: 13px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.agr-flag-btn:hover { border-color: #f59e0b; color: #f59e0b; background: #fffbeb; }
.agr-flag-btn.active { border-color: #f59e0b; color: #f59e0b; background: #fffbeb; }

/* Item comment area (shown when flagged) */
.agr-item-comments {
    border-top: 1px solid #fde68a;
    background: #fffdf5;
    padding: 12px 14px 14px;
    display: none;
}
.agr-item.flagged .agr-item-comments { display: block; }

/* Comment thread */
.agr-comment { display: flex; gap: 8px; margin-bottom: 8px; }
.agr-comment-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #084734;
    color: #cef17b;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.agr-comment-avatar.admin { background: #e0e7ff; color: #3730a3; }
.agr-comment-bubble { background: #f3f4f6; border-radius: 0 8px 8px 8px; padding: 8px 10px; flex: 1; }
.agr-comment-author { font-size: 11px; font-weight: 700; color: #374151; margin-bottom: 2px; }
.agr-comment-body { font-size: 13px; color: #1f2937; line-height: 1.4; }
.agr-comment-time { font-size: 10px; color: #9ca3af; margin-top: 3px; }
.agr-comment-input-row { display: flex; gap: 8px; margin-top: 8px; }
.agr-comment-input-row textarea {
    flex: 1;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 12px;
    resize: none;
    font-family: inherit;
    outline: none;
    transition: border-color .15s;
}
.agr-comment-input-row textarea:focus { border-color: #f59e0b; }
.agr-comment-send-btn {
    padding: 0 12px;
    border-radius: 6px;
    background: #084734;
    color: #cef17b;
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s;
}
.agr-comment-send-btn:hover { background: #065f46; }

/* Overall comments section */
.agr-overall-comments {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 18px;
    margin-top: 24px;
}
.agr-overall-title { font-size: 13px; font-weight: 700; color: #374151; margin-bottom: 12px; }

/* Sticky action bar (reviewer) */
.agr-action-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    z-index: 90;
    box-shadow: 0 -2px 12px rgba(0,0,0,.08);
}
.agr-btn-changes {
    background: #fffbeb;
    border: 1.5px solid #f59e0b;
    color: #92400e;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.agr-btn-changes:hover { background: #fef3c7; }
.agr-btn-approve {
    background: #084734;
    border: 1.5px solid #084734;
    color: #cef17b;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.agr-btn-approve:hover { background: #065f46; }
.agr-btn-approve:disabled, .agr-btn-changes:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.agr-action-hint { font-size: 12px; color: #9ca3af; margin-right: auto; }

/* Request-changes note modal */
.agr-changes-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(2px);
}
.agr-changes-modal-box {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 440px;
    margin: 0 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
}

/* Flag badge on admin item cards */
.ag-review-flag-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
}
.ag-review-flag-badge:hover { background: #fef3c7; }

/* ============================================================
   REQUEST FORMS — the form badge, the picker, and custom fields
   rendered from a form definition. Reuses the rf-* tokens above.
   ============================================================ */

/* Which form this request is on. Replaces the old request-type dropdown —
   the form IS the type, so it's stated, not chosen again. */
.rf-form-badge {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 13px;
    background: var(--rf-emerald-50);
    border: 1px solid var(--rf-emerald-100);
    border-radius: var(--rf-radius);
}
.rf-form-badge .rf-fb-icon { font-size: 17px; line-height: 1; flex-shrink: 0; }
.rf-form-badge .rf-fb-name { font-size: 13.5px; font-weight: 600; color: var(--rf-emerald-800); }
.rf-form-badge .rf-fb-sub  { font-size: 11.5px; color: var(--rf-emerald-700); opacity: .8; margin-top: 1px; }
.rf-form-badge .rf-fb-change {
    margin-left: auto; flex-shrink: 0;
    background: none; border: none; cursor: pointer;
    font-size: 12px; font-weight: 600; color: var(--rf-emerald-700);
    font-family: var(--rf-font-ui);
    padding: 4px 8px; border-radius: 6px;
}
.rf-form-badge .rf-fb-change:hover { background: #fff; }

/* Internal-only marker on a field the public never sees */
.rf-internal-tag {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: #92400e; background: #fef3c7;
    padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle;
}
.rf-field-help { font-size: 11.5px; color: var(--rf-ink-400); margin-top: 4px; line-height: 1.45; }

/* Checkbox field */
.rf-check-row { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: normal; }
.rf-check-row input { width: 15px; height: 15px; accent-color: #084734; cursor: pointer; flex-shrink: 0; }

/* Line-items table — the repeating account / description / amount grid */
.rf-li-table { border: 1px solid var(--rf-ink-200); border-radius: var(--rf-radius); overflow: hidden; }
.rf-li-row {
    display: grid; grid-template-columns: 1.4fr 2fr 1fr 34px;
    border-bottom: 1px solid var(--rf-ink-200);
}
.rf-li-row:last-child { border-bottom: none; }
.rf-li-head {
    background: var(--rf-ink-50);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--rf-ink-500);
}
.rf-li-head > div { padding: 8px 11px; }
.rf-li-cell input {
    width: 100%; border: none; padding: 9px 11px;
    font-size: 13px; font-family: var(--rf-font-ui);
    background: transparent; border-right: 1px solid var(--rf-ink-100);
    color: #111827;
}
.rf-li-cell input:focus { outline: none; background: var(--rf-emerald-50); }
.rf-li-x {
    display: flex; align-items: center; justify-content: center;
    color: var(--rf-ink-400); cursor: pointer; background: none; border: none; font-size: 15px;
}
.rf-li-x:hover { color: #dc2626; }
.rf-li-total {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 12px; background: var(--rf-emerald-50);
    font-size: 13px; font-weight: 700; color: var(--rf-emerald-800);
}
.rf-li-add {
    background: none; border: none; cursor: pointer;
    font-size: 12px; font-weight: 600; color: var(--rf-emerald-700);
    font-family: var(--rf-font-ui);
    padding: 8px 2px; display: inline-flex; align-items: center; gap: 6px;
}
.rf-li-add:hover { text-decoration: underline; }

/* Form picker — the "what are you submitting?" step.
   This modal is appended to document.body, OUTSIDE .rf-page, so it cannot use
   the --rf-* tokens: they're scoped to the form and resolve to nothing here,
   which is what silently erased these cards' borders. Literal values only. */
.rf-picker-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .rf-picker-grid { grid-template-columns: 1fr 1fr; } }

.rf-picker-tile {
    display: flex; align-items: flex-start; gap: 12px; width: 100%;
    border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px;
    background: #fff; cursor: pointer; text-align: left; transition: .15s;
    font-family: system-ui, -apple-system, sans-serif;
}
.rf-picker-tile:hover {
    border-color: #084734; background: #f7fbf3;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
}
.rf-picker-tile .rf-pt-icon {
    width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
    background: #eef7e6; color: #2f6b1f;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.rf-picker-tile:hover .rf-pt-icon { background: #dff2c5; }
.rf-picker-tile .rf-pt-body { flex: 1; min-width: 0; }
.rf-picker-tile h4 {
    font-size: 14px; font-weight: 700; margin: 0 0 2px; color: #111827; line-height: 1.3;
}
.rf-picker-tile p {
    font-size: 12px; color: #6b7280; margin: 0; line-height: 1.45;
}
.rf-picker-tile .rf-pt-meta {
    font-size: 11px; color: #9ca3af; margin-top: 6px;
    display: flex; align-items: center; gap: 5px;
}
.rf-picker-tile .rf-pt-go {
    color: #d1d5db; flex-shrink: 0; font-size: 12px; margin-top: 11px;
}
.rf-picker-tile:hover .rf-pt-go { color: #084734; }

/* ============================================================
   PORTAL FILES — category chips and per-file category tags.
   A resident filtering to "Resolutions" is the whole point of
   the form name carrying the county's own terminology.
   ============================================================ */
.pm-file-chips {
    display: flex; flex-wrap: wrap; gap: 7px;
    padding: 11px 14px 3px;
}
.pm-file-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600;
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid #e5e7eb; background: #fff; color: #4b5563;
    cursor: pointer; transition: .12s; font-family: inherit;
}
.pm-file-chip:hover { border-color: #084734; color: #084734; }
.pm-file-chip span {
    font-size: 11px; font-weight: 700; color: #9ca3af;
    font-variant-numeric: tabular-nums;
}
.pm-file-chip.is-on { background: #084734; border-color: #084734; color: #fff; }
.pm-file-chip.is-on span { color: rgba(255, 255, 255, .7); }

/* The category a file is filed under, on the row itself */
.pm-file-cat {
    flex-shrink: 0; white-space: nowrap;
    font-size: 11px; font-weight: 600;
    padding: 3px 9px; border-radius: 999px;
    background: #f3f4f6; color: #6b7280;
}
@media (max-width: 640px) { .pm-file-cat { display: none; } }

/* ============================================================
   READY FOR AGENDA — a terse list that reads like the agenda it's
   about to become, plus the detail overlay behind each row.
   ============================================================ */
.rfa-list { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; background: #fff; }
.rfa-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-top: 1px solid #f3f4f6;
    cursor: pointer; transition: background .12s;
}
.rfa-row:first-child { border-top: none; }
.rfa-row:hover { background: #fffbeb; }
.rfa-row:focus-visible { outline: 2px solid #084734; outline-offset: -2px; }
.rfa-num {
    width: 22px; flex-shrink: 0; text-align: right;
    font-size: 12px; font-weight: 700; color: #d1d5db; font-variant-numeric: tabular-nums;
}
.rfa-title {
    font-size: 13.5px; color: #111827; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.rfa-meta {
    font-size: 11.5px; color: #9ca3af; flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rfa-clip { font-size: 11px; color: #9ca3af; flex-shrink: 0; display: inline-flex; gap: 3px; align-items: center; }
.rfa-place {
    flex-shrink: 0; margin-left: auto;
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
    padding: 4px 10px; border-radius: 6px;
    background: #084734; color: #fff; border: none; cursor: pointer; transition: background .12s;
}
.rfa-place:hover { background: #0a5a42; }
.rfa-row:not(:hover) .rfa-place { background: #fff; color: #084734; border: 1px solid #d1d5db; }

/* Detail overlay — slides in from the right */
.rfa-pv-scrim {
    position: fixed; inset: 0; z-index: 70;
    background: rgba(0,0,0,0); transition: background .2s;
}
.rfa-pv-scrim.is-open { background: rgba(0,0,0,.35); }
.rfa-pv-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(460px, 92vw); background: #fff;
    box-shadow: -8px 0 30px rgba(0,0,0,.14);
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.rfa-pv-scrim.is-open .rfa-pv-panel { transform: translateX(0); }
.rfa-pv-head {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 18px 20px 14px; border-bottom: 1px solid #e5e7eb;
}
.rfa-pv-kicker {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: #6b7280; margin-bottom: 3px;
}
.rfa-pv-title { font-size: 16px; font-weight: 700; color: #111827; margin: 0; line-height: 1.35; }
.rfa-pv-x {
    margin-left: auto; flex-shrink: 0; background: none; border: none; cursor: pointer;
    color: #9ca3af; width: 28px; height: 28px; border-radius: 6px;
}
.rfa-pv-x:hover { background: #f3f4f6; color: #374151; }
.rfa-pv-body { flex: 1; overflow-y: auto; padding: 4px 20px 20px; }
.rfa-pv-row { padding: 13px 0; border-bottom: 1px solid #f3f4f6; }
.rfa-pv-row:last-child { border-bottom: none; }
.rfa-pv-label {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: #9ca3af; margin-bottom: 4px;
}
.rfa-pv-value { font-size: 13.5px; color: #111827; line-height: 1.5; }
.rfa-pv-prose { white-space: pre-wrap; }
.rfa-pv-line {
    display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 8px;
    font-size: 12.5px; padding: 3px 0; border-bottom: 1px dotted #e5e7eb; color: #374151;
}
.rfa-pv-total { font-size: 12.5px; font-weight: 700; color: #084734; padding-top: 6px; text-align: right; }
.rfa-pv-file {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: #084734; text-decoration: none;
    border: 1px solid #e5e7eb; border-radius: 6px; padding: 5px 9px; margin: 0 6px 6px 0;
}
.rfa-pv-file:hover { border-color: #084734; background: #f7fbf3; }
.rfa-pv-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 20px; border-top: 1px solid #e5e7eb; background: #f9fafb;
}
.rfa-pv-cancel {
    font-size: 13px; padding: 8px 14px; border-radius: 8px;
    border: 1px solid #e5e7eb; background: #fff; color: #4b5563; cursor: pointer;
}
.rfa-pv-place {
    font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 8px;
    border: none; background: #084734; color: #fff; cursor: pointer;
}
.rfa-pv-place:hover { background: #0a5a42; }

/* ── Flat agenda builder: placement mode ─────────────────────────────────────
   Clicking means something different while placing, so the whole table has to
   read as "pick a spot" rather than "edit a row". */
.flat-placing-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; margin-bottom: 10px;
    background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 10px;
    font-size: 13px; color: #065f46;
}
.flat-placing-banner i { color: #059669; }
.flat-placing-banner span { flex: 1; min-width: 0; }
.flat-placing-banner strong { font-weight: 600; }
.flat-placing-banner button {
    flex-shrink: 0; padding: 4px 10px; border-radius: 6px;
    border: 1px solid #a7f3d0; background: #fff; color: #065f46;
    font-size: 12px; font-weight: 500;
}
.flat-placing-banner button:hover { border-color: #059669; }

/* A drop zone is a thin gap that opens up on hover — it should feel like the
   list parting to make room, not like another row. */
.flat-drop td { padding: 0 !important; }
.flat-drop-inner {
    display: flex; align-items: center; gap: 10px;
    padding: 3px 8px; margin: 1px 0;
    border-radius: 6px; cursor: pointer;
    opacity: .45; transition: opacity .12s, background .12s, padding .12s;
}
.flat-drop-inner:hover { opacity: 1; background: #ecfdf5; padding: 8px; }
.flat-drop-line { flex: 1; height: 2px; border-radius: 2px; background: #6ee7b7; }
.flat-drop-label { font-size: 12px; color: #065f46; white-space: nowrap; }
.flat-drop-label strong { font-weight: 700; }
.flat-drop-dots { display: inline-flex; align-items: center; gap: 4px; }

/* One dot per LEGAL level, indented to show the nesting it would produce, and
   labelled with the number the entry would actually take. */
.flat-drop-dot {
    min-width: 24px; height: 22px; padding: 0 6px;
    border-radius: 6px; border: 1px solid #d1d5db; background: #fff;
    font-size: 11px; font-weight: 600; color: #6b7280; line-height: 1;
}
.flat-drop-dot:hover { border-color: #059669; color: #065f46; background: #f0fdf4; }
.flat-drop-dot.is-default { border-color: #059669; background: #059669; color: #fff; }

/* ── Flat builder: per-line emphasis ─────────────────────────────────────────
   Quiet until the row is hovered, so a long agenda isn't a wall of buttons —
   but always visible when the line actually has emphasis set. */
.flat-fmt-group { display: inline-flex; align-items: center; gap: 1px; margin-right: 6px; }
.flat-fmt {
    width: 22px; height: 22px; border: 0; background: transparent;
    border-radius: 5px; color: #cbd5e1; font-size: 10.5px; cursor: pointer;
    opacity: 0; transition: opacity .12s, color .12s, background .12s;
}
.flat-row:hover .flat-fmt { opacity: 1; }
.flat-fmt:hover { color: #475569; background: #f1f5f9; }
.flat-fmt.is-on { opacity: 1; color: #0f172a; background: #e2e8f0; }
.flat-fmt.is-on:hover { background: #cbd5e1; }