/* Onboarding is independent of the annotation layout except for reserved dock space. */
body.has-tutorial #nav { padding-right:148px; }
#tutorial-trigger {
  position:fixed;right:8px;top:calc((var(--app-bar-height) - 36px)/2);z-index:32;
  display:inline-flex;align-items:center;justify-content:center;height:36px;margin:0;padding:6px 12px;
  border:1px solid #165c99;border-radius:8px;background:#165c99;color:#fff;
  font-weight:700;letter-spacing:.02em;line-height:1;white-space:nowrap;
  box-shadow:0 2px 6px #165c9926;
}
#tutorial-trigger:hover { background:#104b80;border-color:#104b80; }
#tutorial-trigger:active,#tutorial-trigger[aria-expanded="true"] { background:#0d3d69;border-color:#0d3d69;box-shadow:none; }
.tutorial-card { position:fixed;z-index:45;padding:14px 18px 18px;border:2px solid #2875b6;border-radius:12px;background:#fff;color:#172b3b;box-shadow:0 6px 24px #183a5d26;font:14px/1.65 var(--font); }
.tutorial-card[hidden],.tutorial-marker[hidden] { display:none; }
.tutorial-top { display:flex;align-items:center;justify-content:space-between;gap:8px; }
.tutorial-progress { color:#165c99;font-size:12px;font-weight:700;letter-spacing:.04em; }
.tutorial-top button { border:0;background:transparent;font-size:23px;line-height:1;min-width:36px;padding:4px; }
.tutorial-card h2 { font-size:18px;line-height:1.4;margin:6px 0 10px; }
.tutorial-card p { margin:0 0 14px;white-space:pre-line; }
.tutorial-actions { display:flex;gap:8px;flex-wrap:wrap;align-items:center; }
.tutorial-actions button { min-height:40px; }
.tutorial-actions .primary { background:#165c99;border-color:#165c99; }
.tutorial-auto { color:#546878;font-size:12px; }
.tutorial-card .tutorial-error { color:#a82f36; }
.tutorial-marker { position:fixed;z-index:44;pointer-events:none;border:2px solid #2875b6;border-radius:5px;box-shadow:0 0 0 3px #b8d9f380; }
.tutorial-card:before { content:'';position:absolute;width:12px;height:12px;background:white;border:solid #2875b6;border-width:0 2px 2px 0; }
.tutorial-card[data-side=left]:before { left:-8px;top:var(--arrow-y);transform:translateY(-50%) rotate(135deg); }
.tutorial-card[data-side=right]:before { right:-8px;top:var(--arrow-y);transform:translateY(-50%) rotate(-45deg); }
.tutorial-card[data-side=top]:before { top:-8px;left:var(--arrow-x);transform:translateX(-50%) rotate(225deg); }
.tutorial-card[data-side=bottom]:before { bottom:-8px;left:var(--arrow-x);transform:translateX(-50%) rotate(45deg); }
.tutorial-card.is-docked { bottom:0;left:0;right:0;max-height:42dvh;overflow:auto;border-radius:0;border-width:2px 0 0;padding:10px 20px;box-shadow:0 -4px 16px #183a5d16; }
.tutorial-card.is-docked:before,.tutorial-card[data-side=""]:before { display:none; }
.tutorial-docked .workspace { height:calc(100dvh - var(--app-bar-height) - var(--tutorial-height,220px)); }
.tutorial-card button:focus-visible,#tutorial-trigger:focus-visible { outline:3px solid #165c99;outline-offset:3px; }
@media(max-width:560px) {
  #tutorial-trigger { font-size:12px;padding:6px; }
  body.has-tutorial #nav { padding-right:116px; }
  .tutorial-docked #main { height:calc(100dvh - var(--app-bar-height) - var(--tutorial-height,220px));overflow:auto;scroll-padding:12px; }
  .tutorial-docked .workspace { height:auto; }
  .tutorial-card.is-docked { padding:8px 14px; }
  .tutorial-card h2 { font-size:16px;margin:4px 0; }
  .tutorial-card p { margin-bottom:8px; }
}
@media(forced-colors:active) {
  .tutorial-marker,.tutorial-card { border-color:Highlight; }
}