/* 1Kamas job guides (Monter <métier> 200): compact tables, copyable resources, section titles. Scoped to
   articles that hold resource lists (.prose-1k:has(td > ul)), so the other articles keep their look. */

/* Article additions proposed for the blog (demo only): small item icons in tables, fold-out blocks, a quiet callout */
/* Same parent chain as the blog's own image rule, plus the table cell, so it wins only inside tables */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k:has(td > ul) :is(td, th) img { display: inline-block; width: 28px; height: 28px; margin: 0 8px 0 0; vertical-align: middle; border-radius: 0; }
.prose-1k:has(td > ul) td { vertical-align: middle; }
.prose-1k:has(td > ul) blockquote { margin: 24px 0; padding: 14px 18px; border-left: 3px solid rgb(var(--brand)); background: rgb(var(--brand) / .06); border-radius: 0 9px 9px 0; }

/* Fold-out blocks in articles (<details>): proposed for the blog, demo only */
.prose-1k:has(td > ul) details{margin:10px 0;border:1px solid rgb(var(--line));border-radius:14px;background:rgb(var(--surface));overflow:hidden}
.prose-1k:has(td > ul) details>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:12px 18px;font-weight:600;color:rgb(var(--ink))}
.prose-1k:has(td > ul) details>summary::-webkit-details-marker{display:none}
.prose-1k:has(td > ul) details>summary::after{content:"";flex:none;width:9px;height:9px;margin-top:-4px;border-right:2px solid rgb(var(--muted));border-bottom:2px solid rgb(var(--muted));transform:rotate(45deg)}
.prose-1k:has(td > ul) details[open]>summary::after{transform:rotate(-135deg);margin-top:4px}
.prose-1k:has(td > ul) details>summary:hover{background:rgb(var(--brand) / .06)}
.prose-1k:has(td > ul) details[open]>summary{border-bottom:1px solid rgb(var(--line))}
.prose-1k:has(td > ul) details>table{margin:0;width:100%}
@media (prefers-reduced-motion:no-preference){.prose-1k:has(td > ul) details>summary::after{transition:transform .2s}}
@media (min-width:640px){.prose-1k:has(td > ul) details>table{display:table}}

/* Section titles in articles: the site's display font (Rajdhani, like .section-title) and the brand bar of the legal pages */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k:has(td > ul) h2 { display: flex; align-items: center; gap: 12px; margin: 56px 0 16px; font-family: var(--font-rajdhani), var(--font-inter), sans-serif; font-size: 28px; line-height: 34px; font-weight: 700; }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k:has(td > ul) h2::before { content: ""; flex: none; width: 5px; height: 26px; border-radius: 999px; background: rgb(var(--brand)); }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k:has(td > ul) > h2:first-child { margin-top: 0; }

/* First column of article tables: the icon is tied to its name by a no-break space in the text (the name may wrap);
   under it, a small line with the levels and the number of crafts */
/* hanging indent: a wrapped recipe name lines up with its first word, not under the icon (28 px + 8 px gap) */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k:has(td > ul) table:has(td > ul) td:first-child { padding-left: 50px; text-indent: -36px; }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k:has(td > ul) td:first-child > span { display: block; margin: 2px 0 0; text-indent: 0; color: rgb(var(--muted)); font-size: 13px; line-height: 18px; white-space: nowrap; }

/* Resources in article tables: one line each, "129× [icon] Name" (a list in the cell). The name is
   selected in one click (CSS); with the blog script, a click on the line copies it and says "Copié"
   (no copy glyph: the sentence above the table says it, which also works on phones) */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k:has(td > ul) td > ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: -4px -8px; padding: 0; list-style: none; }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k:has(td > ul) td > ul > li { position: relative; display: flex; align-items: center; gap: 6px; min-height: 26px; margin: 0; padding: 2px 6px; border-radius: 9px; }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k:has(td > ul) td > ul > li > span:first-child { flex: none; min-width: 2.6em; text-align: right; color: rgb(var(--muted)); font-variant-numeric: tabular-nums; }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k:has(td > ul) td > ul > li img { flex: none; width: 22px; height: 22px; margin: 0; }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k:has(td > ul) td > ul > li > span:last-child { min-width: 0; }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k:has(td > ul) td > ul > li kbd { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: rgb(var(--ink)); font: inherit; font-weight: 500; -webkit-user-select: all; user-select: all; }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k:has(td > ul) td > ul > li em { margin-left: 2px; color: rgb(var(--muted)); font-size: 12px; font-style: normal; white-space: nowrap; }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k:has(td > ul) td > ul > li[role="button"] { cursor: pointer; }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k:has(td > ul) td > ul > li[role="button"] kbd { -webkit-user-select: text; user-select: text; }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k:has(td > ul) td > ul > li[role="button"]:is(:hover, :focus-visible) { background: rgb(var(--brand) / .07); }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k:has(td > ul) td > ul > li[role="button"]:focus-visible { outline: 2px solid rgb(var(--brand) / .55); outline-offset: -2px; }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k:has(td > ul) td > ul > li[data-k1-copied]::after { content: attr(data-k1-copied); position: absolute; top: 50%; right: 6px; transform: translateY(-50%); padding: 0 8px; border-radius: 999px; border: 1px solid rgb(var(--line)); background: rgb(var(--surface)); color: rgb(var(--brand)); font-size: 12px; font-weight: 600; line-height: 22px; }
/* Compact resource lists: two resources per line from 768 px (one on phones). In those tables (the ones whose cells
   hold a list), the recipe column is held narrow and the cost never wraps, so the resources get the width */
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k:has(td > ul) table:has(td > ul) td:last-child { white-space: nowrap; }
html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k:has(td > ul) td > ul > li { font-size: 13.5px; line-height: 20px; }
@media (min-width: 768px) { html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k:has(td > ul) td > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 6px; } html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k:has(td > ul) table:has(td > ul) td:first-child { width: 190px; } }
/* Phones: the resources keep a readable width and the table scrolls sideways (the site makes tables scrollable
   blocks); the recipe's level line may wrap and sits under the icon */
@media (max-width: 767px) { html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k:has(td > ul) td > ul { min-width: 220px; } html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k:has(td > ul) td:first-child > span { margin-left: 0; white-space: normal; } html body > .min-h-\[60vh\] > article.bg-canvas > .container-1k > .max-w-content > .max-w-prose > .prose-1k:has(td > ul) table:has(td > ul) td:first-child { min-width: 130px; } }