/* ============================================================================
   FoundryAI — Legacy page styles (FAI-P05-12/P06-03)
   ----------------------------------------------------------------------------
   Only the page-level visuals of the not-yet-redesigned screens (Card Majlis,
   Living Canvas zones) live here. The design system (tokens, base, compat) is
   in css/foundry/; the shell + primitives carry isolated CSS. This file shrinks
   as pages are redesigned (M1+), then disappears.
   ========================================================================== */

/* FAI-P05-12 - Card Majlis / Card Playground concepts (blueprint §8, UAE theme):
   interaction cards arranged around a centre, proximity reflecting usefulness. */
.majlis {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fai-space-2);
    align-items: center;
    justify-content: center;
    padding: var(--fai-space-3);
    border-radius: var(--fai-radius-lg);
    background: linear-gradient(180deg, #fdf8ef 0%, #f6ecd9 100%);
}

.majlis-center {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: var(--fai-ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fai-text-xs);
    text-align: center;
    flex: 0 0 auto;
}

.majlis-card {
    border: 1px solid #d9c89f;
    background: var(--fai-surface);
    border-radius: var(--fai-radius-sm);
    padding: var(--fai-space-2) var(--fai-space-3);
    text-align: start;
    min-width: 7rem;
    max-width: 10rem;
    min-height: 3rem; /* FAI-P05-14 motor-friendly tap targets */
}

.majlis-card:nth-child(2) { transform: translateY(-1.5rem); }
.majlis-card:nth-child(3) { transform: translateY(-0.75rem); }
.majlis-card:nth-child(4) { transform: translateY(0.25rem); }
.majlis-card:nth-child(5) { transform: translateY(-0.5rem); }
.majlis-card:nth-child(6) { transform: translateY(-1.25rem); }

.majlis-playground .majlis-center { border-radius: var(--fai-radius-lg); background: var(--fai-primary); }

/* Battery-saver (FAI-P05-14): quiet the warm gradient via tokens elsewhere; keep readable. */
.prefs-battery .majlis { background: var(--fai-surface-2); }

/* FAI-P06-03 — Living Canvas: the ambient health ring + feelable zone fill states.
   The visual weight IS the insight: empty zones sit grey and quiet; warm zones fill with color. */
.canvas-ring {
    --fill: 0%;
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, var(--fai-surface) 74%, transparent 75% 100%),
        conic-gradient(var(--fai-success) var(--fill), var(--fai-surface-3) var(--fill));
}

.prefs-battery .canvas-ring { background: var(--fai-surface-3); }

.zone-card { border-inline-start: 0.35rem solid var(--fai-border-strong); transition: border-color .3s ease, background-color .3s ease; }
.zone-empty   { border-inline-start-color: var(--fai-border-strong); background: var(--fai-surface-2); }
.zone-sparse  { border-inline-start-color: #ffd77a; }
.zone-warming { border-inline-start-color: #86d99c; }
.zone-full    { border-inline-start-color: var(--fai-success); }

.zone-dot {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--fai-border-strong);
}

.zone-sparse .zone-dot  { background: #ffd77a; }
.zone-warming .zone-dot { background: #86d99c; }
.zone-full .zone-dot    { background: var(--fai-success); }

.zone-fill {
    height: 0.35rem;
    border-radius: var(--fai-radius-pill);
    background: var(--fai-surface-3);
    overflow: hidden;
}

.zone-fill span {
    display: block;
    height: 100%;
    border-radius: var(--fai-radius-pill);
    background: var(--fai-success);
    transition: width .3s ease;
}

.prefs-battery .zone-fill span { transition: none; }