/* YUM-1475: the Work mail folder column, like Outlook (SB request 2026-09-25).
   This was appended to app-extensions.css while YUM-1470 holds a live claim on that file;
   it is its own stylesheet so the two lanes do not write the same file.
   Loaded from index.html directly after app-extensions.css, so the cascade order is unchanged. */

/* ------------------------------------------- YUM-1475: the Work mail folder column, like Outlook
   SB's reference (2026-09-25) is Outlook's own window: a thin rail of area icons on the far
   left, and beside it a wide folder column with New mail at the top, Favourites, one
   collapsible heading per account, and a folder line per folder with its own icon and its
   full name. Before this, all of it was one narrow 190px column: the five area rows, the
   WORK heading, the MAILBOXES heading, an add button in that heading, the folder trees and
   a second Add mailbox stacked on top of each other. This block splits that column in two
   and restyles the folder list. Nothing here changes the message list or the reading pane. */
/* T10a: two zones in the rail's column: the area rail, and the folder column. */
.mail-rail.has-tree { display: flex; flex-direction: row; align-items: stretch; gap: 0; padding: 0; }
.work-app-rail {
  flex: 0 0 52px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  border-right: 1px solid var(--work-rail-line);
  overflow-y: auto;
}
.work-app-rail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--work-rail-mute);
  cursor: pointer;
}
.work-app-rail-btn:hover { background: var(--work-rail-hover); color: var(--work-rail-ink); }
.work-app-rail-btn.is-on { background: var(--accent-soft); color: var(--accent); }
.work-app-rail-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.work-app-rail-btn:disabled { opacity: .45; cursor: not-allowed; }
.work-app-rail-collapse { margin-top: auto; }
/* T10b: the folder column is the rest of the rail's width — 236px of the 288px default,
   beside the 52px area rail — sized and folded by the reader. */
.work-folder-col {
  flex: 1 1 auto;
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 8px 10px;
  overflow-y: auto;
}
/* T10c: the New button keeps its word and its icon on this page. The Files window's own
   mount keeps its compact trigger; the media query below still drops the word on a phone. */
.work-folder-col .new-menu-split.is-compact { width: 100%; margin-bottom: 6px; }
.work-folder-col .new-menu-split.is-compact .new-menu-main { flex: 1 1 auto; justify-content: center; padding: 8px 10px; }
.work-folder-col .new-menu-split.is-compact .new-menu-caret { padding: 8px 8px; }
/* T10a: the uppercase WORK and MAILBOXES labels and the vertical line behind the folders go;
   the folders sit one small indent under their heading instead. */
.mail-nav-folders-tree { padding: 4px 0 6px; border-left: 0; margin: 2px 0 4px; gap: 1px; }
.ds-tree-children { margin-left: 4px; padding-left: 4px; border-left: 0; }
.mail-box-root > .ds-tree, .mail-box-root > div:not(.mail-box-head) { padding-left: 6px; }
/* T10d: Favourites sits above the accounts and folds from its own heading. */
.mail-rail-favourites {
  display: flex; flex-direction: column; gap: 1px;
  padding-bottom: 6px; margin-bottom: 4px;
  border-bottom: 1px solid var(--work-rail-line);
}
.mail-rail-section-head {
  display: flex; align-items: center; gap: 6px; width: 100%;
  min-height: 32px; padding: 6px 8px;
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--work-rail-label);
  font-family: var(--ui); font-size: 12px; font-weight: 600; text-align: left; cursor: pointer;
}
.mail-rail-section-head:hover { background: var(--work-rail-hover); color: var(--work-rail-ink); }
.mail-rail-section-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mail-rail-section-chevron { flex: none; transition: transform 120ms ease; }
.mail-rail-section-head[aria-expanded='false'] .mail-rail-section-chevron { transform: rotate(0deg); }
.mail-rail-section-head[aria-expanded='true'] .mail-rail-section-chevron { transform: rotate(90deg); }
/* T10e/T10j: one heading per account and shared mailbox, 36px rows, nothing three levels deep. */
.mail-box-head { min-height: 36px; border-radius: var(--r-sm); }
/* YUM-1547: this rule loads after app-extensions.css and must not undo the wrap fix there:
   long connector addresses wrap to a readable full address instead of ellipsing to a fragment. */
.mail-box-name { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; overflow: visible; }
.mail-box-head .mail-folder-count { margin-left: auto; }
.mail-box-root + .mail-box-root { margin-top: 4px; }
.ds-tree-row { min-height: 36px; }
.ds-tree-node { min-height: 36px; border-radius: var(--r-sm); }
/* T10h: the selected folder is a soft rounded row — no heavy box, no left bar. Hover is the
   lighter version of the same surface. */
.ds-tree-node.active, .work-source.active, .mail-folder.active {
  background: var(--work-rail-active-bg);
  color: var(--work-rail-ink);
  box-shadow: none;
  font-weight: 600;
}
/* T10g: the unread count is right-aligned in the accent and never squeezes the name. */
.ds-tree-count, .mail-folder-count {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.ds-tree-node.active .ds-tree-count { color: var(--accent); }
/* T10i: one Add mailbox, quiet, at the foot of the list. */
.mail-rail-newfolder.is-add-mailbox { margin-top: 8px; color: var(--work-rail-mute); }
.mail-rail-newfolder.is-add-mailbox:hover { color: var(--work-rail-ink); }
/* T10k: on a phone the folder column is a drawer over the list, opened from the list head. */
.mail-drawer-toggle { display: none; }
.mail-rail-drawer-backdrop { display: none; }
@media (max-width: 760px) {
  .mail-shell { position: relative; }
  .mail-rail.has-tree {
    position: absolute; top: 0; bottom: 0; left: 0; z-index: 30;
    width: min(300px, 86vw); max-height: none;
    background: var(--work-rail-bg);
    border-right: 1px solid var(--work-rail-line);
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, .18));
    transform: translateX(-102%);
    transition: transform .18s ease;
  }
  .mail-rail.has-tree.is-drawer-open { transform: none; }
  .mail-rail-drawer-backdrop {
    display: block; position: absolute; inset: 0; z-index: 20;
    background: color-mix(in srgb, var(--ink) 22%, transparent);
  }
  .mail-drawer-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
  }
}

/* YUM-1478: the desktop rail serves the app rail plus the folder column; the .work-sources
   chip row only serves the phone (mobile-ergonomics.css picks it up inside its 600px
   media), so it is off on desktop. */
.work-sources-viewport-phone { display: none; }
/* The app rail is a desktop element; the phone switches area with the chip row. */
@media (max-width: 600px) {
  .work-app-rail { display: none; }
}

/* P6b (redline 2026-10-01) slim folder rail: when the Work rail is collapsed the folder
   column folds to a 52px icon rail of its own — one icon per favourite and per mailbox
   root, folder names riding the rail's tooltip (data-tip), and one expand control at the
   foot. Same tokens the wider rail uses, so light, dark and the letterpress theme agree. */
.mail-slim-folders {
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
}
.mail-slim-folder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 34px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--work-rail-mute);
  cursor: pointer;
}
.mail-slim-folder:hover { background: var(--work-rail-hover); color: var(--work-rail-ink); }
.mail-slim-folder.is-on { background: var(--accent-soft); color: var(--accent); }
.mail-slim-folder.is-box { border-left: 2px solid var(--accent); }
.mail-slim-folder:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mail-slim-expand { margin-top: auto; }

/* P6a (redline 2026-10-01) round fix: every Work area reads the rail as one thin far-left
   column with the folder column (or its slim form) beside it. The zone carries the whole
   row, so a pane that is not Mail (Calendar, People/Teams, Files, To do) can render the
   same zone without giving the app rail to the folder column's width. */
.work-rail-zone { display: flex; flex-direction: row; align-items: stretch; flex: 1 1 auto; min-width: 0; }
.work-rail-zone > .work-app-rail { flex: 0 0 52px; border-right: 1px solid var(--work-rail-line); overflow-y: auto; overflow-x: hidden; }
.work-rail-zone > .work-folder-col { flex: 1 1 auto; border-right: 0; }

/* A pane whose rail holds other layers too (the Calendar's view switch) keeps those in
   their own column beside the zone, never over the rail's controls. */
.mail-rail:has(> .work-rail-zone) { display: flex; flex-direction: row; align-items: stretch; padding: 0; gap: 0; background: var(--work-rail-bg); border-right: 1px solid var(--work-rail-line); overflow: hidden; }
.mail-rail:has(> .work-rail-zone) > .work-rail-zone { flex: 0 0 52px; min-width: 52px; }
.mail-rail:has(> .work-rail-zone) > :not(.work-rail-zone) { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; border-left: 0; }

/* P6b: the slim folder column folds to its own 52px rail. */
.work-folder-col.is-slim { flex: 1 1 auto; min-width: 52px; padding: 6px 4px; border-right: 1px solid var(--work-rail-line); }
.worok-placeholder-never-matches { display: none; }

/* YUM-1498 (Ben, 2026-10-05): at phone width the 760px drawer above moved the whole rail
   off screen, and with the folder column hidden it held only the source chips, centred in a
   dark panel. On a phone the rail stays in flow as the chip row at the top of Work, and the
   drawer is the folder column alone: Favourites, each mailbox with its folders, Add mailbox. */
@media (max-width: 600px) {
  .mail-rail.has-tree { position: static; width: auto; transform: none; transition: none; box-shadow: none; z-index: auto; }
  .mail-rail.has-tree > .work-folder-col { display: none; }
  .mail-rail.has-tree.is-drawer-open > .work-folder-col {
    display: flex; position: absolute; top: 0; bottom: 0; left: 0; z-index: 30;
    width: min(300px, 86vw); padding: 12px 10px;
    background: var(--work-rail-bg); border-right: 1px solid var(--work-rail-line);
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, .18)); overflow-y: auto;
  }
  /* mobile-ergonomics.css flattens the folder tree into a chip row for the old inline rail;
     in the drawer it is a list again, with 44px rows for a thumb. */
  .work-folder-col .mail-nav-folders-tree { flex-direction: column; overflow: visible; gap: 2px; padding: 0; }
  .work-folder-col .mail-nav-folders-tree .mail-boxes-label,
  .work-folder-col .mail-nav-folders-tree .mail-box-head,
  .work-folder-col .mail-nav-folders-tree .mail-rail-newfolder { display: flex; }
  .work-folder-col .mail-nav-folders-tree .mail-box-root { display: block; }
  .work-folder-col .mail-nav-folders-tree .ds-tree { flex-direction: column; }
  .work-folder-col .mail-nav-folders-tree .ds-tree-row,
  .work-folder-col .mail-nav-folders-tree .mail-box-head { min-height: 44px; }
  /* The folder button shares the search row instead of taking a row of its own. */
  html .mail-list-head.is-mail > .mail-drawer-toggle.icbtn { order: -2; width: 44px; min-width: 44px; height: 44px; }
  html .mail-list-head.is-mail:has(> .mail-drawer-toggle) > .mail-search { flex: 1 1 0; min-width: 0; }
}
/* YUM-1498 follow-up (Ben, 2026-10-06): on Calendar, People, Teams and Files the rail is a
   .work-rail-zone, which the desktop rule above pins to the 52px app-rail width. On a phone
   that zone holds only the chip row, so it takes the full width like Mail's rail does. */
@media (max-width: 600px) {
  .mail-rail:has(> .work-rail-zone) { padding: 8px 10px; }
  .mail-rail:has(> .work-rail-zone) > .work-rail-zone { flex: 1 1 100%; min-width: 0; }
  .work-rail-zone > .work-sources-viewport-phone { flex: 1 1 auto; min-width: 0; }
}

/* Design review 2026-10-07: folder and mailbox names were cut to a few letters ("New …",
   "Convers…"). The open folder column keeps at least 190px; only a genuinely long name
   ellipsizes, and its title attribute carries the full name. */
.mail-rail.has-tree { min-width: 0; }
.work-folder-col:not(.is-slim) { flex: 1 1 0; min-width: 190px; }
.work-folder-col .new-menu-split { min-width: 0; max-width: 100%; }
.work-folder-col .mail-box-root,
.work-folder-col .ds-tree,
.work-folder-col .ds-tree-row { min-width: 0; max-width: 100%; }
.work-folder-col .ds-tree-node { min-width: 0; }