/* Approved Option 02: Structured rows. Scoped to the email application, never the login. */
#app { --mf-green:#6db33f; --mf-ink:#303731; --mf-grey:#58595b; --mf-line:#e1e6df; --mf-muted:#697168; --mf-deep:#346322; background:#fff; color:var(--mf-ink); font-family:"Segoe UI",Arial,sans-serif; font-size:14px; }
#app .mf-home-header { background:#fff; border-bottom:1px solid var(--mf-line); box-shadow:none; }
#app .mf-home-width { width:100%; max-width:1240px; margin:0 auto; padding-left:22px; padding-right:22px; }
#app .mf-home-topline { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:16px 0; }
#app .mf-home-brand { display:flex; align-items:center; gap:18px; min-width:0; }
#app .mf-home-brand img { width:88px; height:auto; flex-shrink:0; }
#app .mf-home-product { border-left:1px solid var(--mf-line); padding-left:18px; min-width:0; }
#app .mf-home-product h1 { color:var(--mf-grey); font-size:19px; font-weight:500; line-height:1.3; }
#app .mf-home-product p { margin-top:5px; color:var(--mf-muted); font-size:12px; }
#app .mf-home-session { display:flex; gap:26px; align-items:center; flex-shrink:0; }
#app .mf-session-label { font-size:11px; color:var(--mf-muted); margin-bottom:4px; }
#app .mf-home-session #api-status,#app .mf-home-session #user-display { font-size:12px; font-weight:500; }
#app .mf-home-nav { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:10px 0; border-top:1px solid var(--mf-line); }
#app .mf-nav-group { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
#app .mf-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid #d9e0d5; background:#fff; color:#505b49; border-radius:6px; padding:8px 12px; min-height:38px; font-size:13px; font-weight:500; cursor:pointer; text-decoration:none; line-height:1.4; }
#app .mf-button:hover { border-color:#93b880; color:#315d20; background:#f9fbf7; }
#app .mf-button:disabled { cursor:wait; opacity:.6; }
#app .mf-button.mf-quiet { border-color:transparent; }
#app .mf-button.mf-primary { color:#173c0a; background:var(--mf-green); border-color:var(--mf-green); }
#app .mf-button.mf-primary:hover { background:#79bb4f; border-color:#79bb4f; }
#app .mf-button.mf-outline { color:var(--mf-deep); border-color:#adc99b; background:#fff!important; }
#app #complaints-btn.hidden,#app #admin-btn.hidden { display:none; }
#app .mf-count { display:inline-block; border:1px solid #d4dfca; border-radius:4px; padding:0 5px; min-width:22px; text-align:center; font-size:11px; color:#557544; font-variant-numeric:tabular-nums; }
#app .mf-main { padding-top:20px; padding-bottom:28px; }
#app .mf-summary-scope { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 18px; margin-bottom:10px; font-size:12px; color:var(--mf-muted); }
#app .mf-summary-scope .mf-summary-meta { display:flex; flex-wrap:wrap; gap:6px 18px; }
#app #stats-cards { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0; border:1px solid var(--mf-line); border-radius:8px; background:#fff; overflow:hidden; margin-bottom:20px; }
#app #stats-cards.hidden { display:none; }
#app #stats-cards .stat-card { padding:13px 14px; border:0; border-right:1px solid var(--mf-line); border-radius:0; box-shadow:none; text-align:left; min-width:0; background:#fff; color:var(--mf-ink); transition:background .15s; }
#app #stats-cards .stat-card:last-child { border-right:0; }
#app #stats-cards button.stat-card:hover,#app #stats-cards button.stat-card.active { background:#f5f9f1; }
#app #stats-cards .stat-card:hover { transform:none; }
#app #stats-cards .stat-card h3 { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:400; color:var(--mf-muted); }
#app #stats-cards .stat-card h3 i { color:#658454; }
#app #stats-cards .stat-card p { font-size:24px; line-height:1.25; font-weight:500; color:#3d4b35; font-variant-numeric:tabular-nums; margin-top:7px; }
#app .mf-email-tabs { display:flex; align-items:center; gap:26px; border-bottom:1px solid var(--mf-line); margin-bottom:16px; }
#app .mf-email-tabs .tab-btn { display:inline-flex; align-items:center; gap:8px; padding:0 0 12px; border:0; border-bottom:3px solid transparent; margin-bottom:-1px; background:#fff; font-size:14px; font-weight:500; color:#687161; }
#app .mf-email-tabs .tab-btn.active { color:var(--mf-deep); border-bottom-color:var(--mf-green); }
#app .mf-scopebar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:13px; }
#app .mf-mailbox-label { display:flex; align-items:center; gap:8px; font-size:12px; color:#596651; }
#app .mf-scopebar #primary-mailbox { flex:1 1 195px; max-width:none; width:auto; }
#app .mf-show-all { display:flex; align-items:center; gap:9px; margin-left:auto; font-size:12px; color:#55614e; cursor:pointer; }
#app .mf-show-all input { width:16px; height:16px; accent-color:#5c9b36; }
#app .mf-filter-grid { display:grid; grid-template-columns:minmax(150px,1.5fr) minmax(115px,1fr) minmax(115px,1fr) auto minmax(138px,1.1fr) minmax(135px,1fr); gap:9px; align-items:end; margin-bottom:17px; }
#app .mf-field { display:flex; flex-direction:column; gap:5px; min-width:0; color:var(--mf-muted); font-size:12px; }
#app .mf-input,#app .mf-select { min-height:38px; width:100%; min-width:0; max-width:100%; padding:8px 9px; border:1px solid #d9e0d5; border-radius:6px; background:#fff; color:#414e3a; font-size:13px; line-height:1.4; }
#app .mf-input::placeholder { color:#899181; opacity:1; }
#app .mf-search { position:relative; display:block; }
#app .mf-search > i { position:absolute; left:11px; top:12px; color:#7a8870; pointer-events:none; }
#app .mf-search input { padding-left:33px; }
#app .mf-results { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:11px; color:#6b7465; font-size:12px; }
#app .mf-result-count { color:#4c5a43; }
#app .mf-load-notice { padding:11px 13px; margin-bottom:14px; border:1px solid #e4d9bd; border-left:3px solid #b58a33; border-radius:5px; font-size:13px; color:#77591d; background:#fffdf7; }
#app .mf-load-notice[data-state="error"] { border-color:#d9a59e; color:#9e3f36; background:#fff9f8; }
#app #emails-container { display:grid; grid-template-columns:minmax(0,1fr); gap:0; border:1px solid var(--mf-line); border-radius:8px; overflow:hidden; }
#app #emails-container:empty { border:0; }
#app .mf-email-card { border:0; border-bottom:1px solid var(--mf-line); border-radius:0; background:#fff; min-width:0; }
#app .mf-email-card:last-child { border-bottom:0; }
#app .mf-email-card.sent-email { border-left:0!important; background:#fff!important; }
#app .mf-email-card.email-processed { opacity:1; }
#app .mf-email-content { display:grid; grid-template-columns:minmax(0,1fr) 224px; grid-template-areas:"message handling" "member handling"; column-gap:22px; row-gap:12px; padding:18px 20px; }
#app .mf-message { grid-area:message; min-width:0; }
#app .mf-email-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; flex-wrap:wrap; }
#app .mf-tags { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; }
#app .mf-tag { display:inline-flex; align-items:center; gap:5px; padding:2px 7px; border:1px solid #d7e2cf; border-radius:4px; font-size:11px; color:#557840; }
#app .mf-tag.mf-flag { border-color:#ecd9b8; color:#91610e; }
#app .mf-tag.mf-urgent,#app .mf-tag.mf-error-tag { border-color:#e9c8c2; color:#a3473a; }
#app .mf-mailbox-badge { --box-fill:#f7f8f6; --box-border:#dce2d8; --box-text:#65725c; --box-dot:#85917c; display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:5px; border:1px solid var(--box-border); color:var(--box-text); background:var(--box-fill); font-size:12px; max-width:100%; overflow-wrap:anywhere; }
#app .mf-mailbox-dot { display:inline-block; width:7px; height:7px; border-radius:50%; flex-shrink:0; background:var(--box-dot,#85917c); }
#app .mf-mailbox-green { --box-fill:#f5f9f1; --box-border:#d6e3cd; --box-text:#486c39; --box-dot:#7a9e67; }
#app .mf-mailbox-blue { --box-fill:#f4f7fb; --box-border:#d5dfea; --box-text:#4f6781; --box-dot:#7a97b3; }
#app .mf-mailbox-purple { --box-fill:#f8f5fa; --box-border:#e3dae9; --box-text:#755f82; --box-dot:#a18aad; }
#app .mf-mailbox-sand { --box-fill:#faf7ef; --box-border:#e9dfc8; --box-text:#7c693f; --box-dot:#ac976d; }
#app .mf-mailbox-teal { --box-fill:#f0f8f6; --box-border:#cee4dd; --box-text:#426e63; --box-dot:#79a89a; }
#app .mf-mailbox-rose { --box-fill:#faf4f5; --box-border:#e8d5db; --box-text:#855c68; --box-dot:#b18b97; }
#app .mf-sentiment { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:12px; color:#697364; }
#app .mf-sentiment-face { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:#f0f3ef; color:#6c7c66; font-size:18px; }
#app .mf-sentiment-positive { color:#4e703f; }
#app .mf-sentiment-positive .mf-sentiment-face { background:#eef6e8; color:#638d4f; }
#app .mf-sentiment-negative { color:#8f5947; }
#app .mf-sentiment-negative .mf-sentiment-face { background:#faf0eb; color:#a86f5b; }
#app .mf-sentiment-unavailable { color:#727772; }
#app .mf-subject { margin:9px 0 7px; font-size:16px; font-weight:500; line-height:1.45; letter-spacing:-.01em; color:#33412c; overflow-wrap:anywhere; }
#app .mf-subject button { text-align:left; font:inherit; color:inherit; overflow-wrap:anywhere; }
#app .mf-metadata { display:flex; flex-wrap:wrap; gap:7px 15px; font-size:12px; color:#77816f; margin-bottom:11px; }
#app .mf-metadata > span { display:flex; align-items:baseline; gap:6px; min-width:0; overflow-wrap:anywhere; }
#app .mf-metadata i { flex-shrink:0; }
#app .mf-preview { font-size:13px; line-height:1.75; color:#606b58; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
#app .mf-member { grid-area:member; display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px 20px; min-width:0; margin:0; padding-top:10px; border-top:1px solid var(--mf-line); }
#app .mf-member-row { display:flex; flex:0 1 auto; flex-wrap:wrap; align-items:baseline; gap:4px 7px; min-width:0; max-width:100%; margin:0; font-size:12px; }
#app .mf-member-row:last-child { margin-bottom:0; }
#app .mf-member dt { color:#75806c; flex-shrink:0; }
#app .mf-member dd { color:#45553c; overflow-wrap:anywhere; line-height:1.65; margin:0; min-width:0; }
#app .mf-member .mf-no-match { color:#9d6114; }
#app .mf-identifiers { display:flex; flex-wrap:wrap; gap:5px; }
#app .mf-identifier { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border:1px solid #92c273; border-radius:6px; background:#f3f9ed; font-size:12px; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:.02em; color:#3e6b29; max-width:100%; overflow-wrap:anywhere; }
#app .mf-identifier i { color:#5c953a; }
#app .mf-missing { color:#697168; }
#app .mf-handling { grid-area:handling; display:flex; flex-direction:column; justify-content:center; min-width:0; border-left:1px solid var(--mf-line); padding-left:18px; }
#app .mf-confidence-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; color:#697561; margin-bottom:6px; }
#app .mf-score { font-weight:500; font-variant-numeric:tabular-nums; }
#app .mf-score-high { color:#497b30; }
#app .mf-score-medium { color:#906316; }
#app .mf-score-low { color:#b64937; }
#app .mf-progress { height:5px; background:#e9ede6; border-radius:3px; overflow:hidden; }
#app .mf-progress-fill { height:100%; background:var(--mf-green); border-radius:3px; }
#app .mf-progress-fill.mf-score-medium { background:#c7a157; }
#app .mf-progress-fill.mf-score-low { background:#d46652; }
#app .mf-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:13px; padding:0; border:0; }
#app .mf-actions .mf-primary { flex:0 1 auto; width:auto; max-width:100%; }
#app .mf-actions [data-email-action="auto"] { background:#fff; border-color:var(--mf-green); color:var(--mf-deep); }
#app .mf-actions [data-email-action="auto"]:hover { background:#f3f9ed; border-color:#5a9a33; color:var(--mf-deep); }
#app .mf-actions .mf-button { font-size:12px; padding:8px 10px; }
#app .mf-actions .mf-view { margin-left:auto; }
#app .mf-view { min-width:38px; }
#app .mf-response-sent { display:flex; align-items:center; gap:7px; color:#577147; font-size:13px; }
#app .mf-mode-caption { margin:7px 0 0; color:#7a8372; font-size:12px; }
#app .mf-sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#app :is(button,a,input,select,textarea):focus-visible { outline:2px solid #4f8b2d; outline-offset:3px; }
#app #empty-state { border:1px solid var(--mf-line); border-radius:8px; padding:40px 20px; }
@media(max-width:1050px) { #app .mf-filter-grid { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr); } }
@media(max-width:760px) {
    #app .mf-home-width { padding-left:16px; padding-right:16px; }
    #app .mf-home-topline { flex-wrap:wrap; gap:14px; }
    #app .mf-home-session { width:100%; justify-content:space-between; border-top:1px solid var(--mf-line); padding-top:10px; }
    #app #stats-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
    #app #stats-cards .stat-card:nth-child(3) { border-right:0; }
    #app #stats-cards .stat-card:nth-child(-n+3) { border-bottom:1px solid var(--mf-line); }
    #app .mf-show-all { flex-basis:100%; margin-left:0; margin-top:3px; }
    #app .mf-email-content { grid-template-columns:minmax(0,1fr); grid-template-areas:"message" "member" "handling"; padding:17px; gap:15px; }
    #app .mf-member { padding:10px 0 0; }
    #app .mf-handling { border-left:0; padding-left:0; }
}
@media(max-width:460px) {
    #app .mf-home-width { padding-left:12px; padding-right:12px; }
    #app .mf-home-brand { gap:10px; }
    #app .mf-home-brand img { width:72px; }
    #app .mf-home-product { padding-left:10px; }
    #app .mf-home-product h1 { font-size:17px; }
    #app .mf-home-product p { font-size:11px; }
    #app .mf-nav-group { gap:5px; }
    #app .mf-button { font-size:12px; padding:8px; }
    #app #stats-cards .stat-card { padding:11px 9px; }
    #app #stats-cards .stat-card h3 { font-size:11px; gap:4px; }
    #app #stats-cards .stat-card p { font-size:23px; }
    #app .mf-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    #app .mf-search-field,#app .mf-today { grid-column:1/-1; }
    #app .mf-email-content { padding:14px; }
    #app .mf-member-row { flex-basis:100%; gap:4px 7px; }
    #app .mf-email-tabs { gap:16px; }
    #app .mf-email-tabs .tab-btn { font-size:12px; gap:6px; }
}
@media(pointer:coarse) { #app :is(.mf-button,.mf-input,.mf-select,.tab-btn,.mf-show-all) { min-height:44px; } #app .mf-view { min-width:44px; } #app :is(.mf-input,.mf-select) { font-size:16px; } }

/* Reviewed member cards and stronger dashboard hierarchy. */
#app { background:#f5f7f4; }
#app .mf-home-width { max-width:1380px; }
#app #stats-cards { grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; border:0; background:transparent; overflow:visible; }
#app #stats-cards .stat-card { padding:18px; border:1px solid #dce5d6; border-radius:12px; box-shadow:0 2px 5px #19341d06; background:#fff; }
#app #stats-cards .stat-card:first-child { background:#244b35; border-color:#244b35; }
#app #stats-cards .stat-card:first-child h3,#app #stats-cards .stat-card:first-child h3 i { color:#c7e3b8; }
#app #stats-cards .stat-card:first-child p { color:#fff; }
#app #stats-cards .stat-card h3 { font-size:12px; font-weight:600; }
#app #stats-cards .stat-card p { font-size:32px; font-weight:750; letter-spacing:-.04em; }
#app #stats-cards button.stat-card:hover,#app #stats-cards button.stat-card.active { box-shadow:0 0 0 2px #7fab61; }
#app #emails-container { gap:16px; border:0; overflow:visible; }
#app .mf-email-card { border:1px solid #dce5d6; border-radius:12px; box-shadow:0 2px 4px #17331405; }
#app .mf-email-card:last-child { border-bottom:1px solid #dce5d6; }
#app .mf-email-content { grid-template-columns:minmax(0,1fr); grid-template-areas:"message" "member" "handling"; gap:16px; padding:22px 24px; }
#app .mf-subject { font-size:18px; font-weight:650; }
#app .mf-subject button { border:0; padding:0; background:transparent; cursor:pointer; max-width:100%; white-space:normal; }
#app .mf-member { display:grid; grid-template-columns:1.15fr 1.1fr 1.3fr .9fr; gap:16px; padding:15px 0; border-bottom:1px solid #edf0e9; }
#app .mf-member-row { display:block; }
#app .mf-member dt { margin-bottom:6px; font-size:11px; }
#app .mf-member dd { font-size:13px; font-weight:600; }
#app .mf-handling { border:0; padding:0; }
#app .mf-confidence { width:100%; }
#app .mf-confidence-heading { margin-bottom:8px; font-weight:600; }
#app .mf-score { font-size:14px; font-weight:700; }
#app .mf-progress { height:7px; border-radius:5px; }
#app .mf-actions { margin-top:16px; }
#app .mf-actions .mf-primary { min-width:180px; background:#6db33f; color:#173c0a; font-weight:650; }
#app .mf-actions .mf-view { margin-left:0; }
#app .mf-mode-caption { font-size:11px; }
#app .mf-sentiment-face { width:30px; height:30px; font-size:22px; }
#app .mf-pagination { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:20px 0; font-size:12px; color:#697762; }
#app .mf-pagination[hidden] { display:none; }
@media(max-width:800px) { #app #stats-cards { grid-template-columns:repeat(3,minmax(0,1fr)); } #app .mf-member { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:460px) { #app #stats-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } #app .mf-email-content { padding:16px; } #app .mf-member { grid-template-columns:minmax(0,1fr); gap:12px; } #app .mf-pagination { flex-wrap:wrap; } }
/* Read-only messages are sandboxed; the surrounding timeline stays responsive. */
#sent-response-modal section.mf-sent-dialog { max-width:1040px; }
#sent-response-modal #sent-response-body { white-space:normal; }
.mf-email-rendered { display:block; width:100%; min-width:0; height:480px; border:1px solid #e1e6df; border-radius:6px; background:#fff; }
.mf-email-text { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; line-height:1.65; }
.mf-email-text-version { margin-top:10px; }
.mf-email-text-version summary { cursor:pointer; font-size:13px; color:#346322; }
.mf-email-text-version .mf-email-text { padding:12px 0; }
#sent-response-modal .mf-sent-history { padding:20px; border-bottom:1px solid #e1e6df; }
#sent-response-history-title { font-size:17px; font-weight:600; margin:0 0 6px; }
#sent-response-history-status { margin:0 0 14px; color:#697168; font-size:13px; }
.mf-journey-message { min-width:0; margin:12px 0; padding:14px; border:1px solid #e1e6df; border-left:3px solid #a0ada0; border-radius:6px; }
.mf-journey-outbound { border-left-color:#6db33f; }
.mf-journey-message > summary { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; cursor:pointer; overflow-wrap:anywhere; }
.mf-journey-message > summary::before { content:'▸'; }
.mf-journey-message[open] > summary::before { content:'▾'; }
.mf-journey-message > summary time { margin-left:auto; font-size:12px; color:#697168; }
.mf-journey-direction { font-size:12px; color:#346322; }
.mf-journey-meta { font-size:12px; color:#697168; margin:7px 0 12px; overflow-wrap:anywhere; }
.mf-journey-preview { display:none; }
.mf-history-notice { color:#697168; }
@media(max-width:600px) {
    #sent-response-modal .mf-sent-history { padding:12px; }
    .mf-journey-message { padding:10px; }
    .mf-journey-message > summary time { margin-left:0; width:100%; }
    .mf-email-rendered { height:420px; }
}