/* Shared screen presentation. Document canvases and print layouts retain their own metrics. */
:root {
  --shell-gutter: clamp(16px, 4vw, 52px);
  --shell-wide: 1296px;
  --shell-text: #302a32;
  --shell-secondary: #605861;
  --shell-action: #54374d;
}
.aw-skip {
  background: #fffefa; color: #38263a; border-radius: 6px;
  font: 600 14px/1.5 var(--aw-family);
}
.aw-bar-inner, footer.aw-footer {
  width: min(var(--shell-wide), calc(100% - 2 * var(--shell-gutter)));
  box-sizing: border-box;
}
.aw-bar .aw-help, .aw-bar .aw-home-link { padding-block: 8px }
.aw-bar a[aria-current="page"], footer.aw-footer a[aria-current="page"] {
  color: var(--shell-action); text-decoration: underline; text-underline-offset: .35em;
}
.aw-bar .aw-launch nav { max-height: min(75vh, 480px); overflow-y: auto; overscroll-behavior: contain }
.shell-menu-links { border-top: 1px solid var(--aw-line); margin-top: 4px; padding-top: 4px }
.aw-launch .shell-menu-links a { padding-left: 11px }
footer.aw-footer {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 10px 24px; padding: 20px 0 30px; margin: 22px auto 0; background: transparent;
  border: 0; border-top: 1px solid var(--aw-line); color: var(--shell-secondary);
  text-align: left; font: 500 13px/1.55 var(--aw-family); letter-spacing: normal;
}
footer.aw-footer nav { display: flex; flex-wrap: wrap; gap: 2px 18px }
footer.aw-footer a { text-decoration: none; color: inherit; padding-block: 5px }
footer.aw-footer a:hover, .aw-bar a.aw-help:hover { text-decoration: underline; text-underline-offset: .28em }
footer.aw-footer .shell-signature { color: var(--shell-text); font: 600 20px/1.4 Georgia, serif }
.shell-signature span { font: 600 13px var(--aw-family) }
@media screen {
  html { color-scheme: light }
  body { background: var(--aw-paper); color: var(--shell-text); font-family: var(--aw-family) }
  :where(a, summary, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid #855273; outline-offset: 3px;
  }
  #mainContent:focus { outline: none }
  main#mainContent {
    box-sizing: border-box; width: min(var(--shell-wide), calc(100% - 2 * var(--shell-gutter)));
    max-width: none; margin: 0 auto; padding: clamp(24px, 3.5vw, 44px) 0 18px;
  }
  main#mainContent:is(.prose-main,.backup-main,.error-page) { width: min(800px, calc(100% - 2 * var(--shell-gutter))) }
  main#mainContent.guide-main { max-width: 1112px }
  #mainContent .tool-heading, #mainContent .video-heading, #mainContent .intro, #mainContent .guide-header {
    padding-top: 0; margin-top: 0;
  }
  #mainContent .guide-header { background: transparent; color: var(--shell-text) }
  main#mainContent h1 {
    font: 680 clamp(29px, 3.1vw, 43px)/1.24 var(--aw-family);
    letter-spacing: -.045em; color: var(--shell-text); margin: 5px 0 9px;
  }
  #mainContent :is(.tool-heading,.video-heading,.intro,.guide-header) .eyebrow,
  #mainContent > .eyebrow, #mainContent .aw-title small {
    color: #75596d; font: 650 11px/1.5 ui-monospace, Consolas, monospace; letter-spacing: .12em;
  }
  #mainContent :is(.tool-heading,.video-heading,.intro,.guide-header) p:not(.eyebrow),
  .prose-main .prose-lead, .backup-main .backup-lead {
    color: var(--shell-secondary); font: 450 15px/1.8 var(--aw-family);
  }
  main.prose-main h2, main.guide-main article h2 { color: var(--shell-action); line-height: 1.45 }
  main.prose-main :is(p,li), main.guide-main article p { color: var(--shell-secondary); font-size: 15px; line-height: 1.85 }
  main.prose-main a:not(.button), main.guide-main article a:not(.button) {
    color: var(--shell-action); text-underline-offset: .2em; overflow-wrap: anywhere;
  }
  .backup-main .backup-panel a {
    color: var(--shell-action); text-decoration: underline; text-underline-offset: .22em;
  }
  #mainContent .local-badge { color: #415548; background: #eef2ec; border-color: #d9e2d9 }
  #mainContent :is(.settings-card,.result-card,.tool-panel,.studio-card) { border-color: var(--aw-line); border-radius: 12px }
  #mainContent :is(.button.primary,button.primary) { background: var(--shell-action); border-color: var(--shell-action); color: white }
  #mainContent .suite-tabs button.active { color: var(--shell-action); background: #f1eaf0 }
  #mainContent.error-page { text-align: left; min-height: min(55vh, 420px) }
  #mainContent.error-page > a { display: inline-block; margin: 8px 12px 0 0; color: var(--shell-action) }
}
@media (max-width: 680px) {
  .aw-bar-inner { height: 56px }
  footer.aw-footer { align-items: flex-start; flex-direction: column }
  footer.aw-footer nav { gap: 2px 14px }
}
@media print {
  .aw-skip, .aw-bar, footer.aw-footer { display: none !important }
}