/* ============================
   Topworks MCC — Compact + Stacked Options
   ============================ */

.tw-mcc{
  font-size:14px;
  line-height:1.25;
}

/* Header */
.tw-mcc-title{
  font-size:18px;
  line-height:1.15;
  margin:2px 0 6px;
}
.tw-mcc-sub{
  font-size:13px;
  line-height:1.35;
}

/* Cards / layout */
.tw-mcc-grid{gap:12px;}
.tw-mcc-card{
  padding:12px;
  border-radius:14px;
}
.tw-mcc-card-title{
  margin-bottom:8px;
  font-size:14px;
}

.tw-mcc-field{margin:10px 0;}
.tw-mcc-label{
  font-size:13px;
  margin-bottom:6px;
  line-height:1.25;
}

.tw-mcc-row{gap:8px;}
.tw-mcc-select{
  padding:8px 10px;
  border-radius:10px;
  font-size:13px;
}

/* Option groups */
.tw-mcc-options{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

/* Option buttons: stacked (title on top, note under it) */
.tw-mcc-opt{
  display:flex !important;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  text-align:left;

  padding:10px 10px;
  border-radius:12px;

  font-size:14px;
  font-weight:800;
  line-height:1.15;

  min-height:62px;
  min-width:0;
  gap:6px;

  cursor:pointer;
  user-select:none;
}

.tw-mcc-opt span{
  display:block;
  font-size:11px;
  font-weight:700;
  opacity:.65;
  line-height:1.15;

  white-space:normal;
  max-width:100%;
}

.tw-mcc-opt.is-active{
  box-shadow:0 0 0 2px rgba(11,87,208,.12);
}

/* Output */
.tw-mcc-kpi-value{
  font-size:22px;
  line-height:1.1;
}
.tw-mcc-kpi-sub{font-size:13px;}

.tw-mcc-btn{
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
  cursor:pointer;
}

.tw-mcc-note{
  padding:9px 10px;
  border-radius:12px;
  font-size:13px;
  line-height:1.35;
}

/* Responsive: narrow content areas (e.g., sidebar layouts) */
@media (max-width: 900px){
  .tw-mcc-options{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 520px){
  .tw-mcc-options{
    grid-template-columns:1fr;
  }
}