/*
 * chart-tile.css — the reusable ChartTile View Component.
 *
 * RESKINNED onto the design tokens, not rewritten (AB#1362). The component's C# and the canvas
 * geometry chart-tile.js draws into are deliberately untouched; only the surface changed. It used to
 * be a #ffd866 yellow card with a #333 title and a 4px radius, none of which this design system has.
 *
 * The tile's own width and height stay literal because they ARE the geometry: they pair with the
 * `size` attribute the view component writes onto the canvas, and no token is that number.
 * Everything else — surface, border, radius, type — comes from tokens.
 *
 * The square Sri Lankan chart inside is a diagram, not brand art (ui/design-system/README.md).
 */

.chart-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 420px;
    max-width: 100%;
    height: 500px;
    padding: var(--sp-4);
    border: 0.8px solid var(--border-default);
    border-radius: var(--r-md);
    background-color: var(--surface-card);
    box-shadow: var(--shadow-card);
}

.chart-title {
    font-family: var(--font-display);
    font-size: var(--fs-card-title);
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: var(--sp-1);
}

.chart-sub-title {
    font-size: var(--fs-sub);
    color: var(--text-muted);
    margin-bottom: var(--sp-4);
}