/* Core One — the app list down the left side (public/sidenav.js), each app under its
   category. Midnight like the top bar, so the two read as one frame around the work.
   Written in logical properties (inline-start/end), so Arabic mirrors it without rtl.css. */

.c1-frame { display: flex; align-items: flex-start; }
.c1-frame > #main { flex: 1 1 0; min-inline-size: 0; }

.c1-side {
  --sn-top: 54px;
  position: sticky; inset-block-start: var(--sn-top); z-index: 40; flex: none;
  inline-size: 244px; block-size: calc(100vh - var(--sn-top)); block-size: calc(100dvh - var(--sn-top));
  display: flex; flex-direction: column; color: #fff;
  background:
    radial-gradient(320px 260px at 0% 100%, rgba(60, 217, 93, .08), transparent 70%),
    linear-gradient(180deg, #0d0032 0%, #101552 55%, #13206e 100%);
  border-inline-end: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 12px 0 30px -26px rgba(13, 0, 50, .9);
  transition: inline-size .2s var(--ease, ease);
}
.c1-side :focus-visible { outline: 2px solid var(--signal, #3cd95d); outline-offset: 1px; }

.sn-top { display: grid; gap: 8px; padding: 12px 10px 6px; }
.sn-find {
  display: flex; align-items: center; gap: 8px; block-size: 34px; padding-inline: 11px;
  border-radius: 999px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); cursor: text;
}
.sn-find:focus-within { box-shadow: inset 0 0 0 1px rgba(60, 217, 93, .7); background: rgba(255, 255, 255, .11); }
.sn-find input { flex: 1; min-inline-size: 0; border: 0; outline: 0; background: none; color: #fff; font-size: 13px; }
.sn-find input::placeholder { color: rgba(255, 255, 255, .5); }
.sn-find input::-webkit-search-cancel-button { filter: invert(1); opacity: .6; }
.sn-svg { inline-size: 16px; block-size: 16px; flex: none; }

.sn-scroll {
  flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 2px 10px 10px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.sn-group + .sn-group { margin-block-start: 4px; }
.sn-head {
  inline-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 0; background: none; padding: 12px 8px 6px; border-radius: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5); transition: color .15s var(--ease, ease);
}
.sn-head:hover { color: rgba(255, 255, 255, .85); }
:root[dir="rtl"] .sn-head { letter-spacing: 0; font-size: 12px; }   /* spacing breaks Arabic joins */
.sn-caret { inline-size: 14px; block-size: 14px; flex: none; transition: transform .2s var(--ease, ease); }
.sn-group.shut .sn-caret { transform: rotate(-90deg); }
:root[dir="rtl"] .sn-group.shut .sn-caret { transform: rotate(90deg); }
.sn-group.shut .sn-list { display: none; }
.c1-side.finding .sn-group.shut .sn-list { display: block; }   /* a search looks inside folded ones */

.sn-app {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 5px 8px; border-radius: 10px; margin-block: 1px;
  color: rgba(255, 255, 255, .84); font-size: 13.5px; font-weight: 500; text-decoration: none;
  transition: background .15s var(--ease, ease), color .15s var(--ease, ease);
}
.sn-app:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sn-app.on { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; }
/* the open app is marked in green, the way the top bar marks the open menu */
.sn-app.on::before {
  content: ""; position: absolute; inset-inline-start: -10px; inset-block: 8px; inline-size: 3px;
  border-start-end-radius: 3px; border-end-end-radius: 3px; background: var(--signal, #3cd95d);
}
.sn-ico {
  inline-size: 28px; block-size: 28px; border-radius: 8px; flex: none;
  display: grid; place-items: center; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 4px 10px -6px rgba(0, 0, 0, .6);
}
.sn-ico .ico { inline-size: 16px; block-size: 16px; }
.sn-ico-home { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.sn-label { flex: 1; min-inline-size: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-badge {
  min-inline-size: 20px; block-size: 20px; padding-inline: 6px; border-radius: 999px; flex: none;
  display: grid; place-items: center; line-height: 1;
  background: #d6342c; color: #fff; font-size: 11px; font-weight: 700;
}

.sn-rail {
  display: flex; align-items: center; gap: 11px; margin: 4px 10px 12px; padding: 7px 8px;
  border: 0; border-radius: 10px; background: none; color: rgba(255, 255, 255, .6);
  font-size: 13px; font-weight: 500; text-align: start;
  border-block-start: 1px solid rgba(255, 255, 255, .08);
}
.sn-rail:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sn-rail .sn-svg { inline-size: 28px; block-size: 18px; transition: transform .2s var(--ease, ease); }
:root[dir="rtl"] .sn-rail .sn-svg { transform: scaleX(-1); }

/* ---------- folded to a rail of icons ---------- */
.c1-side.rail { inline-size: 68px; }
.c1-side.rail .sn-label, .c1-side.rail .sn-find, .c1-side.rail .sn-caret { display: none; }
.c1-side.rail .sn-head {
  pointer-events: none; block-size: 1px; padding: 0; margin: 9px 8px;
  background: rgba(255, 255, 255, .12); border-radius: 0;
}
.c1-side.rail .sn-head span { display: none; }
.c1-side.rail .sn-group.shut .sn-list { display: block; }
.c1-side.rail .sn-app, .c1-side.rail .sn-rail { justify-content: center; padding-inline: 0; gap: 0; }
.c1-side.rail .sn-badge {
  position: absolute; inset-block-start: -1px; inset-inline-end: 3px;
  min-inline-size: 16px; block-size: 16px; padding-inline: 4px; font-size: 10px;
  box-shadow: 0 0 0 2px #101552;
}
.c1-side.rail .sn-rail .sn-svg { transform: rotate(180deg); }
:root[dir="rtl"] .c1-side.rail .sn-rail .sn-svg { transform: none; }

/* a phone has its ☰ drawer and tab bar instead; paper has no use for either */
@media (max-width: 760px) { .c1-side { display: none; } }
@media print { .c1-side { display: none; } }
@media (prefers-reduced-motion: reduce) { .c1-side, .sn-caret, .sn-rail .sn-svg { transition: none; } }