/* ===========================================================
   Potträning på 3 dagar — privat familjesida
   Tokens: bg dawn-blue-grey · ink deep pine · accent honey ·
   accent-2 muted teal · tip clay-rust
   Display: Fraunces · Body: Karla · Utility: IBM Plex Mono
=========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Karla:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --bg: #E9EEEF;
  --bg-deep: #DCE4E4;
  --surface: #FFFFFF;
  --surface-warm: #F6F3EA;
  --ink: #21332E;
  --ink-soft: #4C5E58;
  --accent: #E3A83B;
  --accent-ink: #6B4A0E;
  --accent-2: #4F7C74;
  --accent-2-soft: #DCE9E5;
  --tip: #C9633F;
  --tip-soft: #F7E3DA;
  --line: #C9D2CE;
  --radius: 14px;
  --shadow: 0 2px 10px rgba(33,51,46,0.06), 0 10px 30px rgba(33,51,46,0.05);
  --max-w: 780px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Karla',sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Fraunces',serif;
  font-weight:600;
  color:var(--ink);
  line-height:1.15;
  letter-spacing:-0.01em;
}
a{color:var(--accent-2); text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
}
img{max-width:100%; height:auto; border-radius:10px;}
p{margin:0 0 1.1em 0;}

.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent-2);
}

/* ---------- shell / nav ---------- */
.shell{max-width:960px; margin:0 auto; padding:0 24px;}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px; max-width:960px; margin:0 auto;
}
.brand{
  font-family:'Fraunces',serif; font-weight:600; font-size:1.15rem;
  display:flex; align-items:center; gap:10px; color:var(--ink);
}
.brand .mark{
  width:28px;height:28px;border-radius:50%;
  background:conic-gradient(var(--accent) 0 33%, var(--accent-2) 33% 66%, var(--tip) 66% 100%);
  flex:none;
}
nav.mainnav{display:flex; gap:4px; flex-wrap:wrap;}
nav.mainnav a{
  font-family:'Karla',sans-serif; font-weight:600; font-size:0.92rem;
  color:var(--ink-soft); padding:8px 14px; border-radius:999px;
}
nav.mainnav a:hover{background:var(--surface); text-decoration:none; color:var(--ink);}
nav.mainnav a.active{background:var(--ink); color:var(--surface);}

/* ---------- day path signature ---------- */
.daypath{
  display:flex; align-items:center; gap:0; margin:0 0 8px 0; user-select:none;
}
.daypath .dot{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:0.85rem;
  background:var(--surface); border:2px solid var(--line); color:var(--ink-soft);
  flex:none;
}
.daypath .dot.done{background:var(--accent-2); border-color:var(--accent-2); color:#fff;}
.daypath .dot.current{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.daypath .seg{flex:1; height:2px; background:var(--line); min-width:16px;}
.daypath .seg.done{background:var(--accent-2);}

/* ---------- hero / home ---------- */
.hero{padding:64px 0 40px;}
.hero h1{font-size:clamp(2.1rem,5vw,3rem); max-width:14ch;}
.hero p.lede{font-size:1.15rem; color:var(--ink-soft); max-width:46ch;}

.tilecards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px; margin:36px 0;
}
.tile{
  background:var(--surface); border-radius:var(--radius); padding:26px;
  box-shadow:var(--shadow); display:block; color:var(--ink);
}
.tile:hover{text-decoration:none; outline:2px solid var(--accent-2);}
.tile .eyebrow{margin-bottom:10px;}
.tile h2{font-size:1.3rem; margin:0 0 8px;}
.tile p{color:var(--ink-soft); margin:0; font-size:0.96rem;}

/* ---------- gate (password) ---------- */
.gate-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; background:
    radial-gradient(circle at 12% 18%, var(--accent-2-soft), transparent 40%),
    radial-gradient(circle at 88% 82%, var(--tip-soft), transparent 40%),
    var(--bg);
}
.gate-card{
  background:var(--surface); border-radius:20px; padding:44px 38px;
  max-width:400px; width:100%; box-shadow:var(--shadow); text-align:center;
}
.gate-card .mark{width:44px;height:44px;margin:0 auto 18px;
  border-radius:50%;
  background:conic-gradient(var(--accent) 0 33%, var(--accent-2) 33% 66%, var(--tip) 66% 100%);
}
.gate-card h1{font-size:1.5rem; margin:0 0 6px;}
.gate-card p{color:var(--ink-soft); font-size:0.95rem;}
.gate-card input[type=password]{
  width:100%; padding:13px 16px; border-radius:10px; border:1.5px solid var(--line);
  font-family:'Karla',sans-serif; font-size:1rem; margin:18px 0 10px; background:var(--bg);
}
.gate-card button{
  width:100%; padding:13px 16px; border-radius:10px; border:none;
  background:var(--ink); color:#fff; font-family:'Karla',sans-serif; font-weight:700;
  font-size:1rem; cursor:pointer;
}
.gate-card button:hover{background:var(--accent-2);}
.gate-error{color:var(--tip); font-size:0.88rem; min-height:1.2em; margin-top:8px;}

/* ---------- reading layout ---------- */
.reader-shell{
  display:grid; grid-template-columns:250px minmax(0,1fr); gap:40px;
  max-width:1080px; margin:0 auto; padding:0 24px 80px;
  align-items:start;
}
.reader-nav{
  position:sticky; top:24px; background:var(--surface); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow); font-size:0.9rem; max-height:calc(100vh - 48px);
  overflow-y:auto;
}
.reader-nav h3{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em;
  font-family:'IBM Plex Mono',monospace; font-weight:500; color:var(--ink-soft); margin:18px 0 8px;}
.reader-nav h3:first-child{margin-top:0;}
.reader-nav ol,.reader-nav ul{list-style:none; margin:0 0 4px; padding:0;}
.reader-nav li a{
  display:block; padding:7px 10px; border-radius:8px; color:var(--ink-soft);
  font-weight:600;
}
.reader-nav li a:hover{background:var(--bg); text-decoration:none;}
.reader-nav li a.active{background:var(--accent-2); color:#fff;}

.reader-main{
  background:var(--surface); border-radius:var(--radius); padding:44px 48px;
  box-shadow:var(--shadow);
}
.reader-main .kicker{display:flex; align-items:center; gap:10px; margin-bottom:6px;}
.reader-main .eyebrow{margin:0;}
.reader-main h1{font-size:2rem; margin:0 0 28px;}
.reader-main img{display:block; margin:24px auto;}
.reader-main .tip-heading{
  font-family:'Karla',sans-serif; font-weight:700; color:var(--tip);
  font-size:1.02rem; margin:1.6em 0 0.3em;
}
.reader-main p:has(+ .tip-heading){margin-bottom:0.3em;}
.reader-main .sub-heading{
  font-family:'Fraunces',serif; font-weight:600; color:var(--ink);
  font-size:1.2rem; margin:1.7em 0 0.5em;
}
.reader-main em{color:var(--ink); background:var(--accent-2-soft); padding:0 3px; border-radius:4px; font-style:normal;}

.chapter-pager{
  display:flex; justify-content:space-between; gap:16px; margin-top:44px;
  padding-top:26px; border-top:1px solid var(--line);
}
.chapter-pager a{
  font-weight:700; padding:10px 16px; border-radius:10px; background:var(--bg);
  color:var(--ink); flex:1;
}
.chapter-pager a:last-child{text-align:right;}
.chapter-pager a:hover{background:var(--accent-2-soft); text-decoration:none;}
.chapter-pager .lbl{display:block; font-size:0.72rem; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:0.06em;}

/* ---------- audio page ---------- */
.audio-group{margin:34px 0;}
.audio-group h2{font-size:1.15rem; display:flex; align-items:center; gap:10px;}
.audio-list{display:flex; flex-direction:column; gap:10px;}
.audio-item{
  background:var(--surface); border-radius:12px; padding:14px 18px; box-shadow:var(--shadow);
}
.audio-item .row{display:flex; align-items:center; gap:14px; cursor:pointer;}
.audio-item .num{
  font-family:'IBM Plex Mono',monospace; font-size:0.8rem; color:var(--ink-soft);
  width:28px; flex:none;
}
.audio-item .title{font-weight:700; flex:1;}
.audio-item .dur{font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--ink-soft);}
.audio-item audio{width:100%; margin-top:12px; display:none;}
.audio-item.open audio{display:block;}
.audio-item.playing .row .title{color:var(--accent-2);}
.audio-item .played-badge{
  font-family:'IBM Plex Mono',monospace; font-size:0.68rem; color:var(--accent-2);
  border:1px solid var(--accent-2); border-radius:999px; padding:2px 8px; display:none;
}
.audio-item.was-played .played-badge{display:inline-block;}

/* ---------- faq / glossary ---------- */
.page-main{max-width:var(--max-w); margin:0 auto; padding:20px 24px 80px;}
.page-main h1{font-size:2.1rem;}
.page-main p.lede{color:var(--ink-soft); font-size:1.08rem;}
details.faq{
  background:var(--surface); border-radius:12px; padding:18px 22px; margin:12px 0; box-shadow:var(--shadow);
}
details.faq summary{
  font-family:'Fraunces',serif; font-weight:600; font-size:1.08rem; cursor:pointer; list-style:none;
}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::before{content:"+ "; color:var(--accent-2); font-family:'IBM Plex Mono',monospace;}
details.faq[open] summary::before{content:"– ";}
details.faq p{margin-top:12px; color:var(--ink-soft);}

table.glossary{width:100%; border-collapse:collapse; margin:24px 0; background:var(--surface); border-radius:12px; overflow:hidden; box-shadow:var(--shadow);}
table.glossary th,table.glossary td{text-align:left; padding:12px 16px; border-bottom:1px solid var(--line);}
table.glossary th{background:var(--bg-deep); font-family:'IBM Plex Mono',monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em;}
table.glossary tr:last-child td{border-bottom:none;}
table.glossary td.sv{font-weight:700;}
table.glossary td.note{color:var(--ink-soft); font-size:0.92rem;}

.footer-note{
  max-width:960px; margin:40px auto 60px; padding:0 24px;
  color:var(--ink-soft); font-size:0.85rem; text-align:center;
}

@media (max-width:840px){
  .reader-shell{grid-template-columns:1fr; padding:0 16px 60px;}
  .reader-nav{position:static; max-height:none;}
  .reader-main{padding:30px 24px;}
  .topbar{flex-direction:column; gap:14px; align-items:flex-start;}
}

/* ---------- gate: animated poop-rain login ---------- */
.gate-wrap{ position:relative; overflow:hidden; }
.poop-rain{
  position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:1;
}
.poop-rain span{
  position:absolute; top:-60px; font-size:1.6rem; opacity:0.85;
  animation-name:pott-fall; animation-timing-function:linear; animation-iteration-count:infinite;
  will-change:transform;
}
@keyframes pott-fall{
  0%{ transform:translateY(0) rotate(0deg); }
  100%{ transform:translateY(110vh) rotate(340deg); }
}
.ground-potties{
  position:fixed; left:0; right:0; bottom:0; height:64px; z-index:1;
  display:flex; align-items:flex-end; justify-content:space-evenly; pointer-events:none;
}
.ground-potties svg{ width:38px; height:38px; animation:pott-bounce 2.6s ease-in-out infinite; }
.ground-potties svg:nth-child(2n){ animation-delay:0.4s; }
.ground-potties svg:nth-child(3n){ animation-delay:0.9s; }
.ground-potties svg:nth-child(4n){ animation-delay:1.3s; }
@keyframes pott-bounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}
.gate-card{ position:relative; z-index:2; }
.gate-card .joke{
  font-size:0.85rem; color:var(--ink-soft); margin-top:2px;
}
.gate-card .sub-en{ font-size:0.78rem; color:var(--ink-soft); opacity:0.8; margin-top:-4px; }
.gate-card button[disabled]{ opacity:0.7; cursor:default; }
.gate-card.shake{ animation:pott-shake 0.4s; }
@keyframes pott-shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-8px); }
  40%{ transform:translateX(7px); }
  60%{ transform:translateX(-5px); }
  80%{ transform:translateX(4px); }
}
@media (prefers-reduced-motion: reduce){
  .poop-rain span, .ground-potties svg, .gate-card.shake{ animation:none !important; }
}