/*
 * ─────────────────────────────────────────────────────────────
 *  GeoMetric.OS  —  Front-end Stylesheet
 *  Edit this file to customise the look of your embedded graphs.
 *  Upload the edited file back to /wp-content/plugins/geometric-os/
 * ─────────────────────────────────────────────────────────────
 *
 *  COLOUR GUIDE
 *  --geos-accent      Main brand / button colour
 *  --geos-bg          Widget outer background
 *  --geos-panel-bg    Graph panel background
 *  --geos-content-bg  Sliders / results panel background
 *  --geos-card-bg     Individual slider / axis card background
 *  --geos-card-border Card border colour
 *  --geos-text        Primary label text colour
 *  --geos-text-muted  Secondary / muted text colour
 *  --geos-crowd       Crowd overlay colour (dashed line + fill)
 *  --geos-grid        Radar grid lines colour
 *  --geos-radius      Widget corner radius
 *  --geos-card-radius Card corner radius
 * ─────────────────────────────────────────────────────────────
 */

/* ── Custom properties (change these first) ─────────────────── */
.geos-widget {
  --geos-accent:       #F27D26;
  --geos-bg:           #F8F9FA;
  --geos-panel-bg:     #ffffff;
  --geos-content-bg:   #F8F9FA;
  --geos-card-bg:      #ffffff;
  --geos-card-border:  rgba(0, 0, 0, 0.07);
  --geos-text:         rgba(0, 0, 0, 0.65);
  --geos-text-muted:   rgba(0, 0, 0, 0.35);
  --geos-crowd:        #4A4A4A;
  --geos-grid:         rgba(0, 0, 0, 0.09);
  --geos-radius:       16px;
  --geos-card-radius:  9px;
}


/* ── Widget shell ────────────────────────────────────────────── */
.geos-widget {
  font-family: system-ui, -apple-system, sans-serif;
  background:    var(--geos-bg);
  border-radius: var(--geos-radius);
  border:        1px solid rgba(0, 0, 0, 0.06);
  box-shadow:    0 8px 32px rgba(0, 0, 0, 0.08);
  width:         100%;
  max-width:     560px;
  margin:        0 auto;
  overflow:      hidden;
  box-sizing:    border-box;
  -webkit-font-smoothing: antialiased;
}

/* Vertical layout (default — stacked) */
.geos-widget--vertical {
  max-width: 560px;
  display:   block;
}

/* Horizontal layout — graph left, controls right */
.geos-widget--horizontal {
  max-width:   960px;
  display:     flex;
  flex-direction: row;
  align-items: center;  /* vertically centre graph and controls against each other */
}

.geos-widget--horizontal .geos-graph-panel {
  flex:             0 0 auto;
  width:            50%;
  min-width:        240px;
  border-bottom:    none;
  border-right:     1px solid rgba(0, 0, 0, 0.05);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          20px 16px;
  box-sizing:       border-box;
}

/* Side panel wraps tabs + content in horizontal mode */
.geos-side-panel {
  display:         flex;
  flex-direction:  column;
  flex:            1;
  min-width:       0;
  justify-content: center;
}

.geos-widget--vertical .geos-side-panel {
  display: contents; /* transparent in vertical — children flow normally */
}

/* In horizontal mode the content panel sits naturally — no forced stretch */
.geos-widget--horizontal .geos-content-panel {
  overflow-y: auto;
}

/* No forced height in horizontal mode — let content size naturally */

/* Vertical layout: sync height between input and crowd views */
.geos-widget--vertical .geos-content-panel {
  min-height: var(--geos-content-height, auto);
}

/* Tabs sit flush at the top of the side panel in horizontal */
.geos-widget--horizontal .geos-tabs {
  border-radius: 0;
}


/* ── Graph panel (white area behind the SVG) ─────────────────── */
.geos-graph-panel {
  background:    var(--geos-panel-bg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding:       20px 16px 12px;
  display:       flex;
  justify-content: center;
}

/* The SVG wrapper — fills its parent width */
.geos-graph-wrap {
  width:      100%;
  box-sizing: border-box;
}

/* The SVG itself */
.geos-svg {
  display: block;       /* removes inline bottom gap */
  overflow: visible;    /* lets labels bleed outside if needed */
}


/* ── SVG internals ───────────────────────────────────────────── */

/* Radar grid rings */
.geos-grid-ring {
  stroke:        var(--geos-grid);
  stroke-width:  1;
  stroke-dasharray: 4 4;
}

/* Grid value labels (20, 40, 60…) */
.geos-grid-label {
  fill:          var(--geos-text-muted);
}

/* Spoke lines from centre */
.geos-axis-line {
  stroke:        var(--geos-grid);
  stroke-width:  1;
}

/* Average radius ring (dotted) */
.geos-avg-ring {
  stroke-width:     1;
  stroke-dasharray: 2 3;
  opacity:          0.45;
}

/* Crowd average overlay — filled area */
.geos-crowd-fill {
  fill:   rgba(74, 74, 74, 0.07);
  stroke: var(--geos-crowd);
  stroke-width:     2;
  stroke-dasharray: 6 3;
}

/* Crowd smooth best-fit line */
.geos-crowd-smooth {
  stroke:        var(--geos-crowd);
  stroke-width:  2;
  stroke-dasharray: 6 3;
  stroke-linecap:   round;
}

/* User polygon — fill & stroke set from JS (gradient), class used for crowd view override */
.geos-user-fill {
  stroke-width: 2.5;
}
.geos-user-fill--crowd {
  fill:         rgba(74, 74, 74, 0.12);
  stroke:       var(--geos-crowd);
  stroke-width: 2;
  stroke-dasharray: 5 3;
}

/* Best-fit smoothed line for user */
.geos-smooth {
  stroke-width:   2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(242, 125, 38, 0.3));
}
.geos-smooth--crowd {
  stroke:        var(--geos-crowd);
  stroke-width:  2.5;
  stroke-dasharray: 5 3;
  stroke-linecap:   round;
  filter:        none;
}

/* Axis data point dots */
.geos-dot {
  stroke:       white;
  stroke-width: 2;
}
.geos-dot--crowd {
  fill:         var(--geos-crowd);
  stroke:       white;
  stroke-width: 2;
  opacity:      0.8;
}

/* Axis labels (text) */
.geos-axis-label {
  fill:   var(--geos-text);
}

/* Axis value numbers */
.geos-axis-value {
  fill: #333333;
}
.geos-axis-value--crowd {
  fill:   var(--geos-crowd);
  opacity: 0.9;
}


/* ── Graph legend strip ──────────────────────────────────────── */
.geos-legend {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         4px 12px 8px;
  border-top:      1px solid rgba(0, 0, 0, 0.04);
}

.geos-legend-items {
  display: flex;
  gap:     12px;
}

.geos-legend-item {
  display:     flex;
  align-items: center;
  gap:         5px;
}

.geos-legend-swatch {
  display:       inline-block;
  width:         14px;
  height:        3px;
  border-radius: 2px;
}
.geos-legend-swatch--you   { background: #F27D26; }
.geos-legend-swatch--crowd {
  background: repeating-linear-gradient(
    to right,
    var(--geos-crowd) 0px,
    var(--geos-crowd) 4px,
    transparent 4px,
    transparent 7px
  );
  height: 2px;
}

.geos-legend-label {
  font-size:      8px;
  font-family:    monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--geos-text-muted);
}

.geos-legend-axes {
  font-size:      8px;
  font-family:    monospace;
  text-transform: uppercase;
  color:          var(--geos-text-muted);
  opacity:        0.6;
}


/* ── Tab bar (shown after submit) ───────────────────────────── */
.geos-tabs {
  display:       flex;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  background:    var(--geos-panel-bg);
}

.geos-tab {
  flex:           1;
  padding:        10px;
  border:         none;
  cursor:         pointer;
  background:     var(--geos-panel-bg);
  border-bottom:  2px solid transparent;
  font-family:    monospace;
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--geos-text-muted);
  transition:     all 0.15s;
}

.geos-tab--active {
  background:    var(--geos-bg);
  border-bottom: 2px solid var(--geos-accent);
  color:         var(--geos-accent);
}


/* ── Panel visibility (CSS grid stack locks height to the taller panel) */

/* Panel switching — hidden panel removed from layout entirely */
.geos-panel-visible {
  display: block;
}

.geos-panel-hidden {
  display: none;
}


/* ── Content panel (sliders / crowd result) ─────────────────── */
.geos-content-panel {
  background: var(--geos-content-bg);
  padding:    16px 20px 20px;
}


/* ── Stats row ───────────────────────────────────────────────── */
.geos-stats-row {
  display:       flex;
  gap:           12px;
  margin-bottom: 14px;
  padding:       10px 14px;
  background:    var(--geos-card-bg);
  border:        1px solid var(--geos-card-border);
  border-radius: 10px;
}

.geos-stat {
  flex:        1;
  text-align:  center;
}

.geos-stat-label {
  font-size:      9px;
  font-family:    monospace;
  color:          var(--geos-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight:    700;
  margin-bottom:  2px;
}

.geos-stat-value {
  font-size:   22px;
  font-family: monospace;
  font-weight: 700;
  color:       #333333;
  line-height: 1;
}

.geos-stat-value--green { color: #15803d; }

.geos-stat-divider {
  width:      1px;
  background: var(--geos-card-border);
  align-self: stretch;
}


/* ── Slider rows ─────────────────────────────────────────────── */
.geos-sliders {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  margin-bottom:  12px;
}

.geos-slider-row,
.geos-crowd-axis-row {
  padding:        4px 10px;
  background:     var(--geos-card-bg);
  border:         1px solid var(--geos-card-border);
  border-radius:  var(--geos-card-radius);
  box-sizing:     border-box;
  /* Fixed height — header + input/progress + padding. Both rows
     must share this so switching tabs causes zero layout shift */
  height:         44px;
  display:        flex;
  flex-direction: column;
  justify-content: center;
}

.geos-slider-header {
  display:     flex;
  align-items: center;
  gap:         7px;
  margin-bottom: 2px;
}

.geos-slider-dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  flex-shrink:   0;
  /* background set from JS colour scale */
}

.geos-slider-name {
  font-size:      11px;
  font-family:    monospace;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color:          var(--geos-text);
  flex:           1;
}

.geos-slider-val {
  font-size:   13px;
  font-family: monospace;
  font-weight: 700;
  min-width:   28px;
  text-align:  right;
  color:       #333333;
}

/* Range input */
.geos-range {
  width:        100%;
  display:      block;
  margin:       0;
  height:       14px;
  accent-color: var(--geos-accent);
  cursor:       pointer;
}
.geos-range:disabled {
  cursor:  default;
  opacity: 0.5;
}




/* ── Submit button ───────────────────────────────────────────── */
.geos-submit-btn {
  width:          100%;
  padding:        12px;
  border-radius:  10px;
  border:         none;
  cursor:         pointer;
  font-family:    monospace;
  font-size:      12px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background:     var(--geos-accent);
  color:          white;
  transition:     background 0.2s, opacity 0.2s;
}
.geos-submit-btn:hover:not(:disabled) {
  filter: brightness(1.08);
}
.geos-submit-btn:disabled {
  cursor: default;
}
.geos-submit-btn--done  { background: #15803d; }
.geos-submit-btn--error { background: #dc2626; }

.geos-submit-note {
  margin:      8px 0 0;
  font-size:   11px;
  font-family: monospace;
  color:       var(--geos-text-muted);
  text-align:  center;
  line-height: 1.5;
}


/* ── Crowd result ────────────────────────────────────────────── */
.geos-crowd-axes {
  display:        flex;
  flex-direction: column;
  gap:            7px;
  margin-bottom:  14px;
}

/* Progress bar */
.geos-progress-track {
  height:        14px; /* same as .geos-range height so rows are identical */
  background:    rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  overflow:      hidden;
  display:       flex;
  align-items:   center;
  padding:       4px 0;
  box-sizing:    border-box;
}

.geos-progress-track-inner {
  width:         100%;
  height:        6px;
  background:    rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  overflow:      hidden;
}

.geos-progress-fill {
  height:        100%;
  border-radius: 3px;
  transition:    width 0.5s ease;
  /* background colour set from JS colour scale */
}

/* Back button */
.geos-back-btn {
  width:          100%;
  padding:        11px;
  border-radius:  10px;
  border:         1px solid var(--geos-card-border);
  cursor:         pointer;
  font-family:    monospace;
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background:     var(--geos-card-bg);
  color:          var(--geos-text-muted);
  transition:     background 0.15s;
}
.geos-back-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* Empty crowd state */
.geos-crowd-empty {
  text-align: center;
  padding:    24px 0;
}
.geos-crowd-empty-icon  { font-size: 28px; margin-bottom: 8px; }
.geos-crowd-empty-title { font-size: 13px; font-family: monospace; color: var(--geos-text); margin-bottom: 4px; }
.geos-crowd-empty-sub   { font-size: 11px; font-family: monospace; color: var(--geos-text-muted); margin-bottom: 14px; }


/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .geos-content-panel { padding: 12px 14px 16px; }
  .geos-graph-panel   { padding: 14px 10px 8px; }
  .geos-stat-value    { font-size: 18px; }
}


/* ── Edit / re-submit state ──────────────────────────────────── */

/* Slider row gets a subtle highlight when in editing mode */
.geos-slider-row--editing {
  border-color: rgba(242, 125, 38, 0.25);
  background:   rgba(242, 125, 38, 0.03);
}

/* Update button — same accent colour but outlined style to feel distinct */
.geos-submit-btn--editing {
  background:   transparent;
  color:        var(--geos-accent);
  border:       2px solid var(--geos-accent);
}
.geos-submit-btn--editing:hover {
  background: rgba(242, 125, 38, 0.06);
  filter:     none;
}

/* Editing hint note */
.geos-submit-note--editing {
  color: var(--geos-accent);
  opacity: 0.75;
}


/* ── Name field ──────────────────────────────────────────────── */

.geos-name-field {
  position:    relative;
  margin-bottom: 12px;
}

.geos-name-input {
  width:         100%;
  padding:       9px 12px;
  border:        1px solid var(--geos-card-border);
  border-radius: var(--geos-card-radius);
  background:    var(--geos-card-bg);
  font-family:   system-ui, -apple-system, sans-serif;
  font-size:     13px;
  color:         var(--geos-text);
  box-sizing:    border-box;
  outline:       none;
  transition:    border-color 0.15s;
}

.geos-name-input:focus {
  border-color: var(--geos-accent);
  box-shadow:   0 0 0 3px rgba(242, 125, 38, 0.1);
}

.geos-name-input::placeholder {
  color:   var(--geos-text-muted);
  opacity: 1;
}

/* Read-only state for logged-in users */
.geos-name-input--readonly {
  background:   rgba(0, 0, 0, 0.03);
  color:        var(--geos-text-muted);
  cursor:       default;
  padding-right: 90px; /* room for badge */
}
.geos-name-input--readonly:focus {
  border-color: var(--geos-card-border);
  box-shadow:   none;
}

/* "Logged in" badge inside the field */
.geos-name-badge {
  position:      absolute;
  right:         10px;
  top:           50%;
  transform:     translateY(-50%);
  font-size:     9px;
  font-family:   monospace;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:         #15803d;
  background:    #f0fdf4;
  border:        1px solid #bbf7d0;
  border-radius: 4px;
  padding:       2px 6px;
  pointer-events: none;
}


/* ── Collapsed mode ──────────────────────────────────────────── */

/* Collapsed state — graph only, no content panel */
.geos-widget--collapsed {
  cursor: default;
}

/* Bar below graph containing the expand button */
.geos-collapse-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 16px;
  background:      var(--geos-content-bg);
  border-top:      1px solid rgba(0, 0, 0, 0.05);
  gap:             12px;
}

/* Bottom collapse bar (inside expanded widget) */
.geos-collapse-bar--bottom {
  border-top:  1px solid rgba(0, 0, 0, 0.05);
  border-bottom: none;
}

/* Expand / "Add a Response" button */
.geos-expand-btn {
  flex:           1;
  padding:        10px 16px;
  border-radius:  10px;
  border:         none;
  cursor:         pointer;
  font-family:    monospace;
  font-size:      12px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background:     var(--geos-accent);
  color:          white;
  transition:     filter 0.15s;
  text-align:     center;
}
.geos-expand-btn:hover {
  filter: brightness(1.08);
}

/* Response count pill */
.geos-collapse-count {
  font-size:      10px;
  font-family:    monospace;
  color:          var(--geos-text-muted);
  white-space:    nowrap;
}

/* Collapse (hide sliders) button */
.geos-collapse-btn {
  background:     transparent;
  border:         1px solid var(--geos-card-border);
  border-radius:  8px;
  padding:        6px 14px;
  font-family:    monospace;
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--geos-text-muted);
  cursor:         pointer;
  transition:     background 0.15s;
  width:          100%;
}
.geos-collapse-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}


/* ── Edit + Clear action row ─────────────────────────────────── */

.geos-action-row {
  display:   flex;
  gap:       8px;
  margin-top: 8px;
}

.geos-action-btn {
  flex:           1;
  padding:        8px 12px;
  border-radius:  var(--geos-card-radius);
  border:         1px solid var(--geos-card-border);
  cursor:         pointer;
  font-family:    monospace;
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background:     var(--geos-card-bg);
  color:          var(--geos-text-muted);
  transition:     background 0.15s, color 0.15s;
  text-align:     center;
}
.geos-action-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.04);
}
.geos-action-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Clear button — subtle red tint on hover */
.geos-action-btn--clear {
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.2);
}
.geos-action-btn--clear:hover:not(:disabled) {
  background: rgba(220, 38, 38, 0.05);
}

/* Back/edit button — reuse existing style but in action row */
.geos-action-row .geos-back-btn {
  flex:        1;
  margin:      0;
  font-size:   10px;
  letter-spacing: 0.06em;
  padding:     8px 12px;
}