/* =========================================================
   suite-nav.css: an app's navigation in sections, as the Service Desk and the CRM have it. The rail holds the sections
   (.nav-sections) with the settings at its foot (.nav-foot); a section's pages are tabs over the page (.section-tabs)
   or, for the settings, a list beside it (.side-layout, .side-nav). In the topbar the command palette's door
   (PaletteButton, .suite-find) and the "New" menu (.suite-new); the palette itself (CommandPalette, .suite-palette), the
   keyboard's overview (ShortcutHelp, .suite-keys) and a page head's "…" (MoreMenu, .suite-more).
   ========================================================= */

/* ---------- The rail: the sections, the settings at its foot ---------- */
html[data-ui="next"] .rail nav:has(> .nav-sections){display:flex;flex-direction:column;}
html[data-ui="next"] .nav-sections{flex:1;display:flex;flex-direction:column;}
html[data-ui="next"] .nav-sections .nav-foot{margin-top:auto;border-top:1px solid var(--line-soft);border-radius:0 0 var(--r-item) var(--r-item);padding-top:10px;}
html[data-ui="next"] .rail.collapsed .nav-sections .nav-foot{padding-top:12px;}

/* ---------- The topbar: the palette's door and the "New" menu ---------- */
html[data-ui="next"] .topbar .suite-find{display:inline-flex;align-items:center;gap:8px;height:32px;min-width:260px;margin-left:10px;padding:0 6px 0 10px;
  border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--field);color:var(--ink-4);font-family:var(--font-body);font-size:13px;cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;}
html[data-ui="next"] .topbar .suite-find:hover{border-color:var(--blue-edge);}
html[data-ui="next"] .topbar .suite-find:focus-visible{outline:none;border-color:var(--blue);box-shadow:var(--focus-ring);}
html[data-ui="next"] .topbar .suite-find svg{width:14px;height:14px;flex-shrink:0;}
html[data-ui="next"] .topbar .suite-find kbd{margin-left:auto;}
html[data-ui="next"] :is(.suite-find, .suite-keys, .pop-item, .suite-palette-keys) kbd{display:inline-block;min-width:18px;padding:1px 5px;border:1px solid var(--line);border-bottom-width:2px;
  border-radius:4px;background:var(--surface);color:var(--ink-3);font-family:var(--font-mono);font-size:11px;line-height:1.4;text-align:center;}
html[data-ui="next"] .suite-new{margin-right:6px;}
html[data-ui="next"] .suite-new .pop{min-width:220px;}
html[data-ui="next"] .suite-more .suite-dots{font-size:18px;line-height:1;letter-spacing:1px;}
html[data-ui="next"] .suite-more .pop{min-width:230px;}
html[data-ui="next"] .pop-item:disabled{opacity:.5;cursor:not-allowed;}

/* ---------- A section's pages as tabs over the page ---------- */
html[data-ui="next"] .section-tabs{padding:14px 22px 0;}
html[data-ui="next"] .section-tabs .tabs{margin-bottom:0;overflow-x:auto;scrollbar-width:none;}
html[data-ui="next"] .section-tabs .tabs a{white-space:nowrap;}

/* ---------- The settings: one area, its pages in a list beside them ---------- */
html[data-ui="next"] .side-layout{display:grid;grid-template-columns:210px minmax(0,1fr);align-items:start;}
html[data-ui="next"] .side-nav{position:sticky;top:calc(var(--topbar-h) + 8px);display:flex;flex-direction:column;gap:1px;padding:20px 0 20px 22px;}
html[data-ui="next"] .side-nav-head{padding:0 10px 6px;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-3);font-weight:500;}
html[data-ui="next"] .side-nav a{padding:7px 10px;border-radius:var(--r-item);color:var(--ink-2);font-size:13.5px;font-weight:500;text-decoration:none;}
html[data-ui="next"] .side-nav a:hover{background:var(--hover);color:var(--ink);}
html[data-ui="next"] .side-nav a.on{background:var(--tint);color:var(--blue);font-weight:700;}
html[data-ui="next"] .side-page{min-width:0;}

/* ---------- The command palette and the keyboard's overview ---------- */
html[data-ui="next"] .suite-palette .dlg-body{padding-top:10px;}
html[data-ui="next"] .suite-palette .suite-palette-field{max-width:none;width:100%;height:40px;}
html[data-ui="next"] .suite-palette .suite-palette-field input{font-size:15px;}
html[data-ui="next"] .suite-palette-list{max-height:min(420px, 58vh);overflow-y:auto;margin-top:8px;}
html[data-ui="next"] .suite-palette-list .pop-item{text-decoration:none;}
html[data-ui="next"] .suite-palette-keys{margin:10px 0 0;}
html[data-ui="next"] .suite-keys dt{white-space:nowrap;}

@media (max-width:1180px){
  html[data-ui="next"] .topbar .suite-find{min-width:190px;}
  html[data-ui="next"] .topbar .suite-find kbd{display:none;}
}
@media (max-width:900px){
  html[data-ui="next"] .topbar .suite-find{min-width:0;margin-left:2px;padding:0 9px;}
  html[data-ui="next"] .topbar .suite-find-text{display:none;}
  html[data-ui="next"] .side-layout{display:block;}
  html[data-ui="next"] .side-nav{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:4px;padding:12px 14px 10px;border-bottom:1px solid var(--line);}
  html[data-ui="next"] .side-nav-head{display:none;}
  html[data-ui="next"] .side-nav a{white-space:nowrap;}
  html[data-ui="next"] .section-tabs{padding:10px 14px 0;}
}
@media (max-width:640px){
  html[data-ui="next"] .suite-new-text{display:none;}
  /* A page head's actions (the view, "…", the primary action) wrap under the title instead of widening the page. */
  html[data-ui="next"] .page-head > div + div{flex-wrap:wrap;max-width:100%;}
}