/* The drop card on the home page: two weeks of one keyword, drawn as the extension draws it, and the Compare rows. */
.drop-card { background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius); padding: var(--s5); }
.drop-card-head { font-weight: 700; font-size: 1.125rem; margin-bottom: var(--s4); }
.drop-card-head span { display: block; font-weight: 400; font-size: var(--t-small); color: var(--drop); }

.drop-chart { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.drop-chart .usual { fill: url(#hatch); }
.drop-chart .axis text { font-size: 15px; fill: var(--muted); text-anchor: end; font-variant-numeric: tabular-nums; }
.drop-chart .axis .day { text-anchor: middle; }
.drop-chart .edit line { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.drop-chart .edit text { font-size: 15px; fill: var(--ink); text-anchor: end; }
.drop-chart polyline { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.drop-chart circle { fill: var(--drop); }
.drop-chart .chart-stamp rect { fill: #B33A27; stroke: #1E1B18; stroke-width: 2; }
.drop-chart .chart-stamp text { fill: #fff; font-size: 38px; font-weight: 800; font-stretch: 62%; text-anchor: middle; }

.compare { width: 100%; border-collapse: collapse; margin-top: var(--s5); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.compare caption { text-align: left; font-size: var(--t-small); color: var(--muted); padding-bottom: var(--s2); }
.compare th, .compare td { text-align: left; padding: 8px 8px 8px 0; border-top: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-weight: 600; color: var(--muted); font-size: var(--t-small); border-top: 0; }
.compare tbody th { font-weight: 400; }
.compare tr.named th { box-shadow: inset 3px 0 0 var(--drop); padding-left: 10px; font-weight: 700; }
.compare tr.named td { font-weight: 700; }

/* drawn once when the card scrolls into view: the line, then the edit tick, then the stamp press */
@media (prefers-reduced-motion: no-preference) {
  .drop-figure.pending polyline { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .drop-figure.pending .edit, .drop-figure.pending circle, .drop-figure.pending .chart-stamp { opacity: 0; }
  .drop-figure.drawn polyline { stroke-dasharray: 1; animation: draw 1100ms ease-in-out both; }
  .drop-figure.drawn .edit { animation: appear 160ms ease-out 900ms both; }
  .drop-figure.drawn circle { animation: appear 120ms ease-out 1100ms both; }
  .drop-figure.drawn .chart-stamp rect, .drop-figure.drawn .chart-stamp text { transform-box: fill-box; transform-origin: center; }
  .drop-figure.drawn .chart-stamp { animation: appear 1ms linear 1180ms both; }
  .drop-figure.drawn .chart-stamp rect, .drop-figure.drawn .chart-stamp text { animation: stamp 120ms ease-out 1180ms both; }
  @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes appear { from { opacity: 0; } to { opacity: 1; } }
  @keyframes stamp { from { transform: scale(1.08); } to { transform: scale(1); } }
}

@media (max-width: 480px) {
  .drop-card { padding: var(--s4); }
}