/* CSS Variables */
:root {
  --psc-primary-color: #1a73e8;
  --psc-primary-light: #cfe0ff;
  --psc-text-color: #0f172a;
  --psc-secondary-text-color: #334155;
  --psc-light-text-color: #64748b;
  --psc-border-color: #e7eefc;
  --psc-card-border-color: #edf2fe;
  --psc-bg-light: #f7f9fe;
  --psc-bg-lighter: #fbfdff;
  --psc-gauge-bg-color: #eef2ff;

  --psc-good-color: #16a34a;
  --psc-medium-color: #f59e0b;
  --psc-bad-color: #ef4444;

  --psc-error-bg: #fff1f2;
  --psc-error-border: #fecdd3;
  --psc-error-text: #7f1d1d;

  --psc-shadow-light: rgba(14,30,37,.06);
  --psc-shadow-medium: rgba(14,30,37,.12);
}

/* Base */
.psc-wrap{
  max-width:1100px;
  margin:24px auto;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  color:var(--psc-text-color);
  line-height: 1.5;
  padding: 0 15px; /* Add horizontal padding for smaller screens */
}
.psc-hero{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
}
#psc-url{
  flex:1;
  min-width:420px;
  padding:14px 16px;
  border:2px solid var(--psc-border-color);
  border-radius:10px;
  font-size:16px;
  transition: all 0.2s ease-in-out;
}
#psc-url:focus{
  outline:none;
  border-color:var(--psc-primary-color);
  box-shadow:0 6px 18px var(--psc-shadow-medium);
}
.psc-btn{
  background:var(--psc-primary-color);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:12px 18px;
  font-weight:700;
  cursor:pointer;
  transition: background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  white-space: nowrap; /* Prevent text wrapping inside button */
}
.psc-btn:hover{
  background: #1664cc; /* Slightly darker on hover */
  box-shadow: 0 4px 12px rgba(26,115,232,.2);
}
.psc-btn.ghost{
  background:#fff;
  color:var(--psc-primary-color);
  border:1px solid var(--psc-primary-light);
}
.psc-btn.ghost:hover{
  background: var(--psc-primary-light);
  box-shadow: 0 4px 12px rgba(26,115,232,.1);
}
.psc-actions{
  display:flex;
  gap:8px;
  margin-left:6px;
  flex-wrap: wrap; /* Allow wrapping of action buttons */
}
.psc-status{
  min-height:18px;
  margin-top:8px;
  color:var(--psc-bad-color);
  font-weight:600;
}

/* Loading Spinner */
.psc-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--psc-light-text-color);
  font-weight: 600;
  text-align: center;
}
.psc-loading-spinner {
  border: 4px solid var(--psc-gauge-bg-color);
  border-top: 4px solid var(--psc-primary-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}
.psc-loading-text {
  margin: 0;
  font-size: 1.1em;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* Report shells */
.psc-tabs{
  display:flex;
  gap:8px;
  margin:18px 0;
  flex-wrap: wrap; /* Allow tabs to wrap */
}
.psc-tab{
  flex: 1; /* Allow tabs to grow and shrink */
  min-width: 120px; /* Minimum width for tabs */
  text-align: center;
  border:1px solid var(--psc-border-color);
  background:var(--psc-bg-light);
  padding:8px 12px;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
  transition: all 0.2s ease-in-out;
}
.psc-tab:hover{
  background: #eef2f8;
}
.psc-tab.active{
  background:#fff;
  border-color:var(--psc-primary-light);
  box-shadow:0 4px 14px var(--psc-shadow-light);
}
.psc-card{
  background:#fff;
  border:1px solid var(--psc-card-border-color);
  border-radius:12px;
  box-shadow:0 10px 28px var(--psc-shadow-light);
  padding:20px;
}

/* Header (score + category bars) */
.psc-head{
  display:flex;
  gap:24px;
  align-items: center;
  flex-wrap: wrap; /* Allow wrapping of head elements */
  justify-content: center; /* Center items when wrapped */
}
.psc-gauge{
  width:180px;
  height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink: 0; /* Prevent gauge from shrinking */
}
.psc-gauge svg text{
  font-size:38px; /* Default font size for gauge score */
}
.psc-score-badge{
  position:absolute;
  margin-top:0;
  font-size:30px;
  font-weight:800;
}
.psc-score-small{
  border-radius:10px;
  padding:6px 10px;
  color:#fff;
  font-weight:800;
}
.psc-score-small.good{background:var(--psc-good-color);}
.psc-score-small.med{background:var(--psc-medium-color);color:var(--psc-text-color);}
.psc-score-small.bad{background:var(--psc-bad-color);}
.psc-head-info{
  flex:1;
  min-width: 280px; /* Ensure info section has minimum width */
}
.psc-head-info h3{
  font-size: 1.5em;
  color: var(--psc-text-color);
  margin-top: 0; /* Reset default margin */
  margin-bottom: 8px;
}

/* Category bars (like PSI sub-scores look) */
.psc-bars{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  margin-top:10px;
}
.psc-bars .row{display:contents;}
.psc-bars .label{
  font-weight:700;
  color:var(--psc-secondary-text-color);
  align-self: center;
  font-size: 0.95em; /* Slightly smaller font for labels */
}
.psc-bars .bar{
  background:var(--psc-gauge-bg-color);
  border-radius:8px;
  height:10px;
  position:relative;
  overflow:hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
.psc-bars .fill{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  border-radius:8px;
  transition: width 0.8s ease-out;
}
.psc-bars .score{
  justify-self:end;
  font-weight:800;
  color:var(--psc-secondary-text-color);
  font-size: 1.1em;
  align-self: center;
}

/* Metrics grid */
.psc-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:24px;
}
.psc-metric{
  background:var(--psc-bg-lighter);
  border:1px solid var(--psc-gauge-bg-color);
  border-radius:12px;
  padding:16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.psc-metric:hover{
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
.psc-metric .t{
  font-size:13px;
  font-weight:700;
  color:var(--psc-light-text-color);
  margin-bottom: 4px;
}
.psc-metric .v{
  font-size:22px;
  font-weight:800;
  color:var(--psc-text-color);
}
.psc-metric .sub{
  font-size:12px;
  color:var(--psc-light-text-color);
  margin-top:6px;
}

/* Sections */
.psc-section{margin-top:24px;}
.psc-section h4{
  margin:10px 0 16px;
  font-size:18px;
  font-weight:800;
  color:var(--psc-text-color);
  border-bottom: 1px solid var(--psc-border-color);
  padding-bottom: 8px;
}

/* Audits (opportunities, diagnostics, passed) */
.psc-list{
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid var(--psc-border-color);
}
.psc-item{
  padding:16px 0;
  border-bottom:1px solid var(--psc-border-color);
}
.psc-item .hdr{
  display:flex;
  justify-content:space-between;
  align-items: center;
  gap:10px;
  cursor:pointer;
}
.psc-item .title{
  font-weight:700;
  color:var(--psc-text-color);
  font-size: 1.1em;
  flex: 1; /* Allow title to take available space */
}
.psc-item .dv{
  color:var(--psc-light-text-color);
  font-weight:700;
  font-size: 0.95em;
  white-space: nowrap; /* Prevent display value from wrapping */
}
.psc-item .save{
  font-weight:800;
  color:var(--psc-good-color);
  font-size: 0.95em;
  margin-right: 10px;
  white-space: nowrap; /* Prevent savings from wrapping */
}
.psc-item .more{
  color:var(--psc-primary-color);
  font-weight:700;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0; /* Prevent "Details" from shrinking */
}
.psc-item .more .arrow {
  display: inline-block;
  transition: transform 0.2s ease-in-out;
}
.psc-item .more .arrow.rotated {
  transform: rotate(180deg);
}
.psc-item .body{
  display:none;
  margin-top:12px;
  padding:15px;
  border:1px solid var(--psc-gauge-bg-color);
  border-radius:10px;
  background:var(--psc-bg-lighter);
  box-shadow: inset 0 1px 5px rgba(0,0,0,0.05);
}
.psc-item .desc{
  color:var(--psc-secondary-text-color);
  font-size:14px;
  margin-bottom:10px;
}
.psc-item .help{
  color:var(--psc-light-text-color);
  font-size:13px;
}
.psc-doc{
  color:var(--psc-primary-color);
  text-decoration:none;
  font-weight: 600;
  margin-top: 8px;
  display: inline-block;
}
.psc-doc:hover{
  text-decoration: underline;
}

/* Quick link */
.psc-link{margin-top:15px;}
.psc-link a{
  color:var(--psc-primary-color);
  font-weight:800;
  text-decoration:none;
  transition: text-decoration 0.2s ease-in-out;
}
.psc-link a:hover{
  text-decoration: underline;
}

/* Loading & errors */
.psc-error{
  background:var(--psc-error-bg);
  border:1px solid var(--psc-error-border);
  color:var(--psc-error-text);
  border-radius:10px;
  padding:15px;
  font-weight:700;
  margin-top:14px;
}

/* Responsive Adjustments */

/* Large Desktops / Default (1100px and up) */
/* No specific rules needed here as it's the base */

/* Medium Desktops / Large Tablets (max-width: 1099px) */
@media(max-width: 1099px) {
  .psc-wrap {
    max-width: 960px; /* Constrain width slightly */
  }
  #psc-url {
    min-width: 360px; /* Adjust min-width */
  }
}

/* Tablets / Small Laptops (max-width: 900px) */
@media(max-width: 900px){
  .psc-head{
    flex-direction:column;
    align-items:center;
    gap: 18px;
  }
  .psc-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr)); /* 2 columns for metrics */
  }
  #psc-url{
    min-width:0;
    width:100%;
  }
  .psc-hero{
    justify-content: center;
  }
  .psc-actions{
    margin-left: 0;
    margin-top: 10px;
    width: 100%;
    justify-content: center;
  }
  .psc-card{
    padding: 15px;
  }
  .psc-gauge{
    width: 160px; /* Slightly smaller gauge */
    height: 160px;
  }
  .psc-gauge svg text{
    font-size: 36px !important; /* Adjust font size for smaller gauge */
  }
  .psc-head-info h3{
    font-size: 1.4em;
    text-align: center;
  }
  .psc-link{
    text-align: center;
  }
  .psc-tabs {
    justify-content: center;
  }
  .psc-tab {
    flex: none; /* Disable flex grow for tabs */
    width: 48%; /* Two tabs per row */
    margin-bottom: 8px;
  }
}

/* Smaller Tablets / Large Phones (max-width: 768px) */
@media(max-width: 768px) {
  .psc-wrap {
    margin: 15px auto;
    padding: 0 10px;
  }
  .psc-hero {
    flex-direction: column; /* Stack hero elements */
    align-items: stretch; /* Stretch to full width */
  }
  #psc-url {
    width: 100%;
    min-width: unset;
  }
  .psc-btn {
    width: 100%; /* Full width buttons */
    margin-top: 5px;
  }
  .psc-actions {
    flex-direction: column; /* Stack action buttons */
    width: 100%;
    margin-left: 0;
    gap: 5px;
  }
  .psc-tabs {
    flex-direction: column; /* Stack tabs */
    gap: 5px;
  }
  .psc-tab {
    width: 100%; /* Full width tabs */
  }
  .psc-head {
    flex-direction: column;
    gap: 15px;
  }
  .psc-gauge {
    width: 140px; /* Even smaller gauge */
    height: 140px;
  }
  .psc-gauge svg text{
    font-size: 32px !important;
  }
  .psc-head-info {
    min-width: unset; /* Remove min-width */
    width: 100%;
    text-align: center;
  }
  .psc-metrics {
    grid-template-columns: 1fr; /* Single column for metrics */
    gap: 12px;
  }
  .psc-metric {
    padding: 14px;
  }
  .psc-section h4 {
    font-size: 1.1em;
  }
  .psc-item .hdr {
    flex-wrap: wrap; /* Allow audit header to wrap */
  }
  .psc-item .title,
  .psc-item .dv,
  .psc-item .save {
    white-space: normal; /* Allow text to wrap */
    flex-basis: 100%; /* Take full width if needed */
  }
  .psc-item .more {
    margin-top: 5px; /* Add some space */
  }
}

/* Small Phones (max-width: 480px) */
@media(max-width: 480px) {
  .psc-wrap {
    margin: 10px auto;
    padding: 0 8px;
  }
  .psc-card {
    padding: 10px;
  }
  .psc-gauge {
    width: 120px; /* Smallest gauge */
    height: 120px;
  }
  .psc-gauge svg text{
    font-size: 28px !important;
  }
  .psc-head-info h3 {
    font-size: 1.2em;
  }
  .psc-bars .label,
  .psc-bars .score {
    font-size: 0.9em; /* Smaller font for category bars */
  }
  .psc-metric .t {
    font-size: 12px;
  }
  .psc-metric .v {
    font-size: 20px;
  }
  .psc-item .title {
    font-size: 1em;
  }
  .psc-item .desc,
  .psc-item .help {
    font-size: 12px;
  }
}