/* /resources/css/grade-1-time-concepts.css — styles for grade-1-time-concepts.html */

.clock-face { width:130px;height:130px;border-radius:50%;border:4px solid var(--rp);position:relative;margin:0 auto 8px;background:#fff; }
    .clock-num { position:absolute;font-size:.7rem;font-weight:700;color:var(--rt); }
    .cn12{top:4px;left:50%;transform:translateX(-50%);}
    .cn3{right:6px;top:50%;transform:translateY(-50%);}
    .cn6{bottom:4px;left:50%;transform:translateX(-50%);}
    .cn9{left:6px;top:50%;transform:translateY(-50%);}
    .hand{position:absolute;bottom:50%;left:50%;transform-origin:bottom center;background:var(--rt);border-radius:4px;}
    .hour-hand{width:4px;transform:rotate(0deg) translateX(-50%);margin-left:-2px;}
    .min-hand{width:3px;background:var(--rp);}
    .clock-center{position:absolute;width:8px;height:8px;background:var(--rp);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);}
    .clock-label{text-align:center;font-weight:600;font-size:.9rem;color:var(--rt);}
    .clocks-row{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin:16px 0;}
    .day-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center;margin:12px 0;}
    .day-cell{padding:6px 4px;border-radius:6px;font-size:.8rem;font-weight:600;background:var(--rol);color:var(--rt);}
    .day-cell.today{background:var(--rp);color:#fff;}