/* /kairos_int/public_html/dev-chronos/public/css/style-v3.css */

/* ============================================================
   SECTION 1 — TOKENS
   All raw hex values and base measurements live here only.
   Rule bodies reference var() exclusively — never raw values.
   ============================================================ */

:root {
  /* Colour palette */
  --teal:    #008080;
  --blue:    #000099;
  --text:    #464646;
  --error:   #cc0000;
  --success: #3b693b;
  --muted:   #999999;
  --page-bg: #f1f2f4;
  --white:   #ffffff;
  --border:  #c3c4c5;

  /* Typography */
  --font-family:   'Open Sans', sans-serif;
  --font-xs:       0.75rem;   /* 12px */
  --font-sm:       0.875rem;  /* 14px */
  --font-base:     1rem;      /* 16px */
  --font-md:       1.125rem;  /* 18px */
  --font-lg:       1.25rem;   /* 20px */
  --font-xl:       1.5rem;    /* 24px */
  --font-xxl:      2rem;      /* 32px */

  /* Spacing scale */
  --space-xs:      0.25rem;   /* 4px  */
  --space-sm:      0.5rem;    /* 8px  */
  --space-md:      1rem;      /* 16px */
  --space-lg:      1.5rem;    /* 24px */
  --space-xl:      2rem;      /* 32px */
  --space-xxl:     3rem;      /* 48px */

  /* Indentation — survey reading rhythm */
  --indent-group:    1.5rem;
  --indent-question: 3rem;
  --indent-answer:   4rem;
  --indent-comment:  5rem;
}


/* ============================================================
   SECTION 2 — SHARED COMPONENTS
   Page chrome used across all areas: body, layout, footer,
   buttons, and status messages.
   ============================================================ */

body {
  font-family: var(--font-family);
  font-size:   var(--font-base);
  background:  var(--page-bg);
  color:       var(--text);
  padding-top: var(--space-xl);
  margin:      0;
}

/* Page layout */
#wrap {
  min-height: 100%;
  height:     auto;
  margin:     0 auto -60px;
  padding:    0 0 60px;
}

/* Footer */
#footer {
  height:           60px;
  background:       #e8e9eb;    /* shared chrome — not a survey colour */
  border-top:       1px solid var(--border);
  text-align:       center;
  padding:          var(--space-md) 0 0 0;
  font-size:        var(--font-xs);
  font-weight:      600;
  color:            var(--text);
}

/* Buttons */
input.btnSave {
  background:    var(--text);
  color:         var(--white);
  border-radius: 5px;
  border:        none;
  padding:       var(--space-xs) var(--space-md);
  cursor:        pointer;
  font-size:     var(--font-sm);
  font-family:   var(--font-family);
  margin:        0 var(--space-xs);
}

input.btnSave:hover {
  background: var(--blue);
}

/* Status messages */
.msg-error {
  color:       var(--error);
  font-size:   var(--font-base);
  font-weight: 600;
  padding:     var(--space-sm) 0;
}

.msg-success {
  color:       var(--success);
  font-size:   var(--font-base);
  font-weight: 600;
  padding:     var(--space-sm) 0;
}

/* JS-toggled visibility — shown via .show() / .hide() */
.is-hidden {
  display: none;
}


/* ============================================================
   SECTION 3 — SURVEY  (.survey)
   All rules scoped to .survey wrapper.
   Semantic tokens defined here reference Section 1 tokens.
   Client accent colour may be set at runtime on .survey via
   PHP: style="--client-accent: #hexvalue"
   Fallback is always --teal.
   ============================================================ */

.survey {
  /* Semantic tokens — survey scope */
  --survey-title-color:     var(--teal);
  --survey-title-size:      var(--font-xl);

  --survey-intro-color:     var(--text);
  --survey-intro-size:      var(--font-base);

  --survey-group-color:     var(--blue);
  --survey-group-size:      var(--font-lg);
  --survey-group-weight:    600;

  --survey-q-intro-color:   var(--blue);
  --survey-q-intro-size:    var(--font-lg);
  --survey-q-intro-weight:  600;

  --survey-question-color:  var(--teal);
  --survey-question-size:   var(--font-base);
  --survey-question-weight: 300;

  --survey-answer-color:    var(--text);
  --survey-answer-size:     var(--font-base);
  --survey-answer-weight:   300;

  --survey-comment-color:   var(--teal);
  --survey-comment-size:    var(--font-base);
  --survey-comment-weight:  300;

  --survey-thankyou-color:  var(--white);
  --survey-thankyou-bg:     var(--success);
  --survey-thankyou-size:   var(--font-sm);
}

/* -- Survey Title ------------------------------------------ */

.survey .survey-title {
  font-size:   var(--survey-title-size);
  color:       var(--survey-title-color);
  font-weight: 700;
  width:       70%;
  display:     inline-block;
}

/* -- Survey Intro ------------------------------------------ */

.survey .survey-intro {
  font-size:    var(--survey-intro-size);
  color:        var(--survey-intro-color);
  text-align:   left;
  width:        65%;
  padding:      var(--space-md) 0 var(--space-md) var(--indent-group);
}

/* -- Header band (title + logo row) ------------------------ */

.survey .survey-header-band {
  background:    var(--page-bg);
  padding:       var(--space-md) var(--space-md);
  border-bottom: 1px solid var(--border);
  display:       flex;
  align-items:   center;
  justify-content: space-between;
}

/* -- Question area container ------------------------------- */

.survey .survey-body {
  background:   var(--white);
  padding:      var(--space-xl);
  border-top:   1px solid var(--border);
}

/* -- Group Label ------------------------------------------- */

.survey .group-label {
  display:     block;
  font-size:   var(--survey-group-size);
  font-weight: var(--survey-group-weight);
  color:       var(--survey-group-color);
  text-align:  left;
  padding:     var(--space-md) 0 var(--space-sm) var(--indent-group);
}

/* -- Group Separator --------------------------------------- */

.survey .group-separator {
  border:     none;
  border-top: 1px solid var(--text);
  margin:     var(--space-md) 0;
}

/* -- Question block ---------------------------------------- */

.survey .question-block {
  margin-bottom: var(--space-lg);
}

/* -- Question Intro ---------------------------------------- */

.survey .question-intro {
  display:     block;
  font-size:   var(--survey-q-intro-size);
  font-weight: var(--survey-q-intro-weight);
  color:       var(--survey-q-intro-color);
  text-align:  left;
  padding:     0 0 var(--space-md) var(--indent-question);
}

/* -- Question Text ----------------------------------------- */

.survey .question-text {
  display:     block;
  font-size:   var(--survey-question-size);
  font-weight: var(--survey-question-weight);
  color:       var(--survey-question-color);
  text-align:  left;
  padding:     0 0 var(--space-md) var(--indent-question);
}

.survey .question-text.has-error {
  color: var(--error);
}

/* -- Compulsory Indicator ---------------------------------- */

.survey .compulsory-indicator {
  color:       var(--error);
  font-weight: 700;
  margin-left: var(--space-xs);
}

/* -- Answer — Free Text (textarea) ------------------------- */

.survey .answer-freetext {
  display:       block;
  width:         95%;
  height:        6rem;
  margin-left:   var(--indent-answer);
  margin-bottom: var(--space-lg);
  padding:       var(--space-sm);
  font-family:   var(--font-family);
  font-size:     var(--survey-answer-size);
  color:         var(--text);
  border:        1px solid var(--border);
  background:    var(--white);
  box-sizing:    border-box;
}

.survey .answer-freetext:focus {
  outline:      none;
  border-color: var(--teal);
}

/* -- Answer — Single Choice (radio buttons) ---------------- */

.survey .answer-choices {
  padding-left: var(--indent-answer);
}

/* -- Answer — Single Choice (radio buttons) ---------------- */

.survey .answer-choice-item-radio {
  display:      inline-flex;
  align-items:  center;
  font-size:    var(--survey-answer-size);
  font-weight:  var(--survey-answer-weight);
  color:        var(--survey-answer-color);
  margin:       var(--space-sm) var(--space-md) var(--space-sm) 0;
}

.survey .answer-choice-item-radio input[type="radio"] {
  margin-right: var(--space-sm);
}

/* -- Answer — Multiple Choice (checkboxes) ----------------- */

.survey .answer-choice-item-checkbox {
  display:      block;
  align-items:  center;
  font-size:    var(--survey-answer-size);
  font-weight:  var(--survey-answer-weight);
  color:        var(--survey-answer-color);
  margin:       var(--space-sm) 0;
}

.survey .answer-choice-item-checkbox input[type="checkbox"] {
  margin-right: var(--space-sm);
}

/* -- Answer — Other (text input alongside option) ---------- */

.survey .answer-other-input {
  font-family: var(--font-family);
  font-size:   var(--survey-answer-size);
  color:       var(--text);
  border:      1px solid var(--border);
  padding:     var(--space-xs) var(--space-sm);
  margin-left: var(--space-sm);
  width:       10rem;
}

.survey .answer-other-input:focus {
  outline:      none;
  border-color: var(--teal);
}

/* -- Comment Label ----------------------------------------- */

.survey .comment-label {
  display:     block;
  font-size:   var(--survey-comment-size);
  font-weight: var(--survey-comment-weight);
  color:       var(--survey-comment-color);
  text-align:  left;
  padding:     0 0 var(--space-sm) var(--indent-comment);
  clear:       left;
}

/* -- Comment — Free Text (textarea) ------------------------ */

.survey .comment-freetext {
  display:       block;
  width:         50%;
  height:        6rem;
  margin-left:   var(--indent-comment);
  margin-bottom: var(--space-lg);
  padding:       var(--space-sm);
  font-family:   var(--font-family);
  font-size:     var(--survey-answer-size);
  color:         var(--text);
  border:        1px solid var(--border);
  background:    var(--white);
  box-sizing:    border-box;
}

.survey .comment-freetext:focus {
  outline:      none;
  border-color: var(--teal);
}

/* -- Submit Button ----------------------------------------- */

.survey .survey-submit-area {
  width:      100%;
  text-align: center;
  padding:    var(--space-xl) 0;
  clear:      both;
}

/* Submit button inherits shared input.btnSave — no override needed */

/* -- Thank You Text ---------------------------------------- */

.survey .survey-thank-you {
  display:       inline-block;
  font-size:     var(--survey-thankyou-size);
  color:         var(--survey-thankyou-color);
  background:    var(--survey-thankyou-bg);
  padding:       var(--space-xs) var(--space-md);
  border-radius: 7px;
  margin-top:    var(--space-md);
}

/* -- Compulsory Fields Note -------------------------------- */

.survey .compulsory-note {
  display:    block;
  color:      var(--error);
  font-size:  var(--font-sm);
  margin-top: var(--space-md);
}

/* -- Autosave feedback (live mode only) -------------------- */

.survey .autosave-feedback {
  display:    none;   /* shown via JS when save fires */
  color:      var(--blue);
  width:      45%;
  text-align: left;
  padding:    var(--space-sm) 0;
}

/* -- Signup Form ------------------------------------------- */
/*
 * Desktop: form indented ~one third from left; labels right-aligned.
 * Label 25% right-aligned, gap via padding-right, field 55%.
 * Single-column on mobile via responsive block below.
 * Scoped under .survey — used by survey-signup.php only.
 */

.survey .signup-form {
  width:       65%;
  margin-left: 25%;
}

.survey .signup-form-row {
  display:       flex;
  align-items:   flex-start;
  padding:       var(--space-sm) 0;
  border-bottom: 1px solid var(--page-bg);
}

.survey .signup-form-label {
  width:         25%;
  flex-shrink:   0;
  font-size:     var(--font-sm);
  font-weight:   600;
  color:         var(--text);
  text-align:    right;
  padding-right: var(--space-lg);
  padding-top:   var(--space-xs);
}

.survey .signup-field-text,
.survey .signup-field-select {
  width:       55%;
  font-family: var(--font-family);
  font-size:   var(--font-sm);
  color:       var(--text);
  border:      1px solid var(--border);
  padding:     var(--space-xs) var(--space-sm);
  background:  var(--white);
  box-sizing:  border-box;
}

.survey .signup-field-text:focus,
.survey .signup-field-select:focus {
  outline:      none;
  border-color: var(--teal);
}

.survey .signup-field-textarea {
  width:       70%;
  height:      6rem;
  font-family: var(--font-family);
  font-size:   var(--font-sm);
  color:       var(--text);
  border:      1px solid var(--border);
  padding:     var(--space-xs) var(--space-sm);
  background:  var(--white);
  resize:      vertical;
  box-sizing:  border-box;
}

.survey .signup-field-textarea:focus {
  outline:      none;
  border-color: var(--teal);
}

.survey .signup-submit-area {
  width:      100%;
  text-align: center;
  padding:    var(--space-xl) 0;
}

/* -- Responsive overrides for .survey --------------------- */

@media (max-width: 767px) {
  .survey .survey-title {
    font-size: var(--font-md);
    width:     100%;
  }

  .survey .survey-header-band {
    flex-direction: column;
    align-items:    flex-start;
  }

  .survey .survey-intro {
    width: 100%;
  }

  .survey .survey-intro {
    width:        100%;
    padding-left: var(--space-md);
  }

  .survey .question-intro,
  .survey .question-text {
    padding-left: var(--space-md);
  }

  .survey .answer-choices {
    padding-left: var(--space-md);
  }

  .survey .answer-freetext,
  .survey .comment-freetext {
    width:       100%;
    margin-left: 0;
  }

  .survey .comment-label {
    padding-left: var(--space-md);
  }

  .survey .signup-form-row {
    flex-direction: column;
  }

  .survey .signup-form {
    width:       100%;
    margin-left: 0;
  }

  .survey .signup-form-label {
    width:         100%;
    text-align:    left;
    padding-right: 0;
    margin-bottom: var(--space-xs);
  }

  .survey .signup-field-text,
  .survey .signup-field-select,
  .survey .signup-field-textarea {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 999px) {
  .survey .survey-title {
    font-size: var(--font-lg);
  }

  .survey .answer-freetext,
  .survey .comment-freetext {
    width: 80%;
  }

  .survey .signup-field-text,
  .survey .signup-field-select,
  .survey .signup-field-textarea {
    width: 70%;
  }
}