/* Shared visual foundation for the History atlas and quiz.
   Route, era, card and certainty colours retain their semantic roles.
   Everything else is neutral: white and clean greys, near-black text, so the
   pictures and those colours carry the page. The brand's green is kept for
   the brand alone. */
:root.history-profile {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --serif: var(--font);
  --font-mark: var(--font);
  --font-display: var(--font);
  --bg: #fff;
  --surf: #f2f2f5;
  --surf-2: #e8e8ed;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --faint: #6e6e73;
  --sep: #e5e5ea;
  --border: #b9b9c0;
  --ui-action: #1d1d1f;
  --ui-action-ink: #fff;
  --brand: #40543a;
  --brand-soft: #e1e8d7;
  --atlas-index-card-radius: 16px;
  --atlas-index-map-radius: 18px;
  --sh-sm: 0 1px 4px rgb(0 0 0 / 7%);
  --sh: 0 4px 16px rgb(0 0 0 / 9%);
  --sh-lg: 0 12px 36px rgb(0 0 0 / 16%);
}
:root.history-profile[data-theme="white"] { --bg: #fff; --surf: #f5f5f7; }
:root.history-profile[data-theme="dark"] {
  --bg: #161618;
  --surf: #232326;
  --surf-2: #2e2e32;
  --text: #f5f5f7;
  --muted: #a1a1a6;
  --faint: #a1a1a6;
  --sep: #38383c;
  --border: #5a5a5f;
  --ui-action: #f5f5f7;
  --ui-action-ink: #161618;
  --brand: #b7cfa1;
  --brand-soft: #334430;
  --sh-sm: 0 1px 4px rgb(0 0 0 / 15%);
  --sh: 0 4px 16px rgb(0 0 0 / 20%);
  --sh-lg: 0 12px 36px rgb(0 0 0 / 30%);
}
/* ---------------------------------------------------------------------------
   Type. The shared files reach for Nunito on headings and display text; the
   History design uses one face throughout, so these name it back. The three
   font tokens are aliased to --font above, which is the decision; these rules
   are where it reaches elements the shared files style by hand.
   --------------------------------------------------------------------------- */
.history-profile :is(h1, h2, h3, h4, .site-nav-brand, .footer-brand,
  .map-list-count, .map-list-name, .map-list-thumb-fallback, .map-modal-image-fallback,
  .mm-fact-text, .col-era-chip, .time-century-label,
  .col-section-label, .access-row button, .map-list-story-label,
  .browse-section-head h3, .col-section-head h3) { font-family: var(--font); }
.history-profile :is(h1, h2) { font-weight: 650; letter-spacing: -.045em; line-height: 1.08; }
.history-profile :is(h3, h4, .mm-fact-text, .map-list-name) { font-weight: 600; letter-spacing: -.025em; }
.history-profile .eyebrow { letter-spacing: .08em; font-weight: 600; }
.history-profile .map-modal-content h2 { font-weight: 650; letter-spacing: -.035em; }
.history-profile .mm-fact-text { font-weight: 600; line-height: 1.25; }

/* ---------------------------------------------------------------------------
   Chrome: the bar across the top, the surfaces that float over the page, and
   the size of anything a thumb has to hit.
   --------------------------------------------------------------------------- */
.history-profile :is(button, a, input, select):focus-visible { outline: 2px solid var(--ui-action); outline-offset: 4px; }
/* The grey bar parts from the white page by itself, without a rule. */
.history-profile body.is-topbar-hidden .site-nav {
  display: none;
}
/* Beside the map the list scrolls in its own box, which grows into the bar's
   room. On a phone the list is the page, and a box there let the cards run
   over the footer. */
@media (min-width: 701px) {
  .history-profile body.is-topbar-hidden .map-split {
    height: calc(100vh - 64px);
  }
  .history-profile body.is-topbar-hidden.is-globe .map-split {
    height: calc(100vh - 86px);
  }
}
.history-profile .site-nav-brand { font-weight: 650; color: var(--brand); letter-spacing: -.035em; }
.history-profile :is(.site-nav-link, .quiz-back-link) {
  font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
}
/* 44px for anything you press — except the map card's close button, which is
   sized in atlas-map.css to match the arrows on the picture below it. Leaving
   it in here is what kept pinning it back to 44. */
.history-profile .theme-icon-btn { min-width: 44px; min-height: 44px; }
.history-profile :is(.theme-menu, .map-modal, .journey-card-panel) {
  border-radius: var(--r-card); box-shadow: var(--sh-lg);
}
.history-profile :is(.theme-option, .settings-row-label) { font-size: 14px; }
.history-profile .theme-menu { border: 1px solid var(--sep); }

/* ---------------------------------------------------------------------------
   The bar above a catalogue's sections (section-bar.js), the same in Explore
   and In depth: a chip per section with its count, marked as its section is
   read, and on the right whatever tools the page needs. It stays under the
   top of the page on frosted glass, with a hairline once it is stuck. A page
   places it with --jump-top (where it sticks) and --jump-gutter (how far it
   reaches past the page's padding).
   --------------------------------------------------------------------------- */
:root { --jump-h: 3.75rem; }
.jump-bar {
  position: sticky;
  top: var(--jump-top, 0px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--jump-h);
  margin: 0 calc(var(--jump-gutter, 0px) * -1) 1.5rem;
  padding: 0 var(--jump-gutter, 0px);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 transparent;
  transition: box-shadow 0.2s ease;
}
.jump-bar.is-stuck { box-shadow: 0 1px 0 var(--sep); }
.jump-chips {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.jump-chips::-webkit-scrollbar { display: none; }
.jump-bar:not(:has(.jump-chip, .jump-tools)) { display: none; }
.jump-tools { flex: none; display: flex; align-items: center; gap: 0.5rem; }

.jump-chip, .jump-tool {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 2.5rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--surf);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.jump-chip span {
  color: var(--muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}
.jump-chip:hover, .jump-tool:hover { background: var(--surf-2); }
.jump-chip.is-active { background: var(--text); color: var(--bg); }
.jump-chip.is-active span { color: color-mix(in srgb, var(--bg) 70%, transparent); }
@media (pointer: coarse) { :is(.jump-chip, .jump-tool) { height: 44px; } }

/* ---------------------------------------------------------------------------
   Lists and cards: image-led, one frame rather than nested boxes.
   --------------------------------------------------------------------------- */
.history-profile .map-list-title-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; min-width: 0;
}
.history-profile .map-list-name {
  min-width: 0; white-space: normal; overflow-wrap: anywhere;
  font-size: 18px; font-weight: 680; line-height: 1.15; letter-spacing: -.028em;
}
.history-profile .map-list-info { gap: 5px; padding-top: 12px; }
.history-profile .map-list-period {
  flex: none; color: var(--muted); font-size: 12px; line-height: 1.3;
  white-space: nowrap;
}
.history-profile .map-list-meta { font-size: 14px; line-height: 1.45; }
.history-profile .map-list-sub { font-size: 13px; line-height: 1.35; }
.history-profile .map-list-desc { margin-top: 3px; font-size: 14px; line-height: 1.42; -webkit-line-clamp: 3; }

@media (min-width: 701px) {
  .history-profile :is(.map-list, .map-list-header) { padding-left: 0; }
}

/* Keep catalogue copy and carousel controls in separate lanes. Facts start at
   the top of the picture; arrows and dots share a fixed strip at the bottom.
   The strip is inside the picture so the card still has no extra action row. */
.history-profile .map-list-thumb-wrap:has(.map-list-thumb-nav)::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  height: 3.35rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.34), transparent);
  pointer-events: none;
}

.history-profile .map-list-thumb-nav {
  top: auto;
  bottom: 0.45rem;
  transform: none;
}

.history-profile .map-list-gallery-dots { bottom: 0.95rem; }

/* A fact slide reads like the culture page it comes from: the heading leads
   at the top of the darkened picture, in the template's tight weight, with
   body copy large enough to read. Sentences vary a lot in length, so
   map-list.js steps the type down (.is-compact, .is-tight) until the whole
   of it fits; the line clamps are only the last resort. */
.history-profile .map-list-fact-slide {
  justify-content: flex-start;
  padding: 1rem 1.1rem 2.6rem;
}

.history-profile .map-list-fact-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.6) brightness(0.62);
  transform: scale(1.02);
}

.history-profile .map-list-fact-slide::before {
  z-index: 1;
  background: linear-gradient(180deg, rgba(12, 16, 16, 0.86), rgba(12, 16, 16, 0.35) 70%, transparent);
}

.history-profile :is(.map-list-fact-title, .map-list-fact-detail) { z-index: 2; }

.history-profile .map-list-fact-eyebrow {
  margin: 0.45rem 0 0;
}

.history-profile .map-list-fact-title {
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
  -webkit-line-clamp: 2;
}

.history-profile .map-list-fact-detail {
  margin-top: 0.4rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-wrap: pretty;
  -webkit-line-clamp: 4;
}

.history-profile .map-list-fact-slide.is-compact .map-list-fact-title { font-size: 1.08rem; }
.history-profile .map-list-fact-slide.is-compact .map-list-fact-detail {
  font-size: 0.875rem;
  line-height: 1.35;
  -webkit-line-clamp: 5;
}

.history-profile .map-list-fact-slide.is-tight .map-list-fact-title { font-size: 0.98rem; }
.history-profile .map-list-fact-slide.is-tight .map-list-fact-detail {
  font-size: 0.8125rem;
  line-height: 1.32;
  -webkit-line-clamp: 6;
}

/* Explore's journey cards are drawn in atlas-explore.css alone. */
.history-profile .time-century-card { border: 0; border-bottom: 1px solid var(--sep); border-radius: 0; background: transparent; }
.history-profile .time-century-card:hover { box-shadow: none; border-color: var(--text); }
.history-profile .time-century-body { padding: 14px 0; gap: 7px; }

/* ---------------------------------------------------------------------------
   Actions. One shape for anything you press; card-specific action colours are
   left alone.
   --------------------------------------------------------------------------- */
/* One shape for anything you press — except the map card's "Se mer", which
   belongs to the arrows beside it instead and is sized in atlas-map.css. It
   was in this group, and that is why it kept coming back to 44px. */
.history-profile :is(.quiz-btn-primary, .quiz-btn-secondary,
  .map-modal-secondary, .journey-pill, .access-row button) {
  border-radius: 999px; min-height: 44px; font-size: 14px; font-weight: 600; letter-spacing: 0;
}
.history-profile :is(.quiz-btn-primary, .access-row button) { background: var(--ui-action); color: var(--ui-action-ink); }
.history-profile .quiz-btn-secondary { color: var(--ui-action); border-color: var(--ui-action); }

/* ---------------------------------------------------------------------------
   The way in, and the way out: the front door is white on a picture and
   styled in access.css; the footer is the top bar's grey, in site-footer.css.
   --------------------------------------------------------------------------- */
.history-profile .access-row input:focus { border-color: var(--ui-action); box-shadow: 0 0 0 2px var(--sep); }

/* ---------------------------------------------------------------------------
   The quiz keeps its compact working layout and uses the same type scale.
   --------------------------------------------------------------------------- */
.history-profile .quiz-intro-title { font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 650; }
.history-profile .quiz-intro-desc { font-size: 17px; }
.history-profile .quiz-intro-meta div { font-size: 12px; }
.history-profile :is(.quiz-intro-meta strong, .quiz-year-display, .summary-score) { font-weight: 600; letter-spacing: -.035em; }
.history-profile .quiz-question-text { font-weight: 650; line-height: 1.1; }
.history-profile .quiz-subtext { font-size: 14px; line-height: 1.55; }
:root.history-profile[data-theme="dark"] .quiz-feedback.is-good { --grade: #5fb487; }
:root.history-profile[data-theme="dark"] .quiz-feedback.is-ok { --grade: #d49a52; }
:root.history-profile[data-theme="dark"] .quiz-feedback.is-bad { --grade: #e07a7a; }
:root.history-profile[data-theme="dark"] .quiz-feedback-score { color: #14181a; }
:root.history-profile[data-theme="dark"] { --quiz-right: #5fb487; --quiz-wrong: #e07a7a; }

/* ---------------------------------------------------------------------------
   Phone. One query, not three: the same `max-width: 700px` was written three
   times with an unrelated rule stranded between two of them.
   --------------------------------------------------------------------------- */
/* The top bar as two rows, brand and actions over a tab bar, from the
   width where the four tabs no longer fit beside the brand and the actions.
   Swedish names are the widest; they need about 842px, and the margin keeps
   a little air between the tabs and their neighbours. */
@media (max-width: 860px) {
  /* The bar: brand and actions on one line, the chips on their own. */
  .history-profile .site-nav-inner {
    height: auto; min-height: 104px; padding-block: 6px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions" "links links";
    gap: 4px 12px;
  }
  .history-profile .site-nav-brand { font-size: 16px; }
  .history-profile .site-nav-links { gap: 12px; }
  /* The tabs as a tab bar: each a column of its icon over its name, as
     many equal columns as there are tabs. */
  .history-profile .nav-chips {
    grid-area: links; justify-self: stretch; min-width: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px;
    padding: 4px; border-radius: 20px;
  }
  .history-profile .nav-tab {
    flex-direction: column; justify-content: center; gap: 3px;
    height: auto; min-height: 58px; padding: 5px 0; border-radius: 16px;
    font-size: 11.5px; line-height: 1.1; text-align: center;
  }
  .history-profile .nav-tab .nav-ico { width: 30px; height: 30px; }
}

@media (max-width: 700px) {
  /* The map above its list, rather than beside it. */
  .history-profile .map-split { flex-direction: column; height: auto; overflow: visible; }
  .history-profile .map-split .map-pane { order: -1; flex: none; width: 100%; height: 52svh; min-height: 320px; border-radius: var(--r-pic); }
  .history-profile #map { height: 100%; min-height: 0; }
  /* The list is part of the page on a phone, not a box inside it: one card
     per row, full width, scrolled with the page. Two 166px columns in a
     scrolling box broke titles mid-word, left fact slides unreadable, and
     slid the cards under the footer. */
  .history-profile .map-list-wrap { width: 100%; min-width: 0; max-width: none; overflow: visible; }
  .history-profile .map-split.is-fullmap .map-list-wrap { height: 0; }
  .history-profile .map-list-header { padding-inline: 0; }
  .history-profile .map-list {
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
    padding-inline: 0;
  }


  /* The quiz is one column scrolled with the page: the question and its
     timeline, then the map, then the answer button, so a pin placed on the
     map is followed by the button that sends it. */
  .history-profile #quizQuestion { height: auto; overflow: visible; }
  .history-profile .quiz-screen { min-height: calc(100svh - 104px); }
  .history-profile .quiz-layout { flex-direction: column; overflow: visible; }
  .history-profile .quiz-panel { display: contents; }
  .history-profile .quiz-panel > * { order: 1; }
  .history-profile .quiz-map-pane { order: 2; flex: none; height: 52svh; min-height: 280px; }
  .history-profile .quiz-panel > :is(.quiz-feedback, .quiz-panel-footer) { order: 3; }
  .history-profile .quiz-panel-footer { margin-top: 0; padding-bottom: 1rem; }
}