/* Group Supermarket Hours — standalone styles for the dial, pill and table.
   Every colour reads a design token with a hard fallback, so the plugin
   renders correctly even without the child theme (just less on-brand). */

.gs-dial { width: min(320px, 78vw); display: block; overflow: visible; }
.gs-dial__track { fill: none; stroke: var(--rule, #D8D6CF); stroke-width: 14; }
.gs-dial__tick { stroke: var(--rule, #D8D6CF); stroke-width: 2; stroke-linecap: round; }
.gs-dial__band {
  fill: none;
  stroke: var(--accent, #1E8536);
  stroke-width: 14;
  stroke-linecap: round;
}
@media (prefers-reduced-motion: no-preference) {
  .gs-dial__band {
    stroke-dasharray: var(--arc-len, 600) 2000;
    animation: gs-draw 600ms ease-out both;
  }
}
@keyframes gs-draw { from { stroke-dasharray: 0 2000; } }
.gs-dial--closing .gs-dial__band { stroke: var(--warn, #F5A93C); }
.gs-dial--closed .gs-dial__band, .gs-dial--unknown .gs-dial__band { stroke: var(--rule, #D8D6CF); }
@media (prefers-reduced-motion: no-preference) {
  .gs-dial--closing .gs-dial__band { animation: gs-draw 600ms ease-out both, gs-pulse 400ms ease-in-out 700ms 1; }
}
@keyframes gs-pulse { 50% { opacity: 0.55; } }

.gs-dial__elapsed {
  fill: none;
  stroke: var(--bg, #FAFAF7);
  stroke-width: 14;
  stroke-linecap: round;
  opacity: 0.5;
}
@media (prefers-reduced-motion: no-preference) {
  .gs-dial__elapsed { opacity: 0; animation: gs-elapsed-in 400ms ease-out 700ms forwards; }
}
@keyframes gs-elapsed-in { to { opacity: 0.5; } }

.gs-dial__marker { fill: var(--fg, #15171C); stroke: var(--bg, #FAFAF7); stroke-width: 3.5; cursor: pointer; }
.gs-dial__pulse {
  fill: none; stroke: var(--fg, #15171C); stroke-width: 2; opacity: 0;
  pointer-events: none; transform-box: fill-box; transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
  .gs-dial__marker:hover + .gs-dial__pulse { animation: gs-sonar 1.1s ease-out infinite; }
}
@keyframes gs-sonar { 0% { transform: scale(1); opacity: 0.65; } 100% { transform: scale(2.8); opacity: 0; } }

.gs-dial__label, .gs-dial__sub {
  font-family: var(--font-mono, 'Montserrat', sans-serif);
  font-weight: 500; font-size: 10px; letter-spacing: 0.12em;
  fill: var(--fg-muted, #5c5e63); text-transform: uppercase;
}
.gs-dial__data {
  font-family: var(--font-mono, 'Montserrat', sans-serif);
  font-weight: 600; font-size: 22px; font-variant-numeric: tabular-nums;
  fill: var(--fg, #15171C);
}
.gs-dial__endlabel {
  font-family: var(--font-mono, 'Montserrat', sans-serif);
  font-weight: 600; font-size: 10px; letter-spacing: 0.06em;
  fill: var(--fg-muted, #5c5e63);
}
.gs-dial__closedlabel {
  font-family: var(--font-mono, 'Montserrat', sans-serif);
  font-weight: 600; font-size: 10.5px; letter-spacing: 0.35em;
  fill: var(--fg-muted, #5c5e63);
}

/* Status pill */
.gs-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--rule, #D8D6CF); border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--font-mono, 'Montserrat', sans-serif);
  font-weight: 500; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.gs-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--concrete, #D8D6CF); }
.is-open .gs-dot { background: var(--open, #1F9D57); }
.is-closing .gs-dot { background: var(--warn, #F5A93C); }

/* Hours table */
.gs-hours-table { width: 100%; border-collapse: collapse; }
.gs-hours-table caption {
  text-align: left; padding-bottom: 12px; color: var(--fg-muted, #5c5e63);
  font-family: var(--font-mono, 'Montserrat', sans-serif);
  font-weight: 500; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.gs-hours-table th, .gs-hours-table td {
  text-align: left; padding: 10px 0;
  border-bottom: 1px solid var(--rule, #D8D6CF);
  font-weight: 400;
}
.gs-hours-table td { text-align: right; font-family: var(--font-mono, 'Montserrat', sans-serif); }
.gs-hours-table .is-today th, .gs-hours-table .is-today td {
  background: color-mix(in srgb, var(--accent, #1E8536) 12%, transparent);
  font-weight: 600;
}
.gs-hours-table .gs-chip {
  display: inline-block;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  background: var(--accent, #1E8536); color: var(--on-accent, #fff);
  padding: 3px 8px 3px 13px;
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
}