/* CONTRACT: The production submit form uses the same semantic color language as the
   report inbox: blue is primary/info, cyan is Bug, violet is Feature/account,
   amber is required attention, green is ready/success and red is error/removal. */
.submit-preview-page {
  --preview-bg: #080d11;
  --preview-panel: #10171c;
  --preview-panel-raised: #141d23;
  --preview-panel-soft: #0c1318;
  --preview-line: rgba(194, 215, 225, .12);
  --preview-line-strong: rgba(194, 215, 225, .22);
  --preview-text: #e8f0f3;
  --preview-muted: #8fa1ab;
  --preview-info: #68aaf8;
  --preview-bug: #3dd5e7;
  --preview-feature: #ac8cf7;
  --preview-success: #48d49b;
  --preview-attention: #f5bf4f;
  --preview-danger: #fb7185;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(800px 430px at 2% -8%, rgba(71, 137, 213, .14), transparent 70%),
    radial-gradient(680px 420px at 100% 20%, rgba(126, 87, 194, .09), transparent 66%),
    var(--preview-bg);
  color: var(--preview-text);
}
.submit-preview-page *,
.submit-preview-page *::before,
.submit-preview-page *::after { box-sizing: border-box; }
.submit-preview-page button,
.submit-preview-page input,
.submit-preview-page textarea { font: inherit; }
.submit-preview-page [hidden] { display: none !important; }
.submit-preview-page a { color: inherit; }

.submit-preview-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--preview-line);
  background: rgba(8, 13, 17, .86);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.submit-preview-topbar-inner,
.submit-preview-main {
  width: min(100% - 40px, 1240px);
  margin: 0 auto;
}
.submit-preview-topbar-inner {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.submit-preview-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--preview-text);
  font-weight: 780;
  letter-spacing: -.015em;
  text-decoration: none;
}
.submit-preview-brand .brand-mark { width: 23px; height: 23px; }
.submit-preview-actions,
.account-strip-actions,
.success-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.submit-preview-main { padding: 28px 0 60px; }

.preview-eyebrow {
  margin: 0;
  color: var(--preview-muted);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 780;
  line-height: 1.25;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.tone-success-text { color: #acf2d5; }
.preview-tag,
.preview-button,
.small-danger-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--preview-line-strong);
  text-decoration: none;
  white-space: nowrap;
}
.preview-tag {
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 760;
  line-height: 1.2;
}
.preview-button {
  min-height: 34px;
  border-radius: 8px;
  padding: 6px 10px;
  background: rgba(194, 215, 225, .055);
  color: #c8d5db;
  cursor: pointer;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.2;
  transition: border-color .15s, background .15s, transform .15s;
}
.preview-button:hover { transform: translateY(-1px); }
.button-neutral { border-color: var(--preview-line-strong); }
.button-neutral:hover { border-color: rgba(194, 215, 225, .38); background: rgba(194, 215, 225, .10); }
.button-info { border-color: rgba(104, 170, 248, .48); background: rgba(104, 170, 248, .14); color: #c8e0fd; }
.button-info:hover { border-color: rgba(104, 170, 248, .72); background: rgba(104, 170, 248, .20); }
.button-account { border-color: rgba(172, 140, 247, .46); background: rgba(172, 140, 247, .13); color: #ded1ff; }
.button-account:hover { border-color: rgba(172, 140, 247, .70); background: rgba(172, 140, 247, .19); }
.tone-neutral { border-color: rgba(194, 215, 225, .16); background: rgba(194, 215, 225, .055); color: #b9c7ce; }
.tone-account { border-color: rgba(172, 140, 247, .40); background: rgba(172, 140, 247, .105); color: #ded1ff; }
.tone-attention { border-color: rgba(245, 191, 79, .42); background: rgba(245, 191, 79, .10); color: #fde2a2; }
.tone-success { border-color: rgba(72, 212, 155, .38); background: rgba(72, 212, 155, .10); color: #acf2d5; }
.tone-danger { border-color: rgba(251, 113, 133, .42); background: rgba(251, 113, 133, .10); color: #fecdd5; }

.submit-form-column { display: grid; gap: 9px; }
.account-strip,
.account-login-card,
.submit-form-card,
.submit-success-card {
  border: 1px solid var(--preview-line);
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(17, 25, 30, .97), rgba(10, 16, 20, .97));
  box-shadow: 0 22px 55px -48px rgba(0, 0, 0, .95);
}
.account-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
}
/* CONTRACT: Linked-account status, identity and report-list note share one
   compact row, wrapping only when the viewport cannot fit them safely. */
.account-strip > div:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.account-strip > div:first-child small { color: var(--preview-muted); font-size: 10px; }
.account-strip > div:first-child strong { font-size: 12px; }
.account-login-card { overflow: hidden; }
.account-login-card {
  display: grid;
  grid-template-columns: minmax(210px, .7fr) minmax(0, 1.6fr);
  align-items: end;
}
.account-login-heading {
  /* CONTRACT: Keep the login title, explanation and Optional tag visually
     separated even in this intentionally compact row. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  padding: 9px 11px;
}
.account-login-heading > span:first-child { display: grid; gap: 5px; min-width: 0; }
.account-login-heading strong { display: block; font-size: 11px; line-height: 1.3; }
.account-login-heading small { display: block; color: var(--preview-muted); font-size: 9px; line-height: 1.35; }
.account-login-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  border-left: 1px solid var(--preview-line);
  padding: 8px 10px;
}
.account-login-form label { display: grid; gap: 4px; color: var(--preview-muted); font-size: 10px; font-weight: 720; }
.account-login-form input,
.preview-field input,
.preview-field textarea {
  width: 100%;
  border: 1px solid var(--preview-line-strong);
  border-radius: 8px;
  background: rgba(5, 9, 12, .70);
  color: var(--preview-text);
  outline: none;
}
.account-login-form input { min-height: 32px; padding: 5px 8px; font-size: 11px; }
.submit-form-card { padding: 14px; }
.form-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.form-card-header h2 { margin: 3px 0 0; font-size: 19px; }
.submit-preview-form { display: grid; gap: 8px; }
.form-section {
  border: 1px solid var(--preview-line);
  border-radius: 9px;
  background: rgba(5, 10, 13, .34);
  padding: 11px;
}
.form-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 9px;
}
.form-section-heading > span:first-child {
  flex: 0 0 auto;
  color: #b9d8fc;
  font: 760 9px/1.4 var(--mono);
}
.form-section-heading > div { min-width: 0; flex: 1; }
.form-section-heading h3 { margin: 0; font-size: 13px; }
.form-section-heading p { margin: 2px 0 0; color: var(--preview-muted); font-size: 10px; line-height: 1.35; }
.form-section-heading > .preview-tag { flex: 0 0 auto; }
/* CONTRACT: Section 01 uses available desktop width for one aligned row;
   stacking is reserved for viewports that cannot fit the controls cleanly. */
.report-type-section {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(500px, 1.28fr);
  align-items: center;
  gap: 14px;
}
.report-type-section > .form-section-heading { margin-bottom: 0; }
.preview-type-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  border: 0;
  padding: 0;
}
.preview-type-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 48px;
  border: 1px solid var(--preview-line-strong);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}
.preview-type-option input { width: 14px; height: 14px; margin: 0; }
.preview-type-option span { display: grid; gap: 1px; }
.preview-type-option strong { font-size: 12px; }
.preview-type-option small { color: var(--preview-muted); font-size: 9px; line-height: 1.3; }
.type-bug { border-color: rgba(61, 213, 231, .28); background: rgba(61, 213, 231, .055); }
.type-bug input { accent-color: var(--preview-bug); }
.type-bug:has(input:checked) { border-color: rgba(61, 213, 231, .72); background: rgba(61, 213, 231, .13); box-shadow: 0 0 0 3px rgba(61, 213, 231, .09); }
.type-feature { border-color: rgba(172, 140, 247, .28); background: rgba(172, 140, 247, .055); }
.type-feature input { accent-color: var(--preview-feature); }
.type-feature:has(input:checked) { border-color: rgba(172, 140, 247, .70); background: rgba(172, 140, 247, .13); box-shadow: 0 0 0 3px rgba(172, 140, 247, .09); }
.form-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.preview-field { display: grid; gap: 5px; color: var(--preview-text); font-size: 11px; font-weight: 720; }
.preview-field > span small { color: var(--preview-muted); font-weight: 500; }
.preview-field input { min-height: 34px; padding: 6px 9px; font-size: 12px; }
.preview-field textarea { min-height: 126px; padding: 8px 9px; font-size: 12px; line-height: 1.45; resize: vertical; }
.optional-issue-fields { display: grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 8px; }
.optional-issue-fields textarea { min-height: 82px; }
.account-login-form input:focus,
.preview-field input:focus,
.preview-field textarea:focus { border-color: rgba(104, 170, 248, .68); box-shadow: 0 0 0 3px rgba(104, 170, 248, .11); }

.preview-file-drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: 118px;
  align-content: center;
  border: 1px dashed rgba(245, 191, 79, .42);
  border-radius: 9px;
  background: rgba(245, 191, 79, .045);
  padding: 14px;
  text-align: center;
  cursor: pointer;
}
.preview-file-drop.is-drag-over { border-color: rgba(72, 212, 155, .74); background: rgba(72, 212, 155, .08); }
.preview-file-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.preview-file-drop .drop-icon { color: #fde2a2; font-size: 22px; line-height: 1; }
.preview-file-drop strong { color: #fde2a2; font-size: 12px; }
.preview-file-drop small { color: var(--preview-muted); font-size: 10px; }
.file-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; color: var(--preview-muted); font-size: 10px; }
.small-danger-button { min-height: 26px; border-radius: 7px; border-color: rgba(251, 113, 133, .34); background: rgba(251, 113, 133, .08); color: #fecdd5; padding: 4px 7px; cursor: pointer; font-size: 10px; }
.preview-file-list { display: grid; gap: 5px; margin: 7px 0 0; padding: 0; list-style: none; }
.preview-file-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; border: 1px solid var(--preview-line); border-radius: 8px; background: rgba(194, 215, 225, .035); padding: 7px 8px; }
.preview-file-list li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.preview-file-list small { color: var(--preview-muted); font-size: 10px; }
/* CONTRACT: A per-file Remove action matches the other compact file buttons
   and must not grow to the height of the attachment row it controls. */
.file-remove { align-self: center; height: 26px; min-height: 26px; }

.log-parse-panel {
  display: grid;
  gap: 9px;
  margin-top: 8px;
  border: 1px solid rgba(104, 170, 248, .34);
  border-radius: 9px;
  background: rgba(104, 170, 248, .055);
  padding: 10px;
}
.log-parse-panel[hidden],
.log-parse-groups[hidden],
.log-parse-warnings[hidden] { display: none; }
.log-parse-head { display: flex; align-items: flex-start; gap: 9px; }
.log-parse-head > div { min-width: 0; }
.log-parse-head strong { display: block; color: #c8e0fd; font-size: 11px; }
.log-parse-head p { margin: 2px 0 0; color: var(--preview-muted); font-size: 10px; line-height: 1.4; }
.log-parse-indicator { flex: 0 0 auto; width: 13px; height: 13px; margin-top: 2px; border: 2px solid rgba(104,170,248,.28); border-top-color: var(--preview-info); border-radius: 999px; }
.log-parse-panel.is-parsing .log-parse-indicator { animation: preview-log-spin .75s linear infinite; }
.log-parse-panel.is-valid { border-color: rgba(72,212,155,.38); background: rgba(72,212,155,.055); }
.log-parse-panel.is-valid .log-parse-indicator { border: 0; background: var(--preview-success); box-shadow: inset 0 0 0 4px rgba(8,20,15,.48); }
.log-parse-panel.is-valid .log-parse-head strong { color: #acf2d5; }
.log-parse-panel.is-invalid { border-color: rgba(251,113,133,.43); background: rgba(251,113,133,.065); }
.log-parse-panel.is-invalid .log-parse-indicator { border: 0; background: var(--preview-danger); box-shadow: inset 0 0 0 4px rgba(31,8,13,.48); }
.log-parse-panel.is-invalid .log-parse-head strong { color: #fecdd5; }
.log-parse-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.log-parse-group { border: 1px solid var(--preview-line); border-radius: 8px; background: rgba(3,8,11,.24); padding: 8px; }
.log-parse-group h4 { margin: 0 0 6px; color: var(--preview-muted); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.log-parse-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.log-parse-tag { display:inline-flex; align-items:center; min-height:22px; border:1px solid rgba(138,180,255,.34); border-radius:999px; background:rgba(138,180,255,.09); color:#dbeafe; padding:3px 7px; font-size:9px; font-weight:780; line-height:1.2; }
.log-parse-tag-flight { border-color:rgba(130,230,168,.40); background:rgba(130,230,168,.09); color:#c7f9d9; }
.log-parse-tag-navdata { border-color:rgba(250,204,21,.40); background:rgba(250,204,21,.09); color:#fef08a; }
.log-parse-tag-debug { border-color:rgba(196,181,253,.40); background:rgba(196,181,253,.09); color:#ede9fe; }
.log-parse-tag-traffic { border-color:rgba(57,213,216,.38); background:rgba(57,213,216,.08); color:#a5f3fc; }
.log-parse-tag-error { border-color:rgba(255,154,169,.46); background:rgba(255,154,169,.09); color:#ffd2d8; }
.log-parse-tag-derived { border-style:dashed; }
.log-parse-tag-unknown { border-style:dotted; opacity:.72; }
.log-parse-warnings { margin: 0; color: #f7dca3; font-size: 9px; line-height: 1.4; }
@keyframes preview-log-spin { to { transform: rotate(360deg); } }
.account-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(172, 140, 247, .26);
  border-radius: 8px;
  background: rgba(172, 140, 247, .055);
  padding: 9px 10px;
  cursor: pointer;
}
.account-choice > span { display: grid; gap: 2px; }
.account-choice strong { font-size: 11px; }
.account-choice small { color: var(--preview-muted); font-size: 9px; }
.account-choice input { width: 20px; height: 20px; accent-color: var(--preview-feature); }
.support-ack {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid rgba(245, 191, 79, .36);
  border-radius: 9px;
  background: rgba(245, 191, 79, .065);
  padding: 9px 10px;
  color: #f7dca3;
  font-size: 10px;
  line-height: 1.4;
}
.support-ack input { flex: 0 0 auto; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--preview-attention); }
.preview-client-errors { border: 1px solid rgba(251, 113, 133, .44); border-radius: 9px; background: rgba(251, 113, 133, .09); color: #fecdd5; padding: 9px 10px; font-size: 10px; }
.preview-client-errors p { margin: 0; }
.preview-client-errors p + p { margin-top: 4px; }
.submit-flash-error { margin-bottom: 9px; }
.upload-progress { display: grid; gap: 6px; border: 1px solid rgba(104, 170, 248, .20); border-radius: 9px; background: rgba(104, 170, 248, .05); padding: 9px; color: var(--preview-muted); font-size: 10px; }
.upload-progress > div { display: flex; align-items: center; justify-content: space-between; }
.upload-progress strong { color: #b9d8fc; }
.progress-track { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(194, 215, 225, .08); }
.progress-track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--preview-info), var(--preview-success)); }
.submit-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 2px; }
.submit-footer p { max-width: 520px; margin: 0; color: var(--preview-muted); font-size: 10px; line-height: 1.4; }
.submit-report-button { flex: 0 0 auto; min-width: 142px; }
.submit-report-button:disabled { cursor: not-allowed; opacity: .46; transform: none; }
.preview-hp { position: absolute; left: -9999px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.submit-success-card {
  width: min(100%, 780px);
  margin: 46px auto 0;
  padding: clamp(24px, 5vw, 42px);
  text-align: center;
}
.success-mark { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 999px; background: var(--preview-success); color: #071510; font-size: 22px; box-shadow: 0 0 0 8px rgba(72, 212, 155, .10); }
.submit-success-card h1 { max-width: 650px; margin: 7px auto 9px; font-size: clamp(27px, 4vw, 40px); line-height: 1.04; letter-spacing: -.04em; }
.submit-success-card > p:not(.preview-eyebrow) { max-width: 610px; margin: 0 auto; color: var(--preview-muted); }
.success-account-note { display: grid; gap: 3px; max-width: 620px; margin: 20px auto 0; border: 1px solid rgba(172, 140, 247, .34); border-radius: 9px; background: rgba(172, 140, 247, .075); padding: 11px; }
.success-account-note strong { color: #ded1ff; font-size: 12px; }
.success-account-note span { color: var(--preview-muted); font-size: 10px; }
.success-actions { justify-content: center; margin-top: 18px; }

@media (max-width: 930px) {
  .account-login-card { grid-template-columns: 1fr; }
  .account-login-form { border-top: 1px solid var(--preview-line); border-left: 0; }
}
@media (max-width: 780px) {
  .report-type-section { grid-template-columns: 1fr; }
  .report-type-section > .form-section-heading { margin-bottom: 2px; }
}
@media (max-width: 650px) {
  .submit-preview-topbar-inner { align-items: flex-start; flex-direction: column; padding: 10px 0; }
  .submit-preview-actions { width: 100%; }
  .submit-preview-main { padding-top: 18px; }
  .form-field-grid,
  .preview-type-toggle,
  .account-login-form,
  .optional-issue-fields,
  .log-parse-groups { grid-template-columns: 1fr; }
  .account-strip,
  .form-card-header,
  .submit-footer { align-items: flex-start; flex-direction: column; }
  .submit-report-button { width: 100%; }
  .preview-file-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .preview-file-list small { grid-column: 1; grid-row: 2; }
  .preview-file-list button { grid-column: 2; grid-row: 1 / span 2; }
}