/* Base / reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root { --topbar-h: 56px; }  /* default; JS will keep it exact */


html {
    min-height: 100%;
    scroll-behavior: auto;
    scroll-padding-top: var(--topbar-h);
}

/* Prevent visible jump during initial centering */
html.pre-intro, html.pre-intro body {
    /*overflow: hidden; -- better not have the scrollbars appear and disappear */
    scroll-behavior: auto;   /* <- critical: no browser "smooth" during intro */
}

body {
    margin: 0;
    min-height: 100%;
    height: auto;
    --bg-1: #00daa0;
    --bg-2: #ad60da;
    --bg-3: #ffffff;
    --feed-bg: var(--bg2);
    --ink: #003010;
    color: var(--ink);
    font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background: radial-gradient(20vw 30vw at 80vw 10vw, var(--bg-1) 20vw, var(--bg-2) 60vw, var(--bg-3) 150vw);
}

a {
    color: inherit;
    text-decoration: none;
}

a:visited {
    color: inherit;
}

/* Splash */
.splash {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.splash__logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-mask-image: linear-gradient(to bottom, black 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 72%, transparent 100%);
    opacity: 0;                 /* keep invisible until we've scrolled to the right spot */
    transition: opacity .6s ease-out;
}
.splash__logo.reveal { opacity: 1; }

@keyframes fade {
    to { opacity: 1; }
}


/* Topbar */
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #00daad url('topbar-background.png') center/cover no-repeat;
  
  /* apply fade-out only to the background */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.5));
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.5));
  mask-repeat: no-repeat;
  mask-size: cover;

  z-index: 0;
}

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  opacity: 0;
  backdrop-filter: blur(6px);
  transition: opacity .45s ease;
  overflow: visible; /* ??? contain ::before */
}
.topbar.show { opacity: 1; }

.topbar__inner {
  position: relative;
  z-index: 1; /* ensure text/foreground sits above masked bg */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 0.3rem 0.8rem; /* smaller height */
  min-height: 2.5rem;     /* force a reasonable bar height */
}

.hamburger {
  font-size: 1.5rem;
  cursor: pointer;
  user-select: none;
  padding: 0.5rem;
}

.tabs.menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;   /* below the bar */
  left: 0;     /* align to hamburger */
  background: rgba(255,255,255,0.9); /* visible against backdrop */
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 6px;
  padding: 0.25rem 0;
  min-width: 10rem;     /* snug, not 100% wide */
  z-index: 5000;        /* ensure above ::before and topbar__inner */
}

.menu-toggle:checked + .hamburger + .menu.tabs {
  display: flex;
}

.tabs.menu .tab {
  display: block;       /* vertical stack */
  padding: 0.5rem 1rem;
  white-space: nowrap;
  color: #000;          /* readable text */
}

.tabs.menu .tab:hover {
  background: rgba(0,0,0,0.05);
}

.tab, .tabs .tab:visited {
    color: inherit;
    text-decoration: none;
    padding: .35rem .6rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    font-weight: 600;
    opacity: .95;
    display: inline-block;
}

.lang {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.langSelect {
    background: transparent;
    color: var(--ink);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    padding: .25rem .5rem;
    font-weight: 600;
}
.langSelect option {
    background: var(--bg-3);
}

/* Main feed */
main {
    background: var(--feed-bg);
}

.muted { opacity: .8; }

#sentinel.sentinel {
    display: block;
    height: 1px;     /* keeps IntersectionObserver working */
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: transparent;
}

/* Cards */
.post {
 /* background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1); */
    border-radius: 16px;
    padding: 1rem 1.2rem;
 /* box-shadow: 0 10px 30px rgba(0,0,0,.18); */
 /* scroll-margin-top: var(--topbar-h); already in html */
}

.post .meta {
    font-size: .85rem;
    opacity: .85;
    margin-bottom: .75rem;
}

.post .content p {
    margin-top: 0;
    margin-bottom: 1rem;
}
.post .content h1,
.post .content h2,
.post .content h3,
.post .content h4,
.post .content h5,
.post .content h6 {
    margin-top: 1.25rem;
    margin-bottom: 0rem;
}

.post .content h1 {
    font-family: "Cinzel", serif;
    font-size: 200%;l
    font-weight: 500;
    letter-spacing: .03em;
    color: #bacdd4;
    text-shadow: 0 1px 2px #111, 0 0 20px #00daad;
}

.post .content h2 {
    font-size: 160%;
    letter-spacing: .05em;
    color: #bacdd4;
    text-shadow: 0 1px 2px #111;
}

.post .content h3 {
    font-size: 120%;
    font-weight: 500;
}

.post .content h4 {
    font-size: 120%;
}

/* Keep bullets INSIDE the text box so they don't poke into the float */
.post .content :is(ul, ol) {
    list-style-position: inside;
}

/* Nice readable spacing for each item */
.post .content li {
    margin: .25rem 0;
}



/* ── Inline embeds (float L/R, size clamp, keep aspect) ─────────────────── */
.post .content .media.embed {
    position: relative;
    display: inline-block;
    vertical-align: top;
    float: left;                 /* default */
    margin-right: .75rem;
    margin-bottom: .5rem;

    /* your previous clamp & height bounds moved to the wrapper */
    max-width: clamp(220px, 45%, 520px);
}
.post .content .media.embed.right {
    float: right;
    margin-right: 0;
    margin-left: .75rem;
}

.post .content .media.embed.lone {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

/* Children fill the wrapper, preserve aspect ratio */
.post .content .media.embed img,
.post .content .media.embed video {
    display: block;
    max-width: 100%;   /* never exceed wrapper width */
    max-height: 65vh;  /* also respect viewport height */
    width: auto;       /* shrink width when height cap kicks in */
    height: auto;      /* natural aspect ratio */
    object-fit: contain;  /* relevant for <video>, harmless for <img> */
    border-radius: 12px;  /* move rounding here */
}

/* Overlay action (⋮ or ❌) */
.post .content .media button {
    position: absolute; 
    top: 0px; 
    right: 0px;
    background: transparent;
    border: none;
    padding-inline-start: 0px;
    padding-inline-end: 0px;    
}

/* Clear floats like before */
.post .content::after { content: ""; display: block; clear: both; }

/* ── Gallery / leftover stack (no floats, grid tiles) ───────────────────── */
.media-stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .5rem;
    margin: .75rem 0 1rem;
}
.media-stack .media {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}
.media-stack .media img,
.media-stack .media video {
    display: block;
    max-width: 100%;
    max-height: 65vh;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
}
/* never float inside gallery */
.media-stack .media.embed { float: none; margin: 0; }

/* ── Mobile: drop floats & widen embeds ─────────────────────────────────── */
@media (max-width: 640px) {
    .post .content .media.embed {
	float: none;
	margin: 0 0 .5rem 0;
	max-width: 100%;
    }
}


/* Helpers */
.center { text-align: center; }
.js-hidden { display: none; }

.template { display: none; }



.auth-avatar {
    width: 32px;       /* adjust size, try 28–40px */
    height: 32px;
    border-radius: 50%; /* makes it round */
    object-fit: cover;  /* crops nicely inside circle */
    vertical-align: middle;
}

button {
    font-weight: 600;
    font-family: system-ui;   
    cursor: pointer;
}

button:not(.media button) {
    background: transparent;
    color: var(--ink);
    border: 1px solid #00daad80;
    border-radius: 999px;
    padding: .25rem .5rem;
}

button.newpost {
    margin-left: 20px;
    font-size: 300%;
    line-height: 0.9
}

pre {
    background: #e0e0e0;
    border: 1pt solid black;
    white-space: pre-wrap;   /* allow wrap instead of endless line */
    word-break: break-word;  /* break overly long tokens if needed */
    max-width: 100%;         /* never exceed container */
    box-sizing: border-box;
    overflow: scroll;
}

table {
    border-top: 2pt solid black;
    border-bottom: 2pt solid black;
    border-collapse: separate;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    width: max-content;   /* shrink to fit content */
    max-width: 100%;      /* but don’t exceed viewport */
    box-sizing: border-box;
}

thead:first-child tr:first-child :is(th, td) {
    border-top: 1pt solid black;
}
thead:first-child tr:last-child :is(th, td) {
    border-bottom: 1pt solid black;
}
tbody:last-child tr:last-child :is(th, td) {
    border-bottom: 1pt solid black;
}

.risk-inline { display:inline-flex; gap:.35rem; margin-left:.5rem; vertical-align:middle; }
.risk-chip { padding:.1rem .4rem; border-radius:.4rem; font-size:.85em; background:#f6f6f6; }
.risk-chip.score { background:#eef6ff; }
.risk-chip.clear { background:#eaf7ea; }
.risk-chip.flagged { background:#fff3cd; }
.risk-panel { margin:.75rem 0 1rem; border:1px solid #eee; border-radius:.5rem; padding:.5rem .75rem; background:#fff; }
.risk-panel > summary { cursor:pointer; font-weight:600; }
.risk-row { margin:.25rem 0; }
.risk-list { margin:.5rem 0 0 1rem; padding:0; }
.risk-item { margin:.35rem 0; }
.risk-item .risk-head { display:flex; gap:.35rem; align-items:center; font-size:.9em; }
.risk-item .sev { text-transform:uppercase; font-weight:700; }
.risk-item.high   .sev { color:#9c2f00; }
.risk-item.medium .sev { color:#aa7a00; }
.risk-item.low    .sev { color:#5c7; }
.rid { background:#f6f6f6; padding:.05rem .25rem; border-radius:.25rem; }
.risk-text { margin:.25rem 0; }
.risk-suggestion { margin:.1rem 0; font-weight:600; }
.risk-rationale { opacity:.85; font-size:.9em; }
.btn-review-toggle { margin-left:.5rem; }