/* alexlew.live UX layer (2 Nov 2026). Loaded after styles.css. Platinum look kept; layout, type, a11y only.
   Spacing scale: 8 / 16 / 24 / 32px. */

/* ---------- Readability ---------- */
html, body { font-size: 16px; line-height: 1.5; }
.main, .main td, .rail-b, .snav, .search-well, .find-results {
  font-family: Helvetica, Arial, "Liberation Sans", "Nimbus Sans", system-ui, sans-serif;
}
.main .lede, .main .tiny, .main p, .main li, .main .cap-b, .main .topic-list,
.main font[size="1"], .main font[size="2"], .main td { font-size: 16px; line-height: 1.5; }
.main p, .main li, .main .quote, .main .finder-blurb { max-width: 72ch; }
.main .lede2, .main .lede3 { margin-top: 8px; }
.main .topic-list { margin: 8px 0 8px 24px; }
.main .topic-list li { margin-bottom: 8px; }
.main .finder-list, .main .finder-list td { font-size: 15px; }
.main .finder-blurb { font-size: 14px; color: #333; }
.main .finder-title, .main .finder-foot { font-size: 13px; }
.main .cap-b th, .main .cap-b td td { font-size: 14px; padding: 4px 8px; }
.main .backtop { font-size: 13px; }
.main .sample-label { font-size: 14px; }
.main .quote { font-size: 18px !important; }

/* Heading scale */
.hello { font-size: 48px; }
.page-title { font-size: 28px; line-height: 1.2; margin: 0 0 16px 0; }
.page-title.positioning { font-size: 24px; line-height: 1.25; }
.cap-h { font-size: 20px !important; line-height: 1.3; padding: 8px 16px !important; }
.page-kicker, .section-label, .now-label, .nav-label, .search-label { font-size: 12px; letter-spacing: 1px; }
.section-label { color: #5c0000; margin-bottom: 8px; }
.tagline-strip { font-size: 12px; padding: 4px 8px; margin: 0 0 16px 0; }

/* Panels: 8px scale */
.main > table > tbody > tr > td { padding: 12px; }
.main .panel.raised > tbody > tr > td:not(.cap-h):not(.cap-b) { padding: 24px; }
.main .cap-b { padding: 16px 24px !important; }
.main .panel.inset > tbody > tr > td { padding: 16px 24px; }

/* Right rail + sidebar text */
td.sidebar, td.rail { width: 200px; }
.rail-b, .rail-b font[size="1"] { font-size: 15px; line-height: 1.5; }
.rail-h { font-size: 13px; padding: 4px 8px !important; background: linear-gradient(to bottom, #555588 0%, #3a3a6e 100%); }
.hot-tip, .hot-tip font[size="1"], .now-playing, .now-playing font[size="1"] { font-size: 14px; line-height: 1.45; }
.badge-box font[size="1"], .status-text font[size="1"], .footer font[size="1"] { font-size: 13px; }
.under-desk font[size="1"] { font-size: 13px; color: #111; }
.logo-caption { font-size: 15px; }
.logo-sub, .logo-sub2 { font-size: 12px; color: #333; }

/* ---------- Identity mark ---------- */
.al-mark { display: block; margin: 0 auto; filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.25)); }
.menu-al { font-family: Chicago, Charcoal, Geneva, Helvetica, sans-serif; font-weight: bold; font-size: 11px;
  padding: 0 4px; background: #eee; border: 1px solid #555; }

/* ---------- Decorative menu bar: not interactive ---------- */
.menubar { pointer-events: none; user-select: none; -webkit-user-select: none; cursor: default; overflow: hidden; }

/* ---------- Grouped navigation ---------- */
.snav-wrap { padding: 8px 4px !important; }
.snav ul { list-style: none; margin: 0; padding: 0; }
.snav .nav-label { border-bottom: 1px solid #888; padding: 0 4px 4px; margin-bottom: 4px; }
.snav-item { margin: 0; padding: 0; }
.snav-item > a, .snav-subitem > a {
  display: flex; align-items: center; min-height: 32px; padding: 2px 8px; font-size: 15px; line-height: 1.3;
}
.snav-item > .orb { float: left; margin: 10px 0 0 6px; }
.snav-item > a { padding-left: 24px; font-weight: bold; }
.snav-sub { margin: 0 0 4px 0 !important; border-left: 2px solid #8a8a8a; margin-left: 12px !important; }
.snav-subitem > a { font-size: 14px; min-height: 30px; padding-left: 12px; }
.snav-deep > a { padding-left: 28px; }
.snav-deep > a::before { content: "\21B3\00a0"; color: #333; text-decoration: none; display: inline-block; }
.snav-on > a { color: #000080; }
.snav-on > .snav-sub { border-left-color: #000080; }
.snav-cur > a, .snav-cur > a:visited {
  color: #000 !important; text-decoration: none; background: #a8a8a8;
  border-top: 1px solid #555; border-left: 1px solid #555; border-right: 1px solid #fff; border-bottom: 1px solid #fff;
}

/* Section links under the page intro, and the three "next" links */
.sec-links nav ul, .next-up nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.sec-links nav li, .next-up nav li { margin: 0; max-width: none !important; }
.sec-links nav a, .next-up nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
.sec-links a[aria-current="page"] { color: #000; font-weight: bold; text-decoration: none;
  padding: 0 8px; background: #d4d4d4; border-top: 1px solid #555; border-left: 1px solid #555; border-right: 1px solid #fff; border-bottom: 1px solid #fff; }
.sec-links { background: #c8ccd4 !important; }
.next-up { background: #c8d0d8 !important; }
.cap-h .cap-link, .cap-h .cap-link:visited { color: #ffffff; text-decoration: underline; }
.cap-h .cap-link:hover { color: #ffff99; }

/* ---------- Find ---------- */
.search-well { padding: 8px !important; }
.find-row { display: flex; gap: 4px; }
.search-field { width: auto !important; flex: 1 1 auto; min-width: 0; font-size: 15px !important; min-height: 44px; box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif !important; }
.btn-go { font-size: 14px !important; min-height: 44px; min-width: 44px; padding: 0 8px !important; color: #000; }
.find-results { font-size: 14px; }
.find-results:empty { display: none; }
.find-results .find-count { margin: 8px 0 4px; font-weight: bold; }
.find-results ul { list-style: none; margin: 0; padding: 0; }
.find-results li { margin: 0 0 8px 0; padding: 4px; background: #eee; border: 1px solid #888; }
.find-results li a { display: block; font-weight: bold; }
.find-snip { display: block; color: #222; font-size: 13px; line-height: 1.4; }

/* ---------- Buttons and focus ---------- */
.btn-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; font-size: 15px; box-sizing: border-box;
  margin: 4px 8px 4px 0; color: #0000AA !important; }
.btn-link:focus-visible, .btn-go:focus-visible, .m-dir:focus-visible { outline: 3px solid #0000AA; outline-offset: 2px; }
.btn-go:active, .m-dir:active, .m-dir[aria-expanded="true"] {
  border-top: 2px solid #555; border-left: 2px solid #555; border-right: 2px solid #fff; border-bottom: 2px solid #fff; background: #bbb;
}
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #0000AA; outline-offset: 2px; box-shadow: 0 0 0 5px #ffffff;
}
.skip-link { position: absolute; left: 8px; top: -100px; z-index: 10; background: #fff; color: #0000AA; padding: 8px 16px;
  border: 2px solid #000; font-weight: bold; }
.skip-link:focus { top: 8px; }

/* Contrast fixes (WCAG AA) */
.ticker-label { background: #a8322a !important; border-color: #6b1d18 !important; }
.burst-sm { background: #a8322a !important; }
.new-flag { animation: none !important; color: #c0001a !important; }
.status-text { color: #222; }

/* ---------- Mobile header (hidden on wider screens) ---------- */
.m-head { display: none; }

/* ---------- Tablet 768-1199: left nav + content; right rail moves under the content ---------- */
@media (min-width: 768px) and (max-width: 1199px) {
  .desktop { width: 92% !important; }
  tr.cols { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
  tr.cols > td { display: block; width: auto !important; }
  tr.cols > td.rail { grid-column: 1 / -1; border-top: 2px solid #888; }
  tr.cols > td.rail > table > tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; padding: 8px; }
  tr.cols > td.rail > table > tbody > tr { display: block; }
  tr.cols > td.rail > table > tbody > tr > td { display: block; }
  tr.cols > td.rail > table > tbody > tr:has(> td[height]) { display: none; }
}

/* ---------- Phones below 768 ---------- */
@media (max-width: 767px) {
  .desktop, .mac-window, .desktop > tbody > tr > td { width: 100% !important; max-width: none; }
  .desktop { margin: 0 auto; }
  .hello { font-size: 36px; }
  .page-title { font-size: 24px; }
  .page-title.positioning { font-size: 22px; }
  .cap-h { font-size: 18px !important; }
  .m-head { display: table-row; }
  .m-head > td { background: #dddddd; border-bottom: 2px solid #888; padding: 8px 12px; }
  .m-id { display: flex; align-items: center; gap: 12px; }
  .al-mark-sm { width: 40px; height: 40px; margin: 0; }
  .m-name { font-family: Chicago, Charcoal, Geneva, Helvetica, sans-serif; font-weight: bold; font-size: 18px; line-height: 1.2; }
  .m-cred { font-size: 13px; color: #222; letter-spacing: 0.5px; }
  .m-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
  .m-dir { min-height: 44px; padding: 0 16px; font: bold 15px Helvetica, Arial, sans-serif; color: #000; cursor: pointer;
    background: #cccccc; border-top: 2px solid #fff; border-left: 2px solid #fff; border-right: 2px solid #555; border-bottom: 2px solid #555; }
  .m-actions .btn-link { margin: 0; }
  tr.cols > td { display: block; width: auto !important; border-left: 0; border-right: 0; }
  tr.cols > td > table { width: 100% !important; }
  /* sidebar: identity duplicates the header; Directory shows nav + Find */
  .sidebar > table > tbody > tr { display: none !important; }
  .sidebar > table > tbody > tr:has(.snav-wrap), .sidebar > table > tbody > tr:has(.search-well) { display: block !important; }
  .sidebar > table > tbody > tr > td { display: block; }
  html.js td.sidebar { display: none; }
  html.js.dir-open td.sidebar { display: block; border-bottom: 2px solid #888; }
  .snav-item > a, .snav-subitem > a { min-height: 44px; font-size: 16px; }
  .snav-item > .orb { margin-top: 16px; }
  .search-field, .btn-go { min-height: 44px; }
  .sidebar form.find-form { display: block; }
  .main > table > tbody > tr > td { padding: 8px; }
  .main .panel.raised > tbody > tr > td:not(.cap-h):not(.cap-b), .main .cap-b, .main .panel.inset > tbody > tr > td { padding: 16px !important; }
  .cap-h { padding: 8px 16px !important; }
  .cred-row, .cred-row > tbody, .cred-row > tbody > tr { display: block; }
  .cred-row td.cred-chip { display: inline-block; width: 48% !important; box-sizing: border-box; margin: 0 0 4px 0; }
  .rail > table > tbody > tr > td[height] { display: none; }
  .finder-list { display: block; overflow-x: auto; max-width: 100%; }
  .titlebar .title-text { font-size: 12px; }
  .statusbar .status-text { word-break: break-word; }
}

/* ---------- AA contrast fixes found by QA ---------- */
.netscape-badge { background: radial-gradient(circle at 35% 30%, #1a5fb4, #0b4a99 60%, #003380); }
.under-desk font { background: #d4d4d4; color: #111 !important; padding: 2px 8px; }
.burst { color: #8a0000 !important; }