/* Shared panel controls. Keep domain-specific tables and action rules intact. */
.panel-skip-link { position: fixed; left: 12px; top: -100px; z-index: 300; padding: 12px 16px; background: var(--ink); color: var(--paper); border-radius: 8px; }
.panel-skip-link:focus { top: 12px; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.panel-nav-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 0; }
.panel-nav-heading .cs-icon-btn { font-size: 24px; width: 44px; height: 44px; }
.panel-nav-search { padding: 0 16px 12px; }
.panel-nav-search label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.panel-nav-search input { width: 100%; min-width: 0; min-height: 44px; border-radius: 10px; padding: 10px; font-size: 16px; }
.panel-nav-search p { color: var(--muted); font-size: 13px; padding-top: 10px; }
[data-nav-group][hidden], [data-nav-search-item][hidden], #panel-nav-empty[hidden], .panel-table-hint[hidden] { display: none !important; }
.panel-section-trigger { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--paper); white-space: nowrap; }
.panel-section-trigger:hover { color: var(--ink); border-color: var(--gold); }
.panel-table-scroll { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.panel-table-hint { position: sticky; left: 0; width: fit-content; max-width: 100%; padding: 8px 10px; font-size: 12px; color: var(--muted); background: var(--surface); border-radius: 8px; margin-bottom: 6px; }
.panel-table-scroll:focus-visible { outline-offset: -2px; }
.panel-callout { padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 10px; background: var(--gold-soft); font-size: 14px; line-height: 1.6; }
.panel-step { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; }
.panel-step-number { width: 28px; height: 28px; display: inline-grid; place-items: center; background: var(--gold-soft); color: var(--gold); border-radius: 50%; flex-shrink: 0; }
.panel-action-note { color: var(--muted); font-size: 13px; line-height: 1.6; }
.panel-stale-preview { padding: 12px; color: var(--bad); border: 1px solid currentColor; border-radius: 8px; }
main form :where(input, select, textarea) { max-width: 100%; }
main textarea { resize: vertical; }
@media (max-width: 767px) {
    .panel-section-trigger { display: none; }
    main :where(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select, textarea) { font-size: 16px !important; min-height: 44px; }
    main :where(button, .glass-btn, summary) { min-height: 44px !important; }
    .cat-col-head { flex-wrap: wrap; }
    .cat-col-head > * { max-width: 100%; }
    main :where(.flex, .grid) > * { min-width: 0; }
    main h1 { overflow-wrap: anywhere; }
    main .panel-table-scroll { padding-bottom: 8px; }
    main .panel-table-scroll td { vertical-align: top; }
    .panel-callout { padding: 12px; }
    .panel-nav-heading { padding-top: max(12px, env(safe-area-inset-top)); }
    #side-nav { max-height: 100dvh; padding-bottom: env(safe-area-inset-bottom); }
}
@media (prefers-reduced-motion: reduce) { .panel-table-scroll { scroll-behavior: auto; } }