/* harbor chrome · the app frame itself
 *
 * The shell used to be three floating islands: a pill rail hovering at the
 * vertical middle of the left gutter, a header that began 96px in, and a
 * screen that started somewhere else again. Nothing shared an edge, so the
 * desktop app read as furniture dropped on a black floor rather than a room.
 *
 * This file owns the frame at every width. It is loaded after every other
 * sheet so it wins on source order, and it stays deliberately small: the
 * frame is the one thing that must not become another pile of patches.
 *
 * mobile keeps the floating tab bar — a thumb reaches a pill better than a
 * full-bleed bar, and the safe-area inset already sits under it.
 */

/* ── desktop · the rail becomes an actual rail ──────────────────────────── */
@media (min-width: 1024px) {
  #device[data-ui="sanctuary-v2"] > .nav {
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    width: 96px;
    min-height: 0;
    /* the first tab clears the 64px header so the rail and the header share
       one horizon line instead of interleaving. */
    padding: 74px 11px 18px;
    border: 0;
    border-right: 1px solid rgba(237, 231, 214, 0.07);
    border-radius: 0;
    background: rgba(13, 17, 11, 0.985);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
  }

  #device[data-ui="sanctuary-v2"].dawn > .nav {
    border-right-color: rgba(34, 42, 31, 0.1);
    background: rgba(240, 236, 224, 0.985);
    box-shadow: none;
  }

  /* as a column the tabs inherited the row layout's willingness to grow and
     each one stretched to 160px, spacing five icons down 900px of rail. they
     are fixed-size marks stacked at the top. */
  #device[data-ui="sanctuary-v2"] > .nav button {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 62px;
    gap: 6px;
    padding: 8px 4px;
    border-radius: 16px;
  }

  #device[data-ui="sanctuary-v2"] > .nav .nl {
    font-size: 10px;
  }

  /* the rail slides, it does not re-centre: every transform below used to
     carry a translateY(-50%) that only made sense on a centred pill. */
  #device[data-ui="sanctuary-v2"].overlay-open > .nav,
  #device[data-ui="sanctuary-v2"].shield-open > .nav {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-14px);
  }

  /* composing is a phone concern. on a desktop the rail is chrome, and
     chrome that disappears when you click into a text field is a bug. */
  #device[data-ui="sanctuary-v2"].is-composing > .nav,
  #device[data-ui="sanctuary-v2"].is-composing #nav {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  /* the header now begins exactly where the rail ends, so the rail's right
     border and the header's bottom border meet in one corner. */
  #device[data-ui="sanctuary-v2"] .apphead {
    padding-right: clamp(20px, 3vw, 34px);
    padding-left: clamp(20px, 3vw, 34px);
  }
}