/* Shell (TASK-2026-163 slice S4): the page header (design C, the stepped path), the fold button at its start, and the account button at the
   foot of the side menu with its panel. Every value is a token from tokens.css; nothing here is copied from the mockups' own sheets.
   Loaded after app.css, so these rules win the older shell rules by order and by one more class, never by !important.

   Rules this file keeps:
   - A control that is toggled with the hidden attribute and has its own display gets a [hidden] companion in the same edit.
   - Logical sides for position; physical sides only for the drawn shapes (the step arrows and the slider fill), with a mirrored set in RTL.
   - Control heights are px tokens, so the person's text size never moves them. */

/* The header's height is the one token; on a phone it is two lines (the tools line, then the path line). */
:root { --header-height: var(--header); }
@media (max-width: 600px) {
  :root { --header-height: 93px; }
}

/* ── the page header ──────────────────────────────────────────────────────────────────────────────────────── */

.top-header.shell-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--header);
  padding: 0 var(--space-4);
  background: var(--surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--line);
  overflow: visible;
}

.shell-fold-btn,
.shell-tool,
.shell-drawer-close {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--control);
  height: var(--control);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  transition: background var(--duration-quick) var(--ease-standard), color var(--duration-quick) var(--ease-standard);
}
.shell-fold-btn:hover,
.shell-tool:hover,
.shell-drawer-close:hover {
  background: var(--tint);
  color: var(--brand);
}
.shell-tool[hidden] { display: none; }
.shell-drawer-close { display: none; }

.shell-fold-ic {
  width: var(--icon);
  height: var(--icon);
  stroke-width: var(--icon-stroke);
}
/* The panel icons point toward the side menu, which stands at the inline start: a drawn, directional shape, so it mirrors in Arabic. */
html[dir="rtl"] .shell-fold-ic { transform: scaleX(-1); }
.shell-fold-btn[aria-expanded="true"] .shell-fold-ic-open,
.shell-fold-btn[aria-expanded="false"] .shell-fold-ic-close { display: none; }

.shell-header-sep {
  flex: none;
  width: 1px;
  height: 24px;
  background: var(--line);
}

/* the path */
.shell-path {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  padding-block: var(--space-1);
}
.shell-path-list {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
.shell-path-list > li {
  display: flex;
  align-items: center;
  flex: none;
  min-width: 0;
}
.shell-path-list > li.shrink { flex: 0 1 auto; }
/* each block overlaps the one before it by 6px, so the arrow of one sits inside the notch of the next */
.shell-path-list > li + li { margin-inline-start: -6px; }
.shell-path.measuring .shell-path-list > li { flex: none; }
.shell-path.measuring .sg { max-width: none; }

.shell-path .lbl {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.7;
}
.shell-path .sg {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 220px;
  height: var(--control-sm);
  padding: 0;
  padding-inline: 20px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-quick) var(--ease-standard);
}
.shell-path .sg i[class*="fa-"] { --ic-size: var(--icon-sm); flex: none; }
.shell-path .sg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sunken);
  transition: background var(--duration-quick) var(--ease-standard);
  /* the arrow, 12px deep: a drawn shape, so physical coordinates, one set for each direction */
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
}
.shell-path-list > li:first-child .sg { padding-inline-start: 12px; }
.shell-path-list > li:first-child .sg::before { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
.shell-path-list > li:last-child .sg { padding-inline-end: 14px; }
.shell-path-list > li:last-child .sg::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%); }
.shell-path-list > li:only-child .sg::before { clip-path: none; }
html[dir="rtl"] .shell-path .sg::before { clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 12px 100%, 0 50%); }
html[dir="rtl"] .shell-path-list > li:first-child .sg::before { clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); }
html[dir="rtl"] .shell-path-list > li:last-child .sg::before { clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%); }
html[dir="rtl"] .shell-path-list > li:only-child .sg::before { clip-path: none; }
.shell-path .sg:hover { color: var(--brand); }
.shell-path .sg:hover::before { background: var(--tint); }
.shell-path .sg[aria-expanded="true"] { color: var(--brand); }
.shell-path .sg[aria-expanded="true"]::before { background: var(--tint-strong); }
.shell-path .sg.now {
  color: var(--brand);
  font-weight: 700;
  cursor: default;
}
.shell-path .sg.now::before { background: var(--tint-strong); }
span.sg:not(.now) { cursor: default; }

/* the two menus the path opens (the folded steps, the pages of a section): they hang from the header, not from the clipped path line */
.shell-menu {
  position: absolute;
  top: calc(100% + 6px);
  z-index: 5;
  min-width: 240px;
  max-width: 320px;
  padding: var(--space-1);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  color: var(--text);
  font-weight: 400;
  white-space: normal;
  animation: shell-rise var(--duration-base) var(--ease-standard);
}
.shell-menu-head {
  padding: 6px 10px 4px;
  font-size: .857rem;
  color: var(--muted);
}
.shell-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 10px;
  padding-inline-start: calc(10px + var(--lv, 0) * 14px);
  border-radius: var(--radius);
  color: var(--text);
  line-height: 1.5;
  text-decoration: none;
}
a.shell-menu-item:hover { background: var(--tint); color: var(--brand); }
.shell-menu-item.now { color: var(--brand); font-weight: 700; }
@keyframes shell-rise {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* the tools: one joined group; a hidden member leaves no doubled edge */
.shell-group {
  display: flex;
  align-items: stretch;
  flex: none;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
}
/* the general-sibling combinator, not the adjacent one: a hidden help button between the bell and the language button must not cost the language button its joint */
.shell-group > :not([hidden]) ~ :not([hidden]) { border-inline-start: 1px solid var(--line-strong); }
.shell-group > :first-child { border-start-start-radius: 1px; border-end-start-radius: 1px; }
.shell-group > :last-child { border-start-end-radius: 1px; border-end-end-radius: 1px; }
.shell-group .shell-tool {
  width: 38px;
  height: 34px;
  border-radius: 0;
}
.shell-group .shell-tool i[class*="fa-"] { --ic-size: var(--icon); }
.shell-group .shell-tool-wide {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  padding: 0 10px;
}
.shell-group .shell-tool-wide[hidden] { display: none; }
.shell-tool-text { font-size: .929rem; white-space: nowrap; }
.shell-bell {
  position: relative;
  display: flex;
  align-self: stretch;
}
.shell-dot {
  position: absolute;
  top: 6px;
  inset-inline-end: 9px;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--fill);
  outline: 2px solid var(--surface);
}

/* the shift status: neutral while closed (with a lock), green while open (with a square) */
.shell-shift {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  background: var(--neutral-status-tint);
  color: var(--neutral-status);
  font-size: .929rem;
  white-space: nowrap;
}
.shell-shift i[class*="fa-"] { --ic-size: var(--icon-sm); flex: none; }
.shell-shift-sq {
  display: none;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--success-solid);
}
.shell-shift.is-open { background: var(--success-tint); color: var(--success); }
.shell-shift.is-open .shell-shift-sq { display: block; }
.shell-shift.is-open .shell-shift-lock { display: none; }

/* ── a phone: line 1 is the menu button and the tools, line 2 is the path on its own ─────────────────────── */
@media (max-width: 600px) {
  .top-header.shell-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: 48px 44px;
    gap: 0 var(--space-1);
    height: var(--header-height);
    padding: 0 var(--space-2);
  }
  .shell-header-sep { display: none; }
  .shell-fold-btn { grid-column: 1; grid-row: 1; }
  .shell-group { grid-column: 3; grid-row: 1; }
  .shell-path {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 var(--space-3);
    border-top: 1px solid var(--line);
  }
  .shell-path-list { width: 100%; }
  .shell-group .shell-tool-wide { width: 38px; padding: 0; justify-content: center; }
  .shell-tool-text { display: none; }
}

/* ── the side menu: the phone drawer's own close button, and the old branch bar that moved into the account panel ── */
.sidebar .sidebar-header { height: var(--header); }
@media (max-width: 768px) {
  .shell-drawer-close { display: inline-grid; }
}
.sidebar .br-bar { display: none; }
.main-wrapper > .br-phone-chip { display: none; }
@media (max-width: 768px) {
  .main-wrapper > .br-phone-chip + .main-content { margin-top: var(--header-height); }
}

/* ── the foot of the side menu: ONE account button, the name only ───────────────────────────────────────── */
.sidebar .sidebar-footer.shell-foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--side);
  border-top: 1px solid var(--line);
}
.sidebar.collapsed .sidebar-footer.shell-foot {
  align-items: center;
  padding: var(--space-3) var(--space-2);
}
.shell-account {
  position: relative;
  min-width: 0;
}
.shell-account-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--row);
  padding: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background var(--duration-quick) var(--ease-standard);
}
.shell-account-btn:hover { background: var(--tint); }
.shell-account-btn[aria-expanded="true"] {
  background: var(--tint);
  border-color: var(--line-strong);
}
.shell-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--control-sm);
  height: var(--control-sm);
  border-radius: var(--radius);
  background: var(--tint-strong);
  color: var(--brand);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}
.shell-account-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow-wrap: anywhere;
  font-weight: 700;
  line-height: 1.6;
}
.shell-account-chev {
  flex: none;
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--muted);
  stroke-width: var(--icon-stroke);
}
.sidebar.collapsed .shell-account-btn {
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
}
.sidebar.collapsed .shell-account-name,
.sidebar.collapsed .shell-account-chev { display: none; }
/* the older account menu (welcome.js) still anchors to this invisible button when "My account" is pressed */
.shell-account > .user-info-footer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── the account panel (drawn into the page body, fixed beside the button) ──────────────────────────────── */
.shell-panel {
  position: fixed;
  z-index: 1300;
  width: 288px;
  max-width: calc(calc(100 * var(--vw)) - 16px);
  padding: 6px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  color: var(--text);
  font-weight: 400;
  line-height: 1.6;
  text-align: start;
}
.shell-panel.anim { animation: shell-rise var(--duration-base) var(--ease-standard); }
.shell-panel-id {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-1);
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--line);
}
.shell-panel-who {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  text-align: start;
}
.shell-panel-name {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow-wrap: anywhere;
  font-weight: 700;
}
.shell-panel-sub,
.shell-panel-store {
  color: var(--muted);
  font-size: .857rem;
  overflow-wrap: anywhere;
}
/* every row is one button the full width of the panel: one hover, one focus line */
.shell-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--control);
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--text);
  font: inherit;
  line-height: 1.6;
  text-align: start;
  cursor: pointer;
  transition: background var(--duration-quick) var(--ease-standard), color var(--duration-quick) var(--ease-standard);
}
.shell-row:hover { background: var(--tint); color: var(--brand); }
.shell-row i[class*="fa-"] { --ic-size: var(--icon-sm); flex: none; color: var(--muted); }
.shell-row-ic { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--muted); stroke-width: var(--icon-stroke); }
.shell-row:hover i[class*="fa-"],
.shell-row:hover .shell-row-ic,
.shell-row:hover .shell-row-v { color: var(--brand); }
.shell-row-k { flex: none; }
.shell-row-grow { flex: 1 1 auto; min-width: 0; }
.shell-row-v {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  text-align: end;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shell-row[aria-checked="true"] { color: var(--brand); font-weight: 700; }
.shell-row[aria-checked="true"] i[class*="fa-"] { color: var(--brand); }
.shell-row.back { margin-bottom: 2px; }
.shell-panel-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  color: var(--muted);
  font-size: .857rem;
}
.shell-sep {
  height: 1px;
  margin: 6px 4px;
  background: var(--line);
}

/* the text size: a slider that snaps to 10, 12, 14, 16, 18, 20 */
.shell-size { padding: 4px 10px 10px; }
.shell-size-out {
  display: block;
  color: var(--brand);
  font-size: 1.714rem;
  font-weight: 700;
  line-height: 1.4;
}
.shell-size-default {
  margin-top: 4px;
  color: var(--muted);
  font-size: .857rem;
  line-height: 1.6;
}
/* The slider (look pass, item 3): a 24px knob on a 6px track, six marked stops under it, each a numbered button. The hand cursor
   covers the whole control (track, knob, marks and numbers), never the text cursor: the numbers cannot be selected. A stop's centre
   is where the knob's centre stands, 12px (half the knob) in from each end. */
.shell-size { --knob: 24px; --track: 6px; user-select: none; -webkit-user-select: none; }
.shell-size-out { cursor: default; }
input.shell-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 32px;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  transition: none;
  cursor: pointer;
}
input.shell-range:hover { background: transparent; }
input.shell-range:focus-visible { outline: none; }
input.shell-range::-webkit-slider-runnable-track {
  height: var(--track);
  border-radius: var(--radius);
  background: linear-gradient(to right, var(--fill) var(--p, 40%), var(--line-strong) var(--p, 40%));
  cursor: pointer;
}
html[dir="rtl"] input.shell-range::-webkit-slider-runnable-track {
  background: linear-gradient(to left, var(--fill) var(--p, 40%), var(--line-strong) var(--p, 40%));
}
input.shell-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--knob);
  height: var(--knob);
  margin-top: calc((var(--track) - var(--knob)) / 2);
  border: 1px solid var(--fill);
  border-radius: var(--radius);
  background: var(--fill);
  box-shadow: none;
  transition: none;
  cursor: pointer;
}
input.shell-range::-webkit-slider-thumb:hover { transform: none; box-shadow: none; }
input.shell-range:focus-visible::-webkit-slider-thumb { border-color: var(--focus-on-fill); }
input.shell-range::-moz-range-track {
  height: var(--track);
  border-radius: var(--radius);
  background: var(--line-strong);
  border: 0;
  cursor: pointer;
}
input.shell-range::-moz-range-progress {
  height: var(--track);
  border-radius: var(--radius);
  background: var(--fill);
  cursor: pointer;
}
input.shell-range::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--knob);
  height: var(--knob);
  border: 1px solid var(--fill);
  border-radius: var(--radius);
  background: var(--fill);
  box-shadow: none;
  transition: none;
  cursor: pointer;
}
input.shell-range::-moz-range-thumb:hover { transform: none; box-shadow: none; }
input.shell-range:focus-visible::-moz-range-thumb { border-color: var(--focus-on-fill); }
.shell-ticks {
  position: relative;
  cursor: pointer;
  height: 36px;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 24px;
}
/* A stop: a short mark on the track's line, the number under it. The current one has a taller brand mark and a filled number. */
.shell-stop {
  position: absolute;
  top: 0;
  inset-inline-start: calc(var(--knob) / 2 + (100% - var(--knob)) * var(--i, 0) / 5);
  transform: translateX(-50%);
  min-inline-size: 32px;
  height: 36px;
  padding: 12px 0 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
}
html[dir="rtl"] .shell-stop { transform: translateX(50%); }
.shell-stop::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 50%;
  width: 2px;
  height: 8px;
  margin-inline-start: -1px;
  background: var(--line-strong);
}
.shell-stop:hover { color: var(--text); }
.shell-stop.on { color: var(--brand); font-weight: 700; background: linear-gradient(var(--tint-strong), var(--tint-strong)) bottom / 100% 24px no-repeat; }
.shell-stop.on::before { height: 10px; background: var(--brand); }

@media (prefers-reduced-motion: reduce) {
  .shell-panel.anim,
  .shell-menu { animation: none; }
  .shell-path .sg,
  .shell-path .sg::before,
  .shell-fold-btn,
  .shell-tool,
  .shell-row,
  .shell-account-btn { transition: none; }
}