.btn[hidden] { display: none !important; }
.tab-ctl fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
#row-person[hidden], #row-org[hidden], #row-ga-dec[hidden] { display: none !important; }
.date-pick { display: flex; gap: 0.4rem; align-items: center; }
.date-pick input { flex: 1 1 auto; }

/*
 * PC: tab strip one line; width of the widest page (not a named tab).
 * Phone: different plan -- do not lock that min-content onto the viewport.
 * Skill: sizing-tab-strips.
 */
@media (min-width: 900px) {
  .tab-ctl {
    display: grid;
    grid-template-columns: minmax(min-content, 1fr);
    grid-template-rows: auto auto;
    min-width: min-content;
    overflow: visible;
  }
  .tab-ctl-bar {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    flex-wrap: nowrap;
    min-width: max-content;
  }
  .tab-ctl-tab {
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .tab-ctl > form,
  .tab-ctl > .tab-ctl-page {
    grid-row: 2;
    grid-column: 1;
    min-width: min-content;
  }
  .tab-ctl > form {
    display: grid;
    grid-template-columns: minmax(min-content, 1fr);
    min-width: min-content;
  }
  .tab-ctl > form > .tab-ctl-page {
    grid-row: 1;
    grid-column: 1;
    min-width: min-content;
  }
  .tab-ctl-page[hidden],
  .tab-ctl-page.is-off {
    display: block !important;
    visibility: hidden;
    height: 0 !important;
    overflow: hidden;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-width: min-content;
    pointer-events: none;
  }
}

@media (max-width: 899px) {
  .demo-form-panel,
  .tab-ctl,
  .tab-ctl > form,
  .tab-ctl-page {
    min-width: 0;
    max-width: 100%;
  }
  .tab-ctl-bar {
    flex-wrap: wrap;
    min-width: 0;
  }
  .tab-ctl-tab {
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .tab-ctl .field-row {
    grid-template-columns: 1fr;
  }
  .tab-ctl .date-pick input,
  .tab-ctl .amount-pick input {
    min-width: 0;
    width: 100%;
  }
}