/* River outings, gear, and habitat services inside the field notebook. */
#outingsContent {
    --outing-ink: #354a43;
    --outing-muted: #687b74;
    --outing-leaf: #5d8063;
    --outing-line: #d6e2d8;
    display: grid;
    gap: 18px;
    color: var(--outing-ink);
}

#outingsContent *, #outingsContent *::before, #outingsContent *::after { box-sizing: border-box; }
#outingsContent h3, #outingsContent h4, #outingsContent h5, #outingsContent p { margin-top: 0; }
#outingsContent button { font: inherit; }
#outingsContent button:focus-visible { outline: 3px solid #9dc7b0; outline-offset: 3px; }

#outingsContent .outing-section,
#outingsContent .chill-section {
    overflow: hidden;
    border: 1px solid var(--outing-line);
    border-radius: 19px;
    background: linear-gradient(135deg, #f3f8f0, #fffdf5 70%);
    box-shadow: 0 5px 18px rgba(47, 79, 67, .055);
}

#outingsContent .outing-section { padding: clamp(16px, 2.5vw, 24px); }
#outingsContent .outing-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
#outingsContent .outing-eyebrow { display: block; margin-bottom: 4px; color: #718c78; font-size: .64rem; font-weight: 800; letter-spacing: .13em; }
#outingsContent .outing-heading h3, #outingsContent .chill-copy h3 { margin: 0 0 6px; color: #3d5a4e; font: 700 clamp(1.2rem, 2.4vw, 1.55rem)/1.18 Georgia, serif; }
#outingsContent .outing-heading p, #outingsContent .chill-copy p { max-width: 690px; margin: 0; color: var(--outing-muted); font-size: .78rem; line-height: 1.5; }
#outingsContent .outing-bonus-total { flex: 0 0 auto; padding: 8px 11px; border: 1px solid #cfdfd1; border-radius: 99px; background: #f7faf1; color: #4d7358; font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; }

#outingsContent .outing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
#outingsContent .outing-card { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 11px; min-width: 0; padding: 13px; border: 1px solid #dce7db; border-radius: 15px; background: #fffef8; transition: border-color .18s ease, background .18s ease; }
#outingsContent .outing-card.is-friend-locked { background: #f7f7ed; }
#outingsContent .outing-card.is-prestige-locked { opacity: .82; }
#outingsContent .outing-art { display: grid; place-items: center; width: 62px; height: 62px; border: 1px solid #deeadf; border-radius: 18px; background: linear-gradient(145deg, #e3f0e2, #f8efd9); color: #628275; }
#outingsContent .outing-art img { display: block; width: 58px; height: 54px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(60,74,54,.12)); }
#outingsContent .outing-copy { min-width: 0; }
#outingsContent .outing-kind { color: #92a08d; font-size: .54rem; font-weight: 800; letter-spacing: .1em; }
#outingsContent .outing-copy h4 { margin: 3px 0 4px; color: #425e50; font: 700 .95rem/1.2 Georgia, serif; }
#outingsContent .outing-copy > p { margin: 0; color: #718075; font-size: .68rem; line-height: 1.4; }
#outingsContent .outing-copy .outing-requirement { margin-top: 5px; color: #8a7656; }
#outingsContent .outing-start-button,
#outingsContent .outing-craft-button,
#outingsContent .chill-start-button { min-height: 37px; padding: 8px 10px; border: 1px solid #547a60; border-radius: 10px; background: #64896b; color: #fffef7; font-size: .73rem; font-weight: 800; cursor: pointer; transition: background .16s ease, transform .16s ease, opacity .16s ease; }
#outingsContent .outing-start-button { grid-column: 1 / -1; }
#outingsContent .outing-start-button:hover:not(:disabled),
#outingsContent .outing-craft-button:hover:not(:disabled),
#outingsContent .chill-start-button:hover:not(:disabled) { transform: translateY(-1px); background: #4e7359; }
#outingsContent .outing-start-button:disabled,
#outingsContent .outing-craft-button:disabled,
#outingsContent .chill-start-button:disabled { cursor: default; opacity: .55; }

#outingsContent .outing-progress { display: grid; gap: 8px; margin-top: 12px; padding: 12px 14px; border: 1px solid #cddfd8; border-radius: 13px; background: #edf6f1; }
#outingsContent .outing-progress-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: #4c6e60; font-size: .73rem; }
#outingsContent .outing-progress-copy strong { font-size: .77rem; }
#outingsContent .outing-progress-copy span { color: #788b81; font-variant-numeric: tabular-nums; }
#outingsContent .outing-track,
#outingsContent .chill-progress-track { height: 8px; overflow: hidden; border-radius: 99px; background: #d6e7df; }
#outingsContent .outing-track span,
#outingsContent .chill-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a9c68c, #5f9c87); transition: width .22s linear; }

#outingsContent .outing-finds,
#outingsContent .outing-gear,
#outingsContent .outing-service-section { margin-top: 17px; }
#outingsContent .outing-subheading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 0 1px 9px; }
#outingsContent .outing-subheading h4 { margin: 0; color: #496354; font: 700 1rem/1.2 Georgia, serif; }
#outingsContent .outing-subheading > p { max-width: 410px; margin: 0; color: #78867d; font-size: .66rem; line-height: 1.35; text-align: right; }
#outingsContent .outing-finds-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
#outingsContent .outing-find-card { display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: center; column-gap: 8px; min-width: 0; padding: 8px 9px; border: 1px solid #e1e8da; border-radius: 12px; background: #fafaf2; transition: background .18s ease, border-color .18s ease; }
#outingsContent .outing-find-card.has-stacks { border-color: #c8dcbf; background: #f0f6e8; }
#outingsContent .outing-find-card.at-cap { border-color: #d8c69f; background: #faf3df; }
#outingsContent .outing-find-mark { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #e8eee0; color: #849b70; font-size: .95rem; }
#outingsContent .outing-find-card h4 { overflow: hidden; margin: 0; color: #586a59; font-size: .66rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
#outingsContent .outing-find-card p { margin: 2px 0 0; color: #819080; font-size: .58rem; line-height: 1.25; }
#outingsContent .outing-find-card > strong { grid-column: 2; margin-top: 4px; color: #527353; font-size: .62rem; font-variant-numeric: tabular-nums; }
#outingsContent .outing-supply-scale .outing-find-mark { color: #768a82; background: #e9efea; }
#outingsContent .outing-supply-shell .outing-find-mark { color: #907a59; background: #f2ead8; }
#outingsContent .outing-supply-knot .outing-find-mark { color: #977347; background: #f7edd7; }
#outingsContent .outing-supply-pebble .outing-find-mark { color: #75846e; background: #e9eee2; }
#outingsContent .outing-supply-quartz .outing-find-mark { color: #647b7d; background: #e3efec; }
#outingsContent .outing-supply-greenstone .outing-find-mark { color: #5c8067; background: #e2f0e2; }

#outingsContent .outing-gear-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#outingsContent .outing-gear-card { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 8px; padding: 10px; border: 1px solid #e1e8da; border-radius: 12px; background: #fffef8; }
#outingsContent .outing-gear-card.has-charges { border-color: #bfd2b1; background: #f2f7ea; }
#outingsContent .outing-gear-mark,
#outingsContent .outing-service-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; background: #eee8d7; color: #8c704a; font: 700 1.05rem/1 Georgia, serif; }
#outingsContent .outing-gear-card h5,
#outingsContent .outing-service-card h5 { margin: 1px 0 3px; color: #4f6551; font: 700 .8rem/1.2 Georgia, serif; }
#outingsContent .outing-gear-card p,
#outingsContent .outing-service-card p { margin: 0 0 4px; color: #778274; font-size: .64rem; line-height: 1.4; }
#outingsContent .outing-gear-card small { color: #8b7956; font-size: .62rem; font-weight: 700; }
#outingsContent .outing-gear-card .outing-craft-button { grid-column: 1 / -1; width: 100%; min-height: 32px; padding: 6px; font-size: .65rem; }

#outingsContent .outing-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#outingsContent .outing-service-card { display: grid; grid-template-columns: 29px minmax(0, 1fr); align-items: start; gap: 7px; padding: 9px; border: 1px solid #e1e8da; border-radius: 12px; background: #fffef8; }
#outingsContent .outing-service-card.is-built { border-color: #b8cdae; background: #f0f5e8; }
#outingsContent .outing-service-card.is-future { opacity: .78; }
#outingsContent .outing-service-stage { display: block; margin: 1px 0 3px; color: #92a08d; font-size: .48rem; font-weight: 800; letter-spacing: .08em; }
#outingsContent .outing-service-card p { min-height: 2.6em; }
#outingsContent .outing-service-card .outing-craft-button { grid-column: 1 / -1; width: 100%; min-height: 32px; padding: 6px; font-size: .65rem; }

#outingsContent .chill-section { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, .7fr); align-items: center; gap: 13px 18px; padding: clamp(16px, 2.5vw, 22px); background: linear-gradient(125deg, #edf7f2, #fff8e9 75%); }
#outingsContent .chill-copy { grid-column: 1 / -1; }
#outingsContent .chill-copy h3 { margin-bottom: 5px; }
#outingsContent .chill-copy p { max-width: 540px; }
#outingsContent .chill-tea-scene { position: relative; display: grid; place-items: center; min-height: 155px; overflow: hidden; border-radius: 14px; color: #a77c4d; background: #dce5c2 url('wetland-restoration.png') center 70% / cover; }
#outingsContent .tea-capy-parent, #outingsContent .tea-capy-baby { position: absolute; width: 110px; height: auto; bottom: 14px; left: calc(50% - 110px); filter: drop-shadow(0 3px 2px #4b3e3940); }
#outingsContent .tea-capy-baby { width: 57px; bottom: 12px; left: calc(50% - 12px); }
#outingsContent .chill-tea-scene .chill-tea-cup { position: absolute; width: 32px; height: 32px; bottom: 18px; left: calc(50% + 49px); font-size: 1rem; }
#outingsContent .chill-tea-scene .chill-tea-steam { top: auto; bottom: 49px; left: calc(50% + 58px); }
#outingsContent .chill-tea-scene .chill-tea-steam-b { left: calc(50% + 69px); }
#outingsContent .stonework-credit { margin: 12px 0 0; color: #6d786a; font-size: .72rem; line-height: 1.5; }
#outingsContent .chill-tea-cup { position: relative; z-index: 2; display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid #cbaa73; border-radius: 17px 17px 20px 20px; background: linear-gradient(145deg, #fff9e7, #ead4a9); box-shadow: 0 7px 14px rgba(101, 89, 58, .12); font-size: 1.55rem; }
#outingsContent .chill-tea-ripple { position: absolute; bottom: 13px; width: 78px; height: 15px; border: 2px solid #9bc7b4; border-top-color: transparent; border-radius: 50%; opacity: .76; }
#outingsContent .chill-tea-ripple-a { transform: rotate(-4deg); }
#outingsContent .chill-tea-ripple-b { bottom: 7px; width: 96px; opacity: .48; transform: rotate(3deg); }
#outingsContent .chill-tea-steam { position: absolute; top: 12px; width: 9px; height: 25px; border-left: 2px solid #b0a37e; border-radius: 50%; opacity: .65; animation: teaSteam 2.8s ease-in-out infinite; }
#outingsContent .chill-tea-steam-a { left: 41px; }
#outingsContent .chill-tea-steam-b { left: 56px; top: 8px; height: 30px; animation-delay: -1.2s; }
#outingsContent .chill-action { display: grid; gap: 8px; }
#outingsContent .chill-status { min-height: 1.2em; margin: 0; color: #5d806d; font-size: .68rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }

@keyframes teaSteam { 0%, 100% { transform: translateY(2px) skewX(-5deg); opacity: .35; } 50% { transform: translateY(-4px) skewX(8deg); opacity: .75; } }

#outingsContent .tea-menu { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#outingsContent .tea-menu button { min-width: 0; padding: 12px; text-align: left; color: #526a56; background: #fffdf4; border: 1px solid #d6dfcc; border-radius: 12px; cursor: pointer; }
#outingsContent .tea-menu button[aria-pressed="true"] { background: #e8f0dc; border-color: #719669; box-shadow: inset 0 0 0 1px #719669; }
#outingsContent .tea-menu strong { display: block; margin-bottom: 6px; font: 700 .85rem/1.3 Georgia, serif; }
#outingsContent .tea-menu span { display: block; font-size: .72rem; line-height: 1.45; }
#outingsContent .tea-menu button:disabled { cursor: default; }
#outingsContent .tea-scrapbook { grid-column: 1 / -1; padding: 14px; border: 1px solid #ded7bb; border-radius: 12px; background: #fffbef; }
#outingsContent .tea-scrapbook summary { color: #6c644a; font-weight: 700; cursor: pointer; }
#outingsContent .tea-scrapbook > p { margin: 10px 0; font-size: .75rem; color: #827b64; }
#outingsContent .tea-memory-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
#outingsContent .tea-memory-grid article { padding: 12px; border-radius: 10px; background: #f4edda; }
#outingsContent .tea-memory-grid article > span { display: block; width: 100%; height: 72px; margin-bottom: 5px; }
#outingsContent .tea-memory-grid article > span img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(60,74,54,.12)); }
#outingsContent .tea-memory-grid h4 { margin: 5px 0; color: #655b43; font: 700 .9rem Georgia, serif; }
#outingsContent .tea-memory-grid p { margin: 0; font-size: .75rem; line-height: 1.55; color: #776c56; }
#outingsContent .chill-section[data-brew="mint"] .chill-tea-cup { background: linear-gradient(145deg,#f4fff0,#cbdcbc); }
#outingsContent .chill-section[data-brew="stories"] .chill-tea-cup { background: linear-gradient(145deg,#fff5e6,#e7c9ac); }
@media (max-width: 580px) {
    #outingsContent .tea-menu, #outingsContent .tea-memory-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    #outingsContent .outing-finds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #outingsContent .outing-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 580px) {
    #outingsContent { gap: 13px; }
    #outingsContent .outing-heading { flex-direction: column; gap: 10px; }
    #outingsContent .outing-bonus-total { align-self: flex-start; }
    #outingsContent .outing-grid,
    #outingsContent .outing-gear-grid,
    #outingsContent .outing-service-grid { grid-template-columns: 1fr; }
    #outingsContent .outing-subheading { align-items: start; flex-direction: column; gap: 5px; }
    #outingsContent .outing-subheading > p { text-align: left; }
    #outingsContent .outing-finds-grid { grid-template-columns: 1fr; }
    #outingsContent .chill-section { grid-template-columns: 1fr; gap: 10px; }
    #outingsContent .chill-copy { grid-column: 1 / -1; }
    #outingsContent .chill-tea-scene { min-height: 155px; }
    #outingsContent .chill-action { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    #outingsContent *, #outingsContent *::before, #outingsContent *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}