/*
  ASA Engineering theme for the presentation viewer.
  Loaded after the viewer's own styles so it can restyle the shell
  to match asacorpora.com. Slide content is not affected.
*/

:root {
  --shell-navy: #111;
  --shell-blue: #37792a;
  --shell-ink: #111;
  --shell-muted: #5c6660;
  --shell-line: #e3e7e4;
  --shell-bg: #f7f8f7;
  --shell-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ui: var(--shell-font);
}

body, #app, button, input, select { font-family: var(--shell-font); }
body { color: var(--shell-ink); background: var(--shell-bg); }

/* Not used on the public site: source links, cloud features and file export. */
#workspace-source, #share-button, #drive-button, #history-button, #download-button,
#save-state, #save-now, #edit-toggle, #cloud-banner { display: none !important; }

/* Toolbar */
#toolbar { border-bottom: 2px solid var(--shell-ink); background: #fff; }
#toolbar > .brand, #toolbar > .brand span { color: var(--shell-ink); }
#toolbar > .brand .brand-divider { color: var(--shell-muted); }

.asa-site-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--shell-ink);
  text-decoration: none;
  white-space: nowrap;
  padding-right: 14px;
  margin-right: 4px;
  border-right: 1px solid var(--shell-line);
}
.asa-site-link img { width: 26px; height: 26px; }
.asa-site-link:hover { color: var(--shell-blue); }

@media (max-width: 900px) {
  .asa-site-link span { display: none; }
  .asa-site-link { padding-right: 10px; margin-right: 0; }
}

#present-button {
  background: var(--shell-ink);
  border-color: var(--shell-ink);
  color: #fff;
  border-radius: 0;
  letter-spacing: 1px;
  font-weight: 600;
}
#present-button:hover { background: var(--shell-blue); border-color: var(--shell-blue); color: #fff; }

#command-trigger { border-radius: 0; }

/* Left navigation */
#menu-drawer { color: var(--shell-ink); background: #fff; border-right: 1px solid var(--shell-ink); }

.library-brand { text-decoration: none; color: var(--shell-ink); }
.library-brand .library-logo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #000 url("/assets/img/asa-logo-96.webp") center / cover no-repeat;
  box-shadow: none;
}
.library-brand .library-logo .ui-svg { display: none; }
.library-brand strong { color: var(--shell-ink); letter-spacing: 1px; font-size: 12px; }
.library-brand > div > span { color: var(--shell-muted); }

#library-home {
  color: var(--shell-ink);
  background: #fff;
  border: 1px solid var(--shell-ink);
  border-radius: 0;
}
#library-home:hover { background: var(--shell-ink); color: #fff; }

#library-count, .chapter-number, .chapter-count, .nav-filter, #menu-search::placeholder { color: #8a948e; }
#menu-search { color: var(--shell-ink); }

.library-tabs button, #tab-slides, #tab-saved, .saved-tab-label { color: var(--shell-muted); }
#tab-contents[aria-selected="true"], .library-tabs button[aria-selected="true"] { color: var(--shell-ink); font-weight: 700; }
.library-tabs::before { background: var(--shell-bg) !important; }

#contents-tree, .chapter, .chapter-row { color: var(--shell-ink); }
.chapter-link, .chapter-name { color: var(--shell-muted); }
.chapter.current .chapter-link, .chapter.current .chapter-name { color: var(--shell-ink); font-weight: 700; }
.chapter.current .chapter-number { color: var(--shell-blue); }

.topic-link { color: var(--shell-muted); }
.topic-link.active {
  color: var(--shell-blue);
  font-weight: 700;
  background: #eef5ea;
  border-color: transparent;
}
.topic-link:hover { color: var(--shell-ink); }

.slide-card.current, .slide-card[aria-current="true"] { border-color: var(--shell-blue); background: #eef5ea; }

/* Workspace */
#workspace-title { color: var(--shell-ink); font-weight: 300; letter-spacing: -0.5px; }
#workspace-kicker, .workspace-kicker, #workspace-head .crumbs { color: var(--shell-muted); }
.view-switch button.selected, .view-switch button[aria-pressed="true"] { color: var(--shell-ink); }

#progress-fill { background: var(--shell-blue); }

#footer { background: #fff; border-top: 1px solid var(--shell-ink); }
#previous-button, #next-button { border-radius: 0; color: var(--shell-ink); }
#previous-button:hover:not(:disabled), #next-button:hover:not(:disabled) { background: var(--shell-ink); color: #fff; border-color: var(--shell-ink); }

.overview-card { border-radius: 0; }
.overview-card.current, .overview-card[aria-current="true"] { outline: 2px solid var(--shell-blue); }

button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--shell-blue); outline-offset: 2px; }