/* src/publish_core/tags.css — the tag mark of publish (publish 0.9.3, session 1018c; Pascal 2026-10-19: "TagChef has to be nicer, with tag
   marks looking like tag marks (take a look on Blockly…)"). A tag is drawn as a luggage tag: a pointed head in the colour of its TagChef
   root with a punched hole, then a calm label "root › leaf" (the root muted). The colour is never the only carrier: the root is text.
   One source: renderer.py inlines the block between tags:begin and tags:end into the built-in pages (/style.css); this file is served
   at /_gwydion/tags.css for a project's own pages (a site's card script), where the fallbacks below stand in for the kit's roles.
   version: 0.2.0 · created 2026-10-19 by Pascal Ehlig, ITS · edited 2026-10-23 by Pascal Ehlig, ITS
   0.2.0 (publish 0.9.15, session 1018c, 1018c-Q137 a): in the filter shelf a mark wraps inside its column (a long leaf breaks, the count
   never leaves the mark), so a narrow filter column keeps every label and number readable.
   0.1.0 (publish 0.9.3): the mark (.gw-tag, list .gw-tags), the root tones t0…t4 and tn (no root) on the kit's roles only, the toggle
   state (aria-pressed / aria-current: the action colour and a check mark whose room is always kept — no layout jump), visible focus,
   forced colours, reduced motion. Contrast (computed for the kit's Gwydion theme and the friendly-apps site, light and dark): label text
   on the tint ≥ 12.5:1, the muted root ≥ 6.0:1, the head against the surface ≥ 3.7:1, a pressed label ≥ 6.4:1. */
/* the fallbacks of the roles for a page without the kit: in a layer, so every role a page or the kit sets (unlayered) wins */
@layer gw-tag-fallback{:root{--c-text:#18211c;--c-muted:#4f5a52;--c-surface:#fff;--c-sunken:#e9ece2;--c-action:#2c6a4c;--c-on-action:#fff;
--c-focus:#2c6a4c;--c-info:#2c5b7a;--c-info-bg:#e5eef4;--c-ok:#1e6b45;--c-ok-bg:#e2f2e8;--c-warn:#7a5200;--c-warn-bg:#fbf0d9;--c-series-1:#2a78d6;
--c-series-7:#4a3aa7;--c-link:#2c6a4c;--c-border:#cfd5c4;--radius-control:8px;--font:system-ui,sans-serif}}
/* tags:begin — the rules of the tag mark, shared with the built-in pages (renderer.py inlines this block; keep it free of :root and of colours) */
.gw-tags{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .45rem;list-style:none;margin:.5rem 0 0;padding:0}
.gw-tags>li{margin:0;padding:0;max-width:100%;min-width:0}
.gw-tag{--tag-c:var(--c-muted);--tag-bg:var(--c-sunken);position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:.2em;
box-sizing:border-box;max-width:100%;min-width:0;min-height:1.75rem;margin:0;padding:.15rem .6rem .15rem 1.4rem;border:0;border-radius:0;background:none;
color:var(--c-text);font:500 .8rem/1.3 var(--font);letter-spacing:0;text-align:left;text-decoration:none;white-space:nowrap;vertical-align:middle}
.gw-tag::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:0 var(--radius-control) var(--radius-control) 0;
background:linear-gradient(90deg,var(--tag-c) 0 .95rem,var(--c-surface) .95rem 1.05rem,var(--tag-bg) 1.05rem);clip-path:polygon(.6rem 0,100% 0,100% 100%,.6rem 100%,0 50%)}
.gw-tag::after{content:"";position:absolute;left:.48rem;top:50%;width:.3rem;height:.3rem;margin-top:-.15rem;border-radius:50%;background:var(--c-surface)}
.gw-tag-root,.gw-tag-sep{color:var(--c-muted);font-weight:400}.gw-tag-sep{padding:0 .1em}
.gw-tag-mid{min-width:0;overflow:hidden;text-overflow:ellipsis}.gw-tag-leaf{font-weight:600;flex:none}.gw-tag-tn .gw-tag-leaf{font-weight:500}
.gw-tag-n{margin-left:.3rem;font-weight:400;font-variant-numeric:tabular-nums;color:var(--c-muted)}
.gw-tag-t0{--tag-c:var(--c-info);--tag-bg:var(--c-info-bg)}.gw-tag-t1{--tag-c:var(--c-ok);--tag-bg:var(--c-ok-bg)}
.gw-tag-t2{--tag-c:var(--c-warn);--tag-bg:var(--c-warn-bg)}.gw-tag-t3{--tag-c:var(--c-series-7);--tag-bg:var(--c-sunken)}
.gw-tag-t4{--tag-c:var(--c-series-1);--tag-bg:var(--c-sunken)}
a.gw-tag,button.gw-tag{min-height:2rem;cursor:pointer;transition:color .12s ease-out}
a.gw-tag:hover .gw-tag-leaf,button.gw-tag:hover .gw-tag-leaf{text-decoration:underline;text-underline-offset:2px}
a.gw-tag:focus-visible,button.gw-tag:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
a.gw-tag .gw-tag-leaf::after,button.gw-tag .gw-tag-leaf::after{content:"✓"/"";display:inline-block;width:1em;margin-left:.2em;visibility:hidden}
.gw-tag[aria-pressed="true"],.gw-tag[aria-current="true"]{color:var(--c-on-action)}
.gw-tag[aria-pressed="true"]::before,.gw-tag[aria-current="true"]::before{background:linear-gradient(90deg,var(--tag-c) 0 .95rem,var(--c-surface) .95rem 1.05rem,var(--c-action) 1.05rem)}
.gw-tag[aria-pressed="true"] :is(.gw-tag-root,.gw-tag-sep,.gw-tag-n),.gw-tag[aria-current="true"] :is(.gw-tag-root,.gw-tag-sep,.gw-tag-n){color:var(--c-on-action)}
.gw-tag[aria-pressed="true"] .gw-tag-leaf::after,.gw-tag[aria-current="true"] .gw-tag-leaf::after{visibility:visible}
.gw-tagfilter{display:grid;gap:.6rem;margin:.75rem 0 0}.gw-tagfilter>h2{margin:0}.gw-tagfilter-root .gw-tags{margin:0}
.gw-tagfilter .gw-tag{white-space:normal;overflow-wrap:break-word}.gw-tagfilter .gw-tag-mid{overflow:visible}
.gw-tagfilter .gw-tag-leaf{flex:0 1 auto;min-width:auto}.gw-tagfilter .gw-tag-n{flex:none}
.gw-tagfilter-head{margin:0 0 .25rem;font-size:.8rem;font-weight:600;color:var(--c-muted)}
.gw-tagfilter-more>summary{cursor:pointer;padding:.35rem 0}
.gw-tagfilter-more>summary:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}.gw-tagfilter-more[open]>summary{margin-bottom:.35rem}
.gw-tagfilter-clear{justify-self:start;font:inherit;font-size:.85rem;color:var(--c-link);background:none;border:1px solid var(--c-border);
border-radius:var(--radius-control);min-height:2rem;padding:0 .75rem;cursor:pointer}.gw-tagfilter-clear:disabled{color:var(--c-muted);cursor:default}
.tg-cell .gw-tags{flex-wrap:nowrap;margin:0;overflow:hidden}.tg-cell>.gw-tag,.tg-cell>span>.gw-tag{vertical-align:middle}
@media (prefers-reduced-motion:reduce){a.gw-tag,button.gw-tag{transition:none}}
@media (forced-colors:active){.gw-tag{border:1px solid CanvasText}.gw-tag::before,.gw-tag::after{display:none}
.gw-tag[aria-pressed="true"],.gw-tag[aria-current="true"]{border-width:3px}}
/* tags:end */