/* Make it smooth (smooth.js, design round: Colin's pick C): a camp window with no tab. Browser and device chips on
   top, a 1-2-3 list of steps showing only the picked way, "Video settings" and "Back to camp" always on screen. The
   Lantern UI: the picks are amber pills on the wood, each step a parchment card with dark ink. */
.sm { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; }
.sm-scroll { display: grid; align-content: start; gap: 14px; min-height: 0; padding: 16px 22px 14px; }
.sm-lead, .sm-why, .sm-then { max-width: 65ch; }
.sm-lead { margin: 0; font: 400 1.05rem/1.45 var(--f-text); color: var(--ink-dim); }

/* the pickers: nothing is detected, the first of each shows until the player picks */
.sm-pickers { display: grid; gap: 8px; padding: 12px 14px; clip-path: var(--notch); background: var(--well, #5f321d); box-shadow: inset 0 0 0 var(--u) var(--win-edge); }
.sm-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sm-pick-l { width: 7.5em; font: 700 1rem/1.15 var(--f-label); color: var(--ink-dim); text-shadow: var(--ol1); }
.sm-chip { min-height: 44px; min-width: 44px; padding: 4px 14px; border: 0; border-radius: 0; clip-path: var(--notch); background: transparent;
  font: 700 1rem/1 var(--f-label); color: var(--ink-dim); text-shadow: var(--ol1); cursor: pointer; }
.sm-chip:hover { color: var(--gold); }
.sm-chip.on { background: var(--amber); color: var(--win-ink); box-shadow: inset 0 calc(var(--u) * -2) 0 var(--amber-lo), inset 0 0 0 var(--u) var(--win-edge); }
.sm-chip:focus-visible, html[data-input="pad"] .sm-chip:focus { outline: none; box-shadow: var(--ring-on); }

/* the steps */
.sm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sm-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 12px 16px 14px; clip-path: var(--notch);
  background: var(--parch-tex) 0 0 / 128px, var(--parch); box-shadow: inset 0 0 0 var(--u) var(--parch-edge); color: var(--parch-ink); }
.sm-item:focus-visible, html[data-input="pad"] .sm-item:focus { outline: none; box-shadow: inset 0 0 0 var(--u) var(--parch-edge), inset 0 0 0 calc(var(--u) * 2) var(--gold), inset 0 0 0 calc(var(--u) * 3) var(--parch-edge); }
.sm-num { display: grid; place-items: center; width: 44px; height: 44px; clip-path: var(--notch); background: var(--amber); box-shadow: inset 0 calc(var(--u) * -2) 0 var(--amber-lo), inset 0 0 0 var(--u) var(--win-edge);
  font: 700 1.4rem/1 var(--f-num); color: var(--win-ink); }
.sm-txt { display: grid; gap: 6px; min-width: 0; }
.sm-txt h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 1.2rem/1.15 var(--f-label); color: var(--parch-ink); text-shadow: none; }
.sm-hi { width: 22px; height: 22px; flex: none; }
.hub .sm-item, .hub .sm-item * { text-shadow: none; }
.sm-why { margin: 0; font: 400 1rem/1.4 var(--f-text); color: var(--parch-ink-dim); }

/* one way: who it's for, then the menu path as chips. A "›" is held to the chip before it, so no line starts with
   one; on wide screens the setting's own name stays on one line too */
.sm-way { display: grid; gap: 4px; }
.sm-who { font: 700 1rem/1.15 var(--f-label); color: var(--parch-ink); text-shadow: none; }
.sm-path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.sm-hop { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.sm-seg { padding: 3px 8px; clip-path: var(--notch); background: var(--parch-lit); box-shadow: inset 0 0 0 var(--u) rgba(82, 41, 25, 0.6);
  font: 600 0.92rem/1.2 var(--f-text); color: var(--parch-ink); text-shadow: none; }
.sm-seg.last { font-weight: 700; box-shadow: inset 0 0 0 var(--u) var(--parch-edge), inset 0 0 0 calc(var(--u) * 2) var(--amber); }
.sm-sep { font: 700 0.95rem/1 var(--f-label); color: var(--parch-ink-dim); }
.sm-set { padding: 3px 8px; clip-path: var(--notch); background: #4f8f2a; font: 700 0.9rem/1.2 var(--f-label); color: #fff1d6; text-shadow: var(--ol1); }
.sm-path kbd { display: inline-grid; place-items: center; min-width: 2em; height: 1.8em; padding: 0 6px; border: 0; border-radius: 0; clip-path: var(--notch);
  background: var(--parch-lit); box-shadow: inset 0 0 0 var(--u) var(--parch-edge); font: 700 0.95rem/1 var(--f-label); color: var(--parch-ink); text-shadow: none; }
.sm-then { margin: 0; font: 400 0.92rem/1.35 var(--f-text); color: var(--parch-ink-dim); }
@media (min-width: 761px) { .sm-seg.last { white-space: nowrap; } }

/* the buttons, under the scrolling list so they never leave the screen */
.sm-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding: 10px 22px 14px; box-shadow: inset 0 var(--u) 0 var(--win-edge); }
.sm-foot .btn { min-height: 48px; }

/* the window has no tab, so the tab row goes while it's open */
.hub.tabless .hub-tabs { display: none; }
/* the camp notes' link here */
.camp-link { color: var(--win-ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.camp-link:hover { color: var(--gold); }

@media (max-width: 760px) {
  .sm-scroll { padding: 12px 14px 12px; }
  .sm-pick-l { width: 100%; }
  .sm-item { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 10px 12px 12px; }
  .sm-num { width: 34px; height: 34px; font-size: 1.15rem; }
  .sm-foot { padding: 8px 14px 12px; }
  .sm-foot .btn { flex: 1 1 auto; }
}