/* ============================================================
   costandprofitability.com - interactive 7x7 method matrix
   Cluster "costing methods around the world" · hub centrepiece.
   Praxis. Scoped .cc-mx. Data-driven (window.CC_MATRIX).
   Desktop = grid; mobile = searchable list of pairings. Never blue.
   ============================================================ */
.cc-mx{
  --o:#C75B22; --o-br:#E2761A; --grn:#1C7A57;
  --ink:#1A1714; --ink2:#4A4138; --muted:#756859; --muted2:#9A8E7E;
  --paper:#F3EEE4; --paper2:#EDE6D8; --surface:#FBF9F3; --surface2:#FAF7F0;
  --line:#DCD3C2; --line2:#C9BEAA; --dark:#14110D; --wheat:#E8DBC2;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --serif:'Newsreader',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
  font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;
}
.cc-mx *{box-sizing:border-box;}

/* toggle (grid vs list) - list auto on small screens */
.cc-mx .mx-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.cc-mx .mx-legend{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-left:auto;}
.cc-mx .mx-legend span{display:inline-flex;align-items:center;gap:6px;}
.cc-mx .mx-legend i{width:11px;height:11px;border-radius:3px;display:inline-block;}
.cc-mx .mx-legend i.pg{background:var(--o);}
.cc-mx .mx-legend i.pn{background:var(--line2);}
.cc-mx .mx-legend i.df{background:var(--dark);}

/* ---------- grid ---------- */
.cc-mx .mx-grid-wrap{overflow-x:auto;}
.cc-mx table.mx-grid{border-collapse:separate;border-spacing:3px;margin:0 auto;}
.cc-mx .mx-grid th,.cc-mx .mx-grid td{padding:0;}
.cc-mx .mx-grid thead th{vertical-align:bottom;height:118px;width:62px;}
.cc-mx .mx-grid thead th .rot{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--ink2);white-space:nowrap;margin:0 auto;padding-bottom:6px;text-transform:uppercase;}
.cc-mx .mx-grid thead th.corner{width:118px;height:118px;}
.cc-mx .mx-grid tbody th.rowh{text-align:right;padding-right:11px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--ink2);white-space:nowrap;text-transform:uppercase;width:118px;}
.cc-mx .mx-grid td.cell{width:62px;height:62px;}
.cc-mx .cell .cc-box{width:100%;height:100%;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .13s;border:1px solid var(--line);background:var(--surface);position:relative;}
.cc-mx .cell.diag .cc-box{background:var(--dark);border-color:var(--dark);cursor:pointer;}
.cc-mx .cell.diag .cc-box .ab{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--wheat);letter-spacing:.02em;}
.cc-mx .cell.pair .cc-box{background:var(--surface);}
.cc-mx .cell.pair.haspage .cc-box{background:rgba(199,91,34,.08);border-color:rgba(199,91,34,.35);}
.cc-mx .cell.pair .cc-box .mk{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--muted2);line-height:1;}
.cc-mx .cell.pair.haspage .cc-box .mk{color:var(--o);}
.cc-mx .cell.pair .cc-box:hover{border-color:var(--o);background:var(--o);transform:translateY(-1px);box-shadow:0 4px 12px -4px rgba(199,91,34,.5);}
.cc-mx .cell.pair .cc-box:hover .mk{color:#fff;}
.cc-mx .cell.diag .cc-box:hover{background:var(--o);border-color:var(--o);}
.cc-mx .cell.diag .cc-box:hover .ab{color:#fff;}
/* header highlight on hover */
.cc-mx .mx-grid.hot th.hl .rot,.cc-mx .mx-grid.hot th.hl.rowh{color:var(--o);}

/* tooltip */
.cc-mx .mx-tip{position:fixed;z-index:60;max-width:280px;background:var(--dark);color:var(--paper);border-radius:9px;padding:11px 14px;pointer-events:none;opacity:0;transition:opacity .12s;box-shadow:0 10px 30px -10px rgba(20,17,13,.6);}
.cc-mx .mx-tip.show{opacity:1;}
.cc-mx .mx-tip .tt-pair{font-family:var(--serif);font-size:15px;font-weight:500;margin-bottom:4px;}
.cc-mx .mx-tip .tt-pair em{font-style:italic;color:var(--o-br);}
.cc-mx .mx-tip .tt-diff{font-size:12.5px;line-height:1.45;color:#CFC4B2;}
.cc-mx .mx-tip .tt-cta{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--o-br);margin-top:7px;}

/* ---------- panel (for pairs without a dedicated page) ---------- */
.cc-mx .mx-panel{margin-top:18px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--o);border-radius:0 12px 12px 0;padding:0;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;}
.cc-mx .mx-panel.open{max-height:420px;padding:20px 24px;}
.cc-mx .mx-panel .pp-pair{font-family:var(--serif);font-size:20px;font-weight:500;color:var(--ink);margin:0 0 4px;}
.cc-mx .mx-panel .pp-pair em{font-style:italic;color:var(--o);}
.cc-mx .mx-panel .pp-diff{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:11px;}
.cc-mx .mx-panel .pp-sum{font-size:15.5px;line-height:1.62;color:var(--ink2);margin:0;max-width:72ch;}
.cc-mx .mx-panel .pp-close{float:right;border:none;background:transparent;color:var(--muted);font-family:var(--mono);font-size:18px;cursor:pointer;line-height:1;}
.cc-mx .mx-panel .pp-close:hover{color:var(--o);}

/* ---------- mobile list ---------- */
.cc-mx .mx-list{display:none;}
.cc-mx .mx-search{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line2);border-radius:9px;padding:11px 14px;margin-bottom:12px;}
.cc-mx .mx-search svg{width:16px;height:16px;stroke:var(--muted);flex:none;}
.cc-mx .mx-search input{flex:1;border:none;background:transparent;outline:none;font-family:var(--sans);font-size:15px;color:var(--ink);min-width:0;}
.cc-mx .mx-pair-row{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--line);cursor:pointer;text-decoration:none;color:inherit;}
.cc-mx .mx-pair-row .pr-names{font-family:var(--serif);font-size:16px;color:var(--ink);flex:none;min-width:42%;}
.cc-mx .mx-pair-row .pr-names em{font-style:normal;color:var(--muted2);}
.cc-mx .mx-pair-row .pr-diff{font-size:13px;color:var(--muted);line-height:1.4;}
.cc-mx .mx-pair-row .pr-mk{margin-left:auto;flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--o);}
.cc-mx .mx-pair-row.pn .pr-mk{color:var(--muted2);}

@media(max-width:860px){
  .cc-mx .mx-grid-wrap{display:none;}
  .cc-mx .mx-list{display:block;}
  .cc-mx .mx-legend{margin-left:0;}
}