/* Lifefellow chrome overrides. The copied look-specific canvases keep their own colours. */
:root{--teal:#0B1020;--cream:#F4F1EA;--line:rgba(244,241,234,.14);--line2:rgba(244,241,234,.3);--muted:rgba(244,241,234,.78);--dim:rgba(244,241,234,.72)}
html,body{overflow:hidden;font-family:Manrope,sans-serif}
button,select,input,.phead h1,.mm-look,.cbtn,.hs-btn,.at-chip,.tr-badge,.dg-head h1,.dg-actions button,.mm-pop h6,.lk-pop h6{font-family:Manrope,sans-serif!important}
button:focus-visible,select:focus-visible,input:focus-visible,canvas:focus-visible,[tabindex]:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.phead h1{font-weight:600;letter-spacing:-.03em}
.phead .fresh{font-family:Manrope,sans-serif;letter-spacing:0}
.fresh i{background:#91B7A0;box-shadow:none;width:5px;height:5px}
.mm-look,.lf-theme,.lf-colour{font:500 12px Manrope,sans-serif;min-height:38px;border:1px solid var(--line2);padding:7px 10px;border-radius:7px;background:transparent;color:inherit;opacity:1;cursor:pointer;max-width:154px;margin-left:0}
.mm-look option,.lf-theme option,.lf-colour option{background:var(--lf-host-bg,#0B1020);color:var(--lf-host-fg,#F4F1EA)}
.lf-constellation .phead{padding:16px 22px 12px;gap:12px}
.lf-constellation .ctrl{padding:0 22px 14px;gap:10px}
.lf-constellation .srch{font:calc(13px * var(--ts,1)) Manrope,sans-serif;border-radius:7px;min-height:38px;min-width:240px;border-color:var(--ctl,var(--line2))}
.lf-constellation .srch input{font-size:calc(14px * var(--ts,1));color:var(--cream);min-width:0;flex:1}
.lf-constellation .srch input::placeholder{color:var(--dim);opacity:1}
.lf-constellation .seg{border-radius:7px;overflow:hidden;border-color:var(--ctl,var(--line2))}
.lf-constellation .seg span{font:500 calc(12px * var(--ts,1)) Manrope,sans-serif;min-height:36px;display:flex;align-items:center;padding:7px 12px;border-left-color:var(--ctl,var(--line2));cursor:pointer}
.lf-constellation .cbtn{font-weight:600;font-size:calc(12px * var(--ts,1));letter-spacing:0;border:1px solid var(--ctl,var(--line2));border-radius:7px;min-height:38px}
.lf-constellation .ltog{font:calc(11px * var(--ts,1)) Manrope,sans-serif;gap:13px}
.lf-constellation .ltog span{min-height:32px;cursor:pointer}
.lf-constellation .ltog i{width:7px;height:7px;box-shadow:none}
.lf-constellation .count{border-radius:5px;color:var(--dim);font:11px Manrope,sans-serif}
.lf-constellation .tip{border-radius:10px;background:var(--teal);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.lf-constellation .tip-text{font:calc(13px * var(--ts,1))/1.6 Manrope,sans-serif}
.lf-constellation .detail{box-shadow:-10px 0 35px rgba(0,0,0,.1)}
.lf-constellation .dt-head .ttl{font:600 16px Manrope,sans-serif;text-transform:none;letter-spacing:0}
.lf-constellation .dt-x{border-radius:7px;width:38px;height:38px}
.lf-constellation .mtext{font:14px/1.65 Manrope,sans-serif}
.lf-constellation .tabs button{font:500 12px Manrope,sans-serif}
.lf-constellation .tip-links,.lf-constellation .tip-id,.lf-constellation .ro,.lf-constellation .more,.lf-constellation .mm-hist-ts,.lf-constellation .mm-rp-ts,.lf-constellation .mm-pop h6,.lf-constellation .mm-pop-note,.lf-constellation .mm-opt small,.lf-constellation .mm-look,.lf-constellation .morebtn{opacity:1;color:var(--dim)}
.lf-constellation .badge,.lf-constellation .chips.tags span{color:var(--cream);background:color-mix(in srgb,var(--cream) 6%,var(--teal));border-color:var(--line2);font-family:Manrope,sans-serif;border-radius:4px}
.lf-constellation .linked li b,.lf-constellation .linked li em.why{color:var(--cream)}
.lf-constellation .chips.ents span{font-family:Manrope,sans-serif;border-radius:4px}
.lf-constellation [data-type].off{opacity:1;color:var(--dim);text-decoration:line-through}
.lf-constellation [data-type].off i{opacity:.25}
.lf-constellation button:disabled{opacity:1;color:var(--dim)}
.lf-constellation .row .k{font-family:Manrope,sans-serif;font-size:10px}
.lf-constellation .sec h6{font-family:Manrope,sans-serif;font-size:11px;letter-spacing:.05em}
.lf-constellation .mm-opt{font-family:Manrope,sans-serif}
.lf-constellation .tip-hint{font-family:Manrope,sans-serif;letter-spacing:0}
.d-a .phead,.d-d .at-top,.d-d .at-chips,.d-d .at-bottom{background:#0B1020}
.d-d .lk-pop{background:#111A30}
.d-d .at-chip.on,.d-d .at-new{color:#0B1020}
.d-d .at-chip{font-size:12px;border-radius:5px}
.d-d .at-top .mm-look{border-radius:6px}
.d-d .at-search{font:14px Manrope,sans-serif;border-radius:6px}
.d-d .at-card{border-radius:7px}
.d-d .at-card em.none,.d-d .at-h span{color:rgba(255,230,203,.68)}
.d-d .at-foot{font-size:11px}
.d-c .ov-title h1{font-family:Manrope,sans-serif;font-size:24px;font-weight:600;letter-spacing:.15em}
.d-c .ov-tools span.srch{font-family:Manrope,sans-serif}
.d-c .ov-title p{letter-spacing:.04em}
.d-e .tr-search .mm-q{font-family:Manrope,sans-serif}
.d-e .tr-about{background:#1B2340}
.d-e .tr-top .mm-look{min-width:120px}
/* Trace keeps its fixed light palette, and its words stay at 4.5:1 or better on the white search field and on the cream
   sheet and rows. The bright relation colours stay on the lines, legend marks and number discs; the words use darker shades. */
.d-e .mm-q::placeholder{color:#5e6b69;opacity:1}
.d-e .tr-why[style*="7c4dff" i] b{color:#5b36c9}
.d-e .tr-why[style*="2f6fe4" i] b{color:#1f55b8}
.d-e .tr-why[style*="e08a00" i] b{color:#8a5200}
.d-e .tr-why[style*="129e8f" i] b{color:#0b6a60}
.d-e .tr-empty,.d-e .tr-rp-wait,.d-e .tr-rp small{color:#5e6b69}
/* Digest's day caption on its dark page */
.d-f .dg-cap{color:rgba(244,234,216,.78)}
.d-f .dg-head h1{letter-spacing:.01em;text-transform:none}
.d-f .dg-n{font-family:Manrope,sans-serif;font-weight:600}
/* API-selected inspectors on editorial looks still use the same memory markup. */
.d-e .detail,.d-f .detail{position:fixed;top:4%;bottom:4%;right:24px;width:440px;max-height:92%;background:var(--lf-host-bg);color:var(--lf-host-fg);border:1px solid #8886;border-radius:12px;flex-direction:column;padding:18px;box-shadow:0 20px 60px #0005}
.d-e .detail .sec,.d-f .detail .sec{border-color:#8885}
.d-e .detail .dt-head,.d-f .detail .dt-head{margin-bottom:12px}
.d-e .detail .tabs,.d-f .detail .tabs{margin-bottom:12px}
.lf-backdrop .app{visibility:hidden;pointer-events:none}
.lf-backdrop #stage{visibility:visible!important;position:fixed!important;inset:0!important;min-height:0!important;width:100vw!important;height:100vh!important;border:0!important;z-index:1}
.lf-backdrop canvas#map{width:100%!important;height:100%!important;pointer-events:none}
.lf-backdrop #stage>:not(canvas){display:none!important}
.lf-backdrop::after{content:"";position:fixed;inset:0;z-index:5;pointer-events:none;background:var(--teal);opacity:var(--lf-dim,0)}
.lf-constellation,.lf-constellation *{font-family:Manrope,sans-serif!important}
.lf-host .phead,.lf-host .mm-look,.lf-host .mm-lookwrap,.lf-host .lf-theme,.lf-host .lf-colour,.lf-host .mm-full,.lf-host .ov-title,.lf-host .dg-head,.lf-host .detail{display:none!important}
.lf-host.lf-constellation .ctrl{padding-top:12px}
.lf-backdrop #stage{left:var(--lf-inset-left,0px)!important;top:var(--lf-inset-top,0px)!important;right:var(--lf-inset-right,0px)!important;bottom:var(--lf-inset-bottom,0px)!important;width:auto!important;height:auto!important}
.lf-backdrop::after{display:none}
.lf-reduced *{animation:none!important;transition:none!important}
@media(max-width:1100px) and (min-width:768px){.lf-constellation .ltog{display:none}.lf-constellation .fresh{display:none}}
@media(max-width:767px){
 .lf-constellation .phead{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding:12px 16px 10px}
 .lf-constellation .phead h1{font-size:17px;grid-row:1;grid-column:1}
 .lf-constellation .phead .count,.lf-constellation .phead .fresh,.lf-constellation .phead .spacer{display:none}
 .lf-constellation .phead .mm-look{grid-row:1;grid-column:2;justify-self:end;max-width:none;width:100%;font-size:12px;min-height:40px;margin:0}
 .lf-constellation .lf-colour{grid-row:2;grid-column:1;max-width:none;width:100%;min-height:38px}
 .lf-constellation .lf-theme{grid-row:2;grid-column:2;max-width:none;width:100%;min-height:38px}
 .lf-constellation .ctrl{padding:0 16px 12px;gap:8px}
 .lf-constellation .srch{min-width:0;min-height:44px}
 .lf-constellation .srch input{font-size:calc(16px * var(--ts,1))}
 .lf-constellation .cbtn{min-height:44px;font-size:calc(12px * var(--ts,1));letter-spacing:0}
 .lf-constellation .tip{left:12px!important;right:12px;bottom:44px;padding:12px 14px;max-height:66%;overflow:hidden}
 .lf-constellation .tip-text{font-size:14px;-webkit-line-clamp:4}
 .lf-constellation .detail{top:4%!important}
 .d-a .phead{padding:10px 14px;gap:8px}
 .d-a .phead h1{font-size:16px;white-space:nowrap}
 .d-a .phead .fresh{display:none}
 .d-a .phead .mm-look{max-width:125px;min-height:40px}
 .d-c .ov-title{left:16px;top:18px}
 .d-c .ov-title h1{font-size:19px;letter-spacing:.15em}
 .d-c .ov-tools{left:16px;right:16px;top:75px;gap:6px}
 .d-c .ov-tools span{padding:0 10px}
 .d-c .ov-tools span.srch{min-width:0;flex:1;max-width:calc(100% - 174px)}
 .d-c .ov-tools .mm-q{font-size:14px;min-width:0}
 .d-c .ov-tools .mm-lookwrap{min-width:119px}
 .d-c .ov-tools .mm-look{max-width:119px;font-size:11px}
 .d-d .at-top{gap:8px;padding:12px 14px 10px}
 .d-d .at-search{padding:0 10px;min-height:46px;gap:8px}
 .d-d .lk-q{font-size:16px}
 .d-d .at-top .mm-look{height:46px;max-width:121px}
 .d-d .at-chips{padding:0 14px 10px}
 .d-d .at-new{top:0;right:10px;min-height:36px;padding:4px 8px;font-size:11px;line-height:16px}
 .d-d .at-islands{padding:10px 0 10px 14px}
 .d-d .at-card{width:152px;min-height:82px}
 .d-d .at-h span{font-size:9px}
 .d-d .at-time{padding:10px 14px 12px}
 .d-d .at-range b{font-size:16px}
 .d-d .at-range small{font-size:10px}
 .d-d .at-hist{height:44px;margin-top:8px}
 .d-d .at-hist input{height:44px}
 .d-d .at-hist input::-webkit-slider-runnable-track{height:44px}
 .d-d .at-hist input::-webkit-slider-thumb{height:38px;margin-top:2px}
 .d-d .at-axis{font-size:9px}
 .d-d .at-foot{font-size:10px}
 .d-e .tr-search{padding:0 12px;min-height:48px;gap:8px}
 .d-e .tr-search .mm-q{font-size:16px}
 .d-e .tr-top .mm-look{min-width:110px}
 .d-e .tr-sum{font-size:10px;gap:8px}
 .d-e .tr-legend{font-size:10px;gap:6px 11px}
 .d-e .tr-meta{font-size:10px}
 .d-e .tr-text{font-size:17px}
 .d-e .tr-rows li{gap:8px}
 .d-e .tr-when{font-size:9px;max-width:68px}
 .d-e .tr-tabs button{font-size:12px}
 .d-e .tr-about{font-size:13px}
 .d-f .dg-head h1{font-size:20px}
 .d-f .dg-head .mm-look{max-width:121px;font-size:11px}
 .d-f .dg-nav b{font-size:16px}
 .d-f .dg-nav small{font-size:11px}
 .d-f .dg-big b{font-size:17px}
 .d-f .dg-big small{font-size:11px}
}

/* ================= Round 2 (G4 rework) ================= */
/* An embedded map never shows the standalone boot card: the host shows its own loading state, and the first paint is
   already the right background (map.html first-paint script), so nothing flashes navy in light mode. */
.lf-embedded .mm-boot{display:none!important}
.lf-sr{position:fixed;left:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Focus: a 2px ring offset 2px on every control, in the map's own ink */
.lf-constellation button:focus-visible,.lf-constellation [role="radio"]:focus-visible,.lf-constellation [role="button"]:focus-visible,.lf-constellation input:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
.lf-constellation .srch:focus-within{outline:2px solid var(--cream);outline-offset:2px}
.lf-constellation .srch input:focus-visible{outline:0}
canvas#map:focus-visible{outline:2px solid currentColor;outline-offset:-4px}
/* Selected filter options carry a second cue besides weight */
.mm-pop .mm-opt[data-type]::after{content:"";margin-left:10px;width:16px;height:16px;flex:none;border:1.5px solid currentColor;border-radius:4px}
.mm-pop .mm-opt[data-type]:not(.off)::after{background:currentColor;box-shadow:inset 0 0 0 3px var(--teal)}
/* Classic: the grey becomes Night sky navy and its surfaces (memory-and-map, Decided), controls reach 3:1 */
.d-a .hs-card,.d-a .detail{background:#0B1020;border-color:#28325C}
.d-a .hs-bar,.d-a .tabs,.d-a .tip-rows,.d-a .sec{border-color:#28325C}
.d-a .hs-in,.d-a .hs-btn,.d-a .hs-seg,.d-a .mm-look{border-color:#6E78A2}
.d-a .hs-in,.d-a .row .k,.d-a .mm-look{color:#B9C0DA}
.d-a .tip,.d-a .mm-pop{background:#111A30;border-color:#28325C}
.d-a .tabs button,.d-a .chips.ents span{background:#1F2951;border-color:#28325C}
.d-a .tabs button.on,.d-a .hs-seg span.on{background:#28325C}
.d-a .linked li:nth-child(odd){background:#0E142C}
/* Islands: navy surfaces, readable small text (4.5:1 on navy) */
.d-d .at-card{background:rgba(11,16,32,.6)}
.d-d .at-card small,.d-d .at-card em.none,.d-d .at-h span,.d-d .at-axis,.d-d .at-foot,.d-d .at-range small{color:rgba(255,230,203,.74)}
.d-d .at-search{border-color:rgba(255,230,203,.5)}
.d-d .at-chip{border-color:rgba(255,230,203,.5)}
/* The share picture is a dialog: visible focus inside it */
.lk-share button:focus-visible,.lk-share a:focus-visible{outline:2px solid currentColor;outline-offset:2px}
/* L-058: its backdrop is the look's own page colour at 96%, so nothing of the map reads through it (it was 82% black:
   the note printed over Islands' timeline dates and Digest's island bars). Under the app's glass the pop-up keeps clear
   of the header and of the legend and tab bar, by the hud top and bottom the app sends, and so does its picture. */
.d-d .lk-share{background:rgba(11,16,32,.96)}
.d-f .lk-share{background:rgba(21,18,14,.96)}
.lf-hudapp .lk-share{padding-top:var(--lf-hud-top);padding-bottom:var(--lf-hud-bottom)}
.lf-hudapp .lk-share img{max-height:min(66vh,calc(100vh - var(--lf-hud-top) - var(--lf-hud-bottom) - 150px))}

/* ---------- Dynamic Type: the host's text size (?ts=) reaches the map chrome ---------- */
.mm-pop{font-size:calc(12px * var(--ts,1))}
.mm-pop h6{font-size:calc(10px * var(--ts,1))}
.mm-opt small,.mm-pop-note{font-size:calc(10.5px * var(--ts,1))}
.lf-constellation .tip{max-width:calc(360px * var(--ts,1))}
[data-text="xl"] .lf-constellation .ctrl{flex-wrap:wrap;row-gap:8px}
[data-text="xl"] .lf-constellation .srch{flex:1 1 100%;min-width:0}
[data-text="xl"] .lf-constellation .seg{flex-wrap:wrap}
[data-text="xl"] .lf-constellation .ltog{flex-wrap:wrap;row-gap:4px}
[data-text="xl"] .mm-pop{max-height:calc(100% - 24px);overflow:auto;min-width:calc(230px * 1.4)}
[data-text="xl"] .mm-opt{min-height:44px}
/* the other looks: their chrome grows as a block and reflows inside its width (CSS zoom), the canvas keeps its size */
[data-text="xl"] .d-a .phead,[data-text="xl"] .d-a .hs-bar{zoom:var(--ts,1)}
[data-text="xl"] .d-a .hs-bar{flex-wrap:wrap}
[data-text="xl"] .d-c .ov-title,[data-text="xl"] .d-c .ov-tools{zoom:var(--ts,1)}
[data-text="xl"] .d-c .ov-tools{left:8px;right:8px}
[data-text="xl"] .d-c .ov-tools span.srch{flex:1;min-width:0;max-width:none}
[data-text="xl"] .d-d .at-top,[data-text="xl"] .d-d .at-chips{zoom:var(--ts,1)}
[data-text="xl"] .d-d .at-bottom{zoom:calc(1 + (var(--ts,1) - 1) * .6)}
[data-text="xl"] .d-e .tr-top{zoom:var(--ts,1)}
[data-text="xl"] .d-e .tr-sheet{zoom:calc(1 + (var(--ts,1) - 1) * .6)}
[data-text="xl"] .d-f .dg-head,[data-text="xl"] .d-f .dg-nav,[data-text="xl"] .d-f .dg-big,[data-text="xl"] .d-f .dg-pills,[data-text="xl"] .d-f .dg-h,[data-text="xl"] .d-f .dg-chips,[data-text="xl"] .d-f .dg-bars,[data-text="xl"] .d-f .dg-moments,[data-text="xl"] .d-f .dg-fresh,[data-text="xl"] .d-f .dg-actions,[data-text="xl"] .d-f .dg-cap{zoom:var(--ts,1)}
[data-text="xl"] .lk-share{zoom:var(--ts,1)}
/* No memories to draw (bootstrap.js LF_EMPTY_MAP): the Memories page's own empty state, centred on the empty sky, in the
   host's DESIGN.md tokens, which bootstrap.js loads only for this (components 'empty', 't-headline', 'button-secondary').
   A backdrop never shows it. */
.lf-empty{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px 24px;text-align:center;font-family:var(--font);color:var(--text)}
.lf-empty h1{margin-top:8px;font-size:calc(17px * var(--ts,1));font-weight:600;line-height:1.3}
.lf-empty p{max-width:300px;color:var(--text-secondary);font-size:calc(13.5px * var(--ts,1));line-height:1.5}
.lf-empty-act{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch);padding:0 18px;margin-top:8px;border-radius:var(--r-full);background:var(--bg-glow);color:var(--text);box-shadow:inset 0 0 0 1px var(--btn-line);font-size:calc(13.5px * var(--ts,1));font-weight:700;line-height:1;text-decoration:none;white-space:nowrap}
.lf-empty-act:hover{background:color-mix(in srgb,var(--bg-glow) 88%,var(--text))}
.lf-empty-act:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* L-029: a Map looks card. The look as it is (Observatory's dial, Islands' names, Digest's page, Trace's paper), without
   its search bars, chips, buttons or hints, and with nothing to touch: the card itself is the button. */
.lf-card{pointer-events:none;user-select:none;-webkit-user-select:none;overflow:hidden}
.lf-card .hs-bar,.lf-card .at-top,.lf-card .at-chips,.lf-card .ctrl,.lf-card #tip,.lf-card .tip,.lf-card .phead select,
.lf-card .dg-actions,.lf-card .dg-open,.lf-card #stage>:not(canvas){display:none!important}
/* L-028: the app's glass search and Links stand in for the map's own row; the Links list opens under the app's. */
.lf-hudapp .ctrl,.lf-hudapp .ov-tools{display:none!important}
/* L-032: under the app's glass (hud=app) every look keeps clear of the app's header and its legend and tab bar
   (--lf-hud-top and --lf-hud-bottom, sent by the app with its inset), and drops its own search, Links and look picker,
   which the app's glass already has. The look's own controls (Islands' filters, Trace's summary, Digest's day) stay. */
.lf-hudapp{--lf-hud-top:var(--lf-hud-top-app,160px);--lf-hud-bottom:var(--lf-hud-bottom-app,132px)}
.lf-hudapp .mm-links,.lf-hudapp.d-a .hs-bar,.lf-hudapp.d-d .at-top,.lf-hudapp.d-e .tr-searchrow{display:none!important}
.lf-hudapp.d-d #page{padding-top:var(--lf-hud-top);overflow-y:auto!important;display:block!important;-webkit-overflow-scrolling:touch}
.lf-hudapp.d-d #page>#stage,.lf-hudapp.d-d #page .stage{position:relative!important;height:52vh!important;min-height:300px;flex:none!important}
.lf-hudapp.d-d .at-bottom{padding-bottom:var(--lf-hud-bottom)}
.lf-hudapp.d-e .tr-top{top:var(--lf-hud-top)!important;padding-top:0!important}
/* L-059: under the glass Trace's sheet runs to the screen's bottom edge in the glass's colour for its sky (Trace is
   paper in both modes, so the light glass: its fill, white at 55%, laid over the paper #f1ede6), not the page's own
   cream #fffdf8 lifted above the foot. Its content is padded above the legend and tab bar (the hud bottom), not the
   sheet lifted: the same top as the lift gave it, so the room for the content is the same. A wide window keeps its
   side panel (the base rule), which starts its first line below the app's header. */
.lf-hudapp.d-e .tr-sheet{background:#f9f7f4}
@media (max-width:767px){
 .lf-hudapp.d-e .tr-sheet{bottom:0!important;height:calc(54% + 40px)!important}
 .lf-hudapp.d-e .tr-body{padding-bottom:calc(var(--lf-hud-bottom) + 90px)}
 .lf-hudapp.d-e .tr-about{bottom:calc(var(--lf-hud-bottom) + 14px)}
}
@media (min-width:768px){.lf-hudapp.d-e .tr-body{padding-top:var(--lf-hud-top)}}
.lf-hudapp.d-f #page{padding-top:var(--lf-hud-top)!important;padding-bottom:calc(var(--lf-hud-bottom) + 76px)!important}
.lf-hudapp.d-f .dg-actions{bottom:var(--lf-hud-bottom)!important;padding-bottom:12px!important}
/* L-056: the Links list opens from the app's pill under its header and ends above its legend and tab bar (the hud top
   and bottom the app sends), scrolling inside itself when it's taller. It is fixed to the screen: in Islands, whose
   page scrolls, a fixed 118 px from the top of the stage opened it mid-screen, and it ran 803 px down, under the
   legend. */
.lf-hudapp .mm-pop{position:fixed!important;top:var(--lf-hud-top)!important;bottom:auto!important;max-height:calc(100% - var(--lf-hud-top) - var(--lf-hud-bottom))!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch}

/* L-041: Trace's one sheet under the app (chrome=host, app.js lkSheet). Its handle is a button the width of the sheet
   (a tap or a swipe on it); on a phone the sheet is a slim bar until a memory is tapped and after a swipe down, and
   it's put away while the app's own Memory card is open. */
.d-e .tr-grip{position:relative;width:100%;height:26px;margin:0;padding:0;border:0;background:none;
  flex:none;cursor:pointer;touch-action:none}
.d-e .tr-grip::before{content:"";position:absolute;left:50%;top:10px;width:44px;height:5px;margin-left:-22px;
  border-radius:3px;background:#a8a297}
.d-e .tr-grip:focus-visible{outline:2px solid #1d2b2a;outline-offset:-2px;border-radius:22px 22px 0 0}
.d-e .tr-meta>span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.d-e .tr-open{flex:none;min-height:36px;padding:0 12px;border-radius:18px;background:#ebe7df;color:#1d2b2a;
  font:600 12.5px Manrope,sans-serif;letter-spacing:0}
.lf-host.d-e .tr-sheet.tr-away{display:none!important}
@media (max-width:767px){
  .lf-host.d-e .tr-sheet.tr-slim{height:auto!important;touch-action:none;cursor:pointer}
  .lf-host.d-e .tr-sheet.tr-slim .tr-body{flex:none;max-height:40px;overflow:hidden;padding-bottom:14px}
  .lf-host.d-e .tr-sheet.tr-slim .tr-body>:not(:first-child),.lf-host.d-e .tr-sheet.tr-slim .tr-about,
  .lf-host.d-e .tr-sheet.tr-slim .tr-open{display:none!important}
  .lf-host.d-e .tr-sheet.tr-slim .tr-text{margin-top:0;font-size:15px;-webkit-line-clamp:1}
  /* L-059: the slim bar's line sits right above the legend and tab bar, on a sheet that runs to the edge. The cap holds
     the padding too (border-box), so it grows with it, or the padded bar would clip its own line. */
  .lf-hudapp.lf-host.d-e .tr-sheet.tr-slim .tr-body{max-height:calc(var(--lf-hud-bottom) + 40px);padding-bottom:calc(var(--lf-hud-bottom) + 14px)}
}

/* L-060 (mock docs/mocks/l060-digest-phone-A.png): Digest on a phone, the page narrower than 768 px (the iPhone's
   view and a narrow website). The markup is the phone's own (app.js lkDigestPhoneHTML, built when MOBILE), so these
   rules are all inside the line and the wide page's rules in index.html are as they were. One column: the day as one
   block (the count big in gold beside the date and its line, which wrap and are never cut, and the two day arrows at
   the right), the chips, the caption above the map card (the hero), Islands (the names cut with an ellipsis), Most
   mentioned and Moments. Share as image is a round gold button floating at the bottom right. Under the app's glass
   the page starts below its search row (--lf-hud-top) and scrolls to above its tab bar (--lf-hud-bottom): the app
   hides its legend and pinch hint on Digest, so the button sits 30 px lower than that line, the room the legend would
   have had. */
@media (max-width:767px){
 .d-f .dg{max-width:none;margin:0;padding:16px 16px 110px}
 .d-f .dg-block{position:relative;display:flex;align-items:center;gap:14px;min-height:64px;margin-top:14px;padding-right:100px}
 .d-f .dg-block .dg-n{flex:none;font:700 56px/1 Manrope,sans-serif}
 .d-f .dg-when{flex:1;min-width:0}
 .d-f .dg-when b{display:block;font:600 19px/1.25 Inter,sans-serif;overflow-wrap:anywhere}
 .d-f .dg-when small{display:block;margin-top:4px;font:13px/1.45 "JetBrains Mono",monospace;color:rgba(244,234,216,.62);overflow-wrap:anywhere}
 .d-f .dg-step{position:absolute;right:0;top:50%;display:flex;gap:6px;transform:translateY(-50%)}
 .d-f .dg-step button{width:44px;height:44px;border:1px solid rgba(244,234,216,.18);border-radius:50%;font-size:24px;line-height:1;color:#f4ead8}
 .d-f .dg-step button:disabled{opacity:.3}
 .d-f .dg-pills{margin-top:16px}
 .d-f .dg-pills span{min-height:34px;padding:0 12px;border-radius:17px;white-space:nowrap}
 .d-f .dg-pills b{font-weight:600;color:#f2b33d}
 .d-f .dg-h{margin:24px 0 10px}
 .d-f .dg-glows{margin-top:22px}
 .d-f .dg-map{height:clamp(190px,50vw,240px);margin-top:0}
 .d-f .dg-bars div{grid-template-columns:minmax(0,44%) minmax(0,1fr) 26px;gap:12px}
 .d-f .dg-chips button{min-height:44px;padding:0 16px;font-size:15px}
 .d-f .dg-actions{left:auto;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));padding:0;background:none;pointer-events:none}
 .d-f .dg-actions button{flex:none;width:56px;min-height:56px;padding:0;border-radius:50%;pointer-events:auto;box-shadow:0 8px 24px rgba(0,0,0,.45)}
 .d-f .dg-share svg.i{width:24px;height:24px}
 .lf-hudapp.d-f #page{padding-bottom:calc(var(--lf-hud-bottom) + 24px)!important}
 .lf-hudapp.d-f .dg{padding-bottom:16px}
 .lf-hudapp.d-f .dg-actions{bottom:max(16px,calc(var(--lf-hud-bottom) - 30px))!important;padding-bottom:0!important}
}
[data-text="xl"] .d-f .dg-block{zoom:var(--ts,1)}

/* L-061: Galaxy's reset button (index.html, shown by embed.js on Galaxy only): small, round, at the right above the
   legend. The page's own legend is on the canvas's foot; under the app's glass the legend is the app's, so the button
   keeps above the glass's foot (--lf-hud-bottom). A Map looks card has none. */
.lf-reset{position:fixed;right:12px;bottom:calc(52px + env(safe-area-inset-bottom));z-index:20;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid rgba(244,241,234,.38);border-radius:50%;background:rgba(11,16,32,.72);color:#f4f1ea;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lf-reset[hidden]{display:none}
.lf-reset svg{width:20px;height:20px}
.lf-reset:focus-visible{outline:2px solid #f4f1ea;outline-offset:2px}
.lf-hudapp .lf-reset{bottom:calc(var(--lf-hud-bottom) + 8px)}
.lf-card .lf-reset{display:none!important}