/* Shared visual normalization layer for sea trial pages.
   CSS-only standardization; no workflow logic changes. */
:root{
  --site-border:#d0d7de;
  --site-muted:#6b7280;
  --site-bg:#ffffff;
  --site-panel:#f8fafc;
  --site-head:#f9fafb;
  --site-accent:#0b57d0;
  --site-text:#111827;
  --site-shadow:none;
  --site-radius:12px;
  --site-radius-sm:8px;
  --site-page-max:1400px;
  --site-nav-width:260px;
  --site-gap:20px;
  --site-pad:20px;
  --site-field-h:40px;
}

html,body{
  margin:0 !important;
  padding:0 !important;
}
body{
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:14px !important;
  line-height:1.45 !important;
  color:var(--site-text) !important;
  background:#fff !important;
}
*{box-sizing:border-box;}

.page-wrap,
.page-shell,
.layout,
.layout-grid,
.form-layout{
  max-width:var(--site-page-max) !important;
  margin:0 auto !important;
}
.page-wrap,
.page-shell{
  padding:var(--site-pad) !important;
}
.layout,
.layout-grid,
.form-layout,
.page-shell{
  display:grid;
  grid-template-columns:var(--site-nav-width) minmax(0,1fr) !important;
  gap:var(--site-gap) !important;
  align-items:start !important;
}
.main-panel,
.main-content,
.form-main,
.form-shell{
  min-width:0 !important;
}

.page-title,
.form-header__title,
h1{
  margin:0 0 4px !important;
  font-size:28px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  color:var(--site-text) !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  text-align:left !important;
}
.form-header,
.form-header__top,
.form-header__title-group{
  margin-bottom:0 !important;
}
.form-header__top{
  display:flex;
  align-items:flex-start !important;
  justify-content:space-between;
  gap:16px;
}
.status-note,
.form-meta,
.form-header__subtitle,
.form-header__meta,
.form-note,
.nav-subtitle,
.subtitle,
.section-note,
.unit-note,
.table-note,
.field-help,
.footer-note{
  color:var(--site-muted) !important;
  font-size:13px !important;
  line-height:1.45 !important;
}
.status-note,
.form-note,
.subtitle,
.section-note,
.unit-note,
.table-note{
  margin:0 0 16px !important;
}

.form-nav,
.section-nav,
.side-nav,
.sidebar,
.website-nav{
  position:sticky !important;
  top:12px !important;
  align-self:start !important;
  width:100% !important;
  min-width:0 !important;
  border:1px solid var(--site-border) !important;
  border-radius:var(--site-radius) !important;
  background:var(--site-panel) !important;
  padding:14px !important;
  overflow:visible !important;
}
.form-nav h3,
.section-nav__title,
.side-nav h3,
.sidebar h3,
.website-nav h3{
  margin:0 0 10px !important;
  font-size:16px !important;
  line-height:1.35 !important;
  font-weight:600 !important;
  color:var(--site-text) !important;
}
.section-index,
.section-nav__list,
.site-pages-list,
.section-menu{
  list-style:none !important;
  padding:0 !important;
  margin:10px 0 0 !important;
  display:grid !important;
  gap:4px !important;
}
.section-index a,
.section-nav__link,
.section-nav-link,
.site-page-link,
.section-menu a{
  display:block !important;
  padding:8px 10px !important;
  margin:0 !important;
  border:1px solid transparent !important;
  border-radius:8px !important;
  text-decoration:none !important;
  color:inherit !important;
  font-size:14px !important;
  line-height:1.35 !important;
}
.section-index a:hover,
.section-nav__link:hover,
.section-nav-link:hover,
.site-page-link:hover,
.section-menu a:hover,
.section-index a.active,
.section-nav__link.active,
.site-page-link.active{
  background:#eef2f7 !important;
  border-color:var(--site-border) !important;
}
.section-index a.active,
.section-nav__link.active,
.site-page-link.active{
  font-weight:600 !important;
}
.site-pages-block{margin-bottom:14px !important;}
.site-nav-divider{height:1px !important;background:#e5e7eb !important;margin:12px 0 !important;}

.form-section,
.form-footer,
.container,
.subsection,
.data-log-wrap,
.mini-table-wrap,
.info-callout{
  border:1px solid var(--site-border) !important;
  border-radius:var(--site-radius) !important;
  background:var(--site-bg) !important;
  box-shadow:var(--site-shadow) !important;
}
.container{
  max-width:none !important;
  margin:0 !important;
  padding:20px !important;
}
.form-section{
  overflow:hidden !important;
  margin-bottom:16px !important;
}
.section-head,
.section-header,
.subsection-title{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  padding:14px 16px !important;
  border-bottom:1px solid var(--site-border) !important;
  background:var(--site-head) !important;
}
.subsection-title{
  display:block !important;
  font-size:14px !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:.02em !important;
}
.section-head h2,
.section-header h2,
.section-title{
  margin:0 !important;
  font-size:18px !important;
  line-height:1.3 !important;
  font-weight:600 !important;
}
.section-body{
  padding:16px !important;
}
.field-grid,
.section-body,
.card-grid,
.checklist-grid{
  gap:14px 16px !important;
}
.field,
.field-row,
.field-shell,
.field-control{
  min-width:0 !important;
}
.field,
.field-row,
.field-shell{
  gap:6px !important;
}
.field-label,
.item-label{
  font-weight:600 !important;
  font-size:13px !important;
  line-height:1.35 !important;
}
.choice-group,
.inline-radio-group{
  gap:10px 14px !important;
}
.choice-item,
.choice,
.choice-inline,
.inline-radio-group label{
  align-items:center !important;
  gap:6px !important;
  font-size:13px !important;
}
input[type="text"],
input[type="number"],
input[type="date"],
select,
textarea,
.field input[type="text"],
.field input[type="number"],
.field input[type="date"],
.field select,
.field textarea{
  width:100% !important;
  min-height:var(--site-field-h) !important;
  padding:10px 12px !important;
  border:1px solid var(--site-border) !important;
  border-radius:var(--site-radius-sm) !important;
  background:#fff !important;
  font:inherit !important;
  color:var(--site-text) !important;
}
textarea{min-height:100px !important; resize:vertical !important;}
.choice-group,
.inline-radio-group,
.checkbox-card,
.signature-box{
  border-radius:var(--site-radius-sm) !important;
}

.toggle-btn,
.action-btn,
.section-toggle,
.nav-link,
.nav-buttons button,
.page-nav button,
.global-page-actions button{
  appearance:none !important;
  min-height:40px !important;
  padding:10px 14px !important;
  border:1px solid var(--site-border) !important;
  border-radius:var(--site-radius-sm) !important;
  background:#fff !important;
  color:var(--site-text) !important;
  cursor:pointer !important;
  font:inherit !important;
  text-decoration:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.action-btn.primary,
.nav-link.primary,
.nav-buttons button.primary,
.page-nav button.primary,
.global-page-actions button.primary{
  background:var(--site-accent) !important;
  border-color:var(--site-accent) !important;
  color:#fff !important;
}
.form-footer,
.footer-nav,
.page-nav,
.nav-buttons,
.global-page-actions,
.page-actions{
  margin-top:20px !important;
}
.form-footer{
  padding:12px 14px !important;
}
.footer-nav,
.page-nav,
.nav-buttons,
.global-page-actions{
  width:100% !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  border-top:0 !important;
}
.nav-actions{
  display:flex !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  margin-left:auto !important;
}

/* Tables/logs */
table,
.data-log,
.form-table{
  width:100% !important;
}
.data-log th,
.data-log td,
.form-table th,
.form-table td{
  vertical-align:middle !important;
}
.data-log thead th,
.form-table th{
  background:#0f4c81 !important;
  color:#fff !important;
  font-weight:600 !important;
}
.row-label{
  font-weight:600 !important;
}

/* Prevent layout collisions */
body,
.page-wrap,
.page-shell,
.main-panel,
.main-content,
.form-main,
.form-shell,
.form-section,
.form-footer{
  overflow:visible !important;
}

@media (max-width:960px){
  .layout,
  .layout-grid,
  .form-layout,
  .page-shell,
  .checklist-grid,
  .card-grid,
  .field-grid,
  .section-body{
    grid-template-columns:1fr !important;
  }
  .form-nav,
  .section-nav,
  .side-nav,
  .sidebar,
  .website-nav{
    position:static !important;
  }
  .form-header__top{
    flex-direction:column !important;
  }
}

/* v2 footer/signature normalization */
.form-footer{padding:12px 14px !important;}
.footer-nav{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;}
.nav-actions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto;}
.signature-box{border:1px dashed var(--site-border,#d0d7de);border-radius:8px;padding:10px;background:#fff;}
.signature-box canvas{width:100%;max-width:520px;background:#fff;border:1px solid var(--site-border,#d0d7de);border-radius:6px;display:block;touch-action:none;}
.signature-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px;}

/* Phase 25 — compact left-nav page completion status */
.app-progress-nav-item { display: block; }
.app-page-progress { margin: -2px 10px 7px 10px; color: #6b7280; font-size: 11px; line-height: 1.2; }
.app-page-progress-label { margin-bottom: 3px; white-space: nowrap; }
.app-page-progress-track { width: 100%; height: 3px; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
.app-page-progress-fill { width: 0%; height: 100%; border-radius: inherit; background: #64748b; transition: width 160ms ease-out; }
.site-page-link.active + .app-page-progress .app-page-progress-label { color: #374151; font-weight: 600; }
.site-page-link.active + .app-page-progress .app-page-progress-fill { background: #0b57d0; }

/* Phase 28 follow-up — keep active left-nav item clear of page progress bar. */
.site-page-link.active,
.section-index a.active,
.section-nav__link.active {
  padding-bottom: 10px !important;
  margin-bottom: 4px !important;
}
.site-page-link.active + .app-page-progress {
  margin-top: 2px !important;
}

/* Phase 5 page-level image attachments */
.image-attachment-panel { margin-top:16px; }
.image-attachment-list { display:grid; gap:12px; }
.image-attachment-card { display:grid; grid-template-columns:120px minmax(0,1fr); gap:12px; align-items:start; border:1px solid #d0d7de; border-radius:10px; padding:10px; background:#fff; }
.image-thumb { width:120px; height:90px; border:1px solid #d0d7de; border-radius:8px; background:#f8fafc; display:flex; align-items:center; justify-content:center; color:#6b7280; font-size:12px; overflow:hidden; }
.image-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.image-meta { min-width:0; }
.image-meta strong { display:block; overflow-wrap:anywhere; }
.image-meta p { margin:4px 0 6px; color:#374151; }
.image-meta small { color:#6b7280; overflow-wrap:anywhere; }
.image-summary-panel { margin-top:18px; }
.image-summary-group { margin-top:12px; }
.image-summary-group h3 { margin:0 0 8px; font-size:16px; }
@media print { .image-attachment-card { break-inside:avoid; } .image-thumb { border-color:#999; } .image-meta button { display:none !important; } }
@media (max-width: 640px) { .image-attachment-card { grid-template-columns:1fr; } .image-thumb { width:100%; height:180px; } }

/* Phase 5 follow-up: openable images and uncropped summary rendering */
.image-open-trigger { appearance:none; padding:0; cursor:pointer; }
.image-open-trigger:hover, .image-open-trigger:focus { outline:2px solid #0b57d0; outline-offset:2px; }
.image-thumb img { object-fit:contain; background:#fff; }
.image-summary-panel .image-attachment-list { display:grid; gap:14px; }
.image-summary-panel .summary-image-card { grid-template-columns:minmax(240px, 420px) minmax(0, 1fr); align-items:start; }
.image-summary-panel .image-thumb { width:100%; height:auto; min-height:160px; max-height:none; background:#fff; }
.image-summary-panel .image-thumb img { width:100%; height:auto; max-height:none; object-fit:contain; }
@media print {
  .image-summary-panel .summary-image-card { grid-template-columns:1fr; }
  .image-summary-panel .image-thumb { width:100%; height:auto; min-height:0; border:0; }
  .image-summary-panel .image-thumb img { width:100%; height:auto; max-height:none; object-fit:contain; }
  .image-summary-panel .action-btn { display:none !important; }
}
@media (max-width: 760px) { .image-summary-panel .summary-image-card { grid-template-columns:1fr; } }

/* Phase 6 supporting document/test-data attachments */
.supporting-file-panel { margin-top:16px; }
.supporting-file-list { display:block; }
.supporting-file-table-wrap { width:100%; overflow-x:auto; }
.supporting-file-table { width:100%; border-collapse:collapse; background:#fff; border:1px solid #d0d7de; border-radius:10px; overflow:hidden; }
.supporting-file-table th,
.supporting-file-table td { padding:9px 10px; border-bottom:1px solid #e5e7eb; text-align:left; vertical-align:top; }
.supporting-file-table th { background:#0f4c81; color:#fff; font-weight:600; white-space:nowrap; }
.supporting-file-table td { overflow-wrap:anywhere; }
.supporting-file-table tr:last-child td { border-bottom:0; }
.supporting-file-table small { color:#6b7280; }
.supporting-file-summary-panel { margin-top:18px; }
.supporting-file-summary-group { margin-top:12px; }
.supporting-file-summary-group h3 { margin:0 0 8px; font-size:16px; }
.supporting-pdf-card { margin:14px 0; border:1px solid #d0d7de; border-radius:10px; background:#fff; overflow:hidden; break-inside:auto; page-break-inside:auto; }
.supporting-pdf-head { display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:1px solid #e5e7eb; background:#f8fafc; align-items:flex-start; }
.supporting-pdf-head p { margin:4px 0; }
.supporting-pdf-head small { color:#6b7280; overflow-wrap:anywhere; }
.supporting-pdf-preview { width:100%; background:#fff; }
.supporting-pdf-object { display:block; width:100%; height:100%; border:0; background:#fff; }
@media print {
  .supporting-file-table .action-btn,
  .supporting-file-panel .action-btn { display:none !important; }
  .supporting-file-table th { background:#e5e7eb !important; color:#111 !important; }
  .supporting-pdf-card { border:0; border-radius:0; margin:12px 0 20px; }
  .supporting-pdf-head { background:#fff !important; border-bottom:1px solid #999; }
  .supporting-pdf-preview { overflow:visible !important; }
  .supporting-pdf-object { width:100% !important; min-height:1000px; overflow:visible !important; }
}

/* Language selector -- header-mounted (see tools/wire-review-i18n.mjs)
   -----------------------------------------------------------------------------------------------
   Every one of the 32 module pages mounts #language-toggle as the LAST CHILD of its own page
   header -- <header class="form-header"> on 31 pages, <header class="dashboard-header"> on
   application_index.html -- so the control sits in the same place, near the title, on every page,
   rather than depending on whether that page happens to have a sticky <aside class="form-nav">.
   Before this, the codemod emitted the mount node with no class at all (so none of these rules
   ever matched it) and, on 11 of the 32 pages, placed it outside the header entirely -- both bugs
   are fixed in the codemod itself; this is the styling half.

   The header itself (engines-brand-theme.css's `.form-header, .dashboard-header` rule) is a dark
   carbon-fibre panel with white text on EVERY page, so the label/select below use light-on-dark
   colors matching that same rule's own `.form-header .form-meta`/`.dashboard-header
   .action-link.secondary` treatment -- not the light-panel --site-* tokens used everywhere else in
   this file, which are tuned for a white .form-nav/.form-section, not this header. */

header.form-header,
header.dashboard-header {
  position: relative !important;
}

.language-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* .form-header is plain block flow (an <h1>, optionally followed by a .form-meta/.form-header__top
   subtitle) -- never a flex row. The toggle is pulled OUT of that flow into the header's own
   top-right corner instead of being reflowed alongside the title, and header.form-header reserves
   padding-right so wrapped title text can never run underneath it. header.form-header (element +
   class, specificity 0-1-1) is deliberately used instead of the bare `.form-header` engines-brand-
   theme.css itself uses for its `padding:18px 20px !important` shorthand (specificity 0-1-0) --
   the longhand override here needs to win regardless of the two files' load order. */
header.form-header {
  padding-right: 200px !important;
}
header.form-header .language-toggle {
  position: absolute !important;
  top: 18px !important;
  right: 20px !important;
}

/* .dashboard-header (application_index.html) is already a flex row -- a title block, then
   .user-panel -- laid out with justify-content:space-between (application_review_dashboard.css).
   Appending the toggle as a plain third flex item under that rule would spread .user-panel into
   the middle of the row instead of leaving it flush right. Overriding justify-content and giving
   .user-panel margin-left:auto keeps the title left and clusters .user-panel + the toggle together
   at the right edge, exactly where the toggle needs to land next to the existing header controls. */
header.dashboard-header {
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
}
header.dashboard-header .user-panel {
  margin-left: auto !important;
}
header.dashboard-header .language-toggle {
  margin-left: 12px !important;
}

.language-toggle-label {
  /* Matches engines-brand-theme.css's own `.form-header .form-meta, ..., .dashboard-header p`
     color exactly -- the header's established convention for secondary text on its dark
     background -- so the label reads clearly instead of repeating a milder version of the bug
     this fixes (the label existed in the DOM all along; it just had no visible presentation). */
  color: rgba(255, 255, 255, .82) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  white-space: nowrap !important;
}

/* Deliberately its own control, not the page's `.field select` (width:100%; min-height:40px,
   defined above for actual form fields) -- this is a page-level header control and must read like
   one, not like a field a user is expected to fill in. width:auto beats the bare `select` rule
   above on specificity alone (a class selector always beats a type selector); min-height/padding/
   background/color are restated here because that bare rule declares those too, and a specificity
   win only applies per-property, not per-selector -- see assets/app.css's .language-toggle-select
   for the identical pattern already proven in the Quote Tool. Colors deliberately mirror engines-
   brand-theme.css's `.dashboard-header .action-link.secondary` pill (white background, matching
   border opacity) so the control reads as one of this header's own existing buttons/pills. */
.language-toggle-select {
  width: auto !important;
  min-height: 32px !important;
  padding: 4px 10px !important;
  border: 1px solid rgba(255, 255, 255, .82) !important;
  border-radius: var(--site-radius-sm) !important;
  background: rgba(255, 255, 255, .96) !important;
  color: var(--site-text) !important;
  font: inherit !important;
  font-size: 13px !important;
  cursor: pointer !important;
}

@media (max-width: 900px) {
  /* Matches application_review_dashboard.css's own .dashboard-header { flex-direction:column }
     breakpoint -- tablet portrait and narrower. The toggle drops out of the header's corner and
     back into normal document flow on both header shapes, so it can never overlap or crowd
     wrapped title text. */
  header.form-header {
    padding-right: 20px !important;
  }
  header.form-header .language-toggle {
    position: static !important;
    margin-top: 10px !important;
  }
  header.dashboard-header .user-panel {
    margin-left: 0 !important;
  }
  header.dashboard-header .language-toggle {
    margin-left: 0 !important;
    margin-top: 8px !important;
    align-self: flex-start !important;
  }
}

@media print {
  /* No page needs a language control on a printed sheet -- .form-nav (the toggle's old home on
     21 of the 32 pages) was already hidden under print for the same reason. */
  .language-toggle { display: none !important; }
}