/* 
  Octarule Project
  Author: Keith (Arc.Keith)
  Created: July 2025
  License: Creative Commons Attribution 4.0 International (CC BY 4.0)
  https://creativecommons.org/licenses/by/4.0/
*/

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #111;
  color: #ddd;
  margin: 0;
}

main {
  all: unset;
  
  flex: 1;
  display: flex;
  flex-direction: column;
}

.page-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  box-sizing: border-box;
}


    .ruler {
      display: flex;
      width: 100%;
      max-width: 800px;
      height: 80px;
      border-top: 2px solid #999;
      background: #1e1e1e;
      box-shadow: 0 2px 8px #000;
      margin: 2rem 0 0.5rem;
      position: relative;
    }

    .ruler-scroll-wrapper {
      width: 100%;
      overflow-x: auto;
      margin: 1rem 0;
    }

    .ruler-long {
      display: flex;
      height: 80px;
      min-width: 3080px;
      border-top: 2px solid #999;
      background: #1e1e1e;
      box-shadow: 0 2px 8px #000;
      position: relative;
    }

    .tick {
      flex: 1;
      position: relative;
    }
    
    /* Only apply to long ruler ticks (24") */
#ruler-long .tick {
  width: 8px;
  flex: none;
}

    .tick.full::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      height: 50px;
      width: 2px;
      background: #997864;
    }

    .tick.half::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      height: 40px;
      width: 1.5px;
      background: #4acaff;
    }

    .tick.eighth::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      height: 29px;
      width: 1px;
      background: #bbb;
    }

    .tick.quarter::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      height: 36px;
      width: 1px;
      background: #aaa;
    }

    .tick.sixteenth::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      height: 20px;
      width: 1px;
      background: #666;
    }

    .tick span {
      position: absolute;
      top: 48px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.6rem;
      color: silver;
    }

    .tick.full span {
      top: 52px;
      font-size: 0.75rem;
      color: indianred;
    }

    .challenge {
      margin-top: 1rem;
      text-align: center;
    }

    #timerDisplay {
      font-size: 1.1rem;
      color: #ffd54f;
      margin-top: 0.5rem;
    }

    .marker {
      position: absolute;
      top: 0;
      height: 100%;
      width: 2px;
      background: lime;
      pointer-events: none;
    }

    #resultMessage {
      margin-top: 0.5rem;
      font-size: 1rem;
      color: #9df29d;
    }

    .tick {
      cursor: pointer;
      transition: background 0.15s;
    }

    .tick:hover::before {
      background: #00ffc3 !important;
      box-shadow: 0 0 5px #00ffc3;
    }
    #targetDisplay {
      font-size: 1.4rem;
      font-weight: bold;
      color: #488cde;
      font-family: 'Courier New', monospace; /* or any preferred font */
      margin-top: 0.75rem;
    }

    /*chart style*/

    

    .comparison-table {
      margin-top: 2rem;
      background: #1e1e1e;
      border-collapse: collapse;
      width: 100%;
      max-width: 600px;
    }
    .comparison-table th,
    .comparison-table td {
      border: 1px solid #444;
      padding: 0.4rem 0.6rem;
      text-align: center;
    }
    .comparison-table th {
      background-color: #222;
      color: #488cde;
    }
    .comparison-table tr:nth-child(even) td {
      background-color: #181818;
    }
    .comparison-table tr:nth-child(odd) td {
      background-color: #111;
    }

    .mirrora {
      color: #d22e20;
    }
    .mirrorc {
      color: goldenrod;
    }
    .mirrore {
      color: #488cde;
    }
    .mirrorg {
      color: palegreen;
    }