/* director.css — HUD objective card, Goals / Status / Shop sheets, door beacon + edge compass.
   Island Luxe tokens only (design.css). Mobile-first: perfect at 390x844, then widened for desktop. */

/* ------------------------------------------------------------ HUD objective card (replaces "Today x/3") */
#dirCard { position: absolute; left: var(--nl-gutter); top: 150px; width: min(312px, calc(100% - 2 * var(--nl-gutter) - 52px)); pointer-events: auto; z-index: 2;
  background: var(--nl-glass); -webkit-backdrop-filter: var(--nl-blur); backdrop-filter: var(--nl-blur); border: 1px solid var(--nl-glass-line, rgba(255,255,255,.62));
  border-radius: var(--nl-r-lg); box-shadow: var(--nl-shadow-2), inset 0 1px 0 rgba(255,255,255,.7); padding: 10px 12px 10px; font-family: var(--nl-font-ui); color: var(--nl-ink);
  transition: transform var(--nl-dur) var(--nl-ease-out), opacity var(--nl-dur), top var(--nl-dur) var(--nl-ease-out); }
#dirCard[hidden] { display: none; }
#dirCard .dc-main { display: flex; align-items: center; gap: 10px; cursor: pointer; border: 0; background: none; padding: 0; width: 100%; text-align: left; color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
#dirCard .dc-ico { flex: none; width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; font-size: 19px; background: var(--nl-grad-lagoon); box-shadow: 0 4px 12px rgba(0,194,199,.35), inset 0 1px 0 rgba(255,255,255,.5); }
#dirCard[data-lane="today"] .dc-ico { background: var(--nl-grad-sunrise); box-shadow: 0 4px 12px rgba(255,158,61,.38), inset 0 1px 0 rgba(255,255,255,.5); }
#dirCard[data-lane="dream"] .dc-ico { background: var(--nl-grad-gold); box-shadow: 0 4px 12px rgba(229,154,0,.38), inset 0 1px 0 rgba(255,255,255,.6); }
#dirCard .dc-txt { min-width: 0; flex: 1; }
#dirCard .dc-lane { font: 700 10px/1 var(--nl-font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--nl-teal); display: flex; gap: 6px; align-items: center; }
#dirCard[data-lane="today"] .dc-lane { color: #D97A12; } #dirCard[data-lane="dream"] .dc-lane { color: #B98100; }
#dirCard .dc-title { font: 700 14px/1.2 var(--nl-font-display); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#dirCard .dc-sub { font: 500 12px/1.2 var(--nl-font-ui); color: var(--nl-ink-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dirCard .dc-chev { flex: none; color: var(--nl-ink-3); font-size: 20px; line-height: 1; }
#dirCard .dc-bar { height: 6px; border-radius: 99px; background: var(--nl-track); overflow: hidden; margin: 9px 0 8px; }
#dirCard .dc-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--nl-grad-lagoon); transition: width var(--nl-dur-slow) var(--nl-ease-out); }
#dirCard[data-lane="today"] .dc-bar i { background: var(--nl-grad-sunrise); } #dirCard[data-lane="dream"] .dc-bar i { background: var(--nl-grad-gold); }
#dirCard .dc-row { display: flex; align-items: center; gap: 6px; }
#dirCard .dc-btn { height: 32px; padding: 0 12px; border-radius: var(--nl-r-pill); border: 0; font: 700 12.5px/1 var(--nl-font-ui); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; background: var(--nl-ink); color: #fff; box-shadow: 0 3px 10px rgba(11,20,48,.25); transition: transform var(--nl-dur-fast) var(--nl-ease-spring); -webkit-tap-highlight-color: transparent; }
#dirCard .dc-btn:active { transform: scale(.95); }
#dirCard .dc-btn.on { background: var(--nl-teal); box-shadow: var(--nl-glow-teal); }
#dirCard .dc-btn.ghost { background: var(--nl-surface-2); color: var(--nl-ink); box-shadow: inset 0 0 0 1px var(--nl-line); }
#dirCard .dc-spacer { flex: 1; }
#dirCard .dc-pulse { font: 700 12px/1 var(--nl-font-num); color: var(--nl-ink-2); display: inline-flex; align-items: center; gap: 4px; background: var(--nl-surface-2); border-radius: var(--nl-r-pill); padding: 8px 10px; border: 0; cursor: pointer; }
#dirCard.pop { animation: dcPop .7s var(--nl-ease-spring); }
@keyframes dcPop { 0% { transform: scale(.94); } 50% { transform: scale(1.04); box-shadow: var(--nl-glow-gold); } 100% { transform: scale(1); } }

/* ------------------------------------------------------------ sheets */
#dirSheet { position: fixed; inset: 0; z-index: 33; display: none; font-family: var(--nl-font-ui); color: var(--nl-ink); }
#dirSheet.open { display: block; }
#dirSheet .ds-scrim { position: absolute; inset: 0; background: var(--nl-scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: dsFade var(--nl-dur) both; }
#dirSheet .ds-panel { position: absolute; right: var(--nl-gutter); top: var(--nl-gutter); bottom: var(--nl-gutter); width: min(440px, calc(100vw - 2 * var(--nl-gutter))); display: flex; flex-direction: column; background: var(--nl-bg); border-radius: var(--nl-r-xl); box-shadow: var(--nl-shadow-3); overflow: hidden; animation: dsRise var(--nl-dur-slow) var(--nl-ease-out) both; }
@keyframes dsFade { from { opacity: 0; } } @keyframes dsRise { from { transform: translateX(24px); opacity: 0; } }
#dirSheet .ds-hero { position: relative; flex: none; color: #fff; padding: 16px 18px 16px; overflow: hidden; }
#dirSheet .ds-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 92% 0%, rgba(255,255,255,.38), transparent 60%); pointer-events: none; }
#dirSheet .ds-hero > * { position: relative; z-index: 1; }
#dirSheet .ds-hero.h-goals { background: var(--nl-f-travel); } #dirSheet .ds-hero.h-status { background: linear-gradient(135deg, #1B2A5C 0%, #0B1430 62%, #C9A24A 150%); } #dirSheet .ds-hero.h-shop { background: var(--nl-grad-sunrise); }
#dirSheet .ds-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#dirSheet .ds-x { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.22); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
#dirSheet .ds-eyebrow { font: 700 11px/1 var(--nl-font-ui); letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
#dirSheet .ds-h1 { font: 800 26px/1.05 var(--nl-font-display); margin: 4px 0 0; }
#dirSheet .ds-sub { font: 500 13px/1.3 var(--nl-font-ui); opacity: .88; margin-top: 4px; }
#dirSheet .ds-tabs { display: flex; gap: 4px; padding: 4px; background: rgba(11,20,48,.28); border-radius: var(--nl-r-pill); margin-top: 12px; }
#dirSheet .ds-tab { flex: 1; height: 34px; border: 0; border-radius: var(--nl-r-pill); background: transparent; color: rgba(255,255,255,.85); font: 700 13px/1 var(--nl-font-ui); cursor: pointer; }
#dirSheet .ds-tab[aria-selected="true"] { background: #fff; color: var(--nl-ink); box-shadow: 0 2px 8px rgba(11,20,48,.2); }
#dirSheet .ds-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px calc(22px + env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling: touch; }
#dirSheet .ds-pulse { display: flex; align-items: center; gap: 12px; margin-top: 12px; background: rgba(255,255,255,.16); border-radius: var(--nl-r-md); padding: 10px 12px; }
#dirSheet .ds-ring { --p: 0; flex: none; width: 52px; height: 52px; border-radius: 50%; background: conic-gradient(var(--nl-gold) calc(var(--p) * 1%), rgba(255,255,255,.25) 0); display: grid; place-items: center; }
#dirSheet .ds-ring b { width: 40px; height: 40px; border-radius: 50%; background: rgba(11,20,48,.55); display: grid; place-items: center; font: 700 14px/1 var(--nl-font-num); }
#dirSheet .ds-pulse small { display: block; opacity: .85; font-size: 12px; margin-top: 2px; }
#dirSheet .ds-pulse strong { font: 800 15px/1.1 var(--nl-font-display); }

#dirSheet .ds-sec { display: flex; align-items: baseline; gap: 8px; margin: 18px 4px 8px; }
#dirSheet .ds-sec:first-child { margin-top: 2px; }
#dirSheet .ds-sec h3 { margin: 0; font: 800 17px/1 var(--nl-font-display); }
#dirSheet .ds-sec span { font: 500 12.5px/1.2 var(--nl-font-ui); color: var(--nl-ink-3); }
#dirSheet .ds-card { background: var(--nl-surface); border-radius: var(--nl-r-lg); box-shadow: var(--nl-shadow-1); border: 1px solid var(--nl-line); padding: 12px; margin-bottom: 10px; position: relative; }
#dirSheet .ds-card.tracked { box-shadow: 0 0 0 2px var(--nl-teal), var(--nl-shadow-2); }
#dirSheet .ds-card.dream { background: linear-gradient(135deg, #FFFBEF 0%, #FFF4D6 100%); border-color: rgba(229,154,0,.25); }
#dirSheet .ds-card.dream.tracked { box-shadow: 0 0 0 2px var(--nl-gold), var(--nl-glow-gold); }
#dirSheet .ds-obj { display: flex; gap: 11px; align-items: flex-start; }
#dirSheet .ds-ico { flex: none; width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; background: var(--nl-surface-2); box-shadow: inset 0 0 0 1px var(--nl-line); }
#dirSheet .lane-now .ds-ico { background: var(--nl-grad-lagoon); } #dirSheet .lane-today .ds-ico { background: var(--nl-grad-sunrise); } #dirSheet .lane-dream .ds-ico { background: var(--nl-grad-gold); }
#dirSheet .ds-t { font: 700 15px/1.2 var(--nl-font-display); } #dirSheet .ds-s { font: 500 12.5px/1.3 var(--nl-font-ui); color: var(--nl-ink-2); margin-top: 3px; }
#dirSheet .ds-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#dirSheet .ds-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: var(--nl-r-pill); font: 700 11.5px/1 var(--nl-font-ui); background: var(--nl-surface-2); color: var(--nl-ink-2); }
#dirSheet .ds-chip.gold { background: color-mix(in srgb, var(--nl-gold) 28%, var(--nl-surface)); color: #7A5200; } #dirSheet .ds-chip.teal { background: var(--nl-teal-soft); color: var(--nl-teal); } #dirSheet .ds-chip.red { background: var(--nl-owed-soft); color: #C0283A; } #dirSheet .ds-chip.flam { background: color-mix(in srgb, var(--nl-flamingo) 16%, var(--nl-surface)); color: #C21E56; }
#dirSheet .ds-bar { height: 7px; border-radius: 99px; background: var(--nl-track); overflow: hidden; margin-top: 9px; } #dirSheet .ds-bar i { display: block; height: 100%; border-radius: 99px; background: var(--nl-grad-lagoon); }
#dirSheet .lane-today .ds-bar i { background: var(--nl-grad-sunrise); } #dirSheet .lane-dream .ds-bar i { background: var(--nl-grad-gold); }
#dirSheet .ds-acts { display: flex; gap: 8px; margin-top: 10px; }
#dirSheet .ds-btn { flex: 1; height: 38px; border: 0; border-radius: var(--nl-r-md); font: 700 13.5px/1 var(--nl-font-ui); cursor: pointer; background: var(--nl-ink); color: #fff; box-shadow: 0 4px 12px rgba(11,20,48,.22); transition: transform var(--nl-dur-fast) var(--nl-ease-spring); -webkit-tap-highlight-color: transparent; }
#dirSheet .ds-btn:active { transform: scale(.97); } #dirSheet .ds-btn.teal { background: var(--nl-teal); box-shadow: var(--nl-glow-teal); } #dirSheet .ds-btn.gold { background: var(--nl-grad-gold); color: #3A2900; box-shadow: var(--nl-glow-gold); }
#dirSheet .ds-btn.ghost { background: var(--nl-surface-2); color: var(--nl-ink); box-shadow: inset 0 0 0 1px var(--nl-line); } #dirSheet .ds-btn[disabled] { opacity: .45; box-shadow: none; cursor: default; }
#dirSheet .ds-btn.sm { height: 32px; font-size: 12.5px; flex: none; padding: 0 14px; border-radius: var(--nl-r-pill); }
#dirSheet .ds-empty { text-align: center; color: var(--nl-ink-3); font: 500 13px/1.4 var(--nl-font-ui); padding: 18px; }
#dirSheet .ds-rank { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--nl-line); font: 600 13.5px/1 var(--nl-font-ui); } #dirSheet .ds-rank:last-child { border: 0; }
#dirSheet .ds-rank.me { background: var(--nl-teal-soft); border-radius: var(--nl-r-sm); padding: 8px; margin: 0 -4px; } #dirSheet .ds-rank b { width: 22px; font-family: var(--nl-font-num); color: var(--nl-ink-3); } #dirSheet .ds-rank span { margin-left: auto; font-family: var(--nl-font-num); color: var(--nl-ink-2); }
/* status */
#dirSheet .st-score { display: flex; align-items: flex-end; gap: 12px; margin-top: 8px; } #dirSheet .st-score .n { font: 800 44px/0.9 var(--nl-font-display); background: var(--nl-grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
#dirSheet .st-score small { display: block; font: 600 12px/1.3 var(--nl-font-ui); opacity: .85; }
#dirSheet .st-bar { height: 8px; background: rgba(255,255,255,.2); border-radius: 99px; overflow: hidden; margin-top: 12px; } #dirSheet .st-bar i { display: block; height: 100%; background: var(--nl-grad-gold); border-radius: 99px; }
#dirSheet .st-tiers { display: flex; justify-content: space-between; font: 600 11.5px/1 var(--nl-font-ui); opacity: .85; margin-top: 6px; }
#dirSheet .st-titles { display: flex; flex-wrap: wrap; gap: 6px; }
#dirSheet .st-title { border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border-radius: var(--nl-r-pill); font: 700 12.5px/1 var(--nl-font-ui); background: var(--nl-surface); color: var(--nl-ink); box-shadow: inset 0 0 0 1px var(--nl-line); }
#dirSheet .st-title.active { background: var(--nl-grad-gold); color: #3A2900; box-shadow: var(--nl-glow-gold); } #dirSheet .st-title.locked { opacity: .5; cursor: default; }
#dirSheet .st-col { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--nl-line); } #dirSheet .st-col:last-child { border: 0; }
#dirSheet .st-col .dnm { font: 700 13.5px/1.2 var(--nl-font-ui); flex: 1; min-width: 0; } #dirSheet .st-col .dnm small { display: block; font-weight: 500; color: var(--nl-ink-3); margin-top: 2px; }
#dirSheet .st-col .dpr { width: 74px; height: 6px; background: var(--nl-track); border-radius: 99px; overflow: hidden; flex: none; } #dirSheet .st-col .dpr i { display: block; height: 100%; background: var(--nl-grad-gold); }
#dirSheet .st-cat > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 0; } #dirSheet .st-cat > summary::-webkit-details-marker { display: none; }
#dirSheet .st-cat .dci { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; background: var(--nl-surface-2); box-shadow: inset 0 0 0 1px var(--nl-line); }
#dirSheet .st-cat .dcn { font: 800 15px/1.1 var(--nl-font-display); flex: 1; } #dirSheet .st-cat .dcn small { display: block; font: 500 12px/1.2 var(--nl-font-ui); color: var(--nl-ink-3); margin-top: 2px; }
#dirSheet .st-cat .dcc { font: 700 12px/1 var(--nl-font-num); color: var(--nl-ink-2); background: var(--nl-surface-2); border-radius: var(--nl-r-pill); padding: 6px 9px; }
#dirSheet .st-owned { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; } #dirSheet .st-own { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 7px; border-radius: var(--nl-r-pill); background: var(--nl-teal-soft); font: 700 12px/1 var(--nl-font-ui); color: #05695D; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dirSheet .dit { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--nl-line); } #dirSheet .dit .dico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; background: var(--nl-surface-2); box-shadow: inset 0 0 0 1px var(--nl-line); }
#dirSheet .dit .dnm { font: 700 14px/1.2 var(--nl-font-ui); } #dirSheet .dit .dbl { font: 500 12px/1.3 var(--nl-font-ui); color: var(--nl-ink-2); margin-top: 2px; } #dirSheet .dit .dmt { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; } #dirSheet .dit .dac { display: flex; gap: 6px; margin-top: 8px; }
#dirSheet .dit.dim .dico, #dirSheet .dit.dim .dnm { opacity: .6; }
#dirSheet .tier-dots { letter-spacing: 1px; color: #E59A00; font-size: 10px; }

/* ------------------------------------------------------------ guidance: grounded door beacon + edge compass */
#dirBeacon { position: fixed; left: 0; top: 0; z-index: 8; pointer-events: none; display: none; will-change: transform; }
#dirBeacon .db-ring { position: absolute; left: 0; top: 0; width: 64px; height: 26px; margin: -13px 0 0 -32px; border-radius: 50%; border: 2px solid rgba(255,199,44,.95); background: radial-gradient(closest-side, rgba(255,199,44,.05), rgba(255,199,44,.32)); box-shadow: 0 0 14px rgba(255,199,44,.55), inset 0 0 10px rgba(255,255,255,.35); animation: dbPulse 2.2s ease-in-out infinite; transform-origin: 50% 50%; }
#dirBeacon .db-ring::after { content: ""; position: absolute; inset: 22% 18%; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.8); opacity: .8; }
#dirBeacon .db-pin { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -50px 0 0 -11px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: var(--nl-grad-gold); box-shadow: 0 3px 8px rgba(11,20,48,.35), inset 0 1px 0 rgba(255,255,255,.7); border: 1.5px solid var(--nl-ink); animation: dbBob 2.2s ease-in-out infinite; }
#dirBeacon .db-pin::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--nl-ink); }
#dirBeacon .db-lab { position: absolute; left: 0; top: 0; transform: translate(-50%, 8px); margin-top: 14px; white-space: nowrap; font: 700 11px/1 var(--nl-font-num); color: var(--nl-ink); background: rgba(255,255,255,.9); border-radius: 99px; padding: 4px 8px; box-shadow: 0 2px 8px rgba(11,20,48,.2); }
@keyframes dbPulse { 0%, 100% { transform: scale(.92); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } } @keyframes dbBob { 0%, 100% { margin-top: -50px; } 50% { margin-top: -55px; } }
#dirArrow { position: fixed; left: 0; top: 0; z-index: 8; pointer-events: none; display: none; will-change: transform; }
#dirArrow .da-a { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%; background: var(--nl-glass-dark); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(11,20,48,.35), inset 0 0 0 1.5px rgba(255,199,44,.9); display: grid; place-items: center; }
#dirArrow .da-a svg { width: 18px; height: 18px; fill: var(--nl-gold); }
#dirArrow .da-l { position: absolute; left: 0; top: 0; transform: translate(-50%, 22px); white-space: nowrap; font: 700 11px/1 var(--nl-font-num); color: var(--nl-ink); background: rgba(255,255,255,.92); border-radius: 99px; padding: 4px 8px; box-shadow: 0 2px 8px rgba(11,20,48,.22); max-width: 150px; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 640px) {
  #dirCard { width: calc(100% - 2 * var(--nl-gutter) - 52px); padding: 8px 10px; border-radius: 20px; }
  #dirCard .dc-ico { width: 34px; height: 34px; font-size: 17px; border-radius: 11px; }
  #dirCard .dc-bar { margin: 7px 0 7px; }
  #dirSheet .ds-panel { left: 0; right: 0; top: 0; bottom: 0; width: auto; border-radius: 0; animation-name: dsUp; }
  @keyframes dsUp { from { transform: translateY(24px); opacity: 0; } }
  #dirSheet .ds-hero { padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 14px; }
  #dirSheet .ds-h1 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { #dirCard.pop, #dirBeacon .db-ring, #dirBeacon .db-pin, #dirSheet .ds-panel, #dirSheet .ds-scrim { animation: none !important; } }
body.driving #dirCard { opacity: .92; }

/* ------------------------------------------------------------ phone: one slim pill, tap to expand */
#dirCard .dc-pill { display: none; }
@media (max-width: 600px) { #dirCard { } }
#dirCard.ph:not(.open) { padding: 0; height: 40px; width: auto; max-width: calc(100% - 2 * var(--nl-gutter) - 52px); border-radius: 999px; display: inline-flex; align-items: center; }
#dirCard.ph:not(.open) .dc-main, #dirCard.ph:not(.open) .dc-bar, #dirCard.ph:not(.open) .dc-row { display: none; }
#dirCard.ph:not(.open) .dc-pill { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 5px 0 8px; min-width: 0; width: 100%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#dirCard .dp-ico { flex: none; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; background: var(--nl-grad-lagoon); }
#dirCard[data-lane="today"] .dp-ico { background: var(--nl-grad-sunrise); } #dirCard[data-lane="dream"] .dp-ico { background: var(--nl-grad-gold); }
#dirCard .dp-t { min-width: 0; flex: 1; font: 700 13px/1 var(--nl-font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
#dirCard .dp-d { flex: none; font: 700 11.5px/1 var(--nl-font-num); color: var(--nl-ink-2); }
#dirCard .dp-g { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--nl-ink); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
#dirCard .dp-g.on { background: var(--nl-teal); box-shadow: var(--nl-glow-teal); }
#dirCard.ph.open .dc-shop { width: 34px; padding: 0; justify-content: center; font-size: 0; }
#dirCard.ph.open .dc-shop::before { content: "\1F6CD"; font-size: 15px; }
#dirCard.ph.open { animation: dcPop .35s var(--nl-ease-out); }