/* Logged-in onboarding todo flow. */
.home-todo-list{display:grid;gap:var(--space-2);margin-top:var(--space-3)}
.home-todo-list .home-registration-card{margin-top:0}
.home-todo-list .home-registration-card:not(:last-child){
    min-height:124px;
    padding-bottom:var(--space-4);
    border-radius:var(--radius-lg);
    box-shadow:0 12px 34px rgba(13,25,20,.16),inset 0 1px 0 rgba(255,255,255,.96)
}
.home-todo-card--agreement .home-registration-card__icon{background:#e8efe9;color:var(--green)}
.home-todo-card--agreement .home-registration-card__copy small{color:var(--green)}
.home-todo-card--done{border-color:rgba(49,73,61,.22)}
.home-todo-card--done .home-registration-card__copy small{color:var(--green)}
.home-todo-card--done .home-registration-card__copy>span{color:var(--muted)}
.home-todo-card__done-icon{font-size:var(--font-lg);font-weight:700;line-height:var(--line-tight)}
.home-auth-state--member[data-shortcuts-unlocked="0"] .home-todo-list .home-registration-card:nth-child(1){animation-delay:1.84s}
.home-auth-state--member[data-shortcuts-unlocked="0"] .home-todo-list .home-registration-card:nth-child(2){animation-delay:1.94s}

/* Explicit toilet agreement page; factual safety copy comes from houseTopicDocumentationCopy(). */
.toilet-agreement-page{padding-top:var(--space-4);padding-bottom:42px}
.toilet-agreement-intro,.toilet-agreement-rule,.toilet-agreement-status{margin-bottom:var(--space-3)}
.toilet-agreement-intro{
    padding:var(--space-5);
    display:grid;
    grid-template-columns:calc(var(--icon-box-lg) + var(--space-1)) minmax(0,1fr);
    gap:var(--space-3);
    align-items:start
}
.toilet-agreement-intro__icon,.toilet-agreement-status__icon{
    width:var(--icon-box-lg);
    height:var(--icon-box-lg);
    border-radius:var(--radius-md);
    display:grid;
    place-items:center;
    background:#e8efe9;
    color:var(--green);
    font-size:var(--font-lg)
}
.toilet-agreement-intro small{
    display:block;
    color:var(--terracotta);
    font-size:var(--font-sm);
    font-weight:var(--weight-bold);
    letter-spacing:.08em;
    text-transform:uppercase
}
.toilet-agreement-intro h1{
    margin:var(--space-1) 0 var(--space-2);
    font-family:var(--font-heading-family);
    font-size:var(--font-lg);
    font-weight:var(--weight-medium);
    line-height:var(--line-tight)
}
.toilet-agreement-intro p,.toilet-agreement-status p{margin:0;color:var(--muted);line-height:var(--line-copy)}
.toilet-agreement-intro p strong,.toilet-agreement-rule li strong{color:var(--text);font-weight:700}
.toilet-agreement-rule{padding:var(--space-5)}
.toilet-agreement-rule__title{
    display:grid;
    grid-template-columns:calc(var(--icon-box-lg) + var(--space-1)) minmax(0,1fr);
    gap:var(--space-3);
    align-items:center;
    margin-bottom:var(--space-3)
}
.toilet-agreement-rule__title>span{
    width:var(--icon-box-lg);
    height:var(--icon-box-lg);
    border-radius:var(--radius-md);
    display:grid;
    place-items:center;
    background:#f3ebe4;
    color:var(--terracotta)
}
.toilet-agreement-rule__title h2{margin:0;font-family:var(--font-heading-family);font-weight:var(--weight-medium)}
.toilet-agreement-rule ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.toilet-agreement-rule li{position:relative;padding-left:var(--space-5);color:var(--muted);line-height:var(--line-copy)}
.toilet-agreement-rule li::before{
    content:"";
    position:absolute;
    left:2px;
    top:.62em;
    width:7px;
    height:7px;
    border-radius:var(--radius-round);
    background:var(--terracotta)
}
.toilet-agreement-waste{
    margin-top:var(--space-4);
    padding:var(--space-3) var(--space-3);
    border:1px solid var(--green-tint);
    border-radius:var(--radius-md);
    display:grid;
    grid-template-columns:38px minmax(0,1fr) 18px;
    gap:var(--space-3);
    align-items:center;
    background:#f4f6f2;
    color:var(--green)
}
.toilet-agreement-waste>span:first-child{width:38px;height:38px;border-radius:var(--radius-round);display:grid;place-items:center;background:#e3ebe5}
.toilet-agreement-waste>span:nth-child(2){min-width:0;display:block}
.toilet-agreement-waste strong{display:block;font-size:var(--font-sm)}
.toilet-agreement-waste small{display:block;margin-top:2px;color:var(--muted);font-size:var(--font-xs);line-height:var(--line-normal)}
.toilet-agreement-waste>.app-icon{justify-self:end;font-size:var(--font-xs)}
.toilet-agreement-rule__confirmation{
    margin:var(--space-4) 0 0;
    padding-top:var(--space-4);
    border-top:1px solid var(--line);
    color:var(--text);
    font-weight:700;
    line-height:var(--line-copy)
}
.toilet-agreement-status{
    padding:var(--space-4);
    display:grid;
    grid-template-columns:calc(var(--icon-box-lg) + var(--space-1)) minmax(0,1fr);
    gap:var(--space-3);
    align-items:center
}
.toilet-agreement-status strong{display:block;font-size:var(--font-lg)}
.toilet-agreement-status--done .toilet-agreement-status__icon{background:#e8efe9;color:var(--green)}
.toilet-agreement-page>.primary-button{width:100%;justify-content:center}

/* Optional long-form bathroom easter egg below the real agreement. */
.toilet-story{margin-top:52px;padding-top:10px}
.toilet-story__head{padding:0 8px 18px}
.toilet-story__head small{display:block;color:var(--terracotta);font-size:var(--font-xs);font-weight:800;letter-spacing:.1em;line-height:var(--line-normal);text-transform:uppercase}
.toilet-story__head h2{margin:7px 0 10px;font-family:var(--font-heading-family);font-size:var(--font-xl);font-weight:500;line-height:var(--line-tight);letter-spacing:-.025em;color:var(--text)}
.toilet-story__head p{margin:0;color:var(--muted);font-size:var(--font-sm);line-height:var(--line-copy)}
.toilet-story__chapter{position:relative;margin-bottom:18px;padding:22px;overflow:hidden}
.toilet-story__chapter::after{content:"";position:absolute;right:-30px;top:-32px;width:100px;height:100px;border-radius:var(--radius-round);background:rgba(49,73,61,.035);pointer-events:none}
.toilet-story__meta{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.toilet-story__meta>span{width:31px;height:31px;border-radius:var(--radius-round);display:grid;place-items:center;background:var(--green);color:#fff;font-size:var(--font-xs);font-weight:800;letter-spacing:.03em}
.toilet-story__meta small{color:var(--terracotta);font-size:var(--font-xs);font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.toilet-story__chapter h3{margin:0 0 10px;font-family:var(--font-heading-family);font-size:var(--font-lg);font-weight:500;line-height:var(--line-tight);color:var(--text)}
.toilet-story__chapter>p{margin:0;color:var(--muted);font-size:var(--font-sm);line-height:var(--line-copy)}
.toilet-story__chapter:nth-of-type(4n+2){margin-left:10px}
.toilet-story__chapter:nth-of-type(4n+3){margin-right:10px}
.toilet-story__chapter--bolus{border:2px solid rgba(183,112,75,.46);background:linear-gradient(150deg,#fffdf9,#f6eee6)}
.toilet-story__achievement{margin-top:18px;padding:15px;border-radius:var(--radius-md);display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:center;background:var(--terracotta);color:#fff;box-shadow:var(--shadow-card)}
.toilet-story__achievement>.app-icon{font-size:var(--font-lg);justify-self:center}
.toilet-story__achievement strong{display:block;font-size:var(--font-sm);letter-spacing:.055em}
.toilet-story__achievement span{display:block;margin-top:2px;font-size:var(--font-xs);line-height:var(--line-normal);color:rgba(255,255,255,.86)}
.toilet-story__waste-link{margin-top:18px;padding-top:15px;border-top:1px solid var(--line);display:grid;grid-template-columns:24px minmax(0,1fr) 18px;gap:9px;align-items:center;color:var(--green);font-size:var(--font-xs);font-weight:800}
.toilet-story__waste-link>.app-icon:last-child{justify-self:end;font-size:var(--font-xs)}
.toilet-story__outro{margin:30px 8px 0;padding:22px 0 8px;border-top:1px solid var(--line);color:var(--muted);font-family:var(--font-heading-family);font-size:var(--font-lg);line-height:var(--line-normal);text-align:center}

/* Endless WC-scroll is generated from data/toilet-scroll.json as the sentinel approaches. */
.toilet-story__generated-feed{margin-top:24px}
.toilet-story__chapter--generated{animation:ToiletStoryChapterIn .34s ease both}
.toilet-story__chapter--fact{border-left:3px solid var(--green)}
.toilet-story__chapter--slogan{background:linear-gradient(145deg,#fffdf9,#f5eee7);border:1px dashed rgba(183,112,75,.38)}
.toilet-story__chapter--slogan h3{font-size:var(--font-md);letter-spacing:.04em;text-transform:uppercase;color:var(--terracotta)}
.toilet-story__chapter--slogan>p{font-family:var(--font-heading-family);font-size:var(--font-lg);line-height:var(--line-normal);color:var(--text)}
.toilet-story__chapter--special{border:1px solid rgba(49,73,61,.16);box-shadow:var(--shadow-elevated)}
.toilet-story__chapter--rick{background:linear-gradient(145deg,#edf4ef,#fffaf4);border:2px solid rgba(49,73,61,.22)}
.toilet-story__chapter--rick::before{content:"🧻";position:absolute;right:20px;top:18px;font-size:var(--font-xl);transform:rotate(11deg)}
.toilet-story__chapter--rick h3{padding-right:42px}
.toilet-story__waste-icon,.toilet-story__waste-arrow{font-style:normal}
.toilet-story__waste-arrow{justify-self:end}
.toilet-story__sentinel{min-height:108px;margin:8px 0 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);text-align:center}
.toilet-story__sentinel-dot{width:12px;height:12px;border-radius:var(--radius-round);background:var(--terracotta);box-shadow:0 0 0 0 rgba(183,112,75,.28);animation:ToiletStoryPulse 1.8s ease-out infinite}
.toilet-story__sentinel strong{max-width:300px;font-size:var(--font-xs);line-height:var(--line-normal);letter-spacing:.035em}
@keyframes ToiletStoryChapterIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ToiletStoryPulse{0%{box-shadow:0 0 0 0 rgba(183,112,75,.28)}70%,100%{box-shadow:0 0 0 13px rgba(183,112,75,0)}}

@media(max-height:760px){
    .home-todo-list .home-registration-card{min-height:112px}
}

@media(max-width:420px){
    .toilet-story{margin-top:44px}
    .toilet-story__chapter{padding:19px}
    .toilet-story__chapter:nth-of-type(4n+2){margin-left:5px}
    .toilet-story__chapter:nth-of-type(4n+3){margin-right:5px}
}

@media(prefers-reduced-motion:reduce){
    .toilet-story__chapter--generated{animation:none}
    .toilet-story__sentinel-dot{animation:none}
}