/*
  aios-integration.css: small additions on top of aios.css for the interface
  integration pass (Wave E) and the August report PDF export (Wave G).
  aios.css and design/ are owned by a separate design session and are not
  edited here; every class below is one that pass needed but aios.css did
  not define. Uses the same tokens aios.css already declares.
*/

/* aios.css's .login-btn was written for a <button> element (buttons have no
   default underline); an <a class="login-btn"> (used for the Google/
   Microsoft continue links, since nesting a <button> inside an <a> is
   invalid HTML) needs the link underline removed explicitly. */
a.login-btn {
  text-decoration: none;
}

/* aios.css's table.data-table td becomes a flex container below 768px (to
   show the field as a "label: value" row). A plain flex item defaults to
   min-width: auto, sized to its longest unbroken content run, which can
   refuse to shrink/wrap even though the text itself has spaces to wrap at,
   overflowing the viewport (found via a 375px scrollWidth check: the
   overview page's executive-summary table, rendered from real markdown
   content with a longer cell than any dev fixture had, overflowed to
   422px). This is the standard flexbox min-width fix, it changes no
   colour, spacing or border aios.css itself defines, only lets the
   existing wrapping behaviour actually take effect. */
@media (max-width: 767px) {
  table.data-table td {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* Login page: design/prototypes/login.html only mocks the buttons, the real
   email-start step needs a visible text input and an inline error message,
   styled to match .login-btn's existing visual language (same radius,
   border colour, sizing) and aios.css's --error token. */
.login-input {
  display: block;
  width: 100%;
  padding: 12px 14px;
  margin: 6px 0 var(--space-3) 0;
  border-radius: var(--radius-control);
  border: 1.5px solid #D8DCE3;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--login-ink);
  min-height: 48px;
}
.login-input:focus-visible {
  outline: 3px solid var(--login-accent-text);
  outline-offset: 1px;
}
.form-error {
  color: var(--error);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-3) 0;
}

/* A View/Download action that has no real target yet (a historical item
   whose original file could not be retrieved this pass, or a walkthrough
   video not yet recorded) is rendered as a disabled-looking button rather
   than a dead "#" link (never a broken link, per portal-design QA). */
.btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

/* "Why is this not shown?" link after a NOT_MEASURABLE/UNAVAILABLE KPI
   card (governance.ts section 25, anchor #why-missing). Small and
   understated so it never competes with the card's badge or value; colour
   comes from the existing `a { color: var(--accent-text) }` rule (the
   Constitution's corrected, AA-safe accent), this class only sets size and
   spacing. */
.link-quiet {
  display: inline-block;
  margin-top: 2px;
  font-size: var(--text-xs);
}

/* Persistent footer link to Governance, Privacy and Trust (present on every
   workspace page): the mobile route to that page, since the tab bar stays
   at six items and never gains a seventh (portal-design QA, 375px
   overflow). Sits inside footer.proto-footer's own muted/small text, no
   colour override needed. */
a.footer-link {
  font-weight: 500;
}

/* Video-card "not yet recorded" placeholder state: no poster image exists,
   so the play badge and duration chip are replaced by a plain notice. */
.video-poster-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  text-align: center;
  color: #C7D2E8;
  font-size: var(--text-sm);
  font-weight: 500;
}

/* Print stylesheet for the August report PDF export (Wave G): headless
   Chrome renders /t/:slug/reports/:slug with @media print applied, hides
   navigation chrome, and lets content flow as plain paginated print. */
@media print {
  .skip-link,
  .header-band,
  .sidebar,
  .tab-bar,
  .proto-footer,
  .btn-row,
  a.btn {
    display: none !important;
  }
  .body-frame {
    display: block;
    max-width: none;
  }
  .main-content {
    padding: 0;
  }
  .app-shell {
    min-height: 0;
  }
  details.expand {
    break-inside: avoid;
  }
  /* Print every collapsed section open, a reader of the PDF cannot click a
     <summary>. The UA stylesheet hides a closed <details>'s non-summary
     children; override that specifically, rather than relying on the
     [open] attribute being present at render time. */
  details.expand:not([open]) > .expand-body {
    display: block !important;
  }
  .kpi-card,
  .fir-block,
  .report-item {
    break-inside: avoid;
  }
  body {
    background: #fff;
  }
}

/* GOO-797: TG report media and a quiet, visual Overview. */
.tg-page-heading { margin-bottom: 28px; }
.tg-page-heading .btn-row { margin-top: 24px; }
.tg-overview { max-width: 1280px; }
.tg-infographic { margin: 0 0 24px; }
.tg-infographic img, .tg-media-graphic { display: block; width: 100%; height: auto; border-radius: 12px; }
.tg-infographic figcaption { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 16px; font-size: 14px; }
.tg-infographic figcaption span { color: var(--ink-2); }
.tg-report-media { max-width: 1040px; scroll-margin-top: 24px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.tg-video-player { display: block; width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 12px; background: #0D1D46; }
.tg-media-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 18px 0 24px; }
.tg-media-context { max-width: 80ch; margin: 20px 0 28px; font-size: 14px; }
.tg-media-context > p { color: var(--ink-2); }
.tg-extra-media { margin-top: 20px; }
.tg-extra-media audio { width: 100%; margin-top: 20px; }
.tg-video-library > section + section { margin-top: 48px; }
.tg-report-media summary, .tg-overview summary { cursor: pointer; padding-block: 12px; }
@media (max-width: 600px) {
  .tg-page-heading .btn-row { align-items: stretch; }
  .tg-page-heading .btn-row .btn { width: 100%; text-align: center; }
  .tg-report-media { padding-bottom: 24px; }
}
@media print { .tg-video-player, .tg-media-links { display: none; } }