/* Quiet links and controls, based on the portfolio's email treatment.
   Preserve selected controls and the drawing editor's own interface. */
:root {
  --control-surface: rgba(255, 255, 255, .016);
  --control-border: #30363c;
  --control-text: #d5dbe3;
  --link-text: #aabbd0;
}
body a {
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: #536273;
}
body :is(main, article, .course-footer) a:not(:where(.button, .primary, .skip, aside *, #course-nav *, .side-actions *, .whiteboard *)) {
  color: var(--link-text);
}
body :is(main, article, .course-footer) a:not(:where(.button, .primary, .skip, aside *, #course-nav *, .side-actions *, .whiteboard *)):hover {
  color: #dce5f0;
  text-decoration-color: #91a8c2;
}
body button:not(:where(.whiteboard *, .layout-toggle *, [aria-pressed="true"])),
body a.button,
body a.primary,
body .profile-menu > summary,
body .course-footer #open-feedback {
  background: var(--control-surface);
  color: var(--control-text);
  border: 1px solid var(--control-border);
  border-radius: 6px;
  font-weight: 400;
  box-shadow: none;
  text-decoration: none;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}
body button:not(:where(.whiteboard *, .layout-toggle *, [aria-pressed="true"])):hover:not(:disabled),
body a.button:hover,
body a.primary:hover,
body .profile-menu > summary:hover,
body .profile-menu[open] > summary,
body .course-footer #open-feedback:hover {
  background: #17191c;
  border-color: #56616d;
  color: #eaeef3;
}
body button.primary,
body a.primary {
  background: #171c23;
  border-color: #465465;
  color: #dce5f0;
}
body > header > a { color: #c6ced8; text-decoration: none; }
body > header > a:hover { color: #eaeef3; }
body :is(button, a, summary):not(:where(.whiteboard *)):focus-visible {
  outline: 2px solid #9dbfe5;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  body :is(button, a, summary) { transition: none; }
}

/* One compact account control across the catalog and course readers. */
body > header #profile, body #profile-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}
body #profile-state, body #profile-trigger .profile-chevron { display: none; }
body #profile-trigger .profile-copy { line-height: 1; }
body > header #profile::before {
  content: '';
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 21v-2a7 7 0 0 1 14 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
}
body :is(#profile, #profile-trigger)[data-session="signed-in"]::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #94c8ad;
}

body .account-dropdown {
  position: fixed;
  inset: var(--account-menu-top, 58px) var(--account-menu-right, 5vw) auto auto;
  margin: 0;
  width: 136px;
  min-width: 0;
  padding: 4px;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  background: #111315;
  color: var(--control-text);
  box-shadow: 0 6px 18px #0004;
}
body .account-dropdown button, body .profile-panel #header-signout {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 6px 10px;
  font: 400 14px/20px system-ui, sans-serif;
  text-align: left;
  border: 0;
  background: transparent;
}
body .account-dropdown button::before, body .profile-panel #header-signout::before {
  content: '';
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5H5v14h4m5-14 7 7-7 7m7-7H9'/%3E%3C/svg%3E") center / contain no-repeat;
}
body .topbar .profile-menu { position: relative; }
body .topbar .profile-panel { left: auto; right: 0; width: 136px; padding: 4px; border-radius: 8px; }
@media (pointer: coarse) {
  body .account-dropdown button, body .profile-panel #header-signout { min-height: 44px; }
}
body .status-strip:empty { display: none; }