/*
 * Issue Map, round 3: dossier stamps, the activity gauge, "Islamabad says / Washington says" and the
 * map's timeline replay (src/features/issues/views/dossier.js, views/map.js, assets/js/issues-replay.js).
 */

/* ------------------------------------------------------------ Stamps */

.ids-stamp {
  --ink-c: #B23A2E;
  position: relative; display: inline-block; vertical-align: middle; white-space: nowrap;
  padding: 0.28em 0.7em 0.22em; transform: rotate(var(--tilt, -4deg));
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.1;
  color: var(--ink-c); border: 2px solid currentColor; border-radius: 3px;
  box-shadow: inset 0 0 0 1.5px transparent, inset 0 0 0 2.5px currentColor;
  opacity: 0.88; mix-blend-mode: multiply;
  /* Uneven ink: a speckled mask so the mark reads as pressed by hand. */
  -webkit-mask-image: repeating-radial-gradient(circle at 31% 64%, #000 0 2.6px, rgba(0, 0, 0, 0.82) 2.7px 3.1px, #000 3.2px 5.2px),
    linear-gradient(100deg, #000 60%, rgba(0, 0, 0, 0.78) 75%, #000 90%);
  -webkit-mask-composite: source-in;
  mask-image: repeating-radial-gradient(circle at 31% 64%, #000 0 2.6px, rgba(0, 0, 0, 0.82) 2.7px 3.1px, #000 3.2px 5.2px),
    linear-gradient(100deg, #000 60%, rgba(0, 0, 0, 0.78) 75%, #000 90%);
  mask-composite: intersect;
}
.ids-stamp.is-lg { font-size: 0.95rem; padding: 0.38em 0.85em 0.3em; border-width: 2.5px; }
.ids-stamp.is-sm { font-size: 0.62rem; padding: 0.25em 0.55em 0.2em; }
.ids-active { --ink-c: #B23A2E; }
.ids-watch { --ink-c: #A86A12; }
.ids-resolved { --ink-c: #2E7A55; }
.ids-worsening { --ink-c: #B5432A; }
.ids-unchanging { --ink-c: #3B64A6; }
.ids-improving { --ink-c: #2B7F5C; }
.ids-developing { --ink-c: #50535A; }

/* Pressed onto the page: a short thump the first time it is shown. */
@media (prefers-reduced-motion: no-preference) {
  .ids-head-marks .ids-stamp, .im-brief.is-open .ids-stamp { animation: ids-thump 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) 0.25s both; }
}
@keyframes ids-thump {
  0% { transform: rotate(var(--tilt, -4deg)) scale(1.9); opacity: 0; }
  60% { opacity: 0.95; }
  100% { transform: rotate(var(--tilt, -4deg)) scale(1); opacity: 0.88; }
}

.ids-head-marks { display: flex; align-items: center; gap: 1.4rem; margin-top: 1.1rem; flex-wrap: wrap; }

/* Cards: the stamp sits over the photo's corner. */
.ip-card { position: relative; }
.ip-card > .ids-stamp { position: absolute; right: 10px; top: 10px; z-index: 1; background: rgba(247, 246, 243, 0.86); mix-blend-mode: normal; }

/* The map's briefing folder: stamped across its top edge. */
.im-brief > .ids-stamp { position: absolute; right: 58px; top: -15px; background: #F7F6F3; mix-blend-mode: normal; opacity: 0.95; }

/* ------------------------------------------------------------- Gauge */

.ids-gauge { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0; }
.ids-gauge svg { display: block; overflow: visible; }
.ids-gauge figcaption { font-size: 0.78rem; line-height: 1.25; color: #55555A; font-variant-numeric: tabular-nums; }
.ids-gauge figcaption strong { font-family: var(--font-serif); font-optical-sizing: auto; font-weight: 500; font-size: 1.45rem; color: var(--ink, #2A1B45); margin-right: 0.15em; }
.ids-gauge figcaption span { display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #6B6B66; }
.ids-gauge-arc { fill: none; stroke: rgba(42, 27, 69, 0.16); stroke-width: 6; stroke-linecap: round; }
.ids-gauge-hot { fill: none; stroke: #C9A24E; stroke-width: 6; stroke-linecap: round; }
.ids-gauge-ticks { fill: none; stroke: rgba(42, 27, 69, 0.45); stroke-width: 1.2; }
.ids-gauge-needle { transform-origin: 40px 40px; transform: rotate(var(--a, -90deg)); }
.ids-gauge-needle path { stroke: #6E42A6; stroke-width: 2.4; stroke-linecap: round; }
.ids-gauge-hub { fill: #2A1B45; }
@media (prefers-reduced-motion: no-preference) {
  .ids-gauge .ids-gauge-needle { animation: ids-needle 1.4s cubic-bezier(0.3, 1.5, 0.5, 1) 0.35s both; }
}
@keyframes ids-needle { from { transform: rotate(-90deg); } }
.ids-mini-gauge { flex: none; overflow: visible; }
.ids-mini-gauge .ids-gauge-arc, .ids-mini-gauge .ids-gauge-hot { stroke-width: 8; }
.ids-mini-gauge .ids-gauge-needle path { stroke-width: 4; }

/* ------------------------------------------- Islamabad / Washington says */

.ids-says-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 2px solid var(--ink, #2A1B45); border-bottom: 1px solid #D9D5CC; }
.ids-says-grid.is-single { grid-template-columns: 1fr; }
.ids-say { margin: 0; padding: 1.3rem 1.5rem 1.2rem 0; }
.ids-say + .ids-say { padding: 1.3rem 0 1.2rem 1.5rem; border-left: 1px solid #D9D5CC; }
.ids-say-who {
  display: flex; align-items: center; gap: 0.6em; margin: 0 0 0.8rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink, #2A1B45);
}
.ids-say-flag { width: 18px; height: 12px; border-radius: 1px; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); }
.ids-say-pk .ids-say-flag { background: linear-gradient(90deg, #fff 0 25%, #01411C 25%); }
.ids-say-us .ids-say-flag { background: repeating-linear-gradient(180deg, #B22234 0 1.7px, #fff 1.7px 3.4px); position: relative; }
.ids-say-us .ids-say-flag::before { content: ""; position: absolute; left: 0; top: 0; width: 45%; height: 55%; background: #3C3B6E; }
.ids-say-quote { margin: 0; padding: 0; border: 0; }
.ids-say-quote p {
  margin: 0; font-family: var(--font-serif); font-optical-sizing: auto; font-size: 1.22rem; line-height: 1.42; color: #1E1A26;
}
.ids-say-quote p::before { content: "\201C"; color: #C9A24E; margin-right: 0.05em; }
.ids-say-quote p::after { content: "\201D"; color: #C9A24E; margin-left: 0.03em; }
.ids-say-src { margin-top: 0.85rem; font-size: 0.78rem; color: #6A6A66; }
.ids-say-src a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ids-says-note { margin: 0.7rem 0 0; font-size: 0.76rem; color: #8A8A85; }
@media (max-width: 700px) {
  .ids-says-grid { grid-template-columns: 1fr; }
  .ids-say, .ids-say + .ids-say { padding: 1.1rem 0; border-left: 0; }
  .ids-say + .ids-say { border-top: 1px solid #D9D5CC; }
}

/* ---------------------------------------------------- Timeline replay */

.im-replay {
  position: absolute; left: 24px; bottom: 58px; z-index: 16; width: min(460px, calc(100% - 140px));
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 4px 12px; align-items: center;
  padding: 10px 14px 9px 10px; color: #E7DEF2; background: var(--rd-glass, rgba(22, 13, 40, 0.72));
  border: 1px solid rgba(226, 184, 101, 0.22); border-radius: 2px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(4, 2, 12, 0.45);
  transition: opacity 0.3s;
}
.im-replay[hidden] { display: none; }
.im-app.has-brief .im-replay { opacity: 0; pointer-events: none; }
.im-replay-play {
  grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: #E2B865; border: 0; color: #2A1B45; box-shadow: 0 0 0 4px rgba(226, 184, 101, 0.18);
}
.im-replay-play:hover { background: #F0CD82; }
.im-replay-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.im-replay-icon { width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; }
.im-replay-play.is-playing .im-replay-icon { width: 11px; height: 13px; margin: 0; border: 0; border-left: 3.5px solid; border-right: 3.5px solid; }
.im-replay-track { position: relative; height: 22px; }
.im-replay-ticks { position: absolute; left: 7px; right: 7px; bottom: 11px; height: 10px; pointer-events: none; }
.im-replay-tick { position: absolute; bottom: 0; width: 2px; margin-left: -1px; background: rgba(226, 184, 101, 0.75); border-radius: 1px; }
.im-replay-range {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 14px; margin: 0; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none; accent-color: #E2B865;
}
.im-replay-range::-webkit-slider-runnable-track { height: 2px; background: rgba(231, 222, 242, 0.28); border-radius: 1px; }
.im-replay-range::-moz-range-track { height: 2px; background: rgba(231, 222, 242, 0.28); border-radius: 1px; }
.im-replay-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px; border-radius: 50%;
  background: #fff; border: 3px solid #E2B865; box-shadow: 0 0 8px rgba(226, 184, 101, 0.7);
}
.im-replay-range::-moz-range-thumb { width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 3px solid #E2B865; }
.im-replay-range:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.im-replay-month {
  margin: 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: #E2B865; font-variant-numeric: tabular-nums; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* Pins during a replay: not yet on the map, and a flare in each month an issue appears or is updated. */
.im-marker { transition: opacity 0.35s ease; }
.im-app.is-replaying .im-marker.is-future { opacity: 0; pointer-events: none; }
.im-app.is-replaying .im-marker.is-flash .im-marker-dot { animation: ids-flare 1.1s ease-out; }
@keyframes ids-flare {
  0% { transform: scale(1.35); filter: brightness(1.35); box-shadow: 0 0 0 1.5px #0E0822, 0 0 0 0 rgba(255, 226, 160, 0.75); }
  100% { transform: scale(1); filter: none; box-shadow: 0 0 0 1.5px #0E0822, 0 0 0 20px rgba(255, 226, 160, 0); }
}
@media (max-width: 860px) {
  .im-replay { left: 12px; right: 72px; width: auto; bottom: 64px; padding: 8px 10px 7px 8px; gap: 3px 10px; }
  .im-replay-play { width: 36px; height: 36px; }
  .im-replay-month { letter-spacing: 0.06em; font-size: 0.66rem; }
}
@media (prefers-reduced-motion: reduce) {
  .im-marker, .im-replay { transition: none; }
  .im-app.is-replaying .im-marker.is-flash .im-marker-dot { animation: none; }
}