/*
 * Phase 7A production-parity layer.
 *
 * The byte-preserved main.css remains the visual baseline. This stylesheet
 * self-hosts the two historical interface families and adds focus treatment
 * without changing the established desktop geometry, palette, or controls.
 */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/open-sans-v44-greek-wght-normal.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C,
    U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/open-sans-v44-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Droid Sans Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/droid-sans-mono-v21-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --cf-focus: #0459b7;
  --cf-ui-font: "Open Sans", sans-serif;
  --cf-mono-font: "Droid Sans Mono", monospace;
}

html,
body {
  min-width: 1180px;
  color: #000000;
  background: #cccccc;
  font-family: var(--cf-ui-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#header h1 {
  color: #000000;
  font-family: var(--cf-ui-font);
  font-size: 32px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: normal;
}

#datatable,
.datatable,
input[type="text"],
input[type="password"],
#prevmessage > div {
  font-family: var(--cf-mono-font);
}

.resetbutton,
.csvbutton,
.sesbutton,
.addrembutton,
.feedback-button,
select {
  font-family: var(--cf-ui-font);
}

.resetbutton:focus-visible,
.csvbutton:focus-visible,
.sesbutton:focus-visible,
.addrembutton:focus-visible,
.feedback-button:focus-visible,
.feedback-dialog-close:focus-visible,
.toggle-btn:focus-within {
  outline: 3px solid rgba(4, 89, 183, 0.28);
  outline-offset: 1px;
}

select:focus-visible,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
input[type="submit"]:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(4, 89, 183, 0.28);
  outline-offset: 1px;
}

#feedback-notice[hidden] {
  display: none;
}

/* Temporary feedback call to action in the header while the feedback route
   is open. It is a .resetbutton like TEMPLATE and HELP; only the background,
   border and text color differ (the Fit! button's blue). The legacy header
   floats each button from the right edge, so the 190px margin places it one
   button width plus the same 8px gap left of TEMPLATE (90px + 92px + 8px). */
.feedback-cta {
  margin-right: 0;
  /* The float's box spans its 190px margin and would otherwise sit on top
     of TEMPLATE and HELP; only the button itself may take clicks. */
  pointer-events: none;
}

.feedback-cta-button {
  box-sizing: content-box;
  width: 88px;
  height: 22px;
  padding: 0;
  margin: -6px 190px 0 0;
  vertical-align: top;
  font: inherit;
  font-size: 15px;
  font-weight: bold;
  line-height: 22px;
  color: #ffffff;
  border: 2px solid #093c75;
  background: #0459b7;
  background: linear-gradient(#08adff, #0459b7);
  text-shadow: none;
  cursor: pointer;
  pointer-events: auto;
}

.feedback-cta-button:hover,
.feedback-cta-button:focus-visible {
  color: #ffffff;
  background: #067cd3;
  background: linear-gradient(#0bcdff, #067cd3);
}

.cf-grid td.cf-uncertainty-inactive {
  background-color: #ededed;
  color: #666666;
}

.cf-grid th.cf-uncertainty-inactive {
  background-color: #e2e2e2;
  color: #666666;
  cursor: help;
}

#version-footer {
  clear: both;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 3px 10px 4px;
  background: #ccc;
  font-size: 12px;
  line-height: 1.4;
}

.feedback-banner {
  flex: 1;
  color: #4a4a4a;
  text-align: left;
}

.feedback-banner[hidden] {
  display: none;
}

#version-footer a {
  margin-left: auto;
  white-space: nowrap;
}

#version-footer a {
  color: #4a4a4a;
  text-decoration: none;
}

#version-footer a:hover,
#version-footer a:focus-visible {
  text-decoration: underline;
}

.feedback-button {
  box-sizing: border-box;
  min-height: 28px;
  padding: 3px 12px;
  border: 1px solid #999999;
  background: linear-gradient(#f7f7f7, #dfdfdf);
  color: #333333;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
}

.feedback-button:hover:not(:disabled) {
  border-color: #6f9ca2;
  background: #f1fdfe;
}

.feedback-button:disabled {
  cursor: wait;
  opacity: 0.62;
}

#feedback-dialog {
  box-sizing: border-box;
  width: 560px;
  max-width: calc(100vw - 48px);
  padding: 30px 40px 32px;
  border: 0;
  background: #eeeeee;
  color: #000000;
  font-family: var(--cf-ui-font);
  font-size: 14px;
}

#feedback-dialog::backdrop {
  background: rgba(0, 0, 0, 0.78);
}

#feedback-dialog h2 {
  margin: 0 0 12px;
  font-size: 26px;
}

#feedback-description {
  margin: 0 0 18px;
  line-height: 1.45;
}

.feedback-dialog-close {
  position: absolute;
  top: 8px;
  right: 11px;
  padding: 3px 6px;
  border: 0;
  background: transparent;
  color: #777777;
  cursor: pointer;
  font-size: 26px;
  font-weight: bold;
  line-height: 1;
}

.feedback-field {
  margin: 0 0 14px;
}

.feedback-field label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

.feedback-field select,
.feedback-field textarea,
.feedback-field input[type="email"] {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid #999999;
  background: #ffffff;
  color: #000000;
  font: inherit;
}

.feedback-field textarea {
  display: block;
  resize: vertical;
}

.feedback-message-count {
  display: block;
  margin-top: 3px;
  color: #666666;
  font-size: 12px;
  text-align: right;
}

.feedback-optional,
.feedback-safety-note {
  color: #666666;
  font-weight: normal;
}

.feedback-session-option {
  margin: 3px 0 13px;
}

.feedback-session-option input {
  margin: 0 5px 0 0;
}

.feedback-safety-note {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.4;
}

.feedback-honeypot {
  position: fixed;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.feedback-status {
  min-height: 20px;
  margin: 0 0 10px;
  color: #333333;
  font-weight: 600;
}

.feedback-status[data-state="success"] {
  color: #166534;
}

.feedback-status[data-state="error"] {
  color: #8b1a1a;
}

.feedback-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.feedback-button-secondary {
  background: #eeeeee;
  font-weight: normal;
}

#curvefit-workspace,
.cf-loading-host {
  position: relative;
}

.cf-boot-content {
  opacity: 1;
  transition: opacity 0.15s ease;
}

html.cf-booting .cf-boot-content,
html.cf-load-failed .cf-boot-content {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

#curvefit-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

#curvefit-loading-error {
  display: none;
  position: absolute;
  top: 150px;
  left: 210px;
  width: 696px;
  padding: 34px 30px;
  border: 3px solid #444;
  background: #fff;
  text-align: center;
  pointer-events: auto;
}

#curvefit-loading-error h2 {
  margin: 0 0 14px;
  font-size: 24px;
}

#curvefit-loading-error p {
  margin: 0 auto 18px;
  max-width: 570px;
  line-height: 1.5;
}

html.cf-load-failed #curvefit-loading-error {
  display: block;
}

.cf-panel-skeleton {
  position: absolute;
  z-index: 3;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

html.cf-booting .cf-panel-skeleton {
  visibility: visible;
  opacity: 1;
}

html.cf-load-failed .cf-panel-skeleton {
  visibility: visible;
  opacity: 0.46;
}

.cf-panel-skeleton::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -54%;
  z-index: 5;
  width: 48%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), transparent);
  animation: cf-skeleton-shimmer 1.35s ease-in-out infinite;
}

html.cf-load-failed .cf-panel-skeleton::after {
  animation: none;
}

.cf-data-skeleton {
  top: 4px;
  left: 4px;
  width: 430px;
  height: 605px;
  border: 2px solid #cbcbcb;
  background: #dedede;
}

.cf-plot-skeleton {
  inset: 0 auto auto 0;
  width: 724px;
  height: 275px;
  background: #dedede;
}

.cf-controls-skeleton {
  top: 6px;
  left: 6px;
  width: 716px;
  height: 300px;
  background:
    repeating-linear-gradient(
      to bottom,
      #0000 0,
      #0000 15px,
      #dedede 15px,
      #dedede 35px,
      #0000 35px,
      #0000 46px
    ) 56px 25px / 235px 225px no-repeat,
    repeating-linear-gradient(
      to bottom,
      #0000 0,
      #0000 15px,
      #dedede 15px,
      #dedede 35px,
      #0000 35px,
      #0000 46px
    ) 385px 25px / 285px 225px no-repeat,
    linear-gradient(to right, #f0f0f0 47.7%, #ddd 47.7%, #ddd 48.1%, #f0f0f0 48.1%);
}

.cf-footer-skeleton {
  inset: 5px 10px auto;
  height: 24px;
  background:
    linear-gradient(#dedede 0 0) left center / 82px 19px no-repeat,
    linear-gradient(#dedede 0 0) right center / 210px 19px no-repeat,
    #ccc;
}

@keyframes cf-skeleton-shimmer {
  to {
    transform: translateX(330%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .cf-panel-skeleton::after {
    animation: none !important;
  }
}