/*
 * v0.7.3 Component Extension
 * Controlled additions only: popover, upload dropzone, disclosure, responsive table and timeline.
 * These components reuse the frozen palette, radius and motion rules.
 */
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.panel-copy { margin:8px 0 0; color:var(--ink-soft); font-size:12px; line-height:1.65; }

.action-with-icon { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; }
.action-with-icon svg { width:17px; height:17px; }
.popover-anchor { position:relative; margin-top:14px; }
.overflow-popover {
  position:absolute; z-index:18; top:calc(100% + 8px); right:0; width:min(100%,232px);
  padding:6px; border-radius:var(--radius-m); opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .16s ease-out, transform .16s ease-out, visibility .16s ease-out;
}
.overflow-popover.is-open { opacity:1; visibility:visible; transform:translateY(0); }
.overflow-popover button { width:100%; min-height:42px; display:flex; align-items:center; gap:10px; padding:0 11px; border-radius:var(--radius-s); background:transparent; color:var(--ink); text-align:left; }
.overflow-popover button:hover,.overflow-popover button:focus-visible { background:var(--accent-faint); outline:none; }
.overflow-popover svg { width:17px; height:17px; color:var(--ink-soft); }
.overflow-popover .menu-danger { color:var(--danger-strong); }
.overflow-popover .menu-danger svg { color:var(--danger); }

.upload-zone {
  margin-top:12px; min-height:122px; padding:18px 14px; display:flex; align-items:center; justify-content:center; gap:12px;
  border:1px dashed rgba(92,184,232,.42); border-radius:var(--radius-m);
  background:linear-gradient(145deg,rgba(92,184,232,.085),rgba(255,255,255,.42));
  color:var(--ink); text-align:left; outline:none; transition:border-color .16s ease-out, background .16s ease-out;
}
.upload-zone:focus-visible,.upload-zone.is-dragover { border-color:rgba(92,184,232,.78); background:linear-gradient(145deg,rgba(92,184,232,.15),rgba(255,255,255,.58)); }
.upload-zone__icon { width:42px; height:42px; display:grid; place-items:center; border-radius:var(--radius-s); background:rgba(92,184,232,.15); color:var(--accent-strong); flex:0 0 auto; }
.upload-zone__icon svg { width:20px; height:20px; }
.upload-zone b,.upload-zone small { display:block; }
.upload-zone b { font-size:13px; }
.upload-zone small { margin-top:5px; color:var(--ink-soft); font-size:11px; line-height:1.5; }
.upload-trigger { width:100%; margin-top:10px; }

.disclosure-list { margin-top:10px; border-top:1px solid var(--line-soft); }
.disclosure-item { border-bottom:1px solid var(--line-soft); }
.disclosure-trigger { width:100%; min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; background:transparent; text-align:left; }
.disclosure-trigger span,.disclosure-trigger b,.disclosure-trigger small { display:block; }
.disclosure-trigger b { font-size:13px; }
.disclosure-trigger small { margin-top:4px; color:var(--ink-soft); font-size:11px; line-height:1.45; }
.disclosure-trigger i { width:10px; height:10px; border-right:1.6px solid var(--ink-soft); border-bottom:1.6px solid var(--ink-soft); transform:rotate(45deg); transition:transform .16s ease-out; flex:0 0 auto; margin-right:4px; }
.disclosure-item.is-open .disclosure-trigger i { transform:rotate(225deg); }
.disclosure-content { padding:0 24px 14px 0; color:var(--ink-soft); font-size:12px; line-height:1.72; }

.responsive-table-wrap { margin-top:10px; }
.responsive-table { display:none; width:100%; border-collapse:collapse; font-size:12px; }
.responsive-table th,.responsive-table td { padding:12px 10px; border-bottom:1px solid var(--line-soft); text-align:left; vertical-align:middle; }
.responsive-table th { color:var(--ink-soft); font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; }
.responsive-table td { color:var(--ink); }
.responsive-table td:last-child,.responsive-table th:last-child { text-align:right; }
.responsive-table button { color:var(--accent-strong); background:transparent; font-weight:700; font-size:12px; }
.mobile-data-list { display:grid; gap:0; }
.mobile-data-row { width:100%; min-height:62px; padding:11px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line-soft); background:transparent; text-align:left; }
.mobile-data-row:last-child { border-bottom:0; }
.mobile-data-row b,.mobile-data-row small { display:block; }
.mobile-data-row b { font-size:13px; }
.mobile-data-row small { margin-top:4px; color:var(--ink-soft); font-size:11px; }
.mobile-data-row .badge { flex:0 0 auto; font-style:normal; }

.timeline-list { position:relative; display:grid; gap:0; margin-top:10px; }
.timeline-list::before { content:""; position:absolute; left:8px; top:9px; bottom:9px; width:1px; background:var(--line-soft); }
.timeline-item { position:relative; display:flex; gap:13px; min-height:58px; padding:7px 0 7px 0; }
.timeline-item > i { width:17px; height:17px; margin-top:2px; border:4px solid var(--solid-strong); border-radius:50%; background:var(--neutral); box-shadow:0 0 0 1px rgba(102,112,133,.12); z-index:1; flex:0 0 auto; }
.timeline-item b,.timeline-item small { display:block; }
.timeline-item b { font-size:13px; }
.timeline-item small { margin-top:5px; color:var(--ink-soft); font-size:11px; }
.timeline-item--success > i { background:var(--success); box-shadow:0 0 0 1px var(--success-soft); }
.timeline-item--accent > i { background:var(--accent); box-shadow:0 0 0 1px var(--accent-soft); }
.timeline-item--warning > i { background:var(--warning); box-shadow:0 0 0 1px var(--warning-soft); }

@media (min-width:760px) {
  .responsive-table { display:table; }
  .mobile-data-list { display:none; }
}
@media (min-width:1024px) {
  .overflow-demo { min-height:176px; }
  .upload-zone { min-height:138px; }
}