/* ========================================
   Website Maker
   Lives in the Media Maker window and leans
   on the newspaper editor's chrome (cards,
   library, buttons). .mm-web-doc and friends
   are the rendered page itself, shared with
   Game Computer's Internet Explorer.
   ======================================== */

/* --- Media Maker window: edge to edge, no title bar --- */

#hqp-newspaper-editor { border-radius: 0; }
#hqp-newspaper-editor .window-header { display: none; }

/* Library header fits two buttons now (import + new) */
#hqp-newspaper-editor .hqp-lib-header span { flex: 1; }
#hqp-newspaper-editor .hqp-lib-header .hqp-lib-add + .hqp-lib-add { margin-left: 4px; }

/* --- Newspapers / Websites tabs --- */

.mm-mode-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.mm-mode-tab {
  background: rgba(124, 111, 239, 0.12);
  border: 1px solid rgba(124, 111, 239, 0.35);
  border-radius: 5px;
  color: #cfcde8;
  padding: 4px 14px;
  cursor: pointer;
  width: auto;
  line-height: 1.3;
}

.mm-mode-tab:not(.active):hover {
  background: rgba(124, 111, 239, 0.3);
  color: #fff;
  box-shadow: none;
}

.mm-mode-tab.active {
  background: rgba(124, 111, 239, 0.5);
  border-color: #7c6fef;
  color: #fff;
  cursor: default;
}

.mm-mode-close {
  margin-left: auto;
  background: rgba(192, 57, 43, 0.2);
  border: 1px solid rgba(192, 57, 43, 0.5);
  border-radius: 5px;
  color: #e8b4ae;
  padding: 4px 10px;
  cursor: pointer;
  width: auto;
  line-height: 1.3;
}

.mm-mode-close:hover {
  background: rgba(192, 57, 43, 0.55);
  color: #fff;
  box-shadow: none;
}

/* --- Website tab bits inside the editor window --- */

.mm-web-pub-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #555;
  flex-shrink: 0;
}

.mm-web-pub-dot.on { background: #2ecc71; }

.mm-web-pub-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: bold;
}

.mm-web-empty {
  padding: 14px 10px;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
}

.mm-web-none {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.55);
}

.mm-web-add-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.mm-web-add-grid .hqp-btn { flex: 1 1 45%; }

.mm-web-add-group { margin-bottom: 7px; }

.mm-web-add-group-label {
  font-size: 0.68em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 3px;
}

.mm-web-unpub-hint {
  font-size: 0.75em;
  color: #e0b341;
  margin-top: 6px;
  text-align: center;
}

.mm-web-page-title { width: 110px; }

#hqp-newspaper-editor .mm-web-canvas {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: #242433;
  padding: 14px;
}

.mm-web-stage {
  max-width: 1050px;
  margin: 0 auto;
  font-size: 15px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

.mm-web-stage .mm-web-doc { min-height: 420px; }

/* --- In-place editing --- */

.mm-web-edit [data-edit] {
  cursor: text;
  min-height: 1em;
}

.mm-web-edit [data-edit]:hover { outline: 1px dashed rgba(124, 111, 239, 0.8); }
.mm-web-edit [data-edit]:focus { outline: 1px solid #7c6fef; }

.mm-web-edit [data-edit]:empty::before,
.mm-web-edit [data-link-field]:empty::before {
  content: attr(data-ph);
  opacity: 0.4;
  font-style: italic;
}

.mm-web-edit .mm-web-abs:hover { outline: 1px dashed rgba(124, 111, 239, 0.45); }

.mm-web-drag-tip {
  position: fixed;
  z-index: 10000;
  background: #1a1a2e;
  color: #fff;
  border: 1px solid #7c6fef;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  pointer-events: none;
}

.mm-web-drop-ok {
  outline: 2px dashed #7c6fef;
  outline-offset: -2px;
}

/* The Look card morphs into Field Tools while editing text, same as the
   newspaper's Default Fonts card (toolbar styling comes from its classes) */
.hqp-card-fonts.editing .mm-web-look-fields { display: none; }

.mm-web-prevtoggle.on {
  background: rgba(124, 111, 239, 0.55);
  color: #fff;
}

/* Era row: only the retro web exists for now */
.mm-web-era-row { margin-bottom: 6px; }

.mm-web-tpl-row { flex-wrap: wrap; }

.mm-web-era-card { position: relative; }

.mm-web-era-card small { opacity: 0.6; }

.mm-web-era-card.disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.mm-web-soon {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.6em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #e0b341;
}

/* Image zoom/pan: slider on hover, drag the picture to pan */
.mm-web-edit .mm-web-img-zone:hover .hqp-img-controls,
.mm-web-edit .mm-web-img-zone .hqp-img-controls:hover {
  display: flex;
  pointer-events: auto;
}

.mm-web-imgc { z-index: 6; }

.mm-web-imgc input[type="range"] { width: 90px; }

.mm-web-edit .mm-web-img-zone img { cursor: move; }

.mm-web-handles {
  position: absolute;
  top: 2px;
  right: 2px;
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(26, 26, 46, 0.92);
  border: 1px solid rgba(124, 111, 239, 0.5);
  border-radius: 4px;
  padding: 2px;
  z-index: 5;
}

.mm-web-handles button {
  background: transparent;
  border: none;
  color: #cfcde8;
  cursor: pointer;
  padding: 1px 5px;
  font-size: 11px;
  line-height: 1.2;
  width: auto;
}

.mm-web-handles button:hover {
  background: rgba(124, 111, 239, 0.4);
  color: #fff;
  box-shadow: none;
}

.mm-web-handles input[type="color"] {
  width: 20px;
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

/* Link and remove controls float over their item on hover, out of the text
   flow, so the editor lays out exactly like the player view */
.mm-web-item-row { position: relative; }

.mm-web-item-row > .mm-web-link-set,
.mm-web-item-row > .mm-web-link-x {
  position: absolute;
  top: -1.1em;
  font-size: 0.7em;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
  background: rgba(18, 18, 28, 0.85);
  color: #cfcde8;
  cursor: pointer;
  opacity: 0;
  z-index: 3;
}

.mm-web-item-row:hover > .mm-web-link-set,
.mm-web-item-row:hover > .mm-web-link-x { opacity: 0.9; }

.mm-web-item-row > .mm-web-link-x { right: 0; }
.mm-web-item-row > .mm-web-link-set { right: 1.9em; }
.mm-web-item-row > .mm-web-link-set.on { color: #7cf27c; }
.mm-web-item-row > .mm-web-link-set:hover { opacity: 1; color: #fff; }
.mm-web-item-row > .mm-web-link-x:hover { opacity: 1; color: #e74c3c; }

.mm-web-link-add {
  margin-top: 0.3em;
  font-size: 0.8em;
  opacity: 0.55;
  font-style: italic;
  cursor: pointer;
}

.mm-web-link-add:hover { opacity: 1; }

.mm-web-static .mm-web-marquee-text {
  animation: none;
  padding-left: 0;
}

.mm-web-click { cursor: pointer; }

.mm-web-digit-edit {
  min-width: 4em;
  text-align: center;
}

.mm-web-empty-page {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0.45;
  font-style: italic;
}

/* ========================================
   Rendered page. Everything is em based so
   it scales with the computer screen zoom.
   ======================================== */

.mm-web-doc {
  position: relative;
  overflow: hidden;
  line-height: 1.35;
  box-sizing: border-box;
  word-wrap: break-word;
}

/* Free-canvas blocks: array order is the stacking order */
.mm-web-abs {
  position: absolute;
  box-sizing: border-box;
  margin: 0;
}

.mm-web-blk > * { margin: 0; }

.mm-web-blk-image { display: flex; flex-direction: column; }

.mm-web-blk-image .mm-web-img-zone {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.mm-web-blk-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
}

.mm-web-blk-divider { display: flex; align-items: center; }
.mm-web-blk-divider .mm-web-hr { width: 100%; }
.mm-web-blk-divider .mm-web-stars { width: 100%; text-align: center; margin: 0; }

.mm-web-blk-marquee { display: flex; align-items: center; }
.mm-web-blk-marquee .mm-web-marquee { width: 100%; }

.mm-web-blk-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  text-align: center;
}

.mm-web-heading { font-weight: bold; }
.mm-web-h1 { font-size: 2em;    margin: 0.4em 0; }
.mm-web-h2 { font-size: 1.5em;  margin: 0.45em 0; }
.mm-web-h3 { font-size: 1.17em; margin: 0.5em 0; }

.mm-web-text { min-height: 1em; }

.mm-web-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #999;
  color: #999;
  box-sizing: border-box;
}

.mm-web-caption {
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.75;
  margin-top: 0.2em;
}

.mm-web-links {
  border: 1px solid currentColor;
  padding: 0.5em 0.8em;
}

.mm-web-links-title {
  font-weight: bold;
  margin-bottom: 0.3em;
}

.mm-web-links > div { margin: 0.15em 0; }

.mm-web-link {
  text-decoration: underline;
  cursor: pointer;
}

.mm-web-marquee {
  overflow: hidden;
  white-space: nowrap;
}

.mm-web-marquee-text {
  display: inline-block;
  padding-left: 100%;
  animation: mm-web-scroll 14s linear infinite;
}

@keyframes mm-web-scroll {
  to { transform: translateX(-100%); }
}

.mm-web-divider { margin: 0.8em 0; }

.mm-web-hr {
  border: none;
  border-top: 2px groove #999;
  margin: 0;
}

.mm-web-stars {
  text-align: center;
  margin: 0.8em 0;
  letter-spacing: 0.3em;
}

.mm-web-counter {
  text-align: center;
  margin: 0.8em 0;
}

/* The infamous blink tag */
.mm-web-blink { animation: mm-web-blink 1s steps(1) infinite; }

@keyframes mm-web-blink {
  50% { visibility: hidden; }
}

/* While editing, blink softly so the caret stays usable */
.mm-web-edit .mm-web-blink { animation-name: mm-web-blink-soft; }

@keyframes mm-web-blink-soft {
  50% { opacity: 0.25; }
}

.mm-web-blk-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  flex-wrap: wrap;
}

.mm-web-badge {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 6em;
  height: 2.2em;
  border: 2px outset #999;
  font-size: 0.55em;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-align: center;
  white-space: nowrap;
}

.mm-web-badge-x {
  position: absolute;
  top: -0.2em;
  right: 0.1em;
  cursor: pointer;
  opacity: 0.6;
}

.mm-web-badge-x:hover { opacity: 1; color: #e74c3c; }

.mm-web-badge-add {
  border-style: dashed;
  border-color: #888;
  background: transparent !important;
  color: #888 !important;
  cursor: pointer;
  font-size: 1em;
}

.mm-web-badge-add:hover {
  border-color: #7c6fef;
  color: #7c6fef !important;
}

.mm-web-blk-download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
}

.mm-web-blk-navbar {
  display: flex;
  align-items: stretch;
  gap: 2px;
}

.mm-web-navbtn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  border: 2px outset #e8e8e8;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  padding: 0.15em 0.3em;
  white-space: nowrap;
  overflow: hidden;
}

.mm-web-blk-panel {
  display: flex;
  flex-direction: column;
  border: 1px solid #808080;
}

.mm-web-panel-bar {
  flex: none;
  padding: 0.12em 0.45em;
  font-weight: bold;
}

.mm-web-panel-body {
  flex: 1;
  min-height: 0;
  padding: 0.3em 0.45em;
  overflow: hidden;
}

.mm-web-blk-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
}

.mm-web-pushbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3em 1.4em;
  border: 3px outset #e8e8e8;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
}

.mm-web-list-title {
  font-weight: bold;
  margin-bottom: 0.2em;
}

.mm-web-list-row { margin: 0.12em 0; }

.mm-web-table {
  width: 100%;
  border-collapse: collapse;
}

.mm-web-table th,
.mm-web-table td {
  border: 1px solid #808080;
  padding: 0.15em 0.4em;
  text-align: left;
}

.mm-web-blk-footer { text-align: center; }

.mm-web-footer-text {
  opacity: 0.8;
  margin-top: 0.2em;
}

/* Extras strip that rides along with the block handles. It sits BELOW the
   block: the top edge belongs to the move bar, and small blocks (gifs)
   would be impossible to grab with a toolbar hovering over it. The gap is
   a transparent border, not a margin, so the pointer never leaves the
   block's hover area on the way down (leaving would hide the strip). */
.mm-web-blk-tools {
  position: absolute;
  top: 100%;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 2px;
  pointer-events: auto;
  background: rgba(26, 26, 46, 0.92);
  background-clip: padding-box;
  border: 1px solid rgba(124, 111, 239, 0.5);
  border-top: 7px solid transparent;
  border-radius: 4px;
  padding: 2px;
  z-index: 102;
}

/* Edit-only: let the per-item hover controls escape the clipped nav buttons */
.mm-web-edit .mm-web-navbtn.mm-web-item-row { overflow: visible; }

.mm-web-blk-tools button {
  background: transparent;
  border: none;
  color: #cfcde8;
  cursor: pointer;
  padding: 1px 5px;
  font-size: 11px;
  line-height: 1.2;
  width: auto;
}

.mm-web-blk-tools button:hover {
  background: rgba(124, 111, 239, 0.4);
  color: #fff;
  box-shadow: none;
}

.mm-web-blk-tools input[type="color"] {
  width: 20px;
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.mm-web-edit .mm-web-dl-icon { cursor: pointer; }

.mm-web-dl-size {
  opacity: 0.7;
  font-size: 0.85em;
}

.mm-web-inline {
  display: flex;
  gap: 4px;
  align-items: center;
}

.mm-web-inline select {
  flex: 1;
  min-width: 0;
}

.mm-web-lock.on {
  background: rgba(224, 179, 65, 0.45);
  color: #fff;
}

.mm-web-digit {
  display: inline-block;
  background: #000;
  color: #33ff33;
  padding: 0.05em 0.2em;
  margin: 0 1px;
  border: 1px solid #555;
}

/* --- Era graphics and chrome --- */

/* GIF blocks: the whole graphic on a bare transparent box */
.mm-web-blk-gif {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.mm-web-blk-gif img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.mm-web-blk-gif .mm-web-img-placeholder { font-size: 0.8em; }

/* Headline dressed up like the Photoshopped banner images of the time */
.mm-web-doc .mm-web-h-logo {
  font-weight: bold;
  letter-spacing: 0.02em;
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.35),
    1px 1px 0 rgba(0, 0, 0, 0.9),
    2px 2px 0 rgba(0, 0, 0, 0.7),
    3px 3px 0 rgba(0, 0, 0, 0.45),
    4px 4px 0 rgba(0, 0, 0, 0.25);
}

/* Badges that are real button graphics */
.mm-web-badge.mm-web-badge-pic {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent !important;
}
.mm-web-badge-pic img { display: block; height: 2em; width: auto; }

/* Graphic bullets in lists */
.mm-web-li-bullet {
  display: inline-block;
  height: 1em;
  width: auto;
  max-width: 2.4em;
  margin-right: 0.35em;
  vertical-align: -0.12em;
}

/* Dividers tiled from a line graphic */
.mm-web-blk-divider .mm-web-divider-img {
  width: 100%;
  height: 100%;
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
}

/* Beveled era tables */
.mm-web-doc .mm-web-table {
  border-collapse: separate;
  border-spacing: 0;
  border: 2px outset #d4d4d4;
}
.mm-web-doc .mm-web-table th,
.mm-web-doc .mm-web-table td {
  border: 1px inset #b8b8b8;
}

/* Active links flash red the way old browsers did */
.mm-web-doc a.mm-web-link:active { color: #ff0000 !important; }

/* The graphics library floats over the fullscreen editor; without this a
   click on the editor raises it above the library and it is unreachable.
   Kept below Foundry's notification layer. */
.mm-gfx-ontop { z-index: 9500 !important; }