/* Nutzung und Ansicht je Person (27.09.2026), siehe static/js/usage_profile.js.
   Nur Theme-Variablen, damit es in allen 3 Designs passt. */

/* Abgewaehlte Nutzungen: Menuepunkt weg (Klasse statt hidden, damit sich das nicht
   mit den Rollen-Regeln in app.js beisst). Ungelesenes bleibt sichtbar. */
.usage-hidden{display:none !important;}
.user-menu-item.usage-hidden:has(.nav-badge:not([hidden])){display:flex !important;}

/* Stufe */
.usp-levels{display:grid; gap:.5rem;}
.usp-level{
  display:grid; grid-template-columns:auto 1fr; column-gap:.65rem; align-items:center;
  padding:.8rem .9rem; border:1.5px solid var(--border); border-radius:12px;
  background:var(--bg); color:var(--ink); cursor:pointer;
}
.usp-level input{grid-row:span 2; width:1.2rem; height:1.2rem; margin:0; accent-color:var(--accent);}
.usp-level strong{font-size:1.02rem;}
.usp-level span{font-size:.88rem; color:var(--ink-muted);}
.usp-level:hover{background:var(--surface-hover);}
.usp-level.active{border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent);}
.usp-level:focus-within{outline:2px solid var(--accent); outline-offset:2px;}

/* Nutzungen */
.usp-uses{display:grid; gap:.5rem;}
.usp-uses-more{margin-top:.5rem;}
.usp-uses[hidden], .usp-more-toggle[hidden]{display:none;}
.usp-use{
  display:flex; align-items:center; gap:.7rem; min-height:3rem;
  padding:.6rem .85rem; border:1.5px solid var(--border); border-radius:12px;
  background:var(--bg); color:var(--ink); cursor:pointer;
}
.usp-use input{width:1.25rem; height:1.25rem; margin:0; flex:none; accent-color:var(--accent);}
.usp-use-icon{flex:none; width:1.6rem; height:1.6rem;}
.usp-use-label{font-size:1rem; line-height:1.3;}
.usp-use:hover{background:var(--surface-hover);}
.usp-use:has(input:checked){border-color:var(--accent); background:var(--accent-soft);}
.usp-use:focus-within{outline:2px solid var(--accent); outline-offset:2px;}
.usp-more-toggle{margin-top:.5rem;}

/* Block "Dein Menü" auf "Entdecken" und Seite "Nutzung & Ansicht" */
.usp-menu-block{display:grid; gap:.6rem; margin:0 0 1.75rem; max-width:48rem;}
.usp-menu-block[hidden]{display:none;}
.usp-menu-title{margin:0; font-size:1.2rem;}
.usp-menu-sub{margin:.4rem 0 0; font-size:.95rem; color:var(--ink-muted); font-weight:600;}
.usp-menu-in summary{cursor:pointer; font-weight:600; color:var(--ink-muted); padding:.35rem 0; min-height:2.25rem;}
.usp-menu-in .usp-more-list{margin-top:.4rem;}
.usp-menu-block p{margin:0;}
.dsc-tips-title{margin:0 0 .75rem; font-size:1.2rem;}
.usp-page{max-width:40rem; display:grid; gap:1.25rem;}
.usp-intro{margin:0; color:var(--ink-muted);}
.usp-block{display:grid; gap:.6rem;}
.usp-block h3{margin:0; font-size:1.1rem;}
.usp-block .hint{margin:0;}
.usp-for{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;}
.usp-for select{
  min-height:2.75rem; padding:.45rem .7rem; font:inherit; color:var(--ink);
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
}
.usp-more-list{list-style:none; margin:0; padding:0; display:grid; gap:.5rem;}
.usp-more-item{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  padding:.7rem .85rem; border:1px solid var(--border); border-radius:12px; background:var(--surface);
}
.usp-more-label{flex:1 1 12rem;}
.usp-more-actions{display:flex; gap:.4rem; flex-wrap:wrap;}

/* Hinweis "X hat deine Ansicht angepasst" */
.usp-notice{
  position:fixed; z-index:900; left:50%; bottom:1rem; transform:translateX(-50%);
  width:min(30rem, calc(100vw - 2rem)); box-sizing:border-box;
  padding:1rem; border:1px solid var(--border); border-radius:14px;
  background:var(--surface); color:var(--ink); box-shadow:0 8px 28px rgba(0,0,0,.18);
}
.usp-notice p{margin:0 0 .7rem;}
.usp-notice-actions{display:flex; gap:.4rem; flex-wrap:wrap;}

@media (max-width:600px){
  .usp-more-actions{width:100%;}
  .usp-more-actions .btn{flex:1;}
}

/* Schriftgroesse (27.09.2026): skaliert die Grundschrift, die App rechnet fast
   ueberall in rem. */
html[data-text-size="large"]{font-size:112.5%;}
html[data-text-size="xlarge"]{font-size:125%;}
.usp-textsizes{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.5rem;}
.usp-textsize{
  display:flex; flex-direction:column; align-items:center; gap:.2rem; padding:.6rem .4rem;
  border:1.5px solid var(--border); border-radius:12px; background:var(--bg); color:var(--ink); cursor:pointer;
}
.usp-textsize input{position:absolute; opacity:0; pointer-events:none;}
.usp-textsize-sample{font-weight:700; line-height:1.1;}
.usp-textsize.active{border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent);}
.usp-textsize:focus-within{outline:2px solid var(--accent); outline-offset:2px;}
.usp-textsize-btn{
  display:inline-flex; align-items:center; gap:.35rem; min-height:2.5rem; padding:.3rem .8rem;
  font:inherit; font-size:.9rem; font-weight:600; color:var(--ink);
  background:var(--bg); border:1.5px solid var(--border); border-radius:99px; cursor:pointer; white-space:nowrap;
}
.usp-textsize-btn:hover{background:var(--surface-hover);}
.usp-textsize-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.usp-textsize-plus{font-size:.75em; vertical-align:super;}