/*
 * /vendor's shell, as the Nov 2026 board (canvas Main / VendorPhone /
 * VendorDark), on the operator kit (paste/op-shell.css, loaded just before).
 *
 * The markup keeps the hooks the page's scripts and older sheets use
 * (.tool-shell, .side, .v-side-item, .topbar, .tabbar, .menu-tool,
 * [data-more]); this binds them to the kit's x-pieces and settles the places
 * where the older sheets (paste/tool.css, vendor-page/paste.css, the
 * operator kit's readable type) would otherwise win.
 *
 * One breakpoint for the frame, 960px: above it the sidebar stands beside
 * the page; at it and under, the sidebar is a drawer behind More, the top
 * bar is the board's phone slip, the place's slip sits under it, and the
 * tab bar floats at the foot.
 */

.xroot { --xg: clamp(24px, 3.2vw, 56px); }

/* ── The sidebar ─────────────────────────────────────────────────────────── */
.xroot .xside { background: none; height: 100vh; max-height: none; overflow-y: auto; scrollbar-width: thin; gap: 18px; padding: 24px 14px 20px 20px; }
.xroot .xside > .xbrand { padding: 0 10px; color: var(--ink); }
.xroot .xside .xbrand span { font-size: inherit; }
.v-side-acct:empty, .v-side-plan:empty, .v-mplace:empty { display: none; }
.v-side-acct .v-pop-wrap, .v-mplace .v-pop-wrap { position: relative; }
.v-side-acct .v-pop, .v-mplace .v-pop { left: 0; right: 0; width: auto; top: calc(100% + 10px); }

/* The place, on its taped slip. */
.xroot .xplace { cursor: pointer; }
.xroot .xplace img { display: block; background: var(--well); }
.xroot .xplace .v-place-card-id { min-width: 0; }
.xroot .xplace .v-place-card-name { font-size: 16px; font-weight: 750; letter-spacing: -.01em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xroot .xplace .v-place-card-state { margin-top: 2px; color: var(--ink2); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xroot .xplace > svg.i { color: var(--ink3); transition: transform 200ms var(--ease-out); }
.xroot .xplace[aria-expanded="true"] > svg.i { transform: rotate(180deg); }
.xroot .xplace[aria-expanded="true"] { --tilt: 0deg; }
@media (hover: hover) { .xroot .xplace:hover { --tilt: -.3deg; } }

/* The sections: ink words, ink glyphs, and one line of ink under the one
   showing, sliding to it (shell.js slideInk). Never filled, never green. */
.xroot .xnav { position: relative; gap: 1px; }
.xroot .xnav .grp { margin: 18px 10px 6px; letter-spacing: .1em; color: var(--ink3); }
.xroot .xnav .grp:first-child { margin-top: 0; }
.xroot .xnav .v-side-item,
.xroot .xnav .v-side-act {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  width: 100%; height: 42px; padding: 0 10px; border-radius: 10px;
  background: none; box-shadow: none; color: var(--ink2); font: 650 16px/1.2 var(--f); text-align: left; text-decoration: none;
  transition: color 160ms ease;
}
.xroot .xnav .v-side-item svg.i, .xroot .xnav .v-side-act svg.i { width: 20px; height: 20px; color: inherit; }
.xroot .xnav .v-side-item[aria-current="true"] { color: var(--ink); font-weight: 750; background: none !important; box-shadow: none !important; text-decoration: none; }
.xroot .xnav .v-side-item[aria-current="true"] svg.i { color: var(--ink); }
@media (hover: hover) { .xroot .xnav :is(.v-side-item, .v-side-act):not([aria-current="true"]):hover { color: var(--ink); background: none; text-decoration: none; } }
.xroot .xnav .v-side-item .x-label { justify-self: start; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xroot .xnav .v-side-count { min-width: 24px; height: 22px; padding: 0 7px; font-size: 12.5px; }
.x-ink { position: absolute; left: 0; top: 0; z-index: 1; height: 2.5px; width: 0; border-radius: 2px; background: var(--ink); pointer-events: none; opacity: 0; transition: transform 420ms var(--ease-out), width 420ms var(--ease-out), opacity 200ms ease; }
@media (prefers-reduced-motion: reduce) { .x-ink { transition: none; } }

/* The plan, as the mustard ticket stub. */
.xroot .v-side-plan { margin-top: auto; padding: 12px 6px 4px 0; }
.xroot .xplan { display: block; width: 100%; margin: 0; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; transition: rotate 300ms var(--ease-spring); }
.xroot div.xplan { cursor: default; }
.xroot .xplan .v-plancard-t { color: #1D1F22; }
.xroot .xplan .v-plancard-s { color: rgba(29,31,34,.78); }
.xroot .xplan .btn { margin-top: 12px; background: #1D1F22; color: #FBF8F1; }
@media (hover: hover) { .xroot button.xplan:hover { rotate: 0deg; } }

/* Help, sign out, and the fine print. */
.xroot .xside .side-foot { display: grid; gap: 12px; margin-top: 4px; }
.xroot .xside .side-foot .lo { display: grid; gap: 1px; }
.xroot .xside .xsfoot { padding: 0 10px; color: var(--ink3); font-size: 13.5px; line-height: 1.6; }
.xroot .xside .xsfoot a { display: inline; height: auto; width: auto; padding: 0; color: var(--ink3); font-size: inherit; }
@media (hover: hover) { .xroot .xside .xsfoot a:hover { color: var(--ink); } }

/* ── The main column ─────────────────────────────────────────────────────── */
.xroot .xmain { display: flex; flex-direction: column; padding: 0 var(--xg) 56px; }
.xroot .xmain > .page { flex: 1 0 auto; padding: 0; }
.xroot .xmain > .page > .v-skeleton { min-height: 70vh; }
.xroot .xfoot { margin-top: 72px; }
.xroot .xfoot a { color: var(--ink3); }
@media (hover: hover) { .xroot .xfoot a:hover { color: var(--ink); } }

/* The top bar: the board's, sticky, on the ground. */
.xroot .xmain > .topbar.xtop {
  position: sticky; top: 0; z-index: 40; margin: 0 calc(-1 * var(--xg)); padding: 0 var(--xg);
  height: 80px; min-height: 0; gap: 10px; justify-content: flex-start;
  background: color-mix(in srgb, var(--ground) 90%, transparent);
}
.xroot .topbar .menu-tool, .xroot .topbar .v-top-brand { display: none; }
.xroot .topbar .xcrumb { margin: 0 auto 0 0; gap: 10px; font-size: 16px; font-weight: 600; color: var(--ink3); }
.xroot .topbar .xcrumb b { color: var(--ink); font-weight: 750; }
.xroot .topbar .end { gap: 10px; }
.xroot .topbar .xupd { margin-right: 4px; font-size: 14px; color: var(--ink3); }
.xroot .topbar .xsearch { height: 44px; min-width: 300px; padding: 0 8px 0 16px; gap: 10px; border-radius: 99px; background: var(--ground2); color: var(--ink3); font-size: 16px; font-weight: 550; }
.xroot .topbar .xsearch kbd { height: 26px; padding: 0 8px; border-radius: 7px; background: var(--sheet); color: var(--ink2); box-shadow: none; font: 750 12.5px/1 var(--f); }
.xroot .topbar [data-theme-switch] { display: inline-flex; gap: 2px; padding: 3px; border-radius: 99px; background: none; box-shadow: inset 0 0 0 1.5px var(--rule2); }
.xroot .topbar [data-theme-switch] button { width: 36px; height: 36px; color: var(--ink3); }
.xroot .topbar [data-theme-switch] button svg { width: 18px; height: 18px; }
.xroot .topbar [data-theme-switch] button[aria-pressed="true"] { background: var(--sheet); color: var(--ink); box-shadow: var(--shadow); }
.xroot .topbar .xicon { width: 44px; height: 44px; background: none; color: var(--ink2); box-shadow: inset 0 0 0 1.5px var(--rule2); }
@media (hover: hover) { .xroot .topbar .xicon:hover { background: var(--ground2); color: var(--ink); } }
.xroot .topbar .xicon .pip { top: 9px; right: 10px; }
.xroot .topbar .xicon.is-spinning svg { animation: vp-spin 700ms var(--ease-out); }
.xroot .topbar .xav { width: 44px; height: 44px; font-size: 15px; }
.xroot .topbar .v-pop { top: calc(100% + 10px); }
@media (max-width: 1240px) { .xroot .topbar .xupd { display: none; } .xroot .topbar .xsearch { min-width: 220px; } }

/* The tab bar: not drawn above the phone width. */
.xroot .xbar { display: none; }

/* Before there is a place: the stage alone. */
.v-shell-bare .xfoot, .v-shell-bare .v-mplace { display: none !important; }

/* ── Phones and small tablets ────────────────────────────────────────────── */
@media (max-width: 960px) {
  .xroot { --xg: 24px; }
  .xroot.xshell { grid-template-columns: minmax(0, 1fr); }

  /* The sidebar is the drawer behind More (frame.js opens it). */
  .xroot .xside {
    display: flex; position: fixed; inset: 0 auto 0 0; z-index: 140;
    width: min(320px, 88vw); height: 100%; padding: 22px 16px 24px 18px;
    background: var(--ground); box-shadow: 30px 0 60px -30px rgba(0,0,0,.5);
    transform: translateX(-104%); transition: transform 300ms var(--ease-out);
  }
  .xroot .xside.open { transform: none; }
  .xroot .xside .xplace { display: grid; }

  /* The top bar is the board's top slip: the mark, the bell, who you are. */
  .xroot .xmain > .topbar.xtop { display: flex; position: static; height: 64px; margin: 0; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .xroot .topbar .v-top-brand { display: flex; color: var(--ink); }
  .xroot .topbar .xcrumb, .xroot .topbar .xupd, .xroot .topbar .xsearch, .xroot .topbar [data-theme-switch], .xroot .topbar #v-refresh { display: none; }
  .xroot .topbar .end { margin-left: auto; gap: 8px; }
  .xroot .topbar .xav { width: 40px; height: 40px; }
  .xroot .topbar .xicon { width: 42px; height: 42px; }

  /* The place's slip under it. */
  .xroot .v-mplace { display: block; }
  .xroot .v-mplace .xplace.xmobile { display: grid; margin: 4px 0 26px; }

  .xroot .xmain { padding-bottom: 120px; }

  /* The tab bar, floating at the foot. */
  .xroot .xbar.tabbar {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; height: 70px; margin: 0; padding: 0;
    border-radius: 22px; background: color-mix(in srgb, var(--sheet) 96%, transparent); box-shadow: var(--shadow-lift);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  .xroot .xbar .v-tab, .xroot .xbar [data-more] {
    display: grid; justify-items: center; align-content: center; gap: 5px; min-width: 0; height: 100%; padding: 0 2px;
    border-radius: 18px; background: none !important; color: var(--ink3); font: 700 16px/1.1 var(--f); letter-spacing: -.01em;
  }
  .xroot .xbar .v-tab svg.i, .xroot .xbar [data-more] svg.i { width: 22px; height: 22px; color: inherit; }
  .xroot .xbar .v-tab[aria-current] { color: var(--ink); font-weight: 750; }
  .xroot .xbar .x-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.tool .xroot .xbar.tabbar :is(a, button)::after { display: none; }
}
@media (max-width: 760px) {
  .xroot { --xg: 16px; }
}
@media (max-width: 359px) {
  .xroot .xbar .v-tab, .xroot .xbar [data-more] { font-size: 14px; }
}