and uses the section / form / meta / form-button classes below for consistency. Page-specific bits stay inline on each page. ========================================================= */ /* Dossier color tokens at :root so they're available to elements that render outside the .dossier-page wrapper (modals, toasts, ad-hoc overlays attached to ). Previously scoped to .dossier-page, which made buttons inside admin modals go transparent because var(--d-accent) wouldn't resolve. */ :root { --d-paper: #fbfaf6; --d-paper-edge: #d8d2bf; --d-navy: #2f3a4a; --d-navy-deep: #1e2530; --d-accent: #c0392b; --d-slate: #516079; --d-fg: #3a4250; --d-rule: rgba(47, 58, 74, 0.12); } .dossier-page { background: var(--d-paper); border: 1px solid var(--d-paper-edge); border-radius: 4px; overflow: hidden; box-shadow: 0 1px 0 rgba(30, 37, 48, 0.04); } /* tracking strip ─────────────────────────────────────── */ .dossier-strip { background: var(--d-navy-deep); color: rgba(255, 255, 255, 0.85); font-family: 'Courier New', Courier, monospace; font-size: 0.66rem; letter-spacing: 1.6px; padding: 8px 22px; display: flex; justify-content: space-between; } .dossier-strip__r { color: var(--d-paper-edge); } /* classification stripe ──────────────────────────────── */ .dossier-classification { background: var(--d-navy); color: rgba(255, 255, 255, 0.92); font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; padding: 9px 22px; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .dossier-classification .accent { color: var(--d-accent); } /* letterhead ─────────────────────────────────────────── */ .dossier-letterhead { text-align: center; padding: 28px 32px 22px; border-bottom: 1px solid var(--d-rule); } .dossier-letterhead__title { font-family: var(--font-display, Georgia), Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1.15; letter-spacing: -0.012em; color: var(--d-navy-deep); margin: 0 0 0.4rem; } .dossier-letterhead__sub { font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--d-slate); margin: 0; } /* status notice (state banners) ──────────────────────── */ .dossier-notice { margin: 18px 32px 0; padding: 18px 22px; background: #fff; border: 1px solid var(--d-paper-edge); border-left: 3px solid var(--d-slate); } .dossier-notice--pending { border-left-color: #b45309; background: #fffaeb; } .dossier-notice--verified { border-left-color: var(--d-accent); } .dossier-notice--rejected { border-left-color: var(--d-accent); background: #fef2f2; } .dossier-notice--info { border-left-color: var(--d-navy); } .dossier-notice--danger { border-left-color: var(--d-accent); background: #fef2f2; } .dossier-notice__head { font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; color: var(--d-slate); margin-bottom: 0.45rem; } .dossier-notice__head .accent { color: var(--d-accent); } .dossier-notice--pending .dossier-notice__head { color: #b45309; } .dossier-notice--pending .dossier-notice__head .accent { color: #b45309; } .dossier-notice__title { font-family: var(--font-display, Georgia), Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 1.18rem; letter-spacing: -0.005em; color: var(--d-navy-deep); margin: 0 0 0.45rem; line-height: 1.25; } .dossier-notice__body { font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.86rem; line-height: 1.55; color: var(--d-fg); margin: 0; } .dossier-notice__body a { color: var(--d-accent); text-decoration: underline; } .dossier-notice__reason { font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.85rem; color: var(--d-accent); margin: 0 0 0.4rem; } /* sections ───────────────────────────────────────────── */ .dossier-section { padding: 22px 32px; border-bottom: 1px solid var(--d-rule); } .dossier-section:last-child { border-bottom: none; } .dossier-section__title { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; font-family: var(--font-display, Georgia), Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 1.2rem; letter-spacing: -0.005em; color: var(--d-navy-deep); margin: 0 0 0.65rem; } .dossier-section__roman { font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; color: var(--d-accent); } .dossier-section__lead { font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.86rem; line-height: 1.6; color: var(--d-fg); margin: 0 0 0.85rem; } .dossier-section__head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.65rem; flex-wrap: wrap; } /* metadata table (key / value rows) ──────────────────── */ .dossier-meta-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--d-paper-edge); border-radius: 2px; overflow: hidden; } .dossier-meta-table tr + tr td { border-top: 1px solid var(--d-rule); } .dossier-meta-table__k { padding: 0.55rem 0.85rem; width: 30%; font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--d-slate); vertical-align: top; } .dossier-meta-table__v { padding: 0.55rem 0.85rem; font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.86rem; color: var(--d-navy-deep); } .dossier-meta-table__dim { color: #aab2bf; } /* form fields ────────────────────────────────────────── */ .dossier-form { margin-top: 0.4rem; } .d-field { margin-bottom: 0.85rem; } .d-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; margin-bottom: 0.85rem; } .d-form-row > .d-field { margin-bottom: 0; } .d-form-row--3 { grid-template-columns: 2fr 1fr 1fr; } .d-label { display: block; font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--d-slate); margin-bottom: 0.32rem; } .d-req { margin-left: 0.4rem; color: var(--d-accent); letter-spacing: 0.14em; font-size: 0.55rem; } .d-opt { margin-left: 0.4rem; color: var(--d-slate); font-style: italic; text-transform: none; letter-spacing: 0; font-weight: 400; } .d-input, .d-textarea { width: 100%; font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.94rem; color: var(--d-navy-deep); background: #fff; border: 1px solid var(--d-paper-edge); border-radius: 2px; padding: 0.6rem 0.7rem; line-height: 1.4; transition: border-color 0.15s; } .d-input:focus, .d-textarea:focus { outline: none; border-color: var(--d-navy); box-shadow: 0 0 0 2px rgba(47, 58, 74, 0.08); } .d-input:disabled { background: rgba(0, 0, 0, 0.025); color: var(--d-slate); cursor: not-allowed; } .d-textarea { resize: vertical; min-height: 70px; } /* buttons ────────────────────────────────────────────── */ .dossier-form__actions { padding: 22px 32px 28px; border-top: 1px solid var(--d-rule); background: rgba(47, 58, 74, 0.025); text-align: center; } .dossier-form__actions--inline { background: transparent; border-top: none; padding: 14px 0 0; text-align: left; display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; } .dossier-form__submit { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.85rem 1.6rem; background: var(--d-accent); color: #fff; border: none; border-radius: 1px; cursor: pointer; font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; transition: background 0.15s, transform 0.15s; } .dossier-form__submit:hover { background: #a23123; color: #fff; } .dossier-form__submit:active { transform: translateY(1px); } .dossier-form__submit:disabled { opacity: 0.6; cursor: not-allowed; } .dossier-form__submit--ghost { background: transparent; color: var(--d-navy-deep); border: 1.5px solid var(--d-navy-deep); } .dossier-form__submit--ghost:hover { background: var(--d-navy-deep); color: #fff; } .dossier-form__submit--danger { background: transparent; color: var(--d-accent); border: 1.5px solid var(--d-accent); } .dossier-form__submit--danger:hover { background: var(--d-accent); color: #fff; } .dossier-form__submit--small { padding: 0.55rem 1rem; font-size: 0.66rem; } .dossier-form__legal { margin: 0.85rem auto 0; max-width: 520px; font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.72rem; line-height: 1.55; color: var(--d-slate); } /* small inline edit / action button ──────────────────── */ .dossier-edit-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; background: transparent; border: 1.5px solid var(--d-navy-deep); border-radius: 1px; color: var(--d-navy-deep); cursor: pointer; transition: background 0.15s, color 0.15s; } .dossier-edit-btn:hover { background: var(--d-navy-deep); color: #fff; } .dossier-edit-btn svg { width: 13px; height: 13px; } /* errors ─────────────────────────────────────────────── */ .d-error { font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.78rem; color: var(--d-accent); margin-top: 0.4rem; min-height: 1em; } .d-error--top { margin-top: 0.85rem; } /* warning callout ────────────────────────────────────── */ .d-warn { display: flex; gap: 0.7rem; background: #fef9e7; border: 1px solid #f3d68b; border-left: 3px solid #b45309; padding: 0.85rem 1rem; border-radius: 2px; margin-bottom: 0.85rem; } .d-warn svg { width: 22px; height: 22px; color: #b45309; flex-shrink: 0; margin-top: 2px; } .d-warn > div { font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.82rem; line-height: 1.55; color: #5a3a06; } .d-warn strong { color: var(--d-navy-deep); } /* success line ───────────────────────────────────────── */ .d-success { font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.8rem; color: #0f7a3a; font-weight: 700; letter-spacing: 0.04em; } /* doc-list (uniform doc rendering) ───────────────────── */ .dossier-doc-list { list-style: none; padding: 0; margin: 0; } .dossier-doc-list__item { display: flex; justify-content: space-between; align-items: baseline; padding: 0.55rem 0; border-bottom: 1px dashed var(--d-rule); font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.86rem; color: var(--d-navy-deep); } .dossier-doc-list__item:last-child { border-bottom: none; } .dossier-doc-list__type { font-weight: 600; } .dossier-doc-list__date { font-family: 'Courier New', Courier, monospace; font-size: 0.74rem; color: var(--d-slate); } .dossier-doc-list__empty { padding: 0.5rem 0; font-style: italic; color: var(--d-slate); font-size: 0.84rem; } /* score block ────────────────────────────────────────── */ .dossier-score-block { background: #fff; border: 1px solid var(--d-paper-edge); padding: 1rem 1.25rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; } .dossier-score-block__num { font-family: var(--font-display, Georgia), Georgia, serif; font-size: 2.4rem; color: var(--d-navy-deep); font-weight: 400; letter-spacing: -0.02em; line-height: 1; } .dossier-score-block__divider { font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.9rem; color: var(--d-slate); letter-spacing: 0.06em; } .dossier-score-block__band { margin-left: auto; font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--d-slate); } /* receipt ────────────────────────────────────────────── */ .dossier-receipt { text-align: center; padding: 48px 32px; } .dossier-receipt__stamp { display: inline-block; border: 2px solid var(--d-accent); color: var(--d-accent); padding: 0.4rem 1.1rem; font-family: var(--font-body, Arial), Arial, sans-serif; font-weight: 700; letter-spacing: 0.34em; font-size: 0.7rem; text-transform: uppercase; transform: rotate(-3deg); margin-bottom: 1.4rem; opacity: 0.9; } .dossier-receipt__title { font-family: var(--font-display, Georgia), Georgia, serif; font-weight: 400; font-size: clamp(1.4rem, 3vw, 1.8rem); letter-spacing: -0.01em; color: var(--d-navy-deep); margin: 0 0 0.7rem; } .dossier-receipt__lede { font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.92rem; line-height: 1.6; color: var(--d-fg); max-width: 520px; margin: 0 auto 1rem; } .dossier-receipt__ref { font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--d-slate); } .dossier-receipt__refnum { font-family: 'Courier New', Courier, monospace; color: var(--d-navy-deep); letter-spacing: 0.08em; } .dossier-receipt__actions { margin-top: 1.4rem; } /* ───────────────────────────────────────────────────── ADMIN-SHARED EXTENSIONS Used across admin queue and table pages — kept here so every admin page has consistent table/stat/filter chrome. ───────────────────────────────────────────────────── */ /* ops-table — used on dashboard + every admin table page */ .ops-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--d-paper-edge); border-radius: 2px; } .ops-table { width: 100%; border-collapse: collapse; min-width: 720px; } .ops-table thead { background: rgba(47, 58, 74, 0.04); } .ops-table th { padding: 0.6rem 0.85rem; font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--d-slate); text-align: left; border-bottom: 1px solid var(--d-rule); white-space: nowrap; } .ops-table td { padding: 0.6rem 0.85rem; font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.84rem; color: var(--d-navy-deep); border-bottom: 1px solid var(--d-rule); vertical-align: middle; } .ops-table tr:last-child td { border-bottom: none; } .ops-table__when { font-family: 'Courier New', Courier, monospace; font-size: 0.74rem; color: var(--d-slate); letter-spacing: 0.04em; } .adm-table__sub { font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.72rem; color: var(--d-slate); margin-top: 2px; } /* ops-pill (status badges in admin tables) */ .ops-pill { display: inline-block; padding: 0.18rem 0.5rem; font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; border-radius: 1px; background: rgba(81, 96, 121, 0.12); color: var(--d-slate); white-space: nowrap; } .ops-pill--verified { background: var(--d-accent); color: #fff; } .ops-pill--active { background: #166534; color: #fff; } .ops-pill--pending { background: #b45309; color: #fff; } .ops-pill--rejected { background: var(--d-accent); color: #fff; } .ops-pill--suspended { background: #6b7280; color: #fff; } .ops-pill--info { background: var(--d-navy); color: #fff; } .ops-pill--neutral { background: rgba(81, 96, 121, 0.15); color: var(--d-slate); } /* ops-stat — single row stat cards */ .ops-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .ops-stat { background: #fff; border: 1px solid var(--d-paper-edge); border-left: 3px solid var(--d-slate); padding: 12px 14px; border-radius: 2px; } .ops-stat__label { font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--d-slate); margin-bottom: 0.35rem; } .ops-stat__num { font-family: var(--font-display, Georgia), Georgia, serif; font-size: 1.7rem; font-weight: 400; color: var(--d-navy-deep); letter-spacing: -0.02em; line-height: 1; margin-bottom: 0.3rem; } .ops-stat__sub { font-family: 'Courier New', Courier, monospace; font-size: 0.62rem; letter-spacing: 0.06em; color: var(--d-slate); text-transform: uppercase; } /* ops-empty — empty-state row for admin tables/lists */ .ops-empty { padding: 18px; text-align: center; font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.84rem; font-style: italic; color: var(--d-slate); background: #fff; border: 1px solid var(--d-paper-edge); border-radius: 2px; } /* Mechanic / account drilldown toolbar — shared between admin/mechanic and admin/account */ .mech-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; } .mech-toolbar__group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* Admin filter row (header bar inside section) */ .adm-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .adm-filter-label { font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--d-slate); } .adm-filter-select, .adm-filter-input { font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.84rem; color: var(--d-navy-deep); background: #fff; border: 1px solid var(--d-paper-edge); border-radius: 2px; padding: 0.45rem 0.6rem; } .adm-filter-select:focus, .adm-filter-input:focus { outline: none; border-color: var(--d-navy); box-shadow: 0 0 0 2px rgba(47, 58, 74, 0.08); } /* Trust score grade pill (admin tables) */ .ops-grade { display: inline-block; width: 36px; text-align: center; font-family: var(--font-display, Georgia), Georgia, serif; font-size: 0.95rem; padding: 0.18rem 0; border-radius: 1px; color: #fff; margin-right: 4px; } .ops-grade--a { background: #16a34a; } .ops-grade--b { background: #2563eb; } .ops-grade--c { background: #d97706; } .ops-grade--d { background: #ea580c; } .ops-grade--f { background: #dc2626; } .ops-grade-letter { font-family: var(--font-display, Georgia), Georgia, serif; color: var(--d-slate); font-size: 0.85rem; } /* Monospace ID chip */ .adm-mono-chip { display: inline-block; font-family: 'Courier New', Courier, monospace; font-size: 0.72rem; letter-spacing: 0.04em; background: rgba(47, 58, 74, 0.08); color: var(--d-navy-deep); border-radius: 1px; padding: 0.18rem 0.45rem; } /* Doc count chip */ .adm-doc-count { display: inline-block; min-width: 22px; text-align: center; font-family: 'Courier New', Courier, monospace; font-size: 0.78rem; font-weight: 700; background: rgba(47, 58, 74, 0.08); color: var(--d-navy-deep); border-radius: 1px; padding: 0.18rem 0.4rem; } /* Email-blast extras */ .eb-counter { font-family: 'Courier New', Courier, monospace; font-size: 0.7rem; color: var(--d-slate); text-align: right; margin-top: 4px; letter-spacing: 0.04em; } .eb-recipient-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 0.4rem; } .eb-recipient-count { font-family: var(--font-body), Arial, sans-serif; font-size: 0.85rem; color: var(--d-fg); } .eb-recipient-count strong { color: var(--d-navy-deep); } .eb-send-status { font-family: var(--font-body), Arial, sans-serif; font-size: 0.78rem; color: var(--d-fg); } .eb-history { font-family: var(--font-body), Arial, sans-serif; font-size: 0.84rem; } .eb-rules { list-style: none; padding: 0; margin: 0; } .eb-rules li { padding: 8px 0 8px 28px; border-bottom: 1px dashed var(--d-rule); font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.84rem; line-height: 1.55; color: var(--d-fg); position: relative; } .eb-rules li:last-child { border-bottom: none; } .eb-rules li::before { content: '◆'; position: absolute; left: 6px; top: 8px; color: var(--d-accent); font-size: 0.7rem; } .eb-rules strong { color: var(--d-navy-deep); } /* Pagination row */ .pg-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0 0; flex-wrap: wrap; } .pg-info { font-family: 'Courier New', Courier, monospace; font-size: 0.7rem; letter-spacing: 0.06em; color: var(--d-slate); text-transform: uppercase; } .pg-btns { display: flex; gap: 8px; } .pg-btn { font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; background: #fff; border: 1px solid var(--d-paper-edge); color: var(--d-navy-deep); border-radius: 1px; padding: 0.45rem 0.75rem; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .pg-btn:hover:not(:disabled) { border-color: var(--d-navy-deep); color: var(--d-accent); } .pg-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* ── Generic dossier modal (shared overlay for admin + portal) ── */ .dossier-modal { position: fixed; inset: 0; background: rgba(30, 37, 48, 0.66); display: flex; align-items: flex-start; justify-content: center; z-index: 9998; padding: 2rem 1rem; overflow-y: auto; -webkit-overflow-scrolling: touch; } .dossier-modal[hidden] { display: none !important; } .dossier-modal__card { background: #fbfaf6; border: 1px solid var(--d-paper-edge, #d8d2bf); border-radius: 4px; width: 100%; max-width: 520px; position: relative; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); padding: 24px 28px 26px; margin: auto; } .dossier-modal__close { position: absolute; top: 8px; right: 12px; background: transparent; border: none; font-size: 1.6rem; line-height: 1; color: var(--d-slate, #516079); cursor: pointer; } .dossier-modal__close:hover { color: var(--d-accent, #c0392b); } .dossier-modal__strip { font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--d-slate, #516079); margin-bottom: 0.7rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--d-rule, rgba(47,58,74,0.12)); } .dossier-modal__strip .accent { color: var(--d-accent, #c0392b); } .dossier-modal__title { font-family: var(--font-display, Georgia), Georgia, serif; font-weight: 400; font-size: 1.3rem; letter-spacing: -0.012em; color: var(--d-navy-deep, #1e2530); margin: 0 0 0.55rem; line-height: 1.2; } .dossier-modal__lede { font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.86rem; line-height: 1.55; color: var(--d-fg, #3a4250); margin: 0 0 1.1rem; } .dossier-modal__actions { display: flex; gap: 0.6rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 0.85rem; } .dossier-modal__success { text-align: center; padding-top: 8px; } /* ── Photo row + business-proof multi-row (shared between profile + admin) ── */ .dossier-photo-row { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: center; } .dossier-photo-row__preview { width: 220px; height: 140px; border: 1px solid var(--d-paper-edge); border-radius: 2px; background: #f3efe2 center/cover no-repeat; position: relative; } .dossier-photo-row__preview[data-empty="true"] { background-image: none; background: repeating-linear-gradient(135deg, #f6f1e0 0 6px, #efe9d4 6px 12px); } .dossier-photo-row__empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--d-slate); font-weight: 700; } .dossier-photo-row__preview:not([data-empty="true"]) .dossier-photo-row__empty { display: none; } .d-bp-row { background: #fff; border: 1px solid var(--d-paper-edge); border-radius: 2px; padding: 0.7rem 0.85rem; margin-bottom: 0.5rem; } .d-bp-row__head { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; } .d-bp-remove { background: transparent; border: none; font-size: 1.4rem; line-height: 1; color: var(--d-slate); cursor: pointer; padding: 0 0.4rem; } .d-bp-remove:hover { color: var(--d-accent); } .d-add-row { display: inline-flex; align-items: center; font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--d-navy); background: transparent; border: 1px dashed var(--d-paper-edge); border-radius: 1px; padding: 0.55rem 0.95rem; cursor: pointer; margin-top: 0.25rem; transition: border-color 0.15s, color 0.15s, background 0.15s; } .d-add-row:hover { border-color: var(--d-navy); color: var(--d-accent); background: rgba(192,57,43,0.04); } /* ════════════════════════════════════════════════════════════ §VIII / §IX — Verified Scammer Designation ════════════════════════════════════════════════════════════ */ /* Section title pill (Inactive / Active) ────────────── */ .scammer-section__tag { display: inline-flex; align-items: center; margin-left: auto; padding: 0.3rem 0.65rem; font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--d-slate); background: rgba(47,58,74,0.05); border: 1px solid rgba(47,58,74,0.2); border-radius: 1px; } .scammer-section__tag--active { color: #fff; background: var(--d-accent); border-color: var(--d-accent); box-shadow: 0 0 0 2px rgba(192,57,43,0.18); animation: scammer-pulse 2.4s ease-in-out infinite; } @keyframes scammer-pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(192,57,43,0.18); } 50% { box-shadow: 0 0 0 5px rgba(192,57,43,0.08); } } /* Legal warning callout (inactive state) ─────────────── */ .scammer-warn { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; background: #fef2f2; border: 1px solid rgba(192,57,43,0.4); border-left: 3px solid var(--d-accent); border-radius: 1px; padding: 14px 16px; margin: 0.5rem 0 1.1rem; font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.84rem; line-height: 1.55; color: #5a1f15; } .scammer-warn svg { width: 22px; height: 22px; color: var(--d-accent); margin-top: 2px; } .scammer-warn strong { color: #3d1410; font-weight: 700; } /* Active stamp box ─────────────────────────────────── */ .scammer-active-box { position: relative; background: #fef7f6; background-image: linear-gradient(rgba(192,57,43,0.025), rgba(192,57,43,0.025)), url("data:image/svg+xml;utf8,"); border: 2px solid var(--d-accent); border-radius: 2px; padding: 22px 26px 24px; margin: 4px 0 18px; box-shadow: inset 0 0 0 1px rgba(192,57,43,0.18), 0 6px 18px -8px rgba(192,57,43,0.32); } .scammer-active-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: repeating-linear-gradient(135deg, var(--d-accent) 0 12px, #8a2317 12px 24px); } .scammer-active-box__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; border-bottom: 1px solid rgba(192,57,43,0.28); padding-bottom: 10px; margin-bottom: 12px; } .scammer-active-box__stamp { display: inline-block; padding: 6px 14px; font-family: 'Courier New', Courier, monospace; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.18em; color: var(--d-accent); background: transparent; border: 2px solid var(--d-accent); border-radius: 2px; text-transform: uppercase; transform: rotate(-1.5deg); box-shadow: inset 0 0 0 1px rgba(192,57,43,0.5); } .scammer-active-box__when { font-family: 'Courier New', Courier, monospace; font-size: 0.7rem; letter-spacing: 0.06em; color: var(--d-slate); text-transform: uppercase; } .scammer-active-box__when span { color: var(--d-navy-deep); font-weight: 700; } .scammer-active-box__summary { font-family: var(--font-display, Georgia), Georgia, serif; font-size: 1.02rem; line-height: 1.55; color: var(--d-navy-deep); font-style: italic; margin: 0 0 14px; padding-left: 14px; border-left: 2px solid rgba(192,57,43,0.5); } .scammer-active-box__parent { display: flex; align-items: baseline; gap: 10px; background: rgba(192, 57, 43, 0.06); border: 1px solid rgba(192,57,43,0.3); border-left: 3px solid var(--d-accent); padding: 10px 14px; margin-bottom: 12px; border-radius: 2px; } .scammer-active-box__parent-label { font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--d-accent); } .scammer-active-box__parent-link { font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.92rem; font-weight: 700; color: var(--d-navy-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(192,57,43,0.5); } .scammer-active-box__parent-link:hover { color: var(--d-accent); text-decoration-color: var(--d-accent); } .scammer-active-box__photo { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; background: rgba(255,255,255,0.6); border: 1px solid rgba(192,57,43,0.22); padding: 10px 12px; margin-bottom: 4px; } .scammer-active-box__photo img { width: 96px; height: 96px; object-fit: cover; border: 1px solid var(--d-paper-edge); display: block; } .scammer-active-box__photo-caption { font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.7rem; color: var(--d-slate); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; } .scammer-active-box__evidence { background: #fff; border: 1px solid var(--d-paper-edge); border-radius: 2px; padding: 14px 16px; margin-top: 14px; } .scammer-active-box__evidence-head { font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--d-accent); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--d-rule); } /* Evidence list (active box display) ─────────────── */ .scammer-evidence-list { list-style: none; margin: 0; padding: 0; } .scammer-evidence-list > li { padding: 10px 0; border-bottom: 1px dotted var(--d-rule); } .scammer-evidence-list > li:last-child { border-bottom: none; } .scammer-evidence-list__kind { display: inline-block; margin-right: 10px; padding: 2px 8px; font-family: 'Courier New', Courier, monospace; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-navy-deep); background: #f3efe2; border: 1px solid var(--d-paper-edge); border-radius: 1px; } .scammer-evidence-list__citation { font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.84rem; color: var(--d-fg); word-break: break-all; } .scammer-evidence-list__citation a { color: var(--d-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .scammer-evidence-list__citation a:hover { color: #8a2317; } .scammer-evidence-list__notes { margin-top: 6px; padding-left: 12px; border-left: 2px solid var(--d-paper-edge); font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.78rem; font-style: italic; color: var(--d-slate); line-height: 1.5; } /* §IX. Designation Audit Log ──────────────────────── */ .scammer-log { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--d-rule); } .scammer-log__row { padding: 12px 0; border-bottom: 1px solid var(--d-rule); } .scammer-log__row-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 6px; } .scammer-log__action { display: inline-block; padding: 3px 9px; font-family: 'Courier New', Courier, monospace; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; border-radius: 1px; border: 1px solid; } .scammer-log__action--marked { color: #fff; background: var(--d-accent); border-color: var(--d-accent); } .scammer-log__action--unmarked { color: var(--d-navy-deep); background: #f3efe2; border-color: var(--d-paper-edge); } .scammer-log__action--neutral { color: var(--d-slate); background: rgba(47,58,74,0.04); border-color: rgba(47,58,74,0.2); } .scammer-log__when { font-family: 'Courier New', Courier, monospace; font-size: 0.7rem; letter-spacing: 0.06em; color: var(--d-slate); } .scammer-log__body { font-family: var(--font-body, Arial), Arial, sans-serif; font-size: 0.82rem; line-height: 1.55; color: var(--d-fg); margin-top: 4px; padding-left: 4px; } /* responsive ─────────────────────────────────────────── */ @media (max-width: 900px) { .ops-stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .dossier-strip { padding: 7px 16px; font-size: 0.6rem; letter-spacing: 1.2px; } .dossier-classification { padding: 8px 16px; font-size: 0.58rem; letter-spacing: 0.14em; } .dossier-letterhead { padding: 22px 18px 18px; } .dossier-section { padding: 18px; } .dossier-form__actions { padding: 18px; } .d-form-row, .d-form-row--3 { grid-template-columns: 1fr; } .dossier-notice { margin: 14px 18px 0; padding: 14px 16px; } .dossier-meta-table__k { width: 38%; padding: 0.5rem 0.65rem; font-size: 0.56rem; } .dossier-meta-table__v { padding: 0.5rem 0.65rem; font-size: 0.82rem; } .scammer-active-box { padding: 18px 18px 20px; } .scammer-active-box__photo { grid-template-columns: 72px 1fr; } .scammer-active-box__photo img { width: 72px; height: 72px; } .dossier-photo-row { grid-template-columns: 1fr; } .dossier-photo-row__preview { width: 100%; } .mech-toolbar { flex-direction: column; align-items: stretch; } .mech-toolbar__group { justify-content: stretch; } }