/* Readiness · Markets × Channels — Figma node 4395:2862 */

/* Risk summary cards */
.rk-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; height: 127px; }
.rk { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; border: 1px solid #e5e6eb; border-radius: 6px; background: #fff; text-align: left; padding: 13px 15px 13px 53px; transition: box-shadow .15s, border-color .15s; }
.rk:hover { box-shadow: 0 4px 14px rgba(18,20,25,.06); border-color: #d9dce2; }
.rk.is-on { border-color: #121419; }
.rk-ic { position: absolute; left: 15px; top: 13px; width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 19px; font-weight: 700; line-height: 1; }
.rk-ic.amber { background: #ffb700; }
.rk-ic.red { background: #ff234a; }
.rk-ic.blue { background: #0867ff; }
.rk-ic.green { background: var(--green-ok); font-size: 14px; }
.rk h4 { font-size: 13px; line-height: 17px; color: #141518; }
.rk .big { margin-top: 4px; font-size: 16px; font-weight: 700; line-height: 22px; color: #141518; white-space: nowrap; }
.rk .big span { font-size: 14px; font-weight: 400; }
.rk .ln { margin-top: 5px; font-size: 13px; line-height: 15px; color: #60697e; white-space: nowrap; }
.rk .ln + .ln { margin-top: 5px; }
.rk .chev { position: absolute; right: 15px; top: 13px; font-size: 14px; color: #657086; transition: transform .15s; }
.rk:hover .chev { transform: translateX(2px); color: var(--ink); }

.rk-risk { padding-left: 96px; }
.rk-risk h4 { margin-left: -43px; }
.rk-risk .flag { position: absolute; left: 49px; top: 40px; width: 30px; height: 30px; border-color: #eee; }
.rk-risk .big { margin-top: 7px; line-height: 19px; }
.rk-risk .ln { margin-top: 5px; line-height: 17px; }
.rk-risk .ln b { font-weight: 700; }
.rk-bar { margin-top: 5px; height: 9px; border-radius: 9px; background: #e1e3e8; overflow: hidden; position: relative; }
.rk-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 9px; background: #ffb800; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.rk-risk .warn { margin-top: 5px; font-size: 13px; line-height: 15px; color: #ff5c00; }

/* Matrix + selected risk */
.mx2-wrap { display: grid; grid-template-columns: 1fr 285px; gap: 9px; margin-top: 10px; height: 547px; }
.mx2-card { position: relative; border: 1px solid #e5e6eb; border-radius: 6px; background: #fff; padding: 0 13px; overflow: hidden; }
.mx2-tabs { display: flex; height: 42px; border-bottom: 1px solid #eceef0; margin-top: 1px; }
.mx2-tabs span { height: 41px; padding-top: 13px; border-bottom: 2px solid #1685ff; font-size: 14px; font-weight: 700; color: #141518; white-space: nowrap; }

.mx2-bar { display: flex; align-items: center; gap: 6px; margin-top: 10px; height: 34px; }
.mx2-sel { position: relative; flex: none; height: 34px; border: 1px solid #dfe2e9; border-radius: 4px; background: #fff; font-size: 12px; color: #141518; text-align: left; padding: 0 0 0 10.82px; white-space: nowrap; transition: border-color .15s; }
.mx2-sel:hover { border-color: #b9bfca; }
.mx2-sel.is-set { border-color: #121419; }
.mx2-sel .cv { position: absolute; top: 50%; width: 9px; height: 10.5px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.mx2-sel .cv img, .mx2-head .cv img { display: block; width: 5.5px; height: 10.5px; transform: rotate(-90deg); flex: none; }
.mx2-search { position: relative; flex: 1; min-width: 0; height: 34px; border: 1px solid #dfe2e9; border-radius: 4px; display: flex; align-items: center; padding-left: 37.62px; transition: border-color .15s, box-shadow .15s; }
.mx2-search .mask { position: absolute; left: 12.62px; top: 9px; width: 14px; height: 14px; color: #7c8598; }
.mx2-search input { border: 0; outline: 0; background: transparent; width: 100%; height: 100%; font-size: 12px; color: #141518; }
.mx2-search input::placeholder { color: #818b9e; }
.mx2-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(7,90,255,.12); }
.mx2-crit { flex: none; display: flex; align-items: center; gap: 7px; width: 120px; height: 34px; padding-left: 7px; border-radius: 17px; font-size: 13px; color: #141518; white-space: nowrap; cursor: pointer; user-select: none; outline: none; transition: background .15s, color .15s; }
.mx2-crit:hover { background: #f4f5f7; }
.mx2-crit:hover .mx2-tog { background: #aeb4bf; }
.mx2-crit:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(22,133,255,.45); }
.mx2-crit.is-on { color: #c8102e; font-weight: 500; }
.mx2-crit.is-on:hover .mx2-tog { background: #e81f43; }
.mx2-tog { position: relative; width: 30px; height: 18px; border-radius: 20px; background: #bfc4cd; transition: background .2s; flex: none; }
.mx2-tog::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 7px; background: #fff; box-shadow: 0 1px 2px rgba(18,20,25,.25); transition: transform .22s cubic-bezier(.3,.7,.3,1.2); }
.mx2-crit.is-on .mx2-tog { background: #ff274c; }
.mx2-crit.is-on .mx2-tog::after { transform: translateX(12px); }

/* Table */
.mx2 { margin-top: 10px; height: 407px; overflow: auto; }
.mx2 table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; color: #141518; }
.mx2 th { position: sticky; top: 0; z-index: 2; height: 46px; background: #f5f6f8; border-right: 1px solid #e7e9ed; text-align: left; font-weight: 700; white-space: nowrap; padding: 0; }
.mx2 th:last-child, .mx2 td:last-child { border-right: 0; }
.mx2-head { display: flex; align-items: center; height: 46px; padding-left: 12px; }
.mx2-head.sortable { cursor: pointer; user-select: none; }
.mx2 th:hover .mx2-head.sortable { background: #eceef1; }
.mx2-head .cv { display: flex; align-items: center; justify-content: center; width: 11px; height: 13.2px; margin-left: 19px; }
.mx2-head .cv img { width: 7.2px; height: 13.2px; }
.mx2 td { position: relative; height: 60px; border-right: 1px solid #e7e9ed; border-bottom: 1px solid #e7e9ed; padding: 0 13px; vertical-align: middle; transition: background .12s, opacity .2s; }
.mx2 tbody tr:hover td { background: #fafbfc; }
.mx2 .mk { display: flex; align-items: center; gap: 18px; }
.mx2 .mk .flag { width: 30px; height: 30px; border-color: #eee; }
.mx2 .mk b { display: block; font-size: 12px; line-height: 14px; }
.mx2 .mk small { display: block; margin-top: 5px; font-size: 12px; line-height: 14px; color: #647086; }

.mx2 td.c { cursor: pointer; padding: 0; }
.mx2 .c-in { position: absolute; inset: 4px; padding: 8.75px 9px 0; border-radius: 6px; border: 1px solid transparent; transition: background .15s, border-color .15s, box-shadow .15s; }
.mx2 td.c:hover .c-in { background: #f3f6ff; }
.mx2 .c-st { display: flex; align-items: center; gap: 10px; height: 14px; line-height: 14px; }
.mx2 .c-st i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.mx2 .c-st i.ready { background: var(--green); }
.mx2 .c-st i.risk { background: #ffb700; }
.mx2 .c-st i.blocked { background: #ff274c; }
.mx2 .c-n { margin: 6px 0 0 22px; line-height: 14px; color: #626c80; }
.mx2 td.c.blocked .c-in { background: #fff0f2; border-color: #ff8396; }
.mx2 td.c.blocked:hover .c-in { background: #ffe6ea; }
.mx2 td.c.is-sel .c-in { border-color: #1685ff; box-shadow: inset 0 0 0 1px #1685ff; background: #f5f9ff; }
.mx2 td.c.blocked.is-sel .c-in { border-color: #ff274c; box-shadow: 0 0 0 2px rgba(255,39,76,.14); background: #fff0f2; }
.mx2 td.c.is-flash .c-in { animation: flash 1.2s ease-out; }
@keyframes flash { 0% { background: #d9f6e5; } 100% { background: transparent; } }
.mx2 td.is-dim { opacity: .4; }
.mx2 td.is-dim .c-in { cursor: pointer; }
.mx2 tr.crit-note td { height: 44px; border: 0; background: transparent !important; font-size: 12px; color: #60697e; animation: srIn .25s ease-out; }
.mx2 tr.crit-note .dot { width: 8px; height: 8px; margin-right: 8px; vertical-align: 0; }
.mx2 tr.crit-note button { margin-left: 12px; font-size: 12px; font-weight: 500; color: var(--blue); }
.mx2 tr.crit-note button:hover { text-decoration: underline; }

.mx2 .tot b { display: block; font-size: 12px; line-height: 14px; }
.mx2 .tot b span { font-weight: 400; }
.mx2 .tot .rk-bar { width: 117px; margin-top: 7px; }
.mx2 .tot .rk-bar i.green { background: var(--green-bar); }
.mx2 td.more { padding: 0; }
.mx2 td.more button { width: 100%; height: 100%; font-size: 12px; text-align: left; padding-left: 13px; }
.mx2 td.more button:hover { background: #f1f3f5; }

/* Selected risk panel */
.sr { position: relative; border: 1px solid #e5e6eb; border-radius: 6px; background: #fff; overflow: hidden; }
.sr-head { display: flex; align-items: center; justify-content: space-between; height: 44px; margin: 0 10px; border-bottom: 1px solid #eceef0; }
.sr-head h3 { font-size: 16px; line-height: 19px; color: #141518; }
.sr-head button { width: 18px; height: 28px; margin-right: -4px; border-radius: 4px; font-size: 16px; font-weight: 700; color: #141518; }
.sr-head button:hover { background: #f1f3f5; }
.sr-body { animation: srIn .25s ease-out; }
@keyframes srIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.sr-top { position: relative; height: 90px; margin: 11px 14px 0; padding-left: 55px; }
.sr-top .flag { position: absolute; left: 5px; top: -3px; width: 35px; height: 35px; border-color: #eee; }
.sr-top h4 { padding-top: 2px; font-size: 18px; line-height: 21px; color: #141518; white-space: nowrap; }
.sr-badge { display: inline-flex; align-items: center; height: 28px; margin-top: 8px; padding: 0 14px; border-radius: 4px; font-size: 12px; }
.sr-badge.blocked { background: #ffe0e5; color: #66252b; }
.sr-badge.risk { background: #fff1cc; color: #6b4a00; }
.sr-badge.ready { background: #dcf5e6; color: #0b5a2e; }
.sr-top p { margin-top: 8px; font-size: 13px; line-height: 15px; color: #606a7d; }

.sr-rows { margin: 0 20px; }
.sr-row { position: relative; display: flex; gap: 20px; padding-top: 3px; }
.sr-row + .sr-row { margin-top: 11px; }
.sr-row.h61 { height: 61px; }
.sr-row.h43 { height: 43px; }
.sr-ic { position: relative; width: 23px; flex: none; }
.sr-ic .mask, .sr-ic img { position: absolute; }
.sr-ic .m-cube { left: 3.22px; top: 2.91px; width: 17.84px; height: 17.39px; color: #414858; }
.sr-ic .m-doc { left: 4px; top: 3px; width: 15px; height: 18px; color: #000; }
.sr-ic .m-audience { left: .8px; top: 2.64px; width: 22.35px; height: 15.89px; color: #414858; }
.sr-ic .cal { left: 0; top: -3px; width: 23px; height: 23px; }
.sr-ic .bars { left: 1px; top: 0; width: 18px; height: 18px; }
.sr-row b { display: block; font-size: 13px; line-height: 17px; color: #141518; }
.sr-row .l1 { margin-top: 2px; font-size: 13px; line-height: 18px; color: #454e61; white-space: nowrap; }
.sr-row .l2 { margin-top: 3px; font-size: 12px; line-height: 18px; color: #657086; white-space: nowrap; }
.sr-row .due { color: red; }
.sr-row .due.ok { color: #454e61; }

.sr-foot { position: absolute; left: 10px; right: 10px; bottom: 6px; display: flex; gap: 6px; }
.sr-foot button { height: 46px; border-radius: 4px; font-size: 13px; font-weight: 500; white-space: nowrap; transition: background .15s, transform .1s; }
.sr-foot button:active { transform: translateY(1px); }
.sr-queue { width: 144px; background: #fff; border: 1px solid #dedfe4; color: #111; }
.sr-queue:hover { background: #f4f5f7; }
.sr-go { flex: 1; background: linear-gradient(180deg, #171918, #060706); border: 1px solid #292929; color: #fff; }
.sr-go:hover { background: linear-gradient(180deg, #2a2c2b, #121312); }
.sr-go[disabled] { opacity: .45; cursor: default; }

/* Blocker queue + investigate */
.q-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 4px; border-bottom: 1px solid #f0f1f3; text-align: left; border-radius: 4px; }
.q-row:hover { background: #f7f8fa; }
.q-row p { flex: 1; font-size: 12px; line-height: 17px; color: var(--ink); }
.q-row p span { display: block; color: var(--text-muted); }
.inv-steps { margin: 6px 0 0; padding: 0; list-style: none; }
.inv-steps li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f1f3; font-size: 12px; line-height: 17px; color: var(--ink); }
.inv-steps li span { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-num); display: grid; place-items: center; font-weight: 700; flex: none; }
.inv-steps li.done span { background: var(--green-ok); color: #fff; }
.inv-steps li small { display: block; color: var(--text-muted); font-size: 11px; }