/* Visual explanations for real break-time and activity data. */
.outdoor-page .break-budget-steps {
  grid-column:1 / -1;
  grid-row:2;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px;
  width:100%;
  margin:5px 0 2px;
}
.outdoor-page .break-budget-steps span {
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  min-height:64px;
  padding:9px;
  color:#456453;
  background:#fffdf8;
  border:1px solid #e4dfd1;
  border-radius:10px;
  font-size:.75rem;
  line-height:1.25;
}
.outdoor-page .break-budget-steps b {
  margin-bottom:4px;
  color:#245c4c;
  font-size:.95rem;
  line-height:1;
}
.outdoor-page .break-time-panel > .break-time-explanation { grid-row:3; }
.outdoor-page .break-time-panel > #refresh-outdoor-data { grid-row:3; }

.outdoor-page .destination-time-glance {
  grid-column:1 / -1;
  display:grid;
  gap:5px;
  min-width:0;
  margin:4px 0;
}
.outdoor-page .destination-time-caption {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:9px;
  font-variant-numeric:tabular-nums;
}
.outdoor-page .destination-time-caption strong { color:#1e5b47; font-size:.88rem; }
.outdoor-page .destination-time-caption span,
.outdoor-page .destination-time-glance small { color:#61776a; font-size:.75rem; line-height:1.35; }
.outdoor-page .destination-time-track,
.outdoor-page .route-capacity-track {
  display:block;
  width:100%;
  height:9px;
  overflow:hidden;
  background:#e3ebe2;
  border-radius:999px;
}
.outdoor-page .destination-time-track > span,
.outdoor-page .route-capacity-track > span {
  display:block;
  height:100%;
  background:linear-gradient(90deg,#2a7b64,#78ad89);
  border-radius:inherit;
}
.outdoor-page .destination-card[data-status="too-long"] .destination-time-caption strong { color:#8c5a22; }
.outdoor-page .destination-card[data-status="too-long"] .destination-time-track > span,
.outdoor-page .route-capacity-track.is-over > span { background:linear-gradient(90deg,#b37d37,#d0a15a); }

.outdoor-page .route-time-visual {
  display:grid;
  gap:12px;
  margin:18px 0 0;
  padding:16px;
  background:#fff;
  border:1px solid #dfe9dc;
  border-radius:14px;
}
.outdoor-page .route-time-visual[hidden] { display:none; }
.outdoor-page .route-time-visual figcaption {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:9px;
  color:#397865;
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.outdoor-page .route-time-visual figcaption strong {
  color:#173b32;
  font-size:.9rem;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
  text-align:right;
  text-transform:none;
}
.outdoor-page .route-time-visual figcaption em { color:#687b6c; font-style:normal; font-weight:600; }
.outdoor-page .route-time-segments {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px;
  margin:0;
  padding:0;
  list-style:none;
}
.outdoor-page .route-time-segments li {
  display:grid;
  align-content:start;
  gap:3px;
  min-width:0;
  padding:8px 7px;
  background:#eff6ef;
  border-radius:8px;
  text-align:center;
}
.outdoor-page .route-time-segments li:nth-child(2) { background:#e0eee2; }
.outdoor-page .route-time-segments li:nth-child(4) { background:#f3eadb; }
.outdoor-page .route-time-segments strong { color:#1d5748; font-size:.82rem; font-variant-numeric:tabular-nums; }
.outdoor-page .route-time-segments span { color:#60776a; font-size:.75rem; line-height:1.25; }

.outdoor-page .recommendation-fit-diagram {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:7px;
  padding:12px;
  background:#fff;
  border:1px solid rgba(40,108,94,.15);
  border-radius:13px;
}
.outdoor-page .recommendation-fit-diagram > span { display:grid; gap:4px; min-width:0; }
.outdoor-page .recommendation-fit-diagram small { color:#5c7768; font-size:.69rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.outdoor-page .recommendation-fit-diagram strong { color:#1d5949; font-size:.9rem; line-height:1.2; overflow-wrap:anywhere; }
.outdoor-page .recommendation-fit-diagram > b { color:#85a899; font-size:1rem; }

.outdoor-page .history-insight-visual { display:flex; align-items:center; gap:20px; margin-top:12px; }
.outdoor-page .history-completion-ring {
  position:relative;
  display:grid;
  flex:0 0 104px;
  place-items:center;
  width:104px;
  height:104px;
  border-radius:50%;
  background:conic-gradient(#b6e3cd 0 var(--completion),rgba(255,255,255,.18) var(--completion) 100%);
}
.outdoor-page .history-completion-ring::before { position:absolute; inset:10px; background:#205549; border-radius:50%; content:""; }
.outdoor-page .history-completion-ring strong { position:relative; color:#fff; font-size:1.45rem; font-variant-numeric:tabular-nums; }
.outdoor-page .history-completion-ring small { color:#cce9da; font-size:.75rem; }
.outdoor-page .history-insight-visual > div:last-child { display:grid; gap:4px; }
.outdoor-page .history-insight-visual > div:last-child strong { color:#fff; font-size:.96rem; }
.outdoor-page .history-insight-visual > div:last-child span { color:#cde8d9; font-size:.83rem; line-height:1.35; }
.outdoor-page .history-insight-visual > div:last-child small { color:#b9d8c9; font-size:.75rem; }
.outdoor-page .history-summary details,
.outdoor-page .history-privacy-disclosure { margin-top:13px; border-top:1px solid rgba(255,255,255,.18); }
.outdoor-page .history-summary details summary,
.outdoor-page .history-privacy-disclosure summary {
  padding:12px 0 0;
  color:#d6f3e4;
  cursor:pointer;
  font-size:.78rem;
  font-weight:750;
}
.outdoor-page .history-summary details summary:focus-visible,
.outdoor-page .history-privacy-disclosure summary:focus-visible { outline:3px solid #b6e3cd; outline-offset:4px; }
.outdoor-page .history-privacy-disclosure .history-privacy-note { margin-top:9px; }

.outdoor-page .feedback-history-list {
  margin-top:14px;
  padding:18px;
  color:#193e34;
  background:#f8fbf8;
  border:1px solid #dbe9de;
  border-radius:14px;
}
.outdoor-page .feedback-history-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.outdoor-page .feedback-history-heading h5,
.outdoor-page .feedback-history-list > h5 { margin:0; font-size:1.05rem; }
.outdoor-page .feedback-history-heading > span { color:#527163; font-size:.77rem; font-weight:700; }
.outdoor-page .feedback-history-list > p { margin:10px 0 0; color:#527163; font-size:.85rem; }
.outdoor-page .feedback-history-list ol {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:14px 0 0;
  padding:0;
  list-style:none;
}
.outdoor-page .feedback-history-item { min-width:0; padding:14px; background:#fff; border:1px solid #dce8df; border-radius:11px; }
.outdoor-page .feedback-history-item-top { display:flex; align-items:start; justify-content:space-between; gap:10px; }
.outdoor-page .feedback-history-item-top > div { display:grid; min-width:0; gap:4px; }
.outdoor-page .feedback-history-item-top strong { font-size:.91rem; overflow-wrap:anywhere; }
.outdoor-page .feedback-history-item-top time,
.outdoor-page .feedback-history-item-top div > span { color:#64796e; font-size:.73rem; }
.outdoor-page .feedback-history-item-top > span { flex:none; padding:4px 7px; color:#1d674f; background:#e6f4ea; border-radius:99px; font-size:.68rem; font-weight:750; }
.outdoor-page .feedback-history-item-top > span[data-outcome="ended-early"] { color:#88591f; background:#f7eddb; }
.outdoor-page .feedback-history-item > p { margin:11px 0 0; color:#4b6858; font-size:.78rem; line-height:1.45; }
.outdoor-page .feedback-history-item details { margin-top:10px; color:#36594a; font-size:.78rem; }
.outdoor-page .feedback-history-item summary,
.outdoor-page .feedback-history-older > summary { width:max-content; max-width:100%; cursor:pointer; font-weight:700; }
.outdoor-page .feedback-history-item details p { margin:8px 0 0; line-height:1.5; overflow-wrap:anywhere; }
.outdoor-page .feedback-history-older { margin-top:14px; padding-top:12px; border-top:1px solid #dce8df; }
.outdoor-page .feedback-history-older > summary { color:#23644e; font-size:.81rem; }
.outdoor-page .feedback-history-list summary:focus-visible { outline:3px solid #50a477; outline-offset:3px; border-radius:3px; }

@media (max-width:700px) {
  .outdoor-page .break-budget-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .outdoor-page .break-time-panel > .break-time-explanation,
  .outdoor-page .break-time-panel > #refresh-outdoor-data { grid-row:auto; }
  .outdoor-page .route-time-visual figcaption { align-items:start; flex-direction:column; }
  .outdoor-page .feedback-history-list ol { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:400px) {
  .outdoor-page .route-time-segments { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .outdoor-page .history-insight-visual { align-items:start; flex-direction:column; }
}
@media (max-width:340px) {
  .outdoor-page .recommendation-fit-diagram { grid-template-columns:minmax(0,1fr); }
  .outdoor-page .recommendation-fit-diagram > b { transform:rotate(90deg); justify-self:center; line-height:.7; }
}