/* Official memo/letter face — Century Gothic embedded for hosts without the system font. */
@font-face {
    font-family: 'Century Gothic';
    src: url('/fonts/CenturyGothic.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Century Gothic';
    src: url('/fonts/CenturyGothic-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Century Gothic';
    src: url('/fonts/CenturyGothic-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Century Gothic';
    src: url('/fonts/CenturyGothic-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'CenturyGothic';
    src: url('/fonts/CenturyGothic.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'CenturyGothic';
    src: url('/fonts/CenturyGothic-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

    .memo-page-break {
        page-break-before: always;
        break-before: page;
        margin-top: 40px;
        border-top: 2px dashed #e5e7eb;
        padding-top: 40px;
    }
    .memo-appendix-page {
        min-height: 800px;
        background-color: white;
        position: relative;
        padding: 40px;
        box-sizing: border-box;
    }
    .memo-appendix-header-bar {
        display: flex;
        justify-content: flex-end;
        padding: 16px 0 10px 0;
        border-bottom: 2px solid #006633;
        margin-bottom: 24px;
    }
    .memo-appendix-label {
        font-weight: 800;
        font-size: 1.1rem;
        color: #006633;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }
    .memo-appendix-body {
        font-size: 13px;
        line-height: 1.7;
        color: #333;
    }
    @media print {
        @page {
            size: A4;
            margin: 18mm 14mm 16mm 14mm;
        }
        .ccr-watermarked-viewer__overlay {
            display: none !important;
        }
        .memo-container {
            box-shadow: none !important;
            min-height: auto !important;
            padding: 0 !important;
            max-width: none !important;
        }
        .memo-container--letter {
            padding: 0;
            font-size: 12pt;
            box-shadow: none;
        }
        .memo-header,
        .memo-meta,
        .letter-official-header,
        .letter-meta-container {
            break-after: avoid;
            page-break-after: avoid;
        }
        .memo-footer {
            break-inside: avoid;
            page-break-inside: avoid;
        }
        .memo-container--letter .memo-body--letter p:not([class*="ql-align-"]),
        .memo-container--letter .memo-body--letter div:not(.memo-subject-line):not(.letter-subject-line):not([class*="ql-align-"]),
        .memo-container--letter .memo-body--letter li:not([class*="ql-align-"]) {
            text-align: justify !important;
        }
        .memo-page-footer {
            display: none !important;
        }
        .memo-page-break {
            margin-top: 0;
            border-top: none;
            padding-top: 0;
            height: 0;
            page-break-before: always;
        }
        .memo-appendix-page {
            min-height: 100%;
        }
    }

    .memo-watermark-frame {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
    }

    .memo-container--letter {
        --nuprc-green: #006837;
        font-family: 'Century Gothic', CenturyGothic, AppleGothic, Arial, sans-serif;
        font-size: 13px;
        color: #000000;
        line-height: normal;
        padding: 48px 56px;
    }

    .memo-container {
        --nuprc-green: #1e5631;
        --memo-subject-size: 13px;
        background-color: white;
        padding: 40px;
        max-width: 800px;
        width: 100%;
        margin: 0 auto;
        color: #333;
        font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
        font-size: 13px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        min-height: 1000px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        overflow-x: hidden;
        position: relative;
    }

    .memo-approval-stamp-top {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 6;
        pointer-events: none;
    }

    .memo-approval-stamp-top .ccr-desk-approval-stamp {
        width: 200px;
        max-width: min(200px, 42vw);
        background: #ffffff;
        opacity: 1;
    }

    /* Logo centred; "Memorandum" left-aligned beneath (sample). */
    .memo-header {
        text-align: center;
        margin-bottom: 28px;
    }

    /* Official letterhead — exact NUPRC banner image (no HTML recreation). */
    .letter-official-header {
        margin: 0 0 8px 0;
        width: 100%;
        display: block;
        line-height: 0;
    }

    .memo-container--letter .letter-official-header {
        margin-bottom: 8px;
    }

    .letter-letterhead-img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
        object-position: left top;
    }

    .memo-official-header {
        margin-bottom: 18px;
    }

    .memo-document-type-title {
        color: #004b23;
        font-size: 28px;
        font-weight: 800;
        text-align: center;
        margin: 0 0 32px 0;
        font-family: Arial, Helvetica, sans-serif;
        letter-spacing: 0.5px;
    }

    .letter-meta-container {
        margin-top: 36px;
        margin-bottom: 16px;
        font-family: 'Century Gothic', CenturyGothic, AppleGothic, Arial, sans-serif;
        font-size: 13px;
        color: #000000;
        line-height: 1.35;
        text-align: left;
    }

    .letter-meta-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 16px;
        font-weight: 400;
        gap: 12px;
    }

    .letter-ref {
        display: inline-flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 0.35em; /* standard space after "Ref:" before the number */
        font-size: 16px;
        line-height: 1.3;
        max-width: 70%;
        color: #000;
    }

    .letter-date {
        display: inline-flex;
        align-items: baseline;
        gap: 0.35em; /* match Ref: spacing — "Date: 24 Jul 2026" */
        font-size: 16px;
        color: #000;
        white-space: nowrap;
    }

    .letter-ref > span:first-child,
    .letter-date > span:first-child {
        font-weight: 700;
    }

    .letter-ref > span:not(:first-child) {
        font-size: 16px;
        font-weight: 400;
    }

    .letter-ref-pending {
        font-style: italic;
        color: #6b7280;
        font-size: 8.5pt;
        font-weight: normal;
        white-space: nowrap;
    }

    .letter-recipient-block {
        margin-bottom: 22px;
        font-weight: normal;
        text-transform: none;
        line-height: 1.5;
        font-size: 16px;
    }

    .letter-recipient-company {
        font-weight: 700;
    }

    .letter-salutation {
        margin-bottom: 18px;
        font-weight: normal;
        font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
        font-size: 16px;
    }

    .letter-subject-line {
        text-transform: none;
        font-weight: 700;
        text-decoration: underline;
        text-align: left;
        letter-spacing: 0;
        font-size: var(--memo-subject-size, 13px);
        font-family: 'Century Gothic', CenturyGothic, AppleGothic, Arial, sans-serif;
        margin-bottom: 14px;
    }

    .memo-container--letter .memo-body--letter {
        font-family: 'Century Gothic', CenturyGothic, AppleGothic, Arial, Helvetica, sans-serif !important;
        font-size: 16px;
        line-height: normal;
        color: #000000;
        text-align: justify;
    }

    .memo-container--letter .memo-body--letter p:not([class*="ql-align-"]),
    .memo-container--letter .memo-body--letter div:not(.memo-subject-line):not(.letter-subject-line):not([class*="ql-align-"]),
    .memo-container--letter .memo-body--letter li:not([class*="ql-align-"]),
    .memo-container--letter .memo-body--letter td,
    .memo-container--letter .memo-body--letter th,
    .memo-container--letter .memo-body--letter span {
        text-align: justify !important;
        font-family: 'Century Gothic', CenturyGothic, AppleGothic, Arial, Helvetica, sans-serif !important;
        /* Default size on container; editor toolbar font-size inline styles still win (no !important here). */
        line-height: normal;
        color: #000000;
    }

    .memo-container--letter .memo-body .memo-subject-line,
    .memo-container--letter .memo-body .letter-subject-line {
        text-align: left !important;
    }

    .letter-closing-signatures {
        text-align: left;
        margin-top: 20px;
        font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
        font-size: 13px;
        color: #000000;
        line-height: normal;
    }

    .letter-closing {
        margin-bottom: 6px;
        font-weight: 400;
        font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
        font-size: 16px;
    }

    /* Draft preview: small ink reserve only — do not leave a large gap under the closing. */
    .letter-sign-ink-slot {
        height: 28px;
        margin: 0;
        padding: 0;
    }

    .letter-closing-signatures .memo-signature-img-container {
        text-align: left;
        margin-left: 0;
        margin-bottom: 8px;
    }

    .letter-signature-name {
        font-weight: 700;
        font-size: 12pt;
        margin-top: 4px;
        font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
    }

    .letter-signature-for {
        margin-top: 2px;
        font-weight: normal;
        font-size: 16px;
        font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
    }

    .memo-logo {
        display: block;
        height: auto;
        width: auto;
        max-height: 145px;
        max-width: 145px;
        margin: 0 auto 18px auto;
        object-fit: contain;
    }

    .memo-title {
        color: var(--nuprc-green, #1e5631);
        font-size: 40px;
        font-weight: 800;
        text-align: left;
        margin: 0 0 18px 0;
        line-height: 1.15;
        font-family: Arial, Helvetica, sans-serif;
    }

    .memo-meta {
        --memo-meta-left: 40%;
        margin-bottom: 24px;
    }

    /* Sample: To|Ref row 1; From / Date left column; dotted underline under each value. */
    .memo-meta-row {
        display: flex;
        justify-content: flex-start;
        align-items: baseline;
        gap: 32px;
        margin-bottom: 8px;
        border-bottom: none;
        padding-bottom: 0;
    }

    .memo-meta-item {
        display: flex;
        align-items: baseline;
        min-width: 0;
    }

    .memo-meta-row > .memo-meta-item:first-child,
    .memo-meta-item--full {
        flex: 0 0 var(--memo-meta-left);
        max-width: var(--memo-meta-left);
        width: var(--memo-meta-left);
        justify-content: flex-start;
        text-align: left;
    }

    .memo-meta-row:has(> .memo-meta-item:nth-child(2)) > .memo-meta-item:last-child:not(.memo-meta-item--full) {
        flex: 1 1 auto;
        max-width: none;
        width: auto;
        justify-content: flex-start;
        text-align: left;
    }

    /* To / From / Ref / Date — bold forest green, Century Gothic 16px. */
    .memo-label {
        font-weight: 700;
        color: var(--nuprc-green, #1e5631);
        min-width: 56px;
        font-size: 16px;
        font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
        flex-shrink: 0;
        line-height: 1.2;
    }

    /* Values (To / From / Ref / Date) — same size/family as labels, black regular. */
    .memo-value {
        flex: 1 1 auto;
        min-width: 2em;
        font-size: 16px;
        padding: 0 0 1px 8px;
        color: #000;
        font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
        font-weight: 400;
        line-height: 1.2;
        border-bottom: 1px dotted #333;
    }

    .memo-meta-row:has(> .memo-meta-item:nth-child(2)) > .memo-meta-item:last-child:not(.memo-meta-item--full) .memo-label {
        min-width: auto;
    }

    .memo-role-label {
        font-size: 11px;
        font-style: italic;
        color: #006633;
        font-weight: 600;
        padding-left: 0;
        margin-top: 1px;
        display: block;
    }

    .memo-subject-line {
        display: block;
        font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
        font-size: var(--memo-subject-size, 13px);
        font-weight: bold;
        text-decoration: underline;
        margin-bottom: 1.25rem;
        line-height: 1.35;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        hyphens: auto;
        text-align: left;
    }

    .memo-subject-line--left { text-align: left; }
    .memo-subject-line--center { text-align: center; }
    .memo-subject-line--right { text-align: right; }
    .memo-subject-line--underline { text-decoration: underline; }
    .memo-subject-line--plain { text-decoration: none; }

    /* Beat .memo-body justify !important for subject alignment */
    .memo-body .memo-subject-line.memo-subject-line--left { text-align: left !important; }
    .memo-body .memo-subject-line.memo-subject-line--center { text-align: center !important; }
    .memo-body .memo-subject-line.memo-subject-line--right { text-align: right !important; }
    .memo-body .memo-subject-line.memo-subject-line--underline { text-decoration: underline; }
    .memo-body .memo-subject-line.memo-subject-line--plain { text-decoration: none; }

    /* Body default: Century Gothic 16px. Force family so pasted Times/Calibri cannot win. */
    .memo-body {
        /* Do not flex-grow — that pinned the closing/signature to the bottom of min-height:1000px
           and left a huge empty cavern under an empty/short body. */
        flex-grow: 0;
        font-family: 'Century Gothic', CenturyGothic, AppleGothic, Arial, Helvetica, sans-serif !important;
        font-size: 16px;
        line-height: normal;
        text-align: justify;
        white-space: normal;
        margin-bottom: 24px;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
        overflow-wrap: break-word;
        word-wrap: break-word;
        box-sizing: border-box;
    }

    .memo-body p,
    .memo-body div:not(.memo-subject-line):not(.letter-subject-line),
    .memo-body li,
    .memo-body td,
    .memo-body th,
    .memo-body span {
        font-family: 'Century Gothic', CenturyGothic, AppleGothic, Arial, Helvetica, sans-serif !important;
        line-height: normal;
        text-align: justify;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Real blank line only when the author presses Enter twice (empty paragraph). */
    .memo-body p.ccr-blank {
        height: 1em;
        margin: 0 !important;
    }

    .memo-body .memo-subject-line,
    .memo-body .letter-subject-line {
        font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
        text-align: left !important;
        margin-bottom: 1.25rem !important;
    }

    .memo-body .ql-font-century-gothic,
    .memo-body [class*="ql-font-century"] {
        font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
    }

    .memo-body table {
        border-collapse: collapse;
        width: 100%;
        margin: 0.5em 0;
    }

    .memo-body table td,
    .memo-body table th {
        border: 1px solid #444;
        padding: 6px 10px;
        vertical-align: top;
    }

    .memo-footer {
        margin-top: auto;
    }

    .memo-footer-layout {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px 20px;
        width: 100%;
    }

    .memo-footer-signatures {
        flex: 1 1 260px;
        min-width: 0;
        max-width: 100%;
    }

    .memo-signatures-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-end;
        gap: 12px 16px;
        width: 100%;
        margin-top: 28px;
    }

    .memo-signature-cell {
        flex: 1 1 140px;
        min-width: 120px;
        max-width: 100%;
        text-align: center;
    }

    .memo-signature-name-compact {
        font-size: 13px;
        margin-top: 4px;
    }

    .memo-signature-title-compact {
        font-size: 12px;
    }

    .ds-container-mini-compact {
        max-width: none;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .memo-signature-name {
        font-weight: bold;
        font-size: 18px;
        margin-top: 5px;
    }

    .memo-signature-title {
        font-size: 15px;
        color: #555;
        font-style: italic;
    }

    .memo-signature-img-container {
        margin-bottom: 5px;
    }

    .memo-signature-img {
        max-height: 80px;
        max-width: 200px;
    }

    /* Miniature Digital Signature Block Styles */
    .ds-container-mini {
        border: 2px solid #333;
        padding: 8px 12px;
        width: 100%;
        max-width: 380px;
        background: #fff;
        margin-bottom: 10px;
        line-height: 1.2;
    }
    .ds-header-mini {
        font-weight: bold;
        font-size: 10px;
        margin-bottom: 4px;
        text-transform: uppercase;
        color: #000;
        border-bottom: 1px solid #333;
        padding-bottom: 2px;
    }
    .ds-row-mini {
        font-size: 10px;
        margin-bottom: 1px;
        font-family: 'Courier New', Courier, monospace;
    }
    .ds-val-mini {
        font-weight: 600;
        color: #444;
    }

    /* Dark Mode Overrides for MemoTemplate */
    html.dark-theme .memo-container,
    html.dark-theme .memo-appendix-page {
        background-color: var(--mud-palette-surface) !important;
        color: var(--mud-palette-text-primary) !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
    }
    html.dark-theme .memo-meta-row {
        border-bottom: none !important;
    }
    /* Keep official green on the white memo face even in dark UI. */
    html.dark-theme .memo-label {
        color: #1e5631 !important;
    }
    html.dark-theme .memo-title {
        color: #1e5631 !important;
    }
    html.dark-theme .memo-value {
        color: #000 !important;
        border-bottom-color: #333 !important;
    }
    html.dark-theme .memo-role-label {
        color: var(--mud-palette-primary) !important;
    }
    html.dark-theme .memo-body {
        color: var(--mud-palette-text-primary) !important;
    }
    html.dark-theme .memo-body p,
    html.dark-theme .memo-body div:not(.memo-subject-line),
    html.dark-theme .memo-body li {
        color: var(--mud-palette-text-primary) !important;
    }
    html.dark-theme .memo-body table td,
    html.dark-theme .memo-body table th {
        border-color: var(--mud-palette-lines-default) !important;
    }
    html.dark-theme .ds-container-mini {
        background-color: var(--mud-palette-background) !important;
        border-color: var(--mud-palette-lines-default) !important;
    }
    html.dark-theme .ds-header-mini {
        color: var(--mud-palette-primary) !important;
        border-bottom-color: var(--mud-palette-lines-default) !important;
    }
    html.dark-theme .ds-val-mini {
        color: var(--mud-palette-text-secondary) !important;
    }
    html.dark-theme .ds-row-mini {
        color: var(--mud-palette-text-primary) !important;
    }
    html.dark-theme .memo-appendix-header-bar {
        border-bottom-color: var(--mud-palette-primary) !important;
    }
    html.dark-theme .memo-appendix-label {
        color: var(--mud-palette-primary) !important;
    }
    html.dark-theme .memo-appendix-body {
        color: var(--mud-palette-text-primary) !important;
    }

/* V3: Word pastes hanging indents as negative text-indent, clipping first characters
   at the page edge — neutralised for preview and PDF alike. */
.memo-body p, .memo-body li, .memo-body div { text-indent: 0 !important; }