/* shell.css: the signed-in frame (SPEC §6.1, 03 §3).
   XL ≥1280: labelled sidebar 248px · L 1024–1279: sidebar 216px · M 700–1023: 96px rail
   S <700: the kit's bottom tab bar. The shell never scrolls; .ts-main is the only scroller. */

.ts-root { min-height: 100dvh; }

.ts-app {
  display: grid;
  height: 100dvh;
  grid-template-columns: var(--ts-nav-w) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "mast mast" "nav main";
  background: var(--paper);
}
.ts-app > .ts-masthead, .ts-app > .ts-public-bar { grid-area: mast; }
.ts-app > .ts-nav { grid-area: nav; }
.ts-app > .ts-main { grid-area: main; }
.ts-app[data-layout="focus"], .ts-app[data-focus="true"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "mast" "main";
}
.ts-app[data-layout="public"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "mast" "main";
}
.ts-app[data-layout="bare"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "main";
}

/* ---- Skip link ---- */
.ts-skip {
  position: fixed;
  top: -120px;
  inset-inline-start: 16px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--surface);
  color: var(--gold-deep);
  border: 2px solid var(--gold-deep);
  border-radius: var(--radius-button);
  font-weight: 700;
  text-decoration: none;
}
.ts-skip:focus { top: 12px; }

/* ---- Masthead ---- */
.ts-masthead {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--ts-masthead-h);
  padding: 6px var(--ts-pad);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.ts-masthead__brand { display: flex; align-items: center; flex: none; }
.ts-lockup--compact { display: none; min-width: var(--target-min); justify-content: center; }
.ts-masthead__divider { flex: none; width: 1px; height: 28px; background: var(--line); }
.ts-masthead__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.375rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--ink);
}
.ts-masthead__end { display: flex; align-items: center; gap: 6px; flex: none; margin-inline-start: auto; }
.ts-masthead__lang { min-height: var(--target-min); padding: 6px 12px; font-size: var(--type-button-size); }
.ts-masthead__lang:hover { background: var(--gold-tint); }
.ts-masthead__theme { width: var(--target-min); height: var(--target-min); }
.ts-masthead__theme[aria-pressed="true"] { background: var(--gold-tint); }

.ts-avatar-btn {
  display: grid;
  place-items: center;
  width: var(--target-min);
  height: var(--target-min);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--gold-deep);
}
.ts-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gold-tint);
  color: var(--gold-deep);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.ts-avatar-btn:hover .ts-avatar, .ts-avatar-btn[aria-expanded="true"] .ts-avatar { box-shadow: 0 0 0 2px var(--gold); }
.ts-avatar--lg { width: 56px; height: 56px; font-size: 1.125rem; }

/* ---- Public pages (sign-in, setup): a language switch at the reading end, nothing else ---- */
.ts-public-bar { display: flex; justify-content: flex-end; padding: 16px var(--ts-pad) 0; }
.ts-app[data-layout="public"] .ts-view {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding-block: var(--ts-pad);
}

/* ---- Navigation: labelled sidebar (XL/L) ---- */
.ts-nav {
  min-height: 0;
  overflow-y: auto;
  padding: 16px 12px;
  background: var(--surface);
  border-inline-end: 1px solid var(--line);
}
.ts-nav__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ts-nav__item--admin { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.ts-nav__item--more { display: none; }
.ts-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--target-min);
  padding: 10px 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--type-row-label-size);
  line-height: 1.4;
  text-align: start;
  text-decoration: none;
}
.ts-nav__link:hover { background: var(--paper); color: var(--ink); }
.ts-nav__link[aria-current="page"] { background: var(--gold-tint); color: var(--gold-deep); font-weight: 700; }
.ts-nav__label { min-width: 0; }
.ts-nav__more { --nav-color: var(--cpd-slate); }

/* ---- M: 96px rail, icon above a 14px label; language and theme move into the account menu ---- */
@media (min-width: 700px) and (max-width: 1023px) {
  :root { --ts-nav-w: var(--ts-rail-w); }
  .ts-nav { padding: 12px 8px; }
  .ts-nav__link {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 68px;
    padding: 8px 4px;
    font-size: var(--type-nav-label-size);
    text-align: center;
  }
  .ts-masthead__lang, .ts-masthead__theme { display: none; }
}

/* ---- S: the kit's bottom tab bar (الرئيسية، البرقيات، التقارير، الأدوات، المزيد) ---- */
@media (max-width: 699px) {
  .ts-app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "mast" "main" "nav";
  }
  .ts-app[data-layout="focus"], .ts-app[data-focus="true"], .ts-app[data-layout="public"] {
    grid-template-rows: auto minmax(0, 1fr);
  }
  .ts-masthead { gap: 10px; }
  .ts-masthead__divider, .ts-lockup--wide, .ts-masthead__lang, .ts-masthead__theme { display: none; }
  .ts-lockup--compact { display: inline-flex; }
  .ts-masthead__title { font-size: 1.125rem; }

  .ts-nav {
    overflow: visible;
    min-height: var(--ts-tabbar-h);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    border-inline-end: 0;
    border-top: 1px solid var(--line);
  }
  .ts-nav__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
  .ts-nav__item { display: none; }
  .ts-nav__item--phone, .ts-nav__item--more { display: block; }
  .ts-nav__item--admin { margin: 0; padding: 0; border: 0; }
  .ts-nav__link {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 6px 2px;
    font-size: var(--type-nav-label-size);
    text-align: center;
  }
  .ts-nav__link:hover { background: transparent; }
  .ts-nav__link[aria-current="page"], .ts-nav__more[aria-current] { background: transparent; color: var(--nav-color); font-weight: 700; }
  .ts-nav__link[aria-current]::before {
    content: "";
    position: absolute;
    top: -6px;
    width: 22px;
    height: 3px;
    border-radius: 3px;
    background: var(--nav-color);
  }
}

/* ---- Main: the only scroller ---- */
.ts-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: none;
}
.ts-hello, .ts-view {
  width: min(100%, calc(var(--ts-content-max) + 2 * var(--ts-pad)));
  margin-inline: auto;
  padding-inline: var(--ts-pad);
}
.ts-hello { padding-top: var(--ts-pad); }
.ts-hello:empty { display: none; }
.ts-view { padding-block: var(--ts-pad) var(--ts-page-bottom); }
.ts-hello:not(:empty) + .ts-view { padding-top: var(--space-section); }
.ts-app[data-layout="focus"] .ts-view, .ts-app[data-focus="true"] .ts-view { padding-bottom: var(--ts-pad); }
.ts-app[data-layout="bare"] .ts-view { width: 100%; height: 100%; padding: 0; }
.ts-app[data-layout="bare"] .ts-page { height: 100%; }

/* Page switches slide 26px and fade over 300ms; reduced motion turns it off (base.css). */
:root { --ts-slide: 26px; }
:root[dir="rtl"] { --ts-slide: -26px; }
.ts-view > .ts-page { animation: ts-page-in .3s ease-out both; }
@keyframes ts-page-in {
  from { opacity: 0; transform: translateX(var(--ts-slide)); }
  to { opacity: 1; transform: none; }
}

/* ---- The suggest pill: bottom end corner; above the tab bar on phones ---- */
.ts-suggest-slot {
  position: fixed;
  z-index: 20;
  bottom: 24px;
  inset-inline-end: var(--ts-pad);
}
.ts-suggest {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--target-min);
  padding: 8px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--type-button-size);
  font-weight: 700;
  line-height: 1.3;
  box-shadow: var(--shadow-float);
}
.ts-suggest:hover { border-color: var(--gold); }
.ts-suggest:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; }
.ts-suggest-bar .cpd-icon { flex: none; }
@media (max-width: 699px) {
  .ts-suggest-slot { bottom: calc(var(--ts-tabbar-h) + env(safe-area-inset-bottom) + 12px); inset-inline-end: 16px; }
  .ts-suggest { padding: 6px 16px; }
}

/* ---- Account menu (identity card) and menu rows ---- */
.ts-account {
  display: grid;
  gap: 16px;
  padding: 18px;
  max-height: calc(100dvh - var(--ts-masthead-h) - 24px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-dialog);
  box-shadow: var(--shadow-float);
}
.ts-account__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.ts-account__who { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.ts-account__name { font-size: var(--type-card-title-size); line-height: 1.5; }
.ts-account__username { font-size: var(--type-caption-size); color: var(--muted); }
.ts-account__group { display: grid; gap: 6px; }
.ts-account__label { font-size: var(--type-field-label-size); font-weight: 700; }
.ts-account__contrast { padding: 0; }
.ts-account__contrast label { display: grid; gap: 2px; font-weight: 700; }
.ts-account__contrast small { font-weight: 400; }
.ts-account__rows { display: grid; padding-top: 4px; border-top: 1px solid var(--line); }
.ts-menu-row { gap: 12px; min-height: 52px; padding-inline: 8px; border-radius: 10px; }
.ts-menu-row .cpd-row__copy strong { font-weight: 700; }
.ts-menu-row[aria-current="page"] { background: var(--gold-tint); color: var(--gold-deep); }
.ts-menu-card { padding: 4px 12px; }
.ts-menu-card + .ts-menu-card { margin-top: var(--space-stack); }