/* ============================================================
   DCC-i Practice dashboard console — Practice Support hub preview
   and dedicated tools page. Visual sibling of the briefing shelf
   and infographic stand: purple stage, live hover/focus preview
   card on the left, clay console asset with app tiles on the right.
   ============================================================ */
.dcci-tools-console{max-width:none;width:100%;margin:0;font-family:'Montserrat',system-ui,sans-serif;}

/* Subtle count badge inside the purple stage (top-right) */
.dcci-tools-console-count{position:absolute;top:14px;right:16px;z-index:3;
  font-size:9.5px;font-weight:900;letter-spacing:.03em;color:#fff;white-space:nowrap;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:4px 11px;backdrop-filter:blur(3px);}

/* Live stage: preview card (left) + console (right) */
.dcci-tools-console-stage--live{position:relative;display:grid;
  grid-template-columns:auto auto;gap:22px;align-items:center;justify-items:center;justify-content:center;
  padding:24px 0 24px 60px;border-radius:16px;min-height:358px;
  background:radial-gradient(130% 80% at 70% 8%,#3a2470,#2a1a5e 70%);
  box-shadow:inset 0 2px 18px rgba(0,0,0,.4);overflow:hidden;}

/* Flashcards / games variant: rack and preview card SIDE BY SIDE.
   Uses an explicit two-column grid (not flex) so the rack image sits in its own
   track and can never push the preview card out of the stage. The rack asset
   keeps its natural aspect ratio (height-driven, auto width) so the absolutely
   positioned tiles stay aligned; the minmax(0,1fr) track absorbs its width and
   prevents grid blowout. Falls back to stacked on narrow. */
.dcci-tools-console--flashcards .dcci-tools-console-stage--live{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;justify-items:center;
  gap:20px;padding:22px 26px 24px;min-height:0;}
/* Rack sizing is FLUID, not fixed-pixel: the wrap fills its grid column and the
   asset scales to that width, so the rack can never overflow or get clipped on
   narrower laptop viewports. max-width caps how large it goes on wide desktops
   (roughly the previous 449px-tall size). Height follows the image's natural
   aspect ratio, which keeps the absolutely-positioned tiles aligned. */
.dcci-tools-console--flashcards .dcci-flashrack-wrap{order:0;grid-column:1;grid-row:1;justify-self:center;align-self:center;
  height:auto;width:100%;max-width:470px;}
.dcci-tools-console--flashcards .dcci-flashrack-wrap .dcci-tools-console-asset{height:auto;width:100%;max-width:100%;display:block;}
.dcci-tools-console--flashcards .dcci-tools-livepreview{order:0;grid-column:2;grid-row:1;justify-self:center;align-self:center;
  width:200px;max-width:200px;}
.dcci-tools-console--flashcards .dcci-tools-livepreview-meta,
.dcci-tools-console--flashcards .dcci-tools-livepreview-type{display:none !important;}
.dcci-tools-console--flashcards .dcci-tools-console-count{order:0;}
/* Tighter columns: give the card a little less room so the rack keeps its size. */
@media (max-width:1100px){
  .dcci-tools-console--flashcards .dcci-tools-livepreview{width:180px;max-width:180px;}
  .dcci-tools-console--flashcards .dcci-tools-console-stage--live{gap:14px;padding:20px;}
}
/* Narrow: stack rack over card, restoring the original single-column feel. */
@media (max-width:640px){
  .dcci-tools-console--flashcards .dcci-tools-console-stage--live{grid-template-columns:1fr;gap:16px;}
  .dcci-tools-console--flashcards .dcci-flashrack-wrap{max-width:420px;}
  .dcci-tools-console--flashcards .dcci-tools-livepreview{width:211px;max-width:211px;}
}

/* Selected-tool preview card (Daisy/DCC-i tactile style, fit-not-crop) */
.dcci-tools-livepreview{display:flex;flex-direction:column;width:276px;max-width:276px;text-decoration:none;
  justify-self:center;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,#fffdf9,#f4ecff);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 18px 34px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease;}
.dcci-tools-livepreview:hover,.dcci-tools-livepreview:focus-visible{transform:translateY(-3px);
  box-shadow:0 24px 42px rgba(0,0,0,.5);outline:none;}
.dcci-tools-livepreview.is-updating{opacity:.55;transform:translateY(2px);}
.dcci-tools-livepreview-thumb{position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;max-height:240px;background:#1f1147;overflow:hidden;}
.dcci-tools-livepreview-thumb img{display:block;width:100%;height:auto;max-height:240px;object-fit:contain;}
.dcci-tools-livepreview-thumb.is-placeholder{aspect-ratio:16/10;background:radial-gradient(120% 120% at 30% 20%,#7a4fd0,#3a2470);}
.dcci-tools-livepreview-body{display:flex;flex-direction:column;gap:8px;padding:14px 16px 16px;}
.dcci-tools-livepreview-feat{align-self:flex-start;background:linear-gradient(135deg,#ff5ea0,#e3267a);color:#fff;
  border-radius:999px;padding:3px 11px;font-size:9px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;
  box-shadow:0 4px 9px rgba(227,38,122,.4);}
.dcci-tools-livepreview-title{font-size:15px;line-height:1.18;font-weight:900;color:#2e1250;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
.dcci-tools-livepreview-desc{font-size:11px;line-height:1.3;font-weight:600;color:#5a4a72;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
.dcci-tools-livepreview-meta{display:flex;flex-wrap:wrap;gap:6px;}
.dcci-tools-livepreview-meta span{font-size:9.5px;font-weight:800;letter-spacing:.02em;border-radius:999px;padding:3px 9px;line-height:1.2;}
.dcci-tools-livepreview-type{background:#efe8ff;color:#5527c8;}
.dcci-tools-livepreview-time{background:#eaf6fa;color:#3d7e94;}

/* Clay console asset (right) with app tiles overlaid on its screen */
.dcci-tools-console-wrap{position:relative;display:inline-block;height:358px;justify-self:end;}
.dcci-tools-console-wrap .dcci-tools-console-asset{display:block;height:358px;width:auto;max-width:none;}
/* App tiles sit on the console screen in a 3-column grid (tuned to the artwork) */
.dcci-tools-console-tiles{position:absolute;top:13%;left:13%;right:13%;bottom:26%;z-index:2;
  display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:9% 8%;}
.dcci-tools-tile{display:flex;align-items:center;justify-content:center;border-radius:10px;overflow:hidden;
  background:linear-gradient(150deg,#fff,#eee6ff);box-shadow:0 4px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .16s ease;}
.dcci-tools-tile img{display:block;width:100%;height:100%;object-fit:cover;}
.dcci-tools-tile-fallback{font-size:15px;font-weight:900;color:#5527c8;}
.dcci-tools-tile:hover,.dcci-tools-tile:focus{transform:scale(1.08);outline:none;z-index:3;
  box-shadow:0 8px 14px rgba(0,0,0,.5);}

/* ── MCA flashcards rack: 3×2 slots on the card-rack artwork ──
   Same tile mechanics as the console, but positioned to the rack's six slots.
   Percentages are tuned to the Flashcards-practice-prompts.webp artwork; adjust
   the inset/gap if the rack image is swapped. */
.dcci-flashrack-tiles{top:14%;left:11%;right:11%;bottom:12%;
  grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);grid-auto-rows:1fr;gap:8% 6%;}
.dcci-flashrack-tiles .dcci-tools-tile{border-radius:8px;
  background:linear-gradient(150deg,#fff,#f3ecff);}
/* Per-slot fine-tuning of the flashcard icons within the rack (console-tuned). */
.dcci-flashrack-tiles .dcci-tools-tile:nth-child(1){transform:translateX(-20px);}
.dcci-flashrack-tiles .dcci-tools-tile:nth-child(2){transform:translateX(-3px);}

/* Empty stage: just the console asset, centred */
.dcci-tools-console-stage--empty{position:relative;display:flex;align-items:center;justify-content:flex-end;
  padding:0 40px;border-radius:16px;height:320px;
  background:radial-gradient(130% 80% at 70% 8%,#3a2470,#2a1a5e 70%);
  box-shadow:inset 0 2px 18px rgba(0,0,0,.4);overflow:hidden;}
.dcci-tools-console-stage--empty .dcci-tools-console-asset{display:block;max-width:100%;width:auto;height:288px;object-fit:contain;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.45));}

/* ---- Dedicated full tools page: grid of cards ---- */
.dcci-tools-console--full{max-width:none;}
.dcci-tools-full-head{display:flex;align-items:baseline;gap:12px;margin:0 0 16px;}
.dcci-tools-full-title{margin:0;font-size:clamp(1.4rem,3vw,2rem);font-weight:950;color:#2e1250;}
.dcci-tools-full-count{font-size:12px;font-weight:800;color:#3d7e94;}
.dcci-tools-full-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;}
.dcci-tools-card{display:flex;flex-direction:column;text-decoration:none;border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg,#fffdf9,#f4ecff);border:1px solid rgba(46,18,80,.08);
  box-shadow:0 10px 20px rgba(46,18,80,.12);transition:transform .16s ease,box-shadow .16s ease;}
.dcci-tools-card:hover,.dcci-tools-card:focus-visible{transform:translateY(-3px);box-shadow:0 16px 28px rgba(46,18,80,.2);outline:none;}
.dcci-tools-card-thumb{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/10;background:#f0eaff;overflow:hidden;}
.dcci-tools-card-thumb img{display:block;width:100%;height:100%;object-fit:cover;}
.dcci-tools-card-thumb.is-placeholder{background:radial-gradient(120% 120% at 30% 20%,#7a4fd0,#3a2470);color:#fff;font-size:28px;font-weight:900;}
.dcci-tools-card-body{display:flex;flex-direction:column;gap:7px;padding:14px 16px 16px;}
.dcci-tools-card-feat{align-self:flex-start;background:linear-gradient(135deg,#ff5ea0,#e3267a);color:#fff;border-radius:999px;
  padding:2px 10px;font-size:8.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;}
.dcci-tools-card-title{font-size:15px;line-height:1.2;font-weight:900;color:#2e1250;}
.dcci-tools-card-desc{font-size:12px;line-height:1.4;font-weight:600;color:#5a4a72;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
.dcci-tools-card-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;}
.dcci-tools-card-meta span{font-size:9.5px;font-weight:800;border-radius:999px;padding:3px 9px;}
.dcci-tools-card-type{background:#efe8ff;color:#5527c8;}
.dcci-tools-card-time{background:#eaf6fa;color:#3d7e94;}
.dcci-tools-full-empty{margin:0;color:#5a4a72;font-weight:600;}

/* ── MCA games and puzzles: reuses the flashcards rack layout/mechanics ──
   The games preview carries .dcci-tools-console--flashcards so it inherits the
   vertical rack stage, plus .dcci-tools-console--games / .dcci-gamerack-* hooks
   for future divergence (e.g. a bespoke games-console artwork). Until then it
   renders identically to the flashcards rack. */
.dcci-tools-console--games .dcci-tools-console-count{background:rgba(255,255,255,.16);}

/* ── Games rack: ONE ROW of three tiles that scrolls sideways ──
   Overrides the inherited flashcards 3×2 grid. The tiles track sits in the same
   absolutely-positioned box on the console screen, but becomes a horizontally
   scrollable flex row: three tiles visible, the rest reachable via the ‹ › arrows
   (or swipe / trackpad scroll). Scroll-snap keeps tiles aligned to the screen. */
.dcci-gamerack-tiles{
  /* Inset to the Games.webp console SCREEN (the cream panel), tuned by eye.
     Mirrored in the theme's dcci-mca.css, which must use !important there to
     beat the tools-console overrides that share this class. */
  top:10% !important;left:28% !important;right:28% !important;bottom:42% !important;
  padding:0 !important;transform:none !important;
  display:flex !important;grid-template-columns:none !important;grid-template-rows:none !important;
  flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px;
  overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;}
.dcci-gamerack-tiles::-webkit-scrollbar{display:none;}
/* Exactly three across: full track width minus the two 8px gaps, divided by 3.
   Fixed px gaps (rather than %) keep the maths exact so a fourth tile can never
   creep into view. aspect-ratio keeps each tile square regardless of track height. */
.dcci-gamerack-tiles .dcci-tools-tile{
  flex:0 0 calc((100% - 16px) / 3);
  width:calc((100% - 16px) / 3);
  max-width:calc((100% - 16px) / 3);
  min-width:calc((100% - 16px) / 3);
  aspect-ratio:1/1;height:auto;scroll-snap-align:start;
  border-radius:8px;background:linear-gradient(150deg,#fff,#fbeff6);}
/* The flashcards per-slot nudges must not apply to the scrolling games row. */
.dcci-gamerack-tiles .dcci-tools-tile:nth-child(1),
.dcci-gamerack-tiles .dcci-tools-tile:nth-child(2){transform:none;}
.dcci-gamerack-tiles .dcci-tools-tile:hover,
.dcci-gamerack-tiles .dcci-tools-tile:focus{transform:scale(1.06);}

/* Scroll arrows, aligned with the tile row on the console screen. The tiles sit
   between 10% and 58% of the rack height, so centre the arrows on ~34%. */
.dcci-gamerack-nav{position:absolute;top:34%;transform:translateY(-50%);z-index:4;
  display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;
  border:none;border-radius:999px;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,#ff5ea0,#e3267a);
  box-shadow:0 4px 10px rgba(0,0,0,.45);transition:transform .16s ease,opacity .16s ease;}
.dcci-gamerack-nav:hover{transform:translateY(-50%) scale(1.1);}
.dcci-gamerack-nav:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.dcci-gamerack-nav[hidden]{display:none;}
.dcci-gamerack-nav--prev{left:2%;}
.dcci-gamerack-nav--next{right:2%;}

@media (max-width:560px){
  .dcci-tools-console{max-width:100%;}
  .dcci-tools-console-stage--live{grid-template-columns:1fr;justify-items:center;gap:18px;}
  .dcci-tools-console-wrap{justify-self:center;}
  .dcci-tools-livepreview{max-width:100%;}
  .dcci-tools-full-grid{grid-template-columns:1fr;}
}