/* Utility strip.
   .viewport-panel / .viewport-tools / .utility-actions – strip above the header
   .theme-toggle, .language-control, .utility-back (Back to Prastora on templates with their own design)
   .print-button – prints the page; hidden until scripts run */
@layer components {
  .viewport-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 2rem; padding: .3rem var(--space-inline); border-block-end: .1rem solid var(--utility-line); background: var(--utility-surface); color: var(--ink); font-size: calc(var(--small-size) * .9); line-height: 1.5; }
  .viewport-panel[hidden] { display: none; }
  .utility-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; min-inline-size: 0; }
  .utility-actions { margin-inline-start: auto; }
  .utility-actions select, .utility-actions button { font: inherit; padding: .25rem .7rem; border: .1rem solid var(--line); border-radius: .4rem; background: var(--paper); color: var(--ink); }
  .language-control { position: relative; display: inline-flex; inline-size: 6.4rem; max-inline-size: 100%; min-inline-size: 0; flex: none; }
  .utility-actions select { appearance: none; -webkit-appearance: none; inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; flex: none; padding-block: .25rem; padding-inline: .8rem 2.8rem; line-height: 1.5; background-image: none; }
  .language-control .language-arrow { position: absolute; inset-inline-end: .8rem; inset-block-start: 50%; transform: translateY(-50%); inline-size: 1.2rem; block-size: 1.2rem; color: var(--ink); pointer-events: none; }
  @media (forced-colors: active) {
    .utility-actions select { appearance: auto; -webkit-appearance: auto; background-image: none; }
    .language-control .language-arrow { display: none; }
  }
  .utility-actions button:disabled { color: var(--muted); cursor: not-allowed; }
  .utility-actions button { display: inline-flex; align-items: center; gap: .6rem; }
  .utility-actions svg { inline-size: var(--small-size); block-size: var(--small-size); flex: none; }
  .scheme-status::after { content: 'Light'; }
  @media (prefers-color-scheme: dark) {
    .scheme-status::after { content: 'Dark'; }
  }
  :root[data-scheme=light] .scheme-status::after { content: 'Light'; }
  :root[data-scheme=dark] .scheme-status::after { content: 'Dark'; }
  .utility-back { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .8rem; border: .1rem solid var(--line); border-radius: .4rem; background: var(--paper); color: var(--accent); font-weight: 600; text-decoration: none; }
  .utility-back svg { inline-size: var(--small-size); block-size: var(--small-size); fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .viewport-tools { display: flex; align-items: center; gap: 1rem; min-inline-size: 0; }
  .theme-toggle { display: inline-flex; align-items: center; justify-content: center; inline-size: 3rem; block-size: 3rem; padding: .5rem; border: .1rem solid var(--line); border-radius: .4rem; background: var(--paper); color: var(--ink); flex: none; }
  .theme-toggle svg { inline-size: 1.8rem; block-size: 1.8rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
  .theme-toggle .theme-sun { display: none; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-scheme]) .theme-toggle .theme-sun { display: block; }
    :root:not([data-scheme]) .theme-toggle .theme-moon { display: none; }
  }
  :root[data-scheme=dark] .theme-toggle .theme-sun { display: block; }
  :root[data-scheme=dark] .theme-toggle .theme-moon { display: none; }
  :root[data-scheme=light] .theme-toggle .theme-sun { display: none; }
  :root[data-scheme=light] .theme-toggle .theme-moon { display: block; }
  .theme-toggle[hidden] { display: none; }
  .viewport-panel :is(a, button, select, .language-control) { transform: none; transition: none; }
  .print-button[hidden] { display: none; }
  @media (width > 50em) {
    .viewport-panel { padding-block: .22rem; font-size: calc(var(--small-size) * .8); }
    .utility-actions select, .utility-actions button { padding: .18rem .6rem; }
    .language-control { inline-size: 8.6rem; }
    .utility-actions select { padding-inline: .65rem 2.5rem; }
    .language-control .language-arrow { inline-size: 1rem; block-size: 1rem; inset-inline-end: .7rem; }
    .utility-actions svg { inline-size: calc(var(--small-size) * .85); block-size: calc(var(--small-size) * .85); }
    .theme-toggle { inline-size: 2.6rem; block-size: 2.6rem; padding: .45rem; }
    .theme-toggle svg { inline-size: 1.5rem; block-size: 1.5rem; }
  }
  @media print {
    .viewport-panel { display: none; }
    .theme-toggle { display: none; }
  }
}