/* ornament.css: the gothic craft layer. Load after style.css (and after design/color.css, delight.css).
   Every rule is scoped to [data-deco="on"] (Decorations: Gothic); any other choice turns all of it off.
   Ornament lives in frames, rules, icons and the page background, never behind or inside reading text.
   One metallic per palette (--gilt) keeps the ornaments from all being the accent color. See ornament.md */

/* tokens */
[data-deco="on"] {
  --gilt: color-mix(in srgb, #c8a45e 55%, var(--ink));
  --orn-a: .6; --tex-a: .05; --candle: 16px;
  --initial-glow: 0 0 .5em color-mix(in srgb, var(--gilt) 40%, transparent);
  --rule: color-mix(in srgb, var(--gilt) 45%, var(--line));
  --o-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cg id='c' fill='none' stroke='%23000' stroke-linecap='round'%3E%3Cg transform='scale(.85)' stroke-width='1.25'%3E%3Cpath d='M1 15C1 6.5 6.5 1 15 1M15 1c3.2 0 4.6 2 3.8 3.6-.7 1.4-2.8 1.2-2.9-.3M1 15c0 3.2 2 4.6 3.6 3.8 1.4-.7 1.2-2.8-.3-2.9'/%3E%3Cpath d='M8 5.8 10.2 8 8 10.2 5.8 8z' fill='%23000' stroke='none'/%3E%3C/g%3E%3Cg stroke-opacity='.45'%3E%3Cline x1='12.8' y1='.85' x2='50%25' y2='.85'/%3E%3Cline x1='.85' y1='12.8' x2='.85' y2='50%25'/%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23c'/%3E%3Csvg x='100%25' overflow='visible'%3E%3Cuse href='%23c' transform='scale(-1 1)'/%3E%3C/svg%3E%3Csvg y='100%25' overflow='visible'%3E%3Cuse href='%23c' transform='scale(1 -1)'/%3E%3C/svg%3E%3Csvg x='100%25' y='100%25' overflow='visible'%3E%3Cuse href='%23c' transform='scale(-1 -1)'/%3E%3C/svg%3E%3C/svg%3E"); --o-damask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 0 40 20 20 40 0 20z' fill='none' stroke='%23000' stroke-width='.7'/%3E%3Cpath d='M20 13.5c1.9 2.6 1.9 4 0 6.5-1.9-2.5-1.9-3.9 0-6.5zm0 13c1.9-2.6 1.9-4 0-6.5-1.9 2.5-1.9 3.9 0 6.5zM13.5 20c2.6-1.9 4-1.9 6.5 0-2.5 1.9-3.9 1.9-6.5 0zm13 0c-2.6-1.9-4-1.9-6.5 0 2.5 1.9 3.9 1.9 6.5 0z'/%3E%3Ccircle r='1.6'/%3E%3Ccircle cx='40' r='1.6'/%3E%3Ccircle cy='40' r='1.6'/%3E%3Ccircle cx='40' cy='40' r='1.6'/%3E%3C/svg%3E"); --o-lace: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='6'%3E%3Cpath d='M0 .6C2 .6 3 5.2 7 5.2S12 .6 14 .6' fill='none' stroke='%23000'/%3E%3Ccircle cx='7' cy='2.5' r='.9'/%3E%3C/svg%3E");
  --o-fleuron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12'%3E%3Cpath d='M24 1.2 28.8 6 24 10.8 19.2 6zM24 3.8 26.2 6 24 8.2 21.8 6z' fill-rule='evenodd'/%3E%3Cpath d='M17.6 6c-2.6-3.6-6.2-3.6-8.4 0 2.2 3.6 5.8 3.6 8.4 0zm12.8 0c2.6-3.6 6.2-3.6 8.4 0-2.2 3.6-5.8 3.6-8.4 0z'/%3E%3Ccircle cx='4.6' cy='6' r='1.3'/%3E%3Ccircle cx='43.4' cy='6' r='1.3'/%3E%3C/svg%3E"); --o-flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='10'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5 .8 9.2 5 5 9.2.8 5zM5 3.2 6.8 5 5 6.8 3.2 5z' fill-rule='evenodd'/%3E%3Ccircle cx='13' cy='5' r='1.1'/%3E%3Crect x='17' y='4.4' width='133' height='1.2' fill='url(%23g)'/%3E%3C/svg%3E");
}
[data-deco="on"][data-theme="goth"] { --gilt: #cfc3d6; }
[data-deco="on"][data-theme="crimson"] { --gilt: #d9ad62; }
[data-deco="on"][data-theme="violet"] { --gilt: #dcc27e; }
[data-deco="on"][data-theme="emerald"] { --gilt: #d9b75f; }
[data-deco="on"][data-theme="ocean"] { --gilt: #cdaa68; }
[data-deco="on"][data-theme="gold"] { --gilt: #c4bdae; }
[data-deco="on"][data-theme="midnight"] { --gilt: #dcc68e; }
[data-deco="on"][data-theme="ember"] { --gilt: #c2b8ae; }
[data-deco="on"][data-theme="absinthe"] { --gilt: #c8ccbd; }
[data-deco="on"][data-theme="rosegold"] { --gilt: #d9ccd1; }
[data-deco="on"][data-theme="graphite"] { --gilt: #d2b46c; }
[data-deco="on"][data-theme="goth-light"] { --gilt: #8f5a3e; }
[data-deco="on"][data-theme="lavender"] { --gilt: #86682a; }
[data-deco="on"][data-theme="mint"] { --gilt: #985a36; }
[data-deco="on"][data-theme="bone"] { --gilt: #7d6228; }
[data-deco="on"][data-theme="sky"] { --gilt: #7a6230; }
[data-deco="on"][data-theme="peach"] { --gilt: #5f5a6e; }
[data-deco="on"][data-theme="classic"] { --gilt: #86693a; }
[data-deco="on"]:is([data-theme="goth-light"], [data-theme="lavender"], [data-theme="mint"], [data-theme="bone"], [data-theme="sky"], [data-theme="peach"], [data-theme="classic"]) {
  --orn-a: .7; --tex-a: .055; --initial-glow: none;
}
@media (prefers-color-scheme: dark) {
  [data-deco="on"][data-theme="classic"] { --gilt: #c9a45c; --orn-a: .6; --tex-a: .04; }
}

/* diaper texture: edges only on Background Glow, all over on Texture (replaces the diagonals), none on Plain */
[data-deco="on"]:not([data-bg="plain"]) body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--accent); opacity: var(--tex-a);
  -webkit-mask: var(--o-damask) 0 0 / 40px 40px, radial-gradient(75% 65% at 50% 45%, transparent 35%, #000);
  -webkit-mask-composite: source-in;
  mask: var(--o-damask) 0 0 / 40px 40px, radial-gradient(75% 65% at 50% 45%, transparent 35%, #000);
  mask-composite: intersect;
}
[data-deco="on"][data-bg="texture"] body::after { opacity: calc(var(--tex-a) * 1.3); -webkit-mask: var(--o-damask) 0 0 / 40px 40px; mask: var(--o-damask) 0 0 / 40px 40px; }
[data-deco="on"][data-theme][data-bg="texture"] body {
  background: radial-gradient(900px 500px at 0% 0%, var(--glow-1, transparent), transparent 70%),
    radial-gradient(800px 600px at 100% 100%, var(--glow-2, transparent), transparent 70%), var(--bg);
  background-attachment: fixed;
}

/* cards: an inner hairline frame with filigree corners */
[data-deco="on"] .card:not(.passage) { position: relative; }
[data-deco="on"] .card:not(.passage)::before {
  content: ""; position: absolute; inset: 4px; pointer-events: none;
  background: var(--gilt); opacity: var(--orn-a);
  -webkit-mask: var(--o-frame) 0 0 / 100% 100% no-repeat; mask: var(--o-frame) 0 0 / 100% 100% no-repeat;
}
/* the cards that matter most get a jewel set into the top edge */
[data-deco="on"] :is(.next-card, .moment, .card.welcome)::after {
  content: ""; position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; margin-left: -5px;
  transform: rotate(45deg); pointer-events: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-2, var(--accent)) 65%, white), var(--accent) 55%, color-mix(in srgb, var(--accent) 65%, black));
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px color-mix(in srgb, var(--gilt) 75%, transparent), 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);
}
[data-deco="on"] .card.moment::after { background: linear-gradient(135deg, color-mix(in srgb, var(--good) 55%, white), var(--good) 60%); }
[data-deco="on"] .next-card {
  background: radial-gradient(70% 55% at 50% 0%, color-mix(in srgb, var(--gilt) 8%, transparent), transparent 75%),
    linear-gradient(180deg, var(--accent-soft), var(--surface) 70%);
}

/* headings: an illuminated initial, a flourish under titles, rubric eyebrows */
[data-deco="on"] h1::first-letter {
  font-size: 1.22em;
  color: var(--gilt); -webkit-text-fill-color: var(--gilt); text-shadow: var(--initial-glow);
}
[data-deco="on"] h1::after {
  content: ""; display: block; width: min(150px, 60%); height: 10px; margin-top: .3rem; background: var(--gilt); opacity: .8;
  -webkit-mask: var(--o-flourish) left center / 150px 10px no-repeat; mask: var(--o-flourish) left center / 150px 10px no-repeat;
}
[data-deco="on"] :is(.center h1, h1.center)::after { margin-inline: auto; }
[data-deco="on"] .score-big { font-family: var(--display); }
[data-deco="on"] .eyebrow { font-family: var(--display); letter-spacing: .14em; }
[data-deco="on"] .eyebrow::before {
  content: ""; display: inline-block; width: .45em; height: .45em; margin: 0 .65em .12em .1em; vertical-align: middle;
  transform: rotate(45deg); background: var(--tone, var(--accent-2, var(--accent)));
}
[data-deco="on"] :is(.trap-card, .moment, .irl, .nudge) .eyebrow::before { background: currentColor; }

/* dividers: a hairline with a fleuron at the center */
[data-deco="on"] hr.sep {
  position: relative; height: 12px; margin: 12px 0; border: 0; overflow: visible;
  background: linear-gradient(90deg, transparent, var(--rule) 20%, var(--rule) calc(50% - 30px), transparent calc(50% - 30px) calc(50% + 30px), var(--rule) calc(50% + 30px), var(--rule) 80%, transparent) center / 100% 1px no-repeat;
}
[data-deco="on"] hr.sep::after {
  content: ""; position: absolute; left: 50%; top: 0; width: 48px; height: 12px; margin-left: -24px; background: var(--gilt); opacity: .9;
  -webkit-mask: var(--o-fleuron) center / 48px 12px no-repeat; mask: var(--o-fleuron) center / 48px 12px no-repeat;
}
[data-deco="on"] ol.flow li + li::before { color: var(--gilt); }

/* primary buttons: gilt edge and candlelight; stained-glass sheen = the label color inverted, so it only adds contrast */
[data-deco="on"][data-theme]:not([data-theme="classic"]) .btn.primary {
  border-color: color-mix(in srgb, var(--accent) 60%, black);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px color-mix(in srgb, var(--gilt) 45%, transparent),
    0 0 var(--candle) -2px color-mix(in srgb, var(--accent) 45%, transparent), 0 6px 18px -8px color-mix(in srgb, var(--gilt) 60%, transparent);
}
@supports (color: rgb(from red r g b)) {
  [data-deco="on"] {
    --anti: rgb(from var(--accent-ink) calc(255 - r) calc(255 - g) calc(255 - b));
    --btn-top: color-mix(in srgb, var(--accent) 88%, var(--anti));
    --btn-bot: color-mix(in srgb, var(--btn-top) 86%, black);
  }
  [data-deco="on"][data-theme]:not([data-theme="classic"]) .btn.primary {
    background:
      linear-gradient(112deg, transparent 14%, rgb(from var(--anti) r g b / .14) 14% 30%, transparent 30% 52%, rgb(from var(--anti) r g b / .08) 52% 60%, transparent 60%),
      radial-gradient(120% 90% at 50% 135%, color-mix(in srgb, var(--accent-2, var(--accent)) 26%, transparent), transparent 70%),
      linear-gradient(180deg, var(--btn-top), var(--btn-bot));
  }
}
[data-deco="on"] .btn.primary:hover:not(:disabled) { --candle: 26px; }
[data-deco="on"][data-theme="classic"] .btn.primary { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gilt) 45%, transparent); }

/* top bar: a lace edge; nav and tab bar: a jewel on the current page */
[data-deco="on"] .topbar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 6px; pointer-events: none;
  background: var(--rule); opacity: .8;
  -webkit-mask: var(--o-lace) 0 0 / 14px 6px repeat-x; mask: var(--o-lace) 0 0 / 14px 6px repeat-x;
}
[data-deco="on"] :is(.nav, .tabbar) a.on { position: relative; }
[data-deco="on"] .nav a.on::after, [data-deco="on"] .tabbar a.on::before {
  content: ""; position: absolute; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; transform: rotate(45deg); background: var(--gilt);
}
[data-deco="on"] .nav a.on::after { bottom: -6px; }
[data-deco="on"] .tabbar a.on::before { top: -2px; }

/* tab bar: icons are masks painted in currentColor; a double rule */
[data-deco="on"] .tabbar::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 3px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--rule) 25%, var(--rule) 75%, transparent);
}
[data-deco="on"] .tabbar a { --ic: radial-gradient(circle, #000 3px, transparent 3.5px); }
[data-deco="on"] .tabbar a .ic {
  width: 24px; height: 22px; margin: 2px auto 1px; font-size: 0; background: currentColor;
  -webkit-mask: var(--ic) center / 22px 22px no-repeat; mask: var(--ic) center / 22px 22px no-repeat;
}
[data-deco="on"] .tabbar a.on .ic { filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 50%, transparent)); }
[data-deco="on"] .tabbar a[data-tab="home"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M14.6 3.4a8.8 8.8 0 1 0 6 13.8 7 7 0 0 1-6-13.8z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19.2 2.4l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8z'/%3E%3C/svg%3E"); }
[data-deco="on"] .tabbar a[data-tab="skills"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 3.6c-7 .5-12 5.6-12.8 12.8 7.2-.8 12.3-5.8 12.8-12.8z'/%3E%3Cpath d='M4 20.4 15.4 8.6M11.4 12.6h3.4M9.6 15.2h3'/%3E%3C/g%3E%3C/svg%3E"); }
[data-deco="on"] .tabbar a[data-tab="lessons"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.6C10 5 7 4.6 3.4 5.1v13c3.6-.5 6.6-.1 8.6 1.5 2-1.6 5-2 8.6-1.5v-13C17 4.6 14 5 12 6.6zM12 6.6v13'/%3E%3Cpath d='M6 9.2c1.5-.2 2.9 0 4 .5M6 12.2c1.5-.2 2.9 0 4 .5'/%3E%3C/g%3E%3C/svg%3E"); }
[data-deco="on"] .tabbar a[data-tab="games"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 10.2 11.1 8.4 10.4 10.4C7.6 10.4 4.2 9.2 1.6 5.6Q3.6 8.8 3.2 12.4Q5 11.1 6.6 13.6Q8.1 12.8 9.4 15.2Q10.9 14.6 12 17.8Q13.1 14.6 14.6 15.2Q15.9 12.8 17.4 13.6Q19 11.1 20.8 12.4Q20.4 8.8 22.4 5.6C19.8 9.2 16.4 10.4 13.6 10.4L12.9 8.4z'/%3E%3C/svg%3E"); }
[data-deco="on"] .tabbar a[data-tab="history"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h12M6 20.5h12M7.6 3.5c0 4.6 4.4 5.6 4.4 8.5s-4.4 3.9-4.4 8.5M16.4 3.5c0 4.6-4.4 5.6-4.4 8.5s4.4 3.9 4.4 8.5'/%3E%3C/g%3E%3Cpath d='M9.4 19.2h5.2L12 16.4z'/%3E%3Cpath d='M10.3 7.6h3.4L12 9.6z'/%3E%3C/svg%3E"); }
[data-deco="on"] .tabbar a[data-tab="settings"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' stroke='%23000'%3E%3Ccircle cx='12' cy='12' r='8.3' stroke-width='2.8' stroke-dasharray='3.26 3.26'/%3E%3Ccircle cx='12' cy='12' r='6.6' stroke-width='1.6'/%3E%3Ccircle cx='12' cy='12' r='2.8' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E"); }

/* motion: one-time only, and only when wanted */
@media (prefers-reduced-motion: no-preference) {
  [data-deco="on"] .btn.primary { transition: box-shadow .35s ease, filter .2s ease, transform .2s ease; }
  [data-deco="on"] :is(.next-card, .moment)::after { animation: orn-set .7s ease-out .15s 1 both; }
}
@keyframes orn-set { from { opacity: 0; transform: rotate(45deg) scale(.3); } to { opacity: 1; transform: rotate(45deg) scale(1); } }

/* high contrast and print: ornaments step aside */
@media (forced-colors: active) {
  [data-deco="on"] :is(body, .card, .topbar, hr.sep, h1)::after, [data-deco="on"] :is(.card, .tabbar, .tabbar a, .eyebrow)::before { display: none; }
  [data-deco="on"] .tabbar a .ic { font-size: 1.15rem; background: none; -webkit-mask: none; mask: none; }
}
@media print { [data-deco="on"] body::after { display: none; } }