/* The default rules download sits where the optional Ask button would be. */
#tp-rules-download {
  position: fixed;
  right: 10px;
  bottom: 170px;
  z-index: 22;
  max-width: min(200px, calc(100vw - 20px));
  padding: 6px 8px;
  font: 12px/1.4 var(--sans);
  color: var(--text);
  background: rgba(6, 22, 27, 0.92);
  border: 1px solid var(--teal-line);
  border-radius: 6px;
}
#tp-rules-download:hover, #tp-rules-download:focus-visible { color: var(--amber); border-color: var(--amber); }
/* In the Give feedback bar it takes that bar's button look and goes with it
   when the bar is minimised (feedback.css, js/feedback-launcher.js). */
#tp-feedback-tools #tp-rules-download {
  position: static;
  display: inline-flex;
  align-items: center;
  max-width: none;
  min-height: 30px;
  box-sizing: border-box;
  padding: 5px 8px;
  font: 12px system-ui, sans-serif;
  color: #eef2ed;
  background: #12282c;
  border: 1px solid #718184;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
}
#tp-feedback-tools #tp-rules-download:hover, #tp-feedback-tools #tp-rules-download:focus-visible { color: var(--amber); border-color: var(--amber); }
#tp-feedback-tools.fb-minimised #tp-rules-download { display: none; }

/* "Ask my agent" (js/ask-agent.js): the HUD button joins the reference column
   on the right edge, one step above Mine, and the panel opens where the player
   aid does. Shown only where the online service enables it for this game. */
#tp-ask-btn {
  position: fixed;
  right: 10px;
  bottom: 170px;
  z-index: 22;
  width: 44px;
  height: 30px;
  padding: 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  background: rgba(6, 22, 27, 0.82);
  border: 1px solid var(--teal-line);
  border-radius: 6px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
#tp-ask-btn:hover { color: var(--text); border-color: var(--amber-dim); }
#tp-ask-btn.active { color: var(--amber); border-color: var(--amber); background: var(--petrol-raised); }

#tp-ask {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  width: min(94vw, 380px);
  height: 100%;
  color: var(--text);
  background: rgba(6, 22, 27, 0.96);
  border-left: 1px solid var(--teal-line);
  box-shadow: -18px 0 60px rgba(0, 0, 0, 0.55);
}
#tp-ask[hidden] { display: none; }

.ask-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--teal-line);
}
.ask-head b { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; color: var(--amber); }
.ask-head span { flex: 1; min-width: 0; font-size: 12px; color: var(--text-dim); }
.ask-close {
  font-size: 20px;
  line-height: 1;
  color: var(--text-dim);
  background: none;
  border: 0;
  cursor: pointer;
}
.ask-close:hover { color: var(--text); }

.ask-log {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.5;
}
.ask-intro { margin: 0 0 12px; color: var(--text-dim); }
.ask-msg { margin: 0 0 12px; padding: 8px 11px; border-radius: 6px; }
.ask-msg p { margin: 0 0 6px; }
.ask-msg p:last-child { margin-bottom: 0; }
.ask-msg ul { margin: 0 0 6px; padding-left: 18px; }
.ask-user { margin-left: 32px; background: var(--petrol-raised); border: 1px solid var(--teal-line); }
.ask-agent { margin-right: 16px; background: rgba(255, 154, 60, 0.07); border: 1px solid rgba(255, 154, 60, 0.28); }
.ask-agent.ask-error { border-color: var(--teal-line); background: none; color: var(--text-dim); }
.ask-wait { color: var(--text-dim); font-style: italic; }

.ask-gate { padding: 12px 18px 6px; border-top: 1px solid var(--teal-line); font-size: 13px; line-height: 1.5; }
.ask-gate[hidden], .ask-form[hidden] { display: none; }
.ask-gate p { margin: 0 0 10px; }
.ask-gate-link {
  display: inline-block;
  padding: 7px 14px;
  font: 700 12px var(--mono);
  color: var(--petrol-deep);
  background: var(--amber);
  border-radius: 4px;
  text-decoration: none;
}

.ask-form {
  display: flex;
  gap: 8px;
  padding: 10px 18px 6px;
  border-top: 1px solid var(--teal-line);
}
.ask-form textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  font: 13px/1.4 var(--sans);
  color: var(--text);
  background: var(--petrol);
  border: 1px solid var(--teal-line);
  border-radius: 4px;
  padding: 7px 9px;
}
.ask-form textarea:focus { outline: none; border-color: var(--amber-dim); }
.ask-form button {
  align-self: stretch;
  padding: 0 14px;
  font: 700 12px var(--mono);
  color: var(--petrol-deep);
  background: var(--amber);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.ask-form button:disabled { opacity: 0.5; cursor: wait; }
.ask-own { margin: 0; padding: 10px 18px 4px; border-top: 1px solid var(--teal-line); font-size: 12px; line-height: 1.45; }
.ask-own summary { cursor: pointer; color: var(--text); font-weight: 600; }
.ask-own p { margin: 8px 0 0; color: var(--text-dim); }
.ask-own-pack a { color: var(--amber); }
.ask-own-url { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.ask-own-url code { flex: 1; min-width: 0; overflow-wrap: anywhere; font: 12px var(--mono); color: var(--text); background: var(--petrol); border: 1px solid var(--teal-line); border-radius: 4px; padding: 5px 7px; }
.ask-own-copy { font: 700 11px var(--mono); color: var(--text); background: var(--petrol-raised); border: 1px solid var(--teal-line); border-radius: 4px; padding: 5px 9px; cursor: pointer; }
.ask-own-copy:hover { border-color: var(--amber-dim); }
.ask-fine { margin: 0; padding: 4px 18px 14px; font-size: 11px; line-height: 1.4; color: var(--text-dim); }
.ask-fine a { color: var(--text); }

/* The Give feedback bar at phone and tablet width (Sam, 1 October 2026). Under
   1100px the climate tracker is a header strip and the bar sits inside it
   (climate-readout.css). The strip reserved room for the old bar only, so the
   wider bar with the rules link covered the Dial reading. Here every control
   is at least 44px, the strip reserves exactly the bar's width and the bar
   steps left of the zoom column. On a narrow phone the bar takes a row of its
   own along the foot of the strip, and everything below follows the strip's
   measured height (--climate-clearance). */
@media (max-width: 1100px) {
  html body.tp-climate #tp-feedback-tools button,
  html body.tp-climate #tp-feedback-tools #tp-feedback-move,
  html body.tp-climate #tp-feedback-tools #tp-feedback-minimise,
  html body.tp-climate #tp-feedback-tools #tp-feedback-home,
  html body.tp-climate #tp-feedback-tools #tp-rules-download { min-height: 44px; min-width: 44px; }
  html body.tp-climate #tp-feedback-tools { top: 17px !important; right: 60px; left: auto !important; }
  body.tp-climate:has(#tp-feedback-tools) .climate-readout#heritage-world { padding-right: 405px; min-height: 78px; }
}
@media (max-width: 720px) {
  /* A shorter label for the rules link; the full words stay its accessible name. */
  html body.tp-climate #tp-feedback-tools #tp-rules-download { font-size: 0; justify-content: center; }
  html body.tp-climate #tp-feedback-tools #tp-rules-download::before { content: "Rules \2193"; font: 12px system-ui, sans-serif; }
  body.tp-climate:has(#tp-feedback-tools) .climate-readout#heritage-world { padding-right: 316px; }
}
@media (max-width: 560px) {
  /* Row of its own across the foot of the strip. */
  body.tp-climate:has(#tp-feedback-tools) .climate-readout#heritage-world { padding-right: 126px; padding-bottom: 60px; }
  html body.tp-climate #tp-feedback-tools {
    top: calc(var(--climate-clearance, 120px) - 64px) !important; left: 32px !important; right: 32px;
    width: auto; justify-content: space-between;
  }
  html body.tp-climate #tp-feedback-tools #tp-feedback-open { flex: 1 1 auto; }
}