/* Indigo's install page: two questions, then one setup's four steps.
   Without site.js every setup's section shows, each with its own heading, and
   the guide's own table links them; the questions appear only with it. */

/* With scripting, show the questions and only the chosen setup from the
   first paint: (scripting) covers the moment before site.js runs, .js the
   browsers that do not know that media feature. */
@media (scripting:enabled){
  .setup-guide .chooser{display:block}
  .setup-guide .route:not(.on),.setup-guide [data-route-table]{display:none}
}
.js .setup-guide .chooser{display:block}
.js .setup-guide .route:not(.on),.js .setup-guide [data-route-table]{display:none}

.setup-guide .chooser h2{font-size:18px;margin:22px 0 10px}
.setup-guide .choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.setup-guide .ask-start .choices{grid-template-columns:repeat(2,minmax(0,1fr))}
.setup-guide .choices button{appearance:none;font:600 15px/1.35 var(--font);color:var(--fg);text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;min-height:56px}
.setup-guide .choices button small{display:block;font-weight:400;font-size:13px;color:var(--muted);margin-top:3px}
.setup-guide .choices button:hover{border-color:var(--brand)}
.setup-guide .choices button[aria-pressed="true"]{border-color:var(--focus);box-shadow:inset 0 0 0 1px var(--focus);background:var(--pill)}
.setup-guide .choices button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:600px){.setup-guide .choices{grid-template-columns:repeat(2,minmax(0,1fr))}}

.setup-guide .route h2{margin-top:30px}
.setup-guide a.download{display:inline-block;background:var(--cta-bg);color:var(--cta-fg);font-weight:600;
  padding:4px 14px;border-radius:9px;margin:2px 0}
.setup-guide a.download:hover{text-decoration:none;filter:brightness(1.1)}

/* The card as a tree: step 3's (what the copy changes) and the whole card at
   the end of each setup (where everything goes; a row with a note opens it). */
.setup-guide{
  --icon-file:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 1.5h6l3 3v10h-9zM9.5 1.5v3h3' fill='none' stroke='black' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-dir:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 3.5h4.5l1.5 1.5h7v8.5h-13z' fill='none' stroke='black' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E")}
.setup-guide .card-layout{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 12px 10px;margin:10px 0 14px;max-width:440px}
.setup-guide .card-layout.whole-card{max-width:600px}
.setup-guide .card-root{font-weight:600;margin:0 0 4px 8px}
.setup-guide .card-layout ul{list-style:none;margin:0;padding:0}
.setup-guide .card-layout ul ul{margin:0 0 0 15px;padding-left:12px;border-left:1px solid var(--line)}
.setup-guide .card-layout li{margin:0;padding:1px 0}
.setup-guide .card-layout code{background:none;padding:0;font-size:15px}
.setup-guide .card-layout .row,.setup-guide .card-layout summary{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;padding:3px 8px;border-radius:8px}
.setup-guide .icon{flex:none;width:15px;height:15px;background:var(--muted);-webkit-mask:var(--icon-file) center/contain no-repeat;mask:var(--icon-file) center/contain no-repeat}
.setup-guide li.dir>.row .icon,.setup-guide li.dir>details>summary .icon{-webkit-mask-image:var(--icon-dir);mask-image:var(--icon-dir)}
.setup-guide .caption{color:var(--muted);font-size:14px}
.setup-guide .card-layout details{background:none;border:0;border-radius:0;padding:0;margin:0}
.setup-guide .whole-card summary{position:relative;padding-right:26px;cursor:pointer;list-style:none;font-weight:400;margin:0;transition:background-color .15s ease}
.setup-guide .whole-card summary::-webkit-details-marker{display:none}
.setup-guide .whole-card summary::after{content:"";position:absolute;right:11px;top:calc(50% - 4px);width:6px;height:6px;border:solid var(--muted);border-width:0 1.5px 1.5px 0;transform:rotate(-45deg);transition:transform .18s ease}
.setup-guide .whole-card summary:hover,.setup-guide .whole-card details[open]>summary{background:var(--pill)}
.setup-guide .whole-card details[open]>summary::after{transform:rotate(45deg)}
.setup-guide .whole-card details[open]>summary{margin-bottom:0}
.setup-guide .whole-card summary:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.setup-guide .note{margin:3px 0 6px 31px;padding:7px 12px;border-left:2px solid var(--brand);font-size:14px;line-height:1.5;animation:note-in .2s ease-out}
.setup-guide .map-title{margin:28px 0 4px}
/* Choosing a setup brings its steps in, and its trees fill in row by row. */
.setup-guide .route.on{animation:route-in .25s ease-out}
.setup-guide .route.on .card-layout>ul>li{animation:row-in .3s ease-out both}
.setup-guide .route.on .card-layout>ul>li:nth-child(2){animation-delay:.04s}
.setup-guide .route.on .card-layout>ul>li:nth-child(3){animation-delay:.08s}
.setup-guide .route.on .card-layout>ul>li:nth-child(4){animation-delay:.12s}
.setup-guide .route.on .card-layout>ul>li:nth-child(n+5){animation-delay:.16s}
@keyframes note-in{from{opacity:0;transform:translateY(-4px)}}
@keyframes route-in{from{opacity:0}}
@keyframes row-in{from{opacity:0;transform:translateX(-6px)}}
@media (prefers-reduced-motion:reduce){
  .setup-guide .note,.setup-guide .route.on,.setup-guide .route.on .card-layout>ul>li{animation:none}
  .setup-guide .whole-card summary,.setup-guide .whole-card summary::after{transition:none}
}
.setup-guide .state{display:inline-block;font-size:12px;font-weight:600;line-height:1.5;padding:0 8px;border-radius:999px;margin-left:8px;vertical-align:1px}
.setup-guide .state.new{background:#e2f3e7;color:#1d6533}
.setup-guide .state.unchanged{background:var(--pill);color:var(--muted)}
@media (prefers-color-scheme:dark){
  /* --muted on the dark pill is 3.9:1; small text needs 4.5:1. */
  .setup-guide .state.unchanged,.setup-guide .choices button[aria-pressed="true"] small,
  .setup-guide .whole-card summary:hover .caption,.setup-guide .whole-card details[open]>summary .caption{color:#c3c8cf}
  .setup-guide .state.new{background:rgba(70,190,110,.2);color:#9be3b2}
}