@charset "UTF-8";
/*!
 * Hash v1.0.0 — UI Layer (skins for the components in hash-ui.js)
 *
 * Class names are the ones already in our projects (.dropdown, .dropdown-panel,
 * .dropdown-option, .segmented, .segment, .popup, .slider…), so existing
 * markup gets a working skin the moment this file is linked.
 * Everything is drawn from theme tokens — override tokens, not these rules.
 */

@layer theme {
  /*
  ====================================================================
    DROPDOWN / SELECT
    <div class="dropdown" data-dropdown>
      <div class="dropdown-toggle" data-dropdown-toggle>…</div>
      <div class="dropdown-panel" data-dropdown-panel>
        <label class="dropdown-option" data-value="a">…</label>
  ====================================================================
  */
  .dropdown { position: relative; }

  .dropdown-toggle,
  .control-button {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    min-height: var(--control-h);
    padding: 0.8rem 1.6rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--rad-sm);
    cursor: pointer;
    user-select: none;
    transition: border-color var(--dur-2, 0.2s) ease, background var(--dur-2, 0.2s) ease;
  }
  .dropdown-toggle:hover { border-color: var(--line-strong); }
  .dropdown.is-open .dropdown-toggle { border-color: var(--brand); }

  .dropdown-arrow,
  .dropdown__arrow,
  .stat-arrow {
    display: inline-flex;
    flex-shrink: 0;
    transition: transform var(--dur-2, 0.2s) var(--ease-out, ease);
  }
  .dropdown.is-open .dropdown-arrow,
  .dropdown.is-open .dropdown__arrow,
  .dropdown.is-open .stat-arrow { transform: rotate(180deg); }

  .dropdown-panel,
  .dropdown-menu {
    position: absolute;
    top: calc(100% + 0.8rem);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: min(32rem, 80vw);
    max-height: var(--dropdown-max-h, 32rem);
    overflow-y: auto;
    padding: 0.6rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--rad-sm);
    box-shadow: var(--shadow-2);
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.6rem);
    transition:
      opacity var(--dur-2, 0.2s) var(--ease-out, ease),
      transform var(--dur-2, 0.2s) var(--ease-out, ease),
      visibility 0s linear var(--dur-2, 0.2s);
  }
  .dropdown.is-open .dropdown-panel,
  .dropdown.is-open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .dropdown-right .dropdown-panel,
  .dropdown-right .dropdown-menu { left: auto; right: 0; }

  .dropdown-option,
  .dropdown-item,
  .dropdown-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    width: 100%;
    padding: 1rem 1.2rem;
    border-radius: var(--rad-xs);
    font-size: var(--fs-3);
    color: var(--ink);
    cursor: pointer;
    transition: background var(--dur-1, 0.12s) linear;
  }
  .dropdown-option:hover,
  .dropdown-item:hover,
  .dropdown-link:hover { background: var(--brand-ghost); }
  .dropdown-option.selected,
  .dropdown-option.is-active { background: var(--brand-ghost); color: var(--brand-ink); font-weight: var(--fw-semibold); }
  .dropdown-divider { height: 1px; background: var(--line); margin: 0.6rem 0; }

  /* The label owns the click; the checkbox is a visual state only */
  .dropdown-option input[type="checkbox"],
  .dropdown-option input[type="radio"] {
    pointer-events: none;
    accent-color: var(--brand);
  }

  /*
  ====================================================================
    SEGMENTED CONTROL / TABS
  ====================================================================
  */
  .segmented {
    display: inline-flex;
    gap: 0.4rem;
    padding: 0.4rem;
    background: var(--surface-2);
    border-radius: var(--rad-pill);
  }
  .segment {
    padding: 0.8rem 1.8rem;
    border-radius: var(--rad-pill);
    font-size: var(--fs-3);
    font-weight: var(--fw-medium);
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-2, 0.2s) ease, color var(--dur-2, 0.2s) ease;
  }
  .segment:hover { color: var(--ink); }
  .segment.active,
  .segment.is-active {
    background: var(--surface);
    color: var(--brand-ink);
    font-weight: var(--fw-semibold);
    box-shadow: var(--shadow-1);
  }

  .tabs {
    display: flex;
    gap: 2.4rem;
    border-bottom: 1px solid var(--line);
  }
  .tab {
    position: relative;
    padding: 1.2rem 0;
    font-size: var(--fs-3);
    font-weight: var(--fw-medium);
    color: var(--muted);
    cursor: pointer;
  }
  .tab::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transition: transform var(--dur-2, 0.2s) var(--ease-out, ease);
  }
  .tab.is-active { color: var(--brand-ink); font-weight: var(--fw-semibold); }
  .tab.is-active::after { transform: scaleX(1); }
  /* Panels can be marked either way — a .tab-panel class or the data attribute
     the JS pairs with [data-tab]. Both hide until .is-active is set. */
  .tab-panel,
  :where([data-tab-panel]) { display: none; }
  .tab-panel.is-active,
  :where([data-tab-panel].is-active) { display: block; }

  /*
  ====================================================================
    ACCORDION
  ====================================================================
  */
  .accordion-item { border-bottom: 1px solid var(--line); }
  /* justify-content: space-between would spread a label made of several parts
     (text + <code> + icon). The icon is pushed to the end instead, so the label
     can be any number of nodes. */
  .accordion-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    padding: 1.8rem 0;
    text-align: left;
    font-size: var(--fs-4);
    font-weight: var(--fw-semibold);
    color: var(--ink);
    cursor: pointer;
  }
  .accordion-icon {
    margin-inline-start: auto;
    transition: transform var(--dur-2, 0.2s) var(--ease-out, ease);
    flex: 0 0 auto;
  }
  .accordion-item.is-open .accordion-icon { transform: rotate(45deg); }
  .accordion-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-3, 0.38s) var(--ease-out, ease);
  }
  /* min-height: 0 is what actually lets the 0fr row collapse — without it the
     child keeps its content height and a sliver of the panel stays visible. */
  .accordion-body > * {
    overflow: hidden;
    min-height: 0;
  }
  .accordion-item.is-open .accordion-body { grid-template-rows: 1fr; }
  /*
    No padding on this element. It is the grid item, and a grid item's padding
    survives a 0fr track even with min-height:0 — which left an 18px sliver of
    every closed panel on screen. The spacing goes on the content instead, where
    overflow:hidden can clip it.
  */
  .accordion-body-inner { color: var(--ink-2); }
  :where(.accordion-body-inner) > :last-child { margin-block-end: 1.8rem; }

  /*
  ====================================================================
    MODAL / POPUP
  ====================================================================
  */
  .modal,
  .popup {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 2.4rem;
    background: rgba(20, 12, 40, 0.45);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    z-index: 100;
    transition: opacity var(--dur-3, 0.38s) var(--ease-out, ease), visibility 0s linear var(--dur-3, 0.38s);
  }
  .modal.is-open,
  .popup.is-open {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .modal-box,
  .popup-box {
    width: min(var(--modal-w, 56rem), 100%);
    max-height: 86dvh;
    overflow-y: auto;
    padding: 3.2rem;
    background: var(--surface);
    border-radius: var(--rad-md);
    box-shadow: var(--shadow-3);
    transform: translateY(1.6rem) scale(0.98);
    transition: transform var(--dur-3, 0.38s) var(--ease-back, ease);
  }
  .modal.is-open .modal-box,
  .popup.is-open .popup-box { transform: none; }
  .modal-close {
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: var(--rad-circle);
    display: grid;
    place-items: center;
    background: var(--surface-2);
  }
  body.is-locked { overflow: hidden; }

  /*
  ====================================================================
    TOOLTIP
  ====================================================================
  */
  [data-tip] { position: relative; }
  [data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 0.8rem);
    left: 50%;
    translate: -50% 0;
    padding: 0.6rem 1rem;
    border-radius: var(--rad-xs);
    background: var(--ink);
    color: #fff;
    font-size: var(--fs-2);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-2, 0.2s) ease, translate var(--dur-2, 0.2s) ease;
    z-index: 40;
  }
  [data-tip]:hover::after { opacity: 1; translate: -50% -0.3rem; }

  /*
  ====================================================================
    TOAST
  ====================================================================
  */
  .toast-stack {
    position: fixed;
    right: 2.4rem;
    bottom: 2.4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 120;
  }
  .toast {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.4rem 2rem;
    background: var(--surface);
    border-left: 3px solid var(--brand);
    border-radius: var(--rad-sm);
    box-shadow: var(--shadow-2);
    font-size: var(--fs-3);
    color: var(--ink);
  }
  .toast-ok { border-left-color: var(--ok); }
  .toast-danger { border-left-color: var(--danger); }

  /*
  ====================================================================
    SLIDER / RAIL
    Drag-to-scroll rail with dots — the pattern we hand wrote per project.
  ====================================================================
  */
  .slider { position: relative; }
  .slider-rail {
    display: flex;
    gap: var(--slide-gap, 2rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    cursor: grab;
  }
  .slider-rail::-webkit-scrollbar { display: none; }
  .slider-rail.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
  .slider-rail > * {
    flex: 0 0 var(--slide-w, 32rem);
    max-width: 100%;
    scroll-snap-align: center;
  }
  .slider-dots {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 1.6rem;
  }
  .slider-dot {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: var(--rad-circle);
    background: var(--line-strong);
    cursor: pointer;
    transition: width var(--dur-2, 0.2s) var(--ease-out, ease), background var(--dur-2, 0.2s) ease;
  }
  .slider-dot.is-active { width: 2.4rem; border-radius: var(--rad-pill); background: var(--brand); }
  .slider-btn {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    width: 4.4rem;
    height: 4.4rem;
    display: grid;
    place-items: center;
    border-radius: var(--rad-circle);
    background: var(--surface);
    box-shadow: var(--shadow-2);
    z-index: 2;
  }
  .slider-prev { left: -2.2rem; }
  .slider-next { right: -2.2rem; }

  /*
  ====================================================================
    NAV
  ====================================================================
  */
  .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1.2rem;
    border-radius: var(--rad-sm);
    color: inherit;
    transition: background var(--dur-2, 0.2s) ease, color var(--dur-2, 0.2s) ease;
  }
  .nav-link:hover { background: var(--brand-ghost); }
  .nav-link.is-active { color: var(--brand-ink); font-weight: var(--fw-semibold); }

  .nav-toggle {
    display: none;
    width: 4.4rem;
    height: 4.4rem;
    place-items: center;
  }
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after {
    content: "";
    display: block;
    width: 2.2rem;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--dur-2, 0.2s) var(--ease-out, ease), opacity var(--dur-1, 0.12s) linear;
  }
  .nav-toggle span::before { transform: translateY(-7px); }
  .nav-toggle span::after { transform: translateY(5px); }
  .nav-toggle.is-open span { background: transparent; }
  .nav-toggle.is-open span::before { transform: rotate(45deg); }
  .nav-toggle.is-open span::after { transform: rotate(-45deg) translateY(-1px); }

  @media (max-width: 768px) {
    .nav-toggle { display: grid; }
    .nav-menu {
      position: fixed;
      inset: 0 0 auto 0;
      display: grid;
      gap: 0.4rem;
      padding: 8rem 2.4rem 3.2rem;
      background: var(--surface);
      box-shadow: var(--shadow-3);
      transform: translateY(-100%);
      transition: transform var(--dur-3, 0.38s) var(--ease-out, ease);
      z-index: 90;
    }
    .nav-menu.is-open { transform: none; }
  }

  /*
  ====================================================================
    TABLE
  ====================================================================
  */
  .table { width: 100%; border-collapse: collapse; font-size: var(--fs-3); }
  .table th {
    text-align: left;
    padding: 1.2rem 1.6rem;
    font-weight: var(--fw-semibold);
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
  }
  .table td {
    padding: 1.6rem;
    color: var(--ink-2);
    border-bottom: 1px solid var(--line);
  }
  .table tr:hover td { background: var(--surface-2); }

  /*
  ====================================================================
    SKELETON / EMPTY
  ====================================================================
  */
  .skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
    background-size: 400% 100%;
    border-radius: var(--rad-xs);
    animation: hashSkeleton 1.4s ease infinite;
    color: transparent !important;
    pointer-events: none;
  }
  @keyframes hashSkeleton {
    from { background-position: 100% 50%; }
    to { background-position: 0 50%; }
  }
}