/* ============================================================================
   utility.css — self-contained stylesheet for the app-utility module descendants
   ----------------------------------------------------------------------------
   The <app-utility> ROOT keeps its tag; this file styles the renamed utility-*
   descendants (version/copyright, Search, Settings):

     app-utility (root — unchanged)
     ├─ utility-legal > -section > -pane > -frame > -inner > -nav
     │    ├─ utility-version   > utility-label-wrap > utility-label  "V.0.6"
     │    └─ utility-copyright > utility-label-wrap > utility-label  "© …"
     ├─ utility-search   > … > utility-search-button   > utility-label-wrap > a
     └─ utility-settings > … > utility-settings-button > utility-label-wrap > a

   Same contract as calendar.css/accordion.css. Native <a> links stay native.
   ========================================================================== */

/* ── Structure (containers are [bare]: layout only) ──────────────────────── */
utility-legal,
utility-search,
utility-settings {
  display: grid;
  gap: calc(var(--size-5, 16) * 1px);
  align-content: baseline;
}
utility-legal-section,
utility-search-section,
utility-settings-section {
  display: grid;
  gap: calc(var(--size-3, 4) * 1px);
  width: stretch;
}
utility-legal-pane,
utility-search-pane,
utility-settings-pane {
  display: grid;
  gap: calc(var(--size-3, 4) * 1px);
}
utility-legal-frame,
utility-search-frame,
utility-settings-frame {
  display: grid;
  gap: calc(var(--size-5, 16) * 1px);
}
utility-legal-inner,
utility-search-inner,
utility-settings-inner {
  display: flex;
  flex-direction: column;
  gap: calc(var(--size-5, 16) * 1px);
  width: 100%;
  height: 100%;
  flex: 0 1 auto;
  min-width: 0;
}
utility-legal-nav,
utility-search-nav,
utility-settings-nav {
  display: flex;
  gap: calc(var(--size-3, 4) * 1px);
}

/* ── Buttons/chips ([bare]: layout + cursor only) ────────────────────────── */
utility-version,
utility-copyright,
utility-search-button,
utility-settings-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--size-3, 4) * 1px);
  height: 100%;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  align-content: center;
  cursor: pointer;
}
utility-version *,
utility-copyright *,
utility-search-button *,
utility-settings-button * {
  cursor: pointer;
}
/* Copyright chip keeps data-id="legal" — legal serif face. */
utility-copyright[data-id="legal"] {
  font-family: var(--font-family-legal, 'Trust', Georgia, 'Times New Roman', Times, serif);
}

/* ── Leaves ──────────────────────────────────────────────────────────────── */
utility-label-wrap {
  display: block;
  width: stretch;
  white-space: nowrap;
}
utility-label {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  white-space: nowrap;
}

/* ── Staged-reveal parity (overlay-guarded) ──────────────────────────────── */
utility-label {
  transition: opacity calc(var(--size-9, 256) * 1ms) ease-in 0ms;
}
body[data-loading-overlay]:not([loaded]) utility-label,
body[data-loading-overlay]:not([visible]) utility-label {
  opacity: calc(var(--size-1, 1) * 0);
}
body[data-loading-overlay][visible] utility-label {
  opacity: calc(var(--size-10, 512) * 0.1);
}

/* ── Print parity ─────────────────────────────────────────────────────────────
   Pre-rename the utility bar PRINTED (container{display:none} always lost to
   [grid]) with the generic-tag print treatment — mirror it. The containers are
   [bare] (margin/gap parts only); the sections are not (full 16px white box). */
@media print {
  utility-legal,
  utility-search,
  utility-settings {
    margin: 0 !important;
    max-width: none !important;
    gap: 0 !important;
  }
  utility-legal-section,
  utility-search-section,
  utility-settings-section {
    margin: calc(var(--size-5, 16) * 1px) !important;
    margin-left: calc(var(--size-5, 16) * 1px) !important;
    margin-right: calc(var(--size-5, 16) * 1px) !important;
    padding: calc(var(--size-5, 16) * 1px) !important;
    min-height: auto !important;
    max-width: none !important;
    gap: 0 !important;
    background: var(--color-white, #ffffff) !important;
  }
  utility-legal-pane,
  utility-search-pane,
  utility-settings-pane {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    gap: 0 !important;
    page-break-inside: avoid;
  }
  utility-legal-frame,
  utility-search-frame,
  utility-settings-frame {
    break-inside: avoid;
  }
}