/* Marketing and customer data screens (WP-F). Colours follow the platform tokens: green good, amber waiting, red bad, blue neutral. */

/* Record header */
.mk-head { display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; background: #fff; border: 1px solid #e9e9e9; border-radius: 6px; padding: 14px 16px; }
.mk-headmain { flex: 1 1 420px; min-width: 0; }
.mk-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.mk-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 18px; margin: 0; }
.mk-facts div { min-width: 0; }
.mk-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6b7c8d; }
.mk-facts dd { margin: 2px 0 0; font-weight: 600; color: #12263f; overflow-wrap: anywhere; }
.mk-headact { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.mk-headact form { margin: 0; }
.mk-brief { white-space: normal; line-height: 1.55; background: #f6f9fc; border-left: 3px solid var(--brand-primary, #1a7fe0); padding: 10px 12px; border-radius: 3px; margin-bottom: 10px; }

.mk-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mk-checks li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.mk-checks li.ok i { color: #04955d; } .mk-checks li.bad i { color: #c01d47; }
.mk-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.mk-list li { padding: 8px 10px; background: #f6f9fc; border-radius: 4px; }
.mk-list .sub, .mk-sub { display: block; font-size: 11.5px; color: #6b7c8d; margin-top: 2px; }
.mk-win td { background: #e9f8f1; }
.mk-pop { position: relative; display: inline-block; }
.mk-pop > summary { list-style: none; cursor: pointer; } .mk-pop > summary::-webkit-details-marker { display: none; }
.mk-pop[open] > form, .mk-pop[open] > div { position: absolute; right: 0; z-index: 20; width: min(300px, 86vw); background: #fff; border: 1px solid #c7d2dd; border-radius: 4px; padding: 10px; box-shadow: 0 8px 24px rgba(7, 29, 66, .15); text-align: left; }
.ct-choices { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0; }
.mk-inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.mk-inline-form .ct-field { flex: 1 1 160px; margin: 0; }
.mk-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.mk-tag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 3px; background: #eaf2f9; color: #2f5f88; margin: 0 4px 2px 0; }
.mk-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: #f1f5f9; padding: 2px 6px; border-radius: 3px; overflow-wrap: anywhere; }
.mk-note { font-size: 12px; color: #5b6b7b; background: #fff8e6; border: 1px solid #f3dfa8; padding: 8px 10px; border-radius: 4px; }

/* Marketing calendar (month grid) */
.mk-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid #d9e2ec; border-radius: 6px; overflow: hidden; background: #fff; }
.mk-cal .hd { background: #0b2a57; color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 6px 8px; }
.mk-cal .day { min-height: 112px; border-top: 1px solid #e3e9f0; border-left: 1px solid #e3e9f0; padding: 4px 5px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mk-cal .day:nth-child(7n + 1) { border-left: 0; }
.mk-cal .day.out { background: #f6f8fb; color: #9aa9b8; }
.mk-cal .day.today { box-shadow: inset 0 0 0 2px var(--brand-primary, #1a7fe0); }
.mk-cal .dn { font-size: 11.5px; font-weight: 700; color: #3b4f63; }
.mk-cal a.it { display: block; font-size: 11px; line-height: 1.25; padding: 2px 5px; border-radius: 3px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid; }
.mk-cal a.it.launch { background: #e8f2fd; color: #0b5fc4; border-color: var(--brand-primary, #1a7fe0); }
.mk-cal a.it.end { background: #eef1f5; color: #4c5d70; border-color: #97a6b8; }
.mk-cal a.it.event { background: #f0ebfb; color: #4a2bb0; border-color: #7553d6; }
.mk-cal a.it.social { background: #e6f7fb; color: #0c7ea8; border-color: #29b6db; }
.mk-cal a.it.task { background: #fff6e3; color: #8a5a00; border-color: #f5a524; }
.mk-cal a.it.task.overdue { background: #fdecef; color: #a3163b; border-color: #e8365d; }
.mk-cal .more { font-size: 10.5px; color: #6b7c8d; }
.mk-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: #4c5d70; }
.mk-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

/* Journey canvas */
.jn-wrap { overflow: auto; background: #f4f7fb; border: 1px solid #d9e2ec; border-radius: 6px; background-image: radial-gradient(#d3dce7 1px, transparent 1px); background-size: 18px 18px; }
.jn-canvas { position: relative; margin: 18px; }
.jn-canvas svg.jn-links { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.jn-links path { fill: none; stroke: #8fa3b8; stroke-width: 2; }
.jn-links path.alt { stroke: #e08a00; stroke-dasharray: 5 4; }
.jn-links text { font-size: 10.5px; fill: #4c5d70; font-weight: 700; }
.jn-node { position: absolute; width: 196px; height: 92px; background: #fff; border: 1px solid #c7d2dd; border-radius: 8px; box-shadow: 0 2px 6px rgba(7, 29, 66, .08); padding: 7px 9px; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: #12263f; }
.jn-node:focus-visible, .jn-node:hover { outline: 2px solid var(--brand-primary, #1a7fe0); outline-offset: 1px; }
.jn-node.on { border-color: var(--brand-primary, #1a7fe0); box-shadow: 0 0 0 3px rgba(26, 127, 224, .25); }
.jn-node .ty { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.jn-node .lb { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jn-node .st { font-size: 11px; color: #5b6b7b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: auto; }
.jn-node .here { position: absolute; top: -8px; right: -8px; background: var(--brand-primary, #1a7fe0); color: #fff; border-radius: 10px; font-size: 10.5px; font-weight: 700; padding: 1px 7px; }
.jn-node.t-trigger { border-top: 4px solid #0b2a57; } .jn-node.t-trigger .ty { color: #0b2a57; }
.jn-node.t-wait { border-top: 4px solid #f5a524; } .jn-node.t-wait .ty { color: #b06d00; }
.jn-node.t-branch, .jn-node.t-split { border-top: 4px solid #7553d6; } .jn-node.t-branch .ty, .jn-node.t-split .ty { color: #4a2bb0; }
.jn-node.t-action { border-top: 4px solid var(--brand-primary, #1a7fe0); } .jn-node.t-action .ty { color: #0b5fc4; }
.jn-node.t-goal { border-top: 4px solid #13b985; } .jn-node.t-goal .ty { color: #04955d; }
.jn-node.t-exit { border-top: 4px solid #97a6b8; height: 72px; } .jn-node.t-exit .ty { color: #5b6b7b; }
.jn-add { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 1px dashed var(--brand-primary, #1a7fe0); color: var(--brand-primary, #1a7fe0); display: grid; place-items: center; font-size: 15px; text-decoration: none; z-index: 2; }
.jn-add:hover, .jn-add:focus-visible { background: var(--brand-primary, #1a7fe0); color: #fff; border-style: solid; outline: none; }
.jn-add.alt { border-color: #e08a00; color: #b06d00; } .jn-add.alt:hover, .jn-add.alt:focus-visible { background: #e08a00; color: #fff; }
.jn-drop { position: absolute; border: 2px dashed transparent; border-radius: 8px; }
.jn-canvas.dragging .jn-drop { border-color: #b9c7d6; }
.jn-canvas.dragging .jn-drop.over { border-color: var(--brand-primary, #1a7fe0); background: rgba(26, 127, 224, .06); }
.jn-hist { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.jn-hist li { padding: 3px 0; border-bottom: 1px dashed #e3e9f0; }

/* Template and page block editors */
.bk-list { display: grid; gap: 8px; }
.bk { border: 1px solid #d9e2ec; border-radius: 6px; background: #fff; }
.bk > summary { list-style: none; cursor: pointer; padding: 8px 10px; display: flex; gap: 8px; align-items: center; font-weight: 600; }
.bk > summary::-webkit-details-marker { display: none; }
.bk > summary .ty { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: #0b5fc4; background: #e8f2fd; padding: 1px 6px; border-radius: 3px; }
.bk > summary .tx { color: #4c5d70; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.bk .bd { padding: 0 10px 10px; display: grid; gap: 8px; }
.bk-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.mk-preview { border: 1px solid #d9e2ec; border-radius: 6px; background: #fff; padding: 14px; max-width: 640px; overflow-wrap: anywhere; }
.mk-preview .subj { font-weight: 700; font-size: 15px; border-bottom: 1px solid #e3e9f0; padding-bottom: 8px; margin-bottom: 8px; }
.mk-sms { max-width: 300px; background: #e9f1fb; border-radius: 14px 14px 14px 4px; padding: 10px 12px; font-size: 13px; overflow-wrap: anywhere; }

/* Rule builder (audiences) */
.rb-rows { display: grid; gap: 8px; }
.rb-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 6px; align-items: center; }
.rb-row select, .rb-row input { width: 100%; min-width: 0; }
.rb-nl { display: flex; gap: 8px; flex-wrap: wrap; }
.rb-nl input { flex: 1 1 280px; min-width: 0; }
.rb-count { font-size: 22px; font-weight: 800; color: #0b2a57; }
.rb-understood { display: flex; flex-wrap: wrap; gap: 4px; }

/* Profile */
.pf-score { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.pf-factors { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; }
.pf-factors li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px dashed #e3e9f0; }
.pf-factors .pos { color: #04955d; font-weight: 700; } .pf-factors .neg { color: #c01d47; font-weight: 700; }

/* Public landing page and preference centre */
.lp-wrap { max-width: 980px; margin: 0 auto; padding: 24px 16px 48px; }
.lp-hero { background: linear-gradient(135deg, var(--brand-navy-2, #071d42), #0b5fb8); color: #fff; border-radius: 10px; padding: 36px 28px; }
.lp-hero h1 { color: #fff; margin: 0 0 10px; font-size: clamp(26px, 4vw, 38px); line-height: 1.15; }
.lp-hero p { margin: 0; font-size: 16px; opacity: .92; max-width: 640px; }
.lp-block { margin-top: 22px; }
.lp-text { font-size: 15.5px; line-height: 1.6; color: #22364d; }
.lp-img img { max-width: 100%; border-radius: 8px; }
.lp-cta { display: inline-block; background: var(--brand-primary, #1a7fe0); color: #fff; padding: 12px 22px; border-radius: 6px; text-decoration: none; font-weight: 700; }
.lp-banner { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: #fff7e6; border: 1px solid #f3dfa8; border-radius: 8px; padding: 14px 16px; }
.lp-banner b { display: block; font-size: 15px; }
.lp-form { background: #fff; border: 1px solid #d9e2ec; border-radius: 10px; padding: 20px; max-width: 560px; }
.lp-form .ct-field { margin-bottom: 10px; }
.lp-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.lp-ok { background: #e9f8f1; border: 1px solid #a8e2c7; border-radius: 8px; padding: 16px; }
.pc-card { max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid #d9e2ec; border-radius: 10px; padding: 22px; }
.pc-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #edf1f5; align-items: center; flex-wrap: wrap; }
.mk-ticket { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: #f6f9fc; border: 1px dashed #9fb2c6; border-radius: 8px; padding: 12px; }
.mk-ticket svg { width: 110px; height: 110px; }

@media (max-width: 860px) {
    .lp-grid { grid-template-columns: 1fr; }
    .rb-row { grid-template-columns: 1fr 1fr; }
    .rb-row > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .mk-cal { grid-template-columns: 1fr; }
    .mk-cal .hd { display: none; }
    .mk-cal .day { min-height: 0; border-left: 0; }
    .mk-cal .day.out { display: none; }
    .mk-cal .day:not(:has(a.it)) { display: none; }
    .mk-headact { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .jn-node, .jn-add { transition: none; } }


/* Pinnacle Premier Bank: black navigation with restrained gold selection accents. */
.ct-top,header.top,.ct-modbar,.topnav,.ct-navtitle,.navtitle,.navbar.bg-primary,.nav-menu.bg-primary,.sidebar.bg-primary{background:#000!important;background-image:none!important;border-color:#252525!important;color:#fff!important}
.ct-top-title,.ct-top-title b,.ct-session,.ct-modbar a,.topnav a,.topnav button,.ct-navtitle span,.navtitle span{color:#fff!important}
.ct-modbar a:hover,.ct-modbar a.on,.topnav a:hover,.topnav a.on,.topnav button:hover,.topnav button.on{background:#242424!important;color:#fff!important}
.ct-sidebar,.shell>.sidebar{background:#f2f2f2!important;border-color:#d3d3d3!important}
.ct-navitem,.navitem{color:#171717!important;background:linear-gradient(#fff,#f3f3f3)!important;border-color:#d0d0d0!important}
.ct-navitem i,.navitem svg{color:#171717!important}
.ct-navitem:hover,.ct-navitem.on,.navitem:hover,.navitem.on,.nav-link.active,.sidebar .nav-link.active{color:#fff!important;background:#111!important;box-shadow:inset 3px 0 0 #c8a34a!important}
.ct-navitem:hover i,.ct-navitem.on i,.navitem:hover svg,.navitem.on svg{color:#e3c375!important}
.ct-navtitle span,.navtitle span{background:#292929!important}
.ct-topbtn,.ct-command,.ct-command input,.ct-top .ct-avatar{background:#171717!important;border-color:#454545!important;color:#fff!important}
.ct-menu .drop a:hover,.ct-menu .drop button:hover{background:#111!important;color:#fff!important}