/* Twelve-signs explainer. Panels, controls and readouts come from learn-retrograde.css. */
.sgn-small { fill: #b5c5da; font-size: 15px; letter-spacing: .03em; }
.sgn-box { fill: #e2b96708; stroke: #8eabc366; stroke-width: 1.5; }
.sgn-current { fill: #e2b967; fill-opacity: .22; }
.sgn-number { fill: #e2bf7d; font-size: 15px; font-weight: 600; }
.sgn-abbr { fill: #e4edf8; font-size: 20px; font-weight: 550; }
.sgn-tick { fill: #b5c5da; font-size: 14px; }
.sgn-trail { stroke: #f4bf54; stroke-width: 4; stroke-linecap: round; }
.sgn-sun { fill: #f4bf54; stroke: #bd7b11; stroke-width: 1.5; }
.sgn-sun-glow { fill: #f4bf54; opacity: .18; }
.sgn-pointer { stroke: #f4bf54; stroke-width: 2; }
.sgn-cell { fill: #0d1729; font-size: 11px; font-weight: 650; }
.sgn-el-fire { fill: #f2a083; }
.sgn-el-earth { fill: #c8b273; }
.sgn-el-air { fill: #a9c4ff; }
.sgn-el-water { fill: #70d6c0; }
.sgn-mode-movable { fill: #f4bf54; }
.sgn-mode-fixed { fill: #8fb0e6; }
.sgn-mode-dual { fill: #c4a3f1; }
.sgn-ruler-box { fill: #d6dfeb; }
.sgn-ruler-arc { fill: none; stroke: #e2bf7d; stroke-width: 2; }
.sgn-mirror { stroke: #e4edf8; stroke-width: 1.5; stroke-dasharray: 4 5; opacity: .6; }
.sgn-con { fill: #8eabc322; stroke: #8eabc388; stroke-width: 1.5; }
.sgn-con-extra { fill: #c4a3f133; stroke: #c4a3f1; }
.sgn-con-text { fill: #e4edf8; font-size: 13px; font-weight: 550; }
.sgn-con-extra-text { fill: #d4b9fa; }
.sgn-con-days { fill: #b5c5da; font-size: 12px; }
.sgn-guide { stroke: #8eabc355; stroke-dasharray: 2 4; }
.sgn-story .node-story-note a { color: var(--accent-text); text-decoration: underline; text-underline-offset: .2em; }
.sgn-story .retro-observation span { font-variant-numeric: tabular-nums; }
/* Twelve columns need room: on phones the strips scroll sideways inside their panel. */
@media (max-width: 40rem) {
  .sgn-story .retro-views { overflow-x: auto; overscroll-behavior-x: contain; }
  .sgn-story .retro-views svg { min-width: 600px; max-height: none; }
  .sgn-scroll-hint { display: block; }
}
.sgn-scroll-hint { display: none; color: #a5b5cc; font-size: .75rem; padding: .6rem 1rem 0; }