/* Compact mandatory toilet agreement, explanatory context and bolus HUD. */
.toilet-agreement-page.is-compact-agreement>.toilet-agreement-intro,
.toilet-agreement-page.is-compact-agreement>.toilet-agreement-rule,
.toilet-agreement-page.is-compact-agreement>.toilet-agreement-status,
.toilet-agreement-page.is-compact-agreement>.primary-button{
    display:none!important
}

.toilet-agreement-compact{
    display:flex;
    align-items:center;
    gap:var(--space-4);
    padding:var(--space-5);
    margin-bottom:var(--space-3)
}
.toilet-agreement-compact__icon{
    width:var(--icon-box-xl);
    height:var(--icon-box-xl);
    flex:0 0 58px;
    display:grid;
    place-items:center;
    border-radius:var(--radius-md);
    background:rgba(183,112,75,.12);
    color:var(--terracotta);
    font-size:var(--font-lg)}
.toilet-agreement-compact__copy{
    display:flex;
    min-width:0;
    flex-direction:column;
    gap:var(--space-1)
}
.toilet-agreement-compact__copy strong{
    color:var(--text);
    font-family:var(--font-heading-family);
    font-size:var(--font-lg);
    font-weight:500;
    line-height:var(--line-tight)}
.toilet-agreement-compact__copy span{
    color:var(--muted);
    font-size:var(--font-md);
    font-weight:700;
    line-height:var(--line-normal)}

.toilet-agreement-compact-agree{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-3);
    min-height:64px;
    margin:0;
    padding:var(--space-3) var(--space-4);
    border:1px solid rgba(49,73,61,.18);
    border-radius:var(--radius-md);
    background:rgba(255,255,255,.78);
    color:var(--text);
    cursor:pointer;
    user-select:none;
    box-shadow:var(--shadow-card);
    transition:.2s ease
}
.toilet-agreement-compact-agree input{
    position:absolute;
    opacity:0;
    pointer-events:none
}
.toilet-agreement-compact-agree__box{
    position:relative;
    width:30px;
    height:30px;
    flex:0 0 30px;
    border:2px solid rgba(49,73,61,.36);
    border-radius:var(--radius-sm);
    background:#fff;
    transition:.18s ease
}
.toilet-agreement-compact-agree__box::after{
    content:"";
    position:absolute;
    left:8px;
    top:4px;
    width:8px;
    height:14px;
    border:solid #fff;
    border-width:0 3px 3px 0;
    transform:rotate(45deg) scale(.72);
    opacity:0;
    transition:.18s ease
}
.toilet-agreement-compact-agree strong{
    font-size:var(--font-md);
    line-height:var(--line-tight)}
.toilet-agreement-compact-agree input:checked+.toilet-agreement-compact-agree__box,
.toilet-agreement-compact-agree.is-checked .toilet-agreement-compact-agree__box{
    border-color:var(--green);
    background:var(--green);
    box-shadow:0 0 0 5px var(--green-tint)
}
.toilet-agreement-compact-agree input:checked+.toilet-agreement-compact-agree__box::after,
.toilet-agreement-compact-agree.is-checked .toilet-agreement-compact-agree__box::after{
    opacity:1;
    transform:rotate(45deg) scale(1)
}
.toilet-agreement-compact-agree.is-checked{
    border-color:rgba(49,73,61,.28);
    background:var(--green-tint)
}

.toilet-agreement-context{display:none}
.toilet-agreement-context__status{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-4);
    padding:0 var(--space-2);
    color:var(--muted);
    font-size:var(--font-xs);
    line-height:var(--line-normal)}
.toilet-agreement-context__status strong{
    flex:0 0 auto;
    color:var(--terracotta);
    font-size:var(--font-xs)}
.toilet-agreement-context__status.is-confirmed strong{color:var(--green)}
.toilet-agreement-context__card{
    margin:0;
    padding:var(--space-5);
    border-color:var(--green-tint);
    background:rgba(255,255,255,.68)
}
.toilet-agreement-context__card h2{
    margin:0 0 var(--space-2);
    color:var(--text);
    font-family:var(--font-heading-family);
    font-size:var(--font-lg);
    font-weight:500;
    line-height:var(--line-tight)}
.toilet-agreement-context__card>p{
    margin:0;
    color:var(--muted);
    font-size:var(--font-sm);
    line-height:var(--line-copy)}
.toilet-agreement-context__card>p+p{margin-top:var(--space-2)}
.toilet-agreement-context__info{
    display:flex;
    align-items:flex-start;
    gap:var(--space-3);
    margin-top:var(--space-4);
    padding-top:var(--space-4);
    border-top:1px solid var(--green-tint)
}
.toilet-agreement-context__info.is-secondary{margin-top:var(--space-3);padding-top:var(--space-3)}
.toilet-agreement-context__info-icon{
    width:var(--icon-box-md);
    height:var(--icon-box-md);
    flex:0 0 38px;
    display:grid;
    place-items:center;
    border-radius:var(--radius-sm);
    background:var(--green-tint);
    color:var(--green);
    font-size:var(--font-md)}
.toilet-agreement-context__info strong{
    display:block;
    margin:1px 0 var(--space-1);
    color:var(--text);
    font-size:var(--font-sm);
    line-height:var(--line-normal)}
.toilet-agreement-context__info p{
    margin:0;
    color:var(--muted);
    font-size:var(--font-sm);
    line-height:var(--line-normal)}
.toilet-agreement-context__routing>p{margin-bottom:var(--space-4)}
.toilet-agreement-context__grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--space-2)
}
.toilet-agreement-context__grid-item{
    min-height:104px;
    padding:var(--space-3);
    border-radius:var(--radius-md);
    background:rgba(49,73,61,.055)
}
.toilet-agreement-context__grid-item strong{
    display:block;
    margin-bottom:var(--space-1);
    font-size:var(--font-sm);
    line-height:var(--line-tight)}
.toilet-agreement-context__grid-item span{
    display:block;
    color:var(--text);
    font-size:var(--font-sm);
    line-height:var(--line-normal)}
.toilet-agreement-context__grid-item.is-positive strong{color:var(--green)}
.toilet-agreement-context__grid-item.is-caution strong{color:#98602f}
.toilet-agreement-context__doubt{
    padding-block:18px
}
.toilet-agreement-context__doubt h2{font-size:var(--font-lg)}

.toilet-story{margin-top:84px}
.toilet-story__head{padding-bottom:var(--space-3)}
.toilet-story__outro{display:none}

.toilet-bolus-score{
    position:fixed;
    z-index:92;
    left:50%;
    bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px));
    transform:translate(-50%,14px);
    display:flex;
    align-items:center;
    gap:var(--space-2);
    padding:var(--space-2) var(--space-3);
    border:1px solid rgba(255,255,255,.48);
    border-radius:var(--radius-pill);
    background:rgba(31,49,40,.88);
    color:#fff;
    box-shadow:var(--shadow-card);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    opacity:0;
    pointer-events:none;
    transition:.25s ease
}
.toilet-bolus-score.is-visible{opacity:1;transform:translate(-50%,0)}
.toilet-bolus-score__icon{font-size:var(--font-md)}
.toilet-bolus-score strong{font-size:var(--font-xs);letter-spacing:.02em}
.toilet-bolus-score span:last-child{font-size:var(--font-xs);color:rgba(255,255,255,.76)}

.toilet-bolus-modal{
    position:fixed;
    inset:0;
    z-index:100;
    display:grid;
    place-items:center;
    padding:var(--space-6);
    background:rgba(16,27,22,.48);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    opacity:0;
    visibility:hidden;
    transition:.2s ease
}
.toilet-bolus-modal.is-open{opacity:1;visibility:visible}
.toilet-bolus-modal__card{
    width:min(360px,100%);
    padding:var(--space-6);
    border:1px solid rgba(255,255,255,.72);
    border-radius:var(--radius-lg);
    background:linear-gradient(145deg,#fffdf9,#f3e7da);
    box-shadow:var(--shadow-elevated);
    text-align:center;
    transform:translateY(14px) scale(.97);
    transition:.24s ease
}
.toilet-bolus-modal.is-open .toilet-bolus-modal__card{transform:none}
.toilet-bolus-modal__badge{
    width:var(--icon-box-xl);
    height:var(--icon-box-xl);
    margin:0 auto var(--space-3);
    border-radius:var(--radius-round);
    display:grid;
    place-items:center;
    background:var(--terracotta);
    color:#fff;
    font-size:var(--font-lg);
    box-shadow:var(--shadow-card)}
.toilet-bolus-modal small{
    display:block;
    color:var(--terracotta);
    font-size:var(--font-xs);
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase
}
.toilet-bolus-modal h3{
    margin:var(--space-1) 0 var(--space-2);
    font-family:var(--font-heading-family);
    font-size:var(--font-xl);
    font-weight:500;
    color:var(--text)
}
.toilet-bolus-modal p{margin:0;color:var(--muted);font-size:var(--font-sm);line-height:var(--line-normal)}
.toilet-bolus-modal__points{
    display:inline-block;
    margin:var(--space-3) 0;
    padding:var(--space-2) var(--space-3);
    border-radius:var(--radius-pill);
    background:rgba(183,112,75,.12);
    color:var(--terracotta);
    font-size:var(--font-sm);
    font-weight:800
}
.toilet-bolus-modal button{width:100%;justify-content:center}

@media(max-width:420px){
    .toilet-agreement-compact{padding:var(--space-4);gap:var(--space-3)}
    .toilet-agreement-compact__icon{width:var(--icon-box-lg);height:var(--icon-box-lg);flex-basis:var(--icon-box-lg);font-size:var(--font-lg)}
    .toilet-agreement-compact__copy strong{font-size:var(--font-lg)}
    .toilet-agreement-compact__copy span{font-size:var(--font-sm)}
    .toilet-agreement-compact-agree{min-height:var(--control-lg)}
    .toilet-agreement-context{gap:var(--space-3)}
    .toilet-agreement-context__status{padding-inline:6px;font-size:var(--font-xs)}
    .toilet-agreement-context__status strong{font-size:var(--font-xs)}
    .toilet-agreement-context__card{padding:var(--space-4)}
    .toilet-agreement-context__card>p{font-size:var(--font-sm)}
    .toilet-agreement-context__grid{gap:var(--space-2)}
    .toilet-agreement-context__grid-item{min-height:100px;padding:var(--space-3)}
    .toilet-agreement-context__grid-item strong,.toilet-agreement-context__grid-item span{font-size:var(--font-xs)}
    .toilet-story{margin-top:70px}
}

@media(prefers-reduced-motion:reduce){
    .toilet-bolus-score,.toilet-bolus-modal,.toilet-bolus-modal__card,
    .toilet-agreement-compact-agree,.toilet-agreement-compact-agree__box,
    .toilet-agreement-compact-agree__box::after{transition:none}
}
/* NL-only mobile Bolus scoreboard: two balanced rows, no collisions. */
html[lang="nl"] .toilet-bolus-score{
    box-sizing:border-box;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"icon name timer" "icon points timer";
    align-items:center;
    width:min(320px,calc(100% - 2 * var(--space-4)));
    max-width:calc(100vw - 2 * var(--space-4));
    column-gap:var(--space-3);
    row-gap:0;
    padding:var(--space-2) var(--space-3);
    border-radius:var(--radius-lg);
}
html[lang="nl"] .toilet-bolus-score__icon{grid-area:icon;font-size:var(--font-lg)}
html[lang="nl"] .toilet-bolus-score>strong{grid-area:name;white-space:nowrap}
html[lang="nl"] .toilet-bolus-score .js-toilet-bolus-score-value{grid-area:points;color:#fff;font-size:var(--font-sm);font-weight:700;white-space:nowrap}
html[lang="nl"] .toilet-bolus-score .js-toilet-bolus-timer{grid-area:timer;justify-self:end;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:420px){
    html[lang="nl"] .toilet-bolus-score{bottom:max(var(--space-4),calc(env(safe-area-inset-bottom) + var(--space-3)));width:min(290px,calc(100vw - 2 * var(--space-4)))}
}