/* =========================================================
   FINAL POLISH V0.0.4
   ========================================================= */


/* =========================================================
   STYLE DEEP LINK
   ========================================================= */

.style-link-copy-v004 {
  position:
    fixed;

  z-index:
    10020;

  right:
    18px;

  bottom:
    18px;

  display:
    none;

  padding:
    9px 11px;

  border:
    1px solid
    var(--accent);

  background:
    var(--bg);

  color:
    var(--accent);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size:
    8px;

  letter-spacing:
    .055em;

  cursor:
    pointer;
}


body.viewer-open
.style-link-copy-v004 {
  display:
    block;
}


.style-link-copy-v004:hover {
  background:
    rgba(
      214,
      255,
      63,
      .06
    );
}


/* =========================================================
   ZERO RESULT
   ========================================================= */

.zero-result-polish-v004 {
  width:
    min(
      680px,
      100%
    );

  margin:
    28px
    auto
    0;

  padding:
    18px;

  border:
    1px solid
    var(--line);

  text-align:
    left;
}


.zero-result-polish-v004[hidden] {
  display:
    none;
}


.zero-result-title-v004,
.zero-result-label-v004 {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  letter-spacing:
    .06em;
}


.zero-result-title-v004 {
  color:
    var(--accent);

  font-size:
    9px;
}


.zero-result-query-v004 {
  margin-top:
    7px;

  overflow:
    hidden;

  color:
    var(--text);

  font-size:
    18px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.zero-result-label-v004 {
  margin-top:
    18px;

  color:
    var(--muted-2);

  font-size:
    7px;
}


.zero-result-actions-v004 {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    6px;

  margin-top:
    7px;
}


.zero-result-actions-v004 button {
  appearance:
    none;

  padding:
    7px 9px;

  border:
    1px solid
    var(--line-soft);

  background:
    transparent;

  color:
    var(--muted);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size:
    8px;

  cursor:
    pointer;
}


.zero-result-actions-v004 button:hover {
  border-color:
    var(--accent);

  color:
    var(--accent);
}


/* =========================================================
   DISCOVER
   ========================================================= */

.discover-polish-wrap-v004 {
  position:
    relative;

  display:
    inline-flex;
}


.discover-polish-menu-v004 {
  position:
    absolute;

  z-index:
    150;

  top:
    calc(
      100% + 7px
    );

  right:
    0;

  width:
    min(
      310px,
      86vw
    );

  border:
    1px solid
    var(--line);

  background:
    var(--bg);

  box-shadow:
    0 18px 55px
    rgba(
      0,
      0,
      0,
      .34
    );
}


.discover-polish-menu-v004[hidden] {
  display:
    none;
}


.discover-polish-menu-v004 button {
  appearance:
    none;

  display:
    grid;

  gap:
    4px;

  width:
    100%;

  padding:
    11px 12px;

  border:
    0;

  border-bottom:
    1px solid
    var(--line-soft);

  background:
    transparent;

  color:
    var(--text);

  text-align:
    left;

  cursor:
    pointer;
}


.discover-polish-menu-v004 button:last-child {
  border-bottom:
    0;
}


.discover-polish-menu-v004 button:hover {
  background:
    rgba(
      214,
      255,
      63,
      .045
    );
}


.discover-polish-menu-v004 span,
.discover-polish-menu-v004 small {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
}


.discover-polish-menu-v004 span {
  color:
    var(--text);

  font-size:
    9px;

  letter-spacing:
    .04em;
}


.discover-polish-menu-v004 button:hover
span {
  color:
    var(--accent);
}


.discover-polish-menu-v004 small {
  color:
    var(--muted);

  font-size:
    7px;
}


/* =========================================================
   MOBILE POLISH
   ========================================================= */

@media (
  max-width: 760px
) {

  /*
    Top controls:
    allow breathing room instead of
    squeezing everything into one line.
  */

  .top-actions {
    flex-wrap:
      wrap;

    gap:
      6px;
  }


  .top-actions button,
  .command-trigger-v004,
  #discoverPolishButton {
    min-height:
      36px;
  }


  /*
    Search-related chips can scroll sideways
    instead of destroying the layout.
  */

  .grid-density-v004 {
    flex-wrap:
      nowrap;

    max-width:
      100%;

    overflow-x:
      auto;

    padding-bottom:
      2px;

    scrollbar-width:
      none;
  }


  .grid-density-v004::-webkit-scrollbar {
    display:
      none;
  }


  /*
    Archive switchers.
    Selectors are deliberately tolerant
    because archives-v004 may use either
    class depending on revision.
  */

  .archive-switcher-v004,
  .archive-selector-v004,
  .archive-tabs-v004 {
    max-width:
      100%;

    overflow-x:
      auto;

    scrollbar-width:
      none;
  }


  /*
    Command menu:
    no expensive mobile blur,
    bigger touch targets.
  */

  .command-backdrop-v004 {
    backdrop-filter:
      none;
  }


  .command-item-v004 {
    min-height:
      54px;
  }


  .command-dialog-v004 {
    width:
      100%;
  }


  /*
    Zero results.
  */

  .zero-result-polish-v004 {
    margin-top:
      20px;

    padding:
      14px;
  }


  .zero-result-query-v004 {
    font-size:
      16px;
  }


  .zero-result-actions-v004 button {
    min-height:
      38px;
  }


  /*
    Discover menu becomes easy to hit
    on phones.
  */

  .discover-polish-menu-v004 {
    position:
      fixed;

    top:
      auto;

    right:
      10px;

    bottom:
      10px;

    left:
      10px;

    width:
      auto;
  }


  .discover-polish-menu-v004 button {
    min-height:
      58px;

    padding:
      12px 14px;
  }


  /*
    Viewer deep-link button.
  */

  .style-link-copy-v004 {
    right:
      10px;

    bottom:
      10px;

    min-height:
      40px;

    padding:
      9px 11px;
  }


  /*
    Generic dialog safety.
  */

  dialog {
    max-width:
      calc(
        100vw - 16px
      );

    max-height:
      calc(
        100dvh - 16px
      );
  }
}


@media (
  max-width: 430px
) {

  .command-overlay-v004 {
    padding:
      52px 8px 8px;
  }


  .command-input-wrap-v004 {
    padding:
      13px 12px;
  }


  #commandSearchInput {
    font-size:
      20px;
  }


  .zero-result-actions-v004 {
    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .zero-result-actions-v004 button {
    width:
      100%;
  }
}