/* =========================================================
   GOOGLE + TECH HYBRID THEME
   ========================================================= */

/* =========================================================
   Base & Layout
   ========================================================= */
   html, body {
    height: 100%;
    margin: 0;
    background: #ffffff; /* light Google-style canvas */
    font-family: "Google Sans", Roboto, Arial, sans-serif;
    color: #202124;       /* default text color */
    -webkit-text-size-adjust: 100%; /* prevent iOS zoom scaling */
  }
  
  body {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 0;
  }

  
  .page-gutter {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
  }
  
  .app {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* ensures textarea can stretch */
  }
  
  .title-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .title-logo {
    height: 28px;       /* scale here */
    width: auto;        /* preserve aspect ratio */
    flex-shrink: 0;     /* prevent shrinking */
  }
  
  .min-wage-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
  
  .min-wage-inputs-wrapper {
    display: inline-block;
    white-space: nowrap;   /* critical part: keep the whole group together */
  }
  
  .min-wage-inputs {
    display: inline-flex;
    gap: 12px;
    align-items: center;
  }
  
  
  /* =========================================================
     Typography
     ========================================================= */
     
  .title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 600;
    margin: 10px 0 10px;
    font-size: clamp(24px, 5vw, 34px);
    color: #000000;
    letter-spacing: 0.4px;
  }
  
  .text-with-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: 570px;
    margin: 10px 0 10px;
  }
  
  .text {
    margin: 0;
    font-weight: 300;
    font-size: clamp(14px, 4.5vw, 16px);
    color: #000000;
    line-height: 1.4;
    letter-spacing: 0.3px;
    flex: 1 1 auto;
    min-width: 0;
  }
  
  .link {
    font-weight: 300;
    font-size: clamp(14px, 4.5vw, 16px);
    color: #1a73e8;
    text-decoration: underline;
    text-underline-offset: 2px;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
  }
  
  .link:hover {
    text-decoration-thickness: 2px;
  }
  
  .worker-key {
    color: #000000;
    font-family: "Fira Code", monospace;
    font-size: clamp(13px, 1.5vw, 14px);
  }
  
  .worker-key-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  
  
  /* Generic worker-value for payment / origins */
  .worker-value {
    color: #1a73e8;
    font-family: "Fira Code", monospace;
    font-size: clamp(13px, 1.5vw, 14px);
    background: transparent;
    border: none;
    padding: 0;
    display: inline;   /* use inline so it stays with the label */
    width: 42ch;       /* allow it to shrink/grow naturally */
    box-sizing: content-box;
    outline: none;
  }
  
  /* Minimum wage inputs */
  .mw-input {
    color: #808080;              /* grey default */
    font-family: "Fira Code", monospace;
    font-size: clamp(12px, 1.5vw, 14px);
    background: transparent;      /* no box */
    border: none;
    padding: 0;
    display: inline-block;
    width: 8ch;                 /* fixed width for numbers */
    box-sizing: content-box;
    outline: none;
    text-align: left;
    transition: color 0.15s ease;
  }
  
  .mw-input:focus,
  .mw-input:not(:placeholder-shown) {
    color: #1a73e8;              /* google blue when user types */
  }
  
  .short-field {
    width: 5ch;   /* safer if you ever allow double digits like 16, 32, etc. */
  }
  
  
  .worker-section-title {
    color: #444444;   /* slightly lighter than #808080 */
    letter-spacing: 0.4px;
  }
  
  /* =========================
   Button – Google Outlined
   ========================= */

   .button-row {
    display: flex;
    width: 100%;
  }
  
  .crosshair-btn {
    height: 30px;
    width: 180px;
    margin: 30px 30px 30px;
    padding: 0;
    background: #ffffff;
    color: #1a73e8;                 /* Google blue */
    border: 1px solid #8ab4f8;      /* medium light blue contour */
    border-radius: 4px;             /* slightly rounded rectangle */
    font-family: "Google Sans", Roboto, Arial, sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.25px;
    cursor: pointer;
    transition:
      background 0.2s ease,
      box-shadow 0.2s ease,
      border-color 0.2s ease;
  }
  
  /* Hover – very subtle blue tint */
  .crosshair-btn:hover {
    background: #f1f3f4;
    border-color: #1a73e8;
  }
  
  /* Active – slightly stronger surface tint */
  .crosshair-btn:active {
    background: #e8f0fe;
  }
  
  /* Focus ring (important for Google feel) */
  .crosshair-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(26,115,232,0.3);
  }
  
    
  
  /* =========================================================
     Textarea / Console
     ========================================================= */
  .textarea-wrap {
    flex: 1;
    display: flex;
    min-height: 0;
    padding-top: 10px;
  }
  
  .textarea-wrap textarea {
    flex: 1;
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding: 10px;
    background-color: #ffffff;
    color: #1a73e8;
    border: 1px solid #8ab4f8;
    font-family: "Fira Code", monospace;
    font-size: clamp(12px, 1.5vw, 14px);
    line-height: 1;
    white-space: pre;
    resize: vertical;
    overflow-y: auto;
  }
  
  /* =========================================================
     Mobile refinements
     ========================================================= */
  @media (max-width: 600px) {
    .text-with-link {
      max-width: 100%;
    }
  
    .title,
    .text {
      letter-spacing: 0.2px;
    }
  
    .hide-on-mobile {
      display: none;
    }
  }
  
  /* =========================================================
     iOS Safari form normalization & zoom prevention
     ========================================================= */
  
  /* Reset appearance for inputs, textareas, selects, buttons */
  input,
  textarea,
  select,
  button {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    background-image: none;
    font-family: "Fira Code", monospace;
    line-height: 1.2;
  }
  
  /* Force minimum font-size 16px on iOS to prevent auto-zoom */
  input,
  textarea,
  select {
    font-size: 16px;
    -webkit-text-size-adjust: 100%; /* prevent iOS text scaling */
  }
  
  /* Remove inner shadows on iOS Safari */
  input {
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  
  /* Ensure custom radios render correctly */
  .radio-option input {
    -webkit-appearance: none;
    appearance: none;
  }
  
  /* Optional: prevent zooming on orientation change or pinch-zoom */
  html {
    -webkit-text-size-adjust: 100%; /* prevents iOS zooming on focus */
  }
     
  
  
  /* ============================================
     Radio button color control
     ============================================ */
     .radio-option {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      font-family: "Fira Code", monospace;
      font-size: clamp(12px, 1.5vw, 14px);
    }
    
    /* hide native radio */
    .radio-option input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    
    /* radio shell */
    .custom-radio {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 1.5px solid #555;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
    }
    
    /* inner dot */
    .custom-radio::after {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #6ec495;
      opacity: 0;
      transform: scale(0.5);
      transition: all 0.15s ease;
    }
    
    /* checked */
    .radio-option input:checked + .custom-radio {
      border-color: #1a73e8;
    }
    
    .radio-option input:checked + .custom-radio::after {
      opacity: 1;
      transform: scale(1);
    }
    
    /* label colors */
    .radio-label {
      color: #808080;
    }
    
    .radio-option input:checked ~ .radio-label {
      color: #1a73e8;
    }
    
    /* hover */
    .radio-option:hover .radio-label {
      color: #8ab4f8;
    }
    
    .custom-radio {
      width: 10px;
      height: 10px;
    }
    
    .custom-radio::after {
      width: 5px;
      height: 5px;
    }


   /* =========================================================
   Full Background Parallax Layer (Behind Everything)
   ========================================================= */

   body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("google-background-image.png");
    background-size: clamp(700px, 70vw, 1400px) auto;
    background-position: top 100px right;
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: -1;
    pointer-events: none;
  }