/* ============================================================
   PASSAGE by Khoshà — the customisable Shortcuts bar.

   Everything here is namespaced sx-. The PILLS themselves are still
   govbar.css's .gv-link / .gv-track / .gv-internal — the client asked to keep
   the row exactly as it looks today, so this file adds the heading, the
   folder button, the folder menu and the Customise panel, and changes nothing
   about how a shortcut button is drawn.

   Tokens only (styles.css :root). No new colours, no new fonts.
   ============================================================ */

/* ---------- the bar: heading, track, gear ---------- */
.sx-bar{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

/* Outside .gv-track deliberately: the track scrolls sideways on a narrow
   screen and a heading that scrolls out of view is not a heading. */
.sx-head{
  flex:0 0 auto;
  font-family:var(--disp);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  white-space:nowrap;
  padding-right:12px;
  border-right:1px solid var(--stroke-soft);
  line-height:1.2;
}

.sx-edit{
  flex:0 0 auto;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--stroke-soft);
  background:var(--bone);
  color:var(--ink-faint);
  transition:color .2s, border-color .2s, background .2s, transform .2s;
}
.sx-edit:hover{
  color:var(--gold-deep);
  border-color:var(--gold);
  background:rgba(216,184,119,.12);
  transform:rotate(35deg);
}
.sx-edit svg{width:14px;height:14px}
.sx-edit[hidden]{display:none}

.sx-none{
  flex:0 0 auto;
  font-size:11.5px;
  color:var(--ink-faint);
  font-style:italic;
  white-space:nowrap;
}

/* ---------- an internal shortcut is an ordinary button ----------
   govbar.css's .gv-internal is transparent with a DASHED border. That was
   right when it styled the one tentative "see the firm's own table" link this
   bar used to carry. Now that a firm can fill the row with internal
   shortcuts, a dashed pill beside a solid one reads as disabled, and the
   client asked for "the same pill buttons".

   The ↗ is what marks an external destination. Its ABSENCE is what marks an
   internal one — not a different border. Scoped under .gv-bar so this wins on
   specificity however index.html happens to order the two stylesheets. */
.gv-bar .sx-pill.gv-internal{
  background:var(--bone);
  border-style:solid;
  border-color:var(--stroke-soft);
}
.gv-bar .sx-pill.gv-internal:hover{
  color:var(--gold-deep);
  border-color:var(--gold);
  background:rgba(216,184,119,.10);
}
.gv-bar .sx-pill.gv-internal.on{
  color:var(--gold-deep);
  border-color:var(--gold);
  background:rgba(216,184,119,.14);
}

/* ---------- a folder, as a pill ---------- */
.sx-groupbtn{cursor:pointer}
.sx-groupbtn .sx-count{
  font-size:9.5px;
  font-weight:700;
  line-height:1;
  padding:2px 6px;
  border-radius:99px;
  background:rgba(169,130,76,.14);
  color:var(--gold-deep);
}
.sx-groupbtn svg:last-child{width:10px;height:10px;opacity:.55}
.sx-groupbtn[aria-expanded="true"]{
  color:var(--gold-deep);
  border-color:var(--gold);
  background:rgba(216,184,119,.14);
}
.sx-groupbtn[aria-expanded="true"] svg:last-child{transform:rotate(180deg)}

/* A shortcut pointing at a page this build no longer has. Visible, inert,
   and it says why — better than a button that silently goes nowhere. */
.gv-bar .sx-dead{
  opacity:.55;
  cursor:default;
  border-style:dashed;
  background:transparent;
  pointer-events:auto;
}
.sx-deadtag{
  margin-left:6px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--red);
}

/* ---------- the folder menu ---------- */
.sx-menu{
  position:fixed;
  z-index:60;
  min-width:196px;
  max-width:min(320px, calc(100vw - 20px));
  max-height:min(60vh, 420px);
  overflow:auto;
  padding:6px;
  border-radius:var(--r-sm);
  border:1px solid var(--stroke);
  background:var(--paper);
  box-shadow:var(--shadow);
  animation:sxMenuIn .14s ease-out;
}
@keyframes sxMenuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.sx-mi{
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  color:var(--ink-soft);
  transition:background .14s, color .14s;
}
.sx-mi:hover{background:var(--bone);color:var(--gold-deep)}
.sx-mi svg{width:12px;height:12px;flex:0 0 auto;opacity:.6}
.sx-mi span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-mi.sx-dead{border:0;background:transparent}
.sx-menu-empty{
  padding:14px 12px;
  font-size:12.5px;
  line-height:1.5;
  color:var(--ink-faint);
  text-align:center;
}

/* ---------- the Customise panel ---------- */
.sx-mgr-tools{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:14px 0 10px;
}
.sx-mgr{
  border:1px solid var(--stroke-soft);
  border-radius:var(--r-sm);
  overflow:hidden;
}
.sx-mrow{
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 12px;
  border-bottom:1px solid var(--stroke-soft);
  background:var(--paper);
}
.sx-mrow:last-child{border-bottom:0}
.sx-mrow.sx-mgroup{background:var(--bone)}
.sx-mrow.sx-mkid{
  padding-left:34px;
  background:rgba(244,240,233,.45);
  position:relative;
}
.sx-mrow.sx-mkid::before{
  content:'';
  position:absolute;
  left:20px;
  top:0;
  bottom:0;
  width:1px;
  background:var(--stroke);
}
.sx-mempty{
  font-size:12px;
  color:var(--ink-faint);
  font-style:italic;
}

.sx-mmove{display:flex;flex-direction:column;gap:2px;flex:0 0 auto}
.sx-mbtn{
  width:22px;
  height:16px;
  display:grid;
  place-items:center;
  font-size:8px;
  line-height:1;
  border:1px solid var(--stroke-soft);
  border-radius:5px;
  background:var(--paper);
  color:var(--ink-faint);
  transition:color .15s, border-color .15s, background .15s;
}
.sx-mbtn:hover{color:var(--gold-deep);border-color:var(--gold);background:rgba(216,184,119,.12)}

.sx-mmain{flex:1;min-width:0}
.sx-mlabel{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:13.5px;
  font-weight:600;
  color:var(--ink);
}
.sx-mlabel svg{width:12px;height:12px;flex:0 0 auto;opacity:.55}
.sx-mlabel span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-mtgt{
  font-size:11.5px;
  color:var(--ink-faint);
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sx-macts{display:flex;gap:6px;flex:0 0 auto}

.sx-kindpick{display:flex;gap:8px;flex-wrap:wrap}
.sx-hint{
  font-size:11.5px;
  color:var(--ink-faint);
  margin-top:5px;
  line-height:1.45;
}

/* ============================================================
   phone — the whole point of up/down buttons instead of drag
   ============================================================ */
@media (max-width:760px){
  .sx-bar{gap:9px}
  .sx-head{
    font-size:9.5px;
    letter-spacing:.11em;
    padding-right:9px;
  }
  .sx-edit{width:26px;height:26px}
  .sx-edit svg{width:13px;height:13px}
  .sx-none{font-size:11px;white-space:normal}

  .sx-mrow{
    flex-wrap:wrap;
    row-gap:8px;
    padding:10px 12px;
  }
  .sx-mrow.sx-mkid{padding-left:26px}
  .sx-mrow.sx-mkid::before{left:14px}
  .sx-mmain{flex:1 1 60%}
  .sx-macts{flex:1 1 100%;justify-content:flex-end}
  .sx-mbtn{width:30px;height:24px;font-size:9px}
  .sx-mgr-tools .btn{flex:1 1 auto}
}

/* ---------- the capsules, filled ----------
   Asked for on 25 Sep 2026: "the shortcut capsules filling with emerald
   colour just like the email banner, and text in white or light beige".
   --green is the same ink as the band across the top of every email PASSAGE
   sends, and --on-green is the bone the firm's name is printed in there, so
   the bar and the post now read as one house.

   Scoped to .gv-bar .sx-pill so ONLY the shortcuts bar changes: .gv-link is
   used elsewhere in govbar.js and a global fill would repaint things nobody
   asked about. The ↗ keeps marking an external destination and its absence
   an internal one — the fill says nothing about where a button goes. */
.gv-bar .sx-pill,
.gv-bar .sx-pill.gv-internal{
  background:var(--green);
  border-color:var(--green);
  color:var(--on-green, #F4F0E9);
}
.gv-bar .sx-pill svg{opacity:.85}

.gv-bar .sx-pill:hover,
.gv-bar .sx-pill.gv-internal:hover{
  /* Lift rather than invert: a pill that goes pale on hover reads as
     disabled next to eight filled ones. */
  background:var(--green-soft, #2F5249);
  border-color:var(--gold);
  color:#FFFDF7;
}
.gv-bar .sx-pill:hover svg{opacity:1}

.gv-bar .sx-pill.gv-internal.on,
.gv-bar .sx-pill.on{
  /* The page you are on: gold edge against the green, not a third colour. */
  background:var(--green-soft, #2F5249);
  border-color:var(--gold-hi, #D8B877);
  color:#FFFDF7;
}

/* A stale internal route keeps its dashed, inert look — it must not read as
   a live button just because the others are now filled. */
.gv-bar .sx-dead,
.gv-bar .sx-dead:hover{
  background:var(--bone);
  border-style:dashed;
  border-color:var(--stroke-soft);
  color:var(--ink-faint);
}