/* ALFRED SHELL, brand pack v3.1 (RULES sections 2, 3, 5, 7, 11). The warm-white menu with its brass edge, the white top bar with the Alfred field, the Alfred dialogue.
   Only v3 values, through the --al-* roles (static/design/alfred.tokens.css). The floating Alfred pill is gone: Alfred lives in the top bar. */

.al-shell { display: grid; grid-template-columns: var(--al-rail-w) minmax(0, 1fr); min-height: 100vh; }   /* minmax(0, 1fr): wide content (a board) scrolls inside its own area, it never widens the page */

/* ── The menu ────────────────────────────────────────────────────────────── */
.al-rail {
  background: var(--al-shell); color: var(--al-rail-text); border-right: 1px solid var(--al-rail-line);
  display: flex; flex-direction: column; padding: 20px 10px 0 0; box-sizing: border-box;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--al-rail-line) transparent;
}
/* the logo is the double ring: a 1.5px navy outer ring, a gap in the menu colour, a 1px brass inner ring, a serif A in navy */
.al-mark-row { display: flex; align-items: center; gap: 12px; padding: 2px 8px 22px 16px; }
.al-mark {
  display: flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box;
  width: 38px; height: 38px;
  font-family: var(--al-font-identity); font-weight: 600; font-size: 20px; line-height: 1; padding-top: 2px;
  color: var(--al-action); border: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--al-action), inset 0 0 0 4px var(--al-shell), inset 0 0 0 5px var(--al-brass); /* ring widths below 2px are shadows: a border would round to 1px */
}
.al-mark-word { font-size: var(--al-fs-card); font-weight: 800; color: var(--al-action); letter-spacing: 0; }
.al-rail-group {
  padding: 18px 16px 6px; font-size: var(--al-fs-rail-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--al-rail-label);
}
.al-rail-item {
  display: flex; align-items: center; gap: 10px; height: var(--al-control-h); margin: 0; padding: 0 10px 0 16px; box-sizing: border-box;
  border-radius: 0 var(--al-r-rail-item) var(--al-r-rail-item) 0; color: var(--al-rail-text);
  font-size: var(--al-fs-ui); font-weight: 500; line-height: var(--al-lh-ui); text-decoration: none;
  transition: background var(--al-t-hover) var(--al-ease), color var(--al-t-hover) var(--al-ease);
}
/* icons, style D: a fine 1.5 line with round ends in slate; only the selected item turns navy and fills with the warm brass tint */
.al-rail-item .al-glyph { width: 20px; height: 20px; flex: none; stroke: var(--al-rail-icon); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 1; }
.al-rail-item:hover { background: var(--al-rail-plate); color: var(--al-rail-text-hi); text-decoration: none; }
.al-rail-item[aria-current="page"] { background: var(--al-rail-plate-hi); color: var(--al-rail-text-hi); font-weight: 700; box-shadow: inset 3px 0 0 var(--al-brass); }
.al-rail-item[aria-current="page"] .al-glyph { stroke: var(--al-action); fill: color-mix(in srgb, var(--al-brass) 22%, var(--al-card)); }
.al-rail-item .al-rail-note { margin-left: auto; font-size: var(--al-fs-rail-label); letter-spacing: .06em; text-transform: uppercase; color: var(--al-rail-label); }
.al-rail-item:focus-visible { outline: none; box-shadow: var(--al-focus); }
.al-rail-foot { margin-top: auto; padding: 18px 16px 22px; border-top: 1px solid var(--al-rail-line); }
/* The firm is its logotype, the calligraphic file, never typed, never recoloured, never brass. */
.al-firm { display: block; }
.al-firm svg, .al-firm img { display: block; width: 176px; height: auto; }
.al-firm .al-firm-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the floating pill is retired (hidden in interaction.css, kept in the DOM so its wiring is one); it still sits under every scrim */
.al-alfred { z-index: var(--al-z-frame); }

/* the floating pill is retired (hidden in interaction.css, kept in the DOM so its wiring is one); it still sits under every scrim */
.al-alfred { z-index: var(--al-z-frame); }

/* While Alfred works the A mark breathes slowly. Nothing else animates (RULES section 7). */
@keyframes al-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
body.al-alfred-working .al-mark { animation: al-breathe var(--al-t-breath) var(--al-ease) infinite; }
@media (prefers-reduced-motion: reduce) { body.al-alfred-working .al-mark { animation: none; } }

/* ── Top bar: a white bar on a 1px line. Where am I (section > matter name), the Alfred field and the microphone, the person. 60px. ── */
.al-topbar {
  height: var(--al-topbar-h); display: flex; align-items: center; gap: 16px; padding: 0 30px;
  background: var(--al-card); border-bottom: 1px solid var(--al-divider);
  position: sticky; top: 0; z-index: var(--al-z-sticky);
}
.al-context { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: var(--v3-fs-read); line-height: var(--al-lh-ui); color: var(--al-text-2); white-space: nowrap; overflow: hidden; }
.al-context > span { overflow: hidden; text-overflow: ellipsis; }
.al-context .is-here { color: var(--al-action); font-weight: 700; }
.al-context .al-context-sep { color: var(--al-text-2); flex: none; }
.al-who { margin-left: auto; display: flex; align-items: center; gap: 12px; cursor: pointer; border-radius: var(--al-r-control); }
.al-who:focus-visible { outline: none; box-shadow: var(--al-focus); }
.al-who .al-avatar { width: var(--v3-avatar-m); height: var(--v3-avatar-m); border-radius: 50%; background: var(--al-action); color: var(--al-text-inverse); display: grid; place-items: center; font-size: var(--al-fs-rail-label); font-weight: 700; overflow: hidden; }
.al-who .al-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-who .al-name { font-size: var(--al-fs-ui); font-weight: 700; color: var(--al-text); line-height: 1.2; }
.al-who .al-office { font-size: var(--al-fs-rail-label); color: var(--al-text-2); }

/* ── Page area: card padding 24, gap 24; every scroll area ends with 24px of space (RULES section 7) ── */
.al-main { padding: 24px var(--v3-margin-1366) var(--v3-end-space); background: var(--al-page); }
/* RULES section 10: page margins 32 at 1366, 40 at 1440, 56 at 1920; content never wider than 1440, above that it centres (BD-16) */
@media (min-width: 1440px) { .al-main { padding-left: var(--v3-margin-1440); padding-right: var(--v3-margin-1440); } }
@media (min-width: 1920px) { .al-main { padding-left: var(--v3-margin-1920); padding-right: var(--v3-margin-1920); } }
#al-main-content > [id^="view-"] { max-width: var(--v3-content-max); margin-left: auto; margin-right: auto; }   /* the id keeps this above the screens' own #view-x width rules */

/* ── The Alfred dialogue (opens from the field in the top bar) ───────────── */
.al-dialogue-hd .al-alfred-name { font-family: var(--al-font-ui); font-size: var(--al-fs-card); font-weight: 700; color: var(--al-text); }
.al-dialogue-hd { border-bottom: 1px solid var(--al-divider); }
.al-dialogue-ft { border-top: 1px solid var(--al-divider); }
.al-dialogue-ft input {
  height: var(--al-control-h); border: 0; box-shadow: inset 0 0 0 1px var(--al-line-control); border-radius: var(--al-r-control);
  background: var(--al-field); color: var(--al-text); font-size: var(--al-fs-read); padding: 0 12px;
}
.al-dialogue-ft input:hover { box-shadow: inset 0 0 0 1px var(--al-action); }
.al-dialogue-ft input:focus { box-shadow: var(--al-focus); }