/* Time management lesson. All rules scoped under .tmg-* */

.tmg-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tmg-note { font-size: 13px; color: var(--dim); text-align: center; max-width: 300px; }
.tmg-hero img { display: block; width: 280px; max-width: 100%; max-height: 30vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123,92,253,.3)); }
.tmg-hero.art img { width: 300px; max-height: 36vh; }
.tmg-hero.small img { max-height: 18vh; }

/* the shift */
.tmg-shift { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 8px; }
.tmg-hud { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.tmg-hud b { font: 800 22px var(--mono); color: var(--gold); margin-left: 6px; }
.tmg-clock { flex: 1; height: 8px; border-radius: 4px; background: var(--raised); overflow: hidden; }
.tmg-clock i { display: block; height: 100%; width: 100%; background: var(--violet-bright); }
.tmg-desk { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 104px); gap: 8px; padding: 8px; border-radius: 18px; background: var(--surface); border: 2px solid var(--line-strong); }
.tmg-slot { position: relative; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px dashed var(--line); }
.tmg-card { position: absolute; inset: 0; margin: 0; padding: 0; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: inherit; color: var(--text); cursor: pointer; overflow: hidden; animation: tmg-pop .22s ease-out; }
.tmg-card b { font: 800 20px var(--mono); position: relative; z-index: 1; }
.tmg-card small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; position: relative; z-index: 1; }
.tmg-card.gold { background: linear-gradient(160deg, #fcd27a, #e3a52e); color: #2b1d02; border: 2px solid #ffe2a3; box-shadow: 0 4px 0 #a8761a; }
.tmg-card.red { background: linear-gradient(160deg, #f07a7a, #c94141); color: #fff; border: 2px solid #ffb0b0; box-shadow: 0 4px 0 #8e2a2a; animation: tmg-pop .22s ease-out, tmg-throb .6s ease-in-out infinite alternate; }
.tmg-ring { position: absolute; inset: 6px; border-radius: 10px; background: conic-gradient(rgba(255,255,255,.35) calc(var(--p, 1) * 360deg), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); }
.tmg-card em { position: absolute; left: 0; bottom: 0; height: 100%; width: 0; background: rgba(255,255,255,.35); }
.tmg-card.doing em { animation: tmg-fill 1s linear forwards; }
.tmg-card.doing { animation: none; }
.tmg-card.gone { opacity: 0; transform: scale(.8); transition: opacity .25s, transform .25s; pointer-events: none; }
.tmg-shift.busy .tmg-card:not(.doing) { filter: saturate(.5) brightness(.8); }
.tmg-shift.over .tmg-desk { opacity: .55; }
@keyframes tmg-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tmg-throb { to { transform: scale(1.04); } }
@keyframes tmg-fill { to { width: 100%; } }
@media (max-height: 700px) { .tmg-desk { grid-template-rows: repeat(2, 88px); } }

/* your shift */
.tmg-bars { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 14px; }
.tmg-br { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.tmg-br span { font-size: 14px; font-weight: 700; color: var(--dim); }
.tmg-br b { font: 800 16px var(--mono); }
.tmg-bt { grid-column: 1 / -1; grid-row: 2; height: 18px; border-radius: 9px; background: var(--raised); border: 1px solid var(--line); }
.tmg-bt i { display: block; height: 100%; width: 0; border-radius: 9px; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.tmg-br.red i { background: var(--red); } .tmg-br.red b { color: #f08a8a; }
.tmg-br.gold i { background: var(--gold); } .tmg-br.gold b { color: var(--gold); }
.tmg-bars.on .tmg-bt i { width: max(4px, var(--w)); }

/* two tasks */
.tmg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 340px; }
.tmg-two div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); text-align: center; transition: transform .3s, border-color .3s; }
.tmg-two small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.tmg-two b { font-size: 18px; }
.tmg-two span { font-size: 14px; color: var(--dim); }
.tmg-two .red { border-color: var(--red); } .tmg-two .red span { color: #f08a8a; font-weight: 800; }
.tmg-two .gold { border-color: var(--gold); } .tmg-two .gold b { color: var(--gold); }
.tmg-two.chose .red { transform: scale(1.05); background: rgba(216,85,85,.14); }
.tmg-two .plain.win { border-color: var(--mint); background: rgba(63,214,154,.12); }

/* Eisenhower's grid */
.tmg-grid { display: grid; grid-template-columns: 30px 1fr 1fr; grid-template-rows: auto 1fr 1fr; gap: 6px; width: 100%; max-width: 340px; }
.tmg-ax { text-align: center; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.tmg-ay { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.tmg-cell { min-height: 100px; margin: 0; padding: 8px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); font: inherit; color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; cursor: default; }
.tmg-cell small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.tmg-cell.do small { color: var(--red); } .tmg-cell.plan small { color: var(--gold); } .tmg-cell.hand small { color: var(--violet-bright); } .tmg-cell.drop small { color: var(--faint); }
.tmg-cell.plan { border-color: rgba(252,192,80,.5); }
.tmg-grid.ask .tmg-cell { cursor: pointer; border-style: dashed; }
.tmg-grid.ask .tmg-cell.done { border-style: solid; border-color: var(--mint); }
.tmg-cv { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tmg-chip { font-style: normal; font-size: 13px; font-weight: 700; line-height: 1.25; padding: 5px 8px; border-radius: 8px; background: var(--raised); text-align: center; }
.tmg-chip.red { background: rgba(216,85,85,.22); color: #f6a3a3; }
.tmg-chip.gold { background: rgba(252,192,80,.18); color: var(--gold); }
.tmg-grid .tmg-chip { opacity: 0; transition: opacity .4s; }
.tmg-grid.lit .tmg-chip, .tmg-grid.ask .tmg-chip, .tmg-grid:not(.ask):not(.lit) .tmg-chip { opacity: 1; }
.tmg-grid.lit .tmg-cell.plan { box-shadow: 0 0 0 3px rgba(252,192,80,.25); }
@media (max-height: 700px) { .tmg-cell { min-height: 80px; } }
.bank.tmg-bank { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }