/* ============================================================
   Three-layer navigation shell: rail → panel → topbar.

   Every offset uses logical properties (inset-inline, margin-inline,
   padding-inline, border-start-*), so RTL and LTR come out of the same
   rules with no [dir="rtl"] overrides anywhere in this file.

   Layout model: "floating cards on a canvas". The rail, the panel and
   the topbar are independent rounded cards separated by --ct-gutter,
   which is what makes the shell read as three layers rather than one
   chrome. The content area is a fourth card.
   ============================================================ */

/* ---- Canvas ------------------------------------------------ */

body.has-shell {
  background: var(--ct-surface-app);
  margin: 0;
}

.shell {
  display: flex;
  align-items: stretch;
  gap: var(--ct-gutter);
  padding: var(--ct-gutter);
  min-height: 100vh;
  min-height: 100dvh;
}

/* ════════════════════════════════════════════════════════════
   Layer 1 — Rail
   ════════════════════════════════════════════════════════════ */

.rail {
  flex: 0 0 var(--ct-rail-w);
  width: var(--ct-rail-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ct-space-2);
  padding: var(--ct-space-3) 0;
  background: var(--ct-surface-card);
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow-card);
  position: sticky;
  top: var(--ct-gutter);
  height: calc(100dvh - (var(--ct-gutter) * 2));
  z-index: var(--ct-z-rail);
}

.rail-brand {
  width: 38px;
  height: 38px;
  border-radius: var(--ct-radius-sm);
  display: grid;
  place-items: center;
  background: var(--ct-brand);
  color: var(--ct-text-invert);
  font-weight: 800;
  font-size: 0.95rem;
  flex-shrink: 0;
  margin-bottom: var(--ct-space-2);
  text-decoration: none;
}
.rail-brand img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }

.rail-items {
  display: flex;
  flex-direction: column;
  gap: var(--ct-space-2);
  width: 100%;
  align-items: center;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  /* The scrollbar must not shift the icons off-centre. */
  scrollbar-width: none;
}
.rail-items::-webkit-scrollbar { width: 0; }

.rail-btn {
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--ct-radius-sm);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  color: var(--ct-text-muted);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ct-fast) var(--ct-ease),
              color var(--ct-fast) var(--ct-ease),
              transform var(--ct-fast) var(--ct-ease);
}
.rail-btn:hover { background: var(--ct-surface-sunken); color: var(--ct-text); }
.rail-btn:active { transform: scale(0.94); }

/* Active section: tinted in the section's own colour, plus a bar on the
   inline-start edge — the colour alone is not enough for anyone who cannot
   distinguish it. */
.rail-btn.is-active {
  background: color-mix(in srgb, var(--rail-color, var(--ct-brand)) 14%, transparent);
  color: var(--rail-color, var(--ct-brand));
}
.rail-btn.is-active::before {
  content: '';
  position: absolute;
  inset-inline-start: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: var(--ct-radius-pill);
  background: var(--rail-color, var(--ct-brand));
}

/* "You are here": a dot on the section that owns the page actually open.
   Once you click another rail icon to browse, the highlight moves with you
   and this is the only thing still pointing home — without it the panel
   shows a list where nothing is current and the shell looks lost. */
.rail-btn i { position: relative; }
.rail-btn.has-current:not(.is-active) i::after {
  content: '';
  position: absolute;
  bottom: -7px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rail-color, var(--ct-brand));
}

/* Tooltip, because a 64px rail has no room for labels. */
.rail-btn::after {
  content: attr(data-label);
  position: absolute;
  inset-inline-start: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 10px;
  border-radius: var(--ct-radius-xs);
  background: var(--ct-text);
  color: var(--ct-text-invert);
  font-size: 0.74rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ct-fast) var(--ct-ease);
  z-index: 1;
}
.rail-btn:hover::after,
.rail-btn:focus-visible::after { opacity: 1; }

.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--ct-space-2); align-items: center; }

/* ════════════════════════════════════════════════════════════
   Layer 2 — Panel
   ════════════════════════════════════════════════════════════ */

.panel {
  flex: 0 0 var(--ct-panel-w);
  width: var(--ct-panel-w);
  display: flex;
  flex-direction: column;
  background: var(--ct-surface-card);
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow-card);
  position: sticky;
  top: var(--ct-gutter);
  height: calc(100dvh - (var(--ct-gutter) * 2));
  overflow: hidden;
  z-index: var(--ct-z-panel);
}

/* One section visible at a time; the rest stay in the DOM so switching is a
   toggle, not a fetch. */
.panel-section {
  display: flex;
  flex-direction: column;
  height: 100%;
  animation: panelIn var(--ct-fast) var(--ct-ease);
}
.panel-section[hidden] { display: none; }
@keyframes panelIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.panel-back {
  display: inline-flex;
  align-items: center;
  gap: var(--ct-space-2);
  color: var(--panel-color, var(--ct-brand));
  text-decoration: none;
  font-weight: 600;
  font-size: 0.72rem;
}
.panel-back:hover { text-decoration: underline; }

.panel-head {
  padding: var(--ct-space-5) var(--ct-space-4) var(--ct-space-3);
  border-bottom: 1px solid var(--ct-border);
  display: flex;
  align-items: center;
  gap: var(--ct-space-3);
}
.panel-head-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--ct-radius-sm);
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  color: var(--panel-color, var(--ct-brand));
  background: color-mix(in srgb, var(--panel-color, var(--ct-brand)) 12%, transparent);
  flex-shrink: 0;
}
.panel-title { font-weight: 700; font-size: 0.95rem; color: var(--ct-text); line-height: 1.25; }
.panel-sub   { font-size: 0.72rem; color: var(--ct-text-subtle); }

.panel-items {
  padding: var(--ct-space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  flex: 1 1 auto;
}

.panel-link {
  display: flex;
  align-items: center;
  gap: var(--ct-space-3);
  padding: 9px var(--ct-space-3);
  border-radius: var(--ct-radius-sm);
  color: var(--ct-text-muted);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 500;
  transition: background var(--ct-fast) var(--ct-ease), color var(--ct-fast) var(--ct-ease);
}
.panel-link i { width: 18px; text-align: center; font-size: 0.9rem; flex-shrink: 0; }
.panel-link:hover { background: var(--ct-surface-hover); color: var(--ct-text); }

.panel-link.is-active {
  background: color-mix(in srgb, var(--panel-color, var(--ct-brand)) 12%, transparent);
  color: var(--panel-color, var(--ct-brand));
  font-weight: 650;
}

.panel-badge {
  margin-inline-start: auto;
  font-size: 0.64rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--ct-radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.panel-badge.new  { background: var(--ct-success-soft); color: var(--ct-success); }
.panel-badge.beta { background: var(--ct-warning-soft); color: var(--ct-warning); }

.panel-foot {
  padding: var(--ct-space-3) var(--ct-space-4);
  border-top: 1px solid var(--ct-border);
  font-size: 0.7rem;
  color: var(--ct-text-subtle);
}

/* ════════════════════════════════════════════════════════════
   Layer 3 — Topbar + content
   ════════════════════════════════════════════════════════════ */

.shell-main {
  flex: 1 1 auto;
  min-width: 0;                /* lets the content shrink instead of overflowing */
  display: flex;
  flex-direction: column;
  gap: var(--ct-gutter);
}

.topbar {
  height: var(--ct-topbar-h);
  display: flex;
  align-items: center;
  gap: var(--ct-space-3);
  padding-inline: var(--ct-space-4);
  background: var(--ct-surface-glass);
  -webkit-backdrop-filter: saturate(180%) blur(var(--ct-glass-blur));
  backdrop-filter: saturate(180%) blur(var(--ct-glass-blur));
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow-card);
  position: sticky;
  top: var(--ct-gutter);
  z-index: var(--ct-z-topbar);
}

.topbar-burger {
  display: none;               /* mobile only */
  width: 38px; height: 38px;
  border: 0; border-radius: var(--ct-radius-sm);
  background: var(--ct-surface-sunken);
  color: var(--ct-text);
  cursor: pointer;
}

.crumbs { display: flex; align-items: center; gap: var(--ct-space-2); min-width: 0; }
.crumb  { font-size: 0.84rem; color: var(--ct-text-muted); white-space: nowrap; }
.crumb.is-current { color: var(--ct-text); font-weight: 650; }
.crumb-sep { color: var(--ct-text-subtle); font-size: 0.7rem; }
/* The separator must point the way the language reads. */
.crumb-sep::before { content: '›'; }
[dir="rtl"] .crumb-sep::before { content: '‹'; }

.topbar-spacer { flex: 1 1 auto; }

/* The palette trigger: a search field that is really a button. */
.cmd-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--ct-space-2);
  height: 36px;
  min-width: 190px;
  padding-inline: var(--ct-space-3);
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius-sm);
  background: var(--ct-surface-sunken);
  color: var(--ct-text-subtle);
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color var(--ct-fast) var(--ct-ease), background var(--ct-fast) var(--ct-ease);
}
.cmd-trigger:hover { border-color: var(--ct-border-strong); background: var(--ct-surface-card); }
.cmd-kbd {
  margin-inline-start: auto;
  font-size: 0.68rem;
  padding: 1px 6px;
  border: 1px solid var(--ct-border-strong);
  border-radius: var(--ct-radius-xs);
  background: var(--ct-surface-card);
  color: var(--ct-text-muted);
  font-family: ui-monospace, monospace;
}

.topbar-btn {
  position: relative;
  width: 38px; height: 38px;
  border: 0; border-radius: var(--ct-radius-sm);
  background: transparent;
  color: var(--ct-text-muted);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--ct-fast) var(--ct-ease), color var(--ct-fast) var(--ct-ease);
}
.topbar-btn:hover { background: var(--ct-surface-sunken); color: var(--ct-text); }

.topbar-count {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: var(--ct-radius-pill);
  background: var(--ct-danger);
  color: var(--ct-text-invert);
  font-size: 0.62rem;
  font-weight: 700;
  display: grid; place-items: center;
  line-height: 1;
}

.topbar-user {
  display: inline-flex;
  align-items: center;
  gap: var(--ct-space-2);
  height: 38px;
  padding-inline: var(--ct-space-2);
  border: 0;
  border-radius: var(--ct-radius-sm);
  background: transparent;
  cursor: pointer;
  color: var(--ct-text);
  transition: background var(--ct-fast) var(--ct-ease);
}
.topbar-user:hover { background: var(--ct-surface-sunken); }
.topbar-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ct-brand);
  color: var(--ct-text-invert);
  display: grid; place-items: center;
  font-size: 0.74rem; font-weight: 700;
  flex-shrink: 0;
}
.topbar-user-name { font-size: 0.82rem; font-weight: 600; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The page itself — the fourth card. */
.shell-content {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--ct-surface-card);
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow-card);
  padding: var(--ct-space-5);
  overflow: visible;
}

/* ════════════════════════════════════════════════════════════
   Command palette
   ════════════════════════════════════════════════════════════ */

.cmd-scrim {
  position: fixed;
  inset: 0;
  background: var(--ct-surface-overlay);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: var(--ct-z-palette);
  display: none;
  padding-top: 12vh;
  justify-content: center;
  align-items: flex-start;
}
.cmd-scrim.is-open { display: flex; }

.cmd-box {
  width: min(560px, calc(100vw - 32px));
  max-height: 60vh;
  background: var(--ct-surface-card);
  border-radius: var(--ct-radius-md);
  box-shadow: var(--ct-shadow-pop);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cmdIn var(--ct-normal) var(--ct-ease);
}
@keyframes cmdIn { from { opacity: 0; transform: translateY(-10px) scale(0.985); } to { opacity: 1; transform: none; } }

.cmd-input-row {
  display: flex; align-items: center; gap: var(--ct-space-3);
  padding: var(--ct-space-4);
  border-bottom: 1px solid var(--ct-border);
}
.cmd-input {
  flex: 1 1 auto;
  border: 0; outline: 0;
  font-size: 0.98rem;
  background: transparent;
  color: var(--ct-text);
}
.cmd-results { overflow-y: auto; padding: var(--ct-space-2); }

.cmd-item {
  display: flex; align-items: center; gap: var(--ct-space-3);
  padding: 10px var(--ct-space-3);
  border-radius: var(--ct-radius-sm);
  cursor: pointer;
  text-decoration: none;
  color: var(--ct-text);
}
.cmd-item:hover,
.cmd-item.is-cursor { background: var(--ct-surface-sunken); }
.cmd-item-icon {
  width: 30px; height: 30px; border-radius: var(--ct-radius-xs);
  display: grid; place-items: center; font-size: 0.82rem; flex-shrink: 0;
}
.cmd-item-title { font-size: 0.87rem; font-weight: 600; }
.cmd-item-sec   { font-size: 0.72rem; color: var(--ct-text-subtle); }
.cmd-empty { padding: var(--ct-space-5); text-align: center; color: var(--ct-text-subtle); font-size: 0.85rem; }

/* ════════════════════════════════════════════════════════════
   Mobile — rail + panel collapse into one drawer
   ════════════════════════════════════════════════════════════ */

.shell-scrim {
  position: fixed;
  inset: 0;
  background: var(--ct-surface-overlay);
  z-index: var(--ct-z-scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ct-normal) var(--ct-ease), visibility var(--ct-normal);
}

@media (max-width: 992px) {
  .shell { padding: var(--ct-gutter); gap: 0; }

  /* One drawer carrying both layers, off-canvas on the inline-start edge.
     translateX(-100%) would slide the wrong way in RTL — the logical
     inset is what keeps a single rule correct in both directions. */
  .rail, .panel {
    position: fixed;
    top: 0;
    bottom: 0;
    height: 100dvh;
    border-radius: 0;
    z-index: var(--ct-z-drawer);
    transition: inset-inline-start var(--ct-slow) var(--ct-ease);
  }
  .rail  { inset-inline-start: calc(var(--ct-rail-w) * -1); }
  .panel { inset-inline-start: calc((var(--ct-rail-w) + var(--ct-panel-w)) * -1); }

  body.drawer-open .rail  { inset-inline-start: 0; }
  body.drawer-open .panel { inset-inline-start: var(--ct-rail-w); }

  body.drawer-open .shell-scrim { opacity: 1; visibility: visible; }
  /* Stop the page behind the drawer from scrolling under the finger. */
  body.drawer-open { overflow: hidden; }

  .topbar-burger { display: grid; place-items: center; }
  .shell-main { width: 100%; }
  .cmd-trigger { min-width: 0; }
  .cmd-trigger .cmd-trigger-text,
  .cmd-kbd { display: none; }
  .topbar-user-name { display: none; }
  .shell-content { padding: var(--ct-space-4); }
}

@media (max-width: 480px) {
  .shell { padding: 6px; }
  .shell-content { padding: var(--ct-space-3); border-radius: var(--ct-radius-md); }
  .crumbs .crumb:not(.is-current),
  .crumbs .crumb-sep { display: none; }   /* keep only the page name */
}

/* Visible focus for keyboard users, on every interactive element. */
.shell :focus-visible,
.cmd-scrim :focus-visible {
  outline: 2px solid var(--ct-brand);
  outline-offset: 2px;
}