/* =========================================================================
   MS OFFICE LAB QUEST — Office Mockup Engine (Challenge & Graphs sections)
   Realistic Word / Excel / PowerPoint window mockups with CSS animation.
   ========================================================================= */

.modal.sim-modal{ max-width:860px; }
@media (max-width:900px){ .modal.sim-modal{ max-width:96vw; } }

.office-mock{
  border-radius:12px; overflow:hidden; border:1px solid var(--line);
  background:#f3f2f1; box-shadow:0 10px 30px rgba(0,0,0,.18); margin:4px 0 18px;
  font-family:"Segoe UI", Calibri, Arial, sans-serif; color:#1b1b1b; user-select:none;
}
.mock-titlebar{
  display:flex; align-items:center; gap:8px; padding:7px 12px; font-size:12.5px; font-weight:600;
  color:#fff; letter-spacing:.01em;
}
.word-mock .mock-titlebar{ background:#185abc; }
.excel-mock .mock-titlebar{ background:#0e6b3a; }
.ppt-mock .mock-titlebar{ background:#b1360e; }
.netmail-mock .mock-titlebar{ background:#5c3d99; }
.access-mock .mock-titlebar{ background:#a4373a; }
.mock-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.mock-dot.r{ background:#ff5f57; } .mock-dot.y{ background:#febc2e; } .mock-dot.g{ background:#28c840; }
.mock-filename{ margin-left:8px; opacity:.95; }
.mock-savebadge{ margin-left:auto; font-size:10.5px; opacity:.85; font-weight:500; }

.mock-ribbon{ background:#fafafa; border-bottom:1px solid #d7d7d7; }
.mock-tabs{ display:flex; gap:2px; padding:6px 10px 0; font-size:12px; font-weight:600; color:#444; }
.mock-tabs span{ padding:6px 12px 8px; border-radius:6px 6px 0 0; cursor:default; }
.mock-tabs span.active{ background:#fff; color:#111; border:1px solid #d7d7d7; border-bottom:2px solid #fff; margin-bottom:-1px; }
.word-mock .mock-tabs span.active{ border-top:2px solid #185abc; }
.excel-mock .mock-tabs span.active{ border-top:2px solid #0e6b3a; }
.ppt-mock .mock-tabs span.active{ border-top:2px solid #b1360e; }
.netmail-mock .mock-tabs span.active{ border-top:2px solid #5c3d99; }
.access-mock .mock-tabs span.active{ border-top:2px solid #a4373a; }

.mock-ribbon-groups{ display:flex; gap:2px; padding:8px 10px 10px; background:#fff; overflow-x:auto; }
.mock-group{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:4px 12px; border-right:1px solid #e4e4e4; min-width:64px; }
.mock-group:last-child{ border-right:none; }
.mock-gbtns{ display:flex; gap:5px; flex-wrap:wrap; justify-content:center; max-width:150px; }
.mock-ico{
  width:26px; height:24px; border-radius:4px; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; background:#f4f4f4; border:1px solid transparent; color:#333;
}
.mock-ico.target{ position:relative; }
.mock-glabel{ font-size:9.5px; color:#666; text-transform:none; letter-spacing:.01em; }

.mock-body{ background:#e9e9e9; padding:18px 14px; min-height:190px; display:flex; justify-content:center; }

/* ---- Word document page ---- */
.mock-page{
  background:#fff; width:100%; max-width:520px; min-height:230px; box-shadow:0 2px 10px rgba(0,0,0,.12);
  padding:26px 30px; font-size:13px; line-height:1.65; color:#222;
}
.mock-page h5{ margin:0 0 8px; font-size:15px; }
.mock-page p{ margin:0 0 9px; }
.mock-hl{ background:#bcd7ff; border-radius:2px; }
.mock-cursorline{ display:inline-block; width:1px; height:14px; background:#111; animation:blinkCursor 1s step-end infinite; vertical-align:middle; }
@keyframes blinkCursor{ 50%{ opacity:0; } }

/* ---- Excel grid ---- */
.mock-sheetwrap{ width:100%; overflow-x:auto; }
.mock-formulabar{ display:flex; align-items:center; gap:8px; background:#fff; border-bottom:1px solid #d7d7d7; padding:5px 10px; font-size:11.5px; color:#444;}
.mock-namebox{ border:1px solid #cfcfcf; border-radius:3px; padding:2px 8px; background:#fff; font-weight:700; min-width:46px; text-align:center;}
.mock-fx{ font-style:italic; color:#0e6b3a; font-weight:700; }
.mock-formulaval{ flex:1; border:1px solid #cfcfcf; border-radius:3px; padding:2px 8px; background:#fff; }
table.mock-sheet{ border-collapse:collapse; background:#fff; font-size:12px; min-width:440px; }
table.mock-sheet th, table.mock-sheet td{ border:1px solid #d7d7d7; padding:5px 10px; text-align:center; }
table.mock-sheet thead th{ background:#f3f2f1; color:#444; font-weight:700; }
table.mock-sheet tbody th{ background:#f3f2f1; color:#444; font-weight:700; }
table.mock-sheet td{ text-align:right; min-width:56px; }
table.mock-sheet td.lbl{ text-align:left; }
td.mock-active{ outline:2px solid #0e6b3a; outline-offset:-2px; background:#e8f5ee; }
td.mock-fill{ animation:cellFill .7s ease forwards; }
@keyframes cellFill{ from{ background:#fff; } to{ background:var(--fillc,#ffe9a8); } }
tr.mock-rowin{ animation:rowIn .45s ease both; }
@keyframes rowIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }

/* chart */
.mock-chartbox{ background:#fff; border:1px solid #d7d7d7; border-radius:6px; padding:14px 16px 8px; margin-top:10px; }
.mock-chart-title{ font-size:11.5px; font-weight:700; text-align:center; color:#333; margin-bottom:6px; }
.mock-bars{ display:flex; align-items:flex-end; gap:10px; height:110px; padding:0 6px; }
.mock-bars .bar{ flex:1; background:linear-gradient(180deg,#3b8ee0,#1e6fc4); border-radius:3px 3px 0 0; transform-origin:bottom; animation:barGrow .8s cubic-bezier(.2,.9,.3,1) both; position:relative; }
.mock-bars .bar span{ position:absolute; top:-16px; left:0; right:0; text-align:center; font-size:9.5px; color:#333; font-weight:700;}
@keyframes barGrow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
.mock-trend-svg{ width:100%; height:120px; display:block; }
.mock-trend-path{ fill:none; stroke:#e2532b; stroke-width:2.4; stroke-dasharray:600; stroke-dashoffset:600; animation:drawLine 1.1s ease forwards; }
@keyframes drawLine{ to{ stroke-dashoffset:0; } }
.mock-data-pt{ fill:#1e6fc4; opacity:0; animation:ptIn .3s ease forwards; }
@keyframes ptIn{ to{ opacity:1; } }

/* ---- PowerPoint slide ---- */
.mock-slidewrap{ width:100%; max-width:520px; }
.mock-slide{
  background:#fff; aspect-ratio:16/9; box-shadow:0 2px 10px rgba(0,0,0,.14); position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; padding:22px 26px;
}
.mock-slide .s-title{ font-size:17px; font-weight:800; color:#b1360e; margin:0 0 8px; }
.mock-slide .s-body{ font-size:12px; color:#333; line-height:1.5; }
.mock-slide .s-bullet{ margin:3px 0; padding-left:14px; position:relative; }
.mock-slide .s-bullet::before{ content:"•"; position:absolute; left:0; color:#b1360e; }
.mock-slide.enter{ animation:slideEnter .5s ease both; }
@keyframes slideEnter{ from{ opacity:0; transform:translateX(14px);} to{ opacity:1; transform:translateX(0);} }
.mock-slide .s-img{ width:64px; height:44px; border-radius:4px; background:linear-gradient(135deg,#ffd2c0,#ff9466); position:absolute; right:22px; bottom:20px; }
.mock-thumbstrip{ display:flex; gap:6px; margin-top:10px; }
.mock-thumbstrip .th{ width:46px; height:26px; border:2px solid #d7d7d7; border-radius:3px; background:#fff; }
.mock-thumbstrip .th.active{ border-color:#b1360e; }

/* ---- Netmail (Internet & Email) ---- */
.mock-browser-bar{ display:flex; align-items:center; gap:8px; background:#fff; border-bottom:1px solid #d7d7d7; padding:7px 12px; font-size:11.5px; color:#333; }
.mock-browser-lock{ color:#0e6b3a; }
.mock-browser-url{ flex:1; border:1px solid #cfcfcf; border-radius:14px; padding:4px 12px; background:#f3f2f1; }
.mock-inbox-list{ background:#fff; width:100%; max-width:520px; border:1px solid #e4e4e4; border-radius:6px; overflow:hidden; }
.mock-inbox-item{ display:flex; align-items:center; gap:10px; padding:9px 14px; font-size:12px; border-bottom:1px solid #eee; }
.mock-inbox-item:last-child{ border-bottom:none; }
.mock-inbox-item .mi-from{ font-weight:700; width:120px; flex-shrink:0; color:#333; }
.mock-inbox-item.unread .mi-from, .mock-inbox-item.unread .mi-subject{ font-weight:800; color:#111; }
.mock-inbox-item .mi-subject{ flex:1; color:#555; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mock-inbox-item .mi-time{ font-size:10.5px; color:#999; flex-shrink:0; }
.mock-inbox-item.active{ background:#f3eefc; border-left:3px solid #5c3d99; }

/* ---- MS Access ---- */
.mock-access-body{ width:100%; max-width:540px; }
.mock-access-body table.mock-sheet thead th{ background:#f3e2e2; }
.mock-access-navpane{ display:flex; gap:10px; background:#fff; border:1px solid #e4e4e4; border-radius:6px; padding:10px 12px; margin-bottom:10px; font-size:11.5px; color:#555; }
.mock-access-navpane b{ color:#a4373a; }

/* generic reveal + cursor click ping used across all three apps */
.mock-live-region{ transition:opacity .2s ease; }
.mock-live-region.mock-fading{ opacity:.12; }
.mock-ping{
  position:absolute; width:16px; height:16px; border-radius:50%; background:var(--ping,#0e6b3a);
  animation:pingPulse .7s ease-out; pointer-events:none;
}
@keyframes pingPulse{ 0%{ transform:scale(.4); opacity:.9;} 100%{ transform:scale(2.4); opacity:0;} }
.mock-callout{
  display:inline-block; margin-top:10px; font-size:12px; font-weight:700; color:#0e6b3a;
  background:#e8f5ee; border:1px solid #bfe3cf; border-radius:8px; padding:6px 12px; animation:rowIn .3s ease both;
}