/* spcaeo/ui (folder-tabs/folder-tabs.css), from github.com/spcaeo/ui at ad51155, vendored by Skald.
   Changes and the reason for each: VERSION.md beside this folder.

   MIT License. Copyright (c) 2026 spcaeo.
   Permission is hereby granted, free of charge, to any person obtaining a copy of this software
   and associated documentation files (the "Software"), to deal in the Software without
   restriction, including without limitation the rights to use, copy, modify, merge, publish,
   distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the
   Software is furnished to do so, subject to the following conditions:
   The above copyright notice and this permission notice shall be included in all copies or
   substantial portions of the Software.
   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING
   BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
   NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
   DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */
/*
 * VB-INSPIRED FOLDER TABS — standalone stylesheet. No Tailwind, no build step.
 *
 * Rebuilt from the Visual Basic 4 SSTab control (and the Windows 3.1/95 tab
 * controls it belonged to), whose mechanism is:
 *
 *   Three fills in a fixed relationship. The rail is darkest. An inactive tab
 *   sits above it. The ACTIVE TAB IS THE PANEL'S OWN FILL — it is not
 *   highlighted, it IS the panel, continuing upward.
 *
 * Shape and shared fill carry the state, and both survive a greyscale print.
 *
 * ON THE NUMBERS: every ratio quoted in README.md was computed from these exact
 * values, not eyeballed. `npm run contrast` re-measures them. Change a fill and
 * the script will tell you what you broke.
 *
 * ON DARK MODE: three genuinely dark fills CANNOT all sit 3:1 apart — WCAG 2.x
 * adds a flat 0.05 flare term to both sides of the ratio, which swamps any
 * difference down near black. A #333 panel cannot reach 3:1 against a rail even
 * if that rail is pure black (the ceiling is 1.66). So the boundary is carried
 * by --tab-edge, a stroke measured against every surface it touches, exactly as
 * the original control used a 3D border. See README "Contrast".
 */

:root {
  --tab-rail: oklch(0.2 0.02 260); /* the band the tabs stand on */
  --tab-rail-fill: oklch(0.5 0.03 260); /* an inactive tab */
  --tab-rail-ink: oklch(0.96 0 0); /* its label */
  --tab-panel: oklch(1 0 0); /* the panel AND the active tab */
  --tab-panel-ink: oklch(0.145 0 0);
  --tab-edge: oklch(0.2 0.02 260); /* the stroke that carries every boundary */
  --tab-ring: oklch(0.98 0 0); /* focus, on an inactive tab */
  --tab-ring-on-panel: oklch(0.3 0 0); /* focus, on the active tab or panel */
}

/*
 * Dark mode inverts the mechanic if you are not careful, and this is the single
 * easiest thing to get wrong. The active tab must stay the LIGHTEST of the
 * three, because it IS the panel. Borrow a card colour that happens to be
 * darker than the tab fill and the selected tab reads as pressed IN while the
 * unselected ones read as raised — exactly backwards.
 */
.dark,
[data-theme="dark"] {
  --tab-rail: oklch(0.17 0.02 260);
  --tab-rail-fill: oklch(0.26 0.02 260);
  --tab-rail-ink: oklch(0.93 0 0);
  --tab-panel: oklch(0.4 0 0);
  --tab-panel-ink: oklch(0.985 0 0);
  --tab-edge: oklch(0.7 0 0);
  --tab-ring: oklch(0.95 0 0);
  --tab-ring-on-panel: oklch(0.95 0 0);
}

/* Follow the OS when nothing has made an explicit choice. An explicit light
   choice still wins — hence the :not() guards. */
@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme="light"]) {
    --tab-rail: oklch(0.17 0.02 260);
    --tab-rail-fill: oklch(0.26 0.02 260);
    --tab-rail-ink: oklch(0.93 0 0);
    --tab-panel: oklch(0.4 0 0);
    --tab-panel-ink: oklch(0.985 0 0);
    --tab-edge: oklch(0.7 0 0);
    --tab-ring: oklch(0.95 0 0);
    --tab-ring-on-panel: oklch(0.95 0 0);
  }
}

/* oklch is Baseline 2023. These sRGB equivalents are the same colours, rounded,
   for anything older. Generated by tools/contrast.mjs — do not hand-edit. */
@supports not (color: oklch(0 0 0)) {
  :root {
    --tab-rail: #11161f;
    --tab-rail-fill: #596475;
    --tab-rail-ink: #f2f2f2;
    --tab-panel: #ffffff;
    --tab-panel-ink: #0a0a0a;
    --tab-edge: #11161f;
    --tab-ring: #fafafa;
    --tab-ring-on-panel: #3d3d3d;
  }
  .dark,
  [data-theme="dark"] {
    --tab-rail: #0a1018;
    --tab-rail-fill: #1e242e;
    --tab-rail-ink: #e8e8e8;
    --tab-panel: #494949;
    --tab-panel-ink: #fafafa;
    --tab-edge: #9e9e9e;
    --tab-ring: #f0f0f0;
    --tab-ring-on-panel: #f0f0f0;
  }
}

/* --- the rail ----------------------------------------------------------- */

.fldr-rail {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  min-width: 0;
  padding: 4px 4px 0;
  background: var(--tab-rail);
  border-radius: 8px 8px 0 0;
}

.fldr-scroll {
  display: flex;
  align-items: flex-end;
  /*
    3px, and the tabs do NOT overlap. An earlier version pulled each tab 6px
    under its neighbour to tuck like a card index — but with every inactive tab
    on one fill that is a single block with notches in it. The rail showing
    through a real gap is what separates one tab from the next.
  */
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Stop a horizontal flick at the end of the strip from triggering the
     browser's back-navigation gesture. */
  overscroll-behavior-x: contain;
}
.fldr-scroll::-webkit-scrollbar {
  display: none;
}

/* --- a tab -------------------------------------------------------------- */

/*
  `clip-path` cuts the angled right edge — an actual trapezoid, the way a card
  index is cut, not a rounded rectangle standing in for one.

  A `border` cannot be used with clip-path (the clip eats it on the diagonal),
  so the outline is four zero-blur drop-shadows, which DO trace the clipped
  silhouette. That stroke is what makes the tab boundary meet WCAG 1.4.11 in
  dark mode, where no arrangement of dark fills can.
*/
.fldr-tab {
  position: relative;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 6px 18px 6px 13px;
  border: 0;
  border-radius: 6px 0 0 0;
  background: var(--tab-rail-fill);
  color: var(--tab-rail-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
  filter: drop-shadow(1px 0 0 var(--tab-edge)) drop-shadow(-1px 0 0 var(--tab-edge))
    drop-shadow(0 -1px 0 var(--tab-edge));
  transition:
    background-color 120ms,
    color 120ms,
    padding 120ms;
}

.fldr-tab:hover:not(:disabled):not([aria-disabled="true"]):not([data-state="active"]) {
  background: color-mix(in oklch, var(--tab-rail-fill), var(--tab-rail-ink) 12%);
}
.fldr-tab:focus-visible {
  outline: 2px solid var(--tab-ring);
  outline-offset: -3px;
  z-index: 3;
}
/* Both spellings. `disabled` drops the tab out of the page entirely;
   `aria-disabled` keeps it focusable so a screen-reader user can find it and be
   told why it is unavailable, which is what WAI-ARIA asks for. They must look
   the same, so both are styled here. */
.fldr-tab:disabled,
.fldr-tab[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ACTIVE: the panel's own fill, and taller, so it stands proud of the rail.
   No bottom stroke — that is the join. It is the same sheet as the panel. */
.fldr-tab[data-state="active"] {
  z-index: 2;
  padding-top: 9px;
  padding-bottom: 7px;
  background: var(--tab-panel);
  color: var(--tab-panel-ink);
  font-weight: 600;
}
.fldr-tab[data-state="active"]:focus-visible {
  outline-color: var(--tab-ring-on-panel);
}

/* A count beside a label. Quiet — the label is the thing being read. */
.fldr-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in oklch, currentColor 18%, transparent);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* --- overflow arrows ---------------------------------------------------- */

/*
  Inside the rail, at its right end — part of the control rather than furniture
  beside it. They DISABLE at each end rather than disappearing: a control that
  changes width under the cursor is a control that misfires.
*/
.fldr-arrows {
  display: none;
  flex: 0 0 auto;
  gap: 1px;
  padding: 0 2px 3px;
}
.fldr-arrows[data-overflowing="true"] {
  display: flex;
}

.fldr-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--tab-edge);
  border-radius: 4px;
  background: var(--tab-rail-fill);
  color: var(--tab-rail-ink);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fldr-arrow:hover:not(:disabled) {
  background: color-mix(in oklch, var(--tab-rail-fill), var(--tab-rail-ink) 12%);
}
.fldr-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
.fldr-arrow:focus-visible {
  outline: 2px solid var(--tab-ring);
  outline-offset: 1px;
}
.fldr-arrow > svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* --- the panel ---------------------------------------------------------- */

.fldr-panel {
  background: var(--tab-panel);
  color: var(--tab-panel-ink);
  border: 1px solid var(--tab-edge);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  padding: 16px;
}
.fldr-panel:focus-visible {
  outline: 2px solid var(--tab-ring-on-panel);
  outline-offset: -2px;
}

/*
  FLUSH — for a panel whose content brings its own card and padding, such as a
  grid. It TIGHTENS the padding to 14px 14px 4px but KEEPS the ground and the
  side walls. Drop those too and the rail floats above bare page with nothing
  beneath it: the active tab has no panel to be continuous WITH, which is the
  entire mechanism.
*/
.fldr-panel-flush {
  padding: 14px 14px 4px;
}

/* --- nested ------------------------------------------------------------- */

/*
  The same control one size down, so level two is unmistakably inside level one.
  Same fills on purpose: it is the same kind of thing one level down, and a
  second colourway would claim otherwise.
*/
.fldr-nested > .fldr-rail {
  padding: 3px 3px 0;
  border-radius: 6px 6px 0 0;
}
.fldr-nested > .fldr-rail .fldr-tab {
  font-size: 12px;
  padding: 4px 17px 4px 11px;
}
.fldr-nested > .fldr-rail .fldr-tab[data-state="active"] {
  padding-top: 6px;
  padding-bottom: 5px;
}
.fldr-nested > .fldr-panel {
  padding: 14px;
  border-radius: 0 0 6px 6px;
}

/* The nested SIZE without a nested ancestor — for a strip that is a rail in its
   own right, such as a grid's segment row inside a panel. */
.fldr-nested-rail {
  padding: 3px 3px 0;
}
.fldr-nested-rail .fldr-tab {
  font-size: 12px;
  padding: 4px 17px 4px 11px;
}
.fldr-nested-rail .fldr-tab[data-state="active"] {
  padding-top: 6px;
  padding-bottom: 5px;
}

/* --- environment -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .fldr-tab {
    transition: none;
  }
  .fldr-scroll {
    scroll-behavior: auto;
  }
}

/*
  Windows High Contrast / forced-colors. System colours replace ours entirely,
  so the fill-identity mechanic is gone by definition — the shared fill is no
  longer ours to set. Fall back to the other half of the control: a real border,
  and `Highlight` on the selected tab, which is what the OS expects.
*/
@media (forced-colors: active) {
  .fldr-tab {
    filter: none;
    border: 1px solid ButtonBorder;
    forced-color-adjust: none;
    background: ButtonFace;
    color: ButtonText;
  }
  .fldr-tab[data-state="active"] {
    background: Highlight;
    color: HighlightText;
  }
  .fldr-tab:disabled,
  .fldr-tab[aria-disabled="true"] {
    color: GrayText;
    opacity: 1;
  }
  .fldr-panel {
    border: 1px solid ButtonBorder;
  }
  .fldr-tab:focus-visible,
  .fldr-arrow:focus-visible {
    outline: 2px solid CanvasText;
  }
}

@media print {
  .fldr-arrows {
    display: none !important;
  }
  .fldr-scroll {
    overflow: visible;
  }
  .fldr-panel[hidden] {
    display: none;
  }
}