/* media.css — styles owned by the content authors (see site/README.md). styles.css stays untouched. */

/* ---------------------------------------------------------------- /media/: category filter
   Radio chips generated by the build (<fieldset class="media-filter">, cards carry data-category="<n>").
   Every article stays in the HTML; a checked chip only hides the other cards. Without :has() the filter is hidden. */
.media-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-width:0;margin:0 0 40px;padding:0;border:0}
.media-filter legend{padding:0}
.media-filter input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.media-filter label{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:9px 17px;border:1px solid var(--line);border-radius:99px;background:#fff;color:#4f4a55;font-size:14px;line-height:1.2;cursor:pointer;transition:background-color .25s,border-color .25s,color .25s,transform .25s cubic-bezier(.2,.8,.2,1)}
.media-filter label span{font-size:12px;color:#6f6a75;transition:color .25s}
.media-filter label:hover{border-color:#d8c2ea;color:var(--ink)}
.media-filter label:active{transform:scale(.97)}
.media-filter input:checked+label{border-color:var(--ink);background:var(--ink);color:#fff}
.media-filter input:checked+label span{color:#d9fb68}
.media-filter input:focus-visible+label{outline:3px solid #aa72ed;outline-offset:3px}
.media-list:has(#media-filter-1:checked) .media-card:not([data-category="1"]),
.media-list:has(#media-filter-2:checked) .media-card:not([data-category="2"]),
.media-list:has(#media-filter-3:checked) .media-card:not([data-category="3"]),
.media-list:has(#media-filter-4:checked) .media-card:not([data-category="4"]),
.media-list:has(#media-filter-5:checked) .media-card:not([data-category="5"]),
.media-list:has(#media-filter-6:checked) .media-card:not([data-category="6"]),
.media-list:has(#media-filter-7:checked) .media-card:not([data-category="7"]),
.media-list:has(#media-filter-8:checked) .media-card:not([data-category="8"]){display:none}
.media-list:has(.media-filter input:not([value="0"]):checked) .media-grid>.media-card{grid-column:auto}
@media(min-width:601px){.media-list:has(.media-filter input:not([value="0"]):checked) .media-grid>:first-child .media-card-title{font-size:26px}}
.media-list:has(.media-filter input:not([value="0"]):checked) .media-card{animation:media-card-in .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes media-card-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@supports not selector(:has(*)){.media-filter{display:none}}

/* /media/ grid: a last card that would sit alone in its row becomes a wide card (only while no filter is on) */
@media(min-width:901px){.media-list:not(:has(.media-filter input:not([value="0"]):checked)) .media-grid>.media-card:not(:first-child):last-child:nth-child(3n){grid-column:1/-1}
.media-list:not(:has(.media-filter input:not([value="0"]):checked)) .media-grid>.media-card:not(:first-child):last-child:nth-child(3n) .media-card-link{flex-direction:row}
.media-list:not(:has(.media-filter input:not([value="0"]):checked)) .media-grid>.media-card:not(:first-child):last-child:nth-child(3n) .media-card-cover{flex:0 0 50%}
.media-list:not(:has(.media-filter input:not([value="0"]):checked)) .media-grid>.media-card:not(:first-child):last-child:nth-child(3n) .media-card-body{justify-content:center;padding:36px 40px}
.media-list:not(:has(.media-filter input:not([value="0"]):checked)) .media-grid>.media-card:not(:first-child):last-child:nth-child(3n) .media-card-title{font-size:34px}
.media-list:not(:has(.media-filter input:not([value="0"]):checked)) .media-grid>.media-card:not(:first-child):last-child:nth-child(3n) .media-card-more{margin-top:12px}}
@media(min-width:601px) and (max-width:900px){.media-list:not(:has(.media-filter input:not([value="0"]):checked)) .media-grid>.media-card:not(:first-child):last-child:nth-child(2n){grid-column:1/-1}}

/* ---------------------------------------------------------------- article body */
.article-body>p.source{margin-top:.7em}
.article-body .note{padding:22px 24px;border-radius:20px}
.article-body .note .demo-label{margin:-2px 8px 0 0;background:#fff}
.article-body ul.checklist{display:grid;gap:12px;padding:24px 26px;border-radius:22px;background:#f5f0fa;list-style:none}
.article-body ul.checklist li{position:relative;margin:0;padding-left:38px}
.article-body ul.checklist li:before{content:'';position:absolute;left:0;top:.18em;width:24px;height:24px;border:1.5px solid #cdb5e0;border-radius:8px;background:#fff}
.article-body ul.checklist li:after{content:'';position:absolute;left:9px;top:calc(.18em + 5px);width:6px;height:11px;border:solid #8e62b1;border-width:0 2.2px 2.2px 0;transform:rotate(45deg)}
.article-body ol{padding-left:0;list-style:none;counter-reset:step}
.article-body ol>li{position:relative;padding-left:46px;counter-increment:step}
.article-body ol>li:before{content:counter(step);position:absolute;left:0;top:.12em;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#d9fb68;font:500 14px/30px var(--font);text-align:center}
/* Tables sit in a focusable scroll region (added by the build); a shadow on the right shows that more columns follow. */
.article-body .table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:20px;background:linear-gradient(to left,#fff 40%,#fff0) right center/44px 100% no-repeat local,linear-gradient(to left,#3b22581a,#3b225800) right center/18px 100% no-repeat scroll,#fff}
.article-body .table-scroll:focus-visible{outline:3px solid #aa72ed;outline-offset:4px}
.article-body .table-scroll>table{display:table;width:100%;overflow:visible;border:0;background:none}
.article-body table{border:1px solid var(--line);border-collapse:separate;border-spacing:0;border-radius:20px;background:#fff}
.article-body th,.article-body td{padding:13px 18px;border-bottom:1px solid var(--line)}
.article-body tbody tr:last-child>*{border-bottom:0}
.article-body thead th{background:#f6f2fa;color:var(--ink);font-weight:500}
.article-body thead th:first-child{border-top-left-radius:19px}
.article-body thead th:last-child{border-top-right-radius:19px}
.article-body tbody th{color:var(--ink);font-weight:500}
.article-body .roles-table th,.article-body .roles-table td{padding:12px 14px;white-space:nowrap}
.article-body .roles-table td{text-align:center}
.article-body .roles-table .yes{color:#3f5a14;font-weight:500}
.article-body .roles-table .yes:before{content:'';display:inline-block;width:8px;height:8px;margin:0 7px 1px 0;border-radius:50%;background:#b6d65a}
.article-body .roles-table .read{color:#6e4591}
.article-body .roles-table .no{color:#6f6a75}
.article-cover{background:#f0eeeb}

@media(min-width:900px){.article-body table{display:table;width:100%}}
@media(max-width:899px){.article-body .table-scroll tbody th:first-child,.article-body .table-scroll thead th:first-child{position:sticky;left:0;z-index:1;background:#fff;box-shadow:inset -1px 0 0 var(--line)}
.article-body .table-scroll thead th:first-child{background:#f6f2fa}}
@media(max-width:600px){.media-filter{justify-content:flex-start;gap:6px;margin-bottom:28px}
.media-filter label{min-height:40px;padding:8px 14px;font-size:13px}
.article-body ul.checklist{padding:20px 18px;gap:10px}
.article-body ul.checklist li{padding-left:34px}
.article-body ol>li{padding-left:42px}
.article-body th,.article-body td{padding:11px 14px}
.article-body .note{padding:18px}}
@media(prefers-reduced-motion:reduce){.media-list .media-card,.media-list:has(.media-filter input:checked) .media-card{animation:none}.media-filter label{transition:none}}
.motion-paused .media-list .media-card{animation:none!important}