:root{
--link-color:#00a1ff;
--border-color:#e1e5ea;
--cell-padding:0.75rem;
--font-base:0.95rem;
--hover-bg:#f9fbfc;
} .table-container{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
margin-bottom:1rem;
border:0 !important;
} .cmp-table{
width:100%;
font-size:var(--font-base);
table-layout:fixed;
border-collapse:separate !important;
border-spacing:0;
border:0 !important;
outline:0 !important;
box-shadow:none !important;
font-family:inherit;
} .cmp-table--citability-block col.col-fact{
width:60%;
}
.cmp-table--citability-block col.col-scope{
width:26%;
}
.cmp-table--citability-block col.col-year{
width:6%;
}
.cmp-table--citability-block col.col-source{
width:8%;
} .cmp-table--dopamine-template col.col-category{
width:18%;
}
.cmp-table--dopamine-template col.col-time{
width:14%;
}
.cmp-table--dopamine-template col.col-for{
width:22%;
}
.cmp-table--dopamine-template col.col-picks{
width:46%;
} .cmp-table thead th{
background:#fafafa;
font-weight:600;
padding:var(--cell-padding);
border:1px solid var(--border-color);
text-align:left;
line-height:1.45;
white-space:normal !important;
word-break:keep-all;
overflow:hidden;
} .cmp-table thead th .technique-note{
font-weight:400;
font-size:0.85em;
} .cmp-table td{
padding:var(--cell-padding);
border:1px solid var(--border-color);
vertical-align:top;
background:#fff;
line-height:1.55;
white-space:normal !important;
overflow-wrap:anywhere;
word-break:normal;
hyphens:auto;
overflow:hidden;
font-family:inherit;
} .cmp-table--citability-block td > p,
.cmp-table--dopamine-template td > p{
margin:0;
padding:0;
} .cmp-table--citability-block ol.steps,
.cmp-table--dopamine-template ol.steps{
margin:0; padding-left:1.15rem; font-size:inherit;
line-height:inherit;
font-family:inherit;
list-style-position:outside;
}
.cmp-table--citability-block td > p > ol.steps,
.cmp-table--dopamine-template td > p > ol.steps{
margin:0;
padding-left:1.15rem;
}
.cmp-table--citability-block ol.steps li,
.cmp-table--dopamine-template ol.steps li{
margin:0 0 0.15rem 0;
font-size:inherit;
line-height:inherit;
font-family:inherit;
} .cmp-table tbody tr:hover td{
background:var(--hover-bg);
} .cmp-table a{
color:var(--link-color);
} .cmp-table--dopamine-template .fill-lines{
display:flex;
align-items:center;
gap:0.5rem;
flex-wrap:nowrap;
}
.cmp-table--dopamine-template .fill-line{
display:inline-block;
flex:1 1 auto;
height:1.1em;
border-bottom:1px solid currentColor;
min-width:3.5rem;
}
.cmp-table--dopamine-template .fill-sep{
flex:0 0 auto;
} @media (min-width:769px){
.cmp-table--citability-block td::before,
.cmp-table--dopamine-template td::before{
content:none;
}
} @media (max-width:768px){
.table-container{
overflow-x:visible;
}
.cmp-table--citability-block colgroup,
.cmp-table--citability-block thead,
.cmp-table--dopamine-template colgroup,
.cmp-table--dopamine-template thead{
display:none;
}
.cmp-table--citability-block,
.cmp-table--citability-block tbody,
.cmp-table--dopamine-template,
.cmp-table--dopamine-template tbody{
display:block;
width:100%;
}
.cmp-table--citability-block tr,
.cmp-table--dopamine-template tr{
display:block;
margin-bottom:1rem;
border:1px solid var(--border-color);
border-radius:0.35rem;
overflow:hidden;
}
.cmp-table--citability-block td,
.cmp-table--dopamine-template td{
display:block;
border-left:0;
border-right:0;
border-top:0;
border-bottom:1px solid var(--border-color);
}
.cmp-table--citability-block td:last-child,
.cmp-table--dopamine-template td:last-child{
border-bottom:0;
}
.cmp-table--citability-block td::before,
.cmp-table--dopamine-template td::before{
content:attr(data-label);
display:block;
font-weight:600;
margin-bottom:0.25rem;
color:#5e6a72;
} .cmp-table--citability-block td[data-label="Quick fact (quote-friendly)"],
.cmp-table--dopamine-template td[data-label="Category"]{
background:#fafafa;
font-weight:600;
}
.cmp-table--citability-block td[data-label="Quick fact (quote-friendly)"]::before,
.cmp-table--dopamine-template td[data-label="Category"]::before{
font-size:0.8em;
text-transform:uppercase;
letter-spacing:0.04em;
}
.cmp-table--citability-block tbody tr:hover td,
.cmp-table--dopamine-template tbody tr:hover td{
background:#fff;
} .cmp-table--dopamine-template .fill-lines{
flex-wrap:wrap;
gap:0.4rem;
}
.cmp-table--dopamine-template .fill-line{
min-width:5rem;
}
} @media (max-width:480px){
.cmp-table{
font-size:0.9rem;
}
}