/* Flow diagrams and journey matrix: visual structure stays visible without JS. */
.flow-artifact { min-width: 0; }
.flow-artifact .flow-key { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding-bottom: 18px; font-size: 11px; }
.flow-artifact .flow-key > span { display: inline-flex; align-items: center; gap: 8px; }
.flow-artifact .flow-key i { display: inline-block; width: 20px; height: 13px; border: 1px solid #9eaf95; background: #fffdf5; border-radius: 3px; }
.flow-artifact .flow-key .key-choice { width: 13px; transform: rotate(45deg); background: #f7e3b9; border-color: #b69a64; border-radius: 0; }
.flow-artifact .flow-key .key-end { border-radius: 12px; background: #d7e5cc; }
.flow-artifact .flow-key a { margin-left: auto; text-decoration: underline; }
.flow-artifact .map-scroll { overflow-x: auto; border: 1px solid #d0dac6; border-radius: 14px; background: #f7f8f0; }
.flow-artifact .flow-diagram { display: block; width: 100%; min-width: 960px; height: auto; max-height: none; }
.flow-artifact .map-scroll-hint, #interaction-design .map-source { font-size: 11px; margin-top: 14px; color: #62735b; }
#interaction-design .flow-subtitle { font: 500 25px Fredoka, sans-serif; margin: 28px 0 16px; }
#interaction-design .flow-result-notes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-top: 20px; }
#interaction-design .flow-result-notes p { font-size: 12px; line-height: 1.7; }
#interaction-design .flow-result-notes b { display: block; margin-bottom: 5px; }
#ux-journey .journey-matrix { padding: 26px; border: 1px solid #c5d1b9; background: #edf1e5; border-radius: 14px; }
#ux-journey .journey-context { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 18px; }
#ux-journey .journey-context .eyebrow { margin-bottom: 10px; }
#ux-journey .journey-context h4 { font: 500 29px/1.2 Fredoka, sans-serif; margin: 0; }
#ux-journey .journey-context > p { max-width: 260px; font-size: 13px; line-height: 1.7; }
#ux-journey .journey-context > p > b { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
#ux-journey .journey-reading { font-size: 12px; color: #596b53; margin-bottom: 20px; }
#ux-journey .journey-table-scroll { overflow-x: auto; border: 1px solid #bac9ad; border-radius: 10px; }
#ux-journey .journey-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1080px; table-layout: fixed; color: #293e33; font: 12px/1.6 Nunito, Arial, sans-serif; }
#ux-journey .journey-table caption { caption-side: bottom; padding: 14px; font-size: 11px; background: #e6ecdd; text-align: left; }
#ux-journey .journey-table th, #ux-journey .journey-table td { padding: 18px 15px; text-align: left; vertical-align: top; border-right: 1px solid #d0dbc6; border-bottom: 1px solid #d0dbc6; }
#ux-journey .journey-table tr > :last-child { border-right: 0; }
#ux-journey .journey-table thead th { background: #29483a; color: #fff4e1; position: relative; border-color: #49664d; }
#ux-journey .journey-table thead th:first-child { font-size: 10px; letter-spacing: 1px; vertical-align: middle; width: 140px; }
#ux-journey .journey-table thead b { display: block; font: 500 19px/1.3 Fredoka, sans-serif; padding-top: 10px; }
#ux-journey .phase-number { font: 12px Nunito, sans-serif; color: #c5d7b7; }
#ux-journey .phase-arrow { position: absolute; right: -11px; top: 26px; z-index: 2; border: 1px solid #6b8565; border-radius: 50%; width: 23px; height: 23px; text-align: center; background: #29483a; }
#ux-journey .journey-table tbody th { background: #e4ecda; font-weight: 800; position: sticky; left: 0; z-index: 3; box-shadow: 1px 0 #bac9ad; }
#ux-journey .journey-table th > span:not(.phase-number):not(.phase-arrow) { display: block; font-weight: 400; color: #617354; font-size: 10px; margin-top: 7px; }
#ux-journey .journey-table tbody td { background: #fffdf6; }
#ux-journey .journey-table tbody tr:nth-child(odd) td { background: #f3f6eb; }
#ux-journey .touchpoint-row td { padding: 12px 10px; }
#ux-journey .touchpoint-row .zoom { display: block; width: 100%; padding: 0; border: 1px solid #afa89f; border-radius: 5px; background: #302c33; cursor: zoom-in; overflow: hidden; }
#ux-journey .touchpoint-row img { display: block; width: 100%; height: 124px; object-fit: contain; max-height: none; }
#ux-journey .touchpoint-caption { display: block; font-size: 10px; margin-top: 9px; }
#ux-journey .journey-table .journey-questions td { background: #f7edd8; }
#ux-journey .journey-table .journey-questions th { background: #ede0c2; }
#ux-journey .journey-map-note { font-size: 10px; line-height: 1.7; color: #63765a; margin-top: 16px; }
#ux-journey .journey-map-note > span { display: block; margin-top: 5px; }
@media(max-width:760px) {
 .flow-artifact .flow-key { gap: 12px; }
 .flow-artifact .flow-key a { margin-left: 0; width: 100%; }
 #interaction-design .flow-result-notes { grid-template-columns: 1fr; gap: 14px; }
 #ux-journey .journey-matrix { padding: 16px; }
 #ux-journey .journey-context { flex-direction: column; align-items: start; gap: 16px; }
 #ux-journey .journey-context h4 { font-size: 25px; }
 #ux-journey .journey-table thead th:first-child { width: 112px; }
}