/* ==================================================================== */
/* App layer: Yggdrasil v4. Tokens only, except the night ground and    */
/* the task-kind palette (both candidates for the skill).                */
/* ==================================================================== */

:root {
  /* Night variant of the moss canvas: the panorama fades into it. */
  --color-bg-canvas: #05090B;
  /* Task-kind categorical palette (candidates for tokens.css). Worst pair
     OKLab dE 15 normal and deuteranopia; >= 11 from clay, ok, warn, danger. */
  --kind-blue: #4F86FF;
  --kind-cyan: #7FE6E0;
  --kind-cream: #F2E3B3;
  --kind-orchid: #CB86DC;
  --kind-sea: #409573;

  --hero-h: clamp(300px, 60vh, 600px);
  --hero-overlap: var(--space-10);
}

body { min-height: 100dvh; display: flex; flex-direction: column; }

.yg-sum { display: flex; align-items: center; gap: var(--space-4); }
.yg-odin {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--control-h); padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg-raised) 85%, transparent); color: var(--color-text-primary);
}
.yg-odin { white-space: nowrap; }
.yg-odin__name { font-family: var(--font-display); font-size: var(--font-size-display-md); line-height: 1; }
.yg-odin__eye { color: var(--color-warn); }

/* ---- panorama ---- */
.yg-hero { user-select: none; -webkit-user-select: none; position: relative; height: var(--hero-h); overflow: hidden; background: linear-gradient(#03050B, #05090B); container-type: size; }
.yg-hero > img {
  --pano-box: 100cqh;
  --pano-h: max(var(--pano-box), min(100cqw, 1920px) * 0.325, 100cqw * 0.1586);
  position: absolute; left: 50%; bottom: 0; translate: -50% 0;
  height: var(--pano-h); width: calc(var(--pano-h) * 6.3077); display: block; max-width: none;
}

/* ---- site shell: mead-drop hover on the header mark ---- */
.siteheader__mark { color: var(--color-text-primary); }
.siteheader__mark svg { overflow: visible; }
.siteheader__mark g > path:last-child, .mead-drop { fill: var(--accent, #e3a83f); transform-box: fill-box; transform-origin: 50% 0; }
@media (prefers-reduced-motion: no-preference) {
  .siteheader__home:hover .siteheader__mark g > path:last-child, .siteheader__home:focus-visible .siteheader__mark g > path:last-child { animation: mead 2.6s infinite; }
}
@keyframes mead {
  0%   { transform: translateY(0) scale(1);        opacity: 1; animation-timing-function: ease-out; }
  42%  { transform: translateY(0) scale(1.25);     opacity: 1; animation-timing-function: ease-in; }
  65%  { transform: translateY(140px) scale(.9, 1.1); opacity: 0; }
  66%  { transform: translateY(0) scale(0);        opacity: 0; animation-timing-function: ease-out; }
  100% { transform: translateY(0) scale(1);        opacity: 1; }
}

/* == header == */
:root { --wrap: 1360px; --pad: 32px; --bar-h: 72px; --dock: 32px; --badge: 176px; }
@media (max-width: 639px) { :root { --pad: 16px; --bar-h: 56px; --dock: 26px; --badge: 112px; } }
.siteheader {
  flex-wrap: nowrap; gap: var(--space-4); min-height: var(--bar-h); padding: 0 max(var(--pad), calc((100% - var(--wrap)) / 2));
  background: var(--color-bg-canvas); border-bottom: 0;
}
.siteheader__home { margin-inline-end: auto; }
.siteheader__mark { width: var(--dock); height: var(--dock); margin-inline-start: calc(var(--dock) * -0.2); }
.siteheader__wordmark { font-size: 1.125rem; white-space: nowrap; }
.siteheader__nav { flex-wrap: nowrap; gap: 0 12px; margin: 0; }
.siteheader__nav a { position: relative; padding: var(--space-2) 8px; }
@media (min-width: 640px) { .siteheader__nav a { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; } }
/* the current-page underline takes the page hue (set on <main> by inner pages) */
body:has(main.yg-hue-teal) { --page-h: var(--hue-teal); } body:has(main.yg-hue-green) { --page-h: var(--hue-green); }
body:has(main.yg-hue-gold) { --page-h: var(--hue-gold); } body:has(main.yg-hue-violet) { --page-h: var(--hue-violet); }
body:has(main.yg-hue-rose) { --page-h: var(--hue-rose); }
.siteheader__nav a[aria-current="page"] { border-bottom-color: var(--page-h, var(--color-accent-mark)); }
.siteheader__actions { display: flex; align-items: center; gap: var(--space-3); }
.siteheader a:focus-visible, .siteheader__menubtn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 2px; }
/* design-system gap: no outline button variant; "Come in" is a quiet outline */
.btn--outline { border: 1px solid var(--color-border-control); background: transparent; color: var(--color-text-primary); }
.btn--outline:hover { border-color: var(--color-text-tertiary); background: var(--color-bg-surface); }
@media (scripting: enabled) {
  .siteheader {
    position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--bar-h); background: transparent;
  }
  html { scroll-padding-top: calc(var(--bar-h) + var(--space-4)); }
  /* soft fade, only once content passes under the bar */
  .siteheader::before {
    content: ""; position: absolute; inset: 0 0 auto 0; z-index: -1; height: calc(var(--bar-h) + 56px); pointer-events: none;
    background: linear-gradient(to bottom, var(--color-bg-canvas) calc(var(--bar-h) - 12px), transparent);
    opacity: 0; transition: opacity .3s var(--ease-standard);
  }
  .siteheader[data-faded]::before { opacity: 1; }
  /* over the open sky: a faint scrim so stars do not sit on the nav letters */
  .siteheader::after {
    content: ""; position: absolute; inset: 0 0 auto 0; z-index: -1; height: calc(var(--bar-h) + 24px); pointer-events: none;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bg-canvas) 45%, transparent), transparent);
    transition: opacity .3s var(--ease-standard);
  }
  .siteheader[data-faded]::after { opacity: 0; }
  /* the mark and wordmark appear when the hero badge has docked into the bar */
  .siteheader__home { pointer-events: none; visibility: hidden; transition: visibility 0s linear .2s; }
  .siteheader__mark { opacity: 0; }
  .siteheader__wordmark { opacity: 0; transition: opacity .2s; }
  .siteheader[data-docked] .siteheader__home { pointer-events: auto; visibility: visible; transition-delay: 0s; }
  .siteheader[data-docked] .siteheader__mark, .siteheader[data-docked] .siteheader__wordmark { opacity: 1; }
  body:not(:has([data-hero])) { padding-top: var(--bar-h); }
}
@media (max-width: 639px) {
  .siteheader { gap: var(--space-3); }
  /* one height and radius for both buttons; Menu is the quiet one */
  .siteheader__action, .siteheader[data-nav] .siteheader__menubtn { min-height: 44px; border-radius: var(--radius-md); }
  .siteheader[data-nav] .siteheader__menubtn { margin: 0; padding-inline: 16px; border-color: var(--color-border-default); border-radius: var(--radius-full); }
  .siteheader[data-nav] .siteheader__nav {
    position: absolute; top: calc(100% + 4px); left: 12px; right: 12px; flex-basis: auto; padding: var(--space-2) var(--space-5);
    border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-raised);
  }
  .siteheader[data-nav] .siteheader__nav a { padding: 14px 0; border-top: 1px solid var(--color-border-default); border-bottom: 0; }
  .siteheader[data-nav] .siteheader__nav a:first-child { border-top: 0; }
  .siteheader__wordmark { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) { .siteheader, .siteheader::before, .siteheader::after, .siteheader__wordmark { transition: none; } }

/* ---- layout ---- */
.yg-main { position: relative; flex: 1 0 auto; padding-top: 0; }
.yg-hero + .yg-main { margin-top: calc(var(--hero-overlap) * -1); }
/* Centred wrapping rows of fixed-width cards, so an incomplete last row is centred too (no-JS fallback). */
.yg-grid { --pack-w: 336px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); align-items: flex-start; }
.yg-grid > * { flex: 0 0 var(--pack-w); max-width: 100%; min-width: 0; }
.yg-realms + .yg-realms { margin-top: var(--space-8); }
.yg-realms .sectionhead { margin-bottom: var(--space-3); }
.yg-realms .sectionhead__title { color: var(--color-text-primary); text-shadow: 0 1px 6px var(--color-bg-canvas); }
.yg-realms .sectionhead__count { color: var(--color-text-secondary); }
/* pack.js (>= 768px): dense grid, 2 tracks per card column; the script sets --pack-n/--pack-row and each card's grid area */
@media (min-width: 768px) {
  .yg-grid.js-pack {
    display: grid; grid-template-columns: repeat(var(--pack-n), calc((var(--pack-w) - var(--space-4)) / 2));
    grid-auto-rows: var(--pack-row); align-items: stretch;
  }
  .js-pack > * { max-width: none; }
}
@media (max-width: 1199px) { .yg-upd__more { display: none; } }
@media (max-width: 767px) {
  :root { --hero-h: 380px; --hero-overlap: var(--space-8); }
  .yg-grid > * { flex-basis: 100%; }
  .yg-main { padding: 0 var(--space-4) var(--space-4); }
  .yg-sum { display: none; }
  .yg-odin { padding: 0 var(--space-2); gap: var(--space-1); }
  .yg-odin__name { font-size: var(--font-size-md); }
}
/* the Hall header (brand + pill + Sign out + Menu) does not fit a phone; Sign out already says you are signed in */
@media (max-width: 479px) { .yg-odin { display: none; } .siteheader { gap: var(--space-2); } .siteheader__wordmark { font-size: 1rem; } }

/* ---- app card: a Seedling card, shaded over the sky ---- */
.yg-card {
  position: relative; gap: var(--space-3); padding: var(--space-4);
  background: color-mix(in srgb, var(--color-bg-surface) 90%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
  container: yg-card / inline-size;
}
.yg-card__head { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: var(--space-2) var(--space-3); min-width: 0; }
.yg-card__head .card__icon { width: 40px; height: 40px; margin: 0; flex-shrink: 0; border-radius: var(--radius-md); }
.yg-card--app .card__icon { background: color-mix(in srgb, var(--h) 16%, var(--color-bg-raised)); color: color-mix(in srgb, var(--h) 65%, white); }
.yg-card__id { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: min-content; flex: 1 1 0; min-height: 40px; }
.yg-card__head .card__title { margin: 0; line-height: 1.15; }
.yg-card__link { color: var(--color-text-primary); text-decoration: none; }
.yg-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.yg-card__arrow { display: inline-block; vertical-align: -1px; margin-left: 3px; color: var(--color-text-tertiary); transition: color var(--duration-fast), transform var(--duration-fast) var(--ease-standard); }
.yg-card:hover .yg-card__link, .yg-card__link:focus-visible {
  color: var(--color-ember-bright); text-decoration: underline; text-decoration-color: var(--color-link-underline);
  text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.yg-card:hover .yg-card__arrow, .yg-card__link:focus-visible .yg-card__arrow { color: var(--color-ember); transform: translate(1px, -1px); }
.yg-card__link:focus-visible { outline: none; }
.yg-card:has(.yg-card__link:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.yg-nowrap { white-space: nowrap; }
.yg-card__sub { display: flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.yg-card__sub--vis { font-size: var(--font-size-2xs); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: var(--color-text-tertiary); }
.yg-card .card__body { line-height: var(--line-height-normal); }
.yg-card__row { display: flex; align-items: flex-end; gap: var(--space-3); }
.yg-card__row .card__body { flex: 1 1 0; min-width: 0; margin: 0; }
.yg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.yg-edge { flex-shrink: 0; gap: var(--space-1); min-height: 0; padding: 0; margin-bottom: 5px; position: relative; z-index: 1; }

/* top-right corner: (Odin only) update notice and admin button; at most half the card wide, on the title row */
.yg-corner { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); flex-shrink: 0; margin-left: auto; max-width: 50cqw; position: relative; z-index: 1; }
.yg-corner:empty { display: none; }
.yg-upd { align-items: flex-start; padding: 3px var(--space-2) 4px; line-height: 1.3; text-align: left; text-transform: none; letter-spacing: 0; font-size: var(--font-size-xs); }
.yg-upd svg { margin-top: 2px; }
.yg-upd__txt { display: flex; flex-direction: column; }
.yg-upd__ver { font-variant-numeric: tabular-nums; color: var(--color-text-primary); white-space: nowrap; }
/* long tags or a narrow card: icon + "→ target" only; the target is never cut */
.yg-upd--long .yg-upd__lbl, .yg-upd--long .yg-upd__cur { display: none; }
@container yg-card (max-width: 290px) { .yg-upd__lbl, .yg-upd__cur, .yg-upd__more { display: none; } }
.yg-admin { position: relative; z-index: 1; }

  padding-inline: 0; border-top: 1px solid var(--color-border-subtle); border-radius: 0; cursor: default; }
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: var(--font-size-2xs); line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }

.sitefooter { padding-inline: max(var(--pad), calc((100% - var(--wrap)) / 2)); }


.yg-cal { max-width: 960px; margin: 0 auto; display: grid; gap: var(--space-4); }
.yg-cal .sectionhead { margin-bottom: 0; }
.yg-form { max-width: 640px; }
.yg-form__form { display: grid; gap: var(--space-4); }
.yg-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.yg-form__reminders { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.yg-form__more > summary { cursor: pointer; font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.yg-form__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.yg-form__cancel { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-4); border-top: 1px solid var(--color-border-subtle); }
@media (min-width: 2200px) { .yg-form { max-width: 800px; } }
@media (max-width: 480px) { .yg-form__row { grid-template-columns: minmax(0, 1fr); } }
/* == cards == */
:root { --hue-teal: #7CBEC6; --hue-green: #8CCF9A; --hue-gold: #E3A83F; --hue-violet: #A99BE0; --hue-rose: #DA8F82; }
.yg-hue-teal { --g: var(--hue-teal); --h: var(--hue-teal); } .yg-hue-green { --g: var(--hue-green); --h: var(--hue-green); }
.yg-hue-gold { --g: var(--hue-gold); --h: var(--hue-gold); } .yg-hue-violet { --g: var(--hue-violet); --h: var(--hue-violet); }
.yg-hue-rose { --g: var(--hue-rose); --h: var(--hue-rose); }
:where(.yg-group) { --g: var(--hue-teal); }
.yg-group { margin-bottom: 104px; }
/* Group titles: the one deliberate exception to "no glow": soft static glow in the group hue, titles only. */
.yg-group > h2 {
  display: flex; align-items: center; gap: 16px; margin: 0 0 32px; font-family: var(--font-display); font-weight: 400; font-size: 2.25rem; line-height: 1.1;
  letter-spacing: var(--letter-spacing-display); color: color-mix(in srgb, var(--g) 35%, white);
  text-shadow: 0 0 18px color-mix(in srgb, var(--g) 70%, transparent), 0 0 44px color-mix(in srgb, var(--g) 40%, transparent);
}
.yg-group > h2::before { content: ""; flex: none; width: 12px; height: 12px; background: var(--g); transform: rotate(45deg); box-shadow: 0 0 14px color-mix(in srgb, var(--g) 80%, transparent); }
.yg-group > h2::after { content: ""; flex: 1; height: 1px; margin-inline-start: 8px; background: linear-gradient(to right, color-mix(in srgb, var(--g) 70%, transparent), color-mix(in srgb, var(--g) 18%, transparent) 55%, transparent); }
.yg-cards { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.yg-card--large { grid-column: span 6; }
.yg-card--small { grid-column: span 3; }
.yg-card {
  --h: var(--g); position: relative; display: flex; flex-direction: column; gap: 16px; padding: 32px;
  border: 1px solid color-mix(in srgb, var(--h) 22%, var(--color-border-default)); border-top: 4px solid var(--h); border-radius: var(--radius-lg);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--h) 9%, var(--color-bg-raised)), var(--color-bg-raised) 70%);
  transition: transform .2s var(--ease-standard), border-color .2s;
}
/* components.css .card--link:hover resets the border to 1px, which shrinks the card by 3px and pulls what is beneath up */
.yg-card.card--link:hover { border-width: 1px; border-top-width: 4px; }
.yg-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--h) 55%, transparent); border-top-color: var(--h); }
.yg-card__head { display: flex; align-items: center; gap: 12px; }
.yg-card :is(h2, h3) { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; letter-spacing: var(--letter-spacing-display); }
.yg-card--large :is(h2, h3) { font-size: 1.5rem; }
.yg-card p { margin: 0; color: var(--color-text-secondary); font-size: 0.9375rem; line-height: 1.55; }
/* the introduction is the lede */
.yg-home > .yg-group:first-child > .yg-cards > .yg-card--large:first-child > p { font-size: 1.5rem; line-height: 1.55; color: var(--color-text-primary); }
/* cards in a row share a bottom edge; the tags (or link) sit at the bottom of a taller card */
.yg-home .yg-card > .yg-tags { margin-top: auto; }
.yg-home .yg-card > .yg-tags + .yg-card__go { margin-top: 0; }
/* a sparse list card keeps its tags under the list; the spare height falls at the bottom */
.yg-home .yg-card__list + .yg-tags { margin-top: 0; }
.yg-home .yg-card--large:has(.yg-card__link, .yg-card__go) > .yg-tags { margin-top: auto; }
.yg-card time { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.yg-mark { flex: none; width: 24px; height: 24px; background: var(--h); }
.yg-mark--diamond { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.yg-mark--leaf { border-radius: 100% 0 100% 0; }
.yg-mark--horn { clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); }
.yg-mark--tri { clip-path: polygon(50% 5%, 100% 95%, 0 95%); }
.yg-mark--dot { border-radius: 50%; }
.yg-mark--hex { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.yg-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 8px 0 0; list-style: none; }
.yg-tag {
  padding: 3px 12px; border: 1px solid color-mix(in srgb, var(--h) 40%, transparent); border-radius: 99px; background: color-mix(in srgb, var(--h) 14%, transparent);
  color: color-mix(in srgb, var(--h) 70%, white); font-size: 0.8125rem; line-height: 1.5; transition: transform .15s var(--ease-standard);
}
.yg-tag:hover { transform: translateY(-2px); }
.yg-tag--hl { --h: var(--hue-gold); background: color-mix(in srgb, var(--h) 24%, transparent); border-color: color-mix(in srgb, var(--h) 70%, transparent); color: color-mix(in srgb, var(--h) 45%, white); }
.yg-card__go { margin-top: auto; color: var(--color-text-primary); font-weight: 600; text-decoration: none; }
.yg-card__go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.yg-card__go:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.yg-card:hover .yg-card__go { color: color-mix(in srgb, var(--h) 60%, white); }
.yg-card__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; color: var(--color-text-primary); }
.yg-card__list li { display: flex; align-items: center; gap: 12px; }
.yg-card__list li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 2px; background: var(--h); transform: rotate(45deg); }
/* four to a row; flex-grow lets an incomplete last row fill the width, whatever the page count */
.yg-tiles { display: flex; flex-wrap: wrap; gap: 24px; margin: 0; padding: 0; list-style: none; }
.yg-tile { --h: var(--hue-teal); flex: 1 1 calc(25% - 18px); min-width: 0; }
.yg-tile--1 { --h: var(--hue-green); } .yg-tile--2 { --h: var(--hue-gold); } .yg-tile--3 { --h: var(--hue-violet); } .yg-tile--4 { --h: var(--hue-rose); }
.yg-tile a { display: block; height: 100%; padding: 24px; border: 1px solid color-mix(in srgb, var(--h) 35%, transparent); border-top: 3px solid var(--h); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--h) 9%, var(--color-bg-raised)); color: var(--color-text-primary); text-decoration: none; transition: transform .2s var(--ease-standard), border-color .2s; }
.yg-tile a:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--h) 60%, transparent); border-top-color: var(--h); }
.yg-tile a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.yg-tile b { display: block; color: color-mix(in srgb, var(--h) 65%, white); font-family: var(--font-display); font-weight: 400; font-size: 1.125rem; }
.yg-tile span { display: block; margin-top: 4px; color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: 1.45; }
/* five tiles fill one row on wide screens instead of four plus a stretched orphan */
@media (min-width: 1200px) { .yg-tile:first-child:nth-last-child(5), .yg-tile:first-child:nth-last-child(5) ~ .yg-tile { flex-basis: calc(20% - 19.2px); } }
@media (max-width: 1199px) { .yg-card--small { grid-column: span 6; } .yg-tile { flex-basis: calc(33.333% - 16px); } }
@media (max-width: 1023px) { .yg-card--large { grid-column: 1 / -1; } }
@media (max-width: 639px) {
  .yg-group { margin-bottom: 56px; }
  .yg-group > h2 { font-size: 1.75rem; margin-bottom: 20px; }
  .yg-cards { gap: 16px; }
  .yg-card { padding: 20px; gap: 12px; }
  .yg-card__go, .yg-group__link { display: inline-flex; align-items: center; min-height: 44px; }
  .yg-card--small, .yg-card--large { grid-column: 1 / -1; }
  .yg-tiles { gap: 16px; }
  .yg-tile { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .yg-card, .yg-tag, .yg-tile a { transition: none; } .yg-card:hover, .yg-tag:hover, .yg-tile a:hover { transform: none; } }
/* == home == */
.yg-main--home { max-width: none; padding: 48px 0 0; }
.yg-home { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }
.yg-home > .yg-group:last-child { margin-bottom: 0; }
.yg-home { padding-bottom: 80px; }

/* == page frame == */
/* Inner pages opt in with {% block main_class %} yg-main--wide yg-hue-<hue>{% endblock %}; --h is then the page hue. */
.yg-main--wide { max-width: none; padding: 48px 0 80px; }
.yg-main--wide > * { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }
.yg-pagehead { margin-bottom: 56px; }
.yg-pagehead h1 {
  display: flex; align-items: center; gap: 16px; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 2.75rem; line-height: 1.1;
  letter-spacing: var(--letter-spacing-display); color: color-mix(in srgb, var(--h) 35%, white);
}
.yg-pagehead h1::before { content: ""; flex: none; width: 14px; height: 14px; background: var(--h, var(--hue-teal)); transform: rotate(45deg); }
.yg-pagehead h1::after { content: ""; flex: 1; height: 1px; margin-inline-start: 8px; background: linear-gradient(to right, color-mix(in srgb, var(--h, var(--hue-teal)) 70%, transparent), color-mix(in srgb, var(--h, var(--hue-teal)) 18%, transparent) 55%, transparent); }
.yg-pagehead__intro { margin: 16px 0 0; max-width: 40rem; color: var(--color-text-secondary); font-size: var(--font-size-lg); line-height: 1.55; }
.yg-main--wide .yg-group:not([class*="yg-hue-"]) { --g: var(--h); }
.yg-group__more { margin: 24px 0 0; } .yg-group__more a, .yg-group__link { color: var(--color-text-primary); font-weight: 600; }
/* Section titles on inner pages are quiet: the glow belongs to the home group titles and the h1 leads. */
.yg-main--wide .yg-group > h2 { font-size: 1.75rem; margin-bottom: 24px; text-shadow: none; color: color-mix(in srgb, var(--g) 25%, white); }
.yg-main--wide .yg-group > h2::before { width: 10px; height: 10px; box-shadow: none; }
@media (max-width: 639px) {
  .yg-main--wide { padding: 32px 0 56px; } .yg-pagehead { margin-bottom: 40px; } .yg-pagehead h1 { font-size: 2rem; }
  .yg-main--wide .yg-group > h2 { font-size: 1.5rem; margin-bottom: 20px; }
  /* open menu: glass like the motto card, on the 16px axis, current page marked */
  .siteheader[data-nav] .siteheader__nav {
    left: var(--space-4); right: var(--space-4); border-color: color-mix(in srgb, white 16%, transparent);
    background: color-mix(in srgb, var(--color-bg-canvas) 80%, transparent); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  }
  .siteheader[data-nav] .siteheader__nav a { font-size: 1rem; border-top-color: color-mix(in srgb, white 10%, transparent); }
  .siteheader[data-nav] .siteheader__nav a[aria-current="page"] {
    color: #fff; text-decoration: underline; text-decoration-color: var(--page-h, var(--hue-teal)); text-decoration-thickness: 2px; text-underline-offset: 8px;
  }
}

/* == cv == */
/* Reuses .yg-group/.yg-card/.yg-tag from the cards block; the page hue (teal) comes from .yg-hue-teal on .cv. */
.cv { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); gap: 56px; align-items: start; padding: 0; max-width: none; }
.cv__id { position: sticky; top: calc(var(--space-6) + 56px); }
.cv__h { margin: 0 0 var(--space-4); font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; color: color-mix(in srgb, var(--g) 35%, white); }
.cv__figures { display: grid; gap: 16px; margin: 0; padding: 0; border: 0; grid-template-columns: 1fr; }
.cv__fig { gap: 4px; padding: 20px 24px; }
.cv__figures > :nth-child(3n+2) { --h: var(--hue-green); } .cv__figures > :nth-child(3n+3) { --h: var(--hue-gold); }
.cv__fig dt { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.1; color: color-mix(in srgb, var(--h) 40%, white); }
.cv__fig dd { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.cv__sec { margin-bottom: 72px; }
.cv__sec > .yg-card + .yg-card { margin-top: 24px; }
.cv__role { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 24px; }
.cv__role > .cv__when { grid-column: 1; grid-row: 1; margin: 0; padding-top: 4px; color: var(--color-text-tertiary); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.cv__role > .cv__body { grid-column: 2; grid-row: 1; }
.cv__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cv__body h3 { font-size: 1.5rem; }
.cv__bullets { margin: 4px 0 0; }
.cv__bullets li { align-items: flex-start; }
.cv__bullets li::before { margin-top: .6em; }
.cv__tools { padding-top: 4px; }
.cv__plain { margin: 0; padding: 0; list-style: none; }
.cv__sec > .cv__plain { padding: 24px 32px; border: 1px solid color-mix(in srgb, var(--h) 22%, var(--color-border-default)); border-top: 4px solid var(--h); border-radius: var(--radius-lg); background: linear-gradient(to bottom, color-mix(in srgb, var(--h) 9%, var(--color-bg-raised)), var(--color-bg-raised) 70%); }
.cv__plain li { display: block; position: relative; padding-left: 18px; }
.cv__plain li::before { position: absolute; left: 0; top: .6em; }
.cv__year { display: inline-block; min-width: 3.5ch; font-variant-numeric: tabular-nums; color: var(--color-text-tertiary); }
.cv__crole { color: var(--color-text-tertiary); }
@media (max-width: 1023px) { .cv { grid-template-columns: minmax(0, 1fr); gap: 40px; } .cv__id { position: static; } .cv__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .cv__figures { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .cv__fig { padding: 12px 10px; gap: 2px; }
  .cv__fig dt { font-size: 1.25rem; }
  .cv__fig dd { font-size: var(--font-size-2xs); line-height: 1.3; }
  .cv__role { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cv__role > .cv__when, .cv__role > .cv__body { grid-column: 1; grid-row: auto; }
  .cv__body h3 { font-size: 1.25rem; }
  .cv__sec > .cv__plain { padding: 20px; }
}
@media print {
  .yg-main--wide { padding: 0; }
  .yg-main--wide > * { width: auto; }
  .yg-pagehead { margin-bottom: 12pt; }
  .yg-pagehead h1 { color: #111; font-size: 20pt; }
  .yg-pagehead h1::before { background: #111; }
  .yg-pagehead h1::after { display: none; }
  .yg-pagehead__intro { color: #333; font-size: 11pt; }
  .cv { display: block; }
  .cv__id { position: static; }
  .cv__h, .cv__sec > h2 { color: #111; text-shadow: none; font-size: 13pt; break-after: avoid; margin: 12pt 0 6pt; }
  .cv__sec > h2::before { background: #111; box-shadow: none; }
  .cv__sec > h2::after { display: none; }
  .cv__sec { margin-bottom: 0; }
  .cv__figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8pt; }
  .yg-card, .cv__sec > .cv__plain { background: none; border: 0; border-top: 1px solid #bbb; border-radius: 0; padding: 8pt 0; transform: none; box-shadow: none; break-inside: avoid; }
  .cv__sec > .cv__plain { border-top: 1px solid #bbb; }
  .cv__fig dt { color: #111; font-size: 14pt; }
  .cv__body h3 { font-size: 12pt; }
  .yg-card__list li::before { background: #111; }
  .cv__tools .yg-tag { border-color: #bbb; background: none; color: #111; }
  .cv__conf { font-size: 9.5pt; }
  .cv__conf li { break-inside: avoid; }
}



/* == links == */
/* Reuses .yg-group/.yg-card/.yg-tile from the cards block; page hue violet. */
.yg-links .yg-group:last-child { margin-bottom: 0; }
.yg-links .yg-group:only-child > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* one group: the card follows the intro */
@media (min-width: 640px) {
  .yg-links .yg-cards > .yg-card--small { grid-column: span 6; padding: 40px; }
  .yg-links .yg-cards > .yg-card--small h3 { font-size: 1.5rem; }
  .yg-links .yg-cards > .yg-card--small p { font-size: 1.0625rem; max-width: 40ch; }
}
.yg-links .handle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; padding: 0; }
.yg-links .handle__text { background: color-mix(in srgb, var(--h) 8%, var(--color-bg-sunken)); border-color: color-mix(in srgb, var(--h) 30%, var(--color-border-default)); }
.yg-links .handle__status { margin: 0; }
.yg-links .handle__copy { position: relative; z-index: 1; border-color: color-mix(in srgb, var(--h) 45%, transparent); }
.yg-links .handle__copy:hover { background: color-mix(in srgb, var(--h) 14%, transparent); }
.yg-links .handle__copy:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.yg-links__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yg-links__static { display: block; height: 100%; padding: 24px; border: 1px solid color-mix(in srgb, var(--h) 35%, transparent); border-top: 3px solid var(--h); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--h) 9%, var(--color-bg-raised)); }
@media (max-width: 1023px) { .yg-links__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .yg-links__tiles { grid-template-columns: 1fr; } }



/* == catalog == */
/* Entries are .yg-card (cards block) in a 12-column list; the page hue comes from .yg-hue-* on main. */
.yg-catalog.catalog { max-width: none; padding: 0; }
.yg-catalog .catalog__search { max-width: 22rem; margin-bottom: 24px; }
.yg-catalog .catalog__search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.yg-catalog .catalog__filter { flex: 1 1 12rem; }
.yg-catalog .yg-card__head { align-items: center; min-height: 40px; }
.yg-catalog .catalog__list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; border: 0; }
.yg-catalog .catalog__item.yg-card { display: flex; padding: 32px; border-bottom: 1px solid color-mix(in srgb, var(--h) 22%, var(--color-border-default)); }
.yg-catalog .catalog__item[hidden] { display: none; }
.yg-catalog .catalog__item:first-child:nth-last-child(2) { grid-column: span 7; }
.yg-catalog .catalog__item:nth-child(2):last-child { grid-column: span 5; }
.yg-catalog .catalog__item:first-child:nth-last-child(n+3) { grid-column: span 6; }
.yg-catalog .catalog__item:nth-child(n+2):nth-last-child(n+2), .yg-catalog .catalog__item:nth-child(n+3):last-child { grid-column: span 3; }
.yg-catalog .catalog__title { flex: 1; }
.yg-catalog .catalog__stage { color: color-mix(in srgb, var(--h) 70%, white); font-size: var(--font-size-sm); }
.yg-catalog .catalog__path { margin: 0; font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--color-text-tertiary); }
.yg-catalog .catalog__desc { font-style: normal; font-size: var(--font-size-base); color: var(--color-text-secondary); }
.yg-catalog .catalog__item--private .catalog__title { color: var(--color-text-primary); }
.yg-catalog .catalog__dates { margin-top: 4px; color: var(--color-text-tertiary); font-size: var(--font-size-sm); }
.yg-catalog .yg-card__go { margin-top: 8px; }
.yg-catalog .catalog__tags li::before { content: none; }
.yg-catalog .catalog__empty { margin-top: 24px; }
@media (max-width: 1199px) { .yg-catalog .catalog__item.yg-card { grid-column: span 6 !important; } .yg-catalog .catalog__item:first-child:nth-last-child(n+3) { grid-column: 1 / -1 !important; } }
@media (max-width: 1023px) { .yg-catalog .catalog__item.yg-card { grid-column: 1 / -1 !important; } }
@media (max-width: 639px) { .yg-catalog .catalog__item.yg-card { padding: 24px; } }

/* == tafl == */
/* Page hue green; cards come from the cards block. Board left, rules and help right at 1440, stacked below 1024. */
.yg-tafl { display: grid; grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); gap: 32px; align-items: stretch; }
.yg-tafl__play { min-width: 0; }
.yg-tafl__side { display: grid; grid-template-rows: 1fr auto; gap: 24px; min-width: 0; }
.yg-tafl__card:hover { transform: none; }
.yg-tafl__rules { color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: 1.55; }
.yg-tafl__rules summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; color: var(--color-text-primary); font-family: var(--font-display); font-size: 1.25rem; letter-spacing: var(--letter-spacing-display); }
.yg-tafl__rules summary::-webkit-details-marker { display: none; }
.yg-tafl__rules summary::before { content: ""; flex: none; width: 24px; height: 24px; background: var(--h); clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.yg-tafl__rules summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.yg-tafl__rules ul { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.yg-tafl__rules li, .yg-tafl__help { max-width: 62ch; }
.yg-tafl__rules li { position: relative; padding-left: 20px; }
.yg-tafl__rules li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 2px; background: var(--h); transform: rotate(45deg); }
.yg-tafl__card h2, .yg-mead__card h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; letter-spacing: var(--letter-spacing-display); }
.yg-tafl__bar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; }
.yg-tafl__status { margin: var(--space-3) 0 0; min-height: 1.5em; color: var(--color-text-secondary); }
.yg-tafl__board { display: grid; grid-template-rows: repeat(7, 1fr); border: 1px solid color-mix(in srgb, var(--h) 35%, var(--color-border-strong)); border-top: 4px solid var(--h); border-radius: var(--radius-lg); overflow: hidden; background: color-mix(in srgb, var(--hue-gold) 7%, color-mix(in srgb, var(--h) 8%, var(--color-bg-sunken))); }
.yg-tafl__row { display: grid; grid-template-columns: repeat(7, 1fr); }
.yg-tafl__cell { position: relative; aspect-ratio: 1; min-width: 0; padding: 0; border: 1px solid color-mix(in srgb, var(--h) 16%, transparent); border-radius: 0; background: transparent; color: var(--color-text-primary); cursor: pointer; touch-action: manipulation; }
.yg-tafl__cell:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -3px; z-index: 1; }
.yg-tafl__cell.is-throne, .yg-tafl__cell.is-corner { background: color-mix(in srgb, var(--h) 14%, var(--color-bg-raised)); }
.yg-tafl__cell.is-corner::before, .yg-tafl__cell.is-throne[data-piece=""]::before { content: ""; position: absolute; inset: 36%; border: 1px solid color-mix(in srgb, var(--h) 70%, transparent); background: color-mix(in srgb, var(--h) 25%, transparent); transform: rotate(45deg); }
.yg-tafl__cell.is-last { box-shadow: inset 0 0 0 2px var(--color-border-control); }
.yg-tafl__cell.is-selected { box-shadow: inset 0 0 0 3px var(--color-ember); }
.yg-tafl__cell:is([data-piece="attacker"], [data-piece="defender"], [data-piece="king"])::after { content: ""; position: absolute; inset: 18%; border-radius: var(--radius-full); box-sizing: border-box; }
.yg-tafl__cell[data-piece="attacker"]::after { inset: 24%; border-radius: 12%; background: color-mix(in srgb, var(--hue-rose) 55%, var(--color-bg-canvas)); }
.yg-tafl__cell[data-piece="defender"]::after { border: 3px solid var(--hue-teal); background: color-mix(in srgb, var(--hue-teal) 25%, var(--color-bg-canvas)); }
.yg-tafl__cell[data-piece="king"]::after { inset: 12%; border: 4px double color-mix(in srgb, var(--hue-gold) 20%, white); background: var(--hue-gold); }
.yg-tafl__cell.is-target::after { content: ""; position: absolute; inset: 40%; background: var(--color-ember); transform: rotate(45deg); }
.yg-tafl__voice { margin: var(--space-3) 0 0; min-height: 1.6em; font-style: italic; }
.yg-tafl__help { color: var(--color-text-secondary); }
.yg-tafl__record { color: var(--color-text-tertiary); font-size: var(--font-size-sm); }
.yg-tafl__record:empty { display: none; }
@media (max-width: 1023px) { .yg-tafl { grid-template-columns: minmax(0, 1fr); } .yg-tafl__play { max-width: 36rem; } }
@media (max-width: 639px) { .yg-tafl__bar .btn { min-height: 44px; padding-inline: var(--space-3); } }



/* == mead-drop == */
/* Page hue green. Stage and how-to card side by side, centred, at 1440; stacked below 1024. The canvas reads its colours from these properties. */
.yg-mead { --stage-w: min(100%, 30rem, max(14rem, (100svh - 350px) * 0.625)); display: grid; grid-template-columns: var(--stage-w) minmax(0, 24rem); justify-content: center; gap: 32px; align-items: start; }
.yg-mead__play { min-width: 0; }
.yg-mead__side { min-width: 0; position: sticky; top: 88px; display: grid; gap: 24px; }
.yg-mead__card:hover { transform: none; }
.yg-mead__stage {
  position: relative; width: var(--stage-w); aspect-ratio: 100 / 160; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--h) 30%, var(--color-border-default)); border-top: 4px solid var(--h); border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 18% 14%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 72% 9%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 44% 26%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 86% 33%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 28% 41%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 63% 52%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 8% 6%, #fff 0 2px, transparent 2.5px), radial-gradient(circle at 34% 8%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 58% 17%, #fff 0 2px, transparent 2.5px), radial-gradient(circle at 92% 18%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 12% 29%, #fff 0 2px, transparent 2.5px), radial-gradient(circle at 78% 24%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 52% 38%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 94% 44%, #fff 0 2px, transparent 2.5px),
    linear-gradient(to bottom, color-mix(in srgb, var(--hue-teal) 24%, var(--color-bg-canvas)), color-mix(in srgb, var(--hue-teal) 6%, var(--color-bg-canvas)) 60%, color-mix(in srgb, var(--hue-gold) 8%, var(--color-bg-canvas)));
}
/* night sky above, mead gold at the horn's end, laid over the canvas (it only paints flat shapes) */
.yg-mead__stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--hue-teal) 22%, transparent), transparent 55%, color-mix(in srgb, var(--hue-gold) 20%, transparent));
}
.yg-mead__canvas {
  display: block; width: 100%; height: 100%; outline: none;
  --color-bg-surface: var(--color-bg-canvas); mix-blend-mode: lighten; /* the canvas clears opaque each frame; lighten lets the stage sky show through it */
  --color-text-secondary: color-mix(in srgb, var(--hue-teal) 55%, white); --color-text-primary: color-mix(in srgb, var(--hue-gold) 75%, white);
  --color-warn: var(--hue-gold);
}
.yg-mead__canvas.is-playing { touch-action: none; cursor: none; }
.yg-mead__panel { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-6); text-align: center; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--color-bg-canvas) 60%, transparent) 30%, color-mix(in srgb, var(--color-bg-canvas) 60%, transparent) 70%, transparent); }
.yg-mead__panel[hidden] { display: none; }
.yg-mead__panel .btn { min-height: 44px; padding-inline: var(--space-6); }
.yg-mead__title { margin: 0; font-size: var(--font-size-xl); font-family: var(--font-display); color: color-mix(in srgb, var(--h) 35%, white); }
.yg-mead__text { margin: 0; max-width: 28ch; color: var(--color-text-secondary); }
.yg-mead__hud { margin: var(--space-3) 0 0; text-align: center; font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }
@media (max-width: 1023px) { .yg-mead { grid-template-columns: var(--stage-w); justify-content: start; } }



/* == hero == */
.yg-hero > img, .yg-hero > .yg-lyr, .yg-hero > svg.yg-hero__ov {
  --pano-box: calc(100cqh + 32px);
  --pano-h: max(var(--pano-box), min(100cqw, 1920px) * 0.325, 100cqw * 0.1586);
  position: absolute; left: 50%; bottom: -16px; translate: -50% 0;
  height: var(--pano-h); width: calc(var(--pano-h) * 6.3077); display: block; max-width: none;
}
.yg-hero > img, .yg-lyr { user-select: none; -webkit-user-drag: none; pointer-events: none; }
.yg-lyr .flow { position: absolute; }
.yg-lyr img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.yg-lyr .green { opacity: 0; }
.yg-hero > [data-depth] { transition: transform var(--duration-base) var(--ease-standard); will-change: transform; }
.yg-hero__ov, .yg-hero__ov foreignObject { pointer-events: none; }
.yg-hero__ov .yg-door, .yg-hero__ov .yg-lamp { pointer-events: auto; }
.yg-door, .yg-lamp { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.yg-door svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* lamp: a 44px touch target around the 32px button (foreignObject clips by default) */
.yg-hero__ov foreignObject:has(.yg-lamp) { overflow: visible; }
.yg-lamp { position: relative; }
.yg-lamp::after { content: ""; position: absolute; inset: -6px; }
.yg-lamp:focus-visible::after { outline: 2px solid var(--color-focus); border-radius: 4px; }
.yg-door, .yg-lamp { outline: none; }
/* the door outlines an svg ring rect (a button outline is not relied on inside its foreignObject); the lamp outlines its ::after above */
.yg-ring { fill: none; stroke: var(--color-focus); stroke-width: 2; opacity: 0; pointer-events: none; }
.yg-hero__ov:has(.yg-door:focus-visible) .yg-ring--door { opacity: 1; }
.yg-room, .yg-wedge, .yg-beam { opacity: 0; }
.yg-leaf { transform-origin: 654px 421px; transition: transform var(--duration-base) var(--ease-standard); }
.yg-room, .yg-wedge { transition: opacity var(--duration-base) var(--ease-standard); }
.yg-hero__ov:has(.yg-door[data-react-state="on"]) .yg-room { opacity: .85; }
.yg-hero__ov:has(.yg-door[data-react-state="on"]) .yg-wedge { opacity: 1; }
.yg-door[data-react-state="on"] .yg-leaf { transform: scaleX(.25); }
.yg-beam { transform-origin: 205px 367.2px; }
.yg-hero__ov:has(.yg-lamp[data-react-state="on"]) .yg-beam { animation: yg-sweep 2.4s ease-in-out 1; }
@keyframes yg-sweep {
  0%   { transform: rotate(-22deg); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: rotate(14deg); opacity: 0; }
}
@keyframes yg-flash { 0%, 100% { opacity: 0; } 15%, 80% { opacity: 1; } }
@media (max-width: 639px) { .yg-lh { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .yg-hero > [data-depth], .yg-leaf, .yg-room, .yg-wedge { transition: none; }
  .yg-door[data-react-state="on"] .yg-leaf { transform: none; opacity: 0; }
  .yg-hero__ov:has(.yg-lamp[data-react-state="on"]) .yg-beam { animation: yg-flash 1.2s linear 1; }
}

/* badge: the Heiðrún emblem, left and centred (not a link); header.js docks the mark into the bar on scroll */
.yg-badge {
  position: absolute; top: 50%; translate: 0 -50%; left: max(var(--pad), calc((100% - var(--wrap)) / 2)); z-index: 2;
  display: flex; align-items: center; gap: 16px; color: var(--color-text-primary);
}
.yg-badge__mark { flex: none; width: var(--badge); height: var(--badge); transform-origin: 0 0; will-change: transform; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 55%, transparent); background: color-mix(in srgb, currentColor 6%, transparent); }
.yg-badge__mark svg { display: block; width: 100%; height: 100%; }
.yg-badge__text { opacity: var(--badge-fade, 1); }
.yg-badge__who { margin: 12px 0 0; max-width: 22ch; font-family: var(--font-body); font-weight: 600; font-size: .9375rem; line-height: 1.35; text-wrap: balance; color: var(--color-text-primary); }
@media (min-width: 640px) { .yg-badge__who { max-width: none; font-size: 1.0625rem; } }
/* tafl: a small cross in the king, so he does not rely on tint alone */
.yg-tafl__cell[data-piece="king"]::before { content: "+"; position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--color-bg-canvas); }
.siteheader[data-docked] ~ .yg-herowrap .yg-badge__mark { visibility: hidden; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .yg-badge.is-dripping .mead-drop { animation: mead 2.6s infinite; }
}
.yg-badge__name { display: block; position: relative; padding-bottom: 6px; font-family: var(--font-display); font-size: 20px; line-height: 1; letter-spacing: .04em; }
.yg-badge__name::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 1px; background: var(--accent, #e3a83f); }
.yg-badge__cap { display: none; margin-top: 10px; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--color-text-secondary); }
@media (min-width: 640px) {
  .yg-badge { gap: 24px; }
  .yg-badge__name { font-size: 26px; padding-bottom: 7px; }
  .yg-badge__cap { display: block; }
}
/* short viewports: pin the badge just under the bar instead of the middle of the hero */
/* low enough that the planet sprite clears the ring at 1366x768 */
@media (min-width: 640px) and (max-height: 799px) { .yg-badge { top: calc(var(--bar-h) + 64px); translate: none; } }

/* hero glass card: the motto, a translucent lens over the sky (under the hero on phones) */
.yg-herowrap { position: relative; }
.yg-herowrap + .yg-main { margin-top: calc(var(--hero-overlap) * -1); }
.yg-motto {
  position: absolute; z-index: 3; right: max(var(--pad), calc((100% - var(--wrap)) / 2)); top: 50%; translate: 0 -50%;
  width: min(400px, 34vw); padding: 24px 32px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 22px; color: #F4F7FB;
  background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.025) 45%, rgba(8,13,24,.2));
  -webkit-backdrop-filter: blur(8px) saturate(1.4) brightness(1.1); backdrop-filter: blur(8px) saturate(1.4) brightness(1.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(255,255,255,.08);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .yg-motto { background: rgba(8,13,24,.72); } }
.yg-motto :is(h1, p) { margin: 0; }
.yg-motto__cs { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.25; letter-spacing: var(--letter-spacing-display); text-wrap: balance; text-shadow: 0 1px 12px rgba(3,5,11,.55); }
.yg-motto .yg-motto__en { margin-top: 16px; font-size: var(--font-size-sm); line-height: 1.5; color: rgba(244,247,251,.88); text-shadow: 0 1px 8px rgba(3,5,11,.55); }
@media (max-width: 1023px) { .yg-motto { width: min(340px, 44vw); padding: 16px 24px; } .yg-motto__cs { font-size: 1.25rem; } }
@media (max-width: 639px) {
  .yg-herowrap + .yg-main { margin-top: 0; }
  .yg-motto {
    position: relative; inset: auto; translate: none; width: auto; margin: -8px var(--pad) var(--space-4); padding: 14px 16px; border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.035)), color-mix(in srgb, var(--color-bg-raised) 62%, transparent);
  }
  .yg-motto__cs { font-size: 1.0625rem; }
  .yg-motto .yg-motto__en { margin-top: 8px; font-size: .8125rem; }
}



/* == aurora == */
/* static scene by default; the motion exists only when the visitor has not asked for less.
   The .yg-lyr wrapper keeps its transform for the parallax, so everything animates on .flow. */
.yg-lyr .flow[data-aurora] { transform-origin: var(--ox) var(--oy); }
[data-aurora="a"]      { --p-shift: 23s; --p-lean: 31s; --p-breathe: 19s; --p-inten: 37s; --p-col: 53s; --dl-shift: -5s;  --dl-lean: -11s; --dl-breathe: -3s;  --dl-inten: -9s;  --dl-col: -12s; --dx: 24; --sk: 1deg; }
[data-aurora="b"]      { --p-shift: 29s; --p-lean: 37s; --p-breathe: 23s; --p-inten: 43s; --p-col: 67s; --dl-shift: -17s; --dl-lean: -4s;  --dl-breathe: -14s; --dl-inten: -27s; --dl-col: -40s; --dx: 20; --sk: .8deg; }
[data-aurora="c"]      { --p-shift: 37s; --p-lean: 41s; --p-breathe: 29s; --p-inten: 53s; --p-col: 83s; --dl-shift: -9s;  --dl-lean: -23s; --dl-breathe: -7s;  --dl-inten: -41s; --dl-col: -6s;  --dx: 14; --sk: .6deg; }
[data-aurora="violet"] { --p-shift: 41s; --p-lean: 47s; --p-breathe: 31s; --p-inten: 71s; --dl-shift: -20s; --dl-lean: -8s;  --dl-breathe: -19s; --dl-inten: -30s; --dx: 20; --sk: .9deg; }
[data-aurora="red"]    { --p-shift: 43s; --p-lean: 53s; --p-breathe: 37s; --p-inten: 89s; --dl-shift: -2s;  --dl-lean: -31s; --dl-breathe: -9s;  --dl-inten: -55s; --dx: 18; --sk: .7deg; }
[data-twinkle="a"] { --d: 22s; --dl: -4s; }
[data-twinkle="b"] { --d: 31s; --dl: -13s; }
@keyframes yg-shift   { from { translate: calc(var(--dx) * var(--pano-h) / -520) 0; } to { translate: calc(var(--dx) * var(--pano-h) / 520) 0; } }
@keyframes yg-lean    { from { transform: skewX(calc(var(--sk) * -1)); } to { transform: skewX(var(--sk)); } }
@keyframes yg-breathe { from { scale: 1 .965; } to { scale: 1 1.04; } }
/* intensity: a slow swell with small ripples (the flicker); no step above .08, none shorter than ~1.5 s */
@keyframes yg-inten {
  0% { opacity: 1; } 6% { opacity: .92; } 10% { opacity: .97; } 19% { opacity: .84; } 24% { opacity: .9; }
  33% { opacity: .76; } 38% { opacity: .82; } 47% { opacity: .72; } 53% { opacity: .8; } 62% { opacity: .9; }
  67% { opacity: .84; } 76% { opacity: .96; } 81% { opacity: .9; } 90% { opacity: 1; } 95% { opacity: .94; } 100% { opacity: 1; }
}
@keyframes yg-inten-acc { 0% { opacity: 1; } 30% { opacity: .55; } 38% { opacity: .62; } 55% { opacity: .3; } 62% { opacity: .38; } 85% { opacity: .85; } 92% { opacity: .78; } 100% { opacity: 1; } }
/* colour: the teal copy hands over to the greener one and back */
@keyframes yg-teal  { 0%, 100% { opacity: 1; } 18% { opacity: .98; } 50% { opacity: .45; } 82% { opacity: .98; } }
@keyframes yg-green { 0%, 100% { opacity: 0; } 18% { opacity: .02; } 50% { opacity: .7; } 82% { opacity: .02; } }
@keyframes yg-twinkle { 0% { opacity: 1; } 40% { opacity: .55; } 65% { opacity: .85; } 100% { opacity: .4; } }
@media (prefers-reduced-motion: no-preference) {
  .yg-lyr .flow[data-aurora] {
    animation-name: yg-shift, yg-lean, yg-breathe, yg-inten;
    animation-duration: var(--p-shift), var(--p-lean), var(--p-breathe), var(--p-inten);
    animation-direction: alternate, alternate, alternate, normal;
    animation-delay: var(--dl-shift), var(--dl-lean), var(--dl-breathe), var(--dl-inten);
    animation-timing-function: ease-in-out; animation-iteration-count: infinite;
  }
  .yg-lyr .flow[data-aurora="violet"], .yg-lyr .flow[data-aurora="red"] { animation-name: yg-shift, yg-lean, yg-breathe, yg-inten-acc; }
  .yg-lyr .flow[data-aurora] img { animation: yg-teal var(--p-col) ease-in-out var(--dl-col, 0s) infinite; }
  .yg-lyr .flow[data-aurora] img.green { animation-name: yg-green; }
  .yg-lyr .flow[data-aurora="violet"] img, .yg-lyr .flow[data-aurora="red"] img { animation: none; }
  .yg-lyr .flow[data-twinkle] { animation: yg-twinkle var(--d) ease-in-out var(--dl) infinite alternate; }
  /* off-screen (hero.js: data-paused) or tab hidden (hero.js: html data-hidden): hold still, resume where it stopped */
  [data-hero][data-paused] .flow, [data-hero][data-paused] .flow img, html[data-hidden] [data-hero] .flow, html[data-hidden] [data-hero] .flow img { animation-play-state: paused; }
}

/* == calendar == */
/* Page hue teal (.yg-hue-teal on main); events keep their source colour in --k. Also serves /odin/calendar. */
.yg-calendar { display: grid; gap: 24px; }
.yg-calendar__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.yg-calendar__views { display: flex; gap: 8px; }
/* both tabs: same border width and height, so switching moves nothing; the inactive one is outlined in the hue */
.yg-calendar__views .btn { border: 1px solid color-mix(in srgb, var(--h) 40%, transparent); }
.yg-calendar__views .btn--primary { border-color: color-mix(in srgb, var(--h) 60%, transparent); }
.yg-calendar__views .btn--ghost { color: color-mix(in srgb, var(--h) 40%, white); }
.yg-calendar__empty { justify-items: start; text-align: left; padding: 32px; border: 1px dashed color-mix(in srgb, var(--h) 35%, var(--color-border-default)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--h) 5%, transparent); }
.yg-calendar__empty-mark { width: 4rem; height: 4rem; line-height: 0; color: color-mix(in srgb, var(--h) 45%, white); }
.yg-calendar__empty-mark svg { width: 100%; height: 100%; }
.yg-calendar__problems { display: grid; gap: 8px; }
.yg-calendar__problems .banner + form { margin: 0; }
.yg-calendar .btn--primary { background: color-mix(in srgb, var(--h) 22%, var(--color-bg-raised)); border-color: color-mix(in srgb, var(--h) 60%, transparent); color: color-mix(in srgb, var(--h) 40%, white); }
.yg-calendar .btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.srcchip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--k) 45%, transparent); background: color-mix(in srgb, var(--k) 14%, transparent);
  font-size: var(--font-size-xs); color: color-mix(in srgb, var(--k) 60%, white); white-space: nowrap; }
.srcchip svg { color: var(--k); }
.agday { display: grid; gap: 12px; margin-top: 24px; }
.agday__title { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: var(--letter-spacing-display); color: color-mix(in srgb, var(--h) 35%, white); }
.agday__title::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--h); transform: rotate(45deg); }
.agday__title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, color-mix(in srgb, var(--h) 50%, transparent), transparent 70%); }
.agday__title span { order: 1; font-family: var(--font-body); font-size: var(--font-size-sm); color: var(--color-text-tertiary); }
.agday.is-today .agday__title { color: #fff; }
.agday.is-today .agday__title::before { background: #fff; }
.agrows { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.agrow { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 20px 24px;
  border: 1px solid color-mix(in srgb, var(--k) 22%, var(--color-border-default)); border-top: 3px solid var(--k); border-radius: var(--radius-lg);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--k) 8%, var(--color-bg-raised)), var(--color-bg-raised) 70%); }
.agday.is-today .agrow { border-color: color-mix(in srgb, var(--k) 55%, transparent); }
.agrow__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.agrow__time { font-size: var(--font-size-sm); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.agrow__main { display: grid; gap: 8px; min-width: 0; justify-items: start; }
.agrow__title { color: var(--color-text-primary); font-size: var(--font-size-lg); overflow-wrap: anywhere; }
.agrow__check { color: var(--color-ok); vertical-align: -2px; margin-right: 4px; }
.agrow__notes { font-size: var(--font-size-sm); color: var(--color-text-secondary); overflow-wrap: anywhere; white-space: pre-wrap; max-width: 100%; }
.agrow__notes summary { cursor: pointer; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; list-style: none; }
.agrow__notes[open] summary { display: none; }
.agrow__link { display: inline-flex; align-items: center; gap: 3px; font-size: var(--font-size-sm); }
.agrow.is-done, .agrow.is-cancelled { opacity: .65; }
.agrow.is-cancelled .agrow__title { text-decoration: line-through; }
.yg-calendar__past { display: grid; gap: 12px; }
.yg-calendar__past > summary { cursor: pointer; color: var(--color-text-secondary); }
.yg-calendar__past > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.yg-calendar__past .agday { opacity: .6; }
.yg-calendar__monthnav { display: flex; align-items: center; justify-content: center; gap: 24px; }
.yg-calendar__monthname { min-width: 9ch; text-align: center; font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; color: color-mix(in srgb, var(--h) 35%, white); }
.mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.mgrid__wd { padding: 4px; text-align: center; font-size: var(--font-size-xs); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); }
.mday { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 112px; padding: 8px;
  border: 1px solid color-mix(in srgb, var(--h) 16%, var(--color-border-default)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--h) 5%, var(--color-bg-raised)); }
.mday.is-out { opacity: .45; }
.mday.is-today { border: 2px solid var(--h); background: color-mix(in srgb, var(--h) 14%, var(--color-bg-raised)); }
.mday__num { font-size: var(--font-size-sm); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.mday.is-today .mday__num { color: #fff; font-weight: 700; }
.mday__wd { display: none; }
.mday__more { font-size: var(--font-size-xs); color: var(--color-text-tertiary); }
.mchip { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 2px 6px; border-radius: var(--radius-sm);
  border-left: 3px solid var(--k); background: color-mix(in srgb, var(--k) 18%, transparent); font-size: var(--font-size-xs); color: var(--color-text-primary); }
.mchip svg { color: var(--k); flex-shrink: 0; }
.mchip__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mchip.is-cancelled { opacity: .6; text-decoration: line-through; }
.mchip.is-done { opacity: .7; }
@media (max-width: 1023px) { .agrow { grid-template-columns: 140px minmax(0, 1fr); } }
@media (max-width: 639px) {
  .yg-calendar .btn--sm { min-height: 44px; }
  .agrow { grid-template-columns: 1fr; gap: 8px; padding: 16px; }
  .agrow__meta { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .agday__title { font-size: 1.25rem; }
  .mgrid { display: flex; flex-direction: column; gap: 8px; }
  .mgrid__wd, .mday.is-empty { display: none; }
  .mday { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; }
  .mday__num { flex: 0 0 56px; }
  .mday__wd { display: inline; }
  .mchip { flex: 1 1 100%; }
  .mday__num ~ .mchip:first-of-type { flex: 1 1 0; }
}

/* == error == */
/* 404/500: one rose card, Heiðrún and a line in her voice. */
.yg-error { display: flex; flex-direction: row; align-items: center; gap: 32px; max-width: 640px; margin-top: 32px; }
.yg-main--wide > .yg-error { width: min(100% - 2 * var(--pad), 640px); margin-inline: auto; background: linear-gradient(to bottom, color-mix(in srgb, var(--h) 16%, var(--color-bg-raised)), var(--color-bg-raised) 80%); }
.yg-main--wide:has(> .yg-error) { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.yg-error__mark { flex: none; width: 96px; }
.yg-error__mark:empty { display: none; }
.yg-error__body { display: grid; gap: 16px; justify-items: start; }
.yg-error h1 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1.25; letter-spacing: var(--letter-spacing-display); color: color-mix(in srgb, var(--h) 35%, white); }
.yg-error .btn { min-height: 44px; padding-inline: var(--space-4); }
@media (max-width: 639px) { .yg-error { flex-direction: column; align-items: flex-start; gap: 16px; } }

/* == hall == */
/* Reuses the page frame and .yg-group titles; the grid keeps its centred packing. */
.yg-hall__group { margin-bottom: 72px; }
.yg-hall__group:last-child { margin-bottom: 0; }
.yg-hall__count { margin-inline-start: 16px; font-family: var(--font-body); font-size: var(--font-size-sm); color: var(--color-text-secondary); text-shadow: none; }
.yg-hall .yg-grid { --pack-w: 316px; justify-content: flex-start; }
.yg-hall .btn--ghost { border-color: var(--color-border-strong); }
.siteheader .btn--ghost { border-color: var(--color-border-default); }
@media (max-width: 639px) { .yg-hall__group { margin-bottom: 56px; } .yg-hall__count { display: none; } }

/* == hall calendar == */
/* One wide panel in the card language (hue top border, faint hue wash): month grid left (5 of 12), agenda right (7 of 12), footer across. */
.yg-hcal.yg-card { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; padding: 0; transition: none; }
/* not a link: no lift, and the border keeps its 1px/4px widths so nothing beneath moves */
.yg-hcal.yg-card:hover { transform: none; border-color: color-mix(in srgb, var(--h) 22%, var(--color-border-default)); border-top-color: var(--h); }
.yg-hcal__month { grid-column: 1 / span 5; display: flex; flex-direction: column; padding: var(--space-8); min-width: 0; }
.yg-hcal__agenda { grid-column: 6 / -1; display: flex; flex-direction: column; padding: var(--space-8); min-width: 0; border-left: 1px solid var(--color-border-subtle); }
.yg-hcal__foot {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3);
  padding: var(--space-4) var(--space-8); border-top: 1px solid var(--color-border-subtle);
}
.yg-hcal__more { margin-inline-end: auto; font-size: var(--font-size-sm); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.yg-hcal__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.yg-hcal__head h3 {
  display: flex; align-items: center; gap: var(--space-3); margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1.1;
  letter-spacing: var(--letter-spacing-display); color: color-mix(in srgb, var(--h) 25%, white);
}
.yg-hcal__head .yg-mark { width: 14px; height: 14px; align-self: center; }
.yg-hcal__sub { font-size: var(--font-size-sm); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* month grid: decorative (aria-hidden), the sr-only summary above it carries the content */
.yg-hcal__grid { display: grid; flex: 1; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(var(--weeks), minmax(54px, 1fr)); row-gap: 2px; margin-top: var(--space-5); }
.yg-hcal__wd { padding-bottom: var(--space-2); text-align: center; font-size: var(--font-size-xs); color: var(--color-text-tertiary); }
.yg-hcal__day { display: grid; justify-items: center; align-content: start; gap: 4px; padding-top: 3px; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.yg-hcal__num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-full); font-size: var(--font-size-sm); }
.yg-hcal__day.is-out { color: var(--color-text-tertiary); }
.yg-hcal__day.is-today .yg-hcal__num { background: var(--h); color: var(--color-bg-canvas); font-weight: var(--font-weight-bold); }
.yg-hcal__day.is-overdue .yg-hcal__num { color: var(--color-warn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-warn) 65%, transparent); }
.yg-hcal__dots { display: flex; justify-content: center; gap: 3px; height: 7px; }
.yg-hcal__dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--k); }
.yg-hcal__dot.is-done { background: transparent; box-shadow: inset 0 0 0 1px var(--k); }
.yg-hcal__legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-4) 0 0; padding: var(--space-3) 0 0; list-style: none; border-top: 1px solid var(--color-border-subtle); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.yg-hcal__legend li { display: inline-flex; align-items: center; gap: var(--space-2); }

/* agenda: a date chip per day, its events beside it */
.yg-hcal__days { display: grid; margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.yg-hcal__dayrow { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-4); border-top: 1px solid var(--color-border-subtle); }
.yg-hcal__dayrow:first-child { border-top: 0; padding-top: var(--space-2); }
.yg-hcal__chip {
  display: grid; align-content: center; justify-items: center; align-self: start; height: 60px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--h) 6%, var(--color-bg-surface)); font-variant-numeric: tabular-nums;
}
.yg-hcal__chip b { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.1; color: var(--color-text-primary); }
.yg-hcal__chip span { font-size: var(--font-size-xs); line-height: 1.2; color: var(--color-text-secondary); }
.yg-hcal__dayrow.is-today .yg-hcal__chip { background: var(--h); border-color: var(--h); }
.yg-hcal__dayrow.is-today .yg-hcal__chip :is(b, span) { color: var(--color-bg-canvas); }
.yg-hcal__dayrow.is-overdue .yg-hcal__chip { border-color: color-mix(in srgb, var(--color-warn) 60%, transparent); background: color-mix(in srgb, var(--color-warn) 12%, var(--color-bg-surface)); }
.yg-hcal__dayrow.is-overdue .yg-hcal__chip b { color: var(--color-warn); }
.yg-hcal__evs { display: grid; gap: var(--space-4); align-content: center; margin: 0; padding: 0; list-style: none; min-width: 0; }
.yg-hcal__ev { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); min-width: 0; }
.yg-hcal__evmain { display: grid; gap: var(--space-1); min-width: 0; }
.yg-hcal__title { font-size: var(--font-size-md); line-height: 1.35; font-weight: var(--font-weight-bold); color: var(--color-text-primary); overflow-wrap: anywhere; }
.yg-hcal__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.yg-hcal__tag {
  padding: 1px var(--space-3); border: 1px solid color-mix(in srgb, var(--k) 40%, transparent); border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--k) 14%, transparent); color: color-mix(in srgb, var(--k) 70%, white); font-size: var(--font-size-xs); line-height: 1.6;
}
.yg-hcal__meta .yg-card__sub { gap: var(--space-1); }
.yg-hcal__time { flex: none; padding-top: 1px; font-size: var(--font-size-md); line-height: 1.35; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.yg-hcal__dayrow.is-today .yg-hcal__time { color: var(--color-text-primary); }
.yg-hcal__dayrow.is-overdue .yg-hcal__time { color: var(--color-warn); }
.yg-hcal__empty { display: grid; flex: 1; align-content: center; justify-items: start; gap: var(--space-2); padding-block: var(--space-6); }
.yg-hcal__empty p { margin: 0; color: var(--color-text-secondary); }
.yg-hcal__empty .yg-hcal__empty-title { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; letter-spacing: var(--letter-spacing-display); color: var(--color-text-primary); }
.yg-hcal__foot .btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 899px) {
  .yg-hcal__month, .yg-hcal__agenda { grid-column: 1 / -1; }
  .yg-hcal__agenda { border-left: 0; border-top: 1px solid var(--color-border-subtle); }
  .yg-hcal__month { padding-bottom: var(--space-6); }
}
@media (max-width: 639px) {
  .yg-hcal__month, .yg-hcal__agenda { padding: var(--space-5); }
  .yg-hcal__foot { padding: var(--space-4) var(--space-5); }
  .yg-hcal__head h3 { font-size: 1.5rem; }
  .yg-hcal__grid { grid-template-rows: auto repeat(var(--weeks), minmax(46px, 1fr)); }
  .yg-hcal__num { width: 28px; height: 28px; }
  .yg-hcal__dayrow { grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-3); }
  .yg-hcal__chip { height: 56px; } .yg-hcal__chip b { font-size: 1.25rem; }
  .yg-hcal__foot { flex-direction: column-reverse; align-items: stretch; }
  .yg-hcal__foot .btn { min-height: 44px; justify-content: center; }
  .yg-hcal__more { margin: 0; }
}