/*
  Story theme. Loaded after Minimal's stylesheet, whose rules already match
  [data-passport-theme="story"]; this file only holds Story's own elements
  (spec D37, D38): the Journey timeline, Other materials, the chip grid and the
  flush accordion bodies for stats and chips. Never copy Minimal rules here.
*/

/* Reveal Minimal's theme variants (dpp.css hides every .theme-variant). */
body.theme-story #language-switcher-2 { display: contents; }

/* ---- Journey ---- */
[data-passport-theme="story"] .journey { display: flex; flex-direction: column; gap: 20px; }
[data-passport-theme="story"] .journey-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 24px 0 16px; border-bottom: 1px solid #e4e4e7; }
[data-passport-theme="story"] .journey-title { color: #09090b; font-size: 14px; font-weight: 500; line-height: 24px; }
[data-passport-theme="story"] .journey-facts { color: #71717a; font-size: 12px; line-height: 16px; letter-spacing: .04em; text-align: right; text-transform: uppercase; }
[data-passport-theme="story"] .journey-map-slot:empty { display: none; }
[data-passport-theme="story"] .journey-map { margin-bottom: 30px; border-radius: 0; }
[data-passport-theme="story"] .journey-empty { color: #71717a; font-size: 13px; line-height: 19px; }

[data-passport-theme="story"] .journey-timeline { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
[data-passport-theme="story"] .journey-stage { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; padding: 0 0 32px; }
[data-passport-theme="story"] .journey-stage::before { content: ''; position: absolute; top: 96px; bottom: 0; left: 47px; width: 1px; background: #d7d7dc; }
[data-passport-theme="story"] .journey-stage:last-child { padding-bottom: 0; }
[data-passport-theme="story"] .journey-stage:last-child::before { display: none; }
[data-passport-theme="story"] .stage-picture { display: block; width: 96px; height: 96px; object-fit: cover; background: #f4f4f5; }
[data-passport-theme="story"] .stage-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 2px; }
[data-passport-theme="story"] .stage-kind { color: #71717a; font-size: 10px; font-weight: 600; line-height: 12px; letter-spacing: .08em; text-transform: uppercase; }
[data-passport-theme="story"] .stage-title { color: #09090b; font-size: 14px; font-weight: 500; line-height: 20px; overflow-wrap: anywhere; }
[data-passport-theme="story"] .stage-location { display: flex; align-items: center; gap: 6px; color: #71717a; font-size: 12px; line-height: 16px; }
[data-passport-theme="story"] .stage-location .flag { width: 14px; height: 14px; object-fit: cover; }
[data-passport-theme="story"] .stage-facility { display: flex; flex-wrap: wrap; gap: 4px 12px; color: #71717a; font-size: 12px; line-height: 16px; overflow-wrap: anywhere; }
[data-passport-theme="story"] .stage-facility a { color: inherit; text-decoration: underline; }
[data-passport-theme="story"] .stage-derived,
[data-passport-theme="story"] .stage-description { margin-top: 2px; color: #52525b; font-size: 13px; line-height: 19px; }
[data-passport-theme="story"] .stage-notes { margin-top: 6px; color: #52525b; font-size: 13px; line-height: 19px; overflow-wrap: anywhere; }
[data-passport-theme="story"] .stage-link { margin-top: 4px; }

/* End of life group (D58): instruction rows under the header, no picture, no country. */
[data-passport-theme="story"] .stage-rows { display: flex; flex-direction: column; gap: 14px; margin: 12px 0 0; padding: 0; list-style: none; }
[data-passport-theme="story"] .stage-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 12px; border-top: 1px solid #e4e4e7; }
[data-passport-theme="story"] .stage-row-title { color: #09090b; font-size: 13px; font-weight: 500; line-height: 18px; overflow-wrap: anywhere; }
[data-passport-theme="story"] .stage-row .stage-description { margin-top: 0; }

/* Show more (D59): the empty <details> toggle reveals the rest of a long text, no script. */
[data-passport-theme="story"] .long-text { overflow-wrap: anywhere; white-space: pre-line; }
[data-passport-theme="story"] .long-text-rest,
[data-passport-theme="story"] .long-text-less { display: none; }
[data-passport-theme="story"] .long-text:has(> .long-text-toggle[open]) .long-text-rest,
[data-passport-theme="story"] .long-text-toggle[open] .long-text-less { display: inline; }
[data-passport-theme="story"] .long-text:has(> .long-text-toggle[open]) .long-text-ellipsis,
[data-passport-theme="story"] .long-text-toggle[open] .long-text-more { display: none; }
[data-passport-theme="story"] .long-text-toggle { display: inline; white-space: normal; }
[data-passport-theme="story"] .long-text-toggle > summary { display: inline; white-space: nowrap; color: #71717a; font-size: 12px; line-height: 16px; text-decoration: underline; text-underline-offset: 2px; list-style: none; cursor: pointer; }
[data-passport-theme="story"] .long-text-toggle > summary::-webkit-details-marker { display: none; }

/* ---- Other materials: no origin country, so no pin and no picture ---- */
[data-passport-theme="story"] .other-materials { display: flex; flex-direction: column; gap: 12px; }
[data-passport-theme="story"] .other-materials-title { padding-bottom: 16px; border-bottom: 1px solid #e4e4e7; color: #09090b; font-size: 14px; font-weight: 500; line-height: 24px; }
[data-passport-theme="story"] .other-materials-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
[data-passport-theme="story"] .other-materials-list li { display: flex; justify-content: space-between; gap: 16px; color: #52525b; font-size: 13px; line-height: 19px; }
[data-passport-theme="story"] .other-share { color: #09090b; font-weight: 500; }

/* ---- Certifications and claims chips ---- */
[data-passport-theme="story"] .chip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
[data-passport-theme="story"] .chip { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid #e4e4e7; color: inherit; text-decoration: none; }
[data-passport-theme="story"] a.chip:hover { border-color: #09090b; }
[data-passport-theme="story"] .chip-name { color: #09090b; font-size: 13px; font-weight: 500; line-height: 18px; overflow-wrap: anywhere; }
[data-passport-theme="story"] .chip-trust { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; line-height: 12px; letter-spacing: .06em; text-transform: uppercase; }
[data-passport-theme="story"] .chip-trust.verified { color: #047857; }
[data-passport-theme="story"] .chip-trust.declared { color: #71717a; }
[data-passport-theme="story"] .chip-trust svg { width: 10px; height: 10px; }
[data-passport-theme="story"] .chip-issuer { color: #71717a; font-size: 11px; line-height: 14px; }

/* ---- Narrow screens (D28) ---- */
@media (max-width: 480px) {
    [data-passport-theme="story"] .journey-stage { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding-bottom: 24px; }
    [data-passport-theme="story"] .journey-stage::before { top: 64px; left: 31px; }
    [data-passport-theme="story"] .stage-picture { width: 64px; height: 64px; }
}