/* Task Helper — HEAD AND BUTTONS STAY IN REACH (BRIEF-1315). Copyright Rapid Surveys Pty Ltd. Namespace th-.
 * Gary: "TO GET TO CLOSE I HAVE TO SCROLL ALL THE WAY DOWN THE BOTTOM, THE CLOSE SHOULD BE STATIC, THIS FEATURE SHOULD BE ON ALL FORMS OF
 * THIS NATURE." In a panel that scrolls, its head (title + ✕) sticks to the top and its button row sticks to the bottom; only the middle
 * scrolls. Works whether the card or the backdrop scrolls (sticky follows whichever does). A card with padding sets --th-dpad so the
 * head / row reach its edges. Content-level Save rows inside a tab stay where they are (they don't get these classes). */
.th-dhead { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; background: var(--th-dbg, var(--card, #fff));
  margin-left: calc(-1 * var(--th-dpad, 0px)); margin-right: calc(-1 * var(--th-dpad, 0px)); padding-left: var(--th-dpad, 0px); padding-right: var(--th-dpad, 0px); }
.th-dhead > h2, .th-dhead > h3 { flex: 1; min-width: 0; margin-bottom: 0; }
.th-dfoot { position: sticky; bottom: 0; z-index: 3; background: var(--th-dbg, var(--card, #fff)); border-top: 1px solid var(--line, #e2e7ec);
  margin-left: calc(-1 * var(--th-dpad, 0px)); margin-right: calc(-1 * var(--th-dpad, 0px));
  padding: 10px var(--th-dpad, 0px) calc(10px + env(safe-area-inset-bottom, 0px)); }
.th-x { flex: none; width: 44px; height: 44px; min-height: 44px; margin: 0 -8px 0 0; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 10px; color: var(--ink, #1b2430); cursor: pointer; }
.th-x:hover { background: var(--hover, #f1f3f5); }
.th-x:focus-visible { outline: 2px solid var(--accent, #2f6df6); outline-offset: 2px; }
/* the app's .modalcard (padding 22px, radius 14px): the head and the button row reach its edges and its rounded corners */
.modalcard { --th-dpad: 22px; }
.modalcard > .th-dhead { top: -22px; margin-top: -22px; margin-bottom: 8px; padding-top: 14px; padding-bottom: 6px; border-radius: 14px 14px 0 0; }
.modalcard > .th-dfoot { bottom: -22px; margin-top: 14px; margin-bottom: -22px; border-radius: 0 0 14px 14px; }