/*
 Description:    Style for Motorcycle Tire Dimension Sim Tools page(s)
*/

/* --- CSS (kept to 680px layout) --- */
/* Layout */
    body{margin:0;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#f6f7fb;color:#0f172a}
    .wrap{max-width:1000px;margin:0 auto;padding:16px}
    h1{margin:0 0 8px}
    .subhead{color:#475569;margin:0 0 12px;font-size:13px}

    /* Panels & controls */
    .panel{background:#fff;border:1px solid #cbd5e1;border-radius:12px;padding:12px;margin-top:12px}
    
    /* Enhanced input panel styling - matches comparison metrics */
    .panel:first-of-type {
        background:linear-gradient(180deg,#ffffff, #fbfdff);
        border:1px solid #e6eef6;
        border-radius:12px;
        box-shadow:0 8px 25px rgba(15,23,42,0.08);
        padding:20px;
        margin-top:12px;
    }
    
    .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
    
    /* Motorcycle section headers */
    .grid-2 > div > h3 {
        font-size:18px;
        font-weight:600;
        color:#334155;
        margin:0 0 16px;
        padding:10px 16px;
        background:#f1f5f9;
        border-radius:8px;
        border-left:4px solid #3b82f6;
        display:flex;
        align-items:center;
        gap:12px;
    }
    
    /* Motorcycle 2 header with different accent color */
    .grid-2 > div:nth-child(2) > h3 {
        border-left:4px solid #a855f7;
    }
    
    .field{display:grid;gap:6px;margin-bottom:12px;padding:0}
    
    /* Enhanced field styling */
    .field {
        background:#ffffff;
        border:1px solid #e2e8f0;
        border-radius:8px;
        padding:12px;
        transition:all 0.2s ease;
    }
    .field:hover {
        border-color:#cbd5e1;
        box-shadow:0 2px 8px rgba(0,0,0,0.04);
    }
    .field:focus-within {
        border-color:#3b82f6;
        box-shadow:0 0 0 3px rgba(59,130,246,0.1);
    }
    
    label{font-weight:600;font-size:13px;color:#374151;margin-bottom:4px}
    label small {
        font-weight:400;
        color:#64748b;
        font-size:11px;
    }
    
    input, select{
        padding:8px 12px;
        border:1px solid #d1d5db;
        border-radius:6px;
        font-size:14px;
        transition:all 0.2s ease;
        background:#ffffff;
    }
    input:focus, select:focus {
        outline:none;
        border-color:#3b82f6;
        box-shadow:0 0 0 3px rgba(59,130,246,0.1);
    }
    input::placeholder {
        color:#9ca3af;
        font-size:13px;
    }
    
    /* Tire section styling */
    .tire-section {
        margin-top:16px;
        padding:12px;
        background:#f8fafc;
        border:1px solid #e2e8f0;
        border-radius:8px;
    }
    .tire-section h4 {
        margin:0 0 12px;
        font-size:1em;
        font-weight:500;
        color:#374151;
    }

/* Motorcycle section styling */
.motorcycle-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.motorcycle-section h3 {
  margin: 0;
  font-size: 1.2em;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.motorcycle-name {
  font-size: 14px;
  color: #64748b;
  font-weight: 400;
  font-style: italic;
  margin-top: 4px;
  padding: 8px 12px;
  background: #f1f5f9;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

/* Collapsible tire specs section */
.tire-specs-section {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 12px;
}

.tire-specs-section summary {
  background: #f8fafc;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 500;
  color: #374151;
  border-bottom: 1px solid #e2e8f0;
  user-select: none;
}

.tire-specs-section summary:hover {
  background: #f1f5f9;
}

.tire-specs-section[open] summary {
  border-bottom: 1px solid #e2e8f0;
}

.tire-specs-section summary::-webkit-details-marker {
  display: none;
}

.tire-specs-section summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.2s ease;
}

.tire-specs-section[open] summary::before {
  transform: rotate(90deg);
}

.tire-spec-display {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 8px 12px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: #374151;
  margin-bottom: 12px;
  min-height: 20px;
  display: flex;
  align-items: center;
}

.tire-spec-display:empty::before {
  content: "-";
  color: #9ca3af;
}

    .legend{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
    
    /* Legend styling enhancement */
    .legend{
        display:flex;
        gap:16px;
        align-items:center;
        margin-top:16px;
        padding:12px 16px;
        background:#f8fafc;
        border:1px solid #e2e8f0;
        border-radius:8px;
    }
    
    .key{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#334155;font-weight:500}
    .swatch{width:14px;height:14px;border-radius:4px;border:1px solid #94a3b8}
    .sw1{background:#3b82f6}
    .sw2{background:#a855f7}
    
    .btn{
        padding:8px 16px;
        border:1px solid #cbd5e1;
        border-radius:8px;
        background:#ffffff;
        cursor:pointer;
        font-weight:500;
        color:#374151;
        transition:all 0.2s ease;
    }
    .btn:hover {
        background:#f9fafb;
        border-color:#9ca3af;
    }
    .btn:active{transform:translateY(1px)}

    /* Canvas */
    .svg-box{background:#f1f5f9;border:1px dashed #cbd5e1;border-radius:8px;padding:8px;overflow:hidden}
    svg{width:100%;height:399px;display:block;touch-action:none;cursor:grab}

    /* Comparison panel styling */
    #comparison-panel{
        margin-top:14px;
        padding:20px;
        background:linear-gradient(180deg,#ffffff, #fbfdff);
        border:1px solid #e6eef6;
        border-radius:12px;
        box-shadow:0 8px 25px rgba(15,23,42,0.08);
        color:#0f172a;
    }
    #comparison-panel h3{
        margin:0 0 20px;
        font-size:24px;
        color:#0f172a;
        font-weight:700;
        text-align:center;
        padding-bottom:10px;
        border-bottom:2px solid #e1e8ed;
    }

    /* Section styling */
    .cmp-section {
        margin-bottom:24px;
    }
    .cmp-section h4 {
        font-size:16px;
        font-weight:600;
        color:#334155;
        margin:0 0 12px;
        padding:8px 12px;
        background:#f1f5f9;
        border-radius:6px;
        border-left:4px solid #3b82f6;
    }

    /* New comparison item styling */
    .cmp-item-new {
        margin-bottom:8px;
        padding:12px 16px;
        background:#ffffff;
        border:1px solid #e2e8f0;
        border-radius:8px;
        transition:all 0.2s ease;
    }
    .cmp-item-new:hover {
        border-color:#cbd5e1;
        box-shadow:0 2px 8px rgba(0,0,0,0.06);
        transform:translateY(-1px);
    }

    .cmp-description {
        font-size:14px;
        font-weight:500;
        color:#0f172a;
        line-height:1.4;
    }

    /* Color coding for positive/negative values */
    .positive {
        color:#059669 !important;
    }
    .negative {
        color:#dc2626 !important;
    }

    /* Technical details grid */
    .tech-details-grid {
        display:grid;
        grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
        gap:8px;
        margin-top:8px;
    }
    .tech-item {
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:8px 12px;
        background:#f8fafc;
        border:1px solid #e2e8f0;
        border-radius:6px;
        font-size:13px;
    }
    .tech-label {
        color:#64748b;
        font-weight:500;
    }
    .tech-value {
        color:#0f172a;
        font-weight:600;
        font-family:monospace;
    }

    /* Note styling */
    .note {
        font-size:12px;
        color:#64748b;
        background:#f8fafc;
        padding:10px;
        border-radius:6px;
        border-left:3px solid #94a3b8;
        margin:16px 0 0;
        font-style:italic;
    }

    /* Legacy comparison grid for backwards compatibility */
    .cmp-grid{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:12px 18px;
        align-items:stretch;
    }
    .cmp-item{
        background:linear-gradient(180deg, #ffffff, #fbfbfd);
        border:1px solid #eef4fb;
        padding:10px 12px;
        border-radius:8px;
        display:flex;
        flex-direction:column;
        justify-content:center;
    }
    .cmp-label{font-size:12px;color:#475569;margin-bottom:6px;font-weight:600}
    .cmp-value{font-size:18px;color:#0f172a;font-weight:700}
    .cmp-sub{font-size:12px;color:#64748b;margin-top:6px}

    /* Make the largest metric span two columns on wide screens */
    .cmp-item.cmp-large{grid-column:span 2}

    @media (max-width:760px){
        .cmp-grid{grid-template-columns:1fr 1fr}
        .cmp-item.cmp-large{grid-column:auto}
        .tech-details-grid{grid-template-columns:1fr}
        #comparison-panel{padding:16px}
        #comparison-panel h3{font-size:20px}
        
        /* Enhanced input panel mobile responsiveness */
        .grid-2{grid-template-columns:1fr;gap:16px}
        .panel:first-of-type {padding:16px}
        .grid-2 > div > h3 {
            font-size:16px;
            padding:8px 12px;
            margin-bottom:12px;
        }
        .field {padding:10px}
        label {font-size:12px}
        input, select {padding:6px 10px;font-size:13px}
        .legend {
            flex-wrap:wrap;
            gap:12px;
            padding:10px 12px;
        }
        .btn {padding:6px 12px;font-size:13px}
        .tire-section {padding:10px}
        .tire-section h4 {font-size:13px;margin-bottom:10px}
        .tire-spec-display {font-size:11px;padding:5px 6px}
    }