:root {
--bg:#eee;
--card:white;
--muted:var(--col1);
--text:black;
--brand:var(--col1);
--ok:#34d399;
--warn:#f59e0b;
--bad:#ef4444;
}
* {
	box-sizing: border-box;
}
body {
	margin: 0;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
	color: var(--text);
	font-size: initial!important;
}
div.header {
	position: sticky;
	top: 0;
	background: var(--col1);
	backdrop-filter: saturate(1.2) blur(6px);
	z-index: 10;
	border-bottom: 1px solid #1f2937;
	padding: 1rem 5vw 2rem;
}
.wrap {
    margin: 3rem auto;
}
h1 {
/*	font-size: clamp(22px, 3vw, 36px); */
	margin: 0;
	color:white;
}
.controls {
	display: grid;
	gap: 10px;
	margin-top: 12px
}
input[type="search"], select {
	background: #eee;
	color: var(--text);
	border: 1px solid #223046;
	border-radius: 12px;
	margin:0;
	padding: .5rem;
}
.btn {
	background: var(--brand);
	color: #0b0f14;
	border: 0;
	border-radius: 12px;
	font-weight: 600;
	cursor: pointer
}
main {
}
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 16px
}
.masonry {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 5rem;
	
}
article.card {
/*	background: var(--card);
	border: 1px solid #1f2937;
	border-radius: .5rem;
	box-shadow: 0 6px 24px rgba(0,0,0,.25);
*/	display: flex;
	flex-direction: column;
	height: fit-content;
	break-inside: avoid;
	margin: 0;
	padding: 2rem 0; 
	width:300px;
	height: -webkit-fill-available;
	border-bottom: 1px solid #aaa;
}
.card header {
	position: unset;
	background: none;
	border: 0;
	justify-items: left;
}
.catpill{background:var(--col1);color:white;font-size:12px;}
.card h2 {
    font-size: 1.5rem;
    margin-bottom: .5rem;
}
.meta {
	font-size: 12px;
	color: var(--muted)
}
.card .section {
	border-top: 1px dashed #223046;
	padding: .5rem 0;
}
section div
{	justify-content: stretch;
}
.section:first-of-type {
	border-top: 0
}
code.block {
	display: block;
	white-space: pre-wrap;
	border: 1px solid #223046;
	border-radius: 10px;
	margin: 8px 0;
	background: var(--col1);
	color: #eee;
	padding: .5rem;
}

details > summary {
	cursor: pointer;
	list-style: none;
}
details > summary::-webkit-details-marker {
display:none
}
.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}
.tag {
	font-size: 12px;
	background: var(--col1);
	border: 1px solid #223046;
	color: white;
	padding: 0 .5rem;
	border-radius: 999px;
}
.pill {
	display: inline-block;
	border-radius: 999px;
	font-weight: 600;
	padding: 0 .5rem;
	width: max-content;
}
.ok {
	background: rgba(52,211,153,.18);
	color: #a7f3d0;
	border: 1px solid rgba(52,211,153,.45)
}
.warn {
	background: rgba(245,158,11,.18);
	color: #fde68a;
	border: 1px solid rgba(245,158,11,.45)
}
.bad {
	background: rgba(239,68,68,.18);
	color: #fecaca;
	border: 1px solid rgba(239,68,68,.45)
}
footer {
	border-top: 1px solid #1f2937;
	color: var(--muted);
	margin-top: 30px
}
.readmore
{	justify-self: right;
}
.empty {
	border: 1px dashed #334155;
	border-radius: 16px;
	text-align: center;
	color: var(--muted)
}
ul {
    width: calc(100% - 2rem);
    margin: 1rem 2rem;
}
ul:not(.checks) li {
	font-size: inherit;
}
summary
{	font-weight: normal;
    margin: 0;
}

@media print {
header, .controls {
	display: none
}
article.card {
	break-inside: avoid
}
}

@media (orientation: landscape)
{	.masonry
	{	column-count: 3;
	}
	.controls
	{	grid-template-columns: 1fr auto auto;
	}
}

article.card:has(details[open]) {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 10;
    width: 100vw;
    max-width: 100vw;
    backdrop-filter: brightness(0.5) blur(3px);
    background: transparent;
}

article.card details[open] {
    background: white;
    max-width: 650px;
    margin: auto;
    padding: 2rem;
    border-radius: .5rem;
    overflow-y: scroll;
}

button.close_btn {
    color: var(--col3);
    background: transparent;
    border: navajowhite;
    font-size: 1.5rem;
    float: right;
    top: -3rem;
    position: relative;
    right: -2rem;
	display:none;
}

details[open] .close_btn
{	display: block;
}

span.read-more {
    display: inline-block;
    margin-top: 1rem;
}
details[open] span.read-more
{	display: none;
}

.types {
    display: flex
;
    gap: 0.25rem;
    flex-wrap: wrap;
}