/* Cozmo Action Card — enhancement layer (adds unit header, tags, $/metric, tasks drawer, actions, self-play) */
/* ===== Action Card enhancement layer — ADDS to the dynamic cube card, never replaces it ===== */
.acard{display:flex;flex-direction:column}
.enh-unit{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--line-soft)}
.enh-unit-l{display:flex;align-items:center;gap:10px;min-width:0}
.enh-uic{width:34px;height:34px;border-radius:10px;background:rgba(99,102,241,.10);display:grid;place-items:center;flex:none}
.enh-uic svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.enh-risk .enh-uic{background:rgba(244,63,94,.12)} .enh-risk .enh-uic svg{stroke:var(--coral)}
.enh-uname{font:600 14px/1.15 var(--font-head,'Rubik','Assistant',sans-serif);color:var(--accent-deep)}
.enh-uname span{font:800 10px/1 var(--font-head,'Rubik','Assistant',sans-serif);letter-spacing:.07em;color:var(--faint);margin-left:6px;white-space:nowrap}
.enh-usub{font-size:11px;color:var(--faint);font-weight:600;margin-top:2px}
.enh-held{text-align:right;font-size:10.5px;color:var(--faint);font-weight:600;line-height:1.3;flex:none}
.enh-held b{color:var(--accent-deep)}
.enh-hands{display:inline-flex;align-items:center;gap:5px;margin-top:5px;background:#fff;border:1px solid var(--line-soft);border-radius:999px;padding:3px 8px;font:700 9.5px/1 var(--font-head,'Rubik','Assistant',sans-serif);color:var(--faint)}
.enh-hands svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.enh-risk .enh-hands{color:var(--coral);border-color:rgba(244,63,94,.3);background:rgba(244,63,94,.06)}
.enh-trow{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.enh-trow-l{min-width:0}
.enh-impact{text-align:right;flex:none;padding-top:2px}
.enh-impact .ef{font:600 23px/1 var(--font-head,'Rubik','Assistant',sans-serif);white-space:nowrap;background:linear-gradient(135deg,#6366F1,#22D3EE);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.enh-impact.risk .ef{background:none;-webkit-text-fill-color:#EC4899;color:#EC4899}
.enh-impact .eu{font-size:9.5px;color:var(--faint);font-weight:700;margin-top:4px;white-space:nowrap}
.enh-tags{display:flex;gap:7px;flex-wrap:wrap;margin:9px 0 2px}
.enh-tag{font:800 10px/1 var(--font-head,'Rubik','Assistant',sans-serif);letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.enh-tag.rev{color:var(--accent);background:rgba(99,102,241,.10)}
.enh-tag.qw{color:#0E9E8C;background:rgba(45,212,191,.14)}
.enh-tag.crit{color:var(--coral);background:rgba(244,63,94,.12)}
.enh-tasks{margin-top:14px;padding-top:13px;border-top:1px solid var(--line-soft)}
.enh-tasks-l{display:flex;align-items:center;font:800 9.5px/1 var(--font-head,'Rubik','Assistant',sans-serif);letter-spacing:.11em;text-transform:uppercase;color:var(--faint);margin-bottom:8px;cursor:pointer;user-select:none}
.enh-tasks-l .cnt{margin-left:auto;letter-spacing:0;text-transform:none;background:#fff;border:1px solid var(--line-soft);border-radius:999px;padding:3px 8px;font:600 9.5px/1 var(--font-head,'Rubik','Assistant',sans-serif);color:var(--accent-deep)}
.enh-caret{width:7px;height:7px;margin-left:9px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);transform:rotate(45deg);transition:transform .2s;flex:none;position:relative;top:-1px}
.enh-tasks.open .enh-caret{transform:rotate(-135deg);top:1px}
.enh-tasklist{overflow:hidden;max-height:0;opacity:0;transition:max-height .5s cubic-bezier(.33,0,.2,1),opacity .4s ease}
.enh-tasks.open .enh-tasklist{max-height:600px;opacity:1}
.enh-bar{height:6px;border-radius:999px;background:rgba(99,102,241,.14);overflow:hidden;margin-bottom:9px}
.enh-bar>span{display:block;height:100%;background:var(--grad-brand);border-radius:999px}
.enh-risk .enh-bar>span{background:linear-gradient(90deg,#F43F5E,#6366F1)}
.enh-task{display:flex;align-items:center;gap:9px;padding:6px 10px;border:1px solid var(--line-soft);border-radius:var(--r-sm,12px);margin-bottom:5px;background:#fff}
.enh-task:last-child{margin-bottom:0}
.enh-tk-ic{width:18px;height:18px;border-radius:6px;flex:none;display:grid;place-items:center}
.enh-tk-ic svg{width:11px;height:11px;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.enh-tk-ic.done{background:rgba(45,212,191,.16)} .enh-tk-ic.done svg{stroke:#0E9E8C}
.enh-tk-ic.prog{background:rgba(99,102,241,.12)} .enh-tk-ic.prog svg{fill:var(--accent);stroke:none}
.enh-tk-ic.todo{border:2px solid var(--line-soft);background:#fff}
.enh-tk-tx{flex:1;min-width:0}
.enh-tk-tx .enh-t{display:block;font:700 12px/1.2 var(--font-body,'Rubik','Assistant',sans-serif);color:var(--text)}
.enh-tk-tx .enh-t.done{color:var(--faint);text-decoration:line-through}
.enh-tk-tx .enh-m{display:block;font-size:9.5px;color:var(--faint);font-weight:600;margin-top:1px}
.enh-tk-st{font:800 8.5px/1 var(--font-head,'Rubik','Assistant',sans-serif);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.enh-tk-st.done{color:#0E9E8C} .enh-tk-st.prog{color:var(--accent)} .enh-tk-st.todo{color:var(--faint)}
.enh-acts{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.enh-btn2{display:inline-flex;align-items:center;gap:5px;font:700 11.5px/1 var(--font-body,'Rubik','Assistant',sans-serif);padding:8px 13px;border-radius:var(--r-sm,12px);border:1px solid var(--line-soft);background:#fff;cursor:pointer;color:var(--faint)}
.enh-btn2 svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.enh-btn2.reject{color:#EC4899;border-color:rgba(236,72,153,.35)}
.enh-btn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:700 12px/1 var(--font-body,'Rubik','Assistant',sans-serif);color:#fff;padding:9px 17px;border-radius:var(--r-sm,12px);background:var(--grad-brand);border:0;cursor:pointer}
.enh-btn svg{width:13px;height:13px}
/* interactive: tasks click to cycle status; progress animates */
.enh-task{cursor:pointer;transition:border-color .25s ease,background .25s ease,box-shadow .25s ease}
.enh-task:hover{border-color:var(--accent-soft,#A5B4FC);background:#fbfbff}
.enh-tk-ic{transition:background .35s ease}
.enh-tk-st{transition:color .35s ease}
.enh-tk-tx .enh-t{transition:color .35s ease}
.enh-bar>span{transition:width .7s cubic-bezier(.33,0,.2,1)}
/* gentle tick-in when a task completes (soft, not a hard snap) */
.enh-tk-ic.done{animation:enh-tickin .45s cubic-bezier(.34,1.4,.5,1) both}
@keyframes enh-tickin{0%{transform:scale(.55);opacity:.3}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
/* dynamic card states from the software mockup (snoozed / rejected / assigned) */
.enh-state{display:inline-flex;align-items:center;gap:6px;font:700 12px/1 var(--font-body,'Rubik','Assistant',sans-serif);padding:9px 13px;border-radius:var(--r-sm,12px)}
.enh-state.snooze{color:var(--faint);background:rgba(63,61,86,.06)}
.enh-state.reject{color:#EC4899;background:rgba(236,72,153,.10)}
.enh-state.assigned{color:var(--accent);background:rgba(99,102,241,.10)}
.enh-btn2.resume,.enh-btn2.undo{margin-left:auto}
.enh-st-snoozed .acard-tiles,.enh-st-snoozed .enh-tasks,.enh-st-snoozed .acard-explain,.enh-st-snoozed .enh-trow,.enh-st-snoozed .acard-sub,
.enh-st-rejected .acard-tiles,.enh-st-rejected .enh-tasks,.enh-st-rejected .acard-explain,.enh-st-rejected .enh-trow,.enh-st-rejected .acard-sub{opacity:.42;transition:opacity .25s;pointer-events:none}
/* tighter cubes — shorter, less empty space at the bottom, kept uniform (text stays top-aligned) */
.acard .acard-tiles .tile>.tile-inner{padding-top:10px;padding-bottom:10px}
.acard .acard-tiles .ic-badge{margin-bottom:4px}
.acard .acard-tiles .tile-label{margin-bottom:3px}
.acard .acard-tiles .tile-body{line-height:1.34}
.acard .acard-tiles .vz{margin-top:6px}
.acard .acard-tiles .vz-bars{height:30px}
.acard .acard-tiles .vz-track{margin-top:7px}
/* the marketing text beside a (now tall) action card floated vertically-centered, leaving a big
   empty gap above it. Top-align the row so the text starts at the card's top — only rows with a card. */
.feature-row:has(.acard){align-items:start}
.feature-row:has(.acard) > .fr-text{align-self:start}
.enh-info-note{display:inline-block;margin-left:8px;font:700 9px/1 var(--font-head,'Rubik','Assistant',sans-serif);letter-spacing:.05em;text-transform:uppercase;color:var(--faint);background:rgba(63,61,86,.05);border:1px solid var(--line-soft);border-radius:999px;padding:3px 7px}