/*
 * Datei: assets/styles/components.css
 * Zweck: Globale Komponenten- und Interaktionsbasis.
 * Status: führend
 * Verantwortet: Buttons, Chips, Listen-/Paneloberflächen und gemeinsame Aktiv-/Fokuszustände.
 */

button,select,input{
  outline:none;
}
.icon-btn,.btn,.select,.collapse-btn,.quick-action,.chip-btn{
  min-height:var(--touch);
  border-radius:var(--radius-s);
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  padding:0 14px;
}
.icon-btn{
  width:44px;
  height:44px;
  min-height:44px;
  min-width:44px;
  display:grid;
  place-items:center;
  padding:0;
  background:var(--surface-2);
  cursor:pointer;
  flex:0 0 auto;
  overflow:hidden;
}
.icon-btn svg,.btn svg,.quick-action svg,.collapse-btn svg,.chip-btn svg{
  width:20px;
  height:20px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.9;
}
.btn,.collapse-btn,.chip-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:700;
  cursor:pointer;
}
.select{
  width:100%;
}
.toggle{
  display:inline-flex;
  gap:4px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px;
}
.toggle button{
  border:0;
  background:transparent;
  color:var(--muted);
  padding:7px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  cursor:pointer;
}
.toggle button.active{
  background:var(--surface-3);
  color:var(--text);
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  background:var(--surface-3);
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
}
.card,.list,.hero-card,.placeholder,.panel,.panel-block{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.card,.hero-card,.placeholder,.panel,.panel-block{
  border-radius:var(--radius-xl);
}
.list{
  border-radius:var(--radius-l);
  overflow:hidden;
}
.link,.panel-link{
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:var(--radius-m);
  padding:14px 16px;
  display:block;
}
.quick-action{
  padding:8px 6px;
  min-height:72px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.quick-action.active{
  background:var(--surface-2);
  border-color:var(--shell-accent-border-soft, rgba(215,181,109,.34));
}
.qa-icon{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
}
.qa-label{
  font-size:10px;
  color:var(--muted);
  line-height:1.15;
  text-align:center;
}
.chip-btn{
  min-height:34px;
  padding:0 12px;
  font-size:13px;
}
.chip-btn.active{
  background:var(--surface-3);
  color:var(--text);
}

button,
a,
[role="button"]{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.icon-btn,
.btn,
.select,
.collapse-btn,
.quick-action,
.chip-btn,
.menu-btn,
.dock-btn,
.sheet-btn,
.rail-action,
.header-action,
.accordion-head,
.recent-item{
  transition:
    transform .08s ease,
    background .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    filter .16s ease,
    opacity .16s ease;
  will-change:transform;
}

.menu-btn,
.dock-btn,
.sheet-btn,
.rail-action,
.header-action{
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--text);
}

.sheet-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
}

.rail-action{
  text-decoration:none;
  cursor:pointer;
}

.accordion-head{
  cursor:pointer;
  text-align:left;
}

.icon-btn:hover,
.btn:hover,
.collapse-btn:hover,
.quick-action:hover,
.chip-btn:hover,
.menu-btn:hover,
.dock-btn:hover,
.sheet-btn:hover,
.rail-action:hover,
.header-action:hover,
.accordion-head:hover,
.recent-item:hover{
  filter:brightness(1.03);
}

.icon-btn:active,
.btn:active,
.collapse-btn:active,
.quick-action:active,
.chip-btn:active,
.menu-btn:active,
.dock-btn:active,
.sheet-btn:active,
.rail-action:active,
.header-action:active,
.accordion-head:active,
.recent-item:active{
  transform:translateY(1px) scale(.985);
  filter:brightness(1.09);
  box-shadow:0 0 0 1px rgba(215,181,109,.14), var(--shadow);
}

.icon-btn:focus-visible,
.btn:focus-visible,
.collapse-btn:focus-visible,
.quick-action:focus-visible,
.chip-btn:focus-visible,
.menu-btn:focus-visible,
.dock-btn:focus-visible,
.sheet-btn:focus-visible,
.rail-action:focus-visible,
.header-action:focus-visible,
.accordion-head:focus-visible,
.recent-item:focus-visible{
  outline:2px solid var(--shell-accent-border, rgba(215,181,109,.42));
  outline-offset:2px;
}

.menu-btn:active .material-symbols-rounded,
.dock-btn:active .material-symbols-rounded,
.rail-action:active .material-symbols-rounded,
.header-action:active .material-symbols-rounded,
.icon-btn:active .material-symbols-rounded{
  transform:scale(.96);
}

.material-symbols-rounded{
  transition:transform .08s ease, opacity .16s ease;
}


/* Gemeinsame Progress-/Meter-Grammatik */
.track{height:10px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--dg-accent, #d7b56d))}
.fill--0{width:0%}
.fill--1{width:1%}
.fill--2{width:2%}
.fill--3{width:3%}
.fill--4{width:4%}
.fill--5{width:5%}
.fill--6{width:6%}
.fill--7{width:7%}
.fill--8{width:8%}
.fill--9{width:9%}
.fill--10{width:10%}
.fill--11{width:11%}
.fill--12{width:12%}
.fill--13{width:13%}
.fill--14{width:14%}
.fill--15{width:15%}
.fill--16{width:16%}
.fill--17{width:17%}
.fill--18{width:18%}
.fill--19{width:19%}
.fill--20{width:20%}
.fill--21{width:21%}
.fill--22{width:22%}
.fill--23{width:23%}
.fill--24{width:24%}
.fill--25{width:25%}
.fill--26{width:26%}
.fill--27{width:27%}
.fill--28{width:28%}
.fill--29{width:29%}
.fill--30{width:30%}
.fill--31{width:31%}
.fill--32{width:32%}
.fill--33{width:33%}
.fill--34{width:34%}
.fill--35{width:35%}
.fill--36{width:36%}
.fill--37{width:37%}
.fill--38{width:38%}
.fill--39{width:39%}
.fill--40{width:40%}
.fill--41{width:41%}
.fill--42{width:42%}
.fill--43{width:43%}
.fill--44{width:44%}
.fill--45{width:45%}
.fill--46{width:46%}
.fill--47{width:47%}
.fill--48{width:48%}
.fill--49{width:49%}
.fill--50{width:50%}
.fill--51{width:51%}
.fill--52{width:52%}
.fill--53{width:53%}
.fill--54{width:54%}
.fill--55{width:55%}
.fill--56{width:56%}
.fill--57{width:57%}
.fill--58{width:58%}
.fill--59{width:59%}
.fill--60{width:60%}
.fill--61{width:61%}
.fill--62{width:62%}
.fill--63{width:63%}
.fill--64{width:64%}
.fill--65{width:65%}
.fill--66{width:66%}
.fill--67{width:67%}
.fill--68{width:68%}
.fill--69{width:69%}
.fill--70{width:70%}
.fill--71{width:71%}
.fill--72{width:72%}
.fill--73{width:73%}
.fill--74{width:74%}
.fill--75{width:75%}
.fill--76{width:76%}
.fill--77{width:77%}
.fill--78{width:78%}
.fill--79{width:79%}
.fill--80{width:80%}
.fill--81{width:81%}
.fill--82{width:82%}
.fill--83{width:83%}
.fill--84{width:84%}
.fill--85{width:85%}
.fill--86{width:86%}
.fill--87{width:87%}
.fill--88{width:88%}
.fill--89{width:89%}
.fill--90{width:90%}
.fill--91{width:91%}
.fill--92{width:92%}
.fill--93{width:93%}
.fill--94{width:94%}
.fill--95{width:95%}
.fill--96{width:96%}
.fill--97{width:97%}
.fill--98{width:98%}
.fill--99{width:99%}
.fill--100{width:100%}


/* AP-29D-REV14-PHASE4-A | Shell-Aktivzustände aus zentralen Tokens. */
.dock-btn.is-listening,
.dock-btn[aria-pressed="true"]{
  border-color:var(--shell-accent-border, rgba(215,181,109,.42));
  background:var(--surface-3);
  box-shadow:0 0 0 1px rgba(215,181,109,.18), var(--shell-dock-shadow, 0 18px 44px rgba(0,0,0,.32));
}

/* AP-29D-REV14-PHASE4-B | DG-Komponenten-Grammatik: Cards, Chips, Accordions und Aktivzustände nutzen zentrale Tokens. */
.card,
.list,
.hero-card,
.placeholder,
.panel,
.panel-block,
.link,
.panel-link,
.quick-action,
.correction-type,
.correction-context,
.correction-context-card,
.correction-note,
.admin-panel,
.admin-login-card,
.admin27-card,
.admin27-panel,
.admin27-context{
  border-color:var(--dg-line-soft, var(--line));
  background:var(--dg-surface, var(--surface));
  box-shadow:var(--dg-shadow-card, var(--shadow));
}

.icon-btn,
.btn,
.select,
.collapse-btn,
.quick-action,
.chip-btn,
.menu-btn,
.dock-btn,
.sheet-btn,
.rail-action,
.header-action,
.accordion-head,
.recent-item{
  border-color:var(--dg-line-soft, var(--line));
  background:var(--dg-surface, var(--surface));
  color:var(--dg-text, var(--text));
}

.chip-btn,
.badge,
.meta-chip,
.garnish-badge,
.sheet-doc-pill{
  border-color:var(--dg-line-soft, var(--line));
  background:var(--dg-surface, var(--surface));
  color:var(--dg-text, var(--text));
  box-shadow:var(--dg-shadow-chip, 0 6px 12px rgba(0,0,0,.20));
}

.quick-action.active,
.chip-btn.active,
.toggle button.active,
.dock-btn.is-listening,
.dock-btn[aria-pressed="true"]{
  border-color:var(--shell-accent-border-soft, rgba(215,181,109,.34));
  background:var(--dg-surface-2, var(--surface-2));
  box-shadow:0 0 0 1px var(--shell-accent-ring-soft, rgba(215,181,109,.12)), var(--dg-shadow-chip, 0 6px 12px rgba(0,0,0,.20));
}