/* Folder-tab wipe - folder tabs on a card; panels stacked in one grid cell. The wipe itself is in part.js. */
.ftw {
  --ftw-card: #eedfca;            /* card colour = the active tab's colour (a panel's own background wins) */
  --ftw-ink: #352207;             /* active tab label */
  --ftw-tab-bg: #352207;          /* resting tabs */
  --ftw-tab-ink: #ffd200;
  --ftw-tab-w: 180px;             /* tab length (its width on desktop, its height on phones) */
  --ftw-tab-h: 40px;              /* tab depth */
  --ftw-tab-r: 12px;              /* the two outer corners */
  --ftw-tab-gap: 8px;
  --ftw-tab-hover: .9;            /* resting tab opacity on hover (desktop) */
  --ftw-tab-font: 600 15px/1 ui-sans-serif, system-ui, sans-serif;
  --ftw-radius: 24px;             /* card corners */
  --ftw-color-dur: 150ms;         /* tab colour swap */
  width: 100%;
}
.ftw__tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 0 var(--ftw-tab-gap);
}
.ftw__tab {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ftw-tab-w);
  height: var(--ftw-tab-h);
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: var(--ftw-tab-r) var(--ftw-tab-r) 0 0;
  background: var(--ftw-tab-bg);
  color: var(--ftw-tab-ink);
  font: var(--ftw-tab-font);
  cursor: pointer;
  transition: background-color var(--ftw-color-dur) cubic-bezier(.4, 0, .2, 1), color var(--ftw-color-dur) cubic-bezier(.4, 0, .2, 1), opacity var(--ftw-color-dur) cubic-bezier(.4, 0, .2, 1);
}
.ftw__tab > span { white-space: nowrap; }
.ftw__tab[aria-selected="true"] { z-index: 20; background: var(--ftw-active, var(--ftw-card)); color: var(--ftw-ink); cursor: default; }
.ftw__tab:focus-visible { outline: none; box-shadow: inset 0 0 0 1px currentColor; }
@media (hover: hover) {
  .ftw__tab:not([aria-selected="true"]):hover { opacity: var(--ftw-tab-hover); }
}

.ftw__panels { display: grid; width: 100%; min-width: 0; }
.ftw__panel {
  grid-area: 1 / 1;
  position: relative;
  z-index: 10;
  min-width: 0;
  border-radius: var(--ftw-radius);
  overflow: hidden;
  background: var(--ftw-card);
}
.ftw__panel.is-active { z-index: 20; }
.ftw:not(.is-ready) .ftw__panel + .ftw__panel { visibility: hidden; }

/* phones + tablets (.ftw--side, set by part.js below data-ftw-break = 1024px): the tabs stand on the card's left edge,
   labels turned -90deg */
.ftw--side { display: flex; align-items: center; }
.ftw--side .ftw__tabs { flex-direction: column; flex-wrap: nowrap; flex-shrink: 0; gap: var(--ftw-tab-gap) 0; }
.ftw--side .ftw__tab { width: var(--ftw-tab-h); height: var(--ftw-tab-w); padding: 0; border-radius: var(--ftw-tab-r) 0 0 var(--ftw-tab-r); }
.ftw--side .ftw__tab > span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); line-height: 1; }
.ftw--side .ftw__tab:not([aria-selected="true"]):hover { opacity: 1; }