/* InkBuddy shell — layout for the hub header and the tool app-shell.
   Everything here is token-based; no colour, radius or spacing literals. */

html, body { min-height: 100%; margin: 0; padding: 0; }

/* wa-page pads the main slot; each section owns its gutter instead. */
wa-page::part(main-content) { padding: 0; }
wa-page > main { padding: 0; }

/* UserSpice's #us-toast-container depends on Bootstrap's .toast-container /
   .position-fixed / .top-0 / .start-0 utility classes for its positioning —
   this template only loads bootstrap.bundle.min.js (for the Toast JS
   behaviour), not bootstrap.min.css, so those classes do nothing. Without
   position: fixed, the container's own padding-top (sized to clear the old
   Bootstrap admin navbar) rendered as blank space at the very top of every
   page. Pin the essentials here instead of loading all of Bootstrap's CSS. */
#us-toast-container {
  position: fixed;
  z-index: 1090;
  width: max-content;
  max-width: 100%;
  pointer-events: none;
}
#us-toast-container .toast:not(.show) { display: none; }
#us-toast-container .toast { pointer-events: auto; }

/* Fixed-ratio two-column layouts (a dominant canvas/result beside a narrower
   control panel) where wa-grid's uniform auto-fit columns would flatten the
   ratio. Collapses to one column below the tool pages' own mobile-breakpoint
   so these never get squeezed into unreadable narrow columns on a phone —
   gap/align-items are set per instance via inline style. */
.ib-cols-1-2 { display: grid; grid-template-columns: 1fr 2fr; }
.ib-cols-2-1 { display: grid; grid-template-columns: 2fr 1fr; }
@media (max-width: 48rem) {
  .ib-cols-1-2, .ib-cols-2-1 { grid-template-columns: 1fr; }
}

.ib-section { padding-inline: var(--wa-space-xl); max-width: 1320px; margin-inline: auto; }
.ib-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--wa-space-l); padding: var(--wa-space-m) var(--wa-space-xl);
  position: relative;
}
.ib-wordmark { display: flex; align-items: center; gap: var(--wa-space-s); text-decoration: none; color: inherit; }
.ib-wordmark img {
  width: 2.125rem; height: 2.125rem;
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-brand-fill-quiet);
}

/* ── Hub: links live in the header bar, drawer-free ─────────────────── */
.ib-hub-nav { display: flex; align-items: center; gap: var(--wa-space-l); font-size: var(--wa-font-size-s); }
.ib-hub-nav a { text-decoration: none; color: var(--wa-color-text-quiet); }
.ib-hub-nav a[aria-current='page'] { color: var(--wa-color-text-normal); font-weight: var(--wa-font-weight-semibold); }

/* The bar needs ~1100px for wordmark + five links + language + login. */
@media (max-width: 1100px) {
  .ib-hub-nav { display: none; }
  wa-page[data-hub-nav-open] .ib-hub-nav {
    display: flex; flex-direction: column; align-items: flex-start;
    position: absolute; inset-block-start: 100%; inset-inline: 0; z-index: 20;
    padding: var(--wa-space-m) var(--wa-space-xl);
    gap: var(--wa-space-m);
    background: var(--wa-color-surface-raised);
    border-block-end: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    box-shadow: var(--wa-shadow-m);
  }
}
@media (min-width: 1101px) { .ib-hub-toggle { display: none; } }

/* ── Tool pages: wa-page's own navigation slot (sidebar → drawer) ───── */
wa-page[data-ib-tool] { --menu-width: 15.625rem; }
wa-page[data-ib-tool][view='mobile'] { --menu-width: auto; }
/* Our own .ib-tool-toggle replaces wa-page's built-in hamburger (see the tool
   pages' header markup) — hide it once the drawer collapse threshold, tied to
   the same mobile-breakpoint attribute via the reflected [view], is passed. */
wa-page[data-ib-tool][view='desktop'] .ib-tool-toggle { display: none; }

.ib-side { display: flex; flex-direction: column; gap: var(--wa-space-2xs); height: 100%; }
.ib-side-label {
  font-size: var(--wa-font-size-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wa-color-text-quiet); padding: var(--wa-space-2xs);
}
.ib-side a {
  display: flex; align-items: center; gap: var(--wa-space-s);
  text-decoration: none; color: var(--wa-color-text-normal);
  padding: var(--wa-space-xs) var(--wa-space-s);
  border-radius: var(--wa-border-radius-m);
}
.ib-side a:hover { background: var(--wa-color-neutral-fill-quiet); }
.ib-side a[aria-current='page'] {
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand-on-quiet);
  font-weight: var(--wa-font-weight-semibold);
}
.ib-side wa-badge { margin-inline-start: auto; }
.ib-side-footer { margin-block-start: auto; }

.ib-page-head { display: flex; flex-direction: column; gap: var(--wa-space-s); }
.ib-tool-main { display: flex; flex-direction: column; gap: var(--wa-space-xl); padding: var(--wa-space-xl); max-width: 1320px; margin-inline: auto; width: 100%; }
.ib-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--wa-space-m); }
.ib-metric-label {
  font-size: var(--wa-font-size-xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--wa-color-text-quiet);
}
.ib-metric-value { font-size: var(--wa-font-size-2xl); font-family: var(--wa-font-family-heading); }

.ib-table { width: 100%; border-collapse: collapse; font-size: var(--wa-font-size-s); }
.ib-table th, .ib-table td { padding: var(--wa-space-xs); text-align: left; }
.ib-table thead tr { border-block-end: var(--wa-border-width-s) solid var(--wa-color-surface-border); }

.ib-footer {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--wa-space-m); padding: var(--wa-space-l) var(--wa-space-xl);
  border-block-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  font-size: var(--wa-font-size-s); color: var(--wa-color-text-quiet);
}
.ib-footer a { color: inherit; }