/* DiveScene reef roadmap (/roadmap/). Colours come from the site theme tokens so every theme works. */
.reef-page { --rm-card: rgb(var(--ds-surface)); --rm-shipped: rgb(var(--ds-ok)); --rm-growing: rgb(var(--ds-action)); --rm-planned: rgb(var(--ds-ink-faint));
  --rm-water-top: color-mix(in srgb, rgb(var(--ds-action)) 12%, rgb(var(--ds-bg)));
  --rm-water-deep: color-mix(in srgb, rgb(var(--ds-action)) 45%, #02111b);
  --rm-seabed: #c9b28a; --rm-trunk: #8a6a4a;
  --rm-site: #3d8fd1; --rm-identity: #d99400; --rm-tools: #f06a48; --rm-world: #1fa595; --rm-snap: #8463e8; --rm-platform: #5b6b7a;
  display: grid; gap: 20px; }
.reef-page .legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: rgb(var(--ds-ink-muted)); align-items: center; }
.reef-page .legend i { display: inline-block; width: 14px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.reef-page .legend .k-shipped { background: var(--rm-tools); }
.reef-page .legend .k-growing { background: var(--rm-card); border: 2px solid var(--rm-growing); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rm-growing) 30%, transparent); }
.reef-page .legend .k-planned { border: 2px dashed var(--rm-planned); }
.reef-page .counts { display: flex; flex-wrap: wrap; gap: 10px; }
.reef-page .count { background: var(--rm-card); border: var(--ds-line-w) solid rgb(var(--ds-line)); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-variant-numeric: tabular-nums; }
.reef-page .count b { font-family: var(--ds-font-display); }
.reef-page .stage { border-radius: var(--ds-r-card); overflow: hidden; border: var(--ds-line-w) solid rgb(var(--ds-line)); background: color-mix(in srgb, rgb(var(--ds-surface)) 70%, rgb(var(--ds-bg))); }
.reef-page .scroll { overflow-x: auto; }
.reef-page svg { display: block; width: 100%; height: auto; max-height: 80vh; }
.reef-page .stemlabel { font: 700 13px var(--ds-font-display); fill: #fff; pointer-events: none; }
.reef-page .caplabel { font: 700 11px var(--ds-font-body); fill: #fff; pointer-events: none; }
.reef-page .limb:focus-visible .node, .reef-page .trunk:focus-visible { stroke: rgb(var(--ds-action)); stroke-width: 3; outline: none; }
.reef-page .leaf, .reef-page .limb, .reef-page .trunk { cursor: pointer; }
.reef-page .leaf:hover path:last-of-type, .reef-page .leaf:focus-visible path:last-of-type { stroke-width: 3.5; }
.reef-page .leaf:focus-visible { outline: none; }
.reef-page .leaftext { font: 600 11px var(--ds-font-body); fill: rgb(var(--ds-ink)); pointer-events: none; }
.reef-page .leaftext.shipped { fill: rgb(var(--ds-ink)); }
.reef-page .leaftext.planned { fill: rgb(var(--ds-ink-muted)); }
.reef-page .growing-ring { animation: rm-pulse 2.4s ease-in-out infinite; }
@keyframes rm-pulse { 0%, 100% { opacity: .15; } 50% { opacity: .6; } }
.reef-page .bubble { animation: rm-rise linear infinite; }
@keyframes rm-rise { from { transform: translateY(0); opacity: 0; } 10% { opacity: .5; } to { transform: translateY(-560px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .reef-page .growing-ring { animation: none; opacity: .5; } .reef-page .bubble { animation: none; opacity: 0; } }
.reef-page .detail { background: var(--rm-card); border: var(--ds-line-w) solid rgb(var(--ds-line)); border-radius: var(--ds-r-card); padding: 16px 18px; display: grid; gap: 6px; min-height: 92px; }
.reef-page .detail .kicker { font-size: 12px; }
.reef-page .detail h3 { font: 700 19px var(--ds-font-display); margin: 0; }
.reef-page .detail p { margin: 0; color: rgb(var(--ds-ink-muted)); }
.reef-page .status { display: inline-flex; font-size: 12px !important; font-weight: 700; border-radius: 999px; padding: 2px 10px; width: fit-content; border: 1px solid currentColor; }
.reef-page h2 { font: 700 22px var(--ds-font-display); margin: 12px 0 0; }
.reef-page .list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.reef-page .prod { background: var(--rm-card); border: var(--ds-line-w) solid rgb(var(--ds-line)); border-radius: var(--ds-r-card); padding: 16px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.reef-page .prod h3 { margin: 6px 0 0; font-size: 13px; color: rgb(var(--ds-ink-muted)); }
.reef-page .note { font-size: 13px; color: rgb(var(--ds-ink-faint)); }

.reef-page .leaf { transition: opacity .2s; }
.reef-page .leaf.dim { opacity: .18; }
.reef-page .now-wrap { display: grid; gap: 10px; }
.reef-page .now-wrap h2 { margin: 0; }
.reef-page .now { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.reef-page .now-card { background: var(--rm-card); border: var(--ds-line-w) solid rgb(var(--ds-line)); border-left: 5px solid var(--c); border-radius: var(--ds-r-card); padding: 12px 14px; display: grid; gap: 4px; align-content: start; box-shadow: 0 0 0 3px color-mix(in srgb, var(--rm-growing) 14%, transparent); }
.reef-page .now-card h3 { font: 700 16px var(--ds-font-display); margin: 0; }
.reef-page .now-card p { margin: 0; font-size: 14px; color: rgb(var(--ds-ink-muted)); }
.reef-page .kicker { font-size: 12px; color: rgb(var(--ds-ink-muted)); }
.reef-page .filters { display: grid; gap: 8px; }
.reef-page .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.reef-page .chip { font: 600 14px var(--ds-font-body); min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer; background: var(--rm-card); color: rgb(var(--ds-ink)); border: 2px solid var(--c, rgb(var(--ds-line))); }
.reef-page .chip[aria-pressed="true"] { background: var(--c, rgb(var(--ds-action))); color: #fff; }
.reef-page .chip:focus-visible, .reef-page .prod summary:focus-visible { outline: 3px solid rgb(var(--ds-action)); outline-offset: 2px; }
.reef-page .prod summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font: 700 17px var(--ds-font-display); min-height: 44px; }
.reef-page .prod summary i { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.reef-page .prod summary .n { margin-left: auto; font: 500 12px var(--ds-font-body); color: rgb(var(--ds-ink-muted)); }
.reef-page .prod ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.reef-page .prod li { border-left: 3px solid var(--c); padding-left: 10px; }
.reef-page .prod li.planned { border-left-style: dashed; }
.reef-page .prod li .row { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; font-size: 14px; }
.reef-page .prod li p { margin: 2px 0 0; font-size: 13px; color: rgb(var(--ds-ink-muted)); }
.reef-page .pill { font-size: 11px; font-weight: 700; color: rgb(var(--ds-ink-muted)); display: inline-flex; align-items: center; gap: 5px; }
/* The status colour is a dot, not the text: ok and faint ink at 11px bold sit under 3:1 on the card. */
.reef-page .pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.reef-page [hidden] { display: none !important; }
.reef-page .list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* v3: full-bleed stage, floating controls, designed Growing now cards */
body:has(.reef-page) { overflow-x: clip; }
.reef-hero { padding: 12px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.reef-hero h1 { font-size: clamp(28px, 4vw, 38px); margin: 0; }
.reef-hero p { font-size: 15px; margin: 0; }
.reef-page { gap: 28px; }
.reef-page .stage { position: relative; width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; border-left: 0; border-right: 0; height: clamp(500px, calc(100vh - 262px), 940px);
  background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, rgb(var(--ds-action)) 20%, rgb(var(--ds-bg))) 0%, rgb(var(--ds-bg)) 70%); }
.reef-page .stage svg { width: 100%; height: 100%; max-height: none; }
.reef-page .toolbar { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; margin-bottom: -12px; }
.reef-page .chip { min-height: 38px; padding: 0 14px; font-size: 13px; background: color-mix(in srgb, var(--rm-card) 88%, transparent); backdrop-filter: blur(6px); }
.reef-page .stage .detail { position: absolute; z-index: 2; left: 16px; bottom: 16px; width: min(340px, 42vw); min-height: 0; background: color-mix(in srgb, var(--rm-card) 90%, transparent); backdrop-filter: blur(8px); box-shadow: 0 8px 30px #0003; }
.reef-page .stage .legend { position: absolute; z-index: 2; right: 16px; bottom: 16px; flex-direction: column; align-items: flex-start; gap: 6px; background: color-mix(in srgb, var(--rm-card) 85%, transparent); padding: 10px 14px; border-radius: 12px; font-size: 12px; }
.reef-page .limb:hover .bar { height: 8px; }
.reef-page .stemlabel { font: 800 26px var(--ds-font-display); fill: rgb(var(--ds-ink)); paint-order: stroke; stroke: rgb(var(--ds-bg)); stroke-width: 5px; stroke-linejoin: round; letter-spacing: .01em; }
.reef-page .caplabel { font: 600 14px var(--ds-font-body); fill: rgb(var(--ds-ink)); }
.reef-page .leaftext { font: 600 15px var(--ds-font-body); paint-order: stroke; stroke: rgb(var(--ds-bg)); stroke-width: 4px; stroke-linejoin: round; }
.reef-page .leaf:hover .leaftext { fill: rgb(var(--ds-action)); }
.reef-page .counts { margin-left: auto; }
.reef-page .count { font-size: 13px; padding: 4px 12px; }

.reef-page .now-wrap { display: grid; gap: 14px; }
.reef-page .now-head { display: flex; align-items: center; justify-content: space-between; }
.reef-page .now-head h2 { margin: 0; display: flex; align-items: center; gap: 10px; }
.reef-page .now-head .num { font: 700 13px var(--ds-font-body); padding: 2px 10px; border-radius: 999px; background: var(--rm-growing); color: #fff; }
.reef-page .now-nav { display: flex; gap: 8px; }
.reef-page .now-nav button { width: 40px; height: 40px; border-radius: 50%; border: var(--ds-line-w) solid rgb(var(--ds-line)); background: var(--rm-card); color: rgb(var(--ds-ink)); font-size: 22px; line-height: 1; cursor: pointer; }
.reef-page .now-nav button:focus-visible, .reef-page .now:focus-visible { outline: 3px solid rgb(var(--ds-action)); outline-offset: 2px; }
.reef-page .now { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; padding: 8px 4px 18px; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); }
.reef-page .now-card { flex: 0 0 min(300px, 82vw); scroll-snap-align: start; position: relative; overflow: hidden; display: grid; gap: 8px; align-content: start; padding: 18px 18px 16px; border-radius: 24px; border: 0; border-left: 0;
  background: linear-gradient(155deg, color-mix(in srgb, var(--c) 26%, var(--rm-card)) 0%, var(--rm-card) 62%); box-shadow: 0 10px 28px color-mix(in srgb, var(--c) 22%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); }
.reef-page .now-card::after { content: ""; position: absolute; right: -34px; top: -34px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%); pointer-events: none; }
.reef-page .now-card .ctop { display: flex; align-items: center; gap: 10px; }
.reef-page .now-card .glyph { width: 44px; height: 44px; flex: none; }
.reef-page .now-card .leafg { fill: var(--c); }
.reef-page .now-card .ring { fill: none; stroke: var(--rm-growing); stroke-width: 4; animation: rm-pulse 2.4s ease-in-out infinite; }
.reef-page .now-card .chip-tag { font: 700 12px var(--ds-font-body); color: var(--c); letter-spacing: .02em; }
.reef-page .now-card h3 { font: 700 19px/1.2 var(--ds-font-display); margin: 4px 0 0; }
.reef-page .now-card p { margin: 0; font-size: 14px; line-height: 1.45; color: rgb(var(--ds-ink-muted)); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.reef-page .now-card .where { font-size: 12px; color: rgb(var(--ds-ink-faint)); margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .reef-page .now-card .ring { animation: none; opacity: .5; } }
@media (max-width: 760px) { .reef-page .counts { margin-left: 0; } }

.reef-page .counts { display: none; }
.reef-page .legend b { font-variant-numeric: tabular-nums; margin-right: 2px; }
.reef-page .toolbar { margin-bottom: -16px; }

/* v5: more room for the tree; hint card appears only for a chosen leaf, key folds away, full screen */
.reef-page .stage { height: clamp(560px, calc(100vh - 215px), 1100px); }
.reef-page .stage .detail[hidden], .reef-page .fs[hidden] { display: none; }
.reef-page .stage .detail { padding-right: 40px; }
.reef-page .detail .close { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border: 0; border-radius: 16px; background: transparent; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.reef-page .detail .close:hover { background: color-mix(in srgb, rgb(var(--ds-ink)) 10%, transparent); }
.reef-page .stage .legend.key { display: block; padding: 0; }
.reef-page .legend.key summary { cursor: pointer; padding: 8px 14px; font-weight: 600; list-style: none; min-height: 36px; box-sizing: border-box; display: flex; align-items: center; }
.reef-page .legend.key summary::-webkit-details-marker { display: none; }
.reef-page .legend.key[open] summary { padding-bottom: 2px; }
.reef-page .legend.key span { display: block; padding: 3px 14px; }
.reef-page .legend.key span:last-child { padding-bottom: 10px; }
.reef-page .fs { margin-left: auto; cursor: pointer; }
.reef-page .fx { transition: opacity .25s; }
.reef-page .fx.dim { opacity: .15; }
.reef-page .reef-wrap { display: grid; gap: 0; }
.reef-page .reef-wrap:fullscreen { background: rgb(var(--ds-bg)); grid-template-rows: auto 1fr; padding-top: 10px; }
.reef-page .reef-wrap:fullscreen .toolbar { margin: 0 16px 10px; }
.reef-page .reef-wrap:fullscreen .stage { height: auto; min-height: 0; margin-left: 0; width: 100%; }
.reef-page .reef-wrap .toolbar { margin-bottom: 12px; }

/* v6: seamless tapered coral shapes, clickable tags, overlay full screen */
.reef-page .tw.dim { fill: color-mix(in srgb, var(--c) 13%, rgb(var(--ds-bg))); opacity: 1; }
.reef-page .cap { cursor: pointer; }
.reef-page .cap.dim, .reef-page .limb.dim { opacity: .2; }
.reef-page .cap:hover .capbg, .reef-page .cap:focus-visible .capbg { fill-opacity: .5; outline: none; }
.reef-page .cap:focus-visible .capbg { stroke: rgb(var(--ds-action)); stroke-width: 3; }
.reef-page .limb .node { transition: r .15s; }
.reef-page .limb:hover .node { r: 15; }
.reef-page .stemlabel.root { font-size: 20px; fill: rgb(var(--ds-ink-muted)); }
.reef-page .leaf.dim { opacity: .14; }
.reef-page .leaf:hover, .reef-page .leaf:focus-visible { filter: drop-shadow(0 0 5px var(--rm-growing)); outline: none; }
.reef-page .detail .items { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; max-height: 42vh; overflow: auto; }
.reef-page .detail .item { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 40px; padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.reef-page .detail .item:hover { background: color-mix(in srgb, rgb(var(--ds-ink)) 8%, transparent); }
.reef-page .detail .dot { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--rm-planned); }
.reef-page .detail .dot.shipped { background: var(--rm-shipped); border-color: var(--rm-shipped); }
.reef-page .detail .dot.growing { background: var(--rm-growing); border-color: var(--rm-growing); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rm-growing) 30%, transparent); }
.reef-page .detail .dot.planned { border-style: dashed; }
.reef-page .fs[hidden] { display: none; }
html.reef-expanded body { overflow: hidden; }
.reef-page .reef-wrap.expanded { position: fixed; inset: 0; z-index: 1000; background: rgb(var(--ds-bg)); grid-template-rows: auto 1fr; padding: 10px 14px 0; }
.reef-page .reef-wrap.expanded .toolbar { margin: 0 0 10px; }
.reef-page .reef-wrap.expanded .stage { height: auto; width: 100%; margin-left: 0; min-height: 0; border-radius: 12px; }

/* v7: tags as labelled plates with a coloured edge; the root plate */
.reef-page .capbg { fill: rgb(var(--ds-surface)); stroke: color-mix(in srgb, var(--c) 55%, transparent); stroke-width: 1.4; filter: drop-shadow(0 1px 2px #0003); }
.reef-page .cap:hover .capbg, .reef-page .cap:focus-visible .capbg { fill: color-mix(in srgb, var(--c) 18%, rgb(var(--ds-surface))); }
.reef-page .cap:focus-visible .capbg { stroke: rgb(var(--ds-action)); stroke-width: 3; }
.reef-page .cap.dim .capedge { opacity: .5; }
.reef-page .stemlabel.root { font: 800 20px var(--ds-font-display); fill: #e9eef3; stroke: none; letter-spacing: .02em; }

/* v8: extra legibility on dark themes */
.reef-page svg.dark .leaftext { fill: rgb(var(--ds-ink)); stroke-width: 5px; font-weight: 700; }
.reef-page svg.dark .leaftext.planned { fill: rgb(var(--ds-ink)); opacity: .9; }
.reef-page svg.dark .caplabel { font-weight: 700; }
.reef-page svg.dark .capbg { fill: color-mix(in srgb, var(--c) 22%, rgb(var(--ds-surface))); stroke: color-mix(in srgb, var(--c) 80%, transparent); }

/* v9: the tree on phones, a floating Full screen button, pan and zoom in full screen */
.reef-page .stage svg { touch-action: pan-y; }
.reef-page .reef-wrap.expanded .stage svg { touch-action: none; cursor: grab; }
.reef-page .fs-float { position: absolute; z-index: 3; top: 12px; right: 14px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: var(--ds-line-w) solid rgb(var(--ds-line)); background: color-mix(in srgb, var(--rm-card) 90%, transparent); backdrop-filter: blur(8px); color: rgb(var(--ds-ink)); font: 600 14px var(--ds-font-body); cursor: pointer; box-shadow: 0 4px 16px #0002; }
.reef-page .fs-float:hover { background: var(--rm-card); }
.reef-page .fs-float svg { width: 18px; height: 18px; }
.reef-page .zhint { display: none; }
.reef-page .reef-wrap.expanded .zhint { display: block; position: absolute; z-index: 3; top: 16px; left: 50%; transform: translateX(-50%); margin: 0; padding: 6px 14px; border-radius: 999px; font-size: 13px; background: color-mix(in srgb, var(--rm-card) 90%, transparent); color: rgb(var(--ds-ink-muted)); animation: rm-hint 6s ease forwards; pointer-events: none; white-space: nowrap; }
@keyframes rm-hint { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 760px) {
  .reef-page .stage { height: clamp(340px, 60vh, 520px); }
  .reef-page .stage .detail { width: calc(100% - 28px); left: 14px; bottom: 56px; }
  .reef-page .fs-float span { display: inline; }
  .reef-page .zhint { white-space: normal !important; width: calc(100% - 150px); top: 12px !important; font-size: 12px !important; text-align: center; }
  .reef-page .reef-wrap.expanded { height: 100dvh; }
  .reef-page .reef-wrap.expanded .chips { flex-wrap: nowrap; overflow-x: auto; }
}
.reef-page .reef-wrap { grid-template-columns: minmax(0, 1fr); }
.reef-page .reef-wrap.expanded .chip { white-space: nowrap; }
@media (max-width: 760px) {
  .reef-page .reef-wrap.expanded .toolbar { display: grid; gap: 6px; min-width: 0; }
  .reef-page .reef-wrap.expanded .chips { min-width: 0; max-width: 100%; padding-bottom: 2px; }
  .reef-page .reef-wrap.expanded .counts { display: none; }
}
.reef-page .reef-wrap.expanded .chip { flex: none; }
.reef-page .reef-wrap.expanded .zhint { top: 70px; }
@media (max-width: 760px) { .reef-page .zhint { top: 70px !important; width: calc(100% - 28px); } }

/* v10: phone limb view */
.reef-page .limbtitle { font: 800 24px var(--ds-font-display); fill: rgb(var(--ds-ink)); }
.reef-page .limbsub { font: 500 14px var(--ds-font-body); fill: rgb(var(--ds-ink-muted)); }
.reef-page .caplabel.big { font-size: 15px; text-anchor: start; }
.reef-page .row { cursor: pointer; }
@media (max-width: 760px) {
  .reef-page .fs-float, .reef-page .zhint { display: none !important; }
  .reef-page .stage .detail { position: fixed; left: 12px; right: 12px; bottom: 12px; width: auto; z-index: 60; }
  .reef-page svg.phone .stemlabel { font-size: 54px; stroke-width: 10px; }
  .reef-page .stage { height: clamp(360px, 62vh, 560px); }
}

/* Shared search/filter state across the reef, growing cards and readable list. */
.reef-page .roadmap-search { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.reef-page .roadmap-search label { font-weight: 700; }
.reef-page .roadmap-search input { flex: 1 1 260px; min-width: 0; min-height: 44px; border: 1px solid rgb(var(--ds-line)); border-radius: 10px; background: var(--rm-card); color: rgb(var(--ds-ink)); padding: 8px 12px; font: inherit; }
.reef-page .roadmap-search input:focus-visible { outline: 3px solid rgb(var(--ds-action)); outline-offset: 2px; }
.reef-page #filterResult { flex-basis: 100%; color: rgb(var(--ds-ink-muted)); font-size: 14px; }
.reef-page .stage .detail { max-height: min(65vh, 560px); overflow-y: auto; }
.reef-page .now-card p { display: block; overflow: visible; }

/* Explore a small reef, not a never-ending trunk. */
.reef-page .stage.exploring { height: auto; min-height: 0; padding: 18px max(16px, calc((100vw - 1100px)/2)) 28px; box-sizing: border-box; }
.reef-page .stage.exploring > .fs-float, .reef-page .stage.exploring > .legend, .reef-page .stage.exploring > .zhint { display: none !important; }
.reef-explorer { display: grid; gap: 20px; }
.reef-page .reef-trail { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.reef-page .reef-trail button { min-height: 44px; border: 1px solid rgb(var(--ds-line)); background: var(--rm-card); color: rgb(var(--ds-ink)); border-radius: 999px; padding: 8px 14px; font: 600 14px var(--ds-font-body); cursor: pointer; }
.reef-page .explore-heading { border-left: 4px solid var(--c); padding-left: 14px; }
.reef-page .explore-heading h2 { margin: 3px 0 6px; font-size: clamp(23px, 4vw, 32px); }
.reef-page .explore-heading p { margin: 0; color: rgb(var(--ds-ink-muted)); }
.explore-eyebrow { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--ds-ink-muted)); }
.branch-garden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.reef-page .branch-island { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 7px; min-width: 0; border: 1px solid color-mix(in srgb, var(--c) 35%, rgb(var(--ds-line))); border-radius: 18px; background: radial-gradient(ellipse at 85% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 75%), var(--rm-card); color: rgb(var(--ds-ink)); padding: 12px 16px 16px; cursor: pointer; transition: transform .18s, border-color .18s; }
.reef-page .branch-island:hover { border-color: var(--c); transform: translateY(-3px); }
.reef-page .branch-island .branch-art { width: 100%; height: 82px; overflow: visible; }
.branch-stem { fill: none; stroke: var(--c); stroke-width: 3; stroke-linecap: round; opacity: .7; }
.island-leaf { fill: var(--c); stroke: rgb(var(--ds-ink)); stroke-width: 1.2; }
.island-leaf.growing { fill: color-mix(in srgb, var(--c) 40%, rgb(var(--ds-ink))); stroke-width: 2.5; }
.island-leaf.planned { fill: rgb(var(--ds-bg)); stroke: var(--c); stroke-dasharray: 3 2; }
.island-name { font: 700 19px var(--ds-font-display); }
.island-count { font: 600 13px var(--ds-font-body); color: rgb(var(--ds-ink-muted)); }
.island-states { display: flex; flex-wrap: wrap; gap: 4px 10px; color: rgb(var(--ds-ink-muted)); font: 500 11px var(--ds-font-body); }
.island-states span::before, .bloom-status::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; background: var(--rm-shipped); }
.island-states .growing::before, .bloom-status.growing::before { background: var(--rm-growing); }
.island-states .planned::before, .bloom-status.planned::before { background: var(--rm-planned); }
.feature-garden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.reef-page .feature-bloom { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 18px; text-align: left; color: rgb(var(--ds-ink)); background: var(--rm-card); border: 1px solid rgb(var(--ds-line)); border-left: 4px solid var(--c); border-radius: 14px; cursor: pointer; font: inherit; }
.bloom-title { font: 700 20px var(--ds-font-display); }
.bloom-status { font-size: 12px; font-weight: 600; color: rgb(var(--ds-ink-muted)); }
.bloom-description { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.55; color: rgb(var(--ds-ink-muted)); }
.bloom-more { font-size: 13px; font-weight: 600; }
.explore-cue { color: rgb(var(--ds-ink-muted)); text-align: center; font-size: 13px; margin: 0; }
.reef-explorer button:focus-visible { outline: 3px solid rgb(var(--ds-action)); outline-offset: 3px; }
.reef-page .reef-wrap.expanded .stage.exploring { overflow-y: auto; height: calc(100dvh - 110px); }
@media (max-width: 760px) {
  .branch-garden { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .reef-page .branch-island { padding: 8px 12px 13px; gap: 5px; }
  .island-name { font-size: 17px; }
  .feature-garden { grid-template-columns: minmax(0, 1fr); }
  .reef-page .stage.exploring { padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) { .reef-page .branch-island { transition: none; } .reef-page .branch-island:hover { transform: none; } }

.reef-page .reef-trail { justify-content: flex-start; }
.reef-page .branch-island:hover, .reef-page .feature-bloom:hover { background: color-mix(in srgb, var(--c) 12%, var(--rm-card)); color: rgb(var(--ds-ink)); }
.reef-page .feature-bloom:hover { border-color: var(--c); }
.reef-page .filter-drawer { padding: 8px 0; border-block: 1px solid rgb(var(--ds-line)); }
.reef-page .filter-drawer > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; gap: 10px; font-weight: 600; }
.reef-page .filter-drawer > summary::before { content: '+'; font-size: 23px; color: rgb(var(--ds-action)); }
.reef-page .filter-drawer[open] > summary::before { content: '−'; }
.reef-page .filter-drawer .toolbar { margin-top: 8px; }
.reef-page .roadmap-search { gap: 8px; }
.reef-page .roadmap-search label { flex-basis: 100%; }
@media (max-width: 760px) { .reef-page { gap: 16px; } .reef-hero { padding-top: 4px; } .reef-hero h1 { font-size: 27px; } .reef-page .roadmap-search input { flex-basis: 100%; } .reef-page .branch-island .island-states { font-size: 10px; } }

.reef-page .island-name { line-height: 1.2; }
.reef-page .island-count { line-height: 1.35; }
.reef-page .island-states { line-height: 1.3; gap: 4px 8px; }
.reef-page .island-states span { white-space: nowrap; }
.reef-page .nearby-branches { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
.reef-page .nearby-branches .chip { min-height: 40px; padding: 4px 12px; font-size: 13px; }
@media (max-width: 760px) {
  .reef-page .branch-island { min-height: 158px; }
  .reef-page .branch-island .branch-art { height: 48px; }
  .reef-page .explore-heading h2 { font-size: 25px; }
  .reef-page .explore-heading p { font-size: 14px; line-height: 1.4; }
  .reef-page .island-states { font-size: 11px; }
}

.reef-page .reef-pulse { display: flex; flex-wrap: wrap; gap: 8px 24px; color: rgb(var(--ds-ink-muted)); font-size: 12px; }
.reef-page .pulse-item { display: inline-flex; align-items: baseline; gap: 6px; }
.reef-page .pulse-item b { color: rgb(var(--ds-ink)); font: 700 19px var(--ds-font-display); }

/* Keep detail visible even when a small branch has a long feature list. */
.reef-page .stage.exploring .detail { position: fixed; inset: auto 20px 20px auto; width: min(440px, calc(100vw - 64px)); z-index: 60; }
@media (max-width: 760px) { .reef-page .stage.exploring .detail { left: 12px; right: 12px; bottom: 12px; width: auto; } }