/* Freigeist theme - post page + additions on top of the base styles in base.html */
main.posts a{color:#2b2724}
main.posts h2 a{text-decoration:none}
main.posts .tags{font:500 12px "IBM Plex Mono",monospace;letter-spacing:.1em;color:#6b625a;margin-top:6px}
main.posts .draft{display:inline-block;font:700 11px "IBM Plex Mono",monospace;letter-spacing:.14em;background:#111;color:var(--acc-text);padding:3px 7px;margin-left:8px;vertical-align:2px}
main.post .prose{max-width:46em;background:rgba(248,243,234,.92);padding:28px 34px 34px;margin:0 -34px}
main.post .prose h1{font-style:italic;font-weight:400;font-size:56px;line-height:1.05;margin:10px 0 18px}
main.post .prose h2{font-size:34px;margin:42px 0 10px}
main.post .prose h3{font:600 14px "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;margin:32px 0 8px}
main.post .prose p,main.post .prose li{font-size:21px;line-height:1.55}
main.post .prose blockquote{margin:24px 0;padding:4px 0 4px 20px;border-left:4px solid var(--accent);font-style:italic}
main.post .prose code{font:400 .8em "IBM Plex Mono",monospace;background:rgba(43,39,36,.07);padding:1px 4px}
main.post .prose pre{background:#111;color:#f8f3ea;padding:18px 20px;overflow:auto;border-left:4px solid var(--accent)}
main.post .prose pre code{background:none;color:inherit;font-size:14px;padding:0}
main.post .prose img{max-width:100%}
main.post .back{font:600 12px "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:700px){main.post .prose{padding:20px 18px;margin:0 -18px}main.post .prose h1{font-size:38px}main.post .prose p,main.post .prose li{font-size:18px}}
/* helper bot: marks AI-generated posts; tooltip on hover/focus */
.ai-helper{position:relative;display:inline-block;vertical-align:middle;color:#2b2724;--paper:#f8f3ea;margin-left:8px;cursor:help;outline-offset:3px}
.ai-helper svg{display:block}
main.post .tags .ai-helper{margin:0 8px 0 -4px;vertical-align:-14px}
.ai-label{font-weight:700;color:#111}
.ai-helper::after{content:attr(data-tip);position:absolute;left:-6px;bottom:calc(100% + 10px);white-space:nowrap;font:600 12px "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:none;background:#111;color:var(--acc-text);padding:6px 10px;border-left:3px solid var(--accent);opacity:0;pointer-events:none;transition:opacity .12s;z-index:10}
.ai-helper::before{content:"";position:absolute;left:6px;bottom:calc(100% + 4px);border:6px solid transparent;border-bottom:0;border-top-color:#111;opacity:0;transition:opacity .12s;z-index:10}
.ai-helper:hover::after,.ai-helper:focus-visible::after,.ai-helper:hover::before,.ai-helper:focus-visible::before,.ai-helper.tip::after,.ai-helper.tip::before{opacity:1}
@media(max-width:700px){.ai-helper::after{white-space:normal;width:max-content;max-width:62vw}}
@media(prefers-reduced-motion:reduce){.ai-helper::after,.ai-helper::before{transition:none}}

/* index cards: helper sits at the right end of the meta line, so open the tooltip leftwards */
article .ai-helper::after{left:auto;right:-6px}
article .ai-helper::before{left:auto;right:6px}

/* MDMTMR mark at end of site navigation (desktop hero + sticky/mobile nav).
   Tip opens downward and is right-aligned so it stays in view at the top-right
   of the viewport (upward tips were clipped by the window edge). */
.hn-sep{display:inline-block;width:1px;height:1em;background:#2b2724;margin:0 14px;flex-shrink:0;align-self:center}
.mdmtmr-nav{position:relative;display:inline-flex;align-items:center;justify-content:center;color:#2b2724;--paper:#f8f3ea;text-decoration:none;outline-offset:3px;flex-shrink:0;overflow:visible}
.mdmtmr-nav svg{display:block;width:24px;height:24px}
.mdmtmr-nav::after{content:attr(data-tip);position:absolute;top:calc(100% + 10px);bottom:auto;left:auto;right:-6px;transform:none;white-space:nowrap;font:600 12px "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:none;background:#111;color:var(--acc-text);padding:6px 10px;border-left:3px solid var(--accent);opacity:0;pointer-events:none;transition:opacity .12s;z-index:30}
.mdmtmr-nav::before{content:"";position:absolute;top:calc(100% + 4px);bottom:auto;left:auto;right:10px;transform:none;border:6px solid transparent;border-top:0;border-bottom-color:#111;opacity:0;transition:opacity .12s;z-index:30}
.mdmtmr-nav:hover::after,.mdmtmr-nav:focus-visible::after,.mdmtmr-nav:hover::before,.mdmtmr-nav:focus-visible::before{opacity:1}
#hbar .hn a.mdmtmr-nav{padding:0;background:transparent;border:0;letter-spacing:0;text-transform:none}
#hbar .hn a.mdmtmr-nav:hover{background:transparent;color:#2b2724}
#hbar .hn .hn-sep{height:12px;margin:0 10px}
#hbar,#hbar .hn{overflow:visible}
#mdmtmr-hero{position:absolute;z-index:7;display:flex;align-items:center;pointer-events:none;overflow:visible}
#mdmtmr-hero .hn-sep,#mdmtmr-hero .mdmtmr-nav{pointer-events:auto}
@media(max-width:700px){
  .mdmtmr-nav svg{width:20px;height:20px}
  .mdmtmr-nav::after{white-space:normal;width:max-content;max-width:min(62vw,16rem);left:auto;right:0;transform:none}
  .mdmtmr-nav::before{left:auto;right:12px;transform:none}
  #mdmtmr-hero{display:none}
  #hbar .hn .hn-sep{width:100%;height:1px;margin:6px 0;align-self:stretch}
  #hbar .hn a.mdmtmr-nav{align-self:stretch;justify-content:center;padding:6px 10px;background:rgba(248,243,234,.9);border:1px solid #2b2724}
  #hbar .hn a.mdmtmr-nav:hover{background:#111;color:var(--acc-text)}
}
@media(prefers-reduced-motion:reduce){.mdmtmr-nav::after,.mdmtmr-nav::before{transition:none}}

body.compact #mdmtmr-hero{display:none!important}

/* Helferlein inside home-hero SVG teasers (foreignObject) */
.hero-ai{margin:0;padding:0;line-height:0;color:#2b2724;--paper:#f8f3ea}
/* Paper backing (same .92 paper as the teasers) keeps the icon readable over waves and HUD texture */
.hero-ai .ai-helper{margin:0;vertical-align:top;padding:3px;background:rgba(248,243,234,.92)}
/* desktop secondary card: icon sits above the meta line, so the tip opens downward (clear of the HUD box above) */
.hero-ai.tip-down .ai-helper::after{bottom:auto;top:calc(100% + 10px)}
.hero-ai.tip-down .ai-helper::before{bottom:auto;top:calc(100% + 4px);border-top:0;border-bottom:6px solid #111}
