/* ============================================================
   THE DREAM — launch.css, the launcher (public/index.html)
   ------------------------------------------------------------
   Built on dream.css; everything here is .ln-*. The page reads like the
   menu card of a good restaurant: the crest up top, the shop chosen on a
   rule, the three screens set out as courses (name, a dotted leader, the
   device it lives on), the addresses to type underneath, and the tagline
   at the foot. The kiosk is the one gold-lit choice.
   ============================================================ */

.ln{--dq-max:960px;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.ln-main{width:100%;max-width:880px;margin:0 auto}

/* ---------- the crest and the title ---------- */
.ln-head{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-top:clamp(0px,1.2vmin,14px)}
.ln-logo{display:block;width:auto;height:clamp(84px,calc(22px + 9vmin),126px);
  filter:drop-shadow(0 10px 28px rgba(0,0,0,.6))}
.ln-head .dq-eyebrow{margin-top:clamp(12px,2vmin,20px)}
.ln-head .dq-display{margin-top:clamp(8px,1.3vmin,14px)}
.ln-head .dq-lede{margin-top:clamp(10px,1.6vmin,16px);max-width:50ch}

/* ---------- which shop: a segmented control set on a hairline rule ---------- */
.ln-shop{display:grid;justify-items:center;gap:10px;margin-top:clamp(22px,3.4vmin,36px)}
.ln-shop-line{display:flex;align-items:center;gap:clamp(14px,2.4vmin,26px);width:100%}
.ln-shop-line::before,.ln-shop-line::after{content:"";flex:1 1 0;min-width:12px;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair-2) 70%,rgba(247,169,69,.35))}
.ln-shop-line::after{transform:scaleX(-1)}
.ln-seg{flex:0 1 auto}
.ln-seg > button{padding:0 clamp(22px,calc(10px + 2.8vmin),40px);font-size:var(--dq-fs-body);letter-spacing:.01em}

/* ---------- the menu: three screens ---------- */
.ln-menu{margin-top:clamp(18px,2.8vmin,28px)}
.ln-items{gap:clamp(10px,calc(5px + .9vmin),14px)}
/* the rows sit straight on the ground, so they frost it like the glass panels
   do: without the blur the big faint logo reads sharply through them */
.ln-item{gap:clamp(14px,calc(8px + 1.5vmin),24px);
  padding:clamp(15px,calc(6px + 1.6vmin),24px) clamp(16px,calc(8px + 1.9vmin),30px);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.ln-item.dq-enter{animation-delay:calc(var(--i,0) * 70ms)}
.ln-item .dq-num{--dq-ns:clamp(36px,calc(26px + 1.8vmin),46px)}

.ln-item-body{flex:1 1 auto;min-width:0;display:block}
.ln-item-top{display:flex;align-items:baseline;gap:clamp(10px,1.5vmin,16px);min-width:0}
.ln-item-name{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font:600 clamp(24px,calc(14px + 2.2vmin),34px)/1.12 var(--serif);letter-spacing:-.005em;color:var(--ink)}
/* the dotted leader from the dish to its price */
.ln-leader{flex:1 1 auto;min-width:20px;height:2px;position:relative;top:-.28em;
  background:radial-gradient(circle,rgba(242,232,214,.34) 0 .9px,transparent 1.2px) 0 50% / 8px 2px repeat-x}
.ln-item-where{flex:none;font:700 var(--dq-fs-eyebrow)/1 var(--sans);letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-2)}
.ln-item-desc{display:block;margin-top:clamp(3px,.6vmin,6px);
  font:500 var(--dq-fs-body)/1.45 var(--sans);color:var(--ink-3);text-wrap:pretty}

.ln-go{flex:none;display:grid;place-items:center;border-radius:50%;
  width:clamp(38px,calc(28px + 1.8vmin),48px);height:clamp(38px,calc(28px + 1.8vmin),48px);
  border:1px solid var(--hair-2);color:var(--ink-2);
  transition:color .18s,border-color .18s,background-color .18s}
.ln-go svg{width:46%;height:46%}
@media (hover:hover){
  .ln-item:hover .ln-go{color:var(--gold-hi);border-color:var(--dq-gold-line)}
  .ln-item:hover .ln-item-where{color:var(--ink)}
}

/* the gold-lit course */
.ln-item.dq-lead .ln-leader{background-image:radial-gradient(circle,rgba(247,169,69,.55) 0 .9px,transparent 1.2px)}
.ln-item.dq-lead .ln-item-where{color:var(--gold)}
.ln-item.dq-lead .ln-item-desc{color:var(--ink-2)}
.ln-item.dq-lead .ln-go{color:var(--gold-hi);border-color:var(--dq-gold-line);background:rgba(247,169,69,.1)}

/* ---------- the addresses to type ---------- */
.ln-addr{margin-top:clamp(28px,5vmin,52px)}
.ln-addr-title{font:600 var(--dq-fs-h3)/1.15 var(--serif);color:var(--ink)}
.ln-addr-title em{font-style:italic;color:var(--gold)}
.ln-addr-lede{margin-top:6px}
.ln-addrs{display:grid;gap:var(--dq-gap-row);margin-top:clamp(14px,2.4vmin,22px)}

.ln-addr-row{display:grid;justify-items:start;gap:10px;min-width:0;
  padding:clamp(14px,calc(8px + 1.4vmin),20px) clamp(16px,calc(9px + 1.5vmin),24px);
  border-radius:var(--dq-r-row);background:var(--glass);border:1px solid var(--dq-hair-row)}
/* the one to use gets a warm hairline; the one that won't work steps back */
.ln-addr-row.is-good{border-color:rgba(247,169,69,.24);
  background:linear-gradient(90deg,rgba(247,169,69,.05),transparent 55%),var(--glass)}
.ln-addr-row .dq-pill{white-space:normal;line-height:1.25;padding-block:6px}

/* the address itself: large, light, and selected whole with one tap. On a
   narrow phone it shrinks until the longest LAN address (http://192.168.254.132:3000,
   about 13.5em) fits between the panel edges (104px of gutter, padding and
   border), so it never splits mid-number; the markup only offers breaks after
   http:// and before the port. */
.ln-url{display:block;max-width:100%;overflow-wrap:break-word;
  font:300 min(clamp(24px,calc(10px + 2.8vmin),38px),calc((100vw - 104px) / 13.5))/1.15 var(--sans);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;color:var(--ink);
  -webkit-user-select:all;user-select:all}
.ln-url.is-dim{color:var(--ink-3);font-size:min(clamp(20px,calc(9px + 2vmin),28px),calc((100vw - 104px) / 13.5))}
.ln-addr-hint{font:500 var(--dq-fs-small)/1.4 var(--sans);color:var(--ink-3)}

/* hosted: a name on the left, the full address on the right, its path in gold */
.ln-addr-row--link{grid-template-columns:6.25em minmax(0,1fr);align-items:baseline;column-gap:clamp(12px,2vmin,20px);row-gap:6px}
.ln-addr-tag{font:700 var(--dq-fs-eyebrow)/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.ln-url--link{font:500 clamp(16px,calc(11px + 1.1vmin),21px)/1.35 var(--sans);letter-spacing:0}
.ln-url b{font-weight:700;color:var(--gold)}

/* said plainly when the other devices can't reach this computer */
.ln-warn{display:flex;align-items:flex-start;gap:12px;
  padding:clamp(12px,calc(8px + 1vmin),16px) clamp(16px,calc(9px + 1.5vmin),22px);
  border-radius:var(--dq-r-row);border:1px solid var(--dq-warn-line);background:var(--dq-warn-tint);
  font:600 var(--dq-fs-small)/1.45 var(--sans);color:var(--dq-warn-ink);text-wrap:pretty}
.ln-warn::before{content:"";flex:none;width:8px;height:8px;margin-top:.5em;border-radius:50%;
  background:var(--gold-lo);box-shadow:0 0 10px rgba(217,138,43,.7)}

.ln-addr-foot{margin-top:clamp(14px,2vmin,18px)}
.ln-addr-foot code{font:700 .95em/1 var(--sans);color:var(--ink-2);white-space:nowrap;
  padding:3px 8px;border-radius:7px;border:1px solid var(--hair-2);background:rgba(255,244,228,.04)}

/* ---------- the foot ---------- */
.ln-foot{margin-top:auto;padding-top:clamp(34px,6vmin,64px)}

/* ---------- a phone ---------- */
@media (max-width:599px){
  /* the rules either side of the shop picker would only be stubs here */
  .ln-shop-line{justify-content:center}
  .ln-shop-line::before,.ln-shop-line::after{display:none}
  .ln-item{align-items:flex-start}
  .ln-item .dq-num{margin-top:1px}
  .ln-go{display:none}
  .ln-addr-row--link{grid-template-columns:minmax(0,1fr)}
}