/* Shared interaction and responsive rules, loaded after page-specific styles. */
:root { --text-3: rgba(255,255,255,.66); }
:root.light { --text-3: rgba(0,0,0,.65); --green: #16793b; --amber: #955900; --block: #bb2b25; }
html { background-color: var(--bg); scroll-padding-top: 100px; }
body { min-width: 0; }
button, input, select, textarea { touch-action: manipulation; }
button, .btn, .btn.sm, .theme-btn, .menubtn, .lang-btn, .mode-opt,
.add-btn, .cat-chip, .tag button, .btn.ghost { min-height: 44px; }
.theme-btn, .menubtn, .icon-link, .add-btn { min-width: 44px; }
.theme-btn, .menubtn { width: 44px; height: 44px; flex-shrink: 0; }
.icon-link { min-height: 44px; align-items: center; justify-content: center; }
.top nav a, aside a.nav { min-height: 44px; display: flex; align-items: center; }
.top-inner { min-height: 70px; }
a.brand { min-height: 44px; align-items: center; }
:where(a,button,input,select,textarea,summary):focus-visible {
  outline: 2px solid var(--text); outline-offset: 4px;
}
footer a, .mirrors a, .legal-links a { display: inline-flex; align-items: center; min-height: 44px; }
summary { min-height: 44px; }
.ctarow .btn, .actions .btn { height: auto; padding-block: 11px; }
.card, .shell, main, .field, .plat { min-width: 0; }
.doc-table { overflow-x: auto; max-width: 100%; border-radius: 10px; }
.doc-table table { margin-block: 0; }
.table-hint { display: none; }
.doc-table:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
main p, main li, .callout, .doc-wrap, .bucket, .field { overflow-wrap: anywhere; }
section[id] { scroll-margin-top: 100px; }
.tag { max-width: 100%; overflow-wrap: anywhere; }
.tag button { min-width: 44px; flex-shrink: 0; }
.lang-menu button { width: 100%; text-align: start; }
.panel > textarea { width: calc(100% - 36px); max-width: calc(100% - 36px); }
@media(max-width:820px) {
  .shell aside { top: 71px; max-height: calc(100dvh - 71px); padding-bottom: max(24px,env(safe-area-inset-bottom)); }
}
@media(max-width:600px) {
  html { scroll-padding-top: 130px; }
  .ctarow, .actions { align-items: stretch; }
  .ctarow > .btn, .actions > .btn { flex: 1 1 100%; width: 100%; white-space: normal; text-align: center; }
  input, select, textarea, .add-input { font-size: 16px; min-height: 44px; }
  .top nav { scroll-padding-inline: 12px; }
  .top nav a { flex-shrink: 0; }
  .top-right { gap: 6px; }
  .shell main { padding-inline: 18px; }
  .doc-table table { min-width: 560px; }
  .table-hint { display: block; font-size: 12px; color: var(--text-3); margin-block: 12px 6px; }
  section[id] { scroll-margin-top: 130px; }
  footer { padding-bottom: max(32px,env(safe-area-inset-bottom)); }
  .out-head { flex-wrap: wrap; }
  body.mode-simple .top-inner, body.mode-advanced .top-inner { flex-wrap: wrap; gap: 8px; }
  body.mode-simple .brand, body.mode-advanced .brand { flex: 1 1 100%; justify-content: center; }
  body.mode-simple .brand span, body.mode-advanced .brand span { overflow: visible; text-overflow: clip; }
  body.mode-simple .top-right, body.mode-advanced .top-right { margin-inline: auto; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}