/* toolbars.css: Internet Explorer 6 chrome, the toolbars that ate it, and the way out (desktopToolbars, toolbars.js).
   Every icon is CSS, SVG-free text or an emoji; nothing is fetched. Reduced motion lands every state at once. */

/* the blue 'e': a desktop icon, a Start menu entry, the address bar page icon */
.ie-e { display: inline-block; position: relative; width: 1em; height: 1em; font: bold italic 1em/1 Arial, sans-serif; color: #1e6fd9; text-shadow: 1px 1px 0 rgba(0,0,0,.25); }
.ie-e::after { content: ""; position: absolute; left: -18%; top: 32%; width: 134%; height: 34%; border: .12em solid #ffd000; border-left-color: transparent; border-radius: 50%; transform: rotate(-22deg); }
.dicon .ie-e { font-size: 30px; }

/* the ticker ad: one of the jokes in the marquee, now clickable */
.ticker-ad { background: none; border: 0; box-shadow: none; min-width: 0; min-height: 0; padding: 0; margin: 0; font: inherit; color: #ff0; cursor: pointer; text-decoration: underline; animation: blink 1s steps(1) infinite; }
.ticker-ad:hover { color: #fff; }

/* Start menu submenus: Programs, Settings */
#start-menu li.sm-sub { position: relative; }
#start-menu .sm-sub-btn .sm-arrow { float: right; margin-left: 12px; }
#start-menu .sm-submenu { position: absolute; left: 100%; top: -3px; margin: 0; padding: 3px; list-style: none; min-width: 200px; background: var(--win-bg); z-index: 1002;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; }
#start-menu .sm-submenu li a, #start-menu .sm-submenu li .linkish { display: flex; align-items: center; gap: 6px; }

/* ---------- the IE window ---------- */
#iexplore.ie-win { display: flex; flex-direction: column; overflow: hidden; }
#iexplore.ie-win .window-body { position: relative; flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: none; overflow: hidden; background: var(--win-bg); }
#iexplore.ie-win:not(.maximized) .window-body { height: 70vh; }
#iexplore.ie-win.maximized .window-body { max-height: none; }

.ie-menubar { display: flex; align-items: center; gap: 1px; padding: 1px 2px; flex: 0 0 auto; position: relative; z-index: 6; border-bottom: 1px solid #fff; }
.ie-menu-wrap { position: relative; }
.ie-menu-btn { background: none; box-shadow: none; border: 0; min-width: 0; min-height: 0; padding: 3px 7px; font: inherit; color: #000; cursor: default; }
.ie-menu-btn:hover, .ie-menu-btn[aria-expanded="true"] { background: #000080; color: #fff; }
.ie-menu-btn:focus { outline: 1px dotted #000; outline-offset: -2px; }
.ie-menu { position: absolute; left: 0; top: 100%; min-width: 190px; padding: 3px; background: var(--win-bg); z-index: 7;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; }
.ie-menu-item { display: block; width: 100%; text-align: left; background: none; box-shadow: none; border: 0; min-width: 0; min-height: 0; padding: 4px 22px 4px 22px; font: inherit; color: #000; white-space: nowrap; }
.ie-menu-item:hover:not(:disabled), .ie-menu-item:focus { background: #000080; color: #fff; outline: none; }
.ie-menu-item:disabled { color: grey; text-shadow: 1px 1px 0 #fff; }
.ie-throbber { margin-left: auto; position: relative; width: 26px; height: 24px; background: #000; color: #5bb0ff; font: bold italic 18px/24px Arial, sans-serif; text-align: center; flex: 0 0 auto; box-shadow: inset 1px 1px grey, inset -1px -1px #fff; }
.ie-throbber::before { content: "e"; }
.ie-throbber::after { content: ""; position: absolute; left: 1px; top: 8px; width: 22px; height: 8px; border: 2px solid #ffd000; border-left-color: transparent; border-radius: 50%; transform: rotate(-20deg); animation: ie-spin 1.1s linear infinite; }
@keyframes ie-spin { to { transform: rotate(340deg); } }

.ie-navbar { display: flex; align-items: center; gap: 2px; padding: 2px 4px; flex: 0 0 auto; border-top: 1px solid grey; border-bottom: 1px solid #fff; }
.ie-nav { background: none; box-shadow: none; min-width: 0; min-height: 24px; padding: 0 7px; font: inherit; white-space: nowrap; }
.ie-nav:hover:not(:disabled) { box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; }
.ie-nav:disabled { color: grey; text-shadow: 1px 1px 0 #fff; }
.ie-addr { display: flex; align-items: center; gap: 4px; padding: 2px 4px; flex: 0 0 auto; border-top: 1px solid grey; border-bottom: 1px solid #fff; }
.ie-addr label { white-space: nowrap; }
.ie-addr .ie-e { font-size: 14px; flex: 0 0 auto; }
.ie-addr-in { flex: 1 1 auto; min-width: 0; height: 21px; font: 12px Arial, sans-serif; background: #fff !important; color: #000 !important; }
.ie-go { min-width: 0; min-height: 21px; padding: 0 8px; }

/* the installer's blip, then the toolbars themselves: a stack that scrolls so the page keeps its last 40px */
.ie-blip { display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 8px; flex: 0 0 auto; background: #fff; color: #000; font-size: 11px; border-bottom: 1px solid grey; }
.ie-prog { flex: 1 1 auto; height: 12px; position: relative; overflow: hidden; background: #fff; box-shadow: inset 1px 1px grey, inset -1px -1px #fff; }
.ie-prog-bar { position: absolute; top: 1px; bottom: 1px; left: 1px; width: 40%; background: repeating-linear-gradient(90deg, #000080 0 8px, transparent 8px 10px); animation: ie-prog .5s linear infinite; }
@keyframes ie-prog { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.ie-stack { flex: 0 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.ie-tb { display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 4px 0 2px; flex: 0 0 auto; background: var(--tb-bg, silver); color: var(--tb-fg, #000); white-space: nowrap; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.55); border-bottom: 1px solid rgba(0,0,0,.4); animation: ie-drop .35s ease-out; }
@keyframes ie-drop { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
.ie-grip { width: 3px; height: 22px; border-left: 1px solid #fff; border-right: 1px solid grey; margin-right: 2px; flex: 0 0 auto; }
.ie-tb-logo { display: inline-flex; align-items: center; gap: 5px; font-weight: bold; font-size: 12px; flex: 0 0 auto; text-shadow: 1px 1px 0 rgba(0,0,0,.15); }
.ie-tb-ico { font: bold 15px/1 Arial, sans-serif; }
.ie-pr { display: inline-flex; gap: 1px; padding: 1px; background: #fff; box-shadow: inset 1px 1px grey; flex: 0 0 auto; }
.ie-pr i { display: block; width: 5px; height: 9px; background: #e0e0e0; border: 1px solid #999; }
.ie-tb-search { display: inline-flex; align-items: center; gap: 2px; margin: 0; flex: 0 0 auto; }
.ie-tbq { width: 170px; height: 21px; font: 11px "Pixelated MS Sans Serif", Arial, sans-serif; padding: 2px 4px; background: #fff; box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; border: 0; }
.ie-tbb { min-width: 0; min-height: 22px; padding: 0 7px; white-space: nowrap; color: #000; font-size: 11px; flex: 0 0 auto; }
.ie-tbx { margin-left: auto; min-width: 16px; min-height: 16px; width: 16px; height: 16px; padding: 0; line-height: 14px; font-weight: bold; color: #000; flex: 0 0 auto; }

/* the page: a sunken white panel that shrinks to a 40px strip and never past it */
.ie-content { flex: 1 1 0; min-height: 40px; overflow: auto; background: #fff; color: #000; padding: 6px; box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; }
.ie-content .ie-loading, .ie-content .ie-err { margin: 4px; font-family: "Courier New", monospace; }
.ie-content .ie-page-toolbar { margin-top: 0; }
#iexplore.ie-done .ie-content { padding: 8px; box-shadow: none; }

.ie-status { display: flex; align-items: stretch; gap: 1px; height: 22px; padding: 1px 1px 0; flex: 0 0 auto; border-top: 1px solid #fff; }
.ie-status-field { display: inline-flex; align-items: center; gap: 5px; padding: 0 6px; box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px grey; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ie-status-main { flex: 1 1 auto; min-width: 0; }
.ie-status-text { overflow: hidden; text-overflow: ellipsis; }
.ie-shield { display: inline-block; width: 12px; height: 14px; flex: 0 0 auto; background: linear-gradient(#ffe56b, #d99a00); clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); color: #000; font: bold 10px/13px Arial, sans-serif; text-align: center; }
.ie-balloon { position: absolute; right: 14px; bottom: 30px; max-width: 280px; padding: 6px 8px; background: #ffffe1; color: #000; border: 1px solid #000; box-shadow: 2px 2px 0 rgba(0,0,0,.4); z-index: 5; font-size: 11px; }
.ie-balloon::after { content: ""; position: absolute; right: 18px; bottom: -8px; border: 8px solid transparent; border-top-color: #000; border-bottom: 0; }
.ie-balloon b { display: block; margin-bottom: 2px; }

/* ---------- the way out ---------- */
.ie-ao-intro { margin: 0 0 6px; }
.ie-ao-list { list-style: none; margin: 0 0 8px; padding: 2px; max-height: 50vh; overflow: auto; }
.ie-ao-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-bottom: 1px dotted #aaa; }
.ie-ao-ico { font: bold 16px/1 Arial, sans-serif; width: 22px; text-align: center; flex: 0 0 auto; }
.ie-ao-text { flex: 1 1 auto; min-width: 0; }
.ie-ao-text b { display: block; }
.ie-ao-text small { display: block; color: #444; font-size: 10px; }
.ie-ao-empty { padding: 8px; }
.ie-uninst { min-width: 0; min-height: 22px; padding: 0 10px; flex: 0 0 auto; }
.ie-ao-actions { justify-content: flex-end; }
.ie-ao-reset { font-weight: bold; }
/* the Yes button dodges a hovering pointer twice, never a keyboard */
.ie-confirm .fx-msgbox-row button { transition: translate .15s ease-out; }
.ie-confirm .ie-dodge-1 { translate: -150px 0; }
.ie-confirm .ie-dodge-2 { translate: -60px -34px; }

/* punch the monkey */
.ie-monkey p { margin: 0 0 6px; }
.ie-monkey-arena { position: relative; height: 120px; background: linear-gradient(#e3f2fd, #bbdefb); box-shadow: inset -1px -1px #fff, inset 1px 1px grey; overflow: hidden; }
.ie-monkey-btn { position: absolute; left: 130px; top: 38px; width: 44px; height: 44px; min-width: 0; min-height: 0; padding: 0; font-size: 28px; line-height: 44px; transition: left .12s, top .12s; }

/* Bonzai Buddy: a purple gorilla in the other corner from Vulny, drawn in boxes */
#ie-bonzai { position: fixed; left: 14px; bottom: calc(var(--taskbar-h) + 10px); z-index: 50; width: 230px; }
.bz-bubble { background: #ffffe1; border: 1px solid #000; padding: 6px 8px; font-size: 11px; box-shadow: 2px 2px 0 rgba(0,0,0,.4); position: relative; margin-bottom: 8px; }
.bz-bubble::after { content: ""; position: absolute; left: 34px; bottom: -8px; border: 8px solid transparent; border-top-color: #000; border-bottom: 0; }
.bz-sprite { position: relative; display: block; width: 84px; height: 96px; margin-left: 8px; background: none; border: 0; box-shadow: none; min-width: 0; min-height: 0; padding: 0; cursor: pointer; animation: bounce calc(var(--tick) * 10) steps(10) infinite; will-change: transform; }
.bz-sprite:focus { outline: 1px dotted #fff; }
.bz-sprite span { position: absolute; display: block; }
.bz-fig { inset: 0; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.5)); }   /* the shadow is on the figure, painted once; the button is what bounces */
.bz-body { left: 12px; top: 44px; width: 60px; height: 50px; background: #6a1b9a; border-radius: 30px 30px 18px 18px; }
.bz-belly { left: 27px; top: 58px; width: 30px; height: 30px; background: #b388ff; border-radius: 50%; }
.bz-head { left: 17px; top: 4px; width: 50px; height: 46px; background: #6a1b9a; border-radius: 50% 50% 45% 45%; }
.bz-ear { top: 16px; width: 14px; height: 14px; background: #6a1b9a; border-radius: 50%; }
.bz-ear.l { left: 8px; } .bz-ear.r { left: 62px; }
.bz-face { left: 25px; top: 16px; width: 34px; height: 28px; background: #d1b3ff; border-radius: 45% 45% 50% 50%; }
.bz-eye { top: 23px; width: 7px; height: 7px; background: #000; border-radius: 50%; }
.bz-eye.l { left: 32px; } .bz-eye.r { left: 45px; }
.bz-mouth { left: 35px; top: 33px; width: 14px; height: 6px; border-bottom: 2px solid #000; border-radius: 0 0 8px 8px; }
.bz-arm { top: 50px; width: 14px; height: 40px; background: #6a1b9a; border-radius: 7px; }
.bz-arm.l { left: 0; transform: rotate(15deg); } .bz-arm.r { left: 70px; transform: rotate(-15deg); }

@media (max-width: 820px) {
  #start-menu .sm-submenu { position: static; min-width: 0; padding: 0 0 0 16px; box-shadow: none; }
  #ie-bonzai { display: none; }
  .ie-navbar .ie-nav:disabled { display: none; }
  .ie-tbq { width: 110px; }
  .ie-balloon { right: 6px; max-width: 70vw; }
}
/* ---------- the ordinary Internet Explorer (iexplore.js): the corpus in a frame, zero toolbars ---------- */
.ie-banner { flex: 0 0 auto; display: flex; justify-content: center; padding: 1px 4px; background: linear-gradient(#fff176, #f9a825); border-top: 1px solid grey; border-bottom: 1px solid #fff; }
.ie-smileys { background: none; border: 0; box-shadow: none; min-width: 0; min-height: 0; padding: 2px 6px; font: bold 11px Arial, sans-serif; color: #c00; cursor: pointer; text-decoration: underline; animation: blink 1.2s steps(1) infinite; }
.ie-smileys:hover { color: #000; }
.ie-content.ie-content-frame { padding: 0; display: flex; background: #0b0820; }
.ie-frame { flex: 1 1 auto; width: 100%; min-height: 40px; border: 0; background: #0b0820; }
.ie-real { color: #000080; }
.ie-status-user { max-width: 160px; }
#iexplore.ie-corpus:not(.ie-errors) .ie-shield { display: none; }   /* no errors on page, for once; the shield is back when the frame stops talking */
#iexplore.ie-corpus:not(.ie-busy) .ie-throbber::after { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .ie-tb, .ie-throbber::after, .ie-prog-bar, .ticker-ad, .ie-smileys, .bz-sprite { animation: none !important; }
  .ie-prog-bar { width: 100%; transform: none; }
  .ie-monkey-btn, .ie-confirm .fx-msgbox-row button { transition: none; }
}